thirdweb 5.31.1 → 5.32.0-nightly-931cca3a7e8f3946bdb7e40880333790387d4cef-20240702071901

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

@@ -2,6 +2,7 @@ import { nativeLocalStorage } from "../../../../utils/storage/nativeStorage.js";
 import type { AutoConnectProps } from "../../../core/hooks/connection/types.js";
 import { useAutoConnectCore } from "../../../core/hooks/wallets/useAutoConnect.js";
 import { connectionManager } from "../../index.js";
+import { getDefaultWallets } from "../../wallets/defaultWallets.js";
 
 /**
  * Autoconnect the last previously connected wallet.
@@ -23,5 +24,8 @@ import { connectionManager } from "../../index.js";
  * @returns whether the auto connect was successful.
  */
 export function useAutoConnect(props: AutoConnectProps) {
-  return useAutoConnectCore(connectionManager, nativeLocalStorage, props);
+  return useAutoConnectCore(connectionManager, nativeLocalStorage, {
+    ...props,
+    wallets: props.wallets || getDefaultWallets(props),
+  });
 }

package/src/react/native/hooks/wallets/useSendToken.ts

@@ -0,0 +1,29 @@
+import type { ThirdwebClient } from "../../../../client/client.js";
+import { useSendTokenCore } from "../../../core/hooks/wallets/useSendToken.js";
+import { useActiveWallet } from "./useActiveWallet.js";
+
+/**
+ * Send Native or ERC20 tokens from active wallet to given address.
+ * @example
+ * ```tsx
+ * const { mutate: sendToken } = useSendToken(client);
+ *
+ * // send native currency
+ * sendToken({
+ *    receiverAddress: "0x...",
+ *    amount: "0.1",
+ * });
+ *
+ * // send ERC20
+ * sendToken({
+ *   tokenAddress,
+ *   receiverAddress: "0x...",
+ *   amount: "0.5",
+ * });
+ * ```
+ * @wallet
+ */
+export function useSendToken(client: ThirdwebClient) {
+  const wallet = useActiveWallet();
+  return useSendTokenCore(client, wallet);
+}

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

@@ -0,0 +1,52 @@
+import Clipboard from "@react-native-clipboard/clipboard";
+import { useState } from "react";
+import { StyleSheet, TouchableOpacity } from "react-native";
+import type { Account } from "../../../../wallets/interfaces/wallet.js";
+import type { Theme } from "../../../core/design-system/index.js";
+import { spacing } from "../../design-system/index.js";
+import { CHECK, COPY_ICON } from "../icons/svgs.js";
+import { RNImage } from "./RNImage.js";
+import { ThemedText } from "./text.js";
+
+export type AddressProps = {
+  account: Account;
+  theme: Theme;
+  addressOrENS: string;
+};
+
+export const Address = ({ account, theme, addressOrENS }: AddressProps) => {
+  const [copySuccess, setCopySuccess] = useState(false);
+  return (
+    <TouchableOpacity
+      style={styles.addressContainer}
+      onPress={() => {
+        // @ts-ignore - missing native types
+        Clipboard.setString(account.address);
+        setCopySuccess(true);
+        setTimeout(() => {
+          setCopySuccess(false);
+        }, 2500);
+      }}
+    >
+      <ThemedText theme={theme} type="defaultSemiBold">
+        {addressOrENS}
+      </ThemedText>
+      <RNImage
+        theme={theme}
+        data={copySuccess ? CHECK : COPY_ICON}
+        size={15}
+        color={
+          copySuccess ? theme.colors.success : theme.colors.secondaryIconColor
+        }
+      />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  addressContainer: {
+    flexDirection: "row",
+    gap: spacing.sm,
+    alignItems: "center",
+  },
+});

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

