@funkit/connect 8.1.0 → 8.2.1-next.0

package/CHANGELOG.md

@@ -1,5 +1,71 @@
 # @funkit/connect
 
+## 8.2.1-next.0
+
+### Patch Changes
+
+- 87c0f00: feat(connect): split decimal based on locale
+- 761464a: feat(connect): fanatics checkout history
+- 29ac86d: Add configurable props to custom source banner component
+- 203029c: feat(connect): add theme level control to set font size for you send you receive component
+- 4833bc1: Do not unnecessarily fetch Lighter accounts
+- ad0a860: fix(connect): input screen decimal color check
+- 9ffd984: feat(connect): ability to pass custom icons to payment method icons
+- d9821eb: swapped based use cash tab UI implementation
+- 2f4c5c2: feat(connect): add theme styling for cash crypto toggle
+- 9f3ff5c: fix(connect): transparent caret color bug
+- 0b0e4e8: fanatics modal mobile view improvements
+- 9f98ac4: feat(connect): add dynamic chain icon mask on FunAvatar component
+- 49376c3: fix: getBalance computation no longer relies on deprecated field
+- 0d1a649: feat(connect): customizable payment method icons
+- 38be23d: feat: new inputAmountFiatDecimalsColor theme variable
+- ce0e7ff: fix(connect): cdn url path
+- ff96c90: feat(connect): hide destination field in payment summary for simplifiedUi config
+- aabec47: feat(connect): ui customization to hide secondary token symbol on FunAssetItem
+- 1f1c515: chore(connect): fanatics confirmation step
+- cc8ed95: feat(connect): fanatics connect exchange screen
+- a677e72: refactor(connect): break up TransactionStatus into separate files
+- 52208da: fix(connect): fix stale value with flush sync
+- 5bba47b: fix(connect): update default theme value horizontal padding on confirmation screen
+- 0c04e6e: chore: deprecate unused hook useUsableWalletAssetsForCheckout
+- 2f67612: fix font sizes for fanatics
+- Updated dependencies [c939c70]
+- Updated dependencies [78f741f]
+  - @funkit/fun-relay@2.2.3-next.0
+  - @funkit/api-base@2.1.2-next.0
+
+## 8.2.0
+
+### Minor Changes
+
+- cf97880: Add client configuration exports with wildcard pattern support
+  - Add `/clients/*` export path in package.json for client configurations
+  - Create `src/clients/` directory with exportable client configurations
+  - Update build system to compile clients directory
+  - Enable easy integration via `@funkit/connect/clients/{client-name}` imports
+
+- cf97880: Add customTopComponent option to five checkout screens (SourceChange, SelectAsset, SelectBrokerage, ConnectExchange, TransferCrypto) allowing custom React components to be rendered at the top of each screen
+
+### Patch Changes
+
+- 95f245d: fix(connect): use stable isTokenEquivalent comparison in withdrawal
+- 3725dbf: Deprecate EnableBitcoin feature flag - Bitcoin is now enabled by default in token transfer configuration
+- f7bde29: feat: new disableLogging funkit config
+- be4569b:
+- 70fd67a: feat: add new customer
+- 967d7a6: Block Lighter customers from checkout when wallet is not connected. Shows "Your wallet is not connected" message instead of allowing checkout to proceed with invalid address.
+- 605738b: fix dollar sign position in hyperbeat meld flow
+- eae9077: feat(connect): proceed when selecting asset for fanatics
+- 56e62ef: feat(connect): add WithdrawalInfoBanner to withdrawal modal
+- ad7b142: feat(connect): implement two layer flag evaluation
+  feat(connect): migrate EnableMeldPayment flag to statsig
+- Updated dependencies [3725dbf]
+- Updated dependencies [70fd67a]
+- Updated dependencies [39a2171]
+- Updated dependencies [ad7b142]
+  - @funkit/utils@1.1.24
+  - @funkit/api-base@2.1.1
+
 ## 8.1.0
 
 ### Minor Changes
@@ -80,14 +146,12 @@
 - f4552b0: Expose recent deposits hooks for SDK users with comprehensive documentation
 
   Add two new public hooks for fetching recent deposits/direct executions:
-
   - `useFunkitRecentDeposits`: Auto-integrates with FunkitProvider context
   - `useFunkitRecentDepositsImpl`: Standalone implementation with explicit parameters
 
   Both hooks return purified checkout history items suitable for external use and include full JSDoc documentation with usage examples.
 
 - fa6cb1f: Add soft-close feature for checkout modal when transaction is in progress
