Merge pull request #33 from gnosisguild/ui-updates

lite UI overhaul
gnosisguild · Jan 19, 2024 · 00e9520 · 00e9520 · vercel · Jan 19, 2024
2 parents 391ca03 + 9032ad1
commit 00e9520
Show file tree

Hide file tree

Showing 45 changed files with 2,097 additions and 1,510 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -3,15 +3,12 @@
   "version": "1.0.0",
   "private": true,
   "devDependencies": {
-    "0xsequence": "^1.6.2",
+    "@rainbow-me/rainbowkit": "^1.3.3",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@walletconnect/core": "^2.10.2",
     "@walletconnect/utils": "^2.10.2",
     "@walletconnect/web3wallet": "^1.9.2",
-    "@web3modal/ethereum": "^2.7.1",
-    "@web3modal/react": "^2.7.1",
-    "@web3modal/standalone": "^2.4.3",
     "buffer": "^6.0.3",
     "clsx": "^1.2.1",
     "copy-to-clipboard": "^3.3.3",
@@ -25,8 +22,8 @@
     "react-scripts": "5.0.1",
     "typescript": "^5.2.2",
     "typescript-plugin-css-modules": "^5.0.1",
-    "viem": "^1.16.5",
-    "wagmi": "^1.4.3"
+    "viem": "^1.21.4",
+    "wagmi": "^1.4.13"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -49,5 +46,8 @@
       "last 1 safari version"
     ]
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "@tanstack/react-query": "^5.17.15"
+  }
 }
diff --git a/frontend/src/chains.ts b/frontend/src/chains.ts
@@ -1,54 +1,17 @@
-import {
-  mainnet,
-  goerli,
-  avalanche,
-  arbitrum,
-  bsc,
-  polygon,
-  polygonMumbai,
-  gnosis,
-} from "wagmi/chains"
+import { mainnet, polygon, gnosis } from "wagmi/chains"
 
