fix walletconnect on non-mainnet chains

gnosisguild · Aug 8, 2023 · 1185e43 · 1185e43
1 parent 57abb8b
commit 1185e43
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/extension/src/providers/useWalletConnect.ts b/extension/src/providers/useWalletConnect.ts
@@ -137,14 +137,19 @@ interface WalletConnectResult {
   chainId: number | null
 }
 
-const useWalletConnect = (connectionId: string): WalletConnectResult | null => {
+const useWalletConnect = (
+  connectionId: string,
+  connectionChainId: number
+): WalletConnectResult | null => {
   const [provider, setProvider] =
     useState<WalletConnectEthereumMultiProvider | null>(null)
   const [connected, setConnected] = useState(
     provider ? provider.connected : false
   )
   const [accounts, setAccounts] = useState(provider ? provider.accounts : [])
-  const [chainId, setChainId] = useState(provider ? provider.chainId : 1)
+  const [chainId, setChainId] = useState(
+    provider ? provider.chainId : connectionChainId
+  )
 
   // effect to initialize the provider
   useEffect(() => {
@@ -153,7 +158,7 @@ const useWalletConnect = (connectionId: string): WalletConnectResult | null => {
         connectionId,
         projectId: WALLETCONNECT_PROJECT_ID,
         showQrModal: true,
-        chains: [1],
+        chains: [connectionChainId],
         optionalChains: Object.keys(RPC).map((chainId) => Number(chainId)),
         rpcMap: RPC,
       })
@@ -165,7 +170,7 @@ const useWalletConnect = (connectionId: string): WalletConnectResult | null => {
       setAccounts(provider.accounts)
       setChainId(provider.chainId)
     })
-  }, [connectionId])
+  }, [connectionId, connectionChainId])
 
   // effect to subscribe to provider events
   useEffect(() => {

diff --git a/extension/src/settings/Connection/ConnectButton/index.tsx b/extension/src/settings/Connection/ConnectButton/index.tsx
@@ -31,7 +31,7 @@ const ConnectButton: React.FC<{ id: string }> = ({ id }) => {
   const { connected, connection } = useConnection(id)
 
   const metamask = useMetaMask()
-  const walletConnect = useWalletConnect(connection.id)
+  const walletConnect = useWalletConnect(connection.id, connection.chainId || 1)
 
   const connect = (
     providerType: ProviderType,

diff --git a/extension/src/settings/connectionHooks.tsx b/extension/src/settings/connectionHooks.tsx
@@ -122,7 +122,7 @@ export const useConnection = (id?: string) => {
   }
 
   const metamask = useMetaMask()
-  const walletConnect = useWalletConnect(connection.id)
+  const walletConnect = useWalletConnect(connection.id, connection.chainId || 1)
 
   const provider: Eip1193Provider =
     (connection.providerType === ProviderType.MetaMask