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 = {}