@0xsquid/ui 0.4.1 → 0.4.3

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 (19) hide show
  1. package/dist/cjs/index.js +33 -36
  2. package/dist/cjs/types/components/badges/UsdAmount.d.ts +1 -1
  3. package/dist/cjs/types/components/buttons/AssetsButton.d.ts +2 -1
  4. package/dist/cjs/types/components/icons/Arrow.d.ts +4 -1
  5. package/dist/cjs/types/components/layout/DetailsToolbar.d.ts +7 -2
  6. package/dist/cjs/types/components/layout/NavigationBar.d.ts +2 -1
  7. package/dist/cjs/types/components/layout/SwapConfiguration.d.ts +9 -4
  8. package/dist/cjs/types/types/components.d.ts +1 -6
  9. package/dist/esm/index.js +33 -36
  10. package/dist/esm/types/components/badges/UsdAmount.d.ts +1 -1
  11. package/dist/esm/types/components/buttons/AssetsButton.d.ts +2 -1
  12. package/dist/esm/types/components/icons/Arrow.d.ts +4 -1
  13. package/dist/esm/types/components/layout/DetailsToolbar.d.ts +7 -2
  14. package/dist/esm/types/components/layout/NavigationBar.d.ts +2 -1
  15. package/dist/esm/types/components/layout/SwapConfiguration.d.ts +9 -4
  16. package/dist/esm/types/types/components.d.ts +1 -6
  17. package/dist/index.css +55 -20
  18. package/dist/index.d.ts +20 -14
  19. package/package.json +5 -5
package/dist/cjs/index.js CHANGED
@@ -2628,8 +2628,8 @@ function ArrowTriangle() {
2628
2628
  function ChevronLargeDownIcon({ size = '24' }) {
2629
2629
  return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", 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" }) }));
2630
2630
  }
2631
- function ChevronLargeRightIcon() {
2632
- 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: "M6.66675 14L9.64035 8.64754C9.86407 8.24484 9.86407 7.75519 9.64035 7.35249L6.66675 2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
2631
+ function ChevronLargeRightIcon({ size = '16', className, }) {
2632
+ 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.66675 14L9.64035 8.64754C9.86407 8.24484 9.86407 7.75519 9.64035 7.35249L6.66675 2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
2633
2633
  }
2634
2634
  function ChevronRightSmallIcon() {
2635
2635
  return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: jsxRuntime.jsx("path", { d: "M6.66675 10.6667L8.86201 8.47141C9.12236 8.21106 9.12236 7.78896 8.86201 7.52861L6.66675 5.33334", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
@@ -2762,7 +2762,7 @@ const themeTypesKeys = {
2762
2762
 
2763
2763
  const imageClass = 'tw-w-[40px] tw-aspect-square tw-flex tw-items-center tw-justify-center';
2764
2764
  const defaultBgColor = `var(${themeTypesKeys['royal-500'].cssVariable})`;
2765
- function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor = defaultBgColor, tokenBgColor = defaultBgColor, tokenTextColor, }) {
2765
+ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor = defaultBgColor, tokenBgColor = defaultBgColor, tokenTextColor, onClick, }) {
2766
2766
  const bgGradient = react.useMemo(() => {
2767
2767
  if (!chainImageUrl) {
2768
2768
  return `linear-gradient(to right, ${defaultBgColor}, ${defaultBgColor})`;
@@ -2770,16 +2770,16 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
2770
2770
  if (!tokenImageUrl) {
2771
2771
  return `linear-gradient(90deg, ${chainBgColor} 54.86%, ${tokenBgColor} 95.83%)`;
2772
2772
  }
2773
- return `linear-gradient(to right, ${chainBgColor} 47.5%, ${tokenBgColor} 52.5%)`;
2773
+ return `linear-gradient(to right, ${chainBgColor} 43.5%, ${tokenBgColor} 56.55%)`;
2774
2774
  }, [chainBgColor, tokenBgColor]);
2775
- return (jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-h-squid-xl tw-min-w-[209px] tw-items-center tw-text-grey-100", children: [jsxRuntime.jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] 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-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
2775
+ return (jsxRuntime.jsxs("div", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-min-w-[209px] tw-items-center tw-text-grey-100", 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-cursor-pointer tw-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
2776
2776
  backgroundImage: bgGradient,
2777
2777
  }, children: jsxRuntime.jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsxRuntime.jsx("img", { src: chainImageUrl, alt: "" })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsxRuntime.jsx("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-rounded-bl-full tw-rounded-tl-full tw-border-b tw-border-t tw-border-material-light-thin'), style: {
2778
2778
  backgroundColor: tokenBgColor,
2779
- }, children: jsxRuntime.jsx("img", { src: tokenImageUrl, alt: "", className: "tw-h-full -tw-translate-x-[2px]" }) })) : null, jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl 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: {
2779
+ }, children: jsxRuntime.jsx("img", { src: tokenImageUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl -tw-translate-x-[2px]" }) })) : 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: {
2780
2780
  backgroundColor: tokenBgColor,
2781
2781
  color: tokenTextColor,
2782
- }, children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsxRuntime.jsx(ChevronLargeRightIcon, {})] })] }));
2782
+ }, children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-text-material-light-thick" })] })] }));
2783
2783
  }
2784
2784
 
2785
2785
  const animationDuration = '500ms';
@@ -2855,7 +2855,7 @@ function EthereumIcon() {
2855
2855
  }
2856
2856
 
2857
2857
  function FeeButton() {
2858
- return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(Chip, { label: "Fee" }), jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(EthereumIcon, {}) }), jsxRuntime.jsx(UsdAmount, { usdAmount: 560 })] })] }));
2858
+ return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(Chip, { label: "Fee" }), jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(EthereumIcon, {}) }), jsxRuntime.jsx(UsdAmount, { usdAmount: '560' })] })] }));
2859
2859
  }
2860
2860
 
2861
2861
  // font size, line height, and letter spacing classes
@@ -2923,7 +2923,7 @@ const borderRadiusClassMap = {
2923
2923
  };
