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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/cjs/index.js +17 -35
  2. package/dist/cjs/types/components/badges/BadgeImage.d.ts +1 -6
  3. package/dist/cjs/types/components/icons/index.d.ts +52 -1
  4. package/dist/cjs/types/components/index.d.ts +0 -1
  5. package/dist/cjs/types/components/layout/SwapConfiguration.d.ts +1 -0
  6. package/dist/cjs/types/components/lists/ListItem.d.ts +1 -2
  7. package/dist/cjs/types/stories/badges/BadgeImage.stories.d.ts +0 -4
  8. package/dist/cjs/types/stories/layout/SwapConfiguration.stories.d.ts +2 -0
  9. package/dist/esm/index.js +18 -35
  10. package/dist/esm/types/components/badges/BadgeImage.d.ts +1 -6
  11. package/dist/esm/types/components/icons/index.d.ts +52 -1
  12. package/dist/esm/types/components/index.d.ts +0 -1
  13. package/dist/esm/types/components/layout/SwapConfiguration.d.ts +1 -0
  14. package/dist/esm/types/components/lists/ListItem.d.ts +1 -2
  15. package/dist/esm/types/stories/badges/BadgeImage.stories.d.ts +0 -4
  16. package/dist/esm/types/stories/layout/SwapConfiguration.stories.d.ts +2 -0
  17. package/dist/index.d.ts +4 -16
  18. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -2637,41 +2637,24 @@ const mainImageSizeClassMap = {
2637
2637
  md: 'tw-w-10 tw-h-10',
2638
2638
  };
2639
2639
  const loadingSkeletonClassName = 'tw-bg-grey-500';
2640
- var ImageState;
2641
- (function (ImageState) {
2642
- ImageState[ImageState["LOADING"] = 0] = "LOADING";
2643
- ImageState[ImageState["LOADED"] = 1] = "LOADED";
2644
- ImageState[ImageState["ERROR"] = 2] = "ERROR";
2645
- })(ImageState || (ImageState = {}));
2646
- function BadgeImage({ imageUrl: _imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, rounded = false, placeholderImageUrl, }) {
2647
- const imageUrl = (_imageUrl === null || _imageUrl === void 0 ? void 0 : _imageUrl.trim()) || placeholderImageUrl;
2640
+ function BadgeImage({ imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, rounded = false, }) {
2648
2641
  const [imagesLoadState, setImageLoadState] = React.useState({
2649
- badge: ImageState.LOADING,
2650
- mainImage: ImageState.LOADING,
2642
+ badgeLoaded: false,
2643
+ mainImageLoaded: false,
2651
2644
  });
2652
2645
  const badgeImageClassName = cn('tw-absolute -tw-right-1/3 tw-bottom-0 tw-z-10 tw-m-0 -tw-translate-x-1/3 tw-rounded-md tw-border-[1px] tw-border-grey-800', badgeSizeClassMap[size]);
2653
2646
  const mainImageClassName = cn('tw-h-full tw-w-full tw-absolute', rounded ? ' tw-rounded-full' : 'tw-rounded-squid-xs');
2654
- return imageUrl ? (jsxRuntime.jsxs("div", { className: cn('tw-relative', extraMarginForBadge && badgeUrl ? 'tw-mr-1.5' : null, mainImageSizeClassMap[size]), children: [imagesLoadState.mainImage !== ImageState.LOADED &&
2655
- (placeholderImageUrl ? (jsxRuntime.jsx("img", { src: placeholderImageUrl, alt: "", className: mainImageClassName })) : (jsxRuntime.jsx("div", { className: cn(mainImageClassName, loadingSkeletonClassName) }))), jsxRuntime.jsx("img", { src: imageUrl, alt: "", onError: () => {
2656
- setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { mainImage: ImageState.ERROR })));
2657
- }, onLoad: () => {
2647
+ return imageUrl ? (jsxRuntime.jsxs("div", { className: cn('tw-relative', extraMarginForBadge && badgeUrl ? 'tw-mr-1.5' : null, mainImageSizeClassMap[size]), children: [!imagesLoadState.mainImageLoaded && (jsxRuntime.jsx("div", { className: cn(mainImageClassName, loadingSkeletonClassName) })), jsxRuntime.jsx("img", { src: imageUrl, alt: "", onLoad: () => {
2658
2648
  // update state when image is fully loaded
2659
- setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { mainImage: ImageState.LOADED })));
2649
+ setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { mainImageLoaded: true })));
2660
2650
  }, className: cn(mainImageClassName,
2661
2651
  // hide main image while it is loading, and display it when it is loaded
2662
- imagesLoadState.mainImage === ImageState.LOADED
2663
- ? 'tw-block'
2664
- : 'tw-hidden') }), badgeUrl ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [imagesLoadState.badge !== ImageState.LOADED &&
2665
- (placeholderImageUrl ? (jsxRuntime.jsx("img", { src: placeholderImageUrl, alt: "", className: badgeImageClassName })) : (jsxRuntime.jsx("div", { className: cn(badgeImageClassName, loadingSkeletonClassName) }))), jsxRuntime.jsx("img", { src: badgeUrl, alt: "", onError: () => {
2666
- setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { badge: ImageState.ERROR })));
2667
- }, onLoad: () => {
2652
+ imagesLoadState.mainImageLoaded ? 'tw-block' : 'tw-hidden') }), badgeUrl ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!imagesLoadState.badgeLoaded && (jsxRuntime.jsx("div", { className: cn(badgeImageClassName, loadingSkeletonClassName) })), jsxRuntime.jsx("img", { src: badgeUrl, alt: "", onLoad: () => {
2668
2653
  // update state when badge image is fully loaded
2669
- setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { badge: ImageState.LOADED })));
2654
+ setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { badgeLoaded: true })));
2670
2655
  }, className: cn(badgeImageClassName,
2671
2656
  // hide badge image while it is loading, and display it when it is loaded
2672
- imagesLoadState.badge === ImageState.LOADED
2673
- ? 'tw-block'
2674
- : 'tw-hidden') })] })) : null] })) : null;
2657
+ imagesLoadState.badgeLoaded ? 'tw-block' : 'tw-hidden') })] })) : null] })) : null;
2675
2658
  }
