fix(announcements): remember dismissed announcement (#4255)

libs/announcements/src/lib/announcements.tsx

@@ -1,6 +1,9 @@
 import { useEffect, useState } from 'react';
 import type { AppNameType, Announcement } from './schema';
-import { useAnnouncement } from './hooks/use-announcement';
+import {
+  useAnnouncement,
+  useDismissedAnnouncement,
+} from './hooks/use-announcement';
 import {
   AnnouncementBanner as Banner,
   ExternalLink,
@@ -36,6 +39,7 @@ export const AnnouncementBanner = ({
 }: AnnouncementBannerProps) => {
   const [isVisible, setVisible] = useState(false);
   const { data, reload } = useAnnouncement(app, configUrl);
+  const [, setDismissed] = useDismissedAnnouncement();
 
   useEffect(() => {
     const now = new Date();
@@ -88,7 +92,10 @@ export const AnnouncementBanner = ({
       <button
         className="absolute right-0 top-0 p-4 w-10 h-full flex items-center justify-center text-white"
         data-testid="app-announcement-close"
-        onClick={() => setVisible(false)}
+        onClick={() => {
+          setVisible(false);
+          setDismissed(data);
+        }}
       >
         <VegaIcon name={VegaIconNames.CROSS} size={24} />
       </button>

libs/announcements/src/lib/hooks/use-announcement.ts

@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import type { AppNameType, Announcement } from '../schema';
 import { AnnouncementsSchema } from '../schema';
+import { sha256 } from 'ethers/lib/utils';
+import { useLocalStorageSnapshot } from '@vegaprotocol/react-helpers';
 
 const getData = async (name: AppNameType, url: string) => {
   const now = new Date();
@@ -31,6 +33,22 @@ type State = {
   error: null | string;
 };
 
+const checksum = (data: object) => sha256(Buffer.from(JSON.stringify(data)));
+
+export const useDismissedAnnouncement = (): [
+  string | null | undefined,
+  (data: object) => void
+] => {
+  const [dismissed, setDismissedInStorage] = useLocalStorageSnapshot(
+    'dismissed-announcement'
+  );
+  const setDismissed = useCallback(
+    (data: object) => setDismissedInStorage(checksum(data)),
+    [setDismissedInStorage]
+  );
+  return [dismissed, setDismissed];
+};
+
 export const useAnnouncement = (name: AppNameType, url: string) => {
   const [state, setState] = useState<State>({
     loading: true,
@@ -38,12 +56,14 @@ export const useAnnouncement = (name: AppNameType, url: string) => {
     error: null,
   });
 
+  const [dismissed] = useDismissedAnnouncement();
+
   const fetchData = useCallback(() => {
     let mounted = true;
 
     getData(name, url)
       .then((data) => {
-        if (mounted) {
+        if (mounted && dismissed !== checksum(data)) {
           setState({
             loading: false,
             data,
@@ -64,7 +84,7 @@ export const useAnnouncement = (name: AppNameType, url: string) => {
     return () => {
       mounted = false;
     };
-  }, [name, url, setState]);
+  }, [name, url, dismissed]);
 
   useEffect(() => {
     fetchData();