@0xsquid/ui 3.1.0 → 3.2.1

package/dist/cjs/index.js

@@ -3738,7 +3738,7 @@ exports.ImageState = void 0;
     ImageState[ImageState["LOADED"] = 1] = "LOADED";
     ImageState[ImageState["ERROR"] = 2] = "ERROR";
 })(exports.ImageState || (exports.ImageState = {}));
-const sizeClassMap$1 = {
+const sizeClassMap$2 = {
     small: "tw-w-squid-s",
     medium: "tw-w-squid-m",
     large: "tw-w-squid-l",
@@ -3770,7 +3770,7 @@ const borderClassMap = {
 };
 function Image$1(_a) {
     var { src, size = "medium", className: propsClassName, placeholderImageUrl, border = "none", rounded = "xxs", shadow = false, children, containerProps } = _a, props = __rest$1(_a, ["src", "size", "className", "placeholderImageUrl", "border", "rounded", "shadow", "children", "containerProps"]);
-    const className = cn("tw-object-cover tw-aspect-square tw-relative tw-duration-300 tw-transition-[width,height] tw-max-w-full tw-bg-grey-500", sizeClassMap$1[size], propsClassName, roundedClassMap[rounded], shadow && boxShadowClassMap[size], borderClassMap[border]);
+    const className = cn("tw-object-cover tw-aspect-square tw-relative tw-duration-300 tw-transition-[width,height] tw-max-w-full tw-bg-grey-500", sizeClassMap$2[size], propsClassName, roundedClassMap[rounded], shadow && boxShadowClassMap[size], borderClassMap[border]);
     const [imageState, setImageState] = require$$0.useState(exports.ImageState.LOADED);
     return (jsxRuntime.jsxs("div", Object.assign({}, containerProps, { className: cn("tw-relative", containerProps === null || containerProps === void 0 ? void 0 : containerProps.className), children: [children != null ? (jsxRuntime.jsx("div", Object.assign({ className: cn(className, "tw-flex tw-items-center tw-justify-center") }, props, { children: children }))) : ((imageState !== exports.ImageState.LOADED || !src) &&
                 (placeholderImageUrl ? (jsxRuntime.jsx("img", Object.assign({ src: placeholderImageUrl, className: className }, props))) : (jsxRuntime.jsx("div", Object.assign({ className: className }, props))))), children == null && src && (jsxRuntime.jsx("img", Object.assign({}, props, { src: src, onError: () => {
@@ -3784,7 +3784,7 @@ function BadgeImage({ image, badge, extraMarginForBadge = false, className, }) {
     return (((image === null || image === void 0 ? void 0 : image.src) != null || (image === null || image === void 0 ? void 0 : image.placeholderImageUrl) != null) && (jsxRuntime.jsxs("div", { className: cn("tw-relative tw-w-fit", extraMarginForBadge && "tw-mr-1.5", className), children: [jsxRuntime.jsx(Image$1, Object.assign({}, image)), ((badge === null || badge === void 0 ? void 0 : badge.src) != null || (badge === null || badge === void 0 ? void 0 : badge.children) != null) && (jsxRuntime.jsx("div", { className: cn("tw-absolute tw-bottom-0 tw-right-0 tw-h-fit tw-w-fit", image.size !== "xxlarge" && "tw-translate-x-1/3"), children: jsxRuntime.jsx(Image$1, Object.assign({}, badge)) }))] })));
 }
 
-const themeKeyVariantMap$1 = {
+const themeKeyVariantMap$2 = {
     primary: "grey-800",
     accent: "royal-500",
 };
@@ -3799,7 +3799,7 @@ const gradientClassMap = {
 const Drip = ({ direction = "vertical", from, to }) => {
     var _a, _b;
     const isVertical = direction === "vertical";
-    const defaultBgColor = `var(${themeKeysToCssVariables.color[themeKeyVariantMap$1.primary].cssVariable})`;
+    const defaultBgColor = `var(${themeKeysToCssVariables.color[themeKeyVariantMap$2.primary].cssVariable})`;
     const chainBgColor = (_a = from === null || from === void 0 ? void 0 : from.bgColor) !== null && _a !== void 0 ? _a : defaultBgColor;
     const tokenBgColor = (_b = to === null || to === void 0 ? void 0 : to.bgColor) !== null && _b !== void 0 ? _b : "#fff";
     const bgGradient = require$$0.useMemo(() => {
@@ -3890,7 +3890,7 @@ function IconLabel({ src, children, rounded }) {
     return (jsxRuntime.jsxs("div", { className: "tw-inline-flex tw-items-center tw-gap-squid-xxs", children: [src && jsxRuntime.jsx(Image$1, { src: src, rounded: rounded, size: "medium" }), typeof children === "string" ? (jsxRuntime.jsx(CaptionText, { children: children })) : (children)] }));
 }
 
-const sizeClassMap = {
+const sizeClassMap$1 = {
     large: "tw-h-squid-xxl tw-w-squid-xxl tw-rounded-squid-s",
     small: "tw-h-squid-xl tw-w-squid-xl tw-rounded-squid-xs",
 };
@@ -3907,7 +3907,7 @@ const customImageStylesMap = {
     },
 };
 function ImageGroup({ imageUrls, badge, size = "large", }) {
-    return (jsxRuntime.jsxs("div", { className: cn("tw-relative tw-flex tw-flex-shrink-0 tw-flex-wrap tw-content-center tw-items-center tw-justify-center tw-gap-0.5 tw-border tw-border-solid tw-border-material-light-thin tw-bg-grey-700", sizeClassMap[size]), children: [imageUrls.map((url) => (jsxRuntime.jsx(Image$1, { src: url, size: "medium", rounded: "xxs", style: customImageStylesMap[size] }, url))), badge != null && size !== "small" && (jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px]", children: jsxRuntime.jsx(Image$1, Object.assign({}, badge, { border: "outline-lg", size: "medium" })) }))] }));
+    return (jsxRuntime.jsxs("div", { className: cn("tw-relative tw-flex tw-flex-shrink-0 tw-flex-wrap tw-content-center tw-items-center tw-justify-center tw-gap-0.5 tw-border tw-border-solid tw-border-material-light-thin tw-bg-grey-700", sizeClassMap$1[size]), children: [imageUrls.map((url) => (jsxRuntime.jsx(Image$1, { src: url, size: "medium", rounded: "xxs", style: customImageStylesMap[size] }, url))), badge != null && size !== "small" && (jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px]", children: jsxRuntime.jsx(Image$1, Object.assign({}, badge, { border: "outline-lg", size: "medium" })) }))] }));
 }
 
 function Approve() {
@@ -3965,6 +3965,9 @@ function ArrowOutOfBoxIcon() {
 function ChevronGrabberVerticalIcon({ size = "16", className, }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M5.33301 6.00002L7.52827 3.80476C7.78862 3.54441 8.21073 3.54441 8.47108 3.80476L10.6663 6.00002M5.33301 10L7.52827 12.1953C7.78862 12.4556 8.21073 12.4556 8.47108 12.1953L10.6663 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
+function SquareArrowTopRightIcon({ className, size = "24", strokeWidth = "2", }) {
+    return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M9 6H8.8C7.11984 6 6.27976 6 5.63803 6.32698C5.07354 6.6146 4.6146 7.07354 4.32698 7.63803C4 8.27976 4 9.11984 4 10.8V15.2C4 16.8802 4 17.7202 4.32698 18.362C4.6146 18.9265 5.07354 19.3854 5.63803 19.673C6.27976 20 7.11984 20 8.8 20H13.2C14.8802 20 15.7202 20 16.362 19.673C16.9265 19.3854 17.3854 18.9265 17.673 18.362C18 17.7202 18 16.8802 18 15.2V15M14 4H20M20 4V10M20 4L11 13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
 function SquareArrowTopRight2Icon({ className, size = "16", strokeWidth = "2", }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M6.00033 2.66663H4.80033C4.05359 2.66663 3.68022 2.66663 3.395 2.81195C3.14412 2.93978 2.94015 3.14376 2.81232 3.39464C2.66699 3.67985 2.66699 4.05322 2.66699 4.79996L2.66699 11.2C2.66699 11.9467 2.66699 12.3201 2.81232 12.6053C2.94015 12.8562 3.14412 13.0601 3.395 13.188C3.68022 13.3333 4.05359 13.3333 4.80033 13.3333L11.2003 13.3333C11.9471 13.3333 12.3204 13.3333 12.6056 13.188C12.8565 13.0601 13.0605 12.8562 13.1883 12.6053C13.3337 12.3201 13.3337 11.9467 13.3337 11.2V9.99996M9.33366 2.66663L13.3337 2.66663M13.3337 2.66663V6.66663M13.3337 2.66663L7.33366 8.66663", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" }) }));
 }
@@ -4563,6 +4566,8 @@ const statusBgClassMap$1 = {
     ongoing: "tw-bg-royal-500",
     waiting: "tw-bg-grey-500",
     warning: "tw-bg-status-partial",
+    refunded: "tw-bg-status-partial",
+    troubleshoot: "tw-bg-status-partial",
 };
 const statusTextClassMap = {
     pending: "tw-text-grey-300",
@@ -4572,6 +4577,8 @@ const statusTextClassMap = {
     ongoing: "tw-text-royal-500",
     waiting: "tw-text-grey-500",
     warning: "tw-text-status-partial",
+    refunded: "tw-text-status-partial",
+    troubleshoot: "tw-text-status-partial",
 };
 const statusTextMap = {
     pending: "Pending",
@@ -4581,6 +4588,8 @@ const statusTextMap = {
     ongoing: "Processing",
     waiting: "Waiting to start...",
     warning: "Incomplete",
+    refunded: "Refunded",
+    troubleshoot: "Troubleshoot",
 };
 const variantClassMap = {
     full: "tw-h-squid-l tw-min-w-squid-xxl tw-pl-squid-xxs tw-pr-squid-xs",
@@ -4599,6 +4608,8 @@ function renderIcon(status, variant) {
         case "waiting":
             return jsxRuntime.jsx(DotGrid1x3HorizontalIcon, {});
         case "warning":
+        case "troubleshoot":
+        case "refunded":
             return jsxRuntime.jsx(RefreshIcon, {});
     }
 }
@@ -4613,10 +4624,21 @@ 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, 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", { onClick: () => {
-                    navigator.clipboard.writeText(hash).catch(() => { });
-                }, className: "tw-cursor-pointer tw-rounded-squid-s tw-px-squid-xxs hover:tw-bg-material-light-thin", children: jsxRuntime.jsx(CopyOutlinedIcon, { size: copyIconSize, strokeWidth: "2.5", className: "tw-text-royal-500" }) }))] }));
+const CopyButton = (_a) => {
+    var { copyText, className, size } = _a, props = __rest$1(_a, ["copyText", "className", "size"]);
+    const [copied, setCopied] = require$$0.useState(false);
+    const handleCopy = () => {
+        navigator.clipboard.writeText(copyText).catch(() => { });
+        setCopied(true);
+        setTimeout(() => {
+            setCopied(false);
+        }, 1500);
+    };
+    return (jsxRuntime.jsxs("button", Object.assign({ type: "button", onClick: handleCopy, className: cn("tw-relative tw-cursor-pointer tw-rounded-squid-xs tw-p-0.5 tw-text-royal-500 hover:tw-bg-material-light-thin", className) }, props, { children: [jsxRuntime.jsx(CopyOutlinedIcon, { strokeWidth: "2", size: size === "small" ? "1rem" : "1.5rem", className: cn("tw-text-royal-500", copied ? "tw-invisible" : "tw-visible") }), jsxRuntime.jsx("span", { className: cn("tw-absolute tw-left-1/2 tw-top-1/2 -tw-translate-x-1/2 -tw-translate-y-1/2", copied ? "tw-visible" : "tw-invisible"), children: jsxRuntime.jsx(Checkmark1Icon, { size: size === "small" ? "0.75rem" : "1.35rem" }) })] })));
+};
+
+function HashLink({ showTx = false, hash, showCopyButton = false, url, children, className, formattedHash, size, }) {
+    return (jsxRuntime.jsxs("div", { className: cn("tw-flex tw-items-center tw-gap-1", className), children: [showTx && jsxRuntime.jsx("span", { className: "tw-mr-1 tw-text-grey-700", children: "TX" }), children !== null && children !== void 0 ? children : formattedHash, url && (jsxRuntime.jsx("a", { href: url, target: "_blank", className: "tw-ml-0.5 tw-rounded-squid-xs tw-p-0.5 tw-text-royal-500 hover:tw-bg-material-light-thin", rel: "noreferrer", children: jsxRuntime.jsx(SquareArrowTopRightIcon, { size: size === "small" ? "16" : "24" }) })), showCopyButton && jsxRuntime.jsx(CopyButton, { copyText: hash, size: size })] }));
 }
 
 function WalletLink({ imageURI, address }) {
@@ -38233,8 +38255,14 @@ function NavigationBar(_a) {
                     : "tw-flex"), children: jsxRuntime.jsx(HeadingText, { size: "small", children: title }) })) : null] })));
 }
 
-function PipeSeparator(props) {
-    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-h-[0.8em] tw-w-[2px] tw-rounded-full tw-bg-[currentColor]", props.className) })));
+const sizeClassMap = {
+    default: "tw-h-[0.8em]",
+    small: "tw-h-2.5",
+    large: "tw-h-5",
+};
+function PipeSeparator(_a) {
+    var { className, size = "default" } = _a, props = __rest$1(_a, ["className", "size"]);
+    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-w-[2px] tw-rounded-full tw-bg-[currentColor]", sizeClassMap[size], className) })));
 }
 
 function ProductCard({ children }) {
@@ -38437,12 +38465,55 @@ function QrCodeModal({ qrData, imageUrl, handleClose, handleGoBack, isModalOpen,
     return (jsxRuntime.jsxs(Modal, { onBackdropClick: handleClose, isOpen: isModalOpen, children: [jsxRuntime.jsxs(ModalContent, { addGap: true, className: "tw-pb-squid-s", children: [jsxRuntime.jsx(NavigationBar, { displayBackButton: !!handleGoBack, onBackButtonClick: handleGoBack, subtitle: title, transparent: true }), jsxRuntime.jsx("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-m tw-py-squid-xs", children: jsxRuntime.jsx("div", { className: "tw-flex tw-aspect-square tw-size-[22.5rem] tw-items-center tw-justify-center tw-rounded-squid-m tw-border tw-border-material-light-thin tw-bg-grey-900 tw-p-squid-m tw-shadow-elevation-light-1", children: isError ? (jsxRuntime.jsx(SwapErrorIcon, {})) : qrData ? (jsxRuntime.jsx(QrCode, { matrix: qrData, size: 320, imageUrl: imageUrl })) : (jsxRuntime.jsx(Loader, { className: "tw-text-grey-300", size: "32", strokeWidth: "3" })) }) }), jsxRuntime.jsx("footer", { className: "tw-flex tw-flex-col tw-items-center tw-gap-squid-xs tw-self-stretch tw-px-squid-m tw-text-center tw-text-grey-500", children: footerContent })] }), ctaButton != null && (jsxRuntime.jsx(Button$1, Object.assign({}, ctaButton, { size: "lg", variant: "primary" }))), jsxRuntime.jsx(Button$1, { size: "lg", variant: "secondary", label: "Cancel", onClick: handleClose })] }));
 }
 
+const tokenImageClassName$1 = "tw-h-squid-xl tw-w-squid-xl tw-rounded-full tw-object-cover";
+const themeKeyVariantMap$1 = {
+    primary: "grey-800",
+    accent: "royal-500",
+};
+const buttonTextClassNameMap$1 = {
+    primary: "tw-text-grey-300",
+    accent: "group-data-[squid-theme-type=dark]:tw-text-grey-100 group-data-[squid-theme-type=light]:tw-text-grey-900",
+};
+var ImageLoadingState$1;
+(function (ImageLoadingState) {
+    ImageLoadingState[ImageLoadingState["LOADING"] = 0] = "LOADING";
+    ImageLoadingState[ImageLoadingState["LOADED"] = 1] = "LOADED";
+    ImageLoadingState[ImageLoadingState["ERROR"] = 2] = "ERROR";
+})(ImageLoadingState$1 || (ImageLoadingState$1 = {}));
+function TokenOnlyButton({ token, onClick, variant = "primary", isLoading = false, tooltip, emptyTokenLabel = "Select token", }) {
+    var _a, _b, _c;
+    const [tokenImageLoadingState, setTokenImageLoadingState] = require$$0.useState(ImageLoadingState$1.LOADING);
+    const [fallbackImageLoadingState, setFallbackImageLoadingState] = require$$0.useState(ImageLoadingState$1.LOADING);
+    const isImgLoadError = tokenImageLoadingState === ImageLoadingState$1.ERROR;
+    const isFallbackImgLoadError = fallbackImageLoadingState === ImageLoadingState$1.ERROR;
+    const showTextFallback = (isImgLoadError && !(token === null || token === void 0 ? void 0 : token.fallbackIconUrl)) || isFallbackImgLoadError;
+    const fallbackBgColor = useColorFromSeed((_a = token === null || token === void 0 ? void 0 : token.symbol) !== null && _a !== void 0 ? _a : "");
+    const defaultBgColor = `var(${themeKeysToCssVariables.color[themeKeyVariantMap$1[variant]].cssVariable})`;
+    const tokenTextColor = isImgLoadError ? "#fff" : token === null || token === void 0 ? void 0 : token.textColor;
+    const tokenBgColor = showTextFallback
+        ? fallbackBgColor || defaultBgColor
+        : (token === null || token === void 0 ? void 0 : token.bgColor) || defaultBgColor;
+    const ButtonTag = isLoading ? "div" : "button";
+    return (jsxRuntime.jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", containerClassName: "tw-w-fit", tooltipContent: isLoading ? undefined : tooltip === null || tooltip === void 0 ? void 0 : tooltip.tooltipContent, children: jsxRuntime.jsxs(ButtonTag, { onClick: isLoading ? undefined : onClick, disabled: isLoading, "aria-disabled": isLoading, className: cn("tw-group/token-button tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center tw-gap-squid-xxs tw-rounded-full tw-border tw-border-material-light-thin tw-py-squid-xs focus:tw-outline-none", "before:tw-absolute before:-tw-inset-[3px] before:tw-rounded-full before:tw-border-2 before:tw-border-transparent", "after:tw-absolute after:-tw-inset-[5px] after:tw-rounded-full after:tw-border-4 after:tw-border-transparent", "hover:before:tw-border-grey-900 hover:after:tw-border-material-light-average", buttonTextClassNameMap$1[variant], isLoading && "tw-cursor-not-allowed", token ? "tw-pl-squid-xxs tw-pr-squid-xs" : "tw-px-squid-s"), style: {
+                backgroundColor: token ? tokenBgColor : defaultBgColor,
+                color: token ? tokenTextColor : undefined,
+            }, children: [token && !isLoading && (jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center", children: [isImgLoadError && token.fallbackIconUrl && (jsxRuntime.jsx("img", { src: token.fallbackIconUrl, alt: token.symbol, onLoad: () => {
+                                setFallbackImageLoadingState(ImageLoadingState$1.LOADED);
+                            }, onError: () => {
+                                setFallbackImageLoadingState(ImageLoadingState$1.ERROR);
+                            }, className: cn(tokenImageClassName$1, "tw-absolute", isFallbackImgLoadError && "tw-opacity-0") })), showTextFallback && (jsxRuntime.jsx("div", { style: { color: tokenTextColor }, className: cn(tokenImageClassName$1, "tw-absolute tw-flex tw-items-center tw-justify-center tw-text-body-small"), children: (_c = (_b = token.symbol) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.toUpperCase() })), jsxRuntime.jsx("img", { onLoad: () => {
+                                setTokenImageLoadingState(ImageLoadingState$1.LOADED);
+                            }, onError: () => {
+                                setTokenImageLoadingState(ImageLoadingState$1.ERROR);
+                            }, src: token.iconUrl, alt: token.symbol, className: cn(tokenImageClassName$1, "tw-absolute", isImgLoadError && "tw-opacity-0") })] })), jsxRuntime.jsx(BodyText, { size: "small", className: cn("tw-leading-[13px]", isLoading && "tw-min-w-[135px]"), children: token && !isLoading ? token.symbol : !isLoading && emptyTokenLabel }), !isLoading && (jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-w-4 tw-min-w-4 tw-opacity-66" }))] }) })));
+}
+
 const AddressHeader = ({ direction, onClick, isDisabled, tooltip, label, walletIconUrl, isLoading, displayLabel = true, highlightLabel = false, showIcon = true, }) => {
     const ButtonTag = onClick && !isDisabled ? "button" : "div";
     return (jsxRuntime.jsx("header", { className: "tw-flex tw-h-squid-xl2 tw-items-center tw-self-stretch tw-px-squid-m tw-py-squid-xxs", children: jsxRuntime.jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxRuntime.jsxs(ButtonTag, { onClick: onClick, disabled: isDisabled, type: onClick ? "button" : undefined, className: cn("tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs", onClick && !isDisabled && "hover:tw-bg-material-light-thin", isLoading && "tw-opacity-50"), children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-500", children: direction === "from" ? "Pay" : "Receive" }), displayLabel && !isLoading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-600", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [showIcon &&
                                         (walletIconUrl ? (jsxRuntime.jsx(Image$1, { className: "!tw-h-6 !tw-w-6 !tw-rounded-lg", src: walletIconUrl })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-h-6 tw-w-6 tw-items-center tw-justify-center tw-rounded-lg tw-bg-royal-500 tw-px-0.5 tw-text-grey-900 tw-outline tw-outline-1 tw-outline-material-light-thin", children: jsxRuntime.jsx(WalletIcon, { size: "18" }) }))), jsxRuntime.jsx(BodyText, { size: "small", className: cn(highlightLabel ? "tw-text-royal-500" : "tw-text-grey-300"), children: label }), jsxRuntime.jsx(ChevronArrowIcon, { className: cn(highlightLabel ? "tw-text-royal-500" : "tw-text-grey-600"), size: "16" })] })] }))] }) })) }));
 };
-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, fullHeight = true, debounceInput = true, showWalletButtonHeader = true, }) {
+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, fullHeight = true, debounceInput = true, showWalletButtonHeader = true, hideChainSelector = false, }) {
     var _a, _b, _c, _d, _e;
     const isFetching = isFetchingProp || isLoading;
     const [forcedAmount, setForcedAmount] = require$$0.useState(amount);
@@ -38470,7 +38541,7 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
         }
         setForcedAmount(prevRef.current.amount);
     }, [amount, chain, token]);
-    return (jsxRuntime.jsxs("section", { className: cn("tw-relative tw-flex tw-w-full tw-flex-col tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 mobile-lg:tw-w-card-large", fullHeight && "tw-h-full tw-pb-squid-m"), children: [jsxRuntime.jsx(AddressHeader, { direction: direction, onClick: walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick, isDisabled: walletButton === null || walletButton === void 0 ? void 0 : walletButton.disabled, tooltip: walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, label: (_b = (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.address) !== null && _a !== void 0 ? _a : walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) !== null && _b !== void 0 ? _b : (direction === "from" ? "Connect wallet" : "Select recipient"), walletIconUrl: walletButton === null || walletButton === void 0 ? void 0 : walletButton.walletIconUrl, isLoading: isLoading, displayLabel: showWalletButtonHeader, highlightLabel: !(walletButton === null || walletButton === void 0 ? void 0 : walletButton.address), showIcon: (_c = walletButton === null || walletButton === void 0 ? void 0 : walletButton.showIcon) !== null && _c !== void 0 ? _c : true }), 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 })) }), jsxRuntime.jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
+    return (jsxRuntime.jsxs("section", { className: cn("tw-relative tw-flex tw-w-full tw-flex-col tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 mobile-lg:tw-w-card-large", fullHeight && "tw-h-full tw-pb-squid-m"), children: [jsxRuntime.jsx(AddressHeader, { direction: direction, onClick: walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick, isDisabled: walletButton === null || walletButton === void 0 ? void 0 : walletButton.disabled, tooltip: walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, label: (_b = (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.address) !== null && _a !== void 0 ? _a : walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) !== null && _b !== void 0 ? _b : (direction === "from" ? "Connect wallet" : "Select recipient"), walletIconUrl: walletButton === null || walletButton === void 0 ? void 0 : walletButton.walletIconUrl, isLoading: isLoading, displayLabel: showWalletButtonHeader, highlightLabel: !(walletButton === null || walletButton === void 0 ? void 0 : walletButton.address), showIcon: (_c = walletButton === null || walletButton === void 0 ? void 0 : walletButton.showIcon) !== null && _c !== void 0 ? _c : true }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: hideChainSelector ? (jsxRuntime.jsx(TokenOnlyButton, Object.assign({}, assetsButton, { token: token, isLoading: isLoading }))) : (jsxRuntime.jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading }))) }), jsxRuntime.jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
                     decimals: (_d = token === null || token === void 0 ? void 0 : token.decimals) !== null && _d !== void 0 ? _d : 18,
                     symbol: (_e = token === null || token === void 0 ? void 0 : token.symbol) !== null && _e !== void 0 ? _e : "",
                     price: tokenPrice,
@@ -39007,7 +39078,7 @@ function PropertyListItem(_a) {
     const Text = variant === "small" ? CaptionText : SmallBodyText;
     const isCollapsible = !!collapsibleContent;
     const ContentWrapperTag = isCollapsible ? "button" : "div";
-    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 && "tw-bg-gradient-to-r tw-from-grey-800", addExtraPadding && containerPaddingClassNameMap[variant], className), children: jsxRuntime.jsxs(ContentWrapperTag, { onClick: isCollapsible ? handleToggleCollapsed : undefined, className: "tw-w-full tw-rounded-squid-xs", 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", 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, showGradient: false, 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, showGradient: false, children: detail }) }), isCollapsible && (jsxRuntime.jsx(ChevronLargeRightIcon, { className: cn("tw-text-grey-600 tw-duration-generic", !isCollapsed && "tw-rotate-90"), size: "16" }))] }), isCollapsible && (jsxRuntime.jsx(Collapse, { collapsed: isCollapsed, children: collapsibleContent }))] }) })));
+    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 && "tw-squid-property-row-bg", addExtraPadding && containerPaddingClassNameMap[variant], className), children: jsxRuntime.jsxs(ContentWrapperTag, { onClick: isCollapsible ? handleToggleCollapsed : undefined, className: "tw-w-full tw-rounded-squid-xs", 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", 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, showGradient: false, 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, showGradient: false, children: detail }) }), isCollapsible && (jsxRuntime.jsx(ChevronLargeRightIcon, { className: cn("tw-text-grey-600 tw-duration-generic", !isCollapsed && "tw-rotate-90"), size: "16" }))] }), isCollapsible && (jsxRuntime.jsx(Collapse, { collapsed: isCollapsed, children: collapsibleContent }))] }) })));
 }
 
 function RouteStep({ imageUrl, descriptionBlocks, subtitle, showStepSeparator = false, }) {
@@ -39192,10 +39263,10 @@ function TokenGroups({ groups, className, onGroupChildClick, variant = "large",
 }
 
 function ActionLayout({ lineCap = jsxRuntime.jsx(Timeline.CapTop, {}), status = "executed", showTimeline = true, showBody = true, nextStatus, statusIcon, description, title, icon, children, }) {
-    return (jsxRuntime.jsxs(ActionWrapper, { status: status, children: [jsxRuntime.jsx(ActionLineOutRow, { status: nextStatus }), jsxRuntime.jsx(ActionStatusRow, { status: status, icon: statusIcon, children: description }), title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ActionRow, { children: jsxRuntime.jsxs(Timeline, { className: cn("tw-h-squid-xs", statusTextClassMap[status]), children: [jsxRuntime.jsx(Timeline.CapTop, {}), jsxRuntime.jsx(Timeline.Straight, {}), jsxRuntime.jsx(Timeline.CapBottom, {})] }) }), jsxRuntime.jsxs(ActionRow, { children: [jsxRuntime.jsx("div", { className: "tw-flex tw-items-center tw-justify-center", children: icon }), jsxRuntime.jsx(BodyText, { size: "large", className: cn("tw-flex tw-min-h-squid-l tw-items-center !tw-leading-[1] tw-text-grey-300 tw-transition-opacity tw-duration-200", !showBody && "tw-opacity-0"), children: title })] })] })), jsxRuntime.jsxs(ActionRow, { children: [jsxRuntime.jsxs(Timeline, { className: showTimeline ? statusTextClassMap[status] : "!tw-text-[transparent]", children: [lineCap, jsxRuntime.jsx(Timeline.Straight, {})] }), jsxRuntime.jsx("div", { className: cn("tw-flex tw-flex-col tw-gap-squid-xs tw-pb-squid-xs tw-text-grey-500 tw-transition-opacity tw-duration-200", !showBody && "tw-opacity-0", title && "tw-pt-squid-xxs"), children: children })] })] }));
+    return (jsxRuntime.jsxs(ActionWrapper, { status: status, children: [jsxRuntime.jsx(ActionLineOutRow, { status: nextStatus }), jsxRuntime.jsx(ActionStatusRow, { status: status, icon: statusIcon, children: jsxRuntime.jsx(BodyText, { size: "small", tight: true, className: "tw-block tw-w-full tw-font-medium tw-text-grey-300", children: description }) }), title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ActionRow, { children: jsxRuntime.jsxs(Timeline, { className: cn("tw-h-squid-xs", statusTextClassMap[status]), children: [jsxRuntime.jsx(Timeline.CapTop, {}), jsxRuntime.jsx(Timeline.Straight, {}), jsxRuntime.jsx(Timeline.CapBottom, {})] }) }), jsxRuntime.jsxs(ActionRow, { children: [jsxRuntime.jsx("div", { className: "tw-flex tw-items-center tw-justify-center", children: icon }), jsxRuntime.jsx(BodyText, { size: "large", className: cn("tw-flex tw-min-h-squid-l tw-items-center !tw-leading-[1] tw-text-grey-300 tw-transition-opacity tw-duration-200", !showBody && "tw-opacity-0"), children: title })] })] })), jsxRuntime.jsxs(ActionRow, { children: [jsxRuntime.jsxs(Timeline, { className: showTimeline ? statusTextClassMap[status] : "!tw-text-[transparent]", children: [lineCap, jsxRuntime.jsx(Timeline.Straight, {})] }), jsxRuntime.jsx("div", { className: cn("tw-flex tw-flex-col tw-gap-squid-xs tw-overflow-hidden tw-pb-squid-xs tw-text-grey-500 tw-transition-all tw-duration-200", !showBody ? "tw-max-h-0 !tw-pt-0 tw-opacity-0" : "tw-max-h-20", title && "tw-pt-squid-xxs"), children: children })] })] }));
 }
 function ActionProperties({ timestamp, hash, url, }) {
-    return (jsxRuntime.jsxs(CaptionText, { className: "tw-flex tw-items-center tw-gap-squid-xs", children: [timestamp && jsxRuntime.jsx(Timestamp, { time: timestamp }), timestamp && hash && jsxRuntime.jsx(PipeSeparator, { className: "tw-text-grey-700" }), hash && jsxRuntime.jsx(HashLink, { hash: hash, url: url, showTx: true })] }));
+    return (jsxRuntime.jsxs(CaptionText, { className: "tw-flex tw-items-center tw-gap-squid-xs", children: [timestamp && jsxRuntime.jsx(Timestamp, { time: timestamp }), timestamp && hash && (jsxRuntime.jsx(PipeSeparator, { size: "small", className: "tw-text-grey-700" })), hash && (jsxRuntime.jsx(HashLink, { size: "small", hash: hash, url: url, formattedHash: formatHash(hash), showTx: true, showCopyButton: true }))] }));
 }
 function renderStatusIcon(status, defaultIcon) {
     switch (status) {
@@ -39214,7 +39285,7 @@ function renderStatusIcon(status, defaultIcon) {
     }
 }
 const ActionLineOutRow = ({ status }) => (jsxRuntime.jsx(ActionRow, { children: jsxRuntime.jsxs(Timeline, { className: cn("tw-h-squid-xs", status ? statusTextClassMap[status] : "!tw-text-[transparent]"), children: [jsxRuntime.jsx(Timeline.Straight, {}), jsxRuntime.jsx(Timeline.CapBottom, {})] }) }));
-const ActionStatusRow = ({ children, status, icon, }) => (jsxRuntime.jsxs(ActionRow, { children: [jsxRuntime.jsx("div", { className: "tw-flex tw-items-center tw-justify-center", children: renderStatusIcon(status, icon) }), jsxRuntime.jsx("div", { className: "tw-flex tw-items-center", children: jsxRuntime.jsx(BodyText, { size: "small", tight: true, className: "tw-block tw-w-full tw-text-grey-300", children: children }) })] }));
+const ActionStatusRow = ({ children, status, icon, }) => (jsxRuntime.jsxs(ActionRow, { children: [jsxRuntime.jsx("div", { className: "tw-flex tw-items-center tw-justify-center", children: renderStatusIcon(status, icon) }), jsxRuntime.jsx("div", { className: "tw-flex tw-items-center", children: jsxRuntime.jsx("span", { className: "tw-block tw-w-full tw-text-grey-300", children: children }) })] }));
 function ActionRow(_a) {
     var { className } = _a, props = __rest$1(_a, ["className"]);
     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) })));
@@ -39238,15 +39309,13 @@ function FeesAction({ status, nextStatus, showTimeline = false, total, lines, })
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FeesTotal, { status: status, nextStatus: nextStatus, total: total, showTimeline: lines !== undefined || showTimeline }), lines && (jsxRuntime.jsx(FeesLines, { status: status, lines: lines, showTimeline: showTimeline }))] }));
 }
 function FeesTotal({ status, nextStatus, total, showTimeline, collapsed, }) {
-    return (jsxRuntime.jsxs(ActionWrapper, { status: status, children: [jsxRuntime.jsx(ActionLineOutRow, { status: nextStatus }), jsxRuntime.jsx(ActionStatusRow, { status: status, icon: jsxRuntime.jsx(TagIconFilled, {}), children: jsxRuntime.jsx(FeesRow, Object.assign({ collapsed: collapsed }, total)) }), jsxRuntime.jsx(ActionRow, { children: jsxRuntime.jsxs(Timeline, { className: cn("tw-h-squid-xs", showTimeline ? statusTextClassMap[status] : "tw-text-transparent"), children: [jsxRuntime.jsx(Timeline.CapTop, {}), jsxRuntime.jsx(Timeline.Straight, {})] }) })] }));
+    return (jsxRuntime.jsxs(ActionWrapper, { status: status, children: [jsxRuntime.jsx(ActionLineOutRow, { status: nextStatus }), jsxRuntime.jsx(ActionStatusRow, { status: status, icon: jsxRuntime.jsx(TagIconFilled, {}), children: jsxRuntime.jsx(FeesRow, Object.assign({ className: "tw-text-grey-300", collapsed: collapsed }, total)) }), jsxRuntime.jsx(ActionRow, { children: jsxRuntime.jsxs(Timeline, { className: cn("tw-h-squid-xs", showTimeline ? statusTextClassMap[status] : "tw-text-transparent"), children: [jsxRuntime.jsx(Timeline.CapTop, {}), jsxRuntime.jsx(Timeline.Straight, {})] }) })] }));
 }
