Create 'Add network' page (#13180)

2024-12-22 09:23:21 +01:00 · 2022-02-25 17:50:16 +01:00 · 2022-02-25 17:50:16 +01:00 · cdb7269443
commit cdb7269443
parent bd54fafe7d
9 changed files with 263 additions and 0 deletions
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@ -98,6 +98,9 @@
  "addANetwork": {
    "message": "Add a network"
  },
+  "addANetworkManually": {
+    "message": "Add a network manually"
+  },
  "addANickname": {
    "message": "Add a nickname"
  },
@ -137,6 +140,9 @@
  "addFriendsAndAddresses": {
    "message": "Add friends and addresses you trust"
  },
+  "addFromAListOfPopularNetworks": {
+    "message": "Add from a list of popular networks or add a network manually. Only interact with the entities you trust."
+  },
  "addMemo": {
    "message": "Add memo"
  },
@ -704,6 +710,9 @@
  "customGasSubTitle": {
    "message": "Increasing fee may decrease processing times, but it is not guaranteed."
  },
+  "customNetworks": {
+    "message": "Custom networks"
+  },
  "customSpendLimit": {
    "message": "Custom Spend Limit"
  },
@ -1693,6 +1702,10 @@
  "lockTimeTooGreat": {
    "message": "Lock time is too great"
  },
+  "logo": {
+    "message": "$1 logo",
+    "description": "$1 is the name of the ticker"
+  },
  "low": {
    "message": "Low"
  },
@ -2221,6 +2234,9 @@
  "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."
--- a/app/images/arbitrum.svg
+++ b/app/images/arbitrum.svg
--- a/app/images/optimism.svg
+++ b/app/images/optimism.svg
@ -0,0 +1,5 @@
+<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="250" cy="250" r="250" fill="#FF0420"/>
+<path d="M177.133 316.446C162.247 316.446 150.051 312.943 140.544 305.938C131.162 298.808 126.471 288.676 126.471 275.541C126.471 272.789 126.784 269.411 127.409 265.408C129.036 256.402 131.35 245.581 134.352 232.947C142.858 198.547 164.812 181.347 200.213 181.347C209.845 181.347 218.476 182.973 226.107 186.225C233.738 189.352 239.742 194.106 244.12 200.486C248.498 206.74 250.688 214.246 250.688 223.002C250.688 225.629 250.375 228.944 249.749 232.947C247.873 244.08 245.621 254.901 242.994 265.408C238.616 282.546 231.048 295.368 220.29 303.874C209.532 312.255 195.147 316.446 177.133 316.446ZM179.76 289.426C186.766 289.426 192.707 287.362 197.586 283.234C202.59 279.106 206.155 272.789 208.281 264.283C211.158 252.524 213.348 242.266 214.849 233.51C215.349 230.883 215.599 228.194 215.599 225.441C215.599 214.058 209.657 208.366 197.774 208.366C190.768 208.366 184.764 210.43 179.76 214.558C174.882 218.687 171.379 225.004 169.253 233.51C167.001 241.891 164.749 252.149 162.498 264.283C161.997 266.784 161.747 269.411 161.747 272.163C161.747 283.672 167.752 289.426 179.76 289.426Z" fill="white"/>
+<path d="M259.303 314.57C257.927 314.57 256.863 314.132 256.113 313.256C255.487 312.255 255.3 311.13 255.55 309.879L281.444 187.914C281.694 186.538 282.382 185.412 283.508 184.536C284.634 183.661 285.822 183.223 287.073 183.223H336.985C350.87 183.223 362.003 186.1 370.384 191.854C378.891 197.609 383.144 205.927 383.144 216.81C383.144 219.937 382.769 223.19 382.018 226.567C378.891 240.953 372.574 251.586 363.067 258.466C353.685 265.346 340.8 268.786 324.413 268.786H299.082L290.451 309.879C290.2 311.255 289.512 312.38 288.387 313.256C287.261 314.132 286.072 314.57 284.822 314.57H259.303ZM325.727 242.892C330.98 242.892 335.546 241.453 339.424 238.576C343.427 235.699 346.054 231.571 347.305 226.192C347.68 224.065 347.868 222.189 347.868 220.563C347.868 216.935 346.805 214.183 344.678 212.307C342.551 210.305 338.924 209.305 333.795 209.305H311.278L304.148 242.892H325.727Z" fill="white"/>
+</svg>
--- a/app/images/times.svg
+++ b/app/images/times.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.42237 13.347C9.42237 13.5827 9.33819 13.7847 9.16983 13.9531C9.00147 14.1214 8.79944 14.2056 8.56374 14.2056L6.84648 14.2056C6.61078 14.2056 6.40875 14.1214 6.24039 13.9531C6.07203 13.7847 5.98785 13.5827 5.98785 13.347L5.98785 9.63466L2.27554 9.63466C2.03984 9.63466 1.83781 9.55048 1.66945 9.38212C1.50109 9.21377 1.41691 9.01174 1.41691 8.77603L1.41691 7.05877C1.41691 6.82307 1.50109 6.62104 1.66945 6.45268C1.83781 6.28432 2.03984 6.20014 2.27554 6.20014L5.98785 6.20014V2.48783C5.98785 2.25213 6.07203 2.0501 6.24039 1.88174C6.40875 1.71338 6.61078 1.6292 6.84648 1.6292H8.56374C8.79944 1.6292 9.00147 1.71338 9.16983 1.88174C9.33819 2.0501 9.42237 2.25213 9.42237 2.48783L9.42237 6.20014H13.1347C13.3704 6.20014 13.5724 6.28432 13.7408 6.45268C13.9091 6.62104 13.9933 6.82307 13.9933 7.05877V8.77603C13.9933 9.01173 13.9091 9.21377 13.7408 9.38212C13.5724 9.55048 13.3704 9.63466 13.1347 9.63466H9.42237L9.42237 13.347Z" fill="#6A737D"/>
+</svg>
--- a/ui/components/app/add-network/add-network.js
+++ b/ui/components/app/add-network/add-network.js
@ -0,0 +1,133 @@
+import React, { useContext } from 'react';
+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 {
+  ALIGN_ITEMS,
+  BLOCK_SIZES,
+  COLORS,
+  DISPLAY,
+  FLEX_DIRECTION,
+  TYPOGRAPHY,
+} from '../../../helpers/constants/design-system';
+import Button from '../../ui/button';
+
+const AddNetwork = ({
+  onBackClick,
+  onAddNetworkClick,
+  onAddNetworkManuallyClick,
+  featuredRPCS,
+}) => {
+  const t = useContext(I18nContext);
+
+  const nets = featuredRPCS
+    .sort((a, b) => (a.ticker > b.ticker ? 1 : -1))
+    .slice(0, 5);
+
+  return (
+    <Box>
+      <Box
+        height={BLOCK_SIZES.TWO_TWELFTHS}
+        padding={[4, 0, 4, 0]}
+        display={DISPLAY.FLEX}
+        alignItems={ALIGN_ITEMS.CENTER}
+        flexDirection={FLEX_DIRECTION.ROW}
+        className="add-network__header"
+      >
+        <img
+          src="./images/caret-left-black.svg"
+          alt={t('back')}
+          onClick={onBackClick}
+          className="add-network__header__back-icon"
+        />
+        <Typography variant={TYPOGRAPHY.H3} color={COLORS.BLACK}>
+          {t('addNetwork')}
+        </Typography>
+      </Box>
+      <Box
+        height={BLOCK_SIZES.FOUR_FIFTHS}
+        width={BLOCK_SIZES.TEN_TWELFTHS}
+        margin={[0, 6, 0, 6]}
+      >
+        <Typography
+          variant={TYPOGRAPHY.H6}
+          color={COLORS.UI4}
+          margin={[4, 0, 0, 0]}
+        >
+          {t('addFromAListOfPopularNetworks')}
+        </Typography>
+        <Typography
+          variant={TYPOGRAPHY.H7}
+          color={COLORS.UI3}
+          margin={[4, 0, 3, 0]}
+        >
+          {t('customNetworks')}
+        </Typography>
+        {nets.map((item, index) => (
+          <Box
+            key={index}
+            display={DISPLAY.FLEX}
+            alignItems={ALIGN_ITEMS.CENTER}
+            marginBottom={6}
+          >
+            <img
+              className="add-network__token-image"
+              src={item?.rpcPrefs?.imageUrl}
+              alt={t('logo', [item.ticker])}
+            />
+            <Typography variant={TYPOGRAPHY.H7} color={COLORS.BLACK}>
+              {item.ticker}
+            </Typography>
+            <img
+              className="add-network__add-icon"
+              src="./images/times.svg"
+              alt={`${t('add')} ${item.ticker}`}
+              onClick={onAddNetworkClick}
+            />
+          </Box>
+        ))}
+      </Box>
+      <Box
+        height={BLOCK_SIZES.ONE_TWELFTH}
+        padding={[4, 4, 4, 4]}
+        className="add-network__footer"
+      >
+        <Button type="link" onClick={onAddNetworkManuallyClick}>
+          <Typography variant={TYPOGRAPHY.H6} color={COLORS.PRIMARY1}>
+            {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="#f8c000"
+          useIcon
+          withRightButton
+        />
+      </Box>
+    </Box>
+  );
+};
+
+AddNetwork.propTypes = {
+  onBackClick: PropTypes.func,
+  onAddNetworkClick: PropTypes.func,
+  onAddNetworkManuallyClick: PropTypes.func,
+  featuredRPCS: PropTypes.array,
+};
+
+export default AddNetwork;
--- a/ui/components/app/add-network/add-network.stories.js
+++ b/ui/components/app/add-network/add-network.stories.js
@ -0,0 +1,53 @@
+import React from 'react';
+import AddNetwork from '.';
+
+export default {
+  title: 'Components/APP/AddNetwork',
+  id: __filename,
+};
+
+export const DefaultStory = () => {
+  const MATIC_TOKEN_IMAGE_URL = './images/matic-token.png';
+  const ARBITRUM_IMAGE_URL = './images/arbitrum.svg';
+  const OPTIMISM_IMAGE_URL = './images/optimism.svg';
+
+  const FEATURED_RPCS = [
+    {
+      chainId: '0x89',
+      nickname: 'Polygon Mumbai',
+      rpcUrl:
+        'https://polygon-mainnet.infura.io/v3/2b6d4a83d89a438eb1b5d036788ab29c',
+      ticker: 'MATIC',
+      rpcPrefs: {
+        blockExplorerUrl: 'https://mumbai.polygonscan.com/',
+        imageUrl: MATIC_TOKEN_IMAGE_URL,
+      },
+    },
+    {
+      chainId: '0x99',
+      nickname: 'Optimism Testnet ',
+      rpcUrl:
+        'https://optimism-kovan.infura.io/v3/2b6d4a83d89a438eb1b5d036788ab29c',
+      ticker: 'KOR',
+      rpcPrefs: {
+        blockExplorerUrl: 'https://kovan-optimistic.etherscan.io/',
+        imageUrl: OPTIMISM_IMAGE_URL,
+      },
+    },
+    {
+      chainId: '0x66eeb',
+      nickname: 'Arbitrum Testnet',
+      rpcUrl:
+        'https://arbitrum-rinkeby.infura.io/v3/2b6d4a83d89a438eb1b5d036788ab29c',
+      ticker: 'ARETH',
+      rpcPrefs: {
+        blockExplorerUrl: 'https://testnet.arbiscan.io/',
+        imageUrl: ARBITRUM_IMAGE_URL,
+      },
+    },
+  ];
+
+  return <AddNetwork featuredRPCS={FEATURED_RPCS} />;
+};
+
+DefaultStory.storyName = 'Default';
--- a/ui/components/app/add-network/index.js
+++ b/ui/components/app/add-network/index.js
@ -0,0 +1 @@
+export { default } from './add-network';
--- a/ui/components/app/add-network/index.scss
+++ b/ui/components/app/add-network/index.scss
@ -0,0 +1,42 @@
+.add-network {
+  &__header {
+    border-bottom: 1px solid var(--ui-grey);
+
+    &__back-icon {
+      padding-left: 24px;
+      padding-right: 26px;
+    }
+  }
+
+  &__token-image {
+    margin-right: 7px;
+    height: 24px;
+    width: 24px;
+  }
+
+  &__add-icon {
+    height: 16px;
+    width: 12px;
+    color: var(--ui-4);
+    margin-left: auto;
+    margin-right: 0;
+  }
+
+  &__footer {
+    border-top: 1px solid var(--ui-2);
+
+    & .btn-link {
+      display: initial;
+      padding: 0;
+    }
+
+    &__link {
+      color: var(--primary-1);
+    }
+
+    & .actionable-message--warning .actionable-message__message,
+    .actionable-message--warning .actionable-message__action {
+      color: var(--ui-4);
+    }
+  }
+}
--- a/ui/components/app/app-components.scss
+++ b/ui/components/app/app-components.scss
@ -1,6 +1,7 @@
 /** Please import your files in alphabetical order **/
@import 'account-list-item/index';
@import 'account-menu/index';
+@import 'add-network/index';
@import 'app-loading-spinner/index';
@import 'import-token-link/index';
@import 'advanced-gas-controls/index';