2676
2659
 
2677
2660
  /******************************************************************************
@@ -17085,7 +17068,7 @@ const collapsedListItemClassMap = {
17085
17068
  large: 'tw-w-[80px]',
17086
17069
  };
17087
17070
  function ListItem(_a) {
17088
- var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps, compactOnMobile } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "placeholderImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile"]);
17071
+ var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps, compactOnMobile } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile"]);
17089
17072
  const subtitleClassName = cn('tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500', compactOnMobile ? 'tw-hidden mobile-lg:tw-block' : 'tw-block');
17090
17073
  // 'small' variant does not have detail
17091
17074
  const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
@@ -17118,7 +17101,7 @@ function ListItem(_a) {
17118
17101
  const itemProps = isInteractive ? props : {};
17119
17102
  return (jsxRuntime.jsx("li", Object.assign({}, containerProps, { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], compactOnMobile
17120
17103
  ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
17121
- : 'tw-w-full', className), children: jsxRuntime.jsxs(ItemTag, Object.assign({}, itemProps, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs', isSelected && 'tw-bg-material-light-thin', isInteractive && 'hover:tw-bg-material-light-thin'), children: [size === 'large' ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, placeholderImageUrl: placeholderImageUrl, size: "md", rounded: rounded })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs',
17104
+ : 'tw-w-full', className), children: jsxRuntime.jsxs(ItemTag, Object.assign({}, itemProps, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs', isSelected && 'tw-bg-material-light-thin', isInteractive && 'hover:tw-bg-material-light-thin'), children: [size === 'large' ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs',
17122
17105
  // 'large' variant has extra padding
17123
17106
  size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsxRuntime.jsx(BodyText, { size: "small", className: cn('tw-max-w-full tw-truncate', subtitle && 'tw-h-[17px] !tw-leading-[17px]', compactOnMobile ? 'tw-hidden mobile-lg:tw-block' : 'tw-block'), children: itemTitle })) : (itemTitle), size === 'large' &&
17124
17107
  ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (loadingComponent()) : subtitle ? (jsxRuntime.jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsxRuntime.jsx(CaptionText, { className: cn(subtitleClassName, 'tw-hidden group-hover/list-item:tw-block'), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxRuntime.jsxs(DetailTag, Object.assign({}, detailProps, { className: cn('tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
@@ -18102,13 +18085,13 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
18102
18085
  const isWalletButtonInteractive = !isLoading && !!(walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick);
18103
18086
  const WalletButtonTag = isWalletButtonInteractive ? 'button' : 'div';
18104
18087
  const isFetching = isFetchingProp || isLoading;
18105
- return (jsxRuntime.jsxs("section", { className: "tw-relative tw-h-[211px] tw-max-h-[211px] tw-w-full tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-h-[205px] mobile-lg:tw-max-h-[205px] mobile-lg:tw-w-card-large", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(Tooltip, Object.assign({}, walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxRuntime.jsxs(WalletButtonTag, { onClick: isWalletButtonInteractive ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick : undefined, className: cn('-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600', isWalletButtonInteractive && 'hover:tw-bg-material-light-thin', isLoading && 'tw-opacity-50'), children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), !isLoading && (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
18106
- ? 'tw-text-grey-300'
18107
- : 'tw-text-royal-400', children: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
18108
- ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.address
18109
- : (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) !== null && _a !== void 0 ? _a : 'Connect wallet' }), jsxRuntime.jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
18110
- ? 'tw-text-grey-600'
18111
- : 'tw-text-royal-400' })] }))] }) })) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsxRuntime.jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsxRuntime.jsx(NumericInput, { token: {
18088
+ return (jsxRuntime.jsxs("section", { className: "tw-relative tw-h-[211px] tw-max-h-[211px] tw-w-full tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-h-[205px] mobile-lg:tw-max-h-[205px] mobile-lg:tw-w-card-large", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(Tooltip, Object.assign({}, walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxRuntime.jsxs(WalletButtonTag, { onClick: isWalletButtonInteractive ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick : undefined, className: cn('-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600', isWalletButtonInteractive && 'hover:tw-bg-material-light-thin', isLoading && 'tw-opacity-50'), children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), !isLoading && !(walletButton === null || walletButton === void 0 ? void 0 : walletButton.disabled) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
18089
+ ? 'tw-text-grey-300'
18090
+ : 'tw-text-royal-400', children: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
18091
+ ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.address
18092
+ : (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) !== null && _a !== void 0 ? _a : 'Connect wallet' }), jsxRuntime.jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
18093
+ ? 'tw-text-grey-600'
18094
+ : 'tw-text-royal-400' })] })] }))] }) })) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsxRuntime.jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsxRuntime.jsx(NumericInput, { token: {
18112
18095
  decimals: (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18,
18113
18096
  symbol: (_c = token === null || token === void 0 ? void 0 : token.symbol) !== null && _c !== void 0 ? _c : '',
18114
18097
  price: tokenPrice,
@@ -60290,7 +60273,6 @@ exports.InteractionTransactionView = InteractionTransactionView;
60290
60273
  exports.Join = Join;
60291
60274
  exports.List = List;
60292
60275
  exports.ListItem = ListItem;
60293
- exports.Loader = Loader;
60294
60276
  exports.LoadingProvider = LoadingProvider;
60295
60277
  exports.LoadingSkeleton = LoadingSkeleton;
60296
60278
  exports.MEDIA_QUERIES = MEDIA_QUERIES;
package/dist/cjs/types/components/badges/BadgeImage.d.ts CHANGED
@@ -4,12 +4,7 @@ interface BadgeImageProps {
4
4
  size?: BadgeSize;
5
5
  extraMarginForBadge?: boolean;
6
6
  rounded?: boolean;
7
- /**
8
- * The URL of the placeholder image. Will be displayed while the images are loading
9
- * or if there's an error loading them.
10
- */
11
- placeholderImageUrl?: string;
12
7
  }
