Merge branch 'styled-components-refactor' of https://github.com/satoshilabs/trezor-wallet into styled-components-refactor

.eslintrc

@@ -9,6 +9,7 @@
         "jest": true
     },
     "rules": {
+        "class-methods-use-this": 0,
         "react/require-default-props": 0,
         "react/forbid-prop-types": 0,
         "react/destructuring-assignment": 0,

src/js/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js

@@ -1,4 +1,4 @@
-/* @flow */
+import styled from 'styled-components';
 import coins from 'constants/coins';
 import colors from 'config/colors';
 import ICONS from 'config/icons';
@@ -8,6 +8,8 @@ import { NavLink } from 'react-router-dom';
 import Divider from '../Divider';
 import RowCoin from '../RowCoin';
 
+const Wrapper = styled.div``;
+
 class CoinMenu extends Component {
     getBaseUrl() {
         const { selectedDevice } = this.props.wallet;
@@ -22,33 +24,33 @@ class CoinMenu extends Component {
         return baseUrl;
     }
 
+    getImgUrl(network) {
+        let imgName = network;
+        if (network === 'ethereum') {
+            imgName = 'eth';
+        } else if (network === 'ethereum-classic') {
+            imgName = 'etc';
+        }
+        return `../images/${imgName}-logo.png`;
+    }
+
     render() {
         const { config } = this.props.localStorage;
         return (
-            <React.Fragment>
+            <Wrapper>
-                {config.coins.map((item) => {
+                {config.coins.map(item => (
-                    let imgName = item.network;
+                    <NavLink
-                    if (item.network === 'ethereum') {
+                        key={item.network}
-                        imgName = 'eth';
+                        to={`${this.getBaseUrl()}/network/${item.network}/account/0`}
-                    } else if (item.network === 'ethereum-classic') {
+                    >
-                        imgName = 'etc';
+                        <RowCoin
-                    }
+                            coin={{
-                    const imgUrl = `../images/${imgName}-logo.png`;
+                                img: this.getImgUrl(item.network),
-
+                                name: item.name,
-                    return (
+                            }}
-                        <NavLink
+                        />
-                            key={item.network}
+                    </NavLink>
-                            to={`${this.getBaseUrl()}/network/${item.network}/account/0`}
+                ))}
-                        >
-                            <RowCoin
-                                coin={{
-                                    img: imgUrl,
-                                    name: item.name,
-                                }}
-                            />
-                        </NavLink>
-                    );
-                })}
                 <Divider
                     textLeft="Other coins"
                     textRight="(You will be redirected)"
@@ -70,7 +72,7 @@ class CoinMenu extends Component {
                         />
                     </a>
                 ))}
-            </React.Fragment>
+            </Wrapper>
         );
     }
 }

src/js/views/Wallet/components/LeftNavigation/components/Row/index.js

@@ -6,26 +6,22 @@ import { TRANSITION_TIME } from 'config/variables';
 
 const Wrapper = styled.div`
     height: 100%;
-
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+    cursor: pointer;
+    transition: background-color ${TRANSITION_TIME.BASE}, color ${TRANSITION_TIME.BASE};
+
     ${props => props.column && css`
         flex-direction: column;
         align-items: flex-start;
     `}
-
-    cursor: pointer;
-    transition: background-color ${TRANSITION_TIME.BASE}, color ${TRANSITION_TIME.BASE};
 `;
 
-const Row = ({
+const Row = ({ children, column = false }) => (
-    children, column = false,
+    <Wrapper column={column}>
-}) => (
+        {children}
-    <Wrapper
-        column={column}
-    >{children}
     </Wrapper>
 );