thirdweb 5.46.0-nightly-814024ae249141ad1446ce7f21793b1d37b95d13-20240814000405 → 5.46.0

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapFlow.tsx

@@ -3,6 +3,7 @@ import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
 import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
+import type { BuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
 import type { TokenInfo } from "../../../../../../core/utils/defaultTokens.js";
 import { type ERC20OrNativeToken, NATIVE_TOKEN } from "../../nativeToken.js";
 import type { PayerInfo } from "../types.js";
@@ -20,6 +21,7 @@ type SwapFlowProps = {
   onTryAgain: () => void;
   transactionMode: boolean;
   isEmbed: boolean;
+  onSuccess: ((status: BuyWithCryptoStatus) => void) | undefined;
 };
 
 export function SwapFlow(props: SwapFlowProps) {
@@ -84,6 +86,7 @@ export function SwapFlow(props: SwapFlowProps) {
         transactionMode={props.transactionMode}
         isEmbed={props.isEmbed}
         quote={quote}
+        onSuccess={props.onSuccess}
       />
     );
   }

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapStatusScreen.tsx

@@ -3,6 +3,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useRef } from "react";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
+import type { BuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
 import { iconSize } from "../../../../../../core/design-system/index.js";
 import { useBuyWithCryptoStatus } from "../../../../../../core/hooks/pay/useBuyWithCryptoStatus.js";
 import { invalidateWalletBalance } from "../../../../../../core/providers/invalidateWalletBalance.js";
@@ -26,7 +27,10 @@ export function SwapStatusScreen(props: {
   transactionMode: boolean;
   isEmbed: boolean;
   quote: BuyWithCryptoQuote;
+  onSuccess: ((status: BuyWithCryptoStatus) => void) | undefined;
 }) {
+  const { onSuccess } = props;
+
   const swapStatus = useBuyWithCryptoStatus({
     client: props.client,
     transactionHash: props.swapTxHash,
@@ -46,6 +50,18 @@ export function SwapStatusScreen(props: {
     uiStatus = "partialSuccess";
   }
 
+  const purchaseCbCalled = useRef(false);
+  useEffect(() => {
+    if (purchaseCbCalled.current || !onSuccess) {
+      return;
+    }
+
+    if (swapStatus.data?.status === "COMPLETED") {
+      purchaseCbCalled.current = true;
+      onSuccess(swapStatus.data);
+    }
+  }, [onSuccess, swapStatus]);
+
   const queryClient = useQueryClient();
   const balanceInvalidated = useRef(false);
   useEffect(() => {

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

@@ -171,7 +171,7 @@ const DialogContent = /* @__PURE__ */ StyledDiv((_) => {
     background: theme.colors.modalBg,
     "--bg": theme.colors.modalBg,
     color: theme.colors.primaryText,
-    borderRadius: radius.xl,
+    borderRadius: radius.lg,
     position: "fixed",
     top: "50%",
     left: "50%",
@@ -196,7 +196,7 @@ const DialogContent = /* @__PURE__ */ StyledDiv((_) => {
       transform: "none",
       width: "100vw",
       animation: `${modalAnimationMobile} 0.35s cubic-bezier(0.15, 1.15, 0.6, 1)`,
-      borderRadius: radius.xxl,
+      borderRadius: radius.xl,
       borderBottomRightRadius: 0,
       borderBottomLeftRadius: 0,
       maxWidth: "none !important",

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

@@ -27,9 +27,9 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: radius.lg,
+    borderRadius: radius.md,
     padding: `${fontSize.sm} ${fontSize.sm}`,
-    fontSize: fontSize.md,
+    fontSize: fontSize.sm,
     fontWeight: 500,
     boxSizing: "border-box",
     WebkitTapHighlightColor: "transparent",
@@ -90,7 +90,7 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
     ...(() => {
       if (props.variant === "outline") {
         return {
-          border: `1.5px solid ${theme.colors.borderColor}`,
+          border: `1px solid ${theme.colors.borderColor}`,
           "&:hover": {
             borderColor: theme.colors.accentText,
           },
@@ -102,7 +102,7 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
 
       if (props.variant === "ghost") {
         return {
-          border: "1.5px solid transparent",
+          border: "1px solid transparent",
           "&:hover": {
             borderColor: theme.colors.accentText,
           },

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

@@ -43,7 +43,7 @@ export const Input = /* @__PURE__ */ StyledInput<InputProps>((props) => {
     width: "100%",
     outline: "none",
     border: "none",
-    borderRadius: radius.lg,
+    borderRadius: radius.md,
     color: theme.colors.primaryText,
     WebkitAppearance: "none",
     appearance: "none",
@@ -109,7 +109,7 @@ export const InputContainer = /* @__PURE__ */ StyledDiv(() => {
   const theme = useCustomTheme();
   return {
     display: "flex",
-    borderRadius: radius.lg,
+    borderRadius: radius.md,
     boxShadow: `0 0 0px 1.5px ${theme.colors.borderColor}`,
     "&:focus-within": {
       boxShadow: `0 0 0px 2px ${theme.colors.accentText}`,

package/src/react/web/wallets/defaultWallets.ts

@@ -24,6 +24,7 @@ export function getDefaultWallets(options?: {
       chains: options?.chains,
     }),
     createWallet(RAINBOW),
+    createWallet("io.rabby"),
     createWallet(ZERION),
   ];
 }

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

@@ -70,8 +70,8 @@ export function InputSelectionUI(props: {
           placeholder={props.placeholder}
           style={{
             flexGrow: 1,
-            padding: `${spacing.md} ${
-              props.format === "phone" ? 0 : spacing.md
+            padding: `${spacing.sm} ${
+              props.format === "phone" ? 0 : spacing.sm
             }`,
           }}
           variant="transparent"
@@ -97,8 +97,8 @@ export function InputSelectionUI(props: {
           onClick={handleSelect}
           disabled={props.disabled}
           style={{
-            padding: spacing.md,
-            borderRadius: `0 ${radius.lg} ${radius.lg} 0`,
+            padding: spacing.sm,
+            borderRadius: `0 ${radius.md} ${radius.md} 0`,
           }}
         >
           <ArrowRightIcon width={iconSize.md} height={iconSize.md} />

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

@@ -217,9 +217,6 @@ function SignupScreen(props: {
         await linkProfile(wallet as Wallet<"inApp">, {
           strategy: "passkey",
           type: "sign-up",
-        }).catch((e) => {
-          setError(e.message);
-          throw e;
         });
       } else {
         await wallet.connect({
@@ -231,7 +228,11 @@ function SignupScreen(props: {
         await setLastAuthProvider("passkey", webLocalStorage);
       }
       done();
-    } catch {
+    } catch (e) {
+      console.error(e);
+      if (e instanceof Error) {
+        setError(`Error creating passkey: ${e.message}`);
+      }
       setStatus("error");
     }
   }

package/src/utils/bytecode/cbor-decode.ts

@@ -3,7 +3,7 @@
 
 // TODO: re-enable typescript and properly type this
 
-// @ts-nocheck
+// @ts-nocheck - TODO: re-enable typescript and properly type this
 
 let src;
 let srcEnd;
@@ -32,6 +32,60 @@ const defaultOptions = {
   mapsAsObjects: true,
 };
 
+function readFixedString(length) {
+	let result
+	if (length < 16) {
+		if (result = shortStringInJS(length))
+			return result
+	}
+	if (length > 64 && decoder)
+		return decoder.decode(src.subarray(position, position += length))
+	const end = position + length
+	const units = []
+	result = ''
+	while (position < end) {
+		const byte1 = src[position++]
+		if ((byte1 & 0x80) === 0) {
+			// 1 byte
+			units.push(byte1)
+		} else if ((byte1 & 0xe0) === 0xc0) {
+			// 2 bytes
+			const byte2 = src[position++] & 0x3f
+			units.push(((byte1 & 0x1f) << 6) | byte2)
+		} else if ((byte1 & 0xf0) === 0xe0) {
+			// 3 bytes
+			const byte2 = src[position++] & 0x3f
+			const byte3 = src[position++] & 0x3f
+			units.push(((byte1 & 0x1f) << 12) | (byte2 << 6) | byte3)
+		} else if ((byte1 & 0xf8) === 0xf0) {
+			// 4 bytes
+			const byte2 = src[position++] & 0x3f
+			const byte3 = src[position++] & 0x3f
+			const byte4 = src[position++] & 0x3f
+			let unit = ((byte1 & 0x07) << 0x12) | (byte2 << 0x0c) | (byte3 << 0x06) | byte4
+			if (unit > 0xffff) {
+				unit -= 0x10000
+				units.push(((unit >>> 10) & 0x3ff) | 0xd800)
+				unit = 0xdc00 | (unit & 0x3ff)
+			}
+			units.push(unit)
+		} else {
+			units.push(byte1)
+		}
+
+		if (units.length >= 0x1000) {
+			result += fromCharCode.apply(String, units)
+			units.length = 0
+		}
+	}
+
+	if (units.length > 0) {
+		result += fromCharCode.apply(String, units)
+	}
+
+	return result
+}
+
 class Decoder {
   constructor() {
     Object.assign(this, defaultOptions);
@@ -451,4 +505,4 @@ for (let i = 0; i < 256; i++) {
     Number(`1e${Math.floor(45.15 - i * 0.30103)}`))();
 }
 const defaultDecoder = new Decoder();
-export const decode = defaultDecoder.decode;
+export const decode = defaultDecoder.decode;

package/src/utils/uint8-array.ts

@@ -116,8 +116,17 @@ function assertString(value: unknown): asserts value is string {
   }
 }
 
-function base64UrlToBase64(base64url: string) {
-  return base64url.replaceAll("-", "+").replaceAll("_", "/");
+export function base64UrlToBase64(base64url: string): string {
+  // Replace Base64URL characters with Base64 characters
+  let base64 = base64url.replace(/-/g, "+").replace(/_/g, "/");
+
+  // Add padding if necessary
+  const padding = base64.length % 4;
+  if (padding !== 0) {
+    base64 += "=".repeat(4 - padding);
+  }
+
+  return base64;
 }
 
 /**

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.46.0-nightly-814024ae249141ad1446ce7f21793b1d37b95d13-20240814000405";
+export const version = "5.46.0";

package/src/wallets/in-app/{web/utils/Storage/LocalStorage.ts → core/authentication/client-scoped-storage.ts}

@@ -1,52 +1,55 @@
-import type { EcosystemWalletId } from "../../../../wallet-types.js";
+import type { AsyncStorage } from "../../../../utils/storage/AsyncStorage.js";
+import type { EcosystemWalletId } from "../../../wallet-types.js";
 import {
   AUTH_TOKEN_LOCAL_STORAGE_NAME,
   DEVICE_SHARE_LOCAL_STORAGE_NAME,
   PASSKEY_CREDENTIAL_ID_LOCAL_STORAGE_NAME,
   WALLET_CONNECT_SESSIONS_LOCAL_STORAGE_NAME,
   WALLET_USER_ID_LOCAL_STORAGE_NAME,
-} from "../../../core/constants/settings.js";
+} from "../constants/settings.js";
 
 const data = new Map<string, string>();
 
 /**
  * @internal
  */
-export class LocalStorage {
-  protected isSupported: boolean;
+export class ClientScopedStorage {
   protected key: string;
+  protected storage: AsyncStorage | null;
   /**
    * @internal
    */
   constructor({
+    storage,
     clientId,
     ecosystemId,
   }: {
+    storage: AsyncStorage | null;
     clientId: string;
     ecosystemId?: EcosystemWalletId;
   }) {
-    this.isSupported = typeof window !== "undefined" && !!window.localStorage;
+    this.storage = storage;
     this.key = getLocalStorageKey(clientId, ecosystemId);
   }
 
   protected async getItem(key: string): Promise<string | null> {
-    if (this.isSupported) {
-      return window.localStorage.getItem(key);
+    if (this.storage) {
+      return this.storage.getItem(key);
     }
     return data.get(key) ?? null;
   }
 
   protected async setItem(key: string, value: string): Promise<void> {
-    if (this.isSupported) {
-      return window.localStorage.setItem(key, value);
+    if (this.storage) {
+      return this.storage.setItem(key, value);
     }
     data.set(key, value);
   }
 
   protected async removeItem(key: string): Promise<boolean> {
     const item = await this.getItem(key);
-    if (this.isSupported && item) {
-      window.localStorage.removeItem(key);
+    if (this.storage && item) {
+      this.storage.removeItem(key);
       return true;
     }
     return false;

package/src/wallets/in-app/core/authentication/passkeys.ts

@@ -0,0 +1,209 @@
+import type { ThirdwebClient } from "../../../../client/client.js";
+import { getThirdwebBaseUrl } from "../../../../utils/domains.js";
+import { getClientFetch } from "../../../../utils/fetch.js";
+import type { AsyncStorage } from "../../../../utils/storage/AsyncStorage.js";
+import type { Ecosystem } from "../../web/types.js";
+import { ClientScopedStorage } from "./client-scoped-storage.js";
+import type { AuthStoredTokenWithCookieReturnType } from "./types.js";
+
+function getVerificationPath() {
+  return `${getThirdwebBaseUrl(
+    "inAppWallet",
+  )}/api/2024-05-05/login/passkey/callback`;
+}
+function getChallengePath(type: "sign-in" | "sign-up", username?: string) {
+  return `${getThirdwebBaseUrl(
+    "inAppWallet",
+  )}/api/2024-05-05/login/passkey?type=${type}${
+    username ? `&username=${username}` : ""
+  }`;
+}
+
+export type RegisterResult = {
+  authenticatorData: string;
+  credentialId: string;
+  clientData: string;
+  credential: {
+    publicKey: string;
+    algorithm: string;
+  };
+  origin: string;
+};
+
+export type AuthenticateResult = {
+  credentialId: string;
+  authenticatorData: string;
+  clientData: string;
+  signature: string;
+  origin: string;
+};
+
+export type RpInfo = { name: string; id: string };
+
+export interface PasskeyClient {
+  register: (args: {
+    name: string;
+    challenge: string;
+    rp: RpInfo;
+  }) => Promise<RegisterResult>;
+  authenticate: (args: {
+    credentialId: string | undefined;
+    challenge: string;
+    rp: RpInfo;
+  }) => Promise<AuthenticateResult>;
+  isAvailable: () => boolean;
+}
+
+export async function registerPasskey(options: {
+  client: ThirdwebClient;
+  storage: AsyncStorage;
+  passkeyClient: PasskeyClient;
+  ecosystem?: Ecosystem;
+  username?: string;
+  rp: RpInfo;
+}): Promise<AuthStoredTokenWithCookieReturnType> {
+  if (!options.passkeyClient.isAvailable()) {
+    throw new Error("Passkeys are not available on this device");
+  }
+  const storage = new ClientScopedStorage({
+    storage: options.storage,
+    clientId: options.client.clientId,
+    ecosystemId: options.ecosystem?.id,
+  });
+  const fetchWithId = getClientFetch(options.client, options.ecosystem);
+  const generatedName = options.username ?? generateUsername(options.ecosystem);
+  // 1. request challenge from  server
+  const res = await fetchWithId(getChallengePath("sign-up", generatedName));
+  const challengeData = await res.json();
+  if (!challengeData.challenge) {
+    throw new Error("No challenge received");
+  }
+  const challenge = challengeData.challenge;
+
+  // 2. initiate registration
+  const registration = await options.passkeyClient.register({
+    name: generatedName,
+    challenge,
+    rp: options.rp,
+  });
+
+  const customHeaders: Record<string, string> = {};
+  if (options.ecosystem?.partnerId) {
+    customHeaders["x-ecosystem-partner-id"] = options.ecosystem.partnerId;
+  }
+  if (options.ecosystem?.id) {
+    customHeaders["x-ecosystem-id"] = options.ecosystem.id;
+  }
+
+  // 3. send the registration object to the server
+  const verifRes = await fetchWithId(getVerificationPath(), {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      ...customHeaders,
+    },
+    body: JSON.stringify({
+      type: "sign-up",
+      authenticatorData: registration.authenticatorData,
+      credentialId: registration.credentialId,
+      serverVerificationId: challengeData.serverVerificationId,
+      clientData: registration.clientData,
+      username: generatedName,
+      credential: {
+        publicKey: registration.credential.publicKey,
+        algorithm: registration.credential.algorithm,
+      },
+      origin: registration.origin,
+      rpId: options.rp.id,
+    }),
+  });
+  const verifData = await verifRes.json();
+
+  if (!verifData || !verifData.storedToken) {
+    throw new Error(
+      `Error verifying passkey: ${verifData.message ?? "unknown error"}`,
+    );
+  }
+  // 4. store the credentialId in local storage
+  await storage.savePasskeyCredentialId(registration.credentialId);
+
+  // 5. returns back the IAW authentication token
+  return verifData;
+}
+
+export async function loginWithPasskey(options: {
+  client: ThirdwebClient;
+  storage: AsyncStorage;
+  passkeyClient: PasskeyClient;
+  rp: RpInfo;
+  ecosystem?: Ecosystem;
+}): Promise<AuthStoredTokenWithCookieReturnType> {
+  if (!options.passkeyClient.isAvailable()) {
+    throw new Error("Passkeys are not available on this device");
+  }
+  const storage = new ClientScopedStorage({
+    storage: options.storage,
+    clientId: options.client.clientId,
+    ecosystemId: options.ecosystem?.id,
+  });
+  const fetchWithId = getClientFetch(options.client, options.ecosystem);
+  // 1. request challenge from  server/iframe
+  const res = await fetchWithId(getChallengePath("sign-in"));
+  const challengeData = await res.json();
+  if (!challengeData.challenge) {
+    throw new Error("No challenge received");
+  }
+  const challenge = challengeData.challenge;
+  // 1.2. find the user's credentialId in local storage
+  const credentialId = (await storage.getPasskeyCredentialId()) ?? undefined;
+  // 2. initiate login
+  const authentication = await options.passkeyClient.authenticate({
+    credentialId,
+    challenge,
+    rp: options.rp,
+  });
+
+  const customHeaders: Record<string, string> = {};
+  if (options.ecosystem?.partnerId) {
+    customHeaders["x-ecosystem-partner-id"] = options.ecosystem.partnerId;
+  }
+  if (options.ecosystem?.id) {
+    customHeaders["x-ecosystem-id"] = options.ecosystem.id;
+  }
+
+  const verifRes = await fetchWithId(getVerificationPath(), {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      ...customHeaders,
+    },
+    body: JSON.stringify({
+      type: "sign-in",
+      authenticatorData: authentication.authenticatorData,
+      credentialId: authentication.credentialId,
+      serverVerificationId: challengeData.serverVerificationId,
+      clientData: authentication.clientData,
+      signature: authentication.signature,
+      origin: authentication.origin,
+      rpId: options.rp.id,
+    }),
+  });
+
+  const verifData = await verifRes.json();
+
+  if (!verifData || !verifData.storedToken) {
+    throw new Error(
+      `Error verifying passkey: ${verifData.message ?? "unknown error"}`,
+    );
+  }
+
+  // 5. store the credentialId in local storage
+  await storage.savePasskeyCredentialId(authentication.credentialId);
+
+  // 6. return the auth'd user type
+  return verifData;
+}
+
+function generateUsername(ecosystem?: Ecosystem) {
+  return `${ecosystem?.id ?? "wallet"}-${new Date().toISOString()}`;
+}

package/src/wallets/in-app/core/authentication/types.ts

@@ -1,4 +1,3 @@
-import type { AuthType } from "@passwordless-id/webauthn/dist/esm/types.js";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { Address } from "../../../../utils/address.js";
@@ -38,9 +37,23 @@ export type SingleStepAuthArgsType =
   | { strategy: "iframe" }
   | {
       strategy: "passkey";
+      /**
+       * Whether to create a new passkey (sign up) or login to an existing one (sign in).
+       * You can use `hasStoredPasskey()` to check if a user has previously logged in with a passkey on this device.
+       */
       type: "sign-up" | "sign-in";
+      /**
+       * Optional name of the passkey to create, defaults to a generated name
+       */
       passkeyName?: string;
-      authenticatorType?: AuthType;
+      /**
+       * Optional domain, defaults to current window location.
+       * NOTE: this is required on native platforms.
+       */
+      domain?: {
+        displayName: string;
+        hostname: string;
+      };
     }
   | {
       strategy: "wallet";

package/src/wallets/in-app/core/wallet/types.ts

@@ -29,9 +29,22 @@ export type InAppWalletAuth = AuthOption;
 export type InAppWalletCreationOptions =
   | {
       auth?: {
+        /**
+         * List of authentication options to display in the Connect Modal
+         */
         options: InAppWalletAuth[];
+        /**
+         * Whether to display the social auth prompt in a popup or redirect
+         */
         mode?: "popup" | "redirect";
+        /**
+         * The domain of the passkey to use for authentication
+         */
+        passkeyDomain?: string;
       };
+      /**
+       * Metadata to display in the Connect Modal
+       */
       metadata?: {
         image?: {
           src: string;
@@ -40,8 +53,17 @@ export type InAppWalletCreationOptions =
           alt?: string;
         };
       };
+      /**
+       * The partnerId of the ecosystem wallet to connect to
+       */
       partnerId?: string;
+      /**
+       * The smart account options to convert the wallet to a smart account
+       **/
       smartAccount?: SmartWalletOptions;
+      /**
+       * Whether to hide the private key export button in the Connect Modal
+       */
       hidePrivateKeyExport?: boolean;
     }
   | undefined;