Fix error pages (#108)

* Fix ErrBlockNotFound page

* Improve invalid election page

* Implement tx not found page

* Fix translation

src/i18n/locales/ca.json

@@ -233,6 +233,10 @@
     "go_to_tx": "Anar a la transacció",
     "invalid_tx_count": "Nombre de transaccions no vàlides en la cadena",
     "invalid_tx_search": "Ha de ser un hash de tx o un índex vàlid",
+    "not_found": "Transacció no trobada",
+    "not_found_message": "La transacció que estàs intentant accedir no s'ha trobat",
+    "on_block": "En el bloc {{block}}",
+    "on_block_n": "Al Bloc {{height}}",
     "send_tokens_from": "De",
     "send_tokens_to": "A",
     "tokens_transferred": "Tokens transferits",
@@ -245,7 +249,9 @@
     "tx_title": "Transacció #{{number}}",
     "tx_type": "Tipus de Transacció",
     "vote_package": "Paquet de vot:",
-    "vote_sense": "Sentit del vot"
+    "vote_sense": "Sentit del vot",
+    "with_hash_or_height": "Amb hash o alçada {{hashOrHeight}}",
+    "with_index": "Amb índex {{index}}"
   },
   "validators": {
     "account": "Compte",

src/i18n/locales/en.json

@@ -224,6 +224,10 @@
     "go_to_tx": "Go to transaction",
     "invalid_tx_count": "Invalid chain transactions count",
     "invalid_tx_search": "Must to be a valid tx hash or index",
+    "not_found": "Transaction not found",
+    "not_found_message": "The transaction you are trying to access is not found",
+    "on_block": "On block {{block}}",
+    "on_block_n": "On Block {{height}}",
     "send_tokens_from": "From",
     "send_tokens_to": "To",
     "tokens_transferred": "Tokens transferred",
@@ -235,7 +239,9 @@
     "tx_title": "Transaction #{{ number }}",
     "tx_type": "Transaction type",
     "vote_package": "Vote package:",
-    "vote_sense": "Vote sense"
+    "vote_sense": "Vote sense",
+    "with_hash_or_height": "With hash or height {{hashOrHeight}}",
+    "with_index": "With index {{index}}"
   },
   "validators": {
     "account": "Account",

src/i18n/locales/es.json

@@ -233,6 +233,10 @@
     "go_to_tx": "Ir a la transacción",
     "invalid_tx_count": "Conteo de transacciones no válidas de la cadena",
     "invalid_tx_search": "Debe ser un hash de Tx o un índice válido",
+    "not_found": "Transacción no encontrada",
+    "not_found_message": "La transacción a la que estás intentando acceder no se ha encontrado",
+    "on_block": "En el bloque {{block}}",
+    "on_block_n": "En el bloque {{height}}",
     "send_tokens_from": "De",
     "send_tokens_to": "A",
     "tokens_transferred": "Tokens transferidos",
@@ -245,7 +249,9 @@
     "tx_title": "Transacción #{{number}}",
     "tx_type": "Tipo de transacción ",
     "vote_package": "Paquete de votos:",
-    "vote_sense": "Sentido del voto"
+    "vote_sense": "Sentido del voto",
+    "with_hash_or_height": "Con hash o altura {{hashOrHeight}}",
+    "with_index": "Con índice {{index}}"
   },
   "validators": {
     "account": "Cuenta",

src/pages/transaction.tsx

@@ -1,9 +1,10 @@
 import { useLoaderData } from 'react-router-dom'
 import { TransactionDetail as TransactionDetailView } from '~components/Transactions/Detail'
-import { Tx } from '@vocdoni/sdk'
+import { ErrTransactionNotFound, Tx } from '@vocdoni/sdk'
 
 const TransactionDetail = () => {
   const tx = useLoaderData() as Tx
+  if (!tx) throw new ErrTransactionNotFound()
   return <TransactionDetailView {...tx} />
 }
 

src/router/errors/BlockNotFound.tsx

@@ -1,23 +1,33 @@
-import { Alert, AlertIcon, Code, Stack } from '@chakra-ui/react'
-import { ErrAPI } from '@vocdoni/sdk'
+import { Alert, AlertIcon, Code, Flex, Heading, Stack, VStack } from '@chakra-ui/react'
+import { ErrBlockNotFound } from '@vocdoni/sdk'
 import { Trans } from 'react-i18next'
-import { useRouteError } from 'react-router-dom'
+import { useParams, useRouteError } from 'react-router-dom'
 import RouteError from '~src/router/errors/RouteError'
 
 export const BlockNotFound = () => {
   const error = useRouteError() as Error
+  const { height }: { height?: number } = useParams()
 
-  if (error instanceof ErrAPI && error.raw?.response?.status === 404) {
+  if (error instanceof ErrBlockNotFound) {
     return (
-      <Stack spacing={4}>
-        <Alert status='warning'>
-          <AlertIcon />
-          <Trans i18nKey={'blocks.block_not_found'}>
-            The block you are trying to access has been pruned or it is not indexed
-          </Trans>
-        </Alert>
-        <Code>{error.message}</Code>
-      </Stack>
+      <Flex direction={'column'} mt={{ base: '20px', lg: '40px' }} gap={6} wordBreak='break-all'>
+        <VStack align='start'>
+          <Heading isTruncated wordBreak='break-word' mb={0}>
+            <Trans i18nKey={'blocks.block_detail'} height={height}>
+              Block #{{ height }}
+            </Trans>
+          </Heading>
+        </VStack>
+        <Stack spacing={4}>
+          <Alert status='warning'>
+            <AlertIcon />
+            <Trans i18nKey={'blocks.block_not_found'}>
+              The block you are trying to access has been pruned or it is not indexed
+            </Trans>
+          </Alert>
+          <Code>{error.message}</Code>
+        </Stack>
+      </Flex>
     )
   }
 

src/router/errors/ElectionError.tsx

@@ -1,16 +1,39 @@
-import { Text } from '@chakra-ui/react'
-import { useRouteError } from 'react-router-dom'
+import { Flex, Heading, Text } from '@chakra-ui/react'
+import { useParams, useRouteError } from 'react-router-dom'
 import ShowRawButton from '~components/Layout/ShowRawButton'
 import RouteError from '~src/router/errors/RouteError'
+import { PublishedElection } from '@vocdoni/sdk'
+import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
 
 export const ElectionError = () => {
   const error = useRouteError() as Error & { raw?: unknown; electionId: string }
+  const { pid }: { pid?: string } = useParams()
+
+  const electionId = pid || error.electionId || ''
+
+  let raw: any
+  let title = ''
+  if (error.raw) {
+    raw = error.raw
+    title = raw['metadata']['title']['default']
+  }
 
   return (
-    <>
+    <Flex direction={'column'} mt={{ base: '20px', lg: '40px' }} gap={6} wordBreak='break-all'>
+      {!!title && (
+        <Heading fontSize={'2xl'} fontWeight='bold'>
+          {title}
+        </Heading>
+      )}
+      {!!electionId && (
+        <Flex>
+          <ReducedTextAndCopy fontSize={'lg'} color={'textAccent1'} toCopy={electionId}>
+            {electionId}
+          </ReducedTextAndCopy>
+        </Flex>
+      )}
       <RouteError />
-      {!!error.electionId && <Text fontWeight='bold'>{error.electionId}</Text>}
-      {!!error.raw && <ShowRawButton obj={error.raw} />}
-    </>
+      {!!raw && <ShowRawButton obj={raw} />}
+    </Flex>
   )
 }

src/router/errors/TransactionNotFound.tsx

@@ -0,0 +1,56 @@
+import { Alert, AlertIcon, Code, Flex, Heading, Stack, Text, VStack } from '@chakra-ui/react'
+import { ErrTransactionNotFound } from '@vocdoni/sdk'
+import { Trans } from 'react-i18next'
+import { useParams, useRouteError } from 'react-router-dom'
+import RouteError from '~src/router/errors/RouteError'
+
+export const TransactionNotFound = () => {
+  const error = useRouteError() as Error
+  const { block, index, hashOrHeight }: { block?: string; index?: string; hashOrHeight?: string } = useParams()
+
+  if (error instanceof ErrTransactionNotFound) {
+    return (
+      <Flex direction={'column'} mt={{ base: '20px', lg: '40px' }} gap={6} wordBreak='break-all'>
+        <VStack align='start'>
+          <Heading isTruncated wordBreak='break-word' mb={0}>
+            <Trans i18nKey={'transactions.not_found'}>Transaction not found</Trans>
+          </Heading>
+        </VStack>
+        <Flex gap={2}>
+          {!!block && (
+            <Text>
+              <Trans i18nKey={'transactions.on_block'} block={block}>
+                On block {{ block }}
+              </Trans>
+            </Text>
+          )}
+          {!!index && (
+            <Text>
+              <Trans i18nKey={'transactions.with_index'} index={index}>
+                With index {{ index }}
+              </Trans>
+            </Text>
+          )}
+          {!!hashOrHeight && (
+            <Text>
+              <Trans i18nKey={'transactions.with_hash_or_height'} hashOrHeight={hashOrHeight}>
+                With hash or height {{ hashOrHeight }}
+              </Trans>
+            </Text>
+          )}
+        </Flex>
+        <Stack spacing={4}>
+          <Alert status='warning'>
+            <AlertIcon />
+            <Trans i18nKey={'transactions.not_found_message'}>
+              The transaction you are trying to access is not found
+            </Trans>
+          </Alert>
+          <Code>{error.message}</Code>
+        </Stack>
+      </Flex>
+    )
+  }
+
+  return <RouteError />
+}

src/router/index.tsx

@@ -1,6 +1,6 @@
 import { ExtendedSDKClient } from '@vocdoni/extended-sdk'
 import { useClient } from '@vocdoni/react-providers'
-import { IChainTxReference } from '@vocdoni/sdk'
+import { ErrTransactionNotFound, IChainTxReference } from '@vocdoni/sdk'
 import { lazy } from 'react'
 import { createBrowserRouter, generatePath, redirect, RouteObject, RouterProvider } from 'react-router-dom'
 import { RoutePath } from '~constants'
@@ -11,6 +11,7 @@ import Error404 from './errors/Error404'
 import RouteError from './errors/RouteError'
 import RouteRedirector from './RouteRedirector'
 import { SuspenseLoader } from './SuspenseLoader'
+import { TransactionNotFound } from '~src/router/errors/TransactionNotFound'
 
 const Home = lazy(() => import('~pages/Home'))
 const Block = lazy(() => import('~pages/block'))
@@ -116,6 +117,7 @@ export const RoutesProvider = () => {
                 </SuspenseLoader>
               ),
               loader: async ({ params }) => await client.txInfoByBlock(Number(params.block), Number(params.index)),
+              errorElement: <TransactionNotFound />,
             },
             {
               path: RoutePath.TransactionsList,
@@ -132,6 +134,7 @@ export const RoutesProvider = () => {
                   <Transaction />
                 </SuspenseLoader>
               ),
+              errorElement: <TransactionNotFound />,
               loader: async ({ params: { hashOrHeight } }) => {
                 let tx: IChainTxReference
                 if (hashOrHeight && (hashOrHeight.startsWith('0x') || isNaN(Number(hashOrHeight)))) {
@@ -140,6 +143,8 @@ export const RoutesProvider = () => {
                   tx = await client.txByIndex(Number(hashOrHeight))
                 }
 
+                if (!tx) throw new ErrTransactionNotFound()
+
                 return redirect(
                   generatePath(RoutePath.Transaction, {
                     block: tx.blockHeight.toString(),