socket notice components for desktop and mobile

ui/shared/SocketNewItemsNotice.tsx

-import { Alert, Link, Text, chakra, useTheme, useColorModeValue, Skeleton } from '@chakra-ui/react';
+import { Alert, Link, Text, chakra, useTheme, useColorModeValue, Skeleton, Tr, Td } from '@chakra-ui/react';
 import { transparentize } from '@chakra-ui/theme-tools';
 import React from 'react';
 
@@ -16,7 +16,7 @@ interface Props {
   isLoading?: boolean;
 }
 
-const SocketNewItemsNotice = ({ children, className, url, num, alert, type = 'transaction', isLoading }: Props) => {
+const SocketNewItemsNotice = chakra(({ children, className, url, num, alert, type = 'transaction', isLoading }: Props) => {
   const theme = useTheme();
 
   const alertContent = (() => {
@@ -69,6 +69,31 @@ const SocketNewItemsNotice = ({ children, className, url, num, alert, type = 'tr
   ) : <Skeleton className={ className } h="33px"/>;
 
   return children ? children({ content }) : content;
+});
+
+export default SocketNewItemsNotice;
+
+export const Desktop = ({ ...props }: Props) => {
+  return (
+    <SocketNewItemsNotice
+      borderRadius={ props.isLoading ? 'sm' : 0 }
+      h={ props.isLoading ? 4 : 'auto' }
+      maxW={ props.isLoading ? '215px' : undefined }
+      w="100%"
+      mx={ props.isLoading ? 4 : 0 }
+      my={ props.isLoading ? '6px' : 0 }
+      { ...props }
+    >
+      { ({ content }) => <Tr><Td colSpan={ 100 } p={ 0 }>{ content }</Td></Tr> }
+    </SocketNewItemsNotice>
+  );
 };
 
-export default chakra(SocketNewItemsNotice);
+export const Mobile = ({ ...props }: Props) => {
+  return (
+    <SocketNewItemsNotice
+      borderBottomRadius={ 0 }
+      { ...props }
+    />
+  );
+};

ui/token/TokenTransfer/TokenTransfer.tsx

@@ -15,7 +15,7 @@ import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/Pagination';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
-import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
+import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 import TokenTransferList from 'ui/token/TokenTransfer/TokenTransferList';
 import TokenTransferTable from 'ui/token/TokenTransfer/TokenTransferTable';
 
@@ -77,12 +77,11 @@ const TokenTransfer = ({ transfersQuery, tokenId, token }: Props) => {
       </Box>
       <Box display={{ base: 'block', lg: 'none' }}>
         { pagination.page === 1 && (
-          <SocketNewItemsNotice
+          <SocketNewItemsNotice.Mobile
             url={ window.location.href }
             num={ newItemsCount }
             alert={ socketAlert }
             type="token_transfer"
-            borderBottomRadius={ 0 }
             isLoading={ isPlaceholderData }
           />
         ) }

ui/token/TokenTransfer/TokenTransferTable.tsx

-import { Table, Tbody, Tr, Th, Td, Skeleton } from '@chakra-ui/react';
+import { Table, Tbody, Tr, Th } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenInfo } from 'types/api/token';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import trimTokenSymbol from 'lib/token/trimTokenSymbol';
-import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
+import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 import { default as Thead } from 'ui/shared/TheadSticky';
 import TokenTransferTableItem from 'ui/token/TokenTransfer/TokenTransferTableItem';
 
@@ -39,22 +39,13 @@ const TokenTransferTable = ({ data, top, showSocketInfo, socketInfoAlert, socket
       </Thead>
       <Tbody>
         { showSocketInfo && (
-          <Tr>
-            <Td colSpan={ 10 } p={ 0 }>
-              { isLoading ? (
-                <Skeleton my="6px" mx="10px" h={ 4 } maxW="215px" w="100%" borderRadius="sm"/>
-              ) : (
-                <SocketNewItemsNotice
-                  borderRadius={ 0 }
-                  pl="10px"
-                  url={ window.location.href }
-                  alert={ socketInfoAlert }
-                  num={ socketInfoNum }
-                  type="token_transfer"
-                />
-              ) }
-            </Td>
-          </Tr>
+          <SocketNewItemsNotice.Desktop
+            url={ window.location.href }
+            alert={ socketInfoAlert }
+            num={ socketInfoNum }
+            type="token_transfer"
+            isLoading={ isLoading }
+          />
         ) }
         { data.map((item, index) => (
           <TokenTransferTableItem key={ index } { ...item } tokenId={ tokenId } isLoading={ isLoading }/>