@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
64 lines • 4.44 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from 'react';
import { useRelayClient } from '../../../../hooks/index.js';
import { Flex, Anchor, Text, Skeleton, Pill } from '../../../primitives/index.js';
import { getTxBlockExplorerUrl } from '../../../../utils/getTxBlockExplorerUrl.js';
import { truncateAddress } from '../../../../utils/truncate.js';
import { faArrowUpRightFromSquare, faRotateRight } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
export const TransactionsByChain = ({ allTxHashes, fromChain, toChain, refundData, isSolverStatusTimeout }) => {
const relayClient = useRelayClient();
const refundChain = refundData
? relayClient?.chains.find((chain) => chain.id === refundData?.currency?.chainId)
: null;
const txHashesByChain = useMemo(() => {
return allTxHashes.reduce((byChains, txHash) => {
if (!byChains[txHash.chainId]) {
byChains[txHash.chainId] = [];
}
byChains[txHash.chainId].push(txHash);
return byChains;
}, {});
}, [allTxHashes, relayClient?.chains]);
const refundTx = allTxHashes.length > 0 ? allTxHashes[allTxHashes.length - 1] : null;
const isSameChain = fromChain?.id === toChain?.id;
const refundTxUrl = refundChain && refundData && refundTx
? getTxBlockExplorerUrl(refundChain?.id, relayClient?.chains, refundTx.txHash)
: null;
return (isSameChain ? [fromChain] : [fromChain, toChain])
.filter((chain) => {
if (!chain?.id)
return false;
const chainTxs = txHashesByChain[chain.id] || [];
// Only show chain if it has non-batch transactions
return chainTxs.some((tx) => !tx.isBatchTx);
})
.map((chain, idx) => {
const isRefundChain = refundData && refundChain?.id === chain?.id;
return (_jsxs(Flex, { justify: "between", children: [_jsxs(Flex, { css: { alignItems: 'center', gap: '2' }, children: [_jsxs(Text, { style: "subtitle2", color: "subtle", children: ["View ", chain?.displayName, " Tx"] }), isRefundChain ? (_jsxs(Pill, { color: "gray", css: {
py: '1',
px: '6px',
display: 'flex',
alignItems: 'center'
}, children: [_jsx(FontAwesomeIcon, { icon: faRotateRight, style: { width: 16, height: 16, marginRight: 4 }, color: "#889096" }), ' ', _jsx(Text, { style: "subtitle2", children: "Refunded" })] })) : null] }), chain?.id && txHashesByChain[chain.id] && !isRefundChain ? (_jsx(Flex, { direction: "column", children: txHashesByChain[chain.id].map(({ txHash, chainId, isBatchTx }) => {
const txUrl = getTxBlockExplorerUrl(chainId, relayClient?.chains, txHash);
return txUrl && !isBatchTx ? (_jsxs(Anchor, { href: txUrl, target: "_blank", css: {
display: 'flex',
alignItems: 'center',
gap: '2'
}, children: [truncateAddress(txHash), _jsx(FontAwesomeIcon, { icon: faArrowUpRightFromSquare, width: 16 })] }, txHash)) : null;
}) })) : null, refundData && refundTxUrl && isRefundChain ? (_jsx(Flex, { direction: "column", children: _jsxs(Anchor, { href: refundTxUrl, target: "_blank", css: {
display: 'flex',
alignItems: 'center',
gap: '2'
}, children: [truncateAddress(refundTx?.txHash), _jsx(FontAwesomeIcon, { icon: faArrowUpRightFromSquare, width: 16 })] }, refundTx?.txHash) })) : null, chain?.id &&
!txHashesByChain[chain.id] &&
!isSolverStatusTimeout &&
!isRefundChain ? (_jsx(Flex, { direction: "column", children: _jsx(Text, { color: "red", style: "subtitle2", children: "Order has not been filled" }) })) : null, chain?.id &&
!txHashesByChain[chain.id] &&
isSolverStatusTimeout &&
!refundData &&
!isRefundChain ? (_jsx(Flex, { direction: "column", children: _jsx(Skeleton, { css: { height: 20 } }) })) : null] }, idx));
});
};
//# sourceMappingURL=TransactionsByChain.js.map