feat(pool): add toggle to hide inactive positions (#1676)

* feat(pool): add toggle to hide inactive positions in pools page

* cleanup code

* keep positions sorted, but move zero liquidity positions to end

* simplified sorting logic

src/pages/Pool/index.tsx

@@ -14,8 +14,11 @@ import { useWalletModalToggle } from 'state/application/hooks'
 import styled, { ThemeContext } from 'styled-components'
 import { HideSmall, TYPE } from 'theme'
 import { LoadingRows } from './styleds'
+import Toggle from 'components/Toggle'
+import { useUserHideClosedPositions } from 'state/user/hooks'
 
 import CTACards from './CTACards'
+import { PositionDetails } from 'types/position'
 
 const PageWrapper = styled(AutoColumn)`
   max-width: 870px;
@@ -92,14 +95,35 @@ const MainContentWrapper = styled.main`
   flex-direction: column;
 `
 
+const ShowInactiveToggle = styled.div`
+  display: grid;
+  align-items: center;
+  justify-items: end;
+
+  grid-template-columns: 1fr auto;
+  grid-column-gap: 8px;
+  padding: 0 8px;
+`
+
 export default function Pool() {
   const { account } = useActiveWeb3React()
   const toggleWalletModal = useWalletModalToggle()
   const { t } = useTranslation()
   const theme = useContext(ThemeContext)
+  const [userHideClosedPositions, setUserHideClosedPositions] = useUserHideClosedPositions()
 
   const { positions, loading: positionsLoading } = useV3Positions(account)
 
+  const [openPositions, closedPositions] = positions?.reduce<[PositionDetails[], PositionDetails[]]>(
+    (acc, p) => {
+      acc[p.liquidity?.isZero() ? 1 : 0].push(p)
+      return acc
+    },
+    [[], []]
+  ) ?? [[], []]
+
+  const filteredPositions = [...openPositions, ...(userHideClosedPositions ? [] : closedPositions)]
+
   const menuItems = [
     {
       content: (
@@ -174,6 +198,16 @@ export default function Pool() {
 
             <CTACards />
 
+            {closedPositions.length > 0 ? (
+              <ShowInactiveToggle>
+                <TYPE.darkGray>{t('Hide closed positions')}</TYPE.darkGray>
+                <Toggle
+                  isActive={userHideClosedPositions}
+                  toggle={() => setUserHideClosedPositions(!userHideClosedPositions)}
+                />
+              </ShowInactiveToggle>
+            ) : null}
+
             <MainContentWrapper>
               {positionsLoading ? (
                 <LoadingRows>
@@ -190,8 +224,8 @@ export default function Pool() {
                   <div />
                   <div />
                 </LoadingRows>
-              ) : positions && positions.length > 0 ? (
-                <PositionList positions={positions} />
+              ) : filteredPositions && filteredPositions.length > 0 ? (
+                <PositionList positions={filteredPositions} />
               ) : (
                 <NoLiquidity>
                   <TYPE.mediumHeader color={theme.text3} textAlign="center">

src/state/user/actions.ts

@@ -17,6 +17,7 @@ export const updateMatchesDarkMode = createAction<{ matchesDarkMode: boolean }>(
 export const updateUserDarkMode = createAction<{ userDarkMode: boolean }>('user/updateUserDarkMode')
 export const updateUserExpertMode = createAction<{ userExpertMode: boolean }>('user/updateUserExpertMode')
 export const updateUserSingleHopOnly = createAction<{ userSingleHopOnly: boolean }>('user/updateUserSingleHopOnly')
+export const updateHideClosedPositions = createAction<{ userHideClosedPositions: boolean }>('user/hideClosedPositions')
 export const updateUserSlippageTolerance = createAction<{ userSlippageTolerance: number | 'auto' }>(
   'user/updateUserSlippageTolerance'
 )

src/state/user/hooks.tsx

@@ -18,6 +18,7 @@ import {
   toggleURLWarning,
   updateUserDarkMode,
   updateUserDeadline,
+  updateHideClosedPositions,
   updateUserExpertMode,
   updateUserSingleHopOnly,
   updateUserSlippageTolerance,
@@ -137,6 +138,23 @@ export function useUserSlippageTolerance(): Percent | 'auto' {
   )
 }
 
+export function useUserHideClosedPositions(): [boolean, (newHideClosedPositions: boolean) => void] {
+  const dispatch = useDispatch<AppDispatch>()
+
+  const hideClosedPositions = useSelector<AppState, AppState['user']['userHideClosedPositions']>(
+    (state) => state.user.userHideClosedPositions
+  )
+
+  const setHideClosedPositions = useCallback(
+    (newHideClosedPositions: boolean) => {
+      dispatch(updateHideClosedPositions({ userHideClosedPositions: newHideClosedPositions }))
+    },
+    [dispatch]
+  )
+
+  return [hideClosedPositions, setHideClosedPositions]
+}
+
 /**
  * Same as above but replaces the auto with a default value
  * @param defaultSlippageTolerance the default value to replace auto with

src/state/user/reducer.ts

@@ -15,6 +15,7 @@ import {
   updateUserDeadline,
   toggleURLWarning,
   updateUserSingleHopOnly,
+  updateHideClosedPositions,
 } from './actions'
 
 const currentTimestamp = () => new Date().getTime()
@@ -30,6 +31,9 @@ export interface UserState {
 
   userSingleHopOnly: boolean // only allow swaps on direct pairs
 
+  // hides closed (inactive) positions across the app
+  userHideClosedPositions: boolean
+
   // user defined slippage tolerance in bips, used in all txns
   userSlippageTolerance: number | 'auto'
   userSlippageToleranceHasBeenMigratedToAuto: boolean // temporary flag for migration status
@@ -63,6 +67,7 @@ export const initialState: UserState = {
   matchesDarkMode: false,
   userExpertMode: false,
   userSingleHopOnly: false,
+  userHideClosedPositions: false,
   userSlippageTolerance: 'auto',
   userSlippageToleranceHasBeenMigratedToAuto: true,
   userDeadline: DEFAULT_DEADLINE_FROM_NOW,
@@ -130,6 +135,9 @@ export default createReducer(initialState, (builder) =>
     .addCase(updateUserSingleHopOnly, (state, action) => {
       state.userSingleHopOnly = action.payload.userSingleHopOnly
     })
+    .addCase(updateHideClosedPositions, (state, action) => {
+      state.userHideClosedPositions = action.payload.userHideClosedPositions
+    })
     .addCase(addSerializedToken, (state, { payload: { serializedToken } }) => {
       if (!state.tokens) {
         state.tokens = {}