@0xsquid/ui 0.18.3 → 0.18.4

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 (7) hide show
  1. package/dist/cjs/index.js +4 -8
  2. package/dist/cjs/types/components/icons/Arrow.d.ts +3 -1
  3. package/dist/cjs/types/stories/layout/SwapConfiguration.stories.d.ts +1 -0
  4. package/dist/esm/index.js +4 -8
  5. package/dist/esm/types/components/icons/Arrow.d.ts +3 -1
  6. package/dist/esm/types/stories/layout/SwapConfiguration.stories.d.ts +1 -0
  7. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -2907,8 +2907,8 @@ function ArrowRightUpIcon() {
2907
2907
  function ChevronArrowIcon({ size = '16', className, }) {
2908
2908
  return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M6.66663 14L9.64022 8.64754C9.86394 8.24484 9.86394 7.75519 9.64022 7.35249L6.66663 2", stroke: "currentColor", strokeOpacity: "0.66", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
2909
2909
  }
2910
- function ArrowTriangle() {
2911
- return (jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M2.87921 5.55701C2.21562 4.22933 3.18052 2.6665 4.66531 2.6665H11.3348C12.8196 2.6665 13.7845 4.22933 13.1209 5.55701L9.78615 12.229C9.05029 13.7012 6.94983 13.7012 6.21397 12.229L2.87921 5.55701Z", fill: "currentColor" }) }));
2910
+ function ArrowTriangle({ className }) {
2911
+ return (jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M2.87921 5.55701C2.21562 4.22933 3.18052 2.6665 4.66531 2.6665H11.3348C12.8196 2.6665 13.7845 4.22933 13.1209 5.55701L9.78615 12.229C9.05029 13.7012 6.94983 13.7012 6.21397 12.229L2.87921 5.55701Z", fill: "currentColor" }) }));
2912
2912
  }
2913
2913
  function ChevronLargeDownIcon({ size = '24', className, }) {
2914
2914
  return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M3 10.5L11.0287 14.9604C11.6328 15.296 12.3672 15.296 12.9713 14.9604L21 10.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
@@ -6703,10 +6703,6 @@ function trimExtraDecimals(value, maxDecimals) {
6703
6703
  return value;
6704
6704
  }
6705
6705
 
6706
- function MaxIcon() {
6707
- 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", { clipPath: "url(#clip0_41_20801)", children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "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.5ZM10.6508 4.74074L14.1508 7.74074C14.5701 8.10017 14.6187 8.73147 14.2593 9.15079C13.8998 9.57012 13.2685 9.61868 12.8492 9.25926L10 6.81708L7.15079 9.25926C6.73147 9.61868 6.10017 9.57012 5.74074 9.15079C5.38132 8.73147 5.42988 8.10017 5.84921 7.74074L9.34921 4.74074C9.7237 4.41975 10.2763 4.41975 10.6508 4.74074ZM14.1508 13.7407L10.6508 10.7407C10.2763 10.4198 9.7237 10.4198 9.34921 10.7407L5.84921 13.7407C5.42988 14.1002 5.38132 14.7315 5.74074 15.1508C6.10017 15.5701 6.73147 15.6187 7.15079 15.2593L10 12.8171L12.8492 15.2593C13.2685 15.6187 13.8998 15.5701 14.2593 15.1508C14.6187 14.7315 14.5701 14.1002 14.1508 13.7407Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_41_20801", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
6708
- }
6709
-
6710
6706
  function SwapInputsIcon() {
6711
6707
  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", { clipPath: "url(#clip0_40_7936)", children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "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)" }) }) })] }));
6712
6708
  }
@@ -18134,7 +18130,7 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching = false, chain,
18134
18130
  }, balance: balance, criticalPriceImpactPercentage: criticalPriceImpactPercentage, error: error, formatIfVerySmall: {
18135
18131
  token: '0.001',
18136
18132
  usd: '0.01',
18137
- }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: !!(token === null || token === void 0 ? void 0 : token.iconUrl), direction: direction, forcedAmount: amount, amountUsd: amountUsd })] }));
18133
+ }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: !!token, direction: direction, forcedAmount: amount, amountUsd: amountUsd })] }));
18138
18134
  }
18139
18135
 