13
8
  type BadgeSize = 'sm' | 'md';
14
- export declare function BadgeImage({ imageUrl: _imageUrl, badgeUrl, size, extraMarginForBadge, rounded, placeholderImageUrl, }: BadgeImageProps): import("react/jsx-runtime").JSX.Element | null;
9
+ export declare function BadgeImage({ imageUrl, badgeUrl, size, extraMarginForBadge, rounded, }: BadgeImageProps): import("react/jsx-runtime").JSX.Element | null;
15
10
  export {};
package/dist/cjs/types/components/icons/index.d.ts CHANGED
@@ -1 +1,52 @@
1
- export { Loader } from './Loader';
1
+ export * from './Approve';
2
+ export * from './Arrow';
3
+ export * from './ArrowRotate';
4
+ export * from './Avatars';
5
+ export * from './Bag';
6
+ export * from './Bank';
7
+ export * from './BoostBadge';
8
+ export * from './Calendar';
9
+ export * from './ChainLink';
10
+ export * from './Checkmark';
11
+ export * from './Clock';
12
+ export * from './Coins';
13
+ export * from './Collection';
14
+ export * from './CompassRound';
15
+ export * from './Copy';
16
+ export * from './DashboardFast';
17
+ export * from './DotGrid';
18
+ export * from './EmojiSad';
19
+ export * from './Ethereum';
20
+ export * from './Filter';
21
+ export * from './Heart';
22
+ export * from './Help';
23
+ export * from './HomeIcon';
24
+ export * from './ImageSparkle';
25
+ export * from './index';
26
+ export * from './Infinity';
27
+ export * from './Lightning';
28
+ export * from './Link';
29
+ export * from './Loader';
30
+ export * from './Max';
31
+ export * from './NotAllowed';
32
+ export * from './Percent';
33
+ export * from './PieChart';
34
+ export * from './Plus';
35
+ export * from './Refresh';
36
+ export * from './Search';
37
+ export * from './Social';
38
+ export * from './Sort';
39
+ export * from './Sparkles';
40
+ export * from './SquareArrowCenter';
41
+ export * from './SquidIcons';
42
+ export * from './SquidLogo';
43
+ export * from './SwapInputs';
44
+ export * from './SwapStatus';
45
+ export * from './SwapStepSeparator';
46
+ export * from './Tag';
47
+ export * from './ThumbsUp';
48
+ export * from './Tick';
49
+ export * from './Timeline';
50
+ export * from './TradingViewSteps';
51
+ export * from './TriangleExclamation';
52
+ export * from './Wallet';
package/dist/cjs/types/components/index.d.ts CHANGED
@@ -5,4 +5,3 @@ export * from './layout';
5
5
  export * from './lists';
6
6
  export * from './typography';
