Merge pull request #1 from satoshilabs/add-eslint

Add eslint + first tests

.babelrc

@@ -14,6 +14,15 @@
             "polyfill": false,
             "regenerator": true
         }],
-        "./src/babel/babel-plugin-import.js"
+        ["babel-plugin-root-import", {
-    ]
+            "rootPathSuffix": "./src",
+            "rootPathPrefix": "~"
+        }],
+        "babel-plugin-styled-components"
+    ],
+    "env": {
+        "test": {
+          "presets": ["jest"]
+        }
+      }
 }

.eslintignore

@@ -0,0 +1 @@
+solidity

.eslintrc

@@ -0,0 +1,55 @@
+{
+    "extends": [
+        "eslint-config-airbnb",
+        "plugin:flowtype/recommended",
+        "plugin:jest/recommended"
+        
+    ],
+    "env": {
+        "browser": true,
+        "jest": true
+    },
+    "rules": {
+        "react/jsx-one-expression-per-line": 0,
+        "react/jsx-indent": [2, 4],
+        "react/jsx-indent-props": [2, 4],
+        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"]}],
+        "indent": [2, 4, { "SwitchCase": 1 }],
+        "no-confusing-arrow": [2,{ "allowParens": true }],
+        "no-console": 0,
+        "no-alert": 0,
+        "no-prototype-builtins": 0,
+        "new-cap": 0,
+        "max-len": 0,
+        "eol-last": 0,
+        "spaced-comment": 0
+    },
+    "plugins": [
+        "react",
+        "import",
+        "jest",
+        "flowtype"
+    ],
+    "settings": {
+        "import/parser": "babel-eslint",
+        "import/resolver": {
+            "node": {
+                "moduleDirectory": [
+                    "src",
+                    "node_modules"
+                ]
+            }
+        },
+        "import/ignore": [
+            "\\.(scss|less|css)$"
+        ]
+    },
+    "parserOptions": {
+        "ecmaVersion": 7,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true,
+            "experimentalObjectRestSpread": true
+        }
+    }
+}

.gitignore

@@ -18,3 +18,5 @@ logs
 .yarnclean
 
 _old
+
+coverage

jest.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+    rootDir: './src',
+    collectCoverage: true,
+    testURL: 'http://localhost',
+
+    modulePathIgnorePatterns: [
+        'node_modules',
+    ],
+    collectCoverageFrom: [
+        'js/utils/**.js',
+    ],
+};

package.json

@@ -18,14 +18,22 @@
         "dev": "webpack-dev-server --config ./webpack/config.dev.babel.js --mode development",
         "build": "rm -rf build && webpack --config ./webpack/config.prod.babel.js --progress",
         "flow": "flow check src/js",
-        "test": ""
+        "lint": "npx eslint ./src ./webpack",
+        "test-unit": "jest",
+        "test-unit:watch": "jest -o --watch"
     },
     "dependencies": {
+        "babel": "^6.23.0",
+        "babel-core": "^6.26.3",
         "color-hash": "^1.0.3",
+        "copy-webpack-plugin": "^4.5.2",
         "ethereumjs-tx": "^1.3.3",
         "ethereumjs-units": "^0.2.0",
         "ethereumjs-util": "^5.1.4",
         "hdkey": "^0.8.0",
+        "html-webpack-plugin": "^3.2.0",
+        "mini-css-extract-plugin": "^0.4.1",
+        "prop-types": "^15.6.2",
         "raf": "^3.4.0",
         "raven-js": "^3.22.3",
         "rc-tooltip": "^3.7.0",
@@ -44,31 +52,41 @@
         "redux-logger": "^3.0.6",
         "redux-raven-middleware": "^1.2.0",
         "redux-thunk": "^2.2.0",
+        "styled-components": "^3.3.3",
         "trezor-connect": "5.0.13",
-        "web3": "^0.19.0"
+        "web3": "^0.19.0",
+        "webpack": "^4.16.3",
+        "whatwg-fetch": "^2.0.4",
+        "yarn-run-all": "^3.1.1"
     },
     "devDependencies": {
         "babel-cli": "^6.24.1",
-        "babel-loader": "7.1.4",
+        "babel-eslint": "^8.2.6",
-        "babel-plugin-root-import": "^5.1.0",
+        "babel-loader": "^7.1.5",
+        "babel-plugin-root-import": "^6.1.0",
+        "babel-plugin-styled-components": "^1.5.1",
         "babel-plugin-transform-class-properties": "^6.24.1",
         "babel-plugin-transform-flow-strip-types": "^6.22.0",
         "babel-plugin-transform-object-rest-spread": "^6.23.0",
         "babel-plugin-transform-runtime": "^6.23.0",
         "babel-preset-env": "^1.6.0",
+        "babel-preset-jest": "^23.2.0",
         "babel-preset-react": "^6.24.1",
-        "copy-webpack-plugin": "4.5.1",
         "css-loader": "0.28.11",
+        "eslint": "^4",
+        "eslint-config-airbnb": "^17.0.0",
+        "eslint-plugin-flowtype": "^2.50.0",
+        "eslint-plugin-import": "^2.13.0",
+        "eslint-plugin-jest": "^21.18.0",
+        "eslint-plugin-jsx-a11y": "^6.1.1",
+        "eslint-plugin-react": "^7.10.0",
         "file-loader": "1.1.11",
         "flow-bin": "0.72.0",
-        "html-webpack-plugin": "^3.2.0",
+        "jest": "^23.4.2",
         "less": "^3.0.1",
         "less-loader": "4.1.0",
-        "mini-css-extract-plugin": "^0.4.0",
-        "webpack": "^4.8.3",
         "webpack-cli": "^2.1.3",
         "webpack-dev-server": "^3.1.4",
-        "whatwg-fetch": "^2.0.3",
         "yargs": "11.0.0"
     }
 }

src/babel/babel-plugin-import.js

@@ -1,58 +0,0 @@
-// inspired by:
-// https://github.com/entwicklerstube/babel-plugin-root-import/
-// Simple plugin allows es6 import from '~/' which is src root
-
-const cwd = process.cwd();
-
-const replacePrefix = (path, opts = [], sourceFile) => {
-    const options = [].concat(opts);
-    if (typeof path === 'string') {
-        if (path.indexOf('~/') === 0) {
-            return path.replace('~/', `${ cwd }/src/`);
-        }
-    }
-    return path;
-}
-
-
-export default ({ 'types': t }) => {
-    const visitor = {
-        CallExpression(path, state) {
-            if (path.node.callee.name !== 'require') {
-                return;
-            }
-    
-            const args = path.node.arguments;
-            if (!args.length) {
-                return;
-            }
-    
-            const firstArg = traverseExpression(t, args[0]);
-    
-            if (firstArg) {
-                firstArg.value = replacePrefix(firstArg.value, state.opts, state.file.opts.filename);
-            }
-        },
-        ImportDeclaration(path, state) {
-            path.node.source.value = replacePrefix(path.node.source.value, state.opts, state.file.opts.filename);
-        },
-        ExportNamedDeclaration(path, state) {
-            if (path.node.source) {
-                path.node.source.value = replacePrefix(path.node.source.value, state.opts, state.file.opts.filename);
-            }
-        },
-        ExportAllDeclaration(path, state) {
-            if (path.node.source) {
-                path.node.source.value = replacePrefix(path.node.source.value, state.opts, state.file.opts.filename);
-            }
-        }
-    };
-
-    return {
-        'visitor': {
-            Program(path, state) {
-                path.traverse(visitor, state);
-            }
-        }
-    };
-}

src/flowtype/css.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 declare module CSSModule {
     declare var exports: { [key: string]: string };

src/flowtype/index.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import type {
     Store as ReduxStore,
@@ -9,7 +9,7 @@ import type {
     ThunkAction as ReduxThunkAction,
     AsyncAction as ReduxAsyncAction,
     ThunkDispatch as ReduxThunkDispatch,
-    PlainDispatch as ReduxPlainDispatch
+    PlainDispatch as ReduxPlainDispatch,
 } from 'redux';
 
 import type { Reducers, ReducersState } from '~/js/reducers';

src/flowtype/npm/ethereum-types.js

@@ -51,9 +51,7 @@ declare module 'ethereum-types' {
       value?: number
     }
 
-    declare export type EthereumSendTransactionT = EthereumSendTransactionOptionsT => Promise<
+    declare export type EthereumSendTransactionT = EthereumSendTransactionOptionsT => Promise<EthereumTransactionHashT>
-      EthereumTransactionHashT
-    >
 
     // TODO(mattgstevens): it would be nice to have an Generic type for a Contract instance
     // similar to the EthererumWatchEventT
@@ -69,4 +67,3 @@ declare module 'ethereum-types' {
 
     // end contract data
 }
-  

src/flowtype/npm/react-redux_v5.x.x.js

@@ -1,9 +1,9 @@
 // flow-typed signature: 59b0c4be0e1408f21e2446be96c79804
 // flow-typed version: 9092387fd2/react-redux_v5.x.x/flow_>=v0.54.x
 
-import type { Dispatch, Store } from "redux";
+import type { Dispatch, Store } from 'redux';
 
-declare module "react-redux" {
+declare module 'react-redux' {
   /*
 
     S = State
@@ -32,9 +32,7 @@ declare module "react-redux" {
 
   declare type Context = { store: Store<*, *> };
 
-  declare type ComponentWithDefaultProps<DP: {}, P: {}, CP: P> = Class<
+  declare type ComponentWithDefaultProps<DP: {}, P: {}, CP: P> = Class<React$Component<CP>> & { defaultProps: DP };
-    React$Component<CP>
-  > & { defaultProps: DP };
 
   declare class ConnectedComponentWithDefaultProps<
     OP,
@@ -55,13 +53,9 @@ declare module "react-redux" {
     state: void
   }
 
-  declare type ConnectedComponentWithDefaultPropsClass<OP, DP, CP> = Class<
+  declare type ConnectedComponentWithDefaultPropsClass<OP, DP, CP> = Class<ConnectedComponentWithDefaultProps<OP, DP, CP>>;
-    ConnectedComponentWithDefaultProps<OP, DP, CP>
-  >;
 
-  declare type ConnectedComponentClass<OP, P> = Class<
+  declare type ConnectedComponentClass<OP, P> = Class<ConnectedComponent<OP, P>>;
-    ConnectedComponent<OP, P>
-  >;
 
   declare type Connector<OP, P> = (<DP: {}, CP: {}>(
     component: ComponentWithDefaultProps<DP, P, CP>

src/flowtype/npm/react-router-dom_v4.x.x.js

@@ -1,4 +1,4 @@
-declare module "react-router-dom" {
+declare module 'react-router-dom' {
     declare export class BrowserRouter extends React$Component<{
       basename?: string,
       forceRefresh?: boolean,

src/flowtype/npm/react-router-redux.js

@@ -1,10 +1,9 @@
 import type {
     RouterHistory,
-    Location as RouterLocation 
+    Location as RouterLocation,
 } from 'react-router';
 
-declare module "react-router-redux" {
+declare module 'react-router-redux' {
-
     // custom state for location
     declare export type LocationState = {[key: string]: string};
 

src/flowtype/npm/react-router_v4.x.x.js

@@ -1,4 +1,4 @@
-declare module "react-router" {
+declare module 'react-router' {
     // NOTE: many of these are re-exported by react-router-dom and
     // react-router-native, so when making changes, please be sure to update those
     // as well.

src/flowtype/npm/redux_v3.x.x.js

@@ -1,5 +1,4 @@
 declare module 'redux' {
-
   /*
 
     S = State

src/flowtype/npm/web3.js

@@ -124,12 +124,10 @@ declare module 'web3' {
 }
 
 
-
 //
 //
 
 
-
 /*declare module 'web3' {
 
     module.exports = {

src/js/actions/AccountsActions.js

@@ -1,5 +1,4 @@
 /* @flow */
-'use strict';
 
 import * as ACCOUNT from './constants/account';
 import type { Action, TrezorDevice } from '~/flowtype';
@@ -41,22 +40,18 @@ export type AccountSetNonceAction = {
     nonce: number
 }
 
-export const setBalance = (address: string, network: string, deviceState: string, balance: string): Action => {
+export const setBalance = (address: string, network: string, deviceState: string, balance: string): Action => ({
-    return {
     type: ACCOUNT.SET_BALANCE,
     address,
     network,
     deviceState,
-        balance
+    balance,
-    }
+});
-}
 
-export const setNonce = (address: string, network: string, deviceState: string, nonce: number): Action => {
+export const setNonce = (address: string, network: string, deviceState: string, nonce: number): Action => ({
-    return {
     type: ACCOUNT.SET_NONCE,
     address,
     network,
     deviceState,
-        nonce
+    nonce,
-    }
+});
-}

src/js/actions/DiscoveryActions.js

@@ -1,19 +1,21 @@
 /* @flow */
-'use strict';
 
 import TrezorConnect from 'trezor-connect';
+import HDKey from 'hdkey';
+import EthereumjsUtil from 'ethereumjs-util';
 import * as DISCOVERY from './constants/discovery';
 import * as ACCOUNT from './constants/account';
 import * as TOKEN from './constants/token';
 import * as NOTIFICATION from './constants/notification';
-import * as AccountsActions from '../actions/AccountsActions';
+import * as AccountsActions from './AccountsActions';
 
-import HDKey from 'hdkey';
-import EthereumjsUtil from 'ethereumjs-util';
 import { getNonceAsync, getBalanceAsync, getTokenBalanceAsync } from './Web3Actions';
 import { setBalance as setTokenBalance } from './TokenActions';
 
-import type { ThunkAction, AsyncAction, Action, GetState, Dispatch, TrezorDevice } from '~/flowtype';
+import type {
+    ThunkAction, AsyncAction, Action, GetState, Dispatch, TrezorDevice,
+} from '~/flowtype';
+
 import type { Discovery, State } from '../reducers/DiscoveryReducer';
 
 export type DiscoveryAction = {
@@ -50,64 +52,59 @@ export type DiscoveryCompleteAction = {
     network: string
 }
 
-export const start = (device: TrezorDevice, network: string, ignoreCompleted?: boolean): ThunkAction => {
+export const start = (device: TrezorDevice, network: string, ignoreCompleted?: boolean): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
-
     const selected = getState().wallet.selectedDevice;
     if (!selected) {
         // TODO: throw error
-            console.error("Start discovery: no selected device", device)
+        console.error('Start discovery: no selected device', device);
         return;
-        } else if (selected.path !== device.path) {
+    } if (selected.path !== device.path) {
-            console.error("Start discovery: requested device is not selected", device, selected)
+        console.error('Start discovery: requested device is not selected', device, selected);
         return;
-        } else if (!selected.state) {
+    } if (!selected.state) {
-            console.warn("Start discovery: Selected device wasn't authenticated yet...")
+        console.warn("Start discovery: Selected device wasn't authenticated yet...");
         return;
-        } else if (selected.connected && !selected.available) {
+    } if (selected.connected && !selected.available) {
-            console.warn("Start discovery: Selected device is unavailable...")
+        console.warn('Start discovery: Selected device is unavailable...');
         return;
     }
 
     const web3 = getState().web3.find(w3 => w3.network === network);
     if (!web3) {
-            console.error("Start discovery: Web3 does not exist", network)
+        console.error('Start discovery: Web3 does not exist', network);
         return;
     }
 
     if (!web3.web3.currentProvider.isConnected()) {
-            console.error("Start discovery: Web3 is not connected", network)
+        console.error('Start discovery: Web3 is not connected', network);
         dispatch({
             type: DISCOVERY.WAITING_FOR_BACKEND,
             device,
-                network
+            network,
         });
         return;
     }
 
     const discovery: State = getState().discovery;
-        let discoveryProcess: ?Discovery = discovery.find(d => d.deviceState === device.state && d.network === network);
+    const discoveryProcess: ?Discovery = discovery.find(d => d.deviceState === device.state && d.network === network);
-
 
 
     if (!selected.connected && (!discoveryProcess || !discoveryProcess.completed)) {
         dispatch({
             type: DISCOVERY.WAITING_FOR_DEVICE,
             device,
-                network
+            network,
         });
         return;
     }
 
     if (!discoveryProcess) {
         dispatch(begin(device, network));
-            return;
+    } else if (discoveryProcess.completed && !ignoreCompleted) {
-        } else {
-            if (discoveryProcess.completed && !ignoreCompleted) {
         dispatch({
             type: DISCOVERY.COMPLETE,
             device,
-                    network
+            network,
         });
     } else if (discoveryProcess.interrupted || discoveryProcess.waitingForDevice) {
         // discovery cycle was interrupted
@@ -116,13 +113,9 @@ export const start = (device: TrezorDevice, network: string, ignoreCompleted?: b
     } else {
         dispatch(discoverAccount(device, discoveryProcess));
     }
-        }
+};
-    }
-}
-
-const begin = (device: TrezorDevice, network: string): AsyncAction => {
-    return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
 
+const begin = (device: TrezorDevice, network: string): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
     const { config } = getState().localStorage;
     const coinToDiscover = config.coins.find(c => c.network === network);
     if (!coinToDiscover) return;
@@ -130,7 +123,7 @@ const begin = (device: TrezorDevice, network: string): AsyncAction => {
     dispatch({
         type: DISCOVERY.WAITING_FOR_DEVICE,
         device,
-            network
+        network,
     });
 
     // get xpub from TREZOR
@@ -138,7 +131,7 @@ const begin = (device: TrezorDevice, network: string): AsyncAction => {
         device: {
             path: device.path,
             instance: device.instance,
-                state: device.state
+            state: device.state,
         },
         path: coinToDiscover.bip44,
         keepSession: true, // acquire and hold session
@@ -148,7 +141,7 @@ const begin = (device: TrezorDevice, network: string): AsyncAction => {
         // handle TREZOR response error
     if (!response.success) {
         // TODO: check message
-            console.warn("DISCOVERY ERROR", response)
+        console.warn('DISCOVERY ERROR', response);
         dispatch({
             type: NOTIFICATION.ADD,
             payload: {
@@ -160,17 +153,17 @@ const begin = (device: TrezorDevice, network: string): AsyncAction => {
                     {
                         label: 'Try again',
                         callback: () => {
-                                dispatch(start(device, network))
+                            dispatch(start(device, network));
-                            }
+                        },
-                        }
+                    },
-                    ]
+                ],
-                }
+            },
-            })
+        });
         return;
     }
 
     // check for interruption
-        let discoveryProcess: ?Discovery = getState().discovery.find(d => d.deviceState === device.state && d.network === network);
+    const discoveryProcess: ?Discovery = getState().discovery.find(d => d.deviceState === device.state && d.network === network);
     if (discoveryProcess && discoveryProcess.interrupted) return;
 
     const basePath: Array<number> = response.payload.path;
@@ -186,12 +179,9 @@ const begin = (device: TrezorDevice, network: string): AsyncAction => {
     });
 
     dispatch(start(device, network));
-    }
+};
-}
-
-const discoverAccount = (device: TrezorDevice, discoveryProcess: Discovery): AsyncAction => {
-    return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
 
+const discoverAccount = (device: TrezorDevice, discoveryProcess: Discovery): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
     const completed: boolean = discoveryProcess.completed;
     discoveryProcess.completed = false;
 
@@ -202,7 +192,6 @@ const discoverAccount = (device: TrezorDevice, discoveryProcess: Discovery): Asy
     const network = discoveryProcess.network;
 
 
-
     // TODO: check if address was created before
 
     // verify address with TREZOR
@@ -210,7 +199,7 @@ const discoverAccount = (device: TrezorDevice, discoveryProcess: Discovery): Asy
         device: {
             path: device.path,
             instance: device.instance,
-                state: device.state
+            state: device.state,
         },
         path,
         showOnTrezor: false,
@@ -234,7 +223,7 @@ const discoverAccount = (device: TrezorDevice, discoveryProcess: Discovery): Asy
         const trezorAddress: string = EthereumjsUtil.toChecksumAddress(verifyAddress.payload.address);
         if (trezorAddress !== ethAddress) {
             // throw inconsistent state error
-                console.warn("Inconsistent state", trezorAddress, ethAddress);
+            console.warn('Inconsistent state', trezorAddress, ethAddress);
 
             dispatch({
                 type: NOTIFICATION.ADD,
@@ -247,11 +236,11 @@ const discoverAccount = (device: TrezorDevice, discoveryProcess: Discovery): Asy
                         {
                             label: 'Try again',
                             callback: () => {
-                                    dispatch(start(device, discoveryProcess.network))
+                                dispatch(start(device, discoveryProcess.network));
-                                }
+                            },
-                            }
+                        },
-                        ]
+                    ],
-                    }
+                },
             });
             return;
         }
@@ -268,11 +257,11 @@ const discoverAccount = (device: TrezorDevice, discoveryProcess: Discovery): Asy
                     {
                         label: 'Try again',
                         callback: () => {
-                                dispatch(start(device, discoveryProcess.network))
+                            dispatch(start(device, discoveryProcess.network));
-                            }
+                        },
-                        }
+                    },
-                    ]
+                ],
-                }
+            },
         });
         return;
     }
@@ -294,15 +283,14 @@ const discoverAccount = (device: TrezorDevice, discoveryProcess: Discovery): Asy
             network,
             index: discoveryProcess.accountIndex,
             path,
-                address: ethAddress 
+            address: ethAddress,
         });
         dispatch(
-                AccountsActions.setBalance(ethAddress, network, device.state || 'undefined', web3instance.web3.fromWei(balance.toString(), 'ether'))
+            AccountsActions.setBalance(ethAddress, network, device.state || 'undefined', web3instance.web3.fromWei(balance.toString(), 'ether')),
         );
         dispatch(AccountsActions.setNonce(ethAddress, network, device.state || 'undefined', nonce));
 
-            if (!completed)
+        if (!completed) { dispatch(discoverAccount(device, discoveryProcess)); }
-                dispatch( discoverAccount(device, discoveryProcess) );
     }
 
     if (addressIsEmpty) {
@@ -311,7 +299,7 @@ const discoverAccount = (device: TrezorDevice, discoveryProcess: Discovery): Asy
             device: {
                 path: device.path,
                 instance: device.instance,
-                    state: device.state
+                state: device.state,
             },
             keepSession: false,
             useEmptyPassphrase: !device.instance,
@@ -321,14 +309,12 @@ const discoverAccount = (device: TrezorDevice, discoveryProcess: Discovery): Asy
         dispatch({
             type: DISCOVERY.COMPLETE,
             device,
-                network
+            network,
         });
     }
-    }
+};
-}
 
-export const restore = (): ThunkAction => {
+export const restore = (): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
     const selected = getState().wallet.selectedDevice;
 
     if (selected && selected.connected && selected.features) {
@@ -337,15 +323,13 @@ export const restore = (): ThunkAction => {
             dispatch(start(selected, discoveryProcess.network));
         }
     }
-    }
+};
-}
 
 // TODO: rename method to something intuitive
 // there is no discovery process but it should be
 // this is possible race condition when "network" was changed in url but device was not authenticated yet
 // try to start discovery after CONNECT.AUTH_DEVICE action
-export const check = (): ThunkAction => {
+export const check = (): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
     const selected = getState().wallet.selectedDevice;
     if (!selected) return;
 
@@ -356,14 +340,9 @@ export const check = (): ThunkAction => {
             dispatch(start(selected, urlParams.network));
         }
     }
-    }
+};
-}
 
-export const stop = (device: TrezorDevice): Action => {
+export const stop = (device: TrezorDevice): Action => ({
-    // TODO: release devices session
-    // corner case switch /eth to /etc (discovery start stop - should not be async)
-    return {
     type: DISCOVERY.STOP,
-        device
+    device,
-    }
+});
-}

src/js/actions/HistoryActions.js

@@ -1,2 +1 @@
 /* @flow */
-'use strict';

src/js/actions/LocalStorageActions.js

@@ -1,15 +1,17 @@
 /* @flow */
-'use strict';
+
 
 import * as CONNECT from './constants/TrezorConnect';
 import * as ACCOUNT from './constants/account';
 import * as TOKEN from './constants/token';
 import * as DISCOVERY from './constants/discovery';
 import * as STORAGE from './constants/localStorage';
-import * as PENDING from '../actions/constants/pendingTx';
+import * as PENDING from './constants/pendingTx';
 import { JSONRequest, httpRequest } from '../utils/networkUtils';
 
