feat: sorting pools (#20)

* feat: sorting pools * fix: Implement liquidation threshold in AaveProvider
hexaonelabs · Dec 19, 2023 · 9c0eaed · 9c0eaed
1 parent 2eff1a1
commit 9c0eaed
Show file tree

Hide file tree

Showing 9 changed files with 357 additions and 281 deletions.
diff --git a/src/components/MarketsList.tsx b/src/components/MarketsList.tsx
@@ -16,7 +16,7 @@ import { PoolAccordionGroup } from "./PoolAccordionGroup";
 import { useAave } from "../context/AaveContext";
 import { useState } from "react";
 import { CHAIN_AVAILABLES } from "../constants/chains";
-import { IReserve } from "../interfaces/reserve.interface";
+import { IPoolGroup, IReserve } from "../interfaces/reserve.interface";
 
 export function MarketList(props: {
   filterBy?: {
@@ -31,6 +31,8 @@ export function MarketList(props: {
   }|null>(
     (filterFromParent as any)
   );
+  // sort state
+  const [sortBy, setSortBy] = useState<Partial<Record<keyof IPoolGroup, "asc" | "desc">> | null>(null);
   const filterArgs = { ...filterFromParent, ...filterBy } ;
   // remove all group from `poolGroup` that not respect all filterBy argument
   // and return only pool that respect all filterBy argument
@@ -192,13 +194,52 @@ export function MarketList(props: {
               "Assets",
               "Networks",
               "Total deposits",
-              " Total borrows",
+              "Total borrows",
               "Best deposit APY",
               "Best borrow APY",
             ]}
+            handleEvent={(e) => {
+              const { payload } = e;
+              switch (true) {
+                case payload === "Total deposits":
+                  setSortBy((s) => ({
+                    'totalSupplyBalance': s?.totalSupplyBalance === 'asc' ? 'desc' : 'asc'
+                  }));
+                  break;
+                case payload === "Total borrows":
+                  setSortBy((s) => ({
+                    'totalBorrowBalance': s?.totalBorrowBalance === 'asc' ? 'desc' : 'asc'
+                  }));
+                  break;
+                case payload === "Best deposit APY":
+                  setSortBy((s) => ({
+                    'topSupplyApy': s?.topSupplyApy === 'asc' ? 'desc' : 'asc'
+                  }));
+                  break;
+                case payload === "Best borrow APY":
+                  setSortBy((s) => ({
+                    'topBorrowApy': s?.topBorrowApy === 'asc' ? 'desc' : 'asc'
+                  }));
+                  break;
+              }
+            }}
           />
           <IonAccordionGroup>
-            {groups.map((poolGroup, index) => (
+            {groups
+            .sort((a: any, b: any) => {
+              // use state to sort
+              if (sortBy) {
+                const [key, order] = Object.entries(sortBy)[0];
+                if (order === "asc") {
+                  return a[key] > b[key] ? 1 : -1;
+                }
+                return a[key] < b[key] ? 1 : -1;
+              }
+              // default do not sort
+              return 0;
+
+            })
+            .map((poolGroup, index) => (
               <PoolAccordionGroup
                 key={index}
                 poolGroup={poolGroup}

diff --git a/src/components/PoolHeaderList.tsx b/src/components/PoolHeaderList.tsx
@@ -1,10 +1,14 @@
-import { IonCol, IonGrid, IonLabel, IonRow } from "@ionic/react";
+import { IonCol, IonGrid, IonIcon, IonLabel, IonRow } from "@ionic/react";
+import { chevronExpandSharp } from 'ionicons/icons';
 
 interface IPoolHeaderListProps {
   titles: string[];
   colSize?: string;
+  handleEvent: (action: {
+    type: string,
+    payload?: any
+  })=> void;
 }
-
 export function PoolHeaderList(props: IPoolHeaderListProps) {
   const { titles, colSize } = props;
 
@@ -16,9 +20,18 @@ export function PoolHeaderList(props: IPoolHeaderListProps) {
           if (index === 0) {
             Col = (
               <IonCol key={index} size-md={colSize ? colSize : '3'} class="ion-padding-start">
-                <IonLabel>
+                <IonLabel onClick={()=> props.handleEvent({
+                  type: 'sort',
+                  payload: 'symbol'
+                })}>
                   <h3>
                     {title}
+                    <IonIcon style={{
+                      fontSize: '0.6rem',
+                      marginLeft: '0.25rem',
+                      display: 'inline-block',
+                      cursor: 'pointer'
+                    }} icon={chevronExpandSharp} />
                   </h3>
                 </IonLabel>
               </IonCol>
@@ -32,7 +45,9 @@ export function PoolHeaderList(props: IPoolHeaderListProps) {
                 class="ion-text-center ion-hide-md-down"
               >
                 <IonLabel>
-                  <h3>{title}</h3>
+                  <h3>
+                    {title}
+                  </h3>
                 </IonLabel>
               </IonCol>
             );
@@ -43,6 +58,10 @@ export function PoolHeaderList(props: IPoolHeaderListProps) {
                 size="auto" 
                 size-md="2" 
                 class="ion-hide-md-down ion-text-end"
+                onClick={()=> props.handleEvent({
+                  type: 'sort',
+                  payload: title
+                })}
               >
                 <IonLabel>
                   <h3 
@@ -53,48 +72,19 @@ export function PoolHeaderList(props: IPoolHeaderListProps) {
                        }}
                   >
                     {title}
+                    <IonIcon style={{
+                      fontSize: '0.6rem',
+                      marginLeft: '0.25rem',
+                      display: 'inline-block',
+                      cursor: 'pointer'
+                    }} icon={chevronExpandSharp} />
                   </h3>
                 </IonLabel>
               </IonCol>
             );
           }
           return Col;
         })}
-
-        {/* <IonCol size-md="3" class="ion-padding-start">
-          <IonLabel color="medium">
-            <h3>Asset</h3>
-          </IonLabel>
-        </IonCol>
-        <IonCol
-          size="auto"
-          size-md="1"
-          class="ion-text-center ion-hide-md-down"
-        >
-          <IonLabel color="medium">
-            <h3>Protocol</h3>
-          </IonLabel>
-        </IonCol>
-        <IonCol size="auto" size-md="2" class="ion-text-end  ion-hide-md-down">
-          <IonLabel color="medium">
-            <h3 style={{ marginRight: "0.6rem" }}>Deposits</h3>
-          </IonLabel>
-        </IonCol>
-        <IonCol size="auto" size-md="2" class="ion-text-end  ion-hide-md-down">
-          <IonLabel color="medium">
-            <h3 style={{ marginRight: "1.2rem" }}>Borrows</h3>
-          </IonLabel>
-        </IonCol>
-        <IonCol size="auto" size-md="2" class="ion-text-end">
-          <IonLabel color="medium">
-            <h3 style={{ marginRight: "1.8rem" }}>Deposit APY</h3>
-          </IonLabel>
-        </IonCol>
-        <IonCol size="auto" size-md="2" class="ion-text-end ion-hide-sm-down">
-          <IonLabel color="medium">
-            <h3 style={{ paddingRight: "2rem" }}>Borrow APY</h3>
-          </IonLabel>
-        </IonCol> */}
       </IonRow>
     </IonGrid>
   );

diff --git a/src/components/PoolItemList.tsx b/src/components/PoolItemList.tsx
@@ -69,8 +69,8 @@ export function PoolItemList(props: IPoolItemListProps) {
                 iconSize={iconSize}
                 />
               <IonLabel class="ion-padding-start">
-                {pool?.symbol}
-                {(pool?.usageAsCollateralEnabled === false) && (
+                {pool.symbol} 
+                {(pool.usageAsCollateralEnabled === false) && (
                   <IonIcon
                     icon={warningOutline}
                     color="warning"