mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
parent
68259ee3e2
commit
3985a65e36
@ -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>
|
||||
|
@ -1,5 +1,6 @@
|
||||
@import 'recovery-phrase/index';
|
||||
@import 'new-account/index';
|
||||
@import 'onboarding-app-header/index';
|
||||
|
||||
.onboarding-flow {
|
||||
width: 100%;
|
||||
|
67
ui/pages/onboarding-flow/onboarding-app-header/index.scss
Normal file
67
ui/pages/onboarding-flow/onboarding-app-header/index.scss
Normal 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;
|
||||
}
|
||||
}
|
@ -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>
|
||||
);
|
||||
}
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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}
|
||||
|
@ -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}
|
||||
|
Loading…
Reference in New Issue
Block a user