add externalWallet to CoinMenu

src/constants/coins.js

@@ -48,5 +48,6 @@ export default [
         id: 'xem',
         coinName: 'NEM',
         url: 'https://nem.io/downloads/',
+        external: true,
     },
 ];

src/views/Wallet/components/LeftNavigation/Container.js

@@ -7,6 +7,7 @@ import { withRouter } from 'react-router-dom';
 import * as TrezorConnectActions from 'actions/TrezorConnectActions';
 import * as DiscoveryActions from 'actions/DiscoveryActions';
 import * as RouterActions from 'actions/RouterActions';
+import * as ModalActions from 'actions/ModalActions';
 import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
 import type { State, Dispatch } from 'flowtype';
 
@@ -38,6 +39,7 @@ const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps>
     duplicateDevice: bindActionCreators(TrezorConnectActions.duplicateDevice, dispatch),
     gotoDeviceSettings: bindActionCreators(RouterActions.gotoDeviceSettings, dispatch),
     onSelectDevice: bindActionCreators(RouterActions.selectDevice, dispatch),
+    gotoExternalWallet: bindActionCreators(ModalActions.gotoExternalWallet, dispatch),
 });
 
 export default withRouter(

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

@@ -1,3 +1,5 @@
+/* @flow */
+
 import styled from 'styled-components';
 import coins from 'constants/coins';
 import colors from 'config/colors';
@@ -5,12 +7,19 @@ import ICONS from 'config/icons';
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
 import { NavLink } from 'react-router-dom';
+import Link from 'components/Link';
 import Divider from '../Divider';
 import RowCoin from '../RowCoin';
 
+import type { Props } from '../common';
+
 const Wrapper = styled.div``;
 
-class CoinMenu extends PureComponent {
+const ExternalWallet = styled.div`
+    cursor: pointer;
+`;
+
+class CoinMenu extends PureComponent<Props> {
     getBaseUrl() {
         const { selectedDevice } = this.props.wallet;
         let baseUrl = '';
@@ -24,6 +33,27 @@ class CoinMenu extends PureComponent {
         return baseUrl;
     }
 
+    getOtherCoins() {
+        return coins.map((coin) => {
+            const row = (
+                <RowCoin
+                    coin={{
+                        name: coin.coinName,
+                        id: coin.id,
+                    }}
+                    iconRight={{
+                        type: ICONS.SKIP,
+                        color: colors.TEXT_SECONDARY,
+                        size: 27,
+                    }}
+                />
+            );
+
+            if (coin.external) return <ExternalWallet key={coin.id} onClick={() => this.props.gotoExternalWallet(coin.id, coin.url)}>{row}</ExternalWallet>;
+            return <Link key={coin.id} href={coin.url} target="_top">{row}</Link>;
+        });
+    }
+
     render() {
         const { config } = this.props.localStorage;
         return (
@@ -46,31 +76,16 @@ class CoinMenu extends PureComponent {
                     textRight="(You will be redirected)"
                     hasBorder
                 />
-                {coins.map(coin => (
+                {this.getOtherCoins()}
-                    <a key={coin.id} href={coin.url}>
-                        <RowCoin
-                            coin={{
-                                name: coin.coinName,
-                                id: coin.id,
-                            }}
-                            iconRight={{
-                                type: ICONS.SKIP,
-                                color: colors.TEXT_SECONDARY,
-                                size: 27,
-                            }}
-                        />
-                    </a>
-                ))}
             </Wrapper>
         );
     }
 }
 
 CoinMenu.propTypes = {
-    config: PropTypes.object,
+    localStorage: PropTypes.object.isRequired,
-    wallet: PropTypes.object,
+    wallet: PropTypes.object.isRequired,
-    selectedDevice: PropTypes.object,
+    gotoExternalWallet: PropTypes.func.isRequired,
-    localStorage: PropTypes.object,
 };
 
 export default CoinMenu;

src/views/Wallet/components/LeftNavigation/components/common.js

@@ -2,6 +2,7 @@
 import * as TrezorConnectActions from 'actions/TrezorConnectActions';
 import * as DiscoveryActions from 'actions/DiscoveryActions';
 import * as RouterActions from 'actions/RouterActions';
+import * as ModalActions from 'actions/ModalActions';
 import { toggleDeviceDropdown } from 'actions/WalletActions';
 import type { State } from 'flowtype';
 
@@ -25,6 +26,7 @@ export type DispatchProps = {
     duplicateDevice: typeof TrezorConnectActions.duplicateDevice,
     gotoDeviceSettings: typeof RouterActions.gotoDeviceSettings,
     onSelectDevice: typeof RouterActions.selectDevice,
+    gotoExternalWallet: typeof ModalActions.gotoExternalWallet,
 }
 
 export type Props = StateProps & DispatchProps;