@coinbase/create-cdp-app 0.0.38 → 0.0.41

package/template-nextjs/src/components/SignedInScreenWithOnramp.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useEvmAddress, useIsSignedIn } from "@coinbase/cdp-hooks";
+import { useEvmAddress, useIsSignedIn, useSolanaAddress } from "@coinbase/cdp-hooks";
+import { Connection, clusterApiUrl, LAMPORTS_PER_SOL, PublicKey } from "@solana/web3.js";
 import { useCallback, useEffect, useMemo, useState, lazy, Suspense } from "react";
 import {
   createPublicClient,
@@ -16,8 +17,8 @@ import FundWallet from "@/components/FundWallet";
 import Header from "@/components/Header";
 import UserBalance from "@/components/UserBalance";
 
-// Dynamically determine component path (Onramp only supports EVM for now, Solana support will be added later)
-const getComponentPath = () => {
+// Dynamically determine component path for EVM transactions
+const getEVMComponentPath = () => {
   const isSmartAccount = process.env.NEXT_PUBLIC_CDP_CREATE_ETHEREUM_ACCOUNT_TYPE === "smart";
 
   if (isSmartAccount) {
@@ -27,7 +28,8 @@ const getComponentPath = () => {
   }
 };
 
-const TransactionComponent = lazy(() => import(/* @vite-ignore */ getComponentPath()));
+const EVMTransactionComponent = lazy(() => import(/* @vite-ignore */ getEVMComponentPath()));
+const SolanaTransactionComponent = lazy(() => import("@/components/SolanaTransaction"));
 
 /**
  * Create a viem client to access user's balance on the Base network
@@ -45,7 +47,17 @@ const sepoliaClient = createPublicClient({
   transport: http(),
 });
 
-const useBalance = (
+/**
+ * Create a Solana connection to access user's balance on Solana Mainnet
+ */
+const solanaMainnetConnection = new Connection(clusterApiUrl("mainnet-beta"));
+
+/**
+ * Create a Solana connection to access user's balance on Solana Devnet
+ */
+const solanaDevnetConnection = new Connection(clusterApiUrl("devnet"));
+
+const useEvmBalance = (
   address: Address | null,
   client: PublicClient<Transport, typeof base | typeof baseSepolia, undefined, undefined>,
   poll = false,
@@ -75,56 +87,152 @@ const useBalance = (
   return { balance, formattedBalance, getBalance };
 };
 
+const useSolanaBalance = (address: string | null, connection: Connection, poll = false) => {
+  const [balance, setBalance] = useState<bigint | undefined>(undefined);
+
+  const formattedBalance = useMemo(() => {
+    if (balance === undefined) return undefined;
+    // Convert lamports to SOL
+    return formatSol(Number(balance));
+  }, [balance]);
+
+  const getBalance = useCallback(async () => {
+    if (!address) return;
+    try {
+      const lamports = await connection.getBalance(new PublicKey(address));
+      setBalance(BigInt(lamports));
+    } catch (error) {
+      console.error("Error fetching Solana balance:", error);
+      setBalance(BigInt(0));
+    }
+  }, [address, connection]);
+
+  useEffect(() => {
+    if (!poll) {
+      return;
+    }
+    getBalance();
+    const interval = setInterval(getBalance, 500);
+    return () => clearInterval(interval);
+  }, [getBalance, poll]);
+
+  return { balance, formattedBalance, getBalance };
+};
+
+/**
+ * Format a Solana balance.
+ *
+ * @param lamports - The balance in lamports.
+ * @returns The formatted balance.
+ */
+function formatSol(lamports: number) {
+  const maxDecimalPlaces = 9;
+  const roundedStr = (lamports / LAMPORTS_PER_SOL).toFixed(maxDecimalPlaces);
+  return roundedStr.replace(/0+$/, "").replace(/\.$/, "");
+}
+
 /**
- * The Signed In screen
+ * The Signed In screen with onramp support for both EVM and Solana
  */
 export default function SignedInScreen() {
   const { isSignedIn } = useIsSignedIn();
   const { evmAddress } = useEvmAddress();
+  const { solanaAddress } = useSolanaAddress();
 
-  // Onramp only supports EVM accounts
+  const { formattedBalance, getBalance } = useEvmBalance(evmAddress, client, true);
+  const { formattedBalance: formattedBalanceSepolia, getBalance: getBalanceSepolia } =
+    useEvmBalance(evmAddress, sepoliaClient, true);
 
-  const { formattedBalance, getBalance } = useBalance(evmAddress, client, true);
-  const { formattedBalance: formattedBalanceSepolia, getBalance: getBalanceSepolia } = useBalance(
-    evmAddress,
-    sepoliaClient,
-    true,
-  );
+  const { formattedBalance: formattedBalanceSolana, getBalance: getBalanceSolana } =
+    useSolanaBalance(solanaAddress, solanaMainnetConnection);
+  const { formattedBalance: formattedBalanceSolanaDevnet, getBalance: getBalanceSolanaDevnet } =
+    useSolanaBalance(solanaAddress, solanaDevnetConnection, true);
 
   return (
     <>
       <Header />
       <main className="main flex-col-container flex-grow">
-        <p className="page-heading">Fund your wallet on Base</p>
-        <div className="main-inner flex-col-container">
-          <div className="card card--user-balance">
-            <UserBalance balance={formattedBalance} />
-          </div>
-          <div className="card card--transaction">
-            {isSignedIn && evmAddress && <FundWallet onSuccess={getBalance} />}
-          </div>
-        </div>
-        <hr className="page-divider" />
-        <p className="page-heading">Send a transaction on Base Sepolia</p>
-        <div className="main-inner flex-col-container">
-          <div className="card card--user-balance">
-            <UserBalance
-              balance={formattedBalanceSepolia}
-              faucetName="Base Sepolia Faucet"
-              faucetUrl="https://portal.cdp.coinbase.com/products/faucet"
-            />
-          </div>
-          <div className="card card--transaction">
-            {isSignedIn && evmAddress && (
-              <Suspense fallback={<div>Loading transaction component...</div>}>
-                <TransactionComponent
+        {evmAddress && (
+          <>
+            <p className="page-heading">Fund your EVM wallet on Base</p>
+            <div className="main-inner flex-col-container">
+              <div className="card card--user-balance">
+                <UserBalance balance={formattedBalance} />
+              </div>
+              <div className="card card--transaction">
+                {isSignedIn && (
+                  <FundWallet
+                    onSuccess={getBalance}
+                    network="base"
+                    cryptoCurrency="eth"
+                    destinationAddress={evmAddress}
+                  />
+                )}
+              </div>
+            </div>
+            <hr className="page-divider" />
+            <p className="page-heading">Send an EVM transaction on Base Sepolia</p>
+            <div className="main-inner flex-col-container">
+              <div className="card card--user-balance">
+                <UserBalance
                   balance={formattedBalanceSepolia}
-                  onSuccess={getBalanceSepolia}
+                  faucetName="Base Sepolia Faucet"
+                  faucetUrl="https://portal.cdp.coinbase.com/products/faucet"
+                />
+              </div>
+              <div className="card card--transaction">
+                {isSignedIn && (
+                  <Suspense fallback={<div>Loading transaction component...</div>}>
+                    <EVMTransactionComponent
+                      balance={formattedBalanceSepolia}
+                      onSuccess={getBalanceSepolia}
+                    />
+                  </Suspense>
+                )}
+              </div>
+            </div>
+          </>
+        )}
+
+        {solanaAddress && (
+          <>
+            {evmAddress && <hr className="page-divider" />}
+            <p className="page-heading">Fund your Solana wallet on Mainnet</p>
+            <div className="main-inner flex-col-container">
+              <div className="card card--user-balance">
+                <UserBalance balance={formattedBalanceSolana} />
+              </div>
+              <div className="card card--transaction">
+                {isSignedIn && (
+                  <FundWallet
+                    onSuccess={getBalanceSolana}
+                    network="solana"
+                    cryptoCurrency="sol"
+                    destinationAddress={solanaAddress}
+                  />
+                )}
+              </div>
+            </div>
+            <hr className="page-divider" />
+            <p className="page-heading">Send a Solana transaction on Devnet</p>
+            <div className="main-inner flex-col-container">
+              <div className="card card--user-balance">
+                <UserBalance
+                  balance={formattedBalanceSolanaDevnet}
+                  faucetName="Solana Devnet Faucet"
+                  faucetUrl="https://portal.cdp.coinbase.com/products/faucet?network=solana-devnet"
                 />
-              </Suspense>
-            )}
-          </div>
-        </div>
+              </div>
+              <div className="card card--transaction">
+                {isSignedIn && (
+                  <Suspense fallback={<div>Loading transaction component...</div>}>
+                    <SolanaTransactionComponent onSuccess={getBalanceSolanaDevnet} />
+                  </Suspense>
+                )}
+              </div>
+            </div>
+          </>
+        )}
       </main>
     </>
   );

package/template-nextjs/src/components/SolanaTransaction.tsx

@@ -2,126 +2,136 @@
 
 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.
  */
 export default 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);
-    } 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>
-              </button>
-              <small>Click to copy signed transaction</small>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
+    <>
+      {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, 4)}...{transactionSignature.slice(-4)}
+                </a>
+              </p>
+              <Button variant="secondary" className="tx-button" onClick={handleReset}>
+                Send another transaction
+              </Button>
+            </>
+          )}
+        </>
+      )}
+    </>
   );
 }
 

