npm - @layerswap/widget - Versions diffs - 1.1.0 → 1.1.1 - Mend

@layerswap/widget 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (187) hide show

package/dist/esm/components/ErrorFallback.js CHANGED Viewed

@@ -21,5 +21,5 @@ export default function ErrorFallback({ error, resetErrorBoundary }) {
         boot();
         show();
     }, [boot, show]);
-    return (_jsx("div", { className: "styled-scroll", children: _jsx("main", { className: "styled-scroll", children: _jsxs("div", { className: "min-h-screen overflow-hidden relative font-robo", children: [_jsx("div", { className: "mx-auto max-w-lg bg-secondary-700 shadow-card rounded-lg w-full overflow-hidden relative px-6 pt-6 pb-2 h-[500px] min-h-[550px]", children: _jsxs(MessageComponent, { children: [_jsxs(MessageComponent.Content, { center: true, children: [_jsxs(MessageComponent.Header, { className: "mb-3", children: [_jsx("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600/20", children: _jsx(NotFoundIcon, {}) }), _jsx("h1", { className: "text-center text-2xl font-semibold text-primary-text", children: "Unable to complete the request" })] }), _jsx(MessageComponent.Description, { children: _jsxs("p", { className: "mx-auto text-center text-base font-normal leading-5 text-secondary-text px-9", children: [_jsx("span", { children: "Our team is informed and are now investigating the issue. Please try again, if the issue persists you can" }), _jsx("button", { type: "button", onClick: startIntercom, className: "mx-1 underline decoration-gray-400 underline-offset-2 hover:decoration-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-[#0f1420] focus:ring-gray-400 rounded", children: _jsx("span", { children: "contact our support." }) })] }) })] }), _jsx(MessageComponent.Buttons, { children: _jsxs("div", { className: "flex flex-col w-full text-primary-text text-base space-y-2", children: [_jsx(SubmitButton, { style: { display: 'ruby' }, className: "py-3 text-center ", button_align: "right", text_align: "left", isDisabled: false, isSubmitting: false, onClick: () => resetErrorBoundary(), icon: _jsx(RotateCcw, { className: "h-5 w-5", "aria-hidden": "true" }), children: _jsx("span", { children: "Try Again" }) }), _jsxs("button", { onClick: resetErrorBoundary, type: "button", className: "w-full inline-flex items-center justify-center gap-2 rounded-xl bg-secondary-300 px-5 py-3 text-base font-semibold leading-6 hover:bg-secondary-400 focus:outline-none transition", children: [_jsx(Home, { className: "h-5 w-5", "aria-hidden": "true" }), _jsx("span", { children: "Back to app" })] })] }) })] }) }), _jsx("div", { id: "widget_root" })] }) }) }));
+    return (_jsx("div", { className: "styled-scroll", children: _jsx("main", { className: "styled-scroll", children: _jsxs("div", { className: "min-h-screen overflow-hidden relative font-robo", children: [_jsx("div", { className: "mx-auto max-w-md bg-secondary-700 sm:shadow-card rounded-3xl w-full overflow-hidden relative px-4 pt-6 pb-4 h-dvh sm:h-[500px] min-h-[550px]", children: _jsxs(MessageComponent, { children: [_jsxs(MessageComponent.Content, { center: true, children: [_jsxs(MessageComponent.Header, { className: "mb-3", children: [_jsx("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600/20", children: _jsx(NotFoundIcon, {}) }), _jsx("h1", { className: "text-center text-2xl font-semibold text-primary-text", children: "Unable to complete the request" })] }), _jsx(MessageComponent.Description, { children: _jsxs("p", { className: "mx-auto text-center text-base font-normal leading-5 text-secondary-text px-9", children: [_jsx("span", { children: "Our team is informed and are now investigating the issue. Please try again, if the issue persists you can" }), _jsx("button", { type: "button", onClick: startIntercom, className: "mx-1 underline decoration-gray-400 underline-offset-2 hover:decoration-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-[#0f1420] focus:ring-gray-400 rounded", children: _jsx("span", { children: "contact our support." }) })] }) })] }), _jsx(MessageComponent.Buttons, { children: _jsxs("div", { className: "flex flex-col w-full text-primary-text text-base space-y-2", children: [_jsx(SubmitButton, { style: { display: 'ruby' }, className: "py-3 text-center ", button_align: "right", text_align: "left", isDisabled: false, isSubmitting: false, onClick: () => resetErrorBoundary(), icon: _jsx(RotateCcw, { className: "h-5 w-5", "aria-hidden": "true" }), children: _jsx("span", { children: "Try Again" }) }), _jsxs("button", { onClick: resetErrorBoundary, type: "button", className: "w-full inline-flex items-center justify-center gap-2 rounded-xl bg-secondary-300 px-5 py-3 text-base font-semibold leading-6 hover:bg-secondary-400 focus:outline-none transition", children: [_jsx(Home, { className: "h-5 w-5", "aria-hidden": "true" }), _jsx("span", { children: "Back to app" })] })] }) })] }) }), _jsx("div", { id: "widget_root" })] }) }) }));
 }

package/dist/esm/components/Icons/CircularLoader.js ADDED Viewed

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CircularLoader = (props) => {
+    return _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", ...props, children: [_jsx("path", { "fill-rule": "evenodd", clipRule: "evenodd", d: "M30.4172 18.2327C31.26 18.4985 31.7278 19.3971 31.4621 20.2398L31.0633 21.5045L30.5291 22.7942L29.8845 24.0325L29.1345 25.2098L28.2847 26.3173L27.3416 27.3465L26.3124 28.2896L25.2049 29.1394L24.0275 29.8894L22.8513 30.5017C22.0675 30.9098 21.1013 30.6051 20.6933 29.8213C20.2852 29.0375 20.5899 28.0713 21.3737 27.6633L22.426 27.1155L23.3677 26.5156L24.2535 25.8359L25.0767 25.0816L25.831 24.2584L26.5107 23.3726L27.1106 22.4309L27.6261 21.4406L28.0534 20.409L28.4102 19.2776C28.6759 18.4348 29.5745 17.967 30.4172 18.2327Z", fill: "#E42575" }), _jsx("path", { "fill-rule": "evenodd", clipRule: "evenodd", d: "M30.5546 15.0937C29.6919 15.2849 28.8375 14.7406 28.6462 13.8779L28.3895 12.7197L28.0537 11.6548L27.6264 10.6233L27.1109 9.63291L26.511 8.69125L25.8313 7.80545L25.077 6.98226L24.2538 6.22795L23.368 5.54825L22.4263 4.94834L21.436 4.43279L20.4044 4.00552L19.3396 3.66977L18.2495 3.42811L17.1425 3.28238L16.0271 3.23367L14.9116 3.28238L13.8047 3.42811L12.7146 3.66977L11.6498 4.00551L10.6182 4.43279L9.62786 4.94834L8.68618 5.54825L7.80038 6.22795L6.9772 6.98226L6.22288 7.80545L5.54319 8.69124L4.94329 9.6329L4.42772 10.6233L4.00046 11.6548L3.66471 12.7197L3.42305 13.8097L3.27731 14.9167L3.22861 16.0322L3.27731 17.1476L3.42305 18.2546L3.66471 19.3446L4.00045 20.4095L4.42772 21.441L4.94328 22.4314L5.54319 23.3731L6.22288 24.2588L6.9772 25.082L7.80039 25.8364L8.68617 26.516L9.62787 27.116L10.6182 27.6315L11.6497 28.0588L12.7146 28.3945L13.8047 28.6362L14.9116 28.7819L16.0969 28.8337C16.9797 28.8722 17.6641 29.6191 17.6256 30.5019C17.587 31.3848 16.8401 32.0692 15.9573 32.0306L14.6325 31.9728L13.2485 31.7906L11.8856 31.4884L10.5542 31.0687L9.26455 30.5345L8.02632 29.8899L6.84899 29.1398L5.74151 28.29L4.7123 27.3469L3.76921 26.3177L2.9194 25.2102L2.16936 24.0329L1.52478 22.7947L0.990575 21.505L0.570802 20.1737L0.268661 18.8108L0.0864524 17.4268L0.0255624 16.0321L0.0864562 14.6375L0.268663 13.2535L0.570804 11.8907L0.990572 10.5593L1.52478 9.26961L2.16936 8.03139L2.91941 6.85405L3.76921 5.74657L4.7123 4.71736L5.7415 3.77427L6.84899 2.92447L8.02632 2.17442L9.26455 1.52984L10.5542 0.995635L11.8856 0.575864L13.2485 0.273725L14.6325 0.0915153L16.0271 0.030625L17.4217 0.091515L18.8057 0.273724L20.1686 0.575863L21.4999 0.995635L22.7896 1.52984L24.0278 2.17442L25.2052 2.92447L26.3127 3.77427L27.3419 4.71736L28.285 5.74657L29.1348 6.85405L29.8848 8.03139L30.5294 9.26961L31.0636 10.5593L31.4834 11.8907L31.7704 13.1853C31.9616 14.048 31.4173 14.9024 30.5546 15.0937Z", fill: "#F8C8DC" })] });
+};
+export default CircularLoader;

package/dist/esm/components/Icons/FailIcon.js CHANGED Viewed

@@ -1,3 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const FailIcon = (props) => _jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", width: "116", height: "116", viewBox: "0 0 116 116", fill: "none", children: [_jsx("circle", { cx: "58", cy: "58", r: "58", fill: "#E43636", fillOpacity: "0.1" }), _jsx("circle", { cx: "58", cy: "58", r: "45", fill: "#E43636", fillOpacity: "0.5" }), _jsx("circle", { cx: "58", cy: "58", r: "30", fill: "#E43636" }), _jsx("path", { d: "M48 69L68 48", stroke: "white", strokeWidth: "3.15789", strokeLinecap: "round" }), _jsx("path", { d: "M48 48L68 69", stroke: "white", strokeWidth: "3.15789", strokeLinecap: "round" })] });
+import { jsx as _jsx } from "react/jsx-runtime";
+const FailIcon = (props) => _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "21", height: "21", viewBox: "0 0 21 21", fill: "none", ...props, children: _jsx("path", { d: "M17.086 17.086C16.1425 18.028 15.0183 18.7695 13.781 19.266C12.547 19.766 11.289 20.016 10.008 20.016C8.71357 20.0133 7.43205 19.7586 6.235 19.266C4.99768 18.7695 3.8735 18.028 2.93 17.086C1.98799 16.1425 1.24647 15.0183 0.75 13.781C0.257417 12.584 0.00267468 11.3024 0 10.008C0 8.727 0.25 7.468 0.75 6.235C1.24652 4.99768 1.98804 3.8735 2.93 2.93C3.8735 1.98804 4.99768 1.24652 6.235 0.75C7.43205 0.257441 8.71357 0.0027002 10.008 0C11.289 0 12.548 0.25 13.781 0.75C15.0183 1.24647 16.1425 1.98799 17.086 2.93C18.028 3.8735 18.7695 4.99768 19.266 6.235C19.7586 7.43205 20.0133 8.71357 20.016 10.008C20.016 11.289 19.766 12.548 19.266 13.781C18.7695 15.0183 18.028 16.1425 17.086 17.086V17.086ZM7.524 6.469C7.45699 6.40041 7.37663 6.34629 7.28788 6.31C7.19912 6.27371 7.10387 6.25601 7.008 6.258C6.80775 6.25628 6.61447 6.33144 6.468 6.468C6.33144 6.61447 6.25628 6.80775 6.258 7.008C6.258 7.211 6.328 7.383 6.468 7.524L8.954 10.008L6.47 12.492C6.40123 12.5589 6.34693 12.6392 6.31046 12.728C6.27399 12.8168 6.25614 12.9121 6.258 13.008C6.258 13.211 6.328 13.391 6.468 13.548C6.625 13.688 6.805 13.758 7.008 13.758C7.211 13.758 7.383 13.688 7.524 13.548L10.008 11.062L12.492 13.546C12.633 13.686 12.805 13.757 13.008 13.757C13.211 13.757 13.391 13.687 13.548 13.547C13.6846 13.4005 13.7597 13.2072 13.758 13.007C13.7601 12.9112 13.7426 12.816 13.7065 12.7272C13.6703 12.6385 13.6164 12.5581 13.548 12.491L11.062 10.008L13.546 7.524C13.686 7.383 13.757 7.211 13.757 7.008C13.7587 6.80775 13.6836 6.61447 13.547 6.468C13.4005 6.33144 13.2072 6.25628 13.007 6.258C12.9112 6.25588 12.816 6.27342 12.7272 6.30954C12.6385 6.34566 12.5581 6.39959 12.491 6.468L10.008 8.954L7.524 6.469Z", fill: "rgb(var(--ls-colors-error-foreground))" }) });
 export default FailIcon;