@@ -0,0 +1,42 @@
+import { useMemo } from "react";
+import type { Chain } from "../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import { resolveScheme } from "../../../../utils/ipfs.js";
+import type { Theme } from "../../../core/design-system/index.js";
+import { useChainQuery } from "../../../core/hooks/others/useChainQuery.js";
+import { CHAIN_ICON } from "../icons/svgs.js";
+import { RNImage } from "./RNImage.js";
+
+export type ChainIconProps = {
+  theme: Theme;
+  size: number;
+  client: ThirdwebClient;
+  chain?: Chain;
+};
+
+export const ChainIcon = (props: ChainIconProps) => {
+  const chainQuery = useChainQuery(props.chain);
+  const data = useMemo(() => {
+    const url = chainQuery?.data?.icon?.url;
+    if (!url) {
+      return CHAIN_ICON;
+    }
+    try {
+      return resolveScheme({
+        uri: url,
+        client: props.client,
+      });
+    } catch {
+      return CHAIN_ICON;
+    }
+  }, [props, chainQuery?.data?.icon?.url]);
+  return (
+    <RNImage
+      theme={props.theme}
+      size={props.size}
+      data={data}
+      placeholder={CHAIN_ICON}
+      color={props.theme.colors.secondaryIconColor}
+    />
+  );
+};

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

@@ -0,0 +1,84 @@
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+import type { Theme } from "../../../core/design-system/index.js";
+import { spacing } from "../../design-system/index.js";
+import { BACK_ICON, CLOSE_ICON } from "../icons/svgs.js";
+import { RNImage } from "./RNImage.js";
+import { ThemedText } from "./text.js";
+
+export type ContainerType = "modal" | "embed";
+
+export function Header({
+  theme,
+  title,
+  onClose,
+  onBack,
+  containerType,
+}: {
+  theme: Theme;
+  title?: string;
+  onClose?: () => void;
+  onBack?: () => void;
+  containerType: ContainerType;
+}) {
+  if (containerType === "embed") {
+    return onBack ? (
+      <TouchableOpacity
+        onPress={onBack}
+        style={{
+          flexDirection: "row",
+          gap: spacing.sm,
+          alignItems: "center",
+          paddingTop: spacing.lg,
+        }}
+      >
+        <RNImage
+          theme={theme}
+          data={BACK_ICON}
+          size={14}
+          color={theme.colors.secondaryIconColor}
+        />
+        <ThemedText theme={theme} type="subtext">
+          Back
+        </ThemedText>
+      </TouchableOpacity>
+    ) : null;
+  }
+
+  return (
+    <View style={styles.headerModal}>
+      {onBack && (
+        <TouchableOpacity onPress={onBack}>
+          <RNImage
+            theme={theme}
+            data={BACK_ICON}
+            size={24}
+            color={theme.colors.secondaryIconColor}
+          />
+        </TouchableOpacity>
+      )}
+      <ThemedText theme={theme} type="title">
+        {title ? title : "Sign in"}
+      </ThemedText>
+      {onClose && (
+        <TouchableOpacity onPress={onClose}>
+          <RNImage
+            theme={theme}
+            data={CLOSE_ICON}
+            size={24}
+            color={theme.colors.secondaryIconColor}
+          />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  headerModal: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: spacing.lg,
+    paddingTop: spacing.lg,
+  },
+});

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

@@ -0,0 +1,71 @@
+import { useMemo, useState } 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;
+  theme: Theme;
+  data?: string | null;
+  placeholder?: string;
+  color?: string;
+};
+
+function getImage(data: string): {
+  image: string;
+  type: "xml" | "image" | "url";
+} {
+  if (data.startsWith("data:image/svg+xml;base64,")) {
+    const image = globalThis.atob(
+      data.replace("data:image/svg+xml;base64,", ""),
+    );
+    return { image, type: "xml" };
+  }
+  if (data.startsWith("data:image/")) {
+    return { image: data, type: "image" };
+  }
+  if (data.startsWith("<svg")) {
+    return { image: data, type: "xml" };
+  }
+  return { image: data, type: "url" };
+}
+
+export const RNImage = (props: ImageInfo) => {
+  const { data, size, color, placeholder } = props;
+  const [loading, setLoading] = useState(true);
+  if (!data) {
+    return null;
+  }
+  const { image, type } = useMemo(() => getImage(data), [data]);
+  switch (type) {
+    case "url":
+    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" },
+            ]}
+          />
+        </>
+      );
+    case "xml":
+      return <SvgXml xml={image} width={size} height={size} color={color} />;
+    default:
+      return null;
+  }
+};

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

