@0xsquid/ui 2.6.1 → 2.6.3

package/dist/cjs/index.js

@@ -3760,8 +3760,8 @@ function ArrowUpIcon() {
 function ArrowCornerDownRightIcon({ size = "24", className, }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4 4C4.55228 4 5 4.44772 5 5V13C5 13.5523 5.44772 14 6 14H17.5858L15.2929 11.7071C14.9024 11.3166 14.9024 10.6834 15.2929 10.2929C15.6834 9.90237 16.3166 9.90237 16.7071 10.2929L20.7071 14.2929C21.0976 14.6834 21.0976 15.3166 20.7071 15.7071L16.7071 19.7071C16.3166 20.0976 15.6834 20.0976 15.2929 19.7071C14.9024 19.3166 14.9024 18.6834 15.2929 18.2929L17.5858 16H6C4.34315 16 3 14.6569 3 13V5C3 4.44772 3.44772 4 4 4Z", fill: "currentColor" }) }));
 }
-function ChevronDownSmallIcon({ size = "16", className, }) {
-    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M5.33325 6.66666L7.52851 8.86192C7.78886 9.12227 8.21097 9.12227 8.47132 8.86192L10.6666 6.66666", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+function ChevronDownSmallIcon({ size = "16", strokeWidth = "2", className, }) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M5.33325 6.66666L7.52851 8.86192C7.78886 9.12227 8.21097 9.12227 8.47132 8.86192L10.6666 6.66666", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
 function ArrowDownIcon({ size = "24", className, }) {
     return (jsxRuntime.jsx("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 25", fill: "none", children: jsxRuntime.jsx("path", { d: "M18 14.5L12 20.5L6 14.5M12 19.5V4.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
@@ -3869,11 +3869,6 @@ function PowerIcon({ size = "24", className, }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M7.02331 4.5C4.59826 6.11238 3 8.86954 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 8.86954 19.4017 6.11238 16.9767 4.5M12 2V7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
 
-function Copy(_a) {
-    var { size = "24", strokeWidth = "2" } = _a, props = __rest$1(_a, ["size", "strokeWidth"]);
-    return (jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: size, height: size, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", d: "M9 9V5.25A2.25 2.25 0 0111.25 3h7.5A2.25 2.25 0 0121 5.25v7.5A2.25 2.25 0 0118.75 15H15m-2.25-6h-7.5A2.25 2.25 0 003 11.25v7.5A2.25 2.25 0 005.25 21h7.5A2.25 2.25 0 0015 18.75v-7.5A2.25 2.25 0 0012.75 9z" }) })));
-}
-
 function CrossAnimatedIcon({ size = 24, isOpen, transitionDuration, className, }) {
     const rotateDegrees = isOpen ? 45 : 0;
     return (jsxRuntime.jsxs("div", { style: {
@@ -3998,11 +3993,11 @@ function PhoneIcon({ size = "24", className, }) {
 function LaptopIcon({ size = "24", className, }) {
     return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 25 24", fill: "none", className: className, children: [jsxRuntime.jsx("path", { d: "M4.5 6C4.5 4.89543 5.39543 4 6.5 4H18.5C19.6046 4 20.5 4.89543 20.5 6V15C20.5 15.5523 20.0523 16 19.5 16H5.5C4.94772 16 4.5 15.5523 4.5 15V6Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "square", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M2.5 16H22.5V18C22.5 19.1046 21.6046 20 20.5 20H4.5C3.39543 20 2.5 19.1046 2.5 18V16Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "square", strokeLinejoin: "round" })] }));
 }
-function CopyOutlinedIcon({ size = "24", className, }) {
-    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M9 9V5.25C9 4.00736 10.0074 3 11.25 3H18.75C19.9926 3 21 4.00736 21 5.25V12.75C21 13.9926 19.9926 15 18.75 15H15M12.75 9H5.25C4.00736 9 3 10.0074 3 11.25V18.75C3 19.9926 4.00736 21 5.25 21H12.75C13.9926 21 15 19.9926 15 18.75V11.25C15 10.0074 13.9926 9 12.75 9Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+function CopyOutlinedIcon({ size = "24", strokeWidth = "2", className, }) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M9 9V5.25C9 4.00736 10.0074 3 11.25 3H18.75C19.9926 3 21 4.00736 21 5.25V12.75C21 13.9926 19.9926 15 18.75 15H15M12.75 9H5.25C4.00736 9 3 10.0074 3 11.25V18.75C3 19.9926 4.00736 21 5.25 21H12.75C13.9926 21 15 19.9926 15 18.75V11.25C15 10.0074 13.9926 9 12.75 9Z", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
-function CopyIcon({ size = "20", className, }) {
-    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 21 20", fill: "none", className: className, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.16663 6.66666V3.54166C7.16663 2.50612 8.00609 1.66666 9.04163 1.66666H16.9583C17.9938 1.66666 18.8333 2.50612 18.8333 3.54166V11.4583C18.8333 12.4939 17.9938 13.3333 16.9583 13.3333H13.8333V16.4583C13.8333 17.4939 12.9938 18.3333 11.9583 18.3333H4.04163C3.00609 18.3333 2.16663 17.4939 2.16663 16.4583V8.54166C2.16663 7.50612 3.00609 6.66666 4.04163 6.66666H7.16663ZM9.04163 13.3333C8.00609 13.3333 7.16663 12.4939 7.16663 11.4583V8.33332H4.04163C3.92657 8.33332 3.83329 8.4266 3.83329 8.54166V16.4583C3.83329 16.5734 3.92657 16.6667 4.04163 16.6667H11.9583C12.0734 16.6667 12.1666 16.5734 12.1666 16.4583V13.3333H9.04163Z", fill: "currentColor" }) }));
+function Copy2Icon({ size = "20", className, }) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.3327 4.37496C18.3327 2.87919 17.1201 1.66663 15.6243 1.66663H9.37435C7.87858 1.66663 6.66602 2.87919 6.66602 4.37496V6.66663H4.37435C2.87858 6.66663 1.66602 7.87919 1.66602 9.37496V15.625C1.66602 17.1207 2.87858 18.3333 4.37435 18.3333H10.6243C12.1201 18.3333 13.3327 17.1207 13.3327 15.625V13.3333H15.6243C17.1201 13.3333 18.3327 12.1207 18.3327 10.625V4.37496ZM13.3327 11.6666H15.6243C16.1996 11.6666 16.666 11.2003 16.666 10.625V4.37496C16.666 3.79966 16.1996 3.33329 15.6243 3.33329H9.37435C8.79905 3.33329 8.33268 3.79966 8.33268 4.37496V6.66663H10.6243C12.1201 6.66663 13.3327 7.87919 13.3327 9.37496V11.6666Z", fill: "currentColor" }) }));
 }
 function FileDownloadIcon({ size = "20", className, }) {
     return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 21 20", fill: "none", className: className, children: [jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.33337 1.66666H10.5V5.83332C10.5 7.21404 11.6193 8.33332 13 8.33332H17.1667V15.8333C17.1667 17.214 16.0474 18.3333 14.6667 18.3333H6.33337C4.95266 18.3333 3.83337 17.214 3.83337 15.8333V4.16666C3.83337 2.78594 4.95266 1.66666 6.33337 1.66666ZM13.1726 14.3392L11.0893 16.4226C10.7639 16.748 10.2362 16.748 9.91079 16.4226L7.82745 14.3392C7.50201 14.0138 7.50201 13.4862 7.82745 13.1607C8.15289 12.8353 8.68053 12.8353 9.00596 13.1607L9.66671 13.8215V10.8333C9.66671 10.3731 10.0398 9.99999 10.5 9.99999C10.9603 9.99999 11.3334 10.3731 11.3334 10.8333V13.8215L11.9941 13.1607C12.3196 12.8353 12.8472 12.8353 13.1726 13.1607C13.4981 13.4862 13.4981 14.0138 13.1726 14.3392Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M12.1667 2.15481L16.6786 6.66666H13C12.5398 6.66666 12.1667 6.29356 12.1667 5.83332V2.15481Z", fill: "currentColor" })] }));
