@0xsquid/ui 0.8.2 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -0
- package/dist/cjs/index.js +134 -71
- package/dist/cjs/types/components/badges/index.d.ts +1 -0
- package/dist/cjs/types/components/controls/Input.d.ts +3 -1
- package/dist/cjs/types/components/controls/Tooltip.d.ts +1 -2
- package/dist/cjs/types/components/layout/DropdownMenu.d.ts +4 -1
- package/dist/cjs/types/components/layout/ErrorMessage.d.ts +5 -2
- package/dist/cjs/types/components/layout/InfoBox.d.ts +8 -0
- package/dist/cjs/types/components/layout/Menu.d.ts +2 -1
- package/dist/cjs/types/components/layout/ProfileHeaderBackground.d.ts +1 -0
- package/dist/cjs/types/components/layout/SwapConfiguration.d.ts +2 -1
- package/dist/cjs/types/components/layout/index.d.ts +2 -0
- package/dist/cjs/types/components/lists/DropdownMenuItem.d.ts +2 -1
- package/dist/cjs/types/components/lists/HistoryItem.d.ts +3 -1
- package/dist/cjs/types/components/lists/SettingsItem.d.ts +5 -1
- package/dist/cjs/types/hooks/index.d.ts +1 -1
- package/dist/cjs/types/hooks/useDropdownMenu.d.ts +10 -0
- package/dist/cjs/types/stories/buttons/AssetsButton.stories.d.ts +2 -1
- package/dist/cjs/types/stories/controls/Input.stories.d.ts +1 -0
- package/dist/cjs/types/stories/layout/ErrorMessage.stories.d.ts +1 -0
- package/dist/cjs/types/stories/layout/InfoBox.stories.d.ts +7 -0
- package/dist/cjs/types/stories/lists/HistoryItem.stories.d.ts +1 -0
- package/dist/cjs/types/stories/lists/SettingsItem.stories.d.ts +3 -0
- package/dist/esm/index.js +131 -71
- package/dist/esm/types/components/badges/index.d.ts +1 -0
- package/dist/esm/types/components/controls/Input.d.ts +3 -1
- package/dist/esm/types/components/controls/Tooltip.d.ts +1 -2
- package/dist/esm/types/components/layout/DropdownMenu.d.ts +4 -1
- package/dist/esm/types/components/layout/ErrorMessage.d.ts +5 -2
- package/dist/esm/types/components/layout/InfoBox.d.ts +8 -0
- package/dist/esm/types/components/layout/Menu.d.ts +2 -1
- package/dist/esm/types/components/layout/ProfileHeaderBackground.d.ts +1 -0
- package/dist/esm/types/components/layout/SwapConfiguration.d.ts +2 -1
- package/dist/esm/types/components/layout/index.d.ts +2 -0
- package/dist/esm/types/components/lists/DropdownMenuItem.d.ts +2 -1
- package/dist/esm/types/components/lists/HistoryItem.d.ts +3 -1
- package/dist/esm/types/components/lists/SettingsItem.d.ts +5 -1
- package/dist/esm/types/hooks/index.d.ts +1 -1
- package/dist/esm/types/hooks/useDropdownMenu.d.ts +10 -0
- package/dist/esm/types/stories/buttons/AssetsButton.stories.d.ts +2 -1
- package/dist/esm/types/stories/controls/Input.stories.d.ts +1 -0
- package/dist/esm/types/stories/layout/ErrorMessage.stories.d.ts +1 -0
- package/dist/esm/types/stories/layout/InfoBox.stories.d.ts +7 -0
- package/dist/esm/types/stories/lists/HistoryItem.stories.d.ts +1 -0
- package/dist/esm/types/stories/lists/SettingsItem.stories.d.ts +3 -0
- package/dist/index.css +38 -20
- package/dist/index.d.ts +44 -16
- package/package.json +1 -1
- package/dist/cjs/types/hooks/useModal.d.ts +0 -10
- package/dist/esm/types/hooks/useModal.d.ts +0 -10
package/README.md
CHANGED
|
@@ -71,6 +71,28 @@ yarn format:fix
|
|
|
71
71
|
yarn lint:fix
|
|
72
72
|
```
|
|
73
73
|
|
|
74
|
+
### Folder structure
|
|
75
|
+
|
|
76
|
+
```
|
|
77
|
+
- src
|
|
78
|
+
- index.ts <- barrel file
|
|
79
|
+
- components
|
|
80
|
+
- index.ts <- barrel file
|
|
81
|
+
- buttons
|
|
82
|
+
- index.ts <- barrel file
|
|
83
|
+
- Button.tsx
|
|
84
|
+
- lists
|
|
85
|
+
- index.ts <- barrel file
|
|
86
|
+
- HistoryItem.tsx
|
|
87
|
+
- stories
|
|
88
|
+
- buttons
|
|
89
|
+
- Button.stories.tsx
|
|
90
|
+
- lists
|
|
91
|
+
- HistoryItem.stories.tsx
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
When creating a new component, don't forget to update the barrel file, exporting your component in the `index.ts` file in the corresponding component folder. You can also install the [AutoBarrel VSCode extension](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-auto-barrel).
|
|
95
|
+
|
|
74
96
|
### Images
|
|
75
97
|
|
|
76
98
|
In case you need to add images somewhere that need to be included in the final bundle, convert them to base64 instead.
|
package/dist/cjs/index.js
CHANGED
|
@@ -2563,6 +2563,10 @@ function BadgeImage({ imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, roun
|
|
|
2563
2563
|
return imageUrl ? (jsxRuntime.jsxs("div", { className: cn('tw-relative', extraMarginForBadge && badgeUrl ? 'tw-mr-1.5' : null, mainImageSizeClassMap[size]), children: [jsxRuntime.jsx("img", { src: imageUrl, alt: "", className: cn('tw-h-full tw-w-full', rounded ? ' tw-rounded-full' : 'tw-rounded-squid-xs') }), badgeUrl ? (jsxRuntime.jsx("img", { src: badgeUrl, alt: "", className: cn('tw-absolute -tw-right-1/3 tw-bottom-0 tw-z-10 tw-m-0 -tw-translate-x-1/3 tw-rounded-md tw-border-[1px] tw-border-grey-800', badgeSizeClassMap[size]) })) : null] })) : null;
|
|
2564
2564
|
}
|
|
2565
2565
|
|
|
2566
|
+
function LoadingSkeleton({ className, height = '20', }) {
|
|
2567
|
+
return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxRuntime.jsxs("g", { "clip-path": "url(#clip0_1083_18992)", children: [jsxRuntime.jsx("mask", { id: "mask0_1083_18992", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "100", height: "20", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1083_18992)" }) }), jsxRuntime.jsx("g", { mask: "url(#mask0_1083_18992)", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "currentColor" }) })] }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("linearGradient", { id: "paint0_linear_1083_18992", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient", children: [jsxRuntime.jsx("stop", { "stop-color": "#D9D9D9", "stop-opacity": "0.33" }), jsxRuntime.jsx("stop", { offset: "0.395881", "stop-color": "#737373", "stop-opacity": "0.33" }), jsxRuntime.jsx("stop", { offset: "0.597867", "stop-color": "#737373", "stop-opacity": "0.66" }), jsxRuntime.jsx("stop", { offset: "0.697004", "stop-color": "#737373", "stop-opacity": "0.33" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_1083_18992", children: jsxRuntime.jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] })] }));
|
|
2568
|
+
}
|
|
2569
|
+
|
|
2566
2570
|
/******************************************************************************
|
|
2567
2571
|
Copyright (c) Microsoft Corporation.
|
|
2568
2572
|
|
|
@@ -2668,10 +2672,6 @@ function ArrowButton(_a) {
|
|
|
2668
2672
|
'aria-disabled:tw-bg-grey-600 aria-disabled:tw-text-grey-800'), children: jsxRuntime.jsx(ArrowRightIcon, {}) })] })));
|
|
2669
2673
|
}
|
|
2670
2674
|
|
|
2671
|
-
function PlusIcon() {
|
|
2672
|
-
return (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M12 17V12M12 12V7M12 12H17M12 12H7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }) }));
|
|
2673
|
-
}
|
|
2674
|
-
|
|
2675
2675
|
const SQUID_THEME_CSS_VARIABLE_PREFIX = '--squid-theme-';
|
|
2676
2676
|
/**
|
|
2677
2677
|
* Mapping between readable variables name and css variables used TailwindCSS config
|
|
@@ -2778,6 +2778,10 @@ const themeTypesKeys = {
|
|
|
2778
2778
|
},
|
|
2779
2779
|
};
|
|
2780
2780
|
|
|
2781
|
+
function PlusIcon() {
|
|
2782
|
+
return (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M12 17V12M12 12V7M12 12H17M12 12H7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }) }));
|
|
2783
|
+
}
|
|
2784
|
+
|
|
2781
2785
|
const imageClass = 'tw-w-[40px] tw-aspect-square tw-flex tw-items-center tw-justify-center';
|
|
2782
2786
|
const defaultBgColor = `var(${themeTypesKeys['royal-500'].cssVariable})`;
|
|
2783
2787
|
function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor = defaultBgColor, tokenBgColor = defaultBgColor, tokenTextColor, onClick, }) {
|
|
@@ -2797,7 +2801,7 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
|
|
|
2797
2801
|
}, children: jsxRuntime.jsx("img", { src: tokenImageUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl -tw-translate-x-[2px] tw-rounded-full" }) })) : 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: {
|
|
2798
2802
|
backgroundColor: tokenBgColor,
|
|
2799
2803
|
color: tokenTextColor,
|
|
2800
|
-
}, children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-
|
|
2804
|
+
}, children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
|
|
2801
2805
|
}
|
|
2802
2806
|
|
|
2803
2807
|
function SearchIcon() {
|
|
@@ -2805,11 +2809,11 @@ function SearchIcon() {
|
|
|
2805
2809
|
}
|
|
2806
2810
|
|
|
2807
2811
|
function Input(_a) {
|
|
2808
|
-
var { placeholder = 'Search', showIcon = true, showPasteButton = false, className, icon } = _a, props = __rest(_a, ["placeholder", "showIcon", "showPasteButton", "className", "icon"]);
|
|
2809
|
-
return (jsxRuntime.jsxs("div", { className: "tw-relative tw-w-full tw-text-grey-600", children: [jsxRuntime.jsx("input", Object.assign({}, props, { className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-medium tw-text-grey-300 tw-outline-none tw-outline-offset-0 placeholder:tw-text-grey-600 focus:tw-outline-2
|
|
2812
|
+
var { placeholder = 'Search', showIcon = true, showPasteButton = false, className, icon, isError = false, onPasteButtonClick } = _a, props = __rest(_a, ["placeholder", "showIcon", "showPasteButton", "className", "icon", "isError", "onPasteButtonClick"]);
|
|
2813
|
+
return (jsxRuntime.jsxs("div", { className: "tw-relative tw-w-full tw-text-grey-600", children: [jsxRuntime.jsx("input", Object.assign({}, props, { className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-medium tw-text-grey-300 tw-outline-none tw-outline-offset-0 placeholder:tw-text-grey-600 focus:tw-outline-2', showIcon ? 'tw-pl-[44px]' : 'tw-px-2.5', showPasteButton ? 'tw-px-[70px]' : 'tw-pr-2.5', isError ? 'tw-outline-status-negative' : 'focus:tw-outline-royal-500', className), placeholder: placeholder })), showIcon ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsxRuntime.jsx(SearchIcon, {}) })) : null, showPasteButton ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsxRuntime.jsx(PasteButton, { onClick: onPasteButtonClick }) })) : null] }));
|
|
2810
2814
|
}
|
|
2811
|
-
const PasteButton = () => {
|
|
2812
|
-
return (jsxRuntime.jsx("button", { className: "tw-h-[30px] tw-rounded-full tw-border tw-border-grey-700 tw-bg-grey-800 tw-px-2 tw-text-grey-300", children: jsxRuntime.jsx(CaptionText, { children: "Paste" }) }));
|
|
2815
|
+
const PasteButton = ({ onClick }) => {
|
|
2816
|
+
return (jsxRuntime.jsx("button", { onClick: onClick, className: "tw-h-[30px] tw-rounded-full tw-border tw-border-grey-700 tw-bg-grey-800 tw-px-2 tw-text-grey-300", children: jsxRuntime.jsx(CaptionText, { children: "Paste" }) }));
|
|
2813
2817
|
};
|
|
2814
2818
|
|
|
2815
2819
|
const NumericInput = (_a) => {
|
|
@@ -2955,7 +2959,7 @@ function HeadingText({ children, bold, size }) {
|
|
|
2955
2959
|
}
|
|
2956
2960
|
|
|
2957
2961
|
function SettingsSlider({ value, type }) {
|
|
2958
|
-
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-xs tw-border-royal-500 tw-p-squid-xs", children: [jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center", children: type === 'percentage' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-600", children: String(value) }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-300", children: "%" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-300", children: "$" }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-600", children: String(value) })] })) }), jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
|
|
2962
|
+
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-xs tw-border-royal-500 tw-p-squid-xs", children: [jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center", children: type === 'percentage' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium tw-text-grey-600", children: String(value) }), jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium tw-text-grey-300", children: "%" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium tw-text-grey-300", children: "$" }), jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium tw-text-grey-600", children: String(value) })] })) }), jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
|
|
2959
2963
|
}
|
|
2960
2964
|
|
|
2961
2965
|
const switchSizeClassMap = {
|
|
@@ -2991,8 +2995,8 @@ const borderRadiusClassMap = {
|
|
|
2991
2995
|
lg: 'tw-rounded-squid-m',
|
|
2992
2996
|
};
|
|
2993
2997
|
function Menu(_a) {
|
|
2994
|
-
var { children, containerClassName, contentClassName, title, displayControls, rounded = 'lg' } = _a, props = __rest(_a, ["children", "containerClassName", "contentClassName", "title", "displayControls", "rounded"]);
|
|
2995
|
-
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]) })] }) })));
|
|
2998
|
+
var { children, containerClassName, contentClassName, title, displayControls, rounded = 'lg', menuRef } = _a, props = __rest(_a, ["children", "containerClassName", "contentClassName", "title", "displayControls", "rounded", "menuRef"]);
|
|
2999
|
+
return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), ref: menuRef, children: jsxRuntime.jsxs("div", { className: cn('tw-relative tw-inline-flex tw-max-w-full 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 tw-max-w-full", 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]) })] }) })));
|
|
2996
3000
|
}
|
|
2997
3001
|
|
|
2998
3002
|
const tooltipWidthClassMap = {
|
|
@@ -3090,7 +3094,7 @@ function FeeButton(_a) {
|
|
|
3090
3094
|
}
|
|
3091
3095
|
|
|
3092
3096
|
function SettingsButton({ label }) {
|
|
3093
|
-
return (jsxRuntime.jsx("button", { className: "tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs", children: jsxRuntime.jsx(CaptionText, { children: label }) }));
|
|
3097
|
+
return (jsxRuntime.jsx("button", { className: "tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs", children: jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
|
|
3094
3098
|
}
|
|
3095
3099
|
|
|
3096
3100
|
function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode = true, }) {
|
|
@@ -3103,8 +3107,8 @@ function EmojiSadIcon() {
|
|
|
3103
3107
|
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" }) }));
|
|
3104
3108
|
}
|
|
3105
3109
|
|
|
3106
|
-
function ErrorMessage({ message }) {
|
|
3107
|
-
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 })] }));
|
|
3110
|
+
function ErrorMessage({ message, showIcon = true }) {
|
|
3111
|
+
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: [showIcon ? jsxRuntime.jsx(EmojiSadIcon, {}) : null, jsxRuntime.jsx(CaptionText, { children: message })] }));
|
|
3108
3112
|
}
|
|
3109
3113
|
|
|
3110
3114
|
const detailStateClassMap = {
|
|
@@ -3127,21 +3131,21 @@ function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode,
|
|
|
3127
3131
|
return (jsxRuntime.jsx("aside", { className: cn('tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsxRuntime.jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), 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, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage }) })] })) }));
|
|
3128
3132
|
}
|
|
3129
3133
|
|
|
3130
|
-
function DropdownMenuItem({ label, imageUrl, icon, labelClassName, }) {
|
|
3131
|
-
return (jsxRuntime.jsx("li", { className: "tw-max-h-squid-xl tw-w-full tw-px-squid-xxs", children: jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-l tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-squid-xs tw-
|
|
3134
|
+
function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }) {
|
|
3135
|
+
return (jsxRuntime.jsx("li", { className: "tw-max-h-squid-xl tw-w-full tw-px-squid-xxs", onClick: onClick, children: jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-l tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-squid-xs tw-px-squid-xxs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-between tw-rounded-squid-xs", children: imageUrl ? (jsxRuntime.jsx("img", { src: imageUrl, className: "tw-h-full tw-w-full tw-rounded-squid-xxs" })) : (icon) }), jsxRuntime.jsx(CaptionText, { className: cn(labelClassName, 'tw-max-w-full tw-truncate !tw-leading-[18px]'), children: label })] }) }));
|
|
3132
3136
|
}
|
|
3133
3137
|
|
|
3134
|
-
function
|
|
3135
|
-
const [
|
|
3136
|
-
const
|
|
3137
|
-
const
|
|
3138
|
+
function useDropdownMenu(props) {
|
|
3139
|
+
const [isDropdownOpen, setIsModalOpen] = react.useState(Boolean(props === null || props === void 0 ? void 0 : props.initialIsModalOpen));
|
|
3140
|
+
const dropdownRef = react.useRef(null);
|
|
3141
|
+
const openDropdownButtonRef = react.useRef(null);
|
|
3138
3142
|
react.useEffect(() => {
|
|
3139
3143
|
const handleClickOutside = (event) => {
|
|
3140
3144
|
var _a;
|
|
3141
3145
|
// close modal if the user clicked outside of it
|
|
3142
|
-
if (
|
|
3143
|
-
!
|
|
3144
|
-
!((_a =
|
|
3146
|
+
if (dropdownRef.current &&
|
|
3147
|
+
!dropdownRef.current.contains(event.target) &&
|
|
3148
|
+
!((_a = openDropdownButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
|
|
3145
3149
|
setIsModalOpen(false);
|
|
3146
3150
|
}
|
|
3147
3151
|
};
|
|
@@ -3149,58 +3153,83 @@ function useModal(props) {
|
|
|
3149
3153
|
return () => {
|
|
3150
3154
|
document.removeEventListener('click', handleClickOutside);
|
|
3151
3155
|
};
|
|
3152
|
-
}, [
|
|
3153
|
-
const
|
|
3156
|
+
}, [dropdownRef]);
|
|
3157
|
+
const openDropdown = react.useCallback(() => {
|
|
3154
3158
|
setIsModalOpen((prev) => !prev);
|
|
3155
3159
|
}, []);
|
|
3156
|
-
const
|
|
3160
|
+
const closeDropdown = react.useCallback(() => {
|
|
3157
3161
|
setIsModalOpen(false);
|
|
3158
3162
|
}, []);
|
|
3159
3163
|
return {
|
|
3160
|
-
|
|
3161
|
-
|
|
3162
|
-
|
|
3163
|
-
|
|
3164
|
-
|
|
3164
|
+
isDropdownOpen,
|
|
3165
|
+
openDropdown,
|
|
3166
|
+
closeDropdown,
|
|
3167
|
+
dropdownRef,
|
|
3168
|
+
openDropdownButtonRef,
|
|
3165
3169
|
};
|
|
3166
3170
|
}
|
|
3167
3171
|
|
|
3168
|
-
function CompassRound({ size = '20', className, }) {
|
|
3169
|
-
return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: [jsxRuntime.jsx("path", { d: "M17.7087 9.99996C17.7087 14.2572 14.2575 17.7083 10.0003 17.7083C5.74313 17.7083 2.29199 14.2572 2.29199 9.99996C2.29199 5.74276 5.74313 2.29163 10.0003 2.29163C14.2575 2.29163 17.7087 5.74276 17.7087 9.99996Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round" }), jsxRuntime.jsx("path", { d: "M12.2135 7.27515L8.79307 8.208C8.5084 8.28564 8.286 8.50803 8.20837 8.7927L7.27552 12.2132C7.19069 12.5242 7.47609 12.8096 7.78713 12.7248L11.2076 11.7919C11.4923 11.7143 11.7146 11.4919 11.7923 11.2072L12.7251 7.78677C12.81 7.47573 12.5246 7.19032 12.2135 7.27515Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round" })] }));
|
|
3170
|
-
}
|
|
3171
|
-
function CircleX({ size = '20', className, }) {
|
|
3172
|
-
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M12.5003 7.49996L7.50033 12.5M12.5003 12.5L7.50033 7.49996M17.7087 9.99996C17.7087 14.2572 14.2575 17.7083 10.0003 17.7083C5.74313 17.7083 2.29199 14.2572 2.29199 9.99996C2.29199 5.74276 5.74313 2.29163 10.0003 2.29163C14.2575 2.29163 17.7087 5.74276 17.7087 9.99996Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }) }));
|
|
3173
|
-
}
|
|
3174
|
-
|
|
3175
3172
|
function DotGrid1x3HorizontalIcon({ className, size = '16', }) {
|
|
3176
3173
|
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.33325 8.00008C1.33325 7.2637 1.93021 6.66675 2.66659 6.66675C3.40297 6.66675 3.99992 7.2637 3.99992 8.00008C3.99992 8.73646 3.40297 9.33341 2.66659 9.33341C1.93021 9.33341 1.33325 8.73646 1.33325 8.00008ZM6.66659 8.00008C6.66659 7.2637 7.26354 6.66675 7.99992 6.66675C8.7363 6.66675 9.33325 7.2637 9.33325 8.00008C9.33325 8.73646 8.7363 9.33341 7.99992 9.33341C7.26354 9.33341 6.66659 8.73646 6.66659 8.00008ZM11.9999 8.00008C11.9999 7.2637 12.5969 6.66675 13.3333 6.66675C14.0696 6.66675 14.6666 7.2637 14.6666 8.00008C14.6666 8.73646 14.0696 9.33341 13.3333 9.33341C12.5969 9.33341 11.9999 8.73646 11.9999 8.00008Z", fill: "currentColor" }) }));
|
|
3177
3174
|
}
|
|
3178
3175
|
|
|
3179
|
-
|
|
3180
|
-
|
|
3181
|
-
|
|
3182
|
-
|
|
3183
|
-
|
|
3184
|
-
|
|
3185
|
-
|
|
3186
|
-
|
|
3187
|
-
|
|
3188
|
-
|
|
3189
|
-
|
|
3190
|
-
|
|
3191
|
-
|
|
3192
|
-
|
|
3193
|
-
|
|
3194
|
-
|
|
3195
|
-
|
|
3196
|
-
|
|
3197
|
-
|
|
3198
|
-
|
|
3199
|
-
|
|
3200
|
-
|
|
3201
|
-
|
|
3202
|
-
|
|
3203
|
-
|
|
3176
|
+
const dropdownPositionClassMap = {
|
|
3177
|
+
top: 'tw-right-[calc(100%-10px)] tw-bottom-7',
|
|
3178
|
+
bottom: 'tw-right-[calc(100%-10px)] tw-top-7',
|
|
3179
|
+
center: 'tw-right-[40px] -tw-top-[55px]',
|
|
3180
|
+
};
|
|
3181
|
+
function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel = 'Pending', dropdownMenuItems, }) {
|
|
3182
|
+
const { isDropdownOpen, dropdownRef, openDropdownButtonRef, openDropdown } = useDropdownMenu();
|
|
3183
|
+
const [dropdownPosition, setDropdownPosition] = react.useState(null);
|
|
3184
|
+
const itemRef = react.useRef(null);
|
|
3185
|
+
const menuRef = react.useRef(null);
|
|
3186
|
+
// Effect to find the best position for the dropdown menu, so it's always visible for the user
|
|
3187
|
+
react.useEffect(() => {
|
|
3188
|
+
if (!isDropdownOpen) {
|
|
3189
|
+
// when the dropdown is closed, we want to reset its position
|
|
3190
|
+
// because user may scroll, and the old position may be out of view, so we'll need to recalculate it
|
|
3191
|
+
setDropdownPosition(null);
|
|
3192
|
+
return;
|
|
3193
|
+
}
|
|
3194
|
+
const item = itemRef.current;
|
|
3195
|
+
const itemsContainer = item === null || item === void 0 ? void 0 : item.parentElement;
|
|
3196
|
+
const dropdownMenu = menuRef.current;
|
|
3197
|
+
if (!item || !dropdownRef.current || !itemsContainer || !dropdownMenu) {
|
|
3198
|
+
return;
|
|
3199
|
+
}
|
|
3200
|
+
// Get the bounding rectangle of the item
|
|
3201
|
+
const itemRect = item.getBoundingClientRect();
|
|
3202
|
+
// Get the bounding rectangle of the container element
|
|
3203
|
+
const containerRect = itemsContainer.getBoundingClientRect();
|
|
3204
|
+
// Calculate the bottom position of the visible area of the the items container
|
|
3205
|
+
const containerVisibleBottom = containerRect.top + containerRect.height;
|
|
3206
|
+
// Calculate the distance from the bottom of the item to the visible bottom of the items container
|
|
3207
|
+
const distanceBetweenItemBottomAndContainerBottomEdge = containerVisibleBottom - itemRect.bottom;
|
|
3208
|
+
// the same but for the top
|
|
3209
|
+
const distanceBetweenItemTopAndContainerTopEdge = itemRect.top - containerRect.top;
|
|
3210
|
+
const dropdownMenuHeight = dropdownMenu.clientHeight;
|
|
3211
|
+
// check if the height of the dropdown is less than the longest distance, either top or bottom
|
|
3212
|
+
// if so, means that the dropdown keeps visible when positioned at the top or bottom of the item
|
|
3213
|
+
const isDropdownVisibleAtItemTopOrBottom = dropdownMenuHeight <=
|
|
3214
|
+
Math.max(distanceBetweenItemBottomAndContainerBottomEdge, distanceBetweenItemTopAndContainerTopEdge);
|
|
3215
|
+
// if the dropdown is not visible at top or bottom of the item
|
|
3216
|
+
// we just center it
|
|
3217
|
+
if (!isDropdownVisibleAtItemTopOrBottom) {
|
|
3218
|
+
return setDropdownPosition('center');
|
|
3219
|
+
}
|
|
3220
|
+
// finally, if the dropdown fits, position it where it has more space
|
|
3221
|
+
if (distanceBetweenItemBottomAndContainerBottomEdge >=
|
|
3222
|
+
distanceBetweenItemTopAndContainerTopEdge) {
|
|
3223
|
+
setDropdownPosition('bottom');
|
|
3224
|
+
}
|
|
3225
|
+
else {
|
|
3226
|
+
setDropdownPosition('top');
|
|
3227
|
+
}
|
|
3228
|
+
}, [isDropdownOpen, menuRef, dropdownPosition, itemRef]);
|
|
3229
|
+
return (jsxRuntime.jsx("li", { ref: itemRef, 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-cursor-pointer 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: cn(!!dropdownMenuItems &&
|
|
3230
|
+
'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 })) }), !!dropdownMenuItems && (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: openDropdown, ref: openDropdownButtonRef, 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 })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsxRuntime.jsx(DropdownMenu, { menuRef: menuRef,
|
|
3231
|
+
// only show dropdown menu if there is a position defined for it
|
|
3232
|
+
isHidden: !dropdownPosition, className: cn(!!dropdownPosition && dropdownPositionClassMap[dropdownPosition]), dropdownRef: dropdownRef, items: dropdownMenuItems })) : null] }) }));
|
|
3204
3233
|
}
|
|
3205
3234
|
|
|
3206
3235
|
const listItemSizeMap = {
|
|
@@ -3233,8 +3262,19 @@ function HelpIcon({ size = '20', className, }) {
|
|
|
3233
3262
|
return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_457_36778)", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM6 7C6 4.46214 8.03736 3 10 3C12.1193 3 14 4.66531 14 7C14 7.93746 13.7596 8.6603 13.368 9.2586C13.0353 9.76679 12.6034 10.1601 12.2697 10.4639L12.1757 10.5497C11.8041 10.8904 11.534 11.1593 11.337 11.504C11.1513 11.8288 11 12.2794 11 13C11 13.5523 10.5523 14 10 14C9.44772 14 9 13.5523 9 13C9 11.9706 9.22366 11.1712 9.60051 10.5117C9.96604 9.87199 10.4459 9.42214 10.8243 9.07535L10.8834 9.02116L10.8834 9.02116L10.8834 9.02115C11.2572 8.67885 11.5066 8.45039 11.6945 8.16328C11.8654 7.9022 12 7.56254 12 7C12 5.83469 11.0807 5 10 5C8.96264 5 8 5.73786 8 7C8 7.55228 7.55228 8 7 8C6.44772 8 6 7.55228 6 7ZM10 15C9.44771 15 9 15.4477 9 16C9 16.5523 9.44771 17 10 17C10.5523 17 11 16.5523 11 16C11 15.4477 10.5523 15 10 15Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_457_36778", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white" }) }) })] }));
|
|
3234
3263
|
}
|
|
3235
3264
|
|
|
3236
|
-
function SettingsItem({ icon, label, controls, transparentControls = false, showHelpIcon = true, }) {
|
|
3237
|
-
|
|
3265
|
+
function SettingsItem({ icon, label, controls, transparentControls = false, showHelpIcon = true, link, transparent = false, helpTooltip, }) {
|
|
3266
|
+
const ContentTag = link ? 'a' : 'div';
|
|
3267
|
+
const contentTagProps = link
|
|
3268
|
+
? {
|
|
3269
|
+
href: link,
|
|
3270
|
+
target: '_blank',
|
|
3271
|
+
}
|
|
3272
|
+
: {};
|
|
3273
|
+
const helpIcon = showHelpIcon && (jsxRuntime.jsx(HelpIcon, { className: cn('tw-text-grey-600',
|
|
3274
|
+
// only add hover styles if helpTooltip is provided
|
|
3275
|
+
!!helpTooltip &&
|
|
3276
|
+
'tw-cursor-help tw-transition-colors tw-duration-200 hover:tw-text-grey-400') }));
|
|
3277
|
+
return (jsxRuntime.jsx("li", { className: cn('tw-h-[50px] tw-self-stretch tw-px-squid-xs', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900 '), children: jsxRuntime.jsxs(ContentTag, Object.assign({ className: cn('tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xs tw-text-grey-300', link && 'hover:tw-bg-material-light-thin') }, contentTagProps, { children: [icon, jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-self-stretch", children: [jsxRuntime.jsx(BodyText, { size: "small", children: label }), helpTooltip ? (jsxRuntime.jsx(Tooltip, Object.assign({}, helpTooltip, { children: helpIcon }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: helpIcon }))] }), jsxRuntime.jsx("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-justify-center tw-rounded-squid-xs', transparentControls ? '' : 'tw-bg-grey-800'), children: controls })] })) }));
|
|
3238
3278
|
}
|
|
3239
3279
|
|
|
3240
3280
|
function SwapDetailListItem({ label, detail, icon, isLoading = false, }) {
|
|
@@ -3279,8 +3319,12 @@ function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = fals
|
|
|
3279
3319
|
}) }), !!link && (jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-mr-squid-xxs tw-hidden tw-text-material-light-average group-hover/swap-step-item:tw-block" }))] })] }));
|
|
3280
3320
|
}
|
|
3281
3321
|
|
|
3282
|
-
function DropdownMenu({ dropdownRef, items, className, }) {
|
|
3283
|
-
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:
|
|
3322
|
+
function DropdownMenu({ dropdownRef, items, className, menuRef, isHidden = false, listClassName, }) {
|
|
3323
|
+
return (jsxRuntime.jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsxRuntime.jsx(Menu, { menuRef: menuRef, rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: !isHidden && (jsxRuntime.jsx("ul", { className: cn('tw-flex tw-max-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs', listClassName), children: items.map((item) => (jsxRuntime.jsx(DropdownMenuItem, Object.assign({}, item), item.label))) })) }) }));
|
|
3324
|
+
}
|
|
3325
|
+
|
|
3326
|
+
function InfoBox({ title, description, icon }) {
|
|
3327
|
+
return (jsxRuntime.jsxs("div", { className: "tw-align-self-stretch tw-flex tw-flex-col tw-items-center tw-gap-squid-xs tw-px-squid-m tw-pb-squid-l tw-pt-squid-xs tw-text-royal-400", children: [icon, jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xxs tw-text-center", children: [jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[9px]", children: title }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: description })] })] }));
|
|
3284
3328
|
}
|
|
3285
3329
|
|
|
3286
3330
|
function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, }) {
|
|
@@ -3318,6 +3362,22 @@ function ProductCard({ children }) {
|
|
|
3318
3362
|
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 }) }));
|
|
3319
3363
|
}
|
|
3320
3364
|
|
|
3365
|
+
function SquidLogo() {
|
|
3366
|
+
return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_133_44979)", children: jsxRuntime.jsx("path", { d: "M39.7776 17.0119L39.7737 16.9863L39.6631 16.9902C39.6631 16.9902 39.6608 17.0237 39.6601 17.027L39.6233 17.0286C39.5751 17.6494 39.4736 18.2391 39.3215 18.7807C38.9488 20.1143 38.3241 21.4615 37.5632 22.5742C36.7215 23.8061 35.7416 24.719 34.7288 25.2142C34.0969 25.5239 33.4703 25.7509 32.8673 25.8894C32.3993 25.9949 31.9376 26.0477 31.4969 26.0477C29.9688 26.0477 28.5688 25.4047 27.4473 24.1886C25.7136 22.3078 24.7097 19.075 24.9488 16.143C25.0319 15.1173 25.196 14.163 25.3544 13.2405C25.6913 11.2822 25.9816 9.59092 25.4384 7.82282C25.1471 6.87567 24.532 6.14133 23.7048 5.7539C23.1416 5.48987 22.5537 5.35623 21.956 5.35623C20.0352 5.35623 18.4503 6.70896 17.6775 7.86752C16.4976 9.63632 15.9094 11.8636 16.0657 13.9772C16.2112 15.9555 16.8969 17.2596 17.9257 19.0251C18.4417 19.9099 18.9793 20.6915 19.4545 21.3818C20.2577 22.5499 20.9513 23.5588 21.2936 24.6652C21.7681 26.1988 21.4384 26.9364 21.2743 27.1828C21.0719 27.4868 20.7471 27.6619 20.3078 27.7036C20.2517 27.7092 20.1965 27.7115 20.143 27.7115C18.8021 27.7115 18.7765 25.881 18.7614 24.7867V24.7621C18.7607 24.6899 18.759 24.6212 18.7581 24.5555C18.7125 22.4123 17.8892 21.1315 16.8461 19.5092C16.1916 18.4915 15.4501 17.3388 14.7988 15.7683C13.7572 13.2596 13.4957 10.8396 14.0221 8.57625C14.0405 8.49546 14.0605 8.41467 14.0813 8.33294C14.7204 5.81374 16.3004 2.58743 20.1949 1.5241C20.9325 1.32247 21.6901 1.22002 22.4461 1.22002C24.7357 1.22002 26.7302 2.16251 27.9173 3.80489C28.8782 5.13364 29.3735 6.64005 29.4326 8.40978C29.447 8.8305 29.4359 9.27148 29.3998 9.72014C29.3157 10.7322 29.1013 11.8417 28.7453 13.1113C28.0254 15.6778 27.851 17.8522 28.2277 19.573C28.5166 20.8929 29.1478 21.8987 29.959 22.3313C30.6165 22.6817 31.3173 22.8594 32.0414 22.8594C33.891 22.8594 35.5758 21.6794 36.4254 20.5106C37.7613 18.6722 38.4654 15.4305 38.3502 13.481C38.3078 12.7658 38.247 12.1602 38.163 11.6242L38.1607 11.6163L38.159 11.6123C36.5781 8.19395 34.071 5.29639 30.9085 3.23306C27.6647 1.11921 23.892 0 20 0C14.6575 0 9.63516 2.08009 5.85751 5.85751C2.08079 9.63516 0 14.6575 0 20C0 21.5527 0.179278 23.1015 0.533644 24.6049L0.53993 24.6312L0.651222 24.6151C0.651222 24.6151 0.649593 24.5823 0.648894 24.58L0.685681 24.5744C0.616997 23.3839 0.724796 22.2377 0.99837 21.2591C1.37113 19.9264 1.99604 18.5783 2.75669 17.4657C3.59837 16.2345 4.57835 15.3208 5.59115 14.8256C6.21839 14.5183 6.84144 14.292 7.44237 14.1527C7.91432 14.0456 8.37998 13.9919 8.82468 13.9919C10.3527 13.9919 11.7534 14.6342 12.8743 15.8503C14.6079 17.7304 15.6119 20.9639 15.3728 23.8966C15.2896 24.9229 15.1255 25.8766 14.9662 26.7991C14.6293 28.7574 14.339 30.4487 14.8822 32.2165C15.1725 33.1637 15.7886 33.8983 16.6158 34.2854C17.179 34.5495 17.7669 34.6829 18.3646 34.6829C20.2854 34.6829 21.8703 33.3302 22.6431 32.1709C23.8231 30.4021 24.4109 28.1749 24.2549 26.0615C24.1094 24.0838 23.4237 22.779 22.3949 21.0133C21.8806 20.1308 21.342 19.3476 20.8668 18.6566C20.0636 17.4885 19.37 16.4799 19.0277 15.3725C18.5532 13.8389 18.8829 13.1013 19.0461 12.8556C19.2484 12.5516 19.5732 12.3765 20.0126 12.3348C20.0687 12.3292 20.1246 12.3269 20.1774 12.3269C21.5183 12.3269 21.5439 14.1558 21.559 15.2477L21.5597 15.2789C21.5604 15.3502 21.562 15.4172 21.563 15.4822C21.6086 17.6254 22.4319 18.9062 23.475 20.5285C24.1295 21.5462 24.871 22.6997 25.5222 24.2694C26.5311 26.6983 26.8077 29.0461 26.3462 31.2477C26.3334 31.3085 26.3197 31.3693 26.3062 31.4303C25.695 34.0589 24.1262 37.4221 20.1255 38.515C19.3879 38.7166 18.6303 38.8182 17.8743 38.8189C15.5846 38.8189 13.5902 37.8766 12.403 36.2342C11.4421 34.9055 10.9471 33.3991 10.8878 31.6293C10.8789 31.3725 10.8799 31.1069 10.8894 30.8414C10.9357 29.6894 11.1607 28.4093 11.5758 26.9278C12.2957 24.3614 12.4703 22.187 12.0934 20.4661C11.8047 19.1453 11.1735 18.1404 10.3623 17.7078C9.70477 17.3574 9.00466 17.1797 8.27986 17.1797C6.43097 17.1797 4.74552 18.3597 3.89593 19.5285C2.55995 21.3669 1.85588 24.6086 1.97113 26.5581C2.04237 27.7693 2.16554 28.6598 2.37183 29.4494L2.37416 29.4559L2.37579 29.4589C5.87008 35.9597 12.6247 39.9998 19.9998 39.9998C25.3423 39.9998 30.3646 37.9197 34.1423 34.1423C37.9197 30.3646 39.9998 25.3423 39.9998 19.9998C39.9998 19.0014 39.9253 17.9958 39.7774 17.0116L39.7776 17.0119Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_133_44979", children: jsxRuntime.jsx("rect", { width: "40", height: "40", fill: "white" }) }) })] }));
|
|
3367
|
+
}
|
|
3368
|
+
|
|
3369
|
+
function ProfileHeaderBackground() {
|
|
3370
|
+
return (jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-min-h-[195px] tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-overflow-hidden tw-rounded-bl-squid-l tw-rounded-br-squid-l tw-rounded-tl-[25px] tw-rounded-tr-[25px] tw-pb-squid-s group-data-[squid-theme-type='dark']:tw-bg-royal-dark group-data-[squid-theme-type='light']:tw-bg-royal-light", children: [jsxRuntime.jsx("div", { className: "tw-h-[240px]", children: [...Array(4)].map((_, i) => (jsxRuntime.jsx(HeaderBackgroundDecorationRow, { index: i }, i))) }), jsxRuntime.jsx("div", { className: "z-10 tw-absolute tw-inset-0 tw-h-[195px] tw-shadow-inset-royal" })] }));
|
|
3371
|
+
}
|
|
3372
|
+
function HeaderBackgroundDecorationRow({ index }) {
|
|
3373
|
+
const logoWithImage = (jsxRuntime.jsx(LogoContainer, { children: jsxRuntime.jsx(SquidLogo, {}) }));
|
|
3374
|
+
const emptyLogo = jsxRuntime.jsx(LogoContainer, {});
|
|
3375
|
+
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-[60px] tw-w-[470px] tw-items-center tw-justify-center tw-self-stretch tw-overflow-hidden tw-text-royal-500", children: [index % 2 === 0 ? emptyLogo : logoWithImage, index % 2 === 0 ? logoWithImage : emptyLogo, index % 2 === 0 ? emptyLogo : logoWithImage, index % 2 === 0 ? logoWithImage : emptyLogo, index % 2 === 0 ? emptyLogo : logoWithImage, index % 2 === 0 ? logoWithImage : emptyLogo, index % 2 === 0 ? emptyLogo : logoWithImage] }));
|
|
3376
|
+
}
|
|
3377
|
+
function LogoContainer({ children }) {
|
|
3378
|
+
return (jsxRuntime.jsx("div", { className: "tw-flex tw-h-[60px] tw-w-[60px] tw-items-center tw-justify-center", children: children }));
|
|
3379
|
+
}
|
|
3380
|
+
|
|
3321
3381
|
function MaxIcon() {
|
|
3322
3382
|
return (jsxRuntime.jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_41_20801)", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM10.6508 4.74074L14.1508 7.74074C14.5701 8.10017 14.6187 8.73147 14.2593 9.15079C13.8998 9.57012 13.2685 9.61868 12.8492 9.25926L10 6.81708L7.15079 9.25926C6.73147 9.61868 6.10017 9.57012 5.74074 9.15079C5.38132 8.73147 5.42988 8.10017 5.84921 7.74074L9.34921 4.74074C9.7237 4.41975 10.2763 4.41975 10.6508 4.74074ZM14.1508 13.7407L10.6508 10.7407C10.2763 10.4198 9.7237 10.4198 9.34921 10.7407L5.84921 13.7407C5.42988 14.1002 5.38132 14.7315 5.74074 15.1508C6.10017 15.5701 6.73147 15.6187 7.15079 15.2593L10 12.8171L12.8492 15.2593C13.2685 15.6187 13.8998 15.5701 14.2593 15.1508C14.6187 14.7315 14.5701 14.1002 14.1508 13.7407Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_41_20801", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
|
|
3323
3383
|
}
|
|
@@ -3326,7 +3386,7 @@ function SwapInputsIcon() {
|
|
|
3326
3386
|
return (jsxRuntime.jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_40_7936)", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM8.38268 4.57612C8.75636 4.7309 9 5.09554 9 5.5V15.5C9 16.0523 8.55228 16.5 8 16.5C7.44772 16.5 7 16.0523 7 15.5V7.91421L5.70711 9.20711C5.31658 9.59763 4.68342 9.59763 4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289L7.29289 4.79289C7.57889 4.5069 8.00901 4.42134 8.38268 4.57612ZM11 15.5C11 15.9045 11.2436 16.2691 11.6173 16.4239C11.991 16.5787 12.4211 16.4931 12.7071 16.2071L15.7071 13.2071C16.0976 12.8166 16.0976 12.1834 15.7071 11.7929C15.3166 11.4024 14.6834 11.4024 14.2929 11.7929L13 13.0858V5.5C13 4.94771 12.5523 4.5 12 4.5C11.4477 4.5 11 4.94771 11 5.5V15.5Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_40_7936", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
|
|
3327
3387
|
}
|
|
3328
3388
|
|
|
3329
|
-
function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage = 5, }) {
|
|
3389
|
+
function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage = 5, emptyAddressLabel = 'Connect wallet', }) {
|
|
3330
3390
|
var _a;
|
|
3331
3391
|
const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
|
|
3332
3392
|
? 'tw-text-status-negative'
|
|
@@ -3334,7 +3394,7 @@ function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAm
|
|
|
3334
3394
|
const isInteractive = direction === 'from';
|
|
3335
3395
|
// improve accessibility
|
|
3336
3396
|
const BalanceButtonTag = isInteractive ? 'button' : 'div';
|
|
3337
|
-
return (jsxRuntime.jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxRuntime.jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600 hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address :
|
|
3397
|
+
return (jsxRuntime.jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxRuntime.jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600 hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : emptyAddressLabel }), jsxRuntime.jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), direction === 'from' ? (jsxRuntime.jsx(NumericInput, { forcedUpdateValue: forcedAmount, initialValue: amount, onParsedValueChanged: (value) => onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value) })) : (jsxRuntime.jsx("div", { className: "tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsxRuntime.jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsxRuntime.jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxRuntime.jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500", children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && '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(BalanceButtonTag, { onClick: onBalanceButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive
|
|
3338
3398
|
? 'hover:tw-bg-material-light-thin'
|
|
3339
3399
|
: 'tw-pointer-events-none'), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balance }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
|
|
3340
3400
|
}
|
|
@@ -3474,14 +3534,17 @@ exports.ErrorMessage = ErrorMessage;
|
|
|
3474
3534
|
exports.FeeButton = FeeButton;
|
|
3475
3535
|
exports.HeadingText = HeadingText;
|
|
3476
3536
|
exports.HistoryItem = HistoryItem;
|
|
3537
|
+
exports.InfoBox = InfoBox;
|
|
3477
3538
|
exports.Input = Input;
|
|
3478
3539
|
exports.ListItem = ListItem;
|
|
3540
|
+
exports.LoadingSkeleton = LoadingSkeleton;
|
|
3479
3541
|
exports.Menu = Menu;
|
|
3480
3542
|
exports.MenuItem = MenuItem;
|
|
3481
3543
|
exports.Modal = Modal;
|
|
3482
3544
|
exports.NavigationBar = NavigationBar;
|
|
3483
3545
|
exports.NumericInput = NumericInput;
|
|
3484
3546
|
exports.ProductCard = ProductCard;
|
|
3547
|
+
exports.ProfileHeaderBackground = ProfileHeaderBackground;
|
|
3485
3548
|
exports.SectionTitle = SectionTitle;
|
|
3486
3549
|
exports.SettingsButton = SettingsButton;
|
|
3487
3550
|
exports.SettingsItem = SettingsItem;
|
|
@@ -3496,4 +3559,4 @@ exports.Switch = Switch;
|
|
|
3496
3559
|
exports.TokenPair = TokenPair;
|
|
3497
3560
|
exports.Tooltip = Tooltip;
|
|
3498
3561
|
exports.UsdAmount = UsdAmount;
|
|
3499
|
-
exports.
|
|
3562
|
+
exports.useDropdownMenu = useDropdownMenu;
|
|
@@ -4,6 +4,8 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
|
4
4
|
showIcon?: boolean;
|
|
5
5
|
showPasteButton?: boolean;
|
|
6
6
|
icon?: React.ReactNode;
|
|
7
|
+
isError?: boolean;
|
|
8
|
+
onPasteButtonClick?: () => void;
|
|
7
9
|
}
|
|
8
|
-
export declare function Input({ placeholder, showIcon, showPasteButton, className, icon, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare function Input({ placeholder, showIcon, showPasteButton, className, icon, isError, onPasteButtonClick, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
|
|
9
11
|
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export type TooltipWidth = 'max' | 'container';
|
|
3
3
|
export type TooltipThreshold = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
|
|
4
|
-
interface TooltipProps {
|
|
4
|
+
export interface TooltipProps {
|
|
5
5
|
children: React.ReactNode;
|
|
6
6
|
tooltipContent: React.ReactNode;
|
|
7
7
|
threshold?: TooltipThreshold;
|
|
@@ -11,4 +11,3 @@ interface TooltipProps {
|
|
|
11
11
|
tooltipClassName?: string;
|
|
12
12
|
}
|
|
13
13
|
export declare function Tooltip({ children, tooltipContent, tooltipWidth, threshold, containerClassName, childrenClassName, tooltipClassName, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
-
export {};
|
|
@@ -2,8 +2,11 @@
|
|
|
2
2
|
import { DropdownMenuItemProps } from '../lists';
|
|
3
3
|
interface DropdownMenuProps {
|
|
4
4
|
dropdownRef?: React.RefObject<HTMLDivElement>;
|
|
5
|
+
menuRef?: React.RefObject<HTMLDivElement>;
|
|
5
6
|
items: DropdownMenuItemProps[];
|
|
6
7
|
className?: string;
|
|
8
|
+
isHidden?: boolean;
|
|
9
|
+
listClassName?: string;
|
|
7
10
|
}
|
|
8
|
-
export declare function DropdownMenu({ dropdownRef, items, className, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare function DropdownMenu({ dropdownRef, items, className, menuRef, isHidden, listClassName, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
9
12
|
export {};
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
type ErrorMessageProps = {
|
|
2
2
|
message: string;
|
|
3
|
-
|
|
3
|
+
showIcon?: boolean;
|
|
4
|
+
};
|
|
5
|
+
export declare function ErrorMessage({ message, showIcon }: ErrorMessageProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export {};
|
|
@@ -6,6 +6,7 @@ interface MenuProps extends React.ComponentProps<'div'> {
|
|
|
6
6
|
title?: string;
|
|
7
7
|
displayControls?: boolean;
|
|
8
8
|
rounded?: Rounded;
|
|
9
|
+
menuRef?: React.RefObject<HTMLDivElement>;
|
|
9
10
|
}
|
|
10
|
-
export declare function Menu({ children, containerClassName, contentClassName, title, displayControls, rounded, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare function Menu({ children, containerClassName, contentClassName, title, displayControls, rounded, menuRef, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
|
|
11
12
|
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function ProfileHeaderBackground(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -26,6 +26,7 @@ interface SwapConfigurationProps {
|
|
|
26
26
|
message: string;
|
|
27
27
|
};
|
|
28
28
|
criticalPriceImpactPercentage?: number;
|
|
29
|
+
emptyAddressLabel?: string;
|
|
29
30
|
}
|
|
30
|
-
export declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
export declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage, emptyAddressLabel, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
|
|
31
32
|
export {};
|
|
@@ -2,10 +2,12 @@ export * from './Boost';
|
|
|
2
2
|
export * from './DetailsToolbar';
|
|
3
3
|
export * from './DropdownMenu';
|
|
4
4
|
export * from './ErrorMessage';
|
|
5
|
+
export * from './InfoBox';
|
|
5
6
|
export * from './Menu';
|
|
6
7
|
export * from './Modal';
|
|
7
8
|
export * from './NavigationBar';
|
|
8
9
|
export * from './ProductCard';
|
|
10
|
+
export * from './ProfileHeaderBackground';
|
|
9
11
|
export * from './SwapConfiguration';
|
|
10
12
|
export * from './SwapProgressViewHeader';
|
|
11
13
|
export * from './SwapStepsCollapsed';
|
|
@@ -4,5 +4,6 @@ export interface DropdownMenuItemProps {
|
|
|
4
4
|
labelClassName?: string;
|
|
5
5
|
imageUrl?: string;
|
|
6
6
|
icon?: React.ReactNode;
|
|
7
|
+
onClick?: () => void;
|
|
7
8
|
}
|
|
8
|
-
export declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { DropdownMenuItemProps } from './DropdownMenuItem';
|
|
1
2
|
interface HistoryItemProps {
|
|
2
3
|
firstImageUrl: string;
|
|
3
4
|
secondImageUrl: string;
|
|
@@ -8,6 +9,7 @@ interface HistoryItemProps {
|
|
|
8
9
|
dateCompleted: string;
|
|
9
10
|
fromAmount: string;
|
|
10
11
|
toAmount: string;
|
|
12
|
+
dropdownMenuItems?: DropdownMenuItemProps[];
|
|
11
13
|
}
|
|
12
|
-
export declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, dropdownMenuItems, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
|
|
13
15
|
export {};
|