package/dist/esm/components/Icons/GlobeIcon.js ADDED Viewed

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const GlobeIcon = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", ...props, children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM7.26465 13.5C7.45716 14.7252 7.74486 15.8122 8.09961 16.6992C8.43365 17.5343 8.80718 18.1438 9.16992 18.5273C9.53052 18.9085 9.81134 19 10 19C10.1887 19 10.4695 18.9085 10.8301 18.5273C11.1928 18.1438 11.5664 17.5343 11.9004 16.6992C12.1109 16.1729 12.2967 15.576 12.4541 14.9219C11.7737 14.729 11.2425 14.1869 11.0654 13.5H7.26465ZM1.70605 13.5C2.83227 16.1655 5.20626 18.1733 8.0957 18.7959C7.25214 17.652 6.5925 15.7717 6.25293 13.5H1.70605ZM14.9346 13.5C14.7516 14.2101 14.1899 14.7648 13.4766 14.9395C13.1068 16.5637 12.5613 17.9038 11.9033 18.7959C14.7932 18.1735 17.1676 16.1658 18.2939 13.5H14.9346ZM1.35449 7.5C1.12532 8.29394 1 9.13227 1 10C1 10.8677 1.12532 11.7061 1.35449 12.5H6.12598C6.04371 11.701 6 10.8632 6 10C6 9.57633 6.0108 9.15883 6.03125 8.74902C5.55765 8.48615 5.20378 8.03685 5.06543 7.5H1.35449ZM13.874 7.5C13.9563 8.29905 14 9.13675 14 10C14 10.4233 13.9882 10.8405 13.9678 11.25C14.442 11.5128 14.7961 11.9627 14.9346 12.5H18.6455C18.8747 11.7061 19 10.8677 19 10C19 9.13227 18.8747 8.29394 18.6455 7.5H13.874ZM8.93457 7.5C8.71414 8.35537 7.94426 8.98789 7.02246 8.99805C7.0086 9.32666 7 9.66088 7 10C7 10.8698 7.04749 11.7077 7.13281 12.5H11.0654C11.2858 11.6449 12.0552 11.0116 12.9766 11.001C12.9904 10.6727 13 10.3388 13 10C13 9.13018 12.9525 8.29226 12.8672 7.5H8.93457ZM8.0957 1.20312C5.20617 1.82567 2.8323 3.83442 1.70605 6.5H5.06543C5.24836 5.79017 5.80944 5.23445 6.52246 5.05957C6.89199 3.43525 7.43773 2.0951 8.0957 1.20312ZM10 1C9.81134 1 9.53052 1.09148 9.16992 1.47266C8.80718 1.85623 8.43365 2.46568 8.09961 3.30078C7.88921 3.82687 7.70228 4.42326 7.54492 5.07715C8.22587 5.26974 8.75745 5.81269 8.93457 6.5H12.7354C12.5428 5.27477 12.2551 4.1878 11.9004 3.30078C11.5664 2.46568 11.1928 1.85623 10.8301 1.47266C10.4695 1.09148 10.1887 1 10 1ZM11.9033 1.20312C12.7473 2.34695 13.4074 4.22759 13.7471 6.5H18.2939C17.1676 3.83413 14.7933 1.82544 11.9033 1.20312Z", fill: "currentColor" }) }));
+export default GlobeIcon;

package/dist/esm/components/Icons/MenuIcon.js ADDED Viewed

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MenuIcon = (props) => {
+    return _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props, children: [_jsx("path", { "fill-rule": "evenodd", clipRule: "evenodd", d: "M8 8C8.55228 8 9 7.55228 9 7C9 6.44772 8.55228 6 8 6C7.44772 6 7 6.44772 7 7C7 7.55228 7.44772 8 8 8ZM8 9C9.10457 9 10 8.10457 10 7C10 5.89543 9.10457 5 8 5C6.89543 5 6 5.89543 6 7C6 8.10457 6.89543 9 8 9Z", fill: "#A3ADC2" }), _jsx("path", { d: "M7.13477 6.5C7.04953 6.64718 7 6.81768 7 7C7 7.18232 7.04953 7.35282 7.13477 7.5H4.5C4.22386 7.5 4 7.27614 4 7C4 6.72386 4.22386 6.5 4.5 6.5H7.13477ZM19.5 6.5C19.7761 6.5 20 6.72386 20 7C20 7.27614 19.7761 7.5 19.5 7.5H8.86523C8.95047 7.35282 9 7.18232 9 7C9 6.81768 8.95047 6.64718 8.86523 6.5H19.5Z", fill: "#A3ADC2" }), _jsx("path", { d: "M14.0654 11.5C14.0242 11.66 14 11.8271 14 12C14 12.1729 14.0242 12.34 14.0654 12.5H4.5C4.22386 12.5 4 12.2761 4 12C4 11.7239 4.22386 11.5 4.5 11.5H14.0654ZM19.5 11.5C19.7761 11.5 20 11.7239 20 12C20 12.2761 19.7761 12.5 19.5 12.5H17.9346C17.9758 12.34 18 12.1729 18 12C18 11.8271 17.9758 11.66 17.9346 11.5H19.5Z", fill: "#A3ADC2" }), _jsx("path", { "fill-rule": "evenodd", clipRule: "evenodd", d: "M16 13C16.5523 13 17 12.5523 17 12C17 11.4477 16.5523 11 16 11C15.4477 11 15 11.4477 15 12C15 12.5523 15.4477 13 16 13ZM16 14C17.1046 14 18 13.1046 18 12C18 10.8954 17.1046 10 16 10C14.8954 10 14 10.8954 14 12C14 13.1046 14.8954 14 16 14Z", fill: "#A3ADC2" }), _jsx("path", { d: "M6.06543 16.5C6.0242 16.66 6 16.8271 6 17C6 17.1729 6.0242 17.34 6.06543 17.5H4.5C4.22386 17.5 4 17.2761 4 17C4 16.7239 4.22386 16.5 4.5 16.5H6.06543ZM19.5 16.5C19.7761 16.5 20 16.7239 20 17C20 17.2761 19.7761 17.5 19.5 17.5H9.93457C9.9758 17.34 10 17.1729 10 17C10 16.8271 9.9758 16.66 9.93457 16.5H19.5Z", fill: "#A3ADC2" }), _jsx("path", { "fill-rule": "evenodd", clipRule: "evenodd", d: "M8 18C8.55228 18 9 17.5523 9 17C9 16.4477 8.55228 16 8 16C7.44772 16 7 16.4477 7 17C7 17.5523 7.44772 18 8 18ZM8 19C9.10457 19 10 18.1046 10 17C10 15.8954 9.10457 15 8 15C6.89543 15 6 15.8954 6 17C6 18.1046 6.89543 19 8 19Z", fill: "#A3ADC2" })] });
+};
+export default MenuIcon;

