Fix vault chain selection (#1123)

Keep the vault list aligned with the selected chain filter and\nmake chain switching behave consistently across the page.\n\n- apply selected-chain filtering to holdings in both V2 and V3\n  vault filters so other-chain rows do not leak into the list\n- reuse a single-chain selection helper for the top selector and\n  row chips so switching chains cannot drift into mixed states\n- add focused tests for selected-chain matching and single-chain\n  selection behavior

Author: rossgalloway

src/components/pages/vaults/components/filters/VaultsFiltersBar.tsx

@@ -8,6 +8,7 @@ import {
   TransitionChild
 } from '@headlessui/react'
 import { usePlausible } from '@hooks/usePlausible'
+import { resolveNextSingleChainSelection } from '@pages/vaults/utils/chainSelection'
 import { DEFAULT_MIN_TVL } from '@pages/vaults/utils/constants'
 import { getChainDescription } from '@pages/vaults/utils/vaultTagCopy'
 import type { TMultiSelectOptionProps } from '@shared/components/MultiSelectDropdown'
@@ -197,11 +198,7 @@ export function VaultsFiltersBar({
   }
 
   const handleChainToggle = (chainId: number): void => {
-    if (chains.selected && chains.selected.length === 1 && chains.selected[0] === chainId) {
-      chains.onChange(null)
-      return
-    }
-    chains.onChange([chainId])
+    chains.onChange(resolveNextSingleChainSelection(chains.selected, chainId))
   }
 
   const handleApplyAdditionalChains = (ids: number[]): void => {

src/components/pages/vaults/hooks/useVaultsPageModel.ts

@@ -20,6 +20,7 @@ import {
   getCommonBlockingKeys,
   shouldShowComboBlockingAction
 } from '@pages/vaults/utils/blockingFilterInsights'
+import { resolveNextSingleChainSelection } from '@pages/vaults/utils/chainSelection'
 import {
   AGGRESSIVENESS_OPTIONS,
   AVAILABLE_TOGGLE_VALUE,
@@ -810,7 +811,7 @@ export function useVaultsPageModel(): TVaultsPageModel {
   )
   const handleToggleChain = useCallback(
     (chainId: number): void => {
-      handleChainsChange(toggleInArray(displayedChains ?? null, chainId))
+      handleChainsChange(resolveNextSingleChainSelection(displayedChains, chainId))
     },
     [displayedChains, handleChainsChange]
   )

src/components/pages/vaults/utils/chainSelection.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest'
+import { resolveNextSingleChainSelection } from './chainSelection'
+
+describe('resolveNextSingleChainSelection', () => {
+  it('selects the requested chain when nothing is selected', () => {
+    expect(resolveNextSingleChainSelection(null, 1)).toEqual([1])
+    expect(resolveNextSingleChainSelection([], 10)).toEqual([10])
+  })
+
+  it('switches directly to the requested chain', () => {
+    expect(resolveNextSingleChainSelection([1], 10)).toEqual([10])
+    expect(resolveNextSingleChainSelection([1, 10], 42161)).toEqual([42161])
+  })
+
+  it('clears the filter when reselecting the only active chain', () => {
+    expect(resolveNextSingleChainSelection([1], 1)).toBeNull()
+  })
+})

src/components/pages/vaults/utils/chainSelection.ts

@@ -0,0 +1,10 @@
+export function resolveNextSingleChainSelection(
+  currentChains: number[] | null | undefined,
+  chainId: number
+): number[] | null {
+  if (currentChains && currentChains.length === 1 && currentChains[0] === chainId) {
+    return null
+  }
+
+  return [chainId]
+}

src/components/shared/hooks/useV2VaultFilter.ts

@@ -32,6 +32,7 @@ import {
   createCheckHasHoldings,
   getVaultKey,
   isV3Vault,
+  matchesSelectedChains,
   type TVaultFlags
 } from './useVaultFilterUtils'
 
@@ -307,7 +308,7 @@ export function useV2VaultFilter(
         return
       }
 
-      if (!hasUserHoldings && hasChainFilter && !chains?.includes(getVaultChainID(vault))) {
+      if (hasChainFilter && !matchesSelectedChains(getVaultChainID(vault), chains)) {
         return
       }
 

src/components/shared/hooks/useV3VaultFilter.ts

@@ -32,6 +32,7 @@ import {
   createCheckHasHoldings,
   getVaultKey,
   isV3Vault,
+  matchesSelectedChains,
   type TVaultFlags
 } from './useVaultFilterUtils'
 
@@ -320,7 +321,7 @@ export function useV3VaultFilter(
         return
       }
 
-      if (!hasUserHoldings && hasChainFilter && !chains?.includes(getVaultChainID(vault))) {
+      if (hasChainFilter && !matchesSelectedChains(getVaultChainID(vault), chains)) {
         return
       }
 

src/components/shared/hooks/useVaultFilterUtils.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { getVaultHoldingsUsdValue } from './useVaultFilterUtils'
+import { getVaultHoldingsUsdValue, matchesSelectedChains } from './useVaultFilterUtils'
 
 const VAULT_ADDRESS = '0x8589462548984c5C0f2C0140FB276351B5a77fe1'
 const ASSET_ADDRESS = '0x0000000000000000000000000000000000000002'
@@ -69,3 +69,15 @@ describe('getVaultHoldingsUsdValue', () => {
     expect(value).toBeCloseTo(2.1, 8)
   })
 })
+
+describe('matchesSelectedChains', () => {
+  it('treats null or empty selections as all chains', () => {
+    expect(matchesSelectedChains(1, null)).toBe(true)
+    expect(matchesSelectedChains(1, [])).toBe(true)
+  })
+
+  it('only matches vaults from the selected chains', () => {
+    expect(matchesSelectedChains(1, [1])).toBe(true)
+    expect(matchesSelectedChains(10, [1])).toBe(false)
+  })
+})

src/components/shared/hooks/useVaultFilterUtils.ts

@@ -241,6 +241,10 @@ export function matchesSearch(vault: TVaultLike, search: string): boolean {
   }
 }
 
+export function matchesSelectedChains(chainID: number, chains: number[] | null | undefined): boolean {
+  return !chains?.length || chains.includes(chainID)
+}
+
 export function isV3Vault(vault: TVaultLike, isAllocatorOverride: boolean): boolean {
   const version = getVaultVersion(vault)
   return version.startsWith('3') || version.startsWith('~3') || isAllocatorOverride