@funkit/connect
Version:
Funkit Connect SDK elevates DeFi apps via web2 sign-ins and one-click checkouts.
109 lines (108 loc) • 5.15 kB
TypeScript
import { type SwappedFormOfPayment } from '@funkit/api-base';
import React, { type ReactNode } from 'react';
import { type FunkitPaymentMethodIconsConfig } from '../../providers/FunkitConfigContext';
import { PaymentMethod, type PaymentMethodBrokerageInfo, type PaymentMethodVirtualBankInfo } from '../../domains/paymentMethods';
import type { AssetHoldingsItem } from '../../domains/wallet';
/**
* Get a custom icon passed in from UI customization config
* These icons are passed in from client to support enhanced branding+design
* Called "value icon" in the context of FunPaymentMethodItem
*/
export declare function getIconFromUiConfig(paymentMethod: PaymentMethod, iconConfig: FunkitPaymentMethodIconsConfig | undefined, defaultIconSize?: number): ReactNode | undefined;
export declare const getDynamicValueIconComponent: () => React.JSX.Element;
/**
* Statsig's `connectwalletchainiconorder` only carries the chains we want to
* lead with (e.g. by TVL/usage) — anything else checkout-supports still needs
* to render after them rather than being silently dropped.
*/
export declare function resolveConnectWalletChainOrder(configuredOrder: readonly (string | number)[]): string[];
export declare function SupportedChainList({ chainIdList, iconSize, style, }: {
chainIdList: string[];
iconSize?: number;
style?: React.CSSProperties;
}): React.JSX.Element;
export declare function PaymentMethodIcon({ paymentIcon, keyIconSize, }: {
paymentIcon: ReactNode;
keyIconSize: number;
}): React.JSX.Element;
interface ConnectedBluvoPaymentMethodItemProps extends ConnectedPaymentMethodItemProps {
paymentMethodInfo: PaymentMethodBrokerageInfo;
onBrokerageError?: () => void;
disabled?: boolean;
}
/**
* Note: This is different from `BrokeragePaymentMethodItem`, which is used as a
* button to initiate connecting a new brokerage account.
* This is for connected Bluvo brokerage like coinbase etc.
*/
export declare const ConnectedBluvoPaymentMethodItem: ({ paymentMethodInfo, isSelected, onSelect, onBrokerageError, showSelectedCheckmark, disabled, }: ConnectedBluvoPaymentMethodItemProps) => React.JSX.Element;
interface ConnectedPaymentMethodItemProps {
isSelected: boolean;
showSelectedCheckmark?: boolean;
onSelect: () => void;
targetChainId: string;
testId?: string;
disabled?: boolean;
}
export declare const AccountBalancePaymentMethodItem: ({ isSelected, showSelectedCheckmark, onSelect, targetChainId, testId, disabled, }: ConnectedPaymentMethodItemProps) => React.JSX.Element;
export declare const BitcoinLightningPaymentMethodItem: ({ isActive, onClick, isClickable, customValueIcon, paymentIcon, isCashApp, }: PaymentMethodItemProps & {
isCashApp?: boolean;
}) => React.JSX.Element;
export declare const ActiveFiatAccountPaymentMethodItem: ({ isActive, onClick, paymentMethodInfo, customValueIcon, testId, disabled, }: BasePaymentMethodItemProps & {
paymentMethodInfo: PaymentMethodVirtualBankInfo;
testId?: string;
disabled?: boolean;
}) => React.JSX.Element;
type BasePaymentMethodItemProps = {
isActive: boolean;
onClick: () => void;
isClickable?: boolean;
customValueIcon?: ReactNode;
testId?: string;
};
type PaymentMethodItemProps = BasePaymentMethodItemProps & {
paymentIcon: ReactNode;
};
export declare function AddPaymentMethodItem({ paymentMethod, isClickable, isActive, onClick, customValueIcon, testId, }: BasePaymentMethodItemProps & {
paymentMethod: PaymentMethod;
dynamicLimit?: string;
}): React.JSX.Element | undefined;
/**
* Source-list row for the underlying asset a customer is supplying
* (e.g. USDT for an Aave aUSDT checkout) when the user already holds
* it. Click pre-selects the asset as the source and skips
* asset-select via SourceChange's `skipAssetSelect` routing.
*/
export declare function NativeAssetItem({ asset, label, onClick, }: {
asset: AssetHoldingsItem;
label: string;
onClick: () => void;
}): React.JSX.Element;
export declare function PayPalPaymentMethodItem({ isActive, isClickable, onClick, isLoading, }: BasePaymentMethodItemProps & {
isLoading: boolean;
}): React.JSX.Element;
export declare function PaymentMethodDisabledBadge(props: {
reason: 'comingSoon' | 'geoblocked' | 'lowBalance';
} | {
reason: 'insufficientBalance';
/** Minimum amount for 'insufficientBalance' reason only */
minAmount: {
amount: number;
currency: string;
};
}): React.JSX.Element | null;
/**
* Payment method item for a Form of Payment from the fops API (Swapped providers)
*/
export declare function FopPaymentMethodItem({ fop, isActive, onClick, testId, disclaimerLimit, disabled, isBelowMinimum, }: BasePaymentMethodItemProps & {
fop: SwappedFormOfPayment;
/**
* Omit to show processing time only — withdrawal hides the limit when the
* user's balance is below the method's limit (no meaningful limit to show).
*/
disclaimerLimit?: string;
disabled?: boolean;
/** Withdrawal off-ramp only: balance can't meet the cash sell minimum. */
isBelowMinimum?: boolean;
}): React.JSX.Element;
export {};