diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index efe6a71ad6cf..e2ad0fbea46e 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -6364,6 +6364,9 @@
"unknown": {
"message": "Unknown"
},
+ "unknownChainWarning": {
+ "message": "We can’t verify custom networks. To avoid malicious providers from recording your network activity, only add networks you trust."
+ },
"unknownCollection": {
"message": "Unnamed collection"
},
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
index 38bdc74279f8..9fa77789403d 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
@@ -6,30 +6,31 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
class="confirmation-page"
>
This site is requesting to update your default network URL. You can edit defaults and network information any time.
-
-
- MetaMask does not verify custom networks.
-
-
-
- Learn about
-
- scams and network security risks
-
- .
-
-
-
@@ -70,12 +52,12 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
- Network name
+ Currency symbol
@@ -200,3 +132,5 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
`;
+
+exports[`add-ethereum-chain confirmation should match snapshot 2`] = ``;
diff --git a/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js b/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js
index 730b12f23496..83514ad93148 100644
--- a/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js
+++ b/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js
@@ -19,6 +19,7 @@ import {
import { DEFAULT_ROUTE } from '../../../../helpers/constants/routes';
import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url';
import { jsonRpcRequest } from '../../../../../shared/modules/rpc.utils';
+import { BannerAlertSeverity } from '../../../../components/component-library';
import { isValidASCIIURL, toPunycodeURL } from '../../utils/confirm';
const UNRECOGNIZED_CHAIN = {
@@ -269,17 +270,17 @@ function getValues(pendingApproval, t, actions, history, data) {
],
},
{
- element: 'Typography',
+ element: 'BannerAlert',
key: 'only-add-networks-you-trust',
children: [
{
- element: 'b',
- key: 'bolded-text',
+ element: 'Typography',
+ key: 'description',
props: {
style: { display: originIsMetaMask && '-webkit-box' },
},
children: [
- `${t('addEthereumChainConfirmationRisks')} `,
+ `${t('unknownChainWarning')} `,
{
hide: !originIsMetaMask,
element: 'Tooltip',
@@ -296,7 +297,6 @@ function getValues(pendingApproval, t, actions, history, data) {
textAlign: 'left',
}}
>
- {t('someNetworksMayPoseSecurity')}{' '}
{
},
};
const store = configureMockStore(middleware)(testStore);
- const { container, getByText } = renderWithProvider(
- ,
- store,
- );
+ const { container } = renderWithProvider(, store);
await waitFor(() => {
- expect(
- getByText('MetaMask does not verify custom networks.'),
- ).toBeInTheDocument();
- expect(container.querySelector('.callout')).toBeDefined();
+ expect(container.querySelector('.mm-banner-base')).toBeDefined();
expect(container).toMatchSnapshot();
});
});