mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
ebbee2ba57
* Support redirect to a correct view from search * show domains on address page * migrate to new API version to display address domains * another api update * new design for chain widget on home page + tests * chain widget styles for mobile devices * ecosystems page * update types * add ecosystems to navigation * address portfolio: pt.1 * portfolio tokens list * filter portfolio by chain * skip redirect when navigating to search result by clicking on "show all results" link * net worth block design * add filter input to chain select and fix tokens table * calculate address portfolio * adjust card logic * support custom token types in multichain explorer * handle case when new worth is 0 * add text filter to tokens list * fixes * demo envs * portfolio tests * ecosystems test * change signature for getTokenTypes function * fix adding token to the wallet from the list * lazy load all address domains * show contract creator and implementations info * fix tests * add poor reputation tokens toggle * tweaks * dim celo native tokens * disable env validator * fix tests * remove tokens with 0 usd value from top tokens * fixes * preserve selected chain when switching tabs on address page * add hints to stats widgets on home page * update envs for demo * fix portfolio cards and home page * update styles for contract creator and implementations * fix select issues * add chains from cluster to network menu * hide csv export link on empty logs page * update screenshots * rollback select fix * update cut length calculation for portfolio cards * fix chain select * update screenshots * fix tests * more fixes * add sorting to ecosystems table * fix test * fixes * fix loading state in ecosystems page * review fixes * fix tests
84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
|
|
import type { TokenTransfer } from 'types/api/tokenTransfer';
|
|
|
|
import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
|
|
import { useMultichainContext } from 'lib/contexts/multichain';
|
|
import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
|
|
import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
|
|
import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
|
|
import TokenTransferTableItem from 'ui/shared/TokenTransfer/TokenTransferTableItem';
|
|
|
|
interface Props {
|
|
data: Array<TokenTransfer>;
|
|
baseAddress?: string;
|
|
showTxInfo?: boolean;
|
|
top: number;
|
|
enableTimeIncrement?: boolean;
|
|
showSocketInfo?: boolean;
|
|
showSocketErrorAlert?: boolean;
|
|
socketInfoNum?: number;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
const TokenTransferTable = ({
|
|
data,
|
|
baseAddress,
|
|
showTxInfo,
|
|
top,
|
|
enableTimeIncrement,
|
|
showSocketInfo,
|
|
showSocketErrorAlert,
|
|
socketInfoNum,
|
|
isLoading,
|
|
}: Props) => {
|
|
const multichainContext = useMultichainContext();
|
|
const chainData = multichainContext?.chain;
|
|
|
|
return (
|
|
<AddressHighlightProvider>
|
|
<TableRoot minW={ chainData ? '1000px' : '950px' }>
|
|
<TableHeaderSticky top={ top }>
|
|
<TableRow>
|
|
{ showTxInfo && <TableColumnHeader width="48px"></TableColumnHeader> }
|
|
{ chainData && <TableColumnHeader width={ showTxInfo ? '32px' : '38px' }/> }
|
|
<TableColumnHeader width="230px">Token</TableColumnHeader>
|
|
<TableColumnHeader width="160px">Token ID</TableColumnHeader>
|
|
{ showTxInfo && (
|
|
<TableColumnHeader width="200px">
|
|
Txn hash
|
|
<TimeFormatToggle/>
|
|
</TableColumnHeader>
|
|
) }
|
|
<TableColumnHeader width="60%">From/To</TableColumnHeader>
|
|
<TableColumnHeader width="40%" isNumeric>Value</TableColumnHeader>
|
|
</TableRow>
|
|
</TableHeaderSticky>
|
|
<TableBody>
|
|
{ showSocketInfo && (
|
|
<SocketNewItemsNotice.Desktop
|
|
showErrorAlert={ showSocketErrorAlert }
|
|
num={ socketInfoNum }
|
|
type="token_transfer"
|
|
isLoading={ isLoading }
|
|
/>
|
|
) }
|
|
{ data.map((item, index) => (
|
|
<TokenTransferTableItem
|
|
key={ item.transaction_hash + item.block_hash + item.log_index + (isLoading ? index : '') }
|
|
{ ...item }
|
|
baseAddress={ baseAddress }
|
|
showTxInfo={ showTxInfo }
|
|
enableTimeIncrement={ enableTimeIncrement }
|
|
isLoading={ isLoading }
|
|
chainData={ chainData }
|
|
/>
|
|
)) }
|
|
</TableBody>
|
|
</TableRoot>
|
|
</AddressHighlightProvider>
|
|
);
|
|
};
|
|
|
|
export default React.memo(TokenTransferTable);
|