@coinbase/cdp-hooks 0.0.25 → 0.0.27

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 lines
+import React from "react";
 import { CDPHooksProvider } from "@coinbase/cdp-hooks";
 import { App } from './App'; // Your main App component
 
@@ -58,6 +112,26 @@ 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:
@@ -85,7 +159,7 @@ 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 lines
 import { useSignInWithEmail, useVerifyEmailOTP } from "@coinbase/cdp-hooks";
@@ -121,6 +195,124 @@ 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:

package/dist/esm/index16.js

@@ -1,7 +1,7 @@
 import { TimeoutError as m, HttpRequestError as i } from "./index13.js";
 import { withTimeout as j } from "./index177.js";
 import { stringify as c } from "./index103.js";
-import { idCache as y } from "./index231.js";
+import { idCache as y } from "./index211.js";
 function E(s, o = {}) {
   return {
     async request(p) {

package/dist/esm/index19.js

@@ -4,10 +4,10 @@ import { encodeFunctionData as R } from "./index137.js";
 import { getChainContractAddress as b } from "./index173.js";
 import { trim as w } from "./index122.js";
 import { toHex as C } from "./index109.js";
-import { isNullUniversalResolverError as y } from "./index211.js";
+import { isNullUniversalResolverError as y } from "./index212.js";
 import { localBatchGatewayUrl as x } from "./index163.js";
 import { namehash as i } from "./index112.js";
-import { packetToBytes as N } from "./index212.js";
+import { packetToBytes as N } from "./index213.js";
 import { getAction as B } from "./index206.js";
 import { readContract as T } from "./index55.js";
 async function J(a, o) {

package/dist/esm/index20.js

@@ -1,4 +1,4 @@
-import { parseAvatarRecord as m } from "./index213.js";
+import { parseAvatarRecord as m } from "./index214.js";
 import { getAction as u } from "./index206.js";
 import { getEnsText as f } from "./index23.js";
 async function y(t, { blockNumber: a, blockTag: e, assetGatewayUrls: n, name: o, gatewayUrls: c, strict: i, universalResolverAddress: s }) {

package/dist/esm/index21.js

@@ -1,8 +1,8 @@
 import { universalResolverReverseAbi as f } from "./index72.js";
 import { getChainContractAddress as u } from "./index173.js";
 import { toHex as h } from "./index109.js";
-import { isNullUniversalResolverError as p } from "./index211.js";
-import { packetToBytes as C } from "./index212.js";
+import { isNullUniversalResolverError as p } from "./index212.js";
+import { packetToBytes as C } from "./index213.js";
 import { getAction as w } from "./index206.js";
 import { readContract as A } from "./index55.js";
 async function b(e, { address: t, blockNumber: s, blockTag: i, gatewayUrls: a, strict: c, universalResolverAddress: d }) {

package/dist/esm/index211.js

@@ -1,12 +1,15 @@
-import { panicReasons as a } from "./index86.js";
-import { BaseError as s } from "./index82.js";
-import { ContractFunctionRevertedError as t } from "./index85.js";
-function d(e, o) {
-  if (!(e instanceof s))
-    return !1;
-  const r = e.walk((n) => n instanceof t);
-  return r instanceof t ? !!(r.data?.errorName === "ResolverNotFound" || r.data?.errorName === "ResolverWildcardNotSupported" || r.data?.errorName === "ResolverNotContract" || r.data?.errorName === "ResolverError" || r.data?.errorName === "HttpError" || r.reason?.includes("Wildcard on non-extended resolvers is not supported") || o === "reverse" && r.reason === a[50]) : !1;
+function r() {
+  return {
+    current: 0,
+    take() {
+      return this.current++;
+    },
+    reset() {
+      this.current = 0;
+    }
+  };
 }
+const t = /* @__PURE__ */ r();
 export {
-  d as isNullUniversalResolverError
+  t as idCache
 };

package/dist/esm/index212.js

@@ -1,19 +1,12 @@
-import { stringToBytes as i } from "./index108.js";
-import { encodeLabelhash as h } from "./index244.js";
-import { labelhash as f } from "./index107.js";
-function y(s) {
-  const o = s.replace(/^\.|\.$/gm, "");
-  if (o.length === 0)
-    return new Uint8Array(1);
-  const e = new Uint8Array(i(o).byteLength + 2);
-  let t = 0;
-  const l = o.split(".");
-  for (let r = 0; r < l.length; r++) {
-    let n = i(l[r]);
-    n.byteLength > 255 && (n = i(h(f(l[r])))), e[t] = n.length, e.set(n, t + 1), t += n.length + 1;
-  }
-  return e.byteLength !== t + 1 ? e.slice(0, t + 1) : e;
+import { panicReasons as a } from "./index86.js";
+import { BaseError as s } from "./index82.js";
+import { ContractFunctionRevertedError as t } from "./index85.js";
+function d(e, o) {
+  if (!(e instanceof s))
+    return !1;
+  const r = e.walk((n) => n instanceof t);
+  return r instanceof t ? !!(r.data?.errorName === "ResolverNotFound" || r.data?.errorName === "ResolverWildcardNotSupported" || r.data?.errorName === "ResolverNotContract" || r.data?.errorName === "ResolverError" || r.data?.errorName === "HttpError" || r.reason?.includes("Wildcard on non-extended resolvers is not supported") || o === "reverse" && r.reason === a[50]) : !1;
 }
 export {
-  y as packetToBytes
+  d as isNullUniversalResolverError
 };

package/dist/esm/index213.js

@@ -1,25 +1,19 @@
-import { parseAvatarUri as o, parseNftUri as f, getNftTokenUri as v, resolveAvatarUri as l, getJsonImage as A, getMetadataAvatarUri as N } from "./index245.js";
-async function b(r, { gatewayUrls: t, record: e }) {
-  return /eip155:/i.test(e) ? U(r, { gatewayUrls: t, record: e }) : o({ uri: e, gatewayUrls: t });
-}
-async function U(r, { gatewayUrls: t, record: e }) {
-  const i = f(e), s = await v(r, { nft: i }), { uri: a, isOnChain: c, isEncoded: p } = l({ uri: s, gatewayUrls: t });
-  if (c && (a.includes("data:application/json;base64,") || a.startsWith("{"))) {
-    const d = p ? (
-      // if it is encoded, decode it
-      atob(a.replace("data:application/json;base64,", ""))
-    ) : (
-      // if it isn't encoded assume it is a JSON string, but it could be anything (it will error if it is)
-      a
-    ), u = JSON.parse(d);
-    return o({ uri: A(u), gatewayUrls: t });
+import { stringToBytes as i } from "./index108.js";
+import { encodeLabelhash as h } from "./index244.js";
+import { labelhash as f } from "./index107.js";
+function y(s) {
+  const o = s.replace(/^\.|\.$/gm, "");
+  if (o.length === 0)
+    return new Uint8Array(1);
+  const e = new Uint8Array(i(o).byteLength + 2);
+  let t = 0;
+  const l = o.split(".");
+  for (let r = 0; r < l.length; r++) {
+    let n = i(l[r]);
+    n.byteLength > 255 && (n = i(h(f(l[r])))), e[t] = n.length, e.set(n, t + 1), t += n.length + 1;
   }
-  let n = i.tokenID;
-  return i.namespace === "erc1155" && (n = n.replace("0x", "").padStart(64, "0")), N({
-    gatewayUrls: t,
-    uri: a.replace(/(?:0x)?{id}/, n)
-  });
+  return e.byteLength !== t + 1 ? e.slice(0, t + 1) : e;
 }
 export {
-  b as parseAvatarRecord
+  y as packetToBytes
 };

package/dist/esm/index214.js

@@ -1,33 +1,25 @@
-import { fromNumber as a } from "./index246.js";
-import { toRpc as e } from "./index247.js";
-function n(t) {
-  return {
-    ...typeof t.baseFeePerGas == "bigint" && {
-      baseFeePerGas: a(t.baseFeePerGas)
-    },
-    ...typeof t.blobBaseFee == "bigint" && {
-      blobBaseFee: a(t.blobBaseFee)
-    },
-    ...typeof t.feeRecipient == "string" && {
-      feeRecipient: t.feeRecipient
-    },
-    ...typeof t.gasLimit == "bigint" && {
-      gasLimit: a(t.gasLimit)
-    },
-    ...typeof t.number == "bigint" && {
-      number: a(t.number)
-    },
-    ...typeof t.prevRandao == "bigint" && {
-      prevRandao: a(t.prevRandao)
-    },
-    ...typeof t.time == "bigint" && {
-      time: a(t.time)
-    },
-    ...t.withdrawals && {
-      withdrawals: t.withdrawals.map(e)
-    }
-  };
+import { parseAvatarUri as o, parseNftUri as f, getNftTokenUri as v, resolveAvatarUri as l, getJsonImage as A, getMetadataAvatarUri as N } from "./index245.js";
+async function b(r, { gatewayUrls: t, record: e }) {
+  return /eip155:/i.test(e) ? U(r, { gatewayUrls: t, record: e }) : o({ uri: e, gatewayUrls: t });
+}
+async function U(r, { gatewayUrls: t, record: e }) {
+  const i = f(e), s = await v(r, { nft: i }), { uri: a, isOnChain: c, isEncoded: p } = l({ uri: s, gatewayUrls: t });
+  if (c && (a.includes("data:application/json;base64,") || a.startsWith("{"))) {
+    const d = p ? (
+      // if it is encoded, decode it
+      atob(a.replace("data:application/json;base64,", ""))
+    ) : (
+      // if it isn't encoded assume it is a JSON string, but it could be anything (it will error if it is)
+      a
+    ), u = JSON.parse(d);
+    return o({ uri: A(u), gatewayUrls: t });
+  }
+  let n = i.tokenID;
+  return i.namespace === "erc1155" && (n = n.replace("0x", "").padStart(64, "0")), N({
+    gatewayUrls: t,
+    uri: a.replace(/(?:0x)?{id}/, n)
+  });
 }
 export {
-  n as toRpc
+  b as parseAvatarRecord
 };

package/dist/esm/index215.js

@@ -1,4 +1,33 @@
-const a = "0x82ad56cb";
+import { fromNumber as a } from "./index246.js";
+import { toRpc as e } from "./index247.js";
+function n(t) {
+  return {
+    ...typeof t.baseFeePerGas == "bigint" && {
+      baseFeePerGas: a(t.baseFeePerGas)
+    },
+    ...typeof t.blobBaseFee == "bigint" && {
+      blobBaseFee: a(t.blobBaseFee)
+    },
+    ...typeof t.feeRecipient == "string" && {
+      feeRecipient: t.feeRecipient
+    },
+    ...typeof t.gasLimit == "bigint" && {
+      gasLimit: a(t.gasLimit)
+    },
+    ...typeof t.number == "bigint" && {
+      number: a(t.number)
+    },
+    ...typeof t.prevRandao == "bigint" && {
+      prevRandao: a(t.prevRandao)
+    },
+    ...typeof t.time == "bigint" && {
+      time: a(t.time)
+    },
+    ...t.withdrawals && {
+      withdrawals: t.withdrawals.map(e)
+    }
+  };
+}
 export {
-  a as aggregate3Signature
+  n as toRpc
 };

package/dist/esm/index216.js

@@ -1,16 +1,4 @@
-import { CallExecutionError as c } from "./index85.js";
-import { UnknownNodeError as i } from "./index101.js";
-import { getNodeError as u } from "./index224.js";
-function a(r, { docsPath: t, ...o }) {
-  const e = (() => {
-    const n = u(r, o);
-    return n instanceof i ? r : n;
-  })();
-  return new c(e, {
-    docsPath: t,
-    ...o
-  });
-}
+const a = "0x82ad56cb";
 export {
-  a as getCallError
+  a as aggregate3Signature
 };

package/dist/esm/index217.js

@@ -1,15 +1,16 @@
-function y(t, { format: r }) {
-  if (!r)
-    return {};
-  const e = {};
-  function i(c) {
-    const s = Object.keys(c);
-    for (const n of s)
-      n in t && (e[n] = t[n]), c[n] && typeof c[n] == "object" && !Array.isArray(c[n]) && i(c[n]);
-  }
-  const o = r(t || {});
-  return i(o), e;
+import { CallExecutionError as c } from "./index85.js";
+import { UnknownNodeError as i } from "./index101.js";
+import { getNodeError as u } from "./index225.js";
+function a(r, { docsPath: t, ...o }) {
+  const e = (() => {
+    const n = u(r, o);
+    return n instanceof i ? r : n;
+  })();
+  return new c(e, {
+    docsPath: t,
+    ...o
+  });
 }
 export {
-  y as extract
+  a as getCallError
 };

package/dist/esm/index218.js

@@ -1,50 +1,15 @@
-import { InvalidAddressError as a } from "./index104.js";
-import { InvalidBytesLengthError as d } from "./index105.js";
-import { AccountStateConflictError as u, StateAssignmentConflictError as h } from "./index92.js";
-import { isAddress as l } from "./index131.js";
-import { numberToHex as c } from "./index109.js";
-function s(r) {
-  if (!(!r || r.length === 0))
-    return r.reduce((t, { slot: e, value: n }) => {
-      if (e.length !== 66)
-        throw new d({
-          size: e.length,
-          targetSize: 66,
-          type: "hex"
-        });
-      if (n.length !== 66)
-        throw new d({
-          size: n.length,
-          targetSize: 66,
-          type: "hex"
-        });
-      return t[e] = n, t;
-    }, {});
-}
-function m(r) {
-  const { balance: t, nonce: e, state: n, stateDiff: o, code: f } = r, i = {};
-  if (f !== void 0 && (i.code = f), t !== void 0 && (i.balance = c(t)), e !== void 0 && (i.nonce = c(e)), n !== void 0 && (i.state = s(n)), o !== void 0) {
-    if (i.state)
-      throw new h();
-    i.stateDiff = s(o);
-  }
-  return i;
-}
-function A(r) {
+function y(t, { format: r }) {
   if (!r)
-    return;
-  const t = {};
-  for (const { address: e, ...n } of r) {
-    if (!l(e, { strict: !1 }))
-      throw new a({ address: e });
-    if (t[e])
-      throw new u({ address: e });
-    t[e] = m(n);
+    return {};
+  const e = {};
+  function i(c) {
+    const s = Object.keys(c);
+    for (const n of s)
+      n in t && (e[n] = t[n]), c[n] && typeof c[n] == "object" && !Array.isArray(c[n]) && i(c[n]);
   }
-  return t;
+  const o = r(t || {});
+  return i(o), e;
 }
 export {
-  m as serializeAccountStateOverride,
-  s as serializeStateMapping,
-  A as serializeStateOverride
+  y as extract
 };

package/dist/esm/index219.js

@@ -1,12 +1,50 @@
-import { recoverAddress as i } from "./index149.js";
-import { hashAuthorization as e } from "./index248.js";
-async function a(o) {
-  const { authorization: r, signature: t } = o;
-  return i({
-    hash: e(r),
-    signature: t ?? r
-  });
+import { InvalidAddressError as a } from "./index104.js";
+import { InvalidBytesLengthError as d } from "./index105.js";
+import { AccountStateConflictError as u, StateAssignmentConflictError as h } from "./index92.js";
+import { isAddress as l } from "./index131.js";
+import { numberToHex as c } from "./index109.js";
+function s(r) {
+  if (!(!r || r.length === 0))
+    return r.reduce((t, { slot: e, value: n }) => {
+      if (e.length !== 66)
+        throw new d({
+          size: e.length,
+          targetSize: 66,
+          type: "hex"
+        });
+      if (n.length !== 66)
+        throw new d({
+          size: n.length,
+          targetSize: 66,
+          type: "hex"
+        });
+      return t[e] = n, t;
+    }, {});
+}
+function m(r) {
+  const { balance: t, nonce: e, state: n, stateDiff: o, code: f } = r, i = {};
+  if (f !== void 0 && (i.code = f), t !== void 0 && (i.balance = c(t)), e !== void 0 && (i.nonce = c(e)), n !== void 0 && (i.state = s(n)), o !== void 0) {
+    if (i.state)
+      throw new h();
+    i.stateDiff = s(o);
+  }
+  return i;
+}
+function A(r) {
+  if (!r)
+    return;
+  const t = {};
+  for (const { address: e, ...n } of r) {
+    if (!l(e, { strict: !1 }))
+      throw new a({ address: e });
+    if (t[e])
+      throw new u({ address: e });
+    t[e] = m(n);
+  }
+  return t;
 }
 export {
-  a as recoverAuthorizationAddress
+  m as serializeAccountStateOverride,
+  s as serializeStateMapping,
+  A as serializeStateOverride
 };

package/dist/esm/index22.js

@@ -1,6 +1,6 @@
 import { getChainContractAddress as l } from "./index173.js";
 import { toHex as u } from "./index109.js";
-import { packetToBytes as v } from "./index212.js";
+import { packetToBytes as v } from "./index213.js";
 import { getAction as f } from "./index206.js";
 import { readContract as m } from "./index55.js";
 async function A(o, r) {