arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-22 22:10:58 +00:00
Code Issues Releases Wiki Activity

Refactorize "Landing" view

Browse Source
This commit is contained in:
Vasek Mlejnsky 2018-08-23 16:01:34 +02:00
parent 991aeb8831
commit a5739c32e1
1 changed files with 133 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
src/js/views/Landing/index.js
View File

@ -1,81 +1,157 @@
/* @flow */
import React from 'react';
import { H2 } from 'components/Heading';
import styled from 'styled-components';
import Header from 'components/Header';
import Footer from 'components/Footer';
import Log from 'components/Log';
import Link from 'components/Link';
import Loader from 'components/LoaderCircle';
import Notifications, { Notification } from 'components/Notification';
import colors from 'config/colors';
import P from 'components/Paragraph';
import { H2 } from 'components/Heading';
import Preloader from './components/Preloader';
import BrowserNotSupported from './components/BrowserNotSupported';
import ConnectDevice from './components/ConnectDevice';
import InstallBridge from './components/InstallBridge';
import LocalStorageError from './components/LocalStorageError';
import TrezorConnectError from './components/TrezorConnectError';
import type { Props } from './index';
import type { Props } from './Container';
const BrowserNotSupported = (props: {}): React$Element<string> => (
<main>
<H2>Your browser is not supported</H2>
<p>Please choose one of the supported browsers</p>
<div className="row">
<div className="chrome">
<p>Google Chrome</p>
<a className="button" href="https://www.google.com/chrome/" target="_blank" rel="noreferrer noopener">Get Chrome</a>
</div>
<div className="firefox">
<p>Mozilla Firefox</p>
<a className="button" href="https://www.mozilla.org/en-US/firefox/new/" target="_blank" rel="noreferrer noopener">Get Firefox</a>
</div>
</div>
</main>
);
const LandingWrapper = styled.div`
min-height: 100vh;
min-width: 720px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: ${colors.LANDING};
`;
const LandingContent = styled.div`
flex: 1;
display: flex;
align-items: center;
justify-content: center;
`;
const LandingImage = styled.div`
width: 777px;
min-height: 500px;
margin: auto;
background-image: url('../images/case.png');
background-repeat: no-repeat;
background-position: center 0px;
background-size: contain;
`;
const TitleWrapper = styled.div`
margin-top: 60px;
`;
const LandingFooterWrapper = styled.div`
margin-bottom: 32px;
`;
const LandingFooterTextWrapper = styled.span`
margin-right: 4px;
`;
const LandingLoader = styled(Loader)`
margin: auto;
`;
export default (props: Props) => {
const { web3 } = props;
const { devices } = props;
const { browserState, transport } = props.connect;
const localStorageError = props.localStorage.error;
const connectError = props.connect.error;
let notification = null;
let body = null;
let css: string = 'app landing';
const bridgeRoute: boolean = props.router.location.state.hasOwnProperty('bridge');
const deviceLabel = props.wallet.disconnectRequest ? props.wallet.disconnectRequest.label : '';
if (localStorageError) {
notification = (
const hasWebUsb = transport && transport.version.indexOf('webusb') >= 0;
const shouldShowInstallBridge = connectError || bridgeRoute;
const shouldShowConnectDevice = props.wallet.ready && devices.length < 1;
const shouldShowDisconnectDevice = !!props.wallet.disconnectRequest;
const shouldShowUnsupportedBrowser = browserState.supported === false;
const isLoading = !shouldShowInstallBridge && !shouldShowConnectDevice && !shouldShowUnsupportedBrowser && !localStorageError;
return (
<LandingWrapper>
{isLoading && <LandingLoader label="Loading" size="100" />}
{!isLoading && (
<React.Fragment>
<Header />
{localStorageError && (
<Notification
title="Initialization error"
message="Config files are missing"
className="error"
/>
);
css += ' config-error';
} else if (browserState.supported === false) {
css += ' browser-not-supported';
body = <BrowserNotSupported />;
} else if (connectError || bridgeRoute) {
css += ' install-bridge';
body = <InstallBridge browserState={browserState} />;
} else if (props.wallet.ready && devices.length < 1) {
css += ' connect-device';
body = <ConnectDevice transport={transport} disconnectRequest={props.wallet.disconnectRequest} />;
}
if (notification || body) {
return (
<div className={css}>
<Header />
{ notification }
)}
<Notifications />
<Log />
{ body }
<Footer />
<LandingContent>
{shouldShowUnsupportedBrowser && <BrowserNotSupported />}
{shouldShowInstallBridge && <InstallBridge browserState={browserState} />}
{(shouldShowConnectDevice || shouldShowDisconnectDevice) && (
<div>
<TitleWrapper>
<H2 claim>The private bank in your hands.</H2>
<P>TREZOR Wallet is an easy-to-use interface for your TREZOR.</P>
<P>TREZOR Wallet allows you to easily control your funds, manage your balance and initiate transfers.</P>
</TitleWrapper>
<ConnectDevice
deviceLabel={deviceLabel}
showWebUsb={hasWebUsb}
showDisconnect={shouldShowDisconnectDevice}
/>
<LandingImage />
{shouldShowConnectDevice && (
<LandingFooterWrapper>
{hasWebUsb && (
<P>
<LandingFooterTextWrapper>
Device not recognized?
</LandingFooterTextWrapper>
<Link
text="Try installing the TREZOR Bridge."
href="#/bridge"
isGreen
/>
</P>
)}
<P>
<LandingFooterTextWrapper>
Don't have TREZOR?
</LandingFooterTextWrapper>
<Link
text="Get one"
href="https://trezor.io/"
target="_blank"
rel="noreferrer noopener"
isGreen
/>
</P>
</LandingFooterWrapper>
)}
</div>
)}
</LandingContent>
<Footer />
</React.Fragment>
)}
</LandingWrapper>
);
}
return (<Preloader />);
};