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

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

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

@@ -0,0 +1,147 @@
+import { ScrollView, StyleSheet, TouchableOpacity, View } from "react-native";
+import type { Chain } from "../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import type { Theme } from "../../../core/design-system/index.js";
+import { useWalletBalance } from "../../../core/hooks/others/useWalletBalance.js";
+import {
+  type SupportedTokens,
+  type TokenInfo,
+  defaultTokens,
+} from "../../../core/utils/defaultTokens.js";
+import { spacing } from "../../design-system/index.js";
+import { useActiveAccount } from "../../hooks/wallets/useActiveAccount.js";
+import { useActiveWalletChain } from "../../hooks/wallets/useActiveWalletChain.js";
+import { RNImage } from "../components/RNImage.js";
+import { Skeleton } from "../components/Skeleton.js";
+import { TokenIcon } from "../components/TokenIcon.js";
+import { ThemedText } from "../components/text.js";
+import { RIGHT_CHEVRON } from "../icons/svgs.js";
+
+export type TokenListScreenProps = {
+  theme: Theme;
+  client: ThirdwebClient;
+  supportedTokens?: SupportedTokens;
+  onTokenSelected?: (token?: TokenInfo) => void;
+};
+
+export const TokenListScreen = (props: TokenListScreenProps) => {
+  const supportedTokens = props.supportedTokens || defaultTokens;
+  const chain = useActiveWalletChain();
+  const account = useActiveAccount();
+  const tokens = chain ? supportedTokens[chain.id] || [] : [];
+
+  return (
+    <ScrollView style={{ flex: 1 }}>
+      <View style={styles.listContainer}>
+        <TokenRow
+          chain={chain}
+          address={account?.address}
+          client={props.client}
+          theme={props.theme}
+          onTokenSelected={props.onTokenSelected}
+        />
+        {tokens.map((t) => {
+          return (
+            <TokenRow
+              chain={chain}
+              client={props.client}
+              address={account?.address}
+              theme={props.theme}
+              token={t}
+              onTokenSelected={props.onTokenSelected}
+              key={t.address}
+            />
+          );
+        })}
+      </View>
+    </ScrollView>
+  );
+};
+
+export const TokenRow = (props: {
+  token?: TokenInfo;
+  theme: Theme;
+  client: ThirdwebClient;
+  chain?: Chain;
+  address?: string;
+  onTokenSelected?: (token?: TokenInfo) => void;
+}) => {
+  const { token, theme, address, chain, client, onTokenSelected } = props;
+  const balanceQuery = useWalletBalance({
+    address,
+    chain,
+    client,
+    tokenAddress: token?.address,
+  });
+  const tokenName = props.token ? props.token.name : balanceQuery.data?.name;
+  const inner = (
+    <>
+      <TokenIcon
+        token={token}
+        size={40}
+        chain={chain}
+        client={client}
+        theme={theme}
+      />
+      <View style={{ flexDirection: "column", gap: spacing.xxs }}>
+        <ThemedText theme={theme} type="defaultSemiBold">
+          {tokenName}
+        </ThemedText>
+        {address && (
+          <>
+            {balanceQuery.data ? (
+              <ThemedText theme={theme} type="subtext">
+                {Number(balanceQuery.data.displayValue).toFixed(3)}{" "}
+                {balanceQuery.data?.symbol}
+              </ThemedText>
+            ) : (
+              <Skeleton theme={theme} style={{ width: 80, height: 14 }} />
+            )}
+          </>
+        )}
+      </View>
+      {props.onTokenSelected && (
+        <>
+          <View style={{ flex: 1 }} />
+          <RNImage
+            theme={theme}
+            size={24}
+            data={RIGHT_CHEVRON}
+            color={theme.colors.secondaryIconColor}
+          />
+        </>
+      )}
+    </>
+  );
+  return onTokenSelected ? (
+    <TouchableOpacity
+      style={styles.tokenRowContainer}
+      onPress={() => onTokenSelected(token)}
+    >
+      {inner}
+    </TouchableOpacity>
+  ) : (
+    <View style={styles.tokenRowContainer}>{inner}</View>
+  );
+};
+
+const styles = StyleSheet.create({
+  listContainer: {
+    flexDirection: "column",
+    flex: 1,
+    paddingHorizontal: spacing.lg,
+    gap: spacing.md,
+  },
+  tokenRowContainer: {
+    flexDirection: "row",
+    gap: spacing.md,
+    alignItems: "center",
+  },
+  emptyContainer: {
+    flexDirection: "column",
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: spacing.lg,
+  },
+});