diff --git a/apps/cowswap-frontend/src/common/hooks/useAnnouncements.ts b/apps/cowswap-frontend/src/common/hooks/useAnnouncements.ts index 093f40e016..63791f1fd8 100644 --- a/apps/cowswap-frontend/src/common/hooks/useAnnouncements.ts +++ b/apps/cowswap-frontend/src/common/hooks/useAnnouncements.ts @@ -11,19 +11,43 @@ function useAnnouncements(chainId: SupportedChainId): Announcements { return useMemo(() => { const env = isProdLike ? 'prod' : 'staging' // Should match what's set on CMS! - return allAnnouncements.reduce((acc, announcement) => { - const showForEveryChain = announcement.chainIds.length === 0 - const showForEveryEnv = announcement.envs.length === 0 + return allAnnouncements + .filter((announcement) => { + const showForEveryChain = announcement.chainIds.length === 0 + const showForEveryEnv = announcement.envs.length === 0 - const matchesChainId = announcement.chainIds.some((announcementChain) => announcementChain === chainId) - const matchesEnv = announcement.envs.some((announcementEnv) => announcementEnv === env) + const matchesChainId = announcement.chainIds.some((announcementChain) => announcementChain === chainId) + const matchesEnv = announcement.envs.some((announcementEnv) => announcementEnv === env) - if ((showForEveryChain || matchesChainId) && (showForEveryEnv || matchesEnv)) { - acc[chainId] = announcement - } + return (showForEveryChain || matchesChainId) && (showForEveryEnv || matchesEnv) + }) + .sort((a, b) => { + // A bit of duplication, yes, but this is to sort the filtered results and have some priority: + // 1. first the most specific, with chain and env set + // 2. second the ones with chain and any env + // 3. third the ones with env and any chain + // 4. lastly, the ones with any chain and any env - return acc - }, []) + const showForEveryChainA = a.chainIds.length === 0 + const showForEveryEnvA = a.envs.length === 0 + const matchesChainIdA = a.chainIds.some((announcementChain) => announcementChain === chainId) + const matchesEnvA = a.envs.some((announcementEnv) => announcementEnv === env) + + const showForEveryChainB = b.chainIds.length === 0 + const showForEveryEnvB = b.envs.length === 0 + const matchesChainIdB = b.chainIds.some((announcementChain) => announcementChain === chainId) + const matchesEnvB = b.envs.some((announcementEnv) => announcementEnv === env) + + if (matchesChainIdA && matchesEnvA) return -1 + if (matchesChainIdB && matchesEnvB) return 1 + if (matchesChainIdA && showForEveryEnvA) return -1 + if (matchesChainIdB && showForEveryEnvB) return 1 + if (showForEveryChainA && matchesEnvA) return -1 + if (showForEveryChainB && matchesEnvB) return 1 + if (showForEveryChainA && showForEveryEnvA) return -1 + if (showForEveryChainB && showForEveryEnvB) return 1 + return 0 + }) }, [chainId, allAnnouncements]) }