@0xsquid/ui 3.3.1 → 3.3.2
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 +3 -3
- package/dist/esm/index.js +3 -3
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -83709,7 +83709,7 @@ function NFTPreviewCard({ name, imageURI, tokenID, collection, nftType }) {
|
|
|
83709
83709
|
function InteractionTransactionView({ title = "Interaction", hash, status, url, chain, address, timeToComplete, timestamp, actions, fees, isLoading, }) {
|
|
83710
83710
|
if (isLoading)
|
|
83711
83711
|
return jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading });
|
|
83712
|
-
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 })
|
|
83712
|
+
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 }));
|
|
83713
83713
|
}
|
|
83714
83714
|
|
|
83715
83715
|
function LinkButton({ href, label }) {
|
|
@@ -83726,13 +83726,13 @@ const TokenProperty = ({ icon, label, token, link, amount, showGradientBg, }) =>
|
|
|
83726
83726
|
function SwapTransactionView({ title = "Swap", hash, toLink, fromLink, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, timeToComplete, timestamp, actions, fees, isLoading, }) {
|
|
83727
83727
|
if (isLoading)
|
|
83728
83728
|
return jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading });
|
|
83729
|
-
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: ["Swap ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.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:
|
|
83729
|
+
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: ["Swap ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.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: fromAddress, label: jsxRuntime.jsx(HashLink, { hash: fromAddress, formattedHash: formatHash(fromAddress) }) }) }), to: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(CopyButton, { copyText: 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 }));
|
|
83730
83730
|
}
|
|
83731
83731
|
|
|
83732
83732
|
function BridgeTransactionView({ title = "Bridge", hash, fromLink, toLink, status, url, fromAmount, toAmount, fromToken, toToken, fromChain, toChain, fromAddress, toAddress, actions, fees, timeToComplete, timestamp, isLoading, }) {
|
|
83733
83733
|
if (isLoading)
|
|
83734
83734
|
return jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading });
|
|
83735
|
-
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(
|
|
83735
|
+
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(CopyButton, { copyText: fromAddress, label: jsxRuntime.jsx(HashLink, { hash: fromAddress, formattedHash: formatHash(fromAddress) }) }) }), to: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(CopyButton, { copyText: toAddress, label: jsxRuntime.jsx(HashLink, { hash: toAddress, formattedHash: formatHash(toAddress) }) }) }) }) }), jsxRuntime.jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete })] }), actions: actions, fees: fees }));
|
|
83736
83736
|
}
|
|
83737
83737
|
|
|
83738
83738
|
function TransactionView({ type, isLoading, data, }) {
|
package/dist/esm/index.js
CHANGED
|
@@ -83689,7 +83689,7 @@ function NFTPreviewCard({ name, imageURI, tokenID, collection, nftType }) {
|
|
|
83689
83689
|
function InteractionTransactionView({ title = "Interaction", hash, status, url, chain, address, timeToComplete, timestamp, actions, fees, isLoading, }) {
|
|
83690
83690
|
if (isLoading)
|
|
83691
83691
|
return jsx(TransactionViewLayout, { isLoading: isLoading });
|
|
83692
|
-
return (jsx(TransactionViewLayout, { isLoading: isLoading, header: jsx(TransactionHeaderLayout, { title: title, status: status, media: 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: jsx(ThumbsUp, { size: "24" }) }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true })
|
|
83692
|
+
return (jsx(TransactionViewLayout, { isLoading: isLoading, header: jsx(TransactionHeaderLayout, { title: title, status: status, media: 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: jsx(ThumbsUp, { size: "24" }) }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true })] }) }), properties: jsxs(PropertiesLayout, { children: [jsx(PropertyListItem, { variant: "large", icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(IconLabel, { src: chain.logoURI, children: jsx(BodyText, { size: "small", children: chain.name }) }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(BodyText, { size: "small", children: jsx(HashLink, { hash: address, showCopyButton: true }) }) }), jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete })] }), actions: actions, fees: fees }));
|
|
83693
83693
|
}
|
|
83694
83694
|
|
|
83695
83695
|
function LinkButton({ href, label }) {
|
|
@@ -83706,13 +83706,13 @@ const TokenProperty = ({ icon, label, token, link, amount, showGradientBg, }) =>
|
|
|
83706
83706
|
function SwapTransactionView({ title = "Swap", hash, toLink, fromLink, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, timeToComplete, timestamp, actions, fees, isLoading, }) {
|
|
83707
83707
|
if (isLoading)
|
|
83708
83708
|
return jsx(TransactionViewLayout, { isLoading: isLoading });
|
|
83709
|
-
return (jsx(TransactionViewLayout, { header: jsx(TransactionHeaderLayout, { title: title, status: status, media: jsx(Drip, { direction: "horizontal", from: fromToken, to: toToken }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxs(PropertiesLayout, { children: [jsx(TokenProperty, { token: fromToken, link: fromLink, amount: fromAmount, icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Swap ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsx(TokenProperty, { token: toToken, link: toLink, amount: toAmount, icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: fromChain ? (jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toChain ? (jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(Transfer, { from: jsx(BodyText, { size: "small", children: jsx(CopyButton, { copyText:
|
|
83709
|
+
return (jsx(TransactionViewLayout, { header: jsx(TransactionHeaderLayout, { title: title, status: status, media: jsx(Drip, { direction: "horizontal", from: fromToken, to: toToken }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxs(PropertiesLayout, { children: [jsx(TokenProperty, { token: fromToken, link: fromLink, amount: fromAmount, icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Swap ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsx(TokenProperty, { token: toToken, link: toLink, amount: toAmount, icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: fromChain ? (jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toChain ? (jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(Transfer, { from: jsx(BodyText, { size: "small", children: jsx(CopyButton, { copyText: fromAddress, label: jsx(HashLink, { hash: fromAddress, formattedHash: formatHash(fromAddress) }) }) }), to: jsx(BodyText, { size: "small", children: jsx(CopyButton, { copyText: toAddress, label: jsx(HashLink, { hash: toAddress, formattedHash: formatHash(toAddress) }) }) }) }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ArrowsSwapIcon, {}), label: "Exchange rate", detail: jsx(Transfer, { from: fromToken ? (jsxs(BodyText, { size: "small", children: ["1 ", fromToken.symbol] })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toToken && exchangeRate ? (jsxs(BodyText, { size: "small", children: [exchangeRate, " ", toToken.symbol] })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete })] }), actions: actions, fees: fees }));
|
|
83710
83710
|
}
|
|
83711
83711
|
|
|
83712
83712
|
function BridgeTransactionView({ title = "Bridge", hash, fromLink, toLink, status, url, fromAmount, toAmount, fromToken, toToken, fromChain, toChain, fromAddress, toAddress, actions, fees, timeToComplete, timestamp, isLoading, }) {
|
|
83713
83713
|
if (isLoading)
|
|
83714
83714
|
return jsx(TransactionViewLayout, { isLoading: isLoading });
|
|
83715
|
-
return (jsx(TransactionViewLayout, { isLoading: isLoading, header: jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxs("div", { className: "tw-relative", children: [jsx(Image$2, { src: fromChain.logoURI, size: "xlarge", rounded: "full" }), toChain ? (jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-rounded-md tw-border tw-border-white", children: jsx(Image$2, { src: toChain.logoURI, size: "medium" }) })) : (jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-w-squid-m tw-overflow-hidden tw-rounded-md", children: jsx(LoadingSkeleton, { className: "tw-bg-grey-600 tw-text-transparent" }) }))] }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxs(PropertiesLayout, { children: [jsx(TokenProperty, { token: fromToken, amount: fromAmount, link: fromLink, icon: jsx(ArrowRightUpCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Bridge ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsx(TokenProperty, { token: toToken, amount: toAmount, link: toLink, icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) }), to: toChain ? (jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsx(LoadingSkeleton, {})) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(Transfer, { from: jsx(BodyText, { size: "small", children: jsx(
|
|
83715
|
+
return (jsx(TransactionViewLayout, { isLoading: isLoading, header: jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxs("div", { className: "tw-relative", children: [jsx(Image$2, { src: fromChain.logoURI, size: "xlarge", rounded: "full" }), toChain ? (jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-rounded-md tw-border tw-border-white", children: jsx(Image$2, { src: toChain.logoURI, size: "medium" }) })) : (jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-w-squid-m tw-overflow-hidden tw-rounded-md", children: jsx(LoadingSkeleton, { className: "tw-bg-grey-600 tw-text-transparent" }) }))] }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxs(PropertiesLayout, { children: [jsx(TokenProperty, { token: fromToken, amount: fromAmount, link: fromLink, icon: jsx(ArrowRightUpCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Bridge ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsx(TokenProperty, { token: toToken, amount: toAmount, link: toLink, icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) }), to: toChain ? (jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsx(LoadingSkeleton, {})) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(Transfer, { from: jsx(BodyText, { size: "small", children: jsx(CopyButton, { copyText: fromAddress, label: jsx(HashLink, { hash: fromAddress, formattedHash: formatHash(fromAddress) }) }) }), to: jsx(BodyText, { size: "small", children: jsx(CopyButton, { copyText: toAddress, label: jsx(HashLink, { hash: toAddress, formattedHash: formatHash(toAddress) }) }) }) }) }), jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete })] }), actions: actions, fees: fees }));
|
|
83716
83716
|
}
|
|
83717
83717
|
|
|
83718
83718
|
function TransactionView({ type, isLoading, data, }) {
|