Revert "chakra-components pagination (#126)"

This reverts commit 7a6101a.

package.json

@@ -18,7 +18,7 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@tanstack/react-query": "^5.40.0",
-    "@vocdoni/chakra-components": "~0.9.2",
+    "@vocdoni/chakra-components": "~0.9.0",
     "@vocdoni/extended-sdk": "~0.2.0",
     "@vocdoni/sdk": "~0.9.0",
     "date-fns": "^2.29.3",

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 { VocdoniEnvironment } from '~constants'
 import { RoutesProvider } from './router'
+import { VocdoniEnvironment } from '~constants'
+import { ExtendedSDKClient } from '@vocdoni/extended-sdk'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 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 LinkCard from '~components/Layout/LinkCard'
 import { FallbackAccountImg, RoutePath } from '~constants'
+import LinkCard from '~components/Layout/LinkCard'
 
 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 AccountDetails from './Details/AccountDetails'
+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'
 
 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,11 +1,12 @@
 import { Flex } from '@chakra-ui/react'
-import { RoutedPaginationProvider, useOrganization, useRoutedPagination } from '@vocdoni/react-providers'
 import { useTranslation } from 'react-i18next'
-import { PaginatedAsyncList } from '~components/Layout/AsyncList'
-import { NoResultsError } from '~components/Layout/ContentError'
+import { RoutedPaginationProvider, useRoutedPagination } from '~components/Pagination/PaginationProvider'
 import { ElectionCard } from '~components/Process/Card'
 import { RoutePath } from '~constants'
 import { useOrganizationElections } from '~queries/accounts'
