@coinbase/cdp-hooks 0.0.19 → 0.0.21

package/README.md

@@ -58,6 +58,27 @@ function App() {
 }
 ```
 
+#### Smart Account Configuration
+
+You can configure the provider to automatically create Smart Accounts for new users:
+
+```tsx
+function App() {
+  return (
+    <CDPHooksProvider
+      config={{
+        projectId: "your-project-id",
+        createAccountOnLogin: "evm-smart", // Creates Smart Accounts instead of EOAs
+      }}
+    >
+      <App />
+    </CDPHooksProvider>
+  );
+}
+```
+
+* When `createAccountOnLogin` is set to `"evm-smart"`, new users will automatically get both an EOA and a Smart Account.
+
 ### Sign In a User
 
 End user authentication proceeds in two steps:
@@ -89,7 +110,8 @@ function SignIn() {
       });
 
       console.log("Signed in user:", user);
-      console.log("User EVM address", user.evmAccounts[0]);
+      console.log("User EVM address (EOA):", user.evmAccounts[0]);
+      console.log("User Smart Account:", user.evmSmartAccounts?.[0]);
     } catch (error) {
       console.error("Sign in failed:", error);
     }
@@ -120,7 +142,10 @@ function UserInformation() {
     <div>
       <h2>User Information</h2>
       <p>User ID: {user.userId}</p>
-      <p>EVM Address: {evmAddress}</p>
+      <p>EVM Address (EOA): {evmAddress}</p>
+      {user.evmSmartAccounts?.[0] && (
+        <p>Smart Account: {user.evmSmartAccounts[0]}</p>
+      )}
       { email && <p>EmailAddress: {emailAddress}</p>}
     </div>
   );
@@ -129,7 +154,15 @@ function UserInformation() {
 
 ### Send a Transaction 
 
-We support signing and sending a Blockchain transaction in a single action on Base or Base Sepolia:
+We support signing and sending a Blockchain transaction in a single action on the following networks:
+- Base
+- Base Sepolia
+- Ethereum
+- Ethereum Sepolia
+- Avalanche
+- Arbitrum
+- Optimism
+- Polygon
 
 ```tsx
 import { useSendEvmTransaction, useEvmAddress } from "@coinbase/cdp-hooks";
@@ -166,13 +199,13 @@ function SendTransaction() {
 }
 ```
 
-For networks other than Base or Base Sepolia, your end user must sign the transaction, and then
+For networks other than those supported by the CDP APIs, 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";
+import { tron } from "viem/chains";
 
 function CrossChainTransaction() {
   const { signEvmTransaction: signTransaction } = useSignEvmTransaction();
@@ -192,14 +225,14 @@ function CrossChainTransaction() {
           gas: 21000n,
           maxFeePerGas: 30000000000n,
           maxPriorityFeePerGas: 1000000000n,
-          chainId: 11155111, // Sepolia
+          chainId: 728126428, // Tron
           type: "eip1559",
         }
       });
 
       // Broadcast using a different client
       const client = createPublicClient({
-        chain: sepolia,
+        chain: tron,
         transport: http()
       });
 
@@ -319,3 +352,136 @@ function ExportKey() {
   return <button onClick={handleExport}>Export Private Key</button>;
 }
 ```
