@0xsquid/ui 0.23.2-beta.2 → 0.23.3-beta.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/dist/cjs/index.js +148 -569
- package/dist/cjs/types/components/badges/TransactionState.d.ts +5 -0
- package/dist/cjs/types/components/controls/NumericInput.d.ts +3 -2
- package/dist/cjs/types/components/icons/Bag.d.ts +0 -4
- package/dist/cjs/types/components/icons/EmojiSad.d.ts +0 -4
- package/dist/cjs/types/components/icons/HomeIcon.d.ts +0 -16
- package/dist/cjs/types/components/icons/Social.d.ts +0 -12
- package/dist/cjs/types/components/icons/SquidLogo.d.ts +1 -4
- package/dist/cjs/types/components/icons/index.d.ts +0 -2
- package/dist/cjs/types/components/layout/index.d.ts +0 -1
- package/dist/cjs/types/components/lists/TransactionItem.d.ts +5 -8
- package/dist/cjs/types/core/constants.d.ts +0 -4
- package/dist/cjs/types/core/index.d.ts +1 -2
- package/dist/cjs/types/hooks/index.d.ts +0 -4
- package/dist/cjs/types/stories/badges/TransactionState.stories.d.ts +0 -5
- package/dist/cjs/types/stories/lists/TransactionItem.stories.d.ts +0 -5
- package/dist/cjs/types/types/components.d.ts +1 -1
- package/dist/cjs/types/types/config.d.ts +24 -5
- package/dist/esm/index.js +147 -549
- package/dist/esm/types/components/badges/TransactionState.d.ts +5 -0
- package/dist/esm/types/components/controls/NumericInput.d.ts +3 -2
- package/dist/esm/types/components/icons/Bag.d.ts +0 -4
- package/dist/esm/types/components/icons/EmojiSad.d.ts +0 -4
- package/dist/esm/types/components/icons/HomeIcon.d.ts +0 -16
- package/dist/esm/types/components/icons/Social.d.ts +0 -12
- package/dist/esm/types/components/icons/SquidLogo.d.ts +1 -4
- package/dist/esm/types/components/icons/index.d.ts +0 -2
- package/dist/esm/types/components/layout/index.d.ts +0 -1
- package/dist/esm/types/components/lists/TransactionItem.d.ts +5 -8
- package/dist/esm/types/core/constants.d.ts +0 -4
- package/dist/esm/types/core/index.d.ts +1 -2
- package/dist/esm/types/hooks/index.d.ts +0 -4
- package/dist/esm/types/stories/badges/TransactionState.stories.d.ts +0 -5
- package/dist/esm/types/stories/lists/TransactionItem.stories.d.ts +0 -5
- package/dist/esm/types/types/components.d.ts +1 -1
- package/dist/esm/types/types/config.d.ts +24 -5
- package/dist/index.css +1 -1
- package/dist/index.d.ts +15 -136
- package/package.json +1 -1
- package/dist/cjs/types/components/icons/CrossAnimatedIcon.d.ts +0 -7
- package/dist/cjs/types/components/icons/Weather.d.ts +0 -12
- package/dist/cjs/types/components/layout/CollapsibleMenu.d.ts +0 -20
- package/dist/cjs/types/core/design-system.d.ts +0 -2
- package/dist/cjs/types/hooks/useCollapsibleMenu.d.ts +0 -6
- package/dist/esm/types/components/icons/CrossAnimatedIcon.d.ts +0 -7
- package/dist/esm/types/components/icons/Weather.d.ts +0 -12
- package/dist/esm/types/components/layout/CollapsibleMenu.d.ts +0 -20
- package/dist/esm/types/core/design-system.d.ts +0 -2
- package/dist/esm/types/hooks/useCollapsibleMenu.d.ts +0 -6
package/dist/cjs/index.js
CHANGED
|
@@ -2813,7 +2813,7 @@ function Checkmark1Icon({ className, size = '16', }) {
|
|
|
2813
2813
|
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", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.8809 2.82977C13.3432 3.13201 13.4729 3.75174 13.1706 4.21399L7.50398 12.8807C7.3318 13.144 7.04572 13.3109 6.73174 13.3313C6.41777 13.3517 6.11252 13.2231 5.90775 12.9842L2.90775 9.4842C2.54833 9.06487 2.59689 8.43357 3.01622 8.07415C3.43554 7.71473 4.06684 7.76329 4.42627 8.18262L6.55918 10.671L11.4967 3.11949C11.7989 2.65725 12.4187 2.52753 12.8809 2.82977Z", fill: "currentColor" }) }));
|
|
2814
2814
|
}
|
|
2815
2815
|
function Checkmark2Icon({ className, size = '16', style, }) {
|
|
2816
|
-
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", {
|
|
2816
|
+
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM15.774 10.1333C16.1237 9.70582 16.0607 9.0758 15.6332 8.72607C15.2058 8.37635 14.5758 8.43935 14.226 8.86679L10.4258 13.5116L9.20711 12.2929C8.81658 11.9024 8.18342 11.9024 7.79289 12.2929C7.40237 12.6834 7.40237 13.3166 7.79289 13.7071L9.79289 15.7071C9.99267 15.9069 10.2676 16.0129 10.5498 15.9988C10.832 15.9847 11.095 15.8519 11.274 15.6333L15.774 10.1333Z", fill: "none", className: className, style: style }) }));
|
|
2817
2817
|
}
|
|
2818
2818
|
|
|
2819
2819
|
function DotGrid1x3HorizontalIcon({ className, size = '16', }) {
|
|
@@ -2854,6 +2854,10 @@ const statusTextClassMap = {
|
|
|
2854
2854
|
waiting: 'tw-text-grey-500',
|
|
2855
2855
|
warning: 'tw-text-status-partial',
|
|
2856
2856
|
};
|
|
2857
|
+
const statusColorClassMap = {
|
|
2858
|
+
bg: statusBgClassMap$1,
|
|
2859
|
+
text: statusTextClassMap,
|
|
2860
|
+
};
|
|
2857
2861
|
const statusTextMap = {
|
|
2858
2862
|
pending: 'Pending',
|
|
2859
2863
|
success: 'Success',
|
|
@@ -2866,7 +2870,6 @@ const statusTextMap = {
|
|
|
2866
2870
|
const variantClassMap = {
|
|
2867
2871
|
full: 'tw-h-squid-l tw-min-w-squid-xxl tw-pl-squid-xxs tw-pr-squid-xs',
|
|
2868
2872
|
compact: 'tw-h-squid-m tw-w-squid-m mobile-lg:tw-w-squid-xl mobile-lg:tw-px-squid-xxs',
|
|
2869
|
-
small: 'tw-flex tw-h-squid-m tw-gap-squid-xxs tw-items-center tw-justify-center',
|
|
2870
2873
|
};
|
|
2871
2874
|
function renderIcon(status, variant) {
|
|
2872
2875
|
switch (status) {
|
|
@@ -2875,7 +2878,7 @@ function renderIcon(status, variant) {
|
|
|
2875
2878
|
case 'error':
|
|
2876
2879
|
return jsxRuntime.jsx(NotAllowedIcon, {});
|
|
2877
2880
|
case 'ongoing':
|
|
2878
|
-
const size = { full: '20', compact: '16'
|
|
2881
|
+
const size = { full: '20', compact: '16' }[variant];
|
|
2879
2882
|
return jsxRuntime.jsx(Loader, { size: size, strokeWidth: "4" });
|
|
2880
2883
|
case 'waiting':
|
|
2881
2884
|
return jsxRuntime.jsx(DotGrid1x3HorizontalIcon, {});
|
|
@@ -2885,9 +2888,7 @@ function renderIcon(status, variant) {
|
|
|
2885
2888
|
}
|
|
2886
2889
|
function TransactionState(_a) {
|
|
2887
2890
|
var { status, variant = 'full', icon } = _a, props = __rest$1(_a, ["status", "variant", "icon"]);
|
|
2888
|
-
return (jsxRuntime.jsxs("div", Object.assign({}, props, { className: cn('tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-m', variantClassMap[variant], variant === '
|
|
2889
|
-
// 'small' variant has transparent background
|
|
2890
|
-
variant !== 'small' && statusBgClassMap$1[status], props.className), children: [icon !== null && icon !== void 0 ? icon : renderIcon(status, variant), variant === 'full' ? (jsxRuntime.jsx(BodyText, { size: "small", children: statusTextMap[status] })) : variant === 'small' ? (jsxRuntime.jsx(CaptionText, { children: statusTextMap[status] })) : null] })));
|
|
2891
|
+
return (jsxRuntime.jsxs("div", Object.assign({}, props, { className: cn('tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-m tw-text-grey-900', variantClassMap[variant], statusBgClassMap$1[status], props.className), children: [icon !== null && icon !== void 0 ? icon : renderIcon(status, variant), variant === 'full' && (jsxRuntime.jsx(BodyText, { size: "small", children: statusTextMap[status] }))] })));
|
|
2891
2892
|
}
|
|
2892
2893
|
|
|
2893
2894
|
function UsdAmount({ usdAmount }) {
|
|
@@ -2961,7 +2962,7 @@ function ArrowUpIcon() {
|
|
|
2961
2962
|
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "14", fill: "none", viewBox: "0 0 10 14", children: jsxRuntime.jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M1 5.667l4-4 4 4M5 2.334v10" }) }));
|
|
2962
2963
|
}
|
|
2963
2964
|
function ArrowCornerDownRightIcon({ size = '24', className, }) {
|
|
2964
|
-
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", {
|
|
2965
|
+
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4 4C4.55228 4 5 4.44772 5 5V13C5 13.5523 5.44772 14 6 14H17.5858L15.2929 11.7071C14.9024 11.3166 14.9024 10.6834 15.2929 10.2929C15.6834 9.90237 16.3166 9.90237 16.7071 10.2929L20.7071 14.2929C21.0976 14.6834 21.0976 15.3166 20.7071 15.7071L16.7071 19.7071C16.3166 20.0976 15.6834 20.0976 15.2929 19.7071C14.9024 19.3166 14.9024 18.6834 15.2929 18.2929L17.5858 16H6C4.34315 16 3 14.6569 3 13V5C3 4.44772 3.44772 4 4 4Z", fill: "currentColor" }) }));
|
|
2965
2966
|
}
|
|
2966
2967
|
|
|
2967
2968
|
function Copy(_a) {
|
|
@@ -3041,44 +3042,78 @@ function ArrowButton(_a) {
|
|
|
3041
3042
|
'aria-disabled:tw-bg-grey-600 aria-disabled:tw-text-grey-800'), children: jsxRuntime.jsx(ArrowRightIcon, {}) })] })));
|
|
3042
3043
|
}
|
|
3043
3044
|
|
|
3044
|
-
const INTERNAL_SQUID_THEME_KEYS = [
|
|
3045
|
-
'grey-100',
|
|
3046
|
-
'grey-200',
|
|
3047
|
-
'grey-300',
|
|
3048
|
-
'grey-400',
|
|
3049
|
-
'grey-500',
|
|
3050
|
-
'grey-600',
|
|
3051
|
-
'grey-700',
|
|
3052
|
-
'grey-800',
|
|
3053
|
-
'grey-900',
|
|
3054
|
-
'royal-300',
|
|
3055
|
-
'royal-400',
|
|
3056
|
-
'royal-500',
|
|
3057
|
-
'royal-700',
|
|
3058
|
-
'status-positive',
|
|
3059
|
-
'status-negative',
|
|
3060
|
-
'status-partial',
|
|
3061
|
-
'material-light-thin',
|
|
3062
|
-
'material-light-average',
|
|
3063
|
-
'material-light-thick',
|
|
3064
|
-
'material-dark-thin',
|
|
3065
|
-
'material-dark-average',
|
|
3066
|
-
'material-dark-thick',
|
|
3067
|
-
// grey-100 with 0.05 opacity
|
|
3068
|
-
'grey-100-005',
|
|
3069
|
-
// material-light and grey-900 blended color
|
|
3070
|
-
'material-light-blend-grey-900',
|
|
3071
|
-
];
|
|
3072
3045
|
const SQUID_THEME_CSS_VARIABLE_PREFIX = '--squid-theme-';
|
|
3073
3046
|
/**
|
|
3074
3047
|
* Mapping between readable variables name and css variables used TailwindCSS config
|
|
3075
3048
|
*/
|
|
3076
|
-
const themeTypesKeys =
|
|
3077
|
-
|
|
3078
|
-
|
|
3079
|
-
|
|
3049
|
+
const themeTypesKeys = {
|
|
3050
|
+
'grey-100': {
|
|
3051
|
+
cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100`,
|
|
3052
|
+
},
|
|
3053
|
+
'grey-200': {
|
|
3054
|
+
cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-200`,
|
|
3055
|
+
},
|
|
3056
|
+
'grey-300': {
|
|
3057
|
+
cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-300`,
|
|
3058
|
+
},
|
|
3059
|
+
'grey-400': {
|
|
3060
|
+
cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-400`,
|
|
3061
|
+
},
|
|
3062
|
+
'grey-500': {
|
|
3063
|
+
cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-500`,
|
|
3064
|
+
},
|
|
3065
|
+
'grey-600': {
|
|
3066
|
+
cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-600`,
|
|
3067
|
+
},
|
|
3068
|
+
'grey-700': {
|
|
3069
|
+
cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-700`,
|
|
3070
|
+
},
|
|
3071
|
+
'grey-800': {
|
|
3072
|
+
cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-800`,
|
|
3073
|
+
},
|
|
3074
|
+
'grey-900': {
|
|
3075
|
+
cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-900`,
|
|
3076
|
+
},
|
|
3077
|
+
'material-dark-average': {
|
|
3078
|
+
cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-average`,
|
|
3079
|
+
},
|
|
3080
|
+
'material-dark-thick': {
|
|
3081
|
+
cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-thick`,
|
|
3082
|
+
},
|
|
3083
|
+
'material-dark-thin': {
|
|
3084
|
+
cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-thin`,
|
|
3085
|
+
},
|
|
3086
|
+
'material-light-average': {
|
|
3087
|
+
cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-average`,
|
|
3088
|
+
},
|
|
3089
|
+
'material-light-thick': {
|
|
3090
|
+
cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thick`,
|
|
3091
|
+
},
|
|
3092
|
+
'material-light-thin': {
|
|
3093
|
+
cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thin`,
|
|
3094
|
+
},
|
|
3095
|
+
'royal-400': {
|
|
3096
|
+
cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-400`,
|
|
3097
|
+
},
|
|
3098
|
+
'royal-500': {
|
|
3099
|
+
cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-500`,
|
|
3100
|
+
},
|
|
3101
|
+
'status-negative': {
|
|
3102
|
+
cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-negative`,
|
|
3103
|
+
},
|
|
3104
|
+
'status-positive': {
|
|
3105
|
+
cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-positive`,
|
|
3106
|
+
},
|
|
3107
|
+
'status-partial': {
|
|
3108
|
+
cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-partial`,
|
|
3080
3109
|
},
|
|
3081
|
-
|
|
3110
|
+
'grey-100-005': {
|
|
3111
|
+
cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100-005`,
|
|
3112
|
+
},
|
|
3113
|
+
'material-light-blend-grey-900': {
|
|
3114
|
+
cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-blend-grey-900`,
|
|
3115
|
+
},
|
|
3116
|
+
};
|
|
3082
3117
|
|
|
3083
3118
|
function SearchIcon() {
|
|
3084
3119
|
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: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
|
|
@@ -16657,10 +16692,6 @@ const CSS_VARS = {
|
|
|
16657
16692
|
SLIDE_TO_BOTTOM_DURATION: '--squid-animation-slide-to-bottom-duration',
|
|
16658
16693
|
BLUR_IN_DURATION: '--squid-animation-blur-in-duration',
|
|
16659
16694
|
BLUR_OUT_DURATION: '--squid-animation-blur-out-duration',
|
|
16660
|
-
COLLAPSIBLE_MENU_OPEN_WIDTH: '--squid-collapsible-menu-open-width',
|
|
16661
|
-
COLLAPSIBLE_MENU_OPEN_HEIGHT: '--squid-collapsible-menu-open-height',
|
|
16662
|
-
COLLAPSIBLE_MENU_CLOSED_WIDTH: '--squid-collapsible-menu-closed-width',
|
|
16663
|
-
COLLAPSIBLE_MENU_CLOSED_HEIGHT: '--squid-collapsible-menu-closed-height',
|
|
16664
16695
|
};
|
|
16665
16696
|
const ANIMATION_DURATIONS = {
|
|
16666
16697
|
SHOW_ROUTE: 300,
|
|
@@ -16862,9 +16893,6 @@ function EmojiSadIcon({ className, size = '20', }) {
|
|
|
16862
16893
|
function EmojiMeh({ className, size = '20', }) {
|
|
16863
16894
|
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", { fillRule: "evenodd", clipRule: "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 10ZM7.25 9C7.94036 9 8.5 8.32843 8.5 7.5C8.5 6.67157 7.94036 6 7.25 6C6.55964 6 6 6.67157 6 7.5C6 8.32843 6.55964 9 7.25 9ZM14 7.5C14 8.32843 13.4404 9 12.75 9C12.0596 9 11.5 8.32843 11.5 7.5C11.5 6.67157 12.0596 6 12.75 6C13.4404 6 14 6.67157 14 7.5ZM7 12C6.44772 12 6 12.4477 6 13C6 13.5523 6.44772 14 7 14H13C13.5523 14 14 13.5523 14 13C14 12.4477 13.5523 12 13 12H7Z", fill: "currentColor" }) }));
|
|
16864
16895
|
}
|
|
16865
|
-
function SmileIcon({ size = '24', className, }) {
|
|
16866
|
-
return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: [jsxRuntime.jsxs("g", { clipPath: "url(#clip0_2573_74090)", children: [jsxRuntime.jsx("path", { d: "M12 22.9875C18.0751 22.9875 23 18.0653 23 11.9935C23 5.92168 18.0751 0.999512 12 0.999512C5.92487 0.999512 1 5.92168 1 11.9935C1 18.0653 5.92487 22.9875 12 22.9875Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M7.31374 11.0095C6.94478 9.96836 7.48967 8.82526 8.53079 8.45629C9.57192 8.08732 10.715 8.63222 11.084 9.67334", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M13.9119 8.67122C13.5429 7.6301 14.0878 6.487 15.1289 6.11803C16.1701 5.74907 17.3132 6.29396 17.6821 7.33508", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M8.6499 14.7798C10.0385 16.7323 12.6907 17.5915 15.1705 16.7127C17.6503 15.8339 19.1696 13.4963 19.0181 11.1054", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_2573_74090", children: jsxRuntime.jsx("rect", { width: "24", height: "24", fill: "white" }) }) })] }));
|
|
16867
|
-
}
|
|
16868
16896
|
|
|
16869
16897
|
function ErrorMessage({ message, showIcon = true }) {
|
|
16870
16898
|
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 })] }));
|
|
@@ -16986,57 +17014,6 @@ function useMediaQuery(query, { defaultValue = false, initializeWithValue = true
|
|
|
16986
17014
|
return matches;
|
|
16987
17015
|
}
|
|
16988
17016
|
|
|
16989
|
-
function useCollapsibleMenu() {
|
|
16990
|
-
const [isMenuOpen, setIsMenuOpen] = React$1.useState(false);
|
|
16991
|
-
const menuRef = React$1.useRef(null);
|
|
16992
|
-
const toggleMenu = () => {
|
|
16993
|
-
setIsMenuOpen(!isMenuOpen);
|
|
16994
|
-
};
|
|
16995
|
-
React$1.useEffect(() => {
|
|
16996
|
-
const handleClickOutside = (event) => {
|
|
16997
|
-
if (menuRef.current && !menuRef.current.contains(event.target)) {
|
|
16998
|
-
setIsMenuOpen(false);
|
|
16999
|
-
}
|
|
17000
|
-
};
|
|
17001
|
-
document.addEventListener('mousedown', handleClickOutside);
|
|
17002
|
-
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
17003
|
-
}, []);
|
|
17004
|
-
return {
|
|
17005
|
-
isMenuOpen,
|
|
17006
|
-
toggleMenu,
|
|
17007
|
-
menuRef,
|
|
17008
|
-
};
|
|
17009
|
-
}
|
|
17010
|
-
|
|
17011
|
-
const useTimer = ({ immediateStart = true, }) => {
|
|
17012
|
-
const [timer, setTimer] = React$1.useState('0s');
|
|
17013
|
-
const intervalRef = React$1.useRef(null);
|
|
17014
|
-
const startTimer = () => {
|
|
17015
|
-
if (intervalRef.current !== null)
|
|
17016
|
-
return; // Prevent multiple intervals
|
|
17017
|
-
const startTime = Date.now();
|
|
17018
|
-
intervalRef.current = window.setInterval(() => {
|
|
17019
|
-
const elapsedTime = Date.now() - startTime;
|
|
17020
|
-
setTimer(formatDuration(elapsedTime));
|
|
17021
|
-
}, 1000);
|
|
17022
|
-
};
|
|
17023
|
-
const stopTimer = () => {
|
|
17024
|
-
if (intervalRef.current !== null) {
|
|
17025
|
-
clearInterval(intervalRef.current);
|
|
17026
|
-
intervalRef.current = null;
|
|
17027
|
-
}
|
|
17028
|
-
};
|
|
17029
|
-
React$1.useEffect(() => {
|
|
17030
|
-
if (immediateStart) {
|
|
17031
|
-
startTimer();
|
|
17032
|
-
}
|
|
17033
|
-
return () => {
|
|
17034
|
-
stopTimer();
|
|
17035
|
-
};
|
|
17036
|
-
}, [immediateStart]);
|
|
17037
|
-
return { timer, stopTimer, startTimer };
|
|
17038
|
-
};
|
|
17039
|
-
|
|
17040
17017
|
const dropdownPositionClassMap = {
|
|
17041
17018
|
top: 'tw-right-[calc(100%-10px)] tw-bottom-7',
|
|
17042
17019
|
bottom: 'tw-right-[calc(100%-10px)] tw-top-7',
|
|
@@ -17494,29 +17471,9 @@ function Transfer({ isLoading, from, to, className }) {
|
|
|
17494
17471
|
return (jsxRuntime.jsx("div", { className: cn('tw-flex tw-items-center tw-gap-squid-xxs', className), children: jsxRuntime.jsxs(Join, { glue: () => jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-text-grey-500" }), children: [isLoading ? jsxRuntime.jsx(TextSkeleton, {}) : from, isLoading ? jsxRuntime.jsx(TextSkeleton, {}) : to] }) }));
|
|
17495
17472
|
}
|
|
17496
17473
|
|
|
17497
|
-
function TransactionItem({ className, isLoading = false, status, image, type, hash, fromChain, toChain, fromAmount, toAmount, timestamp,
|
|
17498
|
-
return (jsxRuntime.jsxs("div", { className: cn('tw-flex tw-items-stretch tw-gap-squid-xs tw-bg-grey-900 tw-p-squid-xs', className), children: [
|
|
17474
|
+
function TransactionItem({ className, isLoading = false, status, image, type, hash, fromChain, toChain, fromAmount, toAmount, timestamp, }) {
|
|
17475
|
+
return (jsxRuntime.jsxs("div", { className: cn('tw-flex tw-items-stretch tw-gap-squid-xs tw-bg-grey-900 tw-p-squid-xs', className), children: [jsxRuntime.jsxs("div", { className: "tw-timeline-gradient-mask tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs", children: [jsxRuntime.jsxs(Timeline, { className: "tw-flex-grow tw-text-grey-700", children: [jsxRuntime.jsx(Timeline.Straight, {}), jsxRuntime.jsx(Timeline.CapBottom, {})] }), jsxRuntime.jsx(TransactionState, { status: !status || isLoading ? 'pending' : status, variant: "compact" }), jsxRuntime.jsxs(Timeline, { className: "tw-flex-grow tw-text-grey-700", children: [jsxRuntime.jsx(Timeline.CapTop, {}), jsxRuntime.jsx(Timeline.Straight, {})] })] }), jsxRuntime.jsx("div", { className: "tw-flex tw-w-[50px] tw-items-center tw-justify-center", children: image }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-grow tw-flex-col tw-gap-squid-xxs", children: [jsxRuntime.jsx(CaptionText, { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: jsxRuntime.jsxs(Join, { glue: () => jsxRuntime.jsx(PipeSeparator, { className: "tw-text-grey-600" }), children: [isLoading ? (jsxRuntime.jsx(TextSkeleton, {})) : type ? (jsxRuntime.jsxs("span", { className: "tw-inline-flex tw-items-center tw-gap-[2px] tw-text-royal-500", children: [type === null || type === void 0 ? void 0 : type.icon, " ", type === null || type === void 0 ? void 0 : type.name] })) : null, isLoading ? (jsxRuntime.jsx(TextSkeleton, {})) : hash ? (jsxRuntime.jsx("span", { className: "tw-text-grey-500", children: truncateHash(hash) })) : null] }) }), (isLoading || fromChain || toChain) && (jsxRuntime.jsx(CaptionText, { className: "tw-block tw-h-squid-m", children: jsxRuntime.jsx(Transfer, { className: "tw-text-grey-400", isLoading: isLoading, from: fromChain && (jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: fromChain.name })), to: toChain && (jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: toChain.name })) }) })), (isLoading || fromAmount || toAmount) && (jsxRuntime.jsx(Transfer, { className: "tw-text-grey-300", isLoading: isLoading, from: fromAmount ? (jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount })) : undefined, to: toAmount ? (jsxRuntime.jsx(BodyText, { size: "small", children: toAmount })) : undefined }))] }), timestamp && (jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: formatRelativeTime(timestamp) }))] }));
|
|
17499
17476
|
}
|
|
17500
|
-
const TransactionItemHeaderWrapper = ({ children, }) => {
|
|
17501
|
-
return (jsxRuntime.jsx(Join, { glue: () => jsxRuntime.jsx(PipeSeparator, { className: "tw-text-grey-600" }), children: children }));
|
|
17502
|
-
};
|
|
17503
|
-
const TransactionItemHeader = ({ isLoading, variant, type, hash, status, }) => {
|
|
17504
|
-
if (isLoading) {
|
|
17505
|
-
return (jsxRuntime.jsxs(TransactionItemHeaderWrapper, { children: [jsxRuntime.jsx(TextSkeleton, {}), jsxRuntime.jsx(TextSkeleton, {})] }));
|
|
17506
|
-
}
|
|
17507
|
-
if (variant === 'full') {
|
|
17508
|
-
if (!type || !hash)
|
|
17509
|
-
return null;
|
|
17510
|
-
return (jsxRuntime.jsxs(TransactionItemHeaderWrapper, { children: [jsxRuntime.jsx(TxTypeLabel, { type: type }), jsxRuntime.jsx("span", { className: "tw-text-grey-500", children: truncateHash(hash) })] }));
|
|
17511
|
-
}
|
|
17512
|
-
if (status && type) {
|
|
17513
|
-
return (jsxRuntime.jsxs(TransactionItemHeaderWrapper, { children: [jsxRuntime.jsx(TransactionState, { status: status, variant: "small" }), jsxRuntime.jsx(TxTypeLabel, { type: type })] }));
|
|
17514
|
-
}
|
|
17515
|
-
return null;
|
|
17516
|
-
};
|
|
17517
|
-
const TxTypeLabel = ({ type }) => {
|
|
17518
|
-
return (jsxRuntime.jsxs("span", { className: "tw-inline-flex tw-items-center tw-gap-[2px] tw-text-royal-500", children: [type === null || type === void 0 ? void 0 : type.icon, " ", type === null || type === void 0 ? void 0 : type.name] }));
|
|
17519
|
-
};
|
|
17520
17477
|
|
|
17521
17478
|
const borderRadiusClassMap = {
|
|
17522
17479
|
sm: 'tw-rounded-squid-s',
|
|
@@ -17597,20 +17554,6 @@ function NavigationBar(_a) {
|
|
|
17597
17554
|
: 'tw-flex'), children: jsxRuntime.jsx(HeadingText, { size: "small", children: title }) })) : null] })));
|
|
17598
17555
|
}
|
|
17599
17556
|
|
|
17600
|
-
function CollapsibleMenu({ children, menuRef, isOpen, transitionDuration, size, className, }) {
|
|
17601
|
-
return (jsxRuntime.jsx("aside", { style: Object.assign({ transitionDuration, transitionTimingFunction: isOpen
|
|
17602
|
-
? 'cubic-bezier(0.4, 1.3, 0.4, 1)'
|
|
17603
|
-
: undefined, [CSS_VARS.COLLAPSIBLE_MENU_OPEN_WIDTH]: size.open.width, [CSS_VARS.COLLAPSIBLE_MENU_OPEN_HEIGHT]: size.open.height, [CSS_VARS.COLLAPSIBLE_MENU_CLOSED_WIDTH]: size.closed.width, [CSS_VARS.COLLAPSIBLE_MENU_CLOSED_HEIGHT]: size.closed.height }, (isOpen
|
|
17604
|
-
? {
|
|
17605
|
-
width: `var(${CSS_VARS.COLLAPSIBLE_MENU_OPEN_WIDTH})`,
|
|
17606
|
-
height: `var(${CSS_VARS.COLLAPSIBLE_MENU_OPEN_HEIGHT})`,
|
|
17607
|
-
}
|
|
17608
|
-
: {
|
|
17609
|
-
width: `var(${CSS_VARS.COLLAPSIBLE_MENU_CLOSED_WIDTH})`,
|
|
17610
|
-
height: `var(${CSS_VARS.COLLAPSIBLE_MENU_CLOSED_HEIGHT})`,
|
|
17611
|
-
})), className: cn('tw-fixed tw-z-40 tw-flex tw-flex-col tw-overflow-hidden tw-bg-grey-900 tw-text-grey-200 tw-shadow-elevation-light-3 tw-outline-material-light-thin', className), ref: menuRef, children: children }));
|
|
17612
|
-
}
|
|
17613
|
-
|
|
17614
17557
|
const lightTheme = {
|
|
17615
17558
|
// content
|
|
17616
17559
|
'content-100': '#17191C',
|
|
@@ -17623,10 +17566,8 @@ const lightTheme = {
|
|
|
17623
17566
|
'content-800': '#EDEEF3',
|
|
17624
17567
|
'content-900': '#FBFBFD',
|
|
17625
17568
|
// accent
|
|
17626
|
-
'accent-300': '#8C53C5',
|
|
17627
17569
|
'accent-400': '#9E79D2',
|
|
17628
17570
|
'accent-500': '#B893EC',
|
|
17629
|
-
'accent-700': '#E3D0FD',
|
|
17630
17571
|
// status
|
|
17631
17572
|
'status-positive': '#17CF26',
|
|
17632
17573
|
'status-negative': '#FF5B4D',
|
|
@@ -17644,333 +17585,14 @@ const darkTheme = {
|
|
|
17644
17585
|
'content-800': '#292C32',
|
|
17645
17586
|
'content-900': '#17191C',
|
|
17646
17587
|
// accent
|
|
17647
|
-
'accent-300': '#D9BEF4',
|
|
17648
17588
|
'accent-400': '#B893EC',
|
|
17649
17589
|
'accent-500': '#9E79D2',
|
|
17650
|
-
'accent-700': '#6B45A1',
|
|
17651
17590
|
// status
|
|
17652
17591
|
'status-positive': '#7AE870',
|
|
17653
17592
|
'status-negative': '#FF4D5B',
|
|
17654
17593
|
'status-warning': '#F3AF25',
|
|
17655
17594
|
};
|
|
17656
17595
|
|
|
17657
|
-
const spacing = {
|
|
17658
|
-
'squid-xxs': '0.3125rem', // 5px
|
|
17659
|
-
'squid-xs': '0.625rem', // 10px
|
|
17660
|
-
'squid-s': '0.9375rem', // 15px
|
|
17661
|
-
'squid-m': '1.25rem', // 20px
|
|
17662
|
-
'squid-l': '1.875rem', // 30px
|
|
17663
|
-
'squid-xl': '2.5rem', // 40px
|
|
17664
|
-
'squid-xxl': '3.75rem', // 60px
|
|
17665
|
-
};
|
|
17666
|
-
const backdropBlur = {
|
|
17667
|
-
'/10': '10px',
|
|
17668
|
-
'/20': '20px',
|
|
17669
|
-
};
|
|
17670
|
-
const widths = {
|
|
17671
|
-
button: '9.5625rem', // 153px
|
|
17672
|
-
'list-item-compact': '22.0625rem', // 353px
|
|
17673
|
-
'list-item-small': '21.25rem', // 340px
|
|
17674
|
-
'card-large': '480px',
|
|
17675
|
-
'card-compact': '393px',
|
|
17676
|
-
'modal-extra-large': '440px',
|
|
17677
|
-
'modal-large': '400px',
|
|
17678
|
-
'modal-compact': '373px',
|
|
17679
|
-
};
|
|
17680
|
-
const heights = {
|
|
17681
|
-
button: '3.75rem', // 60px
|
|
17682
|
-
'list-item-large': '3.125rem', // 50px
|
|
17683
|
-
'list-item-small': '2.5rem', // 40px
|
|
17684
|
-
'card-large': '660px',
|
|
17685
|
-
'card-compact': '640px',
|
|
17686
|
-
'card-small': '580px',
|
|
17687
|
-
'modal-large': '600px',
|
|
17688
|
-
'modal-compact': '631px',
|
|
17689
|
-
};
|
|
17690
|
-
// tw-shadow-*
|
|
17691
|
-
const boxShadow = {
|
|
17692
|
-
'elevation-dark-3': '0px 2px 4px 0px rgba(0, 0, 0, 0.20), 0px 5px 50px -1px rgba(0, 0, 0, 0.33)',
|
|
17693
|
-
'elevation-light-3': '0px 2px 4px 0px rgba(0, 0, 0, 0.10), 0px 5px 50px -1px rgba(0, 0, 0, 0.20)',
|
|
17694
|
-
'elevation-dark-2': '0px 2px 5px 1px rgba(0, 0, 0, 0.20), 0px 5px 20px -1px rgba(0, 0, 0, 0.33)',
|
|
17695
|
-
'elevation-light-1': '0px 1px 2px 0px #0000001A',
|
|
17696
|
-
'elevation-light-2': '0px 2px 5px 1px rgba(0, 0, 0, 0.10), 0px 5px 20px -1px rgba(0, 0, 0, 0.10)',
|
|
17697
|
-
'inset-royal': '0px 0px 50px 0px #876FE2 inset',
|
|
17698
|
-
};
|
|
17699
|
-
// tw-bg-*
|
|
17700
|
-
const backgrounds = {
|
|
17701
|
-
'royal-light': 'linear-gradient(180deg, #A577D8 0%, #BF91F2 100%)',
|
|
17702
|
-
'royal-dark': 'linear-gradient(180deg, #BF91F2 0%, #A577D8 100%)',
|
|
17703
|
-
'dark-cover': 'linear-gradient(90deg, var(--squid-theme-material-dark-thick) 45.4%, transparent 50.85%, var(--squid-theme-material-dark-thick) 55.61%)',
|
|
17704
|
-
};
|
|
17705
|
-
const baseTailwindConfig = {
|
|
17706
|
-
prefix: 'tw-',
|
|
17707
|
-
content: ['./src/**/*.{ts,tsx,js,jsx}', '.storybook/**/*.{ts,tsx,js,jsx}'],
|
|
17708
|
-
theme: {
|
|
17709
|
-
extend: {
|
|
17710
|
-
screens: Object.values(MEDIA_QUERIES).reduce((acc, curr) => {
|
|
17711
|
-
// 'raw' means that we want to use the raw media query value
|
|
17712
|
-
// https://tailwindcss.com/docs/screens#custom-media-queries
|
|
17713
|
-
acc[curr.key] = { raw: curr.media };
|
|
17714
|
-
return acc;
|
|
17715
|
-
}, {}),
|
|
17716
|
-
keyframes: {
|
|
17717
|
-
'move-to-right-with-spring-bounce': {
|
|
17718
|
-
'0%': {
|
|
17719
|
-
transform: 'translateX(-25%)',
|
|
17720
|
-
},
|
|
17721
|
-
'50%': {
|
|
17722
|
-
transform: 'translateX(27%)',
|
|
17723
|
-
},
|
|
17724
|
-
'80%': {
|
|
17725
|
-
transform: 'translateX(24%)',
|
|
17726
|
-
},
|
|
17727
|
-
'100%': {
|
|
17728
|
-
transform: 'translateX(25%)',
|
|
17729
|
-
},
|
|
17730
|
-
},
|
|
17731
|
-
'move-to-left-with-spring-bounce': {
|
|
17732
|
-
'0%': {
|
|
17733
|
-
transform: 'translateX(25%)',
|
|
17734
|
-
},
|
|
17735
|
-
'50%': {
|
|
17736
|
-
transform: 'translateX(-27%)',
|
|
17737
|
-
},
|
|
17738
|
-
'80%': {
|
|
17739
|
-
transform: 'translateX(-24%)',
|
|
17740
|
-
},
|
|
17741
|
-
'100%': {
|
|
17742
|
-
transform: 'translateX(-25%)',
|
|
17743
|
-
},
|
|
17744
|
-
},
|
|
17745
|
-
'slide-to-top': {
|
|
17746
|
-
'0%': {
|
|
17747
|
-
transform: 'translate3d(0, 650px, 0)',
|
|
17748
|
-
},
|
|
17749
|
-
'100%': {
|
|
17750
|
-
transform: 'translate3d(0, 0, 0)',
|
|
17751
|
-
},
|
|
17752
|
-
},
|
|
17753
|
-
'slide-to-bottom': {
|
|
17754
|
-
'0%': {
|
|
17755
|
-
transform: 'translate3d(0, 0, 0)',
|
|
17756
|
-
},
|
|
17757
|
-
'100%': {
|
|
17758
|
-
transform: 'translate3d(0, 650px, 0)',
|
|
17759
|
-
},
|
|
17760
|
-
},
|
|
17761
|
-
'expand-route': {
|
|
17762
|
-
'0%': {
|
|
17763
|
-
height: '60px',
|
|
17764
|
-
},
|
|
17765
|
-
'100%': {
|
|
17766
|
-
height: '100%',
|
|
17767
|
-
},
|
|
17768
|
-
},
|
|
17769
|
-
'collapse-route': {
|
|
17770
|
-
'0%': {
|
|
17771
|
-
height: '100%',
|
|
17772
|
-
},
|
|
17773
|
-
'100%': {
|
|
17774
|
-
height: '60px',
|
|
17775
|
-
},
|
|
17776
|
-
},
|
|
17777
|
-
'fade-in': {
|
|
17778
|
-
'0%': {
|
|
17779
|
-
opacity: '0',
|
|
17780
|
-
},
|
|
17781
|
-
'100%': {
|
|
17782
|
-
opacity: '1',
|
|
17783
|
-
},
|
|
17784
|
-
},
|
|
17785
|
-
'fade-out': {
|
|
17786
|
-
'0%': {
|
|
17787
|
-
opacity: '1',
|
|
17788
|
-
},
|
|
17789
|
-
'100%': {
|
|
17790
|
-
opacity: '0',
|
|
17791
|
-
},
|
|
17792
|
-
},
|
|
17793
|
-
'loading-gradient': {
|
|
17794
|
-
'0%': {
|
|
17795
|
-
transform: 'translateX(-70%)',
|
|
17796
|
-
opacity: '0',
|
|
17797
|
-
},
|
|
17798
|
-
'50%': {
|
|
17799
|
-
opacity: '1',
|
|
17800
|
-
},
|
|
17801
|
-
'100%': {
|
|
17802
|
-
opacity: '0',
|
|
17803
|
-
transform: 'translateX(70%)',
|
|
17804
|
-
},
|
|
17805
|
-
},
|
|
17806
|
-
'translate-to-bottom': {
|
|
17807
|
-
'0%': {
|
|
17808
|
-
transform: 'translateY(0)',
|
|
17809
|
-
},
|
|
17810
|
-
'100%': {
|
|
17811
|
-
transform: 'translateY(100%)',
|
|
17812
|
-
},
|
|
17813
|
-
},
|
|
17814
|
-
'translate-to-top': {
|
|
17815
|
-
'0%': {
|
|
17816
|
-
transform: 'translateY(0)',
|
|
17817
|
-
},
|
|
17818
|
-
'100%': {
|
|
17819
|
-
transform: 'translateY(-100%)',
|
|
17820
|
-
},
|
|
17821
|
-
},
|
|
17822
|
-
'blur-in': {
|
|
17823
|
-
'0%': {
|
|
17824
|
-
'backdrop-filter': 'blur(0px)',
|
|
17825
|
-
},
|
|
17826
|
-
'100%': {
|
|
17827
|
-
'backdrop-filter': 'blur(20px) saturate(150%)',
|
|
17828
|
-
'background-color': `var(${themeTypesKeys['material-dark-average'].cssVariable})`,
|
|
17829
|
-
},
|
|
17830
|
-
},
|
|
17831
|
-
'blur-out': {
|
|
17832
|
-
'0%': {
|
|
17833
|
-
'backdrop-filter': 'blur(20px) saturate(150%)',
|
|
17834
|
-
'background-color': `var(${themeTypesKeys['material-dark-average'].cssVariable})`,
|
|
17835
|
-
},
|
|
17836
|
-
'100%': {
|
|
17837
|
-
'backdrop-filter': 'blur(0px)',
|
|
17838
|
-
},
|
|
17839
|
-
},
|
|
17840
|
-
display: {
|
|
17841
|
-
'0%': {
|
|
17842
|
-
display: 'none',
|
|
17843
|
-
},
|
|
17844
|
-
'100%': {
|
|
17845
|
-
display: 'block',
|
|
17846
|
-
},
|
|
17847
|
-
},
|
|
17848
|
-
hide: {
|
|
17849
|
-
'0%': {
|
|
17850
|
-
display: 'block',
|
|
17851
|
-
},
|
|
17852
|
-
'100%': {
|
|
17853
|
-
display: 'none',
|
|
17854
|
-
},
|
|
17855
|
-
},
|
|
17856
|
-
'move-loading-cover-to-right': {
|
|
17857
|
-
'0%': {
|
|
17858
|
-
transform: 'translateX(-64%)',
|
|
17859
|
-
},
|
|
17860
|
-
'100%': {
|
|
17861
|
-
transform: 'translateX(0%)',
|
|
17862
|
-
},
|
|
17863
|
-
},
|
|
17864
|
-
'scale-and-fade-down': {
|
|
17865
|
-
'0%': {
|
|
17866
|
-
transform: 'scale(1)',
|
|
17867
|
-
opacity: '1',
|
|
17868
|
-
},
|
|
17869
|
-
'100%': {
|
|
17870
|
-
transform: 'scale(0.9)',
|
|
17871
|
-
opacity: '0.5',
|
|
17872
|
-
},
|
|
17873
|
-
},
|
|
17874
|
-
'scale-and-fade-up': {
|
|
17875
|
-
'0%': {
|
|
17876
|
-
transform: 'scale(0.9)',
|
|
17877
|
-
opacity: '0.5',
|
|
17878
|
-
},
|
|
17879
|
-
'100%': {
|
|
17880
|
-
transform: 'scale(1)',
|
|
17881
|
-
opacity: '1',
|
|
17882
|
-
},
|
|
17883
|
-
},
|
|
17884
|
-
},
|
|
17885
|
-
animation: {
|
|
17886
|
-
'move-to-right-with-spring-bounce': `move-to-right-with-spring-bounce var(${CSS_VARS.MOVE_WITH_SPRING_BOUNCE_DURATION}, 0s) ease-out both`,
|
|
17887
|
-
'move-to-left-with-spring-bounce': `move-to-left-with-spring-bounce var(${CSS_VARS.MOVE_WITH_SPRING_BOUNCE_DURATION}, 0s) ease-out both`,
|
|
17888
|
-
'slide-to-top': `slide-to-top var(${CSS_VARS.SLIDE_TO_TOP_DURATION}, 0s) ${ANIMATION_TIMINGS.SHOW_ROUTE} both`,
|
|
17889
|
-
'slide-to-bottom': `slide-to-bottom var(${CSS_VARS.SLIDE_TO_BOTTOM_DURATION}, 0s) ${ANIMATION_TIMINGS.HIDE_ROUTE} both`,
|
|
17890
|
-
'expand-route': `expand-route var(${CSS_VARS.EXPAND_ROUTE_DURATION}, 0s) ${ANIMATION_TIMINGS.EXPAND_ROUTE} both`,
|
|
17891
|
-
'collapse-route': `collapse-route var(${CSS_VARS.COLLAPSE_ROUTE_DURATION}, 0s) ${ANIMATION_TIMINGS.COLLAPSE_ROUTE} both`,
|
|
17892
|
-
'fade-in': `fade-in var(${CSS_VARS.FADE_IN_DURATION}, 0s) ease-out both`,
|
|
17893
|
-
'fade-out': `fade-out var(${CSS_VARS.FADE_OUT_DURATION}, 0s) ease-out both`,
|
|
17894
|
-
'scale-and-fade-down': `scale-and-fade-down var(${CSS_VARS.SCALE_AND_FADE_DOWN_DURATION}, 0s) ${ANIMATION_TIMINGS.EXPAND_ROUTE} both`,
|
|
17895
|
-
'scale-and-fade-up': `scale-and-fade-up var(${CSS_VARS.SCALE_AND_FADE_UP_DURATION}, 0s) ${ANIMATION_TIMINGS.COLLAPSE_ROUTE} both`,
|
|
17896
|
-
'loading-gradient': 'loading-gradient 1s ease-in-out both infinite',
|
|
17897
|
-
'translate-to-bottom': `translate-to-bottom var(${CSS_VARS.TRANSLATE_TOP_OR_BOTTOM}, 0s) ${ANIMATION_TIMINGS.EXPAND_ROUTE} both`,
|
|
17898
|
-
'translate-to-top': `translate-to-top var(${CSS_VARS.TRANSLATE_TOP_OR_BOTTOM}, 0s) ${ANIMATION_TIMINGS.COLLAPSE_ROUTE} both`,
|
|
17899
|
-
'blur-in': `blur-in var(${CSS_VARS.BLUR_IN_DURATION}, 0s) ${ANIMATION_TIMINGS.SHOW_ROUTE} both`,
|
|
17900
|
-
'blur-out': `blur-out var(${CSS_VARS.BLUR_OUT_DURATION}, 0s) ${ANIMATION_TIMINGS.HIDE_ROUTE} both`,
|
|
17901
|
-
'display-delayed': `display 0s var(${CSS_VARS.DISPLAY_DELAYED_DURATION}, 0s) ease-out both`,
|
|
17902
|
-
hide: `hide 0s ease-out forwards`,
|
|
17903
|
-
'move-loading-cover-to-right': 'move-loading-cover-to-right 1.4s linear infinite',
|
|
17904
|
-
},
|
|
17905
|
-
opacity: {
|
|
17906
|
-
33: '0.33',
|
|
17907
|
-
66: '0.66',
|
|
17908
|
-
},
|
|
17909
|
-
fontFamily: {
|
|
17910
|
-
geist: ['Geist', 'sans-serif'],
|
|
17911
|
-
},
|
|
17912
|
-
letterSpacing: {
|
|
17913
|
-
// body text
|
|
17914
|
-
'body-small': '-0.366px',
|
|
17915
|
-
'body-medium': '-0.675px',
|
|
17916
|
-
'body-large': '-0.843px',
|
|
17917
|
-
// heading letter
|
|
17918
|
-
'heading-small': '-1.05px',
|
|
17919
|
-
'heading-medium': '-2.465px',
|
|
17920
|
-
'heading-large': '-3.525px',
|
|
17921
|
-
},
|
|
17922
|
-
fontSize: {
|
|
17923
|
-
// caption text
|
|
17924
|
-
caption: '0.875rem', // 14px
|
|
17925
|
-
// body text
|
|
17926
|
-
'body-small': '1.14375rem', // 18.5px
|
|
17927
|
-
'body-medium': '1.40625rem', // 22.5px
|
|
17928
|
-
'body-large': '1.75625rem', // 28.1px
|
|
17929
|
-
// heading
|
|
17930
|
-
'heading-small': '2.1875rem', // 35px
|
|
17931
|
-
'heading-medium': '3.08125rem', // 49.3px
|
|
17932
|
-
'heading-large': '4.40625rem', // 70.5px
|
|
17933
|
-
},
|
|
17934
|
-
fontWeight: {
|
|
17935
|
-
// body text and caption text
|
|
17936
|
-
'typography-regular': '400',
|
|
17937
|
-
'typography-bold': '600',
|
|
17938
|
-
// headings
|
|
17939
|
-
'heading-regular': '400',
|
|
17940
|
-
'heading-bold': '600',
|
|
17941
|
-
},
|
|
17942
|
-
lineHeight: {
|
|
17943
|
-
// caption text
|
|
17944
|
-
caption: '19.6px',
|
|
17945
|
-
// body text
|
|
17946
|
-
'body-small': '25.62px',
|
|
17947
|
-
'body-medium': '31.5px',
|
|
17948
|
-
'body-large': '39.34px',
|
|
17949
|
-
// headings
|
|
17950
|
-
'heading-small': '38.5px',
|
|
17951
|
-
'heading-medium': '49.3px',
|
|
17952
|
-
'heading-large': '66.97px',
|
|
17953
|
-
},
|
|
17954
|
-
width: widths,
|
|
17955
|
-
height: heights,
|
|
17956
|
-
minWidth: widths,
|
|
17957
|
-
minHeight: heights,
|
|
17958
|
-
maxWidth: widths,
|
|
17959
|
-
maxHeight: heights,
|
|
17960
|
-
spacing,
|
|
17961
|
-
borderRadius: spacing,
|
|
17962
|
-
boxShadow,
|
|
17963
|
-
backgroundImage: backgrounds,
|
|
17964
|
-
backdropBlur,
|
|
17965
|
-
colors: Object.assign({}, Object.entries(themeTypesKeys).reduce((acc, [key, { cssVariable }]) => {
|
|
17966
|
-
acc[key] = `var(${cssVariable})`;
|
|
17967
|
-
return acc;
|
|
17968
|
-
}, {})),
|
|
17969
|
-
},
|
|
17970
|
-
},
|
|
17971
|
-
plugins: [],
|
|
17972
|
-
};
|
|
17973
|
-
|
|
17974
17596
|
const createStoreImpl = (createState) => {
|
|
17975
17597
|
let state;
|
|
17976
17598
|
const listeners = /* @__PURE__ */ new Set();
|
|
@@ -18543,8 +18165,8 @@ function BorderedContainer({ children, className, }) {
|
|
|
18543
18165
|
return (jsxRuntime.jsx("section", { className: cn('tw-border-t tw-border-t-material-light-thin', className), children: children }));
|
|
18544
18166
|
}
|
|
18545
18167
|
|
|
18546
|
-
function SquidLogo(
|
|
18547
|
-
return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width:
|
|
18168
|
+
function SquidLogo() {
|
|
18169
|
+
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", { clipPath: "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" }) }) })] }));
|
|
18548
18170
|
}
|
|
18549
18171
|
|
|
18550
18172
|
function ProfileHeaderBackground() {
|
|
@@ -18570,7 +18192,7 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
|
|
|
18570
18192
|
? walletButton === null || walletButton === void 0 ? void 0 : walletButton.address
|
|
18571
18193
|
: (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) !== null && _a !== void 0 ? _a : 'Connect wallet' }), jsxRuntime.jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
|
|
18572
18194
|
? 'tw-text-grey-600'
|
|
18573
|
-
: 'tw-text-royal-400' })] })] }))] }) })) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-2 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsxRuntime.jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsxRuntime.jsx(NumericInput, { token: {
|
|
18195
|
+
: 'tw-text-royal-400' })] })] }))] }) })) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-2 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsxRuntime.jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsxRuntime.jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
|
|
18574
18196
|
decimals: (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18,
|
|
18575
18197
|
symbol: (_c = token === null || token === void 0 ? void 0 : token.symbol) !== null && _c !== void 0 ? _c : '',
|
|
18576
18198
|
price: tokenPrice,
|
|
@@ -18673,26 +18295,26 @@ const SwapStepsCollapsed = React$1.forwardRef((props, ref) => {
|
|
|
18673
18295
|
});
|
|
18674
18296
|
|
|
18675
18297
|
const WIDTH_SM = '69';
|
|
18676
|
-
const HEIGHT_SM = '
|
|
18298
|
+
const HEIGHT_SM = '30';
|
|
18677
18299
|
const WIDTH_MD = '94';
|
|
18678
18300
|
const HEIGHT_MD = '42';
|
|
18679
18301
|
const SCALE = Number(WIDTH_SM) / Number(WIDTH_MD);
|
|
18680
|
-
const
|
|
18302
|
+
const widthMap = {
|
|
18681
18303
|
horizontal: { small: WIDTH_SM, medium: WIDTH_MD },
|
|
18682
18304
|
vertical: { small: HEIGHT_SM, medium: HEIGHT_MD },
|
|
18683
18305
|
};
|
|
18684
|
-
const
|
|
18306
|
+
const heightMap = {
|
|
18685
18307
|
horizontal: { small: HEIGHT_SM, medium: HEIGHT_MD },
|
|
18686
18308
|
vertical: { small: WIDTH_SM, medium: WIDTH_MD },
|
|
18687
18309
|
};
|
|
18688
18310
|
const SHAPE_PATH = 'M58.5042 35.4956L58.5043 35.4957C62.5071 39.4985 67.7544 41.5 73.0001 41.5C84.3219 41.5 93.5 32.3218 93.5 21C93.5 9.67822 84.3219 0.5 73.0001 0.5C67.7544 0.499977 62.5071 2.50151 58.5043 6.50431C57.9743 7.03437 57.4538 7.57007 56.9412 8.09756L56.9403 8.09852C55.2889 9.79812 53.7279 11.4027 52.097 12.5879C50.4734 13.7678 48.8225 14.5 47 14.5C45.1775 14.5 43.5266 13.7678 41.903 12.5879C40.2721 11.4027 38.7111 9.79812 37.0597 8.09852L37.0589 8.09766C36.5463 7.57013 36.0258 7.03441 35.4957 6.50431C31.4929 2.50151 26.2456 0.499977 20.9999 0.5C15.7543 0.500023 10.5071 2.50156 6.50431 6.50431C2.50153 10.5071 0.5 15.7544 0.5 21C0.5 26.2456 2.50153 31.4929 6.50431 35.4957C10.5071 39.4984 15.7543 41.5 20.9999 41.5C26.2456 41.5 31.4929 39.4985 35.4957 35.4957L35.4958 35.4956C36.023 34.968 36.5408 34.4349 37.0508 33.9099L37.0521 33.9086C38.7042 32.2077 40.2665 30.6013 41.8988 29.4147C43.5238 28.2333 45.1763 27.5 47 27.5C48.8237 27.5 50.4762 28.2333 52.1012 29.4147C53.7335 30.6013 55.2958 32.2077 56.9479 33.9086L56.9492 33.9099C57.4592 34.4349 57.977 34.968 58.5042 35.4956Z';
|
|
18689
18311
|
const containerVariantClassMap = {
|
|
18690
18312
|
horizontal: {
|
|
18691
|
-
small: 'tw-h-[
|
|
18313
|
+
small: 'tw-h-[30px] tw-w-[69px]',
|
|
18692
18314
|
medium: 'tw-h-[42px] tw-w-[94px]',
|
|
18693
18315
|
},
|
|
18694
18316
|
vertical: {
|
|
18695
|
-
small: 'tw-h-[69px] tw-w-[
|
|
18317
|
+
small: 'tw-h-[69px] tw-w-[30px]',
|
|
18696
18318
|
medium: 'tw-h-[94px] tw-w-[42px]',
|
|
18697
18319
|
},
|
|
18698
18320
|
};
|
|
@@ -18708,12 +18330,12 @@ function TokenPair({ firstToken, secondToken, variant = 'horizontal', size = 'me
|
|
|
18708
18330
|
var _a, _b;
|
|
18709
18331
|
const id = React$1.useId();
|
|
18710
18332
|
const maskId = `token_pair_mask_${id}`;
|
|
18711
|
-
const width =
|
|
18712
|
-
const height =
|
|
18333
|
+
const width = widthMap[variant][size];
|
|
18334
|
+
const height = heightMap[variant][size];
|
|
18713
18335
|
const shapeTransform = [
|
|
18714
18336
|
size === 'small' ? `scale(${SCALE})` : undefined,
|
|
18715
18337
|
variant === 'vertical'
|
|
18716
|
-
? `rotate(90) translate(0 -${
|
|
18338
|
+
? `rotate(90) translate(0 -${heightMap.horizontal.medium})`
|
|
18717
18339
|
: undefined,
|
|
18718
18340
|
]
|
|
18719
18341
|
.filter(Boolean)
|
|
@@ -24621,9 +24243,6 @@ function BridgeProperties({ amount, token, fromChain, toChain, wallet, boosted,
|
|
|
24621
24243
|
function BagIcon() {
|
|
24622
24244
|
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", fill: "none", viewBox: "0 0 18 18", children: jsxRuntime.jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeWidth: "2", d: "M12 5a3 3 0 01-6 0M1.883 2.875l-.75 12A2 2 0 003.129 17h11.742a2 2 0 001.996-2.125l-.75-12A2 2 0 0014.121 1H3.88a2 2 0 00-1.996 1.875z" }) }));
|
|
24623
24245
|
}
|
|
24624
|
-
function BackpackIcon({ size = '24', className, }) {
|
|
24625
|
-
return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M15 11H17C18.6569 11 20 9.65685 20 8V7C20 5.89543 19.1046 5 18 5H15M15 11H9M15 11V13M9 11H7C5.34315 11 4 9.65685 4 8V7C4 5.89543 4.89543 5 6 5H9M9 11V13M5 11V18C5 19.6569 6.34315 21 8 21H16C17.6569 21 19 19.6569 19 18V11M9 5H15M9 5C9 3.34315 10.3431 2 12 2C13.6569 2 15 3.34315 15 5M10 17H14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
24626
|
-
}
|
|
24627
24246
|
|
|
24628
24247
|
function CollectionIcon() {
|
|
24629
24248
|
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { stroke: "currentColor", strokeLinecap: "square", strokeLinejoin: "round", strokeWidth: "2", d: "M7.9 12l-4.307 2.101a1 1 0 000 1.798l7.969 3.887a1 1 0 00.877 0l7.969-3.887a1 1 0 000-1.798L16.1 12m-8.2 0L3.593 9.899a1 1 0 010-1.798l7.969-3.887a1 1 0 01.877 0L20.408 8.1a1 1 0 010 1.798L16.1 12m-8.2 0l3.662 1.786a1 1 0 00.877 0L16.1 12" }) }));
|
|
@@ -25957,18 +25576,19 @@ const RegExpNonZeroValue = /[^0.]/;
|
|
|
25957
25576
|
const interactiveChipClassName = 'hover:tw-bg-material-light-thin';
|
|
25958
25577
|
const notInteractiveChipClassName = 'tw-cursor-not-allowed';
|
|
25959
25578
|
const loadingClassName = 'tw-opacity-50';
|
|
25960
|
-
var
|
|
25961
|
-
(function (
|
|
25962
|
-
|
|
25963
|
-
|
|
25964
|
-
})(
|
|
25965
|
-
function NumericInput(
|
|
25966
|
-
|
|
25967
|
-
|
|
25968
|
-
|
|
25969
|
-
|
|
25579
|
+
var UserInputType;
|
|
25580
|
+
(function (UserInputType) {
|
|
25581
|
+
UserInputType[UserInputType["TOKEN"] = 0] = "TOKEN";
|
|
25582
|
+
UserInputType[UserInputType["USD"] = 1] = "USD";
|
|
25583
|
+
})(UserInputType || (UserInputType = {}));
|
|
25584
|
+
function NumericInput(_a) {
|
|
25585
|
+
var _b;
|
|
25586
|
+
var { priceImpactPercentage, balance = '0', error, criticalPriceImpactPercentage = 5, token, onAmountChange, forcedAmount, maxUsdDecimals = 4, formatIfVerySmall = {
|
|
25587
|
+
token: '0.001',
|
|
25588
|
+
usd: '0.01',
|
|
25589
|
+
}, showDetails = true, isLoading = false, direction, inputModeButton, isInteractive = false, balanceButton } = _a, props = __rest$1(_a, ["priceImpactPercentage", "balance", "error", "criticalPriceImpactPercentage", "token", "onAmountChange", "forcedAmount", "maxUsdDecimals", "formatIfVerySmall", "showDetails", "isLoading", "direction", "inputModeButton", "isInteractive", "balanceButton"]);
|
|
25970
25590
|
const [inputValue, setInputValue] = React$1.useState('');
|
|
25971
|
-
const [
|
|
25591
|
+
const [userInputType, setUserInputType] = React$1.useState(UserInputType.TOKEN);
|
|
25972
25592
|
const balanceChipClickable = isInteractive && parseFloat(balance) > 0;
|
|
25973
25593
|
React$1.useEffect(() => {
|
|
25974
25594
|
if (forcedAmount !== undefined) {
|
|
@@ -25977,11 +25597,11 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
|
|
|
25977
25597
|
}, [forcedAmount]);
|
|
25978
25598
|
const updateInputValue = React$1.useCallback((newValue) => {
|
|
25979
25599
|
const safeNewValue = trimExtraDecimals(newValue, token.decimals);
|
|
25980
|
-
const formattedAmount =
|
|
25600
|
+
const formattedAmount = userInputType === UserInputType.TOKEN
|
|
25981
25601
|
? safeNewValue
|
|
25982
25602
|
: convertTokenAmountToUSD(safeNewValue, token.price, maxUsdDecimals);
|
|
25983
25603
|
setInputValue(formattedAmount);
|
|
25984
|
-
}, [
|
|
25604
|
+
}, [userInputType, token.price, direction, token.decimals]);
|
|
25985
25605
|
const onBalanceButtonClick = React$1.useCallback(() => {
|
|
25986
25606
|
if (balanceChipClickable) {
|
|
25987
25607
|
updateInputValue(balance);
|
|
@@ -25993,7 +25613,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
|
|
|
25993
25613
|
]);
|
|
25994
25614
|
const handleInputChange = (e) => {
|
|
25995
25615
|
let value = e.target.value.replace(/,/g, '.'); // Replace commas with dots
|
|
25996
|
-
const maxDecimalsForInputType =
|
|
25616
|
+
const maxDecimalsForInputType = userInputType === UserInputType.TOKEN ? token.decimals : maxUsdDecimals;
|
|
25997
25617
|
const isValidAmount = new RegExp(`^\\d*\\.?\\d{0,${maxDecimalsForInputType}}$`).test(value);
|
|
25998
25618
|
if (isValidAmount) {
|
|
25999
25619
|
setInputValue(value);
|
|
@@ -26012,12 +25632,14 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
|
|
|
26012
25632
|
const handleSwitchInputMode = () => {
|
|
26013
25633
|
var _a;
|
|
26014
25634
|
if (inputValue !== '') {
|
|
26015
|
-
const convertedAmount =
|
|
25635
|
+
const convertedAmount = userInputType === UserInputType.TOKEN
|
|
26016
25636
|
? convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals)
|
|
26017
25637
|
: convertUSDToTokenAmount(inputValue, token.price, token.decimals);
|
|
26018
25638
|
setInputValue(convertedAmount);
|
|
26019
25639
|
}
|
|
26020
|
-
|
|
25640
|
+
setUserInputType((prevMode) => prevMode === UserInputType.TOKEN
|
|
25641
|
+
? UserInputType.USD
|
|
25642
|
+
: UserInputType.TOKEN);
|
|
26021
25643
|
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
26022
25644
|
};
|
|
26023
25645
|
const getRawAmounts = (amount) => {
|
|
@@ -26028,7 +25650,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
|
|
|
26028
25650
|
isTokenAmountVerySmall: false,
|
|
26029
25651
|
isUsdAmountVerySmall: false,
|
|
26030
25652
|
};
|
|
26031
|
-
if (
|
|
25653
|
+
if (userInputType === UserInputType.TOKEN) {
|
|
26032
25654
|
const usdRawAmount = convertTokenAmountToUSD(amount, token.price, maxUsdDecimals);
|
|
26033
25655
|
const tokenRawAmount = amount;
|
|
26034
25656
|
const isTokenAmountVerySmall = !!tokenRawAmount &&
|
|
@@ -26068,7 +25690,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
|
|
|
26068
25690
|
var _a;
|
|
26069
25691
|
if (isNaN(Number(inputValue)) || inputValue === '')
|
|
26070
25692
|
return '0';
|
|
26071
|
-
if (
|
|
25693
|
+
if (userInputType === UserInputType.TOKEN) {
|
|
26072
25694
|
if (direction === 'from') {
|
|
26073
25695
|
return formatAmount(convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals));
|
|
26074
25696
|
}
|
|
@@ -26081,13 +25703,13 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
|
|
|
26081
25703
|
}
|
|
26082
25704
|
}, [
|
|
26083
25705
|
inputValue,
|
|
26084
|
-
|
|
25706
|
+
userInputType,
|
|
26085
25707
|
token.price,
|
|
26086
25708
|
direction,
|
|
26087
25709
|
inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd,
|
|
26088
25710
|
]);
|
|
26089
25711
|
const AmountChip = isInteractive ? 'button' : 'div';
|
|
26090
|
-
const priceImpactClass = ((
|
|
25712
|
+
const priceImpactClass = ((_b = Number(priceImpactPercentage)) !== null && _b !== void 0 ? _b : 0) > Number(criticalPriceImpactPercentage)
|
|
26091
25713
|
? 'tw-text-status-negative'
|
|
26092
25714
|
: 'tw-text-grey-300';
|
|
26093
25715
|
const BalanceChipTag = balanceChipClickable ? 'button' : 'div';
|
|
@@ -26098,13 +25720,13 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
|
|
|
26098
25720
|
const inputRef = React$1.useRef(null);
|
|
26099
25721
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isInteractive && !isLoading ? (jsxRuntime.jsxs("form", { className: containerClassname, onSubmit: (e) => {
|
|
26100
25722
|
e.preventDefault();
|
|
26101
|
-
}, children: [
|
|
25723
|
+
}, children: [userInputType === UserInputType.USD && (jsxRuntime.jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsxRuntime.jsx("input", Object.assign({ ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s 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', userInputType === UserInputType.USD && 'tw-pl-[33px]') }, props))] })) : (jsxRuntime.jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), 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 mobile-sm-height:tw-h-[65px]", children: jsxRuntime.jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxRuntime.jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsx(Tooltip, Object.assign({}, (isLoading
|
|
26102
25724
|
? undefined
|
|
26103
|
-
:
|
|
25725
|
+
: userInputType === UserInputType.TOKEN
|
|
26104
25726
|
? inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.tokenModeTooltip
|
|
26105
25727
|
: inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.usdModeTooltip), { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxRuntime.jsxs(AmountChip, { onClick: isInteractive ? handleSwitchInputMode : undefined, className: cn(buttonClassName, isInteractive
|
|
26106
25728
|
? interactiveChipClassName
|
|
26107
|
-
: notInteractiveChipClassName), children: [jsxRuntime.jsx(SwapInputsIcon, {}),
|
|
25729
|
+
: notInteractiveChipClassName), children: [jsxRuntime.jsx(SwapInputsIcon, {}), userInputType === UserInputType.TOKEN ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxRuntime.jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsxRuntime.jsx(CaptionText, { children: isUsdAmountVerySmall
|
|
26108
25730
|
? formatIfVerySmall.token
|
|
26109
25731
|
: amountFormatted })] }) })) : (jsxRuntime.jsxs("span", { className: "tw-text-grey-500", children: [isTokenAmountVerySmall ? '<' : '', jsxRuntime.jsx(CaptionText, { children: isTokenAmountVerySmall
|
|
26110
25732
|
? formatIfVerySmall.token
|
|
@@ -26221,10 +25843,10 @@ function CircleX({ size = '20', className, }) {
|
|
|
26221
25843
|
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", strokeWidth: "1.5", strokeLinecap: "round" }) }));
|
|
26222
25844
|
}
|
|
26223
25845
|
function CircleMinusIcon({ size = '24', className, }) {
|
|
26224
|
-
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", {
|
|
25846
|
+
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM16 12.9999C16.5523 12.9999 17 12.5522 17 11.9999C17 11.4476 16.5523 10.9999 16 10.9999L7.99997 11.0001C7.44769 11.0001 6.99998 11.4479 7 12.0001C7.00002 12.5524 7.44774 13.0001 8.00003 13.0001L16 12.9999Z", fill: "currentColor" }) }));
|
|
26225
25847
|
}
|
|
26226
25848
|
function CirclePlusIcon({ size = '24', className, }) {
|
|
26227
|
-
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", {
|
|
25849
|
+
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM16 12.9999C16.5523 12.9999 17 12.5522 17 11.9999C17 11.4476 16.5523 10.9999 16 10.9999L13 11V8.00012C13 7.44784 12.5523 7.00012 12 7.00012C11.4477 7.00012 11 7.44784 11 8.00012V11L7.99997 11.0001C7.44769 11.0001 6.99998 11.4479 7 12.0001C7.00002 12.5524 7.44774 13.0001 8.00003 13.0001L11 13V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V13L16 12.9999Z", fill: "currentColor" }) }));
|
|
26228
25850
|
}
|
|
26229
25851
|
|
|
26230
25852
|
function RangeInput({ label, initialValue, onChange, min = 0, max = 99, isWarning = false, }) {
|
|
@@ -26430,18 +26052,6 @@ function HeartSmallIcon() {
|
|
|
26430
26052
|
function HomeIcon({ className }) {
|
|
26431
26053
|
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "19", fill: "none", viewBox: "0 0 18 19", className: className, children: jsxRuntime.jsx("path", { fill: "currentColor", fillOpacity: "0.66", d: "M11.335 1.697a4 4 0 00-4.67 0l-5 3.593A4 4 0 000 8.538V15a4 4 0 004 4h1.5a1 1 0 001-1v-3.5a2.5 2.5 0 015 0V18a1 1 0 001 1H14a4 4 0 004-4V8.538a4 4 0 00-1.666-3.248l-5-3.593z" }) }));
|
|
26432
26054
|
}
|
|
26433
|
-
function MenuSwapIcon({ size = '24', className, }) {
|
|
26434
|
-
return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: [jsxRuntime.jsxs("g", { clipPath: "url(#clip0_2573_73593)", children: [jsxRuntime.jsx("path", { d: "M16 9H20C21.6569 9 23 10.3431 23 12V20C23 21.6569 21.6569 23 20 23H12C10.3431 23 9 21.6569 9 20V16", stroke: "currentColor", strokeWidth: "2" }), jsxRuntime.jsx("circle", { cx: "8.5", cy: "8.5", r: "7.5", stroke: "currentColor", strokeWidth: "2" }), jsxRuntime.jsx("path", { d: "M6 11V6H11", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M19 14L19 19L14 19", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("line", { x1: "6.70711", y1: "6.29289", x2: "18.7071", y2: "18.2929", stroke: "currentColor", strokeWidth: "2" })] }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_2573_73593", children: jsxRuntime.jsx("rect", { width: "24", height: "24", fill: "white" }) }) })] }));
|
|
26435
|
-
}
|
|
26436
|
-
function ColorPaletteIcon({ size = '24', className, }) {
|
|
26437
|
-
return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M7.4 11.25H6.4V13.25H7.4V11.25ZM7.6 13.25H8.6V11.25H7.6V13.25ZM15.4 8.5H14.4V10.5H15.4V8.5ZM15.6 10.5H16.6V8.5H15.6V10.5ZM10.4 7H9.4V9H10.4V7ZM10.6 9H11.6V7H10.6V9ZM7 12.25C7 11.9739 7.22386 11.75 7.5 11.75V13.75C8.32843 13.75 9 13.0784 9 12.25H7ZM7.5 11.75C7.77614 11.75 8 11.9739 8 12.25H6C6 13.0784 6.67157 13.75 7.5 13.75V11.75ZM8 12.25C8 12.5261 7.77614 12.75 7.5 12.75V10.75C6.67157 10.75 6 11.4216 6 12.25H8ZM7.5 12.75C7.22386 12.75 7 12.5261 7 12.25H9C9 11.4216 8.32843 10.75 7.5 10.75V12.75ZM15 9.5C15 9.22386 15.2239 9 15.5 9V11C16.3284 11 17 10.3284 17 9.5H15ZM15.5 9C15.7761 9 16 9.22386 16 9.5H14C14 10.3284 14.6716 11 15.5 11V9ZM16 9.5C16 9.77614 15.7761 10 15.5 10V8C14.6716 8 14 8.67157 14 9.5H16ZM15.5 10C15.2239 10 15 9.77614 15 9.5H17C17 8.67157 16.3284 8 15.5 8V10ZM12 19.5C7.5271 19.5 4 16.0891 4 12H2C2 17.2998 6.53177 21.5 12 21.5V19.5ZM4 12C4 7.91095 7.5271 4.5 12 4.5V2.5C6.53177 2.5 2 6.70021 2 12H4ZM12 4.5C16.4729 4.5 20 7.91095 20 12H22C22 6.70021 17.4682 2.5 12 2.5V4.5ZM20 12C20 13.5786 19.581 14.0563 19.2921 14.2361C18.9042 14.4775 18.2607 14.5224 17.2336 14.3889C16.7375 14.3243 16.2569 14.236 15.7115 14.1503C15.1923 14.0687 14.6354 13.9936 14.1011 13.9858C13.0367 13.9703 11.7662 14.2315 11.1056 15.5528L12.8944 16.4472C13.04 16.156 13.2977 15.9743 14.0719 15.9856C14.457 15.9912 14.8971 16.0469 15.401 16.126C15.8788 16.2011 16.4476 16.3035 16.9757 16.3722C17.9971 16.505 19.3012 16.5862 20.3489 15.934C21.4956 15.2203 22 13.8745 22 12H20ZM11.1056 15.5528C10.6885 16.3868 10.8107 17.2221 11.0282 17.8666C11.2381 18.4885 11.5952 19.0909 11.8078 19.4797C11.9271 19.6979 12.0018 19.847 12.0433 19.9569C12.0928 20.0878 12.0416 20.0281 12.0725 19.8775C12.1227 19.6322 12.3012 19.5021 12.3753 19.4702C12.3936 19.4623 12.3055 19.5 12 19.5V21.5C12.4013 21.5 12.8121 21.4596 13.1661 21.3072C13.576 21.1307 13.9272 20.7897 14.0318 20.2788C14.117 19.8626 14.0021 19.4825 13.9142 19.2501C13.8185 18.9968 13.6825 18.7396 13.5626 18.5203C13.2968 18.0341 13.0613 17.6365 12.9232 17.2271C12.7927 16.8404 12.8115 16.6132 12.8944 16.4472L11.1056 15.5528ZM7.4 13.25H7.6V11.25H7.4V13.25ZM15.4 10.5H15.6V8.5H15.4V10.5ZM10 8C10 7.72386 10.2239 7.5 10.5 7.5V9.5C11.3284 9.5 12 8.82843 12 8H10ZM10.5 7.5C10.7761 7.5 11 7.72386 11 8H9C9 8.82843 9.67157 9.5 10.5 9.5V7.5ZM11 8C11 8.27614 10.7761 8.5 10.5 8.5V6.5C9.67157 6.5 9 7.17157 9 8H11ZM10.5 8.5C10.2239 8.5 10 8.27614 10 8H12C12 7.17157 11.3284 6.5 10.5 6.5V8.5ZM10.4 9H10.6V7H10.4V9Z", fill: "currentColor" }) }));
|
|
26438
|
-
}
|
|
26439
|
-
function ConsoleIcon({ size = '24', className, }) {
|
|
26440
|
-
return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M7.5 8L9.25 9.75L7.5 11.5M12 11.5H14M7 20H17C18.6569 20 20 18.6569 20 17V7C20 5.34315 18.6569 4 17 4H7C5.34315 4 4 5.34315 4 7V17C4 18.6569 5.34315 20 7 20Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
26441
|
-
}
|
|
26442
|
-
function BubblesIcon({ size = '30', className, }) {
|
|
26443
|
-
return (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: [jsxRuntime.jsx("path", { d: "M16 11C16 13.7614 13.7614 16 11 16C8.23858 16 6 13.7614 6 11C6 8.23858 8.23858 6 11 6C13.7614 6 16 8.23858 16 11Z", stroke: "currentColor", strokeWidth: "2" }), jsxRuntime.jsx("path", { d: "M21 20.5C21 22.433 19.433 24 17.5 24C15.567 24 14 22.433 14 20.5C14 18.567 15.567 17 17.5 17C19.433 17 21 18.567 21 20.5Z", stroke: "currentColor", strokeWidth: "2" }), jsxRuntime.jsx("path", { d: "M24 12.5C24 13.8807 22.8807 15 21.5 15C20.1193 15 19 13.8807 19 12.5C19 11.1193 20.1193 10 21.5 10C22.8807 10 24 11.1193 24 12.5Z", stroke: "currentColor", strokeWidth: "2" })] }));
|
|
26444
|
-
}
|
|
26445
26055
|
|
|
26446
26056
|
function ImageSparkle() {
|
|
26447
26057
|
return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", viewBox: "0 0 16 16", children: [jsxRuntime.jsxs("mask", { id: "path-1-inside-1_1967_138", fill: "#fff", children: [jsxRuntime.jsx("path", { d: "M9.05 5.567l.319-.637a.333.333 0 01.596 0l.319.637a.334.334 0 00.149.15l.637.318a.333.333 0 010 .596l-.637.32a.334.334 0 00-.15.148l-.318.638a.333.333 0 01-.596 0l-.32-.638a.333.333 0 00-.148-.149l-.638-.319a.333.333 0 010-.596l.638-.319a.333.333 0 00.149-.149z" }), jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M2 4.667A2.667 2.667 0 014.667 2h6.666A2.667 2.667 0 0114 4.667v6.666A2.667 2.667 0 0111.333 14H4.667A2.667 2.667 0 012 11.333V4.667zm2.667-1.334c-.737 0-1.334.597-1.334 1.334v4.39l.115-.114a2.667 2.667 0 013.771 0l3.724 3.724h.39c.737 0 1.334-.597 1.334-1.334V4.667c0-.737-.597-1.334-1.334-1.334H4.667zm4.39 9.334l-2.78-2.781a1.333 1.333 0 00-1.886 0l-1.058 1.057v.39c0 .737.597 1.334 1.334 1.334h4.39z", clipRule: "evenodd" })] }), jsxRuntime.jsx("path", { fill: "currentColor", d: "M9.369 4.93l-1.342-.671 1.342.67zm-.32.637l-1.34-.67 1.34.67zm-.148.15L8.23 4.374l.67 1.341zm-.638.318l.67 1.342-.67-1.342zm0 .596l-.67 1.342.67-1.342zm.638.32L8.23 8.291 8.9 6.95zm.149.148l-1.342.671L9.05 7.1zm.319.638l1.341-.67-1.341.67zm.596 0l1.341.67-1.341-.67zm.319-.638l-1.342-.67 1.342.67zm0-1.532l1.341-.67-1.341.67zm-.32-.637l-1.34.67 1.34-.67zm-6.63 4.127h-1.5a1.5 1.5 0 002.56 1.06l-1.06-1.06zm.114-.114l1.06 1.06-1.06-1.06zm7.495 3.724l-1.06 1.06a1.5 1.5 0 001.06.44v-1.5zM6.276 9.886l1.06-1.061-1.06 1.06zm2.781 2.78v1.5a1.5 1.5 0 001.06-2.56l-1.06 1.06zm-4.666-2.78L3.33 8.825l1.06 1.06zm-1.058 1.057l-1.06-1.06a1.5 1.5 0 00-.44 1.06h1.5zm4.694-6.684l-.319.637 2.683 1.342.32-.638L8.026 4.26zm.203.116l-.638.319 1.342 2.683.637-.319L8.23 4.375zm-.638 3.598l.638.319L9.57 5.609l-.637-.32-1.342 2.684zm.116-.203l.319.638 2.683-1.342-.319-.637L7.708 7.77zm3.598.638l.32-.638L8.941 6.43l-.319.637 2.684 1.342zm-.202-.116l.637-.319L10.4 5.29l-.638.319 1.341 2.683zm.637-3.598l-.637-.32-1.342 2.684.638.319 1.341-2.683zm-.116.202l-.319-.637L8.623 5.6l.319.638 2.683-1.342zm-.521-.521c.225.113.408.296.521.521L8.942 6.238c.177.355.465.643.82.82l1.341-2.683zm.637 3.598c1.351-.676 1.351-2.604 0-3.28L10.4 7.378a1.167 1.167 0 010-2.087l1.341 2.683zm-.116-.203a1.167 1.167 0 01-.521.522L9.761 5.609a1.833 1.833 0 00-.82.82l2.683 1.341zm-3.598.638c.676 1.351 2.604 1.351 3.28 0L8.622 7.066c.43-.86 1.657-.86 2.087 0L8.027 8.408zm.203-.116a1.167 1.167 0 01-.522-.522l2.683-1.341a1.833 1.833 0 00-.82-.82L8.23 8.292zm-.638-3.598c-1.351.675-1.351 2.603 0 3.28L8.934 5.29c.86.43.86 1.657 0 2.087L7.592 4.694zm.116.202c.113-.225.296-.408.522-.521L9.57 7.058c.355-.177.643-.465.82-.82L7.708 4.896zm3.002.704c-.43.86-1.657.86-2.087 0l2.683-1.341c-.675-1.351-2.603-1.351-3.28 0L10.71 5.6zM4.667.5A4.167 4.167 0 00.5 4.667h3c0-.645.522-1.167 1.167-1.167v-3zm6.666 0H4.667v3h6.666v-3zM15.5 4.667A4.167 4.167 0 0011.333.5v3c.645 0 1.167.522 1.167 1.167h3zm0 6.666V4.667h-3v6.666h3zM11.333 15.5a4.167 4.167 0 004.167-4.167h-3c0 .645-.522 1.167-1.167 1.167v3zm-6.666 0h6.666v-3H4.667v3zM.5 11.333A4.167 4.167 0 004.667 15.5v-3A1.167 1.167 0 013.5 11.333h-3zm0-6.666v6.666h3V4.667h-3zm4.333 0a.167.167 0 01-.166.166v-3a2.833 2.833 0 00-2.834 2.834h3zm0 4.39v-4.39h-3v4.39h3zM2.387 7.882l-.114.115 2.121 2.12.114-.114-2.12-2.12zm5.893 0a4.167 4.167 0 00-5.893 0l2.121 2.122a1.167 1.167 0 011.65 0L8.28 7.882zm3.724 3.724L8.28 7.882l-2.122 2.122 3.724 3.723 2.122-2.121zm-.67-.44h-.391v3h.39v-3zm-.167.167c0-.092.074-.166.166-.166v3a2.833 2.833 0 002.834-2.834h-3zm0-6.666v6.666h3V4.667h-3zm.166.166a.167.167 0 01-.166-.166h3a2.833 2.833 0 00-2.834-2.834v3zm-6.666 0h6.666v-3H4.667v3zm.548 6.113l2.782 2.781 2.12-2.121-2.78-2.781-2.122 2.121zm.236 0a.167.167 0 01-.236 0l2.122-2.121a2.833 2.833 0 00-4.007 0l2.121 2.121zm-1.057 1.058l1.057-1.058L3.33 8.825 2.273 9.882l2.121 2.122zm.44-.67v-.391h-3v.39h3zm-.167-.167c.092 0 .166.074.166.166h-3a2.833 2.833 0 002.834 2.834v-3zm4.39 0h-4.39v3h4.39v-3z", mask: "url(#path-1-inside-1_1967_138)" })] }));
|
|
@@ -26473,15 +26083,6 @@ function PathSquareIcon({ size = '24', className, }) {
|
|
|
26473
26083
|
function XSocial({ className, size = '24', }) {
|
|
26474
26084
|
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M17.4033 3.5H20.2852L13.989 10.701L21.396 20.5H15.5964L11.054 14.557L5.85637 20.5H2.97269L9.70709 12.7977L2.60156 3.5H8.54839L12.6544 8.93215L17.4033 3.5ZM16.3918 18.7738H17.9887L7.68067 5.13549H5.96702L16.3918 18.7738Z", fill: "currentColor" }) }));
|
|
26475
26085
|
}
|
|
26476
|
-
function GithubIcon({ size = '24', className, }) {
|
|
26477
|
-
return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M12 1.95068C17.525 1.95068 22 6.42568 22 11.9507C21.9995 14.0459 21.3419 16.0883 20.1198 17.7902C18.8977 19.4922 17.1727 20.768 15.1875 21.4382C14.6875 21.5382 14.5 21.2257 14.5 20.9632C14.5 20.6257 14.5125 19.5507 14.5125 18.2132C14.5125 17.2757 14.2 16.6757 13.8375 16.3632C16.0625 16.1132 18.4 15.2632 18.4 11.4257C18.4 10.3257 18.0125 9.43818 17.375 8.73818C17.475 8.48818 17.825 7.46318 17.275 6.08818C17.275 6.08818 16.4375 5.81318 14.525 7.11318C13.725 6.88818 12.875 6.77568 12.025 6.77568C11.175 6.77568 10.325 6.88818 9.525 7.11318C7.6125 5.82568 6.775 6.08818 6.775 6.08818C6.225 7.46318 6.575 8.48818 6.675 8.73818C6.0375 9.43818 5.65 10.3382 5.65 11.4257C5.65 15.2507 7.975 16.1132 10.2 16.3632C9.9125 16.6132 9.65 17.0507 9.5625 17.7007C8.9875 17.9632 7.55 18.3882 6.65 16.8757C6.4625 16.5757 5.9 15.8382 5.1125 15.8507C4.275 15.8632 4.775 16.3257 5.125 16.5132C5.55 16.7507 6.0375 17.6382 6.15 17.9257C6.35 18.4882 7 19.5632 9.5125 19.1007C9.5125 19.9382 9.525 20.7257 9.525 20.9632C9.525 21.2257 9.3375 21.5257 8.8375 21.4382C6.8458 20.7752 5.11342 19.502 3.88611 17.799C2.65881 16.096 1.9989 14.0498 2 11.9507C2 6.42568 6.475 1.95068 12 1.95068Z", fill: "currentColor" }) }));
|
|
26478
|
-
}
|
|
26479
|
-
function DiscordIcon({ size = '24', className, }) {
|
|
26480
|
-
return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M19.6361 5.0228C18.1907 4.35756 16.6648 3.88561 15.0973 3.61902C14.8828 4.00447 14.6888 4.40105 14.5159 4.8071C12.8463 4.55418 11.1484 4.55418 9.47881 4.8071C9.30587 4.4011 9.1118 4.00452 8.8974 3.61902C7.32897 3.88786 5.80205 4.36093 4.35518 5.02628C1.48276 9.29851 0.70409 13.4646 1.09342 17.5716C2.77558 18.821 4.6584 19.7712 6.66003 20.3809C7.11074 19.7715 7.50956 19.1251 7.85226 18.4483C7.20135 18.2039 6.57311 17.9024 5.9748 17.5473C6.13227 17.4325 6.28627 17.3142 6.43508 17.1994C8.17601 18.0224 10.0761 18.4491 12 18.4491C13.9238 18.4491 15.8239 18.0224 17.5648 17.1994C17.7154 17.3229 17.8694 17.4412 18.0251 17.5473C17.4257 17.903 16.7963 18.2051 16.1442 18.4501C16.4865 19.1265 16.8853 19.7724 17.3364 20.3809C19.3398 19.7737 21.224 18.8239 22.9065 17.5734C23.3633 12.8106 22.1261 8.68273 19.6361 5.0228ZM8.34541 15.0459C7.26047 15.0459 6.36414 14.0561 6.36414 12.8384C6.36414 11.6208 7.22932 10.6223 8.34195 10.6223C9.45458 10.6223 10.344 11.6208 10.325 12.8384C10.3059 14.0561 9.45112 15.0459 8.34541 15.0459ZM15.6545 15.0459C14.5678 15.0459 13.675 14.0561 13.675 12.8384C13.675 11.6208 14.5401 10.6223 15.6545 10.6223C16.7689 10.6223 17.6514 11.6208 17.6323 12.8384C17.6133 14.0561 16.7602 15.0459 15.6545 15.0459Z", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }) }));
|
|
26481
|
-
}
|
|
26482
|
-
function MirrorIcon({ size = '24', className, }) {
|
|
26483
|
-
return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M6 9C6 5.68629 8.68629 3 12 3C15.3137 3 18 5.68629 18 9V20C18 20.5523 17.5523 21 17 21H7C6.44771 21 6 20.5523 6 20V9Z", stroke: "currentColor", strokeWidth: "2" }) }));
|
|
26484
|
-
}
|
|
26485
26086
|
|
|
26486
26087
|
function SortIcon() {
|
|
26487
26088
|
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M3 5H21M9 19H15M6 12H18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
|
|
@@ -26509,7 +26110,7 @@ function SwapErrorIcon() {
|
|
|
26509
26110
|
return (jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", className: "tw-text-grey-900", fill: "currentColor" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM31.0683 28.9289C27.163 25.0237 20.8314 25.0237 16.9261 28.9289C16.1451 29.71 16.1451 30.9763 16.9261 31.7574C17.7072 32.5384 18.9735 32.5384 19.7545 31.7574C22.0977 29.4142 25.8967 29.4142 28.2398 31.7574C29.0209 32.5384 30.2872 32.5384 31.0683 31.7574C31.8493 30.9763 31.8493 29.71 31.0683 28.9289ZM21 19C21 20.6569 19.8807 22 18.5 22C17.1193 22 16 20.6569 16 19C16 17.3431 17.1193 16 18.5 16C19.8807 16 21 17.3431 21 19ZM29.5 22C30.8807 22 32 20.6569 32 19C32 17.3431 30.8807 16 29.5 16C28.1193 16 27 17.3431 27 19C27 20.6569 28.1193 22 29.5 22Z", className: "tw-text-status-negative", fill: "currentColor" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_457_52502)", children: jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average", strokeOpacity: "0.33" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("filter", { id: "filter0_b_457_52502", x: "-17", y: "-17", width: "82", height: "82", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [jsxRuntime.jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), jsxRuntime.jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsxRuntime.jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_52502" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_52502", result: "shape" })] }) })] }));
|
|
26510
26111
|
}
|
|
26511
26112
|
function SwapWarningIcon() {
|
|
26512
|
-
return (jsxRuntime.jsxs("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_588_15630)", children: jsxRuntime.jsx("circle", { cx: "21", cy: "21", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsxRuntime.jsxs("g", {
|
|
26113
|
+
return (jsxRuntime.jsxs("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_588_15630)", children: jsxRuntime.jsx("circle", { cx: "21", cy: "21", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsxRuntime.jsxs("g", { "clip-path": "url(#clip0_588_15630)", children: [jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M41 21C41 32.0457 32.0457 41 21 41C9.9543 41 1 32.0457 1 21C1 9.9543 9.9543 1 21 1C32.0457 1 41 9.9543 41 21ZM15.5 19C16.8807 19 18 17.6569 18 16C18 14.3431 16.8807 13 15.5 13C14.1193 13 13 14.3431 13 16C13 17.6569 14.1193 19 15.5 19ZM29 16C29 17.6569 27.8807 19 26.5 19C25.1193 19 24 17.6569 24 16C24 14.3431 25.1193 13 26.5 13C27.8807 13 29 14.3431 29 16ZM15 27C13.8954 27 13 27.8954 13 29C13 30.1046 13.8954 31 15 31H27C28.1046 31 29 30.1046 29 29C29 27.8954 28.1046 27 27 27H15Z", fill: "currentColor", className: "tw-text-status-partial" })] }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("filter", { id: "filter0_b_588_15630", x: "-20", y: "-20", width: "82", height: "82", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [jsxRuntime.jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), jsxRuntime.jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsxRuntime.jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_588_15630" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_588_15630", result: "shape" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_588_15630", children: jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "white" }) })] })] }));
|
|
26513
26114
|
}
|
|
26514
26115
|
|
|
26515
26116
|
function TradingViewStepsIcon({ size = '24', className, }) {
|
|
@@ -26520,38 +26121,6 @@ function TriangleExclamation() {
|
|
|
26520
26121
|
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", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.27146 2.30512C7.04321 0.982115 8.95481 0.982112 9.72657 2.30512L14.4052 10.3256C15.183 11.6589 14.2212 13.3334 12.6776 13.3334H3.3204C1.77682 13.3334 0.81507 11.6589 1.59284 10.3256L6.27146 2.30512ZM7.99967 5.33337C8.36786 5.33337 8.66634 5.63185 8.66634 6.00004V8.00004C8.66634 8.36823 8.36786 8.66671 7.99967 8.66671C7.63148 8.66671 7.33301 8.36823 7.33301 8.00004V6.00004C7.33301 5.63185 7.63148 5.33337 7.99967 5.33337ZM7.16634 10C7.16634 9.5398 7.53944 9.16671 7.99967 9.16671C8.45991 9.16671 8.83301 9.5398 8.83301 10C8.83301 10.4603 8.45991 10.8334 7.99967 10.8334C7.53944 10.8334 7.16634 10.4603 7.16634 10Z", fill: "currentColor" }) }));
|
|
26521
26122
|
}
|
|
26522
26123
|
|
|
26523
|
-
function CrossAnimatedIcon({ size = 24, isOpen, transitionDuration, className, }) {
|
|
26524
|
-
const rotateDegrees = isOpen ? 45 : 0;
|
|
26525
|
-
return (jsxRuntime.jsxs("div", { style: {
|
|
26526
|
-
width: size,
|
|
26527
|
-
height: size * 0.585,
|
|
26528
|
-
}, className: cn('tw-relative tw-rotate-0 tw-transition-transform', className), children: [jsxRuntime.jsx("span", { style: {
|
|
26529
|
-
height: size * 0.1,
|
|
26530
|
-
top: isOpen ? size * -0.05 : 0,
|
|
26531
|
-
transformOrigin: 'left center',
|
|
26532
|
-
left: isOpen ? size * 0.13 : 0,
|
|
26533
|
-
transitionDuration,
|
|
26534
|
-
transform: isOpen ? `rotate(${rotateDegrees}deg)` : 'rotate(0)',
|
|
26535
|
-
}, className: "tw-absolute tw-block tw-w-full tw-rounded-sm tw-bg-current tw-opacity-100 tw-transition-transform" }), jsxRuntime.jsx("span", { style: {
|
|
26536
|
-
height: size * 0.1,
|
|
26537
|
-
top: isOpen ? size * 0.65 : size * 0.6,
|
|
26538
|
-
transformOrigin: 'left center',
|
|
26539
|
-
left: isOpen ? size * 0.13 : 0,
|
|
26540
|
-
transitionDuration,
|
|
26541
|
-
transform: isOpen ? `rotate(-${rotateDegrees}deg)` : 'rotate(0)',
|
|
26542
|
-
}, className: "tw-absolute tw-block tw-w-full tw-rounded-sm tw-bg-current tw-opacity-100 tw-transition-transform" })] }));
|
|
26543
|
-
}
|
|
26544
|
-
|
|
26545
|
-
function SunriseIcon({ size = '32', className, }) {
|
|
26546
|
-
return (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: [jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16 6C16.5523 6 17 6.44772 17 7V8C17 8.55228 16.5523 9 16 9C15.4477 9 15 8.55228 15 8V7C15 6.44772 15.4477 6 16 6ZM6 16C6 15.4477 6.44772 15 7 15H8C8.55228 15 9 15.4477 9 16C9 16.5523 8.55228 17 8 17H7C6.44772 17 6 16.5523 6 16ZM23 16C23 15.4477 23.4477 15 24 15H25C25.5523 15 26 15.4477 26 16C26 16.5523 25.5523 17 25 17H24C23.4477 17 23 16.5523 23 16Z", fill: "currentColor" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20.9491 11.0503C20.5586 10.6597 20.5586 10.0266 20.9491 9.63604L21.6562 8.92893C22.0468 8.53841 22.6799 8.53841 23.0705 8.92893C23.461 9.31946 23.461 9.95262 23.0705 10.3431L22.3634 11.0503C21.9728 11.4408 21.3397 11.4408 20.9491 11.0503Z", fill: "currentColor" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 20C6 19.4477 6.44772 19 7 19H25C25.5523 19 26 19.4477 26 20C26 20.5523 25.5523 21 25 21H7C6.44772 21 6 20.5523 6 20ZM10 24C10 23.4477 10.4477 23 11 23H21C21.5523 23 22 23.4477 22 24C22 24.5523 21.5523 25 21 25H11C10.4477 25 10 24.5523 10 24Z", fill: "currentColor" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.92961 8.92893C9.32014 8.53841 9.9533 8.53841 10.3438 8.92893L11.0509 9.63604C11.4415 10.0266 11.4415 10.6597 11.0509 11.0503C10.6604 11.4408 10.0272 11.4408 9.63672 11.0503L8.92961 10.3431C8.53909 9.95262 8.53909 9.31946 8.92961 8.92893Z", fill: "currentColor" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 17C11.4477 17 11 16.5523 11 16C11 13.2386 13.2386 11 16 11C18.7614 11 21 13.2386 21 16C21 16.5523 20.5523 17 20 17C18.3023 17 13.6977 17 12 17Z", fill: "currentColor" })] }));
|
|
26547
|
-
}
|
|
26548
|
-
function SunIcon({ size = '24', className, }) {
|
|
26549
|
-
return (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M10.8335 1.66671C10.8335 1.20647 10.4604 0.833374 10.0002 0.833374C9.53992 0.833374 9.16683 1.20647 9.16683 1.66671V2.50004C9.16683 2.96028 9.53992 3.33337 10.0002 3.33337C10.4604 3.33337 10.8335 2.96028 10.8335 2.50004V1.66671Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M10.8335 17.5001C10.8335 17.0398 10.4604 16.6667 10.0002 16.6667C9.53992 16.6667 9.16683 17.0398 9.16683 17.5001V18.3334C9.16683 18.7936 9.53992 19.1667 10.0002 19.1667C10.4604 19.1667 10.8335 18.7936 10.8335 18.3334V17.5001Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M16.481 3.51916C16.8064 3.8446 16.8064 4.37224 16.481 4.69767L15.8893 5.28934C15.5638 5.61478 15.0362 5.61478 14.7108 5.28934C14.3853 4.9639 14.3853 4.43627 14.7108 4.11083L15.3024 3.51916C15.6279 3.19373 16.1555 3.19373 16.481 3.51916Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M5.28955 15.8893C5.61499 15.5638 5.61499 15.0362 5.28955 14.7108C4.96411 14.3853 4.43647 14.3853 4.11104 14.7108L3.51937 15.3024C3.19393 15.6279 3.19393 16.1555 3.51937 16.4809C3.84481 16.8064 4.37244 16.8064 4.69788 16.4809L5.28955 15.8893Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M16.6668 10.0001C16.6668 9.53982 17.0399 9.16672 17.5002 9.16672H18.3335C18.7937 9.16672 19.1668 9.53982 19.1668 10.0001C19.1668 10.4603 18.7937 10.8334 18.3335 10.8334H17.5002C17.0399 10.8334 16.6668 10.4603 16.6668 10.0001Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M1.66683 9.16672C1.20659 9.16672 0.833496 9.53982 0.833496 10.0001C0.833496 10.4603 1.20659 10.8334 1.66683 10.8334H2.50016C2.9604 10.8334 3.3335 10.4603 3.3335 10.0001C3.3335 9.53982 2.9604 9.16672 2.50016 9.16672H1.66683Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M14.7108 14.7108C15.0362 14.3853 15.5638 14.3853 15.8893 14.7108L16.481 15.3024C16.8064 15.6279 16.8064 16.1555 16.481 16.4809C16.1555 16.8064 15.6279 16.8064 15.3024 16.4809L14.7108 15.8893C14.3853 15.5638 14.3853 15.0362 14.7108 14.7108Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M4.69788 3.51916C4.37244 3.19373 3.84481 3.19373 3.51937 3.51916C3.19393 3.8446 3.19393 4.37224 3.51937 4.69767L4.11104 5.28934C4.43647 5.61478 4.96411 5.61478 5.28955 5.28934C5.61499 4.9639 5.61499 4.43627 5.28955 4.11083L4.69788 3.51916Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M6.46463 6.46451C8.41725 4.51189 11.5831 4.51189 13.5357 6.46451C15.4883 8.41713 15.4883 11.583 13.5357 13.5356C11.5831 15.4882 8.41725 15.4882 6.46463 13.5356C4.51201 11.583 4.51201 8.41713 6.46463 6.46451Z", fill: "currentColor" })] }));
|
|
26550
|
-
}
|
|
26551
|
-
function MoonIcon({ size = '20', className, }) {
|
|
26552
|
-
return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M10.0463 2.99972C10.2292 2.73432 10.2427 2.38723 10.0809 2.10846C9.91903 1.8297 9.61096 1.66925 9.28979 1.69647C5.02109 2.05816 1.66992 5.63639 1.66992 9.9982C1.66992 14.5997 5.40018 18.33 10.0017 18.33C14.3636 18.33 17.9419 14.9787 18.3035 10.7098C18.3307 10.3887 18.1702 10.0806 17.8914 9.91879C17.6127 9.75698 17.2656 9.77044 17.0002 9.95336C16.1951 10.5083 15.2201 10.8331 14.1667 10.8331C11.4052 10.8331 9.16667 8.59452 9.16667 5.8331C9.16667 4.77977 9.49145 3.80481 10.0463 2.99972Z", fill: "currentColor" }) }));
|
|
26553
|
-
}
|
|
26554
|
-
|
|
26555
26124
|
function AssetsView({ chains, favoriteTokens, popularTokens, userTokens, }) {
|
|
26556
26125
|
const matchesMobileLg = useMediaQuery(MEDIA_QUERIES.MOBILE_LG.media);
|
|
26557
26126
|
return (jsxRuntime.jsxs(ProductCard, { children: [jsxRuntime.jsx(NavigationBar, { displayBackButton: true }), jsxRuntime.jsx("div", { className: "tw-max-h-[60px] tw-px-squid-m tw-py-squid-xs", children: jsxRuntime.jsx(Input, {}) }), jsxRuntime.jsx(BorderedContainer, { children: jsxRuntime.jsxs("div", { className: cn('tw-grid', matchesMobileLg
|
|
@@ -61589,6 +61158,35 @@ const transactionHalfSuccessAnimation = TransactionHalfSuccessAnimation;
|
|
|
61589
61158
|
const transactionErrorPauseAnimation = TransactionErrorPauseAnimation;
|
|
61590
61159
|
const transactionRejectedAnimation = TransactionRejectedAnimation;
|
|
61591
61160
|
|
|
61161
|
+
const useTimer = ({ immediateStart = true, }) => {
|
|
61162
|
+
const [timer, setTimer] = React$1.useState('0s');
|
|
61163
|
+
const intervalRef = React$1.useRef(null);
|
|
61164
|
+
const startTimer = () => {
|
|
61165
|
+
if (intervalRef.current !== null)
|
|
61166
|
+
return; // Prevent multiple intervals
|
|
61167
|
+
const startTime = Date.now();
|
|
61168
|
+
intervalRef.current = window.setInterval(() => {
|
|
61169
|
+
const elapsedTime = Date.now() - startTime;
|
|
61170
|
+
setTimer(formatDuration(elapsedTime));
|
|
61171
|
+
}, 1000);
|
|
61172
|
+
};
|
|
61173
|
+
const stopTimer = () => {
|
|
61174
|
+
if (intervalRef.current !== null) {
|
|
61175
|
+
clearInterval(intervalRef.current);
|
|
61176
|
+
intervalRef.current = null;
|
|
61177
|
+
}
|
|
61178
|
+
};
|
|
61179
|
+
React$1.useEffect(() => {
|
|
61180
|
+
if (immediateStart) {
|
|
61181
|
+
startTimer();
|
|
61182
|
+
}
|
|
61183
|
+
return () => {
|
|
61184
|
+
stopTimer();
|
|
61185
|
+
};
|
|
61186
|
+
}, [immediateStart]);
|
|
61187
|
+
return { timer, stopTimer, startTimer };
|
|
61188
|
+
};
|
|
61189
|
+
|
|
61592
61190
|
var SwapState;
|
|
61593
61191
|
(function (SwapState) {
|
|
61594
61192
|
// user needs to sign the transaction in their wallet
|
|
@@ -62037,7 +61635,6 @@ exports.ArrowWallDownIcon = ArrowWallDownIcon;
|
|
|
62037
61635
|
exports.ArrowsSwapIcon = ArrowsSwapIcon;
|
|
62038
61636
|
exports.AssetsButton = AssetsButton;
|
|
62039
61637
|
exports.AssetsView = AssetsView;
|
|
62040
|
-
exports.BackpackIcon = BackpackIcon;
|
|
62041
61638
|
exports.BadgeImage = BadgeImage;
|
|
62042
61639
|
exports.BagIcon = BagIcon;
|
|
62043
61640
|
exports.BankIcon = BankIcon;
|
|
@@ -62053,12 +61650,10 @@ exports.BridgeHeader = BridgeHeader;
|
|
|
62053
61650
|
exports.BridgeProperties = BridgeProperties;
|
|
62054
61651
|
exports.BridgeTransactionView = BridgeTransactionView;
|
|
62055
61652
|
exports.BrokenHeartIcon = BrokenHeartIcon;
|
|
62056
|
-
exports.BubblesIcon = BubblesIcon;
|
|
62057
61653
|
exports.Button = Button$1;
|
|
62058
61654
|
exports.BuyNFTHeader = BuyNFTHeader;
|
|
62059
61655
|
exports.BuyNFTProperties = BuyNFTProperties;
|
|
62060
61656
|
exports.BuyNFTTransactionView = BuyNFTTransactionView;
|
|
62061
|
-
exports.CSS_VARS = CSS_VARS;
|
|
62062
61657
|
exports.Calendar = Calendar;
|
|
62063
61658
|
exports.CaptionText = CaptionText;
|
|
62064
61659
|
exports.ChainLink = ChainLink;
|
|
@@ -62080,17 +61675,12 @@ exports.ClockOutlineIcon = ClockOutlineIcon;
|
|
|
62080
61675
|
exports.CoinsAddIcon = CoinsAddIcon;
|
|
62081
61676
|
exports.CoinsIcon = CoinsIcon;
|
|
62082
61677
|
exports.Collapse = Collapse;
|
|
62083
|
-
exports.CollapsibleMenu = CollapsibleMenu;
|
|
62084
61678
|
exports.CollectionIcon = CollectionIcon;
|
|
62085
|
-
exports.ColorPaletteIcon = ColorPaletteIcon;
|
|
62086
61679
|
exports.CompassRound = CompassRound;
|
|
62087
|
-
exports.ConsoleIcon = ConsoleIcon;
|
|
62088
61680
|
exports.Copy = Copy;
|
|
62089
|
-
exports.CrossAnimatedIcon = CrossAnimatedIcon;
|
|
62090
61681
|
exports.DashboardFast = DashboardFast;
|
|
62091
61682
|
exports.DescriptionBlocks = DescriptionBlocks;
|
|
62092
61683
|
exports.DetailsToolbar = DetailsToolbar;
|
|
62093
|
-
exports.DiscordIcon = DiscordIcon;
|
|
62094
61684
|
exports.DockSwapIcon = DockSwapIcon;
|
|
62095
61685
|
exports.Dollar = Dollar;
|
|
62096
61686
|
exports.DotGrid1x3HorizontalIcon = DotGrid1x3HorizontalIcon;
|
|
@@ -62110,7 +61700,6 @@ exports.FilledHeartIcon = FilledHeartIcon;
|
|
|
62110
61700
|
exports.FilterButton = FilterButton;
|
|
62111
61701
|
exports.FilterIcon = FilterIcon;
|
|
62112
61702
|
exports.GasIcon = GasIcon;
|
|
62113
|
-
exports.GithubIcon = GithubIcon;
|
|
62114
61703
|
exports.HashLink = HashLink;
|
|
62115
61704
|
exports.HeadingText = HeadingText;
|
|
62116
61705
|
exports.HeartSmallIcon = HeartSmallIcon;
|
|
@@ -62141,12 +61730,9 @@ exports.MainView = MainView;
|
|
|
62141
61730
|
exports.MaxIcon = MaxIcon;
|
|
62142
61731
|
exports.Menu = Menu;
|
|
62143
61732
|
exports.MenuItem = MenuItem;
|
|
62144
|
-
exports.MenuSwapIcon = MenuSwapIcon;
|
|
62145
|
-
exports.MirrorIcon = MirrorIcon;
|
|
62146
61733
|
exports.Modal = Modal;
|
|
62147
61734
|
exports.ModalContent = ModalContent;
|
|
62148
61735
|
exports.ModalContentDivider = ModalContentDivider;
|
|
62149
|
-
exports.MoonIcon = MoonIcon;
|
|
62150
61736
|
exports.NavigationBar = NavigationBar;
|
|
62151
61737
|
exports.NotAllowedIcon = NotAllowedIcon;
|
|
62152
61738
|
exports.NumericInput = NumericInput;
|
|
@@ -62177,7 +61763,6 @@ exports.SettingsGearIcon = SettingsGearIcon;
|
|
|
62177
61763
|
exports.SettingsItem = SettingsItem;
|
|
62178
61764
|
exports.SettingsSlider = SettingsSlider;
|
|
62179
61765
|
exports.SizeTransition = SizeTransition;
|
|
62180
|
-
exports.SmileIcon = SmileIcon;
|
|
62181
61766
|
exports.SnapIcon = SnapIcon;
|
|
62182
61767
|
exports.SortIcon = SortIcon;
|
|
62183
61768
|
exports.SparkleIcon = SparkleIcon;
|
|
@@ -62190,8 +61775,6 @@ exports.SquidLogo = SquidLogo;
|
|
|
62190
61775
|
exports.StakeAction = StakeAction;
|
|
62191
61776
|
exports.StartAction = StartAction;
|
|
62192
61777
|
exports.SuccessAction = SuccessAction;
|
|
62193
|
-
exports.SunIcon = SunIcon;
|
|
62194
|
-
exports.SunriseIcon = SunriseIcon;
|
|
62195
61778
|
exports.SwapAction = SwapAction;
|
|
62196
61779
|
exports.SwapConfiguration = SwapConfiguration;
|
|
62197
61780
|
exports.SwapDetailsView = SwapDetailsView;
|
|
@@ -62239,15 +61822,11 @@ exports.WalletLink = WalletLink;
|
|
|
62239
61822
|
exports.WalletsView = WalletsView;
|
|
62240
61823
|
exports.WrapAction = WrapAction;
|
|
62241
61824
|
exports.XSocial = XSocial;
|
|
62242
|
-
exports.baseTailwindConfig = baseTailwindConfig;
|
|
62243
61825
|
exports.darkTheme = darkTheme;
|
|
62244
61826
|
exports.lightTheme = lightTheme;
|
|
62245
61827
|
exports.linkActionTimelineProps = linkActionTimelineProps;
|
|
61828
|
+
exports.statusBgClassMap = statusBgClassMap$1;
|
|
61829
|
+
exports.statusColorClassMap = statusColorClassMap;
|
|
62246
61830
|
exports.statusTextClassMap = statusTextClassMap;
|
|
62247
|
-
exports.useCollapsibleMenu = useCollapsibleMenu;
|
|
62248
61831
|
exports.useDropdownMenu = useDropdownMenu;
|
|
62249
61832
|
exports.useMediaQuery = useMediaQuery;
|
|
62250
|
-
exports.useOnResize = useOnResize;
|
|
62251
|
-
exports.useRect = useRect;
|
|
62252
|
-
exports.useTimer = useTimer;
|
|
62253
|
-
exports.useVersion = useVersion;
|