130 clicking on an asset and/or getting back to list/card view view causes a crash (#131)

* Fix connector prop changing on every page change using memo()

Error: The connectors prop passed to Web3ReactProvider must be referentially static. If connectors is changing, try providing a key prop to Web3ReactProvider that changes every time connectors changes.

* use contracts addresses as IDs

* prettier

Author: BenoistP

src/pages/_app.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useMemo } from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { Provider } from 'react-redux'
 
@@ -116,45 +116,54 @@ const App = ({
 
   // Customize chains config for Gnosis and Ethereum
   // using rpc urls from props
-  const CustomChainsConfig = {
-    // Keep Goerli as testnet else an error will arise at init
-    [ChainsID.Goerli]: RealtCommonsDefaultChainsConfig[ChainsID.Goerli],
-    [ChainsID.Gnosis]: {
-      ...RealtCommonsDefaultChainsConfig[ChainsID.Gnosis],
-      rpcUrl:
-        GnosisRpcUrl || RealtCommonsDefaultChainsConfig[ChainsID.Gnosis].rpcUrl,
-    },
-    [ChainsID.Ethereum]: {
-      ...RealtCommonsDefaultChainsConfig[ChainsID.Ethereum],
-      rpcUrl:
-        EthereumRpcUrl ||
-        RealtCommonsDefaultChainsConfig[ChainsID.Ethereum].rpcUrl,
-    },
-    // TODO: add Polygon
-  }
+  const CustomChainsConfig = useMemo(
+    () => ({
+      // Keep Goerli as testnet else an error will arise at init
+      [ChainsID.Goerli]: RealtCommonsDefaultChainsConfig[ChainsID.Goerli],
+      [ChainsID.Gnosis]: {
+        ...RealtCommonsDefaultChainsConfig[ChainsID.Gnosis],
+        rpcUrl:
+          GnosisRpcUrl ||
+          RealtCommonsDefaultChainsConfig[ChainsID.Gnosis].rpcUrl,
+      },
+      [ChainsID.Ethereum]: {
+        ...RealtCommonsDefaultChainsConfig[ChainsID.Ethereum],
+        rpcUrl:
+          EthereumRpcUrl ||
+          RealtCommonsDefaultChainsConfig[ChainsID.Ethereum].rpcUrl,
+      },
+      // TODO: add Polygon
+    }),
+    [GnosisRpcUrl, EthereumRpcUrl],
+  )
 
-  const dashbordChains: ChainSelectConfig<RealtChains> = {
-    allowedChains: parseAllowedChain(ChainsID),
-    chainsConfig: CustomChainsConfig,
-    defaultChainId: ChainsID.Gnosis, // Explicitly setting Gnosis as the defaultChainId
-  }
+  const dashbordChains: ChainSelectConfig<RealtChains> = useMemo(
+    () => ({
+      allowedChains: parseAllowedChain(ChainsID),
+      chainsConfig: CustomChainsConfig,
+      defaultChainId: ChainsID.Gnosis, // Explicitly setting Gnosis as the defaultChainId
+    }),
+    [CustomChainsConfig],
+  )
 
   const envName = process.env.NEXT_PUBLIC_ENV ?? 'development'
   const walletConnectKey = process.env.NEXT_PUBLIC_WALLET_CONNECT_KEY ?? ''
 
-  const readOnly = getReadOnlyConnector(dashbordChains)
-  const walletConnect = getWalletConnectV2(
-    dashbordChains,
-    envName,
-    walletConnectKey,
-    false,
-  )
-
-  const libraryConnectors = getConnectors({
-    readOnly: readOnly,
-    metamask: [metaMask, metaMaskHooks],
-    walletConnectV2: walletConnect,
-  } as unknown as ConnectorsAvailable)
+  const libraryConnectors = useMemo(() => {
+    const readOnly = getReadOnlyConnector(dashbordChains)
+    const walletConnect = getWalletConnectV2(
+      dashbordChains,
+      envName,
+      walletConnectKey,
+      false,
+    )
+
+    return getConnectors({
+      readOnly: readOnly,
+      metamask: [metaMask, metaMaskHooks],
+      walletConnectV2: walletConnect,
+    } as unknown as ConnectorsAvailable)
+  }, [dashbordChains, envName, walletConnectKey])
 
   return (
     <QueryClientProvider client={queryClient}>

src/utils/blockchain/consts/otherTokens.ts

@@ -1,8 +1,3 @@
-// Each asset must have a different ID (used as KEY assets view)
-const RWA_asset_ID = 0
-const REG_asset_ID = 1
-const REGVotingPower_asset_ID = 2
-
 // Gnosis/xDai, Ethereum
 const RWA_ContractAddress = '0x0675e8F4A52eA6c845CB6427Af03616a2af42170'
 // Gnosis/xDai, Ethereum
@@ -14,6 +9,12 @@ const REG_Vault_Gnosis_ContractAddress =
 const RegVotingPower_Gnosis_ContractAddress =
   '0x6382856a731Af535CA6aea8D364FCE67457da438'
 
+// Asset IDs for RWA, REG, and REG Voting Power
+// Each asset must have a different ID (used as KEY assets view)
+const RWA_asset_ID = RWA_ContractAddress
+const REG_asset_ID = REG_ContractAddress
+const REGVotingPower_asset_ID = RegVotingPower_Gnosis_ContractAddress
+
 // Gnosis/xDai tokens for prices calculation
 const WXDAI_ContractAddress = '0xe91D153E0b41518A2Ce8Dd3D7944Fa863463a97d'
 const USDConXdai_ContractAddress = '0xDDAfbb505ad214D7b80b1f830fcCc89B60fb7A83'