package/dist/esm/components/Icons/TokenIcon.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const TokenIcon = (props) => (_jsxs("svg", { width: "19", height: "16", viewBox: "0 0 19 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M16.0712 7.02863C16.9529 10.218 17.1354 12.9562 16.4789 13.1446C15.8223 13.3329 14.5754 10.9001 13.6937 7.71069C12.812 4.52129 12.6295 1.78308 13.2861 1.59473C13.9426 1.40638 15.1896 3.83922 16.0712 7.02863Z", fill: "currentColor" }), _jsx("path", { d: "M16.7938 6.82488C16.2449 4.83924 15.4871 3.14008 14.7216 1.99861C14.3372 1.42547 13.9682 1.01904 13.6448 0.78192C13.3157 0.54067 13.1104 0.526319 12.9986 0.558387C12.8868 0.590456 12.719 0.711857 12.5619 1.09258C12.4074 1.46679 12.3008 2.00965 12.2665 2.70292C12.1982 4.0836 12.4222 5.93588 12.9711 7.92151C13.52 9.90715 14.2778 11.6063 15.0433 12.7478C15.4277 13.3209 15.7967 13.7274 16.1201 13.9645C16.4492 14.2058 16.6545 14.2201 16.7663 14.188L16.9114 14.713L16.8957 14.7173C15.5662 15.0714 13.6031 12.1535 12.4823 8.16415L12.4558 8.06934C11.3353 4.01571 11.5133 0.417926 12.8535 0.0334581L12.8692 0.0290908C14.2092 -0.327752 16.1929 2.63927 17.309 6.67705L17.3351 6.77198C18.4268 10.7867 18.2411 14.3315 16.9114 14.713L16.7663 14.188C16.8781 14.156 17.0459 14.0346 17.203 13.6538C17.3575 13.2796 17.464 12.7367 17.4983 12.0435C17.5667 10.6628 17.3427 8.81051 16.7938 6.82488Z", fill: "currentColor" }), _jsx("path", { d: "M14.1111 15.4191C12.9291 15.7157 11.122 12.7201 10.0668 8.70835C9.01162 4.69657 9.1063 1.18199 10.2756 0.836706L11.9634 0.375818C11.9634 0.375818 10.4435 2.44999 12.0158 8.42775C13.5164 14.1329 15.7991 14.9585 15.7991 14.9585L14.1111 15.4191Z", fill: "currentColor" }), _jsx("path", { d: "M0.703613 13.0453C0.703613 13.0453 1.84834 14.5381 6.2684 14.5381C9.10719 14.5381 10.4882 13.862 11.0879 13.4199C11.1838 13.621 11.2806 13.8125 11.3779 13.9936C11.4139 14.0604 11.45 14.126 11.4863 14.1904V14.3528C11.4683 15.2635 9.06136 16 6.09497 16C3.12858 16 0.721732 15.2635 0.703712 14.3528L0.703613 13.0453Z", fill: "currentColor" }), _jsx("path", { d: "M0.703613 10.7813C0.703613 10.7813 1.84834 12.2741 6.2684 12.2741C8.26914 12.2741 9.54576 11.9383 10.3351 11.5852C10.4967 12.0396 10.6649 12.4686 10.8373 12.8675C9.92488 13.3848 8.14334 13.736 6.09497 13.736C3.12858 13.736 0.721732 12.9995 0.703712 12.0888L0.703613 10.7813Z", fill: "currentColor" }), _jsx("path", { d: "M0.703613 8.51734C0.703613 8.51734 1.84834 10.0101 6.2684 10.0101C7.80676 10.0101 8.91702 9.81153 9.70685 9.55928C9.83338 10.0299 9.96818 10.485 10.1095 10.9208C9.12241 11.2591 7.68954 11.472 6.09497 11.472C3.12858 11.472 0.721732 10.7355 0.703712 9.82482L0.703613 8.51734Z", fill: "currentColor" }), _jsx("path", { d: "M6.09497 5.21729C7.12824 5.21729 8.09361 5.32491 8.91379 5.51146C9.03085 6.4861 9.2158 7.53441 9.46844 8.61147C9.47998 8.66069 9.49167 8.70976 9.50341 8.7587C8.57454 9.03954 7.38791 9.20804 6.09497 9.20804C3.11741 9.20804 0.703613 8.31468 0.703613 7.21267C0.703613 6.11065 3.11741 5.21729 6.09497 5.21729Z", fill: "currentColor" })] }));
+const TokenIcon = (props) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "16", viewBox: "0 0 20 16", fill: "none", ...props, children: [_jsx("path", { d: "M14.9218 2.63325L13.8251 1.16509C13.8251 1.16509 13.8285 1.52477 13.5588 2.15514C13.2891 2.78552 12.9607 3.4069 12.2133 4.28895C11.3599 5.25682 10.1565 6.33746 8.71729 7.37397C5.16277 9.88602 2.58804 10.4833 1.06317 10.5068L0.895811 10.4966L1.93675 11.89C2.75001 12.872 6.321 11.5898 9.88187 9.05121C13.4427 6.51259 15.6918 3.64606 14.9218 2.63325Z", fill: "currentColor" }), _jsx("path", { d: "M5.39436 3.27026C3.62404 4.50941 2.20666 5.85017 1.34244 7.0048C0.908899 7.58403 0.629339 8.09691 0.50427 8.51194C0.377246 8.93345 0.428928 9.17965 0.530975 9.31625C0.633022 9.45286 0.85836 9.57751 1.31168 9.5928C1.75803 9.60786 2.34877 9.51155 3.05285 9.29449C4.45637 8.8618 6.21579 7.97891 7.9861 6.73976C9.75642 5.50061 11.1738 4.15985 12.038 3.00522C12.4716 2.42599 12.7511 1.91311 12.8762 1.49808C13.0032 1.07657 12.9515 0.830373 12.8495 0.693766L13.1975 0.450193L13.2073 0.463676C14.0283 1.60841 11.8521 4.52465 8.32171 7.01757L8.23773 7.0766C4.64388 9.59216 1.03765 10.7039 0.182994 9.55983L0.173129 9.54634C-0.654305 8.39256 1.56291 5.43915 5.14273 2.93342L5.22696 2.87471C8.79276 0.40062 12.3495 -0.684979 13.1975 0.450193L12.8495 0.693766C12.7474 0.557158 12.5221 0.432515 12.0688 0.417221C11.6224 0.402162 11.0317 0.498465 10.3276 0.715527C8.92409 1.14822 7.16467 2.03111 5.39436 3.27026Z", fill: "currentColor" }), _jsx("path", { d: "M5.74663 3.74184C8.6294 1.72402 11.3888 0.653786 11.9099 1.35141C12.4311 2.04904 10.5166 4.25035 7.63382 6.26818C4.75106 8.286 1.99166 9.35624 1.47052 8.65861C0.949389 7.96098 2.86387 5.75967 5.74663 3.74184Z", fill: "currentColor" }), _jsx("path", { d: "M20 13.6569C20.0108 14.9144 16.4531 15.9616 12.0309 15.999C7.6087 16.0364 3.93884 15.0499 3.87423 13.7928V12.7793C4.13534 12.7498 4.42447 12.6919 4.7369 12.6075C6.12929 13.3217 8.43935 13.9955 12.1025 13.9793C13.8962 13.9557 15.5255 13.7626 16.8029 13.4623C17.9425 13.1715 18.5847 12.8542 19.1849 12.4964C19.785 12.1386 20 11.8451 20 11.8451V13.6569Z", fill: "currentColor" }), _jsx("path", { d: "M12.1366 8.35459C16.4593 8.39544 19.9241 9.52382 19.9241 10.9099L19.9239 10.9264C19.8962 12.3197 16.3675 13.4485 11.9977 13.4661L11.8939 13.4663C9.21486 13.4663 6.84229 13.0486 5.38347 12.4067C5.5702 12.3417 5.76297 12.2692 5.96101 12.1893C6.08435 12.2348 6.21397 12.2794 6.3498 12.3227C7.74905 12.7681 9.70922 13.0506 11.8939 13.0506C14.0785 13.0506 16.0387 12.7681 17.4379 12.3227C18.1399 12.0992 18.6769 11.8422 19.0294 11.5768C19.3875 11.3073 19.4947 11.0784 19.4947 10.9099C19.4947 10.7413 19.3875 10.5125 19.0294 10.2429C18.6769 9.97757 18.1399 9.72053 17.4379 9.49707C16.0387 9.05162 14.0785 8.7691 11.8939 8.7691C11.8048 8.7691 11.7162 8.76959 11.6279 8.77052C11.8019 8.63199 11.9715 8.49326 12.1366 8.35459Z", fill: "currentColor" }), _jsx("path", { d: "M11.8939 9.35105C15.4513 9.35105 18.3352 10.049 18.3352 10.9099C18.3352 11.7708 15.4513 12.4687 11.8939 12.4687C9.78981 12.4687 7.92139 12.2245 6.74588 11.8469C7.90559 11.3051 9.195 10.5513 10.4831 9.63302C10.6047 9.54632 10.7247 9.45917 10.8432 9.3718C11.1851 9.35822 11.5361 9.35105 11.8939 9.35105Z", fill: "currentColor" })] }));
 export default TokenIcon;

package/dist/esm/components/Icons/Wallets/index.js CHANGED Viewed

@@ -21,5 +21,3 @@ export { default as SolflareIcon } from "./Solflare";
 export { default as BraavosIcon } from "./Braavos";
 export { default as ArgentXIcon } from "./ArgentX";
 export { default as FueletIcon } from "./Fuelet";
-export { default as KeplrIcon } from "./Keplr";
-export { default as XverseIcon } from "./Xverse";

package/dist/esm/components/Input/Address/AddressNote.js CHANGED Viewed

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ExternalLink } from "lucide-react";
 import CopyButton from "../../../components/Buttons/copyButton";
 import AddressIcon from "../../../components/Common/AddressIcon";
-const AddressNote = ({ partner, values }) => {
+const UrlAddressNote = ({ partner, values }) => {
     const { to: destination, destination_address } = values;
     return (destination && destination_address &&
         _jsxs("div", { className: "flex flex-col items-center gap-6 mt-2 w-full", children: [_jsx("div", { className: "h-24 w-24 rounded-2xl overflow-hidden", children: _jsx(AddressIcon, { className: "scale-150 h-24 w-24 blur-[1.5px]", address: destination_address, size: 96 }) }), _jsxs("div", { className: "text-center max-w-xs space-y-1", children: [_jsx("p", { className: "text-2xl", children: "Address Confirmation" }), _jsxs("p", { className: "text-secondary-text", children: [_jsx("span", { children: "Destination address was autofilled from URL" }), " ", partner && _jsxs(_Fragment, { children: [_jsx("span", { children: "by" }), " ", _jsxs("span", { children: [partner.display_name, "."] })] }), " ", _jsx("span", { children: "Please double-check its correctness." })] })] }), _jsxs("div", { className: "w-full rounded-lg bg-secondary-500 overflow-hidden px-4 py-3 space-y-2", children: [_jsx("div", { className: "gap-4 flex relative items-center outline-hidden w-full text-primary-text", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("div", { className: "text-secondary-text", children: [_jsx("span", { children: destination?.display_name }), " ", _jsx("span", { children: "address" })] }), _jsxs("div", { className: "flex items-center gap-4 text-secondary-text", children: [_jsx(CopyButton, { toCopy: destination_address }), _jsx("a", { href: destination?.account_explorer_template?.replace('{0}', destination_address) || '', target: "_blank", rel: "noopener noreferrer", children: _jsx(ExternalLink, { className: "h-4 w-4" }) })] })] }) }), _jsxs("div", { className: 'flex gap-3 text-sm items-center w-full', children: [_jsx("div", { className: 'flex shrink-0 bg-secondary-400 text-primary-text items-center justify-center rounded-md h-9 overflow-hidden w-9', children: _jsx(AddressIcon, { className: "scale-150 h-9 w-9", address: destination_address, size: 36 }) }), _jsx("p", { className: "break-all text-sm", children: destination_address })] })] })] }));
 };
-export default AddressNote;
+export default UrlAddressNote;

package/dist/esm/components/Input/Address/AddressPicker/AddressWithIcon.js CHANGED Viewed

@@ -60,11 +60,13 @@ const calculateMaxWidth = (balance) => {
         return 'max-w-[50px]';
     }
 };
