@funkit/connect 8.2.0 → 8.2.1-next.2

package/dist/modals/CheckoutModal/ConfirmationStep/CheckoutPrimaryInfo.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import type { FunkitCheckoutConfig } from '../../../providers/FunkitCheckoutContext';
 interface CheckoutPrimaryInfoProps {
+    showLeftAlignedDollarValueWithLabel: boolean;
     showTokenAmount: boolean;
     config: FunkitCheckoutConfig;
     usdAmount?: number;
     isLoading?: boolean;
 }
-export declare function CheckoutPrimaryInfo({ showTokenAmount, usdAmount, config, isLoading, }: CheckoutPrimaryInfoProps): React.JSX.Element;
+export declare function CheckoutPrimaryInfo({ showLeftAlignedDollarValueWithLabel, showTokenAmount, usdAmount, config, isLoading, }: CheckoutPrimaryInfoProps): React.JSX.Element;
 export {};

package/dist/modals/CheckoutModal/InputAmount/state.d.ts

@@ -65,6 +65,8 @@ export interface AmountInputDerivedState extends AmountInputState {
     };
     isValid: boolean;
     placeholder: string;
+    /** Decimal separator based on locale (e.g., '.' for en-US, ',' for de-DE) */
+    decimalSeparator: string;
 }
 export type AmountInputAction = {
     /** Switches between fiat and crypto input mode */

package/dist/modals/CheckoutModal/{SelectAsset.d.ts → SelectAsset/SelectAsset.d.ts}

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { TransferTokenDefault } from '../../hooks/useTokenChain';
-import { type PaymentMethodAccountInfo, type PaymentMethodBrokerageInfo } from '../../domains/paymentMethods';
-import { type CheckoutModalCommonState, FunCheckoutStep, type ModalStepComponentProps, type ModalStepInfo } from './stepTransition';
+import { type PaymentMethodAccountInfo, type PaymentMethodBrokerageInfo } from '../../../domains/paymentMethods';
+import type { TransferTokenDefault } from '../../../hooks/useTokenChain';
+import { type CheckoutModalCommonState, FunCheckoutStep, type ModalStepComponentProps, type ModalStepInfo } from '../stepTransition';
 export type SelectAssetState = CheckoutModalCommonState & {
     paymentMethodInfo: PaymentMethodBrokerageInfo | PaymentMethodAccountInfo;
 };

package/dist/modals/CheckoutModal/SelectAsset/SelectAssetInfoSection.d.ts

@@ -0,0 +1,12 @@
+import { type FC } from 'react';
+import type { PaymentMethodInfo } from '../../../domains/paymentMethods';
+import type { TransferTokenDefault } from '../../../hooks/useTokenChain';
+interface SelectAssetInfoSectionProps {
+    totalBalance: number;
+    paymentMethodInfo: PaymentMethodInfo;
+    onTokenTransfer: (transferToken: TransferTokenDefault) => void;
+    onSelectSource: () => void;
+    isSourceNavWidgetEnabled: boolean;
+}
+export declare const SelectAssetInfoSection: FC<SelectAssetInfoSectionProps>;
+export {};

package/dist/modals/CheckoutModal/SelectAsset/SelectAssetList.d.ts

@@ -0,0 +1,24 @@
+import { type FC } from 'react';
+import { type PaymentMethodInfo } from '../../../domains/paymentMethods';
+import type { AssetHoldingsItem } from '../../../domains/wallet';
+interface AssetOption {
+    asset: AssetHoldingsItem;
+    badgeText: string;
+    isDisabled: boolean;
+    isUserSelected: boolean;
+    priority: number;
+    minUsdRequired?: number;
+}
+interface SelectAssetListProps {
+    isLoading: boolean;
+    assetOptions: AssetOption[];
+    selectedChainTokenSymbol: string | undefined;
+    paymentMethodInfo: PaymentMethodInfo;
+    navigateOnAssetClick: boolean;
+    onBalanceTopUpSwitch?: () => void;
+    onClose?: () => void;
+    onAssetSelect: (chainSymbolKey: string) => void;
+    onContinueWithToken: () => void;
+}
+export declare const SelectAssetList: FC<SelectAssetListProps>;
+export {};

package/dist/modals/CheckoutModal/stepTransition.d.ts

@@ -19,7 +19,7 @@ import { type LoadingAccountNext, type LoadingAccountState } from './LoadingAcco
 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 SelectAssetNext, type SelectAssetState } from './SelectAsset/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';

