From 15cbe4e9a0c4a98b73ad771eef44fca38f58cfd9 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 29 Jul 2021 10:59:14 -0500
Subject: [PATCH] EIP-1559 - Allow decimals for maxFeePerGas and
 maxPriorityFeePerGas (#11664)

---
 .../advanced-gas-controls.component.js        |  1 +
 ui/components/ui/form-field/form-field.js     |  4 +++
 .../numeric-input/numeric-input.component.js  | 27 ++++++++++---------
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js b/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
index ba0679dee..23f2e77cb 100644
--- a/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
+++ b/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
       />
diff --git a/ui/components/ui/form-field/form-field.js b/ui/components/ui/form-field/form-field.js
index 5a4f97ab2..9152937a6 100644
--- a/ui/components/ui/form-field/form-field.js
+++ b/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,
 };
diff --git a/ui/components/ui/numeric-input/numeric-input.component.js b/ui/components/ui/numeric-input/numeric-input.component.js
index efc3ca44e..cc8e024bf 100644
--- a/ui/components/ui/numeric-input/numeric-input.component.js
+++ b/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,
 };