Merge pull request #69 from loeck/master

Add Connected device in bottom of SideBar

src/components/SideBar/index.js

@@ -9,8 +9,9 @@ import { connect } from 'react-redux'
 import { MODAL_SEND, MODAL_RECEIVE, MODAL_ADD_ACCOUNT } from 'constants'
 
 import type { MapStateToProps } from 'react-redux'
-import type { Accounts, T } from 'types/common'
+import type { Accounts, T, Device } from 'types/common'
 
+import { getCurrentDevice } from 'reducers/devices'
 import { openModal } from 'reducers/modals'
 import { getVisibleAccounts } from 'reducers/accounts'
 
@@ -19,6 +20,7 @@ import { formatBTC } from 'helpers/format'
 import Box from 'components/base/Box'
 import GrowScroll from 'components/base/GrowScroll'
 import Icon from 'components/base/Icon'
+import Text from 'components/base/Text'
 import Item from './Item'
 
 const CapsSubtitle = styled(Box).attrs({
@@ -31,20 +33,29 @@ const CapsSubtitle = styled(Box).attrs({
   font-weight: bold;
 `
 
-const Container = styled(Box).attrs({
+const Container = styled(Box)`
-  noShrink: true,
-})`
   width: ${p => p.theme.sizes.sideBarWidth}px;
 `
 
+const Connected = styled(Box).attrs({
+  bg: p => (p.state ? 'green' : 'grenade'),
+  mx: 3,
+})`
+  border-radius: 50%;
+  height: 10px;
+  width: 10px;
+`
+
 type Props = {
   t: T,
   accounts: Accounts,
   openModal: Function,
+  currentDevice: Device,
 }
 
 const mapStateToProps: MapStateToProps<*, *, *> = state => ({
   accounts: getVisibleAccounts(state),
+  currentDevice: getCurrentDevice(state),
 })
 
 const mapDispatchToProps = {
@@ -53,11 +64,11 @@ const mapDispatchToProps = {
 
 class SideBar extends PureComponent<Props> {
   render() {
-    const { t, accounts, openModal } = this.props
+    const { t, accounts, openModal, currentDevice } = this.props
 
     return (
       <Container bg="white">
-        <Box flow={4} pt={4} grow>
+        <Box flow={3} pt={4} grow>
           <Box flow={2}>
             <CapsSubtitle>{t('sidebar.menu')}</CapsSubtitle>
             <div>
@@ -95,6 +106,21 @@ class SideBar extends PureComponent<Props> {
             </GrowScroll>
           </Box>
         </Box>
+        <Box borderColor="grey" borderWidth={1} borderTop horizontal py={1}>
+          <Box align="center" justify="center">
+            <Connected state={currentDevice !== null} />
+          </Box>
+          <Box>
+            <Box>
+              <Text fontSize={1}>Ledger Nano S</Text>
+            </Box>
+            <Box>
+              <Text fontSize={0} color="grey">
+                {t(currentDevice !== null ? 'device.connected' : 'device.notConnected')}
+              </Text>
+            </Box>
+          </Box>
+        </Box>
       </Container>
     )
   }

src/components/TopBar.js

@@ -6,19 +6,15 @@ import styled from 'styled-components'
 import { ipcRenderer } from 'electron'
 
 import type { MapStateToProps, MapDispatchToProps } from 'react-redux'
-import type { Devices } from 'types/common'
-import type { SetCurrentDevice } from 'actions/devices'
 
-import { getDevices, getCurrentDevice } from 'reducers/devices'
 import { getAccounts } from 'reducers/accounts'
-import { setCurrentDevice } from 'actions/devices'
 import { lock } from 'reducers/application'
 import { hasPassword } from 'reducers/settings'
 
 import Box from 'components/base/Box'
 
 const Container = styled(Box).attrs({
-  borderColor: '#e2e2e2',
+  borderColor: 'grey',
   borderWidth: 1,
   borderBottom: true,
   noShrink: true,
@@ -35,34 +31,19 @@ const Container = styled(Box).attrs({
   z-index: 20;
 `
 
-const Filter = styled.div`
-  background: ${p => p.theme.colors.cream};
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  z-index: -1;
-`
-
 const mapStateToProps: MapStateToProps<*, *, *> = state => ({
   hasAccounts: Object.keys(getAccounts(state)).length > 0,
-  currentDevice: getCurrentDevice(state),
-  devices: getDevices(state),
   hasPassword: hasPassword(state),
 })
 
 const mapDispatchToProps: MapDispatchToProps<*, *, *> = {
-  setCurrentDevice,
   lock,
 }
 
 type Props = {
   hasAccounts: boolean,
-  devices: Devices,
   hasPassword: boolean,
   lock: Function,
-  setCurrentDevice: SetCurrentDevice,
 }
 type State = {
   sync: {
@@ -116,20 +97,14 @@ class TopBar extends PureComponent<Props, State> {
     }
   }
 
-  handleSelectDevice = device => () => {
-    const { setCurrentDevice } = this.props
-
-    setCurrentDevice(device)
-  }
-
   handleLock = () => this.props.lock()
 
   render() {
-    const { devices, hasPassword, hasAccounts } = this.props
+    const { hasPassword, hasAccounts } = this.props
     const { sync } = this.state
 
     return (
-      <Container>
+      <Container bg="cream">
         <Box grow>
           {hasAccounts &&
             (sync.progress === true
@@ -138,23 +113,12 @@ class TopBar extends PureComponent<Props, State> {
         </Box>
         <Box justify="flex-end" horizontal>
           {hasPassword && <LockApplication onLock={this.handleLock} />}
-          <CountDevices count={devices.length} />
         </Box>
-        <Filter />
       </Container>
     )
   }
 }
 
-const CountDevices = ({ count } = { count: Number }) => (
-  <Box color="night" horizontal flow={10}>
-    <Box>
-      <DeviceIcon height={20} width={20} />
-    </Box>
-    <Box>{count}</Box>
-  </Box>
-)
-
 const LockApplication = ({ onLock }: { onLock: Function }) => (
   <Box
     relative
@@ -169,15 +133,6 @@ const LockApplication = ({ onLock }: { onLock: Function }) => (
   </Box>
 )
 
-const DeviceIcon = props => (
-  <svg {...props} viewBox="0 0 19.781 19.781">
-    <path
-      d="M14.507 0L9.8 4.706a2.92 2.92 0 0 0-1.991.854l-6.89 6.889a2.93 2.93 0 0 0 0 4.143l2.33 2.33a2.925 2.925 0 0 0 4.141 0l6.89-6.891c.613-.612.895-1.43.851-2.232l4.589-4.588L14.507 0zm.386 8.792a2.927 2.927 0 0 0-.611-.902l-2.33-2.331a2.945 2.945 0 0 0-1.08-.682l3.637-3.636 3.968 3.969-3.584 3.582zm.693-5.381l-.949.949-1.26-1.26.949-.949 1.26 1.26zm1.881 1.882l-.949.949-1.26-1.26.948-.949 1.261 1.26z"
-      fill="currentColor"
-    />
-  </svg>
-)
-
 const LockIcon = props => (
   <svg {...props} viewBox="0 0 482.8 482.8">
     <path

static/i18n/en/translation.yml

@@ -10,6 +10,10 @@ sidebar:
   menu: Menu
   accounts: Accounts
 
+device:
+  connected: Connected
+  notConnected: Not connected
+
 dashboard:
   title: Dashboard
 

static/i18n/fr/translation.yml

@@ -10,6 +10,10 @@ sidebar:
   menu: Menu
   accounts: Comptes
 
+device:
+  connected: Connecté
+  notConnected: Non connecté
+
 dashboard:
   title: Tableau de bord