7
7
  export * from './views';
8
- export * from './icons';
package/dist/cjs/types/components/layout/SwapConfiguration.d.ts CHANGED
@@ -45,6 +45,7 @@ interface SwapConfigurationProps {
45
45
  onClick?: () => void;
46
46
  address?: string;
47
47
  emptyAddressLabel?: string;
48
+ disabled?: boolean;
48
49
  };
49
50
  }
50
51
  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;
package/dist/cjs/types/components/lists/ListItem.d.ts CHANGED
@@ -3,7 +3,6 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
3
3
  itemTitle: string | React.ReactNode;
4
4
  mainImageUrl?: string;
5
5
  secondaryImageUrl?: string;
6
- placeholderImageUrl?: string;
7
6
  subtitle?: string;
8
7
  subtitleOnHover?: React.ReactNode;
9
8
  detail?: string;
@@ -23,5 +22,5 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
23
22
  compactOnMobile?: boolean;
24
23
  }
25
24
  type ListItemSize = 'small' | 'large';
26
- 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;
25
+ 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;
27
26
  export {};
package/dist/cjs/types/stories/badges/BadgeImage.stories.d.ts CHANGED
@@ -9,7 +9,3 @@ export declare const ExtraMarginForBadge: Story;
9
9
  export declare const Rounded: Story;
10
10
  export declare const SizeMedium: Story;
11
11
  export declare const SizeSmall: Story;
12
- export declare const CustomPlaceholderForBrokenImage: Story;
13
- export declare const CustomPlaceholderForLoadingImage: Story;
14
- export declare const CustomPlaceholderForBrokenBadgeImage: Story;
15
- export declare const CustomPlaceholderForLoadingBadgeImage: Story;
package/dist/cjs/types/stories/layout/SwapConfiguration.stories.d.ts CHANGED
@@ -24,3 +24,5 @@ export declare const FromAddressEmpty: Story;
24
24
  export declare const ToAddressEmpty: Story;
25
25
  export declare const Error: Story;
26
26
  export declare const WithTooltips: Story;
27
+ export declare const WithoutSourceConnectLabels: Story;
28
+ export declare const WithoutDestConnectLabels: Story;
package/dist/esm/index.js CHANGED
@@ -2617,41 +2617,24 @@ const mainImageSizeClassMap = {
2617
2617
  md: 'tw-w-10 tw-h-10',
2618
2618
  };
2619
2619
  const loadingSkeletonClassName = 'tw-bg-grey-500';
2620
- var ImageState;
2621
- (function (ImageState) {
2622
- ImageState[ImageState["LOADING"] = 0] = "LOADING";
2623
- ImageState[ImageState["LOADED"] = 1] = "LOADED";
2624
- ImageState[ImageState["ERROR"] = 2] = "ERROR";
2625
- })(ImageState || (ImageState = {}));
2626
- function BadgeImage({ imageUrl: _imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, rounded = false, placeholderImageUrl, }) {
2627
- const imageUrl = (_imageUrl === null || _imageUrl === void 0 ? void 0 : _imageUrl.trim()) || placeholderImageUrl;
2620
+ function BadgeImage({ imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, rounded = false, }) {
2628
2621
  const [imagesLoadState, setImageLoadState] = useState({
2629
- badge: ImageState.LOADING,
2630
- mainImage: ImageState.LOADING,
2622
+ badgeLoaded: false,
2623
+ mainImageLoaded: false,
2631
2624
  });
2632
2625
  const badgeImageClassName = cn('tw-absolute -tw-right-1/3 tw-bottom-0 tw-z-10 tw-m-0 -tw-translate-x-1/3 tw-rounded-md tw-border-[1px] tw-border-grey-800', badgeSizeClassMap[size]);
2633
2626
  const mainImageClassName = cn('tw-h-full tw-w-full tw-absolute', rounded ? ' tw-rounded-full' : 'tw-rounded-squid-xs');
2634
- return imageUrl ? (jsxs("div", { className: cn('tw-relative', extraMarginForBadge && badgeUrl ? 'tw-mr-1.5' : null, mainImageSizeClassMap[size]), children: [imagesLoadState.mainImage !== ImageState.LOADED &&
2635
- (placeholderImageUrl ? (jsx("img", { src: placeholderImageUrl, alt: "", className: mainImageClassName })) : (jsx("div", { className: cn(mainImageClassName, loadingSkeletonClassName) }))), jsx("img", { src: imageUrl, alt: "", onError: () => {
2636
- setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { mainImage: ImageState.ERROR })));
2637
- }, onLoad: () => {
2627
+ return imageUrl ? (jsxs("div", { className: cn('tw-relative', extraMarginForBadge && badgeUrl ? 'tw-mr-1.5' : null, mainImageSizeClassMap[size]), children: [!imagesLoadState.mainImageLoaded && (jsx("div", { className: cn(mainImageClassName, loadingSkeletonClassName) })), jsx("img", { src: imageUrl, alt: "", onLoad: () => {
2638
2628
  // update state when image is fully loaded
2639
- setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { mainImage: ImageState.LOADED })));
2629
+ setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { mainImageLoaded: true })));
2640
2630
  }, className: cn(mainImageClassName,
2641
2631
  // hide main image while it is loading, and display it when it is loaded
2642
- imagesLoadState.mainImage === ImageState.LOADED
2643
- ? 'tw-block'
2644
- : 'tw-hidden') }), badgeUrl ? (jsxs(Fragment, { children: [imagesLoadState.badge !== ImageState.LOADED &&
2645
- (placeholderImageUrl ? (jsx("img", { src: placeholderImageUrl, alt: "", className: badgeImageClassName })) : (jsx("div", { className: cn(badgeImageClassName, loadingSkeletonClassName) }))), jsx("img", { src: badgeUrl, alt: "", onError: () => {
2646
- setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { badge: ImageState.ERROR })));
2647
- }, onLoad: () => {
2632
+ imagesLoadState.mainImageLoaded ? 'tw-block' : 'tw-hidden') }), badgeUrl ? (jsxs(Fragment, { children: [!imagesLoadState.badgeLoaded && (jsx("div", { className: cn(badgeImageClassName, loadingSkeletonClassName) })), jsx("img", { src: badgeUrl, alt: "", onLoad: () => {
2648
2633
  // update state when badge image is fully loaded
2649
- setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { badge: ImageState.LOADED })));
2634
+ setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { badgeLoaded: true })));
2650
2635
  }, className: cn(badgeImageClassName,
2651
2636
  // hide badge image while it is loading, and display it when it is loaded
2652
- imagesLoadState.badge === ImageState.LOADED
2653
- ? 'tw-block'
2654
- : 'tw-hidden') })] })) : null] })) : null;
2637
+ imagesLoadState.badgeLoaded ? 'tw-block' : 'tw-hidden') })] })) : null] })) : null;
2655
2638
  }
