@0xsquid/ui 2.6.8 → 2.6.9

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.
Files changed (6) hide show
  1. package/dist/cjs/index.js +7 -7
  2. package/dist/cjs/types/components/layout/SwapConfiguration.d.ts +1 -1
  3. package/dist/esm/index.js +7 -7
  4. package/dist/esm/types/components/layout/SwapConfiguration.d.ts +1 -1
  5. package/dist/index.d.ts +1 -1
  6. package/package.json +1 -1
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, { tooltipContent: 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(WalletFilledIcon, { 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" })] })] }))] }) }) }));
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(WalletFilledIcon, { 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, _d;
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: (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip) === null || _a === void 0 ? void 0 : _a.tooltipContent, label: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address) ||
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: (_b = walletButton === null || walletButton === void 0 ? void 0 : walletButton.showIcon) !== null && _b !== void 0 ? _b : 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: (_c = token === null || token === void 0 ? void 0 : token.decimals) !== null && _c !== void 0 ? _c : 18,
20235
- symbol: (_d = token === null || token === void 0 ? void 0 : token.symbol) !== null && _d !== void 0 ? _d : "",
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);
package/dist/cjs/types/components/layout/SwapConfiguration.d.ts CHANGED
@@ -4,7 +4,7 @@ interface AddressHeaderProps {
4
4
  direction: SwapDirection;
5
5
  onClick?: () => void;
6
6
  isDisabled?: boolean;
7
- tooltip?: TooltipProps["tooltipContent"];
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, { tooltipContent: 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(WalletFilledIcon, { 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" })] })] }))] }) }) }));
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(WalletFilledIcon, { 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, _d;
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: (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip) === null || _a === void 0 ? void 0 : _a.tooltipContent, label: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address) ||
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: (_b = walletButton === null || walletButton === void 0 ? void 0 : walletButton.showIcon) !== null && _b !== void 0 ? _b : 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: (_c = token === null || token === void 0 ? void 0 : token.decimals) !== null && _c !== void 0 ? _c : 18,
20215
- symbol: (_d = token === null || token === void 0 ? void 0 : token.symbol) !== null && _d !== void 0 ? _d : "",
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);
package/dist/esm/types/components/layout/SwapConfiguration.d.ts CHANGED
@@ -4,7 +4,7 @@ interface AddressHeaderProps {
4
4
  direction: SwapDirection;
5
5
  onClick?: () => void;
6
6
  isDisabled?: boolean;
7
- tooltip?: TooltipProps["tooltipContent"];
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["tooltipContent"];
1752
+ tooltip?: Omit<TooltipProps, "children">;
1753
1753
  label: string;
1754
1754
  walletIconUrl?: string | null;
1755
1755
  isLoading?: boolean;
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "url": "git+https://github.com/0xsquid/squid-ui.git"
6
6
  },
7
7
  "description": "Squid's UI components",
8
- "version": "2.6.8",
8
+ "version": "2.6.9",
9
9
  "author": "",
10
10
  "license": "MIT",
11
11
  "resolutions": {