@0xsquid/ui 3.1.0 → 3.2.1

package/dist/esm/index.js

@@ -3718,7 +3718,7 @@ var ImageState;
     ImageState[ImageState["LOADED"] = 1] = "LOADED";
     ImageState[ImageState["ERROR"] = 2] = "ERROR";
 })(ImageState || (ImageState = {}));
-const sizeClassMap$1 = {
+const sizeClassMap$2 = {
     small: "tw-w-squid-s",
     medium: "tw-w-squid-m",
     large: "tw-w-squid-l",
@@ -3750,7 +3750,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] = useState(ImageState.LOADED);
     return (jsxs("div", Object.assign({}, containerProps, { className: cn("tw-relative", containerProps === null || containerProps === void 0 ? void 0 : containerProps.className), children: [children != null ? (jsx("div", Object.assign({ className: cn(className, "tw-flex tw-items-center tw-justify-center") }, props, { children: children }))) : ((imageState !== ImageState.LOADED || !src) &&
                 (placeholderImageUrl ? (jsx("img", Object.assign({ src: placeholderImageUrl, className: className }, props))) : (jsx("div", Object.assign({ className: className }, props))))), children == null && src && (jsx("img", Object.assign({}, props, { src: src, onError: () => {
@@ -3764,7 +3764,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) && (jsxs("div", { className: cn("tw-relative tw-w-fit", extraMarginForBadge && "tw-mr-1.5", className), children: [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) && (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: jsx(Image$1, Object.assign({}, badge)) }))] })));
 }
 
-const themeKeyVariantMap$1 = {
+const themeKeyVariantMap$2 = {
     primary: "grey-800",
     accent: "royal-500",
 };
@@ -3779,7 +3779,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 = useMemo(() => {
@@ -3870,7 +3870,7 @@ function IconLabel({ src, children, rounded }) {
     return (jsxs("div", { className: "tw-inline-flex tw-items-center tw-gap-squid-xxs", children: [src && jsx(Image$1, { src: src, rounded: rounded, size: "medium" }), typeof children === "string" ? (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",
 };
@@ -3887,7 +3887,7 @@ const customImageStylesMap = {
     },
 };
 function ImageGroup({ imageUrls, badge, size = "large", }) {
-    return (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) => (jsx(Image$1, { src: url, size: "medium", rounded: "xxs", style: customImageStylesMap[size] }, url))), badge != null && size !== "small" && (jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px]", children: jsx(Image$1, Object.assign({}, badge, { border: "outline-lg", size: "medium" })) }))] }));
+    return (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) => (jsx(Image$1, { src: url, size: "medium", rounded: "xxs", style: customImageStylesMap[size] }, url))), badge != null && size !== "small" && (jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px]", children: jsx(Image$1, Object.assign({}, badge, { border: "outline-lg", size: "medium" })) }))] }));
 }
 
 function Approve() {
@@ -3945,6 +3945,9 @@ function ArrowOutOfBoxIcon() {
 function ChevronGrabberVerticalIcon({ size = "16", className, }) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: 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 (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, xmlns: "http://www.w3.org/2000/svg", children: 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 (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: 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" }) }));
 }
@@ -4543,6 +4546,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",
@@ -4552,6 +4557,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",
@@ -4561,6 +4568,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",
@@ -4579,6 +4588,8 @@ function renderIcon(status, variant) {
         case "waiting":
             return jsx(DotGrid1x3HorizontalIcon, {});
         case "warning":
+        case "troubleshoot":
+        case "refunded":
             return jsx(RefreshIcon, {});
     }
 }
@@ -4593,10 +4604,21 @@ function UsdAmount({ usdAmount }) {
     return (jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsx(CaptionText, { className: "tw-opacity-66", children: "$" }), jsx(CaptionText, { children: usdAmount.toString() })] }));
 }
 
-function HashLink({ showTx = false, hash, showCopyButton = false, url, children, className, formattedHash, copyIconSize = "16", }) {
-    return (jsxs("div", { className: cn("tw-flex tw-items-center", className), children: [showTx && jsx("span", { className: "tw-mr-squid-xs tw-text-grey-700", children: "TX" }), children !== null && children !== void 0 ? children : formattedHash, url && (jsx("a", { href: url, target: "_blank", className: "tw-rounded-squid-s tw-px-squid-xxs hover:tw-bg-material-light-thin", rel: "noreferrer", children: jsx(SquareArrowTopRight2Icon, { strokeWidth: "1.5", className: "tw-h-[1.2em] tw-w-[1.2em] tw-text-royal-500" }) })), showCopyButton && (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: 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] = useState(false);
+    const handleCopy = () => {
+        navigator.clipboard.writeText(copyText).catch(() => { });
+        setCopied(true);
+        setTimeout(() => {
+            setCopied(false);
+        }, 1500);
+    };
+    return (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: [jsx(CopyOutlinedIcon, { strokeWidth: "2", size: size === "small" ? "1rem" : "1.5rem", className: cn("tw-text-royal-500", copied ? "tw-invisible" : "tw-visible") }), 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: jsx(Checkmark1Icon, { size: size === "small" ? "0.75rem" : "1.35rem" }) })] })));
+};
+
+function HashLink({ showTx = false, hash, showCopyButton = false, url, children, className, formattedHash, size, }) {
+    return (jsxs("div", { className: cn("tw-flex tw-items-center tw-gap-1", className), children: [showTx && jsx("span", { className: "tw-mr-1 tw-text-grey-700", children: "TX" }), children !== null && children !== void 0 ? children : formattedHash, url && (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: jsx(SquareArrowTopRightIcon, { size: size === "small" ? "16" : "24" }) })), showCopyButton && jsx(CopyButton, { copyText: hash, size: size })] }));
 }
 
 function WalletLink({ imageURI, address }) {
@@ -38213,8 +38235,14 @@ function NavigationBar(_a) {
                     : "tw-flex"), children: jsx(HeadingText, { size: "small", children: title }) })) : null] })));
 }
 
