@0xsquid/ui 0.19.5 → 0.20.1-beta.0

package/dist/esm/types/components/badges/BadgeImage.d.ts

@@ -4,7 +4,12 @@ interface BadgeImageProps {
     size?: BadgeSize;
     extraMarginForBadge?: boolean;
     rounded?: boolean;
+    /**
+     * The URL of the placeholder image. Will be displayed while the images are loading
+     * or if there's an error loading them.
+     */
+    placeholderImageUrl?: string;
 }
 type BadgeSize = 'sm' | 'md';
-export declare function BadgeImage({ imageUrl, badgeUrl, size, extraMarginForBadge, rounded, }: BadgeImageProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function BadgeImage({ imageUrl: _imageUrl, badgeUrl, size, extraMarginForBadge, rounded, placeholderImageUrl, }: BadgeImageProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/esm/types/components/buttons/AssetsButton.d.ts

@@ -1,4 +1,5 @@
 import { AssetsButtonVariant } from '../../types/components';
+import { TooltipProps } from '../controls';
 interface AssetsButtonProps {
     token?: {
         iconUrl: string;
@@ -13,6 +14,7 @@ interface AssetsButtonProps {
     onClick?: () => void;
     variant?: AssetsButtonVariant;
     isLoading?: boolean;
+    tooltip?: Omit<TooltipProps, 'children'>;
 }
-export declare function AssetsButton({ chain, token, onClick, variant, isLoading, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssetsButton({ chain, token, onClick, variant, isLoading, tooltip, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/buttons/BoostButton.d.ts

@@ -3,9 +3,7 @@ import { BoostMode } from '../../types/components';
 interface BoostButtonProps {
     boostMode: BoostMode;
     canToggleBoostMode?: boolean;
-    boostDisabledMessage?: string;
-    tooltipDisplayDelayMs?: number;
     boostIndicatorRef: React.RefObject<HTMLDivElement>;
 }
-export declare function BoostButton({ boostMode, canToggleBoostMode, boostDisabledMessage, tooltipDisplayDelayMs, boostIndicatorRef, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function BoostButton({ boostMode, canToggleBoostMode, boostIndicatorRef, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/buttons/FeeButton.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
+import { TooltipProps } from '../controls';
 interface FeeButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     feeInUsd?: string;
     chipLabel?: string;
+    tooltip?: Omit<TooltipProps, 'children'>;
 }
-export declare function FeeButton({ feeInUsd, chipLabel, className, ...props }: FeeButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeeButton({ feeInUsd, chipLabel, className, tooltip, ...props }: FeeButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/controls/NumericInput.d.ts

@@ -1,4 +1,5 @@
 import { SwapDirection } from '../../types/components';
+import { TooltipProps } from './Tooltip';
 interface Token {
     price: number;
     symbol: string;
@@ -21,9 +22,16 @@ interface NumericInputProps {
     priceImpactPercentage?: string;
     criticalPriceImpactPercentage?: number;
     direction?: SwapDirection;
-    amountUsd?: string;
+    inputModeButton?: {
+        usdModeTooltip?: Omit<TooltipProps, 'children'>;
+        tokenModeTooltip?: Omit<TooltipProps, 'children'>;
+        amountUsd?: string;
+    };
     maxUsdDecimals?: number;
     isInteractive?: boolean;
+    balanceButton?: {
+        tooltip?: Omit<TooltipProps, 'children'>;
+    };
 }
-export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, amountUsd, isInteractive, }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/controls/Tooltip.d.ts

@@ -3,7 +3,7 @@ export type TooltipWidth = 'max' | 'container';
 export type TooltipThreshold = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
 export interface TooltipProps {
     children: React.ReactNode;
-    tooltipContent: React.ReactNode;
+    tooltipContent?: React.ReactNode;
     threshold?: TooltipThreshold;
     tooltipWidth?: TooltipWidth;
     containerClassName?: string;

package/dist/esm/types/components/icons/index.d.ts

@@ -0,0 +1 @@
+export { Loader } from './Loader';

package/dist/esm/types/components/index.d.ts

@@ -5,3 +5,4 @@ export * from './layout';
 export * from './lists';
 export * from './typography';
 export * from './views';
+export * from './icons';

package/dist/esm/types/components/layout/Boost.d.ts

@@ -1,13 +1,13 @@
 import { BoostMode } from '../../types/components';
+import { TooltipProps } from '../controls';
 interface BoostProps {
     boostMode: BoostMode;
     onToggleBoostMode?: ({ boostMode }: {
         boostMode: BoostMode;
     }) => void;
     estimatedTime: string;
-    boostDisabledMessage?: string;
     canToggleBoostMode?: boolean;
-    boostTooltipDisplayDelayMs?: number;
+    tooltip?: Omit<TooltipProps, 'children'>;
 }
-export declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, boostTooltipDisplayDelayMs, }: BoostProps): import("react/jsx-runtime").JSX.Element;
+export declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, canToggleBoostMode, tooltip, }: BoostProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/layout/DetailsToolbar.d.ts

@@ -1,28 +1,32 @@
 import { BoostMode } from '../../types/components';
+import { TooltipProps } from '../controls';
 interface DetailsToolbarProps {
     errorMessage?: string;
-    boostMode?: BoostMode;
-    onToggleBoostMode?: ({ boostMode }: {
-        boostMode: BoostMode;
-    }) => void;
-    onInvertSwapButtonClick?: () => void;
-    onFeeButtonClick?: () => void;
     flipButton?: {
-        disabledMessage: string;
-        isDisabled: boolean;
-        tooltipDisplayDelayMs: number;
+        onClick?: () => void;
+        tooltip?: Omit<TooltipProps, 'children'>;
+        isDisabled?: boolean;
+    };
+    feeButton?: {
+        feeInUsd: string;
+        tooltip?: Omit<TooltipProps, 'children'>;
+        onClick: () => void;
     };
-    feeInUsd?: string;
     estimatedTime?: string;
-    canToggleBoostMode?: boolean;
-    boostDisabledMessage?: string;
     isLoading?: boolean;
     isEmpty?: boolean;
     helpButton?: {
         label: string;
         onClick: () => void;
     };
-    boostTooltipDisplayDelayMs?: number;
+    boostButton?: {
+        tooltip?: Omit<TooltipProps, 'children'>;
+        onClick?: ({ boostMode }: {
+            boostMode: BoostMode;
+        }) => void;
+        canToggleBoostMode?: boolean;
+        boostMode?: BoostMode;
+    };
 }
-export declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, flipButton, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DetailsToolbar({ errorMessage, estimatedTime, helpButton, isLoading, isEmpty, flipButton, feeButton, boostButton, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/layout/NavigationBar.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
+import { TooltipProps } from '../controls';
 type ActionButton = {
     labelOrIcon: string | React.ReactNode;
     onClick?: () => void;
     id: React.Key;
+    tooltip?: Omit<TooltipProps, 'children'>;
 };
 interface NavigationBarProps {
     title?: string;

package/dist/esm/types/components/layout/SwapConfiguration.d.ts

@@ -1,10 +1,10 @@
 import { AssetsButtonVariant, SwapDirection } from '../../types/components';
+import { TooltipProps } from '../controls';
 interface SwapConfigurationProps {
     direction: SwapDirection;
     priceImpactPercentage?: string;
     amount?: string;
     forcedAmount?: string;
-    amountUsd?: string;
     tokenPrice?: number;
     balance?: string;
     isFetching?: boolean;
@@ -19,19 +19,33 @@ interface SwapConfigurationProps {
         textColor: string;
         decimals: number;
     };
-    address?: string;
     onAmountChange?: (amount: string) => void;
-    onWalletButtonClick?: () => void;
-    onAssetsButtonClick?: () => void;
     error?: {
         message: string;
     };
     criticalPriceImpactPercentage?: number;
-    emptyAddressLabel?: string;
-    assetsButtonVariant?: AssetsButtonVariant;
     maxUsdDecimals?: number;
     isInputInteractive?: boolean;
     isLoading?: boolean;
+    inputModeButton?: {
+        usdModeTooltip?: Omit<TooltipProps, 'children'>;
+        tokenModeTooltip?: Omit<TooltipProps, 'children'>;
+        amountUsd?: string;
+    };
+    balanceButton?: {
+        tooltip?: Omit<TooltipProps, 'children'>;
+    };
+    assetsButton?: {
+        tooltip?: Omit<TooltipProps, 'children'>;
+        onClick?: () => void;
+        variant?: AssetsButtonVariant;
+    };
+    walletButton?: {
+        tooltip?: Omit<TooltipProps, 'children'>;
+        onClick?: () => void;
+        address?: string;
+        emptyAddressLabel?: string;
+    };
 }
-export declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive, isLoading, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive, isLoading, inputModeButton, balanceButton, assetsButton, walletButton, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/lists/ListItem.d.ts

@@ -3,6 +3,7 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemTitle: string | React.ReactNode;
     mainImageUrl?: string;
     secondaryImageUrl?: string;
+    placeholderImageUrl?: string;
     subtitle?: string;
     subtitleOnHover?: React.ReactNode;
     detail?: string;
@@ -22,5 +23,5 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     compactOnMobile?: boolean;
 }
 type ListItemSize = 'small' | 'large';
-export declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/stories/badges/BadgeImage.stories.d.ts

@@ -9,3 +9,7 @@ export declare const ExtraMarginForBadge: Story;
 export declare const Rounded: Story;
 export declare const SizeMedium: Story;
 export declare const SizeSmall: Story;
+export declare const CustomPlaceholderForBrokenImage: Story;
+export declare const CustomPlaceholderForLoadingImage: Story;
+export declare const CustomPlaceholderForBrokenBadgeImage: Story;
+export declare const CustomPlaceholderForLoadingBadgeImage: Story;

package/dist/esm/types/stories/buttons/AssetsButton.stories.d.ts

@@ -12,3 +12,4 @@ export declare const TokenOnly: Story;
 export declare const ChainAndTokenLightText: Story;
 export declare const ChainAndTokenDarkText: Story;
 export declare const LongTokenSymbol: Story;
+export declare const Tooltip: Story;

package/dist/esm/types/stories/buttons/FeeButton.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof FeeButton>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Tooltip: Story;

package/dist/esm/types/stories/layout/Boost.stories.d.ts

@@ -5,6 +5,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Normal: Story;
 export declare const Boosted: Story;
+export declare const Tooltip: Story;
 export declare const NormalDisabled: Story;
 export declare const BoostedDisabled: Story;
 export declare const DisabledWithDelayedTooltip: Story;

package/dist/esm/types/stories/layout/DetailsToolbar.stories.d.ts

@@ -9,6 +9,9 @@ export declare const Empty: Story;
 export declare const EmptyLoading: Story;
 export declare const Error: Story;
 export declare const ErrorHelpButton: Story;
-export declare const BoostDisabled: Story;
+export declare const BoostButtonWithTooltip: Story;
+export declare const BoostDisabledWithTooltip: Story;
 export declare const BoostDisabledWithDelayedTooltip: Story;
+export declare const FlipButtonWithTooltip: Story;
 export declare const FlipButtonDisabled: Story;
+export declare const FeeButtonTooltip: Story;

package/dist/esm/types/stories/layout/SwapConfiguration.stories.d.ts

@@ -23,3 +23,4 @@ export declare const ToDirection: Story;
 export declare const FromAddressEmpty: Story;
 export declare const ToAddressEmpty: Story;
 export declare const Error: Story;
+export declare const WithTooltips: Story;