Paras faucet integration

package.json

@@ -38,6 +38,7 @@
     "@near-eth/client": "^1.2.0",
     "@near-eth/nep141-erc20": "^1.3.2",
     "decimal.js": "^10.2.1",
+    "jwt-decode": "^3.1.2",
     "near-api-js": "^0.39.0",
     "@walletconnect/web3-provider": "^1.4.1",
     "web3": "^1.3.4",

src/css/modal.css

@@ -8,7 +8,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 100;
+  z-index: 2;
 }
 
 /* modal expects one immediate child */
@@ -88,10 +88,8 @@
   font-size: var(--fs-small);
   line-height: var(--lh-copy);
   text-align: center;
-}
-
-.modal__cta {
-  margin: var(--spacing-l) 0 var(--spacing-xl);
+  padding: 0 var(--spacing-xxl);
+  margin: var(--spacing-xxl) 0;
 }
 
 /* child must have nav element with one close button within */
@@ -101,12 +99,8 @@
 }
 
 .modal__nav__button--close {
-  background-color: transparent;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-s);
-  height: auto;
+  background: url(../img/cross.svg);
+  background-size: 100% 100%;
 }
 
 .modal__nav__button--close:hover,

src/html/claim-ready-modal.html

@@ -0,0 +1,21 @@
+<div class="modal__container">
+  <nav class="modal__nav">
+    <button
+      type="button"
+      class="modal__nav__button--close"
+      data-behavior="closeModal"
+    >
+      <span class="visually-hidden">close</span>
+    </button>
+  </nav>
+  <div class="modal-image__container">
+    <img src="img/gift-near.svg" alt="" class="modal__image" />
+  </div>
+  <h1 class="modal__heading">Your account is ready to claim!</h1>
+  <p class="modal__message">
+    Continue to NEAR Wallet to claim you NEAR account.
+  </p>
+  <button data-behavior="claimNEARAccount" class="full-width">
+    Claim your NEAR Account
+  </button>
+</div>

src/html/erc20-form.html

@@ -91,28 +91,6 @@ <h2>New Transfer</h2>
           class="modal__nav__button--close"
           data-behavior="closeModal"
         >
-          <svg
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M18 6L6 18"
-              stroke="#A2A2A8"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-            <path
-              d="M6 6L18 18"
-              stroke="#A2A2A8"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
           <span class="visually-hidden">close</span>
         </button>
       </nav>

src/html/erc20n-form.html

@@ -80,28 +80,6 @@ <h2>New Transfer</h2>
           class="modal__nav__button--close"
           data-behavior="closeModal"
         >
-          <svg
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M18 6L6 18"
-              stroke="#A2A2A8"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-            <path
-              d="M6 6L18 18"
-              stroke="#A2A2A8"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
           <span class="visually-hidden">close</span>
         </button>
       </nav>

src/html/incorrect-network-modal.html

@@ -11,7 +11,7 @@ <h1 class="modal__heading">Incorrect Wallet Network</h1>
     <div data-behavior="modalMessage" class="modal__message"></div>
     <p class="modal__cta">Change your active wallet network to proceed.</p>
     <button
-      class="button-variant--secondary button-size--small"
+      class="button-variant--secondary button-size--small full-width"
       data-behavior="switchEthWallet"
     >
       Switch wallet

src/html/landing.html

@@ -39,12 +39,93 @@ <h1 class="logo--landing-page">
     <p class="create-account">
       Need a NEAR account? Create one
       <a
-        target="_blank"
-        rel="noopener noreferrer"
-        href="https://faucet.paras.id/"
-        >here</a
-      >.
+        data-behavior="openClaimModal"
+        style="cursor: pointer"
+      >here</a>.
     </p>
