feat: add max amount transfer

aurora-is-near · May 6, 2021 · e7cdcf7 · e7cdcf7
1 parent 42a8621
commit e7cdcf7
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 28 deletions.
diff --git a/src/css/global.css b/src/css/global.css
@@ -253,6 +253,18 @@ button[disabled] {
   background: none;
   box-shadow: none;
 }
+button.maxAmount {
+  font-size: var(--fs-micro);
+  color: var(--blue-500);
+  background-color: var(--light-gray);
+  border: 1px solid var(--blue-500);
+  text-align: center;
+  height: 20px;
+  padding: 0 var(--spacing-xs);
+  line-height: 20px;
+  margin-bottom: var(--spacing-s);
+  margin-right: var(--spacing-s);
+}
 
 fieldset {
   border: none;

diff --git a/src/css/transfer-form.css b/src/css/transfer-form.css
@@ -89,7 +89,7 @@
   border-radius: 0.75em;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
   display: flex;
-  margin: var(--spacing-m) 0;
+  margin: var(--spacing-m) 0 var(--spacing-s) 0;
   align-items: stretch;
   height: 56px;
 }
@@ -138,6 +138,10 @@
   -webkit-appearance: none;
   margin: 0;
 }
+.maxAmountContainer {
+  display: flex;
+  justify-content: flex-end;
+}
 .transfer-form input {
   text-align: right;
 }

diff --git a/src/html/erc20-form.html b/src/html/erc20-form.html
@@ -25,11 +25,16 @@ <h2>New Transfer</h2>
           type="number"
         />
       </div>
+      <div class="maxAmountContainer">
+        <button class="maxAmount" type="button" data-behavior="useMaxErc20">
+          MAX
+        </button>
+      </div>
       <div class="account--origin__token-details" data-behavior="erc20Info">
         <label>Available to transfer</label>
         <span>
-          <span data-behavior="erc20Balance" c>999.234234</span>
-          <span data-behavior="erc20Name">DAI</span>
+          <span data-behavior="erc20Balance"></span>
+          <span data-behavior="erc20Name"></span>
         </span>
       </div>
       <div
