Fix for randomly resets of updated values in network edit form (#14370)

Code refactor

Fix test

Fix warning jank

Rerunning e2e tests

Co-authored-by: Alex Donesky <adonesky@gmail.com>
Co-authored-by: Ariella Vu <20778143+digiwand@users.noreply.github.com>

ui/pages/settings/networks-tab/networks-form/networks-form.js

@@ -12,6 +12,7 @@ import validUrl from 'valid-url';
 import log from 'loglevel';
 import classnames from 'classnames';
 import { addHexPrefix } from 'ethereumjs-util';
+import { isEqual } from 'lodash';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import {
   isPrefixedFormattedHexString,
@@ -104,6 +105,8 @@ const NetworksForm = ({
   const chainIdMatchesFeaturedRPC = FEATURED_RPCS.some(
     (featuredRpc) => Number(featuredRpc.chainId) === Number(chainId),
   );
+  const [isEditing, setIsEditing] = useState(Boolean(addNewNetwork));
+  const [previousNetwork, setPreviousNetwork] = useState(selectedNetwork);
 
   const resetForm = useCallback(() => {
     setNetworkName(selectedNetworkName || '');
@@ -114,6 +117,8 @@ const NetworksForm = ({
     setErrors({});
     setWarnings({});
     setIsSubmitting(false);
+    setIsEditing(false);
+    setPreviousNetwork(selectedNetwork);
   }, [selectedNetwork, selectedNetworkName]);
 
   const stateIsUnchanged = () => {
@@ -149,11 +154,12 @@ const NetworksForm = ({
       setErrors({});
       setIsSubmitting(false);
     } else if (
-      prevNetworkName.current !== selectedNetworkName ||
-      prevRpcUrl.current !== selectedNetwork.rpcUrl ||
-      prevChainId.current !== selectedNetwork.chainId ||
-      prevTicker.current !== selectedNetwork.ticker ||
-      prevBlockExplorerUrl.current !== selectedNetwork.blockExplorerUrl
+      (prevNetworkName.current !== selectedNetworkName ||
+        prevRpcUrl.current !== selectedNetwork.rpcUrl ||
+        prevChainId.current !== selectedNetwork.chainId ||
+        prevTicker.current !== selectedNetwork.ticker ||
+        prevBlockExplorerUrl.current !== selectedNetwork.blockExplorerUrl) &&
+      (!isEditing || !isEqual(selectedNetwork, previousNetwork))
     ) {
       resetForm(selectedNetwork);
     }
@@ -161,14 +167,9 @@ const NetworksForm = ({
     selectedNetwork,
     selectedNetworkName,
     addNewNetwork,
-    setNetworkName,
-    setRpcUrl,
-    setChainId,
-    setTicker,
-    setBlockExplorerUrl,
-    setErrors,
-    setIsSubmitting,
+    previousNetwork,
     resetForm,
+    isEditing,
   ]);
 
   useEffect(() => {
@@ -607,14 +608,20 @@ const NetworksForm = ({
         <FormField
           autoFocus
           error={errors.networkName?.msg || ''}
-          onChange={setNetworkName}
+          onChange={(value) => {
+            setIsEditing(true);
+            setNetworkName(value);
+          }}
           titleText={t('networkName')}
           value={networkName}
           disabled={viewOnly}
         />
         <FormField
           error={errors.rpcUrl?.msg || ''}
-          onChange={setRpcUrl}
+          onChange={(value) => {
+            setIsEditing(true);
+            setRpcUrl(value);
+          }}
           titleText={t('rpcUrl')}
           value={
             rpcUrl?.includes(`/v3/${infuraProjectId}`)
@@ -625,7 +632,10 @@ const NetworksForm = ({
         />
         <FormField
           warning={warnings.chainId?.msg || ''}
-          onChange={setChainId}
+          onChange={(value) => {
+            setIsEditing(true);
+            setChainId(value);
+          }}
           titleText={t('chainId')}
           value={chainId}
           disabled={viewOnly}
@@ -633,14 +643,20 @@ const NetworksForm = ({
         />
         <FormField
           warning={warnings.ticker?.msg || ''}
-          onChange={setTicker}
+          onChange={(value) => {
+            setIsEditing(true);
+            setTicker(value);
+          }}
           titleText={t('currencySymbol')}
           value={ticker}
           disabled={viewOnly}
         />
         <FormField
           error={errors.blockExplorerUrl?.msg || ''}
-          onChange={setBlockExplorerUrl}
+          onChange={(value) => {
+            setIsEditing(true);
+            setBlockExplorerUrl(value);
+          }}
           titleText={t('blockExplorerUrl')}
           titleUnit={t('optionalWithParanthesis')}
           value={blockExplorerUrl}