@funkit/connect 9.3.0 → 9.3.1

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,11 +463,11 @@ 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;
@@ -467,6 +481,7 @@ export declare const useActiveTheme: () => {
             txSummaryDividerMarginX: string;
             txSummaryDividerMarginY: string;
             verticalSectionGap: string;
+            withdrawalModalPaddingTop: string;
             youPayYouReceivePaddingLeft: string;
             youPayYouReceivePaddingRight: string;
             youPayYouReceivePaddingY: string;
@@ -619,7 +634,6 @@ export declare const useActiveTheme: () => {
             selectedDropdownItemBackground: string;
             alwaysVisibleLabelBackgroundHover: string;
             selectedDropdownItemText: string;
-            dropdownLabelColor: string;
             copyButtonBackgroundBase: string;
             copyButtonBackgroundHover: string;
             copyButtonBackgroundActive: string;
@@ -638,6 +652,9 @@ export declare const useActiveTheme: () => {
             counterRingColor: string;
             cryptoCashToggleContainerBorderColor: string;
             cryptoCashToggleBackground: string;
+            withdrawalYouWillReceiveLabel: string;
+            withdrawalYouWillReceiveValueCrypto: string;
+            withdrawalYouWillReceiveValueUsd: string;
         };
         dimensions: {
             connectExchangeIconSize: string;
@@ -680,20 +697,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 +793,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 +849,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,11 +952,11 @@ 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;
@@ -941,6 +970,7 @@ export declare const useActiveTheme: () => {
             txSummaryDividerMarginX: string;
             txSummaryDividerMarginY: string;
             verticalSectionGap: string;
+            withdrawalModalPaddingTop: string;
             youPayYouReceivePaddingLeft: string;
             youPayYouReceivePaddingRight: string;
             youPayYouReceivePaddingY: string;
@@ -1091,7 +1121,6 @@ export declare const useActiveTheme: () => {
             selectedDropdownItemBackground: string;
             alwaysVisibleLabelBackgroundHover: string;
             selectedDropdownItemText: string;
-            dropdownLabelColor: string;
             copyButtonBackgroundBase: string;
             copyButtonBackgroundHover: string;
             copyButtonBackgroundActive: string;
@@ -1110,6 +1139,9 @@ export declare const useActiveTheme: () => {
             counterRingColor: string;
             cryptoCashToggleContainerBorderColor: string;
             cryptoCashToggleBackground: string;
+            withdrawalYouWillReceiveLabel: string;
+            withdrawalYouWillReceiveValueCrypto: string;
+            withdrawalYouWillReceiveValueUsd: string;
         };
         dimensions: {
             connectExchangeIconSize: string;
@@ -1152,20 +1184,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 +1280,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 +1336,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,11 +1439,11 @@ 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;
@@ -1413,6 +1457,7 @@ export declare const useActiveTheme: () => {
             txSummaryDividerMarginX: string;
             txSummaryDividerMarginY: string;
             verticalSectionGap: string;
+            withdrawalModalPaddingTop: string;
             youPayYouReceivePaddingLeft: string;
             youPayYouReceivePaddingRight: string;
             youPayYouReceivePaddingY: string;

package/dist/themes/baseTheme.js

@@ -2,7 +2,7 @@
 import {
   baseTheme,
   systemFontStack
-} from "../chunk-TWG76V3I.js";
+} from "../chunk-JKGPN2BQ.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-WXEL44DS.js";
+import "../chunk-JKGPN2BQ.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-VIJQ5A6W.js";
+import "../chunk-JKGPN2BQ.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
  */
@@ -41,5 +40,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

@@ -8,12 +8,12 @@ import {
 import {
   tahoWallet
 } from "./chunk-4BMUFNMT.js";
-import {
-  talismanWallet
-} from "./chunk-6MFOL6EB.js";
 import {
   tokenPocketWallet
 } from "./chunk-4C7ER452.js";
+import {
+  talismanWallet
+} from "./chunk-6MFOL6EB.js";
 import {
   tokenaryWallet
 } from "./chunk-34LO6Q7A.js";
@@ -38,18 +38,18 @@ import {
 import {
   ramperWallet
 } from "./chunk-R4S234FL.js";
-import {
-  roninWallet
-} from "./chunk-PKMAPNN6.js";
 import {
   safeWallet
 } from "./chunk-YKVWTGU7.js";
 import {
-  safeheronWallet
-} from "./chunk-4R4AARTG.js";
+  roninWallet
+} from "./chunk-PKMAPNN6.js";
 import {
   safepalWallet
 } from "./chunk-IICWJWGZ.js";
+import {
+  safeheronWallet
+} from "./chunk-4R4AARTG.js";
 import {
   subWallet
 } from "./chunk-XBLHZICW.js";
@@ -80,73 +80,73 @@ import {
 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";
 import {
   imTokenWallet
 } from "./chunk-IUVO4IN3.js";
-import {
-  kresusWallet
-} from "./chunk-G4V5B6YC.js";
 import {
   injectedWallet
 } from "./chunk-W6MXINYY.js";
 import {
   ledgerWallet
 } from "./chunk-WKCCLGHJ.js";
+import {
+  kresusWallet
+} from "./chunk-G4V5B6YC.js";
 import {
   clvWallet
 } from "./chunk-GVOQTORD.js";
-import {
-  argentWallet
-} from "./chunk-VUOAIUZE.js";
 import {
   coin98Wallet
 } from "./chunk-6YO27XOM.js";
+import {
+  bybitWallet
+} from "./chunk-6UCI7GM6.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 {
   bifrostWallet
 } from "./chunk-EKJHJFRN.js";
 import {
-  bitskiWallet
-} from "./chunk-A7FNGC4A.js";
+  bitgetWallet
+} from "./chunk-HOPH3TQ3.js";
 import {
   bitverseWallet
 } from "./chunk-GROWFRGP.js";
+import {
+  bitskiWallet
+} from "./chunk-A7FNGC4A.js";
 import {
   bloomWallet
 } from "./chunk-UB2SSFH7.js";
-import {
-  bitgetWallet
-} from "./chunk-HOPH3TQ3.js";
+import "./chunk-MAPXJUOO.js";
 import {
   braveWallet
 } from "./chunk-ZRNBHLUU.js";
-import {
-  bybitWallet
-} from "./chunk-6UCI7GM6.js";
-import "./chunk-MAPXJUOO.js";
 import "./chunk-BAVE62IL.js";
 import "./chunk-KV4HGYM3.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funkit/connect",
-  "version": "9.3.0",
+  "version": "9.3.1",
   "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,7 +103,7 @@
     "ua-parser-js": "^1.0.37",
     "use-debounce": "^10.0.5",
     "uuid": "^9.0.1",
-    "@funkit/api-base": "3.0.1",
+    "@funkit/api-base": "3.0.2",
     "@funkit/chains": "1.1.0",
     "@funkit/fun-relay": "2.6.3",
     "@funkit/utils": "1.2.4"