@0xsquid/ui 2.0.6 → 2.0.8-beta.0

package/dist/cjs/index.js

@@ -2699,10 +2699,12 @@ function mapToCssVariables(obj) {
 const badgeSizeClassMap = {
     sm: "tw-w-4 tw-h-4",
     md: "tw-w-5 tw-h-5",
+    lg: "tw-w-5 tw-h-5",
 };
 const mainImageSizeClassMap = {
     sm: "tw-w-8 tw-h-8",
     md: "tw-w-10 tw-h-10",
+    lg: "tw-w-[60px] tw-h-[60px]",
 };
 const loadingSkeletonClassName = "tw-bg-grey-500";
 var ImageState;
@@ -2717,7 +2719,11 @@ function BadgeImage({ imageUrl: _imageUrl, badgeUrl, size = "sm", extraMarginFor
         badge: ImageState.LOADING,
         mainImage: ImageState.LOADING,
     });
-    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]);
+    const badgeImageClassName = cn(
+    // "tw-absolute -tw-right-[5px] tw-bottom-0 tw-z-10 tw-m-0 tw-rounded-md tw-border-[1px] tw-border-grey-800",
+    size === "lg"
+        ? "tw-absolute tw-right-0 tw-bottom-0 tw-z-10 tw-m-0 tw-rounded-md tw-border-[2px] tw-border-grey-800"
+        : "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]);
     const mainImageClassName = cn("tw-h-full tw-w-full tw-absolute", rounded ? " tw-rounded-full" : "tw-rounded-squid-xs");
     return imageUrl ? (jsxRuntime.jsxs("div", { className: cn("tw-relative", extraMarginForBadge && badgeUrl ? "tw-mr-1.5" : null, mainImageSizeClassMap[size]), children: [imagesLoadState.mainImage !== ImageState.LOADED &&
                 (placeholderImageUrl ? (jsxRuntime.jsx("img", { src: placeholderImageUrl, alt: "", className: mainImageClassName })) : (jsxRuntime.jsx("div", { className: cn(mainImageClassName, loadingSkeletonClassName) }))), jsxRuntime.jsx("img", { src: imageUrl, alt: "", onError: () => {
@@ -2786,6 +2792,37 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+const LoadingContext = React$1.createContext(false);
+const LoadingProvider = LoadingContext.Provider;
+function LoadingSkeleton({ className, height = "20", isLoading: isLoadingProp, children, width = "100", }) {
+    const contextValue = React$1.useContext(LoadingContext);
+    const isLoading = isLoadingProp !== undefined ? isLoadingProp : contextValue;
+    if (children && !isLoading)
+        return children;
+    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_1246_29063)", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1246_29063)" }) }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("linearGradient", { id: "paint0_linear_1246_29063", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient tw-text-material-light-thin", children: [jsxRuntime.jsx("stop", { stopColor: "currentColor" }), jsxRuntime.jsx("stop", { offset: "0.395881", stopColor: "currentColor" }), jsxRuntime.jsx("stop", { offset: "0.597867", stopColor: "currentColor", className: "group-data-[squid-theme-type=dark]:tw-text-material-light-average group-data-[squid-theme-type=light]:tw-text-transparent" }), jsxRuntime.jsx("stop", { offset: "0.697004", stopColor: "currentColor" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_1246_29063", children: jsxRuntime.jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] })] }));
+}
+function TextSkeleton(_a) {
+    var { className, width = ["4em", "6em"], children, isLoading } = _a, props = __rest$1(_a, ["className", "width", "children", "isLoading"]);
+    const minWidthVar = "--min-width";
+    const minWidth = Array.isArray(width) ? width[0] : width;
+    const maxWidthVar = "--max-width";
+    const maxWidth = Array.isArray(width) ? width[1] : width;
+    const t = React$1.useMemo(Math.random, []);
+    if (isLoading === false)
+        return children;
+    return (jsxRuntime.jsx("span", Object.assign({ className: cn("loading-gradient tw-inline-flex tw-rounded-full", className), style: {
+            ["--min-width"]: minWidth,
+            ["--max-width"]: maxWidth,
+            width: calcLerp(`var(${minWidthVar})`, `var(${maxWidthVar})`, t),
+        } }, props, { children: "\u00A0" })));
+}
+function BlockSkeleton(_a) {
+    var { isLoading, className, children } = _a, props = __rest$1(_a, ["isLoading", "className", "children"]);
+    if (isLoading === false)
+        return children;
+    return (jsxRuntime.jsx("div", Object.assign({ className: cn("loading-gradient tw-rounded-squid-s", className) }, props)));
+}
+
 // font size, line height, and letter spacing classes
 const textClassMap$1 = {
     small: "tw-text-body-small tw-tracking-body-small tw-leading-body-small tw-font-body-small",
@@ -2793,15 +2830,25 @@ const textClassMap$1 = {
     large: "tw-text-body-large tw-tracking-body-large tw-leading-body-large tw-font-body-large",
 };
 function BodyText(_a) {
-    var { size, children, bold = false, tight = false } = _a, props = __rest$1(_a, ["size", "children", "bold", "tight"]);
+    var _b, _c;
+    var { size, children, bold = false, tight = false, loading } = _a, props = __rest$1(_a, ["size", "children", "bold", "tight", "loading"]);
     const fontWeightClass = bold ? "!tw-font-bold" : "!tw-font-regular";
-    return (jsxRuntime.jsx("span", Object.assign({}, props, { className: cn(textClassMap$1[size], fontWeightClass, tight && "!tw-leading-[1]", props.className), children: children })));
+    const className = cn(textClassMap$1[size], fontWeightClass, tight && "!tw-leading-[1]", props.className);
+    if ((_b = loading === null || loading === void 0 ? void 0 : loading.isLoading) !== null && _b !== void 0 ? _b : false) {
+        return (jsxRuntime.jsx(TextSkeleton, { className: className, width: (_c = loading === null || loading === void 0 ? void 0 : loading.width) !== null && _c !== void 0 ? _c : "100%", isLoading: true }));
+    }
+    return (jsxRuntime.jsx("span", Object.assign({}, props, { className: className, children: children })));
 }
 
 function CaptionText(_a) {
-    var { children, bold = false } = _a, props = __rest$1(_a, ["children", "bold"]);
-    const boldClass = bold && "!tw-font-bold";
-    return (jsxRuntime.jsx("span", Object.assign({}, props, { className: cn(boldClass, "tw-text-caption tw-font-caption tw-leading-caption", props.className), children: children })));
+    var _b, _c;
+    var { children, bold = false, loading } = _a, props = __rest$1(_a, ["children", "bold", "loading"]);
+    const boldClass = bold ? "!tw-font-bold" : "";
+    const className = cn("tw-text-caption tw-font-caption tw-leading-caption", boldClass, props.className);
+    if ((_b = loading === null || loading === void 0 ? void 0 : loading.isLoading) !== null && _b !== void 0 ? _b : false) {
+        return (jsxRuntime.jsx(TextSkeleton, { className: className, width: (_c = loading === null || loading === void 0 ? void 0 : loading.width) !== null && _c !== void 0 ? _c : "100%", isLoading: true }));
+    }
+    return (jsxRuntime.jsx("span", Object.assign({}, props, { className: className, children: children })));
 }
 
 // font size, line height, and letter spacing classes
@@ -2840,37 +2887,6 @@ function IconLabel({ src, children, variant }) {
     return (jsxRuntime.jsxs("div", { className: "tw-inline-flex tw-items-center tw-gap-squid-xxs", children: [src && jsxRuntime.jsx(Image$1, { src: src, variant: variant }), typeof children === "string" ? (jsxRuntime.jsx(CaptionText, { children: children })) : (children)] }));
 }
 
-const LoadingContext = React$1.createContext(false);
-const LoadingProvider = LoadingContext.Provider;
-function LoadingSkeleton({ className, height = "20", isLoading: isLoadingProp, children, width = "100", }) {
-    const contextValue = React$1.useContext(LoadingContext);
-    const isLoading = isLoadingProp !== undefined ? isLoadingProp : contextValue;
-    if (children && !isLoading)
-        return children;
-    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_1246_29063)", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1246_29063)" }) }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("linearGradient", { id: "paint0_linear_1246_29063", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient tw-text-material-light-thin", children: [jsxRuntime.jsx("stop", { stopColor: "currentColor" }), jsxRuntime.jsx("stop", { offset: "0.395881", stopColor: "currentColor" }), jsxRuntime.jsx("stop", { offset: "0.597867", stopColor: "currentColor", className: "group-data-[squid-theme-type=dark]:tw-text-material-light-average group-data-[squid-theme-type=light]:tw-text-transparent" }), jsxRuntime.jsx("stop", { offset: "0.697004", stopColor: "currentColor" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_1246_29063", children: jsxRuntime.jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] })] }));
-}
-function TextSkeleton(_a) {
-    var { className, width = ["4em", "6em"], children, isLoading } = _a, props = __rest$1(_a, ["className", "width", "children", "isLoading"]);
-    const minWidthVar = "--min-width";
-    const minWidth = Array.isArray(width) ? width[0] : width;
-    const maxWidthVar = "--max-width";
-    const maxWidth = Array.isArray(width) ? width[1] : width;
-    const t = React$1.useMemo(Math.random, []);
-    if (isLoading === false)
-        return children;
-    return (jsxRuntime.jsx("span", Object.assign({ className: cn("loading-gradient tw-inline-flex tw-rounded-full", className), style: {
-            ["--min-width"]: minWidth,
-            ["--max-width"]: maxWidth,
-            width: calcLerp(`var(${minWidthVar})`, `var(${maxWidthVar})`, t),
-        } }, props, { children: "\u00A0" })));
-}
-function BlockSkeleton(_a) {
-    var { isLoading, className, children } = _a, props = __rest$1(_a, ["isLoading", "className", "children"]);
-    if (isLoading === false)
-        return children;
-    return (jsxRuntime.jsx("div", Object.assign({ className: cn("loading-gradient tw-rounded-squid-s", className) }, props)));
-}
-
 function Checkmark1Icon({ className, size = "16", }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.8809 2.82977C13.3432 3.13201 13.4729 3.75174 13.1706 4.21399L7.50398 12.8807C7.3318 13.144 7.04572 13.3109 6.73174 13.3313C6.41777 13.3517 6.11252 13.2231 5.90775 12.9842L2.90775 9.4842C2.54833 9.06487 2.59689 8.43357 3.01622 8.07415C3.43554 7.71473 4.06684 7.76329 4.42627 8.18262L6.55918 10.671L11.4967 3.11949C11.7989 2.65725 12.4187 2.52753 12.8809 2.82977Z", fill: "currentColor" }) }));
 }
