WIP:

- Implementing WAGMI for Etherlink Login - Changing useTezos hook to handle login with Etherlink - Changing Validation options when Etherlink is active.
dOrgTech · Jul 16, 2024 · 9a74515 · 9a74515
1 parent a7aaf3f
commit 9a74515
Show file tree

Hide file tree

Showing 20 changed files with 248 additions and 119 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "@mui/icons-material": "^5.14.14",
     "@mui/material": "^5.14.14",
     "@mui/x-date-pickers": "^5.0.2",
+    "@tanstack/react-query": "^5.51.1",
     "@taquito/beacon-wallet": "^20.0.0",
     "@taquito/signer": "^20.0.0",
     "@taquito/taquito": "^20.0.0",
@@ -39,11 +40,14 @@
     "@types/react-paginate": "^7.1.2",
     "@types/react-router-hash-link": "^2.4.5",
     "@types/valid-url": "^1.0.4",
+    "@web3modal/wagmi": "^5.0.6",
     "assert": "^2.0.0",
     "bignumber.js": "^9.0.1",
     "blockies-ts": "^1.0.0",
+    "connectkit": "^1.8.2",
     "crypto-browserify": "^3.12.0",
     "dayjs": "^1.11.11",
+    "ethers": "^6.13.1",
     "export-to-csv": "^1.2.4",
     "formik": "^2.2.6",
     "formik-material-ui": "^3.0.1",
@@ -84,6 +88,8 @@
     "url": "^0.11.0",
     "util": "^0.12.5",
     "valid-url": "^1.0.9",
+    "viem": "^2.17.4",
+    "wagmi": "^2.10.10",
     "yup": "^0.32.9"
   },
   "devDependencies": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,20 +1,25 @@
 import React from "react"
+import "App.css"
 import { withLDProvider } from "launchdarkly-react-client-sdk"
 import { BrowserRouter as Router, Redirect, Route, Switch } from "react-router-dom"
 import mixpanel from "mixpanel-browser"
 import { QueryClient, QueryClientProvider } from "react-query"
+import {
+  QueryClient as TanStackQueryClient,
+  QueryClientProvider as TanStackQueryClientProvider
+} from "@tanstack/react-query"
+
 import { Box, makeStyles, ThemeProvider } from "@material-ui/core"
 import { SnackbarProvider } from "notistack"
 
 import { DAOExplorerRouter } from "modules/explorer/router"
-import { DAOCreate } from "modules/creator"
 import { CreatorProvider } from "modules/creator/state"
 import ScrollToTop from "modules/common/ScrollToTop"
 import { theme } from "theme"
+import { WagmiProvider } from "wagmi"
+import { config as wagmiConfig } from "services/wagmi/config"
 
-import "App.css"
 import { TZKTSubscriptionsProvider } from "services/bakingBad/context/TZKTSubscriptions"
-import { Landing } from "modules/home/Landing"
 import { WarningFooter } from "modules/common/WarningFooter"
 import { ActionSheetProvider } from "modules/explorer/context/ActionSheets"
 import { legacyTheme } from "theme/legacy"
@@ -25,7 +30,8 @@ import { DAOCreatorRouter } from "modules/creator/router"
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"
 import { CommunityCreator } from "modules/lite/creator"
-import { hexStringToBytes } from "services/utils/utils"
+
+const tsQueryClient = new TanStackQueryClient()
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -96,57 +102,61 @@ const App: React.FC = () => {
           variantInfo: classes.info
         }}
       >
-        <QueryClientProvider client={queryClient}>
-          <ActionSheetProvider>
-            <LocalizationProvider dateAdapter={AdapterDayjs}>
-              <Box bgcolor="primary.dark" position="absolute" width="100%">
-                <Router>
-                  <ScrollToTop />
-                  <Switch>
-                    <Route path="/creator">
-                      <CreatorProvider>
-                        <ThemeProvider theme={legacyTheme}>
-                          <DAOCreatorRouter />
-                        </ThemeProvider>
-                      </CreatorProvider>
-                      {/* <WarningFooter
+        <WagmiProvider config={wagmiConfig}>
+          <TanStackQueryClientProvider client={tsQueryClient}>
+            <QueryClientProvider client={queryClient}>
+              <ActionSheetProvider>
+                <LocalizationProvider dateAdapter={AdapterDayjs}>
+                  <Box bgcolor="primary.dark" position="absolute" width="100%">
+                    <Router>
+                      <ScrollToTop />
+                      <Switch>
+                        <Route path="/creator">
+                          <CreatorProvider>
+                            <ThemeProvider theme={legacyTheme}>
+                              <DAOCreatorRouter />
+                            </ThemeProvider>
+                          </CreatorProvider>
+                          {/* <WarningFooter
                       text={
                         "The Homebase contract can't transfer FA1.2 tokens. Please make sure any and all tokens you send to the DAO treasury are implementing the FA2 standard."
                       }
                     /> */}
