Merge pull request #3 from abdegenius/dev

Updates
strkfarm · Oct 15, 2024 · 1363efc · 1363efc
2 parents 8d463e8 + f3c8c74
commit 1363efc
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 12 deletions.
diff --git a/src/components/Pools.tsx b/src/components/Pools.tsx
@@ -48,12 +48,22 @@ export default function Pools() {
   }, [_filteredPools, currentPage, sort]);
 
   const handleSortChange = (field: string) => (order: 'asc' | 'desc') => {
-    setSort((prev) => {
-      const updatedSort = prev.filter((s) => s.field !== field);
-      return [...updatedSort, { field, order }];
-    });
+    if (field == 'RISK') {
+      setSort((prev) => {
+        const updatedSort = prev.filter((s) => s.field !== field);
+        return [...updatedSort, { field, order }];
+      });
+    } else if (field == 'APR' || field == 'TVL') {
+      const riskIndex = sort.findIndex((s) => s.field === 'RISK');
+      const new_sort: any = [];
+      if (riskIndex >= 0) {
+        new_sort.push({ field: 'RISK', order: sort[riskIndex].order });
+      }
+      new_sort.push({ field, order });
+      setSort(new_sort);
+    }
+    localStorage.setItem('sort', JSON.stringify(sort));
   };
-
   return (
     <Box float="left" width={'100%'}>
       <ProtocolFilters />
@@ -113,6 +123,7 @@ export default function Pools() {
                   mainColor="color2Text"
                   inActiveColor="#d9d9f726"
                   onClick={handleSortChange('APR')}
+                  // disabled={false}
                 />
               </Th>
               <Th textAlign={'right'}>
@@ -121,6 +132,7 @@ export default function Pools() {
                   mainColor="color2Text"
                   inActiveColor="#d9d9f726"
                   onClick={handleSortChange('RISK')}
+                  // disabled={false}
                 />
               </Th>
               <Th textAlign={'right'}>
@@ -129,6 +141,7 @@ export default function Pools() {
                   mainColor="color2Text"
                   inActiveColor="#d9d9f726"
                   onClick={handleSortChange('TVL')}
+                  // disabled={false}
                 />
               </Th>
             </Tr>

diff --git a/src/components/YieldCard.tsx b/src/components/YieldCard.tsx
@@ -529,6 +529,7 @@ export function HeaderSorter(props: {
   mainColor: string;
   inActiveColor: string;
   onClick: (order: 'asc' | 'desc') => void;
+  disabled?: boolean;
 }) {
   const [isAscending, setIsAscending] = useState(false);
   const [isDescending, setIsDescending] = useState(false);
@@ -555,10 +556,18 @@ export function HeaderSorter(props: {
       <Text color={props.mainColor}>{props.heading.toUpperCase()}</Text>
       <VStack gap={0} spacing={0}>
         <TriangleUpIcon
-          color={isAscending ? props.mainColor : props.inActiveColor}
+          color={
+            isAscending && !props.disabled
+              ? props.mainColor
+              : props.inActiveColor
+          }
         />
         <TriangleDownIcon
-          color={isDescending ? props.mainColor : props.inActiveColor}
+          color={
+            isDescending && !props.disabled
+              ? props.mainColor
+              : props.inActiveColor
+          }
         />
       </VStack>
     </HStack>

diff --git a/src/store/protocols.ts b/src/store/protocols.ts
@@ -215,17 +215,30 @@ export const allPoolsAtomWithStrategiesUnSorted = atom((get) => {
 
 const SORT_OPTIONS = ['DEFAULT', 'APR', 'TVL', 'RISK'] as const;
 
-export const sortAtom = atom<Array<{ field: string; order: 'asc' | 'desc' }>>([
+const defaultSortAtom = atom<Array<{ field: string; order: 'asc' | 'desc' }>>([
+  {
+    field: SORT_OPTIONS[1],
+    order: 'desc',
+  },
   {
-    field: SORT_OPTIONS[0],
+    field: SORT_OPTIONS[3],
     order: 'asc',
   },
 ]);
 
+export const sortAtom = atom<Array<{ field: string; order: 'asc' | 'desc' }>>([
+  // {
+  //   field: SORT_OPTIONS[0],
+  //   order: 'asc',
+  // },
+]);
+
 export const sortPoolsAtom = atom((get) => {
   const sort = get(sortAtom);
+  const default_sort = get(defaultSortAtom);
   const pools = get(allPoolsAtomWithStrategiesUnSorted);
-  const sortCriteria = [...sort].reverse();
+  const sortCriteria =
+    sort.length > 0 ? [...sort].reverse() : [...default_sort].reverse();
   const sortedPools = [...pools].sort((a, b) => {
     for (const sortItem of sortCriteria) {
       let result = 0;
@@ -245,8 +258,6 @@ export const sortPoolsAtom = atom((get) => {
     }
     return 0;
   });
-  // localStorage.setItem('sort', JSON.stringify(sortCriteria));
-
   return sortedPools;
 });