thirdweb 5.31.1 → 5.32.0

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",
   },

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

@@ -0,0 +1,128 @@
+import { useState } from "react";
+import {
+  StyleSheet,
+  TextInput,
+  type TextInputProps,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { SvgXml } from "react-native-svg";
+import type { Theme } from "../../../core/design-system/index.js";
+import { radius, spacing } from "../../design-system/index.js";
+import { RIGHT_ARROW } from "../icons/svgs.js";
+import { ThemedSpinner } from "./spinner.js";
+
+export type ThemedInputProps = {
+  theme: Theme;
+  rightView?: React.ReactNode;
+} & TextInputProps;
+
+export function ThemedInput(props: ThemedInputProps) {
+  const { theme, rightView } = props;
+  const [isFocused, setIsFocused] = useState(false);
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          borderColor: isFocused
+            ? theme.colors.accentButtonBg
+            : theme.colors.borderColor,
+        },
+      ]}
+    >
+      <TextInput
+        placeholderTextColor={theme.colors.secondaryText}
+        style={[styles.input, { color: theme.colors.primaryText }]}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        {...props}
+      />
+      {rightView && (
+        <>
+          <View style={{ flex: 1 }} />
+          {rightView}
+        </>
+      )}
+    </View>
+  );
+}
+
+export function ThemedInputWithSubmit(
+  props: ThemedInputProps & {
+    onSubmit?: (value: string) => void;
+    isSubmitting?: boolean;
+  },
+) {
+  const { theme, onSubmit } = props;
+  const [isFocused, setIsFocused] = useState(false);
+  const [val, setVal] = useState("");
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          borderColor: isFocused
+            ? theme.colors.accentButtonBg
+            : theme.colors.borderColor,
+        },
+      ]}
+    >
+      <TextInput
+        placeholderTextColor={theme.colors.secondaryText}
+        style={[
+          styles.input,
+          {
+            color: theme.colors.primaryText,
+          },
+        ]}
+        value={val}
+        onChangeText={setVal}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        {...props}
+      />
+      {onSubmit && (
+        <TouchableOpacity
+          onPress={() => onSubmit(val)}
+          disabled={props.isSubmitting}
+          style={{
+            paddingHorizontal: spacing.lg,
+          }}
+        >
+          {props.isSubmitting ? (
+            <ThemedSpinner size={24} color={theme.colors.secondaryIconColor} />
+          ) : (
+            <SvgXml
+              width={24}
+              height={24}
+              xml={RIGHT_ARROW}
+              color={theme.colors.secondaryIconColor}
+            />
+          )}
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: radius.lg,
+    borderWidth: 1,
+    borderStyle: "solid",
+  },
+  input: {
+    flex: 1,
+    flexDirection: "row",
+    fontSize: 16,
+    height: 56,
+    gap: spacing.md,
+    paddingLeft: spacing.lg,
+    paddingVertical: spacing.md,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});

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

@@ -0,0 +1,6 @@
+import { View } from "react-native";
+import { spacing } from "../../design-system/index.js";
+
+export function Spacer({ size }: { size: keyof typeof spacing }) {
+  return <View style={{ height: spacing[size] }} />;
+}

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

