mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-22 09:23:21 +01:00
Update for a new Add network page (#13866)
This commit is contained in:
amerkadicE
GitHub
parent
8fef9fd8df
commit
ef6fb86f50
16
app/_locales/en/messages.json
generated
16
app/_locales/en/messages.json
generated
@ -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"
|
||||
},
|
||||
|
||||
1
app/images/bsc-filled.svg
Normal file
1
app/images/bsc-filled.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
1
app/images/palm.svg
Normal file
1
app/images/palm.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 314 KiB |
@ -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
|
||||
className="add-network__token-image"
|
||||
src={item?.rpcPrefs?.imageUrl}
|
||||
alt={t('logo', [item.ticker])}
|
||||
/>
|
||||
<Typography variant={TYPOGRAPHY.H7} color={COLORS.TEXT_DEFAULT}>
|
||||
{item.ticker}
|
||||
</Typography>
|
||||
<i
|
||||
className="fa fa-plus add-network__add-icon"
|
||||
onClick={onAddNetworkClick}
|
||||
title={`${t('add')} ${item.ticker}`}
|
||||
/>
|
||||
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.CENTER}>
|
||||
<IconBorder size={24}>
|
||||
<IconWithFallback
|
||||
icon={item.rpcPrefs.imageUrl}
|
||||
name={item.nickname}
|
||||
size={24}
|
||||
/>
|
||||
</IconBorder>
|
||||
<Typography
|
||||
variant={TYPOGRAPHY.H7}
|
||||
color={COLORS.TEXT_DEFAULT}
|
||||
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>
|
||||
);
|
||||
|
||||
@ -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',
|
||||
nickname: 'Polygon Mumbai',
|
||||
rpcUrl:
|
||||
'https://polygon-mainnet.infura.io/v3/2b6d4a83d89a438eb1b5d036788ab29c',
|
||||
ticker: 'MATIC',
|
||||
chainId: '42161',
|
||||
nickname: 'Arbitrum One',
|
||||
rpcUrl: 'https://arbitrum-mainnet.infura.io/v3/{INFURA_API_KEY}',
|
||||
ticker: 'AETH',
|
||||
rpcPrefs: {
|
||||
blockExplorerUrl: 'https://mumbai.polygonscan.com/',
|
||||
imageUrl: MATIC_TOKEN_IMAGE_URL,
|
||||
blockExplorerUrl: 'https://explorer.arbitrum.io',
|
||||
imageUrl: ARBITRUM_IMAGE_URL,
|
||||
},
|
||||
},
|
||||
{
|
||||
chainId: '0x99',
|
||||
nickname: 'Optimism Testnet ',
|
||||
rpcUrl:
|
||||
'https://optimism-kovan.infura.io/v3/2b6d4a83d89a438eb1b5d036788ab29c',
|
||||
chainId: '43114',
|
||||
nickname: 'Avalanche Mainnet C-Chain',
|
||||
rpcUrl: 'https://api.avax.network/ext/bc/C/rpc',
|
||||
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',
|
||||
nickname: 'Arbitrum Testnet',
|
||||
rpcUrl:
|
||||
'https://arbitrum-rinkeby.infura.io/v3/2b6d4a83d89a438eb1b5d036788ab29c',
|
||||
ticker: 'ARETH',
|
||||
chainId: '137',
|
||||
nickname: 'Polygon Mainnet',
|
||||
rpcUrl: 'https://polygon-mainnet.infura.io/v3/{INFURA_API_KEY}',
|
||||
ticker: 'MATIC',
|
||||
rpcPrefs: {
|
||||
blockExplorerUrl: 'https://testnet.arbiscan.io/',
|
||||
imageUrl: ARBITRUM_IMAGE_URL,
|
||||
blockExplorerUrl: 'https://polygonscan.com/',
|
||||
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,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
@ -8,10 +8,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__token-image {
|
||||
margin-right: 7px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
&__warning-icon {
|
||||
color: var(--color-icon-muted);
|
||||
}
|
||||
|
||||
&__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 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user