fixed sorting state management

GenerationSoftware · Jun 26, 2024 · 1ffc2eb · 1ffc2eb
1 parent de093fb
commit 1ffc2eb
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 10 deletions.
diff --git a/apps/app/src/components/Vault/VaultFilters.tsx b/apps/app/src/components/Vault/VaultFilters.tsx
@@ -45,7 +45,8 @@ export const VaultFilters = (props: VaultFiltersProps) => {
   const prizePoolsArray = Object.values(prizePools)
 
   const { sortedVaults, isFetched: isFetchedSortedVaults } = useSortedVaults(vaults, {
-    prizePools: prizePoolsArray
+    prizePools: prizePoolsArray,
+    defaultSortId: 'totalBalance'
   })
 
   const { localVaultLists, importedVaultLists } = useSelectedVaultLists()

diff --git a/apps/app/src/components/Vault/VaultsDisplay.tsx b/apps/app/src/components/Vault/VaultsDisplay.tsx
@@ -27,7 +27,8 @@ export const VaultsDisplay = () => {
     setSortDirection,
     toggleSortDirection
   } = useSortedVaults(vaults, {
-    prizePools: prizePoolsArray
+    prizePools: prizePoolsArray,
+    defaultSortId: 'totalBalance'
   })
 
   const filteredVaults = useAtomValue(filteredVaultsAtom)

diff --git a/packages/hyperstructure-react-hooks/package.json b/packages/hyperstructure-react-hooks/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@generationsoftware/hyperstructure-react-hooks",
   "description": "React hooks library for interacting with PoolTogether contracts",
-  "version": "1.18.0",
+  "version": "1.18.1",
   "license": "MIT",
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

diff --git a/packages/hyperstructure-react-hooks/src/vaults/useSortedVaults.ts b/packages/hyperstructure-react-hooks/src/vaults/useSortedVaults.ts
@@ -1,8 +1,9 @@
 import { PrizePool, Vault } from '@generationsoftware/hyperstructure-client-js'
 import { Vaults } from '@generationsoftware/hyperstructure-client-js'
 import { TokenWithAmount, TokenWithPrice, TokenWithSupply } from '@shared/types'
-import { useMemo, useState } from 'react'
-import { Address, formatUnits } from 'viem'
+import { atom, useAtom } from 'jotai'
+import { useEffect, useMemo } from 'react'
+import { formatUnits } from 'viem'
 import { useAccount } from 'wagmi'
 import {
   useAllPrizeValue,
@@ -14,6 +15,9 @@ import {
 export type SortId = 'prizes' | 'winChance' | 'totalBalance' | 'userBalance'
 export type SortDirection = 'asc' | 'desc'
 
+const sortVaultsByAtom = atom<SortId>('totalBalance')
+const sortDirectionAtom = atom<SortDirection>('desc')
+
 /**
  * Returns a sorted array of vaults
  *
@@ -30,18 +34,21 @@ export const useSortedVaults = (
     defaultSortDirection?: SortDirection
   }
 ) => {
-  const [sortVaultsBy, setSortVaultsBy] = useState<SortId>(options?.defaultSortId ?? 'totalBalance')
-  const [sortDirection, setSortDirection] = useState<SortDirection>(
-    options?.defaultSortDirection ?? 'desc'
-  )
+  const [sortVaultsBy, setSortVaultsBy] = useAtom(sortVaultsByAtom)
+  const [sortDirection, setSortDirection] = useAtom(sortDirectionAtom)
+
+  useEffect(() => {
+    if (options?.defaultSortId) setSortVaultsBy(options.defaultSortId)
+    if (options?.defaultSortDirection) setSortDirection(options.defaultSortDirection)
+  }, [])
 
   const { address: userAddress } = useAccount()
 
   const { data: allVaultShareTokens, isFetched: isFetchedAllVaultShareTokens } =
     useAllVaultSharePrices(vaults)
 
   const { data: allUserVaultBalances, isFetched: isFetchedAllUserVaultBalances } =
-    useAllUserVaultBalances(vaults, userAddress as Address)
+    useAllUserVaultBalances(vaults, userAddress!)
 
   const { data: allPrizeValue, isFetched: isFetchedAllPrizeValue } = useAllPrizeValue(
     options?.prizePools ?? []