From 25fd38e4be32263f18ae36b6c4fa6e989c90e9cf Mon Sep 17 00:00:00 2001 From: enesozturk Date: Tue, 20 Feb 2024 08:53:53 +0300 Subject: [PATCH 1/3] refactor: update project listing depending on the dev mode --- .../notifications/AppExplorer/AppCard/index.tsx | 6 ++++-- src/utils/hooks/useNotifyProjects.ts | 8 +++++--- src/utils/projects.ts | 10 ++++++++-- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src/components/notifications/AppExplorer/AppCard/index.tsx b/src/components/notifications/AppExplorer/AppCard/index.tsx index e143b11a..80acf75a 100644 --- a/src/components/notifications/AppExplorer/AppCard/index.tsx +++ b/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 = ({ const nav = useNavigate() const ref = useRef(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 = ({
{`${name} - {!isVerified && !isComingSoon ? ( + {isDevModeEnabled && !isVerified && !isComingSoon ? ( Dev mode icon ) : null}
@@ -132,7 +134,7 @@ const AppCard: React.FC = ({
{name} - {!isVerified && !isComingSoon ? DEV : null} + {isDevModeEnabled && !isVerified && !isComingSoon ? DEV : null}
{host} diff --git a/src/utils/hooks/useNotifyProjects.ts b/src/utils/hooks/useNotifyProjects.ts index d6e93a66..c2147c0e 100644 --- a/src/utils/hooks/useNotifyProjects.ts +++ b/src/utils/hooks/useNotifyProjects.ts @@ -10,14 +10,16 @@ import { logError } from '../error' const useNotifyProjects = () => { const [loading, setLoading] = useState(false) const [projects, setProjects] = useState([]) - const { filterAppDomain } = useContext(SettingsContext) + const { filterAppDomain, isDevModeEnabled } = useContext(SettingsContext) useEffect(() => { const fetchNotifyProjects = async () => { setLoading(true) try { - const { data: featuredProjects } = await fetchFeaturedProjects() + const { data: featuredProjects } = await fetchFeaturedProjects({ + isDevModeEnabled + }) const { data: domainProject } = await fetchDomainProjects(filterAppDomain) const allProjects: INotifyProjectWithComingSoon[] = featuredProjects.map(item => ({ @@ -61,7 +63,7 @@ const useNotifyProjects = () => { } fetchNotifyProjects() - }, [setProjects, filterAppDomain]) + }, [isDevModeEnabled, setProjects, filterAppDomain]) return { projects, loading } } diff --git a/src/utils/projects.ts b/src/utils/projects.ts index b253225b..58c8a418 100644 --- a/src/utils/projects.ts +++ b/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() { +type FetchFeaturedProjectsProps = { + isDevModeEnabled: boolean +} + +export async function fetchFeaturedProjects({ 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()) From 7355ef5c10c303181f28919ad9b5374a30366641 Mon Sep 17 00:00:00 2001 From: enesozturk Date: Wed, 21 Feb 2024 01:57:03 +0300 Subject: [PATCH 2/3] refactor: udate dev badge rendering logic --- .../AppExplorer/AppCard/index.tsx | 11 +++++---- .../AppExplorer/AppExplorerColumn/index.tsx | 6 ++--- src/constants/projects.ts | 7 ------ src/utils/hooks/useNotifyProjects.ts | 24 +++++++++++-------- src/utils/projects.ts | 10 ++------ src/utils/types.ts | 1 - 6 files changed, 25 insertions(+), 34 deletions(-) diff --git a/src/components/notifications/AppExplorer/AppCard/index.tsx b/src/components/notifications/AppExplorer/AppCard/index.tsx index 80acf75a..694a18c6 100644 --- a/src/components/notifications/AppExplorer/AppCard/index.tsx +++ b/src/components/notifications/AppExplorer/AppCard/index.tsx @@ -21,14 +21,14 @@ interface AppCardProps { loadingSubscription: boolean logo: string url: string - isVerified?: boolean + isFeatured?: boolean isComingSoon: boolean } const AppCard: React.FC = ({ description, isComingSoon, - isVerified, + isFeatured, loadingSubscription, logo, name, @@ -38,11 +38,12 @@ const AppCard: React.FC = ({ const nav = useNavigate() const ref = useRef(null) const { notifyClientProxy, userPubkey } = useContext(W3iContext) - const { isDevModeEnabled } = useContext(SettingsContext) + 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. @@ -114,7 +115,7 @@ const AppCard: React.FC = ({
{`${name} - {isDevModeEnabled && !isVerified && !isComingSoon ? ( + {isDomainProject && !isFeatured && !isComingSoon ? ( Dev mode icon ) : null}
@@ -134,7 +135,7 @@ const AppCard: React.FC = ({
{name} - {isDevModeEnabled && !isVerified && !isComingSoon ? DEV : null} + {isDomainProject && !isFeatured && !isComingSoon ? DEV : null}
{host} diff --git a/src/components/notifications/AppExplorer/AppExplorerColumn/index.tsx b/src/components/notifications/AppExplorer/AppExplorerColumn/index.tsx index af82194f..f8b97c3d 100644 --- a/src/components/notifications/AppExplorer/AppExplorerColumn/index.tsx +++ b/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)} /> diff --git a/src/constants/projects.ts b/src/constants/projects.ts index 9290aa70..a8aa7937 100644 --- a/src/constants/projects.ts +++ b/src/constants/projects.ts @@ -7,7 +7,6 @@ export const COMING_SOON_PROJECTS: Array = [ 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 = [ '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 = [ '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 = [ 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 = [ 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 = [ 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 = [ description: 'One place, many ways to earn!', url: 'https://jumptask.io/', isComingSoon: true, - isVerified: false, isFeatured: false, icon: '/jumptask.png' } diff --git a/src/utils/hooks/useNotifyProjects.ts b/src/utils/hooks/useNotifyProjects.ts index c2147c0e..12f3e1db 100644 --- a/src/utils/hooks/useNotifyProjects.ts +++ b/src/utils/hooks/useNotifyProjects.ts @@ -17,9 +17,7 @@ const useNotifyProjects = () => { setLoading(true) try { - const { data: featuredProjects } = await fetchFeaturedProjects({ - isDevModeEnabled - }) + const { data: featuredProjects } = await fetchFeaturedProjects() const { data: domainProject } = await fetchDomainProjects(filterAppDomain) const allProjects: INotifyProjectWithComingSoon[] = featuredProjects.map(item => ({ @@ -27,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)) @@ -45,12 +39,22 @@ 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 + }) + } + notifyApps.concat(COMING_SOON_PROJECTS) setProjects(notifyApps) diff --git a/src/utils/projects.ts b/src/utils/projects.ts index 58c8a418..b253225b 100644 --- a/src/utils/projects.ts +++ b/src/utils/projects.ts @@ -2,18 +2,12 @@ import { EXPLORER_API_BASE_URL, EXPLORER_ENDPOINTS } from '@/utils/constants' const projectId: string = import.meta.env.VITE_PROJECT_ID -type FetchFeaturedProjectsProps = { - isDevModeEnabled: boolean -} - -export async function fetchFeaturedProjects({ isDevModeEnabled }: FetchFeaturedProjectsProps) { +export async function fetchFeaturedProjects() { const explorerUrlFeatured = new URL(EXPLORER_ENDPOINTS.projects, EXPLORER_API_BASE_URL) explorerUrlFeatured.searchParams.set('projectId', projectId) explorerUrlFeatured.searchParams.set('isVerified', 'true') - if (!isDevModeEnabled) { - explorerUrlFeatured.searchParams.set('isFeatured', 'true') - } + explorerUrlFeatured.searchParams.set('isFeatured', 'true') try { const discoverProjectsData = await fetch(explorerUrlFeatured).then(async res => res.json()) diff --git a/src/utils/types.ts b/src/utils/types.ts index fc465081..cd0e37a2 100644 --- a/src/utils/types.ts +++ b/src/utils/types.ts @@ -52,7 +52,6 @@ export interface INotifyApp { description: string url: string icon: string - isVerified: boolean isFeatured: boolean isComingSoon: boolean } From 0b67972ff3a67bf4b3581de13e9e7884a9ea187f Mon Sep 17 00:00:00 2001 From: enesozturk Date: Wed, 21 Feb 2024 02:08:37 +0300 Subject: [PATCH 3/3] fix: missing app card field --- src/utils/hooks/useNotifyProjects.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/utils/hooks/useNotifyProjects.ts b/src/utils/hooks/useNotifyProjects.ts index 12f3e1db..b2a631f6 100644 --- a/src/utils/hooks/useNotifyProjects.ts +++ b/src/utils/hooks/useNotifyProjects.ts @@ -51,7 +51,8 @@ const useNotifyProjects = () => { description: domainProject.description, url: domainProject.dapp_url, icon: domainProject.image_url?.md ?? '/fallback.svg', - isFeatured: false + isFeatured: false, + isComingSoon: false }) }