internal tx sort

ui/tx/TxInternals.tsx

@@ -12,6 +12,46 @@ import FilterInput from 'ui/shared/FilterInput';
 import TxInternalsFilter from 'ui/tx/internals/TxInternalsFilter';
 import TxInternalsList from 'ui/tx/internals/TxInternalsList';
 import TxInternalsTable from 'ui/tx/internals/TxInternalsTable';
+import type { Sort, SortField } from 'ui/tx/internals/utils';
+
+const SORT_SEQUENCE: Record<SortField, Array<Sort | undefined>> = {
+  value: [ 'value-desc', 'value-asc', undefined ],
+  'gas-limit': [ 'gas-limit-desc', 'gas-limit-asc', undefined ],
+};
+
+const getNextSortValue = (field: SortField) => (prevValue: Sort | undefined) => {
+  const sequence = SORT_SEQUENCE[field];
+  const curIndex = sequence.findIndex((sort) => sort === prevValue);
+  const nextIndex = curIndex + 1 > sequence.length - 1 ? 0 : curIndex + 1;
+  return sequence[nextIndex];
+};
+
+const sortFn = (sort: Sort | undefined) => (a: ArrayElement<typeof data>, b: ArrayElement<typeof data>) => {
+  switch (sort) {
+    case 'value-desc': {
+      const result = a.value > b.value ? -1 : 1;
+      return a.value === b.value ? 0 : result;
+    }
+
+    case 'value-asc': {
+      const result = a.value > b.value ? 1 : -1;
+      return a.value === b.value ? 0 : result;
+    }
+
+    case 'gas-limit-desc': {
+      const result = a.gasLimit > b.gasLimit ? -1 : 1;
+      return a.gasLimit === b.gasLimit ? 0 : result;
+    }
+
+    case 'gas-limit-asc': {
+      const result = a.gasLimit > b.gasLimit ? 1 : -1;
+      return a.gasLimit === b.gasLimit ? 0 : result;
+    }
+
+    default:
+      return 0;
+  }
+};
 
 const searchFn = (searchTerm: string) => (item: ArrayElement<typeof data>): boolean => {
   const formattedSearchTerm = searchTerm.toLowerCase();
@@ -23,22 +63,33 @@ const searchFn = (searchTerm: string) => (item: ArrayElement<typeof data>): bool
 const TxInternals = () => {
   const [ filters, setFilters ] = React.useState<Array<TxInternalsType>>([]);
   const [ searchTerm, setSearchTerm ] = React.useState<string>('');
+  const [ sort, setSort ] = React.useState<Sort>();
+
   const isMobile = useIsMobile();
 
   const handleFilterChange = React.useCallback((nextValue: Array<TxInternalsType>) => {
     setFilters(nextValue);
   }, []);
 
+  const handleSortToggle = React.useCallback((field: SortField) => {
+    return () => {
+      setSort(getNextSortValue(field));
+    };
+  }, []);
+
   const content = (() => {
     const filteredData = data
       .filter(({ type }) => filters.length > 0 ? filters.includes(type) : true)
-      .filter(searchFn(searchTerm));
+      .filter(searchFn(searchTerm))
+      .sort(sortFn(sort));
 
     if (filteredData.length === 0) {
       return <EmptySearchResult text={ `Couldn${ apos }t find any transaction that matches your query.` }/>;
     }
 
-    return isMobile ? <TxInternalsList data={ filteredData }/> : <TxInternalsTable data={ filteredData }/>;
+    return isMobile ?
+      <TxInternalsList data={ filteredData }/> :
+      <TxInternalsTable data={ filteredData } sort={ sort } onSortToggle={ handleSortToggle }/>;
   })();
 
   return (

ui/tx/internals/TxInternalsTable.tsx

-import { Table, Thead, Tbody, Tr, Th, TableContainer } from '@chakra-ui/react';
+import { Table, Thead, Tbody, Tr, Th, TableContainer, Link, Icon } from '@chakra-ui/react';
 import React from 'react';
 
 import type { data as txData } from 'data/txInternal';
+import arrowIcon from 'icons/arrows/east.svg';
 import TxInternalsTableItem from 'ui/tx/internals/TxInternalsTableItem';
+import type { Sort, SortField } from 'ui/tx/internals/utils';
+
+interface Props {
+  data: typeof txData;
+  sort: Sort | undefined;
+  onSortToggle: (field: SortField) => () => void;
+}
+
+const TxInternalsTable = ({ data, sort, onSortToggle }: Props) => {
+  const sortIconTransform = sort?.includes('asc') ? 'rotate(-90deg)' : 'rotate(90deg)';
 
-const TxInternalsTable = ({ data }: { data: typeof txData}) => {
   return (
     <TableContainer width="100%" mt={ 6 }>
       <Table variant="simple" size="sm">
@@ -14,8 +24,18 @@ const TxInternalsTable = ({ data }: { data: typeof txData}) => {
             <Th width="20%">From</Th>
             <Th width="24px" px={ 0 }/>
             <Th width="20%">To</Th>
-            <Th width="16%" isNumeric>Value</Th>
-            <Th width="16%" isNumeric>Gas limit</Th>
+            <Th width="16%" isNumeric>
+              <Link display="flex" alignItems="center" justifyContent="flex-end" onClick={ onSortToggle('value') } columnGap={ 1 }>
+                { sort?.includes('value') && <Icon as={ arrowIcon } boxSize={ 4 } transform={ sortIconTransform }/> }
+                Value
+              </Link>
+            </Th>
+            <Th width="16%" isNumeric>
+              <Link display="flex" alignItems="center" justifyContent="flex-end" onClick={ onSortToggle('gas-limit') } columnGap={ 1 }>
+                { sort?.includes('gas-limit') && <Icon as={ arrowIcon } boxSize={ 4 } transform={ sortIconTransform }/> }
+                Gas limit
+              </Link>
+            </Th>
           </Tr>
         </Thead>
         <Tbody>

ui/tx/internals/utils.ts

 import type { TxInternalsType } from 'types/api/tx';
 
+export type Sort = 'value-asc' | 'value-desc' | 'gas-limit-asc' | 'gas-limit-desc';
+export type SortField = 'value' | 'gas-limit';
+
 interface TxInternalsTypeItem {
   title: string;
   id: TxInternalsType;