update cadence announcement

onflow · Feb 8, 2024 · 7adf30c · 7adf30c
1 parent 928f045
commit 7adf30c
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 975 deletions.
diff --git a/ui/apps/nft-portal/src/app/components/shared/notice.tsx b/ui/apps/nft-portal/src/app/components/shared/notice.tsx
@@ -1,29 +1,56 @@
+import { MdClose } from 'react-icons/md'
+import Cookies from 'js-cookie';
+import { useEffect, useState } from 'react';
 
+const FLAG_COOKIE_NAME = 'stable-cadence-announcement-dismissed';
+
+const parseFlag = (flag: any) => {
+  try {
+    return JSON.parse(flag)
+  } catch {
+    return false;
+  }
+
+}
 
 const Notice = () => {
+  const [isDismissed, setFlag] = useState<boolean>(() => {
+    // Try to read the flag value from the cookie, default to false if not found
+    const cookieFlag = Cookies.get(FLAG_COOKIE_NAME);
+    return cookieFlag ? parseFlag(cookieFlag) : false;
+  });
+
+  useEffect(() => {
+    // When the flag changes, update the cookie
+    Cookies.set(FLAG_COOKIE_NAME, String(isDismissed), { expires: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000) });
+  }, [isDismissed]);
+
+  const toggleFlag = () => {
+    setFlag(prevFlag => !prevFlag);
+  };
+  if (isDismissed) {
+    return null
+  }
   return (
-      <div className="bg-red-300 flex flex-1 flex-col items-center justify-between w-full py-[0.25rem] px-0 h-[60px]">
+    <div className="bg-blue-300 flex flex-1 items-center w-full px-0 h-16">
+      <div className="flex flex-1 flex-col items-center justify-around py-2 px-0 text-white">
         <div className="flex justify-center items-center text-center text-[color:inherit] text-[14px] p-[0.15rem]">
-          ⚠ Upgrade to Cadence 1.0
+          🔧 Upgrade to Cadence 1.0 🔧
         </div>
-        <div className="flex justify-center items-center text-center text-[color:inherit] text-[14px] p-[0.15rem]">
-          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.
-        </div>
-        <div className="flex justify-center items-center text-center text-[color:inherit] text-[14px] p-[0.15rem]">
-          Please visit our migration guide here:&nbsp;&nbsp;
-          <a
-            className="underline text-[color:inherit]"
-            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
-          </a>
+        <div className="flex justify-center items-center text-center text-[color:inherit] text-[14px] p-[0.15rem] gap-1">
+          The highly anticipated 
+          <a href="https://flow.com/upgrade/crescendo" target="_blank" className="underline">Crescendo</a>
+          network upgrade is coming soon with 20+ new
+          <a href="https://flow.com/upgrade/cadence-1" target="_blank" className="underline">Cadence 1.0</a>
+          features and 
+          <a href="https://flow.com/upgrade/evm" target="_blank" className="underline">EVM</a>
+          equivalence.
         </div>
       </div>
+      <button className='flex h-10 w-10 items-center justify-center' onClick={toggleFlag}>
+        <MdClose/>
+      </button>
+    </div>
   );
 };
 

diff --git a/ui/apps/nft-portal/src/app/styles/tailwind.css b/ui/apps/nft-portal/src/app/styles/tailwind.css
@@ -1011,6 +1011,10 @@ select {
   width: 75%;
 }
 
+.w-10 {
+  width: 2.5rem;
+}
+
 .w-8 {
   width: 2rem;
 }
@@ -1148,6 +1152,10 @@ select {
   justify-content: space-between;
 }
 
+.gap-1 {
+  gap: 0.25rem;
+}
+
 .gap-6 {
   gap: 1.5rem;
 }
@@ -1405,14 +1413,14 @@ select {
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
 }
 
-.bg-red-300 {
+.bg-blue-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
 }
 
-.bg-blue-100 {
+.bg-blue-300 {
   --tw-bg-opacity: 1;
-  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+  background-color: rgb(0 123 255 / var(--tw-bg-opacity));
 }
 
 .bg-green-100 {