-                    </Route>
-                    <Route path="/lite">
-                      <ThemeProvider theme={legacyTheme}>
-                        <CommunityCreator />
-                      </ThemeProvider>
-                    </Route>
-                    <Route path="/explorer">
-                      <TZKTSubscriptionsProvider>
-                        <DAOExplorerRouter />
-                      </TZKTSubscriptionsProvider>
+                        </Route>
+                        <Route path="/lite">
+                          <ThemeProvider theme={legacyTheme}>
+                            <CommunityCreator />
+                          </ThemeProvider>
+                        </Route>
+                        <Route path="/explorer">
+                          <TZKTSubscriptionsProvider>
+                            <DAOExplorerRouter />
+                          </TZKTSubscriptionsProvider>
 
-                      {window.location.href.indexOf(HUMANITEZ_DAO) !== -1 ? (
-                        <>
-                          {/* Special case for this DAO which was created before FA1.2 fix was created for the smart contract */}
-                          <WarningFooter
-                            text={
-                              "The Homebase contract can't transfer FA1.2 tokens. Please make sure any and all tokens you send to the DAO treasury are implementing the FA2 standard."
-                            }
-                          />
-                        </>
-                      ) : null}
-                      <ExplorerFooter></ExplorerFooter>
-                    </Route>
-                    <Route path="/faq">
-                      <FAQ />
-                    </Route>
-                    <Redirect to="/explorer" />
-                  </Switch>
-                </Router>
-              </Box>
-            </LocalizationProvider>
-          </ActionSheetProvider>
-        </QueryClientProvider>
+                          {window.location.href.indexOf(HUMANITEZ_DAO) !== -1 ? (
+                            <>
+                              {/* Special case for this DAO which was created before FA1.2 fix was created for the smart contract */}
+                              <WarningFooter
+                                text={
+                                  "The Homebase contract can't transfer FA1.2 tokens. Please make sure any and all tokens you send to the DAO treasury are implementing the FA2 standard."
+                                }
+                              />
+                            </>
+                          ) : null}
+                          <ExplorerFooter></ExplorerFooter>
+                        </Route>
+                        <Route path="/faq">
+                          <FAQ />
+                        </Route>
+                        <Redirect to="/explorer" />
+                      </Switch>
+                    </Router>
+                  </Box>
+                </LocalizationProvider>
+              </ActionSheetProvider>
+            </QueryClientProvider>
+          </TanStackQueryClientProvider>
+        </WagmiProvider>
       </SnackbarProvider>
     </ThemeProvider>
   )

diff --git a/src/modules/common/ChangeNetworkButton.tsx b/src/modules/common/ChangeNetworkButton.tsx
@@ -1,8 +1,8 @@
-import { Box, capitalize, Grid, styled, Typography, Theme } from "@material-ui/core"
-import { ActionSheet, useActionSheet } from "modules/explorer/context/ActionSheets"
 import React from "react"
+import { Box, Grid, styled, Typography, Theme } from "@material-ui/core"
+import { ActionSheet, useActionSheet } from "modules/explorer/context/ActionSheets"
 import { useLocation } from "react-router-dom"
