From fb868838b66c4c5019ef86b945dd8c799191acb7 Mon Sep 17 00:00:00 2001
From: Sebastian Scatularo <sebastian.scatularo@xlabs.xyz>
Date: Tue, 24 Oct 2023 15:17:40 -0300
Subject: [PATCH] #469 #468 - add wormholescan link and banner

---
 package-lock.json                          |   4 +-
 package.json                               |   2 +-
 public/cosmos/index.css                    |  74 ++++++-
 public/cosmos/index.html                   |  26 ++-
 public/sui/index.css                       |  74 ++++++-
 public/sui/index.html                      | 239 +++++++++++----------
 public/usdc-bridge/index.css               | 174 ++++++---------
 public/usdc-bridge/index.html              |  25 ++-
 src/App.tsx                                |  24 +++
 src/components/NewsBar.tsx                 | 130 -----------
 src/components/NewsBar/Bar.tsx             |  32 +++
 src/components/NewsBar/NewsBarButton.tsx   |  38 ++++
 src/components/NewsBar/index.tsx           |  18 ++
 src/components/NewsBar/messages.tsx        | 115 ++++++++++
 src/components/NewsBar/useBannerMessage.ts |  31 +++
 15 files changed, 629 insertions(+), 377 deletions(-)
 delete mode 100644 src/components/NewsBar.tsx
 create mode 100644 src/components/NewsBar/Bar.tsx
 create mode 100644 src/components/NewsBar/NewsBarButton.tsx
 create mode 100644 src/components/NewsBar/index.tsx
 create mode 100644 src/components/NewsBar/messages.tsx
 create mode 100644 src/components/NewsBar/useBannerMessage.ts

