@coinbase/cdp-hooks 0.0.73 → 0.0.75

package/README.md

@@ -969,6 +969,147 @@ function MfaVerification() {
 }
 ```
 
+#### Check MFA Configuration
+
+Use `useGetMfaConfig` to check whether MFA is enabled for your project:
+
+```tsx lines
+import { useGetMfaConfig } from "@coinbase/cdp-hooks";
+import { useState, useEffect } from "react";
+
+function MfaStatus() {
+  const { getMfaConfig } = useGetMfaConfig();
+  const [config, setConfig] = useState<{
+    enabled: boolean;
+    totpConfig: { enabled: boolean };
+    createdAt: string;
+    updatedAt: string;
+  } | null>(null);
+
+  useEffect(() => {
+    const fetchMfaConfig = async () => {
+      try {
+        const result = await getMfaConfig();
+        setConfig(result);
+        console.log("MFA enabled:", result.enabled);
+        console.log("TOTP enabled:", result.totpConfig.enabled);
+      } catch (error) {
+        console.error("Failed to fetch MFA config:", error);
+      }
+    };
+
+    fetchMfaConfig();
+  }, []);
+
+  if (!config) {
+    return <div>Loading MFA configuration...</div>;
+  }
+
+  return (
+    <div>
+      <h3>MFA Configuration</h3>
+      <p>MFA Enabled: {config.enabled ? "Yes" : "No"}</p>
+      <p>TOTP Enabled: {config.totpConfig.enabled ? "Yes" : "No"}</p>
+      <p>Last Updated: {new Date(config.updatedAt).toLocaleDateString()}</p>
+    </div>
+  );
+}
+```
+
+#### Track MFA Enrollment Prompts
+
+Use `useRecordMfaEnrollmentPrompted` to track when users are shown the MFA enrollment prompt:
+
+```tsx lines
+import { 
+  useRecordMfaEnrollmentPrompted, 
+  useCurrentUser 
+} from "@coinbase/cdp-hooks";
+import { useState } from "react";
+
+function MfaEnrollmentPrompt() {
+  const { recordMfaEnrollmentPrompted } = useRecordMfaEnrollmentPrompted();
+  const { currentUser } = useCurrentUser();
+  const [showPrompt, setShowPrompt] = useState(true);
+
+  const handleSkip = async () => {
+    try {
+      // Record that the user was prompted and chose to skip
+      const result = await recordMfaEnrollmentPrompted();
+      
+      console.log("Enrollment prompt recorded at:", result.enrollmentPromptedAt);
+      
+      // User's state is now updated with the timestamp
+      console.log("Last prompted:", currentUser?.mfaMethods?.enrollmentPromptedAt);
+      
+      setShowPrompt(false);
+    } catch (error) {
+      console.error("Failed to record MFA prompt:", error);
+    }
+  };
+
+  const handleEnroll = async () => {
+    // Record the prompt before starting enrollment
+    await recordMfaEnrollmentPrompted();
+    
+    // Navigate to enrollment flow
+    console.log("Starting MFA enrollment...");
+  };
+
+  // Check if user was recently prompted (within last 30 days)
+  const wasRecentlyPrompted = () => {
+    if (!currentUser?.mfaMethods?.enrollmentPromptedAt) {
+      return false;
+    }
+    
+    const promptedDate = new Date(currentUser.mfaMethods.enrollmentPromptedAt);
+    const thirtyDaysAgo = new Date();
+    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
+    
+    return promptedDate > thirtyDaysAgo;
+  };
+
+  // Don't show prompt if user was recently prompted or already enrolled
+  if (!showPrompt || wasRecentlyPrompted() || currentUser?.mfaMethods?.totp) {
+    return null;
+  }
+
+  return (
+    <div style={{ 
+      padding: "20px", 
+      backgroundColor: "#f0f9ff", 
+      border: "1px solid #bae6fd",
+      borderRadius: "8px"
+    }}>
+      <h3>🔒 Secure Your Account with MFA</h3>
+      <p>
+        Add an extra layer of security by enabling Multi-Factor Authentication.
+      </p>
+      
+      <div style={{ marginTop: "15px", display: "flex", gap: "10px" }}>
+        <button onClick={handleEnroll}>
+          Enable MFA
+        </button>
+        
+        <button onClick={handleSkip} style={{ backgroundColor: "#e5e7eb" }}>
+          Skip for Now
+        </button>
+      </div>
+      
+      <p style={{ fontSize: "12px", marginTop: "10px", color: "#6b7280" }}>
+        You won't be prompted again for 30 days
+      </p>
+    </div>
+  );
+}
+```
+
+**Use Cases for Tracking Enrollment Prompts:**
+- Track when users skip MFA enrollment to avoid over-prompting
+- Implement smart re-prompting logic based on time intervals
+- Analyze MFA adoption rates across your user base
+- Identify users who need additional education about MFA benefits
+
 ### View User Information
 
 Once the end user has signed in, you can display their information in your application:
@@ -1463,7 +1604,95 @@ function SignData() {
 
 End users can export their private keys from their embedded wallet, allowing them to import them into compatible wallets of their choice.
 
-#### Export EVM Private Key
+#### Secure Iframe Export (Recommended)
+
+The secure iframe hooks are the recommended way to export private keys. They create a secure iframe that copies the private key directly to the user's clipboard without ever exposing it to your application's JavaScript context.
+
+##### Export EVM Private Key via Iframe
+
+```tsx lines
+import { useEvmKeyExportIframe, useEvmAddress } from "@coinbase/cdp-hooks";
+import { useRef, useState } from "react";
+
+function ExportEvmKey() {
+  const { evmAddress } = useEvmAddress();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isActive, setIsActive] = useState(false);
+
+  const { status, cleanup } = useEvmKeyExportIframe({
+    address: isActive && evmAddress ? evmAddress : "",
+    containerRef: isActive ? containerRef : { current: null },
+    label: "Copy Private Key",
+    copiedLabel: "Copied!",
+  });
+
+  return (
+    <div>
+      {!isActive ? (
+        <button onClick={() => setIsActive(true)} disabled={!evmAddress}>
+          Show Export Button
+        </button>
+      ) : (
+        <button onClick={() => { cleanup(); setIsActive(false); }}>
+          Hide Export Button
+        </button>
+      )}
+      {isActive && (
+        <div>
+          <div ref={containerRef} />
+          <p>Status: {status ?? "initializing"}</p>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+##### Export Solana Private Key via Iframe
+
+```tsx lines
+import { useSolanaKeyExportIframe, useSolanaAddress } from "@coinbase/cdp-hooks";
+import { useRef, useState } from "react";
+
+function ExportSolanaKey() {
+  const { solanaAddress } = useSolanaAddress();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isActive, setIsActive] = useState(false);
+
+  const { status, cleanup } = useSolanaKeyExportIframe({
+    address: isActive && solanaAddress ? solanaAddress : "",
+    containerRef: isActive ? containerRef : { current: null },
+    label: "Copy Private Key",
+    copiedLabel: "Copied!",
+  });
+
+  return (
+    <div>
+      {!isActive ? (
+        <button onClick={() => setIsActive(true)} disabled={!solanaAddress}>
+          Show Export Button
+        </button>
+      ) : (
+        <button onClick={() => { cleanup(); setIsActive(false); }}>
+          Hide Export Button
+        </button>
+      )}
+      {isActive && (
+        <div>
+          <div ref={containerRef} />
+          <p>Status: {status ?? "initializing"}</p>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+#### Direct Export (Deprecated)
+
+> **⚠️ Deprecated:** The direct export hooks expose the private key to your application's JavaScript context and will be removed soon. Use the secure iframe hooks above instead.
+
+##### Export EVM Private Key (Deprecated)
 
 ```tsx lines
 import { useExportEvmAccount, useEvmAddress } from "@coinbase/cdp-hooks";
@@ -1491,7 +1720,7 @@ function ExportEvmKey() {
 }
 ```
 
-#### Export Solana Private Key
+##### Export Solana Private Key (Deprecated)
 
 When your application is configured with `solana: { createOnLogin: true }`, you can export Solana private keys:
 

package/dist/esm/index.js

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

package/dist/esm/index10.js

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

package/dist/esm/index100.js

@@ -1,5 +1,11 @@
-const e = `Ethereum Signed Message:
-`;
+const e = {
+  gwei: 9,
+  wei: 18
+}, t = {
+  ether: -9,
+  wei: 9
+};
 export {
-  e as presignMessagePrefix
+  e as etherUnits,
+  t as gweiUnits
 };