2924
2924
  function Menu(_a) {
2925
2925
  var { children, containerClassName, contentClassName, title, displayControls, rounded = 'lg' } = _a, props = __rest(_a, ["children", "containerClassName", "contentClassName", "title", "displayControls", "rounded"]);
2926
- return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), children: jsxRuntime.jsxs("div", { className: cn('tw-backdrop-blur/10 tw-relative tw-inline-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-s tw-text-center tw-text-material-light-thick group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [title ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-py-squid-xxs tw-text-grey-100", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsxRuntime.jsx(CaptionText, { className: "tw-z-20 tw-self-stretch", children: children })) : (jsxRuntime.jsx("div", { className: "tw-z-20", children: children })), displayControls ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: jsxRuntime.jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, jsxRuntime.jsx("div", { className: cn('tw-backdrop-blur/10 tw-absolute tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
2926
+ return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), children: jsxRuntime.jsxs("div", { className: cn('tw-relative tw-inline-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-s tw-text-center tw-text-material-light-thick tw-backdrop-blur/20 tw-backdrop-saturate-150 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [title ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-py-squid-xxs tw-text-grey-100", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsxRuntime.jsx(CaptionText, { className: "tw-z-20 tw-self-stretch", children: children })) : (jsxRuntime.jsx("div", { className: "tw-z-20", children: children })), displayControls ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: jsxRuntime.jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, jsxRuntime.jsx("div", { className: cn('tw-absolute tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
2927
2927
  }
2928
2928
 
2929
2929
  const tooltipWidthClassMap = {
@@ -2947,27 +2947,19 @@ function Boost({ boostMode, onToggleBoostMode }) {
2947
2947
  return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-bg-grey-900 tw-pr-squid-xxs", children: [jsxRuntime.jsx(BoostButton, { boostMode: boostMode, onToggleBoostMode: onToggleBoostMode }), jsxRuntime.jsx(Chip, { label: boostMode === 'normal' ? '10m' : '20s', className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' ? 'tw-bg-grey-300' : 'tw-bg-status-positive') })] }));
2948
2948
  }
2949
2949
 
2950
- var DetailsToolbarState;
2951
- (function (DetailsToolbarState) {
2952
- DetailsToolbarState[DetailsToolbarState["FULL"] = 0] = "FULL";
2953
- DetailsToolbarState[DetailsToolbarState["LOADING"] = 1] = "LOADING";
2954
- DetailsToolbarState[DetailsToolbarState["EMPTY"] = 2] = "EMPTY";
2955
- DetailsToolbarState[DetailsToolbarState["ERROR"] = 3] = "ERROR";
2956
- })(DetailsToolbarState || (DetailsToolbarState = {}));
2957
-
2958
2950
  function EmojiSadIcon() {
2959
2951
  return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM13.5341 12.4645C11.5815 10.5118 8.41568 10.5118 6.46306 12.4645C6.07254 12.855 6.07254 13.4882 6.46306 13.8787C6.85358 14.2692 7.48675 14.2692 7.87727 13.8787C9.04885 12.7071 10.9483 12.7071 12.1199 13.8787C12.5104 14.2692 13.1436 14.2692 13.5341 13.8787C13.9247 13.4882 13.9247 12.855 13.5341 12.4645ZM8.5 7.5C8.5 8.32843 7.94036 9 7.25 9C6.55964 9 6 8.32843 6 7.5C6 6.67157 6.55964 6 7.25 6C7.94036 6 8.5 6.67157 8.5 7.5ZM12.75 9C13.4404 9 14 8.32843 14 7.5C14 6.67157 13.4404 6 12.75 6C12.0596 6 11.5 6.67157 11.5 7.5C11.5 8.32843 12.0596 9 12.75 9Z", fill: "currentColor" }) }));
2960
2952
  }
2961
2953
 
2962
2954
  const detailStateClassMap = {
2963
- [DetailsToolbarState.LOADING]: 'tw-opacity-33 tw-pointer-events-none',
2964
- [DetailsToolbarState.EMPTY]: 'tw-pointer-events-none tw-hidden',
2965
- [DetailsToolbarState.ERROR]: 'tw-opacity-33 tw-pointer-events-none',
2966
- [DetailsToolbarState.FULL]: '',
2955
+ loading: 'tw-opacity-33 tw-pointer-events-none',
2956
+ empty: 'tw-pointer-events-none tw-hidden',
2957
+ error: 'tw-opacity-33 tw-pointer-events-none',
2958
+ full: '',
2967
2959
  };
2968
- function DetailsToolbar({ state = DetailsToolbarState.FULL, errorMessage, }) {
2960
+ function DetailsToolbar({ state = 'full', errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, }) {
2969
2961
  const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
2970
- return (jsxRuntime.jsx("aside", { className: "tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-px-squid-m tw-py-squid-xxs tw-text-grey-500", children: state === DetailsToolbarState.ERROR ? (jsxRuntime.jsx(ErrorMessage, { message: errorMessage })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(FeeButton, {}) }), jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === DetailsToolbarState.LOADING ? (jsxRuntime.jsx(Loader, { size: "32" })) : (jsxRuntime.jsx(Button, { variant: "tertiary", size: "md", className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsxRuntime.jsx(ChevronLargeDownIcon, {}) })) }), jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(Boost, { boostMode: "boost" }) })] })) }));
2962
+ return (jsxRuntime.jsx("aside", { className: "tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-px-squid-m tw-py-squid-xxs tw-text-grey-500", children: state === 'error' ? (jsxRuntime.jsx(ErrorMessage, { message: errorMessage })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(FeeButton, {}) }), jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsxRuntime.jsx(Loader, { size: "32" })) : (jsxRuntime.jsx(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsxRuntime.jsx(ChevronLargeDownIcon, {}) })) }), jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(Boost, { boostMode: boostMode, onToggleBoostMode: onToggleBoostMode }) })] })) }));
2971
2963
  }
2972
2964
  const ErrorMessage = ({ message }) => {
2973
2965
  return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-xl tw-flex-1 tw-items-center tw-gap-squid-xxs tw-text-status-negative", children: [jsxRuntime.jsx(EmojiSadIcon, {}), jsxRuntime.jsx(CaptionText, { children: message })] }));
@@ -2976,19 +2968,19 @@ const ErrorMessage = ({ message }) => {
2976
2968
  function Modal({ children }) {
2977
2969
  return (
2978
2970
  // modal container
2979
- jsxRuntime.jsx("div", { className: "tw-backdrop-blur/20 tw-absolute tw-inset-0 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-thick tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m", children: jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end", children: children }) }));
2971
+ jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-0 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-thick tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-backdrop-blur/20 tw-backdrop-saturate-150", children: jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end", children: children }) }));
2980
2972
  }
2981
2973
 
2982
- function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, }) {
2974
+ function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, }) {
2983
2975
  return (jsxRuntime.jsxs("nav", { className: cn('tw-flex tw-max-h-[120px] tw-min-w-96 tw-flex-col tw-text-grey-300', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900'), children: [jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs', displayBackButton ? 'tw-px-squid-m' : 'tw-pl-squid-l tw-pr-squid-m'), children: [displayBackButton ? (jsxRuntime.jsx(Button, { className: displayButtonShadows
2984
- ? 'group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2'
2985
- : undefined, variant: "tertiary", size: "md", icon: jsxRuntime.jsx(ArrowLeftIcon, {}) })) : null, logoUrl ? (jsxRuntime.jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsxRuntime.jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: jsxRuntime.jsx(AddressButton, { className: displayButtonShadows
2986
- ? 'group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2'
2976
+ ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
2977
+ : undefined, variant: "tertiary", size: "md", icon: jsxRuntime.jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsxRuntime.jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsxRuntime.jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: jsxRuntime.jsx(AddressButton, { className: displayButtonShadows
2978
+ ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
2987
2979
  : undefined, label: "Connect" }) })] }), title ? (jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-l tw-py-squid-xxs", children: jsxRuntime.jsx(HeadingText, { size: "small", children: title }) })) : null] }));
2988
2980
  }
2989
2981
 
2990
2982
  function ProductCard({ children }) {
2991
- return (jsxRuntime.jsx("div", { className: "tw-backdrop-blur/10 tw-h-card tw-min-h-card tw-w-card tw-rounded-squid-xl tw-border-[1px] tw-border-solid tw-border-material-light-thick tw-bg-material-light-thick tw-p-squid-xs", children: jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-full tw-max-h-[660px] tw-w-full tw-flex-col tw-overflow-hidden tw-rounded-squid-l tw-bg-grey-900 tw-text-grey-300", children: children }) }));
2983
+ return (jsxRuntime.jsx("div", { className: "tw-h-card tw-min-h-card tw-w-card tw-rounded-squid-xl tw-border-[1px] tw-border-solid tw-border-material-light-thick tw-bg-material-light-thick tw-p-squid-xs tw-backdrop-blur/10 tw-backdrop-saturate-150", children: jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-full tw-max-h-[660px] tw-w-full tw-flex-col tw-overflow-hidden tw-rounded-squid-l tw-bg-grey-900 tw-text-grey-300", children: children }) }));
2992
2984
  }
2993
2985
 
2994
2986
  function MaxIcon() {
@@ -3000,14 +2992,19 @@ function SwapInputsIcon() {
3000
2992
  }
3001
2993
 
3002
2994
  function WalletAddress({ address, ens }) {
3003
- return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", children: ens ? ens : (address === null || address === void 0 ? void 0 : address.slice(0, 6)) + '...' + (address === null || address === void 0 ? void 0 : address.slice(-4)) }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronArrowIcon, {}) })] }));
2995
+ return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", children: ens
2996
+ ? ens
2997
+ : address
2998
+ ? (address === null || address === void 0 ? void 0 : address.slice(0, 6)) + '...' + (address === null || address === void 0 ? void 0 : address.slice(-4))
2999
+ : '' }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronArrowIcon, {}) })] }));
3004
3000
  }
3005
3001
 
3006
- function SwapConfiguration({ priceImpactPercentage, amount = 0, swapAmountUsd = 0, balance = '0', isFetching = false, chain, token, direction, }) {
3007
- const priceImpactClass = (priceImpactPercentage !== null && priceImpactPercentage !== void 0 ? priceImpactPercentage : 0) > 5
3002
+ function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, }) {
3003
+ var _a;
3004
+ const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
3008
3005
  ? 'tw-text-status-negative'
3009
3006
  : 'tw-text-grey-300';
3010
- 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("div", { 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 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, { className: "tw-text-grey-600", size: "small", children: ":" }), jsxRuntime.jsx(WalletAddress, { ens: "so-so.eth" })] }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { 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 }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m", children: jsxRuntime.jsx("input", { className: "tw-my-squid-xs tw-h-[55px] tw-w-full 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-royal-400 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-outline-none", placeholder: "0", value: 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: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(SwapInputsIcon, {}), jsxRuntime.jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage ? (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("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balance }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
3007
+ 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 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, { className: "tw-text-grey-600", size: "small", children: ":" }), jsxRuntime.jsx(WalletAddress, { ens: address })] }) }), 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 }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsxRuntime.jsx("input", { className: "tw-h-[55px] tw-w-full 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 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none", placeholder: "0", value: amount, onChange: onAmountChange }) }), !(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: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", 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("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balance }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
3011
3008
  }