-function FeesLines({ status, lines, showTimeline = false, }) {
-    return (jsxRuntime.jsxs(ActionWrapper, { status: status, children: [lines && (jsxRuntime.jsx("div", { children: lines.map((line, index) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [index > 0 && (jsxRuntime.jsx(ActionRow, { children: jsxRuntime.jsxs(Timeline, { className: cn("tw-h-squid-xs", statusTextClassMap[status]), children: [jsxRuntime.jsx(Timeline.CapTop, {}), jsxRuntime.jsx(Timeline.Straight, {})] }) })), jsxRuntime.jsxs(ActionRow, { children: [jsxRuntime.jsxs(Timeline, { className: statusTextClassMap[status], children: [jsxRuntime.jsx(Timeline.Straight, {}), jsxRuntime.jsx(Timeline.ArrowRight, {})] }), jsxRuntime.jsx("div", { className: "tw-relative tw-top-[2px] tw-flex tw-items-end", children: jsxRuntime.jsx(FeesRow, Object.assign({}, line)) })] })] }, index))) })), jsxRuntime.jsx(ActionRow, { children: jsxRuntime.jsxs(Timeline, { className: cn("tw-h-squid-xs", showTimeline
-                        ? statusTextClassMap[status]
-                        : "!tw-text-[transparent]"), children: [jsxRuntime.jsx(Timeline.CapTop, {}), jsxRuntime.jsx(Timeline.Straight, {})] }) })] }));
+function FeesLines({ status, lines }) {
+    return (jsxRuntime.jsx(ActionWrapper, { status: status, children: lines && (jsxRuntime.jsx("div", { children: lines.map((line, index) => (jsxRuntime.jsxs(ActionRow, { children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-10", children: jsxRuntime.jsxs(Timeline, { className: statusTextClassMap[status], children: [jsxRuntime.jsx(Timeline.Straight, {}), jsxRuntime.jsx(Timeline.ArrowRight, {}), jsxRuntime.jsx(Timeline.Straight, { className: index < lines.length - 1 ? "visible" : "tw-invisible" })] }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-items-center", children: jsxRuntime.jsx(FeesRow, Object.assign({ className: "tw-text-grey-400" }, line)) })] }, index))) })) }));
 }
