@coinbase/cdp-hooks 0.0.0 → 0.0.5

package/README.md

@@ -0,0 +1,311 @@
+This package provides React hooks for conveniently accessing embedded wallet functionality.
+Built on top of `@coinbase/cdp-core`, it offers a React-friendly interface for end user authentication
+and embedded wallet operations.
+
+## Quickstart
+This guide will help you get started with @coinbase/cdp-hooks. You'll learn how to install the package, set up the provider, and use the hooks in a variety of ways.
+
+### Installation
+
+First, add the package to your project using your preferred package manager.
+
+```bash
+# With npm
+npm install @coinbase/cdp-core @coinbase/cdp-hooks
+
+# With pnpm
+pnpm add @coinbase/cdp-core @coinbase/cdp-hooks
+
+# With yarn
+yarn add @coinbase/cdp-core @coinbase/cdp-hooks
+```
+
+### Gather your CDP Project Information
+
+1. Sign in or create an account on the [CDP Portal](https://portal.cdp.coinbase.com)
+2. On your dashboard, select a project from the dropdown at the at the top, and copy the Project ID
+
+
+### Setup Provider
+
+Next, you need to wrap your application with the CDPHooksProvider, which provides the necessary context for
+hooks to work correctly.
+
+Update your main application file (e.g., main.tsx) to include the provider:
+
+```tsx
+import { CDPHooksProvider } from "@coinbase/cdp-hooks";
+import { App } from './App'; // Your main App component
+
+function App() {
+  return (
+    <CDPHooksProvider 
+      config={{
+        // Copy and paste your project ID here.
+        projectId: "your-project-id",
+      }}
+    >
+      <App />
+    </CDPHooksProvider>
+  );
+}
+```
+
+### Sign In a User
+
+End user authentication proceeds in two steps:
+1. The user inputs their email address to initiate the authentication flow, which will send the user a One Time Password (OTP) and return a `flowId`
+2. The user submits the six-digit OTP and `flowId`, after which the user will be authenticated, returning a User object.
+
+The following code demonstrates this flow:
+
+```tsx
+import { useSignInWithEmail, useVerifyEmailOTP } from "@coinbase/cdp-hooks";
+
+function SignIn() {
+  const signInWithEmail = useSignInWithEmail();
+  const verifyEmailOTP = useVerifyEmailOTP();
+
+  const handleSignIn = async (email: string) => {
+    try {
+      // Start sign in flow
+      const { flowId } = await signInWithEmail({ email });
+
+      // In a real application, you would prompt the user for the OTP they received
+      // in their email. Here, we hardcode it for convenience.
+      const otp = "123456";
+
+      // Complete sign in
+      const { user, isNewUser } = await verifyEmailOTP({
+        flowId,
+        otp
+      });
+
+      console.log("Signed in user:", user);
+      console.log("User EVM address", user.evmAccounts[0]);
+    } catch (error) {
+      console.error("Sign in failed:", error);
+    }
+  };
+
+  return <button onClick={() => handleSignIn("user@example.com")}>Sign In</button>;
+}
+```
+
+### View User Information
+
+Once the end user has signed in, you can display their information in your application:
+
+```tsx
+import { useCurrentUser, useEvmAddress } from "@coinbase/cdp-hooks";
+
+function UserInformation() {
+  const user = useCurrentUser();
+  const evmAddress = useEvmAddress();
+
+  if (!user) {
+    return <div>Please sign in</div>;
+  }
+
+  return (
+    <div>
+      <h2>User Information</h2>
+      <p>User ID: {user.userId}</p>
+      <p>EVM Address: {evmAddress}</p>
+    </div>
+  );
+}
+```
+
+### Send a Transaction 
+
+We support signing and sending a Blockchain transaction in a single action on Base or Base Sepolia:
+
+```tsx
+import { useSendEvmTransaction, useEvmAddress } from "@coinbase/cdp-hooks";
+
+function SendTransaction() {
+  const sendTransaction = useSendEvmTransaction();
+  const evmAddress = useEvmAddress();
+
+  const handleSend = async () => {
+    if (!evmAddress) return;
+
+    try {
+      const result = await sendTransaction({
+        evmAccount: evmAddress,
+        transaction: {
+          to: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+          value: 100000000000000n, // 0.0001 ETH in wei
+          nonce: 0,
+          gas: 21000n,
+          maxFeePerGas: 30000000000n,
+          maxPriorityFeePerGas: 1000000000n,
+          chainId: 84532, // Base Sepolia
+          type: "eip1559",
+        }
+      });
+
+      console.log("Transaction hash:", result.transactionHash);
+    } catch (error) {
+      console.error("Transaction failed:", error);
+    }
+  };
+
+  return <button onClick={handleSend}>Send Transaction</button>;
+}
+```
+
+For networks other than Base or Base Sepolia, your end user must sign the transaction, and then
+you must broadcast the transaction yourself. This example uses the public client from `viem` to broadcast the transaction. 
+
+```tsx
+import { useSignEvmTransaction, useEvmAddress } from "@coinbase/cdp-hooks";
+import { http, createPublicClient } from "viem";
+import { sepolia } from "viem/chains";
+
+function CrossChainTransaction() {
+  const signTransaction = useSignEvmTransaction();
+  const evmAddress = useEvmAddress();
+
+  const handleSend = async () => {
+    if (!evmAddress) return;
+
+    try {
+      // Sign the transaction
+      const { signedTransaction } = await signTransaction({
+        evmAccount: evmAddress,
+        transaction: {
+          to: "0x...",
+          value: 100000000000000n,
+          nonce: 0,
+          gas: 21000n,
+          maxFeePerGas: 30000000000n,
+          maxPriorityFeePerGas: 1000000000n,
+          chainId: 11155111, // Sepolia
+          type: "eip1559",
+        }
+      });
+
+      // Broadcast using a different client
+      const client = createPublicClient({
+        chain: sepolia,
+        transport: http()
+      });
+
+      const hash = await client.sendRawTransaction({
+        serializedTransaction: signedTransaction
+      });
+
+      console.log("Transaction hash:", hash);
+    } catch (error) {
+      console.error("Transaction failed:", error);
+    }
+  };
+
+  return <button onClick={handleSend}>Send Transaction</button>;
+}
+```
+
+### Sign Messages and Typed Data
+
+End users can sign EVM messages, hashes, and typed data to generate signatures for various onchain applications.
+
+```tsx
+import { useSignEvmMessage, useSignEvmTypedData, useEvmAddress } from "@coinbase/cdp-hooks";
+
+function SignData() {
+  const signMessage = useSignEvmMessage();
+  const signTypedData = useSignEvmTypedData();
+  const signHash = useSignEvmHash();
+  const evmAddress = useEvmAddress();
+
+  const handleSignHash = async () => {
+    if (!evmAddress) return;
+
+    const result = await signMessage({
+      evmAccount: evmAddress,
+      message: "Hello World"
+    });
+
+    console.log("Message signature:", result.signature);
+  }
+
+  const handleSignMessage = async () => {
+    if (!evmAddress) return;
+
+    const result = await signMessage({
+      evmAccount: evmAddress,
+      message: "Hello World"
+    });
+
+    console.log("Message signature:", result.signature);
+  };
+
+  const handleSignTypedData = async () => {
+    if (!evmAddress) return;
+
+    const result = await signTypedData({
+      evmAccount: evmAddress,
+      typedData: {
+        domain: {
+          name: "Example DApp",
+          version: "1",
+          chainId: 84532,
+        },
+        types: {
+          Person: [
+            { name: "name", type: "string" },
+            { name: "wallet", type: "address" }
+          ]
+        },
+        primaryType: "Person",
+        message: {
+          name: "Bob",
+          wallet: evmAddress
+        }
+      }
+    });
+
+    console.log("Typed data signature:", result.signature);
+  };
+
+  return (
+    <div>
+      <button onClick={handleSignMessage}>Sign Message</button>
+      <button onClick={handleSignTypedData}>Sign Typed Data</button>
+      <button onClick={handleSignHash}>Sign Hash</button>
+    </div>
+  );
+}
+```
+
+### Export Private Key
+
+End users can export their private keys from their embedded wallet, allowing them to import it into an EVM-compatible wallet of their choice.
+
+```tsx
+import { useExportEvmAccount, useEvmAddress } from "@coinbase/cdp-hooks";
+
+function ExportKey() {
+  const exportAccount = useExportEvmAccount();
+  const evmAddress = useEvmAddress();
+
+  const handleExport = async () => {
+    if (!evmAddress) return;
+
+    try {
+      const { privateKey } = await exportAccount({
+        evmAccount: evmAddress
+      });
+
+      console.log("Private Key:", privateKey);
+      // Warning: Handle private keys with extreme care!
+    } catch (error) {
+      console.error("Export failed:", error);
+    }
+  };
+
+  return <button onClick={handleExport}>Export Private Key</button>;
+}
+```

package/dist/esm/index.js

@@ -0,0 +1,22 @@
+import { CDPContext as n, CDPHooksProvider as u } from "./index2.js";
+import { useConfig as t, useCurrentUser as r, useEnforceAuthenticated as o, useEnforceUnauthenticated as a, useEvmAddress as E, useExportEvmAccount as m, useIsInitialized as d, useIsSignedIn as g, useSendEvmTransaction as c, useSignEvmHash as v, useSignEvmMessage as S, useSignEvmTransaction as f, useSignEvmTypedData as C, useSignInWithEmail as I, useSignOut as h, useVerifyEmailOTP as p } from "./index3.js";
+export {
+  n as CDPContext,
+  u as CDPHooksProvider,
+  t as useConfig,
+  r as useCurrentUser,
+  o as useEnforceAuthenticated,
+  a as useEnforceUnauthenticated,
+  E as useEvmAddress,
+  m as useExportEvmAccount,
+  d as useIsInitialized,
+  g as useIsSignedIn,
+  c as useSendEvmTransaction,
+  v as useSignEvmHash,
+  S as useSignEvmMessage,
+  f as useSignEvmTransaction,
+  C as useSignEvmTypedData,
+  I as useSignInWithEmail,
+  h as useSignOut,
+  p as useVerifyEmailOTP
+};

package/dist/esm/index2.js

@@ -0,0 +1,35 @@
+import { jsx as l } from "react/jsx-runtime";
+import { initialize as C, onAuthStateChange as m } from "@coinbase/cdp-core";
+import { createContext as P, useState as o, useEffect as d, useMemo as f, useContext as x } from "react";
+const i = P(null);
+function w({ children: t, config: e }) {
+  const [n, u] = o(null), [r, s] = o(!1);
+  d(() => {
+    s(!1), (async () => {
+      await C(e), m((c) => {
+        u(c);
+      }), s(!0);
+    })();
+  }, [e]);
+  const a = f(
+    () => ({
+      isInitialized: r,
+      currentUser: n,
+      isSignedIn: !!n,
+      config: e
+    }),
+    [n, r, e]
+  );
+  return /* @__PURE__ */ l(i.Provider, { value: a, children: t });
+}
+function I() {
+  const t = x(i);
+  if (!t)
+    throw new Error("useCDP must be used within a CDPHooksProvider");
+  return t;
+}
+export {
+  i as CDPContext,
+  w as CDPHooksProvider,
+  I as useCDP
+};

package/dist/esm/index3.js

@@ -0,0 +1,54 @@
+import { signOut as c, signEvmHash as u, signEvmTransaction as p, sendEvmTransaction as d, signEvmMessage as m, signEvmTypedData as E, exportEvmAccount as g, signInWithEmail as v, verifyEmailOTP as S } from "@coinbase/cdp-core";
+import { useCallback as a } from "react";
+import { useCDP as t } from "./index2.js";
+const h = () => {
+  const { config: n } = t();
+  return n;
+}, I = () => {
+  const { isInitialized: n } = t();
+  return n;
+}, y = () => i(v), C = () => i(S), A = () => {
+  const { isSignedIn: n } = t();
+  return n;
+}, w = () => {
+  const { currentUser: n } = t();
+  return n;
+}, U = () => e(c), O = () => w()?.evmAccounts?.[0] ?? null, x = () => e(u), D = () => e(p), H = () => e(d), M = () => e(m), P = () => e(E), b = () => e(g), e = (n) => {
+  const { isSignedIn: r } = t();
+  return a(
+    async (...s) => {
+      if (!r)
+        throw new Error("User is not authenticated");
+      return n(...s);
+    },
+    [r, n]
+  );
+}, i = (n) => {
+  const { isSignedIn: r } = t();
+  return a(
+    async (...s) => {
+      if (r)
+        throw new Error("User is already authenticated. Please sign out first.");
+      return n(...s);
+    },
+    [r, n]
+  );
+};
+export {
+  h as useConfig,
+  w as useCurrentUser,
+  e as useEnforceAuthenticated,
+  i as useEnforceUnauthenticated,
+  O as useEvmAddress,
+  b as useExportEvmAccount,
+  I as useIsInitialized,
+  A as useIsSignedIn,
+  H as useSendEvmTransaction,
+  x as useSignEvmHash,
+  M as useSignEvmMessage,
+  D as useSignEvmTransaction,
+  P as useSignEvmTypedData,
+  y as useSignInWithEmail,
+  U as useSignOut,
+  C as useVerifyEmailOTP
+};

package/dist/types/index.d.ts

@@ -0,0 +1,119 @@
+import { AllowedEvmTransactionType } from '@coinbase/cdp-core';
+import { Config } from '@coinbase/cdp-core';
+import { Context } from 'react';
+import { EIP712TypedData } from '@coinbase/cdp-core';
+import { EvmAddress } from '@coinbase/cdp-core';
+import { ExportEvmAccountOptions } from '@coinbase/cdp-core';
+import { ExportEvmAccountResult } from '@coinbase/cdp-core';
+import { Hex } from '@coinbase/cdp-core';
+import { JSX } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { SendEvmTransactionOptions } from '@coinbase/cdp-core';
+import { SendEvmTransactionResult } from '@coinbase/cdp-core';
+import { SignEvmHashOptions } from '@coinbase/cdp-core';
+import { SignEvmHashResult } from '@coinbase/cdp-core';
+import { SignEvmMessageOptions } from '@coinbase/cdp-core';
+import { SignEvmMessageResult } from '@coinbase/cdp-core';
+import { SignEvmTransactionOptions } from '@coinbase/cdp-core';
+import { SignEvmTransactionResult } from '@coinbase/cdp-core';
+import { SignEvmTypedDataOptions } from '@coinbase/cdp-core';
+import { SignEvmTypedDataResult } from '@coinbase/cdp-core';
+import { SignInWithEmailOptions } from '@coinbase/cdp-core';
+import { SignInWithEmailResult } from '@coinbase/cdp-core';
+import { User } from '@coinbase/cdp-core';
+import { VerifyEmailOTPOptions } from '@coinbase/cdp-core';
+import { VerifyEmailOTPResult } from '@coinbase/cdp-core';
+
+export { AllowedEvmTransactionType }
+
+export declare const CDPContext: Context<CDPContextValue | null>;
+
+export declare interface CDPContextValue {
+    isInitialized: boolean;
+    currentUser: User | null;
+    isSignedIn: boolean;
+    config: Config;
+}
+
+export declare function CDPHooksProvider({ children, config }: CDPHooksProviderProps): JSX.Element;
+
+export declare interface CDPHooksProviderProps {
+    children: ReactNode;
+    config: Config;
+}
+
+export { Config }
+
+export { EIP712TypedData }
+
+export { EvmAddress }
+
+export { ExportEvmAccountOptions }
+
+export { ExportEvmAccountResult }
+
+export { Hex }
+
+export { SendEvmTransactionOptions }
+
+export { SendEvmTransactionResult }
+
+export { SignEvmHashOptions }
+
+export { SignEvmHashResult }
+
+export { SignEvmMessageOptions }
+
+export { SignEvmMessageResult }
+
+export { SignEvmTransactionOptions }
+
+export { SignEvmTransactionResult }
+
+export { SignEvmTypedDataOptions }
+
+export { SignEvmTypedDataResult }
+
+export { SignInWithEmailOptions }
+
+export { SignInWithEmailResult }
+
+export declare const useConfig: () => Config;
+
+export declare const useCurrentUser: () => User | null;
+
+export declare const useEnforceAuthenticated: <TArgs extends unknown[], TReturn>(callback: (...args: TArgs) => Promise<TReturn>) => ((...args: TArgs) => Promise<TReturn>);
+
+export declare const useEnforceUnauthenticated: <TArgs extends unknown[], TReturn>(callback: (...args: TArgs) => Promise<TReturn>) => ((...args: TArgs) => Promise<TReturn>);
+
+export declare const useEvmAddress: () => EvmAddress | null;
+
+export declare const useExportEvmAccount: () => ((options: ExportEvmAccountOptions) => Promise<ExportEvmAccountResult>);
+
+export declare const useIsInitialized: () => boolean;
+
+export declare const useIsSignedIn: () => boolean;
+
+export { User }
+
+export declare const useSendEvmTransaction: () => ((options: SendEvmTransactionOptions) => Promise<SendEvmTransactionResult>);
+
+export declare const useSignEvmHash: () => ((options: SignEvmHashOptions) => Promise<SignEvmHashResult>);
+
+export declare const useSignEvmMessage: () => ((options: SignEvmMessageOptions) => Promise<SignEvmMessageResult>);
+
+export declare const useSignEvmTransaction: () => ((options: SignEvmTransactionOptions) => Promise<SignEvmTransactionResult>);
+
+export declare const useSignEvmTypedData: () => ((options: SignEvmTypedDataOptions) => Promise<SignEvmTypedDataResult>);
+
+export declare const useSignInWithEmail: () => ((options: SignInWithEmailOptions) => Promise<SignInWithEmailResult>);
+
+export declare const useSignOut: () => (() => Promise<void>);
+
+export declare const useVerifyEmailOTP: () => ((options: VerifyEmailOTPOptions) => Promise<VerifyEmailOTPResult>);
+
+export { VerifyEmailOTPOptions }
+
+export { VerifyEmailOTPResult }
+
+export { }

package/package.json

@@ -1,8 +1,65 @@
 {
   "name": "@coinbase/cdp-hooks",
-  "version": "0.0.0",
-  "description": "Placeholder package",
-  "main": "index.js",
-  "author": "Coinbase Inc.",
-  "license": "Apache-2.0"
-}
+  "version": "0.0.5",
+  "type": "module",
+  "files": [
+    "dist/**",
+    "!dist/**/*.tsbuildinfo"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/esm/index.js"
+    }
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "@coinbase/cdp-core": "^0.0.5"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "jsdom": "^24.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "vitest": "^3.2.2",
+    "@size-limit/preset-big-lib": "^11.2.0",
+    "@size-limit/webpack": "^11.2.0",
+    "@size-limit/webpack-why": "^11.2.0",
+    "size-limit": "^11.2.0",
+    "@coinbase/cdp-core": "^0.0.5"
+  },
+  "size-limit": [
+    {
+      "name": "full-package",
+      "path": "./dist/esm/index.js",
+      "import": "*",
+      "limit": "65 KB"
+    },
+    {
+      "name": "config-only",
+      "path": "./dist/esm/index.js",
+      "import": "{ CDPHooksProvider, useConfig, useIsInitialized }",
+      "limit": "65 KB"
+    },
+    {
+      "name": "auth-hooks-only",
+      "path": "./dist/esm/index.js",
+      "import": "{ CDPHooksProvider, useSignInWithEmail, useVerifyEmailOTP, useCurrentUser, useIsSignedIn, useSignOut }",
+      "limit": "65 KB"
+    }
+  ],
+  "scripts": {
+    "build": "pnpm run clean && pnpm run check:types && vite build --config ../../vite.config.base.ts",
+    "build:watch": "vite build --config ../../vite.config.base.ts --watch",
+    "check:types": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "clean:all": "pnpm clean && rm -rf node_modules",
+    "size-limit": "size-limit",
+    "size-limit:why": "size-limit --why",
+    "test": "vitest",
+    "test:run": "vitest --run"
+  }
+}

package/index.js

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