@0xsquid/ui 3.1.0 → 3.2.0

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

@@ -15,11 +15,11 @@ export type TransactionViewProps = {
     [Type in TransactionType]: {
         type: Type;
         isLoading?: false;
-        data: ComponentProps<TransactionViewComponents[Type]>;
+        data: Omit<Partial<ComponentProps<TransactionViewComponents[Type]>>, "isLoading">;
     } | {
         type: Type;
         isLoading: true;
-        data?: Partial<ComponentProps<TransactionViewComponents[Type]>>;
+        data?: Omit<Partial<ComponentProps<TransactionViewComponents[Type]>>, "isLoading">;
     };
 }[TransactionType];
 export declare function TransactionView({ type, isLoading, data, }: TransactionViewProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -16,3 +16,4 @@ export declare const NeedsGas: Story;
 export declare const PartialSuccess: Story;
 export declare const Progress: Story;
 export declare const SendTransaction: Story;
+export declare const BridgeTransaction: Story;

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

@@ -34,8 +34,9 @@ export declare const Swap: {
             };
             fromAddress: string;
             toAddress: string;
+            fromLink: string;
+            toLink: string;
             exchangeRate: string;
-            boosted: boolean;
             timeToComplete: string;
             actions: ({
                 type: "success";
@@ -214,7 +215,6 @@ export declare const BuyNFT: {
             };
             fromAddress: string;
             toAddress: string;
-            boosted: boolean;
             timeToComplete: string;
             actions: ({
                 type: "success";
@@ -349,7 +349,6 @@ export declare const Interaction: {
             hash: string;
             status: string;
             url: string;
-            boosted: boolean;
             chain: {
                 logoURI: string;
                 name: string;
@@ -490,12 +489,20 @@ export declare const Bridge: {
             hash: string;
             url: string;
             status: string;
-            amount: string;
-            token: {
+            fromAmount: string;
+            toAmount: string;
+            toToken: {
+                logoURI: string;
+                bgColor: string;
+                symbol: string;
+            };
+            fromToken: {
                 logoURI: string;
                 bgColor: string;
                 symbol: string;
             };
+            fromLink: string;
+            toLink: string;
             fromChain: {
                 logoURI: string;
                 name: string;
@@ -507,7 +514,6 @@ export declare const Bridge: {
                 bgColor: string;
             };
             address: string;
-            boosted: boolean;
             timeToComplete: string;
             actions: ({
                 type: "success";

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: () => {
@@ -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" }) }));
 }
@@ -4593,10 +4596,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 +38227,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 }) {
@@ -38987,7 +39007,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 +39192,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 +39214,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 +39238,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 +39296,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 +87248,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 +87288,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 +87313,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 +87351,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 +87375,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
             fromToken,
             toToken,
             isSendTransaction,
+            isBridgeTransaction,
         });
         const headerDescription = getSwapProgressDescriptions({
             swapState,
@@ -87342,12 +87385,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 +87411,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 +87524,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 +87565,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 +87923,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, 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/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 {};

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

@@ -49,6 +49,11 @@ export declare function ChevronGrabberVerticalIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function SquareArrowTopRightIcon({ className, size, strokeWidth, }: {
+    className?: string;
+    size?: string;
+    strokeWidth?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function SquareArrowTopRight2Icon({ className, size, strokeWidth, }: {
     className?: string;
     size?: string;

package/dist/esm/types/components/icons/Timeline.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from "react";
+import { type ComponentProps } from "react";
 export declare function Timeline({ className, ...props }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export declare namespace Timeline {
     var ArrowDown: (props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/layout/AnimationWrapper.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type LottieComponentProps } from "lottie-react";
-interface Props extends Omit<LottieComponentProps, "src"> {
+interface Props extends Omit<LottieComponentProps, "src" | "animationData"> {
     style?: React.CSSProperties;
     autoplay?: boolean;
     loop?: boolean;

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

@@ -7,7 +7,7 @@ interface HashLinkProps {
     url?: string;
     className?: string;
     formattedHash?: string;
-    copyIconSize?: string;
+    size?: "default" | "small";
 }
-export declare function HashLink({ showTx, hash, showCopyButton, url, children, className, formattedHash, copyIconSize, }: HashLinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function HashLink({ showTx, hash, showCopyButton, url, children, className, formattedHash, size, }: HashLinkProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/layout/PipeSeparator.d.ts

@@ -1,2 +1,6 @@
-import { ComponentProps } from "react";
-export declare function PipeSeparator(props: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+import { type ComponentProps } from "react";
+interface Props extends ComponentProps<"div"> {
+    size?: "default" | "small" | "large";
+}
+export declare function PipeSeparator({ className, size, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -18,12 +18,13 @@ interface FeesLinesProps {
     lines?: FeesRowProps[];
     showTimeline?: boolean;
 }
-export declare function FeesLines({ status, lines, showTimeline, }: FeesLinesProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeesLines({ status, lines }: FeesLinesProps): import("react/jsx-runtime").JSX.Element;
 interface FeesRowProps {
     label: string;
     amount: number | string;
     symbol: string;
     usd: number | string;
     collapsed?: boolean;
+    className?: string;
 }
 export {};

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

@@ -1,4 +1,4 @@
-import { BaseActionProps } from "./BaseActionProps";
+import { type BaseActionProps } from "./BaseActionProps";
 interface SuccessActionProps extends BaseActionProps {
     description?: string;
     timestamp?: number;