Gas Limit UI changes

apps/remix-ide/src/app/tabs/locales/en/udapp.json

@@ -3,6 +3,8 @@
 
   "udapp._comment_gasPrice.tsx": "libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx",
   "udapp.gasLimit": "Gas limit",
+  "udapp.gasLimitAuto": "Use Automatic Gas Estimation",
+  "udapp.gasLimitManual": "Limit the Gas to",
   "udapp.tooltipText4": "The default gas limit is 3M. Adjust as needed.",
 
   "udapp._comment_value.tsx": "libs/remix-ui/run-tab/src/lib/components/value.tsx",

libs/remix-ui/run-tab/src/lib/components/gasLimit.tsx

@@ -1,26 +1,29 @@
 // eslint-disable-next-line no-use-before-define
 import {CustomTooltip} from '@remix-ui/helper'
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import {FormattedMessage} from 'react-intl'
 import {GasPriceProps} from '../types'
 
 const defaultGasLimit = 3000000
 export function GasLimitUI(props: GasPriceProps) {
-  const auto = useRef(true)
   const inputComponent = useRef<HTMLInputElement>(null)
   const currentGasLimit = useRef(defaultGasLimit)
+  const [gasLimitAuto, setGasLimitAuto] = useState(true)
 
   useEffect(() => {
-    handleGasLimitAuto(true)
+    handleGasLimitAuto()
   }, [])
 
+  useEffect(() => {
+    handleGasLimitAuto()
+  }, [gasLimitAuto])
+
   const handleGasLimit = (e) => {
     props.setGasFee(e.target.value)
   }
 
-  const handleGasLimitAuto = (checked) => {
-    auto.current = checked
-    if (checked) {
+  const handleGasLimitAuto = () => {
+    if (gasLimitAuto) {
       currentGasLimit.current = parseInt(inputComponent.current.value)
       props.setGasFee(0)
     } else {
@@ -33,12 +36,47 @@ export function GasLimitUI(props: GasPriceProps) {
       <label className="udapp_settingsLabel">
         <FormattedMessage id="udapp.gasLimit" />
       </label>
-      <div className='custom-control custom-checkbox udapp_col2 udapp_gasNval'>
-        <input type="checkbox" className="" id="gasLimitAuto" checked={auto.current} onChange={(e) => { handleGasLimitAuto(e.target.checked) } } />
-        <CustomTooltip placement={'right'} tooltipClasses="text-nowrap" tooltipId="remixGasPriceTooltip" tooltipText={<FormattedMessage id="udapp.tooltipText4" />}>
-          <input type="number" ref={inputComponent} disabled={auto.current} className="form-control" id="gasLimit" value={props.gasLimit === 0 ? currentGasLimit.current : props.gasLimit} onChange={handleGasLimit} />        
-        </CustomTooltip>        
-      </div>      
-    </div>
+      <div className='pl-0 custom-control custom-checkbox udapp_col2 udapp_gasNval'>
+        <div className="d-flex pb-1 custom-control custom-radio">
+          <input
+            className="custom-control-input"
+            type="radio"
+            name="gasLimitRadio"
+            value="auto"
+            onChange={() => setGasLimitAuto(!gasLimitAuto)}
+            checked={gasLimitAuto}
+            id="glAutoConfig"
+          />
+          <label className="form-check-label custom-control-label" htmlFor="glAutoConfig" data-id="glAutoConfiguration">
+            <FormattedMessage id="udapp.gasLimitAuto" />
+          </label>
+        </div>
+        <div className="d-flex pb-1 custom-control custom-radio">
+          <input
+            className="custom-control-input"
+            type="radio"
+            name="gasLimitRadio"
+            value="manual"
+            onChange={() => setGasLimitAuto(!gasLimitAuto)}
+            checked={!gasLimitAuto}
+            id="glManualConfig"
+          />
+          <label className="mb-1 w-100 form-check-label custom-control-label" htmlFor="glManualConfig" data-id="glManualConfiguration">
+            <FormattedMessage id="udapp.gasLimitManual" />
+            <CustomTooltip placement={'right'} tooltipClasses="text-nowrap" tooltipId="remixGasPriceTooltip" tooltipText={<FormattedMessage id="udapp.tooltipText4" />}>
+              <input
+                type="number"
+                ref={inputComponent}
+                disabled={gasLimitAuto}
+                className="mt-2 form-control"
+                id="gasLimit"
+                value={props.gasLimit === 0 ? currentGasLimit.current : props.gasLimit}
+                onChange={handleGasLimit}
+              />        
+            </CustomTooltip>
+          </label>
+        </div>
+      </div>
+    </div>      
   )
 }

libs/remix-ui/run-tab/src/lib/css/run-tab.css

@@ -212,7 +212,6 @@
   display: flex;
 }
 .udapp_gasNval {
-  width: 55%;
   font-size: 0.8rem;
 }
 .udapp_gasNvalUnit {