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

package/src/react/core/hooks/connection/ConnectButtonProps.ts

@@ -1,5 +1,7 @@
 import type { Chain } from "../../../../chains/types.js";
 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 { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
 import type { Prettify } from "../../../../utils/type-utils.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
@@ -89,6 +91,21 @@ export type PayUIOptions = Prettify<
      * This details will be stored with the purchase and can be retrieved later via the status API or Webhook
      */
     purchaseData?: object;
+
+    /**
+     * Callback to be called when the user successfully completes the purchase.
+     */
+    onPurchaseSuccess?: (
+      info:
+        | {
+            type: "crypto";
+            status: BuyWithCryptoStatus;
+          }
+        | {
+            type: "fiat";
+            status: BuyWithFiatStatus;
+          },
+    ) => void;
   } & (FundWalletOptions | DirectPaymentOptions | TranasctionOptions)
 >;
 

package/src/react/core/hooks/transaction/useSendTransaction.ts

@@ -1,5 +1,7 @@
 import { type UseMutationResult, useMutation } from "@tanstack/react-query";
 import type { Chain } from "../../../../chains/types.js";
+import type { BuyWithCryptoStatus } from "../../../../pay/buyWithCrypto/getStatus.js";
+import type { BuyWithFiatStatus } from "../../../../pay/buyWithFiat/getStatus.js";
 import type { GaslessOptions } from "../../../../transaction/actions/gasless/types.js";
 import { sendTransaction } from "../../../../transaction/actions/send-transaction.js";
 import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait-for-tx-receipt.js";
@@ -46,6 +48,20 @@ export type SendTransactionPayModalConfig =
             testMode?: boolean;
           };
       purchaseData?: object;
+      /**
+       * Callback to be called when the user successfully completes the purchase.
+       */
+      onPurchaseSuccess?: (
+        info:
+          | {
+              type: "crypto";
+              status: BuyWithCryptoStatus;
+            }
+          | {
+              type: "fiat";
+              status: BuyWithFiatStatus;
+            },
+      ) => void;
     }
   | false;
 

package/src/react/core/hooks/wallets/useAutoConnect.ts

