Jared Vu
1a41ccaf2a
* 🚧 feat(token-page): Scaffold sidebar components for token page * 🚧 feat(staking/governance): Scaffold adding Panels to Staking and Governance page * ✨ Update and add icons * 🧱 Add strideZoneApp to shared config * 🧱 Add dialogs, update ExternalLinkDialog * 🚧 Add New Panels/Update paths * Fix mobile Profile Panel * 💄 fix desktop padding * ✨ Add New tag * 💄 Highlight tag on StrideStakingPanel * 💄 Single columns for panels on mobile breakpoint * 💄 fix import nits and alignment nits on panels * Add circular keplr icon
70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
import { useMemo } from 'react';
|
|
import { useSelector, shallowEqual } from 'react-redux';
|
|
|
|
import { MarketFilters, MARKET_FILTER_LABELS, type MarketData } from '@/constants/markets';
|
|
|
|
import { getAssets } from '@/state/assetsSelectors';
|
|
import { getPerpetualMarkets } from '@/state/perpetualsSelectors';
|
|
|
|
import { isTruthy } from '@/lib/isTruthy';
|
|
|
|
const filterFunctions = {
|
|
[MarketFilters.ALL]: () => true,
|
|
[MarketFilters.LAYER_1]: (market: MarketData) => {
|
|
return market.asset.tags?.toArray().includes('Layer 1');
|
|
},
|
|
[MarketFilters.DEFI]: (market: MarketData) => {
|
|
return market.asset.tags?.toArray().includes('Defi');
|
|
},
|
|
};
|
|
|
|
export const useMarketsData = (
|
|
filter: MarketFilters = MarketFilters.ALL,
|
|
searchFilter?: string
|
|
): {
|
|
markets: MarketData[];
|
|
filteredMarkets: MarketData[];
|
|
marketFilters: string[];
|
|
} => {
|
|
const allPerpetualMarkets = useSelector(getPerpetualMarkets, shallowEqual) || {};
|
|
const allAssets = useSelector(getAssets, shallowEqual) || {};
|
|
|
|
const markets = useMemo(() => {
|
|
return Object.values(allPerpetualMarkets)
|
|
.filter(isTruthy)
|
|
.map((marketData) => ({
|
|
asset: allAssets[marketData.assetId] ?? {},
|
|
tickSizeDecimals: marketData.configs?.tickSizeDecimals,
|
|
...marketData,
|
|
...marketData.perpetual,
|
|
...marketData.configs,
|
|
})) as MarketData[];
|
|
}, [allPerpetualMarkets, allAssets]);
|
|
|
|
const filteredMarkets = useMemo(() => {
|
|
const filtered = markets.filter(filterFunctions[filter]);
|
|
|
|
if (searchFilter) {
|
|
return filtered.filter(
|
|
({ asset, id }) =>
|
|
asset?.name?.toLocaleLowerCase().includes(searchFilter.toLowerCase()) ||
|
|
asset?.id?.toLocaleLowerCase().includes(searchFilter.toLowerCase()) ||
|
|
id?.toLocaleLowerCase().includes(searchFilter.toLowerCase())
|
|
);
|
|
}
|
|
return filtered;
|
|
}, [markets, searchFilter, filter]);
|
|
|
|
const marketFilters = useMemo(
|
|
() => [
|
|
MarketFilters.ALL,
|
|
...Object.keys(MARKET_FILTER_LABELS).filter((marketFilter) =>
|
|
markets.some((market) => market.asset?.tags?.toArray().some((tag) => tag === marketFilter))
|
|
),
|
|
],
|
|
[markets]
|
|
);
|
|
|
|
return { marketFilters, filteredMarkets, markets };
|
|
};
|