thirdweb 5.45.2-nightly-b15aa4cdff3f3b233025da285780668a18fe29ab-20240813000336 → 5.46.0-nightly-d6e4898458ae0b7db99acb8a44f0730c18d6bdd9-20240815000344

package/src/react/native/ui/connect/WalletLoadingThumbnail.tsx

@@ -15,6 +15,7 @@ interface Props {
   imageSize: number;
   showError?: boolean;
   animate: boolean;
+  roundLoader?: boolean;
 }
 
 function WalletLoadingThumbnail({
@@ -23,6 +24,7 @@ function WalletLoadingThumbnail({
   showError,
   imageSize,
   animate,
+  roundLoader,
 }: Props) {
   const spinValue = useRef(new Animated.Value(0));
 
@@ -48,6 +50,8 @@ function WalletLoadingThumbnail({
     outputRange: [0, -400],
   });
 
+  const rx = roundLoader ? imageSize / 2 : 15;
+
   return (
     <View style={styles.container}>
       <Svg
@@ -62,8 +66,8 @@ function WalletLoadingThumbnail({
             y="2"
             width={imageSize + INTERNAL_PADDING}
             height={imageSize + INTERNAL_PADDING}
-            rx={15}
-            stroke={showError ? "transparent" : theme.colors.accentButtonBg}
+            rx={rx}
+            stroke={showError ? "transparent" : theme.colors.accentText}
             strokeWidth={3}
             fill="transparent"
             strokeDasharray={"100 300"}

package/src/react/web/hooks/transaction/useSendTransaction.tsx

@@ -132,6 +132,7 @@ export function useSendTransaction(config: SendTransactionConfig = {}) {
           mode: "transaction",
           transaction: data.tx,
           metadata: payModal?.metadata,
+          onPurchaseSuccess: payModal?.onPurchaseSuccess,
         }}
       />,
     );

package/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -4,6 +4,8 @@ import type { Chain } from "../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../constants/addresses.js";
 import type { GetBuyWithCryptoQuoteParams } from "../../../../../../pay/buyWithCrypto/getQuote.js";
+import type { BuyWithCryptoStatus } from "../../../../../../pay/buyWithCrypto/getStatus.js";
+import type { BuyWithFiatStatus } from "../../../../../../pay/buyWithFiat/getStatus.js";
 import { isSwapRequiredPostOnramp } from "../../../../../../pay/buyWithFiat/isSwapRequiredPostOnramp.js";
 import { formatNumber } from "../../../../../../utils/formatNumber.js";
 import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
@@ -204,6 +206,26 @@ function BuyScreenContent(props: BuyScreenContentProps) {
 
   // screens ----------------------------
 
+  const onSwapSuccess = useCallback(
+    (_status: BuyWithCryptoStatus) => {
+      props.payOptions.onPurchaseSuccess?.({
+        type: "crypto",
+        status: _status,
+      });
+    },
+    [props.payOptions.onPurchaseSuccess],
+  );
+
+  const onFiatSuccess = useCallback(
+    (_status: BuyWithFiatStatus) => {
+      props.payOptions.onPurchaseSuccess?.({
+        type: "fiat",
+        status: _status,
+      });
+    },
+    [props.payOptions.onPurchaseSuccess],
+  );
+
   if (screen.id === "connect-payer-wallet") {
     return (
       <WalletSwitcherConnectionScreen
@@ -259,6 +281,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
             id: "buy-with-crypto",
           });
         }}
+        onSuccess={onSwapSuccess}
       />
     );
   }
@@ -284,6 +307,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
         onDone={onDone}
         isEmbed={props.isEmbed}
         payer={payer}
+        onSuccess={onFiatSuccess}
       />
     );
   }

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatFlow.tsx

@@ -1,7 +1,10 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import type { BuyWithFiatQuote } from "../../../../../../../pay/buyWithFiat/getQuote.js";
-import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js";
+import {
+  type BuyWithFiatStatus,
+  getBuyWithFiatStatus,
+} from "../../../../../../../pay/buyWithFiat/getStatus.js";
 import { isSwapRequiredPostOnramp } from "../../../../../../../pay/buyWithFiat/isSwapRequiredPostOnramp.js";
 import { openOnrampPopup } from "../openOnRamppopup.js";
 import { addPendingTx } from "../swap/pendingSwapTx.js";
