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;