package/template-nextjs/src/lib/onramp-api.ts

@@ -24,10 +24,12 @@ export const getBuyOptions: FetchBuyOptions = async params => {
 
     if (!response.ok) {
       const errorData = await response.json();
+      console.error("getBuyOptions: API error:", errorData);
       throw new Error(errorData.error || "Failed to fetch buy options");
     }
 
-    return await response.json();
+    const result = await response.json();
+    return result;
   } catch (error) {
     console.error("Error fetching buy options:", error);
     throw error;
@@ -52,10 +54,12 @@ export const createBuyQuote: FetchBuyQuote = async request => {
 
     if (!response.ok) {
       const errorData = await response.json();
+      console.error("createBuyQuote: API error:", errorData);
       throw new Error(errorData.error || "Failed to create buy quote");
     }
 
-    return await response.json();
+    const result = await response.json();
+    return result;
   } catch (error) {
     console.error("Error creating buy quote:", error);
     throw error;

package/template-react/src/EOATransaction.tsx

@@ -1,8 +1,8 @@
 import { useEvmAddress } from "@coinbase/cdp-hooks";
 import {
-  SendTransactionButton,
-  type SendTransactionButtonProps,
-} from "@coinbase/cdp-react/components/SendTransactionButton";
+  SendEvmTransactionButton,
+  type SendEvmTransactionButtonProps,
+} from "@coinbase/cdp-react/components/SendEvmTransactionButton";
 import { Button } from "@coinbase/cdp-react/components/ui/Button";
 import { LoadingSkeleton } from "@coinbase/cdp-react/components/ui/LoadingSkeleton";
 import { useMemo, useState } from "react";
@@ -30,7 +30,7 @@ function EOATransaction(props: Props) {
     return balance && balance !== "0";
   }, [balance]);
 
