@coinbase/cdp-hooks 0.0.24 → 0.0.26

package/README.md

@@ -3,11 +3,13 @@ Built on top of `@coinbase/cdp-core`, it offers a React-friendly interface for e
 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.
+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 both web and React Native applications.
 
 ### Installation
 
-First, add the package to your project using your preferred package manager.
+#### Web Applications
+
+For web applications, add the package to your project using your preferred package manager:
 
 ```bash
 # With npm
@@ -20,6 +22,55 @@ pnpm add @coinbase/cdp-core @coinbase/cdp-hooks
 yarn add @coinbase/cdp-core @coinbase/cdp-hooks
 ```
 
+#### React Native Applications
+
+For React Native applications, you'll need additional crypto polyfills and dependencies:
+
+```bash
+# Core packages
+npm install @coinbase/cdp-core @coinbase/cdp-hooks
+
+# Install this polyfill with expo for better compatibility
+npx expo install react-native-quick-crypto
+
+# Required crypto polyfills for React Native
+npm install react-native-get-random-values @ungap/structured-clone
+
+# AsyncStorage for React Native storage
+npm install @react-native-async-storage/async-storage
+```
+
+**React Native Setup Code**
+
+You'll need to initialize the crypto polyfills before importing your app. Create or update your entry point file (typically `index.js` or `index.ts`):
+
+```typescript
+import structuredClone from "@ungap/structured-clone";
+import { install } from "react-native-quick-crypto";
+import "react-native-get-random-values";
+
+// Install crypto polyfills
+if (!("structuredClone" in globalThis)) {
+  globalThis.structuredClone = structuredClone as any;
+}
+
+install(); // Install react-native-quick-crypto
+
+// Import your app after polyfills are installed
+import App from "./App";
+
+// Register your app component
+import { registerRootComponent } from "expo"; // For Expo apps
+registerRootComponent(App);
+```
+
+**Why these dependencies?**
+
+- `react-native-quick-crypto`: Provides Web Crypto API compatibility for asymmetric key generation (ECDSA, RSA) required for JWT signing and encryption
+- `react-native-get-random-values`: Provides secure random number generation via `crypto.getRandomValues()`
+- `@ungap/structured-clone`: Polyfills `structuredClone` for object cloning compatibility
+- `@react-native-async-storage/async-storage`: Provides persistent storage for auth tokens and secrets
+
 ### Gather your CDP Project Information
 
 1. Sign in or create an account on the [CDP Portal](https://portal.cdp.coinbase.com)
@@ -38,9 +89,12 @@ in CDP Portal, and click Add origin to include your local app
 Next, you need to wrap your application with the CDPHooksProvider, which provides the necessary context for
 hooks to work correctly.
 
+#### Web Applications
+
 Update your main application file (e.g., main.tsx) to include the provider:
 
-```tsx
+```tsx lines
+import React from "react";
 import { CDPHooksProvider } from "@coinbase/cdp-hooks";
 import { App } from './App'; // Your main App component
 
@@ -58,11 +112,31 @@ function App() {
 }
 ```
 
+#### React Native Applications
+
+For React Native, the setup is identical.
+
+```tsx lines
+import React from "react";
+import { CDPHooksProvider } from "@coinbase/cdp-hooks";
+import { App } from "./App";
+
+export default function App() {
+  return (
+    <CDPHooksProvider config={{
+      projectId: "your-project-id",
+    }}>
+      <App />
+    </CDPHooksProvider>
+  );
+}
+```
+
 #### Smart Account Configuration
 
 You can configure the provider to automatically create Smart Accounts for new users:
 
-```tsx
+```tsx lines
 function App() {
   return (
     <CDPHooksProvider
@@ -85,9 +159,9 @@ 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:
+#### Web Applications
 
-```tsx
+```tsx lines
 import { useSignInWithEmail, useVerifyEmailOTP } from "@coinbase/cdp-hooks";
 
 function SignIn() {
@@ -121,11 +195,129 @@ function SignIn() {
 }
 ```
 
+#### React Native Applications
+
+For React Native, you'll use native UI components and handle the sign-in flow similarly:
+
+```tsx lines
+import React, { useState } from "react";
+import { View, Text, TextInput, TouchableOpacity, Alert } from "react-native";
+import { useSignInWithEmail, useVerifyEmailOTP } from "@coinbase/cdp-hooks";
+
+function SignInScreen() {
+  const { signInWithEmail } = useSignInWithEmail();
+  const { verifyEmailOTP } = useVerifyEmailOTP();
+  const [email, setEmail] = useState("");
+  const [otp, setOtp] = useState("");
+  const [flowId, setFlowId] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSignIn = async () => {
+    if (!email) {
+      Alert.alert("Error", "Please enter an email address");
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const result = await signInWithEmail({ email });
+      setFlowId(result.flowId);
+      Alert.alert("Success", "OTP sent to your email!");
+    } catch (error) {
+      Alert.alert("Error", error instanceof Error ? error.message : "Failed to sign in");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleVerifyOTP = async () => {
+    if (!otp || !flowId) {
+      Alert.alert("Error", "Please enter the OTP");
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const { user } = await verifyEmailOTP({ flowId, otp });
+      Alert.alert("Success", "Successfully signed in!");
+      console.log("Signed in user:", user);
+    } catch (error) {
+      Alert.alert("Error", error instanceof Error ? error.message : "Failed to verify OTP");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <View style={{ padding: 20 }}>
+      <Text>Email:</Text>
+      <TextInput
+        value={email}
+        onChangeText={setEmail}
+        placeholder="Enter your email"
+        keyboardType="email-address"
+        autoCapitalize="none"
+        editable={!isLoading}
+        style={{ borderWidth: 1, borderColor: "#ddd", padding: 12, marginBottom: 16 }}
+      />
+
+      <TouchableOpacity
+        onPress={handleSignIn}
+        disabled={isLoading}
+        style={{
+          backgroundColor: "#007AFF",
+          padding: 15,
+          borderRadius: 8,
+          alignItems: "center",
+          marginBottom: 12,
+          opacity: isLoading ? 0.6 : 1,
+        }}
+      >
+        <Text style={{ color: "white", fontSize: 16, fontWeight: "600" }}>
+          {isLoading ? "Sending..." : "Sign In with Email"}
+        </Text>
+      </TouchableOpacity>
+
+      {flowId && (
+        <>
+          <Text>Enter OTP from email:</Text>
+          <TextInput
+            value={otp}
+            onChangeText={setOtp}
+            placeholder="Enter 6-digit OTP"
+            keyboardType="number-pad"
+            maxLength={6}
+            editable={!isLoading}
+            style={{ borderWidth: 1, borderColor: "#ddd", padding: 12, marginBottom: 16 }}
+          />
+
+          <TouchableOpacity
+            onPress={handleVerifyOTP}
+            disabled={isLoading}
+            style={{
+              backgroundColor: "#007AFF",
+              padding: 15,
+              borderRadius: 8,
+              alignItems: "center",
+              opacity: isLoading ? 0.6 : 1,
+            }}
+          >
+            <Text style={{ color: "white", fontSize: 16, fontWeight: "600" }}>
+              {isLoading ? "Verifying..." : "Verify OTP"}
+            </Text>
+          </TouchableOpacity>
+        </>
+      )}
+    </View>
+  );
+}
+```
+
 ### View User Information
 
 Once the end user has signed in, you can display their information in your application:
 
-```tsx
+```tsx lines
 import { useCurrentUser, useEvmAddress } from "@coinbase/cdp-hooks";
 
 function UserInformation() {
@@ -164,7 +356,7 @@ We support signing and sending a Blockchain transaction in a single action on th
 - Optimism
 - Polygon
 
-```tsx
+```tsx lines
 import { useSendEvmTransaction, useEvmAddress } from "@coinbase/cdp-hooks";
 
 function SendTransaction() {
@@ -202,7 +394,7 @@ function SendTransaction() {
 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
+```tsx lines
 import { useSignEvmTransaction, useEvmAddress } from "@coinbase/cdp-hooks";
 import { http, createPublicClient } from "viem";
 import { tron } from "viem/chains";
@@ -254,7 +446,7 @@ function CrossChainTransaction() {
 
 End users can sign EVM messages, hashes, and typed data to generate signatures for various onchain applications.
 
-```tsx
+```tsx lines
 import { useSignEvmMessage, useSignEvmTypedData, useEvmAddress } from "@coinbase/cdp-hooks";
 
 function SignData() {
@@ -327,7 +519,7 @@ function SignData() {
 
 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
+```tsx lines
 import { useExportEvmAccount, useEvmAddress } from "@coinbase/cdp-hooks";
 
 function ExportKey() {
@@ -361,7 +553,7 @@ Smart Accounts provide advanced account abstraction features with React hooks.
 
 Send user operations from Smart Accounts with support for multiple calls and paymaster sponsorship. The hook returns a method to execute the user operation and `status`, `data`, and `error` properties to read the result of the user operation:
 
-```tsx
+```tsx lines
 import { useSendUserOperation, useCurrentUser } from "@coinbase/cdp-hooks";
 
 function SendUserOperation() {
@@ -428,7 +620,7 @@ function SendUserOperation() {
 
 Use the `useWaitForUserOperation` hook to poll for user operation status and provide real-time updates. This hook immediately fires off a query to get the result of the user operation:
 
-```tsx
+```tsx lines
 import { useWaitForUserOperation, useState } from "react";
 
 function WaitForUserOperation() {
@@ -472,7 +664,7 @@ function WaitForUserOperation() {
 
 You can control when the `useWaitForUserOperation` hook should start polling using the `enabled` parameter:
 
-```tsx
+```tsx lines
 function ConditionalWaitForUserOperation() {
   const [shouldPoll, setShouldPoll] = useState(false);
   

package/dist/esm/index10.js

@@ -1,35 +1,12 @@
-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) });
-}
+import { contracts as o } from "./index190.js";
+import { formatters as r } from "./index191.js";
+import { serializers as t } from "./index192.js";
+const e = {
+  blockTime: 2e3,
+  contracts: o,
+  formatters: r,
+  serializers: t
+};
 export {
-  O as createClient
+  e as chainConfig
 };

package/dist/esm/index100.js

@@ -1,37 +1,29 @@
-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
+import { BaseError as o } from "./index84.js";
+class i extends o {
+  constructor({ max: e, min: r, signed: s, size: a, value: t }) {
+    super(`Number "${t}" is not in safe ${a ? `${a * 8}-bit ${s ? "signed" : "unsigned"} ` : ""}integer range ${e ? `(${r} to ${e})` : `(above ${r})`}`, { name: "IntegerOutOfRangeError" });
+  }
+}
+class u extends o {
+  constructor(e) {
+    super(`Bytes value "${e}" is not a valid boolean. The bytes array must contain a single byte of either a 0 or 1 value.`, {
+      name: "InvalidBytesBooleanError"
     });
-    super(e.shortMessage, {
-      cause: e,
-      docsPath: n,
-      metaMessages: [
-        ...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;
+  }
+}
+class c extends o {
+  constructor(e) {
+    super(`Hex value "${e}" is not a valid boolean. The hex value must be "0x0" (false) or "0x1" (true).`, { name: "InvalidHexBooleanError" });
+  }
+}
+class v extends o {
+  constructor({ givenSize: e, maxSize: r }) {
+    super(`Size cannot exceed ${r} bytes. Given size: ${e} bytes.`, { name: "SizeOverflowError" });
   }
 }
 export {
-  x as EstimateGasExecutionError
+  i as IntegerOutOfRangeError,
+  u as InvalidBytesBooleanError,
+  c as InvalidHexBooleanError,
+  v as SizeOverflowError
 };

package/dist/esm/index101.js

@@ -1,196 +1,36 @@
-import { formatGwei as a } from "./index91.js";
-import { BaseError as t } from "./index82.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 { BaseError as r } from "./index84.js";
+class s extends r {
+  constructor({ data: a }) {
+    super("Unable to extract image from metadata. The metadata may be malformed or invalid.", {
       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."
+        "- Metadata must be a JSON object with at least an `image`, `image_url` or `image_data` property.",
+        "",
+        `Provided data: ${JSON.stringify(a)}`
       ],
-      name: "InsufficientFundsError"
+      name: "EnsAvatarInvalidMetadataError"
     });
   }
 }
-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"
+class o extends r {
+  constructor({ reason: a }) {
+    super(`ENS NFT avatar URI is invalid. ${a}`, {
+      name: "EnsAvatarInvalidNftUriError"
     });
   }
 }
-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"
-    });
+class n extends r {
+  constructor({ uri: a }) {
+    super(`Unable to resolve ENS avatar URI "${a}". The URI may be malformed, invalid, or does not respond with a valid image.`, { name: "EnsAvatarUriResolutionError" });
   }
 }
-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"
-    });
+class i extends r {
+  constructor({ namespace: a }) {
+    super(`ENS NFT avatar namespace "${a}" is not supported. Must be "erc721" or "erc1155".`, { name: "EnsAvatarUnsupportedNamespaceError" });
   }
 }
 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
+  s as EnsAvatarInvalidMetadataError,
+  o as EnsAvatarInvalidNftUriError,
+  i as EnsAvatarUnsupportedNamespaceError,
+  n as EnsAvatarUriResolutionError
 };