@funkit/connect

import { type ComponentType, type JSX, type ReactNode } from 'react'; import type { BluvoExchangeType } from '../consts/bluvo'; import type { PaymentMethod } from '../domains/paymentMethods'; import type { SourceChangeTopComponentProps } from '../modals/CheckoutModal/stepTransition'; export interface FunkitTextCustomizationsConfig { virtualFiat: string; brokerageOrExchange: string; debitOrCredit: string; accountBalance: string; selectAccount: string; sourceChangeTitle?: string; perpsTransferTitle: string; sourceMethodTitle: string; tokensListTitle: string; transferTokens: string; bitcoinLightning: string; cashAppLightning: string; receiveDropdownTitle: string; receiveDropdownLabel: string; txStatus?: { failed?: { description?: string; title?: string; }; delayed?: { description?: string; title?: string; }; depositPending?: { description?: string; title?: string; }; depositSucceeded?: { description?: string; title?: string; }; submitting?: { description?: string; title?: string; }; waitingForExchange?: { description?: string; title?: string; }; withdrawalPending?: { description?: string; title?: string; }; withdrawalSucceeded?: { description?: string; title?: string; }; }; confirmationScreen: { payAmountLabel: string; receiveAmountLabel: string; sourceLabel?: string; }; paymentMethodSubtitles: { accountBalance?: string; brokerageOrExchange?: string; debitOrCredit?: string; paypal?: string; transferTokens?: string; bitcoinLightning?: string; cashAppLightning?: string; virtualFiat?: string; }; } export interface FunkitUiDestinationConfig { /** What icon (15x15) to show in the `destination` row - defaults to user wallet icon */ icon?: ReactNode; /** What text to show in the `destination` row - defaults to formatted destination wallet address */ text?: string; /** Which url to redirect to. If not specified, defaults to the block explorer of the recipientAddr of the checkout*/ url?: string; } export interface FunkitUiSelectedRouteConfig { /** Image URL for passthrough routes (required) */ passthroughImage: string; /** Label for passthrough routes - defaults to "Native Bridge" */ passthroughLabel?: string; } export type FunkitPaymentMethodIconsConfig = Partial<Record<PaymentMethod, { src: string; size?: { width: number; height: number; }; }>>; export interface FunkitUiCustomizationsConfig { /** Title alignment - defaults to "center" */ alignTitle?: 'left' | 'center'; /** Always shows checkout modal top divider even if content cannot scroll - defaults to `false` */ alwaysShowTopDivider?: boolean; /** Whether to show modal title in topbars - defaults to true */ showModalTitle?: boolean; /** Whether to show CTA in uppercase - defaults to false */ callToActionsUppercase?: boolean; /** Whether to enable compact list style for option boxes - defaults to false */ enableCompactList?: boolean; checkoutHistory?: { /** Whether to show the bottom "Get help" text in a {@link FunAlert} - defaults to true */ showGetHelpAsAlert?: boolean; /** Show a simplified UI with less rows and no "More details" section - defaults to false */ simplifiedUi?: boolean; }; confirmationScreen?: { /** Custom destination icon and text used in checkout summary */ destinationConfig?: FunkitUiDestinationConfig; /** when source and destination are the same address, show destination as payment method instead of source - defaults to false */ preferDestinationWhenSame?: boolean; /** Whether to show the bottom disclaimer in a {@link FunAlert} - defaults to true */ showDisclaimerAsAlert?: boolean; /** Whether to show the total payment amount in USD below the token amount equivalent - defaults to false */ showPaymentAmountUsd?: boolean; /** Whether to show the total receive amount in USD below the token amount equivalent - defaults to false */ showReceiveAmountUsd?: boolean; /** Whether to show the amount summary above the payment method summary rather than below - defaults to false */ showAmountSummaryAbovePaymentMethod?: boolean; /** * Whether and how to show transaction fee's digest. * - "none": show nothing (default) * - "chainDependent": show price impact and additionally show gas as well for eth-mainnet */ showTransactionDigest?: 'none' | 'chainDependent'; /** Whether to show the amount of tokens below the USD equivalent - defaults to true */ showTokenAmount?: boolean; /** Instead of showing the dollar value centered, show it left-aligned with "Deposit" label - defaults to false */ showLeftAlignedDollarValueWithLabel?: boolean; /** Whether to show "Instant" instead of "< 1 min" for time estimates under 1 minute - defaults to false */ showInstantTimeEstimate?: boolean; /** * Whether to show the "Selected Route" row (Relay / Across / passthrough). * Defaults to false. Providing {@link selectedRouteConfig} also shows the * row, for passthrough-branding back-compat. */ showSelectedRoute?: boolean; /** * Passthrough-route branding (image + label) for the "Selected Route" row. * Defining it also shows the row; to show the row without passthrough * branding, use {@link showSelectedRoute} instead. */ selectedRouteConfig?: FunkitUiSelectedRouteConfig; /** * How to indicate the current step during transaction progress. * - "spinner": show the animated spinner (default) * - "textual": show a textual "1 of 2" step indicator instead */ stepIndicatorType?: 'spinner' | 'textual'; }; inputAmountScreen?: { /** Whether to allow entering an amount of tokens, rather than only USD - defaults to true */ allowTokenAmountInput?: boolean; }; selectAssetScreen?: { /** Whether the secondary token symbol is visible - defaults to true */ isSecondaryTokenSymbolVisible?: boolean; /** Whether to navigate directly on asset click, rather than having to select then click Continue - defaults to false */ navigateOnAssetClick?: boolean; /** Function that returns a custom React component to render before other UIs in the select asset screen */ customTopComponent?: () => ReactNode; }; transferCryptoScreen?: { /** Whether to show the "You Send -> You Receive" block in the transfer crypto screen - defaults to false */ showYouSendYouReceive?: boolean; /** Function that returns a custom React component to render before other UIs in the transfer crypto screen */ customTopComponent?: () => ReactNode; }; withdrawalScreen?: { /** Function that returns a custom React component to render before other UIs in the withdrawal amount screen */ customTopComponent?: () => ReactNode; }; selectBrokerageScreen?: { /** Function that returns a custom React component to render before other UIs in the select brokerage screen */ customTopComponent?: () => ReactNode; }; connectExchangeScreen?: { /** Function that returns a custom React component to render before other UIs in the connect exchange screen */ customTopComponent?: () => ReactNode; /** Function that returns a custom React component to render instead of the normal page */ CustomComponent?: ComponentType<{ appName: string; exchangeIcon: JSX.Element | null; exchangeName: string; exchangeType: BluvoExchangeType | null; }>; }; sourceChangeScreen?: { bottomBarCloseButton?: { /** Whether the bottom bar close button is visible - defaults to false */ enabled?: boolean; /** Translation key for label - defaults to `'common.close'` */ labelKey?: 'sourceChange.exploreMarketsFirst' | 'common.close'; }; /** Whether to show target asset selection menu if dynamicTargetAssetCandidates exist - defaults to false */ showTargetAssetSelection?: boolean; /** Whether to show wallet option when balance is insufficient - defaults to false (hides wallet) */ showWalletOnInsufficientBalance?: boolean; /** Whether to show the wallet connect payment option - defaults to true */ showWalletConnect?: boolean; /** * Renders custom content before other UIs in the source change screen. * Receives modal navigation handles so it can jump to another step (e.g. * open a transfer step). Existing zero-arg components remain valid. */ customTopComponent?: (props?: SourceChangeTopComponentProps) => ReactNode; /** * Render a full-width divider beneath {@link customTopComponent} (matching * the target-asset selector divider). Defaults to false. */ showCustomTopComponentDivider?: boolean; paymentMethodIcons?: { primary?: FunkitPaymentMethodIconsConfig; /** Custom secondary icon or "value icon" in the context of FunPaymentMethodItem */ secondary?: FunkitPaymentMethodIconsConfig; }; }; customIcons?: { paymentDestination?: ComponentType; paymentSource?: ComponentType; timeEstimate?: ComponentType; youReceive?: ComponentType; youSend?: ComponentType; fiatTabIcon?: ComponentType<{ size?: number; }>; cryptoTabIcon?: ComponentType<{ size?: number; }>; }; /** Font family names to pass to embedded widgets */ customFontFamily?: { primary?: string; secondary?: string; tertiary?: string; }; } /** * Makes all properties of T required except for custom components which remains optional. * Used for internal screen configs where we want defaults for all settings but allow * custom slot components to be optionally provided. */ type RequiredExceptCustomComponents<T> = Required<Omit<T & {}, `${string}Component`>>; export type FunkitUiCustomizationsConfigInternal = Required<FunkitUiCustomizationsConfig> & { confirmationScreen: FunkitUiCustomizationsConfig['confirmationScreen'] & Required<Omit<FunkitUiCustomizationsConfig['confirmationScreen'] & {}, 'destinationConfig' | 'selectedRouteConfig'>>; inputAmountScreen: Required<FunkitUiCustomizationsConfig['inputAmountScreen'] & {}>; selectAssetScreen: RequiredExceptCustomComponents<FunkitUiCustomizationsConfig['selectAssetScreen']>; transferCryptoScreen: RequiredExceptCustomComponents<FunkitUiCustomizationsConfig['transferCryptoScreen']>; withdrawalScreen: RequiredExceptCustomComponents<FunkitUiCustomizationsConfig['withdrawalScreen']>; selectBrokerageScreen: RequiredExceptCustomComponents<FunkitUiCustomizationsConfig['selectBrokerageScreen']>; connectExchangeScreen: RequiredExceptCustomComponents<FunkitUiCustomizationsConfig['connectExchangeScreen']>; sourceChangeScreen: RequiredExceptCustomComponents<FunkitUiCustomizationsConfig['sourceChangeScreen']> & { bottomBarCloseButton: Required<Required<FunkitUiCustomizationsConfig['sourceChangeScreen'] & {}>['bottomBarCloseButton']>; }; }; export type FunkitConfig = { /** Funkit api key **/ apiKey: string; /** App name **/ appName: string; /** Text customizations across all widgets **/ textCustomizations?: Partial<FunkitTextCustomizationsConfig>; /** UI customizations across all widgets **/ uiCustomizations?: FunkitUiCustomizationsConfig; /** used to link funkit users to your own user system */ externalUserId?: string; /** Email prefilled into the Swapped fiat onramp/offramp iframe. Set once at provider init. */ prefillFiatEmail?: string; /** Disable Datadog logging - defaults to false (logging enabled) */ disableLogging?: boolean; }; interface FinalFunkitConfigInternal extends FunkitConfig { textCustomizations: FunkitTextCustomizationsConfig; uiCustomizations: FunkitUiCustomizationsConfigInternal; } export declare const FunkitConfigContext: import("react").Context<FunkitConfig>; export declare function useFunkitConfig(): FinalFunkitConfigInternal; export {};