added config channels

src/App.tsx

@@ -355,7 +355,7 @@ export default function App() {
  <ChatUIProvider
  user={userPushSDKInstance}
  theme={darkMode && darkChatTheme}
- debug={false}
+ debug={true}
  uiConfig={{
  suppressToast: false,
  }}

src/common/Common.utils.tsx

@@ -48,3 +48,9 @@ export const isValidURL = (str: string | undefined) => {
  ); // fragment locator
  return !!pattern.test(str);
 };
+
+export const envUtil = {
+ isProd: appConfig.appEnv === 'prod',
+ isDev: appConfig.appEnv === 'dev',
+ isStaging: appConfig.appEnv === 'staging',
+};

src/modules/channels/Channels.constants.ts

@@ -1 +1,2 @@
 export const AllCategories = 'All';
+export const channelFilterList = ['0x8AAAa9c3a06a4A9FE7C5cCe17d8B5db1E225Eadf'];

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<ChannelsProps> = () => {
  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<ChannelsProps> = () => {
  setFilter={setFilter}
  />
  </Box>
- {!channels.length && !isLoading ? (
+ {!channels.length && !filteredFrontendChannels.length && !isLoading ? (
  <Box
  display="flex"
  gap="spacing-xs"
@@ -111,6 +115,7 @@ const Channels: FC<ChannelsProps> = () => {
  <AllChannelList
  channels={channels}
  hasMoreData={hasMoreData}
+ frontendChannels={filteredFrontendChannels}
  isLoading={isLoading}
  isLoadingNextPage={isFetchingNextPageForChannels || isSearchingNextPageForChannels}
  loadMore={filters.search ? searchChannelsForNextPage : fetchChannelsForNextPage}

src/modules/channels/Channels.utils.ts

@@ -0,0 +1,21 @@
+import { channelCategoriesMap, envUtil } from 'common';
+import { ChannelDetails } from 'queries';
+import { Filters } from './hooks/useChannelsFilters';
+import { AllCategories, channelFilterList } from './Channels.constants';
+
+export const showFrontendChannels = (filters: Filters) => {
+ return envUtil.isProd && filters?.category && filters?.category != AllCategories;
+};
+
+export const filterFrontendChannels = (channels: ChannelDetails[], filter: Filters): Array<string> => {
+ 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 [];
+};

src/modules/channels/components/AllChannelsList.tsx

@@ -4,16 +4,25 @@ 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[];
  hasMoreData: boolean;
  isLoading: boolean;
  isLoadingNextPage: boolean;
  loadMore: () => void;
+ frontendChannels: Array<string>;
 };
 
-const AllChannelList: FC<AllChannelListProps> = ({ channels, hasMoreData, isLoading, isLoadingNextPage, loadMore }) => {
+const AllChannelList: FC<AllChannelListProps> = ({
+ channels,
+ hasMoreData,
+ isLoading,
+ isLoadingNextPage,
+ loadMore,
+ frontendChannels,
+}) => {
  return (
  <Box
  height="100%"
@@ -44,6 +53,12 @@ const AllChannelList: FC<AllChannelListProps> = ({ channels, hasMoreData, isLoad
  threshold={150}
  className="channel-scroll"
  >
+ {frontendChannels.map((channel: string) => (
+ <FrontendChannelListItem
+ channelAddress={channel}
+ key={`${channel}`}
+ />
+ ))}
  {channels.map((channel: ChannelDetails, index: number) => (
  <AllChannelsListItem
  key={`${index}`}

src/modules/channels/components/ChannelCategories.tsx

@@ -4,6 +4,7 @@ import { css } from 'styled-components';
 import { useGetChannelCategories } from 'queries';
 import { Filters } from '../hooks/useChannelsFilters';
 import { AllCategories } from '../Channels.constants';
+import { appConfig } from 'config';
 
 export type ChannelCategoriesProps = {
  filters: Filters;
@@ -75,7 +76,7 @@ const ChannelCategories: FC<ChannelCategoriesProps> = ({ filters, setFilter }) =
  <Pill
  key={`${index}`}
  isActive={cat === filters.category}
- onClick={() => setFilter({ category: cat })}
+ onClick={() => setFilter({ category: cat, search: '', chain: appConfig.coreContractChain.toString() })}
  >
  {cat}
  </Pill>

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<ChannelSearchAndChainSelectionProps> =
 
  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<ChannelSearchAndChainSelectionProps> =
  <Select
  options={getSelectChains(appConfig.allowedNetworks)}
  value={filters.chain}
- onSelect={(value) => setFilter({ chain: value })}
+ onSelect={(value) => setFilter({ chain: value, category: AllCategories })}
  />
  </Box>
  </Box>

src/modules/channels/components/FrontendChannelListItem.tsx

@@ -0,0 +1,20 @@
+import { useGetChannelDetails } from 'queries';
+import { FC } from 'react';
+import { AllChannelsListItem } from './AllChannelsListItem';
+
+export type FrontendChannelListItemProps = {
+ channelAddress: string;
+};
+
+const FrontendChannelListItem: FC<FrontendChannelListItemProps> = ({ channelAddress }) => {
+ const { data: channelDetails, isLoading } = useGetChannelDetails(channelAddress);
+
+ return (
+ <AllChannelsListItem
+ channelDetails={channelDetails}
+ isLoading={isLoading}
+ />
+ );
+};
+
+export { FrontendChannelListItem };

src/modules/channels/hooks/useChannelsFilters.ts

@@ -31,11 +31,14 @@ export const useChannelsFilters = ({ initialChain, initialCategory }: UseChannel
 
  useEffect(() => {
  const filters: Partial<Filters> = {};
- if (!searchFilters.chain) {
- filters['chain'] = initialChain;
+
+ if (!searchFilters.chain || !searchFilters.category) {
+ filters.chain = searchFilters.chain || initialChain;
+ filters.category = searchFilters.category || initialCategory;
  }
- if (!searchFilters.category) {
- filters['category'] = initialCategory;
+
+ if ((searchFilters.chain !== initialChain || searchFilters.search) && searchFilters.category !== initialCategory) {
+ filters.category = initialCategory;
  }
 
  const hasFilters = Object.keys(filters).length;