feat: sort delegators

TalismanSociety · Nov 9, 2024 · 4fc6fe3 · 4fc6fe3
1 parent 2c2e1e7
commit 4fc6fe3
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 17 deletions.
diff --git a/apps/extension/src/ui/domains/Staking/Bittensor/BittensorBondDelegatorSelectDrawer.tsx b/apps/extension/src/ui/domains/Staking/Bittensor/BittensorBondDelegatorSelectDrawer.tsx
@@ -3,19 +3,26 @@ import { useOpenClose } from "talisman-ui"
 
 import { BondOption } from "../hooks/bittensor/types"
 import { useCombinedBittensorValidatorsData } from "../hooks/bittensor/useCombinedBittensorValidatorsData"
-import { BondSelectDrawer, SortMethod } from "../shared/BondSelectDrawer"
+import { BondSelectDrawer } from "../shared/BondSelectDrawer"
 
 type BittensorBondDelegatorSelectDrawerProps = {
   poolName: string
   poolId: number | string | null | undefined
   setPoolId?: (poolId: number | string) => void
 }
 
+type SortValue = "name" | "totalStaked" | "totalStakers" | "apr"
+
+export type SortMethod = {
+  label: string
+  value: SortValue
+}
+
 const sortMethods: SortMethod[] = [
   { label: "Name", value: "name" },
   { label: "Total Staked", value: "totalStaked" },
   { label: "N° of Stakers", value: "totalStakers" },
-  { label: "Rewards", value: "apy" },
+  { label: "Rewards", value: "apr" },
 ]
 
 export const BittensorBondDelegatorSelectDrawer: FC<BittensorBondDelegatorSelectDrawerProps> = ({
@@ -32,9 +39,24 @@ export const BittensorBondDelegatorSelectDrawer: FC<BittensorBondDelegatorSelect
   const { combinedValidatorsData, isLoading: combinedValidatorsDataLoading } =
     useCombinedBittensorValidatorsData()
 
+  const sortBondOptions = (data: BondOption[], sortBy: SortValue): BondOption[] => {
+    return data.sort((a, b) => {
+      if (sortBy === "name") {
+        // Sort by name in ascending order (A to Z)
+        if (a.name < b.name) return -1
+        if (a.name > b.name) return 1
+      } else {
+        // Sort other fields in descending order
+        if (a[sortBy] > b[sortBy]) return -1
+        if (a[sortBy] < b[sortBy]) return 1
+      }
+      return 0 // Keep them in the same place if equal
+    })
+  }
+
   useEffect(() => {
     if (combinedValidatorsData.length && !combinedValidatorsDataLoading) {
-      setSortedDelegators(combinedValidatorsData)
+      setSortedDelegators(sortBondOptions(combinedValidatorsData, "name"))
     }
   }, [combinedValidatorsData, combinedValidatorsDataLoading])
 
@@ -44,7 +66,7 @@ export const BittensorBondDelegatorSelectDrawer: FC<BittensorBondDelegatorSelect
 
   const handleSortMethodChange = (method: SortMethod) => {
     setSelectedSortMethod(method)
-    // console.log("implement sorting by ", method.value)
+    setSortedDelegators((prev) => sortBondOptions(prev, method.value))
   }
 
   return (

diff --git a/apps/extension/src/ui/domains/Staking/shared/BondDrawerOption.tsx b/apps/extension/src/ui/domains/Staking/shared/BondDrawerOption.tsx
@@ -62,9 +62,7 @@ export const BondDrawerOption = ({
             {option.totalStakers} <UserRightIcon />
           </div>
         </div>
-        <div className="ml-auto animate-pulse">
-          {option.apr ? `${(option.apr * 100).toFixed(2)}%` : "N/A"}
-        </div>
+        <div className="ml-auto">{option.apr ? `${(option.apr * 100).toFixed(2)}%` : "N/A"}</div>
       </div>
     </button>
   )

diff --git a/apps/extension/src/ui/domains/Staking/shared/BondSelectDrawer.tsx b/apps/extension/src/ui/domains/Staking/shared/BondSelectDrawer.tsx
@@ -1,22 +1,21 @@
 import { ChevronLeftIcon, SettingsIcon } from "@talismn/icons"
 import { classNames } from "@talismn/util"
-import { FC } from "react"
 import { useTranslation } from "react-i18next"
 import { Button, Drawer, IconButton } from "talisman-ui"
 
 import { BondOption } from "../hooks/bittensor/types"
 import { BondDrawerOption, BondDrawerOptionSkeleton } from "./BondDrawerOption"
 
-export type SortMethod = {
+export type SortMethod<T> = {
   label: string
-  value: string
+  value: T
 }
 
-type BondSelectDrawerProps = {
+type BondSelectDrawerProps<T> = {
   poolName: string
-  sortMethods: SortMethod[]
-  selectedSortMethod: SortMethod
-  handleSortMethodChange: (method: SortMethod) => void
+  sortMethods: SortMethod<T>[]
+  selectedSortMethod: SortMethod<T>
+  handleSortMethodChange: (method: SortMethod<T>) => void
   handleSubmitPoolId: () => void
   handleSelectPoolId: React.Dispatch<React.SetStateAction<number | string | null | undefined>>
   bondOptions: BondOption[]
@@ -28,7 +27,7 @@ type BondSelectDrawerProps = {
   isLoading: boolean
 }
 
-export const BondSelectDrawer: FC<BondSelectDrawerProps> = ({
+export const BondSelectDrawer = <T,>({
   poolName,
   sortMethods,
   selectedSortMethod,
@@ -42,7 +41,7 @@ export const BondSelectDrawer: FC<BondSelectDrawerProps> = ({
   handleSubmitPoolId,
   close,
   toggle,
-}) => {
+}: BondSelectDrawerProps<T>) => {
   const { t } = useTranslation()
 
   return (
@@ -73,7 +72,7 @@ export const BondSelectDrawer: FC<BondSelectDrawerProps> = ({
             <div className="flex justify-between">
               {sortMethods.map((method) => (
                 <button
-                  key={method.value}
+                  key={method.label}
                   onClick={() => handleSortMethodChange(method)}
                   className={classNames(
                     "rounded-[12px] px-[8px] py-[6px] text-sm",