@@ -96,6 +96,9 @@ export function useAutoConnectCore(
           setConnectionStatus("disconnected");
         }
       } catch (e) {
+        if (e instanceof Error) {
+          console.warn("Error auto connecting wallet:", e.message);
+        }
         setConnectionStatus("disconnected");
       }
     } else {

package/src/react/core/hooks/wallets/useConnect.ts

@@ -2,6 +2,7 @@ import { useCallback, useState } from "react";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { ConnectManagerOptions } from "../../../../wallets/manager/index.js";
 import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
+import { useSetActiveWalletConnectionStatus } from "./useSetActiveWalletConnectionStatus.js";
 
 /**
  * A hook to set a wallet as active wallet
@@ -36,6 +37,7 @@ import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 export function useConnect(options?: ConnectManagerOptions) {
   const manager = useConnectionManagerCtx("useConnect");
   const { connect } = manager;
+  const setConnectionStatus = useSetActiveWalletConnectionStatus();
   const [isConnecting, setIsConnecting] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
@@ -43,23 +45,29 @@ export function useConnect(options?: ConnectManagerOptions) {
     async (walletOrFn: Wallet | (() => Promise<Wallet>)) => {
       // reset error state
       setError(null);
+      setConnectionStatus("connecting");
       if (typeof walletOrFn !== "function") {
-        return await connect(walletOrFn, options);
+        const account = await connect(walletOrFn, options);
+        setConnectionStatus("connected");
+        return account;
       }
 
       setIsConnecting(true);
       try {
         const w = await walletOrFn();
-        return await connect(w, options);
+        const account = await connect(w, options);
+        setConnectionStatus("connected");
+        return account;
       } catch (e) {
         console.error(e);
         setError(e as Error);
+        setConnectionStatus("disconnected");
       } finally {
         setIsConnecting(false);
       }
       return null;
     },
-    [connect, options],
+    [connect, options, setConnectionStatus],
   );
 
   return { connect: handleConnection, isConnecting, error } as const;

package/src/react/native/ui/components/RNImage.tsx

@@ -1,9 +1,8 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import { Image } from "react-native";
 import { SvgXml } from "react-native-svg";
 import type { Theme } from "../../../core/design-system/index.js";
 import { radius } from "../../design-system/index.js";
-import { Skeleton } from "./Skeleton.js";
 
 export type ImageInfo = {
   size: number;
@@ -34,7 +33,6 @@ function getImage(data: string): {
 
 export const RNImage = (props: ImageInfo) => {
   const { data, size, color, placeholder } = props;
-  const [loading, setLoading] = useState(true);
   if (!data) {
     return null;
   }
@@ -44,22 +42,12 @@ export const RNImage = (props: ImageInfo) => {
     case "image":
       return (
         <>
-          {loading && (
-            <Skeleton
-              theme={props.theme}
-              style={{ width: size, height: size }}
-            />
-          )}
           <Image
             source={{ uri: image }}
             loadingIndicatorSource={{ uri: placeholder }}
             width={size}
             height={size}
-            onLoadStart={() => setLoading(true)}
-            onLoadEnd={() => setLoading(false)}
-            style={[
-              { borderRadius: radius.md, display: loading ? "none" : "flex" },
-            ]}
+            style={[{ borderRadius: radius.md }]}
           />
         </>
       );

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

@@ -5,14 +5,13 @@ import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { getStoredActiveWalletId } from "../../../../wallets/manager/index.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import { getLastAuthProvider } from "../../../core/utils/storage.js";
+import { getWalletIcon } from "../../../core/utils/walletIcon.js";
 import {
   APPLE_ICON,
   DISCORD_ICON,
-  EMAIL_ICON,
   FACEBOOK_ICON,
   FARCASTER_ICON,
   GOOGLE_ICON,
-  PHONE_ICON,
   TELEGRAM_ICON,
   WALLET_ICON,
 } from "../icons/svgs.js";
@@ -67,9 +66,9 @@ export const WalletImage = (props: {
 export function getAuthProviderImage(lastAuthProvider: string | null): string {
   switch (lastAuthProvider) {
     case "phone":
-      return PHONE_ICON;
     case "email":
-      return EMAIL_ICON;
+    case "passkey":
+      return getWalletIcon(lastAuthProvider);
     case "google":
       return GOOGLE_ICON;
     case "apple":
@@ -83,6 +82,6 @@ export function getAuthProviderImage(lastAuthProvider: string | null): string {
     case "telegram":
       return TELEGRAM_ICON;
     default:
-      return WALLET_ICON;
+      return getWalletIcon("");
   }
 }

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

@@ -182,7 +182,7 @@ export function ConnectButton(props: ConnectButtonProps) {
 }
 
 const screenHeight = Dimensions.get("window").height;
-const modalHeight = 480;
+const modalHeight = 520;
 const screenWidth = Dimensions.get("window").width;
 
 const styles = StyleSheet.create({

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

@@ -1,6 +1,7 @@
 import { useCallback, useState } from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import { SvgXml } from "react-native-svg";
+import type { Chain } from "../../../../chains/types.js";
 import type { MultiStepAuthProviderType } from "../../../../wallets/in-app/core/authentication/types.js";
 import type { InAppWalletAuth } from "../../../../wallets/in-app/core/wallet/types.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
@@ -14,6 +15,7 @@ import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js"
 import { useDisconnect } from "../../../core/hooks/wallets/useDisconnect.js";
 import { useConnectionManager } from "../../../core/providers/connection-manager.js";
 import { useWalletInfo } from "../../../core/utils/wallet.js";
+import { getWalletIcon } from "../../../core/utils/walletIcon.js";
 import { radius, spacing } from "../../design-system/index.js";
 import { getDefaultWallets } from "../../wallets/defaultWallets.js";
 import { type ContainerType, Header } from "../components/Header.js";
@@ -26,10 +28,10 @@ import { ThemedButton, ThemedButtonWithIcon } from "../components/button.js";
 import { Spacer } from "../components/spacer.js";
 import { ThemedText } from "../components/text.js";
 import { ThemedView } from "../components/view.js";
-import { TW_ICON, WALLET_ICON } from "../icons/svgs.js";
+import { TW_ICON } from "../icons/svgs.js";
 import { ErrorView } from "./ErrorView.js";
 import { ExternalWalletsList } from "./ExternalWalletsList.js";
-import { InAppWalletUI, OtpLogin } from "./InAppWalletUI.js";
+import { InAppWalletUI, OtpLogin, PasskeyView } from "./InAppWalletUI.js";
 import WalletLoadingThumbnail from "./WalletLoadingThumbnail.js";
 
 export type ModalState =
@@ -37,6 +39,7 @@ export type ModalState =
   | { screen: "connecting"; wallet: Wallet; authMethod?: InAppWalletAuth }
   | { screen: "error"; error: string }
   | { screen: "otp"; auth: MultiStepAuthProviderType; wallet: Wallet<"inApp"> }
+  | { screen: "passkey"; wallet: Wallet<"inApp"> }
   | { screen: "external_wallets" }
   | { screen: "auth" };
 
@@ -112,7 +115,7 @@ export function ConnectModal(
   const connector = useCallback(
     async (args: {
       wallet: Wallet;
-      connectFn: () => Promise<Wallet>;
+      connectFn: (chain?: Chain) => Promise<Wallet>;
       authMethod?: InAppWalletAuth;
     }) => {
       setModalState({
@@ -121,7 +124,7 @@ export function ConnectModal(
         authMethod: args.authMethod,
       });
       try {
-        const w = await args.connectFn();
+        const w = await args.connectFn(props.chain);
         await connectionManager.connect(w, {
           client,
           accountAbstraction,
@@ -155,6 +158,7 @@ export function ConnectModal(
       onClose,
       siweAuth,
       connectionManager,
+      props.chain,
     ],
   );
 
@@ -248,6 +252,37 @@ export function ConnectModal(
       );
       break;
     }
+    case "passkey": {
+      content = (
+        <>
+          <Header
+            theme={theme}
+            onClose={props.onClose}
+            containerType={containerType}
+            onBack={() => setModalState({ screen: "base" })}
+            title={props.connectModal?.title || "Sign in"}
+          />
+          {containerType === "modal" ? (
+            <View style={{ flex: 1 }} />
+          ) : (
+            <Spacer size="lg" />
+          )}
+          <PasskeyView
+            wallet={modalState.wallet}
+            client={client}
+            setScreen={setModalState}
+            theme={theme}
+            connector={connector}
+          />
+          {containerType === "modal" ? (
+            <View style={{ flex: 1 }} />
+          ) : (
+            <Spacer size="md" />
+          )}
+        </>
+      );
+      break;
+    }
     case "auth": {
       content = (
         <>
@@ -339,7 +374,7 @@ export function ConnectModal(
                     <OrDivider theme={theme} />
                     <ThemedButtonWithIcon
                       theme={theme}
-                      icon={WALLET_ICON}
+                      icon={getWalletIcon("")}
                       title="Connect a wallet"
                       onPress={() =>
                         setModalState({ screen: "external_wallets" })
@@ -412,7 +447,12 @@ function WalletLoadingView({
         paddingVertical: spacing.xl,
       }}
     >
-      <WalletLoadingThumbnail theme={theme} imageSize={100} animate={true}>
+      <WalletLoadingThumbnail
+        theme={theme}
+        imageSize={100}
+        animate={true}
+        roundLoader={authProvider === "passkey"}
+      >
         {authProvider ? (
           <View
             style={{

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

@@ -173,7 +173,7 @@ const AccountHeader = (props: ConnectedModalProps) => {
     <View style={styles.accountHeaderContainer}>
       <WalletImage
         theme={theme}
-        size={64}
+        size={70}
         wallet={wallet}
         ensAvatar={ensAvatarQuery.data}
       />
@@ -287,7 +287,7 @@ const Transactions = (props: ConnectedModalPropsInner) => {
     </TouchableOpacity>
   );
 };
- */
+*/
 
 const ViewFunds = (props: ConnectedModalPropsInner) => {
   const { theme, setModalState } = props;

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

@@ -6,6 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from "react-native";
+import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { Theme } from "../../../core/design-system/index.js";
@@ -20,7 +21,7 @@ export type ExternalWalletsUiProps = {
   client: ThirdwebClient;
   connector: (args: {
     wallet: Wallet;
-    connectFn: () => Promise<Wallet>;
+    connectFn: (chain?: Chain) => Promise<Wallet>;
   }) => Promise<void>;
   containerType: ContainerType;
 };
@@ -32,9 +33,10 @@ export function ExternalWalletsList(
   const connectWallet = (wallet: Wallet) => {
     connector({
       wallet,
-      connectFn: async () => {
+      connectFn: async (chain) => {
         await wallet.connect({
           client,
+          chain,
         });
         return wallet;
       },

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

@@ -1,6 +1,7 @@
 import { useMutation } from "@tanstack/react-query";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Alert, StyleSheet, TouchableOpacity, View } from "react-native";
+import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { nativeLocalStorage } from "../../../../utils/storage/nativeStorage.js";
 import type {
@@ -12,6 +13,7 @@ import type {
   InAppWalletSocialAuth,
 } from "../../../../wallets/in-app/core/wallet/types.js";
 import { preAuthenticate } from "../../../../wallets/in-app/native/auth/index.js";
+import { hasStoredPasskey } from "../../../../wallets/in-app/native/auth/passkeys.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import {
   type SocialAuthOption,
@@ -19,6 +21,7 @@ import {
 } from "../../../../wallets/types.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import { setLastAuthProvider } from "../../../core/utils/storage.js";
+import { getWalletIcon } from "../../../core/utils/walletIcon.js";
 import { radius, spacing } from "../../design-system/index.js";
 import { RNImage } from "../components/RNImage.js";
 import { ThemedButton, ThemedButtonWithIcon } from "../components/button.js";
@@ -28,18 +31,18 @@ import { ThemedText } from "../components/text.js";
 import {
   APPLE_ICON,
   DISCORD_ICON,
-  EMAIL_ICON,
   FACEBOOK_ICON,
   FARCASTER_ICON,
   GOOGLE_ICON,
-  PHONE_ICON,
   TELEGRAM_ICON,
 } from "../icons/svgs.js";
 import type { ModalState } from "./ConnectModal.js";
+import { LoadingView } from "./LoadingView.js";
 
 const defaultAuthOptions: InAppWalletAuth[] = [
   "email",
   "phone",
+  "passkey",
   "google",
   "facebook",
   "apple",
@@ -61,7 +64,7 @@ type InAppWalletFormUIProps = {
   setScreen: (screen: ModalState) => void;
   connector: (args: {
     wallet: Wallet;
-    connectFn: () => Promise<Wallet>;
+    connectFn: (chain?: Chain) => Promise<Wallet>;
     authMethod?: InAppWalletAuth;
   }) => Promise<void>;
 };
@@ -90,7 +93,7 @@ export function InAppWalletUI(props: InAppWalletFormUIProps) {
           <ThemedButtonWithIcon
             theme={theme}
             title="Email address"
-            icon={EMAIL_ICON}
+            icon={getWalletIcon("email")}
             onPress={() => setInputMode("email")}
           />
         )
@@ -102,11 +105,21 @@ export function InAppWalletUI(props: InAppWalletFormUIProps) {
           <ThemedButtonWithIcon
             theme={theme}
             title="Phone number"
-            icon={PHONE_ICON}
+            icon={getWalletIcon("phone")}
             onPress={() => setInputMode("phone")}
           />
         )
       ) : null}
+      {authOptions.includes("passkey") ? (
+        <ThemedButtonWithIcon
+          theme={theme}
+          title="Passkey"
+          icon={getWalletIcon("passkey")}
+          onPress={() => {
+            props.setScreen({ screen: "passkey", wallet });
+          }}
+        />
+      ) : null}
     </View>
   );
 }
@@ -120,10 +133,11 @@ function SocialLogin(
   const connectInAppWallet = useCallback(() => {
     connector({
       wallet,
-      connectFn: async () => {
+      connectFn: async (chain) => {
         await wallet.connect({
           client,
           strategy: auth,
+          chain,
         });
         await setLastAuthProvider(auth, nativeLocalStorage);
         return wallet;
@@ -237,13 +251,14 @@ export function OtpLogin(
     if (!verificationCode || !verificationCode) return;
     await connector({
       wallet,
-      connectFn: async () => {
+      connectFn: async (chain) => {
         if (auth.strategy === "phone") {
           await wallet.connect({
             client,
             strategy: auth.strategy,
             phoneNumber: auth.phoneNumber,
             verificationCode,
+            chain,
           });
         } else {
           await wallet.connect({
@@ -251,6 +266,7 @@ export function OtpLogin(
             strategy: auth.strategy,
             email: auth.email,
             verificationCode,
+            chain,
           });
         }
         await setLastAuthProvider(auth.strategy, nativeLocalStorage);
@@ -297,6 +313,135 @@ export function OtpLogin(
   );
 }
 
+export function PasskeyView(props: InAppWalletFormUIProps) {
+  const { theme, wallet, client } = props;
+
+  const [screen, setScreen] = useState<
+    "select" | "login" | "loading" | "signup"
+  >("loading");
+
+  const triggered = useRef(false);
+  useEffect(() => {
+    if (triggered.current) {
+      return;
+    }
+    triggered.current = true;
+    hasStoredPasskey(client)
+      .then((isStored) => {
+        if (isStored) {
+          setScreen("login");
+        } else {
+          setScreen("select");
+        }
+      })
+      .catch(() => {
+        setScreen("select");
+      });
+  }, [client]);
+
+  if (screen === "loading") {
+    return <LoadingView theme={theme} />;
+  }
+
+  if (screen === "login" || screen === "signup") {
+    return (
+      <PasskeyLoadingView
+        {...props}
+        type={screen === "login" ? "sign-in" : "sign-up"}
+      />
+    );
+  }
+
+  return (
+    wallet && (
+      <View
+        style={{
+          flexDirection: "column",
+          flex: 1,
+          alignItems: "center",
+          justifyContent: "center",
+          padding: spacing.xl,
+        }}
+      >
+        <RNImage theme={theme} size={90} data={getWalletIcon("passkey")} />
+        <Spacer size="xxl" />
+        <ThemedButton
+          theme={theme}
+          variant="accent"
+          style={{ width: "100%" }}
+          onPress={async () => {
+            setScreen("signup");
+          }}
+        >
+          <ThemedText
+            theme={theme}
+            type="defaultSemiBold"
+            style={{
+              color: theme.colors.accentButtonText,
+            }}
+          >
+            Create a Passkey
+          </ThemedText>
+        </ThemedButton>
+        <Spacer size="md" />
+        <ThemedButton
+          theme={theme}
+          variant="secondary"
+          style={{ width: "100%" }}
+          onPress={async () => {
+            setScreen("login");
+          }}
+        >
+          <ThemedText
+            theme={theme}
+            type="defaultSemiBold"
+            style={{
+              color: theme.colors.secondaryButtonText,
+            }}
+          >
+            I have a Passkey
+          </ThemedText>
+        </ThemedButton>
+      </View>
+    )
+  );
+}
+
+function PasskeyLoadingView(
+  props: InAppWalletFormUIProps & {
+    type: "sign-in" | "sign-up";
+  },
+) {
+  const { theme, type, wallet, client, connector } = props;
+
+  const triggered = useRef(false);
+  useEffect(() => {
+    if (triggered.current) {
+      return;
+    }
+    triggered.current = true;
+    const connectInAppWallet = async (type: "sign-in" | "sign-up") => {
+      await connector({
+        wallet,
+        connectFn: async (chain) => {
+          await wallet.connect({
+            client,
+            strategy: "passkey",
+            type,
+            chain,
+          });
+          await setLastAuthProvider("passkey", nativeLocalStorage);
+          return wallet;
+        },
+        authMethod: "passkey",
+      });
+    };
+    connectInAppWallet(type);
+  }, [client, type, wallet, connector]);
+
+  return <LoadingView theme={theme} />;
+}
+
 const styles = StyleSheet.create({
   container: {
     flexDirection: "column",

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

@@ -0,0 +1,29 @@
+import { StyleSheet, View } from "react-native";
+import type { Theme } from "../../../core/design-system/index.js";
+import { spacing } from "../../design-system/index.js";
+import { ThemedSpinner } from "../components/spinner.js";
+
+export type LoadingViewProps = {
+  theme: Theme;
+};
+
+export const LoadingView = (props: LoadingViewProps) => {
+  const { theme } = props;
+
+  return (
+    <View style={styles.container}>
+      <ThemedSpinner size="large" color={theme.colors.accentText} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.xxl,
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: spacing.lg,
+  },
+});

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

@@ -32,7 +32,7 @@ export const ReceiveScreen = (props: ReceiveScreenProps) => {
       />
       <View style={styles.container}>
         {/* TODO (rn) QR code scanning */}
-        <WalletImage theme={theme} wallet={wallet} size={72} />
+        <WalletImage theme={theme} wallet={wallet} size={80} />
         <Spacer size="lg" />
         <View
           style={[