@funkit/connect 9.2.1 → 9.3.1

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @funkit/connect
 
+## 9.3.1
+
+### Patch Changes
+
+- a77a0a4: feat(connect): show Unavailable badge for geo-blocked payment methods
+- 20f61a0: fix see less text cut off bug
+- a940837: move dropdown to radix ui based implementation
+- 6e3659e: feat: swapped theme edits
+- 06c289a: feat(connect): fanatics withdrawal custom top component
+- 99bcd33: withdrawal max button minimum amount check bug fixed
+- a3e31d3: fix: swapped loader skeleton
+- 466f42d: fix primary button bg mismatch with swapped
+- Updated dependencies [26aca0f]
+  - @funkit/api-base@3.0.2
+
+## 9.3.0
+
+### Minor Changes
+
+- 9c6f62c: feat(connect): use native icons for common Swapped payment methods
+
+### Patch Changes
+
+- 3b3ae60: lighter swapped ui integration part 2
+- d080351: Fix bottom bar layout thrash during checkout complete transition for themed customers
+- 369e926: feat(connect): FOP native logos
+- 50d6d54: chore: swapped file clean up and name change
+- e7c3f9b: opinion theme feedback updates
+- ef5102d: remove false alarm error logging for quote
+- 76ffacf: fix(connect): swapped icon theme comparison
+- 98167fb: feat(connect,api-base): preload single iframe vs iframe pool
+- 6d05d1e: change stakingToken to finalizedToken
+- ce0747d: fix(connect): update swapped icons based on active theme
+- f85ec7b: opinion theme feedbacks second round
+- Updated dependencies [98167fb]
+  - @funkit/api-base@3.0.1
+
 ## 9.2.1
 
 ### Patch Changes

package/dist/__generated__/default_configs.d.ts

