update value after failing tx and force it to be number

apps/remix-ide/src/app/tabs/runTab/settings.js

@@ -16,8 +16,8 @@ class SettingsUI {
     this._components = {}
 
     this.blockchain.event.register('transactionExecuted', (error, from, to, data, lookupOnly, txResult) => {
+      if (!lookupOnly) this.el.querySelector('#value').value = 0
       if (error) return
-      if (!lookupOnly) this.el.querySelector('#value').value = '0'
       this.updateAccountBalances()
     })
     this._components = {
@@ -53,6 +53,10 @@ class SettingsUI {
     })
   }
 
+  validateValue () {
+    if (this.el.querySelector('#value').value === '') this.el.querySelector('#value').value = 0
+  }
+
   render () {
     this.netUI = yo`<span class="${css.network} badge badge-secondary"></span>`
 
@@ -117,7 +121,15 @@ class SettingsUI {
       <div class="${css.crow}">
         <label class="${css.settingsLabel}">Value</label>
         <div class="${css.gasValueContainer}">
-          <input type="text" class="form-control ${css.gasNval} ${css.col2}" id="value" value="0" title="Enter the value and choose the unit">
+          <input
+            type="number"
+            min="0"
+            class="form-control ${css.gasNval} ${css.col2}"
+            id="value"
+            value="0"
+            title="Enter the value and choose the unit"
+            onchange=${() => this.validateValue()}
+          >
           <select name="unit" class="form-control p-1 ${css.gasNvalUnit} ${css.col2_2} custom-select" id="unit">
             <option data-unit="wei">wei</option>
             <option data-unit="gwei">gwei</option>