feat: add get allowance support for ERC20 tokens (#312)

* feat: add get allowance support * small tweak with decimals * fix extra space and order items
MetaMask · Apr 8, 2024 · 0257786 · 0257786
1 parent 3169ae9
commit 0257786
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 1 deletion.
diff --git a/src/index.html b/src/index.html
@@ -354,7 +354,7 @@ <h4 class="card-title">
                 >
                   Transfer Tokens
                 </button>
-
+                <hr />
                 <div class="form-group">
                   <label>Approve to Address</label>
                   <input
@@ -380,6 +380,33 @@ <h4 class="card-title">
                   Increase Token Allowance
                 </button>
 
+                <hr />
+                <div class="form-group">
+                  <label>Owner Address</label>
+                  <input
+                    class="form-control"
+                    id="allowanceOwner"
+                  />
+                </div>
+
+                <div class="form-group">
+                  <label>Spender Address</label>
+                  <input
+                    class="form-control"
+                    id="allowanceSpender"
+                  />
+                </div>
+                <button
+                  class="btn btn-primary btn-lg btn-block mb-3"
+                  id="getAllowance"
+                  disabled
+                >
+                  Get Allowance
+                </button>
+                <p class="info-text alert alert-secondary">
+                  Allowance amount: <span id="allowanceAmountResult"></span>
+                </p>
+                <hr />
                 <div class="form-group">
                   <label>Transfer From</label>
                   <input
@@ -402,6 +429,7 @@ <h4 class="card-title">
                 >
                   Transfer From Tokens
                 </button>
+                <hr />
                 <button
                   class="btn btn-primary btn-lg btn-block mb-3"
                   id="transferTokensWithoutGas"

diff --git a/src/index.js b/src/index.js
@@ -167,6 +167,10 @@ const approveTokens = document.getElementById('approveTokens');
 const increaseTokenAllowance = document.getElementById(
   'increaseTokenAllowance',
 );
+const allowanceOwnerInput = document.getElementById('allowanceOwner');
+const allowanceSpenderInput = document.getElementById('allowanceSpender');
+const allowanceAmountResult = document.getElementById('allowanceAmountResult');
+const getAllowance = document.getElementById('getAllowance');
 const transferTokensWithoutGas = document.getElementById(
   'transferTokensWithoutGas',
 );
@@ -345,6 +349,10 @@ const allConnectedButtons = [
   transferFromTokens,
   approveTokens,
   increaseTokenAllowance,
+  allowanceOwnerInput,
+  allowanceSpenderInput,
+  allowanceAmountResult,
+  getAllowance,
   transferFromRecipientInput,
   transferFromSenderInput,
   transferTokensWithoutGas,
@@ -1068,6 +1076,10 @@ const updateContractElements = () => {
     transferFromTokens.disabled = false;
     approveTokens.disabled = false;
     increaseTokenAllowance.disabled = false;
+    allowanceOwnerInput.disabled = false;
+    allowanceSpenderInput.disabled = false;
+    allowanceAmountResult.disabled = false;
+    getAllowance.disabled = false;
     transferTokensWithoutGas.disabled = false;
     approveTokensWithoutGas.disabled = false;
     transferFromSenderInput.disabled = false;
@@ -1748,6 +1760,10 @@ const initializeFormElements = () => {
     transferFromTokens.disabled = false;
     approveTokens.disabled = false;
     increaseTokenAllowance.disabled = false;
+    allowanceOwnerInput.disabled = false;
+    allowanceSpenderInput.disabled = false;
+    allowanceAmountResult.disabled = false;
+    getAllowance.disabled = false;
     transferTokensWithoutGas.disabled = false;
     approveTokensWithoutGas.disabled = false;
     approveTokensToInput.disabled = false;
@@ -1807,6 +1823,18 @@ const initializeFormElements = () => {
     console.log('result', result);
   };
 
+  getAllowance.onclick = async () => {
+    const result = await hstContract.allowance(
+      allowanceOwnerInput.value,
+      allowanceSpenderInput.value,
+      { from: accounts[0] },
+    );
+    const allowance = result.toNumber() / 10 ** decimalUnitsInput.value;
+    allowanceAmountResult.innerHTML = allowance.toFixed(
+      decimalUnitsInput.value,
+    );
+  };
+
   transferFromTokens.onclick = async () => {
     try {
       const result = await hstContract.transferFrom(