@funkit/connect 4.1.1 → 4.1.3

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @funkit/connect
 
+## 4.1.3
+
+### Patch Changes
+
+- 61112d5: refactor: integrate @funkit/chains
+- Updated dependencies [61112d5]
+  - @funkit/wagmi-tools@3.0.23
+  - @funkit/chains@0.1.1
+  - @funkit/core@2.3.2
+
+## 4.1.2
+
+### Patch Changes
+
+- 8deb27f: chore: rewrite pure css stylesheets to css.ts
+- fd9ac5d: feat: add deviceId logging with userId
+- 8032902: chore: adjust brokerage time for polymarket
+- c5bf45b: feat: revise token recommendation heuristics
+- 697811b: chore: reorganize file structure
+- 1012332: feat: use FunLinkButton in DisclaimerText
+- 125fd75: refactor: deprecate token_transfer_additional_disclaimer
+- 8032902: feat: streamline special timestamps to new flag checkout_time_estimate_overrides
+- 58574c5: fix: fix button transitions
+- ad96b5b: feat: refactor rendering of token and chain icons
+- 8379562: feat: redesign Transfer token page
+- 0220b0a: fix: improve biome warnings
+- 5ffc924: fix: remove imports for global pure stylesheets
+- 4ebe545: refactor: reorganize getTokenInfo -> getTokenAddressBySymbolAndChainId
+- Updated dependencies [1e4114a]
+- Updated dependencies [1e4114a]
+- Updated dependencies [125fd75]
+- Updated dependencies [8032902]
+- Updated dependencies [68a03ee]
+- Updated dependencies [4ebe545]
+- Updated dependencies [5975252]
+- Updated dependencies [68a03ee]
+- Updated dependencies [4ebe545]
+  - @funkit/api-base@1.5.1
+  - @funkit/core@2.3.1
+  - @funkit/utils@1.0.4
+  - @funkit/wagmi-tools@3.0.22
+
 ## 4.1.1
 
 ### Patch Changes

package/dist/{chunk-2QK6Y7FR.js → chunk-C7BDNBKV.js}

