From 909c657454be2492df390a7b26df1bee700d23d7 Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Mon, 13 Aug 2018 13:03:52 +0200
Subject: [PATCH] Refactored menu rendering

---
 src/js/components/common/Header.js            |  2 +-
 .../components/wallet/aside/CoinSelection.js  | 97 +++++++++----------
 .../components/wallet/pages/DeviceSettings.js |  5 +-
 src/js/constants/navigation.js                | 26 +++++
 src/styles/history.less                       |  2 -
 5 files changed, 74 insertions(+), 58 deletions(-)
 create mode 100644 src/js/constants/navigation.js

diff --git a/src/js/components/common/Header.js b/src/js/components/common/Header.js
index 6136aed6..2fe37ee7 100644
--- a/src/js/components/common/Header.js
+++ b/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">
diff --git a/src/js/components/wallet/aside/CoinSelection.js b/src/js/components/wallet/aside/CoinSelection.js
index 10445424..550f65d6 100644
--- a/src/js/components/wallet/aside/CoinSelection.js
+++ b/src/js/components/wallet/aside/CoinSelection.js
@@ -1,61 +1,54 @@
-/* @flow */
-
-
-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 = '';
-    if (selectedDevice && selectedDevice.features) {
-        baseUrl = `/device/${selectedDevice.features.device_id}`;
-        if (selectedDevice.instance) {
-            baseUrl += `:${selectedDevice.instance}`;
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { NavLink } from 'react-router-dom';
+import navigationConstants from '~/js/constants/navigation';
+
+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}`;
+    render() {
+        const { config } = this.props.localStorage;
         return (
-            <NavLink key={item.network} to={url} className={className}>
-                { item.name }
-            </NavLink>
+            <section>
+                {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>
+                {navigationConstants.map(item => (
+                    <a
+                        key={item.coinName}
+                        rel="noopener noreferrer"
+                        target="_blank"
+                        href={item.url}
+                    >{item.coinName}
+                    </a>
+                ))}
+            </section>
         );
-    });
+    }
+}
 
-    return (
-        <section>
-            { walletCoins }
-            <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
-            </a>
-        </section>
-    );
+CoinSelection.propTypes = {
+    config: PropTypes.object,
+    wallet: PropTypes.object,
+    selectedDevice: PropTypes.object,
+    localStorage: PropTypes.object,
 };
 
 export default CoinSelection;
\ No newline at end of file
diff --git a/src/js/components/wallet/pages/DeviceSettings.js b/src/js/components/wallet/pages/DeviceSettings.js
index a02a2f62..f14f5484 100644
--- a/src/js/components/wallet/pages/DeviceSettings.js
+++ b/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
diff --git a/src/js/constants/navigation.js b/src/js/constants/navigation.js
new file mode 100644
index 00000000..4dd85eb1
--- /dev/null
+++ b/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',
+    },
+];
\ No newline at end of file
diff --git a/src/styles/history.less b/src/styles/history.less
index c340272e..bdd03ceb 100644
--- a/src/styles/history.less
+++ b/src/styles/history.less
@@ -8,8 +8,6 @@
 
     .history-transaction {
 
-        
-
         .amount, .time, .address {
             margin-left: 10px;
         }