Skip to content

Commit

Permalink
banner update
Browse files Browse the repository at this point in the history
  • Loading branch information
@NidhiKJha
NidhiKJha committed Oct 16, 2024
1 parent 7eb733f commit 23f1913
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 118 deletions.
3 changes: 3 additions & 0 deletions app/_locales/en/messages.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

112 changes: 23 additions & 89 deletions ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,31 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
class="confirmation-page"
>
<div
class="mm-box confirmation-page__content mm-box--padding-0"
class="mm-box confirmation-page__content mm-box--padding-4"
style="margin-top: 0px; overflow-y: auto;"
>
<div
class="mm-box mm-box--margin-top-2 mm-box--display-flex mm-box--justify-content-center"
boxprops="[object Object]"
class="mm-box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning mm-box--padding-3 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--background-color-warning-muted mm-box--rounded-sm"
>
<span
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default"
style="mask-image: url('./images/icons/danger.svg');"
/>
<div
class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
class="mm-box mm-box--min-width-0"
>
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
<p
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
T
</div>
<span
class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-default"
data-testid="network-display"
We can’t verify custom networks. To avoid malicious providers from recording your network activity, only add networks you trust.
</p>
<a
href="https://support.metamask.io/networks-and-sidechains/managing-networks/user-guide-custom-networks-and-sidechains/"
target="__blank"
>
Test initial state
</span>
<span
class="mm-box mm-picker-network__arrow-down-icon mm-icon mm-icon--size-xs mm-box--margin-left-auto mm-box--display-none mm-box--color-icon-default"
style="mask-image: url('./images/icons/arrow-down.svg');"
/>
Learn more
</a>
</div>
</div>
<h3
Expand All @@ -42,25 +43,6 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
>
This site is requesting to update your default network URL. You can edit defaults and network information any time.
</h6>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-column box--align-items-center typography typography--h7 typography--weight-normal typography--style-normal typography--color-text-default"
>
<b>
MetaMask does not verify custom networks.
</b>
<span>
Learn about
<a
href="https://support.metamask.io/networks-and-sidechains/managing-networks/user-guide-custom-networks-and-sidechains/"
target="__blank"
>
scams and network security risks
</a>
.
</span>
</h6>
<div
class="box box--margin-6 box--padding-4 box--padding-bottom-3 box--flex-direction-row box--rounded-lg box--border-color-border-muted box--border-style-solid box--border-width-1"
>
Expand All @@ -70,12 +52,12 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
<dt
class="mm-box mm-text definition-list__term mm-text--body-sm-bold mm-box--margin-top-0 mm-box--margin-bottom-1 mm-box--color-text-default"
>
Network name
Currency symbol
<div>
<div
aria-describedby="tippy-tooltip-1"
class="definition-list__tooltip-wrapper"
data-original-title="The name associated with this network."
data-original-title="The ticker symbol displayed for this network’s currency."
data-tooltipped=""
style="display: inline;"
tabindex="0"
Expand All @@ -90,7 +72,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
<dd
class="mm-box mm-text definition-list__definition mm-text--body-sm mm-text--overflow-wrap-break-word mm-box--margin-top-0 mm-box--margin-bottom-2 mm-box--color-text-alternative"
>
Test chain
TST
</dd>
<dt
class="mm-box mm-text definition-list__term mm-text--body-sm-bold mm-box--margin-top-0 mm-box--margin-bottom-1 mm-box--color-text-default"
Expand All @@ -117,63 +99,13 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
>
https://rpcurl.test.chain
</dd>
<dt
class="mm-box mm-text definition-list__term mm-text--body-sm-bold mm-box--margin-top-0 mm-box--margin-bottom-1 mm-box--color-text-default"
>
Chain ID
<div>
<div
aria-describedby="tippy-tooltip-3"
class="definition-list__tooltip-wrapper"
data-original-title="The chain ID used to sign transactions for this network."
data-tooltipped=""
style="display: inline;"
tabindex="0"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/info.svg');"
/>
</div>
</div>
</dt>
<dd
class="mm-box mm-text definition-list__definition mm-text--body-sm mm-text--overflow-wrap-break-word mm-box--margin-top-0 mm-box--margin-bottom-2 mm-box--color-text-alternative"
>
39321
</dd>
<dt
class="mm-box mm-text definition-list__term mm-text--body-sm-bold mm-box--margin-top-0 mm-box--margin-bottom-1 mm-box--color-text-default"
>
Currency symbol
<div>
<div
aria-describedby="tippy-tooltip-4"
class="definition-list__tooltip-wrapper"
data-original-title="The ticker symbol displayed for this network’s currency."
data-tooltipped=""
style="display: inline;"
tabindex="0"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/info.svg');"
/>
</div>
</div>
</dt>
<dd
class="mm-box mm-text definition-list__definition mm-text--body-sm mm-text--overflow-wrap-break-word mm-box--margin-top-0 mm-box--margin-bottom-2 mm-box--color-text-alternative"
>
TST
</dd>
</dl>
<a
class="button btn-link truncated-definition-list__view-more"
role="button"
tabindex="0"
>
View all details
See details
</a>
</div>
</div>
Expand All @@ -200,3 +132,5 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
</div>
</div>
`;

exports[`add-ethereum-chain confirmation should match snapshot 2`] = `<div />`;
33 changes: 12 additions & 21 deletions ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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',
Expand All @@ -296,7 +297,6 @@ function getValues(pendingApproval, t, actions, history, data) {
textAlign: 'left',
}}
>
{t('someNetworksMayPoseSecurity')}{' '}
<a
key="zendesk_page_link"
href={ZENDESK_URLS.UNKNOWN_NETWORK}
Expand Down Expand Up @@ -326,28 +326,19 @@ function getValues(pendingApproval, t, actions, history, data) {
],
},
{
element: 'MetaMaskTranslation',
key: 'learn-about-risks',
element: 'a',
children: t('learnMoreUpperCase'),
key: 'learnMoreUpperCase',
props: {
translationKey: 'addEthereumChainConfirmationRisksLearnMore',
variables: [
{
element: 'a',
children: t('addEthereumChainConfirmationRisksLearnMoreLink'),
key: 'addEthereumChainConfirmationRisksLearnMoreLink',
props: {
href: ZENDESK_URLS.USER_GUIDE_CUSTOM_NETWORKS,
target: '__blank',
},
},
],
href: ZENDESK_URLS.USER_GUIDE_CUSTOM_NETWORKS,
target: '__blank',
},
},
],
props: {
variant: TypographyVariant.H7,
severity: BannerAlertSeverity.Warning,
boxProps: {
margin: originIsMetaMask ? [0, 8] : 0,
margin: [0, 4],
display: Display.Flex,
flexDirection: FlexDirection.Column,
alignItems: AlignItems.center,
Expand Down
10 changes: 2 additions & 8 deletions ui/pages/confirmations/confirmation/templates/add-ethereum-chain.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,15 +61,9 @@ describe('add-ethereum-chain confirmation', () => {
},
};
const store = configureMockStore(middleware)(testStore);
const { container, getByText } = renderWithProvider(
<Confirmation />,
store,
);
const { container } = renderWithProvider(<Confirmation />, 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();
});
});
Expand Down

0 comments on commit 23f1913

Please sign in to comment.