@@ -4142,7 +4137,7 @@ function SearchIcon({ className, size = "24", }) {
     return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
 }
 
-function XSocial({ className, size = "24", }) {
+function XSocialIcon({ className, size = "24", }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M17.4033 3.5H20.2852L13.989 10.701L21.396 20.5H15.5964L11.054 14.557L5.85637 20.5H2.97269L9.70709 12.7977L2.60156 3.5H8.54839L12.6544 8.93215L17.4033 3.5ZM16.3918 18.7738H17.9887L7.68067 5.13549H5.96702L16.3918 18.7738Z", fill: "currentColor" }) }));
 }
 function GithubIcon({ size = "24", className, }) {
@@ -4154,6 +4149,12 @@ function DiscordIcon({ size = "24", className, }) {
 function MirrorIcon({ size = "24", className, }) {
     return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M6 9C6 5.68629 8.68629 3 12 3C15.3137 3 18 5.68629 18 9V20C18 20.5523 17.5523 21 17 21H7C6.44771 21 6 20.5523 6 20V9Z", stroke: "currentColor", strokeWidth: "2" }) }));
 }
+function FarcasterIcon({ size = "20", className, }) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.8884 2H4.77734V4.28529L15.8884 4.28571V2ZM18.1115 16.2853V16.8567H13.667V16.2853C13.667 15.9696 13.9156 15.7139 14.2225 15.7139L14.2221 11.0971C14.2221 8.88795 12.481 7.0971 10.3332 7.0971C8.20241 7.0971 6.47187 8.85978 6.44466 11.0448V15.7139C6.75155 15.7139 7.00011 15.9696 7.00011 16.2853V16.8567H2.55566V16.2853C2.55566 15.9696 2.80428 15.7139 3.11122 15.7139L3.11133 6.57185H2.55556L2 4.28613H18.6667L18.1111 6.57185H17.556V15.7139C17.8629 15.7139 18.1115 15.9696 18.1115 16.2853ZM18.6669 17.4289C18.6669 17.1132 18.4185 16.8567 18.1115 16.8567H13.667C13.36 16.8567 13.1113 17.1132 13.1113 17.4289V18.0003H18.6669V17.4289ZM7.00011 16.8567C7.30706 16.8567 7.55555 17.1132 7.55555 17.4289V18.0003H2V17.4289C2 17.1132 2.24871 16.8567 2.55566 16.8567H7.00011Z", fill: "currentColor" }) }));
+}
+function TelegramIcon({ className, size = "20", }) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M1.31748 8.8995C6.46345 6.66525 9.89405 5.19215 11.6094 4.48047C16.5127 2.44826 17.5302 2.09531 18.1949 2.08349C18.341 2.08102 18.6664 2.11703 18.8788 2.28828C19.0553 2.43259 19.105 2.62776 19.1298 2.76465C19.1518 2.90154 19.1822 3.21354 19.1574 3.45708C18.8926 6.2389 17.7427 12.9895 17.158 16.1053C16.9126 17.4237 16.4244 17.8657 15.9528 17.9089C14.927 18.0029 14.1492 17.2337 13.1564 16.5852C11.6038 15.5701 10.7269 14.9384 9.21842 13.948C7.47552 12.8034 8.60617 12.1742 9.59896 11.1461C9.85819 10.877 14.3754 6.78262 14.4608 6.41126C14.4719 6.3648 14.483 6.19162 14.3782 6.10036C14.2761 6.00883 14.1244 6.04016 14.0141 6.0649C13.8569 6.10009 11.3776 7.73509 6.56812 10.9696C5.8649 11.4518 5.22787 11.6868 4.65426 11.6744C4.02549 11.661 2.81216 11.3193 1.91037 11.0274C0.807272 10.6692 -0.0724949 10.4798 0.0047222 9.87149C0.0433308 9.55482 0.481884 9.23074 1.31748 8.8995Z", fill: "currentColor" }) }));
+}
 
 function SortIcon() {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M3 5H21M9 19H15M6 12H18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
@@ -4363,9 +4364,9 @@ function UsdAmount({ usdAmount }) {
 }
 
 function HashLink({ showTx = false, hash, showCopyButton = false, url, children, className, formattedHash, copyIconSize = "16", }) {
-    return (jsxRuntime.jsxs("div", { className: cn("tw-flex tw-items-center", className), children: [showTx && jsxRuntime.jsx("span", { className: "tw-mr-squid-xs tw-text-grey-700", children: "TX" }), children !== null && children !== void 0 ? children : formattedHash, url && (jsxRuntime.jsx("a", { href: url, target: "_blank", className: "tw-rounded-squid-s tw-px-squid-xxs hover:tw-bg-material-light-thin", rel: "noreferrer", children: jsxRuntime.jsx(SquareArrowTopRight2Icon, { strokeWidth: "1.5", className: "tw-h-[1.2em] tw-w-[1.2em] tw-text-royal-500" }) })), showCopyButton && (jsxRuntime.jsx("span", { className: "tw-rounded-squid-s tw-px-squid-xxs hover:tw-bg-material-light-thin", children: jsxRuntime.jsx(Copy, { size: copyIconSize, strokeWidth: "2", className: "tw-cursor-pointer tw-text-royal-500", onClick: () => {
-                        navigator.clipboard.writeText(hash).catch(() => { });
-                    } }) }))] }));
+    return (jsxRuntime.jsxs("div", { className: cn("tw-flex tw-items-center", className), children: [showTx && jsxRuntime.jsx("span", { className: "tw-mr-squid-xs tw-text-grey-700", children: "TX" }), children !== null && children !== void 0 ? children : formattedHash, url && (jsxRuntime.jsx("a", { href: url, target: "_blank", className: "tw-rounded-squid-s tw-px-squid-xxs hover:tw-bg-material-light-thin", rel: "noreferrer", children: jsxRuntime.jsx(SquareArrowTopRight2Icon, { strokeWidth: "1.5", className: "tw-h-[1.2em] tw-w-[1.2em] tw-text-royal-500" }) })), showCopyButton && (jsxRuntime.jsx("span", { onClick: () => {
+                    navigator.clipboard.writeText(hash).catch(() => { });
+                }, className: "tw-cursor-pointer tw-rounded-squid-s tw-px-squid-xxs hover:tw-bg-material-light-thin", children: jsxRuntime.jsx(CopyOutlinedIcon, { size: copyIconSize, strokeWidth: "2.5", className: "tw-text-royal-500" }) }))] }));
 }
 
 function WalletLink({ imageURI, address }) {
@@ -4449,15 +4450,20 @@ function Button$1(_a) {
     disabled && buttonDisabledClass, isLoading && "tw-cursor-not-allowed", 
     // custom classes from props
     props.className);
-    const ButtonWrapper = ({ children }) => (jsxRuntime.jsx("div", { className: cn("tw-relative", buttonWidthClassnameMap[size], roundedClassMap[size][variant], containerClassName), children: children }));
+    const buttonWrapperProps = {
+        className: containerClassName,
+        size,
+        variant,
+    };
     if (link != null) {
-        return (jsxRuntime.jsxs(ButtonWrapper, { children: [jsxRuntime.jsx("a", { ref: anchorRef, "aria-disabled": disabled, href: disabled ? undefined : link, target: "_blank", className: className, rel: "noreferrer", children: children }), chipElement] }));
+        return (jsxRuntime.jsxs(ButtonWrapper, Object.assign({}, buttonWrapperProps, { children: [jsxRuntime.jsx("a", { ref: anchorRef, "aria-disabled": disabled, href: disabled ? undefined : link, target: "_blank", className: className, rel: "noreferrer", children: children }), chipElement] })));
     }
-    return (jsxRuntime.jsxs(ButtonWrapper, { children: [jsxRuntime.jsx("button", Object.assign({}, props, { type: "button", ref: buttonRef, "aria-disabled": disabled || isLoading, className: className, disabled: disabled || isLoading, children: children })), chipElement] }));
+    return (jsxRuntime.jsxs(ButtonWrapper, Object.assign({}, buttonWrapperProps, { children: [jsxRuntime.jsx("button", Object.assign({}, props, { type: "button", ref: buttonRef, "aria-disabled": disabled || isLoading, className: className, disabled: disabled || isLoading, children: children })), chipElement] })));
 }
 const ButtonHoverOverlay = ({ className }) => {
     return (jsxRuntime.jsx("span", { className: cn("tw-absolute tw-inset-0 tw-z-0 tw-hidden tw-h-full tw-w-full tw-bg-material-light-thin group-hover/base-button:tw-block", className) }));
 };
+const ButtonWrapper = ({ children, size, variant, className, }) => (jsxRuntime.jsx("div", { className: cn("tw-relative", buttonWidthClassnameMap[size], roundedClassMap[size][variant], className), children: children }));
 
 function AccountsButton(_a) {
     var { imageUrls } = _a, props = __rest$1(_a, ["imageUrls"]);
@@ -18869,8 +18875,8 @@ function DetailsToolbar({ errorMessage, helpButton, isLoading, isEmpty, flipButt
                                     "group-hover/flip-button:tw-rotate-180") }) }) }))) }), jsxRuntime.jsx("div", { className: cn(detailClassName, "tw-justify-end"), children: !!stopsButton && jsxRuntime.jsx(StopsButton, Object.assign({}, stopsButton)) })] })) }));
 }
 
