@coinbase/cdp-react 0.0.98 → 0.0.100

package/dist/hooks/useVerifyMfaModal.d.ts

@@ -1,22 +1,100 @@
 import { ReactNode, RefObject } from 'react';
 import { VerifyMfaModalProps } from '../components/VerifyMfaModal';
+/**
+ * Options for the useVerifyMfaModal hook.
+ */
 export interface UseVerifyMfaModalOptions extends Pick<VerifyMfaModalProps, "onCancel" | "onError" | "onSuccess"> {
+    /**
+     * The delay in milliseconds before the modal is closed after successful verification.
+     * If `null`, the modal will not close automatically after success.
+     * If `0`, the modal closes immediately.
+     * Defaults to 500ms.
+     *
+     * @default 500
+     */
     closeOnSuccessDelay?: number | null;
 }
+/**
+ * Return value of the useVerifyMfaModal hook.
+ */
 export interface UseVerifyMfaModalReturn {
+    /** Opens the MFA verification modal. Returns true if opened, false if a modal is already open. */
     open: () => boolean;
+    /** Closes the MFA verification modal */
     close: () => void;
 }
 interface VerifyMfaModalContextValue {
+    /** Registers a modal instance with its options ref */
     register: (id: string, optionsRef: RefObject<UseVerifyMfaModalOptions>) => void;
+    /** Unregisters a modal instance */
     unregister: (id: string) => void;
+    /** Opens the modal for a specific instance. Returns true if opened, false if already open. */
     open: (id: string) => boolean;
+    /** Closes the currently open modal */
     close: () => void;
 }
 interface MfaVerificationProviderProps {
     children: ReactNode;
 }
