@coinbase/create-cdp-app 0.0.27 → 0.0.29

package/template-react-native/SmartAccountTransaction.tsx

@@ -1,9 +1,49 @@
 import { useCurrentUser, useSendUserOperation } from "@coinbase/cdp-hooks";
 import * as Clipboard from "expo-clipboard";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { View, Text, TouchableOpacity, StyleSheet, Alert, ActivityIndicator } from "react-native";
-import { createPublicClient, http, formatEther } from "viem";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Alert,
+  ActivityIndicator,
+  Linking,
+} from "react-native";
+import {
+  createPublicClient,
+  http,
+  formatEther,
+  parseUnits,
+  encodeFunctionData,
+  formatUnits,
+} from "viem";
 import { baseSepolia } from "viem/chains";
+import { useTheme } from "./theme/ThemeContext";
+
+// USDC contract address on Base Sepolia
+const USDC_ADDRESS = "0x036CbD53842c5426634e7929541eC2318f3dCF7e" as const;
+
+// ERC20 ABI for balance and transfer
+const ERC20_ABI = [
+  {
+    name: "balanceOf",
+    type: "function",
+    stateMutability: "view",
+    inputs: [{ name: "account", type: "address" }],
+    outputs: [{ name: "", type: "uint256" }],
+  },
+  {
+    name: "transfer",
+    type: "function",
+    stateMutability: "nonpayable",
+    inputs: [
+      { name: "to", type: "address" },
+      { name: "amount", type: "uint256" },
+    ],
+    outputs: [{ name: "", type: "bool" }],
+  },
+] as const;
 
 const client = createPublicClient({
   chain: baseSepolia,
@@ -26,7 +66,9 @@ function SmartAccountTransaction(props: Props) {
   const { currentUser } = useCurrentUser();
   const { sendUserOperation, data, error, status } = useSendUserOperation();
   const [balance, setBalance] = useState<bigint | undefined>(undefined);
+  const [usdcBalance, setUsdcBalance] = useState<bigint | undefined>(undefined);
   const [errorMessage, setErrorMessage] = useState("");
+  const { colors } = useTheme();
 
   const smartAccount = currentUser?.evmSmartAccounts?.[0];
 
@@ -35,12 +77,32 @@ function SmartAccountTransaction(props: Props) {
     return formatEther(balance);
   }, [balance]);
 
+  const formattedUsdcBalance = useMemo(() => {
+    if (usdcBalance === undefined) return undefined;
+    return formatUnits(usdcBalance, 6); // USDC has 6 decimals
+  }, [usdcBalance]);
+
   const getBalance = useCallback(async () => {
     if (!smartAccount) return;
-    const balance = await client.getBalance({
-      address: smartAccount,
-    });
-    setBalance(balance);
+
+    try {
+      // Get ETH balance
+      const ethBalance = await client.getBalance({
+        address: smartAccount,
+      });
+      setBalance(ethBalance);
+
+      // Get USDC balance
+      const usdcBalance = await client.readContract({
+        address: USDC_ADDRESS,
+        abi: ERC20_ABI,
+        functionName: "balanceOf",
+        args: [smartAccount],
+      });
+      setUsdcBalance(usdcBalance as bigint);
+    } catch (error) {
+      console.error("Error fetching balances:", error);
+    }
   }, [smartAccount]);
 
   useEffect(() => {
@@ -51,34 +113,42 @@ function SmartAccountTransaction(props: Props) {
 
   const handleSendUserOperation = async () => {
     if (!smartAccount) {
-      Alert.alert("Error", "No Smart Account available");
+      Alert.alert("Error", "No Smart Account available.");
       return;
     }
 
     setErrorMessage("");
 
     try {
-      // Example: Send a simple transaction (you can customize this)
+      // Send 1 USDC to self as an example
+      const usdcAmount = parseUnits("1", 6); // USDC has 6 decimals
+
+      const transferData = encodeFunctionData({
+        abi: ERC20_ABI,
+        functionName: "transfer",
+        args: [smartAccount, usdcAmount],
+      });
+
       const result = await sendUserOperation({
         evmSmartAccount: smartAccount,
         network: "base-sepolia",
         calls: [
           {
-            to: smartAccount,
-            value: 0n, // 0 ETH
+            to: USDC_ADDRESS,
+            data: transferData,
+            value: 0n,
           },
         ],
       });
 
       if (result?.userOperationHash) {
-        Alert.alert("Success", "User Operation sent successfully!");
         onSuccess?.();
         getBalance();
       }
     } catch (err) {
       const message = err instanceof Error ? err.message : "Failed to send user operation";
       setErrorMessage(message);
-      Alert.alert("Transaction Failed", message);
+      Alert.alert("Transaction Failed", message + (message.endsWith(".") ? "" : "."));
     }
   };
 
@@ -88,217 +158,291 @@ function SmartAccountTransaction(props: Props) {
   const copyToClipboard = async (text: string, label: string) => {
     try {
       await Clipboard.setStringAsync(text);
-      Alert.alert("Copied!", `${label} copied to clipboard`);
+      Alert.alert("Copied!", `${label} copied to clipboard.`);
     } catch (error) {
-      Alert.alert("Error", "Failed to copy to clipboard");
+      Alert.alert("Error", "Failed to copy to clipboard.");
     }
   };
 
+  const openFaucet = () => {
+    const usdcFaucetUrl = `https://portal.cdp.coinbase.com/products/faucet?address=${smartAccount}&token=USDC`;
+
+    Alert.alert(
+      "Get testnet USDC",
+      "",
+      [
+        {
+          text: "Copy USDC Faucet Link",
+          onPress: () => copyToClipboard(usdcFaucetUrl, "USDC Faucet Link"),
+        },
+        {
+          text: "Open USDC Faucet",
+          onPress: () => Linking.openURL(usdcFaucetUrl),
+          style: "default",
+        },
+        {
+          text: "Cancel",
+          style: "cancel",
+        },
+      ],
+      { cancelable: true },
+    );
+  };
+
+  const hasBalance = balance && balance > 0n; // Still check ETH for gas
+  const hasUsdcBalance = usdcBalance && usdcBalance > 0n;
+
+  const createStyles = () =>
+    StyleSheet.create({
+      container: {
+        flex: 1,
+        paddingHorizontal: 20,
+        paddingVertical: 20,
+      },
+      balanceSection: {
+        backgroundColor: colors.cardBackground,
+        borderRadius: 12,
+        padding: 24,
+        marginBottom: 16,
+        alignItems: "center",
+        borderWidth: 1,
+        borderColor: colors.border,
+      },
+      balanceTitle: {
+        fontSize: 16,
+        fontWeight: "500",
+        color: colors.textSecondary,
+        marginBottom: 8,
+      },
+      balanceAmount: {
+        fontSize: 32,
+        fontWeight: "bold",
+        color: colors.text,
+        marginBottom: 16,
+      },
+      faucetButton: {
+        backgroundColor: colors.accent,
+        paddingHorizontal: 20,
+        paddingVertical: 12,
+        borderRadius: 8,
+        alignItems: "center",
+        width: "100%",
+      },
+      faucetButtonText: {
+        color: "#ffffff",
+        fontSize: 16,
+        fontWeight: "600",
+      },
+      transactionSection: {
+        backgroundColor: colors.cardBackground,
+        borderRadius: 12,
+        padding: 24,
+        borderWidth: 1,
+        borderColor: colors.border,
+      },
+      sectionTitle: {
+        fontSize: 18,
+        fontWeight: "600",
+        color: colors.text,
+        marginBottom: 8,
+      },
+      sectionSubtitle: {
+        fontSize: 14,
+        color: colors.textSecondary,
+        marginBottom: 20,
+      },
+      sendButton: {
+        backgroundColor: colors.accent,
+        paddingHorizontal: 20,
+        paddingVertical: 12,
+        borderRadius: 8,
+        alignItems: "center",
+        marginBottom: 16,
+      },
+      sendButtonDisabled: {
+        opacity: 0.6,
+      },
+      sendButtonText: {
+        color: "#ffffff",
+        fontSize: 16,
+        fontWeight: "600",
+      },
+      disabledText: {
+        fontSize: 14,
+        color: colors.textSecondary,
+        textAlign: "center",
+        fontStyle: "italic",
+      },
+      noteContainer: {
+        flexDirection: "row",
+        backgroundColor: "rgba(0, 128, 128, 0.1)",
+        borderRadius: 8,
+        padding: 16,
+        marginBottom: 20,
+        borderWidth: 1,
+        borderColor: "rgba(0, 128, 128, 0.3)",
+      },
+      noteIcon: {
+        fontSize: 16,
+        marginRight: 8,
+        marginTop: 2,
+      },
+      noteTextContainer: {
+        flex: 1,
+      },
+      noteTitle: {
+        fontSize: 14,
+        fontWeight: "600",
+        color: colors.text,
+        marginRight: 4,
+      },
+      noteText: {
+        fontSize: 14,
+        color: colors.text,
+        lineHeight: 20,
+      },
+      faucetLink: {
+        color: colors.accent,
+        textDecorationLine: "underline",
+      },
+      errorContainer: {
+        backgroundColor: colors.errorBackground,
+        padding: 12,
+        borderRadius: 8,
+        marginTop: 16,
+      },
+      errorText: {
+        color: "#cc0000",
+        fontSize: 14,
+      },
+      successContainer: {
+        backgroundColor: colors.successBackground,
+        padding: 16,
+        borderRadius: 8,
+        marginTop: 16,
+      },
+      successTitle: {
+        color: colors.accent,
+        fontSize: 16,
+        fontWeight: "600",
+        marginBottom: 12,
+      },
+      hashContainer: {
+        marginBottom: 12,
+      },
+      hashLabel: {
+        color: colors.accent,
+        fontSize: 14,
+        fontWeight: "600",
+        marginBottom: 6,
+      },
+      hashButton: {
+        backgroundColor: "rgba(0, 128, 128, 0.1)",
+        borderRadius: 6,
+        padding: 12,
+        borderWidth: 1,
+        borderColor: "rgba(0, 128, 128, 0.3)",
+      },
+      hashText: {
+        color: colors.accent,
+        fontSize: 12,
+        fontFamily: "monospace",
+        marginBottom: 4,
+      },
+      copyHint: {
+        color: colors.accent,
+        fontSize: 10,
+        fontStyle: "italic",
+        textAlign: "center",
+      },
+    });
+
+  const styles = createStyles();
+
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>Smart Account Transaction</Text>
-      <Text style={styles.subtitle}>Gasless transactions with Smart Accounts</Text>
-
-      <View style={styles.infoContainer}>
-        <Text style={styles.label}>Smart Account Address:</Text>
-        <TouchableOpacity
-          style={styles.copyableInfo}
-          onPress={() => copyToClipboard(smartAccount!, "Smart Account Address")}
-        >
-          <Text style={styles.copyableText}>{smartAccount}</Text>
-          <Text style={styles.addressCopyHint}>Tap to copy</Text>
-        </TouchableOpacity>
+      {/* Balance Section */}
+      <View style={styles.balanceSection}>
+        <Text style={styles.balanceTitle}>Current Balance</Text>
+        <Text style={styles.balanceAmount}>
+          {formattedUsdcBalance === undefined ? "Loading..." : `${formattedUsdcBalance} USDC`}
+        </Text>
+        {!hasUsdcBalance && (
+          <TouchableOpacity style={styles.faucetButton} onPress={openFaucet}>
+            <Text style={styles.faucetButtonText}>Get funds from faucet</Text>
+          </TouchableOpacity>
+        )}
       </View>
 
-      <View style={styles.infoContainer}>
-        <Text style={styles.label}>Balance:</Text>
-        <Text style={styles.value}>
-          {formattedBalance === undefined ? "Loading..." : `${formattedBalance} ETH`}
+      {/* Transaction Section */}
+      <View style={styles.transactionSection}>
+        <Text style={styles.sectionTitle}>Transfer 1 USDC</Text>
+        <Text style={styles.sectionSubtitle}>
+          This example transaction sends 1 USDC from your wallet to itself.
         </Text>
-      </View>
 
-      <TouchableOpacity
-        style={[styles.button, (!smartAccount || isLoading) && styles.buttonDisabled]}
-        onPress={handleSendUserOperation}
-        disabled={!smartAccount || isLoading}
-      >
-        {isLoading ? (
-          <ActivityIndicator color="#fff" />
-        ) : (
-          <Text style={styles.buttonText}>Send User Operation</Text>
+        {!hasUsdcBalance && (
+          <View style={styles.noteContainer}>
+            <Text style={styles.noteIcon}>ℹ️</Text>
+            <View style={styles.noteTextContainer}>
+              <Text style={styles.noteTitle}>Note:</Text>
+              <Text style={styles.noteText}>
+                Even though this is a gasless transaction, you still need USDC in your account to
+                send it. Get some from the{" "}
+                <Text style={styles.faucetLink} onPress={openFaucet}>
+                  CDP Faucet
+                </Text>
+                .
+              </Text>
+            </View>
+          </View>
         )}
-      </TouchableOpacity>
-
-      {errorMessage || error ? (
-        <View style={styles.errorContainer}>
-          <Text style={styles.errorText}>{errorMessage || error?.message}</Text>
-        </View>
-      ) : null}
-
-      {isSuccess && data?.transactionHash ? (
-        <View style={styles.successContainer}>
-          <Text style={styles.successTitle}>User Operation Sent!</Text>
-
-          <View style={styles.hashContainer}>
-            <Text style={styles.hashLabel}>Transaction Hash:</Text>
-            <TouchableOpacity
-              style={styles.hashButton}
-              onPress={() => copyToClipboard(data.transactionHash!, "Transaction Hash")}
-            >
-              <Text style={styles.hashText}>{data.transactionHash}</Text>
-              <Text style={styles.copyHint}>📋 Tap to copy</Text>
-            </TouchableOpacity>
+
+        <TouchableOpacity
+          style={[
+            styles.sendButton,
+            (!smartAccount || isLoading || !hasUsdcBalance) && styles.sendButtonDisabled,
+          ]}
+          onPress={handleSendUserOperation}
+          disabled={!smartAccount || isLoading || !hasUsdcBalance}
+        >
+          {isLoading ? (
+            <ActivityIndicator color="#fff" />
+          ) : (
+            <Text style={styles.sendButtonText}>Transfer</Text>
+          )}
+        </TouchableOpacity>
+
+        {errorMessage || error ? (
+          <View style={styles.errorContainer}>
+            <Text style={styles.errorText}>{errorMessage || error?.message}</Text>
           </View>
+        ) : null}
+
+        {isSuccess && data?.transactionHash ? (
+          <View style={styles.successContainer}>
+            <Text style={styles.successTitle}>Transfer Complete</Text>
 
-          {data.userOpHash && (
             <View style={styles.hashContainer}>
-              <Text style={styles.hashLabel}>User Op Hash:</Text>
+              <Text style={styles.hashLabel}>Transaction Hash:</Text>
               <TouchableOpacity
                 style={styles.hashButton}
-                onPress={() => copyToClipboard(data.userOpHash!, "User Operation Hash")}
+                onPress={() =>
+                  copyToClipboard(
+                    `https://sepolia.basescan.org/tx/${data.transactionHash}`,
+                    "Block Explorer Link",
+                  )
+                }
               >
-                <Text style={styles.hashText}>{data.userOpHash}</Text>
-                <Text style={styles.copyHint}>📋 Tap to copy</Text>
+                <Text style={styles.hashText}>{data.transactionHash}</Text>
+                <Text style={styles.copyHint}>Tap to copy block explorer link</Text>
               </TouchableOpacity>
             </View>
-          )}
-        </View>
-      ) : null}
+          </View>
+        ) : null}
+      </View>
     </View>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    padding: 32,
-    backgroundColor: "#ffffff",
-    borderRadius: 16,
-    borderWidth: 1,
-    borderColor: "#dcdcdc",
-    marginHorizontal: 0,
-    marginVertical: 8,
-    alignItems: "stretch",
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: "500",
-    marginBottom: 4,
-    textAlign: "center",
-    color: "#111111",
-  },
-  subtitle: {
-    fontSize: 14,
-    color: "#757575",
-    textAlign: "center",
-    marginBottom: 16,
-  },
-  infoContainer: {
-    marginBottom: 16,
-    width: "100%",
-  },
-  label: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: "#757575",
-    marginBottom: 4,
-  },
-  value: {
-    fontSize: 14,
-    color: "#111111",
-    fontFamily: "monospace",
-    textAlign: "left",
-  },
-  button: {
-    backgroundColor: "#4CAF50",
-    padding: 15,
-    borderRadius: 8,
-    alignItems: "center",
-    alignSelf: "center",
-    marginVertical: 16,
-    minWidth: 188,
-    paddingHorizontal: 32,
-  },
-  buttonDisabled: {
-    opacity: 0.6,
-  },
-  buttonText: {
-    color: "#ffffff",
-    fontSize: 16,
-    fontWeight: "600",
-  },
-  errorContainer: {
-    backgroundColor: "#ffebee",
-    padding: 12,
-    borderRadius: 8,
-    borderColor: "#f44336",
-    borderWidth: 1,
-    width: "100%",
-  },
-  errorText: {
-    color: "#c62828",
-    fontSize: 14,
-  },
-  successContainer: {
-    backgroundColor: "rgba(76, 175, 80, 0.1)",
-    padding: 12,
-    borderRadius: 8,
-    borderColor: "rgba(76, 175, 80, 0.3)",
-    borderWidth: 1,
-    width: "100%",
-  },
-  successTitle: {
-    color: "#4caf50",
-    fontSize: 16,
-    fontWeight: "600",
-    marginBottom: 8,
-  },
-  hashContainer: {
-    marginBottom: 12,
-  },
-  hashLabel: {
-    color: "#4caf50",
-    fontSize: 14,
-    fontWeight: "600",
-    marginBottom: 4,
-  },
-  hashButton: {
-    backgroundColor: "rgba(76, 175, 80, 0.1)",
-    borderRadius: 8,
-    padding: 8,
-    borderWidth: 1,
-    borderColor: "rgba(76, 175, 80, 0.3)",
-  },
-  hashText: {
-    color: "#4caf50",
-    fontSize: 12,
-    fontFamily: "monospace",
-    marginBottom: 4,
-  },
-  copyHint: {
-    color: "#4caf50",
-    fontSize: 10,
-    fontStyle: "italic",
-    textAlign: "center",
-  },
-  copyableInfo: {
-    backgroundColor: "rgba(0, 128, 128, 0.1)",
-    borderRadius: 8,
-    padding: 12,
-    borderWidth: 1,
-    borderColor: "rgba(0, 128, 128, 0.3)",
-  },
-  copyableText: {
-    fontSize: 12,
-    fontFamily: "monospace",
-    color: "#008080",
-    textAlign: "center",
-  },
-  addressCopyHint: {
-    fontSize: 10,
-    color: "#008080",
-    fontStyle: "italic",
-    textAlign: "center",
-  },
-});
-
 export default SmartAccountTransaction;

package/template-react-native/components/DarkModeToggle.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { TouchableOpacity, Text, StyleSheet, View } from "react-native";
+import { useTheme } from "../theme/ThemeContext";
+import { DarkModeToggleProps } from "../types";
+import { SunMoonIcon } from "./SunMoonIcon";
+
+export const DarkModeToggle: React.FC<DarkModeToggleProps> = ({
+  style,
+  iconStyle,
+  showText = false,
+}) => {
+  const { isDarkMode, toggleDarkMode, colors } = useTheme();
+
+  const createStyles = () =>
+    StyleSheet.create({
+      button: {
+        backgroundColor: colors.inputBackground,
+        borderWidth: 1,
+        borderColor: colors.border,
+        borderRadius: showText ? 8 : 20,
+        padding: showText ? 15 : 10,
+        alignItems: "center",
+        flexDirection: showText ? "row" : "column",
+        justifyContent: "center",
+        ...style,
+      },
+      iconContainer: {
+        marginRight: showText ? 8 : 0,
+        alignItems: "center",
+        justifyContent: "center",
+      },
+      text: {
+        color: colors.text,
+        fontSize: 16,
+        fontWeight: "500",
+      },
+    });
+
+  const styles = createStyles();
+
+  return (
+    <TouchableOpacity style={styles.button} onPress={toggleDarkMode}>
+      <View style={styles.iconContainer}>
+        <SunMoonIcon isDarkMode={isDarkMode} size={showText ? 18 : 16} color={colors.text} />
+      </View>
+      {showText && <Text style={styles.text}>{isDarkMode ? "Light Mode" : "Dark Mode"}</Text>}
+    </TouchableOpacity>
+  );
+};