Fix incorrect warnings when adding a chain from a dapp (#22309)

When a user adds a chain from a dapp, they will see warnings that the
currency symbol is incorrect, even though it is correct.

Part of the problem was that the `pendingConfirmation` variable inside
of `fetchSafeChainsList` was undefined when it should not be. I guess it
closed over the original value or something like that? I didn't verify.
This PR corrects it by explictly passing the updated
`pendingConfirmations` variable to `fetchSafeChainList`

The other problem was that `useAlertState` was calling
`getTemplateAlerts` twice, without resetting the alert state. On the
first call, alerts were being set in state because the request to
chainId.network had not yet resolved. This PR fixes it by ensuring that
that `useAlertState` does not call `getTemplateAlerts` before the fetch
to chainId.network has resolved (when this confrimation type is an add
ethereum chain approval)

An example of the problem can be seen by going to
https://chainlist.org/?search=cro and adding Cronos Mainnet to metamask,
only to see warnings that the currency symbol is incorrect even though
it is correct.

![Screenshot from 2023-12-15
18-26-51](https://github.com/MetaMask/metamask-extension/assets/7499938/80e299d4-1545-4a38-981f-8b1eafc0b3dc)

1. Go to https://chainlist.org/?search=cro
2. Add Cronos mainnet to metamask
3. The confirmation window should open with an add ethereum chain
confirmation. There should be no warnings
4. Reject the confirmation
5. Open the dev console and paste the below code, and press enter. The
confirmation window should open with an add ethereum chain confirmation.
There should be warnings about the currency symbol
6. Reject the confirmation
7. Modify the below code so that `"symbol": "cra",` becomes `"symbol":
"cro",`, paste it in the dev console and press enter. There should be no
warnings in the new confirmation window

```
await window.ethereum.request({
  "method": "wallet_addEthereumChain",
  "params": [
    {
      "blockExplorerUrls": [
        "https://blockscout.com/poa/xdai/"
      ],
      "nativeCurrency": {
        "name": "CRO",
        "symbol": "cra",
        "decimals": 18
      },
      "rpcUrls": [
        "https://evm.cronos.org",
        null
      ],
      "chainId": "0x19",
      "chainName": "Cronos Mainnet"
    }
  ]
});
```

https://github.com/MetaMask/metamask-extension/assets/7499938/d6f738be-8e4a-4618-8703-c2d94df9c8a7

https://github.com/MetaMask/metamask-extension/assets/7499938/c3ab5cf6-ac73-4ad3-b7b3-fd49910c0311

<!-- [screenshots/recordings] -->

- [ ] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've clearly explained what problem this PR is solving and how it
is solved.
- [ ] I've linked related issues
- [ ] I've included manual testing steps
- [ ] I've included screenshots/recordings if applicable
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [ ] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: Pedro Figueiredo <[email protected]>

CHANGELOG.md

@@ -13,6 +13,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 - Fixed QR scan functionality when sending a transaction to another contact [#22297](https://github.com/MetaMask/metamask-extension/pull/22297)
+- Fixed incorrect warnings when adding a chain from a dapp [#22309](https://github.com/MetaMask/metamask-extension/pull/22309)
+
 ## [11.7.0]
 ### Added
 - Added auto-suggestion for ticker symbols in the network form ([#21843](https://github.com/MetaMask/metamask-extension/pull/21843))

ui/pages/confirmation/confirmation.js

@@ -101,6 +101,7 @@ const alertStateReducer = produce((state, action) => {
  * @param state.useSafeChainsListValidation
  * @param state.matchedChain
  * @param state.providerError
+ * @param state.preventAlertsForAddChainValidation
  * @returns {[alertState: object, dismissAlert: Function]} A tuple with
  * the current alert state and function to dismiss an alert by id
  */
@@ -111,6 +112,7 @@ function useAlertState(
     useSafeChainsListValidation,
     matchedChain,
     providerError,
+    preventAlertsForAddChainValidation = false,
   } = {},
 ) {
   const [alertState, dispatch] = useReducer(alertStateReducer, {});
@@ -125,7 +127,7 @@ function useAlertState(
    */
   useEffect(() => {
     let isMounted = true;
-    if (pendingConfirmation) {
+    if (pendingConfirmation && !preventAlertsForAddChainValidation) {
       getTemplateAlerts(pendingConfirmation, {
         unapprovedTxsCount,
         useSafeChainsListValidation,
@@ -150,6 +152,7 @@ function useAlertState(
     useSafeChainsListValidation,
     matchedChain,
     providerError,
+    preventAlertsForAddChainValidation,
   ]);
 
   const dismissAlert = useCallback(
@@ -209,13 +212,18 @@ export default function ConfirmationPage({
     useState(0);
   const pendingConfirmation = pendingConfirmations[currentPendingConfirmation];
   const [matchedChain, setMatchedChain] = useState({});
+  const [chainFetchComplete, setChainFetchComplete] = useState(false);
+  const preventAlertsForAddChainValidation =
+    pendingConfirmation?.type === ApprovalType.AddEthereumChain &&
+    !chainFetchComplete;
   const [currencySymbolWarning, setCurrencySymbolWarning] = useState(null);
   const [providerError, setProviderError] = useState(null);
   const [alertState, dismissAlert] = useAlertState(pendingConfirmation, {
     unapprovedTxsCount,
     useSafeChainsListValidation,
     matchedChain,
     providerError,
+    preventAlertsForAddChainValidation,
   });
   const [templateState] = useTemplateState(pendingConfirmation);
   const [showWarningModal, setShowWarningModal] = useState(false);
@@ -327,7 +335,7 @@ export default function ConfirmationPage({
   }, [approvalFlows]);
 
   useEffect(() => {
-    async function fetchSafeChainsList() {
+    async function fetchSafeChainsList(_pendingConfirmation) {
       try {
         if (useSafeChainsListValidation) {
           const response = await fetchWithCache({
@@ -339,13 +347,14 @@ export default function ConfirmationPage({
           const _matchedChain = safeChainsList.find(
             (chain) =>
               chain.chainId ===
-              parseInt(pendingConfirmation.requestData.chainId, 16),
+              parseInt(_pendingConfirmation.requestData.chainId, 16),
           );
           setMatchedChain(_matchedChain);
+          setChainFetchComplete(true);
           setProviderError(null);
           if (
             _matchedChain?.nativeCurrency?.symbol?.toLowerCase() ===
-            pendingConfirmation.requestData.ticker?.toLowerCase()
+            _pendingConfirmation.requestData.ticker?.toLowerCase()
           ) {
             setCurrencySymbolWarning(null);
           } else {
@@ -361,13 +370,19 @@ export default function ConfirmationPage({
         setProviderError(error);
         setMatchedChain(null);
         setCurrencySymbolWarning(null);
+        setChainFetchComplete(true);
         // Swallow the error here to not block the user from adding a custom network
       }
     }
     if (pendingConfirmation?.type === ApprovalType.AddEthereumChain) {
-      fetchSafeChainsList();
+      fetchSafeChainsList(pendingConfirmation);
     }
-  }, [pendingConfirmation, t, useSafeChainsListValidation]);
+  }, [
+    pendingConfirmation,
+    t,
+    useSafeChainsListValidation,
+    setChainFetchComplete,
+  ]);
 
   if (!pendingConfirmation) {
     if (approvalFlows.length > 0) {