+
+### Smart Account Operations
+
+Smart Accounts provide advanced account abstraction features with React hooks.
+
+#### Send User Operations
+
+Send user operations from Smart Accounts with support for multiple calls and paymaster sponsorship:
+
+```tsx
+import { useSendUserOperation, useCurrentUser } from "@coinbase/cdp-hooks";
+
+function SendUserOperation() {
+  const { sendUserOperation, data } = useSendUserOperation();
+  const { currentUser } = useCurrentUser();
+
+  const handleSendUserOperation = async () => {
+    const smartAccount = currentUser?.evmSmartAccounts?.[0];
+    if (!smartAccount) return;
+
+    try {
+      // This will automatically start tracking the user operation status
+      const result = await sendUserOperation({
+        evmSmartAccount: smartAccount,
+        network: "base-sepolia",
+        calls: [{
+          to: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+          value: 1000000000000000000n,
+          data: "0x",
+        }],
+      });
+
+      console.log("User Operation Hash:", result.userOperationHash);
+    } catch (error) {
+      console.error("Failed to send user operation:", error);
+    }
+  };
+
+  return (
+    <div>
+      {(() => {
+        switch (data.status) {
+          case "idle":
+            return <p>Ready to send user operation</p>;
+          case "pending":
+            return (
+              <div>
+                <p>User operation pending...</p>
+                <p>Hash: {data.hash}</p>
+              </div>
+            );
+          case "success":
+            return (
+              <div>
+                <p>User operation successful!</p>
+                <p>Transaction Hash: {data.result.transactionHash}</p>
+              </div>
+            );
+          case "error":
+            return (
+              <div>
+                <p>User operation failed</p>
+                <p>Error: {data.error.message}</p>
+              </div>
+            );
+        }
+      })()}
+      
+      <button onClick={handleSendUserOperation}>
+        Send User Operation
+      </button>
+    </div>
+  );
+}
+```
+
+#### Track User Operation Status
+
+Use the `useWaitForUserOperation` hook to poll for user operation status and provide real-time updates:
+
+```tsx
+import { useWaitForUserOperation, useCurrentUser } from "@coinbase/cdp-hooks";
+
+function WaitForUserOperation() {
+  const { waitForUserOperation, data } = useWaitForUserOperation();
+
+  const handleWaitForOperation = () => {
+    // Start waiting for a specific user operation
+    waitForUserOperation({
+      userOperationHash: "0x1234...",
+      evmSmartAccount: "0x1234567890123456789012345678901234567890",
+      network: "base-sepolia"
+    });
+  };
+
+  return (
+    <div>
+      <button onClick={handleWaitForOperation}>
+        Wait for User Operation
+      </button>
+      
+      {(() => {
+        switch (data.status) {
+          case "idle":
+            return <p>No user operation being tracked</p>;
+          case "pending":
+            return (
+              <div>
+                <p>User operation pending...</p>
+                <p>Hash: {data.hash}</p>
+              </div>
+            );
+          case "success":
+            return (
+              <div>
+                <p>User operation successful!</p>
+                <p>Transaction Hash: {data.result.transactionHash}</p>
+                <p>Status: {data.result.status}</p>
+              </div>
+            );
+          case "error":
+            return (
+              <div>
+                <p>User operation failed</p>
+                <p>Error: {data.error.message}</p>
+              </div>
+            );
+        }
+      })()}
+    </div>
+  );
+}
+```

package/dist/esm/index.js

@@ -1,27 +1,29 @@
 import { APIError as n } from "@coinbase/cdp-core";
