Update for a new Add network page (#13866)

app/_locales/en/messages.json

@@ -160,6 +160,10 @@
   "addNetwork": {
     "message": "Add Network"
   },
+  "addNetworkTooltipWarning": {
+    "message": "This network connection relies on third parties. This connection may be less reliable or enable third-parties to track activity. $1",
+    "description": "$1 is Learn more link"
+  },
   "addSuggestedTokens": {
     "message": "Add Suggested Tokens"
   },
@@ -734,9 +738,6 @@
   "customGasSubTitle": {
     "message": "Increasing fee may decrease processing times, but it is not guaranteed."
   },
-  "customNetworks": {
-    "message": "Custom networks"
-  },
   "customSpendLimit": {
     "message": "Custom Spend Limit"
   },
@@ -2308,9 +2309,6 @@
   "onlyConnectTrust": {
     "message": "Only connect with sites you trust."
   },
-  "onlyInteractWith": {
-    "message": "Only interact with entities you trust."
-  },
   "openFullScreenForLedgerWebHid": {
     "message": "Open MetaMask in full screen to connect your ledger via WebHID.",
     "description": "Shown to the user on the confirm screen when they are viewing MetaMask in a popup window but need to connect their ledger via webhid."
@@ -2432,6 +2430,9 @@
     "message": "+ $1 more",
     "description": "$1 is a number of additional but unshown items in a list- this message will be shown in place of those items"
   },
+  "popularCustomNetworks": {
+    "message": "Popular custom networks"
+  },
   "preferredLedgerConnectionType": {
     "message": "Preferred Ledger Connection Type",
     "description": "A header for a dropdown in the advanced section of settings. Appears above the ledgerConnectionPreferenceDescription message"
@@ -3935,6 +3936,9 @@
   "walletCreationSuccessTitle": {
     "message": "Wallet creation successful"
   },
+  "warning": {
+    "message": "Warning"
+  },
   "weak": {
     "message": "Weak"
   },

ui/components/app/add-network/add-network.js

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { I18nContext } from '../../../contexts/i18n';
-import ActionableMessage from '../../ui/actionable-message';
 import Box from '../../ui/box';
 import Typography from '../../ui/typography';
 import {
@@ -10,10 +10,17 @@ import {
   COLORS,
   DISPLAY,
   FLEX_DIRECTION,
+  FONT_WEIGHT,
   TYPOGRAPHY,
+  JUSTIFY_CONTENT,
 } from '../../../helpers/constants/design-system';
 import Button from '../../ui/button';
 import IconCaretLeft from '../../ui/icon/icon-caret-left';
+import Tooltip from '../../ui/tooltip';
+import IconWithFallback from '../../ui/icon-with-fallback';
+import IconBorder from '../../ui/icon-border';
+import { getTheme } from '../../../selectors';
+import { THEME_TYPE } from '../../../pages/settings/experimental-tab/experimental-tab.constant';
 
 const AddNetwork = ({
   onBackClick,
@@ -22,10 +29,13 @@ const AddNetwork = ({
   featuredRPCS,
 }) => {
   const t = useContext(I18nContext);
+  const theme = useSelector(getTheme);
+
+  const infuraRegex = /infura.io/u;
 
   const nets = featuredRPCS
     .sort((a, b) => (a.ticker > b.ticker ? 1 : -1))
-    .slice(0, 5);
+    .slice(0, 8);
 
   return (
     <Box>
@@ -63,28 +73,73 @@ const AddNetwork = ({
           color={COLORS.TEXT_MUTED}
           margin={[4, 0, 3, 0]}
         >
-          {t('customNetworks')}
+          {t('popularCustomNetworks')}
         </Typography>
         {nets.map((item, index) => (
           <Box
             key={index}
             display={DISPLAY.FLEX}
             alignItems={ALIGN_ITEMS.CENTER}
+            justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
             marginBottom={6}
           >
-            <img
+            <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.CENTER}>
-              className="add-network__token-image"
+              <IconBorder size={24}>
-              src={item?.rpcPrefs?.imageUrl}
+                <IconWithFallback
-              alt={t('logo', [item.ticker])}
+                  icon={item.rpcPrefs.imageUrl}
-            />
+                  name={item.nickname}
-            <Typography variant={TYPOGRAPHY.H7} color={COLORS.TEXT_DEFAULT}>
+                  size={24}
-              {item.ticker}
+                />
-            </Typography>
+              </IconBorder>
-            <i
+              <Typography
-              className="fa fa-plus add-network__add-icon"
+                variant={TYPOGRAPHY.H7}
-              onClick={onAddNetworkClick}
+                color={COLORS.TEXT_DEFAULT}
-              title={`${t('add')} ${item.ticker}`}
+                fontWeight={FONT_WEIGHT.BOLD}
-            />
+                boxProps={{ marginLeft: 2 }}
+              >
+                {item.nickname}
+              </Typography>
+            </Box>
+            <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.CENTER}>
+              {
+                // Warning for the networks that doesn't use infura.io as the RPC
+                !infuraRegex.test(item.rpcUrl) && (
+                  <Tooltip
+                    className="add-network__warning-tooltip"
+                    position="top"
+                    interactive
+                    html={
+                      <Box margin={3} className="add-network__warning-tooltip">
+                        {t('addNetworkTooltipWarning', [
+                          <a
+                            key="zendesk_page_link"
+                            href="https://metamask.zendesk.com/hc/en-us/articles/4417500466971"
+                            rel="noreferrer"
+                            target="_blank"
+                          >
+                            {t('learnMoreUpperCase')}
+                          </a>,
+                        ])}
+                      </Box>
+                    }
+                    trigger="mouseenter"
+                    theme={theme === THEME_TYPE.DEFAULT ? 'light' : 'dark'}
+                  >
+                    <i
+                      className="fa fa-exclamation-triangle add-network__warning-icon"
+                      title={t('warning')}
+                    />
+                  </Tooltip>
+                )
+              }
+              <Button
+                type="inline"
+                className="add-network__add-button"
+                onClick={onAddNetworkClick}
+              >
+                {t('add')}
+              </Button>
+            </Box>
           </Box>
         ))}
       </Box>
@@ -98,25 +153,6 @@ const AddNetwork = ({
             {t('addANetworkManually')}
           </Typography>
         </Button>
-        <ActionableMessage
-          type="warning"
-          message={
-            <>
-              {t('onlyInteractWith')}
-              <a
-                href="https://metamask.zendesk.com/hc/en-us/articles/4417500466971"
-                target="_blank"
-                className="add-network__footer__link"
-                rel="noreferrer"
-              >
-                {t('endOfFlowMessage9')}
-              </a>
-            </>
-          }
-          iconFillColor="var(--color-warning-default)"
-          useIcon
-          withRightButton
-        />
       </Box>
     </Box>
   );

ui/components/app/add-network/add-network.stories.js

@@ -1,9 +1,12 @@
 import React from 'react';
-import AddNetwork from '.';
+import AddNetwork from './add-network';
 
 const MATIC_TOKEN_IMAGE_URL = './images/matic-token.png';
 const ARBITRUM_IMAGE_URL = './images/arbitrum.svg';
 const OPTIMISM_IMAGE_URL = './images/optimism.svg';
+const AVALANCHE_IMAGE_URL = './images/avax-token.png';
+const PALM_IMAGE_URL = './images/palm.svg';
+const BSC_IMAGE_URL = './images/bsc-filled.svg';
 
 export default {
   title: 'Components/APP/AddNetwork',
@@ -25,36 +28,83 @@ export default {
   args: {
     featuredRPCS: [
       {
-        chainId: '0x89',
+        chainId: '42161',
-        nickname: 'Polygon Mumbai',
+        nickname: 'Arbitrum One',
-        rpcUrl:
+        rpcUrl: 'https://arbitrum-mainnet.infura.io/v3/{INFURA_API_KEY}',
-          'https://polygon-mainnet.infura.io/v3/2b6d4a83d89a438eb1b5d036788ab29c',
+        ticker: 'AETH',
-        ticker: 'MATIC',
         rpcPrefs: {
-          blockExplorerUrl: 'https://mumbai.polygonscan.com/',
+          blockExplorerUrl: 'https://explorer.arbitrum.io',
-          imageUrl: MATIC_TOKEN_IMAGE_URL,
+          imageUrl: ARBITRUM_IMAGE_URL,
         },
       },
       {
-        chainId: '0x99',
+        chainId: '43114',
-        nickname: 'Optimism Testnet ',
+        nickname: 'Avalanche Mainnet C-Chain',
-        rpcUrl:
+        rpcUrl: 'https://api.avax.network/ext/bc/C/rpc',
-          'https://optimism-kovan.infura.io/v3/2b6d4a83d89a438eb1b5d036788ab29c',
+        ticker: 'AVAX',
+        rpcPrefs: {
+          blockExplorerUrl: 'https://snowtrace.io/',
+          imageUrl: AVALANCHE_IMAGE_URL,
+        },
+      },
+      {
+        chainId: '56',
+        nickname: 'BNB Smart Chain',
+        rpcUrl: 'https://bsc-dataseed.binance.org/',
+        ticker: 'BNB',
+        rpcPrefs: {
+          blockExplorerUrl: 'https://bscscan.com/',
+          imageUrl: BSC_IMAGE_URL,
+        },
+      },
+      {
+        chainId: '250',
+        nickname: 'Fantom Opera',
+        rpcUrl: 'https://rpc.ftm.tools/',
+        ticker: 'FTM',
+        rpcPrefs: {
+          blockExplorerUrl: 'https://ftmscan.com/',
+          imageUrl: '',
+        },
+      },
+      {
+        chainId: '1666600000',
+        nickname: 'Harmony Mainnet Shard 0',
+        rpcUrl: 'https://api.harmony.one/',
+        ticker: 'ONE',
+        rpcPrefs: {
+          blockExplorerUrl: 'https://explorer.harmony.one/',
+          imageUrl: '',
+        },
+      },
+      {
+        chainId: '10',
+        nickname: 'Optimism',
+        rpcUrl: 'https://optimism-mainnet.infura.io/v3/{INFURA_API_KEY}',
         ticker: 'KOR',
         rpcPrefs: {
-          blockExplorerUrl: 'https://kovan-optimistic.etherscan.io/',
+          blockExplorerUrl: 'https://optimistic.etherscan.io/',
           imageUrl: OPTIMISM_IMAGE_URL,
         },
       },
       {
-        chainId: '0x66eeb',
+        chainId: '137',
-        nickname: 'Arbitrum Testnet',
+        nickname: 'Polygon Mainnet',
-        rpcUrl:
+        rpcUrl: 'https://polygon-mainnet.infura.io/v3/{INFURA_API_KEY}',
-          'https://arbitrum-rinkeby.infura.io/v3/2b6d4a83d89a438eb1b5d036788ab29c',
+        ticker: 'MATIC',
-        ticker: 'ARETH',
         rpcPrefs: {
-          blockExplorerUrl: 'https://testnet.arbiscan.io/',
+          blockExplorerUrl: 'https://polygonscan.com/',
-          imageUrl: ARBITRUM_IMAGE_URL,
+          imageUrl: MATIC_TOKEN_IMAGE_URL,
+        },
+      },
+      {
+        chainId: '11297108109',
+        nickname: 'Palm',
+        rpcUrl: 'https://palm-mainnet.infura.io/v3/{INFURA_API_KEY}',
+        ticker: 'PALM',
+        rpcPrefs: {
+          blockExplorerUrl: 'https://explorer.palm.io/',
+          imageUrl: PALM_IMAGE_URL,
         },
       },
     ],

ui/components/app/add-network/index.scss

@@ -8,10 +8,17 @@
     }
   }
 
-  &__token-image {
+  &__warning-icon {
-    margin-right: 7px;
+    color: var(--color-icon-muted);
-    height: 24px;
+  }
-    width: 24px;
+
+  &__warning-tooltip {
+    color: var(--color-text-alternative);
+    width: 180px;
+
+    a {
+      color: var(--color-primary-default);
+    }
   }
 
   &__add-icon {
@@ -21,6 +28,12 @@
     cursor: pointer;
   }
 
+  &__add-button.button {
+    color: var(--color-primary-default);
+    font-size: $font-size-h7;
+    margin-left: 24px;
+  }
+
   &__footer {
     border-top: 1px solid var(--color-border-muted);
 
@@ -39,3 +52,5 @@
     }
   }
 }
+
+