thirdweb 5.46.0-nightly-814024ae249141ad1446ce7f21793b1d37b95d13-20240814000405 → 5.46.0-nightly-d6e4898458ae0b7db99acb8a44f0730c18d6bdd9-20240815000344

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={[

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}
     />
   );
 }