m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

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

Browse Source 
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>
This commit is contained in:
amerkadicE 2022-08-17 19:13:03 +02:00 committed by GitHub
parent d09bdbe3df
commit f074c243d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
ui/pages/settings/networks-tab/networks-form/networks-form.js
View File

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