Convert 'CoinSelection' to a class component

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

@@ -3,7 +3,8 @@ import coins from 'constants/coins';
 import colors from 'config/colors';
 import ICONS from 'config/icons';
 import { NavLink } from 'react-router-dom';
-import React from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import AsideDivider from './AsideDivider';
 import AsideRowCoin from './row/coin/AsideRowCoin';
@@ -12,67 +13,75 @@ import AsideRowCoin from './row/coin/AsideRowCoin';
 import type { Props } from './index';
 
 
-const CoinSelection = (props: Props) => {
-    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}`;
+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}`;
+            }
         }
-    }
-
-    const walletCoins = config.coins.map((item) => {
-        const url = `${baseUrl}/network/${item.network}/account/0`;
 
-        let imgName = item.network;
-        if (item.network === 'ethereum') {
-            imgName = 'eth';
-        } else if (item.network === 'ethereum-classic') {
-            imgName = 'etc';
-        }
-        const imgUrl = `../images/${imgName}-logo.png`;
+        return baseUrl;
+    }
 
+    render() {
+        const { config } = this.props.localStorage;
         return (
-            <NavLink to={url}>
-                <AsideRowCoin
-                    coin={{
-                        img: imgUrl,
-                        name: item.name,
-                    }}
+            <React.Fragment>
+                {config.coins.map((item) => {
+                    let imgName = item.network;
+                    if (item.network === 'ethereum') {
+                        imgName = 'eth';
+                    } else if (item.network === 'ethereum-classic') {
+                        imgName = 'etc';
+                    }
+                    const imgUrl = `../images/${imgName}-logo.png`;
+
+                    return (
+                        <NavLink
+                            key={item.network}
+                            to={`${this.getBaseUrl()}/network/${item.network}/account/0`}
+                        >
+                            <AsideRowCoin
+                                coin={{
+                                    img: imgUrl,
+                                    name: item.name,
+                                }}
+                            />
+                        </NavLink>
+                    );
+                })}
+                <AsideDivider
+                    textLeft="Other coins"
+                    textRight="(You will be redirected)"
                 />
-            </NavLink>
+                {coins.map(coin => (
+                    <a href={coin.url}>
+                        <AsideRowCoin
+                            coin={{
+                                img: coin.image,
+                                name: coin.coinName,
+                            }}
+                            icon={{
+                                type: ICONS.REDIRECT,
+                                color: colors.TEXT_SECONDARY,
+                            }}
+                        />
+                    </a>
+                ))}
+            </React.Fragment>
         );
-    });
-
-    const externalCoins = coins.map(coin => (
-        <a href={coin.url}>
-            <AsideRowCoin
-                coin={{
-                    img: coin.image,
-                    name: coin.coinName,
-                }}
-                icon={{
-                    type: ICONS.REDIRECT,
-                    color: colors.TEXT_SECONDARY,
-                }}
-            />
-        </a>
-    ));
-
+    }
+}
 
-    return (
-        <AsideSection>
-            { walletCoins }
-            <AsideDivider
-                textLeft="Other coins"
-                textRight="(You will be redirected)"
-            />
-            { externalCoins }
-        </AsideSection>
-    );
+CoinSelection.propTypes = {
+    config: PropTypes.object,
+    wallet: PropTypes.object,
+    selectedDevice: PropTypes.object,
+    localStorage: PropTypes.object,
 };
 
 export default CoinSelection;