@0xsquid/ui 3.2.2-beta.1.0 → 3.2.2-beta.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +55 -36
- package/dist/cjs/types/components/buttons/CopyButton.d.ts +2 -1
- package/dist/cjs/types/components/buttons/LinkButton.d.ts +3 -1
- package/dist/cjs/types/components/lists/TransactionItem.d.ts +1 -1
- package/dist/cjs/types/components/views/TransactionView/Properties/TimeToCompleteProperty.d.ts +2 -1
- package/dist/cjs/types/components/views/TransactionView/Properties/TokenProperty.d.ts +15 -0
- package/dist/esm/index.js +55 -36
- package/dist/esm/types/components/buttons/CopyButton.d.ts +2 -1
- package/dist/esm/types/components/buttons/LinkButton.d.ts +3 -1
- package/dist/esm/types/components/lists/TransactionItem.d.ts +1 -1
- package/dist/esm/types/components/views/TransactionView/Properties/TimeToCompleteProperty.d.ts +2 -1
- package/dist/esm/types/components/views/TransactionView/Properties/TokenProperty.d.ts +15 -0
- package/dist/index.css +1 -1
- package/dist/index.d.ts +1 -1
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -4474,6 +4474,7 @@ const backgrounds = {
|
|
|
4474
4474
|
"dark-cover": `linear-gradient(90deg, var(${themeKeysToCssVariables.color["material-dark-thick"].cssVariable}) 45.4%, transparent 50.85%, var(${themeKeysToCssVariables.color["material-dark-thick"].cssVariable}) 55.61%)`,
|
|
4475
4475
|
shimmer: "linear-gradient(90deg, currentColor 0%, currentColor 50%, rgba(251, 251, 253, 0.4) 57.5%, currentColor 65%, currentColor 100%)",
|
|
4476
4476
|
"shimmer-dark": `linear-gradient(90deg, color-mix(in srgb, var(${themeKeysToCssVariables.color["grey-900"].cssVariable}) 40%, transparent) 0%, var(${themeKeysToCssVariables.color["grey-900"].cssVariable}) 10%, color-mix(in srgb, var(${themeKeysToCssVariables.color["grey-900"].cssVariable}) 40%, transparent) 60%)`,
|
|
4477
|
+
"shimmer-light": `linear-gradient(90deg, color-mix(in srgb, var(${themeKeysToCssVariables.color["grey-100"].cssVariable}) 40%, transparent) 0%, var(${themeKeysToCssVariables.color["grey-100"].cssVariable}) 10%, color-mix(in srgb, var(${themeKeysToCssVariables.color["grey-100"].cssVariable}) 40%, transparent) 60%)`,
|
|
4477
4478
|
"loading-gradient": `linear-gradient(
|
|
4478
4479
|
to right,
|
|
4479
4480
|
var(${themeKeysToCssVariables.color["material-light-thin"].cssVariable}) 43%,
|
|
@@ -5157,7 +5158,7 @@ const borderClassMap = {
|
|
|
5157
5158
|
"outline-lg": "tw-outline tw-outline-2 tw-outline-grey-900",
|
|
5158
5159
|
inset: "tw-outline tw-outline-1 -tw-outline-offset-1 tw-outline-material-light-thin",
|
|
5159
5160
|
};
|
|
5160
|
-
function Image$
|
|
5161
|
+
function Image$2(_a) {
|
|
5161
5162
|
var { src, size = "medium", className: propsClassName, placeholderImageUrl, border = "none", rounded = "xxs", shadow = false, children, containerProps } = _a, props = __rest(_a, ["src", "size", "className", "placeholderImageUrl", "border", "rounded", "shadow", "children", "containerProps"]);
|
|
5162
5163
|
const className = cn("tw-object-cover tw-aspect-square tw-relative tw-duration-300 tw-transition-[width,height] tw-max-w-full tw-bg-grey-500", sizeClassMap$2[size], propsClassName, roundedClassMap[rounded], shadow && boxShadowClassMap[size], borderClassMap[border]);
|
|
5163
5164
|
const [imageState, setImageState] = require$$0.useState(exports.ImageState.LOADED);
|
|
@@ -5170,7 +5171,7 @@ function Image$1(_a) {
|
|
|
5170
5171
|
}
|
|
5171
5172
|
|
|
5172
5173
|
function BadgeImage({ image, badge, extraMarginForBadge = false, className, }) {
|
|
5173
|
-
return (((image === null || image === void 0 ? void 0 : image.src) != null || (image === null || image === void 0 ? void 0 : image.placeholderImageUrl) != null) && (jsxRuntime.jsxs("div", { className: cn("tw-relative tw-w-fit", extraMarginForBadge && "tw-mr-1.5", className), children: [jsxRuntime.jsx(Image$
|
|
5174
|
+
return (((image === null || image === void 0 ? void 0 : image.src) != null || (image === null || image === void 0 ? void 0 : image.placeholderImageUrl) != null) && (jsxRuntime.jsxs("div", { className: cn("tw-relative tw-w-fit", extraMarginForBadge && "tw-mr-1.5", className), children: [jsxRuntime.jsx(Image$2, Object.assign({}, image)), ((badge === null || badge === void 0 ? void 0 : badge.src) != null || (badge === null || badge === void 0 ? void 0 : badge.children) != null) && (jsxRuntime.jsx("div", { className: cn("tw-absolute tw-bottom-0 tw-right-0 tw-h-fit tw-w-fit", image.size !== "xxlarge" && "tw-translate-x-1/3"), children: jsxRuntime.jsx(Image$2, Object.assign({}, badge)) }))] })));
|
|
5174
5175
|
}
|
|
5175
5176
|
|
|
5176
5177
|
const LayoutGroupContext = require$$0.createContext({});
|
|
@@ -15608,6 +15609,11 @@ const gradientClassMap = {
|
|
|
15608
15609
|
vertical: "tw-h-[69px] tw-w-[30px] tw-justify-between tw-flex-col tw-assets-drip-mask",
|
|
15609
15610
|
horizontal: "tw-h-10 tw-w-[92px] tw-justify-between tw-assets-drip-horizontal-mask",
|
|
15610
15611
|
};
|
|
15612
|
+
const Image$1 = ({ data }) => {
|
|
15613
|
+
if (data)
|
|
15614
|
+
return jsxRuntime.jsx("img", { src: data.logoURI });
|
|
15615
|
+
return (jsxRuntime.jsx(LoadingSkeleton, { width: "80", height: "40", className: "tw-absolute tw-inset-0 tw-translate-x-[-8px] tw-bg-grey-700 tw-text-transparent" }));
|
|
15616
|
+
};
|
|
15611
15617
|
const Drip = ({ direction = "vertical", from, to }) => {
|
|
15612
15618
|
var _a, _b;
|
|
15613
15619
|
const isVertical = direction === "vertical";
|
|
@@ -15619,7 +15625,7 @@ const Drip = ({ direction = "vertical", from, to }) => {
|
|
|
15619
15625
|
}, [chainBgColor, tokenBgColor]);
|
|
15620
15626
|
return (jsxRuntime.jsxs("div", { className: "tw-relative", children: [jsxRuntime.jsx("div", { className: cn("tw-absolute -tw-translate-x-[1px] -tw-translate-y-[1px] tw-bg-material-light-average tw-backdrop-blur/10", containerClassMap[direction]) }), jsxRuntime.jsxs("div", { className: cn("tw-flex tw-gap-2", gradientClassMap[direction]), style: {
|
|
15621
15627
|
backgroundImage: bgGradient,
|
|
15622
|
-
}, children: [jsxRuntime.jsx("div", { className: "tw-aspect-square tw-rounded-full", children:
|
|
15628
|
+
}, children: [jsxRuntime.jsx("div", { className: "tw-aspect-square tw-rounded-full", children: jsxRuntime.jsx(Image$1, { data: from }) }), jsxRuntime.jsx("div", { className: "tw-relative tw-aspect-square tw-rounded-full", children: jsxRuntime.jsx(Image$1, { data: to }) })] })] }));
|
|
15623
15629
|
};
|
|
15624
15630
|
|
|
15625
15631
|
// font size, line height, and letter spacing classes
|
|
@@ -15663,7 +15669,7 @@ function HeadingText({ children, bold = false, size, className, }) {
|
|
|
15663
15669
|
}
|
|
15664
15670
|
|
|
15665
15671
|
function IconLabel({ src, children, rounded }) {
|
|
15666
|
-
return (jsxRuntime.jsxs("div", { className: "tw-inline-flex tw-items-center tw-gap-squid-xxs", children: [src && jsxRuntime.jsx(Image$
|
|
15672
|
+
return (jsxRuntime.jsxs("div", { className: "tw-inline-flex tw-items-center tw-gap-squid-xxs", children: [src && jsxRuntime.jsx(Image$2, { src: src, rounded: rounded, size: "medium" }), typeof children === "string" ? (jsxRuntime.jsx(CaptionText, { children: children })) : (children)] }));
|
|
15667
15673
|
}
|
|
15668
15674
|
|
|
15669
15675
|
const sizeClassMap$1 = {
|
|
@@ -15683,7 +15689,7 @@ const customImageStylesMap = {
|
|
|
15683
15689
|
},
|
|
15684
15690
|
};
|
|
15685
15691
|
function ImageGroup({ imageUrls, badge, size = "large", }) {
|
|
15686
|
-
return (jsxRuntime.jsxs("div", { className: cn("tw-relative tw-flex tw-flex-shrink-0 tw-flex-wrap tw-content-center tw-items-center tw-justify-center tw-gap-0.5 tw-border tw-border-solid tw-border-material-light-thin tw-bg-grey-700", sizeClassMap$1[size]), children: [imageUrls.map((url) => (jsxRuntime.jsx(Image$
|
|
15692
|
+
return (jsxRuntime.jsxs("div", { className: cn("tw-relative tw-flex tw-flex-shrink-0 tw-flex-wrap tw-content-center tw-items-center tw-justify-center tw-gap-0.5 tw-border tw-border-solid tw-border-material-light-thin tw-bg-grey-700", sizeClassMap$1[size]), children: [imageUrls.map((url) => (jsxRuntime.jsx(Image$2, { src: url, size: "medium", rounded: "xxs", style: customImageStylesMap[size] }, url))), badge != null && size !== "small" && (jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px]", children: jsxRuntime.jsx(Image$2, Object.assign({}, badge, { border: "outline-lg", size: "medium" })) }))] }));
|
|
15687
15693
|
}
|
|
15688
15694
|
|
|
15689
15695
|
function Approve() {
|
|
@@ -16410,7 +16416,7 @@ function UsdAmount({ usdAmount }) {
|
|
|
16410
16416
|
}
|
|
16411
16417
|
|
|
16412
16418
|
const CopyButton = (_a) => {
|
|
16413
|
-
var { copyText, className, size } = _a
|
|
16419
|
+
var { copyText, label, className, size } = _a; __rest(_a, ["copyText", "label", "className", "size"]);
|
|
16414
16420
|
const [copied, setCopied] = require$$0.useState(false);
|
|
16415
16421
|
const handleCopy = () => {
|
|
16416
16422
|
navigator.clipboard.writeText(copyText).catch(() => { });
|
|
@@ -16419,7 +16425,7 @@ const CopyButton = (_a) => {
|
|
|
16419
16425
|
setCopied(false);
|
|
16420
16426
|
}, 1500);
|
|
16421
16427
|
};
|
|
16422
|
-
return (jsxRuntime.jsxs("button",
|
|
16428
|
+
return (jsxRuntime.jsxs("button", { type: "button", onClick: handleCopy, className: "tw-flex tw-items-center tw-gap-0.5", children: [label, jsxRuntime.jsxs("div", { className: cn("tw-relative tw-cursor-pointer tw-rounded-squid-xs tw-p-0.5 tw-text-royal-500 hover:tw-bg-material-light-thin", className), children: [jsxRuntime.jsx(CopyOutlinedIcon, { strokeWidth: "2", size: size === "small" ? "1rem" : "1.5rem", className: cn("tw-text-royal-500", copied ? "tw-invisible" : "tw-visible") }), jsxRuntime.jsx("span", { className: cn("tw-absolute tw-left-1/2 tw-top-1/2 -tw-translate-x-1/2 -tw-translate-y-1/2", copied ? "tw-visible" : "tw-invisible"), children: jsxRuntime.jsx(Checkmark1Icon, { size: size === "small" ? "0.75rem" : "1.35rem" }) })] })] }));
|
|
16423
16429
|
};
|
|
16424
16430
|
|
|
16425
16431
|
function HashLink({ showTx = false, hash, showCopyButton = false, url, children, className, formattedHash, size, }) {
|
|
@@ -16441,7 +16447,7 @@ function ImageStack(_a) {
|
|
|
16441
16447
|
// @ts-expect-error Custom CSS property
|
|
16442
16448
|
"--image-stack-spacing": spacing, padding: addExtraPadding && imageProps.border
|
|
16443
16449
|
? extraPaddingMap[imageProps.border]
|
|
16444
|
-
: undefined }), className: cn("tw-flex tw-items-center tw-space-x-[--image-stack-spacing]", containerProps === null || containerProps === void 0 ? void 0 : containerProps.className), children: imagesToRender.map((url, index, self) => (jsxRuntime.jsx(Image$
|
|
16450
|
+
: undefined }), className: cn("tw-flex tw-items-center tw-space-x-[--image-stack-spacing]", containerProps === null || containerProps === void 0 ? void 0 : containerProps.className), children: imagesToRender.map((url, index, self) => (jsxRuntime.jsx(Image$2, Object.assign({ src: url, containerProps: stackOnTop
|
|
16445
16451
|
? {
|
|
16446
16452
|
style: {
|
|
16447
16453
|
zIndex: self.length - index,
|
|
@@ -39481,7 +39487,7 @@ function DescriptionBlocks(_a) {
|
|
|
39481
39487
|
.split(" ")
|
|
39482
39488
|
.map((word, i) => (jsxRuntime.jsx(BodyText, { size: "small", tight: true, children: word }, i))));
|
|
39483
39489
|
case "image":
|
|
39484
|
-
return (jsxRuntime.jsx(Image$
|
|
39490
|
+
return (jsxRuntime.jsx(Image$2, { size: "medium", src: block.value, rounded: block.rounded ? "full" : "xxs" }, index));
|
|
39485
39491
|
default:
|
|
39486
39492
|
return null;
|
|
39487
39493
|
}
|
|
@@ -39849,7 +39855,7 @@ function QrCode({ matrix, size: renderedSize, imageUrl }) {
|
|
|
39849
39855
|
}
|
|
39850
39856
|
};
|
|
39851
39857
|
drawQrCode(cleanMatrix);
|
|
39852
|
-
} }), hasImage && (jsxRuntime.jsx("div", { className: "tw-absolute tw-left-1/2 tw-top-1/2 -tw-translate-x-1/2 -tw-translate-y-1/2 tw-rounded-squid-m tw-outline tw-outline-[0.25rem] tw-outline-offset-[0.375rem] tw-outline-material-light-thin", children: jsxRuntime.jsx(Image$
|
|
39858
|
+
} }), hasImage && (jsxRuntime.jsx("div", { className: "tw-absolute tw-left-1/2 tw-top-1/2 -tw-translate-x-1/2 -tw-translate-y-1/2 tw-rounded-squid-m tw-outline tw-outline-[0.25rem] tw-outline-offset-[0.375rem] tw-outline-material-light-thin", children: jsxRuntime.jsx(Image$2, { src: imageUrl, rounded: "m", border: "inset", className: "tw-object-contain !tw-outline-material-dark-average", style: {
|
|
39853
39859
|
width: renderedSize * 0.2,
|
|
39854
39860
|
height: renderedSize * 0.2,
|
|
39855
39861
|
} }) }))] }));
|
|
@@ -39905,7 +39911,7 @@ function TokenOnlyButton({ token, onClick, variant = "primary", isLoading = fals
|
|
|
39905
39911
|
const AddressHeader = ({ direction, onClick, isDisabled, tooltip, label, walletIconUrl, isLoading, displayLabel = true, highlightLabel = false, showIcon = true, }) => {
|
|
39906
39912
|
const ButtonTag = onClick && !isDisabled ? "button" : "div";
|
|
39907
39913
|
return (jsxRuntime.jsx("header", { className: "tw-flex tw-h-squid-xl2 tw-items-center tw-self-stretch tw-px-squid-m tw-py-squid-xxs", children: jsxRuntime.jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxRuntime.jsxs(ButtonTag, { onClick: onClick, disabled: isDisabled, type: onClick ? "button" : undefined, className: cn("tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs", onClick && !isDisabled && "hover:tw-bg-material-light-thin", isLoading && "tw-opacity-50"), children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-500", children: direction === "from" ? "Pay" : "Receive" }), displayLabel && !isLoading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-600", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [showIcon &&
|
|
39908
|
-
(walletIconUrl ? (jsxRuntime.jsx(Image$
|
|
39914
|
+
(walletIconUrl ? (jsxRuntime.jsx(Image$2, { className: "!tw-h-6 !tw-w-6 !tw-rounded-lg", src: walletIconUrl })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-h-6 tw-w-6 tw-items-center tw-justify-center tw-rounded-lg tw-bg-royal-500 tw-px-0.5 tw-text-grey-900 tw-outline tw-outline-1 tw-outline-material-light-thin", children: jsxRuntime.jsx(WalletIcon, { size: "18" }) }))), jsxRuntime.jsx(BodyText, { size: "small", className: cn(highlightLabel ? "tw-text-royal-500" : "tw-text-grey-300"), children: label }), jsxRuntime.jsx(ChevronArrowIcon, { className: cn(highlightLabel ? "tw-text-royal-500" : "tw-text-grey-600"), size: "16" })] })] }))] }) })) }));
|
|
39909
39915
|
};
|
|
39910
39916
|
function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp = false, chain, token, direction = "from", onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive = true, isLoading = false, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails = true, fullHeight = true, debounceInput = true, showWalletButtonHeader = true, hideChainSelector = false, }) {
|
|
39911
39917
|
var _a, _b, _c, _d, _e;
|
|
@@ -40142,7 +40148,13 @@ function useMediaQuery(query, { defaultValue = false, initializeWithValue = true
|
|
|
40142
40148
|
}
|
|
40143
40149
|
|
|
40144
40150
|
const useTimer = ({ startTime: _startTime, immediateStart = true, }) => {
|
|
40145
|
-
const
|
|
40151
|
+
const initialDuration = require$$0.useMemo(() => {
|
|
40152
|
+
if (!_startTime)
|
|
40153
|
+
return "0s";
|
|
40154
|
+
const elapsedTime = Date.now() - _startTime;
|
|
40155
|
+
return formatDuration(elapsedTime);
|
|
40156
|
+
}, []);
|
|
40157
|
+
const [timer, setTimer] = require$$0.useState(initialDuration);
|
|
40146
40158
|
const intervalRef = require$$0.useRef(null);
|
|
40147
40159
|
const startTimer = () => {
|
|
40148
40160
|
if (intervalRef.current !== null)
|
|
@@ -40381,7 +40393,7 @@ function ListItem(_a) {
|
|
|
40381
40393
|
size: "medium",
|
|
40382
40394
|
border: "outline-lg",
|
|
40383
40395
|
}
|
|
40384
|
-
: undefined }))) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon !== null && mainIcon !== void 0 ? mainIcon : (jsxRuntime.jsx(Image$
|
|
40396
|
+
: undefined }))) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon !== null && mainIcon !== void 0 ? mainIcon : (jsxRuntime.jsx(Image$2, { size: "large", src: mainImageUrl, placeholderImageUrl: placeholderImageUrl, rounded: rounded })) })), jsxRuntime.jsxs("div", { className: cn("tw-flex tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs", multilineSubtitle ? "tw-pl-squid-xxs" : "tw-h-[40px]", !multilineSubtitle &&
|
|
40385
40397
|
// 'large' variant has extra padding
|
|
40386
40398
|
(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-hidden mobile-lg:tw-block" : "tw-block"), children: itemTitle })) : (itemTitle), size === "large" &&
|
|
40387
40399
|
((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
|
|
@@ -40443,7 +40455,7 @@ function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount,
|
|
|
40443
40455
|
onClick,
|
|
40444
40456
|
}
|
|
40445
40457
|
: {};
|
|
40446
|
-
return (jsxRuntime.jsxs("li", { ref: itemRef, className: cn("tw-relative tw-flex tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", !!dropdownMenuContent && "tw-highlight-adjacent"), children: [jsxRuntime.jsxs(ItemTag, Object.assign({}, itemTagProps, { className: cn("tw-group/history-item tw-peer/history-item tw-relative tw-flex tw-w-full tw-flex-shrink-0 tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", isInteractive && "hover:tw-bg-material-light-thin"), children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-h-10 tw-w-squid-xxl tw-min-w-squid-xxl", children: [!!statusBadge[status].badge && (jsxRuntime.jsx("span", { className: cn("tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-10 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-p-0.5 tw-outline tw-outline-1 tw-outline-grey-900", statusBadge[status].containerClassName), children: statusBadge[status].badge })), txType === "swap" ? (jsxRuntime.jsx(ImageStack, { imageUrls: [firstImageUrl, secondImageUrl], size: "xlarge", spacing: "-20px", rounded: "full", border: "outline-sm", stackOnTop: false })) : (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center -tw-space-x-squid-m", children: [jsxRuntime.jsx(Image$
|
|
40458
|
+
return (jsxRuntime.jsxs("li", { ref: itemRef, className: cn("tw-relative tw-flex tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", !!dropdownMenuContent && "tw-highlight-adjacent"), children: [jsxRuntime.jsxs(ItemTag, Object.assign({}, itemTagProps, { className: cn("tw-group/history-item tw-peer/history-item tw-relative tw-flex tw-w-full tw-flex-shrink-0 tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", isInteractive && "hover:tw-bg-material-light-thin"), children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-h-10 tw-w-squid-xxl tw-min-w-squid-xxl", children: [!!statusBadge[status].badge && (jsxRuntime.jsx("span", { className: cn("tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-10 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-p-0.5 tw-outline tw-outline-1 tw-outline-grey-900", statusBadge[status].containerClassName), children: statusBadge[status].badge })), txType === "swap" ? (jsxRuntime.jsx(ImageStack, { imageUrls: [firstImageUrl, secondImageUrl], size: "xlarge", spacing: "-20px", rounded: "full", border: "outline-sm", stackOnTop: false })) : (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center -tw-space-x-squid-m", children: [jsxRuntime.jsx(Image$2, { src: firstImageUrl, size: "xlarge", rounded: "xs" }), jsxRuntime.jsx(Image$2, { src: secondImageUrl, size: "xlarge", rounded: "full", border: "outline-sm" })] }))] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [txType === "swap" ? (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [jsxRuntime.jsx(CaptionText, { children: fromLabel }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronRightSmallIcon, {}) }), jsxRuntime.jsx(CaptionText, { children: toLabel })] })) : (jsxRuntime.jsx(CaptionText, { children: fromLabel })), jsxRuntime.jsx("div", { className: cn("tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs tw-hide-on-parent-hover", !!dropdownMenuContent &&
|
|
40447
40459
|
"tw-transition-opacity group-hover/history-item:tw-hidden group-hover/history-item:tw-opacity-0 peer-focus:tw-hidden peer-focus:tw-opacity-0", isDropdownOpen && "tw-opacity-0"), children: statusLabel })] }), jsxRuntime.jsx("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: txType === "swap" ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), jsxRuntime.jsx(BodyText, { size: "small", children: toAmount })] })) : (jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount })) })] })] })), !!dropdownMenuContent && (jsxRuntime.jsx(ListItemActionsButton, { ref: openDropdownButtonRef, onClick: openDropdown, isActive: isDropdownOpen, className: "peer-hover/history-item:tw-opacity-100" })), isDropdownOpen && !!dropdownMenuContent ? (jsxRuntime.jsx(DropdownMenu, { menuRef: menuRef, isHidden: !dropdownStyles, className: cn(!!dropdownStyles &&
|
|
40448
40460
|
dropdownPositionClassMap[dropdownStyles.position]), dropdownRef: dropdownRef, children: dropdownMenuContent })) : null] }));
|
|
40449
40461
|
}
|
|
@@ -40604,7 +40616,7 @@ function TokenGroup({ isSelected = false, tokenItems, priceChange, balance, bala
|
|
|
40604
40616
|
: "tw-h-squid-xl tw-gap-squid-xxs"
|
|
40605
40617
|
: isSmallVariant
|
|
40606
40618
|
? "tw-h-[50px] tw-gap-squid-s tw-py-squid-xxs"
|
|
40607
|
-
: "tw-h-squid-xl tw-gap-squid-xxs"), children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-min-w-fit", children: [jsxRuntime.jsx(Image$
|
|
40619
|
+
: "tw-h-squid-xl tw-gap-squid-xxs"), children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-min-w-fit", children: [jsxRuntime.jsx(Image$2, { src: imageUrl, placeholderImageUrl: fallbackImageUrl, size: isLargeVariant && !isCollapsed
|
|
40608
40620
|
? "medium"
|
|
40609
40621
|
: (_a = mainImageSizeMap[variant]) !== null && _a !== void 0 ? _a : "medium", rounded: isCompactVariant ? "xxs" : "full", style: {
|
|
40610
40622
|
transition: `${ANIMATION_DURATIONS.GENERIC}ms ${ANIMATION_TIMINGS.GENERIC}`,
|
|
@@ -40692,7 +40704,7 @@ function Timestamp({ time }) {
|
|
|
40692
40704
|
}
|
|
40693
40705
|
|
|
40694
40706
|
function ApproveAction({ status, nextStatus, showTimeline, showBody, profile, chain, wallet, timestamp, hash, url, }) {
|
|
40695
|
-
return (jsxRuntime.jsxs(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsxRuntime.jsx(ThumbsUp, { fill: true }), description: "Approve contract", title: profile.label, icon: jsxRuntime.jsx(Image$
|
|
40707
|
+
return (jsxRuntime.jsxs(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsxRuntime.jsx(ThumbsUp, { fill: true }), description: "Approve contract", title: profile.label, icon: jsxRuntime.jsx(Image$2, { src: profile.imageURI, rounded: "full", 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-300" }), jsxRuntime.jsx(WalletLink, Object.assign({}, wallet))] }) }), (timestamp != null || hash != null) && (jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }))] }));
|
|
40696
40708
|
}
|
|
40697
40709
|
|
|
40698
40710
|
function BridgeAction({ status, nextStatus, showTimeline, showBody, token, chain, provider, timestamp, hash, url, }) {
|
|
@@ -40725,15 +40737,15 @@ function linkActionTimelineProps(actions, collapsed) {
|
|
|
40725
40737
|
}
|
|
40726
40738
|
|
|
40727
40739
|
function ReceiveNFTAction({ status, nextStatus, showTimeline, showBody, nft, chain, wallet, timestamp, hash, url, }) {
|
|
40728
|
-
return (jsxRuntime.jsxs(ActionLayout, { status: status, statusIcon: jsxRuntime.jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive NFT", title: nft.name, icon: jsxRuntime.jsx(Image$
|
|
40740
|
+
return (jsxRuntime.jsxs(ActionLayout, { status: status, statusIcon: jsxRuntime.jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive NFT", title: nft.name, icon: jsxRuntime.jsx(Image$2, { src: nft.imageURI, rounded: "xxs", 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 })] }));
|
|
40729
40741
|
}
|
|
40730
40742
|
|
|
40731
40743
|
function ReceiveTokensAction({ status, nextStatus, showTimeline, showBody, token, amount, chain, wallet, timestamp, hash, url, }) {
|
|
40732
|
-
return (jsxRuntime.jsxs(ActionLayout, { status: status, statusIcon: jsxRuntime.jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive tokens", title: `${amount} ${token.symbol}`, icon: jsxRuntime.jsx(Image$
|
|
40744
|
+
return (jsxRuntime.jsxs(ActionLayout, { status: status, statusIcon: jsxRuntime.jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive tokens", title: `${amount} ${token.symbol}`, icon: jsxRuntime.jsx(Image$2, { src: token.logoURI, rounded: "full", 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 })] }));
|
|
40733
40745
|
}
|
|
40734
40746
|
|
|
40735
40747
|
function SendTokensAction({ status, nextStatus, showTimeline, showBody, token, amount, chain, wallet, timestamp, hash, url, }) {
|
|
40736
|
-
return (jsxRuntime.jsxs(ActionLayout, { status: status, statusIcon: jsxRuntime.jsx(ArrowRightUpIcon, {}), nextStatus: nextStatus, description: "Send tokens", title: `${amount} ${token.symbol}`, icon: jsxRuntime.jsx(Image$
|
|
40748
|
+
return (jsxRuntime.jsxs(ActionLayout, { status: status, statusIcon: jsxRuntime.jsx(ArrowRightUpIcon, {}), nextStatus: nextStatus, description: "Send tokens", title: `${amount} ${token.symbol}`, icon: jsxRuntime.jsx(Image$2, { src: token.logoURI, rounded: "full", 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 })] }));
|
|
40737
40749
|
}
|
|
40738
40750
|
|
|
40739
40751
|
function StakeAction({ status, nextStatus, showTimeline, showBody, token, provider, timestamp, hash, url, }) {
|
|
@@ -40793,7 +40805,7 @@ function TransactionAction({ type, props }) {
|
|
|
40793
40805
|
|
|
40794
40806
|
const TransactionItem = (props) => {
|
|
40795
40807
|
const { status, hash, type, fromToken, toToken, fromChain, toChain, fromAmount, toAmount, timestamp, timeToComplete, } = props;
|
|
40796
|
-
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-gap-5 tw-px-2.5 tw-py-2.5", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-[5px]", children: [jsxRuntime.jsx("div", { className: "tw-to-grey-700/0 tw-h-5 tw-w-0.5 tw-rounded-full tw-bg-gradient-to-t tw-from-grey-700" }), jsxRuntime.jsx(TransactionState, { status: status, variant: "compact" }), jsxRuntime.jsx("div", { className: "tw-to-grey-700/0 tw-h-5 tw-w-0.5 tw-rounded-full tw-bg-gradient-to-b tw-from-grey-700" })] }), jsxRuntime.jsx("div", { className: "tw-w-8", children: jsxRuntime.jsx(OrderMedia, Object.assign({}, props)) }), jsxRuntime.jsxs("div", { className: "tw-flex tw-grow tw-flex-col tw-gap-[5px]", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-[5px]", children: [jsxRuntime.jsx(OrderType, { type: type }), jsxRuntime.jsx("div", { className: "tw-h-2.5 tw-w-0.5 tw-rounded-full tw-bg-grey-600" }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: formatHash(hash) })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-text-grey-400", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-gap-1 tw-pt-[1px]", children: fromChain ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$
|
|
40808
|
+
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-gap-5 tw-px-2.5 tw-py-2.5", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-[5px]", children: [jsxRuntime.jsx("div", { className: "tw-to-grey-700/0 tw-h-5 tw-w-0.5 tw-rounded-full tw-bg-gradient-to-t tw-from-grey-700" }), jsxRuntime.jsx(TransactionState, { status: status, variant: "compact" }), jsxRuntime.jsx("div", { className: "tw-to-grey-700/0 tw-h-5 tw-w-0.5 tw-rounded-full tw-bg-gradient-to-b tw-from-grey-700" })] }), jsxRuntime.jsx("div", { className: "tw-w-8", children: jsxRuntime.jsx(OrderMedia, Object.assign({}, props)) }), jsxRuntime.jsxs("div", { className: "tw-flex tw-grow tw-flex-col tw-gap-[5px]", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-[5px]", children: [jsxRuntime.jsx(OrderType, { type: type }), jsxRuntime.jsx("div", { className: "tw-h-2.5 tw-w-0.5 tw-rounded-full tw-bg-grey-600" }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: formatHash(hash) })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-text-grey-400", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-gap-1 tw-pt-[1px]", children: fromChain ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$2, { src: fromChain.logoURI, alt: fromChain.name }), jsxRuntime.jsx(CaptionText, { children: fromChain.name })] })) : (jsxRuntime.jsx(LoadingSkeleton, { width: "80", className: "tw-bg-grey-700 tw-text-transparent" })) }), jsxRuntime.jsx(ChevronRightSmallIcon, { className: "tw-text-grey-600" }), jsxRuntime.jsx("div", { className: "tw-flex tw-gap-1", children: toChain ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$2, { src: toChain.logoURI, alt: toChain.name }), jsxRuntime.jsx(CaptionText, { children: toChain.name })] })) : (jsxRuntime.jsx(LoadingSkeleton, { width: "80", className: "tw-bg-grey-700 tw-text-transparent" })) })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx("div", { className: "tw-text-grey-300", children: fromToken ? (jsxRuntime.jsxs(BodyText, { size: "small", tight: true, className: "tw-whitespace-nowrap", children: [fromAmount, " ", fromToken.symbol] })) : (jsxRuntime.jsx(LoadingSkeleton, { width: "120", className: "tw-bg-grey-700 tw-text-transparent" })) }), jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-text-grey-600" }), jsxRuntime.jsx("div", { className: "tw-text-grey-300", children: toToken ? (jsxRuntime.jsxs(BodyText, { size: "small", tight: true, className: "tw-whitespace-nowrap", children: [toAmount, " ", toToken.symbol] })) : (jsxRuntime.jsx(LoadingSkeleton, { width: "120", className: "tw-bg-grey-700 tw-text-transparent" })) })] })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-text-right", children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-600", children: formatRelativeTime(timestamp) }), timeToComplete && (jsxRuntime.jsxs("div", { className: "tw-mt-0.5 tw-flex tw-flex tw-items-center tw-justify-end tw-gap-0.5 tw-text-right tw-text-grey-500", children: [jsxRuntime.jsx(CaptionText, { children: timeToComplete }), " ", jsxRuntime.jsx(TimeFliesSolidIcon, {})] }))] })] }));
|
|
40797
40809
|
};
|
|
40798
40810
|
const OrderType = ({ type }) => {
|
|
40799
40811
|
switch (type) {
|
|
@@ -40810,7 +40822,7 @@ const OrderType = ({ type }) => {
|
|
|
40810
40822
|
const OrderMedia = (props) => {
|
|
40811
40823
|
switch (props.type) {
|
|
40812
40824
|
case "buy_nft":
|
|
40813
|
-
return (jsxRuntime.jsx("div", { className: "tw-flex tw-h-full tw-items-center tw-justify-center", children: jsxRuntime.jsx(Image$
|
|
40825
|
+
return (jsxRuntime.jsx("div", { className: "tw-flex tw-h-full tw-items-center tw-justify-center", children: jsxRuntime.jsx(Image$2, { src: props.nft.imageUrl, alt: "", size: "xxlarge" }) }));
|
|
40814
40826
|
case "swap":
|
|
40815
40827
|
default:
|
|
40816
40828
|
return jsxRuntime.jsx(Drip, { from: props.fromToken, to: props.toToken });
|
|
@@ -40934,7 +40946,7 @@ const TokenModalHeader = ({ token, chain, onLikeToken, onClose, isFavorite, }) =
|
|
|
40934
40946
|
border: "outline-lg",
|
|
40935
40947
|
} }) }), jsxRuntime.jsxs("span", { className: "tw-absolute tw-right-squid-xs tw-top-squid-xs tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(IconButton, { className: "tw-group/token-detail-fav-icon tw-text-grey-300", onClick: onLikeToken, icon: isFavorite ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FilledHeartIcon, { className: "tw-block group-hover/token-detail-fav-icon:tw-hidden" }), jsxRuntime.jsx(BrokenHeartIcon, { className: "tw-hidden group-hover/token-detail-fav-icon:tw-block" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EmptyHeartIcon, { className: "tw-block group-hover/token-detail-fav-icon:tw-hidden" }), jsxRuntime.jsx(FilledHeartIcon, { className: "tw-hidden group-hover/token-detail-fav-icon:tw-block" })] })) }), jsxRuntime.jsx(IconButton, { className: "tw-text-grey-300", onClick: onClose, icon: jsxRuntime.jsx(CircleXFilledIcon, {}) })] })] }));
|
|
40936
40948
|
const TokenInfo = ({ token, tokenPrice, priceChange, loading, }) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(BodyText, { size: "large", loading: { isLoading: loading, width: "100px" }, children: tokenPrice.toLocaleString() }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-row tw-items-center tw-justify-between", children: [jsxRuntime.jsx(BodyText, { size: "small", children: token.name }), jsxRuntime.jsx(PriceChange, { value: priceChange, variant: "large" })] })] }));
|
|
40937
|
-
const BalanceInfo = ({ balance, balanceUSD, token, loading, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: "Balance" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-row tw-justify-between", children: [jsxRuntime.jsxs("span", { className: "tw-flex tw-flex-row tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Image$
|
|
40949
|
+
const BalanceInfo = ({ balance, balanceUSD, token, loading, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: "Balance" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-row tw-justify-between", children: [jsxRuntime.jsxs("span", { className: "tw-flex tw-flex-row tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Image$2, { src: token.image, placeholderImageUrl: token.fallbackImage, alt: token.name, size: "medium", rounded: "full" }), jsxRuntime.jsxs(BodyText, { size: "small", loading: { isLoading: loading, width: "80px" }, children: [balance, " ", token.symbol] })] }), jsxRuntime.jsxs(CaptionText, { className: "tw-text-grey-500", loading: { isLoading: loading, width: "60px" }, children: [jsxRuntime.jsx("span", { className: "tw-opacity-66", children: "$" }), balanceUSD] })] })] }));
|
|
40938
40950
|
const MarketDataItem = ({ label, value, showDollar, loading, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: label }), jsxRuntime.jsxs(CaptionText, { loading: { isLoading: loading, width: "60px" }, children: [showDollar && jsxRuntime.jsx("span", { className: "tw-text-grey-500", children: "$" }), value] })] }));
|
|
40939
40951
|
const TokenMarketData = ({ volume24h, marketCap, totalSupply, loading, }) => (jsxRuntime.jsxs("div", { className: "tw-mb-squid-xs tw-flex tw-h-full tw-w-full tw-flex-row tw-items-center tw-justify-between", children: [jsxRuntime.jsx(MarketDataItem, { label: "24h volume", value: volume24h, showDollar: true, loading: loading }), jsxRuntime.jsx(MarketDataItem, { label: "Market cap", value: marketCap, showDollar: true, loading: loading }), jsxRuntime.jsx(MarketDataItem, { label: "Total supply", value: totalSupply, loading: loading })] }));
|
|
40940
40952
|
const FooterButton = (_a) => {
|
|
@@ -41035,7 +41047,7 @@ function ChainsFilter({ chainType, setChainType, chain, handleChain, chains, })
|
|
|
41035
41047
|
} }), chains
|
|
41036
41048
|
.filter(({ name }) => search === "" ||
|
|
41037
41049
|
name.toLocaleLowerCase().includes(search.toLocaleLowerCase()))
|
|
41038
|
-
.map(({ id, name, iconURI }, index) => (jsxRuntime.jsx(ChainFilter, { name: name, logo: jsxRuntime.jsx(Image$
|
|
41050
|
+
.map(({ id, name, iconURI }, index) => (jsxRuntime.jsx(ChainFilter, { name: name, logo: jsxRuntime.jsx(Image$2, { size: "large", src: iconURI, rounded: "xs" }), selected: (chain === null || chain === void 0 ? void 0 : chain.id) === id, onClick: () => {
|
|
41039
41051
|
handleChain({ id, name, iconURI });
|
|
41040
41052
|
} }, index)))] })] }));
|
|
41041
41053
|
}
|
|
@@ -41535,7 +41547,7 @@ function TxProgressViewHeader({ title, description, isWarning = false, }) {
|
|
|
41535
41547
|
}
|
|
41536
41548
|
|
|
41537
41549
|
function UnsupportedPairNotice({ description, fromImageUrl, toImageUrl, }) {
|
|
41538
|
-
return (jsxRuntime.jsxs("article", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs -tw-space-x-[18px] tw-p-squid-xs", children: [jsxRuntime.jsx(Image$
|
|
41550
|
+
return (jsxRuntime.jsxs("article", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs -tw-space-x-[18px] tw-p-squid-xs", children: [jsxRuntime.jsx(Image$2, { src: fromImageUrl, size: "large", rounded: "xs" }), jsxRuntime.jsx("span", { className: "tw-z-[1] tw-rounded-full tw-bg-grey-900", children: jsxRuntime.jsx(CircleXFilledIcon, {}) }), jsxRuntime.jsx(Image$2, { src: toImageUrl, size: "large", rounded: "xs" })] }), jsxRuntime.jsx(CaptionText, { className: "tw-max-w-[260px] tw-text-balance tw-text-center tw-text-grey-500", children: description })] }));
|
|
41539
41551
|
}
|
|
41540
41552
|
|
|
41541
41553
|
const containerClassname = "tw-px-squid-xs !tw-h-full tw-pt-squid-xxs mobile-xs-height:tw-pb-squid-s tw-text-heading-small tw-font-regular mobile-lg:tw-px-squid-m tw-h-[65px] mobile-sm-height:tw-h-[75px]";
|
|
@@ -42062,12 +42074,12 @@ function DepositAddressView({ isOpen = true, fromToken, toToken, handleClose, fr
|
|
|
42062
42074
|
}, borderType: "outline", children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-h-[160px] tw-w-full tw-items-center tw-justify-center tw-rounded-tl-modal tw-rounded-tr-modal tw-bg-grey-900 tw-py-squid-s tw-text-material-light-thin", style: {
|
|
42063
42075
|
// box shadow simulating bottom outline (we do not use css outline because cannot apply it to only one side)
|
|
42064
42076
|
boxShadow: "0 1px 0 currentColor",
|
|
42065
|
-
}, children: [jsxRuntime.jsx("div", { className: "tw-absolute tw-right-squid-xs tw-top-squid-xs", children: jsxRuntime.jsx(Button, { size: "md", variant: "secondary", label: "Copy" }) }), headerContent] }), jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-squid-m tw-w-full tw-items-end tw-justify-between tw-self-stretch tw-px-squid-m", children: jsxRuntime.jsx(Image$
|
|
42077
|
+
}, children: [jsxRuntime.jsx("div", { className: "tw-absolute tw-right-squid-xs tw-top-squid-xs", children: jsxRuntime.jsx(Button, { size: "md", variant: "secondary", label: "Copy" }) }), headerContent] }), jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-squid-m tw-w-full tw-items-end tw-justify-between tw-self-stretch tw-px-squid-m", children: jsxRuntime.jsx(Image$2, { src: fromToken.logoUrl, rounded: "full", shadow: true, size: "xlarge" }) }), jsxRuntime.jsx(TxProgressViewHeader, { title: title, description: description, isWarning: true }), jsxRuntime.jsxs("ul", { className: "tw-squid-property-gradient-bg-even-container tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-start tw-gap-squid-xxs tw-overflow-auto tw-rounded-squid-l tw-pb-squid-s tw-scrollbar-hidden", children: [jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Deposit address", detail: jsxRuntime.jsx(HashLink, { className: "tw-text-royal-500", formattedHash: depositAddressFormatted, hash: depositAddress, showCopyButton: true, copyIconSize: "24" }), tooltip: (tooltips === null || tooltips === void 0 ? void 0 : tooltips.depositAddress)
|
|
42066
42078
|
? {
|
|
42067
42079
|
tooltipContent: tooltips.depositAddress,
|
|
42068
42080
|
tooltipWidth: "max",
|
|
42069
42081
|
}
|
|
42070
|
-
: undefined }), jsxRuntime.jsx(PropertyListItem, { iconClassName: "tw-flex tw-items-center tw-justify-center", icon: jsxRuntime.jsx(ArrowRightUpIcon, { size: "15", strokeWidth: "1.5" }), label: "Send exactly", detail: jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: jsxRuntime.jsx(CaptionText, { children: fromAmount }) }) }), jsxRuntime.jsx(PropertyListItem, { iconClassName: "tw-flex tw-items-center tw-justify-center", icon: jsxRuntime.jsx(ArrowRightDownIcon, { size: "15", strokeWidth: "1.5" }), label: "You receive", detail: jsxRuntime.jsx(IconLabel, { src: toToken.logoUrl, rounded: "full", children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { children: toAmount }), jsxRuntime.jsx(Loader, { size: "16" })] }) }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$
|
|
42082
|
+
: undefined }), jsxRuntime.jsx(PropertyListItem, { iconClassName: "tw-flex tw-items-center tw-justify-center", icon: jsxRuntime.jsx(ArrowRightUpIcon, { size: "15", strokeWidth: "1.5" }), label: "Send exactly", detail: jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: jsxRuntime.jsx(CaptionText, { children: fromAmount }) }) }), jsxRuntime.jsx(PropertyListItem, { iconClassName: "tw-flex tw-items-center tw-justify-center", icon: jsxRuntime.jsx(ArrowRightDownIcon, { size: "15", strokeWidth: "1.5" }), label: "You receive", detail: jsxRuntime.jsx(IconLabel, { src: toToken.logoUrl, rounded: "full", children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { children: toAmount }), jsxRuntime.jsx(Loader, { size: "16" })] }) }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$2, { src: fromChain.logoUrl, rounded: "xxs", shadow: true, size: "medium" }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$2, { src: toChain.logoUrl, rounded: "xxs", shadow: true, size: "medium" }), jsxRuntime.jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsxRuntime.jsx(TimeRemaining, { timeRemainingSeconds: timeRemainingSeconds, tooltipContent: tooltips === null || tooltips === void 0 ? void 0 : tooltips.timeRemaining })] })] }), jsxRuntime.jsx(Button, { size: "lg", variant: "secondary", label: "Cancel", onClick: handleClose, className: "tw-min-h-button" })] }));
|
|
42071
42083
|
}
|
|
42072
42084
|
function TimeRemaining({ timeRemainingSeconds, tooltipContent, }) {
|
|
42073
42085
|
const timeRemaining = useCountdown(timeRemainingSeconds);
|
|
@@ -83533,7 +83545,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
|
|
|
83533
83545
|
height: "100%",
|
|
83534
83546
|
maxHeight: "100%",
|
|
83535
83547
|
width: "auto",
|
|
83536
|
-
}, autoplay: true, loop: true, src: swapProgressAnimations[swapState] }) }), jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-squid-m tw-w-full tw-items-end tw-justify-between tw-self-stretch tw-px-squid-m", children: swapState === SwapState.COMPLETED ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsxRuntime.jsx(SwapSuccessIcon, {}) }), shareSwapDropdownContent ? (jsxRuntime.jsx(ShareSwapButton, { dropdownContent: shareSwapDropdownContent })) : null] })) : swapState === SwapState.ERROR ? (jsxRuntime.jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "error" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsxRuntime.jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "warning" })) : isSendTransaction || isBridgeTransaction ? (jsxRuntime.jsx(Image$
|
|
83548
|
+
}, autoplay: true, loop: true, src: swapProgressAnimations[swapState] }) }), jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-squid-m tw-w-full tw-items-end tw-justify-between tw-self-stretch tw-px-squid-m", children: swapState === SwapState.COMPLETED ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsxRuntime.jsx(SwapSuccessIcon, {}) }), shareSwapDropdownContent ? (jsxRuntime.jsx(ShareSwapButton, { dropdownContent: shareSwapDropdownContent })) : null] })) : swapState === SwapState.ERROR ? (jsxRuntime.jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "error" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsxRuntime.jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "warning" })) : isSendTransaction || isBridgeTransaction ? (jsxRuntime.jsx(Image$2, { src: fromToken.logoUrl, rounded: "full", size: "xlarge", shadow: true })) : (jsxRuntime.jsx(TokenPair, { firstToken: {
|
|
83537
83549
|
bgColor: fromToken.bgColor,
|
|
83538
83550
|
logoURI: fromToken.logoUrl,
|
|
83539
83551
|
}, secondToken: {
|
|
@@ -83544,7 +83556,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
|
|
|
83544
83556
|
: isBridgeTransaction
|
|
83545
83557
|
? "Bridge"
|
|
83546
83558
|
: "Swap", detail: isSendTransaction ? (jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount })) : (jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount }), to: jsxRuntime.jsx(IconLabel, { src: toToken.logoUrl, rounded: "full", children: toAmount }) })) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: isSendTransaction ||
|
|
83547
|
-
fromChain.networkName === toChain.networkName ? (jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Image$
|
|
83559
|
+
fromChain.networkName === toChain.networkName ? (jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Image$2, { size: "medium", rounded: "xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] })) : (jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$2, { size: "medium", rounded: "xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$2, { size: "medium", rounded: "xxs", src: toChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: toChain.networkName })] }) })) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsxRuntime.jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsxRuntime.jsx(CaptionText, { children: timer })) : (jsxRuntime.jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsxRuntime.jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => {
|
|
83548
83560
|
stopTimer();
|
|
83549
83561
|
}, onTxStart: () => {
|
|
83550
83562
|
startTimer();
|
|
@@ -83642,8 +83654,8 @@ function ShareSwapButton({ dropdownContent, }) {
|
|
|
83642
83654
|
}, children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-px-squid-xxs", children: "Share" }), jsxRuntime.jsx(ChevronDownSmallIcon, { size: "24", strokeWidth: "1.5" })] }) }), children: dropdownContent }));
|
|
83643
83655
|
}
|
|
83644
83656
|
|
|
83645
|
-
const TimeToCompleteProperty = ({ timeToComplete }) => {
|
|
83646
|
-
return (jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg:
|
|
83657
|
+
const TimeToCompleteProperty = ({ timeToComplete, showGradientBg, }) => {
|
|
83658
|
+
return (jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: showGradientBg, icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxRuntime.jsx("div", { className: "tw-flex tw-items-center", children: jsxRuntime.jsx(BodyText, { size: "small", children: timeToComplete }) }) }));
|
|
83647
83659
|
};
|
|
83648
83660
|
|
|
83649
83661
|
function TransactionViewLayout(_a) {
|
|
@@ -83679,7 +83691,7 @@ function PropertiesSkeleton() {
|
|
|
83679
83691
|
function BuyNFTTransactionView({ title = "Buy", hash, status, url, price, token, marketplace, fromChain, toChain, fromAddress, toAddress, boosted, timeToComplete, timestamp, nft, actions, fees, isLoading, }) {
|
|
83680
83692
|
if (isLoading)
|
|
83681
83693
|
return jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading });
|
|
83682
|
-
return (jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading, header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsx(Image$
|
|
83694
|
+
return (jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading, header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsx(Image$2, { src: nft.imageURI, 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, formattedHash: formatHash(hash) })] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { className: "tw-flex tw-flex-col tw-gap-squid-m", children: [jsxRuntime.jsx(NFTPreviewCard, Object.assign({}, nft)), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(CollectionIcon, {}), label: "Collection", detail: jsxRuntime.jsx(IconLabel, { src: nft.collection.imageURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: nft.collection.name }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(TagIcon, {}), label: "NFT Price", detail: jsxRuntime.jsx(IconLabel, { src: token.logoURI, rounded: "full", children: jsxRuntime.jsx(BodyText, { size: "small", children: price }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(ShoppingBagIcon, {}), label: "Marketplace", detail: jsxRuntime.jsx(IconLabel, { src: marketplace.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: marketplace.name }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: fromChain.name }) }), to: jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: toChain.name }) }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(HashLink, { hash: fromAddress, showCopyButton: true }) }), to: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(HashLink, { hash: toAddress, showCopyButton: true }) }) }) }), jsxRuntime.jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete })] })] }), actions: actions, fees: fees }));
|
|
83683
83695
|
}
|
|
83684
83696
|
function NFTPreviewCard({ name, imageURI, tokenID, collection, nftType }) {
|
|
83685
83697
|
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-items-center tw-gap-squid-m tw-px-squid-l tw-pt-squid-m tw-text-grey-300", children: [jsxRuntime.jsx("img", { className: "tw-max-w-96 tw-overflow-hidden tw-rounded-squid-xxs tw-shadow-elevation-light-3", src: imageURI, alt: name }), jsxRuntime.jsxs("div", { className: "tw-grid tw-w-full tw-grid-cols-[100px,1fr,100px]", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-items-center", children: jsxRuntime.jsx(Chip, { className: "tw-border tw-border-grey-500 tw-bg-transparent !tw-text-grey-500", label: tokenID }) }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-items-center", children: [jsxRuntime.jsxs(BodyText, { size: "small", children: [jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: "\u201C\u00A0" }), name, jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: "\u00A0\u201D" })] }), jsxRuntime.jsx(CaptionText, { children: collection.name })] }), jsxRuntime.jsx("div", { className: "tw-flex tw-items-center tw-justify-end", children: jsxRuntime.jsx(Chip, { className: "tw-border tw-border-grey-500 tw-bg-transparent !tw-text-grey-500", label: nftType }) })] })] }));
|
|
@@ -83691,20 +83703,27 @@ function InteractionTransactionView({ title = "Interaction", hash, status, url,
|
|
|
83691
83703
|
return (jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading, header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsx("div", { className: "tw-flex tw-h-10 tw-w-10 tw-items-center tw-justify-center tw-rounded-md tw-bg-royal-400 tw-text-grey-900", children: jsxRuntime.jsx(ThumbsUp, { size: "24" }) }), 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 }), " "] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(IconLabel, { src: chain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: chain.name }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(HashLink, { hash: address, showCopyButton: true }) }) }), jsxRuntime.jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete })] }), actions: actions, fees: fees }));
|
|
83692
83704
|
}
|
|
83693
83705
|
|
|
83694
|
-
function LinkButton({ href }) {
|
|
83695
|
-
return (jsxRuntime.
|
|
83706
|
+
function LinkButton({ href, label }) {
|
|
83707
|
+
return (jsxRuntime.jsxs("a", { href: href, target: "_blank", className: "tw-flex tw-items-center tw-gap-0.5", rel: "noreferrer", children: [label, jsxRuntime.jsx("div", { className: "tw-ml-0.5 tw-rounded-squid-xs tw-p-0.5 tw-text-royal-500 hover:tw-bg-material-light-thin", children: jsxRuntime.jsx(SquareArrowTopRightIcon, {}) })] }));
|
|
83696
83708
|
}
|
|
83697
83709
|
|
|
83710
|
+
const TokenLink = ({ logoURI, amount, }) => {
|
|
83711
|
+
return (jsxRuntime.jsx(IconLabel, { src: logoURI, rounded: "full", children: amount ? (jsxRuntime.jsx(BodyText, { size: "small", children: amount })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }));
|
|
83712
|
+
};
|
|
83713
|
+
const TokenProperty = ({ icon, label, token, link, amount, showGradientBg, }) => {
|
|
83714
|
+
return (jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: icon, label: label, showGradientBg: showGradientBg, detail: token ? (link ? (jsxRuntime.jsx(LinkButton, { href: link, label: jsxRuntime.jsx(TokenLink, { logoURI: token.logoURI, amount: amount }) })) : (jsxRuntime.jsx(TokenLink, { logoURI: token.logoURI, amount: amount }))) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }));
|
|
83715
|
+
};
|
|
83716
|
+
|
|
83698
83717
|
function SwapTransactionView({ title = "Swap", hash, toLink, fromLink, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, timeToComplete, timestamp, actions, fees, isLoading, }) {
|
|
83699
83718
|
if (isLoading)
|
|
83700
83719
|
return jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading });
|
|
83701
|
-
return (jsxRuntime.jsx(TransactionViewLayout, { header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsx(Drip, { direction: "horizontal", from: fromToken, to: 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, formattedHash: formatHash(hash) })] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(
|
|
83720
|
+
return (jsxRuntime.jsx(TransactionViewLayout, { header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsx(Drip, { direction: "horizontal", from: fromToken, to: 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, formattedHash: formatHash(hash) })] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(TokenProperty, { token: fromToken, link: fromLink, amount: fromAmount, icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }), showGradientBg: false }), jsxRuntime.jsx(TokenProperty, { token: toToken, link: toLink, amount: toAmount, icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: fromChain ? (jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: fromChain.name }) })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toChain ? (jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(CopyButton, { copyText: formatHash(fromAddress), label: jsxRuntime.jsx(HashLink, { hash: fromAddress, formattedHash: formatHash(fromAddress) }) }) }), to: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(CopyButton, { copyText: formatHash(toAddress), label: jsxRuntime.jsx(HashLink, { hash: toAddress, formattedHash: formatHash(toAddress) }) }) }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ArrowsSwapIcon, {}), label: "Exchange rate", detail: jsxRuntime.jsx(Transfer, { from: fromToken ? (jsxRuntime.jsxs(BodyText, { size: "small", children: ["1 ", fromToken.symbol] })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toToken && exchangeRate ? (jsxRuntime.jsxs(BodyText, { size: "small", children: [exchangeRate, " ", toToken.symbol] })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), jsxRuntime.jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete })] }), actions: actions, fees: fees }));
|
|
83702
83721
|
}
|
|
83703
83722
|
|
|
83704
83723
|
function BridgeTransactionView({ title = "Bridge", hash, fromLink, toLink, status, url, fromAmount, toAmount, fromToken, toToken, fromChain, toChain, fromAddress, toAddress, actions, fees, timeToComplete, timestamp, isLoading, }) {
|
|
83705
83724
|
if (isLoading)
|
|
83706
83725
|
return jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading });
|
|
83707
|
-
return (jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading, header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsxs("div", { className: "tw-relative", children: [jsxRuntime.jsx(Image$
|
|
83726
|
+
return (jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading, header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsxs("div", { className: "tw-relative", children: [jsxRuntime.jsx(Image$2, { src: fromChain.logoURI, size: "xlarge", rounded: "full" }), toChain ? (jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-rounded-md tw-border tw-border-white", children: jsxRuntime.jsx(Image$2, { src: toChain.logoURI, size: "medium" }) })) : (jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-w-squid-m tw-overflow-hidden tw-rounded-md", children: jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-600 tw-text-transparent" }) }))] }), 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, formattedHash: formatHash(hash) })] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(TokenProperty, { token: fromToken, amount: fromAmount, link: fromLink, icon: jsxRuntime.jsx(ArrowRightUpCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Bridge ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsxRuntime.jsx(TokenProperty, { token: toToken, amount: toAmount, link: toLink, icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: fromChain.name }) }), to: toChain ? (jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsxRuntime.jsx(LoadingSkeleton, {})) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(HashLink, { hash: fromAddress, showCopyButton: true, formattedHash: formatHash(fromAddress) }) }), to: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(HashLink, { hash: toAddress, showCopyButton: true, formattedHash: formatHash(toAddress) }) }) }) }), jsxRuntime.jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete })] }), actions: actions, fees: fees }));
|
|
83708
83727
|
}
|
|
83709
83728
|
|
|
83710
83729
|
function TransactionView({ type, isLoading, data, }) {
|
|
@@ -84200,7 +84219,7 @@ exports.HistoryItem = HistoryItem;
|
|
|
84200
84219
|
exports.HomeIcon = HomeIcon;
|
|
84201
84220
|
exports.IconButton = IconButton;
|
|
84202
84221
|
exports.IconLabel = IconLabel;
|
|
84203
|
-
exports.Image = Image$
|
|
84222
|
+
exports.Image = Image$2;
|
|
84204
84223
|
exports.ImageGroup = ImageGroup;
|
|
84205
84224
|
exports.ImageIcon = ImageIcon;
|
|
84206
84225
|
exports.ImageSparkle = ImageSparkle;
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
interface Props extends React.HTMLAttributes<HTMLButtonElement> {
|
|
3
3
|
copyText: string;
|
|
4
4
|
size?: "default" | "small";
|
|
5
|
+
label?: React.ReactNode;
|
|
5
6
|
}
|
|
6
|
-
export declare const CopyButton: ({ copyText, className, size, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare const CopyButton: ({ copyText, label, className, size, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
7
8
|
export {};
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
interface Props {
|
|
2
3
|
href: string;
|
|
4
|
+
label?: React.ReactNode;
|
|
3
5
|
}
|
|
4
|
-
export default function LinkButton({ href }: Props): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export default function LinkButton({ href, label }: Props): import("react/jsx-runtime").JSX.Element;
|
|
5
7
|
export {};
|
package/dist/cjs/types/components/views/TransactionView/Properties/TimeToCompleteProperty.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
interface Props {
|
|
2
2
|
timeToComplete: string;
|
|
3
|
+
showGradientBg?: boolean;
|
|
3
4
|
}
|
|
4
|
-
export declare const TimeToCompleteProperty: ({ timeToComplete }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export declare const TimeToCompleteProperty: ({ timeToComplete, showGradientBg, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
5
6
|
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface Props {
|
|
3
|
+
token?: {
|
|
4
|
+
logoURI: string;
|
|
5
|
+
bgColor: string;
|
|
6
|
+
symbol: string;
|
|
7
|
+
};
|
|
8
|
+
link?: string;
|
|
9
|
+
amount: string;
|
|
10
|
+
icon: React.ReactNode;
|
|
11
|
+
label: React.ReactNode;
|
|
12
|
+
showGradientBg?: boolean;
|
|
13
|
+
}
|
|
14
|
+
export declare const TokenProperty: ({ icon, label, token, link, amount, showGradientBg, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export {};
|