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

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