@funkit/connect 8.2.0 → 8.2.1-next.2

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # @funkit/connect
 
+## 8.2.1-next.2
+
+### Patch Changes
+
+- b7886e5: feat(connect): migrate EnableFiatDeposit flag to statsig
+- Updated dependencies [b7886e5]
+  - @funkit/utils@1.1.25-next.0
+  - @funkit/api-base@2.1.2-next.2
+
+## 8.2.1-next.1
+
+### Patch Changes
+
+- fcf7c8b: refactor(connect): select asset screen - minor refactor and breaking up into smaller components
+- 68d2aaf: feat(connect): add theme level variables to modal header icon buttons
+- 074e0f5: fix(connect): custom payment method icon for connected wallet users
+- d1a72f7: feat(connect): preload remote S3 url
+- 6cea746: feat(connect): add instant time estimate label via config
+- cade95a: geist mono font for amounts in fanatics theme
+- 7d6b623: new skeletons for fanatics
+- 88aed38: fix(connect): select asset screen - padding issue for navigateOnAssetClick variant
+- 14355da: feat(connect): ability to display step vs animated progress
+- Updated dependencies [4f6433f]
+  - @funkit/api-base@2.1.2-next.1
+
+## 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
@@ -120,7 +179,6 @@
   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
@@ -423,7 +481,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

package/dist/{chunk-WIDI2TYC.js → chunk-BP7VOYBS.js}

@@ -151,42 +151,70 @@ var baseTheme = ({
     modalOverlay: blurs[overlayBlur].modalOverlay
   },
   dimensions: {
+    connectExchangeIconSize: "48px",
+    dollarValueSkeletonHeight: "60px",
+    dollarValueSkeletonWidth: "160px",
     inputAmountQuickOptionButtonHeight: "36px",
     inputAmountMinHeight: "76px",
     modalBottomBarButtonHeight: "34px",
     modalTopBarHeight: "56px",
+    paymentAmountSkeletonBlockHeight: "10px",
+    paymentAmountSkeletonBlockWidth: "93px",
+    paymentAmountSkeletonCircleSize: "15px",
     selectAssetItemIconSize: "24px",
+    txBreakdownSkeletonWidth: "72px",
+    txSummaryLineSkeletonHeight: "14px",
+    txSummaryLineSkeletonWidth: "54px",
     ...customDimensions
   },
   fonts: typeof customFontFamily === "string" ? {
+    amountValue: customFontFamily,
     body: customFontFamily,
     buttonTextPrimary: customFontFamily,
     buttonTextSecondary: customFontFamily,
     buttonTextTertiary: customFontFamily,
-    inputAmount: customFontFamily
+    header: customFontFamily,
+    inputAmount: customFontFamily,
+    txStatusDescription: customFontFamily,
+    txStatusTitle: customFontFamily
   } : {
+    amountValue: fontStacks[fontStack],
     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 +223,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 +258,12 @@ var baseTheme = ({
   borderWidths: {
     activeOptionBorderWidth: "1px",
     buttonTertiaryBorderWidth: "0px",
+    txSummaryBoxBorderWidth: "1px",
     ...customBorderWidths
   },
   spacing: {
+    confirmationStepMarginTop: "6px",
+    confirmationStepVerticalGap: "18px",
     modalBaseHorizontalPadding: "6px",
     modalBottomHorizontalPadding: "12px",
     modalPaddingBottomUpper: "16px",
@@ -233,11 +274,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-KKGSXLMH.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   baseTheme
-} from "./chunk-WIDI2TYC.js";
+} from "./chunk-BP7VOYBS.js";
 
 // src/themes/darkTheme.ts
 var accentColors = {
@@ -51,6 +51,10 @@ var darkTheme = ({
     modalBackground: "#000000",
     modalBorder: "#292929",
     modalTopbarIcon: "#FFF",
+    modalTopbarIconBackground: customColors?.modalTopbarIconBackground ?? "transparent",
+    modalTopbarIconBackgroundHover: customColors?.modalTopbarIconBackgroundHover ?? customColors?.buttonIconBackgroundHover ?? "#333333",
+    modalTopbarIconBackgroundPressed: customColors?.modalTopbarIconBackgroundPressed ?? customColors?.buttonIconBackgroundPressed ?? "#333333",
+    modalTopbarIconStroke: customColors?.modalTopbarIconStroke ?? customColors?.buttonIconStroke ?? "rgba(255, 255, 255, 0.35)",
     offBackground: "#1F1F1F",
     offBackgroundInverse: "#F2F2F2",
     hoverState: "#333333",
@@ -67,6 +71,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 +115,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 +167,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)",

package/dist/{chunk-QHRAQNOB.js → chunk-MYPFORR2.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   baseTheme
-} from "./chunk-WIDI2TYC.js";
+} from "./chunk-BP7VOYBS.js";
 
 // src/themes/lightTheme.ts
 var accentColors = {
@@ -49,6 +49,10 @@ var lightTheme = ({
     // modal backgrounds
     modalBackdrop: "rgba(0, 0, 0, 0.2)",
     modalTopbarIcon: "#000",
+    modalTopbarIconBackground: customColors?.modalTopbarIconBackground ?? "transparent",
+    modalTopbarIconBackgroundHover: customColors?.modalTopbarIconBackgroundHover ?? customColors?.buttonIconBackgroundHover ?? "#F7F7F7",
+    modalTopbarIconBackgroundPressed: customColors?.modalTopbarIconBackgroundPressed ?? customColors?.buttonIconBackgroundPressed ?? "#F0F0F0",
+    modalTopbarIconStroke: customColors?.modalTopbarIconStroke ?? customColors?.buttonIconStroke ?? "rgba(0, 0, 0, 0.35)",
     modalBackground: "#FFF",
     modalBorder: "#F7F7F7",
     offBackground: "#F7F7F7",
@@ -67,6 +71,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 +115,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 +167,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)",