@0xsquid/ui 3.2.2-beta.2.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 +48 -35
- 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/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 +48 -35
- 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/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/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;
|
|
@@ -40387,7 +40393,7 @@ function ListItem(_a) {
|
|
|
40387
40393
|
size: "medium",
|
|
40388
40394
|
border: "outline-lg",
|
|
40389
40395
|
}
|
|
40390
|
-
: 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 &&
|
|
40391
40397
|
// 'large' variant has extra padding
|
|
40392
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" &&
|
|
40393
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
|
|
@@ -40449,7 +40455,7 @@ function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount,
|
|
|
40449
40455
|
onClick,
|
|
40450
40456
|
}
|
|
40451
40457
|
: {};
|
|
40452
|
-
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 &&
|
|
40453
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 &&
|
|
40454
40460
|
dropdownPositionClassMap[dropdownStyles.position]), dropdownRef: dropdownRef, children: dropdownMenuContent })) : null] }));
|
|
40455
40461
|
}
|
|
@@ -40610,7 +40616,7 @@ function TokenGroup({ isSelected = false, tokenItems, priceChange, balance, bala
|
|
|
40610
40616
|
: "tw-h-squid-xl tw-gap-squid-xxs"
|
|
40611
40617
|
: isSmallVariant
|
|
40612
40618
|
? "tw-h-[50px] tw-gap-squid-s tw-py-squid-xxs"
|
|
40613
|
-
: "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
|
|
40614
40620
|
? "medium"
|
|
40615
40621
|
: (_a = mainImageSizeMap[variant]) !== null && _a !== void 0 ? _a : "medium", rounded: isCompactVariant ? "xxs" : "full", style: {
|
|
40616
40622
|
transition: `${ANIMATION_DURATIONS.GENERIC}ms ${ANIMATION_TIMINGS.GENERIC}`,
|
|
@@ -40698,7 +40704,7 @@ function Timestamp({ time }) {
|
|
|
40698
40704
|
}
|
|
40699
40705
|
|
|
40700
40706
|
function ApproveAction({ status, nextStatus, showTimeline, showBody, profile, chain, wallet, timestamp, hash, url, }) {
|
|
40701
|
-
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 }))] }));
|
|
40702
40708
|
}
|
|
40703
40709
|
|
|
40704
40710
|
function BridgeAction({ status, nextStatus, showTimeline, showBody, token, chain, provider, timestamp, hash, url, }) {
|
|
@@ -40731,15 +40737,15 @@ function linkActionTimelineProps(actions, collapsed) {
|
|
|
40731
40737
|
}
|
|
40732
40738
|
|
|
40733
40739
|
function ReceiveNFTAction({ status, nextStatus, showTimeline, showBody, nft, chain, wallet, timestamp, hash, url, }) {
|
|
40734
|
-
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 })] }));
|
|
40735
40741
|
}
|
|
40736
40742
|
|
|
40737
40743
|
function ReceiveTokensAction({ status, nextStatus, showTimeline, showBody, token, amount, chain, wallet, timestamp, hash, url, }) {
|
|
40738
|
-
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 })] }));
|
|
40739
40745
|
}
|
|
40740
40746
|
|
|
40741
40747
|
function SendTokensAction({ status, nextStatus, showTimeline, showBody, token, amount, chain, wallet, timestamp, hash, url, }) {
|
|
40742
|
-
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 })] }));
|
|
40743
40749
|
}
|
|
40744
40750
|
|
|
40745
40751
|
function StakeAction({ status, nextStatus, showTimeline, showBody, token, provider, timestamp, hash, url, }) {
|
|
@@ -40799,7 +40805,7 @@ function TransactionAction({ type, props }) {
|
|
|
40799
40805
|
|
|
40800
40806
|
const TransactionItem = (props) => {
|
|
40801
40807
|
const { status, hash, type, fromToken, toToken, fromChain, toChain, fromAmount, toAmount, timestamp, timeToComplete, } = props;
|
|
40802
|
-
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, {})] }))] })] }));
|
|
40803
40809
|
};
|
|
40804
40810
|
const OrderType = ({ type }) => {
|
|
40805
40811
|
switch (type) {
|
|
@@ -40816,7 +40822,7 @@ const OrderType = ({ type }) => {
|
|
|
40816
40822
|
const OrderMedia = (props) => {
|
|
40817
40823
|
switch (props.type) {
|
|
40818
40824
|
case "buy_nft":
|
|
40819
|
-
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" }) }));
|
|
40820
40826
|
case "swap":
|
|
40821
40827
|
default:
|
|
40822
40828
|
return jsxRuntime.jsx(Drip, { from: props.fromToken, to: props.toToken });
|
|
@@ -40940,7 +40946,7 @@ const TokenModalHeader = ({ token, chain, onLikeToken, onClose, isFavorite, }) =
|
|
|
40940
40946
|
border: "outline-lg",
|
|
40941
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, {}) })] })] }));
|
|
40942
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" })] })] }));
|
|
40943
|
-
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] })] })] }));
|
|
40944
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] })] }));
|
|
40945
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 })] }));
|
|
40946
40952
|
const FooterButton = (_a) => {
|
|
@@ -41041,7 +41047,7 @@ function ChainsFilter({ chainType, setChainType, chain, handleChain, chains, })
|
|
|
41041
41047
|
} }), chains
|
|
41042
41048
|
.filter(({ name }) => search === "" ||
|
|
41043
41049
|
name.toLocaleLowerCase().includes(search.toLocaleLowerCase()))
|
|
41044
|
-
.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: () => {
|
|
41045
41051
|
handleChain({ id, name, iconURI });
|
|
41046
41052
|
} }, index)))] })] }));
|
|
41047
41053
|
}
|
|
@@ -41541,7 +41547,7 @@ function TxProgressViewHeader({ title, description, isWarning = false, }) {
|
|
|
41541
41547
|
}
|
|
41542
41548
|
|
|
41543
41549
|
function UnsupportedPairNotice({ description, fromImageUrl, toImageUrl, }) {
|
|
41544
|
-
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 })] }));
|
|
41545
41551
|
}
|
|
41546
41552
|
|
|
41547
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]";
|
|
@@ -42068,12 +42074,12 @@ function DepositAddressView({ isOpen = true, fromToken, toToken, handleClose, fr
|
|
|
42068
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: {
|
|
42069
42075
|
// box shadow simulating bottom outline (we do not use css outline because cannot apply it to only one side)
|
|
42070
42076
|
boxShadow: "0 1px 0 currentColor",
|
|
42071
|
-
}, 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)
|
|
42072
42078
|
? {
|
|
42073
42079
|
tooltipContent: tooltips.depositAddress,
|
|
42074
42080
|
tooltipWidth: "max",
|
|
42075
42081
|
}
|
|
42076
|
-
: 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" })] }));
|
|
42077
42083
|
}
|
|
42078
42084
|
function TimeRemaining({ timeRemainingSeconds, tooltipContent, }) {
|
|
42079
42085
|
const timeRemaining = useCountdown(timeRemainingSeconds);
|
|
@@ -83539,7 +83545,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
|
|
|
83539
83545
|
height: "100%",
|
|
83540
83546
|
maxHeight: "100%",
|
|
83541
83547
|
width: "auto",
|
|
83542
|
-
}, 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: {
|
|
83543
83549
|
bgColor: fromToken.bgColor,
|
|
83544
83550
|
logoURI: fromToken.logoUrl,
|
|
83545
83551
|
}, secondToken: {
|
|
@@ -83550,7 +83556,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
|
|
|
83550
83556
|
: isBridgeTransaction
|
|
83551
83557
|
? "Bridge"
|
|
83552
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 ||
|
|
83553
|
-
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: () => {
|
|
83554
83560
|
stopTimer();
|
|
83555
83561
|
}, onTxStart: () => {
|
|
83556
83562
|
startTimer();
|
|
@@ -83648,8 +83654,8 @@ function ShareSwapButton({ dropdownContent, }) {
|
|
|
83648
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 }));
|
|
83649
83655
|
}
|
|
83650
83656
|
|
|
83651
|
-
const TimeToCompleteProperty = ({ timeToComplete }) => {
|
|
83652
|
-
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 }) }) }));
|
|
83653
83659
|
};
|
|
83654
83660
|
|
|
83655
83661
|
function TransactionViewLayout(_a) {
|
|
@@ -83685,7 +83691,7 @@ function PropertiesSkeleton() {
|
|
|
83685
83691
|
function BuyNFTTransactionView({ title = "Buy", hash, status, url, price, token, marketplace, fromChain, toChain, fromAddress, toAddress, boosted, timeToComplete, timestamp, nft, actions, fees, isLoading, }) {
|
|
83686
83692
|
if (isLoading)
|
|
83687
83693
|
return jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading });
|
|
83688
|
-
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 }));
|
|
83689
83695
|
}
|
|
83690
83696
|
function NFTPreviewCard({ name, imageURI, tokenID, collection, nftType }) {
|
|
83691
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 }) })] })] }));
|
|
@@ -83697,20 +83703,27 @@ function InteractionTransactionView({ title = "Interaction", hash, status, url,
|
|
|
83697
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 }));
|
|
83698
83704
|
}
|
|
83699
83705
|
|
|
83700
|
-
function LinkButton({ href }) {
|
|
83701
|
-
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, {}) })] }));
|
|
83702
83708
|
}
|
|
83703
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
|
+
|
|
83704
83717
|
function SwapTransactionView({ title = "Swap", hash, toLink, fromLink, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, timeToComplete, timestamp, actions, fees, isLoading, }) {
|
|
83705
83718
|
if (isLoading)
|
|
83706
83719
|
return jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading });
|
|
83707
|
-
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 }));
|
|
83708
83721
|
}
|
|
83709
83722
|
|
|
83710
83723
|
function BridgeTransactionView({ title = "Bridge", hash, fromLink, toLink, status, url, fromAmount, toAmount, fromToken, toToken, fromChain, toChain, fromAddress, toAddress, actions, fees, timeToComplete, timestamp, isLoading, }) {
|
|
83711
83724
|
if (isLoading)
|
|
83712
83725
|
return jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading });
|
|
83713
|
-
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 }));
|
|
83714
83727
|
}
|
|
83715
83728
|
|
|
83716
83729
|
function TransactionView({ type, isLoading, data, }) {
|
|
@@ -84206,7 +84219,7 @@ exports.HistoryItem = HistoryItem;
|
|
|
84206
84219
|
exports.HomeIcon = HomeIcon;
|
|
84207
84220
|
exports.IconButton = IconButton;
|
|
84208
84221
|
exports.IconLabel = IconLabel;
|
|
84209
|
-
exports.Image = Image$
|
|
84222
|
+
exports.Image = Image$2;
|
|
84210
84223
|
exports.ImageGroup = ImageGroup;
|
|
84211
84224
|
exports.ImageIcon = ImageIcon;
|
|
84212
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 {};
|