mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
edc54514f1
* refactor widgets on home page * coming soon placeholder component * top accounts page * contract data * address ERC-20 tokens list * chain filter for address ERC-20 tokens * token select for address detailed view * address details fields * tokens table * stats widgets on home page * chain indicators graph on the home page * quick search * search results all tab * tabs and chain select on search results page * search results mobile view * add contract info to search and address details * add text filter for tokens and search improvements * load all results inside tab on search results page * token balance info * add support for domains in the full search * Multichain explorer Resolves #2989 * add envs validator for multichain * add some tests * fix search bar on search results page on mobile * home stats fixes * fix ts * optimize amount of queries on address page * add more contract info on address page * add enter key hint to search input * fix tests * fix test * update bg.primary css-variable on color theme change * sitemap for multichain * txs page: render first tab if blob tab is not available on the chain * filter out in active chains from chain select on address page and user ops page * add chain icon to advanced filter table * fix tooltip on entity with shield * fix ts * show contract implementations * fixes * add chain icon to all lists * refactor zetachain chains config type * use chain id as primary option instead of chain slug * refactor chain config type for multichain and essential dapps * refactor chain icon and chain select * rename chain-slug in chain_slug * change default radius of chain icon and update screenshots for multichain tests * change conditions for "isContract" and "isVerified" * test fixes * make shield optional for external chain entities * add chain icon to approvals lists * add stats page for multichain * add chain postfix to chart .png and .csv assets name * fix tests * sync verified contracts language filter and fix loading state in the search results page * fix sol2uml diagram and csv export * regcred from helmfile for review * link fixes * fix state for unknown address * fix incorrect chain in the context during spa transition to the same route on different chain * add links to stats widgets * add mixpanel to L2 demo values * show message of on-demand contract verification * fix screenshots --------- Co-authored-by: Nick Zenchik <[email protected]>
94 lines
3.4 KiB
TypeScript
94 lines
3.4 KiB
TypeScript
import { Box } from '@chakra-ui/react';
|
|
import type { UseQueryResult } from '@tanstack/react-query';
|
|
import React from 'react';
|
|
|
|
import type { AddressCoinBalanceHistoryResponse } from 'types/api/address';
|
|
import type { PaginationParams } from 'ui/shared/pagination/types';
|
|
|
|
import type { ResourceError } from 'lib/api/resources';
|
|
import { useMultichainContext } from 'lib/contexts/multichain';
|
|
import { currencyUnits } from 'lib/units';
|
|
import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
|
|
import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
|
|
import DataListDisplay from 'ui/shared/DataListDisplay';
|
|
import Pagination from 'ui/shared/pagination/Pagination';
|
|
import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
|
|
|
|
import AddressCoinBalanceListItem from './AddressCoinBalanceListItem';
|
|
import AddressCoinBalanceTableItem from './AddressCoinBalanceTableItem';
|
|
|
|
interface Props {
|
|
query: UseQueryResult<AddressCoinBalanceHistoryResponse, ResourceError<unknown>> & {
|
|
pagination: PaginationParams;
|
|
};
|
|
}
|
|
|
|
const AddressCoinBalanceHistory = ({ query }: Props) => {
|
|
const multichainContext = useMultichainContext();
|
|
const chainData = multichainContext?.chain;
|
|
|
|
const content = query.data?.items ? (
|
|
<>
|
|
<Box hideBelow="lg">
|
|
<TableRoot>
|
|
<TableHeaderSticky top={ query.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }>
|
|
<TableRow>
|
|
{ chainData && <TableColumnHeader width="38px"/> }
|
|
<TableColumnHeader width="20%">Block</TableColumnHeader>
|
|
<TableColumnHeader width="20%">Txn</TableColumnHeader>
|
|
<TableColumnHeader width="20%">
|
|
Timestamp
|
|
<TimeFormatToggle/>
|
|
</TableColumnHeader>
|
|
<TableColumnHeader width="20%" isNumeric pr={ 1 }>Balance { currencyUnits.ether }</TableColumnHeader>
|
|
<TableColumnHeader width="20%" isNumeric>Delta</TableColumnHeader>
|
|
</TableRow>
|
|
</TableHeaderSticky>
|
|
<TableBody>
|
|
{ query.data.items.map((item, index) => (
|
|
<AddressCoinBalanceTableItem
|
|
key={ item.block_number + (query.isPlaceholderData ? String(index) : '') }
|
|
{ ...item }
|
|
page={ query.pagination.page }
|
|
isLoading={ query.isPlaceholderData }
|
|
chainData={ chainData }
|
|
/>
|
|
)) }
|
|
</TableBody>
|
|
</TableRoot>
|
|
</Box>
|
|
<Box hideFrom="lg">
|
|
{ query.data.items.map((item, index) => (
|
|
<AddressCoinBalanceListItem
|
|
key={ item.block_number + (query.isPlaceholderData ? String(index) : '') }
|
|
{ ...item }
|
|
page={ query.pagination.page }
|
|
isLoading={ query.isPlaceholderData }
|
|
chainData={ chainData }
|
|
/>
|
|
)) }
|
|
</Box>
|
|
</>
|
|
) : null;
|
|
|
|
const actionBar = query.pagination.isVisible ? (
|
|
<ActionBar mt={ -6 }>
|
|
<Pagination ml="auto" { ...query.pagination }/>
|
|
</ActionBar>
|
|
) : null;
|
|
|
|
return (
|
|
<DataListDisplay
|
|
mt={ 8 }
|
|
isError={ query.isError }
|
|
itemsNum={ query.data?.items.length }
|
|
emptyText="There is no coin balance history for this address."
|
|
actionBar={ actionBar }
|
|
>
|
|
{ content }
|
|
</DataListDisplay>
|
|
);
|
|
};
|
|
|
|
export default React.memo(AddressCoinBalanceHistory);
|