-export const ExtendedAddress = ({ address, network, isForCurrency, children, onDisconnect, showDetails = false, title, description, logo: Logo, shouldShowChevron = true }) => {
+export const ExtendedAddress = ({ address, network, isForCurrency, children, onDisconnect, showDetails = false, title, description, logo: Logo, shouldShowChevron = true, isNativeToken = false }) => {
     const [isCopied, setCopied] = useCopyClipboard();
     const [isPopoverOpen, setPopoverOpen] = useState(false);
     // Resolver for action buttons
     const getActionButtons = () => {
+        if (isNativeToken)
+            return { buttons: [], showTitles: false };
         const buttons = [
             {
                 title: 'Copy',
@@ -91,7 +93,8 @@ export const ExtendedAddress = ({ address, network, isForCurrency, children, onD
                                         _jsxs("div", { className: "group-hover/addressItem:underline hover:text-secondary-text transition duration-200 no-underline flex gap-1 items-center cursor-pointer", children: [_jsx("p", { className: `${isForCurrency ? "text-xs self-end" : "text-sm"} block font-medium`, children: shortenAddress(address) }), shouldShowChevron ?
                                                     _jsx(ChevronDown, { className: "invisible group-hover/addressItem:visible h-4 w-4" })
                                                     : null] }) }), _jsx(TooltipContent, { side: "bottom", children: _jsx("p", { children: isForCurrency ? "View token details" : "View address details" }) })] }) }) }), _jsxs(PopoverContent, { className: "w-auto p-3 min-w-72 flex flex-col gap-3 items-stretch !rounded-2xl !bg-secondary-500", side: "top", avoidCollisions: true, collisionPadding: 8, sticky: "always", children: [showDetails && (title || description) && (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-3", children: [Logo ?
-                                            typeof Logo == 'string' ? (_jsx(ImageWithFallback, { src: Logo, alt: title || "Token logo", height: "40", width: "40", loading: "eager", fetchPriority: "high", className: "rounded-full object-contain flex-shrink-0 h-10 w-10" })) : (_jsx(Logo, { className: "w-10 h-10 text-secondary-text flex-shrink-0" })) : (_jsx(Info, { className: "w-10 h-10 text-secondary-text flex-shrink-0" })), _jsxs("div", { className: "flex-1 font-medium", children: [title && _jsx("h3", { className: "text-base leading-5 text-primary-text", children: title }), description && _jsx("p", { className: "text-sm leading-[18px] text-secondary-text", children: description })] })] }), _jsx("hr", { className: "border rounded-full border-secondary-400 mt-2" })] })), _jsxs("p", { className: "text-secondary-text text-sm leading-5 font-mono break-all text-left", children: [_jsx("span", { className: "text-primary-text font-medium", children: address.slice(0, 4) }), _jsx("span", { children: address.slice(4, -4) }), _jsx("span", { className: "text-primary-text font-medium", children: address.slice(-4) })] }), _jsx("div", { className: "flex gap-3", children: buttons.map((button) => (_jsx(ActionButton, { showTitle: showTitles, ...button }, button.title))) })] })] }) }));
+                                            typeof Logo == 'string' ? (_jsx(ImageWithFallback, { src: Logo, alt: title || "Token logo", height: "40", width: "40", loading: "eager", fetchPriority: "high", className: "rounded-full object-contain flex-shrink-0 h-10 w-10" })) : (_jsx(Logo, { className: "w-10 h-10 text-secondary-text flex-shrink-0" })) : (_jsx(Info, { className: "w-10 h-10 text-secondary-text flex-shrink-0" })), _jsxs("div", { className: "flex-1 font-medium", children: [title && _jsx("h3", { className: "text-base leading-5 text-primary-text", children: title }), description && _jsx("p", { className: "text-sm leading-[18px] text-secondary-text", children: description })] })] }), _jsx("hr", { className: "border rounded-full border-secondary-400 mt-2" })] })), _jsx("p", { className: `text-secondary-text text-sm leading-5 break-all text-left ${!isNativeToken ? 'font-mono' : ''}`, children: isNativeToken ? address :
+                                _jsxs(_Fragment, { children: [_jsx("span", { className: "text-primary-text font-medium", children: address.slice(0, 4) }), _jsx("span", { children: address.slice(4, -4) }), _jsx("span", { className: "text-primary-text font-medium", children: address.slice(-4) })] }) }), buttons.length > 0 && (_jsx("div", { className: "flex gap-3", children: buttons.map((button) => (_jsx(ActionButton, { showTitle: showTitles, ...button }, button.title))) }))] })] }) }));
 };
 const ActionButton = ({ title, Icon, onClick, href, iconClassNames, showTitle = true }) => {
     const [showTooltip, setShowTooltip] = useState(false);

package/dist/esm/components/Input/Address/ContractAddressNote.js ADDED Viewed

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import AddressIcon from "../../../components/Common/AddressIcon";
+import { Checkbox } from "../../../components/shadcn/checkbox";
+const ContractAddressNote = ({ values, onDontShowAgainChange }) => {
+    const [dontShowAgain, setDontShowAgain] = useState(false);
+    const { to: destination, destination_address } = values;
+    useEffect(() => {
+        onDontShowAgainChange?.(dontShowAgain);
+    }, [dontShowAgain, onDontShowAgainChange]);
+    const handleCheckboxChange = () => {
+        setDontShowAgain(!dontShowAgain);
+    };
+    return (destination && destination_address &&
+        _jsxs("div", { className: "flex flex-col items-center gap-4 mt-2 w-full", children: [_jsx("div", { className: "h-24 w-24 rounded-2xl overflow-hidden", children: _jsx(AddressIcon, { className: "scale-150 h-24 w-24 blur-[1.5px]", address: destination_address, size: 96 }) }), _jsxs("div", { className: "text-center max-w-xs space-y-1", children: [_jsx("p", { className: "text-2xl", children: "Address Confirmation" }), _jsxs("p", { className: "text-secondary-text", children: [_jsx("span", { children: "Destination address is a contract in a network but not in " }), _jsx("span", { children: destination?.display_name || 'the destination' }), _jsx("span", { children: " network. Please double-check your destination address." })] })] }), _jsxs("div", { className: "flex items-center gap-2 self-start", children: [_jsx(Checkbox, { id: "dont-show-again", checked: dontShowAgain, onClick: handleCheckboxChange }), _jsx("label", { htmlFor: "dont-show-again", className: "w-full cursor-pointer", children: _jsx("span", { className: "text-sm text-secondary-text", children: "Don't show this again" }) })] })] }));
+};
+export default ContractAddressNote;

package/dist/esm/components/Input/Address/UrlAddressNote.js ADDED Viewed

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ExternalLink } from "lucide-react";
+import CopyButton from "../../../components/Buttons/copyButton";
+import AddressIcon from "../../../components/Common/AddressIcon";
+const UrlAddressNote = ({ partner, values }) => {
+    const { to: destination, destination_address } = values;
+    return (destination && destination_address &&
+        _jsxs("div", { className: "flex flex-col items-center gap-6 mt-2 w-full", children: [_jsx("div", { className: "h-24 w-24 rounded-2xl overflow-hidden", children: _jsx(AddressIcon, { className: "scale-150 h-24 w-24 blur-[1.5px]", address: destination_address, size: 96 }) }), _jsxs("div", { className: "text-center max-w-xs space-y-1", children: [_jsx("p", { className: "text-2xl", children: "Address Confirmation" }), _jsxs("p", { className: "text-secondary-text", children: [_jsx("span", { children: "Destination address was autofilled from URL" }), " ", partner && _jsxs(_Fragment, { children: [_jsx("span", { children: "by" }), " ", _jsxs("span", { children: [partner.display_name, "."] })] }), " ", _jsx("span", { children: "Please double-check its correctness." })] })] }), _jsxs("div", { className: "w-full rounded-lg bg-secondary-500 overflow-hidden px-4 py-3 space-y-2", children: [_jsx("div", { className: "gap-4 flex relative items-center outline-hidden w-full text-primary-text", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("div", { className: "text-secondary-text", children: [_jsx("span", { children: destination?.display_name }), " ", _jsx("span", { children: "address" })] }), _jsxs("div", { className: "flex items-center gap-4 text-secondary-text", children: [_jsx(CopyButton, { toCopy: destination_address }), _jsx("a", { href: destination?.account_explorer_template?.replace('{0}', destination_address) || '', target: "_blank", rel: "noopener noreferrer", children: _jsx(ExternalLink, { className: "h-4 w-4" }) })] })] }) }), _jsxs("div", { className: 'flex gap-3 text-sm items-center w-full', children: [_jsx("div", { className: 'flex shrink-0 bg-secondary-400 text-primary-text items-center justify-center rounded-md h-9 overflow-hidden w-9', children: _jsx(AddressIcon, { className: "scale-150 h-9 w-9", address: destination_address, size: 36 }) }), _jsx("p", { className: "break-all text-sm", children: destination_address })] })] })] }));
+};
+export default UrlAddressNote;

package/dist/esm/components/Input/Amount/ExchangeReceiveAmount.js CHANGED Viewed

@@ -4,5 +4,5 @@ import clsx from "clsx";
 export const ExchangeReceiveAmount = ({ destination_token, fee, isFeeLoading }) => {
     const receive_amount = fee?.quote.receive_amount;
     const receiveAmountInUsd = receive_amount && destination_token && fee.quote?.destination_token?.price_in_usd ? (receive_amount * fee.quote.destination_token.price_in_usd).toFixed(2) : undefined;
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full flex min-w-0 font-normal border-0 text-xl text-primary-text relative truncate items-baseline flex-row", children: [_jsx("div", { className: "flex items-center justify-start relative w-fit", children: _jsxs("div", { className: clsx("w-full flex items-center py-[3px] pr-2", { "animate-pulse-stronger": isFeeLoading }, { "text-secondary-text": !receive_amount }), children: [_jsx(NumberFlow, { value: receive_amount || 0, trend: 0, format: { maximumFractionDigits: fee?.quote.destination_token?.decimals || 2 } }), _jsx("span", { className: "ml-1", children: destination_token?.symbol })] }) }), _jsx("div", { className: "flex items-baseline space-x-2 mt-1.5", children: _jsx("span", { className: "text-sm leading-4 font-medium text-secondary-text h-5", children: _jsx(NumberFlow, { className: "p-0", value: Number(receiveAmountInUsd) || 0, format: { style: 'currency', currency: 'USD', maximumFractionDigits: receiveAmountInUsd ? 2 : 0 }, trend: 0 }) }) })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full flex min-w-0 font-normal border-0 text-xl text-primary-text relative truncate items-baseline flex-row", children: [_jsx("div", { className: "flex items-center justify-start relative w-fit", children: _jsxs("div", { className: clsx("w-full flex items-center py-[3px] pr-2", { "animate-pulse-stronger": isFeeLoading }, { "text-secondary-text": !receive_amount }), children: [_jsx(NumberFlow, { value: receive_amount || 0, trend: 0, format: { maximumFractionDigits: fee?.quote.destination_token?.decimals || 2 } }), _jsx("span", { className: "ml-1", children: destination_token?.symbol })] }) }), _jsx("div", { className: "flex items-baseline space-x-2 mt-1.5", children: _jsx("span", { className: "text-sm leading-4 font-medium text-secondary-text h-5", children: _jsx(NumberFlow, { className: "p-0", prefix: "$", value: Number(receiveAmountInUsd || 0), format: { maximumFractionDigits: receiveAmountInUsd ? 2 : 0 }, trend: 0 }) }) })] }) }));
 };

package/dist/esm/components/Input/Amount/PriceImpact.js CHANGED Viewed

@@ -4,18 +4,16 @@ import { Triangle } from "lucide-react";
 import { Tooltip, TooltipArrow, TooltipContent, TooltipTrigger } from "../../../components/shadcn/tooltip";
 import clsx from 'clsx';
 import { resolvePriceImpactValues } from "../../../lib/fees";
