@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 { FunCheckoutStartingStep, type FunkitActiveCheckoutItem } from '../../providers/FunkitCheckoutContext';
import { type FunkitTextCustomizationsConfig } from '../../providers/FunkitConfigContext';
import { type BrokerageSuccessState } from './Brokerage/BrokerageSuccessModal';
import { type BrokerageTwoFANext, type BrokerageTwoFAState } from './Brokerage/BrokerageTwoFA';
import { type ConnectExchangeNext, type ConnectExchangeState } from './Brokerage/ConnectExchange';
import { type SelectBrokerageNext, type SelectBrokerageState } from './Brokerage/SelectBrokerage';
import { type CheckoutCompleteNext, type CheckoutCompleteState } from './CheckoutComplete/CheckoutComplete';
import { type CheckoutHelpState } from './CheckoutHelp/CheckoutHelp';
import { type ConfirmationStepNext, type ConfirmationStepState } from './ConfirmationStep/ConfirmationStep';
import { type DirectExecutionNotifCenterState } from './DirectExecutionNotifCenter/DirectExecutionNotifCenter';
import { FunCheckoutStep } from './FunCheckoutStep';
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 MeldRedirectNext, type MeldRedirectState } from './MeldRedirect/MeldRedirect';
import { type SelectAssetNext, type SelectAssetState } from './SelectAsset';
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 { FunCheckoutStep };
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;
    /** Whether checkout is started in a defi mode which has various flow implications (most importantly targetAssetAmount must be set and is not editable throughout the checkout)*/
    isDefiMode: boolean;
    startingStep: FunCheckoutStartingStep;
    targetChainId: string;
    showWalletOptions?: boolean;
    hideBottomDivider: boolean;
}
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;
interface ModalStepInput<S extends FunCheckoutStep> {
    state: CheckoutModalState<S>;
    apiKey: string;
    isDefiMode?: boolean;
    isSourceNavWidgetEnabled: boolean;
}
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?: (startingStep?: FunCheckoutStartingStep) => 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, isDefiMode: boolean): 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>;
};
export type CheckoutModalState<S extends FunCheckoutStep = FunCheckoutStep> = {
    [T in S]: {
        [FunCheckoutStep.CHECKOUT_COMPLETE]: CheckoutCompleteState;
        [FunCheckoutStep.CHECKOUT_HELP]: CheckoutHelpState;
        [FunCheckoutStep.CONFIRMATION]: ConfirmationStepState;
        [FunCheckoutStep.INPUT_AMOUNT]: InputAmountState;
        [FunCheckoutStep.LOADING_ACCOUNT]: LoadingAccountState;
        [FunCheckoutStep.SELECT_ASSET]: SelectAssetState;
        [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_REDIRECT]: MeldRedirectState;
        [FunCheckoutStep.MELD_CURRENCY_SELECT]: MeldCurrencySelectState;
        [FunCheckoutStep.DIRECT_EXECUTION_NOTIF_CENTER]: DirectExecutionNotifCenterState;
        [FunCheckoutStep.SELECT_BROKERAGE]: SelectBrokerageState;
        [FunCheckoutStep.CONNECT_EXCHANGE]: ConnectExchangeState;
        [FunCheckoutStep.BROKERAGE_TWO_FA]: BrokerageTwoFAState;
        [FunCheckoutStep.BROKERAGE_SUCCESS]: BrokerageSuccessState;
    }[T] & {
        step: T;
    };
}[S];
export type NextPayload<S extends FunCheckoutStep = FunCheckoutStep> = {
    [FunCheckoutStep.CHECKOUT_HELP]: null;
    [FunCheckoutStep.CHECKOUT_COMPLETE]: CheckoutCompleteNext;
    [FunCheckoutStep.CONFIRMATION]: ConfirmationStepNext;
    [FunCheckoutStep.INPUT_AMOUNT]: InputAmountNext;
    [FunCheckoutStep.LOADING_ACCOUNT]: LoadingAccountNext;
    [FunCheckoutStep.SELECT_ASSET]: SelectAssetNext;
    [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_REDIRECT]: MeldRedirectNext;
    [FunCheckoutStep.MELD_CURRENCY_SELECT]: MeldCurrencySelectNext;
    [FunCheckoutStep.DIRECT_EXECUTION_NOTIF_CENTER]: null;
    [FunCheckoutStep.SELECT_BROKERAGE]: SelectBrokerageNext;
    [FunCheckoutStep.CONNECT_EXCHANGE]: ConnectExchangeNext;
    [FunCheckoutStep.BROKERAGE_TWO_FA]: BrokerageTwoFANext;
    [FunCheckoutStep.BROKERAGE_SUCCESS]: null;
}[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;
    /** Whether the current step should be popped from the history stack, so it's skipped when going back */
    popCurrentStep?: 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;
};