From 20487c83e9195ba3e4b9b9519368eabd37dc6ea1 Mon Sep 17 00:00:00 2001
From: simodrws <siamend@keyko.io>
Date: Thu, 25 May 2023 13:22:19 +0200
Subject: [PATCH] feat(walletconnect): better switch chain modal, add wallet
 name

---
 .../pages/switch-chain/switch-chain.tsx       | 14 ++++++++---
 src/provider/masa-context-provider.tsx        | 23 ++++++++++++-------
 src/provider/masa-shape.ts                    |  3 ++-
 src/provider/use-account-state.ts             |  3 +++
 src/styles.scss                               |  4 +++-
 5 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/src/components/masa-interface/pages/switch-chain/switch-chain.tsx b/src/components/masa-interface/pages/switch-chain/switch-chain.tsx
index ccb6eeb2..13c25d98 100644
--- a/src/components/masa-interface/pages/switch-chain/switch-chain.tsx
+++ b/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>
         )}
diff --git a/src/provider/masa-context-provider.tsx b/src/provider/masa-context-provider.tsx
index 0f61e728..cfc5bba9 100644
--- a/src/provider/masa-context-provider.tsx
+++ b/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 (
diff --git a/src/provider/masa-shape.ts b/src/provider/masa-shape.ts
index 77eb8550..c69f6902 100644
--- a/src/provider/masa-shape.ts
+++ b/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
diff --git a/src/provider/use-account-state.ts b/src/provider/use-account-state.ts
index f77ebd6f..797bccf8 100644
--- a/src/provider/use-account-state.ts
+++ b/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,
   };
 };
diff --git a/src/styles.scss b/src/styles.scss
index 2eb320c6..9fb33bbe 100644
--- a/src/styles.scss
+++ b/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 {