+import { NoResultsError } from '~components/Layout/ContentError'
+import { useOrganization } from '@vocdoni/react-providers'
+import { PaginatedAsyncList } from '~components/Layout/AsyncList'
 
 const AccountElections = () => {
   const { t } = useTranslation()
@@ -28,14 +29,15 @@ const AccountElectionsList = () => {
   const { page }: { page?: number } = useRoutedPagination()
   const { organization } = useOrganization()
 
+  if (!organization) return null
+
   const { data, isLoading, isError, error } = useOrganizationElections({
-    address: organization?.address as string,
+    address: organization.address,
     page: page,
     options: {
-      enabled: !!organization?.address,
+      enabled: !!organization.address,
     },
   })
-  if (!organization) return null
 
   return (
     <Flex direction={'column'} gap={4}>

src/components/Accounts/Details/Fees.tsx

@@ -1,30 +1,35 @@
 import { Flex, Link, Skeleton, Td, Text, Th, Thead, Tr } from '@chakra-ui/react'
-import { PaginationProvider, useOrganization, usePagination } from '@vocdoni/react-providers'
+import { useOrganization } from '@vocdoni/react-providers'
 import { Fee, TransactionType } from '@vocdoni/sdk'
 import { Trans } from 'react-i18next'
 import { generatePath, Link as RouterLink } from 'react-router-dom'
 import { PaginatedAsyncTable } from '~components/Layout/AsyncList'
+import { PaginationProvider, usePagination } from '~components/Pagination/PaginationProvider'
 import { TransactionTypeBadge } from '~components/Transactions/TransactionCard'
 import { RoutePath } from '~constants'
 import { useDateFns } from '~i18n/use-date-fns'
 import { useAccountFees } from '~queries/accounts'
 import { generateListStub, PaginationStub } from '~utils/stubs'
 
-const AccountFees = () => (
-  <PaginationProvider>
-    <AccountFeesTable />
-  </PaginationProvider>
-)
+const AccountFees = () => {
+  return (
+    <PaginationProvider>
+      <AccountFeesTable />
+    </PaginationProvider>
+  )
+}
 
 const AccountFeesTable = () => {
   const { page } = usePagination()
   const { organization } = useOrganization()
 
-  const feesCount = organization?.feesCount ?? 0
+  if (!organization) return null
+
+  const feesCount = organization.feesCount ?? 0
 
   const { data, isError, error, isPlaceholderData } = useAccountFees({
     params: {
-      accountId: organization?.address as string,
+      accountId: organization.address,
       page,
     },
     options: {
@@ -43,8 +48,6 @@ const AccountFeesTable = () => {
     },
   })
 
-  if (!organization) return null
-
   return (
     <PaginatedAsyncTable
       isLoading={isPlaceholderData}

src/components/Accounts/Details/Transfers.tsx

@@ -1,13 +1,15 @@
 import { Box, Flex, Icon, IconProps, Link, Skeleton, Td, Text, Th, Thead, Tooltip, Tr } from '@chakra-ui/react'
-import { PaginationProvider, useOrganization, usePagination } from '@vocdoni/react-providers'
+import { useOrganization } from '@vocdoni/react-providers'
 import { AccountData, ITransfer } from '@vocdoni/sdk'
 import { formatDistance } from 'date-fns'
 import { Trans, useTranslation } from 'react-i18next'
 import { BiLogInCircle, BiLogOutCircle } from 'react-icons/bi'
 import { generatePath, Link as RouterLink } from 'react-router-dom'
 import { PaginatedAsyncTable } from '~components/Layout/AsyncList'
 import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
+import { PaginationProvider, usePagination } from '~components/Pagination/PaginationProvider'
 import { RoutePath } from '~constants'
+import { useDateFns } from '~i18n/use-date-fns'
 import { useAccountTransfers } from '~queries/accounts'
 import { generateListStub, PaginationStub } from '~utils/stubs'
 
@@ -32,23 +34,29 @@ const FromToIcon = ({ isIncoming, ...rest }: { isIncoming: boolean } & IconProps
   )
 }
 
-const AccountTransfers = () => (
-  <PaginationProvider>
-    <AccountTransfersTable />
-  </PaginationProvider>
-)
+const AccountTransfers = () => {
+  return (
+    <PaginationProvider>
+      <AccountTransfersTable />
+    </PaginationProvider>
+  )
+}
 
 const AccountTransfersTable = () => {
   const { page } = usePagination()
+  const { formatDistance } = useDateFns()
+  const { t } = useTranslation()
   const { organization } = useOrganization()
 
-  const txCount = organization?.transfersCount ?? 0
+  if (!organization) return null
+
+  const txCount = organization.transfersCount ?? 0
 
   const { data, isError, error, isPlaceholderData } = useAccountTransfers({
-    address: organization?.address as string,
+    address: organization.address,
     page: page,
     options: {
-      enabled: !!organization && txCount > 0,
+      enabled: txCount > 0,
       placeholderData: {
         transfers: generateListStub<ITransfer>({
           amount: 12,
@@ -63,8 +71,6 @@ const AccountTransfersTable = () => {
     },
   })
 
-  if (!organization) return null
-
   return (
     <PaginatedAsyncTable
       isLoading={isPlaceholderData}

src/components/Accounts/List.tsx

@@ -1,11 +1,11 @@
 import { keepPreviousData } from '@tanstack/react-query'
-import { useRoutedPagination } from '@vocdoni/react-providers'
 import { useTranslation } from 'react-i18next'
-import { AccountCard } from '~components/Accounts/Card'
-import { PaginatedAsyncList } from '~components/Layout/AsyncList'
 import { InputSearch } from '~components/Layout/Inputs'
+import { AccountCard } from '~components/Accounts/Card'
+import { useRoutedPagination } from '~components/Pagination/PaginationProvider'
 import { useOrganizationList } from '~queries/accounts'
 import { useRoutedPaginationQueryParams } from '~src/router/use-query-params'
+import { PaginatedAsyncList } from '~components/Layout/AsyncList'
 
 type FilterQueryParams = {
   accountId?: string

src/components/Blocks/BlocksList.tsx

@@ -1,11 +1,11 @@
 import { keepPreviousData } from '@tanstack/react-query'
-import { RoutedPaginationProvider, useRoutedPagination } from '@vocdoni/react-providers'
 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'
@@ -14,7 +14,7 @@ export const BlocksFilter = () => {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const [blockHeight, setBlockHeight] = useState('')
-  const { data: stats } = useChainInfo()
+  const { data: stats, isLoading: isLoadingStats } = useChainInfo()
 
   const blockCount = stats?.height || 0
 
@@ -27,7 +27,7 @@ export const BlocksFilter = () => {
       throw new Error(t('blocks.invalid_block_search', { defaultValue: 'Must to be a valid block height' }))
     }
     navigate(generatePath(RoutePath.Block, { height: num.toString(), tab: null, page: null }))
-  }, [blockHeight, blockCount, navigate, t])
+  }, [blockHeight, blockCount])
 
   return (
     <PopoverInputSearch
@@ -58,6 +58,8 @@ export const BlocksList = () => {
     refetchInterval: RefreshIntervalBlocks,
   })
 
+  const blockCount = stats?.height || 0
+
   const {
     data,
     isLoading: isLoadingBlocks,

src/components/Envelope/EnvelopeList.tsx

@@ -1,13 +1,14 @@
 import { Flex, Grid } from '@chakra-ui/react'
-import { Pagination } from '@vocdoni/chakra-components'
-import { PaginationProvider, useElection, usePagination } from '@vocdoni/react-providers'
+import { useElection } from '@vocdoni/react-providers'
 import { PublishedElection, VoteSummary } from '@vocdoni/sdk'
 import { useTranslation } from 'react-i18next'
 import { ListDataDisplay } from '~components/Layout/AsyncList'
 import { NoResultsError } from '~components/Layout/ContentError'
+import { Pagination } from '~components/Pagination/Pagination'
+import { PaginationProvider, usePagination } from '~components/Pagination/PaginationProvider'
 import { useElectionVotesList } from '~queries/processes'
-import { generateListStub, PaginationStub } from '~utils/stubs'
 import { EnvelopeCard } from './EnvelopeCard'
+import { generateListStub, PaginationStub } from '~utils/stubs'
 
 export const PaginatedEnvelopeList = () => {
   const { election: e } = useElection()

src/components/Layout/AsyncList.tsx

@@ -1,8 +1,15 @@
 import { Box, Table, TableContainer, Tbody } from '@chakra-ui/react'
+import { PaginationResponse } from '@vocdoni/sdk'
 import { PropsWithChildren, ReactNode, useMemo } from 'react'
 import { ContentError, NoResultsError } from '~components/Layout/ContentError'
 import { LoadingCards, SkeletonCardsProps } from '~components/Layout/Loading'
-import { AsyncListPaginationProps, PaginatorSelector } from './RoutedPagination'
+import { Pagination } from '~components/Pagination/Pagination'
+import { RoutedPagination } from '~components/Pagination/RoutedPagination'
+
+type AsyncListPaginationProps = {
+  pagination?: Pick<PaginationResponse, 'pagination'>['pagination']
+  routedPagination?: boolean
+}
 
 type AsyncListLayoutProps<T> = {
   elements?: T[] | null | undefined
@@ -13,6 +20,12 @@ type AsyncListLayoutProps<T> = {
   isLoading?: boolean
 } & PropsWithChildren
 
+const PaginatorSelector = ({ routedPagination = true, pagination }: AsyncListPaginationProps) => {
+  if (!pagination) return null
+  if (routedPagination) return <RoutedPagination pagination={pagination} />
+  return <Pagination pagination={pagination} />
+}
+
 export const ListDataDisplay = <T,>({ elements, isError, error, noResultsMsg, children }: AsyncListLayoutProps<T>) => {
   if (isError) {
     return <ContentError error={error} />
@@ -37,15 +50,15 @@ export const PaginatedAsyncList = <T,>({
   component: React.ComponentType<{ element: T; index: number }>
 } & AsyncListLayoutProps<T> &
   AsyncListPaginationProps) => {
-  const memoizedComponents = useMemo(
-    () => elements?.map((element, index) => <Component key={index} element={element} index={index} />),
-    [Component, elements]
-  )
-
   if (isLoading) {
     return <LoadingCards spacing={4} {...skeletonProps} />
   }
 
+  const memoizedComponents = useMemo(
+    () => elements?.map((element, index) => <Component key={index} element={element} index={index} />),
+    [elements]
+  )
+
   return (
     <ListDataDisplay elements={elements} {...rest}>
       {memoizedComponents}
@@ -71,7 +84,7 @@ export const PaginatedAsyncTable = <T,>({
   AsyncListPaginationProps) => {
   const memoizedComponents = useMemo(
     () => elements?.map((element, index) => <Component key={index} element={element} index={index} />),
-    [Component, elements]
+    [elements]
   )
 
   return (

src/components/Layout/ContentError.tsx

@@ -1,4 +1,4 @@
-import { Alert, AlertIcon, Code, Stack } from '@chakra-ui/react'
+import { Alert, AlertIcon, Code, Stack, Text } from '@chakra-ui/react'
 import { Trans, useTranslation } from 'react-i18next'
 
 export const NoResultsError = ({ msg }: { msg?: string }) => {

src/components/Layout/CopyButton.tsx

@@ -64,9 +64,8 @@ export const ReducedTextAndCopy = ({
   ...rest
 }: ReducedTextAndCopyProps) => {
   let text = children
-  const bpv = useBreakpointValue(breakPoint)
   // If breakpoint is true and the length of the string is more than 13 it shorts the string
-  if (breakPoint && bpv && children.length > 13) {
+  if (breakPoint && useBreakpointValue(breakPoint) && children.length > 13) {
     text = shortStr(children)
   }
 

src/components/Layout/IconLink.tsx

@@ -1,8 +1,8 @@
-import { Box, Flex, Icon, IconProps, Link } from '@chakra-ui/react'
-import { PropsWithChildren } from 'react'
-import { IconType } from 'react-icons'
+import { Box, Flex, Icon, IconProps, Link, Text } from '@chakra-ui/react'
 import { generatePath, Link as RouterLink } from 'react-router-dom'
+import { PropsWithChildren } from 'react'
 import { RoutePath } from '~constants'
+import { IconType } from 'react-icons'
 import { Icons } from '~src/theme/components/Icons'
 
 export const TxIconLink = ({ block, index }: { block: number; index: number }) => (

src/components/Layout/RouteParamsTabs.tsx

@@ -1,9 +1,9 @@
-import { Tabs } from '@chakra-ui/react'
 import { TabsProps } from '@chakra-ui/tabs/dist/tabs'
 import { useEffect, useState } from 'react'
+import { Tabs } from '@chakra-ui/react'
+import useQueryParams from '~src/router/use-query-params'
 import { generatePath, useLocation, useNavigate, useParams } from 'react-router-dom'
 import { RoutePath } from '~constants'
-import useQueryParams from '~src/router/use-query-params'
 
 /**
  * Reimplementation ob Tabs component to store the selected tab in the query params