@@ -0,0 +1,93 @@
+import type React from "react";
+import { useEffect, useRef } from "react";
+import {
+  Animated,
+  Dimensions,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from "react-native";
+import type { Theme } from "../../../core/design-system/index.js";
+import { radius } from "../../design-system/index.js";
+
+const { width } = Dimensions.get("window");
+
+interface SkeletonLoaderProps {
+  theme: Theme;
+  color?: string;
+  style?: ViewStyle;
+}
+
+export const Skeleton: React.FC<SkeletonLoaderProps> = ({
+  style,
+  color,
+  theme,
+}) => {
+  const translateX = useRef(new Animated.Value(-width));
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(translateX.current, {
+          toValue: width,
+          duration: 2500,
+          useNativeDriver: true,
+        }),
+        Animated.timing(translateX.current, {
+          toValue: -width,
+          duration: 0,
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+    animation.start();
+
+    return () => animation.stop();
+  }, []);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: color || theme.colors.borderColor },
+        style,
+      ]}
+    >
+      <View style={styles.skeleton} />
+      <Animated.View
+        style={[
+          styles.gradient,
+          {
+            transform: [{ translateX: translateX.current }],
+          },
+        ]}
+      >
+        <View style={styles.innerGradient} />
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+    borderRadius: radius.lg,
+  },
+  skeleton: {
+    height: "100%",
+    width: "100%",
+  },
+  gradient: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    width: "100%",
+  },
+  innerGradient: {
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(255,255,255,0.5)",
+    opacity: 0.3,
+    transform: [{ skewX: "-20deg" }],
+  },
+});

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

@@ -0,0 +1,31 @@
+"use client";
+import type { Chain } from "../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import type { Theme } from "../../../core/design-system/index.js";
+import type { TokenInfo } from "../../../core/utils/defaultTokens.js";
+import { genericTokenIcon } from "../../../core/utils/socialIcons.js";
+import { ChainIcon } from "./ChainIcon.js";
+import { RNImage } from "./RNImage.js";
+
+// Note: Must not use useConnectUI here
+
+/**
+ * @internal
+ */
+export function TokenIcon(props: {
+  theme: Theme;
+  size: number;
+  token?: TokenInfo;
+  chain?: Chain;
+  client: ThirdwebClient;
+}) {
+  return props.token ? (
+    <RNImage
+      theme={props.theme}
+      data={props.token?.icon || genericTokenIcon}
+      size={props.size}
+    />
+  ) : (
+    <ChainIcon {...props} />
+  );
+}

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

