fix: fixed WalletConnect connection and disconnection

WalletConnect stores data on localStorage and they become persistent. However, the connection with the app stops working after a while.

To fix that we cleanup the data once the user disconnects

Author: hbarcelos

src/adapters/web3-react/createHooks.js

@@ -1,6 +1,7 @@
 import { useEffect, useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { useWeb3React } from '@web3-react/core';
+import { WalletConnectConnector } from '@web3-react/walletconnect-connector';
 import {
   selectCurrentConnector,
   selectActivatingConnector,
@@ -44,9 +45,18 @@ export default function createHooks({ connectors = {} } = {}) {
 
     return useCallback(
       async connectorName => {
+        const connector = connectors[connectorName];
+        /**
+         * WalletConnect provider doesn't work after user rejects the request the first time:
+         * @see { @link https://github.com/NoahZinsmeister/web3-react/issues/217 }
+         */
+        if (connector instanceof WalletConnectConnector && connector.walletConnectProvider?.wc?.uri) {
+          connector.walletConnectProvider = undefined;
+        }
+
         try {
           dispatch(actions.activate.start({ name: connectorName }));
-          await activate(connectors[connectorName], undefined, true);
+          await activate(connector, undefined, true);
           dispatch(actions.activate.success({ name: connectorName }));
         } catch (err) {
           setError(err);
@@ -58,13 +68,20 @@ export default function createHooks({ connectors = {} } = {}) {
   }
 
   function useDisconnectFromProvider() {
-    const { deactivate } = useWeb3React();
+    const { connector, deactivate } = useWeb3React();
     const dispatch = useDispatch();
 
     return useCallback(() => {
+      if (connector instanceof WalletConnectConnector) {
+        /**
+         * Cleans up wallet connect, otherwise it won't show the QR code when connecting again.
+         */
+        window.localStorage.removeItem('walletconnect');
+      }
+
       deactivate();
       dispatch(actions.deactivate());
-    }, [dispatch, deactivate]);
+    }, [dispatch, connector, deactivate]);
   }
 
   function useSyncToStore() {

src/shared/EthValue.jsx

@@ -4,6 +4,9 @@ import { useSelector } from 'react-redux';
 import Web3 from 'web3';
 import { selectChainId } from '~/features/web3/web3Slice';
 import FormattedNumber from './FormattedNumber';
+import { defaultChainId } from '~/features/web3/supportedChains';
+
+const DEFAULT_CHAIN_ID = process.env.DEFAULT_CHAIN_ID;
 
 const { fromWei, toWei, toBN } = Web3.utils;
 
@@ -147,10 +150,12 @@ const canDisplay = ({ amount, unit, maxIntDigits, decimals }) => {
   return isIntPartOk && isFrPartOk;
 };
 
-export const getBestDisplayUnit = ({ chainId, amount, maxIntDigits = 3, decimals = 2 }) => {
+export const getBestDisplayUnit = ({ chainId = DEFAULT_CHAIN_ID, amount, maxIntDigits = 3, decimals = 2 }) => {
   const defaultUnit = {
     unit: indexedAvailableUnits.ether.unit,
-    suffix: indexedAvailableUnits.ether.chainIdToSuffixes[chainId],
+    suffix:
+      indexedAvailableUnits.ether.chainIdToSuffixes[chainId] ??
+      indexedAvailableUnits.ether.chainIdToSuffixes[defaultChainId],
   };
 
   if (canDisplay({ amount, maxIntDigits, decimals, unit: indexedAvailableUnits.ether.unit })) {