From d200bcc24c4d308da4dd6627ee6b0afb762cd1e9 Mon Sep 17 00:00:00 2001
From: salimtb <salim.toubal@outlook.com>
Date: Thu, 13 Jun 2024 18:43:52 +0200
Subject: [PATCH] feat: add tooltip

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

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 981aaa22ba34..7b0de6ce5a96 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -1614,6 +1614,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"
@@ -3819,6 +3822,11 @@
   "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 9f6176f66610..fa9c6ea8fcf4 100644
--- a/ui/components/multichain/network-list-menu/network-list-menu.js
+++ b/ui/components/multichain/network-list-menu/network-list-menu.js
@@ -353,6 +353,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 && isSearching ? (
                   <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..c9ac60a757dd 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 {
@@ -24,10 +29,13 @@ import {
   AlignItems,
   BackgroundColor,
   Display,
+  IconColor,
   JustifyContent,
   TextColor,
 } 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>
         )}