-export const CHAINS = {
+import { Chain } from "viem/chains"
+
+type ChainInfo = {
+  [key: number]: { prefix: string } & Chain
+}
+
+export const CHAINS: ChainInfo = {
   [mainnet.id]: { ...mainnet, prefix: "eth" },
-  [goerli.id]: { ...goerli, prefix: "gor" },
-  // [avalanche.id]: { ...avalanche, prefix: "avax" },
-  // [arbitrum.id]: { ...arbitrum, prefix: "arb1" },
-  // [bsc.id]: { ...bsc, prefix: "bnb" },
   [polygon.id]: { ...polygon, prefix: "matic" },
-  [polygonMumbai.id]: { ...polygonMumbai, prefix: "maticmum" },
   [gnosis.id]: { ...gnosis, prefix: "gno" },
 }
 
 export type ChainId = keyof typeof CHAINS
 
-export const DEFAULT_CHAIN = CHAINS[5]
-
-export enum SequenceIndexerServices {
-  MAINNET = "https://mainnet-indexer.sequence.app",
-
-  POLYGON = "https://polygon-indexer.sequence.app",
-  POLYGON_MUMBAI = "https://mumbai-indexer.sequence.app",
-
-  POLYGON_ZKEVM = "https://polygon-zkevm-indexer.sequence.app",
-
-  ARBITRUM = "https://arbitrum-indexer.sequence.app",
-  ARBITRUM_NOVA = "https://arbitrum-nova-indexer.sequence.app",
-
-  OPTIMISM = "https://optimism-indexer.sequence.app",
-  AVALANCHE = "https://avalanche-indexer.sequence.app",
-  GNOSIS = "https://gnosis-indexer.sequence.app",
-
-  BSC = "https://bsc-indexer.sequence.app",
-  BSC_TESTNET = "https://bsc-testnet-indexer.sequence.app",
-
-  GOERLI = "https://goerli-indexer.sequence.app",
-}
-
-export const SEQUENCER_ENDPOINTS: Record<ChainId, SequenceIndexerServices> = {
-  1: SequenceIndexerServices.MAINNET,
-  5: SequenceIndexerServices.GOERLI,
-  100: SequenceIndexerServices.GNOSIS,
-  137: SequenceIndexerServices.POLYGON,
-  80001: SequenceIndexerServices.POLYGON_MUMBAI,
-}
+export const DEFAULT_CHAIN = CHAINS[1]
diff --git a/frontend/src/components/Blockie/Blockie.module.css b/frontend/src/components/Blockie/Blockie.module.css
@@ -1,6 +1,7 @@
 .container {
   overflow: hidden;
   border-radius: 50%;
+  aspect-ratio: 1;
 }
 
 .container img {

diff --git a/frontend/src/components/ChainSelect/ChainSelect.module.css b/frontend/src/components/ChainSelect/ChainSelect.module.css
@@ -1,8 +1,90 @@
 .button {
   height: 40px;
   padding: 5px 10px;
+  border: none;
+  background: none;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  box-shadow: none;
+}
+
+.button:hover {
+  background-color: var(--button-bg);
+  filter: none;
+}
+
+.chevronDown {
+  stroke: var(--text-color);
+  width: 1em;
+  padding-top: 3px;
+}
+.chevronDown.up {
+  transform: rotate(180deg);
 }
 
 .icon {
   height: 100%;
 }
+
+.dropdownIcon {
+  height: 100%;
+  width: 15px;
+}
+
+.container {
+  position: relative;
+}
+
+.dropdown {
+  position: absolute;
+  top: 50px;
+  right: 0;
+  background: rgb(248 212 226);
+  border-radius: 10px;
+  padding: 6px;
+  min-width: 200px;
+  z-index: 100;
+  border: 2px solid var(--button-bg);
+  box-shadow: 2px 2px 10px 0px rgba(150, 203, 0, 0.44);
+}
+
+.dropdown ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.dropdownItem {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  background: none;
+  border: none;
+  color: var(--text-color);
+  padding: 10px 8px;
+  border-radius: 10px;
+}
+
+.dropdownItem:hover {
+  background-color: var(--button-bg);
+}
+
+.chain {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.checkmark {
+  background-color: var(--box-bg);
+  padding: 2px 4px;
+  border-radius: 100px;
+  stroke: var(--text-color);
+}
diff --git a/frontend/src/components/ChainSelect/index.tsx b/frontend/src/components/ChainSelect/index.tsx
@@ -1,34 +1,93 @@
-import { useWeb3Modal } from "@web3modal/react"
+import { useChainId, useSwitchNetwork } from "wagmi"
+import { Suspense, lazy, useState } from "react"
+import clsx from "clsx"
 import Button from "../Button"
-
+import useClickAway from "../../hooks/useClickAway"
 import classes from "./ChainSelect.module.css"
-import { Chain, useNetwork } from "wagmi"
-import { Suspense, lazy, useEffect, useState } from "react"
-import { DEFAULT_CHAIN } from "../../chains"
+import { CHAINS } from "../../chains"
 const ChainIcon = lazy(() => import("../ChainIcon"))
 
 const ChainSelect = () => {
-  const [selectedChain, setSelectedChain] = useState<Chain>(DEFAULT_CHAIN)
-  const { open } = useWeb3Modal()
-  const { chain } = useNetwork()
+  const [showDropdown, setShowDropdown] = useState(false)
+  const { switchNetwork } = useSwitchNetwork()
+  const currentChainId = useChainId()
 
-  useEffect(() => {
-    if (chain) {
-      setSelectedChain(chain)
-    }
-  }, [chain])
+  const ref = useClickAway(() => {
+    setShowDropdown(false)
+  })
 
   return (
-    <div>
+    <div className={classes.container} ref={ref}>
       <Button
-        onClick={() => open({ route: "SelectNetwork" })}
+        onClick={() => setShowDropdown(showDropdown ? false : true)}
         secondary
         className={classes.button}
       >
         <Suspense fallback={<div />}>
-          <ChainIcon chainId={selectedChain.id} className={classes.icon} />
+          <ChainIcon chainId={currentChainId} className={classes.icon} />
         </Suspense>
+
+        <svg
+          viewBox="0 0 10 7"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={clsx(classes.chevronDown, showDropdown && classes.up)}
+        >
+          <path d="M1 1L5 5L9 1" stroke="inherit" strokeWidth="2" />
+        </svg>
       </Button>
+      {showDropdown && (
+        <div className={classes.dropdown}>
+          <ul>
+            {Object.keys(CHAINS).map((chainId) => {
+              const chain = CHAINS[parseInt(chainId)]
+              return (
+                <li key={chainId}>
+                  <button
+                    onClick={() => {
+                      switchNetwork?.(chain.id)
+                      setShowDropdown(false)
+                    }}
+                    className={classes.dropdownItem}
+                  >
+                    <div className={classes.chain}>
+                      <Suspense fallback={<div />}>
+                        <ChainIcon
+                          chainId={chain.id}
+                          className={classes.dropdownIcon}
+                        />
+                      </Suspense>
+                      <p>{chain.name}</p>
+                    </div>
+
+                    {currentChainId && chain.id === currentChainId ? (
+                      <div className={classes.checkmark}>
+                        <svg
+                          width="12"
+                          height="9"
+                          viewBox="0 0 12 9"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M1 4.5L4.5 8L11 1"
+                            stroke="inherit"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          />
+                        </svg>
+                      </div>
+                    ) : (
+                      <div />
+                    )}
+                  </button>
+                </li>
+              )
+            })}
+          </ul>
+        </div>
+      )}
     </div>
   )
 }

diff --git a/frontend/src/components/ConnectButton/ConnectButton.module.css b/frontend/src/components/ConnectButton/ConnectButton.module.css
@@ -0,0 +1,23 @@
+.container {
+  position: relative;
+  z-index: 100;
+}
+
+.blockie {
+  height: 1.5em;
+}
+
+.button {
+  height: 40px;
+  padding: 0 10px;
+}
+.connectedButton {
+  padding: 5px 10px 5px 5px;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.connectedButton p {
+  font-family: monospace;
+}
diff --git a/frontend/src/components/ConnectButton/index.tsx b/frontend/src/components/ConnectButton/index.tsx
@@ -0,0 +1,61 @@
+import { ConnectButton as RKConnectButton } from "@rainbow-me/rainbowkit"
+import clsx from "clsx"
+import Button from "../Button"
+import { shortenAddress } from "../../utils/shortenAddress"
+import Blockie from "../Blockie"
+import classes from "./ConnectButton.module.css"
+
+export const ConnectButton = () => {
+  return (
+    <RKConnectButton.Custom>
+      {({ account, chain, openAccountModal, openConnectModal, mounted }) => {
+        const ready = mounted
+        const connected = ready && account && chain
+
+        return (
+          <div
+            {...(!ready && {
+              "aria-hidden": true,
+              style: {
+                opacity: 0,
+                pointerEvents: "none",
+                userSelect: "none",
+              },
+            })}
+            className={classes.container}
+          >
+            {(() => {
+              if (!connected) {
+                return (
+                  <Button
+                    onClick={openConnectModal}
+                    secondary
+                    className={clsx(classes.button)}
+                  >
+                    Connect Wallet
+                  </Button>
+                )
+              }
+
+              return (
+                <Button
+                  onClick={openAccountModal}
+                  secondary
+                  className={clsx(classes.button, classes.connectedButton)}
+                >
+                  <Blockie
+                    address={account.address}
+                    className={classes.blockie}
+                  />
+                  <p>{shortenAddress(account.address)}</p>
+                </Button>
+              )
+            })()}
+          </div>
+        )
+      }}
+    </RKConnectButton.Custom>
+  )
+}
+
+export default ConnectButton