@funkit/connect 3.1.1 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @funkit/connect
 
+## 3.2.0
+
+### Minor Changes
+
+- a90f273: feat: auto-refresh quote after signature denial
+- a90f273: feat: reorder checkout flow
+
+### Patch Changes
+
+- a90f273: fix: fix out-of-sync payment method in checkoutItem
+- a90f273: fix: do not disable button on quote error
+- a90f273: fix: remove balance check in select asset
+- a90f273: feat: add source variant for payment method
+- a90f273: fix: don't generate quote after selecting card in payment selection
+- a90f273: fix: disable wallet connection option in payment selection when isContinuing
+- 65afa8d: fix: fix ArrowIcon rotation on Safari
+- a90f273: fix: add visual fixes for source payment component
+- a90f273: feat: add ui customizations
+- a90f273: fix: hide amount in select payment method step
+- a90f273: feat: add usd amount options
+- a90f273: reactor: moved countdown element from dialog title to confirmation step
+- a90f273: refactor: reactive feature flags
+- a90f273: refactor: moved address utils
+- Updated dependencies [a90f273]
+  - @funkit/api-base@1.1.2
+  - @funkit/core@2.1.7
+  - @funkit/wagmi-tools@3.0.9
+
 ## 3.1.1
 
 ### Patch Changes

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