+/**
+ * Provider component that manages MFA verification UI coordination.
+ *
+ * This provider:
+ * - Enables the `useVerifyMfaModal` hook for programmatic modal control
+ * - Registers a global MFA handler that respects the `mfa.disableAutoPrompt` config
+ * - Supports multiple CDPReactProvider instances on the same page
+ *
+ * This is automatically included in `CDPReactProvider`.
+ *
+ * @param {MfaVerificationProviderProps} props - The props for the MfaVerificationProvider component.
+ * @param {ReactNode} props.children - The children of the MfaVerificationProvider component.
+ * @returns {JSX.Element} The MfaVerificationProvider component.
+ * @internal
+ */
 export declare const VerifyMfaModalProvider: ({ children }: MfaVerificationProviderProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to imperatively control the MFA verification modal.
+ *
+ * This hook allows you to open and close the MFA verification modal programmatically,
+ * which is useful for integrating MFA verification into complex flows without using
+ * the `<VerifyMfaModal />` component pattern.
+ *
+ * @param {UseVerifyMfaModalOptions} options - The options for the hook including callbacks.
+ * @returns {UseVerifyMfaModalReturn} An object containing `open` and `close` functions.
+ *
+ * @group Hooks
+ *
+ * @example
+ * ```tsx lines
+ * function ProtectedAction() {
+ *   const { open } = useVerifyMfaModal({
+ *     onSuccess: () => performSensitiveAction(),
+ *     onError: (error) => console.error("MFA verification failed:", error),
+ *     onCancel: () => console.log("MFA verification cancelled"),
+ *   });
+ *
+ *   const handleClick = () => {
+ *     const opened = open(); // Returns false if modal is already open
+ *     if (!opened) {
+ *       console.log("MFA modal is already open");
+ *     }
+ *   };
+ *
+ *   return (
+ *     <button onClick={handleClick}>
+ *       Perform sensitive action
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
 export declare const useVerifyMfaModal: (options?: UseVerifyMfaModalOptions) => UseVerifyMfaModalReturn;
+/**
+ * Hook to access the MFA verification context for coordination.
+ * Used internally by MfaFlow to coordinate with the global modal.
+ *
+ * @returns The MFA verification context value with default values if not in a provider.
+ * @internal
+ */
 export declare const useMfaVerification: () => VerifyMfaModalContextValue;
 export {};

package/dist/icons/IconAppleLogo.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Apple logo icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The Apple logo icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx
+ * // Icon is correctly hidden from screen readers
+ * <p>
+ *   <IconAppleLogo />
+ *   Apple
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconAppleLogo aria-label="Apple" />
+ * </p>
+ * ```
+ */
 export declare const IconAppleLogo: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconArrowLeft.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Arrow Left icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The Arrow Left icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Icon is correctly hidden from screen readers
+ * <p>
+ *   <IconArrowLeft />
+ *   Back
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconArrowLeft aria-label="Back" />
+ * </p>
+ * ```
+ */
 export declare const IconArrowLeft: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconArrowsUpDown.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Arrows Up/Down icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The Arrow Left icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Icon is correctly hidden from screen readers
+ * <p>
+ *   <IconArrowsUpDown />
+ *   Swap
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconArrowsUpDown aria-label="Swap" />
+ * </p>
+ * ```
+ */
 export declare const IconArrowsUpDown: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconCheck.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Check Circle icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The Check Circle icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Icon is correctly from screen readers
+ * <p>
+ *   <IconCheck />
+ *   Success!
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconCheck aria-label="Success" />
+ * </p>
+ * ```
+ */
 export declare const IconCheck: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconCheckCircle.d.ts

@@ -1,2 +1,23 @@
 import { SVGProps } from 'react';
+/**
+ * Check Circle icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The Check Circle icon.
+ *
+ * @group Components
+ * @example
+ * ```tsx lines
+ * // Icon is correctly from screen readers
+ * <p>
+ *   <IconCheckCircle />
+ *   Success!
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconCheckCircle aria-label="Success" />
+ * </p>
+ * ```
+ */
 export declare const IconCheckCircle: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconChevronDown.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Chevron down icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The chevron down icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Icon is correctly hidden from screen readers
+ * <p>
+ *   <IconChevronDown />
+ *   Expand
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconChevronDown aria-label="Expand" />
+ * </p>
+ * ```
+ */
 export declare const IconChevronDown: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconCoinbaseMark.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Coinbase mark icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The Coinbase mark icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx
+ * // Icon is correctly hidden from screen readers
+ * <p>
+ *   <IconCoinbaseMark />
+ *   Coinbase
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconCoinbaseMark aria-label="Coinbase" />
+ * </p>
+ * ```
+ */
 export declare const IconCoinbaseMark: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconCoinbaseWordmark.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Coinbase Wordmark icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The Coinbase Wordmark icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Icon is correctly from screen readers
+ * <p>
+ *   <IconCoinbaseWordmark />
+ *   Coinbase
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconCoinbaseWordmark aria-label="Coinbase" />
+ * </p>
+ * ```
+ */
 export declare const IconCoinbaseWordmark: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconCopy.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Copy icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The copy icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx
+ * // Icon is correctly hidden from screen readers
+ * <button type="button" onClick={handleClick}>
+ *   <IconCopy />
+ *   Copy address
+ * </button>
+ *
+ * // Icon with screen-reader accessible label only
+ * <button type="button" onClick={handleClick}>
+ *   <IconCopy aria-label="Copy address" />
+ * </button>
+ * ```
+ */
 export declare const IconCopy: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconCreditCard.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Credit card icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The credit card icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx
+ * // Icon is correctly hidden from screen readers
+ * <p>
+ *   <IconCreditCard />
+ *   Pay with Debit Card
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconCreditCard aria-label="Pay with Debit Card" />
+ * </p>
+ * ```
+ */
 export declare const IconCreditCard: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconCurrencies.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Currencies icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The currencies icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx
+ * // Icon is correctly hidden from screen readers
+ * <p>
+ *   <IconCurrencies />
+ *   Waiting for payment
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconCurrencies aria-label="Waiting for payment" />
+ * </p>
+ * ```
+ */
 export declare const IconCurrencies: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconEnvelope.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Envelope icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The Envelope icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Icon is correctly from screen readers
+ * <p>
+ *   <IconEnvelope />
+ *   Email me a code
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconEnvelope aria-label="Email me a code" />
+ * </p>
+ * ```
+ */
 export declare const IconEnvelope: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconExclamationCircle.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Exclamation Circle icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The Exclamation Circle icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Icon is correctly from screen readers
+ * <p>
+ *   <IconExclamationCircle />
+ *   Warning!
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconExclamationCircle aria-label="Warning" />
+ * </p>
+ * ```
+ */
 export declare const IconExclamationCircle: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconExclamationTriangle.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Exclamation Triangle icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The Exclamation Triangle icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Icon is correctly hidden from screen readers
+ * <p>
+ *   <IconExclamationTriangle />
+ *   Warning!
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconExclamationTriangle aria-label="Warning" />
+ * </p>
+ * ```
+ */
 export declare const IconExclamationTriangle: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconGoogleColorLogo.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Colored Google logo icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The Google logo icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Icon is correctly hidden from screen readers
+ * <p>
+ *   <IconGoogleColorLogo />
+ *   Google
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconGoogleColorLogo aria-label="Google" />
+ * </p>
+ * ```
+ */
 export declare const IconGoogleColorLogo: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconGoogleLogo.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Google logo icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The Google logo icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Icon is correctly hidden from screen readers
+ * <p>
+ *   <IconGoogleLogo />
+ *   Google
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconGoogleLogo aria-label="Google" />
+ * </p>
+ * ```
+ */
 export declare const IconGoogleLogo: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconLock.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Lock icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The Lock icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Icon is correctly from screen readers
+ * <p>
+ *   <IconLock />
+ *   Locked
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconLock aria-label="locked" />
+ * </p>
+ * ```
+ */
 export declare const IconLock: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconMinus.d.ts

@@ -1,2 +1,23 @@
 import { SVGProps } from 'react';
+/**
+ * Minus icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The Minus icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Icon is correctly from screen readers
+ * <p>
+ *   <IconMinus />
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconMinus aria-label="Minus" />
+ * </p>
+ * ```
+ */
 export declare const IconMinus: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconPhone.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Phone icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The chat bubble icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Icon is correctly from screen readers
+ * <p>
+ *   <IconPhone />
+ *   Text me a code
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconPhone aria-label="Text me a code" />
+ * </p>
+ * ```
+ */
 export declare const IconPhone: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconPinCode.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Pin code icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The chat bubble icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Icon is correctly from screen readers
+ * <p>
+ *   <IconPinCode />
+ *   Enter code from your authenticator app
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconPinCode aria-label="Enter code from your authenticator app" />
+ * </p>
+ * ```
+ */
 export declare const IconPinCode: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconPlus.d.ts

@@ -1,2 +1,23 @@
 import { SVGProps } from 'react';
+/**
+ * Plus icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The Plus icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Icon is correctly from screen readers
+ * <p>
+ *   <IconPlus />
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconPlus aria-label="Plus" />
+ * </p>
+ * ```
+ */
 export declare const IconPlus: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconShield.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Shield icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The chat bubble icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Icon is correctly from screen readers
+ * <p>
+ *   <IconShield />
+ *   Secure your account
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconShield aria-label="Secure your account" />
+ * </p>
+ * ```
+ */
 export declare const IconShield: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconSmartPhone.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Smart phone icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The chat bubble icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Icon is correctly from screen readers
+ * <p>
+ *   <IconSmartPhone />
+ *   Enter code from your authenticator app
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconSmartPhone aria-label="Enter code from your authenticator app" />
+ * </p>
+ * ```
+ */
 export declare const IconSmartPhone: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;