feat(walletconnect): better switch chain modal, add wallet name

src/components/masa-interface/pages/switch-chain/switch-chain.tsx

@@ -15,6 +15,7 @@ export const InterfaceSwitchChain = (): JSX.Element => {
     forceNetwork,
     switchNetworkNew,
     canProgramaticallySwitchNetwork,
+    walletName,
   } = useMasa();
   // const { chain } = useNetwork();
   // const { switchNetwork: switchNetworkWagmi } = useSwitchNetwork({
@@ -64,9 +65,16 @@ export const InterfaceSwitchChain = (): JSX.Element => {
         {!canProgramaticallySwitchNetwork && (
           <div className="dont-have-a-wallet">
             <p>
-              If you are connected using WalletConnect, please switch the
-              network in your app as for some apps, it may not be possible to
-              switch networks from the browser. Tottenham
+              <b>
+                It seems that your {walletName} wallet is not able to switch
+                networks programmatically.{' '}
+              </b>
+            </p>
+            <p>
+              This means that you have to manually switch networks in your
+              wallet. Please switch to the <b>{networkData?.chainName}</b> in
+              your wallet. This window will update automatically once you
+              switched networks.
             </p>
           </div>
         )}

src/provider/masa-context-provider.tsx

@@ -82,14 +82,19 @@ export const MasaContextProvider = ({
   const { walletAddress, isWalletLoading, hasWalletAddress, reloadWallet } =
     useWallet(masaInstance, signer);
 
-  const { isConnected, isDisconnected, hasAccountAddress, accountAddress } =
-    useAccountState({
-      masa: masaInstance,
-      walletAddress,
-      signer,
-      hasWalletAddress,
-      reloadWallet,
-    });
+  const {
+    isConnected,
+    isDisconnected,
+    hasAccountAddress,
+    accountAddress,
+    walletName,
+  } = useAccountState({
+    masa: masaInstance,
+    walletAddress,
+    signer,
+    hasWalletAddress,
+    reloadWallet,
+  });
 
   // session
   const { isLoggedIn, handleLogin, handleLogout, isSessionLoading } =
@@ -389,6 +394,7 @@ export const MasaContextProvider = ({
       isConnected,
       isDisconnected,
       canProgramaticallySwitchNetwork,
+      walletName,
     };
     return masaShape;
   }, [
@@ -487,6 +493,7 @@ export const MasaContextProvider = ({
     isConnected,
     isDisconnected,
     canProgramaticallySwitchNetwork,
+    walletName,
   ]);
 
   return (

src/provider/masa-shape.ts

@@ -123,7 +123,7 @@ export interface MasaShape {
   handleAddSBT?: (isCollection: boolean, name: string, address: string) => void;
   refetchContracts?: () => void;
   isLoadingCustomSBTs?: boolean;
-
+  walletName?: string | undefined;
   // rainbowkit
   useRainbowKit?: boolean;
   openConnectModal?: (() => void) | undefined;
@@ -137,6 +137,7 @@ export interface MasaShape {
   switchNetworkNew?: (forcedNetworkParam: NetworkName) => void;
   currentNetworkNew?: GetNetworkResult;
   canProgramaticallySwitchNetwork?: boolean;
+
   isConnected?: boolean;
   isDisconnected?: boolean;
   // new-modal

src/provider/use-account-state.ts

@@ -56,6 +56,8 @@ export const useAccountState = ({
     address: wagmiAddress,
   } = useAccount();
 
+  const walletName = useMemo(() => activeConnector?.name, [activeConnector]);
+
   const provider = useProvider();
 
   const { isLoggingOut, hasLoggedOut } = useLogout({
@@ -202,5 +204,6 @@ export const useAccountState = ({
     hasWalletAddress,
     hasAccountAddress,
     walletAddress,
+    walletName,
   };
 };

src/styles.scss

@@ -321,12 +321,14 @@
 
   .dont-have-a-wallet {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: center;
 
     text-align: center;
     p {
       font-size: 16px;
+      padding: 8px;
+      margin: 0;
     }
   }
   .masa-input-container {