@0xsquid/ui 0.13.10 → 0.14.0
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.
- package/dist/cjs/index.js +75 -48
- package/dist/cjs/types/components/icons/EmojiSad.d.ts +2 -1
- package/dist/cjs/types/components/icons/Loader.d.ts +2 -1
- package/dist/cjs/types/components/icons/SwapStatus.d.ts +3 -2
- package/dist/cjs/types/components/lists/SwapStepItem.d.ts +1 -3
- package/dist/cjs/types/components/views/SwapProgressView.d.ts +2 -1
- package/dist/cjs/types/stories/badges/Loader.stories.d.ts +9 -0
- package/dist/cjs/types/stories/layout/SwapStepsCollapsed.stories.d.ts +2 -0
- package/dist/cjs/types/stories/lists/SwapStepItem.stories.d.ts +13 -2
- package/dist/cjs/types/stories/views/SwapProgressView.stories.d.ts +9 -1
- package/dist/cjs/types/types/components.d.ts +2 -4
- package/dist/esm/index.js +75 -48
- package/dist/esm/types/components/icons/EmojiSad.d.ts +2 -1
- package/dist/esm/types/components/icons/Loader.d.ts +2 -1
- package/dist/esm/types/components/icons/SwapStatus.d.ts +3 -2
- package/dist/esm/types/components/lists/SwapStepItem.d.ts +1 -3
- package/dist/esm/types/components/views/SwapProgressView.d.ts +2 -1
- package/dist/esm/types/stories/badges/Loader.stories.d.ts +9 -0
- package/dist/esm/types/stories/layout/SwapStepsCollapsed.stories.d.ts +2 -0
- package/dist/esm/types/stories/lists/SwapStepItem.stories.d.ts +13 -2
- package/dist/esm/types/stories/views/SwapProgressView.stories.d.ts +9 -1
- package/dist/esm/types/types/components.d.ts +2 -4
- package/dist/index.css +27 -35
- package/dist/index.d.ts +5 -6
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -2593,7 +2593,7 @@ function BadgeImage({ imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, roun
|
|
|
2593
2593
|
}
|
|
2594
2594
|
|
|
2595
2595
|
function LoadingSkeleton({ className, height = '20', }) {
|
|
2596
|
-
return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxRuntime.jsx("g", {
|
|
2596
|
+
return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_1246_29063)", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1246_29063)" }) }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("linearGradient", { id: "paint0_linear_1246_29063", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient tw-text-material-light-thin", children: [jsxRuntime.jsx("stop", { stopColor: "currentColor" }), jsxRuntime.jsx("stop", { offset: "0.395881", stopColor: "currentColor" }), jsxRuntime.jsx("stop", { offset: "0.597867", stopColor: "currentColor", className: "group-data-[squid-theme-type=dark]:tw-text-material-light-average group-data-[squid-theme-type=light]:tw-text-transparent" }), jsxRuntime.jsx("stop", { offset: "0.697004", stopColor: "currentColor" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_1246_29063", children: jsxRuntime.jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] }), ' '] }));
|
|
2597
2597
|
}
|
|
2598
2598
|
|
|
2599
2599
|
/******************************************************************************
|
|
@@ -2642,7 +2642,7 @@ function UsdAmount({ usdAmount }) {
|
|
|
2642
2642
|
return (jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "$" }), jsxRuntime.jsx(CaptionText, { children: usdAmount.toString() })] }));
|
|
2643
2643
|
}
|
|
2644
2644
|
|
|
2645
|
-
function Loader({ size = '24', strokeWidth = '1' }) {
|
|
2645
|
+
function Loader({ size = '24', strokeWidth = '1', invertColors = false, }) {
|
|
2646
2646
|
return (jsxRuntime.jsxs("svg", { className: "squid-animated-loader", xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: [jsxRuntime.jsx("style", { children: `
|
|
2647
2647
|
.squid-animated-loader-dash {
|
|
2648
2648
|
animation: squid-animated-loader-dash-grow 0.5s infinite alternate;
|
|
@@ -2666,7 +2666,9 @@ function Loader({ size = '24', strokeWidth = '1' }) {
|
|
|
2666
2666
|
.squid-animated-loader {
|
|
2667
2667
|
animation: squid-animated-loader-rotate 1s linear infinite;
|
|
2668
2668
|
transform-origin: center;
|
|
2669
|
-
}` }), jsxRuntime.jsxs("g", {
|
|
2669
|
+
}` }), jsxRuntime.jsxs("g", { clipPath: "url(#clip0_1387_2296)", children: [jsxRuntime.jsx("circle", { cx: "7.99967", cy: "8.00004", r: "6.66667", stroke: "currentColor", className: invertColors
|
|
2670
|
+
? 'tw-text-material-dark-thin'
|
|
2671
|
+
: 'tw-text-material-light-thin', strokeWidth: strokeWidth }), jsxRuntime.jsx("path", { className: cn('squid-animated-loader-dash', invertColors ? 'tw-text-grey-900' : 'tw-text-material-light-thick'), d: "M14.6663 8.00004C14.6663 7.12456 14.4939 6.25766 14.1589 5.44882C13.8238 4.63998 13.3328 3.90505 12.7137 3.286C12.0947 2.66694 11.3597 2.17588 10.5509 1.84084C9.74206 1.50581 8.87515 1.33337 7.99967 1.33337", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round" })] }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_1387_2296", children: jsxRuntime.jsx("rect", { width: "16", height: "16", fill: "white" }) }) })] }));
|
|
2670
2672
|
}
|
|
2671
2673
|
|
|
2672
2674
|
// font size, line height, and letter spacing classes
|
|
@@ -3201,8 +3203,8 @@ function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessa
|
|
|
3201
3203
|
: 'tw-bg-status-positive') })] }) }));
|
|
3202
3204
|
}
|
|
3203
3205
|
|
|
3204
|
-
function EmojiSadIcon({ className }) {
|
|
3205
|
-
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width:
|
|
3206
|
+
function EmojiSadIcon({ className, size = '20', }) {
|
|
3207
|
+
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", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM13.5341 12.4645C11.5815 10.5118 8.41568 10.5118 6.46306 12.4645C6.07254 12.855 6.07254 13.4882 6.46306 13.8787C6.85358 14.2692 7.48675 14.2692 7.87727 13.8787C9.04885 12.7071 10.9483 12.7071 12.1199 13.8787C12.5104 14.2692 13.1436 14.2692 13.5341 13.8787C13.9247 13.4882 13.9247 12.855 13.5341 12.4645ZM8.5 7.5C8.5 8.32843 7.94036 9 7.25 9C6.55964 9 6 8.32843 6 7.5C6 6.67157 6.55964 6 7.25 6C7.94036 6 8.5 6.67157 8.5 7.5ZM12.75 9C13.4404 9 14 8.32843 14 7.5C14 6.67157 13.4404 6 12.75 6C12.0596 6 11.5 6.67157 11.5 7.5C11.5 8.32843 12.0596 9 12.75 9Z", fill: "currentColor" }) }));
|
|
3206
3208
|
}
|
|
3207
3209
|
function EmojiMeh({ className, size = '20', }) {
|
|
3208
3210
|
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", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM7.25 9C7.94036 9 8.5 8.32843 8.5 7.5C8.5 6.67157 7.94036 6 7.25 6C6.55964 6 6 6.67157 6 7.5C6 8.32843 6.55964 9 7.25 9ZM14 7.5C14 8.32843 13.4404 9 12.75 9C12.0596 9 11.5 8.32843 11.5 7.5C11.5 6.67157 12.0596 6 12.75 6C13.4404 6 14 6.67157 14 7.5ZM7 12C6.44772 12 6 12.4477 6 13C6 13.5523 6.44772 14 7 14H13C13.5523 14 14 13.5523 14 13C14 12.4477 13.5523 12 13 12H7Z", fill: "currentColor" }) }));
|
|
@@ -3411,7 +3413,7 @@ function SectionTitle(_a) {
|
|
|
3411
3413
|
}
|
|
3412
3414
|
|
|
3413
3415
|
function HelpIcon({ size = '20', className, }) {
|
|
3414
|
-
return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: [jsxRuntime.jsx("g", {
|
|
3416
|
+
return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_457_36778)", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM6 7C6 4.46214 8.03736 3 10 3C12.1193 3 14 4.66531 14 7C14 7.93746 13.7596 8.6603 13.368 9.2586C13.0353 9.76679 12.6034 10.1601 12.2697 10.4639L12.1757 10.5497C11.8041 10.8904 11.534 11.1593 11.337 11.504C11.1513 11.8288 11 12.2794 11 13C11 13.5523 10.5523 14 10 14C9.44772 14 9 13.5523 9 13C9 11.9706 9.22366 11.1712 9.60051 10.5117C9.96604 9.87199 10.4459 9.42214 10.8243 9.07535L10.8834 9.02116L10.8834 9.02116L10.8834 9.02115C11.2572 8.67885 11.5066 8.45039 11.6945 8.16328C11.8654 7.9022 12 7.56254 12 7C12 5.83469 11.0807 5 10 5C8.96264 5 8 5.73786 8 7C8 7.55228 7.55228 8 7 8C6.44772 8 6 7.55228 6 7ZM10 15C9.44771 15 9 15.4477 9 16C9 16.5523 9.44771 17 10 17C10.5523 17 11 16.5523 11 16C11 15.4477 10.5523 15 10 15Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_457_36778", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white" }) }) })] }));
|
|
3415
3417
|
}
|
|
3416
3418
|
|
|
3417
3419
|
function SettingsItem({ icon, label, control, link, transparent = false, helpTooltip, }) {
|
|
@@ -3441,28 +3443,58 @@ function SwapStepSeparator() {
|
|
|
3441
3443
|
return (jsxRuntime.jsx("span", { className: "tw-flex tw-h-squid-m tw-w-squid-xxl tw-items-center tw-justify-center tw-self-stretch tw-py-0.5", children: jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "21", viewBox: "0 0 4 21", fill: "none", children: jsxRuntime.jsx("path", { d: "M2 2.5V18.5", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" }) }) }));
|
|
3442
3444
|
}
|
|
3443
3445
|
|
|
3444
|
-
const statusTextClassMap = {
|
|
3445
|
-
executed: 'tw-text-grey-300',
|
|
3446
|
-
progress: 'tw-text-royal-400',
|
|
3447
|
-
pending: 'tw-text-grey-600',
|
|
3448
|
-
};
|
|
3449
3446
|
const statusBgClassMap = {
|
|
3450
3447
|
executed: '!tw-bg-grey-300',
|
|
3451
|
-
|
|
3448
|
+
ongoing: '!tw-bg-grey-300',
|
|
3452
3449
|
pending: '!tw-bg-grey-600',
|
|
3450
|
+
waiting: '!tw-bg-grey-300',
|
|
3451
|
+
error: '!tw-bg-status-negative',
|
|
3452
|
+
success: '!tw-bg-status-positive',
|
|
3453
|
+
warning: '!tw-bg-status-partial',
|
|
3453
3454
|
};
|
|
3454
3455
|
const separatorClassMap = {
|
|
3455
3456
|
executed: 'tw-text-grey-300',
|
|
3456
|
-
|
|
3457
|
+
ongoing: 'tw-text-grey-300',
|
|
3457
3458
|
pending: 'tw-text-grey-600',
|
|
3459
|
+
waiting: 'tw-text-grey-300',
|
|
3460
|
+
error: 'tw-text-status-negative',
|
|
3461
|
+
success: 'tw-text-status-positive',
|
|
3462
|
+
warning: 'tw-text-status-partial',
|
|
3458
3463
|
};
|
|
3459
|
-
function SwapStepItem({ descriptionBlocks,
|
|
3464
|
+
function SwapStepItem({ descriptionBlocks, showStepSeparator = false, link, status = 'pending', }) {
|
|
3460
3465
|
// these styles are located here instead of outside the component
|
|
3461
3466
|
// so they are updated whenever the animation duration changes
|
|
3462
3467
|
const transitionStyle = {
|
|
3463
3468
|
transition: `background-color ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms, color ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms`,
|
|
3464
3469
|
};
|
|
3465
|
-
|
|
3470
|
+
const chipContent = React.useMemo(() => {
|
|
3471
|
+
switch (status) {
|
|
3472
|
+
case 'success':
|
|
3473
|
+
case 'executed':
|
|
3474
|
+
return jsxRuntime.jsx(Checkmark1Icon, {});
|
|
3475
|
+
case 'error':
|
|
3476
|
+
return jsxRuntime.jsx(EmojiSadIcon, { size: "16" });
|
|
3477
|
+
case 'warning':
|
|
3478
|
+
return jsxRuntime.jsx(EmojiMeh, { size: "16" });
|
|
3479
|
+
case 'waiting':
|
|
3480
|
+
return jsxRuntime.jsx(DotGrid1x3HorizontalIcon, {});
|
|
3481
|
+
case 'pending':
|
|
3482
|
+
return null;
|
|
3483
|
+
case 'ongoing':
|
|
3484
|
+
return jsxRuntime.jsx(Loader, { size: "16", invertColors: true, strokeWidth: "2" });
|
|
3485
|
+
default:
|
|
3486
|
+
return null;
|
|
3487
|
+
}
|
|
3488
|
+
}, [status]);
|
|
3489
|
+
const statusTextClass = React.useMemo(() => {
|
|
3490
|
+
switch (status) {
|
|
3491
|
+
case 'pending':
|
|
3492
|
+
return 'tw-text-grey-600';
|
|
3493
|
+
default:
|
|
3494
|
+
return 'tw-text-grey-300';
|
|
3495
|
+
}
|
|
3496
|
+
}, [status]);
|
|
3497
|
+
return (jsxRuntime.jsxs("li", { className: "tw-flex tw-w-list-item-large tw-flex-col tw-items-start tw-text-grey-300 tw-transition-colors tw-duration-1000", children: [jsxRuntime.jsxs("a", { href: link, target: "_blank", style: transitionStyle, className: cn('tw-group/swap-step-item tw-flex tw-w-full tw-items-center tw-rounded-squid-xs', !!link && 'hover:tw-bg-material-light-thin', statusTextClass), children: [jsxRuntime.jsx("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: jsxRuntime.jsx(Chip, { style: transitionStyle, className: cn('tw-w-squid-xl', statusBgClassMap[status]), icon: chipContent }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-squid-l tw-flex-1 tw-flex-wrap tw-items-center tw-justify-start tw-gap-squid-xxs tw-py-squid-xxs", children: descriptionBlocks.map(({ type, value }, index) => {
|
|
3466
3498
|
if (type === 'string') {
|
|
3467
3499
|
return (
|
|
3468
3500
|
// Instead of displaying the string into a single <BodyText />
|
|
@@ -3477,7 +3509,7 @@ function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = fals
|
|
|
3477
3509
|
return (jsxRuntime.jsx("img", { src: value, className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs" }, index));
|
|
3478
3510
|
}
|
|
3479
3511
|
return null;
|
|
3480
|
-
}) })] })] }));
|
|
3512
|
+
}) })] }), showStepSeparator && (jsxRuntime.jsx("span", { className: cn(separatorClassMap[status]), style: transitionStyle, children: jsxRuntime.jsx(SwapStepSeparator, {}) }))] }));
|
|
3481
3513
|
}
|
|
3482
3514
|
|
|
3483
3515
|
function DropdownMenu({ dropdownRef, items, className, menuRef, isHidden = false, listClassName, }) {
|
|
@@ -3547,7 +3579,7 @@ function BorderedContainer({ children, className, }) {
|
|
|
3547
3579
|
}
|
|
3548
3580
|
|
|
3549
3581
|
function SquidLogo() {
|
|
3550
|
-
return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", children: [jsxRuntime.jsx("g", {
|
|
3582
|
+
return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_133_44979)", children: jsxRuntime.jsx("path", { d: "M39.7776 17.0119L39.7737 16.9863L39.6631 16.9902C39.6631 16.9902 39.6608 17.0237 39.6601 17.027L39.6233 17.0286C39.5751 17.6494 39.4736 18.2391 39.3215 18.7807C38.9488 20.1143 38.3241 21.4615 37.5632 22.5742C36.7215 23.8061 35.7416 24.719 34.7288 25.2142C34.0969 25.5239 33.4703 25.7509 32.8673 25.8894C32.3993 25.9949 31.9376 26.0477 31.4969 26.0477C29.9688 26.0477 28.5688 25.4047 27.4473 24.1886C25.7136 22.3078 24.7097 19.075 24.9488 16.143C25.0319 15.1173 25.196 14.163 25.3544 13.2405C25.6913 11.2822 25.9816 9.59092 25.4384 7.82282C25.1471 6.87567 24.532 6.14133 23.7048 5.7539C23.1416 5.48987 22.5537 5.35623 21.956 5.35623C20.0352 5.35623 18.4503 6.70896 17.6775 7.86752C16.4976 9.63632 15.9094 11.8636 16.0657 13.9772C16.2112 15.9555 16.8969 17.2596 17.9257 19.0251C18.4417 19.9099 18.9793 20.6915 19.4545 21.3818C20.2577 22.5499 20.9513 23.5588 21.2936 24.6652C21.7681 26.1988 21.4384 26.9364 21.2743 27.1828C21.0719 27.4868 20.7471 27.6619 20.3078 27.7036C20.2517 27.7092 20.1965 27.7115 20.143 27.7115C18.8021 27.7115 18.7765 25.881 18.7614 24.7867V24.7621C18.7607 24.6899 18.759 24.6212 18.7581 24.5555C18.7125 22.4123 17.8892 21.1315 16.8461 19.5092C16.1916 18.4915 15.4501 17.3388 14.7988 15.7683C13.7572 13.2596 13.4957 10.8396 14.0221 8.57625C14.0405 8.49546 14.0605 8.41467 14.0813 8.33294C14.7204 5.81374 16.3004 2.58743 20.1949 1.5241C20.9325 1.32247 21.6901 1.22002 22.4461 1.22002C24.7357 1.22002 26.7302 2.16251 27.9173 3.80489C28.8782 5.13364 29.3735 6.64005 29.4326 8.40978C29.447 8.8305 29.4359 9.27148 29.3998 9.72014C29.3157 10.7322 29.1013 11.8417 28.7453 13.1113C28.0254 15.6778 27.851 17.8522 28.2277 19.573C28.5166 20.8929 29.1478 21.8987 29.959 22.3313C30.6165 22.6817 31.3173 22.8594 32.0414 22.8594C33.891 22.8594 35.5758 21.6794 36.4254 20.5106C37.7613 18.6722 38.4654 15.4305 38.3502 13.481C38.3078 12.7658 38.247 12.1602 38.163 11.6242L38.1607 11.6163L38.159 11.6123C36.5781 8.19395 34.071 5.29639 30.9085 3.23306C27.6647 1.11921 23.892 0 20 0C14.6575 0 9.63516 2.08009 5.85751 5.85751C2.08079 9.63516 0 14.6575 0 20C0 21.5527 0.179278 23.1015 0.533644 24.6049L0.53993 24.6312L0.651222 24.6151C0.651222 24.6151 0.649593 24.5823 0.648894 24.58L0.685681 24.5744C0.616997 23.3839 0.724796 22.2377 0.99837 21.2591C1.37113 19.9264 1.99604 18.5783 2.75669 17.4657C3.59837 16.2345 4.57835 15.3208 5.59115 14.8256C6.21839 14.5183 6.84144 14.292 7.44237 14.1527C7.91432 14.0456 8.37998 13.9919 8.82468 13.9919C10.3527 13.9919 11.7534 14.6342 12.8743 15.8503C14.6079 17.7304 15.6119 20.9639 15.3728 23.8966C15.2896 24.9229 15.1255 25.8766 14.9662 26.7991C14.6293 28.7574 14.339 30.4487 14.8822 32.2165C15.1725 33.1637 15.7886 33.8983 16.6158 34.2854C17.179 34.5495 17.7669 34.6829 18.3646 34.6829C20.2854 34.6829 21.8703 33.3302 22.6431 32.1709C23.8231 30.4021 24.4109 28.1749 24.2549 26.0615C24.1094 24.0838 23.4237 22.779 22.3949 21.0133C21.8806 20.1308 21.342 19.3476 20.8668 18.6566C20.0636 17.4885 19.37 16.4799 19.0277 15.3725C18.5532 13.8389 18.8829 13.1013 19.0461 12.8556C19.2484 12.5516 19.5732 12.3765 20.0126 12.3348C20.0687 12.3292 20.1246 12.3269 20.1774 12.3269C21.5183 12.3269 21.5439 14.1558 21.559 15.2477L21.5597 15.2789C21.5604 15.3502 21.562 15.4172 21.563 15.4822C21.6086 17.6254 22.4319 18.9062 23.475 20.5285C24.1295 21.5462 24.871 22.6997 25.5222 24.2694C26.5311 26.6983 26.8077 29.0461 26.3462 31.2477C26.3334 31.3085 26.3197 31.3693 26.3062 31.4303C25.695 34.0589 24.1262 37.4221 20.1255 38.515C19.3879 38.7166 18.6303 38.8182 17.8743 38.8189C15.5846 38.8189 13.5902 37.8766 12.403 36.2342C11.4421 34.9055 10.9471 33.3991 10.8878 31.6293C10.8789 31.3725 10.8799 31.1069 10.8894 30.8414C10.9357 29.6894 11.1607 28.4093 11.5758 26.9278C12.2957 24.3614 12.4703 22.187 12.0934 20.4661C11.8047 19.1453 11.1735 18.1404 10.3623 17.7078C9.70477 17.3574 9.00466 17.1797 8.27986 17.1797C6.43097 17.1797 4.74552 18.3597 3.89593 19.5285C2.55995 21.3669 1.85588 24.6086 1.97113 26.5581C2.04237 27.7693 2.16554 28.6598 2.37183 29.4494L2.37416 29.4559L2.37579 29.4589C5.87008 35.9597 12.6247 39.9998 19.9998 39.9998C25.3423 39.9998 30.3646 37.9197 34.1423 34.1423C37.9197 30.3646 39.9998 25.3423 39.9998 19.9998C39.9998 19.0014 39.9253 17.9958 39.7774 17.0116L39.7776 17.0119Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_133_44979", children: jsxRuntime.jsx("rect", { width: "40", height: "40", fill: "white" }) }) })] }));
|
|
3551
3583
|
}
|
|
3552
3584
|
|
|
3553
3585
|
function ProfileHeaderBackground() {
|
|
@@ -3563,11 +3595,11 @@ function LogoContainer({ children }) {
|
|
|
3563
3595
|
}
|
|
3564
3596
|
|
|
3565
3597
|
function MaxIcon() {
|
|
3566
|
-
return (jsxRuntime.jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", {
|
|
3598
|
+
return (jsxRuntime.jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_41_20801)", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM10.6508 4.74074L14.1508 7.74074C14.5701 8.10017 14.6187 8.73147 14.2593 9.15079C13.8998 9.57012 13.2685 9.61868 12.8492 9.25926L10 6.81708L7.15079 9.25926C6.73147 9.61868 6.10017 9.57012 5.74074 9.15079C5.38132 8.73147 5.42988 8.10017 5.84921 7.74074L9.34921 4.74074C9.7237 4.41975 10.2763 4.41975 10.6508 4.74074ZM14.1508 13.7407L10.6508 10.7407C10.2763 10.4198 9.7237 10.4198 9.34921 10.7407L5.84921 13.7407C5.42988 14.1002 5.38132 14.7315 5.74074 15.1508C6.10017 15.5701 6.73147 15.6187 7.15079 15.2593L10 12.8171L12.8492 15.2593C13.2685 15.6187 13.8998 15.5701 14.2593 15.1508C14.6187 14.7315 14.5701 14.1002 14.1508 13.7407Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_41_20801", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
|
|
3567
3599
|
}
|
|
3568
3600
|
|
|
3569
3601
|
function SwapInputsIcon() {
|
|
3570
|
-
return (jsxRuntime.jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", {
|
|
3602
|
+
return (jsxRuntime.jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_40_7936)", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM8.38268 4.57612C8.75636 4.7309 9 5.09554 9 5.5V15.5C9 16.0523 8.55228 16.5 8 16.5C7.44772 16.5 7 16.0523 7 15.5V7.91421L5.70711 9.20711C5.31658 9.59763 4.68342 9.59763 4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289L7.29289 4.79289C7.57889 4.5069 8.00901 4.42134 8.38268 4.57612ZM11 15.5C11 15.9045 11.2436 16.2691 11.6173 16.4239C11.991 16.5787 12.4211 16.4931 12.7071 16.2071L15.7071 13.2071C16.0976 12.8166 16.0976 12.1834 15.7071 11.7929C15.3166 11.4024 14.6834 11.4024 14.2929 11.7929L13 13.0858V5.5C13 4.94771 12.5523 4.5 12 4.5C11.4477 4.5 11 4.94771 11 5.5V15.5Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_40_7936", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
|
|
3571
3603
|
}
|
|
3572
3604
|
|
|
3573
3605
|
const interactiveChipClassName = 'hover:tw-bg-material-light-thin';
|
|
@@ -3650,11 +3682,9 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
|
|
|
3650
3682
|
}, children: [jsxRuntime.jsx("div", { className: cn('tw-absolute tw-z-10 tw-flex tw-h-[52px] tw-w-full tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-bg-transparent tw-p-squid-xs'), children: jsxRuntime.jsx("button", { onClick: handleToggleRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsxRuntime.jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsxRuntime.jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsxRuntime.jsx("ul", { style: {
|
|
3651
3683
|
zIndex: isRouteVisible ? 0 : -10,
|
|
3652
3684
|
scrollbarWidth: 'none',
|
|
3653
|
-
}, className: "tw-relative tw-top-[52px] tw-flex tw-max-h-[413px] tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs tw-py-[15px]", children: steps.map((step, index) => (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks,
|
|
3654
|
-
|
|
3655
|
-
|
|
3656
|
-
? 'executed'
|
|
3657
|
-
: 'progress' }, index))) }), jsxRuntime.jsx("footer", { className: "tw-absolute tw-bottom-0 tw-flex tw-w-full tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsxRuntime.jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] }) })] }) }));
|
|
3685
|
+
}, className: "tw-relative tw-top-[52px] tw-flex tw-max-h-[413px] tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs tw-py-[15px]", children: steps.map((step, index) => (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks,
|
|
3686
|
+
// show separator for all steps except the first one
|
|
3687
|
+
showStepSeparator: index > 0, link: step.link, status: newStepIndex < index ? 'pending' : step.status }, index))) }), jsxRuntime.jsx("footer", { className: "tw-absolute tw-bottom-0 tw-flex tw-w-full tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsxRuntime.jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] }) })] }) }));
|
|
3658
3688
|
}
|
|
3659
3689
|
|
|
3660
3690
|
function TokenPair({ firstToken, secondToken }) {
|
|
@@ -38599,12 +38629,15 @@ function XSocial({ className, size = '24', }) {
|
|
|
38599
38629
|
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" }) }));
|
|
38600
38630
|
}
|
|
38601
38631
|
|
|
38602
|
-
function
|
|
38632
|
+
function SwapSuccessIcon() {
|
|
38603
38633
|
return (jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4ZM31.5479 20.2665C32.2474 19.4116 32.1214 18.1516 31.2665 17.4521C30.4116 16.7527 29.1515 16.8787 28.4521 17.7336L20.8515 27.0232L18.4142 24.5858C17.6332 23.8048 16.3668 23.8048 15.5858 24.5858C14.8047 25.3669 14.8047 26.6332 15.5858 27.4143L19.5858 31.4143C19.9853 31.8138 20.5353 32.0257 21.0996 31.9976C21.664 31.9694 22.1901 31.7039 22.5479 31.2665L31.5479 20.2665Z", className: "tw-text-status-positive", fill: "currentColor" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_457_52170)", children: jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("filter", { id: "filter0_b_457_52170", x: "-17", y: "-17", width: "82", height: "82", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [jsxRuntime.jsx("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), jsxRuntime.jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsxRuntime.jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_52170" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_52170", result: "shape" })] }) })] }));
|
|
38604
38634
|
}
|
|
38605
|
-
function
|
|
38635
|
+
function SwapErrorIcon() {
|
|
38606
38636
|
return (jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", className: "tw-text-grey-900", fill: "currentColor" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM31.0683 28.9289C27.163 25.0237 20.8314 25.0237 16.9261 28.9289C16.1451 29.71 16.1451 30.9763 16.9261 31.7574C17.7072 32.5384 18.9735 32.5384 19.7545 31.7574C22.0977 29.4142 25.8967 29.4142 28.2398 31.7574C29.0209 32.5384 30.2872 32.5384 31.0683 31.7574C31.8493 30.9763 31.8493 29.71 31.0683 28.9289ZM21 19C21 20.6569 19.8807 22 18.5 22C17.1193 22 16 20.6569 16 19C16 17.3431 17.1193 16 18.5 16C19.8807 16 21 17.3431 21 19ZM29.5 22C30.8807 22 32 20.6569 32 19C32 17.3431 30.8807 16 29.5 16C28.1193 16 27 17.3431 27 19C27 20.6569 28.1193 22 29.5 22Z", className: "tw-text-status-negative", fill: "currentColor" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_457_52502)", children: jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average", "stroke-opacity": "0.33" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("filter", { id: "filter0_b_457_52502", x: "-17", y: "-17", width: "82", height: "82", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [jsxRuntime.jsx("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), jsxRuntime.jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsxRuntime.jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_52502" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_52502", result: "shape" })] }) })] }));
|
|
38607
38637
|
}
|
|
38638
|
+
function SwapWarningIcon() {
|
|
38639
|
+
return (jsxRuntime.jsxs("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_588_15630)", children: jsxRuntime.jsx("circle", { cx: "21", cy: "21", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsxRuntime.jsxs("g", { "clip-path": "url(#clip0_588_15630)", children: [jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M41 21C41 32.0457 32.0457 41 21 41C9.9543 41 1 32.0457 1 21C1 9.9543 9.9543 1 21 1C32.0457 1 41 9.9543 41 21ZM15.5 19C16.8807 19 18 17.6569 18 16C18 14.3431 16.8807 13 15.5 13C14.1193 13 13 14.3431 13 16C13 17.6569 14.1193 19 15.5 19ZM29 16C29 17.6569 27.8807 19 26.5 19C25.1193 19 24 17.6569 24 16C24 14.3431 25.1193 13 26.5 13C27.8807 13 29 14.3431 29 16ZM15 27C13.8954 27 13 27.8954 13 29C13 30.1046 13.8954 31 15 31H27C28.1046 31 29 30.1046 29 29C29 27.8954 28.1046 27 27 27H15Z", fill: "currentColor", className: "tw-text-status-partial" })] }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("filter", { id: "filter0_b_588_15630", x: "-20", y: "-20", width: "82", height: "82", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [jsxRuntime.jsx("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), jsxRuntime.jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsxRuntime.jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_588_15630" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_588_15630", result: "shape" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_588_15630", children: jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "white" }) })] })] }));
|
|
38640
|
+
}
|
|
38608
38641
|
|
|
38609
38642
|
function WalletFilledIcon({ size = '24' }) {
|
|
38610
38643
|
return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [jsxRuntime.jsx("path", { d: "M4 6.5V17C4 18.6569 5.34315 20 7 20H18C19.1046 20 20 19.1046 20 18V11C20 9.89543 19.1046 9 18 9H16M4 6.5C4 7.88071 5.11929 9 6.5 9H16M4 6.5C4 5.11929 5.11929 4 6.5 4H14.5882C15.3679 4 16 4.63207 16 5.41176V9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "square", "stroke-linejoin": "round" }), jsxRuntime.jsx("path", { d: "M15.5 15.375C15.9832 15.375 16.375 14.9832 16.375 14.5C16.375 14.0168 15.9832 13.625 15.5 13.625C15.0168 13.625 14.625 14.0168 14.625 14.5C14.625 14.9832 15.0168 15.375 15.5 15.375Z", fill: "currentColor", stroke: "currentColor", "stroke-width": "0.75" })] }));
|
|
@@ -38666,12 +38699,12 @@ const getSwapProgressTitle = ({ fromToken, toToken, swapState, }) => {
|
|
|
38666
38699
|
case SwapState.CONFIRMATION_REJECTED:
|
|
38667
38700
|
return 'Swap rejected';
|
|
38668
38701
|
case SwapState.PARTIAL_SUCCESS:
|
|
38669
|
-
return 'Swap failed
|
|
38702
|
+
return 'Swap failed to complete';
|
|
38670
38703
|
case SwapState.NEEDS_GAS:
|
|
38671
38704
|
return 'Needs gas on destination';
|
|
38672
38705
|
}
|
|
38673
38706
|
};
|
|
38674
|
-
const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, }) => {
|
|
38707
|
+
const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, toAddressFormatted, }) => {
|
|
38675
38708
|
switch (swapState) {
|
|
38676
38709
|
case SwapState.CONFIRM: {
|
|
38677
38710
|
return 'Authenticate the transaction in your wallet.';
|
|
@@ -38692,7 +38725,7 @@ const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, })
|
|
|
38692
38725
|
return 'You declined the transaction in your wallet.';
|
|
38693
38726
|
}
|
|
38694
38727
|
case SwapState.PARTIAL_SUCCESS: {
|
|
38695
|
-
return `You received a refund of axlUSDC on ${toChain === null || toChain === void 0 ? void 0 : toChain.networkName}
|
|
38728
|
+
return `You received a refund of axlUSDC to your wallet ${toAddressFormatted} on ${toChain === null || toChain === void 0 ? void 0 : toChain.networkName}.`;
|
|
38696
38729
|
}
|
|
38697
38730
|
case SwapState.NEEDS_GAS: {
|
|
38698
38731
|
return 'Add gas to the transaction via Axelarscan to complete the swap';
|
|
@@ -38706,10 +38739,10 @@ const swapProgressButtonTexts = {
|
|
|
38706
38739
|
[SwapState.ERROR]: 'Ok, go back',
|
|
38707
38740
|
[SwapState.CONFIRMATION_TOO_LONG]: 'Cancel',
|
|
38708
38741
|
[SwapState.CONFIRMATION_REJECTED]: 'Ok, go back',
|
|
38709
|
-
[SwapState.PARTIAL_SUCCESS]: '
|
|
38742
|
+
[SwapState.PARTIAL_SUCCESS]: 'Cancel',
|
|
38710
38743
|
[SwapState.NEEDS_GAS]: 'Go to Axelarscan',
|
|
38711
38744
|
};
|
|
38712
|
-
function SwapProgressView({ steps, isOpen = true, handleClose, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, }) {
|
|
38745
|
+
function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, }) {
|
|
38713
38746
|
const [showSwapInfoSection, setShowSwapInfoSection] = React.useState(true);
|
|
38714
38747
|
const isFirstRenderRef = React.useRef(true);
|
|
38715
38748
|
const { timer, stopTimer, startTimer } = useTimer({
|
|
@@ -38738,6 +38771,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, socialLink, suppo
|
|
|
38738
38771
|
toAmount,
|
|
38739
38772
|
toChain,
|
|
38740
38773
|
toToken,
|
|
38774
|
+
toAddressFormatted,
|
|
38741
38775
|
});
|
|
38742
38776
|
return {
|
|
38743
38777
|
headerTitle,
|
|
@@ -38756,18 +38790,18 @@ function SwapProgressView({ steps, isOpen = true, handleClose, socialLink, suppo
|
|
|
38756
38790
|
: 'tw-animate-scale-and-fade-down'), children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-[160px] tw-w-full tw-items-center tw-justify-center tw-rounded-tl-squid-l tw-rounded-tr-squid-l tw-bg-royal-500 tw-text-material-light-thin", style: {
|
|
38757
38791
|
// box shadow simulating bottom outline (we do not use css outline because cannot apply it to only one side)
|
|
38758
38792
|
boxShadow: '0 1px 0 currentColor',
|
|
38759
|
-
}, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(AnimationWrapper, { lottieJsonFile: swapProgressAnimations[swapState], hideAnimations: false, animReplacement: jsxRuntime.jsx(Loader, { size: "60" }) }) }) }), 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(
|
|
38760
|
-
swapState === SwapState.PARTIAL_SUCCESS ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsxRuntime.jsx(EmojiSadFilledIcon, {}) }), jsxRuntime.jsx(Button, { size: "md", variant: "secondary", label: "Get help", link: supportLink, title: "Contact support" })] })) : (jsxRuntime.jsx(TokenPair, { firstToken: {
|
|
38793
|
+
}, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(AnimationWrapper, { lottieJsonFile: swapProgressAnimations[swapState], hideAnimations: false, animReplacement: jsxRuntime.jsx(Loader, { size: "60" }) }) }) }), 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, { 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: {
|
|
38761
38794
|
bgColor: fromToken.bgColor,
|
|
38762
38795
|
imageUrl: fromToken.logoUrl,
|
|
38763
38796
|
}, secondToken: {
|
|
38764
38797
|
bgColor: toToken.bgColor,
|
|
38765
38798
|
imageUrl: toToken.logoUrl,
|
|
38766
|
-
} })) }), jsxRuntime.jsx(SwapProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxRuntime.jsxs("ul", { className: "tw-flex tw-h-[195px] tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-py-squid-s", children: [jsxRuntime.jsx(SwapDetailListItem, { icon: jsxRuntime.jsx(ArrowsSwapIcon, {}), label: "Swap", detail: jsxRuntime.jsx(SwapDetailItemValues, { fromContent: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-full", src: fromToken.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromAmount })] }), toContent: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-full", src: toToken.logoUrl }), jsxRuntime.jsx(CaptionText, { children: toAmount })] }) }) }), jsxRuntime.jsx(SwapDetailListItem, { icon: jsxRuntime.jsx(ChainLink, { size: "24", strokeWidth: "1.5" }), label: "Chain", detail: jsxRuntime.jsx(SwapDetailItemValues, { fromContent: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] }), toContent: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: toChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsxRuntime.jsx(SwapDetailListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsxRuntime.jsx(SwapDetailItemValues, { fromContent: fromAddressFormatted, toContent: toAddressFormatted }) }), jsxRuntime.jsx(SwapDetailListItem, { icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxRuntime.jsx(SwapDetailItemValues, { fromContent: timer, toContent: estimatedTimeToComplete }) })] })] }), jsxRuntime.jsx(TrackTransactionView, { onTxEnd: () => stopTimer(), onTxStart: () => startTimer(), rawSteps: steps, onClose: handleRouteStepsClosed, onOpen: handleRouteStepsOpen, swapState: swapState }), jsxRuntime.jsx(Button, { size: "lg", variant: "primary", label: swapProgressButtonTexts[swapState], onClick: handleClose, className: "tw-min-h-button" })] }));
|
|
38799
|
+
} })) }), jsxRuntime.jsx(SwapProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxRuntime.jsxs("ul", { className: "tw-flex tw-h-[195px] tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-py-squid-s", children: [jsxRuntime.jsx(SwapDetailListItem, { icon: jsxRuntime.jsx(ArrowsSwapIcon, {}), label: "Swap", detail: jsxRuntime.jsx(SwapDetailItemValues, { fromContent: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-full", src: fromToken.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromAmount })] }), toContent: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-full", src: toToken.logoUrl }), jsxRuntime.jsx(CaptionText, { children: toAmount })] }) }) }), jsxRuntime.jsx(SwapDetailListItem, { icon: jsxRuntime.jsx(ChainLink, { size: "24", strokeWidth: "1.5" }), label: "Chain", detail: jsxRuntime.jsx(SwapDetailItemValues, { fromContent: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] }), toContent: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: toChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsxRuntime.jsx(SwapDetailListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsxRuntime.jsx(SwapDetailItemValues, { fromContent: fromAddressFormatted, toContent: toAddressFormatted }) }), jsxRuntime.jsx(SwapDetailListItem, { icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsxRuntime.jsx(SwapDetailItemValues, { fromContent: timer, toContent: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsxRuntime.jsx(CaptionText, { children: timer })) : (jsxRuntime.jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsxRuntime.jsx(TrackTransactionView, { onTxEnd: () => stopTimer(), onTxStart: () => startTimer(), rawSteps: steps, onClose: handleRouteStepsClosed, onOpen: handleRouteStepsOpen, swapState: swapState }), swapState === SwapState.PARTIAL_SUCCESS ? (jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Button, { size: "lg", variant: "secondary", label: swapProgressButtonTexts[swapState], onClick: handleClose, className: "tw-min-h-button" }), jsxRuntime.jsx(Button, { size: "lg", variant: "primary", label: "Complete", onClick: handleComplete, className: "tw-min-h-button" })] })) : (jsxRuntime.jsx(Button, { size: "lg", variant: "primary", label: swapProgressButtonTexts[swapState], onClick: handleClose, className: "tw-min-h-button" }))] }));
|
|
38767
38800
|
}
|
|
38768
38801
|
const TrackTransactionView = ({ swapState, rawSteps, onOpen, onClose, onTxStart, onTxEnd, }) => {
|
|
38769
38802
|
const { currentStepIndex, steps } = React.useMemo(() => {
|
|
38770
|
-
if (
|
|
38803
|
+
if (swapState === SwapState.COMPLETED) {
|
|
38804
|
+
onTxEnd();
|
|
38771
38805
|
return {
|
|
38772
38806
|
steps: rawSteps,
|
|
38773
38807
|
currentStepIndex: rawSteps.length - 1,
|
|
@@ -38776,7 +38810,7 @@ const TrackTransactionView = ({ swapState, rawSteps, onOpen, onClose, onTxStart,
|
|
|
38776
38810
|
// TODO: Fix this
|
|
38777
38811
|
// Vercel build throws an error for findLastIndex, probably related to the Node version being used
|
|
38778
38812
|
// @ts-ignore
|
|
38779
|
-
const lastSuccessfulStepIndex = rawSteps.findLastIndex((s) => s.status ===
|
|
38813
|
+
const lastSuccessfulStepIndex = rawSteps.findLastIndex((s) => s.status === 'executed' || s.status === 'success');
|
|
38780
38814
|
if (swapState === SwapState.PROGRESS) {
|
|
38781
38815
|
onTxStart();
|
|
38782
38816
|
const noSuccessfulStep = lastSuccessfulStepIndex < 0;
|
|
@@ -38786,13 +38820,10 @@ const TrackTransactionView = ({ swapState, rawSteps, onOpen, onClose, onTxStart,
|
|
|
38786
38820
|
const currentOngoingStepIndex = noSuccessfulStep
|
|
38787
38821
|
? 1
|
|
38788
38822
|
: lastSuccessfulStepIndex + 1;
|
|
38789
|
-
// If current step is not the last one,
|
|
38823
|
+
// If current step is not the last one, set the current step index to the ongoing step index
|
|
38790
38824
|
if (currentOngoingStepIndex < rawSteps.length) {
|
|
38791
|
-
// Show loader in the current ongoing step
|
|
38792
|
-
// @ts-ignore Vercel build error - TODO: Fix this
|
|
38793
|
-
const stepsWithLoader = rawSteps.with(currentOngoingStepIndex, Object.assign(Object.assign({}, rawSteps[currentOngoingStepIndex]), { chipContent: jsxRuntime.jsx(Loader, { size: "16", strokeWidth: "2" }) }));
|
|
38794
38825
|
return {
|
|
38795
|
-
steps:
|
|
38826
|
+
steps: rawSteps,
|
|
38796
38827
|
currentStepIndex: currentOngoingStepIndex,
|
|
38797
38828
|
};
|
|
38798
38829
|
}
|
|
@@ -38801,13 +38832,6 @@ const TrackTransactionView = ({ swapState, rawSteps, onOpen, onClose, onTxStart,
|
|
|
38801
38832
|
currentStepIndex: rawSteps.length - 1,
|
|
38802
38833
|
};
|
|
38803
38834
|
}
|
|
38804
|
-
else if (swapState === SwapState.COMPLETED) {
|
|
38805
|
-
onTxEnd();
|
|
38806
|
-
return {
|
|
38807
|
-
steps: rawSteps,
|
|
38808
|
-
currentStepIndex: rawSteps.length - 1,
|
|
38809
|
-
};
|
|
38810
|
-
}
|
|
38811
38835
|
return {
|
|
38812
38836
|
steps: rawSteps,
|
|
38813
38837
|
currentStepIndex: 0,
|
|
@@ -38818,6 +38842,9 @@ const TrackTransactionView = ({ swapState, rawSteps, onOpen, onClose, onTxStart,
|
|
|
38818
38842
|
const SwapDetailItemValues = ({ fromContent, toContent, }) => {
|
|
38819
38843
|
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: [typeof fromContent === 'string' ? (jsxRuntime.jsx(CaptionText, { children: fromContent })) : (fromContent), jsxRuntime.jsx("span", { className: "tw-text-grey-500", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), typeof toContent === 'string' ? (jsxRuntime.jsx(CaptionText, { children: toContent })) : (toContent)] }));
|
|
38820
38844
|
};
|
|
38845
|
+
const SwapErrorTopMenu = ({ supportLink, type, }) => {
|
|
38846
|
+
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, { size: "md", variant: "secondary", label: "Get help", link: supportLink, title: "Contact support" })] }));
|
|
38847
|
+
};
|
|
38821
38848
|
|
|
38822
38849
|
const lightTheme = {
|
|
38823
38850
|
// content
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
export declare function EmojiSadIcon({ className }: {
|
|
1
|
+
export declare function EmojiSadIcon({ className, size, }: {
|
|
2
2
|
className?: string;
|
|
3
|
+
size?: string;
|
|
3
4
|
}): import("react/jsx-runtime").JSX.Element;
|
|
4
5
|
export declare function EmojiMeh({ className, size, }: {
|
|
5
6
|
className?: string;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
interface LoaderProps {
|
|
2
2
|
size?: string;
|
|
3
3
|
strokeWidth?: string;
|
|
4
|
+
invertColors?: boolean;
|
|
4
5
|
}
|
|
5
|
-
export declare function Loader({ size, strokeWidth }: LoaderProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare function Loader({ size, strokeWidth, invertColors, }: LoaderProps): import("react/jsx-runtime").JSX.Element;
|
|
6
7
|
export {};
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
export declare function
|
|
2
|
-
export declare function
|
|
1
|
+
export declare function SwapSuccessIcon(): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare function SwapErrorIcon(): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare function SwapWarningIcon(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { SwapStepDescriptionBlock, SwapStepItemStatus } from '../../types/components';
|
|
3
2
|
interface SwapStepItemProps {
|
|
4
3
|
descriptionBlocks: SwapStepDescriptionBlock[];
|
|
5
|
-
chipContent: React.ReactNode;
|
|
6
4
|
showStepSeparator?: boolean;
|
|
7
5
|
link?: string;
|
|
8
6
|
status?: SwapStepItemStatus;
|
|
9
7
|
}
|
|
10
|
-
export declare function SwapStepItem({ descriptionBlocks,
|
|
8
|
+
export declare function SwapStepItem({ descriptionBlocks, showStepSeparator, link, status, }: SwapStepItemProps): import("react/jsx-runtime").JSX.Element;
|
|
11
9
|
export {};
|
|
@@ -9,9 +9,10 @@ type Token = {
|
|
|
9
9
|
logoUrl: string;
|
|
10
10
|
bgColor: string;
|
|
11
11
|
};
|
|
12
|
-
export declare function SwapProgressView({ steps, isOpen, handleClose, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, }: {
|
|
12
|
+
export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, }: {
|
|
13
13
|
steps: SwapStep[];
|
|
14
14
|
handleClose?: () => void;
|
|
15
|
+
handleComplete?: () => void;
|
|
15
16
|
isOpen?: boolean;
|
|
16
17
|
socialLink?: string;
|
|
17
18
|
supportLink?: string;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Loader } from '../../components/icons/Loader';
|
|
3
|
+
declare const meta: Meta<typeof Loader>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Normal: Story;
|
|
7
|
+
export declare const StrokeThin: Story;
|
|
8
|
+
export declare const StrokeThick: Story;
|
|
9
|
+
export declare const InvertColors: Story;
|
|
@@ -4,10 +4,21 @@ declare const meta: Meta<typeof SwapStepItem>;
|
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof meta>;
|
|
6
6
|
export declare const Executed: Story;
|
|
7
|
+
export declare const ExecutedWithSeparator: Story;
|
|
8
|
+
export declare const Success: Story;
|
|
9
|
+
export declare const SuccessWithSeparator: Story;
|
|
7
10
|
export declare const Pending: Story;
|
|
8
|
-
export declare const
|
|
11
|
+
export declare const PendingWithSeparator: Story;
|
|
12
|
+
export declare const Ongoing: Story;
|
|
13
|
+
export declare const OngoingWithSeparator: Story;
|
|
14
|
+
export declare const Waiting: Story;
|
|
15
|
+
export declare const WaitingWithSeparator: Story;
|
|
16
|
+
export declare const Error: Story;
|
|
17
|
+
export declare const ErrorWithSeparator: Story;
|
|
18
|
+
export declare const Warning: Story;
|
|
19
|
+
export declare const WarningWithSeparator: Story;
|
|
9
20
|
export declare const CustomDescription: Story;
|
|
10
|
-
export declare const
|
|
21
|
+
export declare const CustomDescriptionWithSeparator: Story;
|
|
11
22
|
export declare const Link: Story;
|
|
12
23
|
export declare const LongDescription: Story;
|
|
13
24
|
export declare const LongDescriptionWithSeparator: Story;
|
|
@@ -3,4 +3,12 @@ import { SwapProgressView } from '../../components/views/SwapProgressView';
|
|
|
3
3
|
declare const meta: Meta<typeof SwapProgressView>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof meta>;
|
|
6
|
-
export declare const
|
|
6
|
+
export declare const WithControls: Story;
|
|
7
|
+
export declare const Completed: Story;
|
|
8
|
+
export declare const Error: Story;
|
|
9
|
+
export declare const Confirm: Story;
|
|
10
|
+
export declare const ConfirmationRejected: Story;
|
|
11
|
+
export declare const ConfirmationTooLong: Story;
|
|
12
|
+
export declare const NeedsGas: Story;
|
|
13
|
+
export declare const PartialSuccess: Story;
|
|
14
|
+
export declare const Progress: Story;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
export type TextSize = 'small' | 'medium' | 'large';
|
|
3
2
|
export type SwitchSize = 'small' | 'large';
|
|
4
3
|
export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
|
|
@@ -11,9 +10,8 @@ export type SwapStepDescriptionBlock = {
|
|
|
11
10
|
};
|
|
12
11
|
export type SwapStep = {
|
|
13
12
|
descriptionBlocks: SwapStepDescriptionBlock[];
|
|
14
|
-
chipContent: React.ReactNode;
|
|
15
13
|
link?: string;
|
|
16
|
-
status:
|
|
14
|
+
status: SwapStepItemStatus;
|
|
17
15
|
};
|
|
18
16
|
export declare enum SwapState {
|
|
19
17
|
CONFIRM = 0,
|
|
@@ -27,4 +25,4 @@ export declare enum SwapState {
|
|
|
27
25
|
}
|
|
28
26
|
export type DetailsToolbarState = 'full' | 'loading' | 'empty' | 'error';
|
|
29
27
|
export type ThemeType = 'light' | 'dark';
|
|
30
|
-
export type SwapStepItemStatus = 'executed' | '
|
|
28
|
+
export type SwapStepItemStatus = 'pending' | 'waiting' | 'ongoing' | 'executed' | 'success' | 'error' | 'warning';
|