Implement tx vote sense

vocdoni · Aug 9, 2024 · 3357319 · 3357319
1 parent bcdd877
commit 3357319
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 17 deletions.
diff --git a/src/components/Envelope/Detail.tsx b/src/components/Envelope/Detail.tsx
@@ -1,17 +1,17 @@
 import voteImage from '/images/vocdoni-vote.png'
-import { Flex, Image, Link, Tab, TabList, TabPanel, TabPanels, Text } from '@chakra-ui/react'
-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, 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, VotePackageType } from '@vocdoni/chakra-components'
-import { ElectionProvider, useElection } from '@vocdoni/react-providers'
+import {Flex, Image, Link, Tab, TabList, TabPanel, TabPanels, Text} from '@chakra-ui/react'
+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, 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, VotePackageType} from '@vocdoni/chakra-components'
+import {ElectionProvider, useElection} from '@vocdoni/react-providers'
 
 /**
  * Show envelope content
@@ -77,13 +77,13 @@ const EnvelopeDetail = ({
   )
 }
 
-const VotePackage = ({ votePackage }: { votePackage: VotePackageType }) => {
+export const VotePackage = ({ votePackage }: { votePackage: VotePackageType }) => {
   const { t } = useTranslation()
   const { election } = useElection()
   if (!election || !(election instanceof PublishedElection)) return null
 
   return (
-    <>
+    <Flex direction={'column'}>
       <Envelope votePackage={votePackage} />
       <Text fontSize={'sm'} as='i'>
         <Trans
@@ -94,7 +94,7 @@ const VotePackage = ({ votePackage }: { votePackage: VotePackageType }) => {
           values={{ title: election.title.default }}
         />
       </Text>
-    </>
+    </Flex>
   )
 }
 

diff --git 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,6 +19,7 @@ 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'
 
 export const processIdGridItem = (processId: string, t: TFunction): GridItemProps => {
   return {
@@ -84,6 +85,18 @@ const VoteTxDetails = ({ rawTx, votePackage, processId }: { rawTx: any } & VoteE
           },
         ]
       : []),
+    ...(votePackage
+      ? [
+          {
+            label: t('transactions.vote_sense', { defaultValue: 'Vote sense' }),
+            children: (
+              <ElectionProvider id={process}>
+                <VotePackage votePackage={JSON.parse(votePackage)} />
+              </ElectionProvider>
+            ),
+          },
+        ]
+      : []),
   ]
   return <DetailsGrid details={details} />
 }