@0xsquid/ui 0.17.3 → 0.17.5

package/dist/cjs/index.js

@@ -2601,6 +2601,12 @@ const formatRelativeDate = (timestampSeconds) => {
 function truncateHash(hash) {
     return `${hash.slice(0, 8)}...${hash.slice(-6)}`;
 }
+const styled = (tag, className) => {
+    const Component = React.forwardRef((props, ref) => React.createElement(tag, mergeProps({ ref, className }, props)));
+    Component.displayName = `styled ${tag}`;
+    return Component;
+};
+const mergeProps = (a, b) => (Object.assign(Object.assign(Object.assign({}, a), b), { className: cn(a.className, b.className), style: Object.assign(Object.assign({}, a.style), b.style) }));
 
 const badgeSizeClassMap = {
     sm: 'tw-w-4 tw-h-4',
@@ -2740,9 +2746,9 @@ const LoadingProvider = LoadingContext.Provider;
 function LoadingSkeleton({ className, height = '20', isLoading: isLoadingProp, children, width = '100', }) {
     const contextValue = React.useContext(LoadingContext);
     const isLoading = isLoadingProp !== undefined ? isLoadingProp : contextValue;
-    if (isLoading === false)
+    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" }) })] }), ' '] }));
+    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 Checkmark1Icon() {
@@ -2915,7 +2921,7 @@ function Copy(_a) {
 }
 
 function HashLink({ showTx = false, hash, showCopyButton = false, url, children, }) {
-    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [showTx && jsxRuntime.jsx("span", { className: "tw-text-grey-700", children: "TX" }), jsxRuntime.jsxs("a", { href: url, target: "_blank", className: cn('tw-flex tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xxs', url && 'hover:tw-bg-material-light-thin'), children: [children !== null && children !== void 0 ? children : truncateHash(hash), url && (jsxRuntime.jsx(SquareArrowTopRight2Icon, { strokeWidth: "1.5", className: "tw-h-[1.2em] tw-w-[1.2em] tw-text-royal-500" }))] }), showCopyButton && (jsxRuntime.jsx(Copy, { size: "16", strokeWidth: "1.5", className: "tw-h-[1.2em] tw-w-[1.2em] tw-cursor-pointer tw-text-royal-500", onClick: () => navigator.clipboard.writeText(hash) }))] }));
+    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [showTx && jsxRuntime.jsx("span", { className: "tw-mr-squid-xs tw-text-grey-700", children: "TX" }), children !== null && children !== void 0 ? children : truncateHash(hash), url && (jsxRuntime.jsx("a", { href: url, target: "_blank", className: 'tw-rounded-squid-s tw-px-squid-xxs hover:tw-bg-material-light-thin', children: jsxRuntime.jsx(SquareArrowTopRight2Icon, { strokeWidth: "1.5", className: "tw-h-[1.2em] tw-w-[1.2em] tw-text-royal-500" }) })), showCopyButton && (jsxRuntime.jsx("span", { className: "tw-rounded-squid-s tw-px-squid-xxs hover:tw-bg-material-light-thin", children: jsxRuntime.jsx(Copy, { size: "16", strokeWidth: "1.5", className: "tw-h-[1.2em] tw-w-[1.2em] tw-cursor-pointer tw-text-royal-500", onClick: () => navigator.clipboard.writeText(hash) }) }))] }));
 }
 
 function WalletLink({ imageURI, address }) {
@@ -6733,9 +6739,10 @@ function useOnResize(ref, callback) {
         const observer = new ResizeObserver(([entry]) => {
             if (!entry)
                 return;
-            callback(entry.contentRect);
+            callbackRef.current(entry.contentRect);
         });
         observer.observe(ref.current);
+        callbackRef.current(ref.current.getBoundingClientRect());
         return () => observer.disconnect();
     }, [ref.current]);
 }
@@ -6762,7 +6769,7 @@ function Collapse(_a) {
     const containerRef = React.useRef(null);
     const contentsRef = React.useRef(null);
     const contentsRect = useRect(contentsRef);
-    const expandedHeight = contentsRect.height;
+    const expandedHeight = Math.max(contentsRect.height, collapsedHeight);
     return (jsxRuntime.jsx("div", Object.assign({ ref: containerRef, style: {
             [expandednessVar]: collapsed ? 0 : 1,
             transition: `${expandednessVar} ${duration}ms ${ANIMATION_TIMINGS.SHOW_ROUTE}`,
@@ -7229,7 +7236,7 @@ function ActionRow(_a) {
     return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-grid tw-grid-cols-[40px,1fr,60px] tw-gap-squid-xs tw-pl-squid-m', className) })));
 }
 function ActionWrapper({ children, status, className, }) {
-    return (jsxRuntime.jsx("div", { className: cn('tw-relative tw-flex tw-flex-col tw-gap-squid-xxs', status === 'waiting' ? 'tw-bg-grey-800' : 'tw-bg-grey-900', className), children: children }));
+    return (jsxRuntime.jsx("div", { className: cn('tw-relative tw-flex tw-flex-col tw-gap-squid-xxs', status === 'waiting' && 'tw-bg-grey-800', className), children: children }));
 }
 function Timestamp({ time }) {
     return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-text-grey-500", children: [formatRelativeDate(time), jsxRuntime.jsx("span", { className: "tw-text-grey-700", children: "\u2022" }), formatTime(time)] }));
@@ -7244,7 +7251,7 @@ function ApproveAction({ status, nextStatus, showTimeline, showBody, profile, ch
 }
 
 function BridgeAction({ status, nextStatus, showTimeline, showBody, token, chain, provider, timestamp, hash, url, }) {
-    return (jsxRuntime.jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsxRuntime.jsx(SquareArrowTopLeftIcon, {}), description: jsxRuntime.jsxs(Inline, { children: ["Bridge", jsxRuntime.jsx(IconLabel, { src: token.logoURI, variant: "round", children: token.symbol }), "to", jsxRuntime.jsx(IconLabel, { src: chain.logoURI, children: chain.name }), "via", jsxRuntime.jsx(IconLabel, { src: provider.logoURI, variant: "round", children: provider.name })] }), showTimeline: showTimeline, showBody: showBody, children: jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
+    return (jsxRuntime.jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsxRuntime.jsx(SquareArrowTopLeftIcon, {}), description: jsxRuntime.jsxs(Inline, { children: ["Bridge", jsxRuntime.jsx(IconLabel, { src: token.logoURI, variant: "round", children: jsxRuntime.jsx(BodyText, { size: "small", children: token.symbol }) }), "to", jsxRuntime.jsx(IconLabel, { src: chain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: chain.name }) }), "via", jsxRuntime.jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsxRuntime.jsx(BodyText, { size: "small", children: provider.name }) })] }), showTimeline: showTimeline, showBody: showBody, children: jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
 }
 
 function TagIcon({ size = '20' }) {
@@ -7265,8 +7272,8 @@ function FeesLines({ status, lines, showTimeline = false, }) {
                         ? statusTextClassMap[status]
                         : '!tw-text-[transparent]'), children: [jsxRuntime.jsx(Timeline.CapTop, {}), jsxRuntime.jsx(Timeline.Straight, {})] }) })] }));
 }