+    <div data-behavior="claimVerification" class="modal" style="display: none">
+      <div class="modal__container">
+        <nav class="modal__nav">
+          <button
+            type="button"
+            class="modal__nav__button--close"
+            data-behavior="closeModal"
+          >
+            <span class="visually-hidden">close</span>
+          </button>
+        </nav>
+        <div data-behavior="enoughETH">
+          <div class="modal-image__container">
+            <img src="img/gift.svg" alt="" class="modal__image"/>
+          </div>
+          <h1 class="modal__heading">Claim Your NEAR Account</h1>
+          <p class="modal__message">
+            Ethereum holders may create a NEAR account using the
+            <a target="_blank" rel="noopener noreferrer" href="https://faucet.paras.id/">Paras Faucet</a>.
+            Connect your Ethereum wallet to get started.
+          </p>
+        </div>
+        <div data-behavior="notEnoughETH" style="display: none">
+          <div class="modal-image__container">
+            <img src="img/empty-wallet.svg" alt="" class="modal__image"/>
+          </div>
+          <h1 class="modal__heading">Insufficient funds to claim account</h1>
+          <p class="modal__message">
+            Your Ethereum wallet must have a balance of at least 0.05 ETH as proof of liquidity in order to claim your account.
+          </p>
+        </div>
+        <div class="authenticated-account__details space_around">
+          <img src="img/ethereum.svg" alt="" class="network-indicator network--ethereum"/>
+          <div data-behavior="ethAccountPlaceholder">Ethereum</div>
+          <button
+            type="button"
+            class="button-size--small"
+            id="authEthereum"
+            data-behavior="authEthereum"
+          >
+            Connect
+          </button>
+          <button
+            class="button-size--small button-variant--secondary"
+            data-behavior="disconnectEthereum"
+            style="display: none"
+            type="button"
+          >
+            Disconnect
+          </button>
+        </div>
+        <button data-behavior="verifyEthAddress" class="full-width">
+          Verify & Continue
+        </button>
+      </div>
+    </div>
+    <div data-behavior="claimSignature" class="modal" style="display: none">
+      <include src="sign-message-modal.html"></include>
+    </div>
+    <div data-behavior="claimReady" class="modal" style="display: none">
+      <include src="claim-ready-modal.html"></include>
+    </div>
+    <div data-behavior="claimError" class="modal" style="display: none">
+      <div class="modal__container">
+        <nav class="modal__nav">
+          <button
+            type="button"
+            class="modal__nav__button--close"
+            data-behavior="closeModal"
+          >
+            <span class="visually-hidden">close</span>
+          </button>
+        </nav>
+        <div class="modal-image__container">
+          <img src="img/warning.svg" alt="" class="modal__image" />
+        </div>
+        <h1 class="modal__heading">Oops! Something went wrong</h1>
+        <p class="modal__message" data-behavior="claimErrorMessage"></p>
+        <button data-behavior="openClaimModal" class="full-width">
+          Return
+        </button>
+      </div>
+    </div>
   </div>
 </div>
 <style>
@@ -101,9 +182,72 @@ <h1 class="logo--landing-page">
     font-weight: var(--fw-regular);
     margin-top: 0.5em;
   }
+  .space_around {
+    margin: var(--spacing-xxl) 0;
+  }
 </style>
 <script>
-  async function renderLanding() {
+  window.addEventListener("load", function addLoginParasFaucetHandler () {
+    const verifyButton = window.dom.find("verifyEthAddress");
+    const claimButton = window.dom.find("claimNEARAccount");
+    window.dom.onClick('openClaimModal', function renderClaimModal () {
+      if (process.env.ethNetworkId !== 'main') {
+        window.location.href = 'https://wallet.testnet.near.org/'
+        return
+      }
+      window.dom.hide("claimError")
+      window.dom.show("enoughETH")
+      window.dom.hide("notEnoughETH")
+      verifyButton.disabled = false
+      if (!window.ethInitialized) {
+        verifyButton.disabled = true
+      }
+      window.dom.show("claimVerification")
+    })
+
+    verifyButton.onclick = async () => {
+      try{
+        await window.faucetUtils.checkETHBalance()
+      } catch(error) {
+        console.error(error.message)
+        window.dom.hide("enoughETH")
+        window.dom.show("notEnoughETH")
+        verifyButton.disabled = true
+        return
+      }
+      window.dom.hide("claimVerification")
+      window.dom.show("claimSignature")
+      try{
+        await window.faucetUtils.parasFaucetLogin()
+      } catch(error) {
+        console.log(error.message)
+        window.dom.fill('claimErrorMessage').with(error.message);
+        window.dom.hide("claimSignature")
+        window.dom.show("claimError")
+        return
+      }
+      window.dom.hide("claimSignature")
+      window.dom.show("claimReady")
+    }
+
+    claimButton.onclick = async () => {
+      window.dom.fill('claimErrorMessage').with("");
+      let claimURL
+      try {
+        claimURL = await window.faucetUtils.getClaimURL()
+      } catch(error) {
+        console.error(error.message)
+        window.dom.fill('claimErrorMessage').with(error.message);
+        window.dom.hide("claimReady")
+        window.dom.show("claimError")
+        return
+      }
+      window.location.href = claimURL
+    }
+  })
+
+  async function renderLanding () {
+    if (window.ethInitialized) {window.dom.find("verifyEthAddress").disabled = false}
     if (window.ethInitialized && window.nearInitialized) {
       window.dom.find("landingSubmit").disabled = false;
     } else {

src/html/sign-message-modal.html

@@ -0,0 +1,18 @@
+<div class="modal__container">
+  <nav class="modal__nav">
+    <button
+      type="button"
+      class="modal__nav__button--close"
+      data-behavior="closeModal"
+    >
+      <span class="visually-hidden">close</span>
+    </button>
+  </nav>
+  <div class="modal-image__container">
+    <img src="img/eth-wallet-sig.svg" alt="" class="modal__image" />
+  </div>
+  <h1 class="modal__heading">Complete Signature Request</h1>
+  <p class="modal__message">
+    Please complete the signature request in your Ethereum wallet to proceed.
+  </p>
+</div>