Landing folder structure refactored

.babelrc

@@ -25,7 +25,8 @@
                 "reducers": "./src/js/reducers",
                 "support": "./src/js/support",
                 "utils": "./src/js/utils",
-                "services": "./src/js/services"
+                "services": "./src/js/services",
+                "views": "./src/js/views"
             }
         }],
         "babel-plugin-styled-components"

jsconfig.json

@@ -11,6 +11,7 @@
             "reducers/*": ["./src/js/reducers/*"],
             "utils/*": ["./src/js/utils/*"],
             "services/*": ["./src/js/services/*"],
+            "views/*": ["./src/js/views/*"],
         }
     }
 }

src/js/components/wallet/aside/AsideDivider.js

@@ -8,14 +8,10 @@ import { FONT_SIZE } from 'config/variables';
 const Wrapper = styled.div`
     display: flex;
     justify-content: space-between;
-
     padding: 8px 28px 8px 24px;
-
     font-size: ${FONT_SIZE.SMALLER};
     color: ${colors.TEXT_SECONDARY};
-
     background: ${colors.GRAY_LIGHT};
-
     border-top: 1px solid ${colors.DIVIDER};
     border-bottom: 1px solid ${colors.DIVIDER};
 `;

src/js/components/wallet/aside/AsideRow.js

@@ -21,7 +21,7 @@ const Wrapper = styled.div`
     transition: background-color ${TRANSITION_TIME.BASE}, color ${TRANSITION_TIME.BASE};
 `;
 