2656
2639
 
2657
2640
  /******************************************************************************
@@ -17065,7 +17048,7 @@ const collapsedListItemClassMap = {
17065
17048
  large: 'tw-w-[80px]',
17066
17049
  };
17067
17050
  function ListItem(_a) {
17068
- var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps, compactOnMobile } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "placeholderImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile"]);
17051
+ var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps, compactOnMobile } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile"]);
17069
17052
  const subtitleClassName = cn('tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500', compactOnMobile ? 'tw-hidden mobile-lg:tw-block' : 'tw-block');
17070
17053
  // 'small' variant does not have detail
17071
17054
  const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
@@ -17098,7 +17081,7 @@ function ListItem(_a) {
17098
17081
  const itemProps = isInteractive ? props : {};
17099
17082
  return (jsx("li", Object.assign({}, containerProps, { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], compactOnMobile
17100
17083
  ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
17101
- : 'tw-w-full', className), children: jsxs(ItemTag, Object.assign({}, itemProps, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs', isSelected && 'tw-bg-material-light-thin', isInteractive && 'hover:tw-bg-material-light-thin'), children: [size === 'large' ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, placeholderImageUrl: placeholderImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs',
17084
+ : 'tw-w-full', className), children: jsxs(ItemTag, Object.assign({}, itemProps, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs', isSelected && 'tw-bg-material-light-thin', isInteractive && 'hover:tw-bg-material-light-thin'), children: [size === 'large' ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs',
17102
17085
  // 'large' variant has extra padding
17103
17086
  size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsx(BodyText, { size: "small", className: cn('tw-max-w-full tw-truncate', subtitle && 'tw-h-[17px] !tw-leading-[17px]', compactOnMobile ? 'tw-hidden mobile-lg:tw-block' : 'tw-block'), children: itemTitle })) : (itemTitle), size === 'large' &&
17104
17087
  ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (loadingComponent()) : subtitle ? (jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsx(CaptionText, { className: cn(subtitleClassName, 'tw-hidden group-hover/list-item:tw-block'), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxs(DetailTag, Object.assign({}, detailProps, { className: cn('tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
@@ -18082,13 +18065,13 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
18082
18065
  const isWalletButtonInteractive = !isLoading && !!(walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick);
18083
18066
  const WalletButtonTag = isWalletButtonInteractive ? 'button' : 'div';
18084
18067
  const isFetching = isFetchingProp || isLoading;
18085
- return (jsxs("section", { className: "tw-relative tw-h-[211px] tw-max-h-[211px] tw-w-full tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-h-[205px] mobile-lg:tw-max-h-[205px] mobile-lg:tw-w-card-large", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", children: jsx(Tooltip, Object.assign({}, walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxs(WalletButtonTag, { onClick: isWalletButtonInteractive ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick : undefined, className: cn('-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600', isWalletButtonInteractive && 'hover:tw-bg-material-light-thin', isLoading && 'tw-opacity-50'), children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { size: "small", children: ":" }), !isLoading && (jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
18086
- ? 'tw-text-grey-300'
18087
- : 'tw-text-royal-400', children: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
18088
- ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.address
18089
- : (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) !== null && _a !== void 0 ? _a : 'Connect wallet' }), jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
18090
- ? 'tw-text-grey-600'
18091
- : 'tw-text-royal-400' })] }))] }) })) }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsx(NumericInput, { token: {
18068
+ return (jsxs("section", { className: "tw-relative tw-h-[211px] tw-max-h-[211px] tw-w-full tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-h-[205px] mobile-lg:tw-max-h-[205px] mobile-lg:tw-w-card-large", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", children: jsx(Tooltip, Object.assign({}, walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxs(WalletButtonTag, { onClick: isWalletButtonInteractive ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick : undefined, className: cn('-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600', isWalletButtonInteractive && 'hover:tw-bg-material-light-thin', isLoading && 'tw-opacity-50'), children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), !isLoading && !(walletButton === null || walletButton === void 0 ? void 0 : walletButton.disabled) && (jsxs(Fragment, { children: [jsx(BodyText, { size: "small", children: ":" }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
18069
+ ? 'tw-text-grey-300'
18070
+ : 'tw-text-royal-400', children: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
18071
+ ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.address
18072
+ : (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) !== null && _a !== void 0 ? _a : 'Connect wallet' }), jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
18073
+ ? 'tw-text-grey-600'
18074
+ : 'tw-text-royal-400' })] })] }))] }) })) }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsx(NumericInput, { token: {
18092
18075
  decimals: (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18,
18093
18076
  symbol: (_c = token === null || token === void 0 ? void 0 : token.symbol) !== null && _c !== void 0 ? _c : '',
18094
18077
  price: tokenPrice,
@@ -60214,4 +60197,4 @@ function SquidConfigProvider({ theme = lightTheme, children, themeType = 'light'
60214
60197
  return (jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: "tw-group tw-relative tw-h-screen tw-font-geist mobile-lg:tw-h-auto", children: children }));
60215
60198
  }
60216
60199
 
60217
- export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, ApproveAction, ArrowButton, AssetsButton, AssetsView, BadgeImage, BlockSkeleton, BodyText, Boost, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CaptionText, Chip, Collapse, DescriptionBlocks, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, FeeButton, FeesAction, FeesLines, FeesTotal, FilterButton, HashLink, HeadingText, HistoryItem, IconLabel, ImageIcon, IncompleteAction, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, List, ListItem, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, PipeSeparator, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, ReceiveNFTAction, ReceiveTokensAction, RecipientView, STEP_ITEM_HEIGHT, SectionTitle, SendTokensAction, SettingsButton, SettingsItem, SettingsSlider, SizeTransition, SquidConfigProvider, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapDetailsView, SwapHeader, SwapProgressView, SwapProgressViewHeader, SwapProperties, SwapStepItem, SwapStepsCollapsed, SwapTransactionView, Switch, TextSkeleton, Timestamp, Toast, TokenPair, Tooltip, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, UsdAmount, WalletLink, WalletsView, WrapAction, linkActionTimelineProps, statusBgClassMap$1 as statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu, useMediaQuery };
60200
+ export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, ApproveAction, ArrowButton, AssetsButton, AssetsView, BadgeImage, BlockSkeleton, BodyText, Boost, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CaptionText, Chip, Collapse, DescriptionBlocks, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, FeeButton, FeesAction, FeesLines, FeesTotal, FilterButton, HashLink, HeadingText, HistoryItem, IconLabel, ImageIcon, IncompleteAction, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, List, ListItem, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, PipeSeparator, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, ReceiveNFTAction, ReceiveTokensAction, RecipientView, STEP_ITEM_HEIGHT, SectionTitle, SendTokensAction, SettingsButton, SettingsItem, SettingsSlider, SizeTransition, SquidConfigProvider, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapDetailsView, SwapHeader, SwapProgressView, SwapProgressViewHeader, SwapProperties, SwapStepItem, SwapStepsCollapsed, SwapTransactionView, Switch, TextSkeleton, Timestamp, Toast, TokenPair, Tooltip, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, UsdAmount, WalletLink, WalletsView, WrapAction, linkActionTimelineProps, statusBgClassMap$1 as statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu, useMediaQuery };
package/dist/esm/types/components/badges/BadgeImage.d.ts CHANGED
@@ -4,12 +4,7 @@ interface BadgeImageProps {
4
4
  size?: BadgeSize;
5
5
  extraMarginForBadge?: boolean;
6
6
  rounded?: boolean;
7
- /**
8
- * The URL of the placeholder image. Will be displayed while the images are loading
9
- * or if there's an error loading them.
10
- */
11
- placeholderImageUrl?: string;
12
7
  }
