From 2db1ad2243857defd414a81d435ca6613d1ded23 Mon Sep 17 00:00:00 2001
From: yuli-ferna <yuliferna123@gmail.com>
Date: Mon, 28 Aug 2023 14:32:39 -0400
Subject: [PATCH] advance

---
 public/sui/index.css  | 263 ++++++++++++++++++++++--------------------
 public/sui/index.html |  18 ++-
 2 files changed, 152 insertions(+), 129 deletions(-)

diff --git a/public/sui/index.css b/public/sui/index.css
index 0e65cfe11..b8059e91a 100644
--- a/public/sui/index.css
+++ b/public/sui/index.css
@@ -1,199 +1,208 @@
 html {
-    -webkit-locale: "en";
-    box-sizing: border-box;
-    -webkit-font-smoothing: antialiased;
-    --vh: 10.01px;
+  -webkit-locale: "en";
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  --vh: 10.01px;
 }
 
 body {
-    box-sizing: inherit;
-    color: #FFFFFF;
-    margin: 0;
-    font-size: 0.8125rem;
-    font-family: 'Poppins', sans-serif;
-    font-weight: 400;
-    line-height: 1.43;
-    background-size: 120%;
-    background-color: #17153f;
-    background-image: url(/static/media/bg.7f578c3eb1b9a700a83d6113bf1579e0.svg);
-    background-repeat: repeat-y;
-    background-position: top center;
-    overscroll-behavior-y: none;
+  box-sizing: inherit;
+  color: #ffffff;
+  margin: 0;
+  font-size: 0.8125rem;
+  font-family: "Poppins", sans-serif;
+  font-weight: 400;
+  line-height: 1.43;
+  background-size: 120%;
+  background-color: #17153f;
+  background-image: url(/static/media/bg.7f578c3eb1b9a700a83d6113bf1579e0.svg);
+  background-repeat: repeat-y;
+  background-position: top center;
+  overscroll-behavior-y: none;
 }
 
 .root {
-    box-sizing: inherit;
+  box-sizing: inherit;
 }
 
 .container {
-    box-sizing: inherit;
-    display: flex;
-    overflow: hidden;
-    position: relative;
-    min-height: 100vh;
-    flex-direction: column;
+  box-sizing: inherit;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  min-height: 100vh;
+  flex-direction: column;
 }
 
 .cctp-banner {
-    box-sizing: inherit;
-    width: 100%;
-    display: flex;
-    padding: 4px 16px;
-    font-size: 14px;
-    background: linear-gradient(20deg, #f44b1b 0%, #eeb430 100%);
-    min-height: 48px;
-    text-align: center;
-    align-items: center;
-    font-weight: 500;
-    letter-spacing: 0.02em;
-    justify-content: center;
+  box-sizing: inherit;
+  width: 100%;
+  display: flex;
+  padding: 4px 16px;
+  font-size: 14px;
+  background: linear-gradient(20deg, #f44b1b 0%, #eeb430 100%);
+  min-height: 48px;
+  text-align: center;
+  align-items: center;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  justify-content: center;
+}
+#cctp-default-text {
+  display: none;
+}
+
+#cctp-optimism-text {
+  display: none;
 }
 
 .cctp-link {
-    text-align: center;
-    box-sizing: inherit;
-    margin: 0;
-    text-decoration: none;
-    color: #F47B48;
-    display: inline-flex;
-    padding: 6px 12px;
-    font-size: 12px;
-    min-width: fit-content;
-    min-height: 32px;
-    align-items: center;
-    font-weight: 600;
-    margin-left: 8px;
-    border-radius: 20px;
-    letter-spacing: 0.08em;
-    background-color: white;
+  text-align: center;
+  box-sizing: inherit;
+  margin: 0;
+  text-decoration: none;
+  color: #f47b48;
+  display: inline-flex;
+  padding: 6px 12px;
+  font-size: 12px;
+  min-width: fit-content;
+  min-height: 32px;
+  align-items: center;
+  font-weight: 600;
+  margin-left: 8px;
+  border-radius: 20px;
+  letter-spacing: 0.08em;
+  background-color: white;
 }
 
 .header {
-    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-    box-shadow: none;
-    width: 100%;
-    display: flex;
-    z-index: 1100;
-    box-sizing: border-box;
-    flex-shrink: 0;
-    flex-direction: column;
-    position: static;
-    color: inherit;
-    background: transparent;
-    margin-top: 16px;
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  box-shadow: none;
+  width: 100%;
+  display: flex;
+  z-index: 1100;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  flex-direction: column;
+  position: static;
+  color: inherit;
+  background: transparent;
+  margin-top: 16px;
 }
 
 .header-inner {
-    color: inherit;
-    box-sizing: inherit;
-    display: flex;
-    position: relative;
-    align-items: center;
-    padding-left: 24px;
-    padding-right: 24px;
-    min-height: 64px;
-    width: 100%;
-    margin: auto;
-    max-width: 1440px;
+  color: inherit;
+  box-sizing: inherit;
+  display: flex;
+  position: relative;
+  align-items: center;
+  padding-left: 24px;
+  padding-right: 24px;
+  min-height: 64px;
+  width: 100%;
+  margin: auto;
+  max-width: 1440px;
 }
 
 .logo-link {
-    display: inline-flex;
-    align-items: center;
+  display: inline-flex;
+  align-items: center;
 }
 .logo-link:hover {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .logo {
-    height: 68px;
-    vertical-align: middle;
-    margin-right: 8px;
-    display: inline-block;
+  height: 68px;
+  vertical-align: middle;
+  margin-right: 8px;
+  display: inline-block;
 }
 .logo:hover {
-    filter: contrast(1);
+  filter: contrast(1);
 }
 
 .spacer {
-    flex: 1;
-    width: 100vw;
+  flex: 1;
+  width: 100vw;
 }
 
 /* .links-list {} */
 @media (max-width: 599.95px) {
-    .links-list {
-        display: none;
-    }
+  .links-list {
+    display: none;
+  }
 
-    .help-container {
-        display: block;
-    }
+  .help-container {
+    display: block;
+  }
 }
 
 @media (min-width: 600px) {
-    .links-list {
-        display: flex;
-    }
+  .links-list {
+    display: flex;
+  }
 
-    .help-container {
-        display: none;
-    }
+  .help-container {
+    display: none;
+  }
 }
 
 @font-face {
-    font-family: 'Suisse BP Intl';
-    src: url('SuisseBPIntlBold.woff2');
+  font-family: "Suisse BP Intl";
+  src: url("SuisseBPIntlBold.woff2");
 }
 
 .links-list-inner {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .link {
-    margin: 0;
-    text-decoration: none;
-    color: white;
-    font-size: 0.8125rem;
-    font-family: Suisse BP Intl, sans-serif;
-    font-weight: 600;
-    line-height: 1.43;
-    text-underline-offset: 6px;
-    margin-left: 32px;
+  margin: 0;
+  text-decoration: none;
+  color: white;
+  font-size: 0.8125rem;
+  font-family:
+    Suisse BP Intl,
+    sans-serif;
+  font-weight: 600;
+  line-height: 1.43;
+  text-underline-offset: 6px;
+  margin-left: 32px;
 }
 .active {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 /* .help-container {} */
 /* .help-link {} */
 .help-label {
-    color: white;
+  color: white;
 }
 .help-icon {
-    fill: currentColor;
-    width: 1em;
-    height: 1em;
-    display: inline-block;
-    font-size: 1.3928571428571428rem;
-    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-    flex-shrink: 0;
-    user-select: none;
+  fill: currentColor;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  font-size: 1.3928571428571428rem;
+  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  flex-shrink: 0;
+  user-select: none;
 }
 
 .footer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-bottom: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 15px;
 }
 
 .footer-link {
-    color: white;
-    text-decoration: underline;
+  color: white;
+  text-decoration: underline;
 }
 
 .footer-link:visited {
-    color: white;
+  color: white;
 }
diff --git a/public/sui/index.html b/public/sui/index.html
index e3f9a2452..7fe551af2 100644
--- a/public/sui/index.html
+++ b/public/sui/index.html
@@ -40,8 +40,11 @@
     <div class="root">
         <div class="container">
           <div class="cctp-banner">
-              <span>
-                  Experience frictionless USDC transfers between Ethereum and Avalanche with Circle's CCTP.
+              <span id="cctp-default-text">
+                Experience frictionless USDC transfers between Ethereum, Avalanche, and Arbitrum with Circle's CCTP.
+              </span>
+              <span id="cctp-optimism-text">
+                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
@@ -99,5 +102,16 @@
     </div>
 
     <script src="https://www.unpkg.com/@wormhole-foundation/wormhole-connect@0.0.5/dist/main.js"></script>
+    <script>
+      // To show Optimism option on SEPT 4th 2023
+      if (new Date() < new Date(2023, 8, 4)) {
+        document.getElementById("cctp-default-text").style.display = "block";
+        document.getElementById("cctp-optimism-text").style.display = "none";
+        
+      } else {
+        document.getElementById("cctp-default-text").style.display = "none";
+        document.getElementById("cctp-optimism-text").style.display = "block";
+      }
+    </script>
   </body>
 </html>