Change txs socket alert text (#2822)

ui/address/AddressBlocksValidated.tsx

@@ -33,7 +33,7 @@ interface Props {
 }
 
 const AddressBlocksValidated = ({ shouldRender = true, isQueryEnabled = true }: Props) => {
-  const [ socketAlert, setSocketAlert ] = React.useState('');
+  const [ showSocketAlert, setShowSocketAlert ] = React.useState(false);
   const [ newItemsCount, setNewItemsCount ] = React.useState(0);
 
   const queryClient = useQueryClient();
@@ -60,11 +60,11 @@ const AddressBlocksValidated = ({ shouldRender = true, isQueryEnabled = true }:
   });
 
   const handleSocketError = React.useCallback(() => {
-    setSocketAlert('An error has occurred while fetching new blocks. Please refresh the page to load new blocks.');
+    setShowSocketAlert(true);
   }, []);
 
   const handleNewSocketMessage: SocketMessage.NewBlock['handler'] = React.useCallback((payload) => {
-    setSocketAlert('');
+    setShowSocketAlert(false);
 
     queryClient.setQueryData(
       getResourceKey('general:address_blocks_validated', { pathParams: { hash: addressHash } }),
@@ -121,7 +121,7 @@ const AddressBlocksValidated = ({ shouldRender = true, isQueryEnabled = true }:
           <TableBody>
             <SocketNewItemsNotice.Desktop
               num={ newItemsCount }
-              alert={ socketAlert }
+              showErrorAlert={ showSocketAlert }
               type="block"
               isLoading={ query.isPlaceholderData }
             />
@@ -140,7 +140,7 @@ const AddressBlocksValidated = ({ shouldRender = true, isQueryEnabled = true }:
         { query.pagination.page === 1 && (
           <SocketNewItemsNotice.Mobile
             num={ newItemsCount }
-            alert={ socketAlert }
+            showErrorAlert={ showSocketAlert }
             type="block"
             isLoading={ query.isPlaceholderData }
           />

ui/address/AddressTokenTransfers.tsx

@@ -73,7 +73,7 @@ const AddressTokenTransfers = ({ overloadCount = OVERLOAD_COUNT, shouldRender =
 
   const currentAddress = getQueryParamString(router.query.hash);
 
-  const [ socketAlert, setSocketAlert ] = React.useState('');
+  const [ showSocketAlert, setShowSocketAlert ] = React.useState(false);
   const [ newItemsCount, setNewItemsCount ] = React.useState(0);
 
   const [ filters, setFilters ] = React.useState<Filters>(
@@ -109,7 +109,7 @@ const AddressTokenTransfers = ({ overloadCount = OVERLOAD_COUNT, shouldRender =
   }, [ filters, onFilterChange ]);
 
   const handleNewSocketMessage: SocketMessage.AddressTokenTransfer['handler'] = (payload) => {
-    setSocketAlert('');
+    setShowSocketAlert(false);
 
     const newItems: Array<TokenTransfer> = [];
     let newCount = 0;
@@ -152,11 +152,11 @@ const AddressTokenTransfers = ({ overloadCount = OVERLOAD_COUNT, shouldRender =
   };
 
   const handleSocketClose = React.useCallback(() => {
-    setSocketAlert('Connection is lost. Please refresh the page to load new token transfers.');
+    setShowSocketAlert(true);
   }, []);
 
   const handleSocketError = React.useCallback(() => {
-    setSocketAlert('An error has occurred while fetching new token transfers. Please refresh the page.');
+    setShowSocketAlert(true);
   }, []);
 
   const channel = useSocketChannel({
@@ -189,7 +189,7 @@ const AddressTokenTransfers = ({ overloadCount = OVERLOAD_COUNT, shouldRender =
           top={ isActionBarHidden ? 0 : ACTION_BAR_HEIGHT_DESKTOP }
           enableTimeIncrement
           showSocketInfo={ pagination.page === 1 }
-          socketInfoAlert={ socketAlert }
+          showSocketErrorAlert={ showSocketAlert }
           socketInfoNum={ newItemsCount }
           isLoading={ isPlaceholderData }
         />
@@ -198,7 +198,7 @@ const AddressTokenTransfers = ({ overloadCount = OVERLOAD_COUNT, shouldRender =
         { pagination.page === 1 && (
           <SocketNewItemsNotice.Mobile
             num={ newItemsCount }
-            alert={ socketAlert }
+            showErrorAlert={ showSocketAlert }
             type="token_transfer"
             isLoading={ isPlaceholderData }
           />

ui/blocks/BlocksContent.tsx

@@ -34,7 +34,7 @@ interface Props {
 const BlocksContent = ({ type, query, enableSocket = true, top }: Props) => {
   const queryClient = useQueryClient();
   const isMobile = useIsMobile();
-  const [ socketAlert, setSocketAlert ] = React.useState('');
+  const [ showSocketAlert, setShowSocketAlert ] = React.useState(false);
 
   const [ newItemsCount, setNewItemsCount ] = React.useState(0);
 
@@ -66,11 +66,11 @@ const BlocksContent = ({ type, query, enableSocket = true, top }: Props) => {
   }, [ queryClient, type ]);
 
   const handleSocketClose = React.useCallback(() => {
-    setSocketAlert('Connection is lost. Please refresh the page to load new blocks.');
+    setShowSocketAlert(true);
   }, []);
 
   const handleSocketError = React.useCallback(() => {
-    setSocketAlert('An error has occurred while fetching new blocks. Please refresh the page to load new blocks.');
+    setShowSocketAlert(true);
   }, []);
 
   const channel = useSocketChannel({
@@ -91,7 +91,7 @@ const BlocksContent = ({ type, query, enableSocket = true, top }: Props) => {
         { query.pagination.page === 1 && enableSocket && (
           <SocketNewItemsNotice.Mobile
             num={ newItemsCount }
-            alert={ socketAlert }
+            showErrorAlert={ showSocketAlert }
             type="block"
             isLoading={ query.isPlaceholderData }
           />
@@ -106,7 +106,7 @@ const BlocksContent = ({ type, query, enableSocket = true, top }: Props) => {
           isLoading={ query.isPlaceholderData }
           showSocketInfo={ query.pagination.page === 1 && enableSocket }
           socketInfoNum={ newItemsCount }
-          socketInfoAlert={ socketAlert }
+          showSocketErrorAlert={ showSocketAlert }
         />
       </Box>
     </>

ui/blocks/BlocksTable.tsx

@@ -19,7 +19,7 @@ interface Props {
   top: number;
   page: number;
   socketInfoNum?: number;
-  socketInfoAlert?: string;
+  showSocketErrorAlert?: boolean;
   showSocketInfo?: boolean;
 }
 
@@ -30,7 +30,7 @@ const FEES_COL_WEIGHT = 22;
 
 const isRollup = config.features.rollup.isEnabled;
 
-const BlocksTable = ({ data, isLoading, top, page, showSocketInfo, socketInfoNum, socketInfoAlert }: Props) => {
+const BlocksTable = ({ data, isLoading, top, page, showSocketInfo, socketInfoNum, showSocketErrorAlert }: Props) => {
   const initialList = useInitialList({
     data: data ?? [],
     idFn: (item) => item.height,
@@ -71,7 +71,7 @@ const BlocksTable = ({ data, isLoading, top, page, showSocketInfo, socketInfoNum
         <TableBody>
           { showSocketInfo && (
             <SocketNewItemsNotice.Desktop
-              alert={ socketInfoAlert }
+              showErrorAlert={ showSocketErrorAlert }
               num={ socketInfoNum }
               type="block"
               isLoading={ isLoading }

ui/home/LatestTxs.tsx

@@ -23,7 +23,7 @@ const LatestTransactions = () => {
     },
   });
 
-  const { num, alertText } = useNewTxsSocket({ type: 'txs_home', isLoading: isPlaceholderData });
+  const { num, showErrorAlert } = useNewTxsSocket({ type: 'txs_home', isLoading: isPlaceholderData });
 
   if (isError) {
     return <Text mt={ 4 }>No data. Please reload the page.</Text>;
@@ -33,7 +33,7 @@ const LatestTransactions = () => {
     const txsUrl = route({ pathname: '/txs' });
     return (
       <>
-        <SocketNewItemsNotice borderBottomRadius={ 0 } url={ txsUrl } num={ num } alert={ alertText } isLoading={ isPlaceholderData }/>
+        <SocketNewItemsNotice borderBottomRadius={ 0 } url={ txsUrl } num={ num } showErrorAlert={ showErrorAlert } isLoading={ isPlaceholderData }/>
         <Box mb={ 3 } display={{ base: 'block', lg: 'none' }}>
           { data.slice(0, txsCount).map(((tx, index) => (
             <LatestTxsItemMobile

ui/home/latestDeposits/LatestArbitrumDeposits.tsx

@@ -22,14 +22,14 @@ const LatestArbitrumDeposits = () => {
   });
 
   const [ num, setNum ] = useGradualIncrement(0);
-  const [ socketAlert, setSocketAlert ] = React.useState('');
+  const [ showSocketErrorAlert, setShowSocketErrorAlert ] = React.useState(false);
 
   const handleSocketClose = React.useCallback(() => {
-    setSocketAlert('Connection is lost. Please reload the page.');
+    setShowSocketErrorAlert(true);
   }, []);
 
   const handleSocketError = React.useCallback(() => {
-    setSocketAlert('An error has occurred while fetching new transactions. Please reload the page.');
+    setShowSocketErrorAlert(true);
   }, []);
 
   const handleNewDepositMessage: SocketMessage.NewArbitrumDeposits['handler'] = React.useCallback((payload) => {
@@ -66,7 +66,7 @@ const LatestArbitrumDeposits = () => {
         )) }
         isLoading={ isPlaceholderData }
         socketItemsNum={ num }
-        socketAlert={ socketAlert }
+        showSocketErrorAlert={ showSocketErrorAlert }
       />
     );
   }

ui/home/latestDeposits/LatestDeposits.tsx

@@ -28,7 +28,7 @@ type Props = {
   isLoading?: boolean;
   items: Array<DepositsItem>;
   socketItemsNum: number;
-  socketAlert?: string;
+  showSocketErrorAlert?: boolean;
 };
 
 type ItemProps = {
@@ -151,11 +151,18 @@ const LatestDepositsItem = ({ item, isLoading }: ItemProps) => {
   );
 };
 
-const LatestDeposits = ({ isLoading, items, socketAlert, socketItemsNum }: Props) => {
+const LatestDeposits = ({ isLoading, items, showSocketErrorAlert, socketItemsNum }: Props) => {
   const depositsUrl = route({ pathname: '/deposits' });
   return (
     <>
-      <SocketNewItemsNotice borderBottomRadius={ 0 } url={ depositsUrl } num={ socketItemsNum } alert={ socketAlert } type="deposit" isLoading={ isLoading }/>
+      <SocketNewItemsNotice
+        borderBottomRadius={ 0 }
+        url={ depositsUrl }
+        num={ socketItemsNum }
+        showErrorAlert={ showSocketErrorAlert }
+        type="deposit"
+        isLoading={ isLoading }
+      />
       <Box mb={{ base: 3, lg: 4 }}>
         { items.map(((item, index) => (
           <LatestDepositsItem

ui/home/latestDeposits/LatestOptimisticDeposits.tsx

@@ -22,14 +22,14 @@ const LatestOptimisticDeposits = () => {
   });
 
   const [ num, setNum ] = useGradualIncrement(0);
-  const [ socketAlert, setSocketAlert ] = React.useState('');
+  const [ showSocketErrorAlert, setShowSocketErrorAlert ] = React.useState(false);
 
   const handleSocketClose = React.useCallback(() => {
-    setSocketAlert('Connection is lost. Please reload the page.');
+    setShowSocketErrorAlert(true);
   }, []);
 
   const handleSocketError = React.useCallback(() => {
-    setSocketAlert('An error has occurred while fetching new transactions. Please reload the page.');
+    setShowSocketErrorAlert(true);
   }, []);
 
   const handleNewDepositMessage: SocketMessage.NewOptimisticDeposits['handler'] = React.useCallback((payload) => {
@@ -61,7 +61,7 @@ const LatestOptimisticDeposits = () => {
         )) }
         isLoading={ isPlaceholderData }
         socketItemsNum={ num }
-        socketAlert={ socketAlert }
+        showSocketErrorAlert={ showSocketErrorAlert }
       />
     );
   }

ui/shared/SocketNewItemsNotice.pw.tsx

@@ -17,7 +17,7 @@ test('2 new items in validated txs list +@dark-mode', async({ render }) => {
 });
 
 test('connection loss', async({ render }) => {
-  const component = await render(<SocketNewItemsNotice url="/" alert="Connection is lost. Please reload the page."/>, { hooksConfig });
+  const component = await render(<SocketNewItemsNotice url="/" showErrorAlert/>, { hooksConfig });
   await expect(component).toHaveScreenshot();
 });
 

ui/shared/SocketNewItemsNotice.tsx

@@ -15,19 +15,19 @@ interface Props {
   children?: (props: InjectedProps) => React.JSX.Element;
   className?: string;
   url?: string;
-  alert?: string;
+  showErrorAlert?: boolean;
   num?: number;
   isLoading?: boolean;
 }
 
-const SocketNewItemsNotice = chakra(({ children, className, url, num, alert, type = 'transaction', isLoading }: Props) => {
+const SocketNewItemsNotice = chakra(({ children, className, url, num, showErrorAlert, type = 'transaction', isLoading }: Props) => {
   const handleLinkClick = React.useCallback(() => {
     window.location.reload();
   }, []);
 
   const alertContent = (() => {
-    if (alert) {
-      return alert;
+    if (showErrorAlert) {
+      return 'Live updates temporarily delayed';
     }
 
     let name;

ui/shared/TokenTransfer/TokenTransferTable.tsx

@@ -15,7 +15,7 @@ interface Props {
   top: number;
   enableTimeIncrement?: boolean;
   showSocketInfo?: boolean;
-  socketInfoAlert?: string;
+  showSocketErrorAlert?: boolean;
   socketInfoNum?: number;
   isLoading?: boolean;
 }
@@ -27,7 +27,7 @@ const TokenTransferTable = ({
   top,
   enableTimeIncrement,
   showSocketInfo,
-  socketInfoAlert,
+  showSocketErrorAlert,
   socketInfoNum,
   isLoading,
 }: Props) => {
@@ -53,7 +53,7 @@ const TokenTransferTable = ({
         <TableBody>
           { showSocketInfo && (
             <SocketNewItemsNotice.Desktop
-              alert={ socketInfoAlert }
+              showErrorAlert={ showSocketErrorAlert }
               num={ socketInfoNum }
               type="token_transfer"
               isLoading={ isLoading }

ui/token/TokenTransfer/TokenTransfer.tsx

@@ -40,18 +40,18 @@ const TokenTransfer = ({ transfersQuery, tokenId, tokenQuery, tabsHeight = TABS_
   const { data: token, isPlaceholderData: isTokenPlaceholderData, isError: isTokenError } = tokenQuery;
 
   const [ newItemsCount, setNewItemsCount ] = useGradualIncrement(0);
-  const [ socketAlert, setSocketAlert ] = React.useState('');
+  const [ showSocketErrorAlert, setShowSocketErrorAlert ] = React.useState(false);
 
   const handleNewTransfersMessage: SocketMessage.TokenTransfers['handler'] = (payload) => {
     setNewItemsCount(payload.token_transfer);
   };
 
   const handleSocketClose = React.useCallback(() => {
-    setSocketAlert('Connection is lost. Please refresh the page to load new token transfers.');
+    setShowSocketErrorAlert(true);
   }, []);
 
   const handleSocketError = React.useCallback(() => {
-    setSocketAlert('An error has occurred while fetching new token transfers. Please refresh the page.');
+    setShowSocketErrorAlert(true);
   }, []);
 
   const channel = useSocketChannel({
@@ -79,7 +79,7 @@ const TokenTransfer = ({ transfersQuery, tokenId, tokenQuery, tabsHeight = TABS_
           data={ data?.items }
           top={ tabsHeight }
           showSocketInfo={ pagination.page === 1 }
-          socketInfoAlert={ socketAlert }
+          showSocketErrorAlert={ showSocketErrorAlert }
           socketInfoNum={ newItemsCount }
           tokenId={ tokenId }
           token={ token }
@@ -91,7 +91,7 @@ const TokenTransfer = ({ transfersQuery, tokenId, tokenQuery, tabsHeight = TABS_
         { pagination.page === 1 && (
           <SocketNewItemsNotice.Mobile
             num={ newItemsCount }
-            alert={ socketAlert }
+            showErrorAlert={ showSocketErrorAlert }
             type="token_transfer"
             isLoading={ isLoading }
           />

ui/token/TokenTransfer/TokenTransferTable.tsx

@@ -15,7 +15,7 @@ interface Props {
   data: Array<TokenTransfer>;
   top: number;
   showSocketInfo: boolean;
-  socketInfoAlert?: string;
+  showSocketErrorAlert?: boolean;
   socketInfoNum?: number;
   tokenId?: string;
   isLoading?: boolean;
@@ -23,7 +23,7 @@ interface Props {
   instance?: TokenInstance;
 }
 
-const TokenTransferTable = ({ data, top, showSocketInfo, socketInfoAlert, socketInfoNum, tokenId, isLoading, token, instance }: Props) => {
+const TokenTransferTable = ({ data, top, showSocketInfo, showSocketErrorAlert, socketInfoNum, tokenId, isLoading, token, instance }: Props) => {
 
   const tokenType = token.type;
 
@@ -51,7 +51,7 @@ const TokenTransferTable = ({ data, top, showSocketInfo, socketInfoAlert, socket
         <TableBody>
           { showSocketInfo && (
             <SocketNewItemsNotice.Desktop
-              alert={ socketInfoAlert }
+              showErrorAlert={ showSocketErrorAlert }
               num={ socketInfoNum }
               type="token_transfer"
               isLoading={ isLoading }

ui/txs/socket/TxsSocketNoticeTypeAddress.tsx

@@ -12,7 +12,7 @@ interface Props {
 }
 
 const TxsSocketNoticeTypeAddress = ({ place, isLoading }: Props) => {
-  const { num, alertText } = useTxsSocketTypeAddress({ isLoading });
+  const { num, showErrorAlert } = useTxsSocketTypeAddress({ isLoading });
 
   if (num === undefined) {
     return null;
@@ -21,7 +21,7 @@ const TxsSocketNoticeTypeAddress = ({ place, isLoading }: Props) => {
   if (place === 'table') {
     return (
       <SocketNewItemsNotice.Desktop
-        alert={ alertText }
+        showErrorAlert={ showErrorAlert }
         num={ num }
         isLoading={ isLoading }
       />
@@ -32,7 +32,7 @@ const TxsSocketNoticeTypeAddress = ({ place, isLoading }: Props) => {
     return (
       <SocketNewItemsNotice.Mobile
         num={ num }
-        alert={ alertText }
+        showErrorAlert={ showErrorAlert }
         isLoading={ isLoading }
       />
     );

ui/txs/socket/TxsSocketNoticeTypeAll.tsx

@@ -17,7 +17,7 @@ interface Props {
 
 const TxsSocketNoticeTypeAll = ({ type, place, isLoading }: Props) => {
   const multichainContext = useMultichainContext();
-  const { num, alertText } = useNewTxsSocketTypeAll({ type, isLoading });
+  const { num, showErrorAlert } = useNewTxsSocketTypeAll({ type, isLoading });
 
   if (num === undefined) {
     return null;
@@ -36,7 +36,7 @@ const TxsSocketNoticeTypeAll = ({ type, place, isLoading }: Props) => {
   if (place === 'table') {
     return (
       <SocketNewItemsNotice.Desktop
-        alert={ alertText }
+        showErrorAlert={ showErrorAlert }
         num={ num }
         isLoading={ isLoading }
         url={ url }
@@ -48,7 +48,7 @@ const TxsSocketNoticeTypeAll = ({ type, place, isLoading }: Props) => {
     return (
       <SocketNewItemsNotice.Mobile
         num={ num }
-        alert={ alertText }
+        showErrorAlert={ showErrorAlert }
         isLoading={ isLoading }
         url={ url }
       />

ui/txs/socket/useTxsSocketTypeAddress.tsx

@@ -38,7 +38,7 @@ interface Params {
 }
 
 export default function useTxsSocketTypeAddress({ isLoading }: Params) {
-  const [ alertText, setAlertText ] = React.useState('');
+  const [ showErrorAlert, setShowErrorAlert ] = React.useState(false);
   const [ num, setNum ] = React.useState(0);
 
   const router = useRouter();
@@ -51,12 +51,12 @@ export default function useTxsSocketTypeAddress({ isLoading }: Params) {
   const { chain } = useMultichainContext() || {};
 
   const handleNewSocketMessage: SocketMessage.AddressTxs['handler'] = React.useCallback((payload) => {
-    setAlertText('');
     const queryKey = getResourceKey('general:address_txs', {
       pathParams: { hash: currentAddress },
       queryParams: filterValue ? { filter: filterValue } : undefined,
       chainSlug: chain?.slug,
     });
+    setShowErrorAlert(false);
 
     queryClient.setQueryData(
       queryKey,
@@ -100,11 +100,11 @@ export default function useTxsSocketTypeAddress({ isLoading }: Params) {
   }, [ currentAddress, filterValue, queryClient, sort, chain?.slug ]);
 
   const handleSocketClose = React.useCallback(() => {
-    setAlertText('Connection is lost. Please refresh the page to load new transactions.');
+    setShowErrorAlert(true);
   }, []);
 
   const handleSocketError = React.useCallback(() => {
-    setAlertText('An error has occurred while fetching new transactions. Please refresh the page.');
+    setShowErrorAlert(true);
   }, []);
 
   const isDisabled = Boolean((page && page !== '1') || isLoading);
@@ -132,5 +132,5 @@ export default function useTxsSocketTypeAddress({ isLoading }: Params) {
     return { };
   }
 
-  return { num, alertText };
+  return { num, showErrorAlert };
 }

ui/txs/socket/useTxsSocketTypeAll.tsx

@@ -45,7 +45,7 @@ export default function useNewTxsSocketTypeAll({ type, isLoading }: Params) {
   const page = getQueryParamString(router.query.page);
 
   const [ num, setNum ] = useGradualIncrement(0);
-  const [ alertText, setAlertText ] = React.useState('');
+  const [ showErrorAlert, setShowErrorAlert ] = React.useState(false);
 
   const { topic, event } = getSocketParams(type, page);
 
@@ -59,11 +59,11 @@ export default function useNewTxsSocketTypeAll({ type, isLoading }: Params) {
   }, [ setNum ]);
 
   const handleSocketClose = React.useCallback(() => {
-    setAlertText('Connection is lost. Please reload the page.');
+    setShowErrorAlert(true);
   }, []);
 
   const handleSocketError = React.useCallback(() => {
-    setAlertText('An error has occurred while fetching new transactions. Please reload the page.');
+    setShowErrorAlert(true);
   }, []);
 
   const channel = useSocketChannel({
@@ -83,5 +83,5 @@ export default function useNewTxsSocketTypeAll({ type, isLoading }: Params) {
     return { };
   }
 
-  return { num, alertText };
+  return { num, showErrorAlert };
 }