@coinbase/create-cdp-app 0.0.38 → 0.0.41

package/template-react/src/SolanaTransaction.tsx

@@ -1,126 +1,135 @@
 import { Buffer } from "buffer";
 
-import { useSolanaAddress, useSignSolanaTransaction } from "@coinbase/cdp-hooks";
+import { useSolanaAddress } from "@coinbase/cdp-hooks";
+import {
+  SendSolanaTransactionButton,
+  type SendSolanaTransactionButtonProps,
+} from "@coinbase/cdp-react/components/SendSolanaTransactionButton";
 import { Button } from "@coinbase/cdp-react/components/ui/Button";
+import { LoadingSkeleton } from "@coinbase/cdp-react/components/ui/LoadingSkeleton";
 import {
   PublicKey,
   Transaction,
   SystemProgram,
   SYSVAR_RECENT_BLOCKHASHES_PUBKEY,
 } from "@solana/web3.js";
-import { useEffect, useState } from "react";
-
-import { IconCheck, IconCopy } from "./Icons";
+import { useMemo, useState } from "react";
 
 interface Props {
+  balance?: string;
   onSuccess?: () => void;
 }
 
 /**
- * Solana transaction component that demonstrates signing transactions.
+ * This component demonstrates how to send a Solana transaction.
  *
- * @param props - The component props
+ * @param {Props} props - The props for the SolanaTransaction component.
+ * @param {string} [props.balance] - The user's balance.
+ * @param {() => void} [props.onSuccess] - A function to call when the transaction is successful.
+ * @returns A component that displays a transaction form and a transaction signature.
  */
 function SolanaTransaction(props: Props) {
-  const { onSuccess } = props;
+  const { balance, onSuccess } = props;
   const { solanaAddress } = useSolanaAddress();
+  const [transactionSignature, setTransactionSignature] = useState("");
   const [error, setError] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [signedTransaction, setSignedTransaction] = useState<string | null>(null);
-  const { signSolanaTransaction } = useSignSolanaTransaction();
-  const [isCopied, setIsCopied] = useState(false);
-
-  const handleSignTransaction = async () => {
-    if (!solanaAddress) {
-      alert("No Solana address available.");
-      return;
-    }
-
-    setIsLoading(true);
-    setError("");
-    setSignedTransaction(null);
-
-    try {
-      const transaction = createAndEncodeTransaction(solanaAddress);
-      const result = await signSolanaTransaction({
-        solanaAccount: solanaAddress,
-        transaction,
-      });
-
-      setSignedTransaction(result.signedTransaction);
-      onSuccess?.();
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : "Transaction signing failed";
-      setError(errorMessage);
-      alert(`Transaction Failed: ${errorMessage}`);
-    } finally {
-      setIsLoading(false);
-    }
+
+  const hasBalance = useMemo(() => {
+    return balance && balance !== "0";
+  }, [balance]);
+
+  const transaction = useMemo(() => {
+    if (!solanaAddress) return "";
+    return createAndEncodeTransaction(solanaAddress);
+  }, [solanaAddress]);
+
+  const handleTransactionError: SendSolanaTransactionButtonProps["onError"] = error => {
+    setTransactionSignature("");
+    setError(error.message);
   };
 
-  const copyTransaction = async () => {
-    if (!signedTransaction) return;
-    try {
-      await navigator.clipboard.writeText(signedTransaction);
-      setIsCopied(true);
-    } catch (error) {
-      console.error(error);
-    }
+  const handleTransactionSuccess: SendSolanaTransactionButtonProps["onSuccess"] = signature => {
+    setTransactionSignature(signature);
+    setError("");
+    onSuccess?.();
   };
 
-  useEffect(() => {
-    if (!isCopied) return;
-    const timeout = setTimeout(() => {
-      setIsCopied(false);
-    }, 2000);
-    return () => clearTimeout(timeout);
-  }, [isCopied]);
+  const handleReset = () => {
+    setTransactionSignature("");
+    setError("");
+  };
 
   return (
-    <div className="transaction-container">
-      <div className="transaction-section">
-        <h3>Sign Solana Transaction</h3>
-        <p className="transaction-description">
-          This example demonstrates signing a Solana transaction with your embedded wallet.
-        </p>
-
-        <Button
-          className="tx-button"
-          onClick={handleSignTransaction}
-          variant="secondary"
-          disabled={!solanaAddress || isLoading}
-        >
-          {isLoading ? "Signing..." : "Sign Transaction"}
-        </Button>
-
-        {error && (
-          <div className="error-container">
-            <p className="error-text">{error}</p>
-          </div>
-        )}
-
-        {signedTransaction && (
-          <div className="success-container">
-            <h4>Transaction Signed Successfully</h4>
-            <div className="transaction-result">
-              <label>Signed Transaction:</label>
-              <Button
-                aria-label="copy signed transaction"
-                className="flex-row-container copy-address-button"
-                onClick={copyTransaction}
-              >
-                {!isCopied && <IconCopy className="user-icon user-icon--copy" />}
-                {isCopied && <IconCheck className="user-icon user-icon--check" />}
-                <span className="wallet-address">
-                  {signedTransaction.slice(0, 4)}...{signedTransaction.slice(-4)}
-                </span>
+    <>
+      {balance === undefined && (
+        <>
+          <h2 className="card-title">Send a Solana transaction</h2>
+          <LoadingSkeleton className="loading--text" />
+          <LoadingSkeleton className="loading--btn" />
+        </>
+      )}
+      {balance !== undefined && (
+        <>
+          {!transactionSignature && error && (
+            <>
+              <h2 className="card-title">Oops</h2>
+              <p>{error}</p>
+              <Button className="tx-button" onClick={handleReset} variant="secondary">
+                Reset and try again
+              </Button>
+            </>
+          )}
+          {!transactionSignature && !error && (
+            <>
+              <h2 className="card-title">Send a Solana transaction</h2>
+              {hasBalance && solanaAddress && (
+                <>
+                  <p>Send 1 Lamport to yourself on Solana Devnet</p>
+                  <SendSolanaTransactionButton
+                    account={solanaAddress}
+                    network="solana-devnet"
+                    transaction={transaction}
+                    onError={handleTransactionError}
+                    onSuccess={handleTransactionSuccess}
+                  />
+                </>
+              )}
+              {!hasBalance && (
+                <>
+                  <p>
+                    This example transaction sends a tiny amount of SOL from your wallet to itself.
+                  </p>
+                  <p>
+                    Get some from{" "}
+                    <a href="https://faucet.solana.com/" target="_blank" rel="noopener noreferrer">
+                      Solana Devnet Faucet
+                    </a>
+                  </p>
+                </>
+              )}
+            </>
+          )}
+          {transactionSignature && (
+            <>
+              <h2 className="card-title">Transaction sent</h2>
+              <p>
+                Transaction signature:{" "}
+                <a
+                  href={`https://explorer.solana.com/tx/${transactionSignature}?cluster=devnet`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {transactionSignature.slice(0, 6)}...{transactionSignature.slice(-4)}
+                </a>
+              </p>
+              <Button variant="secondary" className="tx-button" onClick={handleReset}>
+                Send another transaction
               </Button>
-              <small>Click to copy signed transaction</small>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
+            </>
+          )}
+        </>
+      )}
+    </>
   );
 }
 

package/template-react-native/App.tsx

@@ -20,15 +20,37 @@ import { DarkModeToggle } from "./components/DarkModeToggle";
 import { WalletHeader } from "./components/WalletHeader";
 import { AuthMethod } from "./types";
 
-const cdpConfig: Config = {
+const ethereumAccountType = process.env.EXPO_PUBLIC_CDP_CREATE_ETHEREUM_ACCOUNT_TYPE
+  ? process.env.EXPO_PUBLIC_CDP_CREATE_ETHEREUM_ACCOUNT_TYPE === "smart"
+    ? "smart"
+    : "eoa"
+  : undefined;
+
+const solanaAccountType = process.env.EXPO_PUBLIC_CDP_CREATE_SOLANA_ACCOUNT
+  ? process.env.EXPO_PUBLIC_CDP_CREATE_SOLANA_ACCOUNT === "true"
+  : undefined;
+
+if (!ethereumAccountType && !solanaAccountType) {
+  throw new Error(
+    "Either EXPO_PUBLIC_CDP_CREATE_ETHEREUM_ACCOUNT_TYPE or EXPO_PUBLIC_CDP_CREATE_SOLANA_ACCOUNT must be defined",
+  );
+}
+
+const cdpConfig = {
   projectId: process.env.EXPO_PUBLIC_CDP_PROJECT_ID,
   basePath: process.env.EXPO_PUBLIC_CDP_BASE_PATH,
-  ethereum: {
-    createOnLogin:
-      process.env.EXPO_PUBLIC_CDP_CREATE_ETHEREUM_ACCOUNT_TYPE === "smart" ? "smart" : "eoa",
-  },
+  ...(ethereumAccountType && {
+    ethereum: {
+      createOnLogin: ethereumAccountType,
+    },
+  }),
+  ...(solanaAccountType && {
+    solana: {
+      createOnLogin: solanaAccountType,
+    },
+  }),
   useMock: process.env.EXPO_PUBLIC_CDP_USE_MOCK === "true",
-};
+} as Config;
 
 /**
  * A multi-step authentication component that handles email and SMS-based sign-in flows.

package/template-react-native/SolanaTransaction.tsx

@@ -0,0 +1,368 @@
+import { Buffer } from "buffer";
+
+import { useSolanaAddress, useSendSolanaTransaction } 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,
+  Linking,
+} from "react-native";
+import {
+  PublicKey,
+  Transaction,
+  SystemProgram,
+  SYSVAR_RECENT_BLOCKHASHES_PUBKEY,
+  Connection,
+  clusterApiUrl,
+  LAMPORTS_PER_SOL,
+} from "@solana/web3.js";
+import { useTheme } from "./theme/ThemeContext";
+
+interface Props {
+  onSuccess?: () => void;
+}
+
+const SOLANA_FAUCET_ADDRESS = "EeVPcnRE1mhcY85wAh3uPJG1uFiTNya9dCJjNUPABXzo";
+
+const connection = new Connection(clusterApiUrl("devnet"), "confirmed");
+
+function SolanaTransaction(props: Props) {
+  const { onSuccess } = props;
+  const { colors } = useTheme();
+  const { solanaAddress } = useSolanaAddress();
+  const [balance, setBalance] = useState<number | undefined>(undefined);
+  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const { sendSolanaTransaction: sendTransaction } = useSendSolanaTransaction();
+  const [transactionSignature, setTransactionSignature] = useState<string | undefined>(undefined);
+
+  const formattedBalance = useMemo(() => {
+    if (balance === undefined) return undefined;
+    return (balance / LAMPORTS_PER_SOL).toFixed(6);
+  }, [balance]);
+
+  const hasBalance = useMemo(() => {
+    return formattedBalance && parseFloat(formattedBalance) > 0;
+  }, [formattedBalance]);
+
+  const getBalance = useCallback(async () => {
+    if (!solanaAddress) return;
+    try {
+      const balance = await connection.getBalance(new PublicKey(solanaAddress));
+      setBalance(balance);
+    } catch (error) {
+      console.error("Failed to fetch balance:", error);
+    }
+  }, [solanaAddress]);
+
+  useEffect(() => {
+    getBalance();
+    const interval = setInterval(getBalance, 5000);
+    return () => clearInterval(interval);
+  }, [getBalance]);
+
+  const transaction = useMemo(() => {
+    if (!solanaAddress) return "";
+    return createAndEncodeTransaction(solanaAddress);
+  }, [solanaAddress]);
+
+  const handleSendTransaction = async () => {
+    if (!solanaAddress) {
+      Alert.alert("Error", "No Solana address available.");
+      return;
+    }
+
+    setIsLoading(true);
+    setError("");
+    setTransactionSignature(undefined);
+
+    try {
+      const result = await sendTransaction({
+        network: "solana-devnet",
+        solanaAccount: solanaAddress,
+        transaction,
+      });
+
+      onSuccess?.();
+      setTransactionSignature(result.transactionSignature);
+      getBalance();
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Transaction failed";
+      setError(errorMessage);
+      Alert.alert("Transaction Failed", errorMessage + (errorMessage.endsWith(".") ? "" : "."));
+    } 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.");
+    }
+  };
+
+  const openFaucet = () => {
+    const solanaFaucetUrl = `https://portal.cdp.coinbase.com/products/faucet?network=solana-devnet&token=SOL&address=${solanaAddress}`;
+    Alert.alert(
+      "Get testnet SOL",
+      "",
+      [
+        {
+          text: "Copy SOL Faucet Link",
+          onPress: () => copyToClipboard(solanaFaucetUrl, "SOL Faucet Link"),
+        },
+        {
+          text: "Open SOL Faucet",
+          onPress: () => Linking.openURL(solanaFaucetUrl),
+          style: "default",
+        },
+        { text: "Cancel", style: "cancel" },
+      ],
+      { cancelable: true },
+    );
+  };
+
+  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",
+      },
+      faucetLink: {
+        color: colors.accent,
+        textDecorationLine: "underline",
+      },
+    });
+
+  const styles = createStyles();
+
+  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..." : `${formattedBalance} SOL`}
+        </Text>
+        {!hasBalance && (
+          <TouchableOpacity style={styles.faucetButton} onPress={openFaucet}>
+            <Text style={styles.faucetButtonText}>Get funds from faucet</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+
+      {/* Transaction Section */}
+      <View style={styles.transactionSection}>
+        <Text style={styles.sectionTitle}>Transfer SOL</Text>
+        <Text style={styles.sectionDescription}>
+          This example transaction sends 1 Lamport from your wallet to yourself on{" "}
+          <Text style={styles.faucetLink} onPress={openFaucet}>
+            CDP Faucet
+          </Text>
+          .
+        </Text>
+
+        <TouchableOpacity
+          style={[styles.sendButton, (!solanaAddress || isLoading) && styles.sendButtonDisabled]}
+          onPress={handleSendTransaction}
+          disabled={!solanaAddress || 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}
+
+        {transactionSignature ? (
+          <View style={styles.successContainer}>
+            <Text style={styles.successTitle}>Transfer Complete</Text>
+            <View style={styles.hashContainer}>
+              <Text style={styles.hashLabel}>Transaction Signature:</Text>
+              <TouchableOpacity
+                style={styles.hashButton}
+                onPress={() =>
+                  copyToClipboard(
+                    `https://explorer.solana.com/tx/${transactionSignature}?cluster=devnet`,
+                    "Block Explorer Link",
+                  )
+                }
+              >
+                <Text style={styles.hashText}>{transactionSignature}</Text>
+                <Text style={styles.copyHint}>Tap to copy block explorer link</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+/**
+ * Creates and encodes a Solana transaction.
+ *
+ * @param address - The address of the sender.
+ * @returns The base64 encoded transaction.
+ */
+function createAndEncodeTransaction(address: string) {
+  const recipientAddress = new PublicKey(SOLANA_FAUCET_ADDRESS);
+  const fromPubkey = new PublicKey(address);
+  const transferAmount = 1; // 1 Lamport
+
+  const transaction = new Transaction().add(
+    SystemProgram.transfer({
+      fromPubkey,
+      toPubkey: recipientAddress,
+      lamports: transferAmount,
+    }),
+  );
+
+  transaction.recentBlockhash = SYSVAR_RECENT_BLOCKHASHES_PUBKEY.toBase58();
+  transaction.feePayer = fromPubkey;
+
+  const serializedTransaction = transaction.serialize({
+    requireAllSignatures: false,
+  });
+
+  return Buffer.from(serializedTransaction).toString("base64");
+}
+
+export default SolanaTransaction;