-function DropdownMenu({ dropdownRef, className, menuRef, isHidden = false, listClassName, containerClassName, children, contentWrapperProps, menuContentClassName, }) {
-    return (jsxRuntime.jsx("div", { ref: dropdownRef, className: cn("tw-relative", containerClassName), children: jsxRuntime.jsx(Menu, { menuRef: menuRef, rounded: "sm", containerClassName: cn("tw-absolute tw-right-0 tw-z-30", className), contentClassName: cn("!tw-p-0", menuContentClassName), contentWrapperProps: contentWrapperProps, children: !isHidden && (jsxRuntime.jsx("ul", { className: cn("tw-flex tw-max-w-full tw-flex-col tw-gap-squid-xxs tw-px-0 tw-py-squid-xxs", listClassName), children: children })) }) }));
+function DropdownMenu({ dropdownRef, className, menuRef, isHidden = false, listClassName, containerClassName, children, contentWrapperProps, menuContentClassName, trigger, }) {
+    return (jsxRuntime.jsxs("div", { ref: dropdownRef, className: cn("tw-relative", containerClassName), children: [trigger, jsxRuntime.jsx(Menu, { menuRef: menuRef, rounded: "sm", containerClassName: cn("tw-absolute tw-right-0 tw-z-30", className), contentClassName: cn("!tw-p-0", menuContentClassName), contentWrapperProps: contentWrapperProps, children: !isHidden && (jsxRuntime.jsx("ul", { className: cn("tw-flex tw-max-w-full tw-flex-col tw-gap-squid-xxs tw-px-0 tw-py-squid-xxs", listClassName), children: children })) })] }));
 }
 
 function InfoBox({ title, description, icon }) {
@@ -19031,19 +19037,20 @@ function AccountListItem({ isConnected, imageUrls = [], imageUrl, badgeUrl, acti
 
 const SPACING = 10;
 function useDropdownMenu(props) {
-    const { initialIsModalOpen, itemsContainerRef } = props !== null && props !== void 0 ? props : {};
-    const [isDropdownOpen, setIsModalOpen] = React$1.useState(Boolean(initialIsModalOpen));
+    const { initialIsDropdownOpen, itemsContainerRef } = props !== null && props !== void 0 ? props : {};
+    const [isDropdownOpen, setIsDropdownOpen] = React$1.useState(Boolean(initialIsDropdownOpen));
     const dropdownRef = React$1.useRef(null);
     const openDropdownButtonRef = React$1.useRef(null);
     React$1.useEffect(() => {
         const handleClickOutside = (event) => {
-            // close modal if the user clicked outside of it
+            // close dropdown if the user clicked outside of it
             var _a;
-            if (dropdownRef.current &&
+            const hasClickedOutside = dropdownRef.current &&
                 event.target !== openDropdownButtonRef.current &&
                 !dropdownRef.current.contains(event.target) &&
-                !((_a = openDropdownButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-                setIsModalOpen(false);
+                !((_a = openDropdownButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target));
+            if (hasClickedOutside) {
+                setIsDropdownOpen(false);
             }
         };
         if (isDropdownOpen) {
@@ -19054,10 +19061,10 @@ function useDropdownMenu(props) {
         };
     }, [dropdownRef, isDropdownOpen]);
     const openDropdown = React$1.useCallback(() => {
-        setIsModalOpen((prev) => !prev);
+        setIsDropdownOpen((prev) => !prev);
     }, []);
     const closeDropdown = React$1.useCallback(() => {
-        setIsModalOpen(false);
+        setIsDropdownOpen(false);
     }, []);
     const [dropdownStyles, setDropdownStyles] = React$1.useState(null);
     const itemRef = React$1.useRef(null);
@@ -19097,10 +19104,11 @@ function useDropdownMenu(props) {
         // if the dropdown is not visible at top or bottom of the item
         // we just center it
         if (!isDropdownVisibleAtItemTopOrBottom) {
-            return setDropdownStyles({
+            setDropdownStyles({
                 position: "center",
                 maxHeight,
             });
+            return;
         }
         // finally, if the dropdown fits, position it where it has more space
         if (distanceBetweenItemBottomAndContainerBottomEdge >=
@@ -69218,7 +69226,7 @@ const swapProgressButtonTexts = {
     [SwapState.PARTIAL_SUCCESS]: "Cancel",
     [SwapState.NEEDS_GAS]: "Go to Axelarscan",
 };
-function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, }) {
+function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, shareSwapDropdownContent, }) {
     const [showSwapInfoSection, setShowSwapInfoSection] = React$1.useState(true);
     const isFirstRenderRef = React$1.useRef(true);
     const { timer, stopTimer, startTimer } = useTimer({
@@ -69277,7 +69285,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
                                 height: "100%",
                                 maxHeight: "100%",
                                 width: "auto",
-                            }, autoplay: true, loop: true, src: swapProgressAnimations[swapState] }) }), jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-squid-m tw-w-full tw-items-end tw-justify-between tw-self-stretch tw-px-squid-m", children: swapState === SwapState.COMPLETED ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsxRuntime.jsx(SwapSuccessIcon, {}) }), jsxRuntime.jsx(Button$1, { size: "md", variant: "secondary", icon: jsxRuntime.jsx(XSocial, {}), label: "Share", link: socialLink, title: "Share on X" })] })) : swapState === SwapState.ERROR ? (jsxRuntime.jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "error" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsxRuntime.jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "warning" })) : (jsxRuntime.jsx(TokenPair, { firstToken: {
+                            }, autoplay: true, loop: true, src: swapProgressAnimations[swapState] }) }), jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-squid-m tw-w-full tw-items-end tw-justify-between tw-self-stretch tw-px-squid-m", children: swapState === SwapState.COMPLETED ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsxRuntime.jsx(SwapSuccessIcon, {}) }), jsxRuntime.jsx(ShareSwapButton, { dropdownContent: shareSwapDropdownContent })] })) : swapState === SwapState.ERROR ? (jsxRuntime.jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "error" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsxRuntime.jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "warning" })) : (jsxRuntime.jsx(TokenPair, { firstToken: {
                                 bgColor: fromToken.bgColor,
                                 logoURI: fromToken.logoUrl,
                             }, secondToken: {
@@ -69301,9 +69309,6 @@ const TrackTransactionView = React$1.forwardRef((props, ref) => {
                 currentStepIndex: rawSteps.length - 1,
             };
         }
-        // TODO: Fix this
-        // Vercel build throws an error for findLastIndex, probably related to the Node version being used
-        // @ts-expect-error
         const lastSuccessfulStepIndex = rawSteps.findLastIndex((s) => s.status === "executed" || s.status === "success");
         if (swapState === SwapState.PROGRESS) {
             onTxStart();
@@ -69340,6 +69345,29 @@ const TrackTransactionView = React$1.forwardRef((props, ref) => {
                 currentStepIndex: firstWarningStepIndex,
             };
         }
+        if (swapState === SwapState.PARTIAL_SUCCESS) {
+            const lastWarningStepIndex = rawSteps.findLastIndex((s) => s.status === "warning");
+            if (lastWarningStepIndex !== -1) {
+                return {
+                    currentStepIndex: lastWarningStepIndex,
+                    steps: rawSteps,
+                };
+            }
+            const lastSuccessfulStep = rawSteps[lastSuccessfulStepIndex];
+            if (!lastSuccessfulStep) {
+                return {
+                    currentStepIndex: 0,
+                    steps: rawSteps,
+                };
+            }
+            // If swap state is partial success and there is no warning step
+            // override last successful step with warning status
+            const stepsWithRefunded = rawSteps.with(lastSuccessfulStepIndex, Object.assign(Object.assign({}, lastSuccessfulStep), { status: "warning" }));
+            return {
+                currentStepIndex: lastSuccessfulStepIndex,
+                steps: stepsWithRefunded,
+            };
+        }
         return {
             steps: rawSteps,
             currentStepIndex: 0,
@@ -69351,6 +69379,15 @@ const SwapErrorTopMenu = ({ supportLink, type, }) => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: type === "error" ? jsxRuntime.jsx(SwapErrorIcon, {}) : jsxRuntime.jsx(SwapWarningIcon, {}) }), jsxRuntime.jsx(Button$1, { size: "md", variant: "secondary", label: "Get help", link: supportLink, title: "Contact support" })] }));
 };
 TrackTransactionView.displayName = "TrackTransactionView";
