@0xsquid/ui 0.18.5 → 0.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +21 -18
- package/dist/cjs/types/components/buttons/AssetsButton.d.ts +11 -7
- package/dist/cjs/types/components/layout/NavigationBar.d.ts +1 -0
- package/dist/cjs/types/stories/buttons/AssetsButton.stories.d.ts +1 -0
- package/dist/esm/index.js +21 -18
- package/dist/esm/types/components/buttons/AssetsButton.d.ts +11 -7
- package/dist/esm/types/components/layout/NavigationBar.d.ts +1 -0
- package/dist/esm/types/stories/buttons/AssetsButton.stories.d.ts +1 -0
- package/dist/index.d.ts +12 -7
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -3111,27 +3111,28 @@ const emptyChainIconTextClassNameMap = {
|
|
|
3111
3111
|
primary: 'tw-text-grey-100',
|
|
3112
3112
|
accent: 'group-data-[squid-theme-type=dark]:tw-text-grey-100 group-data-[squid-theme-type=light]:tw-text-grey-900',
|
|
3113
3113
|
};
|
|
3114
|
-
function AssetsButton({
|
|
3114
|
+
function AssetsButton({ chain, token, onClick, variant = 'primary', }) {
|
|
3115
|
+
var _a, _b;
|
|
3115
3116
|
const defaultBgColor = `var(${themeTypesKeys[themeKeyVariantMap[variant]].cssVariable})`;
|
|
3116
|
-
const chainBgColor =
|
|
3117
|
-
const tokenBgColor =
|
|
3117
|
+
const chainBgColor = (_a = (chain && chain.bgColor)) !== null && _a !== void 0 ? _a : defaultBgColor;
|
|
3118
|
+
const tokenBgColor = (_b = (chain && token && token.bgColor)) !== null && _b !== void 0 ? _b : defaultBgColor;
|
|
3118
3119
|
const bgGradient = React.useMemo(() => {
|
|
3119
|
-
if (!
|
|
3120
|
+
if (!chain) {
|
|
3120
3121
|
return `linear-gradient(to right, ${defaultBgColor}, ${defaultBgColor})`;
|
|
3121
3122
|
}
|
|
3122
|
-
if (!
|
|
3123
|
+
if (!token) {
|
|
3123
3124
|
return `linear-gradient(90deg, ${chainBgColor} 54.86%, ${tokenBgColor} 95.83%)`;
|
|
3124
3125
|
}
|
|
3125
3126
|
return `linear-gradient(to right, ${chainBgColor} 43.5%, ${tokenBgColor} 56.55%)`;
|
|
3126
|
-
}, [chainBgColor, tokenBgColor]);
|
|
3127
|
-
return (jsxRuntime.jsxs("button", { onClick: onClick, className: cn('tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center focus:tw-outline-none', buttonTextClassNameMap[variant]), 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',
|
|
3127
|
+
}, [chainBgColor, tokenBgColor, chain, token]);
|
|
3128
|
+
return (jsxRuntime.jsxs("button", { onClick: onClick, className: cn('tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center focus:tw-outline-none', buttonTextClassNameMap[variant]), 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', chain && token ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
|
|
3128
3129
|
backgroundImage: bgGradient,
|
|
3129
|
-
}, children: jsxRuntime.jsx("div", { className: clsx(imageClass), children:
|
|
3130
|
+
}, children: jsxRuntime.jsx("div", { className: clsx(imageClass), children: chain ? (jsxRuntime.jsx("img", { src: chain.iconUrl, alt: "", className: "tw-rounded-full" })) : (jsxRuntime.jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsxRuntime.jsx(PlusIcon, {}) })) }) }), chain && token ? (jsxRuntime.jsxs("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-cursor-pointer tw-overflow-hidden'), children: [jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
|
|
3130
3131
|
backgroundColor: tokenBgColor,
|
|
3131
|
-
} }), jsxRuntime.jsx("img", { src:
|
|
3132
|
+
} }), jsxRuntime.jsx("img", { src: token.iconUrl, alt: token.symbol, className: "tw-absolute tw-h-squid-xl tw-w-squid-xl tw-rounded-full" }), jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px] tw-border-b\n tw-border-t tw-border-material-light-thin" })] })) : null, jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', chain && token && 'tw-pl-[7px]'), style: {
|
|
3132
3133
|
backgroundColor: tokenBgColor,
|
|
3133
|
-
color:
|
|
3134
|
-
}, children: [jsxRuntime.jsx(BodyText, { size: "small", className: cn('tw-leading-[13px]', !
|
|
3134
|
+
color: token === null || token === void 0 ? void 0 : token.textColor,
|
|
3135
|
+
}, children: [jsxRuntime.jsx(BodyText, { size: "small", className: cn('tw-leading-[13px]', (!token || !chain) && 'tw-w-[135px]'), children: chain && token ? token.symbol : 'Select token' }), jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
|
|
3135
3136
|
}
|
|
3136
3137
|
|
|
3137
3138
|
const CSS_VARS = {
|
|
@@ -17524,13 +17525,13 @@ function ModalContentDivider() {
|
|
|
17524
17525
|
function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, }) {
|
|
17525
17526
|
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
|
|
17526
17527
|
? 'tw-px-squid-m'
|
|
17527
|
-
: '
|
|
17528
|
+
: 'tw-pl-squid-m tw-pr-squid-m mobile-lg:tw-pl-squid-l'), children: [displayBackButton ? (jsxRuntime.jsx(Button$1, { className: displayButtonShadows
|
|
17528
17529
|
? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
|
|
17529
17530
|
: 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 tw-gap-squid-xxs", children: actions === null || actions === void 0 ? void 0 : actions.map((action) => (jsxRuntime.jsx(Button$1, { size: "md", variant: "tertiary", label: typeof action.labelOrIcon === 'string'
|
|
17530
17531
|
? action.labelOrIcon
|
|
17531
17532
|
: undefined, className: "tw-text-grey-300", icon: typeof action.labelOrIcon === 'string'
|
|
17532
17533
|
? null
|
|
17533
|
-
: action.labelOrIcon, onClick: action.onClick }))) })] }), title ? (jsxRuntime.jsx("div", { className: "
|
|
17534
|
+
: action.labelOrIcon, onClick: action.onClick }, action.id))) })] }), title ? (jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-m tw-py-squid-xxs mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(HeadingText, { size: "small", children: title }) })) : null] }));
|
|
17534
17535
|
}
|
|
17535
17536
|
|
|
17536
17537
|
const createStoreImpl = (createState) => {
|
|
@@ -18121,7 +18122,7 @@ function LogoContainer({ children }) {
|
|
|
18121
18122
|
|
|
18122
18123
|
function SwapConfiguration({ amount, tokenPrice = 0, isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel = 'Connect wallet', balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive = true, isLoading = true, }) {
|
|
18123
18124
|
var _a, _b;
|
|
18124
|
-
return (jsxRuntime.jsxs("section", { className: "tw-relative tw-h-[211px] tw-max-h-[211px] tw-w-full tw-overflow-hidden tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-h-[205px] mobile-lg:tw-max-h-[205px] mobile-lg:tw-w-card-large", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", children: jsxRuntime.jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600 hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : emptyAddressLabel }), jsxRuntime.jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { onClick: onAssetsButtonClick,
|
|
18125
|
+
return (jsxRuntime.jsxs("section", { className: "tw-relative tw-h-[211px] tw-max-h-[211px] tw-w-full tw-overflow-hidden tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-h-[205px] mobile-lg:tw-max-h-[205px] mobile-lg:tw-w-card-large", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", children: jsxRuntime.jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600 hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : emptyAddressLabel }), jsxRuntime.jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { onClick: onAssetsButtonClick, chain: chain, token: token, variant: assetsButtonVariant }) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsxRuntime.jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsxRuntime.jsx(NumericInput, { token: {
|
|
18125
18126
|
decimals: (_a = token === null || token === void 0 ? void 0 : token.decimals) !== null && _a !== void 0 ? _a : 18,
|
|
18126
18127
|
symbol: (_b = token === null || token === void 0 ? void 0 : token.symbol) !== null && _b !== void 0 ? _b : '',
|
|
18127
18128
|
price: tokenPrice,
|
|
@@ -24694,9 +24695,11 @@ function MainView() {
|
|
|
24694
24695
|
return (jsxRuntime.jsxs(ProductCard, { children: [jsxRuntime.jsx(NavigationBar, { title: "Swap", actions: [
|
|
24695
24696
|
{
|
|
24696
24697
|
labelOrIcon: jsxRuntime.jsx(ClockOutlineIcon, {}),
|
|
24698
|
+
id: 'history',
|
|
24697
24699
|
},
|
|
24698
24700
|
{
|
|
24699
24701
|
labelOrIcon: jsxRuntime.jsx(SettingsGearIcon, {}),
|
|
24702
|
+
id: 'settings',
|
|
24700
24703
|
},
|
|
24701
24704
|
] }), jsxRuntime.jsx(SwapConfiguration, { direction: "from", chain: {
|
|
24702
24705
|
iconUrl: 'https://raw.githubusercontent.com/0xsquid/assets/main/images/tokens/blast.svg',
|
|
@@ -59714,13 +59717,13 @@ function XSocial({ className, size = '24', }) {
|
|
|
59714
59717
|
}
|
|
59715
59718
|
|
|
59716
59719
|
function SwapSuccessIcon() {
|
|
59717
|
-
return (jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4ZM31.5479 20.2665C32.2474 19.4116 32.1214 18.1516 31.2665 17.4521C30.4116 16.7527 29.1515 16.8787 28.4521 17.7336L20.8515 27.0232L18.4142 24.5858C17.6332 23.8048 16.3668 23.8048 15.5858 24.5858C14.8047 25.3669 14.8047 26.6332 15.5858 27.4143L19.5858 31.4143C19.9853 31.8138 20.5353 32.0257 21.0996 31.9976C21.664 31.9694 22.1901 31.7039 22.5479 31.2665L31.5479 20.2665Z", className: "tw-text-status-positive", fill: "currentColor" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_457_52170)", children: jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("filter", { id: "filter0_b_457_52170", x: "-17", y: "-17", width: "82", height: "82", filterUnits: "userSpaceOnUse",
|
|
59720
|
+
return (jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4ZM31.5479 20.2665C32.2474 19.4116 32.1214 18.1516 31.2665 17.4521C30.4116 16.7527 29.1515 16.8787 28.4521 17.7336L20.8515 27.0232L18.4142 24.5858C17.6332 23.8048 16.3668 23.8048 15.5858 24.5858C14.8047 25.3669 14.8047 26.6332 15.5858 27.4143L19.5858 31.4143C19.9853 31.8138 20.5353 32.0257 21.0996 31.9976C21.664 31.9694 22.1901 31.7039 22.5479 31.2665L31.5479 20.2665Z", className: "tw-text-status-positive", fill: "currentColor" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_457_52170)", children: jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("filter", { id: "filter0_b_457_52170", x: "-17", y: "-17", width: "82", height: "82", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [jsxRuntime.jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), jsxRuntime.jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsxRuntime.jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_52170" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_52170", result: "shape" })] }) })] }));
|
|
59718
59721
|
}
|
|
59719
59722
|
function SwapErrorIcon() {
|
|
59720
|
-
return (jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", className: "tw-text-grey-900", fill: "currentColor" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM31.0683 28.9289C27.163 25.0237 20.8314 25.0237 16.9261 28.9289C16.1451 29.71 16.1451 30.9763 16.9261 31.7574C17.7072 32.5384 18.9735 32.5384 19.7545 31.7574C22.0977 29.4142 25.8967 29.4142 28.2398 31.7574C29.0209 32.5384 30.2872 32.5384 31.0683 31.7574C31.8493 30.9763 31.8493 29.71 31.0683 28.9289ZM21 19C21 20.6569 19.8807 22 18.5 22C17.1193 22 16 20.6569 16 19C16 17.3431 17.1193 16 18.5 16C19.8807 16 21 17.3431 21 19ZM29.5 22C30.8807 22 32 20.6569 32 19C32 17.3431 30.8807 16 29.5 16C28.1193 16 27 17.3431 27 19C27 20.6569 28.1193 22 29.5 22Z", className: "tw-text-status-negative", fill: "currentColor" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_457_52502)", children: jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average",
|
|
59723
|
+
return (jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", className: "tw-text-grey-900", fill: "currentColor" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM31.0683 28.9289C27.163 25.0237 20.8314 25.0237 16.9261 28.9289C16.1451 29.71 16.1451 30.9763 16.9261 31.7574C17.7072 32.5384 18.9735 32.5384 19.7545 31.7574C22.0977 29.4142 25.8967 29.4142 28.2398 31.7574C29.0209 32.5384 30.2872 32.5384 31.0683 31.7574C31.8493 30.9763 31.8493 29.71 31.0683 28.9289ZM21 19C21 20.6569 19.8807 22 18.5 22C17.1193 22 16 20.6569 16 19C16 17.3431 17.1193 16 18.5 16C19.8807 16 21 17.3431 21 19ZM29.5 22C30.8807 22 32 20.6569 32 19C32 17.3431 30.8807 16 29.5 16C28.1193 16 27 17.3431 27 19C27 20.6569 28.1193 22 29.5 22Z", className: "tw-text-status-negative", fill: "currentColor" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_457_52502)", children: jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average", strokeOpacity: "0.33" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("filter", { id: "filter0_b_457_52502", x: "-17", y: "-17", width: "82", height: "82", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [jsxRuntime.jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), jsxRuntime.jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsxRuntime.jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_52502" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_52502", result: "shape" })] }) })] }));
|
|
59721
59724
|
}
|
|
59722
59725
|
function SwapWarningIcon() {
|
|
59723
|
-
return (jsxRuntime.jsxs("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_588_15630)", children: jsxRuntime.jsx("circle", { cx: "21", cy: "21", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsxRuntime.jsxs("g", { "clip-path": "url(#clip0_588_15630)", children: [jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M41 21C41 32.0457 32.0457 41 21 41C9.9543 41 1 32.0457 1 21C1 9.9543 9.9543 1 21 1C32.0457 1 41 9.9543 41 21ZM15.5 19C16.8807 19 18 17.6569 18 16C18 14.3431 16.8807 13 15.5 13C14.1193 13 13 14.3431 13 16C13 17.6569 14.1193 19 15.5 19ZM29 16C29 17.6569 27.8807 19 26.5 19C25.1193 19 24 17.6569 24 16C24 14.3431 25.1193 13 26.5 13C27.8807 13 29 14.3431 29 16ZM15 27C13.8954 27 13 27.8954 13 29C13 30.1046 13.8954 31 15 31H27C28.1046 31 29 30.1046 29 29C29 27.8954 28.1046 27 27 27H15Z", fill: "currentColor", className: "tw-text-status-partial" })] }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("filter", { id: "filter0_b_588_15630", x: "-20", y: "-20", width: "82", height: "82", filterUnits: "userSpaceOnUse",
|
|
59726
|
+
return (jsxRuntime.jsxs("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_588_15630)", children: jsxRuntime.jsx("circle", { cx: "21", cy: "21", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsxRuntime.jsxs("g", { "clip-path": "url(#clip0_588_15630)", children: [jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M41 21C41 32.0457 32.0457 41 21 41C9.9543 41 1 32.0457 1 21C1 9.9543 9.9543 1 21 1C32.0457 1 41 9.9543 41 21ZM15.5 19C16.8807 19 18 17.6569 18 16C18 14.3431 16.8807 13 15.5 13C14.1193 13 13 14.3431 13 16C13 17.6569 14.1193 19 15.5 19ZM29 16C29 17.6569 27.8807 19 26.5 19C25.1193 19 24 17.6569 24 16C24 14.3431 25.1193 13 26.5 13C27.8807 13 29 14.3431 29 16ZM15 27C13.8954 27 13 27.8954 13 29C13 30.1046 13.8954 31 15 31H27C28.1046 31 29 30.1046 29 29C29 27.8954 28.1046 27 27 27H15Z", fill: "currentColor", className: "tw-text-status-partial" })] }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("filter", { id: "filter0_b_588_15630", x: "-20", y: "-20", width: "82", height: "82", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [jsxRuntime.jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), jsxRuntime.jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsxRuntime.jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_588_15630" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_588_15630", result: "shape" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_588_15630", children: jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "white" }) })] })] }));
|
|
59724
59727
|
}
|
|
59725
59728
|
|
|
59726
59729
|
const swapProgressAnimations = {
|
|
@@ -59851,7 +59854,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
|
|
|
59851
59854
|
}, secondToken: {
|
|
59852
59855
|
bgColor: toToken.bgColor,
|
|
59853
59856
|
logoURI: toToken.logoUrl,
|
|
59854
|
-
} })) }), jsxRuntime.jsx(SwapProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxRuntime.jsxs("ul", { className: "tw-flex tw-h-[195px] tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-py-squid-s", children: [jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ArrowsSwapIcon, {}), label: "Swap", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, variant: "round", children: fromAmount }), to: jsxRuntime.jsx(IconLabel, { src: toToken.logoUrl, variant: "round", children: toAmount }) }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: toChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsxRuntime.jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsxRuntime.jsx(CaptionText, { children: timer })) : (jsxRuntime.jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsxRuntime.jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => stopTimer(), onTxStart: () => startTimer(), rawSteps: steps, onClose: handleRouteStepsClosed, onOpen: handleRouteStepsOpen, swapState: swapState, footerButton: footerButton }), !showSwapInfoSection ? (jsxRuntime.jsx(Button$1, { size: "lg", variant: "primary", label: "
|
|
59857
|
+
} })) }), jsxRuntime.jsx(SwapProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxRuntime.jsxs("ul", { className: "tw-flex tw-h-[195px] tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-py-squid-s", children: [jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ArrowsSwapIcon, {}), label: "Swap", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, variant: "round", children: fromAmount }), to: jsxRuntime.jsx(IconLabel, { src: toToken.logoUrl, variant: "round", children: toAmount }) }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: toChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsxRuntime.jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsxRuntime.jsx(CaptionText, { children: timer })) : (jsxRuntime.jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsxRuntime.jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => stopTimer(), onTxStart: () => startTimer(), rawSteps: steps, onClose: handleRouteStepsClosed, onOpen: handleRouteStepsOpen, swapState: swapState, footerButton: footerButton }), !showSwapInfoSection ? (jsxRuntime.jsx(Button$1, { size: "lg", variant: "primary", label: "Close", onClick: handleCollapseRouteSteps, className: "tw-min-h-button" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Button$1, { size: "lg", variant: "secondary", label: swapProgressButtonTexts[swapState], onClick: () => handleClose === null || handleClose === void 0 ? void 0 : handleClose(swapState), className: "tw-min-h-button" }), jsxRuntime.jsx(Button$1, { size: "lg", variant: "primary", label: "Complete", onClick: handleComplete, className: "tw-min-h-button" })] })) : (jsxRuntime.jsx(Button$1, { size: "lg", variant: "primary", label: swapProgressButtonTexts[swapState], onClick: () => handleClose === null || handleClose === void 0 ? void 0 : handleClose(swapState), className: "tw-min-h-button" }))] }));
|
|
59855
59858
|
}
|
|
59856
59859
|
const TrackTransactionView = React.forwardRef((props, ref) => {
|
|
59857
59860
|
const { swapState, rawSteps, onOpen, onClose, onTxStart, onTxEnd, footerButton, } = props;
|
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
import { AssetsButtonVariant } from '../../types/components';
|
|
2
2
|
interface AssetsButtonProps {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
3
|
+
token?: {
|
|
4
|
+
iconUrl: string;
|
|
5
|
+
symbol: string;
|
|
6
|
+
bgColor: string;
|
|
7
|
+
textColor: string;
|
|
8
|
+
};
|
|
9
|
+
chain?: {
|
|
10
|
+
iconUrl: string;
|
|
11
|
+
bgColor: string;
|
|
12
|
+
};
|
|
9
13
|
onClick?: () => void;
|
|
10
14
|
variant?: AssetsButtonVariant;
|
|
11
15
|
}
|
|
12
|
-
export declare function AssetsButton({
|
|
16
|
+
export declare function AssetsButton({ chain, token, onClick, variant, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
13
17
|
export {};
|
|
@@ -6,6 +6,7 @@ type Story = StoryObj<typeof meta>;
|
|
|
6
6
|
export declare const PrimaryVariantEmpty: Story;
|
|
7
7
|
export declare const AccentVariantEmpty: Story;
|
|
8
8
|
export declare const ChainOnly: Story;
|
|
9
|
+
export declare const TokenOnly: Story;
|
|
9
10
|
export declare const ChainAndTokenLightText: Story;
|
|
10
11
|
export declare const ChainAndTokenDarkText: Story;
|
|
11
12
|
export declare const LongTokenSymbol: Story;
|
package/dist/esm/index.js
CHANGED
|
@@ -3091,27 +3091,28 @@ const emptyChainIconTextClassNameMap = {
|
|
|
3091
3091
|
primary: 'tw-text-grey-100',
|
|
3092
3092
|
accent: 'group-data-[squid-theme-type=dark]:tw-text-grey-100 group-data-[squid-theme-type=light]:tw-text-grey-900',
|
|
3093
3093
|
};
|
|
3094
|
-
function AssetsButton({
|
|
3094
|
+
function AssetsButton({ chain, token, onClick, variant = 'primary', }) {
|
|
3095
|
+
var _a, _b;
|
|
3095
3096
|
const defaultBgColor = `var(${themeTypesKeys[themeKeyVariantMap[variant]].cssVariable})`;
|
|
3096
|
-
const chainBgColor =
|
|
3097
|
-
const tokenBgColor =
|
|
3097
|
+
const chainBgColor = (_a = (chain && chain.bgColor)) !== null && _a !== void 0 ? _a : defaultBgColor;
|
|
3098
|
+
const tokenBgColor = (_b = (chain && token && token.bgColor)) !== null && _b !== void 0 ? _b : defaultBgColor;
|
|
3098
3099
|
const bgGradient = useMemo(() => {
|
|
3099
|
-
if (!
|
|
3100
|
+
if (!chain) {
|
|
3100
3101
|
return `linear-gradient(to right, ${defaultBgColor}, ${defaultBgColor})`;
|
|
3101
3102
|
}
|
|
3102
|
-
if (!
|
|
3103
|
+
if (!token) {
|
|
3103
3104
|
return `linear-gradient(90deg, ${chainBgColor} 54.86%, ${tokenBgColor} 95.83%)`;
|
|
3104
3105
|
}
|
|
3105
3106
|
return `linear-gradient(to right, ${chainBgColor} 43.5%, ${tokenBgColor} 56.55%)`;
|
|
3106
|
-
}, [chainBgColor, tokenBgColor]);
|
|
3107
|
-
return (jsxs("button", { onClick: onClick, className: cn('tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center focus:tw-outline-none', buttonTextClassNameMap[variant]), 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',
|
|
3107
|
+
}, [chainBgColor, tokenBgColor, chain, token]);
|
|
3108
|
+
return (jsxs("button", { onClick: onClick, className: cn('tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center focus:tw-outline-none', buttonTextClassNameMap[variant]), 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', chain && token ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
|
|
3108
3109
|
backgroundImage: bgGradient,
|
|
3109
|
-
}, children: jsx("div", { className: clsx(imageClass), children:
|
|
3110
|
+
}, children: jsx("div", { className: clsx(imageClass), children: chain ? (jsx("img", { src: chain.iconUrl, alt: "", className: "tw-rounded-full" })) : (jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsx(PlusIcon, {}) })) }) }), chain && token ? (jsxs("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-cursor-pointer tw-overflow-hidden'), children: [jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
|
|
3110
3111
|
backgroundColor: tokenBgColor,
|
|
3111
|
-
} }), jsx("img", { src:
|
|
3112
|
+
} }), jsx("img", { src: token.iconUrl, alt: token.symbol, className: "tw-absolute tw-h-squid-xl tw-w-squid-xl tw-rounded-full" }), jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px] tw-border-b\n tw-border-t tw-border-material-light-thin" })] })) : null, 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', chain && token && 'tw-pl-[7px]'), style: {
|
|
3112
3113
|
backgroundColor: tokenBgColor,
|
|
3113
|
-
color:
|
|
3114
|
-
}, children: [jsx(BodyText, { size: "small", className: cn('tw-leading-[13px]', !
|
|
3114
|
+
color: token === null || token === void 0 ? void 0 : token.textColor,
|
|
3115
|
+
}, children: [jsx(BodyText, { size: "small", className: cn('tw-leading-[13px]', (!token || !chain) && 'tw-w-[135px]'), children: chain && token ? token.symbol : 'Select token' }), jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
|
|
3115
3116
|
}
|
|
3116
3117
|
|
|
3117
3118
|
const CSS_VARS = {
|
|
@@ -17504,13 +17505,13 @@ function ModalContentDivider() {
|
|
|
17504
17505
|
function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, }) {
|
|
17505
17506
|
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
|
|
17506
17507
|
? 'tw-px-squid-m'
|
|
17507
|
-
: '
|
|
17508
|
+
: 'tw-pl-squid-m tw-pr-squid-m mobile-lg:tw-pl-squid-l'), children: [displayBackButton ? (jsx(Button$1, { className: displayButtonShadows
|
|
17508
17509
|
? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
|
|
17509
17510
|
: 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 tw-gap-squid-xxs", children: actions === null || actions === void 0 ? void 0 : actions.map((action) => (jsx(Button$1, { size: "md", variant: "tertiary", label: typeof action.labelOrIcon === 'string'
|
|
17510
17511
|
? action.labelOrIcon
|
|
17511
17512
|
: undefined, className: "tw-text-grey-300", icon: typeof action.labelOrIcon === 'string'
|
|
17512
17513
|
? null
|
|
17513
|
-
: action.labelOrIcon, onClick: action.onClick }))) })] }), title ? (jsx("div", { className: "
|
|
17514
|
+
: action.labelOrIcon, onClick: action.onClick }, action.id))) })] }), title ? (jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-m tw-py-squid-xxs mobile-lg:tw-px-squid-l", children: jsx(HeadingText, { size: "small", children: title }) })) : null] }));
|
|
17514
17515
|
}
|
|
17515
17516
|
|
|
17516
17517
|
const createStoreImpl = (createState) => {
|
|
@@ -18101,7 +18102,7 @@ function LogoContainer({ children }) {
|
|
|
18101
18102
|
|
|
18102
18103
|
function SwapConfiguration({ amount, tokenPrice = 0, isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel = 'Connect wallet', balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive = true, isLoading = true, }) {
|
|
18103
18104
|
var _a, _b;
|
|
18104
|
-
return (jsxs("section", { className: "tw-relative tw-h-[211px] tw-max-h-[211px] tw-w-full tw-overflow-hidden tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-h-[205px] mobile-lg:tw-max-h-[205px] mobile-lg:tw-w-card-large", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", 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 tw-text-grey-600 hover:tw-bg-material-light-thin", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { size: "small", children: ":" }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : emptyAddressLabel }), jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, { onClick: onAssetsButtonClick,
|
|
18105
|
+
return (jsxs("section", { className: "tw-relative tw-h-[211px] tw-max-h-[211px] tw-w-full tw-overflow-hidden tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-h-[205px] mobile-lg:tw-max-h-[205px] mobile-lg:tw-w-card-large", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", 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 tw-text-grey-600 hover:tw-bg-material-light-thin", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { size: "small", children: ":" }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : emptyAddressLabel }), jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, { onClick: onAssetsButtonClick, chain: chain, token: token, variant: assetsButtonVariant }) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsx(NumericInput, { token: {
|
|
18105
18106
|
decimals: (_a = token === null || token === void 0 ? void 0 : token.decimals) !== null && _a !== void 0 ? _a : 18,
|
|
18106
18107
|
symbol: (_b = token === null || token === void 0 ? void 0 : token.symbol) !== null && _b !== void 0 ? _b : '',
|
|
18107
18108
|
price: tokenPrice,
|
|
@@ -24674,9 +24675,11 @@ function MainView() {
|
|
|
24674
24675
|
return (jsxs(ProductCard, { children: [jsx(NavigationBar, { title: "Swap", actions: [
|
|
24675
24676
|
{
|
|
24676
24677
|
labelOrIcon: jsx(ClockOutlineIcon, {}),
|
|
24678
|
+
id: 'history',
|
|
24677
24679
|
},
|
|
24678
24680
|
{
|
|
24679
24681
|
labelOrIcon: jsx(SettingsGearIcon, {}),
|
|
24682
|
+
id: 'settings',
|
|
24680
24683
|
},
|
|
24681
24684
|
] }), jsx(SwapConfiguration, { direction: "from", chain: {
|
|
24682
24685
|
iconUrl: 'https://raw.githubusercontent.com/0xsquid/assets/main/images/tokens/blast.svg',
|
|
@@ -59694,13 +59697,13 @@ function XSocial({ className, size = '24', }) {
|
|
|
59694
59697
|
}
|
|
59695
59698
|
|
|
59696
59699
|
function SwapSuccessIcon() {
|
|
59697
|
-
return (jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", fill: "currentColor", className: "tw-text-grey-900" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4ZM31.5479 20.2665C32.2474 19.4116 32.1214 18.1516 31.2665 17.4521C30.4116 16.7527 29.1515 16.8787 28.4521 17.7336L20.8515 27.0232L18.4142 24.5858C17.6332 23.8048 16.3668 23.8048 15.5858 24.5858C14.8047 25.3669 14.8047 26.6332 15.5858 27.4143L19.5858 31.4143C19.9853 31.8138 20.5353 32.0257 21.0996 31.9976C21.664 31.9694 22.1901 31.7039 22.5479 31.2665L31.5479 20.2665Z", className: "tw-text-status-positive", fill: "currentColor" }), jsx("g", { filter: "url(#filter0_b_457_52170)", children: jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsx("defs", { children: jsxs("filter", { id: "filter0_b_457_52170", x: "-17", y: "-17", width: "82", height: "82", filterUnits: "userSpaceOnUse",
|
|
59700
|
+
return (jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", fill: "currentColor", className: "tw-text-grey-900" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4ZM31.5479 20.2665C32.2474 19.4116 32.1214 18.1516 31.2665 17.4521C30.4116 16.7527 29.1515 16.8787 28.4521 17.7336L20.8515 27.0232L18.4142 24.5858C17.6332 23.8048 16.3668 23.8048 15.5858 24.5858C14.8047 25.3669 14.8047 26.6332 15.5858 27.4143L19.5858 31.4143C19.9853 31.8138 20.5353 32.0257 21.0996 31.9976C21.664 31.9694 22.1901 31.7039 22.5479 31.2665L31.5479 20.2665Z", className: "tw-text-status-positive", fill: "currentColor" }), jsx("g", { filter: "url(#filter0_b_457_52170)", children: jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsx("defs", { children: jsxs("filter", { id: "filter0_b_457_52170", x: "-17", y: "-17", width: "82", height: "82", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_52170" }), jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_52170", result: "shape" })] }) })] }));
|
|
59698
59701
|
}
|
|
59699
59702
|
function SwapErrorIcon() {
|
|
59700
|
-
return (jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", className: "tw-text-grey-900", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM31.0683 28.9289C27.163 25.0237 20.8314 25.0237 16.9261 28.9289C16.1451 29.71 16.1451 30.9763 16.9261 31.7574C17.7072 32.5384 18.9735 32.5384 19.7545 31.7574C22.0977 29.4142 25.8967 29.4142 28.2398 31.7574C29.0209 32.5384 30.2872 32.5384 31.0683 31.7574C31.8493 30.9763 31.8493 29.71 31.0683 28.9289ZM21 19C21 20.6569 19.8807 22 18.5 22C17.1193 22 16 20.6569 16 19C16 17.3431 17.1193 16 18.5 16C19.8807 16 21 17.3431 21 19ZM29.5 22C30.8807 22 32 20.6569 32 19C32 17.3431 30.8807 16 29.5 16C28.1193 16 27 17.3431 27 19C27 20.6569 28.1193 22 29.5 22Z", className: "tw-text-status-negative", fill: "currentColor" }), jsx("g", { filter: "url(#filter0_b_457_52502)", children: jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average",
|
|
59703
|
+
return (jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", className: "tw-text-grey-900", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM31.0683 28.9289C27.163 25.0237 20.8314 25.0237 16.9261 28.9289C16.1451 29.71 16.1451 30.9763 16.9261 31.7574C17.7072 32.5384 18.9735 32.5384 19.7545 31.7574C22.0977 29.4142 25.8967 29.4142 28.2398 31.7574C29.0209 32.5384 30.2872 32.5384 31.0683 31.7574C31.8493 30.9763 31.8493 29.71 31.0683 28.9289ZM21 19C21 20.6569 19.8807 22 18.5 22C17.1193 22 16 20.6569 16 19C16 17.3431 17.1193 16 18.5 16C19.8807 16 21 17.3431 21 19ZM29.5 22C30.8807 22 32 20.6569 32 19C32 17.3431 30.8807 16 29.5 16C28.1193 16 27 17.3431 27 19C27 20.6569 28.1193 22 29.5 22Z", className: "tw-text-status-negative", fill: "currentColor" }), jsx("g", { filter: "url(#filter0_b_457_52502)", children: jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average", strokeOpacity: "0.33" }) }), jsx("defs", { children: jsxs("filter", { id: "filter0_b_457_52502", x: "-17", y: "-17", width: "82", height: "82", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_52502" }), jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_52502", result: "shape" })] }) })] }));
|
|
59701
59704
|
}
|
|
59702
59705
|
function SwapWarningIcon() {
|
|
59703
|
-
return (jsxs("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsx("g", { filter: "url(#filter0_b_588_15630)", children: jsx("circle", { cx: "21", cy: "21", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsxs("g", { "clip-path": "url(#clip0_588_15630)", children: [jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M41 21C41 32.0457 32.0457 41 21 41C9.9543 41 1 32.0457 1 21C1 9.9543 9.9543 1 21 1C32.0457 1 41 9.9543 41 21ZM15.5 19C16.8807 19 18 17.6569 18 16C18 14.3431 16.8807 13 15.5 13C14.1193 13 13 14.3431 13 16C13 17.6569 14.1193 19 15.5 19ZM29 16C29 17.6569 27.8807 19 26.5 19C25.1193 19 24 17.6569 24 16C24 14.3431 25.1193 13 26.5 13C27.8807 13 29 14.3431 29 16ZM15 27C13.8954 27 13 27.8954 13 29C13 30.1046 13.8954 31 15 31H27C28.1046 31 29 30.1046 29 29C29 27.8954 28.1046 27 27 27H15Z", fill: "currentColor", className: "tw-text-status-partial" })] }), jsxs("defs", { children: [jsxs("filter", { id: "filter0_b_588_15630", x: "-20", y: "-20", width: "82", height: "82", filterUnits: "userSpaceOnUse",
|
|
59706
|
+
return (jsxs("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsx("g", { filter: "url(#filter0_b_588_15630)", children: jsx("circle", { cx: "21", cy: "21", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsxs("g", { "clip-path": "url(#clip0_588_15630)", children: [jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M41 21C41 32.0457 32.0457 41 21 41C9.9543 41 1 32.0457 1 21C1 9.9543 9.9543 1 21 1C32.0457 1 41 9.9543 41 21ZM15.5 19C16.8807 19 18 17.6569 18 16C18 14.3431 16.8807 13 15.5 13C14.1193 13 13 14.3431 13 16C13 17.6569 14.1193 19 15.5 19ZM29 16C29 17.6569 27.8807 19 26.5 19C25.1193 19 24 17.6569 24 16C24 14.3431 25.1193 13 26.5 13C27.8807 13 29 14.3431 29 16ZM15 27C13.8954 27 13 27.8954 13 29C13 30.1046 13.8954 31 15 31H27C28.1046 31 29 30.1046 29 29C29 27.8954 28.1046 27 27 27H15Z", fill: "currentColor", className: "tw-text-status-partial" })] }), jsxs("defs", { children: [jsxs("filter", { id: "filter0_b_588_15630", x: "-20", y: "-20", width: "82", height: "82", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_588_15630" }), jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_588_15630", result: "shape" })] }), jsx("clipPath", { id: "clip0_588_15630", children: jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "white" }) })] })] }));
|
|
59704
59707
|
}
|
|
59705
59708
|
|
|
59706
59709
|
const swapProgressAnimations = {
|
|
@@ -59831,7 +59834,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
|
|
|
59831
59834
|
}, secondToken: {
|
|
59832
59835
|
bgColor: toToken.bgColor,
|
|
59833
59836
|
logoURI: toToken.logoUrl,
|
|
59834
|
-
} })) }), jsx(SwapProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxs("ul", { className: "tw-flex tw-h-[195px] tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-py-squid-s", children: [jsx(PropertyListItem, { icon: jsx(ArrowsSwapIcon, {}), label: "Swap", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromToken.logoUrl, variant: "round", children: fromAmount }), to: jsx(IconLabel, { src: toToken.logoUrl, variant: "round", children: toAmount }) }) }), jsx(PropertyListItem, { icon: jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: jsx(Transfer, { from: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: fromChain.logoUrl }), jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: toChain.logoUrl }), jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsx(PropertyListItem, { icon: jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsx(PropertyListItem, { icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsx(CaptionText, { children: timer })) : (jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => stopTimer(), onTxStart: () => startTimer(), rawSteps: steps, onClose: handleRouteStepsClosed, onOpen: handleRouteStepsOpen, swapState: swapState, footerButton: footerButton }), !showSwapInfoSection ? (jsx(Button$1, { size: "lg", variant: "primary", label: "
|
|
59837
|
+
} })) }), jsx(SwapProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxs("ul", { className: "tw-flex tw-h-[195px] tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-py-squid-s", children: [jsx(PropertyListItem, { icon: jsx(ArrowsSwapIcon, {}), label: "Swap", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromToken.logoUrl, variant: "round", children: fromAmount }), to: jsx(IconLabel, { src: toToken.logoUrl, variant: "round", children: toAmount }) }) }), jsx(PropertyListItem, { icon: jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: jsx(Transfer, { from: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: fromChain.logoUrl }), jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: toChain.logoUrl }), jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsx(PropertyListItem, { icon: jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsx(PropertyListItem, { icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsx(CaptionText, { children: timer })) : (jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => stopTimer(), onTxStart: () => startTimer(), rawSteps: steps, onClose: handleRouteStepsClosed, onOpen: handleRouteStepsOpen, swapState: swapState, footerButton: footerButton }), !showSwapInfoSection ? (jsx(Button$1, { size: "lg", variant: "primary", label: "Close", onClick: handleCollapseRouteSteps, className: "tw-min-h-button" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsxs("div", { className: "tw-flex tw-w-full tw-items-center tw-gap-squid-xxs", children: [jsx(Button$1, { size: "lg", variant: "secondary", label: swapProgressButtonTexts[swapState], onClick: () => handleClose === null || handleClose === void 0 ? void 0 : handleClose(swapState), className: "tw-min-h-button" }), jsx(Button$1, { size: "lg", variant: "primary", label: "Complete", onClick: handleComplete, className: "tw-min-h-button" })] })) : (jsx(Button$1, { size: "lg", variant: "primary", label: swapProgressButtonTexts[swapState], onClick: () => handleClose === null || handleClose === void 0 ? void 0 : handleClose(swapState), className: "tw-min-h-button" }))] }));
|
|
59835
59838
|
}
|
|
59836
59839
|
const TrackTransactionView = forwardRef((props, ref) => {
|
|
59837
59840
|
const { swapState, rawSteps, onOpen, onClose, onTxStart, onTxEnd, footerButton, } = props;
|
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
import { AssetsButtonVariant } from '../../types/components';
|
|
2
2
|
interface AssetsButtonProps {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
3
|
+
token?: {
|
|
4
|
+
iconUrl: string;
|
|
5
|
+
symbol: string;
|
|
6
|
+
bgColor: string;
|
|
7
|
+
textColor: string;
|
|
8
|
+
};
|
|
9
|
+
chain?: {
|
|
10
|
+
iconUrl: string;
|
|
11
|
+
bgColor: string;
|
|
12
|
+
};
|
|
9
13
|
onClick?: () => void;
|
|
10
14
|
variant?: AssetsButtonVariant;
|
|
11
15
|
}
|
|
12
|
-
export declare function AssetsButton({
|
|
16
|
+
export declare function AssetsButton({ chain, token, onClick, variant, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
13
17
|
export {};
|
|
@@ -6,6 +6,7 @@ type Story = StoryObj<typeof meta>;
|
|
|
6
6
|
export declare const PrimaryVariantEmpty: Story;
|
|
7
7
|
export declare const AccentVariantEmpty: Story;
|
|
8
8
|
export declare const ChainOnly: Story;
|
|
9
|
+
export declare const TokenOnly: Story;
|
|
9
10
|
export declare const ChainAndTokenLightText: Story;
|
|
10
11
|
export declare const ChainAndTokenDarkText: Story;
|
|
11
12
|
export declare const LongTokenSymbol: Story;
|
package/dist/index.d.ts
CHANGED
|
@@ -131,16 +131,20 @@ interface ArrowButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
|
131
131
|
declare function ArrowButton({ label, disabled, ...props }: ArrowButtonProps): react_jsx_runtime.JSX.Element;
|
|
132
132
|
|
|
133
133
|
interface AssetsButtonProps {
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
134
|
+
token?: {
|
|
135
|
+
iconUrl: string;
|
|
136
|
+
symbol: string;
|
|
137
|
+
bgColor: string;
|
|
138
|
+
textColor: string;
|
|
139
|
+
};
|
|
140
|
+
chain?: {
|
|
141
|
+
iconUrl: string;
|
|
142
|
+
bgColor: string;
|
|
143
|
+
};
|
|
140
144
|
onClick?: () => void;
|
|
141
145
|
variant?: AssetsButtonVariant;
|
|
142
146
|
}
|
|
143
|
-
declare function AssetsButton({
|
|
147
|
+
declare function AssetsButton({ chain, token, onClick, variant, }: AssetsButtonProps): react_jsx_runtime.JSX.Element;
|
|
144
148
|
|
|
145
149
|
interface BoostButtonProps {
|
|
146
150
|
boostMode: BoostMode;
|
|
@@ -1357,6 +1361,7 @@ declare function ModalContentDivider(): react_jsx_runtime.JSX.Element;
|
|
|
1357
1361
|
type ActionButton = {
|
|
1358
1362
|
labelOrIcon: string | React.ReactNode;
|
|
1359
1363
|
onClick?: () => void;
|
|
1364
|
+
id: React.Key;
|
|
1360
1365
|
};
|
|
1361
1366
|
interface NavigationBarProps {
|
|
1362
1367
|
title?: string;
|