@0xsquid/ui 0.6.0 → 0.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +99 -94
- package/dist/cjs/types/components/buttons/BoostButton.d.ts +3 -1
- package/dist/cjs/types/components/layout/Boost.d.ts +3 -1
- package/dist/cjs/types/components/layout/DetailsToolbar.d.ts +3 -1
- package/dist/cjs/types/stories/buttons/BoostButton.stories.d.ts +1 -0
- package/dist/cjs/types/stories/layout/DetailsToolbar.stories.d.ts +1 -0
- package/dist/esm/index.js +99 -94
- package/dist/esm/types/components/buttons/BoostButton.d.ts +3 -1
- package/dist/esm/types/components/layout/Boost.d.ts +3 -1
- package/dist/esm/types/components/layout/DetailsToolbar.d.ts +3 -1
- package/dist/esm/types/stories/buttons/BoostButton.stories.d.ts +1 -0
- package/dist/esm/types/stories/layout/DetailsToolbar.stories.d.ts +1 -0
- package/dist/index.css +4 -4
- package/dist/index.d.ts +9 -3
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -2772,7 +2772,7 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
|
|
|
2772
2772
|
}
|
|
2773
2773
|
return `linear-gradient(to right, ${chainBgColor} 43.5%, ${tokenBgColor} 56.55%)`;
|
|
2774
2774
|
}, [chainBgColor, tokenBgColor]);
|
|
2775
|
-
return (jsxRuntime.jsxs("div", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-
|
|
2775
|
+
return (jsxRuntime.jsxs("div", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center tw-text-grey-100", 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: {
|
|
2776
2776
|
backgroundImage: bgGradient,
|
|
2777
2777
|
}, 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.jsx("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-cursor-pointer tw-rounded-bl-full tw-rounded-tl-full tw-border-b tw-border-t tw-border-material-light-thin'), style: {
|
|
2778
2778
|
backgroundColor: tokenBgColor,
|
|
@@ -2782,11 +2782,94 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
|
|
|
2782
2782
|
}, children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-text-material-light-thick" })] })] }));
|
|
2783
2783
|
}
|
|
2784
2784
|
|
|
2785
|
+
function SearchIcon() {
|
|
2786
|
+
return (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
|
|
2787
|
+
}
|
|
2788
|
+
|
|
2789
|
+
function Input(_a) {
|
|
2790
|
+
var { placeholder = 'Search', showIcon = true, showPasteButton = false, className, icon } = _a, props = __rest(_a, ["placeholder", "showIcon", "showPasteButton", "className", "icon"]);
|
|
2791
|
+
return (jsxRuntime.jsxs("div", { className: "tw-relative tw-w-full tw-text-grey-600", children: [jsxRuntime.jsx("input", Object.assign({}, props, { className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-medium tw-text-grey-300 tw-outline-none tw-outline-offset-0 placeholder:tw-text-grey-600 focus:tw-outline-2 focus:tw-outline-royal-500', showIcon ? 'tw-pl-[44px]' : 'tw-px-2.5', showPasteButton ? 'tw-px-[70px]' : 'tw-pr-2.5', className), placeholder: placeholder })), showIcon ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsxRuntime.jsx(SearchIcon, {}) })) : null, showPasteButton ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsxRuntime.jsx(PasteButton, {}) })) : null] }));
|
|
2792
|
+
}
|
|
2793
|
+
const PasteButton = () => {
|
|
2794
|
+
return (jsxRuntime.jsx("button", { className: "tw-h-[30px] tw-rounded-full tw-border tw-border-grey-700 tw-bg-grey-800 tw-px-2 tw-text-grey-300", children: jsxRuntime.jsx(CaptionText, { children: "Paste" }) }));
|
|
2795
|
+
};
|
|
2796
|
+
|
|
2797
|
+
// font size, line height, and letter spacing classes
|
|
2798
|
+
const textClassMap = {
|
|
2799
|
+
small: 'tw-text-heading-small tw-tracking-heading-small tw-leading-heading-small',
|
|
2800
|
+
medium: 'tw-text-heading-medium tw-tracking-heading-medium tw-leading-heading-medium',
|
|
2801
|
+
large: 'tw-text-heading-large tw-tracking-heading-large tw-leading-heading-large',
|
|
2802
|
+
};
|
|
2803
|
+
function HeadingText({ children, bold, size }) {
|
|
2804
|
+
const fontWeightClass = bold
|
|
2805
|
+
? 'tw-font-heading-bold'
|
|
2806
|
+
: 'tw-font-heading-regular';
|
|
2807
|
+
return (jsxRuntime.jsx("h6", { className: clsx(textClassMap[size], fontWeightClass), children: children }));
|
|
2808
|
+
}
|
|
2809
|
+
|
|
2810
|
+
function SettingsSlider({ value, type }) {
|
|
2811
|
+
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-xs tw-border-royal-500 tw-p-squid-xs", children: [jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center", children: type === 'percentage' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-600", children: String(value) }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-300", children: "%" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-300", children: "$" }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-600", children: String(value) })] })) }), jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
|
|
2812
|
+
}
|
|
2813
|
+
|
|
2814
|
+
const switchSizeClassMap = {
|
|
2815
|
+
small: 'tw-w-[36px] tw-h-squid-m tw-p-0.5',
|
|
2816
|
+
large: 'tw-w-[54px] tw-h-squid-l tw-p-[3px]',
|
|
2817
|
+
};
|
|
2818
|
+
const switchCircleSizeClassMap = {
|
|
2819
|
+
small: 'tw-w-4 tw-h-4',
|
|
2820
|
+
large: 'tw-w-6 tw-h-6',
|
|
2821
|
+
};
|
|
2822
|
+
function Switch({ checked = false, onChange, size }) {
|
|
2823
|
+
return (
|
|
2824
|
+
// Switch container
|
|
2825
|
+
jsxRuntime.jsxs("label", { className: clsx('tw-relative tw-inline-flex tw-items-center tw-justify-end tw-overflow-hidden tw-rounded-squid-m tw-border tw-border-material-light-thin',
|
|
2826
|
+
// size styles
|
|
2827
|
+
switchSizeClassMap[size],
|
|
2828
|
+
// checked styles
|
|
2829
|
+
checked ? 'tw-bg-status-positive' : 'tw-bg-grey-800'), children: [jsxRuntime.jsx("input", { checked: checked, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked), type: "checkbox", className: "tw-peer tw-sr-only" }), jsxRuntime.jsx("span", { style: {
|
|
2830
|
+
filter: 'drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))',
|
|
2831
|
+
}, className: clsx('tw-absolute tw-rounded-full tw-border tw-border-material-light-thin',
|
|
2832
|
+
// size styles
|
|
2833
|
+
switchCircleSizeClassMap[size],
|
|
2834
|
+
// disabled and checked styles
|
|
2835
|
+
checked
|
|
2836
|
+
? 'tw-right-0.5 tw-bg-grey-100'
|
|
2837
|
+
: 'tw-left-0.5 tw-bg-grey-500') })] }));
|
|
2838
|
+
}
|
|
2839
|
+
|
|
2840
|
+
const borderRadiusClassMap = {
|
|
2841
|
+
sm: 'tw-rounded-squid-s',
|
|
2842
|
+
lg: 'tw-rounded-squid-m',
|
|
2843
|
+
};
|
|
2844
|
+
function Menu(_a) {
|
|
2845
|
+
var { children, containerClassName, contentClassName, title, displayControls, rounded = 'lg' } = _a, props = __rest(_a, ["children", "containerClassName", "contentClassName", "title", "displayControls", "rounded"]);
|
|
2846
|
+
return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), children: jsxRuntime.jsxs("div", { className: cn('tw-relative tw-inline-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-s tw-text-center tw-text-material-light-thick tw-backdrop-blur/20 tw-backdrop-saturate-150 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [title ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-py-squid-xxs tw-text-grey-100", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsxRuntime.jsx(CaptionText, { className: "tw-z-20 tw-self-stretch", children: children })) : (jsxRuntime.jsx("div", { className: "tw-z-20", children: children })), displayControls ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: jsxRuntime.jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, jsxRuntime.jsx("div", { className: cn('tw-absolute tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
|
|
2847
|
+
}
|
|
2848
|
+
|
|
2849
|
+
const tooltipWidthClassMap = {
|
|
2850
|
+
max: 'tw-w-max',
|
|
2851
|
+
container: 'tw-w-full',
|
|
2852
|
+
};
|
|
2853
|
+
const tooltipThresholdClassMap = {
|
|
2854
|
+
xxs: 'tw-pb-squid-xxs',
|
|
2855
|
+
xs: 'tw-pb-squid-xs',
|
|
2856
|
+
s: 'tw-pb-squid-s',
|
|
2857
|
+
m: 'tw-pb-squid-m',
|
|
2858
|
+
l: 'tw-pb-squid-l',
|
|
2859
|
+
xl: 'tw-pb-squid-xl',
|
|
2860
|
+
xxl: 'tw-pb-squid-xxl',
|
|
2861
|
+
};
|
|
2862
|
+
function Tooltip({ children, tooltipContent, tooltipWidth = 'container', threshold = 'xxs', containerClassName, childrenClassName, tooltipClassName, }) {
|
|
2863
|
+
return (jsxRuntime.jsxs("div", { className: cn('tw-relative', containerClassName), children: [jsxRuntime.jsx("div", { className: cn('tw-peer', childrenClassName), children: children }), tooltipContent ? (jsxRuntime.jsx(Menu, { containerClassName: cn('tw-absolute tw-z-40 tw-hidden hover:tw-block peer-hover:tw-block', 'tw-bottom-full tw-left-1/2 -tw-translate-x-1/2', tooltipWidthClassMap[tooltipWidth], tooltipThresholdClassMap[threshold], tooltipClassName), children: tooltipContent })) : null] }));
|
|
2864
|
+
}
|
|
2865
|
+
|
|
2785
2866
|
const animationDuration = '500ms';
|
|
2786
|
-
function BoostButton({ boostMode, onToggleBoostMode, }) {
|
|
2867
|
+
function BoostButton({ boostMode: _boostMode, onToggleBoostMode, canToggleBoostMode = true, boostDisabledMessage = 'Boost disabled', }) {
|
|
2787
2868
|
const boostIndicatorRef = react.useRef(null);
|
|
2869
|
+
// force normal mode if canToggleBoostMode is false
|
|
2870
|
+
const boostMode = canToggleBoostMode ? _boostMode : 'normal';
|
|
2788
2871
|
function handleToggleBoostMode() {
|
|
2789
|
-
if (!boostIndicatorRef.current)
|
|
2872
|
+
if (!boostIndicatorRef.current || !canToggleBoostMode)
|
|
2790
2873
|
return;
|
|
2791
2874
|
// we don't want to trigger the animation when the component is mounted
|
|
2792
2875
|
// so we set the animation duration only when user clicks the button
|
|
@@ -2800,11 +2883,11 @@ function BoostButton({ boostMode, onToggleBoostMode, }) {
|
|
|
2800
2883
|
onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
|
|
2801
2884
|
}
|
|
2802
2885
|
}
|
|
2803
|
-
return (jsxRuntime.jsxs("div", { onClick: handleToggleBoostMode, className: "tw-relative tw-flex tw-h-squid-xl tw-w-[140px] tw-flex-col tw-justify-between tw-overflow-hidden tw-bg-grey-900 tw-pb-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent" }), jsxRuntime.jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent" }), jsxRuntime.jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-flex tw-h-full tw-items-center tw-justify-between tw-transition-transform data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce", children: [jsxRuntime.jsx("div", { className: "tw-w-1/2 tw-text-center", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxRuntime.jsxs("div", { className: "tw-w-1/2 tw-text-center", children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
|
|
2804
|
-
|
|
2805
|
-
|
|
2806
|
-
|
|
2807
|
-
|
|
2886
|
+
return (jsxRuntime.jsx(Tooltip, { tooltipWidth: "max", tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxRuntime.jsxs("div", { onClick: handleToggleBoostMode, className: "tw-relative tw-flex tw-h-squid-xl tw-w-[140px] tw-flex-col tw-justify-between tw-overflow-hidden tw-bg-grey-900 tw-pb-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent" }), jsxRuntime.jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent" }), jsxRuntime.jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-flex tw-h-full tw-items-center tw-justify-between tw-transition-transform data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce", children: [jsxRuntime.jsx("div", { className: "tw-w-1/2 tw-text-center", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxRuntime.jsxs("div", { className: "tw-w-1/2 tw-text-center", children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
|
|
2887
|
+
boxShadow: generateMarkerLines(40),
|
|
2888
|
+
} })] }), jsxRuntime.jsx("div", { className: cn('tw-absolute tw-bottom-0.5 tw-left-[calc(50%-1.5px)] tw-z-20 tw-h-[10px] tw-w-[3px] tw-rounded-sm tw-transition-colors peer-data-[boost-mode=boost]:tw-bg-status-positive peer-data-[boost-mode=normal]:tw-bg-current'), style: {
|
|
2889
|
+
transitionDuration: animationDuration,
|
|
2890
|
+
} })] }) }));
|
|
2808
2891
|
}
|
|
2809
2892
|
function generateMarkerLines(count) {
|
|
2810
2893
|
const halfCount = Math.ceil(count / 2);
|
|
@@ -2859,93 +2942,12 @@ function FeeButton(_a) {
|
|
|
2859
2942
|
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 })] })] })));
|
|
2860
2943
|
}
|
|
2861
2944
|
|
|
2862
|
-
// font size, line height, and letter spacing classes
|
|
2863
|
-
const textClassMap = {
|
|
2864
|
-
small: 'tw-text-heading-small tw-tracking-heading-small tw-leading-heading-small',
|
|
2865
|
-
medium: 'tw-text-heading-medium tw-tracking-heading-medium tw-leading-heading-medium',
|
|
2866
|
-
large: 'tw-text-heading-large tw-tracking-heading-large tw-leading-heading-large',
|
|
2867
|
-
};
|
|
2868
|
-
function HeadingText({ children, bold, size }) {
|
|
2869
|
-
const fontWeightClass = bold
|
|
2870
|
-
? 'tw-font-heading-bold'
|
|
2871
|
-
: 'tw-font-heading-regular';
|
|
2872
|
-
return (jsxRuntime.jsx("h6", { className: clsx(textClassMap[size], fontWeightClass), children: children }));
|
|
2873
|
-
}
|
|
2874
|
-
|
|
2875
2945
|
function SettingsButton({ label }) {
|
|
2876
2946
|
return (jsxRuntime.jsx("button", { className: "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", children: jsxRuntime.jsx(CaptionText, { children: label }) }));
|
|
2877
2947
|
}
|
|
2878
2948
|
|
|
2879
|
-
function
|
|
2880
|
-
return (jsxRuntime.
|
|
2881
|
-
}
|
|
2882
|
-
|
|
2883
|
-
function Input(_a) {
|
|
2884
|
-
var { placeholder = 'Search', showIcon = true, showPasteButton = false, className, icon } = _a, props = __rest(_a, ["placeholder", "showIcon", "showPasteButton", "className", "icon"]);
|
|
2885
|
-
return (jsxRuntime.jsxs("div", { className: "tw-relative tw-w-full tw-text-grey-600", children: [jsxRuntime.jsx("input", Object.assign({}, props, { className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-medium tw-text-grey-300 tw-outline-none tw-outline-offset-0 placeholder:tw-text-grey-600 focus:tw-outline-2 focus:tw-outline-royal-500', showIcon ? 'tw-pl-[44px]' : 'tw-px-2.5', showPasteButton ? 'tw-px-[70px]' : 'tw-pr-2.5', className), placeholder: placeholder })), showIcon ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsxRuntime.jsx(SearchIcon, {}) })) : null, showPasteButton ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsxRuntime.jsx(PasteButton, {}) })) : null] }));
|
|
2886
|
-
}
|
|
2887
|
-
const PasteButton = () => {
|
|
2888
|
-
return (jsxRuntime.jsx("button", { className: "tw-h-[30px] tw-rounded-full tw-border tw-border-grey-700 tw-bg-grey-800 tw-px-2 tw-text-grey-300", children: jsxRuntime.jsx(CaptionText, { children: "Paste" }) }));
|
|
2889
|
-
};
|
|
2890
|
-
|
|
2891
|
-
function SettingsSlider({ value, type }) {
|
|
2892
|
-
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-xs tw-border-royal-500 tw-p-squid-xs", children: [jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center", children: type === 'percentage' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-600", children: String(value) }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-300", children: "%" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-300", children: "$" }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-600", children: String(value) })] })) }), jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
|
|
2893
|
-
}
|
|
2894
|
-
|
|
2895
|
-
const switchSizeClassMap = {
|
|
2896
|
-
small: 'tw-w-[36px] tw-h-squid-m tw-p-0.5',
|
|
2897
|
-
large: 'tw-w-[54px] tw-h-squid-l tw-p-[3px]',
|
|
2898
|
-
};
|
|
2899
|
-
const switchCircleSizeClassMap = {
|
|
2900
|
-
small: 'tw-w-4 tw-h-4',
|
|
2901
|
-
large: 'tw-w-6 tw-h-6',
|
|
2902
|
-
};
|
|
2903
|
-
function Switch({ checked = false, onChange, size }) {
|
|
2904
|
-
return (
|
|
2905
|
-
// Switch container
|
|
2906
|
-
jsxRuntime.jsxs("label", { className: clsx('tw-relative tw-inline-flex tw-items-center tw-justify-end tw-overflow-hidden tw-rounded-squid-m tw-border tw-border-material-light-thin',
|
|
2907
|
-
// size styles
|
|
2908
|
-
switchSizeClassMap[size],
|
|
2909
|
-
// checked styles
|
|
2910
|
-
checked ? 'tw-bg-status-positive' : 'tw-bg-grey-800'), children: [jsxRuntime.jsx("input", { checked: checked, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked), type: "checkbox", className: "tw-peer tw-sr-only" }), jsxRuntime.jsx("span", { style: {
|
|
2911
|
-
filter: 'drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))',
|
|
2912
|
-
}, className: clsx('tw-absolute tw-rounded-full tw-border tw-border-material-light-thin',
|
|
2913
|
-
// size styles
|
|
2914
|
-
switchCircleSizeClassMap[size],
|
|
2915
|
-
// disabled and checked styles
|
|
2916
|
-
checked
|
|
2917
|
-
? 'tw-right-0.5 tw-bg-grey-100'
|
|
2918
|
-
: 'tw-left-0.5 tw-bg-grey-500') })] }));
|
|
2919
|
-
}
|
|
2920
|
-
|
|
2921
|
-
const borderRadiusClassMap = {
|
|
2922
|
-
sm: 'tw-rounded-squid-s',
|
|
2923
|
-
lg: 'tw-rounded-squid-m',
|
|
2924
|
-
};
|
|
2925
|
-
function Menu(_a) {
|
|
2926
|
-
var { children, containerClassName, contentClassName, title, displayControls, rounded = 'lg' } = _a, props = __rest(_a, ["children", "containerClassName", "contentClassName", "title", "displayControls", "rounded"]);
|
|
2927
|
-
return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), children: jsxRuntime.jsxs("div", { className: cn('tw-relative tw-inline-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-s tw-text-center tw-text-material-light-thick tw-backdrop-blur/20 tw-backdrop-saturate-150 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [title ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-py-squid-xxs tw-text-grey-100", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsxRuntime.jsx(CaptionText, { className: "tw-z-20 tw-self-stretch", children: children })) : (jsxRuntime.jsx("div", { className: "tw-z-20", children: children })), displayControls ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: jsxRuntime.jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, jsxRuntime.jsx("div", { className: cn('tw-absolute tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
|
|
2928
|
-
}
|
|
2929
|
-
|
|
2930
|
-
const tooltipWidthClassMap = {
|
|
2931
|
-
max: 'tw-w-max',
|
|
2932
|
-
container: 'tw-w-full',
|
|
2933
|
-
};
|
|
2934
|
-
const tooltipThresholdClassMap = {
|
|
2935
|
-
xxs: 'tw-pb-squid-xxs',
|
|
2936
|
-
xs: 'tw-pb-squid-xs',
|
|
2937
|
-
s: 'tw-pb-squid-s',
|
|
2938
|
-
m: 'tw-pb-squid-m',
|
|
2939
|
-
l: 'tw-pb-squid-l',
|
|
2940
|
-
xl: 'tw-pb-squid-xl',
|
|
2941
|
-
xxl: 'tw-pb-squid-xxl',
|
|
2942
|
-
};
|
|
2943
|
-
function Tooltip({ children, tooltipContent, tooltipWidth = 'container', threshold = 'xxs', containerClassName, childrenClassName, tooltipClassName, }) {
|
|
2944
|
-
return (jsxRuntime.jsxs("div", { className: cn('tw-relative', containerClassName), children: [jsxRuntime.jsx("div", { className: cn('tw-peer', childrenClassName), children: children }), jsxRuntime.jsx(Menu, { containerClassName: cn('tw-absolute tw-z-40 tw-hidden hover:tw-block peer-hover:tw-block', 'tw-bottom-full tw-left-1/2 -tw-translate-x-1/2', tooltipWidthClassMap[tooltipWidth], tooltipThresholdClassMap[threshold], tooltipClassName), children: tooltipContent })] }));
|
|
2945
|
-
}
|
|
2946
|
-
|
|
2947
|
-
function Boost({ boostMode, onToggleBoostMode, estimatedTime, }) {
|
|
2948
|
-
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-bg-grey-900 tw-pr-squid-xxs", children: [jsxRuntime.jsx(BoostButton, { boostMode: boostMode, onToggleBoostMode: onToggleBoostMode }), jsxRuntime.jsx(Chip, { label: estimatedTime, className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' ? 'tw-bg-grey-300' : 'tw-bg-status-positive') })] }));
|
|
2949
|
+
function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, }) {
|
|
2950
|
+
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-bg-grey-900 tw-pr-squid-xxs", children: [jsxRuntime.jsx(BoostButton, { boostMode: boostMode, boostDisabledMessage: boostDisabledMessage, canToggleBoostMode: canToggleBoostMode, onToggleBoostMode: onToggleBoostMode }), jsxRuntime.jsx(Chip, { label: estimatedTime, className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' ? 'tw-bg-grey-300' : 'tw-bg-status-positive') })] }));
|
|
2949
2951
|
}
|
|
2950
2952
|
|
|
2951
2953
|
function EmojiSadIcon() {
|
|
@@ -2958,9 +2960,9 @@ const detailStateClassMap = {
|
|
|
2958
2960
|
error: 'tw-opacity-33 tw-pointer-events-none',
|
|
2959
2961
|
full: '',
|
|
2960
2962
|
};
|
|
2961
|
-
function DetailsToolbar({ state = 'full', errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, }) {
|
|
2963
|
+
function DetailsToolbar({ state = 'full', errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, }) {
|
|
2962
2964
|
const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
|
|
2963
|
-
return (jsxRuntime.jsx("aside", { className: "tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-px-squid-m tw-py-squid-xxs tw-text-grey-500", children: state === 'error' ? (jsxRuntime.jsx(ErrorMessage, { message: errorMessage })) : (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 }) })] })) }));
|
|
2965
|
+
return (jsxRuntime.jsx("aside", { className: "tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-px-squid-m tw-py-squid-xxs tw-text-grey-500", children: state === 'error' ? (jsxRuntime.jsx(ErrorMessage, { message: errorMessage })) : (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: canToggleBoostMode, boostDisabledMessage: boostDisabledMessage }) })] })) }));
|
|
2964
2966
|
}
|
|
2965
2967
|
const ErrorMessage = ({ message }) => {
|
|
2966
2968
|
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-xl tw-flex-1 tw-items-center tw-gap-squid-xxs tw-text-status-negative", children: [jsxRuntime.jsx(EmojiSadIcon, {}), jsxRuntime.jsx(CaptionText, { children: message })] }));
|
|
@@ -3131,7 +3133,10 @@ function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0',
|
|
|
3131
3133
|
const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
|
|
3132
3134
|
? 'tw-text-status-negative'
|
|
3133
3135
|
: 'tw-text-grey-300';
|
|
3134
|
-
|
|
3136
|
+
const isInteractive = direction === 'from';
|
|
3137
|
+
// improve accessibility
|
|
3138
|
+
const BalanceButtonTag = isInteractive ? 'button' : 'div';
|
|
3139
|
+
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 hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), address ? (jsxRuntime.jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" })) : null, jsxRuntime.jsx(WalletAddress, { ens: address })] }) }), 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("div", { className: "tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsxRuntime.jsx("input", { className: "tw-h-[55px] tw-w-full 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 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none", placeholder: "0", value: amount, onChange: onAmountChange }) })) : (jsxRuntime.jsx("div", { className: "tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", 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) || isFetching ? null : (jsxRuntime.jsxs("footer", { className: "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", children: [jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin'), 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(BalanceButtonTag, { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin'), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balance }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
|
|
3135
3140
|
}
|
|
3136
3141
|
|
|
3137
3142
|
function SwapProgressViewHeader({ title, description, }) {
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { BoostMode } from '../../types/components';
|
|
2
2
|
interface BoostButtonProps {
|
|
3
3
|
boostMode: BoostMode;
|
|
4
|
+
canToggleBoostMode?: boolean;
|
|
4
5
|
onToggleBoostMode?: ({ boostMode }: {
|
|
5
6
|
boostMode: BoostMode;
|
|
6
7
|
}) => void;
|
|
8
|
+
boostDisabledMessage?: string;
|
|
7
9
|
}
|
|
8
|
-
export declare function BoostButton({ boostMode, onToggleBoostMode, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare function BoostButton({ boostMode: _boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
9
11
|
export {};
|
|
@@ -5,6 +5,8 @@ interface BoostProps {
|
|
|
5
5
|
boostMode: BoostMode;
|
|
6
6
|
}) => void;
|
|
7
7
|
estimatedTime: string;
|
|
8
|
+
boostDisabledMessage?: string;
|
|
9
|
+
canToggleBoostMode?: boolean;
|
|
8
10
|
}
|
|
9
|
-
export declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, }: BoostProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, }: BoostProps): import("react/jsx-runtime").JSX.Element;
|
|
10
12
|
export {};
|
|
@@ -10,6 +10,8 @@ interface DetailsToolbarProps {
|
|
|
10
10
|
onFeeButtonClick?: () => void;
|
|
11
11
|
feeInUsd?: string;
|
|
12
12
|
estimatedTime?: string;
|
|
13
|
+
canToggleBoostMode?: boolean;
|
|
14
|
+
boostDisabledMessage?: string;
|
|
13
15
|
}
|
|
14
|
-
export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
|
|
15
17
|
export {};
|
package/dist/esm/index.js
CHANGED
|
@@ -2770,7 +2770,7 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
|
|
|
2770
2770
|
}
|
|
2771
2771
|
return `linear-gradient(to right, ${chainBgColor} 43.5%, ${tokenBgColor} 56.55%)`;
|
|
2772
2772
|
}, [chainBgColor, tokenBgColor]);
|
|
2773
|
-
return (jsxs("div", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-
|
|
2773
|
+
return (jsxs("div", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center tw-text-grey-100", children: [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: 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" }) }), 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: {
|
|
2774
2774
|
backgroundImage: bgGradient,
|
|
2775
2775
|
}, children: jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsx("img", { src: chainImageUrl, alt: "", className: "tw-rounded-full" })) : (jsx(Fragment, { children: jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsx("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-cursor-pointer tw-rounded-bl-full tw-rounded-tl-full tw-border-b tw-border-t tw-border-material-light-thin'), style: {
|
|
2776
2776
|
backgroundColor: tokenBgColor,
|
|
@@ -2780,11 +2780,94 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
|
|
|
2780
2780
|
}, children: [jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsx(ChevronLargeRightIcon, { className: "tw-text-material-light-thick" })] })] }));
|
|
2781
2781
|
}
|
|
2782
2782
|
|
|
2783
|
+
function SearchIcon() {
|
|
2784
|
+
return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
|
|
2785
|
+
}
|
|
2786
|
+
|
|
2787
|
+
function Input(_a) {
|
|
2788
|
+
var { placeholder = 'Search', showIcon = true, showPasteButton = false, className, icon } = _a, props = __rest(_a, ["placeholder", "showIcon", "showPasteButton", "className", "icon"]);
|
|
2789
|
+
return (jsxs("div", { className: "tw-relative tw-w-full tw-text-grey-600", children: [jsx("input", Object.assign({}, props, { className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-medium tw-text-grey-300 tw-outline-none tw-outline-offset-0 placeholder:tw-text-grey-600 focus:tw-outline-2 focus:tw-outline-royal-500', showIcon ? 'tw-pl-[44px]' : 'tw-px-2.5', showPasteButton ? 'tw-px-[70px]' : 'tw-pr-2.5', className), placeholder: placeholder })), showIcon ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsx(SearchIcon, {}) })) : null, showPasteButton ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsx(PasteButton, {}) })) : null] }));
|
|
2790
|
+
}
|
|
2791
|
+
const PasteButton = () => {
|
|
2792
|
+
return (jsx("button", { className: "tw-h-[30px] tw-rounded-full tw-border tw-border-grey-700 tw-bg-grey-800 tw-px-2 tw-text-grey-300", children: jsx(CaptionText, { children: "Paste" }) }));
|
|
2793
|
+
};
|
|
2794
|
+
|
|
2795
|
+
// font size, line height, and letter spacing classes
|
|
2796
|
+
const textClassMap = {
|
|
2797
|
+
small: 'tw-text-heading-small tw-tracking-heading-small tw-leading-heading-small',
|
|
2798
|
+
medium: 'tw-text-heading-medium tw-tracking-heading-medium tw-leading-heading-medium',
|
|
2799
|
+
large: 'tw-text-heading-large tw-tracking-heading-large tw-leading-heading-large',
|
|
2800
|
+
};
|
|
2801
|
+
function HeadingText({ children, bold, size }) {
|
|
2802
|
+
const fontWeightClass = bold
|
|
2803
|
+
? 'tw-font-heading-bold'
|
|
2804
|
+
: 'tw-font-heading-regular';
|
|
2805
|
+
return (jsx("h6", { className: clsx(textClassMap[size], fontWeightClass), children: children }));
|
|
2806
|
+
}
|
|
2807
|
+
|
|
2808
|
+
function SettingsSlider({ value, type }) {
|
|
2809
|
+
return (jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-xs tw-border-royal-500 tw-p-squid-xs", children: [jsx("span", { className: "tw-flex tw-items-center tw-justify-center", children: type === 'percentage' ? (jsxs(Fragment, { children: [jsx(CaptionText, { className: "tw-text-grey-600", children: String(value) }), jsx(CaptionText, { className: "tw-text-grey-300", children: "%" })] })) : (jsxs(Fragment, { children: [jsx(CaptionText, { className: "tw-text-grey-300", children: "$" }), jsx(CaptionText, { className: "tw-text-grey-600", children: String(value) })] })) }), jsx(Chip, { icon: jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
|
|
2810
|
+
}
|
|
2811
|
+
|
|
2812
|
+
const switchSizeClassMap = {
|
|
2813
|
+
small: 'tw-w-[36px] tw-h-squid-m tw-p-0.5',
|
|
2814
|
+
large: 'tw-w-[54px] tw-h-squid-l tw-p-[3px]',
|
|
2815
|
+
};
|
|
2816
|
+
const switchCircleSizeClassMap = {
|
|
2817
|
+
small: 'tw-w-4 tw-h-4',
|
|
2818
|
+
large: 'tw-w-6 tw-h-6',
|
|
2819
|
+
};
|
|
2820
|
+
function Switch({ checked = false, onChange, size }) {
|
|
2821
|
+
return (
|
|
2822
|
+
// Switch container
|
|
2823
|
+
jsxs("label", { className: clsx('tw-relative tw-inline-flex tw-items-center tw-justify-end tw-overflow-hidden tw-rounded-squid-m tw-border tw-border-material-light-thin',
|
|
2824
|
+
// size styles
|
|
2825
|
+
switchSizeClassMap[size],
|
|
2826
|
+
// checked styles
|
|
2827
|
+
checked ? 'tw-bg-status-positive' : 'tw-bg-grey-800'), children: [jsx("input", { checked: checked, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked), type: "checkbox", className: "tw-peer tw-sr-only" }), jsx("span", { style: {
|
|
2828
|
+
filter: 'drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))',
|
|
2829
|
+
}, className: clsx('tw-absolute tw-rounded-full tw-border tw-border-material-light-thin',
|
|
2830
|
+
// size styles
|
|
2831
|
+
switchCircleSizeClassMap[size],
|
|
2832
|
+
// disabled and checked styles
|
|
2833
|
+
checked
|
|
2834
|
+
? 'tw-right-0.5 tw-bg-grey-100'
|
|
2835
|
+
: 'tw-left-0.5 tw-bg-grey-500') })] }));
|
|
2836
|
+
}
|
|
2837
|
+
|
|
2838
|
+
const borderRadiusClassMap = {
|
|
2839
|
+
sm: 'tw-rounded-squid-s',
|
|
2840
|
+
lg: 'tw-rounded-squid-m',
|
|
2841
|
+
};
|
|
2842
|
+
function Menu(_a) {
|
|
2843
|
+
var { children, containerClassName, contentClassName, title, displayControls, rounded = 'lg' } = _a, props = __rest(_a, ["children", "containerClassName", "contentClassName", "title", "displayControls", "rounded"]);
|
|
2844
|
+
return (jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), children: jsxs("div", { className: cn('tw-relative tw-inline-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-s tw-text-center tw-text-material-light-thick tw-backdrop-blur/20 tw-backdrop-saturate-150 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [title ? (jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-py-squid-xxs tw-text-grey-100", children: jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsx(CaptionText, { className: "tw-z-20 tw-self-stretch", children: children })) : (jsx("div", { className: "tw-z-20", children: children })), displayControls ? (jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, jsx("div", { className: cn('tw-absolute tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
|
|
2845
|
+
}
|
|
2846
|
+
|
|
2847
|
+
const tooltipWidthClassMap = {
|
|
2848
|
+
max: 'tw-w-max',
|
|
2849
|
+
container: 'tw-w-full',
|
|
2850
|
+
};
|
|
2851
|
+
const tooltipThresholdClassMap = {
|
|
2852
|
+
xxs: 'tw-pb-squid-xxs',
|
|
2853
|
+
xs: 'tw-pb-squid-xs',
|
|
2854
|
+
s: 'tw-pb-squid-s',
|
|
2855
|
+
m: 'tw-pb-squid-m',
|
|
2856
|
+
l: 'tw-pb-squid-l',
|
|
2857
|
+
xl: 'tw-pb-squid-xl',
|
|
2858
|
+
xxl: 'tw-pb-squid-xxl',
|
|
2859
|
+
};
|
|
2860
|
+
function Tooltip({ children, tooltipContent, tooltipWidth = 'container', threshold = 'xxs', containerClassName, childrenClassName, tooltipClassName, }) {
|
|
2861
|
+
return (jsxs("div", { className: cn('tw-relative', containerClassName), children: [jsx("div", { className: cn('tw-peer', childrenClassName), children: children }), tooltipContent ? (jsx(Menu, { containerClassName: cn('tw-absolute tw-z-40 tw-hidden hover:tw-block peer-hover:tw-block', 'tw-bottom-full tw-left-1/2 -tw-translate-x-1/2', tooltipWidthClassMap[tooltipWidth], tooltipThresholdClassMap[threshold], tooltipClassName), children: tooltipContent })) : null] }));
|
|
2862
|
+
}
|
|
2863
|
+
|
|
2783
2864
|
const animationDuration = '500ms';
|
|
2784
|
-
function BoostButton({ boostMode, onToggleBoostMode, }) {
|
|
2865
|
+
function BoostButton({ boostMode: _boostMode, onToggleBoostMode, canToggleBoostMode = true, boostDisabledMessage = 'Boost disabled', }) {
|
|
2785
2866
|
const boostIndicatorRef = useRef(null);
|
|
2867
|
+
// force normal mode if canToggleBoostMode is false
|
|
2868
|
+
const boostMode = canToggleBoostMode ? _boostMode : 'normal';
|
|
2786
2869
|
function handleToggleBoostMode() {
|
|
2787
|
-
if (!boostIndicatorRef.current)
|
|
2870
|
+
if (!boostIndicatorRef.current || !canToggleBoostMode)
|
|
2788
2871
|
return;
|
|
2789
2872
|
// we don't want to trigger the animation when the component is mounted
|
|
2790
2873
|
// so we set the animation duration only when user clicks the button
|
|
@@ -2798,11 +2881,11 @@ function BoostButton({ boostMode, onToggleBoostMode, }) {
|
|
|
2798
2881
|
onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
|
|
2799
2882
|
}
|
|
2800
2883
|
}
|
|
2801
|
-
return (jsxs("div", { onClick: handleToggleBoostMode, className: "tw-relative tw-flex tw-h-squid-xl tw-w-[140px] tw-flex-col tw-justify-between tw-overflow-hidden tw-bg-grey-900 tw-pb-squid-xxs tw-text-grey-300", children: [jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent" }), jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent" }), jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-flex tw-h-full tw-items-center tw-justify-between tw-transition-transform data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce", children: [jsx("div", { className: "tw-w-1/2 tw-text-center", children: jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxs("div", { className: "tw-w-1/2 tw-text-center", children: [jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
|
|
2802
|
-
|
|
2803
|
-
|
|
2804
|
-
|
|
2805
|
-
|
|
2884
|
+
return (jsx(Tooltip, { tooltipWidth: "max", tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxs("div", { onClick: handleToggleBoostMode, className: "tw-relative tw-flex tw-h-squid-xl tw-w-[140px] tw-flex-col tw-justify-between tw-overflow-hidden tw-bg-grey-900 tw-pb-squid-xxs tw-text-grey-300", children: [jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent" }), jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent" }), jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-flex tw-h-full tw-items-center tw-justify-between tw-transition-transform data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce", children: [jsx("div", { className: "tw-w-1/2 tw-text-center", children: jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxs("div", { className: "tw-w-1/2 tw-text-center", children: [jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
|
|
2885
|
+
boxShadow: generateMarkerLines(40),
|
|
2886
|
+
} })] }), jsx("div", { className: cn('tw-absolute tw-bottom-0.5 tw-left-[calc(50%-1.5px)] tw-z-20 tw-h-[10px] tw-w-[3px] tw-rounded-sm tw-transition-colors peer-data-[boost-mode=boost]:tw-bg-status-positive peer-data-[boost-mode=normal]:tw-bg-current'), style: {
|
|
2887
|
+
transitionDuration: animationDuration,
|
|
2888
|
+
} })] }) }));
|
|
2806
2889
|
}
|
|
2807
2890
|
function generateMarkerLines(count) {
|
|
2808
2891
|
const halfCount = Math.ceil(count / 2);
|
|
@@ -2857,93 +2940,12 @@ function FeeButton(_a) {
|
|
|
2857
2940
|
return (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: [jsx(Chip, { label: chipLabel }), jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(Chip, { icon: jsx(EthereumIcon, {}) }), jsx(UsdAmount, { usdAmount: feeInUsd })] })] })));
|
|
2858
2941
|
}
|
|
2859
2942
|
|
|
2860
|
-
// font size, line height, and letter spacing classes
|
|
2861
|
-
const textClassMap = {
|
|
2862
|
-
small: 'tw-text-heading-small tw-tracking-heading-small tw-leading-heading-small',
|
|
2863
|
-
medium: 'tw-text-heading-medium tw-tracking-heading-medium tw-leading-heading-medium',
|
|
2864
|
-
large: 'tw-text-heading-large tw-tracking-heading-large tw-leading-heading-large',
|
|
2865
|
-
};
|
|
2866
|
-
function HeadingText({ children, bold, size }) {
|
|
2867
|
-
const fontWeightClass = bold
|
|
2868
|
-
? 'tw-font-heading-bold'
|
|
2869
|
-
: 'tw-font-heading-regular';
|
|
2870
|
-
return (jsx("h6", { className: clsx(textClassMap[size], fontWeightClass), children: children }));
|
|
2871
|
-
}
|
|
2872
|
-
|
|
2873
2943
|
function SettingsButton({ label }) {
|
|
2874
2944
|
return (jsx("button", { className: "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", children: jsx(CaptionText, { children: label }) }));
|
|
2875
2945
|
}
|
|
2876
2946
|
|
|
2877
|
-
function
|
|
2878
|
-
return (
|
|
2879
|
-
}
|
|
2880
|
-
|
|
2881
|
-
function Input(_a) {
|
|
2882
|
-
var { placeholder = 'Search', showIcon = true, showPasteButton = false, className, icon } = _a, props = __rest(_a, ["placeholder", "showIcon", "showPasteButton", "className", "icon"]);
|
|
2883
|
-
return (jsxs("div", { className: "tw-relative tw-w-full tw-text-grey-600", children: [jsx("input", Object.assign({}, props, { className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-medium tw-text-grey-300 tw-outline-none tw-outline-offset-0 placeholder:tw-text-grey-600 focus:tw-outline-2 focus:tw-outline-royal-500', showIcon ? 'tw-pl-[44px]' : 'tw-px-2.5', showPasteButton ? 'tw-px-[70px]' : 'tw-pr-2.5', className), placeholder: placeholder })), showIcon ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsx(SearchIcon, {}) })) : null, showPasteButton ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsx(PasteButton, {}) })) : null] }));
|
|
2884
|
-
}
|
|
2885
|
-
const PasteButton = () => {
|
|
2886
|
-
return (jsx("button", { className: "tw-h-[30px] tw-rounded-full tw-border tw-border-grey-700 tw-bg-grey-800 tw-px-2 tw-text-grey-300", children: jsx(CaptionText, { children: "Paste" }) }));
|
|
2887
|
-
};
|
|
2888
|
-
|
|
2889
|
-
function SettingsSlider({ value, type }) {
|
|
2890
|
-
return (jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-xs tw-border-royal-500 tw-p-squid-xs", children: [jsx("span", { className: "tw-flex tw-items-center tw-justify-center", children: type === 'percentage' ? (jsxs(Fragment, { children: [jsx(CaptionText, { className: "tw-text-grey-600", children: String(value) }), jsx(CaptionText, { className: "tw-text-grey-300", children: "%" })] })) : (jsxs(Fragment, { children: [jsx(CaptionText, { className: "tw-text-grey-300", children: "$" }), jsx(CaptionText, { className: "tw-text-grey-600", children: String(value) })] })) }), jsx(Chip, { icon: jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
|
|
2891
|
-
}
|
|
2892
|
-
|
|
2893
|
-
const switchSizeClassMap = {
|
|
2894
|
-
small: 'tw-w-[36px] tw-h-squid-m tw-p-0.5',
|
|
2895
|
-
large: 'tw-w-[54px] tw-h-squid-l tw-p-[3px]',
|
|
2896
|
-
};
|
|
2897
|
-
const switchCircleSizeClassMap = {
|
|
2898
|
-
small: 'tw-w-4 tw-h-4',
|
|
2899
|
-
large: 'tw-w-6 tw-h-6',
|
|
2900
|
-
};
|
|
2901
|
-
function Switch({ checked = false, onChange, size }) {
|
|
2902
|
-
return (
|
|
2903
|
-
// Switch container
|
|
2904
|
-
jsxs("label", { className: clsx('tw-relative tw-inline-flex tw-items-center tw-justify-end tw-overflow-hidden tw-rounded-squid-m tw-border tw-border-material-light-thin',
|
|
2905
|
-
// size styles
|
|
2906
|
-
switchSizeClassMap[size],
|
|
2907
|
-
// checked styles
|
|
2908
|
-
checked ? 'tw-bg-status-positive' : 'tw-bg-grey-800'), children: [jsx("input", { checked: checked, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked), type: "checkbox", className: "tw-peer tw-sr-only" }), jsx("span", { style: {
|
|
2909
|
-
filter: 'drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))',
|
|
2910
|
-
}, className: clsx('tw-absolute tw-rounded-full tw-border tw-border-material-light-thin',
|
|
2911
|
-
// size styles
|
|
2912
|
-
switchCircleSizeClassMap[size],
|
|
2913
|
-
// disabled and checked styles
|
|
2914
|
-
checked
|
|
2915
|
-
? 'tw-right-0.5 tw-bg-grey-100'
|
|
2916
|
-
: 'tw-left-0.5 tw-bg-grey-500') })] }));
|
|
2917
|
-
}
|
|
2918
|
-
|
|
2919
|
-
const borderRadiusClassMap = {
|
|
2920
|
-
sm: 'tw-rounded-squid-s',
|
|
2921
|
-
lg: 'tw-rounded-squid-m',
|
|
2922
|
-
};
|
|
2923
|
-
function Menu(_a) {
|
|
2924
|
-
var { children, containerClassName, contentClassName, title, displayControls, rounded = 'lg' } = _a, props = __rest(_a, ["children", "containerClassName", "contentClassName", "title", "displayControls", "rounded"]);
|
|
2925
|
-
return (jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), children: jsxs("div", { className: cn('tw-relative tw-inline-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-s tw-text-center tw-text-material-light-thick tw-backdrop-blur/20 tw-backdrop-saturate-150 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [title ? (jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-py-squid-xxs tw-text-grey-100", children: jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsx(CaptionText, { className: "tw-z-20 tw-self-stretch", children: children })) : (jsx("div", { className: "tw-z-20", children: children })), displayControls ? (jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, jsx("div", { className: cn('tw-absolute tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
|
|
2926
|
-
}
|
|
2927
|
-
|
|
2928
|
-
const tooltipWidthClassMap = {
|
|
2929
|
-
max: 'tw-w-max',
|
|
2930
|
-
container: 'tw-w-full',
|
|
2931
|
-
};
|
|
2932
|
-
const tooltipThresholdClassMap = {
|
|
2933
|
-
xxs: 'tw-pb-squid-xxs',
|
|
2934
|
-
xs: 'tw-pb-squid-xs',
|
|
2935
|
-
s: 'tw-pb-squid-s',
|
|
2936
|
-
m: 'tw-pb-squid-m',
|
|
2937
|
-
l: 'tw-pb-squid-l',
|
|
2938
|
-
xl: 'tw-pb-squid-xl',
|
|
2939
|
-
xxl: 'tw-pb-squid-xxl',
|
|
2940
|
-
};
|
|
2941
|
-
function Tooltip({ children, tooltipContent, tooltipWidth = 'container', threshold = 'xxs', containerClassName, childrenClassName, tooltipClassName, }) {
|
|
2942
|
-
return (jsxs("div", { className: cn('tw-relative', containerClassName), children: [jsx("div", { className: cn('tw-peer', childrenClassName), children: children }), jsx(Menu, { containerClassName: cn('tw-absolute tw-z-40 tw-hidden hover:tw-block peer-hover:tw-block', 'tw-bottom-full tw-left-1/2 -tw-translate-x-1/2', tooltipWidthClassMap[tooltipWidth], tooltipThresholdClassMap[threshold], tooltipClassName), children: tooltipContent })] }));
|
|
2943
|
-
}
|
|
2944
|
-
|
|
2945
|
-
function Boost({ boostMode, onToggleBoostMode, estimatedTime, }) {
|
|
2946
|
-
return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-bg-grey-900 tw-pr-squid-xxs", children: [jsx(BoostButton, { boostMode: boostMode, onToggleBoostMode: onToggleBoostMode }), jsx(Chip, { label: estimatedTime, className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' ? 'tw-bg-grey-300' : 'tw-bg-status-positive') })] }));
|
|
2947
|
+
function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, }) {
|
|
2948
|
+
return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-bg-grey-900 tw-pr-squid-xxs", children: [jsx(BoostButton, { boostMode: boostMode, boostDisabledMessage: boostDisabledMessage, canToggleBoostMode: canToggleBoostMode, onToggleBoostMode: onToggleBoostMode }), jsx(Chip, { label: estimatedTime, className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' ? 'tw-bg-grey-300' : 'tw-bg-status-positive') })] }));
|
|
2947
2949
|
}
|
|
2948
2950
|
|
|
2949
2951
|
function EmojiSadIcon() {
|
|
@@ -2956,9 +2958,9 @@ const detailStateClassMap = {
|
|
|
2956
2958
|
error: 'tw-opacity-33 tw-pointer-events-none',
|
|
2957
2959
|
full: '',
|
|
2958
2960
|
};
|
|
2959
|
-
function DetailsToolbar({ state = 'full', errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, }) {
|
|
2961
|
+
function DetailsToolbar({ state = 'full', errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, }) {
|
|
2960
2962
|
const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
|
|
2961
|
-
return (jsx("aside", { className: "tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-px-squid-m tw-py-squid-xxs tw-text-grey-500", children: state === 'error' ? (jsx(ErrorMessage, { message: errorMessage })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsx(Loader, { size: "32" })) : (jsx(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsx(ChevronLargeDownIcon, {}) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode }) })] })) }));
|
|
2963
|
+
return (jsx("aside", { className: "tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-px-squid-m tw-py-squid-xxs tw-text-grey-500", children: state === 'error' ? (jsx(ErrorMessage, { message: errorMessage })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsx(Loader, { size: "32" })) : (jsx(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsx(ChevronLargeDownIcon, {}) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: canToggleBoostMode, boostDisabledMessage: boostDisabledMessage }) })] })) }));
|
|
2962
2964
|
}
|
|
2963
2965
|
const ErrorMessage = ({ message }) => {
|
|
2964
2966
|
return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-flex-1 tw-items-center tw-gap-squid-xxs tw-text-status-negative", children: [jsx(EmojiSadIcon, {}), jsx(CaptionText, { children: message })] }));
|
|
@@ -3129,7 +3131,10 @@ function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0',
|
|
|
3129
3131
|
const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
|
|
3130
3132
|
? 'tw-text-status-negative'
|
|
3131
3133
|
: 'tw-text-grey-300';
|
|
3132
|
-
|
|
3134
|
+
const isInteractive = direction === 'from';
|
|
3135
|
+
// improve accessibility
|
|
3136
|
+
const BalanceButtonTag = isInteractive ? 'button' : 'div';
|
|
3137
|
+
return (jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [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: 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 hover:tw-bg-material-light-thin", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), address ? (jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" })) : null, jsx(WalletAddress, { ens: address })] }) }), jsx("div", { className: "tw-px-squid-l", children: 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' ? (jsx("div", { className: "tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsx("input", { className: "tw-h-[55px] tw-w-full 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 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none", placeholder: "0", value: amount, onChange: onAmountChange }) })) : (jsx("div", { className: "tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: 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: jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxs("footer", { className: "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", children: [jsxs("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin'), children: [jsx(SwapInputsIcon, {}), jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] }), jsxs(BalanceButtonTag, { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin'), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
|
|
3133
3138
|
}
|
|
3134
3139
|
|
|
3135
3140
|
function SwapProgressViewHeader({ title, description, }) {
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { BoostMode } from '../../types/components';
|
|
2
2
|
interface BoostButtonProps {
|
|
3
3
|
boostMode: BoostMode;
|
|
4
|
+
canToggleBoostMode?: boolean;
|
|
4
5
|
onToggleBoostMode?: ({ boostMode }: {
|
|
5
6
|
boostMode: BoostMode;
|
|
6
7
|
}) => void;
|
|
8
|
+
boostDisabledMessage?: string;
|
|
7
9
|
}
|
|
8
|
-
export declare function BoostButton({ boostMode, onToggleBoostMode, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare function BoostButton({ boostMode: _boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
9
11
|
export {};
|
|
@@ -5,6 +5,8 @@ interface BoostProps {
|
|
|
5
5
|
boostMode: BoostMode;
|
|
6
6
|
}) => void;
|
|
7
7
|
estimatedTime: string;
|
|
8
|
+
boostDisabledMessage?: string;
|
|
9
|
+
canToggleBoostMode?: boolean;
|
|
8
10
|
}
|
|
9
|
-
export declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, }: BoostProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, }: BoostProps): import("react/jsx-runtime").JSX.Element;
|
|
10
12
|
export {};
|
|
@@ -10,6 +10,8 @@ interface DetailsToolbarProps {
|
|
|
10
10
|
onFeeButtonClick?: () => void;
|
|
11
11
|
feeInUsd?: string;
|
|
12
12
|
estimatedTime?: string;
|
|
13
|
+
canToggleBoostMode?: boolean;
|
|
14
|
+
boostDisabledMessage?: string;
|
|
13
15
|
}
|
|
14
|
-
export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
|
|
15
17
|
export {};
|
package/dist/index.css
CHANGED
|
@@ -1155,6 +1155,10 @@ video {
|
|
|
1155
1155
|
width: 90px;
|
|
1156
1156
|
}
|
|
1157
1157
|
|
|
1158
|
+
.tw-w-\[92px\] {
|
|
1159
|
+
width: 92px;
|
|
1160
|
+
}
|
|
1161
|
+
|
|
1158
1162
|
.tw-w-\[94px\] {
|
|
1159
1163
|
width: 94px;
|
|
1160
1164
|
}
|
|
@@ -1201,10 +1205,6 @@ video {
|
|
|
1201
1205
|
min-width: 24rem;
|
|
1202
1206
|
}
|
|
1203
1207
|
|
|
1204
|
-
.tw-min-w-\[209px\] {
|
|
1205
|
-
min-width: 209px;
|
|
1206
|
-
}
|
|
1207
|
-
|
|
1208
1208
|
.tw-min-w-\[30px\] {
|
|
1209
1209
|
min-width: 30px;
|
|
1210
1210
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -62,11 +62,13 @@ type ThemeType = 'light' | 'dark';
|
|
|
62
62
|
|
|
63
63
|
interface BoostButtonProps {
|
|
64
64
|
boostMode: BoostMode;
|
|
65
|
+
canToggleBoostMode?: boolean;
|
|
65
66
|
onToggleBoostMode?: ({ boostMode }: {
|
|
66
67
|
boostMode: BoostMode;
|
|
67
68
|
}) => void;
|
|
69
|
+
boostDisabledMessage?: string;
|
|
68
70
|
}
|
|
69
|
-
declare function BoostButton({ boostMode, onToggleBoostMode, }: BoostButtonProps): react_jsx_runtime.JSX.Element;
|
|
71
|
+
declare function BoostButton({ boostMode: _boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, }: BoostButtonProps): react_jsx_runtime.JSX.Element;
|
|
70
72
|
|
|
71
73
|
interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
72
74
|
label?: string;
|
|
@@ -134,8 +136,10 @@ interface BoostProps {
|
|
|
134
136
|
boostMode: BoostMode;
|
|
135
137
|
}) => void;
|
|
136
138
|
estimatedTime: string;
|
|
139
|
+
boostDisabledMessage?: string;
|
|
140
|
+
canToggleBoostMode?: boolean;
|
|
137
141
|
}
|
|
138
|
-
declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, }: BoostProps): react_jsx_runtime.JSX.Element;
|
|
142
|
+
declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, }: BoostProps): react_jsx_runtime.JSX.Element;
|
|
139
143
|
|
|
140
144
|
interface DetailsToolbarProps {
|
|
141
145
|
state?: DetailsToolbarState;
|
|
@@ -148,8 +152,10 @@ interface DetailsToolbarProps {
|
|
|
148
152
|
onFeeButtonClick?: () => void;
|
|
149
153
|
feeInUsd?: string;
|
|
150
154
|
estimatedTime?: string;
|
|
155
|
+
canToggleBoostMode?: boolean;
|
|
156
|
+
boostDisabledMessage?: string;
|
|
151
157
|
}
|
|
152
|
-
declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
|
|
158
|
+
declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
|
|
153
159
|
|
|
154
160
|
interface DropdownMenuItemProps {
|
|
155
161
|
label: string;
|