+function ShareSwapButton({ dropdownContent, }) {
+    const containerRef = useContainerStore((state) => state.containerRef);
+    const { dropdownRef, isDropdownOpen, openDropdown, menuRef } = useDropdownMenu({
+        itemsContainerRef: containerRef,
+    });
+    return (jsxRuntime.jsx(DropdownMenu, { dropdownRef: dropdownRef, menuRef: menuRef, className: "-tw-bottom-[calc(100%+5px)] tw-left-1/2 tw-right-[unset] tw-top-[calc(100%+5px)] -tw-translate-x-1/2", isHidden: !isDropdownOpen, trigger: jsxRuntime.jsx(Button$1, { size: "md", variant: "secondary", onClick: () => {
+                openDropdown();
+            }, children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-px-squid-xxs", children: "Share" }), jsxRuntime.jsx(ChevronDownSmallIcon, { size: "24", strokeWidth: "1.5" })] }) }), children: dropdownContent }));
+}
 
 function TransactionViewLayout(_a) {
     var { isLoading, header, properties, actions, fees } = _a, props = __rest$1(_a, ["isLoading", "header", "properties", "actions", "fees"]);
@@ -69827,8 +69864,7 @@ exports.CommandIcon = CommandIcon;
 exports.CompassRoundOutlinedIcon = CompassRoundOutlinedIcon;
 exports.CompassRoundSolidIcon = CompassRoundSolidIcon;
 exports.ConsoleIcon = ConsoleIcon;
-exports.Copy = Copy;
-exports.CopyIcon = CopyIcon;
+exports.Copy2Icon = Copy2Icon;
 exports.CopyOutlinedIcon = CopyOutlinedIcon;
 exports.CrossAnimatedIcon = CrossAnimatedIcon;
 exports.CrossedOutSunSolidIcon = CrossedOutSunSolidIcon;
@@ -69857,6 +69893,7 @@ exports.ErrorMessage = ErrorMessage;
 exports.EthereumIcon = EthereumIcon;
 exports.ExplosionIcon = ExplosionIcon;
 exports.EyeOpenIcon = EyeOpenIcon;
+exports.FarcasterIcon = FarcasterIcon;
 exports.FavouriteFilterIcon = FavouriteFilterIcon;
 exports.FeeButton = FeeButton;
 exports.FeesAction = FeesAction;
@@ -69994,6 +70031,7 @@ exports.Tab = Tab;
 exports.Tabs = Tabs;
 exports.TagIcon = TagIcon;
 exports.TagIconFilled = TagIconFilled;
+exports.TelegramIcon = TelegramIcon;
 exports.TextSkeleton = TextSkeleton;
 exports.ThemeProvider = ThemeProvider;
 exports.ThumbsUp = ThumbsUp;
@@ -70028,7 +70066,7 @@ exports.WalletFilledIcon = WalletFilledIcon;
 exports.WalletIcon = WalletIcon;
 exports.WalletLink = WalletLink;
 exports.WrapAction = WrapAction;
-exports.XSocial = XSocial;
+exports.XSocialIcon = XSocialIcon;
 exports.adjustColorForContrast = adjustColorForContrast;
 exports.baseTailwindConfig = baseTailwindConfig;
 exports.blendColors = blendColors;

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

@@ -75,8 +75,9 @@ export declare function ArrowCornerDownRightIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function ChevronDownSmallIcon({ size, className, }: {
+export declare function ChevronDownSmallIcon({ size, strokeWidth, className, }: {
     size?: string;
+    strokeWidth?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function ArrowDownIcon({ size, className, }: {

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

@@ -62,11 +62,12 @@ export declare function LaptopIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function CopyOutlinedIcon({ size, className, }: {
+export declare function CopyOutlinedIcon({ size, strokeWidth, className, }: {
     size?: string;
     className?: string;
+    strokeWidth?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function CopyIcon({ size, className, }: {
+export declare function Copy2Icon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-export declare function XSocial({ className, size, }: {
+export declare function XSocialIcon({ className, size, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
@@ -14,3 +14,11 @@ export declare function MirrorIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function FarcasterIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TelegramIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -12,7 +12,6 @@ export * from "./Clock";
 export * from "./Coins";
 export * from "./Collection";
 export * from "./CompassRound";
-export * from "./Copy";
 export * from "./CrossAnimatedIcon";
 export * from "./DashboardFast";
 export * from "./DockIcons";

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

@@ -10,6 +10,7 @@ interface DropdownMenuProps {
     children?: React.ReactNode;
     contentWrapperProps?: React.ComponentProps<"div">;
     menuContentClassName?: string;
+    trigger?: React.ReactNode;
 }
-export declare function DropdownMenu({ dropdownRef, className, menuRef, isHidden, listClassName, containerClassName, children, contentWrapperProps, menuContentClassName, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenu({ dropdownRef, className, menuRef, isHidden, listClassName, containerClassName, children, contentWrapperProps, menuContentClassName, trigger, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SwapState, type SwapStep } from "../../types/components";
 import { type SwapStepsCollapsedFooterButton } from "../layout/SwapStepsCollapsed";
 interface ChainData {
@@ -9,12 +10,12 @@ interface Token {
     logoUrl: string;
     bgColor: string;
 }
-export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, }: {
+export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, shareSwapDropdownContent, }: {
     steps: SwapStep[];
     handleClose?: (swapState: SwapState) => void;
     handleComplete?: () => void;
     isOpen?: boolean;
-    socialLink?: string;
+    shareSwapDropdownContent?: React.ReactNode;
     supportLink?: string;
     fromToken: Token;
     toToken: Token;

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

@@ -1,11 +1,11 @@
-import React from "react";
-export type DropdownPosition = "top" | "bottom" | "center";
-export type DropdownStyles = {
+import type React from "react";
+import { type DropdownPosition } from "../types/components";
+export interface DropdownStyles {
     position: DropdownPosition;
     maxHeight: number | null;
-};
+}
 interface UseDropdownMenuParams {
-    initialIsModalOpen?: boolean;
+    initialIsDropdownOpen?: boolean;
     itemsContainerRef?: React.RefObject<HTMLElement>;
 }
 export declare function useDropdownMenu(props?: UseDropdownMenuParams): {

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react/*";
+import { type Meta, type StoryObj } from "@storybook/react/*";
 declare const meta: Meta<typeof SwitchingAppContainer>;
 export default meta;
 type Story = StoryObj<typeof meta>;

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { type Meta, type StoryObj } from "@storybook/react";
 import { MainView } from "../../components/views/MainView";
 declare const meta: Meta<typeof MainView>;
 export default meta;

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { type Meta, type StoryObj } from "@storybook/react";
 import { SwapDetailsView } from "../../components/views/SwapDetailsView";
 declare const meta: Meta<typeof SwapDetailsView>;
 export default meta;