cadence announcement (#766)

* cadence announcement

* prettify

src/components/Editor/index.tsx

@@ -17,7 +17,6 @@ type EditorContainerProps = {
   isLoading: boolean;
   project: Project;
   active: ActiveEditor;
-  isAnnouncementVisible: boolean;
 };
 
 const Editor = ({
@@ -26,14 +25,13 @@ const Editor = ({
   isLoading,
   project,
   active,
-  isAnnouncementVisible,
 }: EditorContainerProps) => {
   return (
     <>
       {browser && browser.name === 'safari' ? (
         <UnsupportedMessage />
       ) : (
-        <Header isAnnouncementVisible={isAnnouncementVisible} />
+        <Header />
       )}
       <CookieDetector />
       <FileExplorer

src/components/Icons/TimesIcon.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { IconButton, useThemeUI } from 'theme-ui';
+
+function TimesIcon({ primary }: { primary?: boolean }) {
+  const context = useThemeUI();
+  const { theme } = context;
+  const color = primary ? String(theme.colors.primary) : 'text';
+  return (
+    <IconButton>
+      <svg viewBox="0 0 15 15" width="14" height="14">
+        <g stroke={color} strokeWidth="3.1">
+          <path d="M.75.75l13.5 13.5M14.25.75L.75 14.25" />
+        </g>
+      </svg>
+    </IconButton>
+  );
+}
+
+export default TimesIcon;

src/components/TopNav/Announcement.tsx

@@ -1,23 +1,33 @@
-import React from 'react';
+import TimesIcon from 'components/Icons/TimesIcon';
+import { AnnouncementContext } from 'providers/Announcement';
+import React, { useContext } from 'react';
 import { SXStyles } from 'src/types';
-import { Box, Flex, Link, useThemeUI } from 'theme-ui';
+import { Box, Flex, IconButton, Link, useThemeUI } from 'theme-ui';
 
 const Announcement = () => {
   const context = useThemeUI();
   const { theme } = context;
 
+  const { toggleAnnouncement } = useContext(AnnouncementContext);
+
   const styles: SXStyles = {
     root: {
+      width: '100%',
       backgroundColor: 'white',
       flex: '1 1 auto',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      background: '#F27360',
-      width: '100%',
+      flexDirection: 'row',
+      background: '#007BFF',
       padding: '0.25rem 0 0.5rem',
       height: '60px',
       color: `${theme.colors.secondary}`,
+      justifyContent: 'space-around',
+      alignContent: 'center',
+    },
+    content: {
+      flex: '1 1 auto',
+      justifyContent: 'space-between',
+      flexDirection: 'column',
+      alignItems: 'center',
     },
     message: {
       display: 'flex',
@@ -27,6 +37,7 @@ const Announcement = () => {
       color: `${theme.colors.secondary}`,
       fontSize: '14px',
       padding: '0.15rem',
+      gap: '4px',
     },
     devLink: {
       textDecoration: 'underline',
@@ -36,24 +47,42 @@ const Announcement = () => {
 
   return (
     <Flex sx={styles.root}>
-      <Box sx={styles.message}>⚠ Upgrade to Cadence 1.0</Box>
-      <Box sx={styles.message}>
-        The Crescendo network upgrade, including Cadence 1.0, is coming soon.
-        You most likely need to update all your contracts/transactions/scripts
-        to support this change.
-      </Box>
-      <Box sx={styles.message}>
-        Please visit our migration guide here:&nbsp;&nbsp;
-        <Link
-          sx={styles.devLink}
-          target="_blank"
-          href="https://cadence-lang.org/docs/cadence-migration-guide"
-          rel="noreferrer"
-          title="Report a Bug"
-        >
-          https://cadence-lang.org/docs/cadence-migration-guide
-        </Link>
-      </Box>
+      <Flex sx={styles.content}>
+        <Box sx={styles.message}>🔧 Upgrade to Cadence 1.0 🔧</Box>
+        <Box sx={styles.message}>
+          The highly anticipated
+          <Link
+            sx={styles.devLink}
+            target="_blank"
+            rel="noreferrer"
+            href="https://flow.com/upgrade/crescendo"
+          >
+            Crescendo
+          </Link>
+          network upgrade is coming soon with 20+ new
+          <Link
+            sx={styles.devLink}
+            target="_blank"
+            rel="noreferrer"
+            href="https://flow.com/upgrade/cadence-1"
+          >
+            Cadence 1.0
+          </Link>
+          features and
+          <Link
+            sx={styles.devLink}
+            target="_blank"
+            rel="noreferrer"
+            href="https://flow.com/upgrade/evm"
+          >
+            EVM
+          </Link>
+          equivalence.
+        </Box>
+      </Flex>
+      <IconButton size="lg" onClick={toggleAnnouncement}>
+        <TimesIcon primary />
+      </IconButton>
     </Flex>
   );
 };

src/components/TopNav/Header.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import AnnouncementBar from './Announcement';
 import TopNav from '.';
 import { isMobile } from '../Editor/CadenceEditor/ControlPanel/utils';
+import { AnnouncementContext } from 'providers/Announcement';
 
 const headerStyle: React.CSSProperties = {
   display: 'flex',
@@ -11,11 +12,8 @@ const headerStyle: React.CSSProperties = {
   justifyContent: 'left',
 };
 
-const Header = ({
-  isAnnouncementVisible,
-}: {
-  isAnnouncementVisible: boolean;
-}) => {
+const Header = () => {
+  const { isVisible: isAnnouncementVisible } = useContext(AnnouncementContext);
   return (
     <header style={headerStyle}>
       {!isMobile() && isAnnouncementVisible && <AnnouncementBar />}

src/containers/Playground/EditorLayout.tsx

@@ -7,13 +7,11 @@ import Editor from '../../components/Editor/index';
 type EditorLayoutProps = {
   isExplorerCollapsed: boolean;
   toggleExplorer: () => void;
-  isAnnouncementVisible: boolean;
 };
 
 const EditorLayout = ({
   isExplorerCollapsed,
   toggleExplorer,
-  isAnnouncementVisible,
 }: EditorLayoutProps) => {
   const { project, isLoading, active } = useProject();
 
@@ -56,7 +54,6 @@ const EditorLayout = ({
         isLoading={isLoading}
         project={project}
         active={active}
-        isAnnouncementVisible={isAnnouncementVisible}
       />
     </>
   );

src/containers/Playground/index.tsx

@@ -7,13 +7,17 @@ import { AnimatePresence, motion, MotionStyle } from 'framer-motion';
 import CadenceChecker from 'providers/CadenceChecker';
 import { ProjectProvider } from 'providers/Project';
 import useGetProject, { useProject } from 'providers/Project/projectHooks';
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties, useContext } from 'react';
 import { Box, Button, Spinner, ThemeUICSSObject } from 'theme-ui';
 import { userDataKeys, UserLocalStorage } from 'util/localstorage';
 import { LOCAL_PROJECT_ID } from 'util/url';
 import useToggleExplorer from '../../hooks/useToggleExplorer';
 import EditorLayout from './EditorLayout';
 import { isMobile } from 'components/Editor/CadenceEditor/ControlPanel/utils';
+import {
+  AnnouncementContext,
+  AnnouncementProvider,
+} from 'providers/Announcement';
 
 export const LEFT_SIDEBAR_WIDTH = 350;
 
@@ -37,11 +41,10 @@ const closeLeftSidebarButtonStyle: CSSProperties = {
   zIndex: 10,
 };
 
-const isAnnouncementVisible = true;
-
 const getBaseStyles = (
   showProjectsSidebar: boolean,
   isExplorerCollapsed: boolean,
+  isAnnouncementVisible: boolean,
 ): ThemeUICSSObject => {
   const fileExplorerWidth = isExplorerCollapsed
     ? isMobile()
@@ -74,8 +77,13 @@ const leftSidebarTransition = { type: 'spring', bounce: 0.2, duration: 0.25 };
 const Content = () => {
   const { showProjectsSidebar, toggleProjectsSidebar } = useProject();
   const { isExplorerCollapsed, toggleExplorer } = useToggleExplorer();
+  const { isVisible: isAnnouncementVisible } = useContext(AnnouncementContext);
 
-  const baseStyles = getBaseStyles(showProjectsSidebar, isExplorerCollapsed);
+  const baseStyles = getBaseStyles(
+    showProjectsSidebar,
+    isExplorerCollapsed,
+    isAnnouncementVisible,
+  );
   return (
     <>
       <AnimatePresence>
@@ -119,7 +127,6 @@ const Content = () => {
           <EditorLayout
             isExplorerCollapsed={isExplorerCollapsed}
             toggleExplorer={toggleExplorer}
-            isAnnouncementVisible={isAnnouncementVisible}
           />
         </Box>
       </motion.div>
@@ -206,7 +213,9 @@ const Playground = ({ projectId }: PlaygroundProps) => {
   return (
     <ProjectProvider project={project} isLocal={isLocal} client={client}>
       <CadenceChecker>
-        <Content />
+        <AnnouncementProvider>
+          <Content />
+        </AnnouncementProvider>
       </CadenceChecker>
     </ProjectProvider>
   );

src/providers/Announcement/index.tsx

@@ -0,0 +1,42 @@
+import React, { createContext } from 'react';
+import { CookiesProvider, useCookies } from 'react-cookie';
+
+interface AnnouncementContextValue {
+  isVisible: boolean;
+  toggleAnnouncement: () => void;
+}
+
+// Create a context
+const AnnouncementContext: React.Context<AnnouncementContextValue> =
+  createContext(null);
+
+const COOKIE_NAME = 'stable-cadence-announcement-dismissed';
+
+// Create a context provider component
+const _AnnounecementProvider: React.FC = ({ children }) => {
+  const [cookies, setIsVisible] = useCookies([COOKIE_NAME]);
+  const isVisible = !cookies[COOKIE_NAME];
+
+  // in 7 days
+  const futureDate = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000);
+
+  const toggleAnnouncement = () => {
+    setIsVisible(COOKIE_NAME, !isVisible, { expires: futureDate });
+  };
+
+  return (
+    <AnnouncementContext.Provider value={{ isVisible, toggleAnnouncement }}>
+      {children}
+    </AnnouncementContext.Provider>
+  );
+};
+
+const AnnouncementProvider: React.FC = ({ children }) => {
+  return (
+    <CookiesProvider>
+      <_AnnounecementProvider>{children}</_AnnounecementProvider>
+    </CookiesProvider>
+  );
+};
+
+export { AnnouncementProvider, AnnouncementContext };