@coinbase/cdp-react 0.0.97 → 0.0.99

package/dist/components/SendSolanaTransactionButton/index.d.ts

@@ -1,5 +1,17 @@
 import { APIError, SendSolanaTransactionOptions } from '@coinbase/cdp-hooks';
 import { ButtonProps } from '../ui/Button';
+/**
+ * The props for the SendSolanaTransactionButton component.
+ *
+ * @augments {Omit<ButtonProps, "onError">}
+ * @property {SendSolanaTransactionOptions["solanaAccount"]} account - The Solana account to send the transaction from.
+ * @property {SendSolanaTransactionOptions["network"]} network - The network to send the transaction on.
+ * @property {(error: APIError | Error) => void} [onError] - A function to call when the transaction errors.
+ * @property {(signature: string) => void} [onSuccess] - A function to call when the transaction is successful.
+ * @property {SendSolanaTransactionOptions["transaction"]} transaction - The base64 encoded transaction to send.
+ *
+ * @see {@link SendSolanaTransactionButton}
+ */
 export interface SendSolanaTransactionButtonProps extends Omit<ButtonProps, "onError"> {
     account: SendSolanaTransactionOptions["solanaAccount"];
     network: SendSolanaTransactionOptions["network"];
@@ -7,4 +19,19 @@ export interface SendSolanaTransactionButtonProps extends Omit<ButtonProps, "onE
     onSuccess?: (signature: string) => void;
     transaction: SendSolanaTransactionOptions["transaction"];
 }