-export const PriceImpact = ({ quote, className }) => {
-    const priceImpactValues = useMemo(() => quote ? resolvePriceImpactValues(quote) : undefined, [quote]);
+export const PriceImpact = ({ quote, refuel, className }) => {
+    const priceImpactValues = useMemo(() => quote ? resolvePriceImpactValues(quote, refuel) : undefined, [quote, refuel]);
     if (priceImpactValues === undefined)
         return null;
-    return (_jsx(_Fragment, { children: _jsxs(Tooltip, { openOnClick: true, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: clsx("flex text-secondary-text items-center cursor-default hover:text-primary-text", className, { "text-warning-foreground hover:text-warning-foreground/80": priceImpactValues.highMarketPriceImpact }), children: _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx("span", { children: "(" }), _jsx(Triangle, { fill: "currentColor", className: `w-3 h-3 stroke-1 fill-current transition-transform ${priceImpactValues.priceImpact !== undefined && priceImpactValues.priceImpact < 0 ? "rotate-180" : ""}` }), _jsxs("span", { children: ["$", Math.abs(priceImpactValues.priceImpact || 0).toFixed(2)] }), _jsx("span", { children: ")" })] }) }) }), _jsxs(TooltipContent, { arrowClasses: "!bg-secondary-500 !fill-secondary-500", side: "top", align: "center", className: "bg-secondary-500! border-secondary-500! text-secondary-text! text-xs font-normal rounded-xl p-4! shadow-card", children: [_jsxs("p", { className: clsx("text-primary-text font-medium text-sm flex items-baseline space-x-0.5 mb-1", { "text-warning-foreground": priceImpactValues.highMarketPriceImpact }), children: [priceImpactValues.highMarketPriceImpact ? (priceImpactValues.criticalMarketPriceImpact ? _jsx("span", { children: "Critical price impact:" }) : _jsx("span", { children: "High price impact:" })) : _jsx("span", { children: "Price impact:" }), _jsx("span", { children: formatCurrency(priceImpactValues.priceImpact) }), _jsx("span", { className: clsx("text-secondary-text text-xs font-normal", { "text-warning-foreground": priceImpactValues.highMarketPriceImpact }), children: priceImpactValues.priceImpactPercentage ? `(${priceImpactValues.priceImpactPercentage < 0 ? "-" : "+"}${Math.abs(priceImpactValues.priceImpactPercentage)}%)` : "" })] }), _jsx("p", { children: "This is the difference in total USD value" }), _jsx("p", { children: "between the assets you send and the assets you receive." }), _jsxs("ul", { className: "mt-3 space-y-2 ", children: [_jsxs("li", { className: "list-none flex justify-between", children: [_jsx("span", { children: "Market impact" }), _jsx("span", { className: "text-primary-text", children: _jsx("span", { children: formatCurrency(priceImpactValues.marketImpact) }) })] }), _jsxs("li", { className: "list-none flex justify-between", children: [_jsx("span", { children: "Bridge expenses" }), _jsxs("span", { className: "text-primary-text", children: [_jsx("span", { children: priceImpactValues.bridgeExpenses?.toFixed(2) !== (0).toFixed(2) ? "-$" : "$" }), _jsx("span", { children: Math.abs(Number(priceImpactValues.bridgeExpenses)).toFixed(2) })] })] }), _jsxs("li", { className: "list-none flex justify-between", children: [_jsx("span", { children: "Layerswap fees" }), _jsxs("span", { className: "text-primary-text", children: [_jsx("span", { children: priceImpactValues.layerswapFees?.toFixed(2) !== (0).toFixed(2) ? "-$" : "$" }), _jsx("span", { children: Math.abs(Number(priceImpactValues.layerswapFees)).toFixed(2) })] })] })] }), _jsx(TooltipArrow, { className: "bg-secondary-500! fill-secondary-500!" })] })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs(Tooltip, { openOnClick: true, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: clsx("flex text-secondary-text items-center cursor-default hover:text-primary-text", className, { "text-warning-foreground hover:text-warning-foreground/80": priceImpactValues.highMarketPriceImpact }), children: _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx("span", { children: "(" }), _jsx(Triangle, { fill: "currentColor", className: `w-3 h-3 stroke-1 fill-current transition-transform ${priceImpactValues.priceImpact !== undefined && priceImpactValues.priceImpact < 0 ? "rotate-180" : ""}` }), _jsxs("span", { children: ["$", Math.abs(priceImpactValues.priceImpact || 0).toFixed(2)] }), _jsx("span", { children: ")" })] }) }) }), _jsxs(TooltipContent, { arrowClasses: "!bg-secondary-500 !fill-secondary-500", side: "top", align: "center", className: "bg-secondary-500! border-secondary-500! text-secondary-text! text-xs font-normal rounded-xl p-4! shadow-card", children: [_jsxs("p", { className: clsx("text-primary-text font-medium text-sm flex items-baseline space-x-0.5 mb-1", { "text-warning-foreground": priceImpactValues.highMarketPriceImpact }), children: [priceImpactValues.highMarketPriceImpact ? (priceImpactValues.criticalMarketPriceImpact ? _jsx("span", { children: "Critical price impact:" }) : _jsx("span", { children: "High price impact:" })) : _jsx("span", { children: "Price impact:" }), _jsx("span", { children: formatCurrency(priceImpactValues.priceImpact) }), _jsx("span", { className: clsx("text-secondary-text text-xs font-normal", { "text-warning-foreground": priceImpactValues.highMarketPriceImpact }), children: priceImpactValues.priceImpactPercentage ? `(${priceImpactValues.priceImpactPercentage < 0 ? "-" : "+"}${Math.abs(priceImpactValues.priceImpactPercentage)}%)` : "" })] }), _jsx("p", { children: "This is the difference in total USD value" }), _jsx("p", { children: "between the assets you send and the assets you receive." }), _jsxs("ul", { className: "mt-3 space-y-2 ", children: [_jsxs("li", { className: "list-none flex justify-between", children: [_jsx("span", { children: "Market impact" }), _jsx("span", { className: "text-primary-text", children: _jsx("span", { children: formatCurrency(priceImpactValues.marketImpact) }) })] }), _jsxs("li", { className: "list-none flex justify-between", children: [_jsx("span", { children: "Bridge expenses" }), _jsxs("span", { className: "text-primary-text", children: [_jsx("span", { children: priceImpactValues.bridgeExpenses?.toFixed(2) !== (0).toFixed(2) ? "-$" : "$" }), _jsx("span", { children: Math.abs(Number(priceImpactValues.bridgeExpenses)).toFixed(2) })] })] }), _jsxs("li", { className: "list-none flex justify-between", children: [_jsx("span", { children: "Layerswap fees" }), _jsxs("span", { className: "text-primary-text", children: [_jsx("span", { children: priceImpactValues.layerswapFees?.toFixed(2) !== (0).toFixed(2) ? "-$" : "$" }), _jsx("span", { children: Math.abs(Number(priceImpactValues.layerswapFees)).toFixed(2) })] })] }), refuel && _jsxs("li", { className: "list-none flex justify-between", children: [_jsx("span", { children: "Refuel" }), _jsxs("span", { className: "text-primary-text", children: [_jsx("span", { children: refuel?.amount_in_usd?.toFixed(2) !== (0).toFixed(2) ? "-$" : "$" }), _jsx("span", { children: Math.abs(Number(refuel?.amount_in_usd)).toFixed(2) })] })] })] }), _jsx(TooltipArrow, { className: "bg-secondary-500! fill-secondary-500!" })] })] }) }));
 };
 const formatCurrency = (value, decimals = 2) => {
     if (value === undefined || isNaN(value))
         return "";
     const rounded = Number(value.toFixed(decimals));
-    // If rounded value is effectively zero, show "$0.00" (no minus sign)
-    // Math.pow(10, -decimals) defines the smallest meaningful value at the precision
     const epsilon = Math.pow(10, -decimals);
     if (Math.abs(rounded) < epsilon) {
         return `$${(0).toFixed(decimals)}`;

package/dist/esm/components/Input/Amount/ReceiveAmount.js CHANGED Viewed

@@ -6,5 +6,5 @@ export const ReceiveAmount = ({ destination_token, fee, isFeeLoading }) => {
     const receive_amount = fee?.quote.receive_amount;
     const receiveAmountInUsd = receive_amount && destination_token && fee.quote?.destination_token?.price_in_usd ? (receive_amount * fee.quote.destination_token.price_in_usd).toFixed(2) : undefined;
     const quote = fee?.quote;
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex-col w-full flex min-w-0 font-normal border-0 text-[28px] leading-7 text-primary-text relative truncate", children: [_jsx("div", { className: "w-full flex items-center justify-start relative", children: _jsx("div", { className: clsx("w-full flex items-center pt-2 pr-3", { "animate-pulse-stronger": isFeeLoading }, { "text-secondary-text": !receive_amount }), children: _jsx(NumberFlow, { value: receive_amount || 0, trend: 0, format: { maximumFractionDigits: fee?.quote.destination_token?.decimals || 2 } }) }) }), _jsxs("div", { className: "flex items-baseline space-x-2 h-5", children: [_jsx("span", { className: "text-base leading-5 font-medium text-secondary-text h-5", children: _jsx(NumberFlow, { className: "p-0", value: Number(receiveAmountInUsd) || 0, format: { style: 'currency', currency: 'USD', maximumFractionDigits: receiveAmountInUsd ? 2 : 0 }, trend: 0 }) }), _jsx(PriceImpact, { className: "h-5 text-base leading-5", quote: quote })] })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex-col w-full flex min-w-0 font-normal border-0 text-[28px] leading-7 text-primary-text relative truncate", children: [_jsx("div", { className: "w-full flex items-center justify-start relative", children: _jsx("div", { className: clsx("w-full flex items-center pt-2 pr-3", { "animate-pulse-stronger": isFeeLoading }, { "text-secondary-text": !receive_amount }), children: _jsx(NumberFlow, { value: receive_amount || 0, trend: 0, format: { maximumFractionDigits: fee?.quote.destination_token?.decimals || 2 } }) }) }), _jsxs("div", { className: "flex items-baseline space-x-2 h-5", children: [_jsx("span", { className: "text-base leading-5 font-medium text-secondary-text h-5", children: _jsx(NumberFlow, { className: "p-0", value: Number(receiveAmountInUsd || 0), prefix: "$", format: { maximumFractionDigits: receiveAmountInUsd ? 2 : 0 }, trend: 0 }) }), _jsx(PriceImpact, { className: "h-5 text-base leading-5", quote: quote, refuel: fee?.refuel })] })] }) }));
 };

package/dist/esm/components/Input/RoutePicker/Content.js CHANGED Viewed

@@ -8,11 +8,25 @@ import { useSelectorState } from "../../../components/Select/Selector/Index";
 import useWallet from "../../../hooks/useWallet";
 import ConnectWalletButton from "../../../components/Common/ConnectWalletButton";
 import { SearchComponent } from "../Search";
+import clsx from "clsx";
 export const Content = ({ searchQuery, setSearchQuery, rowElements, selectedToken, selectedRoute, direction, onSelect, partialPublished }) => {
     const parentRef = useRef(null);
     const [openValues, setOpenValues] = useState(selectedRoute ? [selectedRoute] : []);
     const { shouldFocus } = useSelectorState();
     const { wallets } = useWallet();
+    const [isScrolling, setIsScrolling] = useState(false);
+    const scrollTimeout = useRef(null);
+    const handleScroll = () => {
+        setIsScrolling(true);
+        if (scrollTimeout.current)
+            clearTimeout(scrollTimeout.current);
+        scrollTimeout.current = setTimeout(() => {
+            setIsScrolling(false);
+        }, 1000);
+    };
+    useEffect(() => {
+        return () => clearTimeout(scrollTimeout.current);
+    }, []);
     const toggleAccordionItem = (value) => {
         setOpenValues((prev) => prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]);
     };
