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
59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
import { Flex } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import type { InterchainTransfer } from '@blockscout/interchain-indexer-types';
|
|
|
|
import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
|
|
import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
|
|
import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
|
|
|
|
import TokenTransfersCrossChainTableItem from './TokenTransfersCrossChainTableItem';
|
|
import { getItemKey } from './utils';
|
|
|
|
interface Props {
|
|
data: Array<InterchainTransfer>;
|
|
isLoading?: boolean;
|
|
top?: number;
|
|
currentAddress?: string;
|
|
}
|
|
|
|
const TokenTransfersCrossChainTable = ({ data, isLoading, top, currentAddress }: Props) => {
|
|
return (
|
|
<AddressHighlightProvider>
|
|
<TableRoot tableLayout="auto">
|
|
<TableHeaderSticky top={ top }>
|
|
<TableRow>
|
|
<TableColumnHeader w="42px"/>
|
|
{ currentAddress && <TableColumnHeader w="44px"/> }
|
|
<TableColumnHeader>Source token</TableColumnHeader>
|
|
<TableColumnHeader/>
|
|
<TableColumnHeader>Target token</TableColumnHeader>
|
|
<TableColumnHeader>Source tx</TableColumnHeader>
|
|
<TableColumnHeader>Dest tx</TableColumnHeader>
|
|
<TableColumnHeader>Protocol</TableColumnHeader>
|
|
<TableColumnHeader>Message</TableColumnHeader>
|
|
<TableColumnHeader>
|
|
<Flex alignItems="center" flexWrap="nowrap">
|
|
Timestamp
|
|
<TimeFormatToggle/>
|
|
</Flex>
|
|
</TableColumnHeader>
|
|
</TableRow>
|
|
</TableHeaderSticky>
|
|
<TableBody>
|
|
{ data.map((item, index) => (
|
|
<TokenTransfersCrossChainTableItem
|
|
key={ getItemKey(item, isLoading ? index : undefined) }
|
|
data={ item }
|
|
isLoading={ isLoading }
|
|
currentAddress={ currentAddress }
|
|
/>
|
|
)) }
|
|
</TableBody>
|
|
</TableRoot>
|
|
</AddressHighlightProvider>
|
|
);
|
|
};
|
|
|
|
export default React.memo(TokenTransfersCrossChainTable);
|