restructuring "./src/js/components/wallet' directory

src/js/actions/LocalStorageActions.js

@@ -12,6 +12,9 @@ import { JSONRequest, httpRequest } from '../utils/networkUtils';
 import type { ThunkAction, AsyncAction, GetState, Dispatch, TrezorDevice } from '../flowtype';
 import type { Config, Coin, TokensCollection } from '../reducers/LocalStorageReducer';
 
+import AppConfigJSON from '~/data/appConfig.json';
+import Erc20AbiJSON from '~/data/ERC20Abi.json';
+
 export type StorageAction = {
     type: typeof STORAGE.READY,
     config: Config,
@@ -85,8 +88,8 @@ export function loadTokensFromJSON(): AsyncAction {
         if (typeof window.localStorage === 'undefined') return;
 
         try {
-            const config: Config = await httpRequest('data/appConfig.json', 'json');
+            const config: Config = await httpRequest(AppConfigJSON, 'json');
-            const ERC20Abi = await httpRequest('data/ERC20Abi.json', 'json');
+            const ERC20Abi = await httpRequest(Erc20AbiJSON, 'json');
 
             window.addEventListener('storage', event => {
                 dispatch( update(event) );

src/js/components/wallet/account/receive/Receive.js

@@ -2,37 +2,17 @@
 'use strict';
 
 import React, { Component } from 'react';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
 
 import Tooltip from 'rc-tooltip';
 import { QRCode } from 'react-qr-svg';
 
-import AbstractAccount from './account/AbstractAccount';
+import AbstractAccount from '../AbstractAccount';
-import { Notification } from '../common/Notification';
+import { Notification } from '../../../common/Notification';
-import { default as ReceiveActions } from '../../actions/ReceiveActions';
-import { default as AbstractAccountActions } from '../../actions/AbstractAccountActions';
 
-import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
+import type { AccountState } from '../AbstractAccount';
-import type { State, Dispatch } from '../../flowtype';
+import type { Props } from './index';
-import type { StateProps as BaseStateProps, DispatchProps as BaseDispatchProps } from './account/AbstractAccount';
 
-import type { AccountState } from './account/AbstractAccount';
+export default class Receive extends AbstractAccount<Props> {
-
-type OwnProps = { }
-
-type StateProps = BaseStateProps & {
-    receive: $ElementType<State, 'receive'>,
-}
-
-type DispatchProps = BaseDispatchProps & {
-    showAddress: typeof ReceiveActions.showAddress
-}
-
-type Props = StateProps & DispatchProps;
-
-
-class Receive extends AbstractAccount<Props> {
     render() {
         return super.render() || _render(this.props, this.state);
     }
@@ -58,7 +38,7 @@ const _render = (props: Props, state: AccountState): React$Element<string> => {
     let address = `${account.address.substring(0, 20)}...`;
     let className = 'address hidden';
     let button = (
-        <button disabled={ device.connected && !discovery.completed } onClick={ event => props.showAddress(account.addressPath) }>
+        <button disabled={ device.connected && !discovery.completed }>
             <span>Show full address</span>
         </button>
     );
@@ -87,7 +67,7 @@ const _render = (props: Props, state: AccountState): React$Element<string> => {
                 arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
                 overlay={ tooltip }
                 placement="bottomRight">
-                <button className="white" onClick={ event => props.showAddress(account.addressPath) }>
+                <button className="white">
                     <span></span>
                 </button>
             </Tooltip>
@@ -108,27 +88,4 @@ const _render = (props: Props, state: AccountState): React$Element<string> => {
             { qrCode }
         </section>
     );
-
+}
-
-}
-
-const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State, own: OwnProps): StateProps => {
-    return {
-        abstractAccount: state.abstractAccount,
-        devices: state.connect.devices,
-        accounts: state.accounts,
-        discovery: state.discovery,
-        receive: state.receive
-    };
-}
-
-const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => {
-    return {
-        abstractAccountActions: bindActionCreators(AbstractAccountActions, dispatch),
-        initAccount: bindActionCreators(ReceiveActions.init, dispatch), 
-        disposeAccount: bindActionCreators(ReceiveActions.dispose, dispatch),
-        showAddress: bindActionCreators(ReceiveActions.showAddress, dispatch),
-    };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Receive);

src/js/components/wallet/account/receive/index.js

@@ -0,0 +1,54 @@
+/* @flow */
+'use strict';
+
+import React, { Component, PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import { default as ReceiveActions } from '../../../../actions/ReceiveActions';
+import { default as AbstractAccountActions } from '../../../../actions/AbstractAccountActions';
+import * as TokenActions from '../../../../actions/TokenActions';
+import Receive from './Receive';
+
+import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
+import type { State, Dispatch } from '../../../../flowtype';
+import type { 
+    StateProps as BaseStateProps,
+    DispatchProps as BaseDispatchProps 
+} from '../AbstractAccount';
+
+import type { AccountState } from '../AbstractAccount';
+
+type OwnProps = { }
+
+type StateProps = BaseStateProps & {
+    receive: $ElementType<State, 'receive'>,
+}
+
+type DispatchProps = BaseDispatchProps & {
+    showAddress: typeof ReceiveActions.showAddress
+};
+
+export type Props = StateProps & DispatchProps;
+
+const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State, own: OwnProps): StateProps => {
+    return {
+        abstractAccount: state.abstractAccount,
+        devices: state.connect.devices,
+        accounts: state.accounts,
+        discovery: state.discovery,
+        receive: state.receive
+    };
+}
+
+const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => {
+    return {
+        abstractAccountActions: bindActionCreators(AbstractAccountActions, dispatch),
+
+        initAccount: bindActionCreators(ReceiveActions.init, dispatch), 
+        disposeAccount: bindActionCreators(ReceiveActions.dispose, dispatch),
+        showAddress: bindActionCreators(ReceiveActions.showAddress, dispatch),
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Receive);

src/js/components/wallet/account/send/AdvancedForm.js

@@ -3,7 +3,14 @@
 
 import React from 'react';
 import Tooltip from 'rc-tooltip';
-import type { Props } from './index';
+import type { Props as BaseProps } from './index';
+
+type Props = {
+    abstractAccount: $ElementType<BaseProps, 'abstractAccount'>,
+    sendForm: $ElementType<BaseProps, 'sendForm'>,
+    sendFormActions: $ElementType<BaseProps, 'sendFormActions'>,
+    children?: $ElementType<BaseProps, 'children'>,
+};
 
 const AdvancedForm = (props: Props) => {
 

src/js/components/wallet/account/send/PendingTransactions.js

@@ -5,14 +5,16 @@ import React from 'react';
 import ColorHash from 'color-hash';
 import ScaleText from 'react-scale-text';
 
-import { findAccountTokens } from '../../../reducers/TokensReducer';
+import { findAccountTokens } from '../../../../reducers/TokensReducer';
 
-import type { Props as ParentProps } from './index';
+import type { Coin } from '../../../../reducers/LocalStorageReducer';
-import type { Coin } from '../../../reducers/LocalStorageReducer';
+import type { Account } from '../../../../reducers/AccountsReducer';
-import type { Account } from '../../../reducers/AccountsReducer';
+import type { Token } from '../../../../reducers/TokensReducer';
-import type { Token } from '../../../reducers/TokensReducer';
+import type { Props as BaseProps } from './index';
 
-type Props = ParentProps & {
+type Props = {
+    pending: $ElementType<BaseProps, 'pending'>,
+    tokens: $ElementType<BaseProps, 'tokens'>,
     account: Account,
     selectedCoin: Coin
 }

src/js/components/wallet/account/send/SendForm.js

@@ -6,12 +6,12 @@ import Select from 'react-select';
 import AdvancedForm from './AdvancedForm';
 import PendingTransactions from './PendingTransactions';
 import { FeeSelectValue, FeeSelectOption } from './FeeSelect';
-import { Notification } from '../../common/Notification';
+import { Notification } from '../../../common/Notification';
-import AbstractAccount from '../account/AbstractAccount';
+import AbstractAccount from '../AbstractAccount';
-import { findAccountTokens } from '../../../reducers/TokensReducer';
+import { findAccountTokens } from '../../../../reducers/TokensReducer';
 
 import type { Props } from './index';
-import type { AccountState } from '../account/AbstractAccount';
+import type { AccountState } from '../AbstractAccount';
 
 export default class Send extends AbstractAccount<Props> {
     render() {
@@ -19,7 +19,6 @@ export default class Send extends AbstractAccount<Props> {
     }
 }
 
-
 const _render = (props: Props, state: AccountState): React$Element<string> => {
 
     const {
@@ -177,12 +176,16 @@ const _render = (props: Props, state: AccountState): React$Element<string> => {
                     options={ feeLevels } />
             </div>
 
-            <AdvancedForm { ...props}>
+            <AdvancedForm 
+                abstractAccount={ props.abstractAccount }
+                sendForm={ props.sendForm }
+                sendFormActions={ props.sendFormActions }>
                 <button disabled={ buttonDisabled } onClick={ event => onSend() }>{ buttonLabel }</button>
             </AdvancedForm>
 
             <PendingTransactions 
-                { ...props } 
+                pending={ props.pending }
+                tokens={ props.tokens }
                 account={ account }
                 selectedCoin={ selectedCoin } />
     

src/js/components/wallet/account/send/index.js

@@ -5,17 +5,17 @@ import * as React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
-import { default as SendFormActions } from '../../../actions/SendFormActions';
+import { default as SendFormActions } from '../../../../actions/SendFormActions';
-import { default as AbstractAccountActions } from '../../../actions/AbstractAccountActions';
+import { default as AbstractAccountActions } from '../../../../actions/AbstractAccountActions';
 import SendForm from './SendForm';
 
 import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
-import type { State, Dispatch } from '../../../flowtype';
+import type { State, Dispatch } from '../../../../flowtype';
-import type { StateProps as BaseStateProps, DispatchProps as BaseDispatchProps } from '../account/AbstractAccount';
+import type { StateProps as BaseStateProps, DispatchProps as BaseDispatchProps } from '../AbstractAccount';
 
 type OwnProps = { }
 
-type StateProps = BaseStateProps & {
+export type StateProps = BaseStateProps & {
     tokens: $ElementType<State, 'tokens'>,
     pending: $ElementType<State, 'pending'>,
     sendForm: $ElementType<State, 'sendForm'>,
@@ -24,7 +24,7 @@ type StateProps = BaseStateProps & {
     children?: React.Node;
 }
 
-type DispatchProps = BaseDispatchProps & {
+export type DispatchProps = BaseDispatchProps & {
     sendFormActions: typeof SendFormActions
 }
 

src/js/components/wallet/account/summary/Summary.js

@@ -6,20 +6,20 @@ import BigNumber from 'bignumber.js';
 import { Async } from 'react-select';
 import Tooltip from 'rc-tooltip';
 
-import { resolveAfter } from '../../../utils/promiseUtils';
+import { resolveAfter } from '../../../../utils/promiseUtils';
-import AbstractAccount from '../account/AbstractAccount';
+import AbstractAccount from '../AbstractAccount';
-import { Notification } from '../../common/Notification';
+import { Notification } from '../../../common/Notification';
 import SummaryDetails from './SummaryDetails.js';
 import SummaryTokens from './SummaryTokens.js';
 
 import type { Props } from './index';
-import type { AccountState } from '../account/AbstractAccount';
+import type { AccountState } from '../AbstractAccount';
 
-import type { TrezorDevice } from '../../../flowtype';
+import type { TrezorDevice } from '../../../../flowtype';
-import type { NetworkToken } from '../../../reducers/LocalStorageReducer';
+import type { NetworkToken } from '../../../../reducers/LocalStorageReducer';
-import type { Account } from '../../../reducers/AccountsReducer';
+import type { Account } from '../../../../reducers/AccountsReducer';
-import type { Discovery } from '../../../reducers/DiscoveryReducer';
+import type { Discovery } from '../../../../reducers/DiscoveryReducer';
-import { findAccountTokens } from '../../../reducers/TokensReducer';
+import { findAccountTokens } from '../../../../reducers/TokensReducer';
 
 export default class Summary extends AbstractAccount<Props> {
     render() {

src/js/components/wallet/account/summary/SummaryDetails.js

@@ -5,7 +5,7 @@ import React from 'react';
 import BigNumber from 'bignumber.js';
 
 import type { Props as BaseProps } from './index';
-import type { Coin } from '../../../reducers/LocalStorageReducer';
+import type { Coin } from '../../../../reducers/LocalStorageReducer';
 
 type Props = {
     // coin: $PropertyType<$ElementType<BaseProps, 'abstractAccount'>, 'coin'>,

src/js/components/wallet/account/summary/index.js

@@ -6,14 +6,13 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
 import Summary from './Summary';
-import { default as AbstractAccountActions } from '../../../actions/AbstractAccountActions';
+import { default as AbstractAccountActions } from '../../../../actions/AbstractAccountActions';
-import * as SummaryActions from '../../../actions/SummaryActions';
+import * as SummaryActions from '../../../../actions/SummaryActions';
-import * as TokenActions from '../../../actions/TokenActions';
+import * as TokenActions from '../../../../actions/TokenActions';
 
-import type { ActionCreators } from 'redux';
 import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
-import type { State, Dispatch } from '../../../flowtype';
+import type { State, Dispatch } from '../../../../flowtype';
-import type { StateProps as BaseStateProps, DispatchProps as BaseDispatchProps } from '../account/AbstractAccount';
+import type { StateProps as BaseStateProps, DispatchProps as BaseDispatchProps } from '../AbstractAccount';
 
 type OwnProps = { }
 

src/js/components/wallet/index.js

@@ -9,7 +9,7 @@ import { Route, withRouter } from 'react-router-dom';
 import Header from '../common/Header';
 import Footer from '../common/Footer';
 import AccountTabs from './account/AccountTabs';
-import DeviceSettingsTabs from './account/DeviceSettingsTabs';
+import DeviceSettingsTabs from './pages/DeviceSettingsTabs';
 import AsideContainer from './aside';
 import ModalContainer from '../modal';
 import Notifications from '../common/Notification';

src/js/components/wallet/pages/Acquire.js

@@ -4,10 +4,10 @@
 import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { Notification } from '../common/Notification';
+import { Notification } from '../../common/Notification';
-import * as TrezorConnectActions from '../../actions/TrezorConnectActions';
+import * as TrezorConnectActions from '../../../actions/TrezorConnectActions';
 
-import type { State, Dispatch } from '../../flowtype';
+import type { State, Dispatch } from '../../../flowtype';
 type Props = {
     connect: $ElementType<State, 'connect'>,
     acquireDevice: typeof TrezorConnectActions.acquire

src/js/components/wallet/pages/Dashboard.js

@@ -4,6 +4,7 @@
 import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+import DashboardImg from '~/images/dashboard.png';
 
 const Dashboard = () => {
     return (
@@ -12,7 +13,7 @@ const Dashboard = () => {
             <div className="row">
                 <h2>Please select your coin</h2>
                 <p>You will gain access to recieving &amp; sending selected coin</p>
-                <img src="./images/dashboard.png" height="34" width="auto" alt="Dashboard" />
+                <img src={ DashboardImg } height="34" width="auto" alt="Dashboard" />
             </div>
         </section>
     );

src/js/index.js

@@ -6,7 +6,7 @@ import { render } from 'react-dom';
 import store from './store';
 import router from './router';
 import { onBeforeUnload } from './actions/WalletActions';
-import styles from '../styles/index.less';
+import styles from '~/styles/index.less';
 
 const root: ?HTMLElement = document.getElementById('root');
 if (root) {

src/js/router/index.js

@@ -9,16 +9,16 @@ import store, { history } from '../store';
 
 import LandingPageContainer from '../components/landing';
 import WalletContainer from '../components/wallet';
-import BootloaderContainer from '../components/wallet/Bootloader';
+import BootloaderContainer from '../components/wallet/pages/Bootloader';
-import AcquireContainer from '../components/wallet/Acquire';
+import AcquireContainer from '../components/wallet/pages/Acquire';
 
-import DashboardContainer from '../components/wallet/Dashboard';
+import DashboardContainer from '../components/wallet/pages/Dashboard';
-import SummaryContainer from '../components/wallet/summary';
+import SummaryContainer from '../components/wallet/account/summary';
-import SendFormContainer from '../components/wallet/send';
+import SendFormContainer from '../components/wallet/account/send';
-import ReceiveContainer from '../components/wallet/Receive';
+import ReceiveContainer from '../components/wallet/account/receive';
-import SignVerifyContainer from '../components/wallet/SignVerify';
+import SignVerifyContainer from '../components/wallet/account/sign/SignVerify';
-import DeviceSettingsContainer from '../components/wallet/DeviceSettings';
+import DeviceSettingsContainer from '../components/wallet/pages/DeviceSettings';
-import WalletSettingsContainer from '../components/wallet/WalletSettings';
+import WalletSettingsContainer from '../components/wallet/pages/WalletSettings';
 
 export default (
     <Provider store={ store }>