diff --git a/package-lock.json b/package-lock.json
index 6c7a01531..2f12f67a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@xlabs/portal-bridge-ui",
-  "version": "0.1.85",
+  "version": "0.1.86",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@xlabs/portal-bridge-ui",
-      "version": "0.1.85",
+      "version": "0.1.86",
       "hasInstallScript": true,
       "dependencies": {
         "@certusone/wormhole-sdk": "^0.10.4",
diff --git a/package.json b/package.json
index 75bcc7a23..bc68a215d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xlabs/portal-bridge-ui",
-  "version": "0.1.85",
+  "version": "0.1.86",
   "private": true,
   "dependencies": {
     "@certusone/wormhole-sdk": "^0.10.4",
diff --git a/public/cosmos/index.css b/public/cosmos/index.css
index b13801231..3a842ed1e 100644
--- a/public/cosmos/index.css
+++ b/public/cosmos/index.css
@@ -49,14 +49,14 @@ body {
   justify-content: center;
 }
 
-.cosmos-banner {
+.wormholescan-banner {
   box-sizing: inherit;
   width: 100%;
+  height: 56px;
   display: flex;
   padding: 4px 16px;
   font-size: 16px;
-  background: linear-gradient(1deg, #9577F4 0%, #AD55DA 28.96%, #CA2EBD 100%);
-  min-height: 56px;
+  background: linear-gradient(86deg, #FF2A57 0%, #FF2A57 28.96%, #0F0C48 100%);
   text-align: center;
   align-items: center;
   font-weight: 500;
@@ -64,7 +64,7 @@ body {
   justify-content: center;
 }
 
-.cosmos-link {
+.wormholescan-link {
   text-align: center;
   box-sizing: inherit;
   margin: 0;
@@ -198,6 +198,11 @@ body {
   text-underline-offset: 6px;
   margin-left: 32px;
 }
+
+.link:hover {
+  text-decoration: underline;
+}
+
 .active {
   text-decoration: underline;
 }
@@ -233,3 +238,64 @@ body {
 .footer-link:visited {
   color: white;
 }
+
+.MuiChip-label {
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 12px;
+  padding-right: 12px;
+  text-overflow: ellipsis;
+}
+
+.MuiChip-labelSmall {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.MuiChip-root {
+  color: #fff;
+  border: none;
+  cursor: default;
+  height: 32px;
+  display: inline-flex;
+  outline: 0;
+  padding: 0;
+  font-size: 0.7544642857142857rem;
+  box-sizing: border-box;
+  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  align-items: center;
+  font-family: 'Poppins', sans-serif;
+  white-space: nowrap;
+  border-radius: 16px;
+  vertical-align: middle;
+  justify-content: center;
+  text-decoration: none;
+  background-color: #616161;
+}
+
+.MuiChip-sizeSmall {
+  height: 24px;
+}
+
+.makeStyles-newTag-17 {
+  left: 142px;
+  color: #E2E1FF;
+  bottom: 24px;
+  position: relative;
+  font-size: 10px;
+  word-wrap: break-word;
+  font-weight: 600;
+  line-height: 24px;
+  background-color: #3B3785;
+}
+
+@media (max-width:1279.95px) {
+  .wormholescan-banner {
+    height: auto;
+    padding: 8px;
+    flex-direction: column;
+  }
+  .wormholescan-banner p {
+    margin: 0px;
+  }
+}
\ No newline at end of file
diff --git a/public/cosmos/index.html b/public/cosmos/index.html
index 06243c4d4..b981e00c0 100644
--- a/public/cosmos/index.html
+++ b/public/cosmos/index.html
@@ -35,15 +35,13 @@
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div class="root">
     <div class="container">
-      <div class="cosmos-banner" id="cosmos-banner" style="display: none;">
-        <div style="text-align: center"><span
-            style="color: white; font-size: 16px; font-family: Poppins; font-weight: 500; line-height: 20.02px; letter-spacing: 0.28px; word-wrap: break-word">Wormhole
-            Gateway is now live on mainnet!</span><span
-            style="color: white; font-size: 16px; font-family: Poppins; font-weight: 700; line-height: 20.02px; letter-spacing: 0.28px; word-wrap: break-word">
-            Bridge your assets to Osmosis today.</span></div>
-        <a class="cosmos-link" href="https://portalbridge.com/cosmos" target="_blank" rel="noopener noreferrer">
-          TRY IT NOW
-        </a>
+      <div class="wormholescan-banner" id="wormholescan-banner">
+        <p style="color: white; font-size: 16px; font-family: Poppins; font-weight: 700; line-height: 20.02px; letter-spacing: 0.28px; overflow-wrap: break-word;">
+          Introducing Wormholescan: &nbsp;</p>
+        <p style="color: white; font-size: 16px; font-family: Poppins; font-weight: 500; line-height: 20.02px; letter-spacing: 0.28px; overflow-wrap: break-word;">
+          A cross-chain block explorer</p>
+          <a class="wormholescan-link"
+          href="https://wormholescan.io/" target="_blank" rel="noopener noreferrer">VIEW WORMHOLESCAN.IO</a>
       </div>
       <div class="cctp-banner" id="cctp-banner" style="display: none;">
         <span>
@@ -62,6 +60,12 @@
           <div class="spacer"></div>
           <div class="links-list">
             <div class="links-list-inner">
+              <div class="MuiChip-root makeStyles-newTag-17 MuiChip-sizeSmall">
+                <span class="MuiChip-label MuiChip-labelSmall">NEW</span>
+              </div>
+              <a class="link" href="https://wormholescan.io" target="_blank" aria-current="page">
+                Wormsholescan
+              </a>
               <a class="link" href="/" target="_blank" aria-current="page">
                 Token Bridge
               </a>
@@ -83,8 +87,8 @@
             </div>
           </div>
           <div class="help-container">
-            <a class="help-link" tabindex="0" aria-disabled="false" href="https://portalbridge.com/docs"
-              target="_blank" rel="noopener noreferrer" title="View the FAQ">
+            <a class="help-link" tabindex="0" aria-disabled="false" href="https://portalbridge.com/docs" target="_blank"
+              rel="noopener noreferrer" title="View the FAQ">
               <span class="help-label">
                 <svg class="help-icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
                   <path
diff --git a/public/sui/index.css b/public/sui/index.css
index b13801231..3a842ed1e 100644
--- a/public/sui/index.css
+++ b/public/sui/index.css
@@ -49,14 +49,14 @@ body {
   justify-content: center;
 }
 
-.cosmos-banner {
+.wormholescan-banner {
   box-sizing: inherit;
   width: 100%;
+  height: 56px;
   display: flex;
   padding: 4px 16px;
   font-size: 16px;
-  background: linear-gradient(1deg, #9577F4 0%, #AD55DA 28.96%, #CA2EBD 100%);
-  min-height: 56px;
+  background: linear-gradient(86deg, #FF2A57 0%, #FF2A57 28.96%, #0F0C48 100%);
   text-align: center;
   align-items: center;
   font-weight: 500;
@@ -64,7 +64,7 @@ body {
   justify-content: center;
 }
 
-.cosmos-link {
+.wormholescan-link {
   text-align: center;
   box-sizing: inherit;
   margin: 0;
@@ -198,6 +198,11 @@ body {
   text-underline-offset: 6px;
   margin-left: 32px;
 }
+
+.link:hover {
+  text-decoration: underline;
+}
+
 .active {
   text-decoration: underline;
 }
@@ -233,3 +238,64 @@ body {
 .footer-link:visited {
   color: white;
 }
+
+.MuiChip-label {
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 12px;
+  padding-right: 12px;
+  text-overflow: ellipsis;
+}
+
+.MuiChip-labelSmall {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.MuiChip-root {
+  color: #fff;
+  border: none;
+  cursor: default;
+  height: 32px;
+  display: inline-flex;
+  outline: 0;
+  padding: 0;
+  font-size: 0.7544642857142857rem;
+  box-sizing: border-box;
+  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  align-items: center;
+  font-family: 'Poppins', sans-serif;
+  white-space: nowrap;
+  border-radius: 16px;
+  vertical-align: middle;
+  justify-content: center;
+  text-decoration: none;
+  background-color: #616161;
+}
+
+.MuiChip-sizeSmall {
+  height: 24px;
+}
+
+.makeStyles-newTag-17 {
+  left: 142px;
+  color: #E2E1FF;
+  bottom: 24px;
+  position: relative;
+  font-size: 10px;
+  word-wrap: break-word;
+  font-weight: 600;
+  line-height: 24px;
+  background-color: #3B3785;
+}
+
+@media (max-width:1279.95px) {
+  .wormholescan-banner {
+    height: auto;
+    padding: 8px;
+    flex-direction: column;
+  }
+  .wormholescan-banner p {
+    margin: 0px;
+  }
+}
\ No newline at end of file
diff --git a/public/sui/index.html b/public/sui/index.html
index 96baac9b3..97753ba5c 100644
--- a/public/sui/index.html
+++ b/public/sui/index.html
@@ -1,127 +1,136 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Portal is a bridge that offers unlimited transfers across chains for tokens and NFTs wrapped by Wormhole."
-    />
-    <meta property="og:title" content="Portal Token Bridge" />
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://portalbridge.com" />
-    <meta property="og:image" content="/wormhole.png" />
-    <meta property="og:image:alt" content="Wormhole logo" />
-    <meta
-      property="og:description"
-      content="Portal is a bridge that offers unlimited transfers across chains for tokens and NFTs wrapped by Wormhole."
-    />
-    <meta name="twitter:site" content="@portalbridge_" />
-    <meta name="twitter:creator" content="@portalbridge_" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <link rel="apple-touch-icon" href="/logo192.png" />
 
-    <link rel="manifest" href="/manifest.json" />
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description"
+    content="Portal is a bridge that offers unlimited transfers across chains for tokens and NFTs wrapped by Wormhole." />
+  <meta property="og:title" content="Portal Token Bridge" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://portalbridge.com" />
+  <meta property="og:image" content="/wormhole.png" />
+  <meta property="og:image:alt" content="Wormhole logo" />
+  <meta property="og:description"
+    content="Portal is a bridge that offers unlimited transfers across chains for tokens and NFTs wrapped by Wormhole." />
+  <meta name="twitter:site" content="@portalbridge_" />
+  <meta name="twitter:creator" content="@portalbridge_" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <link rel="apple-touch-icon" href="/logo192.png" />
 
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"
-      rel="stylesheet"
-    />
-    <link href="index.css" rel="stylesheet">
-    <link href="../wormhole-connect/main.css" rel="stylesheet">
-    <title>SUI Token Bridge</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div class="root">
-        <div class="container">
-          <div class="cosmos-banner" id="cosmos-banner" style="display: none;">
-            <div style="text-align: center"><span
-                style="color: white; font-size: 16px; font-family: Poppins; font-weight: 500; line-height: 20.02px; letter-spacing: 0.28px; word-wrap: break-word">Wormhole
-                Gateway is now live on mainnet!</span><span
-                style="color: white; font-size: 16px; font-family: Poppins; font-weight: 700; line-height: 20.02px; letter-spacing: 0.28px; word-wrap: break-word">
-                Bridge your assets to Osmosis today.</span></div>
-            <a class="cosmos-link" href="https://portalbridge.com/cosmos" target="_blank" rel="noopener noreferrer">
-              TRY IT NOW
-            </a>
-          </div>
-          <div class="cctp-banner" id="cctp-banner" style="display: none;">
-            <span>
-              Experience frictionless USDC transfers between Ethereum, Avalanche, Arbitrum, and Optimism with Circle's CCTP.
-            </span>
-            <a class="cctp-link" href="https://portalbridge.com/usdc-bridge" target="_blank" rel="noopener noreferrer">
-              TRY IT NOW
-            </a>
-          </div>
+  <link rel="manifest" href="/manifest.json" />
 
-          <header class="header">
-            <div class="header-inner">
-              <a class="logo-link" href="/">
-                <img src="portal_logo_w.svg" alt="Portal" class="logo">
-              </a>
-              <div class="spacer"></div>
-              <div class="links-list">
-                <div class="links-list-inner">
-                  <a class="link" href="/" target="_blank" aria-current="page">
-                    Token Bridge
-                  </a>
-                  <a class="link" href="https://portalbridge.com/usdc-bridge" target="_blank" rel="noopener noreferrer">
-                    USDC
-                  </a>
-                  <a class="link active" href="#" aria-current="page">
-                    Sui
-                  </a>
-                  <a class="link" href="https://portalbridge.com/cosmos" target="_blank" rel="noopener noreferrer">
-                    Cosmos
-                  </a>
-                  <a class="link" href="https://portalbridge.com/docs" target="_blank" rel="noopener noreferrer">
-                    FAQ
-                  </a>
-                  <a class="link" href="https://wormhole.com/" target="_blank" rel="noopener noreferrer">
-                    Wormhole
-                  </a>
-                </div>
-              </div>
-              <div class="help-container">
-                <a class="help-link" tabindex="0" aria-disabled="false" href="https://portalbridge.com/docs" target="_blank" rel="noopener noreferrer" title="View the FAQ">
-                  <span class="help-label">
-                    <svg class="help-icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"></path></svg>
-                  </span>
-                  <span class="MuiTouchRipple-root">
-                  </span>
-                </a>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"
+    rel="stylesheet" />
+  <link href="index.css" rel="stylesheet">
+  <link href="../wormhole-connect/main.css" rel="stylesheet">
+  <title>SUI Token Bridge</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div class="root">
+    <div class="container">
+      <div class="wormholescan-banner" id="wormholescan-banner">
+        <p style="color: white; font-size: 16px; font-family: Poppins; font-weight: 700; line-height: 20.02px; letter-spacing: 0.28px; overflow-wrap: break-word;">
+          Introducing Wormholescan: &nbsp;</p>
+        <p style="color: white; font-size: 16px; font-family: Poppins; font-weight: 500; line-height: 20.02px; letter-spacing: 0.28px; overflow-wrap: break-word;">
+          A cross-chain block explorer</p>
+          <a class="wormholescan-link"
+          href="https://wormholescan.io/" target="_blank" rel="noopener noreferrer">VIEW WORMHOLESCAN.IO</a>
+      </div>
+      <div class="cctp-banner" id="cctp-banner" style="display: none;">
+        <span>
+          Experience frictionless USDC transfers between Ethereum, Avalanche, Arbitrum, and Optimism with Circle's CCTP.
+        </span>
+        <a class="cctp-link" href="https://portalbridge.com/usdc-bridge" target="_blank" rel="noopener noreferrer">
+          TRY IT NOW
+        </a>
+      </div>
+
+      <header class="header">
+        <div class="header-inner">
+          <a class="logo-link" href="/">
+            <img src="portal_logo_w.svg" alt="Portal" class="logo">
+          </a>
+          <div class="spacer"></div>
+          <div class="links-list">
+            <div class="links-list-inner">
+              <div class="MuiChip-root makeStyles-newTag-17 MuiChip-sizeSmall">
+                <span class="MuiChip-label MuiChip-labelSmall">NEW</span>
               </div>
+              <a class="link" href="https://wormholescan.io" target="_blank" aria-current="page">
+                Wormsholescan
+              </a>
+              <a class="link" href="/" target="_blank" aria-current="page">
+                Token Bridge
+              </a>
+              <a class="link" href="https://portalbridge.com/usdc-bridge" target="_blank" rel="noopener noreferrer">
+                USDC
+              </a>
+              <a class="link active" href="#" aria-current="page">
+                Sui
+              </a>
+              <a class="link" href="https://portalbridge.com/cosmos" target="_blank" rel="noopener noreferrer">
+                Cosmos
+              </a>
+              <a class="link" href="https://portalbridge.com/docs" target="_blank" rel="noopener noreferrer">
+                FAQ
+              </a>
+              <a class="link" href="https://wormhole.com/" target="_blank" rel="noopener noreferrer">
+                Wormhole
+              </a>
             </div>
-          </header>
+          </div>
+          <div class="help-container">
+            <a class="help-link" tabindex="0" aria-disabled="false" href="https://portalbridge.com/docs" target="_blank"
+              rel="noopener noreferrer" title="View the FAQ">
+              <span class="help-label">
+                <svg class="help-icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
+                  <path
+                    d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z">
+                  </path>
+                </svg>
+              </span>
+              <span class="MuiTouchRipple-root">
+              </span>
+            </a>
+          </div>
+        </div>
+      </header>
 
-          <div id="wormhole-connect" config='{"bridgeDefaults":{"requiredNetwork":"sui","toNetwork":"sui"},"rpcs":{"wormchain":"https://and76cjzpa.execute-api.us-east-2.amazonaws.com/wormchain/","solana":"https://wormhole.rpcpool.com/","osmosis":"https://and76cjzpa.execute-api.us-east-2.amazonaws.com/osmosis/","ethereum":"https://and76cjzpa.execute-api.us-east-2.amazonaws.com/ethereum/","sui":"https://and76cjzpa.execute-api.us-east-2.amazonaws.com/sui/","aptos":"https://and76cjzpa.execute-api.us-east-2.amazonaws.com/aptos/"},"env":"mainnet","networks":["ethereum","bsc","polygon","avalanche","fantom","celo","moonbeam","goerli","mumbai","fuji","alfajores","moonbasealpha","sui"],"mode":"dark","customTheme":{"background":{"default":"transparent"},"button":{"primary":"#ffffff19","primaryText":"#ffffff","disabled":"#ffffff0F","disabledText":"#ffffff66","action":"#ffffff","actionText":"#17153F","hover":"#ffffff0F"},"font":{"primary":"Poppins, sans-serif","header":"Suisse BP Intl, sans-serif"}}}'></div>
+      <div id="wormhole-connect"
+        config='{"bridgeDefaults":{"requiredNetwork":"sui","toNetwork":"sui"},"rpcs":{"wormchain":"https://and76cjzpa.execute-api.us-east-2.amazonaws.com/wormchain/","solana":"https://wormhole.rpcpool.com/","osmosis":"https://and76cjzpa.execute-api.us-east-2.amazonaws.com/osmosis/","ethereum":"https://and76cjzpa.execute-api.us-east-2.amazonaws.com/ethereum/","sui":"https://and76cjzpa.execute-api.us-east-2.amazonaws.com/sui/","aptos":"https://and76cjzpa.execute-api.us-east-2.amazonaws.com/aptos/"},"env":"mainnet","networks":["ethereum","bsc","polygon","avalanche","fantom","celo","moonbeam","goerli","mumbai","fuji","alfajores","moonbasealpha","sui"],"mode":"dark","customTheme":{"background":{"default":"transparent"},"button":{"primary":"#ffffff19","primaryText":"#ffffff","disabled":"#ffffff0F","disabledText":"#ffffff66","action":"#ffffff","actionText":"#17153F","hover":"#ffffff0F"},"font":{"primary":"Poppins, sans-serif","header":"Suisse BP Intl, sans-serif"}}}'>
+      </div>
 
-          <div class="footer">
-            <span>
-              Want to embed the Wormhole Connect bridge into your own dapp or website?
-            </span>
-            <span>
-              Do it in as few as three lines of code here: <a class="footer-link" href="https://wormhole.com/connect" target="_blank">https://wormhole.com/connect</a>
-            </span>
-          </div>
+      <div class="footer">
+        <span>
+          Want to embed the Wormhole Connect bridge into your own dapp or website?
+        </span>
+        <span>
+          Do it in as few as three lines of code here: <a class="footer-link" href="https://wormhole.com/connect"
+            target="_blank">https://wormhole.com/connect</a>
+        </span>
       </div>
     </div>
+  </div>
+
+  <script src="../wormhole-connect/main.js"></script>
+  <script>
+    // To show Optimism option on SEPT 4th 2023
+    if (new Date() < new Date(2023, 8, 8)) {
+      document.getElementById("cosmos-banner").style.display = "flex";
+      document.getElementById("cctp-banner").style.display = "none";
+
+    } else {
+      document.getElementById("cosmos-banner").style.display = "none";
+      document.getElementById("cctp-banner").style.display = "flex";
+    }
+  </script>
+</body>
 
-    <script src="../wormhole-connect/main.js"></script>
-    <script>
-      // To show Optimism option on SEPT 4th 2023
-      if (new Date() < new Date(2023, 8, 8)) {
-        document.getElementById("cosmos-banner").style.display = "flex";
-        document.getElementById("cctp-banner").style.display = "none";
-  
-      } else {
-        document.getElementById("cosmos-banner").style.display = "none";
-        document.getElementById("cctp-banner").style.display = "flex";
-      }
-    </script>
-  </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/public/usdc-bridge/index.css b/public/usdc-bridge/index.css
index 7702b5e8b..3a842ed1e 100644
--- a/public/usdc-bridge/index.css
+++ b/public/usdc-bridge/index.css
@@ -49,14 +49,14 @@ body {
   justify-content: center;
 }
 
-.cosmos-banner {
+.wormholescan-banner {
   box-sizing: inherit;
   width: 100%;
+  height: 56px;
   display: flex;
   padding: 4px 16px;
   font-size: 16px;
-  background: linear-gradient(1deg, #9577f4 0%, #ad55da 28.96%, #ca2ebd 100%);
-  min-height: 56px;
+  background: linear-gradient(86deg, #FF2A57 0%, #FF2A57 28.96%, #0F0C48 100%);
   text-align: center;
   align-items: center;
   font-weight: 500;
@@ -64,12 +64,12 @@ body {
   justify-content: center;
 }
 
-.cosmos-link {
+.wormholescan-link {
   text-align: center;
   box-sizing: inherit;
   margin: 0;
   text-decoration: none;
-  color: #17153f;
+  color: #17153F;
   display: inline-flex;
   padding: 6px 12px;
   font-size: 12px;
@@ -135,7 +135,6 @@ body {
   display: inline-flex;
   align-items: center;
 }
-
 .logo-link:hover {
   text-decoration: none;
 }
@@ -146,7 +145,6 @@ body {
   margin-right: 8px;
   display: inline-block;
 }
-
 .logo:hover {
   filter: contrast(1);
 }
@@ -156,102 +154,6 @@ body {
   width: 100vw;
 }
 
-.poweredBy {
-  font-family: Poppins;
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  margin-top: 1vh;
-  gap: 8px;
-  padding-bottom: 40px;
-  font-size: 18px;
-  font-weight: 400;
-  white-space: nowrap;
-}
-
-.poweredBy img {
-  filter: invert(1) brightness(100);
-}
-
-.gradients {
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  opacity: 0.9;
-  z-index: -1;
-}
-
-.gradientRight {
-  position: absolute;
-  top: 72px;
-  right: -1000px;
-  width: 1757px;
-  height: 1506px;
-  background: radial-gradient(
-    closest-side at 50% 50%,
-    #ffce00 0%,
-    #ffce0000 100%
-  );
-  opacity: 0.2;
-  transform: matrix(0.87, 0.48, -0.48, 0.87, 0, 0);
-  z-index: -1;
-  pointer-events: none;
-}
-
-.gradientLeft {
-  top: -530px;
-  left: -350px;
-  width: 1379px;
-  height: 1378px;
-  position: absolute;
-  background: radial-gradient(
-    closest-side at 50% 50%,
-    #f44b1b 0%,
-    #f44b1b00 100%
-  );
-  opacity: 0.2;
-  z-index: -1;
-  pointer-events: none;
-}
-
-.gradientLeft2 {
-  bottom: -330px;
-  left: -350px;
-  width: 1379px;
-  height: 1378px;
-  position: absolute;
-  background: radial-gradient(
-    closest-side at 50% 50%,
-    #f44b1b 0%,
-    #f44b1b00 100%
-  );
-  opacity: 0.2;
-  z-index: -1;
-  pointer-events: none;
-}
-
-.gradientRight2 {
-  position: absolute;
-  bottom: -900px;
-  right: -1000px;
-  width: 1757px;
-  height: 1506px;
-  background: radial-gradient(
-    closest-side at 50% 50%,
-    #ffce00 0%,
-    #ffce0000 100%
-  );
-  opacity: 0.24;
-  transform: matrix(0.87, 0.48, -0.48, 0.87, 0, 0);
-  z-index: -1;
-  pointer-events: none;
-}
-
 /* .links-list {} */
 @media (max-width: 599.95px) {
   .links-list {
@@ -297,6 +199,10 @@ body {
   margin-left: 32px;
 }
 
+.link:hover {
+  text-decoration: underline;
+}
+
 .active {
   text-decoration: underline;
 }
@@ -306,7 +212,6 @@ body {
 .help-label {
   color: white;
 }
-
 .help-icon {
   fill: currentColor;
   width: 1em;
@@ -333,3 +238,64 @@ body {
 .footer-link:visited {
   color: white;
 }
+
+.MuiChip-label {
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 12px;
+  padding-right: 12px;
+  text-overflow: ellipsis;
+}
+
+.MuiChip-labelSmall {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.MuiChip-root {
+  color: #fff;
+  border: none;
+  cursor: default;
+  height: 32px;
+  display: inline-flex;
+  outline: 0;
+  padding: 0;
+  font-size: 0.7544642857142857rem;
+  box-sizing: border-box;
+  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  align-items: center;
+  font-family: 'Poppins', sans-serif;
+  white-space: nowrap;
+  border-radius: 16px;
+  vertical-align: middle;
+  justify-content: center;
+  text-decoration: none;
+  background-color: #616161;
+}
+
+.MuiChip-sizeSmall {
+  height: 24px;
+}
+
+.makeStyles-newTag-17 {
+  left: 142px;
+  color: #E2E1FF;
+  bottom: 24px;
+  position: relative;
+  font-size: 10px;
+  word-wrap: break-word;
+  font-weight: 600;
+  line-height: 24px;
+  background-color: #3B3785;
+}
+
+@media (max-width:1279.95px) {
+  .wormholescan-banner {
+    height: auto;
+    padding: 8px;
+    flex-direction: column;
+  }
+  .wormholescan-banner p {
+    margin: 0px;
+  }
+}
\ No newline at end of file
diff --git a/public/usdc-bridge/index.html b/public/usdc-bridge/index.html
index 7440a848e..cbcf5b78b 100644
--- a/public/usdc-bridge/index.html
+++ b/public/usdc-bridge/index.html
@@ -35,6 +35,14 @@
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div class="root">
     <div class="container">
+      <div class="wormholescan-banner" id="wormholescan-banner">
+        <p style="color: white; font-size: 16px; font-family: Poppins; font-weight: 700; line-height: 20.02px; letter-spacing: 0.28px; overflow-wrap: break-word;">
+          Introducing Wormholescan: &nbsp;</p>
+        <p style="color: white; font-size: 16px; font-family: Poppins; font-weight: 500; line-height: 20.02px; letter-spacing: 0.28px; overflow-wrap: break-word;">
+          A cross-chain block explorer</p>
+          <a class="wormholescan-link"
+          href="https://wormholescan.io/" target="_blank" rel="noopener noreferrer">VIEW WORMHOLESCAN.IO</a>
+      </div>
       <header class="header">
         <div class="header-inner">
           <a class="logo-link" href="/">
@@ -43,6 +51,12 @@
           <div class="spacer"></div>
           <div class="links-list">
             <div class="links-list-inner">
+              <div class="MuiChip-root makeStyles-newTag-17 MuiChip-sizeSmall">
+                <span class="MuiChip-label MuiChip-labelSmall">NEW</span>
+              </div>
+              <a class="link" href="https://wormholescan.io" target="_blank" aria-current="page">
+                Wormsholescan
+              </a>
               <a class="link" href="/" target="_blank" aria-current="page">
                 Token Bridge
               </a>
@@ -64,8 +78,8 @@
             </div>
           </div>
           <div class="help-container">
-            <a class="help-link" tabindex="0" aria-disabled="false" href="https://portalbridge.com/docs"
-              target="_blank" rel="noopener noreferrer" title="View the FAQ">
+            <a class="help-link" tabindex="0" aria-disabled="false" href="https://portalbridge.com/docs" target="_blank"
+              rel="noopener noreferrer" title="View the FAQ">
               <span class="help-label">
                 <svg class="help-icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
                   <path
@@ -86,8 +100,8 @@
       <div class="poweredBy">
         <span>Powered by </span>
         <a href="https://wormhole.com/" target="_blank" style="height: 30px;">
-          <img alt="Powered by Wormhole" loading="lazy" width="auto"
-            height="30" decoding="async" data-nimg="1" style="color:transparent" src="wormhole.png">
+          <img alt="Powered by Wormhole" loading="lazy" width="auto" height="30" decoding="async" data-nimg="1"
+            style="color:transparent" src="wormhole.png">
         </a>
         <span> &amp; </span>
         <a href="https://developers.circle.com/stablecoin/docs/cctp-faq" target="_blank" style="height: 30px;">
@@ -112,8 +126,7 @@
       </div>
     </div>
   </div>
-  <script
-    src="../wormhole-connect/main.js"></script>
+  <script src="../wormhole-connect/main.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 036a0a661..c2b28714b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,8 @@ import {
 } from "@certusone/wormhole-sdk";
 import {
   AppBar,
+  Box,
+  Chip,
   Container,
   Hidden,
   IconButton,
@@ -175,6 +177,17 @@ const useStyles = makeStyles((theme) => ({
       display: "none",
     },
   },
+  newTag: {
+    position: "relative",
+    left: "142px",
+    bottom: "24px",
+    backgroundColor: "#3B3785",
+    color: "#E2E1FF",
+    fontSize: "10px",
+    fontWeight: 600,
+    lineHeight: "24px",
+    wordWrap: "break-word",
+  },
 }));
 
 function App() {
@@ -209,6 +222,17 @@ function App() {
           <div className={classes.spacer} />
           <Hidden implementation="css" xsDown>
             <div style={{ display: "flex", alignItems: "center" }}>
+              <Box>
+                <Chip className={classes.newTag} label="NEW" size="small" />
+                <Link
+                  href="https://wormholescan.io"
+                  target="_blank"
+                  color="inherit"
+                  className={classes.link}
+                >
+                  Wormholescan
+                </Link>
+              </Box>
               <Link
                 component={NavLink}
                 to="/transfer"
diff --git a/src/components/NewsBar.tsx b/src/components/NewsBar.tsx
deleted file mode 100644
index b64d4f1bc..000000000
--- a/src/components/NewsBar.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import MuiLink from "@material-ui/core/Link";
-import Typography from "@material-ui/core/Typography";
-import { Theme, makeStyles, useMediaQuery, useTheme } from "@material-ui/core";
-import { useMemo } from "react";
-
-interface StyleProps {
-  exchangeWindowExpired: boolean;
-}
-
-const useStyles = makeStyles<Theme, StyleProps>(() => ({
-  bar: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "100%",
-    height: "56px",
-    textAlign: "center",
-    fontWeight: 500,
-    fontSize: "16px",
-    letterSpacing: "0.02em",
-    background: ({ exchangeWindowExpired }) =>
-      exchangeWindowExpired
-        ? "linear-gradient(1deg, #9577F4 0%, #AD55DA 28.96%, #CA2EBD 100%);"
-        : "linear-gradient(20deg, #f44b1b 0%, #eeb430 100%);",
-  },
-  bannerLink: {
-    display: "inline-flex",
-    alignItems: "center",
-    borderRadius: 20,
-    padding: "6px 12px",
-    backgroundColor: "white",
-    color: ({ exchangeWindowExpired }) =>
-      exchangeWindowExpired ? "#17153F" : "#F47B48",
-    marginLeft: "8px",
-    fontSize: "12px",
-    letterSpacing: "0.08em",
-    fontWeight: 600,
-    minHeight: "32px",
-    minWidth: "fit-content",
-    fontFamily: "Poppins",
-    wordWrap: "break-word",
-  },
-}));
-
-interface LinkProps {
-  href: string;
-  className: string;
-}
-
-function Link({ href, className }: LinkProps) {
-  return (
-    <MuiLink
-      href={href}
-      target="_blank"
-      rel="noopener noreferrer"
-      color="inherit"
-      className={className}
-    >
-      TRY IT NOW
-    </MuiLink>
-  );
-}
-
-export default function NewsBar() {
-  const theme = useTheme();
-  const isBigScreen = useMediaQuery(theme.breakpoints.up("md"));
-  const fontSize1 = isBigScreen ? 16 : 12;
-  const fontSize2 = isBigScreen ? 16 : 10;
-
-  const messages = {
-    cctp: {
-      href: `${process.env.PUBLIC_URL}/usdc-bridge`,
-      // To show Optimism option on SEPT 4th 2023
-      content:
-        new Date() < new Date(2023, 8, 4)
-          ? "Experience frictionless USDC transfers between Ethereum, Avalanche, and Arbitrum with Circle's CCTP. "
-          : "Experience frictionless USDC transfers between Ethereum, Avalanche, Arbitrum, and Optimism with Circle's CCTP.",
-    },
-    cosmos: {
-      href: `${process.env.PUBLIC_URL}/cosmos`,
-      content: (
-        <>
-          <Typography
-            variant="body1"
-            style={{
-              color: "white",
-              fontSize: fontSize1,
-              fontFamily: "Poppins",
-              fontWeight: 500,
-              letterSpacing: 0.28,
-              wordWrap: "break-word",
-            }}
-          >
-            Wormhole Gateway is now live on mainnet! &nbsp;
-          </Typography>
-          <Typography
-            variant="body1"
-            style={{
-              color: "white",
-              fontSize: fontSize2,
-              fontFamily: "Poppins",
-              fontWeight: 700,
-              letterSpacing: 0.28,
-              wordWrap: "break-word",
-            }}
-          >
-            Bridge your assets to Osmosis today.
-          </Typography>
-        </>
-      ),
-    },
-  };
-
-  const exchangeWindowExpired = useMemo(
-    () => new Date() < new Date(2023, 8, 8),
-    []
-  );
-  const classes = useStyles({ exchangeWindowExpired });
-  // Shows Cosmos message until Sept 4th 2023
-  const { content, href } = useMemo(
-    () => (exchangeWindowExpired ? messages.cosmos : messages.cctp),
-    [exchangeWindowExpired, messages.cctp, messages.cosmos]
-  );
-  return (
-    <div className={classes.bar}>
-      {content}
-      <Link href={href} className={classes.bannerLink} />
-    </div>
-  );
-}
diff --git a/src/components/NewsBar/Bar.tsx b/src/components/NewsBar/Bar.tsx
new file mode 100644
index 000000000..1db5d4c4d
--- /dev/null
+++ b/src/components/NewsBar/Bar.tsx
@@ -0,0 +1,32 @@
+import type { Message } from "./messages";
+import { makeStyles, type Theme } from "@material-ui/core";
+
+const useStyles = makeStyles<Theme, Pick<Message, "background">>((theme) => ({
+  bar: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    height: "56px",
+    [theme.breakpoints.down("md")]: {
+      height: "auto",
+      flexDirection: "column",
+      padding: theme.spacing(1),
+    },
+    textAlign: "center",
+    fontWeight: 500,
+    fontSize: "16px",
+    letterSpacing: "0.02em",
+    background: ({ background }) => background,
+  },
+}));
+
+type BarProps = {
+  background: string;
+  children: JSX.Element[] | null;
+};
+
+export default function Bar({ background, children }: BarProps) {
+  const classes = useStyles({ background });
+  return children && <div className={classes.bar}>{children}</div>;
+}
diff --git a/src/components/NewsBar/NewsBarButton.tsx b/src/components/NewsBar/NewsBarButton.tsx
new file mode 100644
index 000000000..4f53faaab
--- /dev/null
+++ b/src/components/NewsBar/NewsBarButton.tsx
@@ -0,0 +1,38 @@
+import type { Message } from "./messages";
+import type { Theme } from "@material-ui/core/styles";
+import Link from "@material-ui/core/Link";
+import makeStyles from "@material-ui/core/styles/makeStyles";
+
+const useStyles = makeStyles<Theme, Pick<Message, "button">>(() => ({
+  bannerLink: {
+    display: "inline-flex",
+    alignItems: "center",
+    borderRadius: 20,
+    padding: "6px 12px",
+    backgroundColor: "white",
+    color: ({ button }) => button.background,
+    marginLeft: "8px",
+    fontSize: "12px",
+    letterSpacing: "0.08em",
+    fontWeight: 600,
+    minHeight: "32px",
+    minWidth: "fit-content",
+    fontFamily: "Poppins",
+    wordWrap: "break-word",
+  },
+}));
+
+export default function NewsBarButton({ button }: Pick<Message, "button">) {
+  const classes = useStyles({ button });
+  return (
+    <Link
+      href={button.href}
+      target="_blank"
+      rel="noopener noreferrer"
+      color="inherit"
+      className={classes.bannerLink}
+    >
+      {button.label || "TRY IT NOW"}
+    </Link>
+  );
+}
diff --git a/src/components/NewsBar/index.tsx b/src/components/NewsBar/index.tsx
new file mode 100644
index 000000000..d78fa586b
--- /dev/null
+++ b/src/components/NewsBar/index.tsx
@@ -0,0 +1,18 @@
+import NewBarButton from "./NewsBarButton";
+import useBannerMessageConfig from "./useBannerMessage";
+import config from "./messages";
+import Bar from "./Bar";
+import { useMemo } from "react";
+
+export default function NewsBar() {
+  const messages = useMemo(() => Object.values(config), []);
+  const message = useBannerMessageConfig(messages);
+  return (
+    message && (
+      <Bar background={message.background}>
+        {message.content}
+        <NewBarButton button={message.button} />
+      </Bar>
+    )
+  );
+}
diff --git a/src/components/NewsBar/messages.tsx b/src/components/NewsBar/messages.tsx
new file mode 100644
index 000000000..8a3beeec5
--- /dev/null
+++ b/src/components/NewsBar/messages.tsx
@@ -0,0 +1,115 @@
+import Typography from "@material-ui/core/Typography";
+
+export type Message = {
+  background: string;
+  button: {
+    href: string;
+    label?: string;
+    background: string;
+  };
+  content: JSX.Element;
+  start: Date;
+  ends?: Date;
+};
+
+const messages: Record<string, Message> = {
+  cctp: {
+    background: "linear-gradient(20deg, #f44b1b 0%, #eeb430 100%);",
+    button: {
+      href: `${process.env.PUBLIC_URL}/usdc-bridge`,
+      label: "TRY IT NOW",
+      background: "#F47B48",
+    },
+    content: (
+      <>
+        "Experience frictionless USDC transfers between Ethereum, Avalanche,
+        Arbitrum, and Optimism with Circle's CCTP."
+      </>
+    ),
+    start: new Date(2020, 10, 23), // any date in the past would be fine
+  },
+  cosmos: {
+    background:
+      "linear-gradient(1deg, #9577F4 0%, #AD55DA 28.96%, #CA2EBD 100%);",
+    button: {
+      href: `${process.env.PUBLIC_URL}/cosmos`,
+      label: "TRY IT NOW",
+      background: "#17153F",
+    },
+    content: (
+      <>
+        <Typography
+          variant="body1"
+          style={{
+            color: "white",
+            fontSize: 16,
+            fontFamily: "Poppins",
+            fontWeight: 500,
+            letterSpacing: 0.28,
+            wordWrap: "break-word",
+          }}
+        >
+          Wormhole Gateway is now live on mainnet! &nbsp;
+        </Typography>
+        <Typography
+          variant="body1"
+          style={{
+            color: "white",
+            fontSize: 16,
+            fontFamily: "Poppins",
+            fontWeight: 700,
+            letterSpacing: 0.28,
+            wordWrap: "break-word",
+          }}
+        >
+          Bridge your assets to Osmosis today.
+        </Typography>
+      </>
+    ),
+    start: new Date(2023, 8, 8),
+  },
+  wormholescan: {
+    background:
+      "linear-gradient(86deg, #FF2A57 0%, #FF2A57 28.96%, #0F0C48 100%);",
+    button: {
+      href: "https://wormholescan.io/",
+      label: "VIEW WORMHOLESCAN.IO",
+      background: "#17153F",
+    },
+    content: (
+      <>
+        <Typography
+          variant="body1"
+          style={{
+            color: "white",
+            fontSize: "16px",
+            fontFamily: "Poppins",
+            fontWeight: "700",
+            lineHeight: "20.02px",
+            letterSpacing: "0.28px",
+            wordWrap: "break-word",
+          }}
+        >
+          Introducing Wormholescan: &nbsp;
+        </Typography>
+        <Typography
+          variant="body1"
+          style={{
+            color: "white",
+            fontSize: "16px",
+            fontFamily: "Poppins",
+            fontWeight: 500,
+            lineHeight: "20.02px",
+            letterSpacing: "0.28px",
+            wordWrap: "break-word",
+          }}
+        >
+          A cross-chain block explorer
+        </Typography>
+      </>
+    ),
+    start: new Date(2023, 9, 20),
+  },
+};
+
+export default messages;
diff --git a/src/components/NewsBar/useBannerMessage.ts b/src/components/NewsBar/useBannerMessage.ts
new file mode 100644
index 000000000..31366290b
--- /dev/null
+++ b/src/components/NewsBar/useBannerMessage.ts
@@ -0,0 +1,31 @@
+import type { Message } from "./messages";
+import { useState, useEffect } from "react";
+
+function criteria(left: Message, right: Message) {
+  if (left.start && right.start) {
+    return right.start.getTime() - left.start.getTime();
+  }
+  if (left.start) {
+    return 1;
+  }
+  if (right.start) {
+    return -1;
+  }
+  return 0;
+}
+
+export default function useBannerMessageConfig(messages: Message[]) {
+  const [message, setMessage] = useState<Message | null>(null);
+  useEffect(() => {
+    const now = new Date();
+    const message = messages
+      .sort(criteria)
+      .find(
+        (message) =>
+          (!message.start || message.start < now) &&
+          (!message.ends || message.ends > now)
+      );
+    setMessage(message || null);
+  }, [messages]);
+  return message;
+}