diff --git a/src/constants/markets.ts b/src/constants/markets.ts index edb44f9..0741879 100644 --- a/src/constants/markets.ts +++ b/src/constants/markets.ts @@ -26,3 +26,5 @@ export enum FundingDirection { ToShort = 'ToShort', ToLong = 'ToLong', } + +export const MARKETS_TO_DISPLAY = ['BTC-USD', 'ETH-USD', 'LINK-USD', 'SOL-USD']; diff --git a/src/hooks/useMarketsData.ts b/src/hooks/useMarketsData.ts index 020db64..d1c25fe 100644 --- a/src/hooks/useMarketsData.ts +++ b/src/hooks/useMarketsData.ts @@ -1,7 +1,14 @@ import { useMemo } from 'react'; import { useSelector, shallowEqual } from 'react-redux'; -import { MarketFilters, MARKET_FILTER_LABELS, type MarketData } from '@/constants/markets'; +import { + MarketFilters, + MARKET_FILTER_LABELS, + type MarketData, + MARKETS_TO_DISPLAY, +} from '@/constants/markets'; + +import { testFlags } from '@/hooks/useTestFlags'; import { getAssets } from '@/state/assetsSelectors'; import { getPerpetualMarkets } from '@/state/perpetualsSelectors'; @@ -42,7 +49,9 @@ export const useMarketsData = ( }, [allPerpetualMarkets, allAssets]); const filteredMarkets = useMemo(() => { - const filtered = markets.filter(filterFunctions[filter]); + const filtered = markets + .filter(filterFunctions[filter]) + .filter(({ id }) => (testFlags.displayAllMarkets ? true : MARKETS_TO_DISPLAY.includes(id))); if (searchFilter) { return filtered.filter( diff --git a/src/hooks/useTestFlags.tsx b/src/hooks/useTestFlags.tsx index 3aedaee..f65eab3 100644 --- a/src/hooks/useTestFlags.tsx +++ b/src/hooks/useTestFlags.tsx @@ -16,6 +16,13 @@ class TestFlags { get displayInitializingMarkets() { return !!this.queryParams.displayInitializingMarkets; } + + /** + * @description We are temporarily displaying a subset of ACTIVE markets, this flag will allow you to see all ACTIVE markets + */ + get displayAllMarkets() { + return !!this.queryParams.displayAllMarkets; + } } export const testFlags = new TestFlags(); diff --git a/src/views/ExchangeBillboards.tsx b/src/views/ExchangeBillboards.tsx index d6ce345..863d781 100644 --- a/src/views/ExchangeBillboards.tsx +++ b/src/views/ExchangeBillboards.tsx @@ -2,7 +2,9 @@ import styled, { type AnyStyledComponent } from 'styled-components'; import { shallowEqual, useSelector } from 'react-redux'; import { STRING_KEYS } from '@/constants/localization'; +import { MARKETS_TO_DISPLAY } from '@/constants/markets'; import { useBreakpoints, useStringGetter } from '@/hooks'; +import { testFlags } from '@/hooks/useTestFlags'; import { breakpoints } from '@/styles'; import { layoutMixins } from '@/styles/layoutMixins'; @@ -32,6 +34,7 @@ export const ExchangeBillboards: React.FC = ({ Object.values(perpetualMarkets) .filter(Boolean) + .filter(({ id }) => (testFlags.displayAllMarkets ? true : MARKETS_TO_DISPLAY.includes(id))) .forEach(({ oraclePrice, perpetual }) => { const { volume24H, trades24H, openInterest = 0 } = perpetual || {}; volume24HUSDC += volume24H ?? 0;