18140
18136
  function SwapProgressViewHeader({ title, description, }) {
@@ -24380,7 +24376,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
24380
24376
  ? formatIfVerySmall.token
24381
24377
  : amountFormatted })] }) })) : (jsxRuntime.jsxs("span", { className: "tw-text-grey-500", children: [isTokenAmountVerySmall ? '<' : '', jsxRuntime.jsx(CaptionText, { children: isTokenAmountVerySmall
24382
24378
  ? formatIfVerySmall.token
24383
- : amountFormatted }), ' ', jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: token.symbol })] })), priceImpactPercentage && direction === 'to' ? (jsxRuntime.jsxs("span", { className: cn('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(buttonClassName, isInteractive && interactiveChipClassName), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsxs(CaptionText, { children: [balanceFormatted, " ", token.symbol] }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
24379
+ : amountFormatted }), ' ', jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: token.symbol })] })), priceImpactPercentage && direction === 'to' ? (jsxRuntime.jsxs("span", { className: cn('tw-flex tw-items-center', priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, { className: Number(priceImpactPercentage) === 0 ? 'tw-opacity-0' : '' }), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxRuntime.jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn(buttonClassName, isInteractive && interactiveChipClassName), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balanceFormatted }), jsxRuntime.jsx(Chip, { label: "Max" })] })] }))] }));
24384
24380
  }
24385
24381
 
24386
24382
  function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, isSelected, }) {
package/dist/cjs/types/components/icons/Arrow.d.ts CHANGED
@@ -5,7 +5,9 @@ export declare function ChevronArrowIcon({ size, className, }: {
5
5
  size?: string;
6
6
  className?: string;
7
7
  }): import("react/jsx-runtime").JSX.Element;
8
- export declare function ArrowTriangle(): import("react/jsx-runtime").JSX.Element;
8
+ export declare function ArrowTriangle({ className }: {
9
+ className?: string;
10
+ }): import("react/jsx-runtime").JSX.Element;
9
11
  export declare function ChevronTopSmallIcon(): import("react/jsx-runtime").JSX.Element;
10
12
  export declare function ChevronLargeDownIcon({ size, className, }: {
11
13
  size?: string;
package/dist/cjs/types/stories/layout/SwapConfiguration.stories.d.ts CHANGED
@@ -12,6 +12,7 @@ export declare const Address: Story;
12
12
  export declare const WithBalance: Story;
13
13
  export declare const LowPriceImpact: Story;
14
14
  export declare const HighPriceImpact: Story;
15
+ export declare const ZeroPriceImpact: Story;
15
16
  export declare const IsFetching: Story;
16
17
  export declare const AllProps: Story;
17
18
  export declare const ToDirection: Story;
package/dist/esm/index.js CHANGED
@@ -2887,8 +2887,8 @@ function ArrowRightUpIcon() {
2887
2887
  function ChevronArrowIcon({ size = '16', className, }) {
2888
2888
  return (jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M6.66663 14L9.64022 8.64754C9.86394 8.24484 9.86394 7.75519 9.64022 7.35249L6.66663 2", stroke: "currentColor", strokeOpacity: "0.66", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
2889
2889
  }
2890
- function ArrowTriangle() {
2891
- return (jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M2.87921 5.55701C2.21562 4.22933 3.18052 2.6665 4.66531 2.6665H11.3348C12.8196 2.6665 13.7845 4.22933 13.1209 5.55701L9.78615 12.229C9.05029 13.7012 6.94983 13.7012 6.21397 12.229L2.87921 5.55701Z", fill: "currentColor" }) }));
2890
+ function ArrowTriangle({ className }) {
2891
+ return (jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M2.87921 5.55701C2.21562 4.22933 3.18052 2.6665 4.66531 2.6665H11.3348C12.8196 2.6665 13.7845 4.22933 13.1209 5.55701L9.78615 12.229C9.05029 13.7012 6.94983 13.7012 6.21397 12.229L2.87921 5.55701Z", fill: "currentColor" }) }));
2892
2892
  }
2893
2893
  function ChevronLargeDownIcon({ size = '24', className, }) {
2894
2894
  return (jsx("svg", { width: size, height: size, viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M3 10.5L11.0287 14.9604C11.6328 15.296 12.3672 15.296 12.9713 14.9604L21 10.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
@@ -6683,10 +6683,6 @@ function trimExtraDecimals(value, maxDecimals) {
6683
6683
  return value;
6684
6684
  }
6685
6685
 
6686
- function MaxIcon() {
6687
- return (jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { clipPath: "url(#clip0_41_20801)", children: jsx("path", { fillRule: "evenodd", clipRule: "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.5ZM10.6508 4.74074L14.1508 7.74074C14.5701 8.10017 14.6187 8.73147 14.2593 9.15079C13.8998 9.57012 13.2685 9.61868 12.8492 9.25926L10 6.81708L7.15079 9.25926C6.73147 9.61868 6.10017 9.57012 5.74074 9.15079C5.38132 8.73147 5.42988 8.10017 5.84921 7.74074L9.34921 4.74074C9.7237 4.41975 10.2763 4.41975 10.6508 4.74074ZM14.1508 13.7407L10.6508 10.7407C10.2763 10.4198 9.7237 10.4198 9.34921 10.7407L5.84921 13.7407C5.42988 14.1002 5.38132 14.7315 5.74074 15.1508C6.10017 15.5701 6.73147 15.6187 7.15079 15.2593L10 12.8171L12.8492 15.2593C13.2685 15.6187 13.8998 15.5701 14.2593 15.1508C14.6187 14.7315 14.5701 14.1002 14.1508 13.7407Z", fill: "currentColor" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_41_20801", children: jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
6688
- }
6689
-
6690
6686
  function SwapInputsIcon() {
6691
6687
  return (jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { clipPath: "url(#clip0_40_7936)", children: jsx("path", { fillRule: "evenodd", clipRule: "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)" }) }) })] }));
6692
6688
  }
@@ -18114,7 +18110,7 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching = false, chain,
18114
18110
  }, balance: balance, criticalPriceImpactPercentage: criticalPriceImpactPercentage, error: error, formatIfVerySmall: {
18115
18111
  token: '0.001',
18116
18112
  usd: '0.01',
18117
- }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: !!(token === null || token === void 0 ? void 0 : token.iconUrl), direction: direction, forcedAmount: amount, amountUsd: amountUsd })] }));
18113
+ }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: !!token, direction: direction, forcedAmount: amount, amountUsd: amountUsd })] }));
18118
18114
  }
18119
18115
 
18120
18116
  function SwapProgressViewHeader({ title, description, }) {
@@ -24360,7 +24356,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
24360
24356
  ? formatIfVerySmall.token
24361
24357
  : amountFormatted })] }) })) : (jsxs("span", { className: "tw-text-grey-500", children: [isTokenAmountVerySmall ? '<' : '', jsx(CaptionText, { children: isTokenAmountVerySmall
24362
24358
  ? formatIfVerySmall.token
24363
- : amountFormatted }), ' ', jsx(CaptionText, { className: "tw-opacity-66", children: token.symbol })] })), priceImpactPercentage && direction === 'to' ? (jsxs("span", { className: cn('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn(buttonClassName, isInteractive && interactiveChipClassName), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxs(CaptionText, { children: [balanceFormatted, " ", token.symbol] }), jsx(MaxIcon, {})] })] }))] }));
24359
+ : amountFormatted }), ' ', jsx(CaptionText, { className: "tw-opacity-66", children: token.symbol })] })), priceImpactPercentage && direction === 'to' ? (jsxs("span", { className: cn('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, { className: Number(priceImpactPercentage) === 0 ? 'tw-opacity-0' : '' }), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn(buttonClassName, isInteractive && interactiveChipClassName), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balanceFormatted }), jsx(Chip, { label: "Max" })] })] }))] }));
24364
24360
  }
24365
24361
 
24366
24362
  function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, isSelected, }) {
package/dist/esm/types/components/icons/Arrow.d.ts CHANGED
@@ -5,7 +5,9 @@ export declare function ChevronArrowIcon({ size, className, }: {
5
5
  size?: string;
6
6
  className?: string;
7
7
  }): import("react/jsx-runtime").JSX.Element;
8
- export declare function ArrowTriangle(): import("react/jsx-runtime").JSX.Element;
8
+ export declare function ArrowTriangle({ className }: {
9
+ className?: string;
10
+ }): import("react/jsx-runtime").JSX.Element;
9
11
  export declare function ChevronTopSmallIcon(): import("react/jsx-runtime").JSX.Element;
10
12
  export declare function ChevronLargeDownIcon({ size, className, }: {
11
13
  size?: string;
package/dist/esm/types/stories/layout/SwapConfiguration.stories.d.ts CHANGED
@@ -12,6 +12,7 @@ export declare const Address: Story;
12
12
  export declare const WithBalance: Story;
13
13
  export declare const LowPriceImpact: Story;
14
14
  export declare const HighPriceImpact: Story;
15
+ export declare const ZeroPriceImpact: Story;
15
16
  export declare const IsFetching: Story;
16
17
  export declare const AllProps: Story;
17
18
  export declare const ToDirection: Story;
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": "0.18.3",
8
+ "version": "0.18.4",
9
9
  "author": "",
10
10
  "license": "MIT",
11
11
  "resolutions": {