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
63 lines
2.3 KiB
TypeScript
63 lines
2.3 KiB
TypeScript
import { Flex } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import type { InterchainMessage } from '@blockscout/interchain-indexer-types';
|
|
|
|
import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
|
|
import { TableBody, TableColumnHeader, TableHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
|
|
import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
|
|
|
|
import TransactionsCrossChainTableItem from './TransactionsCrossChainTableItem';
|
|
|
|
interface Props {
|
|
data: Array<InterchainMessage>;
|
|
isLoading?: boolean;
|
|
top?: number;
|
|
stickyHeader?: boolean;
|
|
currentAddress?: string;
|
|
}
|
|
|
|
const TransactionsCrossChainTable = ({ data, isLoading, top, stickyHeader, currentAddress }: Props) => {
|
|
const TableHeaderComponent = stickyHeader ? TableHeaderSticky : TableHeader;
|
|
|
|
return (
|
|
<AddressHighlightProvider>
|
|
<TableRoot tableLayout="auto">
|
|
<TableHeaderComponent top={ stickyHeader ? top : undefined }>
|
|
<TableRow>
|
|
<TableColumnHeader w="42px"/>
|
|
{ currentAddress && <TableColumnHeader w="44px"/> }
|
|
<TableColumnHeader>Message</TableColumnHeader>
|
|
<TableColumnHeader>
|
|
<Flex alignItems="center" flexWrap="nowrap">
|
|
Timestamp
|
|
<TimeFormatToggle/>
|
|
</Flex>
|
|
</TableColumnHeader>
|
|
<TableColumnHeader>Msg sender</TableColumnHeader>
|
|
<TableColumnHeader>Source tx</TableColumnHeader>
|
|
<TableColumnHeader>Dest tx</TableColumnHeader>
|
|
<TableColumnHeader>Transf</TableColumnHeader>
|
|
<TableColumnHeader>Sender</TableColumnHeader>
|
|
<TableColumnHeader/>
|
|
<TableColumnHeader>Recipient</TableColumnHeader>
|
|
<TableColumnHeader>Protocol</TableColumnHeader>
|
|
</TableRow>
|
|
</TableHeaderComponent>
|
|
<TableBody>
|
|
{ data.map((item, index) => (
|
|
<TransactionsCrossChainTableItem
|
|
key={ item.message_id + (isLoading ? String(index) : '') }
|
|
data={ item }
|
|
isLoading={ isLoading }
|
|
currentAddress={ currentAddress }
|
|
/>
|
|
)) }
|
|
</TableBody>
|
|
</TableRoot>
|
|
</AddressHighlightProvider>
|
|
);
|
|
};
|
|
|
|
export default React.memo(TransactionsCrossChainTable);
|