Improve envelope page

src/components/Envelope/Detail.tsx

@@ -1,23 +1,32 @@
 import voteImage from '/images/vocdoni-vote.png'
-import { Flex, Heading, Image, Link, Text } from '@chakra-ui/react'
-import { IVoteInfoResponse } from '@vocdoni/sdk'
+import { Flex, Image, Link, Tab, TabList, TabPanel, TabPanels, Text } from '@chakra-ui/react'
+import { VoteInfoResponse } from '@vocdoni/sdk'
 import { formatDistance } from 'date-fns'
 import { Trans, useTranslation } from 'react-i18next'
 import { generatePath, Link as RouterLink } from 'react-router-dom'
-import { CopyButton } from '~components/Layout/CopyButton'
-import ShowRawButton from '~components/Layout/ShowRawButton'
+import { CopyButton, ReducedTextAndCopy } from '~components/Layout/CopyButton'
+import { RawContentBox } from '~components/Layout/ShowRawButton'
 import { RoutePath } from '~constants'
+import { RouteParamsTabs } from '~components/Layout/RouteParamsTabs'
+import { DetailsGrid, GridItemProps } from '~components/Layout/DetailsGrid'
+import { processIdGridItem } from '~components/Transactions/TxDetails/SpecificTxDetails'
+import { Envelope } from '@vocdoni/chakra-components'
+import { ElectionProvider } from '@vocdoni/react-providers'
 
