@coinbase/create-cdp-app 0.0.43 → 0.0.44

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

@@ -0,0 +1,121 @@
+"use client";
+
+import { useIsSignedIn, useSolanaAddress } from "@coinbase/cdp-hooks";
+import { Connection, clusterApiUrl, LAMPORTS_PER_SOL, PublicKey } from "@solana/web3.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import Header from "./Header";
+import SolanaTransaction from "./SolanaTransaction";
+import UserBalance from "./UserBalance";
+
+import FundWallet from "@/components/FundWallet";
+
+/**
+ * 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 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) {
+      getBalance();
+      return;
+    }
+    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 with onramp support
+ */
+export default function SignedInScreen() {
+  const { isSignedIn } = useIsSignedIn();
+  const { solanaAddress } = useSolanaAddress();
+
+  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 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"
+            />
+          </div>
+          <div className="card card--transaction">
+            {isSignedIn && (
+              <SolanaTransaction
+                balance={formattedBalanceSolanaDevnet}
+                onSuccess={getBalanceSolanaDevnet}
+              />
+            )}
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}

package/template-nextjs/src/components/solana/UserBalance.tsx

@@ -0,0 +1,43 @@
+"use client";
+import { LoadingSkeleton } from "@coinbase/cdp-react/components/ui/LoadingSkeleton";
+
+interface Props {
+  balance?: string;
+  faucetUrl?: string;
+  faucetName?: string;
+}
+
+/**
+ * A component that displays the user's balance.
+ *
+ * @param {Props} props - The props for the UserBalance component.
+ * @param {string} [props.balance] - The user's balance.
+ * @returns A component that displays the user's balance.
+ */
+export default function UserBalance(props: Props) {
+  const { balance, faucetUrl, faucetName } = props;
+
+  return (
+    <>
+      <h2 className="card-title">Available balance</h2>
+      <p className="user-balance flex-col-container flex-grow">
+        {balance === undefined && <LoadingSkeleton as="span" className="loading--balance" />}
+        {balance !== undefined && (
+          <span className="flex-row-container">
+            <img src="/sol.svg" alt="" className="balance-icon" />
+            <span>{balance}</span>
+            <span className="sr-only">Solana</span>
+          </span>
+        )}
+      </p>
+      {faucetUrl && faucetName && (
+        <p>
+          Get testnet SOL from{" "}
+          <a href={faucetUrl} target="_blank" rel="noopener noreferrer">
+            {faucetName}
+          </a>
+        </p>
+      )}
+    </>
+  );
+}

package/template-react/src/evm-eoa/Header.tsx

