Switched to Connectkit

dOrgTech · Oct 13, 2024 · 237dffe · 237dffe
1 parent c40e6a9
commit 237dffe
Show file tree

Hide file tree

Showing 24 changed files with 1,870 additions and 1,778 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -17,7 +17,7 @@
     }
   },
   "extends": [
-    "plugin:react/recommended",
+    // "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",
     "plugin:prettier/recommended"

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,7 +2,7 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "always"
   },
-  "editor.formatOnSave": true,
+  "editor.formatOnSave": false,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.defaultFormatterOld": "dbaeumer.vscode-eslint",
   "[javascript]": {

diff --git a/package.json b/package.json
@@ -28,7 +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",
+    "@tanstack/react-query": "^5.59.13",
     "@taquito/beacon-wallet": "^20.0.0",
     "@taquito/signer": "^20.0.0",
     "@taquito/taquito": "^20.0.0",
@@ -40,7 +40,6 @@
     "@types/react-paginate": "^7.1.2",
     "@types/react-router-hash-link": "^2.4.5",
     "@types/valid-url": "^1.0.4",
-    "@web3modal/wagmi": "5.0.11",
     "assert": "^2.0.0",
     "bignumber.js": "^9.0.1",
     "blockies-ts": "^1.0.0",
@@ -156,4 +155,4 @@
       "npm run lint:check"
     ]
   }
-}
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -16,8 +16,6 @@ import { DAOExplorerRouter } from "modules/explorer/router"
 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 { TZKTSubscriptionsProvider } from "services/bakingBad/context/TZKTSubscriptions"
 import { WarningFooter } from "modules/common/WarningFooter"
@@ -30,6 +28,9 @@ 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 { ConnectKitProvider } from "connectkit"
+
 import { hexStringToBytes } from "services/utils/utils"
 import { HistoryLengthProvider } from "modules/explorer/context/HistoryLength"
 
@@ -104,61 +105,57 @@ const App: React.FC = () => {
           variantInfo: classes.info
         }}
       >
-        <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
+        <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>
-
-                          {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>
+                    </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>
       </SnackbarProvider>
     </ThemeProvider>
   )

diff --git a/src/components/ui/Toolbar.tsx b/src/components/ui/Toolbar.tsx
@@ -0,0 +1,77 @@
+import React from "react"
+import {
+  AppBar,
+  Toolbar,
+  Button,
+  styled,
+  Typography,
+  Box,
+  Grid,
+  useTheme,
+  useMediaQuery,
+  Theme
+} from "@material-ui/core"
+
+const Header = styled(Grid)(({ theme }) => ({
+  width: "1000px",
+  height: "100%",
+  margin: "auto",
+  padding: "28px 0",
+  flexDirection: "row",
+
+  ["@media (max-width: 1425px)"]: {},
+
+  ["@media (max-width:1335px)"]: {},
+
+  ["@media (max-width:1167px)"]: {
+    width: "86vw"
+  },
+
+  ["@media (max-width:1030px)"]: {},
+
+  ["@media (max-width:960px)"]: {},
+
+  ["@media (max-width:645px)"]: {
+    flexDirection: "column"
+  }
+}))
+
+const StyledAppBar = styled(AppBar)(({ theme }: { theme: Theme }) => ({
+  boxShadow: "none",
+  background: theme.palette.primary.dark,
+  position: "sticky",
+
+  ["@media (max-height:750px)"]: {
+    position: "static"
+  }
+}))
+
+const StyledToolbar = styled(Toolbar)({
+  width: "100%",
+  padding: 0,
+  boxSizing: "border-box",
+  justifyContent: "space-between",
+  flexWrap: "wrap"
+})
+
+const LogoText = styled(Typography)({
+  fontWeight: "bold",
+  fontSize: "26px",
+  cursor: "pointer",
+  fontFamily: "Roboto Flex",
+  letterSpacing: "initial"
+})
+
+const LogoItem = styled("img")({
+  height: "30px",
+  cursor: "pointer",
+  paddingTop: 8
+})
+
+const ToolbarContainer = styled(Grid)(({ theme }) => ({
+  ["@media (max-width: 645px)"]: {
+    marginBottom: "20px"
+  }
+}))
+
+export { Header, StyledAppBar, StyledToolbar, LogoText, LogoItem, ToolbarContainer }
diff --git a/src/index.tsx b/src/index.tsx
@@ -2,19 +2,24 @@ import React from "react"
 import ReactDOM from "react-dom"
 import App from "App"
 import { TezosProvider } from "services/beacon/context"
+import { EtherlinkProvider } from "services/wagmi/context"
 import localizedFormat from "dayjs/plugin/localizedFormat"
 import dayjs from "dayjs"
+import { Web3Provider } from "services/wagmi/web3provider"
 
 // BigNumber.config({ DECIMAL_PLACES:  })
 
 dayjs.extend(localizedFormat)
 
-// eslint-disable-next-line react/no-deprecated
 ReactDOM.render(
   <React.StrictMode>
-    <TezosProvider>
-      <App />
-    </TezosProvider>
+    <Web3Provider>
+      <EtherlinkProvider>
+        <TezosProvider>
+          <App />
+        </TezosProvider>
+      </EtherlinkProvider>
+    </Web3Provider>
   </React.StrictMode>,
   document.getElementById("root")
 )
