@0xsquid/ui 0.4.2 → 0.4.3
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 +25 -21
- package/dist/cjs/types/components/icons/Arrow.d.ts +4 -1
- package/dist/cjs/types/components/layout/DetailsToolbar.d.ts +2 -1
- package/dist/cjs/types/components/layout/NavigationBar.d.ts +2 -1
- package/dist/esm/index.js +25 -21
- package/dist/esm/types/components/icons/Arrow.d.ts +4 -1
- package/dist/esm/types/components/layout/DetailsToolbar.d.ts +2 -1
- package/dist/esm/types/components/layout/NavigationBar.d.ts +2 -1
- package/dist/index.css +55 -20
- package/dist/index.d.ts +4 -2
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -2628,8 +2628,8 @@ function ArrowTriangle() {
|
|
|
2628
2628
|
function ChevronLargeDownIcon({ size = '24' }) {
|
|
2629
2629
|
return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M3 10.5L11.0287 14.9604C11.6328 15.296 12.3672 15.296 12.9713 14.9604L21 10.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
2630
2630
|
}
|
|
2631
|
-
function ChevronLargeRightIcon() {
|
|
2632
|
-
return (jsxRuntime.jsx("svg", { width:
|
|
2631
|
+
function ChevronLargeRightIcon({ size = '16', className, }) {
|
|
2632
|
+
return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M6.66675 14L9.64035 8.64754C9.86407 8.24484 9.86407 7.75519 9.64035 7.35249L6.66675 2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
2633
2633
|
}
|
|
2634
2634
|
function ChevronRightSmallIcon() {
|
|
2635
2635
|
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: jsxRuntime.jsx("path", { d: "M6.66675 10.6667L8.86201 8.47141C9.12236 8.21106 9.12236 7.78896 8.86201 7.52861L6.66675 5.33334", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
@@ -2770,16 +2770,16 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
|
|
|
2770
2770
|
if (!tokenImageUrl) {
|
|
2771
2771
|
return `linear-gradient(90deg, ${chainBgColor} 54.86%, ${tokenBgColor} 95.83%)`;
|
|
2772
2772
|
}
|
|
2773
|
-
return `linear-gradient(to right, ${chainBgColor}
|
|
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-min-w-[209px] 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-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-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
|
|
2775
|
+
return (jsxRuntime.jsxs("div", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-min-w-[209px] 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-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: "" })) : (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-rounded-bl-full tw-rounded-tl-full tw-border-b tw-border-t tw-border-material-light-thin'), style: {
|
|
2778
2778
|
backgroundColor: tokenBgColor,
|
|
2779
|
-
}, children: jsxRuntime.jsx("img", { src: tokenImageUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl -tw-translate-x-[2px]" }) })) : null, jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl 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: {
|
|
2779
|
+
}, children: jsxRuntime.jsx("img", { src: tokenImageUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl -tw-translate-x-[2px]" }) })) : 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: {
|
|
2780
2780
|
backgroundColor: tokenBgColor,
|
|
2781
2781
|
color: tokenTextColor,
|
|
2782
|
-
}, children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsxRuntime.jsx(ChevronLargeRightIcon, {})] })] }));
|
|
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
2785
|
const animationDuration = '500ms';
|
|
@@ -2923,7 +2923,7 @@ const borderRadiusClassMap = {
|
|
|
2923
2923
|
};
|
|
2924
2924
|
function Menu(_a) {
|
|
2925
2925
|
var { children, containerClassName, contentClassName, title, displayControls, rounded = 'lg' } = _a, props = __rest(_a, ["children", "containerClassName", "contentClassName", "title", "displayControls", "rounded"]);
|
|
2926
|
-
return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), children: jsxRuntime.jsxs("div", { className: cn('tw-
|
|
2926
|
+
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]) })] }) })));
|
|
2927
2927
|
}
|
|
2928
2928
|
|
|
2929
2929
|
const tooltipWidthClassMap = {
|
|
@@ -2957,9 +2957,9 @@ const detailStateClassMap = {
|
|
|
2957
2957
|
error: 'tw-opacity-33 tw-pointer-events-none',
|
|
2958
2958
|
full: '',
|
|
2959
2959
|
};
|
|
2960
|
-
function DetailsToolbar({ state = 'full', errorMessage, boostMode = 'normal', onToggleBoostMode, }) {
|
|
2960
|
+
function DetailsToolbar({ state = 'full', errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, }) {
|
|
2961
2961
|
const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
|
|
2962
|
-
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, {}) }), 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", 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, { boostMode: boostMode, onToggleBoostMode: onToggleBoostMode }) })] })) }));
|
|
2962
|
+
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, {}) }), 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, { boostMode: boostMode, onToggleBoostMode: onToggleBoostMode }) })] })) }));
|
|
2963
2963
|
}
|
|
2964
2964
|
const ErrorMessage = ({ message }) => {
|
|
2965
2965
|
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 })] }));
|
|
@@ -2968,19 +2968,19 @@ const ErrorMessage = ({ message }) => {
|
|
|
2968
2968
|
function Modal({ children }) {
|
|
2969
2969
|
return (
|
|
2970
2970
|
// modal container
|
|
2971
|
-
jsxRuntime.jsx("div", { className: "tw-
|
|
2971
|
+
jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-0 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-thick tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-backdrop-blur/20 tw-backdrop-saturate-150", children: jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end", children: children }) }));
|
|
2972
2972
|
}
|
|
2973
2973
|
|
|
2974
|
-
function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, }) {
|
|
2974
|
+
function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, }) {
|
|
2975
2975
|
return (jsxRuntime.jsxs("nav", { className: cn('tw-flex tw-max-h-[120px] tw-min-w-96 tw-flex-col tw-text-grey-300', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900'), children: [jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs', displayBackButton ? 'tw-px-squid-m' : 'tw-pl-squid-l tw-pr-squid-m'), children: [displayBackButton ? (jsxRuntime.jsx(Button, { className: displayButtonShadows
|
|
2976
|
-
? 'group-data-[squid-theme-type=
|
|
2977
|
-
: undefined, variant: "tertiary", size: "md", icon: jsxRuntime.jsx(ArrowLeftIcon, {}) })) : null, logoUrl ? (jsxRuntime.jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsxRuntime.jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: jsxRuntime.jsx(AddressButton, { className: displayButtonShadows
|
|
2978
|
-
? 'group-data-[squid-theme-type=
|
|
2976
|
+
? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
|
|
2977
|
+
: undefined, variant: "tertiary", size: "md", icon: jsxRuntime.jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsxRuntime.jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsxRuntime.jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: jsxRuntime.jsx(AddressButton, { className: displayButtonShadows
|
|
2978
|
+
? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
|
|
2979
2979
|
: undefined, label: "Connect" }) })] }), title ? (jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-l tw-py-squid-xxs", children: jsxRuntime.jsx(HeadingText, { size: "small", children: title }) })) : null] }));
|
|
2980
2980
|
}
|
|
2981
2981
|
|
|
2982
2982
|
function ProductCard({ children }) {
|
|
2983
|
-
return (jsxRuntime.jsx("div", { className: "tw-
|
|
2983
|
+
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-full tw-max-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 }) }));
|
|
2984
2984
|
}
|
|
2985
2985
|
|
|
2986
2986
|
function MaxIcon() {
|
|
@@ -2992,15 +2992,19 @@ function SwapInputsIcon() {
|
|
|
2992
2992
|
}
|
|
2993
2993
|
|
|
2994
2994
|
function WalletAddress({ address, ens }) {
|
|
2995
|
-
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", children: ens
|
|
2995
|
+
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", children: ens
|
|
2996
|
+
? ens
|
|
2997
|
+
: address
|
|
2998
|
+
? (address === null || address === void 0 ? void 0 : address.slice(0, 6)) + '...' + (address === null || address === void 0 ? void 0 : address.slice(-4))
|
|
2999
|
+
: '' }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronArrowIcon, {}) })] }));
|
|
2996
3000
|
}
|
|
2997
3001
|
|
|
2998
|
-
function SwapConfiguration({ priceImpactPercentage, amount
|
|
3002
|
+
function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, }) {
|
|
2999
3003
|
var _a;
|
|
3000
3004
|
const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
|
|
3001
3005
|
? 'tw-text-status-negative'
|
|
3002
3006
|
: 'tw-text-grey-300';
|
|
3003
|
-
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' }), jsxRuntime.jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" }), 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 }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m", children: jsxRuntime.jsx("input", { className: "tw-
|
|
3007
|
+
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' }), jsxRuntime.jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" }), 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 }) }), 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 }) }), !(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: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs 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("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balance }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
|
|
3004
3008
|
}
|
|
3005
3009
|
|
|
3006
3010
|
function SwapProgressViewHeader({ title, description, }) {
|
|
@@ -3065,12 +3069,12 @@ function RefreshIcon() {
|
|
|
3065
3069
|
}
|
|
3066
3070
|
|
|
3067
3071
|
function DropdownMenu({ dropdownRef, items, className, }) {
|
|
3068
|
-
return (jsxRuntime.jsx("div", { ref: dropdownRef, children: jsxRuntime.jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsxRuntime.jsx("ul", { className: "
|
|
3072
|
+
return (jsxRuntime.jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsxRuntime.jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsxRuntime.jsx("ul", { className: "tw-flex tw-w-[144px] tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs", children: items.map((item) => (jsxRuntime.jsx(DropdownMenuItem, Object.assign({}, item)))) }) }) }));
|
|
3069
3073
|
}
|
|
3070
3074
|
|
|
3071
3075
|
function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel = 'Pending', }) {
|
|
3072
3076
|
const { isModalOpen, modalRef, openModalButtonRef, openModal } = useModal();
|
|
3073
|
-
return (jsxRuntime.jsx("li", { 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-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: [isPending ? (jsxRuntime.jsx("span", { className: "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-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, {}) })) : null, 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 })] }), jsxRuntime.jsx("div", { className: "tw-transition-opacity group-hover/history-item:tw-opacity-0", children: isPending ? (jsxRuntime.jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsxRuntime.jsx(CaptionText, { children: dateCompleted })) }), jsxRuntime.jsx("button", { className: "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 group-hover/history-item:tw-opacity-100", onClick: openModal, ref: openModalButtonRef, children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })] }), 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 })] })] }), isModalOpen ? (jsxRuntime.jsx(DropdownMenu, { dropdownRef: modalRef, items: [
|
|
3077
|
+
return (jsxRuntime.jsx("li", { 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-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: [isPending ? (jsxRuntime.jsx("span", { className: "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-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, {}) })) : null, 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 })] }), jsxRuntime.jsx("div", { className: "tw-transition-opacity group-hover/history-item:tw-opacity-0", children: isPending ? (jsxRuntime.jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsxRuntime.jsx(CaptionText, { children: dateCompleted })) }), jsxRuntime.jsx("button", { className: "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 group-hover/history-item:tw-opacity-100", onClick: openModal, ref: openModalButtonRef, children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })] }), 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 })] })] }), isModalOpen ? (jsxRuntime.jsx(DropdownMenu, { className: "-tw-left-[85px] tw-top-7", dropdownRef: modalRef, items: [
|
|
3074
3078
|
{
|
|
3075
3079
|
label: 'Repeat swap',
|
|
3076
3080
|
icon: jsxRuntime.jsx(RefreshIcon, {}),
|
|
@@ -3163,7 +3167,7 @@ function SwapStepsCollapsed({ steps, currentStepCount: _currentStepCount, }) {
|
|
|
3163
3167
|
setIsShowRouteAnimationRunning(true);
|
|
3164
3168
|
}, className: "tw-relative tw-flex tw-min-h-button tw-w-full tw-items-center tw-overflow-hidden tw-rounded-squid-xxl tw-border tw-border-material-light-thin tw-bg-grey-800 tw-px-squid-xs tw-text-grey-300", children: [!isLastStep && (jsxRuntime.jsxs("span", { className: "tw-absolute -tw-top-1.5", children: [jsxRuntime.jsx("span", { className: "tw-absolute tw-top-1 tw-h-full tw-w-full -tw-translate-x-1/2 tw-bg-gradient-to-b tw-from-grey-800 tw-to-transparent" }), jsxRuntime.jsx(SwapStepSeparator, {})] })), jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: currentStep.descriptionBlocks, chipContent: currentStep.chipContent }), !isFirstStep && (jsxRuntime.jsxs("span", { className: "tw-absolute -tw-bottom-1.5", children: [jsxRuntime.jsx("span", { className: "tw-absolute tw-bottom-1 tw-h-full tw-w-full -tw-translate-x-1/2 tw-bg-gradient-to-b tw-from-transparent tw-to-grey-800" }), jsxRuntime.jsx(SwapStepSeparator, {})] }))] }) }), isRouteVisible && (jsxRuntime.jsxs("div", { className: cn('tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[536px] tw-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800', isShowRouteAnimationRunning
|
|
3165
3169
|
? 'tw-animate-slide-to-top'
|
|
3166
|
-
: 'tw-animate-slide-to-bottom'), children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsxRuntime.jsx("button", { onClick: () => setIsShowRouteAnimationRunning(false), className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsxRuntime.jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsxRuntime.jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsxRuntime.jsx("ul", { className: "
|
|
3170
|
+
: 'tw-animate-slide-to-bottom'), children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsxRuntime.jsx("button", { onClick: () => setIsShowRouteAnimationRunning(false), className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsxRuntime.jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsxRuntime.jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsxRuntime.jsx("ul", { className: "tw-flex tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", children: steps.map((step, index) => (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1) }, index))) }), jsxRuntime.jsx("footer", { className: "tw-flex tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsxRuntime.jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] }))] }));
|
|
3167
3171
|
}
|
|
3168
3172
|
|
|
3169
3173
|
function TokenPair({ firstToken, secondToken }) {
|
|
@@ -6,7 +6,10 @@ export declare function ChevronLargeDownIcon({ size }: {
|
|
|
6
6
|
size?: string;
|
|
7
7
|
}): import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
export declare function ChevronTopIcon(): import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
export declare function ChevronLargeRightIcon(
|
|
9
|
+
export declare function ChevronLargeRightIcon({ size, className, }: {
|
|
10
|
+
size?: string;
|
|
11
|
+
className?: string;
|
|
12
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
10
13
|
export declare function ChevronRightSmallIcon(): import("react/jsx-runtime").JSX.Element;
|
|
11
14
|
export declare function ArrowLeftIcon(): import("react/jsx-runtime").JSX.Element;
|
|
12
15
|
export declare function ArrowRightUpCircleIcon(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -6,6 +6,7 @@ interface DetailsToolbarProps {
|
|
|
6
6
|
onToggleBoostMode?: ({ boostMode }: {
|
|
7
7
|
boostMode: BoostMode;
|
|
8
8
|
}) => void;
|
|
9
|
+
onInvertSwapButtonClick?: () => void;
|
|
9
10
|
}
|
|
10
|
-
export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
|
|
11
12
|
export {};
|
|
@@ -4,6 +4,7 @@ interface NavigationBarProps {
|
|
|
4
4
|
logoUrl?: string;
|
|
5
5
|
transparent?: boolean;
|
|
6
6
|
displayButtonShadows?: boolean;
|
|
7
|
+
onBackButtonClick?: () => void;
|
|
7
8
|
}
|
|
8
|
-
export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
|
|
9
10
|
export {};
|
package/dist/esm/index.js
CHANGED
|
@@ -2626,8 +2626,8 @@ function ArrowTriangle() {
|
|
|
2626
2626
|
function ChevronLargeDownIcon({ size = '24' }) {
|
|
2627
2627
|
return (jsx("svg", { width: size, height: size, viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M3 10.5L11.0287 14.9604C11.6328 15.296 12.3672 15.296 12.9713 14.9604L21 10.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
2628
2628
|
}
|
|
2629
|
-
function ChevronLargeRightIcon() {
|
|
2630
|
-
return (jsx("svg", { width:
|
|
2629
|
+
function ChevronLargeRightIcon({ size = '16', className, }) {
|
|
2630
|
+
return (jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M6.66675 14L9.64035 8.64754C9.86407 8.24484 9.86407 7.75519 9.64035 7.35249L6.66675 2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
2631
2631
|
}
|
|
2632
2632
|
function ChevronRightSmallIcon() {
|
|
2633
2633
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: jsx("path", { d: "M6.66675 10.6667L8.86201 8.47141C9.12236 8.21106 9.12236 7.78896 8.86201 7.52861L6.66675 5.33334", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
@@ -2768,16 +2768,16 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
|
|
|
2768
2768
|
if (!tokenImageUrl) {
|
|
2769
2769
|
return `linear-gradient(90deg, ${chainBgColor} 54.86%, ${tokenBgColor} 95.83%)`;
|
|
2770
2770
|
}
|
|
2771
|
-
return `linear-gradient(to right, ${chainBgColor}
|
|
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-min-w-[209px] 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-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-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
|
|
2773
|
+
return (jsxs("div", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-min-w-[209px] 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-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: "" })) : (jsx(Fragment, { children: jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsx("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-rounded-bl-full tw-rounded-tl-full tw-border-b tw-border-t tw-border-material-light-thin'), style: {
|
|
2776
2776
|
backgroundColor: tokenBgColor,
|
|
2777
|
-
}, children: jsx("img", { src: tokenImageUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl -tw-translate-x-[2px]" }) })) : null, jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl 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: {
|
|
2777
|
+
}, children: jsx("img", { src: tokenImageUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl -tw-translate-x-[2px]" }) })) : null, 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: {
|
|
2778
2778
|
backgroundColor: tokenBgColor,
|
|
2779
2779
|
color: tokenTextColor,
|
|
2780
|
-
}, children: [jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsx(ChevronLargeRightIcon, {})] })] }));
|
|
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
2783
|
const animationDuration = '500ms';
|
|
@@ -2921,7 +2921,7 @@ const borderRadiusClassMap = {
|
|
|
2921
2921
|
};
|
|
2922
2922
|
function Menu(_a) {
|
|
2923
2923
|
var { children, containerClassName, contentClassName, title, displayControls, rounded = 'lg' } = _a, props = __rest(_a, ["children", "containerClassName", "contentClassName", "title", "displayControls", "rounded"]);
|
|
2924
|
-
return (jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), children: jsxs("div", { className: cn('tw-
|
|
2924
|
+
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]) })] }) })));
|
|
2925
2925
|
}
|
|
2926
2926
|
|
|
2927
2927
|
const tooltipWidthClassMap = {
|
|
@@ -2955,9 +2955,9 @@ const detailStateClassMap = {
|
|
|
2955
2955
|
error: 'tw-opacity-33 tw-pointer-events-none',
|
|
2956
2956
|
full: '',
|
|
2957
2957
|
};
|
|
2958
|
-
function DetailsToolbar({ state = 'full', errorMessage, boostMode = 'normal', onToggleBoostMode, }) {
|
|
2958
|
+
function DetailsToolbar({ state = 'full', errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, }) {
|
|
2959
2959
|
const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
|
|
2960
|
-
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, {}) }), 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", className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsx(ChevronLargeDownIcon, {}) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { boostMode: boostMode, onToggleBoostMode: onToggleBoostMode }) })] })) }));
|
|
2960
|
+
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, {}) }), 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, { boostMode: boostMode, onToggleBoostMode: onToggleBoostMode }) })] })) }));
|
|
2961
2961
|
}
|
|
2962
2962
|
const ErrorMessage = ({ message }) => {
|
|
2963
2963
|
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 })] }));
|
|
@@ -2966,19 +2966,19 @@ const ErrorMessage = ({ message }) => {
|
|
|
2966
2966
|
function Modal({ children }) {
|
|
2967
2967
|
return (
|
|
2968
2968
|
// modal container
|
|
2969
|
-
jsx("div", { className: "tw-
|
|
2969
|
+
jsx("div", { className: "tw-absolute tw-inset-0 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-thick tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-backdrop-blur/20 tw-backdrop-saturate-150", children: jsx("div", { className: "tw-relative tw-flex tw-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end", children: children }) }));
|
|
2970
2970
|
}
|
|
2971
2971
|
|
|
2972
|
-
function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, }) {
|
|
2972
|
+
function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, }) {
|
|
2973
2973
|
return (jsxs("nav", { className: cn('tw-flex tw-max-h-[120px] tw-min-w-96 tw-flex-col tw-text-grey-300', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900'), children: [jsxs("div", { className: cn('tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs', displayBackButton ? 'tw-px-squid-m' : 'tw-pl-squid-l tw-pr-squid-m'), children: [displayBackButton ? (jsx(Button, { className: displayButtonShadows
|
|
2974
|
-
? 'group-data-[squid-theme-type=
|
|
2975
|
-
: undefined, variant: "tertiary", size: "md", icon: jsx(ArrowLeftIcon, {}) })) : null, logoUrl ? (jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: jsx(AddressButton, { className: displayButtonShadows
|
|
2976
|
-
? 'group-data-[squid-theme-type=
|
|
2974
|
+
? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
|
|
2975
|
+
: undefined, variant: "tertiary", size: "md", icon: jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: jsx(AddressButton, { className: displayButtonShadows
|
|
2976
|
+
? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
|
|
2977
2977
|
: undefined, label: "Connect" }) })] }), title ? (jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-l tw-py-squid-xxs", children: jsx(HeadingText, { size: "small", children: title }) })) : null] }));
|
|
2978
2978
|
}
|
|
2979
2979
|
|
|
2980
2980
|
function ProductCard({ children }) {
|
|
2981
|
-
return (jsx("div", { className: "tw-
|
|
2981
|
+
return (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: jsx("div", { className: "tw-relative tw-flex tw-h-full tw-max-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 }) }));
|
|
2982
2982
|
}
|
|
2983
2983
|
|
|
2984
2984
|
function MaxIcon() {
|
|
@@ -2990,15 +2990,19 @@ function SwapInputsIcon() {
|
|
|
2990
2990
|
}
|
|
2991
2991
|
|
|
2992
2992
|
function WalletAddress({ address, ens }) {
|
|
2993
|
-
return (jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", children: ens
|
|
2993
|
+
return (jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", children: ens
|
|
2994
|
+
? ens
|
|
2995
|
+
: address
|
|
2996
|
+
? (address === null || address === void 0 ? void 0 : address.slice(0, 6)) + '...' + (address === null || address === void 0 ? void 0 : address.slice(-4))
|
|
2997
|
+
: '' }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronArrowIcon, {}) })] }));
|
|
2994
2998
|
}
|
|
2995
2999
|
|
|
2996
|
-
function SwapConfiguration({ priceImpactPercentage, amount
|
|
3000
|
+
function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, }) {
|
|
2997
3001
|
var _a;
|
|
2998
3002
|
const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
|
|
2999
3003
|
? 'tw-text-status-negative'
|
|
3000
3004
|
: 'tw-text-grey-300';
|
|
3001
|
-
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' }), jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" }), 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 }) }), jsx("div", { className: "tw-px-squid-m", children: jsx("input", { className: "tw-
|
|
3005
|
+
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' }), jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" }), 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 }) }), 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 }) }), !(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: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs 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("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
|
|
3002
3006
|
}
|
|
3003
3007
|
|
|
3004
3008
|
function SwapProgressViewHeader({ title, description, }) {
|
|
@@ -3063,12 +3067,12 @@ function RefreshIcon() {
|
|
|
3063
3067
|
}
|
|
3064
3068
|
|
|
3065
3069
|
function DropdownMenu({ dropdownRef, items, className, }) {
|
|
3066
|
-
return (jsx("div", { ref: dropdownRef, children: jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsx("ul", { className: "
|
|
3070
|
+
return (jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsx("ul", { className: "tw-flex tw-w-[144px] tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs", children: items.map((item) => (jsx(DropdownMenuItem, Object.assign({}, item)))) }) }) }));
|
|
3067
3071
|
}
|
|
3068
3072
|
|
|
3069
3073
|
function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel = 'Pending', }) {
|
|
3070
3074
|
const { isModalOpen, modalRef, openModalButtonRef, openModal } = useModal();
|
|
3071
|
-
return (jsx("li", { 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: jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 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: [jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [isPending ? (jsx("span", { className: "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-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsx(DotGrid1x3HorizontalIcon, {}) })) : null, jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), 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" })] }), jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center", children: [jsx(CaptionText, { children: fromLabel }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronRightSmallIcon, {}) }), jsx(CaptionText, { children: toLabel })] }), jsx("div", { className: "tw-transition-opacity group-hover/history-item:tw-opacity-0", children: isPending ? (jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsx(CaptionText, { children: dateCompleted })) }), jsx("button", { className: "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 group-hover/history-item:tw-opacity-100", onClick: openModal, ref: openModalButtonRef, children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] }), isModalOpen ? (jsx(DropdownMenu, { dropdownRef: modalRef, items: [
|
|
3075
|
+
return (jsx("li", { 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: jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 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: [jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [isPending ? (jsx("span", { className: "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-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsx(DotGrid1x3HorizontalIcon, {}) })) : null, jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), 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" })] }), jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center", children: [jsx(CaptionText, { children: fromLabel }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronRightSmallIcon, {}) }), jsx(CaptionText, { children: toLabel })] }), jsx("div", { className: "tw-transition-opacity group-hover/history-item:tw-opacity-0", children: isPending ? (jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsx(CaptionText, { children: dateCompleted })) }), jsx("button", { className: "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 group-hover/history-item:tw-opacity-100", onClick: openModal, ref: openModalButtonRef, children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] }), isModalOpen ? (jsx(DropdownMenu, { className: "-tw-left-[85px] tw-top-7", dropdownRef: modalRef, items: [
|
|
3072
3076
|
{
|
|
3073
3077
|
label: 'Repeat swap',
|
|
3074
3078
|
icon: jsx(RefreshIcon, {}),
|
|
@@ -3161,7 +3165,7 @@ function SwapStepsCollapsed({ steps, currentStepCount: _currentStepCount, }) {
|
|
|
3161
3165
|
setIsShowRouteAnimationRunning(true);
|
|
3162
3166
|
}, className: "tw-relative tw-flex tw-min-h-button tw-w-full tw-items-center tw-overflow-hidden tw-rounded-squid-xxl tw-border tw-border-material-light-thin tw-bg-grey-800 tw-px-squid-xs tw-text-grey-300", children: [!isLastStep && (jsxs("span", { className: "tw-absolute -tw-top-1.5", children: [jsx("span", { className: "tw-absolute tw-top-1 tw-h-full tw-w-full -tw-translate-x-1/2 tw-bg-gradient-to-b tw-from-grey-800 tw-to-transparent" }), jsx(SwapStepSeparator, {})] })), jsx(SwapStepItem, { descriptionBlocks: currentStep.descriptionBlocks, chipContent: currentStep.chipContent }), !isFirstStep && (jsxs("span", { className: "tw-absolute -tw-bottom-1.5", children: [jsx("span", { className: "tw-absolute tw-bottom-1 tw-h-full tw-w-full -tw-translate-x-1/2 tw-bg-gradient-to-b tw-from-transparent tw-to-grey-800" }), jsx(SwapStepSeparator, {})] }))] }) }), isRouteVisible && (jsxs("div", { className: cn('tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[536px] tw-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800', isShowRouteAnimationRunning
|
|
3163
3167
|
? 'tw-animate-slide-to-top'
|
|
3164
|
-
: 'tw-animate-slide-to-bottom'), children: [jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsx("button", { onClick: () => setIsShowRouteAnimationRunning(false), className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsx("ul", { className: "
|
|
3168
|
+
: 'tw-animate-slide-to-bottom'), children: [jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsx("button", { onClick: () => setIsShowRouteAnimationRunning(false), className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsx("ul", { className: "tw-flex tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", children: steps.map((step, index) => (jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1) }, index))) }), jsx("footer", { className: "tw-flex tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] }))] }));
|
|
3165
3169
|
}
|
|
3166
3170
|
|
|
3167
3171
|
function TokenPair({ firstToken, secondToken }) {
|
|
@@ -6,7 +6,10 @@ export declare function ChevronLargeDownIcon({ size }: {
|
|
|
6
6
|
size?: string;
|
|
7
7
|
}): import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
export declare function ChevronTopIcon(): import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
export declare function ChevronLargeRightIcon(
|
|
9
|
+
export declare function ChevronLargeRightIcon({ size, className, }: {
|
|
10
|
+
size?: string;
|
|
11
|
+
className?: string;
|
|
12
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
10
13
|
export declare function ChevronRightSmallIcon(): import("react/jsx-runtime").JSX.Element;
|
|
11
14
|
export declare function ArrowLeftIcon(): import("react/jsx-runtime").JSX.Element;
|
|
12
15
|
export declare function ArrowRightUpCircleIcon(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -6,6 +6,7 @@ interface DetailsToolbarProps {
|
|
|
6
6
|
onToggleBoostMode?: ({ boostMode }: {
|
|
7
7
|
boostMode: BoostMode;
|
|
8
8
|
}) => void;
|
|
9
|
+
onInvertSwapButtonClick?: () => void;
|
|
9
10
|
}
|
|
10
|
-
export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
|
|
11
12
|
export {};
|
|
@@ -4,6 +4,7 @@ interface NavigationBarProps {
|
|
|
4
4
|
logoUrl?: string;
|
|
5
5
|
transparent?: boolean;
|
|
6
6
|
displayButtonShadows?: boolean;
|
|
7
|
+
onBackButtonClick?: () => void;
|
|
7
8
|
}
|
|
8
|
-
export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
|
|
9
10
|
export {};
|
package/dist/index.css
CHANGED
|
@@ -601,6 +601,10 @@ video {
|
|
|
601
601
|
left: -5px;
|
|
602
602
|
}
|
|
603
603
|
|
|
604
|
+
.-tw-left-\[85px\] {
|
|
605
|
+
left: -85px;
|
|
606
|
+
}
|
|
607
|
+
|
|
604
608
|
.-tw-right-1\/3 {
|
|
605
609
|
right: -33.333333%;
|
|
606
610
|
}
|
|
@@ -665,6 +669,10 @@ video {
|
|
|
665
669
|
left: 54px;
|
|
666
670
|
}
|
|
667
671
|
|
|
672
|
+
.tw-left-\[70\%\] {
|
|
673
|
+
left: 70%;
|
|
674
|
+
}
|
|
675
|
+
|
|
668
676
|
.tw-left-\[calc\(50\%-1\.5px\)\] {
|
|
669
677
|
left: calc(50% - 1.5px);
|
|
670
678
|
}
|
|
@@ -701,6 +709,10 @@ video {
|
|
|
701
709
|
top: 0.25rem;
|
|
702
710
|
}
|
|
703
711
|
|
|
712
|
+
.tw-top-7 {
|
|
713
|
+
top: 1.75rem;
|
|
714
|
+
}
|
|
715
|
+
|
|
704
716
|
.tw-top-squid-xxs {
|
|
705
717
|
top: 0.3125rem;
|
|
706
718
|
}
|
|
@@ -744,11 +756,6 @@ video {
|
|
|
744
756
|
margin-right: 0.3125rem;
|
|
745
757
|
}
|
|
746
758
|
|
|
747
|
-
.tw-my-squid-xs {
|
|
748
|
-
margin-top: 0.625rem;
|
|
749
|
-
margin-bottom: 0.625rem;
|
|
750
|
-
}
|
|
751
|
-
|
|
752
759
|
.-tw-mb-1 {
|
|
753
760
|
margin-bottom: -0.25rem;
|
|
754
761
|
}
|
|
@@ -1274,6 +1281,11 @@ video {
|
|
|
1274
1281
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1275
1282
|
}
|
|
1276
1283
|
|
|
1284
|
+
.tw-translate-x-1\/4 {
|
|
1285
|
+
--tw-translate-x: 25%;
|
|
1286
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1287
|
+
}
|
|
1288
|
+
|
|
1277
1289
|
.tw-rotate-90 {
|
|
1278
1290
|
--tw-rotate: 90deg;
|
|
1279
1291
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
@@ -1854,6 +1866,10 @@ video {
|
|
|
1854
1866
|
padding-bottom: 0.3125rem;
|
|
1855
1867
|
}
|
|
1856
1868
|
|
|
1869
|
+
.tw-pb-\[15px\] {
|
|
1870
|
+
padding-bottom: 15px;
|
|
1871
|
+
}
|
|
1872
|
+
|
|
1857
1873
|
.tw-pb-squid-l {
|
|
1858
1874
|
padding-bottom: 1.875rem;
|
|
1859
1875
|
}
|
|
@@ -1934,6 +1950,10 @@ video {
|
|
|
1934
1950
|
padding-right: 0.3125rem;
|
|
1935
1951
|
}
|
|
1936
1952
|
|
|
1953
|
+
.tw-pt-\[5px\] {
|
|
1954
|
+
padding-top: 5px;
|
|
1955
|
+
}
|
|
1956
|
+
|
|
1937
1957
|
.tw-pt-squid-m {
|
|
1938
1958
|
padding-top: 1.25rem;
|
|
1939
1959
|
}
|
|
@@ -2037,6 +2057,10 @@ video {
|
|
|
2037
2057
|
line-height: 20px !important;
|
|
2038
2058
|
}
|
|
2039
2059
|
|
|
2060
|
+
.\!tw-leading-\[9px\] {
|
|
2061
|
+
line-height: 9px !important;
|
|
2062
|
+
}
|
|
2063
|
+
|
|
2040
2064
|
.tw-leading-5 {
|
|
2041
2065
|
line-height: 1.25rem;
|
|
2042
2066
|
}
|
|
@@ -2049,10 +2073,6 @@ video {
|
|
|
2049
2073
|
line-height: 13px;
|
|
2050
2074
|
}
|
|
2051
2075
|
|
|
2052
|
-
.tw-leading-\[15px\] {
|
|
2053
|
-
line-height: 15px;
|
|
2054
|
-
}
|
|
2055
|
-
|
|
2056
2076
|
.tw-leading-\[20px\] {
|
|
2057
2077
|
line-height: 20px;
|
|
2058
2078
|
}
|
|
@@ -2200,14 +2220,30 @@ video {
|
|
|
2200
2220
|
outline-offset: 2px;
|
|
2201
2221
|
}
|
|
2202
2222
|
|
|
2223
|
+
.tw-outline {
|
|
2224
|
+
outline-style: solid;
|
|
2225
|
+
}
|
|
2226
|
+
|
|
2227
|
+
.tw-outline-1 {
|
|
2228
|
+
outline-width: 1px;
|
|
2229
|
+
}
|
|
2230
|
+
|
|
2203
2231
|
.tw-outline-2 {
|
|
2204
2232
|
outline-width: 2px;
|
|
2205
2233
|
}
|
|
2206
2234
|
|
|
2235
|
+
.-tw-outline-offset-\[1px\] {
|
|
2236
|
+
outline-offset: -1px;
|
|
2237
|
+
}
|
|
2238
|
+
|
|
2207
2239
|
.tw-outline-offset-0 {
|
|
2208
2240
|
outline-offset: 0px;
|
|
2209
2241
|
}
|
|
2210
2242
|
|
|
2243
|
+
.tw-outline-material-light-thin {
|
|
2244
|
+
outline-color: var(--squid-theme-material-light-thin);
|
|
2245
|
+
}
|
|
2246
|
+
|
|
2211
2247
|
.tw-backdrop-blur\/10 {
|
|
2212
2248
|
--tw-backdrop-blur: blur(10px);
|
|
2213
2249
|
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
|
@@ -2220,6 +2256,12 @@ video {
|
|
|
2220
2256
|
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
|
2221
2257
|
}
|
|
2222
2258
|
|
|
2259
|
+
.tw-backdrop-saturate-150 {
|
|
2260
|
+
--tw-backdrop-saturate: saturate(1.5);
|
|
2261
|
+
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
|
2262
|
+
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
|
2263
|
+
}
|
|
2264
|
+
|
|
2223
2265
|
.tw-transition-colors {
|
|
2224
2266
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
|
2225
2267
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -2286,17 +2328,6 @@ li {
|
|
|
2286
2328
|
list-style-type: none;
|
|
2287
2329
|
}
|
|
2288
2330
|
|
|
2289
|
-
.custom-scrollbar::-webkit-scrollbar {
|
|
2290
|
-
background-color: var(--squid-theme-grey-900);
|
|
2291
|
-
width: 5px;
|
|
2292
|
-
height: 5px;
|
|
2293
|
-
margin: 4px;
|
|
2294
|
-
}
|
|
2295
|
-
|
|
2296
|
-
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
2297
|
-
background-color: var(--squid-theme-grey-300);
|
|
2298
|
-
}
|
|
2299
|
-
|
|
2300
2331
|
.tw-swap-detail-list-item-gradient:nth-child(even) > div {
|
|
2301
2332
|
background: linear-gradient(
|
|
2302
2333
|
91deg,
|
|
@@ -2325,6 +2356,10 @@ li {
|
|
|
2325
2356
|
background-color: var(--squid-theme-material-light-thin);
|
|
2326
2357
|
}
|
|
2327
2358
|
|
|
2359
|
+
.focus\:tw-text-royal-400:focus {
|
|
2360
|
+
color: var(--squid-theme-royal-400);
|
|
2361
|
+
}
|
|
2362
|
+
|
|
2328
2363
|
.focus\:tw-outline-none:focus {
|
|
2329
2364
|
outline: 2px solid transparent;
|
|
2330
2365
|
outline-offset: 2px;
|
package/dist/index.d.ts
CHANGED
|
@@ -139,8 +139,9 @@ interface DetailsToolbarProps {
|
|
|
139
139
|
onToggleBoostMode?: ({ boostMode }: {
|
|
140
140
|
boostMode: BoostMode;
|
|
141
141
|
}) => void;
|
|
142
|
+
onInvertSwapButtonClick?: () => void;
|
|
142
143
|
}
|
|
143
|
-
declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
|
|
144
|
+
declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
|
|
144
145
|
|
|
145
146
|
type Rounded = 'sm' | 'lg';
|
|
146
147
|
interface MenuProps extends React$1.ComponentProps<'div'> {
|
|
@@ -163,8 +164,9 @@ interface NavigationBarProps {
|
|
|
163
164
|
logoUrl?: string;
|
|
164
165
|
transparent?: boolean;
|
|
165
166
|
displayButtonShadows?: boolean;
|
|
167
|
+
onBackButtonClick?: () => void;
|
|
166
168
|
}
|
|
167
|
-
declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
|
|
169
|
+
declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
|
|
168
170
|
|
|
169
171
|
interface ProductCardProps {
|
|
170
172
|
children?: React.ReactNode;
|