-
   - When a transaction is in progress (checkoutProgress.step >= 1), the close button now hides the modal instead of closing it, preserving state
   - Added `useSoftHiddenCheckout` hook for managing soft-hidden checkout state
   - Added internal `onCheckoutConflict` handler to resolve conflicts when `beginCheckout` is called while a checkout is soft-hidden
@@ -261,7 +325,6 @@
 - f4552b0: Expose recent deposits hooks for SDK users with comprehensive documentation
 
   Add two new public hooks for fetching recent deposits/direct executions:
-
   - `useFunkitRecentDeposits`: Auto-integrates with FunkitProvider context
   - `useFunkitRecentDepositsImpl`: Standalone implementation with explicit parameters
 
@@ -390,7 +453,6 @@
 ### Minor Changes
 
 - fa6cb1f: Add soft-close feature for checkout modal when transaction is in progress
-
   - When a transaction is in progress (checkoutProgress.step >= 1), the close button now hides the modal instead of closing it, preserving state
   - Added `useSoftHiddenCheckout` hook for managing soft-hidden checkout state
   - Added internal `onCheckoutConflict` handler to resolve conflicts when `beginCheckout` is called while a checkout is soft-hidden
@@ -1023,12 +1085,10 @@
 - d307de8: Add support for custom withdrawal callbacks to enable server-side withdrawal processing
 
   Introduces a new withdrawal configuration type that allows customers (e.g., Kalshi) to handle withdrawals via callbacks instead of direct blockchain transactions. The withdrawal config now supports two modes:
-
   - Wallet-based (existing): Direct blockchain transactions via WithdrawalClient
   - Callback-based (new): Server-side processing via withdrawCallback function
 
   Key changes:
-
   - Split FunkitWithdrawalConfig into discriminated union types (WalletWithdrawalConfig, CustomWithdrawalConfig)
   - Add WithdrawalParam interface with quoteId and funQuote
   - Update withdrawal flow to route callback-based withdrawals to DirectExecutionNotifCenter (pending screen)
@@ -1108,12 +1168,10 @@
 - d307de8: Add support for custom withdrawal callbacks to enable server-side withdrawal processing
 
   Introduces a new withdrawal configuration type that allows customers (e.g., Kalshi) to handle withdrawals via callbacks instead of direct blockchain transactions. The withdrawal config now supports two modes:
-
   - Wallet-based (existing): Direct blockchain transactions via WithdrawalClient
   - Callback-based (new): Server-side processing via withdrawCallback function
 
   Key changes:
-
   - Split FunkitWithdrawalConfig into discriminated union types (WalletWithdrawalConfig, CustomWithdrawalConfig)
   - Add WithdrawalParam interface with quoteId and funQuote
   - Update withdrawal flow to route callback-based withdrawals to DirectExecutionNotifCenter (pending screen)
@@ -1467,7 +1525,6 @@
   This removes all EtherFi-related code including API keys, theme components, customer functions, and UI customizations. The EtherFi integration was marked as obsolete and has been completely removed from the codebase.
 
   **Breaking Changes:**
-
   - Removed `ETHERFI_API_KEY` constant from `@funkit/api-base`
   - Removed `isEtherFiCustomer` function from `@funkit/connect`
   - Removed `EtherFiIcon` component from `@funkit/connect`
@@ -3707,12 +3764,10 @@
 ### Patch Changes
 
 - 47087b4: Features
-
   1. Multichain asset display and checkout selection
   2. `textCustomizations` in `funkitConfig`
 
   Fixes
-
   1. Deprecate unsupported mesh brokerage options (Stash, ETrade)
   2. Fix EOA checkout initCode issue with new wrapper funWallet
   3. Fix EOA checkout wrapper funWallet regeneration on chain switch

package/dist/__generated__/default_configs.d.ts

