fix: Prevent BadgeStatus' tooltip from rerendering (#30874)

## **Description**

The Tooltip in this component re-renders for two reasons:

1.  The `{ display: 'flex' }` is a new object
2. The child contents of the tooltip are different despite the objects
looking the same

By memoizing the child element, the Tooltip doesn't frequently re-render

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/30874?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

1. Checkout `main` branch
2. Start the extension with `ENABLE_WHY_DID_YOU_RENDER` enabled
3. Open the account list menu
4. See loads of re-renders of tooltips in the BadgeStatus component
5. Checkout this branch
6. Start the extension with `ENABLE_WHY_DID_YOU_RENDER` enabled
7. Open the account list menu
8. Don't see all of the re-renders

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

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

### **After**

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

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] 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/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] 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.

ui/components/multichain/badge-status/badge-status.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 import {
@@ -22,6 +22,8 @@ import Tooltip from '../../ui/tooltip';
 
 import { BadgeStatusProps } from './badge-status.types';
 
+const TooltipStyle = { display: 'flex' };
+
 export const BadgeStatus: React.FC<BadgeStatusProps> = ({
   className = '',
   badgeBackgroundColor = BackgroundColor.backgroundAlternative,
@@ -33,6 +35,52 @@ export const BadgeStatus: React.FC<BadgeStatusProps> = ({
 }): JSX.Element => {
   const useBlockie = useSelector(getUseBlockie);
 
+  const tooltipContents = useMemo(() => {
+    return (
+      <BadgeWrapper
+        positionObj={
+          isConnectedAndNotActive
+            ? { bottom: 2, right: 5 }
+            : { bottom: -1, right: 2 }
+        }
+        badge={
+          <Box
+            className={classNames('multichain-badge-status__badge', {
+              'multichain-badge-status__badge-not-connected':
+                isConnectedAndNotActive,
+            })}
+            backgroundColor={badgeBackgroundColor}
+            borderRadius={BorderRadius.full}
+            borderColor={badgeBorderColor}
+            borderWidth={2}
+          />
+        }
+      >
+        {
+          ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
+          <AvatarAccount
+            borderColor={BorderColor.transparent}
+            size={AvatarAccountSize.Md}
+            address={address}
+            variant={
+              useBlockie
+                ? AvatarAccountVariant.Blockies
+                : AvatarAccountVariant.Jazzicon
+            }
+            marginInlineEnd={2}
+          />
+          ///: END:ONLY_INCLUDE_IF
+        }
+      </BadgeWrapper>
+    );
+  }, [
+    address,
+    badgeBackgroundColor,
+    badgeBorderColor,
+    isConnectedAndNotActive,
+    useBlockie,
+  ]);
+
   return (
     <Box
       className={classNames('multichain-badge-status', className)}
@@ -45,46 +93,12 @@ export const BadgeStatus: React.FC<BadgeStatusProps> = ({
       {...(props as BoxProps<'div'>)}
     >
       <Tooltip
-        style={{ display: 'flex' }}
+        style={TooltipStyle}
         title={text}
         data-testid="multichain-badge-status__tooltip"
         position="bottom"
       >
-        <BadgeWrapper
-          positionObj={
-            isConnectedAndNotActive
-              ? { bottom: 2, right: 5 }
-              : { bottom: -1, right: 2 }
-          }
-          badge={
-            <Box
-              className={classNames('multichain-badge-status__badge', {
-                'multichain-badge-status__badge-not-connected':
-                  isConnectedAndNotActive,
-              })}
-              backgroundColor={badgeBackgroundColor}
-              borderRadius={BorderRadius.full}
-              borderColor={badgeBorderColor}
-              borderWidth={2}
-            />
-          }
-        >
-          {
-            ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
-            <AvatarAccount
-              borderColor={BorderColor.transparent}
-              size={AvatarAccountSize.Md}
-              address={address}
-              variant={
-                useBlockie
-                  ? AvatarAccountVariant.Blockies
-                  : AvatarAccountVariant.Jazzicon
-              }
-              marginInlineEnd={2}
-            />
-            ///: END:ONLY_INCLUDE_IF
-          }
-        </BadgeWrapper>
+        {tooltipContents}
       </Tooltip>
     </Box>
   );