token transfer notice

ui/address/AddressTokenTransfers.tsx

@@ -22,11 +22,11 @@ import DataFetchAlert from 'ui/shared/DataFetchAlert';
 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 { TOKEN_TYPE, flattenTotal } from 'ui/shared/TokenTransfer/helpers';
 import TokenTransferFilter from 'ui/shared/TokenTransfer/TokenTransferFilter';
 import TokenTransferList from 'ui/shared/TokenTransfer/TokenTransferList';
 import TokenTransferTable from 'ui/shared/TokenTransfer/TokenTransferTable';
-import TxsNewItemNotice from 'ui/txs/TxsNewItemNotice';
 
 type Filters = {
   type: Array<TokenType>;
@@ -185,7 +185,12 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
           />
         </Hide>
         <Show below="lg">
-          <TxsNewItemNotice url={ window.location.href } num={ newItemsCount } alert={ socketAlert }/>
+          <SocketNewItemsNotice
+            url={ window.location.href }
+            num={ newItemsCount }
+            alert={ socketAlert }
+            type="token_transfer"
+          />
           <TokenTransferList
             data={ items }
             baseAddress={ currentAddress }

ui/home/LatestTxs.tsx

@@ -5,7 +5,7 @@ import useApiQuery from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useNewTxsSocket from 'lib/hooks/useNewTxsSocket';
 import link from 'lib/link/link';
-import TxsNewItemNotice from 'ui/txs/TxsNewItemNotice';
+import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 
 import LatestTxsItem from './LatestTxsItem';
 import LatestTxsItemSkeleton from './LatestTxsItemSkeleton';
@@ -36,7 +36,7 @@ const LatestTransactions = () => {
     const txsUrl = link('txs');
     content = (
       <>
-        <TxsNewItemNotice borderBottomRadius={ 0 } url={ link('txs') } num={ num } alert={ socketAlert }/>
+        <SocketNewItemsNotice borderBottomRadius={ 0 } url={ link('txs') } num={ num } alert={ socketAlert }/>
         <Box mb={{ base: 3, lg: 4 }}>
           { data.slice(0, txsCount).map((tx => <LatestTxsItem key={ tx.hash } tx={ tx }/>)) }
         </Box>

ui/txs/TxsNewItemNotice.pw.tsx → ui/shared/SocketNewItemsNotice.pw.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { ROUTES } from 'lib/link/routes';
 import TestApp from 'playwright/TestApp';
 
-import TxsNewItemNotice from './TxsNewItemNotice';
+import SocketNewItemsNotice from './SocketNewItemsNotice';
 
 const hooksConfig = {
   router: {
@@ -16,7 +16,7 @@ const hooksConfig = {
 test('2 new items in validated txs list +@dark-mode', async({ mount }) => {
   const component = await mount(
     <TestApp>
-      <TxsNewItemNotice url="/" num={ 2 }/>
+      <SocketNewItemsNotice url="/" num={ 2 }/>
     </TestApp>,
     { hooksConfig },
   );
@@ -27,7 +27,7 @@ test('2 new items in validated txs list +@dark-mode', async({ mount }) => {
 test('connection loss', async({ mount }) => {
   const component = await mount(
     <TestApp>
-      <TxsNewItemNotice url="/" alert="Connection is lost. Please reload the page."/>
+      <SocketNewItemsNotice url="/" alert="Connection is lost. Please reload the page."/>
     </TestApp>,
     { hooksConfig },
   );
@@ -38,7 +38,7 @@ test('connection loss', async({ mount }) => {
 test('fetching', async({ mount }) => {
   const component = await mount(
     <TestApp>
-      <TxsNewItemNotice url="/"/>
+      <SocketNewItemsNotice url="/"/>
     </TestApp>,
     { hooksConfig },
   );

ui/txs/TxsNewItemNotice.tsx → ui/shared/SocketNewItemsNotice.tsx

@@ -7,6 +7,7 @@ interface InjectedProps {
 }
 
 interface Props {
+  type?: 'transaction' | 'token_transfer';
   children?: (props: InjectedProps) => JSX.Element;
   className?: string;
   url: string;
@@ -14,7 +15,7 @@ interface Props {
   num?: number;
 }
 
-const TxsNewItemNotice = ({ children, className, url, num, alert }: Props) => {
+const SocketNewItemsNotice = ({ children, className, url, num, alert, type = 'transaction' }: Props) => {
   const theme = useTheme();
 
   const alertContent = (() => {
@@ -22,13 +23,15 @@ const TxsNewItemNotice = ({ children, className, url, num, alert }: Props) => {
       return alert;
     }
 
+    const name = type === 'token_transfer' ? 'token transfer' : 'transaction';
+
     if (!num) {
-      return 'scanning new transactions...';
+      return `scanning new ${ name }s...`;
     }
 
     return (
       <>
-        <Link href={ url }>{ num } more transaction{ num > 1 ? 's' : '' }</Link>
+        <Link href={ url }>{ num } more { name }{ num > 1 ? 's' : '' }</Link>
         <Text whiteSpace="pre"> ha{ num > 1 ? 've' : 's' } come in</Text>
       </>
     );
@@ -52,4 +55,4 @@ const TxsNewItemNotice = ({ children, className, url, num, alert }: Props) => {
   return children ? children({ content }) : content;
 };
 
-export default chakra(TxsNewItemNotice);
+export default chakra(SocketNewItemsNotice);

ui/shared/TokenTransfer/TokenTransferTable.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
+import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 import { default as Thead } from 'ui/shared/TheadSticky';
 import TokenTransferTableItem from 'ui/shared/TokenTransfer/TokenTransferTableItem';
-import TxsNewItemNotice from 'ui/txs/TxsNewItemNotice';
 
 interface Props {
   data: Array<TokenTransfer>;
@@ -47,7 +47,14 @@ const TokenTransferTable = ({
         { showSocketInfo && (
           <Tr>
             <Td colSpan={ 10 } p={ 0 }>
-              <TxsNewItemNotice borderRadius={ 0 } pl="10px" url={ window.location.href } alert={ socketInfoAlert } num={ socketInfoNum }/>
+              <SocketNewItemsNotice
+                borderRadius={ 0 }
+                pl="10px"
+                url={ window.location.href }
+                alert={ socketInfoAlert }
+                num={ socketInfoNum }
+                type="token_transfer"
+              />
             </Td>
           </Tr>
         ) }

ui/txs/TxsContent.tsx

@@ -9,10 +9,10 @@ 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 SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 
 import TxsHeaderMobile from './TxsHeaderMobile';
 import TxsListItem from './TxsListItem';
-import TxsNewItemNotice from './TxsNewItemNotice';
 import TxsTable from './TxsTable';
 import useTxsSort from './useTxsSort';
 
@@ -75,9 +75,9 @@ const TxsContent = ({
         <Show below="lg" ssr={ false }>
           <Box>
             { showSocketInfo && (
-              <TxsNewItemNotice url={ window.location.href } num={ socketInfoNum } alert={ socketInfoAlert }>
+              <SocketNewItemsNotice url={ window.location.href } num={ socketInfoNum } alert={ socketInfoAlert }>
                 { ({ content }) => <Box>{ content }</Box> }
-              </TxsNewItemNotice>
+              </SocketNewItemsNotice>
             ) }
             { txs.map(tx => (
               <TxsListItem

ui/txs/TxsTable.tsx

@@ -7,9 +7,9 @@ import type { Sort } from 'types/client/txs-sort';
 
 import appConfig from 'configs/app/config';
 import rightArrowIcon from 'icons/arrows/east.svg';
+import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 import TheadSticky from 'ui/shared/TheadSticky';
 
-import TxsNewItemNotice from './TxsNewItemNotice';
 import TxsTableItem from './TxsTableItem';
 
 type Props = {
@@ -67,9 +67,9 @@ const TxsTable = ({
       </TheadSticky>
       <Tbody>
         { showSocketInfo && (
-          <TxsNewItemNotice borderRadius={ 0 } url={ window.location.href } alert={ socketInfoAlert } num={ socketInfoNum }>
+          <SocketNewItemsNotice borderRadius={ 0 } url={ window.location.href } alert={ socketInfoAlert } num={ socketInfoNum }>
             { ({ content }) => <Tr><Td colSpan={ 10 } p={ 0 }>{ content }</Td></Tr> }
-          </TxsNewItemNotice>
+          </SocketNewItemsNotice>
         ) }
         <AnimatePresence initial={ false }>
           { txs.map((item) => (