3012
3009
 
3013
3010
  function SwapProgressViewHeader({ title, description, }) {
@@ -3072,12 +3069,12 @@ function RefreshIcon() {
3072
3069
  }
3073
3070
 
3074
3071
  function DropdownMenu({ dropdownRef, items, className, }) {
3075
- return (jsxRuntime.jsx("div", { ref: dropdownRef, children: jsxRuntime.jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsxRuntime.jsx("ul", { className: "custom-scrollbar tw-flex tw-w-[144px] tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs", children: items.map((item) => (jsxRuntime.jsx(DropdownMenuItem, Object.assign({}, item)))) }) }) }));
3072
+ return (jsxRuntime.jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsxRuntime.jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsxRuntime.jsx("ul", { className: "tw-flex tw-w-[144px] tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs", children: items.map((item) => (jsxRuntime.jsx(DropdownMenuItem, Object.assign({}, item)))) }) }) }));
3076
3073
  }
3077
3074
 
3078
3075
  function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel = 'Pending', }) {
3079
3076
  const { isModalOpen, modalRef, openModalButtonRef, openModal } = useModal();
3080
- return (jsxRuntime.jsx("li", { className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxRuntime.jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [isPending ? (jsxRuntime.jsx("span", { className: "tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, {}) })) : null, jsxRuntime.jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsxRuntime.jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [jsxRuntime.jsx(CaptionText, { children: fromLabel }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronRightSmallIcon, {}) }), jsxRuntime.jsx(CaptionText, { children: toLabel })] }), jsxRuntime.jsx("div", { className: "tw-transition-opacity group-hover/history-item:tw-opacity-0", children: isPending ? (jsxRuntime.jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsxRuntime.jsx(CaptionText, { children: dateCompleted })) }), jsxRuntime.jsx("button", { className: "tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity group-hover/history-item:tw-opacity-100", onClick: openModal, ref: openModalButtonRef, children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), jsxRuntime.jsx(BodyText, { size: "small", children: toAmount })] })] }), isModalOpen ? (jsxRuntime.jsx(DropdownMenu, { dropdownRef: modalRef, items: [
3077
+ return (jsxRuntime.jsx("li", { className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxRuntime.jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [isPending ? (jsxRuntime.jsx("span", { className: "tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, {}) })) : null, jsxRuntime.jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsxRuntime.jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [jsxRuntime.jsx(CaptionText, { children: fromLabel }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronRightSmallIcon, {}) }), jsxRuntime.jsx(CaptionText, { children: toLabel })] }), jsxRuntime.jsx("div", { className: "tw-transition-opacity group-hover/history-item:tw-opacity-0", children: isPending ? (jsxRuntime.jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsxRuntime.jsx(CaptionText, { children: dateCompleted })) }), jsxRuntime.jsx("button", { className: "tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity group-hover/history-item:tw-opacity-100", onClick: openModal, ref: openModalButtonRef, children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), jsxRuntime.jsx(BodyText, { size: "small", children: toAmount })] })] }), isModalOpen ? (jsxRuntime.jsx(DropdownMenu, { className: "-tw-left-[85px] tw-top-7", dropdownRef: modalRef, items: [
3081
3078
  {
3082
3079
  label: 'Repeat swap',
3083
3080
  icon: jsxRuntime.jsx(RefreshIcon, {}),
@@ -3170,7 +3167,7 @@ function SwapStepsCollapsed({ steps, currentStepCount: _currentStepCount, }) {
3170
3167
  setIsShowRouteAnimationRunning(true);
3171
3168
  }, className: "tw-relative tw-flex tw-min-h-button tw-w-full tw-items-center tw-overflow-hidden tw-rounded-squid-xxl tw-border tw-border-material-light-thin tw-bg-grey-800 tw-px-squid-xs tw-text-grey-300", children: [!isLastStep && (jsxRuntime.jsxs("span", { className: "tw-absolute -tw-top-1.5", children: [jsxRuntime.jsx("span", { className: "tw-absolute tw-top-1 tw-h-full tw-w-full -tw-translate-x-1/2 tw-bg-gradient-to-b tw-from-grey-800 tw-to-transparent" }), jsxRuntime.jsx(SwapStepSeparator, {})] })), jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: currentStep.descriptionBlocks, chipContent: currentStep.chipContent }), !isFirstStep && (jsxRuntime.jsxs("span", { className: "tw-absolute -tw-bottom-1.5", children: [jsxRuntime.jsx("span", { className: "tw-absolute tw-bottom-1 tw-h-full tw-w-full -tw-translate-x-1/2 tw-bg-gradient-to-b tw-from-transparent tw-to-grey-800" }), jsxRuntime.jsx(SwapStepSeparator, {})] }))] }) }), isRouteVisible && (jsxRuntime.jsxs("div", { className: cn('tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[536px] tw-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800', isShowRouteAnimationRunning
3172
3169
  ? 'tw-animate-slide-to-top'
3173
- : 'tw-animate-slide-to-bottom'), children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsxRuntime.jsx("button", { onClick: () => setIsShowRouteAnimationRunning(false), className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsxRuntime.jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsxRuntime.jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsxRuntime.jsx("ul", { className: "custom-scrollbar tw-flex tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", children: steps.map((step, index) => (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1) }, index))) }), jsxRuntime.jsx("footer", { className: "tw-flex tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsxRuntime.jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] }))] }));
3170
+ : 'tw-animate-slide-to-bottom'), children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsxRuntime.jsx("button", { onClick: () => setIsShowRouteAnimationRunning(false), className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsxRuntime.jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsxRuntime.jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsxRuntime.jsx("ul", { className: "tw-flex tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", children: steps.map((step, index) => (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1) }, index))) }), jsxRuntime.jsx("footer", { className: "tw-flex tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsxRuntime.jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] }))] }));
3174
3171
  }
3175
3172
 
3176
3173
  function TokenPair({ firstToken, secondToken }) {
package/dist/cjs/types/components/badges/UsdAmount.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  interface UsdAmountProps {
2
- usdAmount: number;
2
+ usdAmount: string;
3
3
  }
4
4
  export declare function UsdAmount({ usdAmount }: UsdAmountProps): import("react/jsx-runtime").JSX.Element;
5
5
  export {};
package/dist/cjs/types/components/buttons/AssetsButton.d.ts CHANGED
@@ -5,6 +5,7 @@ interface AssetsButtonProps {
5
5
  chainBgColor?: string;
6
6
  tokenBgColor?: string;
7
7
  tokenTextColor?: string;
8
+ onClick?: () => void;
8
9
  }
9
- export declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
10
+ export declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, onClick, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
10
11
  export {};
package/dist/cjs/types/components/icons/Arrow.d.ts CHANGED
@@ -6,7 +6,10 @@ export declare function ChevronLargeDownIcon({ size }: {
6
6
  size?: string;
7
7
  }): import("react/jsx-runtime").JSX.Element;
8
8
  export declare function ChevronTopIcon(): import("react/jsx-runtime").JSX.Element;
9
- export declare function ChevronLargeRightIcon(): import("react/jsx-runtime").JSX.Element;
9
+ export declare function ChevronLargeRightIcon({ size, className, }: {
10
+ size?: string;
11
+ className?: string;
12
+ }): import("react/jsx-runtime").JSX.Element;
10
13
  export declare function ChevronRightSmallIcon(): import("react/jsx-runtime").JSX.Element;
11
14
  export declare function ArrowLeftIcon(): import("react/jsx-runtime").JSX.Element;
12
15
  export declare function ArrowRightUpCircleIcon(): import("react/jsx-runtime").JSX.Element;
package/dist/cjs/types/components/layout/DetailsToolbar.d.ts CHANGED
@@ -1,7 +1,12 @@
1
- import { DetailsToolbarState } from '../../types/components';
1
+ import { BoostMode, DetailsToolbarState } from '../../types/components';
2
2
  interface DetailsToolbarProps {
3
3
  state?: DetailsToolbarState;
4
4
  errorMessage: string;
5
+ boostMode?: BoostMode;
6
+ onToggleBoostMode?: ({ boostMode }: {
7
+ boostMode: BoostMode;
8
+ }) => void;
9
+ onInvertSwapButtonClick?: () => void;
5
10
  }
6
- export declare function DetailsToolbar({ state, errorMessage, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
11
+ export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
7
12
  export {};
package/dist/cjs/types/components/layout/NavigationBar.d.ts CHANGED
@@ -4,6 +4,7 @@ interface NavigationBarProps {
4
4
  logoUrl?: string;
5
5
  transparent?: boolean;
6
6
  displayButtonShadows?: boolean;
7
+ onBackButtonClick?: () => void;
7
8
  }
8
- export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
9
+ export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
9
10
  export {};
package/dist/cjs/types/components/layout/SwapConfiguration.d.ts CHANGED
@@ -1,9 +1,10 @@
1
+ /// <reference types="react" />
1
2
  import { SwapDirection } from '../../types/components';
2
3
  interface SwapConfigurationProps {
3
4
  direction: SwapDirection;
4
- priceImpactPercentage?: number;
5
- amount?: number;
6
- swapAmountUsd?: number;
5
+ priceImpactPercentage?: string;
6
+ amount?: string;
7
+ swapAmountUsd?: string;
7
8
  balance?: string;
8
9
  isFetching?: boolean;
9
10
  chain?: {
@@ -16,6 +17,10 @@ interface SwapConfigurationProps {
16
17
  bgColor: string;
17
18
  textColor: string;
18
19
  };
20
+ address?: string;
21
+ onAmountChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
22
+ onWalletButtonClick?: () => void;
23
+ onAssetsButtonClick?: () => void;
19
24
  }
20
- export declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
25
+ export declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
21
26
  export {};
package/dist/cjs/types/types/components.d.ts CHANGED
@@ -14,10 +14,5 @@ export type SwapStep = {
14
14
  chipContent: React.ReactNode;
15
15
  routeStepOrder: number;
16
16
  };
17
- export declare enum DetailsToolbarState {
18
- FULL = 0,
19
- LOADING = 1,
20
- EMPTY = 2,
21
- ERROR = 3
22
- }
17
+ export type DetailsToolbarState = 'full' | 'loading' | 'empty' | 'error';
23
18
  export type ThemeType = 'light' | 'dark';
package/dist/esm/index.js CHANGED
@@ -2626,8 +2626,8 @@ function ArrowTriangle() {
2626
2626
  function ChevronLargeDownIcon({ size = '24' }) {
2627
2627
  return (jsx("svg", { width: size, height: size, viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", 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" }) }));
2628
2628
  }
2629
- function ChevronLargeRightIcon() {
2630
- 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: "M6.66675 14L9.64035 8.64754C9.86407 8.24484 9.86407 7.75519 9.64035 7.35249L6.66675 2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
2629
+ function ChevronLargeRightIcon({ size = '16', className, }) {
2630
+ 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.66675 14L9.64035 8.64754C9.86407 8.24484 9.86407 7.75519 9.64035 7.35249L6.66675 2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
2631
2631
  }
2632
2632
  function ChevronRightSmallIcon() {
2633
2633
  return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: jsx("path", { d: "M6.66675 10.6667L8.86201 8.47141C9.12236 8.21106 9.12236 7.78896 8.86201 7.52861L6.66675 5.33334", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
@@ -2760,7 +2760,7 @@ const themeTypesKeys = {
2760
2760
 
2761
2761
  const imageClass = 'tw-w-[40px] tw-aspect-square tw-flex tw-items-center tw-justify-center';
2762
2762
  const defaultBgColor = `var(${themeTypesKeys['royal-500'].cssVariable})`;
2763
- function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor = defaultBgColor, tokenBgColor = defaultBgColor, tokenTextColor, }) {
2763
+ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor = defaultBgColor, tokenBgColor = defaultBgColor, tokenTextColor, onClick, }) {
2764
2764
  const bgGradient = useMemo(() => {
2765
2765
  if (!chainImageUrl) {
2766
2766
  return `linear-gradient(to right, ${defaultBgColor}, ${defaultBgColor})`;
@@ -2768,16 +2768,16 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
2768
2768
  if (!tokenImageUrl) {
2769
2769
  return `linear-gradient(90deg, ${chainBgColor} 54.86%, ${tokenBgColor} 95.83%)`;
2770
2770
  }
2771
- return `linear-gradient(to right, ${chainBgColor} 47.5%, ${tokenBgColor} 52.5%)`;
2771
+ return `linear-gradient(to right, ${chainBgColor} 43.5%, ${tokenBgColor} 56.55%)`;
2772
2772
  }, [chainBgColor, tokenBgColor]);
2773
- return (jsxs("div", { className: "tw-relative tw-flex tw-h-squid-xl tw-min-w-[209px] tw-items-center tw-text-grey-100", children: [jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] 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-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
2773
+ return (jsxs("div", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-min-w-[209px] tw-items-center tw-text-grey-100", 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-cursor-pointer tw-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
2774
2774
  backgroundImage: bgGradient,
2775
2775
  }, children: jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsx("img", { src: chainImageUrl, alt: "" })) : (jsx(Fragment, { children: jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsx("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-rounded-bl-full tw-rounded-tl-full tw-border-b tw-border-t tw-border-material-light-thin'), style: {
2776
2776
  backgroundColor: tokenBgColor,
2777
- }, children: jsx("img", { src: tokenImageUrl, alt: "", className: "tw-h-full -tw-translate-x-[2px]" }) })) : null, jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl 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: {
2777
+ }, children: jsx("img", { src: tokenImageUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl -tw-translate-x-[2px]" }) })) : 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: {
2778
2778
  backgroundColor: tokenBgColor,
2779
2779
  color: tokenTextColor,
2780
- }, children: [jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsx(ChevronLargeRightIcon, {})] })] }));
2780
+ }, children: [jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsx(ChevronLargeRightIcon, { className: "tw-text-material-light-thick" })] })] }));
2781
2781
  }
2782
2782
 
2783
2783
  const animationDuration = '500ms';
@@ -2853,7 +2853,7 @@ function EthereumIcon() {
2853
2853
  }
2854
2854
 
2855
2855
  function FeeButton() {
2856
- return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(Chip, { label: "Fee" }), jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(Chip, { icon: jsx(EthereumIcon, {}) }), jsx(UsdAmount, { usdAmount: 560 })] })] }));
2856
+ return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(Chip, { label: "Fee" }), jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(Chip, { icon: jsx(EthereumIcon, {}) }), jsx(UsdAmount, { usdAmount: '560' })] })] }));
2857
2857
  }