-import type { ThunkAction, AsyncAction, GetState, Dispatch, TrezorDevice } from '~/flowtype';
+import type {
+    ThunkAction, AsyncAction, GetState, Dispatch, TrezorDevice,
+} from '~/flowtype';
 import type { Config, Coin, TokensCollection } from '../reducers/LocalStorageReducer';
 
 import AppConfigJSON from '~/data/appConfig.json';
@@ -28,9 +30,7 @@ export type StorageAction = {
     error: string,
 };
 
-export const loadData = (): ThunkAction => {
+export const loadData = (): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
-
     // check if local storage is available
     // let available: boolean = true;
     // if (typeof window.localStorage === 'undefined') {
@@ -44,8 +44,7 @@ export const loadData = (): ThunkAction => {
     // }
 
     dispatch(loadTokensFromJSON());
-    }
+};
-}
 
 // const parseConfig = (json: JSON): Config => {
 
@@ -84,16 +83,15 @@ export const loadData = (): ThunkAction => {
 
 export function loadTokensFromJSON(): AsyncAction {
     return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-
         if (typeof window.localStorage === 'undefined') return;
 
         try {
             const config: Config = await httpRequest(AppConfigJSON, 'json');
             const ERC20Abi = await httpRequest(Erc20AbiJSON, 'json');
 
-            window.addEventListener('storage', event => {
+            window.addEventListener('storage', (event) => {
                 dispatch(update(event));
-            })
+            });
 
             // load tokens
             const tokens = await config.coins.reduce(async (promise: Promise<TokensCollection>, coin: Coin): Promise<TokensCollection> => {
@@ -107,40 +105,40 @@ export function loadTokensFromJSON(): AsyncAction {
             if (devices) {
                 dispatch({
                     type: CONNECT.DEVICE_FROM_STORAGE,
-                    payload: JSON.parse(devices)
+                    payload: JSON.parse(devices),
-                })
+                });
             }
 
             const accounts: ?string = get('accounts');
             if (accounts) {
                 dispatch({
                     type: ACCOUNT.FROM_STORAGE,
-                    payload: JSON.parse(accounts)
+                    payload: JSON.parse(accounts),
-                })
+                });
             }
 
             const userTokens: ?string = get('tokens');
             if (userTokens) {
                 dispatch({
                     type: TOKEN.FROM_STORAGE,
-                    payload: JSON.parse(userTokens)
+                    payload: JSON.parse(userTokens),
-                })
+                });
             }
 
             const pending: ?string = get('pending');
             if (pending) {
                 dispatch({
                     type: PENDING.FROM_STORAGE,
-                    payload: JSON.parse(pending)
+                    payload: JSON.parse(pending),
-                })
+                });
             }
 
             const discovery: ?string = get('discovery');
             if (discovery) {
                 dispatch({
                     type: DISCOVERY.FROM_STORAGE,
-                    payload: JSON.parse(discovery)
+                    payload: JSON.parse(discovery),
-                })
+                });
             }
 
 
@@ -148,21 +146,19 @@ export function loadTokensFromJSON(): AsyncAction {
                 type: STORAGE.READY,
                 config,
                 tokens,
-                ERC20Abi
+                ERC20Abi,
-            })
+            });
-
         } catch (error) {
             dispatch({
                 type: STORAGE.ERROR,
-                error
+                error,
-            })
+            });
-        }
         }
+    };
 }
 
 export function update(event: StorageEvent): AsyncAction {
     return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-
         if (!event.newValue) return;
 
         if (event.key === 'devices') {
@@ -183,46 +179,44 @@ export function update(event: StorageEvent): AsyncAction {
         if (event.key === 'accounts') {
             dispatch({
                 type: ACCOUNT.FROM_STORAGE,
-                payload: JSON.parse(event.newValue)
+                payload: JSON.parse(event.newValue),
             });
         }
 
         if (event.key === 'tokens') {
             dispatch({
                 type: TOKEN.FROM_STORAGE,
-                payload: JSON.parse(event.newValue)
+                payload: JSON.parse(event.newValue),
             });
         }
 
         if (event.key === 'pending') {
             dispatch({
                 type: PENDING.FROM_STORAGE,
-                payload: JSON.parse(event.newValue)
+                payload: JSON.parse(event.newValue),
             });
         }
 
         if (event.key === 'discovery') {
             dispatch({
                 type: DISCOVERY.FROM_STORAGE,
-                payload: JSON.parse(event.newValue)
+                payload: JSON.parse(event.newValue),
             });
         }
-    }
+    };
 }
 
 
-export const save = (key: string, value: string): ThunkAction => {
+export const save = (key: string, value: string): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
     if (typeof window.localStorage !== 'undefined') {
         try {
             window.localStorage.setItem(key, value);
         } catch (error) {
             // available = false;
-                console.error("Local Storage ERROR: " + error)
+            console.error(`Local Storage ERROR: ${error}`);
-            }
-        }
         }
     }
+};
 
 export const get = (key: string): ?string => {
     try {
@@ -231,4 +225,4 @@ export const get = (key: string): ?string => {
         // available = false;
         return null;
     }
-}
+};

src/js/actions/LogActions.js

@@ -1,9 +1,11 @@
 /* @flow */
-'use strict';
+
 
 import * as LOG from './constants/log';
 
-import type { Action, ThunkAction, GetState, Dispatch } from '~/flowtype';
+import type {
+    Action, ThunkAction, GetState, Dispatch,
+} from '~/flowtype';
 import type { LogEntry } from '../reducers/LogReducer';
 
 export type LogAction = {
@@ -15,31 +17,26 @@ export type LogAction = {
     payload: LogEntry
 };
 
-export const toggle = (): ThunkAction => {
+export const toggle = (): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
-
     if (!getState().log.opened) {
         window.scrollTo(0, 0);
 
         dispatch({
-                type: LOG.OPEN
+            type: LOG.OPEN,
         });
     } else {
         dispatch({
-                type: LOG.CLOSE
+            type: LOG.CLOSE,
         });
     }
-    }
+};
-}
 
 // export const add = (type: string, message: string): Action => {
-export const add = (type: string, message: any): Action => {
+export const add = (type: string, message: any): Action => ({
-    return {
     type: LOG.ADD,
     payload: {
         time: new Date().getTime(),
         type,
-            message
+        message,
-        }
+    },
-    }
+});
-}

src/js/actions/ModalActions.js

@@ -1,13 +1,15 @@
 /* @flow */
-'use strict';
+
 
 import TrezorConnect, { UI, UI_EVENT } from 'trezor-connect';
+import type { Device } from 'trezor-connect';
 import * as MODAL from './constants/modal';
 import * as CONNECT from './constants/TrezorConnect';
 
-import type { ThunkAction, AsyncAction, Action, GetState, Dispatch, TrezorDevice } from '~/flowtype';
+import type {
+    ThunkAction, AsyncAction, Action, GetState, Dispatch, TrezorDevice,
+} from '~/flowtype';
 import type { State } from '../reducers/ModalReducer';
-import type { Device } from 'trezor-connect';
 
 export type ModalAction = {
     type: typeof MODAL.CLOSE
@@ -19,25 +21,23 @@ export type ModalAction = {
 export const onPinSubmit = (value: string): Action => {
     TrezorConnect.uiResponse({ type: UI.RECEIVE_PIN, payload: value });
     return {
-        type: MODAL.CLOSE
+        type: MODAL.CLOSE,
-    }
+    };
-}
+};
 
-export const onPassphraseSubmit = (passphrase: string): AsyncAction => {
+export const onPassphraseSubmit = (passphrase: string): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-    return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
     const resp = await TrezorConnect.uiResponse({
         type: UI.RECEIVE_PASSPHRASE,
         payload: {
             value: passphrase,
-                save: true
+            save: true,
-            } 
+        },
     });
 
     dispatch({
-            type: MODAL.CLOSE
+        type: MODAL.CLOSE,
     });
-    }
+};
-}
 
 // export const askForRemember = (device: TrezorDevice): Action => {
 //     return {
@@ -46,47 +46,35 @@ export const onPassphraseSubmit = (passphrase: string): AsyncAction => {
 //     }
 // }
 
-export const onRememberDevice = (device: TrezorDevice): Action => {
+export const onRememberDevice = (device: TrezorDevice): Action => ({
-    return {
     type: CONNECT.REMEMBER,
-        device
+    device,
-    }
+});
-}
 
-export const onForgetDevice = (device: TrezorDevice): Action => {
+export const onForgetDevice = (device: TrezorDevice): Action => ({
-    return {
     type: CONNECT.FORGET,
     device,
-    }
+});
-}
 
-export const onForgetSingleDevice = (device: TrezorDevice): Action => {
+export const onForgetSingleDevice = (device: TrezorDevice): Action => ({
-    return {
     type: CONNECT.FORGET_SINGLE,
     device,
-    }
+});
-}
 
-export const onCancel = (): Action => {
+export const onCancel = (): Action => ({
-    return {
+    type: MODAL.CLOSE,
-        type: MODAL.CLOSE
+});
-    }
-}
-
-export const onDuplicateDevice = (device: TrezorDevice): ThunkAction => {
-    return (dispatch: Dispatch, getState: GetState): void => {
 
+export const onDuplicateDevice = (device: TrezorDevice): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
     dispatch(onCancel());
 
     dispatch({
         type: CONNECT.DUPLICATE,
-            device
+        device,
     });
-    }
+};
-}
 
-export const onRememberRequest = (prevState: State): ThunkAction => {
+export const onRememberRequest = (prevState: State): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
     const state: State = getState().modal;
     // handle case where forget modal is already opened
     // TODO: 2 modals at once (two devices disconnected in the same time)
@@ -95,21 +83,19 @@ export const onRememberRequest = (prevState: State): ThunkAction => {
         if (state.opened) {
             dispatch({
                 type: CONNECT.FORGET,
-                    device: state.device
+                device: state.device,
             });
         }
 
         // forget previous (old)
         dispatch({
             type: CONNECT.FORGET,
-                device: prevState.device
+            device: prevState.device,
         });
     }
-    }
+};
-}
 
-export const onDeviceConnect = (device: Device): ThunkAction => {
+export const onDeviceConnect = (device: Device): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
     // interrupt process of remembering device (force forget)
     // TODO: the same for disconnect more than 1 device at once
     const { modal } = getState();
@@ -121,13 +107,11 @@ export const onDeviceConnect = (device: Device): ThunkAction => {
         } else {
             dispatch({
                 type: CONNECT.FORGET,
-                    device: modal.device
+                device: modal.device,
             });
         }
     }
-
+};
-    }
-}
 
 export default {
     onPinSubmit,
@@ -137,5 +121,5 @@ export default {
     onForgetDevice,
     onForgetSingleDevice,
     onCancel,
-    onDuplicateDevice
+    onDuplicateDevice,
-}
+};

src/js/actions/NotificationActions.js

@@ -1,9 +1,11 @@
 /* @flow */
-'use strict';
+
 
 import * as NOTIFICATION from './constants/notification';
 
-import type { Action, AsyncAction, GetState, Dispatch, RouterLocationState } from '~/flowtype';
+import type {
+    Action, AsyncAction, GetState, Dispatch, RouterLocationState,
+} from '~/flowtype';
 import type { CallbackAction } from '../reducers/NotificationReducer';
 
 export type NotificationAction = {
@@ -23,31 +25,27 @@ export type NotificationAction = {
     }
 }
 
-export const close = (payload: any = {}): Action => {
+export const close = (payload: any = {}): Action => ({
-    return {
     type: NOTIFICATION.CLOSE,
-        payload
+    payload,
-    }
+});
-}
 
 
 // called from RouterService
-export const clear = (currentParams: RouterLocationState, requestedParams: RouterLocationState): AsyncAction => {
+export const clear = (currentParams: RouterLocationState, requestedParams: RouterLocationState): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-    return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
     // if route has been changed from device view into something else (like other device, settings...)
     // try to remove all Notifications which are linked to previous device (they are not cancelable by user)
     if (currentParams.device !== requestedParams.device || currentParams.deviceInstance !== requestedParams.deviceInstance) {
         const entries = getState().notifications.filter(entry => typeof entry.devicePath === 'string');
-            entries.forEach(entry => {
+        entries.forEach((entry) => {
             if (typeof entry.devicePath === 'string') {
                 dispatch({
                     type: NOTIFICATION.CLOSE,
                     payload: {
-                            devicePath: entry.devicePath
+                        devicePath: entry.devicePath,
-                        }
+                    },
-                    })
+                });
             }
         });
     }
-    }
+};
-}

src/js/actions/PendingTxActions.js

@@ -1,8 +1,8 @@
 /* @flow */
-'use strict';
+
 
 import * as PENDING from './constants/pendingTx';
-import type { State, PendingTx } from '../reducers/PendingTxReducer'
+import type { State, PendingTx } from '../reducers/PendingTxReducer';
 
 export type PendingTxAction = {
     type: typeof PENDING.FROM_STORAGE,

src/js/actions/ReceiveActions.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import TrezorConnect from 'trezor-connect';
 import * as RECEIVE from './constants/receive';
@@ -8,7 +8,9 @@ import * as NOTIFICATION from './constants/notification';
 import { initialState } from '../reducers/ReceiveReducer';
 import type { State } from '../reducers/ReceiveReducer';
 
-import type { TrezorDevice, ThunkAction, AsyncAction, Action, GetState, Dispatch } from '~/flowtype';
+import type {
+    TrezorDevice, ThunkAction, AsyncAction, Action, GetState, Dispatch,
+} from '~/flowtype';
 
 export type ReceiveAction = {
     type: typeof RECEIVE.INIT,
@@ -26,43 +28,34 @@ export type ReceiveAction = {
     type: typeof RECEIVE.SHOW_UNVERIFIED_ADDRESS
 }
 
-export const init = (): ThunkAction => {
+export const init = (): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
-    
     const state: State = {
         ...initialState,
     };
 
     dispatch({
         type: RECEIVE.INIT,
-            state: state
+        state,
     });
-    }
+};
-}
 
-export const dispose = (): Action  => {
+export const dispose = (): Action => ({
-    return {
+    type: RECEIVE.DISPOSE,
-        type: RECEIVE.DISPOSE
+});
-    }
-}
 
-export const showUnverifiedAddress = (): Action => {
+export const showUnverifiedAddress = (): Action => ({
-    return {
+    type: RECEIVE.SHOW_UNVERIFIED_ADDRESS,
-        type: RECEIVE.SHOW_UNVERIFIED_ADDRESS
+});
-    }
-}
 
 //export const showAddress = (address_n: string): AsyncAction => {
-export const showAddress = (address_n: Array<number>): AsyncAction => {
+export const showAddress = (address_n: Array<number>): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-    return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-
     const selected = getState().wallet.selectedDevice;
     if (!selected) return;
 
     if (selected && (!selected.connected || !selected.available)) {
         dispatch({
             type: RECEIVE.REQUEST_UNVERIFIED,
-                device: selected
+            device: selected,
         });
         return;
     }
@@ -71,7 +64,7 @@ export const showAddress = (address_n: Array<number>): AsyncAction => {
         device: {
             path: selected.path,
             instance: selected.instance,
-                state: selected.state
+            state: selected.state,
         },
         path: address_n,
         useEmptyPassphrase: !selected.instance,
@@ -79,12 +72,12 @@ export const showAddress = (address_n: Array<number>): AsyncAction => {
 
     if (response && response.success) {
         dispatch({
-                type: RECEIVE.SHOW_ADDRESS
+            type: RECEIVE.SHOW_ADDRESS,
-            })
+        });
     } else {
         dispatch({
-                type: RECEIVE.HIDE_ADDRESS
+            type: RECEIVE.HIDE_ADDRESS,
-            })
+        });
 
         dispatch({
             type: NOTIFICATION.ADD,
@@ -97,19 +90,18 @@ export const showAddress = (address_n: Array<number>): AsyncAction => {
                     {
                         label: 'Try again',
                         callback: () => {
-                                dispatch(showAddress(address_n))
+                            dispatch(showAddress(address_n));
-                            }
+                        },
-                        }
+                    },
-                    ]
+                ],
-                }
+            },
-            })
+        });
-        }
-    }
     }
+};
 
 export default {
     init,
     dispose,
     showAddress,
-    showUnverifiedAddress
+    showUnverifiedAddress,
-}
+};

src/js/actions/SelectedAccountActions.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import { LOCATION_CHANGE } from 'react-router-redux';
 import * as ACCOUNT from './constants/account';
@@ -32,15 +32,13 @@ export type SelectedAccountAction = {
     payload: $ElementType<State, 'selectedAccount'>
 };
 
-export const updateSelectedValues = (prevState: State, action: Action): AsyncAction => {
+export const updateSelectedValues = (prevState: State, action: Action): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-    return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-
     const locationChange: boolean = action.type === LOCATION_CHANGE;
     const state: State = getState();
     const location = state.router.location;
     const prevLocation = prevState.router.location;
 
-        let needUpdate: boolean = false;
+    const needUpdate: boolean = false;
 
     // reset form to default
     if (action.type === SEND.TX_COMPLETE) {
@@ -56,8 +54,6 @@ export const updateSelectedValues = (prevState: State, action: Action): AsyncAct
             || prevState.tokens !== state.tokens
             || prevState.pending !== state.pending
             || prevState.web3 !== state.web3) {
-
-
         if (locationChange) {
             // dispose current account view
             dispatch(dispose());
@@ -77,8 +73,8 @@ export const updateSelectedValues = (prevState: State, action: Action): AsyncAct
             discovery,
             tokens,
             pending,
-                web3
+            web3,
-            }
+        };
 
         let needUpdate: boolean = false;
         Object.keys(payload).forEach((key) => {
@@ -86,12 +82,10 @@ export const updateSelectedValues = (prevState: State, action: Action): AsyncAct
                 if (Array.isArray(state.selectedAccount[key]) && payload[key].length !== state.selectedAccount[key].length) {
                     needUpdate = true;
                 }
-                } else {
+            } else if (payload[key] !== state.selectedAccount[key]) {
-                    if (payload[key] !== state.selectedAccount[key]) {
                 needUpdate = true;
             }
-                }
+        });
-            })
 
         if (needUpdate) {
             dispatch({
@@ -100,18 +94,18 @@ export const updateSelectedValues = (prevState: State, action: Action): AsyncAct
             });
 
             // initialize SendFormReducer
-                if (location.state.send && getState().sendForm.currency === "") {
+            if (location.state.send && getState().sendForm.currency === '') {
                 dispatch(SendFormActions.init());
             }
 
             if (location.state.send) {
                 const rejectedTxs = pending.filter(tx => tx.rejected);
-                    rejectedTxs.forEach(tx => {
+                rejectedTxs.forEach((tx) => {
                     dispatch({
                         type: NOTIFICATION.ADD,
                         payload: {
-                                type: "warning",
+                            type: 'warning',
-                                title: "Pending transaction rejected",
+                            title: 'Pending transaction rejected',
                             message: `Transaction with id: ${tx.id} not found.`,
                             cancelable: true,
                             actions: [
@@ -122,20 +116,17 @@ export const updateSelectedValues = (prevState: State, action: Action): AsyncAct
                                             type: PENDING.TX_RESOLVED,
                                             tx,
                                         });
-                                        }
+                                    },
-                                    }
+                                },
-                                ]
+                            ],
-                            }
+                        },
-                        })
+                    });
                 });
             }
         }
     }
-    }
+};
-}
 
-export const dispose = (): Action => {
+export const dispose = (): Action => ({
-    return {
+    type: ACCOUNT.DISPOSE,
-        type: ACCOUNT.DISPOSE
+});
-    }
-}

src/js/actions/SendFormActions.js

@@ -1,20 +1,17 @@
 /* @flow */
-'use strict';
 
-import * as SEND from './constants/send';
-import * as NOTIFICATION from './constants/notification';
-
-import * as SessionStorageActions from './SessionStorageActions';
-
-import { estimateGas, getGasPrice, pushTx } from './Web3Actions';
 
 import EthereumjsUtil from 'ethereumjs-util';
 import EthereumjsUnits from 'ethereumjs-units';
 import EthereumjsTx from 'ethereumjs-tx';
 import TrezorConnect from 'trezor-connect';
-import { strip } from '../utils/ethUtils';
 import { push } from 'react-router-redux';
 import BigNumber from 'bignumber.js';
+import { strip } from '../utils/ethUtils';
+import { estimateGas, getGasPrice, pushTx } from './Web3Actions';
+import * as SessionStorageActions from './SessionStorageActions';
+import * as NOTIFICATION from './constants/notification';
+import * as SEND from './constants/send';
 
 import { initialState } from '../reducers/SendFormReducer';
 import { findAccount } from '../reducers/AccountsReducer';
@@ -30,7 +27,7 @@ import type {
     ThunkAction,
     AsyncAction,
     RouterLocationState,
-    TrezorDevice
+    TrezorDevice,
 } from '~/flowtype';
 import type { State as AccountState } from '../reducers/SelectedAccountReducer';
 import type { Web3Instance } from '../reducers/Web3Reducer';
@@ -128,7 +125,7 @@ export const calculateFee = (gasPrice: string, gasLimit: string): string => {
     } catch (error) {
         return '0';
     }
-}
+};
 
 export const calculateTotal = (amount: string, gasPrice: string, gasLimit: string): string => {
     try {
@@ -136,7 +133,7 @@ export const calculateTotal = (amount: string, gasPrice: string, gasLimit: strin
     } catch (error) {
         return '0';
     }
-}
+};
 
 export const calculateMaxAmount = (balance: BigNumber, gasPrice: string, gasLimit: string): string => {
     try {
@@ -148,8 +145,7 @@ export const calculateMaxAmount = (balance: BigNumber, gasPrice: string, gasLimi
     } catch (error) {
         return '0';
     }
-    
+};
-}
 
 export const calculate = (prevProps: Props, props: Props) => {
     const {
@@ -173,7 +169,6 @@ export const calculate = (prevProps: Props, props: Props) => {
 
 
     if (state.setMax) {
-
         const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, state.currency, isToken);
 
         if (isToken) {
@@ -195,11 +190,11 @@ export const calculate = (prevProps: Props, props: Props) => {
         state.selectedFeeLevel.label = `${calculateFee(state.gasPrice, state.gasLimit)} ${state.networkSymbol}`;
         state.selectedFeeLevel.gasPrice = state.gasPrice;
     }
-}
+};
 
 
 export const getFeeLevels = (symbol: string, gasPrice: BigNumber | string, gasLimit: string, selected?: FeeLevel): Array<FeeLevel> => {
-    const price: BigNumber = typeof gasPrice === 'string' ? new BigNumber(gasPrice) : gasPrice
+    const price: BigNumber = typeof gasPrice === 'string' ? new BigNumber(gasPrice) : gasPrice;
     const quarter: BigNumber = price.dividedBy(4);
     const high: string = price.plus(quarter.times(2)).toString(10);
     const low: string = price.minus(quarter.times(2)).toString(10);
@@ -208,42 +203,40 @@ export const getFeeLevels = (symbol: string, gasPrice: BigNumber | string, gasLi
         value: 'Custom',
         gasPrice: selected.gasPrice,
         // label: `${ calculateFee(gasPrice, gasLimit) } ${ symbol }`
-        label: `${ calculateFee(selected.gasPrice, gasLimit) } ${ symbol }`
+        label: `${calculateFee(selected.gasPrice, gasLimit)} ${symbol}`,
     } : {
         value: 'Custom',
         gasPrice: low,
-        label: ''
+        label: '',
-    }
+    };
 
     return [
         {
             value: 'High',
             gasPrice: high,
-            label: `${ calculateFee(high, gasLimit) } ${ symbol }`
+            label: `${calculateFee(high, gasLimit)} ${symbol}`,
         },
         {
             value: 'Normal',
             gasPrice: gasPrice.toString(),
-            label: `${ calculateFee(price.toString(10), gasLimit) } ${ symbol }`
+            label: `${calculateFee(price.toString(10), gasLimit)} ${symbol}`,
         },
         {
             value: 'Low',
             gasPrice: low,
-            label: `${ calculateFee(low, gasLimit) } ${ symbol }`
+            label: `${calculateFee(low, gasLimit)} ${symbol}`,
         },
-        customLevel
+        customLevel,
-    ]
+    ];
-}
+};
 
 
 // initialize component