package/dist/modals/ProfileDetails/FunProfileViews/Home/HomeCheckoutDisplayRow.css.d.ts

@@ -1,2 +1,2 @@
 export declare const baseStyles: string;
-export declare const homeCheckoutDisplayRowStyle: Record<"defaultBorder" | "defaultBackground" | "hoverBackground", string>;
+export declare const homeCheckoutDisplayRowStyle: Record<"hoverBackground" | "defaultBorder" | "defaultBackground", string>;

package/dist/providers/FunkitConfigContext.d.ts

@@ -1,4 +1,6 @@
-import { type ReactNode } from 'react';
+import { type ComponentType, type ReactNode } from 'react';
+import type { BluvoExchangeType } from '../consts/bluvo';
+import type { PaymentMethod } from '../domains/paymentMethods';
 export interface FunkitTextCustomizationsConfig {
     virtualFiat: string;
     brokerageOrExchange: string;
@@ -12,9 +14,44 @@ export interface FunkitTextCustomizationsConfig {
     transferTokens: 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;
@@ -39,6 +76,13 @@ export interface FunkitUiSelectedRouteConfig {
     /** 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';
@@ -46,15 +90,25 @@ export interface FunkitUiCustomizationsConfig {
     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)
@@ -63,17 +117,29 @@ export interface FunkitUiCustomizationsConfig {
         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;
         /**
          * Config for "Selected Route" row. When defined, the row is shown.
          * Omit to hide the selected route row (default).
          */
         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;
         /**
@@ -97,6 +163,13 @@ export interface FunkitUiCustomizationsConfig {
     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?: {
         /** Whether to show target asset selection menu if dynamicTargetAssetCandidates exist - defaults to false */
@@ -105,24 +178,34 @@ export interface FunkitUiCustomizationsConfig {
         showWalletOnInsufficientBalance?: boolean;
         /** Function that returns a custom React component to render before other UIs in the source change screen */
         customTopComponent?: () => ReactNode;
+        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;
     };
 }
 /**
- * Makes all properties of T required except for customTopComponent which remains optional.
+ * 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
- * customTopComponent to be optionally provided.
+ * custom slot components to be optionally provided.
  */
-type RequiredExceptCustomTop<T> = Required<Omit<T & {}, 'customTopComponent'>> & {
-    customTopComponent?: () => ReactNode;
-};
+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: RequiredExceptCustomTop<FunkitUiCustomizationsConfig['selectAssetScreen']>;
-    transferCryptoScreen: RequiredExceptCustomTop<FunkitUiCustomizationsConfig['transferCryptoScreen']>;
-    selectBrokerageScreen: RequiredExceptCustomTop<FunkitUiCustomizationsConfig['selectBrokerageScreen']>;
-    connectExchangeScreen: RequiredExceptCustomTop<FunkitUiCustomizationsConfig['connectExchangeScreen']>;
-    sourceChangeScreen: RequiredExceptCustomTop<FunkitUiCustomizationsConfig['sourceChangeScreen']>;
+    selectAssetScreen: RequiredExceptCustomComponents<FunkitUiCustomizationsConfig['selectAssetScreen']>;
+    transferCryptoScreen: RequiredExceptCustomComponents<FunkitUiCustomizationsConfig['transferCryptoScreen']>;
+    selectBrokerageScreen: RequiredExceptCustomComponents<FunkitUiCustomizationsConfig['selectBrokerageScreen']>;
+    connectExchangeScreen: RequiredExceptCustomComponents<FunkitUiCustomizationsConfig['connectExchangeScreen']>;
+    sourceChangeScreen: RequiredExceptCustomComponents<FunkitUiCustomizationsConfig['sourceChangeScreen']>;
 };
 export declare const DEFAULT_TEXT_CUSTOMIZATIONS: FunkitTextCustomizationsConfig;
 export declare const DEFAULT_UI_CUSTOMIZATIONS: FunkitUiCustomizationsConfigInternal;