diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js index aa81143d..41f8004a 100644 --- a/src/components/SideBar/index.js +++ b/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({ - noShrink: true, -})` +const Container = styled(Box)` 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 { render() { - const { t, accounts, openModal } = this.props + const { t, accounts, openModal, currentDevice } = this.props return ( - + {t('sidebar.menu')}
@@ -95,6 +106,21 @@ class SideBar extends PureComponent { + + + + + + + Ledger Nano S + + + + {t(currentDevice !== null ? 'device.connected' : 'device.notConnected')} + + + + ) } diff --git a/src/components/TopBar.js b/src/components/TopBar.js index b59ebfce..3a5722ad 100644 --- a/src/components/TopBar.js +++ b/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 { } } - 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 ( - + {hasAccounts && (sync.progress === true @@ -138,23 +113,12 @@ class TopBar extends PureComponent { {hasPassword && } - - ) } } -const CountDevices = ({ count } = { count: Number }) => ( - - - - - {count} - -) - const LockApplication = ({ onLock }: { onLock: Function }) => ( ( ) -const DeviceIcon = props => ( - - - -) - const LockIcon = props => (