@funkit/connect 9.2.1 → 9.3.0

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

@@ -1,6 +1,8 @@
 export declare const WITH_EMPTY_STATE_DATA_ATTRIBUTE = "data-with-empty-state";
 export declare const emptyStateStyles: string;
 export declare const sourceListBoxStyles: string;
+export declare const sourceListGroupContainerStyles: string;
+export declare const sourceListGroupContainerNoLabelsStyles: string;
 export declare const sourceListCompactBoxStyles: string;
 export declare const removeBottomPaddingFromSurroundingDialog: string;
 export declare const paymentMethodStaticArea: string;

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

@@ -1,16 +1,3 @@
-import type { SwappedFormOfPayment } from '@funkit/api-base';
 import React from 'react';
-import type { PaymentMethodType } from '../../../hooks/usePaymentSources';
-import { type CheckoutModalCommonState, FunCheckoutStep, type ModalStepComponentProps, type ModalStepInfo } from '../../../modals/CheckoutModal/stepTransition';
-export type SwappedIframeState = CheckoutModalCommonState & {
-    /** The selected payment option from the fops API */
-    selectedPaymentOption: SwappedFormOfPayment;
-    /** Payment method type filter to restore when returning to SOURCE_CHANGE */
-    paymentMethodTypeFilter?: PaymentMethodType;
-};
-export type SwappedIframeNext = {
-    success?: boolean;
-};
-export declare const SwappedIframeInfo: ModalStepInfo<FunCheckoutStep.SWAPPED_IFRAME>;
-declare function SwappedIframe({ modalState, onNext, onBack, onClose, }: ModalStepComponentProps<FunCheckoutStep.SWAPPED_IFRAME>): React.JSX.Element;
-export default SwappedIframe;
+declare const _default: React.MemoExoticComponent<() => React.JSX.Element | null>;
+export default _default;

package/dist/modals/CheckoutModal/SwappedIframe/SwappedIframeContainer.d.ts

@@ -0,0 +1,15 @@
+import type { SwappedFormOfPayment } from '@funkit/api-base';
+import React from 'react';
+import type { PaymentMethodType } from '../../../hooks/usePaymentSources';
+import { type CheckoutModalCommonState, FunCheckoutStep, type ModalStepComponentProps, type ModalStepInfo } from '../../../modals/CheckoutModal/stepTransition';
+export type SwappedIframeState = CheckoutModalCommonState & {
+    /** The selected payment option from the fops API */
+    selectedPaymentOption: SwappedFormOfPayment;
+    /** Payment method type filter to restore when returning to SOURCE_CHANGE */
+    paymentMethodTypeFilter?: PaymentMethodType;
+};
+export type SwappedIframeNext = {
+    success?: boolean;
+};
+export declare const SwappedIframeInfo: ModalStepInfo<FunCheckoutStep.SWAPPED_IFRAME>;
+export declare function SwappedIframeContainer({ modalState, onNext, onBack, onClose, }: ModalStepComponentProps<FunCheckoutStep.SWAPPED_IFRAME>): React.JSX.Element;

package/dist/modals/CheckoutModal/SwappedIframe/index.d.ts

@@ -1 +1 @@
-export { default as SwappedIframe, SwappedIframeInfo, type SwappedIframeNext, type SwappedIframeState, } from './SwappedIframe';
+export { SwappedIframeContainer, SwappedIframeInfo, type SwappedIframeNext, type SwappedIframeState, } from './SwappedIframeContainer';

package/dist/providers/FunkitCheckoutContext/types.d.ts

