#469 #468 - add wormholescan link and banner (#473)

* #469 #468 - add wormholescan link and banner * restore css rules * fix background image for preview * fix typo at wormholescan.com nav link
XLabs · Oct 24, 2023 · 89bd6da · 89bd6da
1 parent 9536d3d
commit 89bd6da
Show file tree

Hide file tree

Showing 15 changed files with 709 additions and 362 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -15,7 +15,7 @@ body {
   line-height: 1.43;
   background-size: 120%;
   background-color: #17153f;
-  background-image: url(/static/media/bg.7f578c3eb1b9a700a83d6113bf1579e0.svg);
+  background-image: url(../static/media/bg.7f578c3eb1b9a700a83d6113bf1579e0.svg);
   background-repeat: repeat-y;
   background-position: top center;
   overscroll-behavior-y: none;
@@ -49,22 +49,22 @@ 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;
   letter-spacing: 0.02em;
   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;
+  }
+}
diff --git 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">
+                Wormholescan
+              </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
@@ -15,7 +15,7 @@ body {
   line-height: 1.43;
   background-size: 120%;
   background-color: #17153f;
-  background-image: url(/static/media/bg.7f578c3eb1b9a700a83d6113bf1579e0.svg);
+  background-image: url(../static/media/bg.7f578c3eb1b9a700a83d6113bf1579e0.svg);
   background-repeat: repeat-y;
   background-position: top center;
   overscroll-behavior-y: none;
@@ -49,22 +49,22 @@ 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;
   letter-spacing: 0.02em;
   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;
+  }
+}