-  const transaction = useMemo<SendTransactionButtonProps["transaction"]>(() => {
+  const transaction = useMemo<SendEvmTransactionButtonProps["transaction"]>(() => {
     return {
       to: evmAddress, // Send to yourself for testing
       value: 1000000000000n, // 0.000001 ETH in wei
@@ -40,12 +40,12 @@ function EOATransaction(props: Props) {
     };
   }, [evmAddress]);
 
-  const handleTransactionError: SendTransactionButtonProps["onError"] = error => {
+  const handleTransactionError: SendEvmTransactionButtonProps["onError"] = error => {
     setTransactionHash("");
     setError(error.message);
   };
 
-  const handleTransactionSuccess: SendTransactionButtonProps["onSuccess"] = hash => {
+  const handleTransactionSuccess: SendEvmTransactionButtonProps["onSuccess"] = hash => {
     setTransactionHash(hash);
     setError("");
     onSuccess?.();
@@ -82,7 +82,7 @@ function EOATransaction(props: Props) {
               {hasBalance && evmAddress && (
                 <>
                   <p>Send 0.000001 ETH to yourself on Base Sepolia</p>
-                  <SendTransactionButton
+                  <SendEvmTransactionButton
                     account={evmAddress}
                     network="base-sepolia"
                     transaction={transaction}

package/template-react/src/SignedInScreen.tsx

@@ -47,7 +47,6 @@ function SignedInScreen() {
   const { solanaAddress } = useSolanaAddress();
   const [balance, setBalance] = useState<bigint | undefined>(undefined);
 
-  const isSolana = !!CDP_CONFIG.solana;
   const address = isSolana ? solanaAddress : evmAddress;
 
   const formattedBalance = useMemo(() => {
@@ -59,7 +58,7 @@ function SignedInScreen() {
       // Convert wei to ETH
       return formatEther(balance);
     }
-  }, [balance, isSolana]);
+  }, [balance]);
 
   const getBalance = useCallback(async () => {
     if (isSolana && solanaAddress) {
@@ -73,7 +72,7 @@ function SignedInScreen() {
       });
       setBalance(weiBalance);
     }
-  }, [evmAddress, solanaAddress, isSolana]);
+  }, [evmAddress, solanaAddress]);
 
   useEffect(() => {
     getBalance();