@funkit/connect 8.2.0 → 8.2.1-next.0

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/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,6 +117,8 @@ 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;
         /**
          * Config for "Selected Route" row. When defined, the row is shown.
          * Omit to hide the selected route row (default).
@@ -74,6 +130,8 @@ export interface FunkitUiCustomizationsConfig {
         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 +155,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 +170,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;