2858
2858
 
2859
2859
  // font size, line height, and letter spacing classes
@@ -2921,7 +2921,7 @@ const borderRadiusClassMap = {
2921
2921
  };
2922
2922
  function Menu(_a) {
2923
2923
  var { children, containerClassName, contentClassName, title, displayControls, rounded = 'lg' } = _a, props = __rest(_a, ["children", "containerClassName", "contentClassName", "title", "displayControls", "rounded"]);
2924
- return (jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), children: jsxs("div", { className: cn('tw-backdrop-blur/10 tw-relative tw-inline-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-s tw-text-center tw-text-material-light-thick group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [title ? (jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-py-squid-xxs tw-text-grey-100", children: jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsx(CaptionText, { className: "tw-z-20 tw-self-stretch", children: children })) : (jsx("div", { className: "tw-z-20", children: children })), displayControls ? (jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, jsx("div", { className: cn('tw-backdrop-blur/10 tw-absolute tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
2924
+ return (jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), children: jsxs("div", { className: cn('tw-relative tw-inline-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-s tw-text-center tw-text-material-light-thick tw-backdrop-blur/20 tw-backdrop-saturate-150 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [title ? (jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-py-squid-xxs tw-text-grey-100", children: jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsx(CaptionText, { className: "tw-z-20 tw-self-stretch", children: children })) : (jsx("div", { className: "tw-z-20", children: children })), displayControls ? (jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, jsx("div", { className: cn('tw-absolute tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
2925
2925
  }
2926
2926
 
2927
2927
  const tooltipWidthClassMap = {
@@ -2945,27 +2945,19 @@ function Boost({ boostMode, onToggleBoostMode }) {
2945
2945
  return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-bg-grey-900 tw-pr-squid-xxs", children: [jsx(BoostButton, { boostMode: boostMode, onToggleBoostMode: onToggleBoostMode }), jsx(Chip, { label: boostMode === 'normal' ? '10m' : '20s', className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' ? 'tw-bg-grey-300' : 'tw-bg-status-positive') })] }));
2946
2946
  }
2947
2947
 
2948
- var DetailsToolbarState;
2949
- (function (DetailsToolbarState) {
2950
- DetailsToolbarState[DetailsToolbarState["FULL"] = 0] = "FULL";
2951
- DetailsToolbarState[DetailsToolbarState["LOADING"] = 1] = "LOADING";
2952
- DetailsToolbarState[DetailsToolbarState["EMPTY"] = 2] = "EMPTY";
2953
- DetailsToolbarState[DetailsToolbarState["ERROR"] = 3] = "ERROR";
2954
- })(DetailsToolbarState || (DetailsToolbarState = {}));
2955
-
2956
2948
  function EmojiSadIcon() {
2957
2949
  return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM13.5341 12.4645C11.5815 10.5118 8.41568 10.5118 6.46306 12.4645C6.07254 12.855 6.07254 13.4882 6.46306 13.8787C6.85358 14.2692 7.48675 14.2692 7.87727 13.8787C9.04885 12.7071 10.9483 12.7071 12.1199 13.8787C12.5104 14.2692 13.1436 14.2692 13.5341 13.8787C13.9247 13.4882 13.9247 12.855 13.5341 12.4645ZM8.5 7.5C8.5 8.32843 7.94036 9 7.25 9C6.55964 9 6 8.32843 6 7.5C6 6.67157 6.55964 6 7.25 6C7.94036 6 8.5 6.67157 8.5 7.5ZM12.75 9C13.4404 9 14 8.32843 14 7.5C14 6.67157 13.4404 6 12.75 6C12.0596 6 11.5 6.67157 11.5 7.5C11.5 8.32843 12.0596 9 12.75 9Z", fill: "currentColor" }) }));
2958
2950
  }
2959
2951
 
2960
2952
  const detailStateClassMap = {
2961
- [DetailsToolbarState.LOADING]: 'tw-opacity-33 tw-pointer-events-none',
2962
- [DetailsToolbarState.EMPTY]: 'tw-pointer-events-none tw-hidden',
2963
- [DetailsToolbarState.ERROR]: 'tw-opacity-33 tw-pointer-events-none',
2964
- [DetailsToolbarState.FULL]: '',
2953
+ loading: 'tw-opacity-33 tw-pointer-events-none',
2954
+ empty: 'tw-pointer-events-none tw-hidden',
2955
+ error: 'tw-opacity-33 tw-pointer-events-none',
2956
+ full: '',
2965
2957
  };
2966
- function DetailsToolbar({ state = DetailsToolbarState.FULL, errorMessage, }) {
2958
+ function DetailsToolbar({ state = 'full', errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, }) {
2967
2959
  const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
2968
- return (jsx("aside", { className: "tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-px-squid-m tw-py-squid-xxs tw-text-grey-500", children: state === DetailsToolbarState.ERROR ? (jsx(ErrorMessage, { message: errorMessage })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, {}) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === DetailsToolbarState.LOADING ? (jsx(Loader, { size: "32" })) : (jsx(Button, { variant: "tertiary", size: "md", className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsx(ChevronLargeDownIcon, {}) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { boostMode: "boost" }) })] })) }));
2960
+ return (jsx("aside", { className: "tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-px-squid-m tw-py-squid-xxs tw-text-grey-500", children: state === 'error' ? (jsx(ErrorMessage, { message: errorMessage })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, {}) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsx(Loader, { size: "32" })) : (jsx(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsx(ChevronLargeDownIcon, {}) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { boostMode: boostMode, onToggleBoostMode: onToggleBoostMode }) })] })) }));
2969
2961
  }
