EIP-1559 - Allow decimals for maxFeePerGas and maxPriorityFeePerGas (#11664)

ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js

@@ -71,6 +71,7 @@ export default function AdvancedGasControls({
         onChange={setGasLimit}
         tooltipText={t('editGasLimitTooltip')}
         value={gasLimit}
+        allowDecimals={false}
         numeric
         autoFocus
       />

ui/components/ui/form-field/form-field.js

@@ -27,6 +27,7 @@ export default function FormField({
   detailText,
   autoFocus,
   password,
+  allowDecimals,
 }) {
   return (
     <div
@@ -79,6 +80,7 @@ export default function FormField({
             value={value}
             detailText={detailText}
             autoFocus={autoFocus}
+            allowDecimals={allowDecimals}
           />
         ) : (
           <input
@@ -117,6 +119,7 @@ FormField.propTypes = {
   autoFocus: PropTypes.bool,
   numeric: PropTypes.bool,
   password: PropTypes.bool,
+  allowDecimals: PropTypes.bool,
 };
 
 FormField.defaultProps = {
@@ -131,4 +134,5 @@ FormField.defaultProps = {
   autoFocus: false,
   numeric: false,
   password: false,
+  allowDecimals: true,
 };

ui/components/ui/numeric-input/numeric-input.component.js

@@ -5,11 +5,12 @@ import Typography from '../typography/typography';
 import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
 
 export default function NumericInput({
-  detailText,
-  value,
+  detailText = '',
+  value = 0,
   onChange,
-  error,
-  autoFocus,
+  error = '',
+  autoFocus = false,
+  allowDecimals = true,
 }) {
   return (
     <div
@@ -18,7 +19,14 @@ export default function NumericInput({
       <input
         type="number"
         value={value}
-        onChange={(e) => onChange?.(parseInt(e.target.value, 10))}
+        onKeyDown={(e) => {
+          if (!allowDecimals && e.key === '.') {
+            e.preventDefault();
+          }
+        }}
+        onChange={(e) => {
+          onChange?.(parseFloat(e.target.value, 10));
+        }}
         min="0"
         autoFocus={autoFocus}
       />
@@ -37,12 +45,5 @@ NumericInput.propTypes = {
   onChange: PropTypes.func,
   error: PropTypes.string,
   autoFocus: PropTypes.bool,
-};
-
-NumericInput.defaultProps = {
-  value: 0,
-  detailText: '',
-  onChange: undefined,
-  error: '',
-  autoFocus: false,
+  allowDecimals: PropTypes.bool,
 };