@0xsquid/ui 2.4.9 → 2.4.10-beta.0

package/dist/cjs/index.js

@@ -2808,6 +2808,20 @@ const formatDuration = (elapsedTime) => {
     // Show only minutes if total time is 1 minute or more
     return `${minutes}m`;
 };
+function formatCountdown(seconds) {
+    const hours = Math.floor((seconds / 3600) % 24);
+    const minutes = Math.floor((seconds / 60) % 60);
+    const secs = seconds % 60;
+    if (hours > 0) {
+        return `${hours}h : ${String(minutes).padStart(2, "0")}m : ${String(secs).padStart(2, "0")}s`;
+    }
+    else if (minutes > 0) {
+        return `${minutes}m : ${String(secs).padStart(2, "0")}s`;
+    }
+    else {
+        return `${secs}s`;
+    }
+}
 const formatTime = (timestampSeconds) => {
     const date = new Date(timestampSeconds * 1000);
     const hours = date.getHours();
@@ -2870,9 +2884,6 @@ const formatRelativeDate = (timestampSeconds) => {
     });
     return formattedDate;
 };
-function truncateHash(hash) {
-    return `${hash.slice(0, 8)}...${hash.slice(-6)}`;
-}
 const calcLerp = (a, b, t) => `calc(${a} + (${b} - ${a}) * ${t})`;
 /**
  * Returns an array including the first `count` unique values of the array
@@ -3662,11 +3673,11 @@ function Approve() {
 function ArrowRightIcon() {
     return (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M14 6L20 12L14 18M19 12H4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
-function ArrowRightDownIcon() {
-    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", fill: "none", viewBox: "0 0 10 10", children: jsxRuntime.jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9 3v6H3M1.167 1.167l7.166 7.166" }) }));
+function ArrowRightDownIcon({ size = "10", className, strokeWidth = "2", }) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, fill: "none", viewBox: "0 0 10 10", className: className, children: jsxRuntime.jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: strokeWidth, d: "M9 3v6H3M1.167 1.167l7.166 7.166" }) }));
 }
-function ArrowRightUpIcon() {
-    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", fill: "none", viewBox: "0 0 10 10", children: jsxRuntime.jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9 7V1m0 0H3m6 0L1.167 8.833" }) }));
+function ArrowRightUpIcon({ size = "10", className, strokeWidth = "2", }) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, fill: "none", viewBox: "0 0 10 10", className: className, children: jsxRuntime.jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: strokeWidth, d: "M9 7V1m0 0H3m6 0L1.167 8.833" }) }));
 }
 function ChevronArrowIcon({ size = "16", className, }) {
     return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M6.66663 14L9.64022 8.64754C9.86394 8.24484 9.86394 7.75519 9.64022 7.35249L6.66663 2", stroke: "currentColor", strokeOpacity: "0.66", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
@@ -4327,12 +4338,14 @@ function UsdAmount({ usdAmount }) {
     return (jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "$" }), jsxRuntime.jsx(CaptionText, { children: usdAmount.toString() })] }));
 }
 
-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-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 HashLink({ showTx = false, hash, showCopyButton = false, url, children, className, formattedHash, copyIconSize = "16", }) {
+    return (jsxRuntime.jsxs("div", { className: cn("tw-flex tw-items-center", className), children: [showTx && jsxRuntime.jsx("span", { className: "tw-mr-squid-xs tw-text-grey-700", children: "TX" }), children !== null && children !== void 0 ? children : formattedHash, url && (jsxRuntime.jsx("a", { href: url, target: "_blank", className: "tw-rounded-squid-s tw-px-squid-xxs hover:tw-bg-material-light-thin", rel: "noreferrer", 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: copyIconSize, strokeWidth: "2", className: "tw-cursor-pointer tw-text-royal-500", onClick: () => {
+                        navigator.clipboard.writeText(hash).catch(() => { });
+                    } }) }))] }));
 }
 
 function WalletLink({ imageURI, address }) {
-    return (jsxRuntime.jsx(IconLabel, { src: imageURI, rounded: "full", children: jsxRuntime.jsx(HashLink, { hash: address, showCopyButton: true, children: jsxRuntime.jsx(BodyText, { size: "small", children: truncateHash(address) }) }) }));
+    return (jsxRuntime.jsx(IconLabel, { src: imageURI, rounded: "full", children: jsxRuntime.jsx(HashLink, { hash: address, showCopyButton: true, children: jsxRuntime.jsx(BodyText, { size: "small", children: address }) }) }));
 }
 
 const extraPaddingMap = {
@@ -4400,9 +4413,9 @@ const buttonVariantClassMap = {
 const buttonDisabledClass = "!tw-bg-grey-800 !tw-text-grey-600 tw-cursor-not-allowed";
 const loadingClassname = "tw-invisible tw-opacity-0";
 function Button$1(_a) {
-    var { label, disabled = false, size, variant, icon, link, isLoading = false, chip, containerClassName, anchorRef, buttonRef } = _a, props = __rest$1(_a, ["label", "disabled", "size", "variant", "icon", "link", "isLoading", "chip", "containerClassName", "anchorRef", "buttonRef"]);
+    var { label, disabled = false, size, variant, icon, link, isLoading = false, showLoader = false, chip, containerClassName, anchorRef, buttonRef } = _a, props = __rest$1(_a, ["label", "disabled", "size", "variant", "icon", "link", "isLoading", "showLoader", "chip", "containerClassName", "anchorRef", "buttonRef"]);
     const chipElement = chip != null ? (jsxRuntime.jsx(Chip, Object.assign({}, chip, { className: cn("tw-absolute -tw-right-squid-xxs -tw-top-squid-xxs tw-z-10", chip.className) }))) : null;
-    const children = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!disabled && !isLoading && (jsxRuntime.jsx(ButtonHoverOverlay, { className: roundedClassMap[size][variant] })), jsxRuntime.jsx("div", { className: "tw-relative tw-z-[5] tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: label == null && icon == null ? (props.children) : size === "lg" ? (jsxRuntime.jsx("span", { className: "tw-px-squid-m", children: jsxRuntime.jsx(BodyText, { className: isLoading ? loadingClassname : "", size: "medium", children: label }) })) : size === "md" ? (label != null && icon == null ? (
+    const children = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!disabled && !isLoading && (jsxRuntime.jsx(ButtonHoverOverlay, { className: roundedClassMap[size][variant] })), jsxRuntime.jsx("div", { className: "tw-relative tw-z-[5] tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: label == null && icon == null ? (props.children) : size === "lg" ? (jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-px-squid-m", children: [showLoader && jsxRuntime.jsx(Loader, {}), jsxRuntime.jsx(BodyText, { className: isLoading ? loadingClassname : "", size: "medium", children: label })] })) : size === "md" ? (label != null && icon == null ? (
                 // label only
                 jsxRuntime.jsx(BodyText, { className: isLoading ? loadingClassname : "", size: "small", children: label })) : label == null && icon != null ? (
                 // icon only
@@ -18888,7 +18901,7 @@ const borderTypeClassMap = {
 };
 function ModalContent(_a) {
     var { children, addGap = false, paddingY = false, borderType = "border", className } = _a, props = __rest$1(_a, ["children", "addGap", "paddingY", "borderType", "className"]);
-    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-flex tw-h-full tw-max-h-[445px] tw-w-full tw-flex-col tw-self-stretch tw-rounded-modal tw-bg-grey-800 tw-text-grey-300 mobile-sm-height:tw-max-h-[535px]", addGap && "tw-gap-squid-xxs tw-pt-squid-xxs", borderTypeClassMap[borderType], paddingY && "tw-py-squid-xxs", className), children: children })));
+    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-flex tw-h-full tw-max-h-[415px] tw-w-full tw-flex-col tw-self-stretch tw-rounded-modal tw-bg-grey-800 tw-text-grey-300 mobile-xs-height:tw-max-h-[535px]", addGap && "tw-gap-squid-xxs tw-pt-squid-xxs", borderTypeClassMap[borderType], paddingY && "tw-py-squid-xxs", className), children: children })));
 }
 function ModalContentDivider() {
     return (jsxRuntime.jsx("svg", { width: "100%", height: "11", viewBox: "0 0 400 11", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("rect", { x: "1", y: "5", width: "398", height: "1", fill: "currentColor" }) }));
@@ -18952,19 +18965,23 @@ function LogoContainer({ children }) {
 }
 
 function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp = false, chain, token, direction = "from", onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive = true, isLoading = false, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails = true, }) {
-    var _a, _b, _c;
+    var _a, _b;
     const isWalletButtonInteractive = !isLoading && !!(walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick);
     const WalletButtonTag = isWalletButtonInteractive ? "button" : "div";
     const isFetching = isFetchingProp || isLoading;
-    return (jsxRuntime.jsxs("section", { className: "tw-relative tw-flex tw-h-full tw-w-full tw-flex-col tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-w-card-large", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(Tooltip, Object.assign({}, walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxRuntime.jsxs(WalletButtonTag, { onClick: isWalletButtonInteractive ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick : undefined, className: cn("-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600", isWalletButtonInteractive && "hover:tw-bg-material-light-thin", isLoading && "tw-opacity-50"), children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === "from" ? "Pay" : "Receive" }), !isLoading && !(walletButton === null || walletButton === void 0 ? void 0 : walletButton.disabled) && !!token && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
+    const showWalletButtonLabel = !isLoading &&
+        !(walletButton === null || walletButton === void 0 ? void 0 : walletButton.disabled) &&
+        !!token &&
+        (!!(walletButton === null || walletButton === void 0 ? void 0 : walletButton.address) || !!(walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel));
+    return (jsxRuntime.jsxs("section", { className: "tw-relative tw-flex tw-h-full tw-w-full tw-flex-col tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-w-card-large", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(Tooltip, Object.assign({}, walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxRuntime.jsxs(WalletButtonTag, { onClick: isWalletButtonInteractive ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick : undefined, className: cn("-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600", isWalletButtonInteractive && "hover:tw-bg-material-light-thin", isLoading && "tw-opacity-50"), children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === "from" ? "Pay" : "Receive" }), showWalletButtonLabel && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
                                                     ? "tw-text-grey-300"
                                                     : "tw-text-royal-500", children: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
                                                     ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.address
-                                                    : (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) !== null && _a !== void 0 ? _a : "Connect wallet" }), jsxRuntime.jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
+                                                    : walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel }), jsxRuntime.jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
                                                     ? "tw-text-grey-600"
                                                     : "tw-text-royal-500" })] })] }))] }) })) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-2 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsxRuntime.jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsxRuntime.jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
-                    decimals: (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18,
-                    symbol: (_c = token === null || token === void 0 ? void 0 : token.symbol) !== null && _c !== void 0 ? _c : "",
+                    decimals: (_a = token === null || token === void 0 ? void 0 : token.decimals) !== null && _a !== void 0 ? _a : 18,
+                    symbol: (_b = token === null || token === void 0 ? void 0 : token.symbol) !== null && _b !== void 0 ? _b : "",
                     price: tokenPrice,
                 }, onAmountChange: (value) => {
                     onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value);
@@ -18974,8 +18991,8 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
                 }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: showNumericInputDetails, direction: direction, forcedAmount: amount, inputModeButton: inputModeButton, balanceButton: balanceButton, isInteractive: isInputInteractive && !isLoading })] }));
 }
 
-function SwapProgressViewHeader({ title, description, }) {
-    return (jsxRuntime.jsxs("header", { className: "tw-flex tw-min-h-[95px] tw-w-full tw-flex-col tw-gap-squid-s tw-bg-grey-800 tw-px-squid-m tw-py-squid-s", children: [jsxRuntime.jsx(BodyText, { size: "large", className: "tw-min-h-squid-m !tw-leading-[25px] tw-text-grey-300", children: title }), jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-l tw-text-grey-500", children: description })] }));
+function TxProgressViewHeader({ title, description, isWarning = false, }) {
+    return (jsxRuntime.jsxs("header", { className: "tw-flex tw-min-h-[95px] tw-w-full tw-flex-col tw-gap-squid-s tw-bg-grey-800 tw-px-squid-m tw-py-squid-s", children: [jsxRuntime.jsx(BodyText, { size: "large", className: "tw-min-h-squid-m !tw-leading-[25px] tw-text-grey-300", children: title }), jsxRuntime.jsx(CaptionText, { className: cn("tw-h-squid-l", isWarning ? "tw-text-status-partial" : "tw-text-grey-500"), children: description })] }));
 }
 
 function AccountListItem({ isConnected, imageUrls = [], imageUrl, badgeUrl, actions, subtitle, title, }) {
@@ -19489,9 +19506,9 @@ function SmallBodyText(props) {
     return jsxRuntime.jsx(BodyText, Object.assign({ size: "small" }, props));
 }
 function PropertyListItem(_a) {
-    var { isLoading = false, label, detail, icon, className, variant = "small", showGradientBg = true, labelClassName, iconClassName, detailClassName } = _a, props = __rest$1(_a, ["isLoading", "label", "detail", "icon", "className", "variant", "showGradientBg", "labelClassName", "iconClassName", "detailClassName"]);
+    var { isLoading = false, label, detail, icon, className, variant = "small", showGradientBg = true, labelClassName, iconClassName, detailClassName, tooltip } = _a, props = __rest$1(_a, ["isLoading", "label", "detail", "icon", "className", "variant", "showGradientBg", "labelClassName", "iconClassName", "detailClassName", "tooltip"]);
     const Text = variant === "small" ? CaptionText : SmallBodyText;
-    return (jsxRuntime.jsx("li", Object.assign({}, props, { className: cn("tw-flex tw-w-full tw-gap-squid-xs tw-rounded-squid-xs tw-text-grey-300", showGradientBg && "squid-property-row-bg", containerVariantClassNameMap[variant], className), children: jsxRuntime.jsxs("div", { className: cn("tw-flex tw-h-squid-l tw-w-full tw-items-center tw-justify-between tw-gap-squid-xs tw-rounded-squid-xs", childrenVariantClassNameMap[variant]), children: [jsxRuntime.jsx("div", { className: cn("tw-w-6 tw-text-grey-500", iconClassName), children: icon }), jsxRuntime.jsx(Text, { className: cn("tw-min-w-fit tw-flex-1 tw-text-grey-500", labelClassName), children: jsxRuntime.jsx(TextSkeleton, { isLoading: isLoading, children: label }) }), jsxRuntime.jsx(Text, { truncate: variant === "small" || undefined, className: cn("tw-flex tw-text-grey-300", detailClassName), children: jsxRuntime.jsx(TextSkeleton, { isLoading: isLoading, children: detail }) })] }) })));
+    return (jsxRuntime.jsx("li", Object.assign({}, props, { className: cn("tw-flex tw-w-full tw-gap-squid-xs tw-rounded-squid-xs tw-text-grey-300", showGradientBg && "squid-property-row-bg", containerVariantClassNameMap[variant], className), children: jsxRuntime.jsxs("div", { className: cn("tw-flex tw-h-squid-l tw-w-full tw-items-center tw-justify-between tw-gap-squid-xs tw-rounded-squid-xs", childrenVariantClassNameMap[variant]), children: [jsxRuntime.jsx("div", { className: cn("tw-w-6 tw-text-grey-500", iconClassName), children: icon }), jsxRuntime.jsxs(Text, { className: cn("tw-flex tw-min-w-fit tw-flex-1 tw-gap-squid-xxs tw-text-grey-500", labelClassName), children: [jsxRuntime.jsx(TextSkeleton, { isLoading: isLoading, children: label }), !!tooltip && (jsxRuntime.jsx(Tooltip, Object.assign({}, tooltip, { children: jsxRuntime.jsx(HelpIcon, { className: "tw-cursor-help tw-text-grey-600 hover:tw-text-grey-500" }) })))] }), jsxRuntime.jsx(Text, { truncate: variant === "small" || undefined, className: cn("tw-flex tw-text-grey-300", detailClassName), children: jsxRuntime.jsx(TextSkeleton, { isLoading: isLoading, children: detail }) })] }) })));
 }
 
 function RouteStep({ imageUrl, descriptionBlocks, subtitle, showStepSeparator = false, }) {
@@ -19829,7 +19846,7 @@ const TransactionItemHeader = ({ isLoading = false, variant, type, hash, status,
     if (variant === "full") {
         if (!type || !hash)
             return null;
-        return (jsxRuntime.jsxs(TransactionItemHeaderWrapper, { children: [jsxRuntime.jsx(TxTypeLabel, { type: type }), jsxRuntime.jsx("span", { className: "tw-text-grey-500", children: truncateHash(hash) })] }));
+        return (jsxRuntime.jsxs(TransactionItemHeaderWrapper, { children: [jsxRuntime.jsx(TxTypeLabel, { type: type }), jsxRuntime.jsx("span", { className: "tw-text-grey-500", children: hash })] }));
     }
     if (status && type) {
         return (jsxRuntime.jsxs(TransactionItemHeaderWrapper, { children: [jsxRuntime.jsx(TransactionState, { status: status, variant: "small" }), jsxRuntime.jsx(TxTypeLabel, { type: type })] }));
@@ -27795,6 +27812,45 @@ const List = ({ children }) => {
     return (jsxRuntime.jsx("ul", { className: "tw-flex tw-flex-col tw-gap-squid-xxs tw-pb-squid-xs", children: children }));
 };
 
+function useCountdown(initialSeconds) {
+    const [secondsLeft, setSecondsLeft] = React$1.useState(initialSeconds);
+    React$1.useEffect(() => {
+        if (secondsLeft <= 0)
+            return;
+        const timer = setInterval(() => {
+            setSecondsLeft((prev) => Math.max(prev - 1, 0));
+        }, 1000);
+        return () => {
+            clearInterval(timer);
+        };
+    }, [secondsLeft]);
+    return formatCountdown(secondsLeft);
+}
+
+function DepositAddressView({ isOpen = true, fromToken, toToken, handleClose, openInWalletButton, fromChain, toChain, fromAmount, toAmount, depositAddress, depositAddressFormatted, timeRemainingSeconds = 0, tooltips, description, title, }) {
+    return (jsxRuntime.jsxs(Modal, { isOpen: isOpen, onBackdropClick: handleClose, children: [jsxRuntime.jsxs(ModalContent, { style: {
+                    [CSS_VARS.SCALE_AND_FADE_DOWN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
+                    [CSS_VARS.SCALE_AND_FADE_UP_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
+                }, borderType: "outline", children: [jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-[130px] tw-w-full tw-items-center tw-justify-center tw-rounded-tl-modal tw-rounded-tr-modal tw-bg-grey-900 tw-py-squid-s tw-text-material-light-thin mobile-xs-height:tw-h-[160px]", style: {
+                            // box shadow simulating bottom outline (we do not use css outline because cannot apply it to only one side)
+                            boxShadow: "0 1px 0 currentColor",
+                        }, children: jsxRuntime.jsx("div", { className: "tw-absolute tw-right-squid-xs tw-top-squid-xs", children: jsxRuntime.jsx(Button$1, { size: "md", variant: "secondary", label: "Copy" }) }) }), jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-squid-m tw-w-full tw-items-end tw-justify-between tw-self-stretch tw-px-squid-m", children: jsxRuntime.jsx(Image$1, { src: fromToken.logoUrl, rounded: "full", shadow: true, size: "xlarge" }) }), jsxRuntime.jsx(TxProgressViewHeader, { title: title, description: description, isWarning: true }), jsxRuntime.jsxs("ul", { className: "tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-pb-squid-s mobile-xs-height:tw-max-h-[195px]", children: [jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Deposit address", detail: jsxRuntime.jsx(HashLink, { className: "tw-text-royal-500", formattedHash: depositAddressFormatted, hash: depositAddress, showCopyButton: true, copyIconSize: "24" }), tooltip: (tooltips === null || tooltips === void 0 ? void 0 : tooltips.depositAddress)
+                                    ? {
+                                        tooltipContent: tooltips.depositAddress,
+                                        tooltipWidth: "max",
+                                    }
+                                    : undefined }), jsxRuntime.jsx(PropertyListItem, { iconClassName: "tw-flex tw-items-center tw-justify-center", icon: jsxRuntime.jsx(ArrowRightUpIcon, { size: "15", strokeWidth: "1.5" }), label: "Send exactly", detail: jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: jsxRuntime.jsx(CaptionText, { children: fromAmount }) }) }), jsxRuntime.jsx(PropertyListItem, { iconClassName: "tw-flex tw-items-center tw-justify-center", icon: jsxRuntime.jsx(ArrowRightDownIcon, { size: "15", strokeWidth: "1.5" }), label: "You receive", detail: jsxRuntime.jsx(IconLabel, { src: toToken.logoUrl, rounded: "full", children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { children: toAmount }), jsxRuntime.jsx(Loader, { size: "16" })] }) }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$1, { src: fromChain.logoUrl, rounded: "xxs", shadow: true, size: "medium" }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$1, { src: toChain.logoUrl, rounded: "xxs", shadow: true, size: "medium" }), jsxRuntime.jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsxRuntime.jsx(TimeRemaining, { timeRemainingSeconds: timeRemainingSeconds, tooltipContent: tooltips === null || tooltips === void 0 ? void 0 : tooltips.timeRemaining })] })] }), jsxRuntime.jsx(Button$1, { size: "lg", variant: "primary", label: "Open in wallet", onClick: openInWalletButton === null || openInWalletButton === void 0 ? void 0 : openInWalletButton.onClick, disabled: openInWalletButton === null || openInWalletButton === void 0 ? void 0 : openInWalletButton.disabled, className: "tw-min-h-button" }), jsxRuntime.jsx(Button$1, { size: "lg", variant: "secondary", label: "Cancel", onClick: handleClose, className: "tw-min-h-button" })] }));
+}
+function TimeRemaining({ timeRemainingSeconds, tooltipContent, }) {
+    const timeRemaining = useCountdown(timeRemainingSeconds);
+    return (jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time remaining", detail: timeRemaining, tooltip: tooltipContent
+            ? {
+                tooltipWidth: "max",
+                tooltipContent,
+            }
+            : undefined }));
+}
+
 function MainView({ isLoading = false }) {
     return (jsxRuntime.jsxs(ProductCard, { children: [jsxRuntime.jsx(NavigationBar, { isLoading: isLoading, title: "Swap", actions: [
                     {
@@ -69367,7 +69423,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
                             }, secondToken: {
                                 bgColor: toToken.bgColor,
                                 logoURI: toToken.logoUrl,
-                            } })) }), jsxRuntime.jsx(SwapProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxRuntime.jsxs("ul", { className: "tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-pb-squid-s tw-pt-squid-xs mobile-xs-height:tw-h-[195px] mobile-sm-height:tw-py-squid-s", children: [jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ArrowsSwapIcon, {}), label: "Swap", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount }), to: jsxRuntime.jsx(IconLabel, { src: toToken.logoUrl, rounded: "full", children: toAmount }) }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: toChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsxRuntime.jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsxRuntime.jsx(CaptionText, { children: timer })) : (jsxRuntime.jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsxRuntime.jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => {
+                            } })) }), jsxRuntime.jsx(TxProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxRuntime.jsxs("ul", { className: "tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-pb-squid-s tw-pt-squid-xs mobile-xs-height:tw-h-[195px] mobile-sm-height:tw-py-squid-s", children: [jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ArrowsSwapIcon, {}), label: "Swap", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount }), to: jsxRuntime.jsx(IconLabel, { src: toToken.logoUrl, rounded: "full", children: toAmount }) }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: toChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsxRuntime.jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsxRuntime.jsx(CaptionText, { children: timer })) : (jsxRuntime.jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsxRuntime.jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => {
                     stopTimer();
                 }, onTxStart: () => {
                     startTimer();
@@ -69922,6 +69978,7 @@ exports.CopyOutlinedIcon = CopyOutlinedIcon;
 exports.CrossAnimatedIcon = CrossAnimatedIcon;
 exports.CrossedOutSunSolidIcon = CrossedOutSunSolidIcon;
 exports.DashboardFast = DashboardFast;
+exports.DepositAddressView = DepositAddressView;
 exports.DescriptionBlocks = DescriptionBlocks;
 exports.DetailsToolbar = DetailsToolbar;
 exports.DiscordIcon = DiscordIcon;
@@ -70072,7 +70129,6 @@ exports.SwapHeader = SwapHeader;
 exports.SwapIcon = SwapIcon;
 exports.SwapInputsIcon = SwapInputsIcon;
 exports.SwapProgressView = SwapProgressView;
-exports.SwapProgressViewHeader = SwapProgressViewHeader;
 exports.SwapProperties = SwapProperties;
 exports.SwapStepItem = SwapStepItem;
 exports.SwapStepSeparator = SwapStepSeparator;
@@ -70112,6 +70168,7 @@ exports.TransactionViewLayout = TransactionViewLayout;
 exports.Transfer = Transfer;
 exports.TranslateIcon = TranslateIcon;
 exports.TriangleExclamation = TriangleExclamation;
+exports.TxProgressViewHeader = TxProgressViewHeader;
 exports.UsdAmount = UsdAmount;
 exports.WalletFilledIcon = WalletFilledIcon;
 exports.WalletIcon = WalletIcon;

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

@@ -9,10 +9,11 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     disabled?: boolean;
     link?: string;
     isLoading?: boolean;
+    showLoader?: boolean;
     chip?: ChipProps;
     containerClassName?: string;
     buttonRef?: React.Ref<HTMLButtonElement>;
     anchorRef?: React.Ref<HTMLAnchorElement>;
 }
-export declare function Button({ label, disabled, size, variant, icon, link, isLoading, chip, containerClassName, anchorRef, buttonRef, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ label, disabled, size, variant, icon, link, isLoading, showLoader, chip, containerClassName, anchorRef, buttonRef, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/icons/Arrow.d.ts

@@ -1,7 +1,15 @@
 import { type ComponentProps } from "react";
 export declare function ArrowRightIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function ArrowRightDownIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function ArrowRightUpIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function ArrowRightDownIcon({ size, className, strokeWidth, }: {
+    size?: string;
+    className?: string;
+    strokeWidth?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ArrowRightUpIcon({ size, className, strokeWidth, }: {
+    size?: string;
+    className?: string;
+    strokeWidth?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronArrowIcon({ size, className, }: {
     size?: string;
     className?: string;

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

@@ -1,10 +1,13 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 interface HashLinkProps {
     showTx?: boolean;
     hash: string;
     children?: ReactNode;
     showCopyButton?: boolean;
     url?: string;
+    className?: string;
+    formattedHash?: string;
+    copyIconSize?: string;
 }
-export declare function HashLink({ showTx, hash, showCopyButton, url, children, }: HashLinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function HashLink({ showTx, hash, showCopyButton, url, children, className, formattedHash, copyIconSize, }: HashLinkProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 interface JoinProps {
     children?: ReactNode;
     glue: () => ReactNode;

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

@@ -0,0 +1,7 @@
+interface TxProgressViewHeaderProps {
+    title: string;
+    description: string;
+    isWarning?: boolean;
+}
+export declare function TxProgressViewHeader({ title, description, isWarning, }: TxProgressViewHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -20,7 +20,7 @@ export * from "./PipeSeparator";
 export * from "./ProductCard";
 export * from "./ProfileHeaderBackground";
 export * from "./SwapConfiguration";
-export * from "./SwapProgressViewHeader";
+export * from "./TxProgressViewHeader";
 export * from "./SwapStepsCollapsed";
 export * from "./Toast";
 export * from "./TokenDetailsView";

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

@@ -1,5 +1,6 @@
 import { type ComponentProps } from "react";
 import { type PropertyListItemSize } from "../../types/components";
+import { type TooltipProps } from "../controls";
 export interface PropertyListItemProps extends ComponentProps<"li"> {
     isLoading?: boolean;
     label?: React.ReactNode;
@@ -10,5 +11,6 @@ export interface PropertyListItemProps extends ComponentProps<"li"> {
     labelClassName?: string;
     iconClassName?: string;
     detailClassName?: string;
+    tooltip?: Omit<TooltipProps, "children">;
 }
-export declare function PropertyListItem({ isLoading, label, detail, icon, className, variant, showGradientBg, labelClassName, iconClassName, detailClassName, ...props }: PropertyListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function PropertyListItem({ isLoading, label, detail, icon, className, variant, showGradientBg, labelClassName, iconClassName, detailClassName, tooltip, ...props }: PropertyListItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/views/DepositAddressView.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+interface ChainData {
+    networkName: string;
+    logoUrl: string;
+}
+interface Token {
+    symbol: string;
+    logoUrl: string;
+}
+export declare function DepositAddressView({ isOpen, fromToken, toToken, handleClose, openInWalletButton, fromChain, toChain, fromAmount, toAmount, depositAddress, depositAddressFormatted, timeRemainingSeconds, tooltips, description, title, }: {
+    isOpen?: boolean;
+    fromToken: Token;
+    toToken: Token;
+    handleClose?: () => void;
+    openInWalletButton?: {
+        disabled?: boolean;
+        onClick?: () => void;
+    };
+    fromChain: ChainData;
+    toChain: ChainData;
+    fromAmount: string;
+    toAmount: string;
+    depositAddress: string;
+    depositAddressFormatted: string;
+    timeRemainingSeconds?: number;
+    tooltips?: {
+        depositAddress?: React.ReactNode;
+        timeRemaining?: React.ReactNode;
+    };
+    title: string;
+    description: string;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,4 +1,5 @@
 export * from "./AssetsView";
+export * from "./DepositAddressView";
 export * from "./MainView";
 export * from "./RecipientView";
 export * from "./SwapDetailsView";

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

@@ -16,13 +16,13 @@ interface DebouncedFunction<F extends AnyFunction> {
 }
 export declare function debounce<F extends AnyFunction>(func: F, delay: number): DebouncedFunction<F>;
 export declare const formatDuration: (elapsedTime: number) => string;
+export declare function formatCountdown(seconds: number): string;
 export declare const formatTime: (timestampSeconds: number) => string;
 export declare const formatRelativeTime: (timestampSeconds: number) => string;
 export declare const formatRelativeDate: (timestampSeconds: number) => string;
 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 declare const calcLerp: (a: string, b: string, t: string | number) => string;

package/dist/cjs/types/hooks/useCountdown.d.ts

@@ -0,0 +1 @@
+export declare function useCountdown(initialSeconds: number): string;

package/dist/cjs/types/stories/badges/Image.stories.d.ts

@@ -13,6 +13,7 @@ export declare const GradientBorder: Story;
 export declare const InsetBorder: Story;
 export declare const OutlineBorder: Story;
 export declare const RoundedFull: Story;
+export declare const Shadow: Story;
 export declare const CustomContent: Story;
 export declare const PlaceholderForMissingImage: Story;
 export declare const PlaceholderForBrokenImage: Story;

package/dist/cjs/types/stories/buttons/Button.stories.d.ts

@@ -23,6 +23,8 @@ export declare const LargeTertiary: Story;
 export declare const LargeDisabled: Story;
 export declare const LargeAndLink: Story;
 export declare const LargeAndLinkDisabled: Story;
+export declare const LargeWithLoader: Story;
+export declare const LargeDisabledWithLoader: Story;
 export declare const MediumWithIconLoading: Story;
 export declare const MediumWithLabelLoading: Story;
 export declare const MediumWithLongLabelLoading: Story;

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

@@ -0,0 +1,7 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { TxProgressViewHeader } from "../../components/layout/TxProgressViewHeader";
+declare const meta: Meta<typeof TxProgressViewHeader>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Warning: Story;

package/dist/cjs/types/stories/views/DepositAddressView.stories.d.ts

@@ -0,0 +1,6 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { DepositAddressView } from "../../components/views/DepositAddressView";
+declare const meta: Meta<typeof DepositAddressView>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;