UI fixes

package.json

@@ -35,8 +35,8 @@
     "semantic-release": "^17.1.2"
   },
   "dependencies": {
-    "@near-eth/client": "^1.1.1",
-    "@near-eth/nep141-erc20": "^1.2.4",
+    "@near-eth/client": "^1.2.0",
+    "@near-eth/nep141-erc20": "^1.3.1",
     "decimal.js": "^10.2.1",
     "near-api-js": "^0.39.0",
     "@walletconnect/web3-provider": "^1.4.1",

src/css/global.css

@@ -246,7 +246,8 @@ button[disabled] {
   cursor: not-allowed;
   transform: none;
 }
-[disabled] .cancel, .cancel[disabled] {
+[disabled] .cancel,
+.cancel[disabled] {
   color: gray;
   cursor: not-allowed;
   background: none;
@@ -326,6 +327,15 @@ li {
   padding: 1em;
 }
 
+.beta-tag {
+  color: var(--blue-500);
+  border: 1px solid var(--blue-500);
+  border-radius: 4px;
+  padding: 2px 4px;
+  font-size: var(--fs-micro);
+  font-weight: var(--fw-regular);
+}
+
 .concept-ethereum {
   color: var(--purple);
 }

src/css/title.css

@@ -1,18 +1,38 @@
-.title {
+.logo--landing-page {
   text-align: center;
+  margin: 64px auto 0;
+  width: 200px;
 }
 
-.title > * {
-  display: block;
+.logo--landing-page .rainbow-icon {
+  width: 72px;
+  margin: 0 auto var(--spacing-m);
 }
 
-.title > svg {
+.logo--landing-page svg {
   margin: calc(0.5 * var(--spacing-m)) auto;
 }
 
-.title > small {
+.logo--landing-page small {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   color: var(--gray-600);
-  font-size: 0.5em;
-  margin-bottom: 0.5em;
-  font-weight: 400;
+  font-size: var(--base-font-size);
+  margin-bottom: var(--spacing-xs);
+  font-weight: var(--fw-regular);
+}
+
+.logo--landing-page small img {
+  margin: 0 var(--spacing-xs);
+}
+
+.logo--landing-page .logo-text--primary {
+  position: relative;
+}
+
+.logo-text--primary .beta-tag {
+  position: absolute;
+  top: 0;
+  right: -12px;
 }

src/html/alert-banner.html

@@ -1,7 +1,7 @@
 <aside class="banner caution">
   <svg
-    width="16"
-    height="16"
+    width="25"
+    height="25"
     viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -29,8 +29,9 @@
     />
   </svg>
   <span>
-    <strong>CAUTION: </strong>The Rainbow Bridge is currently incompatible with NEAR wallets that are secured with either Ledger devices,
-    or two-factor authentication. This issue will be resolved soon.
+    <strong>CAUTION: </strong>The Rainbow Bridge is temporarily incompatible
+    with NEAR wallets secured by Ledger devices and/or two-factor
+    authentication.
   </span>
 </aside>
 
@@ -42,7 +43,6 @@
     font-size: var(--fs-micro);
     font-weight: var(--fw-regular);
     padding: var(--spacing-m);
-    text-align: center;
   }
 
   .banner svg {

src/html/bridge-erc20-form.html

@@ -1,31 +1,25 @@
 <form data-behavior="bridgeErc20Form" class="container" style="display:none">
   <h1 style="background: url(img/unbridged.svg) top center no-repeat; font-size: 1.5em; padding: 12rem 0 2.5rem">
-    Token not yet bridged
+    Set up <strong data-behavior="erc20Name"></strong> on NEAR
   </h1>
   <p>
     The <strong data-behavior="erc20Name"></strong>
     <a
       href="https://eips.ethereum.org/EIPS/eip-20"
-      rel="nofollow"
+      target="_blank" rel="noopener noreferrer"
     >ERC20</a>
     token has not yet been bridged.
   </p>
   <p>
-    The
-    <a href="https://github.com/near/rainbow-token-connector" target="_blank">Fungible Token Connector</a>
-    allows sending any ERC20 token to NEAR, but requires an initial one-time deploy of a "BridgeToken"
-    <a href="https://docs.near.org/docs/roles/developer/contracts/intro#get-started" target="_blank">smart contract</a>.
+    This is the first time the <strong data-behavior="erc20Name"></strong> token is being transferred to NEAR.
+    This requires a small, one-time setup fee of about 3 $NEAR.
   </p>
   <button style="margin-top: 3em">
     Bridge it!
   </button>
   <button type="button" class="cancel" data-behavior="bridgeErc20Cancel">
     Cancel
   </button>
-  <p style="font-size: 0.75em; margin-top: 2em">
-    Deploying a new "Bridge Token" smart contract requires ~3 NEAR to cover
-    <a href="https://docs.near.org/docs/concepts/storage" target="_blank">storage fees</a>.
-  </p>
 </form>
 
 <script>

src/html/erc20-form.html

@@ -166,7 +166,15 @@ <h2 class="modal-section__label">Select from whitelist</h2>
       window.dom.hide('signInstruction')
     }
 
-    select.onclick = () => window.dom.show("erc20Modal");
+    select.onclick = () => {
+      window.urlParams.set({ erc20: '' })
+      window.dom.find("erc20FreeForm").value = ''
+      window.dom.find("erc20FreeForm").classList.remove("error");
+      erc20Address = ''
+      window.dom.fill("erc20AddressError").with("");
+      window.dom.hide("erc20AddressError");
+      window.dom.show("erc20Modal")
+    }
 
     amount.onkeyup = function enableOrDisable(e) {
       const balance = Number(window.dom.find("erc20Balance").innerHTML);

src/html/erc20n-form.html

@@ -160,7 +160,15 @@ <h2 class="modal-section__label">Select from whitelist</h2>
       window.dom.hide('signInstruction')
     }
 
-    select.onclick = () => window.dom.show("erc20nModal");
+    select.onclick = () => {
+      window.urlParams.set({ erc20n: '' })
+      window.dom.find('erc20nFreeForm').value = ''
+      window.dom.find("erc20nFreeForm").classList.remove("error");
+      erc20nAddress = ''
+      window.dom.fill("erc20nAddressError").with("");
+      window.dom.hide("erc20nAddressError");
+      window.dom.show('erc20nModal')
+    }
 
     amount.onkeyup = function enableOrDisableErc20n(e) {
       const balance = Number(window.dom.find("erc20nBalance").innerHTML);

src/html/landing.html

@@ -1,9 +1,6 @@
 <div class="landing" data-behavior="landing">
-  <h1 class="title">
-    <img
-      src="/img/rainbow-bridge.svg"
-      style="width: 2.3em; display: inline; margin-top: 2em"
-    />
+  <h1 class="logo--landing-page">
+    <img class="rainbow-icon" src="/img/rainbow-bridge.svg" />
     <small>
       ETH
       <img
@@ -13,8 +10,11 @@ <h1 class="title">
       />
       NEAR
     </small>
-    <div>Rainbow</div>
-    <div>Bridge</div>
+    <div class="logo-text--primary">
+      Rainbow <br />
+      Bridge
+      <span class="beta-tag">Beta</span>
+    </div>
   </h1>
   <div class="content-wrapper">
     <p class="landing-blurb">
@@ -24,15 +24,27 @@ <h1 class="title">
     <form method="get" class="panel">
       <include src="authenticated-accounts.html"></include>
       <div class="cta-container">
-        <p class="create-account">
-          Need a NEAR account? Create one
-          <a href="https://faucet.paras.id/">here</a>.
-        </p>
         <button data-behavior="landingSubmit" class="full-width">
           Begin new transfer
         </button>
+        <button
+          type="button"
+          class="link button--missing-transfer"
+          data-behavior="newRecovery"
+        >
+          Restore transfer
+        </button>
       </div>
     </form>
+    <p class="create-account">
+      Need a NEAR account? Create one
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href="https://faucet.paras.id/"
+        >here</a
+      >.
+    </p>
   </div>
 </div>
 <style>
@@ -55,8 +67,16 @@ <h1 class="title">
       0px 3.39155px 8.04662px rgba(0, 0, 0, 0.0201946),
       0px 1.4113px 3.34838px rgba(0, 0, 0, 0.0140573);
     margin: 80px var(--spacing-m);
+    margin-bottom: var(--spacing-l);
     padding: var(--spacing-m);
   }
+  .create-account {
+    font-size: var(--fs-small);
+    border: 1px solid var(--gray-300);
+    border-radius: var(--br-base);
+    padding: var(--spacing-m);
+    margin: 0 var(--spacing-m);
+  }
   @media (min-width: 928px) {
     .landing {
       background: url(img/landing-bg-left.svg) no-repeat,
@@ -67,13 +87,19 @@ <h1 class="title">
 
     .panel {
       margin: 80px auto;
+      margin-bottom: var(--spacing-l);
+    }
+    .create-account {
+      margin: 0;
     }
   }
   .cta-container {
     margin-top: var(--spacing-xxl);
   }
-  .create-account {
-    font-size: var(--fs-micro);
+  .cta-container .button--missing-transfer {
+    font-size: var(--fs-body);
+    font-weight: var(--fw-regular);
+    margin-top: 0.5em;
   }
 </style>
 <script>