From 4a01a06dfae1eae49e2c938fd4c648d5e1536a11 Mon Sep 17 00:00:00 2001
From: salimtb <salim.toubal@outlook.com>
Date: Fri, 14 Jun 2024 11:47:35 +0200
Subject: [PATCH] feat: add tooltip

---
 app/_locales/en/messages.json                 |  7 +++
 .../network-list-menu/network-list-menu.js    |  9 ++++
 .../popular-network-list.tsx                  | 48 ++++++++++++++++++-
 3 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 2363bc51dc2d..91ca1c87b97f 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -1629,6 +1629,9 @@
   "enabled": {
     "message": "Enabled"
   },
+  "enabledNetworks": {
+    "message": "Enabled networks"
+  },
   "encryptionPublicKeyNotice": {
     "message": "$1 would like your public encryption key. By consenting, this site will be able to compose encrypted messages to you.",
     "description": "$1 is the web3 site name"
@@ -3871,6 +3874,10 @@
   "popularCustomNetworks": {
     "message": "Popular custom networks"
   },
+  "popularNetworkAddToolTip": {
+    "message": "Some of these networks rely on third parties. The connections may be less reliable or enable third-parties to track activity. $1",
+    "description": "$1 is Learn more link"
+  },
   "portfolio": {
     "message": "Portfolio"
   },
diff --git a/ui/components/multichain/network-list-menu/network-list-menu.js b/ui/components/multichain/network-list-menu/network-list-menu.js
index 6f1c6dab3233..400cfe2762df 100644
--- a/ui/components/multichain/network-list-menu/network-list-menu.js
+++ b/ui/components/multichain/network-list-menu/network-list-menu.js
@@ -390,6 +390,15 @@ export const NetworkListMenu = ({ onClose }) => {
               />
             ) : null}
             <Box className="multichain-network-list-menu">
+              <Box
+                paddingRight={4}
+                paddingLeft={4}
+                paddingBottom={4}
+                display={Display.Flex}
+                justifyContent={JustifyContent.spaceBetween}
+              >
+                <Text> {t('enabledNetworks')}</Text>
+              </Box>
               {searchResults.length === 0 && focusSearch ? (
                 <Text
                   paddingLeft={4}
diff --git a/ui/components/multichain/network-list-menu/popular-network-list/popular-network-list.tsx b/ui/components/multichain/network-list-menu/popular-network-list/popular-network-list.tsx
index 6d2cd02f5170..b8cdba132329 100644
--- a/ui/components/multichain/network-list-menu/popular-network-list/popular-network-list.tsx
+++ b/ui/components/multichain/network-list-menu/popular-network-list/popular-network-list.tsx
@@ -9,6 +9,11 @@ import {
   Button,
   AvatarNetworkSize,
   ButtonVariant,
+  IconName,
+  Icon,
+  IconSize,
+  ButtonLinkSize,
+  ButtonLink,
 } from '../../../component-library';
 import { MetaMetricsNetworkEventSource } from '../../../../../shared/constants/metametrics';
 import {
@@ -26,8 +31,11 @@ import {
   Display,
   JustifyContent,
   TextColor,
+  IconColor,
 } from '../../../../helpers/constants/design-system';
 import { RPCDefinition } from '../../../../../shared/constants/network';
+import Tooltip from '../../../ui/tooltip';
+import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url';
 
 const PopularNetworkList = ({
   searchAddNetworkResults,
@@ -53,7 +61,45 @@ const PopularNetworkList = ({
             display={Display.Flex}
             justifyContent={JustifyContent.spaceBetween}
           >
-            <Text> {t('additionalNetworks')}</Text>
+            <Text display={Display.InlineFlex} as="div">
+              {t('additionalNetworks')}
+              <Tooltip
+                position="top"
+                interactive
+                html={
+                  <Box margin={3} className="add-network__warning-tooltip">
+                    {t('popularNetworkAddToolTip', [
+                      <Box>
+                        <ButtonLink
+                          key={`security-provider-button-supporturl`}
+                          size={ButtonLinkSize.Inherit}
+                          externalLink
+                          onClick={() => {
+                            global.platform.openTab({
+                              url: ZENDESK_URLS.UNKNOWN_NETWORK,
+                            });
+                          }}
+                        >
+                          {t('learnMoreUpperCase')}
+                        </ButtonLink>
+                        ,
+                      </Box>,
+                    ])}
+                  </Box>
+                }
+                trigger="mouseenter"
+              >
+                <Box paddingTop={1}>
+                  <Icon
+                    className="add-network__warning-icon"
+                    name={IconName.Info}
+                    color={IconColor.iconMuted}
+                    size={IconSize.Sm}
+                    marginLeft={2}
+                  />
+                </Box>
+              </Tooltip>
+            </Text>
           </Box>
         )}