dOrgTech · ashutoshpw · Nov 16, 2024 · Mar 24, 2024 · Dec 7, 2023 · Jan 5, 2024
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v18.20.0
+v22.11.0
diff --git a/craco.config.js b/craco.config.js
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@100;200;300;400;500;600;700&family=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet">
+
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="DAO Creator & Explorer On Tezos"
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>Tezos Homebase</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -2,16 +2,19 @@
   "name": "@dorgtech/homebase-dapp",
   "version": "0.0.1",
   "license": "MIT",
+  "engines": {
+    "node": ">=22.11.0"
+  },
   "scripts": {
     "start": "serve -s build",
-    "dev": "craco start",
-    "build": "craco build && echo '/* /index.html 200' | cat >build/_redirects ",
-    "analyze": "source-map-explorer 'build/static/js/*.js'",
+    "dev": "vite",
+    "build": "vite build && echo '/* /index.html 200' | cat >build/_redirects ",
+    "preview": "vite preview",
+    "analyze": "source-map-explorer 'build/assets/*.js'",
     "test": "playwright test --project=chromium",
     "test:ui": "playwright test --ui",
     "test:debug": "playwright test --debug",
     "test:codegen": "playwright codegen",
-    "eject": "craco eject",
     "lint:ci": "eslint --color 'src/**/*.{js,jsx,ts,tsx}'",
     "lint:check": "eslint --quiet 'src/**/*.{js,jsx,ts,tsx}'",
     "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'",
@@ -20,7 +23,6 @@
   "dependencies": {
     "@airgap/beacon-sdk": "^4.2.2",
     "@airgap/beacon-types": "^4.2.2",
-    "@craco/craco": "^7.1.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^2.8.1",
@@ -79,7 +81,6 @@
     "react-query": "^3.13.0",
     "react-router-dom": "^5.2.0",
     "react-router-hash-link": "^2.4.3",
-    "react-scripts": "^5.0.1",
     "react-simple-code-editor": "^0.11.2",
     "react-spring-bottom-sheet": "^3.4.0",
     "rehype-raw": "^6.1.1",
@@ -98,6 +99,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@playwright/test": "^1.51.0",
+    "@rollup/plugin-inject": "^5.0.5",
     "@types/jest": "^29.5.12",
     "@types/node": "^14.14.35",
     "@types/react": "^17.0.44",
@@ -107,11 +109,14 @@
     "@types/yup": "^0.29.11",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-react": "^4.5.1",
+    "buffer": "^6.0.3",
     "eslint": "^7.22.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "events": "^3.3.0",
     "husky": "8.0.3",
     "jest": "^29.7.0",
     "lint-staged": "15.2.2",
@@ -120,20 +125,16 @@
     "prettier": "^2.2.0",
     "source-map-explorer": "2.5.2",
     "ts-jest": "^29.1.4",
-    "typescript": "^5.0.4"
+    "typescript": "^5.0.4",
+    "vite": "^6.3.5",
+    "vite-plugin-node-polyfills": "0.22.0",
+    "vite-plugin-svgr": "^4.3.0"
   },
   "resolutions": {
     "@types/react": "~17.0.3",
-    "react-error-overlay": "6.0.9",
-    "@walletconnect/core": "2.14.0",
-    "@walletconnect/types": "2.14.0",
-    "@walletconnect/utils": "2.14.0"
-  },
-  "overrides": {
-    "@walletconnect/core": "2.14.0",
-    "@walletconnect/types": "2.14.0",
-    "@walletconnect/utils": "2.14.0"
+    "react-error-overlay": "6.0.9"
   },
+  "overrides": {},
   "eslintConfig": {
     "extends": [
       "react-app"

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import "App.css"
+import "./App.css"
 import { BrowserRouter as Router, Redirect, Route, Switch } from "react-router-dom"
 import mixpanel from "mixpanel-browser"
 import { QueryClient, QueryClientProvider } from "react-query"

diff --git a/src/components/ui/CopyButton.tsx b/src/components/ui/CopyButton.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import { Box, Tooltip, styled } from "@material-ui/core"
-import { ReactComponent as CopyIcon } from "assets/img/copy_icon.svg"
+import CopyIcon from "assets/img/copy_icon.svg?react"
 
 const TooltipButton = styled(Tooltip)({
   cursor: "pointer"

diff --git a/src/modules/common/CopyButton.tsx b/src/modules/common/CopyButton.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import { Box, Grid, styled, Tooltip, Typography } from "@material-ui/core"
-import DownloadIcon from "assets/img/download.svg"
+import DownloadIcon from "assets/img/download.svg?react"
 
 const CopyIcon = styled("img")({
   cursor: "pointer"

diff --git a/src/modules/common/Footer.tsx b/src/modules/common/Footer.tsx
@@ -1,14 +1,14 @@
 import React from "react"
 import { Grid, Typography, styled, useMediaQuery, useTheme } from "@material-ui/core"
-import HomeButton from "assets/logos/footer_logo.svg"
-import Documentation from "assets/logos/footer_documentation.svg"
-import Help from "assets/logos/footer_help.svg"
-import Tezos from "assets/logos/footer_tezos.svg"
-import Explorer from "assets/logos/footer_explorer.svg"
-import Github from "assets/logos/footer_github.svg"
-import Discord from "assets/logos/footer_discord.svg"
-import Youtube from "assets/logos/footer_youtube.svg"
-import dOrg from "assets/logos/footer_dorg.svg"
+import HomeButton from "assets/logos/footer_logo.svg?react"
+import Documentation from "assets/logos/footer_documentation.svg?react"
+import Help from "assets/logos/footer_help.svg?react"
+import Tezos from "assets/logos/footer_tezos.svg?react"
+import Explorer from "assets/logos/footer_explorer.svg?react"
+import Github from "assets/logos/footer_github.svg?react"
+import Discord from "assets/logos/footer_discord.svg?react"
+import Youtube from "assets/logos/footer_youtube.svg?react"
+import dOrg from "assets/logos/footer_dorg.svg?react"
 import { useTezos } from "services/beacon/hooks/useTezos"
 
 const Footer = styled(Grid)(({ theme }) => ({

diff --git a/src/modules/common/Toolbar.tsx b/src/modules/common/Toolbar.tsx
@@ -12,7 +12,7 @@ import {
   Theme
 } from "@material-ui/core"
 
-import HomeButton from "assets/logos/homebase-logo.svg"
+import HomeButton from "assets/logos/homebase-logo.svg?react"
 import { useTezos } from "services/beacon/hooks/useTezos"
 import { toShortAddress } from "services/contracts/utils"
 import { ExitToAppOutlined, FileCopyOutlined } from "@material-ui/icons"

diff --git a/src/modules/common/ToolbarCommon.tsx b/src/modules/common/ToolbarCommon.tsx
@@ -14,7 +14,7 @@ import {
   Theme
 } from "@material-ui/core"
 
-import HomeButton from "assets/logos/homebase-logo.svg"
+import HomeButton from "assets/logos/homebase-logo.svg?react"
 import { useTezos } from "services/beacon/hooks/useTezos"
 import { toShortAddress } from "services/contracts/utils"
 import { ExitToAppOutlined, FileCopyOutlined } from "@material-ui/icons"

diff --git a/src/modules/common/WarningFooter.tsx b/src/modules/common/WarningFooter.tsx
@@ -1,6 +1,6 @@
 import { Box, Grid, IconButton, Typography, styled } from "@material-ui/core"
 import React, { useEffect, useState } from "react"
-import { ReactComponent as WarningIcon } from "assets/logos/warning.svg"
+import WarningIcon from "assets/logos/warning.svg?react"
 import CloseIcon from "@material-ui/icons/Close"
 import hexToRgba from "hex-to-rgba"
 

diff --git a/src/modules/creator/steps/DeploymentType.tsx b/src/modules/creator/steps/DeploymentType.tsx
@@ -2,8 +2,8 @@ import React, { useContext, useEffect, useState } from "react"
 import { Grid, styled, Typography, Box, useMediaQuery, useTheme, makeStyles, Link } from "@material-ui/core"
 import { useHistory } from "react-router"
 
-import { ReactComponent as ManagedIcon } from "assets/img/managed.svg"
-import { ReactComponent as SelfDeployedIcon } from "assets/img/self-deployed.svg"
+import ManagedIcon from "assets/img/managed.svg?react"
+import SelfDeployedIcon from "assets/img/self-deployed.svg?react"
 
 import { ActionTypes, CreatorContext, DeploymentMethod } from "modules/creator/state"
 import { TitleBlock } from "modules/common/TitleBlock"

diff --git a/src/modules/creator/steps/Review.tsx b/src/modules/creator/steps/Review.tsx
@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useMemo } from "react"
 import { Button, Grid, Box, styled, Typography } from "@material-ui/core"
 import { useHistory } from "react-router-dom"
 
-import Rocket from "assets/img/rocket.svg"
+import Rocket from "assets/img/rocket.svg?react"
 import { useOriginate } from "services/contracts/baseDAO/hooks/useOriginate"
 import { getTokensInfo, CreatorContext, ActionTypes, MigrationParams, DeploymentMethod } from "modules/creator/state"
 import { MetadataCarrierParameters } from "services/contracts/metadataCarrier/types"

diff --git a/src/modules/creator/steps/Template.tsx b/src/modules/creator/steps/Template.tsx
@@ -2,8 +2,8 @@ import React, { useContext, useEffect, useState } from "react"
 import { Grid, styled, Typography, Box, useMediaQuery, useTheme, makeStyles, Tooltip } from "@material-ui/core"
 import { useHistory } from "react-router"
 
-import { ReactComponent as LiteIcon } from "assets/img/lite-dao.svg"
-import { ReactComponent as FullIcon } from "assets/img/full-dao.svg"
+import LiteIcon from "assets/img/lite-dao.svg?react"
+import FullIcon from "assets/img/full-dao.svg?react"
 
 import { ActionTypes, CreatorContext, DAOTemplate } from "modules/creator/state"
 import { TitleBlock } from "modules/common/TitleBlock"

diff --git a/src/modules/etherlink/creator/EvmDaoTemplate.tsx b/src/modules/etherlink/creator/EvmDaoTemplate.tsx
@@ -2,8 +2,8 @@ import React, { useState } from "react"
 import { Grid, styled, Typography, Box, useMediaQuery, useTheme, makeStyles } from "@material-ui/core"
 import { useHistory } from "react-router"
 
-import { ReactComponent as LiteIcon } from "assets/img/lite-dao.svg"
-import { ReactComponent as FullIcon } from "assets/img/full-dao.svg"
+import LiteIcon from "assets/img/lite-dao.svg?react"
+import FullIcon from "assets/img/full-dao.svg?react"
 
 import { TitleBlock } from "modules/common/TitleBlock"
 import useEvmDaoCreateStore from "services/contracts/etherlinkDAO/hooks/useEvmDaoCreateStore"

diff --git a/src/modules/explorer/components/CodeCollapse.tsx b/src/modules/explorer/components/CodeCollapse.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from "react"
 import { Collapse, Grid, IconButton, Typography } from "@material-ui/core"
-
 import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown"
 import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp"
 import { ProposalCodeEditorInput } from "./ProposalFormInput"

diff --git a/src/modules/explorer/components/CopyButton.tsx b/src/modules/explorer/components/CopyButton.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import { Box, Tooltip, styled } from "@material-ui/core"
-import { ReactComponent as CopyIcon } from "assets/img/copy_icon.svg"
+import CopyIcon from "assets/img/copy_icon.svg?react"
 
 const TooltipButton = styled(Tooltip)({
   cursor: "pointer"

diff --git a/src/modules/explorer/components/DAOStatsRow.tsx b/src/modules/explorer/components/DAOStatsRow.tsx
@@ -119,6 +119,17 @@ const DAOStatsRowTezos = () => {
             </Grid>
           </Item>
         </Grid>
+        <Grid item xs={12} sm={6} md={4}>
+          <Item>
+            <ItemContent item container direction="row" alignItems="center">
+              <ItemTitle color="textPrimary">{symbol} Locked</ItemTitle>
+            </ItemContent>
+            <Grid item container direction="row">
+              <ItemValue color="textPrimary">{numbro(amountLocked).format(formatConfig)}</ItemValue>
+              <Percentage color="textPrimary">{numbro(amountLockedPercentage).format(formatConfig)}%</Percentage>
+            </Grid>
+          </Item>
+        </Grid>
         <Grid item xs={12} sm={6} md={4}>
           <Item>
             <ItemContent item container direction="row" alignItems="center">

diff --git a/src/modules/explorer/components/NavigationMenu.tsx b/src/modules/explorer/components/NavigationMenu.tsx
@@ -9,12 +9,12 @@ import {
   withStyles,
   makeStyles
 } from "@material-ui/core"
-import { ReactComponent as HouseIcon } from "assets/logos/home.svg"
-import { ReactComponent as VotingIcon } from "assets/logos/voting.svg"
-import { ReactComponent as TreasuryIcon } from "assets/logos/treasury.svg"
-import { ReactComponent as RegistryIcon } from "assets/logos/list.svg"
-import { ReactComponent as UserIcon } from "assets/logos/user.svg"
-import { ReactComponent as MembersIcon } from "assets/logos/members.svg"
+import HouseIcon from "assets/logos/home.svg?react"
+import VotingIcon from "assets/logos/voting.svg?react"
+import TreasuryIcon from "assets/logos/treasury.svg?react"
+import RegistryIcon from "assets/logos/list.svg?react"
+import UserIcon from "assets/logos/user.svg?react"
+import MembersIcon from "assets/logos/members.svg?react"
 import React, { useContext, useEffect, useState } from "react"
 import { useDAOID } from "../pages/DAO/router"
 import { useDAO } from "services/services/dao/hooks/useDAO"

diff --git a/src/modules/explorer/components/ProposalActionsDialog.tsx b/src/modules/explorer/components/ProposalActionsDialog.tsx
@@ -37,7 +37,7 @@ const OptionContainer = styled(Grid)(({ theme }) => ({
   "padding": "35px 42px",
   "marginBottom": 16,
   "cursor": "pointer",
-  "height": 110,
+  "height": 80,
   "&:hover:enabled": {
     background: theme.palette.secondary.dark,
     scale: 1.01,
@@ -220,6 +220,12 @@ const ProposalActionsDialogForTezos: React.FC<{
     }
   }, [handleOpenCustomProposalModal, queryType])
 
+  useEffect(() => {
+    if (queryType === "add-function") {
+      handleOpenCustomProposalModal(ProposalAction.new)
+    }
+  }, [handleOpenCustomProposalModal, queryType])
+
   return (
     <>
       <ResponsiveDialog open={open} onClose={handleClose} title={"New Proposal"} template="xs">

diff --git a/src/modules/explorer/components/ProposalForm.tsx b/src/modules/explorer/components/ProposalForm.tsx
@@ -26,7 +26,7 @@ import { ProposalFormInput } from "./ProposalFormInput"
 import { ProposalFormResponsiveDialog } from "./ResponsiveDialog"
 import { LambdaDAO } from "services/contracts/baseDAO/lambdaDAO"
 import CloseButton from "modules/common/CloseButton"
-import { ReactComponent as SwapIcon } from "assets/img/swap.svg"
+import SwapIcon from "assets/img/swap.svg?react"
 
 const CustomContainer = styled(Grid)({
   padding: "42px 54px 0px 54px"

diff --git a/src/modules/explorer/components/SideBar.tsx b/src/modules/explorer/components/SideBar.tsx
@@ -1,12 +1,12 @@
 import { Grid, styled, IconButton, useMediaQuery, useTheme, Theme } from "@material-ui/core"
 import React, { useEffect, useMemo, useState } from "react"
 
-import { ReactComponent as HouseIcon } from "assets/logos/home.svg"
-import { ReactComponent as VotingIcon } from "assets/logos/voting.svg"
-import { ReactComponent as TreasuryIcon } from "assets/logos/treasury.svg"
-import { ReactComponent as RegistryIcon } from "assets/logos/list.svg"
-import { ReactComponent as UserIcon } from "assets/logos/user.svg"
-import { ReactComponent as NFTIcon } from "assets/logos/nft.svg"
+import HouseIcon from "assets/logos/home.svg?react"
+import VotingIcon from "assets/logos/voting.svg?react"
+import TreasuryIcon from "assets/logos/treasury.svg?react"
+import RegistryIcon from "assets/logos/list.svg?react"
+import UserIcon from "assets/logos/user.svg?react"
+import NFTIcon from "assets/logos/nft.svg?react"
 import { useHistory, useLocation } from "react-router-dom"
 import { useDAO } from "services/services/dao/hooks/useDAO"
 import { useTezos } from "services/beacon/hooks/useTezos"

diff --git a/src/modules/explorer/components/Toolbar.tsx b/src/modules/explorer/components/Toolbar.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { Box, Grid, useTheme, useMediaQuery } from "@material-ui/core"
 
-import HomeButton from "assets/logos/homebase-logo.svg"
+import HomeButton from "assets/logos/homebase-logo.svg?react"
 import { NavigationMenu } from "modules/explorer/components/NavigationMenu"
 
 import { ToolbarAccount } from "modules/common/ToolbarAccount"

diff --git a/src/modules/explorer/components/VotersProgress.tsx b/src/modules/explorer/components/VotersProgress.tsx
@@ -8,7 +8,7 @@ import { Proposal } from "services/services/dao/mappers/proposal/types"
 import { VotesDetailDialog } from "./VotesDetailDialog"
 import numbro from "numbro"
 import { SmallButton } from "modules/common/SmallButton"
-import { ReactComponent as DownloadCSVIcon } from "assets/img/download_csv.svg"
+import DownloadCSVIcon from "assets/img/download_csv.svg?react"
 import { mkConfig, generateCsv, download, asString } from "export-to-csv"
 import { useNotification } from "modules/common/hooks/useNotification"
 

diff --git a/src/modules/explorer/components/VotesDetailDialog.tsx b/src/modules/explorer/components/VotesDetailDialog.tsx
@@ -6,8 +6,8 @@ import { BigNumber } from "bignumber.js"
 import { useProposal } from "../../../services/services/dao/hooks/useProposal"
 import { VotesTable } from "./VotesTable"
 import { roundNumber } from "../../../utils"
-import { ReactComponent as TabsIcon } from "assets/img/tabs-icon.svg"
-import { ReactComponent as TabsSelectedIcon } from "assets/img/tabs-icon-selected.svg"
+import TabsIcon from "assets/img/tabs-icon.svg?react"
+import TabsSelectedIcon from "assets/img/tabs-icon-selected.svg?react"
 import ThumbUpIcon from "@mui/icons-material/ThumbUp"
 import ThumbDownIcon from "@mui/icons-material/ThumbDown"
 import { Blockie } from "modules/common/Blockie"