Add support for ordering network proposal votes

src/app/pages/ProposalDetailsPage/ProposalVotesCard.tsx

@@ -4,12 +4,13 @@ import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { SubPageCard } from '../../components/SubPageCard'
 import { TablePaginationProps } from '../../components/Table/TablePagination'
 import { useTranslation } from 'react-i18next'
+import SwapVertIcon from '@mui/icons-material/SwapVert'
 import { Table, TableCellAlign, TableColProps } from '../../components/Table'
 import { ExtendedVote, ProposalVoteValue } from '../../../types/vote'
 import {
   PAGE_SIZE,
-  useAllVotes,
   useDisplayedVotes,
+  useOrder,
   useVoterSearch,
   useVoterSearchPattern,
   useWantedVoteType,
@@ -34,9 +35,12 @@ const ProposalVotes: FC<ProposalVotesProps> = ({ isLoading, votes, limit, pagina
   const scope = useRequiredScopeParam()
 
   const voterNameFragment = useVoterSearchPattern()
+  const { toggleReverse: toggleReverseOrder } = useOrder()
+
+  const OrderTrigger: FC = () => <SwapVertIcon onClick={toggleReverseOrder} />
 
   const tableColumns: TableColProps[] = [
-    { key: 'index', content: <></>, width: '50px' },
+    { key: 'index', content: <OrderTrigger />, width: '50px' },
     { key: 'voter', content: t('common.voter'), align: TableCellAlign.Left },
     { key: 'vote', content: t('common.vote'), align: TableCellAlign.Right },
   ]
@@ -84,16 +88,19 @@ export const ProposalVotesView: FC = () => {
   const { network } = useRequiredScopeParam()
   const proposalId = parseInt(useParams().proposalId!, 10)
 
-  const { isLoading } = useAllVotes(network, proposalId)
   const displayedVotes = useDisplayedVotes(network, proposalId)
 
-  if (!isLoading && displayedVotes.tablePaginationProps.selectedPage > 1 && !displayedVotes.data?.length) {
+  if (
+    !displayedVotes.isLoading &&
+    displayedVotes.tablePaginationProps.selectedPage > 1 &&
+    !displayedVotes.data?.length
+  ) {
     throw AppErrors.PageDoesNotExist
   }
 
   return (
     <ProposalVotes
-      isLoading={isLoading}
+      isLoading={displayedVotes.isLoading}
       votes={displayedVotes.data}
       limit={PAGE_SIZE}
       pagination={displayedVotes.tablePaginationProps}

src/app/pages/ProposalDetailsPage/hooks.ts

@@ -14,6 +14,7 @@ import {
 } from '../../../types/vote'
 import { useClientSidePagination } from '../../components/Table/useClientSidePagination'
 import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE } from '../../config'
+import { useBooleanFlagInUrl } from '../../hooks/useBooleanFlagInUrl'
 import { useStringInUrl } from '../../hooks/useStringInUrl'
 
 export type AllVotesData = List & {
@@ -43,7 +44,7 @@ const useValidatorMap = (network: Network) => {
   }
 }
 
-export const useAllVotes = (network: Network, proposalId: number): AllVotesData => {
+const useAllVotes = (network: Network, proposalId: number): AllVotesData => {
   const query = useGetConsensusProposalsProposalIdVotes(network, proposalId)
   const {
     map: validators,
@@ -157,21 +158,31 @@ const useWantedVoteFilter = (): VoteFilter => {
   }
 }
 
+export const useOrder = () => {
+  const { value, setValue, toggleValue } = useBooleanFlagInUrl('inverse', true)
+  return { isReverse: value, setReverse: setValue, toggleReverse: toggleValue }
+}
+
 export const PAGE_SIZE = NUMBER_OF_ITEMS_ON_SEPARATE_PAGE
 
 export const useDisplayedVotes = (network: Network, proposalId: number) => {
   const filter = useWantedVoteFilter()
 
+  const { isReverse } = useOrder()
+
   const pagination = useClientSidePagination<ExtendedVote, AllVotesData>({
     paramName: 'page',
     clientPageSize: PAGE_SIZE,
     serverPageSize: 1000,
-    filter,
+    transform: votes => {
+      const wantedVotes = votes.filter(filter)
+      return isReverse ? wantedVotes.reverse() : wantedVotes
+    },
   })
 
   // Get all the votes
   const allVotes = useAllVotes(network, proposalId)
 
   // Get the section of the votes that we should display in the table
-  return pagination.getResults(allVotes)
+  return pagination.getResults(allVotes.isLoading, allVotes)
 }

src/app/pages/TokenDashboardPage/hook.ts

@@ -72,8 +72,7 @@ export const _useTokenTransfers = (scope: SearchScope, params: undefined | GetRu
     network,
     layer, // This is OK since consensus has been handled separately
     {
-      offset: pagination.offsetForQuery,
-      limit: pagination.limitForQuery,
+      ...pagination.paramsForServer,
       type: RuntimeEventType.evmlog,
       // The following is the hex-encoded signature for Transfer(address,address,uint256)
       evm_log_signature: 'ddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef',
@@ -88,16 +87,16 @@ export const _useTokenTransfers = (scope: SearchScope, params: undefined | GetRu
 
   const { isFetched, isLoading, data } = query
 
-  const results = pagination.getResults(data?.data)
+  const results = pagination.getResults(isLoading, data?.data)
 
-  if (isFetched && pagination.selectedPage > 1 && !results.data?.length) {
+  if (isFetched && pagination.selectedPageForClient > 1 && !results.data?.length) {
     throw AppErrors.PageDoesNotExist
   }
 
   return {
     isLoading,
     isFetched,
-    results: pagination.getResults(data?.data),
+    results: pagination.getResults(isLoading, data?.data),
   }
 }