@@ -54,35 +54,35 @@ export declare const Box: React.ForwardRefExoticComponent<{
     readonly fontFamily?: "body" | undefined;
     readonly fontSize?: "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "23" | "40" | "57" | undefined;
     readonly fontWeight?: "medium" | "bold" | "regular" | "semibold" | "heavy" | undefined;
-    readonly gap?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | undefined;
-    readonly height?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly gap?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
+    readonly height?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "11" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
     readonly justifyContent?: "center" | "space-around" | "space-between" | "flex-end" | "flex-start" | undefined;
     readonly textAlign?: "inherit" | "left" | "right" | "center" | undefined;
-    readonly marginBottom?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | "-18" | undefined;
-    readonly marginLeft?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | "-18" | undefined;
-    readonly marginRight?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | "-18" | undefined;
-    readonly marginTop?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | "-18" | undefined;
-    readonly minHeight?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
-    readonly maxHeight?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
-    readonly maxWidth?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
-    readonly minWidth?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly marginBottom?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
+    readonly marginLeft?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
+    readonly marginRight?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
+    readonly marginTop?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
+    readonly minHeight?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "11" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly maxHeight?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "11" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly maxWidth?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "11" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly minWidth?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "11" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
     readonly overflow?: "hidden" | undefined;
-    readonly paddingBottom?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | undefined;
-    readonly paddingLeft?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | undefined;
-    readonly paddingRight?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | undefined;
-    readonly paddingTop?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | undefined;
+    readonly paddingBottom?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
+    readonly paddingLeft?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
+    readonly paddingRight?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
+    readonly paddingTop?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
     readonly position?: "fixed" | "absolute" | "relative" | undefined;
     readonly right?: "0" | undefined;
     readonly transition?: "transform" | "default" | undefined;
     readonly userSelect?: "none" | undefined;
-    readonly width?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly width?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "11" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
     readonly backdropFilter?: "modalOverlay" | undefined;
-    margin?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | "-18" | undefined;
-    marginX?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | "-18" | undefined;
-    marginY?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | "-18" | undefined;
-    padding?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | undefined;
-    paddingX?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | undefined;
-    paddingY?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | undefined;
+    margin?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
+    marginX?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
+    marginY?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
+    padding?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
+    paddingX?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
+    paddingY?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
 } & {
     reset?: keyof JSX.IntrinsicElements;
 } & HTMLProperties<HTMLElement> & {

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

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { BoxProps } from '../Box/Box';
-import { FunCountdownProps } from '../FunCountdown/FunCountdown';
+export { CHECKOUT_MODAL_BOTTOM_BAR_ID, CHECKOUT_MODAL_TITLE_COUNTDOWN_ID, useBottomSectionRef, useTitleCountdownRef, } from './hooks';
 interface DialogProps {
     open: boolean;
     onClose: () => void;
@@ -17,7 +17,7 @@ interface DialogProps {
  */
 export declare function Dialog({ children, onClose, open, titleId, isHidden, isSmartCloseable, }: DialogProps): React.JSX.Element;
 export declare namespace Dialog {
-    var Title: ({ title, titleMeta, hasCloseButton: hasCloseButtonProp, isCloseDisabled, onClose, hasBackButton: hasBackButtonProp, isBackDisabled, onBack, countdownRenderProps, backAnimation, skipBackDelay, countdownSeconds, countdownKey, delayCountdownReturnByBuffer, dydxHideBack, }: DialogTitleProps) => React.JSX.Element;
+    var Title: ({ title, titleMeta, hasCloseButton: hasCloseButtonProp, isCloseDisabled, onClose, hasBackButton: hasBackButtonProp, isBackDisabled, onBack, backAnimation, skipBackDelay, dydxHideBack, isCloseButtonHidden, }: DialogTitleProps) => React.JSX.Element;
     var Content: ({ children, fullHeight, paddingLeft, paddingBottom, className, withTopDivider, withBottomDivider, id, ...boxProps }: DialogContentProps) => React.JSX.Element;
     var BottomSection: ({ paddingX, ...boxProps }: Omit<BoxProps, "children">) => React.JSX.Element;
     var BottomBar: ({ topSection, actionButtonProps, bottomSection, }: import("../FunBottomBar/FunBottomBar").FunBottomBarProps) => React.JSX.Element;
@@ -41,15 +41,7 @@ export interface DialogTitleProps {
     onBack?: (p?: any) => void;
     skipBackDelay?: boolean;
     backAnimation?: boolean;
-    countdownSeconds?: number;
-    countdownKey?: string;
-    delayCountdownReturnByBuffer?: boolean;
     dydxHideBack?: boolean;
-    countdownRenderProps?: {
-        onBeforeCountdownEnds?: FunCountdownProps['onBeforeCountdownEnds'];
-        onBeforeCountdownEndsSeconds?: FunCountdownProps['onBeforeCountdownEndsSeconds'];
-        onCountdownEnded?: FunCountdownProps['onCountdownEnded'];
-        onCountdownLastSecond?: FunCountdownProps['onCountdownLastSecond'];
-    };
+    /** Hides the close button, eg. when using a countdown element in its place */
+    isCloseButtonHidden?: boolean;
 }
-export {};

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

@@ -0,0 +1,4 @@
+export declare const CHECKOUT_MODAL_BOTTOM_BAR_ID = "checkout-modal-bottom-bar";
+export declare function useBottomSectionRef(): HTMLElement | null;
+export declare const CHECKOUT_MODAL_TITLE_COUNTDOWN_ID = "checkout-modal-title-countdown";
+export declare function useTitleCountdownRef(): HTMLElement | null;

package/dist/components/FunAsset/FunAssetLoading.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare function FunAssetLoading({ count }: {
+    count?: number | null;
+}): React.JSX.Element;

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

@@ -1,10 +1,7 @@
 import React from 'react';
 import { BoxProps } from '../Box/Box';
-export interface FunIconButtonProps {
+export interface FunIconButtonProps extends Pick<BoxProps, 'as' | 'borderRadius' | 'color' | 'fontSize' | 'fontWeight' | 'onBlur' | 'onMouseEnter' | 'onMouseLeave' | 'style'> {
     onClick?: () => void;
-    onMouseEnter?: () => void;
-    onMouseLeave?: () => void;
-    onBlur?: () => void;
     icon: React.ReactNode;
     /** Total height and width of the clickable area (including borders) */
     size?: BoxProps['height'];
@@ -17,14 +14,10 @@ export interface FunIconButtonProps {
     /** Defaults to 8px */
     gap?: BoxProps['gap'];
     ariaLabel?: string;
-    color?: BoxProps['color'];
     renderAsSquare?: boolean;
-    as?: BoxProps['as'];
     isDisabled?: boolean;
-    borderRadius?: BoxProps['borderRadius'];
-    style?: BoxProps['style'];
     children?: React.ReactNode;
     /** Defaults to 'quiet' */
-    variant?: 'quiet' | 'outlined';
+    variant?: 'filled' | 'quiet' | 'outlined';
 }
 export declare const FunIconButton: ({ children, onClick, icon, size, width, gap, ariaLabel, color, as, isDisabled, borderRadius, style, variant, ...props }: FunIconButtonProps) => React.JSX.Element;

package/dist/components/FunOptionBox/FunOptionBox.d.ts

@@ -1,13 +1,11 @@
 import React, { ReactNode } from 'react';
 import { BoxProps } from '../Box/Box';
-interface FunOptionBoxProps {
+interface FunOptionBoxProps extends Omit<BoxProps, 'className' | 'cursor' | 'tabIndex' | 'style'> {
     isActive?: boolean;
-    isDisabled?: boolean;
     paddingX?: BoxProps['paddingX'];
     paddingY?: BoxProps['paddingY'];
-    onClick?: null | (() => void);
     type?: 'default' | 'bordered';
     children: ReactNode;
 }
-export declare function FunOptionBox({ isActive, isDisabled, onClick, paddingX, paddingY, type, children, }: FunOptionBoxProps): React.JSX.Element;
+export declare function FunOptionBox({ isActive, onClick, paddingX, paddingY, type, as, borderStyle, borderWidth, borderRadius, display, alignItems, gap, justifyContent, color, children, disabled, ...boxProps }: FunOptionBoxProps): React.JSX.Element;
 export {};

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

@@ -4,8 +4,10 @@ export interface FunPaymentMethodItemProps {
     keyText: string;
     valueIcon?: ReactNode;
     disclaimerText?: string;
-    onClick?: null | (() => void);
+    onClick?: () => void;
+    isError?: boolean;
     isDisabled?: boolean;
     isActive?: boolean;
+    isSource?: boolean;
 }
-export declare function FunPaymentMethodItem({ keyIcon, keyText, valueIcon, disclaimerText, onClick, isDisabled, isActive, }: FunPaymentMethodItemProps): React.JSX.Element;
+export declare function FunPaymentMethodItem({ keyIcon, keyText, valueIcon, disclaimerText, onClick, isError, isDisabled, isActive, isSource, }: FunPaymentMethodItemProps): React.JSX.Element;

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

@@ -1,17 +1,31 @@
-import React from 'react';
-import { PaymentMethodInfo } from '../../consts/payment';
+import React, { ReactNode } from 'react';
+import { PaymentMethod, PaymentMethodInfo } from '../../consts/payment';
+import { SelectMethodPayloadData } from '../../modals/CheckoutModal/SelectPaymentMethod';
+export declare function ConnectWalletItem({ checkoutId, isClickable, }: {
+    checkoutId: string;
+    isClickable?: boolean;
+}): React.JSX.Element;
+export declare function AddPaymentMethodItem({ paymentMethod, checkoutId, isClickable, isActive, onClick, isSource, dynamicLimit, customValueIcon, }: {
+    paymentMethod: PaymentMethod;
+    checkoutId: string;
+    isActive: boolean;
+    isClickable?: boolean;
+    onClick?: () => void;
+    isSource?: boolean;
+    dynamicLimit?: string;
+    customValueIcon?: ReactNode;
+}): React.JSX.Element;
 export declare function ExistingPaymentMethodItem({ paymentMethodInfo, }: {
     paymentMethodInfo: PaymentMethodInfo;
 }): React.JSX.Element;
 /**
  * Handle selection and adding of payment methods
  */
-export declare function FunPaymentMethods({ primaryInfo, checkoutId, onSelect, isDisabled, depositAmount, isLoadingGeoCheck, onCloseWrapper, }: {
-    primaryInfo: React.ReactNode;
+export declare function FunPaymentMethods({ checkoutId, onSelect, isDisabled, depositAmount, isLoadingGeoCheck, onCloseWrapper, }: {
     checkoutId: string;
-    onSelect: (paymentMethodInfo: PaymentMethodInfo) => void;
+    onSelect: (selectMethodData: SelectMethodPayloadData) => void;
     isDisabled?: boolean;
-    depositAmount: string;
+    depositAmount: number;
     isLoadingGeoCheck: boolean;
     onCloseWrapper: () => void;
 }): React.JSX.Element;

package/dist/config/getDefaultConfig.d.ts

@@ -689,13 +689,13 @@ export declare const getDefaultChains: () => ({
     sourceId?: number | undefined;
     testnet?: boolean | undefined;
     custom: {
-        readonly getEip712Domain: import("viem/zksync").EIP712DomainFn<import("viem/chains").ZkSyncTransactionSerializable, import("viem/chains").ZkSyncEIP712TransactionSignable>;
+        readonly getEip712Domain: import("viem/zksync").EIP712DomainFn<import("viem/zksync").ZkSyncTransactionSerializable, import("viem/zksync").ZkSyncEIP712TransactionSignable>;
     };
     fees?: import("viem").ChainFees<undefined> | undefined;
     formatters: {
         readonly block: {
             exclude: [] | undefined;
-            format: (args: import("viem/chains").ZkSyncRpcBlock) => {
+            format: (args: import("viem/zksync").ZkSyncRpcBlock) => {
                 baseFeePerGas: bigint | null;
                 blobGasUsed: bigint;
                 difficulty: bigint;
@@ -717,7 +717,7 @@ export declare const getDefaultChains: () => ({
                 stateRoot: import("viem").Hash;
                 timestamp: bigint;
                 totalDifficulty: bigint | null;
-                transactions: `0x${string}`[] | import("viem/chains").ZkSyncTransaction<boolean>[];
+                transactions: `0x${string}`[] | import("viem/zksync").ZkSyncTransaction<boolean>[];
                 transactionsRoot: import("viem").Hash;
                 uncles: import("viem").Hash[];
                 withdrawals?: import("viem").Withdrawal[] | undefined;
@@ -729,7 +729,7 @@ export declare const getDefaultChains: () => ({
         };
         readonly transaction: {
             exclude: [] | undefined;
-            format: (args: import("viem/chains").ZkSyncRpcTransaction) => ({
+            format: (args: import("viem/zksync").ZkSyncRpcTransaction) => ({
                 r: import("viem").Hex;
                 s: import("viem").Hex;
                 v: bigint;
@@ -885,7 +885,7 @@ export declare const getDefaultChains: () => ({
         readonly transactionReceipt: {
             exclude: [] | undefined;
             format: (args: import("viem/_types/zksync/types/transaction").ZkSyncRpcTransactionReceipt) => {
-                type: import("viem/chains").ZkSyncTransactionType;
+                type: import("viem/zksync").ZkSyncTransactionType;
                 to: import("viem").Address | null;
                 from: import("viem").Address;
                 blockHash: import("viem").Hash;
@@ -903,14 +903,14 @@ export declare const getDefaultChains: () => ({
                 root?: import("viem").Hash | undefined;
                 l1BatchNumber: bigint | null;
                 l1BatchTxIndex: bigint | null;
-                logs: import("viem/chains").ZkSyncLog[];
-                l2ToL1Logs: import("viem/chains").ZkSyncL2ToL1Log[];
+                logs: import("viem/zksync").ZkSyncLog[];
+                l2ToL1Logs: import("viem/zksync").ZkSyncL2ToL1Log[];
             } & {};
             type: "transactionReceipt";
         };
         readonly transactionRequest: {
             exclude: ("gasPerPubdata" | "paymaster" | "factoryDeps" | "paymasterInput" | "customSignature")[] | undefined;
-            format: (args: import("viem/chains").ZkSyncTransactionRequest) => ({
+            format: (args: import("viem/zksync").ZkSyncTransactionRequest) => ({
                 data?: import("viem").Hex | undefined;
                 from: import("viem").Address;
                 gas?: `0x${string}` | undefined;
@@ -993,7 +993,7 @@ export declare const getDefaultChains: () => ({
                 maxFeePerBlobGas?: undefined;
                 maxFeePerGas?: `0x${string}` | undefined;
                 maxPriorityFeePerGas?: `0x${string}` | undefined;
-                eip712Meta: import("viem/chains").ZkSyncEip712Meta;
+                eip712Meta: import("viem/zksync").ZkSyncEip712Meta;
                 type: "0x71" | "0xff";
             }) & {
                 gasPerPubdata: never;

package/dist/consts/payment.d.ts

@@ -1,3 +1,5 @@
+import { PreviewTransferResult } from '@funkit/api-base';
+import { LinkPayload } from '@meshconnect/web-link-sdk';
 import { ReactNode } from 'react';
 /** Supported payment methods in FunkitConnect. **/
 export declare enum PaymentMethod {
@@ -10,12 +12,36 @@ export declare enum PaymentMethod {
     /** Mesh - Exchange / Brokerage **/
     BROKERAGE = "brokerage"
 }
+type PaymentMethodInfoMeta = LinkPayload & {
+    checkoutMeshNetworkId?: string;
+    computedPreviewExpirationMs?: number;
+    previewTransferResult?: PreviewTransferResult;
+};
 /** Full payment method information used in frontend during payment flows. **/
 export interface PaymentMethodInfo {
     paymentMethod: PaymentMethod;
     title: string;
-    titleIcon?: ReactNode;
+    titleIcon: ReactNode;
     description: string;
     descriptionIcon?: ReactNode;
-    meta: any;
+    meta: PaymentMethodInfoMeta;
 }
+export interface PaymentMethodCardInfo extends PaymentMethodInfo {
+    paymentMethod: PaymentMethod.CARD;
+}
+export interface PaymentMethodBrokerageInfo extends PaymentMethodInfo {
+    paymentMethod: PaymentMethod.BROKERAGE;
+}
+export interface PaymentMethodAccountInfo extends PaymentMethodInfo {
+    paymentMethod: PaymentMethod.ACCOUNT_BALANCE;
+}
+/** Shouldn't be used generally. Will most likely be removed once checkoutItem usage is reduced */
+export declare const getPartialPaymentMethodInfo: <T extends PaymentMethodInfo>(paymentMethod: T["paymentMethod"]) => {
+    paymentMethod: T["paymentMethod"];
+    title: string;
+    titleIcon: null;
+    description: string;
+    descriptionIcon: null;
+    meta: {};
+};
+export {};

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

@@ -529,35 +529,35 @@ export declare const sprinkles: ((props: {
     readonly fontFamily?: "body" | undefined;
     readonly fontSize?: "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "23" | "40" | "57" | undefined;
     readonly fontWeight?: "medium" | "bold" | "regular" | "semibold" | "heavy" | undefined;
-    readonly gap?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | undefined;
-    readonly height?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly gap?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
+    readonly height?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "11" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
     readonly justifyContent?: "center" | "space-around" | "space-between" | "flex-end" | "flex-start" | undefined;
     readonly textAlign?: "inherit" | "left" | "right" | "center" | undefined;
-    readonly marginBottom?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | "-18" | undefined;
-    readonly marginLeft?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | "-18" | undefined;
-    readonly marginRight?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | "-18" | undefined;
-    readonly marginTop?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | "-18" | undefined;
-    readonly minHeight?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
-    readonly maxHeight?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
-    readonly maxWidth?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
-    readonly minWidth?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly marginBottom?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
+    readonly marginLeft?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
+    readonly marginRight?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
+    readonly marginTop?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
+    readonly minHeight?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "11" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly maxHeight?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "11" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly maxWidth?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "11" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly minWidth?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "11" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
     readonly overflow?: "hidden" | undefined;
-    readonly paddingBottom?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | undefined;
-    readonly paddingLeft?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | undefined;
-    readonly paddingRight?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | undefined;
-    readonly paddingTop?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | undefined;
+    readonly paddingBottom?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
+    readonly paddingLeft?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
+    readonly paddingRight?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
+    readonly paddingTop?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
     readonly position?: "fixed" | "absolute" | "relative" | undefined;
     readonly right?: "0" | undefined;
     readonly transition?: "transform" | "default" | undefined;
     readonly userSelect?: "none" | undefined;
-    readonly width?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly width?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "11" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
     readonly backdropFilter?: "modalOverlay" | undefined;
-    margin?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | "-18" | undefined;
-    marginX?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | "-18" | undefined;
-    marginY?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | "-18" | undefined;
-    padding?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | undefined;
-    paddingX?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | undefined;
-    paddingY?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "11" | "64" | undefined;
+    margin?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
+    marginX?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
+    marginY?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
+    padding?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
+    paddingX?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
+    paddingY?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
 }) => string) & {
     properties: Set<"alignItems" | "alignSelf" | "backdropFilter" | "backgroundSize" | "boxShadow" | "color" | "cursor" | "display" | "flexDirection" | "fontFamily" | "fontSize" | "fontWeight" | "height" | "justifyContent" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "userSelect" | "width" | "background" | "borderColor" | "borderRadius" | "borderStyle" | "borderWidth" | "gap" | "margin" | "overflow" | "padding" | "transition" | "marginX" | "marginY" | "paddingX" | "paddingY">;
 };

package/dist/hooks/useFunListeners.d.ts

@@ -4,8 +4,4 @@ import { Address } from 'viem';
  * Each hook will store and track its own intervalId
  */
 export declare function useCheckoutHistoryListener(activate?: boolean, singleDepositAddr?: Address | undefined): void;
-/**
- * Handles the starting and stopping of asset listeners based on the calling component's mount/unmount status
- */
-export declare function useWalletAssetsListener(activate?: boolean): void;
 export declare function useSIWFarcasterListener(channelToken: string): void;

package/dist/hooks/useMesh.d.ts

@@ -1,17 +1,18 @@
 import { LinkPayload } from '@meshconnect/web-link-sdk';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { FunSelectOption } from '../components/FunSelect/FunSelect';
-import { PaymentMethodInfo } from '../consts/payment';
+import { PaymentMethodBrokerageInfo } from '../consts/payment';
 import { MeshExchanges } from '../utils/mesh';
 export declare const getMeshExchangeIconMap: (size?: number) => Partial<Record<MeshExchanges, ReactNode>>;
-export declare const getSupportedExchanges: () => MeshExchanges[];
+export declare const useSupportedExchanges: () => MeshExchanges[];
 export declare function getExchangeName(exchange: MeshExchanges): string;
 export declare const useMeshExchanges: ({ fullInfo, iconSize, }: {
     fullInfo?: boolean;
     iconSize?: number;
 }) => {
     options: FunSelectOption[];
-    preparePaymentInfo: (meshMeta: LinkPayload) => PaymentMethodInfo;
+    preparePaymentInfo: (meshMeta: LinkPayload, brokerage: MeshExchanges) => PaymentMethodBrokerageInfo;
+    getIcon: (brokerage: MeshExchanges) => React.ReactNode;
 };
 /**
  * Fetches mesh-related network information across all chains, given an exchange
@@ -24,7 +25,7 @@ export declare const useMeshNetworkInfo: (exchange: MeshExchanges) => {
  * Fetches mesh-related network information based on the active chain user is logged in on, given an exchange
  * @param exchange The mesh exchange user is currently connected with
  */
-export declare const useMeshActiveNetworkInfo: (exchange: MeshExchanges) => {
+export declare const useMeshActiveNetworkInfo: (exchange?: MeshExchanges) => {
     meshNetworkInfo: {
         meshSupportedTokens: string[];
         meshNetworkId: string | null;
@@ -37,3 +38,4 @@ export declare const useMeshActiveNetworkInfo: (exchange: MeshExchanges) => {
         meshNetworkId: string | null;
     }>;
 };
+export declare function useMeshAccountHoldings(targetChain: string, connection: LinkPayload | null): import("@tanstack/react-query").UseQueryResult<import("../utils/assets").AssetHoldingsMap, Error>;

package/dist/hooks/useWalletAssets.d.ts

@@ -0,0 +1,11 @@
+import { KnownAssetBalanceInfo } from '../providers/GeneralWalletProvider';
+export type WalletAssets = Record<string, KnownAssetBalanceInfo>;
+export declare const useWalletAssets: ({ enableRefetchInterval, refetchOnMount, }: {
+    enableRefetchInterval?: boolean | undefined;
+    refetchOnMount?: boolean | undefined;
+}) => {
+    walletAssets: WalletAssets | undefined;
+    totalWalletAssetsUsd: number;
+    isLoading: boolean;
+    isFetching: boolean;
+};