address txs api sorting

lib/api/resources.ts

@@ -58,7 +58,13 @@ import type {
 } from 'types/api/token';
 import type { TokensResponse, TokensFilters, TokensSorting, TokenInstanceTransferResponse, TokensBridgedFilters } from 'types/api/tokens';
 import type { TokenTransferResponse, TokenTransferFilters } from 'types/api/tokenTransfer';
-import type { TransactionsResponseValidated, TransactionsResponsePending, Transaction, TransactionsResponseWatchlist } from 'types/api/transaction';
+import type {
+  TransactionsResponseValidated,
+  TransactionsResponsePending,
+  Transaction,
+  TransactionsResponseWatchlist,
+  TransactionsSorting,
+} from 'types/api/transaction';
 import type { TTxsFilters } from 'types/api/txsFilters';
 import type { TxStateChanges } from 'types/api/txStateChanges';
 import type { VerifiedContractsSorting } from 'types/api/verifiedContracts';
@@ -727,5 +733,6 @@ export type PaginationSorting<Q extends PaginatedResources> =
 Q extends 'tokens' ? TokensSorting :
 Q extends 'tokens_bridged' ? TokensSorting :
 Q extends 'verified_contracts' ? VerifiedContractsSorting :
+Q extends 'address_txs' ? TransactionsSorting :
 never;
 /* eslint-enable @typescript-eslint/indent */

lib/tx/sortTxs.ts

-import type { Transaction } from 'types/api/transaction';
-import type { Sort } from 'types/client/txs-sort';
-
-import compareBns from 'lib/bigint/compareBns';
-
-const sortTxs = (sorting?: Sort) => (tx1: Transaction, tx2: Transaction) => {
-  switch (sorting) {
-    case 'val-desc':
-      return compareBns(tx1.value, tx2.value);
-    case 'val-asc':
-      return compareBns(tx2.value, tx1.value);
-    case 'fee-desc':
-      return compareBns(tx1.fee.value || 0, tx2.fee.value || 0);
-    case 'fee-asc':
-      return compareBns(tx2.fee.value || 0, tx1.fee.value || 0);
-    default:
-      return 0;
-  }
-};
-
-export default sortTxs;

types/api/transaction.ts

@@ -117,3 +117,12 @@ export type TransactionType = 'rootstock_remasc' |
 'coin_transfer'
 
 export type TxsResponse = TransactionsResponseValidated | TransactionsResponsePending | BlockTransactionsResponse;
+
+export interface TransactionsSorting {
+  sort: 'value' | 'fee';
+  order: 'asc' | 'desc';
+}
+
+export type TransactionsSortingField = TransactionsSorting['sort'];
+
+export type TransactionsSortingValue = `${ TransactionsSortingField }-${ TransactionsSorting['order'] }`;

types/client/txs-sort.ts

-export type Sort = 'val-desc' | 'val-asc' | 'fee-desc' | 'fee-asc' | '';

ui/address/AddressTxs.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import type { SocketMessage } from 'lib/socket/types';
 import type { AddressFromToFilter, AddressTransactionsResponse } from 'types/api/address';
 import { AddressFromToFilterValues } from 'types/api/address';
-import type { Transaction } from 'types/api/transaction';
+import type { Transaction, TransactionsSortingField, TransactionsSortingValue, TransactionsSorting } from 'types/api/transaction';
 
 import { getResourceKey } from 'lib/api/useApiQuery';
 import getFilterValueFromQuery from 'lib/getFilterValueFromQuery';
@@ -18,7 +18,10 @@ import { generateListStub } from 'stubs/utils';
 import ActionBar from 'ui/shared/ActionBar';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
-import TxsContent from 'ui/txs/TxsContent';
+import getSortParamsFromValue from 'ui/shared/sort/getSortParamsFromValue';
+import getSortValueFromQuery from 'ui/shared/sort/getSortValueFromQuery';
+import TxsWithAPISorting from 'ui/txs/TxsWithAPISorting';
+import { SORT_OPTIONS } from 'ui/txs/useTxsSort';
 
 import AddressCsvExportLink from './AddressCsvExportLink';
 import AddressTxsFilter from './AddressTxsFilter';