-export const init = (): ThunkAction => {
+export const init = (): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
-
     const {
         account,
         network,
-            web3
+        web3,
     } = getState().selectedAccount;
 
     if (!account || !network || !web3) return;
@@ -252,7 +245,7 @@ export const init = (): ThunkAction => {
     if (stateFromStorage) {
         dispatch({
             type: SEND.INIT,
-                state: stateFromStorage
+            state: stateFromStorage,
         });
         return;
     }
@@ -280,20 +273,16 @@ export const init = (): ThunkAction => {
 
     dispatch({
         type: SEND.INIT,
-            state
+        state,
     });
-    }
+};
-}
 
-export const toggleAdvanced = (address: string): Action => {
+export const toggleAdvanced = (address: string): Action => ({
-    return {
+    type: SEND.TOGGLE_ADVANCED,
-        type: SEND.TOGGLE_ADVANCED
+});
-    }
-}
 
 
-const addressValidation = (): ThunkAction => {
+const addressValidation = (): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
     const {
         account,
         network,
@@ -322,7 +311,7 @@ const addressValidation = (): ThunkAction => {
             const otherNetworkAccount = savedAccounts[0];
             const device: ?TrezorDevice = findDevice(getState().devices, otherNetworkAccount.deviceID, otherNetworkAccount.deviceState);
             const coins = getState().localStorage.config.coins;
-                const otherNetwork: ?Coin = coins.find(c => c.network === otherNetworkAccount.network)
+            const otherNetwork: ?Coin = coins.find(c => c.network === otherNetworkAccount.network);
             if (device && otherNetwork) {
                 warnings.address = `Looks like it's ${device.instanceLabel} Account #${(otherNetworkAccount.index + 1)} address of ${otherNetwork.name} network`;
             }
@@ -337,15 +326,13 @@ const addressValidation = (): ThunkAction => {
         state: {
             ...state,
             infos,
-                warnings
+            warnings,
-            }
+        },
-        })
+    });
-    }
+};
-}
 
 
 export const validation = (props: Props): void => {
-
     const {
         account,
         network,
@@ -388,7 +375,6 @@ export const validation = (props: Props): void => {
         } else if (state.amount.length > 0 && !state.amount.match(numberRegExp)) {
             errors.amount = 'Amount is not a number';
         } else {
-
             let decimalRegExp: RegExp;
             const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, state.currency, state.currency !== state.networkSymbol);
 
@@ -397,7 +383,7 @@ export const validation = (props: Props): void => {
                 if (token) {
                     if (parseInt(token.decimals) > 0) {
                         //decimalRegExp = new RegExp('^(0|0\\.([0-9]{0,' + token.decimals + '})?|[1-9]+\\.?([0-9]{0,' + token.decimals + '})?|\\.[0-9]{1,' + token.decimals + '})$');
-                        decimalRegExp = new RegExp('^(0|0\\.([0-9]{0,' + token.decimals + '})?|[1-9][0-9]*\\.?([0-9]{0,' + token.decimals + '})?|\\.[0-9]{1,' + token.decimals + '})$');
+                        decimalRegExp = new RegExp(`^(0|0\\.([0-9]{0,${token.decimals}})?|[1-9][0-9]*\\.?([0-9]{0,${token.decimals}})?|\\.[0-9]{1,${token.decimals}})$`);
                     } else {
                         // decimalRegExp = new RegExp('^(0|0\\.?|[1-9]+\\.?)$');
                         decimalRegExp = new RegExp('^[0-9]+$');
@@ -413,11 +399,10 @@ export const validation = (props: Props): void => {
                         errors.amount = 'Amount is too low';
                     }
                 }
-                
             } else {
                 decimalRegExp = new RegExp('^(0|0\\.([0-9]{0,18})?|[1-9][0-9]*\\.?([0-9]{0,18})?|\\.[0-9]{0,18})$');
                 if (!state.amount.match(decimalRegExp)) {
-                    errors.amount = `Maximum 18 decimals allowed`;
+                    errors.amount = 'Maximum 18 decimals allowed';
                 } else if (new BigNumber(state.total).greaterThan(new BigNumber(account.balance).minus(pendingAmount))) {
                     errors.amount = 'Not enough funds';
                 }
@@ -487,14 +472,10 @@ export const validation = (props: Props): void => {
     state.errors = errors;
     state.warnings = warnings;
     state.infos = infos;
-
+};
-}
 
 
-
+export const onAddressChange = (address: string): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-
-export const onAddressChange = (address: string): ThunkAction => {
-    return (dispatch: Dispatch, getState: GetState): void => {
     const state: State = getState().sendForm;
     const touched = { ...state.touched };
     touched.address = true;
@@ -505,16 +486,14 @@ export const onAddressChange = (address: string): ThunkAction => {
             ...state,
             untouched: false,
             touched,
-                address
+            address,
-            }
+        },
     });
 
     dispatch(addressValidation());
-    }
+};
-}
 
-export const onAmountChange = (amount: string): ThunkAction => {
+export const onAmountChange = (amount: string): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
     const state = getState().sendForm;
     const touched = { ...state.touched };
     touched.amount = true;
@@ -527,16 +506,14 @@ export const onAmountChange = (amount: string): ThunkAction => {
             touched,
             setMax: false,
             amount,
-            }
+        },
     });
-    }
+};
-}
 
-export const onCurrencyChange = (currency: { value: string, label: string }): ThunkAction => {
+export const onCurrencyChange = (currency: { value: string, label: string }): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
     const {
         account,
-            network
+        network,
     } = getState().selectedAccount;
     if (!account || !network) return;
 
@@ -560,13 +537,11 @@ export const onCurrencyChange = (currency: { value: string, label: string }): Th
 
     dispatch({
         type: SEND.CURRENCY_CHANGE,
-            state
+        state,
     });
-    }
+};
-}
 
-export const onSetMax = (): ThunkAction => {
+export const onSetMax = (): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
     const state = getState().sendForm;
     const touched = { ...state.touched };
     touched.amount = true;
@@ -578,15 +553,13 @@ export const onSetMax = (): ThunkAction => {
             untouched: false,
             touched,
             setMax: !state.setMax,
-            }
+        },
     });
-    }
+};
-}
 
-export const onFeeLevelChange = (feeLevel: FeeLevel): ThunkAction => {
+export const onFeeLevelChange = (feeLevel: FeeLevel): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
     const {
-            network
+        network,
     } = getState().selectedAccount;
     if (!network) return;
 
@@ -605,11 +578,10 @@ export const onFeeLevelChange = (feeLevel: FeeLevel): ThunkAction => {
         feeLevel.label = `${calculateFee(state.gasPrice, state.gasLimit)} ${state.networkSymbol}`;
     } else {
         const customLevel: ?FeeLevel = state.feeLevels.find(f => f.value === 'Custom');
-            if (customLevel)
+        if (customLevel) customLevel.label = '';
-                customLevel.label = '';
         state.gasPrice = feeLevel.gasPrice;
         if (isToken) {
-                state.gasLimit = network.defaultGasLimitTokens.toString()
+            state.gasLimit = network.defaultGasLimitTokens.toString();
         } else {
             state.gasLimit = state.data.length > 0 ? state.gasLimit : network.defaultGasLimit.toString();
         }
@@ -617,19 +589,17 @@ export const onFeeLevelChange = (feeLevel: FeeLevel): ThunkAction => {
 
     dispatch({
         type: SEND.FEE_LEVEL_CHANGE,
-            state
+        state,
     });
-    }
+};
-}
 
 // Manually triggered from user
 // Update gasPrice to recommended value
 
-export const updateFeeLevels = (): ThunkAction => {
+export const updateFeeLevels = (): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
     const {
         account,
-            network
+        network,
     } = getState().selectedAccount;
     if (!account || !network) return;
 
@@ -659,14 +629,11 @@ export const updateFeeLevels = (): ThunkAction => {
 
     dispatch({
         type: SEND.UPDATE_FEE_LEVELS,
-            state
+        state,
     });
-    }
+};
-}
-
-export const onGasPriceChange = (gasPrice: string): ThunkAction => {
-    return (dispatch: Dispatch, getState: GetState): void => {
 
+export const onGasPriceChange = (gasPrice: string): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
     const currentState: State = getState().sendForm;
     const isToken: boolean = currentState.currency !== currentState.networkSymbol;
 
@@ -677,7 +644,7 @@ export const onGasPriceChange = (gasPrice: string): ThunkAction => {
         ...currentState,
         untouched: false,
         touched,
-            gasPrice: gasPrice,
+        gasPrice,
     };
 
     if (currentState.selectedFeeLevel.value !== 'Custom') {
@@ -688,14 +655,11 @@ export const onGasPriceChange = (gasPrice: string): ThunkAction => {
 
     dispatch({
         type: SEND.GAS_PRICE_CHANGE,
-            state
+        state,
     });
-    }
+};
-}
-
-export const onGasLimitChange = (gasLimit: string, updateFeeLevels: boolean = false): ThunkAction => {
-    return (dispatch: Dispatch, getState: GetState): void => {
 
+export const onGasLimitChange = (gasLimit: string, updateFeeLevels: boolean = false): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
     const currentState: State = getState().sendForm;
     const isToken: boolean = currentState.currency !== currentState.networkSymbol;
 
@@ -718,13 +682,11 @@ export const onGasLimitChange = (gasLimit: string, updateFeeLevels: boolean = fa
 
     dispatch({
         type: SEND.GAS_LIMIT_CHANGE,
-            state
+        state,
     });
-    }
+};
-}
 
-export const onNonceChange = (nonce: string): AsyncAction => {
+export const onNonceChange = (nonce: string): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-    return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
     const currentState: State = getState().sendForm;
     const touched = { ...currentState.touched };
     touched.nonce = true;
@@ -738,13 +700,11 @@ export const onNonceChange = (nonce: string): AsyncAction => {
 
     dispatch({
         type: SEND.NONCE_CHANGE,
-            state
+        state,
     });
-    }
+};
-}
 
-export const onDataChange = (data: string): AsyncAction => {
+export const onDataChange = (data: string): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-    return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
     const currentState: State = getState().sendForm;
     const touched = { ...currentState.touched };
     touched.data = true;
@@ -765,20 +725,17 @@ export const onDataChange = (data: string): AsyncAction => {
 
     dispatch({
         type: SEND.DATA_CHANGE,
-            state
+        state,
     });
 
     dispatch(estimateGasPrice());
-    }
+};
-}
 
 
-const estimateGasPrice = (): AsyncAction => {
+const estimateGasPrice = (): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-    return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-
     const {
         web3,
-            network
+        network,
     } = getState().selectedAccount;
     if (!web3 || !network) return;
 
@@ -801,7 +758,7 @@ const estimateGasPrice = (): AsyncAction => {
     }
 
     // TODO: allow data starting with 0x ...
-        const data: string = '0x' + (state.data.length % 2 === 0 ? state.data : '0' + state.data);
+    const data: string = `0x${state.data.length % 2 === 0 ? state.data : `0${state.data}`}`;
     const gasLimit = await estimateGas(w3, {
         to: '0x0000000000000000000000000000000000000000',
         data,
@@ -812,18 +769,14 @@ const estimateGasPrice = (): AsyncAction => {
     if (getState().sendForm.data === requestedData) {
         dispatch(onGasLimitChange(gasLimit.toString()));
     }
-    }
+};
-    
-}
-
-export const onSend = (): AsyncAction => {
-    return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
 
+export const onSend = (): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
     const {
         account,
         network,
         web3,
-            pending
+        pending,
     } = getState().selectedAccount;
     if (!account || !web3 || !network) return;
 
@@ -834,7 +787,7 @@ export const onSend = (): AsyncAction => {
 
     const address_n = account.addressPath;
 
-        let data: string = '0x' + currentState.data;
+    let data: string = `0x${currentState.data}`;
     let txAmount: string = w3.toHex(w3.toWei(currentState.amount, 'ether'));
     let txAddress: string = currentState.address;
     if (isToken) {
@@ -847,7 +800,7 @@ export const onSend = (): AsyncAction => {
         data = contract.transfer.getData(currentState.address, amountValue, {
             from: account.address,
             gasLimit: currentState.gasLimit,
-                gasPrice: currentState.gasPrice
+            gasPrice: currentState.gasPrice,
         });
         txAmount = '0x00';
         txAddress = token.address;
@@ -856,7 +809,7 @@ export const onSend = (): AsyncAction => {
     const pendingNonce: number = stateUtils.getPendingNonce(pending);
     const nonce = pendingNonce > 0 && pendingNonce >= account.nonce ? pendingNonce : account.nonce;
 
-        console.warn("NONCE", nonce, account.nonce, pendingNonce)
+    console.warn('NONCE', nonce, account.nonce, pendingNonce);
 
     const txData = {
         address_n,
@@ -870,17 +823,17 @@ export const onSend = (): AsyncAction => {
         gasPrice: w3.toHex(EthereumjsUnits.convert(currentState.gasPrice, 'gwei', 'wei')),
         r: '',
         s: '',
-            v: ''
+        v: '',
-        }
+    };
 
     const selected: ?TrezorDevice = getState().wallet.selectedDevice;
     if (!selected) return;
 
-        let signedTransaction = await TrezorConnect.ethereumSignTransaction({
+    const signedTransaction = await TrezorConnect.ethereumSignTransaction({
         device: {
             path: selected.path,
             instance: selected.instance,
-                state: selected.state
+            state: selected.state,
         },
         useEmptyPassphrase: !selected.instance,
         path: txData.address_n,
@@ -890,11 +843,10 @@ export const onSend = (): AsyncAction => {
         to: strip(txData.to),
         value: strip(txData.value),
         data: strip(txData.data),
-            chainId: txData.chainId
+        chainId: txData.chainId,
     });
 
     if (!signedTransaction || !signedTransaction.success) {
-
         dispatch({
             type: NOTIFICATION.ADD,
             payload: {
@@ -902,26 +854,25 @@ export const onSend = (): AsyncAction => {
                 title: 'Transaction error',
                 message: signedTransaction.payload.error,
                 cancelable: true,
-                    actions: [ ]
+                actions: [],
-                }
+            },
-            })
+        });
         return;
     }
 
-        txData.r = '0x' + signedTransaction.payload.r;
+    txData.r = `0x${signedTransaction.payload.r}`;
-        txData.s = '0x' + signedTransaction.payload.s;
+    txData.s = `0x${signedTransaction.payload.s}`;
     txData.v = w3.toHex(signedTransaction.payload.v);
 
 
-
     try {
         const tx = new EthereumjsTx(txData);
-            const serializedTx = '0x' + tx.serialize().toString('hex');
+        const serializedTx = `0x${tx.serialize().toString('hex')}`;
         const txid: string = await pushTx(w3, serializedTx);
 
         dispatch({
             type: SEND.TX_COMPLETE,
-                account: account,
+            account,
             selectedCurrency: currentState.currency,
             amount: currentState.amount,
             total: currentState.total,
@@ -945,12 +896,10 @@ export const onSend = (): AsyncAction => {
                 title: 'Transaction success',
                 message: `<a href="${network.explorer.tx}${txid}" class="green" target="_blank" rel="noreferrer noopener">See transaction detail</a>`,
                 cancelable: true,
-                    actions: []
+                actions: [],
-                }
+            },
         });
-
     } catch (error) {
-
         dispatch({
             type: NOTIFICATION.ADD,
             payload: {
@@ -958,12 +907,11 @@ export const onSend = (): AsyncAction => {
                 title: 'Transaction error',
                 message: error.message || error,
                 cancelable: true,
-                    actions: [ ]
+                actions: [],
-                }
+            },
         });
     }
-    }
+};
-}
 
 export default {
     toggleAdvanced,
@@ -978,4 +926,4 @@ export default {
     onNonceChange,
     onDataChange,
     onSend,
-}
+};

src/js/actions/SessionStorageActions.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import type { State as SendFormState } from '../reducers/SendFormReducer';
 import type {
@@ -10,8 +10,7 @@ import type {
 
 const PREFIX: string = 'trezor:draft-tx:';
 
-export const save = (): ThunkAction => {
+export const save = (): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
     if (typeof window.localStorage === 'undefined') return;
 
     const location = getState().router.location.pathname;
@@ -20,14 +19,12 @@ export const save = (): ThunkAction => {
         try {
             window.sessionStorage.setItem(`${PREFIX}${location}`, JSON.stringify(state));
         } catch (error) {
-                console.error("Saving sessionStorage error: " + error)
+            console.error(`Saving sessionStorage error: ${error}`);
-            }
-        }
         }
     }
+};
 
 export const load = (location: string): ?SendFormState => {
-
     if (typeof window.localStorage === 'undefined') return;
 
     try {
@@ -39,20 +36,16 @@ export const load = (location: string): ?SendFormState => {
         }
         return state;
     } catch (error) {
-        console.error("Loading sessionStorage error: " + error)
+        console.error(`Loading sessionStorage error: ${error}`);
     }
+};
 
-    return;
+export const clear = (): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-}
-
-export const clear = (): ThunkAction => {
-    return (dispatch: Dispatch, getState: GetState): void => {
     if (typeof window.localStorage === 'undefined') return;
     const location = getState().router.location.pathname;
     try {
         window.sessionStorage.removeItem(`${PREFIX}${location}`);
     } catch (error) {
-            console.error("Clearing sessionStorage error: " + error)
+        console.error(`Clearing sessionStorage error: ${error}`);
-        }
-    }
     }
+};

src/js/actions/SummaryActions.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import EthereumjsUtil from 'ethereumjs-util';
 import * as SUMMARY from './constants/summary';
@@ -7,7 +7,9 @@ import * as TOKEN from './constants/token';
 import { resolveAfter } from '../utils/promiseUtils';
 import { initialState } from '../reducers/SummaryReducer';
 
-import type { ThunkAction, AsyncAction, Action, GetState, Dispatch } from '~/flowtype';
+import type {
+    ThunkAction, AsyncAction, Action, GetState, Dispatch,
+} from '~/flowtype';
 import type { State } from '../reducers/SummaryReducer';
 import type { Token } from '../reducers/TokensReducer';
 
@@ -20,29 +22,21 @@ export type SummaryAction = {
     type: typeof SUMMARY.DETAILS_TOGGLE
 }
 
-export const init = (): ThunkAction => {
+export const init = (): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
-    
     const state: State = {
         ...initialState,
     };
 
     dispatch({
         type: SUMMARY.INIT,
-            state: state
+        state,
     });
-    }
+};
-}
 
-export const dispose = (): Action => {
+export const dispose = (): Action => ({
-    return {
+    type: SUMMARY.DISPOSE,
-        type: SUMMARY.DISPOSE
+});
-    }
-}
-
-export const onDetailsToggle = (): Action => {
-    return {
-        type: SUMMARY.DETAILS_TOGGLE
-    }
-}
 
+export const onDetailsToggle = (): Action => ({
+    type: SUMMARY.DETAILS_TOGGLE,
+});

src/js/actions/TokenActions.js

@@ -1,10 +1,12 @@
 /* @flow */
-'use strict';
+
 
 import * as TOKEN from './constants/token';
 import { getTokenInfoAsync, getTokenBalanceAsync } from './Web3Actions';
 
-import type { GetState, AsyncAction, Action, Dispatch } from '~/flowtype';
+import type {
+    GetState, AsyncAction, Action, Dispatch,
+} from '~/flowtype';
 import type { State, Token } from '../reducers/TokensReducer';
 import type { Account } from '../reducers/AccountsReducer';
 import type { NetworkToken } from '../reducers/LocalStorageReducer';
@@ -29,42 +31,32 @@ type SelectOptions = {
 
 
 // action from component <reactSelect>
-export const load = (input: string, network: string): AsyncAction => {
+export const load = (input: string, network: string): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<any> => {
-    return async (dispatch: Dispatch, getState: GetState): Promise<any> => {
-
     if (input.length < 1) return;
 
     const tokens = getState().localStorage.tokens[network];
     const value = input.toLowerCase();
-        const result = tokens.filter(t => 
+    const result = tokens.filter(t => t.symbol.toLowerCase().indexOf(value) >= 0
-            t.symbol.toLowerCase().indexOf(value) >= 0 || 
+            || t.address.toLowerCase().indexOf(value) >= 0
-            t.address.toLowerCase().indexOf(value) >= 0 ||
+            || t.name.toLowerCase().indexOf(value) >= 0);
-            t.name.toLowerCase().indexOf(value) >= 0
-        );
 
     if (result.length > 0) {
         return { options: result };
-        } else {
+    }
     const web3instance = getState().web3.find(w3 => w3.network === network);
     if (!web3instance) return;
 
     const info = await getTokenInfoAsync(web3instance.erc20, input);
     if (info) {
         return {
-                    options: [ info ]
+            options: [info],
-                }
+        };
     }
     //await resolveAfter(300000);
     //await resolveAfter(3000);
+};
 
-        }
+export const add = (token: NetworkToken, account: Account): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-        return;
-    }
-}
-
-export const add = (token: NetworkToken, account: Account): AsyncAction => {
-    return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-
     const web3instance = getState().web3.find(w3 => w3.network === account.network);
     if (!web3instance) return;
 
@@ -77,23 +69,21 @@ export const add = (token: NetworkToken, account: Account): AsyncAction => {
         address: token.address,
         ethAddress: account.address,
         decimals: token.decimals,
-            balance: '0'
+        balance: '0',
-        }
+    };
 
     dispatch({
         type: TOKEN.ADD,
-            payload: tkn
+        payload: tkn,
     });
 
     const tokenBalance = await getTokenBalanceAsync(web3instance.erc20, tkn);
-        dispatch( setBalance(token.address, account.address, tokenBalance) )
+    dispatch(setBalance(token.address, account.address, tokenBalance));
-    }
+};
-}
 
-export const setBalance = (tokenAddress: string, ethAddress: string, balance: string): AsyncAction => {
+export const setBalance = (tokenAddress: string, ethAddress: string, balance: string): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-    return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
     const newState: Array<Token> = [...getState().tokens];
-        let token: ?Token = newState.find(t => t.address === tokenAddress && t.ethAddress === ethAddress);
+    const token: ?Token = newState.find(t => t.address === tokenAddress && t.ethAddress === ethAddress);
     if (token) {
         token.loaded = true;
         token.balance = balance;
@@ -101,14 +91,11 @@ export const setBalance = (tokenAddress: string, ethAddress: string, balance: st
 
     dispatch({
         type: TOKEN.SET_BALANCE,
-            payload: newState
+        payload: newState,
-        })
+    });
-    }
+};
-}
 
-export const remove = (token: Token): Action => {
+export const remove = (token: Token): Action => ({
-    return {
     type: TOKEN.REMOVE,
-        token
+    token,
-    }
+});
-}

src/js/actions/TrezorConnectActions.js

@@ -1,7 +1,9 @@
 /* @flow */
-'use strict';
 
-import TrezorConnect, { UI, DEVICE, DEVICE_EVENT, UI_EVENT, TRANSPORT_EVENT } from 'trezor-connect';
+
+import TrezorConnect, {
+    UI, DEVICE, DEVICE_EVENT, UI_EVENT, TRANSPORT_EVENT,
+} from 'trezor-connect';
 import * as TOKEN from './constants/token';
 import * as CONNECT from './constants/TrezorConnect';
 import * as NOTIFICATION from './constants/notification';
@@ -20,7 +22,7 @@ import type {
     TransportMessage,
     DeviceMessageType,
     TransportMessageType,
-    UiMessageType
+    UiMessageType,
 } from 'trezor-connect';
 
 import type {
@@ -30,7 +32,7 @@ import type {
     ThunkAction,
     AsyncAction,
     TrezorDevice,
-    RouterLocationState
+    RouterLocationState,
 } from '~/flowtype';
 
 
@@ -81,15 +83,14 @@ export type TrezorConnectAction = {
 };
 
 
-export const init = (): AsyncAction => {
+export const init = (): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-    return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
     // set listeners
     TrezorConnect.on(DEVICE_EVENT, (event: DeviceMessage): void => {
         // post event to reducers
         const type: DeviceMessageType = event.type; // assert flow type
         dispatch({
             type,
-                device: event.payload
+            device: event.payload,
         });
     });
 
@@ -98,7 +99,7 @@ export const init = (): AsyncAction => {
         const type: UiMessageType = event.type; // assert flow type
         dispatch({
             type,
-                payload: event.payload
+            payload: event.payload,
         });
     });
 
@@ -107,7 +108,7 @@ export const init = (): AsyncAction => {
         const type: TransportMessageType = event.type; // assert flow type
         dispatch({
             type,
-                payload: event.payload
+            payload: event.payload,
         });
     });
 
