Merge branch 'main' into refactor/handler-types

balancer · Jan 10, 2024 · ead1bab · ead1bab
2 parents 651d8b3 + e0b2f82
commit ead1bab
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 13 deletions.
diff --git a/app/(app)/pools/page.tsx b/app/(app)/pools/page.tsx
@@ -17,6 +17,7 @@ interface Props {
     poolTypes?: string
     networks?: string
     textSearch?: string
+    userAddress?: string
   }
 }
 
@@ -39,6 +40,7 @@ export default async function Pools({ searchParams }: Props) {
     where: {
       poolTypeIn: mappedPoolTypes,
       chainIn: networks.length > 0 ? networks : PROJECT_CONFIG.supportedNetworks,
+      userAddress: poolListQueryStateParsers.userAddress.parseServerSide(searchParams.userAddress),
     },
     textSearch: poolListQueryStateParsers.textSearch.parseServerSide(searchParams.textSearch),
   }

diff --git a/lib/modules/pool/PoolList/PoolListFilters.tsx b/lib/modules/pool/PoolList/PoolListFilters.tsx
@@ -126,6 +126,8 @@ const FilterButton = forwardRef<ButtonProps, 'button'>((props, ref) => {
 })
 
 export function PoolListFilters() {
+  const { isConnected } = useUserAccount()
+
   return (
     <VStack align="flex-start" w="full">
       <HStack w="full">
@@ -139,11 +141,16 @@ export function PoolListFilters() {
             <PopoverCloseButton />
             <PopoverBody p="md">
               <VStack align="start">
-                <Heading as="h3" size="sm" mb="1.5">
-                  My Liquidity
-                </Heading>
-                <UserPoolFilter />
-                <Divider />
+                {isConnected && (
+                  <>
+                    <Heading as="h3" size="sm" mb="1.5">
+                      My Liquidity
+                    </Heading>
+                    <UserPoolFilter />
+                    <Divider />
+                  </>
+                )}
+
                 <Heading as="h3" size="sm" mb="1.5">
                   Pool types
                 </Heading>

diff --git a/lib/modules/pool/PoolList/usePoolList.tsx b/lib/modules/pool/PoolList/usePoolList.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { createContext, ReactNode } from 'react'
+import { createContext, ReactNode, useEffect } from 'react'
 import {
   GetPoolsDocument,
   GetPoolsQuery,
@@ -10,9 +10,12 @@ import { useQuery } from '@apollo/experimental-nextjs-app-support/ssr'
 import { usePoolListQueryState } from './usePoolListQueryState'
 import { useMandatoryContext } from '@/lib/shared/utils/contexts'
 import { useSeedApolloCache } from '@/lib/shared/hooks/useSeedApolloCache'
+import { useUserAccount } from '../../web3/useUserAccount'
+import { isAddress } from 'viem'
 
 export function _usePoolList() {
-  const { queryVariables } = usePoolListQueryState()
+  const { queryVariables, toggleUserAddress } = usePoolListQueryState()
+  const { userAddress } = useUserAccount()
 
   const { data, loading, previousData, refetch, networkStatus, error } = useQuery(
     GetPoolsDocument,
@@ -21,6 +24,14 @@ export function _usePoolList() {
 
   const pools = loading && previousData ? previousData.pools : data?.pools || []
 
+  // If the user has previously selected to filter by their liquidity and then
+  // changes their connected wallet, we want to automatically update the filter.
+  useEffect(() => {
+    if (isAddress(userAddress) && isAddress(queryVariables.where.userAddress || '')) {
+      toggleUserAddress(true, userAddress)
+    }
+  }, [userAddress])
+
   return {
     pools,
     count: data?.count || previousData?.count,

diff --git a/lib/modules/pool/PoolList/usePoolOrderByState.ts b/lib/modules/pool/PoolList/usePoolOrderByState.ts
@@ -2,17 +2,15 @@ import { GqlPoolOrderBy } from '@/lib/shared/services/api/generated/graphql'
 import { useState, useEffect } from 'react'
 import { usePoolListQueryState } from './usePoolListQueryState'
 
+const defaultOrderBy = [GqlPoolOrderBy.TotalLiquidity, GqlPoolOrderBy.Volume24h, GqlPoolOrderBy.Apr]
+
 export function usePoolOrderByState() {
   const { sorting, setSorting, userAddress } = usePoolListQueryState()
-  const [orderBy, setOrderBy] = useState([
-    GqlPoolOrderBy.TotalLiquidity,
-    GqlPoolOrderBy.Volume24h,
-    GqlPoolOrderBy.Apr,
-  ])
+  const [orderBy, setOrderBy] = useState(defaultOrderBy)
 
   useEffect(() => {
     if (userAddress) {
-      setOrderBy([GqlPoolOrderBy.UserbalanceUsd, ...orderBy])
+      setOrderBy([GqlPoolOrderBy.UserbalanceUsd, ...defaultOrderBy])
       setSorting([{ id: GqlPoolOrderBy.UserbalanceUsd, desc: true }])
     } else {
       setOrderBy(orderBy.filter(item => item !== GqlPoolOrderBy.UserbalanceUsd))