13
8
  type BadgeSize = 'sm' | 'md';
14
- export declare function BadgeImage({ imageUrl: _imageUrl, badgeUrl, size, extraMarginForBadge, rounded, placeholderImageUrl, }: BadgeImageProps): import("react/jsx-runtime").JSX.Element | null;
9
+ export declare function BadgeImage({ imageUrl, badgeUrl, size, extraMarginForBadge, rounded, }: BadgeImageProps): import("react/jsx-runtime").JSX.Element | null;
15
10
  export {};
package/dist/esm/types/components/icons/index.d.ts CHANGED
@@ -1 +1,52 @@
1
- export { Loader } from './Loader';
1
+ export * from './Approve';
2
+ export * from './Arrow';
3
+ export * from './ArrowRotate';
4
+ export * from './Avatars';
5
+ export * from './Bag';
6
+ export * from './Bank';
7
+ export * from './BoostBadge';
8
+ export * from './Calendar';
9
+ export * from './ChainLink';
10
+ export * from './Checkmark';
11
+ export * from './Clock';
12
+ export * from './Coins';
13
+ export * from './Collection';
14
+ export * from './CompassRound';
15
+ export * from './Copy';
16
+ export * from './DashboardFast';
17
+ export * from './DotGrid';
18
+ export * from './EmojiSad';
19
+ export * from './Ethereum';
20
+ export * from './Filter';
21
+ export * from './Heart';
22
+ export * from './Help';
23
+ export * from './HomeIcon';
24
+ export * from './ImageSparkle';
25
+ export * from './index';
26
+ export * from './Infinity';
27
+ export * from './Lightning';
28
+ export * from './Link';
29
+ export * from './Loader';
30
+ export * from './Max';
31
+ export * from './NotAllowed';
32
+ export * from './Percent';
33
+ export * from './PieChart';
34
+ export * from './Plus';
35
+ export * from './Refresh';
36
+ export * from './Search';
37
+ export * from './Social';
38
+ export * from './Sort';
39
+ export * from './Sparkles';
40
+ export * from './SquareArrowCenter';
41
+ export * from './SquidIcons';
42
+ export * from './SquidLogo';
43
+ export * from './SwapInputs';
44
+ export * from './SwapStatus';
45
+ export * from './SwapStepSeparator';
46
+ export * from './Tag';
47
+ export * from './ThumbsUp';
48
+ export * from './Tick';
49
+ export * from './Timeline';
50
+ export * from './TradingViewSteps';
51
+ export * from './TriangleExclamation';
52
+ export * from './Wallet';
package/dist/esm/types/components/index.d.ts CHANGED
@@ -5,4 +5,3 @@ export * from './layout';
5
5
  export * from './lists';