-function FeesRow({ label, usd, eth, collapsed = false }) {
-    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-gap-squid-xs", children: [jsxRuntime.jsx(SizeTransition, { children: jsxRuntime.jsx(BodyText, { size: "small", tight: true, className: cn('tw-block tw-text-nowrap tw-text-grey-300', !collapsed && 'tw-w-[100px]'), children: label }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-items-center", children: jsxRuntime.jsx(PipeSeparator, { className: "tw-text-grey-700" }) }), jsxRuntime.jsx(BodyText, { size: "small", tight: true, className: "tw-flex-grow tw-text-grey-300", children: usd }), jsxRuntime.jsx(CaptionText, { className: "tw-text-right tw-text-grey-500", children: eth })] }));
+function FeesRow({ label, usd, amount, symbol, collapsed = false, }) {
+    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-gap-squid-xs", children: [jsxRuntime.jsx(SizeTransition, { children: jsxRuntime.jsx(BodyText, { size: "small", tight: true, className: cn('tw-block tw-truncate tw-text-grey-300', !collapsed && 'tw-w-[100px]'), children: label }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-items-center", children: jsxRuntime.jsx(PipeSeparator, { className: "tw-text-grey-700" }) }), jsxRuntime.jsxs(BodyText, { size: "small", tight: true, className: "tw-flex-grow tw-text-grey-300", children: ["$", usd] }), jsxRuntime.jsxs(CaptionText, { className: "tw-text-right tw-text-grey-500", children: [amount, " ", symbol] })] }));
 }
 
 function IncompleteAction({ status, nextStatus, message, buttons, }) {
@@ -7282,11 +7289,11 @@ function linkActionTimelineProps(actions, collapsed) {
 }
 
 function ReceiveNFTAction({ status, nextStatus, showTimeline, showBody, nft, chain, wallet, timestamp, hash, url, }) {
-    return (jsxRuntime.jsxs(ActionLayout, { status: status, statusIcon: jsxRuntime.jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive NFT", title: nft.name, icon: jsxRuntime.jsx(ImageIcon, { src: nft.imageURI, variant: "square", size: "xlarge" }), lineCap: jsxRuntime.jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsxRuntime.jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxRuntime.jsxs(BodyText, { className: "tw-flex tw-items-center tw-gap-squid-xs", size: "small", children: [jsxRuntime.jsx(IconLabel, { src: chain.logoURI, children: chain.name }), jsxRuntime.jsx(PipeSeparator, { className: "tw-text-grey-700" }), jsxRuntime.jsx(WalletLink, Object.assign({}, wallet))] }) }), jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })] }));
+    return (jsxRuntime.jsxs(ActionLayout, { status: status, statusIcon: jsxRuntime.jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive NFT", title: nft.name, icon: jsxRuntime.jsx(ImageIcon, { src: nft.imageURI, variant: "square", size: "xlarge" }), lineCap: jsxRuntime.jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsxRuntime.jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxRuntime.jsxs(BodyText, { className: "tw-flex tw-items-center tw-gap-squid-xs", size: "small", children: [jsxRuntime.jsx(IconLabel, { src: chain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: chain.name }) }), jsxRuntime.jsx(PipeSeparator, { className: "tw-text-grey-700" }), jsxRuntime.jsx(WalletLink, Object.assign({}, wallet))] }) }), jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })] }));
 }
 
 function ReceiveTokensAction({ status, nextStatus, showTimeline, showBody, token, amount, chain, wallet, timestamp, hash, url, }) {
-    return (jsxRuntime.jsxs(ActionLayout, { status: status, statusIcon: jsxRuntime.jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive tokens", title: `${amount} ${token.symbol}`, icon: jsxRuntime.jsx(ImageIcon, { src: token.logoURI, variant: "round", size: "xlarge" }), lineCap: jsxRuntime.jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsxRuntime.jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxRuntime.jsxs(BodyText, { size: "small", className: "tw-flex tw-items-center tw-gap-squid-xs", children: [jsxRuntime.jsx(IconLabel, { src: chain.logoURI, children: chain.name }), jsxRuntime.jsx(PipeSeparator, { className: "tw-text-body-small tw-text-grey-700" }), ' ', jsxRuntime.jsx(WalletLink, Object.assign({}, wallet))] }) }), jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })] }));
+    return (jsxRuntime.jsxs(ActionLayout, { status: status, statusIcon: jsxRuntime.jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive tokens", title: `${amount} ${token.symbol}`, icon: jsxRuntime.jsx(ImageIcon, { src: token.logoURI, variant: "round", size: "xlarge" }), lineCap: jsxRuntime.jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsxRuntime.jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxRuntime.jsxs(BodyText, { size: "small", className: "tw-flex tw-items-center tw-gap-squid-xs", children: [jsxRuntime.jsx(IconLabel, { src: chain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: chain.name }) }), jsxRuntime.jsx(PipeSeparator, { className: "tw-text-body-small tw-text-grey-700" }), ' ', jsxRuntime.jsx(WalletLink, Object.assign({}, wallet))] }) }), jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })] }));
 }
 
 function SendTokensAction({ status, nextStatus, showTimeline, showBody, token, amount, chain, wallet, timestamp, hash, url, }) {
@@ -7300,9 +7307,9 @@ function PieChartIcon() {
 function StakeAction({ status, nextStatus, showTimeline, showBody, token, provider, timestamp, hash, url, }) {
     return (jsxRuntime.jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsxRuntime.jsx(PieChartIcon, {}), description: jsxRuntime.jsx(Inline, { children: [
                 'Stake',
-                jsxRuntime.jsx(IconLabel, { src: token.logoURI, variant: "round", children: token.symbol }),
+                jsxRuntime.jsx(IconLabel, { src: token.logoURI, variant: "round", children: jsxRuntime.jsx(BodyText, { size: "small", children: token.symbol }) }),
                 'on',
-                jsxRuntime.jsx(IconLabel, { src: provider.logoURI, variant: "round", children: provider.name }),
+                jsxRuntime.jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsxRuntime.jsx(BodyText, { size: "small", children: provider.name }) }),
             ] }), showTimeline: showTimeline, showBody: showBody, children: jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
 }
 
@@ -7322,22 +7329,15 @@ function StartAction({ status, nextStatus, showTimeline = false, showBody = fals
 function SuccessAction({ nextStatus, status, description = status === 'error'
     ? 'Transaction failed'
     : 'Transaction successful', showTimeline, showBody, timestamp, hash, url, }) {
-    return (jsxRuntime.jsx(ActionLayout, { description: description, status: status, nextStatus: nextStatus, showTimeline: showTimeline, showBody: showBody, children: jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
+    return (jsxRuntime.jsx(ActionLayout, { description: description, status: status, nextStatus: nextStatus, showTimeline: showTimeline, showBody: showBody, children: (timestamp || hash) && (jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })) }));
 }
 
 function SwapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }) {
-    return (jsxRuntime.jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsxRuntime.jsx(ArrowBottomTopIcon, { size: "16" }), description: jsxRuntime.jsxs(Inline, { children: ["Swap", jsxRuntime.jsx(IconLabel, { src: fromToken.logoURI, variant: "round", children: fromToken.symbol }), "to", jsxRuntime.jsx(IconLabel, { src: toToken.logoURI, variant: "round", children: toToken.symbol }), "via", jsxRuntime.jsx(IconLabel, { src: provider.logoURI, variant: "round", children: provider.name })] }), showTimeline: showTimeline, showBody: showBody, children: jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
+    return (jsxRuntime.jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsxRuntime.jsx(ArrowBottomTopIcon, { size: "16" }), description: jsxRuntime.jsxs(Inline, { children: ["Swap", jsxRuntime.jsx(IconLabel, { src: fromToken.logoURI, variant: "round", children: jsxRuntime.jsx(BodyText, { size: "small", children: fromToken.symbol }) }), "to", jsxRuntime.jsx(IconLabel, { src: toToken.logoURI, variant: "round", children: jsxRuntime.jsx(BodyText, { size: "small", children: toToken.symbol }) }), "via", jsxRuntime.jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsxRuntime.jsx(BodyText, { size: "small", children: provider.name }) })] }), showTimeline: showTimeline, showBody: showBody, children: jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
 }
 
 function WrapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }) {
-    return (jsxRuntime.jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsxRuntime.jsx(ArrowBottomTopIcon, { size: "16" }), description: jsxRuntime.jsx(Inline, { children: [
-                'Wrap',
-                jsxRuntime.jsx(IconLabel, { src: fromToken.logoURI, variant: "round", children: fromToken.symbol }),
-                'to',
-                jsxRuntime.jsx(IconLabel, { src: toToken.logoURI, variant: "round", children: toToken.symbol }),
-                'via',
-                jsxRuntime.jsx(IconLabel, { src: provider.logoURI, variant: "round", children: provider.name }),
-            ] }), showTimeline: showTimeline, showBody: showBody, children: jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
+    return (jsxRuntime.jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsxRuntime.jsx(ArrowBottomTopIcon, { size: "16" }), description: jsxRuntime.jsxs(Inline, { children: ["Wrap", jsxRuntime.jsx(IconLabel, { src: fromToken.logoURI, variant: "round", children: jsxRuntime.jsx(BodyText, { size: "small", children: fromToken.symbol }) }), "to", jsxRuntime.jsx(IconLabel, { src: toToken.logoURI, variant: "round", children: jsxRuntime.jsx(BodyText, { size: "small", children: toToken.symbol }) }), "via", jsxRuntime.jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsxRuntime.jsx(BodyText, { size: "small", children: provider.name }) })] }), showTimeline: showTimeline, showBody: showBody, children: jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
 }
 
 const actionComponentMap = {
@@ -7382,9 +7382,8 @@ function DropdownMenu({ dropdownRef, items, className, menuRef, isHidden = false
     return (jsxRuntime.jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsxRuntime.jsx(Menu, { menuRef: menuRef, rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: !isHidden && (jsxRuntime.jsx("ul", { className: cn('tw-flex tw-max-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs', listClassName), children: items.map((item) => (jsxRuntime.jsx(DropdownMenuItem, Object.assign({}, item), item.label))) })) }) }));
 }
 
-function ExploreLayout({ navigation, children }) {
-    return (jsxRuntime.jsxs("div", { className: "tw-overflow-hidden tw-rounded-squid-l tw-shadow-elevation-light-3", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-squid-xl tw-items-center tw-border-b tw-border-b-material-dark-thin tw-bg-grey-800 tw-px-squid-m tw-text-grey-500 dark:tw-border-b-material-light-thin", children: navigation }), jsxRuntime.jsx("div", { className: "tw-bg-grey-900", children: children })] }));
-}
+const ExploreLayout = styled('div', 'tw-overflow-hidden tw-rounded-squid-l tw-bg-grey-900 tw-shadow-elevation-light-3');
+const ExploreNav = styled('div', 'tw-flex tw-min-h-squid-xl tw-items-center tw-border-b tw-border-b-material-dark-thin tw-bg-grey-800 tw-px-squid-m tw-text-grey-500 dark:tw-border-b-material-light-thin');
 
 function InfoBox({ title, description, icon }) {
     return (jsxRuntime.jsxs("div", { className: "tw-align-self-stretch tw-flex tw-flex-col tw-items-center tw-gap-squid-xs tw-px-squid-m tw-pb-squid-l tw-pt-squid-xs tw-text-royal-400", children: [icon, jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xxs tw-text-center", children: [jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[9px]", children: title }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: description })] })] }));
@@ -7444,7 +7443,7 @@ function NavigationBar({ title, displayBackButton = false, logoUrl, transparent
 }
 
 function ProductCard({ children }) {
-    return (jsxRuntime.jsx("div", { className: "mobile-lg:tw-rounded-squid-l tw-flex tw-h-full tw-flex-col tw-justify-center tw-overflow-hidden tw-bg-grey-900 tw-text-grey-300 tw-outline tw-outline-1 tw-outline-material-light-thin group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-3 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-3", children: jsxRuntime.jsx("div", { className: "mobile-lg:tw-w-card-large mobile-lg:tw-h-card-large mobile-lg:tw-min-h-card-large tw-relative tw-h-card-compact tw-min-h-card-compact tw-w-full tw-max-w-[100vw]", children: children }) }));
+    return (jsxRuntime.jsx("div", { className: "tw-flex tw-h-full tw-max-w-[100vw] tw-flex-col tw-justify-center tw-overflow-hidden tw-bg-grey-900 tw-text-grey-300 tw-outline tw-outline-1 tw-outline-material-light-thin group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-3 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-3 mobile-lg:tw-max-w-card-large mobile-lg:tw-rounded-squid-l", children: jsxRuntime.jsx("div", { className: "tw-relative tw-h-card-compact tw-min-h-card-compact tw-w-full mobile-lg:tw-h-card-large mobile-lg:tw-min-h-card-large mobile-lg:tw-w-card-large", children: children }) }));
 }
 function BorderedContainer({ children, className, }) {
     return (jsxRuntime.jsx("section", { className: cn('tw-border-t tw-border-t-material-light-thin', className), children: children }));
@@ -13342,13 +13341,13 @@ function Tick({ className }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "9", height: "7", fill: "none", viewBox: "0 0 9 7", className: className, children: jsxRuntime.jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M7.497 1l-4.5 4.5-2-2" }) }));
 }
 
-function TransactionFilters({ chainType, setChainType, chain, setChain, fromDate, setFromDate, toDate, setToDate, status, setStatus, chains, }) {
-    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-w-[300px] tw-flex-col tw-border-l tw-border-material-light-thin tw-bg-material-dark-thin tw-py-squid-xxl tw-backdrop-blur-2xl dark:tw-bg-material-dark-thick", children: [jsxRuntime.jsx(FilterSection, { title: "Chain", children: jsxRuntime.jsx(ChainsFilter, { chainType: chainType, setChainType: setChainType, chain: chain, setChain: setChain, chains: chains }) }), jsxRuntime.jsx(FilterSection, { title: "Date", initCollapsed: true, children: jsxRuntime.jsx(DateFilters, { fromDate: fromDate, setFromDate: setFromDate, toDate: toDate, setToDate: setToDate }) }), jsxRuntime.jsx(FilterSection, { title: "Status", initCollapsed: true, children: jsxRuntime.jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", children: status.map((s) => (jsxRuntime.jsx(StatusFilter, { status: s, selected: status.includes(s), onChange: () => setStatus(arrayToggle(status, s)), icon: s === 'ongoing' ? jsxRuntime.jsx(DotGrid1x3HorizontalIcon, {}) : undefined }, s))) }) })] }));
+function TransactionFilters({ chainType, setChainType, chain, setChain, fromDate, setFromDate, toDate, setToDate, status = [], setStatus, chains, }) {
+    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsx(FilterSection, { title: "Chain", children: jsxRuntime.jsx(ChainsFilter, { chainType: chainType, setChainType: setChainType, chain: chain, setChain: setChain, chains: chains }) }), jsxRuntime.jsx(FilterSection, { title: "Date", initCollapsed: true, children: jsxRuntime.jsx(DateFilters, { fromDate: fromDate, setFromDate: setFromDate, toDate: toDate, setToDate: setToDate }) }), jsxRuntime.jsx(FilterSection, { title: "Status", initCollapsed: true, children: jsxRuntime.jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", children: ['success', 'ongoing', 'error'].map((s) => (jsxRuntime.jsx(StatusFilter, { status: s, selected: status.length === 0 || status.includes(s), onChange: () => setStatus(arrayToggle(status, s)), icon: s === 'ongoing' ? jsxRuntime.jsx(DotGrid1x3HorizontalIcon, {}) : undefined }, s))) }) })] }));
 }
 const arrayToggle = (array, value) => array.includes(value) ? array.filter((v) => v !== value) : [...array, value];
 function ChainsFilter({ chainType, setChainType, chain, setChain, chains, }) {
     const [search, setSearch] = React.useState('');
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-gap-squid-xxs", children: [jsxRuntime.jsxs(Toggle, { selected: chainType === 'source', onClick: () => setChainType('source'), children: [jsxRuntime.jsx(ArrowRightUpCircleIcon, {}), "Source"] }), jsxRuntime.jsxs(Toggle, { selected: chainType === 'destination', onClick: () => setChainType('destination'), children: [jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), "Destination"] })] }), jsxRuntime.jsx(Input, { value: search, onChange: (e) => setSearch(e.target.value) }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", children: [jsxRuntime.jsx(ChainFilter, { name: "All Chains", logoURI: chainDataURL, selected: chain === null, onClick: () => setChain(null) }), chains
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-gap-squid-xxs", children: [jsxRuntime.jsxs(Toggle, { selected: chainType === 'source', onClick: () => setChainType('source'), children: [jsxRuntime.jsx(ArrowRightUpCircleIcon, {}), "Source"] }), jsxRuntime.jsxs(Toggle, { selected: chainType === 'destination', onClick: () => setChainType('destination'), children: [jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), "Destination"] })] }), jsxRuntime.jsx(Input, { value: search, onChange: (e) => setSearch(e.target.value) }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", children: [jsxRuntime.jsx(ChainFilter, { name: "All Chains", logoURI: chainDataURL, selected: chain === null, onClick: () => setChain(undefined) }), chains
                         .filter(({ name }) => search === '' ||
                         name.toLocaleLowerCase().includes(search.toLocaleLowerCase()))
                         .map(({ logoURI, name }, index) => (jsxRuntime.jsx(ChainFilter, { name: name, logoURI: logoURI, selected: chain === name, onClick: () => setChain(name) }, index)))] })] }));
@@ -13380,7 +13379,7 @@ function DateFilter({ label, placeholder, fromDate, toDate, type, onChange, expa
     const onDayPickerSelect = (date) => {
         if (!date) {
             setInputValue('');
-            onChange(null);
+            onChange(undefined);
         }
         else {
             onChange(date);
@@ -13396,7 +13395,7 @@ function DateFilter({ label, placeholder, fromDate, toDate, type, onChange, expa
             setMonth(date);
         }
         else {
-            onChange(null);
+            onChange(undefined);
         }
     };
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-200", children: label }), jsxRuntime.jsx(Input, { className: "date-input-no-icon", icon: jsxRuntime.jsx(Calendar, {}), placeholder: placeholder, value: inputValue, onClick: () => setExpanded(true), type: "date", onChange: onInputChange }), jsxRuntime.jsx(Collapse, { collapsed: !expanded, children: jsxRuntime.jsx(DayPicker, { weekStartsOn: 1, formatters: {
@@ -13428,16 +13427,16 @@ function Checkbox({ checked, onChange, children, className }) {
 }
 const chainDataURL = "data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='30' fill='%239E79D2'/%3E%3Cpath d='M13.125 8.90625L13.8295 8.21098C16.0274 6.01301 19.5911 6.01301 21.789 8.21098C23.987 10.4089 23.987 13.9726 21.789 16.1705L21.0938 16.875M8.90625 13.125L8.21097 13.8295C6.01301 16.0274 6.01301 19.5911 8.21098 21.789C10.4089 23.987 13.9726 23.987 16.1705 21.789L16.875 21.0938M13.125 16.875L16.875 13.125' stroke='%23FBFBFD' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'/%3E%3C/svg%3E%0A";
 
-function TransactionHeaderLayout({ status, title, image = jsxRuntime.jsx("span", {}), children, }) {
-    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs tw-bg-grey-900 tw-py-squid-l tw-pl-[75px] tw-pr-squid-l", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-justify-between", children: [image, status && jsxRuntime.jsx(TransactionState, { status: status })] }), jsxRuntime.jsx(HeadingText, { size: "small", className: "tw-text-grey-300", children: title }), jsxRuntime.jsx("div", { children: children })] }));
+function TransactionHeaderLayout({ status, title, image = jsxRuntime.jsx("span", {}), children, isLoading, }) {
+    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs tw-bg-grey-900 tw-py-squid-l tw-pl-[75px] tw-pr-squid-l", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-justify-between", children: [image, status && jsxRuntime.jsx(TransactionState, { status: status })] }), jsxRuntime.jsx(LoadingSkeleton, { isLoading: isLoading, children: jsxRuntime.jsx(HeadingText, { size: "small", className: "tw-text-grey-300", children: title }) }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(LoadingSkeleton, { isLoading: isLoading, children: children }) })] }));
 }
 
 function BridgeHeader({ tokenLogoURI, chainLogoURI, title = 'Bridge', hash, url, status, }) {
-    return (jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, image: jsxRuntime.jsxs("div", { className: "tw-relative", children: [jsxRuntime.jsx(ImageIcon, { src: tokenLogoURI, size: "xlarge", variant: "round" }), jsxRuntime.jsx(ImageIcon, { src: chainLogoURI, className: "tw-absolute -tw-right-squid-xxs tw-bottom-0" })] }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
+    return (jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, image: jsxRuntime.jsxs("div", { className: "tw-relative", children: [jsxRuntime.jsx(ImageIcon, { src: tokenLogoURI, size: "xlarge", variant: "round" }), jsxRuntime.jsx(ImageIcon, { src: chainLogoURI, className: "tw-absolute -tw-right-squid-xxs tw-bottom-0" })] }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
 }
 
 function BuyNFTHeader({ imageUrl, title = 'Buy NFT', hash, url, status, }) {
-    return (jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, image: jsxRuntime.jsx(ImageIcon, { src: imageUrl, size: "xlarge" }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
+    return (jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, image: jsxRuntime.jsx(ImageIcon, { src: imageUrl, size: "xlarge" }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
 }
 
 function Approve() {
@@ -13445,7 +13444,7 @@ function Approve() {
 }
 
 function InteractionHeader({ title = 'Interaction', image = jsxRuntime.jsx(Approve, {}), hash, url, status, }) {
-    return (jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, image: image, children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
+    return (jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, image: image, children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
 }
 
 function CoinsIcon() {
@@ -13466,7 +13465,7 @@ function ProfilePicture({ src }) {
 }
 
 function SwapHeader({ fromToken, toToken, title = 'Swap', hash, url, status, }) {
-    return (jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, image: jsxRuntime.jsx(TokenPair, { firstToken: fromToken, secondToken: toToken }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
+    return (jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, image: jsxRuntime.jsx(TokenPair, { firstToken: fromToken, secondToken: toToken }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
 }
 
 const headerComponentsMap = {
@@ -13548,13 +13547,17 @@ function TransactionProperties({ type, props, }) {
     return jsxRuntime.jsx(Component, Object.assign({}, props));
 }
 
-function TransactionSearch({ query, setQuery, children, }) {
-    return (jsxRuntime.jsx("div", { className: "tw-relative tw-h-[50px]", children: jsxRuntime.jsxs("div", { className: "tw-l-0 tw-absolute tw-top-0 tw-flex tw-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-hidden tw-rounded-[25px] tw-border-material-light-thin tw-bg-material-dark-thin tw-p-squid-xxs tw-backdrop-blur-2xl dark:tw-bg-material-dark-thick", children: [jsxRuntime.jsx(Input, { placeholder: "Transaction hash or address", value: query, onChange: (e) => setQuery(e.target.value), actionButtonProps: {
+function TransactionSearch({ query, setQuery, children, className, }) {
+    return (jsxRuntime.jsx("div", { className: cn('tw-relative tw-h-[50px]', className), children: jsxRuntime.jsxs("div", { className: "tw-l-0 tw-absolute tw-top-0 tw-flex tw-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-hidden tw-rounded-[25px] tw-border-material-light-thin tw-bg-material-dark-thin tw-p-squid-xxs tw-backdrop-blur-2xl dark:tw-bg-material-dark-thick", children: [jsxRuntime.jsx(Input, { placeholder: "Transaction hash or address", value: query, onChange: (e) => setQuery(e.target.value), actionButtonProps: {
                         label: 'Paste',
                         onClick: () => __awaiter$1(this, void 0, void 0, function* () { return setQuery(yield navigator.clipboard.readText()); }),
                     } }), children && (jsxRuntime.jsx("div", { className: "tw-max-h-[80vh] tw-overflow-y-auto tw-overflow-x-hidden tw-rounded-[20px]", children: children }))] }) }));
 }
 
+function Toast({ headerContent, actionsContent, description, chipLabel, title, }) {
+    return (jsxRuntime.jsxs(Menu, { contentClassName: "tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", 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 buttonClassName = 'tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs';
 // checks that the value includes at least one character different than `0` (zero), or `.` (dot)
 const RegExpNonZeroValue = /[^0.]/;
@@ -13846,10 +13849,10 @@ function FilterIcon() {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "16", fill: "none", viewBox: "0 0 20 16", children: jsxRuntime.jsx("path", { fill: "currentColor", fillOpacity: "0.66", fillRule: "evenodd", d: "M0 1a1 1 0 011-1h18a1 1 0 110 2H1a1 1 0 01-1-1zm3 7a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3 7a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z", clipRule: "evenodd" }) }));
 }
 
-function FilterButton({ selected, numApplied = 0 }) {
+function FilterButton({ selected, numApplied = 0, onClick, }) {
     return (jsxRuntime.jsxs("div", { className: "tw-relative", children: [jsxRuntime.jsx(Button$1, { variant: "tertiary", size: "md", className: cn(selected
                     ? '!tw-bg-grey-500 !tw-text-grey-800'
-                    : '!tw-border-transparent !tw-bg-grey-800 !tw-text-grey-500'), children: jsxRuntime.jsx(FilterIcon, {}) }), numApplied > 0 && (jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-top-0 tw-h-squid-m tw-w-squid-xl -tw-translate-y-1/2 tw-translate-x-1/2 tw-rounded-full tw-bg-[#E4FE53] tw-text-center tw-leading-[1] tw-text-grey-200 dark:tw-text-grey-900", children: jsxRuntime.jsx(CaptionText, { children: numApplied }) }))] }));
+                    : '!tw-border-transparent !tw-bg-grey-800 !tw-text-grey-500'), onClick: onClick, children: jsxRuntime.jsx(FilterIcon, {}) }), numApplied > 0 && (jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-top-0 tw-h-squid-m tw-w-squid-xl -tw-translate-y-1/2 tw-translate-x-1/2 tw-rounded-full tw-bg-[#E4FE53] tw-text-center tw-leading-[1] tw-text-grey-200 dark:tw-text-grey-900", children: jsxRuntime.jsx(CaptionText, { children: numApplied }) }))] }));
 }
 
 function SettingsButton({ label, isSelected = false, onClick, }) {
@@ -13871,11 +13874,11 @@ function SparkleIcon() {
 }
 
 function AssetsView({ chains, favoriteTokens, popularTokens, userTokens, }) {
-    return (jsxRuntime.jsxs(ProductCard, { children: [jsxRuntime.jsx(NavigationBar, { displayBackButton: true }), jsxRuntime.jsx("div", { className: "tw-max-h-[60px] tw-px-squid-m tw-py-squid-xs", children: jsxRuntime.jsx(Input, {}) }), jsxRuntime.jsx(BorderedContainer, { children: jsxRuntime.jsxs("div", { className: "mobile-lg:tw-grid-cols-[180px_1fr_299px] tw-grid tw-grid-cols-[70px_1fr_323px]", children: [jsxRuntime.jsxs("div", { style: {
+    return (jsxRuntime.jsxs(ProductCard, { children: [jsxRuntime.jsx(NavigationBar, { displayBackButton: true }), jsxRuntime.jsx("div", { className: "tw-max-h-[60px] tw-px-squid-m tw-py-squid-xs", children: jsxRuntime.jsx(Input, {}) }), jsxRuntime.jsx(BorderedContainer, { children: jsxRuntime.jsxs("div", { className: "tw-grid tw-grid-cols-[70px_1fr] mobile-lg:!tw-grid-cols-[180px_299px]", children: [jsxRuntime.jsxs("div", { style: {
                                 scrollbarWidth: 'none',
-                            }, className: "mobile-lg:tw-w-[180px] mobile-lg:tw-max-w-[180px] mobile-lg:tw-pt-0 tw-flex tw-max-h-[540px] tw-w-[70px] tw-max-w-[70px] tw-flex-col tw-gap-squid-xxs tw-overflow-y-auto tw-overflow-x-hidden tw-pt-squid-xs", children: [jsxRuntime.jsx(SectionTitle, { title: "Chains", icon: jsxRuntime.jsx(ChainLink, {}), className: "mobile-lg:tw-flex tw-hidden" }), jsxRuntime.jsxs(List, { children: [jsxRuntime.jsx(ListItem, { size: "small", mainIcon: jsxRuntime.jsx("span", { className: "tw-flex tw-h-squid-l tw-w-squid-l tw-flex-1 tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-royal-500 tw-text-[#FBFBFD]", children: jsxRuntime.jsx(ChainLink, { size: "24" }) }), itemTitle: "All Chains", compactOnMobile: true, onClick: () => { } }), chains.map((item) => (jsxRuntime.jsx(ListItem, { size: "small", mainImageUrl: item.iconUrl, itemTitle: item.name, detail: item.name, compactOnMobile: true, onClick: () => { } }, item.name)))] })] }), jsxRuntime.jsxs("div", { style: {
+                            }, className: "tw-flex tw-max-h-[540px] tw-w-[70px] tw-max-w-[70px] tw-flex-col tw-gap-squid-xxs tw-overflow-y-auto tw-overflow-x-hidden tw-pt-squid-xs mobile-lg:tw-w-[180px] mobile-lg:tw-max-w-[180px] mobile-lg:tw-pt-0", children: [jsxRuntime.jsx(SectionTitle, { title: "Chains", icon: jsxRuntime.jsx(ChainLink, {}), className: "tw-hidden mobile-lg:tw-flex" }), jsxRuntime.jsxs(List, { children: [jsxRuntime.jsx(ListItem, { size: "small", mainIcon: jsxRuntime.jsx("span", { className: "tw-flex tw-h-squid-l tw-w-squid-l tw-flex-1 tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-royal-500 tw-text-[#FBFBFD]", children: jsxRuntime.jsx(ChainLink, { size: "24" }) }), itemTitle: "All Chains", compactOnMobile: true, onClick: () => { } }), chains.map((item) => (jsxRuntime.jsx(ListItem, { size: "small", mainImageUrl: item.iconUrl, itemTitle: item.name, detail: item.name, compactOnMobile: true, onClick: () => { } }, item.name)))] })] }), jsxRuntime.jsxs("div", { style: {
                                 scrollbarWidth: 'none',
-                            }, className: "mobile-lg:tw-w-[299px] mobile-lg:tw-max-w-[299px] tw-flex tw-max-h-[540px] tw-w-[323px] tw-max-w-[323px] tw-flex-col tw-gap-squid-xxs tw-overflow-y-auto tw-overflow-x-hidden", children: [jsxRuntime.jsx(SectionTitle, { title: "Favorite tokens", icon: jsxRuntime.jsx(HeartSmallIcon, {}) }), jsxRuntime.jsx(List, { children: favoriteTokens.map((favToken) => (jsxRuntime.jsx(ListItem, { size: "large", mainImageUrl: favToken.iconUrl, secondaryImageUrl: favToken.iconUrl, itemTitle: favToken.name, subtitle: favToken.symbol, icon: jsxRuntime.jsx(BrokenHeartIcon, { className: "tw-text-status-negative" }), showDetailOnHoverOnly: true, rounded: true, onClick: () => { } }, favToken.name))) }), jsxRuntime.jsx(SectionTitle, { title: "Your tokens loading", icon: jsxRuntime.jsx(CoinsIcon, {}) }), jsxRuntime.jsx(List, { children: userTokens.map((userToken) => (jsxRuntime.jsx(ListItem, { size: "large", mainImageUrl: userToken.iconUrl, secondaryImageUrl: userToken.iconUrl, itemTitle: userToken.name, subtitle: `${userToken.balance} ${userToken.symbol}`, icon: jsxRuntime.jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), showDetailOnHoverOnly: true, rounded: true, onClick: () => { }, loading: { subtitle: userToken.symbol } }, userToken.name))) }), jsxRuntime.jsx(SectionTitle, { title: "Your tokens & balance", icon: jsxRuntime.jsx(CoinsIcon, {}) }), jsxRuntime.jsx(List, { children: userTokens.map((userToken) => (jsxRuntime.jsx(ListItem, { size: "large", mainImageUrl: userToken.iconUrl, secondaryImageUrl: userToken.iconUrl, itemTitle: userToken.name, subtitle: `${userToken.balance} ${userToken.symbol}`, icon: jsxRuntime.jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), showDetailOnHoverOnly: true, rounded: true, onClick: () => { } }, userToken.name))) }), jsxRuntime.jsx(SectionTitle, { title: "Popular tokens", icon: jsxRuntime.jsx(SparkleIcon, {}) }), jsxRuntime.jsx(List, { children: popularTokens.map((popToken) => (jsxRuntime.jsx(ListItem, { size: "large", mainImageUrl: popToken.iconUrl, secondaryImageUrl: popToken.iconUrl, itemTitle: popToken.name, subtitle: popToken.symbol, icon: jsxRuntime.jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), showDetailOnHoverOnly: true, rounded: true, onClick: () => { } }, popToken.name))) })] })] }) })] }));
+                            }, className: "mobile-lg:tw-max-w-[299px tw-flex tw-max-h-[540px] tw-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-y-auto tw-overflow-x-hidden mobile-lg:tw-w-[299px]", children: [jsxRuntime.jsx(SectionTitle, { title: "Favorite tokens", icon: jsxRuntime.jsx(HeartSmallIcon, {}) }), jsxRuntime.jsx(List, { children: favoriteTokens.map((favToken) => (jsxRuntime.jsx(ListItem, { size: "large", mainImageUrl: favToken.iconUrl, secondaryImageUrl: favToken.iconUrl, itemTitle: favToken.name, subtitle: favToken.symbol, icon: jsxRuntime.jsx(BrokenHeartIcon, { className: "tw-text-status-negative" }), showDetailOnHoverOnly: true, rounded: true, onClick: () => { } }, favToken.name))) }), jsxRuntime.jsx(SectionTitle, { title: "Your tokens loading", icon: jsxRuntime.jsx(CoinsIcon, {}) }), jsxRuntime.jsx(List, { children: userTokens.map((userToken) => (jsxRuntime.jsx(ListItem, { size: "large", mainImageUrl: userToken.iconUrl, secondaryImageUrl: userToken.iconUrl, itemTitle: userToken.name, subtitle: `${userToken.balance} ${userToken.symbol}`, icon: jsxRuntime.jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), showDetailOnHoverOnly: true, rounded: true, onClick: () => { }, loading: { subtitle: userToken.symbol } }, userToken.name))) }), jsxRuntime.jsx(SectionTitle, { title: "Your tokens & balance", icon: jsxRuntime.jsx(CoinsIcon, {}) }), jsxRuntime.jsx(List, { children: userTokens.map((userToken) => (jsxRuntime.jsx(ListItem, { size: "large", mainImageUrl: userToken.iconUrl, secondaryImageUrl: userToken.iconUrl, itemTitle: userToken.name, subtitle: `${userToken.balance} ${userToken.symbol}`, icon: jsxRuntime.jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), showDetailOnHoverOnly: true, rounded: true, onClick: () => { } }, userToken.name))) }), jsxRuntime.jsx(SectionTitle, { title: "Popular tokens", icon: jsxRuntime.jsx(SparkleIcon, {}) }), jsxRuntime.jsx(List, { children: popularTokens.map((popToken) => (jsxRuntime.jsx(ListItem, { size: "large", mainImageUrl: popToken.iconUrl, secondaryImageUrl: popToken.iconUrl, itemTitle: popToken.name, subtitle: popToken.symbol, icon: jsxRuntime.jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), showDetailOnHoverOnly: true, rounded: true, onClick: () => { } }, popToken.name))) })] })] }) })] }));
 }
 const List = ({ children }) => {
     return (jsxRuntime.jsx("ul", { className: "tw-flex tw-flex-col tw-gap-squid-xxs tw-pb-squid-xs", children: children }));
@@ -49096,13 +49099,15 @@ function TransactionViewLayout(_a) {
     return (jsxRuntime.jsxs("div", Object.assign({ className: "tw-divide-y tw-divide-material-light-thin" }, props, { children: [header, properties, jsxRuntime.jsx(CollapsingSection, { collapsed: actionsCollapsed, setCollapsed: setActionsCollapsed, children: linkActionTimelineProps(actions, actionsCollapsed).map((props, i) => (jsxRuntime.jsx("div", { className: cn(i > 0 && 'tw-border-t tw-border-t-material-light-thin'), children: jsxRuntime.jsx(TransactionAction, Object.assign({}, props)) }, i))) }), jsxRuntime.jsxs(CollapsingSection, { collapsed: feesCollapsed, setCollapsed: setFeesCollapsed, children: [jsxRuntime.jsx(FeesTotal, Object.assign({ collapsed: feesCollapsed, showTimeline: true }, fees)), jsxRuntime.jsx(FeesLines, Object.assign({}, fees))] })] })));
 }
 function CollapsingSection({ children, collapsed, setCollapsed, collapsedHeight = 50, }) {
-    return (jsxRuntime.jsx("div", { className: cn('tw-relative', collapsed ? 'tw-cursor-pointer' : ''), onClick: () => {
+    return (jsxRuntime.jsx("div", { className: cn('tw-group/collapsing-section tw-relative tw-bg-grey-900', collapsed ? 'tw-cursor-pointer' : ''), onClick: () => {
             if (collapsed)
                 setCollapsed(false);
         }, children: jsxRuntime.jsxs("div", { className: cn('tw-relative tw-border-material-light-thin tw-transition-[border-width] tw-duration-200', !collapsed && 'tw-border-y-[4px]'), children: [jsxRuntime.jsx("div", { className: "cursor-pointer tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-flex tw-h-full tw-cursor-pointer tw-items-center tw-pr-squid-m", style: { height: `${collapsedHeight}px` }, onClick: () => {
                         if (!collapsed)
                             setCollapsed(true);
-                    }, children: jsxRuntime.jsx(ChevronLargeDownIcon, { className: cn('tw-origin-center tw-text-grey-300 tw-transition-transform tw-duration-200', collapsed && '-tw-rotate-90') }) }), jsxRuntime.jsx(Collapse, { collapsed: collapsed, collapsedHeight: collapsedHeight, className: collapsed ? 'tw-pointer-events-none' : '', children: children })] }) }));
+                    }, children: jsxRuntime.jsx(ChevronLargeDownIcon, { className: cn('tw-origin-center tw-text-grey-300 tw-transition-transform tw-duration-200', collapsed && '-tw-rotate-90') }) }), jsxRuntime.jsx("div", { 
+                    // hover highlight
+                    className: "tw-pointer-events-none tw-absolute tw-left-0 tw-top-0 tw-h-[50px] tw-w-full", children: jsxRuntime.jsx("div", { className: cn('tw-absolute tw-bottom-squid-xxs tw-left-squid-xs tw-right-squid-xs tw-top-squid-xxs tw-rounded-squid-xs tw-bg-material-light-thin tw-opacity-0 tw-transition-opacity tw-duration-200', collapsed && 'group-hover/collapsing-section:tw-opacity-100') }) }), jsxRuntime.jsx(Collapse, { collapsed: collapsed, collapsedHeight: collapsedHeight, children: children })] }) }));
 }
 
 function BridgeTransactionView({ title, hash, status, url, amount, token, fromChain, toChain, address, actions, fees, boosted, timeToComplete, }) {
@@ -49318,7 +49323,7 @@ function blendColors(foreground, background) {
 
 function SquidConfigProvider({ theme = lightTheme, children, themeType = 'light', }) {
     const parsedStyle = parseSquidTheme(theme);
-    return (jsxRuntime.jsx("div", { style: Object.assign(Object.assign({}, parsedStyle), { justifyContent: 'center', alignItems: 'center', display: 'flex' }), "data-squid-theme-type": themeType, className: "mobile-lg:tw-h-auto tw-group tw-relative tw-h-screen tw-font-geist", children: children }));
+    return (jsxRuntime.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 }));
 }
 
 exports.ActionLayout = ActionLayout;
@@ -49356,6 +49361,7 @@ exports.DropdownMenu = DropdownMenu;
 exports.DropdownMenuItem = DropdownMenuItem;
 exports.ErrorMessage = ErrorMessage;
 exports.ExploreLayout = ExploreLayout;
+exports.ExploreNav = ExploreNav;
 exports.FeeButton = FeeButton;
 exports.FeesAction = FeesAction;
 exports.FeesLines = FeesLines;
@@ -49417,6 +49423,7 @@ exports.SwapStepsCollapsed = SwapStepsCollapsed;
 exports.SwapTransactionView = SwapTransactionView;
 exports.Switch = Switch;
 exports.Timestamp = Timestamp;
+exports.Toast = Toast;
 exports.TokenPair = TokenPair;
 exports.Tooltip = Tooltip;
 exports.TransactionAction = TransactionAction;

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

@@ -7,5 +7,5 @@ interface LoadingSkeletonProps {
     children?: React.ReactNode;
     width?: string;
 }
-export declare function LoadingSkeleton({ className, height, isLoading: isLoadingProp, children, width, }: LoadingSkeletonProps): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | null | undefined;
+export declare function LoadingSkeleton({ className, height, isLoading: isLoadingProp, children, width, }: LoadingSkeletonProps): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/buttons/FilterButton.d.ts

@@ -1,6 +1,7 @@
 interface FilterButtonProps {
     selected: boolean;
     numApplied?: number;
+    onClick?: () => void;
 }
-export declare function FilterButton({ selected, numApplied }: FilterButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterButton({ selected, numApplied, onClick, }: FilterButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface AppContainerProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare function AppContainer({ children, className, ...props }: AppContainerProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,7 +1,3 @@
-import { ReactNode } from 'react';
-interface ExploreLayoutProps {
-    navigation?: ReactNode;
-    children?: ReactNode;
-}
-export declare function ExploreLayout({ navigation, children }: ExploreLayoutProps): import("react/jsx-runtime").JSX.Element;
-export {};
+/// <reference types="react" />
+export declare const ExploreLayout: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<import("react").ElementType<"div">>>;
+export declare const ExploreNav: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<import("react").ElementType<"div">>>;

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

@@ -1,16 +1,16 @@
 import 'react-day-picker/dist/style.css';
 import { ChainTypeFilter, StatusFilter as TStatusFilter } from '../../types/components';
 interface TransactionFiltersProps {
-    chainType: ChainTypeFilter;
+    chainType?: ChainTypeFilter;
     setChainType: (chainType: ChainTypeFilter) => void;
-    chain: string | null;
-    setChain: (chain: string | null) => void;
-    fromDate: Date | null;
-    setFromDate: (fromDate: Date | null) => void;
-    toDate: Date | null;
-    setToDate: (toDate: Date | null) => void;
-    status: TStatusFilter[];
-    setStatus: (status: TStatusFilter[]) => void;
+    chain?: string;
+    setChain: (chain?: string) => void;
+    fromDate?: Date;
+    setFromDate: (fromDate?: Date) => void;
+    toDate?: Date;
+    setToDate: (toDate?: Date) => void;
+    status?: TStatusFilter[];
+    setStatus: (status?: TStatusFilter[]) => void;
     chains: {
         name: string;
         logoURI: string;

package/dist/cjs/types/components/layout/TransactionHeader/TransactionHeaderLayout.d.ts

@@ -2,9 +2,10 @@ import { ReactNode } from 'react';
 import { ActionStatus } from '../../../types/components';
 interface TransactionHeaderLayoutProps {
     status?: ActionStatus;
-    title: string;
+    title?: string;
     image?: ReactNode;
     children?: ReactNode;
+    isLoading?: boolean;
 }
-export declare function TransactionHeaderLayout({ status, title, image, children, }: TransactionHeaderLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function TransactionHeaderLayout({ status, title, image, children, isLoading, }: TransactionHeaderLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,6 +3,7 @@ interface TransactionSearchProps {
     query: string;
     setQuery: (query: string) => void;
     children?: ReactNode;
+    className?: string;
 }
-export declare function TransactionSearch({ query, setQuery, children, }: TransactionSearchProps): import("react/jsx-runtime").JSX.Element;
+export declare function TransactionSearch({ query, setQuery, children, className, }: TransactionSearchProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -36,3 +36,4 @@ export * from './TransactionProperties/SwapProperties';
 export * from './TransactionProperties/TransactionProperties';
 export * from './TransactionSearch';
 export * from './Transfer';
+export * from './Toast';

package/dist/cjs/types/components/lists/TransactionAction/FeesAction.d.ts

@@ -21,8 +21,9 @@ interface FeesLinesProps {
 export declare function FeesLines({ status, lines, showTimeline, }: FeesLinesProps): import("react/jsx-runtime").JSX.Element;
 interface FeesRowProps {
     label: string;
-    usd: string;
-    eth: string;
+    amount: number | string;
+    symbol: string;
+    usd: number | string;
     collapsed?: boolean;
 }
 export {};

package/dist/cjs/types/components/lists/TransactionAction/SuccessAction.d.ts

@@ -1,9 +1,9 @@
 import { BaseActionProps } from './BaseActionProps';
 interface SuccessActionProps extends BaseActionProps {
     description?: string;
-    timestamp: number;
-    hash: string;
-    url: string;
+    timestamp?: number;
+    hash?: string;
+    url?: string;
 }
 export declare function SuccessAction({ nextStatus, status, description, showTimeline, showBody, timestamp, hash, url, }: SuccessActionProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/lists/TransactionAction/SwapAction.d.ts

@@ -12,9 +12,9 @@ interface SwapActionProps extends BaseActionProps {
         logoURI: string;
         name: string;
     };
-    timestamp: number;
-    hash: string;
-    url: string;
+    timestamp?: number;
+    hash?: string;
+    url?: string;
 }
 export declare function SwapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }: SwapActionProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,7 @@
+import { ReactNode } from 'react';
 import { TextSize } from '../../types/components';
 interface HeadingTextProps {
-    children: string;
+    children?: ReactNode;
     size: TextSize;
     bold?: boolean;
     className?: string;

package/dist/cjs/types/core/utils.d.ts

@@ -1,4 +1,5 @@
 import { ClassValue } from 'clsx';
+import { ComponentProps, ElementType } from 'react';
 /**
  * Combines multiple class names into a single string
  *
@@ -21,4 +22,6 @@ export declare function capitalize(text: string): string;
 type Falsy = false | null | undefined | 0 | '';
 export declare function truthy<T>(value: T): value is Exclude<T, Falsy>;
 export declare function truncateHash(hash: string): string;
+export declare const styled: <Tag extends keyof JSX.IntrinsicElements>(tag: Tag, className: string) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<ComponentProps<Tag>> & import("react").RefAttributes<ElementType<Tag>>>;
+export declare const mergeProps: <Tag extends keyof JSX.IntrinsicElements = any>(a: ComponentProps<Tag>, b: ComponentProps<Tag>) => ComponentProps<Tag>;
 export {};

package/dist/cjs/types/stories/data/actions.d.ts

@@ -201,13 +201,15 @@ export declare const transactionActions: {
             status: "executed";
             total: {
                 label: string;
-                usd: string;
-                eth: string;
+                usd: number;
+                amount: number;
+                symbol: string;
             };
             lines: {
                 label: string;
-                usd: string;
-                eth: string;
+                usd: number;
+                amount: number;
+                symbol: string;
             }[];
         };
     };

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+declare const meta: Meta<typeof SwitchingAppContainer>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+declare function SwitchingAppContainer(): import("react/jsx-runtime").JSX.Element;
+export declare const Default: Story;