Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Added UI for switching via dapp for custom chain id #26905

Merged
merged 6 commits into from
Sep 9, 2024
Merged

feat: Added UI for switching via dapp for custom chain id #26905

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c69b439
switching via dapp for custom chain id
NidhiKJha Aug 30, 2024
944decc
updated condition for non multichain feature
NidhiKJha Sep 9, 2024
366bb44
updated condition for non multichain feature
NidhiKJha Sep 9, 2024
7dec04d
updated condition for non multichain feature
NidhiKJha Sep 9, 2024
1786235
lint fix
NidhiKJha Sep 9, 2024
c0a13ad
snapshot updated
NidhiKJha Sep 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions app/_locales/en/messages.json
View file
Open in desktop

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

8 changes: 7 additions & 1 deletion ui/components/app/metamask-template-renderer/safe-component-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,12 @@ import TextField from '../../ui/text-field';
import ConfirmationNetworkSwitch from '../../../pages/confirmations/confirmation/components/confirmation-network-switch';
import UrlIcon from '../../ui/url-icon';
import Tooltip from '../../ui/tooltip/tooltip';
import { AvatarIcon, FormTextField, Text } from '../../component-library';
import {
AvatarIcon,
FormTextField,
Text,
BannerAlert,
} from '../../component-library';
import ActionableMessage from '../../ui/actionable-message/actionable-message';
import { AccountListItem } from '../../multichain';
import {
Expand Down Expand Up @@ -84,6 +89,7 @@ export const safeComponentList = {
SnapUILink,
SnapUIIcon,
SnapUIImage,
BannerAlert,
Spinner,
ConfirmInfoRow,
ConfirmInfoRowAddress,
Expand Down
2 changes: 1 addition & 1 deletion ui/pages/confirmations/confirmation/confirmation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -528,7 +528,7 @@ export default function ConfirmationPage({
)}
<Box
className="confirmation-page__content"
paddingTop={process.env.CHAIN_PERMISSIONS ? 4 : 0}
padding={process.env.CHAIN_PERMISSIONS ? 4 : 0}
style={{
marginTop: `${contentMargin}px`,
overflowY: 'auto',
Expand Down
2 changes: 1 addition & 1 deletion ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
class="confirmation-page"
>
<div
class="mm-box confirmation-page__content mm-box--padding-top-0"
class="mm-box confirmation-page__content mm-box--padding-0"
style="margin-top: 0px; overflow-y: auto;"
>
<div
Expand Down
4 changes: 2 additions & 2 deletions ...confirmations/confirmation/templates/__snapshots__/create-named-snap-account.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`create-named-snap-account confirmation matches snapshot 1`] = `
class="confirmation-page"
>
<div
class="mm-box confirmation-page__content mm-box--padding-top-0"
class="mm-box confirmation-page__content mm-box--padding-0"
style="margin-top: 0px; overflow-y: auto;"
>
<div
Expand Down Expand Up @@ -106,7 +106,7 @@ exports[`create-named-snap-account confirmation matches snapshot 2`] = `
class="confirmation-page"
>
<div
class="mm-box confirmation-page__content mm-box--padding-top-0"
class="mm-box confirmation-page__content mm-box--padding-0"
style="margin-top: 0px; overflow-y: auto;"
>
<div
Expand Down
2 changes: 1 addition & 1 deletion ui/pages/confirmations/confirmation/templates/__snapshots__/create-snap-account.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`create-snap-account confirmation should match snapshot 1`] = `
class="confirmation-page"
>
<div
class="mm-box confirmation-page__content mm-box--padding-top-0"
class="mm-box confirmation-page__content mm-box--padding-0"
style="margin-top: 0px; overflow-y: auto;"
>
<div
Expand Down
2 changes: 1 addition & 1 deletion ui/pages/confirmations/confirmation/templates/__snapshots__/error.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`error template matches the snapshot 1`] = `
class="confirmation-page"
>
<div
class="mm-box confirmation-page__content mm-box--padding-top-0"
class="mm-box confirmation-page__content mm-box--padding-0"
style="margin-top: 0px; overflow-y: auto;"
>
<h2
Expand Down
2 changes: 1 addition & 1 deletion ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = `
class="confirmation-page"
>
<div
class="mm-box confirmation-page__content mm-box--padding-top-0"
class="mm-box confirmation-page__content mm-box--padding-0"
style="margin-top: 0px; overflow-y: auto;"
>
<div
Expand Down
2 changes: 1 addition & 1 deletion ...ges/confirmations/confirmation/templates/__snapshots__/snap-account-redirect.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`snap-account-redirect confirmation should match snapshot 1`] = `
class="confirmation-page"
>
<div
class="mm-box confirmation-page__content mm-box--padding-top-0"
class="mm-box confirmation-page__content mm-box--padding-0"
style="margin-top: 0px; overflow-y: auto;"
>
<div
Expand Down
2 changes: 1 addition & 1 deletion ui/pages/confirmations/confirmation/templates/__snapshots__/success.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`success template matches the snapshot 1`] = `
class="confirmation-page"
>
<div
class="mm-box confirmation-page__content mm-box--padding-top-0"
class="mm-box confirmation-page__content mm-box--padding-0"
style="margin-top: 0px; overflow-y: auto;"
>
<h2
Expand Down
4 changes: 2 additions & 2 deletions ...ges/confirmations/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`switch-ethereum-chain confirmation should match snapshot 1`] = `
class="confirmation-page"
>
<div
class="mm-box confirmation-page__content mm-box--padding-top-0"
class="mm-box confirmation-page__content mm-box--padding-0"
style="margin-top: 0px; overflow-y: auto;"
>
<div
Expand Down Expand Up @@ -123,7 +123,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
class="confirmation-page"
>
<div
class="mm-box confirmation-page__content mm-box--padding-top-0"
class="mm-box confirmation-page__content mm-box--padding-0"
style="margin-top: 0px; overflow-y: auto;"
>
<div
Expand Down
79 changes: 79 additions & 0 deletions ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,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 @@ -149,6 +150,8 @@ const MISMATCHED_NETWORK_RPC_CHAIN_ID = {
},
};

