@coinbase/create-cdp-app 0.0.43 → 0.0.45

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

@@ -0,0 +1,117 @@
+"use client";
+
+import { useEvmAddress, useIsSignedIn } from "@coinbase/cdp-hooks";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  createPublicClient,
+  http,
+  formatEther,
+  type PublicClient,
+  type Transport,
+  type Address,
+} from "viem";
+import { baseSepolia, base } from "viem/chains";
+
+import EOATransaction from "./EOATransaction";
+import Header from "./Header";
+import UserBalance from "./UserBalance";
+
+import FundWallet from "@/components/FundWallet";
+
+/**
+ * Create a viem client to access user's balance on the Base network
+ */
+const client = createPublicClient({
+  chain: base,
+  transport: http(),
+});
+
+/**
+ * Create a viem client to access user's balance on the Base Sepolia network
+ */
+const sepoliaClient = createPublicClient({
+  chain: baseSepolia,
+  transport: http(),
+});
+
+const useEvmBalance = (
+  address: Address | null,
+  client: PublicClient<Transport, typeof base | typeof baseSepolia, undefined, undefined>,
+  poll = false,
+) => {
+  const [balance, setBalance] = useState<bigint | undefined>(undefined);
+
+  const formattedBalance = useMemo(() => {
+    if (balance === undefined) return undefined;
+    return formatEther(balance);
+  }, [balance]);
+
+  const getBalance = useCallback(async () => {
+    if (!address) return;
+    const balance = await client.getBalance({ address });
+    setBalance(balance);
+  }, [address, client]);
+
+  useEffect(() => {
+    if (!poll) {
+      getBalance();
+      return;
+    }
+    const interval = setInterval(getBalance, 500);
+    return () => clearInterval(interval);
+  }, [getBalance, poll]);
+
+  return { balance, formattedBalance, getBalance };
+};
+
+/**
+ * The Signed In screen with onramp support
+ */
+export default function SignedInScreen() {
+  const { isSignedIn } = useIsSignedIn();
+  const { evmAddress } = useEvmAddress();
+
+  const { formattedBalance, getBalance } = useEvmBalance(evmAddress, client, true);
+  const { formattedBalance: formattedBalanceSepolia, getBalance: getBalanceSepolia } =
+    useEvmBalance(evmAddress, sepoliaClient, true);
+
+  return (
+    <>
+      <Header />
+      <main className="main flex-col-container flex-grow">
+        <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}
+              faucetName="Base Sepolia Faucet"
+              faucetUrl="https://portal.cdp.coinbase.com/products/faucet"
+            />
+          </div>
+          <div className="card card--transaction">
+            {isSignedIn && (
+              <EOATransaction balance={formattedBalanceSepolia} onSuccess={getBalanceSepolia} />
+            )}
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}

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

@@ -16,7 +16,6 @@ interface Props {
  */
 export default function UserBalance(props: Props) {
   const { balance, faucetUrl, faucetName } = props;
-  const isSolana = !!process.env.NEXT_PUBLIC_CDP_CREATE_SOLANA_ACCOUNT;
 
   return (
     <>
@@ -25,15 +24,15 @@ export default 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>
       {faucetUrl && faucetName && (
         <p>
-          Get testnet {isSolana ? "SOL" : "ETH"} from{" "}
+          Get testnet ETH from{" "}
           <a href={faucetUrl} target="_blank" rel="noopener noreferrer">
             {faucetName}
           </a>

package/template-nextjs/src/components/evm-smart/Header.tsx

@@ -0,0 +1,64 @@
+"use client";
+import { useEvmAddress } from "@coinbase/cdp-hooks";
+import { AuthButton } from "@coinbase/cdp-react/components/AuthButton";
+import { useEffect, useState } from "react";
+
+import { IconCheck, IconCopy, IconUser } from "@/components/Icons";
+
+/**
+ * Header component
+ */
+export default function Header() {
+  const { evmAddress } = useEvmAddress();
+  const [isCopied, setIsCopied] = useState(false);
+
+  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 Next.js 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">
+                {evmAddress.slice(0, 6)}...{evmAddress.slice(-4)}
+              </span>
+            </button>
+          )}
+          <AuthButton />
+        </div>
+      </div>
+    </header>
+  );
+}

package/template-nextjs/src/components/evm-smart/SignedInScreen.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+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
+ */
+export default 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}
+              faucetName="Base Sepolia Faucet"
+              faucetUrl="https://portal.cdp.coinbase.com/products/faucet"
+            />
+          </div>
+          <div className="card card--transaction">
+            {isSignedIn && evmAddress && (
+              <SmartAccountTransaction balance={formattedBalance} onSuccess={getBalance} />
+            )}
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}

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