@@ -137,6 +142,7 @@ <h1 class="modal__heading">Confirm Ethereum Transaction</h1>
 <script>
   window.addEventListener("load", function handleSelectErc20Events() {
     const amount = window.dom.find("erc20Amount");
+    const maxAmount = window.dom.find("useMaxErc20");
     const select = window.dom.find("erc20SelectButton");
     const submit = window.dom.find("erc20Submit");
     const cancel = document.getElementById("erc20Cancel");
@@ -158,24 +164,37 @@ <h1 class="modal__heading">Confirm Ethereum Transaction</h1>
     select.onclick = () => {
       window.urlParams.set({ erc20: '' })
       window.dom.find("erc20FreeForm").value = ''
-      window.dom.find("erc20FreeForm").classList.remove("error");
+      window.dom.find("erc20FreeForm").classList.remove("error")
       erc20Address = ''
-      window.dom.fill("erc20AddressError").with("");
-      window.dom.hide("erc20AddressError");
+      window.dom.fill("erc20AddressError").with("")
+      window.dom.hide("erc20AddressError")
       window.dom.show("erc20Modal")
+      window.dom.hide('erc20Info')
+      amount.value = ''
+      window.dom.find("erc20SelectButton").classList.remove("selected")
+      window.dom.fill("erc20SelectButton").with("Select ERC20")
     }
 
-    amount.onkeyup = function enableOrDisable(e) {
-      const balance = Number(window.dom.find("erc20Balance").innerHTML);
-      const allowance = Number(window.dom.find("erc20Allowance").innerHTML);
-      const val = e.target.value;
-      if (val && Number(val) <= balance && Number(val) > 0)
-        submit.disabled = false;
-      else submit.disabled = true;
-      if (Number(e.target.value) <= allowance)
-        submit.innerHTML = "Submit transfer";
-      else submit.innerHTML = "Approve transfer";
-    };
+    function enableOrDisableErc20() {
+      const decimalBalance = window.Decimal(window.dom.find("erc20Balance").innerHTML)
+      const decimalAllowance = window.Decimal(window.dom.find("erc20Allowance").innerHTML)
+      const decimalAmount = window.Decimal(amount.value)
+      if (decimalAmount.isZero() || decimalAmount.comparedTo(decimalBalance) === 1)
+        // decimalAmount is bigger than decimalBalance
+        submit.disabled = true
+      else submit.disabled = false
+      if (decimalAmount.comparedTo(decimalAllowance) === 1)
+        // decimalAmount is bigger than decimalAllowance
+        submit.innerHTML = "Approve transfer"
+      else submit.innerHTML = "Submit transfer"
+    }
+
+    maxAmount.onclick = () => {
+      amount.value = window.dom.find("erc20Balance").innerHTML;
+      enableOrDisableErc20()
+    }
+
+    amount.onkeyup = enableOrDisableErc20
 
     window.dom.find(
       "sendNaturalErc20Form"

diff --git a/src/html/erc20n-form.html b/src/html/erc20n-form.html
@@ -25,6 +25,11 @@ <h2>New Transfer</h2>
           type="number"
         />
       </div>
+      <div style="display: flex; justify-content: flex-end;">
+        <button class="maxAmount" type="button" data-behavior="useMaxErc20n">
+          MAX
+        </button>
+      </div>
       <div class="account--origin__token-details" data-behavior="erc20nInfo">
         <label>Available to transfer</label>
         <span>
@@ -141,6 +146,7 @@ <h1 class="modal__heading">Confirm NEAR Transaction</h1>
 <script>
   window.addEventListener("load", function sendBridgedNep141OnLoad() {
     const amount = window.dom.find("erc20nAmount");
+    const maxAmount = window.dom.find("useMaxErc20n");
     const select = window.dom.find("erc20nSelectButton");
     const submit = window.dom.find("erc20nSubmit");
     const confirmSubmit = window.dom.find("erc20nConfirmSubmit");
@@ -163,20 +169,30 @@ <h1 class="modal__heading">Confirm NEAR Transaction</h1>
     select.onclick = () => {
       window.urlParams.set({ erc20n: '' })
       window.dom.find('erc20nFreeForm').value = ''
-      window.dom.find("erc20nFreeForm").classList.remove("error");
+      window.dom.find("erc20nFreeForm").classList.remove("error")
       erc20nAddress = ''
-      window.dom.fill("erc20nAddressError").with("");
-      window.dom.hide("erc20nAddressError");
+      window.dom.fill("erc20nAddressError").with("")
+      window.dom.hide("erc20nAddressError")
       window.dom.show('erc20nModal')
+      window.dom.hide('erc20nInfo')
+      amount.value = ''
+      window.dom.find("erc20nSelectButton").classList.remove("selected")
+      window.dom.fill("erc20nSelectButton").with("Select token")
     }
 
-    amount.onkeyup = function enableOrDisableErc20n(e) {
-      const balance = Number(window.dom.find("erc20nBalance").innerHTML);
-      const val = e.target.value;
-      if (val && Number(val) <= balance && Number(val) > 0)
-        submit.disabled = false;
-      else submit.disabled = true;
-    };
+    function enableOrDisableErc20n() {
+      const decimalBalance = window.Decimal(window.dom.find("erc20nBalance").innerHTML)
+      const decimalAmount = window.Decimal(amount.value)
+      if (decimalAmount.isZero() || decimalAmount.comparedTo(decimalBalance) === 1)
+        submit.disabled = true
+      else submit.disabled = false
+    }
+    maxAmount.onclick = () => {
+      amount.value = window.dom.find("erc20nBalance").innerHTML
+      enableOrDisableErc20n()
+    }
+
+    amount.onkeyup = enableOrDisableErc20n
 
     window.dom.find(
       "sendBridgedNep141Form"
@@ -288,7 +304,7 @@ <h1 class="modal__heading">Confirm NEAR Transaction</h1>
       token = await window.utils.getErc20Data(erc20nAddress);
     } catch (e) {
       window.dom.find("erc20nSelectButton").classList.remove("selected");
-      window.dom.fill("erc20nSelectButton").with("Select ERC20");
+      window.dom.fill("erc20nSelectButton").with("Select token");
       window.dom.find("erc20nAmount").value = "";
       window.dom.find("erc20nAmount").disabled = true;
       const input = window.dom.find("erc20nFreeForm");