auto generated clickable coinlogos in dashboard

src/views/Wallet/views/Dashboard/Container.js

@@ -0,0 +1,26 @@
+/* @flow */
+import { connect } from 'react-redux';
+import type { MapStateToProps } from 'react-redux';
+import type { State } from 'flowtype';
+import Dashboard from "./index";
+
+type OwnProps = {};
+
+type StateProps = {
+    localStorage: $ElementType<State, 'localStorage'>,
+    wallet: $ElementType<State, 'wallet'>,
+};
+
+export type Props = StateProps;
+
+const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (
+    state: State
+): StateProps => ({
+    localStorage: state.localStorage,
+    wallet: state.wallet,
+});
+
+export default connect(
+    mapStateToProps,
+    null
+)(Dashboard);

src/views/Wallet/views/Dashboard/index.js

@@ -1,13 +1,13 @@
 /* @flow */
 import React from 'react';
 import styled from 'styled-components';
-import { connect } from 'react-redux';
 import Content from 'views/Wallet/components/Content';
-
+import { NavLink } from 'react-router-dom';
 import { CoinLogo, H4, P } from 'trezor-ui-components';
 
 import { FormattedMessage } from 'react-intl';
 import l10nMessages from './index.messages';
+import { Props } from './Container';
 
 const Wrapper = styled.div`
     display: flex;
@@ -30,17 +30,12 @@ const StyledP = styled(P)`
     }
 `;
 
-const Overlay = styled.div`
+const Coins = styled.div`
     display: flex;
-    width: 100%;
+    flex-wrap: wrap;
-    height: 40px;
-    justify-content: center;
-    align-items: center;
-    opacity: 0.2;
-    background: white;
 `;
 
-const StyledCoinLogo = styled(CoinLogo)`
+const StyledNavLink = styled(NavLink)`
     margin-right: 10px;
 
     &:last-child {
@@ -48,7 +43,27 @@ const StyledCoinLogo = styled(CoinLogo)`
     }
 `;
 
-const Dashboard = () => (
+const StyledCoinLogo = styled(CoinLogo)`
+    opacity: 0.7;
+    transition: opacity 0.2s ease-in-out;
+
+    &:hover {
+        opacity: 1;
+    }
+`;
+
+const getBaseUrl = device => {
+    let baseUrl = '';
+    if (device && device.features) {
+        baseUrl = `/device/${device.features.device_id}`;
+        if (device.instance) {
+            baseUrl += `:${device.instance}`;
+        }
+    }
+
+    return baseUrl;
+};
+const Dashboard = (props: Props) => (
     <Content>
         <Wrapper>
             <Row data-test="Dashboard__page__content">
@@ -58,16 +73,21 @@ const Dashboard = () => (
                 <StyledP>
                     <FormattedMessage {...l10nMessages.TR_YOU_WILL_GAIN_ACCESS} />
                 </StyledP>
-                <Overlay>
+                <Coins>
-                    <StyledCoinLogo network="eth" height={32} />
+                    {props.localStorage.config.networks.map(network => (
-                    <StyledCoinLogo network="xrp" height={32} />
+                        <StyledNavLink
-                </Overlay>
+                            key={network.shortcut}
+                            to={`${getBaseUrl(props.wallet.selectedDevice)}/network/${
+                                network.shortcut
+                            }/account/0`}
+                        >
+                            <StyledCoinLogo network={network.shortcut} height={32} />
+                        </StyledNavLink>
+                    ))}
+                </Coins>
             </Row>
         </Wrapper>
     </Content>
 );
 
-export default connect(
+export default Dashboard
-    null,
-    null
-)(Dashboard);

src/views/index.js

@@ -23,7 +23,7 @@ import AccountSend from 'views/Wallet/views/Account/Send';
 import AccountReceive from 'views/Wallet/views/Account/Receive';
 import AccountSignVerify from 'views/Wallet/views/Account/SignVerify/Container';
 
-import WalletDashboard from 'views/Wallet/views/Dashboard';
+import WalletDashboard from 'views/Wallet/views/Dashboard/Container';
 import WalletDeviceSettings from 'views/Wallet/views/DeviceSettings';
 import WalletSettings from 'views/Wallet/views/WalletSettings/Container';
 import WalletBootloader from 'views/Wallet/views/Bootloader';