Fix: AppContextProvider handle wallet network change

JoinColony · Jan 23, 2025 · a5b5395 · a5b5395
1 parent 7c20d9c
commit a5b5395
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 2 deletions.
diff --git a/src/Entry.tsx b/src/Entry.tsx
@@ -62,12 +62,14 @@ const Entry = ({ store }: Props) => {
     <DynamicContextProvider
       theme={isDarkMode ? 'dark' : 'light'}
       settings={{
-        logLevel: 'WARN',
+        debugError: import.meta.env.DEV,
+        logLevel: import.meta.env.DEV ? 'WARN' : 'ERROR',
         mobileExperience: 'redirect',
         environmentId: import.meta.env.DYNAMIC_ENV_ID,
         walletConnectors: [EthereumWalletConnectors],
         initialAuthenticationMode: 'connect-only',
         enableVisitTrackingOnConnectOnly: false,
+        networkValidationMode: 'always',
         recommendedWallets: [
           {
             walletKey: 'metamask',

diff --git a/...mmon/Extensions/UserNavigation/partials/WalletConnectedTopMenu/WalletConnectedTopMenu.tsx b/...mmon/Extensions/UserNavigation/partials/WalletConnectedTopMenu/WalletConnectedTopMenu.tsx
@@ -54,6 +54,10 @@ const WalletConnectedTopMenu: FC<PropsWithChildren> = ({ children }) => {
           </p>
         </Link>
       )}
+      {/*
+       * Only show the manage embedded wallet link if the wallet is embedded / custodial
+       * All the other wallet types have their own interface
+       */}
       {wallet?.label === 'turnkeyhd' && (
         <div className="navigation-link -ml-4 w-[calc(100%+2rem)] rounded hover:bg-gray-50">
           <Wallet size={iconSize} />

diff --git a/src/context/AppContext/AppContextProvider.tsx b/src/context/AppContext/AppContextProvider.tsx
@@ -1,4 +1,7 @@
-import { useDynamicContext } from '@dynamic-labs/sdk-react-core';
+import {
+  useDynamicContext,
+  useDynamicEvents,
+} from '@dynamic-labs/sdk-react-core';
 import { utils } from 'ethers';
 import React, {
   useState,
@@ -189,6 +192,52 @@ const AppContextProvider = ({ children }: { children: ReactNode }) => {
     walletHandler();
   }, [primaryWallet, setupUserContext, updateWallet]);
 
+  useDynamicEvents('primaryWalletNetworkChanged', async () => {
+    // console.log('network change', args);
+    // console.log({ primaryWallet })
+    if (primaryWallet) {
+      setWalletConnecting(true);
+
+      // Both methods exist as described by the documentation
+      // https://docs.dynamic.xyz/wallets/using-wallets/evm/evm-wallets#ethereum-wallet-methods
+      // and as supported by the code actually working
+      // I suspect their types are the ones not working properly here
+      // @ts-ignore
+      const publicClient = await primaryWallet.getPublicClient();
+      // @ts-ignore
+      const walletClient = await primaryWallet.getWalletClient();
+
+      const walletAddress = utils.getAddress(primaryWallet.address);
+
+      const RetryProvider = retryProviderFactory(
+        walletClient.transport,
+        walletAddress,
+      );
+      const provider = new RetryProvider();
+
+      const dynamicWallet = {
+        ...walletClient,
+        publicClient,
+        ethersProvider: provider,
+        provider,
+        primaryWallet,
+        address: walletAddress,
+        label: primaryWallet.key,
+        chains: [publicClient.chain, walletClient.chain],
+      };
+
+      debugLogging('SETTING WALLET CONTEXT', dynamicWallet);
+
+      setContext(ContextModule.Wallet, dynamicWallet);
+
+      updateWallet();
+
+      await setupUserContext(undefined);
+
+      setWalletConnecting(false);
+    }
+  });
+
   /*
    * When the user switches account in Metamask, re-initiate the wallet connect flow
    * so as to update their wallet details in the app's memory.