WalletConnect updates (#749)

* bump @walletconnect/web3-provider to v1.5.0-rc.7

* bump web3 to v1.4.0

* proper wallet logout

* listen to chainChanged instead of networkChanged

* restores network switching for WalletConnect

* fix wallet switching

* get and set initial chainId

* walletconnect modal visual fixes

package.json

@@ -32,7 +32,7 @@
     "@portis/web3": "^4.0.4",
     "@sindresorhus/slugify": "^2.1.0",
     "@tippyjs/react": "^4.2.5",
-    "@walletconnect/web3-provider": "^1.4.1",
+    "@walletconnect/web3-provider": "^1.5.0-rc.7",
     "axios": "^0.21.1",
     "chart.js": "^2.9.4",
     "classnames": "^2.3.1",
@@ -82,7 +82,7 @@
     "slugify": "^1.5.3",
     "swr": "^0.5.6",
     "use-dark-mode": "^2.3.1",
-    "web3": "^1.3.6",
+    "web3": "^1.4.0",
     "web3modal": "^1.9.3",
     "yup": "^0.32.9"
   },

src/components/molecules/Wallet/Details.tsx

@@ -14,6 +14,7 @@ export default function Details(): ReactElement {
   const {
     web3Provider,
     web3ProviderInfo,
+    web3Modal,
     connect,
     logout,
     networkId,
@@ -95,8 +96,8 @@ export default function Details(): ReactElement {
             <Button
               style="text"
               size="small"
-              onClick={() => {
-                logout()
+              onClick={async () => {
+                await web3Modal?.clearCachedProvider()
                 connect()
               }}
             >

src/global/_web3modal.css

@@ -81,6 +81,30 @@ div.walletconnect-modal__base {
   box-shadow: 0 6px 17px 0 var(--box-shadow-color);
 }
 
+div.walletconnect-modal__mobile__toggle {
+  width: 95%;
+  text-transform: uppercase;
+  cursor: pointer;
+  background: var(--background-body);
+  border: 1px solid var(--border-color);
+}
+
+div.walletconnect-modal__mobile__toggle a {
+  color: var(--color-secondary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-small);
+  padding: calc(var(--spacer) / 12) var(--spacer);
+  white-space: nowrap;
+}
+
+div.walletconnect-modal__mobile__toggle_selector {
+  background: var(--font-color-heading);
+  color: var(--background-body);
+  border-color: var(--font-color-heading);
+  height: calc(100% - calc(var(--spacer) / 12));
+  top: calc(var(--spacer) / 24);
+}
+
 div.walletconnect-modal__header p {
   color: var(--font-color-heading);
 }
@@ -89,6 +113,11 @@ p.walletconnect-qrcode__text {
   color: var(--color-secondary);
 }
 
+h3.walletconnect-modal__base__row__h3 {
+  font-size: var(--font-size-base);
+  color: var(--font-color-text);
+}
+
 svg.walletconnect-qrcode__image path:first-child {
   fill: var(--background-body);
 }

src/providers/Web3.tsx

@@ -27,6 +27,7 @@ interface Web3ProviderValue {
   web3ProviderInfo: IProviderInfo
   accountId: string
   networkId: number
+  chainId: number
   networkDisplayName: string
   networkData: EthereumListsChain
   block: number
@@ -109,6 +110,7 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
   const [web3Modal, setWeb3Modal] = useState<Web3Modal>()
   const [web3ProviderInfo, setWeb3ProviderInfo] = useState<IProviderInfo>()
   const [networkId, setNetworkId] = useState<number>()
+  const [chainId, setChainId] = useState<number>()
   const [networkDisplayName, setNetworkDisplayName] = useState<string>()
   const [networkData, setNetworkData] = useState<EthereumListsChain>()
   const [block, setBlock] = useState<number>()
@@ -136,6 +138,10 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
       setNetworkId(networkId)
       Logger.log('[web3] network id ', networkId)
 
+      const chainId = await web3.eth.getChainId()
+      setChainId(chainId)
+      Logger.log('[web3] chain id ', chainId)
+
       const accountId = (await web3.eth.getAccounts())[0]
       setAccountId(accountId)
       Logger.log('[web3] account id', accountId)
@@ -235,16 +241,27 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
   // Logout helper
   // -----------------------------------
   async function logout() {
-    web3Modal?.clearCachedProvider()
+    if (web3 && web3.currentProvider && (web3.currentProvider as any).close) {
+      await (web3.currentProvider as any).close()
+    }
+    await web3Modal.clearCachedProvider()
   }
 
   // -----------------------------------
   // Handle change events
   // -----------------------------------
+  async function handleChainChanged(chainId: string) {
+    Logger.log('[web3] Chain changed', chainId)
+    const networkId = await web3.eth.net.getId()
+    setChainId(Number(chainId))
+    setNetworkId(Number(networkId))
+  }
+
   async function handleNetworkChanged(networkId: string) {
     Logger.log('[web3] Network changed', networkId)
-    // const networkId = Number(chainId.replace('0x', ''))
+    const chainId = await web3.eth.getChainId()
     setNetworkId(Number(networkId))
+    setChainId(Number(chainId))
   }
 
   async function handleAccountsChanged(accounts: string[]) {
@@ -255,19 +272,14 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
   useEffect(() => {
     if (!web3Provider || !web3) return
 
-    //
-    // HEADS UP! We should rather listen to `chainChanged` exposing the `chainId`
-    // but for whatever reason the exposed `chainId` is wildly different from
-    // what is shown on https://chainid.network, in turn breaking our network/config
-    // mapping. The networkChanged is deprecated but works as expected for our case.
-    // See: https://eips.ethereum.org/EIPS/eip-1193#chainchanged
-    //
+    web3Provider.on('chainChanged', handleChainChanged)
     web3Provider.on('networkChanged', handleNetworkChanged)
     web3Provider.on('accountsChanged', handleAccountsChanged)
 
     return () => {
-      web3Provider.removeListener('networkChanged')
-      web3Provider.removeListener('accountsChanged')
+      web3Provider.removeListener('chainChanged', handleChainChanged)
+      web3Provider.removeListener('networkChanged', handleNetworkChanged)
+      web3Provider.removeListener('accountsChanged', handleAccountsChanged)
     }
   }, [web3Provider, web3])
 
@@ -280,6 +292,7 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
         web3ProviderInfo,
         accountId,
         networkId,
+        chainId,
         networkDisplayName,
         networkData,
         block,