diff --git a/README.md b/README.md index a9fe8e8..9eaf7f3 100644 --- a/README.md +++ b/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 diff --git a/public/cbw-image.png b/public/cbw-image.png deleted file mode 100644 index d3d6ebc..0000000 Binary files a/public/cbw-image.png and /dev/null differ diff --git a/src/hooks/useWalletConnection.ts b/src/hooks/useWalletConnection.ts index 67fc676..0df1dae 100644 --- a/src/hooks/useWalletConnection.ts +++ b/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, diff --git a/src/lib/wagmi.ts b/src/lib/wagmi.ts index 050a400..469a41f 100644 --- a/src/lib/wagmi.ts +++ b/src/lib/wagmi.ts @@ -95,15 +95,28 @@ const injectedConnectorOptions = { }, }; -const walletconnect2ConnectorOptions: ConstructorParameters[0] = { +type WalletConnectConfig = { + client: { + name: string; + description: string; + iconUrl: string; + }; + v2: { + projectId: string; + }; +}; + +const getWalletconnect2ConnectorOptions = ( + config: WalletConnectConfig +): ConstructorParameters[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 [ 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>; })(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); };