6
6
  export * from './typography';
7
7
  export * from './views';
8
- export * from './icons';
package/dist/esm/types/components/layout/SwapConfiguration.d.ts CHANGED
@@ -45,6 +45,7 @@ interface SwapConfigurationProps {
45
45
  onClick?: () => void;
46
46
  address?: string;
47
47
  emptyAddressLabel?: string;
48
+ disabled?: boolean;
48
49
  };
49
50
  }
50
51
  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;
package/dist/esm/types/components/lists/ListItem.d.ts CHANGED
@@ -3,7 +3,6 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
3
3
  itemTitle: string | React.ReactNode;
4
4
  mainImageUrl?: string;
5
5
  secondaryImageUrl?: string;
6
- placeholderImageUrl?: string;
7
6
  subtitle?: string;
8
7
  subtitleOnHover?: React.ReactNode;
9
8
  detail?: string;
@@ -23,5 +22,5 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
23
22
  compactOnMobile?: boolean;
24
23
  }
25
24
  type ListItemSize = 'small' | 'large';
26
- 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;
25
+ 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;
27
26
  export {};
package/dist/esm/types/stories/badges/BadgeImage.stories.d.ts CHANGED
@@ -9,7 +9,3 @@ export declare const ExtraMarginForBadge: Story;
9
9
  export declare const Rounded: Story;
10
10
  export declare const SizeMedium: Story;
11
11
  export declare const SizeSmall: Story;
12
- export declare const CustomPlaceholderForBrokenImage: Story;
13
- export declare const CustomPlaceholderForLoadingImage: Story;
14
- export declare const CustomPlaceholderForBrokenBadgeImage: Story;
15
- export declare const CustomPlaceholderForLoadingBadgeImage: Story;
package/dist/esm/types/stories/layout/SwapConfiguration.stories.d.ts CHANGED
@@ -24,3 +24,5 @@ export declare const FromAddressEmpty: Story;
24
24
  export declare const ToAddressEmpty: Story;
25
25
  export declare const Error: Story;
26
26
  export declare const WithTooltips: Story;
27
+ export declare const WithoutSourceConnectLabels: Story;
28
+ export declare const WithoutDestConnectLabels: Story;
package/dist/index.d.ts CHANGED
@@ -11,14 +11,9 @@ interface BadgeImageProps {
11
11
  size?: BadgeSize;
12
12
  extraMarginForBadge?: boolean;
13
13
  rounded?: boolean;
14
- /**
15
- * The URL of the placeholder image. Will be displayed while the images are loading
16
- * or if there's an error loading them.
17
- */
18
- placeholderImageUrl?: string;
19
14
  }
