socket for txs

lib/socket/types.ts

@@ -4,9 +4,12 @@ import type { NewBlockSocketResponse } from 'types/api/block';
 
 export type SocketMessageParams = SocketMessage.NewBlock |
 SocketMessage.BlocksIndexStatus |
-SocketMessage.TxStatusUpdate;
+SocketMessage.TxStatusUpdate |
+SocketMessage.NewTx |
+SocketMessage.NewPendingTx |
+SocketMessage.Unknown;
 
-interface SocketMessageParamsGeneric<Event extends string, Payload extends object> {
+interface SocketMessageParamsGeneric<Event extends string | undefined, Payload extends object | unknown> {
   channel: Channel | undefined;
   event: Event;
   handler: (payload: Payload) => void;
@@ -17,4 +20,7 @@ export namespace SocketMessage {
   export type NewBlock = SocketMessageParamsGeneric<'new_block', NewBlockSocketResponse>;
   export type BlocksIndexStatus = SocketMessageParamsGeneric<'index_status', {finished: boolean; ratio: string}>;
   export type TxStatusUpdate = SocketMessageParamsGeneric<'collated', NewBlockSocketResponse>;
+  export type NewTx = SocketMessageParamsGeneric<'transaction', { transaction: number }>;
+  export type NewPendingTx = SocketMessageParamsGeneric<'pending_transaction', { pending_transaction: number }>;
+  export type Unknown = SocketMessageParamsGeneric<undefined, unknown>;
 }

lib/socket/useSocketChannel.tsx

@@ -6,7 +6,7 @@ import notEmpty from 'lib/notEmpty';
 import { useSocket } from './context';
 
 interface Params {
-  topic: string;
+  topic: string | undefined;
   params?: object;
   isDisabled: boolean;
   onJoin?: (channel: Channel, message: unknown) => void;
@@ -47,7 +47,7 @@ export default function useSocketChannel({ topic, params, isDisabled, onJoin, on
   }, [ channel, isDisabled ]);
 
   useEffect(() => {
-    if (socket === null || isDisabled) {
+    if (socket === null || isDisabled || !topic) {
       return;
     }
 

lib/socket/useSocketMessage.tsx

@@ -7,7 +7,7 @@ export default function useSocketMessage({ channel, event, handler }: SocketMess
   handlerRef.current = handler;
 
   useEffect(() => {
-    if (channel === undefined) {
+    if (channel === undefined || event === undefined) {
       return;
     }
 

ui/txs/TxsNewItemNotice.tsx

+import { Alert, Spinner, Text, Link, chakra } from '@chakra-ui/react';
+import type { NextRouter } from 'next/router';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import { ROUTES } from 'lib/link/routes';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
+
+interface InjectedProps {
+  content: React.ReactNode;
+}
+
+interface Props {
+  children: (props: InjectedProps) => JSX.Element;
+  className?: string;
+}
+
+function getSocketParams(router: NextRouter) {
+  if (router.pathname === ROUTES.txs.pattern && router.query.tab === 'validated' && !router.query.block_number) {
+    return { topic: 'transactions:new_transaction' as const, event: 'transaction' as const };
+  }
+
+  if (router.pathname === ROUTES.txs.pattern && router.query.tab === 'pending' && !router.query.block_number) {
+    return { topic: 'transactions:new_pending_transaction' as const, event: 'pending_transaction' as const };
+  }
+
+  return {};
+}
+
+function assertIsNewTxResponse(response: unknown): response is { transaction: number } {
+  return typeof response === 'object' && response !== null && 'transaction' in response;
+}
+function assertIsNewPendingTxResponse(response: unknown): response is { pending_transaction: number } {
+  return typeof response === 'object' && response !== null && 'pending_transaction' in response;
+}
+
+const TxsNewItemNotice = ({ children, className }: Props) => {
+  const router = useRouter();
+  const [ num, setNum ] = React.useState(0);
+  const [ socketAlert, setSocketAlert ] = React.useState('');
+
+  const { topic, event } = getSocketParams(router);
+
+  const handleClick = React.useCallback(() => {
+    window.location.reload();
+  }, []);
+
+  const handleNewTxMessage = React.useCallback((response: { transaction: number } | { pending_transaction: number } | unknown) => {
+    if (assertIsNewTxResponse(response)) {
+      setNum((prev) => prev + response.transaction);
+    }
+    if (assertIsNewPendingTxResponse(response)) {
+      setNum((prev) => prev + response.pending_transaction);
+    }
+  }, []);
+
+  const handleSocketClose = React.useCallback(() => {
+    setSocketAlert('Connection is lost. Please click here to load new transactions.');
+  }, []);
+
+  const handleSocketError = React.useCallback(() => {
+    setSocketAlert('An error has occurred while fetching new transactions. Please click here to refresh the page.');
+  }, []);
+
+  const channel = useSocketChannel({
+    topic,
+    onSocketClose: handleSocketClose,
+    onSocketError: handleSocketError,
+    isDisabled: !topic,
+  });
+
+  useSocketMessage({
+    channel,
+    event,
+    handler: handleNewTxMessage,
+  });
+
+  if (!topic && !event) {
+    return null;
+  }
+
+  const content = (() => {
+    if (socketAlert) {
+      return (
+        <Alert
+          className={ className }
+          status="warning"
+          p={ 4 }
+          borderRadius={ 0 }
+          onClick={ handleClick }
+          cursor="pointer"
+        >
+          { socketAlert }
+        </Alert>
+      );
+    }
+
+    if (!num) {
+      return null;
+    }
+
+    return (
+      <Alert className={ className } status="warning" p={ 4 } borderRadius={ 0 } fontWeight={ 400 }>
+        <Spinner size="sm" mr={ 3 }/>
+        <Text as="span" whiteSpace="pre">+ { num } new transaction{ num > 1 ? 's' : '' }. </Text>
+        <Link onClick={ handleClick }>Show in list</Link>
+      </Alert>
+    );
+  })();
+
+  return children({ content });
+};
+
+export default chakra(TxsNewItemNotice);

ui/txs/TxsTable.tsx

-import { Link, Table, Tbody, Tr, Th, Icon } from '@chakra-ui/react';
+import { Link, Table, Tbody, Tr, Th, Td, Icon } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Transaction } from 'types/api/transaction';
@@ -8,6 +8,7 @@ import appConfig from 'configs/app/config';
 import rightArrowIcon from 'icons/arrows/east.svg';
 import TheadSticky from 'ui/shared/TheadSticky';
 
+import TxsNewItemNotice from './TxsNewItemNotice';
 import TxsTableItem from './TxsTableItem';
 
 type Props = {
@@ -46,6 +47,9 @@ const TxsTable = ({ txs, sort, sorting }: Props) => {
         </Tr>
       </TheadSticky>
       <Tbody>
+        <TxsNewItemNotice>
+          { ({ content }) => <Tr><Td colSpan={ 10 } p={ 0 }>{ content }</Td></Tr> }
+        </TxsNewItemNotice>
         { txs.map((item) => (
           <TxsTableItem
             key={ item.hash }

ui/txs/TxsWithSort.tsx

@@ -7,6 +7,7 @@ import type { Sort } from 'types/client/txs-sort';
 import sortTxs from 'lib/tx/sortTxs';
 
 import TxsListItem from './TxsListItem';
+import TxsNewItemNotice from './TxsNewItemNotice';
 import TxsTable from './TxsTable';
 
 type Props = {
@@ -28,7 +29,14 @@ const TxsWithSort = ({
 
   return (
     <>
-      <Show below="lg" ssr={ false }><Box>{ sortedTxs.map(tx => <TxsListItem tx={ tx } key={ tx.hash }/>) }</Box></Show>
+      <Show below="lg" ssr={ false }>
+        <Box>
+          <TxsNewItemNotice borderRadius="md">
+            { ({ content }) => <Box>{ content }</Box> }
+          </TxsNewItemNotice>
+          { sortedTxs.map(tx => <TxsListItem tx={ tx } key={ tx.hash }/>) }
+        </Box>
+      </Show>
       <Hide below="lg" ssr={ false }><TxsTable txs={ sortedTxs } sort={ sort } sorting={ sorting }/></Hide>
     </>
   );