@funkit/connect 8.5.0 → 8.6.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @funkit/connect
 
+## 8.6.0
+
+### Minor Changes
+
+- 642bccf: feat(connect): add custom zIndex option to uiCustomizations
+
+### Patch Changes
+
+- b67b352: feat(connect): show FOP limits and add sorting logic
+- 92c5160: feat(connect): withdrawal modal height animation
+- 7e0be42: feat(connect): add source change tab switch animation
+- ac86825: map color tokens to swapped specific tokens
+- 9037307: feat(connect): update form of payment section labels
+- 5418bb4: Fix price impact display showing '< 0.01%' for negative values
+- 4551e78: pass countryCode to fops endpoint
+- 571848a: feat(connect): update swapped skeleton
+- 2eea062: bump dependencies version
+- 1c63698: fix(connect): fops loading state
+- c70ce2f: fix: swapped quick options border radius
+- ebd1dd5: fix(connect): source change loading skeleteon
+- 0059926: feat(connect): add polygon rpc check
+- 519dbc2: Remove unused getRecommendedAsset function and related helpers from wallet domain.
+- 0dd2099: set secondarybutton colors for swapped
+- d211c37: fix(connect): format saved payment method names + icons
+- 9eaa24a: refactor(connect): simplify swapped iframe memo
+- 2b1c38d: Rename enableswapped statsig flag to enableswappeddeposit and add new enableswappedwithdrawal flag
+- b6bcd2b: fix: swapped quick options styling
+- Updated dependencies [b67b352]
+- Updated dependencies [ae1df7e]
+- Updated dependencies [4551e78]
+- Updated dependencies [2eea062]
+- Updated dependencies [d211c37]
+  - @funkit/api-base@2.3.1
+  - @funkit/fun-relay@2.6.1
+  - @funkit/utils@1.2.3
+
 ## 8.5.0
 
 ### Minor Changes

package/dist/__generated__/default_configs.d.ts