@@ -0,0 +1,67 @@
+import { useEvmAddress } from "@coinbase/cdp-hooks";
+import { AuthButton } from "@coinbase/cdp-react/components/AuthButton";
+import { useCallback, useEffect, useState } from "react";
+
+import { IconCheck, IconCopy, IconUser } from "./Icons";
+
+/**
+ * Header component
+ */
+function Header() {
+  const { evmAddress } = useEvmAddress();
+  const [isCopied, setIsCopied] = useState(false);
+
+  const formatAddress = useCallback((address: string) => {
+    if (!address) return "";
+    return `${address.slice(0, 6)}...${address.slice(-4)}`;
+  }, []);
+
+  const copyAddress = async () => {
+    if (!evmAddress) return;
+    try {
+      await navigator.clipboard.writeText(evmAddress);
+      setIsCopied(true);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    if (!isCopied) return;
+    const timeout = setTimeout(() => {
+      setIsCopied(false);
+    }, 2000);
+    return () => clearTimeout(timeout);
+  }, [isCopied]);
+
+  return (
+    <header>
+      <div className="header-inner">
+        <div className="title-container">
+          <h1 className="site-title">CDP React StarterKit</h1>
+        </div>
+        <div className="user-info flex-row-container">
+          {evmAddress && (
+            <button
+              aria-label="copy wallet address"
+              className="flex-row-container copy-address-button"
+              onClick={copyAddress}
+            >
+              {!isCopied && (
+                <>
+                  <IconUser className="user-icon user-icon--user" />
+                  <IconCopy className="user-icon user-icon--copy" />
+                </>
+              )}
+              {isCopied && <IconCheck className="user-icon user-icon--check" />}
+              <span className="wallet-address">{formatAddress(evmAddress)}</span>
+            </button>
+          )}
+          <AuthButton />
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default Header;

package/template-react/src/evm-eoa/SignedInScreen.tsx

@@ -0,0 +1,64 @@
+import { useEvmAddress, useIsSignedIn } from "@coinbase/cdp-hooks";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createPublicClient, http, formatEther } from "viem";
+import { baseSepolia } from "viem/chains";
+
+import EOATransaction from "./EOATransaction";
+import Header from "./Header";
+import UserBalance from "./UserBalance";
+
+/**
+ * Create a viem client to access user's balance on the Base Sepolia network
+ */
+const client = createPublicClient({
+  chain: baseSepolia,
+  transport: http(),
+});
+
+/**
+ * The Signed In screen
+ */
+function SignedInScreen() {
+  const { isSignedIn } = useIsSignedIn();
+  const { evmAddress } = useEvmAddress();
+  const [balance, setBalance] = useState<bigint | undefined>(undefined);
+
+  const formattedBalance = useMemo(() => {
+    if (balance === undefined) return undefined;
+    return formatEther(balance);
+  }, [balance]);
+
+  const getBalance = useCallback(async () => {
+    if (!evmAddress) return;
+    const weiBalance = await client.getBalance({
+      address: evmAddress,
+    });
+    setBalance(weiBalance);
+  }, [evmAddress]);
+
+  useEffect(() => {
+    getBalance();
+    const interval = setInterval(getBalance, 500);
+    return () => clearInterval(interval);
+  }, [getBalance]);
+
+  return (
+    <>
+      <Header />
+      <main className="main flex-col-container flex-grow">
+        <div className="main-inner flex-col-container">
+          <div className="card card--user-balance">
+            <UserBalance balance={formattedBalance} />
+          </div>
+          <div className="card card--transaction">
+            {isSignedIn && evmAddress && (
+              <EOATransaction balance={formattedBalance} onSuccess={getBalance} />
+            )}
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}
+
+export default SignedInScreen;

package/template-react/src/{UserBalance.tsx → evm-eoa/UserBalance.tsx}

@@ -1,7 +1,5 @@
 import { LoadingSkeleton } from "@coinbase/cdp-react/components/ui/LoadingSkeleton";
 
-import { CDP_CONFIG } from "./config";
-
 interface Props {
   balance?: string;
 }
@@ -15,7 +13,6 @@ interface Props {
  */
 function UserBalance(props: Props) {
   const { balance } = props;
-  const isSolana = !!CDP_CONFIG.solana;
 
   return (
     <>
@@ -24,36 +21,21 @@ function UserBalance(props: Props) {
         {balance === undefined && <LoadingSkeleton as="span" className="loading--balance" />}
         {balance !== undefined && (
           <span className="flex-row-container">
-            <img src={isSolana ? "/sol.svg" : "/eth.svg"} alt="" className="balance-icon" />
+            <img src="/eth.svg" alt="" className="balance-icon" />
             <span>{balance}</span>
-            <span className="sr-only">{isSolana ? "Solana" : "Ethereum"}</span>
+            <span className="sr-only">Ethereum</span>
           </span>
         )}
       </p>
       <p>
-        {isSolana ? (
-          <>
-            Get testnet SOL from{" "}
-            <a
-              href="https://portal.cdp.coinbase.com/products/faucet?network=solana-devnet"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Solana Devnet Faucet
-            </a>
-          </>
-        ) : (
-          <>
-            Get testnet ETH from{" "}
-            <a
-              href="https://portal.cdp.coinbase.com/products/faucet"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Base Sepolia Faucet
-            </a>
-          </>
-        )}
+        Get testnet ETH from{" "}
+        <a
+          href="https://portal.cdp.coinbase.com/products/faucet"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Base Sepolia Faucet
+        </a>
       </p>
     </>
   );

package/template-react/src/evm-smart/Header.tsx

@@ -0,0 +1,68 @@
+import { useEvmAddress } from "@coinbase/cdp-hooks";
+import { AuthButton } from "@coinbase/cdp-react/components/AuthButton";
+import { useCallback, useEffect, useState } from "react";
+
+import { IconCheck, IconCopy, IconUser } from "./Icons";
+
+/**
+ * Header component
+ */
+function Header() {
+  const { evmAddress } = useEvmAddress();
+  const [isCopied, setIsCopied] = useState(false);
+
+  const formatAddress = useCallback((address: string) => {
+    if (!address) return "";
+    return `${address.slice(0, 6)}...${address.slice(-4)}`;
+  }, []);
+
+  const copyAddress = async () => {
+    if (!evmAddress) return;
+    try {
+      await navigator.clipboard.writeText(evmAddress);
+      setIsCopied(true);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    if (!isCopied) return;
+    const timeout = setTimeout(() => {
+      setIsCopied(false);
+    }, 2000);
+    return () => clearTimeout(timeout);
+  }, [isCopied]);
+
+  return (
+    <header>
+      <div className="header-inner">
+        <div className="title-container">
+          <h1 className="site-title">CDP React StarterKit</h1>
+          <span className="smart-badge">SMART</span>
+        </div>
+        <div className="user-info flex-row-container">
+          {evmAddress && (
+            <button
+              aria-label="copy wallet address"
+              className="flex-row-container copy-address-button"
+              onClick={copyAddress}
+            >
+              {!isCopied && (
+                <>
+                  <IconUser className="user-icon user-icon--user" />
+                  <IconCopy className="user-icon user-icon--copy" />
+                </>
+              )}
+              {isCopied && <IconCheck className="user-icon user-icon--check" />}
+              <span className="wallet-address">{formatAddress(evmAddress)}</span>
+            </button>
+          )}
+          <AuthButton />
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default Header;

package/template-react/src/evm-smart/SignedInScreen.tsx

@@ -0,0 +1,64 @@
+import { useEvmAddress, useIsSignedIn } from "@coinbase/cdp-hooks";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createPublicClient, http, formatEther } from "viem";
+import { baseSepolia } from "viem/chains";
+
+import Header from "./Header";
+import SmartAccountTransaction from "./SmartAccountTransaction";
+import UserBalance from "./UserBalance";
+
+/**
+ * Create a viem client to access user's balance on the Base Sepolia network
+ */
+const client = createPublicClient({
+  chain: baseSepolia,
+  transport: http(),
+});
+
+/**
+ * The Signed In screen
+ */
+function SignedInScreen() {
+  const { isSignedIn } = useIsSignedIn();
+  const { evmAddress } = useEvmAddress();
+  const [balance, setBalance] = useState<bigint | undefined>(undefined);
+
+  const formattedBalance = useMemo(() => {
+    if (balance === undefined) return undefined;
+    return formatEther(balance);
+  }, [balance]);
+
+  const getBalance = useCallback(async () => {
+    if (!evmAddress) return;
+    const weiBalance = await client.getBalance({
+      address: evmAddress,
+    });
+    setBalance(weiBalance);
+  }, [evmAddress]);
+
+  useEffect(() => {
+    getBalance();
+    const interval = setInterval(getBalance, 500);
+    return () => clearInterval(interval);
+  }, [getBalance]);
+
+  return (
+    <>
+      <Header />
+      <main className="main flex-col-container flex-grow">
+        <div className="main-inner flex-col-container">
+          <div className="card card--user-balance">
+            <UserBalance balance={formattedBalance} />
+          </div>
+          <div className="card card--transaction">
+            {isSignedIn && evmAddress && (
+              <SmartAccountTransaction balance={formattedBalance} onSuccess={getBalance} />
+            )}
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}
+
+export default SignedInScreen;

package/template-react/src/evm-smart/UserBalance.tsx

@@ -0,0 +1,44 @@
+import { LoadingSkeleton } from "@coinbase/cdp-react/components/ui/LoadingSkeleton";
+
+interface Props {
+  balance?: string;
+}
+
+/**
+ * A component that displays the user's balance.
+ *
+ * @param {Props} props - The props for the UserBalance component.
+ * @param {string} [props.balance] - The user's balance.
+ * @returns A component that displays the user's balance.
+ */
+function UserBalance(props: Props) {
+  const { balance } = props;
+
+  return (
+    <>
+      <h2 className="card-title">Available balance</h2>
+      <p className="user-balance flex-col-container flex-grow">
+        {balance === undefined && <LoadingSkeleton as="span" className="loading--balance" />}
+        {balance !== undefined && (
+          <span className="flex-row-container">
+            <img src="/eth.svg" alt="" className="balance-icon" />
+            <span>{balance}</span>
+            <span className="sr-only">Ethereum</span>
+          </span>
+        )}
+      </p>
+      <p>
+        Get testnet ETH from{" "}
+        <a
+          href="https://portal.cdp.coinbase.com/products/faucet"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Base Sepolia Faucet
+        </a>
+      </p>
+    </>
+  );
+}
+
+export default UserBalance;

package/template-react/src/{Header.tsx → solana/Header.tsx}

@@ -1,34 +1,25 @@
-import { useEvmAddress, useSolanaAddress } from "@coinbase/cdp-hooks";
+import { useSolanaAddress } from "@coinbase/cdp-hooks";
 import { AuthButton } from "@coinbase/cdp-react/components/AuthButton";
 import { useCallback, useEffect, useState } from "react";
 
-import { CDP_CONFIG } from "./config";
 import { IconCheck, IconCopy, IconUser } from "./Icons";
 
 /**
  * Header component
  */
 function Header() {
-  const { evmAddress } = useEvmAddress();
   const { solanaAddress } = useSolanaAddress();
-  const isSolana = !!CDP_CONFIG.solana;
-  const address = isSolana ? solanaAddress : evmAddress;
   const [isCopied, setIsCopied] = useState(false);
 
-  const formatAddress = useCallback(
-    (address: string) => {
-      if (!address) return "";
-      return isSolana
-        ? `${address.slice(0, 4)}...${address.slice(-4)}`
-        : `${address.slice(0, 6)}...${address.slice(-4)}`;
-    },
-    [isSolana],
-  );
+  const formatAddress = useCallback((address: string) => {
+    if (!address) return "";
+    return `${address.slice(0, 4)}...${address.slice(-4)}`;
+  }, []);
 
   const copyAddress = async () => {
-    if (!address) return;
+    if (!solanaAddress) return;
     try {
-      await navigator.clipboard.writeText(address);
+      await navigator.clipboard.writeText(solanaAddress);
       setIsCopied(true);
     } catch (error) {
       console.error(error);
@@ -43,17 +34,14 @@ function Header() {
     return () => clearTimeout(timeout);
   }, [isCopied]);
 
-  const isSmartAccountsEnabled = import.meta.env.VITE_CDP_CREATE_ETHEREUM_ACCOUNT_TYPE === "smart";
-
   return (
     <header>
       <div className="header-inner">
         <div className="title-container">
           <h1 className="site-title">CDP React StarterKit</h1>
-          {isSmartAccountsEnabled && <span className="smart-badge">SMART</span>}
         </div>
         <div className="user-info flex-row-container">
-          {address && (
+          {solanaAddress && (
             <button
               aria-label="copy wallet address"
               className="flex-row-container copy-address-button"
@@ -66,7 +54,7 @@ function Header() {
                 </>
               )}
               {isCopied && <IconCheck className="user-icon user-icon--check" />}
-              <span className="wallet-address">{formatAddress(address)}</span>
+              <span className="wallet-address">{formatAddress(solanaAddress)}</span>
             </button>
           )}
           <AuthButton />

package/template-react/src/solana/SignedInScreen.tsx

@@ -0,0 +1,70 @@
+import { useIsSignedIn, useSolanaAddress } from "@coinbase/cdp-hooks";
+import { Connection, clusterApiUrl, LAMPORTS_PER_SOL, PublicKey } from "@solana/web3.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import Header from "./Header";
+import SolanaTransaction from "./SolanaTransaction";
+import UserBalance from "./UserBalance";
+
+/**
+ * Create a Solana connection to access user's balance on Solana Devnet
+ */
+const solanaConnection = new Connection(clusterApiUrl("devnet"));
+
+/**
+ * The Signed In screen
+ */
+function SignedInScreen() {
+  const { isSignedIn } = useIsSignedIn();
+  const { solanaAddress } = useSolanaAddress();
+  const [balance, setBalance] = useState<bigint | undefined>(undefined);
+
+  const formattedBalance = useMemo(() => {
+    if (balance === undefined) return undefined;
+    return formatSol(Number(balance));
+  }, [balance]);
+
+  const getBalance = useCallback(async () => {
+    if (!solanaAddress) return;
+    const lamports = await solanaConnection.getBalance(new PublicKey(solanaAddress));
+    setBalance(BigInt(lamports));
+  }, [solanaAddress]);
+
+  useEffect(() => {
+    getBalance();
+    const interval = setInterval(getBalance, 500);
+    return () => clearInterval(interval);
+  }, [getBalance]);
+
+  return (
+    <>
+      <Header />
+      <main className="main flex-col-container flex-grow">
+        <div className="main-inner flex-col-container">
+          <div className="card card--user-balance">
+            <UserBalance balance={formattedBalance} />
+          </div>
+          <div className="card card--transaction">
+            {isSignedIn && solanaAddress && (
+              <SolanaTransaction balance={formattedBalance} onSuccess={getBalance} />
+            )}
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}
+
+/**
+ * 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(/\.$/, "");
+}
+
+export default SignedInScreen;