-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, { disableInitialAnimation: true, 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 FeesRow({ label, usd, amount, symbol, collapsed = false, className, }) {
+    return (jsxRuntime.jsxs("div", { className: cn("tw-flex tw-h-5 tw-w-full tw-items-center tw-gap-squid-xs", className), children: [jsxRuntime.jsx(SizeTransition, { disableInitialAnimation: true, children: jsxRuntime.jsx(BodyText, { size: "small", tight: true, className: cn("tw-block tw-truncate", !collapsed && "tw-w-[100px]"), children: label }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-items-center", children: jsxRuntime.jsx(PipeSeparator, { size: "large", 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, }) {
@@ -39298,7 +39367,7 @@ 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: (timestamp || hash) && (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 !== null && timestamp !== void 0 ? timestamp : hash) && (jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })) }));
 }
 
 function SwapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }) {
@@ -87250,27 +87319,39 @@ const swapProgressAnimations = {
     [SwapState.CONFIRMATION_REJECTED]: transactionRejectedAnimation,
     [SwapState.NEEDS_GAS]: transactionErrorPauseAnimation,
 };
-const getSwapProgressTitle = ({ fromToken, toToken, swapState, isSendTransaction, }) => {
+const getSwapProgressTitle = ({ fromToken, toToken, swapState, isSendTransaction, isBridgeTransaction, }) => {
     switch (swapState) {
         case SwapState.CONFIRM:
             if (isSendTransaction) {
                 return "Confirm transaction";
             }
+            if (isBridgeTransaction) {
+                return "Confirm bridge";
+            }
             return "Confirm swap";
         case SwapState.PROGRESS:
             if (isSendTransaction) {
                 return `Send ${fromToken.symbol}`;
             }
+            if (isBridgeTransaction) {
+                return `Bridge ${fromToken.symbol}`;
+            }
             return `Swap ${fromToken.symbol} to ${toToken.symbol}`;
         case SwapState.COMPLETED:
             if (isSendTransaction) {
                 return "Tokens received";
             }
+            if (isBridgeTransaction) {
+                return "Bridge complete";
+            }
             return "Swap complete";
         case SwapState.ERROR:
             if (isSendTransaction) {
                 return "Transaction failed";
             }
+            if (isBridgeTransaction) {
+                return "Bridge failed";
+            }
             return "Swap failed";
         case SwapState.CONFIRMATION_TOO_LONG:
             return "Confirmation taking too long";
@@ -87278,14 +87359,23 @@ const getSwapProgressTitle = ({ fromToken, toToken, swapState, isSendTransaction
             if (isSendTransaction) {
                 return "Transaction rejected";
             }
+            if (isBridgeTransaction) {
+                return "Bridge rejected";
+            }
             return "Swap rejected";
         case SwapState.PARTIAL_SUCCESS:
+            if (isSendTransaction) {
+                return "Transaction failed to complete";
+            }
+            if (isBridgeTransaction) {
+                return "Bridge failed to complete";
+            }
             return "Swap failed to complete";
         case SwapState.NEEDS_GAS:
             return "Needs gas on destination";
     }
 };
-const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, toAddressFormatted, refundTokenSymbol, isSendTransaction, }) => {
+const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, toAddressFormatted, refundTokenSymbol, isSendTransaction, isBridgeTransaction, }) => {
     switch (swapState) {
         case SwapState.CONFIRM: {
             return "Authenticate the transaction in your wallet.";
@@ -87294,6 +87384,9 @@ const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, to
             if (isSendTransaction) {
                 return "Feel free to dismiss this dialog, we’ll notify you when the recipient receives your tokens.";
             }
+            if (isBridgeTransaction) {
+                return "Feel free to dismiss this dialog, we’ll notify you when the bridge is complete.";
+            }
             return "Feel free to dismiss this dialog, we’ll notify you when the swap is complete.";
         }
         case SwapState.COMPLETED: {
@@ -87329,7 +87422,7 @@ const swapProgressButtonTexts = {
     [SwapState.PARTIAL_SUCCESS]: "Cancel",
     [SwapState.NEEDS_GAS]: "Go to Axelarscan",
 };
-function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, shareSwapDropdownContent, isSendTransaction = false, }) {
+function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, shareSwapDropdownContent, isSendTransaction = false, isBridgeTransaction = false, }) {
     const [showSwapInfoSection, setShowSwapInfoSection] = require$$0.useState(true);
     const isFirstRenderRef = require$$0.useRef(true);
     const { timer, stopTimer, startTimer } = useTimer({
@@ -87353,6 +87446,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
             fromToken,
             toToken,
             isSendTransaction,
+            isBridgeTransaction,
         });
         const headerDescription = getSwapProgressDescriptions({
             swapState,
@@ -87362,12 +87456,13 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
             toAddressFormatted,
             refundTokenSymbol,
             isSendTransaction,
+            isBridgeTransaction,
         });
         return {
             headerTitle,
             headerDescription,
         };
-    }, [swapState, fromToken, toToken, toAmount, toChain]);
+    }, [swapState, fromToken, toToken, toAmount, toChain, isBridgeTransaction]);
     const trackTransactionViewRef = require$$0.useRef(null);
     const handleCollapseRouteSteps = () => { var _a; return (_a = trackTransactionViewRef.current) === null || _a === void 0 ? void 0 : _a.handleToggleRouteSteps(); };
     return (jsxRuntime.jsxs(Modal, { isOpen: isOpen, onBackdropClick: 
@@ -87387,13 +87482,18 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
                                 height: "100%",
                                 maxHeight: "100%",
                                 width: "auto",
-                            }, autoplay: true, loop: true, src: swapProgressAnimations[swapState] }) }), 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: swapState === SwapState.COMPLETED ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsxRuntime.jsx(SwapSuccessIcon, {}) }), shareSwapDropdownContent ? (jsxRuntime.jsx(ShareSwapButton, { dropdownContent: shareSwapDropdownContent })) : null] })) : swapState === SwapState.ERROR ? (jsxRuntime.jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "error" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsxRuntime.jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "warning" })) : isSendTransaction ? (jsxRuntime.jsx(Image$1, { src: fromToken.logoUrl, rounded: "full", size: "xlarge", shadow: true })) : (jsxRuntime.jsx(TokenPair, { firstToken: {
+                            }, autoplay: true, loop: true, src: swapProgressAnimations[swapState] }) }), 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: swapState === SwapState.COMPLETED ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsxRuntime.jsx(SwapSuccessIcon, {}) }), shareSwapDropdownContent ? (jsxRuntime.jsx(ShareSwapButton, { dropdownContent: shareSwapDropdownContent })) : null] })) : swapState === SwapState.ERROR ? (jsxRuntime.jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "error" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsxRuntime.jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "warning" })) : isSendTransaction || isBridgeTransaction ? (jsxRuntime.jsx(Image$1, { src: fromToken.logoUrl, rounded: "full", size: "xlarge", shadow: true })) : (jsxRuntime.jsx(TokenPair, { firstToken: {
                                 bgColor: fromToken.bgColor,
                                 logoURI: fromToken.logoUrl,
                             }, secondToken: {
                                 bgColor: toToken.bgColor,
                                 logoURI: toToken.logoUrl,
-                            } })) }), jsxRuntime.jsx(TxProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxRuntime.jsxs("ul", { className: "tw-squid-property-gradient-bg-odd-container 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: isSendTransaction ? (jsxRuntime.jsx(ArrowRightUpCircleIcon, {})) : (jsxRuntime.jsx(ArrowsSwapIcon, {})), label: isSendTransaction ? "Send" : "Swap", detail: isSendTransaction ? (jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount })) : (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: isSendTransaction ? (jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Image$1, { size: "medium", rounded: "xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] })) : (jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$1, { size: "medium", rounded: "xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$1, { size: "medium", rounded: "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 tw-squid-property-gradient-bg-odd-container mobile-xs-height:tw-h-[195px] mobile-sm-height:tw-py-squid-s", children: [jsxRuntime.jsx(PropertyListItem, { icon: isSendTransaction ? (jsxRuntime.jsx(ArrowRightUpCircleIcon, {})) : (jsxRuntime.jsx(ArrowsSwapIcon, {})), label: isSendTransaction
+                                    ? "Send"
+                                    : isBridgeTransaction
+                                        ? "Bridge"
+                                        : "Swap", detail: isSendTransaction ? (jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount })) : (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: isSendTransaction ||
+                                    fromChain.networkName === toChain.networkName ? (jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Image$1, { size: "medium", rounded: "xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] })) : (jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$1, { size: "medium", rounded: "xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$1, { size: "medium", rounded: "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();
@@ -87495,20 +87595,27 @@ function TransactionViewLayout(_a) {
     var { isLoading, header, properties, actions, fees } = _a, props = __rest$1(_a, ["isLoading", "header", "properties", "actions", "fees"]);
     const [actionsCollapsed, setActionsCollapsed] = require$$0.useState(true);
     const [feesCollapsed, setFeesCollapsed] = require$$0.useState(true);
-    return (jsxRuntime.jsx("div", Object.assign({ className: "tw-relative tw-divide-y tw-divide-material-light-thin" }, props, { children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-full tw-animate-shimmer tw-bg-shimmer tw-text-transparent", style: {
+    const items = require$$0.useMemo(() => {
+        if (actions)
+            return linkActionTimelineProps(actions, actionsCollapsed);
+        return [];
+    }, [actions, actionsCollapsed]);
+    return (jsxRuntime.jsx("div", Object.assign({ className: "tw-relative tw-divide-y tw-divide-material-light-thin tw-squid-property-gradient-bg-even-container" }, props, { children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-full tw-animate-shimmer tw-bg-shimmer tw-text-transparent", style: {
                         backgroundSize: "200% 100%",
-                    } }), jsxRuntime.jsx(TransactionHeaderLayout, { isLoading: true }), jsxRuntime.jsx(PropertiesSkeleton, {})] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header, properties, " ", actions && (jsxRuntime.jsx(CollapsibleSection, { 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))) })), fees && (jsxRuntime.jsxs(CollapsibleSection, { collapsed: feesCollapsed, setCollapsed: setFeesCollapsed, children: [jsxRuntime.jsx(FeesTotal, Object.assign({ collapsed: feesCollapsed, showTimeline: true }, fees)), jsxRuntime.jsx(FeesLines, Object.assign({}, fees))] }))] })) })));
-}
-function CollapsibleSection({ children, collapsed, setCollapsed, collapsedHeight = 50, }) {
-    return (jsxRuntime.jsx("div", { className: cn("tw-group/Collapsible-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-t-[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("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/Collapsible-section:tw-opacity-100") }) }), jsxRuntime.jsx(Collapse, { collapsed: collapsed, collapsedHeight: collapsedHeight, children: children })] }) }));
+                    } }), jsxRuntime.jsx(TransactionHeaderLayout, { isLoading: true }), jsxRuntime.jsx(PropertiesSkeleton, {})] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header, properties, actions && (jsxRuntime.jsx(CollapsibleSection, { header: jsxRuntime.jsx("div", { className: "tw-w-full", children: items[0] && jsxRuntime.jsx(TransactionAction, Object.assign({}, items[0])) }), collapsed: actionsCollapsed, setCollapsed: setActionsCollapsed, children: linkActionTimelineProps(actions, actionsCollapsed)
+                        .slice(1, linkActionTimelineProps.length)
+                        .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))) })), fees && (jsxRuntime.jsx(CollapsibleSection, { header: jsxRuntime.jsx(FeesTotal, Object.assign({ collapsed: feesCollapsed, showTimeline: true }, fees)), collapsed: feesCollapsed, setCollapsed: setFeesCollapsed, children: jsxRuntime.jsx(FeesLines, Object.assign({}, fees)) }))] })) })));
+}
+function CollapsibleSection({ header, children, collapsed, setCollapsed, collapsedHeight = 0, }) {
+    return (jsxRuntime.jsx("div", { className: cn("tw-group/collapsible-section tw-relative tw-bg-grey-900", collapsed ? "tw-cursor-pointer" : ""), children: jsxRuntime.jsx("div", { className: cn("tw-relative tw-border-material-light-thin tw-transition-[border-width] tw-duration-200", !collapsed && "tw-border-t-[4px]"), children: jsxRuntime.jsxs("div", { className: "tw-border-t tw-border-t-material-light-thin", children: [jsxRuntime.jsxs("span", { className: "tw-relative tw-z-10 tw-flex tw-flex tw-w-full tw-cursor-pointer tw-items-center tw-justify-between tw-text-left hover:tw-bg-grey-800", onClick: (e) => {
+                            const target = e.target;
+                            if (target.tagName === "BUTTON" ||
+                                target.tagName === "A" ||
+                                target.closest("button, a, input, select, textarea")) {
+                                return;
+                            }
+                            setCollapsed((prev) => !prev);
+                        }, children: [jsxRuntime.jsx("div", { className: "tw-w-full", children: header }), jsxRuntime.jsx(ChevronLargeDownIcon, { className: cn("tw-absolute tw-right-squid-m tw-top-1/2 tw-origin-center -tw-translate-y-1/2 tw-text-grey-300 tw-transition-transform tw-duration-200", collapsed && "-tw-rotate-90") })] }), jsxRuntime.jsx(Collapse, { collapsed: collapsed, collapsedHeight: collapsedHeight, children: children })] }) }) }));
 }
 function PropertiesSkeleton() {
     return (jsxRuntime.jsx(PropertiesLayout, { children: Array.from({ length: 5 }, (_, i) => (jsxRuntime.jsx(PropertyListItem, { variant: "large", isLoading: true, showGradientBg: false }, i))) }));
@@ -87529,16 +87636,20 @@ function InteractionTransactionView({ title = "Interaction", hash, status, url,
     return (jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading, header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsx("div", { className: "tw-flex tw-h-10 tw-w-10 tw-items-center tw-justify-center tw-rounded-md tw-bg-royal-400 tw-text-grey-900", children: jsxRuntime.jsx(ThumbsUp, { size: "24" }) }), 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 }), " "] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(IconLabel, { src: chain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: chain.name }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(HashLink, { hash: address, showCopyButton: true }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsxRuntime.jsx(BoostBadge, {}), jsxRuntime.jsx(BodyText, { size: "small", children: timeToComplete })] }) })] }), actions: actions, fees: fees }));
 }
 
