@coinbase/create-cdp-app 0.0.6 → 0.0.8

package/dist/index.js

@@ -170,8 +170,9 @@ function printNextSteps(projectRoot) {
   if (projectRoot !== process.cwd()) {
     console.log(`cd ${path.relative(process.cwd(), projectRoot)}`);
   }
+  const devCommand = packageManager === "npm" ? "npm run dev" : `${packageManager} dev`;
   console.log(`${packageManager} install`);
-  console.log(`${packageManager} dev`);
+  console.log(devCommand);
 }
 function copyTemplateFiles(templateDir, root, projectName, projectId) {
   const writeFileToTarget = (file, content) => {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/utils.ts","../src/index.ts"],"sourcesContent":["import fs from \"node:fs\";\nimport path from \"node:path\";\n\n/**\n * Prepare the project directory\n *\n * @param targetDir - The target directory for the project\n * @param shouldOverwrite - Whether to overwrite the existing directory\n * @returns The path to the prepared project directory\n */\nexport function prepareProjectDirectory(targetDir: string, shouldOverwrite: boolean): string {\n  const root = path.join(process.cwd(), targetDir);\n\n  if (shouldOverwrite) {\n    emptyDir(root);\n  } else if (!fs.existsSync(root)) {\n    fs.mkdirSync(root, { recursive: true });\n  }\n\n  return root;\n}\n\n/**\n * Customize package.json for the new project\n *\n * @param templateDir - The directory containing the template files\n * @param projectName - The name of the project\n * @returns The customized package.json content\n */\nexport function customizePackageJson(templateDir: string, projectName: string): string {\n  const packageJsonPath = path.join(templateDir, \"package.json\");\n  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, \"utf-8\"));\n  packageJson.name = projectName;\n  return JSON.stringify(packageJson, null, 2) + \"\\n\";\n}\n\n/**\n * Set up the .env file for the new project\n *\n * @param templateDir - The directory containing the template files\n * @param projectId - The project ID\n * @returns The customized .env content\n */\nexport function customizeEnv(templateDir: string, projectId: string): string {\n  const exampleEnvPath = path.join(templateDir, \"env.example\");\n  const exampleEnv = fs.readFileSync(exampleEnvPath, \"utf-8\");\n  const envContent = exampleEnv.replace(\n    /VITE_CDP_PROJECT_ID=.*(\\r?\\n|$)/,\n    `VITE_CDP_PROJECT_ID=${projectId}\\n`,\n  );\n  return envContent;\n}\n\n/**\n * Copy a file or directory recursively\n *\n * @param filePath - The source path\n * @param destPath - The destination path\n */\nexport function copyFile(filePath: string, destPath: string): void {\n  const stat = fs.statSync(filePath);\n  if (stat.isDirectory()) {\n    copyDir(filePath, destPath);\n  } else {\n    fs.copyFileSync(filePath, destPath);\n  }\n}\n\n/**\n * Copy a directory recursively\n *\n * @param srcDir - The source directory path\n * @param destDir - The destination directory path\n */\nfunction copyDir(srcDir: string, destDir: string): void {\n  fs.mkdirSync(destDir, { recursive: true });\n  for (const file of fs.readdirSync(srcDir)) {\n    const srcFile = path.resolve(srcDir, file);\n    const destFile = path.resolve(destDir, file);\n    copyFile(srcFile, destFile);\n  }\n}\n\n/**\n * Check if a directory is empty\n *\n * @param dirPath - The path to the directory\n * @returns True if the directory is empty, false otherwise\n */\nexport function isDirEmpty(dirPath: string): boolean {\n  const files = fs.readdirSync(dirPath);\n  return files.length === 0 || (files.length === 1 && files[0] === \".git\");\n}\n\n/**\n * Empty a directory while preserving .git\n *\n * @param dirPath - The path to the directory\n */\nfunction emptyDir(dirPath: string): void {\n  if (!fs.existsSync(dirPath)) {\n    return;\n  }\n  for (const file of fs.readdirSync(dirPath)) {\n    if (file === \".git\") {\n      continue;\n    }\n    fs.rmSync(path.resolve(dirPath, file), { recursive: true, force: true });\n  }\n}\n\n/**\n * Detect which package manager invoked the create command\n *\n * @returns The detected package manager or 'pnpm' as default\n */\nexport function detectPackageManager(): \"npm\" | \"pnpm\" | \"yarn\" {\n  const userAgent = process.env.npm_config_user_agent;\n\n  if (userAgent) {\n    if (userAgent.startsWith(\"yarn\")) return \"yarn\";\n    if (userAgent.startsWith(\"pnpm\")) return \"pnpm\";\n    if (userAgent.startsWith(\"npm\")) return \"npm\";\n  }\n\n  return \"npm\"; // Default to npm if we can't detect\n}\n","#!/usr/bin/env node\n\nimport fs from \"node:fs\";\nimport path from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\n\nimport { blue, red, green, reset } from \"kolorist\";\nimport prompts from \"prompts\";\n\nimport {\n  prepareProjectDirectory,\n  isDirEmpty,\n  customizePackageJson,\n  copyFile,\n  customizeEnv,\n  detectPackageManager,\n} from \"./utils.js\";\n\n// Available templates for project creation\nconst TEMPLATES = [\n  {\n    name: \"react-components\",\n    display: \"React Components\",\n    color: blue,\n  },\n];\n\nconst defaultTargetDir = \"cdp-app\";\n\nconst fileRenames: Record<string, string | undefined> = {\n  _gitignore: \".gitignore\",\n};\n\ninterface ProjectOptions {\n  projectName: string;\n  template: string;\n  targetDirectory: string;\n  projectId: string;\n}\n\nconst uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;\n\n/**\n * Initialize a new CDP app project\n */\nasync function init(): Promise<void> {\n  const { projectName, template, targetDirectory, projectId } = await getProjectDetails();\n\n  console.log(`\\nScaffolding project in ${targetDirectory}...`);\n\n  const root = prepareProjectDirectory(targetDirectory, false);\n  const templateDir = path.resolve(fileURLToPath(import.meta.url), \"../..\", `template-${template}`);\n\n  copyTemplateFiles(templateDir, root, projectName, projectId);\n  printNextSteps(root);\n}\n\n/**\n * Get project details from command line arguments or prompt the user\n *\n * @returns The project details\n */\nasync function getProjectDetails(): Promise<ProjectOptions> {\n  // Get target directory from command line args (first non-option argument)\n  let targetDir = process.argv[2];\n  const defaultProjectName = targetDir ?? defaultTargetDir;\n\n  try {\n    const result = await prompts(\n      [\n        {\n          type: targetDir ? null : \"text\",\n          name: \"projectName\",\n          message: reset(\"Project name:\"),\n          initial: defaultProjectName,\n          onState: state => {\n            targetDir = String(state.value).trim() || defaultProjectName;\n          },\n        },\n        {\n          type: \"select\",\n          name: \"template\",\n          message: reset(\"Select a template:\"),\n          initial: 0,\n          choices: TEMPLATES.map(template => ({\n            title: template.color(template.display || template.name),\n            value: template.name,\n          })),\n        },\n        {\n          type: \"text\",\n          name: \"projectId\",\n          message: reset(\n            \"CDP Project ID (Find your project ID at https://portal.cdp.coinbase.com/projects/overview):\",\n          ),\n          validate: value => {\n            if (!value || !uuidRegex.test(value)) {\n              return \"Project ID is required\";\n            }\n            return true;\n          },\n          initial: \"\",\n        },\n        {\n          type: \"text\",\n          name: \"corsConfirmation\",\n          message: reset(\n            \"Confirm you have whitelisted 'http://localhost:3000' at https://portal.cdp.coinbase.com/products/embedded-wallets/cors by typing 'y'\",\n          ),\n          validate: value => {\n            if (value !== \"y\") {\n              return \"You must whitelist your app domain for your app to be functional.\";\n            }\n            return true;\n          },\n          initial: \"\",\n        },\n        {\n          type: () => (!fs.existsSync(targetDir) || isDirEmpty(targetDir) ? null : \"confirm\"),\n          name: \"overwrite\",\n          message: () =>\n            (targetDir === \".\" ? \"Current directory\" : `Target directory \"${targetDir}\"`) +\n            \" is not empty. Remove existing files and continue?\",\n        },\n        {\n          type: (_, { overwrite }: { overwrite?: boolean }) => {\n            if (overwrite === false) {\n              throw new Error(red(\"✖\") + \" Operation cancelled\");\n            }\n            return null;\n          },\n          name: \"overwriteChecker\",\n        },\n      ],\n      {\n        onCancel: () => {\n          throw new Error(red(\"✖\") + \" Operation cancelled\");\n        },\n      },\n    );\n\n    return {\n      projectName: result.projectName,\n      template: result.template,\n      targetDirectory: targetDir,\n      projectId: result.projectId,\n    };\n  } catch (cancelled: unknown) {\n    if (cancelled instanceof Error) {\n      console.log(cancelled.message);\n    }\n    process.exit(0);\n  }\n}\n\n/**\n * Print next steps for the user\n *\n * @param projectRoot - The root directory of the project\n */\nfunction printNextSteps(projectRoot: string): void {\n  const packageManager = detectPackageManager();\n\n  console.log(green(\"\\nDone. Now run your app:\\n\"));\n  if (projectRoot !== process.cwd()) {\n    console.log(`cd ${path.relative(process.cwd(), projectRoot)}`);\n  }\n  console.log(`${packageManager} install`);\n  console.log(`${packageManager} dev`);\n}\n\n/**\n * Copy template files to the project directory\n *\n * @param templateDir - The directory containing the template files\n * @param root - The root directory of the project\n * @param projectName - The name of the project\n * @param projectId - The project ID\n */\nfunction copyTemplateFiles(\n  templateDir: string,\n  root: string,\n  projectName: string,\n  projectId?: string,\n): void {\n  const writeFileToTarget = (file: string, content?: string) => {\n    const targetPath = path.join(root, fileRenames[file] ?? file);\n    if (content) {\n      fs.writeFileSync(targetPath, content);\n    } else {\n      copyFile(path.join(templateDir, file), targetPath);\n    }\n  };\n\n  const files = fs.readdirSync(templateDir);\n  for (const file of files) {\n    if (file === \"package.json\") {\n      const customizedPackageJson = customizePackageJson(templateDir, projectName);\n      writeFileToTarget(file, customizedPackageJson);\n    } else if (file === \"env.example\" && projectId) {\n      const customizedEnv = customizeEnv(templateDir, projectId);\n      writeFileToTarget(file);\n      console.log(\"Copying project id to .env\");\n      writeFileToTarget(\".env\", customizedEnv);\n    } else {\n      writeFileToTarget(file);\n    }\n  }\n}\n\ninit().catch(e => {\n  console.error(e);\n  process.exit(1);\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/utils.ts","../src/index.ts"],"sourcesContent":["import fs from \"node:fs\";\nimport path from \"node:path\";\n\n/**\n * Prepare the project directory\n *\n * @param targetDir - The target directory for the project\n * @param shouldOverwrite - Whether to overwrite the existing directory\n * @returns The path to the prepared project directory\n */\nexport function prepareProjectDirectory(targetDir: string, shouldOverwrite: boolean): string {\n  const root = path.join(process.cwd(), targetDir);\n\n  if (shouldOverwrite) {\n    emptyDir(root);\n  } else if (!fs.existsSync(root)) {\n    fs.mkdirSync(root, { recursive: true });\n  }\n\n  return root;\n}\n\n/**\n * Customize package.json for the new project\n *\n * @param templateDir - The directory containing the template files\n * @param projectName - The name of the project\n * @returns The customized package.json content\n */\nexport function customizePackageJson(templateDir: string, projectName: string): string {\n  const packageJsonPath = path.join(templateDir, \"package.json\");\n  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, \"utf-8\"));\n  packageJson.name = projectName;\n  return JSON.stringify(packageJson, null, 2) + \"\\n\";\n}\n\n/**\n * Set up the .env file for the new project\n *\n * @param templateDir - The directory containing the template files\n * @param projectId - The project ID\n * @returns The customized .env content\n */\nexport function customizeEnv(templateDir: string, projectId: string): string {\n  const exampleEnvPath = path.join(templateDir, \"env.example\");\n  const exampleEnv = fs.readFileSync(exampleEnvPath, \"utf-8\");\n  const envContent = exampleEnv.replace(\n    /VITE_CDP_PROJECT_ID=.*(\\r?\\n|$)/,\n    `VITE_CDP_PROJECT_ID=${projectId}\\n`,\n  );\n  return envContent;\n}\n\n/**\n * Copy a file or directory recursively\n *\n * @param filePath - The source path\n * @param destPath - The destination path\n */\nexport function copyFile(filePath: string, destPath: string): void {\n  const stat = fs.statSync(filePath);\n  if (stat.isDirectory()) {\n    copyDir(filePath, destPath);\n  } else {\n    fs.copyFileSync(filePath, destPath);\n  }\n}\n\n/**\n * Copy a directory recursively\n *\n * @param srcDir - The source directory path\n * @param destDir - The destination directory path\n */\nfunction copyDir(srcDir: string, destDir: string): void {\n  fs.mkdirSync(destDir, { recursive: true });\n  for (const file of fs.readdirSync(srcDir)) {\n    const srcFile = path.resolve(srcDir, file);\n    const destFile = path.resolve(destDir, file);\n    copyFile(srcFile, destFile);\n  }\n}\n\n/**\n * Check if a directory is empty\n *\n * @param dirPath - The path to the directory\n * @returns True if the directory is empty, false otherwise\n */\nexport function isDirEmpty(dirPath: string): boolean {\n  const files = fs.readdirSync(dirPath);\n  return files.length === 0 || (files.length === 1 && files[0] === \".git\");\n}\n\n/**\n * Empty a directory while preserving .git\n *\n * @param dirPath - The path to the directory\n */\nfunction emptyDir(dirPath: string): void {\n  if (!fs.existsSync(dirPath)) {\n    return;\n  }\n  for (const file of fs.readdirSync(dirPath)) {\n    if (file === \".git\") {\n      continue;\n    }\n    fs.rmSync(path.resolve(dirPath, file), { recursive: true, force: true });\n  }\n}\n\n/**\n * Detect which package manager invoked the create command\n *\n * @returns The detected package manager or 'pnpm' as default\n */\nexport function detectPackageManager(): \"npm\" | \"pnpm\" | \"yarn\" {\n  const userAgent = process.env.npm_config_user_agent;\n\n  if (userAgent) {\n    if (userAgent.startsWith(\"yarn\")) return \"yarn\";\n    if (userAgent.startsWith(\"pnpm\")) return \"pnpm\";\n    if (userAgent.startsWith(\"npm\")) return \"npm\";\n  }\n\n  return \"npm\"; // Default to npm if we can't detect\n}\n","#!/usr/bin/env node\n\nimport fs from \"node:fs\";\nimport path from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\n\nimport { blue, red, green, reset } from \"kolorist\";\nimport prompts from \"prompts\";\n\nimport {\n  prepareProjectDirectory,\n  isDirEmpty,\n  customizePackageJson,\n  copyFile,\n  customizeEnv,\n  detectPackageManager,\n} from \"./utils.js\";\n\n// Available templates for project creation\nconst TEMPLATES = [\n  {\n    name: \"react-components\",\n    display: \"React Components\",\n    color: blue,\n  },\n];\n\nconst defaultTargetDir = \"cdp-app\";\n\nconst fileRenames: Record<string, string | undefined> = {\n  _gitignore: \".gitignore\",\n};\n\ninterface ProjectOptions {\n  projectName: string;\n  template: string;\n  targetDirectory: string;\n  projectId: string;\n}\n\nconst uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;\n\n/**\n * Initialize a new CDP app project\n */\nasync function init(): Promise<void> {\n  const { projectName, template, targetDirectory, projectId } = await getProjectDetails();\n\n  console.log(`\\nScaffolding project in ${targetDirectory}...`);\n\n  const root = prepareProjectDirectory(targetDirectory, false);\n  const templateDir = path.resolve(fileURLToPath(import.meta.url), \"../..\", `template-${template}`);\n\n  copyTemplateFiles(templateDir, root, projectName, projectId);\n  printNextSteps(root);\n}\n\n/**\n * Get project details from command line arguments or prompt the user\n *\n * @returns The project details\n */\nasync function getProjectDetails(): Promise<ProjectOptions> {\n  // Get target directory from command line args (first non-option argument)\n  let targetDir = process.argv[2];\n  const defaultProjectName = targetDir ?? defaultTargetDir;\n\n  try {\n    const result = await prompts(\n      [\n        {\n          type: targetDir ? null : \"text\",\n          name: \"projectName\",\n          message: reset(\"Project name:\"),\n          initial: defaultProjectName,\n          onState: state => {\n            targetDir = String(state.value).trim() || defaultProjectName;\n          },\n        },\n        {\n          type: \"select\",\n          name: \"template\",\n          message: reset(\"Select a template:\"),\n          initial: 0,\n          choices: TEMPLATES.map(template => ({\n            title: template.color(template.display || template.name),\n            value: template.name,\n          })),\n        },\n        {\n          type: \"text\",\n          name: \"projectId\",\n          message: reset(\n            \"CDP Project ID (Find your project ID at https://portal.cdp.coinbase.com/projects/overview):\",\n          ),\n          validate: value => {\n            if (!value || !uuidRegex.test(value)) {\n              return \"Project ID is required\";\n            }\n            return true;\n          },\n          initial: \"\",\n        },\n        {\n          type: \"text\",\n          name: \"corsConfirmation\",\n          message: reset(\n            \"Confirm you have whitelisted 'http://localhost:3000' at https://portal.cdp.coinbase.com/products/embedded-wallets/cors by typing 'y'\",\n          ),\n          validate: value => {\n            if (value !== \"y\") {\n              return \"You must whitelist your app domain for your app to be functional.\";\n            }\n            return true;\n          },\n          initial: \"\",\n        },\n        {\n          type: () => (!fs.existsSync(targetDir) || isDirEmpty(targetDir) ? null : \"confirm\"),\n          name: \"overwrite\",\n          message: () =>\n            (targetDir === \".\" ? \"Current directory\" : `Target directory \"${targetDir}\"`) +\n            \" is not empty. Remove existing files and continue?\",\n        },\n        {\n          type: (_, { overwrite }: { overwrite?: boolean }) => {\n            if (overwrite === false) {\n              throw new Error(red(\"✖\") + \" Operation cancelled\");\n            }\n            return null;\n          },\n          name: \"overwriteChecker\",\n        },\n      ],\n      {\n        onCancel: () => {\n          throw new Error(red(\"✖\") + \" Operation cancelled\");\n        },\n      },\n    );\n\n    return {\n      projectName: result.projectName,\n      template: result.template,\n      targetDirectory: targetDir,\n      projectId: result.projectId,\n    };\n  } catch (cancelled: unknown) {\n    if (cancelled instanceof Error) {\n      console.log(cancelled.message);\n    }\n    process.exit(0);\n  }\n}\n\n/**\n * Print next steps for the user\n *\n * @param projectRoot - The root directory of the project\n */\nfunction printNextSteps(projectRoot: string): void {\n  const packageManager = detectPackageManager();\n\n  console.log(green(\"\\nDone. Now run your app:\\n\"));\n  if (projectRoot !== process.cwd()) {\n    console.log(`cd ${path.relative(process.cwd(), projectRoot)}`);\n  }\n  const devCommand = packageManager === \"npm\" ? \"npm run dev\" : `${packageManager} dev`;\n  console.log(`${packageManager} install`);\n  console.log(devCommand);\n}\n\n/**\n * Copy template files to the project directory\n *\n * @param templateDir - The directory containing the template files\n * @param root - The root directory of the project\n * @param projectName - The name of the project\n * @param projectId - The project ID\n */\nfunction copyTemplateFiles(\n  templateDir: string,\n  root: string,\n  projectName: string,\n  projectId?: string,\n): void {\n  const writeFileToTarget = (file: string, content?: string) => {\n    const targetPath = path.join(root, fileRenames[file] ?? file);\n    if (content) {\n      fs.writeFileSync(targetPath, content);\n    } else {\n      copyFile(path.join(templateDir, file), targetPath);\n    }\n  };\n\n  const files = fs.readdirSync(templateDir);\n  for (const file of files) {\n    if (file === \"package.json\") {\n      const customizedPackageJson = customizePackageJson(templateDir, projectName);\n      writeFileToTarget(file, customizedPackageJson);\n    } else if (file === \"env.example\" && projectId) {\n      const customizedEnv = customizeEnv(templateDir, projectId);\n      writeFileToTarget(file);\n      console.log(\"Copying project id to .env\");\n      writeFileToTarget(\".env\", customizedEnv);\n    } else {\n      writeFileToTarget(file);\n    }\n  }\n}\n\ninit().catch(e => {\n  console.error(e);\n  process.exit(1);\n});\n"],"names":[],"mappings":"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"}

package/package.json

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

package/template-react-components/index.html

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

@@ -1,23 +1,24 @@
 import { useIsInitialized, useIsSignedIn } from "@coinbase/cdp-hooks";
-import { AuthButton } from "@coinbase/cdp-react";
 
-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.
+ * It also demonstrates how to use the AuthButton component to sign in and out of the app.
  */
 function App() {
   const isInitialized = useIsInitialized();
   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 && <Transaction />}
+          {!isSignedIn && <SignInScreen />}
+          {isSignedIn && <SignedInScreen />}
         </>
       )}
     </div>

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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,15 +34,13 @@ function Transaction() {
       }
 
       e.preventDefault();
+      setIsPending(true);
 
       const { transactionHash } = await sendEvmTransaction({
         transaction: {
           to: evmAddress, // Send to yourself for testing
-          value: 100000000000000n, // 0.0001 ETH in wei
-          nonce: 0,
+          value: 1000000000000n, // 0.000001 ETH in wei
           gas: 21000n,
-          maxFeePerGas: 30000000000n,
-          maxPriorityFeePerGas: 1000000000n,
           chainId: 84532, // Base Sepolia
           type: "eip1559",
         },
@@ -34,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

@@ -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;