change tutorial links, they have moved to cadence-lang (#765)

* fix links

* fix linting

* cadence announcement (#766)

* cadence announcement

* prettify

---------

Co-authored-by: Alex <12097569+nialexsan@users.noreply.github.com>

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/Examples.tsx

@@ -22,59 +22,55 @@ const Examples: React.FC<{
       subtitle:
         'Learn how to use smart contracts, switch accounts, and view account state.',
       emoji: '🏃',
-      docsLink: 'https://developers.flow.com/cadence/tutorial/01-first-steps',
+      docsLink: 'https://cadence-lang.org/docs/tutorial/first-steps',
     },
     {
       title: 'Hello, World!',
       subtitle:
         'Write your first contract on Flow. This is the perfect place to start to get the hang of the fundamentals of Cadence.',
       emoji: '🌎',
       projectLink: 'https://play.flow.com/1c0f3c76-e70f-4c25-8d45-d6493a652f80',
-      docsLink: 'https://developers.flow.com/cadence/tutorial/02-hello-world',
+      docsLink: 'https://cadence-lang.org/docs/tutorial/hello-world',
     },
     {
       title: 'Mint Fungible Tokens',
       subtitle:
         'Create and sell digital assets of your own in this tutorial! This tutorial will teach you the basics of creating, storing, and moving digital assets and tokens.',
       emoji: '💸',
       projectLink: 'https://play.flow.com/765c14c7-8097-4a0f-9bf3-73472fb6d0bc',
-      docsLink:
-        'https://developers.flow.com/cadence/tutorial/06-fungible-tokens',
+      docsLink: 'https://cadence-lang.org/docs/tutorial/fungible-tokens',
     },
     {
       title: 'Create Non-Fungible Tokens',
       subtitle:
         'Create and shape your own unique digital objects. Here you’ll learn what really makes blockchains magic - the ability for unique items to be created, shared, and stored forever.',
       emoji: '😺',
       projectLink: 'https://play.flow.com/768bf0ef-24fe-46a5-b224-c09382eeae97',
-      docsLink:
-        'https://developers.flow.com/cadence/tutorial/05-non-fungible-tokens-1',
+      docsLink: 'https://cadence-lang.org/docs/tutorial/non-fungible-tokens-1',
     },
     {
       title: 'Build a Marketplace',
       subtitle:
         'Put it all together in a marketplace! This tutorial will teach you how to turn all the concepts you’ve learned into a place for people to share their creations with the community.',
       emoji: '🤝',
       projectLink: 'https://play.flow.com/6f68e782-b6c9-47d4-9389-f6f58b6c7678',
-      docsLink:
-        'https://developers.flow.com/cadence/tutorial/08-marketplace-compose',
+      docsLink: 'https://cadence-lang.org/docs/tutorial/marketplace-compose',
     },
     {
       title: 'Expand Non-Fungible Tokens',
       subtitle:
         'This tutorial is for the brave and the bold, an opportunity to discover what resources make possible - resources owning other resources. If you can imagine it, you can create it.',
       emoji: '🤠',
       projectLink: 'https://play.flow.com/8437c2f2-7928-406e-b6ef-c64bc534a30a',
-      docsLink:
-        'https://developers.flow.com/cadence/tutorial/10-resources-compose',
+      docsLink: 'https://cadence-lang.org/docs/tutorial/resources-compose',
     },
     {
       title: 'Voting Contract',
       subtitle:
         'With the advent of blockchain technology and smart contracts, it has become popular to try to create decentralized voting mechanisms that allow large groups of users to vote completely on chain',
       emoji: '🗳️',
       projectLink: 'https://play.flow.com/e7acb2ed-53a3-4363-89fa-feab3cab965e',
-      docsLink: 'https://developers.flow.com/cadence/tutorial/09-voting',
+      docsLink: 'https://cadence-lang.org/docs/tutorial/voting',
     },
     // TODO: add this when contracts can be deployed without failure
     //  {

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}
       />
     </>
   );