feat: enable wallet linking and guest mode for ecosystem wallets (#4740)

Author: joaquim-verges

.changeset/cuddly-parrots-laugh.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Enable wallet linking and guest mode for ecosystem wallets

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>

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}
         />

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={() => {}}

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";