+/**
+ * A button that signs and sends a Solana transaction.
+ *
+ * @param {SendSolanaTransactionButtonProps} props - The props for the SendSolanaTransactionButton component.
+ * @param {SendSolanaTransactionOptions["solanaAccount"]} props.account - The Solana account to send the transaction from.
+ * @param {SendSolanaTransactionOptions["network"]} props.network - The network to send the transaction on.
+ * @param {(error: APIError | Error) => void} [props.onError] - A function to call when the transaction errors.
+ * @param {(signature: string) => void} [props.onSuccess] - A function to call when the transaction is successful.
+ * @param {ReactNode} [props.pendingLabel] - The label to display when the transaction is pending.
+ * @param {SendSolanaTransactionOptions["transaction"]} props.transaction - The base64 encoded transaction to send.
+ * @param {ButtonVariant} [props.variant] - The variant of the button.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ */
 export declare const SendSolanaTransactionButton: ({ account, children, className, network, onClick, onError, onSuccess, pendingLabel, transaction, ...props }: SendSolanaTransactionButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/SignInAuthMethodButtons.d.ts

@@ -1,14 +1,40 @@
 import { ReactNode } from 'react';
 import { AuthMethod } from '../CDPReactProvider';
+/**
+ * The props for an AuthMethodButton.
+ *
+ * @see {@link SignInAuthMethodButtonProps}
+ */
 export interface SignInAuthMethodButtonProps {
+    /** The key of the auth method. */
     key: AuthMethod;
+    /** The label of the auth method. */
     label: string;
+    /** The aria label of the auth method. */
     ariaLabel?: string;
+    /** The icon of the auth method. */
     icon: ReactNode;
+    /** Whether the auth method is pending. */
     isPending?: boolean;
+    /** The function to call when the auth method is clicked. */
     onClick: () => void;
 }
+/**
+ * The props for the AuthMethodButtons component.
+ *
+ * @see {@link SignInAuthMethodButtons}
+ */
 export interface SignInAuthMethodButtonsProps {
+    /** The active auth method. */
     activeMethod?: AuthMethod;
 }
+/**
+ * The AuthMethodButtons component.
+ *
+ * @param {AuthMethodButtonProps} props - The props for the AuthMethodButtons component.
+ * @param {AuthMethod} [props.activeMethod] - The active auth method.
+ * @returns {JSX.Element} The AuthMethodButtons component.
+ *
+ * @group Components
+ */
 export declare const SignInAuthMethodButtons: ({ activeMethod }: SignInAuthMethodButtonsProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/SignIn/SignInBackButton.d.ts

@@ -1,9 +1,49 @@
 import { HTMLAttributes } from 'react';
 import { ButtonSize, ButtonVariant } from '../../theme/theme';
 import { SignInState } from './types';
+/**
+ * A button to go back to the previous step of the sign-in flow.
+ *
+ * @see {@link SignInBackButton}
+ */
 export interface SignInBackButtonProps extends HTMLAttributes<HTMLButtonElement> {
+    /** If set, will render the back button for this step of the sign in flow, regardless of the context value. */
     step?: SignInState["step"];
+    /** The size of the button. */
     size?: ButtonSize;
+    /** The variant of the button. */
     variant?: ButtonVariant;
 }
+/**
+ * A button to go back to the previous step of the sign-in flow.
+ *
+ * @param {SignInBackButtonProps} props - The props for the component.
+ * @param {SignInState["step"]} [props.step] - If set, will render the back button for this step of the sign in flow, regardless of the context value.
+ * @param {ButtonSize} [props.size] - The size of the button.
+ * @param {ButtonVariant} [props.variant] - The variant of the button.
+ * @returns {JSX.Element} The sign-in back button.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * function App() {
+ *   // Customize the back button icon and label
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignIn>
+ *         <SignInBackButton aria-label="go back">
+ *           <MyCustomIcon />
+ *         </SignInBackButton>
+ *         <SignInImage />
+ *         <SignInTitle />
+ *         <SignInDescription />
+ *         <SignInForm />
+ *         <SignInFooter />
+ *       </SignIn>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const SignInBackButton: ({ step: stepFromProps, children, onClick, size, variant, ["aria-label"]: ariaLabel, ...props }: SignInBackButtonProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/SignIn/SignInCredentials.d.ts

@@ -1,2 +1,15 @@
 import { HTMLAttributes } from 'react';
+/**
+ * A component that renders styled credentials for the sign in flow.
+ *
+ * @param {HTMLAttributes<HTMLSpanElement>} props - The props for the component.
+ * @param {ReactNode} props.children - The children of the component.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * Email: <SignInCredentials>name@example.com</SignInCredentials>
+ */
 export declare const SignInCredentials: ({ children, ...props }: HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/SignInDescription.d.ts

@@ -1,6 +1,41 @@
 import { ElementType, HTMLAttributes } from 'react';
 import { SignInTitleAndDescriptionProps } from './types';
+/**
+ * The props for the SignInDescription component.
+ *
+ * @see {@link SignInDescription}
+ */
 export interface SignInDescriptionProps extends SignInTitleAndDescriptionProps, HTMLAttributes<HTMLElement> {
+    /** The element type to render the description as. */
     as?: ElementType;
 }
+/**
+ * A description for the SignIn component.
+ *
+ * @param {SignInDescriptionProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * function App() {
+ *   // Render a custom description in the SignIn component
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignIn>
+ *         <SignInBackButton />
+ *         <SignInImage />
+ *         <SignInTitle />
+ *         <SignInDescription>
+ *           Custom Sign In Description
+ *         </SignInDescription>
+ *         <SignInForm />
+ *         <SignInFooter />
+ *       </SignIn>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const SignInDescription: ({ as: Component, authMethod: authMethodFromProps, children, className, step: stepFromProps, ...props }: SignInDescriptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/SignInFooter.d.ts

@@ -1,2 +1,29 @@
 import { HTMLAttributes } from 'react';
+/**
+ * A footer component for the sign-in flow.
+ *
+ * @param {HTMLAttributes<HTMLDivElement>} props - The props for the component.
+ * @returns {JSX.Element} The sign-in footer.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * function App() {
+ *   // Add class to the footer
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignIn>
+ *         <SignInBackButton />
+ *         <SignInImage />
+ *         <SignInTitle />
+ *         <SignInDescription />
+ *         <SignInForm />
+ *         <SignInFooter className="sign-in-footer" />
+ *       </SignIn>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const SignInFooter: (props: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/SignInForm.d.ts

@@ -1,15 +1,54 @@
 import { ElementType, HTMLAttributes, ReactNode } from 'react';
 import { AuthMethod } from '../CDPReactProvider';
 import { SignInState } from './types';
+/**
+ * Props for the SignInForm component.
+ *
+ * @see {@link SignInForm}
+ */
 export interface SignInFormProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** The element type to render the form as. */
     as?: ElementType;
+    /** If set, will auto focus the form when the component mounts and after transitions. */
     autoFocus?: boolean;
+    /** The function to call when the sign in is successful. */
     onSuccess?: () => void;
+    /** If set, will render the form for this step of the sign in flow, regardless of the context value. */
     step?: SignInState["step"];
+    /** The children of the component. */
     children?: (props: {
         step: SignInState["step"];
         authMethod: AuthMethod;
         Form: ReactNode;
     }) => ReactNode;
 }
+/**
+ * The form for the SignIn component.
+ *
+ * @param {SignInFormProps} props - The component props.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * function App() {
+ *   // Add div wrapper and class to the form
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignIn>
+ *         <SignInBackButton />
+ *         <SignInImage />
+ *         <SignInTitle />
+ *         <SignInDescription />
+ *         <div className="sign-in-form-wrapper">
+ *           <SignInForm className="sign-in-form" />
+ *         </div>
+ *         <SignInFooter />
+ *       </SignIn>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const SignInForm: ({ autoFocus, onSuccess, step: stepFromProps, children, ...props }: SignInFormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/SignInImage.d.ts

@@ -1,6 +1,44 @@
+/**
+ * Props for the SignInImage component.
+ *
+ * @see {@link SignInImage}
+ */
 export interface SignInImageProps {
+    /** The class name to apply to the component. */
     className?: string;
+    /** The alt text for the image. */
     alt?: string;
+    /** The source URL for the image. Uses the app logo by default. */
     src?: string;
 }
+/**
+ * A logo or success icon for the SignIn component.
+ *
+ * @param {SignInImageProps} props - The props for the component.
+ * @param {string} [props.className] - The class name to apply to the component.
+ * @param {string} [props.alt] - The alt text for the image.
+ * @param {string} [props.src] - The source URL for the image. Uses the app logo by default.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * function App() {
+ *   // Use a different image from your app logo in the SignIn component
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignIn>
+ *         <SignInBackButton />
+ *         <SignInImage src="https://example.com/image.png" alt="Example Image" />
+ *         <SignInTitle />
+ *         <SignInDescription />
+ *         <SignInForm />
+ *         <SignInFooter />
+ *       </SignIn>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const SignInImage: ({ className, alt, src }: SignInImageProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/SignIn/SignInProvider.d.ts

@@ -1,13 +1,67 @@
 import { Dispatch, ReactNode } from 'react';
 import { SignInAction, SignInState } from './types';
+/**
+ * Context for the SignIn component.
+ */
 export declare const SignInContext: import('react').Context<{
     state: SignInState;
     dispatch: Dispatch<SignInAction>;
 }>;
+/**
+ * A context for the SignIn component.
+ *
+ * @returns {SignInState} The current state of the SignIn component.
+ *
+ * @group Hooks
+ *
+ * @example
+ * ```tsx lines
+ * function EmailComponent() {
+ *   const { state } = useSignInContext();
+ *   return <div>Submitted email: {state.email}</div>;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignIn>
+ *         <SignInTitle />
+ *         <SignInDescription />
+ *         <EmailComponent />
+ *         <SignInForm />
+ *       </SignIn>
+ *     </CDPReactProvider>
+ *   );
+ */
 export declare const useSignInContext: () => {
     state: SignInState;
     dispatch: Dispatch<SignInAction>;
 };
+/**
+ * A provider for the SignInContext.
+ *
+ * @param {SignInProviderProps} props - The props for the SignInProvider component.
+ * @param {ReactNode} props.children - The children to render inside the provider.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * function App() {
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignInProvider>
+ *         <SignInImage />
+ *         <SignInTitle />
+ *         <SignInDescription />
+ *         <SignInForm />
+ *       </SignInProvider>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const SignInProvider: ({ children, authMethods: authMethodsFromProps, }: {
     children: ReactNode;
     authMethods?: SignInState["authMethods"];

package/dist/components/SignIn/SignInTitle.d.ts

@@ -1,6 +1,41 @@
 import { ElementType, HTMLAttributes } from 'react';
 import { SignInTitleAndDescriptionProps } from './types';
+/**
+ * The props for the SignInTitle component.
+ *
+ * @see {@link SignInTitle}
+ */
 export interface SignInTitleProps extends SignInTitleAndDescriptionProps, HTMLAttributes<HTMLElement> {
+    /** The element type to render the title as. */
     as?: ElementType;
 }
+/**
+ * A title for the SignIn component.
+ *
+ * @param {SignInTitleAndDescriptionProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * function App() {
+ *   // Render a custom title in the SignIn component
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignIn>
+ *         <SignInBackButton />
+ *         <SignInImage />
+ *         <SignInTitle>
+ *           Custom Sign In Title
+ *         </SignInTitle>
+ *         <SignInDescription />
+ *         <SignInForm />
+ *         <SignInFooter />
+ *       </SignIn>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const SignInTitle: ({ as: Component, children, className, authMethod: authMethodFromProps, step: stepFromProps, ...props }: SignInTitleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/flows/SignInWithEmail.d.ts

@@ -1,6 +1,32 @@
 import { SignInFlowProps, SignInTitleAndDescriptionProps, SignInFlowConfig } from '../types';
+/**
+ * The step of the email OTP flow.
+ */
 export type Step = "email" | "otp";
+/**
+ * A component that renders the sign in with email flow.
+ *
+ * @param {SignInFlowProps} props - The props for the sign in with email flow.
+ * @param {SignInFlowProps["children"]} [props.children] - A function to render the children. If provided, the function will be called with the current step of the flow and the form component.
+ * @param {SignInFlowProps["onSuccess"]} props.onSuccess - The callback to call when the sign in is successful.
+ * @param {SignInFlowProps["step"]} props.step - The step to render the flow for.
+ * @returns {JSX.Element} The SignInWithEmail component.
+ */
 export declare const SignInWithEmail: ({ step: stepFromProps, autoFocus, onSuccess, children, }: SignInFlowProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A component that renders the title for the sign in with email flow.
+ *
+ * @param {SignInTitleAndDescriptionProps} props - The props for the component.
+ * @param {Step} props.step - The step to render the component for.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const SignInWithEmailTitle: ({ step }: SignInTitleAndDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A component that renders the description for the sign in with email flow.
+ *
+ * @param {SignInTitleAndDescriptionProps} props - The props for the component.
+ * @param {Step} props.step - The step to render the component for.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const SignInWithEmailDescription: ({ step }: SignInTitleAndDescriptionProps) => import("react/jsx-runtime").JSX.Element;
 export declare const config: SignInFlowConfig;

package/dist/components/SignIn/flows/SignInWithOAuth.d.ts

@@ -1,5 +1,24 @@
 import { SignInFlowProps, SignInFlowConfig } from '../types';
+/**
+ * A component that renders the sign in with email flow.
+ *
+ * @param {SignInFlowProps} props - The props for the sign in with email flow.
+ * @param {SignInFlowProps["children"]} [props.children] - A function to render the children. If provided, the function will be called with the current step of the flow and the form component.
+ * @param {SignInFlowProps["onSuccess"]} props.onSuccess - The callback to call when the sign in is successful.
+ * @param {SignInFlowProps["step"]} props.step - The step to render the flow for.
+ * @returns {JSX.Element} The SignInWithEmail component.
+ */
 export declare const SignInWithOAuth: ({ step, children }: SignInFlowProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A component that renders the title for the sign in with email flow.
+ *
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const SignInWithOAuthTitle: () => string;
+/**
+ * A component that renders the description for the sign in with email flow.
+ *
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const SignInWithOAuthDescription: () => string;
 export declare const config: SignInFlowConfig;

package/dist/components/SignIn/flows/SignInWithSms.d.ts

@@ -1,8 +1,34 @@
 import { SignInFlowProps, SignInTitleAndDescriptionProps, SignInFlowConfig } from '../types';
 declare const STEPS: readonly ["phoneNumber", "otp"];
+/**
+ * The step of the phone number OTP flow.
+ */
 export type Step = (typeof STEPS)[number];
+/**
+ * A component that renders the sign in with email flow.
+ *
+ * @param {SignInFlowProps} props - The props for the sign in with email flow.
+ * @param {SignInFlowProps["children"]} [props.children] - A function to render the children. If provided, the function will be called with the current step of the flow and the form component.
+ * @param {SignInFlowProps["onSuccess"]} props.onSuccess - The callback to call when the sign in is successful.
+ * @param {SignInFlowProps["step"]} props.step - The step to render the flow for.
+ * @returns {JSX.Element} The FlowEmailOTP component.
+ */
 export declare const SignInWithSms: ({ step: stepFromProps, autoFocus, onSuccess, children, }: SignInFlowProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A component that renders the title for the sign in with email flow.
+ *
+ * @param {SignInTitleAndDescriptionProps} props - The props for the component.
+ * @param {Step} props.step - The step to render the component for.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const SignInWithSmsTitle: ({ step }: SignInTitleAndDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A component that renders the description for the sign in with email flow.
+ *
+ * @param {SignInTitleAndDescriptionProps} props - The props for the component.
+ * @param {Step} props.step - The step to render the component for.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const SignInWithSmsDescription: ({ step }: SignInTitleAndDescriptionProps) => import("react/jsx-runtime").JSX.Element;
 export declare const config: SignInFlowConfig;
 export {};

package/dist/components/SignIn/hooks/useEmailForm.d.ts

@@ -1,4 +1,11 @@
 import { APIError } from '@coinbase/cdp-hooks';
+/**
+ * A hook for the email form.
+ *
+ * @param {object} params - The params for the hook.
+ * @param {(email: string) => Promise<{ flowId: string }>} params.submit - The function to submit the email.
+ * @returns {object} A function to set the email and a function to submit the email.
+ */
 export declare const useEmailForm: ({ submit, }: {
     submit: (email: string) => Promise<{
         flowId: string;

package/dist/components/SignIn/hooks/useOTPForm.d.ts

@@ -1,4 +1,12 @@
 import { APIError } from '@coinbase/cdp-hooks';
+/**
+ * A hook for the OTP form.
+ *
+ * @param {object} params - The params for the hook.
+ * @param {number} params.passwordLength - The length of the password.
+ * @param {(otp: string) => Promise<T>} params.submit - The function to submit the OTP.
+ * @returns {object} A function to set the OTP and a function to submit the OTP.
+ */
 export declare const useOTPForm: <T>({ passwordLength, submit, }: {
     passwordLength: number;
     submit: (otp: string) => Promise<T>;

package/dist/components/SignIn/hooks/usePhoneNumberForm.d.ts

@@ -1,4 +1,11 @@
 import { APIError } from '@coinbase/cdp-hooks';
+/**
+ * A hook for the email form.
+ *
+ * @param {object} params - The params for the hook.
+ * @param {(email: string) => Promise<{ flowId: string }>} params.submit - The function to submit the email.
+ * @returns {object} A function to set the email and a function to submit the email.
+ */
 export declare const usePhoneNumberForm: ({ submit, }: {
     submit: (phoneNumber: string) => Promise<{
         flowId: string;

package/dist/components/SignIn/hooks/useSignInWithOAuth.d.ts

@@ -1,9 +1,17 @@
 import { OAuth2ProviderType, APIError } from '@coinbase/cdp-hooks';
 import { RefObject } from 'react';
+/**
+ * The return type of the useSignInWithOAuth hook.
+ */
 export type UseSignInWithOAuthReturnType = {
     error: string | APIError | null;
     isPending: boolean;
     oauthProvider: RefObject<OAuth2ProviderType | null>;
     signInWithOAuth: (providerType: OAuth2ProviderType) => Promise<void>;
 };
+/**
+ * A hook for the sign in with OAuth flow.
+ *
+ * @returns {UseSignInWithOAuthReturnType} A function to sign in with OAuth, the pending state, and the error state.
+ */
 export declare const useSignInWithOAuth: () => UseSignInWithOAuthReturnType;