Merge pull request #451 from blockscout/common-skeleton

сommon skeleton for lists

ui/address/AddressBlocksValidated.tsx

@@ -14,12 +14,12 @@ import useSocketMessage from 'lib/socket/useSocketMessage';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Pagination from 'ui/shared/Pagination';
-import SkeletonTable from 'ui/shared/SkeletonTable';
+import SkeletonList from 'ui/shared/skeletons/SkeletonList';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 import SocketAlert from 'ui/shared/SocketAlert';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
 import AddressBlocksValidatedListItem from './blocksValidated/AddressBlocksValidatedListItem';
-import AddressBlocksValidatedSkeletonMobile from './blocksValidated/AddressBlocksValidatedSkeletonMobile';
 import AddressBlocksValidatedTableItem from './blocksValidated/AddressBlocksValidatedTableItem';
 
 interface Props {
@@ -79,7 +79,7 @@ const AddressBlocksValidated = ({ addressQuery }: Props) => {
             <SkeletonTable columns={ [ '17%', '17%', '16%', '25%', '25%' ] }/>
           </Hide>
           <Show below="lg">
-            <AddressBlocksValidatedSkeletonMobile/>
+            <SkeletonList/>
           </Show>
         </>
       );

ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx

@@ -8,7 +8,7 @@ import appConfig from 'configs/app/config';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import link from 'lib/link/link';
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 type Props = Block & {
@@ -21,7 +21,7 @@ const AddressBlocksValidatedListItem = (props: Props) => {
   const totalReward = getBlockTotalReward(props);
 
   return (
-    <AccountListItemMobile rowGap={ 2 }>
+    <ListItemMobile rowGap={ 2 } isAnimated>
       <Flex justifyContent="space-between" w="100%">
         <Link href={ blockUrl } fontWeight="700">{ props.height }</Link>
         <Text variant="secondary">{ timeAgo }</Text>
@@ -39,7 +39,7 @@ const AddressBlocksValidatedListItem = (props: Props) => {
         <Text fontWeight={ 500 } flexShrink={ 0 }>Reward { appConfig.network.currency.symbol }</Text>
         <Text variant="secondary">{ totalReward.toFixed() }</Text>
       </Flex>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/address/blocksValidated/AddressBlocksValidatedSkeletonMobile.tsx

-import { Skeleton, Flex, Box, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-const AddressBlocksValidatedSkeletonMobile = () => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
-  return (
-    <Box>
-      { Array.from(Array(2)).map((item, index) => (
-        <Flex
-          key={ index }
-          rowGap={ 3 }
-          flexDirection="column"
-          paddingY={ 6 }
-          borderTopWidth="1px"
-          borderColor={ borderColor }
-          _last={{
-            borderBottomWidth: '1px',
-          }}
-        >
-          <Flex justifyContent="space-between" w="100%" h={ 6 }>
-            <Skeleton w="100px"/>
-            <Skeleton w="100px"/>
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="40px"/>
-            <Skeleton w="40px"/>
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="70px"/>
-            <Skeleton w="70px"/>
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="100px"/>
-            <Skeleton w="120px"/>
-          </Flex>
-        </Flex>
-      )) }
-    </Box>
-  );
-};
-
-export default AddressBlocksValidatedSkeletonMobile;

ui/address/coinBalance/AddressCoinBalanceHistory.tsx

@@ -9,11 +9,11 @@ import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
 import Pagination from 'ui/shared/Pagination';
-import SkeletonTable from 'ui/shared/SkeletonTable';
+import SkeletonList from 'ui/shared/skeletons/SkeletonList';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
 import AddressCoinBalanceListItem from './AddressCoinBalanceListItem';
-import AddressCoinBalanceSkeletonMobile from './AddressCoinBalanceSkeletonMobile';
 import AddressCoinBalanceTableItem from './AddressCoinBalanceTableItem';
 
 interface Props {
@@ -33,7 +33,7 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
             <SkeletonTable columns={ [ '25%', '25%', '25%', '25%', '120px' ] }/>
           </Hide>
           <Show below="lg">
-            <AddressCoinBalanceSkeletonMobile/>
+            <SkeletonList/>
           </Show>
         </>
       );

ui/address/coinBalance/AddressCoinBalanceListItem.tsx

@@ -8,9 +8,9 @@ import appConfig from 'configs/app/config';
 import { WEI, ZERO } from 'lib/consts';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import link from 'lib/link/link';
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import Address from 'ui/shared/address/Address';
 import AddressLink from 'ui/shared/address/AddressLink';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 
 type Props = AddressCoinBalanceHistoryItem & {
   page: number;
@@ -23,7 +23,7 @@ const AddressCoinBalanceListItem = (props: Props) => {
   const timeAgo = useTimeAgoIncrement(props.block_timestamp, props.page === 1);
 
   return (
-    <AccountListItemMobile rowGap={ 2 }>
+    <ListItemMobile rowGap={ 2 } isAnimated>
       <Flex justifyContent="space-between" w="100%">
         <Text fontWeight={ 600 }>{ BigNumber(props.value).div(WEI).toFixed(8) } { appConfig.network.currency.symbol }</Text>
         <Stat flexGrow="0">
@@ -51,7 +51,7 @@ const AddressCoinBalanceListItem = (props: Props) => {
         <Text fontWeight={ 500 } flexShrink={ 0 }>Age</Text>
         <Text variant="secondary">{ timeAgo }</Text>
       </Flex>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/address/coinBalance/AddressCoinBalanceSkeletonMobile.tsx

-import { Skeleton, Flex, Box, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-const AddressCoinBalanceSkeletonMobile = () => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
-  return (
-    <Box>
-      { Array.from(Array(2)).map((item, index) => (
-        <Flex
-          key={ index }
-          rowGap={ 3 }
-          flexDirection="column"
-          paddingY={ 6 }
-          borderTopWidth="1px"
-          borderColor={ borderColor }
-          _last={{
-            borderBottomWidth: '1px',
-          }}
-        >
-          <Flex justifyContent="space-between" w="100%" h={ 6 }>
-            <Skeleton w="170px"/>
-            <Skeleton w="120px"/>
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="40px"/>
-            <Skeleton w="80px"/>
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="40px"/>
-            <Skeleton w="150px"/>
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="30px"/>
-            <Skeleton w="60px"/>
-          </Flex>
-        </Flex>
-      )) }
-    </Box>
-  );
-};
-
-export default AddressCoinBalanceSkeletonMobile;

ui/address/details/AddressDetailsSkeleton.tsx

@@ -8,14 +8,13 @@ const AddressDetailsSkeleton = () => {
     <Box>
       <Flex align="center">
         <SkeletonCircle boxSize={ 6 } flexShrink={ 0 }/>
-        <Skeleton h={ 6 } w={{ base: '100px', lg: '420px' }} ml={ 2 }/>
-        <Skeleton h={ 6 } w="24px" ml={ 2 } flexShrink={ 0 }/>
-        <Skeleton h={ 8 } w="48px" ml={ 3 } flexShrink={ 0 }/>
-        <Skeleton h={ 8 } w="48px" ml={ 3 } flexShrink={ 0 }/>
+        <Skeleton h={ 6 } w={{ base: '100px', lg: '420px' }} ml={ 2 } borderRadius="full"/>
+        <Skeleton h={ 8 } w="36px" ml={ 3 } flexShrink={ 0 }/>
+        <Skeleton h={ 8 } w="36px" ml={ 3 } flexShrink={ 0 }/>
       </Flex>
       <Flex align="center" columnGap={ 4 } mt={ 8 }>
-        <Skeleton h={ 6 } w="200px"/>
-        <Skeleton h={ 6 } w="80px"/>
+        <Skeleton h={ 6 } w="200px" borderRadius="full"/>
+        <Skeleton h={ 6 } w="80px" borderRadius="full"/>
       </Flex>
       <Grid columnGap={ 8 } rowGap={{ base: 5, lg: 7 }} templateColumns={{ base: '1fr', lg: '150px 1fr' }} maxW="1000px" mt={ 8 }>
         <DetailsSkeletonRow w="30%"/>

ui/address/internals/AddressIntTxsListItem.tsx

@@ -8,11 +8,11 @@ import appConfig from 'configs/app/config';
 import eastArrowIcon from 'icons/arrows/east.svg';
 import dayjs from 'lib/date/dayjs';
 import link from 'lib/link/link';
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import InOutTag from 'ui/shared/InOutTag';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 import TxStatus from 'ui/shared/TxStatus';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
@@ -38,7 +38,7 @@ const TxInternalsListItem = ({
   const isIn = Boolean(currentAddress && currentAddress === to?.hash);
 
   return (
-    <AccountListItemMobile rowGap={ 3 }>
+    <ListItemMobile rowGap={ 3 }>
       <Flex>
         { typeTitle && <Tag colorScheme="cyan" mr={ 2 }>{ typeTitle }</Tag> }
         <TxStatus status={ success ? 'ok' : 'error' } errorText={ error }/>
@@ -71,7 +71,7 @@ const TxInternalsListItem = ({
           { BigNumber(value).div(BigNumber(10 ** appConfig.network.currency.decimals)).toFormat() }
         </Text>
       </HStack>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/address/internals/AddressIntTxsSkeletonDesktop.tsx

 import React from 'react';
 
-import SkeletonTable from 'ui/shared/SkeletonTable';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 
 const TxInternalsSkeletonDesktop = () => {
   return (

ui/apiKey/ApiKeyTable/ApiKeyListItem.tsx

@@ -2,8 +2,8 @@ import React, { useCallback } from 'react';
 
 import type { ApiKey } from 'types/api/account';
 
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import ApiKeySnippet from 'ui/shared/ApiKeySnippet';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
 interface Props {
@@ -23,10 +23,10 @@ const ApiKeyListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   }, [ item, onDeleteClick ]);
 
   return (
-    <AccountListItemMobile>
+    <ListItemMobile>
       <ApiKeySnippet apiKey={ item.api_key } name={ item.name }/>
       <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/blocks/BlocksContent.tsx

@@ -11,13 +11,13 @@ import useIsMobile from 'lib/hooks/useIsMobile';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import BlocksList from 'ui/blocks/BlocksList';
-import BlocksSkeletonMobile from 'ui/blocks/BlocksSkeletonMobile';
 import BlocksTable from 'ui/blocks/BlocksTable';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Pagination from 'ui/shared/Pagination';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
-import SkeletonTable from 'ui/shared/SkeletonTable';
+import SkeletonList from 'ui/shared/skeletons/SkeletonList';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 
 type QueryResult = UseQueryResult<BlocksResponse> & {
   pagination: PaginationProps;
@@ -83,7 +83,7 @@ const BlocksContent = ({ type, query }: Props) => {
       return (
         <>
           <Show below="lg" key="skeleton-mobile" ssr={ false }>
-            <BlocksSkeletonMobile/>
+            <SkeletonList/>
           </Show>
           <Hide below="lg" key="skeleton-desktop" ssr={ false }>
             <SkeletonTable columns={ [ '125px', '120px', '21%', '64px', '35%', '22%', '22%' ] }/>

ui/blocks/BlocksListItem.tsx

@@ -12,9 +12,9 @@ import { WEI } from 'lib/consts';
 import link from 'lib/link/link';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import BlockTimestamp from 'ui/blocks/BlockTimestamp';
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import AddressLink from 'ui/shared/address/AddressLink';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 interface Props {
@@ -29,7 +29,7 @@ const BlocksListItem = ({ data, isPending, enableTimeIncrement }: Props) => {
   const txFees = BigNumber(data.tx_fees || 0);
 
   return (
-    <AccountListItemMobile rowGap={ 3 } key={ String(data.height) }>
+    <ListItemMobile rowGap={ 3 } key={ String(data.height) } isAnimated>
       <Flex justifyContent="space-between" w="100%">
         <Flex columnGap={ 2 } alignItems="center">
           { isPending && <Spinner size="sm"/> }
@@ -76,7 +76,7 @@ const BlocksListItem = ({ data, isPending, enableTimeIncrement }: Props) => {
           <Utilization ml={ 4 } value={ burntFees.div(txFees).toNumber() }/>
         </Flex>
       </Box>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/blocks/BlocksSkeletonMobile.tsx

-import { Skeleton, Flex, Box, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-const BlocksSkeletonMobile = () => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
-  return (
-    <Box>
-      { Array.from(Array(2)).map((item, index) => (
-        <Flex
-          key={ index }
-          rowGap={ 3 }
-          flexDirection="column"
-          paddingY={ 6 }
-          borderTopWidth="1px"
-          borderColor={ borderColor }
-          _last={{
-            borderBottomWidth: '1px',
-          }}
-        >
-          <Flex h={ 6 } justifyContent="space-between">
-            <Skeleton w="75px"/>
-            <Skeleton w="90px"/>
-          </Flex>
-          <Skeleton h={ 6 } w="130px"/>
-          <Skeleton h={ 6 } w="180px"/>
-          <Skeleton h={ 6 } w="60px"/>
-          <Skeleton h={ 6 } w="100%"/>
-          <Skeleton h={ 6 } w="170px"/>
-          <Skeleton h={ 6 } w="100%"/>
-        </Flex>
-      )) }
-    </Box>
-  );
-};
-
-export default BlocksSkeletonMobile;

ui/customAbi/CustomAbiTable/CustomAbiListItem.tsx

@@ -2,8 +2,8 @@ import React, { useCallback } from 'react';
 
 import type { CustomAbi } from 'types/api/account';
 
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import AddressSnippet from 'ui/shared/AddressSnippet';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
 interface Props {
@@ -23,10 +23,10 @@ const CustomAbiListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   }, [ item, onDeleteClick ]);
 
   return (
-    <AccountListItemMobile>
+    <ListItemMobile>
       <AddressSnippet address={ item.contract_address_hash } subtitle={ item.name } isContract/>
       <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/pages/ApiKeys.tsx

@@ -17,8 +17,8 @@ import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
-import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
-import SkeletonTable from 'ui/shared/SkeletonTable';
+import SkeletonListAccount from 'ui/shared/skeletons/SkeletonListAccount';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 
 const DATA_LIMIT = 3;
 
@@ -63,7 +63,7 @@ const ApiKeysPage: React.FC = () => {
 
   const content = (() => {
     if (isLoading && !data) {
-      const loader = isMobile ? <SkeletonAccountMobile/> : (
+      const loader = isMobile ? <SkeletonListAccount/> : (
         <>
           <SkeletonTable columns={ [ '100%', '108px' ] }/>
           <Skeleton height="48px" width="156px" marginTop={ 8 }/>

ui/pages/CustomAbi.tsx

@@ -16,8 +16,8 @@ import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
-import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
-import SkeletonTable from 'ui/shared/SkeletonTable';
+import SkeletonListAccount from 'ui/shared/skeletons/SkeletonListAccount';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 
 const CustomAbiPage: React.FC = () => {
   const customAbiModalProps = useDisclosure();
@@ -60,7 +60,7 @@ const CustomAbiPage: React.FC = () => {
 
   const content = (() => {
     if (isLoading && !data) {
-      const loader = isMobile ? <SkeletonAccountMobile/> : (
+      const loader = isMobile ? <SkeletonListAccount/> : (
         <>
           <SkeletonTable columns={ [ '100%', '108px' ] }/>
           <Skeleton height="44px" width="156px" marginTop={ 8 }/>

ui/pages/Watchlist.tsx

@@ -12,8 +12,8 @@ import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
-import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
-import SkeletonTable from 'ui/shared/SkeletonTable';
+import SkeletonListAccount from 'ui/shared/skeletons/SkeletonListAccount';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 import AddressModal from 'ui/watchlist/AddressModal/AddressModal';
 import DeleteAddressModal from 'ui/watchlist/DeleteAddressModal';
 import WatchListItem from 'ui/watchlist/WatchlistTable/WatchListItem';
@@ -73,7 +73,7 @@ const WatchList: React.FC = () => {
 
   let content;
   if (isLoading && !data) {
-    const loader = isMobile ? <SkeletonAccountMobile showFooterSlot/> : (
+    const loader = isMobile ? <SkeletonListAccount showFooterSlot/> : (
       <>
         <SkeletonTable columns={ [ '70%', '30%', '160px', '108px' ] }/>
         <Skeleton height="44px" width="156px" marginTop={ 8 }/>

ui/privateTags/AddressTagTable/AddressTagListItem.tsx

@@ -3,8 +3,8 @@ import React, { useCallback } from 'react';
 
 import type { AddressTag } from 'types/api/account';
 
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import AddressSnippet from 'ui/shared/AddressSnippet';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
 interface Props {
@@ -23,7 +23,7 @@ const AddressTagListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   }, [ item, onDeleteClick ]);
 
   return (
-    <AccountListItemMobile>
+    <ListItemMobile>
       <Flex alignItems="flex-start" flexDirection="column" maxW="100%">
         <AddressSnippet address={ item.address_hash }/>
         <HStack spacing={ 3 } mt={ 4 }>
@@ -34,7 +34,7 @@ const AddressTagListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
         </HStack>
       </Flex>
       <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/privateTags/PrivateAddressTags.tsx

@@ -9,8 +9,8 @@ import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
-import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
-import SkeletonTable from 'ui/shared/SkeletonTable';
+import SkeletonListAccount from 'ui/shared/skeletons/SkeletonListAccount';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 
 import AddressModal from './AddressModal/AddressModal';
 import AddressTagListItem from './AddressTagTable/AddressTagListItem';
@@ -57,7 +57,7 @@ const PrivateAddressTags = () => {
   );
 
   if (isLoading && !addressTagsData) {
-    const loader = isMobile ? <SkeletonAccountMobile/> : (
+    const loader = isMobile ? <SkeletonListAccount/> : (
       <>
         <SkeletonTable columns={ [ '60%', '40%', '108px' ] }/>
         <Skeleton height="44px" width="156px" marginTop={ 8 }/>

ui/privateTags/PrivateTransactionTags.tsx

@@ -9,8 +9,8 @@ import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
-import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
-import SkeletonTable from 'ui/shared/SkeletonTable';
+import SkeletonListAccount from 'ui/shared/skeletons/SkeletonListAccount';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 
 import DeletePrivateTagModal from './DeletePrivateTagModal';
 import TransactionModal from './TransactionModal/TransactionModal';
@@ -60,7 +60,7 @@ const PrivateTransactionTags = () => {
   );
 
   if (isLoading && !transactionTagsData) {
-    const loader = isMobile ? <SkeletonAccountMobile/> : (
+    const loader = isMobile ? <SkeletonListAccount/> : (
       <>
         <SkeletonTable columns={ [ '75%', '25%', '108px' ] }/>
         <Skeleton height="44px" width="156px" marginTop={ 8 }/>

ui/privateTags/TransactionTagTable/TransactionTagListItem.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 
 import type { TransactionTag } from 'types/api/account';
 
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 import TransactionSnippet from 'ui/shared/TransactionSnippet';
 
@@ -23,7 +23,7 @@ const TransactionTagListItem = ({ item, onEditClick, onDeleteClick }: Props) =>
   }, [ item, onDeleteClick ]);
 
   return (
-    <AccountListItemMobile>
+    <ListItemMobile>
       <Flex alignItems="flex-start" flexDirection="column" maxW="100%">
         <TransactionSnippet hash={ item.transaction_hash }/>
         <HStack spacing={ 3 } mt={ 4 }>
@@ -34,7 +34,7 @@ const TransactionTagListItem = ({ item, onEditClick, onDeleteClick }: Props) =>
         </HStack>
       </Flex>
       <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/publicTags/PublicTagTable/PublicTagListItem.tsx

@@ -3,8 +3,8 @@ import React, { useCallback } from 'react';
 
 import type { PublicTag } from 'types/api/account';
 
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import AddressSnippet from 'ui/shared/AddressSnippet';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
@@ -24,7 +24,7 @@ const PublicTagListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   }, [ item, onDeleteClick ]);
 
   return (
-    <AccountListItemMobile>
+    <ListItemMobile>
       <VStack spacing={ 3 } alignItems="flex-start" maxW="100%">
         <VStack spacing={ 4 } alignItems="unset" maxW="100%">
           { item.addresses.map((address) => <AddressSnippet key={ address } address={ address }/>) }
@@ -49,7 +49,7 @@ const PublicTagListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
         </HStack>
       </VStack>
       <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/publicTags/PublicTagsData.tsx

@@ -10,8 +10,8 @@ import useIsMobile from 'lib/hooks/useIsMobile';
 import PublicTagListItem from 'ui/publicTags/PublicTagTable/PublicTagListItem';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
-import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
-import SkeletonTable from 'ui/shared/SkeletonTable';
+import SkeletonListAccount from 'ui/shared/skeletons/SkeletonListAccount';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 
 import DeletePublicTagModal from './DeletePublicTagModal';
 import PublicTagTable from './PublicTagTable/PublicTagTable';
@@ -58,7 +58,7 @@ const PublicTagsData = ({ changeToFormScreen, onTagDelete }: Props) => {
   );
 
   if (isLoading) {
-    const loader = isMobile ? <SkeletonAccountMobile/> : (
+    const loader = isMobile ? <SkeletonListAccount/> : (
       <>
         <SkeletonTable columns={ [ '50%', '25%', '25%', '108px' ] }/>
         <Skeleton height="48px" width="270px" marginTop={ 8 }/>

ui/shared/AccountListItemMobile.tsx → ui/shared/ListItemMobile.tsx

@@ -5,18 +5,17 @@ import React from 'react';
 interface Props {
   children: React.ReactNode;
   className?: string;
-  key?: string;
+  isAnimated?: boolean;
 }
 
-const AccountListItemMobile = ({ children, className, key }: Props) => {
+const ListItemMobile = ({ children, className, isAnimated }: Props) => {
   return (
     <Flex
       as={ motion.div }
-      initial={{ opacity: 0, scale: 0.97 }}
+      initial={ isAnimated ? { opacity: 0, scale: 0.97 } : { opacity: 1, scale: 1 } }
       animate={{ opacity: 1, scale: 1 }}
       transitionDuration="normal"
       transitionTimingFunction="linear"
-      key={ key }
       rowGap={ 6 }
       alignItems="flex-start"
       flexDirection="column"
@@ -33,4 +32,4 @@ const AccountListItemMobile = ({ children, className, key }: Props) => {
   );
 };
 
-export default chakra(AccountListItemMobile);
+export default chakra(ListItemMobile);

ui/shared/TokenTransfer/TokenTransfer.tsx

@@ -17,11 +17,11 @@ import EmptySearchResult from 'ui/apps/EmptySearchResult';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Pagination from 'ui/shared/Pagination';
-import SkeletonTable from 'ui/shared/SkeletonTable';
+import SkeletonList from 'ui/shared/skeletons/SkeletonList';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 import { flattenTotal } from 'ui/shared/TokenTransfer/helpers';
 import TokenTransferFilter from 'ui/shared/TokenTransfer/TokenTransferFilter';
 import TokenTransferList from 'ui/shared/TokenTransfer/TokenTransferList';
-import TokenTransferSkeletonMobile from 'ui/shared/TokenTransfer/TokenTransferSkeletonMobile';
 import TokenTransferTable from 'ui/shared/TokenTransfer/TokenTransferTable';
 
 import { TOKEN_TYPE } from './helpers';
@@ -95,7 +95,7 @@ const TokenTransfer = ({
             />
           </Hide>
           <Show below="lg">
-            <TokenTransferSkeletonMobile showTxInfo={ showTxInfo }/>
+            <SkeletonList/>
           </Show>
         </>
       );

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -7,12 +7,12 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
 import eastArrowIcon from 'icons/arrows/east.svg';
 import transactionIcon from 'icons/transactions.svg';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import AdditionalInfoButton from 'ui/shared/AdditionalInfoButton';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import InOutTag from 'ui/shared/InOutTag';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
 import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
@@ -49,7 +49,7 @@ const TokenTransferListItem = ({
 
   const addressWidth = `calc((100% - ${ baseAddress ? '50px' : '0px' }) / 2)`;
   return (
-    <AccountListItemMobile rowGap={ 3 }>
+    <ListItemMobile rowGap={ 3 } isAnimated>
       <Flex w="100%" flexWrap="wrap" rowGap={ 1 } position="relative">
         <TokenSnippet hash={ token.address } w="auto" maxW="calc(100% - 140px)" name={ token.name || 'Unnamed token' }/>
         <Tag flexShrink={ 0 } ml={ 2 } mr={ 2 }>{ token.type }</Tag>
@@ -98,7 +98,7 @@ const TokenTransferListItem = ({
           <Text variant="secondary">{ value }</Text>
         </Flex>
       ) }
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/shared/TokenTransfer/TokenTransferSkeletonMobile.tsx

-import { Skeleton, SkeletonCircle, Flex, Box, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-const TokenTransferSkeletonMobile = ({ showTxInfo }: { showTxInfo?: boolean }) => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
-  return (
-    <Box>
-      { Array.from(Array(2)).map((item, index) => (
-        <Flex
-          key={ index }
-          rowGap={ 3 }
-          flexDirection="column"
-          paddingY={ 6 }
-          borderTopWidth="1px"
-          borderColor={ borderColor }
-          _last={{
-            borderBottomWidth: '1px',
-          }}
-        >
-          <Flex h={ 6 }>
-            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
-            <Skeleton w="100px" mr={ 2 }/>
-            <Skeleton w="50px"/>
-            { showTxInfo && <Skeleton w="24px" ml="auto"/> }
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="70px"/>
-            <Skeleton w="24px"/>
-            <Skeleton w="90px"/>
-          </Flex>
-          { showTxInfo && (
-            <Flex h={ 6 } columnGap={ 2 }>
-              <Skeleton w="70px" flexShrink={ 0 }/>
-              <Skeleton w="100%"/>
-            </Flex>
-          ) }
-          <Flex h={ 6 }>
-            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
-            <Skeleton flexGrow={ 1 } mr={ 3 }/>
-            <Skeleton w="50px" mr={ 3 }/>
-            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
-            <Skeleton flexGrow={ 1 } mr={ 3 }/>
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="45px"/>
-            <Skeleton w="90px"/>
-          </Flex>
-        </Flex>
-      )) }
-    </Box>
-  );
-};
-
-export default TokenTransferSkeletonMobile;

ui/tx/internals/TxInternalsSkeletonMobile.tsx → ui/shared/skeletons/SkeletonList.tsx

-import { Skeleton, SkeletonCircle, Flex, Box, useColorModeValue } from '@chakra-ui/react';
+import { Box, Flex, Skeleton, SkeletonCircle, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-const TxInternalsSkeletonMobile = () => {
+const SkeletonList = () => {
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
 
   return (
@@ -9,38 +9,32 @@ const TxInternalsSkeletonMobile = () => {
       { Array.from(Array(2)).map((item, index) => (
         <Flex
           key={ index }
-          rowGap={ 3 }
+          rowGap={ 4 }
           flexDirection="column"
           paddingY={ 6 }
           borderTopWidth="1px"
           borderColor={ borderColor }
           _last={{
-            borderBottomWidth: '1px',
+            borderBottomWidth: '0px',
           }}
         >
-          <Flex h={ 6 }>
-            <Skeleton w="100px" mr={ 2 }/>
-            <Skeleton w="90px"/>
+          <Flex h={ 4 }>
+            <Skeleton w="30%" mr={ 2 } borderRadius="full"/>
+            <Skeleton w="15%" borderRadius="full"/>
           </Flex>
-          <Flex h={ 6 }>
-            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
-            <Skeleton flexGrow={ 1 } mr={ 3 }/>
-            <Skeleton w={ 6 } mr={ 3 }/>
-            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
-            <Skeleton flexGrow={ 1 } mr={ 3 }/>
-          </Flex>
-          <Flex h={ 6 }>
-            <Skeleton w="70px" mr={ 2 }/>
-            <Skeleton w="30px"/>
-          </Flex>
-          <Flex h={ 6 }>
-            <Skeleton w="70px" mr={ 2 }/>
-            <Skeleton w="60px"/>
+          <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 TxInternalsSkeletonMobile;
+export default SkeletonList;

ui/shared/SkeletonAccountMobile.tsx → ui/shared/skeletons/SkeletonListAccount.tsx

@@ -5,7 +5,7 @@ interface Props {
   showFooterSlot?: boolean;
 }
 
-const SkeletonAccountMobile = ({ showFooterSlot }: Props) => {
+const SkeletonListAccount = ({ showFooterSlot }: Props) => {
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
 
   return (
@@ -18,9 +18,8 @@ const SkeletonAccountMobile = ({ showFooterSlot }: Props) => {
           paddingY={ 6 }
           borderTopWidth="1px"
           borderColor={ borderColor }
-          _first={{
-            borderTopWidth: '0',
-            pt: '0',
+          _last={{
+            borderBottomWidth: '0px',
           }}
         >
           <Flex columnGap={ 2 } w="100%" alignItems="center">
@@ -45,4 +44,4 @@ const SkeletonAccountMobile = ({ showFooterSlot }: Props) => {
   );
 };
 
-export default SkeletonAccountMobile;
+export default SkeletonListAccount;

ui/tx/TxInternals.tsx

@@ -14,9 +14,9 @@ import DataFetchAlert from 'ui/shared/DataFetchAlert';
 // import FilterInput from 'ui/shared/FilterInput';
 // import TxInternalsFilter from 'ui/tx/internals/TxInternalsFilter';
 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 TxInternalsSkeletonDesktop from 'ui/tx/internals/TxInternalsSkeletonDesktop';
-import TxInternalsSkeletonMobile from 'ui/tx/internals/TxInternalsSkeletonMobile';
 import TxInternalsTable from 'ui/tx/internals/TxInternalsTable';
 import type { Sort, SortField } from 'ui/tx/internals/utils';
 import TxPendingAlert from 'ui/tx/TxPendingAlert';
@@ -103,8 +103,8 @@ const TxInternals = () => {
   if (isLoading || txInfo.isLoading) {
     return (
       <>
-        <Show below="lg"><TxInternalsSkeletonMobile/></Show>
-        <Hide below="lg"><TxInternalsSkeletonDesktop/></Hide>
+        <Show below="lg"><SkeletonList/></Show>
+        <Hide below="lg"><SkeletonTable columns={ [ '28%', '20%', '24px', '20%', '16%', '16%' ] }/></Hide>
       </>
     );
   }

ui/tx/internals/TxInternalsListItem.tsx

@@ -6,10 +6,10 @@ import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import appConfig from 'configs/app/config';
 import eastArrowIcon from 'icons/arrows/east.svg';
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 import TxStatus from 'ui/shared/TxStatus';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
@@ -20,7 +20,7 @@ const TxInternalsListItem = ({ type, from, to, value, success, error, gas_limit:
   const toData = to ? to : createdContract;
 
   return (
-    <AccountListItemMobile rowGap={ 3 }>
+    <ListItemMobile rowGap={ 3 }>
       <Flex>
         { typeTitle && <Tag colorScheme="cyan" mr={ 2 }>{ typeTitle }</Tag> }
         <TxStatus status={ success ? 'ok' : 'error' } errorText={ error }/>
@@ -46,7 +46,7 @@ const TxInternalsListItem = ({ type, from, to, value, success, error, gas_limit:
         <Text fontSize="sm" fontWeight={ 500 }>Gas limit</Text>
         <Text fontSize="sm" variant="secondary">{ BigNumber(gasLimit).toFormat() }</Text>
       </HStack>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/tx/internals/TxInternalsSkeletonDesktop.tsx

-import React from 'react';
-
-import SkeletonTable from 'ui/shared/SkeletonTable';
-
-const TxInternalsSkeletonDesktop = () => {
-  return (
-    <SkeletonTable columns={ [ '28%', '20%', '24px', '20%', '16%', '16%' ] }/>
-  );
-};
-
-export default TxInternalsSkeletonDesktop;

ui/tx/state/TxStateListItem.tsx

@@ -8,10 +8,10 @@ import appConfig from 'configs/app/config';
 import type { data } from 'data/txState';
 import { nbsp } from 'lib/html-entities';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 
 import TxStateStorageItem from './TxStateStorageItem';
 
@@ -22,7 +22,7 @@ const TxStateListItem = ({ storage, address, miner, after, before, diff }: Props
   const hasStorageData = Boolean(storage?.length);
 
   return (
-    <AccountListItemMobile>
+    <ListItemMobile>
       <AccordionItem isDisabled={ !hasStorageData } border={ 0 } w="100%" display="flex" flexDirection="column">
         { ({ isExpanded }) => (
           <>
@@ -94,7 +94,7 @@ const TxStateListItem = ({ storage, address, miner, after, before, diff }: Props
           </>
         ) }
       </AccordionItem>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/txs/TxsContent.tsx

@@ -7,12 +7,12 @@ import type { TxsResponse } from 'types/api/transaction';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
+import SkeletonList from 'ui/shared/skeletons/SkeletonList';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 
 import TxsHeaderMobile from './TxsHeaderMobile';
 import TxsListItem from './TxsListItem';
 import TxsNewItemNotice from './TxsNewItemNotice';
-import TxsSkeletonDesktop from './TxsSkeletonDesktop';
-import TxsSkeletonMobile from './TxsSkeletonMobile';
 import TxsTable from './TxsTable';
 import useTxsSort from './useTxsSort';
 
@@ -42,8 +42,13 @@ const TxsContent = ({ filter, query, showBlockInfo = true, showSocketInfo = true
     if (isLoading) {
       return (
         <>
-          <Show below="lg" ssr={ false }><TxsSkeletonMobile showBlockInfo={ showBlockInfo }/></Show>
-          <Hide below="lg" ssr={ false }><TxsSkeletonDesktop showBlockInfo={ showBlockInfo }/></Hide>
+          <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%' ]
+            }/>
+          </Hide>
         </>
       );
     }

ui/txs/TxsSkeletonDesktop.tsx

-import { Box } from '@chakra-ui/react';
-import React from 'react';
-
-import SkeletonTable from 'ui/shared/SkeletonTable';
-
-interface Props {
-  showBlockInfo: boolean;
-}
-
-const TxsInternalsSkeletonDesktop = ({ showBlockInfo }: Props) => {
-  return (
-    <Box mb={ 8 }>
-      <SkeletonTable columns={ showBlockInfo ?
-        [ '32px', '22%', '160px', '20%', '18%', '292px', '20%', '20%' ] :
-        [ '32px', '22%', '160px', '20%', '292px', '20%', '20%' ]
-      }/>
-    </Box>
-  );
-};
-
-export default TxsInternalsSkeletonDesktop;

ui/txs/TxsSkeletonMobile.tsx

-import { Skeleton, Flex, Box, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-interface Props {
-  showBlockInfo: boolean;
-}
-
-const TxInternalsSkeletonMobile = ({ showBlockInfo }: Props) => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
-  return (
-    <Box>
-      { Array.from(Array(2)).map((item, index) => (
-        <Flex
-          key={ index }
-          flexDirection="column"
-          paddingBottom={ 3 }
-          paddingTop={ 4 }
-          borderTopWidth="1px"
-          borderColor={ borderColor }
-          _last={{
-            borderBottomWidth: '1px',
-          }}
-        >
-          <Flex h={ 6 }>
-            <Skeleton w="100px" mr={ 2 } h={ 6 }/>
-            <Skeleton w="100px" h={ 6 }/>
-          </Flex>
-          <Skeleton w="100%" h="30px" mt={ 3 }/>
-          <Skeleton w="50%" h={ 6 } mt={ 3 }/>
-          <Skeleton w="50%" h={ 6 } mt={ 2 }/>
-          { showBlockInfo && <Skeleton w="100%" h={ 6 } mt={ 6 }/> }
-          <Skeleton w="50%" h={ 6 } mt={ 2 }/>
-          <Skeleton w="50%" h={ 6 } mt={ 2 }/>
-        </Flex>
-      )) }
-    </Box>
-  );
-};
-
-export default TxInternalsSkeletonMobile;

ui/watchlist/WatchlistTable/WatchListItem.tsx

@@ -6,7 +6,7 @@ import type { TWatchlistItem } from 'types/client/account';
 
 import useFetch from 'lib/hooks/useFetch';
 import useToast from 'lib/hooks/useToast';
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
 import WatchListAddressItem from './WatchListAddressItem';
@@ -79,7 +79,7 @@ const WatchListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   }, [ mutate ]);
 
   return (
-    <AccountListItemMobile>
+    <ListItemMobile>
       <Box maxW="100%">
         <WatchListAddressItem item={ item }/>
         <HStack spacing={ 3 } mt={ 6 }>
@@ -103,7 +103,7 @@ const WatchListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
         </HStack>
         <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
       </Flex>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };