use wallet connect config from envs (#88)

* use wallet connect config from envs

* update readme

README.md

@@ -11,6 +11,7 @@
 ## Prerequisites
 
 - Node.js version 18 and `pnpm` installed on your system
+- Wallet Connect account
 
 For deploying with Vercel, create an account with [Vercel](https://vercel.com/signup) if you don't have one already.
 
@@ -61,7 +62,14 @@ pnpm ladle
 
 This will automatically open your default browser at `http://localhost:61000`.
 
-## Part 3: Deploying with Vercel
+## Part 3: Configuring environment
+
+Add or modify the relevant endpoints, links and options in `/public/configs/env.json`.
+You'll need to provide a Wallet Connect project id to enable onboarding and wallet connection:
+- Create a project on https://cloud.walletconnect.com/app
+- Copy over the project ID into this [field](https://github.com/dydxprotocol/v4-web/blob/67ecbd75b43e0c264b7b4d2d9b3d969830b0621c/public/configs/env.json#L822C33-L822C46)
+
+## Part 4: Deploying with Vercel
 
 ### Step 1: Connect your repository to Vercel
 
@@ -78,7 +86,7 @@ If you wish to incorporate analytics via Amplitude and Bugsnag, you can use our
 
 For more details, check out Vercel's [official documentation](https://vercel.com/docs).
 
-## Part 4: Deploying to IPFS
+## Part 5: Deploying to IPFS
 
 ### web3.storage: deploy to IPFS via web3.storage using the provided script
 

src/hooks/useWalletConnection.ts

@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
 
 import { LocalStorageKey } from '@/constants/localStorage';
+import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
 
 import {
   type DydxAddress,
@@ -28,6 +30,8 @@ import {
   WalletType as CosmosWalletType,
 } from 'graz';
 
+import { getSelectedNetwork } from '@/state/appSelectors';
+
 import { resolveWagmiConnector } from '@/lib/wagmi';
 import { getWalletConnection, parseWalletError } from '@/lib/wallet';
 import { log } from '@/lib/telemetry';
@@ -84,6 +88,9 @@ export const useWalletConnection = () => {
 
   // Wallet connection
 
+  const selectedNetwork = useSelector(getSelectedNetwork);
+  const walletConnectConfig = ENVIRONMENT_CONFIG_MAP[selectedNetwork].wallets.walletconnect;
+
   const { connectAsync: connectWagmi } =
     walletType && walletConnectionType
       ? useConnectWagmi({
@@ -92,6 +99,7 @@ export const useWalletConnection = () => {
             walletConnection: {
               type: walletConnectionType,
             },
+            walletConnectConfig,
           }),
         })
       : useConnectWagmi();
@@ -127,6 +135,7 @@ export const useWalletConnection = () => {
               connector: resolveWagmiConnector({
                 walletType,
                 walletConnection,
+                walletConnectConfig,
               }),
             });
           }
@@ -217,7 +226,7 @@ export const useWalletConnection = () => {
     evmAddressWagmi,
     signerWagmi,
     publicClientWagmi,
-    
+
     // Wallet connection (Cosmos)
     dydxAddress,
     dydxAddressGraz,

src/lib/wagmi.ts

@@ -95,15 +95,28 @@ const injectedConnectorOptions = {
   },
 };
 
-const walletconnect2ConnectorOptions: ConstructorParameters<typeof WalletConnectConnector>[0] = {
+type WalletConnectConfig = {
+  client: {
+    name: string;
+    description: string;
+    iconUrl: string;
+  };
+  v2: {
+    projectId: string;
+  };
+};
+
+const getWalletconnect2ConnectorOptions = (
+  config: WalletConnectConfig
+): ConstructorParameters<typeof WalletConnectConnector>[0] => ({
   chains,
   options: {
-    projectId: import.meta.env.VITE_WALLETCONNECT2_PROJECT_ID,
+    projectId: config.v2.projectId,
     metadata: {
-      name: 'dYdX',
-      description: '',
+      name: config.client.name,
+      description: config.client.description,
       url: import.meta.env.VITE_BASE_URL,
-      icons: [`${import.meta.env.VITE_BASE_URL}/cbw-image.png}`],
+      icons: [config.client.iconUrl],
     },
     showQrModal: true,
     qrModalOptions: {
@@ -115,9 +128,9 @@ const walletconnect2ConnectorOptions: ConstructorParameters<typeof WalletConnect
       explorerRecommendedWalletIds: WALLET_CONNECT_EXPLORER_RECOMMENDED_IDS,
     },
   },
-};
+});
 
-const connectors = [
+const getConnectors = (walletConnectConfig: WalletConnectConfig) => [
   new MetaMaskConnector({
     chains,
     options: {
@@ -131,7 +144,7 @@ const connectors = [
       reloadOnDisconnect: false,
     },
   }),
-  new WalletConnectConnector(walletconnect2ConnectorOptions),
+  new WalletConnectConnector(getWalletconnect2ConnectorOptions(walletConnectConfig)),
   new InjectedConnector(injectedConnectorOptions),
 ];
 
@@ -153,27 +166,34 @@ const createInjectedConnectorWithProvider = (provider: ExternalProvider) =>
       provider as unknown as Awaited<ReturnType<InjectedConnector['getProvider']>>;
   })(injectedConnectorOptions) as InjectedConnector;
 
-const createWalletConnect2ConnectorWithId = (walletconnect2Id: string) =>
-  new WalletConnectConnector({
+const createWalletConnect2ConnectorWithId = (
+  walletconnectId: string,
+  walletConnectConfig: WalletConnectConfig
+) => {
+  const walletconnect2ConnectorOptions = getWalletconnect2ConnectorOptions(walletConnectConfig);
+  return new WalletConnectConnector({
     ...walletconnect2ConnectorOptions,
     options: {
       ...walletconnect2ConnectorOptions.options,
       qrModalOptions: {
         ...walletconnect2ConnectorOptions.options.qrModalOptions,
-        explorerRecommendedWalletIds: [walletconnect2Id],
+        explorerRecommendedWalletIds: [walletconnectId],
         explorerExcludedWalletIds: 'ALL',
       },
     },
   });
+};
 
 // Custom connector from wallet selection
 
 export const resolveWagmiConnector = ({
   walletType,
   walletConnection,
+  walletConnectConfig,
 }: {
   walletType: WalletType;
   walletConnection: WalletConnection;
+  walletConnectConfig: WalletConnectConfig;
 }) => {
   const walletConfig = wallets[walletType];
   const walletConnectionConfig = walletConnectionTypes[walletConnection.type];
@@ -181,6 +201,6 @@ export const resolveWagmiConnector = ({
   return walletConnection.type === WalletConnectionType.InjectedEip1193 && walletConnection.provider
     ? createInjectedConnectorWithProvider(walletConnection.provider)
     : walletConnection.type === WalletConnectionType.WalletConnect2 && walletConfig.walletconnect2Id
-    ? createWalletConnect2ConnectorWithId(walletConfig.walletconnect2Id)
-    : connectors.find(({ id }: { id: string }) => id === walletConnectionConfig.wagmiConnectorId);
+    ? createWalletConnect2ConnectorWithId(walletConfig.walletconnect2Id, walletConnectConfig)
+    : getConnectors(walletConnectConfig).find(({ id }: { id: string }) => id === walletConnectionConfig.wagmiConnectorId);
 };