@funkit/connect/dist/modals/CheckoutModal/stepTransition.d.ts

Funkit Connect SDK elevates DeFi apps via web2 sign-ins and one-click checkouts.

import { type ComponentType, type SetStateAction } from 'react';
import { type BridgeCustomerNext, type BridgeCustomerState } from '~/modals/CheckoutModal/VirtualFiatAccount/BridgeCustomer';
import { type BridgeKycNext, type BridgeKycState } from '~/modals/CheckoutModal/VirtualFiatAccount/BridgeKyc';
import { type ErrorScreenState } from '~/modals/CheckoutModal/VirtualFiatAccount/ErrorScreen';
import { type VirtualFiatAccountNext, type VirtualFiatAccountState } from '~/modals/CheckoutModal/VirtualFiatAccount/VirtualFiatAccount';
import type { FunkitActiveCheckoutItem } from '../../providers/FunkitCheckoutContext';
import { type FunkitTextCustomizationsConfig } from '../../providers/FunkitConfigContext';
import { type CheckoutCompleteNext, type CheckoutCompleteState } from './CheckoutComplete/CheckoutComplete';
import { type CheckoutHelpState } from './CheckoutHelp/CheckoutHelp';
import { type ConfirmationStepNext, type ConfirmationStepState } from './ConfirmationStep/ConfirmationStep';
import { type ConnectExchangeNext, type ConnectExchangeState } from './ConnectExchange';
import { type InputAmountNext, type InputAmountState } from './InputAmount/InputAmount';
import { type LoadingAccountNext, type LoadingAccountState } from './LoadingAccount';
import { type MeldCurrencySelectNext, type MeldCurrencySelectState } from './MeldCurrencySelect/MeldCurrencySelect';
import { type MeldQuotesNext, type MeldQuotesState } from './MeldQuotes/MeldQuotes';
import { type MeshVerificationNext, type MeshVerificationState } from './MeshVerification';
import { type MoonpaySetupNext, type MoonpaySetupState } from './MoonpaySetup';
import { type SelectAssetNext, type SelectAssetState } from './SelectAsset';
import { type SelectBrokerageNext, type SelectBrokerageState } from './SelectBrokerage';
import { type SourceChangeNext, type SourceChangeState } from './SourceChange/SourceChange';
import { type TransferTokenNext, type TransferTokenState } from './TransferToken/TransferToken';
import { type FiatAccountDetailNext, type FiatAccountDetailState } from './VirtualFiatAccount/FiatAccountDetail';
import { type KycIframeNext, type KycIframeState } from './VirtualFiatAccount/KycIframe';
export interface CheckoutModalCommonState {
    checkoutId: string;
    /** Handles soft hiding of the dialog (without removing it from the DOM) */
    isSoftHidden: boolean;
    /** Whether checkout should not be allowed to continue due to security reasons*/
    isBlocked?: boolean;
    targetChainId: string;
}
export interface ModalStepComponentProps<S extends FunCheckoutStep = FunCheckoutStep> {
    modalState: CheckoutModalState<S>;
    onBack(): void;
    onClose(): void;
    onAnimationComplete(callback: () => void): void;
    onNext(payload: NextPayload<S>): void;
    setModalState(state: SetStateAction<CheckoutModalState<S>>): void;
}
export declare function extractCommonState(state: CheckoutModalState): CheckoutModalCommonState;
export declare enum FunCheckoutStep {
    LOADING_ACCOUNT = "loading_account",
    INPUT_AMOUNT = "input_amount",
    SOURCE_CHANGE = "source_change",
    CONFIRMATION = "confirmation",
    MOONPAY_SETUP = "payment_setup",
    SELECT_BROKERAGE = "select_brokerage",
    CONNECT_EXCHANGE = "connect_exchange",
    SELECT_ASSET = "select_asset",
    MESH_VERIFICATION = "mesh_verification",
    CHECKOUT_COMPLETE = "checkout_complete",
    CHECKOUT_HELP = "checkout_help",
    TRANSFER_TOKEN = "transfer_token",
    CREATE_FIAT_ACCOUNT = "create_fiat_account",
    BRIDGE_CUSTOMER = "bridge_customer",
    BRIDGE_KYC = "bridge_kyc",
    KYC_IFRAME = "KYC_IFRAME",
    FIAT_ACCOUNT_DETAIL = "fiat_account_detail",
    ERROR_SCREEN = "error_screen",
    MELD_QUOTES = "meld_quotes",
    MELD_CURRENCY_SELECT = "meld_currency_select"
}
interface ModalStepInput<S extends FunCheckoutStep> {
    state: CheckoutModalState<S>;
    apiKey: string;
}
export type ModalStepInfo<S extends FunCheckoutStep> = {
    Component: ComponentType<ModalStepComponentProps<S>>;
    disableBack?: (info: ModalStepInput<S>) => boolean;
    /** Hides the close button in the Dialog Title element */
    hideClose?: boolean;
    onBack?(state: CheckoutModalState<S>, prevState: CheckoutModalState): CheckoutModalState;
    onNext(state: CheckoutModalState<S>, payload: NextPayload<S>): CheckoutModalState;
    showFullHeight?: boolean;
    /** Defaults to checkoutItem.initSettings.config.modalTitle (returning undefined uses default) */
    title?(textCustomizations: FunkitTextCustomizationsConfig): string | undefined;
    /** If title is not defined in config nor with the title() function, this is used instead. Defaults to 'Checkout' */
    fallbackTitle?: string;
};
export declare const CheckoutModalSteps: {
    [S in FunCheckoutStep]: ModalStepInfo<S>;
};
type CheckoutModalState<S extends FunCheckoutStep = FunCheckoutStep> = {
    [T in S]: {
        [FunCheckoutStep.CHECKOUT_COMPLETE]: CheckoutCompleteState;
        [FunCheckoutStep.CHECKOUT_HELP]: CheckoutHelpState;
        [FunCheckoutStep.CONFIRMATION]: ConfirmationStepState;
        [FunCheckoutStep.CONNECT_EXCHANGE]: ConnectExchangeState;
        [FunCheckoutStep.INPUT_AMOUNT]: InputAmountState;
        [FunCheckoutStep.LOADING_ACCOUNT]: LoadingAccountState;
        [FunCheckoutStep.MESH_VERIFICATION]: MeshVerificationState;
        [FunCheckoutStep.MOONPAY_SETUP]: MoonpaySetupState;
        [FunCheckoutStep.SELECT_ASSET]: SelectAssetState;
        [FunCheckoutStep.SELECT_BROKERAGE]: SelectBrokerageState;
        [FunCheckoutStep.SOURCE_CHANGE]: SourceChangeState;
        [FunCheckoutStep.TRANSFER_TOKEN]: TransferTokenState;
        [FunCheckoutStep.CREATE_FIAT_ACCOUNT]: VirtualFiatAccountState;
        [FunCheckoutStep.BRIDGE_KYC]: BridgeKycState;
        [FunCheckoutStep.KYC_IFRAME]: KycIframeState;
        [FunCheckoutStep.BRIDGE_CUSTOMER]: BridgeCustomerState;
        [FunCheckoutStep.FIAT_ACCOUNT_DETAIL]: FiatAccountDetailState;
        [FunCheckoutStep.ERROR_SCREEN]: ErrorScreenState;
        [FunCheckoutStep.MELD_QUOTES]: MeldQuotesState;
        [FunCheckoutStep.MELD_CURRENCY_SELECT]: MeldCurrencySelectState;
    }[T] & {
        step: T;
    };
}[S];
type NextPayload<S extends FunCheckoutStep = FunCheckoutStep> = {
    [FunCheckoutStep.CHECKOUT_HELP]: null;
    [FunCheckoutStep.CHECKOUT_COMPLETE]: CheckoutCompleteNext;
    [FunCheckoutStep.CONFIRMATION]: ConfirmationStepNext;
    [FunCheckoutStep.CONNECT_EXCHANGE]: ConnectExchangeNext;
    [FunCheckoutStep.INPUT_AMOUNT]: InputAmountNext;
    [FunCheckoutStep.LOADING_ACCOUNT]: LoadingAccountNext;
    [FunCheckoutStep.MESH_VERIFICATION]: MeshVerificationNext;
    [FunCheckoutStep.MOONPAY_SETUP]: MoonpaySetupNext;
    [FunCheckoutStep.SELECT_ASSET]: SelectAssetNext;
    [FunCheckoutStep.SELECT_BROKERAGE]: SelectBrokerageNext;
    [FunCheckoutStep.SOURCE_CHANGE]: SourceChangeNext;
    [FunCheckoutStep.TRANSFER_TOKEN]: TransferTokenNext;
    [FunCheckoutStep.CREATE_FIAT_ACCOUNT]: VirtualFiatAccountNext;
    [FunCheckoutStep.BRIDGE_KYC]: BridgeKycNext;
    [FunCheckoutStep.KYC_IFRAME]: KycIframeNext;
    [FunCheckoutStep.BRIDGE_CUSTOMER]: BridgeCustomerNext;
    [FunCheckoutStep.FIAT_ACCOUNT_DETAIL]: FiatAccountDetailNext;
    [FunCheckoutStep.ERROR_SCREEN]: null;
    [FunCheckoutStep.MELD_QUOTES]: MeldQuotesNext;
    [FunCheckoutStep.MELD_CURRENCY_SELECT]: MeldCurrencySelectNext;
}[S] & {
    /** Whether screen transition should change direction to simulate back transition. Only applies if there is a history entry in the stack*/
    reverseAnimation?: boolean;
    skipAnimation?: boolean;
    wipeHistory?: boolean;
    /** When set, finds the closest matching step in history and rolls back to it instead of creating a new history entry */
    navigateToHistoryStep?: boolean;
};
export declare function useCheckoutModalTransition(checkoutItem: FunkitActiveCheckoutItem, onClose: () => void): {
    animation: import("~/hooks/useAnimatedNavigation").AnimationState;
    modalState: CheckoutModalState<FunCheckoutStep>;
    onBack: () => void;
    onCloseWrapper: (options?: {
        isNewDeposit?: boolean;
    }) => void;
    onNext: (payload: NextPayload) => void;
    /** Only use as a last resort. Prefer next/back for proper navigation */
    onStepChange: (nextState: CheckoutModalState) => void;
    setModalState: import("react").Dispatch<SetStateAction<CheckoutModalState<FunCheckoutStep>>>;
    hasHistoryEntry: boolean;
};
export declare function useTitleConfig<S extends FunCheckoutStep>(checkoutItem: FunkitActiveCheckoutItem, state: CheckoutModalState<S>): {
    disableBack: boolean;
    hideClose: boolean;
    showFullHeight: boolean;
    title: string;
};
export {};