20
15
  type BadgeSize = 'sm' | 'md';
21
- declare function BadgeImage({ imageUrl: _imageUrl, badgeUrl, size, extraMarginForBadge, rounded, placeholderImageUrl, }: BadgeImageProps): react_jsx_runtime.JSX.Element | null;
16
+ declare function BadgeImage({ imageUrl, badgeUrl, size, extraMarginForBadge, rounded, }: BadgeImageProps): react_jsx_runtime.JSX.Element | null;
22
17
 
23
18
  type TextSize = 'small' | 'medium' | 'large';
24
19
  type SwitchSize = 'small' | 'large';
@@ -910,7 +905,6 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
910
905
  itemTitle: string | React.ReactNode;
911
906
  mainImageUrl?: string;
912
907
  secondaryImageUrl?: string;
913
- placeholderImageUrl?: string;
914
908
  subtitle?: string;
915
909
  subtitleOnHover?: React.ReactNode;
916
910
  detail?: string;
@@ -930,7 +924,7 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
930
924
  compactOnMobile?: boolean;
931
925
  }
932
926
  type ListItemSize = 'small' | 'large';
933
- declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
927
+ declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
934
928
 
935
929
  interface MenuItemProps {
936
930
  label: string;
@@ -1448,6 +1442,7 @@ interface SwapConfigurationProps {
1448
1442
  onClick?: () => void;
1449
1443
  address?: string;
1450
1444
  emptyAddressLabel?: string;
1445
+ disabled?: boolean;
1451
1446
  };
1452
1447
  }
1453
1448
  declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive, isLoading, inputModeButton, balanceButton, assetsButton, walletButton, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
@@ -1955,13 +1950,6 @@ declare function TransactionViewLayout({ isLoading, header, properties, actions,
1955
1950
 
1956
1951
  declare function WalletsView(): react_jsx_runtime.JSX.Element;
1957
1952
 
1958
- interface LoaderProps extends ComponentProps<'svg'> {
1959
- size?: string;
1960
- strokeWidth?: string;
1961
- rotateDuration?: string;
1962
- }
1963
- declare function Loader({ size, strokeWidth, className, rotateDuration, ...props }: LoaderProps): react_jsx_runtime.JSX.Element;
1964
-
1965
1953
  type SquidTheme = {
1966
1954
  'content-100': string;
1967
1955
  'content-200': string;
@@ -2028,4 +2016,4 @@ declare const MEDIA_QUERIES: Record<MediaQuery, {
2028
2016
  value: string;
2029
2017
  }>;
2030
2018
 
2031
- export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, ApproveAction, ArrowButton, AssetsButton, type AssetsButtonVariant, AssetsView, BadgeImage, type BaseActionProps, type BaseTransactionViewProps, BlockSkeleton, BodyText, Boost, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CaptionText, Chip, Collapse, DescriptionBlocks, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FilterButton, HashLink, HeadingText, HistoryItem, type HistoryItemStatus, IconLabel, ImageIcon, IncompleteAction, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, List, ListItem, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, PipeSeparator, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, ReceiveNFTAction, ReceiveTokensAction, RecipientView, STEP_ITEM_HEIGHT, SectionTitle, SendTokensAction, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SizeTransition, SquidConfigProvider, type SquidTheme, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapDetailsView, SwapHeader, type SwapHeaderProps, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapTransactionView, Switch, TextSkeleton, type ThemeType, Timestamp, Toast, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, Transfer, UsdAmount, WalletLink, WalletsView, WrapAction, linkActionTimelineProps, statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu, useMediaQuery };
2019
+ export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, ApproveAction, ArrowButton, AssetsButton, type AssetsButtonVariant, AssetsView, BadgeImage, type BaseActionProps, type BaseTransactionViewProps, BlockSkeleton, BodyText, Boost, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CaptionText, Chip, Collapse, DescriptionBlocks, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FilterButton, HashLink, HeadingText, HistoryItem, type HistoryItemStatus, IconLabel, ImageIcon, IncompleteAction, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, List, ListItem, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, PipeSeparator, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, ReceiveNFTAction, ReceiveTokensAction, RecipientView, STEP_ITEM_HEIGHT, SectionTitle, SendTokensAction, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SizeTransition, SquidConfigProvider, type SquidTheme, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapDetailsView, SwapHeader, type SwapHeaderProps, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapTransactionView, Switch, TextSkeleton, type ThemeType, Timestamp, Toast, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, Transfer, UsdAmount, WalletLink, WalletsView, WrapAction, linkActionTimelineProps, statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu, useMediaQuery };
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "url": "git+https://github.com/0xsquid/squid-ui.git"
6
6
  },
7
7
  "description": "Squid's UI components",
8
- "version": "0.20.1-beta.0",
8
+ "version": "0.20.2",
9
9
  "author": "",
10
10
  "license": "MIT",
11
11
  "resolutions": {