@0xsquid/ui 0.10.0 → 0.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +11 -11
- 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 +11 -11
- 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 +22 -16
- package/dist/index.d.ts +2 -1
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -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';
|
|
@@ -3035,8 +3035,8 @@ function generateMarkerLines(count) {
|
|
|
3035
3035
|
}
|
|
3036
3036
|
|
|
3037
3037
|
const buttonSizeClassMap = {
|
|
3038
|
-
md: 'tw-
|
|
3039
|
-
lg: 'tw-
|
|
3038
|
+
md: 'tw-px-squid-xs tw-py-squid-xxs tw-rounded-squid-m tw-border tw-flex tw-items-center tw-gap-squid-xxs tw-min-w-[60px] tw-h-squid-xl tw-justify-center',
|
|
3039
|
+
lg: 'tw-border tw-rounded-squid-xxl tw-p-1 tw-h-button tw-w-full',
|
|
3040
3040
|
};
|
|
3041
3041
|
const buttonVariantClassMap = {
|
|
3042
3042
|
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',
|
|
@@ -3230,7 +3230,7 @@ function ListItem(_a) {
|
|
|
3230
3230
|
const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
|
|
3231
3231
|
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
3232
|
// '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-[
|
|
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-[17px]", children: itemTitle })) : (itemTitle), size === 'large' &&
|
|
3234
3234
|
((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
3235
|
// prevent click event from bubbling up to parent
|
|
3236
3236
|
event.stopPropagation();
|
|
@@ -3405,17 +3405,17 @@ function SwapInputsIcon() {
|
|
|
3405
3405
|
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
3406
|
}
|
|
3407
3407
|
|
|
3408
|
-
|
|
3408
|
+
const interactiveChipClassName = 'hover:tw-bg-material-light-thin';
|
|
3409
|
+
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
3410
|
var _a;
|
|
3410
3411
|
const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
|
|
3411
3412
|
? 'tw-text-status-negative'
|
|
3412
3413
|
: '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, {})] })] }))] }));
|
|
3414
|
+
const isBalanceChipInteractive = !!onBalanceButtonClick;
|
|
3415
|
+
const BalanceChipTag = isBalanceChipInteractive ? 'button' : 'div';
|
|
3416
|
+
const isSwapAmountChipInteractive = !!onSwapAmountButtonClick;
|
|
3417
|
+
const SwapAmountChipTag = isSwapAmountChipInteractive ? 'button' : 'div';
|
|
3418
|
+
return (jsxRuntime.jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxRuntime.jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600 hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : emptyAddressLabel }), jsxRuntime.jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), direction === 'from' ? (jsxRuntime.jsx(NumericInput, { forcedUpdateValue: forcedAmount, initialValue: amount, onParsedValueChanged: (value) => onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value) })) : (jsxRuntime.jsx("div", { className: "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
3419
|
}
|
|
3420
3420
|
|
|
3421
3421
|
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
|
@@ -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';
|
|
@@ -3033,8 +3033,8 @@ function generateMarkerLines(count) {
|
|
|
3033
3033
|
}
|
|
3034
3034
|
|
|
3035
3035
|
const buttonSizeClassMap = {
|
|
3036
|
-
md: 'tw-
|
|
3037
|
-
lg: 'tw-
|
|
3036
|
+
md: 'tw-px-squid-xs tw-py-squid-xxs tw-rounded-squid-m tw-border tw-flex tw-items-center tw-gap-squid-xxs tw-min-w-[60px] tw-h-squid-xl tw-justify-center',
|
|
3037
|
+
lg: 'tw-border tw-rounded-squid-xxl tw-p-1 tw-h-button tw-w-full',
|
|
3038
3038
|
};
|
|
3039
3039
|
const buttonVariantClassMap = {
|
|
3040
3040
|
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',
|
|
@@ -3228,7 +3228,7 @@ function ListItem(_a) {
|
|
|
3228
3228
|
const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
|
|
3229
3229
|
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
3230
|
// '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-[
|
|
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-[17px]", children: itemTitle })) : (itemTitle), size === 'large' &&
|
|
3232
3232
|
((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
3233
|
// prevent click event from bubbling up to parent
|
|
3234
3234
|
event.stopPropagation();
|
|
@@ -3403,17 +3403,17 @@ function SwapInputsIcon() {
|
|
|
3403
3403
|
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
3404
|
}
|
|
3405
3405
|
|
|
3406
|
-
|
|
3406
|
+
const interactiveChipClassName = 'hover:tw-bg-material-light-thin';
|
|
3407
|
+
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
3408
|
var _a;
|
|
3408
3409
|
const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
|
|
3409
3410
|
? 'tw-text-status-negative'
|
|
3410
3411
|
: '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, {})] })] }))] }));
|
|
3412
|
+
const isBalanceChipInteractive = !!onBalanceButtonClick;
|
|
3413
|
+
const BalanceChipTag = isBalanceChipInteractive ? 'button' : 'div';
|
|
3414
|
+
const isSwapAmountChipInteractive = !!onSwapAmountButtonClick;
|
|
3415
|
+
const SwapAmountChipTag = isSwapAmountChipInteractive ? 'button' : 'div';
|
|
3416
|
+
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
3417
|
}
|
|
3418
3418
|
|
|
3419
3419
|
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
|
@@ -1424,6 +1424,20 @@ video {
|
|
|
1424
1424
|
animation: tw-fade-out 0.2s ease-out both;
|
|
1425
1425
|
}
|
|
1426
1426
|
|
|
1427
|
+
@keyframes tw-hide {
|
|
1428
|
+
0% {
|
|
1429
|
+
display: block;
|
|
1430
|
+
}
|
|
1431
|
+
|
|
1432
|
+
100% {
|
|
1433
|
+
display: none;
|
|
1434
|
+
}
|
|
1435
|
+
}
|
|
1436
|
+
|
|
1437
|
+
.tw-animate-hide {
|
|
1438
|
+
animation: tw-hide 0s ease-out forwards;
|
|
1439
|
+
}
|
|
1440
|
+
|
|
1427
1441
|
@keyframes tw-loading-gradient {
|
|
1428
1442
|
0% {
|
|
1429
1443
|
transform: translateX(-70%);
|
|
@@ -2276,8 +2290,8 @@ video {
|
|
|
2276
2290
|
line-height: 13px !important;
|
|
2277
2291
|
}
|
|
2278
2292
|
|
|
2279
|
-
.\!tw-leading-\[
|
|
2280
|
-
line-height:
|
|
2293
|
+
.\!tw-leading-\[17px\] {
|
|
2294
|
+
line-height: 17px !important;
|
|
2281
2295
|
}
|
|
2282
2296
|
|
|
2283
2297
|
.\!tw-leading-\[18px\] {
|
|
@@ -2638,22 +2652,18 @@ input[type='number'] {
|
|
|
2638
2652
|
outline-color: var(--squid-theme-status-negative);
|
|
2639
2653
|
}
|
|
2640
2654
|
|
|
2641
|
-
@keyframes tw-display
|
|
2642
|
-
0
|
|
2655
|
+
@keyframes tw-display {
|
|
2656
|
+
0% {
|
|
2643
2657
|
display: none;
|
|
2644
|
-
visibility: hidden;
|
|
2645
|
-
opacity: 0;
|
|
2646
2658
|
}
|
|
2647
2659
|
|
|
2648
2660
|
100% {
|
|
2649
2661
|
display: block;
|
|
2650
|
-
visibility: visible;
|
|
2651
|
-
opacity: 1;
|
|
2652
2662
|
}
|
|
2653
2663
|
}
|
|
2654
2664
|
|
|
2655
2665
|
.hover\:tw-animate-display-delayed:hover {
|
|
2656
|
-
animation: tw-display
|
|
2666
|
+
animation: tw-display 0s var(--squid-animation-display-delayed-duration, 0s) ease-out both;
|
|
2657
2667
|
}
|
|
2658
2668
|
|
|
2659
2669
|
.hover\:tw-bg-grey-700:hover {
|
|
@@ -2736,22 +2746,18 @@ input[type='number'] {
|
|
|
2736
2746
|
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
2747
|
}
|
|
2738
2748
|
|
|
2739
|
-
@keyframes tw-display
|
|
2740
|
-
0
|
|
2749
|
+
@keyframes tw-display {
|
|
2750
|
+
0% {
|
|
2741
2751
|
display: none;
|
|
2742
|
-
visibility: hidden;
|
|
2743
|
-
opacity: 0;
|
|
2744
2752
|
}
|
|
2745
2753
|
|
|
2746
2754
|
100% {
|
|
2747
2755
|
display: block;
|
|
2748
|
-
visibility: visible;
|
|
2749
|
-
opacity: 1;
|
|
2750
2756
|
}
|
|
2751
2757
|
}
|
|
2752
2758
|
|
|
2753
2759
|
.tw-peer:hover ~ .peer-hover\:tw-animate-display-delayed {
|
|
2754
|
-
animation: tw-display
|
|
2760
|
+
animation: tw-display 0s var(--squid-animation-display-delayed-duration, 0s) ease-out both;
|
|
2755
2761
|
}
|
|
2756
2762
|
|
|
2757
2763
|
.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;
|