Merge pull request #39 from gnosis/walleconnect-v2

Bump wagmi to v0.12.0 and add support for wallet-connect v2
gnosis · Nov 15, 2023 · d243899 · d243899
2 parents 792a030 + 6695cca
commit d243899
Show file tree

Hide file tree

Showing 20 changed files with 2,606 additions and 1,210 deletions.
diff --git a/.github/workflows/web-ci.yml b/.github/workflows/web-ci.yml
@@ -41,6 +41,10 @@ jobs:
 
       - name: Build website
         run: yarn static
+        env:
+          WC_PROJECT_ID: ${{ secrets.WC_PROJECT_ID }}
+          RPC_URL_ETHEREUM: ${{ secrets.RPC_URL_ETHEREUM }}
+          RPC_URL_GNOSIS: 'https://rpc.gnosischain.com'
 
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v1

diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v16
diff --git a/packages/app/components/Balance.tsx b/packages/app/components/Balance.tsx
@@ -31,17 +31,33 @@ type Props = ComponentProps<typeof Field> & {
 const Balance: React.FC<Props> = ({ lockToken, ...rest }) => {
   const { decimals, tokenName, lockTokenName, tokenSymbol, lockTokenSymbol } =
     useTokenLockConfig()
-  const [{ data: accountData }] = useAccount()
-  const [{ data: balanceTokenData }] = useTokenContractRead("balanceOf", {
-    args: accountData?.address,
-    skip: !accountData?.address,
+  // const [{ data: accountData }] = useAccount()
+  const { address } = useAccount()
+  // const [{ data: balanceTokenData }] = useTokenContractRead("balanceOf", {
+  //   args: accountData?.address,
+  //   skip: !accountData?.address,
+  //   watch: true,
+  // })
+
+  const { data: balanceTokenData } = useTokenContractRead("balanceOf", {
+    args: [address],
+    skip: !address,
     watch: true,
   })
-  const [{ data: balanceLockTokenData }] = useTokenLockContractRead(
-    "balanceOf",
+
+  // const [{ data: balanceLockTokenData }] = useTokenLockContractRead(
+  //   "balanceOf",
+  //   {
+  //     args: accountData?.address,
+  //     skip: !accountData?.address,
+  //     watch: true,
+  //   }
+  // )
+
+  const { data: balanceLockTokenData } = useTokenLockContractRead("balanceOf",
     {
-      args: accountData?.address,
-      skip: !accountData?.address,
+      args: [address],
+      skip: !address,
       watch: true,
     }
   )

diff --git a/packages/app/components/Connect/Identicon.tsx b/packages/app/components/Connect/Identicon.tsx
@@ -1,4 +1,4 @@
-import { useAccount, useConnect } from "wagmi"
+import { useAccount, useConnect, useEnsAvatar } from "wagmi"
 import makeBlockie from "ethereum-blockies-base64"
 import clsx from "clsx"
 import cls from "./Identicon.module.css"
@@ -9,12 +9,17 @@ type Props = {
 }
 
 const Identicon: React.FC<Props> = ({ large }) => {
-  const [{ data: accountData }, disconnect] = useAccount({
-    fetchEns: true,
+  // const [{ data: accountData }, disconnect] = useAccount({
+  //   fetchEns: true,
+  // })
+  const { address } = useAccount()
+  const { data: avatar, isError, isLoading } = useEnsAvatar({
+    address,
   })
+
 
-  const avatar = accountData?.ens?.avatar
-  const address = accountData?.address
+  // const avatar = accountData?.ens?.avatar
+  // const address = accountData?.address
 
   const blockie = useMemo(() => address && makeBlockie(address), [address])
 
@@ -36,7 +41,7 @@ const Identicon: React.FC<Props> = ({ large }) => {
       <div
         className={clsx(
           cls.statusJewel,
-          accountData && cls.isConnected,
+          avatar && cls.isConnected,
           large && cls.isLarge
         )}
       />

diff --git a/packages/app/components/Connect/Modal.tsx b/packages/app/components/Connect/Modal.tsx
@@ -6,23 +6,23 @@ interface Props {
   onRequestClose(): void
 }
 const ConnectModal: React.FC<Props> = ({ onRequestClose }) => {
-  const [{ data, error }, connect] = useConnect()
+  const { data, error, connect, connectors } = useConnect()
 
   return (
     <Modal isOpen onRequestClose={onRequestClose} className={cls.container}>
       <h2 className={cls.h2}>Select a Wallet</h2>
       <p className={cls.textSmall}>
         Please select a wallet to connect to lock your GNO.
       </p>
-      {data.connectors.map(
+      {connectors.map(
         (connector) =>
           connector.ready && (
             <button
               className={cls.wallet}
               disabled={!connector.ready}
               key={connector.id}
               onClick={async () => {
-                const result = await connect(connector)
+                const result = await connect({ connector })
                 if (result?.data?.account) {
                   onRequestClose()
                 }

diff --git a/packages/app/components/Connect/index.tsx b/packages/app/components/Connect/index.tsx
@@ -1,7 +1,7 @@
 import { useRef, useState } from "react"
 import useOnClickOutside from "use-onclickoutside"
 import copy from "copy-to-clipboard"
-import { chain, useAccount, useConnect, useNetwork } from "wagmi"
+import { useAccount, useEnsName, useDisconnect, useNetwork } from "wagmi"
 import truncateEthAddress from "truncate-eth-address"
 import Identicon from "./Identicon"
 import Modal from "./Modal"
@@ -10,25 +10,22 @@ import cls from "./index.module.css"
 import IconButton, { IconLinkButton } from "../IconButton"
 
 const Connect: React.FC = () => {
-  const [{ data: network }] = useNetwork()
-  const [{ data: accountData }, disconnect] = useAccount({
-    fetchEns: true,
+  // const [{ data: network }] = useNetwork()
+  const { chain } = useNetwork()
+  const { address, isConnected, connector } = useAccount()
+  const { data: ensData } = useEnsName({
+    address,
   })
-  const [
-    {
-      data: { connected, connector },
-    },
-  ] = useConnect()
+
+  const { disconnect } = useDisconnect()
 
   const [showDropdown, setShowDropdown] = useState(false)
   const [showModal, setShowModal] = useState(false)
   const ref = useRef(null)
   useOnClickOutside(ref, () => setShowDropdown(false))
 
-  const address = accountData?.address
-
   const explorer =
-    network.chain?.blockExplorers && network.chain?.blockExplorers[0]
+    chain?.blockExplorers && chain?.blockExplorers[0]
 
   return (
     <>
@@ -50,7 +47,7 @@ const Connect: React.FC = () => {
 
         {showDropdown && (
           <div className={cls.dropdown} ref={ref}>
-            {connected ? (
+            {isConnected ? (
               <>
                 <div className={cls.dropdownAccountDetails}>
                   <div className={cls.row}>
@@ -59,8 +56,8 @@ const Connect: React.FC = () => {
                   {address && (
                     <div className={cls.dropdownAddress}>
                       <div className={cls.address}>
-                        {accountData?.ens?.name
-                          ? `${accountData?.ens?.name} (${truncateEthAddress(
+                        {ensData
+                          ? `${ensData} (${truncateEthAddress(
                               address
                             )})`
                           : truncateEthAddress(address)}
@@ -96,7 +93,7 @@ const Connect: React.FC = () => {
                   Network
                   <div className={cls.dropdownListFlex}>
                     <div className={cls.dropdownNetworkJewel} />
-                    {network.chain?.name || "Unsupported network"}
+                    {chain?.name || "Unsupported network"}
                   </div>
                 </div>
                 {connector?.id !== "gnosisSafe" && (

diff --git a/packages/app/components/ConnectHint.tsx b/packages/app/components/ConnectHint.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react"
-import { useNetwork } from "wagmi"
+import { useNetwork, useSwitchNetwork } from "wagmi"
 import { CHAINS } from "../config"
 import Card from "./Card"
 import Modal from "./Connect/Modal"
@@ -8,9 +8,10 @@ import Button from "./Button"
 const ConnectHint: React.FC = () => {
   const [showModal, setShowModal] = useState(false)
 
-  const [{ data }, switchNetwork] = useNetwork()
+  const { chain } = useNetwork()
+  const { switchNetwork } = useSwitchNetwork()
 
-  const connectedChainId = data.chain?.id
+  const connectedChainId = chain?.id
   const connectedToUnsupportedChain =
     connectedChainId && !CHAINS.some(({ id }) => id === connectedChainId)
 

diff --git a/packages/app/components/Deposit.tsx b/packages/app/components/Deposit.tsx
@@ -21,23 +21,23 @@ const Deposit: React.FC = () => {
 
   const chainId = useChainId()
   const { decimals, tokenSymbol } = useTokenLockConfig()
-  const [{ data: accountData }] = useAccount()
-  const [{ data: balanceOf }] = useTokenContractRead("balanceOf", {
-    args: accountData?.address,
-    skip: !accountData?.address,
+  const { address } = useAccount()
+  const { data: balanceOf } = useTokenContractRead("balanceOf", {
+    args: [address],
+    skip: !address,
     watch: true,
   })
 
   const balance = balanceOf as undefined | BigNumber
 
   const contractAddress = CONTRACT_ADDRESSES[chainId]
   const allowanceArgs = useMemo(
-    () => [accountData?.address, contractAddress],
-    [accountData?.address, contractAddress]
+    () => [address, contractAddress],
+    [address, contractAddress]
   )
-  const [{ data: allowance }] = useTokenContractRead("allowance", {
+  const { data: allowance } = useTokenContractRead("allowance", {
     args: allowanceArgs,
-    skip: !accountData?.address,
+    skip: !address,
     watch: true,
   })
 

diff --git a/packages/app/components/Provider.tsx b/packages/app/components/Provider.tsx
@@ -1,77 +1,52 @@
-import { providers } from "ethers"
-import React, { useEffect, useState } from "react"
-import { InjectedConnector, Provider as WagmiProvider } from "wagmi"
+import React from "react"
+import { createClient, WagmiConfig } from "wagmi"
+import { configureChains } from "@wagmi/core"
+import { mainnet, gnosis } from 'wagmi/chains'
+import { InjectedConnector } from 'wagmi/connectors/injected'
 import { WalletConnectConnector } from "wagmi/connectors/walletConnect"
-import { WalletLinkConnector } from "wagmi/connectors/walletLink"
-import { CHAINS, INFURA_ID, LOCKED_TOKEN_NAME } from "../config"
-import GnosisSafeConnector, { safePromise } from "./safeConnector"
-
-const provider = ({ chainId }: { chainId?: number }) => {
-  const rpcUrl =
-    CHAINS.find((x) => x.id === chainId)?.rpcUrls?.[0] ?? CHAINS[0].rpcUrls[0]
-  const provider = new providers.JsonRpcBatchProvider(rpcUrl, "any")
-  provider.pollingInterval = 6000
-  return provider
-}
-
-const webSocketProvider = ({ chainId }: { chainId?: number }) => {
-  if (chainId === 1) {
-    return new providers.InfuraWebSocketProvider(chainId, INFURA_ID)
-  }
-  if (chainId === 100) {
-    return new providers.WebSocketProvider("wss://rpc.gnosischain.com/wss", 100)
-  }
-
-  return undefined
-}
-
-let inGnosisSafe = false
-
-const connectors = ({ chainId }: { chainId?: number }) => {
-  if (inGnosisSafe) {
-    return [new GnosisSafeConnector({ chains: CHAINS })]
-  }
+import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
+// import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'
+import { WC_PROJECT_ID } from "../config"
+// import GnosisSafeConnector, { safePromise } from "./safeConnector"
+
+const { chains, provider } = configureChains(
+  [mainnet, gnosis],
+  [
+    jsonRpcProvider({
+      rpc: (chain) => ({
+        http: chain.id == 1 ? process.env.RPC_URL_ETHEREUM : process.env.RPC_URL_GNOSIS,
+        chainId: 1
+      }),
+    })
+  ]
+)
 
-  const rpcUrl =
-    CHAINS.find((x) => x.id === chainId)?.rpcUrls?.[0] ?? CHAINS[0].rpcUrls[0]
-  return [
-    new InjectedConnector({ chains: CHAINS }),
-    new WalletConnectConnector({
+const config = createClient({
+  autoConnect: true,
+  connectors: [
+    new InjectedConnector({
+      chains,
       options: {
-        infuraId: INFURA_ID,
-        qrcode: true,
-        bridge: "https://walletconnect.gnosis.io",
-      },
+        name: 'Injected',
+        shimDisconnect: true
+      }
     }),
-    new WalletLinkConnector({
+    new WalletConnectConnector({
       options: {
-        appName: `Lock ${LOCKED_TOKEN_NAME}`,
-        jsonRpcUrl: `${rpcUrl}/${INFURA_ID}`,
-      },
-    }),
-  ]
-}
-
-const Provider: React.FC = ({ children }) => {
-  const [safePromiseResolved, setSafePromiseResolved] = useState(false)
-  useEffect(() => {
-    safePromise.then((safe) => {
-      inGnosisSafe = !!safe
-      setSafePromiseResolved(true)
+        showQrModal: true,
+        projectId: WC_PROJECT_ID
+      }
     })
-  })
+  ],
+  provider
+})
 
-  return safePromiseResolved ? (
-    <WagmiProvider
-      autoConnect
-      provider={provider}
-      webSocketProvider={webSocketProvider}
-      connectors={connectors}
-    >
+
+const Provider: React.FC = ({ children }) => {
+  return (
+    <WagmiConfig client={config}>
       {children}
-    </WagmiProvider>
-  ) : (
-    <h1>loading...</h1>
+    </WagmiConfig>
   )
 }