mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
e6e83ee4e7
* envs and feature setup * home page layout * cross-chain txs page * cross-chain transfers page * cross-chain transfers on tx page * cross-chain messages on tx page * cross-chain tx page * cross-chain tx details token transfers * stats and counters for lists * migrate to new API version * add swagger * mobile lists * placeholder views on address page * tests * fix adaptive tabs initial state when there is only one tab in the list * tweaks * bug fixes * fix tests * update screenshots * migrate to new api version * add chain label tooltip, copy button to txs in lists and same address highlight * list views on address page * fix tests * fix links to current address in the list views * update tooltips * update tables layout * review fixes * fix spelling * update screenshots * update screenshot
87 lines
3.0 KiB
TypeScript
87 lines
3.0 KiB
TypeScript
import { chakra, VStack } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import type { InterchainMessage } from '@blockscout/interchain-indexer-types';
|
|
|
|
import { TableCell, TableRow } from 'toolkit/chakra/table';
|
|
import { mdash } from 'toolkit/utils/htmlEntities';
|
|
import CrossChainBridgeLink from 'ui/shared/crossChain/CrossChainBridgeLink';
|
|
import CrossChainMessageEntity from 'ui/shared/entities/crossChainMessage/CrossChainMessageEntity';
|
|
import TxEntityInterchain from 'ui/shared/entities/tx/TxEntityInterchain';
|
|
import ChainLabel from 'ui/shared/externalChains/ChainLabel';
|
|
import CrossChainTxsStatusTag from 'ui/shared/statusTag/CrossChainTxsStatusTag';
|
|
import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
|
|
|
|
interface Props {
|
|
data: InterchainMessage;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
const LatestCrossChainTxsItemDesktop = ({ data, isLoading }: Props) => {
|
|
|
|
return (
|
|
<TableRow>
|
|
<TableCell w="42px">
|
|
<CrossChainTxsStatusTag status={ data.status } loading={ isLoading }/>
|
|
</TableCell>
|
|
<TableCell>
|
|
<VStack alignItems="start">
|
|
<CrossChainMessageEntity id={ data.message_id } isLoading={ isLoading } lineHeight="24px" fontWeight={ 700 }/>
|
|
<TimeWithTooltip timestamp={ data.send_timestamp || data.receive_timestamp } isLoading={ isLoading } color="text.secondary" timeFormat="absolute"/>
|
|
</VStack>
|
|
</TableCell>
|
|
<TableCell>
|
|
<VStack alignItems="start">
|
|
{ data.source_transaction_hash ? (
|
|
<TxEntityInterchain
|
|
chain={ data.source_chain }
|
|
hash={ data.source_transaction_hash }
|
|
isLoading={ isLoading }
|
|
noIcon
|
|
noCopy
|
|
truncation="constant"
|
|
lineHeight="24px"
|
|
/>
|
|
) : (
|
|
<chakra.span color="text.secondary">{ mdash }</chakra.span>
|
|
) }
|
|
<ChainLabel
|
|
data={ data.source_chain }
|
|
isLoading={ isLoading }
|
|
color="text.secondary"
|
|
textStyle="xs"
|
|
/>
|
|
</VStack>
|
|
</TableCell>
|
|
<TableCell>
|
|
<VStack alignItems="start">
|
|
{ data.destination_transaction_hash ? (
|
|
<TxEntityInterchain
|
|
chain={ data.destination_chain }
|
|
hash={ data.destination_transaction_hash }
|
|
isLoading={ isLoading }
|
|
noIcon
|
|
noCopy
|
|
truncation="constant"
|
|
lineHeight="24px"
|
|
/>
|
|
) : (
|
|
<chakra.span color="text.secondary">{ mdash }</chakra.span>
|
|
) }
|
|
<ChainLabel
|
|
data={ data.destination_chain }
|
|
isLoading={ isLoading }
|
|
color="text.secondary"
|
|
textStyle="xs"
|
|
/>
|
|
</VStack>
|
|
</TableCell>
|
|
<TableCell>
|
|
<CrossChainBridgeLink data={ data.bridge } isLoading={ isLoading } lineHeight="24px"/>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
};
|
|
|
|
export default React.memo(LatestCrossChainTxsItemDesktop);
|