diff --git a/src/App.tsx b/src/App.tsx index baed18a88c..d7ac4d9804 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -355,7 +355,7 @@ export default function App() { { ); // fragment locator return !!pattern.test(str); }; + +export const envUtil = { + isProd: appConfig.appEnv === 'prod', + isDev: appConfig.appEnv === 'dev', + isStaging: appConfig.appEnv === 'staging', +}; diff --git a/src/modules/channels/Channels.constants.ts b/src/modules/channels/Channels.constants.ts index 3c4a27d471..7c2bad8d2e 100644 --- a/src/modules/channels/Channels.constants.ts +++ b/src/modules/channels/Channels.constants.ts @@ -1 +1,2 @@ export const AllCategories = 'All'; +export const channelFilterList = ['0x8AAAa9c3a06a4A9FE7C5cCe17d8B5db1E225Eadf']; diff --git a/src/modules/channels/Channels.tsx b/src/modules/channels/Channels.tsx index 268acb8fe7..41e5dbbe60 100644 --- a/src/modules/channels/Channels.tsx +++ b/src/modules/channels/Channels.tsx @@ -9,7 +9,8 @@ import { useChannelsFilters } from './hooks/useChannelsFilters'; import { ChannelSearchAndChainSelection } from './components/ChannelSearchAndChainSelection'; import { ChannelCategories } from './components/ChannelCategories'; import { AllChannelList } from './components/AllChannelsList'; -import { AllCategories } from './Channels.constants'; +import { AllCategories, channelFilterList } from './Channels.constants'; +import { filterFrontendChannels } from './Channels.utils'; export type ChannelsProps = {}; @@ -50,10 +51,13 @@ const Channels: FC = () => { tag: filters.category === AllCategories ? '' : filters.category, }); - const channels = + let channels = loadingChannels || searchingChannels ? Array(9).fill(0) : (filters.search ? searchList : channelList)?.pages.flatMap((page) => page.channels) || []; + channels = channels.filter((channel) => !channelFilterList.includes(channel.channel)); + + const filteredFrontendChannels = filterFrontendChannels(channels, filters); const hasMoreData = filters.search ? !isSearchingNextPageForChannels && hasNextPageForSearch @@ -92,7 +96,7 @@ const Channels: FC = () => { setFilter={setFilter} /> - {!channels.length && !isLoading ? ( + {!channels.length && !filteredFrontendChannels.length && !isLoading ? ( = () => { { + return envUtil.isProd && filters?.category && filters?.category != AllCategories; +}; + +export const filterFrontendChannels = (channels: ChannelDetails[], filter: Filters): Array => { + if (showFrontendChannels(filter)) { + const channelIds = channels.map((channel) => channel.channel); + return Object.keys(channelCategoriesMap).filter( + (channel) => + !channelIds.includes(channel) && + !channelFilterList.includes(channel) && + channelCategoriesMap[channel] === filter.category + ); + } + return []; +}; diff --git a/src/modules/channels/components/AllChannelsList.tsx b/src/modules/channels/components/AllChannelsList.tsx index f47afe2102..e89ffa5414 100644 --- a/src/modules/channels/components/AllChannelsList.tsx +++ b/src/modules/channels/components/AllChannelsList.tsx @@ -4,6 +4,7 @@ import { css } from 'styled-components'; import { Box, deviceMediaQ, Spinner } from 'blocks'; import { ChannelDetails } from 'queries'; import { AllChannelsListItem } from './AllChannelsListItem'; +import { FrontendChannelListItem } from './FrontendChannelListItem'; export type AllChannelListProps = { channels: ChannelDetails[]; @@ -11,9 +12,17 @@ export type AllChannelListProps = { isLoading: boolean; isLoadingNextPage: boolean; loadMore: () => void; + frontendChannels: Array; }; -const AllChannelList: FC = ({ channels, hasMoreData, isLoading, isLoadingNextPage, loadMore }) => { +const AllChannelList: FC = ({ + channels, + hasMoreData, + isLoading, + isLoadingNextPage, + loadMore, + frontendChannels, +}) => { return ( = ({ channels, hasMoreData, isLoad threshold={150} className="channel-scroll" > + {frontendChannels.map((channel: string) => ( + + ))} {channels.map((channel: ChannelDetails, index: number) => ( = ({ filters, setFilter }) = setFilter({ category: cat })} + onClick={() => setFilter({ category: cat, search: '', chain: appConfig.coreContractChain.toString() })} > {cat} diff --git a/src/modules/channels/components/ChannelSearchAndChainSelection.tsx b/src/modules/channels/components/ChannelSearchAndChainSelection.tsx index 6a0df1c1c8..9228c67dba 100644 --- a/src/modules/channels/components/ChannelSearchAndChainSelection.tsx +++ b/src/modules/channels/components/ChannelSearchAndChainSelection.tsx @@ -5,6 +5,7 @@ import { Box, Search, Select, TextInput } from 'blocks'; import { getSelectChains } from 'common'; import { appConfig } from 'config'; import { Filters } from '../hooks/useChannelsFilters'; +import { AllCategories } from '../Channels.constants'; export type ChannelSearchAndChainSelectionProps = { filters: Filters; @@ -18,11 +19,15 @@ const ChannelSearchAndChainSelection: FC = const getSearchResults = useCallback( debounce((value) => { - setFilter({ search: value }); + if (value !== '') setFilter({ search: value, category: AllCategories }); }, 800), [setFilter] ); + useEffect(() => { + setSearchQuery(filters.search as string); + }, [filters]); + useEffect(() => { !initialLoad && getSearchResults(searchQuery); }, [searchQuery]); @@ -50,7 +55,7 @@ const ChannelSearchAndChainSelection: FC =