404 for unknown transaction

Fixes #1689

ui/shared/AppError/AppError.pw.tsx

@@ -36,8 +36,8 @@ test('status code 500', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('invalid tx hash', async({ mount }) => {
-  const error = { message: 'Invalid tx hash', cause: { status: 422, resource: 'tx' } } as Error;
+test('tx not found', async({ mount }) => {
+  const error = { message: 'Not found', cause: { status: 404, resource: 'tx' } } as Error;
   const component = await mount(
     <TestApp>
       <AppError error={ error }/>

ui/shared/AppError/AppError.tsx

@@ -11,8 +11,8 @@ import getResourceErrorPayload from 'lib/errors/getResourceErrorPayload';
 import AppErrorIcon from './AppErrorIcon';
 import AppErrorTitle from './AppErrorTitle';
 import AppErrorBlockConsensus from './custom/AppErrorBlockConsensus';
-import AppErrorInvalidTxHash from './custom/AppErrorInvalidTxHash';
 import AppErrorTooManyRequests from './custom/AppErrorTooManyRequests';
+import AppErrorTxNotFound from './custom/AppErrorTxNotFound';
 
 interface Props {
   className?: string;
@@ -47,11 +47,11 @@ const AppError = ({ error, className }: Props) => {
             undefined;
     const statusCode = getErrorCauseStatusCode(error) || getErrorObjStatusCode(error);
 
-    const isInvalidTxHash = cause && 'resource' in cause && cause.resource === 'tx' && statusCode === 422;
+    const isInvalidTxHash = cause && 'resource' in cause && cause.resource === 'tx' && statusCode === 404;
     const isBlockConsensus = messageInPayload?.includes('Block lost consensus');
 
     if (isInvalidTxHash) {
-      return <AppErrorInvalidTxHash/>;
+      return <AppErrorTxNotFound/>;
     }
 
     if (isBlockConsensus) {

ui/shared/AppError/custom/AppErrorInvalidTxHash.tsx → ui/shared/AppError/custom/AppErrorTxNotFound.tsx

@@ -1,13 +1,12 @@
 /* eslint-disable max-len */
-import { Box, OrderedList, ListItem, useColorModeValue, Flex } from '@chakra-ui/react';
+import { Box, OrderedList, ListItem, useColorModeValue, Flex, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import IconSvg from 'ui/shared/IconSvg';
 
 import AppErrorTitle from '../AppErrorTitle';
 
-const AppErrorInvalidTxHash = () => {
-  const textColor = useColorModeValue('gray.500', 'gray.400');
+const AppErrorTxNotFound = () => {
   const snippet = {
     borderColor: useColorModeValue('blackAlpha.300', 'whiteAlpha.300'),
     iconBg: useColorModeValue('blackAlpha.800', 'whiteAlpha.800'),
@@ -36,7 +35,7 @@ const AppErrorInvalidTxHash = () => {
         </Flex>
       </Box>
       <AppErrorTitle title="Sorry, we are unable to locate this transaction hash"/>
-      <OrderedList color={ textColor } mt={ 3 } spacing={ 3 }>
+      <OrderedList mt={ 3 } spacing={ 3 }>
         <ListItem>
             If you have just submitted this transaction please wait for at least 30 seconds before refreshing this page.
         </ListItem>
@@ -47,11 +46,13 @@ const AppErrorInvalidTxHash = () => {
             During times when the network is busy (i.e during ICOs) it can take a while for your transaction to propagate through the network and for us to index it.
         </ListItem>
         <ListItem>
-            If it still does not show up after 1 hour, please check with your sender/exchange/wallet/transaction provider for additional information.
+          <span>If it still does not show up after 1 hour, please check with your </span>
+          <chakra.span fontWeight={ 600 }>sender/exchange/wallet/transaction provider</chakra.span>
+          <span> for additional information.</span>
         </ListItem>
       </OrderedList>
     </>
   );
 };
 
-export default AppErrorInvalidTxHash;
+export default AppErrorTxNotFound;

ui/tx/TxDetailsDegraded.tsx

@@ -7,6 +7,7 @@ import type { Transaction } from 'types/api/transaction';
 
 import { SECOND } from 'lib/consts';
 import dayjs from 'lib/date/dayjs';
+import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
 import hexToDecimal from 'lib/hexToDecimal';
 import { publicClient } from 'lib/web3/client';
 import { GET_BLOCK, GET_TRANSACTION, GET_TRANSACTION_RECEIPT, GET_TRANSACTION_CONFIRMATIONS } from 'stubs/RPC';
@@ -141,8 +142,8 @@ const TxDetailsDegraded = ({ hash, txQuery }: Props) => {
   }, [ txQuery.setRefetchOnError ]);
 
   if (!query.data) {
-    if (originalError?.status === 404) {
-      throw Error('Not found', { cause: { status: 404 } as unknown as Error });
+    if (originalError?.status === 422 || originalError?.status === 404) {
+      throwOnResourceLoadError({ resource: 'tx', error: originalError, isError: true });
     }
 
     return <DataFetchAlert/>;