@coinbase/create-cdp-app 0.0.27 → 0.0.29

package/template-react-native/EOATransaction.tsx

@@ -1,10 +1,18 @@
 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 {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Alert,
+  ActivityIndicator,
+  Linking,
+} from "react-native";
 import { createPublicClient, http, formatEther } from "viem";
 import { baseSepolia } from "viem/chains";
+import { useTheme } from "./theme/ThemeContext";
 
 const client = createPublicClient({
   chain: baseSepolia,
@@ -15,15 +23,9 @@ 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 { colors } = useTheme();
   const { evmAddress } = useEvmAddress();
   const [balance, setBalance] = useState<bigint | undefined>(undefined);
   const [error, setError] = useState("");
@@ -55,7 +57,7 @@ function EOATransaction(props: Props) {
 
   const handleSendTransaction = async () => {
     if (!evmAddress || !hasBalance) {
-      Alert.alert("Error", "Insufficient balance or no address available");
+      Alert.alert("Error", "Insufficient balance or no address available.");
       return;
     }
 
@@ -68,21 +70,19 @@ function EOATransaction(props: Props) {
         evmAccount: evmAddress,
         transaction: {
           to: evmAddress,
-          value: 1000000000000n,
+          value: 1000000000n,
           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);
+      Alert.alert("Transaction Failed", errorMessage + (errorMessage.endsWith(".") ? "" : "."));
     } finally {
       setIsLoading(false);
     }
@@ -91,270 +91,229 @@ function EOATransaction(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.");
     }
   };
 
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>EOA Transaction</Text>
+  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: 20,
+        borderWidth: 1,
+        borderColor: colors.border,
+      },
+      sectionTitle: {
+        fontSize: 20,
+        fontWeight: "600",
+        color: colors.text,
+        marginBottom: 8,
+      },
+      sectionDescription: {
+        fontSize: 14,
+        color: colors.textSecondary,
+        marginBottom: 20,
+        lineHeight: 20,
+      },
+      sendButton: {
+        backgroundColor: colors.accent,
+        paddingVertical: 16,
+        borderRadius: 8,
+        alignItems: "center",
+        marginBottom: 16,
+      },
+      sendButtonDisabled: {
+        opacity: 0.6,
+      },
+      sendButtonText: {
+        color: "#ffffff",
+        fontSize: 16,
+        fontWeight: "600",
+      },
+      errorContainer: {
+        backgroundColor: "rgba(255, 0, 0, 0.1)",
+        padding: 12,
+        borderRadius: 8,
+        borderColor: "rgba(255, 0, 0, 0.3)",
+        borderWidth: 1,
+        marginBottom: 16,
+      },
+      errorText: {
+        color: "#cc0000",
+        fontSize: 14,
+      },
+      successContainer: {
+        backgroundColor: colors.accent + "20",
+        padding: 16,
+        borderRadius: 8,
+        borderColor: colors.accent + "50",
+        borderWidth: 1,
+        marginBottom: 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: colors.accent + "20",
+        borderRadius: 6,
+        padding: 12,
+        borderWidth: 1,
+        borderColor: colors.accent + "50",
+      },
+      hashText: {
+        color: colors.accent,
+        fontSize: 12,
+        fontFamily: "monospace",
+        marginBottom: 4,
+      },
+      copyHint: {
+        color: colors.accent,
+        fontSize: 10,
+        fontStyle: "italic",
+        textAlign: "center",
+      },
+    });
 
-      <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>
+  const styles = createStyles();
 
-      <View style={styles.infoContainer}>
-        <Text style={styles.label}>Balance:</Text>
-        <Text style={styles.value}>
-          {formattedBalance === undefined ? "Loading..." : `${formattedBalance} ETH`}
+  return (
+    <View style={styles.container}>
+      {/* Balance Section */}
+      <View style={styles.balanceSection}>
+        <Text style={styles.balanceTitle}>Current Balance</Text>
+        <Text style={styles.balanceAmount}>
+          {formattedBalance === undefined
+            ? "Loading..."
+            : `${parseFloat(formattedBalance).toFixed(8)} 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>
+        {!hasBalance && (
           <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" },
-                ],
-              );
+              const ethFaucetUrl = `https://portal.cdp.coinbase.com/products/faucet?token=ETH&address=${evmAddress}`;
+              Alert.alert("Get testnet ETH", "", [
+                {
+                  text: "Copy ETH Faucet Link",
+                  onPress: () => copyToClipboard(ethFaucetUrl, "ETH Faucet Link"),
+                },
+                {
+                  text: "Open ETH Faucet",
+                  onPress: () => Linking.openURL(ethFaucetUrl),
+                  style: "default",
+                },
+                { text: "Cancel", style: "cancel" },
+              ]);
             }}
           >
-            <Text style={styles.faucetButtonText}>Base Sepolia Faucet</Text>
+            <Text style={styles.faucetButtonText}>Get funds from faucet</Text>
           </TouchableOpacity>
-        </View>
-      )}
+        )}
+      </View>
+
+      {/* Transaction Section */}
+      <View style={styles.transactionSection}>
+        <Text style={styles.sectionTitle}>Transfer ETH</Text>
+        <Text style={styles.sectionDescription}>
+          This example transaction sends a tiny amount of ETH from your wallet to itself. This
+          transfer carries a small transaction fee, so you will see your balance decrease despite
+          transferring to yourself.
+        </Text>
+
+        <TouchableOpacity
+          style={[styles.sendButton, (!hasBalance || isLoading) && styles.sendButtonDisabled]}
+          onPress={handleSendTransaction}
+          disabled={!hasBalance || isLoading}
+        >
+          {isLoading ? (
+            <ActivityIndicator color="#fff" />
+          ) : (
+            <Text style={styles.sendButtonText}>Transfer</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}>Transfer Complete</Text>
+            <View style={styles.hashContainer}>
+              <Text style={styles.hashLabel}>Transaction Hash:</Text>
+              <TouchableOpacity
+                style={styles.hashButton}
+                onPress={() =>
+                  copyToClipboard(
+                    `https://sepolia.basescan.org/tx/${transactionData.receipt.transactionHash}`,
+                    "Block Explorer Link",
+                  )
+                }
+              >
+                <Text style={styles.hashText}>{transactionData.receipt.transactionHash}</Text>
+                <Text style={styles.copyHint}>Tap to copy block explorer link</Text>
+              </TouchableOpacity>
+            </View>
+          </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: 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;