feat: add tooltip

MetaMask · Jun 13, 2024 · d200bcc · d200bcc
1 parent fbd6e17
commit d200bcc
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 1 deletion.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git 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
@@ -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>
         )}