Bump vocdoni packages (#125)

* Bump vocdoni packages * Fix deprecated api methods * Fix new types * Fix tx subtype * Fix tx_title * Fix tx card layout * Fix tx card layout
vocdoni · Sep 6, 2024 · ecdd1e0 · ecdd1e0 · github-actions · Sep 6, 2024
1 parent 00fe05b
commit ecdd1e0
Show file tree

Hide file tree

Showing 21 changed files with 1,213 additions and 421 deletions.
diff --git a/package.json b/package.json
@@ -18,9 +18,9 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@tanstack/react-query": "^5.40.0",
-    "@vocdoni/chakra-components": "~0.8.1",
-    "@vocdoni/extended-sdk": "^0.1.3",
-    "@vocdoni/sdk": "https://github.com/vocdoni/vocdoni-sdk.git#main",
+    "@vocdoni/chakra-components": "~0.9.0",
+    "@vocdoni/extended-sdk": "~0.2.0",
+    "@vocdoni/sdk": "~0.9.0",
     "date-fns": "^2.29.3",
     "ethers": "^5.7.2",
     "framer-motion": "^10.9.2",
@@ -55,6 +55,6 @@
     "node": "20.x"
   },
   "resolutions": {
-    "@vocdoni/sdk": "https://github.com/vocdoni/vocdoni-sdk.git#main"
+    "@vocdoni/sdk": "~0.9.0"
   }
 }