diff --git a/src/modules/common/ToolbarAccount.tsx b/src/modules/common/ToolbarAccount.tsx
@@ -66,12 +66,15 @@ const AddressMenuIcon = styled(Grid)({
 export const ToolbarAccount: React.FC<any> = ({ children, variant = "common" }) => {
   const theme = useTheme()
   const { connect, account, etherlink, network, reset } = useTezos()
+  console.log("ToolbarAccount", { account, etherlink })
   const tzAccountAddress = account
   const isMobileExtraSmall = useMediaQuery(theme.breakpoints.down("mobile"))
 
   const { open: openUserMenuSheet } = useActionSheet(ActionSheet.UserMenu)
   const walletAddress = network.startsWith("etherlink") ? etherlink.account?.address : tzAccountAddress
 
+  console.log("ToolbarAccount", { walletAddress, etherlink })
+
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null)
   const [popperOpen, setPopperOpen] = useState(false)
   const [networkPopperOpen, setNetworkPopperOpen] = useState(false)

diff --git a/src/modules/common/ToolbarCommon.tsx b/src/modules/common/ToolbarCommon.tsx
@@ -26,7 +26,7 @@ import { ChangeNetworkButton } from "./ChangeNetworkButton"
 import { ArrowBackIos } from "@material-ui/icons"
 import { ConnectWalletButton } from "./ConnectWalletButton"
 import { NavigationMenu } from "modules/explorer/components/NavigationMenu"
-import { ActionSheet, useActionSheet } from "../explorer/context/ActionSheets"
+import { ActionSheet, useActionSheet } from "modules/explorer/context/ActionSheets"
 
 const Header = styled(Grid)(({ theme }) => ({
   width: "1000px",
@@ -77,15 +77,23 @@ const LogoText = styled(Typography)({
   letterSpacing: "initial"
 })
 
-const AddressBarWrapper = styled(Grid)(({ theme }) => ({
-  borderRadius: 8,
-  background: theme.palette.primary.main,
-  paddingLeft: 16,
-  paddingRight: 16,
-  paddingTop: 5,
-  paddingBottom: 6,
-  boxSizing: "border-box"
-}))
+const AddressBarWrapper: React.FC<any> = ({ variant, onClick, ...props }) => {
+  const theme = useTheme()
+  const background = variant === "common" ? theme.palette.primary.dark : theme.palette.primary.main
+  const StyledGrid = styled(Grid)(({ theme }) => ({
+    borderRadius: 8,
+    background: background,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 5,
+    paddingBottom: 6,
+    boxSizing: "border-box"
+  }))
+
+  return <StyledGrid onClick={onClick} item {...props} />
+}
+
+AddressBarWrapper.displayName = "AddressBarWrapper"
 
 const LogoItem = styled("img")({
   height: "30px",

diff --git a/src/modules/explorer/components/ConfigProposalForm.tsx b/src/modules/explorer/components/ConfigProposalForm.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 import { Grid, Typography, TextField, styled } from "@material-ui/core"
 import React, { useCallback } from "react"
 import { useDAO } from "services/services/dao/hooks/useDAO"

diff --git a/src/modules/explorer/components/DelegationChangeProposalForm.tsx b/src/modules/explorer/components/DelegationChangeProposalForm.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 import { Grid, styled, Typography, TextField } from "@material-ui/core"
 import React, { useCallback, useEffect, useMemo } from "react"
 import { useDAO } from "services/services/dao/hooks/useDAO"

diff --git a/src/modules/explorer/components/GuardianChangeProposalForm.tsx b/src/modules/explorer/components/GuardianChangeProposalForm.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 import { Grid, styled, Typography, TextField } from "@material-ui/core"
 import React, { useCallback, useEffect, useMemo } from "react"
 import { useDAO } from "services/services/dao/hooks/useDAO"

diff --git a/src/modules/explorer/components/ProposalActionsDialog.tsx b/src/modules/explorer/components/ProposalActionsDialog.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 import { Grid, styled, Typography, useMediaQuery, useTheme } from "@material-ui/core"
 import { RegistryProposalFormValues } from "modules/explorer/components/UpdateRegistryDialog"
 import { TreasuryProposalFormValues } from "modules/explorer/components/NewTreasuryProposalDialog"

diff --git a/src/modules/explorer/components/ProposalForm.tsx b/src/modules/explorer/components/ProposalForm.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 import { Grid, styled, Typography, TextField } from "@material-ui/core"
 import {
   registryProposalFormInitialState,

diff --git a/src/modules/explorer/components/ProposalSelectionMenu.tsx b/src/modules/explorer/components/ProposalSelectionMenu.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 import { Grid, styled, Button, Typography } from "@material-ui/core"
 import { RegistryProposalFormValues } from "modules/explorer/components/UpdateRegistryDialog"
 import { TreasuryProposalFormValues } from "modules/explorer/components/NewTreasuryProposalDialog"