@@ -53,6 +56,7 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Props) => {
 
   const [ socketAlert, setSocketAlert ] = React.useState('');
   const [ newItemsCount, setNewItemsCount ] = React.useState(0);
+  const [ sort, setSort ] = React.useState<TransactionsSortingValue | undefined>(getSortValueFromQuery<TransactionsSortingValue>(router.query, SORT_OPTIONS));
 
   const isMobile = useIsMobile();
   const currentAddress = getQueryParamString(router.query.hash);
@@ -63,6 +67,7 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Props) => {
     resourceName: 'address_txs',
     pathParams: { hash: currentAddress },
     filters: { filter: filterValue },
+    sorting: getSortParamsFromValue<TransactionsSortingValue, TransactionsSortingField, TransactionsSorting['order']>(sort),
     scrollRef,
     options: {
       placeholderData: generateListStub<'address_txs'>(TX, 50, { next_page_params: {
@@ -177,7 +182,7 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Props) => {
           <Pagination { ...addressTxsQuery.pagination } ml={ 8 }/>
         </ActionBar>
       ) }
-      <TxsContent
+      <TxsWithAPISorting
         filter={ filter }
         filterValue={ filterValue }
         query={ addressTxsQuery }
@@ -187,6 +192,8 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Props) => {
         socketInfoAlert={ socketAlert }
         socketInfoNum={ newItemsCount }
         top={ 80 }
+        sorting={ sort }
+        setSort={ setSort }
       />
     </>
   );

ui/pages/Block.tsx

@@ -24,7 +24,7 @@ import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
-import TxsContent from 'ui/txs/TxsContent';
+import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
 
 const TAB_LIST_PROPS = {
   marginBottom: 0,
@@ -82,7 +82,7 @@ const BlockPageContent = () => {
 
   const tabs: Array<RoutedTab> = React.useMemo(() => ([
     { id: 'index', title: 'Details', component: <BlockDetails query={ blockQuery }/> },
-    { id: 'txs', title: 'Transactions', component: <TxsContent query={ blockTxsQuery } showBlockInfo={ false } showSocketInfo={ false }/> },
+    { id: 'txs', title: 'Transactions', component: <TxsWithFrontendSorting query={ blockTxsQuery } showBlockInfo={ false } showSocketInfo={ false }/> },
     config.features.beaconChain.isEnabled && Boolean(blockQuery.data?.withdrawals_count) ?
       { id: 'withdrawals', title: 'Withdrawals', component: <BlockWithdrawals blockWithdrawalsQuery={ blockWithdrawalsQuery }/> } :
       null,

ui/pages/KettleTxs.tsx

@@ -7,7 +7,7 @@ import { generateListStub } from 'stubs/utils';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
-import TxsContent from 'ui/txs/TxsContent';
+import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
 
 const KettleTxs = () => {
   const router = useRouter();
@@ -31,7 +31,7 @@ const KettleTxs = () => {
     <>
       <PageTitle title="Computor transactions" withTextAd/>
       <AddressEntity address={{ hash }} mb={ 6 }/>
-      <TxsContent
+      <TxsWithFrontendSorting
         query={ query }
         showSocketInfo={ false }
       />

ui/pages/Transactions.tsx

@@ -13,8 +13,8 @@ import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
-import TxsContent from 'ui/txs/TxsContent';
 import TxsWatchlist from 'ui/txs/TxsWatchlist';
+import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
 
 const TAB_LIST_PROPS = {
   marginBottom: 0,
@@ -60,12 +60,13 @@ const Transactions = () => {
     {
       id: 'validated',
       title: verifiedTitle,
-      component: <TxsContent query={ txsQuery } showSocketInfo={ txsQuery.pagination.page === 1 } socketInfoNum={ num } socketInfoAlert={ socketAlert }/> },
+      component:
+        <TxsWithFrontendSorting query={ txsQuery } showSocketInfo={ txsQuery.pagination.page === 1 } socketInfoNum={ num } socketInfoAlert={ socketAlert }/> },
     {
       id: 'pending',
       title: 'Pending',
       component: (
-        <TxsContent
+        <TxsWithFrontendSorting
           query={ txsQuery }
           showBlockInfo={ false }
           showSocketInfo={ txsQuery.pagination.page === 1 }

ui/pages/ZkEvmL2TxnBatch.tsx

@@ -14,7 +14,7 @@ import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
-import TxsContent from 'ui/txs/TxsContent';
+import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
 import ZkEvmL2TxnBatchDetails from 'ui/zkEvmL2TxnBatches/ZkEvmL2TxnBatchDetails';
 
 const ZkEvmL2TxnBatch = () => {
@@ -51,7 +51,7 @@ const ZkEvmL2TxnBatch = () => {
 
   const tabs: Array<RoutedTab> = React.useMemo(() => ([
     { id: 'index', title: 'Details', component: <ZkEvmL2TxnBatchDetails query={ batchQuery }/> },
-    { id: 'txs', title: 'Transactions', component: <TxsContent query={ batchTxsQuery } showSocketInfo={ false }/> },
+    { id: 'txs', title: 'Transactions', component: <TxsWithFrontendSorting query={ batchTxsQuery } showSocketInfo={ false }/> },
   ].filter(Boolean)), [ batchQuery, batchTxsQuery ]);
 
   const backLink = React.useMemo(() => {

ui/txs/TxsContent.tsx

@@ -2,17 +2,23 @@ import { Box, Show, Hide } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressFromToFilter } from 'types/api/address';
+import type { Transaction, TransactionsSortingField, TransactionsSortingValue } from 'types/api/transaction';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AddressCsvExportLink from 'ui/address/AddressCsvExportLink';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
+import getNextSortValue from 'ui/shared/sort/getNextSortValue';
 
 import TxsHeaderMobile from './TxsHeaderMobile';
 import TxsListItem from './TxsListItem';
 import TxsTable from './TxsTable';
-import useTxsSort from './useTxsSort';
+
+const SORT_SEQUENCE: Record<TransactionsSortingField, Array<TransactionsSortingValue | undefined>> = {
+  value: [ 'value-desc', 'value-asc', undefined ],
+  fee: [ 'fee-desc', 'fee-asc', undefined ],
+};
 
 type Props = {
   // eslint-disable-next-line max-len
@@ -26,12 +32,17 @@ type Props = {
   filterValue?: AddressFromToFilter;
   enableTimeIncrement?: boolean;
   top?: number;
+  items?: Array<Transaction>;
+  isPlaceholderData: boolean;
+  isError: boolean;
+  setSorting: (value: TransactionsSortingValue | undefined) => void;
+  sort: TransactionsSortingValue | undefined;
 }
 
 const TxsContent = ({
+  query,
   filter,
   filterValue,
-  query,
   showBlockInfo = true,
   showSocketInfo = true,
   socketInfoAlert,
@@ -39,11 +50,20 @@ const TxsContent = ({
   currentAddress,
   enableTimeIncrement,
   top,
+  items,
+  isPlaceholderData,
+  isError,
+  setSorting,
+  sort,
 }: Props) => {
-  const { data, isPlaceholderData, isError, setSortByField, setSortByValue, sorting } = useTxsSort(query);
   const isMobile = useIsMobile();
 
-  const content = data?.items ? (
+  const onSortToggle = React.useCallback((field: TransactionsSortingField) => () => {
+    const value = getNextSortValue<TransactionsSortingField, TransactionsSortingValue>(SORT_SEQUENCE, field)(sort);
+    setSorting(value);
+  }, [ sort, setSorting ]);
+
+  const content = items ? (
     <>
       <Show below="lg" ssr={ false }>
         <Box>
@@ -55,7 +75,7 @@ const TxsContent = ({
               isLoading={ isPlaceholderData }
             />
           ) }
-          { data.items.map((tx, index) => (
+          { items.map((tx, index) => (
             <TxsListItem
               key={ tx.hash + (isPlaceholderData ? index : '') }
               tx={ tx }
@@ -69,9 +89,9 @@ const TxsContent = ({
       </Show>
       <Hide below="lg" ssr={ false }>
         <TxsTable
-          txs={ data.items }
-          sort={ setSortByField }
-          sorting={ sorting }
+          txs={ items }
+          sort={ onSortToggle }
+          sorting={ sort }
           showBlockInfo={ showBlockInfo }
           showSocketInfo={ showSocketInfo }
           socketInfoAlert={ socketInfoAlert }
@@ -88,8 +108,8 @@ const TxsContent = ({
   const actionBar = isMobile ? (
     <TxsHeaderMobile
       mt={ -6 }
-      sorting={ sorting }
-      setSorting={ setSortByValue }
+      sorting={ sort }
+      setSorting={ setSorting }
       paginationProps={ query.pagination }
       showPagination={ query.pagination.isVisible }
       filterComponent={ filter }
@@ -107,7 +127,7 @@ const TxsContent = ({
   return (
     <DataListDisplay
       isError={ isError }
-      items={ data?.items }
+      items={ items }
       emptyText="There are no transactions."
       content={ content }
       actionBar={ actionBar }

ui/txs/TxsHeaderMobile.tsx

 import { HStack, chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import type { Sort as TSort } from 'types/client/txs-sort';
+import type { TransactionsSortingValue } from 'types/api/transaction';
 import type { PaginationParams } from 'ui/shared/pagination/types';
 
 // import FilterInput from 'ui/shared/filters/FilterInput';
 
 import ActionBar from 'ui/shared/ActionBar';
 import Pagination from 'ui/shared/pagination/Pagination';
-import type { Option } from 'ui/shared/sort/Sort';
 import Sort from 'ui/shared/sort/Sort';
 
-// import TxsFilters from './TxsFilters';
+import { SORT_OPTIONS } from './useTxsSort';
 
-const SORT_OPTIONS: Array<Option<TSort>> = [
-  { title: 'Default', id: undefined },
-  { title: 'Value ascending', id: 'val-asc' },
-  { title: 'Value descending', id: 'val-desc' },
-  { title: 'Fee ascending', id: 'fee-asc' },
-  { title: 'Fee descending', id: 'fee-desc' },
-];
+// import TxsFilters from './TxsFilters';
 
 type Props = {
-  sorting: TSort;
-  setSorting: (val: TSort | undefined) => void;
+  sorting: TransactionsSortingValue | undefined;
+  setSorting: (val: TransactionsSortingValue | undefined) => void;
   paginationProps: PaginationParams;
   className?: string;
   showPagination?: boolean;

ui/txs/TxsTable.tsx

@@ -2,8 +2,7 @@ import { Link, Table, Tbody, Tr, Th, Icon, Show, Hide } from '@chakra-ui/react';
 import { AnimatePresence } from 'framer-motion';
 import React from 'react';
 
-import type { Transaction } from 'types/api/transaction';
-import type { Sort } from 'types/client/txs-sort';
+import type { Transaction, TransactionsSortingField, TransactionsSortingValue } from 'types/api/transaction';
 
 import config from 'configs/app';
 import rightArrowIcon from 'icons/arrows/east.svg';
@@ -14,8 +13,8 @@ import TxsTableItem from './TxsTableItem';
 
 type Props = {
   txs: Array<Transaction>;
-  sort: (field: 'val' | 'fee') => () => void;
-  sorting?: Sort;
+  sort: (field: TransactionsSortingField) => () => void;
+  sorting?: TransactionsSortingValue;
   top: number;
   showBlockInfo: boolean;
   showSocketInfo: boolean;
@@ -58,9 +57,9 @@ const TxsTable = ({
           </Th>
           { !config.UI.views.tx.hiddenFields?.value && (
             <Th width="20%" isNumeric>
-              <Link onClick={ sort('val') } display="flex" justifyContent="end">
-                { sorting === 'val-asc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(-90deg)"/> }
-                { sorting === 'val-desc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(90deg)"/> }
+              <Link onClick={ sort('value') } display="flex" justifyContent="end">
+                { sorting === 'value-asc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(-90deg)"/> }
+                { sorting === 'value-desc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(90deg)"/> }
                 { `Value ${ config.chain.currency.symbol }` }
               </Link>
             </Th>

ui/txs/TxsWatchlist.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
 import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
-import TxsContent from 'ui/txs/TxsContent';
+import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
 
 type Props = {
   query: QueryWithPagesResult<'txs_watchlist'>;
@@ -10,7 +10,7 @@ type Props = {
 
 const TxsWatchlist = ({ query }: Props) => {
   useRedirectForInvalidAuthToken();
-  return <TxsContent query={ query } showSocketInfo={ false }/>;
+  return <TxsWithFrontendSorting query={ query } showSocketInfo={ false }/>;
 };
 
 export default TxsWatchlist;

ui/txs/TxsWithAPISorting.tsx

+import React from 'react';
+
+import type { AddressFromToFilter } from 'types/api/address';
+import type { TransactionsSortingValue } from 'types/api/transaction';
+
+import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
+import getSortParamsFromValue from 'ui/shared/sort/getSortParamsFromValue';
+
+import TxsContent from './TxsContent';
+
+type Props = {
+  // eslint-disable-next-line max-len
+  query: QueryWithPagesResult<'address_txs'>;
+  showBlockInfo?: boolean;
+  showSocketInfo?: boolean;
+  socketInfoAlert?: string;
+  socketInfoNum?: number;
+  currentAddress?: string;
+  filter?: React.ReactNode;
+  filterValue?: AddressFromToFilter;
+  enableTimeIncrement?: boolean;
+  top?: number;
+  sorting: TransactionsSortingValue | undefined;
+  setSort: (value?: TransactionsSortingValue) => void;
+}
+
+const TxsWithAPISorting = ({
+  filter,
+  filterValue,
+  query,
+  showBlockInfo = true,
+  showSocketInfo = true,
+  socketInfoAlert,
+  socketInfoNum,
+  currentAddress,
+  enableTimeIncrement,
+  top,
+  sorting,
+  setSort,
+}: Props) => {
+
+  const handleSortChange = React.useCallback((value?: TransactionsSortingValue) => {
+    setSort(value);
+    query.onSortingChange(getSortParamsFromValue(value));
+  }, [ setSort, query ]);
+
+  return (
+    <TxsContent
+      filter={ filter }
+      filterValue={ filterValue }
+      showBlockInfo={ showBlockInfo }
+      showSocketInfo={ showSocketInfo }
+      socketInfoAlert={ socketInfoAlert }
+      socketInfoNum={ socketInfoNum }
+      currentAddress={ currentAddress }
+      enableTimeIncrement={ enableTimeIncrement }
+      top={ top }
+      items={ query.data?.items }
+      isPlaceholderData={ query.isPlaceholderData }
+      isError={ query.isError }
+      setSorting={ handleSortChange }
+      sort={ sorting }
+      query={ query }
+    />
+  );
+};
+
+export default TxsWithAPISorting;

ui/txs/TxsWithFrontendSorting.tsx

+import React from 'react';
+
+import type { AddressFromToFilter } from 'types/api/address';
+
+import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
+
+import TxsContent from './TxsContent';
+import useTxsSort from './useTxsSort';
+
+type Props = {
+  // eslint-disable-next-line max-len
+  query: QueryWithPagesResult<'txs_validated' | 'txs_pending'> | QueryWithPagesResult<'txs_watchlist'> | QueryWithPagesResult<'block_txs'> | QueryWithPagesResult<'zkevm_l2_txn_batch_txs'>;
+  showBlockInfo?: boolean;
+  showSocketInfo?: boolean;
+  socketInfoAlert?: string;
+  socketInfoNum?: number;
+  currentAddress?: string;
+  filter?: React.ReactNode;
+  filterValue?: AddressFromToFilter;
+  enableTimeIncrement?: boolean;
+  top?: number;
+}
+
+const TxsWithFrontendSorting = ({
+  filter,
+  filterValue,
+  query,
+  showBlockInfo = true,
+  showSocketInfo = true,
+  socketInfoAlert,
+  socketInfoNum,
+  currentAddress,
+  enableTimeIncrement,
+  top,
+}: Props) => {
+  const { data, isPlaceholderData, isError, setSortByValue, sorting } = useTxsSort(query);
+
+  return (
+    <TxsContent
+      filter={ filter }
+      filterValue={ filterValue }
+      showBlockInfo={ showBlockInfo }
+      showSocketInfo={ showSocketInfo }
+      socketInfoAlert={ socketInfoAlert }
+      socketInfoNum={ socketInfoNum }
+      currentAddress={ currentAddress }
+      enableTimeIncrement={ enableTimeIncrement }
+      top={ top }
+      items={ data?.items }
+      isPlaceholderData={ isPlaceholderData }
+      isError={ isError }
+      setSorting={ setSortByValue }
+      sort={ sorting }
+      query={ query }
+    />
+  );
+};
+
+export default TxsWithFrontendSorting;

ui/txs/useTxsSort.tsx

 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
-import type { TxsResponse } from 'types/api/transaction';
-import type { Sort } from 'types/client/txs-sort';
+import type { Transaction, TransactionsSortingValue, TxsResponse } from 'types/api/transaction';
 
 import type { ResourceError } from 'lib/api/resources';
+import compareBns from 'lib/bigint/compareBns';
 import * as cookies from 'lib/cookies';
-import sortTxs from 'lib/tx/sortTxs';
+import type { Option } from 'ui/shared/sort/Sort';
+
+export const SORT_OPTIONS: Array<Option<TransactionsSortingValue>> = [
+  { title: 'Default', id: undefined },
+  { title: 'Value ascending', id: 'value-asc' },
+  { title: 'Value descending', id: 'value-desc' },
+  { title: 'Fee ascending', id: 'fee-asc' },
+  { title: 'Fee descending', id: 'fee-desc' },
+];
+
+type SortingValue = TransactionsSortingValue | undefined;
 
 type HookResult = UseQueryResult<TxsResponse, ResourceError<unknown>> & {
-  sorting: Sort;
-  setSortByField: (field: 'val' | 'fee') => () => void;
-  setSortByValue: (value: Sort | undefined) => void;
+  sorting: SortingValue;
+  setSortByValue: (value: SortingValue) => void;
 }
 
+const sortTxs = (sorting: SortingValue) => (tx1: Transaction, tx2: Transaction) => {
+  switch (sorting) {
+    case 'value-desc':
+      return compareBns(tx1.value, tx2.value);
+    case 'value-asc':
+      return compareBns(tx2.value, tx1.value);
+    case 'fee-desc':
+      return compareBns(tx1.fee.value || 0, tx2.fee.value || 0);
+    case 'fee-asc':
+      return compareBns(tx2.fee.value || 0, tx1.fee.value || 0);
+    default:
+      return 0;
+  }
+};
+
 export default function useTxsSort(
   queryResult: UseQueryResult<TxsResponse, ResourceError<unknown>>,
 ): HookResult {
 
-  const [ sorting, setSorting ] = React.useState<Sort>(cookies.get(cookies.NAMES.TXS_SORT) as Sort);
-
-  const setSortByField = React.useCallback((field: 'val' | 'fee') => () => {
-    if (queryResult.isPlaceholderData) {
-      return;
-    }
-
-    setSorting((prevVal) => {
-      let newVal: Sort = '';
-      if (field === 'val') {
-        if (prevVal === 'val-asc') {
-          newVal = '';
-        } else if (prevVal === 'val-desc') {
-          newVal = 'val-asc';
-        } else {
-          newVal = 'val-desc';
-        }
-      }
-      if (field === 'fee') {
-        if (prevVal === 'fee-asc') {
-          newVal = '';
-        } else if (prevVal === 'fee-desc') {
-          newVal = 'fee-asc';
-        } else {
-          newVal = 'fee-desc';
-        }
-      }
-      cookies.set(cookies.NAMES.TXS_SORT, newVal);
-      return newVal;
-    });
-  }, [ queryResult.isPlaceholderData ]);
+  const [ sorting, setSorting ] = React.useState<SortingValue>(cookies.get(cookies.NAMES.TXS_SORT) as SortingValue);
 
-  const setSortByValue = React.useCallback((value: Sort | undefined) => {
-    setSorting((prevVal: Sort) => {
-      let newVal: Sort = '';
+  const setSortByValue = React.useCallback((value: SortingValue) => {
+    setSorting((prevVal: SortingValue) => {
+      let newVal: SortingValue = undefined;
       if (value !== prevVal) {
-        newVal = value as Sort;
+        newVal = value as SortingValue;
       }
-      cookies.set(cookies.NAMES.TXS_SORT, newVal);
+      cookies.set(cookies.NAMES.TXS_SORT, newVal ? newVal : '');
       return newVal;
     });
   }, []);
 
   return React.useMemo(() => {
     if (queryResult.isError || queryResult.isPending) {
-      return { ...queryResult, setSortByField, setSortByValue, sorting };
+      return { ...queryResult, setSortByValue, sorting };
     }
 
     return {
       ...queryResult,
       data: { ...queryResult.data, items: queryResult.data.items.slice().sort(sortTxs(sorting)) },
-      setSortByField,
       setSortByValue,
       sorting,
     };
-  }, [ queryResult, setSortByField, setSortByValue, sorting ]);
+  }, [ queryResult, setSortByValue, sorting ]);
 
 }