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 - {t('envelopes.vote_registered')} @@ -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 }) => {