diff --git a/src/components/Accounts/Details/Transfers.tsx b/src/components/Accounts/Details/Transfers.tsx
@@ -128,7 +128,7 @@ const TransfersRow = ({
               toCopy={transfer.txHash}
               fontWeight={'normal'}
               fontSize={'sm'}
-              to={generatePath(RoutePath.TransactionByHashOrHeight, { hashOrHeight: transfer.txHash })}
+              to={generatePath(RoutePath.TransactionByHash, { hash: transfer.txHash, tab: null })}
             >
               {transfer.txHash}
             </ReducedTextAndCopy>

diff --git a/src/components/Blocks/BlockCard.tsx b/src/components/Blocks/BlockCard.tsx
@@ -1,31 +1,23 @@
-import { Box, Card, CardBody, Flex, Link, HStack, Icon, Text } from '@chakra-ui/react'
-import { BlockError, BlockNotFoundError } from '@vocdoni/extended-sdk'
-import { IChainBlockInfoResponse } from '@vocdoni/sdk'
-import { Trans, useTranslation } from 'react-i18next'
-import { BiTransferAlt } from 'react-icons/bi'
+import { Box, CardBody, Flex, HStack, Icon, Text } from '@chakra-ui/react'
+import { IBlock } from '@vocdoni/sdk'
+import { Trans } from 'react-i18next'
 
-import { generatePath, Link as RouterLink } from 'react-router-dom'
+import { generatePath } from 'react-router-dom'
 import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
 import LinkCard from '~components/Layout/LinkCard'
 import { RoutePath } from '~constants'
 import { useDateFns } from '~i18n/use-date-fns'
 import { Icons } from '~src/theme/components/Icons'
 
 interface IBlockCardProps {
-  block: IChainBlockInfoResponse | BlockError
+  block: IBlock
   compact?: boolean
 }
 
 export const BlockCard = ({ block, compact = false }: IBlockCardProps) => {
   const { formatDistance } = useDateFns()
-  if (block instanceof BlockError) return <BlockErrorCard error={block} height={block.height} />
 
-  const height = block.header.height
-  const time = block.header.time
-  const proposer = block.header.proposerAddress
-  // Not on the SDK yet
-  // @ts-ignore
-  const txn = block.txCount
+  const { height, time, proposer, txCount } = block
 
   const date = new Date(time)
 
@@ -38,7 +30,7 @@ export const BlockCard = ({ block, compact = false }: IBlockCardProps) => {
             <HStack spacing={1}>
               <Icon as={Icons.TxIcon} boxSize={5} />
               <Text fontSize={'sm'} fontWeight={'bold'}>
-                {txn}
+                {txCount}
               </Text>
             </HStack>
             <Text fontWeight={100} color={'lighterText'}>
@@ -62,21 +54,3 @@ export const BlockCard = ({ block, compact = false }: IBlockCardProps) => {
     </LinkCard>
   )
 }
-
-const BlockErrorCard = ({ height, error }: { height: number; error: BlockError }) => {
-  const { t } = useTranslation()
-
-  let message = error.message
-  if (error instanceof BlockNotFoundError) {
-    message = t('blocks.block_not_found')
-  }
-
-  return (
-    <Card>
-      <CardBody>
-        <Text fontWeight='bold'># {height}</Text>
-        <Text wordBreak='break-word'>{message}</Text>
-      </CardBody>
-    </Card>
-  )
-}
diff --git a/src/components/Blocks/BlocksList.tsx b/src/components/Blocks/BlocksList.tsx
@@ -3,12 +3,12 @@ import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { generatePath, useNavigate } from 'react-router-dom'
 import { BlockCard } from '~components/Blocks/BlockCard'
+import { PaginatedAsyncList } from '~components/Layout/AsyncList'
 import { PopoverInputSearch } from '~components/Layout/Inputs'
 import { RoutedPaginationProvider, useRoutedPagination } from '~components/Pagination/PaginationProvider'
 import { PaginationItemsPerPage, RefreshIntervalBlocks, RoutePath } from '~constants'
 import { useBlockList } from '~queries/blocks'
 import { useChainInfo } from '~queries/stats'
-import { PaginatedAsyncList } from '~components/Layout/AsyncList'
 
 export const BlocksFilter = () => {
   const { t } = useTranslation()
@@ -67,7 +67,6 @@ export const BlocksList = () => {
     error,
   } = useBlockList({
     params: {
-      totalItems: blockCount,
       page: page,
       limit: PaginationItemsPerPage,
     },

diff --git a/src/components/Blocks/Detail.tsx b/src/components/Blocks/Detail.tsx
@@ -7,11 +7,11 @@ import { 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 TextAndTag from '~components/Layout/TextAndTag'
 import { PaginatedBlockTransactionsList } from '~components/Transactions/TransactionList'
 import { RefreshIntervalBlocks, RoutePath } from '~constants'
 import { useDateFns } from '~i18n/use-date-fns'
 import { useBlocksHeight } from '~queries/blocks'
-import TextAndTag from '~components/Layout/TextAndTag'
 
 const HeightNavigator = ({ height }: { height: number }) => {
   const { data, isLoading } = useBlocksHeight({
@@ -117,8 +117,6 @@ const DetailsTab = ({ block }: { block: IChainBlockInfoResponse }) => {
 export const BlockDetail = ({ block }: { block: IChainBlockInfoResponse }) => {
   const height = block.header.height
   const date = new Date(block.header.time)
-  // Not on the SDK yet
-  // @ts-ignore
   const txCount = block.txCount
 
   const { t } = useTranslation()
@@ -142,7 +140,10 @@ export const BlockDetail = ({ block }: { block: IChainBlockInfoResponse }) => {
             <Trans i18nKey={'process.tab_details'}>Details</Trans>
           </Tab>
           <Tab>
-            <TextAndTag text={t('process.tab_txs', { defaultValue: 'Transactions' })} tagLabel={txCount ?? '0'} />
+            <TextAndTag
+              text={t('process.tab_txs', { defaultValue: 'Transactions' })}
+              tagLabel={txCount.toString() ?? '0'}
+            />
           </Tab>
           <Tab>
             <Trans i18nKey={'raw'}>Raw</Trans>

diff --git a/src/components/Process/Card.tsx b/src/components/Process/Card.tsx
@@ -1,17 +1,17 @@
 import { CardBody, CardProps, Flex, HStack } from '@chakra-ui/react'
 import { ElectionSchedule, ElectionTitle } from '@vocdoni/chakra-components'
 import { ElectionProvider, OrganizationProvider, useElection } from '@vocdoni/react-providers'
-import { ArchivedElection, InvalidElection as InvalidElectionType, PublishedElection } from '@vocdoni/sdk'
+import { InvalidElection as InvalidElectionType, PublishedElection } from '@vocdoni/sdk'
 import { generatePath } from 'react-router-dom'
+import { SmallAccountCard } from '~components/Accounts/Card'
 import { ElectionStatusBadge } from '~components/Accounts/StatusBadge'
+import LinkCard from '~components/Layout/LinkCard'
 import InvalidElection from '~components/Process/InvalidElection'
 import { RoutePath } from '~constants'
-import { SmallAccountCard } from '~components/Accounts/Card'
-import LinkCard from '~components/Layout/LinkCard'
 
 export type ElectionCardProps = {
   id?: string
-  election?: PublishedElection | ArchivedElection | InvalidElectionType
+  election?: PublishedElection | InvalidElectionType
 } & CardProps
 
 /**

diff --git a/src/components/Process/Detail.tsx b/src/components/Process/Detail.tsx
@@ -26,18 +26,18 @@ import {
 import { useElection } from '@vocdoni/react-providers'
 import { ElectionStatus, IElectionInfoResponse, InvalidElection as InvalidElectionType } from '@vocdoni/sdk'
 import { Trans, useTranslation } from 'react-i18next'
+import { AccountCard } from '~components/Accounts/Card'
+import { ElectionStatusBadge } from '~components/Accounts/StatusBadge'
+import { PaginatedEnvelopeList } from '~components/Envelope/EnvelopeList'
+import { NoResultsError } from '~components/Layout/ContentError'
 import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
 import { HeroHeaderLayout } from '~components/Layout/HeroHeaderLayout'
+import { RouteParamsTabs } from '~components/Layout/RouteParamsTabs'
 import { RawContentBox } from '~components/Layout/ShowRawButton'
-import { AccountCard } from '~components/Accounts/Card'
-import { ElectionStatusBadge } from '~components/Accounts/StatusBadge'
 import InvalidElection from '~components/Process/InvalidElection'
 import { FallbackHeaderImg, RoutePath } from '~constants'
 import { useElectionKeys } from '~queries/processes'
 import { ucfirst } from '~utils/strings'
-import { RouteParamsTabs } from '~components/Layout/RouteParamsTabs'
-import { NoResultsError } from '~components/Layout/ContentError'
-import { PaginatedEnvelopeList } from '~components/Envelope/EnvelopeList'
 
 const Detail = () => {
   const { election } = useElection()
@@ -52,9 +52,6 @@ const Detail = () => {
 
   const raw = election.raw as IElectionInfoResponse
   const censusOrigin = ucfirst(raw.census.censusOrigin.replace('_', ' ').toLocaleLowerCase())
-  const autoStart = raw.electionMode.autoStart
-    ? t('processes.process_mode_badge.autostart')
-    : t('processes.process_mode_badge.notAutostart')
   const encryptedVotes = raw.voteMode.encryptedVotes
     ? t('processes.envelope_type_badge.encrypted_votes')
     : t('processes.envelope_type_badge.not_encrypted_votes')
@@ -96,18 +93,12 @@ const Detail = () => {
       {/*Information tags */}
       <Flex wrap={'wrap'} gap={2}>
         <QuestionsTypeBadge />
-        {election.fromArchive && (
-          <Tag variant={'vocdoni'}>
-            <Trans i18nKey={'process.badge.archive'}>From archive</Trans>
-          </Tag>
-        )}
         {raw.voteMode.anonymous && (
           <Tag variant={'vocdoni'}>
             <Trans i18nKey={'process.badge.anonymous'}>Anonymous</Trans>
           </Tag>
         )}
         <Tag variant={'vocdoni'}>{censusOrigin}</Tag>
-        <Tag variant={'vocdoni'}>{autoStart}</Tag>
         <Tag variant={'vocdoni'}>{encryptedVotes}</Tag>
       </Flex>
       {/*Organization card and other cards*/}

diff --git a/src/components/Stats/LatestBlocks.tsx b/src/components/Stats/LatestBlocks.tsx
@@ -3,11 +3,11 @@ import { keepPreviousData } from '@tanstack/react-query'
 import { Trans } from 'react-i18next'
 import { generatePath, Link as RouterLink } from 'react-router-dom'
 import { BlockCard } from '~components/Blocks/BlockCard'
+import { ContentError } from '~components/Layout/ContentError'
 import { LoadingCards } from '~components/Layout/Loading'
 import { RoutePath } from '~constants'
 import { useBlockList } from '~queries/blocks'
 import { useChainInfo } from '~queries/stats'
-import { ContentError } from '~components/Layout/ContentError'
 
 export const LatestBlocks = () => {
   const blockListSize = 3
@@ -22,7 +22,6 @@ export const LatestBlocks = () => {
     params: {
       page: 0,
       limit: blockListSize,
-      totalItems: stats?.height ?? 0,
     },
     enabled: !!stats?.height,
     placeholderData: keepPreviousData,

diff --git a/src/components/Transactions/Detail.tsx b/src/components/Transactions/Detail.tsx
@@ -5,13 +5,13 @@ import { RouteParamsTabs } from '~components/Layout/RouteParamsTabs'
 import { RawContentBox } from '~components/Layout/ShowRawButton'
 import { SpecificTxDetails } from '~components/Transactions/TxDetails/SpecificTxDetails'
 import { TxDetailsGrid } from '~components/Transactions/TxDetails/TxDetails'
+import { RoutePath } from '~constants'
 import { useDateFns } from '~i18n/use-date-fns'
 import { useBlockToDate } from '~queries/stats'
 import { objectB64StringsToHex } from '~utils/objects'
-import { RoutePath } from '~constants'
 
 export const TransactionDetail = (tx: Tx) => {
-  const { data } = useBlockToDate({ height: tx.txInfo.blockHeight })
+  const { data } = useBlockToDate({ height: tx.txInfo.height })
   const { formatDistance } = useDateFns()
 
   let createdOn = ''
@@ -33,8 +33,8 @@ export const TransactionDetail = (tx: Tx) => {
     <Flex direction={'column'} mt={'40px'} gap={6}>
       <VStack align='start'>
         <Heading isTruncated wordBreak='break-word' mb={0}>
-          <Trans i18nKey={'transactions.tx_title'} number={tx.txInfo.transactionNumber}>
-            Transaction #{{ number: tx.txInfo.transactionNumber }}
+          <Trans i18nKey={'transactions.tx_title'} number={tx.txInfo.index}>
+            Transaction details
           </Trans>
         </Heading>
         {createdOn && (

diff --git a/src/components/Transactions/TransactionCard.tsx b/src/components/Transactions/TransactionCard.tsx
@@ -1,45 +1,62 @@
-import { Box, CardBody, Flex, Tag, Text } from '@chakra-ui/react'
-import { IChainTxReference, TransactionType } from '@vocdoni/sdk'
-import { Trans } from 'react-i18next'
+import { Box, CardBody, Flex, Icon, Tag, Text } from '@chakra-ui/react'
+import { IChainTxReference } from '@vocdoni/sdk'
 import { generatePath } from 'react-router-dom'
 import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
-import { RoutePath } from '~constants'
-import LinkCard from '~components/Layout/LinkCard'
 import { BlockIconLink } from '~components/Layout/IconLink'
+import LinkCard from '~components/Layout/LinkCard'
+import { RoutePath } from '~constants'
+import { useDateFns } from '~i18n/use-date-fns'
+import { useBlockToDate } from '~queries/stats'
+import { Icons } from '~src/theme/components/Icons'
 
-export const TransactionTypeBadge = ({ transactionType }: { transactionType: TransactionType }) => {
+export const TransactionTypeBadge = ({ transactionType }: { transactionType: string }) => {
   return (
     <Tag bg={'#f3fccc'} color={'#74af07'} variant={'vocdoni'}>
       {transactionType}
     </Tag>
   )
 }
 
-export const TransactionCard = ({
-  transactionIndex,
-  transactionType,
-  transactionNumber,
-  transactionHash,
-  blockHeight,
-}: IChainTxReference) => {
+export const TransactionCard = ({ index, hash, height, subtype, type }: IChainTxReference) => {
+  const { formatDistance } = useDateFns()
+
+  let _type = subtype
+  if (!subtype || subtype === '') _type = type
+
+  const { data } = useBlockToDate({ height })
+  let date: Date | undefined
+  if (data?.date) {
+    date = new Date(data.date)
+  }
+
   return (
     <LinkCard
       to={generatePath(RoutePath.Transaction, {
-        block: blockHeight.toString(),
-        index: transactionIndex.toString(),
+        block: height.toString(),
+        index: index.toString(),
         tab: null,
       })}
     >
       <CardBody>
         <Flex gap={3} direction={'column'}>
           <Flex gap={2}>
-            <TransactionTypeBadge transactionType={transactionType} />
-            <BlockIconLink height={blockHeight} />
+            <TransactionTypeBadge transactionType={_type} />
+            {date && (
+              <Text fontWeight={100} color={'lighterText'}>
+                {formatDistance(date, new Date())}
+              </Text>
+            )}
           </Flex>
-          <Text fontWeight='bold'># {transactionNumber}</Text>
+
+          <Flex align='center' gap={2}>
+            <Icon as={Icons.TxIcon} />
+            <Box>{index}</Box>
+            <BlockIconLink height={height} />
+          </Flex>
+
           <Flex gap={2} align={'center'}>
-            <ReducedTextAndCopy fontSize={'sm'} color={'textAccent1'} toCopy={transactionHash}>
-              {transactionHash}
+            <ReducedTextAndCopy fontSize={'sm'} color={'textAccent1'} toCopy={hash}>
+              {hash}
             </ReducedTextAndCopy>
           </Flex>
         </Flex>