@0xsquid/ui 0.17.2 → 0.17.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +78 -78
- package/dist/cjs/types/components/badges/LoadingSkeleton.d.ts +1 -1
- package/dist/cjs/types/components/buttons/FilterButton.d.ts +2 -1
- package/dist/cjs/types/components/icons/SquidIcons.d.ts +1 -0
- package/dist/cjs/types/components/layout/AppContainer.d.ts +7 -0
- package/dist/cjs/types/components/layout/ExploreLayout.d.ts +3 -7
- package/dist/cjs/types/components/layout/Menu.d.ts +1 -3
- package/dist/cjs/types/components/layout/Toast.d.ts +10 -0
- package/dist/cjs/types/components/layout/TransactionFilters.d.ts +9 -9
- package/dist/cjs/types/components/layout/TransactionHeader/TransactionHeaderLayout.d.ts +3 -2
- package/dist/cjs/types/components/layout/TransactionSearch.d.ts +2 -1
- package/dist/cjs/types/components/lists/TransactionAction/FeesAction.d.ts +3 -2
- package/dist/cjs/types/components/lists/TransactionAction/SuccessAction.d.ts +3 -3
- package/dist/cjs/types/components/lists/TransactionAction/SwapAction.d.ts +3 -3
- package/dist/cjs/types/components/typography/HeadingText.d.ts +2 -1
- package/dist/cjs/types/core/utils.d.ts +3 -0
- package/dist/cjs/types/stories/data/actions.d.ts +6 -4
- package/dist/cjs/types/stories/layout/AppContainer.stories.d.ts +6 -0
- package/dist/cjs/types/stories/layout/Menu.stories.d.ts +2 -3
- package/dist/cjs/types/stories/layout/Toast.stories.d.ts +10 -0
- package/dist/esm/index.js +79 -80
- package/dist/esm/types/components/badges/LoadingSkeleton.d.ts +1 -1
- package/dist/esm/types/components/buttons/FilterButton.d.ts +2 -1
- package/dist/esm/types/components/icons/SquidIcons.d.ts +1 -0
- package/dist/esm/types/components/layout/AppContainer.d.ts +7 -0
- package/dist/esm/types/components/layout/ExploreLayout.d.ts +3 -7
- package/dist/esm/types/components/layout/Menu.d.ts +1 -3
- package/dist/esm/types/components/layout/Toast.d.ts +10 -0
- package/dist/esm/types/components/layout/TransactionFilters.d.ts +9 -9
- package/dist/esm/types/components/layout/TransactionHeader/TransactionHeaderLayout.d.ts +3 -2
- package/dist/esm/types/components/layout/TransactionSearch.d.ts +2 -1
- package/dist/esm/types/components/lists/TransactionAction/FeesAction.d.ts +3 -2
- package/dist/esm/types/components/lists/TransactionAction/SuccessAction.d.ts +3 -3
- package/dist/esm/types/components/lists/TransactionAction/SwapAction.d.ts +3 -3
- package/dist/esm/types/components/typography/HeadingText.d.ts +2 -1
- package/dist/esm/types/core/utils.d.ts +3 -0
- package/dist/esm/types/stories/data/actions.d.ts +6 -4
- package/dist/esm/types/stories/layout/AppContainer.stories.d.ts +6 -0
- package/dist/esm/types/stories/layout/Menu.stories.d.ts +2 -3
- package/dist/esm/types/stories/layout/Toast.stories.d.ts +10 -0
- package/dist/index.css +1 -1
- package/dist/index.d.ts +40 -41
- package/package.json +2 -1
- package/dist/cjs/types/stories/data/transaction.d.ts +0 -49
- package/dist/cjs/types/types/data.d.ts +0 -155
- package/dist/esm/types/stories/data/transaction.d.ts +0 -49
- package/dist/esm/types/types/data.d.ts +0 -155
package/dist/esm/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { useState, createContext, useContext, useMemo, useRef, useEffect, Children, Fragment as Fragment$1, isValidElement, useLayoutEffect, cloneElement, useCallback,
|
|
3
|
+
import { forwardRef, createElement, useState, createContext, useContext, useMemo, useRef, useEffect, Children, Fragment as Fragment$1, isValidElement, useLayoutEffect, cloneElement, useCallback, useImperativeHandle, useId as useId$1 } from 'react';
|
|
4
4
|
|
|
5
5
|
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
|
|
6
6
|
|
|
@@ -2581,6 +2581,12 @@ const formatRelativeDate = (timestampSeconds) => {
|
|
|
2581
2581
|
function truncateHash(hash) {
|
|
2582
2582
|
return `${hash.slice(0, 8)}...${hash.slice(-6)}`;
|
|
2583
2583
|
}
|
|
2584
|
+
const styled = (tag, className) => {
|
|
2585
|
+
const Component = forwardRef((props, ref) => createElement(tag, mergeProps({ ref, className }, props)));
|
|
2586
|
+
Component.displayName = `styled ${tag}`;
|
|
2587
|
+
return Component;
|
|
2588
|
+
};
|
|
2589
|
+
const mergeProps = (a, b) => (Object.assign(Object.assign(Object.assign({}, a), b), { className: cn(a.className, b.className), style: Object.assign(Object.assign({}, a.style), b.style) }));
|
|
2584
2590
|
|
|
2585
2591
|
const badgeSizeClassMap = {
|
|
2586
2592
|
sm: 'tw-w-4 tw-h-4',
|
|
@@ -2720,9 +2726,9 @@ const LoadingProvider = LoadingContext.Provider;
|
|
|
2720
2726
|
function LoadingSkeleton({ className, height = '20', isLoading: isLoadingProp, children, width = '100', }) {
|
|
2721
2727
|
const contextValue = useContext(LoadingContext);
|
|
2722
2728
|
const isLoading = isLoadingProp !== undefined ? isLoadingProp : contextValue;
|
|
2723
|
-
if (
|
|
2729
|
+
if (children && !isLoading)
|
|
2724
2730
|
return children;
|
|
2725
|
-
return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsx("g", { clipPath: "url(#clip0_1246_29063)", children: jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1246_29063)" }) }), jsxs("defs", { children: [jsxs("linearGradient", { id: "paint0_linear_1246_29063", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient tw-text-material-light-thin", children: [jsx("stop", { stopColor: "currentColor" }), jsx("stop", { offset: "0.395881", stopColor: "currentColor" }), jsx("stop", { offset: "0.597867", stopColor: "currentColor", className: "group-data-[squid-theme-type=dark]:tw-text-material-light-average group-data-[squid-theme-type=light]:tw-text-transparent" }), jsx("stop", { offset: "0.697004", stopColor: "currentColor" })] }), jsx("clipPath", { id: "clip0_1246_29063", children: jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] })
|
|
2731
|
+
return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsx("g", { clipPath: "url(#clip0_1246_29063)", children: jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1246_29063)" }) }), jsxs("defs", { children: [jsxs("linearGradient", { id: "paint0_linear_1246_29063", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient tw-text-material-light-thin", children: [jsx("stop", { stopColor: "currentColor" }), jsx("stop", { offset: "0.395881", stopColor: "currentColor" }), jsx("stop", { offset: "0.597867", stopColor: "currentColor", className: "group-data-[squid-theme-type=dark]:tw-text-material-light-average group-data-[squid-theme-type=light]:tw-text-transparent" }), jsx("stop", { offset: "0.697004", stopColor: "currentColor" })] }), jsx("clipPath", { id: "clip0_1246_29063", children: jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] })] }));
|
|
2726
2732
|
}
|
|
2727
2733
|
|
|
2728
2734
|
function Checkmark1Icon() {
|
|
@@ -2802,7 +2808,7 @@ const statusTextMap = {
|
|
|
2802
2808
|
};
|
|
2803
2809
|
const variantClassMap = {
|
|
2804
2810
|
full: 'tw-h-squid-l tw-min-w-squid-xxl tw-pl-squid-xxs tw-pr-squid-xs',
|
|
2805
|
-
compact: 'tw-h-squid-m tw-w-squid-m
|
|
2811
|
+
compact: 'tw-h-squid-m tw-w-squid-m mobile-lg:tw-w-squid-xl mobile-lg:tw-px-squid-xxs',
|
|
2806
2812
|
};
|
|
2807
2813
|
function renderIcon(status, variant) {
|
|
2808
2814
|
switch (status) {
|
|
@@ -2895,7 +2901,7 @@ function Copy(_a) {
|
|
|
2895
2901
|
}
|
|
2896
2902
|
|
|
2897
2903
|
function HashLink({ showTx = false, hash, showCopyButton = false, url, children, }) {
|
|
2898
|
-
return (jsxs("div", { className: "tw-flex tw-items-center", children: [showTx && jsx("span", { className: "tw-text-grey-700", children: "TX" }),
|
|
2904
|
+
return (jsxs("div", { className: "tw-flex tw-items-center", children: [showTx && jsx("span", { className: "tw-mr-squid-xs tw-text-grey-700", children: "TX" }), children !== null && children !== void 0 ? children : truncateHash(hash), url && (jsx("a", { href: url, target: "_blank", className: 'tw-rounded-squid-s tw-px-squid-xxs hover:tw-bg-material-light-thin', children: jsx(SquareArrowTopRight2Icon, { strokeWidth: "1.5", className: "tw-h-[1.2em] tw-w-[1.2em] tw-text-royal-500" }) })), showCopyButton && (jsx("span", { className: "tw-rounded-squid-s tw-px-squid-xxs hover:tw-bg-material-light-thin", children: jsx(Copy, { size: "16", strokeWidth: "1.5", className: "tw-h-[1.2em] tw-w-[1.2em] tw-cursor-pointer tw-text-royal-500", onClick: () => navigator.clipboard.writeText(hash) }) }))] }));
|
|
2899
2905
|
}
|
|
2900
2906
|
|
|
2901
2907
|
function WalletLink({ imageURI, address }) {
|
|
@@ -6690,7 +6696,7 @@ function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessa
|
|
|
6690
6696
|
onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
|
|
6691
6697
|
}
|
|
6692
6698
|
}
|
|
6693
|
-
return (jsx("div", { className: "tw-w-[
|
|
6699
|
+
return (jsx("div", { className: "mobile-lg:tw-w-[190px] tw-w-[157px]", children: jsxs("button", { onClick: handleToggleBoostMode, disabled: !canToggleBoostMode, className: cn('tw-group/boost-toggle tw-flex tw-h-squid-xl tw-w-full tw-items-center tw-rounded-squid-m tw-bg-grey-900 tw-pr-squid-xs', canToggleBoostMode && 'hover:tw-bg-material-light-thin'), children: [jsx(BoostButton, { boostIndicatorRef: boostIndicatorRef, boostMode: boostMode, boostDisabledMessage: boostDisabledMessage, canToggleBoostMode: canToggleBoostMode, tooltipDisplayDelayMs: boostTooltipDisplayDelayMs }), jsx(Chip, { label: estimatedTime, className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' || !canToggleBoostMode
|
|
6694
6700
|
? 'tw-bg-grey-300'
|
|
6695
6701
|
: 'tw-bg-status-positive') })] }) }));
|
|
6696
6702
|
}
|
|
@@ -6713,9 +6719,10 @@ function useOnResize(ref, callback) {
|
|
|
6713
6719
|
const observer = new ResizeObserver(([entry]) => {
|
|
6714
6720
|
if (!entry)
|
|
6715
6721
|
return;
|
|
6716
|
-
|
|
6722
|
+
callbackRef.current(entry.contentRect);
|
|
6717
6723
|
});
|
|
6718
6724
|
observer.observe(ref.current);
|
|
6725
|
+
callbackRef.current(ref.current.getBoundingClientRect());
|
|
6719
6726
|
return () => observer.disconnect();
|
|
6720
6727
|
}, [ref.current]);
|
|
6721
6728
|
}
|
|
@@ -6742,7 +6749,7 @@ function Collapse(_a) {
|
|
|
6742
6749
|
const containerRef = useRef(null);
|
|
6743
6750
|
const contentsRef = useRef(null);
|
|
6744
6751
|
const contentsRect = useRect(contentsRef);
|
|
6745
|
-
const expandedHeight = contentsRect.height;
|
|
6752
|
+
const expandedHeight = Math.max(contentsRect.height, collapsedHeight);
|
|
6746
6753
|
return (jsx("div", Object.assign({ ref: containerRef, style: {
|
|
6747
6754
|
[expandednessVar]: collapsed ? 0 : 1,
|
|
6748
6755
|
transition: `${expandednessVar} ${duration}ms ${ANIMATION_TIMINGS.SHOW_ROUTE}`,
|
|
@@ -6836,10 +6843,10 @@ function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode,
|
|
|
6836
6843
|
return 'empty';
|
|
6837
6844
|
return 'full';
|
|
6838
6845
|
}, [errorMessage, isLoading, isEmpty]);
|
|
6839
|
-
const detailClassName = cn('tw-w-[157px]
|
|
6840
|
-
return (jsx("aside", { className: cn('
|
|
6841
|
-
? 'tw-px-squid-
|
|
6842
|
-
: 'tw-px-squid-
|
|
6846
|
+
const detailClassName = cn('tw-w-[157px] mobile-lg:tw-w-[190px]', detailStateClassMap[state]);
|
|
6847
|
+
return (jsx("aside", { className: cn('mobile-lg:tw-w-card-large tw-flex tw-h-[50px] tw-w-full tw-items-center tw-justify-between tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error'
|
|
6848
|
+
? 'mobile-lg:tw-px-squid-l tw-px-squid-m'
|
|
6849
|
+
: 'mobile-lg:tw-px-squid-m tw-px-squid-xs'), children: state === 'error' && errorMessage ? (jsxs(Fragment, { children: [jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsx(Button$1, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsx(Loader, { size: "32" })) : (jsx(Tooltip, { tooltipContent: (flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled)
|
|
6843
6850
|
? flipButton.disabledMessage
|
|
6844
6851
|
: undefined, tooltipWidth: "max", displayDelayMs: flipButton === null || flipButton === void 0 ? void 0 : flipButton.tooltipDisplayDelayMs, children: jsx("button", { disabled: flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled, onClick: onInvertSwapButtonClick, className: "tw-group/flip-button tw-flex tw-h-squid-xl tw-min-w-[60px] tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-transparent tw-px-squid-xs tw-py-squid-xxs tw-text-grey-300 hover:tw-bg-material-light-thin disabled:tw-cursor-not-allowed", children: jsx(ChevronLargeDownIcon, { className: cn('tw-transition-transform tw-duration-150', !(flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled) &&
|
|
6845
6852
|
'group-hover/flip-button:tw-rotate-180') }) }) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
|
|
@@ -6989,7 +6996,7 @@ const collapsedListItemClassMap = {
|
|
|
6989
6996
|
};
|
|
6990
6997
|
function ListItem(_a) {
|
|
6991
6998
|
var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps, compactOnMobile } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile"]);
|
|
6992
|
-
const subtitleClassName = cn('tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500', compactOnMobile ? 'tw-hidden
|
|
6999
|
+
const subtitleClassName = cn('tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500', compactOnMobile ? 'tw-hidden mobile-lg:tw-block' : 'tw-block');
|
|
6993
7000
|
// 'small' variant does not have detail
|
|
6994
7001
|
const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
|
|
6995
7002
|
const isDetailInteractive = !!onDetailClick;
|
|
@@ -7020,10 +7027,10 @@ function ListItem(_a) {
|
|
|
7020
7027
|
const ItemTag = isInteractive ? 'button' : 'div';
|
|
7021
7028
|
const itemProps = isInteractive ? props : {};
|
|
7022
7029
|
return (jsx("li", Object.assign({}, containerProps, { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], compactOnMobile
|
|
7023
|
-
? `${collapsedListItemClassMap[size]}
|
|
7030
|
+
? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
|
|
7024
7031
|
: 'tw-w-full', className), children: jsxs(ItemTag, Object.assign({}, itemProps, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs', isSelected && 'tw-bg-material-light-thin', isInteractive && 'hover:tw-bg-material-light-thin'), children: [size === 'large' ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs',
|
|
7025
7032
|
// 'large' variant has extra padding
|
|
7026
|
-
size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsx(BodyText, { size: "small", className: cn('tw-max-w-full tw-truncate', subtitle && 'tw-h-[17px] !tw-leading-[17px]', compactOnMobile ? 'tw-
|
|
7033
|
+
size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsx(BodyText, { size: "small", className: cn('tw-max-w-full tw-truncate', subtitle && 'tw-h-[17px] !tw-leading-[17px]', compactOnMobile ? 'mobile-lg:tw-block tw-hidden' : 'tw-block'), children: itemTitle })) : (itemTitle), size === 'large' &&
|
|
7027
7034
|
((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (loadingComponent()) : subtitle ? (jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsx(CaptionText, { className: cn(subtitleClassName, 'tw-hidden group-hover/list-item:tw-block'), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxs(DetailTag, Object.assign({}, detailProps, { className: cn('tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
|
|
7028
7035
|
? 'tw-opacity-0 hover:tw-opacity-100 focus:tw-opacity-100 group-hover/list-item:tw-opacity-100 group-focus/list-item:tw-opacity-100'
|
|
7029
7036
|
: 'tw-flex', isDetailInteractive && 'hover:tw-bg-material-light-thin', detailButtonClassName), children: [!!detail && (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] })))] })) })));
|
|
@@ -7138,7 +7145,7 @@ function SwapStepItem({ descriptionBlocks, showStepSeparator = false, link, stat
|
|
|
7138
7145
|
return (jsx("li", { style: {
|
|
7139
7146
|
maxHeight: `${STEP_ITEM_HEIGHT}px`,
|
|
7140
7147
|
minHeight: `${STEP_ITEM_HEIGHT}px`,
|
|
7141
|
-
}, className: "tw-w-list-item-
|
|
7148
|
+
}, className: "mobile-lg:tw-w-list-item-large tw-relative tw-flex tw-w-list-item-compact tw-flex-col tw-items-start tw-justify-center tw-text-grey-300 tw-transition-colors tw-duration-1000", children: jsxs("a", { href: link, target: "_blank", style: Object.assign(Object.assign({}, transitionStyle), { maxHeight: `${STEP_ITEM_HEIGHT}px` }), className: cn('tw-group/swap-step-item tw-flex tw-w-full tw-items-center tw-rounded-squid-xs tw-py-squid-xxs', !!link && 'hover:tw-bg-material-light-thin', statusTextClass), children: [jsxs("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: [jsx(Chip, { style: transitionStyle, className: cn('tw-w-squid-xl', statusBgClassMap[status]), icon: chipContent }), showStepSeparator && (jsx("span", { className: cn(separatorClassMap[status], 'tw-absolute tw-left-0 tw-top-full tw-mt-0.5'), style: transitionStyle, children: jsx(SwapStepSeparator, {}) }))] }), jsx(DescriptionBlocks, { className: "tw-min-h-squid-l tw-py-squid-xxs tw-pr-squid-xs", blocks: descriptionBlocks })] }) }));
|
|
7142
7149
|
}
|
|
7143
7150
|
|
|
7144
7151
|
function PipeSeparator(_a) {
|
|
@@ -7209,7 +7216,7 @@ function ActionRow(_a) {
|
|
|
7209
7216
|
return (jsx("div", Object.assign({}, props, { className: cn('tw-grid tw-grid-cols-[40px,1fr,60px] tw-gap-squid-xs tw-pl-squid-m', className) })));
|
|
7210
7217
|
}
|
|
7211
7218
|
function ActionWrapper({ children, status, className, }) {
|
|
7212
|
-
return (jsx("div", { className: cn('tw-relative tw-flex tw-flex-col tw-gap-squid-xxs', status === 'waiting'
|
|
7219
|
+
return (jsx("div", { className: cn('tw-relative tw-flex tw-flex-col tw-gap-squid-xxs', status === 'waiting' && 'tw-bg-grey-800', className), children: children }));
|
|
7213
7220
|
}
|
|
7214
7221
|
function Timestamp({ time }) {
|
|
7215
7222
|
return (jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-text-grey-500", children: [formatRelativeDate(time), jsx("span", { className: "tw-text-grey-700", children: "\u2022" }), formatTime(time)] }));
|
|
@@ -7224,7 +7231,7 @@ function ApproveAction({ status, nextStatus, showTimeline, showBody, profile, ch
|
|
|
7224
7231
|
}
|
|
7225
7232
|
|
|
7226
7233
|
function BridgeAction({ status, nextStatus, showTimeline, showBody, token, chain, provider, timestamp, hash, url, }) {
|
|
7227
|
-
return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(SquareArrowTopLeftIcon, {}), description: jsxs(Inline, { children: ["Bridge", jsx(IconLabel, { src: token.logoURI, variant: "round", children: token.symbol }), "to", jsx(IconLabel, { src: chain.logoURI, children: chain.name }), "via", jsx(IconLabel, { src: provider.logoURI, variant: "round", children: provider.name })] }), showTimeline: showTimeline, showBody: showBody, children: jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
|
|
7234
|
+
return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(SquareArrowTopLeftIcon, {}), description: jsxs(Inline, { children: ["Bridge", jsx(IconLabel, { src: token.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: token.symbol }) }), "to", jsx(IconLabel, { src: chain.logoURI, children: jsx(BodyText, { size: "small", children: chain.name }) }), "via", jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: provider.name }) })] }), showTimeline: showTimeline, showBody: showBody, children: jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
|
|
7228
7235
|
}
|
|
7229
7236
|
|
|
7230
7237
|
function TagIcon({ size = '20' }) {
|
|
@@ -7245,8 +7252,8 @@ function FeesLines({ status, lines, showTimeline = false, }) {
|
|
|
7245
7252
|
? statusTextClassMap[status]
|
|
7246
7253
|
: '!tw-text-[transparent]'), children: [jsx(Timeline.CapTop, {}), jsx(Timeline.Straight, {})] }) })] }));
|
|
7247
7254
|
}
|
|
7248
|
-
function FeesRow({ label, usd,
|
|
7249
|
-
return (jsxs("div", { className: "tw-flex tw-w-full tw-gap-squid-xs", children: [jsx(SizeTransition, { children: jsx(BodyText, { size: "small", tight: true, className: cn('tw-block tw-
|
|
7255
|
+
function FeesRow({ label, usd, amount, symbol, collapsed = false, }) {
|
|
7256
|
+
return (jsxs("div", { className: "tw-flex tw-w-full tw-gap-squid-xs", children: [jsx(SizeTransition, { children: jsx(BodyText, { size: "small", tight: true, className: cn('tw-block tw-truncate tw-text-grey-300', !collapsed && 'tw-w-[100px]'), children: label }) }), jsx("div", { className: "tw-flex tw-items-center", children: jsx(PipeSeparator, { className: "tw-text-grey-700" }) }), jsxs(BodyText, { size: "small", tight: true, className: "tw-flex-grow tw-text-grey-300", children: ["$", usd] }), jsxs(CaptionText, { className: "tw-text-right tw-text-grey-500", children: [amount, " ", symbol] })] }));
|
|
7250
7257
|
}
|
|
7251
7258
|
|
|
7252
7259
|
function IncompleteAction({ status, nextStatus, message, buttons, }) {
|
|
@@ -7262,11 +7269,11 @@ function linkActionTimelineProps(actions, collapsed) {
|
|
|
7262
7269
|
}
|
|
7263
7270
|
|
|
7264
7271
|
function ReceiveNFTAction({ status, nextStatus, showTimeline, showBody, nft, chain, wallet, timestamp, hash, url, }) {
|
|
7265
|
-
return (jsxs(ActionLayout, { status: status, statusIcon: jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive NFT", title: nft.name, icon: jsx(ImageIcon, { src: nft.imageURI, variant: "square", size: "xlarge" }), lineCap: jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxs(BodyText, { className: "tw-flex tw-items-center tw-gap-squid-xs", size: "small", children: [jsx(IconLabel, { src: chain.logoURI, children: chain.name }), jsx(PipeSeparator, { className: "tw-text-grey-700" }), jsx(WalletLink, Object.assign({}, wallet))] }) }), jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })] }));
|
|
7272
|
+
return (jsxs(ActionLayout, { status: status, statusIcon: jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive NFT", title: nft.name, icon: jsx(ImageIcon, { src: nft.imageURI, variant: "square", size: "xlarge" }), lineCap: jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxs(BodyText, { className: "tw-flex tw-items-center tw-gap-squid-xs", size: "small", children: [jsx(IconLabel, { src: chain.logoURI, children: jsx(BodyText, { size: "small", children: chain.name }) }), jsx(PipeSeparator, { className: "tw-text-grey-700" }), jsx(WalletLink, Object.assign({}, wallet))] }) }), jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })] }));
|
|
7266
7273
|
}
|
|
7267
7274
|
|
|
7268
7275
|
function ReceiveTokensAction({ status, nextStatus, showTimeline, showBody, token, amount, chain, wallet, timestamp, hash, url, }) {
|
|
7269
|
-
return (jsxs(ActionLayout, { status: status, statusIcon: jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive tokens", title: `${amount} ${token.symbol}`, icon: jsx(ImageIcon, { src: token.logoURI, variant: "round", size: "xlarge" }), lineCap: jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxs(BodyText, { size: "small", className: "tw-flex tw-items-center tw-gap-squid-xs", children: [jsx(IconLabel, { src: chain.logoURI, children: chain.name }), jsx(PipeSeparator, { className: "tw-text-body-small tw-text-grey-700" }), ' ', jsx(WalletLink, Object.assign({}, wallet))] }) }), jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })] }));
|
|
7276
|
+
return (jsxs(ActionLayout, { status: status, statusIcon: jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive tokens", title: `${amount} ${token.symbol}`, icon: jsx(ImageIcon, { src: token.logoURI, variant: "round", size: "xlarge" }), lineCap: jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxs(BodyText, { size: "small", className: "tw-flex tw-items-center tw-gap-squid-xs", children: [jsx(IconLabel, { src: chain.logoURI, children: jsx(BodyText, { size: "small", children: chain.name }) }), jsx(PipeSeparator, { className: "tw-text-body-small tw-text-grey-700" }), ' ', jsx(WalletLink, Object.assign({}, wallet))] }) }), jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })] }));
|
|
7270
7277
|
}
|
|
7271
7278
|
|
|
7272
7279
|
function SendTokensAction({ status, nextStatus, showTimeline, showBody, token, amount, chain, wallet, timestamp, hash, url, }) {
|
|
@@ -7280,9 +7287,9 @@ function PieChartIcon() {
|
|
|
7280
7287
|
function StakeAction({ status, nextStatus, showTimeline, showBody, token, provider, timestamp, hash, url, }) {
|
|
7281
7288
|
return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(PieChartIcon, {}), description: jsx(Inline, { children: [
|
|
7282
7289
|
'Stake',
|
|
7283
|
-
jsx(IconLabel, { src: token.logoURI, variant: "round", children: token.symbol }),
|
|
7290
|
+
jsx(IconLabel, { src: token.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: token.symbol }) }),
|
|
7284
7291
|
'on',
|
|
7285
|
-
jsx(IconLabel, { src: provider.logoURI, variant: "round", children: provider.name }),
|
|
7292
|
+
jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: provider.name }) }),
|
|
7286
7293
|
] }), showTimeline: showTimeline, showBody: showBody, children: jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
|
|
7287
7294
|
}
|
|
7288
7295
|
|
|
@@ -7302,22 +7309,15 @@ function StartAction({ status, nextStatus, showTimeline = false, showBody = fals
|
|
|
7302
7309
|
function SuccessAction({ nextStatus, status, description = status === 'error'
|
|
7303
7310
|
? 'Transaction failed'
|
|
7304
7311
|
: 'Transaction successful', showTimeline, showBody, timestamp, hash, url, }) {
|
|
7305
|
-
return (jsx(ActionLayout, { description: description, status: status, nextStatus: nextStatus, showTimeline: showTimeline, showBody: showBody, children: jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
|
|
7312
|
+
return (jsx(ActionLayout, { description: description, status: status, nextStatus: nextStatus, showTimeline: showTimeline, showBody: showBody, children: (timestamp || hash) && (jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })) }));
|
|
7306
7313
|
}
|
|
7307
7314
|
|
|
7308
7315
|
function SwapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }) {
|
|
7309
|
-
return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(ArrowBottomTopIcon, { size: "16" }), description: jsxs(Inline, { children: ["Swap", jsx(IconLabel, { src: fromToken.logoURI, variant: "round", children: fromToken.symbol }), "to", jsx(IconLabel, { src: toToken.logoURI, variant: "round", children: toToken.symbol }), "via", jsx(IconLabel, { src: provider.logoURI, variant: "round", children: provider.name })] }), showTimeline: showTimeline, showBody: showBody, children: jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
|
|
7316
|
+
return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(ArrowBottomTopIcon, { size: "16" }), description: jsxs(Inline, { children: ["Swap", jsx(IconLabel, { src: fromToken.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: fromToken.symbol }) }), "to", jsx(IconLabel, { src: toToken.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: toToken.symbol }) }), "via", jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: provider.name }) })] }), showTimeline: showTimeline, showBody: showBody, children: jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
|
|
7310
7317
|
}
|
|
7311
7318
|
|
|
7312
7319
|
function WrapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }) {
|
|
7313
|
-
return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(ArrowBottomTopIcon, { size: "16" }), description:
|
|
7314
|
-
'Wrap',
|
|
7315
|
-
jsx(IconLabel, { src: fromToken.logoURI, variant: "round", children: fromToken.symbol }),
|
|
7316
|
-
'to',
|
|
7317
|
-
jsx(IconLabel, { src: toToken.logoURI, variant: "round", children: toToken.symbol }),
|
|
7318
|
-
'via',
|
|
7319
|
-
jsx(IconLabel, { src: provider.logoURI, variant: "round", children: provider.name }),
|
|
7320
|
-
] }), showTimeline: showTimeline, showBody: showBody, children: jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
|
|
7320
|
+
return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(ArrowBottomTopIcon, { size: "16" }), description: jsxs(Inline, { children: ["Wrap", jsx(IconLabel, { src: fromToken.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: fromToken.symbol }) }), "to", jsx(IconLabel, { src: toToken.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: toToken.symbol }) }), "via", jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: provider.name }) })] }), showTimeline: showTimeline, showBody: showBody, children: jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
|
|
7321
7321
|
}
|
|
7322
7322
|
|
|
7323
7323
|
const actionComponentMap = {
|
|
@@ -7354,17 +7354,16 @@ const borderRadiusClassMap = {
|
|
|
7354
7354
|
lg: 'tw-rounded-squid-m',
|
|
7355
7355
|
};
|
|
7356
7356
|
function Menu(_a) {
|
|
7357
|
-
var { children, containerClassName, contentClassName,
|
|
7358
|
-
return (jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), ref: menuRef, children: jsxs("div", { className: cn('tw-relative tw-inline-flex tw-max-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-xs tw-text-center tw-text-material-light-thick tw-backdrop-blur/20 tw-backdrop-saturate-150 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [
|
|
7357
|
+
var { children, containerClassName, contentClassName, rounded = 'lg', menuRef } = _a, props = __rest$1(_a, ["children", "containerClassName", "contentClassName", "rounded", "menuRef"]);
|
|
7358
|
+
return (jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), ref: menuRef, children: jsxs("div", { className: cn('tw-relative tw-inline-flex tw-max-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-xs tw-text-center tw-text-material-light-thick tw-backdrop-blur/20 tw-backdrop-saturate-150 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [typeof children === 'string' ? (jsx(CaptionText, { className: "tw-z-20 tw-self-stretch !tw-leading-[10px]", children: children })) : (jsx("div", { className: "tw-z-20 tw-flex tw-max-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-text-caption", children: children })), jsx("div", { className: cn('tw-absolute tw-inset-0 tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
|
|
7359
7359
|
}
|
|
7360
7360
|
|
|
7361
7361
|
function DropdownMenu({ dropdownRef, items, className, menuRef, isHidden = false, listClassName, }) {
|
|
7362
7362
|
return (jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsx(Menu, { menuRef: menuRef, rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: !isHidden && (jsx("ul", { className: cn('tw-flex tw-max-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs', listClassName), children: items.map((item) => (jsx(DropdownMenuItem, Object.assign({}, item), item.label))) })) }) }));
|
|
7363
7363
|
}
|
|
7364
7364
|
|
|
7365
|
-
|
|
7366
|
-
|
|
7367
|
-
}
|
|
7365
|
+
const ExploreLayout = styled('div', 'tw-overflow-hidden tw-rounded-squid-l tw-bg-grey-900 tw-shadow-elevation-light-3');
|
|
7366
|
+
const ExploreNav = styled('div', 'tw-flex tw-min-h-squid-xl tw-items-center tw-border-b tw-border-b-material-dark-thin tw-bg-grey-800 tw-px-squid-m tw-text-grey-500 dark:tw-border-b-material-light-thin');
|
|
7368
7367
|
|
|
7369
7368
|
function InfoBox({ title, description, icon }) {
|
|
7370
7369
|
return (jsxs("div", { className: "tw-align-self-stretch tw-flex tw-flex-col tw-items-center tw-gap-squid-xs tw-px-squid-m tw-pb-squid-l tw-pt-squid-xs tw-text-royal-400", children: [icon, jsxs("div", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xxs tw-text-center", children: [jsx(BodyText, { size: "small", className: "!tw-leading-[9px]", children: title }), jsx(CaptionText, { className: "tw-text-grey-500", children: description })] })] }));
|
|
@@ -7396,7 +7395,7 @@ function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, m
|
|
|
7396
7395
|
}, className: cn('tw-absolute tw-inset-0 tw-z-40 tw-flex tw-items-start tw-justify-center tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m', _isOpen ? 'tw-animate-blur-in' : 'tw-animate-blur-out'), children: jsx("div", { style: {
|
|
7397
7396
|
[CSS_VARS.SLIDE_TO_TOP_DURATION]: `${ANIMATION_DURATIONS.SHOW_MODAL}ms`,
|
|
7398
7397
|
[CSS_VARS.SLIDE_TO_BOTTOM_DURATION]: `${ANIMATION_DURATIONS.HIDE_MODAL}ms`,
|
|
7399
|
-
}, className: cn('tw-w-modal-
|
|
7398
|
+
}, className: cn('mobile-lg:tw-w-modal-large mobile-lg:tw-max-h-modal-large tw-relative tw-flex tw-max-h-modal-compact tw-w-modal-compact tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className, _isOpen ? 'tw-animate-slide-to-top' : 'tw-animate-slide-to-bottom', maxHeight && 'tw-h-full'), children: children }) })));
|
|
7400
7399
|
}
|
|
7401
7400
|
|
|
7402
7401
|
const borderTypeClassMap = {
|
|
@@ -7414,17 +7413,17 @@ function ModalContentDivider() {
|
|
|
7414
7413
|
function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, }) {
|
|
7415
7414
|
return (jsxs("nav", { className: cn('tw-flex tw-max-h-[120px] tw-min-w-96 tw-flex-col tw-text-grey-300', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900'), children: [jsxs("div", { className: cn('tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs', displayBackButton
|
|
7416
7415
|
? 'tw-px-squid-m'
|
|
7417
|
-
: 'tw-pl-squid-
|
|
7416
|
+
: 'mobile-lg:tw-pl-squid-l tw-pl-squid-m tw-pr-squid-m'), children: [displayBackButton ? (jsx(Button$1, { className: displayButtonShadows
|
|
7418
7417
|
? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
|
|
7419
7418
|
: undefined, variant: "tertiary", size: "md", icon: jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end tw-gap-squid-xxs", children: actions === null || actions === void 0 ? void 0 : actions.map((action) => (jsx(Button$1, { size: "md", variant: "tertiary", label: typeof action.labelOrIcon === 'string'
|
|
7420
7419
|
? action.labelOrIcon
|
|
7421
7420
|
: undefined, className: "tw-text-grey-300", icon: typeof action.labelOrIcon === 'string'
|
|
7422
7421
|
? null
|
|
7423
|
-
: action.labelOrIcon, onClick: action.onClick }))) })] }), title ? (jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-m tw-py-squid-xxs
|
|
7422
|
+
: action.labelOrIcon, onClick: action.onClick }))) })] }), title ? (jsx("div", { className: "mobile-lg:tw-px-squid-l tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-m tw-py-squid-xxs", children: jsx(HeadingText, { size: "small", children: title }) })) : null] }));
|
|
7424
7423
|
}
|
|
7425
7424
|
|
|
7426
7425
|
function ProductCard({ children }) {
|
|
7427
|
-
return (jsx("div", { className: "
|
|
7426
|
+
return (jsx("div", { className: "mobile-lg:tw-rounded-squid-l tw-flex tw-h-full tw-flex-col tw-justify-center tw-overflow-hidden tw-bg-grey-900 tw-text-grey-300 tw-outline tw-outline-1 tw-outline-material-light-thin group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-3 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-3", children: jsx("div", { className: "mobile-lg:tw-w-card-large mobile-lg:tw-h-card-large mobile-lg:tw-min-h-card-large tw-relative tw-h-card-compact tw-min-h-card-compact tw-w-full tw-max-w-[100vw]", children: children }) }));
|
|
7428
7427
|
}
|
|
7429
7428
|
function BorderedContainer({ children, className, }) {
|
|
7430
7429
|
return (jsx("section", { className: cn('tw-border-t tw-border-t-material-light-thin', className), children: children }));
|
|
@@ -7448,7 +7447,7 @@ function LogoContainer({ children }) {
|
|
|
7448
7447
|
|
|
7449
7448
|
function SwapConfiguration({ amount, tokenPrice = 0, isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel = 'Connect wallet', balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, }) {
|
|
7450
7449
|
var _a, _b;
|
|
7451
|
-
return (jsxs("section", { className: "tw-w-card-
|
|
7450
|
+
return (jsxs("section", { className: "mobile-lg:tw-w-card-large mobile-lg:tw-h-[205px] mobile-lg:tw-max-h-[205px] tw-relative tw-h-[211px] tw-max-h-[211px] tw-w-full tw-overflow-hidden tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m", children: [jsx("header", { className: "mobile-lg:tw-px-squid-l tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600 hover:tw-bg-material-light-thin", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { size: "small", children: ":" }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : emptyAddressLabel }), jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsx("div", { className: "mobile-lg:tw-px-squid-l tw-px-squid-m", children: jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor, variant: assetsButtonVariant }) }), isFetching && (jsx("div", { className: "mobile-lg:tw-left-squid-l tw-absolute tw-bottom-4 tw-left-squid-m tw-z-10 tw-overflow-hidden", children: jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsx(NumericInput, { token: {
|
|
7452
7451
|
decimals: (_a = token === null || token === void 0 ? void 0 : token.decimals) !== null && _a !== void 0 ? _a : 18,
|
|
7453
7452
|
symbol: (_b = token === null || token === void 0 ? void 0 : token.symbol) !== null && _b !== void 0 ? _b : '',
|
|
7454
7453
|
price: tokenPrice,
|
|
@@ -7519,7 +7518,7 @@ const SwapStepsCollapsed = forwardRef((props, ref) => {
|
|
|
7519
7518
|
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
7520
7519
|
}
|
|
7521
7520
|
};
|
|
7522
|
-
return (jsx("div", { className: "
|
|
7521
|
+
return (jsx("div", { className: "mobile-lg:tw-min-w-modal-large tw-relative tw-h-[60px] tw-min-w-modal-compact tw-rounded-squid-l", children: jsx("div", { className: cn('mobile-lg:tw-max-w-modal-large tw-absolute tw-bottom-0 tw-z-10 tw-flex tw-w-full tw-max-w-modal-compact tw-flex-col tw-justify-end tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l', isRouteVisible ? 'tw-h-[535px]' : 'tw-h-[60px]'), children: jsxs("div", { className: "tw-flex tw-flex-col tw-justify-end", children: [!isRouteVisible && (jsxs(Fragment, { children: [jsx("span", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-[21px] tw-w-full tw-bg-gradient-to-b tw-from-grey-800 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-700" }), jsx("span", { className: "tw-absolute tw-bottom-0 tw-left-0 tw-z-10 tw-h-[21px] tw-w-full tw-bg-gradient-to-t tw-from-grey-800 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-700" })] })), jsx("div", { onClick: handleToggleRouteSteps, style: {
|
|
7523
7522
|
[CSS_VARS.FADE_OUT_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
|
|
7524
7523
|
[CSS_VARS.FADE_IN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
|
|
7525
7524
|
}, className: cn('tw-absolute tw-top-0 tw-h-[535px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-backdrop-blur/10 ', isShowRouteAnimationRunning
|
|
@@ -7551,7 +7550,7 @@ const SwapStepsCollapsed = forwardRef((props, ref) => {
|
|
|
7551
7550
|
}, className: cn('tw-absolute tw-top-0 tw-z-10 tw-flex tw-w-full tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-bg-grey-800 tw-p-squid-xs'), children: jsx("button", { onClick: handleToggleRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsx("ul", { ref: routeStepsListRef, style: {
|
|
7552
7551
|
zIndex: isRouteVisible ? 0 : -10,
|
|
7553
7552
|
scrollbarWidth: 'none',
|
|
7554
|
-
}, className: "
|
|
7553
|
+
}, className: "mobile-lg:tw-w-modal-large tw-relative tw-flex tw-w-modal-compact tw-flex-1 tw-grow-0 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs tw-pb-squid-xxs", children: steps.map((step, index) => (jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks,
|
|
7555
7554
|
// show separator for all steps except the first one
|
|
7556
7555
|
showStepSeparator: index > 0, link: step.link, status: newStepIndex < index ? 'pending' : step.status }, index))) }), jsx("footer", { className: "tw-flex tw-max-h-[55px] tw-min-h-[55px] tw-w-full tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-s tw-pb-squid-s", children: jsx(Button$1, { size: "md", variant: "secondary", onClick: footerButton === null || footerButton === void 0 ? void 0 : footerButton.onClick, link: footerButton === null || footerButton === void 0 ? void 0 : footerButton.link, label: footerButton === null || footerButton === void 0 ? void 0 : footerButton.label, className: "tw-w-full" }) })] }) })] }) }) }));
|
|
7557
7556
|
});
|
|
@@ -13322,13 +13321,13 @@ function Tick({ className }) {
|
|
|
13322
13321
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "9", height: "7", fill: "none", viewBox: "0 0 9 7", className: className, children: jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M7.497 1l-4.5 4.5-2-2" }) }));
|
|
13323
13322
|
}
|
|
13324
13323
|
|
|
13325
|
-
function TransactionFilters({ chainType, setChainType, chain, setChain, fromDate, setFromDate, toDate, setToDate, status, setStatus, chains, }) {
|
|
13326
|
-
return (jsxs("div", { className: "tw-flex tw-
|
|
13324
|
+
function TransactionFilters({ chainType, setChainType, chain, setChain, fromDate, setFromDate, toDate, setToDate, status = [], setStatus, chains, }) {
|
|
13325
|
+
return (jsxs("div", { className: "tw-flex tw-flex-col", children: [jsx(FilterSection, { title: "Chain", children: jsx(ChainsFilter, { chainType: chainType, setChainType: setChainType, chain: chain, setChain: setChain, chains: chains }) }), jsx(FilterSection, { title: "Date", initCollapsed: true, children: jsx(DateFilters, { fromDate: fromDate, setFromDate: setFromDate, toDate: toDate, setToDate: setToDate }) }), jsx(FilterSection, { title: "Status", initCollapsed: true, children: jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", children: ['success', 'ongoing', 'error'].map((s) => (jsx(StatusFilter, { status: s, selected: status.length === 0 || status.includes(s), onChange: () => setStatus(arrayToggle(status, s)), icon: s === 'ongoing' ? jsx(DotGrid1x3HorizontalIcon, {}) : undefined }, s))) }) })] }));
|
|
13327
13326
|
}
|
|
13328
13327
|
const arrayToggle = (array, value) => array.includes(value) ? array.filter((v) => v !== value) : [...array, value];
|
|
13329
13328
|
function ChainsFilter({ chainType, setChainType, chain, setChain, chains, }) {
|
|
13330
13329
|
const [search, setSearch] = useState('');
|
|
13331
|
-
return (jsxs(Fragment, { children: [jsxs("div", { className: "tw-flex tw-gap-squid-xxs", children: [jsxs(Toggle, { selected: chainType === 'source', onClick: () => setChainType('source'), children: [jsx(ArrowRightUpCircleIcon, {}), "Source"] }), jsxs(Toggle, { selected: chainType === 'destination', onClick: () => setChainType('destination'), children: [jsx(ArrowRightDownCircleIcon, {}), "Destination"] })] }), jsx(Input, { value: search, onChange: (e) => setSearch(e.target.value) }), jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", children: [jsx(ChainFilter, { name: "All Chains", logoURI: chainDataURL, selected: chain === null, onClick: () => setChain(
|
|
13330
|
+
return (jsxs(Fragment, { children: [jsxs("div", { className: "tw-flex tw-gap-squid-xxs", children: [jsxs(Toggle, { selected: chainType === 'source', onClick: () => setChainType('source'), children: [jsx(ArrowRightUpCircleIcon, {}), "Source"] }), jsxs(Toggle, { selected: chainType === 'destination', onClick: () => setChainType('destination'), children: [jsx(ArrowRightDownCircleIcon, {}), "Destination"] })] }), jsx(Input, { value: search, onChange: (e) => setSearch(e.target.value) }), jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", children: [jsx(ChainFilter, { name: "All Chains", logoURI: chainDataURL, selected: chain === null, onClick: () => setChain(undefined) }), chains
|
|
13332
13331
|
.filter(({ name }) => search === '' ||
|
|
13333
13332
|
name.toLocaleLowerCase().includes(search.toLocaleLowerCase()))
|
|
13334
13333
|
.map(({ logoURI, name }, index) => (jsx(ChainFilter, { name: name, logoURI: logoURI, selected: chain === name, onClick: () => setChain(name) }, index)))] })] }));
|
|
@@ -13360,7 +13359,7 @@ function DateFilter({ label, placeholder, fromDate, toDate, type, onChange, expa
|
|
|
13360
13359
|
const onDayPickerSelect = (date) => {
|
|
13361
13360
|
if (!date) {
|
|
13362
13361
|
setInputValue('');
|
|
13363
|
-
onChange(
|
|
13362
|
+
onChange(undefined);
|
|
13364
13363
|
}
|
|
13365
13364
|
else {
|
|
13366
13365
|
onChange(date);
|
|
@@ -13376,7 +13375,7 @@ function DateFilter({ label, placeholder, fromDate, toDate, type, onChange, expa
|
|
|
13376
13375
|
setMonth(date);
|
|
13377
13376
|
}
|
|
13378
13377
|
else {
|
|
13379
|
-
onChange(
|
|
13378
|
+
onChange(undefined);
|
|
13380
13379
|
}
|
|
13381
13380
|
};
|
|
13382
13381
|
return (jsxs(Fragment, { children: [jsx(CaptionText, { className: "tw-text-grey-200", children: label }), jsx(Input, { className: "date-input-no-icon", icon: jsx(Calendar, {}), placeholder: placeholder, value: inputValue, onClick: () => setExpanded(true), type: "date", onChange: onInputChange }), jsx(Collapse, { collapsed: !expanded, children: jsx(DayPicker, { weekStartsOn: 1, formatters: {
|
|
@@ -13408,16 +13407,16 @@ function Checkbox({ checked, onChange, children, className }) {
|
|
|
13408
13407
|
}
|
|
13409
13408
|
const chainDataURL = "data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='30' fill='%239E79D2'/%3E%3Cpath d='M13.125 8.90625L13.8295 8.21098C16.0274 6.01301 19.5911 6.01301 21.789 8.21098C23.987 10.4089 23.987 13.9726 21.789 16.1705L21.0938 16.875M8.90625 13.125L8.21097 13.8295C6.01301 16.0274 6.01301 19.5911 8.21098 21.789C10.4089 23.987 13.9726 23.987 16.1705 21.789L16.875 21.0938M13.125 16.875L16.875 13.125' stroke='%23FBFBFD' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'/%3E%3C/svg%3E%0A";
|
|
13410
13409
|
|
|
13411
|
-
function TransactionHeaderLayout({ status, title, image = jsx("span", {}), children, }) {
|
|
13412
|
-
return (jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-
|
|
13410
|
+
function TransactionHeaderLayout({ status, title, image = jsx("span", {}), children, isLoading, }) {
|
|
13411
|
+
return (jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs tw-bg-grey-900 tw-py-squid-l tw-pl-[75px] tw-pr-squid-l", children: [jsxs("div", { className: "tw-flex tw-justify-between", children: [image, status && jsx(TransactionState, { status: status })] }), jsx(LoadingSkeleton, { isLoading: isLoading, children: jsx(HeadingText, { size: "small", className: "tw-text-grey-300", children: title }) }), jsx("div", { children: jsx(LoadingSkeleton, { isLoading: isLoading, children: children }) })] }));
|
|
13413
13412
|
}
|
|
13414
13413
|
|
|
13415
13414
|
function BridgeHeader({ tokenLogoURI, chainLogoURI, title = 'Bridge', hash, url, status, }) {
|
|
13416
|
-
return (jsx(TransactionHeaderLayout, { title: title, status: status, image: jsxs("div", { className: "tw-relative", children: [jsx(ImageIcon, { src: tokenLogoURI, size: "xlarge", variant: "round" }), jsx(ImageIcon, { src: chainLogoURI, className: "tw-absolute -tw-right-squid-xxs tw-bottom-0" })] }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-
|
|
13415
|
+
return (jsx(TransactionHeaderLayout, { title: title, status: status, image: jsxs("div", { className: "tw-relative", children: [jsx(ImageIcon, { src: tokenLogoURI, size: "xlarge", variant: "round" }), jsx(ImageIcon, { src: chainLogoURI, className: "tw-absolute -tw-right-squid-xxs tw-bottom-0" })] }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
|
|
13417
13416
|
}
|
|
13418
13417
|
|
|
13419
13418
|
function BuyNFTHeader({ imageUrl, title = 'Buy NFT', hash, url, status, }) {
|
|
13420
|
-
return (jsx(TransactionHeaderLayout, { title: title, status: status, image: jsx(ImageIcon, { src: imageUrl, size: "xlarge" }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-
|
|
13419
|
+
return (jsx(TransactionHeaderLayout, { title: title, status: status, image: jsx(ImageIcon, { src: imageUrl, size: "xlarge" }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
|
|
13421
13420
|
}
|
|
13422
13421
|
|
|
13423
13422
|
function Approve() {
|
|
@@ -13425,7 +13424,7 @@ function Approve() {
|
|
|
13425
13424
|
}
|
|
13426
13425
|
|
|
13427
13426
|
function InteractionHeader({ title = 'Interaction', image = jsx(Approve, {}), hash, url, status, }) {
|
|
13428
|
-
return (jsx(TransactionHeaderLayout, { title: title, status: status, image: image, children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-
|
|
13427
|
+
return (jsx(TransactionHeaderLayout, { title: title, status: status, image: image, children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
|
|
13429
13428
|
}
|
|
13430
13429
|
|
|
13431
13430
|
function CoinsIcon() {
|
|
@@ -13446,7 +13445,7 @@ function ProfilePicture({ src }) {
|
|
|
13446
13445
|
}
|
|
13447
13446
|
|
|
13448
13447
|
function SwapHeader({ fromToken, toToken, title = 'Swap', hash, url, status, }) {
|
|
13449
|
-
return (jsx(TransactionHeaderLayout, { title: title, status: status, image: jsx(TokenPair, { firstToken: fromToken, secondToken: toToken }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-
|
|
13448
|
+
return (jsx(TransactionHeaderLayout, { title: title, status: status, image: jsx(TokenPair, { firstToken: fromToken, secondToken: toToken }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
|
|
13450
13449
|
}
|
|
13451
13450
|
|
|
13452
13451
|
const headerComponentsMap = {
|
|
@@ -13528,8 +13527,8 @@ function TransactionProperties({ type, props, }) {
|
|
|
13528
13527
|
return jsx(Component, Object.assign({}, props));
|
|
13529
13528
|
}
|
|
13530
13529
|
|
|
13531
|
-
function TransactionSearch({ query, setQuery, children, }) {
|
|
13532
|
-
return (jsx("div", { className:
|
|
13530
|
+
function TransactionSearch({ query, setQuery, children, className, }) {
|
|
13531
|
+
return (jsx("div", { className: cn('tw-relative tw-h-[50px]', className), children: jsxs("div", { className: "tw-l-0 tw-absolute tw-top-0 tw-flex tw-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-hidden tw-rounded-[25px] tw-border-material-light-thin tw-bg-material-dark-thin tw-p-squid-xxs tw-backdrop-blur-2xl dark:tw-bg-material-dark-thick", children: [jsx(Input, { placeholder: "Transaction hash or address", value: query, onChange: (e) => setQuery(e.target.value), actionButtonProps: {
|
|
13533
13532
|
label: 'Paste',
|
|
13534
13533
|
onClick: () => __awaiter$1(this, void 0, void 0, function* () { return setQuery(yield navigator.clipboard.readText()); }),
|
|
13535
13534
|
} }), children && (jsx("div", { className: "tw-max-h-[80vh] tw-overflow-y-auto tw-overflow-x-hidden tw-rounded-[20px]", children: children }))] }) }));
|
|
@@ -13670,9 +13669,9 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
|
|
|
13670
13669
|
const balanceFormatted = useMemo(() => {
|
|
13671
13670
|
return formatAmount(balance !== null && balance !== void 0 ? balance : '0');
|
|
13672
13671
|
}, [balance]);
|
|
13673
|
-
return (jsxs(Fragment, { children: [isInteractive ? (jsxs("form", { className: "tw-relative tw-h-[80.6px] tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] tw-text-heading-small tw-font-heading-regular
|
|
13672
|
+
return (jsxs(Fragment, { children: [isInteractive ? (jsxs("form", { className: "mobile-lg:tw-h-[75px] mobile-lg:tw-px-squid-m tw-relative tw-h-[80.6px] tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] tw-text-heading-small tw-font-heading-regular", onSubmit: (e) => {
|
|
13674
13673
|
e.preventDefault();
|
|
13675
|
-
}, children: [inputMode === InputMode.USD && (jsx("span", { className: "tw-absolute tw-left-[30px] tw-top-[11px] tw-leading-[43px] tw-text-grey-600", children: "$" })), jsx("input", { 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', inputMode === InputMode.USD && 'tw-pl-[33px]') })] })) : (jsx("div", { className: cn('tw-w-full tw-px-squid-xs tw-pb-[15px] tw-pt-[5px]
|
|
13674
|
+
}, children: [inputMode === InputMode.USD && (jsx("span", { className: "tw-absolute tw-left-[30px] tw-top-[11px] tw-leading-[43px] tw-text-grey-600", children: "$" })), jsx("input", { 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', inputMode === InputMode.USD && 'tw-pl-[33px]') })] })) : (jsx("div", { className: cn('mobile-lg:tw-px-squid-m tw-w-full tw-px-squid-xs tw-pb-[15px] tw-pt-[5px]', isLoading && 'tw-opacity-50'), children: jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsx("span", { children: inputValue }) }) })), !showDetails ? null : (jsxs("footer", { className: cn('mobile-lg:tw-px-squid-m 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', isLoading && 'tw-opacity-50'), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsxs(AmountChip, { onClick: isInteractive ? handleSwitchInputMode : undefined, className: cn(buttonClassName, isInteractive && interactiveChipClassName), children: [jsx(SwapInputsIcon, {}), inputMode === InputMode.TOKEN ? (jsx(Fragment, { children: jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsx(CaptionText, { children: isUsdAmountVerySmall
|
|
13676
13675
|
? formatIfVerySmall.token
|
|
13677
13676
|
: amountFormatted })] }) })) : (jsxs("span", { className: "tw-text-grey-500", children: [isTokenAmountVerySmall ? '<' : '', jsx(CaptionText, { children: isTokenAmountVerySmall
|
|
13678
13677
|
? formatIfVerySmall.token
|
|
@@ -13802,9 +13801,9 @@ function Tooltip({ children, tooltipContent, tooltipWidth = 'container', thresho
|
|
|
13802
13801
|
}
|
|
13803
13802
|
|
|
13804
13803
|
function BoostButton({ boostMode, canToggleBoostMode = true, boostDisabledMessage = 'Boost disabled', tooltipDisplayDelayMs = 0, boostIndicatorRef, }) {
|
|
13805
|
-
return (jsx(Tooltip, { tooltipWidth: "max", displayDelayMs: tooltipDisplayDelayMs, containerClassName: "tw-pr-squid-xxs
|
|
13804
|
+
return (jsx(Tooltip, { tooltipWidth: "max", displayDelayMs: tooltipDisplayDelayMs, containerClassName: "tw-pr-squid-xxs mobile-lg:tw-w-[140px] tw-w-[106.5px]", tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxs("div", { className: "tw-relative tw-flex tw-h-squid-xl tw-w-full tw-flex-col tw-justify-between tw-overflow-hidden tw-rounded-squid-m tw-pb-squid-xxs tw-text-grey-300 focus:tw-outline-none", children: [jsx("span", { className: cn('tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent', canToggleBoostMode &&
|
|
13806
13805
|
'group-hover/boost-toggle:tw-from-material-light-blend-grey-900') }), jsx("span", { className: cn('tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent', canToggleBoostMode &&
|
|
13807
|
-
'group-hover/boost-toggle:tw-from-material-light-blend-grey-900') }), jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-relative -tw-left-[20px] tw-flex tw-h-full tw-w-[140px] tw-items-center tw-justify-between tw-transition-transform group-disabled/boost-toggle:tw-grayscale data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce
|
|
13806
|
+
'group-hover/boost-toggle:tw-from-material-light-blend-grey-900') }), jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "mobile-lg:-tw-left-[3px] tw-group tw-peer tw-relative -tw-left-[20px] tw-flex tw-h-full tw-w-[140px] tw-items-center tw-justify-between tw-transition-transform group-disabled/boost-toggle:tw-grayscale data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce", children: [jsx("div", { className: "tw-w-[70px] tw-text-center group-disabled/boost-toggle:tw-grayscale", children: jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxs("div", { className: "tw-w-[70px] tw-text-center group-disabled/boost-toggle:tw-grayscale", children: [jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
|
|
13808
13807
|
boxShadow: generateMarkerLines(40),
|
|
13809
13808
|
} })] }), jsx("div", { className: cn('tw-absolute tw-bottom-0.5 tw-left-[calc(50%-2px)] tw-z-20 tw-h-[10px] tw-w-[3px] tw-rounded-sm tw-transition-colors group-disabled/boost-toggle:tw-grayscale peer-data-[boost-mode=boost]:tw-bg-status-positive peer-data-[boost-mode=normal]:tw-bg-current'), style: {
|
|
13810
13809
|
transitionDuration: `${ANIMATION_DURATIONS.BOOST_BUTTON}ms`,
|
|
@@ -13826,10 +13825,10 @@ function FilterIcon() {
|
|
|
13826
13825
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "16", fill: "none", viewBox: "0 0 20 16", children: jsx("path", { fill: "currentColor", fillOpacity: "0.66", fillRule: "evenodd", d: "M0 1a1 1 0 011-1h18a1 1 0 110 2H1a1 1 0 01-1-1zm3 7a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3 7a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z", clipRule: "evenodd" }) }));
|
|
13827
13826
|
}
|
|
13828
13827
|
|
|
13829
|
-
function FilterButton({ selected, numApplied = 0 }) {
|
|
13828
|
+
function FilterButton({ selected, numApplied = 0, onClick, }) {
|
|
13830
13829
|
return (jsxs("div", { className: "tw-relative", children: [jsx(Button$1, { variant: "tertiary", size: "md", className: cn(selected
|
|
13831
13830
|
? '!tw-bg-grey-500 !tw-text-grey-800'
|
|
13832
|
-
: '!tw-border-transparent !tw-bg-grey-800 !tw-text-grey-500'), children: jsx(FilterIcon, {}) }), numApplied > 0 && (jsx("div", { className: "tw-absolute tw-right-0 tw-top-0 tw-h-squid-m tw-w-squid-xl -tw-translate-y-1/2 tw-translate-x-1/2 tw-rounded-full tw-bg-[#E4FE53] tw-text-center tw-leading-[1] tw-text-grey-200 dark:tw-text-grey-900", children: jsx(CaptionText, { children: numApplied }) }))] }));
|
|
13831
|
+
: '!tw-border-transparent !tw-bg-grey-800 !tw-text-grey-500'), onClick: onClick, children: jsx(FilterIcon, {}) }), numApplied > 0 && (jsx("div", { className: "tw-absolute tw-right-0 tw-top-0 tw-h-squid-m tw-w-squid-xl -tw-translate-y-1/2 tw-translate-x-1/2 tw-rounded-full tw-bg-[#E4FE53] tw-text-center tw-leading-[1] tw-text-grey-200 dark:tw-text-grey-900", children: jsx(CaptionText, { children: numApplied }) }))] }));
|
|
13833
13832
|
}
|
|
13834
13833
|
|
|
13835
13834
|
function SettingsButton({ label, isSelected = false, onClick, }) {
|
|
@@ -13851,11 +13850,11 @@ function SparkleIcon() {
|
|
|
13851
13850
|
}
|
|
13852
13851
|
|
|
13853
13852
|
function AssetsView({ chains, favoriteTokens, popularTokens, userTokens, }) {
|
|
13854
|
-
return (jsxs(ProductCard, { children: [jsx(NavigationBar, { displayBackButton: true }), jsx("div", { className: "tw-max-h-[60px] tw-px-squid-m tw-py-squid-xs", children: jsx(Input, {}) }), jsx(BorderedContainer, { children: jsxs("div", { className: "
|
|
13853
|
+
return (jsxs(ProductCard, { children: [jsx(NavigationBar, { displayBackButton: true }), jsx("div", { className: "tw-max-h-[60px] tw-px-squid-m tw-py-squid-xs", children: jsx(Input, {}) }), jsx(BorderedContainer, { children: jsxs("div", { className: "mobile-lg:tw-grid-cols-[180px_1fr_299px] tw-grid tw-grid-cols-[70px_1fr_323px]", children: [jsxs("div", { style: {
|
|
13855
13854
|
scrollbarWidth: 'none',
|
|
13856
|
-
}, className: "tw-flex tw-max-h-[540px] tw-w-[70px] tw-max-w-[70px] tw-flex-col tw-gap-squid-xxs tw-overflow-y-auto tw-overflow-x-hidden tw-pt-squid-xs
|
|
13855
|
+
}, className: "mobile-lg:tw-w-[180px] mobile-lg:tw-max-w-[180px] mobile-lg:tw-pt-0 tw-flex tw-max-h-[540px] tw-w-[70px] tw-max-w-[70px] tw-flex-col tw-gap-squid-xxs tw-overflow-y-auto tw-overflow-x-hidden tw-pt-squid-xs", children: [jsx(SectionTitle, { title: "Chains", icon: jsx(ChainLink, {}), className: "mobile-lg:tw-flex tw-hidden" }), jsxs(List, { children: [jsx(ListItem, { size: "small", mainIcon: jsx("span", { className: "tw-flex tw-h-squid-l tw-w-squid-l tw-flex-1 tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-royal-500 tw-text-[#FBFBFD]", children: jsx(ChainLink, { size: "24" }) }), itemTitle: "All Chains", compactOnMobile: true, onClick: () => { } }), chains.map((item) => (jsx(ListItem, { size: "small", mainImageUrl: item.iconUrl, itemTitle: item.name, detail: item.name, compactOnMobile: true, onClick: () => { } }, item.name)))] })] }), jsxs("div", { style: {
|
|
13857
13856
|
scrollbarWidth: 'none',
|
|
13858
|
-
}, className: "tw-flex tw-max-h-[540px] tw-w-[323px] tw-max-w-[323px] tw-flex-col tw-gap-squid-xxs tw-overflow-y-auto tw-overflow-x-hidden
|
|
13857
|
+
}, className: "mobile-lg:tw-w-[299px] mobile-lg:tw-max-w-[299px] tw-flex tw-max-h-[540px] tw-w-[323px] tw-max-w-[323px] tw-flex-col tw-gap-squid-xxs tw-overflow-y-auto tw-overflow-x-hidden", children: [jsx(SectionTitle, { title: "Favorite tokens", icon: jsx(HeartSmallIcon, {}) }), jsx(List, { children: favoriteTokens.map((favToken) => (jsx(ListItem, { size: "large", mainImageUrl: favToken.iconUrl, secondaryImageUrl: favToken.iconUrl, itemTitle: favToken.name, subtitle: favToken.symbol, icon: jsx(BrokenHeartIcon, { className: "tw-text-status-negative" }), showDetailOnHoverOnly: true, rounded: true, onClick: () => { } }, favToken.name))) }), jsx(SectionTitle, { title: "Your tokens loading", icon: jsx(CoinsIcon, {}) }), jsx(List, { children: userTokens.map((userToken) => (jsx(ListItem, { size: "large", mainImageUrl: userToken.iconUrl, secondaryImageUrl: userToken.iconUrl, itemTitle: userToken.name, subtitle: `${userToken.balance} ${userToken.symbol}`, icon: jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), showDetailOnHoverOnly: true, rounded: true, onClick: () => { }, loading: { subtitle: userToken.symbol } }, userToken.name))) }), jsx(SectionTitle, { title: "Your tokens & balance", icon: jsx(CoinsIcon, {}) }), jsx(List, { children: userTokens.map((userToken) => (jsx(ListItem, { size: "large", mainImageUrl: userToken.iconUrl, secondaryImageUrl: userToken.iconUrl, itemTitle: userToken.name, subtitle: `${userToken.balance} ${userToken.symbol}`, icon: jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), showDetailOnHoverOnly: true, rounded: true, onClick: () => { } }, userToken.name))) }), jsx(SectionTitle, { title: "Popular tokens", icon: jsx(SparkleIcon, {}) }), jsx(List, { children: popularTokens.map((popToken) => (jsx(ListItem, { size: "large", mainImageUrl: popToken.iconUrl, secondaryImageUrl: popToken.iconUrl, itemTitle: popToken.name, subtitle: popToken.symbol, icon: jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), showDetailOnHoverOnly: true, rounded: true, onClick: () => { } }, popToken.name))) })] })] }) })] }));
|
|
13859
13858
|
}
|
|
13860
13859
|
const List = ({ children }) => {
|
|
13861
13860
|
return (jsx("ul", { className: "tw-flex tw-flex-col tw-gap-squid-xxs tw-pb-squid-xs", children: children }));
|
|
@@ -13901,7 +13900,7 @@ function BankIcon() {
|
|
|
13901
13900
|
function RecipientView({ type }) {
|
|
13902
13901
|
return (jsxs(ProductCard, { children: [jsx(NavigationBar, { title: type === 'paymentMethod' ? 'Pay' : 'Receive', displayBackButton: true }), jsx(BorderedContainer, { children: jsx(FlexContainer, { children: type === 'paymentMethod' || type === 'recipientEmpty' ? (jsxs(Fragment, { children: [jsx(SectionTitle, { title: "Your wallet", icon: jsx(PunkIcon, {}) }), jsx(ListItem, { itemTitle: "so-so.eth", subtitle: "0x2276\u2026F3c56", mainImageUrl: "/assets/images/avatar.png", size: "large", className: "tw-w-full tw-max-w-none", onClick: () => { }, detail: "Connected" }), jsx("div", { className: "tw-flex tw-w-full tw-items-center tw-justify-center tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", children: jsx(Button$1, { size: "md", variant: "primary", label: "Change wallet", className: "tw-w-full" }) })] })) : type === 'recipientTypingEns' ? (jsxs(Fragment, { children: [jsx(SearchAddress, { type: type }), jsx(ListItem, { itemTitle: "souljabags.eth", subtitle: "0x25c9\u202623d5", mainImageUrl: "/assets/images/punks.png", size: "large", className: "tw-w-full tw-max-w-none", onClick: () => { } }), jsx(ListItem, { itemTitle: "souljaboy.eth", subtitle: "0x0ec8\u202604c1", mainIcon: jsx("div", { className: "tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-royal-500 tw-text-grey-100", children: jsx(PunkIcon, { size: "30" }) }), size: "large", className: "tw-w-full tw-max-w-none", onClick: () => { } })] })) : type === 'recipientTypingAddress' ? (jsx(SearchAddress, { type: type })) : null }) }), type === 'paymentMethod' ? (jsx(BorderedContainer, { className: "tw-flex-1 tw-pt-squid-xs", children: jsxs(FlexContainer, { children: [jsx(SectionTitle, { title: 'Centralized Exchange', icon: type === 'paymentMethod' ? jsx(BankIcon, {}) : jsx(WalletIcon, {}) }), jsx(DepositSection, {})] }) })) : type === 'recipientEmpty' ? (jsx(BorderedContainer, { className: "tw-flex-1 tw-pt-squid-xs", children: jsxs(FlexContainer, { children: [jsx(SearchAddress, { type: type }), jsx("div", { className: "tw-flex tw-h-full tw-w-full tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-self-stretch tw-px-squid-xxl tw-py-squid-xl", children: jsx(CaptionText, { className: "tw-max-w-[200px] tw-text-center tw-text-grey-500", children: "Wallets you add and swap to will appear here" }) })] }) })) : type === 'recipientTypingEns' || type === 'recipientTypingAddress' ? (jsx("div", {})) : null, ' '] }));
|
|
13903
13902
|
}
|
|
13904
|
-
const FlexContainer = ({ children }) => (jsx("div", { className: "tw-flex tw-h-full tw-flex-1 tw-flex-col tw-items-center tw-gap-squid-xxs tw-px-0
|
|
13903
|
+
const FlexContainer = ({ children }) => (jsx("div", { className: "mobile-lg:tw-px-squid-xs tw-flex tw-h-full tw-flex-1 tw-flex-col tw-items-center tw-gap-squid-xxs tw-px-0", children: children }));
|
|
13905
13904
|
const DepositSection = () => {
|
|
13906
13905
|
return (jsxs(Fragment, { children: [jsx(ListItem, { itemTitle: "Deposit", mainIcon: jsx("div", { className: "tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-royal-500 tw-text-grey-100", children: jsx(CoinsAddIcon, {}) }), className: "tw-w-full tw-max-w-none", onClick: () => { } }), jsx(CaptionText, { className: "tw-px-squid-m tw-py-squid-xxs tw-text-grey-500", children: "In case of swapping from a centralized exchange, you can send your tokens to a temporary deposit account that will handle the swap instead." }), jsx("div", { className: "tw-flex tw-w-full tw-items-center tw-justify-center tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", children: jsx(Button$1, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-w-full" }) })] }));
|
|
13907
13906
|
};
|
|
@@ -13926,13 +13925,11 @@ function LightningIcon({ size = '24', className = '', }) {
|
|
|
13926
13925
|
|
|
13927
13926
|
function SwapDetailsView({ isLoading }) {
|
|
13928
13927
|
const [isModalOpen, setIsModalOpen] = useState(true);
|
|
13929
|
-
return (
|
|
13930
|
-
|
|
13931
|
-
|
|
13932
|
-
|
|
13933
|
-
|
|
13934
|
-
setIsModalOpen(false);
|
|
13935
|
-
} })] })] }));
|
|
13928
|
+
return (jsx(Fragment, { children: jsxs(Modal, { isOpen: isModalOpen, onBackdropClick: () => {
|
|
13929
|
+
setIsModalOpen(false);
|
|
13930
|
+
}, children: [jsxs(ModalContent, { children: [jsx(Settings, {}), jsxs("ul", { className: "tw-flex tw-flex-col tw-items-start tw-gap-squid-xxs tw-self-stretch tw-py-squid-xs", children: [jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ClockOutlineIcon, {}), label: "Estimated time to complete", detail: "~20s" }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ArrowBottomTopIcon, {}), label: "Exchange rate", detail: "1 ETH = 4,031.05 USDC" }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ArrowWallDownIcon, {}), label: "Receive minimum", detail: "750.5 USDC" }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(GasIcon, {}), label: "Cross-chain gas fees", detail: jsxs(Fragment, { children: [jsx(CaptionText, { children: "0.02534 ETH" }), jsx(CaptionText, { className: "tw-text-grey-500", children: "$9.92" })] }) }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ReorderIcon, {}), label: "Expected gas refund", detail: jsxs(Fragment, { children: [jsx(CaptionText, { children: "-0.06336 ETH" }), jsx(CaptionText, { className: "tw-text-grey-500", children: "-$2.48" })] }) }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ReceiptBillIcon, {}), label: "Total fee", detail: jsxs(Fragment, { children: [jsx(CaptionText, { children: "0.0177 ETH" }), jsx(CaptionText, { className: "tw-text-grey-500", children: "$7.43" })] }) })] }), jsx(InfoBox, { icon: jsx(SnapIcon, {}), title: "Squid\u2019s price commitment", description: "In case of market price fluctuating significantly, your transaction may revert and you will receive axlUSDC on the destination chain instead." })] }), jsx(Button$1, { size: "lg", variant: "secondary", label: "Close", onClick: () => {
|
|
13931
|
+
setIsModalOpen(false);
|
|
13932
|
+
} })] }) }));
|
|
13936
13933
|
}
|
|
13937
13934
|
function Settings() {
|
|
13938
13935
|
return (jsx("div", { className: "tw-flex tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs tw-self-stretch tw-py-squid-xxs", children: jsx(SettingsItem, { icon: jsx(LightningIcon, { className: "tw-text-grey-500" }), label: "Boost", control: {
|
|
@@ -49078,13 +49075,15 @@ function TransactionViewLayout(_a) {
|
|
|
49078
49075
|
return (jsxs("div", Object.assign({ className: "tw-divide-y tw-divide-material-light-thin" }, props, { children: [header, properties, jsx(CollapsingSection, { collapsed: actionsCollapsed, setCollapsed: setActionsCollapsed, children: linkActionTimelineProps(actions, actionsCollapsed).map((props, i) => (jsx("div", { className: cn(i > 0 && 'tw-border-t tw-border-t-material-light-thin'), children: jsx(TransactionAction, Object.assign({}, props)) }, i))) }), jsxs(CollapsingSection, { collapsed: feesCollapsed, setCollapsed: setFeesCollapsed, children: [jsx(FeesTotal, Object.assign({ collapsed: feesCollapsed, showTimeline: true }, fees)), jsx(FeesLines, Object.assign({}, fees))] })] })));
|
|
49079
49076
|
}
|
|
49080
49077
|
function CollapsingSection({ children, collapsed, setCollapsed, collapsedHeight = 50, }) {
|
|
49081
|
-
return (jsx("div", { className: cn('tw-relative', collapsed ? 'tw-cursor-pointer' : ''), onClick: () => {
|
|
49078
|
+
return (jsx("div", { className: cn('tw-group/collapsing-section tw-relative tw-bg-grey-900', collapsed ? 'tw-cursor-pointer' : ''), onClick: () => {
|
|
49082
49079
|
if (collapsed)
|
|
49083
49080
|
setCollapsed(false);
|
|
49084
49081
|
}, children: jsxs("div", { className: cn('tw-relative tw-border-material-light-thin tw-transition-[border-width] tw-duration-200', !collapsed && 'tw-border-y-[4px]'), children: [jsx("div", { className: "cursor-pointer tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-flex tw-h-full tw-cursor-pointer tw-items-center tw-pr-squid-m", style: { height: `${collapsedHeight}px` }, onClick: () => {
|
|
49085
49082
|
if (!collapsed)
|
|
49086
49083
|
setCollapsed(true);
|
|
49087
|
-
}, children: jsx(ChevronLargeDownIcon, { className: cn('tw-origin-center tw-text-grey-300 tw-transition-transform tw-duration-200', collapsed && '-tw-rotate-90') }) }), jsx(
|
|
49084
|
+
}, children: jsx(ChevronLargeDownIcon, { className: cn('tw-origin-center tw-text-grey-300 tw-transition-transform tw-duration-200', collapsed && '-tw-rotate-90') }) }), jsx("div", {
|
|
49085
|
+
// hover highlight
|
|
49086
|
+
className: "tw-pointer-events-none tw-absolute tw-left-0 tw-top-0 tw-h-[50px] tw-w-full", children: jsx("div", { className: cn('tw-absolute tw-bottom-squid-xxs tw-left-squid-xs tw-right-squid-xs tw-top-squid-xxs tw-rounded-squid-xs tw-bg-material-light-thin tw-opacity-0 tw-transition-opacity tw-duration-200', collapsed && 'group-hover/collapsing-section:tw-opacity-100') }) }), jsx(Collapse, { collapsed: collapsed, collapsedHeight: collapsedHeight, children: children })] }) }));
|
|
49088
49087
|
}
|
|
49089
49088
|
|
|
49090
49089
|
function BridgeTransactionView({ title, hash, status, url, amount, token, fromChain, toChain, address, actions, fees, boosted, timeToComplete, }) {
|
|
@@ -49300,7 +49299,7 @@ function blendColors(foreground, background) {
|
|
|
49300
49299
|
|
|
49301
49300
|
function SquidConfigProvider({ theme = lightTheme, children, themeType = 'light', }) {
|
|
49302
49301
|
const parsedStyle = parseSquidTheme(theme);
|
|
49303
|
-
return (jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: "tw-group tw-relative tw-font-geist", children: children }));
|
|
49302
|
+
return (jsx("div", { style: Object.assign(Object.assign({}, parsedStyle), { justifyContent: 'center', alignItems: 'center', display: 'flex' }), "data-squid-theme-type": themeType, className: "mobile-lg:tw-h-auto tw-group tw-relative tw-h-screen tw-font-geist", children: children }));
|
|
49304
49303
|
}
|
|
49305
49304
|
|
|
49306
|
-
export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, ApproveAction, ArrowButton, AssetsButton, AssetsView, BadgeImage, BodyText, Boost, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CaptionText, Chip, Collapse, DescriptionBlocks, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, ExploreLayout, FeeButton, FeesAction, FeesLines, FeesTotal, FilterButton, HashLink, HeadingText, HistoryItem, IconLabel, ImageIcon, IncompleteAction, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, List, ListItem, LoadingProvider, LoadingSkeleton, MainView, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, ReceiveNFTAction, ReceiveTokensAction, RecipientView, STEP_ITEM_HEIGHT, SectionTitle, SendTokensAction, SettingsButton, SettingsItem, SettingsSlider, SizeTransition, SquidConfigProvider, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapDetailsView, SwapHeader, SwapProgressView, SwapProgressViewHeader, SwapProperties, SwapStepItem, SwapStepsCollapsed, SwapTransactionView, Switch, Timestamp, TokenPair, Tooltip, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, UsdAmount, WalletLink, WalletsView, WrapAction, linkActionTimelineProps, statusBgClassMap$1 as statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu };
|
|
49305
|
+
export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, ApproveAction, ArrowButton, AssetsButton, AssetsView, BadgeImage, BodyText, Boost, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CaptionText, Chip, Collapse, DescriptionBlocks, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, ExploreLayout, ExploreNav, FeeButton, FeesAction, FeesLines, FeesTotal, FilterButton, HashLink, HeadingText, HistoryItem, IconLabel, ImageIcon, IncompleteAction, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, List, ListItem, LoadingProvider, LoadingSkeleton, MainView, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, ReceiveNFTAction, ReceiveTokensAction, RecipientView, STEP_ITEM_HEIGHT, SectionTitle, SendTokensAction, SettingsButton, SettingsItem, SettingsSlider, SizeTransition, SquidConfigProvider, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapDetailsView, SwapHeader, SwapProgressView, SwapProgressViewHeader, SwapProperties, SwapStepItem, SwapStepsCollapsed, SwapTransactionView, Switch, Timestamp, TokenPair, Tooltip, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, UsdAmount, WalletLink, WalletsView, WrapAction, linkActionTimelineProps, statusBgClassMap$1 as statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu };
|