@@ -16957,6 +16973,20 @@ function SizeTransition(_a) {
     return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-transition-[width,height], tw-duration-200", className), style: { width: contentsRect.width, height: contentsRect.height }, children: jsxRuntime.jsx("div", { ref: contentsRef, className: "tw-inline-block", children: children }) })));
 }
 
+function CollapsibleMenu({ children, menuRef, isOpen, transitionDuration, size, className, }) {
+    return (jsxRuntime.jsx("aside", { style: Object.assign({ transitionDuration, transitionTimingFunction: isOpen
+                ? "cubic-bezier(0.4, 1.3, 0.4, 1)"
+                : undefined, [CSS_VARS.COLLAPSIBLE_MENU_OPEN_WIDTH]: size.open.width, [CSS_VARS.COLLAPSIBLE_MENU_OPEN_HEIGHT]: size.open.height, [CSS_VARS.COLLAPSIBLE_MENU_CLOSED_WIDTH]: size.closed.width, [CSS_VARS.COLLAPSIBLE_MENU_CLOSED_HEIGHT]: size.closed.height }, (isOpen
+            ? {
+                width: `var(${CSS_VARS.COLLAPSIBLE_MENU_OPEN_WIDTH})`,
+                height: `var(${CSS_VARS.COLLAPSIBLE_MENU_OPEN_HEIGHT})`,
+            }
+            : {
+                width: `var(${CSS_VARS.COLLAPSIBLE_MENU_CLOSED_WIDTH})`,
+                height: `var(${CSS_VARS.COLLAPSIBLE_MENU_CLOSED_HEIGHT})`,
+            })), className: cn("tw-fixed tw-z-40 tw-flex tw-flex-col tw-overflow-hidden tw-bg-grey-900 tw-text-grey-100 tw-shadow-elevation-light-3 tw-outline-material-light-thin", className), ref: menuRef, children: children }));
+}
+
 function DescriptionBlocks(_a) {
     var { className, blocks: blocksProp } = _a, props = __rest$1(_a, ["className", "blocks"]);
     const blocks = typeof blocksProp === "string"
@@ -18040,20 +18070,6 @@ function PipeSeparator(props) {
     return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-h-[0.8em] tw-w-[2px] tw-rounded-full tw-bg-[currentColor]", props.className) })));
 }
 
-function CollapsibleMenu({ children, menuRef, isOpen, transitionDuration, size, className, }) {
-    return (jsxRuntime.jsx("aside", { style: Object.assign({ transitionDuration, transitionTimingFunction: isOpen
-                ? "cubic-bezier(0.4, 1.3, 0.4, 1)"
-                : undefined, [CSS_VARS.COLLAPSIBLE_MENU_OPEN_WIDTH]: size.open.width, [CSS_VARS.COLLAPSIBLE_MENU_OPEN_HEIGHT]: size.open.height, [CSS_VARS.COLLAPSIBLE_MENU_CLOSED_WIDTH]: size.closed.width, [CSS_VARS.COLLAPSIBLE_MENU_CLOSED_HEIGHT]: size.closed.height }, (isOpen
-            ? {
-                width: `var(${CSS_VARS.COLLAPSIBLE_MENU_OPEN_WIDTH})`,
-                height: `var(${CSS_VARS.COLLAPSIBLE_MENU_OPEN_HEIGHT})`,
-            }
-            : {
-                width: `var(${CSS_VARS.COLLAPSIBLE_MENU_CLOSED_WIDTH})`,
-                height: `var(${CSS_VARS.COLLAPSIBLE_MENU_CLOSED_HEIGHT})`,
-            })), className: cn("tw-fixed tw-z-40 tw-flex tw-flex-col tw-overflow-hidden tw-bg-grey-900 tw-text-grey-100 tw-shadow-elevation-light-3 tw-outline-material-light-thin", className), ref: menuRef, children: children }));
-}
-
 const createStoreImpl = (createState) => {
   let state;
   const listeners = /* @__PURE__ */ new Set();
@@ -19490,6 +19506,49 @@ const SwapStepsCollapsed = React$1.forwardRef((props, ref) => {
 });
 SwapStepsCollapsed.displayName = "SwapStepsCollapsed";
 
+function Toast({ headerContent, actionsContent, description, chipLabel, title, }) {
+    return (jsxRuntime.jsxs(Menu, { contentClassName: "tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", contentWrapperProps: {
+            className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs",
+        }, rounded: "sm", children: [headerContent, jsxRuntime.jsx("header", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-0 tw-py-squid-xxs", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-100", children: title }) }), jsxRuntime.jsx(CaptionText, { className: "tw-text-center tw-text-material-light-thick", children: description }), jsxRuntime.jsx("menu", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: actionsContent }), chipLabel && (jsxRuntime.jsx(Chip, { label: chipLabel, className: "tw-absolute tw-right-squid-xs tw-top-squid-xs" }))] }));
+}
+
+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, }) => (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, { imageUrl: token.image, badgeUrl: chain.image, size: "lg", rounded: true }) }), jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(IconButton, { className: "tw-text-grey-300", onClick: onLikeToken, icon: jsxRuntime.jsx(EmptyHeartIcon, {}) }), 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.jsxs(BodyText, { size: "large", loading: { isLoading: loading, width: "100px" }, children: ["$", tokenPrice.toLocaleString()] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-row tw-justify-between", children: [jsxRuntime.jsx(BodyText, { size: "small", children: token.name }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsxs(BodyText, { size: "small", className: "tw-text-grey-500", loading: { isLoading: loading, width: "40px" }, children: [Math.abs(priceChange).toFixed(2), "%"] }), !loading && (jsxRuntime.jsx(ArrowTriangle, { className: `${priceChange >= 0 ? "tw-rotate-180 tw-text-status-positive" : "tw-text-status-negative"}` }))] })] })] }));
+const BalanceInfo = ({ balance, balanceUSD, token, loading, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-400", 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.toFixed(6), " ", token.symbol] })] }), jsxRuntime.jsxs(CaptionText, { className: "tw-text-grey-400", loading: { isLoading: loading, width: "60px" }, children: ["$", balanceUSD.toFixed(2)] })] })] }));
+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-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 SwapButton = ({ label, color, icon, onClick, textColor, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs", children: [jsxRuntime.jsx(IconButton, { icon: icon, className: "tw-text-grey-900", style: {
+                height: "40px",
+                width: "40px",
+                borderRadius: "100%",
+                backgroundColor: color,
+                color: textColor,
+            }, onClick: onClick }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-400", children: label })] }));
+const SwapButtons = ({ token, onSwapFrom, onSwapTo, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-justify-between tw-py-5", children: [jsxRuntime.jsx(SwapButton, { label: "Swap From", color: token.color, textColor: token.textColor, icon: jsxRuntime.jsx(ArrowUpIcon, {}), onClick: () => {
+                onSwapFrom({ address: token.address, chainId: token.chainId });
+            } }), jsxRuntime.jsx(SwapButton, { label: "Swap To", color: token.color, textColor: token.textColor, icon: jsxRuntime.jsx(ArrowDownIcon, {}), onClick: () => {
+                onSwapTo({ address: token.address, chainId: token.chainId });
+            } })] }));
+const TimeframeChip = ({ label, isSelected, onClick, }) => (jsxRuntime.jsx(Chip, { className: cn("tw-w-squid-xl tw-cursor-pointer hover:tw-bg-material-light-thin", isSelected
+        ? "!tw-bg-grey-300 !tw-text-grey-900"
+        : "tw-bg-transparent !tw-text-grey-600"), label: label, onClick: onClick }));
+const ChartTimeframeSelector = ({ selectedTimeframe, onTimeframeChange, }) => {
+    const timeframes = ["1H", "1D", "1W", "1Y"];
+    return (jsxRuntime.jsx("div", { className: "tw-mt-squid-s tw-flex tw-justify-center tw-gap-squid-xs", children: timeframes.map((timeframe) => (jsxRuntime.jsx(TimeframeChip, { label: timeframe, isSelected: selectedTimeframe === timeframe, onClick: () => {
+                onTimeframeChange(timeframe);
+            } }, timeframe))) }));
+};
+const TokenDetailsView = ({ isOpen, onClose, token, chain, tokenPrice, priceChange, balance, balanceUSD, volume24h, marketCap, totalSupply, loading, onLikeToken, Chart = DefaultChart, initialTimeframe = DEFAULT_TIMEFRAME, onTimeframeChange = () => { }, onSwapFrom, onSwapTo, }) => {
+    const [selectedTimeframe, setSelectedTimeframe] = React$1.useState(initialTimeframe);
+    const handleTimeframeChange = (timeframe) => {
+        setSelectedTimeframe(timeframe);
+        onTimeframeChange(timeframe);
+    };
+    return (jsxRuntime.jsx(Modal, { isOpen: isOpen, onBackdropClick: onClose, width: "extra-large", className: "tw-my-auto", children: jsxRuntime.jsxs(ModalContent, { className: "tw-flex tw-min-h-[631px] tw-flex-col tw-pt-squid-m", children: [jsxRuntime.jsxs("div", { className: "tw-px-squid-m", children: [jsxRuntime.jsx(TokenModalHeader, { token: token, chain: chain, loading: loading, onLikeToken: onLikeToken, onClose: onClose }), jsxRuntime.jsx(TokenInfo, { token: token, tokenPrice: tokenPrice, priceChange: priceChange, loading: loading })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-grow tw-flex-col tw-justify-between tw-text-center", children: [jsxRuntime.jsx("span", { className: "tw-flex tw-h-full tw-grow tw-items-center tw-justify-center", children: loading ? jsxRuntime.jsx(Loader, {}) : jsxRuntime.jsx(Chart, { timeframe: selectedTimeframe }) }), jsxRuntime.jsx(ChartTimeframeSelector, { selectedTimeframe: selectedTimeframe, onTimeframeChange: handleTimeframeChange })] }), jsxRuntime.jsx("hr", { className: "tw-my-squid-xs tw-h-px tw-border-0 tw-bg-material-light-thin" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsxs("div", { className: "tw-gap-squid-sm tw-flex tw-flex-col tw-px-squid-m", children: [jsxRuntime.jsx(BalanceInfo, { balance: balance, balanceUSD: balanceUSD, token: token, loading: loading }), jsxRuntime.jsx("hr", { className: "tw-my-squid-xs tw-h-px tw-border-0 tw-bg-material-light-thin" }), jsxRuntime.jsx(TokenMarketData, { volume24h: volume24h, marketCap: marketCap, totalSupply: totalSupply, loading: loading })] }), jsxRuntime.jsx("hr", { className: "tw-my-squid-xs tw-h-px tw-border-0 tw-bg-material-light-thin" }), jsxRuntime.jsx(SwapButtons, { token: token, onSwapFrom: onSwapFrom, onSwapTo: onSwapTo })] })] }) }));
+};
+
 const WIDTH_SM = "69";
 const HEIGHT_SM = "31";
 const WIDTH_MD = "94";
@@ -25429,12 +25488,6 @@ function PopLayout(props) {
     return jsxRuntime.jsx(motion.div, Object.assign({ ref: ref }, props));
 }
 
-function Toast({ headerContent, actionsContent, description, chipLabel, title, }) {
-    return (jsxRuntime.jsxs(Menu, { contentClassName: "tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", contentWrapperProps: {
-            className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs",
-        }, rounded: "sm", children: [headerContent, jsxRuntime.jsx("header", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-0 tw-py-squid-xxs", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-100", children: title }) }), jsxRuntime.jsx(CaptionText, { className: "tw-text-center tw-text-material-light-thick", children: description }), jsxRuntime.jsx("menu", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: actionsContent }), chipLabel && (jsxRuntime.jsx(Chip, { label: chipLabel, className: "tw-absolute tw-right-squid-xs tw-top-squid-xs" }))] }));
-}
-
 var lib = {};
 
 var uaParser_min = {exports: {}};
@@ -26881,7 +26934,7 @@ function NumericInput(_a) {
                                                 ? "tw-opacity-0"
                                                 : "" }), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat("%") })] })) : null] }) }))), jsxRuntime.jsx(Tooltip, Object.assign({}, (isLoading ? undefined : balanceButton === null || balanceButton === void 0 ? void 0 : balanceButton.tooltip), { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxRuntime.jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn(buttonClassName, balanceChipClickable
                                 ? interactiveChipClassName
-                                : notInteractiveChipClassName), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balanceFormatted }), jsxRuntime.jsx(Chip, { label: "Max" })] }) }))] }))] }));
+                                : notInteractiveChipClassName), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balanceFormatted }), !(balanceButton === null || balanceButton === void 0 ? void 0 : balanceButton.hideMaxChip) && jsxRuntime.jsx(Chip, { label: "Max" })] }) }))] }))] }));
 }
 
 function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, isSelected = false, }) {
@@ -62604,19 +62657,43 @@ function rgbToHex(r, g, b) {
 // let bgColor = '#17191C'
 // let resultingColor = blendColors(foregroundColor, bgColor)
 // console.log(resultingColor) // Output: ~#2f3033
-function blendColors(foreground, background) {
-    const fg = hexToRgb(foreground);
-    const bg = hexToRgb(background);
+function blendColors(foreground, background, factor = 1) {
+    const fg = parseColor(foreground);
+    const bg = parseColor(background);
     if (fg == null || bg == null)
         return null;
-    const r = Math.round(fg.r * fg.a + bg.r * (1 - fg.a));
-    const g = Math.round(fg.g * fg.a + bg.g * (1 - fg.a));
-    const b = Math.round(fg.b * fg.a + bg.b * (1 - fg.a));
+    const r = Math.round(fg.r * (1 - factor) + bg.r * factor);
+    const g = Math.round(fg.g * (1 - factor) + bg.g * factor);
+    const b = Math.round(fg.b * (1 - factor) + bg.b * factor);
     return rgbToHex(r, g, b);
 }
 const isValidHexColor = (hex) => {
     return /^#([0-9A-F]{3}|[0-9A-F]{6}|[0-9A-F]{4}|[0-9A-F]{8})$/i.test(hex);
 };
+function parseColor(color) {
+    var _a, _b, _c, _d;
+    if (color.startsWith("#")) {
+        return hexToRgb(color);
+    }
+    else if (color.startsWith("rgb")) {
+        const match = color.match(/\d+(\.\d+)?/g);
+        if (match) {
+            return {
+                r: parseInt((_a = match[0]) !== null && _a !== void 0 ? _a : "0"),
+                g: parseInt((_b = match[1]) !== null && _b !== void 0 ? _b : "0"),
+                b: parseInt((_c = match[2]) !== null && _c !== void 0 ? _c : "0"),
+                a: match[3] ? parseFloat((_d = match[3]) !== null && _d !== void 0 ? _d : "0") : 1,
+            };
+        }
+    }
+    return null;
+}
+const getColorBrightness = (color) => {
+    const rgb = parseColor(color);
+    if (!rgb)
+        return 0;
+    return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
+};
 
 function ThemeProvider(_a) {
     var { theme = lightTheme, children, themeType = "light" } = _a, props = __rest$1(_a, ["theme", "children", "themeType"]);
@@ -62874,6 +62951,7 @@ exports.TimeFliesIcon = TimeFliesIcon;
 exports.Timeline = Timeline;
 exports.Timestamp = Timestamp;
 exports.Toast = Toast;
+exports.TokenDetailsView = TokenDetailsView;
 exports.TokenPair = TokenPair;
 exports.Tooltip = Tooltip;
 exports.TradingViewStepsIcon = TradingViewStepsIcon;
@@ -62902,6 +62980,7 @@ exports.blendColors = blendColors;
 exports.cn = cn;
 exports.darkTheme = darkTheme;
 exports.defaultTheme = defaultTheme;
+exports.getColorBrightness = getColorBrightness;
 exports.getContrastColor = getContrastColor;
 exports.getHexColorFromOpacityPercentage = getHexColorFromOpacityPercentage;
 exports.hexToRgb = hexToRgb;

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

@@ -10,6 +10,6 @@ interface BadgeImageProps {
      */
     placeholderImageUrl?: string;
 }
-type BadgeSize = "sm" | "md";
+type BadgeSize = "sm" | "md" | "lg";
 export declare function BadgeImage({ imageUrl: _imageUrl, badgeUrl, size, extraMarginForBadge, rounded, placeholderImageUrl, }: BadgeImageProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -32,6 +32,7 @@ interface NumericInputProps extends React.InputHTMLAttributes<HTMLInputElement>
     isInteractive?: boolean;
     balanceButton?: {
         tooltip?: Omit<TooltipProps, "children">;
+        hideMaxChip?: boolean;
     };
 }
 export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, ...props }: NumericInputProps): import("react/jsx-runtime").JSX.Element;

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

@@ -33,6 +33,7 @@ interface SwapConfigurationProps {
     };
     balanceButton?: {
         tooltip?: Omit<TooltipProps, "children">;
+        hideMaxChip?: boolean;
     };
     assetsButton?: {
         tooltip?: Omit<TooltipProps, "children">;

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

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+interface Token {
+    address: string;
+    name: string;
+    symbol: string;
+    image: string;
+    color: string;
+    textColor: string;
+    chainId: string;
+}
+interface Chain {
+    name: string;
+    image: string;
+}
+export type Timeframe = "1H" | "1D" | "1W" | "1Y";
+interface TokenDetailsViewProps {
+    isOpen: boolean;
+    onClose: () => void;
+    token: Token;
+    chain: Chain;
+    tokenPrice: number;
+    priceChange: number;
+    balance: number;
+    balanceUSD: number;
+    volume24h: string;
+    marketCap: string;
+    totalSupply: string;
+    loading: boolean;
+    onLikeToken: () => void;
+    Chart?: React.ComponentType<{
+        timeframe: Timeframe;
+    }>;
+    initialTimeframe?: Timeframe;
+    onTimeframeChange?: (timeframe: Timeframe) => void;
+    onSwapFrom: (token: Pick<Token, "address" | "chainId">) => void;
+    onSwapTo: (token: Pick<Token, "address" | "chainId">) => void;
+}
+export declare const TokenDetailsView: ({ isOpen, onClose, token, chain, tokenPrice, priceChange, balance, balanceUSD, volume24h, marketCap, totalSupply, loading, onLikeToken, Chart, initialTimeframe, onTimeframeChange, onSwapFrom, onSwapTo, }: TokenDetailsViewProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -3,6 +3,7 @@ export * from "./AppContainer";
 export * from "./Boost";
 export * from "./Breadcrumb";
 export * from "./Collapse";
+export * from "./CollapsibleMenu";
 export * from "./DescriptionBlocks";
 export * from "./DetailsToolbar";
 export * from "./DropdownMenu";
@@ -15,12 +16,13 @@ export * from "./Modal";
 export * from "./ModalContent";
 export * from "./NavigationBar";
 export * from "./PipeSeparator";
-export * from "./CollapsibleMenu";
 export * from "./ProductCard";
 export * from "./ProfileHeaderBackground";
 export * from "./SwapConfiguration";
 export * from "./SwapProgressViewHeader";
 export * from "./SwapStepsCollapsed";
+export * from "./Toast";
+export * from "./TokenDetailsView";
 export * from "./TokenPair";
 export * from "./TransactionFilters";
 export * from "./TransactionHeader/BridgeHeader";
@@ -38,4 +40,3 @@ export * from "./TransactionProperties/SwapProperties";
 export * from "./TransactionProperties/TransactionProperties";
 export * from "./TransactionSearch";
 export * from "./Transfer";
-export * from "./Toast";

package/dist/cjs/types/components/typography/BodyText.d.ts

@@ -5,6 +5,10 @@ interface BodyTextProps extends React.HTMLAttributes<HTMLSpanElement> {
     size: TextSize;
     bold?: boolean;
     tight?: boolean;
+    loading?: {
+        isLoading?: boolean;
+        width?: string;
+    };
 }
-export declare function BodyText({ size, children, bold, tight, ...props }: BodyTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function BodyText({ size, children, bold, tight, loading, ...props }: BodyTextProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/typography/CaptionText.d.ts

@@ -1,6 +1,11 @@
-/// <reference types="react" />
+import { type ReactNode } from "react";
 interface CaptionProps extends React.HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
     bold?: boolean;
+    loading?: {
+        isLoading?: boolean;
+        width?: string;
+    };
 }
-export declare function CaptionText({ children, bold, ...props }: CaptionProps): import("react/jsx-runtime").JSX.Element;
+export declare function CaptionText({ children, bold, loading, ...props }: CaptionProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/services/internal/colorService.d.ts

@@ -29,5 +29,6 @@ export declare function hexToRgb(hex: string): {
     a: number;
 } | null;
 export declare function rgbToHex(r: number, g: number, b: number): string;
-export declare function blendColors(foreground: string, background: string): string | null;
+export declare function blendColors(foreground: string, background: string, factor?: number): string | null;
 export declare const isValidHexColor: (hex: string) => boolean;
+export declare const getColorBrightness: (color: string) => number;

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { type Meta, type StoryObj } from "@storybook/react";
 import { SwapConfiguration } from "../../components/layout/SwapConfiguration";
 declare const meta: Meta<typeof SwapConfiguration>;
 export default meta;
@@ -25,6 +25,7 @@ export declare const FromAddressEmpty: Story;
 export declare const ToAddressEmpty: Story;
 export declare const Error: Story;
 export declare const WithTooltips: Story;
+export declare const HideMaxChip: Story;
 export declare const WithoutSourceConnectLabels: Story;
 export declare const WithoutDestConnectLabels: Story;
 export declare const AddressOnly: Story;

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

@@ -0,0 +1,13 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { TokenDetailsView } from "../../components/layout/TokenDetailsView";
+declare const meta: Meta<typeof TokenDetailsView>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const PositivePriceChange: Story;
+export declare const LowBalance: Story;
+export declare const HighBalance: Story;
+export declare const DifferentToken: Story;
+export declare const Closed: Story;
+export declare const Loading: Story;
+export declare const WithFakeChart: Story;