Skip to content

F
frontend
Commit a3417b52 authored by Igor Stuev's avatar Igor Stuev Committed by GitHub
Browse files
Options

Merge pull request #690 from blockscout/display 

display list component
parents d5eb9cd0 e3de71bc
Hide whitespace changes
Inline Side-by-side
Showing with 688 additions and 823 deletions
ui/address/AddressBlocksValidated.tsx
View file @ a3417b52
import { Box, Hide, Show, Table, Tbody, Th, Tr } from '@chakra-ui/react'; import { Hide, Show, Table, Tbody, Th, Tr } from '@chakra-ui/react';
import { useQueryClient } from '@tanstack/react-query'; import { useQueryClient } from '@tanstack/react-query';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React from 'react'; import React from 'react';
...@@ -12,10 +12,8 @@ import useQueryWithPages from 'lib/hooks/useQueryWithPages'; ...@@ -12,10 +12,8 @@ import useQueryWithPages from 'lib/hooks/useQueryWithPages';
import useSocketChannel from 'lib/socket/useSocketChannel'; import useSocketChannel from 'lib/socket/useSocketChannel';
import useSocketMessage from 'lib/socket/useSocketMessage'; import useSocketMessage from 'lib/socket/useSocketMessage';
import ActionBar from 'ui/shared/ActionBar'; import ActionBar from 'ui/shared/ActionBar';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataListDisplay from 'ui/shared/DataListDisplay';
import Pagination from 'ui/shared/Pagination'; import Pagination from 'ui/shared/Pagination';
import SkeletonList from 'ui/shared/skeletons/SkeletonList';
import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
import SocketAlert from 'ui/shared/SocketAlert'; import SocketAlert from 'ui/shared/SocketAlert';
import { default as Thead } from 'ui/shared/TheadSticky'; import { default as Thead } from 'ui/shared/TheadSticky';
...@@ -71,67 +69,51 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => { ...@@ -71,67 +69,51 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
handler: handleNewSocketMessage, handler: handleNewSocketMessage,
}); });
const content = (() => { const content = query.data?.items ? (
if (query.isLoading) { <>
return ( { socketAlert && <SocketAlert mb={ 6 }/> }
<> <Hide below="lg" ssr={ false }>
<Hide below="lg" ssr={ false }> <Table variant="simple" size="sm">
<SkeletonTable columns={ [ '17%', '17%', '16%', '25%', '25%' ] } isLong/> <Thead top={ query.isPaginationVisible ? 80 : 0 }>
</Hide> <Tr>
<Show below="lg" ssr={ false }> <Th width="17%">Block</Th>
<SkeletonList/> <Th width="17%">Age</Th>
</Show> <Th width="16%">Txn</Th>
</> <Th width="25%">GasUsed</Th>
); <Th width="25%" isNumeric>Reward { appConfig.network.currency.symbol }</Th>
} </Tr>
</Thead>
if (query.isError) { <Tbody>
return <DataFetchAlert/>; { query.data.items.map((item) => (
} <AddressBlocksValidatedTableItem key={ item.height } { ...item } page={ query.pagination.page }/>
)) }
if (query.data.items.length === 0) { </Tbody>
return 'There is no validated blocks for this address'; </Table>
} </Hide>
<Show below="lg" ssr={ false }>
return ( { query.data.items.map((item) => (
<> <AddressBlocksValidatedListItem key={ item.height } { ...item } page={ query.pagination.page }/>
<Hide below="lg" ssr={ false }> )) }
<Table variant="simple" size="sm"> </Show>
<Thead top={ query.isPaginationVisible ? 80 : 0 }> </>
<Tr> ) : null;
<Th width="17%">Block</Th>
<Th width="17%">Age</Th> const actionBar = query.isPaginationVisible ? (
<Th width="16%">Txn</Th> <ActionBar mt={ -6 } showShadow={ query.isLoading }>
<Th width="25%">GasUsed</Th> <Pagination ml="auto" { ...query.pagination }/>
<Th width="25%" isNumeric>Reward { appConfig.network.currency.symbol }</Th> </ActionBar>
</Tr> ) : null;
</Thead>
<Tbody>
{ query.data.items.map((item) => (
<AddressBlocksValidatedTableItem key={ item.height } { ...item } page={ query.pagination.page }/>
)) }
</Tbody>
</Table>
</Hide>
<Show below="lg" ssr={ false }>
{ query.data.items.map((item) => (
<AddressBlocksValidatedListItem key={ item.height } { ...item } page={ query.pagination.page }/>
)) }
</Show>
</>
);
})();
return ( return (
<Box> <DataListDisplay
{ query.isPaginationVisible && ( isError={ query.isError }
<ActionBar mt={ -6 } showShadow={ query.isLoading }> isLoading={ query.isLoading }
<Pagination ml="auto" { ...query.pagination }/> items={ query.data?.items }
</ActionBar> skeletonProps={{ isLongSkeleton: true, skeletonDesktopColumns: [ '17%', '17%', '16%', '25%', '25%' ] }}
) } emptyText="There are no validated blocks for this address."
{ socketAlert && <SocketAlert mb={ 6 }/> } content={ content }
{ content } actionBar={ actionBar }
</Box> />
); );
}; };
......
ui/address/AddressInternalTxs.tsx
View file @ a3417b52
import { Text, Show, Hide } from '@chakra-ui/react'; import { Show, Hide } from '@chakra-ui/react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React from 'react'; import React from 'react';
...@@ -10,12 +10,9 @@ import useQueryWithPages from 'lib/hooks/useQueryWithPages'; ...@@ -10,12 +10,9 @@ import useQueryWithPages from 'lib/hooks/useQueryWithPages';
import { apos } from 'lib/html-entities'; import { apos } from 'lib/html-entities';
import getQueryParamString from 'lib/router/getQueryParamString'; import getQueryParamString from 'lib/router/getQueryParamString';
import AddressIntTxsTable from 'ui/address/internals/AddressIntTxsTable'; import AddressIntTxsTable from 'ui/address/internals/AddressIntTxsTable';
import EmptySearchResult from 'ui/apps/EmptySearchResult';
import ActionBar from 'ui/shared/ActionBar'; import ActionBar from 'ui/shared/ActionBar';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataListDisplay from 'ui/shared/DataListDisplay';
import Pagination from 'ui/shared/Pagination'; import Pagination from 'ui/shared/Pagination';
import SkeletonList from 'ui/shared/skeletons/SkeletonList';
import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
import AddressCsvExportLink from './AddressCsvExportLink'; import AddressCsvExportLink from './AddressCsvExportLink';
import AddressTxsFilter from './AddressTxsFilter'; import AddressTxsFilter from './AddressTxsFilter';
...@@ -43,57 +40,40 @@ const AddressInternalTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE ...@@ -43,57 +40,40 @@ const AddressInternalTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
onFilterChange({ filter: newVal }); onFilterChange({ filter: newVal });
}, [ onFilterChange ]); }, [ onFilterChange ]);
const content = (() => { const content = data?.items ? (
if (isError) {
return <DataFetchAlert/>;
}
if (isLoading) {
return (
<>
<Show below="lg" ssr={ false }>
<SkeletonList/>
</Show>
<Hide below="lg" ssr={ false }>
<SkeletonTable columns={ [ '15%', '15%', '10%', '20%', '20%', '20%' ] } isLong/>
</Hide>
</>
);
}
if (data.items.length === 0 && !filterValue) {
return <Text as="span">There are no internal transactions for this address.</Text>;
}
if (data.items.length === 0) {
return <EmptySearchResult text={ `Couldn${ apos }t find any transaction that matches your query.` }/>;
}
return (
<>
<Show below="lg" ssr={ false }>
<AddressIntTxsList data={ data.items } currentAddress={ hash }/>
</Show>
<Hide below="lg" ssr={ false }>
<AddressIntTxsTable data={ data.items } currentAddress={ hash }/>
</Hide>
</>
);
})();
return (
<> <>
<ActionBar mt={ -6 } justifyContent="left" showShadow={ isLoading }> <Show below="lg" ssr={ false }>
<AddressTxsFilter <AddressIntTxsList data={ data.items } currentAddress={ hash }/>
defaultFilter={ filterValue } </Show>
onFilterChange={ handleFilterChange } <Hide below="lg" ssr={ false }>
isActive={ Boolean(filterValue) } <AddressIntTxsTable data={ data.items } currentAddress={ hash }/>
/> </Hide>
<AddressCsvExportLink address={ hash } type="internal-transactions" ml={{ base: 2, lg: 'auto' }}/>
{ isPaginationVisible && <Pagination ml={{ base: 'auto', lg: 8 }} { ...pagination }/> }
</ActionBar>
{ content }
</> </>
) : null ;
const actionBar = (
<ActionBar mt={ -6 } justifyContent="left" showShadow={ isLoading }>
<AddressTxsFilter
defaultFilter={ filterValue }
onFilterChange={ handleFilterChange }
isActive={ Boolean(filterValue) }
/>
<AddressCsvExportLink address={ hash } type="internal-transactions" ml={{ base: 2, lg: 'auto' }}/>
{ isPaginationVisible && <Pagination ml={{ base: 'auto', lg: 8 }} { ...pagination }/> }
</ActionBar>
);
return (
<DataListDisplay
isError={ isError }
isLoading={ isLoading }
items={ data?.items }
skeletonProps={{ isLongSkeleton: true, skeletonDesktopColumns: [ '15%', '15%', '10%', '20%', '20%', '20%' ] }}
filterProps={{ emptyFilteredText: `Couldn${ apos }t find any transaction that matches your query.`, hasActiveFilters: Boolean(filterValue) }}
emptyText="There are no internal transactions for this address."
content={ content }
actionBar={ actionBar }
/>
); );
}; };
......
ui/address/AddressLogs.tsx
View file @ a3417b52
import { Box } from '@chakra-ui/react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React from 'react'; import React from 'react';
import useQueryWithPages from 'lib/hooks/useQueryWithPages'; import useQueryWithPages from 'lib/hooks/useQueryWithPages';
import getQueryParamString from 'lib/router/getQueryParamString'; import getQueryParamString from 'lib/router/getQueryParamString';
import ActionBar from 'ui/shared/ActionBar'; import ActionBar from 'ui/shared/ActionBar';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataListDisplay from 'ui/shared/DataListDisplay';
import LogItem from 'ui/shared/logs/LogItem'; import LogItem from 'ui/shared/logs/LogItem';
import LogSkeleton from 'ui/shared/logs/LogSkeleton'; import LogSkeleton from 'ui/shared/logs/LogSkeleton';
import Pagination from 'ui/shared/Pagination'; import Pagination from 'ui/shared/Pagination';
...@@ -20,35 +19,26 @@ const AddressLogs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement> ...@@ -20,35 +19,26 @@ const AddressLogs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>
scrollRef, scrollRef,
}); });
if (isError) { const actionBar = isPaginationVisible ? (
return <DataFetchAlert/>;
}
const bar = isPaginationVisible ? (
<ActionBar mt={ -6 } showShadow> <ActionBar mt={ -6 } showShadow>
<Pagination ml="auto" { ...pagination }/> <Pagination ml="auto" { ...pagination }/>
</ActionBar> </ActionBar>
) : null; ) : null;
if (isLoading) { const content = data?.items ? data.items.map((item, index) => <LogItem key={ index } { ...item } type="address"/>) : null;
return (
<Box>
{ bar }
<LogSkeleton/>
<LogSkeleton/>
</Box>
);
}
if (data.items.length === 0) { const skeleton = <><LogSkeleton/><LogSkeleton/></>;
return <span>There are no logs for this address.</span>;
}
return ( return (
<> <DataListDisplay
{ bar } isError={ isError }
{ data.items.map((item, index) => <LogItem key={ index } { ...item } type="address"/>) } isLoading={ isLoading }
</> items={ data?.items }
emptyText="There are no logs for this address."
content={ content }
actionBar={ actionBar }
skeletonProps={{ customSkeleton: skeleton }}
/>
); );
}; };
......
ui/address/AddressTokenTransfers.tsx
View file @ a3417b52
...@@ -20,13 +20,10 @@ import getQueryParamString from 'lib/router/getQueryParamString'; ...@@ -20,13 +20,10 @@ import getQueryParamString from 'lib/router/getQueryParamString';
import useSocketChannel from 'lib/socket/useSocketChannel'; import useSocketChannel from 'lib/socket/useSocketChannel';
import useSocketMessage from 'lib/socket/useSocketMessage'; import useSocketMessage from 'lib/socket/useSocketMessage';
import TOKEN_TYPE from 'lib/token/tokenTypes'; import TOKEN_TYPE from 'lib/token/tokenTypes';
import EmptySearchResult from 'ui/apps/EmptySearchResult';
import ActionBar from 'ui/shared/ActionBar'; import ActionBar from 'ui/shared/ActionBar';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataListDisplay from 'ui/shared/DataListDisplay';
import HashStringShorten from 'ui/shared/HashStringShorten'; import HashStringShorten from 'ui/shared/HashStringShorten';
import Pagination from 'ui/shared/Pagination'; import Pagination from 'ui/shared/Pagination';
import SkeletonList from 'ui/shared/skeletons/SkeletonList';
import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice'; import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
import TokenLogo from 'ui/shared/TokenLogo'; import TokenLogo from 'ui/shared/TokenLogo';
import { flattenTotal } from 'ui/shared/TokenTransfer/helpers'; import { flattenTotal } from 'ui/shared/TokenTransfer/helpers';
...@@ -164,67 +161,40 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD ...@@ -164,67 +161,40 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
const numActiveFilters = (filters.type?.length || 0) + (filters.filter ? 1 : 0); const numActiveFilters = (filters.type?.length || 0) + (filters.filter ? 1 : 0);
const isActionBarHidden = !tokenFilter && !numActiveFilters && !data?.items.length && !currentAddress; const isActionBarHidden = !tokenFilter && !numActiveFilters && !data?.items.length && !currentAddress;
const content = (() => { const items = data?.items?.reduce(flattenTotal, []);
if (isLoading) { const content = items ? (
return ( <>
<> <Hide below="lg" ssr={ false }>
<Hide below="lg" ssr={ false }> <TokenTransferTable
<SkeletonTable columns={ [ '44px', '185px', '160px', '25%', '25%', '25%', '25%' ] } isLong/> data={ items }
</Hide> baseAddress={ currentAddress }
<Show below="lg" ssr={ false }> showTxInfo
<SkeletonList/> top={ isActionBarHidden ? 0 : 80 }
</Show> enableTimeIncrement
</> showSocketInfo={ pagination.page === 1 && !tokenFilter }
); socketInfoAlert={ socketAlert }
} socketInfoNum={ newItemsCount }
/>
if (isError) { </Hide>
return <DataFetchAlert/>; <Show below="lg" ssr={ false }>
} { pagination.page === 1 && !tokenFilter && (
<SocketNewItemsNotice
if (!data.items?.length && !numActiveFilters) { url={ window.location.href }
return <Text as="span">There are no token transfers</Text>; num={ newItemsCount }
} alert={ socketAlert }
type="token_transfer"
if (!data.items?.length) { borderBottomRadius={ 0 }
return <EmptySearchResult text={ `Couldn${ apos }t find any token transfer that matches your query.` }/>;
}
const items = data.items.reduce(flattenTotal, []);
return (
<>
<Hide below="lg" ssr={ false }>
<TokenTransferTable
data={ items }
baseAddress={ currentAddress }
showTxInfo
top={ isActionBarHidden ? 0 : 80 }
enableTimeIncrement
showSocketInfo={ pagination.page === 1 && !tokenFilter }
socketInfoAlert={ socketAlert }
socketInfoNum={ newItemsCount }
/>
</Hide>
<Show below="lg" ssr={ false }>
{ pagination.page === 1 && !tokenFilter && (
<SocketNewItemsNotice
url={ window.location.href }
num={ newItemsCount }
alert={ socketAlert }
type="token_transfer"
borderBottomRadius={ 0 }
/>
) }
<TokenTransferList
data={ items }
baseAddress={ currentAddress }
showTxInfo
enableTimeIncrement
/> />
</Show> ) }
</> <TokenTransferList
); data={ items }
})(); baseAddress={ currentAddress }
showTxInfo
enableTimeIncrement
/>
</Show>
</>
) : null;
const tokenFilterComponent = tokenFilter && ( const tokenFilterComponent = tokenFilter && (
<Flex alignItems="center" flexWrap="wrap" mb={{ base: isActionBarHidden ? 3 : 6, lg: 0 }} mr={ 4 }> <Flex alignItems="center" flexWrap="wrap" mb={{ base: isActionBarHidden ? 3 : 6, lg: 0 }} mr={ 4 }>
...@@ -249,7 +219,7 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD ...@@ -249,7 +219,7 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
</Flex> </Flex>
); );
return ( const actionBar = (
<> <>
{ isMobile && tokenFilterComponent } { isMobile && tokenFilterComponent }
{ !isActionBarHidden && ( { !isActionBarHidden && (
...@@ -269,9 +239,27 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD ...@@ -269,9 +239,27 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
{ isPaginationVisible && <Pagination ml={{ base: 'auto', lg: 8 }} { ...pagination }/> } { isPaginationVisible && <Pagination ml={{ base: 'auto', lg: 8 }} { ...pagination }/> }
</ActionBar> </ActionBar>
) } ) }
{ content }
</> </>
); );
return (
<DataListDisplay
isError={ isError }
isLoading={ isLoading }
items={ data?.items }
skeletonProps={{
isLongSkeleton: true,
skeletonDesktopColumns: [ '44px', '185px', '160px', '25%', '25%', '25%', '25%' ],
}}
emptyText="There are no token transfers."
filterProps={{
emptyFilteredText: `Couldn${ apos }t find any token transfer that matches your query.`,
hasActiveFilters: Boolean(numActiveFilters),
}}
content={ content }
actionBar={ actionBar }
/>
);
}; };
export default AddressTokenTransfers; export default AddressTokenTransfers;
ui/address/coinBalance/AddressCoinBalanceHistory.tsx
View file @ a3417b52
import { Box, Hide, Show, Table, Tbody, Th, Tr } from '@chakra-ui/react'; import { Hide, Show, Table, Tbody, Th, Tr } from '@chakra-ui/react';
import type { UseQueryResult } from '@tanstack/react-query'; import type { UseQueryResult } from '@tanstack/react-query';
import React from 'react'; import React from 'react';
...@@ -6,11 +6,9 @@ import type { AddressCoinBalanceHistoryResponse } from 'types/api/address'; ...@@ -6,11 +6,9 @@ import type { AddressCoinBalanceHistoryResponse } from 'types/api/address';
import appConfig from 'configs/app/config'; import appConfig from 'configs/app/config';
import ActionBar from 'ui/shared/ActionBar'; import ActionBar from 'ui/shared/ActionBar';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataListDisplay from 'ui/shared/DataListDisplay';
import type { Props as PaginationProps } from 'ui/shared/Pagination'; import type { Props as PaginationProps } from 'ui/shared/Pagination';
import Pagination from 'ui/shared/Pagination'; import Pagination from 'ui/shared/Pagination';
import SkeletonList from 'ui/shared/skeletons/SkeletonList';
import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
import { default as Thead } from 'ui/shared/TheadSticky'; import { default as Thead } from 'ui/shared/TheadSticky';
import AddressCoinBalanceListItem from './AddressCoinBalanceListItem'; import AddressCoinBalanceListItem from './AddressCoinBalanceListItem';
...@@ -25,66 +23,51 @@ interface Props { ...@@ -25,66 +23,51 @@ interface Props {
const AddressCoinBalanceHistory = ({ query }: Props) => { const AddressCoinBalanceHistory = ({ query }: Props) => {
const content = (() => { const content = query.data?.items ? (
if (query.isLoading) { <>
return ( <Hide below="lg" ssr={ false }>
<> <Table variant="simple" size="sm">
<Hide below="lg" ssr={ false }> <Thead top={ query.isPaginationVisible ? 80 : 0 }>
<SkeletonTable columns={ [ '25%', '25%', '25%', '25%', '120px' ] }/> <Tr>
</Hide> <Th width="20%">Block</Th>
<Show below="lg" ssr={ false }> <Th width="20%">Txn</Th>
<SkeletonList/> <Th width="20%">Age</Th>
</Show> <Th width="20%" isNumeric pr={ 1 }>Balance { appConfig.network.currency.symbol }</Th>
</> <Th width="20%" isNumeric>Delta</Th>
); </Tr>
} </Thead>
<Tbody>
{ query.data.items.map((item) => (
<AddressCoinBalanceTableItem key={ item.block_number } { ...item } page={ query.pagination.page }/>
)) }
</Tbody>
</Table>
</Hide>
<Show below="lg" ssr={ false }>
{ query.data.items.map((item) => (
<AddressCoinBalanceListItem key={ item.block_number } { ...item } page={ query.pagination.page }/>
)) }
</Show>
</>
) : null;
if (query.isError) { const actionBar = query.isPaginationVisible ? (
return <DataFetchAlert/>; <ActionBar mt={ -6 }>
} <Pagination ml="auto" { ...query.pagination }/>
</ActionBar>
if (query.data.items.length === 0 && !query.isPaginationVisible) { ) : null;
return <span>There is no coin balance history for this address</span>;
}
return (
<>
<Hide below="lg" ssr={ false }>
<Table variant="simple" size="sm">
<Thead top={ query.isPaginationVisible ? 80 : 0 }>
<Tr>
<Th width="20%">Block</Th>
<Th width="20%">Txn</Th>
<Th width="20%">Age</Th>
<Th width="20%" isNumeric pr={ 1 }>Balance { appConfig.network.currency.symbol }</Th>
<Th width="20%" isNumeric>Delta</Th>
</Tr>
</Thead>
<Tbody>
{ query.data.items.map((item) => (
<AddressCoinBalanceTableItem key={ item.block_number } { ...item } page={ query.pagination.page }/>
)) }
</Tbody>
</Table>
</Hide>
<Show below="lg" ssr={ false }>
{ query.data.items.map((item) => (
<AddressCoinBalanceListItem key={ item.block_number } { ...item } page={ query.pagination.page }/>
)) }
</Show>
</>
);
})();
return ( return (
<Box mt={ 8 }> <DataListDisplay
{ query.isPaginationVisible && ( mt={ 8 }
<ActionBar mt={ -6 }> isError={ query.isError }
<Pagination ml="auto" { ...query.pagination }/> isLoading={ query.isLoading }
</ActionBar> items={ query.data?.items }
) } skeletonProps={{ skeletonDesktopColumns: [ '25%', '25%', '25%', '25%', '120px' ] }}
{ content } emptyText="There is no coin balance history for this address."
</Box> content={ content }
actionBar={ actionBar }
/>
); );
}; };
......
ui/address/tokens/TokensWithIds.tsx
View file @ a3417b52
import { Grid, Skeleton, Text } from '@chakra-ui/react'; import { Grid, Skeleton } from '@chakra-ui/react';
import type { UseQueryResult } from '@tanstack/react-query'; import type { UseQueryResult } from '@tanstack/react-query';
import React from 'react'; import React from 'react';
...@@ -6,7 +6,7 @@ import type { AddressTokensResponse } from 'types/api/address'; ...@@ -6,7 +6,7 @@ import type { AddressTokensResponse } from 'types/api/address';
import useIsMobile from 'lib/hooks/useIsMobile'; import useIsMobile from 'lib/hooks/useIsMobile';
import ActionBar from 'ui/shared/ActionBar'; import ActionBar from 'ui/shared/ActionBar';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataListDisplay from 'ui/shared/DataListDisplay';
import type { Props as PaginationProps } from 'ui/shared/Pagination'; import type { Props as PaginationProps } from 'ui/shared/Pagination';
import Pagination from 'ui/shared/Pagination'; import Pagination from 'ui/shared/Pagination';
...@@ -24,52 +24,48 @@ const TokensWithIds = ({ tokensQuery }: Props) => { ...@@ -24,52 +24,48 @@ const TokensWithIds = ({ tokensQuery }: Props) => {
const { isError, isLoading, data, pagination, isPaginationVisible } = tokensQuery; const { isError, isLoading, data, pagination, isPaginationVisible } = tokensQuery;
if (isError) { const actionBar = isMobile && isPaginationVisible && (
return <DataFetchAlert/>;
}
const bar = isMobile && isPaginationVisible && (
<ActionBar mt={ -6 }> <ActionBar mt={ -6 }>
<Pagination ml="auto" { ...pagination }/> <Pagination ml="auto" { ...pagination }/>
</ActionBar> </ActionBar>
); );
if (isLoading) { const skeleton = (
return ( <Grid
<> w="100%"
{ bar } columnGap={{ base: 3, lg: 6 }}
<Grid rowGap={{ base: 3, lg: 6 }}
w="100%" gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }}
columnGap={{ base: 3, lg: 6 }} >
rowGap={{ base: 3, lg: 6 }} <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }} <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
> <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
<Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/> <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
<Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/> <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
<Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/> </Grid>
<Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/> );
<Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
</Grid>
</>
);
}
if (!data.items.length) { const content = data?.items ? (
return <Text as="span">There are no tokens of selected type.</Text>; <Grid
} w="100%"
columnGap={{ base: 3, lg: 6 }}
rowGap={{ base: 3, lg: 6 }}
gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }}
>
{ data.items.map(item => <NFTItem key={ item.token.address } { ...item }/>) }
</Grid>
) : null;
return ( return (
<> <DataListDisplay
{ bar } isError={ isError }
<Grid isLoading={ isLoading }
w="100%" items={ data?.items }
columnGap={{ base: 3, lg: 6 }} emptyText="There are no tokens of selected type."
rowGap={{ base: 3, lg: 6 }} content={ content }
gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }} actionBar={ actionBar }
> skeletonProps={{ customSkeleton: skeleton }}
{ data.items.map(item => <NFTItem key={ item.token.address } { ...item }/>) } />
</Grid>
</>
); );
}; };
......
ui/address/tokens/TokensWithoutIds.tsx
View file @ a3417b52
import { Text, Show, Hide } from '@chakra-ui/react'; import { Show, Hide } from '@chakra-ui/react';
import type { UseQueryResult } from '@tanstack/react-query'; import type { UseQueryResult } from '@tanstack/react-query';
import React from 'react'; import React from 'react';
...@@ -6,11 +6,9 @@ import type { AddressTokensResponse } from 'types/api/address'; ...@@ -6,11 +6,9 @@ import type { AddressTokensResponse } from 'types/api/address';
import useIsMobile from 'lib/hooks/useIsMobile'; import useIsMobile from 'lib/hooks/useIsMobile';
import ActionBar from 'ui/shared/ActionBar'; import ActionBar from 'ui/shared/ActionBar';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataListDisplay from 'ui/shared/DataListDisplay';
import Pagination from 'ui/shared/Pagination'; import Pagination from 'ui/shared/Pagination';
import type { Props as PaginationProps } from 'ui/shared/Pagination'; import type { Props as PaginationProps } from 'ui/shared/Pagination';
import SkeletonList from 'ui/shared/skeletons/SkeletonList';
import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
import TokensListItem from './TokensListItem'; import TokensListItem from './TokensListItem';
import TokensTable from './TokensTable'; import TokensTable from './TokensTable';
...@@ -27,36 +25,31 @@ const TokensWithoutIds = ({ tokensQuery }: Props) => { ...@@ -27,36 +25,31 @@ const TokensWithoutIds = ({ tokensQuery }: Props) => {
const { isError, isLoading, data, pagination, isPaginationVisible } = tokensQuery; const { isError, isLoading, data, pagination, isPaginationVisible } = tokensQuery;
if (isError) { const actionBar = isMobile && isPaginationVisible && (
return <DataFetchAlert/>;
}
const bar = isMobile && isPaginationVisible && (
<ActionBar mt={ -6 }> <ActionBar mt={ -6 }>
<Pagination ml="auto" { ...pagination }/> <Pagination ml="auto" { ...pagination }/>
</ActionBar> </ActionBar>
); );
if (isLoading) { const content = data?.items ? (
return (
<>
{ bar }
<Hide below="lg" ssr={ false }><SkeletonTable columns={ [ '30%', '30%', '10%', '20%', '10%' ] }/></Hide>
<Show below="lg" ssr={ false }><SkeletonList/></Show>
</>
);
}
if (data.items.length === 0) {
return <Text as="span">There are no tokens of selected type.</Text>;
}
return (
<> <>
{ bar }
<Hide below="lg" ssr={ false }><TokensTable data={ data.items } top={ isPaginationVisible ? 72 : 0 }/></Hide> <Hide below="lg" ssr={ false }><TokensTable data={ data.items } top={ isPaginationVisible ? 72 : 0 }/></Hide>
<Show below="lg" ssr={ false }>{ data.items.map(item => <TokensListItem key={ item.token.address } { ...item }/>) }</Show> <Show below="lg" ssr={ false }>{ data.items.map(item => <TokensListItem key={ item.token.address } { ...item }/>) }</Show></>
</> ) : null;
return (
<DataListDisplay
isError={ isError }
isLoading={ isLoading }
items={ data?.items }
skeletonProps={{
isLongSkeleton: true,
skeletonDesktopColumns: [ '30%', '30%', '10%', '20%', '10%' ],
}}
emptyText="There are no tokens of selected type."
content={ content }
actionBar={ actionBar }
/>
); );
}; };
......
ui/blocks/BlocksContent.tsx
View file @ a3417b52
import { Text, Show, Hide, Alert } from '@chakra-ui/react'; import { Show, Hide, Alert } from '@chakra-ui/react';
import type { UseQueryResult } from '@tanstack/react-query'; import type { UseQueryResult } from '@tanstack/react-query';
import { useQueryClient } from '@tanstack/react-query'; import { useQueryClient } from '@tanstack/react-query';
import React from 'react'; import React from 'react';
...@@ -13,11 +13,9 @@ import useSocketMessage from 'lib/socket/useSocketMessage'; ...@@ -13,11 +13,9 @@ import useSocketMessage from 'lib/socket/useSocketMessage';
import BlocksList from 'ui/blocks/BlocksList'; import BlocksList from 'ui/blocks/BlocksList';
import BlocksTable from 'ui/blocks/BlocksTable'; import BlocksTable from 'ui/blocks/BlocksTable';
import ActionBar from 'ui/shared/ActionBar'; import ActionBar from 'ui/shared/ActionBar';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataListDisplay from 'ui/shared/DataListDisplay';
import Pagination from 'ui/shared/Pagination'; import Pagination from 'ui/shared/Pagination';
import type { Props as PaginationProps } from 'ui/shared/Pagination'; import type { Props as PaginationProps } from 'ui/shared/Pagination';
import SkeletonList from 'ui/shared/skeletons/SkeletonList';
import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
type QueryResult = UseQueryResult<BlocksResponse> & { type QueryResult = UseQueryResult<BlocksResponse> & {
pagination: PaginationProps; pagination: PaginationProps;
...@@ -76,51 +74,34 @@ const BlocksContent = ({ type, query }: Props) => { ...@@ -76,51 +74,34 @@ const BlocksContent = ({ type, query }: Props) => {
handler: handleNewBlockMessage, handler: handleNewBlockMessage,
}); });
const content = (() => { const content = query.data?.items ? (
if (query.isLoading) {
return (
<>
<Show below="lg" key="skeleton-mobile" ssr={ false }>
<SkeletonList/>
</Show>
<Hide below="lg" key="skeleton-desktop" ssr={ false }>
<SkeletonTable columns={ [ '125px', '120px', '21%', '64px', '35%', '22%', '22%' ] }/>
</Hide>
</>
);
}
if (query.isError) {
return <DataFetchAlert/>;
}
if (query.data.items.length === 0) {
return <Text as="span">There are no blocks.</Text>;
}
return (
<>
{ socketAlert && <Alert status="warning" mb={ 6 } as="a" href={ window.document.location.href }>{ socketAlert }</Alert> }
<Show below="lg" key="content-mobile" ssr={ false }>
<BlocksList data={ query.data.items }/>
</Show>
<Hide below="lg" key="content-desktop" ssr={ false }>
<BlocksTable data={ query.data.items } top={ query.isPaginationVisible ? 80 : 0 } page={ query.pagination.page }/>
</Hide>
</>
);
})();
return (
<> <>
{ isMobile && query.isPaginationVisible && ( { socketAlert && <Alert status="warning" mb={ 6 } as="a" href={ window.document.location.href }>{ socketAlert }</Alert> }
<ActionBar mt={ -6 }> <Show below="lg" key="content-mobile" ssr={ false }>
<Pagination ml="auto" { ...query.pagination }/> <BlocksList data={ query.data.items }/>
</ActionBar> </Show>
) } <Hide below="lg" key="content-desktop" ssr={ false }>
{ content } <BlocksTable data={ query.data.items } top={ query.isPaginationVisible ? 80 : 0 } page={ query.pagination.page }/>
</Hide>
</> </>
) : null;
const actionBar = isMobile && query.isPaginationVisible ? (
<ActionBar mt={ -6 }>
<Pagination ml="auto" { ...query.pagination }/>
</ActionBar>
) : null;
return (
<DataListDisplay
isError={ query.isError }
isLoading={ query.isLoading }
items={ query.data?.items }
skeletonProps={{ skeletonDesktopColumns: [ '125px', '120px', '21%', '64px', '35%', '22%', '22%' ] }}
emptyText="There are no blocks."
content={ content }
actionBar={ actionBar }
/>
); );
}; };
......
ui/pages/Accounts.tsx
View file @ a3417b52
...@@ -5,12 +5,10 @@ import useQueryWithPages from 'lib/hooks/useQueryWithPages'; ...@@ -5,12 +5,10 @@ import useQueryWithPages from 'lib/hooks/useQueryWithPages';
import AddressesListItem from 'ui/addresses/AddressesListItem'; import AddressesListItem from 'ui/addresses/AddressesListItem';
import AddressesTable from 'ui/addresses/AddressesTable'; import AddressesTable from 'ui/addresses/AddressesTable';
import ActionBar from 'ui/shared/ActionBar'; import ActionBar from 'ui/shared/ActionBar';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataListDisplay from 'ui/shared/DataListDisplay';
import Page from 'ui/shared/Page/Page'; import Page from 'ui/shared/Page/Page';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
import Pagination from 'ui/shared/Pagination'; import Pagination from 'ui/shared/Pagination';
import SkeletonList from 'ui/shared/skeletons/SkeletonList';
import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
const PAGE_SIZE = 50; const PAGE_SIZE = 50;
...@@ -19,60 +17,50 @@ const Accounts = () => { ...@@ -19,60 +17,50 @@ const Accounts = () => {
resourceName: 'addresses', resourceName: 'addresses',
}); });
const content = (() => { const actionBar = isPaginationVisible && (
if (isError) { <ActionBar mt={ -6 }>
return <DataFetchAlert/>; <Pagination ml="auto" { ...pagination }/>
} </ActionBar>
);
const bar = isPaginationVisible && (
<ActionBar mt={ -6 }>
<Pagination ml="auto" { ...pagination }/>
</ActionBar>
);
if (isLoading) {
return (
<>
{ bar }
<SkeletonList display={{ base: 'block', lg: 'none' }}/>
<SkeletonTable display={{ base: 'none', lg: 'block' }} columns={ [ '64px', '30%', '20%', '20%', '15%', '15%' ] }/>
</>
);
}
const pageStartIndex = (pagination.page - 1) * PAGE_SIZE + 1;
return ( const pageStartIndex = (pagination.page - 1) * PAGE_SIZE + 1;
<> const content = data?.items ? (
{ bar } <>
<Hide below="lg" ssr={ false }> <Hide below="lg" ssr={ false }>
<AddressesTable <AddressesTable
top={ isPaginationVisible ? 80 : 0 } top={ isPaginationVisible ? 80 : 0 }
items={ data.items } items={ data.items }
totalSupply={ data.total_supply } totalSupply={ data.total_supply }
pageStartIndex={ pageStartIndex } pageStartIndex={ pageStartIndex }
/> />
</Hide> </Hide>
<Show below="lg" ssr={ false }> <Show below="lg" ssr={ false }>
{ data.items.map((item, index) => { { data.items.map((item, index) => {
return ( return (
<AddressesListItem <AddressesListItem
key={ item.hash } key={ item.hash }
item={ item } item={ item }
index={ pageStartIndex + index } index={ pageStartIndex + index }
totalSupply={ data.total_supply } totalSupply={ data.total_supply }
/> />
); );
}) } }) }
</Show> </Show>
</> </>
); ) : null;
})();
return ( return (
<Page> <Page>
<PageTitle text="Top accounts" withTextAd/> <PageTitle text="Top accounts" withTextAd/>
{ content } <DataListDisplay
isError={ isError }
isLoading={ isLoading }
items={ data?.items }
skeletonProps={{ skeletonDesktopColumns: [ '64px', '30%', '20%', '20%', '15%', '15%' ] }}
emptyText="There are no accounts."
content={ content }
actionBar={ actionBar }
/>
</Page> </Page>
); );
}; };
......
ui/pages/Token.pw.tsx
View file @ a3417b52
...@@ -21,8 +21,7 @@ const hooksConfig = { ...@@ -21,8 +21,7 @@ const hooksConfig = {
}; };
// FIXME: idk why mobile test doesn't work (it's ok locally) // FIXME: idk why mobile test doesn't work (it's ok locally)
// test('base view +@mobile +@dark-mode', async({ mount, page }) => { test('base view +@mobile +@dark-mode', async({ mount, page }) => {
test('base view +@dark-mode', async({ mount, page }) => {
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({ await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200, status: 200,
body: '', body: '',
......
ui/pages/VerifiedContracts.tsx
View file @ a3417b52
import { Box, Flex, Hide, Show, Text } from '@chakra-ui/react'; import { Box, Flex, Hide, Show } from '@chakra-ui/react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React from 'react'; import React from 'react';
...@@ -8,14 +8,11 @@ import useDebounce from 'lib/hooks/useDebounce'; ...@@ -8,14 +8,11 @@ import useDebounce from 'lib/hooks/useDebounce';
import useQueryWithPages from 'lib/hooks/useQueryWithPages'; import useQueryWithPages from 'lib/hooks/useQueryWithPages';
import { apos } from 'lib/html-entities'; import { apos } from 'lib/html-entities';
import getQueryParamString from 'lib/router/getQueryParamString'; import getQueryParamString from 'lib/router/getQueryParamString';
import EmptySearchResult from 'ui/apps/EmptySearchResult';
import ActionBar from 'ui/shared/ActionBar'; import ActionBar from 'ui/shared/ActionBar';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataListDisplay from 'ui/shared/DataListDisplay';
import FilterInput from 'ui/shared/filters/FilterInput'; import FilterInput from 'ui/shared/filters/FilterInput';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
import Pagination from 'ui/shared/Pagination'; import Pagination from 'ui/shared/Pagination';
import SkeletonList from 'ui/shared/skeletons/SkeletonList';
import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
import Sort from 'ui/shared/sort/Sort'; import Sort from 'ui/shared/sort/Sort';
import type { SortField, Sort as TSort } from 'ui/verifiedContracts/utils'; import type { SortField, Sort as TSort } from 'ui/verifiedContracts/utils';
import { SORT_OPTIONS, sortFn, getNextSortValue } from 'ui/verifiedContracts/utils'; import { SORT_OPTIONS, sortFn, getNextSortValue } from 'ui/verifiedContracts/utils';
...@@ -82,7 +79,7 @@ const VerifiedContracts = () => { ...@@ -82,7 +79,7 @@ const VerifiedContracts = () => {
/> />
); );
const bar = ( const actionBar = (
<> <>
<Show below="lg" ssr={ false }> <Show below="lg" ssr={ false }>
<Flex columnGap={ 3 } mb={ 6 }> <Flex columnGap={ 3 } mb={ 6 }>
...@@ -103,51 +100,35 @@ const VerifiedContracts = () => { ...@@ -103,51 +100,35 @@ const VerifiedContracts = () => {
</> </>
); );
const content = (() => { const sortedData = data?.items.slice().sort(sortFn(sort));
if (isError) {
return <DataFetchAlert/>;
}
if (isLoading) {
return (
<>
<Show below="lg" ssr={ false }>
<SkeletonList/>
</Show>
<Hide below="lg" ssr={ false }>
<SkeletonTable columns={ [ '50%', '130px', '130px', '50%', '80px', '110px' ] }/>
</Hide>
</>
);
}
if (data.items.length === 0 && !searchTerm && !type) {
return <Text as="span">There are no verified contracts</Text>;
}
if (data.items.length === 0) {
return <EmptySearchResult text={ `Couldn${ apos }t find any contract that matches your query.` }/>;
}
const sortedData = data.items.slice().sort(sortFn(sort)); const content = sortedData ? (
<>
return ( <Show below="lg" ssr={ false }>
<> <VerifiedContractsList data={ sortedData }/>
<Show below="lg" ssr={ false }> </Show>
<VerifiedContractsList data={ sortedData }/> <Hide below="lg" ssr={ false }>
</Show> <VerifiedContractsTable data={ sortedData } sort={ sort } onSortToggle={ handleSortToggle }/>
<Hide below="lg" ssr={ false }> </Hide>
<VerifiedContractsTable data={ sortedData } sort={ sort } onSortToggle={ handleSortToggle }/> </>
</Hide> ) : null;
</>
);
})();
return ( return (
<Box> <Box>
<PageTitle text="Verified contracts" withTextAd/> <PageTitle text="Verified contracts" withTextAd/>
{ bar } <DataListDisplay
{ content } isError={ isError }
isLoading={ isLoading }
items={ data?.items }
skeletonProps={{ skeletonDesktopColumns: [ '50%', '130px', '130px', '50%', '80px', '110px' ] }}
emptyText="There are no verified contracts."
filterProps={{
emptyFilteredText: `Couldn${ apos }t find any contract that matches your query.`,
hasActiveFilters: Boolean(searchTerm || type),
}}
content={ content }
actionBar={ actionBar }
/>
</Box> </Box>
); );
}; };
......
ui/shared/DataListDisplay.tsx 0 → 100644
View file @ a3417b52
import { Box, Text, chakra } from '@chakra-ui/react';
import React from 'react';
import EmptySearchResult from 'ui/apps/EmptySearchResult';
import DataFetchAlert from './DataFetchAlert';
import SkeletonList from './skeletons/SkeletonList';
import SkeletonTable from './skeletons/SkeletonTable';
type SkeletonProps =
{ customSkeleton: React.ReactNode } |
{
skeletonDesktopColumns: Array<string>;
isLongSkeleton?: boolean;
}
type FilterProps = {
hasActiveFilters: boolean;
emptyFilteredText: string;
};
type Props = {
isError: boolean;
isLoading: boolean;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
items?: Array<any>;
emptyText: string;
actionBar?: React.ReactNode;
content: React.ReactNode;
className?: string;
skeletonProps: SkeletonProps;
filterProps?: FilterProps;
}
const DataListDisplay = (props: Props) => {
if (props.isError) {
return <DataFetchAlert/>;
}
if (props.isLoading) {
return (
<>
{ props.actionBar }
{ 'customSkeleton' in props.skeletonProps && props.skeletonProps.customSkeleton }
{ 'skeletonDesktopColumns' in props.skeletonProps && (
<>
<SkeletonList display={{ base: 'block', lg: 'none' }}/>
<SkeletonTable
display={{ base: 'none', lg: 'block' }}
columns={ props.skeletonProps.skeletonDesktopColumns || [] }
isLong={ props.skeletonProps.isLongSkeleton }
/>
</>
) }
</>
);
}
if (props.filterProps?.hasActiveFilters && !props.items?.length) {
return (
<>
{ props.actionBar }
<EmptySearchResult text={ props.filterProps.emptyFilteredText }/>
</>
);
}
if (!props.items?.length) {
return <Text as="span">{ props.emptyText }</Text>;
}
return (
<Box className={ props.className }>
{ props.actionBar }
{ props.content }
</Box>
);
};
export default chakra(DataListDisplay);
ui/token/TokenHolders/TokenHolders.tsx
View file @ a3417b52
import { Text } from '@chakra-ui/react';
import type { UseQueryResult } from '@tanstack/react-query'; import type { UseQueryResult } from '@tanstack/react-query';
import React from 'react'; import React from 'react';
...@@ -7,10 +6,9 @@ import type { TokenHolders, TokenInfo } from 'types/api/token'; ...@@ -7,10 +6,9 @@ import type { TokenHolders, TokenInfo } from 'types/api/token';
import useIsMobile from 'lib/hooks/useIsMobile'; import useIsMobile from 'lib/hooks/useIsMobile';
import ActionBar from 'ui/shared/ActionBar'; import ActionBar from 'ui/shared/ActionBar';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataFetchAlert from 'ui/shared/DataFetchAlert';
import DataListDisplay from 'ui/shared/DataListDisplay';
import Pagination from 'ui/shared/Pagination'; import Pagination from 'ui/shared/Pagination';
import type { Props as PaginationProps } from 'ui/shared/Pagination'; import type { Props as PaginationProps } from 'ui/shared/Pagination';
import SkeletonList from 'ui/shared/skeletons/SkeletonList';
import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
import TokenHoldersList from './TokenHoldersList'; import TokenHoldersList from './TokenHoldersList';
import TokenHoldersTable from './TokenHoldersTable'; import TokenHoldersTable from './TokenHoldersTable';
...@@ -30,36 +28,31 @@ const TokenHoldersContent = ({ holdersQuery, tokenQuery }: Props) => { ...@@ -30,36 +28,31 @@ const TokenHoldersContent = ({ holdersQuery, tokenQuery }: Props) => {
return <DataFetchAlert/>; return <DataFetchAlert/>;
} }
const bar = isMobile && holdersQuery.isPaginationVisible && ( const actionBar = isMobile && holdersQuery.isPaginationVisible && (
<ActionBar mt={ -6 }> <ActionBar mt={ -6 }>
<Pagination ml="auto" { ...holdersQuery.pagination }/> <Pagination ml="auto" { ...holdersQuery.pagination }/>
</ActionBar> </ActionBar>
); );
if (holdersQuery.isLoading || tokenQuery.isLoading) { const items = holdersQuery.data?.items;
return (
<>
{ bar }
{ isMobile && <SkeletonList/> }
{ !isMobile && (
<SkeletonTable columns={ [ '100%', '300px', '175px' ] } isLong/>
) }
</>
);
}
const items = holdersQuery.data.items;
if (!items?.length) {
return <Text as="span">There are no holders for this token.</Text>;
}
return ( const content = items && tokenQuery.data ? (
<> <>
{ bar }
{ !isMobile && <TokenHoldersTable data={ items } token={ tokenQuery.data } top={ holdersQuery.isPaginationVisible ? 80 : 0 }/> } { !isMobile && <TokenHoldersTable data={ items } token={ tokenQuery.data } top={ holdersQuery.isPaginationVisible ? 80 : 0 }/> }
{ isMobile && <TokenHoldersList data={ items } token={ tokenQuery.data }/> } { isMobile && <TokenHoldersList data={ items } token={ tokenQuery.data }/> }
</> </>
) : null;
return (
<DataListDisplay
isError={ holdersQuery.isError || tokenQuery.isError }
isLoading={ holdersQuery.isLoading || tokenQuery.isLoading }
items={ holdersQuery.data?.items }
skeletonProps={{ skeletonDesktopColumns: [ '100%', '300px', '175px' ] }}
emptyText="There are no holders for this token."
content={ content }
actionBar={ actionBar }
/>
); );
}; };
......
ui/token/TokenInventory.tsx
View file @ a3417b52
import { Grid, Text, Skeleton } from '@chakra-ui/react'; import { Grid, Skeleton } from '@chakra-ui/react';
import type { UseQueryResult } from '@tanstack/react-query'; import type { UseQueryResult } from '@tanstack/react-query';
import React from 'react'; import React from 'react';
...@@ -6,7 +6,7 @@ import type { TokenInventoryResponse } from 'types/api/token'; ...@@ -6,7 +6,7 @@ import type { TokenInventoryResponse } from 'types/api/token';
import useIsMobile from 'lib/hooks/useIsMobile'; import useIsMobile from 'lib/hooks/useIsMobile';
import ActionBar from 'ui/shared/ActionBar'; import ActionBar from 'ui/shared/ActionBar';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataListDisplay from 'ui/shared/DataListDisplay';
import type { Props as PaginationProps } from 'ui/shared/Pagination'; import type { Props as PaginationProps } from 'ui/shared/Pagination';
import Pagination from 'ui/shared/Pagination'; import Pagination from 'ui/shared/Pagination';
...@@ -21,53 +21,51 @@ type Props = { ...@@ -21,53 +21,51 @@ type Props = {
const TokenInventory = ({ inventoryQuery }: Props) => { const TokenInventory = ({ inventoryQuery }: Props) => {
const isMobile = useIsMobile(); const isMobile = useIsMobile();
if (inventoryQuery.isError) {
return <DataFetchAlert/>;
}
const bar = isMobile && inventoryQuery.isPaginationVisible && ( const actionBar = isMobile && inventoryQuery.isPaginationVisible && (
<ActionBar mt={ -6 }> <ActionBar mt={ -6 }>
<Pagination ml="auto" { ...inventoryQuery.pagination }/> <Pagination ml="auto" { ...inventoryQuery.pagination }/>
</ActionBar> </ActionBar>
); );
if (inventoryQuery.isLoading) { const skeleton = (
return ( <Grid
<> w="100%"
{ bar } columnGap={{ base: 3, lg: 6 }}
<Grid rowGap={{ base: 3, lg: 6 }}
w="100%" gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }}
columnGap={{ base: 3, lg: 6 }} >
rowGap={{ base: 3, lg: 6 }} <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }} <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
> <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
<Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/> <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
<Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/> <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
<Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/> </Grid>
<Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/> );
<Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
</Grid>
</>
);
}
const items = inventoryQuery.data.items; const items = inventoryQuery.data?.items;
if (!items?.length) { const content = items ? (
return <Text as="span">There are no tokens.</Text>; <Grid
} w="100%"
columnGap={{ base: 3, lg: 6 }}
rowGap={{ base: 3, lg: 6 }}
gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }}
>
{ items.map((item) => <TokenInventoryItem key={ item.token.address + '_' + item.id } item={ item }/>) }
</Grid>
) : null;
return ( return (
<> <DataListDisplay
{ bar } isError={ inventoryQuery.isError }
<Grid isLoading={ inventoryQuery.isLoading }
w="100%" items={ items }
columnGap={{ base: 3, lg: 6 }} emptyText="There are no tokens."
rowGap={{ base: 3, lg: 6 }} content={ content }
gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }} actionBar={ actionBar }
> skeletonProps={{ customSkeleton: skeleton }}
{ items.map((item) => <TokenInventoryItem key={ item.token.address + '_' + item.id } item={ item }/>) } />
</Grid></>
); );
}; };
......
ui/token/TokenTransfer/TokenTransfer.tsx
View file @ a3417b52
import { Hide, Show, Text } from '@chakra-ui/react'; import { Hide, Show } from '@chakra-ui/react';
import type { UseQueryResult } from '@tanstack/react-query'; import type { UseQueryResult } from '@tanstack/react-query';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React from 'react'; import React from 'react';
...@@ -11,11 +11,9 @@ import useIsMobile from 'lib/hooks/useIsMobile'; ...@@ -11,11 +11,9 @@ import useIsMobile from 'lib/hooks/useIsMobile';
import useSocketChannel from 'lib/socket/useSocketChannel'; import useSocketChannel from 'lib/socket/useSocketChannel';
import useSocketMessage from 'lib/socket/useSocketMessage'; import useSocketMessage from 'lib/socket/useSocketMessage';
import ActionBar from 'ui/shared/ActionBar'; import ActionBar from 'ui/shared/ActionBar';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataListDisplay from 'ui/shared/DataListDisplay';
import Pagination from 'ui/shared/Pagination'; import Pagination from 'ui/shared/Pagination';
import type { Props as PaginationProps } from 'ui/shared/Pagination'; import type { Props as PaginationProps } from 'ui/shared/Pagination';
import SkeletonList from 'ui/shared/skeletons/SkeletonList';
import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice'; import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
import { flattenTotal } from 'ui/shared/TokenTransfer/helpers'; import { flattenTotal } from 'ui/shared/TokenTransfer/helpers';
import TokenTransferList from 'ui/token/TokenTransfer/TokenTransferList'; import TokenTransferList from 'ui/token/TokenTransfer/TokenTransferList';
...@@ -61,66 +59,55 @@ const TokenTransfer = ({ transfersQuery, tokenId }: Props) => { ...@@ -61,66 +59,55 @@ const TokenTransfer = ({ transfersQuery, tokenId }: Props) => {
handler: handleNewTransfersMessage, handler: handleNewTransfersMessage,
}); });
const content = (() => { const items = data?.items?.reduce(flattenTotal, []);
if (isLoading) {
return (
<>
<Hide below="lg" ssr={ false }>
<SkeletonTable columns={ [ '45%', '15%', '36px', '15%', '25%' ] } isLong/>
</Hide>
<Show below="lg" ssr={ false }>
<SkeletonList/>
</Show>
</>
);
}
if (isError) { const content = items ? (
return <DataFetchAlert/>;
}
if (!data.items?.length) { <>
return <Text as="span">There are no token transfers</Text>; <Hide below="lg" ssr={ false }>
} <TokenTransferTable
data={ items }
const items = data.items.reduce(flattenTotal, []); top={ isPaginationVisible ? 80 : 0 }
return ( showSocketInfo={ pagination.page === 1 }
<> socketInfoAlert={ socketAlert }
<Hide below="lg" ssr={ false }> socketInfoNum={ newItemsCount }
<TokenTransferTable tokenId={ tokenId }
data={ items } />
top={ isPaginationVisible ? 80 : 0 } </Hide>
showSocketInfo={ pagination.page === 1 } <Show below="lg" ssr={ false }>
socketInfoAlert={ socketAlert } { pagination.page === 1 && (
socketInfoNum={ newItemsCount } <SocketNewItemsNotice
tokenId={ tokenId } url={ window.location.href }
num={ newItemsCount }
alert={ socketAlert }
type="token_transfer"
borderBottomRadius={ 0 }
/> />
</Hide> ) }
<Show below="lg" ssr={ false }> <TokenTransferList data={ items } tokenId={ tokenId }/>
{ pagination.page === 1 && ( </Show>
<SocketNewItemsNotice </>
url={ window.location.href } ) : null;
num={ newItemsCount }
alert={ socketAlert } const actionBar = isMobile && isPaginationVisible ? (
type="token_transfer" <ActionBar mt={ -6 }>
borderBottomRadius={ 0 } <Pagination ml="auto" { ...pagination }/>
/> </ActionBar>
) } ) : null;
<TokenTransferList data={ items } tokenId={ tokenId }/>
</Show>
</>
);
})();
return ( return (
<> <DataListDisplay
{ isMobile && isPaginationVisible && ( isError={ isError }
<ActionBar mt={ -6 }> isLoading={ isLoading }
<Pagination ml="auto" { ...pagination }/> items={ data?.items }
</ActionBar> skeletonProps={{
) } isLongSkeleton: true,
{ content } skeletonDesktopColumns: [ '45%', '15%', '36px', '15%', '25%' ],
</> }}
emptyText="There are no token transfers."
content={ content }
actionBar={ actionBar }
/>
); );
}; };
......
ui/tokens/Tokens.tsx
View file @ a3417b52
import { Hide, HStack, Show, Text } from '@chakra-ui/react'; import { Hide, HStack, Show } from '@chakra-ui/react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
...@@ -9,15 +9,13 @@ import useDebounce from 'lib/hooks/useDebounce'; ...@@ -9,15 +9,13 @@ import useDebounce from 'lib/hooks/useDebounce';
import useQueryWithPages from 'lib/hooks/useQueryWithPages'; import useQueryWithPages from 'lib/hooks/useQueryWithPages';
import { apos } from 'lib/html-entities'; import { apos } from 'lib/html-entities';
import TOKEN_TYPE from 'lib/token/tokenTypes'; import TOKEN_TYPE from 'lib/token/tokenTypes';
import EmptySearchResult from 'ui/apps/EmptySearchResult';
import ActionBar from 'ui/shared/ActionBar'; import ActionBar from 'ui/shared/ActionBar';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataFetchAlert from 'ui/shared/DataFetchAlert';
import DataListDisplay from 'ui/shared/DataListDisplay';
import FilterInput from 'ui/shared/filters/FilterInput'; import FilterInput from 'ui/shared/filters/FilterInput';
import PopoverFilter from 'ui/shared/filters/PopoverFilter'; import PopoverFilter from 'ui/shared/filters/PopoverFilter';
import TokenTypeFilter from 'ui/shared/filters/TokenTypeFilter'; import TokenTypeFilter from 'ui/shared/filters/TokenTypeFilter';
import Pagination from 'ui/shared/Pagination'; import Pagination from 'ui/shared/Pagination';
import SkeletonList from 'ui/shared/skeletons/SkeletonList';
import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
import TokensListItem from './TokensListItem'; import TokensListItem from './TokensListItem';
import TokensTable from './TokensTable'; import TokensTable from './TokensTable';
...@@ -67,7 +65,7 @@ const Tokens = () => { ...@@ -67,7 +65,7 @@ const Tokens = () => {
/> />
); );
const bar = ( const actionBar = (
<> <>
<HStack spacing={ 3 } mb={ 6 } display={{ base: 'flex', lg: 'none' }}> <HStack spacing={ 3 } mb={ 6 } display={{ base: 'flex', lg: 'none' }}>
{ typeFilter } { typeFilter }
...@@ -83,36 +81,28 @@ const Tokens = () => { ...@@ -83,36 +81,28 @@ const Tokens = () => {
</> </>
); );
if (isLoading) { const content = data?.items ? (
return (
<>
{ bar }
<SkeletonList display={{ base: 'block', lg: 'none' }}/>
<SkeletonTable display={{ base: 'none', lg: 'block' }} columns={ [ '25px', '33%', '33%', '33%', '110px' ] }/>
</>
);
}
if (!data.items.length) {
if (debouncedFilter || type) {
return (
<>
{ bar }
<EmptySearchResult text={ `Couldn${ apos }t find token that matches your filter query.` }/>;
</>
);
}
return <Text as="span">There are no tokens</Text>;
}
return (
<> <>
{ bar }
<Show below="lg" ssr={ false }> <Show below="lg" ssr={ false }>
{ data.items.map((item, index) => <TokensListItem key={ item.address } token={ item } index={ index } page={ pagination.page }/>) } { data.items.map((item, index) => <TokensListItem key={ item.address } token={ item } index={ index } page={ pagination.page }/>) }
</Show> </Show>
<Hide below="lg" ssr={ false }><TokensTable items={ data.items } page={ pagination.page }/></Hide> <Hide below="lg" ssr={ false }><TokensTable items={ data.items } page={ pagination.page }/></Hide></>
</> ) : null;
return (
<DataListDisplay
isError={ isError }
isLoading={ isLoading }
items={ data?.items }
skeletonProps={{ skeletonDesktopColumns: [ '25px', '33%', '33%', '33%', '110px' ] }}
emptyText="There are no tokens."
filterProps={{
emptyFilteredText: `Couldn${ apos }t find token that matches your filter query.`,
hasActiveFilters: Boolean(debouncedFilter || type),
}}
content={ content }
actionBar={ actionBar }
/>
); );
}; };
......
ui/tx/TxInternals.tsx
View file @ a3417b52
import { Box, Text, Show, Hide } from '@chakra-ui/react'; import { Show, Hide } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { InternalTransaction } from 'types/api/internalTransaction'; import type { InternalTransaction } from 'types/api/internalTransaction';
import { SECOND } from 'lib/consts'; import { SECOND } from 'lib/consts';
import useIsMobile from 'lib/hooks/useIsMobile';
import useQueryWithPages from 'lib/hooks/useQueryWithPages'; import useQueryWithPages from 'lib/hooks/useQueryWithPages';
import { apos } from 'lib/html-entities'; // import { apos } from 'lib/html-entities';
import EmptySearchResult from 'ui/apps/EmptySearchResult';
import ActionBar from 'ui/shared/ActionBar'; import ActionBar from 'ui/shared/ActionBar';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataListDisplay from 'ui/shared/DataListDisplay';
// import FilterInput from 'ui/shared/filters/FilterInput'; // import FilterInput from 'ui/shared/filters/FilterInput';
// import TxInternalsFilter from 'ui/tx/internals/TxInternalsFilter'; // import TxInternalsFilter from 'ui/tx/internals/TxInternalsFilter';
import Pagination from 'ui/shared/Pagination'; import Pagination from 'ui/shared/Pagination';
import SkeletonList from 'ui/shared/skeletons/SkeletonList';
import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
import TxInternalsList from 'ui/tx/internals/TxInternalsList'; import TxInternalsList from 'ui/tx/internals/TxInternalsList';
import TxInternalsTable from 'ui/tx/internals/TxInternalsTable'; import TxInternalsTable from 'ui/tx/internals/TxInternalsTable';
import type { Sort, SortField } from 'ui/tx/internals/utils'; import type { Sort, SortField } from 'ui/tx/internals/utils';
...@@ -82,8 +78,6 @@ const TxInternals = () => { ...@@ -82,8 +78,6 @@ const TxInternals = () => {
}, },
}); });
const isMobile = useIsMobile();
// const handleFilterChange = React.useCallback((nextValue: Array<TxInternalsType>) => { // const handleFilterChange = React.useCallback((nextValue: Array<TxInternalsType>) => {
// setFilters(nextValue); // setFilters(nextValue);
// }, []); // }, []);
...@@ -98,52 +92,43 @@ const TxInternals = () => { ...@@ -98,52 +92,43 @@ const TxInternals = () => {
return txInfo.socketStatus ? <TxSocketAlert status={ txInfo.socketStatus }/> : <TxPendingAlert/>; return txInfo.socketStatus ? <TxSocketAlert status={ txInfo.socketStatus }/> : <TxPendingAlert/>;
} }
if (isLoading || txInfo.isLoading) { const filteredData = data?.items
return ( .slice()
<> // .filter(({ type }) => filters.length > 0 ? filters.includes(type) : true)
<Show below="lg" ssr={ false }><SkeletonList/></Show> // .filter(searchFn(searchTerm))
<Hide below="lg" ssr={ false }><SkeletonTable columns={ [ '28%', '20%', '24px', '20%', '16%', '16%' ] }/></Hide> .sort(sortFn(sort));
</>
); const content = filteredData ? (
} <>
<Show below="lg" ssr={ false }><TxInternalsList data={ filteredData }/></Show>
if (isError || txInfo.isError) { <Hide below="lg" ssr={ false }>
return <DataFetchAlert/>; <TxInternalsTable data={ filteredData } sort={ sort } onSortToggle={ handleSortToggle } top={ isPaginationVisible ? 80 : 0 }/>
} </Hide>
</>
if (data.items.length === 0) { ) : null;
return <Text as="span">There are no internal transactions for this transaction.</Text>;
} const actionBar = isPaginationVisible ? (
<ActionBar mt={ -6 }>
const content = (() => { { /* <TxInternalsFilter onFilterChange={ handleFilterChange } defaultFilters={ filters } appliedFiltersNum={ filters.length }/> */ }
const filteredData = data.items { /* <FilterInput onChange={ setSearchTerm } maxW="360px" ml={ 3 } size="xs" placeholder="Search by addresses, hash, method..."/> */ }
.slice() <Pagination ml="auto" { ...pagination }/>
// .filter(({ type }) => filters.length > 0 ? filters.includes(type) : true) </ActionBar>
// .filter(searchFn(searchTerm)) ) : null;
.sort(sortFn(sort));
if (filteredData.length === 0) {
return <EmptySearchResult text={ `Couldn${ apos }t find any transaction that matches your query.` }/>;
}
return isMobile ?
<TxInternalsList data={ filteredData }/> :
<TxInternalsTable data={ filteredData } sort={ sort } onSortToggle={ handleSortToggle } top={ isPaginationVisible ? 80 : 0 }/>;
})();
return ( return (
<Box> <DataListDisplay
{ isPaginationVisible && ( isError={ isError || txInfo.isError }
<ActionBar mt={ -6 }> isLoading={ isLoading || txInfo.isLoading }
<Pagination ml="auto" { ...pagination }/> items={ data?.items }
</ActionBar> skeletonProps={{ skeletonDesktopColumns: [ '28%', '20%', '24px', '20%', '16%', '16%' ] }}
) } emptyText="There are no internal transactions for this transaction."
{ /* <Flex mb={ 6 }> // filterProps={{
<TxInternalsFilter onFilterChange={ handleFilterChange } defaultFilters={ filters } appliedFiltersNum={ filters.length }/> // emptyFilteredText: `Couldn${ apos }t find any transaction that matches your query.`.
<FilterInput onChange={ setSearchTerm } maxW="360px" ml={ 3 } size="xs" placeholder="Search by addresses, hash, method..."/> // hasActiveFilters: Boolean(filters.length || searchTerm),
</Flex> */ } // }}
{ content } content={ content }
</Box> actionBar={ actionBar }
/>
); );
}; };
......
ui/tx/TxTokenTransfer.tsx
View file @ a3417b52
import { Hide, Show, Text } from '@chakra-ui/react'; import { Hide, Show } from '@chakra-ui/react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React from 'react'; import React from 'react';
...@@ -9,12 +9,10 @@ import getFilterValuesFromQuery from 'lib/getFilterValuesFromQuery'; ...@@ -9,12 +9,10 @@ import getFilterValuesFromQuery from 'lib/getFilterValuesFromQuery';
import useQueryWithPages from 'lib/hooks/useQueryWithPages'; import useQueryWithPages from 'lib/hooks/useQueryWithPages';
import { apos } from 'lib/html-entities'; import { apos } from 'lib/html-entities';
import TOKEN_TYPE from 'lib/token/tokenTypes'; import TOKEN_TYPE from 'lib/token/tokenTypes';
import EmptySearchResult from 'ui/apps/EmptySearchResult';
import ActionBar from 'ui/shared/ActionBar'; import ActionBar from 'ui/shared/ActionBar';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataFetchAlert from 'ui/shared/DataFetchAlert';
import DataListDisplay from 'ui/shared/DataListDisplay';
import Pagination from 'ui/shared/Pagination'; import Pagination from 'ui/shared/Pagination';
import SkeletonList from 'ui/shared/skeletons/SkeletonList';
import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
import { flattenTotal } from 'ui/shared/TokenTransfer/helpers'; import { flattenTotal } from 'ui/shared/TokenTransfer/helpers';
import TokenTransferFilter from 'ui/shared/TokenTransfer/TokenTransferFilter'; import TokenTransferFilter from 'ui/shared/TokenTransfer/TokenTransferFilter';
import TokenTransferList from 'ui/shared/TokenTransfer/TokenTransferList'; import TokenTransferList from 'ui/shared/TokenTransfer/TokenTransferList';
...@@ -57,56 +55,47 @@ const TxTokenTransfer = () => { ...@@ -57,56 +55,47 @@ const TxTokenTransfer = () => {
const numActiveFilters = typeFilter.length; const numActiveFilters = typeFilter.length;
const isActionBarHidden = !numActiveFilters && !tokenTransferQuery.data?.items.length; const isActionBarHidden = !numActiveFilters && !tokenTransferQuery.data?.items.length;
const content = (() => { const items = tokenTransferQuery.data?.items?.reduce(flattenTotal, []);
if (txsInfo.isLoading || tokenTransferQuery.isLoading) {
return (
<>
<Hide below="lg" ssr={ false }>
<SkeletonTable columns={ [ '185px', '25%', '25%', '25%', '25%' ] }
/>
</Hide>
<Show below="lg" ssr={ false }>
<SkeletonList/>
</Show>
</>
);
}
if (!tokenTransferQuery.data.items?.length && !numActiveFilters) {
return <Text as="span">There are no token transfers</Text>;
}
if (!tokenTransferQuery.data.items?.length) {
return <EmptySearchResult text={ `Couldn${ apos }t find any token transfer that matches your query.` }/>;
}
const items = tokenTransferQuery.data.items.reduce(flattenTotal, []);
return (
<>
<Hide below="lg" ssr={ false }>
<TokenTransferTable data={ items } top={ isActionBarHidden ? 0 : 80 }/>
</Hide>
<Show below="lg" ssr={ false }>
<TokenTransferList data={ items }/>
</Show>
</>
);
})();
return ( const content = items ? (
<> <>
{ !isActionBarHidden && ( <Hide below="lg" ssr={ false }>
<ActionBar mt={ -6 }> <TokenTransferTable data={ items } top={ isActionBarHidden ? 0 : 80 }/>
<TokenTransferFilter </Hide>
defaultTypeFilters={ typeFilter } <Show below="lg" ssr={ false }>
onTypeFilterChange={ handleTypeFilterChange } <TokenTransferList data={ items }/>
appliedFiltersNum={ numActiveFilters } </Show>
/>
{ tokenTransferQuery.isPaginationVisible && <Pagination ml="auto" { ...tokenTransferQuery.pagination }/> }
</ActionBar>
) }
{ content }
</> </>
) : null;
const actionBar = !isActionBarHidden ? (
<ActionBar mt={ -6 }>
<TokenTransferFilter
defaultTypeFilters={ typeFilter }
onTypeFilterChange={ handleTypeFilterChange }
appliedFiltersNum={ numActiveFilters }
/>
{ tokenTransferQuery.isPaginationVisible && <Pagination ml="auto" { ...tokenTransferQuery.pagination }/> }
</ActionBar>
) : null;
return (
<DataListDisplay
isError={ txsInfo.isError || tokenTransferQuery.isError }
isLoading={ txsInfo.isLoading || tokenTransferQuery.isLoading }
items={ tokenTransferQuery.data?.items }
skeletonProps={{
isLongSkeleton: true,
skeletonDesktopColumns: [ '185px', '25%', '25%', '25%', '25%' ],
}}
emptyText="There are no token transfers."
filterProps={{
emptyFilteredText: `Couldn${ apos }t find any token transfer that matches your query.`,
hasActiveFilters: Boolean(numActiveFilters),
}}
content={ content }
actionBar={ actionBar }
/>
); );
}; };
......
ui/txs/TxsContent.tsx
View file @ a3417b52
import { Text, Box, Show, Hide } from '@chakra-ui/react'; import { Box, Show, Hide } from '@chakra-ui/react';
import type { UseQueryResult } from '@tanstack/react-query'; import type { UseQueryResult } from '@tanstack/react-query';
import React from 'react'; import React from 'react';
...@@ -6,10 +6,8 @@ import type { TxsResponse } from 'types/api/transaction'; ...@@ -6,10 +6,8 @@ import type { TxsResponse } from 'types/api/transaction';
import useIsMobile from 'lib/hooks/useIsMobile'; import useIsMobile from 'lib/hooks/useIsMobile';
import AddressCsvExportLink from 'ui/address/AddressCsvExportLink'; import AddressCsvExportLink from 'ui/address/AddressCsvExportLink';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataListDisplay from 'ui/shared/DataListDisplay';
import type { Props as PaginationProps } from 'ui/shared/Pagination'; import type { Props as PaginationProps } from 'ui/shared/Pagination';
import SkeletonList from 'ui/shared/skeletons/SkeletonList';
import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice'; import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
import TxsHeaderMobile from './TxsHeaderMobile'; import TxsHeaderMobile from './TxsHeaderMobile';
...@@ -50,92 +48,75 @@ const TxsContent = ({ ...@@ -50,92 +48,75 @@ const TxsContent = ({
const { data, isLoading, isError, setSortByField, setSortByValue, sorting } = useTxsSort(query); const { data, isLoading, isError, setSortByField, setSortByValue, sorting } = useTxsSort(query);
const isMobile = useIsMobile(); const isMobile = useIsMobile();
const content = (() => { const content = data?.items ? (
if (isError) {
return <DataFetchAlert/>;
}
if (isLoading) {
return (
<>
<Show below="lg" ssr={ false }><SkeletonList/></Show>
<Hide below="lg" ssr={ false }>
<SkeletonTable
columns={ showBlockInfo ?
[ '32px', '22%', '160px', '20%', '18%', '292px', '20%', '20%' ] :
[ '32px', '22%', '160px', '20%', '292px', '20%', '20%' ]
}
isLong={ hasLongSkeleton }
/>
</Hide>
</>
);
}
const txs = data.items;
if (!txs.length) {
return <Text as="span">There are no transactions.</Text>;
}
return (
<>
<Show below="lg" ssr={ false }>
<Box>
{ showSocketInfo && (
<SocketNewItemsNotice
url={ window.location.href }
num={ socketInfoNum }
alert={ socketInfoAlert }
borderBottomRadius={ 0 }
>
{ ({ content }) => <Box>{ content }</Box> }
</SocketNewItemsNotice>
) }
{ txs.map(tx => (
<TxsListItem
tx={ tx }
key={ tx.hash }
showBlockInfo={ showBlockInfo }
currentAddress={ currentAddress }
enableTimeIncrement={ enableTimeIncrement }
/>
)) }
</Box>
</Show>
<Hide below="lg" ssr={ false }>
<TxsTable
txs={ txs }
sort={ setSortByField }
sorting={ sorting }
showBlockInfo={ showBlockInfo }
showSocketInfo={ showSocketInfo }
socketInfoAlert={ socketInfoAlert }
socketInfoNum={ socketInfoNum }
top={ top || query.isPaginationVisible ? 80 : 0 }
currentAddress={ currentAddress }
enableTimeIncrement={ enableTimeIncrement }
/>
</Hide>
</>
);
})();
return (
<> <>
{ isMobile && ( <Show below="lg" ssr={ false }>
<TxsHeaderMobile <Box>
mt={ -6 } { showSocketInfo && (
<SocketNewItemsNotice
url={ window.location.href }
num={ socketInfoNum }
alert={ socketInfoAlert }
borderBottomRadius={ 0 }
>
{ ({ content }) => <Box>{ content }</Box> }
</SocketNewItemsNotice>
) }
{ data.items.map(tx => (
<TxsListItem
tx={ tx }
key={ tx.hash }
showBlockInfo={ showBlockInfo }
currentAddress={ currentAddress }
enableTimeIncrement={ enableTimeIncrement }
/>
)) }
</Box>
</Show>
<Hide below="lg" ssr={ false }>
<TxsTable
txs={ data.items }
sort={ setSortByField }
sorting={ sorting } sorting={ sorting }
setSorting={ setSortByValue } showBlockInfo={ showBlockInfo }
paginationProps={ query.pagination } showSocketInfo={ showSocketInfo }
showPagination={ query.isPaginationVisible } socketInfoAlert={ socketInfoAlert }
filterComponent={ filter } socketInfoNum={ socketInfoNum }
linkSlot={ currentAddress ? <AddressCsvExportLink address={ currentAddress } type="transactions" ml={ 2 }/> : null } top={ top || query.isPaginationVisible ? 80 : 0 }
currentAddress={ currentAddress }
enableTimeIncrement={ enableTimeIncrement }
/> />
) } </Hide>
{ content }
</> </>
) : null;
const actionBar = isMobile ? (
<TxsHeaderMobile
mt={ -6 }
sorting={ sorting }
setSorting={ setSortByValue }
paginationProps={ query.pagination }
showPagination={ query.isPaginationVisible }
filterComponent={ filter }
linkSlot={ currentAddress ? <AddressCsvExportLink address={ currentAddress } type="transactions" ml={ 2 }/> : null }
/>
) : null;
return (
<DataListDisplay
isError={ isError }
isLoading={ isLoading }
items={ data?.items }
skeletonProps={{
isLongSkeleton: hasLongSkeleton,
skeletonDesktopColumns: showBlockInfo ?
[ '32px', '22%', '160px', '20%', '18%', '292px', '20%', '20%' ] :
[ '32px', '22%', '160px', '20%', '292px', '20%', '20%' ],
}}
emptyText="There are no transactions."
content={ content }
actionBar={ actionBar }
/>
); );
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment