@coinbase/create-cdp-app 0.0.10 → 0.0.11

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

@@ -0,0 +1,27 @@
+"use client";
+
+import { useIsInitialized, useIsSignedIn } from "@coinbase/cdp-hooks";
+
+import Loading from "@/components/Loading";
+import SignedInScreen from "@/components/SignedInScreen";
+import SignInScreen from "@/components/SignInScreen";
+
+/**
+ * A component that displays the client app.
+ */
+export default function ClientApp() {
+  const isInitialized = useIsInitialized();
+  const isSignedIn = useIsSignedIn();
+
+  return (
+    <div className="app flex-col-container flex-grow">
+      {!isInitialized && <Loading />}
+      {isInitialized && (
+        <>
+          {!isSignedIn && <SignInScreen />}
+          {isSignedIn && <SignedInScreen />}
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,61 @@
+"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">
+        <h1 className="site-title">CDP React StarterKit</h1>
+        <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/Icons.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { type ReactNode, type SVGProps } from "react";
+
+const SvgIcon = ({ children, ...props }: SVGProps<SVGSVGElement> & { children: ReactNode }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      role="img"
+      aria-hidden={props["aria-label"] ? undefined : true}
+      {...props}
+    >
+      {children}
+    </svg>
+  );
+};
+
+/**
+ * Check icon
+ *
+ * @param props - SVG props
+ * @returns SVG element
+ */
+export const IconCheck = (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => {
+  return (
+    <SvgIcon width="24" height="24" viewBox="0 0 24 24" {...props}>
+      <path
+        fillRule="evenodd"
+        d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z"
+        clipRule="evenodd"
+      />
+    </SvgIcon>
+  );
+};
+
+/**
+ * Copy icon
+ *
+ * @param props - SVG props
+ * @returns SVG element
+ */
+export const IconCopy = (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => {
+  return (
+    <SvgIcon width="24" height="24" viewBox="0 0 24 24" {...props}>
+      <path d="M7.5 3.375c0-1.036.84-1.875 1.875-1.875h.375a3.75 3.75 0 0 1 3.75 3.75v1.875C13.5 8.161 14.34 9 15.375 9h1.875A3.75 3.75 0 0 1 21 12.75v3.375C21 17.16 20.16 18 19.125 18h-9.75A1.875 1.875 0 0 1 7.5 16.125V3.375Z" />
+      <path d="M15 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 17.25 7.5h-1.875A.375.375 0 0 1 15 7.125V5.25ZM4.875 6H6v10.125A3.375 3.375 0 0 0 9.375 19.5H16.5v1.125c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 0 1 3 20.625V7.875C3 6.839 3.84 6 4.875 6Z" />
+    </SvgIcon>
+  );
+};
+
+/**
+ * User icon
+ *
+ * @param props - SVG props
+ * @returns SVG element
+ */
+export const IconUser = (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => {
+  return (
+    <SvgIcon width="24" height="24" viewBox="0 0 24 24" {...props}>
+      <path
+        fillRule="evenodd"
+        d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
+        clipRule="evenodd"
+      />
+    </SvgIcon>
+  );
+};

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

@@ -0,0 +1,15 @@
+"use client";
+
+import { LoadingSpinner } from "@coinbase/cdp-react/components/LoadingSpinner";
+
+/**
+ * App loading screen
+ */
+export default function Loading() {
+  return (
+    <main>
+      <h1 className="sr-only">Loading</h1>
+      <LoadingSpinner />
+    </main>
+  );
+}

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

@@ -0,0 +1,33 @@
+"use client";
+
+import { CDPReactProvider } from "@coinbase/cdp-react/components/CDPReactProvider";
+
+import { theme } from "@/components/theme";
+
+interface ProvidersProps {
+  children: React.ReactNode;
+}
+
+const CDP_CONFIG = {
+  projectId: process.env.NEXT_PUBLIC_CDP_PROJECT_ID ?? "",
+};
+
+const APP_CONFIG = {
+  name: "CDP Next.js StarterKit",
+  logoUrl: "http://localhost:3000/logo.svg",
+};
+
+/**
+ * Providers component that wraps the application in all requisite providers
+ *
+ * @param props - { object } - The props for the Providers component
+ * @param props.children - { React.ReactNode } - The children to wrap
+ * @returns The wrapped children
+ */
+export default function Providers({ children }: ProvidersProps) {
+  return (
+    <CDPReactProvider config={CDP_CONFIG} app={APP_CONFIG} theme={theme}>
+      {children}
+    </CDPReactProvider>
+  );
+}

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

@@ -0,0 +1,17 @@
+"use client";
+
+import { AuthButton } from "@coinbase/cdp-react/components/AuthButton";
+
+/**
+ * Sign in screen
+ */
+export default function SignInScreen() {
+  return (
+    <main className="card card--login">
+      <h1 className="sr-only">Sign in</h1>
+      <p className="card-title">Welcome!</p>
+      <p>Please sign in to continue.</p>
+      <AuthButton />
+    </main>
+  );
+}

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

@@ -0,0 +1,64 @@
+"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 "@/components/Header";
+import Transaction from "@/components/Transaction";
+import UserBalance from "@/components/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 balance = await client.getBalance({
+      address: evmAddress,
+    });
+    setBalance(balance);
+  }, [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 && (
+              <Transaction balance={formattedBalance} onSuccess={getBalance} />
+            )}
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}

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

@@ -0,0 +1,128 @@
+"use client";
+import { useSendEvmTransaction, useEvmAddress } from "@coinbase/cdp-hooks";
+import { Button } from "@coinbase/cdp-react/components/Button";
+import { LoadingSkeleton } from "@coinbase/cdp-react/components/LoadingSkeleton";
+import { type MouseEvent, useCallback, useMemo, useState } from "react";
+
+interface Props {
+  balance?: string;
+  onSuccess?: () => void;
+}
+
+/**
+ * This component demonstrates how to send an EVM transaction using the CDP hooks.
+ *
+ * @param {Props} props - The props for the Transaction 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 hash.
+ */
+export default function Transaction(props: Props) {
+  const { balance, onSuccess } = props;
+  const sendEvmTransaction = useSendEvmTransaction();
+  const evmAddress = useEvmAddress();
+
+  const [isPending, setIsPending] = useState(false);
+  const [transactionHash, setTransactionHash] = useState<string | null>(null);
+  const hasBalance = useMemo(() => {
+    return balance && balance !== "0";
+  }, [balance]);
+
+  const handleSendTransaction = useCallback(
+    async (e: MouseEvent<HTMLButtonElement>) => {
+      if (!evmAddress) {
+        return;
+      }
+
+      e.preventDefault();
+      setIsPending(true);
+
+      const { transactionHash } = await sendEvmTransaction({
+        transaction: {
+          to: evmAddress, // Send to yourself for testing
+          value: 1000000000000n, // 0.000001 ETH in wei
+          gas: 21000n,
+          chainId: 84532, // Base Sepolia
+          type: "eip1559",
+        },
+        evmAccount: evmAddress,
+        network: "base-sepolia",
+      });
+
+      setTransactionHash(transactionHash);
+      setIsPending(false);
+      onSuccess?.();
+    },
+    [evmAddress, sendEvmTransaction, onSuccess],
+  );
+
+  return (
+    <>
+      {balance === undefined && (
+        <>
+          <h2 className="card-title">Send a transaction</h2>
+          <LoadingSkeleton className="loading--text" />
+          <LoadingSkeleton className="loading--btn" />
+        </>
+      )}
+      {balance !== undefined && (
+        <>
+          {!transactionHash && (
+            <>
+              <h2 className="card-title">Send a transaction</h2>
+              {hasBalance && (
+                <>
+                  <p>Send 0.000001 ETH to yourself on Base Sepolia</p>
+                  <Button
+                    className="tx-button"
+                    onClick={handleSendTransaction}
+                    isPending={isPending}
+                  >
+                    Send Transaction
+                  </Button>
+                </>
+              )}
+              {!hasBalance && (
+                <>
+                  <p>You need ETH to send a transaction, but you have none.</p>
+                  <p>
+                    Get some from{" "}
+                    <a
+                      href="https://portal.cdp.coinbase.com/products/faucet"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Base Sepolia Faucet
+                    </a>
+                  </p>
+                </>
+              )}
+            </>
+          )}
+          {transactionHash && (
+            <>
+              <h2 className="card-title">Transaction sent</h2>
+              <p>
+                Transaction hash:{" "}
+                <a
+                  href={`https://sepolia.basescan.org/tx/${transactionHash}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {transactionHash.slice(0, 6)}...{transactionHash.slice(-4)}
+                </a>
+              </p>
+              <Button
+                variant="secondary"
+                className="tx-button"
+                onClick={() => setTransactionHash(null)}
+              >
+                Send another transaction
+              </Button>
+            </>
+          )}
+        </>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,42 @@
+"use client";
+import { LoadingSkeleton } from "@coinbase/cdp-react/components/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.
+ */
+export default 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>
+    </>
+  );
+}

package/template-nextjs/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/{template-react-components → template-react}/README.md

@@ -1,16 +1,23 @@
 # CDP React App
 
-This project was generated with [`@coinbase/create-cdp-app`](https://github.com/coinbase/cdp-web) using the React Components template.
+This project was generated with [`@coinbase/create-cdp-app`](https://coinbase.github.io/cdp-web/modules/_coinbase_create-cdp-app.html) using the React template.
 
 ## Project Structure
 
 ```
 src/
-├── App.tsx                # Main application component with CDP initialization and CDP AuthButton
-├── Transaction.tsx    # Example transaction flow using CDP Hooks
-├── assets/               # Static assets
-├── index.css            # Global styles
-└── main.tsx            # Entry point with CDP provider setup
+├── App.tsx                # Main application component with routing and layout
+├── config.ts             # CDP configuration settings
+├── Header.tsx            # Navigation header with authentication status
+├── Icons.tsx             # Reusable icon components
+├── index.css            # Global styles and theme variables
+├── Loading.tsx          # Loading state component
+├── main.tsx            # Entry point with CDP provider setup
+├── SignedInScreen.tsx   # Screen displayed after successful authentication
+├── SignInScreen.tsx     # Authentication screen with CDP sign-in flow
+├── theme.ts            # Theme configuration and styling constants
+├── Transaction.tsx     # Example transaction flow using CDP Hooks
+├── UserBalance.tsx     # Component to display user's wallet balance
 ```
 
 ## Getting Started

package/template-react/public/eth.svg

@@ -0,0 +1,25 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  viewBox="0 0 32 32"
+  aria-hidden="true"
+>
+  <g fill="none" fillRule="evenodd">
+    <circle cx="16" cy="16" r="16" fill="#627EEA" />
+    <g fill="#FFF" fillRule="nonzero">
+      <path fillOpacity=".602" d="M16.498 4v8.87l7.497 3.35z" />
+      <path d="M16.498 4L9 16.22l7.498-3.35z" />
+      <path
+        fillOpacity=".602"
+        d="M16.498 21.968v6.027L24 17.616z"
+      />
+      <path d="M16.498 27.995v-6.028L9 17.616z" />
+      <path
+        fillOpacity=".2"
+        d="M16.498 20.573l7.497-4.353-7.497-3.348z"
+      />
+      <path fillOpacity=".602" d="M9 16.22l7.498 4.353v-7.701z" />
+    </g>
+  </g>
+</svg>

package/template-react/public/logo.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
+  <circle cx="64" cy="64" r="64" fill="#008080" />
+  <path fill="#FFF"
+    d="M78.91 76.225q.7 0 1.25.54l3.39 3.68q-2.82 3.49-6.93 5.35-4.11 1.85-9.87 1.85-5.15 0-9.26-1.76-4.12-1.76-7.03-4.89-2.91-3.14-4.46-7.49t-1.55-9.51q0-5.21 1.66-9.55 1.66-4.33 4.69-7.47 3.02-3.14 7.21-4.88 4.2-1.74 9.28-1.74 5.06 0 8.98 1.66t6.67 4.35l-2.88 4q-.25.39-.65.67-.4.29-1.11.29-.48 0-.99-.27t-1.12-.67-1.41-.88-1.85-.88q-1.06-.4-2.45-.67-1.39-.28-3.22-.28-3.1 0-5.68 1.11-2.57 1.1-4.43 3.2-1.86 2.09-2.88 5.12-1.02 3.02-1.02 6.89 0 3.91 1.1 6.95t2.99 5.12 4.45 3.18q2.56 1.11 5.5 1.11 1.76 0 3.19-.2 1.42-.19 2.62-.6 1.2-.42 2.27-1.08 1.08-.65 2.13-1.61.32-.29.67-.47.36-.17.74-.17" />
+</svg>

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

@@ -32,7 +32,7 @@ function Header() {
   return (
     <header>
       <div className="header-inner">
-        <h1 className="site-title">CDP React StarterKit</h1>
+        <h1 className="site-title">CDP Next.js StarterKit</h1>
         <div className="user-info flex-row-container">
           {evmAddress && (
             <button

package/template-react/src/theme.ts

@@ -0,0 +1,32 @@
+import { type Theme } from "@coinbase/cdp-react/theme";
+
+export const theme: Partial<Theme> = {
+  "colors-background": "var(--cdp-example-card-bg-color)",
+  "colors-backgroundOverlay": "var(--cdp-example-bg-overlay-color)",
+  "colors-backgroundSkeleton": "var(--cdp-example-bg-skeleton-color)",
+  "colors-text": "var(--cdp-example-text-color)",
+  "colors-textSecondary": "var(--cdp-example-text-secondary-color)",
+  "colors-border": "var(--cdp-example-card-border-color)",
+  "colors-primary": "var(--cdp-example-accent-color)",
+  "colors-primaryText": "var(--cdp-example-accent-foreground-color)",
+  "colors-primaryHoverBackground": "var(--cdp-example-accent-hover-color)",
+  "colors-primaryHoverText": "var(--cdp-example-accent-foreground-color)",
+  "colors-primaryFocusRing": "var(--cdp-example-accent-color)",
+  "colors-secondary": "var(--cdp-example-bg-low-contrast-color)",
+  "colors-secondaryText": "var(--cdp-example-text-color)",
+  "colors-secondaryHoverBackground": "var(--cdp-example-bg-low-contrast-color)",
+  "colors-secondaryHoverText": "var(--cdp-example-text-color)",
+  "colors-secondaryFocusRing": "var(--cdp-example-accent-color)",
+  "colors-inputBackground": "var(--cdp-example-card-bg-color)",
+  "colors-inputBorder": "var(--cdp-example-text-secondary-color)",
+  "colors-inputText": "var(--cdp-example-text-color)",
+  "colors-inputLabel": "var(--cdp-example-text-color)",
+  "colors-inputPlaceholder": "var(--cdp-example-text-secondary-color)",
+  "colors-inputFocusBorder": "var(--cdp-example-accent-color)",
+  "colors-linkText": "var(--cdp-example-accent-color)",
+  "colors-linkHover": "var(--cdp-example-accent-hover-color)",
+  "colors-linkSecondaryText": "var(--cdp-example-text-color)",
+  "colors-linkSecondaryHover": "var(--cdp-example-text-color)",
+  "fontFamily-sans": "var(--cdp-example-font-family)",
+  fontSizeBase: "var(--cdp-example-base-font-size)",
+};