clean up

ui/address/AddressBlocksValidated.tsx

@@ -131,9 +131,7 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
   return (
     <DataListDisplay
       isError={ query.isError }
-      isLoading={ false }
       items={ query.data?.items }
-      skeletonProps={{ isLongSkeleton: true, skeletonDesktopColumns: [ '17%', '17%', '16%', '25%', '25%' ] }}
       emptyText="There are no validated blocks for this address."
       content={ content }
       actionBar={ actionBar }

ui/address/AddressInternalTxs.tsx

@@ -82,9 +82,7 @@ const AddressInternalTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
   return (
     <DataListDisplay
       isError={ isError }
-      isLoading={ false }
       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 }

ui/address/AddressLogs.tsx

@@ -39,12 +39,10 @@ const AddressLogs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>
   return (
     <DataListDisplay
       isError={ isError }
-      isLoading={ false }
       items={ data?.items }
       emptyText="There are no logs for this address."
       content={ content }
       actionBar={ actionBar }
-      skeletonProps={{ customSkeleton: null }}
     />
   );
 };

ui/address/AddressTokenTransfers.tsx

@@ -286,12 +286,7 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Pr
   return (
     <DataListDisplay
       isError={ isError }
-      isLoading={ false }
       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.`,

ui/address/AddressTxs.tsx

@@ -184,7 +184,6 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Props) => {
         socketInfoAlert={ socketAlert }
         socketInfoNum={ newItemsCount }
         top={ 80 }
-        hasLongSkeleton
       />
     </>
   );

ui/address/AddressWithdrawals.tsx

@@ -55,9 +55,7 @@ const AddressWithdrawals = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
   return (
     <DataListDisplay
       isError={ isError }
-      isLoading={ false }
       items={ data?.items }
-      skeletonProps={{ isLongSkeleton: true, skeletonDesktopColumns: Array(5).fill(`${ 100 / 5 }%`), skeletonDesktopMinW: '950px' }}
       emptyText="There are no withdrawals for this address."
       content={ content }
       actionBar={ actionBar }

ui/address/coinBalance/AddressCoinBalanceHistory.tsx

@@ -71,9 +71,7 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
     <DataListDisplay
       mt={ 8 }
       isError={ query.isError }
-      isLoading={ false }
       items={ query.data?.items }
-      skeletonProps={{ skeletonDesktopColumns: [ '25%', '25%', '25%', '25%', '120px' ] }}
       emptyText="There is no coin balance history for this address."
       content={ content }
       actionBar={ actionBar }

ui/address/tokens/ERC1155Tokens.tsx

@@ -54,12 +54,10 @@ const ERC1155Tokens = ({ tokensQuery }: Props) => {
   return (
     <DataListDisplay
       isError={ isError }
-      isLoading={ false }
       items={ data?.items }
       emptyText="There are no tokens of selected type."
       content={ content }
       actionBar={ actionBar }
-      skeletonProps={{ customSkeleton: null }}
     />
   );
 };

ui/address/tokens/ERC20Tokens.tsx

@@ -46,12 +46,7 @@ const ERC20Tokens = ({ tokensQuery }: Props) => {
   return (
     <DataListDisplay
       isError={ isError }
-      isLoading={ false }
       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/address/tokens/ERC721Tokens.tsx

@@ -46,12 +46,7 @@ const ERC721Tokens = ({ tokensQuery }: Props) => {
   return (
     <DataListDisplay
       isError={ isError }
-      isLoading={ false }
       items={ data?.items }
-      skeletonProps={{
-        isLongSkeleton: true,
-        skeletonDesktopColumns: [ '40%', '40%', '20%' ],
-      }}
       emptyText="There are no tokens of selected type."
       content={ content }
       actionBar={ actionBar }

ui/block/BlockWithdrawals.tsx

@@ -45,9 +45,7 @@ const BlockWithdrawals = ({ blockWithdrawalsQuery }: Props) => {
   return (
     <DataListDisplay
       isError={ blockWithdrawalsQuery.isError }
-      isLoading={ false }
       items={ blockWithdrawalsQuery.data?.items }
-      skeletonProps={{ isLongSkeleton: true, skeletonDesktopColumns: Array(4).fill(`${ 100 / 4 }%`), skeletonDesktopMinW: '950px' }}
       emptyText="There are no withdrawals for this block."
       content={ content }
     />

ui/blocks/BlocksContent.tsx

@@ -95,9 +95,7 @@ const BlocksContent = ({ type, query }: Props) => {
   return (
     <DataListDisplay
       isError={ query.isError }
-      isLoading={ false }
       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

@@ -71,9 +71,7 @@ const Accounts = () => {
       <PageTitle title="Top accounts" withTextAd/>
       <DataListDisplay
         isError={ isError }
-        isLoading={ false }
         items={ data?.items }
-        skeletonProps={{ skeletonDesktopColumns: [ '64px', '30%', '20%', '20%', '15%', '15%' ] }}
         emptyText="There are no accounts."
         content={ content }
         actionBar={ actionBar }

ui/pages/L2Deposits.tsx

@@ -88,9 +88,7 @@ const L2Deposits = () => {
       <PageTitle title={ `Deposits (L1${ nbsp }${ rightLineArrow }${ nbsp }L2)` } withTextAd/>
       <DataListDisplay
         isError={ isError }
-        isLoading={ false }
         items={ data?.items }
-        skeletonProps={{ skeletonDesktopColumns: Array(7).fill(`${ 100 / 7 }%`), skeletonDesktopMinW: '950px' }}
         emptyText="There are no withdrawals."
         content={ content }
         actionBar={ actionBar }

ui/pages/L2OutputRoots.tsx

@@ -86,9 +86,7 @@ const L2OutputRoots = () => {
       <PageTitle title="Output roots" withTextAd/>
       <DataListDisplay
         isError={ isError }
-        isLoading={ false }
         items={ data?.items }
-        skeletonProps={{ skeletonDesktopColumns: [ '140px', '20%', '20%', '30%', '30%' ] }}
         emptyText="There are no output roots."
         content={ content }
         actionBar={ actionBar }

ui/pages/L2TxnBatches.tsx

@@ -85,9 +85,7 @@ const L2TxnBatches = () => {
       <PageTitle title={ `Tx batches (L2${ nbsp }blocks)` } withTextAd/>
       <DataListDisplay
         isError={ isError }
-        isLoading={ false }
         items={ data?.items }
-        skeletonProps={{ skeletonDesktopColumns: [ '170px', '170px', '160px', '100%', '150px' ] }}
         emptyText="There are no tx batches."
         content={ content }
         actionBar={ actionBar }

ui/pages/L2Withdrawals.tsx

@@ -85,9 +85,7 @@ const L2Withdrawals = () => {
       <PageTitle title={ `Withdrawals (L2${ nbsp }${ rightLineArrow }${ nbsp }L1)` } withTextAd/>
       <DataListDisplay
         isError={ isError }
-        isLoading={ false }
         items={ data?.items }
-        skeletonProps={{ skeletonDesktopColumns: Array(7).fill(`${ 100 / 7 }%`), skeletonDesktopMinW: '950px' }}
         emptyText="There are no withdrawals."
         content={ content }
         actionBar={ actionBar }

ui/pages/VerifiedAddresses.pw.tsx

@@ -74,8 +74,6 @@ test('address verification flow', async({ mount, page }) => {
   await page.getByRole('button', { name: /continue/i }).click();
 
   // fill second step
-  const option = page.getByText(/sign manually/i);
-  await option.click();
   const signatureInput = page.getByLabel(/signature hash/i);
   await signatureInput.fill(mocks.SIGNATURE);
   await page.getByRole('button', { name: /verify/i }).click();

ui/pages/VerifiedAddresses.tsx

@@ -187,12 +187,10 @@ const VerifiedAddresses = () => {
         <AdminSupportText mt={ 5 }/>
       </AccountPageDescription>
       <DataListDisplay
-        isLoading={ false }
         isError={ addressesQuery.isError || applicationsQuery.isError }
         items={ addressesQuery.data?.verifiedAddresses }
         content={ content }
         emptyText=""
-        skeletonProps={{ customSkeleton: null }}
       />
       { addButton }
       <AddressVerificationModal

ui/pages/VerifiedContracts.tsx

@@ -135,9 +135,7 @@ const VerifiedContracts = () => {
       <VerifiedContractsCounters/>
       <DataListDisplay
         isError={ isError }
-        isLoading={ false }
         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.`,

ui/pages/Withdrawals.tsx

@@ -91,9 +91,7 @@ const Withdrawals = () => {
       <PageTitle title="Withdrawals" withTextAd/>
       <DataListDisplay
         isError={ isError }
-        isLoading={ false }
         items={ data?.items }
-        skeletonProps={{ skeletonDesktopColumns: Array(6).fill(`${ 100 / 6 }%`), skeletonDesktopMinW: '950px' }}
         emptyText="There are no withdrawals."
         content={ content }
         actionBar={ actionBar }

ui/shared/DataListDisplay.tsx

@@ -4,16 +4,6 @@ import React from 'react';
 import EmptySearchResult from 'ui/shared/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;
-    skeletonDesktopMinW?: string;
-  }
 
 type FilterProps = {
   hasActiveFilters: boolean;
@@ -22,13 +12,11 @@ type FilterProps = {
 
 type Props = {
   isError: boolean;
-  isLoading: boolean;
   items?: Array<unknown>;
   emptyText: string;
   actionBar?: React.ReactNode;
   content: React.ReactNode;
   className?: string;
-  skeletonProps: SkeletonProps;
   filterProps?: FilterProps;
 }
 
@@ -37,27 +25,6 @@ const DataListDisplay = (props: Props) => {
     return <DataFetchAlert className={ props.className }/>;
   }
 
-  if (props.isLoading) {
-
-    return (
-      <Box className={ props.className }>
-        { 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 }
-              minW={ props.skeletonProps.skeletonDesktopMinW }
-            />
-          </>
-        ) }
-      </Box>
-    );
-  }
-
   if (props.filterProps?.hasActiveFilters && !props.items?.length) {
     return (
       <Box className={ props.className }>

ui/shared/skeletons/SkeletonList.tsx

-import { Box, Flex, Skeleton, SkeletonCircle, chakra } from '@chakra-ui/react';
-import React from 'react';
-
-const SkeletonList = ({ className }: {className?: string}) => {
-  return (
-    <Box className={ className }>
-      { Array.from(Array(2)).map((item, index) => (
-        <Flex
-          key={ index }
-          rowGap={ 4 }
-          flexDirection="column"
-          paddingY={ 6 }
-          borderTopWidth="1px"
-          borderColor="divider"
-          _last={{
-            borderBottomWidth: '0px',
-          }}
-        >
-          <Flex h={ 4 }>
-            <Skeleton w="30%" mr={ 2 } borderRadius="full"/>
-            <Skeleton w="15%" borderRadius="full"/>
-          </Flex>
-          <Flex h={ 4 }>
-            <SkeletonCircle boxSize={ 4 } mr={ 2 } flexShrink={ 0 }/>
-            <Skeleton flexGrow={ 1 } mr={ 3 } borderRadius="full"/>
-            <Skeleton w={ 6 } mr={ 3 } borderRadius="full"/>
-            <SkeletonCircle boxSize={ 4 } mr={ 2 } flexShrink={ 0 }/>
-            <Skeleton flexGrow={ 1 } mr={ 3 } borderRadius="full"/>
-          </Flex>
-          <Skeleton w="75%" h={ 4 } borderRadius="full"/>
-          <Skeleton w="60%" h={ 4 } borderRadius="full"/>
-        </Flex>
-      )) }
-    </Box>
-  );
-};
-
-export default chakra(SkeletonList);

ui/shared/skeletons/SkeletonListAccount.tsx

-import { Box, Flex, Skeleton, SkeletonCircle } from '@chakra-ui/react';
-import React from 'react';
-
-interface Props {
-  showFooterSlot?: boolean;
-}
-
-const SkeletonListAccount = ({ showFooterSlot }: Props) => {
-  return (
-    <Box>
-      { Array.from(Array(2)).map((item, index) => (
-        <Flex
-          key={ index }
-          rowGap={ 3 }
-          flexDirection="column"
-          paddingY={ 6 }
-          borderTopWidth="1px"
-          borderColor="divider"
-          _last={{
-            borderBottomWidth: '0px',
-          }}
-        >
-          <Flex columnGap={ 2 } w="100%" alignItems="center">
-            <SkeletonCircle size="6" flexShrink="0"/>
-            <Skeleton h={ 4 } w="100%"/>
-          </Flex>
-          <Skeleton h={ 4 } w="164px"/>
-          <Skeleton h={ 4 } w="164px"/>
-          <Flex columnGap={ 3 } mt={ 7 }>
-            { showFooterSlot && (
-              <Flex alignItems="center" columnGap={ 2 }>
-                <Skeleton h={ 4 } w="164px"/>
-                <SkeletonCircle size="6" flexShrink="0"/>
-              </Flex>
-            ) }
-            <SkeletonCircle size="6" flexShrink="0" ml="auto"/>
-            <SkeletonCircle size="6" flexShrink="0"/>
-          </Flex>
-        </Flex>
-      )) }
-    </Box>
-  );
-};
-
-export default SkeletonListAccount;

ui/shared/skeletons/SkeletonTable.tsx

-import { Box, HStack, Skeleton, chakra } from '@chakra-ui/react';
-import React from 'react';
-
-interface Props {
-  columns: Array<string>;
-  className?: string;
-  isLong?: boolean;
-}
-
-const SkeletonTable = ({ columns, className, isLong }: Props) => {
-  const rowsNum = isLong ? 50 : 3;
-
-  return (
-    <Box className={ className }>
-      <Skeleton height={ 10 } width="100%" borderBottomLeftRadius="none" borderBottomRightRadius="none"/>
-      { Array.from(Array(rowsNum)).map((item, index) => (
-        <HStack key={ index } spacing={ 6 } marginTop={ 8 }>
-          { columns.map((width, index) => (
-            <Skeleton
-              key={ index }
-              height={ 5 }
-              width={ width }
-              flexShrink={ width.includes('%') ? 'initial' : 0 }
-              borderRadius="full"
-            />
-          )) }
-        </HStack>
-      )) }
-    </Box>
-  );
-};
-
-export default React.memo(chakra(SkeletonTable));

ui/token/TokenHolders/TokenHolders.tsx

@@ -60,9 +60,7 @@ const TokenHoldersContent = ({ holdersQuery, token }: Props) => {
   return (
     <DataListDisplay
       isError={ holdersQuery.isError }
-      isLoading={ false }
       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

@@ -50,12 +50,10 @@ const TokenInventory = ({ inventoryQuery }: Props) => {
   return (
     <DataListDisplay
       isError={ inventoryQuery.isError }
-      isLoading={ false }
       items={ items }
       emptyText="There are no tokens."
       content={ content }
       actionBar={ actionBar }
-      skeletonProps={{ customSkeleton: null }}
     />
   );
 };

ui/token/TokenTransfer/TokenTransfer.tsx

@@ -99,12 +99,7 @@ const TokenTransfer = ({ transfersQuery, tokenId, token }: Props) => {
   return (
     <DataListDisplay
       isError={ isError }
-      isLoading={ false }
       items={ data?.items }
-      skeletonProps={{
-        isLongSkeleton: true,
-        skeletonDesktopColumns: [ '45%', '15%', '36px', '15%', '25%' ],
-      }}
       emptyText="There are no token transfers."
       content={ content }
       actionBar={ actionBar }

ui/tokens/Tokens.tsx

@@ -116,9 +116,7 @@ const Tokens = () => {
   return (
     <DataListDisplay
       isError={ isError }
-      isLoading={ false }
       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.`,

ui/tx/TxInternals.tsx

@@ -130,9 +130,7 @@ const TxInternals = () => {
   return (
     <DataListDisplay
       isError={ isError || txInfo.isError }
-      isLoading={ false }
       items={ data?.items }
-      skeletonProps={{ skeletonDesktopColumns: [ '28%', '20%', '24px', '20%', '16%', '16%' ] }}
       emptyText="There are no internal transactions for this transaction."
       // filterProps={{
       // emptyFilteredText: `Couldn${ apos }t find any transaction that matches your query.`.

ui/tx/TxState.tsx

@@ -45,11 +45,9 @@ const TxState = () => {
       </Text>
       <DataListDisplay
         isError={ isError }
-        isLoading={ false }
         items={ data }
         emptyText="There are no state changes for this transaction."
         content={ content }
-        skeletonProps={{ customSkeleton: null }}
       />
     </>
   );

ui/tx/TxTokenTransfer.tsx

@@ -84,12 +84,7 @@ const TxTokenTransfer = () => {
   return (
     <DataListDisplay
       isError={ txsInfo.isError || tokenTransferQuery.isError }
-      isLoading={ false }
       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.`,

ui/txs/TxsContent.tsx

@@ -30,7 +30,6 @@ type Props = {
   filter?: React.ReactNode;
   enableTimeIncrement?: boolean;
   top?: number;
-  hasLongSkeleton?: boolean;
 }
 
 const TxsContent = ({
@@ -42,7 +41,6 @@ const TxsContent = ({
   socketInfoNum,
   currentAddress,
   enableTimeIncrement,
-  hasLongSkeleton,
   top,
 }: Props) => {
   const { data, isPlaceholderData, isError, setSortByField, setSortByValue, sorting } = useTxsSort(query);
@@ -107,14 +105,7 @@ const TxsContent = ({
   return (
     <DataListDisplay
       isError={ isError }
-      isLoading={ false }
       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 }