fix tx socket alert

lib/hooks/useNewTxsSocket.tsx

@@ -52,11 +52,11 @@ export default function useNewTxsSocket() {
   }, [ setNum ]);
 
   const handleSocketClose = React.useCallback(() => {
-    setSocketAlert('Connection is lost. Please click here to load new transactions.');
+    setSocketAlert('Connection is lost. Please reload page.');
   }, []);
 
   const handleSocketError = React.useCallback(() => {
-    setSocketAlert('An error has occurred while fetching new transactions. Please click here to refresh the page.');
+    setSocketAlert('An error has occurred while fetching new transactions. Please reload page.');
   }, []);
 
   const channel = useSocketChannel({

ui/home/LatestTxs.tsx

@@ -8,10 +8,10 @@ import { QueryKeys } from 'types/client/queries';
 import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import link from 'lib/link/link';
+import TxsNewItemNotice from 'ui/txs/TxsNewItemNotice';
 
 import LatestTxsItem from './LatestTxsItem';
 import LatestTxsItemSkeleton from './LatestTxsItemSkeleton';
-import LatestTxsNotice from './LatestTxsNotice';
 
 const LatestTransactions = () => {
   const isMobile = useIsMobile();
@@ -41,7 +41,7 @@ const LatestTransactions = () => {
     const txsUrl = link('txs');
     content = (
       <>
-        <LatestTxsNotice/>
+        <TxsNewItemNotice borderBottomRadius={ 0 } url={ link('txs') }/>
         <Box mb={{ base: 3, lg: 6 }}>
           { data.slice(0, txsCount).map((tx => <LatestTxsItem key={ tx.hash } tx={ tx }/>)) }
         </Box>

ui/home/LatestTxsNotice.tsx

-import { Alert, Text, Link, useColorModeValue, useTheme } from '@chakra-ui/react';
-import { transparentize } from '@chakra-ui/theme-tools';
-import React from 'react';
-
-import useNewTxsSocket from 'lib/hooks/useNewTxsSocket';
-import link from 'lib/link/link';
-
-interface Props {
-  className?: string;
-}
-
-const LatestTxsNotice = ({ className }: Props) => {
-  const { num, socketAlert } = useNewTxsSocket();
-
-  let content;
-
-  if (socketAlert) {
-    content = 'Connection is lost. Please reload page';
-  } else if (!num) {
-    content = (
-      <Text>scanning new transactions...</Text>
-    );
-  } else {
-    const txsUrl = link('txs');
-    content = (
-      <>
-        <Link href={ txsUrl }>{ num } more transaction{ num > 1 ? 's' : '' }</Link>
-        <Text whiteSpace="pre"> ha{ num > 1 ? 've' : 's' } come in</Text>
-      </>
-    );
-  }
-
-  const theme = useTheme();
-  return (
-    <Alert
-      className={ className }
-      status="warning"
-      p={ 4 }
-      fontWeight={ 400 }
-      bgColor={ useColorModeValue('orange.50', transparentize('orange.200', 0.16)(theme)) }
-      borderBottomRadius={ 0 }
-    >
-      { content }
-    </Alert>
-  );
-
-};
-
-export default LatestTxsNotice;

ui/txs/TxsContent.tsx

@@ -56,7 +56,7 @@ const TxsContent = ({ query, showBlockInfo = true, showSocketInfo = true }: Prop
         <Show below="lg" ssr={ false }>
           <Box>
             { showSocketInfo && (
-              <TxsNewItemNotice>
+              <TxsNewItemNotice url={ window.location.href }>
                 { ({ content }) => <Box>{ content }</Box> }
               </TxsNewItemNotice>
             ) }

ui/txs/TxsNewItemNotice.pw.tsx

@@ -23,7 +23,7 @@ test.describe.configure({ mode: 'serial' });
 test('new item in validated txs list', async({ mount, createSocket }) => {
   const component = await mount(
     <TestApp withSocket>
-      <TxsNewItemNotice/>
+      <TxsNewItemNotice url="/"/>
     </TestApp>,
     { hooksConfig },
   );
@@ -35,10 +35,29 @@ test('new item in validated txs list', async({ mount, createSocket }) => {
   await expect(component).toHaveScreenshot();
 });
 
+test.describe('dark mode', () => {
+  test.use({ colorScheme: 'dark' });
+
+  test('default view', async({ mount, createSocket }) => {
+    const component = await mount(
+      <TestApp withSocket>
+        <TxsNewItemNotice url="/"/>
+      </TestApp>,
+      { hooksConfig },
+    );
+
+    const socket = await createSocket();
+    const channel = await socketServer.joinChannel(socket, 'transactions:new_transaction');
+    socketServer.sendMessage(socket, channel, 'transaction', { transaction: 1 });
+
+    await expect(component).toHaveScreenshot();
+  });
+});
+
 test('2 new items in validated txs list', async({ mount, page, createSocket }) => {
   const component = await mount(
     <TestApp withSocket>
-      <TxsNewItemNotice/>
+      <TxsNewItemNotice url="/"/>
     </TestApp>,
     { hooksConfig },
   );
@@ -56,7 +75,7 @@ test('2 new items in validated txs list', async({ mount, page, createSocket }) =
 test('connection loss', async({ mount, createSocket }) => {
   const component = await mount(
     <TestApp withSocket>
-      <TxsNewItemNotice/>
+      <TxsNewItemNotice url="/"/>
     </TestApp>,
     { hooksConfig },
   );
@@ -71,7 +90,7 @@ test('connection loss', async({ mount, createSocket }) => {
 test('fetching', async({ mount, createSocket }) => {
   const component = await mount(
     <TestApp withSocket>
-      <TxsNewItemNotice/>
+      <TxsNewItemNotice url="/"/>
     </TestApp>,
     { hooksConfig },
   );

ui/txs/TxsNewItemNotice.tsx

-import { Alert, Link, Text, chakra } from '@chakra-ui/react';
+import { Alert, Link, Text, chakra, useTheme, useColorModeValue } from '@chakra-ui/react';
+import { transparentize } from '@chakra-ui/theme-tools';
 import React from 'react';
 
 import useNewTxsSocket from 'lib/hooks/useNewTxsSocket';
@@ -10,47 +11,44 @@ interface InjectedProps {
 interface Props {
   children?: (props: InjectedProps) => JSX.Element;
   className?: string;
+  url: string;
 }
 
-const TxsNewItemNotice = ({ children, className }: Props) => {
+const TxsNewItemNotice = ({ children, className, url }: Props) => {
   const { num, socketAlert } = useNewTxsSocket();
+  const theme = useTheme();
 
-  const handleClick = React.useCallback(() => {
-    window.location.reload();
-  }, []);
-
-  const content = (() => {
+  const alertContent = (() => {
     if (socketAlert) {
-      return (
-        <Alert
-          className={ className }
-          status="warning"
-          p={ 4 }
-          borderRadius={ 0 }
-          onClick={ handleClick }
-          cursor="pointer"
-        >
-          { socketAlert }
-        </Alert>
-      );
+      return socketAlert;
     }
 
     if (!num) {
-      return (
-        <Alert className={ className } status="warning" p={ 4 } fontWeight={ 400 }>
-          scanning new transactions...
-        </Alert>
-      );
+      return 'scanning new transactions...';
     }
 
     return (
-      <Alert className={ className } status="warning" p={ 4 } fontWeight={ 400 }>
-        <Link onClick={ handleClick }>{ num } more transaction{ num > 1 ? 's' : '' }</Link>
+      <>
+        <Link href={ url }>{ num } more transaction{ num > 1 ? 's' : '' }</Link>
         <Text whiteSpace="pre"> ha{ num > 1 ? 've' : 's' } come in</Text>
-      </Alert>
+      </>
     );
   })();
 
+  const content = (
+    <Alert
+      className={ className }
+      status="warning"
+      px={ 4 }
+      py="6px"
+      fontWeight={ 400 }
+      fontSize="sm"
+      bgColor={ useColorModeValue('orange.50', transparentize('orange.200', 0.16)(theme)) }
+    >
+      { alertContent }
+    </Alert>
+  );
+
   return children ? children({ content }) : content;
 };
 

ui/txs/TxsTable.tsx

@@ -51,7 +51,7 @@ const TxsTable = ({ txs, sort, sorting, top, showBlockInfo, showSocketInfo }: Pr
       </TheadSticky>
       <Tbody>
         { showSocketInfo && (
-          <TxsNewItemNotice borderRadius={ 0 }>
+          <TxsNewItemNotice borderRadius={ 0 } url={ window.location.href }>
             { ({ content }) => <Tr><Td colSpan={ 10 } p={ 0 }>{ content }</Td></Tr> }
           </TxsNewItemNotice>
         ) }