@@ -3,7 +3,13 @@ import type { Theme } from "../../../core/design-system/index.js";
 
 export type ThemedTextProps = TextProps & {
   theme: Theme;
-  type?: "default" | "title" | "defaultSemiBold" | "subtitle" | "link";
+  type?:
+    | "default"
+    | "title"
+    | "defaultSemiBold"
+    | "subtitle"
+    | "link"
+    | "subtext";
 };
 
 export function ThemedText({
@@ -21,6 +27,9 @@ export function ThemedText({
         type === "defaultSemiBold" ? styles.defaultSemiBold : undefined,
         type === "subtitle" ? styles.subtitle : undefined,
         type === "link" ? styles.link : undefined,
+        type === "subtext"
+          ? { ...styles.subtext, color: theme.colors.secondaryText }
+          : undefined,
         style,
       ]}
       {...rest}
@@ -31,24 +40,24 @@ export function ThemedText({
 const styles = StyleSheet.create({
   default: {
     fontSize: 16,
-    lineHeight: 24,
   },
   defaultSemiBold: {
     fontSize: 16,
-    lineHeight: 24,
     fontWeight: "600",
   },
+  subtext: {
+    fontSize: 14,
+  },
   title: {
-    fontSize: 32,
+    fontSize: 24,
     fontWeight: "bold",
-    lineHeight: 32,
+    lineHeight: 28,
   },
   subtitle: {
-    fontSize: 20,
-    fontWeight: "bold",
+    fontSize: 18,
+    fontWeight: "600",
   },
   link: {
-    lineHeight: 30,
     fontSize: 16,
   },
 });

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

@@ -0,0 +1,188 @@
+import { useCallback, useRef, useState } from "react";
+import {
+  Animated,
+  Dimensions,
+  Easing,
+  KeyboardAvoidingView,
+  Modal,
+  Pressable,
+  StyleSheet,
+  View,
+} from "react-native";
+import { parseTheme } from "../../../core/design-system/CustomThemeProvider.js";
+import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
+import { useActiveAccount } from "../../hooks/wallets/useActiveAccount.js";
+import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
+import { useActiveWalletConnectionStatus } from "../../hooks/wallets/useActiveWalletConnectionStatus.js";
+import { useAutoConnect } from "../../hooks/wallets/useAutoConnect.js";
+import { ThemedButton } from "../components/button.js";
+import { ThemedSpinner } from "../components/spinner.js";
+import { ThemedText } from "../components/text.js";
+import { ConnectModal } from "./ConnectModal.js";
+import { ConnectedButton } from "./ConnectedButton.js";
+import { ConnectedModal } from "./ConnectedModal.js";
+
+/**
+ * A component that allows the user to connect their wallet.
+ * It renders a button which when clicked opens a modal to allow users to connect to wallets specified in `wallets` prop.
+ * @example
+ * ```tsx
+ * <ConnectButton
+ *    client={client}
+ * />
+ * ```
+ * @param props
+ * Props for the `ConnectButton` component
+ *
+ * Refer to [ConnectButtonProps](https://portal.thirdweb.com/references/typescript/v5/ConnectButtonProps) to see the available props.
+ * @component
+ */
+export function ConnectButton(props: ConnectButtonProps) {
+  const theme = parseTheme(props.theme);
+  const [visible, setVisible] = useState(false);
+  const wallet = useActiveWallet();
+  const account = useActiveAccount();
+  const status = useActiveWalletConnectionStatus();
+  useAutoConnect(props);
+
+  const fadeAnim = useRef(new Animated.Value(0)); // For background opacity
+  const slideAnim = useRef(new Animated.Value(screenHeight)); // For bottom sheet position
+
+  const openModal = useCallback(() => {
+    setVisible(true);
+    Animated.parallel([
+      Animated.timing(fadeAnim.current, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+      Animated.timing(slideAnim.current, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+        easing: Easing.out(Easing.exp),
+      }),
+    ]).start();
+  }, []);
+
+  const closeModal = useCallback(() => {
+    Animated.parallel([
+      Animated.timing(fadeAnim.current, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+      Animated.timing(slideAnim.current, {
+        toValue: screenHeight,
+        duration: 300,
+        useNativeDriver: true,
+        easing: Easing.in(Easing.exp),
+      }),
+    ]).start(() => {
+      setVisible(false);
+      fadeAnim.current.setValue(0);
+      slideAnim.current.setValue(screenHeight);
+    });
+  }, []);
+
+  return (
+    <View>
+      {wallet && account ? (
+        <ConnectedButton
+          openModal={() => openModal()}
+          onClose={closeModal}
+          wallet={wallet}
+          account={account}
+          {...props}
+        />
+      ) : (
+        <ThemedButton theme={theme} onPress={() => openModal()}>
+          {status === "connecting" ? (
+            <>
+              <ThemedSpinner color={theme.colors.primaryButtonText} />
+            </>
+          ) : (
+            <ThemedText
+              theme={theme}
+              type="defaultSemiBold"
+              style={{ color: theme.colors.primaryButtonText }}
+            >
+              Connect Wallet
+            </ThemedText>
+          )}
+        </ThemedButton>
+      )}
+      <Modal
+        visible={visible}
+        animationType="none"
+        transparent={true}
+        onRequestClose={closeModal}
+      >
+        <KeyboardAvoidingView behavior={"padding"} style={{ flex: 1 }}>
+          <Animated.View
+            style={[styles.modalOverlay, { opacity: fadeAnim.current }]}
+          />
+          <Animated.View
+            style={[
+              { flex: 1, transform: [{ translateY: slideAnim.current }] },
+            ]}
+          >
+            <Pressable style={styles.dismissArea} onPress={closeModal} />
+            <View style={styles.bottomSheetContainer}>
+              {wallet && account ? (
+                <ConnectedModal
+                  {...props}
+                  theme={theme}
+                  onClose={closeModal}
+                  containerType="modal"
+                  wallet={wallet}
+                  account={account}
+                />
+              ) : status === "connecting" ? (
+                <View
+                  style={{
+                    flexDirection: "column",
+                    flex: 1,
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  <ThemedSpinner color={theme.colors.primaryText} size={32} />
+                </View>
+              ) : (
+                <ConnectModal
+                  {...props}
+                  theme={theme}
+                  onClose={closeModal}
+                  containerType="modal"
+                />
+              )}
+            </View>
+          </Animated.View>
+        </KeyboardAvoidingView>
+      </Modal>
+    </View>
+  );
+}
+
+const screenHeight = Dimensions.get("window").height;
+const modalHeight = 480;
+const screenWidth = Dimensions.get("window").width;
+
+const styles = StyleSheet.create({
+  modalOverlay: {
+    position: "absolute",
+    width: screenWidth,
+    height: screenHeight,
+    backgroundColor: "rgba(0,0,0,0.8)",
+  },
+  dismissArea: {
+    width: "100%",
+    flex: 1,
+  },
+  bottomSheetContainer: {
+    height: modalHeight,
+    width: screenWidth,
+    flexDirection: "column",
+  },
+});