@coinbase/create-cdp-app 0.0.26 → 0.0.28

package/template-react-native/EOATransaction.tsx

@@ -0,0 +1,360 @@
+import { useEvmAddress, useSendEvmTransaction } from "@coinbase/cdp-hooks";
+import * as Clipboard from "expo-clipboard";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+// eslint-disable-next-line import/namespace
+import { View, Text, TouchableOpacity, StyleSheet, Alert, ActivityIndicator } from "react-native";
+import { createPublicClient, http, formatEther } from "viem";
+import { baseSepolia } from "viem/chains";
+
+const client = createPublicClient({
+  chain: baseSepolia,
+  transport: http(),
+});
+
+interface Props {
+  onSuccess?: () => void;
+}
+
+/**
+ * This component demonstrates how to send an EVM transaction using EOA (Externally Owned Accounts).
+ *
+ * @param {Props} props - The props for the EOATransaction component.
+ * @param {() => void} [props.onSuccess] - A function to call when the transaction is successful.
+ * @returns A component that displays a transaction form and result.
+ */
+function EOATransaction(props: Props) {
+  const { onSuccess } = props;
+  const { evmAddress } = useEvmAddress();
+  const [balance, setBalance] = useState<bigint | undefined>(undefined);
+  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const { sendEvmTransaction: sendTransaction, data: transactionData } = useSendEvmTransaction();
+
+  const formattedBalance = useMemo(() => {
+    if (balance === undefined) return undefined;
+    return formatEther(balance);
+  }, [balance]);
+
+  const hasBalance = useMemo(() => {
+    return formattedBalance && formattedBalance !== "0";
+  }, [formattedBalance]);
+
+  const getBalance = useCallback(async () => {
+    if (!evmAddress) return;
+    const balance = await client.getBalance({
+      address: evmAddress,
+    });
+    setBalance(balance);
+  }, [evmAddress]);
+
+  useEffect(() => {
+    getBalance();
+    const interval = setInterval(getBalance, 5000);
+    return () => clearInterval(interval);
+  }, [getBalance]);
+
+  const handleSendTransaction = async () => {
+    if (!evmAddress || !hasBalance) {
+      Alert.alert("Error", "Insufficient balance or no address available");
+      return;
+    }
+
+    setIsLoading(true);
+    setError("");
+
+    try {
+      await sendTransaction({
+        network: "base-sepolia",
+        evmAccount: evmAddress,
+        transaction: {
+          to: evmAddress,
+          value: 1000000000000n,
+          gas: 21000n,
+          chainId: 84532,
+          type: "eip1559",
+        },
+      });
+
+      Alert.alert("Success", "Transaction sent successfully!");
+
+      onSuccess?.();
+      getBalance();
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Transaction failed";
+      setError(errorMessage);
+      Alert.alert("Transaction Failed", errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const copyToClipboard = async (text: string, label: string) => {
+    try {
+      await Clipboard.setStringAsync(text);
+      Alert.alert("Copied!", `${label} copied to clipboard`);
+    } catch (error) {
+      Alert.alert("Error", "Failed to copy to clipboard");
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>EOA Transaction</Text>
+
+      <View style={styles.infoContainer}>
+        <Text style={styles.label}>EVM Address:</Text>
+        <TouchableOpacity
+          style={styles.copyableInfo}
+          onPress={() => copyToClipboard(evmAddress!, "EVM Address")}
+        >
+          <Text style={styles.copyableText}>{evmAddress || "Not available"}</Text>
+          <Text style={styles.addressCopyHint}>Tap to copy</Text>
+        </TouchableOpacity>
+      </View>
+
+      <View style={styles.infoContainer}>
+        <Text style={styles.label}>Balance:</Text>
+        <Text style={styles.value}>
+          {formattedBalance === undefined ? "Loading..." : `${formattedBalance} ETH`}
+        </Text>
+      </View>
+
+      <TouchableOpacity
+        style={[styles.button, (!hasBalance || isLoading) && styles.buttonDisabled]}
+        onPress={handleSendTransaction}
+        disabled={!hasBalance || isLoading}
+      >
+        {isLoading ? (
+          <ActivityIndicator color="#fff" />
+        ) : (
+          <Text style={styles.buttonText}>Send Transaction</Text>
+        )}
+      </TouchableOpacity>
+
+      {error ? (
+        <View style={styles.errorContainer}>
+          <Text style={styles.errorText}>{error}</Text>
+        </View>
+      ) : null}
+
+      {transactionData.status === "success" ? (
+        <View style={styles.successContainer}>
+          <Text style={styles.successTitle}>Transaction Sent!</Text>
+          <View style={styles.hashContainer}>
+            <Text style={styles.hashLabel}>Transaction Hash:</Text>
+            <TouchableOpacity
+              style={styles.hashButton}
+              onPress={() =>
+                copyToClipboard(transactionData.receipt.transactionHash, "Transaction Hash")
+              }
+            >
+              <Text style={styles.hashText}>{transactionData.receipt.transactionHash}</Text>
+              <Text style={styles.copyHint}>📋 Tap to copy</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      ) : null}
+
+      {!hasBalance && (
+        <View style={styles.fundingContainer}>
+          <Text style={styles.fundingTitle}>Get Testnet Funds</Text>
+          <Text style={styles.fundingText}>
+            This example transaction sends a tiny amount of ETH from your wallet to itself.
+          </Text>
+          <Text style={styles.fundingText}>Get some testnet ETH from the Base Sepolia Faucet:</Text>
+          <TouchableOpacity
+            style={styles.faucetButton}
+            onPress={() => {
+              Alert.alert(
+                "Base Sepolia Faucet",
+                `Visit: https://portal.cdp.coinbase.com/products/faucet?token=ETH&address=${evmAddress}`,
+                [
+                  {
+                    text: "Copy URL",
+                    onPress: async () => {
+                      try {
+                        await Clipboard.setStringAsync(
+                          `https://portal.cdp.coinbase.com/products/faucet?token=ETH&address=${evmAddress}`,
+                        );
+                        Alert.alert("Copied!", "Faucet URL copied to clipboard");
+                      } catch (error) {
+                        Alert.alert("Error", "Failed to copy URL");
+                      }
+                    },
+                  },
+                  { text: "OK", style: "default" },
+                ],
+              );
+            }}
+          >
+            <Text style={styles.faucetButtonText}>Base Sepolia Faucet</Text>
+          </TouchableOpacity>
+        </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: 16,
+    textAlign: "center",
+    color: "#111111",
+  },
+  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: "#008080",
+    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,
+  },
+  hashText: {
+    color: "#4caf50",
+    fontSize: 12,
+    fontFamily: "monospace",
+    marginBottom: 4,
+  },
+  fundingContainer: {
+    marginTop: 20,
+    padding: 16,
+    backgroundColor: "rgba(255, 193, 7, 0.1)",
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "rgba(255, 193, 7, 0.3)",
+    width: "100%",
+  },
+  fundingTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#111111",
+    marginBottom: 8,
+    textAlign: "center",
+  },
+  fundingText: {
+    fontSize: 14,
+    color: "#757575",
+    marginBottom: 8,
+    textAlign: "center",
+    lineHeight: 20,
+  },
+  faucetButton: {
+    backgroundColor: "#008080",
+    padding: 12,
+    borderRadius: 8,
+    alignItems: "center",
+    marginTop: 8,
+  },
+  faucetButtonText: {
+    color: "#ffffff",
+    fontSize: 14,
+    fontWeight: "600",
+  },
+  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)",
+  },
+  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 EOATransaction;

package/template-react-native/README.md

@@ -0,0 +1,57 @@
+# React Native Expo Example
+
+A React Native Expo example demonstrating CDP Embedded Wallet SDK integration with React Native hooks.
+
+## Prerequisites
+
+- Node.js 20+ and pnpm.
+- For iOS: Xcode and iOS Simulator.
+- For Android: Android Studio and Android emulator.
+
+## Setup
+
+### Setting up Simulators
+
+#### iOS Simulator
+
+1. Install [Xcode](https://developer.apple.com/xcode/).
+2. On initial load, Xcode will ask which platforms you want to install. Select the iOS platform.
+    - a. If you missed it on initial load, then open Xcode → Preferences → Components.
+    - b. Install the iOS simulator version you want to test
+3. Expo will automatically start the simulator when you run the app.
+
+#### Android Emulator
+
+1. Install Android Studio.
+2. Open Android Studio → AVD Manager.
+3. Create a new virtual device:
+   - Choose a device definition (e.g., Pixel 7).
+   - Select a system image (API level 30+).
+   - Configure settings and finish.
+4. Expo will automatically start the emulator when you run the app.
+
+### Setting up the app
+
+1. Install dependencies:
+   ```bash
+   pnpm install
+   ```
+
+2. Copy environment variables:
+   ```bash
+   cp .env.example .env
+   ```
+
+3. Fill in your CDP API credentials in `.env`.
+
+## Running the App
+
+**iOS:**
+```bash
+pnpm run ios
+```
+
+**Android:**
+```bash
+pnpm run android
+```

package/template-react-native/SmartAccountTransaction.tsx

@@ -0,0 +1,304 @@
+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 { baseSepolia } from "viem/chains";
+
+const client = createPublicClient({
+  chain: baseSepolia,
+  transport: http(),
+});
+
+interface Props {
+  onSuccess?: () => void;
+}
+
+/**
+ * This component demonstrates how to send a gasless transaction using Smart Accounts.
+ *
+ * @param {Props} props - The props for the SmartAccountTransaction component.
+ * @param {() => void} [props.onSuccess] - A function to call when the transaction is successful.
+ * @returns A component that displays a Smart Account transaction form and result.
+ */
+function SmartAccountTransaction(props: Props) {
+  const { onSuccess } = props;
+  const { currentUser } = useCurrentUser();
+  const { sendUserOperation, data, error, status } = useSendUserOperation();
+  const [balance, setBalance] = useState<bigint | undefined>(undefined);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const smartAccount = currentUser?.evmSmartAccounts?.[0];
+
+  const formattedBalance = useMemo(() => {
+    if (balance === undefined) return undefined;
+    return formatEther(balance);
+  }, [balance]);
+
+  const getBalance = useCallback(async () => {
+    if (!smartAccount) return;
+    const balance = await client.getBalance({
+      address: smartAccount,
+    });
+    setBalance(balance);
+  }, [smartAccount]);
+
+  useEffect(() => {
+    getBalance();
+    const interval = setInterval(getBalance, 5000);
+    return () => clearInterval(interval);
+  }, [getBalance]);
+
+  const handleSendUserOperation = async () => {
+    if (!smartAccount) {
+      Alert.alert("Error", "No Smart Account available");
+      return;
+    }
+
+    setErrorMessage("");
+
+    try {
+      // Example: Send a simple transaction (you can customize this)
+      const result = await sendUserOperation({
+        evmSmartAccount: smartAccount,
+        network: "base-sepolia",
+        calls: [
+          {
+            to: smartAccount,
+            value: 0n, // 0 ETH
+          },
+        ],
+      });
+
+      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);
+    }
+  };
+
+  const isLoading = status === "pending";
+  const isSuccess = status === "success" && data;
+
+  const copyToClipboard = async (text: string, label: string) => {
+    try {
+      await Clipboard.setStringAsync(text);
+      Alert.alert("Copied!", `${label} copied to clipboard`);
+    } catch (error) {
+      Alert.alert("Error", "Failed to copy to clipboard");
+    }
+  };
+
+  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>
+      </View>
+
+      <View style={styles.infoContainer}>
+        <Text style={styles.label}>Balance:</Text>
+        <Text style={styles.value}>
+          {formattedBalance === undefined ? "Loading..." : `${formattedBalance} ETH`}
+        </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>
+        )}
+      </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>
+          </View>
+
+          {data.userOpHash && (
+            <View style={styles.hashContainer}>
+              <Text style={styles.hashLabel}>User Op Hash:</Text>
+              <TouchableOpacity
+                style={styles.hashButton}
+                onPress={() => copyToClipboard(data.userOpHash!, "User Operation Hash")}
+              >
+                <Text style={styles.hashText}>{data.userOpHash}</Text>
+                <Text style={styles.copyHint}>📋 Tap to copy</Text>
+              </TouchableOpacity>
+            </View>
+          )}
+        </View>
+      ) : null}
+    </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;