@funkit/connect 8.1.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/modals/CheckoutModal/InputAmount/useAmountInput.d.ts

@@ -4,6 +4,7 @@ import { type AmountInputDerivedState, type AmountInputInitOptions } from './sta
 import { type InputAmountSuggestion } from './utils';
 export interface UseAmountInputResult extends AmountInputDerivedState {
     fontSize: number;
+    inputHeight: number;
     inputWidth: number | undefined;
     onChange(event: FunInputChangeEvent): void;
     ref: RefObject<HTMLInputElement>;

package/dist/modals/CheckoutModal/SourceChange/CryptoCashToggle.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { PaymentMethodType } from '../../../hooks/usePaymentSources';
+interface CryptoCashToggleProps {
+    activeTab: PaymentMethodType;
+    onTabChange: (tab: PaymentMethodType) => void;
+    style?: React.CSSProperties;
+}
+export declare const CryptoCashToggle: ({ activeTab, onTabChange, style, }: CryptoCashToggleProps) => React.JSX.Element;
+export {};

package/dist/modals/CheckoutModal/SourceChange/DefaultSourceList.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ConnectablePaymentMethodInfo, PaymentMethod } from '../../../domains/paymentMethods';
+interface DefaultSourceListProps {
+    preferred: (ConnectablePaymentMethodInfo | PaymentMethod)[];
+    moreSources: (ConnectablePaymentMethodInfo | PaymentMethod)[];
+    comingSoon: PaymentMethod[];
+    hasMoreSources: boolean;
+    renderSource: (source: ConnectablePaymentMethodInfo | PaymentMethod) => React.ReactNode;
+    renderComingSoon: (source: PaymentMethod) => React.ReactNode;
+}
+export declare function DefaultSourceList({ preferred, moreSources, comingSoon, hasMoreSources, renderSource, renderComingSoon, }: DefaultSourceListProps): React.JSX.Element;
+export {};

package/dist/modals/CheckoutModal/SourceChange/FanaticsSourceList.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ConnectablePaymentMethodInfo, PaymentMethod } from '../../../domains/paymentMethods';
+import type { PaymentMethodType } from '../../../hooks/usePaymentSources';
+interface FanaticsSourceListProps {
+    preferred: (ConnectablePaymentMethodInfo | PaymentMethod)[];
+    moreSources: (ConnectablePaymentMethodInfo | PaymentMethod)[];
+    comingSoon: PaymentMethod[];
+    isFallback: boolean;
+    renderSource: (source: ConnectablePaymentMethodInfo | PaymentMethod) => React.ReactNode;
+    renderComingSoon: (source: PaymentMethod) => React.ReactNode;
+    cryptoCashTab: PaymentMethodType;
+    onTabChange: (tab: PaymentMethodType) => void;
+}
+export declare function FanaticsSourceList({ cryptoCashTab, isFallback, onTabChange, preferred, moreSources, comingSoon, renderSource, renderComingSoon, }: FanaticsSourceListProps): React.JSX.Element;
+export {};

package/dist/modals/CheckoutModal/SourceChange/PayPal.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function PayPal(): React.JSX.Element | null;

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

@@ -27,4 +27,4 @@ export type SourceChangeNext = {
     paymentMethodInfo: ConnectablePaymentMethodInfo;
 };
 export declare const SourceChangeInfo: ModalStepInfo<FunCheckoutStep.SOURCE_CHANGE>;
-export declare function SourceChange({ modalState, onNext, setModalState, }: ModalStepComponentProps<FunCheckoutStep.SOURCE_CHANGE>): React.JSX.Element;
+export declare function SourceChange({ modalState, onClose, onNext, setModalState, }: ModalStepComponentProps<FunCheckoutStep.SOURCE_CHANGE>): React.JSX.Element;

package/dist/modals/CheckoutModal/SourceChange/sourceChange.css.d.ts

@@ -1,2 +1,3 @@
 export declare const WITH_EMPTY_STATE_DATA_ATTRIBUTE = "data-with-empty-state";
 export declare const emptyStateStyles: string;
+export declare const fanaticsSourceChangeContainer: string;

package/dist/providers/FunkitConfigContext.d.ts

@@ -1,7 +1,10 @@
-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;
+    checkoutModalCloseButtonLabel: string;
     debitOrCredit: string;
     accountBalance: string;
     selectAccount: string;
@@ -11,9 +14,52 @@ 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;
+        brokerageOrExchange?: string;
+        debitOrCredit?: string;
+        paypal?: string;
+        transferTokens?: string;
+        virtualFiat?: string;
     };
 }
 export interface FunkitUiDestinationConfig {
@@ -30,20 +76,39 @@ 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';
-    /** Whetehr to show CTA in uppercase - defaults to false */
+    /** 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)
@@ -52,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).
@@ -63,29 +130,74 @@ 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;
         /**
          * Whether to show target asset selection menu if dynamicTargetAssetCandidates exist - defaults to false
          * @deprecated use sourceChangeScreen.showTargetAssetSelection instead
          */
         showTargetAssetSelection?: 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;
+    };
+    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?: {
         /** 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;
+        /** 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 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: Required<FunkitUiCustomizationsConfig['selectAssetScreen'] & {}>;
-    transferCryptoScreen: Required<FunkitUiCustomizationsConfig['transferCryptoScreen'] & {}>;
-    sourceChangeScreen: Required<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;
@@ -100,6 +212,8 @@ export type FunkitConfig = {
     uiCustomizations?: FunkitUiCustomizationsConfig;
     /** used to link funkit users to your own user system */
     externalUserId?: string;
+    /** Disable Datadog logging - defaults to false (logging enabled) */
+    disableLogging?: boolean;
 };
 interface FinalFunkitConfigInternal extends FunkitConfig {
     textCustomizations: FunkitTextCustomizationsConfig;