Merge pull request #14837 from MetaMask/prop-type-fixups

Prop type fixups

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

@@ -124,12 +124,12 @@ AdvancedGasControls.propTypes = {
   gasEstimateType: PropTypes.oneOf(Object.values(GAS_ESTIMATE_TYPES)),
   setMaxPriorityFee: PropTypes.func,
   setMaxFee: PropTypes.func,
-  maxPriorityFee: PropTypes.number,
-  maxFee: PropTypes.number,
+  maxPriorityFee: PropTypes.string,
+  maxFee: PropTypes.string,
   onManualChange: PropTypes.func,
   gasLimit: PropTypes.number,
   setGasLimit: PropTypes.func,
-  gasPrice: PropTypes.number,
+  gasPrice: PropTypes.string,
   setGasPrice: PropTypes.func,
   maxPriorityFeeFiat: PropTypes.string,
   maxFeeFiat: PropTypes.string,

ui/components/app/edit-gas-display/edit-gas-display.component.js

@@ -217,8 +217,8 @@ export default function EditGasDisplay({
             hasGasErrors === false &&
             supportsEIP1559 && (
               <GasTiming
-                maxFeePerGas={maxFeePerGas}
-                maxPriorityFeePerGas={maxPriorityFeePerGas}
+                maxFeePerGas={maxFeePerGas.toString()}
+                maxPriorityFeePerGas={maxPriorityFeePerGas.toString()}
                 gasWarnings={gasWarnings}
               />
             )

ui/components/app/gas-details-item/gas-details-item.js

@@ -90,8 +90,8 @@ const GasDetailsItem = ({ userAcknowledgedGasMissing = false }) => {
       }
       subTitle={
         <GasTiming
-          maxPriorityFeePerGas={maxPriorityFeePerGas}
-          maxFeePerGas={maxFeePerGas}
+          maxPriorityFeePerGas={maxPriorityFeePerGas.toString()}
+          maxFeePerGas={maxFeePerGas.toString()}
         />
       }
     />

ui/components/app/modals/nickname-popovers/nickname-popovers.component.js

@@ -43,7 +43,7 @@ const NicknamePopovers = ({ address, onClose }) => {
       <UpdateNicknamePopover
         address={address}
         nickname={recipientNickname || null}
-        memo={addressBookEntryObject?.memo}
+        memo={addressBookEntryObject?.memo || null}
         onClose={() => setPopoverToDisplay(SHOW_NICKNAME_POPOVER)}
         onAdd={(recipient, nickname, memo) =>
           dispatch(addToAddressBook(recipient, nickname, memo))

ui/components/app/transaction-decoding/transaction-decoding.component.js

@@ -185,7 +185,7 @@ export default function TransactionDecoding({ to = '', inputData: data = '' }) {
         </details>
       </li>
     ) : (
-      <li className="solidity-value">
+      <li className="solidity-value" key={`solidity-value-${index}`}>
         <div className="solidity-named-item solidity-item">
           {typeClass !== 'array' && !Array.isArray(value) ? (
             <span className="param-name typography--color-black">{name}: </span>
@@ -239,6 +239,6 @@ export default function TransactionDecoding({ to = '', inputData: data = '' }) {
 }
 
 TransactionDecoding.propTypes = {
-  to: PropTypes.string.isRequired,
+  to: PropTypes.string,
   inputData: PropTypes.string.isRequired,
 };

ui/components/ui/update-nickname-popover/update-nickname-popover.js

@@ -12,16 +12,18 @@ import Identicon from '../identicon/identicon.component';
 import { getUseTokenDetection, getTokenList } from '../../../selectors';
 
 export default function UpdateNicknamePopover({
-  nickname,
   address,
+  nickname = '',
+  memo = '',
   onAdd,
-  memo,
   onClose,
 }) {
   const t = useContext(I18nContext);
 
-  const [nicknameInput, setNicknameInput] = useState(nickname);
-  const [memoInput, setMemoInput] = useState(memo);
+  const [nicknameInput, setNicknameInput] = useState(
+    nickname === null ? '' : nickname,
+  );
+  const [memoInput, setMemoInput] = useState(memo === null ? '' : memo);
 
   const handleNicknameChange = (event) => {
     setNicknameInput(event.target.value);

ui/css/base-styles.scss

@@ -124,4 +124,3 @@ input.form-control {
 * {
   font-family: $font-family;
 }
-

ui/pages/asset/components/asset-options.js

@@ -85,14 +85,39 @@ const AssetOptions = ({
   );
 };
 
+const isNotFunc = (p) => {
+  return typeof p !== 'function';
+};
+
 AssetOptions.propTypes = {
   isEthNetwork: PropTypes.bool,
   isNativeAsset: PropTypes.bool,
-  onRemove: PropTypes.func.isRequired,
   onClickBlockExplorer: PropTypes.func.isRequired,
   onViewAccountDetails: PropTypes.func.isRequired,
-  onViewTokenDetails: PropTypes.func.isRequired,
-  tokenSymbol: PropTypes.string,
+  onRemove: (props) => {
+    if (props.isNativeAsset === false && isNotFunc(props.onRemove)) {
+      throw new Error(
+        'When isNativeAsset is true, onRemove is a required prop',
+      );
+    }
+  },
+  onViewTokenDetails: (props) => {
+    if (props.isNativeAsset === false && isNotFunc(props.onViewTokenDetails)) {
+      throw new Error(
+        'When isNativeAsset is true, onViewTokenDetails is a required prop',
+      );
+    }
+  },
+  tokenSymbol: (props) => {
+    if (
+      props.isNativeAsset === false &&
+      typeof props.tokenSymbol !== 'string'
+    ) {
+      throw new Error(
+        'When isNativeAsset is true, tokenSymbol is a required prop',
+      );
+    }
+  },
 };
 
 export default AssetOptions;

ui/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -417,7 +417,7 @@ export default class ConfirmTransactionBase extends Component {
           <div className="custom-nonce-input">
             <TextField
               type="number"
-              min="0"
+              min={0}
               placeholder={
                 typeof nextNonce === 'number' ? nextNonce.toString() : null
               }
@@ -546,10 +546,10 @@ export default class ConfirmTransactionBase extends Component {
                   maxPriorityFeePerGas={hexWEIToDecGWEI(
                     maxPriorityFeePerGas ||
                       txData.txParams.maxPriorityFeePerGas,
-                  )}
+                  ).toString()}
                   maxFeePerGas={hexWEIToDecGWEI(
                     maxFeePerGas || txData.txParams.maxFeePerGas,
-                  )}
+                  ).toString()}
                 />
               )}
             </>

ui/pages/home/home.component.js

@@ -123,7 +123,16 @@ export default class Home extends PureComponent {
     showRecoveryPhraseReminder: PropTypes.bool.isRequired,
     setRecoveryPhraseReminderHasBeenShown: PropTypes.func.isRequired,
     setRecoveryPhraseReminderLastShown: PropTypes.func.isRequired,
-    seedPhraseBackedUp: PropTypes.bool.isRequired,
+    seedPhraseBackedUp: (props) => {
+      if (
+        props.seedPhraseBackedUp !== null &&
+        typeof props.seedPhraseBackedUp !== 'boolean'
+      ) {
+        throw new Error(
+          `seedPhraseBackedUp is required to be null or boolean. Received ${props.seedPhraseBackedUp}`,
+        );
+      }
+    },
     newNetworkAdded: PropTypes.string,
     setNewNetworkAdded: PropTypes.func.isRequired,
     // This prop is used in the `shouldCloseNotificationPopup` function

ui/pages/settings/settings.component.js

@@ -342,7 +342,10 @@ class SettingsPage extends PureComponent {
           path={ADD_NETWORK_ROUTE}
           render={() => <NetworksTab addNewNetwork />}
         />
-        <Route path={NETWORKS_ROUTE} component={NetworksTab} />
+        <Route
+          path={NETWORKS_ROUTE}
+          render={() => <NetworksTab addNewNetwork={false} />}
+        />
         <Route exact path={SECURITY_ROUTE} component={SecurityTab} />
         <Route exact path={EXPERIMENTAL_ROUTE} component={ExperimentalTab} />
         <Route exact path={CONTACT_LIST_ROUTE} component={ContactListTab} />