@funkit/connect 9.3.0 → 9.3.2

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

@@ -7,7 +7,7 @@ interface AssetOption {
     isDisabled: boolean;
     isUserSelected: boolean;
     priority: number;
-    minUsdRequired?: number;
+    minUsdWithFees?: number;
 }
 interface SelectAssetListProps {
     isLoading: boolean;

package/dist/providers/FunkitConfigContext.d.ts

@@ -87,6 +87,8 @@ export interface FunkitUiCustomizationsConfig {
     alignTitle?: 'left' | 'center';
     /** Always shows checkout modal top divider even if content cannot scroll - defaults to `false` */
     alwaysShowTopDivider?: boolean;
+    /** Whether to show modal title in topbars - defaults to true */
+    showModalTitle?: boolean;
     /** Whether to show CTA in uppercase - defaults to false */
     callToActionsUppercase?: boolean;
     /** Whether to enable compact list style for option boxes - defaults to false */
@@ -152,6 +154,10 @@ export interface FunkitUiCustomizationsConfig {
         /** Function that returns a custom React component to render before other UIs in the transfer crypto screen */
         customTopComponent?: () => ReactNode;
     };
+    withdrawalScreen?: {
+        /** Function that returns a custom React component to render before other UIs in the withdrawal amount screen */
+        customTopComponent?: () => ReactNode;
+    };
     selectBrokerageScreen?: {
         /** Function that returns a custom React component to render before other UIs in the select brokerage screen */
         customTopComponent?: () => ReactNode;
@@ -217,6 +223,7 @@ export type FunkitUiCustomizationsConfigInternal = Required<FunkitUiCustomizatio
     inputAmountScreen: Required<FunkitUiCustomizationsConfig['inputAmountScreen'] & {}>;
     selectAssetScreen: RequiredExceptCustomComponents<FunkitUiCustomizationsConfig['selectAssetScreen']>;
     transferCryptoScreen: RequiredExceptCustomComponents<FunkitUiCustomizationsConfig['transferCryptoScreen']>;
+    withdrawalScreen: RequiredExceptCustomComponents<FunkitUiCustomizationsConfig['withdrawalScreen']>;
     selectBrokerageScreen: RequiredExceptCustomComponents<FunkitUiCustomizationsConfig['selectBrokerageScreen']>;
     connectExchangeScreen: RequiredExceptCustomComponents<FunkitUiCustomizationsConfig['connectExchangeScreen']>;
     sourceChangeScreen: RequiredExceptCustomComponents<FunkitUiCustomizationsConfig['sourceChangeScreen']> & {

package/dist/providers/FunkitThemeProvider.d.ts

@@ -145,7 +145,6 @@ export declare const useActiveTheme: () => {
             selectedDropdownItemBackground: string;
             alwaysVisibleLabelBackgroundHover: string;
             selectedDropdownItemText: string;
-            dropdownLabelColor: string;
             copyButtonBackgroundBase: string;
             copyButtonBackgroundHover: string;
             copyButtonBackgroundActive: string;
@@ -164,6 +163,9 @@ export declare const useActiveTheme: () => {
             counterRingColor: string;
             cryptoCashToggleContainerBorderColor: string;
             cryptoCashToggleBackground: string;
+            withdrawalYouWillReceiveLabel: string;
+            withdrawalYouWillReceiveValueCrypto: string;
+            withdrawalYouWillReceiveValueUsd: string;
         };
         dimensions: {
             connectExchangeIconSize: string;
@@ -206,20 +208,24 @@ export declare const useActiveTheme: () => {
             heavy: string;
             cryptoCashToggle: string;
             inputAmount: string;
+            inputLabel: string;
+            inputValue: string;
             modalTopbarTitle: string;
             modalBottomBarButtonText: string;
             paymentMethodItemSubtitle: string;
             paymentMethodItemTitle: string;
             selectAssetItemSubtitle: string;
             selectAssetItemTitle: string;
-            transferTokenLabelFontWeight: string;
+            sourceListSectionLabelFontWeight: string;
             txBreakdown: string;
             txStatusDescription: string;
             txStatusTitle: string;
             txSummaryLabel: string;
             txSummaryValue: string;
-            sourceListSectionLabelFontWeight: string;
             formOfPaymentsListSectionLabelFontWeight: string;
+            withdrawalYouWillReceiveLabel: string;
+            withdrawalYouWillReceiveValueCrypto: string;
+            withdrawalYouWillReceiveValueUsd: string;
         };
         fontSize: {
             '10': {
@@ -298,6 +304,14 @@ export declare const useActiveTheme: () => {
                 fontSize: string;
                 lineHeight: string;
             };
+            inputLabel: {
+                fontSize: string;
+                lineHeight: string;
+            };
+            inputValue: {
+                fontSize: string;
+                lineHeight: string;
+            };
             modalTopbarSubtitle: {
                 fontSize: string;
                 lineHeight: string;
@@ -346,15 +360,15 @@ export declare const useActiveTheme: () => {
                 fontSize: string;
                 lineHeight: string;
             };
-            youPayYouReceivePrimaryFontSize: {
+            withdrawalYouWillReceive: {
                 fontSize: string;
                 lineHeight: string;
             };
-            youPayYouReceiveSecondaryFontSize: {
+            youPayYouReceivePrimaryFontSize: {
                 fontSize: string;
                 lineHeight: string;
             };
-            transferTokenLabelFontSize: {
+            youPayYouReceiveSecondaryFontSize: {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -449,16 +463,17 @@ export declare const useActiveTheme: () => {
             cryptoCashToggleMarginTop: string;
             cryptoCashToggleTabPaddingY: string;
             modalBaseHorizontalPadding: string;
+            modalBottomBarButtonPaddingY: string;
             modalBottomHorizontalPadding: string;
             modalPaddingBottomUpper: string;
             modalPaddingBottomLower: string;
             modalTopBarVerticalTextSpacing: string;
-            modalBottomBarButtonPaddingY: string;
             selectAssetItemPaddingX: string;
             selectAssetItemPaddingY: string;
             selectAssetItemTextGap: string;
             selectBrokerageItemPaddingX: string;
             selectBrokerageItemPaddingY: string;
+            selectBrokerageListGap: string;
             txBreakdownMarginY: string;
             txBreakdownPaddingX: string;
             txSummaryBoxPaddingX: string;
@@ -467,6 +482,7 @@ export declare const useActiveTheme: () => {
             txSummaryDividerMarginX: string;
             txSummaryDividerMarginY: string;
             verticalSectionGap: string;
+            withdrawalModalPaddingTop: string;
             youPayYouReceivePaddingLeft: string;
             youPayYouReceivePaddingRight: string;
             youPayYouReceivePaddingY: string;
@@ -619,7 +635,6 @@ export declare const useActiveTheme: () => {
             selectedDropdownItemBackground: string;
             alwaysVisibleLabelBackgroundHover: string;
             selectedDropdownItemText: string;
-            dropdownLabelColor: string;
             copyButtonBackgroundBase: string;
             copyButtonBackgroundHover: string;
             copyButtonBackgroundActive: string;
@@ -638,6 +653,9 @@ export declare const useActiveTheme: () => {
             counterRingColor: string;
             cryptoCashToggleContainerBorderColor: string;
             cryptoCashToggleBackground: string;
+            withdrawalYouWillReceiveLabel: string;
+            withdrawalYouWillReceiveValueCrypto: string;
+            withdrawalYouWillReceiveValueUsd: string;
         };
         dimensions: {
             connectExchangeIconSize: string;
@@ -680,20 +698,24 @@ export declare const useActiveTheme: () => {
             heavy: string;
             cryptoCashToggle: string;
             inputAmount: string;
+            inputLabel: string;
+            inputValue: string;
             modalTopbarTitle: string;
             modalBottomBarButtonText: string;
             paymentMethodItemSubtitle: string;
             paymentMethodItemTitle: string;
             selectAssetItemSubtitle: string;
             selectAssetItemTitle: string;
-            transferTokenLabelFontWeight: string;
+            sourceListSectionLabelFontWeight: string;
             txBreakdown: string;
             txStatusDescription: string;
             txStatusTitle: string;
             txSummaryLabel: string;
             txSummaryValue: string;
-            sourceListSectionLabelFontWeight: string;
             formOfPaymentsListSectionLabelFontWeight: string;
+            withdrawalYouWillReceiveLabel: string;
+            withdrawalYouWillReceiveValueCrypto: string;
+            withdrawalYouWillReceiveValueUsd: string;
         };
         fontSize: {
             '10': {
@@ -772,6 +794,14 @@ export declare const useActiveTheme: () => {
                 fontSize: string;
                 lineHeight: string;
             };
+            inputLabel: {
+                fontSize: string;
+                lineHeight: string;
+            };
+            inputValue: {
+                fontSize: string;
+                lineHeight: string;
+            };
             modalTopbarSubtitle: {
                 fontSize: string;
                 lineHeight: string;
@@ -820,15 +850,15 @@ export declare const useActiveTheme: () => {
                 fontSize: string;
                 lineHeight: string;
             };
-            youPayYouReceivePrimaryFontSize: {
+            withdrawalYouWillReceive: {
                 fontSize: string;
                 lineHeight: string;
             };
-            youPayYouReceiveSecondaryFontSize: {
+            youPayYouReceivePrimaryFontSize: {
                 fontSize: string;
                 lineHeight: string;
             };
-            transferTokenLabelFontSize: {
+            youPayYouReceiveSecondaryFontSize: {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -923,16 +953,17 @@ export declare const useActiveTheme: () => {
             cryptoCashToggleMarginTop: string;
             cryptoCashToggleTabPaddingY: string;
             modalBaseHorizontalPadding: string;
+            modalBottomBarButtonPaddingY: string;
             modalBottomHorizontalPadding: string;
             modalPaddingBottomUpper: string;
             modalPaddingBottomLower: string;
             modalTopBarVerticalTextSpacing: string;
-            modalBottomBarButtonPaddingY: string;
             selectAssetItemPaddingX: string;
             selectAssetItemPaddingY: string;
             selectAssetItemTextGap: string;
             selectBrokerageItemPaddingX: string;
             selectBrokerageItemPaddingY: string;
+            selectBrokerageListGap: string;
             txBreakdownMarginY: string;
             txBreakdownPaddingX: string;
             txSummaryBoxPaddingX: string;
@@ -941,6 +972,7 @@ export declare const useActiveTheme: () => {
             txSummaryDividerMarginX: string;
             txSummaryDividerMarginY: string;
             verticalSectionGap: string;
+            withdrawalModalPaddingTop: string;
             youPayYouReceivePaddingLeft: string;
             youPayYouReceivePaddingRight: string;
             youPayYouReceivePaddingY: string;
@@ -1091,7 +1123,6 @@ export declare const useActiveTheme: () => {
             selectedDropdownItemBackground: string;
             alwaysVisibleLabelBackgroundHover: string;
             selectedDropdownItemText: string;
-            dropdownLabelColor: string;
             copyButtonBackgroundBase: string;
             copyButtonBackgroundHover: string;
             copyButtonBackgroundActive: string;
@@ -1110,6 +1141,9 @@ export declare const useActiveTheme: () => {
             counterRingColor: string;
             cryptoCashToggleContainerBorderColor: string;
             cryptoCashToggleBackground: string;
+            withdrawalYouWillReceiveLabel: string;
+            withdrawalYouWillReceiveValueCrypto: string;
+            withdrawalYouWillReceiveValueUsd: string;
         };
         dimensions: {
             connectExchangeIconSize: string;
@@ -1152,20 +1186,24 @@ export declare const useActiveTheme: () => {
             heavy: string;
             cryptoCashToggle: string;
             inputAmount: string;
+            inputLabel: string;
+            inputValue: string;
             modalTopbarTitle: string;
             modalBottomBarButtonText: string;
             paymentMethodItemSubtitle: string;
             paymentMethodItemTitle: string;
             selectAssetItemSubtitle: string;
             selectAssetItemTitle: string;
-            transferTokenLabelFontWeight: string;
+            sourceListSectionLabelFontWeight: string;
             txBreakdown: string;
             txStatusDescription: string;
             txStatusTitle: string;
             txSummaryLabel: string;
             txSummaryValue: string;
-            sourceListSectionLabelFontWeight: string;
             formOfPaymentsListSectionLabelFontWeight: string;
+            withdrawalYouWillReceiveLabel: string;
+            withdrawalYouWillReceiveValueCrypto: string;
+            withdrawalYouWillReceiveValueUsd: string;
         };
         fontSize: {
             '10': {
@@ -1244,6 +1282,14 @@ export declare const useActiveTheme: () => {
                 fontSize: string;
                 lineHeight: string;
             };
+            inputLabel: {
+                fontSize: string;
+                lineHeight: string;
+            };
+            inputValue: {
+                fontSize: string;
+                lineHeight: string;
+            };
             modalTopbarSubtitle: {
                 fontSize: string;
                 lineHeight: string;
@@ -1292,15 +1338,15 @@ export declare const useActiveTheme: () => {
                 fontSize: string;
                 lineHeight: string;
             };
-            youPayYouReceivePrimaryFontSize: {
+            withdrawalYouWillReceive: {
                 fontSize: string;
                 lineHeight: string;
             };
-            youPayYouReceiveSecondaryFontSize: {
+            youPayYouReceivePrimaryFontSize: {
                 fontSize: string;
                 lineHeight: string;
             };
-            transferTokenLabelFontSize: {
+            youPayYouReceiveSecondaryFontSize: {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -1395,16 +1441,17 @@ export declare const useActiveTheme: () => {
             cryptoCashToggleMarginTop: string;
             cryptoCashToggleTabPaddingY: string;
             modalBaseHorizontalPadding: string;
+            modalBottomBarButtonPaddingY: string;
             modalBottomHorizontalPadding: string;
             modalPaddingBottomUpper: string;
             modalPaddingBottomLower: string;
             modalTopBarVerticalTextSpacing: string;
-            modalBottomBarButtonPaddingY: string;
             selectAssetItemPaddingX: string;
             selectAssetItemPaddingY: string;
             selectAssetItemTextGap: string;
             selectBrokerageItemPaddingX: string;
             selectBrokerageItemPaddingY: string;
+            selectBrokerageListGap: string;
             txBreakdownMarginY: string;
             txBreakdownPaddingX: string;
             txSummaryBoxPaddingX: string;
@@ -1413,6 +1460,7 @@ export declare const useActiveTheme: () => {
             txSummaryDividerMarginX: string;
             txSummaryDividerMarginY: string;
             verticalSectionGap: string;
+            withdrawalModalPaddingTop: string;
             youPayYouReceivePaddingLeft: string;
             youPayYouReceivePaddingRight: string;
             youPayYouReceivePaddingY: string;

package/dist/providers/SwappedProvider.d.ts

@@ -6,8 +6,10 @@ export interface SwappedIframeCallbacks {
     onBack: () => void;
     onExit: () => void;
     onNewDeposit: () => void;
-    onError: (message: string) => void;
+    onError: (data: Record<string, unknown>) => void;
     onNavigation: (step: string) => void;
+    onOrderData: (data: Record<string, unknown>) => void;
+    onLogout: () => void;
 }
 interface SwappedContextValue {
     iframeUrl: string | null;

package/dist/themes/baseTheme.js

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

package/dist/themes/darkTheme.js

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

package/dist/themes/lightTheme.js

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

package/dist/utils/swapped.d.ts

@@ -1,6 +1,5 @@
 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
  */
@@ -28,6 +27,10 @@ export interface SwappedTheme {
     boxPaddingX?: string;
     paymentMethodLightLogos?: boolean;
 }
+export declare const SWAPPED_CARD_BRANDS: Record<string, {
+    displayName: string;
+    iconImageUrl: string;
+}>;
 export declare const isSavedFormOfPaymentType: (fop: SwappedFormOfPayment) => fop is SavedFormOfPayment;
 export declare const getSavedFormOfPaymentDisplayName: (fop: SavedFormOfPayment) => string;
 export declare const getSavedFormOfPaymentIcon: (fop: SavedFormOfPayment) => string | undefined;
@@ -41,5 +44,5 @@ export declare function buildSwappedTheme(theme: ThemeVars & {
         primary?: string;
         secondary?: string;
     };
-}, themeColorScheme: ThemeColorScheme): SwappedTheme;
+}, isDarkMode: boolean): SwappedTheme;
 export declare function buildSwappedThemeQueryParams(activeTheme: ThemeVars): Record<string, string>;

package/dist/wallets/walletConnectors/index.js

@@ -1,19 +1,13 @@
 "use client";
-import {
-  zealWallet
-} from "./chunk-HE2LMIPD.js";
 import {
   zerionWallet
 } from "./chunk-TTHM3WUR.js";
 import {
-  tahoWallet
-} from "./chunk-4BMUFNMT.js";
+  mewWallet
+} from "./chunk-HKVDCVCG.js";
 import {
   talismanWallet
 } from "./chunk-6MFOL6EB.js";
-import {
-  tokenPocketWallet
-} from "./chunk-4C7ER452.js";
 import {
   tokenaryWallet
 } from "./chunk-34LO6Q7A.js";
@@ -30,8 +24,11 @@ import {
   xdefiWallet
 } from "./chunk-O7RSASRH.js";
 import {
-  rabbyWallet
-} from "./chunk-WFNPWKU3.js";
+  zealWallet
+} from "./chunk-HE2LMIPD.js";
+import {
+  tokenPocketWallet
+} from "./chunk-4C7ER452.js";
 import {
   rainbowWallet
 } from "./chunk-GSHSWVEG.js";
@@ -53,39 +50,42 @@ import {
 import {
   subWallet
 } from "./chunk-XBLHZICW.js";
+import {
+  tahoWallet
+} from "./chunk-4BMUFNMT.js";
 import {
   metaMaskWallet
 } from "./chunk-HETS3KKI.js";
 import {
-  mewWallet
-} from "./chunk-HKVDCVCG.js";
+  okxWallet
+} from "./chunk-LI6QY2B5.js";
 import {
   oktoWallet
 } from "./chunk-BVX22N7L.js";
 import {
-  okxWallet
-} from "./chunk-LI6QY2B5.js";
+  oneInchWallet
+} from "./chunk-RVWLP4IM.js";
 import {
   omniWallet
 } from "./chunk-INNF7G5X.js";
-import {
-  oneInchWallet
-} from "./chunk-RVWLP4IM.js";
 import {
   oneKeyWallet
 } from "./chunk-HE5J5T7X.js";
+import {
+  rabbyWallet
+} from "./chunk-WFNPWKU3.js";
 import {
   phantomWallet
 } from "./chunk-XMNVOYSJ.js";
 import {
   foxWallet
 } from "./chunk-53VYSPXK.js";
-import {
-  frameWallet
-} from "./chunk-WDTNOIMF.js";
 import {
   frontierWallet
 } from "./chunk-CJJT7LMT.js";
+import {
+  frameWallet
+} from "./chunk-WDTNOIMF.js";
 import {
   gateWallet
 } from "./chunk-7OARWILZ.js";
@@ -95,51 +95,51 @@ import {
 import {
   kresusWallet
 } from "./chunk-G4V5B6YC.js";
-import {
-  injectedWallet
-} from "./chunk-W6MXINYY.js";
 import {
   ledgerWallet
 } from "./chunk-WKCCLGHJ.js";
+import {
+  injectedWallet
+} from "./chunk-W6MXINYY.js";
 import {
   clvWallet
 } from "./chunk-GVOQTORD.js";
-import {
-  argentWallet
-} from "./chunk-VUOAIUZE.js";
 import {
   coin98Wallet
 } from "./chunk-6YO27XOM.js";
+import {
+  bitverseWallet
+} from "./chunk-GROWFRGP.js";
 import {
   coinbaseWallet
 } from "./chunk-RZXMOPIV.js";
 import {
   coreWallet
 } from "./chunk-GH4M6FTK.js";
-import {
-  dawnWallet
-} from "./chunk-TFVCCI2D.js";
 import {
   desigWallet
 } from "./chunk-JYVLYSH3.js";
+import {
+  dawnWallet
+} from "./chunk-TFVCCI2D.js";
 import {
   enkryptWallet
 } from "./chunk-W6TXXLCO.js";
+import {
+  argentWallet
+} from "./chunk-VUOAIUZE.js";
+import {
+  bitgetWallet
+} from "./chunk-HOPH3TQ3.js";
 import {
   bifrostWallet
 } from "./chunk-EKJHJFRN.js";
 import {
   bitskiWallet
 } from "./chunk-A7FNGC4A.js";
-import {
-  bitverseWallet
-} from "./chunk-GROWFRGP.js";
 import {
   bloomWallet
 } from "./chunk-UB2SSFH7.js";
-import {
-  bitgetWallet
-} from "./chunk-HOPH3TQ3.js";
 import {
   braveWallet
 } from "./chunk-ZRNBHLUU.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funkit/connect",
-  "version": "9.3.0",
+  "version": "9.3.2",
   "description": "Funkit Connect SDK elevates DeFi apps via web2 sign-ins and one-click checkouts.",
   "files": [
     "dist",
@@ -85,6 +85,7 @@
     "@bluvo/sdk-ts": "2.1.3",
     "@datadog/browser-logs": "5.22.0",
     "@number-flow/react": "^0.5.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.7",
     "@radix-ui/react-tooltip": "^1.2.0",
     "@solana/addresses": "^2.1.0",
     "@statsig/react-bindings": "^3.25.4",
@@ -102,10 +103,10 @@
     "ua-parser-js": "^1.0.37",
     "use-debounce": "^10.0.5",
     "uuid": "^9.0.1",
-    "@funkit/api-base": "3.0.1",
-    "@funkit/chains": "1.1.0",
+    "@funkit/api-base": "3.0.2",
     "@funkit/fun-relay": "2.6.3",
-    "@funkit/utils": "1.2.4"
+    "@funkit/utils": "1.2.4",
+    "@funkit/chains": "1.1.0"
   },
   "repository": {
     "type": "git",