@@ -42,7 +56,9 @@ export const Content = ({ searchQuery, setSearchQuery, rowElements, selectedToke
     useEffect(() => {
         return () => setSearchQuery('');
     }, []);
-    return _jsxs("div", { className: "overflow-y-auto flex flex-col h-full z-40 openpicker", children: [_jsx(SearchComponent, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, isOpen: shouldFocus, className: "mb-2" }), _jsx(LayoutGroup, { children: _jsxs(motion.div, { layoutScroll: true, className: "select-text in-has-[.hide-main-scrollbar]:overflow-y-hidden overflow-y-auto overflow-x-hidden styled-scroll pr-3 h-full", ref: parentRef, children: [wallets.length === 0 && direction === 'from' && !searchQuery &&
+    return _jsxs("div", { className: "overflow-y-auto overflow-x-hidden flex flex-col h-full z-40 openpicker", children: [_jsx(SearchComponent, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, isOpen: shouldFocus }), _jsx(LayoutGroup, { children: _jsxs(motion.div, { layoutScroll: true, onScroll: handleScroll, className: clsx("select-text in-has-[.hide-main-scrollbar]:overflow-y-hidden overflow-y-auto overflow-x-hidden scrollbar:w-1! scrollbar:h-1! pr-0.5 scrollbar-thumb:bg-transparent h-full", {
+                        "styled-scroll!": isScrolling
+                    }), ref: parentRef, children: [wallets.length === 0 && direction === 'from' && !searchQuery &&
                             _jsx(ConnectWalletButton, { descriptionText: "Connect your wallet to browse your assets and choose easier", className: "w-full my-2.5" }), _jsx("div", { className: "relative", children: _jsx(Accordion, { type: "multiple", value: openValues, children: _jsx("div", { children: _jsxs("div", { style: {
                                             height: virtualizer.getTotalSize(),
                                             width: '100%',

package/dist/esm/components/Input/RoutePicker/RouteTokenSwitch.js CHANGED Viewed

@@ -1,20 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { motion } from "framer-motion";
 import TokenIcon from "../../../components/Icons/TokenIcon";
-import { Globe } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/shadcn/tooltip";
 import clsx from "clsx";
 import { useRouteTokenSwitchStore } from "../../../stores/routeTokenSwitchStore";
+import GlobeIcon from "../../../components/Icons/GlobeIcon";
 const switchValues = [
-    { value: false, id: 'network', label: "Group by Network", icon: Globe },
+    { value: false, id: 'network', label: "Group by Network", icon: GlobeIcon },
     { value: true, id: 'token', label: "Group by Token", icon: TokenIcon },
 ];
 const RouteTokenSwitch = () => {
     const showTokens = useRouteTokenSwitchStore((s) => s.showTokens);
     const setShowTokens = useRouteTokenSwitchStore((s) => s.setShowTokens);
     const activeTab = switchValues.find(item => item.value === showTokens)?.id || switchValues[0].id;
-    return (_jsx("div", { className: "flex justify-end", children: _jsx("div", { className: "relative flex items-center bg-secondary-500 rounded-lg p-1", children: switchValues.map((item, index) => (_jsxs(Tooltip, { children: [_jsxs(TooltipTrigger, { type: "button", onClick: () => { setShowTokens(item.value); }, className: "z-10 flex items-center justify-center rounded-2xl px-4 py-1 relative", children: [activeTab === item.id && (_jsx(motion.span, { layoutId: "bubble", className: "absolute inset-0 z-10 rounded-md bg-secondary-300 mix-blend-color", transition: { type: "spring", bounce: 0.2, duration: 0.6 } })), _jsx(item.icon, { className: clsx("text-primary-text-tertiary h-5 w-5", {
-                                    "!text-primary-text": activeTab === item.id,
+    return (_jsx("div", { className: "flex justify-end", children: _jsx("div", { className: "relative flex items-center bg-secondary-500 rounded-xl p-1", children: switchValues.map((item, index) => (_jsxs(Tooltip, { children: [_jsxs(TooltipTrigger, { type: "button", onClick: () => { setShowTokens(item.value); }, className: "z-10 flex items-center justify-center rounded-lg px-4 py-1 relative", children: [activeTab === item.id && (_jsx(motion.span, { layoutId: "bubble", className: "absolute inset-0 z-10 rounded-lg bg-secondary-300 mix-blend-color", transition: { type: "spring", bounce: 0.2, duration: 0.6 } })), _jsx(item.icon, { className: clsx("text-primary-text-tertiary h-5 w-5", {
+                                    "text-primary-text!": activeTab === item.id,
                                 }) })] }), _jsx(TooltipContent, { children: _jsx("p", { children: item.label }) })] }, index))) }) }));
 };
 export default RouteTokenSwitch;

package/dist/esm/components/Input/RoutePicker/Routes.js CHANGED Viewed

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { truncateDecimals } from "../../../components/utils/RoundDecimals";
 import { SelectItem } from "../../../components/Select/Selector/SelectItem";
-import { ChevronDown, Info } from "lucide-react";
+import { ChevronDown } from "lucide-react";
 import RoutePickerIcon from "../../../components/Icons/RoutePickerPlaceholder";
 import { useBalance } from "../../../lib/balances/useBalance";
 import { ImageWithFallback } from "../../../components/Common/ImageWithFallback";
 import { getKey, useBalanceStore } from "../../../stores/balanceStore";
 import { useSwapAccounts } from "../../../context/swapAccounts";
-import clsx from "clsx";
 import { formatUsd } from "../../../components/utils/formatUsdAmount";
-import { ExtendedAddress } from "../Address/AddressPicker/AddressWithIcon";
 import { getTotalBalanceInUSD } from "../../../helpers/balanceHelper";
 import { useMemo } from "react";
+import { isNewListed, NewBadge } from "../../../lib/isNewListed";
+import { TokenInfoIcon, TokenTitleWithBalance } from "./TokenTitleDetails";
 export const CurrencySelectItemDisplay = (props) => {
     const { item, route, direction, type } = props;
     return _jsxs(SelectItem, { className: "group", children: [_jsx(SelectItem.Logo, { imgSrc: item.logo, altText: `${item.symbol} logo`, className: "rounded-full" }), _jsx(NetworkTokenTitle, { item: item, route: route, direction: direction, type: type })] });
@@ -24,10 +24,8 @@ export const NetworkTokenTitle = (props) => {
     const tokenbalance = balances?.find(b => b.token === item.symbol);
     const formatted_balance_amount = (tokenbalance?.amount || tokenbalance?.amount === 0) ? truncateDecimals(tokenbalance?.amount, item.precision) : '';
     const usdAmount = (tokenbalance?.amount && item?.price_in_usd) ? item?.price_in_usd * tokenbalance?.amount : undefined;
-    return _jsx(SelectItem.DetailedTitle, { title: item.symbol, secondaryImageAlt: route.display_name, secondary: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { children: route.display_name }), _jsx("div", { className: "transition-all duration-300 opacity-0 group-hover:opacity-100 group-hover:delay-400 click-delay-on-hover", children: item.contract ?
-                        _jsx(ExtendedAddress, { network: route, isForCurrency: true, showDetails: true, address: item.contract, logo: item.logo, title: item.symbol, description: item.display_asset, children: _jsxs("div", { className: "flex items-center gap-1 text-secondary-text text-xs cursor-pointer hover:text-primary-text", children: [_jsxs("p", { className: "max-w-[90px] truncate", children: [_jsx("span", { children: "\u2022" }), " ", _jsx("span", { children: item.display_asset || item.symbol })] }), _jsx(Info, { className: "h-3 w-3" })] }) })
-                        :
-                            _jsxs("p", { className: "flex items-center gap-1 text-xs text-secondary-text", children: [_jsx("span", { children: "\u2022" }), _jsx("span", { className: "truncate max-w-[80px]", children: item.display_asset || item.symbol })] }) })] }), secondaryLogoSrc: route.logo, children: (tokenbalance && Number(tokenbalance?.amount) > 0) ? (_jsxs("span", { className: "text-sm text-secondary-text text-right my-auto leading-4 font-medium", children: [Number(usdAmount) > 0 && (_jsx("div", { className: clsx("text-primary-text text-base", { '!text-lg !leading-[22px]': type === 'suggested_token' }), children: formatUsd(usdAmount) })), _jsx("div", { className: 'text-xs leading-4', children: formatted_balance_amount })] })) : _jsx(_Fragment, {}) });
+    const isNewlyListed = isNewListed(item?.listing_date);
+    return _jsx(SelectItem.DetailedTitle, { title: _jsx(TokenTitleWithBalance, { item: item, route: route, tokenbalance: tokenbalance, usdAmount: usdAmount, isNewlyListed: isNewlyListed }), secondaryImageAlt: route.display_name, secondary: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "truncate", children: route.display_name }), _jsx(TokenInfoIcon, { item: item, route: route, className: "xs:hidden transition-all duration-300 opacity-0 group-hover:opacity-100 group-hover:delay-400 click-delay-on-hover shrink-0" })] }), secondaryLogoSrc: route.logo, children: (tokenbalance && Number(tokenbalance?.amount) > 0) ? (_jsx("span", { className: "text-sm text-secondary-text text-right my-auto font-medium block", children: _jsx("div", { className: 'text-xs leading-4 truncate', children: formatted_balance_amount }) })) : _jsx(_Fragment, {}) });
 };
 export const NetworkRouteSelectItemDisplay = (props) => {
     const { item, direction, hideTokenImages } = props;
@@ -40,11 +38,14 @@ export const NetworkRouteSelectItemDisplay = (props) => {
     const filteredNetworkTokens = item?.tokens?.filter(token => tokensWithBalance?.includes(token.symbol));
     const hasLoadedBalances = totalInUSD !== null && Number(totalInUSD) > 0;
     const showTokenLogos = hasLoadedBalances && filteredNetworkTokens?.length;
-    return (_jsxs(SelectItem, { className: "bg-secondary-500 group rounded-xl hover:bg-secondary-400 group/item relative pr-7 py-2", children: [_jsx(SelectItem.Logo, { imgSrc: item.logo, altText: `${item.display_name} logo`, className: "rounded-md" }), _jsx(SelectItem.Title, { children: _jsxs(_Fragment, { children: [_jsx("span", { children: item.display_name }), hasLoadedBalances ? (_jsxs("div", { className: `${showTokenLogos ? "flex flex-col space-y-0.5" : ""} ${hideTokenImages ? "hidden" : ""}`, children: [_jsx("span", { className: "text-secondary-text text-sm leading-4 font-medium", children: formatUsd(totalInUSD) }), showTokenLogos ? (_jsxs("div", { className: "flex justify-end items-center -space-x-2 relative h-4", children: [filteredNetworkTokens.slice(0, 3).map((t, index) => (_jsx(ImageWithFallback, { src: t.logo, alt: `${t.symbol} logo`, height: "16", width: "16", loading: "eager", fetchPriority: 'high', className: "rounded-full object-contain" }, `${t.symbol}-${index}`))), filteredNetworkTokens.length > 3 && (_jsx("div", { className: "w-4 h-4 bg-secondary-600 text-primary-text text-[8px] rounded-full flex items-center justify-center border-2 border-background", children: _jsxs("span", { children: ["+", filteredNetworkTokens.length - 3] }) }))] })) : _jsx(_Fragment, {})] })) : _jsx(_Fragment, {}), _jsx(ChevronDown, { className: "!w-3.5 !h-3.5 absolute right-2 top-1/2 -translate-y-1/2 text-secondary-text transition-opacity duration-200 opacity-0 group-hover/item:opacity-100", "aria-hidden": "true" })] }) })] }));
+    const haveNewlyListedTokens = useMemo(() => item.tokens?.some(t => isNewListed(t.listing_date)), [item]);
+    return (_jsxs(SelectItem, { className: "bg-secondary-500 group rounded-xl hover:bg-secondary-400 group/item relative pr-7 py-2", children: [_jsx(SelectItem.Logo, { imgSrc: item.logo, altText: `${item.display_name} logo`, className: "rounded-md" }), _jsx(SelectItem.Title, { children: _jsxs(_Fragment, { children: [_jsx("span", { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { children: item.display_name }), haveNewlyListedTokens &&
+                                        _jsx(NewBadge, {})] }) }), hasLoadedBalances ? (_jsxs("div", { className: `${showTokenLogos ? "flex flex-col space-y-0.5" : ""} ${hideTokenImages ? "hidden" : ""}`, children: [_jsx("span", { className: "text-secondary-text text-sm leading-4 font-medium", children: formatUsd(totalInUSD) }), showTokenLogos ? (_jsxs("div", { className: "flex justify-end items-center -space-x-2 relative h-4", children: [filteredNetworkTokens.slice(0, 3).map((t, index) => (_jsx(ImageWithFallback, { src: t.logo, alt: `${t.symbol} logo`, height: "16", width: "16", loading: "eager", fetchPriority: 'high', className: "rounded-full object-contain" }, `${t.symbol}-${index}`))), filteredNetworkTokens.length > 3 && (_jsx("div", { className: "w-4 h-4 bg-secondary-600 text-primary-text text-[8px] rounded-full flex items-center justify-center border-2 border-background", children: _jsxs("span", { children: ["+", filteredNetworkTokens.length - 3] }) }))] })) : _jsx(_Fragment, {})] })) : _jsx(_Fragment, {}), _jsx(ChevronDown, { className: "!w-3.5 !h-3.5 absolute right-2 top-1/2 -translate-y-1/2 text-secondary-text transition-opacity duration-200 opacity-0 group-hover/item:opacity-100", "aria-hidden": "true" })] }) })] }));
 };
 export const GroupedTokenHeader = ({ item, direction, hideTokenImages }) => {
     const swapAccounts = useSwapAccounts(direction);
     const tokens = item.items;
+    const haveNewlyListedTokens = useMemo(() => tokens.some(t => isNewListed(t.route.token.listing_date)), [tokens]);
     const balances = useBalanceStore(s => s.balances);
     const networksWithBalance = Array.from(new Map(tokens
         .map(({ route }) => {
@@ -61,7 +62,6 @@ export const GroupedTokenHeader = ({ item, direction, hideTokenImages }) => {
         const address = swapAccounts.find(w => (direction == 'from' ? w.provider?.withdrawalSupportedNetworks : w.provider?.autofillSupportedNetworks)?.includes(route.route.name))?.address;
         const key = address && route.route ? getKey(address, route.route) : 'unknown';
         const tokenSymbol = route.token.symbol;
-        const networkName = route.route.name;
         const price = route.token.price_in_usd;
         const networkBalances = balances?.[key];
         const balanceEntry = networkBalances?.data?.balances?.find((b) => b.token === tokenSymbol);
@@ -72,7 +72,8 @@ export const GroupedTokenHeader = ({ item, direction, hideTokenImages }) => {
     const mainToken = tokens[0]?.route.token;
     const hasLoadedBalances = tokenBalances.hasVale && Number(tokenBalances.sum) >= 0;
     const showNetworkIcons = hasLoadedBalances && networksWithBalance.length > 0;
-    return (_jsxs(SelectItem, { className: "bg-secondary-500 group rounded-xl hover:bg-secondary-400 group/item relative pr-7 py-2", children: [_jsx(SelectItem.Logo, { imgSrc: mainToken.logo, altText: `${mainToken.symbol} logo`, className: "rounded-full" }), _jsx(SelectItem.Title, { children: _jsxs(_Fragment, { children: [_jsx("span", { children: mainToken.symbol }), hasLoadedBalances ? (_jsxs("div", { className: `${showNetworkIcons ? "flex flex-col space-y-0.5" : ""} ${hideTokenImages ? "invisible" : "visible"}`, children: [_jsx("span", { className: "text-secondary-text text-sm leading-4 font-medium", children: formatUsd(tokenBalances.sum) }), showNetworkIcons && (_jsxs("div", { className: "flex justify-end items-center -space-x-1.5 relative h-4", children: [networksWithBalance.slice(0, 3).map((network, index) => (_jsx(ImageWithFallback, { src: network.logo, alt: `${network.display_name} logo`, height: "16", width: "16", loading: "eager", fetchPriority: "high", className: "rounded-full object-contain" }, `${network.display_name}-${index}`))), networksWithBalance.length > 3 && (_jsx("div", { className: "w-4 h-4 bg-secondary-600 text-primary-text text-[8px] rounded-full flex items-center justify-center border-2 border-background", children: _jsxs("span", { children: ["+", networksWithBalance.length - 3] }) }))] }))] })) : _jsx(_Fragment, {}), _jsx(ChevronDown, { className: "!w-3.5 !h-3.5 absolute right-2 top-1/2 -translate-y-1/2 text-secondary-text transition-opacity duration-200 opacity-0 group-hover/item:opacity-100", "aria-hidden": "true" })] }) })] }));
+    return (_jsxs(SelectItem, { className: "bg-secondary-500 group rounded-xl hover:bg-secondary-400 group/item relative pr-7 py-2", children: [_jsx(SelectItem.Logo, { imgSrc: mainToken.logo, altText: `${mainToken.symbol} logo`, className: "rounded-full" }), _jsx(SelectItem.Title, { children: _jsxs(_Fragment, { children: [_jsx("span", { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { children: mainToken.symbol }), haveNewlyListedTokens &&
+                                        _jsx(NewBadge, {})] }) }), hasLoadedBalances ? (_jsxs("div", { className: `${showNetworkIcons ? "flex flex-col space-y-0.5" : ""} ${hideTokenImages ? "invisible" : "visible"}`, children: [_jsx("span", { className: "text-secondary-text text-sm leading-4 font-medium", children: formatUsd(tokenBalances.sum) }), showNetworkIcons && (_jsxs("div", { className: "flex justify-end items-center -space-x-1.5 relative h-4", children: [networksWithBalance.slice(0, 3).map((network, index) => (_jsx(ImageWithFallback, { src: network.logo, alt: `${network.display_name} logo`, height: "16", width: "16", loading: "eager", fetchPriority: "high", className: "rounded-full object-contain" }, `${network.display_name}-${index}`))), networksWithBalance.length > 3 && (_jsx("div", { className: "w-4 h-4 bg-secondary-600 text-primary-text text-[8px] rounded-full flex items-center justify-center border-2 border-background", children: _jsxs("span", { children: ["+", networksWithBalance.length - 3] }) }))] }))] })) : _jsx(_Fragment, {}), _jsx(ChevronDown, { className: "!w-3.5 !h-3.5 absolute right-2 top-1/2 -translate-y-1/2 text-secondary-text transition-opacity duration-200 opacity-0 group-hover/item:opacity-100", "aria-hidden": "true" })] }) })] }));
 };
 export const SelectedCurrencyDisplay = (props) => {
     const { value, placeholder } = props;
@@ -83,6 +84,6 @@ export const SelectedCurrencyDisplay = (props) => {
 };
 export const SelectedRouteDisplay = ({ route, token, placeholder }) => {
     const showContent = token && route;
-    return (_jsxs("span", { className: "flex grow text-left items-center text-xs md:text-base relative", children: [showContent ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "inline-flex items-center relative shrink-0", children: [_jsx(ImageWithFallback, { src: token.logo, alt: "Token Logo", height: "24", width: "24", loading: "eager", fetchPriority: "high", className: "rounded-full object-contain" }), _jsx(ImageWithFallback, { src: route.logo, alt: "Network Logo", height: "12", width: "12", loading: "eager", fetchPriority: "high", className: "h-3.5 w-3.5 absolute left-3.5 top-3.5 object-contain rounded border-1 border-secondary-300" })] }), _jsxs("div", { className: "ml-3 flex flex-col grow font-medium text-primary-text overflow-hidden min-w-0 max-w-3/4 group-[.exchange-picker]:max-w-full", children: [_jsx("p", { className: "leading-5", children: token.symbol }), _jsx("p", { className: "text-secondary-text grow font-normal text-sm leading-4 truncate whitespace-nowrap", children: route.display_name })] })] })) : (_jsx(SelectedRoutePlaceholder, { placeholder: placeholder })), _jsx("span", { className: "px-1 pr-2 pointer-events-none text-primary-text", children: _jsx(ChevronDown, { className: "h-4 w-4 text-secondary-text", "aria-hidden": "true" }) })] }));
+    return (_jsxs("span", { className: "flex grow text-left items-center text-xs md:text-base relative", children: [showContent ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "inline-flex items-center relative shrink-0 h-7 w-7", children: [_jsx("div", { className: "h-6 w-6", children: _jsx(ImageWithFallback, { src: token.logo, alt: "Token Logo", height: "24", width: "24", loading: "eager", fetchPriority: "high", className: "rounded-full object-contain" }) }), _jsx("div", { className: "absolute left-[13px] top-3.5 h-4 w-4 rounded border border-secondary-500 bg-secondary-400 overflow-hidden", children: _jsx(ImageWithFallback, { src: route.logo, alt: "Network Logo", height: "14", width: "14", loading: "eager", fetchPriority: "high", className: "object-contain" }) })] }), _jsxs("div", { className: "ml-2 flex flex-col grow text-primary-text overflow-hidden min-w-0 max-w-3/4 group-[.exchange-picker]:max-w-full xs:max-w-[60px]", children: [_jsx("p", { className: "text-base leading-5 font-medium", children: token.symbol }), _jsx("p", { className: "text-secondary-text grow text-sm font-normal leading-4 truncate whitespace-nowrap", children: route.display_name })] })] })) : (_jsx(SelectedRoutePlaceholder, { placeholder: placeholder })), _jsx("span", { className: "px-2 pointer-events-none text-primary-text", children: _jsx(ChevronDown, { className: "h-4 w-4 text-secondary-text", "aria-hidden": "true" }) })] }));
 };
 export const SelectedRoutePlaceholder = ({ placeholder }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "inline-flex items-center relative py-1", children: _jsx(RoutePickerIcon, { className: "w-7 h-7" }) }), _jsx("span", { className: "flex text-secondary-text text-base font-normal leading-5 flex-auto items-center max-w-3/4 group-[.exchange-picker]:max-w-full", children: _jsx("span", { className: "ml-2 text-sm sm:text-base sm:leading-5 whitespace-nowrap", children: placeholder }) })] }));

package/dist/esm/components/Input/RoutePicker/TokenTitleDetails.js ADDED Viewed

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Info } from "lucide-react";
+import { ExtendedAddress } from "../Address/AddressPicker/AddressWithIcon";
+import { formatUsd } from "../../../components/utils/formatUsdAmount";
+import { NewBadge } from "../../../lib/isNewListed";
+export const TokenInfoIcon = ({ item, route, className, iconOnly = false }) => (_jsx("div", { className: className, children: _jsx(ExtendedAddress, { network: item.contract ? route : undefined, isForCurrency: true, showDetails: true, address: item.contract || `${route.display_name} native coin`, logo: item.logo, title: item.symbol, description: item.display_asset, isNativeToken: !item.contract, children: _jsxs("div", { className: `flex items-center gap-1 text-secondary-text cursor-pointer hover:text-primary-text ${iconOnly ? '' : 'text-xs'}`, children: [!iconOnly && (_jsxs("p", { className: "max-w-[90px] truncate", children: [_jsx("span", { children: "\u2022" }), " ", _jsx("span", { children: item.display_asset || item.symbol })] })), _jsx(Info, { className: iconOnly ? "h-4 w-4" : "h-3 w-3" })] }) }) }));
+export const TokenTitleWithBalance = ({ item, route, tokenbalance, usdAmount, isNewlyListed }) => {
+    return (_jsxs("div", { className: "flex items-center gap-2 justify-between w-full", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { children: item.symbol }), isNewlyListed &&
+                        _jsx(NewBadge, {}), _jsx(TokenInfoIcon, { item: item, route: route, iconOnly: true, className: "hidden xs:block transition-all duration-300 opacity-0 group-hover:opacity-100 group-hover:delay-400 click-delay-on-hover" })] }), (tokenbalance && Number(tokenbalance?.amount) > 0 && Number(usdAmount) > 0) && (_jsx("div", { className: "text-primary-text text-lg leading-[22px] font-medium", children: formatUsd(usdAmount) }))] }));
+};

package/dist/esm/components/Input/RoutePicker/index.js CHANGED Viewed

@@ -50,7 +50,7 @@ const RoutePicker = ({ direction, isExchange = false, className }) => {
         });
     }, [currencyFieldName, direction, setFieldValue]);
     const showbalance = !isExchange && (direction === 'to' || values.depositMethod === 'wallet');
-    return (_jsxs("div", { className: clsx("flex flex-col self-end relative items-center", className), children: [_jsxs(Selector, { children: [_jsx(SelectorTrigger, { disabled: false, className: "group-[.exchange-picker]:bg-secondary-500 py-[6px] px-2 group-[.exchange-picker]:!py-2 group-[.exchange-picker]:!px-3 active:animate-press-down group-[.exchange-picker]:active:animate-none", children: _jsx(SelectedRouteDisplay, { route: selectedRoute, token: selectedToken, placeholder: "Select token" }) }), _jsx(SelectorContent, { isLoading: isLoading, searchHint: "Search", header: _jsx(PickerWalletConnect, { direction: direction }), children: ({ closeModal }) => (_jsx(Content, { onSelect: (r, t) => { handleSelect(r, t); closeModal(); }, searchQuery: searchQuery, setSearchQuery: setSearchQuery, rowElements: routeElements, direction: direction, selectedRoute: selectedRoute?.name, selectedToken: selectedToken?.symbol })) })] }), showbalance &&
+    return (_jsxs("div", { className: clsx("flex flex-col self-end relative items-center", className), children: [_jsxs(Selector, { children: [_jsx(SelectorTrigger, { disabled: false, className: "group-[.exchange-picker]:bg-secondary-500 py-1.5 px-2 group-[.exchange-picker]:py-2! group-[.exchange-picker]:px-3! active:animate-press-down group-[.exchange-picker]:active:animate-none", children: _jsx(SelectedRouteDisplay, { route: selectedRoute, token: selectedToken, placeholder: "Select token" }) }), _jsx(SelectorContent, { isLoading: isLoading, searchHint: "Search", header: _jsx(PickerWalletConnect, { direction: direction }), children: ({ closeModal }) => (_jsx(Content, { onSelect: (r, t) => { handleSelect(r, t); closeModal(); }, searchQuery: searchQuery, setSearchQuery: setSearchQuery, rowElements: routeElements, direction: direction, selectedRoute: selectedRoute?.name, selectedToken: selectedToken?.symbol })) })] }), showbalance &&
                 _jsx(Balance, { values: values, direction: direction })] }));
 };
 export default RoutePicker;

package/dist/esm/components/Menu/MenuList.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BookOpen, Gift, Map, ScrollText, LibraryIcon, Shield, Users, MessageSquarePlus } from "lucide-react";
 import { useState } from "react";
 import { useIntercom } from "react-use-intercom";
@@ -7,64 +7,56 @@ import DiscordLogo from "../Icons/DiscordLogo";
 import GitHubLogo from "../Icons/GitHubLogo";
 import SubstackLogo from "../Icons/SubstackLogo";
 import TwitterLogo from "../Icons/TwitterLogo";
-import Popover from "../Modal/popover";
 import SendFeedback from "./Feedback";
 import YoutubeLogo from "../Icons/YoutubeLogo";
 import Menu from "./Menu";
 import { MenuStep } from "../../Models/Wizard";
 import { WalletsMenu } from "../Wallet/WalletComponents/ConnectedWallets";
+import VaulDrawer from "../Modal/vaulModal";
 const MenuList = ({ goToStep }) => {
     const { boot, show, update } = useIntercom();
     const [openFeedbackModal, setOpenFeedbackModal] = useState(false);
     const handleCloseFeedback = () => {
         setOpenFeedbackModal(false);
     };
-    return _jsx("div", { className: "text-sm font-medium focus:outline-hidden h-full", children: _jsxs(Menu, { children: [_jsx(WalletsMenu, {}), _jsx(Menu.Group, { children: _jsxs(_Fragment, { children: [window.location.pathname != '/transactions' &&
-                                _jsx(Menu.Item, { onClick: () => goToStep(MenuStep.Transactions, "/transactions"), icon: _jsx(ScrollText, { className: "h-5 w-5" }), children: "Transactions" }), window.location.pathname != '/campaigns' &&
-                                _jsx(Menu.Item, { onClick: () => goToStep(MenuStep.Campaigns, '/campaigns'), icon: _jsx(Gift, { className: "h-5 w-5" }), children: "Campaigns" })] }) }), _jsxs(Menu.Group, { children: [_jsx(Menu.Item, { onClick: () => {
+    return _jsx("div", { className: "text-sm font-medium focus:outline-hidden h-full", children: _jsxs(Menu, { children: [_jsx(WalletsMenu, {}), _jsxs(Menu.Group, { children: [_jsx(Menu.Item, { onClick: () => goToStep(MenuStep.Transactions, "/transactions"), icon: _jsx(ScrollText, { className: "h-5 w-5" }), children: "Transactions" }), _jsx(Menu.Item, { onClick: () => goToStep(MenuStep.Campaigns, '/campaigns'), icon: _jsx(Gift, { className: "h-5 w-5" }), children: "Campaigns" })] }), _jsxs(Menu.Group, { children: [_jsx(Menu.Item, { onClick: () => {
                                 boot();
                                 show();
                                 update();
-                            }, target: "_blank", icon: _jsx(ChatIcon, { strokeWidth: 2, className: "h-5 w-5" }), children: "Help" }), _jsx(Menu.Item, { pathname: 'https://learn.layerswap.io/', target: "_blank", icon: _jsx(BookOpen, { className: "h-5 w-5" }), children: "Docs for Users" }), _jsx(Menu.Item, { pathname: 'https://learn.layerswap.io/user-docs/partners-and-integrations/', target: "_blank", icon: _jsx(Users, { className: "h-5 w-5" }), children: "Docs for Partners" })] }), _jsxs(Menu.Group, { children: [_jsx(Menu.Item, { pathname: 'https://learn.layerswap.io/user-docs/more-information/privacy-policy/', target: "_blank", icon: _jsx(Shield, { className: "h-5 w-5" }), children: "Privacy Policy" }), _jsx(Menu.Item, { pathname: 'https://learn.layerswap.io/user-docs/more-information/terms-of-services/', target: "_blank", icon: _jsx(LibraryIcon, { className: "h-5 w-5" }), children: "Terms of Service" })] }), _jsx(Menu.Group, { children: _jsx(Popover, { opener: _jsx(Menu.Item, { onClick: () => setOpenFeedbackModal(true), target: "_blank", icon: _jsx(MessageSquarePlus, { className: "h-5 w-5" }), children: "Suggest a Feature" }), isNested: true, show: openFeedbackModal, header: "Suggest a Feature", setShow: setOpenFeedbackModal, popoverId: "feedback", children: _jsx("div", { className: "p-0 md:max-w-md", children: _jsx(SendFeedback, { onSend: handleCloseFeedback }) }) }) }), _jsxs("div", { className: "space-y-3 w-full", children: [_jsx("hr", { className: "border-secondary-500" }), _jsx("p", { className: "text-primary-text-tertiary flex justify-center my-3", children: "Media links & suggestions:" })] }), _jsx("div", { className: "grid grid-cols-2 gap-2 justify-center", children: navigation.social.map((item, index) => (_jsx("a", { target: "_blank", href: item.href, className: `flex relative bg-secondary-500 hover:bg-secondary-400 rounded-xl cursor-pointer select-none items-center outline-hidden text-primary-text ${item.className}`, rel: "noopener noreferrer", children: _jsxs("div", { className: "p-2 w-full flex justify-center gap-1", children: [_jsx(item.icon, { className: "h-5 w-5", "aria-hidden": "true" }), _jsx("p", { children: item.name })] }) }, index))) })] }) });
+                            }, target: "_blank", icon: _jsx(ChatIcon, { strokeWidth: 2, className: "h-5 w-5" }), children: "Help" }), _jsx(Menu.Item, { pathname: 'https://learn.layerswap.io/', target: "_blank", icon: _jsx(BookOpen, { className: "h-5 w-5" }), children: "Docs for Users" }), _jsx(Menu.Item, { pathname: 'https://learn.layerswap.io/user-docs/partners-and-integrations/', target: "_blank", icon: _jsx(Users, { className: "h-5 w-5" }), children: "Docs for Partners" })] }), _jsxs(Menu.Group, { children: [_jsx(Menu.Item, { pathname: 'https://learn.layerswap.io/user-docs/more-information/privacy-policy/', target: "_blank", icon: _jsx(Shield, { className: "h-5 w-5" }), children: "Privacy Policy" }), _jsx(Menu.Item, { pathname: 'https://learn.layerswap.io/user-docs/more-information/terms-of-services/', target: "_blank", icon: _jsx(LibraryIcon, { className: "h-5 w-5" }), children: "Terms of Service" })] }), _jsxs(Menu.Group, { children: [_jsx(Menu.Item, { onClick: () => setOpenFeedbackModal(true), target: "_blank", icon: _jsx(MessageSquarePlus, { className: "h-5 w-5" }), children: "Suggest a Feature" }), _jsx(VaulDrawer, { show: openFeedbackModal, header: "Suggest a Feature", setShow: setOpenFeedbackModal, modalId: "suggestFeature", children: _jsx(VaulDrawer.Snap, { id: "item-1", children: _jsx("div", { className: "p-0 md:max-w-md", children: _jsx(SendFeedback, { onSend: handleCloseFeedback }) }) }) })] }), _jsxs("div", { className: "space-y-3 w-full", children: [_jsx("hr", { className: "border-secondary-500" }), _jsx("p", { className: "text-primary-text-tertiary flex justify-center my-3", children: "Media links & suggestions:" })] }), _jsx("div", { className: "grid grid-cols-2 gap-2 justify-center", children: navigation.social.map((item, index) => (_jsx("a", { target: "_blank", href: item.href, className: "flex relative bg-secondary-500 hover:bg-secondary-400 rounded-xl cursor-pointer select-none items-center outline-hidden text-primary-text", rel: "noopener noreferrer", children: _jsxs("div", { className: "p-2 w-full flex justify-center gap-1", children: [_jsx(item.icon, { className: "h-5 w-5", "aria-hidden": "true" }), _jsx("p", { children: item.name })] }) }, index))) })] }) });
 };
 const navigation = {
     social: [
         {
             name: 'Twitter',
             href: 'https://twitter.com/layerswap/',
-            icon: (props) => TwitterLogo(props),
-            className: 'plausible-event-name=Twitter'
+            icon: (props) => TwitterLogo(props)
         },
         {
             name: 'GitHub',
             href: 'https://github.com/layerswap/layerswapapp/',
-            icon: (props) => GitHubLogo(props),
-            className: 'plausible-event-name=GitHub'
+            icon: (props) => GitHubLogo(props)
         },
         {
             name: 'Discord',
             href: 'https://discord.com/invite/KhwYN35sHy/',
-            icon: (props) => DiscordLogo(props),
-            className: 'plausible-event-name=Discord'
+            icon: (props) => DiscordLogo(props)
         },
         {
             name: 'YouTube',
             href: 'https://www.youtube.com/@layerswaphq/',
-            icon: (props) => YoutubeLogo(props),
-            className: 'plausible-event-name=Youtube'
+            icon: (props) => YoutubeLogo(props)
         },
         {
             name: 'Substack',
             href: 'https://layerswap.substack.com/',
-            icon: (props) => SubstackLogo(props),
-            className: 'plausible-event-name=Substack'
+            icon: (props) => SubstackLogo(props)
         },
         {
             name: 'Roadmap',
             href: 'https://layerswap.ducalis.io/roadmap/summary/',
-            icon: (props) => _jsx(Map, { ...props }),
-            className: 'plausible-event-name=Roadmap'
-        },
+            icon: (props) => _jsx(Map, { ...props })
+        }
     ]
 };
 export default MenuList;