@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/cjs/index.js
CHANGED
|
@@ -2601,6 +2601,12 @@ const formatRelativeDate = (timestampSeconds) => {
|
|
|
2601
2601
|
function truncateHash(hash) {
|
|
2602
2602
|
return `${hash.slice(0, 8)}...${hash.slice(-6)}`;
|
|
2603
2603
|
}
|
|
2604
|
+
const styled = (tag, className) => {
|
|
2605
|
+
const Component = React.forwardRef((props, ref) => React.createElement(tag, mergeProps({ ref, className }, props)));
|
|
2606
|
+
Component.displayName = `styled ${tag}`;
|
|
2607
|
+
return Component;
|
|
2608
|
+
};
|
|
2609
|
+
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) }));
|
|
2604
2610
|
|
|
2605
2611
|
const badgeSizeClassMap = {
|
|
2606
2612
|
sm: 'tw-w-4 tw-h-4',
|
|
@@ -2740,9 +2746,9 @@ const LoadingProvider = LoadingContext.Provider;
|
|
|
2740
2746
|
function LoadingSkeleton({ className, height = '20', isLoading: isLoadingProp, children, width = '100', }) {
|
|
2741
2747
|
const contextValue = React.useContext(LoadingContext);
|
|
2742
2748
|
const isLoading = isLoadingProp !== undefined ? isLoadingProp : contextValue;
|
|
2743
|
-
if (
|
|
2749
|
+
if (children && !isLoading)
|
|
2744
2750
|
return children;
|
|
2745
|
-
return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_1246_29063)", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1246_29063)" }) }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.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: [jsxRuntime.jsx("stop", { stopColor: "currentColor" }), jsxRuntime.jsx("stop", { offset: "0.395881", stopColor: "currentColor" }), jsxRuntime.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" }), jsxRuntime.jsx("stop", { offset: "0.697004", stopColor: "currentColor" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_1246_29063", children: jsxRuntime.jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] })
|
|
2751
|
+
return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_1246_29063)", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1246_29063)" }) }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.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: [jsxRuntime.jsx("stop", { stopColor: "currentColor" }), jsxRuntime.jsx("stop", { offset: "0.395881", stopColor: "currentColor" }), jsxRuntime.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" }), jsxRuntime.jsx("stop", { offset: "0.697004", stopColor: "currentColor" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_1246_29063", children: jsxRuntime.jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] })] }));
|
|
2746
2752
|
}
|
|
2747
2753
|
|
|
2748
2754
|
function Checkmark1Icon() {
|
|
@@ -2822,7 +2828,7 @@ const statusTextMap = {
|
|
|
2822
2828
|
};
|
|
2823
2829
|
const variantClassMap = {
|
|
2824
2830
|
full: 'tw-h-squid-l tw-min-w-squid-xxl tw-pl-squid-xxs tw-pr-squid-xs',
|
|
2825
|
-
compact: 'tw-h-squid-m tw-w-squid-m
|
|
2831
|
+
compact: 'tw-h-squid-m tw-w-squid-m mobile-lg:tw-w-squid-xl mobile-lg:tw-px-squid-xxs',
|
|
2826
2832
|
};
|
|
2827
2833
|
function renderIcon(status, variant) {
|
|
2828
2834
|
switch (status) {
|
|
@@ -2915,7 +2921,7 @@ function Copy(_a) {
|
|
|
2915
2921
|
}
|
|
2916
2922
|
|
|
2917
2923
|
function HashLink({ showTx = false, hash, showCopyButton = false, url, children, }) {
|
|
2918
|
-
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [showTx && jsxRuntime.jsx("span", { className: "tw-text-grey-700", children: "TX" }), jsxRuntime.
|
|
2924
|
+
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [showTx && jsxRuntime.jsx("span", { className: "tw-mr-squid-xs tw-text-grey-700", children: "TX" }), children !== null && children !== void 0 ? children : truncateHash(hash), url && (jsxRuntime.jsx("a", { href: url, target: "_blank", className: 'tw-rounded-squid-s tw-px-squid-xxs hover:tw-bg-material-light-thin', children: jsxRuntime.jsx(SquareArrowTopRight2Icon, { strokeWidth: "1.5", className: "tw-h-[1.2em] tw-w-[1.2em] tw-text-royal-500" }) })), showCopyButton && (jsxRuntime.jsx("span", { className: "tw-rounded-squid-s tw-px-squid-xxs hover:tw-bg-material-light-thin", children: jsxRuntime.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) }) }))] }));
|
|
2919
2925
|
}
|
|
2920
2926
|
|
|
2921
2927
|
function WalletLink({ imageURI, address }) {
|
|
@@ -6710,7 +6716,7 @@ function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessa
|
|
|
6710
6716
|
onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
|
|
6711
6717
|
}
|
|
6712
6718
|
}
|
|
6713
|
-
return (jsxRuntime.jsx("div", { className: "tw-w-[
|
|
6719
|
+
return (jsxRuntime.jsx("div", { className: "mobile-lg:tw-w-[190px] tw-w-[157px]", children: jsxRuntime.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: [jsxRuntime.jsx(BoostButton, { boostIndicatorRef: boostIndicatorRef, boostMode: boostMode, boostDisabledMessage: boostDisabledMessage, canToggleBoostMode: canToggleBoostMode, tooltipDisplayDelayMs: boostTooltipDisplayDelayMs }), jsxRuntime.jsx(Chip, { label: estimatedTime, className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' || !canToggleBoostMode
|
|
6714
6720
|
? 'tw-bg-grey-300'
|
|
6715
6721
|
: 'tw-bg-status-positive') })] }) }));
|
|
6716
6722
|
}
|
|
@@ -6733,9 +6739,10 @@ function useOnResize(ref, callback) {
|
|
|
6733
6739
|
const observer = new ResizeObserver(([entry]) => {
|
|
6734
6740
|
if (!entry)
|
|
6735
6741
|
return;
|
|
6736
|
-
|
|
6742
|
+
callbackRef.current(entry.contentRect);
|
|
6737
6743
|
});
|
|
6738
6744
|
observer.observe(ref.current);
|
|
6745
|
+
callbackRef.current(ref.current.getBoundingClientRect());
|
|
6739
6746
|
return () => observer.disconnect();
|
|
6740
6747
|
}, [ref.current]);
|
|
6741
6748
|
}
|
|
@@ -6762,7 +6769,7 @@ function Collapse(_a) {
|
|
|
6762
6769
|
const containerRef = React.useRef(null);
|
|
6763
6770
|
const contentsRef = React.useRef(null);
|
|
6764
6771
|
const contentsRect = useRect(contentsRef);
|
|
6765
|
-
const expandedHeight = contentsRect.height;
|
|
6772
|
+
const expandedHeight = Math.max(contentsRect.height, collapsedHeight);
|
|
6766
6773
|
return (jsxRuntime.jsx("div", Object.assign({ ref: containerRef, style: {
|
|
6767
6774
|
[expandednessVar]: collapsed ? 0 : 1,
|
|
6768
6775
|
transition: `${expandednessVar} ${duration}ms ${ANIMATION_TIMINGS.SHOW_ROUTE}`,
|
|
@@ -6856,10 +6863,10 @@ function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode,
|
|
|
6856
6863
|
return 'empty';
|
|
6857
6864
|
return 'full';
|
|
6858
6865
|
}, [errorMessage, isLoading, isEmpty]);
|
|
6859
|
-
const detailClassName = cn('tw-w-[157px]
|
|
6860
|
-
return (jsxRuntime.jsx("aside", { className: cn('
|
|
6861
|
-
? 'tw-px-squid-
|
|
6862
|
-
: 'tw-px-squid-
|
|
6866
|
+
const detailClassName = cn('tw-w-[157px] mobile-lg:tw-w-[190px]', detailStateClassMap[state]);
|
|
6867
|
+
return (jsxRuntime.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'
|
|
6868
|
+
? 'mobile-lg:tw-px-squid-l tw-px-squid-m'
|
|
6869
|
+
: 'mobile-lg:tw-px-squid-m tw-px-squid-xs'), children: state === 'error' && errorMessage ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsxRuntime.jsx(Button$1, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsxRuntime.jsx(Loader, { size: "32" })) : (jsxRuntime.jsx(Tooltip, { tooltipContent: (flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled)
|
|
6863
6870
|
? flipButton.disabledMessage
|
|
6864
6871
|
: undefined, tooltipWidth: "max", displayDelayMs: flipButton === null || flipButton === void 0 ? void 0 : flipButton.tooltipDisplayDelayMs, children: jsxRuntime.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: jsxRuntime.jsx(ChevronLargeDownIcon, { className: cn('tw-transition-transform tw-duration-150', !(flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled) &&
|
|
6865
6872
|
'group-hover/flip-button:tw-rotate-180') }) }) })) }), jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
|
|
@@ -7009,7 +7016,7 @@ const collapsedListItemClassMap = {
|
|
|
7009
7016
|
};
|
|
7010
7017
|
function ListItem(_a) {
|
|
7011
7018
|
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"]);
|
|
7012
|
-
const subtitleClassName = cn('tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500', compactOnMobile ? 'tw-hidden
|
|
7019
|
+
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');
|
|
7013
7020
|
// 'small' variant does not have detail
|
|
7014
7021
|
const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
|
|
7015
7022
|
const isDetailInteractive = !!onDetailClick;
|
|
@@ -7040,10 +7047,10 @@ function ListItem(_a) {
|
|
|
7040
7047
|
const ItemTag = isInteractive ? 'button' : 'div';
|
|
7041
7048
|
const itemProps = isInteractive ? props : {};
|
|
7042
7049
|
return (jsxRuntime.jsx("li", Object.assign({}, containerProps, { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], compactOnMobile
|
|
7043
|
-
? `${collapsedListItemClassMap[size]}
|
|
7050
|
+
? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
|
|
7044
7051
|
: 'tw-w-full', className), children: jsxRuntime.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' ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.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',
|
|
7045
7052
|
// 'large' variant has extra padding
|
|
7046
|
-
size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsxRuntime.jsx(BodyText, { size: "small", className: cn('tw-max-w-full tw-truncate', subtitle && 'tw-h-[17px] !tw-leading-[17px]', compactOnMobile ? 'tw-
|
|
7053
|
+
size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsxRuntime.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' &&
|
|
7047
7054
|
((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (loadingComponent()) : subtitle ? (jsxRuntime.jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsxRuntime.jsx(CaptionText, { className: cn(subtitleClassName, 'tw-hidden group-hover/list-item:tw-block'), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxRuntime.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
|
|
7048
7055
|
? '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'
|
|
7049
7056
|
: 'tw-flex', isDetailInteractive && 'hover:tw-bg-material-light-thin', detailButtonClassName), children: [!!detail && (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] })))] })) })));
|
|
@@ -7158,7 +7165,7 @@ function SwapStepItem({ descriptionBlocks, showStepSeparator = false, link, stat
|
|
|
7158
7165
|
return (jsxRuntime.jsx("li", { style: {
|
|
7159
7166
|
maxHeight: `${STEP_ITEM_HEIGHT}px`,
|
|
7160
7167
|
minHeight: `${STEP_ITEM_HEIGHT}px`,
|
|
7161
|
-
}, className: "tw-w-list-item-
|
|
7168
|
+
}, 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: jsxRuntime.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: [jsxRuntime.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: [jsxRuntime.jsx(Chip, { style: transitionStyle, className: cn('tw-w-squid-xl', statusBgClassMap[status]), icon: chipContent }), showStepSeparator && (jsxRuntime.jsx("span", { className: cn(separatorClassMap[status], 'tw-absolute tw-left-0 tw-top-full tw-mt-0.5'), style: transitionStyle, children: jsxRuntime.jsx(SwapStepSeparator, {}) }))] }), jsxRuntime.jsx(DescriptionBlocks, { className: "tw-min-h-squid-l tw-py-squid-xxs tw-pr-squid-xs", blocks: descriptionBlocks })] }) }));
|
|
7162
7169
|
}
|
|
7163
7170
|
|
|
7164
7171
|
function PipeSeparator(_a) {
|
|
@@ -7229,7 +7236,7 @@ function ActionRow(_a) {
|
|
|
7229
7236
|
return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-grid tw-grid-cols-[40px,1fr,60px] tw-gap-squid-xs tw-pl-squid-m', className) })));
|
|
7230
7237
|
}
|
|
7231
7238
|
function ActionWrapper({ children, status, className, }) {
|
|
7232
|
-
return (jsxRuntime.jsx("div", { className: cn('tw-relative tw-flex tw-flex-col tw-gap-squid-xxs', status === 'waiting'
|
|
7239
|
+
return (jsxRuntime.jsx("div", { className: cn('tw-relative tw-flex tw-flex-col tw-gap-squid-xxs', status === 'waiting' && 'tw-bg-grey-800', className), children: children }));
|
|
7233
7240
|
}
|
|
7234
7241
|
function Timestamp({ time }) {
|
|
7235
7242
|
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-text-grey-500", children: [formatRelativeDate(time), jsxRuntime.jsx("span", { className: "tw-text-grey-700", children: "\u2022" }), formatTime(time)] }));
|
|
@@ -7244,7 +7251,7 @@ function ApproveAction({ status, nextStatus, showTimeline, showBody, profile, ch
|
|
|
7244
7251
|
}
|
|
7245
7252
|
|
|
7246
7253
|
function BridgeAction({ status, nextStatus, showTimeline, showBody, token, chain, provider, timestamp, hash, url, }) {
|
|
7247
|
-
return (jsxRuntime.jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsxRuntime.jsx(SquareArrowTopLeftIcon, {}), description: jsxRuntime.jsxs(Inline, { children: ["Bridge", jsxRuntime.jsx(IconLabel, { src: token.logoURI, variant: "round", children: token.symbol }), "to", jsxRuntime.jsx(IconLabel, { src: chain.logoURI, children: chain.name }), "via", jsxRuntime.jsx(IconLabel, { src: provider.logoURI, variant: "round", children: provider.name })] }), showTimeline: showTimeline, showBody: showBody, children: jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
|
|
7254
|
+
return (jsxRuntime.jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsxRuntime.jsx(SquareArrowTopLeftIcon, {}), description: jsxRuntime.jsxs(Inline, { children: ["Bridge", jsxRuntime.jsx(IconLabel, { src: token.logoURI, variant: "round", children: jsxRuntime.jsx(BodyText, { size: "small", children: token.symbol }) }), "to", jsxRuntime.jsx(IconLabel, { src: chain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: chain.name }) }), "via", jsxRuntime.jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsxRuntime.jsx(BodyText, { size: "small", children: provider.name }) })] }), showTimeline: showTimeline, showBody: showBody, children: jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
|
|
7248
7255
|
}
|
|
7249
7256
|
|
|
7250
7257
|
function TagIcon({ size = '20' }) {
|
|
@@ -7265,8 +7272,8 @@ function FeesLines({ status, lines, showTimeline = false, }) {
|
|
|
7265
7272
|
? statusTextClassMap[status]
|
|
7266
7273
|
: '!tw-text-[transparent]'), children: [jsxRuntime.jsx(Timeline.CapTop, {}), jsxRuntime.jsx(Timeline.Straight, {})] }) })] }));
|
|
7267
7274
|
}
|
|
7268
|
-
function FeesRow({ label, usd,
|
|
7269
|
-
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-gap-squid-xs", children: [jsxRuntime.jsx(SizeTransition, { children: jsxRuntime.jsx(BodyText, { size: "small", tight: true, className: cn('tw-block tw-
|
|
7275
|
+
function FeesRow({ label, usd, amount, symbol, collapsed = false, }) {
|
|
7276
|
+
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-gap-squid-xs", children: [jsxRuntime.jsx(SizeTransition, { children: jsxRuntime.jsx(BodyText, { size: "small", tight: true, className: cn('tw-block tw-truncate tw-text-grey-300', !collapsed && 'tw-w-[100px]'), children: label }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-items-center", children: jsxRuntime.jsx(PipeSeparator, { className: "tw-text-grey-700" }) }), jsxRuntime.jsxs(BodyText, { size: "small", tight: true, className: "tw-flex-grow tw-text-grey-300", children: ["$", usd] }), jsxRuntime.jsxs(CaptionText, { className: "tw-text-right tw-text-grey-500", children: [amount, " ", symbol] })] }));
|
|
7270
7277
|
}
|
|
7271
7278
|
|
|
7272
7279
|
function IncompleteAction({ status, nextStatus, message, buttons, }) {
|
|
@@ -7282,11 +7289,11 @@ function linkActionTimelineProps(actions, collapsed) {
|
|
|
7282
7289
|
}
|
|
7283
7290
|
|
|
7284
7291
|
function ReceiveNFTAction({ status, nextStatus, showTimeline, showBody, nft, chain, wallet, timestamp, hash, url, }) {
|
|
7285
|
-
return (jsxRuntime.jsxs(ActionLayout, { status: status, statusIcon: jsxRuntime.jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive NFT", title: nft.name, icon: jsxRuntime.jsx(ImageIcon, { src: nft.imageURI, variant: "square", size: "xlarge" }), lineCap: jsxRuntime.jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsxRuntime.jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxRuntime.jsxs(BodyText, { className: "tw-flex tw-items-center tw-gap-squid-xs", size: "small", children: [jsxRuntime.jsx(IconLabel, { src: chain.logoURI, children: chain.name }), jsxRuntime.jsx(PipeSeparator, { className: "tw-text-grey-700" }), jsxRuntime.jsx(WalletLink, Object.assign({}, wallet))] }) }), jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })] }));
|
|
7292
|
+
return (jsxRuntime.jsxs(ActionLayout, { status: status, statusIcon: jsxRuntime.jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive NFT", title: nft.name, icon: jsxRuntime.jsx(ImageIcon, { src: nft.imageURI, variant: "square", size: "xlarge" }), lineCap: jsxRuntime.jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsxRuntime.jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxRuntime.jsxs(BodyText, { className: "tw-flex tw-items-center tw-gap-squid-xs", size: "small", children: [jsxRuntime.jsx(IconLabel, { src: chain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: chain.name }) }), jsxRuntime.jsx(PipeSeparator, { className: "tw-text-grey-700" }), jsxRuntime.jsx(WalletLink, Object.assign({}, wallet))] }) }), jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })] }));
|
|
7286
7293
|
}
|
|
7287
7294
|
|
|
7288
7295
|
function ReceiveTokensAction({ status, nextStatus, showTimeline, showBody, token, amount, chain, wallet, timestamp, hash, url, }) {
|
|
7289
|
-
return (jsxRuntime.jsxs(ActionLayout, { status: status, statusIcon: jsxRuntime.jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive tokens", title: `${amount} ${token.symbol}`, icon: jsxRuntime.jsx(ImageIcon, { src: token.logoURI, variant: "round", size: "xlarge" }), lineCap: jsxRuntime.jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsxRuntime.jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxRuntime.jsxs(BodyText, { size: "small", className: "tw-flex tw-items-center tw-gap-squid-xs", children: [jsxRuntime.jsx(IconLabel, { src: chain.logoURI, children: chain.name }), jsxRuntime.jsx(PipeSeparator, { className: "tw-text-body-small tw-text-grey-700" }), ' ', jsxRuntime.jsx(WalletLink, Object.assign({}, wallet))] }) }), jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })] }));
|
|
7296
|
+
return (jsxRuntime.jsxs(ActionLayout, { status: status, statusIcon: jsxRuntime.jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive tokens", title: `${amount} ${token.symbol}`, icon: jsxRuntime.jsx(ImageIcon, { src: token.logoURI, variant: "round", size: "xlarge" }), lineCap: jsxRuntime.jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsxRuntime.jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxRuntime.jsxs(BodyText, { size: "small", className: "tw-flex tw-items-center tw-gap-squid-xs", children: [jsxRuntime.jsx(IconLabel, { src: chain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: chain.name }) }), jsxRuntime.jsx(PipeSeparator, { className: "tw-text-body-small tw-text-grey-700" }), ' ', jsxRuntime.jsx(WalletLink, Object.assign({}, wallet))] }) }), jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })] }));
|
|
7290
7297
|
}
|
|
7291
7298
|
|
|
7292
7299
|
function SendTokensAction({ status, nextStatus, showTimeline, showBody, token, amount, chain, wallet, timestamp, hash, url, }) {
|
|
@@ -7300,9 +7307,9 @@ function PieChartIcon() {
|
|
|
7300
7307
|
function StakeAction({ status, nextStatus, showTimeline, showBody, token, provider, timestamp, hash, url, }) {
|
|
7301
7308
|
return (jsxRuntime.jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsxRuntime.jsx(PieChartIcon, {}), description: jsxRuntime.jsx(Inline, { children: [
|
|
7302
7309
|
'Stake',
|
|
7303
|
-
jsxRuntime.jsx(IconLabel, { src: token.logoURI, variant: "round", children: token.symbol }),
|
|
7310
|
+
jsxRuntime.jsx(IconLabel, { src: token.logoURI, variant: "round", children: jsxRuntime.jsx(BodyText, { size: "small", children: token.symbol }) }),
|
|
7304
7311
|
'on',
|
|
7305
|
-
jsxRuntime.jsx(IconLabel, { src: provider.logoURI, variant: "round", children: provider.name }),
|
|
7312
|
+
jsxRuntime.jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsxRuntime.jsx(BodyText, { size: "small", children: provider.name }) }),
|
|
7306
7313
|
] }), showTimeline: showTimeline, showBody: showBody, children: jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
|
|
7307
7314
|
}
|
|
7308
7315
|
|
|
@@ -7322,22 +7329,15 @@ function StartAction({ status, nextStatus, showTimeline = false, showBody = fals
|
|
|
7322
7329
|
function SuccessAction({ nextStatus, status, description = status === 'error'
|
|
7323
7330
|
? 'Transaction failed'
|
|
7324
7331
|
: 'Transaction successful', showTimeline, showBody, timestamp, hash, url, }) {
|
|
7325
|
-
return (jsxRuntime.jsx(ActionLayout, { description: description, status: status, nextStatus: nextStatus, showTimeline: showTimeline, showBody: showBody, children: jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
|
|
7332
|
+
return (jsxRuntime.jsx(ActionLayout, { description: description, status: status, nextStatus: nextStatus, showTimeline: showTimeline, showBody: showBody, children: (timestamp || hash) && (jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })) }));
|
|
7326
7333
|
}
|
|
7327
7334
|
|
|
7328
7335
|
function SwapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }) {
|
|
7329
|
-
return (jsxRuntime.jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsxRuntime.jsx(ArrowBottomTopIcon, { size: "16" }), description: jsxRuntime.jsxs(Inline, { children: ["Swap", jsxRuntime.jsx(IconLabel, { src: fromToken.logoURI, variant: "round", children: fromToken.symbol }), "to", jsxRuntime.jsx(IconLabel, { src: toToken.logoURI, variant: "round", children: toToken.symbol }), "via", jsxRuntime.jsx(IconLabel, { src: provider.logoURI, variant: "round", children: provider.name })] }), showTimeline: showTimeline, showBody: showBody, children: jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
|
|
7336
|
+
return (jsxRuntime.jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsxRuntime.jsx(ArrowBottomTopIcon, { size: "16" }), description: jsxRuntime.jsxs(Inline, { children: ["Swap", jsxRuntime.jsx(IconLabel, { src: fromToken.logoURI, variant: "round", children: jsxRuntime.jsx(BodyText, { size: "small", children: fromToken.symbol }) }), "to", jsxRuntime.jsx(IconLabel, { src: toToken.logoURI, variant: "round", children: jsxRuntime.jsx(BodyText, { size: "small", children: toToken.symbol }) }), "via", jsxRuntime.jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsxRuntime.jsx(BodyText, { size: "small", children: provider.name }) })] }), showTimeline: showTimeline, showBody: showBody, children: jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
|
|
7330
7337
|
}
|
|
7331
7338
|
|
|
7332
7339
|
function WrapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }) {
|
|
7333
|
-
return (jsxRuntime.jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsxRuntime.jsx(ArrowBottomTopIcon, { size: "16" }), description: jsxRuntime.
|
|
7334
|
-
'Wrap',
|
|
7335
|
-
jsxRuntime.jsx(IconLabel, { src: fromToken.logoURI, variant: "round", children: fromToken.symbol }),
|
|
7336
|
-
'to',
|
|
7337
|
-
jsxRuntime.jsx(IconLabel, { src: toToken.logoURI, variant: "round", children: toToken.symbol }),
|
|
7338
|
-
'via',
|
|
7339
|
-
jsxRuntime.jsx(IconLabel, { src: provider.logoURI, variant: "round", children: provider.name }),
|
|
7340
|
-
] }), showTimeline: showTimeline, showBody: showBody, children: jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
|
|
7340
|
+
return (jsxRuntime.jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsxRuntime.jsx(ArrowBottomTopIcon, { size: "16" }), description: jsxRuntime.jsxs(Inline, { children: ["Wrap", jsxRuntime.jsx(IconLabel, { src: fromToken.logoURI, variant: "round", children: jsxRuntime.jsx(BodyText, { size: "small", children: fromToken.symbol }) }), "to", jsxRuntime.jsx(IconLabel, { src: toToken.logoURI, variant: "round", children: jsxRuntime.jsx(BodyText, { size: "small", children: toToken.symbol }) }), "via", jsxRuntime.jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsxRuntime.jsx(BodyText, { size: "small", children: provider.name }) })] }), showTimeline: showTimeline, showBody: showBody, children: jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
|
|
7341
7341
|
}
|
|
7342
7342
|
|
|
7343
7343
|
const actionComponentMap = {
|
|
@@ -7374,17 +7374,16 @@ const borderRadiusClassMap = {
|
|
|
7374
7374
|
lg: 'tw-rounded-squid-m',
|
|
7375
7375
|
};
|
|
7376
7376
|
function Menu(_a) {
|
|
7377
|
-
var { children, containerClassName, contentClassName,
|
|
7378
|
-
return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), ref: menuRef, children: jsxRuntime.jsxs("div", { className: cn('tw-relative tw-inline-flex tw-max-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-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: [
|
|
7377
|
+
var { children, containerClassName, contentClassName, rounded = 'lg', menuRef } = _a, props = __rest$1(_a, ["children", "containerClassName", "contentClassName", "rounded", "menuRef"]);
|
|
7378
|
+
return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), ref: menuRef, children: jsxRuntime.jsxs("div", { className: cn('tw-relative tw-inline-flex tw-max-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-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' ? (jsxRuntime.jsx(CaptionText, { className: "tw-z-20 tw-self-stretch !tw-leading-[10px]", children: children })) : (jsxRuntime.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 })), jsxRuntime.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]) })] }) })));
|
|
7379
7379
|
}
|
|
7380
7380
|
|
|
7381
7381
|
function DropdownMenu({ dropdownRef, items, className, menuRef, isHidden = false, listClassName, }) {
|
|
7382
7382
|
return (jsxRuntime.jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsxRuntime.jsx(Menu, { menuRef: menuRef, rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: !isHidden && (jsxRuntime.jsx("ul", { className: cn('tw-flex tw-max-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs', listClassName), children: items.map((item) => (jsxRuntime.jsx(DropdownMenuItem, Object.assign({}, item), item.label))) })) }) }));
|
|
7383
7383
|
}
|
|
7384
7384
|
|
|
7385
|
-
|
|
7386
|
-
|
|
7387
|
-
}
|
|
7385
|
+
const ExploreLayout = styled('div', 'tw-overflow-hidden tw-rounded-squid-l tw-bg-grey-900 tw-shadow-elevation-light-3');
|
|
7386
|
+
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');
|
|
7388
7387
|
|
|
7389
7388
|
function InfoBox({ title, description, icon }) {
|
|
7390
7389
|
return (jsxRuntime.jsxs("div", { className: "tw-align-self-stretch tw-flex tw-flex-col tw-items-center tw-gap-squid-xs tw-px-squid-m tw-pb-squid-l tw-pt-squid-xs tw-text-royal-400", children: [icon, jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xxs tw-text-center", children: [jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[9px]", children: title }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: description })] })] }));
|
|
@@ -7416,7 +7415,7 @@ function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, m
|
|
|
7416
7415
|
}, 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: jsxRuntime.jsx("div", { style: {
|
|
7417
7416
|
[CSS_VARS.SLIDE_TO_TOP_DURATION]: `${ANIMATION_DURATIONS.SHOW_MODAL}ms`,
|
|
7418
7417
|
[CSS_VARS.SLIDE_TO_BOTTOM_DURATION]: `${ANIMATION_DURATIONS.HIDE_MODAL}ms`,
|
|
7419
|
-
}, className: cn('tw-w-modal-
|
|
7418
|
+
}, 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 }) })));
|
|
7420
7419
|
}
|
|
7421
7420
|
|
|
7422
7421
|
const borderTypeClassMap = {
|
|
@@ -7434,17 +7433,17 @@ function ModalContentDivider() {
|
|
|
7434
7433
|
function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, }) {
|
|
7435
7434
|
return (jsxRuntime.jsxs("nav", { className: cn('tw-flex tw-max-h-[120px] tw-min-w-96 tw-flex-col tw-text-grey-300', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900'), children: [jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs', displayBackButton
|
|
7436
7435
|
? 'tw-px-squid-m'
|
|
7437
|
-
: 'tw-pl-squid-
|
|
7436
|
+
: 'mobile-lg:tw-pl-squid-l tw-pl-squid-m tw-pr-squid-m'), children: [displayBackButton ? (jsxRuntime.jsx(Button$1, { className: displayButtonShadows
|
|
7438
7437
|
? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
|
|
7439
7438
|
: undefined, variant: "tertiary", size: "md", icon: jsxRuntime.jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsxRuntime.jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsxRuntime.jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end tw-gap-squid-xxs", children: actions === null || actions === void 0 ? void 0 : actions.map((action) => (jsxRuntime.jsx(Button$1, { size: "md", variant: "tertiary", label: typeof action.labelOrIcon === 'string'
|
|
7440
7439
|
? action.labelOrIcon
|
|
7441
7440
|
: undefined, className: "tw-text-grey-300", icon: typeof action.labelOrIcon === 'string'
|
|
7442
7441
|
? null
|
|
7443
|
-
: action.labelOrIcon, onClick: action.onClick }))) })] }), title ? (jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-m tw-py-squid-xxs
|
|
7442
|
+
: action.labelOrIcon, onClick: action.onClick }))) })] }), title ? (jsxRuntime.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: jsxRuntime.jsx(HeadingText, { size: "small", children: title }) })) : null] }));
|
|
7444
7443
|
}
|
|
7445
7444
|
|
|
7446
7445
|
function ProductCard({ children }) {
|
|
7447
|
-
return (jsxRuntime.jsx("div", { className: "
|
|
7446
|
+
return (jsxRuntime.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: jsxRuntime.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 }) }));
|
|
7448
7447
|
}
|
|
7449
7448
|
function BorderedContainer({ children, className, }) {
|
|
7450
7449
|
return (jsxRuntime.jsx("section", { className: cn('tw-border-t tw-border-t-material-light-thin', className), children: children }));
|
|
@@ -7468,7 +7467,7 @@ function LogoContainer({ children }) {
|
|
|
7468
7467
|
|
|
7469
7468
|
function SwapConfiguration({ amount, tokenPrice = 0, isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel = 'Connect wallet', balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, }) {
|
|
7470
7469
|
var _a, _b;
|
|
7471
|
-
return (jsxRuntime.jsxs("section", { className: "tw-w-card-
|
|
7470
|
+
return (jsxRuntime.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: [jsxRuntime.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: jsxRuntime.jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600 hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : emptyAddressLabel }), jsxRuntime.jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsxRuntime.jsx("div", { className: "mobile-lg:tw-px-squid-l tw-px-squid-m", children: jsxRuntime.jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor, variant: assetsButtonVariant }) }), isFetching && (jsxRuntime.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: 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: {
|
|
7472
7471
|
decimals: (_a = token === null || token === void 0 ? void 0 : token.decimals) !== null && _a !== void 0 ? _a : 18,
|
|
7473
7472
|
symbol: (_b = token === null || token === void 0 ? void 0 : token.symbol) !== null && _b !== void 0 ? _b : '',
|
|
7474
7473
|
price: tokenPrice,
|
|
@@ -7539,7 +7538,7 @@ const SwapStepsCollapsed = React.forwardRef((props, ref) => {
|
|
|
7539
7538
|
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
7540
7539
|
}
|
|
7541
7540
|
};
|
|
7542
|
-
return (jsxRuntime.jsx("div", { className: "
|
|
7541
|
+
return (jsxRuntime.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: jsxRuntime.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: jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-justify-end", children: [!isRouteVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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" }), jsxRuntime.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" })] })), jsxRuntime.jsx("div", { onClick: handleToggleRouteSteps, style: {
|
|
7543
7542
|
[CSS_VARS.FADE_OUT_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
|
|
7544
7543
|
[CSS_VARS.FADE_IN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
|
|
7545
7544
|
}, 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
|
|
@@ -7571,7 +7570,7 @@ const SwapStepsCollapsed = React.forwardRef((props, ref) => {
|
|
|
7571
7570
|
}, 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: jsxRuntime.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: jsxRuntime.jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsxRuntime.jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsxRuntime.jsx("ul", { ref: routeStepsListRef, style: {
|
|
7572
7571
|
zIndex: isRouteVisible ? 0 : -10,
|
|
7573
7572
|
scrollbarWidth: 'none',
|
|
7574
|
-
}, className: "
|
|
7573
|
+
}, 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) => (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks,
|
|
7575
7574
|
// show separator for all steps except the first one
|
|
7576
7575
|
showStepSeparator: index > 0, link: step.link, status: newStepIndex < index ? 'pending' : step.status }, index))) }), jsxRuntime.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: jsxRuntime.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" }) })] }) })] }) }) }));
|
|
7577
7576
|
});
|
|
@@ -13342,13 +13341,13 @@ function Tick({ className }) {
|
|
|
13342
13341
|
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "9", height: "7", fill: "none", viewBox: "0 0 9 7", className: className, children: jsxRuntime.jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M7.497 1l-4.5 4.5-2-2" }) }));
|
|
13343
13342
|
}
|
|
13344
13343
|
|
|
13345
|
-
function TransactionFilters({ chainType, setChainType, chain, setChain, fromDate, setFromDate, toDate, setToDate, status, setStatus, chains, }) {
|
|
13346
|
-
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-
|
|
13344
|
+
function TransactionFilters({ chainType, setChainType, chain, setChain, fromDate, setFromDate, toDate, setToDate, status = [], setStatus, chains, }) {
|
|
13345
|
+
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsx(FilterSection, { title: "Chain", children: jsxRuntime.jsx(ChainsFilter, { chainType: chainType, setChainType: setChainType, chain: chain, setChain: setChain, chains: chains }) }), jsxRuntime.jsx(FilterSection, { title: "Date", initCollapsed: true, children: jsxRuntime.jsx(DateFilters, { fromDate: fromDate, setFromDate: setFromDate, toDate: toDate, setToDate: setToDate }) }), jsxRuntime.jsx(FilterSection, { title: "Status", initCollapsed: true, children: jsxRuntime.jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", children: ['success', 'ongoing', 'error'].map((s) => (jsxRuntime.jsx(StatusFilter, { status: s, selected: status.length === 0 || status.includes(s), onChange: () => setStatus(arrayToggle(status, s)), icon: s === 'ongoing' ? jsxRuntime.jsx(DotGrid1x3HorizontalIcon, {}) : undefined }, s))) }) })] }));
|
|
13347
13346
|
}
|
|
13348
13347
|
const arrayToggle = (array, value) => array.includes(value) ? array.filter((v) => v !== value) : [...array, value];
|
|
13349
13348
|
function ChainsFilter({ chainType, setChainType, chain, setChain, chains, }) {
|
|
13350
13349
|
const [search, setSearch] = React.useState('');
|
|
13351
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-gap-squid-xxs", children: [jsxRuntime.jsxs(Toggle, { selected: chainType === 'source', onClick: () => setChainType('source'), children: [jsxRuntime.jsx(ArrowRightUpCircleIcon, {}), "Source"] }), jsxRuntime.jsxs(Toggle, { selected: chainType === 'destination', onClick: () => setChainType('destination'), children: [jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), "Destination"] })] }), jsxRuntime.jsx(Input, { value: search, onChange: (e) => setSearch(e.target.value) }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", children: [jsxRuntime.jsx(ChainFilter, { name: "All Chains", logoURI: chainDataURL, selected: chain === null, onClick: () => setChain(
|
|
13350
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-gap-squid-xxs", children: [jsxRuntime.jsxs(Toggle, { selected: chainType === 'source', onClick: () => setChainType('source'), children: [jsxRuntime.jsx(ArrowRightUpCircleIcon, {}), "Source"] }), jsxRuntime.jsxs(Toggle, { selected: chainType === 'destination', onClick: () => setChainType('destination'), children: [jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), "Destination"] })] }), jsxRuntime.jsx(Input, { value: search, onChange: (e) => setSearch(e.target.value) }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", children: [jsxRuntime.jsx(ChainFilter, { name: "All Chains", logoURI: chainDataURL, selected: chain === null, onClick: () => setChain(undefined) }), chains
|
|
13352
13351
|
.filter(({ name }) => search === '' ||
|
|
13353
13352
|
name.toLocaleLowerCase().includes(search.toLocaleLowerCase()))
|
|
13354
13353
|
.map(({ logoURI, name }, index) => (jsxRuntime.jsx(ChainFilter, { name: name, logoURI: logoURI, selected: chain === name, onClick: () => setChain(name) }, index)))] })] }));
|
|
@@ -13380,7 +13379,7 @@ function DateFilter({ label, placeholder, fromDate, toDate, type, onChange, expa
|
|
|
13380
13379
|
const onDayPickerSelect = (date) => {
|
|
13381
13380
|
if (!date) {
|
|
13382
13381
|
setInputValue('');
|
|
13383
|
-
onChange(
|
|
13382
|
+
onChange(undefined);
|
|
13384
13383
|
}
|
|
13385
13384
|
else {
|
|
13386
13385
|
onChange(date);
|
|
@@ -13396,7 +13395,7 @@ function DateFilter({ label, placeholder, fromDate, toDate, type, onChange, expa
|
|
|
13396
13395
|
setMonth(date);
|
|
13397
13396
|
}
|
|
13398
13397
|
else {
|
|
13399
|
-
onChange(
|
|
13398
|
+
onChange(undefined);
|
|
13400
13399
|
}
|
|
13401
13400
|
};
|
|
13402
13401
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-200", children: label }), jsxRuntime.jsx(Input, { className: "date-input-no-icon", icon: jsxRuntime.jsx(Calendar, {}), placeholder: placeholder, value: inputValue, onClick: () => setExpanded(true), type: "date", onChange: onInputChange }), jsxRuntime.jsx(Collapse, { collapsed: !expanded, children: jsxRuntime.jsx(DayPicker, { weekStartsOn: 1, formatters: {
|
|
@@ -13428,16 +13427,16 @@ function Checkbox({ checked, onChange, children, className }) {
|
|
|
13428
13427
|
}
|
|
13429
13428
|
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";
|
|
13430
13429
|
|
|
13431
|
-
function TransactionHeaderLayout({ status, title, image = jsxRuntime.jsx("span", {}), children, }) {
|
|
13432
|
-
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-
|
|
13430
|
+
function TransactionHeaderLayout({ status, title, image = jsxRuntime.jsx("span", {}), children, isLoading, }) {
|
|
13431
|
+
return (jsxRuntime.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: [jsxRuntime.jsxs("div", { className: "tw-flex tw-justify-between", children: [image, status && jsxRuntime.jsx(TransactionState, { status: status })] }), jsxRuntime.jsx(LoadingSkeleton, { isLoading: isLoading, children: jsxRuntime.jsx(HeadingText, { size: "small", className: "tw-text-grey-300", children: title }) }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(LoadingSkeleton, { isLoading: isLoading, children: children }) })] }));
|
|
13433
13432
|
}
|
|
13434
13433
|
|
|
13435
13434
|
function BridgeHeader({ tokenLogoURI, chainLogoURI, title = 'Bridge', hash, url, status, }) {
|
|
13436
|
-
return (jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, image: jsxRuntime.jsxs("div", { className: "tw-relative", children: [jsxRuntime.jsx(ImageIcon, { src: tokenLogoURI, size: "xlarge", variant: "round" }), jsxRuntime.jsx(ImageIcon, { src: chainLogoURI, className: "tw-absolute -tw-right-squid-xxs tw-bottom-0" })] }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-
|
|
13435
|
+
return (jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, image: jsxRuntime.jsxs("div", { className: "tw-relative", children: [jsxRuntime.jsx(ImageIcon, { src: tokenLogoURI, size: "xlarge", variant: "round" }), jsxRuntime.jsx(ImageIcon, { src: chainLogoURI, className: "tw-absolute -tw-right-squid-xxs tw-bottom-0" })] }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
|
|
13437
13436
|
}
|
|
13438
13437
|
|
|
13439
13438
|
function BuyNFTHeader({ imageUrl, title = 'Buy NFT', hash, url, status, }) {
|
|
13440
|
-
return (jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, image: jsxRuntime.jsx(ImageIcon, { src: imageUrl, size: "xlarge" }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-
|
|
13439
|
+
return (jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, image: jsxRuntime.jsx(ImageIcon, { src: imageUrl, size: "xlarge" }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
|
|
13441
13440
|
}
|
|
13442
13441
|
|
|
13443
13442
|
function Approve() {
|
|
@@ -13445,7 +13444,7 @@ function Approve() {
|
|
|
13445
13444
|
}
|
|
13446
13445
|
|
|
13447
13446
|
function InteractionHeader({ title = 'Interaction', image = jsxRuntime.jsx(Approve, {}), hash, url, status, }) {
|
|
13448
|
-
return (jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, image: image, children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-
|
|
13447
|
+
return (jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, image: image, children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
|
|
13449
13448
|
}
|
|
13450
13449
|
|
|
13451
13450
|
function CoinsIcon() {
|
|
@@ -13466,7 +13465,7 @@ function ProfilePicture({ src }) {
|
|
|
13466
13465
|
}
|
|
13467
13466
|
|
|
13468
13467
|
function SwapHeader({ fromToken, toToken, title = 'Swap', hash, url, status, }) {
|
|
13469
|
-
return (jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, image: jsxRuntime.jsx(TokenPair, { firstToken: fromToken, secondToken: toToken }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-
|
|
13468
|
+
return (jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, image: jsxRuntime.jsx(TokenPair, { firstToken: fromToken, secondToken: toToken }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
|
|
13470
13469
|
}
|
|
13471
13470
|
|
|
13472
13471
|
const headerComponentsMap = {
|
|
@@ -13548,8 +13547,8 @@ function TransactionProperties({ type, props, }) {
|
|
|
13548
13547
|
return jsxRuntime.jsx(Component, Object.assign({}, props));
|
|
13549
13548
|
}
|
|
13550
13549
|
|
|
13551
|
-
function TransactionSearch({ query, setQuery, children, }) {
|
|
13552
|
-
return (jsxRuntime.jsx("div", { className:
|
|
13550
|
+
function TransactionSearch({ query, setQuery, children, className, }) {
|
|
13551
|
+
return (jsxRuntime.jsx("div", { className: cn('tw-relative tw-h-[50px]', className), children: jsxRuntime.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: [jsxRuntime.jsx(Input, { placeholder: "Transaction hash or address", value: query, onChange: (e) => setQuery(e.target.value), actionButtonProps: {
|
|
13553
13552
|
label: 'Paste',
|
|
13554
13553
|
onClick: () => __awaiter$1(this, void 0, void 0, function* () { return setQuery(yield navigator.clipboard.readText()); }),
|
|
13555
13554
|
} }), children && (jsxRuntime.jsx("div", { className: "tw-max-h-[80vh] tw-overflow-y-auto tw-overflow-x-hidden tw-rounded-[20px]", children: children }))] }) }));
|
|
@@ -13690,9 +13689,9 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
|
|
|
13690
13689
|
const balanceFormatted = React.useMemo(() => {
|
|
13691
13690
|
return formatAmount(balance !== null && balance !== void 0 ? balance : '0');
|
|
13692
13691
|
}, [balance]);
|
|
13693
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isInteractive ? (jsxRuntime.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
|
|
13692
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isInteractive ? (jsxRuntime.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) => {
|
|
13694
13693
|
e.preventDefault();
|
|
13695
|
-
}, children: [inputMode === InputMode.USD && (jsxRuntime.jsx("span", { className: "tw-absolute tw-left-[30px] tw-top-[11px] tw-leading-[43px] tw-text-grey-600", children: "$" })), jsxRuntime.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]') })] })) : (jsxRuntime.jsx("div", { className: cn('tw-w-full tw-px-squid-xs tw-pb-[15px] tw-pt-[5px]
|
|
13694
|
+
}, children: [inputMode === InputMode.USD && (jsxRuntime.jsx("span", { className: "tw-absolute tw-left-[30px] tw-top-[11px] tw-leading-[43px] tw-text-grey-600", children: "$" })), jsxRuntime.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]') })] })) : (jsxRuntime.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: jsxRuntime.jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsxRuntime.jsx("span", { children: inputValue }) }) })), !showDetails ? null : (jsxRuntime.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 ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsxs(AmountChip, { onClick: isInteractive ? handleSwitchInputMode : undefined, className: cn(buttonClassName, isInteractive && interactiveChipClassName), children: [jsxRuntime.jsx(SwapInputsIcon, {}), inputMode === InputMode.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
|
|
13696
13695
|
? formatIfVerySmall.token
|
|
13697
13696
|
: amountFormatted })] }) })) : (jsxRuntime.jsxs("span", { className: "tw-text-grey-500", children: [isTokenAmountVerySmall ? '<' : '', jsxRuntime.jsx(CaptionText, { children: isTokenAmountVerySmall
|
|
13698
13697
|
? formatIfVerySmall.token
|
|
@@ -13822,9 +13821,9 @@ function Tooltip({ children, tooltipContent, tooltipWidth = 'container', thresho
|
|
|
13822
13821
|
}
|
|
13823
13822
|
|
|
13824
13823
|
function BoostButton({ boostMode, canToggleBoostMode = true, boostDisabledMessage = 'Boost disabled', tooltipDisplayDelayMs = 0, boostIndicatorRef, }) {
|
|
13825
|
-
return (jsxRuntime.jsx(Tooltip, { tooltipWidth: "max", displayDelayMs: tooltipDisplayDelayMs, containerClassName: "tw-pr-squid-xxs
|
|
13824
|
+
return (jsxRuntime.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: jsxRuntime.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: [jsxRuntime.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 &&
|
|
13826
13825
|
'group-hover/boost-toggle:tw-from-material-light-blend-grey-900') }), jsxRuntime.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 &&
|
|
13827
|
-
'group-hover/boost-toggle:tw-from-material-light-blend-grey-900') }), jsxRuntime.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
|
|
13826
|
+
'group-hover/boost-toggle:tw-from-material-light-blend-grey-900') }), jsxRuntime.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: [jsxRuntime.jsx("div", { className: "tw-w-[70px] tw-text-center group-disabled/boost-toggle:tw-grayscale", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxRuntime.jsxs("div", { className: "tw-w-[70px] tw-text-center group-disabled/boost-toggle:tw-grayscale", children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsxRuntime.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: {
|
|
13828
13827
|
boxShadow: generateMarkerLines(40),
|
|
13829
13828
|
} })] }), jsxRuntime.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: {
|
|
13830
13829
|
transitionDuration: `${ANIMATION_DURATIONS.BOOST_BUTTON}ms`,
|
|
@@ -13846,10 +13845,10 @@ function FilterIcon() {
|
|
|
13846
13845
|
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "16", fill: "none", viewBox: "0 0 20 16", children: jsxRuntime.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" }) }));
|
|
13847
13846
|
}
|
|
13848
13847
|
|
|
13849
|
-
function FilterButton({ selected, numApplied = 0 }) {
|
|
13848
|
+
function FilterButton({ selected, numApplied = 0, onClick, }) {
|
|
13850
13849
|
return (jsxRuntime.jsxs("div", { className: "tw-relative", children: [jsxRuntime.jsx(Button$1, { variant: "tertiary", size: "md", className: cn(selected
|
|
13851
13850
|
? '!tw-bg-grey-500 !tw-text-grey-800'
|
|
13852
|
-
: '!tw-border-transparent !tw-bg-grey-800 !tw-text-grey-500'), children: jsxRuntime.jsx(FilterIcon, {}) }), numApplied > 0 && (jsxRuntime.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: jsxRuntime.jsx(CaptionText, { children: numApplied }) }))] }));
|
|
13851
|
+
: '!tw-border-transparent !tw-bg-grey-800 !tw-text-grey-500'), onClick: onClick, children: jsxRuntime.jsx(FilterIcon, {}) }), numApplied > 0 && (jsxRuntime.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: jsxRuntime.jsx(CaptionText, { children: numApplied }) }))] }));
|
|
13853
13852
|
}
|
|
13854
13853
|
|
|
13855
13854
|
function SettingsButton({ label, isSelected = false, onClick, }) {
|
|
@@ -13871,11 +13870,11 @@ function SparkleIcon() {
|
|
|
13871
13870
|
}
|
|
13872
13871
|
|
|
13873
13872
|
function AssetsView({ chains, favoriteTokens, popularTokens, userTokens, }) {
|
|
13874
|
-
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: "
|
|
13873
|
+
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: "mobile-lg:tw-grid-cols-[180px_1fr_299px] tw-grid tw-grid-cols-[70px_1fr_323px]", children: [jsxRuntime.jsxs("div", { style: {
|
|
13875
13874
|
scrollbarWidth: 'none',
|
|
13876
|
-
}, 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
|
|
13875
|
+
}, 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: [jsxRuntime.jsx(SectionTitle, { title: "Chains", icon: jsxRuntime.jsx(ChainLink, {}), className: "mobile-lg:tw-flex tw-hidden" }), jsxRuntime.jsxs(List, { children: [jsxRuntime.jsx(ListItem, { size: "small", mainIcon: jsxRuntime.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: jsxRuntime.jsx(ChainLink, { size: "24" }) }), itemTitle: "All Chains", compactOnMobile: true, onClick: () => { } }), chains.map((item) => (jsxRuntime.jsx(ListItem, { size: "small", mainImageUrl: item.iconUrl, itemTitle: item.name, detail: item.name, compactOnMobile: true, onClick: () => { } }, item.name)))] })] }), jsxRuntime.jsxs("div", { style: {
|
|
13877
13876
|
scrollbarWidth: 'none',
|
|
13878
|
-
}, 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
|
|
13877
|
+
}, 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: [jsxRuntime.jsx(SectionTitle, { title: "Favorite tokens", icon: jsxRuntime.jsx(HeartSmallIcon, {}) }), jsxRuntime.jsx(List, { children: favoriteTokens.map((favToken) => (jsxRuntime.jsx(ListItem, { size: "large", mainImageUrl: favToken.iconUrl, secondaryImageUrl: favToken.iconUrl, itemTitle: favToken.name, subtitle: favToken.symbol, icon: jsxRuntime.jsx(BrokenHeartIcon, { className: "tw-text-status-negative" }), showDetailOnHoverOnly: true, rounded: true, onClick: () => { } }, favToken.name))) }), jsxRuntime.jsx(SectionTitle, { title: "Your tokens loading", icon: jsxRuntime.jsx(CoinsIcon, {}) }), jsxRuntime.jsx(List, { children: userTokens.map((userToken) => (jsxRuntime.jsx(ListItem, { size: "large", mainImageUrl: userToken.iconUrl, secondaryImageUrl: userToken.iconUrl, itemTitle: userToken.name, subtitle: `${userToken.balance} ${userToken.symbol}`, icon: jsxRuntime.jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), showDetailOnHoverOnly: true, rounded: true, onClick: () => { }, loading: { subtitle: userToken.symbol } }, userToken.name))) }), jsxRuntime.jsx(SectionTitle, { title: "Your tokens & balance", icon: jsxRuntime.jsx(CoinsIcon, {}) }), jsxRuntime.jsx(List, { children: userTokens.map((userToken) => (jsxRuntime.jsx(ListItem, { size: "large", mainImageUrl: userToken.iconUrl, secondaryImageUrl: userToken.iconUrl, itemTitle: userToken.name, subtitle: `${userToken.balance} ${userToken.symbol}`, icon: jsxRuntime.jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), showDetailOnHoverOnly: true, rounded: true, onClick: () => { } }, userToken.name))) }), jsxRuntime.jsx(SectionTitle, { title: "Popular tokens", icon: jsxRuntime.jsx(SparkleIcon, {}) }), jsxRuntime.jsx(List, { children: popularTokens.map((popToken) => (jsxRuntime.jsx(ListItem, { size: "large", mainImageUrl: popToken.iconUrl, secondaryImageUrl: popToken.iconUrl, itemTitle: popToken.name, subtitle: popToken.symbol, icon: jsxRuntime.jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), showDetailOnHoverOnly: true, rounded: true, onClick: () => { } }, popToken.name))) })] })] }) })] }));
|
|
13879
13878
|
}
|
|
13880
13879
|
const List = ({ children }) => {
|
|
13881
13880
|
return (jsxRuntime.jsx("ul", { className: "tw-flex tw-flex-col tw-gap-squid-xxs tw-pb-squid-xs", children: children }));
|
|
@@ -13921,7 +13920,7 @@ function BankIcon() {
|
|
|
13921
13920
|
function RecipientView({ type }) {
|
|
13922
13921
|
return (jsxRuntime.jsxs(ProductCard, { children: [jsxRuntime.jsx(NavigationBar, { title: type === 'paymentMethod' ? 'Pay' : 'Receive', displayBackButton: true }), jsxRuntime.jsx(BorderedContainer, { children: jsxRuntime.jsx(FlexContainer, { children: type === 'paymentMethod' || type === 'recipientEmpty' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SectionTitle, { title: "Your wallet", icon: jsxRuntime.jsx(PunkIcon, {}) }), jsxRuntime.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" }), jsxRuntime.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: jsxRuntime.jsx(Button$1, { size: "md", variant: "primary", label: "Change wallet", className: "tw-w-full" }) })] })) : type === 'recipientTypingEns' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SearchAddress, { type: type }), jsxRuntime.jsx(ListItem, { itemTitle: "souljabags.eth", subtitle: "0x25c9\u202623d5", mainImageUrl: "/assets/images/punks.png", size: "large", className: "tw-w-full tw-max-w-none", onClick: () => { } }), jsxRuntime.jsx(ListItem, { itemTitle: "souljaboy.eth", subtitle: "0x0ec8\u202604c1", mainIcon: jsxRuntime.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: jsxRuntime.jsx(PunkIcon, { size: "30" }) }), size: "large", className: "tw-w-full tw-max-w-none", onClick: () => { } })] })) : type === 'recipientTypingAddress' ? (jsxRuntime.jsx(SearchAddress, { type: type })) : null }) }), type === 'paymentMethod' ? (jsxRuntime.jsx(BorderedContainer, { className: "tw-flex-1 tw-pt-squid-xs", children: jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(SectionTitle, { title: 'Centralized Exchange', icon: type === 'paymentMethod' ? jsxRuntime.jsx(BankIcon, {}) : jsxRuntime.jsx(WalletIcon, {}) }), jsxRuntime.jsx(DepositSection, {})] }) })) : type === 'recipientEmpty' ? (jsxRuntime.jsx(BorderedContainer, { className: "tw-flex-1 tw-pt-squid-xs", children: jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(SearchAddress, { type: type }), jsxRuntime.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: jsxRuntime.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' ? (jsxRuntime.jsx("div", {})) : null, ' '] }));
|
|
13923
13922
|
}
|
|
13924
|
-
const FlexContainer = ({ children }) => (jsxRuntime.jsx("div", { className: "tw-flex tw-h-full tw-flex-1 tw-flex-col tw-items-center tw-gap-squid-xxs tw-px-0
|
|
13923
|
+
const FlexContainer = ({ children }) => (jsxRuntime.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 }));
|
|
13925
13924
|
const DepositSection = () => {
|
|
13926
13925
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ListItem, { itemTitle: "Deposit", mainIcon: jsxRuntime.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: jsxRuntime.jsx(CoinsAddIcon, {}) }), className: "tw-w-full tw-max-w-none", onClick: () => { } }), jsxRuntime.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." }), jsxRuntime.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: jsxRuntime.jsx(Button$1, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-w-full" }) })] }));
|
|
13927
13926
|
};
|
|
@@ -13946,13 +13945,11 @@ function LightningIcon({ size = '24', className = '', }) {
|
|
|
13946
13945
|
|
|
13947
13946
|
function SwapDetailsView({ isLoading }) {
|
|
13948
13947
|
const [isModalOpen, setIsModalOpen] = React.useState(true);
|
|
13949
|
-
return (jsxRuntime.
|
|
13950
|
-
|
|
13951
|
-
|
|
13952
|
-
|
|
13953
|
-
|
|
13954
|
-
setIsModalOpen(false);
|
|
13955
|
-
} })] })] }));
|
|
13948
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Modal, { isOpen: isModalOpen, onBackdropClick: () => {
|
|
13949
|
+
setIsModalOpen(false);
|
|
13950
|
+
}, children: [jsxRuntime.jsxs(ModalContent, { children: [jsxRuntime.jsx(Settings, {}), jsxRuntime.jsxs("ul", { className: "tw-flex tw-flex-col tw-items-start tw-gap-squid-xxs tw-self-stretch tw-py-squid-xs", children: [jsxRuntime.jsx(PropertyListItem, { isLoading: isLoading, icon: jsxRuntime.jsx(ClockOutlineIcon, {}), label: "Estimated time to complete", detail: "~20s" }), jsxRuntime.jsx(PropertyListItem, { isLoading: isLoading, icon: jsxRuntime.jsx(ArrowBottomTopIcon, {}), label: "Exchange rate", detail: "1 ETH = 4,031.05 USDC" }), jsxRuntime.jsx(PropertyListItem, { isLoading: isLoading, icon: jsxRuntime.jsx(ArrowWallDownIcon, {}), label: "Receive minimum", detail: "750.5 USDC" }), jsxRuntime.jsx(PropertyListItem, { isLoading: isLoading, icon: jsxRuntime.jsx(GasIcon, {}), label: "Cross-chain gas fees", detail: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { children: "0.02534 ETH" }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: "$9.92" })] }) }), jsxRuntime.jsx(PropertyListItem, { isLoading: isLoading, icon: jsxRuntime.jsx(ReorderIcon, {}), label: "Expected gas refund", detail: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { children: "-0.06336 ETH" }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: "-$2.48" })] }) }), jsxRuntime.jsx(PropertyListItem, { isLoading: isLoading, icon: jsxRuntime.jsx(ReceiptBillIcon, {}), label: "Total fee", detail: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { children: "0.0177 ETH" }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: "$7.43" })] }) })] }), jsxRuntime.jsx(InfoBox, { icon: jsxRuntime.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." })] }), jsxRuntime.jsx(Button$1, { size: "lg", variant: "secondary", label: "Close", onClick: () => {
|
|
13951
|
+
setIsModalOpen(false);
|
|
13952
|
+
} })] }) }));
|
|
13956
13953
|
}
|
|
13957
13954
|
function Settings() {
|
|
13958
13955
|
return (jsxRuntime.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: jsxRuntime.jsx(SettingsItem, { icon: jsxRuntime.jsx(LightningIcon, { className: "tw-text-grey-500" }), label: "Boost", control: {
|
|
@@ -49098,13 +49095,15 @@ function TransactionViewLayout(_a) {
|
|
|
49098
49095
|
return (jsxRuntime.jsxs("div", Object.assign({ className: "tw-divide-y tw-divide-material-light-thin" }, props, { children: [header, properties, jsxRuntime.jsx(CollapsingSection, { collapsed: actionsCollapsed, setCollapsed: setActionsCollapsed, children: linkActionTimelineProps(actions, actionsCollapsed).map((props, i) => (jsxRuntime.jsx("div", { className: cn(i > 0 && 'tw-border-t tw-border-t-material-light-thin'), children: jsxRuntime.jsx(TransactionAction, Object.assign({}, props)) }, i))) }), jsxRuntime.jsxs(CollapsingSection, { collapsed: feesCollapsed, setCollapsed: setFeesCollapsed, children: [jsxRuntime.jsx(FeesTotal, Object.assign({ collapsed: feesCollapsed, showTimeline: true }, fees)), jsxRuntime.jsx(FeesLines, Object.assign({}, fees))] })] })));
|
|
49099
49096
|
}
|
|
49100
49097
|
function CollapsingSection({ children, collapsed, setCollapsed, collapsedHeight = 50, }) {
|
|
49101
|
-
return (jsxRuntime.jsx("div", { className: cn('tw-relative', collapsed ? 'tw-cursor-pointer' : ''), onClick: () => {
|
|
49098
|
+
return (jsxRuntime.jsx("div", { className: cn('tw-group/collapsing-section tw-relative tw-bg-grey-900', collapsed ? 'tw-cursor-pointer' : ''), onClick: () => {
|
|
49102
49099
|
if (collapsed)
|
|
49103
49100
|
setCollapsed(false);
|
|
49104
49101
|
}, children: jsxRuntime.jsxs("div", { className: cn('tw-relative tw-border-material-light-thin tw-transition-[border-width] tw-duration-200', !collapsed && 'tw-border-y-[4px]'), children: [jsxRuntime.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: () => {
|
|
49105
49102
|
if (!collapsed)
|
|
49106
49103
|
setCollapsed(true);
|
|
49107
|
-
}, children: jsxRuntime.jsx(ChevronLargeDownIcon, { className: cn('tw-origin-center tw-text-grey-300 tw-transition-transform tw-duration-200', collapsed && '-tw-rotate-90') }) }), jsxRuntime.jsx(
|
|
49104
|
+
}, children: jsxRuntime.jsx(ChevronLargeDownIcon, { className: cn('tw-origin-center tw-text-grey-300 tw-transition-transform tw-duration-200', collapsed && '-tw-rotate-90') }) }), jsxRuntime.jsx("div", {
|
|
49105
|
+
// hover highlight
|
|
49106
|
+
className: "tw-pointer-events-none tw-absolute tw-left-0 tw-top-0 tw-h-[50px] tw-w-full", children: jsxRuntime.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') }) }), jsxRuntime.jsx(Collapse, { collapsed: collapsed, collapsedHeight: collapsedHeight, children: children })] }) }));
|
|
49108
49107
|
}
|
|
49109
49108
|
|
|
49110
49109
|
function BridgeTransactionView({ title, hash, status, url, amount, token, fromChain, toChain, address, actions, fees, boosted, timeToComplete, }) {
|
|
@@ -49320,7 +49319,7 @@ function blendColors(foreground, background) {
|
|
|
49320
49319
|
|
|
49321
49320
|
function SquidConfigProvider({ theme = lightTheme, children, themeType = 'light', }) {
|
|
49322
49321
|
const parsedStyle = parseSquidTheme(theme);
|
|
49323
|
-
return (jsxRuntime.jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: "tw-group tw-relative tw-font-geist", children: children }));
|
|
49322
|
+
return (jsxRuntime.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 }));
|
|
49324
49323
|
}
|
|
49325
49324
|
|
|
49326
49325
|
exports.ActionLayout = ActionLayout;
|
|
@@ -49358,6 +49357,7 @@ exports.DropdownMenu = DropdownMenu;
|
|
|
49358
49357
|
exports.DropdownMenuItem = DropdownMenuItem;
|
|
49359
49358
|
exports.ErrorMessage = ErrorMessage;
|
|
49360
49359
|
exports.ExploreLayout = ExploreLayout;
|
|
49360
|
+
exports.ExploreNav = ExploreNav;
|
|
49361
49361
|
exports.FeeButton = FeeButton;
|
|
49362
49362
|
exports.FeesAction = FeesAction;
|
|
49363
49363
|
exports.FeesLines = FeesLines;
|