2970
2962
  const ErrorMessage = ({ message }) => {
2971
2963
  return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-flex-1 tw-items-center tw-gap-squid-xxs tw-text-status-negative", children: [jsx(EmojiSadIcon, {}), jsx(CaptionText, { children: message })] }));
@@ -2974,19 +2966,19 @@ const ErrorMessage = ({ message }) => {
2974
2966
  function Modal({ children }) {
2975
2967
  return (
2976
2968
  // modal container
2977
- jsx("div", { className: "tw-backdrop-blur/20 tw-absolute tw-inset-0 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-thick tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m", children: jsx("div", { className: "tw-relative tw-flex tw-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end", children: children }) }));
2969
+ jsx("div", { className: "tw-absolute tw-inset-0 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-thick tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-backdrop-blur/20 tw-backdrop-saturate-150", children: jsx("div", { className: "tw-relative tw-flex tw-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end", children: children }) }));
2978
2970
  }
2979
2971
 
2980
- function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, }) {
2972
+ function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, }) {
2981
2973
  return (jsxs("nav", { className: cn('tw-flex tw-max-h-[120px] tw-min-w-96 tw-flex-col tw-text-grey-300', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900'), children: [jsxs("div", { className: cn('tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs', displayBackButton ? 'tw-px-squid-m' : 'tw-pl-squid-l tw-pr-squid-m'), children: [displayBackButton ? (jsx(Button, { className: displayButtonShadows
2982
- ? 'group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2'
2983
- : undefined, variant: "tertiary", size: "md", icon: jsx(ArrowLeftIcon, {}) })) : null, logoUrl ? (jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: jsx(AddressButton, { className: displayButtonShadows
2984
- ? 'group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2'
2974
+ ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
2975
+ : undefined, variant: "tertiary", size: "md", icon: jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: jsx(AddressButton, { className: displayButtonShadows
2976
+ ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
2985
2977
  : undefined, label: "Connect" }) })] }), title ? (jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-l tw-py-squid-xxs", children: jsx(HeadingText, { size: "small", children: title }) })) : null] }));
2986
2978
  }