@@ -0,0 +1,81 @@
+import { useQuery } from "@tanstack/react-query";
+import { nativeLocalStorage } from "../../../../utils/storage/nativeStorage.js";
+import { getWalletInfo } from "../../../../wallets/__generated__/getWalletInfo.js";
+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 {
+  APPLE_ICON,
+  EMAIL_ICON,
+  FACEBOOK_ICON,
+  GOOGLE_ICON,
+  PHONE_ICON,
+  WALLET_ICON,
+} from "../icons/svgs.js";
+import { RNImage } from "./RNImage.js";
+
+export const WalletImage = (props: {
+  theme: Theme;
+  wallet: Wallet;
+  size: number;
+  ensAvatar?: string | null;
+}) => {
+  const { wallet, ensAvatar, size } = props;
+
+  const { data: imageData } = useQuery({
+    queryKey: ["wallet-image", wallet.id, wallet.getAccount()?.address],
+    queryFn: async (): Promise<string> => {
+      let activeEOAId = wallet.id;
+      if (wallet.id === "smart") {
+        // TODO (rn) investigate why the first render this returns null from storage
+        const storedId = await getStoredActiveWalletId(nativeLocalStorage);
+        if (storedId) {
+          activeEOAId = storedId;
+        } else {
+          throw new Error("No active EOA wallet");
+        }
+      }
+      let imageData: string;
+      if (
+        activeEOAId === "inApp" &&
+        (wallet.id === "inApp" || wallet.id === "smart")
+      ) {
+        const lastAuthProvider = await getLastAuthProvider(nativeLocalStorage);
+        switch (lastAuthProvider) {
+          case "phone":
+            imageData = PHONE_ICON;
+            break;
+          case "email":
+            imageData = EMAIL_ICON;
+            break;
+          case "google":
+            imageData = GOOGLE_ICON;
+            break;
+          case "apple":
+            imageData = APPLE_ICON;
+            break;
+          case "facebook":
+            imageData = FACEBOOK_ICON;
+            break;
+          default:
+            imageData = WALLET_ICON;
+            break;
+        }
+        return imageData;
+      }
+      try {
+        const externalWalletImage = await getWalletInfo(activeEOAId, true);
+        if (externalWalletImage) {
+          return externalWalletImage;
+        }
+      } catch {}
+
+      return WALLET_ICON;
+    },
+    enabled: !ensAvatar,
+  });
+
+  const data = ensAvatar || imageData || WALLET_ICON;
+  return <RNImage theme={props.theme} data={data} size={size} />;
+};

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

@@ -2,27 +2,36 @@ import {
   StyleSheet,
   TouchableOpacity,
   type TouchableOpacityProps,
+  View,
 } from "react-native";
 import type { Theme } from "../../../core/design-system/index.js";
+import { radius, spacing } from "../../design-system/index.js";
+import { RNImage } from "./RNImage.js";
+import { ThemedText } from "./text.js";
 
 export type ThemedButtonProps = TouchableOpacityProps & {
   theme: Theme;
-  variant?: "primary" | "secondary";
+  variant?: "primary" | "secondary" | "accent";
 };
 
 export function ThemedButton(props: ThemedButtonProps) {
   const variant = props.variant ?? "primary";
-  const bg = props.theme.colors.primaryButtonBg;
-  const { style: styleOverride, ...restProps } = props;
+  const { style: styleOverride, theme, ...restProps } = props;
   return (
     <TouchableOpacity
       activeOpacity={0.5}
       style={[
         styles.button,
         {
-          borderColor: variant === "secondary" ? bg : "transparent",
+          borderColor:
+            variant === "secondary" ? theme.colors.borderColor : "transparent",
           borderWidth: variant === "secondary" ? 1 : 0,
-          backgroundColor: variant === "secondary" ? "transparent" : bg,
+          backgroundColor:
+            variant === "secondary"
+              ? "transparent"
+              : variant === "accent"
+                ? props.theme.colors.accentButtonBg
+                : props.theme.colors.primaryButtonBg,
         },
         styleOverride,
       ]}
@@ -33,13 +42,36 @@ export function ThemedButton(props: ThemedButtonProps) {
   );
 }
 
+export function ThemedButtonWithIcon(
+  props: ThemedButtonProps & {
+    title: string;
+    icon: string;
+  },
+) {
+  const { theme, title, icon, onPress } = props;
+  return (
+    <ThemedButton theme={theme} variant="secondary" onPress={onPress}>
+      <View
+        style={{
+          flexDirection: "row",
+          gap: spacing.md,
+          paddingLeft: spacing.sm,
+          alignContent: "center",
+          width: "100%",
+        }}
+      >
+        <RNImage theme={theme} size={24} data={icon} />
+        <ThemedText theme={theme}>{title}</ThemedText>
+      </View>
+    </ThemedButton>
+  );
+}
+
 const styles = StyleSheet.create({
   button: {
-    flex: 1,
     flexDirection: "row",
-    gap: 8,
-    padding: 12,
-    borderRadius: 6,
+    padding: spacing.md,
+    borderRadius: radius.lg,
     justifyContent: "center",
     alignItems: "center",
   },