@coinbase/create-cdp-app 0.0.0 → 0.0.5

package/template-react-components/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

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

@@ -0,0 +1,27 @@
+import { useIsInitialized, useIsSignedIn } from "@coinbase/cdp-hooks";
+import { AuthButton } from "@coinbase/cdp-react";
+
+import Transaction from "./Transaction";
+
+/**
+ *
+ */
+function App() {
+  const isInitialized = useIsInitialized();
+  const isSignedIn = useIsSignedIn();
+
+  return (
+    <div className="app">
+      <h1>CDP React Demo</h1>
+      {!isInitialized && <div>Loading...</div>}
+      {isInitialized && (
+        <>
+          <AuthButton />
+          {isSignedIn && <Transaction />}
+        </>
+      )}
+    </div>
+  );
+}
+
+export default App;

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

@@ -0,0 +1,85 @@
+import { useSendEvmTransaction, useEvmAddress } from "@coinbase/cdp-hooks";
+import { type MouseEvent, useCallback, useState } from "react";
+
+/**
+ *
+ */
+function Transaction() {
+  const sendEvmTransaction = useSendEvmTransaction();
+  const evmAddress = useEvmAddress();
+
+  const [transactionHash, setTransactionHash] = useState<string | null>(null);
+
+  const handleSendTransaction = useCallback(
+    async (e: MouseEvent<HTMLButtonElement>) => {
+      if (!evmAddress) {
+        return;
+      }
+
+      e.preventDefault();
+
+      const { transactionHash } = await sendEvmTransaction({
+        transaction: {
+          to: evmAddress, // Send to yourself for testing
+          value: 100000000000000n, // 0.0001 ETH in wei
+          nonce: 0,
+          gas: 21000n,
+          maxFeePerGas: 30000000000n,
+          maxPriorityFeePerGas: 1000000000n,
+          chainId: 84532, // Base Sepolia
+          type: "eip1559",
+        },
+        evmAccount: evmAddress,
+        network: "base-sepolia",
+      });
+
+      setTransactionHash(transactionHash);
+    },
+    [evmAddress, sendEvmTransaction],
+  );
+
+  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 && (
+        <>
+          <h2>Send 0.0001 ETH to yourself on Base Sepolia</h2>
+          <button className="button" onClick={handleSendTransaction}>
+            Send Transaction
+          </button>
+        </>
+      )}
+      {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>
+      )}
+    </div>
+  );
+}
+
+export default Transaction;

package/template-react-components/src/config.ts

@@ -0,0 +1,3 @@
+import { type Config } from "@coinbase/cdp-core";
+
+export const CDP_CONFIG: Config = { projectId: import.meta.env.VITE_CDP_PROJECT_ID };

package/template-react-components/src/index.css

@@ -0,0 +1,119 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html,
+html * {
+  box-sizing: border-box;
+}
+
+#root {
+  margin: 0;
+  padding: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  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;
+
+  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);
+
+  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;
+}
+
+.transaction-button:hover {
+  background-color: var(--cdp-web-colors-primaryHoverBackground);
+  color: var(--cdp-web-colors-primaryHoverText);
+}
+
+.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;
+}
+
+.transaction-form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.transaction-info {
+  color: #666;
+  text-align: center;
+}
+
+.wallet-address {
+  font-family: monospace;
+  background: #f5f5f5;
+  padding: 0.5rem;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  word-break: break-all;
+}
+
+.transaction-result {
+  text-align: center;
+}
+
+.transaction-result a {
+  color: #0052ff;
+  text-decoration: none;
+}
+
+.transaction-result a:hover {
+  text-decoration: underline;
+}
+
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  background-color: #ffffff;
+  min-width: 320px;
+  min-height: 100vh;
+}

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

@@ -0,0 +1,15 @@
+import { CDPReactProvider } from "@coinbase/cdp-react";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import App from "./App.tsx";
+import { CDP_CONFIG } from "./config.ts";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <CDPReactProvider config={CDP_CONFIG}>
+      <App />
+    </CDPReactProvider>
+  </StrictMode>,
+);

package/template-react-components/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template-react-components/tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/template-react-components/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/template-react-components/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template-react-components/vite.config.ts

@@ -0,0 +1,9 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+  },
+});

package/index.js

@@ -1 +0,0 @@
-console.log("Temporary package");