refactor: update project listing depending on the dev mode

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'
@@ -20,14 +21,14 @@ interface AppCardProps {
   loadingSubscription: boolean
   logo: string
   url: string
-  isVerified?: boolean
+  isFeatured?: boolean
   isComingSoon: boolean
 }
 
 const AppCard: React.FC<AppCardProps> = ({
   description,
   isComingSoon,
-  isVerified,
+  isFeatured,
   loadingSubscription,
   logo,
   name,
@@ -37,10 +38,12 @@ const AppCard: React.FC<AppCardProps> = ({
   const nav = useNavigate()
   const ref = useRef<HTMLDivElement>(null)
   const { notifyClientProxy, userPubkey } = useContext(W3iContext)
+  const { filterAppDomain } = useContext(SettingsContext)
   const { activeSubscriptions } = useContext(W3iContext)
 
   const host = new URL(url).host
   const projectURL = new URL(url)
+  const isDomainProject = filterAppDomain === host
 
   useEffect(() => {
     // If the account changes, the subscribing flow has broken.
@@ -112,7 +115,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 ? (
+          {isDomainProject && !isFeatured && !isComingSoon ? (
             <img src={SpannerSVG} className="AppCard__header__logo__dev-icon" alt="Dev mode icon" />
           ) : null}
         </div>
@@ -132,7 +135,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}
+          {isDomainProject && !isFeatured && !isComingSoon ? <Badge>DEV</Badge> : null}
         </div>
         <Text className="AppCard__body__subtitle" variant="tiny-500">
           {host}

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

@@ -36,7 +36,7 @@ export default function AppExplorerColumns({ apps }: AppExplorerColumnsProps) {
             description={app.description}
             logo={app.icon}
             url={app.url}
-            isVerified={app.isVerified}
+            isFeatured={app.isFeatured}
             isComingSoon={app.isComingSoon}
             loadingSubscription={checkSubscriptionStatusLoading(app.url)}
           />
@@ -57,7 +57,7 @@ export default function AppExplorerColumns({ apps }: AppExplorerColumnsProps) {
               description={app.description}
               logo={app.icon}
               url={app.url}
-              isVerified={app.isVerified}
+              isFeatured={app.isFeatured}
               isComingSoon={app.isComingSoon}
               loadingSubscription={checkSubscriptionStatusLoading(app.url)}
             />
@@ -73,7 +73,7 @@ export default function AppExplorerColumns({ apps }: AppExplorerColumnsProps) {
               description={app.description}
               logo={app.icon}
               url={app.url}
-              isVerified={app.isVerified}
+              isFeatured={app.isFeatured}
               isComingSoon={app.isComingSoon}
               loadingSubscription={checkSubscriptionStatusLoading(app.url)}
             />

src/constants/projects.ts

@@ -7,7 +7,6 @@ export const COMING_SOON_PROJECTS: Array<INotifyApp> = [
     description: 'Galxe is the leading platform for building Web3 community.',
     url: 'https://galxe.com/',
     isComingSoon: true,
-    isVerified: false,
     isFeatured: false,
     icon: '/galxe.png'
   },
@@ -18,7 +17,6 @@ export const COMING_SOON_PROJECTS: Array<INotifyApp> = [
       'Simple to use Multichain Launchpad where new and exciting projects host their presales and other sales before they get listed on exchanges.',
     url: 'https://gempad.app/',
     isComingSoon: true,
-    isVerified: false,
     isFeatured: false,
     icon: '/gempad.png'
   },
@@ -29,7 +27,6 @@ export const COMING_SOON_PROJECTS: Array<INotifyApp> = [
       'Bridge&swap across 27 chains at the best rates and research data about 100+ Web3 products.',
     url: 'https://app.chainspot.io/',
     isComingSoon: true,
-    isVerified: false,
     isFeatured: false,
     icon: '/chainspot.png'
   },
@@ -39,7 +36,6 @@ export const COMING_SOON_PROJECTS: Array<INotifyApp> = [
     description: 'Maverick Protocol is a leading provider of smart contract solutions in DeFi.',
     url: 'https://app.mav.xyz',
     isComingSoon: true,
-    isVerified: false,
     isFeatured: false,
     icon: '/maverick.png'
   },
@@ -49,7 +45,6 @@ export const COMING_SOON_PROJECTS: Array<INotifyApp> = [
     description: 'Explore the Loopring DEX, Earn, and NFT Management.',
     url: 'https://loopring.io/#/pro',
     isComingSoon: true,
-    isVerified: false,
     isFeatured: false,
     icon: '/loopring.png'
   },
@@ -59,7 +54,6 @@ export const COMING_SOON_PROJECTS: Array<INotifyApp> = [
     description: 'Access the most innovative structural products brought to the DeFi world.',
     url: 'https://earn.loopring.io/',
     isComingSoon: true,
-    isVerified: false,
     isFeatured: false,
     icon: '/loopring.png'
   },
@@ -69,7 +63,6 @@ export const COMING_SOON_PROJECTS: Array<INotifyApp> = [
     description: 'One place, many ways to earn!',
     url: 'https://jumptask.io/',
     isComingSoon: true,
-    isVerified: false,
     isFeatured: false,
     icon: '/jumptask.png'
   }

src/utils/hooks/useNotifyProjects.ts

@@ -10,7 +10,7 @@ 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 () => {
@@ -25,14 +25,10 @@ const useNotifyProjects = () => {
           is_coming_soon: false
         }))
 
-        const haveDevProject = allProjects.some(
+        const haveDomainProject = allProjects.some(
           ({ id }: INotifyProjectWithComingSoon) => id === domainProject?.id
         )
 
-        if (!haveDevProject && domainProject) {
-          allProjects.push(domainProject as INotifyProjectWithComingSoon)
-        }
-
         const notifyApps: INotifyApp[] = allProjects
           // Lower order indicates higher priority, thus sorting ascending
           .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
@@ -43,12 +39,23 @@ const useNotifyProjects = () => {
             url: item.dapp_url,
             icon: item.image_url?.md ?? '/fallback.svg',
             colors: item.metadata?.colors,
-            isVerified: Boolean(item.is_verified || item.isVerified),
-            isFeatured: item.is_featured,
+            isFeatured: true,
             isComingSoon: item.is_coming_soon
           }))
           .filter(app => Boolean(app.name))
 
+        if (!haveDomainProject && domainProject) {
+          notifyApps.unshift({
+            id: domainProject.id,
+            name: domainProject.name,
+            description: domainProject.description,
+            url: domainProject.dapp_url,
+            icon: domainProject.image_url?.md ?? '/fallback.svg',
+            isFeatured: false,
+            isComingSoon: false
+          })
+        }
+
         notifyApps.concat(COMING_SOON_PROJECTS)
 
         setProjects(notifyApps)
@@ -61,7 +68,7 @@ const useNotifyProjects = () => {
     }
 
     fetchNotifyProjects()
-  }, [setProjects, filterAppDomain])
+  }, [isDevModeEnabled, setProjects, filterAppDomain])
 
   return { projects, loading }
 }

src/utils/types.ts

@@ -52,7 +52,6 @@ export interface INotifyApp {
   description: string
   url: string
   icon: string
-  isVerified: boolean
   isFeatured: boolean
   isComingSoon: boolean
 }