@@ -119,7 +120,7 @@ export const init = (): AsyncAction => {
             debug: false,
             popup: false,
             webusb: true,
-                pendingTransportEvent: (getState().devices.length < 1)
+            pendingTransportEvent: (getState().devices.length < 1),
         });
     } catch (error) {
         // dispatch({
@@ -127,17 +128,14 @@ export const init = (): AsyncAction => {
         //     error
         // })
     }
-    }
+};
-}
 
 // called after backend was initialized
 // set listeners for connect/disconnect
-export const postInit = (): ThunkAction => {
+export const postInit = (): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
-
     const handleDeviceConnect = (device: Device) => {
         dispatch(initConnectedDevice(device));
-        }
+    };
 
     TrezorConnect.off(DEVICE.CONNECT, handleDeviceConnect);
     TrezorConnect.off(DEVICE.CONNECT_UNACQUIRED, handleDeviceConnect);
@@ -168,7 +166,7 @@ export const postInit = (): ThunkAction => {
 
             // TODO
             if (initialParams) {
-                    if (!initialParams.hasOwnProperty("network") && initialPathname !== getState().router.location.pathname) {
+                if (!initialParams.hasOwnProperty('network') && initialPathname !== getState().router.location.pathname) {
                     // dispatch( push(initialPathname) );
                 } else {
 
@@ -176,21 +174,16 @@ export const postInit = (): ThunkAction => {
             }
         }
     }
-    }
+};
-}
 
-const sortDevices = (devices: Array<TrezorDevice>): Array<TrezorDevice> => {
+const sortDevices = (devices: Array<TrezorDevice>): Array<TrezorDevice> => devices.sort((a, b) => {
-    return devices.sort((a, b) => {
     if (!a.ts || !b.ts) {
         return -1;
-        } else {
+    }
     return a.ts > b.ts ? -1 : 1;
-        }
 });
-}
 
-export const initConnectedDevice = (device: TrezorDevice | Device): ThunkAction => {
+export const initConnectedDevice = (device: TrezorDevice | Device): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
     const selected = getState().wallet.selectedDevice;
     // if (!selected || (selected && selected.state)) {
     dispatch(onSelectDevice(device));
@@ -200,15 +193,13 @@ export const initConnectedDevice = (device: TrezorDevice | Device): ThunkAction
     // } else if (!selected) {
     //     dispatch( onSelectDevice(device) );
     // }
-    }
+};
-}
 
 // selection from Aside dropdown button
 // after device_connect event
 // or after acquiring device
 // device type could be local TrezorDevice or Device (from trezor-connect device_connect event)
-export const onSelectDevice = (device: TrezorDevice | Device): ThunkAction => {
+export const onSelectDevice = (device: TrezorDevice | Device): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
     // || device.isUsedElsewhere
 
     // switch to initial url and reset this value
@@ -222,7 +213,6 @@ export const onSelectDevice = (device: TrezorDevice | Device): ThunkAction => {
     } else if (typeof device.instance === 'number') {
         dispatch(push(`/device/${device.features.device_id}:${device.instance}`));
     } else {
-
         const deviceId: string = device.features.device_id;
         const urlParams: RouterLocationState = getState().router.location.state;
         // let url: string = `/device/${ device.features.device_id }/network/ethereum/account/0`;
@@ -247,12 +237,9 @@ export const onSelectDevice = (device: TrezorDevice | Device): ThunkAction => {
             dispatch(push(url));
         }
     }
-    }
+};
-}
-
-export const switchToFirstAvailableDevice = (): AsyncAction => {
-    return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
 
+export const switchToFirstAvailableDevice = (): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
     const { devices } = getState();
     if (devices.length > 0) {
         // TODO: Priority:
@@ -270,23 +257,20 @@ export const switchToFirstAvailableDevice = (): AsyncAction => {
     } else {
         dispatch(push('/'));
     }
-    }
+};
-}
 
 
-export const getSelectedDeviceState = (): AsyncAction => {
+export const getSelectedDeviceState = (): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-    return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
     const selected = getState().wallet.selectedDevice;
     if (selected
             && selected.connected
             && (selected.features && !selected.features.bootloader_mode && selected.features.initialized)
             && !selected.state) {
-
         const response = await TrezorConnect.getDeviceState({
             device: {
                 path: selected.path,
                 instance: selected.instance,
-                    state: selected.state
+                state: selected.state,
             },
             useEmptyPassphrase: !selected.instance,
         });
@@ -295,7 +279,7 @@ export const getSelectedDeviceState = (): AsyncAction => {
             dispatch({
                 type: CONNECT.AUTH_DEVICE,
                 device: selected,
-                    state: response.payload.state
+                state: response.payload.state,
             });
         } else {
             dispatch({
@@ -312,22 +296,19 @@ export const getSelectedDeviceState = (): AsyncAction => {
                             callback: () => {
                                 dispatch({
                                     type: NOTIFICATION.CLOSE,
-                                        payload: { devicePath: selected.path }
+                                    payload: { devicePath: selected.path },
                                 });
                                 dispatch(getSelectedDeviceState());
-                                }
+                            },
-                            }
+                        },
-                        ]
+                    ],
-                    }
+                },
             });
         }
     }
-    }
+};
-}
-
-export const deviceDisconnect = (device: Device): AsyncAction => {
-    return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
 
+export const deviceDisconnect = (device: Device): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
     const selected: ?TrezorDevice = getState().wallet.selectedDevice;
 
     if (device && device.features) {
@@ -344,11 +325,9 @@ export const deviceDisconnect = (device: Device): AsyncAction => {
             });
         }
     }
-    }
+};
-}
 
-export const coinChanged = (network: ?string): ThunkAction => {
+export const coinChanged = (network: ?string): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
     const selected: ?TrezorDevice = getState().wallet.selectedDevice;
     if (!selected) return;
 
@@ -357,23 +336,21 @@ export const coinChanged = (network: ?string): ThunkAction => {
     if (network) {
         dispatch(DiscoveryActions.start(selected, network));
     }
-    }
+};
-}
 
 export function reload(): AsyncAction {
     return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-    }
+    };
 }
 
 export function acquire(): AsyncAction {
     return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-
         const selected: ?TrezorDevice = getState().wallet.selectedDevice;
         if (!selected) return;
 
         dispatch({
             type: CONNECT.START_ACQUIRING,
-        })
+        });
 
         const response = await TrezorConnect.getFeatures({
             device: {
@@ -398,41 +375,35 @@ export function acquire(): AsyncAction {
                     //         }
                     //     }
                     // ]
-                }
+                },
-            })
+            });
         }
 
         dispatch({
             type: CONNECT.STOP_ACQUIRING,
-        })
+        });
-    }
+    };
 }
 
-export const gotoDeviceSettings = (device: TrezorDevice): ThunkAction => {
+export const gotoDeviceSettings = (device: TrezorDevice): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
     if (device.features) {
         const devUrl: string = `${device.features.device_id}${device.instance ? `:${device.instance}` : ''}`;
         dispatch(push(`/device/${devUrl}/settings`));
     }
-    }
+};
-}
 
 // called from Aside - device menu (forget single instance)
-export const forget = (device: TrezorDevice): Action => {
+export const forget = (device: TrezorDevice): Action => ({
-    return {
     type: CONNECT.FORGET_REQUEST,
-        device
+    device,
-    };
+});
-}
 
-export const duplicateDevice = (device: TrezorDevice): AsyncAction => {
+export const duplicateDevice = (device: TrezorDevice): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-    return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
     dispatch({
         type: CONNECT.TRY_TO_DUPLICATE,
-            device
+        device,
-        })
+    });
-    }
+};
-}
 
 
 export function addAccount(): ThunkAction {
@@ -440,5 +411,5 @@ export function addAccount(): ThunkAction {
         const selected = getState().wallet.selectedDevice;
         if (!selected) return;
         dispatch(DiscoveryActions.start(selected, getState().router.location.state.network, true)); // TODO: network nicer
-    }
+    };
 }

src/js/actions/WalletActions.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import { LOCATION_CHANGE } from 'react-router-redux';
 import * as WALLET from './constants/wallet';
@@ -21,7 +21,7 @@ import type
     Action,
     Dispatch,
     GetState,
-    State
+    State,
 } from '~/flowtype';
 
 export type WalletAction = {
@@ -47,62 +47,48 @@ export type WalletAction = {
     devices: Array<TrezorDevice>
 }
 
-export const init = (): ThunkAction => {
+export const init = (): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
-
     const updateOnlineStatus = (event) => {
         dispatch({
             type: WALLET.ONLINE_STATUS,
-                online: navigator.onLine
+            online: navigator.onLine,
-            })
+        });
-        }
+    };
     window.addEventListener('online', updateOnlineStatus);
     window.addEventListener('offline', updateOnlineStatus);
-    }
+};
-}
 
-export const onBeforeUnload = (): WalletAction => {
+export const onBeforeUnload = (): WalletAction => ({
-    return {
+    type: WALLET.ON_BEFORE_UNLOAD,
-        type: WALLET.ON_BEFORE_UNLOAD
+});
-    }
-}
 
-export const toggleDeviceDropdown = (opened: boolean): WalletAction => {
+export const toggleDeviceDropdown = (opened: boolean): WalletAction => ({
-    return {
     type: WALLET.TOGGLE_DEVICE_DROPDOWN,
-        opened
+    opened,
-    }
+});
-}
 
 // This method will be called after each DEVICE.CONNECT action
 // if connected device has different "passphrase_protection" settings than saved instances
 // all saved instances will be removed immediately inside DevicesReducer
 // This method will clear leftovers associated with removed instances from reducers.
 // (DiscoveryReducer, AccountReducer, TokensReducer)
-export const clearUnavailableDevicesData = (prevState: State, device: Device): ThunkAction => {
+export const clearUnavailableDevicesData = (prevState: State, device: Device): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
-    return (dispatch: Dispatch, getState: GetState): void => {
-
     if (!device.features) return;
 
-        const affectedDevices = prevState.devices.filter(d => 
+    const affectedDevices = prevState.devices.filter(d => d.features
-            d.features 
             && d.features.device_id === device.features.device_id
-            && d.features.passphrase_protection !== device.features.passphrase_protection
+            && d.features.passphrase_protection !== device.features.passphrase_protection);
-        );
 
     if (affectedDevices.length > 0) {
         dispatch({
             type: WALLET.CLEAR_UNAVAILABLE_DEVICE_DATA,
             devices: affectedDevices,
-            })
+        });
-        }
-    }
     }
+};
 
 
-export const updateSelectedValues = (prevState: State, action: Action): AsyncAction => {
+export const updateSelectedValues = (prevState: State, action: Action): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-    return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-
     const locationChange: boolean = action.type === LOCATION_CHANGE;
     const state: State = getState();
 
@@ -113,16 +99,14 @@ export const updateSelectedValues = (prevState: State, action: Action): AsyncAct
             if (device && stateUtils.isSelectedDevice(state.wallet.selectedDevice, device)) {
                 dispatch({
                     type: WALLET.UPDATE_SELECTED_DEVICE,
-                        device
+                    device,
                 });
             } else {
                 dispatch({
                     type: WALLET.SET_SELECTED_DEVICE,
-                        device
+                    device,
                 });
             }
         }
     }
-
+};
-    }
-}

src/js/actions/Web3Actions.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import Web3 from 'web3';
 import HDKey from 'hdkey';
@@ -7,11 +7,14 @@ import HDKey from 'hdkey';
 import EthereumjsUtil from 'ethereumjs-util';
 import EthereumjsTx from 'ethereumjs-tx';
 import TrezorConnect from 'trezor-connect';
+import type { ContractFactory, EstimateGasOptions } from 'web3';
+import type BigNumber from 'bignumber.js';
+import type { TransactionStatus, TransactionReceipt } from 'web3';
 import { strip } from '../utils/ethUtils';
 import * as WEB3 from './constants/web3';
 import * as PENDING from './constants/pendingTx';
-import * as AccountsActions from '../actions/AccountsActions';
+import * as AccountsActions from './AccountsActions';
-import * as TokenActions from '../actions/TokenActions';
+import * as TokenActions from './TokenActions';
 
 import type {
     Dispatch,
@@ -19,15 +22,12 @@ import type {
     Action,
     AsyncAction,
 } from '~/flowtype';
-import type { ContractFactory, EstimateGasOptions } from 'web3';
-import type BigNumber from 'bignumber.js';
 
 import type { Account } from '../reducers/AccountsReducer';
 import type { PendingTx } from '../reducers/PendingTxReducer';
 import type { Web3Instance } from '../reducers/Web3Reducer';
 import type { Token } from '../reducers/TokensReducer';
 import type { NetworkToken } from '../reducers/LocalStorageReducer';
-import type { TransactionStatus, TransactionReceipt } from 'web3';
 
 export type Web3Action = {
     type: typeof WEB3.READY,
@@ -53,7 +53,6 @@ export type Web3UpdateGasPriceAction = {
 
 export function init(instance: ?Web3, coinIndex: number = 0): AsyncAction {
     return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-
         const { config, ERC20Abi } = getState().localStorage;
 
         const coin = config.coins[coinIndex];
@@ -72,12 +71,12 @@ export function init(instance: ?Web3, coinIndex: number = 0): AsyncAction {
 
         if (instance) {
             const currentHost = instance.currentProvider.host;
-            let currentHostIndex: number = urls.indexOf(currentHost);
+            const currentHostIndex: number = urls.indexOf(currentHost);
 
             if (currentHostIndex + 1 < urls.length) {
                 web3host = urls[currentHostIndex + 1];
             } else {
-                console.error("TODO: Backend " + network + " not working", instance.currentProvider );
+                console.error(`TODO: Backend ${network} not working`, instance.currentProvider);
 
                 dispatch({
                     type: WEB3.CREATE,
@@ -88,7 +87,7 @@ export function init(instance: ?Web3, coinIndex: number = 0): AsyncAction {
                         erc20: instance.eth.contract(ERC20Abi),
                         latestBlock: '0',
                         gasPrice: '0',
-                    }
+                    },
                 });
 
                 // try next coin
@@ -122,12 +121,12 @@ export function init(instance: ?Web3, coinIndex: number = 0): AsyncAction {
             type: WEB3.CREATE,
             instance: {
                 network,
-                web3: web3,
+                web3,
                 chainId: coin.chainId,
                 erc20,
                 latestBlock: '0',
                 gasPrice: '0',
-            }
+            },
         });
 
         // dispatch({
@@ -137,8 +136,6 @@ export function init(instance: ?Web3, coinIndex: number = 0): AsyncAction {
         // });
 
 
-
-
         // console.log("GET CHAIN", instance.version.network)
 
         // instance.version.getWhisper((err, shh) => {
@@ -157,10 +154,9 @@ export function init(instance: ?Web3, coinIndex: number = 0): AsyncAction {
 
         const onBlockMined = async (error: ?Error, blockHash: ?string) => {
             if (error) {
-
                 window.setTimeout(() => {
                     // try again
-                    onBlockMined(new Error("manually_triggered_error"), undefined);
+                    onBlockMined(new Error('manually_triggered_error'), undefined);
                 }, 30000);
             }
 
@@ -168,7 +164,7 @@ export function init(instance: ?Web3, coinIndex: number = 0): AsyncAction {
                 dispatch({
                     type: WEB3.BLOCK_UPDATED,
                     network,
-                    blockHash
+                    blockHash,
                 });
             }
 
@@ -187,7 +183,6 @@ export function init(instance: ?Web3, coinIndex: number = 0): AsyncAction {
                 }
                 dispatch(getBalance(account));
                 // dispatch( getNonce(account) );
-                
             }
 
             const tokens = getState().tokens.filter(t => t.network === network);
@@ -201,11 +196,10 @@ export function init(instance: ?Web3, coinIndex: number = 0): AsyncAction {
             for (const tx of pending) {
                 dispatch(getTransactionReceipt(tx));
             }
-
+        };
-        }
 
         // latestBlockFilter.watch(onBlockMined);
-        onBlockMined(new Error("manually_triggered_error"), undefined);
+        onBlockMined(new Error('manually_triggered_error'), undefined);
 
 
         // init next coin
@@ -217,13 +211,12 @@ export function init(instance: ?Web3, coinIndex: number = 0): AsyncAction {
         // instance2.eth.getGasPrice((error, gasPrice) => {
         //     console.log("---gasss price from UBQ", gasPrice)
         // });
-    }
+    };
 }
 
 
 export function getGasPrice(network: string): AsyncAction {
     return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-
         const index: number = getState().web3.findIndex(w3 => w3.network === network);
 
         const web3instance = getState().web3[index];
@@ -233,18 +226,17 @@ export function getGasPrice(network: string): AsyncAction {
                 if (web3instance.gasPrice && web3instance.gasPrice.toString() !== gasPrice.toString()) {
                     dispatch({
                         type: WEB3.GAS_PRICE_UPDATED,
-                        network: network,
+                        network,
-                        gasPrice
+                        gasPrice,
                     });
                 }
             }
         });
-    }
+    };
 }
 
 export function getBalance(account: Account): AsyncAction {
     return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-
         const web3instance = getState().web3.filter(w3 => w3.network === account.network)[0];
         const web3: Web3 = web3instance.web3;
 
@@ -256,19 +248,18 @@ export function getBalance(account: Account): AsyncAction {
                         account.address,
                         account.network,
                         account.deviceState,
-                        newBalance
+                        newBalance,
                     ));
 
                     // dispatch( loadHistory(addr) );
                 }
             }
         });
-    }
+    };
 }
 
 export function getTokenBalance(token: Token): AsyncAction {
     return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-
         const web3instance = getState().web3.filter(w3 => w3.network === token.network)[0];
         const web3 = web3instance.web3;
         const contract = web3instance.erc20.at(token.address);
@@ -280,18 +271,16 @@ export function getTokenBalance(token: Token): AsyncAction {
                     dispatch(TokenActions.setBalance(
                         token.address,
                         token.ethAddress,
-                        newBalance
+                        newBalance,
                     ));
                 }
             }
         });
-    }
+    };
 }
 
 export function getNonce(account: Account): AsyncAction {
-
     return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-
         const web3instance = getState().web3.filter(w3 => w3.network === account.network)[0];
         const web3 = web3instance.web3;
 
@@ -302,12 +291,10 @@ export function getNonce(account: Account): AsyncAction {
                 }
             }
         });
-    }
+    };
 }
 
-export const getTransactionReceipt = (tx: PendingTx): AsyncAction => {
+export const getTransactionReceipt = (tx: PendingTx): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-    return async (dispatch: Dispatch, getState: GetState): Promise<void> => {
-
     const web3instance = getState().web3.filter(w3 => w3.network === tx.network)[0];
     const web3 = web3instance.web3;
 
@@ -316,31 +303,28 @@ export const getTransactionReceipt = (tx: PendingTx): AsyncAction => {
             dispatch({
                 type: PENDING.TX_NOT_FOUND,
                 tx,
-                })
+            });
         } else if (status && status.blockNumber) {
             web3.eth.getTransactionReceipt(tx.id, (error: Error, receipt: TransactionReceipt) => {
                 if (receipt) {
                     if (status.gas !== receipt.gasUsed) {
                         dispatch({
                             type: PENDING.TX_TOKEN_ERROR,
-                                tx
+                            tx,
-                            })
+                        });
                     }
                     dispatch({
                         type: PENDING.TX_RESOLVED,
                         tx,
-                            receipt
+                        receipt,
-                        })
-                    }
-                    
                     });
                 }
             });
         }
-}
+    });
+};
 
