From 18552f3a225d1c46f0ff19c2b1c9cc44f84e33ac Mon Sep 17 00:00:00 2001
From: Kien Ngo <kienngo@skiff.com>
Date: Thu, 9 Nov 2023 17:09:47 -0500
Subject: [PATCH] [React Native] Option to hide [Switch to Personal Wallet]
 button (#1908)

Co-authored-by: ikethirdweb <jorge@thirdweb.com>
---
 .changeset/afraid-pillows-shout.md            |  5 +++
 .../src/evm/components/ConnectWallet.tsx      |  9 +++++
 .../ConnectWalletDetailsModal.tsx             |  4 ++
 .../SmartWalletAdditionalActions.tsx          | 37 +++++++++++--------
 .../WalletDetailsButton.tsx                   |  8 ++++
 5 files changed, 47 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/afraid-pillows-shout.md

diff --git a/.changeset/afraid-pillows-shout.md b/.changeset/afraid-pillows-shout.md
new file mode 100644
index 00000000000..3027e73c122
--- /dev/null
+++ b/.changeset/afraid-pillows-shout.md
@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react-native": patch
+---
+
+Add `hideSwitchToPersonalWallet` prop on `ConnectWallet` component to hide the "Switch to Personal wallet" option in the ConnectWallet modal which is shown when wallet is connected as a Smart Wallet
diff --git a/packages/react-native/src/evm/components/ConnectWallet.tsx b/packages/react-native/src/evm/components/ConnectWallet.tsx
index d41529c8c80..c25e36bb72a 100644
--- a/packages/react-native/src/evm/components/ConnectWallet.tsx
+++ b/packages/react-native/src/evm/components/ConnectWallet.tsx
@@ -69,6 +69,13 @@ export type ConnectWalletProps = {
    * ```
    */
   displayBalanceToken?: Record<number, string>;
+
+  /**
+   * Hide the "switch to Personal wallet" option in the wallet modal which is shown when wallet is connected to a Smart Wallet
+   *
+   * @default false
+   */
+  hideSwitchToPersonalWallet?: boolean;
 } & ConnectWalletButtonProps;
 
 export const ConnectWallet = ({
@@ -84,6 +91,7 @@ export const ConnectWallet = ({
   termsOfServiceUrl,
   privacyPolicyUrl,
   supportedTokens,
+  hideSwitchToPersonalWallet,
 }: ConnectWalletProps) => {
   const globalTheme = useGlobalTheme();
   const l = useLocale();
@@ -163,6 +171,7 @@ export const ConnectWallet = ({
               hideTestnetFaucet={hideTestnetFaucet}
               supportedTokens={supportedTokensMemo}
               displayBalanceToken={displayBalanceToken}
+              hideSwitchToPersonalWallet={hideSwitchToPersonalWallet}
             />
           )
         ) : (
diff --git a/packages/react-native/src/evm/components/ConnectWalletDetails/ConnectWalletDetailsModal.tsx b/packages/react-native/src/evm/components/ConnectWalletDetails/ConnectWalletDetailsModal.tsx
index f7d7d99241d..cdbe8c18465 100644
--- a/packages/react-native/src/evm/components/ConnectWalletDetails/ConnectWalletDetailsModal.tsx
+++ b/packages/react-native/src/evm/components/ConnectWalletDetails/ConnectWalletDetailsModal.tsx
@@ -42,6 +42,7 @@ export const ConnectWalletDetailsModal = ({
   hideTestnetFaucet,
   supportedTokens,
   displayBalanceToken,
+  hideSwitchToPersonalWallet,
 }: {
   isVisible: boolean;
   onClosePress: () => void;
@@ -50,6 +51,7 @@ export const ConnectWalletDetailsModal = ({
   hideTestnetFaucet?: boolean;
   supportedTokens: SupportedTokens;
   displayBalanceToken?: Record<number, string>;
+  hideSwitchToPersonalWallet?: boolean;
 }) => {
   const l = useLocale();
   const [isExportModalVisible, setIsExportModalVisible] = useState(false);
@@ -131,6 +133,7 @@ export const ConnectWalletDetailsModal = ({
       return (
         <SmartWalletAdditionalActions
           onExportPress={onExportLocalWalletPress}
+          hideSwitchToPersonalWallet={hideSwitchToPersonalWallet}
         />
       );
     }
@@ -208,6 +211,7 @@ export const ConnectWalletDetailsModal = ({
     onWalletImported,
     smartWallet,
     l,
+    hideSwitchToPersonalWallet,
   ]);
 
   return (
diff --git a/packages/react-native/src/evm/components/ConnectWalletDetails/SmartWalletAdditionalActions.tsx b/packages/react-native/src/evm/components/ConnectWalletDetails/SmartWalletAdditionalActions.tsx
index f8f0ae54972..832ea462513 100644
--- a/packages/react-native/src/evm/components/ConnectWalletDetails/SmartWalletAdditionalActions.tsx
+++ b/packages/react-native/src/evm/components/ConnectWalletDetails/SmartWalletAdditionalActions.tsx
@@ -18,8 +18,10 @@ import { useGlobalTheme, useLocale } from "../../providers/ui-context-provider";
 
 export const SmartWalletAdditionalActions = ({
   onExportPress,
+  hideSwitchToPersonalWallet,
 }: {
   onExportPress: () => void;
+  hideSwitchToPersonalWallet?: boolean;
 }) => {
   const l = useLocale();
   const { setConnectedWallet } = useWalletContext();
@@ -61,22 +63,25 @@ export const SmartWalletAdditionalActions = ({
 
   return (
     <>
-      <IconTextButton
-        mt="xs"
-        text={
-          showSmartWallet
-            ? l.smart_wallet.switch_to_smart
-            : l.smart_wallet.switch_to_personal
-        }
-        icon={
-          <DisconnectIcon
-            width={14}
-            height={14}
-            color={theme.colors.iconPrimary}
-          />
-        }
-        onPress={onWalletPress}
-      />
+      {(showSmartWallet || !hideSwitchToPersonalWallet) && (
+        <IconTextButton
+          mt="xs"
+          text={
+            showSmartWallet
+              ? l.smart_wallet.switch_to_smart
+              : l.smart_wallet.switch_to_personal
+          }
+          icon={
+            <DisconnectIcon
+              width={14}
+              height={14}
+              color={theme.colors.iconPrimary}
+            />
+          }
+          onPress={onWalletPress}
+        />
+      )}
+
       {!showSmartWallet && smartWallet?.enableConnectApp ? (
         <ConnectAppField />
       ) : null}
diff --git a/packages/react-native/src/evm/components/ConnectWalletDetails/WalletDetailsButton.tsx b/packages/react-native/src/evm/components/ConnectWalletDetails/WalletDetailsButton.tsx
index 905eae906c0..bb763205f45 100644
--- a/packages/react-native/src/evm/components/ConnectWalletDetails/WalletDetailsButton.tsx
+++ b/packages/react-native/src/evm/components/ConnectWalletDetails/WalletDetailsButton.tsx
@@ -36,6 +36,12 @@ export type ConnectWalletDetailsProps = {
    * ```
    */
   displayBalanceToken?: Record<number, string>;
+  /**
+   * Hide the "switch to Personal wallet" option in the dropdown which is shown when wallet is connected to a Smart Wallet
+   *
+   * @default false
+   */
+  hideSwitchToPersonalWallet?: boolean;
 };
 
 export const WalletDetailsButton = ({
@@ -45,6 +51,7 @@ export const WalletDetailsButton = ({
   hideTestnetFaucet,
   supportedTokens,
   displayBalanceToken,
+  hideSwitchToPersonalWallet,
 }: ConnectWalletDetailsProps) => {
   const l = useLocale();
   const activeWallet = useWallet();
@@ -76,6 +83,7 @@ export const WalletDetailsButton = ({
         hideTestnetFaucet={hideTestnetFaucet}
         supportedTokens={supportedTokens}
         displayBalanceToken={displayBalanceToken}
+        hideSwitchToPersonalWallet={hideSwitchToPersonalWallet}
       />
       {detailsButton ? (
         detailsButton({ onPress })