@0xsquid/ui 0.10.1 → 0.11.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 +94 -48
- package/dist/cjs/types/components/buttons/SettingsButton.d.ts +2 -1
- package/dist/cjs/types/components/controls/SettingsSlider.d.ts +5 -2
- package/dist/cjs/types/components/icons/EmojiSad.d.ts +3 -1
- package/dist/cjs/types/components/icons/Loader.d.ts +2 -1
- package/dist/cjs/types/components/layout/ProductCard.d.ts +4 -0
- package/dist/cjs/types/components/lists/HistoryItem.d.ts +3 -3
- package/dist/cjs/types/components/lists/SettingsItem.d.ts +9 -7
- package/dist/cjs/types/components/views/MainView.d.ts +0 -4
- package/dist/cjs/types/stories/badges/BadgeImage.stories.d.ts +11 -0
- package/dist/cjs/types/stories/badges/LoadingSkeleton.stories.d.ts +6 -0
- package/dist/cjs/types/stories/layout/SwapConfiguration.stories.d.ts +2 -2
- package/dist/cjs/types/stories/lists/HistoryItem.stories.d.ts +2 -1
- package/dist/esm/index.js +94 -49
- package/dist/esm/types/components/buttons/SettingsButton.d.ts +2 -1
- package/dist/esm/types/components/controls/SettingsSlider.d.ts +5 -2
- package/dist/esm/types/components/icons/EmojiSad.d.ts +3 -1
- package/dist/esm/types/components/icons/Loader.d.ts +2 -1
- package/dist/esm/types/components/layout/ProductCard.d.ts +4 -0
- package/dist/esm/types/components/lists/HistoryItem.d.ts +3 -3
- package/dist/esm/types/components/lists/SettingsItem.d.ts +9 -7
- package/dist/esm/types/components/views/MainView.d.ts +0 -4
- package/dist/esm/types/stories/badges/BadgeImage.stories.d.ts +11 -0
- package/dist/esm/types/stories/badges/LoadingSkeleton.stories.d.ts +6 -0
- package/dist/esm/types/stories/layout/SwapConfiguration.stories.d.ts +2 -2
- package/dist/esm/types/stories/lists/HistoryItem.stories.d.ts +2 -1
- package/dist/index.css +102 -26
- package/dist/index.d.ts +24 -14
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -2564,7 +2564,7 @@ function BadgeImage({ imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, roun
|
|
|
2564
2564
|
}
|
|
2565
2565
|
|
|
2566
2566
|
function LoadingSkeleton({ className, height = '20', }) {
|
|
2567
|
-
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.
|
|
2567
|
+
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", { "clip-path": "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", { "stop-color": "currentColor" }), jsxRuntime.jsx("stop", { offset: "0.395881", "stop-color": "currentColor" }), jsxRuntime.jsx("stop", { offset: "0.597867", "stop-color": "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", "stop-color": "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" }) })] }), ' '] }));
|
|
2568
2568
|
}
|
|
2569
2569
|
|
|
2570
2570
|
/******************************************************************************
|
|
@@ -2627,10 +2627,31 @@ function BodyText(_a) {
|
|
|
2627
2627
|
return (jsxRuntime.jsx("span", Object.assign({}, props, { className: cn(textClassMap$1[size], fontWeightClass, props.className), children: children })));
|
|
2628
2628
|
}
|
|
2629
2629
|
|
|
2630
|
-
function Loader({ size = '24' }) {
|
|
2631
|
-
return (
|
|
2632
|
-
|
|
2633
|
-
|
|
2630
|
+
function Loader({ size = '24', strokeWidth = '1' }) {
|
|
2631
|
+
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: `
|
|
2632
|
+
.squid-animated-loader-dash {
|
|
2633
|
+
animation: squid-animated-loader-dash-grow 0.5s infinite alternate;
|
|
2634
|
+
}
|
|
2635
|
+
@keyframes squid-animated-loader-dash-grow {
|
|
2636
|
+
0% {
|
|
2637
|
+
stroke-dasharray: 10, 5;
|
|
2638
|
+
}
|
|
2639
|
+
100% {
|
|
2640
|
+
stroke-dasharray: 5, 20;
|
|
2641
|
+
}
|
|
2642
|
+
}
|
|
2643
|
+
@keyframes squid-animated-loader-rotate {
|
|
2644
|
+
from {
|
|
2645
|
+
transform: rotate(0deg);
|
|
2646
|
+
}
|
|
2647
|
+
to {
|
|
2648
|
+
transform: rotate(-360deg);
|
|
2649
|
+
}
|
|
2650
|
+
}
|
|
2651
|
+
.squid-animated-loader {
|
|
2652
|
+
animation: squid-animated-loader-rotate 1s linear infinite;
|
|
2653
|
+
transform-origin: center;
|
|
2654
|
+
}` }), jsxRuntime.jsxs("g", { "clip-path": "url(#clip0_1387_2296)", children: [jsxRuntime.jsx("circle", { cx: "7.99967", cy: "8.00004", r: "6.66667", stroke: "currentColor", className: "group-data-[squid-theme-type=dark]:tw-text-material-light-thin group-data-[squid-theme-type=light]:tw-text-material-dark-thin", "stroke-width": strokeWidth }), jsxRuntime.jsx("path", { className: "squid-animated-loader-dash group-data-[squid-theme-type=dark]:tw-text-material-light-thick group-data-[squid-theme-type=light]:tw-text-material-dark-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", "stroke-width": strokeWidth, "stroke-linecap": "round" })] }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_1387_2296", children: jsxRuntime.jsx("rect", { width: "16", height: "16", fill: "white" }) }) })] }));
|
|
2634
2655
|
}
|
|
2635
2656
|
|
|
2636
2657
|
function AddressButton(_a) {
|
|
@@ -2757,12 +2778,12 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
|
|
|
2757
2778
|
}, [chainBgColor, tokenBgColor]);
|
|
2758
2779
|
return (jsxRuntime.jsxs("button", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center tw-text-grey-100 focus:tw-outline-none", children: [jsxRuntime.jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-cursor-pointer tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsxRuntime.jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-cursor-pointer tw-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
|
|
2759
2780
|
backgroundImage: bgGradient,
|
|
2760
|
-
}, children: jsxRuntime.jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsxRuntime.jsx("img", { src: chainImageUrl, alt: "", className: "tw-rounded-full" })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsxRuntime.
|
|
2761
|
-
|
|
2762
|
-
|
|
2781
|
+
}, children: jsxRuntime.jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsxRuntime.jsx("img", { src: chainImageUrl, alt: "", className: "tw-rounded-full" })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsxRuntime.jsxs("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-cursor-pointer tw-overflow-hidden'), children: [jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
|
|
2782
|
+
backgroundColor: tokenBgColor,
|
|
2783
|
+
} }), jsxRuntime.jsx("img", { src: tokenImageUrl, alt: tokenSymbol, className: "tw-absolute tw-h-squid-xl tw-w-squid-xl tw-rounded-full" }), jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px] tw-border-b\n tw-border-t tw-border-material-light-thin" })] })) : null, jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', tokenImageUrl && 'tw-pl-[7px]'), style: {
|
|
2763
2784
|
backgroundColor: tokenBgColor,
|
|
2764
2785
|
color: tokenTextColor,
|
|
2765
|
-
}, children: [jsxRuntime.jsx(BodyText, { size: "small", className:
|
|
2786
|
+
}, children: [jsxRuntime.jsx(BodyText, { size: "small", className: cn('tw-leading-[13px]', !tokenImageUrl && 'tw-w-[135px]'), children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
|
|
2766
2787
|
}
|
|
2767
2788
|
|
|
2768
2789
|
const CSS_VARS = {
|
|
@@ -2924,12 +2945,12 @@ function HeadingText({ children, bold, size }) {
|
|
|
2924
2945
|
return (jsxRuntime.jsx("h6", { className: clsx(textClassMap[size], fontWeightClass), children: children }));
|
|
2925
2946
|
}
|
|
2926
2947
|
|
|
2927
|
-
function SettingsSlider({ value, type, onChange }) {
|
|
2928
|
-
return (jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxRuntime.jsx("input", { min: 0, max: 99, placeholder: "0", type: "number", onChange: (e) => {
|
|
2929
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
|
|
2948
|
+
function SettingsSlider({ value, type, onChange, hasDecimals, max, min, }) {
|
|
2949
|
+
return (jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxRuntime.jsx("input", { min: min !== null && min !== void 0 ? min : 0, max: max !== null && max !== void 0 ? max : 99, step: hasDecimals ? 0.1 : 1, placeholder: "0", type: "number", onChange: (e) => {
|
|
2950
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(Number(e.target.value));
|
|
2930
2951
|
}, className: cn('tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-bg-transparent tw-p-squid-xs tw-text-caption !tw-font-medium tw-leading-[10px] tw-text-grey-300 placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', type === 'percentage'
|
|
2931
|
-
? 'tw-w-[
|
|
2932
|
-
: 'tw-w-[
|
|
2952
|
+
? 'tw-w-[84px] tw-pr-[52px] tw-text-right'
|
|
2953
|
+
: 'tw-w-[80px] tw-pl-[20px] tw-pr-[32px] tw-text-left'), value: value }), type === 'percentage' && jsxRuntime.jsx(PercentageDecorator, {}), type === 'amount' && jsxRuntime.jsx(AmountDecorator, {})] }));
|
|
2933
2954
|
}
|
|
2934
2955
|
function PercentageDecorator() {
|
|
2935
2956
|
return (jsxRuntime.jsxs("div", { className: "tw-absolute tw-right-squid-xs tw-flex tw-items-center tw-justify-center tw-gap-squid-xs !tw-font-medium tw-leading-[10px]", children: [jsxRuntime.jsx(CaptionText, { className: "tw-translate-y-[0.5px] !tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: "%" }), jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
|
|
@@ -2962,7 +2983,7 @@ function Switch({ checked = false, onChange, size, disabled = false, }) {
|
|
|
2962
2983
|
switchCircleSizeClassMap[size],
|
|
2963
2984
|
// disabled and checked styles
|
|
2964
2985
|
checked
|
|
2965
|
-
? 'tw-translate-x-0 tw-bg-[
|
|
2986
|
+
? 'tw-translate-x-0 group-data-[squid-theme-type=dark]:tw-bg-grey-100 group-data-[squid-theme-type=light]:tw-bg-grey-900'
|
|
2966
2987
|
: '-tw-translate-x-full tw-bg-grey-500') })] }));
|
|
2967
2988
|
}
|
|
2968
2989
|
|
|
@@ -3034,9 +3055,10 @@ function generateMarkerLines(count) {
|
|
|
3034
3055
|
return allShadows.join(', ');
|
|
3035
3056
|
}
|
|
3036
3057
|
|
|
3058
|
+
const baseButtonClassName = 'tw-flex tw-items-center tw-gap-squid-xxs tw-justify-center tw-border';
|
|
3037
3059
|
const buttonSizeClassMap = {
|
|
3038
|
-
md: 'tw-px-squid-xs tw-py-squid-xxs tw-rounded-squid-m tw-
|
|
3039
|
-
lg: 'tw-
|
|
3060
|
+
md: 'tw-px-squid-xs tw-py-squid-xxs tw-rounded-squid-m tw-min-w-[60px] tw-h-squid-xl',
|
|
3061
|
+
lg: 'tw-rounded-squid-xxl tw-p-1 tw-h-button tw-w-full',
|
|
3040
3062
|
};
|
|
3041
3063
|
const buttonVariantClassMap = {
|
|
3042
3064
|
primary: 'tw-bg-royal-500 group-data-[squid-theme-type=light]:tw-text-grey-900 group-data-[squid-theme-type=dark]:tw-text-grey-100 tw-border-material-light-thin',
|
|
@@ -3045,7 +3067,7 @@ const buttonVariantClassMap = {
|
|
|
3045
3067
|
};
|
|
3046
3068
|
// right now all variants have the same disabled styles
|
|
3047
3069
|
// in the future, we can add more disabled styles for different variants
|
|
3048
|
-
const buttonDisabledClass = 'tw-bg-grey-800 tw-text-grey-600 tw-cursor-not-allowed';
|
|
3070
|
+
const buttonDisabledClass = '!tw-bg-grey-800 !tw-text-grey-600 tw-cursor-not-allowed';
|
|
3049
3071
|
function Button(_a) {
|
|
3050
3072
|
var { label, disabled, size, variant, icon, link } = _a, props = __rest(_a, ["label", "disabled", "size", "variant", "icon", "link"]);
|
|
3051
3073
|
const children = (jsxRuntime.jsx(jsxRuntime.Fragment, { children: size === 'lg' ? (jsxRuntime.jsx("span", { className: "tw-px-squid-m", children: jsxRuntime.jsx(BodyText, { size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
|
|
@@ -3055,7 +3077,7 @@ function Button(_a) {
|
|
|
3055
3077
|
icon) : (
|
|
3056
3078
|
// icon and label
|
|
3057
3079
|
jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null }));
|
|
3058
|
-
const className = cn(buttonSizeClassMap[size], buttonVariantClassMap[variant],
|
|
3080
|
+
const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant],
|
|
3059
3081
|
// disabled styles
|
|
3060
3082
|
disabled && buttonDisabledClass,
|
|
3061
3083
|
// custom classes from props
|
|
@@ -3080,8 +3102,8 @@ function FeeButton(_a) {
|
|
|
3080
3102
|
return (jsxRuntime.jsxs("button", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-xl tw-w-full tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin', className), children: [jsxRuntime.jsx(Chip, { label: chipLabel }), jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(EthereumIcon, {}) }), jsxRuntime.jsx(UsdAmount, { usdAmount: feeInUsd })] })] })));
|
|
3081
3103
|
}
|
|
3082
3104
|
|
|
3083
|
-
function SettingsButton({ label, isSelected = false, }) {
|
|
3084
|
-
return (jsxRuntime.jsx("button", { className: cn('tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', isSelected && 'tw-outline-royal-500'), children: jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
|
|
3105
|
+
function SettingsButton({ label, isSelected = false, onClick, }) {
|
|
3106
|
+
return (jsxRuntime.jsx("button", { onClick: onClick, className: cn('tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', isSelected && 'tw-outline-royal-500'), children: jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
|
|
3085
3107
|
}
|
|
3086
3108
|
|
|
3087
3109
|
function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode = true, boostTooltipDisplayDelayMs = 0, }) {
|
|
@@ -3090,8 +3112,8 @@ function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessa
|
|
|
3090
3112
|
: 'tw-bg-status-positive') })] }));
|
|
3091
3113
|
}
|
|
3092
3114
|
|
|
3093
|
-
function EmojiSadIcon() {
|
|
3094
|
-
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", 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" }) }));
|
|
3115
|
+
function EmojiSadIcon({ className }) {
|
|
3116
|
+
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", 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" }) }));
|
|
3095
3117
|
}
|
|
3096
3118
|
|
|
3097
3119
|
function ErrorMessage({ message, showIcon = true }) {
|
|
@@ -3115,7 +3137,7 @@ function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode,
|
|
|
3115
3137
|
return 'full';
|
|
3116
3138
|
}, [errorMessage, isLoading, isEmpty]);
|
|
3117
3139
|
const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
|
|
3118
|
-
return (jsxRuntime.jsx("aside", { className: cn('tw-h-
|
|
3140
|
+
return (jsxRuntime.jsx("aside", { className: cn('tw-flex tw-h-[50px] tw-w-[480px] tw-items-center tw-justify-around tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsxRuntime.jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsxRuntime.jsx(Loader, { size: "32" })) : (jsxRuntime.jsx(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsxRuntime.jsx(ChevronLargeDownIcon, {}) })) }), jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
|
|
3119
3141
|
}
|
|
3120
3142
|
|
|
3121
3143
|
function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }) {
|
|
@@ -3165,11 +3187,46 @@ const dropdownPositionClassMap = {
|
|
|
3165
3187
|
bottom: 'tw-right-[calc(100%-10px)] tw-top-7',
|
|
3166
3188
|
center: 'tw-right-[40px] -tw-top-[55px]',
|
|
3167
3189
|
};
|
|
3168
|
-
|
|
3190
|
+
const statusBadge = {
|
|
3191
|
+
completed: {},
|
|
3192
|
+
pending: {
|
|
3193
|
+
badge: jsxRuntime.jsx(Loader, { size: "16", strokeWidth: "2" }),
|
|
3194
|
+
containerClassName: 'tw-bg-royal-400',
|
|
3195
|
+
},
|
|
3196
|
+
failed: {
|
|
3197
|
+
badge: (jsxRuntime.jsx("span", { className: "group-data-[squid-theme-type=dark]:tw-bg-grey-100 group-data-[squid-theme-type=light]:tw-bg-grey-900", children: jsxRuntime.jsx(EmojiSadIcon, { className: "tw-text-status-negative" }) })),
|
|
3198
|
+
containerClassName: 'tw-bg-status-negative',
|
|
3199
|
+
},
|
|
3200
|
+
};
|
|
3201
|
+
function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems, itemsContainerRef, status, }) {
|
|
3169
3202
|
const { isDropdownOpen, dropdownRef, openDropdownButtonRef, openDropdown } = useDropdownMenu();
|
|
3170
3203
|
const [dropdownPosition, setDropdownPosition] = react.useState(null);
|
|
3171
3204
|
const itemRef = react.useRef(null);
|
|
3172
3205
|
const menuRef = react.useRef(null);
|
|
3206
|
+
const statusInfo = react.useMemo(() => {
|
|
3207
|
+
switch (status) {
|
|
3208
|
+
case 'completed':
|
|
3209
|
+
return {
|
|
3210
|
+
label: dateCompleted,
|
|
3211
|
+
className: '',
|
|
3212
|
+
};
|
|
3213
|
+
case 'pending':
|
|
3214
|
+
return {
|
|
3215
|
+
label: 'Pending',
|
|
3216
|
+
className: 'tw-text-royal-400',
|
|
3217
|
+
};
|
|
3218
|
+
case 'failed':
|
|
3219
|
+
return {
|
|
3220
|
+
label: 'Failed',
|
|
3221
|
+
className: 'tw-text-status-negative',
|
|
3222
|
+
};
|
|
3223
|
+
default:
|
|
3224
|
+
return {
|
|
3225
|
+
label: '',
|
|
3226
|
+
className: '',
|
|
3227
|
+
};
|
|
3228
|
+
}
|
|
3229
|
+
}, [status, dateCompleted]);
|
|
3173
3230
|
// Effect to find the best position for the dropdown menu, so it's always visible for the user
|
|
3174
3231
|
react.useEffect(() => {
|
|
3175
3232
|
var _a;
|
|
@@ -3214,8 +3271,8 @@ function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted,
|
|
|
3214
3271
|
setDropdownPosition('top');
|
|
3215
3272
|
}
|
|
3216
3273
|
}, [isDropdownOpen, menuRef, dropdownPosition, itemRef]);
|
|
3217
|
-
return (jsxRuntime.jsx("li", { ref: itemRef, className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxRuntime.jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-cursor-pointer tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [
|
|
3218
|
-
'tw-transition-opacity group-hover/history-item:tw-hidden group-hover/history-item:tw-opacity-0 peer-focus:tw-hidden peer-focus:tw-opacity-0'), children:
|
|
3274
|
+
return (jsxRuntime.jsx("li", { ref: itemRef, className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxRuntime.jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-cursor-pointer tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [!!statusBadge[status].badge && (jsxRuntime.jsx("span", { className: cn('tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border tw-border-grey-900 tw-p-0.5', statusBadge[status].containerClassName), children: statusBadge[status].badge })), jsxRuntime.jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsxRuntime.jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [jsxRuntime.jsx(CaptionText, { children: fromLabel }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronRightSmallIcon, {}) }), jsxRuntime.jsx(CaptionText, { children: toLabel })] }), !!dropdownMenuItems && (jsxRuntime.jsx("button", { className: "tw-peer tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity focus:tw-opacity-100 group-hover/history-item:tw-opacity-100", onClick: openDropdown, ref: openDropdownButtonRef, children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })), jsxRuntime.jsx("div", { className: cn(!!dropdownMenuItems &&
|
|
3275
|
+
'tw-transition-opacity group-hover/history-item:tw-hidden group-hover/history-item:tw-opacity-0 peer-focus:tw-hidden peer-focus:tw-opacity-0'), children: statusInfo.label && (jsxRuntime.jsx(CaptionText, { className: statusInfo.className, children: statusInfo.label })) })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), jsxRuntime.jsx(BodyText, { size: "small", children: toAmount })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsxRuntime.jsx(DropdownMenu, { menuRef: menuRef,
|
|
3219
3276
|
// only show dropdown menu if there is a position defined for it
|
|
3220
3277
|
isHidden: !dropdownPosition, className: cn(!!dropdownPosition && dropdownPositionClassMap[dropdownPosition]), dropdownRef: dropdownRef, items: dropdownMenuItems })) : null] }) }));
|
|
3221
3278
|
}
|
|
@@ -3252,7 +3309,7 @@ function HelpIcon({ size = '20', className, }) {
|
|
|
3252
3309
|
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", { "clip-path": "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" }) }) })] }));
|
|
3253
3310
|
}
|
|
3254
3311
|
|
|
3255
|
-
function SettingsItem({ icon, label,
|
|
3312
|
+
function SettingsItem({ icon, label, control, link, transparent = false, helpTooltip, }) {
|
|
3256
3313
|
const ContentTag = link ? 'a' : 'div';
|
|
3257
3314
|
const contentTagProps = link
|
|
3258
3315
|
? {
|
|
@@ -3261,25 +3318,10 @@ function SettingsItem({ icon, label, controls = [], link, transparent = false, h
|
|
|
3261
3318
|
}
|
|
3262
3319
|
: {};
|
|
3263
3320
|
const helpIcon = !!helpTooltip && (jsxRuntime.jsx(HelpIcon, { className: cn('tw-text-grey-600', 'tw-cursor-help tw-transition-colors tw-duration-200 hover:tw-text-grey-400') }));
|
|
3264
|
-
const showDetailsBorder =
|
|
3265
|
-
!link &&
|
|
3266
|
-
!controls.some((control) => control.type === 'switch');
|
|
3321
|
+
const showDetailsBorder = !!control && !link && !(control.type === 'switch');
|
|
3267
3322
|
return (jsxRuntime.jsx("li", { className: cn('tw-h-[50px] tw-self-stretch tw-px-squid-xs', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-800'), children: jsxRuntime.jsxs(ContentTag, Object.assign({ className: cn('tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xs tw-text-grey-300', link && 'hover:tw-bg-material-light-thin') }, contentTagProps, { children: [icon, jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-self-stretch", children: [jsxRuntime.jsx(BodyText, { size: "small", children: label }), helpTooltip ? (jsxRuntime.jsx(Tooltip, Object.assign({}, helpTooltip, { children: helpIcon }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: helpIcon }))] }), jsxRuntime.jsx("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-justify-center tw-rounded-squid-xs', showDetailsBorder &&
|
|
3268
|
-
'tw-rounded-squid-xs tw-border tw-border-solid tw-border-material-light-thin tw-bg-material-dark-thin'), children: !!link ? (jsxRuntime.jsx(SquareArrowTopRight2Icon, { className: "tw-text-material-light-average" })) : (
|
|
3269
|
-
|
|
3270
|
-
const switchControl = (jsxRuntime.jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }, index));
|
|
3271
|
-
if (control.tooltip) {
|
|
3272
|
-
return jsxRuntime.jsx(Tooltip, Object.assign({}, control.tooltip, { children: switchControl }));
|
|
3273
|
-
}
|
|
3274
|
-
return switchControl;
|
|
3275
|
-
}
|
|
3276
|
-
if (control.type === 'percentage') {
|
|
3277
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SettingsButton, { label: control.resetValueControl.label, isSelected: control.resetValueControl.isSelected }), jsxRuntime.jsx(SettingsSlider, { value: control.value, type: "percentage" })] }));
|
|
3278
|
-
}
|
|
3279
|
-
if (control.type === 'amount') {
|
|
3280
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SettingsButton, { label: control.resetValueControl.label, isSelected: control.resetValueControl.isSelected }), control.options.map(({ value, isSelected }, index, _controls) => (jsxRuntime.jsx(SettingsButton, { label: '$' + value, isSelected: isSelected }, index))), jsxRuntime.jsx(SettingsSlider, { type: control.type, value: 0 })] }));
|
|
3281
|
-
}
|
|
3282
|
-
})) })] })) }));
|
|
3323
|
+
'tw-rounded-squid-xs tw-border tw-border-solid tw-border-material-light-thin tw-bg-material-dark-thin'), children: !!link ? (jsxRuntime.jsx(SquareArrowTopRight2Icon, { className: "tw-text-material-light-average" })) : (!!control && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [control.type === 'amount' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SettingsButton, { onClick: () => control.onChange(control.resetValueControl.value), label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value }), control.options.map(({ value }, index, _controls) => (jsxRuntime.jsx(SettingsButton, { label: '$' + value, isSelected: control.value === value, onClick: () => control.onChange(value) }, index))), jsxRuntime.jsx(SettingsSlider, { type: control.type, value: control.value, onChange: control.onChange, hasDecimals: false, max: 999 })] })), control.type === 'switch' &&
|
|
3324
|
+
(control.tooltip ? (jsxRuntime.jsx(Tooltip, Object.assign({}, control.tooltip, { children: jsxRuntime.jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }) }))) : (jsxRuntime.jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }))), control.type === 'percentage' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SettingsButton, { label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value, onClick: control.resetValueControl.onSelect }), jsxRuntime.jsx(SettingsSlider, { onChange: control.onChange, value: control.value, type: "percentage", hasDecimals: control.hasDecimals, max: control.max, min: control.min })] }))] }))) })] })) }));
|
|
3283
3325
|
}
|
|
3284
3326
|
|
|
3285
3327
|
function SwapDetailListItem({ label, detail, icon, isLoading = false, }) {
|
|
@@ -3378,7 +3420,10 @@ function NavigationBar({ title, displayBackButton = false, logoUrl, transparent
|
|
|
3378
3420
|
}
|
|
3379
3421
|
|
|
3380
3422
|
function ProductCard({ children }) {
|
|
3381
|
-
return (jsxRuntime.jsx("div", { className: "tw-h-card tw-min-h-card tw-w-card tw-rounded-squid-xl tw-border-[1px] tw-border-solid tw-border-material-light-thick tw-bg-material-light-thick tw-p-squid-xs tw-backdrop-blur/10 tw-backdrop-saturate-150", children: jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-
|
|
3423
|
+
return (jsxRuntime.jsx("div", { className: "tw-h-card tw-min-h-card tw-w-card tw-rounded-squid-xl tw-border-[1px] tw-border-solid tw-border-material-light-thick tw-bg-material-light-thick tw-p-squid-xs tw-backdrop-blur/10 tw-backdrop-saturate-150", children: jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-[660px] tw-w-full tw-flex-col tw-overflow-hidden tw-rounded-squid-l tw-bg-grey-900 tw-text-grey-300", children: children }) }));
|
|
3424
|
+
}
|
|
3425
|
+
function BorderedContainer({ children, className, }) {
|
|
3426
|
+
return (jsxRuntime.jsx("section", { className: cn('tw-border-t tw-border-t-material-light-thin', className), children: children }));
|
|
3382
3427
|
}
|
|
3383
3428
|
|
|
3384
3429
|
function SquidLogo() {
|
|
@@ -3415,7 +3460,7 @@ function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAm
|
|
|
3415
3460
|
const BalanceChipTag = isBalanceChipInteractive ? 'button' : 'div';
|
|
3416
3461
|
const isSwapAmountChipInteractive = !!onSwapAmountButtonClick;
|
|
3417
3462
|
const SwapAmountChipTag = isSwapAmountChipInteractive ? 'button' : 'div';
|
|
3418
|
-
return (jsxRuntime.jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxRuntime.jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600 hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : emptyAddressLabel }), jsxRuntime.jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), direction === 'from' ? (jsxRuntime.jsx(NumericInput, { forcedUpdateValue: forcedAmount, initialValue: amount, onParsedValueChanged: (value) => onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value) })) : (jsxRuntime.jsx("div", { className:
|
|
3463
|
+
return (jsxRuntime.jsxs("section", { className: "tw-relative tw-h-[205px] tw-max-h-[205px] tw-w-[480px] tw-overflow-hidden tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxRuntime.jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600 hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : emptyAddressLabel }), jsxRuntime.jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-l tw-z-10 tw-overflow-hidden", children: jsxRuntime.jsx("div", { className: "tw-animate-move-loading-cover-to-right tw-bg-dark-cover tw-h-[94px] tw-w-[1260px]" }) })), direction === 'from' ? (jsxRuntime.jsx(NumericInput, { forcedUpdateValue: forcedAmount, initialValue: amount, onParsedValueChanged: (value) => onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value) })) : (jsxRuntime.jsx("div", { className: cn('tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]', isFetching && 'tw-opacity-50'), children: jsxRuntime.jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsxRuntime.jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) ? null : (jsxRuntime.jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500', isFetching && 'tw-opacity-50'), children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsxs(SwapAmountChipTag, { onClick: onSwapAmountButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isSwapAmountChipInteractive && interactiveChipClassName), children: [jsxRuntime.jsx(SwapInputsIcon, {}), jsxRuntime.jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxRuntime.jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, {}), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxRuntime.jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isBalanceChipInteractive && interactiveChipClassName), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balance }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
|
|
3419
3464
|
}
|
|
3420
3465
|
|
|
3421
3466
|
function SwapProgressViewHeader({ title, description, }) {
|
|
@@ -3611,6 +3656,7 @@ exports.BadgeImage = BadgeImage;
|
|
|
3611
3656
|
exports.BodyText = BodyText;
|
|
3612
3657
|
exports.Boost = Boost;
|
|
3613
3658
|
exports.BoostButton = BoostButton;
|
|
3659
|
+
exports.BorderedContainer = BorderedContainer;
|
|
3614
3660
|
exports.Button = Button;
|
|
3615
3661
|
exports.CaptionText = CaptionText;
|
|
3616
3662
|
exports.Chip = Chip;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export interface SettingsButtonProps {
|
|
2
2
|
label: string;
|
|
3
3
|
isSelected?: boolean;
|
|
4
|
+
onClick?: () => void;
|
|
4
5
|
}
|
|
5
|
-
export declare function SettingsButton({ label, isSelected, }: SettingsButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare function SettingsButton({ label, isSelected, onClick, }: SettingsButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
export interface SettingsSliderProps {
|
|
2
2
|
value: number;
|
|
3
3
|
type: 'percentage' | 'amount';
|
|
4
|
-
onChange?: (value:
|
|
4
|
+
onChange?: (value: number) => void;
|
|
5
|
+
hasDecimals?: boolean;
|
|
6
|
+
min?: number;
|
|
7
|
+
max?: number;
|
|
5
8
|
}
|
|
6
|
-
export declare function SettingsSlider({ value, type, onChange }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare function SettingsSlider({ value, type, onChange, hasDecimals, max, min, }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
interface LoaderProps {
|
|
2
2
|
size?: string;
|
|
3
|
+
strokeWidth?: string;
|
|
3
4
|
}
|
|
4
|
-
export declare function Loader({ size }: LoaderProps): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export declare function Loader({ size, strokeWidth }: LoaderProps): import("react/jsx-runtime").JSX.Element;
|
|
5
6
|
export {};
|
|
@@ -1,2 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare function ProductCard({ children }: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare function BorderedContainer({ children, className, }: {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
className?: string;
|
|
6
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { DropdownMenuItemProps } from './DropdownMenuItem';
|
|
3
|
+
type HistoryItemStatus = 'completed' | 'pending' | 'failed';
|
|
3
4
|
interface HistoryItemProps {
|
|
4
5
|
firstImageUrl: string;
|
|
5
6
|
secondImageUrl: string;
|
|
6
|
-
|
|
7
|
+
status: HistoryItemStatus;
|
|
7
8
|
fromLabel: string;
|
|
8
9
|
toLabel: string;
|
|
9
|
-
pendingLabel?: string;
|
|
10
10
|
dateCompleted: string;
|
|
11
11
|
fromAmount: string;
|
|
12
12
|
toAmount: string;
|
|
13
13
|
dropdownMenuItems?: DropdownMenuItemProps[];
|
|
14
14
|
itemsContainerRef?: React.RefObject<HTMLElement>;
|
|
15
15
|
}
|
|
16
|
-
export declare function HistoryItem({ firstImageUrl, secondImageUrl,
|
|
16
|
+
export declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems, itemsContainerRef, status, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
|
|
17
17
|
export {};
|
|
@@ -4,22 +4,24 @@ export type SettingsControl = {
|
|
|
4
4
|
type: 'percentage';
|
|
5
5
|
value: number;
|
|
6
6
|
onChange: (value: number) => void;
|
|
7
|
+
min?: number;
|
|
8
|
+
max?: number;
|
|
9
|
+
hasDecimals?: boolean;
|
|
7
10
|
resetValueControl: {
|
|
8
11
|
label: string;
|
|
9
12
|
onSelect: () => void;
|
|
10
|
-
|
|
13
|
+
value: number;
|
|
11
14
|
};
|
|
12
15
|
} | {
|
|
13
16
|
type: 'amount';
|
|
17
|
+
value: number;
|
|
18
|
+
onChange: (value: number) => void;
|
|
14
19
|
options: {
|
|
15
20
|
value: number;
|
|
16
|
-
isSelected?: boolean;
|
|
17
|
-
onSelect?: () => void;
|
|
18
21
|
}[];
|
|
19
22
|
resetValueControl: {
|
|
20
23
|
label: string;
|
|
21
|
-
|
|
22
|
-
isSelected?: boolean;
|
|
24
|
+
value: number;
|
|
23
25
|
};
|
|
24
26
|
} | {
|
|
25
27
|
type: 'switch';
|
|
@@ -31,9 +33,9 @@ export type SettingsControl = {
|
|
|
31
33
|
export interface SettingsItemProps {
|
|
32
34
|
icon: React.ReactNode;
|
|
33
35
|
label: string;
|
|
34
|
-
|
|
36
|
+
control?: SettingsControl;
|
|
35
37
|
link?: string;
|
|
36
38
|
transparent?: boolean;
|
|
37
39
|
helpTooltip?: Omit<TooltipProps, 'children'>;
|
|
38
40
|
}
|
|
39
|
-
export declare function SettingsItem({ icon, label,
|
|
41
|
+
export declare function SettingsItem({ icon, label, control, link, transparent, helpTooltip, }: SettingsItemProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { BadgeImage } from '../../components/badges/BadgeImage';
|
|
3
|
+
declare const meta: Meta<typeof BadgeImage>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const ImageOnly: Story;
|
|
7
|
+
export declare const BadgeAndImage: Story;
|
|
8
|
+
export declare const ExtraMarginForBadge: Story;
|
|
9
|
+
export declare const Rounded: Story;
|
|
10
|
+
export declare const SizeMedium: Story;
|
|
11
|
+
export declare const SizeSmall: Story;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { LoadingSkeleton } from '../../components/badges/LoadingSkeleton';
|
|
3
|
+
declare const meta: Meta<typeof LoadingSkeleton>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Default: Story;
|
|
@@ -3,11 +3,11 @@ import { SwapConfiguration } from '../../components/layout/SwapConfiguration';
|
|
|
3
3
|
declare const meta: Meta<typeof SwapConfiguration>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof meta>;
|
|
6
|
-
export declare const
|
|
6
|
+
export declare const Empty: Story;
|
|
7
7
|
export declare const ChainOnly: Story;
|
|
8
8
|
export declare const ChainAndToken: Story;
|
|
9
|
-
export declare const WithAmount: Story;
|
|
10
9
|
export declare const WithSwapAmountUsd: Story;
|
|
10
|
+
export declare const Address: Story;
|
|
11
11
|
export declare const WithBalance: Story;
|
|
12
12
|
export declare const LowPriceImpact: Story;
|
|
13
13
|
export declare const HighPriceImpact: Story;
|
|
@@ -3,6 +3,7 @@ import { HistoryItem } from '../../components/lists/HistoryItem';
|
|
|
3
3
|
declare const meta: Meta<typeof HistoryItem>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof meta>;
|
|
6
|
-
export declare const
|
|
6
|
+
export declare const Completed: Story;
|
|
7
7
|
export declare const Pending: Story;
|
|
8
|
+
export declare const Failed: Story;
|
|
8
9
|
export declare const WithActions: Story;
|