-export const getTransaction = (web3: Web3, txid: string): Promise<any> => {
+export const getTransaction = (web3: Web3, txid: string): Promise<any> => new Promise((resolve, reject) => {
-    return new Promise((resolve, reject) => {
     web3.eth.getTransaction(txid, (error, result) => {
         if (error) {
             reject(error);
@@ -349,10 +333,8 @@ export const getTransaction = (web3: Web3, txid: string): Promise<any> => {
         }
     });
 });
-}
 
-export const getBalanceAsync = (web3: Web3, address: string): Promise<BigNumber> => {
+export const getBalanceAsync = (web3: Web3, address: string): Promise<BigNumber> => new Promise((resolve, reject) => {
-    return new Promise((resolve, reject) => {
     web3.eth.getBalance(address, (error: Error, result: BigNumber) => {
         if (error) {
             reject(error);
@@ -361,11 +343,8 @@ export const getBalanceAsync = (web3: Web3, address: string): Promise<BigNumber>
         }
     });
 });
-}
-
-export const getTokenBalanceAsync = (erc20: ContractFactory, token: Token): Promise<string> => {
-    return new Promise((resolve, reject) => {
 
+export const getTokenBalanceAsync = (erc20: ContractFactory, token: Token): Promise<string> => new Promise((resolve, reject) => {
     const contract = erc20.at(token.address);
     contract.balanceOf(token.ethAddress, (error: Error, balance: BigNumber) => {
         if (error) {
@@ -376,10 +355,8 @@ export const getTokenBalanceAsync = (erc20: ContractFactory, token: Token): Prom
         }
     });
 });
-}
 
-export const getNonceAsync = (web3: Web3, address: string): Promise<number> => {
+export const getNonceAsync = (web3: Web3, address: string): Promise<number> => new Promise((resolve, reject) => {
-    return new Promise((resolve, reject) => {
     web3.eth.getTransactionCount(address, (error: Error, result: number) => {
         if (error) {
             reject(error);
@@ -388,12 +365,9 @@ export const getNonceAsync = (web3: Web3, address: string): Promise<number> => {
         }
     });
 });
-}
 
 
-export const getTokenInfoAsync = (erc20: ContractFactory, address: string): Promise<?NetworkToken> => {
+export const getTokenInfoAsync = (erc20: ContractFactory, address: string): Promise<?NetworkToken> => new Promise((resolve, reject) => {
-    return new Promise((resolve, reject) => {
-
     const contract = erc20.at(address, (error, res) => {
         // console.warn("callback", error, res)
     });
@@ -402,24 +376,24 @@ export const getTokenInfoAsync = (erc20: ContractFactory, address: string): Prom
         address,
         name: '',
         symbol: '',
-            decimals: 0
+        decimals: 0,
     };
 
     contract.name.call((error: Error, name: string) => {
         if (error) {
             resolve(null);
             return;
-            } else {
-                info.name = name;
         }
+        info.name = name;
+
 
         contract.symbol.call((error: Error, symbol: string) => {
             if (error) {
                 resolve(null);
                 return;
-                } else {
-                    info.symbol = symbol;
             }
+            info.symbol = symbol;
+
 
             contract.decimals.call((error: Error, decimals: BigNumber) => {
                 if (decimals) {
@@ -429,13 +403,11 @@ export const getTokenInfoAsync = (erc20: ContractFactory, address: string): Prom
                     resolve(null);
                 }
             });
-            })
         });
     });
-}
+});
 
-export const estimateGas = (web3: Web3, options: EstimateGasOptions): Promise<number> => {
+export const estimateGas = (web3: Web3, options: EstimateGasOptions): Promise<number> => new Promise((resolve, reject) => {
-    return new Promise((resolve, reject) => {
     web3.eth.estimateGas(options, (error: ?Error, gas: ?number) => {
         if (error) {
             reject(error);
@@ -443,11 +415,9 @@ export const estimateGas = (web3: Web3, options: EstimateGasOptions): Promise<nu
             resolve(gas);
         }
     });
-    })
+});
-}
 
-export const pushTx = (web3: Web3, tx: any): Promise<string> => {
+export const pushTx = (web3: Web3, tx: any): Promise<string> => new Promise((resolve, reject) => {
-    return new Promise((resolve, reject) => {
     web3.eth.sendRawTransaction(tx, (error: Error, result: string) => {
         if (error) {
             reject(error);
@@ -455,5 +425,4 @@ export const pushTx = (web3: Web3, tx: any): Promise<string> => {
             resolve(result);
         }
     });
-    })
+});
-}

src/js/actions/constants/TrezorConnect.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 //regExp1 : string = '(.*)'
 //regExp2 : '$1' = '$1'

src/js/actions/constants/account.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 export const INIT: 'account__init' = 'account__init';
 export const DISPOSE: 'account__dispose' = 'account__dispose';

src/js/actions/constants/discovery.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 export const START: 'discovery__start' = 'discovery__start';
 export const STOP: 'discovery__stop' = 'discovery__stop';

src/js/actions/constants/localStorage.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 export const SAVE: 'storage__save' = 'storage__save';
 export const READY: 'storage__ready' = 'storage__ready';

src/js/actions/constants/log.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 export const OPEN: 'log__open' = 'log__open';
 export const CLOSE: 'log__close' = 'log__close';

src/js/actions/constants/modal.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 export const ON_PASSPHRASE_CHANGE: 'action__on_passphrase_change' = 'action__on_passphrase_change';
 export const ON_PASSPHRASE_SHOW: 'action__on_passphrase_show' = 'action__on_passphrase_show';

src/js/actions/constants/notification.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 export const ADD: 'notification__add' = 'notification__add';
 export const CLOSE: 'notification__close' = 'notification__close';

src/js/actions/constants/pendingTx.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 export const FROM_STORAGE: 'pending__from_storage' = 'pending__from_storage';
 export const TX_RESOLVED: 'pending__tx_resolved' = 'pending__tx_resolved';

src/js/actions/constants/receive.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 export const INIT: 'receive__init' = 'receive__init';
 export const DISPOSE: 'receive__dispose' = 'receive__dispose';

src/js/actions/constants/send.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 export const INIT: 'send__init' = 'send__init';
 export const DISPOSE: 'send__dispose' = 'send__dispose';

src/js/actions/constants/summary.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 export const INIT: 'summary__init' = 'summary__init';
 export const DISPOSE: 'summary__dispose' = 'summary__dispose';

src/js/actions/constants/token.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 export const ADD: 'token__add' = 'token__add';
 export const REMOVE: 'token__remove' = 'token__remove';

src/js/actions/constants/wallet.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 export const ON_BEFORE_UNLOAD: 'wallet__on_before_unload' = 'wallet__on_before_unload';
 export const TOGGLE_DEVICE_DROPDOWN: 'wallet__toggle_dropdown' = 'wallet__toggle_dropdown';

src/js/actions/constants/web3.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 export const START: 'web3__start' = 'web3__start';
 export const STOP: 'web3__stop' = 'web3__stop';

src/js/components/common/Footer.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 import { bindActionCreators } from 'redux';
@@ -12,8 +12,7 @@ type Props = {
     toggle: typeof LogActions.toggle
 }
 
-const Footer = (props: Props): React$Element<string> => {
+const Footer = (props: Props): React$Element<string> => (
-    return (
     <footer>
         <span>© 2018</span>
         <a href="http://satoshilabs.com" target="_blank" rel="noreferrer noopener" className="satoshi green">SatoshiLabs</a>
@@ -21,17 +20,12 @@ const Footer = (props: Props): React$Element<string> => {
         <a onClick={props.toggle} className="green">Show Log</a>
     </footer>
 );
-}
 
 export default connect(
-    (state: State) => {
+    (state: State) => ({
-        return {
 
-        }
+    }),
-    },
+    (dispatch: Dispatch) => ({
-    (dispatch: Dispatch) => {
-        return { 
         toggle: bindActionCreators(LogActions.toggle, dispatch),
-        };
+    }),
-    }
 )(Footer);

src/js/components/common/Header.js

@@ -1,12 +1,53 @@
 /* @flow */
-'use strict';
-
 import React from 'react';
+import styled from 'styled-components';
+import colors from '~/js/config/colors';
 
-const Header = (): React$Element<string> => {
+const Wrapper = styled.header`
-    return (
+    width: 100%;
-        <header>
+    height: 52px;
-            <div className="layout-wrapper">
+    background: ${colors.color_header};
+
+    svg {
+         fill: ${colors.color_white};
+         height: 28px;         
+         width: 100px;
+         flex: 1;
+     }
+`;
+
+const LayoutWrapper = styled.div`
+    width: 100%;
+    height: 100%;
+    max-width: 1170px;
+    margin: 0 auto;
+    padding: 0 32px;
+    display: flex;
+    align-items: center;
+`;
+
+const A = styled.a`
+    color: ${colors.color_white};
+    margin-left: 24px;
+
+    &:visited {
+        color: ${colors.color_white};
+        margin-left: 24px;
+    }
+
+    &:first-child {
+        margin: 0px;
+    }
+
+    &:hover,
+    &:active {
+        color: ${colors.color_text_secondary};
+    }
+`;
+
+const Header = (): React$Element<string> => (
+    <Wrapper>
+        <LayoutWrapper>
             <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 163.7 41.9" width="100%" height="100%" preserveAspectRatio="xMinYMin meet">
                 <polygon points="101.1,12.8 118.2,12.8 118.2,17.3 108.9,29.9 118.2,29.9 118.2,35.2 101.1,35.2 101.1,30.7 110.4,18.1 101.1,18.1" />
                 <path d="M158.8,26.9c2.1-0.8,4.3-2.9,4.3-6.6c0-4.5-3.1-7.4-7.7-7.4h-10.5v22.3h5.8v-7.5h2.2l4.1,7.5h6.7L158.8,26.9z M154.7,22.5 h-4V18h4c1.5,0,2.5,0.9,2.5,2.2C157.2,21.6,156.2,22.5,154.7,22.5z" />
@@ -17,14 +58,13 @@ const Header = (): React$Element<string> => {
                 <polygon points="40.5,12.8 58.6,12.8 58.6,18.1 52.4,18.1 52.4,35.2 46.6,35.2 46.6,18.1 40.5,18.1 " />
             </svg>
             <div>
-                    <a href="https://trezor.io/" target="_blank" rel="noreferrer noopener">TREZOR</a>
+                <A href="https://trezor.io/" target="_blank" rel="noreferrer noopener">TREZOR</A>
-                    <a href="https://doc.satoshilabs.com/trezor-user/" target="_blank" rel="noreferrer noopener">Docs</a>
+                <A href="https://doc.satoshilabs.com/trezor-user/" target="_blank" rel="noreferrer noopener">Docs</A>
-                    <a href="https://blog.trezor.io/" target="_blank" rel="noreferrer noopener">Blog</a>
+                <A href="https://blog.trezor.io/" target="_blank" rel="noreferrer noopener">Blog</A>
-                    <a href="https://trezor.io/support/" target="_blank" rel="noreferrer noopener">Support</a>
+                <A href="https://trezor.io/support/" target="_blank" rel="noreferrer noopener">Support</A>
             </div>
-            </div>
+        </LayoutWrapper>
-        </header>
+    </Wrapper>
 );
-}
 
 export default Header;

src/js/components/common/Heading.js

@@ -0,0 +1,40 @@
+// @flow
+
+import styled, { css } from 'styled-components';
+import colors from '~/js/config/colors';
+
+const baseStyles = css`
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    color: ${colors.black};
+    font-weight: bold;
+`;
+
+const H1 = styled.h1`
+  ${baseStyles}
+  font-size: 16px;
+`;
+
+const H2 = styled.h2`
+  ${baseStyles};
+  font-size: 14px;
+`;
+
+const H3 = styled.h3`
+  ${baseStyles};
+  font-size: 12px;
+`;
+
+const H4 = styled.h4`
+  ${baseStyles};
+  font-size: 10px;
+`;
+
+const Heading = {
+    H1,
+    H2,
+    H3,
+    H4,
+};
+
+module.exports = Heading;

src/js/components/common/LoaderCircle.js

@@ -1,14 +1,13 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 
 export default (props: { size: string, label?: string }): React$Element<string> => {
-
     const style = {
         width: `${props.size}px`,
         height: `${props.size}px`,
-    }
+    };
 
     return (
         <div className="loader-circle" style={style}>
@@ -19,4 +18,4 @@ export default (props: { size: string, label?: string }): React$Element<string>
             </svg>
         </div>
     );
-}
+};

src/js/components/common/Log.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 import { bindActionCreators } from 'redux';
@@ -14,8 +14,7 @@ type Props = {
 }
 
 const Log = (props: Props): ?React$Element<string> => {
-    if (!props.log.opened)
+    if (!props.log.opened) return null;
-        return null;
 
     // const entries = props.log.entries.map(entry => {
     //     return (
@@ -25,23 +24,19 @@ const Log = (props: Props): ?React$Element<string> => {
 
     return (
         <div className="log">
-            <button className="log-close transparent" onClick={ props.toggle }></button>
+            <button className="log-close transparent" onClick={props.toggle} />
             <h2>Log</h2>
             <p>Attention: The log contains your XPUBs. Anyone with your XPUBs can see your account history.</p>
-            <textarea value={ JSON.stringify(props.log.entries) } readOnly></textarea>
+            <textarea value={JSON.stringify(props.log.entries)} readOnly />
         </div>
-    )
+    );
-}
+};
 
 export default connect(
-    (state: State) => {
+    (state: State) => ({
-        return {
+        log: state.log,
-            log: state.log
+    }),
-        };
+    (dispatch: Dispatch) => ({
-    },
-    (dispatch: Dispatch) => {
-        return { 
         toggle: bindActionCreators(LogActions.toggle, dispatch),
-        };
+    }),
-    }
 )(Log);

src/js/components/common/Notification.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 import { bindActionCreators } from 'redux';
@@ -27,21 +27,21 @@ type NProps = {
 export const Notification = (props: NProps): React$Element<string> => {
     const className = `notification ${props.className}`;
     const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action
-    const actionButtons = props.actions ? props.actions.map((a, i) => {
+    const actionButtons = props.actions ? props.actions.map((a, i) => (
-        return (
+        <button key={i} onClick={(event) => { close(); a.callback(); }} className="transparent">{ a.label }</button>
-            <button key={ i } onClick={ event => { close(); a.callback(); } } className="transparent">{ a.label }</button>
+    )) : null;
-        )
-    }) : null;
 
     return (
         <div className={className}>
             { props.cancelable ? (
-                <button className="notification-close transparent" 
+                <button
-                    onClick={ event => close() }></button>
+                    className="notification-close transparent"
+                    onClick={event => close()}
+                />
             ) : null }
             <div className="notification-body">
                 <h2>{ props.title }</h2>
-                { props.message ? (<p dangerouslySetInnerHTML={{__html: props.message }}></p>) : null }
+                { props.message ? (<p dangerouslySetInnerHTML={{ __html: props.message }} />) : null }
             </div>
             { props.actions && props.actions.length > 0 ? (
                 <div className="notification-action">
@@ -50,13 +50,12 @@ export const Notification = (props: NProps): React$Element<string>  => {
             ) : null }
 
         </div>
-    )
+    );
-}
+};
 
 export const NotificationGroup = (props: Props) => {
     const { notifications, close } = props;
-    return notifications.map((n, i) => {
+    return notifications.map((n, i) => (
-        return (
         <Notification
             key={i}
             className={n.type}
@@ -66,19 +65,14 @@ export const NotificationGroup = (props: Props) => {
             actions={n.actions}
             close={close}
         />
-        )
+    ));
-    });
+};
-}
 
 export default connect(
-    (state: State) => {
+    (state: State) => ({
-        return {
+        notifications: state.notifications,
-            notifications: state.notifications
+    }),
-        };
+    (dispatch: Dispatch) => ({
-    },
-    (dispatch: Dispatch) => {
-        return { 
         close: bindActionCreators(NotificationActions.close, dispatch),
-        };
+    }),
-    }
 )(NotificationGroup);

src/js/components/landing/ConnectDevice.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React, { Component } from 'react';
 import TrezorConnect from 'trezor-connect';
@@ -25,14 +25,12 @@ const DisconnectDevice = (props: Props) => {
                     </span>
                 </p>
             </div>
-            <div className="image">
+            <div className="image" />
-            </div>
         </main>
-    )
+    );
-}
+};
 
-const ConnectHIDDevice = (props: Props) => {
+const ConnectHIDDevice = (props: Props) => (
-    return (
     <main>
         <h2 className="claim">The private bank in your hands.</h2>
         <p>TREZOR Wallet is an easy-to-use interface for your TREZOR.</p>
@@ -42,10 +40,10 @@ const ConnectHIDDevice = (props: Props) => {
                 <span>
                     <svg width="12px" height="35px" viewBox="0 0 20 57">
                         <g stroke="none" strokeWidth="1" fill="none" transform="translate(1, 1)">
-                                <rect className="connect-usb-pin" fill="#01B757" x="6" y="39" width="6" height="5"></rect>
+                            <rect className="connect-usb-pin" fill="#01B757" x="6" y="39" width="6" height="5" />
-                                <rect className="connect-usb-cable" stroke="#01B757" strokeWidth="1" x="8.5" y="44.5" width="1" height="11"></rect>
+                            <rect className="connect-usb-cable" stroke="#01B757" strokeWidth="1" x="8.5" y="44.5" width="1" height="11" />
-                                <path stroke="#01B757" d="M8.90856859,33.9811778 L6.43814432,33.9811778 C5.45301486,34.0503113 4.69477081,33.6889084 4.1634122,32.8969691 C3.36637428,31.7090602 -0.000402169348,26.3761977 0.0748097911,23.2982514 C0.124878873,21.2492429 0.0999525141,14.5598149 3.07156595e-05,3.22996744 C-0.000274213164,3.1963928 0.00243636275,3.162859 0.00812115776,3.12976773 C0.28477346,1.51937083 1.22672004,0.617538852 2.8339609,0.424271782 C4.45813658,0.228968338 6.54411954,0.0875444105 9.09190977,0 L9.09190977,0.0169167084 C11.5566027,0.104886477 13.5814718,0.244169993 15.1665175,0.434768145 C16.7530267,0.625542287 17.6912941,1.50671985 17.9813196,3.07830083 C17.9943481,3.14889902 18.0005888,3.22058224 17.9999563,3.29236974 L17.9999901,3.29237004 C17.9004498,14.5907444 17.875676,21.2628703 17.9256686,23.3087478 C18.0008805,26.3866941 14.6341041,31.7195566 13.8370662,32.9074655 C13.3057075,33.6994047 12.5474635,34.0608076 11.562334,33.9916742 L8.90856859,33.9916742 L8.90856859,33.9811778 Z"></path>
+                            <path stroke="#01B757" d="M8.90856859,33.9811778 L6.43814432,33.9811778 C5.45301486,34.0503113 4.69477081,33.6889084 4.1634122,32.8969691 C3.36637428,31.7090602 -0.000402169348,26.3761977 0.0748097911,23.2982514 C0.124878873,21.2492429 0.0999525141,14.5598149 3.07156595e-05,3.22996744 C-0.000274213164,3.1963928 0.00243636275,3.162859 0.00812115776,3.12976773 C0.28477346,1.51937083 1.22672004,0.617538852 2.8339609,0.424271782 C4.45813658,0.228968338 6.54411954,0.0875444105 9.09190977,0 L9.09190977,0.0169167084 C11.5566027,0.104886477 13.5814718,0.244169993 15.1665175,0.434768145 C16.7530267,0.625542287 17.6912941,1.50671985 17.9813196,3.07830083 C17.9943481,3.14889902 18.0005888,3.22058224 17.9999563,3.29236974 L17.9999901,3.29237004 C17.9004498,14.5907444 17.875676,21.2628703 17.9256686,23.3087478 C18.0008805,26.3866941 14.6341041,31.7195566 13.8370662,32.9074655 C13.3057075,33.6994047 12.5474635,34.0608076 11.562334,33.9916742 L8.90856859,33.9916742 L8.90856859,33.9811778 Z" />
-                                <rect fill="#01B757" x="2" y="7" width="14" height="7" rx="0.5625"></rect>
+                            <rect fill="#01B757" x="2" y="7" width="14" height="7" rx="0.5625" />
                         </g>
                     </svg>
                         Connect TREZOR to continue
@@ -59,7 +57,6 @@ const ConnectHIDDevice = (props: Props) => {
         </div>
     </main>
 );
-}
 
 class ConnectWebUsbDevice extends Component<Props> {
     componentDidMount(): void {
@@ -81,10 +78,10 @@ class ConnectWebUsbDevice extends Component<Props> {
                         <span>
                             <svg width="12px" height="35px" viewBox="0 0 20 57">
                                 <g stroke="none" strokeWidth="1" fill="none" transform="translate(1, 1)">
-                                    <rect className="connect-usb-pin" fill="#01B757" x="6" y="39" width="6" height="5"></rect>
+                                    <rect className="connect-usb-pin" fill="#01B757" x="6" y="39" width="6" height="5" />
-                                    <rect className="connect-usb-cable" stroke="#01B757" strokeWidth="1" x="8.5" y="44.5" width="1" height="11"></rect>
+                                    <rect className="connect-usb-cable" stroke="#01B757" strokeWidth="1" x="8.5" y="44.5" width="1" height="11" />
-                                    <path stroke="#01B757" d="M8.90856859,33.9811778 L6.43814432,33.9811778 C5.45301486,34.0503113 4.69477081,33.6889084 4.1634122,32.8969691 C3.36637428,31.7090602 -0.000402169348,26.3761977 0.0748097911,23.2982514 C0.124878873,21.2492429 0.0999525141,14.5598149 3.07156595e-05,3.22996744 C-0.000274213164,3.1963928 0.00243636275,3.162859 0.00812115776,3.12976773 C0.28477346,1.51937083 1.22672004,0.617538852 2.8339609,0.424271782 C4.45813658,0.228968338 6.54411954,0.0875444105 9.09190977,0 L9.09190977,0.0169167084 C11.5566027,0.104886477 13.5814718,0.244169993 15.1665175,0.434768145 C16.7530267,0.625542287 17.6912941,1.50671985 17.9813196,3.07830083 C17.9943481,3.14889902 18.0005888,3.22058224 17.9999563,3.29236974 L17.9999901,3.29237004 C17.9004498,14.5907444 17.875676,21.2628703 17.9256686,23.3087478 C18.0008805,26.3866941 14.6341041,31.7195566 13.8370662,32.9074655 C13.3057075,33.6994047 12.5474635,34.0608076 11.562334,33.9916742 L8.90856859,33.9916742 L8.90856859,33.9811778 Z"></path>
+                                    <path stroke="#01B757" d="M8.90856859,33.9811778 L6.43814432,33.9811778 C5.45301486,34.0503113 4.69477081,33.6889084 4.1634122,32.8969691 C3.36637428,31.7090602 -0.000402169348,26.3761977 0.0748097911,23.2982514 C0.124878873,21.2492429 0.0999525141,14.5598149 3.07156595e-05,3.22996744 C-0.000274213164,3.1963928 0.00243636275,3.162859 0.00812115776,3.12976773 C0.28477346,1.51937083 1.22672004,0.617538852 2.8339609,0.424271782 C4.45813658,0.228968338 6.54411954,0.0875444105 9.09190977,0 L9.09190977,0.0169167084 C11.5566027,0.104886477 13.5814718,0.244169993 15.1665175,0.434768145 C16.7530267,0.625542287 17.6912941,1.50671985 17.9813196,3.07830083 C17.9943481,3.14889902 18.0005888,3.22058224 17.9999563,3.29236974 L17.9999901,3.29237004 C17.9004498,14.5907444 17.875676,21.2628703 17.9256686,23.3087478 C18.0008805,26.3866941 14.6341041,31.7195566 13.8370662,32.9074655 C13.3057075,33.6994047 12.5474635,34.0608076 11.562334,33.9916742 L8.90856859,33.9916742 L8.90856859,33.9811778 Z" />
-                                    <rect fill="#01B757" x="2" y="7" width="14" height="7" rx="0.5625"></rect>
+                                    <rect fill="#01B757" x="2" y="7" width="14" height="7" rx="0.5625" />
                                 </g>
                             </svg>
                             Connect TREZOR
@@ -107,12 +104,11 @@ class ConnectWebUsbDevice extends Component<Props> {
 const ConnectDevice = (props: Props) => {
     const { transport, disconnectRequest } = props;
     if (disconnectRequest) {
-        return <DisconnectDevice {...props} />
+        return <DisconnectDevice {...props} />;
-    } else if (transport && transport.version.indexOf('webusb') >= 0) {
+    } if (transport && transport.version.indexOf('webusb') >= 0) {
-        return <ConnectWebUsbDevice {...props} />
+        return <ConnectWebUsbDevice {...props} />;
-    } else {
-        return <ConnectHIDDevice {...props} />
-    }
     }
+    return <ConnectHIDDevice {...props} />;
+};
 
 export default ConnectDevice;

src/js/components/landing/InstallBridge.js

@@ -1,9 +1,9 @@
 /* @flow */
-'use strict';
+
 
 import React, { Component } from 'react';
-import Preloader from './Preloader';
 import Select from 'react-select';
+import Preloader from './Preloader';
 
 type State = {
     version: string;
@@ -35,7 +35,6 @@ type Props = {
 }
 
 export default class InstallBridge extends Component<Props, State> {
-
     constructor(props: Props) {
         super(props);
 
@@ -49,7 +48,7 @@ export default class InstallBridge extends Component<Props, State> {
 
     onChange(value: InstallTarget) {
         this.setState({
-            target: value
+            target: value,
         });
     }
 
@@ -57,8 +56,8 @@ export default class InstallBridge extends Component<Props, State> {
         if (this.props.browserState.osname && !this.state.target) {
             const currentTarget: ?InstallTarget = installers.find(i => i.id === this.props.browserState.osname);
             this.setState({
-                target: currentTarget
+                target: currentTarget,
-            })
+            });
         }
     }
 
@@ -81,7 +80,8 @@ export default class InstallBridge extends Component<Props, State> {
                         clearable={false}
                         value={this.state.target}
                         onChange={this.onChange.bind(this)}
-                        options={ installers } />
+                        options={installers}
+                    />
                     <a href={url} className="button">Download for { label }</a>
                 </div>
                 <p>Learn more about latest version in <a href="https://github.com/trezor/trezord-go/blob/master/CHANGELOG.md" className="green" target="_blank" rel="noreferrer noopener">Changelog</a></p>

src/js/components/landing/LandingPage.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 import Preloader from './Preloader';
@@ -14,8 +14,7 @@ import Notifications, { Notification } from '../common/Notification';
 
 import type { Props } from './index';
 
-const BrowserNotSupported = (props: {}): React$Element<string> => {
+const BrowserNotSupported = (props: {}): React$Element<string> => (
-    return (
     <main>
         <h2>Your browser is not supported</h2>
         <p>Please choose one of the supported browsers</p>
@@ -30,13 +29,10 @@ const BrowserNotSupported = (props: {}): React$Element<string> => {
             </div>
         </div>
     </main>
-    )
+);
-}
-
 
 
 export default (props: Props) => {
-
     const web3 = props.web3;
     const { devices } = props;
     const { browserState, transport } = props.connect;
@@ -49,14 +45,16 @@ export default (props: Props) => {
     const bridgeRoute: boolean = props.router.location.state.hasOwnProperty('bridge');
 
     if (localStorageError) {
-        notification = (<Notification 
+        notification = (
+            <Notification
                 title="Initialization error"
                 message="Config files are missing"
                 className="error"
-        />);
+            />
+        );
         css += ' config-error';
     } else if (browserState.supported === false) {
-        css += ' browser-not-supported'
+        css += ' browser-not-supported';
         body = <BrowserNotSupported />;
     } else if (connectError || bridgeRoute) {
         css += ' install-bridge';
@@ -77,7 +75,6 @@ export default (props: Props) => {
                 <Footer />
             </div>
         );
-    } else {
+    }
     return (<Preloader />);
-    }
+};
-}

src/js/components/landing/LocalStorageError.js

@@ -1,12 +1,10 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 
-export default (props: {}): React$Element<string> => {
+export default (props: {}): React$Element<string> => (
-    return (
     <section className="landing">
             localstorage ERROR
     </section>
 );
-}

src/js/components/landing/Preloader.js

@@ -1,13 +1,11 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 import Loader from '../common/LoaderCircle';
 
-export default (props: {}): React$Element<string> => {
+export default (props: {}): React$Element<string> => (
-    return (
     <section className="landing">
         <Loader label="Loading" size="100" />
     </section>
 );
-}

src/js/components/landing/TrezorConnectError.js

@@ -1,12 +1,10 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 
-export default (props: {}): React$Element<string> => {
+export default (props: {}): React$Element<string> => (
-    return (
     <section className="landing">
             connect ERROR
     </section>
 );
-}

src/js/components/landing/index.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 import { bindActionCreators } from 'redux';
@@ -31,8 +31,7 @@ type OwnProps = {
 
 export type Props = StateProps & DispatchProps;
 
-const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State): StateProps => {
+const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State): StateProps => ({
-    return {
     localStorage: state.localStorage,
     modal: state.modal,
     web3: state.web3,
@@ -41,13 +40,10 @@ const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: St
     router: state.router,
     wallet: state.wallet,
     devices: state.devices,
-    };
+});
-}
 
-const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => {
+const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => ({
-    return { 
 
-    };
+});
-}
 
 export default connect(mapStateToProps, mapDispatchToProps)(LandingPage);

src/js/components/modal/ConfirmAddress.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React, { Component } from 'react';
 import { findAccount } from '~/js/reducers/AccountsReducer';
@@ -7,10 +7,9 @@ import { findAccount } from '~/js/reducers/AccountsReducer';
 import type { Props } from './index';
 
 const ConfirmAddress = (props: Props) => {
-
     const {
         account,
-        network
+        network,
     } = props.selectedAccount;
     if (!account || !network) return null;
 
@@ -26,11 +25,10 @@ const ConfirmAddress = (props: Props) => {
             </div>
         </div>
     );
-}
+};
 export default ConfirmAddress;
 
 export class ConfirmUnverifiedAddress extends Component<Props> {
-
     keyboardHandler: (event: KeyboardEvent) => void;
 
     keyboardHandler(event: KeyboardEvent): void {
@@ -52,13 +50,12 @@ export class ConfirmUnverifiedAddress extends Component<Props> {
     verifyAddress() {
         if (!this.props.modal.opened) return;
         const {
-            account
+            account,
         } = this.props.selectedAccount;
         if (!account) return null;
 
         this.props.modalActions.onCancel();
         this.props.receiveActions.showAddress(account.addressPath);
-        
     }
 
     showUnverifiedAddress() {
@@ -71,11 +68,11 @@ export class ConfirmUnverifiedAddress extends Component<Props> {
     render() {
         if (!this.props.modal.opened) return null;
         const {
-            device
+            device,
         } = this.props.modal;
 
         const {
-            onCancel 
+            onCancel,
         } = this.props.modalActions;
 
         let deviceStatus: string;
@@ -83,7 +80,7 @@ export class ConfirmUnverifiedAddress extends Component<Props> {
 
         if (!device.connected) {
             deviceStatus = `${device.label} is not connected`;
-            claim = 'Please connect your device'
+            claim = 'Please connect your device';
         } else {
             // corner-case where device is connected but it is unavailable because it was created with different "passphrase_protection" settings
             const enable: string = device.features && device.features.passphrase_protection ? 'enable' : 'disable';
@@ -93,7 +90,7 @@ export class ConfirmUnverifiedAddress extends Component<Props> {
 
         return (
             <div className="confirm-address-unverified">
-                <button className="close-modal transparent" onClick={ onCancel }></button>
+                <button className="close-modal transparent" onClick={onCancel} />
                 <h3>{ deviceStatus }</h3>
                 <p>To prevent phishing attacks, you should verify the address on your TREZOR first. { claim } to continue with the verification process.</p>
                 <button onClick={event => this.verifyAddress()}>Try again</button>

src/js/components/modal/ConfirmSignTx.js

@@ -1,11 +1,10 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 import type { Props } from './index';
 
 const Confirmation = (props: Props) => {
-
     if (!props.modal.opened) return null;
     const { device } = props.modal;
 
@@ -14,7 +13,7 @@ const Confirmation = (props: Props) => {
         address,
         currency,
         total,
-        selectedFeeLevel
+        selectedFeeLevel,
     } = props.sendForm;
 
     return (
@@ -33,6 +32,6 @@ const Confirmation = (props: Props) => {
             </div>
         </div>
     );
-}
+};
 
 export default Confirmation;

src/js/components/modal/DuplicateDevice.js

@@ -1,8 +1,8 @@
 /* @flow */
-'use strict';
+
 
 import React, { Component } from 'react';
-import { getNewInstance } from '~/js/reducers/DevicesReducer'
+import { getNewInstance } from '~/js/reducers/DevicesReducer';
 import type { Props } from './index';
 
 type State = {
@@ -13,9 +13,10 @@ type State = {
 }
 
 export default class DuplicateDevice extends Component<Props, State> {
-
     keyboardHandler: (event: KeyboardEvent) => void;
+
     state: State;
+
     input: ?HTMLInputElement;
 
     constructor(props: Props) {
@@ -31,7 +32,7 @@ export default class DuplicateDevice extends Component<Props, State> {
             instance,
             instanceName: null,
             isUsed: false,
-        }
+        };
     }
 
     keyboardHandler(event: KeyboardEvent): void {
@@ -43,8 +44,7 @@ export default class DuplicateDevice extends Component<Props, State> {
 
     componentDidMount(): void {
         // one time autofocus
-        if (this.input)
+        if (this.input) this.input.focus();
-            this.input.focus();
         this.keyboardHandler = this.keyboardHandler.bind(this);
         window.addEventListener('keydown', this.keyboardHandler, false);
     }
@@ -54,7 +54,6 @@ export default class DuplicateDevice extends Component<Props, State> {
     }
 
     onNameChange = (value: string): void => {
-
         let isUsed: boolean = false;
         if (value.length > 0) {
             isUsed = (this.props.devices.find(d => d.instanceName === value) !== undefined);
@@ -62,7 +61,7 @@ export default class DuplicateDevice extends Component<Props, State> {
 
         this.setState({
             instanceName: value.length > 0 ? value : null,
-            isUsed
+            isUsed,
         });
     }
 
@@ -72,7 +71,6 @@ export default class DuplicateDevice extends Component<Props, State> {
     }
 
     render() {
-    
         if (!this.props.modal.opened) return null;
 
         const { device } = this.props.modal;
@@ -80,12 +78,12 @@ export default class DuplicateDevice extends Component<Props, State> {
         const {
             defaultName,
             instanceName,
-            isUsed
+            isUsed,
         } = this.state;
 
         return (
             <div className="duplicate">
-                <button className="close-modal transparent" onClick={ onCancel }></button>
+                <button className="close-modal transparent" onClick={onCancel} />
                 <h3>Clone { device.label }?</h3>
                 <p>This will create new instance of device which can be used with different passphrase</p>
                 <div className="row">
@@ -100,7 +98,8 @@ export default class DuplicateDevice extends Component<Props, State> {
                         placeholder={defaultName}
                         ref={(element) => { this.input = element; }}
                         onChange={event => this.onNameChange(event.currentTarget.value)}
-                        defaultValue={ instanceName } />
+                        defaultValue={instanceName}
+                    />
                     { isUsed ? <span className="error">Instance name is already in use</span> : null }
                 </div>
                 <button disabled={isUsed} onClick={event => this.submit()}>Create new instance</button>

src/js/components/modal/InvalidPin.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 import type { Props } from './index';
@@ -14,6 +14,6 @@ const InvalidPin = (props: Props) => {
             <p>Retrying...</p>
         </div>
     );
-}
+};
 
 export default InvalidPin;

src/js/components/modal/Passphrase.js

@@ -1,10 +1,11 @@
 /* @flow */
-'use strict';
+
 
 import React, { Component } from 'react';
 import raf from 'raf';
 
 import type { Props } from './index';
+
 type State = {
     deviceLabel: string;
     singleInput: boolean;
@@ -18,10 +19,12 @@ type State = {
 }
 
 export default class PinModal extends Component<Props, State> {
-
     keyboardHandler: (event: KeyboardEvent) => void;
+
     state: State;
+
     passphraseInput: ?HTMLInputElement;
+
     passphraseRevisionInput: ?HTMLInputElement;
 
     constructor(props: Props) {
@@ -48,13 +51,11 @@ export default class PinModal extends Component<Props, State> {
             passphraseRevisionFocused: false,
             passphraseRevisionTouched: false,
             match: true,
-            visible: false
+            visible: false,
-        }
+        };
     }
 
     keyboardHandler(event: KeyboardEvent): void {
-        
-
         if (event.keyCode === 13) {
             event.preventDefault();
             //this.passphraseInput.blur();
@@ -73,13 +74,11 @@ export default class PinModal extends Component<Props, State> {
 
     componentDidMount(): void {
         // one time autofocus
-        if (this.passphraseInput)
+        if (this.passphraseInput) this.passphraseInput.focus();
-            this.passphraseInput.focus();
         this.keyboardHandler = this.keyboardHandler.bind(this);
         window.addEventListener('keydown', this.keyboardHandler, false);
 
 
-
         // document.oncontextmenu = (event) => {
         //     const el = window.event.srcElement || event.target;
         //     const type = el.tagName.toLowerCase() || '';
@@ -106,7 +105,7 @@ export default class PinModal extends Component<Props, State> {
             passphraseRevision,
             passphraseFocused,
             passphraseRevisionFocused,
-            visible 
+            visible,
         } = this.state;
         // } = this.props.modal;
 
@@ -121,11 +120,11 @@ export default class PinModal extends Component<Props, State> {
 
         if (this.passphraseInput) {
             this.passphraseInput.value = passphraseInputValue;
-            this.passphraseInput.setAttribute("type", visible || (!visible && !passphraseFocused) ? "text" : "password");
+            this.passphraseInput.setAttribute('type', visible || (!visible && !passphraseFocused) ? 'text' : 'password');
         }
         if (this.passphraseRevisionInput) {
             this.passphraseRevisionInput.value = passphraseRevisionInputValue;
-            this.passphraseRevisionInput.setAttribute("type", visible || (!visible && !passphraseRevisionFocused) ? "text" : "password");
+            this.passphraseRevisionInput.setAttribute('type', visible || (!visible && !passphraseRevisionFocused) ? 'text' : 'password');
         }
     }
 
@@ -136,13 +135,13 @@ export default class PinModal extends Component<Props, State> {
         if (input === 'passphrase') {
             this.setState({
                 match: this.state.singleInput || this.state.passphraseRevision === value,
-                passphrase: value
+                passphrase: value,
             });
         } else {
             this.setState({
                 match: this.state.passphrase === value,
                 passphraseRevision: value,
-                passphraseRevisionTouched: true
+                passphraseRevisionTouched: true,
             });
         }
     }
@@ -150,11 +149,11 @@ export default class PinModal extends Component<Props, State> {
     onPassphraseFocus = (input: string): void => {
         if (input === 'passphrase') {
             this.setState({
-                passphraseFocused: true
+                passphraseFocused: true,
             });
         } else {
             this.setState({
-                passphraseRevisionFocused: true
+                passphraseRevisionFocused: true,
             });
         }
     }
@@ -162,24 +161,24 @@ export default class PinModal extends Component<Props, State> {
     onPassphraseBlur = (input: string): void => {
         if (input === 'passphrase') {
             this.setState({
-                passphraseFocused: false
+                passphraseFocused: false,
             });
         } else {
             this.setState({
-                passphraseRevisionFocused: false
+                passphraseRevisionFocused: false,
             });
         }
     }
 
     onPassphraseShow = (): void => {
         this.setState({
-            visible: true
+            visible: true,
         });
     }
 
     onPassphraseHide = (): void => {
         this.setState({
-            visible: false
+            visible: false,
         });
     }
 
@@ -203,14 +202,13 @@ export default class PinModal extends Component<Props, State> {
             passphraseRevision: '',
             passphraseFocused: false,
             passphraseRevisionFocused: false,
-            visible: false
+            visible: false,
-        })
+        });
 
         raf(() => onPassphraseSubmit(empty ? '' : passphrase));
     }
 
     render() {
-
         if (!this.props.modal.opened) return null;
 
         const {
@@ -229,9 +227,9 @@ export default class PinModal extends Component<Props, State> {
             passphraseRevisionTouched,
         } = this.state;
 
-        let passphraseInputType: string = visible || (!visible && !passphraseFocused) ? "text" : "password";
+        let passphraseInputType: string = visible || (!visible && !passphraseFocused) ? 'text' : 'password';
-        let passphraseRevisionInputType: string = visible || (!visible && !passphraseRevisionFocused) ? "text" : "password";
+        let passphraseRevisionInputType: string = visible || (!visible && !passphraseRevisionFocused) ? 'text' : 'password';
-        passphraseInputType = passphraseRevisionInputType = "text";
+        passphraseInputType = passphraseRevisionInputType = 'text';
         //let passphraseInputType: string = visible || passphraseFocused ? "text" : "password";
         //let passphraseRevisionInputType: string = visible || passphraseRevisionFocused ? "text" : "password";
 
@@ -257,7 +255,8 @@ export default class PinModal extends Component<Props, State> {
                         onFocus={event => this.onPassphraseFocus('passphrase')}
                         onBlur={event => this.onPassphraseBlur('passphrase')}
 
-                        tabIndex="1" />
+                        tabIndex="1"
+                    />
                 </div>
                 { singleInput ? null : (
                     <div className="row">
@@ -274,7 +273,8 @@ export default class PinModal extends Component<Props, State> {
                             onFocus={event => this.onPassphraseFocus('revision')}
                             onBlur={event => this.onPassphraseBlur('revision')}
 
-                            tabIndex="2" />
+                            tabIndex="2"
+                        />
                         { !match && passphraseRevisionTouched ? <span className="error">Passphrases do not match</span> : null }
                     </div>
                 ) }
@@ -283,7 +283,7 @@ export default class PinModal extends Component<Props, State> {
                 <div className="row">
                     <label className="custom-checkbox">
                         <input type="checkbox" tabIndex="3" onChange={showPassphraseCheckboxFn} checked={visible} />
-                        <span className="indicator"></span>
+                        <span className="indicator" />
                         Show passphrase
                     </label>
                     {/* <label className="custom-checkbox">

src/js/components/modal/PassphraseType.js

@@ -1,11 +1,10 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 import type { Props } from './index';
 
 const Confirmation = (props: Props) => {
-
     if (!props.modal.opened) return null;
     const { device } = props.modal;
 
@@ -16,6 +15,6 @@ const Confirmation = (props: Props) => {
             </div>
         </div>
     );
-}
+};
 
 export default Confirmation;

src/js/components/modal/Pin.js

@@ -1,16 +1,17 @@
 /* @flow */
-'use strict';
+
 
 import React, { Component } from 'react';
 
 import type { Props } from './index';
+
 type State = {
     pin: string;
 }
 
 export default class Pin extends Component<Props, State> {
-
     keyboardHandler: (event: KeyboardEvent) => void;
+
     state: State;
 
     constructor(props: Props) {
@@ -18,7 +19,7 @@ export default class Pin extends Component<Props, State> {
 
         this.state = {
             pin: '',
-        }
+        };
     }
 
     onPinAdd = (input: number): void => {
@@ -26,7 +27,7 @@ export default class Pin extends Component<Props, State> {
         if (pin.length < 9) {
             pin += input;
             this.setState({
-                pin: pin
+                pin,
             });
         }
     }
@@ -93,7 +94,6 @@ export default class Pin extends Component<Props, State> {
     }
 
 
-
     componentWillMount(): void {
         this.keyboardHandler = this.keyboardHandler.bind(this);
         window.addEventListener('keydown', this.keyboardHandler, false);
@@ -104,7 +104,6 @@ export default class Pin extends Component<Props, State> {
     }
 
     render() {
-
         if (!this.props.modal.opened) return null;
 
         const { onPinSubmit } = this.props.modalActions;
@@ -119,7 +118,7 @@ export default class Pin extends Component<Props, State> {
 
                 <div className="pin-input-row">
                     <input type="password" autoComplete="off" maxLength="9" disabled value={pin} />
-                    <button type="button" className="pin-backspace transparent" onClick={ event => this.onPinBackspace() }></button>
+                    <button type="button" className="pin-backspace transparent" onClick={event => this.onPinBackspace()} />
                 </div>
 
                 <div className="pin-row">

src/js/components/modal/RememberDevice.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React, { Component } from 'react';
 import Loader from '../common/LoaderCircle';
@@ -12,8 +12,8 @@ type State = {
 }
 
 export default class RememberDevice extends Component<Props, State> {
-
     keyboardHandler: (event: KeyboardEvent) => void;
+
     state: State;
 
     constructor(props: Props) {
@@ -21,7 +21,7 @@ export default class RememberDevice extends Component<Props, State> {
 
         this.state = {
             countdown: 10,
-        }
+        };
     }
 
     keyboardHandler(event: KeyboardEvent): void {
@@ -32,7 +32,6 @@ export default class RememberDevice extends Component<Props, State> {
     }
 
     componentDidMount(): void {
-
         const ticker = () => {
             if (this.state.countdown - 1 <= 0) {
                 // TODO: possible race condition,
@@ -43,14 +42,14 @@ export default class RememberDevice extends Component<Props, State> {
                 }
             } else {
                 this.setState({
-                    countdown: this.state.countdown - 1
+                    countdown: this.state.countdown - 1,
                 });
             }
-        }
+        };
 
         this.setState({
             countdown: 10,
-            ticker: window.setInterval(ticker, 1000)
+            ticker: window.setInterval(ticker, 1000),
         });
 
         this.keyboardHandler = this.keyboardHandler.bind(this);
@@ -76,7 +75,7 @@ export default class RememberDevice extends Component<Props, State> {
         const { onForgetDevice, onRememberDevice } = this.props.modalActions;
 
         let label = device.label;
-        const devicePlural: string = instances && instances.length > 1 ? "devices or to remember them" : "device or to remember it";
+        const devicePlural: string = instances && instances.length > 1 ? 'devices or to remember them' : 'device or to remember it';
         if (instances && instances.length > 0) {
             label = instances.map((instance, index) => {
                 let comma: string = '';
@@ -98,7 +97,6 @@ export default class RememberDevice extends Component<Props, State> {
 }
 
 export class ForgetDevice extends Component<Props> {
-
     keyboardHandler: (event: KeyboardEvent) => void;
 
     keyboardHandler(event: KeyboardEvent): void {

src/js/components/modal/index.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React, { Component } from 'react';
 import { bindActionCreators } from 'redux';
@@ -57,14 +57,14 @@ const Fade = ({ children, ...props }) => (
     <CSSTransition
         {...props}
         timeout={1000}
-        classNames="fade">
+        classNames="fade"
+    >
         { children }
     </CSSTransition>
 );
 
 class Modal extends Component<Props> {
     render() {
-
         if (!this.props.modal.opened) return null;
 
         const { opened, windowType } = this.props.modal;
@@ -80,29 +80,29 @@ class Modal extends Component<Props> {
             case UI.REQUEST_PASSPHRASE:
                 component = (<Passphrase {...this.props} />);
                 break;
-            case "ButtonRequest_SignTx" :
+            case 'ButtonRequest_SignTx':
-                component = (<ConfirmSignTx { ...this.props } />)
+                component = (<ConfirmSignTx {...this.props} />);
                 break;
             // case "ButtonRequest_Address" :
             //     component = (<ConfirmAddress { ...this.props } />)
             // break;
-            case "ButtonRequest_PassphraseType" :
+            case 'ButtonRequest_PassphraseType':
-                component = (<PassphraseType { ...this.props } />)
+                component = (<PassphraseType {...this.props} />);
                 break;
             case RECEIVE.REQUEST_UNVERIFIED:
-                component = (<ConfirmUnverifiedAddress { ...this.props } />)
+                component = (<ConfirmUnverifiedAddress {...this.props} />);
                 break;
 
             case CONNECT.REMEMBER_REQUEST:
-                component = (<RememberDevice { ...this.props } />)
+                component = (<RememberDevice {...this.props} />);
                 break;
 
             case CONNECT.FORGET_REQUEST:
-                component = (<ForgetDevice { ...this.props } />)
+                component = (<ForgetDevice {...this.props} />);
                 break;
 
             case CONNECT.TRY_TO_DUPLICATE:
-                component = (<DuplicateDevice { ...this.props } />)
+                component = (<DuplicateDevice {...this.props} />);
                 break;
         }
 
@@ -123,8 +123,7 @@ class Modal extends Component<Props> {
     }
 }
 
-const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State, own: OwnProps): StateProps => {
+const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State, own: OwnProps): StateProps => ({
-    return {
     modal: state.modal,
     accounts: state.accounts,
     devices: state.devices,
@@ -133,18 +132,15 @@ const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: St
     sendForm: state.sendForm,
     receive: state.receive,
     localStorage: state.localStorage,
-        wallet: state.wallet
+    wallet: state.wallet,
-    };
+});
-}
 
-const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => {
+const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => ({
-    return {
     modalActions: bindActionCreators(ModalActions, dispatch),
     receiveActions: bindActionCreators(ReceiveActions, dispatch),
-    };
+});
-}
 
 // export default connect(mapStateToProps, mapDispatchToProps)(Modal);
 export default withRouter(
-    connect(mapStateToProps, mapDispatchToProps)(Modal)
+    connect(mapStateToProps, mapDispatchToProps)(Modal),
 );

src/js/components/wallet/account/AccountTabs.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React, { Component } from 'react';
 import { NavLink } from 'react-router-dom';
@@ -16,8 +16,8 @@ type State = {
 }
 
 class Indicator extends Component<Props, State> {
-
     reposition: () => void;
+
     state: State;
 
     constructor(props: Props) {
@@ -26,9 +26,9 @@ class Indicator extends Component<Props, State> {
         this.state = {
             style: {
                 width: 0,
-                left: 0
+                left: 0,
             },
-        }
+        };
 
         this.reposition = this.reposition.bind(this);
     }
@@ -63,9 +63,9 @@ class Indicator extends Component<Props, State> {
             this.setState({
                 style: {
                     width: bounds.width,
-                    left: left,
+                    left,
-                }
+                },
-            })
+            });
         }
     }
 
@@ -77,7 +77,6 @@ class Indicator extends Component<Props, State> {
 }
 
 const AccountTabs = (props: any) => {
-
     const urlParams = props.match.params;
     const basePath = `/device/${urlParams.device}/network/${urlParams.network}/account/${urlParams.account}`;
 
@@ -101,6 +100,6 @@ const AccountTabs = (props: any) => {
             <Indicator pathname={props.match.pathname} />
         </div>
     );
-}
+};
 
 export default AccountTabs;

src/js/components/wallet/account/SelectedAccount.js

@@ -1,10 +1,12 @@
 /* @flow */
-'use strict';
+
 
 import * as React from 'react';
 import { Notification } from '~/js/components/common/Notification';
 
-import type { State, TrezorDevice, Action, ThunkAction } from '~/flowtype';
+import type {
+    State, TrezorDevice, Action, ThunkAction,
+} from '~/flowtype';
 import type { Account } from '~/js/reducers/AccountsReducer';
 import type { Discovery } from '~/js/reducers/DiscoveryReducer';
 
@@ -31,7 +33,7 @@ const SelectedAccount = (props: Props) => {
 
     const {
         account,
-        discovery
+        discovery,
     } = accountState;
 
     // account not found (yet). checking why...
@@ -45,7 +47,7 @@ const SelectedAccount = (props: Props) => {
                             <Notification className="info" title="Loading accounts..." />
                         </section>
                     );
-                } else {
+                }
                 // case 2: device is unavailable (created with different passphrase settings) account cannot be accessed
                 return (
                     <section>
@@ -57,7 +59,6 @@ const SelectedAccount = (props: Props) => {
                     </section>
                 );
             }
-            } else {
             // case 3: device is disconnected
             return (
                 <section>
@@ -68,22 +69,21 @@ const SelectedAccount = (props: Props) => {
                     />
                 </section>
             );
-            }
+        } if (discovery.waitingForBackend) {
-        } else if (discovery.waitingForBackend) {
             // case 4: backend is not working
             return (
                 <section>
                     <Notification className="warning" title="Backend not working" />
                 </section>
             );
-        } else if (discovery.completed) {
+        } if (discovery.completed) {
             // case 5: account not found and discovery is completed
             return (
                 <section>
                     <Notification className="warning" title="Account does not exist" />
                 </section>
             );
-        } else {
+        }
         // case 6: discovery is not completed yet
         return (
             <section>
@@ -91,7 +91,6 @@ const SelectedAccount = (props: Props) => {
             </section>
         );
     }
-    } else {
 
     let notification: ?React$Element<typeof Notification> = null;
     if (!device.connected) {
@@ -109,9 +108,7 @@ const SelectedAccount = (props: Props) => {
             { notification }
             { props.children }
         </section>
-        )
+    );
-    }
+};
-
-}
 
 export default SelectedAccount;

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

@@ -1,7 +1,7 @@
 /* @flow */
-'use strict';
-
 import React, { Component } from 'react';
+import styled from 'styled-components';
+import { H2 } from '~/js/components/common/Heading';
 
 import Tooltip from 'rc-tooltip';
 import { QRCode } from 'react-qr-svg';
@@ -11,10 +11,9 @@ import { Notification } from '~/js/components/common/Notification';
 
 import type { Props } from './index';
 
-
+const Wrapper = styled.div``;
 
 const Receive = (props: Props) => {
-
     const device = props.wallet.selectedDevice;
     const {
         account,
@@ -52,18 +51,18 @@ const Receive = (props: Props) => {
         address = account.address;
         className = addressUnverified ? 'address unverified' : 'address';
 
-        const tooltip = addressUnverified ?
+        const tooltip = addressUnverified
-            (<div>Unverified address.<br/>{ device.connected && device.available ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.' }</div>)
+            ? (<div>Unverified address.<br />{ device.connected && device.available ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.' }</div>)
-            :
+            : (<div>{ device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.' }</div>);
-            (<div>{ device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.' }</div>);
 
         button = (
             <Tooltip
-                arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
+                arrowContent={<div className="rc-tooltip-arrow-inner" />}
                 overlay={tooltip}
-                placement="bottomRight">
+                placement="bottomRight"
+            >
                 <button className="white" onClick={event => props.showAddress(account.addressPath)}>
-                    <span></span>
+                    <span />
                 </button>
             </Tooltip>
         );
@@ -73,14 +72,13 @@ const Receive = (props: Props) => {
     if (props.modal.opened && props.modal.windowType === 'ButtonRequest_Address') {
         className = 'address verifying';
         address = account.address;
-        // ver = (<div className="confirm">Confirm address on TREZOR</div>)
+        ver = (<div className="confirm">Confirm address on TREZOR</div>);
         button = (<div className="confirm">{ account.network } account #{ (account.index + 1) }</div>);
     }
 
     return (
-        <div>
+        <Wrapper>
-            <h2>Receive Ethereum or tokens</h2>
+            <H2>Receive Ethereum or tokens</H2>
-            
             <div className={className}>
                 { ver }
                 <div className="value">
@@ -89,14 +87,12 @@ const Receive = (props: Props) => {
                 { button }
             </div>
             { qrCode }
-        </div>
+        </Wrapper>
     );
-}
+};
 
-export default (props: Props) => {
+export default (props: Props) => (
-    return (
     <SelectedAccount {...props}>
         <Receive {...props} />
     </SelectedAccount>
 );
-}

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

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React, { Component, PropTypes } from 'react';
 import { bindActionCreators } from 'redux';
@@ -7,13 +7,13 @@ import { connect } from 'react-redux';
 
 import { default as ReceiveActions } from '~/js/actions/ReceiveActions';
 import * as TokenActions from '~/js/actions/TokenActions';
+import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
 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 
+    DispatchProps as BaseDispatchProps,
 } from '../SelectedAccount';
 
 type OwnProps = { }
@@ -29,21 +29,17 @@ type DispatchProps = BaseDispatchProps & {
 
 export type Props = StateProps & BaseStateProps & DispatchProps & BaseDispatchProps;
 
-const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State, own: OwnProps): StateProps => {
+const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State, own: OwnProps): StateProps => ({
-    return {
+    className: 'receive',
-        className: "receive",
     selectedAccount: state.selectedAccount,
     wallet: state.wallet,
 
     receive: state.receive,
     modal: state.modal,
-    };
+});
-}
 
-const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => {
+const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => ({
-    return {
     showAddress: bindActionCreators(ReceiveActions.showAddress, dispatch),
-    };
+});
-}
 
 export default connect(mapStateToProps, mapDispatchToProps)(Receive);

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

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 import Tooltip from 'rc-tooltip';
@@ -13,10 +13,9 @@ type Props = {
 };
 
 const AdvancedForm = (props: Props) => {
-
     const {
         account,
-        network
+        network,
     } = props.selectedAccount;
 
     const {
@@ -31,7 +30,7 @@ const AdvancedForm = (props: Props) => {
         errors,
         warnings,
         infos,
-        advanced
+        advanced,
     } = props.sendForm;
 
     const {
@@ -39,15 +38,17 @@ const AdvancedForm = (props: Props) => {
         onGasPriceChange,
         onGasLimitChange,
         onNonceChange,
-        onDataChange
+        onDataChange,
     } = props.sendFormActions;
 
-    if (!advanced) return (
+    if (!advanced) {
+        return (
             <div className="advanced-container">
                 <a className="advanced" onClick={toggleAdvanced}>Advanced settings</a>
                 { props.children }
             </div>
         );
+    }
 
     const nonceTooltip = (
         <div className="tooltip-wrapper">
@@ -90,7 +91,6 @@ const AdvancedForm = (props: Props) => {
     );
 
 
-
     return (
         <div className="advanced-container opened">
             <a className="advanced" onClick={toggleAdvanced}>Advanced settings</a>
@@ -120,10 +120,11 @@ const AdvancedForm = (props: Props) => {
                     <label>
                         Gas limit
                         <Tooltip
-                            arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
+                            arrowContent={<div className="rc-tooltip-arrow-inner" />}
                             overlay={gasLimitTooltip}
-                            placement="top">
+                            placement="top"
-                            <span className="what-is-it"></span>
+                        >
+                            <span className="what-is-it" />
                         </Tooltip>
                     </label>
                     <input
@@ -134,7 +135,8 @@ const AdvancedForm = (props: Props) => {
                         spellCheck="false"
                         value={gasLimit}
                         disabled={networkSymbol === currency && data.length > 0}
-                        onChange={ event => onGasLimitChange(event.target.value) } />
+                        onChange={event => onGasLimitChange(event.target.value)}
+                    />
                     { errors.gasLimit ? (<span className="error">{ errors.gasLimit }</span>) : null }
                     { warnings.gasLimit ? (<span className="warning">{ warnings.gasLimit }</span>) : null }
                     { calculatingGasLimit ? (<span className="info">Calculating...</span>) : null }
@@ -143,10 +145,11 @@ const AdvancedForm = (props: Props) => {
                     <label>
                         Gas price
                         <Tooltip
-                            arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
+                            arrowContent={<div className="rc-tooltip-arrow-inner" />}
                             overlay={gasPriceTooltip}
-                            placement="top">
+                            placement="top"
-                            <span className="what-is-it"></span>
+                        >
+                            <span className="what-is-it" />
                         </Tooltip>
                     </label>
                     <input
@@ -156,7 +159,8 @@ const AdvancedForm = (props: Props) => {
                         autoCapitalize="off"
                         spellCheck="false"
                         value={gasPrice}
-                        onChange={ event => onGasPriceChange(event.target.value) } />
+                        onChange={event => onGasPriceChange(event.target.value)}
+                    />
                     { errors.gasPrice ? (<span className="error">{ errors.gasPrice }</span>) : null }
                 </div>
             </div>
@@ -165,13 +169,14 @@ const AdvancedForm = (props: Props) => {
                 <label>
                     Data
                     <Tooltip
-                        arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
+                        arrowContent={<div className="rc-tooltip-arrow-inner" />}
                         overlay={dataTooltip}
-                        placement="top">
+                        placement="top"
-                        <span className="what-is-it"></span>
+                    >
+                        <span className="what-is-it" />
                     </Tooltip>
                 </label>
-                <textarea disabled={ networkSymbol !== currency } value={ networkSymbol !== currency ? '' : data } onChange={ event => onDataChange(event.target.value) }></textarea>
+                <textarea disabled={networkSymbol !== currency} value={networkSymbol !== currency ? '' : data} onChange={event => onDataChange(event.target.value)} />
                 { errors.data ? (<span className="error">{ errors.data }</span>) : null }
             </div>
 
@@ -180,7 +185,7 @@ const AdvancedForm = (props: Props) => {
             </div>
 
         </div>
-    )
+    );
-}
+};
 
 export default AdvancedForm;

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

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import * as React from 'react';
 
@@ -37,11 +37,13 @@ export default class CoinSelectOption extends React.Component<Props> {
     render() {
         const css = `${this.props.className} ${this.props.option.value}`;
         return (
-            <div className={ css }
+            <div
+                className={css}
                 onMouseDown={this.handleMouseDown.bind(this)}
                 onMouseEnter={this.handleMouseEnter.bind(this)}
                 onMouseMove={this.handleMouseMove.bind(this)}
-                title={ this.props.option.label }>
+                title={this.props.option.label}
+            >
                 <span>{ this.props.children }</span>
             </div>
         );

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

@@ -1,12 +1,11 @@
 /* @flow */
-'use strict';
+
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
 
 
-export const FeeSelectValue = (props: any): any => {
+export const FeeSelectValue = (props: any): any => (
-    return (
     <div>
         <div className="Select-value fee-option">
             <span className="fee-value">{ props.value.value }</span>
@@ -14,7 +13,6 @@ export const FeeSelectValue = (props: any): any => {
         </div>
     </div>
 );
-}
 
 type Props = {
     children: React.Node,
@@ -49,10 +47,12 @@ export class FeeSelectOption extends React.Component<Props> {
 
     render() {
         return (
-            <div className={ this.props.className }
+            <div
+                className={this.props.className}
                 onMouseDown={this.handleMouseDown.bind(this)}
                 onMouseEnter={this.handleMouseEnter.bind(this)}
-                onMouseMove={ this.handleMouseMove.bind(this) }>
+                onMouseMove={this.handleMouseMove.bind(this)}
+            >
                 <span className="fee-value">{ this.props.option.value }</span>
                 <span className="fee-label">{ this.props.option.label }</span>
             </div>

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

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 import ColorHash from 'color-hash';
@@ -24,7 +24,6 @@ type Style = {
 }
 
 const PendingTransactions = (props: Props) => {
-
     const pending = props.pending.filter(tx => !tx.rejected);
     if (pending.length < 1) return null;
 
@@ -34,7 +33,6 @@ const PendingTransactions = (props: Props) => {
     const textColorFactory = new ColorHash();
 
     const pendingTxs: React$Element<string> = pending.map((tx, i) => {
-
         let iconColor: Style;
         let symbol: string;
         let name: string;
@@ -45,17 +43,17 @@ const PendingTransactions = (props: Props) => {
                 iconColor = {
                     color: '#ffffff',
                     background: '#000000',
-                    borderColor: '#000000'
+                    borderColor: '#000000',
-                }
+                };
-                symbol = "Unknown";
+                symbol = 'Unknown';
-                name = "Unknown";
+                name = 'Unknown';
             } else {
                 const bgColor: string = bgColorFactory.hex(token.name);
                 iconColor = {
                     color: textColorFactory.hex(token.name),
                     background: bgColor,
-                    borderColor: bgColor
+                    borderColor: bgColor,
-                }
+                };
                 symbol = token.symbol.toUpperCase();
                 name = token.name;
             }
@@ -63,8 +61,8 @@ const PendingTransactions = (props: Props) => {
             iconColor = {
                 color: textColorFactory.hex(tx.network),
                 background: bgColorFactory.hex(tx.network),
-                borderColor: bgColorFactory.hex(tx.network)
+                borderColor: bgColorFactory.hex(tx.network),
-            }
+            };
             symbol = props.network.symbol;
             name = props.network.name;
         }
@@ -81,7 +79,7 @@ const PendingTransactions = (props: Props) => {
                 </div>
                 <div className="amount">{ isSmartContractTx ? tx.amount : tx.total } { symbol }</div>
             </div>
-        )
+        );
     });
 
 
@@ -90,7 +88,7 @@ const PendingTransactions = (props: Props) => {
             <h2>Pending transactions</h2>
             { pendingTxs }
         </div>
-    )
+    );
-}
+};
 
 export default PendingTransactions;

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

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React, { Component } from 'react';
 import Select from 'react-select';
@@ -17,7 +17,6 @@ import type { Token } from '~/flowtype';
 
 
 export default class SendContainer extends Component<Props> {
-
     componentWillReceiveProps(newProps: Props) {
         calculate(this.props, newProps);
         validation(newProps);
@@ -36,13 +35,12 @@ export default class SendContainer extends Component<Props> {
 
 
 const Send = (props: Props) => {
-
     const device = props.wallet.selectedDevice;
     const {
         account,
         network,
         discovery,
-        tokens
+        tokens,
     } = props.selectedAccount;
 
     if (!device || !account || !discovery || !network) return null;
@@ -77,9 +75,7 @@ const Send = (props: Props) => {
 
     const fiatRate = props.fiat.find(f => f.network === network);
 
-    const tokensSelectData = tokens.map(t => {
+    const tokensSelectData = tokens.map(t => ({ value: t.symbol, label: t.symbol }));
-        return { value: t.symbol, label: t.symbol };
-    });
     tokensSelectData.unshift({ value: network.symbol, label: network.symbol });
 
     const setMaxClassName: string = setMax ? 'set-max enabled' : 'set-max';
@@ -88,7 +84,7 @@ const Send = (props: Props) => {
     if (gasPriceNeedsUpdate) {
         updateFeeLevelsButton = (
             <span className="update-fee-levels">Recommended fees updated. <a onClick={updateFeeLevels}>Click here to use them</a></span>
-        )
+        );
     }
 
     let addressClassName: ?string;
@@ -103,7 +99,7 @@ const Send = (props: Props) => {
     let buttonDisabled: boolean = Object.keys(errors).length > 0 || total === '0' || amount.length === 0 || address.length === 0 || sending;
     let buttonLabel: string = 'Send';
     if (networkSymbol !== currency && amount.length > 0 && !errors.amount) {
-        buttonLabel += ` ${amount} ${ currency.toUpperCase() }`
+        buttonLabel += ` ${amount} ${currency.toUpperCase()}`;
     } else if (networkSymbol === currency && total !== '0') {
         buttonLabel += ` ${total} ${network.symbol}`;
     }
@@ -132,8 +128,9 @@ const Send = (props: Props) => {
                     spellCheck="false"
                     value={address}
                     className={addressClassName}
-                    onChange={ event => onAddressChange(event.target.value) } />
+                    onChange={event => onAddressChange(event.target.value)}
-                <span className="input-icon"></span>
+                />
+                <span className="input-icon" />
                 { errors.address ? (<span className="error">{ errors.address }</span>) : null }
                 { warnings.address ? (<span className="warning">{ warnings.address }</span>) : null }
                 { infos.address ? (<span className="info">{ infos.address }</span>) : null }
@@ -150,7 +147,8 @@ const Send = (props: Props) => {
                         spellCheck="false"
                         value={amount}
                         className={errors.amount ? 'not-valid' : null}
-                        onChange={ event => onAmountChange(event.target.value) } />
+                        onChange={event => onAmountChange(event.target.value)}
+                    />
 
                     <a className={setMaxClassName} onClick={onSetMax}>Set max</a>
 
@@ -163,7 +161,8 @@ const Send = (props: Props) => {
                         value={currency}
                         disabled={tokensSelectData.length < 2}
                         onChange={onCurrencyChange}
-                        options={ tokensSelectData } />
+                        options={tokensSelectData}
+                    />
                 </div>
                 { errors.amount ? (<span className="error">{ errors.amount }</span>) : null }
                 { warnings.amount ? (<span className="warning">{ warnings.amount }</span>) : null }
@@ -182,21 +181,24 @@ const Send = (props: Props) => {
                     optionComponent={FeeSelectOption}
                     disabled={networkSymbol === currency && data.length > 0}
                     optionClassName="fee-option"
-                    options={ feeLevels } />
+                    options={feeLevels}
+                />
             </div>
 
             <AdvancedForm
                 selectedAccount={props.selectedAccount}
                 sendForm={props.sendForm}
-                sendFormActions={ props.sendFormActions }>
+                sendFormActions={props.sendFormActions}
+            >
                 <button disabled={buttonDisabled} onClick={event => onSend()}>{ buttonLabel }</button>
             </AdvancedForm>
 
             <PendingTransactions
                 pending={props.selectedAccount.pending}
                 tokens={props.selectedAccount.tokens}
-                network={ network } />
+                network={network}
+            />
 
         </section>
     );
-}
+};

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

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import * as React from 'react';
 import { bindActionCreators } from 'redux';
@@ -7,9 +7,9 @@ import { connect } from 'react-redux';
 
 import { default as SendFormActions } from '~/js/actions/SendFormActions';
 import * as SessionStorageActions from '~/js/actions/SessionStorageActions';
+import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
 import SendForm from './SendForm';
 
-import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
 import type { State, Dispatch } from '~/flowtype';
 import type { StateProps as BaseStateProps, DispatchProps as BaseDispatchProps } from '../SelectedAccount';
 
@@ -29,23 +29,19 @@ export type DispatchProps = BaseDispatchProps & {
 
 export type Props = StateProps & BaseStateProps & DispatchProps & BaseDispatchProps;
 
-const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State, own: OwnProps): StateProps => {
+const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State, own: OwnProps): StateProps => ({
-    return {
+    className: 'send-from',
-        className: "send-from",
     selectedAccount: state.selectedAccount,
     wallet: state.wallet,
 
     sendForm: state.sendForm,
     fiat: state.fiat,
-        localStorage: state.localStorage
+    localStorage: state.localStorage,
-    };
+});
-}
 
-const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => {
+const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => ({
-    return {
     sendFormActions: bindActionCreators(SendFormActions, dispatch),
     saveSessionStorage: bindActionCreators(SessionStorageActions.save, dispatch),
-    };
+});
-}
 
-export default connect(mapStateToProps, mapDispatchToProps)(SendForm)
+export default connect(mapStateToProps, mapDispatchToProps)(SendForm);

src/js/components/wallet/account/sign/SignVerify.js

@@ -1,33 +1,31 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
-const SignVerify = () => {
+const SignVerify = () => (
-    return (
     <section className="signverify">
         <div className="sign">
             <h2>Sign message</h2>
             <label>Message</label>
-                <textarea rows="4" maxLength="255"></textarea>
+            <textarea rows="4" maxLength="255" />
             <label>Address</label>
             <input type="text" />
             <label>Signature</label>
-                <textarea rows="4" maxLength="255" readOnly="readonly"></textarea>
+            <textarea rows="4" maxLength="255" readOnly="readonly" />
         </div>
         <div className="verify">
             <h2>Verify message</h2>
             <label>Message</label>
-                <textarea rows="4" maxLength="255"></textarea>
+            <textarea rows="4" maxLength="255" />
             <label>Address</label>
             <input type="text" />
             <label>Signature</label>
-                <textarea rows="4" maxLength="255"></textarea>
+            <textarea rows="4" maxLength="255" />
         </div>
     </section>
 );
-}
 
 export default connect(null, null)(SignVerify);

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

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React, { Component } from 'react';
 import BigNumber from 'bignumber.js';
@@ -22,7 +22,7 @@ const Summary = (props: Props) => {
         account,
         network,
         tokens,
-        pending
+        pending,
     } = props.selectedAccount;
 
     // flow
@@ -52,15 +52,17 @@ const Summary = (props: Props) => {
                 network={network.network}
                 fiat={props.fiat}
                 localStorage={props.localStorage}
-                onToggle={ props.onDetailsToggle } />
+                onToggle={props.onDetailsToggle}
+            />
 
             <h2>
                 Tokens
                 <Tooltip
-                    arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
+                    arrowContent={<div className="rc-tooltip-arrow-inner" />}
                     overlay={tokensTooltip}
-                    placement="top">
+                    placement="top"
-                        <span className="what-is-it"></span>
+                >
+                    <span className="what-is-it" />
                 </Tooltip>
             </h2>
             {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
@@ -70,49 +72,45 @@ const Summary = (props: Props) => {
                     className="token-select"
                     multi={false}
                     autoload={false}
-                    ignoreCase={ true }
+                    ignoreCase
-                    backspaceRemoves={ true }
+                    backspaceRemoves
                     value={null}
                     onChange={token => props.addToken(token, account)}
                     loadOptions={input => props.loadTokens(input, account.network)}
                     filterOptions={
-                        (options: Array<NetworkToken>, search: string, values: Array<NetworkToken>) => {
+                        (options: Array<NetworkToken>, search: string, values: Array<NetworkToken>) => options.map((o) => {
-                            return options.map(o => {
                             const added = tokens.find(t => t.symbol === o.symbol);
                             if (added) {
                                 return {
                                     ...o,
                                     name: `${o.name} (Already added)`,
-                                        disabled: true
+                                    disabled: true,
                                 };
-                                } else {
+                            }
                             return o;
-                                }
+                        })
-                            });
-                        }
                     }
                     valueKey="symbol"
                     labelKey="name"
                     placeholder="Search for token"
                     searchPromptText="Type token name or address"
-                    noResultsText="Token not found" />
+                    noResultsText="Token not found"
+                />
 
             </div>
 
             <SummaryTokens
                 pending={pending}
                 tokens={tokens}
-                removeToken={ props.removeToken } />
+                removeToken={props.removeToken}
+            />
 
         </div>
-    )
+    );
+};
 
-}
+export default (props: Props) => (
-
-export default (props: Props) => {
-    return (
     <SelectedAccount {...props}>
         <Summary {...props} />
     </SelectedAccount>
 );
-}

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

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 import BigNumber from 'bignumber.js';
@@ -18,12 +18,13 @@ type Props = {
 }
 
 const SummaryDetails = (props: Props): ?React$Element<string> => {
-
+    if (!props.summary.details) {
-    if (!props.summary.details) return (
+        return (
             <div className="summary-details">
-            <div className="toggle" onClick={ props.onToggle }></div>
+                <div className="toggle" onClick={props.onToggle} />
             </div>
         );
+    }
 
     const selectedCoin = props.coin;
     const fiatRate = props.fiat.find(f => f.network === selectedCoin.network);
@@ -32,7 +33,6 @@ const SummaryDetails = (props: Props): ?React$Element<string> => {
     let rateColumn = null;
 
     if (fiatRate) {
-
         const accountBalance = new BigNumber(props.balance);
         const fiatValue = new BigNumber(fiatRate.value);
         const fiat = accountBalance.times(fiatValue).toFixed(2);
@@ -51,7 +51,7 @@ const SummaryDetails = (props: Props): ?React$Element<string> => {
                 <div className="fiat-value">${ fiatValue.toFixed(2) }</div>
                 <div className="value">1.00 { selectedCoin.symbol }</div>
             </div>
-        )
+        );
     } else {
         balanceColumn = (
             <div className="column">
@@ -63,13 +63,13 @@ const SummaryDetails = (props: Props): ?React$Element<string> => {
 
     return (
         <div className="summary-details opened">
-            <div className="toggle" onClick={ props.onToggle }></div>
+            <div className="toggle" onClick={props.onToggle} />
             <div className="content">
                 { balanceColumn }
                 { rateColumn }
             </div>
         </div>
     );
-}
+};
 
 export default SummaryDetails;

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

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 import ColorHash from 'color-hash';
@@ -16,18 +16,17 @@ type Props = {
 }
 
 const SummaryTokens = (props: Props) => {
-
     if (!props.tokens || props.tokens.length < 1) return null;
 
     const bgColor = new ColorHash({ lightness: 0.7 });
     const textColor = new ColorHash();
 
     const tokens = props.tokens.map((token, index) => {
-        let iconColor = {
+        const iconColor = {
             color: textColor.hex(token.name),
             background: bgColor.hex(token.name),
-            borderColor: bgColor.hex(token.name)
+            borderColor: bgColor.hex(token.name),
-        }
+        };
 
         const pendingAmount: BigNumber = stateUtils.getPendingAmount(props.pending, token.symbol, true);
         const balance: string = new BigNumber(token.balance).minus(pendingAmount).toString(10);
@@ -40,16 +39,16 @@ const SummaryTokens = (props: Props) => {
                 </div>
                 <div className="name">{ token.name }</div>
                 <div className="balance">{ balance } { token.symbol }</div>
-                <button className="transparent" onClick={ event => props.removeToken(token) }></button>
+                <button className="transparent" onClick={event => props.removeToken(token)} />
             </div>
-        )
+        );
     });
 
     return (
         <div>
             { tokens }
         </div>
-    )
+    );
-}
+};
 
 export default SummaryTokens;

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

@@ -1,15 +1,15 @@
 /* @flow */
-'use strict';
+
 
 import React, { Component, PropTypes } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
+import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
 import Summary from './Summary';
 import * as SummaryActions from '~/js/actions/SummaryActions';
 import * as TokenActions from '~/js/actions/TokenActions';
 
-import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
 import type { State, Dispatch } from '~/flowtype';
 import type { StateProps as BaseStateProps, DispatchProps as BaseDispatchProps } from '../SelectedAccount';
 
@@ -31,9 +31,8 @@ type DispatchProps = BaseDispatchProps & {
 
 export type Props = StateProps & BaseStateProps & DispatchProps & BaseDispatchProps;
 
-const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State, own: OwnProps): StateProps => {
+const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State, own: OwnProps): StateProps => ({
-    return {
+    className: 'summary',
-        className: "summary",
     selectedAccount: state.selectedAccount,
     wallet: state.wallet,
 
@@ -41,16 +40,13 @@ const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: St
     summary: state.summary,
     fiat: state.fiat,
     localStorage: state.localStorage,
-    };
+});
-}
 
-const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => {
+const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => ({
-    return {
     onDetailsToggle: bindActionCreators(SummaryActions.onDetailsToggle, dispatch),
     addToken: bindActionCreators(TokenActions.add, dispatch),
     loadTokens: bindActionCreators(TokenActions.load, dispatch),
     removeToken: bindActionCreators(TokenActions.remove, dispatch),
-    };
+});
-}
 
-export default connect(mapStateToProps, mapDispatchToProps)(Summary)
+export default connect(mapStateToProps, mapDispatchToProps)(Summary);

src/js/components/wallet/aside/AccountSelection.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React, { PureComponent } from 'react';
 import { Link, NavLink } from 'react-router-dom';
@@ -14,7 +14,6 @@ import type { Props } from './index';
 import type { TrezorDevice, Accounts } from '~/flowtype';
 
 const AccountSelection = (props: Props): ?React$Element<string> => {
-
     const selected = props.wallet.selectedDevice;
     if (!selected) return null;
 
@@ -53,20 +52,20 @@ const AccountSelection = (props: Props): ?React$Element<string> => {
         return (
             <NavLink key={i} activeClassName="selected" className="account" to={url}>
                 { `Account #${(account.index + 1)}` }
-                <span>{ account.loaded ? balance : "Loading..." }</span>
+                <span>{ account.loaded ? balance : 'Loading...' }</span>
             </NavLink>
-        )
+        );
     });
 
     if (selectedAccounts.length < 1) {
         if (selected.connected) {
-            const url: string = location.pathname.replace(/account+\/([0-9]*)/, `account/0`);
+            const url: string = location.pathname.replace(/account+\/([0-9]*)/, 'account/0');
             selectedAccounts = (
                 <NavLink activeClassName="selected" className="account" to={url}>
                     Account #1
                     <span>Loading...</span>
                 </NavLink>
-            )
+            );
         }
     }
 
@@ -89,19 +88,19 @@ const AccountSelection = (props: Props): ?React$Element<string> => {
                     <div className="aside-tooltip-wrapper">
                         To add a new account, last account must have some transactions.
                     </div>
-                )
+                );
                 discoveryStatus = (
                     <Tooltip
-                            arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
+                        arrowContent={<div className="rc-tooltip-arrow-inner" />}
                         overlay={tooltip}
-                            placement="top">
+                        placement="top"
+                    >
                         <div className="add-account disabled">
                                 Add account
                         </div>
                     </Tooltip>
                 );
             }
-            
         } else if (!selected.connected || !selected.available) {
             discoveryStatus = (
                 <div className="discovery-status">
@@ -137,6 +136,6 @@ const AccountSelection = (props: Props): ?React$Element<string> => {
             { discoveryStatus }
         </section>
     );
-}
+};
 
 export default AccountSelection;

src/js/components/wallet/aside/Aside.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 //import React, { Node } from 'react';
 import * as React from 'react';
@@ -20,44 +20,42 @@ type TransitionMenuProps = {
     children?: React.Node;
 }
 
-const TransitionMenu = (props: TransitionMenuProps): React$Element<TransitionGroup> => {
+const TransitionMenu = (props: TransitionMenuProps): React$Element<TransitionGroup> => (
-    return (
     <TransitionGroup component="div" className="transition-container">
         <CSSTransition
             key={props.animationType}
-                onExit= { () => { window.dispatchEvent( new Event('resize') ) } }
+            onExit={() => { window.dispatchEvent(new Event('resize')); }}
             onExited={() => window.dispatchEvent(new Event('resize'))}
-                in={ true }
+            in
-                out={ true }
+            out
             classNames={props.animationType}
             appear={false}
-                timeout={ 300 }>
+            timeout={300}
+        >
             { props.children }
         </CSSTransition>
     </TransitionGroup>
-    )
+);
-}
 
 const Aside = (props: Props): React$Element<typeof StickyContainer | string> => {
-
     const selected: ?TrezorDevice = props.wallet.selectedDevice;
     const { location } = props.router;
 
-    if (location.pathname === '/' || !selected) return (<aside></aside>);
+    if (location.pathname === '/' || !selected) return (<aside />);
 
-    let menu = <section></section>;
+    let menu = <section />;
 
     if (props.deviceDropdownOpened) {
         menu = <DeviceDropdown {...props} />;
     } else if (location.state.network) {
         menu = (
-            <TransitionMenu animationType={ "slide-left" }>
+            <TransitionMenu animationType="slide-left">
                 <AccountSelection {...props} />
             </TransitionMenu>
         );
     } else if (selected.features && !selected.features.bootloader_mode && selected.features.initialized) {
         menu = (
-            <TransitionMenu animationType={ "slide-right" }>
+            <TransitionMenu animationType="slide-right">
                 <CoinSelection {...props} />
             </TransitionMenu>
         );
@@ -73,7 +71,7 @@ const Aside = (props: Props): React$Element<typeof StickyContainer | string> =>
                 </div>
             </div>
         </StickyContainer>
-    )
+    );
-}
+};
 
 export default Aside;

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

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 import { Link, NavLink } from 'react-router-dom';
@@ -20,15 +20,15 @@ const CoinSelection = (props: Props): React$Element<string> => {
         }
     }
 
-    const walletCoins = config.coins.map(item => {
+    const walletCoins = config.coins.map((item) => {
         const url = `${baseUrl}/network/${item.network}/account/0`;
-        const className = `coin ${ item.network }`
+        const className = `coin ${item.network}`;
         return (
             <NavLink key={item.network} to={url} className={className}>
                 { item.name }
             </NavLink>
-        )
+        );
-    })
+    });
 
     return (
         <section>
@@ -56,6 +56,6 @@ const CoinSelection = (props: Props): React$Element<string> => {
             </a>
         </section>
     );
-}
+};
 
 export default CoinSelection;

src/js/components/wallet/aside/DeviceSelection.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React, { Component } from 'react';
 import Select from 'react-select';
@@ -9,49 +9,48 @@ import type { Props } from './index';
 import type { TrezorDevice } from '~/flowtype';
 
 export const DeviceSelect = (props: Props) => {
-
     const { devices } = props;
     const { transport } = props.connect;
 
     const selected: ?TrezorDevice = props.wallet.selectedDevice;
     if (!selected) return null;
 
-    let deviceStatus: string = "Connected";
+    let deviceStatus: string = 'Connected';
-    let css: string = "device-select device";
+    let css: string = 'device-select device';
-    if (props.deviceDropdownOpened) css += " opened";
+    if (props.deviceDropdownOpened) css += ' opened';
 
     if (!selected.connected) {
-        css += " disconnected";
+        css += ' disconnected';
-        deviceStatus = "Disconnected";
+        deviceStatus = 'Disconnected';
     } else if (!selected.available) {
-        css += " unavailable";
+        css += ' unavailable';
-        deviceStatus = "Unavailable";
+        deviceStatus = 'Unavailable';
     } else {
         if (selected.unacquired) {
-            css += " unacquired";
+            css += ' unacquired';
-            deviceStatus = "Used in other window";
+            deviceStatus = 'Used in other window';
         }
         if (selected.isUsedElsewhere) {
-            css += " used-elsewhere";
+            css += ' used-elsewhere';
-            deviceStatus = "Used in other window";
+            deviceStatus = 'Used in other window';
         } else if (selected.featuresNeedsReload) {
-            css += " reload-features";
+            css += ' reload-features';
         }
     }
 
     if (selected.features && selected.features.major_version > 1) {
-        css += " trezor-t";
+        css += ' trezor-t';
     }
 
     const handleOpen = () => {
-        props.toggleDeviceDropdown(props.deviceDropdownOpened ? false : true);
+        props.toggleDeviceDropdown(!props.deviceDropdownOpened);
-    }
+    };
 
     const deviceCount = devices.length;
-    const webusb: boolean = (transport && transport.version.indexOf('webusb') >= 0) ? true : false;
+    const webusb: boolean = !!((transport && transport.version.indexOf('webusb') >= 0));
     const disabled: boolean = (devices.length < 1 && !webusb) || (devices.length === 1 && !selected.features);
     if (disabled) {
-        css += " disabled";
+        css += ' disabled';
     }
 
     return (
@@ -61,10 +60,10 @@ export const DeviceSelect = (props: Props) => {
                 <span className="status">{ deviceStatus }</span>
             </div>
             { deviceCount > 1 ? <div className="counter">{ deviceCount }</div> : null }
-            <div className="arrow"></div>
+            <div className="arrow" />
         </div>
     );
-}
+};
 
 type DeviceMenuItem = {
     type: string;
@@ -72,8 +71,8 @@ type DeviceMenuItem = {
 }
 
 export class DeviceDropdown extends Component<Props> {
-
     mouseDownHandler: (event: MouseEvent) => void;
+
     blurHandler: (event: FocusEvent) => void;
 
     constructor(props: Props) {
@@ -84,8 +83,7 @@ export class DeviceDropdown extends Component<Props> {
 
     componentDidUpdate() {
         const { transport } = this.props.connect;
-        if (transport && transport.version.indexOf('webusb') >= 0)
+        if (transport && transport.version.indexOf('webusb') >= 0) TrezorConnect.renderWebUSBButton();
-            TrezorConnect.renderWebUSBButton();
     }
 
     mouseDownHandler(event: MouseEvent): void {
@@ -113,8 +111,7 @@ export class DeviceDropdown extends Component<Props> {
         window.addEventListener('mousedown', this.mouseDownHandler, false);
         // window.addEventListener('blur', this.blurHandler, false);
         const { transport } = this.props.connect;
-        if (transport && transport.version.indexOf('webusb') >= 0)
+        if (transport && transport.version.indexOf('webusb') >= 0) TrezorConnect.renderWebUSBButton();
-            TrezorConnect.renderWebUSBButton();
     }
 
     componentWillUnmount(): void {
@@ -136,7 +133,6 @@ export class DeviceDropdown extends Component<Props> {
     }
 
     render() {
-
         const { devices } = this.props;
         const { transport } = this.props.connect;
         const selected: ?TrezorDevice = this.props.wallet.selectedDevice;
@@ -152,25 +148,23 @@ export class DeviceDropdown extends Component<Props> {
             const deviceMenuItems: Array<DeviceMenuItem> = [];
 
             if (selected.isUsedElsewhere) {
-                deviceMenuItems.push({ type: "reload", label: "Renew session" });
+                deviceMenuItems.push({ type: 'reload', label: 'Renew session' });
             } else if (selected.featuresNeedsReload) {
-                deviceMenuItems.push({ type: "reload", label: "Renew session" });
+                deviceMenuItems.push({ type: 'reload', label: 'Renew session' });
             }
 
-            deviceMenuItems.push({ type: "settings", label: "Device settings" });
+            deviceMenuItems.push({ type: 'settings', label: 'Device settings' });
             if (selected.features && selected.features.passphrase_protection && selected.connected && selected.available) {
-                deviceMenuItems.push({ type: "clone", label: "Clone device" });
+                deviceMenuItems.push({ type: 'clone', label: 'Clone device' });
             }
             //if (selected.remember) {
-                deviceMenuItems.push({ type: "forget", label: "Forget device" });
+            deviceMenuItems.push({ type: 'forget', label: 'Forget device' });
             //}
 
 
-            const deviceMenuButtons = deviceMenuItems.map((item, index) => {
+            const deviceMenuButtons = deviceMenuItems.map((item, index) => (
-                return (
+                <div key={item.type} className={item.type} onClick={event => this.onDeviceMenuClick(item, selected)}>{ item.label}</div>
-                    <div key={ item.type } className={ item.type } onClick={ (event) => this.onDeviceMenuClick(item, selected) }>{ item.label}</div>
+            ));
-                )
-            });
             currentDeviceMenu = deviceMenuButtons.length < 1 ? null : (
                 <div className="device-menu">
                     { deviceMenuButtons }
@@ -181,21 +175,21 @@ export class DeviceDropdown extends Component<Props> {
         const deviceList = devices.map((dev, index) => {
             if (dev === selected) return null;
 
-            let deviceStatus: string = "Connected";
+            let deviceStatus: string = 'Connected';
-            let css: string = "device item"
+            let css: string = 'device item';
             if (dev.unacquired || dev.isUsedElsewhere) {
-                deviceStatus = "Used in other window";
+                deviceStatus = 'Used in other window';
-                css += " unacquired";
+                css += ' unacquired';
             } else if (!dev.connected) {
-                deviceStatus = "Disconnected";
+                deviceStatus = 'Disconnected';
-                css += " disconnected";
+                css += ' disconnected';
             } else if (!dev.available) {
-                deviceStatus = "Unavailable";
+                deviceStatus = 'Unavailable';
-                css += " unavailable";
+                css += ' unavailable';
             }
 
             if (dev.features && dev.features.major_version > 1) {
-                css += " trezor-t";
+                css += ' trezor-t';
             }
 
             return (
@@ -204,11 +198,14 @@ export class DeviceDropdown extends Component<Props> {
                         <span className="label">{ dev.instanceLabel }</span>
                         <span className="status">{ deviceStatus }</span>
                     </div>
-                    <div className="forget-button" onClick={ (event) => {
+                    <div
+                        className="forget-button"
+                        onClick={(event) => {
                             event.stopPropagation();
                             event.preventDefault();
                             this.onDeviceMenuClick({ type: 'forget', label: '' }, dev);
-                    } }> </div>
+                        }}
+                    />
                 </div>
             );
         });

src/js/components/wallet/aside/StickyContainer.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 // https://github.com/KyleAMathews/react-headroom/blob/master/src/shouldUpdate.js
 
@@ -14,18 +14,25 @@ type Props = {
 }
 
 export default class StickyContainer extends React.PureComponent<Props> {
-
     // Class variables.
     currentScrollY: number = 0;
+
     lastKnownScrollY: number = 0;
+
     topOffset: number = 0;
 
     firstRender: boolean = false;
+
     framePending: boolean = false;
+
     stickToBottom: boolean = false;
+
     top: number = 0;
+
     aside: ?HTMLElement;
+
     wrapper: ?HTMLElement;
+
     subscribers = [];
 
     handleResize = (event: Event) => {
@@ -68,24 +75,21 @@ export default class StickyContainer extends React.PureComponent<Props> {
             if (this.topOffset > 0) this.topOffset = 0;
             if (maxTop < 0 && this.topOffset < maxTop) this.topOffset = maxTop;
             wrapper.style.top = `${this.topOffset}px`;
-
         } else {
             wrapper.classList.remove('fixed');
-            wrapper.style.top = `0px`;
+            wrapper.style.top = '0px';
             this.topOffset = 0;
         }
 
         if (wrapperBounds.height > viewportHeight) {
             wrapper.classList.remove('fixed-bottom');
-        } else {
+        } else if (wrapper.classList.contains('fixed-bottom')) {
-            if (wrapper.classList.contains('fixed-bottom')) {
             if (bottomBounds.top < wrapperBounds.bottom - bottomBounds.height) {
                 wrapper.classList.remove('fixed-bottom');
             }
         } else if (bottomBounds.bottom < viewportHeight) {
             wrapper.classList.add('fixed-bottom');
         }
-        }
 
         aside.style.minHeight = `${wrapperBounds.height}px`;
     }
@@ -135,7 +139,8 @@ export default class StickyContainer extends React.PureComponent<Props> {
             >
                 <div
                     className="sticky-container"
-                ref={ node => this.wrapper = node }>
+                    ref={node => this.wrapper = node}
+                >
                     { this.props.children }
                 </div>
             </aside>

src/js/components/wallet/aside/index.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React, { Component, PropTypes } from 'react';
 import { bindActionCreators } from 'redux';
@@ -43,8 +43,7 @@ type DispatchProps = {
 
 export type Props = StateProps & DispatchProps;
 
-const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State, own: OwnProps): StateProps => {
+const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State, own: OwnProps): StateProps => ({
-    return {
     connect: state.connect,
     accounts: state.accounts,
     router: state.router,
@@ -55,11 +54,9 @@ const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: St
     wallet: state.wallet,
     devices: state.devices,
     pending: state.pending,
-    };
+});
-}
 
-const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => {
+const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => ({
-    return {
     //onAccountSelect: bindActionCreators(AccountActions.onAccountSelect, dispatch),
     toggleDeviceDropdown: bindActionCreators(toggleDeviceDropdown, dispatch),
     addAccount: bindActionCreators(TrezorConnectActions.addAccount, dispatch),
@@ -68,10 +65,9 @@ const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps>
     duplicateDevice: bindActionCreators(TrezorConnectActions.duplicateDevice, dispatch),
     gotoDeviceSettings: bindActionCreators(TrezorConnectActions.gotoDeviceSettings, dispatch),
     onSelectDevice: bindActionCreators(TrezorConnectActions.onSelectDevice, dispatch),
-    };
+});
-}
 
 // export default connect(mapStateToProps, mapDispatchToProps)(Aside);
 export default withRouter(
-    connect(mapStateToProps, mapDispatchToProps)(Aside)
+    connect(mapStateToProps, mapDispatchToProps)(Aside),
 );

src/js/components/wallet/index.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import * as React from 'react';
 import { bindActionCreators } from 'redux';
@@ -28,8 +28,7 @@ type ContentProps = {
 }
 
 
-const Content = (props: ContentProps) => {
+const Content = (props: ContentProps) => (
-    return (
     <article>
         <nav>
             <Route path="/device/:device/network/:network/account/:account" component={AccountTabs} />
@@ -41,10 +40,8 @@ const Content = (props: ContentProps) => {
         <Footer />
     </article>
 );
-}
 
-const Wallet = (props: WalletContainerProps) => {
+const Wallet = (props: WalletContainerProps) => (
-    return (
     <div className="app">
         <Header />
         {/* <div>{ props.wallet.online ? "ONLINE" : "OFFLINE" }</div> */}
@@ -57,14 +54,11 @@ const Wallet = (props: WalletContainerProps) => {
         <ModalContainer />
     </div>
 );
-}
 
-const mapStateToProps: MapStateToProps<State, {}, WalletContainerProps> = (state: State, own: {}): WalletContainerProps => {
+const mapStateToProps: MapStateToProps<State, {}, WalletContainerProps> = (state: State, own: {}): WalletContainerProps => ({
-    return {
+    wallet: state.wallet,
-        wallet: state.wallet
+});
-    };
-}
 
 export default withRouter(
-    connect(mapStateToProps, null)(Wallet)
+    connect(mapStateToProps, null)(Wallet),
 );

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

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 import { bindActionCreators } from 'redux';
@@ -8,20 +8,20 @@ import { Notification } from '~/js/components/common/Notification';
 import * as TrezorConnectActions from '~/js/actions/TrezorConnectActions';
 
 import type { State, Dispatch } from '~/flowtype';
+
 type Props = {
     acquiring: boolean;
     acquireDevice: typeof TrezorConnectActions.acquire
 }
 
 const Acquire = (props: Props) => {
-
     const actions = props.acquiring ? [] : [
         {
             label: 'Acquire device',
             callback: () => {
-                props.acquireDevice()
+                props.acquireDevice();
-            }
+            },
-        }
+        },
     ];
 
     return (
@@ -35,17 +35,13 @@ const Acquire = (props: Props) => {
             />
         </section>
     );
-}
+};
 
 export default connect(
-    (state: State) => {
+    (state: State) => ({
-        return {
+        acquiring: state.connect.acquiring,
-            acquiring: state.connect.acquiring
+    }),
-        };
+    (dispatch: Dispatch) => ({
-    },
-    (dispatch: Dispatch) => {
-        return { 
         acquireDevice: bindActionCreators(TrezorConnectActions.acquire, dispatch),
-        };
+    }),
-    }
 )(Acquire);

src/js/components/wallet/pages/Bootloader.js

@@ -1,12 +1,11 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
-const Bootloader = () => {
+const Bootloader = () => (
-    return (
     <section className="device-settings">
         <div className="row">
             <h2>Your device is in firmware update mode</h2>
@@ -14,6 +13,5 @@ const Bootloader = () => {
         </div>
     </section>
 );
-}
 
 export default connect(null, null)(Bootloader);

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

@@ -1,13 +1,12 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import DashboardImg from '~/images/dashboard.png';
 
-const Dashboard = () => {
+const Dashboard = () => (
-    return (
     <section className="dashboard">
         <h2>Dashboard</h2>
         <div className="row">
@@ -17,6 +16,5 @@ const Dashboard = () => {
         </div>
     </section>
 );
-}
 
 export default connect(null, null)(Dashboard);

src/js/components/wallet/pages/DeviceSettings.js

@@ -1,12 +1,11 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
-export const DeviceSettings = () => {
+export const DeviceSettings = () => (
-    return (
     <section className="device-settings">
         <div className="row">
             <h2>Device settings is under construction</h2>
@@ -15,6 +14,5 @@ export const DeviceSettings = () => {
         </div>
     </section>
 );
-}
 
 export default connect(null, null)(DeviceSettings);

src/js/components/wallet/pages/DeviceSettingsTabs.js

@@ -1,5 +1,5 @@
 /* @flow */
-'use strict';
+
 
 import React, { Component } from 'react';
 import { NavLink } from 'react-router-dom';
@@ -16,7 +16,6 @@ type State = {
 }
 
 const AccountTabs = (props: any): any => {
-
     const urlParams = props.match.params;
     const basePath = `/device/${urlParams.device}/network/${urlParams.network}/account/${urlParams.account}`;
 
@@ -25,6 +24,6 @@ const AccountTabs = (props: any): any => {
             <a>Device settings</a>
         </div>
     );
-}
+};
 
 export default AccountTabs;

src/js/components/wallet/pages/Initialize.js

@@ -1,12 +1,11 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
-const Initialize = () => {
+const Initialize = () => (
-    return (
     <section className="device-settings">
         <div className="row">
             <h2>Your device is in not initialized</h2>
@@ -15,6 +14,5 @@ const Initialize = () => {
         </div>
     </section>
 );
-}
 
 export default connect(null, null)(Initialize);

src/js/components/wallet/pages/WalletSettings.js

@@ -1,16 +1,14 @@
 /* @flow */
-'use strict';
+
 
 import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
-export const WalletSettings = () => {
+export const WalletSettings = () => (
-    return (
     <section className="settings">
             Wallet settings
     </section>
 );
-}
 
 export default connect(null, null)(WalletSettings);

src/js/config/colors.js

@@ -0,0 +1,30 @@
+export default {
+    color_white: '#ffffff',
+
+    color_header: '#212121',
+    color_body: '#E3E3E3',
+    color_main: '#FBFBFB',
+    color_landing: '#F9F9F9',
+
+    color_text_primary: '#494949',
+    color_text_secondary: '#757575',
+
+    color_gray_light: '#F2F2F2', // hover menu
+    color_divider: '#E3E3E3', //#EBEBEB,
+
+    color_green_primary: '#01B757',
+    color_green_secondary: '#00AB51',
+    color_green_tertiary: '#009546',
+
+    color_info_primary: '#1E7FF0',
+    color_info_secondary: '#E1EFFF',
+
+    color_warning_primary: '#EB8A00',
+    color_warning_secondary: '#FFEFD9',
+
+    color_success_primary: '#01B757',
+    color_success_secondary: '#DFFFEE',
+
+    color_error_primary: '#ED1212',
+    color_error_secondary: '#FFE9E9',
+};

src/js/index.js

@@ -1,6 +1,4 @@
 /* @flow */
-'use strict';
-
 import React from 'react';
 import { render } from 'react-dom';
 import store from './store';
@@ -15,7 +13,7 @@ if (root) {
 
 window.onbeforeunload = () => {
     store.dispatch(onBeforeUnload());
-}
+};
 
 if (typeof module !== undefined && module.hasOwnProperty('hot')) {
     // $FlowIssue