-function SwapTransactionView({ title = "Swap", hash, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, boosted, timeToComplete, actions, fees, isLoading, }) {
+function LinkButton({ href }) {
+    return (jsxRuntime.jsx("a", { href: href, target: "_blank", className: "tw-ml-0.5 tw-rounded-squid-xs tw-p-0.5 tw-text-royal-500 hover:tw-bg-material-light-thin", rel: "noreferrer", children: jsxRuntime.jsx(SquareArrowTopRightIcon, {}) }));
+}
+
+function SwapTransactionView({ title = "Swap", hash, toLink, fromLink, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, boosted, timeToComplete, actions, fees, isLoading, }) {
     if (isLoading)
         return jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading });
-    return (jsxRuntime.jsx(TransactionViewLayout, { header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsx(Drip, { direction: "horizontal", from: fromToken, to: 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, formattedHash: formatHash(hash) })] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ArrowRightUpCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Swap ", fromToken.symbol] }), detail: jsxRuntime.jsx(IconLabel, { src: fromToken.logoURI, rounded: "full", children: jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Receive ", toToken.symbol] }), detail: jsxRuntime.jsx(IconLabel, { src: toToken.logoURI, rounded: "full", children: jsxRuntime.jsx(BodyText, { size: "small", children: toAmount }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: fromChain.name }) }), to: jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: toChain.name }) }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(HashLink, { hash: fromAddress, showCopyButton: true, formattedHash: formatHash(fromAddress) }) }), to: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(HashLink, { hash: toAddress, showCopyButton: true, formattedHash: formatHash(toAddress) }) }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ArrowsSwapIcon, {}), label: "Exchange rate", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsxs(BodyText, { size: "small", children: ["1 ", fromToken.symbol] }), to: jsxRuntime.jsxs(BodyText, { size: "small", children: [exchangeRate, " ", toToken.symbol] }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsxRuntime.jsx(BoostBadge, {}), jsxRuntime.jsx(BodyText, { size: "small", children: timeToComplete })] }) })] }), actions: actions, fees: fees }));
+    return (jsxRuntime.jsx(TransactionViewLayout, { header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsx(Drip, { direction: "horizontal", from: fromToken, to: 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, formattedHash: formatHash(hash) })] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ArrowRightUpCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Swap ", fromToken.symbol] }), detail: jsxRuntime.jsxs("span", { className: "tw-inline-flex tw-inline-flex tw-gap-0.5", children: [jsxRuntime.jsx(IconLabel, { src: fromToken.logoURI, rounded: "full", children: jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }) }), fromLink && jsxRuntime.jsx(LinkButton, { href: fromLink })] }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Receive ", toToken.symbol] }), detail: jsxRuntime.jsxs("span", { className: "tw-inline-flex tw-items-center tw-gap-0.5", children: [jsxRuntime.jsx(IconLabel, { src: toToken.logoURI, rounded: "full", children: jsxRuntime.jsx(BodyText, { size: "small", children: toAmount }) }), toLink && jsxRuntime.jsx(LinkButton, { href: toLink })] }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: fromChain.name }) }), to: jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: toChain.name }) }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(HashLink, { hash: fromAddress, showCopyButton: true, formattedHash: formatHash(fromAddress) }) }), to: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(HashLink, { hash: toAddress, showCopyButton: true, formattedHash: formatHash(toAddress) }) }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ArrowsSwapIcon, {}), label: "Exchange rate", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsxs(BodyText, { size: "small", children: ["1 ", fromToken.symbol] }), to: jsxRuntime.jsxs(BodyText, { size: "small", children: [exchangeRate, " ", toToken.symbol] }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsxRuntime.jsx(BoostBadge, {}), jsxRuntime.jsx(BodyText, { size: "small", children: timeToComplete })] }) })] }), actions: actions, fees: fees }));
 }
 
