thirdweb 5.31.1 → 5.32.0

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,
+  },
+});

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

@@ -0,0 +1,238 @@
+import { useState } from "react";
+import { StyleSheet, View } from "react-native";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import type { Theme } from "../../../core/design-system/index.js";
+import { useChainQuery } from "../../../core/hooks/others/useChainQuery.js";
+import type {
+  SupportedTokens,
+  TokenInfo,
+} from "../../../core/utils/defaultTokens.js";
+import { radius, spacing } from "../../design-system/index.js";
+import { useActiveAccount } from "../../hooks/wallets/useActiveAccount.js";
+import { useActiveWalletChain } from "../../hooks/wallets/useActiveWalletChain.js";
+import { useSendToken } from "../../hooks/wallets/useSendToken.js";
+import { type ContainerType, Header } from "../components/Header.js";
+import { ThemedButton } from "../components/button.js";
+import { ThemedInput } from "../components/input.js";
+import { Spacer } from "../components/spacer.js";
+import { ThemedSpinner } from "../components/spinner.js";
+import { ThemedText } from "../components/text.js";
+import { ErrorView } from "./ErrorView.js";
+import { SuccessView } from "./SuccessView.js";
+import { TokenListScreen, TokenRow } from "./TokenListScreen.js";
+
+export type SendScreenProps = {
+  theme: Theme;
+  client: ThirdwebClient;
+  onClose?: () => void;
+  onBack?: () => void;
+  containerType: ContainerType;
+  supportedTokens?: SupportedTokens;
+};
+
+export const SendScreen = (props: SendScreenProps) => {
+  const { theme, client, onClose, onBack, containerType, supportedTokens } =
+    props;
+  const [receiverAddress, setReceiverAddress] = useState("");
+  const [amount, setAmount] = useState("0");
+  const [selectedToken, setSelectedToken] = useState<TokenInfo>();
+  const account = useActiveAccount();
+  const chain = useActiveWalletChain();
+  const chainIfo = useChainQuery(chain);
+  const sendMutation = useSendToken(client);
+  const [screen, setScreen] = useState<
+    "base" | "tokenList" | "success" | "error"
+  >("base");
+
+  const handleTokenClicked = () => {
+    setScreen("tokenList");
+  };
+
+  const handleSend = async () => {
+    sendMutation.mutate(
+      {
+        amount,
+        receiverAddress,
+        tokenAddress: selectedToken?.address,
+      },
+      {
+        onSuccess() {
+          setScreen("success");
+        },
+        onError() {
+          setScreen("error");
+        },
+      },
+    );
+  };
+
+  if (screen === "success") {
+    return (
+      <>
+        <Header
+          theme={theme}
+          onClose={onClose}
+          onBack={() => setScreen("base")}
+          containerType={containerType}
+          title="Funds Sent"
+        />
+        <Spacer size="xl" />
+        <View style={{ flex: 1 }}>
+          <SuccessView theme={theme} title="Transaction Successful" />
+        </View>
+      </>
+    );
+  }
+
+  if (screen === "error") {
+    return (
+      <>
+        <Header
+          theme={theme}
+          onClose={onClose}
+          onBack={() => setScreen("base")}
+          containerType={containerType}
+          title="Error Sending Funds"
+        />
+        <Spacer size="xl" />
+        <View style={{ flex: 1 }}>
+          <ErrorView
+            theme={theme}
+            title={sendMutation.error?.message || "Unknown error"}
+          />
+        </View>
+      </>
+    );
+  }
+
+  if (screen === "tokenList") {
+    return (
+      <>
+        <Header
+          theme={theme}
+          onClose={onClose}
+          onBack={() => setScreen("base")}
+          containerType={containerType}
+          title="Token to Send"
+        />
+        <Spacer size="xl" />
+        <View style={{ flex: 1 }}>
+          <TokenListScreen
+            theme={theme}
+            client={client}
+            supportedTokens={supportedTokens}
+            onTokenSelected={(t) => {
+              setSelectedToken(t);
+              setScreen("base");
+            }}
+          />
+        </View>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Header
+        theme={theme}
+        onClose={onClose}
+        onBack={onBack}
+        containerType={containerType}
+        title="Send Funds"
+      />
+      <View style={styles.container}>
+        <View style={styles.inputContainer}>
+          <ThemedText theme={theme} type="subtext">
+            Token
+          </ThemedText>
+          <View
+            style={{
+              borderColor: theme.colors.borderColor,
+              borderWidth: 1,
+              paddingHorizontal: spacing.md,
+              paddingVertical: spacing.smd,
+              borderRadius: radius.lg,
+            }}
+          >
+            <TokenRow
+              theme={theme}
+              client={client}
+              address={account?.address}
+              chain={chain}
+              token={selectedToken}
+              onTokenSelected={handleTokenClicked}
+            />
+          </View>
+        </View>
+        <View style={styles.inputContainer}>
+          <ThemedText theme={theme} type="subtext">
+            Send to
+          </ThemedText>
+          <ThemedInput
+            theme={theme}
+            onChangeText={setReceiverAddress}
+            value={receiverAddress}
+            placeholder="0x... / ENS name"
+            textContentType="URL"
+            keyboardType="url"
+            autoCapitalize="none"
+          />
+        </View>
+        <View style={styles.inputContainer}>
+          <ThemedText theme={theme} type="subtext">
+            Amount
+          </ThemedText>
+          <ThemedInput
+            theme={theme}
+            onChangeText={setAmount}
+            value={amount}
+            inputMode="numeric"
+            rightView={
+              <ThemedText
+                theme={theme}
+                type="subtext"
+                style={{ marginRight: spacing.md }}
+              >
+                {selectedToken?.symbol || chainIfo.data?.nativeCurrency?.symbol}
+              </ThemedText>
+            }
+          />
+        </View>
+        <View style={styles.inputContainer}>
+          <ThemedButton
+            theme={theme}
+            variant="accent"
+            onPress={handleSend}
+            disabled={sendMutation.isPending}
+          >
+            {sendMutation.isPending ? (
+              <ThemedSpinner color={theme.colors.accentButtonText} />
+            ) : (
+              <ThemedText
+                theme={theme}
+                type="defaultSemiBold"
+                style={{
+                  color: theme.colors.accentButtonText,
+                }}
+              >
+                Send
+              </ThemedText>
+            )}
+          </ThemedButton>
+        </View>
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.lg,
+    flexDirection: "column",
+    gap: spacing.md,
+  },
+  inputContainer: {
+    gap: spacing.sm,
+  },
+});

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

@@ -0,0 +1,44 @@
+import { StyleSheet, View } from "react-native";
+import type { Theme } from "../../../core/design-system/index.js";
+import { spacing } from "../../design-system/index.js";
+import { RNImage } from "../components/RNImage.js";
+import { ThemedText } from "../components/text.js";
+import { CHECK_CIRCLE } from "../icons/svgs.js";
+
+export type SuccessViewProps = {
+  theme: Theme;
+  title: string;
+};
+
+export const SuccessView = (props: SuccessViewProps) => {
+  const { theme, title } = props;
+
+  return (
+    <View style={styles.container}>
+      <RNImage
+        theme={theme}
+        data={CHECK_CIRCLE}
+        size={64}
+        color={theme.colors.success}
+      />
+      <ThemedText
+        type="defaultSemiBold"
+        theme={theme}
+        style={{ color: theme.colors.success, textAlign: "center" }}
+      >
+        {title}
+      </ThemedText>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.xxl,
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: spacing.lg,
+  },
+});