@@ -97,6 +97,7 @@ var darkTheme = ({
     dialog: "0px 8px 32px rgba(0, 0, 0, 0.32)",
     selectedOption: "0px 2px 6px rgba(0, 0, 0, 0.24)",
     selectedWallet: "0px 2px 6px rgba(0, 0, 0, 0.24)",
+    dropdown: "0px 0px 0px 1px rgba(255, 255, 255, 0.16), 0px 2px 6px rgba(0, 0, 0, 0.03), 0px 4px 42px rgba(0, 0, 0, 0.06)",
     // Override shadows
     ...customShadows || {}
   },

package/dist/{chunk-JFHTYZ23.js → chunk-QCYFMAKN.js}

@@ -97,6 +97,7 @@ var lightTheme = ({
     dialog: "0px 8px 32px rgba(0, 0, 0, 0.32)",
     selectedOption: "0px 2px 6px rgba(0, 0, 0, 0.24)",
     selectedWallet: "0px 2px 6px rgba(0, 0, 0, 0.12)",
+    dropdown: "0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 2px 6px 0px rgba(0, 0, 0, 0.03), 0px 4px 42px 0px rgba(0, 0, 0, 0.06)",
     // Override shadows
     ...customShadows || {}
   },

package/dist/components/Avatar/Avatar.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import type { Address } from 'viem';
 interface AvatarProps {
-    address: string;
+    address: string | Address;
     loading?: boolean;
     imageUrl?: string | null;
     size: number;

package/dist/components/Box/Box.d.ts

@@ -19,13 +19,13 @@ export declare const Box: React.ForwardRefExoticComponent<{
         focused?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "focusedOptionBorder" | "standby" | "success" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "lightStroke" | "mediumStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
         focusedVisible?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "focusedOptionBorder" | "standby" | "success" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "lightStroke" | "mediumStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
     } | undefined;
-    boxShadow?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | {
-        base?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | undefined;
-        hover?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | undefined;
-        active?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | undefined;
-        selection?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | undefined;
-        focused?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | undefined;
-        focusedVisible?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | undefined;
+    boxShadow?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | "dropdown" | {
+        base?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | "dropdown" | undefined;
+        hover?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | "dropdown" | undefined;
+        active?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | "dropdown" | undefined;
+        selection?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | "dropdown" | undefined;
+        focused?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | "dropdown" | undefined;
+        focusedVisible?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | "dropdown" | undefined;
     } | undefined;
     color?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "focusedOptionBorder" | "standby" | "success" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "lightStroke" | "mediumStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | {
         base?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "focusedOptionBorder" | "standby" | "success" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "lightStroke" | "mediumStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;

package/dist/components/CopyAddress/CopyAddressButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/** Simple button to copy the provided address */
+export declare function CopyAddressButton({ address, }: {
+    address: string;
+}): React.JSX.Element;

package/dist/components/CopyAddress/CopyDisplayedAddress.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/** Element displaying the provided address along with a copy button, similar to `CopyInputDisplayedAddress` but doesn't look like an input, instead it's wrapped in a simple background box */
+export declare function CopyDisplayedAddress({ address, }: {
+    address: string;
+}): React.JSX.Element;

package/dist/components/CopyAddress/CopyInputDisplayedAddress.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/** Element displaying the provided address along with a copy button, similar to `CopyDisplayedAddress` but visually resembles an input with a suffix icon */
+export declare function CopyInputDisplayedAddress({ address, }: {
+    address: string;
+}): React.JSX.Element;

package/dist/components/CopyAddress/LabelledCopyAddressButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/** Copy address button with a label `Copy Address` */
+export declare function LabelledCopyAddressButton({ address, showAddress, }: {
+    address: string;
+    showAddress?: boolean;
+}): React.JSX.Element;

package/dist/components/Dropdown/BaseDropdown.css.d.ts

@@ -0,0 +1,5 @@
+export declare const BORDER_RADIUS = "connectButton";
+export declare const ANIMATION_DURATION = 150;
+export declare const baseDropdownItemWrapperStyles: string;
+export declare const baseDropdownListWrapperAnimateInStyles: string;
+export declare const baseDropdownListWrapperAnimateOutStyles: string;

package/dist/components/Dropdown/BaseDropdown.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
 import { type BaseActiveDropdownItemProps } from './BaseActiveDropdownItem';
+/** gap between the icon and the label of the item */
+export declare const HORIZONTAL_ICON_GAP = "4";
+/** safe spacing, ie. padding, on the left & right of the active item and dropdown item */
+export declare const HORIZONTAL_OUTER_PADDING_X = "8";
 interface BaseDropdownOption {
     label: string;
     value: string;
@@ -18,6 +22,8 @@ interface BaseDropdownProps {
     resetSearchOnClose?: boolean;
     openToTopOnMobile?: boolean;
     alwaysOpenToTop?: boolean;
+    openDropdownFullWidth?: boolean;
+    preloadIconUrls?: string[];
 }
-declare function BaseDropdown({ activeItemProps, value, options, onOptionSelected, renderDropdownOption, searchableOptions, placeholder, resetSearchOnClose, openToTopOnMobile, alwaysOpenToTop, }: BaseDropdownProps): React.JSX.Element;
+declare function BaseDropdown({ activeItemProps, value, options, onOptionSelected, renderDropdownOption, searchableOptions, placeholder, resetSearchOnClose, openToTopOnMobile, alwaysOpenToTop, openDropdownFullWidth, preloadIconUrls, }: BaseDropdownProps): React.JSX.Element;
 export default BaseDropdown;

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

@@ -2,7 +2,7 @@ export declare const funLinkButtonStyle: string;
 export declare const transitionStyles: string;
 export declare const pressedStyles: string;
 export declare const baseFunIconButtonStyle: string;
-export declare const funIconButtonClickableStyle: string;
-export declare const funIconButtonNonClickableStyle: string;
-export declare const funIconButtonDisabledStyle: string;
+export declare const funButtonClickableStyle: string;
+export declare const funButtonNonClickableStyle: string;
+export declare const funButtonDisabledStyle: string;
 export declare const rotateStyle: string;

package/dist/components/FunButton/FunLinkButton.d.ts

@@ -1,9 +1,14 @@
 import React from 'react';
 import { type TextProps } from '../Text/Text';
-export declare function FunLinkButton({ onClick, text, textProps, hasPadding, color, }: {
-    onClick: () => void;
+/**
+ * A button that looks like a link. Behavior can be customized with `href` (anchor) or `onClick` (button).
+ */
+export declare function FunLinkButton({ color, inline, hasPadding, href, onClick, text, textProps, }: {
+    color?: TextProps['color'];
+    hasPadding?: boolean;
+    href?: string;
+    inline?: boolean;
+    onClick?: () => void;
     text: string;
     textProps?: Omit<TextProps, 'color'>;
-    hasPadding?: boolean;
-    color?: TextProps['color'];
 }): React.JSX.Element;

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

@@ -1,3 +1,4 @@
+export declare const numberInputResetStyle: string;
 export declare const inputClass: string;
 export declare const inputClassDisabled: string;
 export declare const inputClassError: string;

package/dist/components/FunInput/FunInput.d.ts

@@ -1,4 +1,3 @@
-import './FunInputBase.css';
 import React, { type HTMLInputTypeAttribute, type ReactNode } from 'react';
 import { type BoxProps } from '../Box/Box';
 export interface FunInputProps<T = HTMLInputElement> {

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

@@ -0,0 +1,2 @@
+export declare const expandedStyles: string;
+export declare const collapsedStyles: string;

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

@@ -1,4 +1,3 @@
-import './FunNotification.css';
 import React, { type ReactNode } from 'react';
 import { Box } from '../Box/Box';
 import { type TextProps } from '../Text/Text';

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

@@ -0,0 +1 @@
+export declare const badgeStyle: string;

package/dist/components/FunPaymentMethodItem/FunPaymentMethodItem.d.ts

@@ -8,6 +8,10 @@ export interface FunPaymentMethodItemProps {
     isError?: boolean;
     isDisabled?: boolean;
     isActive?: boolean;
-    isSource?: boolean;
 }
-export declare function FunPaymentMethodItem({ keyIcon, keyText, valueIcon, disclaimerText, onClick, isError, isDisabled, isActive, isSource, }: FunPaymentMethodItemProps): React.JSX.Element;
+export declare const FunPaymentMethodItem: ({ keyIcon, keyText, valueIcon, disclaimerText, onClick, isError, isDisabled, isActive, }: FunPaymentMethodItemProps) => React.JSX.Element;
+interface SourcePaymentMethodItemProps extends Omit<FunPaymentMethodItemProps, 'valueIcon'> {
+    otherSourcesCount: number;
+}
+export declare const SourcePaymentMethodItem: ({ keyIcon, keyText, disclaimerText, onClick, otherSourcesCount, isError, isDisabled, isActive, }: SourcePaymentMethodItemProps) => React.JSX.Element;
+export {};

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

@@ -12,17 +12,16 @@ interface ConnectedMeshPaymentMethodItemProps {
  * the other one is for connecting new brokerage button
  * */
 export declare const ConnectedMeshPaymentMethodItem: ({ paymentMethodInfo, isSelected, onSelect, onBrokerageError, targetChainId, }: ConnectedMeshPaymentMethodItemProps) => React.JSX.Element;
-export declare const AccountBalancePaymentMethodItem: ({ isActive, isSource, customValueIcon, onClick, targetChainId, }: BasePaymentMethodItemProps & {
+export declare const AccountBalancePaymentMethodItem: ({ isActive, customValueIcon, onClick, targetChainId, }: BasePaymentMethodItemProps & {
     targetChainId: string;
 }) => React.JSX.Element;
 type BasePaymentMethodItemProps = {
     isActive: boolean;
     onClick: () => void;
     isClickable?: boolean;
-    isSource?: boolean;
     customValueIcon?: ReactNode;
 };
-export declare function AddPaymentMethodItem({ paymentMethod, isClickable, isActive, onClick, isSource, customValueIcon, }: BasePaymentMethodItemProps & {
+export declare function AddPaymentMethodItem({ paymentMethod, isClickable, isActive, onClick, customValueIcon, }: BasePaymentMethodItemProps & {
     paymentMethod: PaymentMethod;
     dynamicLimit?: string;
 }): React.JSX.Element | undefined;

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

@@ -1,3 +1,7 @@
+export declare const MAX_TOOLTIP_WIDTH = 180;
 export declare const tooltipContainer: string;
 export declare const tooltipStyle: string;
+export declare const tooltipStyleCenter: string;
+export declare const tooltipStyleRight: string;
+export declare const tooltipStyleLeft: string;
 export declare const tooltipFadeIn: string;

package/dist/components/FunTooltip/FunTooltip.d.ts

@@ -2,6 +2,9 @@ import React, { type ReactNode } from 'react';
 interface FunTooltipProps {
     content: string;
     children: ReactNode;
+    wrapperElementRef?: React.RefObject<HTMLDivElement>;
+    enableDynamicPositioning?: boolean;
+    tooltipPosition?: 'center' | 'left' | 'right';
 }
-export declare const FunTooltip: ({ content, children }: FunTooltipProps) => React.JSX.Element;
+export declare const FunTooltip: ({ content, children, wrapperElementRef, tooltipPosition, enableDynamicPositioning, }: FunTooltipProps) => React.JSX.Element;
 export {};

package/dist/components/FunTransactionSummary/FunTxSummaryComponents.css.d.ts

@@ -0,0 +1,2 @@
+export declare const contentExpandedStyles: string;
+export declare const contentCollapsedStyles: string;

package/dist/components/FunTransactionSummary/FunTxSummaryComponents.d.ts

@@ -1,4 +1,3 @@
-import './FunTxSummaryComponents.css';
 import React, { type ReactNode } from 'react';
 import { type BoxProps } from '../Box/Box';
 export declare function FunTxSummaryBox({ children, ...otherProps }: BoxProps): React.JSX.Element;

package/dist/components/FunTransactionSummary/PaymentFeesSummary.css.d.ts

@@ -1,2 +1,4 @@
 export declare const baseStyles: string;
 export declare const expandableStyles: string;
+export declare const feeLineShowStyles: string;
+export declare const feeLineHideStyles: string;

package/dist/components/FunTransactionSummary/PaymentFeesSummary.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { FunkitCheckoutQuoteResult } from '../../providers/FunkitCheckoutContext';
+import type { FunkitCheckoutQuoteResult } from '~/domains/quote';
 interface PaymentFeesSummaryProps {
     isLoading: boolean;
     quote: FunkitCheckoutQuoteResult | null | undefined;

package/dist/components/FunTransactionSummary/PaymentMethodSummary.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { FunkitCheckoutQuoteResult } from '~/domains/quote';
 import { type PaymentMethodInfo } from '../../domains/paymentMethods';
 import type { FunkitActiveCheckoutItem } from '../../providers/FunkitCheckoutContext';
 import { type FunkitTextCustomizationsConfig, type FunkitUiCustomRecipientConfig, type FunkitUiCustomizationsConfig } from '../../providers/FunkitConfigContext';
@@ -15,8 +16,9 @@ interface PaymentAmountSummaryProps {
     isLoading: boolean;
     targetChainId: string;
     checkoutItem: FunkitActiveCheckoutItem | null;
+    quote: FunkitCheckoutQuoteResult | null;
     textCustomizations: FunkitTextCustomizationsConfig['confirmationScreen'];
     uiCustomizations: FunkitUiCustomizationsConfig['confirmationScreen'];
 }
-export declare function PaymentAmountSummary({ isLoading, targetChainId, checkoutItem, textCustomizations, uiCustomizations, }: PaymentAmountSummaryProps): React.JSX.Element;
+export declare function PaymentAmountSummary({ isLoading, targetChainId, quote, checkoutItem, textCustomizations, uiCustomizations, }: PaymentAmountSummaryProps): React.JSX.Element;
 export {};

package/dist/config/getDefaultConfig.d.ts

@@ -19,6 +19,39 @@ export declare const createFunkitWagmiConfig: (rawWagmiConfig: CreateFunkitWagmi
  * Get default funkit-supported checkout chains
  */
 export declare const getDefaultChains: () => ({
+    id: number;
+    name: string;
+    nativeCurrency: {
+        symbol: string;
+        decimals: number;
+        name: string;
+    };
+    rpcUrls: {
+        default: {
+            http: string[];
+        };
+    };
+    blockExplorers: {
+        default: {
+            name: string;
+            url: string;
+            apiUrl: string;
+        };
+    };
+    contracts: {
+        ensRegistry: {
+            address: `0x${string}`;
+        };
+        ensUniversalResolver: {
+            address: `0x${string}`;
+            blockCreated: number;
+        };
+        multicall3: {
+            address: `0x${string}`;
+            blockCreated: number;
+        };
+    };
+} | {
     blockExplorers: {
         readonly default: {
             readonly name: "Etherscan";
@@ -1041,39 +1074,6 @@ export declare const getDefaultChains: () => ({
     fees?: import("viem").ChainFees<undefined> | undefined;
     formatters?: undefined;
     serializers?: import("viem").ChainSerializers<undefined, import("viem").TransactionSerializable> | undefined;
-} | {
-    id: number;
-    name: string;
-    nativeCurrency: {
-        symbol: string;
-        decimals: number;
-        name: string;
-    };
-    rpcUrls: {
-        default: {
-            http: string[];
-        };
-    };
-    blockExplorers: {
-        default: {
-            name: string;
-            url: string;
-            apiUrl: string;
-        };
-    };
-    contracts: {
-        ensRegistry: {
-            address: `0x${string}`;
-        };
-        ensUniversalResolver: {
-            address: `0x${string}`;
-            blockCreated: number;
-        };
-        multicall3: {
-            address: `0x${string}`;
-            blockCreated: number;
-        };
-    };
 } | {
     blockExplorers: {
         readonly default: {

package/dist/consts/customers.d.ts

@@ -1,7 +1,3 @@
-export declare const DEGEN_API_KEY = "m4iHIILHcL4gN8EXCMzGe8zIdhuCXxck49mWajzJ";
-export declare const DYDX_API_KEY = "NJq0CGrsE19xBbP1vHyBOp8xJvzYo9kayJHqDFP5";
-export declare const POLYMARKET_API_KEY = "Y53dikxXdT4E3afI1l8BMBSWgyhKvf65k6Dut1k6";
-export declare const DEV_API_KEY = "Z9SZaOwpmE40KX61mUKWm5hrpGh7WHVkaTvQJpQk";
 export declare function isDydxCustomer(apiKey: string): apiKey is "NJq0CGrsE19xBbP1vHyBOp8xJvzYo9kayJHqDFP5";
 export declare function isPolymarketCustomer(apiKey: string): apiKey is "Y53dikxXdT4E3afI1l8BMBSWgyhKvf65k6Dut1k6";
 export declare function isImportantCustomer(apiKey: string): apiKey is "NJq0CGrsE19xBbP1vHyBOp8xJvzYo9kayJHqDFP5" | "Y53dikxXdT4E3afI1l8BMBSWgyhKvf65k6Dut1k6";

package/dist/consts/layout.d.ts

@@ -0,0 +1,5 @@
+export declare const VERTICAL_SECTION_GAP = "18";
+export declare const PROFILE_SIDE_PADDING = "18";
+export declare const HOME_CHECKOUT_DISPLAY_ROW_HEIGHT = 52;
+export declare const HOME_TOKEN_BALANCE_DISPLAY_ROW_HEIGHT = 52;
+export declare const DEFAULT_ICON_SIZE = "24";

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

@@ -123,6 +123,7 @@ declare const themeContractValues: {
         dialog: string;
         selectedOption: string;
         selectedWallet: string;
+        dropdown: string;
     };
     blurs: {
         modalOverlay: string;
@@ -253,6 +254,7 @@ export declare const themeVars: {
         dialog: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         selectedOption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         selectedWallet: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        dropdown: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     blurs: {
         modalOverlay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -473,13 +475,13 @@ export declare const sprinkles: ((props: {
         focused?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "focusedOptionBorder" | "standby" | "success" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "lightStroke" | "mediumStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
         focusedVisible?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "focusedOptionBorder" | "standby" | "success" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "lightStroke" | "mediumStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
     } | undefined;
-    boxShadow?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | {
-        base?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | undefined;
-        hover?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | undefined;
-        active?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | undefined;
-        selection?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | undefined;
-        focused?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | undefined;
-        focusedVisible?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | undefined;
+    boxShadow?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | "dropdown" | {
+        base?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | "dropdown" | undefined;
+        hover?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | "dropdown" | undefined;
+        active?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | "dropdown" | undefined;
+        selection?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | "dropdown" | undefined;
+        focused?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | "dropdown" | undefined;
+        focusedVisible?: "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | "dropdown" | undefined;
     } | undefined;
     color?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "focusedOptionBorder" | "standby" | "success" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "lightStroke" | "mediumStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | {
         base?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "focusedOptionBorder" | "standby" | "success" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "lightStroke" | "mediumStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;

package/dist/domains/clientMetadata.d.ts

@@ -4,9 +4,11 @@
  *
  * Make sure it is SERIALIZABLE and BACKWARD COMPATIBLE!!
  */
-import type { FunkitActiveCheckoutItem, FunkitCheckoutConfig } from '~/providers/FunkitCheckoutContext';
 import type { ApiCheckoutClientMetadata } from '@funkit/api-base';
-/** Historical Checkout Configuration stored in the server
+import type { FunkitActiveCheckoutItem, FunkitCheckoutConfig } from '~/providers/FunkitCheckoutContext';
+import type { FunkitCheckoutQuoteResult } from './quote';
+/**
+ * Historical Checkout Configuration stored in the server
  * This is similar to FunkitCheckoutConfig but with some fields changed to serializable types
  * */
 export type ServerCheckoutConfig = Omit<FunkitCheckoutConfig, 'generateActionsParams'> & {
@@ -33,5 +35,5 @@ export interface HistoricalCheckoutItem {
  * Sanitizes checkoutItem to generate a clientMetadata object to be saved in backend.
  * Ensures that no react components get sent to backend and the object isn't too big as well.
  */
-export declare function generateClientMetadataForBackend(checkoutItem: FunkitActiveCheckoutItem): ApiCheckoutClientMetadata;
+export declare function generateClientMetadataForBackend(checkoutItem: FunkitActiveCheckoutItem, quote: FunkitCheckoutQuoteResult): ApiCheckoutClientMetadata;
 export declare function generateClientMetadataForTokenTransfer(): HistoricalCheckoutItem;

package/dist/domains/feeEstimate.d.ts

@@ -0,0 +1,10 @@
+import { PaymentMethod } from './paymentMethods';
+export declare const L1_FEES_ESTIMATE = 20;
+export declare const L2_FEES_ESTIMATE = 1;
+export declare const MESH_L1_FEES_ESTIMATE = 8;
+export declare const MESH_L2_FEES_ESTIMATE = 2;
+export declare const MESH_CUSTOM_CLIENT_FEE_PERCENT = 0.055;
+/**
+ * Estimating overall fees
+ */
+export declare const getFeesUsdEstimate: (targetChainId: string, assetChainId: string, assetUsdAmount: number | null, paymentMethod: PaymentMethod | undefined) => number;

package/dist/domains/paymentMethods.d.ts

@@ -35,6 +35,7 @@ export interface PaymentMethodAccountInfo extends PaymentMethodInfoBase {
 export interface PaymentMethodTokenTransferInfo extends PaymentMethodInfoBase {
     paymentMethod: PaymentMethod.TOKEN_TRANSFER;
 }
+export type ConnectablePaymentMethodInfo = PaymentMethodAccountInfo | PaymentMethodBrokerageInfo;
 export type PaymentMethodInfo = PaymentMethodCardInfo | PaymentMethodBrokerageInfo | PaymentMethodAccountInfo | PaymentMethodTokenTransferInfo;
 interface CardPaymentMethodParams {
     paymentMethod: PaymentMethod.CARD;

package/dist/domains/quote.d.ts

@@ -23,3 +23,8 @@ export interface CheckoutQuoteParams {
     loginType: LoginType;
     enableFrogProxyServer?: boolean;
 }
+export declare function getQuoteAndEstimation({ checkoutItem, userId, walletAddress, apiKey, sponsorInitialTransferGasLimit, newPaymentMethodInfo, wagmiConfig, loginType, enableFrogProxyServer, }: CheckoutQuoteParams): Promise<{
+    baseQuote: CheckoutQuoteResponse;
+    finalEstimation: FunkitCheckoutQuoteResult;
+    availableAssetAmount: number | undefined;
+}>;

package/dist/domains/wallet.d.ts

@@ -14,5 +14,6 @@ export interface AssetHoldingsMap {
     [symbol: string]: AssetHoldingsItem;
 }
 /**
- * @returns formatted max usable USD balance from a given assets map */
+ * @returns formatted max usable USD balance from a given assets map
+ */
 export declare function getTotalAssetBalance(assets: AssetHoldingsMap): number;

package/dist/hooks/useCheckoutQuoteNotification.d.ts

@@ -1,5 +1,5 @@
 export declare function useCheckoutQuoteNotification(): {
-    readonly quoteNotification: {
+    quoteNotification: {
         readonly messageType: "error";
         readonly quoteMessage: string;
     } | {
@@ -9,5 +9,5 @@ export declare function useCheckoutQuoteNotification(): {
         readonly messageType: "none";
         readonly quoteMessage: undefined;
     };
-    readonly clearCheckoutQuoteMessages: () => void;
+    clearCheckoutQuoteMessages: () => void;
 };

package/dist/hooks/useCheckoutTimeEstimate.d.ts

@@ -0,0 +1,7 @@
+import { PaymentMethod } from '~/domains/paymentMethods';
+/**
+ * https://linear.app/funxyz/issue/ENG-1154/update-dydx-and-polymarkets-time-estimate
+ * https://linear.app/funxyz/issue/PE-775/sdkconnectwith-next-pm-requests
+ * @returns time estimation in seconds
+ */
+export declare function useCheckoutTimeEstimate(originalTimeEstimationMs: number | undefined, paymentMethod?: PaymentMethod): number;

package/dist/hooks/useCopyToClipboard.d.ts

@@ -0,0 +1,4 @@
+export declare const useCopyToClipboard: (text: string) => {
+    copied: boolean;
+    copy: () => void;
+};

package/dist/hooks/usePaymentSources.d.ts

@@ -0,0 +1,6 @@
+import { type ConnectablePaymentMethodInfo, PaymentMethod } from '~/domains/paymentMethods';
+export declare const usePaymentSources: (paymentMethodInfo: ConnectablePaymentMethodInfo | null, targetChainId: string) => {
+    preferred: (import("~/domains/paymentMethods").PaymentMethodBrokerageInfo | import("~/domains/paymentMethods").PaymentMethodAccountInfo)[] | PaymentMethod[];
+    moreSources: PaymentMethod[];
+};
+export declare const useRemainingPaymentSourcesCount: (targetChainId: string) => number;