-const AsideRow = ({ children, column }) => (
+const AsideRow = ({ children, column = false }) => (
     <Wrapper
         column={column}
     >{children}
@@ -32,8 +32,4 @@ AsideRow.propTypes = {
     column: PropTypes.bool,
 };
 
-AsideRow.defaultProps = {
-    column: false,
-}
-
 export default AsideRow;

src/js/components/wallet/aside/AsideRowAccount.js

@@ -3,10 +3,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { NavLink } from 'react-router-dom';
 
-import AsideRow from './AsideRow';
 
 import colors from 'config/colors';
 import { FONT_SIZE, BORDER_WIDTH } from 'config/variables';
+import AsideRow from './AsideRow';
 
 const Wrapper = styled.div`
     height: 64px;
@@ -32,7 +32,9 @@ const Wrapper = styled.div`
     `}
 `;
 
-const AsideRowAccount = ({ accountIndex, balance, url, selected }) => (
+const AsideRowAccount = ({
+    accountIndex, balance, url, selected,
+}) => (
     <NavLink to={url}>
         <Wrapper
             to={url}

src/js/components/wallet/aside/CoinSelection.js

@@ -4,12 +4,12 @@ import styled from 'styled-components';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 
+import type { TrezorDevice } from 'flowtype';
 import AsideDivider from './AsideDivider';
 import AsideRowCoinWallet from './AsideRowCoinWallet';
 import AsideRowCoinExternal from './AsideRowCoinExternal';
 import AsideSection from './AsideSection';
 
-import type { TrezorDevice } from 'flowtype';
 import type { Props } from './index';
 
 
@@ -33,7 +33,7 @@ const CoinSelection = (props: Props): React$Element<string> => {
         let coinImg = item.network;
         if (item.network === 'ethereum') {
             coinImg = 'eth';
-        } else if (item.network === 'ethereum-classic' ) {
+        } else if (item.network === 'ethereum-classic') {
             coinImg = 'etc';
         }
 
@@ -53,8 +53,8 @@ const CoinSelection = (props: Props): React$Element<string> => {
         <AsideSection>
             { walletCoins }
             <AsideDivider
-                textLeft={'Other coins'}
-                textRight={'(You will be redirected)'}
+                textLeft="Other coins"
+                textRight="(You will be redirected)"
             />
 
             <AsideRowCoinExternal
@@ -62,42 +62,42 @@ const CoinSelection = (props: Props): React$Element<string> => {
                     img: 'btc',
                     name: 'Bitcoin',
                 }}
-                url={'https://wallet.trezor.io/#/coin/ltc'}
+                url="https://wallet.trezor.io/#/coin/ltc"
             />
             <AsideRowCoinExternal
                 coin={{
                     img: 'ltc',
                     name: 'Litecoin',
                 }}
-                url={'https://wallet.trezor.io/#/coin/ltc'}
+                url="https://wallet.trezor.io/#/coin/ltc"
             />
             <AsideRowCoinExternal
                 coin={{
                     img: 'bch',
                     name: 'Bitcoin Cash',
                 }}
-                url={'https://wallet.trezor.io/#/coin/bch'}
+                url="https://wallet.trezor.io/#/coin/bch"
             />
             <AsideRowCoinExternal
                 coin={{
                     img: 'btg',
                     name: 'Bitcoin Gold',
                 }}
-                url={'https://wallet.trezor.io/#/coin/btg'}
+                url="https://wallet.trezor.io/#/coin/btg"
             />
             <AsideRowCoinExternal
                 coin={{
                     img: 'Dash',
                     name: 'Dash',
                 }}
-                url={'https://wallet.trezor.io/#/coin/dash'}
+                url="https://wallet.trezor.io/#/coin/dash"
             />
             <AsideRowCoinExternal
                 coin={{
                     img: 'zec',
                     name: 'Zcash',
                 }}
-                url={'https://wallet.trezor.io/#/coin/zec'}
+                url="https://wallet.trezor.io/#/coin/zec"
             />
         </AsideSection>
     );

src/js/components/wallet/index.js

@@ -1,6 +1,5 @@
 /* @flow */
 
-
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { Route, withRouter } from 'react-router-dom';
@@ -16,7 +15,6 @@ import ModalContainer from '../modal';
 import Notifications from '../common/Notification';
 import Log from '../common/Log';
 
-
 type WalletContainerProps = {
     wallet: $ElementType<State, 'wallet'>,
     children?: React.Node

src/js/config/variables.js

@@ -6,11 +6,11 @@ export const FONT_SIZE = {
 
 export const TRANSITION_TIME = {
     BASE: '0.3s',
-}
+};
 
 export const ICON_SIZE = {
     BASE: '20px',
-}
+};
 
 export const BORDER_WIDTH = {
     SELECTED: '3px',

src/js/index.js

@@ -4,7 +4,7 @@ import { render } from 'react-dom';
 import baseStyles from 'support/BaseStyles';
 import { onBeforeUnload } from 'actions/WalletActions';
 import 'styles/index.less';
-import App from './router';
+import App from 'views/index';
 import store from './store';
 
 const root: ?HTMLElement = document.getElementById('root');

src/js/views/Landing/Container.js

@@ -1,14 +1,12 @@
 /* @flow */
 
-
 import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
-
 import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
 import type { State, Dispatch } from 'flowtype';
-import LandingPage from './LandingPage';
+import LandingPage from './index';
 
 export type StateProps = {
     localStorage: $ElementType<State, 'localStorage'>,

src/js/views/Landing/components/Preloader.js

@@ -2,7 +2,7 @@
 
 
 import React from 'react';
-import Loader from '../common/LoaderCircle';
+import Loader from 'components/common/LoaderCircle';
 
 export default (props: {}): React$Element<string> => (
     <section className="landing">

src/js/views/Landing/index.js

@@ -1,17 +1,17 @@
 /* @flow */
 
-
 import React from 'react';
 import { H2 } from 'components/common/Heading';
-import Preloader from './Preloader';
-import ConnectDevice from './ConnectDevice';
-import InstallBridge from './InstallBridge';
-import LocalStorageError from './LocalStorageError';
-import TrezorConnectError from './TrezorConnectError';
-import Header from '../common/Header';
-import Footer from '../common/Footer';
-import Log from '../common/Log';
-import Notifications, { Notification } from '../common/Notification';
+import Header from 'components/common/Header';
+import Footer from 'components/common/Footer';
+import Log from 'components/common/Log';
+import Notifications, { Notification } from 'components/common/Notification';
+
+import Preloader from './components/Preloader';
+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';
 

src/js/views/index.js

@@ -6,7 +6,6 @@ import { ConnectedRouter } from 'react-router-redux';
 
 import ErrorBoundary from 'support/ErrorBoundary';
 
-import LandingPageContainer from 'components/landing';
 import WalletContainer from 'components/wallet';
 import BootloaderContainer from 'components/wallet/pages/Bootloader';
 import InitializeContainer from 'components/wallet/pages/Initialize';
@@ -20,15 +19,16 @@ import ReceiveContainer from 'components/wallet/account/receive';
 import SignVerifyContainer from 'components/wallet/account/sign/SignVerify';
 import DeviceSettingsContainer from 'components/wallet/pages/DeviceSettings';
 import WalletSettingsContainer from 'components/wallet/pages/WalletSettings';
+import LandingContainer from 'views/Landing/Container';
 import store, { history } from '../store';
 
 const App = () => (
     <Provider store={store}>
         <ConnectedRouter history={history}>
             <Switch>
-                <Route exact path="/" component={LandingPageContainer} />
-                <Route exact path="/bridge" component={LandingPageContainer} />
-                <Route exact path="/import" component={LandingPageContainer} />
+                <Route exact path="/" component={LandingContainer} />
+                <Route exact path="/bridge" component={LandingContainer} />
+                <Route exact path="/import" component={LandingContainer} />
                 <Route>
                     <WalletContainer>
                         <ErrorBoundary>