-function BridgeTransactionView({ title = "Bridge", hash, status, url, amount, token, fromChain, toChain, address, actions, fees, boosted, timeToComplete, isLoading, }) {
+function BridgeTransactionView({ title = "Bridge", hash, fromLink, toLink, status, url, fromAmount, toAmount, fromToken, toToken, fromChain, toChain, address, actions, fees, boosted, timeToComplete, isLoading, }) {
     if (isLoading)
         return jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading });
-    return (jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading, header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsxs("div", { className: "tw-relative", children: [jsxRuntime.jsx(Image$1, { src: fromChain.logoURI, size: "xlarge", rounded: "full" }), jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-rounded-md tw-border tw-border-white", children: jsxRuntime.jsx(Image$1, { src: toChain.logoURI, size: "medium" }) })] }), 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, formattedHash: formatHash(hash) }), " "] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(SquareArrowTopLeftIcon, { size: "20" }), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Bridge ", token.symbol] }), detail: jsxRuntime.jsx(IconLabel, { src: token.logoURI, rounded: "full", children: jsxRuntime.jsx(BodyText, { size: "small", children: amount }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: fromChain.name }) }), to: jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: toChain.name }) }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(HashLink, { hash: address, showCopyButton: true, formattedHash: address }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsxRuntime.jsx(BoostBadge, {}), jsxRuntime.jsx(BodyText, { size: "small", children: timeToComplete })] }) })] }), actions: actions, fees: fees }));
+    return (jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading, header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsxs("div", { className: "tw-relative", children: [jsxRuntime.jsx(Image$1, { src: fromChain.logoURI, size: "xlarge", rounded: "full" }), jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-rounded-md tw-border tw-border-white", children: jsxRuntime.jsx(Image$1, { src: toChain.logoURI, size: "medium" }) })] }), 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, formattedHash: formatHash(hash) })] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(ArrowRightUpCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Bridge ", fromToken.symbol] }), detail: jsxRuntime.jsxs("span", { className: "tw-inline-flex tw-inline-flex tw-gap-0.5", children: [jsxRuntime.jsx(IconLabel, { src: fromToken.logoURI, rounded: "full", children: jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }) }), fromLink && jsxRuntime.jsx(LinkButton, { href: fromLink })] }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Receive ", toToken.symbol] }), detail: jsxRuntime.jsxs("span", { className: "tw-inline-flex tw-items-center tw-gap-0.5", children: [jsxRuntime.jsx(IconLabel, { src: toToken.logoURI, rounded: "full", children: jsxRuntime.jsx(BodyText, { size: "small", children: toAmount }) }), toLink && jsxRuntime.jsx(LinkButton, { href: toLink })] }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: fromChain.name }) }), to: jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: toChain.name }) }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(HashLink, { hash: address, showCopyButton: true, formattedHash: address }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsxRuntime.jsx(BoostBadge, {}), jsxRuntime.jsx(BodyText, { size: "small", children: timeToComplete })] }) })] }), actions: actions, fees: fees }));
 }
 
 function TransactionView({ type, isLoading, data, }) {
@@ -88117,6 +88228,7 @@ exports.SparklesIcon = SparklesIcon;
 exports.SquareArrowCenter = SquareArrowCenter;
 exports.SquareArrowTopLeftIcon = SquareArrowTopLeftIcon;
 exports.SquareArrowTopRight2Icon = SquareArrowTopRight2Icon;
+exports.SquareArrowTopRightIcon = SquareArrowTopRightIcon;
 exports.SquidLogo = SquidLogo;
 exports.StakeAction = StakeAction;
 exports.StarLinesIcon = StarLinesIcon;
@@ -88156,6 +88268,7 @@ exports.Toast = Toast;
 exports.TokenDetailsView = TokenDetailsView;
 exports.TokenGroup = TokenGroup;
 exports.TokenGroups = TokenGroups;
+exports.TokenOnlyButton = TokenOnlyButton;
 exports.TokenPair = TokenPair;
 exports.Tooltip = Tooltip;
 exports.TradingViewStepsIcon = TradingViewStepsIcon;

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

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import { ActionStatus, TransactionStateVariant } from "../../types/components";
+import { type ReactNode } from "react";
+import { type ActionStatus, type TransactionStateVariant } from "../../types/components";
 export declare const statusTextClassMap: Record<ActionStatus, string>;
 interface TransactionStateProps extends React.HTMLAttributes<HTMLDivElement> {
     status: ActionStatus;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface Props extends React.HTMLAttributes<HTMLButtonElement> {
+    copyText: string;
+    size?: "default" | "small";
+}
+export declare const CopyButton: ({ copyText, className, size, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+interface Props {
+    href: string;
+}
+export default function LinkButton({ href }: Props): import("react/jsx-runtime").JSX.Element;
+export {};