@coinbase/cdp-hooks 0.0.70 → 0.0.71

package/README.md

@@ -252,6 +252,28 @@ function SignIn() {
       console.log("Signed in user:", user);
       
       // Access different account types based on configuration
+
+      // Using new account objects (recommended)
+      if (user.evmAccountObjects?.length > 0) {
+        user.evmAccountObjects.forEach((account, index) => {
+          console.log(`EVM Account ${index + 1}:`, account.address);
+          console.log(`Created:`, new Date(account.createdAt).toLocaleDateString());
+        });
+      }
+      if (user.evmSmartAccountObjects?.length > 0) {
+        user.evmSmartAccountObjects.forEach((account, index) => {
+          console.log(`Smart Account ${index + 1}:`, account.address);
+          console.log(`Owners:`, account.ownerAddresses.join(', '));
+        });
+      }
+      if (user.solanaAccountObjects?.length > 0) {
+        user.solanaAccountObjects.forEach((account, index) => {
+          console.log(`Solana Account ${index + 1}:`, account.address);
+        });
+      }
+
+      // Legacy deprecated arrays (for backward compatibility)
+      // ⚠️ Use *AccountObjects instead
       if (user.evmAccounts?.length > 0) {
         console.log("User EVM address (EOA):", user.evmAccounts[0]);
       }
@@ -270,6 +292,81 @@ function SignIn() {
 }
 ```
 
+### Working with Multiple Accounts
+
+Users can have up to 10 accounts per blockchain type (EVM, Solana). The SDK provides both single-account and multi-account hooks to support different use cases.
+
+#### Single Account Hooks
+
+These hooks return the **first account (index 0)**. They're ideal for simple applications where most users have one account:
+
+- `useEvmAddress()` - Returns first smart account, then first EOA
+- `useSolanaAddress()` - Returns first Solana account
+
+```tsx lines
+function SimpleWallet() {
+  const { evmAddress } = useEvmAddress(); // Returns first EVM address
+  const { solanaAddress } = useSolanaAddress(); // Returns first Solana address
+
+  return (
+    <div>
+      <p>EVM: {evmAddress ?? 'No account'}</p>
+      <p>Solana: {solanaAddress ?? 'No account'}</p>
+    </div>
+  );
+}
+```
+
+#### Multi-Account Hooks (All Accounts with Metadata)
+
+These hooks return **all accounts** with additional metadata (creation timestamp, owner addresses). Use these when:
+- Users may have multiple accounts
+- You need account metadata (creation date, etc.)
+- You're building an account selector UI
+
+Available hooks:
+- `useEvmAccounts()` - All EVM EOA accounts with metadata
+- `useSolanaAccounts()` - All Solana accounts with metadata
+- `useEvmSmartAccounts()` - All EVM smart accounts with metadata
+
+```tsx lines
+function MultiAccountWallet() {
+  const { evmAccounts } = useEvmAccounts();
+  const { solanaAccounts } = useSolanaAccounts();
+
+  return (
+    <div>
+      <h3>EVM Accounts</h3>
+      {evmAccounts?.map((account, idx) => (
+        <div key={account.address}>
+          <p>Account {idx + 1}: {account.address}</p>
+          <p>Created: {new Date(account.createdAt).toLocaleDateString()}</p>
+        </div>
+      ))}
+
+      <h3>Solana Accounts</h3>
+      {solanaAccounts?.map((account, idx) => (
+        <div key={account.address}>
+          <p>Account {idx + 1}: {account.address}</p>
+          <p>Created: {new Date(account.createdAt).toLocaleDateString()}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+#### When to Use Which?
+
+| Use Case | Hook to Use |
+|----------|-------------|
+| Simple wallet display | `useEvmAddress()` / `useSolanaAddress()` |
+| Account selector dropdown | `useEvmAccounts()` / `useSolanaAccounts()` |
+| Display creation dates | `useEvmAccounts()` / `useSolanaAccounts()` |
+| Show owner addresses (smart accounts) | `useEvmSmartAccounts()` |
+| Most users have 1 account | `useEvmAddress()` / `useSolanaAddress()` |
+| Advanced multi-account features | `useEvmAccounts()` / `useSolanaAccounts()` |
+
 #### React Native Applications
 
 For React Native, you'll use native UI components and handle the sign-in flow similarly:
@@ -671,7 +768,7 @@ function CustomAuthSignIn() {
       console.log("Is new user:", result.isNewUser);
 
       // The user is now signed in and wallets are created based on your config
-      if (result.user.evmAccounts?.[0]) {
+      if (result.user.evmAccountObjects?.[0]?.address) {
         console.log("EVM Address:", result.user.evmAccounts[0]);
       }
     } catch (error) {
@@ -688,6 +785,190 @@ function CustomAuthSignIn() {
 }
 ```
 
+### Multi-Factor Authentication (MFA)
+
+The CDP SDK provides hooks for implementing Multi-Factor Authentication using TOTP (Time-based One-Time Password). MFA adds an extra layer of security for user accounts and sensitive operations.
+
+#### Enroll User in MFA
+
+Use `useInitiateMfaEnrollment` and `useSubmitMfaEnrollment` to enroll a user in MFA:
+
+```tsx lines
+import { 
+  useInitiateMfaEnrollment, 
+  useSubmitMfaEnrollment,
+  useCurrentUser 
+} from "@coinbase/cdp-hooks";
+import { useState } from "react";
+import QRCode from "react-qr-code";
+
+function MfaEnrollment() {
+  const { initiateMfaEnrollment } = useInitiateMfaEnrollment();
+  const { submitMfaEnrollment } = useSubmitMfaEnrollment();
+  const { currentUser } = useCurrentUser();
+  const [enrollmentData, setEnrollmentData] = useState<{
+    authUrl: string;
+    secret: string;
+  } | null>(null);
+  const [mfaCode, setMfaCode] = useState("");
+
+  const handleInitiateEnrollment = async () => {
+    try {
+      // Step 1: Initiate MFA enrollment
+      const result = await initiateMfaEnrollment({ mfaMethod: "totp" });
+      
+      // Store the authUrl and secret for QR code display
+      setEnrollmentData(result);
+      
+      console.log("Scan QR code or enter secret:", result.secret);
+    } catch (error) {
+      console.error("Failed to initiate MFA enrollment:", error);
+    }
+  };
+
+  const handleSubmitEnrollment = async () => {
+    try {
+      // Step 2: Submit the 6-digit code from authenticator app
+      const result = await submitMfaEnrollment({
+        mfaMethod: "totp",
+        mfaCode: mfaCode,
+      });
+      
+      console.log("MFA enrolled successfully for user:", result.user.userId);
+      setEnrollmentData(null);
+      setMfaCode("");
+    } catch (error) {
+      console.error("Failed to submit MFA enrollment:", error);
+    }
+  };
+
+  if (!currentUser) {
+    return <div>Please sign in to enable MFA</div>;
+  }
+
+  return (
+    <div>
+      <h2>Enable MFA</h2>
+      
+      {!enrollmentData ? (
+        <button onClick={handleInitiateEnrollment}>
+          Start MFA Enrollment
+        </button>
+      ) : (
+        <div>
+          <p>Scan this QR code with your authenticator app:</p>
+          <QRCode value={enrollmentData.authUrl} />
+          
+          <p>Or manually enter this secret: {enrollmentData.secret}</p>
+          
+          <input
+            type="text"
+            placeholder="Enter 6-digit code"
+            value={mfaCode}
+            onChange={(e) => setMfaCode(e.target.value)}
+            maxLength={6}
+          />
+          
+          <button 
+            onClick={handleSubmitEnrollment}
+            disabled={mfaCode.length !== 6}
+          >
+            Verify and Enable MFA
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+#### Verify MFA for Sensitive Operations
+
+Use `useInitiateMfaVerification` and `useSubmitMfaVerification` to verify MFA for sensitive operations:
+
+```tsx lines
+import {
+  useInitiateMfaVerification,
+  useSubmitMfaVerification,
+  useCurrentUser
+} from "@coinbase/cdp-hooks";
+import { useState } from "react";
+
+function MfaVerification() {
+  const { initiateMfaVerification } = useInitiateMfaVerification();
+  const { submitMfaVerification } = useSubmitMfaVerification();
+  const { currentUser } = useCurrentUser();
+  const [mfaCode, setMfaCode] = useState("");
+  const [verificationInitiated, setVerificationInitiated] = useState(false);
+
+  const handleSensitiveOperation = async () => {
+    try {
+      // Step 1: Initiate MFA verification
+      await initiateMfaVerification({ mfaMethod: "totp" });
+      setVerificationInitiated(true);
+      
+      console.log("MFA verification initiated. Enter your code.");
+    } catch (error) {
+      console.error("Failed to initiate MFA verification:", error);
+    }
+  };
+
+  const handleVerifyMfa = async () => {
+    try {
+      // Step 2: Submit the 6-digit code from authenticator app
+      await submitMfaVerification({
+        mfaMethod: "totp",
+        mfaCode: mfaCode,
+      });
+      
+      console.log("MFA verified successfully");
+      setVerificationInitiated(false);
+      setMfaCode("");
+      
+      // Now proceed with your sensitive operation
+      // e.g., sign a transaction, export private key, etc.
+    } catch (error) {
+      console.error("MFA verification failed:", error);
+    }
+  };
+
+  if (!currentUser) {
+    return <div>Please sign in first</div>;
+  }
+
+  return (
+    <div>
+      <h2>Sensitive Operation</h2>
+      
+      {!verificationInitiated ? (
+        <button onClick={handleSensitiveOperation}>
+          Perform Sensitive Operation
+        </button>
+      ) : (
+        <div>
+          <p>Enter your MFA code to continue:</p>
+          
+          <input
+            type="text"
+            placeholder="Enter 6-digit code"
+            value={mfaCode}
+            onChange={(e) => setMfaCode(e.target.value)}
+            maxLength={6}
+          />
+          
+          <button 
+            onClick={handleVerifyMfa}
+            disabled={mfaCode.length !== 6}
+          >
+            Verify MFA
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
 ### View User Information
 
 Once the end user has signed in, you can display their information in your application:
@@ -712,7 +993,7 @@ function UserInformation() {
 
       <>
         <p>EVM Address (EOA): {evmAddress}</p>
-        {user.evmSmartAccounts?.[0] && (
+        {user.evmSmartAccountObjects?.[0]?.address && (
           <p>Smart Account: {user.evmSmartAccounts[0]}</p>
         )}
       </>
@@ -856,7 +1137,7 @@ When your application is configured with `solana: { createOnLogin: true }`, you
 
 #### Access Solana Address
 
-Use the `useSolanaAddress` hook to get the user's primary Solana address:
+Use the `useSolanaAddress` hook to get the user's first Solana address:
 
 ```tsx lines
 import { useSolanaAddress } from "@coinbase/cdp-hooks";
@@ -1304,7 +1585,7 @@ function CreateSpendPermission() {
 
       <button
         onClick={handleCreateSpendPermission}
-        disabled={status === "pending" || !currentUser?.evmSmartAccounts?.[0]}
+        disabled={status === "pending" || !currentUser?.evmSmartAccountObjects?.[0]?.address}
       >
         {status === "pending" ? "Creating..." : "Create Spend Permission"}
       </button>
@@ -1329,7 +1610,7 @@ import { useListSpendPermissions, useCurrentUser } from "@coinbase/cdp-hooks";
 function SpendPermissionsList() {
   const { currentUser } = useCurrentUser();
   const { data, error, status, refetch } = useListSpendPermissions({
-    evmSmartAccount: currentUser?.evmSmartAccounts?.[0],
+    evmSmartAccount: currentUser?.evmSmartAccountObjects?.[0]?.address,
     network: "base-sepolia",
     pageSize: 10,
     enabled: true
@@ -1423,7 +1704,7 @@ function SendUserOperation() {
   const { currentUser } = useCurrentUser();
 
   const handleSendUserOperation = async () => {
-    const smartAccount = currentUser?.evmSmartAccounts?.[0];
+    const smartAccount = currentUser?.evmSmartAccountObjects?.[0]?.address;
     if (!smartAccount) return;
 
     try {
@@ -1692,12 +1973,12 @@ function X402SmartAccountExample() {
   const { fetchWithPayment } = useX402();
 
   // The hook automatically uses the appropriate account type
-  const accountUsed = currentUser?.evmSmartAccounts?.[0] || currentUser?.evmAccounts?.[0];
+  const accountUsed = currentUser?.evmSmartAccountObjects?.[0]?.address || currentUser?.evmAccountObjects?.[0]?.address;
 
   return (
     <div>
       <p>X402 will use account: {accountUsed}</p>
-      <p>Account type: {currentUser?.evmSmartAccounts?.[0] ? "Smart Account" : "EOA"}</p>
+      <p>Account type: {currentUser?.evmSmartAccountObjects?.[0]?.address ? "Smart Account" : "EOA"}</p>
     </div>
   );
 }
@@ -1712,7 +1993,7 @@ import { useX402, useCurrentUser } from "@coinbase/cdp-hooks";
 
 const { currentUser } = useCurrentUser();
 const { fetchWithPayment } = useX402({
-  address: currentUser?.solanaAccounts?.[0]
+  address: currentUser?.solanaAccountObjects?.[0]?.address
 });
 
 await fetchWithPayment("https://api.example.com/paid-endpoint", {

package/dist/esm/index.js

@@ -1,66 +1,77 @@
 import { APIError as i, OAuth2ProviderType as a } from "@coinbase/cdp-core";
 import { Analytics as e } from "./index2.js";
 import "react";
-import { VERSION as s } from "./index3.js";
+import { VERSION as o } from "./index3.js";
 import { CDPContext as p, CDPHooksProvider as S } from "./index4.js";
-import { useAuthenticateWithJWT as f, useConfig as E, useCurrentUser as x, useEnforceAuthenticated as d, useEnforceUnauthenticated as g, useEvmAddress as A, useExportEvmAccount as h, useExportSolanaAccount as l, useGetAccessToken as v, useIsInitialized as P, useIsSignedIn as k, useOAuthState as O, useSendEvmTransaction as T, useSendSolanaTransaction as C, useSendUserOperation as I, 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 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 { useCreateEvmEoaAccount as ne } from "./index14.js";
-import { useCreateEvmSmartAccount as ie } from "./index15.js";
-import { useCreateSolanaAccount as me } from "./index16.js";
-import { useX402 as Se } from "./index17.js";
-e.registerPackageVersion("hooks", s);
+import { useAuthenticateWithJWT as c, useConfig as E, useCurrentUser as x, useEnforceAuthenticated as A, useEnforceUnauthenticated as l, useEvmAccounts as d, useEvmAddress as g, useEvmSmartAccounts as v, useExportEvmAccount as h, useExportSolanaAccount as I, useGetAccessToken as P, useIsInitialized as k, useIsSignedIn as O, useOAuthState as T, useSendEvmTransaction as C, useSendSolanaTransaction as L, useSendUserOperation as M, useSignEvmHash as V, useSignEvmMessage as W, useSignEvmTransaction as y, useSignEvmTypedData as U, useSignInWithEmail as D, useSignInWithOAuth as b, useSignInWithSms as G, useSignOut as H, useSignSolanaMessage as R, useSignSolanaTransaction as z, useSolanaAccounts as F, useSolanaAddress as J, useVerifyEmailOTP as N, useVerifySmsOTP as X, useWaitForUserOperation as j } from "./index5.js";
+import { useCreateSpendPermission as w } from "./index6.js";
+import { useListSpendPermissions as K } from "./index7.js";
+import { useRevokeSpendPermission as Y } from "./index8.js";
+import { useLinkGoogle as _ } from "./index9.js";
+import { useLinkApple as ee } from "./index10.js";
+import { useLinkSms as se } from "./index11.js";
+import { useLinkEmail as te } from "./index12.js";
+import { useLinkOAuth as ue } from "./index13.js";
+import { useCreateEvmEoaAccount as ae } from "./index14.js";
+import { useCreateEvmSmartAccount as pe } from "./index15.js";
+import { useCreateSolanaAccount as fe } from "./index16.js";
+import { useX402 as Ee } from "./index17.js";
+import { useInitiateMfaEnrollment as Ae } from "./index18.js";
+import { useSubmitMfaEnrollment as de } from "./index19.js";
+import { useInitiateMfaVerification as ve } from "./index20.js";
+import { useSubmitMfaVerification as Ie } from "./index21.js";
+e.registerPackageVersion("hooks", o);
 export {
   i as APIError,
   p as CDPContext,
   S as CDPHooksProvider,
   a as OAuth2ProviderType,
-  f as useAuthenticateWithJWT,
+  c as useAuthenticateWithJWT,
   E as useConfig,
-  ne as useCreateEvmEoaAccount,
-  ie as useCreateEvmSmartAccount,
-  me as useCreateSolanaAccount,
-  b as useCreateSpendPermission,
+  ae as useCreateEvmEoaAccount,
+  pe as useCreateEvmSmartAccount,
+  fe as useCreateSolanaAccount,
+  w as useCreateSpendPermission,
   x as useCurrentUser,
-  d as useEnforceAuthenticated,
-  g as useEnforceUnauthenticated,
-  A as useEvmAddress,
+  A as useEnforceAuthenticated,
+  l as useEnforceUnauthenticated,
+  d as useEvmAccounts,
+  g as useEvmAddress,
+  v as useEvmSmartAccounts,
   h as useExportEvmAccount,
-  l as useExportSolanaAccount,
-  v as useGetAccessToken,
-  P as useIsInitialized,
-  k as useIsSignedIn,
-  Z as useLinkApple,
-  se as useLinkEmail,
-  Q as useLinkGoogle,
-  re as useLinkOAuth,
-  $ as useLinkSms,
-  q as useListSpendPermissions,
-  O as useOAuthState,
-  B as useRevokeSpendPermission,
-  T as useSendEvmTransaction,
-  C as useSendSolanaTransaction,
-  I as useSendUserOperation,
-  L as useSignEvmHash,
+  I as useExportSolanaAccount,
+  P as useGetAccessToken,
+  Ae as useInitiateMfaEnrollment,
+  ve as useInitiateMfaVerification,
+  k as useIsInitialized,
+  O as useIsSignedIn,
+  ee as useLinkApple,
+  te as useLinkEmail,
+  _ as useLinkGoogle,
+  ue as useLinkOAuth,
+  se as useLinkSms,
+  K as useListSpendPermissions,
+  T as useOAuthState,
+  Y as useRevokeSpendPermission,
+  C as useSendEvmTransaction,
+  L as useSendSolanaTransaction,
+  M as useSendUserOperation,
+  V as useSignEvmHash,
   W as useSignEvmMessage,
   y as useSignEvmTransaction,
   U as useSignEvmTypedData,
-  V as useSignInWithEmail,
-  D as useSignInWithOAuth,
+  D as useSignInWithEmail,
+  b as useSignInWithOAuth,
   G as useSignInWithSms,
   H as useSignOut,
-  M as useSignSolanaMessage,
-  R as useSignSolanaTransaction,
-  z as useSolanaAddress,
-  F as useVerifyEmailOTP,
-  J as useVerifySmsOTP,
-  N as useWaitForUserOperation,
-  Se as useX402
+  R as useSignSolanaMessage,
+  z as useSignSolanaTransaction,
+  F as useSolanaAccounts,
+  J as useSolanaAddress,
+  de as useSubmitMfaEnrollment,
+  Ie as useSubmitMfaVerification,
+  N as useVerifyEmailOTP,
+  X as useVerifySmsOTP,
+  j as useWaitForUserOperation,
+  Ee as useX402
 };

package/dist/esm/index10.js

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

package/dist/esm/index100.js

@@ -1,58 +1,5 @@
-import { version as o } from "./index101.js";
-let r = {
-  getDocsUrl: ({ docsBaseUrl: s, docsPath: t = "", docsSlug: e }) => t ? `${s ?? "https://viem.sh"}${t}${e ? `#${e}` : ""}` : void 0,
-  version: `viem@${o}`
-};
-class u extends Error {
-  constructor(t, e = {}) {
-    const i = e.cause instanceof u ? e.cause.details : e.cause?.message ? e.cause.message : e.details, n = e.cause instanceof u && e.cause.docsPath || e.docsPath, a = r.getDocsUrl?.({ ...e, docsPath: n }), l = [
-      t || "An error occurred.",
-      "",
-      ...e.metaMessages ? [...e.metaMessages, ""] : [],
-      ...a ? [`Docs: ${a}`] : [],
-      ...i ? [`Details: ${i}`] : [],
-      ...r.version ? [`Version: ${r.version}`] : []
-    ].join(`
-`);
-    super(l, e.cause ? { cause: e.cause } : void 0), Object.defineProperty(this, "details", {
-      enumerable: !0,
-      configurable: !0,
-      writable: !0,
-      value: void 0
-    }), Object.defineProperty(this, "docsPath", {
-      enumerable: !0,
-      configurable: !0,
-      writable: !0,
-      value: void 0
-    }), Object.defineProperty(this, "metaMessages", {
-      enumerable: !0,
-      configurable: !0,
-      writable: !0,
-      value: void 0
-    }), Object.defineProperty(this, "shortMessage", {
-      enumerable: !0,
-      configurable: !0,
-      writable: !0,
-      value: void 0
-    }), Object.defineProperty(this, "version", {
-      enumerable: !0,
-      configurable: !0,
-      writable: !0,
-      value: void 0
-    }), Object.defineProperty(this, "name", {
-      enumerable: !0,
-      configurable: !0,
-      writable: !0,
-      value: "BaseError"
-    }), this.details = i, this.docsPath = n, this.metaMessages = e.metaMessages, this.name = e.name ?? this.name, this.shortMessage = t, this.version = o;
-  }
-  walk(t) {
-    return c(this, t);
-  }
-}
-function c(s, t) {
-  return t?.(s) ? s : s && typeof s == "object" && "cause" in s && s.cause !== void 0 ? c(s.cause, t) : t ? null : s;
-}
+const e = `Ethereum Signed Message:
+`;
 export {
-  u as BaseError
+  e as presignMessagePrefix
 };