@funkit/connect 8.2.0 → 8.2.1-next.0

package/CHANGELOG.md

@@ -1,11 +1,44 @@
 # @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
@@ -113,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
@@ -294,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
 
@@ -423,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
@@ -1056,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)
@@ -1141,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)
@@ -1500,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`
@@ -3740,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/{chunk-QHRAQNOB.js → chunk-FBCU3TQA.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   baseTheme
-} from "./chunk-WIDI2TYC.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)",
@@ -108,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",
@@ -159,7 +163,9 @@ var lightTheme = ({
     optionBoxBackgroundUninteractive: customColors?.optionBoxBackgroundUninteractive ?? "transparent",
     dropdownActiveItemBackgroundBase: customColors?.dropdownActiveItemBackgroundBase ?? customColors?.modalBackground ?? "#FFF",
     dropdownActiveItemBackgroundHover: customColors?.dropdownActiveItemBackgroundHover ?? customColors?.offBackground ?? "#F7F7F7",
-    dropdownActiveItemBackgroundDisabled: customColors?.dropdownActiveItemBackgroundDisabled ?? "transparent"
+    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-WIDI2TYC.js → chunk-MGQZMUZ2.js}

@@ -151,6 +151,8 @@ var baseTheme = ({
     modalOverlay: blurs[overlayBlur].modalOverlay
   },
   dimensions: {
+    connectExchangeIconSize: "48px",
+    dollarValueSkeletonHeight: "60px",
     inputAmountQuickOptionButtonHeight: "36px",
     inputAmountMinHeight: "76px",
     modalBottomBarButtonHeight: "34px",
@@ -163,30 +165,47 @@ var baseTheme = ({
     buttonTextPrimary: customFontFamily,
     buttonTextSecondary: customFontFamily,
     buttonTextTertiary: customFontFamily,
-    inputAmount: customFontFamily
+    header: customFontFamily,
+    inputAmount: customFontFamily,
+    txStatusDescription: customFontFamily,
+    txStatusTitle: customFontFamily
   } : {
     body: fontStacks[fontStack],
     buttonTextPrimary: fontStacks[fontStack],
     buttonTextSecondary: fontStacks[fontStack],
     buttonTextTertiary: 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],
@@ -195,6 +214,16 @@ var baseTheme = ({
     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: {
@@ -220,9 +249,12 @@ var baseTheme = ({
   borderWidths: {
     activeOptionBorderWidth: "1px",
     buttonTertiaryBorderWidth: "0px",
+    txSummaryBoxBorderWidth: "1px",
     ...customBorderWidths
   },
   spacing: {
+    confirmationStepMarginTop: "6px",
+    confirmationStepVerticalGap: "18px",
     modalBaseHorizontalPadding: "6px",
     modalBottomHorizontalPadding: "12px",
     modalPaddingBottomUpper: "16px",
@@ -233,11 +265,19 @@ var baseTheme = ({
     selectAssetItemTextGap: "0px",
     selectBrokerageItemPaddingX: "12px",
     selectBrokerageItemPaddingY: "11px",
+    txBreakdownMarginY: "18px",
+    txBreakdownPaddingX: "12px",
+    txSummaryBoxPaddingX: "12px",
+    txSummaryBoxPaddingY: "12px",
+    txSummaryLineItemPadding: "0px",
+    txSummaryDividerMarginX: "12px",
+    txSummaryDividerMarginY: "12px",
     youPayYouReceivePaddingY: "8px",
     ...customSpacings
   },
   textTransforms: {
-    inputAmountQuickOptionButtonTextTransform: "none",
+    inputAmountQuickOptionButton: "none",
+    txStatusTitle: "none",
     ...customTextTransforms
   }
 });

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

@@ -1,7 +1,7 @@
 "use client";
 import {
   baseTheme
-} from "./chunk-WIDI2TYC.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)",
@@ -108,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",
@@ -159,7 +163,9 @@ var darkTheme = ({
     optionBoxBackgroundUninteractive: customColors?.optionBoxBackgroundUninteractive ?? "transparent",
     dropdownActiveItemBackgroundBase: customColors?.dropdownActiveItemBackgroundBase ?? customColors?.modalBackground ?? "#000000",
     dropdownActiveItemBackgroundHover: customColors?.dropdownActiveItemBackgroundHover ?? customColors?.offBackground ?? "#1F1F1F",
-    dropdownActiveItemBackgroundDisabled: customColors?.dropdownActiveItemBackgroundDisabled ?? "transparent"
+    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)",