diff --git a/.changeset/large-snails-unite.md b/.changeset/large-snails-unite.md new file mode 100644 index 00000000000..469cb464835 --- /dev/null +++ b/.changeset/large-snails-unite.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Fix linking wallets for ecosystems 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 0b9ada84d7f..c7d905d4c6d 100644 --- a/packages/thirdweb/src/react/web/wallets/in-app/WalletAuth.tsx +++ b/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(); const [showAll, setShowAll] = useState(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; diff --git a/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx b/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx index 1b2e5ad6bdf..38875de57d9 100644 --- a/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx +++ b/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 = (() => { diff --git a/packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx b/packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx index 34f399d898e..88552eb7128 100644 --- a/packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx +++ b/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("idle"); const [error, setError] = useState(); const [accountStatus, setAccountStatus] = useState("sending"); - const isEcosystem = useMemo(() => isEcosystemWallet(wallet.id), [wallet.id]); + const ecosystem = isEcosystemWallet(wallet) + ? { + id: wallet.id, + partnerId: wallet.getConfig()?.partnerId, + } + : undefined; const [screen] = useState("base"); @@ -66,13 +70,7 @@ export function OTPLoginUI(props: { try { if ("email" in userInfo) { await preAuthenticate({ - ecosystem: isEcosystem - ? { - id: wallet.id as EcosystemWalletId, - partnerId: (wallet as Wallet).getConfig() - ?.partnerId, - } - : undefined, + ecosystem, email: userInfo.email, strategy: "email", client: props.client, @@ -80,13 +78,7 @@ export function OTPLoginUI(props: { setAccountStatus("sent"); } else if ("phone" in userInfo) { await preAuthenticate({ - ecosystem: isEcosystem - ? { - id: wallet.id as EcosystemWalletId, - partnerId: (wallet as Wallet).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,6 +125,7 @@ export function OTPLoginUI(props: { strategy: "email", email: userInfo.email, verificationCode: otp, + ecosystem, }); } else if ("phone" in userInfo) { await linkProfile({ @@ -140,6 +133,7 @@ export function OTPLoginUI(props: { strategy: "phone", phoneNumber: userInfo.phone, verificationCode: otp, + ecosystem, }); } } diff --git a/packages/thirdweb/src/react/web/wallets/shared/PassKeyLogin.tsx b/packages/thirdweb/src/react/web/wallets/shared/PassKeyLogin.tsx index fbd108635b4..4b732d73eec 100644 --- a/packages/thirdweb/src/react/web/wallets/shared/PassKeyLogin.tsx +++ b/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(); 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({ diff --git a/packages/thirdweb/src/react/web/wallets/shared/SocialLogin.tsx b/packages/thirdweb/src/react/web/wallets/shared/SocialLogin.tsx index 7c85afa8150..b3eac7452fa 100644 --- a/packages/thirdweb/src/react/web/wallets/shared/SocialLogin.tsx +++ b/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(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;