thirdweb 5.31.1-nightly-a1d6a3c93e9a7b0433076a3e321183b09cfc0054-20240702000343 → 5.32.0-nightly-931cca3a7e8f3946bdb7e40880333790387d4cef-20240702071901

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

@@ -0,0 +1,162 @@
+import { useState } from "react";
+import {
+  Image,
+  Linking,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import type { Theme } from "../../../core/design-system/index.js";
+import { useWalletImage, useWalletInfo } from "../../../core/utils/wallet.js";
+import { spacing } from "../../design-system/index.js";
+import type { useConnect } from "../../hooks/wallets/useConnect.js";
+import type { ContainerType } from "../components/Header.js";
+import { Skeleton } from "../components/Skeleton.js";
+import { ThemedSpinner } from "../components/spinner.js";
+import { ThemedText } from "../components/text.js";
+
+export type ExternalWalletsUiProps = {
+  theme: Theme;
+  client: ThirdwebClient;
+  connectMutation: ReturnType<typeof useConnect>;
+  containerType: ContainerType;
+};
+
+export function ExternalWalletsList(
+  props: ExternalWalletsUiProps & { externalWallets: Wallet[] },
+) {
+  const { connectMutation, client, theme } = props;
+  const [selectedWallet, setSelectedWallet] = useState<Wallet>();
+
+  const connectWallet = (wallet: Wallet) => {
+    setSelectedWallet(wallet);
+    connectMutation.connect(async () => {
+      await wallet.connect({
+        client,
+      });
+      return wallet;
+    });
+  };
+
+  return (
+    <View style={styles.container}>
+      <ScrollView
+        style={{
+          flex: 1,
+          paddingHorizontal: props.containerType === "modal" ? spacing.lg : 0,
+          paddingBottom: spacing.md,
+        }}
+      >
+        <View style={{ flexDirection: "column", gap: spacing.md }}>
+          {props.externalWallets.map((wallet) => (
+            <ExternalWalletRow
+              key={wallet.id}
+              wallet={wallet}
+              connectWallet={connectWallet}
+              theme={theme}
+              isConnecting={
+                connectMutation.isConnecting && wallet.id === selectedWallet?.id
+              }
+            />
+          ))}
+        </View>
+      </ScrollView>
+      <NewToWallets theme={props.theme} containerType={props.containerType} />
+    </View>
+  );
+}
+
+function ExternalWalletRow(props: {
+  theme: Theme;
+  wallet: Wallet;
+  isConnecting: boolean;
+  connectWallet: (wallet: Wallet) => void;
+}) {
+  const { wallet, theme, isConnecting, connectWallet } = props;
+  const imageQuery = useWalletImage(wallet.id);
+  const infoQuery = useWalletInfo(wallet.id);
+  return (
+    <TouchableOpacity style={styles.row} onPress={() => connectWallet(wallet)}>
+      {imageQuery.data ? (
+        isConnecting ? (
+          <View
+            style={{
+              width: 52,
+              height: 52,
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <ThemedSpinner color={theme.colors.primaryText} />
+          </View>
+        ) : (
+          <Image
+            source={{ uri: imageQuery.data ?? "" }}
+            style={{ width: 52, height: 52, borderRadius: 6 }}
+          />
+        )
+      ) : (
+        <Skeleton
+          theme={theme}
+          style={{
+            width: 52,
+            height: 52,
+          }}
+        />
+      )}
+      <ThemedText theme={theme} type="subtitle">
+        {infoQuery.data?.name || ""}
+      </ThemedText>
+    </TouchableOpacity>
+  );
+}
+
+function NewToWallets({
+  theme,
+  containerType,
+}: { theme: Theme; containerType: ContainerType }) {
+  return (
+    <View
+      style={[
+        styles.row,
+        {
+          borderTopWidth: 1,
+          borderColor: theme.colors.borderColor,
+          paddingVertical: spacing.md,
+          paddingHorizontal: containerType === "modal" ? spacing.lg : 0,
+        },
+      ]}
+    >
+      <ThemedText theme={theme} type="subtext">
+        New to wallets?
+      </ThemedText>
+      <View style={{ flex: 1 }} />
+      <ThemedText
+        type="subtext"
+        style={{ color: theme.colors.primaryText }}
+        theme={theme}
+        onPress={() =>
+          Linking.openURL("https://blog.thirdweb.com/web3-wallet/")
+        }
+      >
+        Get started
+      </ThemedText>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: "column",
+  },
+  row: {
+    flexDirection: "row",
+    gap: spacing.md,
+    justifyContent: "flex-start",
+    alignItems: "center",
+  },
+});

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

@@ -0,0 +1,320 @@
+import { useMutation } from "@tanstack/react-query";
+import { useCallback, useState } from "react";
+import { Alert, StyleSheet, TouchableOpacity, View } from "react-native";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import { nativeLocalStorage } from "../../../../utils/storage/nativeStorage.js";
+import type {
+  MultiStepAuthProviderType,
+  PreAuthArgsType,
+} from "../../../../wallets/in-app/core/authentication/type.js";
+import type {
+  InAppWalletAuth,
+  InAppWalletSocialAuth,
+} from "../../../../wallets/in-app/core/wallet/types.js";
+import { preAuthenticate } from "../../../../wallets/in-app/native/auth/index.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import type { Theme } from "../../../core/design-system/index.js";
+import { setLastAuthProvider } from "../../../core/utils/storage.js";
+import { radius, spacing } from "../../design-system/index.js";
+import type { useConnect } from "../../hooks/wallets/useConnect.js";
+import { RNImage } from "../components/RNImage.js";
+import { ThemedButton, ThemedButtonWithIcon } from "../components/button.js";
+import { ThemedInput, ThemedInputWithSubmit } from "../components/input.js";
+import { Spacer } from "../components/spacer.js";
+import { ThemedSpinner } from "../components/spinner.js";
+import { ThemedText } from "../components/text.js";
+import {
+  APPLE_ICON,
+  EMAIL_ICON,
+  FACEBOOK_ICON,
+  GOOGLE_ICON,
+  PHONE_ICON,
+} from "../icons/svgs.js";
+import type { ModalState } from "./ConnectModal.js";
+
+const defaultAuthOptions: InAppWalletAuth[] = [
+  "email",
+  "phone",
+  "google",
+  "facebook",
+  "apple",
+];
+
+const socialIcons = {
+  google: GOOGLE_ICON,
+  facebook: FACEBOOK_ICON,
+  apple: APPLE_ICON,
+};
+
+type InAppWalletFormUIProps = {
+  client: ThirdwebClient;
+  theme: Theme;
+  wallet: Wallet<"inApp">;
+  setScreen: (screen: ModalState) => void;
+  connectMutation: ReturnType<typeof useConnect>;
+};
+
+export function InAppWalletUI(props: InAppWalletFormUIProps) {
+  const { wallet, theme } = props;
+  const config = wallet.getConfig();
+  const authOptions = config?.auth?.options || defaultAuthOptions;
+  const socialLogins = authOptions.filter(
+    (x) => x === "google" || x === "apple" || x === "facebook",
+  ) as InAppWalletSocialAuth[];
+
+  const [inputMode, setInputMode] = useState<"email" | "phone">("email");
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.row}>
+        {socialLogins.map((auth) => (
+          <SocialLogin key={auth} auth={auth} {...props} />
+        ))}
+      </View>
+      {inputMode === "email" ? (
+        <PreOtpLogin auth="email" {...props} />
+      ) : (
+        <ThemedButtonWithIcon
+          theme={theme}
+          title="Email address"
+          icon={EMAIL_ICON}
+          onPress={() => setInputMode("email")}
+        />
+      )}
+      {inputMode === "phone" ? (
+        <PreOtpLogin auth="phone" {...props} />
+      ) : (
+        <ThemedButtonWithIcon
+          theme={theme}
+          title="Phone number"
+          icon={PHONE_ICON}
+          onPress={() => setInputMode("phone")}
+        />
+      )}
+    </View>
+  );
+}
+
+function SocialLogin(
+  props: InAppWalletFormUIProps & { auth: InAppWalletSocialAuth },
+) {
+  const { theme, wallet, auth, client, connectMutation } = props;
+  // TODO (rn) - move this onPress and state up
+  const strategy = props.auth;
+  const [selectedAuth, setSelectedAuth] = useState<InAppWalletSocialAuth>();
+  const connectInAppWallet = useCallback(() => {
+    setSelectedAuth(strategy);
+    connectMutation.connect(async () => {
+      await wallet.connect({
+        client,
+        strategy: auth,
+      });
+      await setLastAuthProvider(auth, nativeLocalStorage);
+      return wallet;
+    });
+  }, [connectMutation, auth, client, wallet, strategy]);
+
+  return (
+    <View
+      style={[
+        styles.socialIconContainer,
+        { borderColor: theme.colors.borderColor },
+      ]}
+    >
+      {connectMutation.isConnecting && selectedAuth === auth ? (
+        <ThemedSpinner color={theme.colors.primaryText} />
+      ) : (
+        <TouchableOpacity
+          key={strategy}
+          onPress={connectInAppWallet}
+          disabled={connectMutation.isConnecting}
+        >
+          <RNImage theme={theme} size={38} data={socialIcons[auth]} />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}
+
+function PreOtpLogin(
+  props: InAppWalletFormUIProps & {
+    auth: PreAuthArgsType["strategy"];
+  },
+) {
+  const { theme, auth, client, setScreen, wallet } = props;
+  const [phoneOrEmail, setPhoneNumberOrEmail] = useState("");
+
+  const sendCode = useMutation({
+    mutationFn: async (options: {
+      auth: PreAuthArgsType["strategy"];
+      phoneOrEmail: string;
+    }) => {
+      const { auth, phoneOrEmail } = options;
+      if (auth === "phone") {
+        await preAuthenticate({
+          client,
+          strategy: auth,
+          phoneNumber: phoneOrEmail,
+        });
+      } else {
+        await preAuthenticate({
+          client,
+          strategy: auth,
+          email: phoneOrEmail,
+        });
+      }
+    },
+  });
+
+  return (
+    <ThemedInputWithSubmit
+      theme={theme}
+      placeholder={auth === "phone" ? "Phone number" : "Email address"}
+      onChangeText={setPhoneNumberOrEmail}
+      value={phoneOrEmail}
+      keyboardType={auth === "phone" ? "phone-pad" : "email-address"}
+      onSubmit={() =>
+        sendCode.mutate(
+          {
+            auth,
+            phoneOrEmail,
+          },
+          {
+            onSuccess: (_, vars) => {
+              if (vars.auth === "phone") {
+                setScreen({
+                  screen: "otp",
+                  auth: {
+                    strategy: vars.auth,
+                    phoneNumber: vars.phoneOrEmail,
+                  },
+                  wallet,
+                });
+              } else {
+                setScreen({
+                  screen: "otp",
+                  auth: { strategy: vars.auth, email: vars.phoneOrEmail },
+                  wallet,
+                });
+              }
+            },
+            onError: (error) => {
+              // TODO (rn) - handle error toast or input error border/label
+              Alert.alert("Error", error.message);
+            },
+          },
+        )
+      }
+      isSubmitting={sendCode.isPending}
+    />
+  );
+}
+
+export function OtpLogin(
+  props: InAppWalletFormUIProps & {
+    auth: MultiStepAuthProviderType;
+  },
+) {
+  const { theme, auth, wallet, client, connectMutation } = props;
+  const [verificationCode, setVerificationCode] = useState("");
+
+  const connectInAppWallet = async () => {
+    if (!verificationCode || !verificationCode) return;
+    await connectMutation.connect(async () => {
+      if (auth.strategy === "phone") {
+        await wallet.connect({
+          client,
+          strategy: auth.strategy,
+          phoneNumber: auth.phoneNumber,
+          verificationCode,
+        });
+      } else {
+        await wallet.connect({
+          client,
+          strategy: auth.strategy,
+          email: auth.email,
+          verificationCode,
+        });
+      }
+      await setLastAuthProvider(auth.strategy, nativeLocalStorage);
+      return wallet;
+    });
+  };
+
+  return (
+    <>
+      <View
+        style={{
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <ThemedText theme={theme} style={{ color: theme.colors.secondaryText }}>
+          Enter the verification code sent to
+        </ThemedText>
+        <ThemedText theme={theme} type="defaultSemiBold">
+          {auth.strategy === "phone" ? auth.phoneNumber : auth.email}
+        </ThemedText>
+      </View>
+      <Spacer size="xs" />
+      <ThemedInput
+        theme={theme}
+        placeholder="Verification code"
+        onChangeText={setVerificationCode}
+        value={verificationCode}
+        keyboardType="number-pad"
+      />
+      <ThemedButton
+        theme={theme}
+        onPress={connectInAppWallet}
+        variant="accent"
+        disabled={connectMutation.isConnecting}
+      >
+        {connectMutation.isConnecting ? (
+          <ThemedSpinner color={theme.colors.accentButtonText} />
+        ) : (
+          <ThemedText
+            theme={theme}
+            type="defaultSemiBold"
+            style={{ color: theme.colors.accentButtonText }}
+          >
+            Verify
+          </ThemedText>
+        )}
+      </ThemedButton>
+      {connectMutation.error && (
+        <ThemedText
+          theme={theme}
+          type="subtext"
+          style={{ color: theme.colors.danger }}
+        >
+          {connectMutation.error.message}
+        </ThemedText>
+      )}
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "column",
+    gap: spacing.md,
+  },
+  row: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: spacing.md,
+    justifyContent: "space-evenly",
+  },
+  socialIconContainer: {
+    flex: 1,
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    borderStyle: "solid",
+    borderWidth: 1,
+    borderRadius: radius.lg,
+    height: 60,
+  },
+});

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

@@ -0,0 +1,81 @@
+import { StyleSheet, View } from "react-native";
+import { shortenAddress } from "../../../../utils/address.js";
+import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
+import type { Theme } from "../../../core/design-system/index.js";
+import { spacing } from "../../design-system/index.js";
+import { Address } from "../components/Address.js";
+import { type ContainerType, Header } from "../components/Header.js";
+import { WalletImage } from "../components/WalletImage.js";
+import { Spacer } from "../components/spacer.js";
+import { ThemedText } from "../components/text.js";
+
+export type ReceiveScreenProps = {
+  theme: Theme;
+  wallet: Wallet;
+  account: Account;
+  onClose?: () => void;
+  onBack?: () => void;
+  containerType: ContainerType;
+};
+
+export const ReceiveScreen = (props: ReceiveScreenProps) => {
+  const { wallet, account, theme, onClose, onBack, containerType } = props;
+
+  return (
+    <>
+      <Header
+        theme={theme}
+        onClose={onClose}
+        onBack={onBack}
+        containerType={containerType}
+        title="Receive Funds"
+      />
+      <View style={styles.container}>
+        {/* TODO (rn) QR code scanning */}
+        <WalletImage theme={theme} wallet={wallet} size={72} />
+        <Spacer size="lg" />
+        <View
+          style={[
+            styles.addressContainer,
+            { borderColor: theme.colors.borderColor },
+          ]}
+        >
+          <Address
+            account={account}
+            addressOrENS={shortenAddress(account?.address, 8)}
+            theme={theme}
+          />
+        </View>
+        <ThemedText
+          theme={theme}
+          type="subtext"
+          style={{ textAlign: "center" }}
+        >
+          Copy your address to send funds to this wallet
+        </ThemedText>
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.xxl,
+    flexDirection: "column",
+    gap: spacing.md,
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+  },
+  addressContainer: {
+    width: "100%",
+    flexDirection: "row",
+    gap: spacing.sm,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    padding: spacing.md,
+    borderRadius: spacing.lg,
+  },
+});