Stage upgrade

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.1",
+    "@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"
   }
 }

src/App.tsx

@@ -1,10 +1,10 @@
 import { ColorModeScript } from '@chakra-ui/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ClientProvider } from '@vocdoni/chakra-components'
+import { ExtendedSDKClient } from '@vocdoni/extended-sdk'
 import { EnvOptions } from '@vocdoni/sdk'
-import { RoutesProvider } from './router'
 import { VocdoniEnvironment } from '~constants'
-import { ExtendedSDKClient } from '@vocdoni/extended-sdk'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { RoutesProvider } from './router'
 
 const queryClient = new QueryClient()
 

src/components/Accounts/Card.tsx

@@ -4,8 +4,8 @@ import { OrganizationProvider, useOrganization } from '@vocdoni/react-providers'
 import { Trans, useTranslation } from 'react-i18next'
 import { generatePath, Link as RouterLink } from 'react-router-dom'
 import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
-import { FallbackAccountImg, RoutePath } from '~constants'
 import LinkCard from '~components/Layout/LinkCard'
+import { FallbackAccountImg, RoutePath } from '~constants'
 
 type IAccountCardProps = {
   id?: string

src/components/Accounts/Detail.tsx

@@ -2,16 +2,16 @@ import { Tab, TabList, TabPanel, TabPanels, VStack } from '@chakra-ui/react'
 import { OrganizationHeader, OrganizationName } from '@vocdoni/chakra-components'
 import { useOrganization } from '@vocdoni/react-providers'
 import { Trans, useTranslation } from 'react-i18next'
+import AccountFees from '~components/Accounts/Details/Fees'
+import AccountTransfers from '~components/Accounts/Details/Transfers'
 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 TextAndTag from '~components/Layout/TextAndTag'
 import { FallbackHeaderImg, RoutePath } from '~constants'
-import AccountTransfers from '~components/Accounts/Details/Transfers'
-import AccountElections from './Details/Elections'
 import AccountDetails from './Details/AccountDetails'
-import AccountFees from '~components/Accounts/Details/Fees'
-import TextAndTag from '~components/Layout/TextAndTag'
+import AccountElections from './Details/Elections'
 
 const AccountDetail = () => {
   const { organization } = useOrganization()

src/components/Accounts/Details/AccountDetails.tsx

@@ -1,11 +1,11 @@
 import { Flex, Icon, Link } from '@chakra-ui/react'
 import { OrganizationDescription } from '@vocdoni/chakra-components'
+import { useOrganization } from '@vocdoni/react-providers'
 import { ensure0x } from '@vocdoni/sdk'
 import { Trans, useTranslation } from 'react-i18next'
 import { FaUserAlt } from 'react-icons/fa'
 import { DetailsGrid, GridItemProps } from '~components/Layout/DetailsGrid'
 import { AppBaseURL } from '~constants'
-import { useOrganization } from '@vocdoni/react-providers'
 
 const AccountDetails = () => {
   const { t } = useTranslation()

src/components/Accounts/Details/Elections.tsx

@@ -1,13 +1,11 @@
 import { Flex } from '@chakra-ui/react'
+import { RoutedPaginationProvider, useOrganization, useRoutedPagination } from '@vocdoni/react-providers'
 import { useTranslation } from 'react-i18next'
-import { LoadingCards } from '~components/Layout/Loading'
-import { RoutedPagination } from '~components/Pagination/Pagination'
-import { RoutedPaginationProvider, useRoutedPagination } from '~components/Pagination/PaginationProvider'
+import { PaginatedAsyncList } from '~components/Layout/AsyncList'
+import { NoResultsError } from '~components/Layout/ContentError'
 import { ElectionCard } from '~components/Process/Card'
 import { RoutePath } from '~constants'
 import { useOrganizationElections } from '~queries/accounts'
-import { ContentError, NoResultsError } from '~components/Layout/ContentError'
-import { useOrganization } from '@vocdoni/react-providers'
 
 const AccountElections = () => {
   const { t } = useTranslation()
@@ -30,34 +28,25 @@ const AccountElectionsList = () => {
   const { page }: { page?: number } = useRoutedPagination()
   const { organization } = useOrganization()
 
-  if (!organization) return null
-
   const { data, isLoading, isError, error } = useOrganizationElections({
-    address: organization.address,
+    address: organization?.address as string,
     page: page,
     options: {
-      enabled: !!organization.address,
+      enabled: !!organization?.address,
     },
   })
-
-  if (isLoading) {
-    return <LoadingCards />
-  }
-
-  if (data?.pagination.totalItems === 0) {
-    return <NoResultsError />
-  }
-
-  if (isError || !data) {
-    return <ContentError error={error} />
-  }
+  if (!organization) return null
 
   return (
     <Flex direction={'column'} gap={4}>
-      {data.elections?.map((election) => {
-        return <ElectionCard key={election.id} election={election} />
-      })}
-      <RoutedPagination pagination={data.pagination} />
+      <PaginatedAsyncList
+        isLoading={isLoading}
+        elements={data?.elections}
+        isError={isError}
+        error={error}
+        pagination={data?.pagination}
+        component={({ element }) => <ElectionCard key={element.id} election={element} />}
+      />
     </Flex>
   )
 }

src/components/Accounts/Details/Fees.tsx

@@ -1,112 +1,112 @@
-import { Box, Flex, Link, Table, TableContainer, Tbody, Td, Text, Th, Thead, Tr } from '@chakra-ui/react'
+import { Flex, Link, Skeleton, Td, Text, Th, Thead, Tr } from '@chakra-ui/react'
+import { PaginationProvider, useOrganization, usePagination } from '@vocdoni/react-providers'
+import { Fee, TransactionType } from '@vocdoni/sdk'
 import { Trans } from 'react-i18next'
-import { LoadingCards } from '~components/Layout/Loading'
-import { useDateFns } from '~i18n/use-date-fns'
-import { TransactionType } from '@vocdoni/sdk'
-import { PaginationProvider, usePagination } from '~components/Pagination/PaginationProvider'
-import { Pagination } from '~components/Pagination/Pagination'
-import { useAccountFees } from '~queries/accounts'
-import { TransactionTypeBadge } from '~components/Transactions/TransactionCard'
 import { generatePath, Link as RouterLink } from 'react-router-dom'
+import { PaginatedAsyncTable } from '~components/Layout/AsyncList'
+import { TransactionTypeBadge } from '~components/Transactions/TransactionCard'
 import { RoutePath } from '~constants'
-import { ContentError, NoResultsError } from '~components/Layout/ContentError'
-import { useOrganization } from '@vocdoni/react-providers'
+import { useDateFns } from '~i18n/use-date-fns'
+import { useAccountFees } from '~queries/accounts'
+import { generateListStub, PaginationStub } from '~utils/stubs'
 
-const AccountFees = () => {
-  return (
-    <PaginationProvider>
-      <AccountFeesTable />
-    </PaginationProvider>
-  )
-}
+const AccountFees = () => (
+  <PaginationProvider>
+    <AccountFeesTable />
+  </PaginationProvider>
+)
 
 const AccountFeesTable = () => {
   const { page } = usePagination()
-  const { formatDistance } = useDateFns()
   const { organization } = useOrganization()
 
-  if (!organization) return null
-
-  const feesCount = organization.feesCount ?? 0
+  const feesCount = organization?.feesCount ?? 0
 
-  const { data, isLoading, isError, error } = useAccountFees({
+  const { data, isError, error, isPlaceholderData } = useAccountFees({
     params: {
-      accountId: organization.address,
+      accountId: organization?.address as string,
       page,
     },
     options: {
       enabled: feesCount > 0,
+      placeholderData: {
+        fees: generateListStub<Fee>({
+          cost: 12,
+          from: 'string',
+          height: 12,
+          reference: 'string',
+          timestamp: '2024-08-28T15:20:06Z',
+          txType: 'string',
+        }),
+        pagination: PaginationStub,
+      },
     },
   })
 
-  if (isLoading) {
-    return <LoadingCards />
-  }
-
-  if (data?.pagination.totalItems === 0 || feesCount === 0) {
-    return <NoResultsError />
-  }
+  if (!organization) return null
 
-  if (isError || !data) {
-    return <ContentError error={error} />
-  }
+  return (
+    <PaginatedAsyncTable
+      isLoading={isPlaceholderData}
+      elements={data?.fees}
+      isError={isError}
+      error={error}
+      pagination={data?.pagination}
+      component={({ element }) => <AccountFeesRow fee={element} isLoading={isPlaceholderData} />}
+      skeletonProps={{ skeletonCircle: true }}
+      routedPagination={false}
+      th={
+        <Thead>
+          <Tr>
+            <Th>
+              <Trans i18nKey={'account.fees.tx_type'}>Tx Type</Trans>
+            </Th>
+            <Th>
+              <Trans i18nKey={'account.transfers.block'}>Block</Trans>
+            </Th>
+            <Th>
+              <Trans i18nKey={'account.fees.cost'}>Cost</Trans>
+            </Th>
+          </Tr>
+        </Thead>
+      }
+    />
+  )
+}
 
-  if (!data.fees.length) {
-    return (
-      <Text>
-        <Trans i18nKey={'account.fees.no_fees'}>No fees yet!</Trans>
-      </Text>
-    )
-  }
+const AccountFeesRow = ({ fee, isLoading }: { fee: Fee; isLoading: boolean }) => {
+  const { formatDistance } = useDateFns()
 
   return (
-    <>
-      <Box overflow='auto' w='auto'>
-        <TableContainer>
-          <Table>
-            <Thead>
-              <Tr>
-                <Th>
-                  <Trans i18nKey={'account.fees.tx_type'}>Tx Type</Trans>
-                </Th>
-                <Th>
-                  <Trans i18nKey={'account.transfers.block'}>Block</Trans>
-                </Th>
-                <Th>
-                  <Trans i18nKey={'account.fees.cost'}>Cost</Trans>
-                </Th>
-              </Tr>
-            </Thead>
-            <Tbody>
-              {data.fees.map((fee, i) => (
-                <Tr key={i}>
-                  <Td>
-                    <Flex direction={'column'} align={'start'} gap={3}>
-                      <TransactionTypeBadge transactionType={fee.txType as TransactionType} />
-                      <Text fontWeight={100} color={'lighterText'} fontSize={'sm'}>
-                        {formatDistance(new Date(fee.timestamp), new Date())}
-                      </Text>
-                    </Flex>
-                  </Td>
-                  <Td>
-                    <Link
-                      as={RouterLink}
-                      to={generatePath(RoutePath.Block, { height: fee.height.toString(), tab: null, page: null })}
-                    >
-                      {fee.height}
-                    </Link>
-                  </Td>
-                  <Td>{fee.cost}</Td>
-                </Tr>
-              ))}
-            </Tbody>
-          </Table>
-        </TableContainer>
-      </Box>
-      <Box pt={4}>
-        <Pagination pagination={data.pagination} />
-      </Box>
-    </>
+    <Tr>
+      <Td>
+        <Flex direction={'column'} align={'start'} gap={3}>
+          <Skeleton isLoaded={!isLoading} fitContent>
+            <TransactionTypeBadge transactionType={fee.txType as TransactionType} />
+          </Skeleton>
+          <Skeleton isLoaded={!isLoading} fitContent>
+            <Text fontWeight={100} color={'lighterText'} fontSize={'sm'}>
+              {formatDistance(new Date(fee.timestamp), new Date())}
+            </Text>
+          </Skeleton>
+        </Flex>
+      </Td>
+      <Td>
+        <Skeleton isLoaded={!isLoading} fitContent>
+          <Link
+            as={RouterLink}
+            to={generatePath(RoutePath.Block, { height: fee.height.toString(), tab: null, page: null })}
+          >
+            {fee.height}
+          </Link>
+        </Skeleton>
+      </Td>
+      <Td>
+        <Skeleton isLoaded={!isLoading} fitContent>
+          {fee.cost}
+        </Skeleton>
+      </Td>
+    </Tr>
   )
 }