Refactored menu rendering

src/js/components/common/Header.js

@@ -47,7 +47,7 @@ const A = styled.a`
     }
 `;
 
-const Header = (): React$Element<string> => (
+const Header = () => (
     <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">

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

@@ -1,61 +1,54 @@
-/* @flow */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { NavLink } from 'react-router-dom';
+import navigationConstants from '~/js/constants/navigation';
 
-
-import React from 'react';
-import { Link, NavLink } from 'react-router-dom';
-
-import type { Props } from './index';
-import type { TrezorDevice } from '~/flowtype';
-
-const CoinSelection = (props: Props): React$Element<string> => {
-    const { location } = props.router;
-    const { config } = props.localStorage;
-    const { selectedDevice } = props.wallet;
-
-    let baseUrl: string = '';
+class CoinSelection extends Component {
+    getBaseUrl() {
+        const { selectedDevice } = this.props.wallet;
+        let baseUrl = '';
         if (selectedDevice && selectedDevice.features) {
             baseUrl = `/device/${selectedDevice.features.device_id}`;
             if (selectedDevice.instance) {
                 baseUrl += `:${selectedDevice.instance}`;
             }
         }
+        return baseUrl;
+    }
 
-    const walletCoins = config.coins.map((item) => {
-        const url = `${baseUrl}/network/${item.network}/account/0`;
-        const className = `coin ${item.network}`;
-        return (
-            <NavLink key={item.network} to={url} className={className}>
-                { item.name }
-            </NavLink>
-        );
-    });
-
+    render() {
+        const { config } = this.props.localStorage;
         return (
             <section>
-            { walletCoins }
+                {config.coins.map(item => (
+                    <NavLink
+                        key={item.network}
+                        to={`${this.getBaseUrl()}/network/${item.network}/account/0`}
+                    >{ item.name }
+                    </NavLink>
+                ))}
                 <div className="coin-divider">
                     Other coins <span>(You will be redirected)</span>
                 </div>
-            <a href="https://wallet.trezor.io/#/coin/btc" className="coin btc external">
-                Bitcoin
-            </a>
-            <a href="https://wallet.trezor.io/#/coin/ltc" className="coin ltc external">
-                Litecoin
-            </a>
-            <a href="https://wallet.trezor.io/#/coin/bch" className="coin bch external">
-                Bitcoin Cash
-            </a>
-            <a href="https://wallet.trezor.io/#/coin/btg" className="coin btg external">
-                Bitcoin Gold
-            </a>
-            <a href="https://wallet.trezor.io/#/coin/dash" className="coin dash external">
-                Dash
-            </a>
-            <a href="https://wallet.trezor.io/#/coin/zec" className="coin zec external">
-                Zcash
+                {navigationConstants.map(item => (
+                    <a
+                        key={item.coinName}
+                        rel="noopener noreferrer"
+                        target="_blank"
+                        href={item.url}
+                    >{item.coinName}
                     </a>
+                ))}
             </section>
         );
+    }
+}
+
+CoinSelection.propTypes = {
+    config: PropTypes.object,
+    wallet: PropTypes.object,
+    selectedDevice: PropTypes.object,
+    localStorage: PropTypes.object,
 };
 
 export default CoinSelection;

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

@@ -6,8 +6,7 @@ import colors from '~/js/config/colors';
 import ICONS from '~/js/constants/icons';
 import { connect } from 'react-redux';
 
-const Section = styled.section`
-`;
+const Section = styled.section``;
 
 const P = styled.p`
     padding: 12px 0px 24px 0px;
@@ -28,7 +27,7 @@ const Row = styled.div`
     padding-bottom: 98px;
 `;
 
-export const DeviceSettings = () => (
+const DeviceSettings = () => (
     <Section>
         <Row>
             <Icon

src/js/constants/navigation.js

@@ -0,0 +1,26 @@
+export default [
+    {
+        coinName: 'Bitcoin',
+        url: 'https://wallet.trezor.io/#/coin/btc',
+    },
+    {
+        coinName: 'Litecoin',
+        url: 'https://wallet.trezor.io/#/coin/ltc',
+    },
+    {
+        coinName: 'Bitcoin Cash',
+        url: 'https://wallet.trezor.io/#/coin/bch',
+    },
+    {
+        coinName: 'Bitcoin Gold',
+        url: 'https://wallet.trezor.io/#/coin/btg',
+    },
+    {
+        coinName: 'Dash',
+        url: 'https://wallet.trezor.io/#/coin/dash',
+    },
+    {
+        coinName: 'Zcash',
+        url: 'https://wallet.trezor.io/#/coin/zec',
+    },
+];

src/styles/history.less

@@ -8,8 +8,6 @@
 
     .history-transaction {
 
-        
-
         .amount, .time, .address {
             margin-left: 10px;
         }