@@ -2,9 +2,6 @@ declare const _default: {
     readonly addressblacklist: {
         readonly value: readonly ["0x7b97b46D35a28B561d47F50CFB9a2735E506e59d", "0x409ad08cc6CA757f69Fb80250a424B9eFeB99807", "0x02A86f51aA7B8b1c17c30364748d5Ae4a0727E23", "0x64131b60502C01362639CC5cfE1a1efB6Be1165A"];
     };
-    readonly array_of_strings: {
-        readonly value: readonly [];
-    };
     readonly blacklistedwithdrawaladdress: {
         readonly value: {
             readonly '0x2791bca1f2de4661ed88a30c99a7a9449aa84174': "USDC.e - Polygon";
@@ -30,9 +27,6 @@ declare const _default: {
     readonly blockedcountries: {
         readonly value: readonly ["AF", "BY", "MM", "CF", "CU", "CD", "IR", "LB", "LY", "NI", "KP", "UA", "SO", "SS", "SY", "VE"];
     };
-    readonly boolean: {
-        readonly value: false;
-    };
     readonly brokerage_hide_you_receive: {
         readonly value: false;
     };
@@ -390,5 +384,12 @@ declare const _default: {
             };
         }];
     };
+    readonly withdrawalinfobanner: {
+        readonly value: {
+            readonly message: "";
+            readonly expireAtMs: 0;
+            readonly type: "alert";
+        };
+    };
 };
 export default _default;

