@0xsquid/ui 2.6.8 → 2.6.10
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
CHANGED
|
@@ -20222,17 +20222,17 @@ function LogoContainer({ children }) {
|
|
|
20222
20222
|
|
|
20223
20223
|
const AddressHeader = ({ direction, onClick, isDisabled, tooltip, label, walletIconUrl, isLoading, displayLabel = true, highlightLabel = false, showIcon = true, }) => {
|
|
20224
20224
|
const ButtonTag = onClick && !isDisabled ? "button" : "div";
|
|
20225
|
-
return (jsxRuntime.jsx("header", { className: "tw-flex tw-h-squid-xl2 tw-items-center tw-self-stretch tw-px-squid-m tw-py-squid-xxs", children: jsxRuntime.jsx(Tooltip, {
|
|
20226
|
-
(walletIconUrl ? (jsxRuntime.jsx(Image$1, { width: 24, height: 24, rounded: "xxs", src: walletIconUrl })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-h-6 tw-w-6 tw-items-center tw-justify-center tw-rounded-lg tw-bg-royal-500 tw-px-0.5 tw-outline tw-outline-1 tw-outline-material-light-thin", children: jsxRuntime.jsx(
|
|
20225
|
+
return (jsxRuntime.jsx("header", { className: "tw-flex tw-h-squid-xl2 tw-items-center tw-self-stretch tw-px-squid-m tw-py-squid-xxs", children: jsxRuntime.jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxRuntime.jsxs(ButtonTag, { onClick: onClick, disabled: isDisabled, type: onClick ? "button" : undefined, className: cn("tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs", onClick && !isDisabled && "hover:tw-bg-material-light-thin", isLoading && "tw-opacity-50"), children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-500", children: direction === "from" ? "Pay" : "Receive" }), displayLabel && !isLoading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-600", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [showIcon &&
|
|
20226
|
+
(walletIconUrl ? (jsxRuntime.jsx(Image$1, { width: 24, height: 24, rounded: "xxs", src: walletIconUrl })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-h-6 tw-w-6 tw-items-center tw-justify-center tw-rounded-lg tw-bg-royal-500 tw-px-0.5 tw-outline tw-outline-1 tw-outline-material-light-thin", children: jsxRuntime.jsx(WalletIcon, { size: "18" }) }))), jsxRuntime.jsx(BodyText, { size: "small", className: cn(highlightLabel ? "tw-text-royal-500" : "tw-text-grey-300"), children: label }), jsxRuntime.jsx(ChevronArrowIcon, { className: cn(highlightLabel ? "tw-text-royal-500" : "tw-text-grey-600"), size: "16" })] })] }))] }) })) }));
|
|
20227
20227
|
};
|
|
20228
20228
|
function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp = false, chain, token, direction = "from", onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive = true, isLoading = false, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails = true, fullHeight = true, debounceInput = true, showWalletButtonHeader = true, }) {
|
|
20229
|
-
var _a, _b, _c
|
|
20229
|
+
var _a, _b, _c;
|
|
20230
20230
|
const isFetching = isFetchingProp || isLoading;
|
|
20231
|
-
return (jsxRuntime.jsxs("section", { className: cn("tw-relative tw-flex tw-w-full tw-flex-col tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 mobile-lg:tw-w-card-large", fullHeight && "tw-h-full tw-pb-squid-m"), children: [jsxRuntime.jsx(AddressHeader, { direction: direction, onClick: walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick, isDisabled: walletButton === null || walletButton === void 0 ? void 0 : walletButton.disabled, tooltip:
|
|
20231
|
+
return (jsxRuntime.jsxs("section", { className: cn("tw-relative tw-flex tw-w-full tw-flex-col tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 mobile-lg:tw-w-card-large", fullHeight && "tw-h-full tw-pb-squid-m"), children: [jsxRuntime.jsx(AddressHeader, { direction: direction, onClick: walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick, isDisabled: walletButton === null || walletButton === void 0 ? void 0 : walletButton.disabled, tooltip: walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, label: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address) ||
|
|
20232
20232
|
(walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) ||
|
|
20233
|
-
(direction === "from" ? "Connect wallet" : "Select recipient"), walletIconUrl: walletButton === null || walletButton === void 0 ? void 0 : walletButton.walletIconUrl, isLoading: isLoading, displayLabel: showWalletButtonHeader, highlightLabel: !(walletButton === null || walletButton === void 0 ? void 0 : walletButton.address), showIcon: (
|
|
20234
|
-
decimals: (
|
|
20235
|
-
symbol: (
|
|
20233
|
+
(direction === "from" ? "Connect wallet" : "Select recipient"), walletIconUrl: walletButton === null || walletButton === void 0 ? void 0 : walletButton.walletIconUrl, isLoading: isLoading, displayLabel: showWalletButtonHeader, highlightLabel: !(walletButton === null || walletButton === void 0 ? void 0 : walletButton.address), showIcon: (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.showIcon) !== null && _a !== void 0 ? _a : true }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), jsxRuntime.jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
|
|
20234
|
+
decimals: (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18,
|
|
20235
|
+
symbol: (_c = token === null || token === void 0 ? void 0 : token.symbol) !== null && _c !== void 0 ? _c : "",
|
|
20236
20236
|
price: tokenPrice,
|
|
20237
20237
|
}, onAmountChange: (value) => {
|
|
20238
20238
|
onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value);
|
|
@@ -4,7 +4,7 @@ interface AddressHeaderProps {
|
|
|
4
4
|
direction: SwapDirection;
|
|
5
5
|
onClick?: () => void;
|
|
6
6
|
isDisabled?: boolean;
|
|
7
|
-
tooltip?: TooltipProps
|
|
7
|
+
tooltip?: Omit<TooltipProps, "children">;
|
|
8
8
|
label: string;
|
|
9
9
|
walletIconUrl?: string | null;
|
|
10
10
|
isLoading?: boolean;
|
package/dist/esm/index.js
CHANGED
|
@@ -20202,17 +20202,17 @@ function LogoContainer({ children }) {
|
|
|
20202
20202
|
|
|
20203
20203
|
const AddressHeader = ({ direction, onClick, isDisabled, tooltip, label, walletIconUrl, isLoading, displayLabel = true, highlightLabel = false, showIcon = true, }) => {
|
|
20204
20204
|
const ButtonTag = onClick && !isDisabled ? "button" : "div";
|
|
20205
|
-
return (jsx("header", { className: "tw-flex tw-h-squid-xl2 tw-items-center tw-self-stretch tw-px-squid-m tw-py-squid-xxs", children: jsx(Tooltip, {
|
|
20206
|
-
(walletIconUrl ? (jsx(Image$1, { width: 24, height: 24, rounded: "xxs", src: walletIconUrl })) : (jsx("div", { className: "tw-flex tw-h-6 tw-w-6 tw-items-center tw-justify-center tw-rounded-lg tw-bg-royal-500 tw-px-0.5 tw-outline tw-outline-1 tw-outline-material-light-thin", children: jsx(
|
|
20205
|
+
return (jsx("header", { className: "tw-flex tw-h-squid-xl2 tw-items-center tw-self-stretch tw-px-squid-m tw-py-squid-xxs", children: jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxs(ButtonTag, { onClick: onClick, disabled: isDisabled, type: onClick ? "button" : undefined, className: cn("tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs", onClick && !isDisabled && "hover:tw-bg-material-light-thin", isLoading && "tw-opacity-50"), children: [jsx(BodyText, { size: "small", className: "tw-text-grey-500", children: direction === "from" ? "Pay" : "Receive" }), displayLabel && !isLoading && (jsxs(Fragment, { children: [jsx(BodyText, { size: "small", className: "tw-text-grey-600", children: ":" }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [showIcon &&
|
|
20206
|
+
(walletIconUrl ? (jsx(Image$1, { width: 24, height: 24, rounded: "xxs", src: walletIconUrl })) : (jsx("div", { className: "tw-flex tw-h-6 tw-w-6 tw-items-center tw-justify-center tw-rounded-lg tw-bg-royal-500 tw-px-0.5 tw-outline tw-outline-1 tw-outline-material-light-thin", children: jsx(WalletIcon, { size: "18" }) }))), jsx(BodyText, { size: "small", className: cn(highlightLabel ? "tw-text-royal-500" : "tw-text-grey-300"), children: label }), jsx(ChevronArrowIcon, { className: cn(highlightLabel ? "tw-text-royal-500" : "tw-text-grey-600"), size: "16" })] })] }))] }) })) }));
|
|
20207
20207
|
};
|
|
20208
20208
|
function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp = false, chain, token, direction = "from", onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive = true, isLoading = false, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails = true, fullHeight = true, debounceInput = true, showWalletButtonHeader = true, }) {
|
|
20209
|
-
var _a, _b, _c
|
|
20209
|
+
var _a, _b, _c;
|
|
20210
20210
|
const isFetching = isFetchingProp || isLoading;
|
|
20211
|
-
return (jsxs("section", { className: cn("tw-relative tw-flex tw-w-full tw-flex-col tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 mobile-lg:tw-w-card-large", fullHeight && "tw-h-full tw-pb-squid-m"), children: [jsx(AddressHeader, { direction: direction, onClick: walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick, isDisabled: walletButton === null || walletButton === void 0 ? void 0 : walletButton.disabled, tooltip:
|
|
20211
|
+
return (jsxs("section", { className: cn("tw-relative tw-flex tw-w-full tw-flex-col tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 mobile-lg:tw-w-card-large", fullHeight && "tw-h-full tw-pb-squid-m"), children: [jsx(AddressHeader, { direction: direction, onClick: walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick, isDisabled: walletButton === null || walletButton === void 0 ? void 0 : walletButton.disabled, tooltip: walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, label: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address) ||
|
|
20212
20212
|
(walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) ||
|
|
20213
|
-
(direction === "from" ? "Connect wallet" : "Select recipient"), walletIconUrl: walletButton === null || walletButton === void 0 ? void 0 : walletButton.walletIconUrl, isLoading: isLoading, displayLabel: showWalletButtonHeader, highlightLabel: !(walletButton === null || walletButton === void 0 ? void 0 : walletButton.address), showIcon: (
|
|
20214
|
-
decimals: (
|
|
20215
|
-
symbol: (
|
|
20213
|
+
(direction === "from" ? "Connect wallet" : "Select recipient"), walletIconUrl: walletButton === null || walletButton === void 0 ? void 0 : walletButton.walletIconUrl, isLoading: isLoading, displayLabel: showWalletButtonHeader, highlightLabel: !(walletButton === null || walletButton === void 0 ? void 0 : walletButton.address), showIcon: (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.showIcon) !== null && _a !== void 0 ? _a : true }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
|
|
20214
|
+
decimals: (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18,
|
|
20215
|
+
symbol: (_c = token === null || token === void 0 ? void 0 : token.symbol) !== null && _c !== void 0 ? _c : "",
|
|
20216
20216
|
price: tokenPrice,
|
|
20217
20217
|
}, onAmountChange: (value) => {
|
|
20218
20218
|
onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value);
|
|
@@ -4,7 +4,7 @@ interface AddressHeaderProps {
|
|
|
4
4
|
direction: SwapDirection;
|
|
5
5
|
onClick?: () => void;
|
|
6
6
|
isDisabled?: boolean;
|
|
7
|
-
tooltip?: TooltipProps
|
|
7
|
+
tooltip?: Omit<TooltipProps, "children">;
|
|
8
8
|
label: string;
|
|
9
9
|
walletIconUrl?: string | null;
|
|
10
10
|
isLoading?: boolean;
|
package/dist/index.d.ts
CHANGED
|
@@ -1749,7 +1749,7 @@ interface AddressHeaderProps {
|
|
|
1749
1749
|
direction: SwapDirection;
|
|
1750
1750
|
onClick?: () => void;
|
|
1751
1751
|
isDisabled?: boolean;
|
|
1752
|
-
tooltip?: TooltipProps
|
|
1752
|
+
tooltip?: Omit<TooltipProps, "children">;
|
|
1753
1753
|
label: string;
|
|
1754
1754
|
walletIconUrl?: string | null;
|
|
1755
1755
|
isLoading?: boolean;
|