#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;
+ }
+}