package/dist/{chunk-5GV4UXWB.js → chunk-FBCU3TQA.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   baseTheme
-} from "./chunk-RJAD5CZH.js";
+} from "./chunk-MGQZMUZ2.js";
 
 // src/themes/lightTheme.ts
 var accentColors = {
@@ -67,6 +67,9 @@ var lightTheme = ({
     inputBackground: "#FFFFFF",
     inputBorderBase: "#F0F0F0",
     inputBorderHover: "#E5E5E5",
+    // tab
+    activeTabBorderColor: "#F7F7F7",
+    activeTabBackground: "#F7F7F7",
     // button
     actionColor: "#000",
     actionColorHover: "rgba(0, 0, 0, 0.7)",
@@ -93,6 +96,7 @@ var lightTheme = ({
     buttonIconBackgroundHover: "#F7F7F7",
     buttonIconBackgroundPressed: "#F0F0F0",
     buttonIconStroke: "rgba(0, 0, 0, 0.35)",
+    buttonBorderTertiary: "transparent",
     buttonBorderFocusedTertiary: "rgba(0, 0, 0, 0.35)",
     buttonFocusedOutline: "none",
     buttonBorderGradient: "none",
@@ -107,6 +111,7 @@ var lightTheme = ({
     inputAmountQuickOptionHoverBorder: "rgba(0, 0, 0, 0.35)",
     inputAmountQuickOptionActiveBorder: "rgba(0, 0, 0, 0.35)",
     inputAmountQuickOptionFocusedBorder: "rgba(0, 0, 0, 0.35)",
+    inputAmountFiatDecimalsColor: customColors?.inputAmountFiatDecimalsColor ?? "none",
     youPayYouReceiveBackground: "#FFF",
     // modalBackground
     youPayYouReceiveBorder: "#F0F0F0",
@@ -153,8 +158,14 @@ var lightTheme = ({
     // Override colors
     ...customColors || {},
     // option Boxes
-    optionBoxBackground: customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#FFF"
+    optionBoxBackground: customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#FFF",
     // keeps gradient in SourcePaymentMethodItem if optionBoxBackground differs from modal background
+    optionBoxBackgroundUninteractive: customColors?.optionBoxBackgroundUninteractive ?? "transparent",
+    dropdownActiveItemBackgroundBase: customColors?.dropdownActiveItemBackgroundBase ?? customColors?.modalBackground ?? "#FFF",
+    dropdownActiveItemBackgroundHover: customColors?.dropdownActiveItemBackgroundHover ?? customColors?.offBackground ?? "#F7F7F7",
+    dropdownActiveItemBackgroundDisabled: customColors?.dropdownActiveItemBackgroundDisabled ?? "transparent",
+    txSummaryBoxBackground: customColors?.txSummaryBoxBackground ?? customColors?.modalBackground ?? "#FFF",
+    txSummaryBoxBorder: customColors?.txSummaryBoxBorder ?? customColors?.lightStroke ?? "#F7F7F7"
   },
   shadows: {
     connectButton: "0px 4px 12px rgba(0, 0, 0, 0.1)",

package/dist/{chunk-RJAD5CZH.js → chunk-MGQZMUZ2.js}

@@ -144,42 +144,86 @@ var baseTheme = ({
   customBorderRadiuses = radiusScales[borderRadius],
   customDimensions,
   customSpacings,
+  customTextTransforms,
   overlayBlur = "small"
 }) => ({
   blurs: {
     modalOverlay: blurs[overlayBlur].modalOverlay
   },
   dimensions: {
+    connectExchangeIconSize: "48px",
+    dollarValueSkeletonHeight: "60px",
+    inputAmountQuickOptionButtonHeight: "36px",
+    inputAmountMinHeight: "76px",
     modalBottomBarButtonHeight: "34px",
     modalTopBarHeight: "56px",
+    selectAssetItemIconSize: "24px",
     ...customDimensions
   },
   fonts: typeof customFontFamily === "string" ? {
+    body: customFontFamily,
     buttonTextPrimary: customFontFamily,
     buttonTextSecondary: customFontFamily,
     buttonTextTertiary: customFontFamily,
-    body: customFontFamily
+    header: customFontFamily,
+    inputAmount: customFontFamily,
+    txStatusDescription: customFontFamily,
+    txStatusTitle: customFontFamily
   } : {
+    body: fontStacks[fontStack],
     buttonTextPrimary: fontStacks[fontStack],
     buttonTextSecondary: fontStacks[fontStack],
     buttonTextTertiary: fontStacks[fontStack],
-    body: fontStacks[fontStack],
+    header: fontStacks[fontStack],
+    inputAmount: fontStacks[fontStack],
+    txStatusDescription: fontStacks[fontStack],
+    txStatusTitle: fontStacks[fontStack],
     ...customFontFamily
   },
   fontWeight: {
     ...DEFAULT_FONT_WEIGHTS,
+    inputAmount: DEFAULT_FONT_WEIGHTS.medium,
     modalTopbarTitle: DEFAULT_FONT_WEIGHTS.medium,
     modalBottomBarButtonText: DEFAULT_FONT_WEIGHTS.medium,
+    paymentMethodItemSubtitle: DEFAULT_FONT_WEIGHTS.regular,
+    paymentMethodItemTitle: DEFAULT_FONT_WEIGHTS.medium,
+    selectAssetItemSubtitle: DEFAULT_FONT_WEIGHTS.regular,
+    selectAssetItemTitle: DEFAULT_FONT_WEIGHTS.medium,
+    transferTokenLabelFontWeight: DEFAULT_FONT_WEIGHTS.medium,
+    txBreakdown: DEFAULT_FONT_WEIGHTS.regular,
+    txStatusDescription: DEFAULT_FONT_WEIGHTS.regular,
+    txStatusTitle: DEFAULT_FONT_WEIGHTS.medium,
+    txSummaryLabel: DEFAULT_FONT_WEIGHTS.medium,
+    txSummaryValue: DEFAULT_FONT_WEIGHTS.medium,
     ...customFontWeights
   },
   fontSize: {
     ...FONT_SIZINGS[fontSizing],
+    body: FONT_SIZINGS[fontSizing][14],
+    "header-14": { fontSize: "14px", lineHeight: "14px" },
+    "header-36": { fontSize: "36px", lineHeight: "36px" },
     buttonTextPrimary: FONT_SIZINGS[fontSizing][12],
     buttonTextSecondary: FONT_SIZINGS[fontSizing][10],
     buttonTextTertiary: FONT_SIZINGS[fontSizing][12],
+    dollarValue: FONT_SIZINGS[fontSizing][40],
+    inputAmount: FONT_SIZINGS[fontSizing][57],
     modalTopbarSubtitle: FONT_SIZINGS[fontSizing][10],
     modalTopbarTitle: FONT_SIZINGS[fontSizing][13],
     modalBottomBarButtonText: FONT_SIZINGS[fontSizing][12],
+    paymentMethodItemSubtitle: FONT_SIZINGS[fontSizing][12],
+    paymentMethodItemTitle: FONT_SIZINGS[fontSizing][12],
+    selectAssetItemSubtitle: FONT_SIZINGS[fontSizing][10],
+    selectAssetItemTitle: FONT_SIZINGS[fontSizing][13],
+    txBreakdown: FONT_SIZINGS[fontSizing][12],
+    txStatusDescription: FONT_SIZINGS[fontSizing][13],
+    txStatusTitle: FONT_SIZINGS[fontSizing][13],
+    txSummaryLabel: FONT_SIZINGS[fontSizing][12],
+    txSummaryValue: FONT_SIZINGS[fontSizing][12],
+    youPayYouReceivePrimaryFontSize: FONT_SIZINGS[fontSizing][12],
+    youPayYouReceiveSecondaryFontSize: FONT_SIZINGS[fontSizing][10],
+    transferTokenLabelFontSize: FONT_SIZINGS[fontSizing][12],
+    depositAddressFontSize: FONT_SIZINGS[fontSizing][10],
+    funFeatureListItemFontSize: FONT_SIZINGS[fontSizing][12],
     ...customFontSizings
   },
   radii: {
@@ -204,15 +248,37 @@ var baseTheme = ({
   },
   borderWidths: {
     activeOptionBorderWidth: "1px",
+    buttonTertiaryBorderWidth: "0px",
+    txSummaryBoxBorderWidth: "1px",
     ...customBorderWidths
   },
   spacing: {
+    confirmationStepMarginTop: "6px",
+    confirmationStepVerticalGap: "18px",
     modalBaseHorizontalPadding: "6px",
     modalBottomHorizontalPadding: "12px",
     modalPaddingBottomUpper: "16px",
     modalPaddingBottomLower: "16px",
     modalTopBarVerticalTextSpacing: "0px",
+    selectAssetItemPaddingX: "12px",
+    selectAssetItemPaddingY: "8px",
+    selectAssetItemTextGap: "0px",
+    selectBrokerageItemPaddingX: "12px",
+    selectBrokerageItemPaddingY: "11px",
+    txBreakdownMarginY: "18px",
+    txBreakdownPaddingX: "12px",
+    txSummaryBoxPaddingX: "12px",
+    txSummaryBoxPaddingY: "12px",
+    txSummaryLineItemPadding: "0px",
+    txSummaryDividerMarginX: "12px",
+    txSummaryDividerMarginY: "12px",
+    youPayYouReceivePaddingY: "8px",
     ...customSpacings
+  },
+  textTransforms: {
+    inputAmountQuickOptionButton: "none",
+    txStatusTitle: "none",
+    ...customTextTransforms
   }
 });
 

package/dist/{chunk-IVO7KGHT.js → chunk-OTMBU2BL.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   baseTheme
-} from "./chunk-RJAD5CZH.js";
+} from "./chunk-MGQZMUZ2.js";
 
 // src/themes/darkTheme.ts
 var accentColors = {
@@ -67,6 +67,9 @@ var darkTheme = ({
     inputBackground: "#000000",
     inputBorderBase: "#333333",
     inputBorderHover: "#525252",
+    // tab
+    activeTabBorderColor: "#333333",
+    activeTabBackground: "#333333",
     // button
     actionColor: "#FFF",
     actionColorHover: "rgba(255, 255, 255, 0.8)",
@@ -93,6 +96,7 @@ var darkTheme = ({
     buttonIconBackgroundHover: "#333333",
     buttonIconBackgroundPressed: "#333333",
     buttonIconStroke: "rgba(255, 255, 255, 0.35)",
+    buttonBorderTertiary: "transparent",
     buttonBorderFocusedTertiary: "rgba(255, 255, 255, 0.35)",
     buttonFocusedOutline: "none",
     buttonBorderGradient: "none",
@@ -107,6 +111,7 @@ var darkTheme = ({
     inputAmountQuickOptionHoverBorder: "rgba(255, 255, 255, 0.35)",
     inputAmountQuickOptionActiveBorder: "rgba(255, 255, 255, 0.35)",
     inputAmountQuickOptionFocusedBorder: "rgba(255, 255, 255, 0.35)",
+    inputAmountFiatDecimalsColor: customColors?.inputAmountFiatDecimalsColor ?? "none",
     youPayYouReceiveBackground: "#000000",
     // modalBackground
     youPayYouReceiveBorder: "#333333",
@@ -153,8 +158,14 @@ var darkTheme = ({
     // Override colors
     ...customColors || {},
     // option Boxes
-    optionBoxBackground: customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#000"
+    optionBoxBackground: customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#000",
     // keeps gradient in SourcePaymentMethodItem if optionBoxBackground differs from modal background
+    optionBoxBackgroundUninteractive: customColors?.optionBoxBackgroundUninteractive ?? "transparent",
+    dropdownActiveItemBackgroundBase: customColors?.dropdownActiveItemBackgroundBase ?? customColors?.modalBackground ?? "#000000",
+    dropdownActiveItemBackgroundHover: customColors?.dropdownActiveItemBackgroundHover ?? customColors?.offBackground ?? "#1F1F1F",
+    dropdownActiveItemBackgroundDisabled: customColors?.dropdownActiveItemBackgroundDisabled ?? "transparent",
+    txSummaryBoxBackground: customColors?.txSummaryBoxBackground ?? customColors?.modalBackground ?? "#000",
+    txSummaryBoxBorder: customColors?.txSummaryBoxBorder ?? customColors?.lightStroke ?? "#333333"
   },
   shadows: {
     connectButton: "0px 4px 12px rgba(0, 0, 0, 0.1)",