Refactor to use ui components paginator

src/components/Blocks/BlocksList.tsx

@@ -6,7 +6,7 @@
 import { PopoverInputSearch } from '~components/Layout/Inputs'
 import { LoadingCards } from '~components/Layout/Loading'
 import { ContentError, NoResultsError } from '~components/Layout/ContentError'
-import { RoutedPaginationProvider, useRoutedPagination } from '~components/Pagination/PaginationProvider'
+import { RoutedPaginationProvider, useRoutedPagination } from '@vocdoni/react-providers'
 import { RoutedPagination } from '~components/Pagination/RoutedPagination'
 import { PaginationItemsPerPage, RefreshIntervalBlocks, RoutePath } from '~constants'
 import { useBlockList } from '~queries/blocks'
@@ -70,7 +70,7 @@
   } = useBlockList({
     params: {
       totalItems: blockCount,
       page: page,
       limit: PaginationItemsPerPage,
     },
     enabled: !!stats?.height,

src/components/Organizations/Details/Elections.tsx

@@ -2,8 +2,8 @@
 import { AccountData } from '@vocdoni/sdk'
 import { Trans } from 'react-i18next'
 import { LoadingCards } from '~components/Layout/Loading'
-import { RoutedPagination } from '~components/Pagination/Pagination'
-import { RoutedPaginationProvider, useRoutedPagination } from '~components/Pagination/PaginationProvider'
+import { RoutedPagination } from '~components/Pagination/RoutedPagination'
+import { RoutedPaginationProvider, useRoutedPagination } from '@vocdoni/react-providers'
 import { ElectionCard } from '~components/Process/Card'
 import { RoutePath } from '~constants'
 import { useOrganizationElections } from '~queries/organizations'

src/components/Organizations/Details/Fees.tsx

@@ -3,8 +3,8 @@
 import { LoadingCards } from '~components/Layout/Loading'
 import { useDateFns } from '~i18n/use-date-fns'
 import { AccountData, TransactionType } from '@vocdoni/sdk'
-import { PaginationProvider, usePagination } from '~components/Pagination/PaginationProvider'
-import { Pagination } from '~components/Pagination/Pagination'
+import { Pagination } from '@vocdoni/chakra-components'
+import { PaginationProvider, usePagination } from '@vocdoni/react-providers'
 import { useAccountFees } from '~queries/organizations'
 import { TransactionTypeBadge } from '~components/Transactions/TransactionCard'
 import { generatePath, Link as RouterLink } from 'react-router-dom'

src/components/Organizations/Details/Transfers.tsx

@@ -23,9 +23,9 @@
 import { useDateFns } from '~i18n/use-date-fns'
 import { BiLogInCircle, BiLogOutCircle } from 'react-icons/bi'
 import { AccountData } from '@vocdoni/sdk'
-import { PaginationProvider, usePagination } from '~components/Pagination/PaginationProvider'
+import { Pagination } from '@vocdoni/chakra-components'
+import { PaginationProvider, usePagination } from '@vocdoni/react-providers'
 import { ContentError, NoResultsError } from '~components/Layout/ContentError'
-import { Pagination } from '~components/Pagination/Pagination'
 
 const FromToIcon = ({ isIncoming, ...rest }: { isIncoming: boolean } & IconProps) => {
   const { t } = useTranslation()

src/components/Organizations/List.tsx

@@ -4,7 +4,7 @@ import { generatePath, useNavigate, useParams } from 'react-router-dom'
 import { InputSearch } from '~components/Layout/Inputs'
 import { LoadingCards } from '~components/Layout/Loading'
 import { OrganizationCard } from '~components/Organizations/Card'
-import { RoutedPaginationProvider, useRoutedPagination } from '~components/Pagination/PaginationProvider'
+import { RoutedPaginationProvider, useRoutedPagination } from '@vocdoni/chakra-components'
 import { RoutedPagination } from '~components/Pagination/RoutedPagination'
 import { RoutePath } from '~constants'
 import { useOrganizationCount, useOrganizationList } from '~queries/organizations'

src/components/Pagination/RoutedPagination.tsx

@@ -1,5 +1,6 @@
 import { useBreakpointValue } from '@chakra-ui/react'
-import { RoutedPagination as Pagination, PaginationProps } from './Pagination'
+// import { RoutedPagination as Pagination, PaginationProps } from './Pagination'
+import { RoutedPagination as Pagination, PaginationProps } from '@vocdoni/chakra-components'
 
 // Note this component is a custom definition of the pagination component that will end in chakra-components
 export const RoutedPagination = (props: PaginationProps) => {

src/components/Process/Detail.tsx

@@ -43,8 +43,8 @@ import { LoadingCards } from '~components/Layout/Loading'
 import { RawContentBox } from '~components/Layout/ShowRawButton'
 import { OrganizationCard } from '~components/Organizations/Card'
 import { ElectionStatusBadge } from '~components/Organizations/StatusBadge'
-import { Pagination } from '~components/Pagination/Pagination'
-import { PaginationProvider, usePagination } from '~components/Pagination/PaginationProvider'
+import { Pagination } from '@vocdoni/chakra-components'
+import { PaginationProvider, usePagination } from '@vocdoni/react-providers'
 import InvalidElection from '~components/Process/InvalidElection'
 import { FallbackHeaderImg, RoutePath } from '~constants'
 import { useElectionKeys, useElectionVotesList } from '~queries/processes'

src/components/Process/ProcessList.tsx

@@ -14,7 +14,7 @@ import { Trans, useTranslation } from 'react-i18next'
 import { InputSearch } from '~components/Layout/Inputs'
 import { LoadingCards } from '~components/Layout/Loading'
 import { ContentError, NoResultsError } from '~components/Layout/ContentError'
-import { RoutedPaginationProvider, useRoutedPagination } from '~components/Pagination/PaginationProvider'
+import { RoutedPaginationProvider, useRoutedPagination } from '@vocdoni/react-providers'
 import { RoutedPagination } from '~components/Pagination/RoutedPagination'
 import { RoutePath } from '~constants'
 import { useProcessList } from '~queries/processes'

src/components/Transactions/TransactionList.tsx

@@ -5,7 +5,7 @@ import { Trans, useTranslation } from 'react-i18next'
 import { generatePath, useNavigate } from 'react-router-dom'
 import { PopoverInputSearch } from '~components/Layout/Inputs'
 import { LoadingCards } from '~components/Layout/Loading'
-import { RoutedPaginationProvider, useRoutedPagination } from '~components/Pagination/PaginationProvider'
+import { RoutedPaginationProvider, useRoutedPagination } from '@vocdoni/react-providers'
 import { RoutedPagination } from '~components/Pagination/RoutedPagination'
 import { TransactionCard } from '~components/Transactions/TransactionCard'
 import { PaginationItemsPerPage, RoutePath } from '~constants'

src/theme/components/Paginator.ts

@@ -0,0 +1,19 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+import { PaginationAnatomy } from '@vocdoni/chakra-components'
+
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(PaginationAnatomy)
+
+const Pagination = defineMultiStyleConfig({
+  baseStyle: definePartsStyle({
+    buttonGroup: {
+      flexWrap: 'wrap',
+      rowGap: '2',
+    },
+    totalResults: {
+      pt: 2,
+      color: 'lighterText',
+    },
+  }),
+})
+
+export default Pagination