fix sort icon iin tokens table

ui/tokens/TokensTable.tsx

@@ -3,10 +3,8 @@ import React from 'react';
 import type { TokenInfo } from 'types/api/token';
 import type { TokensSortingField, TokensSortingValue } from 'types/api/tokens';
 
-import { Link } from 'toolkit/chakra/link';
-import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import { TableBody, TableColumnHeader, TableColumnHeaderSortable, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
-import IconSvg from 'ui/shared/IconSvg';
 import { default as getNextSortValueShared } from 'ui/shared/sort/getNextSortValue';
 
 import TokensTableItem from './TokensTableItem';
@@ -29,9 +27,8 @@ type Props = {
 };
 
 const TokensTable = ({ items, page, isLoading, sorting, setSorting, top }: Props) => {
-  const sortIconTransform = sorting?.includes('asc') ? 'rotate(-90deg)' : 'rotate(90deg)';
 
-  const sort = React.useCallback((field: TokensSortingField) => () => {
+  const sort = React.useCallback((field: TokensSortingField) => {
     const value = getNextSortValue(field)(sorting);
     setSorting(value);
   }, [ sorting, setSorting ]);
@@ -41,24 +38,33 @@ const TokensTable = ({ items, page, isLoading, sorting, setSorting, top }: Props
       <TableHeaderSticky top={ top ?? ACTION_BAR_HEIGHT_DESKTOP }>
         <TableRow>
           <TableColumnHeader w="50%">Token</TableColumnHeader>
-          <TableColumnHeader isNumeric w="15%">
-            <Link onClick={ sort('fiat_value') } display="flex" justifyContent="end">
-              { sorting?.includes('fiat_value') && <IconSvg name="arrows/east-mini" boxSize={ 4 } transform={ sortIconTransform }/> }
+          <TableColumnHeaderSortable
+            isNumeric
+            w="15%"
+            sortField="fiat_value"
+            sortValue={ sorting }
+            onSortToggle={ sort }
+          >
             Price
-            </Link>
-          </TableColumnHeader>
-          <TableColumnHeader isNumeric w="20%">
-            <Link onClick={ sort('circulating_market_cap') } display="flex" justifyContent="end">
-              { sorting?.includes('circulating_market_cap') && <IconSvg name="arrows/east-mini" boxSize={ 4 } transform={ sortIconTransform }/> }
+          </TableColumnHeaderSortable>
+          <TableColumnHeaderSortable
+            isNumeric
+            w="20%"
+            sortField="circulating_market_cap"
+            sortValue={ sorting }
+            onSortToggle={ sort }
+          >
             On-chain market cap
-            </Link>
-          </TableColumnHeader>
-          <TableColumnHeader isNumeric w="15%">
-            <Link onClick={ sort('holders_count') } display="flex" justifyContent="end">
-              { sorting?.includes('holders_count') && <IconSvg name="arrows/east-mini" boxSize={ 4 } transform={ sortIconTransform }/> }
+          </TableColumnHeaderSortable>
+          <TableColumnHeaderSortable
+            isNumeric
+            w="15%"
+            sortField="holders_count"
+            sortValue={ sorting }
+            onSortToggle={ sort }
+          >
             Holders
-            </Link>
-          </TableColumnHeader>
+          </TableColumnHeaderSortable>
         </TableRow>
       </TableHeaderSticky>
       <TableBody>