-const EnvelopeDetail = (envelope: IVoteInfoResponse) => {
+/**
+ * Show envelope content
+ * @param route this is needed to use the RoutedParamsTabs
+ * @param envelope envelope data
+ * @constructor
+ */
+const EnvelopeDetail = ({
+  route,
+  ...envelope
+}: { route: RoutePath.Envelope | RoutePath.Verify } & VoteInfoResponse) => {
   const { t } = useTranslation()
-  const emitted = formatDistance(new Date(envelope.date), new Date(), { addSuffix: true })
-  const encKeys = envelope.encryptionKeys?.join(',')
 
   return (
     <Flex direction={'column'} mt={'40px'} gap={6} wordBreak='break-all'>
-      <Heading isTruncated wordBreak='break-word'>
-        <Trans i18nKey={'envelopes.envelope_detail'}>Envelope Detail</Trans>
-      </Heading>
       <Flex direction={'column'} alignItems={'center'} gap={6}>
         <Image w={'100px'} src={voteImage} alt={t('envelopes.vote_registered')} />
         <Text fontWeight={'bold'} fontSize={'xl'}>
@@ -38,58 +47,106 @@ const EnvelopeDetail = (envelope: IVoteInfoResponse) => {
           </CopyButton>
         </Flex>
       </Flex>
-      <Flex direction={'column'} gap={3}>
-        <Text>
-          <Trans i18nKey={'envelopes.emitted'} values={{ emitted: emitted }}>
-            Emitted {{ emitted: emitted }}
-          </Trans>
-        </Text>
-        {encKeys && encKeys?.length > 0 && (
-          <Text>
-            <Trans i18nKey={'envelopes.encryption_keys'} values={{ encKeys: encKeys }}>
-              Encryption keys: {{ encKeys: encKeys }}
-            </Trans>
-          </Text>
-        )}
-        {envelope.overwriteCount > 0 && (
-          <Text>
-            <Trans i18nKey='envelopes.overwrite_count' values={{ overwriteCount: envelope.overwriteCount }}>
-              Overwrite count: {{ overwriteCount: envelope.overwriteCount }}
-            </Trans>
-          </Text>
-        )}
-        <Text>
-          <Trans i18nKey={'envelopes.envelope_weight'} values={{ weight: envelope.weight }}>
-            Envelope weight: {{ weight: envelope.weight }}
-          </Trans>
-        </Text>
-        <Text>
-          <Trans
-            i18nKey={'envelopes.committed_in_block'}
-            components={{
-              a: (
-                <Link
-                  as={RouterLink}
-                  to={generatePath(RoutePath.Block, { height: envelope.blockHeight.toString(), tab: null, page: null })}
-                />
-              ),
-            }}
-            values={{ block: envelope.blockHeight }}
-          />
-        </Text>
-        <Text>
-          <Trans
-            i18nKey={'envelopes.belongs_to_process'}
-            components={{
-              a: <Link as={RouterLink} to={generatePath(RoutePath.Process, { pid: envelope.electionID, tab: null })} />,
-            }}
-            values={{ pid: envelope.electionID }}
-          />
-        </Text>
-      </Flex>
-      <ShowRawButton obj={envelope} />
+      <RouteParamsTabs path={route} isLazy>
+        <TabList display='flex' flexWrap='wrap'>
+          <Tab>
+            <Trans i18nKey={'envelope.content'}>Envelope Content</Trans>
+          </Tab>
+          <Tab>
+            <Trans i18nKey={'process.tab_details'}>Details</Trans>
+          </Tab>
+          <Tab>
+            <Trans i18nKey={'raw'}>Raw</Trans>
+          </Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <ElectionProvider id={envelope.electionID}>
+              <Envelope votePackage={envelope.package} />
+            </ElectionProvider>
+          </TabPanel>
+          <TabPanel>
+            <EnvelopeDetailsGrid {...envelope} />
+          </TabPanel>
+          <TabPanel>
+            <RawContentBox obj={envelope} />
+          </TabPanel>
+        </TabPanels>
+      </RouteParamsTabs>
     </Flex>
   )
 }
 
+const EnvelopeDetailsGrid = (envelope: VoteInfoResponse) => {
+  const { t } = useTranslation()
+
+  const emitted = formatDistance(new Date(envelope.date), new Date(), { addSuffix: true })
+  const encKeys = envelope.encryptionKeys?.join(',')
+
+  const details: GridItemProps[] = [
+    {
+      label: t('envelopes.emitted', { defaultValue: 'Emitted' }),
+      children: <Text>{emitted}</Text>,
+    },
+    ...(envelope.overwriteCount > 0
+      ? [
+          {
+            label: t('envelopes.overwrite_count', { defaultValue: 'Overwrite count' }),
+            children: envelope.overwriteCount,
+          },
+        ]
+      : []),
+    {
+      label: 'Overwrite count',
+      children: <Text>{envelope.overwriteCount}</Text>,
+    },
+    ...(encKeys && encKeys?.length > 0
+      ? [
+          {
+            label: t('envelopes.encryption_keys', { defaultValue: 'Encryption keys' }),
+            children: encKeys,
+          },
+        ]
+      : []),
+    {
+      label: t('envelopes.envelope_weight', { defaultValue: 'Envelope weight' }),
+      children: <Text>{envelope.weight}</Text>,
+    },
+    {
+      label: t('envelopes.committed_in_block', { defaultValue: 'Committed in block' }),
+      children: (
+        <Link
+          as={RouterLink}
+          to={generatePath(RoutePath.Block, { height: envelope.blockHeight.toString(), tab: null, page: null })}
+        >
+          {envelope.blockHeight}
+        </Link>
+      ),
+    },
+    {
+      label: t('envelopes.on_transaction', { defaultValue: 'On Transaction' }),
+      children: (
+        <ReducedTextAndCopy
+          breakPoint={{ base: true, lg: false }}
+          pl={0}
+          color={'textAccent1'}
+          toCopy={envelope.txHash}
+          fontWeight={'normal'}
+          h={0}
+          fontSize={'md'}
+          to={generatePath(RoutePath.Transaction, {
+            block: envelope.blockHeight.toString(),
+            index: envelope.transactionIndex.toString(),
+            tab: null,
+          })}
+        >
+          {envelope.txHash}
+        </ReducedTextAndCopy>
+      ),
+    },
+    { ...processIdGridItem(envelope.electionID, t) },
+  ]
+  return <DetailsGrid details={details} />
+}
+
 export default EnvelopeDetail

src/components/Transactions/TxDetails/SpecificTxDetails.tsx

@@ -20,7 +20,7 @@ import { SmallOrganizationCard } from '~components/Organizations/Card'
 import { RoutePath } from '~constants'
 import { b64ToHex } from '~utils/objects'
 
-const processIdGridItem = (processId: string, t: TFunction): GridItemProps => {
+export const processIdGridItem = (processId: string, t: TFunction): GridItemProps => {
   return {
     label: t('transactions.belongs_to_process', { defaultValue: 'Belongs to process' }),
     children: (

src/constants.ts

@@ -22,7 +22,7 @@ export enum RoutePath {
   Base = '/',
   Block = '/block/:height/:tab?/:page?',
   BlocksList = '/blocks/:page?',
-  Envelope = '/envelope/:verifier',
+  Envelope = '/envelope/:verifier/:tab?',
   Organization = '/organization/:pid/:tab?/:page?',
   OrganizationsList = '/organizations/:page?/:query?',
   Process = '/process/:pid/:tab?',
@@ -32,7 +32,7 @@ export enum RoutePath {
   TransactionByHashOrHeight = '/transactions/:hashOrHeight',
   Validator = '/validator/:address/:tab?',
   Validators = '/validators',
-  Verify = '/verify/:verifier?',
+  Verify = '/verify/:verifier?/:tab?',
 }
 
 // old explorer route paths (used by RouteRedirector)

src/pages/envelope.tsx

@@ -1,10 +1,11 @@
 import { useLoaderData } from 'react-router-dom'
 import { IVoteInfoResponse } from '@vocdoni/sdk'
 import EnvelopeDetail from '~components/Envelope/Detail'
+import { RoutePath } from '~constants'
 
 const Envelope = () => {
   const envelope = useLoaderData() as IVoteInfoResponse
-  return <EnvelopeDetail {...envelope} />
+  return <EnvelopeDetail route={RoutePath.Envelope} {...envelope} />
 }
 
 export default Envelope

src/pages/verify.tsx

@@ -5,6 +5,7 @@ import { Loading } from '~components/Layout/Loading'
 import { Flex, Heading } from '@chakra-ui/react'
 import { Trans } from 'react-i18next'
 import EnvelopeDetail from '~components/Envelope/Detail'
+import { RoutePath } from '~constants'
 
 const Verify = () => {
   const { verifier }: { verifier?: string } = useParams()
@@ -31,7 +32,7 @@ const Verify = () => {
           <Trans i18nKey={'envelopes.not_found'}>Envelope not found</Trans>{' '}
         </Heading>
       )}
-      {data && <EnvelopeDetail {...data} />}
+      {data && <EnvelopeDetail route={RoutePath.Verify} {...data} />}
     </Flex>
   )
 }