@coinbase/cdp-hooks 0.0.62 → 0.0.64

package/README.md

@@ -1402,3 +1402,232 @@ function ConditionalWaitForUserOperation() {
   );
 }
 ```
+
+### X402 Payment Protocol Support
+
+The SDK includes built-in support for the X402 payment protocol through the `useX402` hook. This enables HTTP requests with micropayments, allowing access to paid APIs and services that require payment for each request.
+
+#### Installation
+
+Ensure you have separately installed the `x402-fetch` package:
+
+```bash
+npm install x402-fetch
+```
+
+#### Basic Usage
+
+The `useX402` hook provides a wrapped fetch API that automatically handles X402 payment requests:
+
+```tsx lines
+import { useX402, useCurrentUser } from "@coinbase/cdp-hooks";
+
+function X402Example() {
+  const { currentUser } = useCurrentUser();
+  const { fetchWithPayment } = useX402();
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const handleFetchPaidResource = async () => {
+    if (!currentUser) {
+      setError("Please sign in first");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetchWithPayment("https://api.example.com/paid-endpoint", {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json"
+        }
+      });
+      
+      const result = await response.json();
+      setData(result);
+      console.log("Paid API response:", result);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch resource");
+      console.error("X402 payment failed:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <h3>X402 Payment Example</h3>
+      
+      {!currentUser && <p>Please sign in to use X402 payments</p>}
+      
+      <button 
+        onClick={handleFetchPaidResource} 
+        disabled={!currentUser || loading}
+      >
+        {loading ? "Processing..." : "Fetch Paid Resource"}
+      </button>
+      
+      {error && <p style={{ color: 'red' }}>Error: {error}</p>}
+      
+      {data && (
+        <div>
+          <h4>Response:</h4>
+          <pre>{JSON.stringify(data, null, 2)}</pre>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+#### Advanced Configuration
+
+You can customize the X402 behavior with options:
+
+```tsx lines
+import { useX402 } from "@coinbase/cdp-hooks";
+
+function X402AdvancedExample() {
+  // Use a specific address for payments (instead of the user's default)
+  const { fetchWithPayment: fetchWithSpecificAddress } = useX402({
+    address: "0x1234567890123456789012345678901234567890"
+  });
+
+  // Use a custom fetch implementation
+  const customFetch = (url, options) => {
+    console.log("Making request to:", url);
+    return fetch(url, options);
+  };
+
+  const { fetchWithPayment: fetchWithCustomImpl } = useX402({
+    fetch: customFetch
+  });
+
+  // Combine both options
+  const { fetchWithPayment: fetchWithBothOptions } = useX402({
+    address: "0x1234567890123456789012345678901234567890",
+    fetch: customFetch
+  });
+
+  return (
+    <div>
+      <p>Multiple X402 configurations available</p>
+    </div>
+  );
+}
+```
+
+#### How It Works
+
+1. When you make a request to an X402-protected resource, the server responds with a `402 Payment Required` status
+2. The wrapped fetch function automatically:
+   - Extracts payment details from the server's response
+   - Creates and signs a payment transaction using the user's wallet
+   - Includes the payment proof in a retry request
+3. The server validates the payment and returns the requested resource
+
+#### Smart Account Support
+
+By default, `useX402` will use the user's Smart Account if available, falling back to their regular EVM account:
+
+```tsx lines
+import { useX402, useCurrentUser } from "@coinbase/cdp-hooks";
+
+function X402SmartAccountExample() {
+  const { currentUser } = useCurrentUser();
+  const { fetchWithPayment } = useX402();
+
+  // The hook automatically uses the appropriate account type
+  const accountUsed = currentUser?.evmSmartAccounts?.[0] || currentUser?.evmAccounts?.[0];
+
+  return (
+    <div>
+      <p>X402 will use account: {accountUsed}</p>
+      <p>Account type: {currentUser?.evmSmartAccounts?.[0] ? "Smart Account" : "EOA"}</p>
+    </div>
+  );
+}
+```
+
+#### Solana Support
+
+Solana support is supported out of the box with `useX402`. If your end user has both an EVM and Solana account, the EVM account will be used by defualt. You can pass a Solana address to `useX402` to use the Solana account instead.
+
+```tsx lines
+import { useX402, useCurrentUser } from "@coinbase/cdp-hooks";
+
+const { currentUser } = useCurrentUser();
+const { fetchWithPayment } = useX402({
+  address: currentUser?.solanaAccounts?.[0]
+});
+
+await fetchWithPayment("https://api.example.com/paid-endpoint", {
+  method: "GET",
+  headers: {
+    "Content-Type": "application/json"
+  }
+});
+```
+
+#### React Native Support
+
+The `useX402` hook works seamlessly in React Native applications:
+
+```tsx lines
+import React, { useState } from "react";
+import { View, Text, TouchableOpacity, ActivityIndicator } from "react-native";
+import { useX402, useCurrentUser } from "@coinbase/cdp-hooks";
+
+function X402ReactNativeExample() {
+  const { currentUser } = useCurrentUser();
+  const { fetchWithPayment } = useX402();
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState(null);
+
+  const handleFetchPaidResource = async () => {
+    setLoading(true);
+    try {
+      const response = await fetchWithPayment("https://api.example.com/paid-endpoint");
+      const result = await response.json();
+      setData(result);
+    } catch (error) {
+      console.error("Failed to fetch paid resource:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <View style={{ padding: 20 }}>
+      <TouchableOpacity
+        onPress={handleFetchPaidResource}
+        disabled={!currentUser || loading}
+        style={{
+          backgroundColor: "#007AFF",
+          padding: 15,
+          borderRadius: 8,
+          alignItems: "center",
+          opacity: !currentUser || loading ? 0.6 : 1,
+        }}
+      >
+        {loading ? (
+          <ActivityIndicator color="white" />
+        ) : (
+          <Text style={{ color: "white", fontSize: 16, fontWeight: "600" }}>
+            Fetch X402 Resource
+          </Text>
+        )}
+      </TouchableOpacity>
+      
+      {data && (
+        <View style={{ marginTop: 20, padding: 10, backgroundColor: "#f0f0f0" }}>
+          <Text>{JSON.stringify(data, null, 2)}</Text>
+        </View>
+      )}
+    </View>
+  );
+}
+```

package/dist/esm/index.js

@@ -4,14 +4,15 @@ import "react";
 import { VERSION as s } from "./index3.js";
 import { CDPContext as S, CDPHooksProvider as p } from "./index4.js";
 import { useAuthenticateWithJWT as c, useConfig as d, useCurrentUser as g, useEnforceAuthenticated as E, useEnforceUnauthenticated as x, useEvmAddress as A, useExportEvmAccount as h, useExportSolanaAccount as l, useGetAccessToken as P, useIsInitialized as k, useIsSignedIn as v, useOAuthState as O, useSendEvmTransaction as T, useSendSolanaTransaction as I, useSendUserOperation as C, useSignEvmHash as L, useSignEvmMessage as W, useSignEvmTransaction as y, useSignEvmTypedData as U, useSignInWithEmail as V, useSignInWithOAuth as D, useSignInWithSms as G, useSignOut as H, useSignSolanaMessage as M, useSignSolanaTransaction as R, useSolanaAddress as z, useVerifyEmailOTP as F, useVerifySmsOTP as J, useWaitForUserOperation as N } from "./index5.js";
-import { useCreateSpendPermission as j } from "./index6.js";
-import { useListSpendPermissions as w } from "./index7.js";
-import { useRevokeSpendPermission as K } from "./index8.js";
-import { useLinkGoogle as X } from "./index9.js";
+import { useCreateSpendPermission as b } from "./index6.js";
+import { useListSpendPermissions as q } from "./index7.js";
+import { useRevokeSpendPermission as B } from "./index8.js";
+import { useLinkGoogle as Q } from "./index9.js";
 import { useLinkApple as Z } from "./index10.js";
 import { useLinkSms as $ } from "./index11.js";
 import { useLinkEmail as se } from "./index12.js";
 import { useLinkOAuth as re } from "./index13.js";
+import { useX402 as te } from "./index14.js";
 e.registerPackageVersion("hooks", s);
 export {
   u as APIError,
@@ -20,7 +21,7 @@ export {
   a as OAuth2ProviderType,
   c as useAuthenticateWithJWT,
   d as useConfig,
-  j as useCreateSpendPermission,
+  b as useCreateSpendPermission,
   g as useCurrentUser,
   E as useEnforceAuthenticated,
   x as useEnforceUnauthenticated,
@@ -32,12 +33,12 @@ export {
   v as useIsSignedIn,
   Z as useLinkApple,
   se as useLinkEmail,
-  X as useLinkGoogle,
+  Q as useLinkGoogle,
   re as useLinkOAuth,
   $ as useLinkSms,
-  w as useListSpendPermissions,
+  q as useListSpendPermissions,
   O as useOAuthState,
-  K as useRevokeSpendPermission,
+  B as useRevokeSpendPermission,
   T as useSendEvmTransaction,
   I as useSendSolanaTransaction,
   C as useSendUserOperation,
@@ -54,5 +55,6 @@ export {
   z as useSolanaAddress,
   F as useVerifyEmailOTP,
   J as useVerifySmsOTP,
-  N as useWaitForUserOperation
+  N as useWaitForUserOperation,
+  te as useX402
 };

package/dist/esm/index10.js

@@ -1,5 +1,5 @@
 import "./index2.js";
-import { useSendHookCallOnce as t } from "./index14.js";
+import { useSendHookCallOnce as t } from "./index15.js";
 import "react";
 import { useLinkOAuth as o } from "./index13.js";
 function u() {

package/dist/esm/index100.js

@@ -1,34 +1,217 @@
-const e = {
-  1: "An `assert` condition failed.",
-  17: "Arithmetic operation resulted in underflow or overflow.",
-  18: "Division or modulo by zero (e.g. `5 / 0` or `23 % 0`).",
-  33: "Attempted to convert to an invalid type.",
-  34: "Attempted to access a storage byte array that is incorrectly encoded.",
-  49: "Performed `.pop()` on an empty array",
-  50: "Array index is out of bounds.",
-  65: "Allocated too much memory or created an array which is too large.",
-  81: "Attempted to call a zero-initialized variable of internal function type."
-}, o = {
-  inputs: [
-    {
-      name: "message",
-      type: "string"
-    }
-  ],
-  name: "Error",
-  type: "error"
-}, t = {
-  inputs: [
-    {
-      name: "reason",
-      type: "uint256"
-    }
-  ],
-  name: "Panic",
-  type: "error"
-};
+import { parseAccount as E } from "./index26.js";
+import { panicReasons as $ } from "./index101.js";
+import { decodeErrorResult as A } from "./index102.js";
+import { formatAbiItem as y } from "./index95.js";
+import { formatAbiItemWithArgs as v } from "./index103.js";
+import { getAbiItem as C } from "./index104.js";
+import { formatEther as P } from "./index105.js";
+import { formatGwei as p } from "./index106.js";
+import { AbiErrorSignatureNotFoundError as j } from "./index94.js";
+import { BaseError as m } from "./index97.js";
+import { prettyStateOverride as x } from "./index107.js";
+import { prettyPrint as w } from "./index108.js";
+import { getContractAddress as O } from "./index109.js";
+class z extends m {
+  constructor(e, { account: o, docsPath: u, chain: s, data: c, gas: a, gasPrice: i, maxFeePerGas: r, maxPriorityFeePerGas: t, nonce: n, to: l, value: d, stateOverride: f }) {
+    const h = o ? E(o) : void 0;
+    let g = w({
+      from: h?.address,
+      to: l,
+      value: typeof d < "u" && `${P(d)} ${s?.nativeCurrency?.symbol || "ETH"}`,
+      data: c,
+      gas: a,
+      gasPrice: typeof i < "u" && `${p(i)} gwei`,
+      maxFeePerGas: typeof r < "u" && `${p(r)} gwei`,
+      maxPriorityFeePerGas: typeof t < "u" && `${p(t)} gwei`,
+      nonce: n
+    });
+    f && (g += `
+${x(f)}`), super(e.shortMessage, {
+      cause: e,
+      docsPath: u,
+      metaMessages: [
+        ...e.metaMessages ? [...e.metaMessages, " "] : [],
+        "Raw Call Arguments:",
+        g
+      ].filter(Boolean),
+      name: "CallExecutionError"
+    }), Object.defineProperty(this, "cause", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), this.cause = e;
+  }
+}
+class G extends m {
+  constructor(e, { abi: o, args: u, contractAddress: s, docsPath: c, functionName: a, sender: i }) {
+    const r = C({ abi: o, args: u, name: a }), t = r ? v({
+      abiItem: r,
+      args: u,
+      includeFunctionName: !1,
+      includeName: !1
+    }) : void 0, n = r ? y(r, { includeName: !0 }) : void 0, l = w({
+      address: s && O(s),
+      function: n,
+      args: t && t !== "()" && `${[...Array(a?.length ?? 0).keys()].map(() => " ").join("")}${t}`,
+      sender: i
+    });
+    super(e.shortMessage || `An unknown error occurred while executing the contract function "${a}".`, {
+      cause: e,
+      docsPath: c,
+      metaMessages: [
+        ...e.metaMessages ? [...e.metaMessages, " "] : [],
+        l && "Contract Call:",
+        l
+      ].filter(Boolean),
+      name: "ContractFunctionExecutionError"
+    }), Object.defineProperty(this, "abi", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "args", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "cause", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "contractAddress", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "formattedArgs", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "functionName", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "sender", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), this.abi = o, this.args = u, this.cause = e, this.contractAddress = s, this.functionName = a, this.sender = i;
+  }
+}
+class H extends m {
+  constructor({ abi: e, data: o, functionName: u, message: s }) {
+    let c, a, i, r;
+    if (o && o !== "0x")
+      try {
+        a = A({ abi: e, data: o });
+        const { abiItem: n, errorName: l, args: d } = a;
+        if (l === "Error")
+          r = d[0];
+        else if (l === "Panic") {
+          const [f] = d;
+          r = $[f];
+        } else {
+          const f = n ? y(n, { includeName: !0 }) : void 0, h = n && d ? v({
+            abiItem: n,
+            args: d,
+            includeFunctionName: !1,
+            includeName: !1
+          }) : void 0;
+          i = [
+            f ? `Error: ${f}` : "",
+            h && h !== "()" ? `       ${[...Array(l?.length ?? 0).keys()].map(() => " ").join("")}${h}` : ""
+          ];
+        }
+      } catch (n) {
+        c = n;
+      }
+    else s && (r = s);
+    let t;
+    c instanceof j && (t = c.signature, i = [
+      `Unable to decode signature "${t}" as it was not found on the provided ABI.`,
+      "Make sure you are using the correct ABI and that the error exists on it.",
+      `You can look up the decoded signature here: https://openchain.xyz/signatures?query=${t}.`
+    ]), super(r && r !== "execution reverted" || t ? [
+      `The contract function "${u}" reverted with the following ${t ? "signature" : "reason"}:`,
+      r || t
+    ].join(`
+`) : `The contract function "${u}" reverted.`, {
+      cause: c,
+      metaMessages: i,
+      name: "ContractFunctionRevertedError"
+    }), Object.defineProperty(this, "data", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "raw", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "reason", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "signature", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), this.data = a, this.raw = o, this.reason = r, this.signature = t;
+  }
+}
+class U extends m {
+  constructor({ functionName: e }) {
+    super(`The contract function "${e}" returned no data ("0x").`, {
+      metaMessages: [
+        "This could be due to any of the following:",
+        `  - The contract does not have the function "${e}",`,
+        "  - The parameters passed to the contract function may be invalid, or",
+        "  - The address is not a contract."
+      ],
+      name: "ContractFunctionZeroDataError"
+    });
+  }
+}
+class Y extends m {
+  constructor({ factory: e }) {
+    super(`Deployment for counterfactual contract call failed${e ? ` for factory "${e}".` : ""}`, {
+      metaMessages: [
+        "Please ensure:",
+        "- The `factory` is a valid contract deployment factory (ie. Create2 Factory, ERC-4337 Factory, etc).",
+        "- The `factoryData` is a valid encoded function call for contract deployment function on the factory."
+      ],
+      name: "CounterfactualDeploymentFailedError"
+    });
+  }
+}
+class J extends m {
+  constructor({ data: e, message: o }) {
+    super(o || "", { name: "RawContractError" }), Object.defineProperty(this, "code", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: 3
+    }), Object.defineProperty(this, "data", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), this.data = e;
+  }
+}
 export {
-  e as panicReasons,
-  o as solidityError,
-  t as solidityPanic
+  z as CallExecutionError,
+  G as ContractFunctionExecutionError,
+  H as ContractFunctionRevertedError,
+  U as ContractFunctionZeroDataError,
+  Y as CounterfactualDeploymentFailedError,
+  J as RawContractError
 };

package/dist/esm/index101.js

@@ -1,24 +1,34 @@
-import { solidityError as m, solidityPanic as s } from "./index100.js";
-import { AbiDecodingZeroDataError as c, AbiErrorSignatureNotFoundError as d } from "./index93.js";
-import { slice as e } from "./index135.js";
-import { toFunctionSelector as u } from "./index139.js";
-import { decodeAbiParameters as f } from "./index132.js";
-import { formatAbiItem as p } from "./index94.js";
-function y(n) {
-  const { abi: a, data: t } = n, o = e(t, 0, 4);
-  if (o === "0x")
-    throw new c();
-  const r = [...a || [], m, s].find((i) => i.type === "error" && o === u(p(i)));
-  if (!r)
-    throw new d(o, {
-      docsPath: "/docs/contract/decodeErrorResult"
-    });
-  return {
-    abiItem: r,
-    args: "inputs" in r && r.inputs && r.inputs.length > 0 ? f(r.inputs, e(t, 4)) : void 0,
-    errorName: r.name
-  };
-}
+const e = {
+  1: "An `assert` condition failed.",
+  17: "Arithmetic operation resulted in underflow or overflow.",
+  18: "Division or modulo by zero (e.g. `5 / 0` or `23 % 0`).",
+  33: "Attempted to convert to an invalid type.",
+  34: "Attempted to access a storage byte array that is incorrectly encoded.",
+  49: "Performed `.pop()` on an empty array",
+  50: "Array index is out of bounds.",
+  65: "Allocated too much memory or created an array which is too large.",
+  81: "Attempted to call a zero-initialized variable of internal function type."
+}, o = {
+  inputs: [
+    {
+      name: "message",
+      type: "string"
+    }
+  ],
+  name: "Error",
+  type: "error"
+}, t = {
+  inputs: [
+    {
+      name: "reason",
+      type: "uint256"
+    }
+  ],
+  name: "Panic",
+  type: "error"
+};
 export {
-  y as decodeErrorResult
+  e as panicReasons,
+  o as solidityError,
+  t as solidityPanic
 };

package/dist/esm/index102.js

@@ -1,8 +1,24 @@
-import { stringify as o } from "./index117.js";
-function p({ abiItem: n, args: r, includeFunctionName: f = !0, includeName: i = !1 }) {
-  if ("name" in n && "inputs" in n && n.inputs)
-    return `${f ? n.name : ""}(${n.inputs.map((e, t) => `${i && e.name ? `${e.name}: ` : ""}${typeof r[t] == "object" ? o(r[t]) : r[t]}`).join(", ")})`;
+import { solidityError as m, solidityPanic as s } from "./index101.js";
+import { AbiDecodingZeroDataError as c, AbiErrorSignatureNotFoundError as d } from "./index94.js";
+import { slice as e } from "./index136.js";
+import { toFunctionSelector as u } from "./index140.js";
+import { decodeAbiParameters as f } from "./index133.js";
+import { formatAbiItem as p } from "./index95.js";
+function y(n) {
+  const { abi: a, data: t } = n, o = e(t, 0, 4);
+  if (o === "0x")
+    throw new c();
+  const r = [...a || [], m, s].find((i) => i.type === "error" && o === u(p(i)));
+  if (!r)
+    throw new d(o, {
+      docsPath: "/docs/contract/decodeErrorResult"
+    });
+  return {
+    abiItem: r,
+    args: "inputs" in r && r.inputs && r.inputs.length > 0 ? f(r.inputs, e(t, 4)) : void 0,
+    errorName: r.name
+  };
 }
 export {
-  p as formatAbiItemWithArgs
+  y as decodeErrorResult
 };