From 9a31a5cf7f2c1cb03d5924d41c120e585f0a5624 Mon Sep 17 00:00:00 2001 From: Alex Ni <12097569+nialexsan@users.noreply.github.com> Date: Thu, 8 Feb 2024 16:37:56 -0500 Subject: [PATCH 1/2] cadence announcement --- src/components/BetaFunnelBanner.tsx | 85 ---------------------- src/components/Editor/index.tsx | 4 +- src/components/Icons/TimesIcon.tsx | 19 +++++ src/components/TopNav/Announcement.tsx | 79 +++++++++++++------- src/components/TopNav/Header.tsx | 10 +-- src/containers/Playground/EditorLayout.tsx | 3 - src/containers/Playground/index.tsx | 14 ++-- src/providers/Announcement/index.tsx | 41 +++++++++++ 8 files changed, 127 insertions(+), 128 deletions(-) delete mode 100644 src/components/BetaFunnelBanner.tsx create mode 100644 src/components/Icons/TimesIcon.tsx create mode 100644 src/providers/Announcement/index.tsx diff --git a/src/components/BetaFunnelBanner.tsx b/src/components/BetaFunnelBanner.tsx deleted file mode 100644 index 9a2388bb..00000000 --- a/src/components/BetaFunnelBanner.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react'; -import { Box, Flex, Link } from 'theme-ui'; -import { ThemeUICSSObject, Button } from 'theme-ui'; -import theme from '../theme'; - -type SXStyles = Record; - -const styles: SXStyles = { - root: { - flexDirection: 'row', - width: '100%', - background: 'rgb(145, 251, 158)', - color: 'black', - alignItems: 'center', - justifyContent: 'space-between', - }, - content: { - padding: '8px', - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - width: '100%', - fontWeight: 'bold', - }, - message: { - paddingRight: '12px', - }, - button: { - padding: '8px 16px', - borderRadius: '24px', - background: 'white', - textDecoration: 'none', - color: theme.colors.text, - '&:hover': { - background: theme.colors.grey, - opacity: '0.75', - }, - }, - dismissButton: { - padding: '8px', - marginRight: '16px', - background: 'rgb(145, 251, 158)', - textDecoration: 'none', - color: 'inherit', - '&:hover': { - background: 'rgb(145, 251, 158)', - }, - }, -}; - -const BetaFunnelBanner = ({ setCookie }: { setCookie: any }) => { - const closeFunnel = () => { - const today = new Date(); - const expirationMS = 30 * 24 * 60 * 60 * 1000; - const nextMonth = new Date(today.getTime() + expirationMS); - setCookie('playgroundFunnel', true, { path: '/', expires: nextMonth }); - }; - - return ( - - - - {String.fromCodePoint(0x1f389)} Playground v2 Beta is now available! - Manage multiple projects, work with Cadence files and more! - - - Click Here - - - - - ); -}; - -export default BetaFunnelBanner; diff --git a/src/components/Editor/index.tsx b/src/components/Editor/index.tsx index 10b18a04..54545d7c 100644 --- a/src/components/Editor/index.tsx +++ b/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' ? ( ) : ( -
+
)} + + + + + + + ); +} + +export default TimesIcon; diff --git a/src/components/TopNav/Announcement.tsx b/src/components/TopNav/Announcement.tsx index 33d964fe..e057115d 100644 --- a/src/components/TopNav/Announcement.tsx +++ b/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 ( - ⚠ Upgrade to Cadence 1.0 - - 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. - - - Please visit our migration guide here:   - - https://cadence-lang.org/docs/cadence-migration-guide - - + + 🔧 Upgrade to Cadence 1.0 🔧 + + The highly anticipated + + Crescendo + + {' '}network upgrade is coming soon with 20+ new + + Cadence 1.0 + + features and + + EVM + + equivalence. + + + + + ); }; diff --git a/src/components/TopNav/Header.tsx b/src/components/TopNav/Header.tsx index f9086ed5..897a543c 100644 --- a/src/components/TopNav/Header.tsx +++ b/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 (
{!isMobile() && isAnnouncementVisible && } diff --git a/src/containers/Playground/EditorLayout.tsx b/src/containers/Playground/EditorLayout.tsx index 2e3c1a4a..e5f2dd97 100644 --- a/src/containers/Playground/EditorLayout.tsx +++ b/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} /> ); diff --git a/src/containers/Playground/index.tsx b/src/containers/Playground/index.tsx index ebdc0829..a8978709 100644 --- a/src/containers/Playground/index.tsx +++ b/src/containers/Playground/index.tsx @@ -7,13 +7,14 @@ 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 +38,10 @@ const closeLeftSidebarButtonStyle: CSSProperties = { zIndex: 10, }; -const isAnnouncementVisible = true; - const getBaseStyles = ( showProjectsSidebar: boolean, isExplorerCollapsed: boolean, + isAnnouncementVisible: boolean, ): ThemeUICSSObject => { const fileExplorerWidth = isExplorerCollapsed ? isMobile() @@ -74,8 +74,9 @@ 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 ( <> @@ -119,7 +120,6 @@ const Content = () => { @@ -206,7 +206,9 @@ const Playground = ({ projectId }: PlaygroundProps) => { return ( - + + + ); diff --git a/src/providers/Announcement/index.tsx b/src/providers/Announcement/index.tsx new file mode 100644 index 00000000..22aaccc1 --- /dev/null +++ b/src/providers/Announcement/index.tsx @@ -0,0 +1,41 @@ +import React, { createContext } from 'react'; +import { CookiesProvider, useCookies } from 'react-cookie'; + +interface AnnouncementContextValue { + isVisible: boolean; + toggleAnnouncement: () => void; +} + +// Create a context +const AnnouncementContext: React.Context = 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 ( + + {children} + + ); +}; + +const AnnouncementProvider: React.FC = ({children}) => { + return ( + + <_AnnounecementProvider>{children} + + ) +} + +export { AnnouncementProvider, AnnouncementContext }; \ No newline at end of file From 64315b48a060d7808c3342c6aef51a18fd2b76f3 Mon Sep 17 00:00:00 2001 From: Alex Ni <12097569+nialexsan@users.noreply.github.com> Date: Thu, 8 Feb 2024 16:42:13 -0500 Subject: [PATCH 2/2] prettify --- src/components/TopNav/Announcement.tsx | 18 +++++++++--------- src/containers/Playground/index.tsx | 11 +++++++++-- src/providers/Announcement/index.tsx | 15 ++++++++------- 3 files changed, 26 insertions(+), 18 deletions(-) diff --git a/src/components/TopNav/Announcement.tsx b/src/components/TopNav/Announcement.tsx index e057115d..76085843 100644 --- a/src/components/TopNav/Announcement.tsx +++ b/src/components/TopNav/Announcement.tsx @@ -15,17 +15,17 @@ const Announcement = () => { width: '100%', backgroundColor: 'white', flex: '1 1 auto', - flexDirection: "row", + flexDirection: 'row', background: '#007BFF', padding: '0.25rem 0 0.5rem', height: '60px', color: `${theme.colors.secondary}`, justifyContent: 'space-around', - alignContent: "center" + alignContent: 'center', }, content: { flex: '1 1 auto', - justifyContent: "space-between", + justifyContent: 'space-between', flexDirection: 'column', alignItems: 'center', }, @@ -37,7 +37,7 @@ const Announcement = () => { color: `${theme.colors.secondary}`, fontSize: '14px', padding: '0.15rem', - gap: "4px", + gap: '4px', }, devLink: { textDecoration: 'underline', @@ -50,7 +50,7 @@ const Announcement = () => { 🔧 Upgrade to Cadence 1.0 🔧 - The highly anticipated + The highly anticipated { > Crescendo - {' '}network upgrade is coming soon with 20+ new - { > Cadence 1.0 - features and + features and { - + ); diff --git a/src/containers/Playground/index.tsx b/src/containers/Playground/index.tsx index a8978709..07ebac91 100644 --- a/src/containers/Playground/index.tsx +++ b/src/containers/Playground/index.tsx @@ -14,7 +14,10 @@ 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'; +import { + AnnouncementContext, + AnnouncementProvider, +} from 'providers/Announcement'; export const LEFT_SIDEBAR_WIDTH = 350; @@ -76,7 +79,11 @@ const Content = () => { const { isExplorerCollapsed, toggleExplorer } = useToggleExplorer(); const { isVisible: isAnnouncementVisible } = useContext(AnnouncementContext); - const baseStyles = getBaseStyles(showProjectsSidebar, isExplorerCollapsed, isAnnouncementVisible); + const baseStyles = getBaseStyles( + showProjectsSidebar, + isExplorerCollapsed, + isAnnouncementVisible, + ); return ( <> diff --git a/src/providers/Announcement/index.tsx b/src/providers/Announcement/index.tsx index 22aaccc1..afb93da7 100644 --- a/src/providers/Announcement/index.tsx +++ b/src/providers/Announcement/index.tsx @@ -7,9 +7,10 @@ interface AnnouncementContextValue { } // Create a context -const AnnouncementContext: React.Context = createContext(null); +const AnnouncementContext: React.Context = + createContext(null); -const COOKIE_NAME = 'stable-cadence-announcement-dismissed' +const COOKIE_NAME = 'stable-cadence-announcement-dismissed'; // Create a context provider component const _AnnounecementProvider: React.FC = ({ children }) => { @@ -20,7 +21,7 @@ const _AnnounecementProvider: React.FC = ({ children }) => { const futureDate = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000); const toggleAnnouncement = () => { - setIsVisible(COOKIE_NAME, !isVisible, {expires: futureDate}); + setIsVisible(COOKIE_NAME, !isVisible, { expires: futureDate }); }; return ( @@ -30,12 +31,12 @@ const _AnnounecementProvider: React.FC = ({ children }) => { ); }; -const AnnouncementProvider: React.FC = ({children}) => { +const AnnouncementProvider: React.FC = ({ children }) => { return ( <_AnnounecementProvider>{children} - ) -} + ); +}; -export { AnnouncementProvider, AnnouncementContext }; \ No newline at end of file +export { AnnouncementProvider, AnnouncementContext };