thirdweb 5.44.2-nightly-7c2f616dfe6880beefa4eb48f8dcbce6bba9461a-20240808000401 → 5.45.0

package/src/react/web/ui/components/TokenIcon.tsx

@@ -5,7 +5,7 @@ import type { ThirdwebClient } from "../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
 import { iconSize } from "../../../core/design-system/index.js";
 import { useChainIconUrl } from "../../../core/hooks/others/useChainQuery.js";
-import { genericTokenIcon } from "../../../core/utils/socialIcons.js";
+import { genericTokenIcon } from "../../../core/utils/walletIcon.js";
 import {
   type NativeToken,
   isNativeToken,

package/src/react/web/ui/components/WalletImage.tsx

@@ -8,20 +8,12 @@ import { getStoredActiveWalletId } from "../../../../wallets/manager/index.js";
 import type { WalletId } from "../../../../wallets/wallet-types.js";
 import { radius } from "../../../core/design-system/index.js";
 import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
-import {
-  appleIconUri,
-  discordIconUri,
-  emailIcon,
-  facebookIconUri,
-  farcasterIconUri,
-  genericWalletIcon,
-  googleIconUri,
-  passkeyIcon,
-  phoneIcon,
-  telegramIconUri,
-} from "../../../core/utils/socialIcons.js";
 import { getLastAuthProvider } from "../../../core/utils/storage.js";
 import { useWalletImage } from "../../../core/utils/wallet.js";
+import {
+  genericWalletIcon,
+  getWalletIcon,
+} from "../../../core/utils/walletIcon.js";
 import { Img } from "./Img.js";
 
 /**
@@ -57,35 +49,9 @@ export function WalletImage(props: {
       ) {
         // when showing an active wallet icon - check last auth provider and override the IAW icon
         const lastAuthProvider = await getLastAuthProvider(storage);
-        switch (lastAuthProvider) {
-          case "google":
-            image = googleIconUri;
-            break;
-          case "apple":
-            image = appleIconUri;
-            break;
-          case "facebook":
-            image = facebookIconUri;
-            break;
-          case "phone":
-            image = phoneIcon;
-            break;
-          case "email":
-            image = emailIcon;
-            break;
-          case "passkey":
-            image = passkeyIcon;
-            break;
-          case "discord":
-            image = discordIconUri;
-            break;
-          case "farcaster":
-            image = farcasterIconUri;
-            break;
-          case "telegram":
-            image = telegramIconUri;
-            break;
-        }
+        image = lastAuthProvider
+          ? getWalletIcon(lastAuthProvider)
+          : genericWalletIcon;
       } else {
         const mipdImage = getInstalledWalletProviders().find(
           (x) => x.info.rdns === activeEOAId,

package/src/react/web/wallets/ecosystem/EcosystemWalletConnectUI.tsx

@@ -35,6 +35,7 @@ function EcosystemWalletConnectUI(props: {
     termsOfServiceUrl?: string;
     privacyPolicyUrl?: string;
   };
+  isLinking?: boolean;
 }) {
   const data = useSelectionData();
   const setSelectionData = useSetSelectionData();
@@ -53,6 +54,11 @@ function EcosystemWalletConnectUI(props: {
           setSelectionData({});
         };
 
+  const done = () => {
+    props.done();
+    setSelectionData({});
+  };
+
   const otpUserInfo = state?.emailLogin
     ? { email: state.emailLogin }
     : state?.phoneLogin
@@ -64,12 +70,13 @@ function EcosystemWalletConnectUI(props: {
       <OTPLoginUI
         userInfo={otpUserInfo}
         locale={locale}
-        done={props.done}
+        done={done}
         goBack={goBackToMain}
         wallet={props.wallet}
         chain={props.chain}
         client={props.client}
         size={props.size}
+        isLinking={props.isLinking}
       />
     );
   }
@@ -77,12 +84,14 @@ function EcosystemWalletConnectUI(props: {
   if (state?.passkeyLogin) {
     return (
       <PassKeyLogin
+        locale={props.connectLocale}
         wallet={props.wallet}
-        done={props.done}
+        done={done}
         onBack={goBackToMain}
         chain={props.chain}
         client={props.client}
         size={props.size}
+        isLinking={props.isLinking}
       />
     );
   }
@@ -92,13 +101,15 @@ function EcosystemWalletConnectUI(props: {
       <SocialLogin
         socialAuth={state.socialLogin.type}
         locale={locale}
-        done={props.done}
+        done={done}
         goBack={goBackToMain}
         wallet={props.wallet}
         state={state}
         chain={props.chain}
         client={props.client}
         size={props.size}
+        connectLocale={props.connectLocale}
+        isLinking={props.isLinking}
       />
     );
   }
@@ -107,7 +118,7 @@ function EcosystemWalletConnectUI(props: {
     <EcosystemWalletFormUIScreen
       select={() => {}}
       locale={locale}
-      done={props.done}
+      done={done}
       goBack={props.goBack}
       wallet={props.wallet}
       chain={props.chain}
@@ -115,6 +126,7 @@ function EcosystemWalletConnectUI(props: {
       size={props.size}
       connectLocale={props.connectLocale}
       meta={props.meta}
+      isLinking={props.isLinking}
     />
   );
 }

package/src/react/web/wallets/ecosystem/EcosystemWalletFormUI.tsx

@@ -8,7 +8,7 @@ import { useScreenContext } from "../../ui/ConnectWallet/Modal/screen.js";
 import { PoweredByThirdweb } from "../../ui/ConnectWallet/PoweredByTW.js";
 import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
 import { Spacer } from "../../ui/components/Spacer.js";
-import { Container } from "../../ui/components/basic.js";
+import { Container, ModalHeader } from "../../ui/components/basic.js";
 import { ConnectWalletSocialOptions } from "../shared/ConnectWalletSocialOptions.js";
 import type { InAppWalletLocale } from "../shared/locale/types.js";
 import { EcosystemWalletHeader } from "./EcosystemWalletHeader.js";
@@ -30,6 +30,7 @@ export type EcosystemWalletFormUIProps = {
   client: ThirdwebClient;
   chain: Chain | undefined;
   connectLocale: ConnectLocale;
+  isLinking?: boolean;
 };
 
 /**
@@ -54,11 +55,18 @@ export function EcosystemWalletFormUIScreen(props: EcosystemWalletFormUIProps) {
         minHeight: "250px",
       }}
     >
-      <EcosystemWalletHeader
-        client={props.client}
-        onBack={isCompact ? onBack : undefined}
-        wallet={props.wallet}
-      />
+      {props.isLinking ? (
+        <ModalHeader
+          title={props.connectLocale.manageWallet.linkProfile}
+          onBack={onBack}
+        />
+      ) : (
+        <EcosystemWalletHeader
+          client={props.client}
+          onBack={isCompact ? onBack : undefined}
+          wallet={props.wallet}
+        />
+      )}
       <Spacer y="lg" />
 
       <Container

package/src/react/web/wallets/in-app/InAppWalletConnectUI.tsx

@@ -25,7 +25,7 @@ function InAppWalletConnectUI(props: {
   done: () => void;
   goBack?: () => void;
   size: "compact" | "wide";
-  meta: {
+  meta?: {
     title?: string;
     titleIconUrl?: string;
     showThirdwebBranding?: boolean;
@@ -35,6 +35,7 @@ function InAppWalletConnectUI(props: {
   client: ThirdwebClient;
   chain: Chain | undefined;
   connectLocale: ConnectLocale;
+  isLinking?: boolean;
 }) {
   const data = useSelectionData();
   const setSelectionData = useSetSelectionData();
@@ -56,6 +57,11 @@ function InAppWalletConnectUI(props: {
         }
       : props.goBack;
 
+  const done = () => {
+    props.done();
+    setSelectionData({});
+  };
+
   const otpUserInfo = state?.emailLogin
     ? { email: state.emailLogin }
     : state?.phoneLogin
@@ -67,12 +73,13 @@ function InAppWalletConnectUI(props: {
       <OTPLoginUI
         userInfo={otpUserInfo}
         locale={locale}
-        done={props.done}
+        done={done}
         goBack={goBackToMain}
         wallet={props.wallet}
         chain={props.chain}
         client={props.client}
         size={props.size}
+        isLinking={props.isLinking}
       />
     );
   }
@@ -80,12 +87,14 @@ function InAppWalletConnectUI(props: {
   if (state?.passkeyLogin) {
     return (
       <PassKeyLogin
+        locale={props.connectLocale}
         wallet={props.wallet}
-        done={props.done}
+        done={done}
         onBack={goBackToMain}
         chain={props.chain}
         client={props.client}
         size={props.size}
+        isLinking={props.isLinking}
       />
     );
   }
@@ -95,13 +104,15 @@ function InAppWalletConnectUI(props: {
       <SocialLogin
         socialAuth={state.socialLogin.type}
         locale={locale}
-        done={props.done}
+        done={done}
         goBack={goBackToMain}
         wallet={props.wallet}
         state={state}
         chain={props.chain}
         client={props.client}
         size={props.size}
+        connectLocale={props.connectLocale}
+        isLinking={props.isLinking}
       />
     );
   }
@@ -111,13 +122,14 @@ function InAppWalletConnectUI(props: {
       select={() => {}}
       connectLocale={props.connectLocale}
       inAppWalletLocale={locale}
-      done={props.done}
+      done={done}
       goBack={props.goBack}
       wallet={props.wallet}
       client={props.client}
       meta={props.meta}
       size={props.size}
       chain={props.chain}
+      isLinking={props.isLinking}
     />
   );
 }

package/src/react/web/wallets/in-app/InAppWalletFormUI.tsx

@@ -22,7 +22,7 @@ export type InAppWalletFormUIProps = {
   wallet: Wallet<"inApp">;
   goBack?: () => void;
   size: "compact" | "wide";
-  meta: {
+  meta?: {
     title?: string;
     titleIconUrl?: string;
     showThirdwebBranding?: boolean;
@@ -31,6 +31,7 @@ export type InAppWalletFormUIProps = {
   };
   client: ThirdwebClient;
   chain: Chain | undefined;
+  isLinking?: boolean;
 };
 
 /**
@@ -43,7 +44,7 @@ export function InAppWalletFormUIScreen(props: InAppWalletFormUIProps) {
   const isInitialScreen =
     screen === props.wallet && initialScreen === props.wallet;
 
-  const onBack = isInitialScreen ? undefined : props.goBack;
+  const onBack = isInitialScreen && !props.isLinking ? undefined : props.goBack;
 
   return (
     <Container
@@ -60,19 +61,19 @@ export function InAppWalletFormUIScreen(props: InAppWalletFormUIProps) {
           <>
             <ModalHeader
               onBack={onBack}
-              leftAligned={true}
+              leftAligned={!props.isLinking}
               title={
                 <>
-                  {!props.meta.titleIconUrl ? null : (
+                  {!props.meta?.titleIconUrl ? null : (
                     <Img
-                      src={props.meta.titleIconUrl}
+                      src={props.meta?.titleIconUrl}
                       width={iconSize.md}
                       height={iconSize.md}
                       client={props.client}
                     />
                   )}
                   <ModalTitle>
-                    {props.meta.title ??
+                    {props.meta?.title ??
                       props.inAppWalletLocale.emailLoginScreen.title}
                   </ModalTitle>
                 </>
@@ -97,18 +98,18 @@ export function InAppWalletFormUIScreen(props: InAppWalletFormUIProps) {
       </Container>
 
       {isCompact &&
-        (props.meta.showThirdwebBranding !== false ||
-          props.meta.termsOfServiceUrl ||
-          props.meta.privacyPolicyUrl) && <Spacer y="xl" />}
+        (props.meta?.showThirdwebBranding !== false ||
+          props.meta?.termsOfServiceUrl ||
+          props.meta?.privacyPolicyUrl) && <Spacer y="xl" />}
 
       <Container flex="column" gap="lg">
         <TOS
-          termsOfServiceUrl={props.meta.termsOfServiceUrl}
-          privacyPolicyUrl={props.meta.privacyPolicyUrl}
+          termsOfServiceUrl={props.meta?.termsOfServiceUrl}
+          privacyPolicyUrl={props.meta?.privacyPolicyUrl}
           locale={props.connectLocale.agreement}
         />
 
-        {props.meta.showThirdwebBranding !== false && <PoweredByThirdweb />}
+        {props.meta?.showThirdwebBranding !== false && <PoweredByThirdweb />}
       </Container>
     </Container>
   );

package/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -7,6 +7,8 @@ import type { ThirdwebClient } from "../../../../client/client.js";
 import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import { getEcosystemWalletAuthOptions } from "../../../../wallets/ecosystem/get-ecosystem-wallet-auth-options.js";
 import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
+import type { Profile } from "../../../../wallets/in-app/core/authentication/types.js";
+import { linkProfile } from "../../../../wallets/in-app/core/wallet/profiles.js";
 import { loginWithOauthRedirect } from "../../../../wallets/in-app/web/lib/auth/oauth.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import {
@@ -21,13 +23,13 @@ import {
   iconSize,
   spacing,
 } from "../../../core/design-system/index.js";
+import { setLastAuthProvider } from "../../../core/utils/storage.js";
 import {
   emailIcon,
   passkeyIcon,
   phoneIcon,
   socialIcons,
-} from "../../../core/utils/socialIcons.js";
-import { setLastAuthProvider } from "../../../core/utils/storage.js";
+} from "../../../core/utils/walletIcon.js";
 import { useSetSelectionData } from "../../providers/wallet-ui-states-provider.js";
 import { WalletTypeRowButton } from "../../ui/ConnectWallet/WalletTypeRowButton.js";
 import { Img } from "../../ui/components/Img.js";
@@ -47,7 +49,7 @@ export type ConnectWalletSelectUIState =
       phoneLogin?: string;
       socialLogin?: {
         type: SocialAuthOption;
-        connectionPromise: Promise<Account>;
+        connectionPromise: Promise<Account | Profile[]>;
       };
       passkeyLogin?: boolean;
     };
@@ -70,6 +72,7 @@ export type ConnectWalletSocialOptionsProps = {
   chain: Chain | undefined;
   client: ThirdwebClient;
   size: "compact" | "wide";
+  isLinking?: boolean;
 };
 
 /**
@@ -171,7 +174,8 @@ export const ConnectWalletSocialOptions = (
     if (
       walletConfig &&
       "auth" in walletConfig &&
-      walletConfig?.auth?.mode === "redirect"
+      walletConfig?.auth?.mode === "redirect" &&
+      !props.isLinking // We do not support redirects for linking
     ) {
       return loginWithOauthRedirect({
         authOption: strategy,
@@ -200,17 +204,18 @@ export const ConnectWalletSocialOptions = (
         },
       };
 
-      const connectPromise = isEcosystemWallet(wallet)
-        ? wallet.connect({
-            ...connectOptions,
-            ecosystem: {
-              id: wallet.id,
-              partnerId: wallet.getConfig()?.partnerId,
-            },
-          })
-        : wallet.connect(connectOptions);
-
-      await setLastAuthProvider(strategy, webLocalStorage);
+      const connectPromise = (() => {
+        if (props.isLinking) {
+          if (wallet.id !== "inApp") {
+            throw new Error("Only in-app wallets support multi-auth");
+          }
+          return linkProfile(wallet, connectOptions);
+        } else {
+          const connectPromise = wallet.connect(connectOptions);
+          setLastAuthProvider(strategy, webLocalStorage);
+          return connectPromise;
+        }
+      })();
 
       setData({
         socialLogin: {

package/src/react/web/wallets/shared/OTPLoginUI.tsx

@@ -4,7 +4,7 @@ import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
-import type { SendEmailOtpReturnType } from "../../../../wallets/in-app/core/authentication/type.js";
+import { linkProfile } from "../../../../wallets/in-app/core/wallet/profiles.js";
 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";
@@ -24,10 +24,11 @@ import type { InAppWalletLocale } from "./locale/types.js";
 type VerificationStatus =
   | "verifying"
   | "invalid"
+  | "linking_error"
   | "valid"
   | "idle"
   | "payment_required";
-type AccountStatus = "sending" | SendEmailOtpReturnType | "error";
+type AccountStatus = "sending" | "sent" | "error";
 type ScreenToShow = "base" | "enter-password-or-recovery-code";
 
 /**
@@ -42,12 +43,14 @@ export function OTPLoginUI(props: {
   client: ThirdwebClient;
   chain: Chain | undefined;
   size: "compact" | "wide";
+  isLinking?: boolean;
 }) {
   const { wallet, done, goBack, userInfo } = props;
   const isWideModal = props.size === "wide";
   const locale = props.locale;
   const [otpInput, setOtpInput] = useState("");
   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]);
 
@@ -60,7 +63,7 @@ export function OTPLoginUI(props: {
 
     try {
       if ("email" in userInfo) {
-        const status = await preAuthenticate({
+        await preAuthenticate({
           ecosystem: isEcosystem
             ? {
                 id: wallet.id as EcosystemWalletId,
@@ -72,9 +75,9 @@ export function OTPLoginUI(props: {
           strategy: "email",
           client: props.client,
         });
-        setAccountStatus(status);
+        setAccountStatus("sent");
       } else if ("phone" in userInfo) {
-        const status = await preAuthenticate({
+        await preAuthenticate({
           ecosystem: isEcosystem
             ? {
                 id: wallet.id as EcosystemWalletId,
@@ -86,7 +89,7 @@ export function OTPLoginUI(props: {
           strategy: "phone",
           client: props.client,
         });
-        setAccountStatus(status);
+        setAccountStatus("sent");
       } else {
         throw new Error("Invalid userInfo");
       }
@@ -121,69 +124,52 @@ export function OTPLoginUI(props: {
     }
   }
 
-  const verify = async (otp: string) => {
-    if (typeof accountStatus !== "object" || otp.length !== 6) {
-      return;
-    }
-
-    setVerifyStatus("idle");
-
-    if (typeof accountStatus !== "object") {
-      return;
+  async function link(otp: string) {
+    if ("email" in userInfo) {
+      await linkProfile(wallet as Wallet<"inApp">, {
+        strategy: "email",
+        email: userInfo.email,
+        verificationCode: otp,
+      });
+    } else if ("phone" in userInfo) {
+      await linkProfile(wallet as Wallet<"inApp">, {
+        strategy: "phone",
+        phoneNumber: userInfo.phone,
+        verificationCode: otp,
+      });
     }
+  }
 
-    if (!wallet) {
+  const verify = async (otp: string) => {
+    if (otp.length !== 6) {
       return;
     }
+    setVerifyStatus("verifying");
 
     try {
-      setVerifyStatus("verifying");
-
-      const needsRecoveryCode =
-        accountStatus.recoveryShareManagement === "USER_MANAGED" &&
-        (accountStatus.isNewUser || accountStatus.isNewDevice);
-
-      // USER_MANAGED
-      if (needsRecoveryCode) {
-        if (accountStatus.isNewUser) {
-          try {
-            await connect(otp);
-          } catch (e) {
-            if (e instanceof Error && e.message.includes("encryption key")) {
-              // setScreen("create-password");
-            } else {
-              throw e;
-            }
-          }
-        } else {
-          try {
-            // verifies otp for UI feedback
-            await connect(otp);
-          } catch (e) {
-            if (e instanceof Error && e.message.includes("encryption key")) {
-              // TODO: do we need this?
-              // setScreen("enter-password-or-recovery-code");
-            } else {
-              throw e;
-            }
-          }
-        }
-      }
-
-      // AWS_MANAGED
-      else {
-        // verifies otp for UI feedback
+      // verifies otp for UI feedback
+      if (props.isLinking) {
+        await link(otp);
+      } else {
         await connect(otp);
-        done();
       }
+      done();
 
       setVerifyStatus("valid");
     } catch (e) {
+      // TODO: More robust error handling
       if (
         e instanceof Error &&
         e?.message?.includes("PAYMENT_METHOD_REQUIRED")
       ) {
         setVerifyStatus("payment_required");
+      } else if (
+        e instanceof Error &&
+        (e.message.toLowerCase().includes("link") ||
+          e.message.toLowerCase().includes("profile"))
+      ) {
+        setVerifyStatus("linking_error");
+        setError(e.message);
       } else {
         setVerifyStatus("invalid");
       }
@@ -245,6 +231,15 @@ export function OTPLoginUI(props: {
               </FadeIn>
             )}
 
+            {verifyStatus === "linking_error" && (
+              <FadeIn>
+                <Spacer y="md" />
+                <Text size="sm" color="danger" center>
+                  {error || "Failed to verify code"}
+                </Text>
+              </FadeIn>
+            )}
+
             {verifyStatus === "payment_required" && (
               <FadeIn>
                 <Spacer y="md" />
@@ -306,7 +301,7 @@ export function OTPLoginUI(props: {
                 </Container>
               )}
 
-              {typeof accountStatus === "object" && (
+              {accountStatus === "sent" && (
                 <LinkButton onClick={sendEmailOrSms} type="button">
                   {locale.emailLoginScreen.resendCode}
                 </LinkButton>