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,11 +13,10 @@ import AsideRowCoin from './row/coin/AsideRowCoin';
 import type { Props } from './index';
 
 
-const CoinSelection = (props: Props) => {
+class CoinSelection extends Component {
-    const { config } = props.localStorage;
+    getBaseUrl() {
-    const { selectedDevice } = props.wallet;
+        const { selectedDevice } = this.props.wallet;
-
+        let baseUrl = '';
-    let baseUrl: string = '';
         if (selectedDevice && selectedDevice.features) {
             baseUrl = `/device/${selectedDevice.features.device_id}`;
             if (selectedDevice.instance) {
@@ -24,9 +24,14 @@ const CoinSelection = (props: Props) => {
             }
         }
 
-    const walletCoins = config.coins.map((item) => {
+        return baseUrl;
-        const url = `${baseUrl}/network/${item.network}/account/0`;
+    }
 
+    render() {
+        const { config } = this.props.localStorage;
+        return (
+            <React.Fragment>
+                {config.coins.map((item) => {
                     let imgName = item.network;
                     if (item.network === 'ethereum') {
                         imgName = 'eth';
@@ -36,7 +41,10 @@ const CoinSelection = (props: Props) => {
                     const imgUrl = `../images/${imgName}-logo.png`;
 
                     return (
-            <NavLink to={url}>
+                        <NavLink
+                            key={item.network}
+                            to={`${this.getBaseUrl()}/network/${item.network}/account/0`}
+                        >
                             <AsideRowCoin
                                 coin={{
                                     img: imgUrl,
@@ -45,9 +53,12 @@ const CoinSelection = (props: Props) => {
                             />
                         </NavLink>
                     );
-    });
+                })}
-
+                <AsideDivider
-    const externalCoins = coins.map(coin => (
+                    textLeft="Other coins"
+                    textRight="(You will be redirected)"
+                />
+                {coins.map(coin => (
                     <a href={coin.url}>
                         <AsideRowCoin
                             coin={{
@@ -60,19 +71,17 @@ const CoinSelection = (props: Props) => {
                             }}
                         />
                     </a>
-    ));
+                ))}
-
+            </React.Fragment>
-
-    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;