1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Onboarding V2 App Header (#12264)

* Add onboarding app header
This commit is contained in:
Alex Donesky 2021-10-05 15:38:16 -05:00 committed by GitHub
parent 68259ee3e2
commit 3985a65e36
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 135 additions and 13 deletions

View File

@ -8,6 +8,7 @@ export default class MetaFoxLogo extends PureComponent {
onClick: PropTypes.func,
unsetIconHeight: PropTypes.bool,
useDark: PropTypes.bool,
isOnboarding: PropTypes.bool,
};
static defaultProps = {
@ -16,13 +17,15 @@ export default class MetaFoxLogo extends PureComponent {
};
render() {
const { onClick, unsetIconHeight, useDark } = this.props;
const { onClick, unsetIconHeight, useDark, isOnboarding } = this.props;
const iconProps = unsetIconHeight ? {} : { height: 42, width: 42 };
return (
<div
onClick={onClick}
className={classnames('app-header__logo-container', {
className={classnames({
'app-header__logo-container': !isOnboarding,
'onboarding-app-header__logo-container': isOnboarding,
'app-header__logo-container--clickable': Boolean(onClick),
})}
>
@ -33,19 +36,19 @@ export default class MetaFoxLogo extends PureComponent {
? getBuildSpecificAsset('metafoxLogoHorizontalDark')
: './images/logo/metamask-logo-horizontal.svg'
}
className={classnames(
'app-header__metafox-logo',
'app-header__metafox-logo--horizontal',
)}
className={classnames({
'app-header__metafox-logo--horizontal': !isOnboarding,
'onboarding-app-header__metafox-logo--horizontal': isOnboarding,
})}
alt=""
/>
<img
{...iconProps}
src="./images/logo/metamask-fox.svg"
className={classnames(
'app-header__metafox-logo',
'app-header__metafox-logo--icon',
)}
className={classnames({
'app-header__metafox-logo--icon': !isOnboarding,
'onboarding-app-header__metafox-logo--icon': isOnboarding,
})}
alt=""
/>
</div>

View File

@ -1,5 +1,6 @@
@import 'recovery-phrase/index';
@import 'new-account/index';
@import 'onboarding-app-header/index';
.onboarding-flow {
width: 100%;

View File

@ -0,0 +1,67 @@
.onboarding-app-header {
align-items: center;
background: $white;
position: relative;
z-index: $header-z-index;
display: flex;
flex-flow: column nowrap;
width: 100%;
flex: 0 0 auto;
@media screen and (max-width: $break-small) {
padding: 1rem;
z-index: $mobile-header-z-index;
}
@media screen and (min-width: $break-large) {
height: 75px;
justify-content: center;
}
&__metafox-logo {
&--icon {
height: 32px;
@media screen and (min-width: $break-large) {
display: none;
}
}
&--horizontal {
@media screen and (max-width: $break-small) {
display: none;
}
}
}
&__contents {
display: flex;
flex-flow: row nowrap;
width: 100%;
justify-content: space-between;
@media screen and (max-width: $break-small) {
height: 100%;
}
@media screen and (min-width: $break-large) {
width: 85vw;
}
@media screen and (min-width: 769px) {
width: 90vw;
}
@media screen and (min-width: 1281px) {
width: 62vw;
}
}
&__logo-container {
display: flex;
flex-direction: row;
align-items: center;
flex: 0 0 auto;
margin-right: 1rem;
}
}

View File

@ -0,0 +1,34 @@
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import MetaFoxLogo from '../../../components/ui/metafox-logo';
import Dropdown from '../../../components/ui/dropdown';
import { getCurrentLocale } from '../../../ducks/metamask/metamask';
import { updateCurrentLocale } from '../../../store/actions';
import locales from '../../../../app/_locales/index.json';
export default function OnboardingAppHeader() {
const dispatch = useDispatch();
const currentLocale = useSelector(getCurrentLocale);
const localeOptions = locales.map((locale) => {
return {
name: locale.name,
value: locale.code,
};
});
return (
<div className="onboarding-app-header">
<div className="onboarding-app-header__contents">
<MetaFoxLogo unsetIconHeight isOnboarding />
<Dropdown
id="select-locale"
options={localeOptions}
selectedOption={currentLocale}
onChange={async (newLocale) =>
dispatch(updateCurrentLocale(newLocale))
}
/>
</div>
</div>
);
}

View File

@ -39,7 +39,7 @@ export default function OnboardingFlow() {
// For ONBOARDING_V2 dev purposes,
// Remove when ONBOARDING_V2 dev complete
if (process.env.ONBOARDING_V2) {
history.push(ONBOARDING_CREATE_PASSWORD_ROUTE);
history.push(ONBOARDING_REVIEW_SRP_ROUTE);
return;
}

View File

@ -1,4 +1,6 @@
.recovery-phrase {
max-width: 600px;
&__tips {
flex-direction: column;
@ -10,7 +12,7 @@
&__chips {
display: grid;
grid-template-columns: 160px 160px 160px;
grid-template-columns: 190px 190px 190px;
justify-items: center;
align-items: center;
row-gap: 16px;

View File

@ -23,7 +23,7 @@ export default function RecoveryPhrase({ seedPhrase }) {
const [copied, handleCopy] = useCopyToClipboard();
const [seedPhraseRevealed, setSeedPhraseRevealed] = useState(false);
return (
<div>
<div className="recovery-phrase">
<ProgressBar stage="SEED_PHRASE_REVIEW" />
<Box
justifyContent={JUSTIFY_CONTENT.CENTER}

View File

@ -31,6 +31,7 @@ import AppHeader from '../../components/app/app-header';
import UnlockPage from '../unlock-page';
import Alerts from '../../components/app/alerts';
import Asset from '../asset';
import OnboardingAppHeader from '../onboarding-flow/onboarding-app-header/onboarding-app-header';
import {
IMPORT_TOKEN_ROUTE,
@ -265,6 +266,17 @@ export default class Routes extends Component {
return isHandlingPermissionsRequest || isHandlingAddEthereumChainRequest;
}
showOnboardingHeader() {
const { location } = this.props;
return Boolean(
matchPath(location.pathname, {
path: ONBOARDING_ROUTE,
exact: false,
}),
);
}
render() {
const {
isLoading,
@ -319,6 +331,9 @@ export default class Routes extends Component {
}
/>
)}
{process.env.ONBOARDING_V2 && this.showOnboardingHeader() && (
<OnboardingAppHeader />
)}
<NetworkDropdown
provider={provider}
frequentRpcListDetail={frequentRpcListDetail}