-import { CDPContext as i, CDPHooksProvider as r } from "./index2.js";
-import { useConfig as o, useCurrentUser as a, useEnforceAuthenticated as m, useEnforceUnauthenticated as E, useEvmAddress as S, useExportEvmAccount as c, useGetAccessToken as g, useIsInitialized as d, useIsSignedIn as f, useSendEvmTransaction as v, useSignEvmHash as I, useSignEvmMessage as P, useSignEvmTransaction as T, useSignEvmTypedData as h, useSignInWithEmail as p, useSignInWithSms as x, useSignOut as A, useVerifyEmailOTP as C, useVerifySmsOTP as l } from "./index3.js";
+import { CDPContext as i, CDPHooksProvider as u } from "./index2.js";
+import { useConfig as o, useCurrentUser as a, useEnforceAuthenticated as m, useEnforceUnauthenticated as E, useEvmAddress as S, useExportEvmAccount as c, useGetAccessToken as d, useIsInitialized as g, useIsSignedIn as f, useSendEvmTransaction as v, useSendUserOperation as p, useSignEvmHash as I, useSignEvmMessage as P, useSignEvmTransaction as T, useSignEvmTypedData as h, useSignInWithEmail as x, useSignInWithSms as A, useSignOut as C, useVerifyEmailOTP as O, useVerifySmsOTP as U, useWaitForUserOperation as l } from "./index3.js";
 export {
   n as APIError,
   i as CDPContext,
-  r as CDPHooksProvider,
+  u as CDPHooksProvider,
   o as useConfig,
   a as useCurrentUser,
   m as useEnforceAuthenticated,
   E as useEnforceUnauthenticated,
   S as useEvmAddress,
   c as useExportEvmAccount,
-  g as useGetAccessToken,
-  d as useIsInitialized,
+  d as useGetAccessToken,
+  g as useIsInitialized,
   f as useIsSignedIn,
   v as useSendEvmTransaction,
+  p as useSendUserOperation,
   I as useSignEvmHash,
   P as useSignEvmMessage,
   T as useSignEvmTransaction,
   h as useSignEvmTypedData,
-  p as useSignInWithEmail,
-  x as useSignInWithSms,
-  A as useSignOut,
-  C as useVerifyEmailOTP,
-  l as useVerifySmsOTP
+  x as useSignInWithEmail,
+  A as useSignInWithSms,
+  C as useSignOut,
+  O as useVerifyEmailOTP,
+  U as useVerifySmsOTP,
+  l as useWaitForUserOperation
 };

package/dist/esm/index10.js