@@ -283,7 +283,10 @@ declare const _default: {
     readonly enablemeldpayment: {
         readonly value: false;
     };
-    readonly enableswapped: {
+    readonly enableswappeddeposit: {
+        readonly value: false;
+    };
+    readonly enableswappedwithdrawal: {
         readonly value: false;
     };
     readonly enabletokentransfer: {

package/dist/{chunk-G4ZF44OO.js → chunk-EPHOZPMR.js}

@@ -133,6 +133,12 @@ var FONT_SIZINGS = {
     "57": { fontSize: "50px", lineHeight: "60px" }
   }
 };
+var nestedModalZIndexes = {
+  coinbase: 2147483647,
+  walletConnect: 99999999999999,
+  privy: 999999
+};
+var DEFAULT_MODAL_Z_INDEX = Math.min(...Object.values(nestedModalZIndexes)) - 2;
 var baseTheme = ({
   borderRadius = "large",
   fontStack = "fun",
@@ -145,8 +151,10 @@ var baseTheme = ({
   customDimensions,
   customSpacings,
   customTextTransforms,
-  overlayBlur = "small"
+  overlayBlur = "small",
+  modalZIndex = DEFAULT_MODAL_Z_INDEX
 }) => ({
+  modalZIndex: String(modalZIndex),
   blurs: {
     modalOverlay: blurs[overlayBlur].modalOverlay
   },

package/dist/{chunk-K4YHIQ6O.js → chunk-FZZF5FGD.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   baseTheme
-} from "./chunk-G4ZF44OO.js";
+} from "./chunk-EPHOZPMR.js";
 
 // src/themes/darkTheme.ts
 var accentColors = {

package/dist/{chunk-GOGXF6NC.js → chunk-NAHADAYF.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   baseTheme
-} from "./chunk-G4ZF44OO.js";
+} from "./chunk-EPHOZPMR.js";
 
 // src/themes/lightTheme.ts
 var accentColors = {

package/dist/clients/fanatics.css

@@ -3172,7 +3172,6 @@
   width: var(--rk-dimensions-txSummaryLineSkeletonWidth);
 }
 [data-rk] ._1rsrm2fsh {
-  -webkit-backdrop-filter: var(--rk-blurs-modalOverlay);
   backdrop-filter: var(--rk-blurs-modalOverlay);
 }
 [data-rk] ._1rsrm2fsi {

package/dist/components/ConnectButton/abbreviateETHBalance.d.ts

@@ -1,2 +1 @@
-export declare function toPrecision(number: number, precision?: number): string;
 export declare function abbreviateETHBalance(number: number): string;

package/dist/components/Dialog/Dialog.css.d.ts

@@ -1,7 +1,6 @@
 export declare const easing: number[];
 export declare const DialogAnimationTimeIn = 0.25;
 export declare const DialogAnimationTimeOut = 0.12;
-export declare const FunModalZIndex: number;
 export declare const overlay: string;
 export declare const content: string;
 export declare const titleContainer: string;

package/dist/components/FunNotification/FunNotification.d.ts

@@ -7,7 +7,7 @@ interface FunNotificationProps {
     isVisible?: boolean;
     testId?: string;
 }
-export type FunNotificationType = 'default' | 'error' | 'warning' | 'hint';
+export type FunNotificationType = 'default' | 'error' | 'warning' | 'hint' | 'warningAlert';
 export interface ErrorNotification {
     message: ReactNode;
     type: FunNotificationType;
@@ -16,5 +16,5 @@ export interface ErrorNotification {
  * A notification/message component with height resizing animation.
  * Control visibility by enabling/disabling `isVisible` prop instead of doing an outer conditional rendering.
  */
-export declare function FunNotification({ type, description, actionText, onAction, isVisible: isVisibleProps, testId, }: FunNotificationProps): React.JSX.Element;
+export declare function FunNotification({ type, description, actionText, onAction, isVisible: isVisibleProps, testId, }: FunNotificationProps): React.JSX.Element | null;
 export {};

package/dist/components/FunPayments/FunPaymentMethods.d.ts

@@ -57,7 +57,8 @@ export declare function PayPalPaymentMethodItem({ isActive, isClickable, onClick
 /**
  * Payment method item for a Form of Payment from the fops API (Swapped providers)
  */
-export declare function FopPaymentMethodItem({ fop, isActive, onClick, testId, }: BasePaymentMethodItemProps & {
+export declare function FopPaymentMethodItem({ fop, isActive, onClick, testId, disclaimerLimit, }: BasePaymentMethodItemProps & {
     fop: SwappedFormOfPayment;
+    disclaimerLimit: string;
 }): React.JSX.Element;
 export {};

package/dist/components/Icons/{New/BlueCircularWalletIcon.d.ts → FunWarningIcon.d.ts}

@@ -1,4 +1,4 @@
 import React from 'react';
-export declare const BlueCircularWalletIcon: ({ size }: {
+export declare const FunWarningIcon: ({ size }: {
     size?: number;
 }) => React.JSX.Element;

package/dist/components/ModalHeightAnimationLayer/ModalHeightAnimationLayer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ModalHeightAnimationLayerProps {
+    children: React.ReactNode;
+    permittedHeight: number;
+}
+export declare function ModalHeightAnimationLayer({ children, permittedHeight, }: ModalHeightAnimationLayerProps): React.JSX.Element;
+export {};

package/dist/components/ModalHeightAnimationLayer/WithdrawalModalHeightAnimationWrapper.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { WithdrawalModalStep } from '../../modals/WithdrwalModal/types';
+interface WithdrawalModalHeightAnimationWrapperProps {
+    children: React.ReactNode;
+    withdrawalStep: WithdrawalModalStep;
+}
+export declare function WithdrawalModalHeightAnimationWrapper({ children, withdrawalStep, }: WithdrawalModalHeightAnimationWrapperProps): React.JSX.Element;
+export {};

package/dist/css/sprinkles.css.d.ts

@@ -429,6 +429,7 @@ declare const themeContractValues: {
         modalOverlay: string;
     };
     moonpayTheme: string;
+    modalZIndex: string;
 };
 export declare const validColorNames: string[];
 export type ThemeVars = typeof themeContractValues;
@@ -861,6 +862,7 @@ export declare const themeVars: {
         modalOverlay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     moonpayTheme: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    modalZIndex: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 export declare const largeScreenMinWidth = 768;
 declare const responsiveProperties: {

package/dist/domains/swapped.d.ts

@@ -0,0 +1,7 @@
+import type { ExchangeRates, SwappedFormOfPayment } from '@funkit/api-base';
+export declare function sortFops<T extends SwappedFormOfPayment>(fops: T[]): T[];
+/**
+ * Get the limit for a given form of payment in USD.
+ * Backend returns min/max in Euros - we convert to USD and round down to the nearest $100
+ */
+export declare function getFopsLimit(fop: SwappedFormOfPayment, exchangeRates: ExchangeRates | undefined, defaultMaxLimit?: string): string;

package/dist/domains/wallet.d.ts

@@ -1,4 +1,3 @@
-import type { FunkitActiveCheckoutItem } from '../providers/FunkitCheckoutContext';
 export interface AssetHoldingsItem {
     iconSrc: string | undefined;
     symbol: string;
@@ -25,9 +24,3 @@ export declare function getTotalAssetBalance(assets: AssetHoldingsMap): number;
 export declare const isPolygonEcosystemToken: (chainId: string, tokenAddress: string) => boolean;
 export declare const L2_COST_MARGIN_MULTIPLIER = 1.2;
 export declare const ASSETS_LOW_VALUE_THRESHOLD = 0.1;
-type RecommendedAsset = {
-    chainSymbolKey: string;
-    label: string | null;
-};
-export declare const getRecommendedAsset: (checkoutItem: FunkitActiveCheckoutItem, accountHoldings: KnownAssetHoldingsItem[]) => RecommendedAsset | null;
-export {};

package/dist/hooks/queries/useFops.d.ts

@@ -1,4 +1,3 @@
-import { type GetFopsResponse } from '@funkit/api-base';
 export interface UseFopsParams {
     /** User's email for Swapped integration */
     email?: string;
@@ -14,4 +13,205 @@ export interface UseFopsParams {
  * @param params - Optional parameters including email, enabled state, and themeConfig
  * @returns Query result with genericFormsOfPayments and savedFormsOfPayments
  */
-export declare const useFops: ({ enabled, themeConfig, }?: UseFopsParams) => import("@tanstack/react-query").UseQueryResult<GetFopsResponse, Error>;
+export declare const useFops: ({ enabled, themeConfig, }?: UseFopsParams) => {
+    isLoading: boolean;
+    data: {
+        genericFormsOfPayments: import("@funkit/api-base").GenericFormOfPayment[];
+        savedFormsOfPayments: import("@funkit/api-base").SavedFormOfPayment[];
+    };
+    error: Error;
+    isError: true;
+    isPending: false;
+    isLoadingError: false;
+    isRefetchError: true;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "error";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<{
+        genericFormsOfPayments: import("@funkit/api-base").GenericFormOfPayment[];
+        savedFormsOfPayments: import("@funkit/api-base").SavedFormOfPayment[];
+    }, Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<{
+        genericFormsOfPayments: import("@funkit/api-base").GenericFormOfPayment[];
+        savedFormsOfPayments: import("@funkit/api-base").SavedFormOfPayment[];
+    }>;
+} | {
+    isLoading: boolean;
+    data: {
+        genericFormsOfPayments: import("@funkit/api-base").GenericFormOfPayment[];
+        savedFormsOfPayments: import("@funkit/api-base").SavedFormOfPayment[];
+    };
+    error: null;
+    isError: false;
+    isPending: false;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: true;
+    isPlaceholderData: false;
+    status: "success";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<{
+        genericFormsOfPayments: import("@funkit/api-base").GenericFormOfPayment[];
+        savedFormsOfPayments: import("@funkit/api-base").SavedFormOfPayment[];
+    }, Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<{
+        genericFormsOfPayments: import("@funkit/api-base").GenericFormOfPayment[];
+        savedFormsOfPayments: import("@funkit/api-base").SavedFormOfPayment[];
+    }>;
+} | {
+    isLoading: boolean;
+    data: undefined;
+    error: Error;
+    isError: true;
+    isPending: false;
+    isLoadingError: true;
+    isRefetchError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "error";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<{
+        genericFormsOfPayments: import("@funkit/api-base").GenericFormOfPayment[];
+        savedFormsOfPayments: import("@funkit/api-base").SavedFormOfPayment[];
+    }, Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<{
+        genericFormsOfPayments: import("@funkit/api-base").GenericFormOfPayment[];
+        savedFormsOfPayments: import("@funkit/api-base").SavedFormOfPayment[];
+    }>;
+} | {
+    isLoading: boolean;
+    data: undefined;
+    error: null;
+    isError: false;
+    isPending: true;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "pending";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<{
+        genericFormsOfPayments: import("@funkit/api-base").GenericFormOfPayment[];
+        savedFormsOfPayments: import("@funkit/api-base").SavedFormOfPayment[];
+    }, Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<{
+        genericFormsOfPayments: import("@funkit/api-base").GenericFormOfPayment[];
+        savedFormsOfPayments: import("@funkit/api-base").SavedFormOfPayment[];
+    }>;
+} | {
+    isLoading: boolean;
+    data: undefined;
+    error: null;
+    isError: false;
+    isPending: true;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "pending";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<{
+        genericFormsOfPayments: import("@funkit/api-base").GenericFormOfPayment[];
+        savedFormsOfPayments: import("@funkit/api-base").SavedFormOfPayment[];
+    }, Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<{
+        genericFormsOfPayments: import("@funkit/api-base").GenericFormOfPayment[];
+        savedFormsOfPayments: import("@funkit/api-base").SavedFormOfPayment[];
+    }>;
+} | {
+    isLoading: boolean;
+    data: {
+        genericFormsOfPayments: import("@funkit/api-base").GenericFormOfPayment[];
+        savedFormsOfPayments: import("@funkit/api-base").SavedFormOfPayment[];
+    };
+    isError: false;
+    error: null;
+    isPending: false;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: true;
+    isPlaceholderData: true;
+    status: "success";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<{
+        genericFormsOfPayments: import("@funkit/api-base").GenericFormOfPayment[];
+        savedFormsOfPayments: import("@funkit/api-base").SavedFormOfPayment[];
+    }, Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<{
+        genericFormsOfPayments: import("@funkit/api-base").GenericFormOfPayment[];
+        savedFormsOfPayments: import("@funkit/api-base").SavedFormOfPayment[];
+    }>;
+};

package/dist/hooks/useCheckoutTransferInit.d.ts

@@ -4,6 +4,7 @@ import { type UDAConfig } from './useUDAParams';
 interface UseCheckoutTransferInitResponse {
     transferInit: CheckoutInitTokenTransferResponse | undefined;
     recipientAddr: FunAddress;
+    isLoading: boolean;
 }
 type CheckoutTokenTransferParams = Omit<CheckoutInitTokenTransferAddressParams, 'logger' | 'clientMetadata'>;
 export declare function checkoutTransferFetch(params: CheckoutTokenTransferParams): Promise<CheckoutInitTokenTransferResponse>;

package/dist/index.css

@@ -3172,7 +3172,6 @@
   width: var(--rk-dimensions-txSummaryLineSkeletonWidth);
 }
 [data-rk] ._1rsrm2fsh {
-  -webkit-backdrop-filter: var(--rk-blurs-modalOverlay);
   backdrop-filter: var(--rk-blurs-modalOverlay);
 }
 [data-rk] ._1rsrm2fsi {
@@ -11907,7 +11906,7 @@
   --_7rkubb1: 0.9;
 }
 
-/* vanilla-extract-css-ns:src/components/Dialog/Dialog.css.ts.vanilla.css?source=Ll8xcjhmNTcxIHsKICBib3R0b206IC0yMDBweDsKICBsZWZ0OiAtMjAwcHg7CiAgcGFkZGluZzogMjAwcHg7CiAgcmlnaHQ6IC0yMDBweDsKICB0b3A6IC0yMDBweDsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVooMCk7CiAgei1pbmRleDogOTk5OTk3Owp9Ci5fMXI4ZjU3MyB7CiAgbWF4LXdpZHRoOiAxMDB2dzsKfQouXzFyOGY1NzQgewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47CiAgd2lkdGg6IDEwMCU7CiAgZmxleC1zaHJpbms6IDA7CiAgbWluLWhlaWdodDogdmFyKC0tcmstZGltZW5zaW9ucy1tb2RhbFRvcEJhckhlaWdodCk7Cn0KLl8xcjhmNTc2IHsKICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgbGVmdDogMDsKICByaWdodDogMDsKICB6LWluZGV4OiAxOwp9Ci5fMXI4ZjU3NyB7CiAgcG9zaXRpb246IHJlbGF0aXZlOwogIHotaW5kZXg6IDI7Cn0KLl8xcjhmNTc5IHsKICBib3R0b206IDA7CiAgbGVmdDogMDsKICByaWdodDogMDsKICB0b3A6IDA7CiAgei1pbmRleDogLTE7Cn0KLl8xcjhmNTdhIHsKICBhbGlnbi1pdGVtczogY2VudGVyOwp9Ci5fMXI4ZjU3YiB7CiAgYWxpZ24taXRlbXM6IGZsZXgtZW5kOwp9 */
+/* vanilla-extract-css-ns:src/components/Dialog/Dialog.css.ts.vanilla.css?source=Ll8xcjhmNTcxIHsKICBib3R0b206IC0yMDBweDsKICBsZWZ0OiAtMjAwcHg7CiAgcGFkZGluZzogMjAwcHg7CiAgcmlnaHQ6IC0yMDBweDsKICB0b3A6IC0yMDBweDsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVooMCk7CiAgei1pbmRleDogdmFyKC0tcmstbW9kYWxaSW5kZXgpOwp9Ci5fMXI4ZjU3MyB7CiAgbWF4LXdpZHRoOiAxMDB2dzsKfQouXzFyOGY1NzQgewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47CiAgd2lkdGg6IDEwMCU7CiAgZmxleC1zaHJpbms6IDA7CiAgbWluLWhlaWdodDogdmFyKC0tcmstZGltZW5zaW9ucy1tb2RhbFRvcEJhckhlaWdodCk7Cn0KLl8xcjhmNTc2IHsKICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgbGVmdDogMDsKICByaWdodDogMDsKICB6LWluZGV4OiAxOwp9Ci5fMXI4ZjU3NyB7CiAgcG9zaXRpb246IHJlbGF0aXZlOwogIHotaW5kZXg6IDI7Cn0KLl8xcjhmNTc5IHsKICBib3R0b206IDA7CiAgbGVmdDogMDsKICByaWdodDogMDsKICB0b3A6IDA7CiAgei1pbmRleDogLTE7Cn0KLl8xcjhmNTdhIHsKICBhbGlnbi1pdGVtczogY2VudGVyOwp9Ci5fMXI4ZjU3YiB7CiAgYWxpZ24taXRlbXM6IGZsZXgtZW5kOwp9 */
 [data-rk] ._1r8f571 {
   bottom: -200px;
   left: -200px;
@@ -11915,7 +11914,7 @@
   right: -200px;
   top: -200px;
   transform: translateZ(0);
-  z-index: 999997;
+  z-index: var(--rk-modalZIndex);
 }
 [data-rk] ._1r8f573 {
   max-width: 100vw;