fix sorting

ui/txs/TxsContent.tsx

 import { Alert, Box, HStack, Show, Button } from '@chakra-ui/react';
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 
 import type { Sort } from 'types/client/txs-sort';
 
@@ -28,6 +28,31 @@ const TxsContent = ({
 }: Props) => {
   const [ sorting, setSorting ] = useState<Sort>();
 
+  const sort = useCallback((field: 'val' | 'fee') => () => {
+    if (field === 'val') {
+      setSorting((prevVal => {
+        if (prevVal === 'val-asc') {
+          return undefined;
+        }
+        if (prevVal === 'val-desc') {
+          return 'val-asc';
+        }
+        return 'val-desc';
+      }));
+    }
+    if (field === 'fee') {
+      setSorting((prevVal => {
+        if (prevVal === 'fee-asc') {
+          return undefined;
+        }
+        if (prevVal === 'fee-desc') {
+          return 'fee-asc';
+        }
+        return 'fee-desc';
+      }));
+    }
+  }, [ setSorting ]);
+
   const {
     data,
     isLoading,
@@ -59,7 +84,7 @@ const TxsContent = ({
   );
 
   if (!isLoading && txs) {
-    content = <TxsWithSort txs={ txs } sorting={ sorting } setSorting={ setSorting }/>;
+    content = <TxsWithSort txs={ txs } sorting={ sorting } sort={ sort }/>;
   }
 
   return (

ui/txs/TxsWithSort.tsx

 import { Box, Show } from '@chakra-ui/react';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import type { TransactionsResponse } from 'types/api/transaction';
 import type { Sort } from 'types/client/txs-sort';
@@ -12,41 +12,16 @@ import TxsTable from './TxsTable';
 type Props = {
   txs: TransactionsResponse['items'];
   sorting?: Sort;
-  setSorting: (sorting: Sort | ((val: Sort) => Sort)) => void;
+  sort: (field: 'val' | 'fee') => () => void;
 }
 
-const TxsContent = ({
+const TxsWithSort = ({
   txs,
   sorting,
-  setSorting,
+  sort,
 }: Props) => {
   const [ sortedTxs, setSortedTxs ] = useState(txs);
 
-  const sort = useCallback((field: 'val' | 'fee') => () => {
-    if (field === 'val') {
-      setSorting((prevVal => {
-        if (prevVal === 'val-asc') {
-          return undefined;
-        }
-        if (prevVal === 'val-desc') {
-          return 'val-asc';
-        }
-        return 'val-desc';
-      }));
-    }
-    if (field === 'fee') {
-      setSorting((prevVal => {
-        if (prevVal === 'fee-asc') {
-          return undefined;
-        }
-        if (prevVal === 'fee-desc') {
-          return 'fee-asc';
-        }
-        return 'fee-desc';
-      }));
-    }
-  }, [ setSorting ]);
-
   useEffect(() => {
     switch (sorting) {
       case 'val-desc':
@@ -75,4 +50,4 @@ const TxsContent = ({
 
 };
 
-export default TxsContent;
+export default TxsWithSort;