thirdweb 5.31.1 → 5.32.0-nightly-931cca3a7e8f3946bdb7e40880333790387d4cef-20240702071901

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

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

@@ -0,0 +1,298 @@
+import { useState } from "react";
+import { Platform, StyleSheet, View } from "react-native";
+import { SvgXml } from "react-native-svg";
+import type { MultiStepAuthProviderType } from "../../../../wallets/in-app/core/authentication/type.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import { parseTheme } from "../../../core/design-system/CustomThemeProvider.js";
+import type { Theme } from "../../../core/design-system/index.js";
+import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
+import type { ConnectEmbedProps } from "../../../core/hooks/connection/ConnectEmbedProps.js";
+import { genericWalletIcon } from "../../../core/utils/socialIcons.js";
+import { radius, spacing } from "../../design-system/index.js";
+import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
+import { useConnect } from "../../hooks/wallets/useConnect.js";
+import { getDefaultWallets } from "../../wallets/defaultWallets.js";
+import { type ContainerType, Header } from "../components/Header.js";
+import { 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 } from "../icons/svgs.js";
+import { ExternalWalletsList } from "./ExternalWalletsList.js";
+import { InAppWalletUI, OtpLogin } from "./InAppWalletUI.js";
+
+export type ModalState =
+  | { screen: "base" }
+  | { screen: "otp"; auth: MultiStepAuthProviderType; wallet: Wallet<"inApp"> }
+  | { screen: "external_wallets" };
+
+/**
+ * A component that allows the user to connect their wallet.
+ *
+ * it renders the same UI as the [`ConnectButton`](https://portal.thirdweb.com/react/v4/components/ConnectButton) component's modal - but directly on the page instead of being in a modal.
+ *
+ * It only renders UI if wallet is not connected
+ * @example
+ * ```tsx
+ * <ConnectEmbed
+ *    client={client}
+ * />
+ * ```
+ * @param props -
+ * The props for the `ConnectEmbed` component.
+ *
+ * Refer to the [`ConnectEmbedProps`](https://portal.thirdweb.com/references/typescript/v5/ConnectEmbedProps) type for more details
+ * @component
+ */
+export function ConnectEmbed(props: ConnectEmbedProps) {
+  const theme = parseTheme(props.theme);
+  const wallet = useActiveWallet();
+  const adaptedProps = {
+    ...props,
+    connectModal: { ...props },
+  } as ConnectButtonProps;
+  return wallet ? null : (
+    <ConnectModal {...adaptedProps} theme={theme} containerType="embed" />
+  );
+}
+
+export function ConnectModal(
+  props: ConnectButtonProps & {
+    theme: Theme;
+    onClose?: () => void;
+    containerType: ContainerType;
+  },
+) {
+  const { theme, client, containerType, accountAbstraction, onConnect } = props;
+  const connectMutation = useConnect({
+    client,
+    accountAbstraction,
+    onConnect,
+  });
+  const wallets = props.wallets || getDefaultWallets(props);
+  const [modalState, setModalState] = useState<ModalState>({ screen: "base" });
+  const inAppWallet = wallets.find((wallet) => wallet.id === "inApp") as
+    | Wallet<"inApp">
+    | undefined;
+  const externalWallets = wallets.filter((wallet) => wallet.id !== "inApp");
+  const showBranding = props.connectModal?.showThirdwebBranding !== false;
+  let content: JSX.Element;
+
+  switch (modalState.screen) {
+    case "otp": {
+      content = (
+        <>
+          <Header
+            theme={theme}
+            onClose={props.onClose}
+            containerType={containerType}
+            onBack={() => setModalState({ screen: "base" })}
+          />
+          <Spacer size="xl" />
+          <View
+            style={{
+              flexDirection: "column",
+              gap: spacing.md,
+              paddingHorizontal: containerType === "modal" ? spacing.lg : 0,
+            }}
+          >
+            <OtpLogin
+              auth={modalState.auth}
+              wallet={modalState.wallet}
+              client={client}
+              setScreen={setModalState}
+              theme={theme}
+              connectMutation={connectMutation}
+            />
+          </View>
+          {containerType === "modal" ? (
+            <View style={{ flex: 1 }} />
+          ) : (
+            <Spacer size="md" />
+          )}
+        </>
+      );
+      break;
+    }
+    case "external_wallets": {
+      content = (
+        <>
+          <Header
+            theme={theme}
+            onClose={props.onClose}
+            containerType={containerType}
+            onBack={() => setModalState({ screen: "base" })}
+          />
+          <Spacer size="lg" />
+          <ExternalWalletsList
+            theme={theme}
+            externalWallets={externalWallets}
+            client={client}
+            connectMutation={connectMutation}
+            containerType={containerType}
+          />
+        </>
+      );
+      break;
+    }
+    default: {
+      content = (
+        <>
+          <Header
+            theme={theme}
+            onClose={props.onClose}
+            containerType={containerType}
+          />
+          {inAppWallet ? (
+            <>
+              {containerType === "modal" ? (
+                <View style={{ flex: 1 }} />
+              ) : (
+                <Spacer size="lg" />
+              )}
+              <View
+                style={{
+                  flexDirection: "column",
+                  gap: spacing.md,
+                  paddingHorizontal: containerType === "modal" ? spacing.lg : 0,
+                }}
+              >
+                <InAppWalletUI
+                  wallet={inAppWallet}
+                  setScreen={setModalState}
+                  client={client}
+                  theme={theme}
+                  connectMutation={connectMutation}
+                />
+                {externalWallets.length > 0 ? (
+                  <>
+                    <OrDivider theme={theme} />
+                    <ThemedButtonWithIcon
+                      theme={theme}
+                      icon={genericWalletIcon}
+                      title="Connect a wallet"
+                      onPress={() =>
+                        setModalState({ screen: "external_wallets" })
+                      }
+                    />
+                  </>
+                ) : null}
+              </View>
+              {containerType === "modal" ? (
+                <View style={{ flex: 1 }} />
+              ) : (
+                <Spacer size="md" />
+              )}
+            </>
+          ) : externalWallets.length > 0 ? (
+            <>
+              <Spacer size="lg" />
+              <View
+                style={{
+                  flex: 1,
+                }}
+              >
+                <ExternalWalletsList
+                  theme={theme}
+                  externalWallets={externalWallets}
+                  client={client}
+                  connectMutation={connectMutation}
+                  containerType={containerType}
+                />
+              </View>
+            </>
+          ) : null}
+        </>
+      );
+    }
+  }
+
+  return (
+    <ThemedView
+      theme={theme}
+      style={
+        containerType === "modal"
+          ? styles.modalContainer
+          : styles.embedContainer
+      }
+    >
+      {content}
+      {showBranding && <PoweredByThirdweb theme={theme} />}
+    </ThemedView>
+  );
+}
+
+function OrDivider({ theme }: { theme: Theme }) {
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: spacing.lg,
+      }}
+    >
+      <View
+        style={{
+          flex: 1,
+          height: 1,
+          backgroundColor: theme.colors.borderColor,
+        }}
+      />
+      <ThemedText theme={theme} style={{ color: theme.colors.secondaryText }}>
+        OR
+      </ThemedText>
+      <View
+        style={{
+          flex: 1,
+          height: 1,
+          backgroundColor: theme.colors.borderColor,
+        }}
+      />
+    </View>
+  );
+}
+
+function PoweredByThirdweb({ theme }: { theme: Theme }) {
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: spacing.xs,
+        paddingBottom: Platform.OS === "android" ? spacing.md : spacing.lg,
+      }}
+    >
+      <ThemedText theme={theme} type="subtext">
+        Powered by
+      </ThemedText>
+      <SvgXml
+        xml={TW_ICON}
+        width={22}
+        height={22}
+        style={{ marginBottom: -2 }}
+        color={theme.colors.secondaryText}
+      />
+      <ThemedText theme={theme} type="subtext" style={{ fontWeight: "600" }}>
+        thirdweb
+      </ThemedText>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    width: "100%",
+    flexDirection: "column",
+    borderTopLeftRadius: radius.lg,
+    borderTopRightRadius: radius.lg,
+  },
+  embedContainer: {
+    flex: 1,
+    width: "100%",
+    flexDirection: "column",
+    backgroundColor: "transparent",
+  },
+});