refactor: update project listing depending on the dev mode

Author: enesozturk

src/components/notifications/AppExplorer/AppCard/index.tsx

@@ -6,6 +6,7 @@ import { useNavigate } from 'react-router-dom'
 import SpannerSVG from '@/assets/Spanner.svg'
 import Badge from '@/components/general/Badge'
 import Text from '@/components/general/Text'
+import SettingsContext from '@/contexts/SettingsContext/context'
 import W3iContext from '@/contexts/W3iContext/context'
 import { logError } from '@/utils/error'
 import { showErrorMessageToast, showSuccessMessageToast } from '@/utils/toasts'
@@ -37,6 +38,7 @@ const AppCard: React.FC<AppCardProps> = ({
   const nav = useNavigate()
   const ref = useRef<HTMLDivElement>(null)
   const { notifyClientProxy, userPubkey } = useContext(W3iContext)
+  const { isDevModeEnabled } = useContext(SettingsContext)
   const { activeSubscriptions } = useContext(W3iContext)
 
   const host = new URL(url).host
@@ -112,7 +114,7 @@ const AppCard: React.FC<AppCardProps> = ({
       <div className="AppCard__header">
         <div className="AppCard__header__logo">
           <img src={logo || '/fallback.svg'} alt={`${name} logo`} />
-          {!isVerified && !isComingSoon ? (
+          {isDevModeEnabled && !isVerified && !isComingSoon ? (
             <img src={SpannerSVG} className="AppCard__header__logo__dev-icon" alt="Dev mode icon" />
           ) : null}
         </div>
@@ -132,7 +134,7 @@ const AppCard: React.FC<AppCardProps> = ({
       <div className="AppCard__body">
         <div className="AppCard__body__title">
           <Text variant="large-600">{name}</Text>
-          {!isVerified && !isComingSoon ? <Badge>DEV</Badge> : null}
+          {isDevModeEnabled && !isVerified && !isComingSoon ? <Badge>DEV</Badge> : null}
         </div>
         <Text className="AppCard__body__subtitle" variant="tiny-500">
           {host}

src/utils/hooks/useNotifyProjects.ts

@@ -10,14 +10,16 @@ import { logError } from '../error'
 const useNotifyProjects = () => {
   const [loading, setLoading] = useState(false)
   const [projects, setProjects] = useState<INotifyApp[]>([])
-  const { filterAppDomain } = useContext(SettingsContext)
+  const { filterAppDomain, isDevModeEnabled } = useContext(SettingsContext)
 
   useEffect(() => {
     const fetchNotifyProjects = async () => {
       setLoading(true)
 
       try {
-        const { data: featuredProjects } = await fetchFeaturedProjects<INotifyProject[]>()
+        const { data: featuredProjects } = await fetchFeaturedProjects<INotifyProject[]>({
+          isDevModeEnabled
+        })
         const { data: domainProject } = await fetchDomainProjects<INotifyProject>(filterAppDomain)
 
         const allProjects: INotifyProjectWithComingSoon[] = featuredProjects.map(item => ({
@@ -61,7 +63,7 @@ const useNotifyProjects = () => {
     }
 
     fetchNotifyProjects()
-  }, [setProjects, filterAppDomain])
+  }, [isDevModeEnabled, setProjects, filterAppDomain])
 
   return { projects, loading }
 }

src/utils/projects.ts

@@ -2,12 +2,18 @@ import { EXPLORER_API_BASE_URL, EXPLORER_ENDPOINTS } from '@/utils/constants'
 
 const projectId: string = import.meta.env.VITE_PROJECT_ID
 
-export async function fetchFeaturedProjects<T>() {
+type FetchFeaturedProjectsProps = {
+  isDevModeEnabled: boolean
+}
+
+export async function fetchFeaturedProjects<T>({ isDevModeEnabled }: FetchFeaturedProjectsProps) {
   const explorerUrlFeatured = new URL(EXPLORER_ENDPOINTS.projects, EXPLORER_API_BASE_URL)
 
   explorerUrlFeatured.searchParams.set('projectId', projectId)
   explorerUrlFeatured.searchParams.set('isVerified', 'true')
-  explorerUrlFeatured.searchParams.set('isFeatured', 'true')
+  if (!isDevModeEnabled) {
+    explorerUrlFeatured.searchParams.set('isFeatured', 'true')
+  }
 
   try {
     const discoverProjectsData = await fetch(explorerUrlFeatured).then(async res => res.json())