diff --git a/src/components/Envelope/Detail.tsx b/src/components/Envelope/Detail.tsx
index 00774448..531f691e 100644
--- a/src/components/Envelope/Detail.tsx
+++ b/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 { VoteInfoResponse } from '@vocdoni/sdk'
+import { Flex, Image, Link, Tab, TabList, TabPanel, TabPanels, Text } from '@chakra-ui/react'
+import { Envelope, VotePackageType } from '@vocdoni/chakra-components'
+import { ElectionProvider, useElection } from '@vocdoni/react-providers'
+import { PublishedElection, 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 { DetailsGrid, GridItemProps } from '~components/Layout/DetailsGrid'
+import { RouteParamsTabs } from '~components/Layout/RouteParamsTabs'
+import { RawContentBox } from '~components/Layout/ShowRawButton'
+import { processIdGridItem } from '~components/Transactions/TxDetails/SpecificTxDetails'
import { RoutePath } from '~constants'
+import voteImage from '/images/vocdoni-vote.png'
-const EnvelopeDetail = (envelope: VoteInfoResponse) => {
+/**
+ * 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 (
-
- Envelope Detail
-
@@ -38,58 +47,126 @@ const EnvelopeDetail = (envelope: VoteInfoResponse) => {
-
-
-
- Emitted {{ emitted: emitted }}
-
-
- {encKeys && encKeys?.length > 0 && (
-
-
- Encryption keys: {{ encKeys: encKeys }}
-
-
- )}
- {envelope.overwriteCount > 0 && (
-
-
- Overwrite count: {{ overwriteCount: envelope.overwriteCount }}
-
-
- )}
-
-
- Envelope weight: {{ weight: envelope.weight }}
-
-
-
-
- ),
- }}
- values={{ block: envelope.blockHeight }}
- />
-
-
- ,
- }}
- values={{ pid: envelope.electionID }}
- />
-
-
-
+
+
+
+ Envelope Content
+
+
+ Details
+
+
+ Raw
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export const VotePackage = ({ votePackage }: { votePackage: VotePackageType }) => {
+ const { election } = useElection()
+ if (!election || !(election instanceof PublishedElection)) return null
+
+ return (
+
+
+
+ ,
+ }}
+ values={{ title: election.title.default }}
+ />
+
)
}
+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: {emitted},
+ },
+ ...(envelope.overwriteCount > 0
+ ? [
+ {
+ label: t('envelopes.overwrite_count', { defaultValue: 'Overwrite count' }),
+ children: envelope.overwriteCount,
+ },
+ ]
+ : []),
+ {
+ label: 'Overwrite count',
+ children: {envelope.overwriteCount},
+ },
+ ...(encKeys && encKeys?.length > 0
+ ? [
+ {
+ label: t('envelopes.encryption_keys', { defaultValue: 'Encryption keys' }),
+ children: encKeys,
+ },
+ ]
+ : []),
+ {
+ label: t('envelopes.envelope_weight', { defaultValue: 'Envelope weight' }),
+ children: {envelope.weight},
+ },
+ {
+ label: t('envelopes.committed_in_block', { defaultValue: 'Committed in block' }),
+ children: (
+
+ {envelope.blockHeight}
+
+ ),
+ },
+ {
+ label: t('envelopes.on_transaction', { defaultValue: 'On Transaction' }),
+ children: (
+
+ {envelope.txHash}
+
+ ),
+ },
+ { ...processIdGridItem(envelope.electionID, t) },
+ ]
+ return
+}
+
export default EnvelopeDetail
diff --git a/src/components/Layout/TopBar.tsx b/src/components/Layout/TopBar.tsx
index f536a712..d91f7e1e 100644
--- a/src/components/Layout/TopBar.tsx
+++ b/src/components/Layout/TopBar.tsx
@@ -72,7 +72,7 @@ export const TopBar = () => {
const rightLinks: HeaderLink[] = [
{
name: t('links.verify_vote', { defaultValue: 'Verify vote' }),
- url: generatePath(RoutePath.Verify, { verifier: null }),
+ url: generatePath(RoutePath.Verify, { verifier: null, tab: null }),
},
]
diff --git a/src/components/Process/Detail.tsx b/src/components/Process/Detail.tsx
index 8e27a730..a69b1770 100644
--- a/src/components/Process/Detail.tsx
+++ b/src/components/Process/Detail.tsx
@@ -280,7 +280,7 @@ const EnvelopeCard = ({ envelope, count }: { envelope: VoteSummary; count: numbe
-
+
Envelope nº {{ num: count }}
@@ -295,7 +295,7 @@ const EnvelopeCard = ({ envelope, count }: { envelope: VoteSummary; count: numbe
as={RouterLink}
to={generatePath(RoutePath.Block, { height: envelope.blockHeight.toString(), tab: null, page: null })}
>
-
+
Block {{ height: envelope.blockHeight }}
@@ -307,12 +307,12 @@ const EnvelopeCard = ({ envelope, count }: { envelope: VoteSummary; count: numbe
tab: null,
})}
>
-
+
Transaction: {{ transactionIndex: envelope.transactionIndex }}
-
- Details
+
+ Details
diff --git a/src/components/Transactions/TxDetails/SpecificTxDetails.tsx b/src/components/Transactions/TxDetails/SpecificTxDetails.tsx
index 9c9f966a..288829d1 100644
--- a/src/components/Transactions/TxDetails/SpecificTxDetails.tsx
+++ b/src/components/Transactions/TxDetails/SpecificTxDetails.tsx
@@ -1,5 +1,5 @@
import { Box, Code, Flex, Icon, Text } from '@chakra-ui/react'
-import { OrganizationProvider } from '@vocdoni/react-providers'
+import { ElectionProvider, OrganizationProvider } from '@vocdoni/react-providers'
import {
AdminTx,
ensure0x,
@@ -19,8 +19,9 @@ import { DetailsGrid, GridItemProps } from '~components/Layout/DetailsGrid'
import { SmallOrganizationCard } from '~components/Organizations/Card'
import { RoutePath } from '~constants'
import { b64ToHex } from '~utils/objects'
+import { VotePackage } from '~components/Envelope/Detail'
-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: (
@@ -84,6 +85,18 @@ const VoteTxDetails = ({ rawTx, votePackage, processId }: { rawTx: any } & VoteE
},
]
: []),
+ ...(votePackage
+ ? [
+ {
+ label: t('transactions.vote_sense', { defaultValue: 'Vote sense' }),
+ children: (
+
+
+
+ ),
+ },
+ ]
+ : []),
]
return
}
diff --git a/src/components/Verify/index.tsx b/src/components/Verify/index.tsx
index fe2f3014..3027091a 100644
--- a/src/components/Verify/index.tsx
+++ b/src/components/Verify/index.tsx
@@ -26,7 +26,7 @@ const SearchVote = ({ compact }: { compact?: boolean }) => {