added send form

MetaMask · Nov 5, 2021 · 3ce3d59 · 3ce3d59
1 parent 8e771a1
commit 3ce3d59
Show file tree

Hide file tree

Showing 2 changed files with 145 additions and 0 deletions.
diff --git a/src/index.html b/src/index.html
@@ -513,6 +513,88 @@ <h4 class="card-title">
           </div>
         </div>
       </section>
+      <section>
+        <div class="row d-flex justify-content-center">
+          <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12">
+            <div class="card">
+              <div class="card-body">
+                <h4 class="card-title">
+                  Send form
+                </h4>
+                <div class="form-group">
+                  <label>From</label>
+                  <input
+                    class="form-control"
+                    type="text"
+                    id="fromInput"
+                  />
+                </div>
+                <div class="form-group">
+                  <label>To</label>
+                  <input
+                    class="form-control"
+                    type="text"
+                    id="toInput"
+                  />
+                </div>
+                <div class="form-group">
+                  <label>Amount</label>
+                  <input
+                    class="form-control"
+                    type="text"
+                    id="amountInput"
+                  />
+                </div>
+                <div class="form-group">
+                  <label>Type</label>
+                  <select class="browser-default custom-select" id="typeInput">
+                    <option value="0x0">0x0</option>
+                    <option value="0x2">0x2</option>
+                  </select>
+                </div>
+                <div class="form-group" id="gasPriceDiv">
+                  <label>Gas Price</label>
+                  <input
+                    class="form-control"
+                    type="text"
+                    id="gasInput"
+                  />
+                </div>
+                <div class="form-group" id="maxFeeDiv">
+                  <label>Max Fee</label>
+                  <input
+                    class="form-control"
+                    type="text"
+                    id="maxFeeInput"
+                  />
+                </div>
+                <div class="form-group" id="maxPriorityDiv">
+                  <label>Max Priority Fee</label>
+                  <input
+                    class="form-control"
+                    type="text"
+                    id="maxPriorityFeeInput"
+                  />
+                </div>
+                <div class="form-group">
+                  <label>Data</label>
+                  <input
+                    class="form-control"
+                    type="text"
+                    id="dataInput"
+                  />
+                </div>
+                <button
+                  class="btn btn-primary btn-lg btn-block mb-3"
+                  id="submitForm"
+                >
+                  Submit
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
     </main>
 
     <script src="bundle.js" defer></script>

diff --git a/src/index.js b/src/index.js
@@ -106,6 +106,20 @@ const signTypedDataV4VerifyResult = document.getElementById(
   'signTypedDataV4VerifyResult',
 );
 
+// Send form section
+const fromDiv = document.getElementById('fromInput');
+const toDiv = document.getElementById('toInput');
+const type = document.getElementById('typeInput');
+const amount = document.getElementById('amountInput');
+const gasPrice = document.getElementById('gasInput');
+const maxFee = document.getElementById('maxFeeInput');
+const maxPriority = document.getElementById('maxPriorityFeeInput');
+const data = document.getElementById('dataInput');
+const gasPriceDiv = document.getElementById('gasPriceDiv');
+const maxFeeDiv = document.getElementById('maxFeeDiv');
+const maxPriorityDiv = document.getElementById('maxPriorityDiv');
+const submitFormButton = document.getElementById('submitForm');
+
 // Miscellaneous
 const addEthereumChain = document.getElementById('addEthereumChain');
 const switchEthereumChain = document.getElementById('switchEthereumChain');
@@ -559,6 +573,51 @@ const initialize = async () => {
     };
   };
 
+  type.onchange = async () => {
+    if (type.value === '0x0') {
+      gasPriceDiv.style.display = 'block';
+      maxFeeDiv.style.display = 'none';
+      maxPriorityDiv.style.display = 'none';
+    } else {
+      gasPriceDiv.style.display = 'none';
+      maxFeeDiv.style.display = 'block';
+      maxPriorityDiv.style.display = 'block';
+    }
+  };
+
+  submitFormButton.onclick = async () => {
+    let params;
+    if (type.value === '0x0') {
+      params = [
+        {
+          from: accounts[0],
+          to: toDiv.value,
+          value: amount.value,
+          gasPrice: gasPrice.value,
+          type: type.value,
+          data: data.value,
+        },
+      ];
+    } else {
+      params = [
+        {
+          from: accounts[0],
+          to: toDiv.value,
+          value: amount.value,
+          maxFeePerGas: maxFee.value,
+          maxPriorityFeePerGas: maxPriority.value,
+          type: type.value,
+          data: data.value,
+        },
+      ];
+    }
+    const result = await ethereum.request({
+      method: 'eth_sendTransaction',
+      params,
+    });
+    console.log(result);
+  };
+
   /**
    * eth_sign
    */
@@ -980,6 +1039,10 @@ const initialize = async () => {
   function handleNewAccounts(newAccounts) {
     accounts = newAccounts;
     accountsDiv.innerHTML = accounts;
+    fromDiv.value = accounts;
+    gasPriceDiv.style.display = 'block';
+    maxFeeDiv.style.display = 'none';
+    maxPriorityDiv.style.display = 'none';
     if (isMetaMaskConnected()) {
       initializeAccountButtons();
     }