@@ -1,6 +1,35 @@
-function e(r) {
-  return typeof r == "string" ? { address: r, type: "json-rpc" } : r;
+import { parseAccount as I } from "./index11.js";
+import { uid as M } from "./index12.js";
+function O(n) {
+  const { batch: s, chain: e, ccipRead: u, key: d = "base", name: f = "Base Client", type: m = "base" } = n, o = n.experimental_blockTag ?? (typeof e?.experimental_preconfirmationTime == "number" ? "pending" : void 0), b = e?.blockTime ?? 12e3, p = Math.min(Math.max(Math.floor(b / 2), 500), 4e3), t = n.pollingInterval ?? p, g = n.cacheTime ?? t, x = n.account ? I(n.account) : void 0, { config: h, request: T, value: k } = n.transport({
+    chain: e,
+    pollingInterval: t
+  }), _ = { ...h, ...k }, c = {
+    account: x,
+    batch: s,
+    cacheTime: g,
+    ccipRead: u,
+    chain: e,
+    key: d,
+    name: f,
+    pollingInterval: t,
+    request: T,
+    transport: _,
+    type: m,
+    uid: M(),
+    ...o ? { experimental_blockTag: o } : {}
+  };
+  function i(l) {
+    return (v) => {
+      const a = v(l);
+      for (const y in c)
+        delete a[y];
+      const r = { ...l, ...a };
+      return Object.assign(r, { extend: i(r) });
+    };
+  }
+  return Object.assign(c, { extend: i(c) });
 }
 export {
-  e as parseAccount
+  O as createClient
 };

package/dist/esm/index100.js

@@ -1,196 +1,37 @@
-import { formatGwei as a } from "./index90.js";
-import { BaseError as t } from "./index81.js";
-class s extends t {
-  constructor({ cause: r, message: e } = {}) {
-    const n = e?.replace("execution reverted: ", "")?.replace("execution reverted", "");
-    super(`Execution reverted ${n ? `with reason: ${n}` : "for an unknown reason"}.`, {
-      cause: r,
-      name: "ExecutionRevertedError"
-    });
-  }
-}
-Object.defineProperty(s, "code", {
-  enumerable: !0,
-  configurable: !0,
-  writable: !0,
-  value: 3
-});
-Object.defineProperty(s, "nodeMessage", {
-  enumerable: !0,
-  configurable: !0,
-  writable: !0,
-  value: /execution reverted/
-});
-class c extends t {
-  constructor({ cause: r, maxFeePerGas: e } = {}) {
-    super(`The fee cap (\`maxFeePerGas\`${e ? ` = ${a(e)} gwei` : ""}) cannot be higher than the maximum allowed value (2^256-1).`, {
-      cause: r,
-      name: "FeeCapTooHighError"
-    });
-  }
-}
-Object.defineProperty(c, "nodeMessage", {
-  enumerable: !0,
-  configurable: !0,
-  writable: !0,
-  value: /max fee per gas higher than 2\^256-1|fee cap higher than 2\^256-1/
-});
-class i extends t {
-  constructor({ cause: r, maxFeePerGas: e } = {}) {
-    super(`The fee cap (\`maxFeePerGas\`${e ? ` = ${a(e)}` : ""} gwei) cannot be lower than the block base fee.`, {
-      cause: r,
-      name: "FeeCapTooLowError"
-    });
-  }
-}
-Object.defineProperty(i, "nodeMessage", {
-  enumerable: !0,
-  configurable: !0,
-  writable: !0,
-  value: /max fee per gas less than block base fee|fee cap less than block base fee|transaction is outdated/
-});
-class u extends t {
-  constructor({ cause: r, nonce: e } = {}) {
-    super(`Nonce provided for the transaction ${e ? `(${e}) ` : ""}is higher than the next one expected.`, { cause: r, name: "NonceTooHighError" });
-  }
-}
-Object.defineProperty(u, "nodeMessage", {
-  enumerable: !0,
-  configurable: !0,
-  writable: !0,
-  value: /nonce too high/
-});
-class l extends t {
-  constructor({ cause: r, nonce: e } = {}) {
-    super([
-      `Nonce provided for the transaction ${e ? `(${e}) ` : ""}is lower than the current nonce of the account.`,
-      "Try increasing the nonce or find the latest nonce with `getTransactionCount`."
-    ].join(`
-`), { cause: r, name: "NonceTooLowError" });
-  }
-}
-Object.defineProperty(l, "nodeMessage", {
-  enumerable: !0,
-  configurable: !0,
-  writable: !0,
-  value: /nonce too low|transaction already imported|already known/
-});
-class d extends t {
-  constructor({ cause: r, nonce: e } = {}) {
-    super(`Nonce provided for the transaction ${e ? `(${e}) ` : ""}exceeds the maximum allowed nonce.`, { cause: r, name: "NonceMaxValueError" });
-  }
-}
-Object.defineProperty(d, "nodeMessage", {
-  enumerable: !0,
-  configurable: !0,
-  writable: !0,
-  value: /nonce has max value/
-});
-class h extends t {
-  constructor({ cause: r } = {}) {
-    super([
-      "The total cost (gas * gas fee + value) of executing this transaction exceeds the balance of the account."
-    ].join(`
-`), {
-      cause: r,
+import { formatEther as E } from "./index90.js";
+import { formatGwei as t } from "./index91.js";
+import { BaseError as y } from "./index82.js";
+import { prettyPrint as l } from "./index93.js";
+class x extends y {
+  constructor(e, { account: a, docsPath: n, chain: m, data: f, gas: u, gasPrice: r, maxFeePerGas: o, maxPriorityFeePerGas: s, nonce: d, to: p, value: i }) {
+    const g = l({
+      from: a?.address,
+      to: p,
+      value: typeof i < "u" && `${E(i)} ${m?.nativeCurrency?.symbol || "ETH"}`,
+      data: f,
+      gas: u,
+      gasPrice: typeof r < "u" && `${t(r)} gwei`,
+      maxFeePerGas: typeof o < "u" && `${t(o)} gwei`,
+      maxPriorityFeePerGas: typeof s < "u" && `${t(s)} gwei`,
+      nonce: d
+    });
+    super(e.shortMessage, {
+      cause: e,
+      docsPath: n,
       metaMessages: [
-        "This error could arise when the account does not have enough funds to:",
-        " - pay for the total gas fee,",
-        " - pay for the value to send.",
-        " ",
-        "The cost of the transaction is calculated as `gas * gas fee + value`, where:",
-        " - `gas` is the amount of gas needed for transaction to execute,",
-        " - `gas fee` is the gas fee,",
-        " - `value` is the amount of ether to send to the recipient."
-      ],
-      name: "InsufficientFundsError"
-    });
-  }
-}
-Object.defineProperty(h, "nodeMessage", {
-  enumerable: !0,
-  configurable: !0,
-  writable: !0,
-  value: /insufficient funds|exceeds transaction sender account balance/
-});
-class f extends t {
-  constructor({ cause: r, gas: e } = {}) {
-    super(`The amount of gas ${e ? `(${e}) ` : ""}provided for the transaction exceeds the limit allowed for the block.`, {
-      cause: r,
-      name: "IntrinsicGasTooHighError"
-    });
-  }
-}
-Object.defineProperty(f, "nodeMessage", {
-  enumerable: !0,
-  configurable: !0,
-  writable: !0,
-  value: /intrinsic gas too high|gas limit reached/
-});
-class p extends t {
-  constructor({ cause: r, gas: e } = {}) {
-    super(`The amount of gas ${e ? `(${e}) ` : ""}provided for the transaction is too low.`, {
-      cause: r,
-      name: "IntrinsicGasTooLowError"
-    });
-  }
-}
-Object.defineProperty(p, "nodeMessage", {
-  enumerable: !0,
-  configurable: !0,
-  writable: !0,
-  value: /intrinsic gas too low/
-});
-class g extends t {
-  constructor({ cause: r }) {
-    super("The transaction type is not supported for this chain.", {
-      cause: r,
-      name: "TransactionTypeNotSupportedError"
-    });
-  }
-}
-Object.defineProperty(g, "nodeMessage", {
-  enumerable: !0,
-  configurable: !0,
-  writable: !0,
-  value: /transaction type not valid/
-});
-class b extends t {
-  constructor({ cause: r, maxPriorityFeePerGas: e, maxFeePerGas: n } = {}) {
-    super([
-      `The provided tip (\`maxPriorityFeePerGas\`${e ? ` = ${a(e)} gwei` : ""}) cannot be higher than the fee cap (\`maxFeePerGas\`${n ? ` = ${a(n)} gwei` : ""}).`
-    ].join(`
-`), {
-      cause: r,
-      name: "TipAboveFeeCapError"
-    });
-  }
-}
-Object.defineProperty(b, "nodeMessage", {
-  enumerable: !0,
-  configurable: !0,
-  writable: !0,
-  value: /max priority fee per gas higher than max fee per gas|tip higher than fee cap/
-});
-class x extends t {
-  constructor({ cause: r }) {
-    super(`An error occurred while executing: ${r?.shortMessage}`, {
-      cause: r,
-      name: "UnknownNodeError"
-    });
+        ...e.metaMessages ? [...e.metaMessages, " "] : [],
+        "Estimate Gas Arguments:",
+        g
+      ].filter(Boolean),
+      name: "EstimateGasExecutionError"
+    }), Object.defineProperty(this, "cause", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), this.cause = e;
   }
 }
 export {
-  s as ExecutionRevertedError,
-  c as FeeCapTooHighError,
-  i as FeeCapTooLowError,
-  h as InsufficientFundsError,
-  f as IntrinsicGasTooHighError,
-  p as IntrinsicGasTooLowError,
-  d as NonceMaxValueError,
-  u as NonceTooHighError,
-  l as NonceTooLowError,
-  b as TipAboveFeeCapError,
-  g as TransactionTypeNotSupportedError,
-  x as UnknownNodeError
+  x as EstimateGasExecutionError
 };