@0xsquid/ui 3.0.1 → 3.0.2

package/dist/cjs/index.js

@@ -21410,7 +21410,7 @@ const mainImageSizeMap = {
     large: "xxlarge",
     small: "xlarge",
 };
-function TokenGroup({ isSelected = false, tokenItems, priceChange, balance, balanceUsd, extraSpacing = true, chainImageUrl, imageUrl, symbol, name, onClick, variant = "large", className, onChildClick, isAdjacentToPreviousExpanded = false, isAdjacentToNextExpanded = false, }) {
+function TokenGroup({ isSelected = false, tokenItems, priceChange, balance, balanceUsd, extraSpacing = true, chainImageUrl, imageUrl, fallbackImageUrl, symbol, name, onClick, variant = "large", className, onChildClick, isAdjacentToPreviousExpanded = false, isAdjacentToNextExpanded = false, }) {
     var _a;
     const [isCollapsed, setIsCollapsed] = React$1.useState(true);
     const isCollapsible = tokenItems && tokenItems.length > 0;
@@ -21445,7 +21445,7 @@ function TokenGroup({ isSelected = false, tokenItems, priceChange, balance, bala
                         : "tw-h-squid-xl tw-gap-squid-xxs"
                     : isSmallVariant
                         ? "tw-h-[50px] tw-gap-squid-s tw-py-squid-xxs"
-                        : "tw-h-squid-xl tw-gap-squid-xxs"), children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-min-w-fit", children: [jsxRuntime.jsx(Image$1, { src: imageUrl, size: isLargeVariant && !isCollapsed
+                        : "tw-h-squid-xl tw-gap-squid-xxs"), children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-min-w-fit", children: [jsxRuntime.jsx(Image$1, { src: imageUrl, placeholderImageUrl: fallbackImageUrl, size: isLargeVariant && !isCollapsed
                                     ? "medium"
                                     : (_a = mainImageSizeMap[variant]) !== null && _a !== void 0 ? _a : "medium", rounded: isCompactVariant ? "xxs" : "full", style: {
                                     transition: `${ANIMATION_DURATIONS.GENERIC}ms ${ANIMATION_TIMINGS.GENERIC}`,
@@ -21762,6 +21762,7 @@ const DEFAULT_TIMEFRAME = "1D";
 const DefaultChart = ({ timeframe, }) => (jsxRuntime.jsx("div", { className: "tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center", children: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Chart (", timeframe, ")"] }) }));
 const TokenModalHeader = ({ token, chain, onLikeToken, onClose, isFavorite, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-items-start tw-justify-between", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-pb-squid-xs", children: jsxRuntime.jsx(BadgeImage, { image: {
                     src: token.image,
+                    placeholderImageUrl: token.fallbackImage,
                     size: "xxlarge",
                     rounded: "full",
                     shadow: true,
@@ -21772,7 +21773,7 @@ const TokenModalHeader = ({ token, chain, onLikeToken, onClose, isFavorite, }) =
                     border: "outline-lg",
                 } }) }), jsxRuntime.jsxs("span", { className: "tw-absolute tw-right-squid-xs tw-top-squid-xs tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(IconButton, { className: "tw-group/token-detail-fav-icon tw-text-grey-300", onClick: onLikeToken, icon: isFavorite ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FilledHeartIcon, { className: "tw-block group-hover/token-detail-fav-icon:tw-hidden" }), jsxRuntime.jsx(BrokenHeartIcon, { className: "tw-hidden group-hover/token-detail-fav-icon:tw-block" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EmptyHeartIcon, { className: "tw-block group-hover/token-detail-fav-icon:tw-hidden" }), jsxRuntime.jsx(FilledHeartIcon, { className: "tw-hidden group-hover/token-detail-fav-icon:tw-block" })] })) }), jsxRuntime.jsx(IconButton, { className: "tw-text-grey-300", onClick: onClose, icon: jsxRuntime.jsx(CircleXFilledIcon, {}) })] })] }));
 const TokenInfo = ({ token, tokenPrice, priceChange, loading, }) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(BodyText, { size: "large", loading: { isLoading: loading, width: "100px" }, children: tokenPrice.toLocaleString() }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-row tw-items-center tw-justify-between", children: [jsxRuntime.jsx(BodyText, { size: "small", children: token.name }), jsxRuntime.jsx(PriceChange, { value: priceChange, variant: "large" })] })] }));
-const BalanceInfo = ({ balance, balanceUSD, token, loading, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: "Balance" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-row tw-justify-between", children: [jsxRuntime.jsxs("span", { className: "tw-flex tw-flex-row tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx("img", { src: token.image, alt: token.name, className: "tw-h-squid-m tw-w-squid-m tw-rounded-full" }), jsxRuntime.jsxs(BodyText, { size: "small", loading: { isLoading: loading, width: "80px" }, children: [balance, " ", token.symbol] })] }), jsxRuntime.jsxs(CaptionText, { className: "tw-text-grey-500", loading: { isLoading: loading, width: "60px" }, children: [jsxRuntime.jsx("span", { className: "tw-opacity-66", children: "$" }), balanceUSD] })] })] }));
+const BalanceInfo = ({ balance, balanceUSD, token, loading, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: "Balance" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-row tw-justify-between", children: [jsxRuntime.jsxs("span", { className: "tw-flex tw-flex-row tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Image$1, { src: token.image, placeholderImageUrl: token.fallbackImage, alt: token.name, size: "medium", rounded: "full" }), jsxRuntime.jsxs(BodyText, { size: "small", loading: { isLoading: loading, width: "80px" }, children: [balance, " ", token.symbol] })] }), jsxRuntime.jsxs(CaptionText, { className: "tw-text-grey-500", loading: { isLoading: loading, width: "60px" }, children: [jsxRuntime.jsx("span", { className: "tw-opacity-66", children: "$" }), balanceUSD] })] })] }));
 const MarketDataItem = ({ label, value, showDollar, loading, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: label }), jsxRuntime.jsxs(CaptionText, { loading: { isLoading: loading, width: "60px" }, children: [showDollar && jsxRuntime.jsx("span", { className: "tw-text-grey-500", children: "$" }), value] })] }));
 const TokenMarketData = ({ volume24h, marketCap, totalSupply, loading, }) => (jsxRuntime.jsxs("div", { className: "tw-mb-squid-xs tw-flex tw-h-full tw-w-full tw-flex-row tw-items-center tw-justify-between", children: [jsxRuntime.jsx(MarketDataItem, { label: "24h volume", value: volume24h, showDollar: true, loading: loading }), jsxRuntime.jsx(MarketDataItem, { label: "Market cap", value: marketCap, showDollar: true, loading: loading }), jsxRuntime.jsx(MarketDataItem, { label: "Total supply", value: totalSupply, loading: loading })] }));
 const FooterButton = (_a) => {

package/dist/cjs/types/components/layout/TokenDetailsView.d.ts

@@ -4,6 +4,7 @@ interface Token {
     name: string;
     symbol: string;
     image: string;
+    fallbackImage?: string;
     chainId: string;
 }
 interface Chain {

package/dist/cjs/types/components/lists/TokenGroup.d.ts

@@ -3,6 +3,7 @@ export type TokenGroupVariant = "compact" | "large" | "small";
 export interface TokenGroupProps<T> {
     isSelected?: boolean;
     imageUrl: string;
+    fallbackImageUrl?: string;
     symbol: string;
     name: string;
     chainImageUrl: string;
@@ -12,11 +13,10 @@ export interface TokenGroupProps<T> {
     tokenItems?: T[];
     extraSpacing?: boolean;
     onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
-    maxPreviewItems?: number;
     variant?: TokenGroupVariant;
     className?: string;
     onChildClick?: (tokenProps: T) => void;
     isAdjacentToPreviousExpanded?: boolean;
     isAdjacentToNextExpanded?: boolean;
 }
-export declare function TokenGroup<T extends TokenGroupProps<T>>({ isSelected, tokenItems, priceChange, balance, balanceUsd, extraSpacing, chainImageUrl, imageUrl, symbol, name, onClick, variant, className, onChildClick, isAdjacentToPreviousExpanded, isAdjacentToNextExpanded, }: TokenGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TokenGroup<T extends TokenGroupProps<T>>({ isSelected, tokenItems, priceChange, balance, balanceUsd, extraSpacing, chainImageUrl, imageUrl, fallbackImageUrl, symbol, name, onClick, variant, className, onChildClick, isAdjacentToPreviousExpanded, isAdjacentToNextExpanded, }: TokenGroupProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/stories/layout/TokenDetailsView.stories.d.ts

@@ -12,3 +12,4 @@ export declare const Closed: Story;
 export declare const Loading: Story;
 export declare const MarkedFavorite: Story;
 export declare const WithFakeChart: Story;
+export declare const FallbackImage: Story;

package/dist/cjs/types/stories/lists/TokenGroup.stories.d.ts

@@ -16,3 +16,5 @@ export declare const LargeVariantLongTokenName: Story;
 export declare const CompactVariantWithItems: Story;
 export declare const CompactVariantLongTokenName: Story;
 export declare const MultipleCollapsibleGroups: Story;
+export declare const FallbackImage: Story;
+export declare const ItemsWithFallbackImage: Story;

package/dist/esm/index.js

@@ -21390,7 +21390,7 @@ const mainImageSizeMap = {
     large: "xxlarge",
     small: "xlarge",
 };
-function TokenGroup({ isSelected = false, tokenItems, priceChange, balance, balanceUsd, extraSpacing = true, chainImageUrl, imageUrl, symbol, name, onClick, variant = "large", className, onChildClick, isAdjacentToPreviousExpanded = false, isAdjacentToNextExpanded = false, }) {
+function TokenGroup({ isSelected = false, tokenItems, priceChange, balance, balanceUsd, extraSpacing = true, chainImageUrl, imageUrl, fallbackImageUrl, symbol, name, onClick, variant = "large", className, onChildClick, isAdjacentToPreviousExpanded = false, isAdjacentToNextExpanded = false, }) {
     var _a;
     const [isCollapsed, setIsCollapsed] = useState(true);
     const isCollapsible = tokenItems && tokenItems.length > 0;
@@ -21425,7 +21425,7 @@ function TokenGroup({ isSelected = false, tokenItems, priceChange, balance, bala
                         : "tw-h-squid-xl tw-gap-squid-xxs"
                     : isSmallVariant
                         ? "tw-h-[50px] tw-gap-squid-s tw-py-squid-xxs"
-                        : "tw-h-squid-xl tw-gap-squid-xxs"), children: [jsxs("div", { className: "tw-relative tw-min-w-fit", children: [jsx(Image$1, { src: imageUrl, size: isLargeVariant && !isCollapsed
+                        : "tw-h-squid-xl tw-gap-squid-xxs"), children: [jsxs("div", { className: "tw-relative tw-min-w-fit", children: [jsx(Image$1, { src: imageUrl, placeholderImageUrl: fallbackImageUrl, size: isLargeVariant && !isCollapsed
                                     ? "medium"
                                     : (_a = mainImageSizeMap[variant]) !== null && _a !== void 0 ? _a : "medium", rounded: isCompactVariant ? "xxs" : "full", style: {
                                     transition: `${ANIMATION_DURATIONS.GENERIC}ms ${ANIMATION_TIMINGS.GENERIC}`,
@@ -21742,6 +21742,7 @@ const DEFAULT_TIMEFRAME = "1D";
 const DefaultChart = ({ timeframe, }) => (jsx("div", { className: "tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center", children: jsxs(BodyText, { size: "small", children: ["Chart (", timeframe, ")"] }) }));
 const TokenModalHeader = ({ token, chain, onLikeToken, onClose, isFavorite, }) => (jsxs("div", { className: "tw-flex tw-w-full tw-items-start tw-justify-between", children: [jsx("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-pb-squid-xs", children: jsx(BadgeImage, { image: {
                     src: token.image,
+                    placeholderImageUrl: token.fallbackImage,
                     size: "xxlarge",
                     rounded: "full",
                     shadow: true,
@@ -21752,7 +21753,7 @@ const TokenModalHeader = ({ token, chain, onLikeToken, onClose, isFavorite, }) =
                     border: "outline-lg",
                 } }) }), jsxs("span", { className: "tw-absolute tw-right-squid-xs tw-top-squid-xs tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(IconButton, { className: "tw-group/token-detail-fav-icon tw-text-grey-300", onClick: onLikeToken, icon: isFavorite ? (jsxs(Fragment, { children: [jsx(FilledHeartIcon, { className: "tw-block group-hover/token-detail-fav-icon:tw-hidden" }), jsx(BrokenHeartIcon, { className: "tw-hidden group-hover/token-detail-fav-icon:tw-block" })] })) : (jsxs(Fragment, { children: [jsx(EmptyHeartIcon, { className: "tw-block group-hover/token-detail-fav-icon:tw-hidden" }), jsx(FilledHeartIcon, { className: "tw-hidden group-hover/token-detail-fav-icon:tw-block" })] })) }), jsx(IconButton, { className: "tw-text-grey-300", onClick: onClose, icon: jsx(CircleXFilledIcon, {}) })] })] }));
 const TokenInfo = ({ token, tokenPrice, priceChange, loading, }) => (jsxs("div", { children: [jsx(BodyText, { size: "large", loading: { isLoading: loading, width: "100px" }, children: tokenPrice.toLocaleString() }), jsxs("div", { className: "tw-flex tw-flex-row tw-items-center tw-justify-between", children: [jsx(BodyText, { size: "small", children: token.name }), jsx(PriceChange, { value: priceChange, variant: "large" })] })] }));
-const BalanceInfo = ({ balance, balanceUSD, token, loading, }) => (jsxs("div", { className: "tw-flex tw-flex-col", children: [jsx(CaptionText, { className: "tw-text-grey-500", children: "Balance" }), jsxs("div", { className: "tw-flex tw-flex-row tw-justify-between", children: [jsxs("span", { className: "tw-flex tw-flex-row tw-items-center tw-gap-squid-xxs", children: [jsx("img", { src: token.image, alt: token.name, className: "tw-h-squid-m tw-w-squid-m tw-rounded-full" }), jsxs(BodyText, { size: "small", loading: { isLoading: loading, width: "80px" }, children: [balance, " ", token.symbol] })] }), jsxs(CaptionText, { className: "tw-text-grey-500", loading: { isLoading: loading, width: "60px" }, children: [jsx("span", { className: "tw-opacity-66", children: "$" }), balanceUSD] })] })] }));
+const BalanceInfo = ({ balance, balanceUSD, token, loading, }) => (jsxs("div", { className: "tw-flex tw-flex-col", children: [jsx(CaptionText, { className: "tw-text-grey-500", children: "Balance" }), jsxs("div", { className: "tw-flex tw-flex-row tw-justify-between", children: [jsxs("span", { className: "tw-flex tw-flex-row tw-items-center tw-gap-squid-xxs", children: [jsx(Image$1, { src: token.image, placeholderImageUrl: token.fallbackImage, alt: token.name, size: "medium", rounded: "full" }), jsxs(BodyText, { size: "small", loading: { isLoading: loading, width: "80px" }, children: [balance, " ", token.symbol] })] }), jsxs(CaptionText, { className: "tw-text-grey-500", loading: { isLoading: loading, width: "60px" }, children: [jsx("span", { className: "tw-opacity-66", children: "$" }), balanceUSD] })] })] }));
 const MarketDataItem = ({ label, value, showDollar, loading, }) => (jsxs("div", { className: "tw-flex tw-flex-col", children: [jsx(CaptionText, { className: "tw-text-grey-500", children: label }), jsxs(CaptionText, { loading: { isLoading: loading, width: "60px" }, children: [showDollar && jsx("span", { className: "tw-text-grey-500", children: "$" }), value] })] }));
 const TokenMarketData = ({ volume24h, marketCap, totalSupply, loading, }) => (jsxs("div", { className: "tw-mb-squid-xs tw-flex tw-h-full tw-w-full tw-flex-row tw-items-center tw-justify-between", children: [jsx(MarketDataItem, { label: "24h volume", value: volume24h, showDollar: true, loading: loading }), jsx(MarketDataItem, { label: "Market cap", value: marketCap, showDollar: true, loading: loading }), jsx(MarketDataItem, { label: "Total supply", value: totalSupply, loading: loading })] }));
 const FooterButton = (_a) => {

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

@@ -4,6 +4,7 @@ interface Token {
     name: string;
     symbol: string;
     image: string;
+    fallbackImage?: string;
     chainId: string;
 }
 interface Chain {

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

@@ -3,6 +3,7 @@ export type TokenGroupVariant = "compact" | "large" | "small";
 export interface TokenGroupProps<T> {
     isSelected?: boolean;
     imageUrl: string;
+    fallbackImageUrl?: string;
     symbol: string;
     name: string;
     chainImageUrl: string;
@@ -12,11 +13,10 @@ export interface TokenGroupProps<T> {
     tokenItems?: T[];
     extraSpacing?: boolean;
     onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
-    maxPreviewItems?: number;
     variant?: TokenGroupVariant;
     className?: string;
     onChildClick?: (tokenProps: T) => void;
     isAdjacentToPreviousExpanded?: boolean;
     isAdjacentToNextExpanded?: boolean;
 }
-export declare function TokenGroup<T extends TokenGroupProps<T>>({ isSelected, tokenItems, priceChange, balance, balanceUsd, extraSpacing, chainImageUrl, imageUrl, symbol, name, onClick, variant, className, onChildClick, isAdjacentToPreviousExpanded, isAdjacentToNextExpanded, }: TokenGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TokenGroup<T extends TokenGroupProps<T>>({ isSelected, tokenItems, priceChange, balance, balanceUsd, extraSpacing, chainImageUrl, imageUrl, fallbackImageUrl, symbol, name, onClick, variant, className, onChildClick, isAdjacentToPreviousExpanded, isAdjacentToNextExpanded, }: TokenGroupProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -12,3 +12,4 @@ export declare const Closed: Story;
 export declare const Loading: Story;
 export declare const MarkedFavorite: Story;
 export declare const WithFakeChart: Story;
+export declare const FallbackImage: Story;

package/dist/esm/types/stories/lists/TokenGroup.stories.d.ts

@@ -16,3 +16,5 @@ export declare const LargeVariantLongTokenName: Story;
 export declare const CompactVariantWithItems: Story;
 export declare const CompactVariantLongTokenName: Story;
 export declare const MultipleCollapsibleGroups: Story;
+export declare const FallbackImage: Story;
+export declare const ItemsWithFallbackImage: Story;

package/dist/index.d.ts

@@ -1329,6 +1329,7 @@ interface Token$2 {
     name: string;
     symbol: string;
     image: string;
+    fallbackImage?: string;
     chainId: string;
 }
 interface Chain {
@@ -1893,6 +1894,7 @@ type TokenGroupVariant = "compact" | "large" | "small";
 interface TokenGroupProps<T> {
     isSelected?: boolean;
     imageUrl: string;
+    fallbackImageUrl?: string;
     symbol: string;
     name: string;
     chainImageUrl: string;
@@ -1902,14 +1904,13 @@ interface TokenGroupProps<T> {
     tokenItems?: T[];
     extraSpacing?: boolean;
     onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
-    maxPreviewItems?: number;
     variant?: TokenGroupVariant;
     className?: string;
     onChildClick?: (tokenProps: T) => void;
     isAdjacentToPreviousExpanded?: boolean;
     isAdjacentToNextExpanded?: boolean;
 }
-declare function TokenGroup<T extends TokenGroupProps<T>>({ isSelected, tokenItems, priceChange, balance, balanceUsd, extraSpacing, chainImageUrl, imageUrl, symbol, name, onClick, variant, className, onChildClick, isAdjacentToPreviousExpanded, isAdjacentToNextExpanded, }: TokenGroupProps<T>): react_jsx_runtime.JSX.Element;
+declare function TokenGroup<T extends TokenGroupProps<T>>({ isSelected, tokenItems, priceChange, balance, balanceUsd, extraSpacing, chainImageUrl, imageUrl, fallbackImageUrl, symbol, name, onClick, variant, className, onChildClick, isAdjacentToPreviousExpanded, isAdjacentToNextExpanded, }: TokenGroupProps<T>): react_jsx_runtime.JSX.Element;
 
 interface TokenGroupsProps<T extends TokenGroupProps<T>> {
     groups: T[];

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "author": "",
   "license": "MIT",
   "resolutions": {