-function PipeSeparator(props) {
-    return (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 (jsx("div", Object.assign({}, props, { className: cn("tw-w-[2px] tw-rounded-full tw-bg-[currentColor]", sizeClassMap[size], className) })));
 }
 
 function ProductCard({ children }) {
@@ -38417,12 +38445,55 @@ function QrCodeModal({ qrData, imageUrl, handleClose, handleGoBack, isModalOpen,
     return (jsxs(Modal, { onBackdropClick: handleClose, isOpen: isModalOpen, children: [jsxs(ModalContent, { addGap: true, className: "tw-pb-squid-s", children: [jsx(NavigationBar, { displayBackButton: !!handleGoBack, onBackButtonClick: handleGoBack, subtitle: title, transparent: true }), 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: 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 ? (jsx(SwapErrorIcon, {})) : qrData ? (jsx(QrCode, { matrix: qrData, size: 320, imageUrl: imageUrl })) : (jsx(Loader, { className: "tw-text-grey-300", size: "32", strokeWidth: "3" })) }) }), 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 && (jsx(Button$1, Object.assign({}, ctaButton, { size: "lg", variant: "primary" }))), 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] = useState(ImageLoadingState$1.LOADING);
+    const [fallbackImageLoadingState, setFallbackImageLoadingState] = 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 (jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", containerClassName: "tw-w-fit", tooltipContent: isLoading ? undefined : tooltip === null || tooltip === void 0 ? void 0 : tooltip.tooltipContent, children: 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 && (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 && (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 && (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() })), 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") })] })), jsx(BodyText, { size: "small", className: cn("tw-leading-[13px]", isLoading && "tw-min-w-[135px]"), children: token && !isLoading ? token.symbol : !isLoading && emptyTokenLabel }), !isLoading && (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 (jsx("header", { className: "tw-flex tw-h-squid-xl2 tw-items-center tw-self-stretch tw-px-squid-m tw-py-squid-xxs", children: jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: 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: [jsx(BodyText, { size: "small", className: "tw-text-grey-500", children: direction === "from" ? "Pay" : "Receive" }), displayLabel && !isLoading && (jsxs(Fragment, { children: [jsx(BodyText, { size: "small", className: "tw-text-grey-600", children: ":" }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [showIcon &&
                                         (walletIconUrl ? (jsx(Image$1, { className: "!tw-h-6 !tw-w-6 !tw-rounded-lg", src: walletIconUrl })) : (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: jsx(WalletIcon, { size: "18" }) }))), jsx(BodyText, { size: "small", className: cn(highlightLabel ? "tw-text-royal-500" : "tw-text-grey-300"), children: label }), 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] = useState(amount);
@@ -38450,7 +38521,7 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
         }
         setForcedAmount(prevRef.current.amount);
     }, [amount, chain, token]);
-    return (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: [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 }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
+    return (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: [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 }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: hideChainSelector ? (jsx(TokenOnlyButton, Object.assign({}, assetsButton, { token: token, isLoading: isLoading }))) : (jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading }))) }), 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,
@@ -38987,7 +39058,7 @@ function PropertyListItem(_a) {
     const Text = variant === "small" ? CaptionText : SmallBodyText;
     const isCollapsible = !!collapsibleContent;
     const ContentWrapperTag = isCollapsible ? "button" : "div";
-    return (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: jsxs(ContentWrapperTag, { onClick: isCollapsible ? handleToggleCollapsed : undefined, className: "tw-w-full tw-rounded-squid-xs", children: [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: [jsx("div", { className: cn("tw-w-6 tw-text-grey-500", iconClassName), children: icon }), jsxs(Text, { className: cn("tw-flex tw-min-w-fit tw-flex-1 tw-gap-squid-xxs tw-text-grey-500", labelClassName), children: [jsx(TextSkeleton, { isLoading: isLoading, showGradient: false, children: label }), !!tooltip && (jsx(Tooltip, Object.assign({}, tooltip, { children: jsx(HelpIcon, { className: "tw-cursor-help tw-text-grey-600 hover:tw-text-grey-500" }) })))] }), jsx(Text, { truncate: variant === "small" || undefined, className: cn("tw-flex tw-text-grey-300", detailClassName), children: jsx(TextSkeleton, { isLoading: isLoading, showGradient: false, children: detail }) }), isCollapsible && (jsx(ChevronLargeRightIcon, { className: cn("tw-text-grey-600 tw-duration-generic", !isCollapsed && "tw-rotate-90"), size: "16" }))] }), isCollapsible && (jsx(Collapse, { collapsed: isCollapsed, children: collapsibleContent }))] }) })));
+    return (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: jsxs(ContentWrapperTag, { onClick: isCollapsible ? handleToggleCollapsed : undefined, className: "tw-w-full tw-rounded-squid-xs", children: [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: [jsx("div", { className: cn("tw-w-6 tw-text-grey-500", iconClassName), children: icon }), jsxs(Text, { className: cn("tw-flex tw-min-w-fit tw-flex-1 tw-gap-squid-xxs tw-text-grey-500", labelClassName), children: [jsx(TextSkeleton, { isLoading: isLoading, showGradient: false, children: label }), !!tooltip && (jsx(Tooltip, Object.assign({}, tooltip, { children: jsx(HelpIcon, { className: "tw-cursor-help tw-text-grey-600 hover:tw-text-grey-500" }) })))] }), jsx(Text, { truncate: variant === "small" || undefined, className: cn("tw-flex tw-text-grey-300", detailClassName), children: jsx(TextSkeleton, { isLoading: isLoading, showGradient: false, children: detail }) }), isCollapsible && (jsx(ChevronLargeRightIcon, { className: cn("tw-text-grey-600 tw-duration-generic", !isCollapsed && "tw-rotate-90"), size: "16" }))] }), isCollapsible && (jsx(Collapse, { collapsed: isCollapsed, children: collapsibleContent }))] }) })));
 }
 
 function RouteStep({ imageUrl, descriptionBlocks, subtitle, showStepSeparator = false, }) {
@@ -39172,10 +39243,10 @@ function TokenGroups({ groups, className, onGroupChildClick, variant = "large",
 }
 
 function ActionLayout({ lineCap = jsx(Timeline.CapTop, {}), status = "executed", showTimeline = true, showBody = true, nextStatus, statusIcon, description, title, icon, children, }) {
-    return (jsxs(ActionWrapper, { status: status, children: [jsx(ActionLineOutRow, { status: nextStatus }), jsx(ActionStatusRow, { status: status, icon: statusIcon, children: description }), title && (jsxs(Fragment, { children: [jsx(ActionRow, { children: jsxs(Timeline, { className: cn("tw-h-squid-xs", statusTextClassMap[status]), children: [jsx(Timeline.CapTop, {}), jsx(Timeline.Straight, {}), jsx(Timeline.CapBottom, {})] }) }), jsxs(ActionRow, { children: [jsx("div", { className: "tw-flex tw-items-center tw-justify-center", children: icon }), 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 })] })] })), jsxs(ActionRow, { children: [jsxs(Timeline, { className: showTimeline ? statusTextClassMap[status] : "!tw-text-[transparent]", children: [lineCap, jsx(Timeline.Straight, {})] }), 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 (jsxs(ActionWrapper, { status: status, children: [jsx(ActionLineOutRow, { status: nextStatus }), jsx(ActionStatusRow, { status: status, icon: statusIcon, children: jsx(BodyText, { size: "small", tight: true, className: "tw-block tw-w-full tw-font-medium tw-text-grey-300", children: description }) }), title && (jsxs(Fragment, { children: [jsx(ActionRow, { children: jsxs(Timeline, { className: cn("tw-h-squid-xs", statusTextClassMap[status]), children: [jsx(Timeline.CapTop, {}), jsx(Timeline.Straight, {}), jsx(Timeline.CapBottom, {})] }) }), jsxs(ActionRow, { children: [jsx("div", { className: "tw-flex tw-items-center tw-justify-center", children: icon }), 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 })] })] })), jsxs(ActionRow, { children: [jsxs(Timeline, { className: showTimeline ? statusTextClassMap[status] : "!tw-text-[transparent]", children: [lineCap, jsx(Timeline.Straight, {})] }), 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 (jsxs(CaptionText, { className: "tw-flex tw-items-center tw-gap-squid-xs", children: [timestamp && jsx(Timestamp, { time: timestamp }), timestamp && hash && jsx(PipeSeparator, { className: "tw-text-grey-700" }), hash && jsx(HashLink, { hash: hash, url: url, showTx: true })] }));
+    return (jsxs(CaptionText, { className: "tw-flex tw-items-center tw-gap-squid-xs", children: [timestamp && jsx(Timestamp, { time: timestamp }), timestamp && hash && (jsx(PipeSeparator, { size: "small", className: "tw-text-grey-700" })), hash && (jsx(HashLink, { size: "small", hash: hash, url: url, formattedHash: formatHash(hash), showTx: true, showCopyButton: true }))] }));
 }
 function renderStatusIcon(status, defaultIcon) {
     switch (status) {
@@ -39194,7 +39265,7 @@ function renderStatusIcon(status, defaultIcon) {
     }
 }
 const ActionLineOutRow = ({ status }) => (jsx(ActionRow, { children: jsxs(Timeline, { className: cn("tw-h-squid-xs", status ? statusTextClassMap[status] : "!tw-text-[transparent]"), children: [jsx(Timeline.Straight, {}), jsx(Timeline.CapBottom, {})] }) }));
-const ActionStatusRow = ({ children, status, icon, }) => (jsxs(ActionRow, { children: [jsx("div", { className: "tw-flex tw-items-center tw-justify-center", children: renderStatusIcon(status, icon) }), jsx("div", { className: "tw-flex tw-items-center", children: jsx(BodyText, { size: "small", tight: true, className: "tw-block tw-w-full tw-text-grey-300", children: children }) })] }));
+const ActionStatusRow = ({ children, status, icon, }) => (jsxs(ActionRow, { children: [jsx("div", { className: "tw-flex tw-items-center tw-justify-center", children: renderStatusIcon(status, icon) }), jsx("div", { className: "tw-flex tw-items-center", children: 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 (jsx("div", Object.assign({}, props, { className: cn("tw-grid tw-grid-cols-[40px,1fr,60px] tw-gap-squid-xs tw-pl-squid-m", className) })));
@@ -39218,15 +39289,13 @@ function FeesAction({ status, nextStatus, showTimeline = false, total, lines, })
     return (jsxs(Fragment, { children: [jsx(FeesTotal, { status: status, nextStatus: nextStatus, total: total, showTimeline: lines !== undefined || showTimeline }), lines && (jsx(FeesLines, { status: status, lines: lines, showTimeline: showTimeline }))] }));
 }
 function FeesTotal({ status, nextStatus, total, showTimeline, collapsed, }) {
-    return (jsxs(ActionWrapper, { status: status, children: [jsx(ActionLineOutRow, { status: nextStatus }), jsx(ActionStatusRow, { status: status, icon: jsx(TagIconFilled, {}), children: jsx(FeesRow, Object.assign({ collapsed: collapsed }, total)) }), jsx(ActionRow, { children: jsxs(Timeline, { className: cn("tw-h-squid-xs", showTimeline ? statusTextClassMap[status] : "tw-text-transparent"), children: [jsx(Timeline.CapTop, {}), jsx(Timeline.Straight, {})] }) })] }));
+    return (jsxs(ActionWrapper, { status: status, children: [jsx(ActionLineOutRow, { status: nextStatus }), jsx(ActionStatusRow, { status: status, icon: jsx(TagIconFilled, {}), children: jsx(FeesRow, Object.assign({ className: "tw-text-grey-300", collapsed: collapsed }, total)) }), jsx(ActionRow, { children: jsxs(Timeline, { className: cn("tw-h-squid-xs", showTimeline ? statusTextClassMap[status] : "tw-text-transparent"), children: [jsx(Timeline.CapTop, {}), jsx(Timeline.Straight, {})] }) })] }));
 }
-function FeesLines({ status, lines, showTimeline = false, }) {
-    return (jsxs(ActionWrapper, { status: status, children: [lines && (jsx("div", { children: lines.map((line, index) => (jsxs(Fragment, { children: [index > 0 && (jsx(ActionRow, { children: jsxs(Timeline, { className: cn("tw-h-squid-xs", statusTextClassMap[status]), children: [jsx(Timeline.CapTop, {}), jsx(Timeline.Straight, {})] }) })), jsxs(ActionRow, { children: [jsxs(Timeline, { className: statusTextClassMap[status], children: [jsx(Timeline.Straight, {}), jsx(Timeline.ArrowRight, {})] }), jsx("div", { className: "tw-relative tw-top-[2px] tw-flex tw-items-end", children: jsx(FeesRow, Object.assign({}, line)) })] })] }, index))) })), jsx(ActionRow, { children: jsxs(Timeline, { className: cn("tw-h-squid-xs", showTimeline
-                        ? statusTextClassMap[status]
-                        : "!tw-text-[transparent]"), children: [jsx(Timeline.CapTop, {}), jsx(Timeline.Straight, {})] }) })] }));
+function FeesLines({ status, lines }) {
+    return (jsx(ActionWrapper, { status: status, children: lines && (jsx("div", { children: lines.map((line, index) => (jsxs(ActionRow, { children: [jsx("div", { className: "tw-flex tw-h-10", children: jsxs(Timeline, { className: statusTextClassMap[status], children: [jsx(Timeline.Straight, {}), jsx(Timeline.ArrowRight, {}), jsx(Timeline.Straight, { className: index < lines.length - 1 ? "visible" : "tw-invisible" })] }) }), jsx("div", { className: "tw-flex tw-items-center", children: jsx(FeesRow, Object.assign({ className: "tw-text-grey-400" }, line)) })] }, index))) })) }));
 }
-function FeesRow({ label, usd, amount, symbol, collapsed = false, }) {
-    return (jsxs("div", { className: "tw-flex tw-w-full tw-gap-squid-xs", children: [jsx(SizeTransition, { disableInitialAnimation: true, children: jsx(BodyText, { size: "small", tight: true, className: cn("tw-block tw-truncate tw-text-grey-300", !collapsed && "tw-w-[100px]"), children: label }) }), jsx("div", { className: "tw-flex tw-items-center", children: jsx(PipeSeparator, { className: "tw-text-grey-700" }) }), jsxs(BodyText, { size: "small", tight: true, className: "tw-flex-grow tw-text-grey-300", children: ["$", usd] }), jsxs(CaptionText, { className: "tw-text-right tw-text-grey-500", children: [amount, " ", symbol] })] }));
+function FeesRow({ label, usd, amount, symbol, collapsed = false, className, }) {
+    return (jsxs("div", { className: cn("tw-flex tw-h-5 tw-w-full tw-items-center tw-gap-squid-xs", className), children: [jsx(SizeTransition, { disableInitialAnimation: true, children: jsx(BodyText, { size: "small", tight: true, className: cn("tw-block tw-truncate", !collapsed && "tw-w-[100px]"), children: label }) }), jsx("div", { className: "tw-flex tw-items-center", children: jsx(PipeSeparator, { size: "large", className: "tw-text-grey-700" }) }), jsxs(BodyText, { size: "small", tight: true, className: "tw-flex-grow tw-text-grey-300", children: ["$", usd] }), jsxs(CaptionText, { className: "tw-text-right tw-text-grey-500", children: [amount, " ", symbol] })] }));
 }
 
 function IncompleteAction({ status, nextStatus, message, buttons, }) {
@@ -39278,7 +39347,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 (jsx(ActionLayout, { description: description, status: status, nextStatus: nextStatus, showTimeline: showTimeline, showBody: showBody, children: (timestamp || hash) && (jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })) }));
+    return (jsx(ActionLayout, { description: description, status: status, nextStatus: nextStatus, showTimeline: showTimeline, showBody: showBody, children: (timestamp !== null && timestamp !== void 0 ? timestamp : hash) && (jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })) }));
 }
 
 function SwapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }) {
@@ -87230,27 +87299,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";
@@ -87258,14 +87339,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.";
@@ -87274,6 +87364,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: {
@@ -87309,7 +87402,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] = useState(true);
     const isFirstRenderRef = useRef(true);
     const { timer, stopTimer, startTimer } = useTimer({
@@ -87333,6 +87426,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
             fromToken,
             toToken,
             isSendTransaction,
+            isBridgeTransaction,
         });
         const headerDescription = getSwapProgressDescriptions({
             swapState,
@@ -87342,12 +87436,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 = useRef(null);
     const handleCollapseRouteSteps = () => { var _a; return (_a = trackTransactionViewRef.current) === null || _a === void 0 ? void 0 : _a.handleToggleRouteSteps(); };
     return (jsxs(Modal, { isOpen: isOpen, onBackdropClick: 
@@ -87367,13 +87462,18 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
                                 height: "100%",
                                 maxHeight: "100%",
                                 width: "auto",
-                            }, autoplay: true, loop: true, src: swapProgressAnimations[swapState] }) }), 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 ? (jsxs(Fragment, { children: [jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsx(SwapSuccessIcon, {}) }), shareSwapDropdownContent ? (jsx(ShareSwapButton, { dropdownContent: shareSwapDropdownContent })) : null] })) : swapState === SwapState.ERROR ? (jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "error" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "warning" })) : isSendTransaction ? (jsx(Image$1, { src: fromToken.logoUrl, rounded: "full", size: "xlarge", shadow: true })) : (jsx(TokenPair, { firstToken: {
+                            }, autoplay: true, loop: true, src: swapProgressAnimations[swapState] }) }), 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 ? (jsxs(Fragment, { children: [jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsx(SwapSuccessIcon, {}) }), shareSwapDropdownContent ? (jsx(ShareSwapButton, { dropdownContent: shareSwapDropdownContent })) : null] })) : swapState === SwapState.ERROR ? (jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "error" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "warning" })) : isSendTransaction || isBridgeTransaction ? (jsx(Image$1, { src: fromToken.logoUrl, rounded: "full", size: "xlarge", shadow: true })) : (jsx(TokenPair, { firstToken: {
                                 bgColor: fromToken.bgColor,
                                 logoURI: fromToken.logoUrl,
                             }, secondToken: {
                                 bgColor: toToken.bgColor,
                                 logoURI: toToken.logoUrl,
-                            } })) }), jsx(TxProgressViewHeader, { title: headerTitle, description: headerDescription }), 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: [jsx(PropertyListItem, { icon: isSendTransaction ? (jsx(ArrowRightUpCircleIcon, {})) : (jsx(ArrowsSwapIcon, {})), label: isSendTransaction ? "Send" : "Swap", detail: isSendTransaction ? (jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount })) : (jsx(Transfer, { from: jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount }), to: jsx(IconLabel, { src: toToken.logoUrl, rounded: "full", children: toAmount }) })) }), jsx(PropertyListItem, { icon: jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: isSendTransaction ? (jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(Image$1, { size: "medium", rounded: "xxs", src: fromChain.logoUrl }), jsx(CaptionText, { children: fromChain.networkName })] })) : (jsx(Transfer, { from: jsxs(Fragment, { children: [jsx(Image$1, { size: "medium", rounded: "xxs", src: fromChain.logoUrl }), jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxs(Fragment, { children: [jsx(Image$1, { size: "medium", rounded: "xxs", src: toChain.logoUrl }), jsx(CaptionText, { children: toChain.networkName })] }) })) }), jsx(PropertyListItem, { icon: jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsx(PropertyListItem, { icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsx(CaptionText, { children: timer })) : (jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => {
+                            } })) }), jsx(TxProgressViewHeader, { title: headerTitle, description: headerDescription }), 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: [jsx(PropertyListItem, { icon: isSendTransaction ? (jsx(ArrowRightUpCircleIcon, {})) : (jsx(ArrowsSwapIcon, {})), label: isSendTransaction
+                                    ? "Send"
+                                    : isBridgeTransaction
+                                        ? "Bridge"
+                                        : "Swap", detail: isSendTransaction ? (jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount })) : (jsx(Transfer, { from: jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount }), to: jsx(IconLabel, { src: toToken.logoUrl, rounded: "full", children: toAmount }) })) }), jsx(PropertyListItem, { icon: jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: isSendTransaction ||
+                                    fromChain.networkName === toChain.networkName ? (jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(Image$1, { size: "medium", rounded: "xxs", src: fromChain.logoUrl }), jsx(CaptionText, { children: fromChain.networkName })] })) : (jsx(Transfer, { from: jsxs(Fragment, { children: [jsx(Image$1, { size: "medium", rounded: "xxs", src: fromChain.logoUrl }), jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxs(Fragment, { children: [jsx(Image$1, { size: "medium", rounded: "xxs", src: toChain.logoUrl }), jsx(CaptionText, { children: toChain.networkName })] }) })) }), jsx(PropertyListItem, { icon: jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsx(PropertyListItem, { icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsx(CaptionText, { children: timer })) : (jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => {
                     stopTimer();
                 }, onTxStart: () => {
                     startTimer();
@@ -87475,20 +87575,27 @@ function TransactionViewLayout(_a) {
     var { isLoading, header, properties, actions, fees } = _a, props = __rest$1(_a, ["isLoading", "header", "properties", "actions", "fees"]);
     const [actionsCollapsed, setActionsCollapsed] = useState(true);
     const [feesCollapsed, setFeesCollapsed] = useState(true);
-    return (jsx("div", Object.assign({ className: "tw-relative tw-divide-y tw-divide-material-light-thin" }, props, { children: isLoading ? (jsxs(Fragment, { children: [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 = useMemo(() => {
+        if (actions)
+            return linkActionTimelineProps(actions, actionsCollapsed);
+        return [];
+    }, [actions, actionsCollapsed]);
+    return (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 ? (jsxs(Fragment, { children: [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%",
-                    } }), jsx(TransactionHeaderLayout, { isLoading: true }), jsx(PropertiesSkeleton, {})] })) : (jsxs(Fragment, { children: [header, properties, " ", actions && (jsx(CollapsibleSection, { collapsed: actionsCollapsed, setCollapsed: setActionsCollapsed, children: linkActionTimelineProps(actions, actionsCollapsed).map((props, i) => (jsx("div", { className: cn(i > 0 && "tw-border-t tw-border-t-material-light-thin"), children: jsx(TransactionAction, Object.assign({}, props)) }, i))) })), fees && (jsxs(CollapsibleSection, { collapsed: feesCollapsed, setCollapsed: setFeesCollapsed, children: [jsx(FeesTotal, Object.assign({ collapsed: feesCollapsed, showTimeline: true }, fees)), jsx(FeesLines, Object.assign({}, fees))] }))] })) })));
-}
-function CollapsibleSection({ children, collapsed, setCollapsed, collapsedHeight = 50, }) {
-    return (jsx("div", { className: cn("tw-group/Collapsible-section tw-relative tw-bg-grey-900", collapsed ? "tw-cursor-pointer" : ""), onClick: () => {
-            if (collapsed)
-                setCollapsed(false);
-        }, children: jsxs("div", { className: cn("tw-relative tw-border-material-light-thin tw-transition-[border-width] tw-duration-200", !collapsed && "tw-border-t-[4px]"), children: [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: jsx(ChevronLargeDownIcon, { className: cn("tw-origin-center tw-text-grey-300 tw-transition-transform tw-duration-200", collapsed && "-tw-rotate-90") }) }), jsx("div", { 
-                    // hover highlight
-                    className: "tw-pointer-events-none tw-absolute tw-left-0 tw-top-0 tw-h-[50px] tw-w-full", children: 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") }) }), jsx(Collapse, { collapsed: collapsed, collapsedHeight: collapsedHeight, children: children })] }) }));
+                    } }), jsx(TransactionHeaderLayout, { isLoading: true }), jsx(PropertiesSkeleton, {})] })) : (jsxs(Fragment, { children: [header, properties, actions && (jsx(CollapsibleSection, { header: jsx("div", { className: "tw-w-full", children: items[0] && jsx(TransactionAction, Object.assign({}, items[0])) }), collapsed: actionsCollapsed, setCollapsed: setActionsCollapsed, children: linkActionTimelineProps(actions, actionsCollapsed)
+                        .slice(1, linkActionTimelineProps.length)
+                        .map((props, i) => (jsx("div", { className: cn(i > 0 && "tw-border-t tw-border-t-material-light-thin"), children: jsx(TransactionAction, Object.assign({}, props)) }, i))) })), fees && (jsx(CollapsibleSection, { header: jsx(FeesTotal, Object.assign({ collapsed: feesCollapsed, showTimeline: true }, fees)), collapsed: feesCollapsed, setCollapsed: setFeesCollapsed, children: jsx(FeesLines, Object.assign({}, fees)) }))] })) })));
+}
+function CollapsibleSection({ header, children, collapsed, setCollapsed, collapsedHeight = 0, }) {
+    return (jsx("div", { className: cn("tw-group/collapsible-section tw-relative tw-bg-grey-900", collapsed ? "tw-cursor-pointer" : ""), children: jsx("div", { className: cn("tw-relative tw-border-material-light-thin tw-transition-[border-width] tw-duration-200", !collapsed && "tw-border-t-[4px]"), children: jsxs("div", { className: "tw-border-t tw-border-t-material-light-thin", children: [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: [jsx("div", { className: "tw-w-full", children: header }), 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") })] }), jsx(Collapse, { collapsed: collapsed, collapsedHeight: collapsedHeight, children: children })] }) }) }));
 }
 function PropertiesSkeleton() {
     return (jsx(PropertiesLayout, { children: Array.from({ length: 5 }, (_, i) => (jsx(PropertyListItem, { variant: "large", isLoading: true, showGradientBg: false }, i))) }));
@@ -87509,16 +87616,20 @@ function InteractionTransactionView({ title = "Interaction", hash, status, url,
     return (jsx(TransactionViewLayout, { isLoading: isLoading, header: jsx(TransactionHeaderLayout, { title: title, status: status, media: 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: jsx(ThumbsUp, { size: "24" }) }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), " "] }) }), properties: jsxs(PropertiesLayout, { children: [jsx(PropertyListItem, { variant: "large", icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(IconLabel, { src: chain.logoURI, children: jsx(BodyText, { size: "small", children: chain.name }) }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(BodyText, { size: "small", children: jsx(HashLink, { hash: address, showCopyButton: true }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsx(BoostBadge, {}), 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 (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: 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 jsx(TransactionViewLayout, { isLoading: isLoading });
-    return (jsx(TransactionViewLayout, { header: jsx(TransactionHeaderLayout, { title: title, status: status, media: jsx(Drip, { direction: "horizontal", from: fromToken, to: toToken }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxs(PropertiesLayout, { children: [jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ArrowRightUpCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Swap ", fromToken.symbol] }), detail: jsx(IconLabel, { src: fromToken.logoURI, rounded: "full", children: jsx(BodyText, { size: "small", children: fromAmount }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Receive ", toToken.symbol] }), detail: jsx(IconLabel, { src: toToken.logoURI, rounded: "full", children: jsx(BodyText, { size: "small", children: toAmount }) }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) }), to: jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(Transfer, { from: jsx(BodyText, { size: "small", children: jsx(HashLink, { hash: fromAddress, showCopyButton: true, formattedHash: formatHash(fromAddress) }) }), to: jsx(BodyText, { size: "small", children: jsx(HashLink, { hash: toAddress, showCopyButton: true, formattedHash: formatHash(toAddress) }) }) }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ArrowsSwapIcon, {}), label: "Exchange rate", detail: jsx(Transfer, { from: jsxs(BodyText, { size: "small", children: ["1 ", fromToken.symbol] }), to: jsxs(BodyText, { size: "small", children: [exchangeRate, " ", toToken.symbol] }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsx(BoostBadge, {}), jsx(BodyText, { size: "small", children: timeToComplete })] }) })] }), actions: actions, fees: fees }));
+    return (jsx(TransactionViewLayout, { header: jsx(TransactionHeaderLayout, { title: title, status: status, media: jsx(Drip, { direction: "horizontal", from: fromToken, to: toToken }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxs(PropertiesLayout, { children: [jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ArrowRightUpCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Swap ", fromToken.symbol] }), detail: jsxs("span", { className: "tw-inline-flex tw-inline-flex tw-gap-0.5", children: [jsx(IconLabel, { src: fromToken.logoURI, rounded: "full", children: jsx(BodyText, { size: "small", children: fromAmount }) }), fromLink && jsx(LinkButton, { href: fromLink })] }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Receive ", toToken.symbol] }), detail: jsxs("span", { className: "tw-inline-flex tw-items-center tw-gap-0.5", children: [jsx(IconLabel, { src: toToken.logoURI, rounded: "full", children: jsx(BodyText, { size: "small", children: toAmount }) }), toLink && jsx(LinkButton, { href: toLink })] }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) }), to: jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(Transfer, { from: jsx(BodyText, { size: "small", children: jsx(HashLink, { hash: fromAddress, showCopyButton: true, formattedHash: formatHash(fromAddress) }) }), to: jsx(BodyText, { size: "small", children: jsx(HashLink, { hash: toAddress, showCopyButton: true, formattedHash: formatHash(toAddress) }) }) }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ArrowsSwapIcon, {}), label: "Exchange rate", detail: jsx(Transfer, { from: jsxs(BodyText, { size: "small", children: ["1 ", fromToken.symbol] }), to: jsxs(BodyText, { size: "small", children: [exchangeRate, " ", toToken.symbol] }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsx(BoostBadge, {}), 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 jsx(TransactionViewLayout, { isLoading: isLoading });
-    return (jsx(TransactionViewLayout, { isLoading: isLoading, header: jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxs("div", { className: "tw-relative", children: [jsx(Image$1, { src: fromChain.logoURI, size: "xlarge", rounded: "full" }), jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-rounded-md tw-border tw-border-white", children: jsx(Image$1, { src: toChain.logoURI, size: "medium" }) })] }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) }), " "] }) }), properties: jsxs(PropertiesLayout, { children: [jsx(PropertyListItem, { variant: "large", icon: jsx(SquareArrowTopLeftIcon, { size: "20" }), label: jsxs(BodyText, { size: "small", children: ["Bridge ", token.symbol] }), detail: jsx(IconLabel, { src: token.logoURI, rounded: "full", children: jsx(BodyText, { size: "small", children: amount }) }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) }), to: jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(BodyText, { size: "small", children: jsx(HashLink, { hash: address, showCopyButton: true, formattedHash: address }) }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsx(BoostBadge, {}), jsx(BodyText, { size: "small", children: timeToComplete })] }) })] }), actions: actions, fees: fees }));
+    return (jsx(TransactionViewLayout, { isLoading: isLoading, header: jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxs("div", { className: "tw-relative", children: [jsx(Image$1, { src: fromChain.logoURI, size: "xlarge", rounded: "full" }), jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-rounded-md tw-border tw-border-white", children: jsx(Image$1, { src: toChain.logoURI, size: "medium" }) })] }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxs(PropertiesLayout, { children: [jsx(PropertyListItem, { variant: "large", icon: jsx(ArrowRightUpCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Bridge ", fromToken.symbol] }), detail: jsxs("span", { className: "tw-inline-flex tw-inline-flex tw-gap-0.5", children: [jsx(IconLabel, { src: fromToken.logoURI, rounded: "full", children: jsx(BodyText, { size: "small", children: fromAmount }) }), fromLink && jsx(LinkButton, { href: fromLink })] }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Receive ", toToken.symbol] }), detail: jsxs("span", { className: "tw-inline-flex tw-items-center tw-gap-0.5", children: [jsx(IconLabel, { src: toToken.logoURI, rounded: "full", children: jsx(BodyText, { size: "small", children: toAmount }) }), toLink && jsx(LinkButton, { href: toLink })] }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) }), to: jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(BodyText, { size: "small", children: jsx(HashLink, { hash: address, showCopyButton: true, formattedHash: address }) }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsx(BoostBadge, {}), jsx(BodyText, { size: "small", children: timeToComplete })] }) })] }), actions: actions, fees: fees }));
 }
 
 function TransactionView({ type, isLoading, data, }) {
@@ -87863,4 +87974,4 @@ function ThemeProvider(_a) {
     return (jsx("div", Object.assign({ id: "squid-style-container" }, props, { style: Object.assign(Object.assign({}, props.style), parsedStyle), "data-squid-theme-type": themeType, className: cn("tw-group tw-relative tw-flex tw-font-squid-main tw-h-d-screen mobile-lg:tw-h-auto", "squid-style-container", props.className), children: children })));
 }
 
-export { ANIMATION_DURATIONS, AccountListItem, AccountsButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AddressHeader, AnimateNumber, AnimationCard, AnimationWrapper, Announcement, AppContainer, ApplePayIcon, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowExpandIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleFilledIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AtomIcon, BackpackIcon, BadgeImage, BankIcon, BellAlarmIcon, BlockSkeleton, BodyText, BoostBadge, BorderedContainer, Breadcrumb, BridgeAction, BrokenHeartIcon, BubblesIcon, Button$1 as Button, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, Card, CatSquareIcon, CelebrateIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, CircleCheckIcon, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy2Icon, CopyOutlinedIcon, CreditCardIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, DepositAddressView, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, Drip, DropdownMenu, DropdownMenuItem, DropdownMenuTitle, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FarcasterIcon, FavouriteFilterIcon, FeeButton, FeesAction, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostCircleIcon, GhostIcon, GithubIcon, GooglePayIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, HomeIcon, IconButton, IconLabel, Image$1 as Image, ImageGroup, ImageIcon, ImageSparkle, ImageStack, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionTransactionView, Join, LaptopIcon, LargeNumericInput, LimitIcon, LinkIcon, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, LoadingText, MEDIA_QUERIES, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, ModalTitle, MoneyBagIcon, MoonIcon, NavigationBar, NewsIcon, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PluginIcon, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, PropertiesLayout, PropertyListItem, PunkIcon, QrCode, QrCodeIcon, QrCodeModal, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, SettingsGearIcon, SettingsItem, SettingsSlider, SettingsSliderIcon, ShoppingBagIcon, SizeTransition, SmileFilledIcon, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, StakeAction, StarLinesIcon, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapErrorIcon, SwapIcon, SwapInputsIcon, SwapProgressView, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, Tab, Tabs, TagIcon, TagIconFilled, TelegramIcon, TextSkeleton, ThemePreference, ThemeProvider, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, TokenGroups, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeaderLayout, TransactionItem, TransactionItemSkeleton, TransactionNotFoundView, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TranslateIcon, TriangleExclamation, TxProgressViewHeader, UnsupportedPairNotice, UsdAmount, UserInputType, WalletFilledIcon, WalletIcon, WalletLink, WrapAction, XSocialIcon, adjustColorForContrast, baseTailwindConfig, blendColors, buttonRoundedClassMap, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing$1 as spacing, statusTextClassMap, themeKeysToCssVariables, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useNumericInput, useOnResize, useRect, useTimer, useUserTheme, useVersion };
+export { ANIMATION_DURATIONS, AccountListItem, AccountsButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AddressHeader, AnimateNumber, AnimationCard, AnimationWrapper, Announcement, AppContainer, ApplePayIcon, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowExpandIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleFilledIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AtomIcon, BackpackIcon, BadgeImage, BankIcon, BellAlarmIcon, BlockSkeleton, BodyText, BoostBadge, BorderedContainer, Breadcrumb, BridgeAction, BrokenHeartIcon, BubblesIcon, Button$1 as Button, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, Card, CatSquareIcon, CelebrateIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, CircleCheckIcon, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy2Icon, CopyOutlinedIcon, CreditCardIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, DepositAddressView, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, Drip, DropdownMenu, DropdownMenuItem, DropdownMenuTitle, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FarcasterIcon, FavouriteFilterIcon, FeeButton, FeesAction, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostCircleIcon, GhostIcon, GithubIcon, GooglePayIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, HomeIcon, IconButton, IconLabel, Image$1 as Image, ImageGroup, ImageIcon, ImageSparkle, ImageStack, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionTransactionView, Join, LaptopIcon, LargeNumericInput, LimitIcon, LinkIcon, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, LoadingText, MEDIA_QUERIES, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, ModalTitle, MoneyBagIcon, MoonIcon, NavigationBar, NewsIcon, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PluginIcon, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, PropertiesLayout, PropertyListItem, PunkIcon, QrCode, QrCodeIcon, QrCodeModal, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, SettingsGearIcon, SettingsItem, SettingsSlider, SettingsSliderIcon, ShoppingBagIcon, SizeTransition, SmileFilledIcon, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquareArrowTopRightIcon, SquidLogo, StakeAction, StarLinesIcon, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapErrorIcon, SwapIcon, SwapInputsIcon, SwapProgressView, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, Tab, Tabs, TagIcon, TagIconFilled, TelegramIcon, TextSkeleton, ThemePreference, ThemeProvider, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, TokenGroups, TokenOnlyButton, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeaderLayout, TransactionItem, TransactionItemSkeleton, TransactionNotFoundView, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TranslateIcon, TriangleExclamation, TxProgressViewHeader, UnsupportedPairNotice, UsdAmount, UserInputType, WalletFilledIcon, WalletIcon, WalletLink, WrapAction, XSocialIcon, adjustColorForContrast, baseTailwindConfig, blendColors, buttonRoundedClassMap, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing$1 as spacing, statusTextClassMap, themeKeysToCssVariables, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useNumericInput, useOnResize, useRect, useTimer, useUserTheme, useVersion };

package/dist/esm/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/esm/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/esm/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 {};