npm - @coinbase/create-cdp-app - Versions diffs - 0.0.7 → 0.0.9 - Mend

@coinbase/create-cdp-app 0.0.7 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/package.json +1 -1
package/template-react-components/index.html +1 -1
package/template-react-components/package.json +5 -4
package/template-react-components/public/eth.svg +25 -0
package/template-react-components/src/App.tsx +8 -9
package/template-react-components/src/Header.tsx +62 -0
package/template-react-components/src/Icons.tsx +66 -0
package/template-react-components/src/Loading.tsx +15 -0
package/template-react-components/src/SignInScreen.tsx +17 -0
package/template-react-components/src/SignedInScreen.tsx +64 -0
package/template-react-components/src/Transaction.tsx +86 -39
package/template-react-components/src/UserBalance.tsx +43 -0
package/template-react-components/src/index.css +264 -67
package/template-react-components/src/main.tsx +2 -1
package/template-react-components/src/theme.ts +32 -0

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/create-cdp-app",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/template-react-components/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>CDP React StarterKit</title>
   </head>
   <body>
     <div id="root"></div>

package/template-react-components/package.json CHANGED Viewed

@@ -10,11 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@coinbase/cdp-core": "latest",
+    "@coinbase/cdp-hooks": "latest",
+    "@coinbase/cdp-react": "latest",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "@coinbase/cdp-react": "latest",
-    "@coinbase/cdp-hooks": "latest",
-    "@coinbase/cdp-core": "latest"
+    "viem": "^2.33.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",
@@ -29,4 +30,4 @@
     "typescript-eslint": "^8.35.1",
     "vite": "^7.0.4"
   }
-}
+}

package/template-react-components/public/eth.svg ADDED Viewed

@@ -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-components/src/App.tsx CHANGED Viewed

@@ -1,7 +1,8 @@
-import { useIsInitialized, useIsSignedIn, useEvmAddress } from "@coinbase/cdp-hooks";
-import { AuthButton } from "@coinbase/cdp-react";
+import { useIsInitialized, useIsSignedIn } from "@coinbase/cdp-hooks";
-import Transaction from "./Transaction";
+import Loading from "./Loading";
+import SignedInScreen from "./SignedInScreen";
+import SignInScreen from "./SignInScreen";
 /**
  * This component how to use the useIsIntialized, useEvmAddress, and useIsSignedIn hooks.
@@ -9,17 +10,15 @@ import Transaction from "./Transaction";
  */
 function App() {
   const isInitialized = useIsInitialized();
-  const evmAddress = useEvmAddress();
   const isSignedIn = useIsSignedIn();
   return (
-    <div className="app">
-      <h1>CDP React Demo</h1>
-      {!isInitialized && <div>Loading...</div>}
+    <div className="app flex-col-container flex-grow">
+      {!isInitialized && <Loading />}
       {isInitialized && (
         <>
-          <AuthButton />
-          {isSignedIn && evmAddress && <Transaction />}
+          {!isSignedIn && <SignInScreen />}
+          {isSignedIn && <SignedInScreen />}
         </>
       )}
     </div>

package/template-react-components/src/Header.tsx ADDED Viewed

@@ -0,0 +1,62 @@
+import { useEvmAddress } from "@coinbase/cdp-hooks";
+import { AuthButton } from "@coinbase/cdp-react/components/AuthButton";
+import { useEffect, useState } from "react";
+import { IconCheck, IconCopy, IconUser } from "./Icons";
+/**
+ * Header component
+ */
+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>
+  );
+}
+export default Header;

package/template-react-components/src/Icons.tsx ADDED Viewed

@@ -0,0 +1,66 @@
+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-react-components/src/Loading.tsx ADDED Viewed

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

package/template-react-components/src/SignInScreen.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import { AuthButton } from "@coinbase/cdp-react/components/AuthButton";
+/**
+ * The Sign In screen
+ */
+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>
+  );
+}
+export default SignInScreen;

package/template-react-components/src/SignedInScreen.tsx ADDED Viewed

