fix: baner

oraidex · Feb 28, 2024 · 3850b56 · 3850b56
1 parent 4976bfb
commit 3850b56
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 13 deletions.
diff --git a/src/layouts/App.tsx b/src/layouts/App.tsx
@@ -206,15 +206,15 @@ const App = () => {
     }
   };
 
-  // const [openBanner, setOpenBanner] = useState(true);
+  const [openBanner, setOpenBanner] = useState(true);
 
   return (
     <ThemeProvider>
       <div className={`app ${theme}`}>
         <Menu />
-        {/* <NoticeBanner openBanner={openBanner} setOpenBanner={setOpenBanner} />
-        <div className={openBanner ? 'contentWithBanner' : ''}>{routes()}</div> */}
-        {routes()}
+        <NoticeBanner openBanner={openBanner} setOpenBanner={setOpenBanner} />
+        <div className={openBanner ? 'contentWithBanner' : ''}>{routes()}</div>
+        {/* {routes()} */}
         {!isMobile() && <Instruct />}
         {/* {!isMobile() && <FutureCompetition />} */}
       </div>

diff --git a/src/layouts/NoticeBanner.module.scss b/src/layouts/NoticeBanner.module.scss
@@ -42,6 +42,15 @@
       font-size: 14px;
     }
 
+    &.onlyText {
+      font-size: 16px;
+      font-weight: 500;
+
+      @include mobile {
+        font-size: 14px;
+      }
+    }
+
     .text {
       display: flex;
       align-items: center;
@@ -55,6 +64,13 @@
         font-size: 18px;
         font-weight: 600;
       }
+
+      .link {
+        &:hover {
+          text-decoration: underline;
+          cursor: pointer;
+        }
+      }
     }
   }
 

diff --git a/src/layouts/NoticeBanner.tsx b/src/layouts/NoticeBanner.tsx
@@ -1,9 +1,10 @@
 import { isMobile } from '@walletconnect/browser-utils';
 import { ReactComponent as CloseBannerIcon } from 'assets/icons/close.svg';
 import { ReactComponent as OrchaiIcon } from 'assets/icons/orchaiIcon.svg';
+import { ReactComponent as INJIcon } from 'assets/icons/inj.svg';
 import { ReactComponent as TimpiIcon } from 'assets/icons/timpiIcon.svg';
 import useTheme from 'hooks/useTheme';
-import { useEffect, useState } from 'react';
+import { ReactElement, useEffect, useState } from 'react';
 import styles from './NoticeBanner.module.scss';
 
 const INTERVAL_TIME = 3000;
@@ -47,11 +48,18 @@ export const NoticeBanner = ({
         {/* <div className={styles.noteList}>
           {LIST_NOTICES.map((note, index) => {
             return ( */}
-        <div className={styles.note}>
+        <div className={`${styles.note} ${!note.title ? styles.onlyText : ''}`}>
           <div className={styles.icon}>{note.icon}</div>
-          <div className={styles.text}>
-            <span className={styles.title}>{note.title}</span>
-            <span>{note.content}</span>
+          <div className={`${styles.text}`}>
+            {!note.title ? null : <span className={styles.title}>{note.title}</span>}
+            <span>
+              {!note.content ? null : <span>{note.content} &nbsp;</span>}
+              {!note.link ? null : (
+                <a className={styles.link} href={note.link || ''} target={note.target || '_blank'}>
+                  {note.linkText || 'Click here'}
+                </a>
+              )}
+            </span>
           </div>
         </div>
         {/* );
@@ -65,15 +73,30 @@ export const NoticeBanner = ({
   );
 };
 
-export const LIST_NOTICES = [
+export const LIST_NOTICES: {
+  title: string;
+  content: string;
+  icon: ReactElement;
+  link?: string;
+  linkText?: string;
+  target?: string;
+}[] = [
   // {
   //   title: 'NTMPI Premiere Listing',
   //   content: 'Timpi (NTMPI) will be listed on Feb 19th',
   //   icon: <TimpiIcon />
   // },
+  // {
+  //   title: 'OCH Premiere Listing',
+  //   content: 'Orchai (OCH) will be listed on Feb 22th',
+  //   icon: <OrchaiIcon />
+  // }
   {
-    title: 'OCH Premiere Listing',
-    content: 'Orchai (OCH) will be listed on Feb 22th',
-    icon: <OrchaiIcon />
+    title: '',
+    content: 'Trading INJ/USDC futures with more liquidity and low slippage.', //'Trading INJ/USDC futures with more liquidity and low slippage',
+    icon: <INJIcon />,
+    link: 'https://futures.oraidex.io/INJ_USDC',
+    linkText: 'Click here',
+    target: '_blank'
   }
 ];