@@ -48,6 +51,7 @@ export function FiatFlow(props: {
   transactionMode: boolean;
   isEmbed: boolean;
   payer: PayerInfo;
+  onSuccess: (status: BuyWithFiatStatus) => void;
 }) {
   const hasTwoSteps = isSwapRequiredPostOnramp(props.quote);
   const [screen, setScreen] = useState<Screen>(
@@ -101,10 +105,21 @@ export function FiatFlow(props: {
         }}
         transactionMode={props.transactionMode}
         isEmbed={props.isEmbed}
+        onSuccess={props.onSuccess}
       />
     );
   }
 
+  const onPostOnrampSuccess = useCallback(() => {
+    // report the status of fiat status instead of post onramp swap status when post onramp swap is successful
+    getBuyWithFiatStatus({
+      intentId: props.quote.intentId,
+      client: props.client,
+    }).then((status) => {
+      props.onSuccess(status);
+    });
+  }, [props.onSuccess, props.quote.intentId, props.client]);
+
   if (screen.id === "postonramp-swap") {
     return (
       <PostOnRampSwapFlow
@@ -120,6 +135,7 @@ export function FiatFlow(props: {
         transactionMode={props.transactionMode}
         isEmbed={props.isEmbed}
         payer={props.payer}
+        onSuccess={onPostOnrampSuccess}
       />
     );
   }

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatStatusScreen.tsx

@@ -41,9 +41,10 @@ export function OnrampStatusScreen(props: {
   onShowSwapFlow: (status: BuyWithFiatStatus) => void;
   transactionMode: boolean;
   isEmbed: boolean;
+  onSuccess: ((status: BuyWithFiatStatus) => void) | undefined;
 }) {
   const queryClient = useQueryClient();
-  const { openedWindow } = props;
+  const { openedWindow, onSuccess } = props;
   const statusQuery = useBuyWithFiatStatus({
     intentId: props.intentId,
     client: props.client,
@@ -62,6 +63,18 @@ export function OnrampStatusScreen(props: {
     uiStatus = "completed";
   }
 
+  const purchaseCbCalled = useRef(false);
+  useEffect(() => {
+    if (purchaseCbCalled.current || !onSuccess) {
+      return;
+    }
+
+    if (statusQuery.data?.status === "ON_RAMP_TRANSFER_COMPLETED") {
+      purchaseCbCalled.current = true;
+      onSuccess(statusQuery.data);
+    }
+  }, [onSuccess, statusQuery.data]);
+
   // close the onramp popup if onramp is completed
   useEffect(() => {
     if (!openedWindow || !statusQuery.data) {

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/PostOnRampSwap.tsx

@@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import { useEffect, useState } 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 { getPostOnRampQuote } from "../../../../../../../pay/buyWithFiat/getPostOnRampQuote.js";
 import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js";
 import { iconSize } from "../../../../../../core/design-system/index.js";
@@ -23,6 +24,7 @@ export function PostOnRampSwap(props: {
   transactionMode: boolean;
   isEmbed: boolean;
   payer: PayerInfo;
+  onSuccess: ((status: BuyWithCryptoStatus) => void) | undefined;
 }) {
   const [lockedOnRampQuote, setLockedOnRampQuote] = useState<
     BuyWithCryptoQuote | undefined
@@ -130,6 +132,7 @@ export function PostOnRampSwap(props: {
       }}
       transactionMode={props.transactionMode}
       isEmbed={props.isEmbed}
+      onSuccess={props.onSuccess}
     />
   );
 }

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/PostOnRampSwapFlow.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
+import type { BuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
 import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js";
 import type { PayerInfo } from "../types.js";
 import { type BuyWithFiatPartialQuote, FiatSteps } from "./FiatSteps.js";
@@ -22,6 +23,7 @@ export function PostOnRampSwapFlow(props: {
   transactionMode: boolean;
   isEmbed: boolean;
   payer: PayerInfo;
+  onSuccess: ((status: BuyWithCryptoStatus) => void) | undefined;
 }) {
   const [statusForSwap, setStatusForSwap] = useState<
     BuyWithFiatStatus | undefined
@@ -38,6 +40,7 @@ export function PostOnRampSwapFlow(props: {
         transactionMode={props.transactionMode}
         isEmbed={props.isEmbed}
         payer={props.payer}
+        onSuccess={props.onSuccess}
       />
     );
   }

package/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/FiatDetailsScreen.tsx

@@ -73,6 +73,8 @@ export function FiatDetailsScreen(props: {
           setStopPolling(true);
         }}
         payer={props.payer}
+        // viewing history - ignore onSuccess
+        onSuccess={undefined}
       />
     );
   }

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/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/any-evm/deploy-metadata.ts

@@ -1,5 +1,6 @@
 import type { Abi } from "abitype";
 import type { ThirdwebClient } from "../../client/client.js";
+import { formatCompilerMetadata } from "../../contract/actions/compiler-metadata.js";
 import { download } from "../../storage/download.js";
 import type { Hex } from "../encoding/hex.js";
 import type { Prettify } from "../type-utils.js";
@@ -89,34 +90,6 @@ async function fetchAndParseCompilerMetadata(
   return formatCompilerMetadata(metadata);
 }
 
-// biome-ignore lint/suspicious/noExplicitAny: TODO: fix later
-function formatCompilerMetadata(metadata: any): ParsedCompilerMetadata {
-  const abi = metadata.output.abi;
-  const compilationTarget = metadata.settings.compilationTarget;
-  const targets = Object.keys(compilationTarget);
-  const name = compilationTarget[targets[0] as keyof typeof compilationTarget];
-  const info = {
-    title: metadata.output.devdoc.title,
-    author: metadata.output.devdoc.author,
-    details: metadata.output.devdoc.detail,
-    notice: metadata.output.userdoc.notice,
-  };
-  const licenses: string[] = [
-    ...new Set(
-      // biome-ignore lint/suspicious/noExplicitAny: TODO: fix later
-      Object.entries(metadata.sources).map(([, src]) => (src as any).license),
-    ),
-  ];
-  return {
-    name,
-    abi,
-    metadata,
-    info,
-    licenses,
-    isPartialAbi: metadata.isPartialAbi,
-  };
-}
-
 // types
 
 type RawCompilerMetadata = {

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.45.2-nightly-b15aa4cdff3f3b233025da285780668a18fe29ab-20240813000336";
+export const version = "5.46.0-nightly-d6e4898458ae0b7db99acb8a44f0730c18d6bdd9-20240815000344";

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/getLoginPath.ts

@@ -1,8 +1,20 @@
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getThirdwebBaseUrl } from "../../../../utils/domains.js";
-import type { AuthOption } from "../../../../wallets/types.js";
+import { type AuthOption, authOptions } from "../../../../wallets/types.js";
 import type { Ecosystem } from "../../web/types.js";
 
+const getLoginOptionRoute = (option: AuthOption) => {
+  if (!authOptions.includes(option)) {
+    throw new Error(`Unknown auth option ${option}`);
+  }
+  switch (option) {
+    case "wallet":
+      return "siwe";
+    default:
+      return option;
+  }
+};
+
 export const getLoginUrl = ({
   authOption,
   client,
@@ -16,7 +28,8 @@ export const getLoginUrl = ({
   mode?: "popup" | "redirect" | "mobile";
   redirectUrl?: string;
 }) => {
-  let baseUrl = `${getThirdwebBaseUrl("inAppWallet")}/api/2024-05-05/login/${authOption}?clientId=${client.clientId}`;
+  const route = getLoginOptionRoute(authOption);
+  let baseUrl = `${getThirdwebBaseUrl("inAppWallet")}/api/2024-05-05/login/${route}?clientId=${client.clientId}`;
   if (ecosystem?.partnerId) {
     baseUrl = `${baseUrl}&ecosystemId=${ecosystem.id}&ecosystemPartnerId=${ecosystem.partnerId}`;
   } else if (ecosystem) {
@@ -49,7 +62,8 @@ export const getLoginCallbackUrl = ({
   client: ThirdwebClient;
   ecosystem?: Ecosystem;
 }): string => {
-  let baseUrl = `${getThirdwebBaseUrl("inAppWallet")}/api/2024-05-05/login/${authOption}/callback?clientId=${client.clientId}`;
+  const route = getLoginOptionRoute(authOption);
+  let baseUrl = `${getThirdwebBaseUrl("inAppWallet")}/api/2024-05-05/login/${route}/callback?clientId=${client.clientId}`;
   if (ecosystem?.partnerId) {
     baseUrl = `${baseUrl}&ecosystemId=${ecosystem.id}&ecosystemPartnerId=${ecosystem.partnerId}`;
   } else if (ecosystem) {