const multichainFlag = process.env.CHAIN_PERMISSIONS;

const ERROR_CONNECTING_TO_RPC = {
id: 'ERROR_CONNECTING_TO_RPC',
severity: Severity.Danger,
Expand Down Expand Up @@ -249,6 +252,82 @@ function getValues(pendingApproval, t, actions, history, data) {
},
],
},
multichainFlag && {
element: 'BannerAlert',
key: 'only-add-networks-you-trust',
children: [
{
element: 'Typography',
key: 'description',
props: {
style: { display: originIsMetaMask && '-webkit-box' },
},
children: [
`${t('unknownChainWarning')} `,
{
hide: !originIsMetaMask,
element: 'Tooltip',
key: 'tooltip-info',
props: {
position: 'bottom',
interactive: true,
trigger: 'mouseenter',
html: (
<div
style={{
width: '180px',
margin: '16px',
textAlign: 'left',
}}
>
<a
key="zendesk_page_link"
href={ZENDESK_URLS.UNKNOWN_NETWORK}
rel="noreferrer"
target="_blank"
style={{ color: 'var(--color-primary-default)' }}
>
{t('learnMoreUpperCase')}
</a>
</div>
),
},
children: [
{
element: 'i',
key: 'info-circle',
props: {
className: 'fas fa-info-circle',
style: {
marginLeft: '4px',
color: 'var(--color-icon-default)',
},
},
},
],
},
],
},
{
element: 'a',
children: t('learnMoreUpperCase'),
key: 'learnMoreUpperCase',
props: {
href: ZENDESK_URLS.USER_GUIDE_CUSTOM_NETWORKS,
target: '__blank',
},
},
],
props: {
severity: BannerAlertSeverity.Warning,
boxProps: {
margin: [0, 4],
display: Display.Flex,
flexDirection: FlexDirection.Column,
alignItems: AlignItems.center,
},
},
},

{
element: 'Typography',
Expand Down