thirdweb 5.44.1 → 5.45.0-nightly-bbb4f1c53f982b1f9de00fb30efbf2c77f155e96-20240809000532

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>

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

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
-import type { Wallet } from "../../../../exports/wallets.js";
+import { type Wallet, linkProfile } from "../../../../exports/wallets.js";
 import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import { hasStoredPasskey } from "../../../../wallets/in-app/web/lib/auth/passkeys.js";
@@ -9,6 +9,7 @@ import { iconSize } from "../../../core/design-system/index.js";
 import { setLastAuthProvider } from "../../../core/utils/storage.js";
 import { AccentFailIcon } from "../../ui/ConnectWallet/icons/AccentFailIcon.js";
 import { FingerPrintIcon } from "../../ui/ConnectWallet/icons/FingerPrintIcon.js";
+import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
 import { Spacer } from "../../ui/components/Spacer.js";
 import { Spinner } from "../../ui/components/Spinner.js";
 import { Container, ModalHeader } from "../../ui/components/basic.js";
@@ -23,13 +24,15 @@ import { LoadingScreen } from "./LoadingScreen.js";
 
 export function PassKeyLogin(props: {
   wallet: Wallet;
+  locale: ConnectLocale;
   done: () => void;
   onBack?: () => void;
   client: ThirdwebClient;
   chain: Chain | undefined;
   size: "compact" | "wide";
+  isLinking?: boolean;
 }) {
-  const { wallet, done, client, chain, size } = props;
+  const { wallet, done, client, chain, size, locale } = props;
   const [screen, setScreen] = useState<
     "select" | "login" | "loading" | "signup"
   >("loading");
@@ -60,7 +63,14 @@ export function PassKeyLogin(props: {
   return (
     <Container animate="fadein" fullHeight flex="column">
       <Container p="lg">
-        <ModalHeader title="Passkey" onBack={props.onBack} />
+        <ModalHeader
+          title={
+            props.isLinking
+              ? locale.passkeys.linkPasskey
+              : locale.passkeys.title
+          }
+          onBack={props.onBack}
+        />
       </Container>
 
       <Container
@@ -97,6 +107,7 @@ export function PassKeyLogin(props: {
                 setScreen("signup");
               }}
               chain={chain}
+              isLinking={props.isLinking}
             />
           )}
 
@@ -106,6 +117,7 @@ export function PassKeyLogin(props: {
               client={client}
               done={done}
               chain={chain}
+              isLinking={props.isLinking}
             />
           )}
         </div>
@@ -120,20 +132,32 @@ function LoginScreen(props: {
   client: ThirdwebClient;
   onCreate: () => void;
   chain?: Chain;
+  isLinking?: boolean;
 }) {
   const { wallet, done, client, chain } = props;
   const [status, setStatus] = useState<"loading" | "error">("loading");
+  const [error, setError] = useState<string | undefined>();
 
   async function login() {
     setStatus("loading");
     try {
-      await wallet.connect({
-        client: client,
-        strategy: "passkey",
-        type: "sign-in",
-        chain,
-      });
-      await setLastAuthProvider("passkey", webLocalStorage);
+      if (props.isLinking) {
+        await linkProfile(wallet as Wallet<"inApp">, {
+          strategy: "passkey",
+          type: "sign-in",
+        }).catch((e) => {
+          setError(e.message);
+          throw e;
+        });
+      } else {
+        await wallet.connect({
+          client: client,
+          strategy: "passkey",
+          type: "sign-in",
+          chain,
+        });
+        await setLastAuthProvider("passkey", webLocalStorage);
+      }
       done();
     } catch {
       setStatus("error");
@@ -162,7 +186,7 @@ function LoginScreen(props: {
   if (status === "error") {
     return (
       <>
-        <ErrorState onTryAgain={login} title="Failed to Login" />
+        <ErrorState onTryAgain={login} title={error || "Failed to Login"} />
         <Spacer y="sm" />
         <Button variant="outline" fullWidth onClick={props.onCreate}>
           Create a new Passkey
@@ -180,20 +204,32 @@ function SignupScreen(props: {
   done: () => void;
   client: ThirdwebClient;
   chain?: Chain;
+  isLinking?: boolean;
 }) {
   const { wallet, done, client, chain } = props;
+  const [error, setError] = useState<string | undefined>();
   const [status, setStatus] = useState<"loading" | "error">("loading");
 
   async function signup() {
     setStatus("loading");
     try {
-      await wallet.connect({
-        client: client,
-        strategy: "passkey",
-        type: "sign-up",
-        chain,
-      });
-      await setLastAuthProvider("passkey", webLocalStorage);
+      if (props.isLinking) {
+        await linkProfile(wallet as Wallet<"inApp">, {
+          strategy: "passkey",
+          type: "sign-up",
+        }).catch((e) => {
+          setError(e.message);
+          throw e;
+        });
+      } else {
+        await wallet.connect({
+          client: client,
+          strategy: "passkey",
+          type: "sign-up",
+          chain,
+        });
+        await setLastAuthProvider("passkey", webLocalStorage);
+      }
       done();
     } catch {
       setStatus("error");
@@ -222,7 +258,10 @@ function SignupScreen(props: {
   if (status === "error") {
     return (
       <>
-        <ErrorState onTryAgain={signup} title="Failed to create passkey" />
+        <ErrorState
+          onTryAgain={signup}
+          title={error || "Failed to create passkey"}
+        />
         <Spacer y="lg" />
       </>
     );
@@ -269,7 +308,7 @@ function ErrorState(props: {
         <AccentFailIcon size={iconSize["3xl"]} />
       </Container>
       <Spacer y="lg" />
-      <Text center color="primaryText" size="lg">
+      <Text center color="primaryText" size="md">
         {props.title}
       </Text>
       <Spacer y="xl" />

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

@@ -4,11 +4,13 @@ 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 { linkProfile } from "../../../../wallets/in-app/core/wallet/profiles.js";
 import type { InAppWalletSocialAuth } from "../../../../wallets/in-app/core/wallet/types.js";
 import { loginWithOauthRedirect } from "../../../../wallets/in-app/web/lib/auth/oauth.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import { setLastAuthProvider } from "../../../core/utils/storage.js";
+import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
 import { Spacer } from "../../ui/components/Spacer.js";
 import { Spinner } from "../../ui/components/Spinner.js";
 import { Container, ModalHeader } from "../../ui/components/basic.js";
@@ -31,6 +33,8 @@ export function SocialLogin(props: {
   size: "compact" | "wide";
   client: ThirdwebClient;
   chain: Chain | undefined;
+  connectLocale: ConnectLocale;
+  isLinking?: boolean;
 }) {
   const ewLocale = props.locale;
   const locale = ewLocale.socialLoginScreen;
@@ -47,7 +51,8 @@ export function SocialLogin(props: {
     if (
       walletConfig &&
       "auth" in walletConfig &&
-      walletConfig?.auth?.mode === "redirect"
+      walletConfig?.auth?.mode === "redirect" &&
+      !props.isLinking // Redirect not supported for account linking (we need to maintain the aplication state)
     ) {
       return loginWithOauthRedirect({
         authOption: props.socialAuth,
@@ -79,15 +84,29 @@ export function SocialLogin(props: {
       }
 
       setStatus("connecting");
-      await wallet.connect({
-        chain: props.chain,
-        strategy: props.socialAuth,
-        openedWindow: socialWindow,
-        closeOpenedWindow: (openedWindow) => {
-          openedWindow.close();
-        },
-        client: props.client,
-      });
+      if (props.isLinking) {
+        await linkProfile(wallet as Wallet<"inApp">, {
+          strategy: props.socialAuth,
+          openedWindow: socialWindow,
+          closeOpenedWindow: (openedWindow) => {
+            openedWindow.close();
+          },
+        }).catch((e) => {
+          setAuthError(e.message);
+          throw e;
+        });
+      } else {
+        await wallet.connect({
+          chain: props.chain,
+          strategy: props.socialAuth,
+          openedWindow: socialWindow,
+          closeOpenedWindow: (openedWindow) => {
+            openedWindow.close();
+          },
+          client: props.client,
+        });
+      }
+
       await setLastAuthProvider(props.socialAuth, webLocalStorage);
       setStatus("connected");
       done();
@@ -122,7 +141,8 @@ export function SocialLogin(props: {
           done();
           setStatus("connected");
         })
-        .catch(() => {
+        .catch((e) => {
+          setAuthError(e.message);
           setStatus("error");
         });
     }
@@ -139,7 +159,14 @@ export function SocialLogin(props: {
         }}
       >
         {props.goBack && (
-          <ModalHeader title={locale.title} onBack={props.goBack} />
+          <ModalHeader
+            title={
+              props.isLinking
+                ? props.connectLocale.manageWallet.linkProfile
+                : locale.title
+            }
+            onBack={props.goBack}
+          />
         )}
 
         {props.size === "compact" ? <Spacer y="xl" /> : null}
@@ -176,8 +203,13 @@ export function SocialLogin(props: {
 
           {status === "error" && (
             <Container animate="fadein">
-              <Text color="danger">{locale.failed}</Text>
-              {authError && <Text color="danger">{authError}</Text>}
+              {authError ? (
+                <Text center color="danger">
+                  {authError}
+                </Text>
+              ) : (
+                <Text color="danger">{locale.failed}</Text>
+              )}
               <Spacer y="lg" />
               <Button variant="primary" onClick={handleSocialLogin}>
                 {locale.retry}

package/src/react/web/wallets/shared/locale/en.ts

@@ -8,7 +8,7 @@ export default {
   emailPlaceholder: "Email address",
   submitEmail: "Continue",
   signIn: "Sign in",
-  or: "Or",
+  or: "or",
   emailRequired: "Email address is required",
   invalidEmail: "Invalid email address",
   maxAccountsExceeded:

package/src/react/web/wallets/shared/oauthSignIn.ts

@@ -1,5 +1,5 @@
 import type { ThirdwebClient } from "../../../../client/client.js";
-import { getSocialAuthLoginPath } from "../../../../wallets/in-app/core/authentication/getLoginPath.js";
+import { getLoginUrl } from "../../../../wallets/in-app/core/authentication/getLoginPath.js";
 import type { InAppWalletSocialAuth } from "../../../../wallets/in-app/core/wallet/types.js";
 import type { Ecosystem } from "../../../../wallets/in-app/web/types.js";
 import type { Theme } from "../../../core/design-system/index.js";
@@ -36,7 +36,7 @@ function getOauthLoginPath(
     case "farcaster":
     case "telegram":
     case "discord":
-      return getSocialAuthLoginPath({ authOption, client, ecosystem });
+      return getLoginUrl({ authOption, client, ecosystem });
     default:
       return "";
   }

package/src/reactive/store.ts

@@ -31,6 +31,9 @@ export function createStore<T>(initialValue: T): Store<T> {
       return value;
     },
     setValue(newValue: T) {
+      if (newValue === value) {
+        return;
+      }
       value = newValue;
       notify();
     },

package/src/transaction/serialize-transaction.test.ts

@@ -35,7 +35,7 @@ describe.runIf(process.env.TW_SECRET_KEY)("eip1559", () => {
   } as const satisfies TransactionSerializableEIP1559;
 
   test("default", () => {
-    const serialized = serializeTransaction({
+    const serialized = serializeTransaction<TransactionSerializableEIP1559>({
       transaction: baseEip1559,
     });
     assertType<TransactionSerializedEIP1559>(serialized);
@@ -125,7 +125,9 @@ describe.runIf(process.env.TW_SECRET_KEY)("eip1559", () => {
         },
       ],
     } satisfies TransactionSerializableEIP1559;
-    const serialized = serializeTransaction({ transaction: args });
+    const serialized = serializeTransaction<TransactionSerializableEIP1559>({
+      transaction: args,
+    });
     expect(serialized).toEqual(
       "0x02f88b0182031184773594008477359400809470997970c51812dc3a010c7d01b50e0d17dc79c8880de0b6b3a764000080f85bf859940000000000000000000000000000000000000000f842a00000000000000000000000000000000000000000000000000000000000000001a060fdd29ff912ce880cd3edaf9f932dc61d3dae823ea77e0323f94adb9f6a72fe",
     );
@@ -271,7 +273,7 @@ describe("eip2930", () => {
   } as const satisfies TransactionSerializableEIP2930;
 
   test("default", () => {
-    const serialized = serializeTransaction({
+    const serialized = serializeTransaction<TransactionSerializableEIP2930>({
       transaction: BASE_EIP2930_TRANSACTION,
     });
     assertType<TransactionSerializedEIP2930>(serialized);
@@ -324,7 +326,9 @@ describe("eip2930", () => {
       ],
       gasPrice: fromGwei("2"),
     } satisfies TransactionSerializableEIP2930;
-    const serialized = serializeTransaction({ transaction: args });
+    const serialized = serializeTransaction<TransactionSerializableEIP2930>({
+      transaction: args,
+    });
     expect(serialized).toEqual(
       "0x01f8450180847735940080808080f838f7940000000000000000000000000000000000000000e1a00000000000000000000000000000000000000000000000000000000000000001",
     );
@@ -486,7 +490,7 @@ describe("legacy", () => {
   };
 
   test("default", () => {
-    const serialized = serializeTransaction({
+    const serialized = serializeTransaction<TransactionSerializableLegacy>({
       transaction: BASE_LEGACY_TRANSACTION,
     });
     assertType<TransactionSerializedLegacy>(serialized);
@@ -706,7 +710,7 @@ describe("miscellaneous", () => {
           s: "0x354c756a1aa3346e9b3ea5423ac99acfc005e9cce2cd698e14d792f43fa15a23",
           chainId: undefined,
           typeHex: "0x0",
-        },
+        } as TransactionSerializable,
       }),
     ).toMatchInlineSnapshot(
       '"0xf8667584b2d05e0082c9ab9455d398326f99059ff775485246999027b31979558080830149fba073b39769ff4a36515c8fca546550a3fdafebbf37fa9e22be2d92b44653ade7bfa0354c756a1aa3346e9b3ea5423ac99acfc005e9cce2cd698e14d792f43fa15a23"',
@@ -733,7 +737,7 @@ describe("miscellaneous", () => {
           s: "0x354c756a1aa3346e9b3ea5423ac99acfc005e9cce2cd698e14d792f43fa15a23",
           chainId: undefined,
           typeHex: "0x0",
-        },
+        } as TransactionSerializable,
       }),
     ).toMatchInlineSnapshot(
       '"0xf8667584b2d05e0082c9ab9455d398326f99059ff775485246999027b31979558080830149fca073b39769ff4a36515c8fca546550a3fdafebbf37fa9e22be2d92b44653ade7bfa0354c756a1aa3346e9b3ea5423ac99acfc005e9cce2cd698e14d792f43fa15a23"',
@@ -760,7 +764,7 @@ describe("miscellaneous", () => {
           s: "0x354c756a1aa3346e9b3ea5423ac99acfc005e9cce2cd698e14d792f43fa15a23",
           chainId: undefined,
           typeHex: "0x0",
-        },
+        } as TransactionSerializable,
       }),
     ).toMatchInlineSnapshot(
       '"0xf8637584b2d05e0082c9ab9455d398326f99059ff775485246999027b319795580801ba073b39769ff4a36515c8fca546550a3fdafebbf37fa9e22be2d92b44653ade7bfa0354c756a1aa3346e9b3ea5423ac99acfc005e9cce2cd698e14d792f43fa15a23"',
@@ -787,7 +791,7 @@ describe("miscellaneous", () => {
           s: "0x354c756a1aa3346e9b3ea5423ac99acfc005e9cce2cd698e14d792f43fa15a23",
           chainId: undefined,
           typeHex: "0x0",
-        },
+        } as TransactionSerializable,
       }),
     ).toMatchInlineSnapshot(
       '"0xf8637584b2d05e0082c9ab9455d398326f99059ff775485246999027b319795580801ca073b39769ff4a36515c8fca546550a3fdafebbf37fa9e22be2d92b44653ade7bfa0354c756a1aa3346e9b3ea5423ac99acfc005e9cce2cd698e14d792f43fa15a23"',