2987
2979
 
2988
2980
  function ProductCard({ children }) {
2989
- return (jsx("div", { className: "tw-backdrop-blur/10 tw-h-card tw-min-h-card tw-w-card tw-rounded-squid-xl tw-border-[1px] tw-border-solid tw-border-material-light-thick tw-bg-material-light-thick tw-p-squid-xs", children: jsx("div", { className: "tw-relative tw-flex tw-h-full tw-max-h-[660px] tw-w-full tw-flex-col tw-overflow-hidden tw-rounded-squid-l tw-bg-grey-900 tw-text-grey-300", children: children }) }));
2981
+ return (jsx("div", { className: "tw-h-card tw-min-h-card tw-w-card tw-rounded-squid-xl tw-border-[1px] tw-border-solid tw-border-material-light-thick tw-bg-material-light-thick tw-p-squid-xs tw-backdrop-blur/10 tw-backdrop-saturate-150", children: jsx("div", { className: "tw-relative tw-flex tw-h-full tw-max-h-[660px] tw-w-full tw-flex-col tw-overflow-hidden tw-rounded-squid-l tw-bg-grey-900 tw-text-grey-300", children: children }) }));
2990
2982
  }
2991
2983
 
2992
2984
  function MaxIcon() {
@@ -2998,14 +2990,19 @@ function SwapInputsIcon() {
2998
2990
  }
2999
2991
 
3000
2992
  function WalletAddress({ address, ens }) {
3001
- return (jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", children: ens ? ens : (address === null || address === void 0 ? void 0 : address.slice(0, 6)) + '...' + (address === null || address === void 0 ? void 0 : address.slice(-4)) }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronArrowIcon, {}) })] }));
2993
+ return (jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", children: ens
2994
+ ? ens
2995
+ : address
2996
+ ? (address === null || address === void 0 ? void 0 : address.slice(0, 6)) + '...' + (address === null || address === void 0 ? void 0 : address.slice(-4))
2997
+ : '' }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronArrowIcon, {}) })] }));
3002
2998
  }
3003
2999
 
3004
- function SwapConfiguration({ priceImpactPercentage, amount = 0, swapAmountUsd = 0, balance = '0', isFetching = false, chain, token, direction, }) {
3005
- const priceImpactClass = (priceImpactPercentage !== null && priceImpactPercentage !== void 0 ? priceImpactPercentage : 0) > 5
3000
+ function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, }) {
3001
+ var _a;
3002
+ const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
3006
3003
  ? 'tw-text-status-negative'
3007
3004
  : 'tw-text-grey-300';
3008
- 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("div", { 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 hover:tw-bg-material-light-thin", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" }), jsx(WalletAddress, { ens: "so-so.eth" })] }) }), jsx("div", { className: "tw-px-squid-l", children: jsx(AssetsButton, { 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 }) }), jsx("div", { className: "tw-px-squid-m", children: jsx("input", { className: "tw-my-squid-xs tw-h-[55px] tw-w-full 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-royal-400 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-outline-none", placeholder: "0", value: 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: [jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(SwapInputsIcon, {}), jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage ? (jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] }), jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
3005
+ 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 hover:tw-bg-material-light-thin", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" }), jsx(WalletAddress, { ens: address })] }) }), 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 }) }), jsx("div", { className: "tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsx("input", { className: "tw-h-[55px] tw-w-full 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 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none", placeholder: "0", value: amount, onChange: onAmountChange }) }), !(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: [jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", 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("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
3009
3006
  }
3010
3007
 
3011
3008
  function SwapProgressViewHeader({ title, description, }) {
@@ -3070,12 +3067,12 @@ function RefreshIcon() {
3070
3067
  }
3071
3068
 
3072
3069
  function DropdownMenu({ dropdownRef, items, className, }) {
3073
- return (jsx("div", { ref: dropdownRef, children: jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsx("ul", { className: "custom-scrollbar tw-flex tw-w-[144px] tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs", children: items.map((item) => (jsx(DropdownMenuItem, Object.assign({}, item)))) }) }) }));
3070
+ return (jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsx("ul", { className: "tw-flex tw-w-[144px] tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs", children: items.map((item) => (jsx(DropdownMenuItem, Object.assign({}, item)))) }) }) }));
3074
3071
  }
3075
3072
 
