fix: improve wallet linking for ecosystems

Author: joaquim-verges

.changeset/large-snails-unite.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix linking wallets for ecosystems

packages/thirdweb/src/react/web/wallets/in-app/WalletAuth.tsx

@@ -1,6 +1,7 @@
 import { Suspense, useRef, useState } from "react";
 import { defineChain } from "../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
+import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import { linkProfile } from "../../../../wallets/in-app/web/lib/auth/index.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { EcosystemWalletId } from "../../../../wallets/wallet-types.js";
@@ -43,6 +44,12 @@ export function WalletAuth(props: {
   );
   const [error, setError] = useState<string | undefined>();
   const [showAll, setShowAll] = useState<boolean>(false);
+  const ecosystem = isEcosystemWallet(wallet)
+    ? {
+        id: wallet.id,
+        partnerId: wallet.getConfig()?.partnerId,
+      }
+    : undefined;
 
   const back = () => {
     setStatus("selecting");
@@ -59,6 +66,7 @@ export function WalletAuth(props: {
         strategy: "wallet",
         wallet: walletToLink,
         chain: wallet.getChain() || defineChain(1),
+        ecosystem,
       }).catch((e) => {
         setError(e.message);
         throw e;

packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -262,6 +262,7 @@ export const ConnectWalletSocialOptions = (
         closeOpenedWindow: (openedWindow: Window) => {
           openedWindow.close();
         },
+        ecosystem: ecosystemInfo,
       };
 
       const connectPromise = (() => {

packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
@@ -9,7 +9,6 @@ import {
   preAuthenticate,
 } from "../../../../wallets/in-app/web/lib/auth/index.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
-import type { EcosystemWalletId } from "../../../../wallets/wallet-types.js";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import { fontSize } from "../../../core/design-system/index.js";
 import { setLastAuthProvider } from "../../../core/utils/storage.js";
@@ -54,7 +53,12 @@ export function OTPLoginUI(props: {
   const [verifyStatus, setVerifyStatus] = useState<VerificationStatus>("idle");
   const [error, setError] = useState<string | undefined>();
   const [accountStatus, setAccountStatus] = useState<AccountStatus>("sending");
-  const isEcosystem = useMemo(() => isEcosystemWallet(wallet.id), [wallet.id]);
+  const ecosystem = isEcosystemWallet(wallet)
+    ? {
+        id: wallet.id,
+        partnerId: wallet.getConfig()?.partnerId,
+      }
+    : undefined;
 
   const [screen] = useState<ScreenToShow>("base");
 
@@ -66,27 +70,15 @@ export function OTPLoginUI(props: {
     try {
       if ("email" in userInfo) {
         await preAuthenticate({
-          ecosystem: isEcosystem
-            ? {
-                id: wallet.id as EcosystemWalletId,
-                partnerId: (wallet as Wallet<EcosystemWalletId>).getConfig()
-                  ?.partnerId,
-              }
-            : undefined,
+          ecosystem,
           email: userInfo.email,
           strategy: "email",
           client: props.client,
         });
         setAccountStatus("sent");
       } else if ("phone" in userInfo) {
         await preAuthenticate({
-          ecosystem: isEcosystem
-            ? {
-                id: wallet.id as EcosystemWalletId,
-                partnerId: (wallet as Wallet<EcosystemWalletId>).getConfig()
-                  ?.partnerId,
-              }
-            : undefined,
+          ecosystem,
           phoneNumber: userInfo.phone,
           strategy: "phone",
           client: props.client,
@@ -100,7 +92,7 @@ export function OTPLoginUI(props: {
       setVerifyStatus("idle");
       setAccountStatus("error");
     }
-  }, [props.client, userInfo, wallet, isEcosystem]);
+  }, [props.client, userInfo, ecosystem]);
 
   async function connect(otp: string) {
     if ("email" in userInfo) {
@@ -133,13 +125,15 @@ export function OTPLoginUI(props: {
         strategy: "email",
         email: userInfo.email,
         verificationCode: otp,
+        ecosystem,
       });
     } else if ("phone" in userInfo) {
       await linkProfile({
         client: props.client,
         strategy: "phone",
         phoneNumber: userInfo.phone,
         verificationCode: otp,
+        ecosystem,
       });
     }
   }

packages/thirdweb/src/react/web/wallets/shared/PassKeyLogin.tsx

@@ -211,6 +211,12 @@ function SignupScreen(props: {
   const { wallet, done, client, chain } = props;
   const [error, setError] = useState<string | undefined>();
   const [status, setStatus] = useState<"loading" | "error">("loading");
+  const ecosystem = isEcosystemWallet(wallet)
+    ? {
+        id: wallet.id,
+        partnerId: wallet.getConfig()?.partnerId,
+      }
+    : undefined;
 
   async function signup() {
     setStatus("loading");
@@ -220,6 +226,7 @@ function SignupScreen(props: {
           client,
           strategy: "passkey",
           type: "sign-up",
+          ecosystem,
         });
       } else {
         await wallet.connect({

packages/thirdweb/src/react/web/wallets/shared/SocialLogin.tsx

@@ -39,6 +39,12 @@ export function SocialLogin(props: {
   const ewLocale = props.locale;
   const locale = ewLocale.socialLoginScreen;
   const themeObj = useCustomTheme();
+  const ecosystem = isEcosystemWallet(props.wallet)
+    ? {
+        id: props.wallet.id,
+        partnerId: props.wallet.getConfig()?.partnerId,
+      }
+    : undefined;
 
   const [authError, setAuthError] = useState<string | undefined>(undefined);
   const { done, wallet } = props;
@@ -62,12 +68,7 @@ export function SocialLogin(props: {
       return loginWithOauthRedirect({
         authOption: props.socialAuth,
         client: props.client,
-        ecosystem: isEcosystemWallet(wallet)
-          ? {
-              id: wallet.id,
-              partnerId: wallet.getConfig()?.partnerId,
-            }
-          : undefined,
+        ecosystem,
         redirectUrl: walletConfig?.auth?.redirectUrl,
         mode: walletConfig?.auth?.mode,
       });
@@ -78,12 +79,7 @@ export function SocialLogin(props: {
         authOption: props.socialAuth,
         themeObj,
         client: props.client,
-        ecosystem: isEcosystemWallet(wallet)
-          ? {
-              id: wallet.id,
-              partnerId: wallet.getConfig()?.partnerId,
-            }
-          : undefined,
+        ecosystem,
       });
 
       if (!socialWindow) {
@@ -99,6 +95,7 @@ export function SocialLogin(props: {
           closeOpenedWindow: (openedWindow) => {
             openedWindow.close();
           },
+          ecosystem,
         }).catch((e) => {
           setAuthError(e.message);
           throw e;