Add custom block ordering on address transaction page (#2387)

Fixes #2366

types/api/transaction.ts

@@ -183,7 +183,7 @@ export type TransactionType = 'rootstock_remasc' |
 export type TxsResponse = TransactionsResponseValidated | TransactionsResponsePending | BlockTransactionsResponse;
 
 export interface TransactionsSorting {
-  sort: 'value' | 'fee';
+  sort: 'value' | 'fee' | 'block_number';
   order: 'asc' | 'desc';
 }
 

ui/txs/TxsContent.tsx

@@ -19,6 +19,7 @@ import TxsTable from './TxsTable';
 const SORT_SEQUENCE: Record<TransactionsSortingField, Array<TransactionsSortingValue | undefined>> = {
   value: [ 'value-desc', 'value-asc', undefined ],
   fee: [ 'fee-desc', 'fee-asc', undefined ],
+  block_number: [ 'block_number-asc', undefined ],
 };
 
 type Props = {

ui/txs/TxsTable.tsx

@@ -56,11 +56,19 @@ const TxsTable = ({
             <Th width="180px">Txn hash</Th>
             <Th width="160px">Type</Th>
             <Th width="20%">Method</Th>
-            { showBlockInfo && <Th width="18%">Block</Th> }
+            { showBlockInfo && (
+              <Th width="18%">
+                <Link onClick={ isLoading ? undefined : sort('block_number') } display="flex" alignItems="center">
+                  { sorting === 'block_number-asc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(-90deg)"/> }
+                  { sorting === 'block_number-desc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(90deg)"/> }
+                  Block
+                </Link>
+              </Th>
+            ) }
             <Th width="224px">From/To</Th>
             { !config.UI.views.tx.hiddenFields?.value && (
               <Th width="20%" isNumeric>
-                <Link onClick={ sort('value') } display="flex" justifyContent="end">
+                <Link onClick={ isLoading ? undefined : sort('value') } display="flex" alignItems="center" justifyContent="end">
                   { sorting === 'value-asc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(-90deg)"/> }
                   { sorting === 'value-desc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(90deg)"/> }
                   { `Value ${ currencyUnits.ether }` }
@@ -69,7 +77,7 @@ const TxsTable = ({
             ) }
             { !config.UI.views.tx.hiddenFields?.tx_fee && (
               <Th width="20%" isNumeric pr={ 5 }>
-                <Link onClick={ sort('fee') } display="flex" justifyContent="end">
+                <Link onClick={ isLoading ? undefined : sort('fee') } display="flex" alignItems="center" justifyContent="end">
                   { sorting === 'fee-asc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(-90deg)"/> }
                   { sorting === 'fee-desc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(90deg)"/> }
                   { `Fee${ feeCurrency }` }