diff --git a/src/pages/Pool/index.tsx b/src/pages/Pool/index.tsx
index d8651f396e..80edcde03f 100644
--- a/src/pages/Pool/index.tsx
+++ b/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() {
+ {closedPositions.length > 0 ? (
+
+ {t('Hide closed positions')}
+ setUserHideClosedPositions(!userHideClosedPositions)}
+ />
+
+ ) : null}
+
{positionsLoading ? (
@@ -190,8 +224,8 @@ export default function Pool() {
- ) : positions && positions.length > 0 ? (
-
+ ) : filteredPositions && filteredPositions.length > 0 ? (
+
) : (
diff --git a/src/state/user/actions.ts b/src/state/user/actions.ts
index dadb8f3270..be48be2bdd 100644
--- a/src/state/user/actions.ts
+++ b/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'
)
diff --git a/src/state/user/hooks.tsx b/src/state/user/hooks.tsx
index 0ec1d4abdc..b524c17e8c 100644
--- a/src/state/user/hooks.tsx
+++ b/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()
+
+ const hideClosedPositions = useSelector(
+ (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
diff --git a/src/state/user/reducer.ts b/src/state/user/reducer.ts
index e61062e59e..3a16d310f1 100644
--- a/src/state/user/reducer.ts
+++ b/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 = {}