@0xsquid/ui 0.10.0 → 0.10.2
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 +18 -17
- package/dist/cjs/types/components/layout/SwapConfiguration.d.ts +2 -1
- package/dist/cjs/types/stories/controls/Tooltip.stories.d.ts +1 -0
- package/dist/esm/index.js +18 -17
- package/dist/esm/types/components/layout/SwapConfiguration.d.ts +2 -1
- package/dist/esm/types/stories/controls/Tooltip.stories.d.ts +1 -0
- package/dist/index.css +38 -29
- package/dist/index.d.ts +2 -1
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -2757,12 +2757,12 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
|
|
|
2757
2757
|
}, [chainBgColor, tokenBgColor]);
|
|
2758
2758
|
return (jsxRuntime.jsxs("button", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center tw-text-grey-100 focus:tw-outline-none", children: [jsxRuntime.jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-cursor-pointer tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsxRuntime.jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-cursor-pointer tw-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
|
|
2759
2759
|
backgroundImage: bgGradient,
|
|
2760
|
-
}, children: jsxRuntime.jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsxRuntime.jsx("img", { src: chainImageUrl, alt: "", className: "tw-rounded-full" })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsxRuntime.
|
|
2761
|
-
|
|
2762
|
-
|
|
2760
|
+
}, children: jsxRuntime.jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsxRuntime.jsx("img", { src: chainImageUrl, alt: "", className: "tw-rounded-full" })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsxRuntime.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: {
|
|
2761
|
+
backgroundColor: tokenBgColor,
|
|
2762
|
+
} }), jsxRuntime.jsx("img", { src: tokenImageUrl, alt: tokenSymbol, className: "tw-absolute tw-h-squid-xl tw-w-squid-xl tw-rounded-full" }), jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px] tw-border-b\n tw-border-t tw-border-material-light-thin" })] })) : null, jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', tokenImageUrl && 'tw-pl-[7px]'), style: {
|
|
2763
2763
|
backgroundColor: tokenBgColor,
|
|
2764
2764
|
color: tokenTextColor,
|
|
2765
|
-
}, children: [jsxRuntime.jsx(BodyText, { size: "small", className:
|
|
2765
|
+
}, children: [jsxRuntime.jsx(BodyText, { size: "small", className: cn('tw-leading-[13px]', !tokenImageUrl && 'tw-w-[135px]'), children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
|
|
2766
2766
|
}
|
|
2767
2767
|
|
|
2768
2768
|
const CSS_VARS = {
|
|
@@ -2995,7 +2995,7 @@ function Tooltip({ children, tooltipContent, tooltipWidth = 'container', thresho
|
|
|
2995
2995
|
// general styles
|
|
2996
2996
|
'tw-absolute tw-z-40 tw-bottom-full tw-left-1/2 -tw-translate-x-1/2',
|
|
2997
2997
|
// visibility styles. Display only on hover
|
|
2998
|
-
'tw-
|
|
2998
|
+
'tw-animate-hide peer-hover:tw-animate-display-delayed hover:tw-animate-display-delayed', tooltipWidthClassMap[tooltipWidth], tooltipThresholdClassMap[threshold], tooltipClassName), children: tooltipContent })) : null] }));
|
|
2999
2999
|
}
|
|
3000
3000
|
|
|
3001
3001
|
const animationDuration = '500ms';
|
|
@@ -3034,9 +3034,10 @@ function generateMarkerLines(count) {
|
|
|
3034
3034
|
return allShadows.join(', ');
|
|
3035
3035
|
}
|
|
3036
3036
|
|
|
3037
|
+
const baseButtonClassName = 'tw-flex tw-items-center tw-gap-squid-xxs tw-justify-center tw-border';
|
|
3037
3038
|
const buttonSizeClassMap = {
|
|
3038
|
-
md: 'tw-
|
|
3039
|
-
lg: 'tw-
|
|
3039
|
+
md: 'tw-px-squid-xs tw-py-squid-xxs tw-rounded-squid-m tw-min-w-[60px] tw-h-squid-xl',
|
|
3040
|
+
lg: 'tw-rounded-squid-xxl tw-p-1 tw-h-button tw-w-full',
|
|
3040
3041
|
};
|
|
3041
3042
|
const buttonVariantClassMap = {
|
|
3042
3043
|
primary: 'tw-bg-royal-500 group-data-[squid-theme-type=light]:tw-text-grey-900 group-data-[squid-theme-type=dark]:tw-text-grey-100 tw-border-material-light-thin',
|
|
@@ -3045,7 +3046,7 @@ const buttonVariantClassMap = {
|
|
|
3045
3046
|
};
|
|
3046
3047
|
// right now all variants have the same disabled styles
|
|
3047
3048
|
// in the future, we can add more disabled styles for different variants
|
|
3048
|
-
const buttonDisabledClass = 'tw-bg-grey-800 tw-text-grey-600 tw-cursor-not-allowed';
|
|
3049
|
+
const buttonDisabledClass = '!tw-bg-grey-800 !tw-text-grey-600 tw-cursor-not-allowed';
|
|
3049
3050
|
function Button(_a) {
|
|
3050
3051
|
var { label, disabled, size, variant, icon, link } = _a, props = __rest(_a, ["label", "disabled", "size", "variant", "icon", "link"]);
|
|
3051
3052
|
const children = (jsxRuntime.jsx(jsxRuntime.Fragment, { children: size === 'lg' ? (jsxRuntime.jsx("span", { className: "tw-px-squid-m", children: jsxRuntime.jsx(BodyText, { size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
|
|
@@ -3055,7 +3056,7 @@ function Button(_a) {
|
|
|
3055
3056
|
icon) : (
|
|
3056
3057
|
// icon and label
|
|
3057
3058
|
jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null }));
|
|
3058
|
-
const className = cn(buttonSizeClassMap[size], buttonVariantClassMap[variant],
|
|
3059
|
+
const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant],
|
|
3059
3060
|
// disabled styles
|
|
3060
3061
|
disabled && buttonDisabledClass,
|
|
3061
3062
|
// custom classes from props
|
|
@@ -3230,7 +3231,7 @@ function ListItem(_a) {
|
|
|
3230
3231
|
const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
|
|
3231
3232
|
return (jsxRuntime.jsx("li", { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxRuntime.jsxs("button", Object.assign({}, props, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && 'tw-bg-material-light-thin'), children: [size === 'large' ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs',
|
|
3232
3233
|
// 'large' variant has extra padding
|
|
3233
|
-
size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsxRuntime.jsx(BodyText, { size: "small", className: "tw-max-w-full tw-truncate !tw-leading-[
|
|
3234
|
+
size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsxRuntime.jsx(BodyText, { size: "small", className: "tw-max-w-full tw-truncate !tw-leading-[17px]", children: itemTitle })) : (itemTitle), size === 'large' &&
|
|
3234
3235
|
((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsxRuntime.jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-xs tw-max-w-full tw-truncate !tw-leading-[11px] tw-text-grey-500", children: subtitle })) : null)] }), showDetail && (jsxRuntime.jsxs("button", { onClick: (event) => {
|
|
3235
3236
|
// prevent click event from bubbling up to parent
|
|
3236
3237
|
event.stopPropagation();
|
|
@@ -3405,17 +3406,17 @@ function SwapInputsIcon() {
|
|
|
3405
3406
|
return (jsxRuntime.jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_40_7936)", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM8.38268 4.57612C8.75636 4.7309 9 5.09554 9 5.5V15.5C9 16.0523 8.55228 16.5 8 16.5C7.44772 16.5 7 16.0523 7 15.5V7.91421L5.70711 9.20711C5.31658 9.59763 4.68342 9.59763 4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289L7.29289 4.79289C7.57889 4.5069 8.00901 4.42134 8.38268 4.57612ZM11 15.5C11 15.9045 11.2436 16.2691 11.6173 16.4239C11.991 16.5787 12.4211 16.4931 12.7071 16.2071L15.7071 13.2071C16.0976 12.8166 16.0976 12.1834 15.7071 11.7929C15.3166 11.4024 14.6834 11.4024 14.2929 11.7929L13 13.0858V5.5C13 4.94771 12.5523 4.5 12 4.5C11.4477 4.5 11 4.94771 11 5.5V15.5Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_40_7936", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
|
|
3406
3407
|
}
|
|
3407
3408
|
|
|
3408
|
-
|
|
3409
|
+
const interactiveChipClassName = 'hover:tw-bg-material-light-thin';
|
|
3410
|
+
function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, onSwapAmountButtonClick, address, error, criticalPriceImpactPercentage = 5, emptyAddressLabel = 'Connect wallet', }) {
|
|
3409
3411
|
var _a;
|
|
3410
3412
|
const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
|
|
3411
3413
|
? 'tw-text-status-negative'
|
|
3412
3414
|
: 'tw-text-grey-300';
|
|
3413
|
-
const
|
|
3414
|
-
|
|
3415
|
-
const
|
|
3416
|
-
|
|
3417
|
-
|
|
3418
|
-
: 'tw-pointer-events-none'), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balance }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
|
|
3415
|
+
const isBalanceChipInteractive = !!onBalanceButtonClick;
|
|
3416
|
+
const BalanceChipTag = isBalanceChipInteractive ? 'button' : 'div';
|
|
3417
|
+
const isSwapAmountChipInteractive = !!onSwapAmountButtonClick;
|
|
3418
|
+
const SwapAmountChipTag = isSwapAmountChipInteractive ? 'button' : 'div';
|
|
3419
|
+
return (jsxRuntime.jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxRuntime.jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600 hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : emptyAddressLabel }), jsxRuntime.jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), direction === 'from' ? (jsxRuntime.jsx(NumericInput, { forcedUpdateValue: forcedAmount, initialValue: amount, onParsedValueChanged: (value) => onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value) })) : (jsxRuntime.jsx("div", { className: "tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsxRuntime.jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsxRuntime.jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxRuntime.jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500", children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsxs(SwapAmountChipTag, { onClick: onSwapAmountButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isSwapAmountChipInteractive && interactiveChipClassName), children: [jsxRuntime.jsx(SwapInputsIcon, {}), jsxRuntime.jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxRuntime.jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, {}), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxRuntime.jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isBalanceChipInteractive && interactiveChipClassName), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balance }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
|
|
3419
3420
|
}
|
|
3420
3421
|
|
|
3421
3422
|
function SwapProgressViewHeader({ title, description, }) {
|
|
@@ -27,6 +27,7 @@ interface SwapConfigurationProps {
|
|
|
27
27
|
};
|
|
28
28
|
criticalPriceImpactPercentage?: number;
|
|
29
29
|
emptyAddressLabel?: string;
|
|
30
|
+
onSwapAmountButtonClick?: () => void;
|
|
30
31
|
}
|
|
31
|
-
export declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage, emptyAddressLabel, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
|
|
32
|
+
export declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, onSwapAmountButtonClick, address, error, criticalPriceImpactPercentage, emptyAddressLabel, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
|
|
32
33
|
export {};
|
package/dist/esm/index.js
CHANGED
|
@@ -2755,12 +2755,12 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
|
|
|
2755
2755
|
}, [chainBgColor, tokenBgColor]);
|
|
2756
2756
|
return (jsxs("button", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center tw-text-grey-100 focus:tw-outline-none", children: [jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-cursor-pointer tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-cursor-pointer tw-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
|
|
2757
2757
|
backgroundImage: bgGradient,
|
|
2758
|
-
}, children: jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsx("img", { src: chainImageUrl, alt: "", className: "tw-rounded-full" })) : (jsx(Fragment, { children: jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (
|
|
2759
|
-
|
|
2760
|
-
|
|
2758
|
+
}, children: jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsx("img", { src: chainImageUrl, alt: "", className: "tw-rounded-full" })) : (jsx(Fragment, { children: jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (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: {
|
|
2759
|
+
backgroundColor: tokenBgColor,
|
|
2760
|
+
} }), jsx("img", { src: tokenImageUrl, alt: tokenSymbol, 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', tokenImageUrl && 'tw-pl-[7px]'), style: {
|
|
2761
2761
|
backgroundColor: tokenBgColor,
|
|
2762
2762
|
color: tokenTextColor,
|
|
2763
|
-
}, children: [jsx(BodyText, { size: "small", className:
|
|
2763
|
+
}, children: [jsx(BodyText, { size: "small", className: cn('tw-leading-[13px]', !tokenImageUrl && 'tw-w-[135px]'), children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
|
|
2764
2764
|
}
|
|
2765
2765
|
|
|
2766
2766
|
const CSS_VARS = {
|
|
@@ -2993,7 +2993,7 @@ function Tooltip({ children, tooltipContent, tooltipWidth = 'container', thresho
|
|
|
2993
2993
|
// general styles
|
|
2994
2994
|
'tw-absolute tw-z-40 tw-bottom-full tw-left-1/2 -tw-translate-x-1/2',
|
|
2995
2995
|
// visibility styles. Display only on hover
|
|
2996
|
-
'tw-
|
|
2996
|
+
'tw-animate-hide peer-hover:tw-animate-display-delayed hover:tw-animate-display-delayed', tooltipWidthClassMap[tooltipWidth], tooltipThresholdClassMap[threshold], tooltipClassName), children: tooltipContent })) : null] }));
|
|
2997
2997
|
}
|
|
2998
2998
|
|
|
2999
2999
|
const animationDuration = '500ms';
|
|
@@ -3032,9 +3032,10 @@ function generateMarkerLines(count) {
|
|
|
3032
3032
|
return allShadows.join(', ');
|
|
3033
3033
|
}
|
|
3034
3034
|
|
|
3035
|
+
const baseButtonClassName = 'tw-flex tw-items-center tw-gap-squid-xxs tw-justify-center tw-border';
|
|
3035
3036
|
const buttonSizeClassMap = {
|
|
3036
|
-
md: 'tw-
|
|
3037
|
-
lg: 'tw-
|
|
3037
|
+
md: 'tw-px-squid-xs tw-py-squid-xxs tw-rounded-squid-m tw-min-w-[60px] tw-h-squid-xl',
|
|
3038
|
+
lg: 'tw-rounded-squid-xxl tw-p-1 tw-h-button tw-w-full',
|
|
3038
3039
|
};
|
|
3039
3040
|
const buttonVariantClassMap = {
|
|
3040
3041
|
primary: 'tw-bg-royal-500 group-data-[squid-theme-type=light]:tw-text-grey-900 group-data-[squid-theme-type=dark]:tw-text-grey-100 tw-border-material-light-thin',
|
|
@@ -3043,7 +3044,7 @@ const buttonVariantClassMap = {
|
|
|
3043
3044
|
};
|
|
3044
3045
|
// right now all variants have the same disabled styles
|
|
3045
3046
|
// in the future, we can add more disabled styles for different variants
|
|
3046
|
-
const buttonDisabledClass = 'tw-bg-grey-800 tw-text-grey-600 tw-cursor-not-allowed';
|
|
3047
|
+
const buttonDisabledClass = '!tw-bg-grey-800 !tw-text-grey-600 tw-cursor-not-allowed';
|
|
3047
3048
|
function Button(_a) {
|
|
3048
3049
|
var { label, disabled, size, variant, icon, link } = _a, props = __rest(_a, ["label", "disabled", "size", "variant", "icon", "link"]);
|
|
3049
3050
|
const children = (jsx(Fragment, { children: size === 'lg' ? (jsx("span", { className: "tw-px-squid-m", children: jsx(BodyText, { size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
|
|
@@ -3053,7 +3054,7 @@ function Button(_a) {
|
|
|
3053
3054
|
icon) : (
|
|
3054
3055
|
// icon and label
|
|
3055
3056
|
jsxs(Fragment, { children: [icon, jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null }));
|
|
3056
|
-
const className = cn(buttonSizeClassMap[size], buttonVariantClassMap[variant],
|
|
3057
|
+
const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant],
|
|
3057
3058
|
// disabled styles
|
|
3058
3059
|
disabled && buttonDisabledClass,
|
|
3059
3060
|
// custom classes from props
|
|
@@ -3228,7 +3229,7 @@ function ListItem(_a) {
|
|
|
3228
3229
|
const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
|
|
3229
3230
|
return (jsx("li", { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxs("button", Object.assign({}, props, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && 'tw-bg-material-light-thin'), children: [size === 'large' ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs',
|
|
3230
3231
|
// 'large' variant has extra padding
|
|
3231
|
-
size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsx(BodyText, { size: "small", className: "tw-max-w-full tw-truncate !tw-leading-[
|
|
3232
|
+
size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsx(BodyText, { size: "small", className: "tw-max-w-full tw-truncate !tw-leading-[17px]", children: itemTitle })) : (itemTitle), size === 'large' &&
|
|
3232
3233
|
((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsx(CaptionText, { className: "tw-h-squid-xs tw-max-w-full tw-truncate !tw-leading-[11px] tw-text-grey-500", children: subtitle })) : null)] }), showDetail && (jsxs("button", { onClick: (event) => {
|
|
3233
3234
|
// prevent click event from bubbling up to parent
|
|
3234
3235
|
event.stopPropagation();
|
|
@@ -3403,17 +3404,17 @@ function SwapInputsIcon() {
|
|
|
3403
3404
|
return (jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { "clip-path": "url(#clip0_40_7936)", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM8.38268 4.57612C8.75636 4.7309 9 5.09554 9 5.5V15.5C9 16.0523 8.55228 16.5 8 16.5C7.44772 16.5 7 16.0523 7 15.5V7.91421L5.70711 9.20711C5.31658 9.59763 4.68342 9.59763 4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289L7.29289 4.79289C7.57889 4.5069 8.00901 4.42134 8.38268 4.57612ZM11 15.5C11 15.9045 11.2436 16.2691 11.6173 16.4239C11.991 16.5787 12.4211 16.4931 12.7071 16.2071L15.7071 13.2071C16.0976 12.8166 16.0976 12.1834 15.7071 11.7929C15.3166 11.4024 14.6834 11.4024 14.2929 11.7929L13 13.0858V5.5C13 4.94771 12.5523 4.5 12 4.5C11.4477 4.5 11 4.94771 11 5.5V15.5Z", fill: "currentColor" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_40_7936", children: jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
|
|
3404
3405
|
}
|
|
3405
3406
|
|
|
3406
|
-
|
|
3407
|
+
const interactiveChipClassName = 'hover:tw-bg-material-light-thin';
|
|
3408
|
+
function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, onSwapAmountButtonClick, address, error, criticalPriceImpactPercentage = 5, emptyAddressLabel = 'Connect wallet', }) {
|
|
3407
3409
|
var _a;
|
|
3408
3410
|
const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
|
|
3409
3411
|
? 'tw-text-status-negative'
|
|
3410
3412
|
: 'tw-text-grey-300';
|
|
3411
|
-
const
|
|
3412
|
-
|
|
3413
|
-
const
|
|
3414
|
-
|
|
3415
|
-
|
|
3416
|
-
: 'tw-pointer-events-none'), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
|
|
3413
|
+
const isBalanceChipInteractive = !!onBalanceButtonClick;
|
|
3414
|
+
const BalanceChipTag = isBalanceChipInteractive ? 'button' : 'div';
|
|
3415
|
+
const isSwapAmountChipInteractive = !!onSwapAmountButtonClick;
|
|
3416
|
+
const SwapAmountChipTag = isSwapAmountChipInteractive ? 'button' : 'div';
|
|
3417
|
+
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 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-l", children: jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), direction === 'from' ? (jsx(NumericInput, { forcedUpdateValue: forcedAmount, initialValue: amount, onParsedValueChanged: (value) => onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value) })) : (jsx("div", { className: "tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500", children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsxs(SwapAmountChipTag, { onClick: onSwapAmountButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isSwapAmountChipInteractive && interactiveChipClassName), children: [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(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isBalanceChipInteractive && interactiveChipClassName), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
|
|
3417
3418
|
}
|
|
3418
3419
|
|
|
3419
3420
|
function SwapProgressViewHeader({ title, description, }) {
|
|
@@ -27,6 +27,7 @@ interface SwapConfigurationProps {
|
|
|
27
27
|
};
|
|
28
28
|
criticalPriceImpactPercentage?: number;
|
|
29
29
|
emptyAddressLabel?: string;
|
|
30
|
+
onSwapAmountButtonClick?: () => void;
|
|
30
31
|
}
|
|
31
|
-
export declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage, emptyAddressLabel, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
|
|
32
|
+
export declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, onSwapAmountButtonClick, address, error, criticalPriceImpactPercentage, emptyAddressLabel, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
|
|
32
33
|
export {};
|
package/dist/index.css
CHANGED
|
@@ -1096,6 +1096,10 @@ video {
|
|
|
1096
1096
|
width: 1.5px;
|
|
1097
1097
|
}
|
|
1098
1098
|
|
|
1099
|
+
.tw-w-\[135px\] {
|
|
1100
|
+
width: 135px;
|
|
1101
|
+
}
|
|
1102
|
+
|
|
1099
1103
|
.tw-w-\[140px\] {
|
|
1100
1104
|
width: 140px;
|
|
1101
1105
|
}
|
|
@@ -1112,6 +1116,10 @@ video {
|
|
|
1112
1116
|
width: 190px;
|
|
1113
1117
|
}
|
|
1114
1118
|
|
|
1119
|
+
.tw-w-\[22px\] {
|
|
1120
|
+
width: 22px;
|
|
1121
|
+
}
|
|
1122
|
+
|
|
1115
1123
|
.tw-w-\[299px\] {
|
|
1116
1124
|
width: 299px;
|
|
1117
1125
|
}
|
|
@@ -1325,11 +1333,6 @@ video {
|
|
|
1325
1333
|
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));
|
|
1326
1334
|
}
|
|
1327
1335
|
|
|
1328
|
-
.-tw-translate-x-\[2px\] {
|
|
1329
|
-
--tw-translate-x: -2px;
|
|
1330
|
-
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));
|
|
1331
|
-
}
|
|
1332
|
-
|
|
1333
1336
|
.-tw-translate-x-full {
|
|
1334
1337
|
--tw-translate-x: -100%;
|
|
1335
1338
|
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));
|
|
@@ -1424,6 +1427,20 @@ video {
|
|
|
1424
1427
|
animation: tw-fade-out 0.2s ease-out both;
|
|
1425
1428
|
}
|
|
1426
1429
|
|
|
1430
|
+
@keyframes tw-hide {
|
|
1431
|
+
0% {
|
|
1432
|
+
display: block;
|
|
1433
|
+
}
|
|
1434
|
+
|
|
1435
|
+
100% {
|
|
1436
|
+
display: none;
|
|
1437
|
+
}
|
|
1438
|
+
}
|
|
1439
|
+
|
|
1440
|
+
.tw-animate-hide {
|
|
1441
|
+
animation: tw-hide 0s ease-out forwards;
|
|
1442
|
+
}
|
|
1443
|
+
|
|
1427
1444
|
@keyframes tw-loading-gradient {
|
|
1428
1445
|
0% {
|
|
1429
1446
|
transform: translateX(-70%);
|
|
@@ -1684,10 +1701,6 @@ video {
|
|
|
1684
1701
|
border-radius: 0.75rem;
|
|
1685
1702
|
}
|
|
1686
1703
|
|
|
1687
|
-
.tw-rounded-bl-full {
|
|
1688
|
-
border-bottom-left-radius: 9999px;
|
|
1689
|
-
}
|
|
1690
|
-
|
|
1691
1704
|
.tw-rounded-bl-squid-l {
|
|
1692
1705
|
border-bottom-left-radius: 1.875rem;
|
|
1693
1706
|
}
|
|
@@ -1704,10 +1717,6 @@ video {
|
|
|
1704
1717
|
border-top-left-radius: 25px;
|
|
1705
1718
|
}
|
|
1706
1719
|
|
|
1707
|
-
.tw-rounded-tl-full {
|
|
1708
|
-
border-top-left-radius: 9999px;
|
|
1709
|
-
}
|
|
1710
|
-
|
|
1711
1720
|
.tw-rounded-tl-squid-l {
|
|
1712
1721
|
border-top-left-radius: 1.875rem;
|
|
1713
1722
|
}
|
|
@@ -1801,6 +1810,10 @@ video {
|
|
|
1801
1810
|
background-color: var(--squid-theme-grey-600) !important;
|
|
1802
1811
|
}
|
|
1803
1812
|
|
|
1813
|
+
.\!tw-bg-grey-800 {
|
|
1814
|
+
background-color: var(--squid-theme-grey-800) !important;
|
|
1815
|
+
}
|
|
1816
|
+
|
|
1804
1817
|
.\!tw-bg-royal-400 {
|
|
1805
1818
|
background-color: var(--squid-theme-royal-400) !important;
|
|
1806
1819
|
}
|
|
@@ -2276,8 +2289,8 @@ video {
|
|
|
2276
2289
|
line-height: 13px !important;
|
|
2277
2290
|
}
|
|
2278
2291
|
|
|
2279
|
-
.\!tw-leading-\[
|
|
2280
|
-
line-height:
|
|
2292
|
+
.\!tw-leading-\[17px\] {
|
|
2293
|
+
line-height: 17px !important;
|
|
2281
2294
|
}
|
|
2282
2295
|
|
|
2283
2296
|
.\!tw-leading-\[18px\] {
|
|
@@ -2360,6 +2373,10 @@ video {
|
|
|
2360
2373
|
letter-spacing: -1.05px;
|
|
2361
2374
|
}
|
|
2362
2375
|
|
|
2376
|
+
.\!tw-text-grey-600 {
|
|
2377
|
+
color: var(--squid-theme-grey-600) !important;
|
|
2378
|
+
}
|
|
2379
|
+
|
|
2363
2380
|
.tw-text-\[\#FBFBFD\] {
|
|
2364
2381
|
--tw-text-opacity: 1;
|
|
2365
2382
|
color: rgb(251 251 253 / var(--tw-text-opacity));
|
|
@@ -2638,22 +2655,18 @@ input[type='number'] {
|
|
|
2638
2655
|
outline-color: var(--squid-theme-status-negative);
|
|
2639
2656
|
}
|
|
2640
2657
|
|
|
2641
|
-
@keyframes tw-display
|
|
2642
|
-
0
|
|
2658
|
+
@keyframes tw-display {
|
|
2659
|
+
0% {
|
|
2643
2660
|
display: none;
|
|
2644
|
-
visibility: hidden;
|
|
2645
|
-
opacity: 0;
|
|
2646
2661
|
}
|
|
2647
2662
|
|
|
2648
2663
|
100% {
|
|
2649
2664
|
display: block;
|
|
2650
|
-
visibility: visible;
|
|
2651
|
-
opacity: 1;
|
|
2652
2665
|
}
|
|
2653
2666
|
}
|
|
2654
2667
|
|
|
2655
2668
|
.hover\:tw-animate-display-delayed:hover {
|
|
2656
|
-
animation: tw-display
|
|
2669
|
+
animation: tw-display 0s var(--squid-animation-display-delayed-duration, 0s) ease-out both;
|
|
2657
2670
|
}
|
|
2658
2671
|
|
|
2659
2672
|
.hover\:tw-bg-grey-700:hover {
|
|
@@ -2736,22 +2749,18 @@ input[type='number'] {
|
|
|
2736
2749
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
2737
2750
|
}
|
|
2738
2751
|
|
|
2739
|
-
@keyframes tw-display
|
|
2740
|
-
0
|
|
2752
|
+
@keyframes tw-display {
|
|
2753
|
+
0% {
|
|
2741
2754
|
display: none;
|
|
2742
|
-
visibility: hidden;
|
|
2743
|
-
opacity: 0;
|
|
2744
2755
|
}
|
|
2745
2756
|
|
|
2746
2757
|
100% {
|
|
2747
2758
|
display: block;
|
|
2748
|
-
visibility: visible;
|
|
2749
|
-
opacity: 1;
|
|
2750
2759
|
}
|
|
2751
2760
|
}
|
|
2752
2761
|
|
|
2753
2762
|
.tw-peer:hover ~ .peer-hover\:tw-animate-display-delayed {
|
|
2754
|
-
animation: tw-display
|
|
2763
|
+
animation: tw-display 0s var(--squid-animation-display-delayed-duration, 0s) ease-out both;
|
|
2755
2764
|
}
|
|
2756
2765
|
|
|
2757
2766
|
.tw-peer:focus ~ .peer-focus\:tw-hidden {
|
package/dist/index.d.ts
CHANGED
|
@@ -403,8 +403,9 @@ interface SwapConfigurationProps {
|
|
|
403
403
|
};
|
|
404
404
|
criticalPriceImpactPercentage?: number;
|
|
405
405
|
emptyAddressLabel?: string;
|
|
406
|
+
onSwapAmountButtonClick?: () => void;
|
|
406
407
|
}
|
|
407
|
-
declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage, emptyAddressLabel, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
|
|
408
|
+
declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, onSwapAmountButtonClick, address, error, criticalPriceImpactPercentage, emptyAddressLabel, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
|
|
408
409
|
|
|
409
410
|
interface SwapProgressViewHeaderProps {
|
|
410
411
|
title: string;
|