@@ -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 Transaction from "./Transaction";
+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 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>
+    </>
+  );
+}
+export default SignedInScreen;

package/template-react-components/src/Transaction.tsx CHANGED Viewed

@@ -1,14 +1,31 @@
 import { useSendEvmTransaction, useEvmAddress } from "@coinbase/cdp-hooks";
-import { type MouseEvent, useCallback, useState } from "react";
+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.
  */
-function Transaction() {
+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>) => {
@@ -17,6 +34,7 @@ function Transaction() {
       }
       e.preventDefault();
+      setIsPending(true);
       const { transactionHash } = await sendEvmTransaction({
         transaction: {
@@ -31,51 +49,80 @@ function Transaction() {
       });
       setTransactionHash(transactionHash);
+      setIsPending(false);
+      onSuccess?.();
     },
-    [evmAddress, sendEvmTransaction],
+    [evmAddress, sendEvmTransaction, onSuccess],
   );
   return (
-    <div className="transaction-form">
-      <h2>Wallet Address</h2>
-      <span className="wallet-address">{evmAddress}</span>
-      <p>
-        Get testnet ETH from{" "}
-        <a
-          href="https://portal.cdp.coinbase.com/products/faucet"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Base Sepolia Faucet
-        </a>
-      </p>
-      {!transactionHash && (
+    <>
+      {balance === undefined && (
         <>
-          <h2>Send 0.0001 ETH to yourself on Base Sepolia</h2>
-          <button className="button" onClick={handleSendTransaction}>
-            Send Transaction
-          </button>
+          <h2 className="card-title">Send a transaction</h2>
+          <LoadingSkeleton className="loading--text" />
+          <LoadingSkeleton className="loading--btn" />
         </>
       )}
-      {transactionHash && (
-        <div className="transaction-result">
-          <h2>Transaction Sent</h2>
-          <p>
-            Transaction Hash:{" "}
-            <a
-              href={`https://sepolia.basescan.org/tx/${transactionHash}`}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {transactionHash}
-            </a>
-          </p>
-          <button className="button" onClick={() => setTransactionHash(null)}>
-            Send Another Transaction
-          </button>
-        </div>
+      {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>
+            </>
+          )}
+        </>
       )}
-    </div>
+    </>
   );
 }

package/template-react-components/src/UserBalance.tsx ADDED Viewed

@@ -0,0 +1,43 @@
+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.
+ */
+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-components/src/index.css CHANGED Viewed

@@ -1,119 +1,316 @@
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+  --cdp-example-page-bg-color: #eaeaea;
+  --cdp-example-bg-overlay-color: rgba(0, 0, 0, 0.25);
+  --cdp-example-bg-skeleton-color: rgba(0, 0, 0, 0.1);
+  --cdp-example-text-color: #111111;
+  --cdp-example-text-secondary-color: #757575;
+  --cdp-example-accent-color: #0052ff;
+  --cdp-example-accent-hover-color: #0044d6;
+  --cdp-example-accent-foreground-color: #ffffff;
+  --cdp-example-bg-low-contrast-color: #eeeeee;
+  --cdp-example-card-bg-color: #ffffff;
+  --cdp-example-card-border-color: #dcdcdc;
+  --cdp-example-card-max-width: 30rem;
+  --cdp-example-base-font-size: 16px;
+  --cdp-example-font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  background-color: var(--cdp-example-page-bg-color);
+  color: var(--cdp-example-card-border-color);
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  font-family: var(--cdp-example-font-family);
+  font-size: var(--cdp-example-base-font-size);
   font-synthesis: none;
+  font-weight: 400;
+  line-height: 1.5;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+@media (prefers-color-scheme: dark) {
+  :root {
+    --cdp-example-page-bg-color: #0a0b0d;
+    --cdp-example-bg-overlay-color: rgba(0, 0, 0, 0.25);
+    --cdp-example-bg-skeleton-color: rgba(255, 255, 255, 0.1);
+    --cdp-example-text-color: #fafafa;
+    --cdp-example-text-secondary-color: #8a919e;
+    --cdp-example-accent-color: #578bfa;
+    --cdp-example-accent-hover-color: #3e79f9;
+    --cdp-example-accent-foreground-color: #0a0b0d;
+    --cdp-example-bg-low-contrast-color: #32353d;
+    --cdp-example-card-bg-color: #141519;
+    --cdp-example-card-border-color: #24262a;
+  }
+}
+::selection {
+  background-color: color(from var(--cdp-example-accent-color) srgb r g b / 0.3);
+}
 html,
 html * {
   box-sizing: border-box;
 }
-#root {
+body {
   margin: 0;
-  padding: 0;
-  width: 100vw;
-  height: 100vh;
+  min-height: 100vh;
+  min-width: 320px;
 }
-.app {
+body,
+#root,
+#root > div,
+.flex-col-container {
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  place-items: center;
+}
+.flex-row-container {
   align-items: center;
+  display: flex;
+  flex-direction: row;
+}
+.flex-grow {
+  flex-grow: 1;
+}
+.sr-only {
+  border-width: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+#root {
+  flex-grow: 1;
+  margin: 0;
+  padding: 0rem;
   width: 100%;
-  height: 100%;
-  color: var(--cdp-web-colors-text);
-  margin: 0 auto;
 }
-.button {
-  --cdp-web-button-ring-color: transparent;
-  --cdp-web-button-ring-width: 2px;
-  --cdp-web-button-ring-inset-color: transparent;
-  --cdp-web-button-ring-inset-width: 2px;
+#root > div {
+  flex-grow: 1;
+}
-  box-shadow:
-    inset 0 0 0 var(--cdp-web-button-ring-inset-width) var(--cdp-web-button-ring-inset-color),
-    0 0 0 var(--cdp-web-button-ring-width) var(--cdp-web-button-ring-color);
+p {
+  margin: 0;
+}
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5em;
-  padding: 1em;
-  border-radius: 9999em;
-  border: 0;
-  background-color: var(--cdp-web-colors-primary);
-  color: var(--cdp-web-colors-primaryText);
-  font-size: 1em;
-  font-weight: 500;
-  line-height: 1.5;
-  text-decoration: none;
-  cursor: pointer;
-  transition: all 0.15s ease-in-out;
-  user-select: none;
+a {
+  color: var(--cdp-example-accent-color);
 }
-.transaction-button:hover {
-  background-color: var(--cdp-web-colors-primaryHoverBackground);
-  color: var(--cdp-web-colors-primaryHoverText);
+a:hover {
+  color: var(--cdp-example-accent-hover-color);
 }
-.transaction-button:focus-visible {
-  --cdp-web-button-ring-color: var(--cdp-web-colors-primaryFocusRing);
-  --cdp-web-button-ring-inset-color: var(--cdp-web-colors-background);
-  outline: none;
+hr {
+  border: 0 solid var(--cdp-example-card-border-color);
+  border-bottom-width: 1px;
+  margin: 1rem 0;
 }
-.transaction-form {
+.app {
+  height: 100%;
+  color: var(--cdp-web-colors-text);
+  margin: 0 auto;
   width: 100%;
+}
+header {
+  background-color: var(--cdp-example-card-bg-color);
+  border-bottom: 1px solid var(--cdp-web-colors-border);
+  padding: 0.5rem 1rem;
+  width: 100%;
+}
+header .wallet-address {
+  margin-right: 1rem;
+}
+.header-inner {
+  align-items: center;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  justify-content: space-between;
+  margin: 0 auto;
+  max-width: 75rem;
+  text-align: center;
 }
-.transaction-info {
-  color: #666;
-  text-align: center;
+.user-info {
+  justify-content: space-between;
+  width: 100%;
+}
+.user-icon {
+  flex-grow: 0;
+  flex-shrink: 0;
+  height: 1.25rem;
+  margin-right: 0.25rem;
+  width: auto;
 }
 .wallet-address {
   font-family: monospace;
-  background: #f5f5f5;
-  padding: 0.5rem;
-  border-radius: 4px;
-  font-size: 0.9rem;
+  font-size: 0.875rem;
   word-break: break-all;
 }
-.transaction-result {
-  text-align: center;
+.main {
+  padding: 0.5rem;
+  width: 100%;
 }
-.transaction-result a {
-  color: #0052ff;
-  text-decoration: none;
+.main-inner {
+  gap: 1rem;
+  width: 100%;
 }
-.transaction-result a:hover {
-  text-decoration: underline;
+.main-inner > .card {
+  width: 100%;
 }
-body {
+.site-title {
+  font-size: 1.2rem;
+  font-weight: 400;
+  line-height: 1.2;
   margin: 0;
+  margin-bottom: 0.5rem;
+}
+.site-title br {
+  display: none;
+}
+.card {
+  align-items: center;
+  background-color: var(--cdp-example-card-bg-color);
+  border: 1px solid var(--cdp-web-colors-border);
+  border-radius: 1rem;
   display: flex;
-  place-items: center;
-  background-color: #ffffff;
-  min-width: 320px;
-  min-height: 100vh;
+  flex-direction: column;
+  gap: 1rem;
+  justify-content: space-between;
+  max-width: var(--cdp-example-card-max-width);
+  padding: 2rem 1rem;
+  text-align: center;
+  width: 100%;
+}
+.card-title {
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.2;
+  margin: 0;
+}
+.loading--balance {
+  border-radius: 9999em;
+  display: inline-block;
+  height: 2.25rem;
+  width: 7rem;
+}
+.loading--text {
+  height: 1rem;
+  border-radius: 9999em;
+  margin: 0.25rem 0;
+  width: 20rem;
+}
+.loading--btn {
+  border-radius: 9999em;
+  height: 3.5rem;
+  width: 9.375rem;
+}
+.user-balance {
+  font-size: 1.5rem;
+  font-weight: 400;
+}
+.user-balance .flex-row-container {
+  justify-content: center;
+}
+.balance-icon {
+  flex-grow: 0;
+  flex-shrink: 0;
+  height: 1.5rem;
+  margin-right: 0.5rem;
+  width: auto;
+}
+.copy-address-button {
+  background-color: transparent;
+  border: 0;
+  color: var(--cdp-example-text-color);
+  cursor: pointer;
+  padding: 0;
+}
+.copy-address-button:hover .user-icon--user,
+.copy-address-button .user-icon--copy {
+  display: none;
+}
+.copy-address-button .user-icon--user,
+.copy-address-button:hover .user-icon--copy {
+  display: inline;
+}
+.tx-button {
+  padding-left: 2rem;
+  padding-right: 2rem;
+  min-width: 11.75rem;
+}
+@media (min-width: 540px) {
+  .header-inner {
+    flex-direction: row;
+    text-align: left;
+  }
+  .user-info {
+    width: auto;
+  }
+  .site-title {
+    margin-bottom: 0;
+  }
+  .site-title br {
+    display: inline;
+  }
+  .main {
+    padding: 1rem;
+  }
+}
+@media (min-width: 860px) {
+  :root {
+    --cdp-example-card-max-width: 35rem;
+  }
+  .main-inner {
+    align-items: stretch;
+    flex-direction: row;
+  }
+}
+@media (min-width: 1920px) {
+  :root {
+    --cdp-base-font-size: 20px;
+  }
 }

package/template-react-components/src/main.tsx CHANGED Viewed

@@ -4,11 +4,12 @@ import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import { CDP_CONFIG } from "./config.ts";
+import { theme } from "./theme.ts";
 import "./index.css";
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <CDPReactProvider config={CDP_CONFIG}>
+    <CDPReactProvider config={CDP_CONFIG} theme={theme}>
       <App />
     </CDPReactProvider>
   </StrictMode>,

package/template-react-components/src/theme.ts ADDED Viewed

@@ -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)",
+};