3076
3073
  function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel = 'Pending', }) {
3077
3074
  const { isModalOpen, modalRef, openModalButtonRef, openModal } = useModal();
3078
- return (jsx("li", { className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [isPending ? (jsx("span", { className: "tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsx(DotGrid1x3HorizontalIcon, {}) })) : null, jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center", children: [jsx(CaptionText, { children: fromLabel }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronRightSmallIcon, {}) }), jsx(CaptionText, { children: toLabel })] }), jsx("div", { className: "tw-transition-opacity group-hover/history-item:tw-opacity-0", children: isPending ? (jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsx(CaptionText, { children: dateCompleted })) }), jsx("button", { className: "tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity group-hover/history-item:tw-opacity-100", onClick: openModal, ref: openModalButtonRef, children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] }), isModalOpen ? (jsx(DropdownMenu, { dropdownRef: modalRef, items: [
3075
+ return (jsx("li", { className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [isPending ? (jsx("span", { className: "tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsx(DotGrid1x3HorizontalIcon, {}) })) : null, jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center", children: [jsx(CaptionText, { children: fromLabel }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronRightSmallIcon, {}) }), jsx(CaptionText, { children: toLabel })] }), jsx("div", { className: "tw-transition-opacity group-hover/history-item:tw-opacity-0", children: isPending ? (jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsx(CaptionText, { children: dateCompleted })) }), jsx("button", { className: "tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity group-hover/history-item:tw-opacity-100", onClick: openModal, ref: openModalButtonRef, children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] }), isModalOpen ? (jsx(DropdownMenu, { className: "-tw-left-[85px] tw-top-7", dropdownRef: modalRef, items: [
3079
3076
  {
3080
3077
  label: 'Repeat swap',
3081
3078
  icon: jsx(RefreshIcon, {}),
@@ -3168,7 +3165,7 @@ function SwapStepsCollapsed({ steps, currentStepCount: _currentStepCount, }) {
3168
3165
  setIsShowRouteAnimationRunning(true);
3169
3166
  }, className: "tw-relative tw-flex tw-min-h-button tw-w-full tw-items-center tw-overflow-hidden tw-rounded-squid-xxl tw-border tw-border-material-light-thin tw-bg-grey-800 tw-px-squid-xs tw-text-grey-300", children: [!isLastStep && (jsxs("span", { className: "tw-absolute -tw-top-1.5", children: [jsx("span", { className: "tw-absolute tw-top-1 tw-h-full tw-w-full -tw-translate-x-1/2 tw-bg-gradient-to-b tw-from-grey-800 tw-to-transparent" }), jsx(SwapStepSeparator, {})] })), jsx(SwapStepItem, { descriptionBlocks: currentStep.descriptionBlocks, chipContent: currentStep.chipContent }), !isFirstStep && (jsxs("span", { className: "tw-absolute -tw-bottom-1.5", children: [jsx("span", { className: "tw-absolute tw-bottom-1 tw-h-full tw-w-full -tw-translate-x-1/2 tw-bg-gradient-to-b tw-from-transparent tw-to-grey-800" }), jsx(SwapStepSeparator, {})] }))] }) }), isRouteVisible && (jsxs("div", { className: cn('tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[536px] tw-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800', isShowRouteAnimationRunning
3170
3167
  ? 'tw-animate-slide-to-top'
3171
- : 'tw-animate-slide-to-bottom'), children: [jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsx("button", { onClick: () => setIsShowRouteAnimationRunning(false), className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsx("ul", { className: "custom-scrollbar tw-flex tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", children: steps.map((step, index) => (jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1) }, index))) }), jsx("footer", { className: "tw-flex tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] }))] }));
3168
+ : 'tw-animate-slide-to-bottom'), children: [jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsx("button", { onClick: () => setIsShowRouteAnimationRunning(false), className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsx("ul", { className: "tw-flex tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", children: steps.map((step, index) => (jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1) }, index))) }), jsx("footer", { className: "tw-flex tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] }))] }));
3172
3169
  }
3173
3170
 
3174
3171
  function TokenPair({ firstToken, secondToken }) {
package/dist/esm/types/components/badges/UsdAmount.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  interface UsdAmountProps {
2
- usdAmount: number;
2
+ usdAmount: string;
3
3
  }
4
4
  export declare function UsdAmount({ usdAmount }: UsdAmountProps): import("react/jsx-runtime").JSX.Element;
5
5
  export {};
package/dist/esm/types/components/buttons/AssetsButton.d.ts CHANGED
@@ -5,6 +5,7 @@ interface AssetsButtonProps {
5
5
  chainBgColor?: string;
6
6
  tokenBgColor?: string;
7
7
  tokenTextColor?: string;
8
+ onClick?: () => void;
8
9
  }
9
- export declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
10
+ export declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, onClick, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
10
11
  export {};
package/dist/esm/types/components/icons/Arrow.d.ts CHANGED
@@ -6,7 +6,10 @@ export declare function ChevronLargeDownIcon({ size }: {
6
6
  size?: string;
7
7
  }): import("react/jsx-runtime").JSX.Element;
8
8
  export declare function ChevronTopIcon(): import("react/jsx-runtime").JSX.Element;
9
- export declare function ChevronLargeRightIcon(): import("react/jsx-runtime").JSX.Element;
9
+ export declare function ChevronLargeRightIcon({ size, className, }: {
10
+ size?: string;
11
+ className?: string;
12
+ }): import("react/jsx-runtime").JSX.Element;
10
13
  export declare function ChevronRightSmallIcon(): import("react/jsx-runtime").JSX.Element;
11
14
  export declare function ArrowLeftIcon(): import("react/jsx-runtime").JSX.Element;
12
15
  export declare function ArrowRightUpCircleIcon(): import("react/jsx-runtime").JSX.Element;
package/dist/esm/types/components/layout/DetailsToolbar.d.ts CHANGED
@@ -1,7 +1,12 @@
1
- import { DetailsToolbarState } from '../../types/components';
1
+ import { BoostMode, DetailsToolbarState } from '../../types/components';
2
2
  interface DetailsToolbarProps {
3
3
  state?: DetailsToolbarState;
4
4
  errorMessage: string;
5
+ boostMode?: BoostMode;
6
+ onToggleBoostMode?: ({ boostMode }: {
7
+ boostMode: BoostMode;
8
+ }) => void;
9
+ onInvertSwapButtonClick?: () => void;
5
10
  }
6
- export declare function DetailsToolbar({ state, errorMessage, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
11
+ export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
7
12
  export {};
package/dist/esm/types/components/layout/NavigationBar.d.ts CHANGED
@@ -4,6 +4,7 @@ interface NavigationBarProps {
4
4
  logoUrl?: string;
5
5
  transparent?: boolean;
6
6
  displayButtonShadows?: boolean;
7
+ onBackButtonClick?: () => void;
7
8
  }
8
- export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
9
+ export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
9
10
  export {};
package/dist/esm/types/components/layout/SwapConfiguration.d.ts CHANGED
@@ -1,9 +1,10 @@
1
+ /// <reference types="react" />
1
2
  import { SwapDirection } from '../../types/components';
2
3
  interface SwapConfigurationProps {
3
4
  direction: SwapDirection;
4
- priceImpactPercentage?: number;
5
- amount?: number;
6
- swapAmountUsd?: number;
5
+ priceImpactPercentage?: string;
6
+ amount?: string;
7
+ swapAmountUsd?: string;
7
8
  balance?: string;
8
9
  isFetching?: boolean;
9
10
  chain?: {
@@ -16,6 +17,10 @@ interface SwapConfigurationProps {
16
17
  bgColor: string;
17
18
  textColor: string;
18
19
  };
20
+ address?: string;
21
+ onAmountChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
22
+ onWalletButtonClick?: () => void;
23
+ onAssetsButtonClick?: () => void;
19
24
  }
20
- export declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
25
+ export declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
21
26
  export {};
package/dist/esm/types/types/components.d.ts CHANGED
@@ -14,10 +14,5 @@ export type SwapStep = {
14
14
  chipContent: React.ReactNode;
15
15
  routeStepOrder: number;
16
16
  };
17
- export declare enum DetailsToolbarState {
18
- FULL = 0,
19
- LOADING = 1,
20
- EMPTY = 2,
21
- ERROR = 3
22
- }
17
+ export type DetailsToolbarState = 'full' | 'loading' | 'empty' | 'error';
23
18
  export type ThemeType = 'light' | 'dark';
package/dist/index.css CHANGED
@@ -601,6 +601,10 @@ video {
601
601
  left: -5px;
602
602
  }
603
603
 
604
+ .-tw-left-\[85px\] {
605
+ left: -85px;
606
+ }
607
+
604
608
  .-tw-right-1\/3 {
605
609
  right: -33.333333%;
606
610
  }
@@ -665,6 +669,10 @@ video {
665
669
  left: 54px;
666
670
  }
667
671
 
672
+ .tw-left-\[70\%\] {
673
+ left: 70%;
674
+ }
675
+
668
676
  .tw-left-\[calc\(50\%-1\.5px\)\] {
669
677
  left: calc(50% - 1.5px);
670
678
  }
@@ -701,6 +709,10 @@ video {
701
709
  top: 0.25rem;
702
710
  }
703
711
 
712
+ .tw-top-7 {
713
+ top: 1.75rem;
714
+ }
715
+
704
716
  .tw-top-squid-xxs {
705
717
  top: 0.3125rem;
706
718
  }
@@ -744,11 +756,6 @@ video {
744
756
  margin-right: 0.3125rem;
745
757
  }
746
758
 
747
- .tw-my-squid-xs {
748
- margin-top: 0.625rem;
749
- margin-bottom: 0.625rem;
750
- }
751
-
752
759
  .-tw-mb-1 {
753
760
  margin-bottom: -0.25rem;
754
761
  }
@@ -1274,6 +1281,11 @@ video {
1274
1281
  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));
1275
1282
  }
1276
1283
 
1284
+ .tw-translate-x-1\/4 {
1285
+ --tw-translate-x: 25%;
1286
+ 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));
1287
+ }
1288
+
1277
1289
  .tw-rotate-90 {
1278
1290
  --tw-rotate: 90deg;
1279
1291
  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));
@@ -1854,6 +1866,10 @@ video {
1854
1866
  padding-bottom: 0.3125rem;
1855
1867
  }
1856
1868
 
1869
+ .tw-pb-\[15px\] {
1870
+ padding-bottom: 15px;
1871
+ }
1872
+
1857
1873
  .tw-pb-squid-l {
1858
1874
  padding-bottom: 1.875rem;
1859
1875
  }
@@ -1934,6 +1950,10 @@ video {
1934
1950
  padding-right: 0.3125rem;
1935
1951
  }
1936
1952
 
1953
+ .tw-pt-\[5px\] {
1954
+ padding-top: 5px;
1955
+ }
1956
+
1937
1957
  .tw-pt-squid-m {
1938
1958
  padding-top: 1.25rem;
1939
1959
  }
@@ -2037,6 +2057,10 @@ video {
2037
2057
  line-height: 20px !important;
2038
2058
  }
2039
2059
 
2060
+ .\!tw-leading-\[9px\] {
2061
+ line-height: 9px !important;
2062
+ }
2063
+
2040
2064
  .tw-leading-5 {
2041
2065
  line-height: 1.25rem;
2042
2066
  }
@@ -2049,10 +2073,6 @@ video {
2049
2073
  line-height: 13px;
2050
2074
  }
2051
2075
 
2052
- .tw-leading-\[15px\] {
2053
- line-height: 15px;
2054
- }
2055
-
2056
2076
  .tw-leading-\[20px\] {
2057
2077
  line-height: 20px;
2058
2078
  }
@@ -2200,14 +2220,30 @@ video {
2200
2220
  outline-offset: 2px;
2201
2221
  }
2202
2222
 
2223
+ .tw-outline {
2224
+ outline-style: solid;
2225
+ }
2226
+
2227
+ .tw-outline-1 {
2228
+ outline-width: 1px;
2229
+ }
2230
+
2203
2231
  .tw-outline-2 {
2204
2232
  outline-width: 2px;
2205
2233
  }
2206
2234
 
2235
+ .-tw-outline-offset-\[1px\] {
2236
+ outline-offset: -1px;
2237
+ }
2238
+
2207
2239
  .tw-outline-offset-0 {
2208
2240
  outline-offset: 0px;
2209
2241
  }
2210
2242
 
2243
+ .tw-outline-material-light-thin {
2244
+ outline-color: var(--squid-theme-material-light-thin);
2245
+ }
2246
+
2211
2247
  .tw-backdrop-blur\/10 {
2212
2248
  --tw-backdrop-blur: blur(10px);
2213
2249
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -2220,6 +2256,12 @@ video {
2220
2256
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
2221
2257
  }
2222
2258
 
2259
+ .tw-backdrop-saturate-150 {
2260
+ --tw-backdrop-saturate: saturate(1.5);
2261
+ -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
2262
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
2263
+ }
2264
+
2223
2265
  .tw-transition-colors {
2224
2266
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
2225
2267
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2286,17 +2328,6 @@ li {
2286
2328
  list-style-type: none;
2287
2329
  }
2288
2330
 
2289
- .custom-scrollbar::-webkit-scrollbar {
2290
- background-color: var(--squid-theme-grey-900);
2291
- width: 5px;
2292
- height: 5px;
2293
- margin: 4px;
2294
- }
2295
-
2296
- .custom-scrollbar::-webkit-scrollbar-thumb {
2297
- background-color: var(--squid-theme-grey-300);
2298
- }
2299
-
2300
2331
  .tw-swap-detail-list-item-gradient:nth-child(even) > div {
2301
2332
  background: linear-gradient(
2302
2333
  91deg,
@@ -2325,6 +2356,10 @@ li {
2325
2356
  background-color: var(--squid-theme-material-light-thin);
2326
2357
  }
2327
2358
 
2359
+ .focus\:tw-text-royal-400:focus {
2360
+ color: var(--squid-theme-royal-400);
2361
+ }
2362
+
2328
2363
  .focus\:tw-outline-none:focus {
2329
2364
  outline: 2px solid transparent;
2330
2365
  outline-offset: 2px;
package/dist/index.d.ts CHANGED
@@ -13,7 +13,7 @@ type BadgeSize = 'sm' | 'md';
13
13
  declare function BadgeImage({ imageUrl, badgeUrl, size, extraMarginForBadge, rounded, }: BadgeImageProps): react_jsx_runtime.JSX.Element | null;
14
14
 
15
15
  interface UsdAmountProps {
16
- usdAmount: number;
16
+ usdAmount: string;
17
17
  }
18
18
  declare function UsdAmount({ usdAmount }: UsdAmountProps): react_jsx_runtime.JSX.Element;
19
19
 
@@ -38,8 +38,9 @@ interface AssetsButtonProps {
38
38
  chainBgColor?: string;
39
39
  tokenBgColor?: string;
40
40
  tokenTextColor?: string;
41
+ onClick?: () => void;
41
42
  }
42
- declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, }: AssetsButtonProps): react_jsx_runtime.JSX.Element;
43
+ declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, onClick, }: AssetsButtonProps): react_jsx_runtime.JSX.Element;
43
44
 
44
45
  type TextSize = 'small' | 'medium' | 'large';
45
46
  type SwitchSize = 'small' | 'large';
@@ -56,12 +57,7 @@ type SwapStep = {
56
57
  chipContent: React.ReactNode;
57
58
  routeStepOrder: number;
58
59
  };
59
- declare enum DetailsToolbarState {
60
- FULL = 0,
61
- LOADING = 1,
62
- EMPTY = 2,
63
- ERROR = 3
64
- }
60
+ type DetailsToolbarState = 'full' | 'loading' | 'empty' | 'error';
65
61
  type ThemeType = 'light' | 'dark';
66
62
 
67
63
  interface BoostButtonProps {
@@ -139,8 +135,13 @@ declare function Boost({ boostMode, onToggleBoostMode }: BoostProps): react_jsx_
139
135
  interface DetailsToolbarProps {
140
136
  state?: DetailsToolbarState;
141
137
  errorMessage: string;
138
+ boostMode?: BoostMode;
139
+ onToggleBoostMode?: ({ boostMode }: {
140
+ boostMode: BoostMode;
141
+ }) => void;
142
+ onInvertSwapButtonClick?: () => void;
142
143
  }
143
- declare function DetailsToolbar({ state, errorMessage, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
144
+ declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
144
145
 
145
146
  type Rounded = 'sm' | 'lg';
146
147
  interface MenuProps extends React$1.ComponentProps<'div'> {
@@ -163,8 +164,9 @@ interface NavigationBarProps {
163
164
  logoUrl?: string;
164
165
  transparent?: boolean;
165
166
  displayButtonShadows?: boolean;
167
+ onBackButtonClick?: () => void;
166
168
  }
167
- declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
169
+ declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
168
170
 
169
171
  interface ProductCardProps {
170
172
  children?: React.ReactNode;
@@ -173,9 +175,9 @@ declare function ProductCard({ children }: ProductCardProps): react_jsx_runtime.
173
175
 
174
176
  interface SwapConfigurationProps {
175
177
  direction: SwapDirection;
176
- priceImpactPercentage?: number;
177
- amount?: number;
178
- swapAmountUsd?: number;
178
+ priceImpactPercentage?: string;
179
+ amount?: string;
180
+ swapAmountUsd?: string;
179
181
  balance?: string;
180
182
  isFetching?: boolean;
181
183
  chain?: {
@@ -188,8 +190,12 @@ interface SwapConfigurationProps {
188
190
  bgColor: string;
189
191
  textColor: string;
190
192
  };
193
+ address?: string;
194
+ onAmountChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
195
+ onWalletButtonClick?: () => void;
196
+ onAssetsButtonClick?: () => void;
191
197
  }
192
- declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
198
+ declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
193
199
 
194
200
  interface SwapProgressViewHeaderProps {
195
201
  title: string;
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.4.1",
8
+ "version": "0.4.3",
9
9
  "author": "",
10
10
  "license": "MIT",
11
11
  "scripts": {
@@ -54,8 +54,8 @@
54
54
  "@storybook/react-webpack5": "^8.0.1",
55
55
  "@storybook/test": "^8.0.1",
56
56
  "@types/color": "^3.0.6",
57
- "@types/react": "^18.3.1",
58
- "@types/react-dom": "^18.3.0",
57
+ "@types/react": "^18",
58
+ "@types/react-dom": "^18",
59
59
  "@typescript-eslint/eslint-plugin": "^6.4.0",
60
60
  "autoprefixer": "10.4.18",
61
61
  "concurrently": "8.2.2",
@@ -102,7 +102,7 @@
102
102
  }
103
103
  },
104
104
  "peerDependencies": {
105
- "react": "^18.3.1",
106
- "react-dom": "^18.3.1"
105
+ "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
106
+ "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
107
107
  }
108
108
  }