From 915442e1c4e769b56187311420c7e762325c4872 Mon Sep 17 00:00:00 2001
From: Joaquim Verges <joaquim.verges@gmail.com>
Date: Sat, 21 Sep 2024 22:31:25 +1200
Subject: [PATCH] feat: enable wallet linking and guest mode for ecosystem
 wallets (#4740)

---
 .changeset/cuddly-parrots-laugh.md            |  5 +++
 .../Modal/AnyWalletConnectUI.tsx              |  1 +
 .../screens/LinkProfileScreen.tsx             |  1 +
 .../ecosystem/EcosystemWalletConnectUI.tsx    | 34 +++++++++++++++++++
 .../react/web/wallets/in-app/WalletAuth.tsx   |  3 +-
 5 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/cuddly-parrots-laugh.md

diff --git a/.changeset/cuddly-parrots-laugh.md b/.changeset/cuddly-parrots-laugh.md
new file mode 100644
index 00000000000..96be5d34336
--- /dev/null
+++ b/.changeset/cuddly-parrots-laugh.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Enable wallet linking and guest mode for ecosystem wallets
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AnyWalletConnectUI.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AnyWalletConnectUI.tsx
index 1b65506b6f3..46263420d3e 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AnyWalletConnectUI.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AnyWalletConnectUI.tsx
@@ -287,6 +287,7 @@ export function AnyWalletConnectUI(props: {
           client={props.client}
           size={props.size}
           meta={props.meta}
+          walletConnect={props.walletConnect}
           connectLocale={props.connectLocale}
         />
       </Suspense>
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkProfileScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkProfileScreen.tsx
index a36c92b2411..77cabb6b875 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkProfileScreen.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkProfileScreen.tsx
@@ -78,6 +78,7 @@ export function LinkProfileScreen(props: {
             title: props.locale.manageWallet.linkProfile,
             showThirdwebBranding: false,
           }}
+          walletConnect={props.walletConnect}
           isLinking={true}
           goBack={props.onBack}
         />
diff --git a/packages/thirdweb/src/react/web/wallets/ecosystem/EcosystemWalletConnectUI.tsx b/packages/thirdweb/src/react/web/wallets/ecosystem/EcosystemWalletConnectUI.tsx
index 4b608342a3d..0baf6c852b5 100644
--- a/packages/thirdweb/src/react/web/wallets/ecosystem/EcosystemWalletConnectUI.tsx
+++ b/packages/thirdweb/src/react/web/wallets/ecosystem/EcosystemWalletConnectUI.tsx
@@ -8,8 +8,10 @@ import {
   useSetSelectionData,
 } from "../../providers/wallet-ui-states-provider.js";
 import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
+import { WalletAuth } from "../in-app/WalletAuth.js";
 import { useInAppWalletLocale } from "../in-app/useInAppWalletLocale.js";
 import type { ConnectWalletSelectUIState } from "../shared/ConnectWalletSocialOptions.js";
+import { GuestLogin } from "../shared/GuestLogin.js";
 import { LoadingScreen } from "../shared/LoadingScreen.js";
 import { OTPLoginUI } from "../shared/OTPLoginUI.js";
 import { PassKeyLogin } from "../shared/PassKeyLogin.js";
@@ -35,6 +37,7 @@ function EcosystemWalletConnectUI(props: {
     termsOfServiceUrl?: string;
     privacyPolicyUrl?: string;
   };
+  walletConnect: { projectId?: string } | undefined;
   isLinking?: boolean;
 }) {
   const data = useSelectionData();
@@ -114,6 +117,37 @@ function EcosystemWalletConnectUI(props: {
     );
   }
 
+  if (state?.walletLogin) {
+    return (
+      <WalletAuth
+        meta={props.meta}
+        inAppLocale={locale}
+        walletConnect={props.walletConnect}
+        wallet={props.wallet}
+        client={props.client}
+        size={props.size}
+        done={done}
+        onBack={goBackToMain || (() => setSelectionData({}))}
+        locale={props.connectLocale}
+      />
+    );
+  }
+
+  if (state?.guestLogin) {
+    return (
+      <GuestLogin
+        locale={locale}
+        done={done}
+        goBack={goBackToMain}
+        wallet={props.wallet}
+        state={state}
+        client={props.client}
+        size={props.size}
+        connectLocale={props.connectLocale}
+      />
+    );
+  }
+
   return (
     <EcosystemWalletFormUIScreen
       select={() => {}}
diff --git a/packages/thirdweb/src/react/web/wallets/in-app/WalletAuth.tsx b/packages/thirdweb/src/react/web/wallets/in-app/WalletAuth.tsx
index 2e916929680..8101d7c6af4 100644
--- a/packages/thirdweb/src/react/web/wallets/in-app/WalletAuth.tsx
+++ b/packages/thirdweb/src/react/web/wallets/in-app/WalletAuth.tsx
@@ -3,6 +3,7 @@ import { defineChain } from "../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { linkProfile } from "../../../../wallets/in-app/core/wallet/profiles.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import type { EcosystemWalletId } from "../../../../wallets/wallet-types.js";
 import { iconSize } from "../../../core/design-system/index.js";
 import { useAddConnectedWallet } from "../../../core/hooks/wallets/useAddConnectedWallet.js";
 import AllWalletsUI from "../../ui/ConnectWallet/Modal/AllWalletsUI.js";
@@ -18,7 +19,7 @@ import { LoadingState } from "../shared/LoadingState.js";
 import type { InAppWalletLocale } from "../shared/locale/types.js";
 
 export function WalletAuth(props: {
-  wallet: Wallet<"inApp">;
+  wallet: Wallet<"inApp" | EcosystemWalletId>;
   client: ThirdwebClient;
   done: () => void;
   size: "compact" | "wide";