@@ -16,13 +16,13 @@ export interface DynamicTargetAssetCandidate extends TokenInfo {
     badgeText?: string;
     targetAssetMinAmount?: number;
     /**
-     * Exchange rate of the target asset in terms of the staking token.
-     * Represents how many staking tokens one unit of the target asset can be exchanged for.
+     * Exchange rate of the target asset in terms of the finalized token.
+     * Represents how many finalized tokens one unit of the target asset can be exchanged for.
      *
-     * Example: If `targetAsset`/`stakingToken` is USDT/hbUSDT and the rate is 1.01,
+     * Example: If `targetAsset`/`finalizedToken` is USDT/hbUSDT and the rate is 1.01,
      * 1 USDT can be exchanged for 1.01 hbUSDT.
      */
-    stakingTokenRate?: number;
+    finalizedTokenRate?: number;
     dynamicRoutingId?: string;
 }
 export declare enum FunCheckoutStartingStep {
@@ -74,7 +74,7 @@ export interface FunkitCheckoutConfig extends Omit<ApiFunkitCheckoutConfig, 'gen
      * to specify the onchain action to execute after deposit */
     qrcodeActionType?: string;
     /** set this if you want enable vault like deposit*/
-    stakingToken?: DynamicTargetAssetCandidate;
+    finalizedToken?: DynamicTargetAssetCandidate;
     /**
      * For dynamic routing, the id of the dynamic route to use
      */

package/dist/providers/FunkitThemeProvider.d.ts

@@ -55,8 +55,9 @@ export declare const useActiveTheme: () => {
             secondaryText: string;
             tertiaryText: string;
             textSelection: string;
-            selectedDropdownItemText: string;
+            inputLabel: string;
             inputBackground: string;
+            inputBackgroundHover: string;
             inputBorderBase: string;
             inputBorderHover: string;
             activeTabBorderColor: string;
@@ -131,12 +132,29 @@ export declare const useActiveTheme: () => {
             fiatAccountGradientTo: string;
             optionBoxBackground: string;
             optionBoxBackgroundUninteractive: string;
+            optionBoxBorderBase: string;
             optionBoxBorderHover: string;
+            optionBoxDefaultModeNotActiveBorderBase: string;
+            optionBoxDefaultModeNotActiveBorderHover: string;
             openDropdownBackgroundColor: string;
             dropdownActiveItemBackgroundBase: string;
             dropdownActiveItemBackgroundHover: string;
             dropdownActiveItemBackgroundDisabled: string;
+            dropdownActiveItemBorderBase: string;
+            dropdownActiveItemBorderHover: string;
             selectedDropdownItemBackground: string;
+            alwaysVisibleLabelBackgroundHover: string;
+            selectedDropdownItemText: string;
+            dropdownLabelColor: string;
+            copyButtonBackgroundBase: string;
+            copyButtonBackgroundHover: string;
+            copyButtonBackgroundActive: string;
+            copyButtonBorderBase: string;
+            copyButtonBorderHover: string;
+            funFeatureListBackgroundBase: string;
+            funFeatureListBackgroundHover: string;
+            funFeatureListBorderColor: string;
+            funFeatureListBorderColorHover: string;
             spinnerBackground: string;
             spinnerIndicator: string;
             spinnerBackgroundVerifyAccount: string;
@@ -164,6 +182,7 @@ export declare const useActiveTheme: () => {
             paymentAmountSkeletonCircleSize: string;
             paymentMethodItemIconSize: string;
             selectAssetItemIconSize: string;
+            sourceListGap: string;
             txBreakdownSkeletonWidth: string;
             txSummaryLineSkeletonHeight: string;
             txSummaryLineSkeletonWidth: string;
@@ -359,6 +378,14 @@ export declare const useActiveTheme: () => {
                 fontSize: string;
                 lineHeight: string;
             };
+            quickOptionFontSize: {
+                fontSize: string;
+                lineHeight: string;
+            };
+            useConnectedFontSize: {
+                fontSize: string;
+                lineHeight: string;
+            };
         };
         radii: {
             actionButton: string;
@@ -380,6 +407,7 @@ export declare const useActiveTheme: () => {
             dropdownList: string;
             modalTopbarIcon: string;
             withdrawalInput: string;
+            useConnected: string;
         };
         borderWidths: {
             activeOptionBorderWidth: string;
@@ -442,6 +470,10 @@ export declare const useActiveTheme: () => {
             youPayYouReceivePaddingLeft: string;
             youPayYouReceivePaddingRight: string;
             youPayYouReceivePaddingY: string;
+            inputPaddingX: string;
+            inputPaddingY: string;
+            dropdownActiveItemRegularSizePaddingY: string;
+            assetListDefaultGap: string;
         };
         textTransforms: {
             inputAmountQuickOptionButton: string;
@@ -497,8 +529,9 @@ export declare const useActiveTheme: () => {
             secondaryText: string;
             tertiaryText: string;
             textSelection: string;
-            selectedDropdownItemText: string;
+            inputLabel: string;
             inputBackground: string;
+            inputBackgroundHover: string;
             inputBorderBase: string;
             inputBorderHover: string;
             activeTabBorderColor: string;
@@ -573,12 +606,29 @@ export declare const useActiveTheme: () => {
             fiatAccountGradientTo: string;
             optionBoxBackground: string;
             optionBoxBackgroundUninteractive: string;
+            optionBoxBorderBase: string;
             optionBoxBorderHover: string;
+            optionBoxDefaultModeNotActiveBorderBase: string;
+            optionBoxDefaultModeNotActiveBorderHover: string;
             openDropdownBackgroundColor: string;
             dropdownActiveItemBackgroundBase: string;
             dropdownActiveItemBackgroundHover: string;
             dropdownActiveItemBackgroundDisabled: string;
+            dropdownActiveItemBorderBase: string;
+            dropdownActiveItemBorderHover: string;
             selectedDropdownItemBackground: string;
+            alwaysVisibleLabelBackgroundHover: string;
+            selectedDropdownItemText: string;
+            dropdownLabelColor: string;
+            copyButtonBackgroundBase: string;
+            copyButtonBackgroundHover: string;
+            copyButtonBackgroundActive: string;
+            copyButtonBorderBase: string;
+            copyButtonBorderHover: string;
+            funFeatureListBackgroundBase: string;
+            funFeatureListBackgroundHover: string;
+            funFeatureListBorderColor: string;
+            funFeatureListBorderColorHover: string;
             spinnerBackground: string;
             spinnerIndicator: string;
             spinnerBackgroundVerifyAccount: string;
@@ -606,6 +656,7 @@ export declare const useActiveTheme: () => {
             paymentAmountSkeletonCircleSize: string;
             paymentMethodItemIconSize: string;
             selectAssetItemIconSize: string;
+            sourceListGap: string;
             txBreakdownSkeletonWidth: string;
             txSummaryLineSkeletonHeight: string;
             txSummaryLineSkeletonWidth: string;
@@ -801,6 +852,14 @@ export declare const useActiveTheme: () => {
                 fontSize: string;
                 lineHeight: string;
             };
+            quickOptionFontSize: {
+                fontSize: string;
+                lineHeight: string;
+            };
+            useConnectedFontSize: {
+                fontSize: string;
+                lineHeight: string;
+            };
         };
         radii: {
             actionButton: string;
@@ -822,6 +881,7 @@ export declare const useActiveTheme: () => {
             dropdownList: string;
             modalTopbarIcon: string;
             withdrawalInput: string;
+            useConnected: string;
         };
         borderWidths: {
             activeOptionBorderWidth: string;
@@ -884,6 +944,10 @@ export declare const useActiveTheme: () => {
             youPayYouReceivePaddingLeft: string;
             youPayYouReceivePaddingRight: string;
             youPayYouReceivePaddingY: string;
+            inputPaddingX: string;
+            inputPaddingY: string;
+            dropdownActiveItemRegularSizePaddingY: string;
+            assetListDefaultGap: string;
         };
         textTransforms: {
             inputAmountQuickOptionButton: string;
@@ -937,8 +1001,9 @@ export declare const useActiveTheme: () => {
             secondaryText: string;
             tertiaryText: string;
             textSelection: string;
-            selectedDropdownItemText: string;
+            inputLabel: string;
             inputBackground: string;
+            inputBackgroundHover: string;
             inputBorderBase: string;
             inputBorderHover: string;
             activeTabBorderColor: string;
@@ -1013,12 +1078,29 @@ export declare const useActiveTheme: () => {
             fiatAccountGradientTo: string;
             optionBoxBackground: string;
             optionBoxBackgroundUninteractive: string;
+            optionBoxBorderBase: string;
             optionBoxBorderHover: string;
+            optionBoxDefaultModeNotActiveBorderBase: string;
+            optionBoxDefaultModeNotActiveBorderHover: string;
             openDropdownBackgroundColor: string;
             dropdownActiveItemBackgroundBase: string;
             dropdownActiveItemBackgroundHover: string;
             dropdownActiveItemBackgroundDisabled: string;
+            dropdownActiveItemBorderBase: string;
+            dropdownActiveItemBorderHover: string;
             selectedDropdownItemBackground: string;
+            alwaysVisibleLabelBackgroundHover: string;
+            selectedDropdownItemText: string;
+            dropdownLabelColor: string;
+            copyButtonBackgroundBase: string;
+            copyButtonBackgroundHover: string;
+            copyButtonBackgroundActive: string;
+            copyButtonBorderBase: string;
+            copyButtonBorderHover: string;
+            funFeatureListBackgroundBase: string;
+            funFeatureListBackgroundHover: string;
+            funFeatureListBorderColor: string;
+            funFeatureListBorderColorHover: string;
             spinnerBackground: string;
             spinnerIndicator: string;
             spinnerBackgroundVerifyAccount: string;
@@ -1046,6 +1128,7 @@ export declare const useActiveTheme: () => {
             paymentAmountSkeletonCircleSize: string;
             paymentMethodItemIconSize: string;
             selectAssetItemIconSize: string;
+            sourceListGap: string;
             txBreakdownSkeletonWidth: string;
             txSummaryLineSkeletonHeight: string;
             txSummaryLineSkeletonWidth: string;
@@ -1241,6 +1324,14 @@ export declare const useActiveTheme: () => {
                 fontSize: string;
                 lineHeight: string;
             };
+            quickOptionFontSize: {
+                fontSize: string;
+                lineHeight: string;
+            };
+            useConnectedFontSize: {
+                fontSize: string;
+                lineHeight: string;
+            };
         };
         radii: {
             actionButton: string;
@@ -1262,6 +1353,7 @@ export declare const useActiveTheme: () => {
             dropdownList: string;
             modalTopbarIcon: string;
             withdrawalInput: string;
+            useConnected: string;
         };
         borderWidths: {
             activeOptionBorderWidth: string;
@@ -1324,6 +1416,10 @@ export declare const useActiveTheme: () => {
             youPayYouReceivePaddingLeft: string;
             youPayYouReceivePaddingRight: string;
             youPayYouReceivePaddingY: string;
+            inputPaddingX: string;
+            inputPaddingY: string;
+            dropdownActiveItemRegularSizePaddingY: string;
+            assetListDefaultGap: string;
         };
         textTransforms: {
             inputAmountQuickOptionButton: string;

package/dist/providers/SwappedProvider.d.ts

@@ -1,3 +1,4 @@
+import { type FormOfPaymentType } from '@funkit/api-base';
 import React from 'react';
 import { type SwappedTheme } from '../utils/swapped';
 export interface SwappedIframeCallbacks {
@@ -9,15 +10,14 @@ export interface SwappedIframeCallbacks {
     onNavigation: (step: string) => void;
 }
 interface SwappedContextValue {
-    poolUrls: string[];
-    loadedIframeUrls: string[];
-    setPreloadUrls: (urls: string[]) => void;
-    activeUrl: string | null;
-    activateIframe: (url: string) => void;
+    iframeUrl: string | null;
+    isSwappedReady: boolean;
+    isActive: boolean;
+    setIframeUrl: (url: string | null) => void;
+    activateIframe: (fopType: FormOfPaymentType) => void;
     deactivateIframe: () => void;
-    onIframeElementLoaded: (url: string) => void;
-    clearIframePool: () => void;
-    setIframeRef: (url: string, el: HTMLIFrameElement | null) => void;
+    resetIframe: () => void;
+    setIframeRef: (el: HTMLIFrameElement | null) => void;
     setActiveCallbacks: (cb: SwappedIframeCallbacks | null) => void;
     swappedTheme: SwappedTheme;
 }

package/dist/themes/baseTheme.js

@@ -2,7 +2,7 @@
 import {
   baseTheme,
   systemFontStack
-} from "../chunk-3U6TWV25.js";
+} from "../chunk-TWG76V3I.js";
 export {
   baseTheme,
   systemFontStack

package/dist/themes/darkTheme.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   darkTheme
-} from "../chunk-VLXKSNSJ.js";
-import "../chunk-3U6TWV25.js";
+} from "../chunk-NKJYA7IM.js";
+import "../chunk-TWG76V3I.js";
 export {
   darkTheme
 };

package/dist/themes/lightTheme.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   lightTheme
-} from "../chunk-P6FYL3PM.js";
-import "../chunk-3U6TWV25.js";
+} from "../chunk-FHIMKOGH.js";
+import "../chunk-TWG76V3I.js";
 export {
   lightTheme
 };

package/dist/utils/checkout.d.ts

@@ -121,10 +121,10 @@ export declare function isVaultDepositCheckout(checkoutConfig: FunkitCheckoutCon
     chainId: string;
     tokenAddress: string;
 }): boolean;
-/** some additional staking token will be performed after swap. We need to calculate the final destination token amount */
+/** some additional finalized token will be performed after swap. We need to calculate the final destination token amount */
 export declare function computeDisplayDestinationToken(checkoutConfig: FunkitCheckoutConfig | ServerCheckoutConfig | undefined, displayAssetAmount: number): {
-    stakingTokenAmount: number;
-    stakingTokenSymbol: string;
-    stakingTokenIcon: string;
+    finalizedTokenAmount: number;
+    finalizedTokenSymbol: string;
+    finalizedTokenIcon: string;
 };
 export {};

package/dist/utils/swapped.d.ts

@@ -1,5 +1,6 @@
-import type { SavedFormOfPayment, SwappedFormOfPayment } from '@funkit/api-base';
+import { type SavedFormOfPayment, type SwappedFormOfPayment } from '@funkit/api-base';
 import type { ThemeVars } from '../css/sprinkles.css';
+import type { ThemeColorScheme } from '../providers/FunkitThemeProvider';
 /**
  * Ref: https://www.notion.so/Fun-Parameter-Styling-Guide-312966ea6e398011bbc6c14e976e281d#63dcdd77ea2d488084a980cda4c63d08
  */
@@ -25,10 +26,12 @@ export interface SwappedTheme {
     contentPadding?: string;
     boxPaddingY?: string;
     boxPaddingX?: string;
+    paymentMethodLightLogos?: boolean;
 }
 export declare const isSavedFormOfPaymentType: (fop: SwappedFormOfPayment) => fop is SavedFormOfPayment;
 export declare const getSavedFormOfPaymentDisplayName: (fop: SavedFormOfPayment) => string;
-export declare const getSavedFormOfPaymentIcon: (fop: SavedFormOfPayment) => string;
+export declare const getSavedFormOfPaymentIcon: (fop: SavedFormOfPayment) => string | undefined;
+export declare const getSwappedIcon: (fop: SwappedFormOfPayment, isDarkMode: boolean) => string;
 export declare function getSwappedOrigin(url: string): string | null;
 export declare function isSwappedOrigin(origin: string): boolean;
 export declare function resolveCssValue(value: string): string;
@@ -38,5 +41,5 @@ export declare function buildSwappedTheme(theme: ThemeVars & {
         primary?: string;
         secondary?: string;
     };
-}): SwappedTheme;
+}, themeColorScheme: ThemeColorScheme): SwappedTheme;
 export declare function buildSwappedThemeQueryParams(activeTheme: ThemeVars): Record<string, string>;

package/dist/wallets/walletConnectors/bifrostWallet/bifrostWallet.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   bifrostWallet
-} from "../chunk-CT3QPTAU.js";
-import "../chunk-BAVE62IL.js";
+} from "../chunk-EKJHJFRN.js";
 import "../chunk-MAPXJUOO.js";
+import "../chunk-BAVE62IL.js";
 import "../chunk-KV4HGYM3.js";
 export {
   bifrostWallet

package/dist/wallets/walletConnectors/bitgetWallet/bitgetWallet.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   bitgetWallet
-} from "../chunk-C4RP2DNH.js";
-import "../chunk-BAVE62IL.js";
+} from "../chunk-HOPH3TQ3.js";
 import "../chunk-MAPXJUOO.js";
+import "../chunk-BAVE62IL.js";
 import "../chunk-KV4HGYM3.js";
 export {
   bitgetWallet

package/dist/wallets/walletConnectors/bybitWallet/bybitWallet.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   bybitWallet
-} from "../chunk-I7K6LUZR.js";
-import "../chunk-BAVE62IL.js";
+} from "../chunk-6UCI7GM6.js";
 import "../chunk-MAPXJUOO.js";
+import "../chunk-BAVE62IL.js";
 import "../chunk-KV4HGYM3.js";
 export {
   bybitWallet

package/dist/wallets/walletConnectors/clvWallet/clvWallet.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   clvWallet
-} from "../chunk-CMLFDRCP.js";
-import "../chunk-BAVE62IL.js";
+} from "../chunk-GVOQTORD.js";
 import "../chunk-MAPXJUOO.js";
+import "../chunk-BAVE62IL.js";
 import "../chunk-KV4HGYM3.js";
 export {
   clvWallet

package/dist/wallets/walletConnectors/coin98Wallet/coin98Wallet.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   coin98Wallet
-} from "../chunk-3Y2GG3PM.js";
-import "../chunk-BAVE62IL.js";
+} from "../chunk-6YO27XOM.js";
 import "../chunk-MAPXJUOO.js";
+import "../chunk-BAVE62IL.js";
 import "../chunk-KV4HGYM3.js";
 export {
   coin98Wallet

package/dist/wallets/walletConnectors/coreWallet/coreWallet.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   coreWallet
-} from "../chunk-TIT5F32X.js";
-import "../chunk-BAVE62IL.js";
+} from "../chunk-GH4M6FTK.js";
 import "../chunk-MAPXJUOO.js";
+import "../chunk-BAVE62IL.js";
 import "../chunk-KV4HGYM3.js";
 export {
   coreWallet

package/dist/wallets/walletConnectors/foxWallet/foxWallet.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   foxWallet
-} from "../chunk-UVMMPRDM.js";
-import "../chunk-BAVE62IL.js";
+} from "../chunk-53VYSPXK.js";
 import "../chunk-MAPXJUOO.js";
+import "../chunk-BAVE62IL.js";
 import "../chunk-KV4HGYM3.js";
 export {
   foxWallet

package/dist/wallets/walletConnectors/frontierWallet/frontierWallet.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   frontierWallet
-} from "../chunk-FDVJHNLL.js";
-import "../chunk-BAVE62IL.js";
+} from "../chunk-CJJT7LMT.js";
 import "../chunk-MAPXJUOO.js";
+import "../chunk-BAVE62IL.js";
 import "../chunk-KV4HGYM3.js";
 export {
   frontierWallet

package/dist/wallets/walletConnectors/gateWallet/gateWallet.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   gateWallet
-} from "../chunk-DWMUM4F6.js";
-import "../chunk-BAVE62IL.js";
+} from "../chunk-7OARWILZ.js";
 import "../chunk-MAPXJUOO.js";
+import "../chunk-BAVE62IL.js";
 import "../chunk-KV4HGYM3.js";
 export {
   gateWallet