-import { Network } from "services/beacon"
+import { getNetworkDisplayName, networkDotColorMap } from "services/beacon"
 import { useTezos } from "services/beacon/hooks/useTezos"
 
 const StyledConnectedButton = styled(Box)(({ theme }: { theme: Theme }) => ({
@@ -26,11 +26,6 @@ const StyledConnectedButton = styled(Box)(({ theme }: { theme: Theme }) => ({
   }
 }))
 
-export const networkDotColorMap: Record<Network, string> = {
-  mainnet: "#9EEE5D",
-  ghostnet: "#291F79"
-}
-
 export const ColorDot = styled(Box)({
   height: 6,
   width: 6,
@@ -56,7 +51,7 @@ export const ChangeNetworkButton = () => {
               <ColorDot color={networkDotColorMap[network]} />
             </Grid>
             <Grid item>
-              <Typography color="textSecondary">{capitalize(network)}</Typography>
+              <Typography color="textSecondary">{getNetworkDisplayName(network)}</Typography>
             </Grid>
           </Grid>
         </StyledConnectedButton>

diff --git a/src/modules/creator/steps/Governance.tsx b/src/modules/creator/steps/Governance.tsx
@@ -7,14 +7,14 @@ import { useRouteMatch } from "react-router-dom"
 
 import { CreatorContext, ActionTypes, VotingSettings } from "modules/creator/state"
 import { InfoRounded } from "@material-ui/icons"
-import { getNetworkStats } from "services/bakingBad/stats"
 import { useTezos } from "services/beacon/hooks/useTezos"
 import { EstimatedBlocks } from "modules/explorer/components/EstimatedTime"
 import dayjs from "dayjs"
 import { TitleBlock } from "modules/common/TitleBlock"
 import BigNumber from "bignumber.js"
 import { mutezToXtz, parseUnits } from "services/contracts/utils"
 import { FieldChange, handleChange } from "../utils"
+import { useBlockchainInfo } from "services/contracts/baseDAO/hooks/useBlockchainInfo"
 
 const TimeBox = styled(Grid)(({ theme }) => ({
   background: theme.palette.primary.dark,
@@ -370,21 +370,20 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se
     blockTimeAverage
   })
 
+  const { data: blockchainInfo } = useBlockchainInfo()
+
+  useEffect(() => {
+    if (blockchainInfo) {
+      setBlockTimeAverage(blockchainInfo.constants.timeBetweenBlocks)
+    }
+  }, [blockchainInfo])
+
   useEffect(() => {
     setFieldValue("votingBlocks", periodBlocks)
     setFieldValue("proposalFlushBlocks", flushBlocks)
     setFieldValue("proposalExpiryBlocks", expiryBlocks)
   }, [values, periodBlocks, flushBlocks, expiryBlocks, setFieldValue])
 
-  useEffect(() => {
-    ;(async () => {
-      const blockchainInfo = await getNetworkStats(network)
-      if (blockchainInfo) {
-        setBlockTimeAverage(blockchainInfo.constants.timeBetweenBlocks)
-      }
-    })()
-  }, [network])
-
   const formatDate = (timeInfo: any) => {
     const values = []
     for (const property in timeInfo) {

diff --git a/src/modules/explorer/components/ChangeNetworkButton.tsx b/src/modules/explorer/components/ChangeNetworkButton.tsx
@@ -1,9 +1,9 @@
-import { Box, capitalize, Grid, styled, Typography, Theme } from "@material-ui/core"
-import React, { useEffect } from "react"
-import { Network } from "services/beacon"
+import React from "react"
+import { Box, Grid, styled, Typography, Theme } from "@material-ui/core"
 import { useTezos } from "services/beacon/hooks/useTezos"
 import { ActionSheet, useActionSheet } from "../context/ActionSheets"
 import { useLocation } from "react-router-dom"
+import { getNetworkDisplayName, networkDotColorMap } from "services/beacon"
 
 const StyledConnectedButton = styled(Box)(({ theme }: { theme: Theme }) => ({
   "& > *": {
@@ -25,11 +25,6 @@ const StyledConnectedButton = styled(Box)(({ theme }: { theme: Theme }) => ({
   }
 }))
 
-export const networkDotColorMap: Record<Network, string> = {
-  mainnet: "#9EEE5D",
-  ghostnet: "#291F79"
-}
-
 export const ColorDot = styled(Box)({
   height: 6,
   width: 6,
@@ -55,7 +50,7 @@ export const ChangeNetworkButton = () => {
           </Grid>
           <Grid item>
             <Typography variant="body2" color="textPrimary">
-              {capitalize(network)}
+              {getNetworkDisplayName(network)}
             </Typography>
           </Grid>
         </Grid>

diff --git a/src/modules/explorer/components/NetworkSheet.tsx b/src/modules/explorer/components/NetworkSheet.tsx
@@ -1,11 +1,10 @@
 import { styled, Grid, Typography, capitalize } from "@material-ui/core"
 import React, { useContext, useMemo } from "react"
 import { useTezos } from "services/beacon/hooks/useTezos"
-import { Network } from "services/beacon"
+import { Network, getNetworkDisplayName, networkDotColorMap, rpcNodes } from "services/beacon"
 import { ResponsiveDialog } from "./ResponsiveDialog"
-import { ColorDot, networkDotColorMap } from "./ChangeNetworkButton"
+import { ColorDot } from "./ChangeNetworkButton"
 import { ContentContainer } from "./ContentContainer"
-import { EnvKey, getEnv } from "services/config"
 import { ActionTypes, CreatorContext } from "modules/creator/state"
 
 const SheetItem = styled(ContentContainer)({
@@ -21,7 +20,7 @@ interface Props {
   onClose: () => void
 }
 
-const SUPPORTED_NETWORKS: Network[] = ["mainnet", "ghostnet"]
+const SUPPORTED_NETWORKS = Object.keys(rpcNodes) as Network[]
 
 export const NetworkSheet: React.FC<Props> = props => {
   const { network, changeNetwork } = useTezos()
@@ -50,7 +49,7 @@ export const NetworkSheet: React.FC<Props> = props => {
               </Grid>
               <Grid item>
                 <Typography variant={"h6"} color="textPrimary">
-                  {capitalize(networkOption)}
+                  {getNetworkDisplayName(networkOption)}
                 </Typography>
               </Grid>
             </Grid>

diff --git a/src/modules/explorer/components/Toolbar.tsx b/src/modules/explorer/components/Toolbar.tsx
@@ -98,12 +98,12 @@ const ToolbarContainer = styled(Grid)(({ theme }) => ({
 }))
 
 export const Navbar: React.FC<{ disableMobileMenu?: boolean }> = ({ disableMobileMenu, children }) => {
-  const { connect, account } = useTezos()
+  const { connect, account: tzAccountAddress, etherlink, network } = useTezos()
   const theme = useTheme()
   const isMobileExtraSmall = useMediaQuery(theme.breakpoints.down("mobile"))
 
   const { open: openUserMenuSheet } = useActionSheet(ActionSheet.UserMenu)
-
+  const walletAddress = network.startsWith("etherlink") ? etherlink.account?.address : tzAccountAddress
   return (
     <StyledAppBar>
       <StyledToolbar>
@@ -125,7 +125,7 @@ export const Navbar: React.FC<{ disableMobileMenu?: boolean }> = ({ disableMobil
 
           <Grid item>
             <Grid container justifyContent={isMobileExtraSmall ? "center" : "flex-end"}>
-              {account ? (
+              {walletAddress && etherlink?.isConnected ? (
                 <Grid
                   container
                   alignItems="center"
@@ -147,11 +147,11 @@ export const Navbar: React.FC<{ disableMobileMenu?: boolean }> = ({ disableMobil
                           style={{ gap: 16 }}
                         >
                           <Grid item>
-                            <ProfileAvatar size={22} address={account} />
+                            <ProfileAvatar size={22} address={walletAddress} />
                           </Grid>
                           <Grid item>
                             <Typography color="textPrimary" variant="body2">
-                              <UserProfileName address={account} short={true} />
+                              <UserProfileName address={walletAddress} short={true} />
                             </Typography>
                           </Grid>
                         </AddressContainer>
@@ -169,7 +169,9 @@ export const Navbar: React.FC<{ disableMobileMenu?: boolean }> = ({ disableMobil
                       color="secondary"
                       variant="contained"
                       style={{ fontSize: "14px" }}
-                      onClick={() => connect()}
+                      onClick={() => {
+                        connect()
+                      }}
                     >
                       Connect Wallet
                     </SmallButton>

diff --git a/src/modules/explorer/components/VotersProgress.tsx b/src/modules/explorer/components/VotersProgress.tsx
@@ -10,7 +10,6 @@ import numbro from "numbro"
 import { SmallButton } from "modules/common/SmallButton"
 import { ReactComponent as DownloadCSVIcon } from "assets/img/download_csv.svg"
 import { mkConfig, generateCsv, download, asString } from "export-to-csv"
-import { writeFile } from "node:fs"
 import { useNotification } from "modules/common/hooks/useNotification"
 
 interface VotersData {
@@ -64,7 +63,12 @@ export const VotersProgress: React.FC<VotersData> = ({ showButton, daoId, propos
       title: "Voting Details",
       showTitle: false
     })
-    const votesData = proposal ? proposal?.voters : []
+    const votesData = proposal
+      ? proposal?.voters.map(voter => ({
+          ...voter,
+          value: voter.value.toString() // Convert BigNumber to string
+        }))
+      : []
     try {
       const csv = generateCsv(csvConfig)(votesData)
       download(csvConfig)(csv)