@funkit/connect
Version:
Funkit Connect SDK elevates DeFi apps via web2 sign-ins and one-click checkouts.
191 lines (190 loc) • 11.2 kB
TypeScript
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 DynamicTargetAssetCandidate, FunCheckoutStartingStep, type FunkitActiveCheckoutItem } from '../../providers/FunkitCheckoutContext';
import { type FunkitTextCustomizationsConfig } from '../../providers/FunkitConfigContext';
import { type PerpsTransferNext, type PerpsTransferState } from '../PolymarketPerpsTransfer/PerpsTransferStep';
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 ConfirmationStepNext, type ConfirmationStepState } from './ConfirmationStep/ConfirmationStep';
import { FunCheckoutStep } from './FunCheckoutStep';
import { type InputAmountNext, type InputAmountState } from './InputAmount/InputAmount';
import { type LightningInvoiceNext, type LightningInvoiceState } from './LightningInvoice/LightningInvoice';
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/SelectAsset';
import { type SourceChangeNext, type SourceChangeState } from './SourceChange/SourceChange';
import { type SwappedIframeNext, type SwappedIframeState } from './SwappedIframe';
import { type TransferTokenNext, type TransferTokenState } from './TransferToken/TransferToken';
import { type FiatAccountDetailNext, type FiatAccountDetailState } from './VirtualFiatAccount/FiatAccountDetail';
import { type KycIframeNext, type KycIframeState } from './VirtualFiatAccount/KycIframe';
import { type WithdrawalCompleteNext, type WithdrawalCompleteState } from './Withdrawal/WithdrawalComplete';
import { type WithdrawalEnterAmountNext, type WithdrawalEnterAmountState } from './Withdrawal/WithdrawalEnterAmount';
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;
startingStep: FunCheckoutStartingStep;
targetChainId: string;
showWalletOptions?: boolean;
hideBottomDivider: boolean;
}
export interface ModalStepComponentProps<S extends FunCheckoutStep = FunCheckoutStep> {
modalState: CheckoutModalState<S>;
onBack(): void;
onClose(options?: {
isNewDeposit?: boolean;
}): void;
onAnimationComplete(callback: () => void): void;
onNext(payload: NextPayload<S>): void;
/** Navigate directly to an arbitrary step state (animates + pushes history). */
onStepChange(state: CheckoutModalState): void;
setModalState(state: SetStateAction<CheckoutModalState<S>>): void;
}
/**
* Props passed to a `sourceChangeScreen.customTopComponent` so it can navigate
* the checkout modal (e.g. jump to a different step).
*/
export interface SourceChangeTopComponentProps {
onStepChange: (state: CheckoutModalState) => void;
modalState: CheckoutModalState;
/**
* The active checkout's routing id. Passed in (rather than read via
* `useCheckoutContext`) because a custom top component may be bundled
* separately from `@funkit/connect` (e.g. `@funkit/connect/clients/*`), where
* the checkout context is a different instance and would read as empty.
*/
dynamicRoutingId?: string;
/**
* Apply a destination candidate (target token + routing id + optional
* recipient) in one atomic update — the same selection path the
* SourceChange target-asset dropdown uses.
*/
applyDynamicTargetAssetCandidate: (candidate: DynamicTargetAssetCandidate) => void;
}
export declare function extractCommonState(state: CheckoutModalState): CheckoutModalCommonState;
interface ModalStepInput<S extends FunCheckoutStep> {
state: CheckoutModalState<S>;
apiKey: string;
isSourceNavWidgetEnabled: boolean;
}
export type ModalStepInfo<S extends FunCheckoutStep> = {
Component: ComponentType<ModalStepComponentProps<S>>;
disableBack?: (info: ModalStepInput<S>) => boolean;
/** Hides the bottom section (portal target for bottom bar content) */
hideBottomSection?: (state: CheckoutModalState<S>) => boolean;
/** Hides the close button in the Dialog Title element */
hideClose?: (startingStep?: FunCheckoutStartingStep) => boolean;
/** Hides the entire topbar including back button, close button, and title */
hideTopbar?: (state: CheckoutModalState<S>) => 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, state: CheckoutModalState<S>): 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: {
[]: ModalStepInfo<S>;
};
export type CheckoutModalState<S extends FunCheckoutStep = FunCheckoutStep> = {
[]: {
[]: CheckoutCompleteState;
[]: ConfirmationStepState;
[]: InputAmountState;
[]: LoadingAccountState;
[]: SelectAssetState;
[]: SourceChangeState;
[]: TransferTokenState;
[]: LightningInvoiceState;
[]: VirtualFiatAccountState;
[]: BridgeKycState;
[]: KycIframeState;
[]: BridgeCustomerState;
[]: FiatAccountDetailState;
[]: ErrorScreenState;
[]: MeldQuotesState;
[]: MeldRedirectState;
[]: MeldCurrencySelectState;
[]: SelectBrokerageState;
[]: ConnectExchangeState;
[]: BrokerageTwoFAState;
[]: BrokerageSuccessState;
[]: SwappedIframeState;
[]: PerpsTransferState;
[]: WithdrawalEnterAmountState;
[]: WithdrawalCompleteState;
}[T] & {
step: T;
previousStep?: FunCheckoutStep | null;
};
}[S];
export type NextPayload<S extends FunCheckoutStep = FunCheckoutStep> = {
[]: CheckoutCompleteNext;
[]: ConfirmationStepNext;
[]: InputAmountNext;
[]: LoadingAccountNext;
[]: SelectAssetNext;
[]: SourceChangeNext;
[]: TransferTokenNext;
[]: LightningInvoiceNext;
[]: VirtualFiatAccountNext;
[]: BridgeKycNext;
[]: KycIframeNext;
[]: BridgeCustomerNext;
[]: FiatAccountDetailNext;
[]: null;
[]: MeldQuotesNext;
[]: MeldRedirectNext;
[]: MeldCurrencySelectNext;
[]: SelectBrokerageNext;
[]: ConnectExchangeNext;
[]: BrokerageTwoFANext;
[]: null;
[]: SwappedIframeNext;
[]: PerpsTransferNext;
[]: WithdrawalEnterAmountNext;
[]: WithdrawalCompleteNext;
}[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;
isStepReady: boolean;
};
export declare function useTitleConfig<S extends FunCheckoutStep>(checkoutItem: FunkitActiveCheckoutItem, state: CheckoutModalState<S>): {
disableBack: boolean;
hideBottomSection: boolean;
hideClose: boolean;
hideTopbar: boolean;
showFullHeight: boolean;
title: string;
};