@@ -0,0 +1,120 @@
+"use client";
+
+import { useEvmAddress, useIsSignedIn } from "@coinbase/cdp-hooks";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  createPublicClient,
+  http,
+  formatEther,
+  type PublicClient,
+  type Transport,
+  type Address,
+} from "viem";
+import { baseSepolia, base } from "viem/chains";
+
+import Header from "./Header";
+import SmartAccountTransaction from "./SmartAccountTransaction";
+import UserBalance from "./UserBalance";
+
+import FundWallet from "@/components/FundWallet";
+
+/**
+ * Create a viem client to access user's balance on the Base network
+ */
+const client = createPublicClient({
+  chain: base,
+  transport: http(),
+});
+
+/**
+ * Create a viem client to access user's balance on the Base Sepolia network
+ */
+const sepoliaClient = createPublicClient({
+  chain: baseSepolia,
+  transport: http(),
+});
+
+const useEvmBalance = (
+  address: Address | null,
+  client: PublicClient<Transport, typeof base | typeof baseSepolia, undefined, undefined>,
+  poll = false,
+) => {
+  const [balance, setBalance] = useState<bigint | undefined>(undefined);
+
+  const formattedBalance = useMemo(() => {
+    if (balance === undefined) return undefined;
+    return formatEther(balance);
+  }, [balance]);
+
+  const getBalance = useCallback(async () => {
+    if (!address) return;
+    const balance = await client.getBalance({ address });
+    setBalance(balance);
+  }, [address, client]);
+
+  useEffect(() => {
+    if (!poll) {
+      getBalance();
+      return;
+    }
+    const interval = setInterval(getBalance, 500);
+    return () => clearInterval(interval);
+  }, [getBalance, poll]);
+
+  return { balance, formattedBalance, getBalance };
+};
+
+/**
+ * The Signed In screen with onramp support
+ */
+export default function SignedInScreen() {
+  const { isSignedIn } = useIsSignedIn();
+  const { evmAddress } = useEvmAddress();
+
+  const { formattedBalance, getBalance } = useEvmBalance(evmAddress, client, true);
+  const { formattedBalance: formattedBalanceSepolia, getBalance: getBalanceSepolia } =
+    useEvmBalance(evmAddress, sepoliaClient, true);
+
+  return (
+    <>
+      <Header />
+      <main className="main flex-col-container flex-grow">
+        <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}
+              faucetName="Base Sepolia Faucet"
+              faucetUrl="https://portal.cdp.coinbase.com/products/faucet"
+            />
+          </div>
+          <div className="card card--transaction">
+            {isSignedIn && (
+              <SmartAccountTransaction
+                balance={formattedBalanceSepolia}
+                onSuccess={getBalanceSepolia}
+              />
+            )}
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}

package/template-nextjs/src/components/evm-smart/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="/eth.svg" alt="" className="balance-icon" />
+            <span>{balance}</span>
+            <span className="sr-only">Ethereum</span>
+          </span>
+        )}
+      </p>
+      {faucetUrl && faucetName && (
+        <p>
+          Get testnet ETH from{" "}
+          <a href={faucetUrl} target="_blank" rel="noopener noreferrer">
+            {faucetName}
+          </a>
+        </p>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,63 @@
+"use client";
+import { useSolanaAddress } from "@coinbase/cdp-hooks";
+import { AuthButton } from "@coinbase/cdp-react/components/AuthButton";
+import { useEffect, useState } from "react";
+
+import { IconCheck, IconCopy, IconUser } from "@/components/Icons";
+
+/**
+ * Header component
+ */
+export default function Header() {
+  const { solanaAddress } = useSolanaAddress();
+  const [isCopied, setIsCopied] = useState(false);
+
+  const copyAddress = async () => {
+    if (!solanaAddress) return;
+    try {
+      await navigator.clipboard.writeText(solanaAddress);
+      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 Next.js StarterKit</h1>
+        </div>
+        <div className="user-info flex-row-container">
+          {solanaAddress && (
+            <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">
+                {solanaAddress.slice(0, 6)}...{solanaAddress.slice(-4)}
+              </span>
+            </button>
+          )}
+          <AuthButton />
+        </div>
+      </div>
+    </header>
+  );
+}

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

@@ -0,0 +1,74 @@
+"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";
+
+/**
+ * Create a Solana connection to access user's balance on Solana Devnet
+ */
+const solanaConnection = new Connection(clusterApiUrl("devnet"));
+
+/**
+ * The Signed In screen
+ */
+export default 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}
+              faucetName="Solana Faucet"
+              faucetUrl="https://portal.cdp.coinbase.com/products/faucet?network=solana-devnet"
+            />
+          </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(/\.$/, "");
+}