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

Jump to bottom

feat: Network buttons during advanced onboarding #25276

Merged
merged 11 commits into from
Jun 18, 2024
Merged

feat: Network buttons during advanced onboarding #25276

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
fce0031
wip
bergeron Jun 11, 2024
990e053
Merge branch 'develop' of github.com:MetaMask/metamask-extension into…
bergeron Jun 12, 2024
7f31681
wip
bergeron Jun 12, 2024
233f966
Merge branch 'develop' of github.com:MetaMask/metamask-extension into…
bergeron Jun 12, 2024
5022cb7
wip
bergeron Jun 12, 2024
d26de13
use real rpc url, use iconbutton
bergeron Jun 12, 2024
838b47c
fix unit test
bergeron Jun 12, 2024
95430ac
Merge branch 'develop' into brian/onboarding-network-customizer
bergeron Jun 12, 2024
1ca4eac
Merge branch 'develop' of github.com:MetaMask/metamask-extension into…
bergeron Jun 14, 2024
68bd5bc
new URL and get feature flag from selector
bergeron Jun 14, 2024
ccbbc69
fix unit test
bergeron Jun 14, 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
4 changes: 4 additions & 0 deletions ui/pages/onboarding-flow/privacy-settings/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,4 +64,8 @@
padding: 8px !important;
}
}

&__customizable-network:hover {
cursor: pointer;
}
}
137 changes: 115 additions & 22 deletions ui/pages/onboarding-flow/privacy-settings/privacy-settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { useContext, useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { ButtonVariant } from '@metamask/snaps-sdk';
import { addUrlProtocolPrefix } from '../../../../app/scripts/lib/util';
import {
useSetIsProfileSyncingEnabled,
Expand All @@ -25,9 +26,20 @@ import {
ButtonPrimarySize,
ButtonSecondary,
ButtonSecondarySize,
Icon,
IconName,
ButtonLink,
AvatarNetwork,
ButtonIcon,
IconSize,
} from '../../../components/component-library';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import {
AlignItems,
Display,
FlexDirection,
JustifyContent,
TextAlign,
TextColor,
TextVariant,
} from '../../../helpers/constants/design-system';
Expand Down Expand Up @@ -63,6 +75,11 @@ import {
openBasicFunctionalityModal,
} from '../../../ducks/app/app';
import IncomingTransactionToggle from '../../../components/app/incoming-trasaction-toggle/incoming-transaction-toggle';
import {
CHAIN_IDS,
CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
NETWORK_TO_NAME_MAP,
} from '../../../../shared/constants/network';
import { Setting } from './setting';

/**
Expand Down Expand Up @@ -376,29 +393,105 @@ export default function PrivacySettings() {
</a>,
])}

<Box paddingTop={2}>
{currentNetwork ? (
<div className="privacy-settings__network">
<>
<PickerNetwork
label={currentNetwork?.nickname}
src={currentNetwork?.rpcPrefs?.imageUrl}
onClick={() => dispatch(toggleNetworkMenu())}
/>
</>
</div>
) : (
<ButtonSecondary
size={ButtonSecondarySize.Lg}
onClick={(e) => {
e.preventDefault();
dispatch(showModal({ name: 'ONBOARDING_ADD_NETWORK' }));
}}
{window.metamaskFeatureFlags?.networkMenuRedesign ? (
bergeron marked this conversation as resolved.
Show resolved Hide resolved
<Box paddingTop={4}>
<Box
display={Display.Flex}
flexDirection={FlexDirection.Column}
gap={5}
>
{t('onboardingAdvancedPrivacyNetworkButton')}
</ButtonSecondary>
)}
</Box>
{[CHAIN_IDS.MAINNET, CHAIN_IDS.LINEA_MAINNET].map(
(chainId) => (
<Box
bergeron marked this conversation as resolved.
Show resolved Hide resolved
key={chainId}
className="privacy-settings__customizable-network"
onClick={() =>
console.log(`chain ${chainId} clicked`)
}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.spaceBetween}
>
<Box
display={Display.Flex}
alignItems={AlignItems.center}
>
<AvatarNetwork
src={CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[chainId]}
/>
<Box textAlign={TextAlign.Left} marginLeft={3}>
<Text variant={TextVariant.bodySmMedium}>
{NETWORK_TO_NAME_MAP[chainId]}
</Text>
<Text
variant={TextVariant.bodyXs}
color={TextColor.textAlternative}
>
{(function () {
const url = allNetworks.find(
(network) => network.chainId === chainId,
)?.rpcUrl;

// Get just the domain, not the infura key
return url?.slice(
bergeron marked this conversation as resolved.
Show resolved Hide resolved
0,
url.indexOf('/', url.indexOf('://') + 3),
);
})()}
bergeron marked this conversation as resolved.
Show resolved Hide resolved
</Text>
</Box>
</Box>
<ButtonIcon
bergeron marked this conversation as resolved.
Show resolved Hide resolved
iconName={IconName.ArrowRight}
size={IconSize.Md}
/>
</Box>
),
)}
<ButtonLink
onClick={() => console.log('add a network clicked')}
justifyContent={JustifyContent.Left}
variant={ButtonVariant.link}
>
<Box
display={Display.Flex}
alignItems={AlignItems.center}
>
<Icon name={IconName.Add} marginRight={3} />
<Text color={TextColor.primaryDefault}>
{t('addANetwork')}
</Text>
</Box>
</ButtonLink>
</Box>
</Box>
) : (
<Box paddingTop={2}>
{currentNetwork ? (
<div className="privacy-settings__network">
<>
<PickerNetwork
label={currentNetwork?.nickname}
src={currentNetwork?.rpcPrefs?.imageUrl}
onClick={() => dispatch(toggleNetworkMenu())}
/>
</>
</div>
) : (
<ButtonSecondary
size={ButtonSecondarySize.Lg}
onClick={(e) => {
e.preventDefault();
dispatch(
showModal({ name: 'ONBOARDING_ADD_NETWORK' }),
);
}}
>
{t('onboardingAdvancedPrivacyNetworkButton')}
</ButtonSecondary>
)}
</Box>
)}
</>
}
/>
Expand Down