@@ -283,6 +283,9 @@ declare const _default: {
     readonly enablemeldpayment: {
         readonly value: false;
     };
+    readonly enablesourcegrouplabels: {
+        readonly value: true;
+    };
     readonly enableswappeddeposit: {
         readonly value: false;
     };
@@ -303,6 +306,19 @@ declare const _default: {
         readonly value: true;
     };
     readonly foppriority: {
+        readonly variants: readonly [{
+            readonly condition: {
+                readonly type: "country";
+                readonly countryCodes: readonly ["BR"];
+            };
+            readonly value: readonly ["PIX", "CARDS", "APPLE_PAY", "GOOGLE_PAY", "REVOLUT_PAY", "PAYPAL", "BANK_TRANSFER", "SKRILL"];
+        }, {
+            readonly condition: {
+                readonly type: "country";
+                readonly countryCodes: readonly ["IN"];
+            };
+            readonly value: readonly ["GOOGLE_PAY", "APPLE_PAY", "REVOLUT_PAY", "PAYPAL", "BANK_TRANSFER", "PIX", "SKRILL", "CARDS"];
+        }];
         readonly value: readonly ["CARDS", "APPLE_PAY", "GOOGLE_PAY", "REVOLUT_PAY", "PAYPAL", "BANK_TRANSFER", "PIX", "SKRILL"];
     };
     readonly ischeckoutactivated: {
@@ -413,13 +429,26 @@ declare const _default: {
     };
     readonly tokentransferchaingroups: {
         readonly value: {
-            readonly popular: readonly [1151111081099710, 1, 728126428];
+            readonly popular: readonly [];
+        };
+    };
+    readonly tokentransfertest: {
+        readonly value: {
+            readonly chains: {
+                readonly '1': readonly ["0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48", "0x6b175474e89094c44da98b954eedeac495271d0f", "0xdac17f958d2ee523a2206206994597c13d831ec7", "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee"];
+                readonly '137': readonly ["0x3c499c542cef5e3811e1192ce70d8cc03d5c3359", "0x2791bca1f2de4661ed88a30c99a7a9449aa84174"];
+                readonly '1151111081099710': readonly ["So11111111111111111111111111111111111111112", "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v"];
+            };
+            readonly defaultChainId: 137;
+            readonly defaultTokens: readonly [];
+            readonly badges: {};
+            readonly chainSortOrder: readonly ["1", "1151111081099710", "56", "8453", "137", "42161", "10"];
         };
     };
     readonly tokentransfertokengroups: {
         readonly value: {
             readonly popular: readonly [];
-            readonly stablecoins: readonly ["BUSD", "DAI", "USDC", "USDC.e", "USDe", "USDT"];
+            readonly stablecoins: readonly [];
         };
     };
     readonly uda_params: {

package/dist/__generated__/default_feature_gates.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+    readonly 'exact-in': false;
     readonly 'test-testing-gate': false;
 };
 export default _default;

package/dist/{chunk-3U6TWV25.js → chunk-JKGPN2BQ.js}

@@ -26,7 +26,8 @@ var radiusScales = {
     dropdownItem: "4px",
     dropdownList: "12px",
     modalTopbarIcon: "9999px",
-    withdrawalInput: "12px"
+    withdrawalInput: "12px",
+    useConnected: "8px"
   },
   medium: {
     actionButton: "10px",
@@ -46,7 +47,8 @@ var radiusScales = {
     dropdownItem: "4px",
     dropdownList: "10px",
     modalTopbarIcon: "9999px",
-    withdrawalInput: "10px"
+    withdrawalInput: "10px",
+    useConnected: "8px"
   },
   none: {
     actionButton: "0px",
@@ -66,7 +68,8 @@ var radiusScales = {
     dropdownItem: "0px",
     dropdownList: "0px",
     modalTopbarIcon: "0px",
-    withdrawalInput: "0px"
+    withdrawalInput: "0px",
+    useConnected: "0px"
   },
   small: {
     actionButton: "8px",
@@ -86,7 +89,8 @@ var radiusScales = {
     dropdownItem: "4px",
     dropdownList: "8px",
     modalTopbarIcon: "9999px",
-    withdrawalInput: "8px"
+    withdrawalInput: "8px",
+    useConnected: "8px"
   }
 };
 var blurs = {
@@ -182,6 +186,7 @@ var baseTheme = ({
     paymentAmountSkeletonCircleSize: "15px",
     paymentMethodItemIconSize: "20px",
     selectAssetItemIconSize: "24px",
+    sourceListGap: "4px",
     txBreakdownSkeletonWidth: "72px",
     txSummaryLineSkeletonHeight: "14px",
     txSummaryLineSkeletonWidth: "54px",
@@ -214,20 +219,24 @@ var baseTheme = ({
     ...DEFAULT_FONT_WEIGHTS,
     cryptoCashToggle: DEFAULT_FONT_WEIGHTS.medium,
     inputAmount: DEFAULT_FONT_WEIGHTS.medium,
+    inputLabel: DEFAULT_FONT_WEIGHTS.medium,
+    inputValue: 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,
+    sourceListSectionLabelFontWeight: 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,
-    sourceListSectionLabelFontWeight: DEFAULT_FONT_WEIGHTS.medium,
     formOfPaymentsListSectionLabelFontWeight: DEFAULT_FONT_WEIGHTS.medium,
+    withdrawalYouWillReceiveLabel: DEFAULT_FONT_WEIGHTS.regular,
+    withdrawalYouWillReceiveValueCrypto: DEFAULT_FONT_WEIGHTS.medium,
+    withdrawalYouWillReceiveValueUsd: DEFAULT_FONT_WEIGHTS.regular,
     ...customFontWeights
   },
   fontSize: {
@@ -241,6 +250,8 @@ var baseTheme = ({
     buttonTextTertiary: FONT_SIZINGS[fontSizing][12],
     dollarValue: FONT_SIZINGS[fontSizing][40],
     inputAmount: FONT_SIZINGS[fontSizing][57],
+    inputLabel: customFontSizings[12] ?? FONT_SIZINGS[fontSizing][12],
+    inputValue: customFontSizings[13] ?? FONT_SIZINGS[fontSizing][13],
     modalTopbarSubtitle: FONT_SIZINGS[fontSizing][10],
     modalTopbarTitle: FONT_SIZINGS[fontSizing][13],
     modalBottomBarButtonText: FONT_SIZINGS[fontSizing][12],
@@ -253,14 +264,16 @@ var baseTheme = ({
     txStatusTitle: FONT_SIZINGS[fontSizing][13],
     txSummaryLabel: FONT_SIZINGS[fontSizing][12],
     txSummaryValue: FONT_SIZINGS[fontSizing][12],
+    withdrawalYouWillReceive: customFontSizings[12] ?? 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],
     dropdownItemFontSize: FONT_SIZINGS[fontSizing][12],
     sourceListSectionLabelFontSize: FONT_SIZINGS[fontSizing][12],
     formOfPaymentsListSectionLabelFontSize: FONT_SIZINGS[fontSizing][12],
+    quickOptionFontSize: FONT_SIZINGS[fontSizing][14],
+    useConnectedFontSize: FONT_SIZINGS[fontSizing][12],
     ...customFontSizings
   },
   radii: {
@@ -283,6 +296,7 @@ var baseTheme = ({
     dropdownList: customBorderRadiuses?.dropdownList ?? customBorderRadiuses?.dropdown ?? radiusScales[borderRadius].dropdown,
     modalTopbarIcon: radiusScales[borderRadius].modalTopbarIcon,
     withdrawalInput: radiusScales[borderRadius].withdrawalInput,
+    useConnected: radiusScales[borderRadius].useConnected,
     ...customBorderRadiuses
   },
   borderWidths: {
@@ -318,9 +332,14 @@ var baseTheme = ({
     txSummaryDividerMarginX: "12px",
     txSummaryDividerMarginY: "12px",
     verticalSectionGap: "18px",
+    withdrawalModalPaddingTop: "12px",
     youPayYouReceivePaddingLeft: "12px",
     youPayYouReceivePaddingRight: "16px",
     youPayYouReceivePaddingY: "8px",
+    inputPaddingX: "12px",
+    inputPaddingY: "12px",
+    dropdownActiveItemRegularSizePaddingY: "8px",
+    assetListDefaultGap: "4px",
     ...customSpacings
   },
   textTransforms: {

package/dist/{chunk-P6FYL3PM.js → chunk-VIJQ5A6W.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   baseTheme
-} from "./chunk-3U6TWV25.js";
+} from "./chunk-JKGPN2BQ.js";
 
 // src/themes/lightTheme.ts
 var accentColors = {
@@ -20,6 +20,7 @@ var lightTheme = ({
   customColors,
   customShadows,
   ...baseThemeOptions
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: just a bunch of ?? defaults
 } = {}) => ({
   ...baseTheme(baseThemeOptions),
   colors: {
@@ -68,9 +69,21 @@ var lightTheme = ({
     tertiaryText: "rgba(0, 0, 0, 0.35)",
     textSelection: "rgba(0, 0, 0, 0.10)",
     selectedDropdownItemText: customColors?.primaryText ?? "#000",
+    copyButtonBackgroundBase: customColors?.offBackground ?? "#F7F7F7",
+    copyButtonBackgroundHover: customColors?.hoverState ?? "#F0F0F0",
+    copyButtonBackgroundActive: customColors?.inputBorderHover ?? "#E5E5E5",
+    copyButtonBorderBase: customColors?.mediumStroke ?? "#F0F0F0",
+    copyButtonBorderHover: customColors?.mediumStroke ?? "#F0F0F0",
+    funFeatureListBackgroundBase: customColors?.offBackground ?? "#F7F7F7",
+    funFeatureListBackgroundHover: customColors?.hoverState ?? "#F0F0F0",
+    funFeatureListBorderColor: "transparent",
+    funFeatureListBorderColorHover: "transparent",
     selectedDropdownItemBackground: "transparent",
+    alwaysVisibleLabelBackgroundHover: "transparent",
     // input
+    inputLabel: customColors?.primaryText ?? "#000",
     inputBackground: "#FFFFFF",
+    inputBackgroundHover: customColors?.offBackground ?? "#F7F7F7",
     inputBorderBase: "#F0F0F0",
     inputBorderHover: "#E5E5E5",
     // tab
@@ -126,6 +139,9 @@ var lightTheme = ({
     // primaryText
     youPayYouReceiveSecondaryText: "#737373",
     // secondaryText
+    withdrawalYouWillReceiveLabel: customColors?.withdrawalYouWillReceiveLabel ?? customColors?.primaryText ?? "#000",
+    withdrawalYouWillReceiveValueCrypto: customColors?.withdrawalYouWillReceiveValueCrypto ?? customColors?.primaryText ?? "#000",
+    withdrawalYouWillReceiveValueUsd: customColors?.withdrawalYouWillReceiveValueUsd ?? customColors?.secondaryText ?? "#737373",
     // badges
     badgeBackgroundSuccess: "rgba(124, 242, 136, 0.1)",
     badgeBorderSuccess: "rgba(124, 242, 136, 0.2)",
@@ -167,11 +183,16 @@ var lightTheme = ({
     optionBoxBackground: customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#FFF",
     // keeps gradient in SourcePaymentMethodItem if optionBoxBackground differs from modal background
     optionBoxBackgroundUninteractive: customColors?.optionBoxBackgroundUninteractive ?? "transparent",
+    optionBoxBorderBase: customColors?.optionBoxBorderBase ?? customColors?.mediumStroke ?? "#F0F0F0",
     optionBoxBorderHover: customColors?.optionBoxBorderHover ?? customColors?.mediumStroke ?? "#F0F0F0",
+    optionBoxDefaultModeNotActiveBorderBase: customColors?.optionBoxDefaultModeNotActiveBorderBase ?? "transparent",
+    optionBoxDefaultModeNotActiveBorderHover: customColors?.optionBoxDefaultModeNotActiveBorderHover ?? "transparent",
     dropdownActiveItemBackgroundBase: customColors?.dropdownActiveItemBackgroundBase ?? customColors?.modalBackground ?? "#FFF",
     openDropdownBackgroundColor: customColors?.openDropdownBackgroundColor ?? customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#FFF",
     dropdownActiveItemBackgroundHover: customColors?.dropdownActiveItemBackgroundHover ?? customColors?.offBackground ?? "#F7F7F7",
     dropdownActiveItemBackgroundDisabled: customColors?.dropdownActiveItemBackgroundDisabled ?? "transparent",
+    dropdownActiveItemBorderBase: customColors?.dropdownActiveItemBorderBase ?? customColors?.mediumStroke ?? "#F0F0F0",
+    dropdownActiveItemBorderHover: customColors?.dropdownActiveItemBorderHover ?? customColors?.mediumStroke ?? "#F0F0F0",
     txSummaryBoxBackground: customColors?.txSummaryBoxBackground ?? customColors?.modalBackground ?? "#FFF",
     txSummaryBoxBorder: customColors?.txSummaryBoxBorder ?? customColors?.lightStroke ?? "#F7F7F7",
     counterRingColor: customColors?.counterRingColor ?? accentColor,

package/dist/{chunk-VLXKSNSJ.js → chunk-WXEL44DS.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   baseTheme
-} from "./chunk-3U6TWV25.js";
+} from "./chunk-JKGPN2BQ.js";
 
 // src/themes/darkTheme.ts
 var accentColors = {
@@ -20,6 +20,7 @@ var darkTheme = ({
   customColors,
   customShadows,
   ...baseThemeOptions
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: just a bunch of ?? defaults
 } = {}) => ({
   ...baseTheme(baseThemeOptions),
   colors: {
@@ -68,9 +69,21 @@ var darkTheme = ({
     tertiaryText: "rgba(255, 255, 255, 0.35)",
     textSelection: "rgba(255, 255, 255, 0.10)",
     selectedDropdownItemText: customColors?.primaryText ?? "#FFF",
+    copyButtonBackgroundBase: customColors?.offBackground ?? "#1F1F1F",
+    copyButtonBackgroundHover: customColors?.hoverState ?? "#333333",
+    copyButtonBackgroundActive: customColors?.inputBorderHover ?? "#525252",
+    copyButtonBorderBase: customColors?.mediumStroke ?? "#333333",
+    copyButtonBorderHover: customColors?.mediumStroke ?? "#333333",
+    funFeatureListBackgroundBase: customColors?.offBackground ?? "#1F1F1F",
+    funFeatureListBackgroundHover: customColors?.hoverState ?? "#333333",
+    funFeatureListBorderColor: "transparent",
+    funFeatureListBorderColorHover: "transparent",
     selectedDropdownItemBackground: "transparent",
+    alwaysVisibleLabelBackgroundHover: "transparent",
     // input
+    inputLabel: customColors?.primaryText ?? "#FFF",
     inputBackground: "#000000",
+    inputBackgroundHover: customColors?.offBackground ?? "#1F1F1F",
     inputBorderBase: "#333333",
     inputBorderHover: "#525252",
     // tab
@@ -126,6 +139,9 @@ var darkTheme = ({
     // primaryText
     youPayYouReceiveSecondaryText: "#8C8C8C",
     // secondaryText
+    withdrawalYouWillReceiveLabel: customColors?.withdrawalYouWillReceiveLabel ?? customColors?.primaryText ?? "#FFF",
+    withdrawalYouWillReceiveValueCrypto: customColors?.withdrawalYouWillReceiveValueCrypto ?? customColors?.primaryText ?? "#FFF",
+    withdrawalYouWillReceiveValueUsd: customColors?.withdrawalYouWillReceiveValueUsd ?? customColors?.secondaryText ?? "#8C8C8C",
     // badges
     badgeBackgroundSuccess: "rgba(124, 242, 136, 0.1)",
     badgeBorderSuccess: "rgba(124, 242, 136, 0.2)",
@@ -167,11 +183,16 @@ var darkTheme = ({
     optionBoxBackground: customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#000",
     // keeps gradient in SourcePaymentMethodItem if optionBoxBackground differs from modal background
     optionBoxBackgroundUninteractive: customColors?.optionBoxBackgroundUninteractive ?? "transparent",
+    optionBoxBorderBase: customColors?.optionBoxBorderBase ?? customColors?.mediumStroke ?? "#333333",
     optionBoxBorderHover: customColors?.optionBoxBorderHover ?? customColors?.mediumStroke ?? "#333333",
+    optionBoxDefaultModeNotActiveBorderBase: customColors?.optionBoxDefaultModeNotActiveBorderBase ?? "transparent",
+    optionBoxDefaultModeNotActiveBorderHover: customColors?.optionBoxDefaultModeNotActiveBorderHover ?? "transparent",
     dropdownActiveItemBackgroundBase: customColors?.dropdownActiveItemBackgroundBase ?? customColors?.modalBackground ?? "#000000",
     openDropdownBackgroundColor: customColors?.openDropdownBackgroundColor ?? customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#000",
     dropdownActiveItemBackgroundHover: customColors?.dropdownActiveItemBackgroundHover ?? customColors?.offBackground ?? "#1F1F1F",
     dropdownActiveItemBackgroundDisabled: customColors?.dropdownActiveItemBackgroundDisabled ?? "transparent",
+    dropdownActiveItemBorderBase: customColors?.dropdownActiveItemBorderBase ?? customColors?.mediumStroke ?? "#333333",
+    dropdownActiveItemBorderHover: customColors?.dropdownActiveItemBorderHover ?? customColors?.mediumStroke ?? "#333333",
     txSummaryBoxBackground: customColors?.txSummaryBoxBackground ?? customColors?.modalBackground ?? "#000",
     txSummaryBoxBorder: customColors?.txSummaryBoxBorder ?? customColors?.lightStroke ?? "#333333",
     counterRingColor: customColors?.counterRingColor ?? accentColor,