renamed components

src/support/routes.js

@@ -23,7 +23,7 @@ export const routes: Array<Route> = [
         fields: ['import'],
     },
     {
-        name: 'wallet-setting',
+        name: 'wallet-settings',
         pattern: '/settings',
         fields: ['settings'],
     },

src/views/Landing/components/ConnectDevice/index.js

@@ -5,15 +5,62 @@ import styled, { keyframes } from 'styled-components';
 import TrezorConnect from 'trezor-connect';
 import P from 'components/Paragraph';
 import Button from 'components/Button';
+import { H2 } from 'components/Heading';
 import { PULSATE } from 'config/animations';
 import colors from 'config/colors';
 import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
+import CaseImage from 'images/case.png';
+import Link from 'components/Link';
 
 type Props = {
     deviceLabel: string,
     showWebUsb: boolean,
     showDisconnect: boolean,
 };
+
+const Title = styled.div`
+    margin-top: 60px;
+`;
+
+const Wrapper = styled.div`
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 400px;
+    margin: 0 auto;
+    padding: 36px 0;
+`;
+
+const ConnectTrezorWrapper = styled.div`
+    position: relative;
+    top: 1px;
+    animation: ${PULSATE} 1.3s ease-out infinite;
+    color: ${colors.GREEN_PRIMARY};
+    font-size: ${FONT_SIZE.BASE};
+    font-weight: ${FONT_WEIGHT.BASE};
+`;
+
+const Image = styled.img`
+    width: 777px;
+    min-height: 500px;
+    margin: auto;
+    background-repeat: no-repeat;
+    background-position: center 0px;
+    background-size: contain;
+`;
+
+const Footer = styled.div`
+    margin-bottom: 32px;
+`;
+
+const FooterText = styled.span`
+    margin-right: 4px;
+`;
+
+const StyledLink = styled(Link)`
+    font-size: ${FONT_SIZE.BASE};
+`;
+
 class ConnectDevice extends PureComponent<Props> {
     componentDidMount() {
         if (this.props.showWebUsb) {
@@ -57,44 +104,59 @@ class ConnectDevice extends PureComponent<Props> {
     }
 
     render() {
-        const Wrapper = styled.div`
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-            width: 400px;
-            margin: 0 auto;
-            padding: 36px 0;
-        `;
-
-        const ConnectTrezorWrapper = styled.div`
-            position: relative;
-            top: 1px;
-            animation: ${PULSATE} 1.3s ease-out infinite;
-            color: ${colors.GREEN_PRIMARY};
-            font-size: ${FONT_SIZE.BASE};
-            font-weight: ${FONT_WEIGHT.BASE};
-        `;
-
         return (
-            <Wrapper>
-                <ConnectTrezorWrapper>
-                    {this.props.showDisconnect && `Unplug "${this.props.deviceLabel}" device`}
-                    {!this.props.showDisconnect && (
+            <div>
+                <Title>
+                    <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>
+                </Title>
+
+                <Wrapper>
+                    <ConnectTrezorWrapper>
+                        {this.props.showDisconnect && `Unplug "${this.props.deviceLabel}" device`}
+                        {!this.props.showDisconnect && (
+                            <React.Fragment>
+                                {this.getTrezorDeviceImage()}
+                                Connect TREZOR
+                            </React.Fragment>
+                        )}
+                    </ConnectTrezorWrapper>
+                    {this.props.showWebUsb && !this.props.showDisconnect && (
                         <React.Fragment>
-                            {this.getTrezorDeviceImage()}
-                            Connect TREZOR
+                            <P>and</P>
+                            <Button isWebUsb>
+                                Check for devices
+                            </Button>
                         </React.Fragment>
                     )}
-                </ConnectTrezorWrapper>
-                {this.props.showWebUsb && !this.props.showDisconnect && (
-                    <React.Fragment>
-                        <P>and</P>
-                        <Button isWebUsb>
-                            Check for devices
-                        </Button>
-                    </React.Fragment>
-                )}
-            </Wrapper>
+                </Wrapper>
+
+                <Image src={CaseImage} />
+
+                <Footer>
+                    {this.props.showWebUsb && (
+                        <P>
+                            <FooterText>Device not recognized?</FooterText>
+                            <StyledLink
+                                to="/bridge"
+                                isGreen
+                            >Try installing the TREZOR Bridge.
+                            </StyledLink>
+                        </P>
+                    )}
+                    <P>
+                        <FooterText>
+                            Don&apos;t have TREZOR?
+                        </FooterText>
+                        <StyledLink
+                            href="https://trezor.io/"
+                            isGreen
+                        >Get one
+                        </StyledLink>
+                    </P>
+                </Footer>
+            </div>
         );
     }
 }

src/views/Landing/components/InitializationError/index.js

@@ -9,11 +9,11 @@ const Wrapper = styled.div`
     width: 100%;
 `;
 
-const InitializationError = (props: { error: ?string }) => (
+const InitializationError = (props: { error: string }) => (
     <Wrapper>
         <Notification
             title="Initialization error"
-            message={props.error || ''}
+            message={props.error}
             type="error"
             cancelable={false}
         />

src/views/Landing/components/LandingWrapper/index.js

@@ -0,0 +1,73 @@
+/* @flow */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Header from 'components/Header';
+import Footer from 'components/Footer';
+import Log from 'components/Log';
+import Loader from 'components/Loader';
+import ContextNotifications from 'components/notifications/Context';
+import colors from 'config/colors';
+
+import InitializationError from '../InitializationError';
+
+type Props = {
+    loading?: boolean;
+    error?: ?string;
+    children?: React.Node;
+}
+
+const Wrapper = styled.div`
+    min-height: 100%;
+    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;
+    justify-content: center;
+`;
+
+const LandingLoader = styled(Loader)`
+    margin: auto;
+`;
+
+const LandingWrapper = (props: Props) => (
+    <Wrapper>
+        {props.loading && <LandingLoader text="Loading" size={100} />}
+        {!props.loading && (
+            <React.Fragment>
+                <Header />
+                <ContextNotifications />
+                {props.error && <InitializationError error={props.error} />}
+                <Log />
+                {!props.error && (
+                    <LandingContent>
+                        { props.children }
+                    </LandingContent>
+                )}
+                <Footer />
+            </React.Fragment>
+        )}
+    </Wrapper>
+);
+
+LandingWrapper.propTypes = {
+    loading: PropTypes.bool,
+    error: PropTypes.string,
+    children: PropTypes.node,
+};
+
+LandingWrapper.defaultProps = {
+    loading: false,
+    error: null,
+};
+
+export default LandingWrapper;

src/views/Landing/index.js

@@ -1,158 +0,0 @@
-/* @flow */
-import React from 'react';
-import CaseImage from 'images/case.png';
-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/Loader';
-import Notification from 'components/Notification';
-import ContextNotifications from 'components/notifications/Context';
-import colors from 'config/colors';
-import P from 'components/Paragraph';
-import { H2 } from 'components/Heading';
-import { isWebUSB } from 'utils/device';
-import { FONT_SIZE } from 'config/variables';
-
-import InitializationError from './components/InitializationError';
-import BrowserNotSupported from './components/BrowserNotSupported';
-import ConnectDevice from './components/ConnectDevice';
-import InstallBridge from './components/InstallBridge';
-
-import type { Props } from './Container';
-
-const LandingWrapper = styled.div`
-    min-height: 100%;
-    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;
-    justify-content: center;
-`;
-
-const LandingImage = styled.img`
-    width: 777px;
-    min-height: 500px;
-    margin: auto;
-    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;
-`;
-
-const StyledLink = styled(Link)`
-    font-size: ${FONT_SIZE.BASE};
-`;
-
-export default (props: Props) => {
-    const { devices } = props;
-    const { browserState, transport } = props.connect;
-    const localStorageError = props.localStorage.error;
-    const connectError = props.connect.error;
-
-    const bridgeRoute: boolean = props.router.location.state.hasOwnProperty('bridge');
-    const deviceLabel = props.wallet.disconnectRequest ? props.wallet.disconnectRequest.label : '';
-
-    const shouldShowInitializationError = connectError && !props.connect.initialized;
-    const shouldShowInstallBridge = props.connect.initialized && (connectError || bridgeRoute);
-    const shouldShowConnectDevice = props.wallet.ready && devices.length < 1;
-    const shouldShowDisconnectDevice = !!props.wallet.disconnectRequest;
-    const shouldShowUnsupportedBrowser = browserState.supported === false;
-
-    const isLoading = !shouldShowInitializationError && !shouldShowInstallBridge && !shouldShowConnectDevice && !shouldShowUnsupportedBrowser && !localStorageError;
-
-    return (
-        <LandingWrapper>
-            {isLoading && <LandingLoader text="Loading" size={100} />}
-            {!isLoading && (
-                <React.Fragment>
-                    <Header />
-                    {localStorageError && (
-                        <Notification
-                            title="Initialization error"
-                            message="Config files are missing"
-                            type="error"
-                        />
-                    )}
-                    <ContextNotifications />
-                    {shouldShowInitializationError && <InitializationError error={connectError} />}
-                    <Log />
-                    <LandingContent>
-                        {shouldShowUnsupportedBrowser && <BrowserNotSupported />}
-                        {shouldShowInstallBridge && <InstallBridge selectFirstAvailableDevice={props.selectFirstAvailableDevice} transport={transport} />}
-
-                        {!shouldShowInstallBridge && (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={isWebUSB(transport)}
-                                    showDisconnect={shouldShowDisconnectDevice}
-                                />
-
-                                <LandingImage src={CaseImage} />
-
-                                {shouldShowConnectDevice && (
-                                    <LandingFooterWrapper>
-                                        {isWebUSB(transport) && (
-                                            <P>
-                                                <LandingFooterTextWrapper>Device not recognized?</LandingFooterTextWrapper>
-                                                <StyledLink
-                                                    to="/bridge"
-                                                    isGreen
-                                                >Try installing the TREZOR Bridge.
-                                                </StyledLink>
-                                            </P>
-                                        )}
-                                        <P>
-                                            <LandingFooterTextWrapper>
-                                                Don&apos;t have TREZOR?
-                                            </LandingFooterTextWrapper>
-                                            <StyledLink
-                                                href="https://trezor.io/"
-                                                isGreen
-                                            >Get one
-                                            </StyledLink>
-                                        </P>
-                                    </LandingFooterWrapper>
-                                )}
-                            </div>
-                        )}
-                    </LandingContent>
-
-                    <Footer />
-                </React.Fragment>
-            )}
-        </LandingWrapper>
-    );
-};

src/views/Landing/views/Import/Container.js

@@ -1,21 +1,16 @@
 /* @flow */
+import * as React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import * as RouterActions from 'actions/RouterActions';
 
 import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
 import type { State, Dispatch } from 'flowtype';
-import LandingPage from './index';
-
+import ImportView from './index';
 
 export type StateProps = {
-    localStorage: $ElementType<State, 'localStorage'>,
-    modal: $ElementType<State, 'modal'>,
-    wallet: $ElementType<State, 'wallet'>,
-    connect: $ElementType<State, 'connect'>,
-    router: $ElementType<State, 'router'>,
-    wallet: $ElementType<State, 'wallet'>,
-    devices: $ElementType<State, 'devices'>,
+    transport: $ElementType<$ElementType<State, 'connect'>, 'transport'>,
+    children?: React.Node,
 }
 
 type DispatchProps = {
@@ -29,16 +24,11 @@ type OwnProps = {
 export type Props = StateProps & DispatchProps;
 
 const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State): StateProps => ({
-    localStorage: state.localStorage,
-    modal: state.modal,
-    wallet: state.wallet,
-    connect: state.connect,
-    router: state.router,
-    devices: state.devices,
+    transport: state.connect.transport,
 });
 
 const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => ({
     selectFirstAvailableDevice: bindActionCreators(RouterActions.selectFirstAvailableDevice, dispatch),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(LandingPage);
+export default connect(mapStateToProps, mapDispatchToProps)(ImportView);

src/views/Landing/views/Import/index.js

@@ -0,0 +1,40 @@
+/* @flow */
+
+import React from 'react';
+import styled from 'styled-components';
+
+import colors from 'config/colors';
+import icons from 'config/icons';
+
+import { H2 } from 'components/Heading';
+import Icon from 'components/Icon';
+import Link from 'components/Link';
+import Button from 'components/Button';
+import LandingWrapper from 'views/Landing/components/LandingWrapper';
+
+const Wrapper = styled.div`
+    min-width: 720px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+`;
+
+const Import = () => (
+    <LandingWrapper>
+        <Wrapper>
+            <Icon
+                size={60}
+                color={colors.WARNING_PRIMARY}
+                icon={icons.WARNING}
+            />
+            <H2>Import tool is under construction</H2>
+            <Link to="/">
+                <Button>Take me back</Button>
+            </Link>
+        </Wrapper>
+    </LandingWrapper>
+);
+
+export default Import;

src/views/Landing/views/InstallBridge/Container.js

@@ -0,0 +1,34 @@
+/* @flow */
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import * as RouterActions from 'actions/RouterActions';
+
+import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
+import type { State, Dispatch } from 'flowtype';
+import InstallBridge from './index';
+
+export type StateProps = {
+    transport: $ElementType<$ElementType<State, 'connect'>, 'transport'>,
+    children?: React.Node,
+}
+
+type DispatchProps = {
+    selectFirstAvailableDevice: typeof RouterActions.selectFirstAvailableDevice,
+}
+
+type OwnProps = {
+
+}
+
+export type Props = StateProps & DispatchProps;
+
+const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State): StateProps => ({
+    transport: state.connect.transport,
+});
+
+const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => ({
+    selectFirstAvailableDevice: bindActionCreators(RouterActions.selectFirstAvailableDevice, dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(InstallBridge);

src/views/Landing/views/InstallBridge/index.js

@@ -8,10 +8,10 @@ import { Select } from 'components/Select';
 import Link from 'components/Link';
 import { H1 } from 'components/Heading';
 import Button from 'components/Button';
-import Loader from 'components/Loader';
 import P from 'components/Paragraph';
 import Icon from 'components/Icon';
 import ICONS from 'config/icons';
+import LandingWrapper from 'views/Landing/components/LandingWrapper';
 import * as RouterActions from 'actions/RouterActions';
 
 import type { State as TrezorConnectState } from 'reducers/TrezorConnectReducer';
@@ -148,64 +148,66 @@ class InstallBridge extends PureComponent<Props, State> {
     render() {
         const { target } = this.state;
         if (!target) {
-            return <Loader text="Loading" size={100} />;
+            return <LandingWrapper />;
         }
         return (
-            <Wrapper>
-                <Top>
-                    <TitleHeader>TREZOR Bridge<Version>{this.state.currentVersion}</Version></TitleHeader>
-                    <P>New communication tool to facilitate the connection between your TREZOR and your internet browser.</P>
-                    <Download>
-                        <SelectWrapper
-                            isSearchable={false}
-                            isClearable={false}
-                            value={target}
-                            onChange={v => this.onChange(v)}
-                            options={this.state.installers}
-                        />
-                        <Link href={`${this.state.uri}${target.value}`}>
-                            <DownloadBridgeButton>
-                                <Icon
-                                    icon={ICONS.DOWNLOAD}
-                                    color={colors.WHITE}
-                                    size={30}
-                                />
-                            Download latest Bridge {this.state.latestVersion}
-                            </DownloadBridgeButton>
-                        </Link>
-                    </Download>
-                    <Ol>
-                        {this.props.transport.bridge.changelog.map(entry => (
-                            <Li key={entry}>{entry}</Li>
-                        ))}
-                    </Ol>
-                    <P isSmaller>
-                        <LearnMoreText>Learn more about latest versions in</LearnMoreText>
-                        <Link
-                            href="https://github.com/trezor/trezord-go/blob/master/CHANGELOG.md"
-                            isGreen
-                        >Changelog
-                        </Link>
-                    </P>
-                    <P>
-                        {target.signature && (
-                            <Link
-                                href={this.state.uri + target.signature}
-                                isGreen
-                            >Check PGP signature
+            <LandingWrapper loading={!target}>
+                <Wrapper>
+                    <Top>
+                        <TitleHeader>TREZOR Bridge<Version>{this.state.currentVersion}</Version></TitleHeader>
+                        <P>New communication tool to facilitate the connection between your TREZOR and your internet browser.</P>
+                        <Download>
+                            <SelectWrapper
+                                isSearchable={false}
+                                isClearable={false}
+                                value={target}
+                                onChange={v => this.onChange(v)}
+                                options={this.state.installers}
+                            />
+                            <Link href={`${this.state.uri}${target.value}`}>
+                                <DownloadBridgeButton>
+                                    <Icon
+                                        icon={ICONS.DOWNLOAD}
+                                        color={colors.WHITE}
+                                        size={30}
+                                    />
+                                Download latest Bridge {this.state.latestVersion}
+                                </DownloadBridgeButton>
+                            </Link>
+                        </Download>
+                        <Ol>
+                            {this.props.transport.bridge.changelog.map(entry => (
+                                <Li key={entry}>{entry}</Li>
+                            ))}
+                        </Ol>
+                        <P isSmaller>
+                            <LearnMoreText>Learn more about latest versions in</LearnMoreText>
+                            <Link
+                                href="https://github.com/trezor/trezord-go/blob/master/CHANGELOG.md"
+                                isGreen
+                            >Changelog
                             </Link>
-                        )}
-                    </P>
-                </Top>
-                <Bottom>
-                    {this.props.transport.type && (
-                        <P>
-                            No, i dont want to upgrade Bridge now<br />
-                            Take me <GoBack onClick={() => this.props.selectFirstAvailableDevice()}>back to the wallet</GoBack>
                         </P>
-                    )}
-                </Bottom>
-            </Wrapper>
+                        <P>
+                            {target.signature && (
+                                <Link
+                                    href={this.state.uri + target.signature}
+                                    isGreen
+                                >Check PGP signature
+                                </Link>
+                            )}
+                        </P>
+                    </Top>
+                    <Bottom>
+                        {this.props.transport.type && (
+                            <P>
+                                No, i dont want to upgrade Bridge now<br />
+                                Take me <GoBack onClick={() => this.props.selectFirstAvailableDevice()}>back to the wallet</GoBack>
+                            </P>
+                        )}
+                    </Bottom>
+                </Wrapper>
+            </LandingWrapper>
         );
     }
 }

src/views/Landing/views/Root/Container.js

@@ -0,0 +1,34 @@
+/* @flow */
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+import type { MapStateToProps } from 'react-redux';
+import type { State } from 'flowtype';
+import RootView from './index';
+
+export type StateProps = {
+    localStorage: $ElementType<State, 'localStorage'>,
+    modal: $ElementType<State, 'modal'>,
+    wallet: $ElementType<State, 'wallet'>,
+    connect: $ElementType<State, 'connect'>,
+    router: $ElementType<State, 'router'>,
+    wallet: $ElementType<State, 'wallet'>,
+    devices: $ElementType<State, 'devices'>,
+    children?: React.Node,
+}
+
+type DispatchProps = {};
+type OwnProps = {};
+
+export type Props = StateProps & DispatchProps;
+
+const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State): StateProps => ({
+    localStorage: state.localStorage,
+    modal: state.modal,
+    wallet: state.wallet,
+    connect: state.connect,
+    router: state.router,
+    devices: state.devices,
+});
+
+export default connect(mapStateToProps, null)(RootView);

src/views/Landing/views/Root/index.js

@@ -0,0 +1,45 @@
+/* @flow */
+
+import React from 'react';
+import { isWebUSB } from 'utils/device';
+
+import LandingWrapper from 'views/Landing/components/LandingWrapper';
+import BrowserNotSupported from 'views/Landing/components/BrowserNotSupported';
+import ConnectDevice from 'views/Landing/components/ConnectDevice';
+import InstallBridge from 'views/Landing/views/InstallBridge/Container';
+
+import type { Props } from './Container';
+
+const Root = (props: Props) => {
+    const { initialized, browserState, transport } = props.connect;
+    const { disconnectRequest } = props.wallet;
+    const localStorageError = props.localStorage.error;
+    const connectError = props.connect.error;
+
+    const error = !initialized ? (localStorageError || connectError) : null;
+    const shouldShowUnsupportedBrowser = browserState.supported === false;
+    const shouldShowInstallBridge = initialized && connectError;
+    const shouldShowConnectDevice = props.wallet.ready && props.devices.length < 1;
+    const shouldShowDisconnectDevice = !!disconnectRequest;
+    const isLoading = !error && !shouldShowUnsupportedBrowser && !shouldShowConnectDevice && !shouldShowUnsupportedBrowser;
+
+    const deviceLabel = disconnectRequest ? disconnectRequest.label : '';
+    // corner case: display InstallBridge view on "/" route
+    // it has it's own Container and props
+    if (shouldShowInstallBridge) return <InstallBridge />;
+
+    return (
+        <LandingWrapper loading={isLoading} error={error}>
+            {shouldShowUnsupportedBrowser && <BrowserNotSupported />}
+            {(shouldShowConnectDevice || shouldShowDisconnectDevice) && (
+                <ConnectDevice
+                    deviceLabel={deviceLabel}
+                    showWebUsb={isWebUSB(transport)}
+                    showDisconnect={shouldShowDisconnectDevice}
+                />
+            )}
+        </LandingWrapper>
+    );
+};
+
+export default Root;

src/views/index.js

@@ -7,7 +7,11 @@ import { ConnectedRouter } from 'react-router-redux';
 // general
 import ErrorBoundary from 'support/ErrorBoundary';
 import { getPattern } from 'support/routes';
-import LandingContainer from 'views/Landing/Container';
+
+// landing views
+import RootView from 'views/Landing/views/Root/Container';
+import InstallBridge from 'views/Landing/views/InstallBridge/Container';
+import ImportView from 'views/Landing/views/Import/Container';
 
 // wallet views
 import WalletContainer from 'views/Wallet';
@@ -31,13 +35,13 @@ const App = () => (
     <Provider store={store}>
         <ConnectedRouter history={history}>
             <Switch>
-                <Route exact path={getPattern('landing-home')} component={LandingContainer} />
-                <Route exact path={getPattern('landing-bridge')} component={LandingContainer} />
-                <Route exact path={getPattern('landing-import')} component={LandingContainer} />
+                <Route exact path={getPattern('landing-home')} component={RootView} />
+                <Route exact path={getPattern('landing-bridge')} component={InstallBridge} />
+                <Route exact path={getPattern('landing-import')} component={ImportView} />
                 <Route>
                     <ErrorBoundary>
                         <WalletContainer>
-                            <Route exact path={getPattern('wallet-setting')} component={WalletSettings} />
+                            <Route exact path={getPattern('wallet-settings')} component={WalletSettings} />
                             <Route exact path={getPattern('wallet-dashboard')} component={WalletDashboard} />
                             <Route exact path={getPattern('wallet-acquire')} component={WalletAcquire} />
                             <Route exact path={getPattern('wallet-unreadable')} component={WalletUnreadableDevice} />