Skip to content

Commit

Permalink
Showing 4 changed files with 74 additions and 18 deletions.
8 changes: 5 additions & 3 deletions src/hooks/useMarketsData.ts
Original file line number Diff line number Diff line change
@@ -18,7 +18,7 @@ import {
} from '@/hooks/usePerpetualMarketSparklines';

import { useAppSelector } from '@/state/appTypes';
import { getFavoritedMarkets } from '@/state/appUiConfigsSelectors';
import { getFavoritedMarkets, getShouldHideLaunchableMarkets } from '@/state/appUiConfigsSelectors';
import { getAssets } from '@/state/assetsSelectors';
import { getPerpetualMarkets, getPerpetualMarketsClobIds } from '@/state/perpetualsSelectors';

@@ -137,6 +137,8 @@ export const useMarketsData = ({
const sevenDaysSparklineData = usePerpetualMarketSparklines();
const featureFlags = useAllStatsigGateValues();
const unlaunchedMarkets = useMetadataService();
const shouldHideLaunchableMarkets =
useAppSelector(getShouldHideLaunchableMarkets) || hideUnlaunchedMarkets;
const favoritedMarkets = useAppSelector(getFavoritedMarkets, shallowEqual);
const hasMarketIds = Object.keys(allPerpetualMarkets).length > 0;

@@ -198,7 +200,7 @@ export const useMarketsData = ({
);
});

if (!hideUnlaunchedMarkets && testFlags.pml) {
if (!shouldHideLaunchableMarkets && testFlags.pml) {
const unlaunchedMarketsData = Object.values(unlaunchedMarkets.data)
.sort(sortByMarketCap)
.map((market) => {
@@ -254,7 +256,7 @@ export const useMarketsData = ({
return listOfMarkets;
}, [
allPerpetualMarkets,
hideUnlaunchedMarkets,
shouldHideLaunchableMarkets,
featureFlags,
sevenDaysSparklineData,
allPerpetualClobIds,
9 changes: 9 additions & 0 deletions src/state/appUiConfigs.ts
Original file line number Diff line number Diff line change
@@ -36,6 +36,7 @@ export interface AppUIConfigsState {
hasSeenLaunchIncentives: boolean;
defaultToAllMarketsInPositionsOrdersFills: boolean;
displayUnit: DisplayUnit;
shouldHideLaunchableMarkets: boolean;
favoritedMarkets: string[];
}

@@ -47,6 +48,7 @@ export const initialState: AppUIConfigsState = {
hasSeenLaunchIncentives: false,
defaultToAllMarketsInPositionsOrdersFills: true,
displayUnit: DisplayUnit.Asset,
shouldHideLaunchableMarkets: false,
favoritedMarkets: [],
};

@@ -69,6 +71,12 @@ export const appUiConfigsSlice = createSlice({
markLaunchIncentivesSeen: (state: AppUIConfigsState) => {
state.hasSeenLaunchIncentives = true;
},
setShouldHideLaunchableMarkets: (
state: AppUIConfigsState,
{ payload }: PayloadAction<boolean>
) => {
state.shouldHideLaunchableMarkets = payload;
},
setDisplayUnit: (
state: AppUIConfigsState,
{
@@ -107,6 +115,7 @@ export const {
setAppThemeSetting,
setAppColorMode,
markLaunchIncentivesSeen,
setShouldHideLaunchableMarkets,
setDisplayUnit,
favoriteMarket,
unfavoriteMarket,
3 changes: 3 additions & 0 deletions src/state/appUiConfigsSelectors.ts
Original file line number Diff line number Diff line change
@@ -48,6 +48,9 @@ export const getDefaultToAllMarketsInPositionsOrdersFills = (state: RootState) =

export const getSelectedDisplayUnit = (state: RootState) => state.appUiConfigs.displayUnit;

export const getShouldHideLaunchableMarkets = (state: RootState) =>
state.appUiConfigs.shouldHideLaunchableMarkets;

export const getFavoritedMarkets = (state: RootState) => state.appUiConfigs.favoritedMarkets;

export const getIsMarketFavorited = () =>
72 changes: 57 additions & 15 deletions src/views/MarketFilter.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { useCallback, useMemo } from 'react';

import { useNavigate } from 'react-router-dom';
import styled, { css } from 'styled-components';

@@ -16,8 +18,14 @@ import { layoutMixins } from '@/styles/layoutMixins';
import { Button } from '@/components/Button';
import { Icon } from '@/components/Icon';
import { SearchInput } from '@/components/SearchInput';
import { Switch } from '@/components/Switch';
import { NewTag } from '@/components/Tag';
import { ToggleGroup } from '@/components/ToggleGroup';
import { WithLabel } from '@/components/WithLabel';

import { useAppDispatch, useAppSelector } from '@/state/appTypes';
import { setShouldHideLaunchableMarkets } from '@/state/appUiConfigs';
import { getShouldHideLaunchableMarkets } from '@/state/appUiConfigsSelectors';

import { testFlags } from '@/lib/testFlags';

@@ -42,32 +50,66 @@ export const MarketFilter = ({
}: MarketFilterProps) => {
const stringGetter = useStringGetter();
const navigate = useNavigate();
const dispatch = useAppDispatch();
const { hasPotentialMarketsData } = usePotentialMarkets();
const { uiRefresh, pml: showLaunchMarkets } = testFlags;
const showProposeButton = hasPotentialMarketsData && !hideNewMarketButton;
const shouldHideLaunchableMarkets = useAppSelector(getShouldHideLaunchableMarkets);

const onShouldHideLaunchableMarkets = useCallback(
(shouldHide: boolean) => {
dispatch(setShouldHideLaunchableMarkets(!shouldHide));
},
[dispatch]
);

const unlaunchedMarketSwitch = useMemo(
() =>
testFlags.pml && (
<WithLabel
label={stringGetter({ key: STRING_KEYS.SHOW_LAUNCHABLE_MARKETS })}
tw="flex flex-row items-center"
>
<Switch
name="show-launchable"
checked={!shouldHideLaunchableMarkets}
onCheckedChange={onShouldHideLaunchableMarkets}
tw="font-mini-book"
/>
</WithLabel>
),
[stringGetter, onShouldHideLaunchableMarkets, shouldHideLaunchableMarkets]
);

const filterLaunchable = (filter: MarketFilters) => {
return filter !== MarketFilters.LAUNCHABLE;
};

const filterToggles = (
<$ToggleGroup
items={
Object.values(filters).map((value) => {
const { labelIconName, labelStringKey, isNew } = MARKET_FILTER_OPTIONS[value];
return {
label: labelIconName ? (
<Icon iconName={labelIconName} />
) : (
stringGetter({
key: labelStringKey,
fallback: value,
})
),
slotAfter: isNew && <NewTag>{stringGetter({ key: STRING_KEYS.NEW })}</NewTag>,
value,
};
}) satisfies MenuItem<MarketFilters>[]
Object.values(filters)
.filter(filterLaunchable)
.map((value) => {
const { labelIconName, labelStringKey, isNew } = MARKET_FILTER_OPTIONS[value];
return {
label: labelIconName ? (
<Icon iconName={labelIconName} />
) : (
stringGetter({
key: labelStringKey,
fallback: value,
})
),
slotAfter: isNew && <NewTag>{stringGetter({ key: STRING_KEYS.NEW })}</NewTag>,
value,
};
}) satisfies MenuItem<MarketFilters>[]
}
value={selectedFilter}
onValueChange={onChangeFilter}
overflow={uiRefresh ? 'wrap' : 'scroll'}
slotBefore={unlaunchedMarketSwitch}
/>
);

0 comments on commit 3bf124e

Please sign in to comment.