Thibaut
7 years ago
committed by
GitHub
GitHub
34 changed files with 392 additions and 292 deletions
@ -0,0 +1,22 @@ |
|||||
|
// @flow
|
||||
|
import axios from 'axios' |
||||
|
import { GET_CALLS_RETRY, GET_CALLS_TIMEOUT } from 'config/constants' |
||||
|
import { userFriendlyError } from 'api/Ledger' |
||||
|
import { retry } from 'helpers/promise' |
||||
|
|
||||
|
const doRequest = axios // TODO later introduce a way to run it in renderer based on a env, we will diverge this implementation
|
||||
|
|
||||
|
export default (arg: Object) => { |
||||
|
let promise |
||||
|
if (arg.method === 'GET') { |
||||
|
if (!('timeout' in arg)) { |
||||
|
arg.timeout = GET_CALLS_TIMEOUT |
||||
|
} |
||||
|
promise = retry(() => doRequest(arg), { |
||||
|
maxRetry: GET_CALLS_RETRY, |
||||
|
}) |
||||
|
} else { |
||||
|
promise = doRequest(arg) |
||||
|
} |
||||
|
return userFriendlyError(promise) |
||||
|
} |
||||
@ -1,185 +0,0 @@ |
|||||
// @flow
|
|
||||
|
|
||||
import React, { PureComponent } from 'react' |
|
||||
import styled from 'styled-components' |
|
||||
import { translate } from 'react-i18next' |
|
||||
import { connect } from 'react-redux' |
|
||||
import { compose } from 'redux' |
|
||||
import { withRouter } from 'react-router' |
|
||||
import { push } from 'react-router-redux' |
|
||||
import { getCryptoCurrencyIcon } from '@ledgerhq/live-common/lib/react' |
|
||||
|
|
||||
import type { Location } from 'react-router' |
|
||||
import type { Account } from '@ledgerhq/live-common/lib/types' |
|
||||
|
|
||||
import type { T } from 'types/common' |
|
||||
import type { UpdateStatus } from 'reducers/update' |
|
||||
|
|
||||
import { MODAL_RECEIVE, MODAL_SEND } from 'config/constants' |
|
||||
|
|
||||
import { rgba } from 'styles/helpers' |
|
||||
|
|
||||
import { accountsSelector } from 'reducers/accounts' |
|
||||
import { openModal } from 'reducers/modals' |
|
||||
import { getUpdateStatus } from 'reducers/update' |
|
||||
|
|
||||
import Tooltip from 'components/base/Tooltip' |
|
||||
import { SideBarList } from 'components/base/SideBar' |
|
||||
import Box, { Tabbable } from 'components/base/Box' |
|
||||
import Space from 'components/base/Space' |
|
||||
import FormattedVal from 'components/base/FormattedVal' |
|
||||
|
|
||||
import IconManager from 'icons/Manager' |
|
||||
import IconPieChart from 'icons/PieChart' |
|
||||
import IconCirclePlus from 'icons/CirclePlus' |
|
||||
import IconReceive from 'icons/Receive' |
|
||||
import IconSend from 'icons/Send' |
|
||||
import IconExchange from 'icons/Exchange' |
|
||||
|
|
||||
const mapStateToProps = state => ({ |
|
||||
accounts: accountsSelector(state), |
|
||||
updateStatus: getUpdateStatus(state), |
|
||||
}) |
|
||||
|
|
||||
const mapDispatchToProps = { |
|
||||
push, |
|
||||
openModal, |
|
||||
} |
|
||||
|
|
||||
type Props = { |
|
||||
t: T, |
|
||||
accounts: Account[], |
|
||||
location: Location, |
|
||||
push: string => void, |
|
||||
openModal: string => void, |
|
||||
updateStatus: UpdateStatus, |
|
||||
} |
|
||||
|
|
||||
class MainSideBar extends PureComponent<Props> { |
|
||||
push(to: string) { |
|
||||
const { push } = this.props |
|
||||
const { |
|
||||
location: { pathname }, |
|
||||
} = this.props |
|
||||
if (pathname === to) { |
|
||||
return |
|
||||
} |
|
||||
push(to) |
|
||||
} |
|
||||
|
|
||||
render() { |
|
||||
const { t, accounts, openModal, location, updateStatus } = this.props |
|
||||
const { pathname } = location |
|
||||
|
|
||||
const navigationItems = [ |
|
||||
{ |
|
||||
value: 'dashboard', |
|
||||
label: t('dashboard:title'), |
|
||||
icon: IconPieChart, |
|
||||
iconActiveColor: 'wallet', |
|
||||
onClick: () => this.push('/'), |
|
||||
isActive: pathname === '/', |
|
||||
hasNotif: updateStatus === 'downloaded', |
|
||||
}, |
|
||||
{ |
|
||||
value: 'send', |
|
||||
label: t('send:title'), |
|
||||
icon: IconSend, |
|
||||
iconActiveColor: 'wallet', |
|
||||
onClick: () => openModal(MODAL_SEND), |
|
||||
}, |
|
||||
{ |
|
||||
value: 'receive', |
|
||||
label: t('receive:title'), |
|
||||
icon: IconReceive, |
|
||||
iconActiveColor: 'wallet', |
|
||||
onClick: () => openModal(MODAL_RECEIVE), |
|
||||
}, |
|
||||
{ |
|
||||
value: 'manager', |
|
||||
label: t('sidebar:manager'), |
|
||||
icon: IconManager, |
|
||||
iconActiveColor: 'wallet', |
|
||||
onClick: () => this.push('/manager'), |
|
||||
isActive: pathname === '/manager', |
|
||||
}, |
|
||||
{ |
|
||||
value: 'exchange', |
|
||||
label: t('sidebar:exchange'), |
|
||||
icon: IconExchange, |
|
||||
iconActiveColor: 'wallet', |
|
||||
onClick: () => this.push('/exchange'), |
|
||||
isActive: pathname === '/exchange', |
|
||||
}, |
|
||||
] |
|
||||
|
|
||||
const accountsItems = accounts.map(account => { |
|
||||
const accountURL = `/account/${account.id}` |
|
||||
return { |
|
||||
value: account.id, |
|
||||
label: account.name, |
|
||||
desc: () => ( |
|
||||
<FormattedVal |
|
||||
alwaysShowSign={false} |
|
||||
color="graphite" |
|
||||
unit={account.unit} |
|
||||
showCode |
|
||||
val={account.balance || 0} |
|
||||
/> |
|
||||
), |
|
||||
iconActiveColor: account.currency.color, |
|
||||
icon: getCryptoCurrencyIcon(account.currency), |
|
||||
onClick: () => this.push(accountURL), |
|
||||
isActive: pathname === accountURL, |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
return ( |
|
||||
<Box bg="white" style={{ width: 230 }}> |
|
||||
<Space of={70} /> |
|
||||
<SideBarList title={t('sidebar:menu')} items={navigationItems} /> |
|
||||
<Space of={40} /> |
|
||||
<SideBarList |
|
||||
scroll |
|
||||
title={t('sidebar:accounts')} |
|
||||
titleRight={ |
|
||||
<Tooltip render={() => t('importAccounts:title')}> |
|
||||
<PlusWrapper onClick={() => openModal('importAccounts')}> |
|
||||
<IconCirclePlus size={16} /> |
|
||||
</PlusWrapper> |
|
||||
</Tooltip> |
|
||||
} |
|
||||
items={accountsItems} |
|
||||
emptyText={t('emptyState:sidebar.text')} |
|
||||
/> |
|
||||
</Box> |
|
||||
) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const PlusWrapper = styled(Tabbable).attrs({ |
|
||||
p: 1, |
|
||||
cursor: 'pointer', |
|
||||
borderRadius: 1, |
|
||||
})` |
|
||||
color: ${p => p.theme.colors.smoke}; |
|
||||
&:hover { |
|
||||
color: ${p => p.theme.colors.dark}; |
|
||||
} |
|
||||
|
|
||||
border: 1px solid transparent; |
|
||||
&:focus { |
|
||||
outline: none; |
|
||||
border-color: ${p => rgba(p.theme.colors.wallet, 0.3)}; |
|
||||
} |
|
||||
` |
|
||||
|
|
||||
const decorate = compose( |
|
||||
withRouter, |
|
||||
translate(), |
|
||||
connect( |
|
||||
mapStateToProps, |
|
||||
mapDispatchToProps, |
|
||||
), |
|
||||
) |
|
||||
export default decorate(MainSideBar) |
|
||||
@ -0,0 +1,37 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import React, { PureComponent } from 'react' |
||||
|
import { getCryptoCurrencyIcon } from '@ledgerhq/live-common/lib/react' |
||||
|
|
||||
|
import type { Account } from '@ledgerhq/live-common/lib/types' |
||||
|
|
||||
|
import FormattedVal from 'components/base/FormattedVal' |
||||
|
import { SideBarListItem } from 'components/base/SideBar' |
||||
|
|
||||
|
export default class AccountListItem extends PureComponent<{ |
||||
|
account: Account, |
||||
|
push: string => void, |
||||
|
isActive: boolean, |
||||
|
}> { |
||||
|
render() { |
||||
|
const { account, push, isActive } = this.props |
||||
|
const accountURL = `/account/${account.id}` |
||||
|
const item = { |
||||
|
label: account.name, |
||||
|
desc: () => ( |
||||
|
<FormattedVal |
||||
|
alwaysShowSign={false} |
||||
|
color="graphite" |
||||
|
unit={account.unit} |
||||
|
showCode |
||||
|
val={account.balance || 0} |
||||
|
/> |
||||
|
), |
||||
|
iconActiveColor: account.currency.color, |
||||
|
icon: getCryptoCurrencyIcon(account.currency), |
||||
|
onClick: () => push(accountURL), |
||||
|
isActive, |
||||
|
} |
||||
|
return <SideBarListItem {...item} /> |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,43 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import React, { PureComponent } from 'react' |
||||
|
import styled from 'styled-components' |
||||
|
|
||||
|
import { Tabbable } from 'components/base/Box' |
||||
|
import Tooltip from 'components/base/Tooltip' |
||||
|
import IconCirclePlus from 'icons/CirclePlus' |
||||
|
|
||||
|
import { rgba } from 'styles/helpers' |
||||
|
|
||||
|
const PlusWrapper = styled(Tabbable).attrs({ |
||||
|
p: 1, |
||||
|
cursor: 'pointer', |
||||
|
borderRadius: 1, |
||||
|
})` |
||||
|
color: ${p => p.theme.colors.smoke}; |
||||
|
&:hover { |
||||
|
color: ${p => p.theme.colors.dark}; |
||||
|
} |
||||
|
|
||||
|
border: 1px solid transparent; |
||||
|
&:focus { |
||||
|
outline: none; |
||||
|
border-color: ${p => rgba(p.theme.colors.wallet, 0.3)}; |
||||
|
} |
||||
|
` |
||||
|
|
||||
|
export default class AddAccountButton extends PureComponent<{ |
||||
|
onClick: () => void, |
||||
|
tooltipText: string, |
||||
|
}> { |
||||
|
render() { |
||||
|
const { onClick, tooltipText } = this.props |
||||
|
return ( |
||||
|
<Tooltip render={() => tooltipText}> |
||||
|
<PlusWrapper onClick={onClick}> |
||||
|
<IconCirclePlus size={16} /> |
||||
|
</PlusWrapper> |
||||
|
</Tooltip> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,155 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import React, { PureComponent } from 'react' |
||||
|
import { translate } from 'react-i18next' |
||||
|
import { connect } from 'react-redux' |
||||
|
import { compose } from 'redux' |
||||
|
import { withRouter } from 'react-router' |
||||
|
import { push } from 'react-router-redux' |
||||
|
|
||||
|
import type { Location } from 'react-router' |
||||
|
import type { Account } from '@ledgerhq/live-common/lib/types' |
||||
|
|
||||
|
import type { T } from 'types/common' |
||||
|
import type { UpdateStatus } from 'reducers/update' |
||||
|
|
||||
|
import { MODAL_RECEIVE, MODAL_SEND } from 'config/constants' |
||||
|
|
||||
|
import { accountsSelector } from 'reducers/accounts' |
||||
|
import { openModal } from 'reducers/modals' |
||||
|
import { getUpdateStatus } from 'reducers/update' |
||||
|
|
||||
|
import { SideBarList, SideBarListItem } from 'components/base/SideBar' |
||||
|
import Box from 'components/base/Box' |
||||
|
import GrowScroll from 'components/base/GrowScroll' |
||||
|
import Space from 'components/base/Space' |
||||
|
|
||||
|
import IconManager from 'icons/Manager' |
||||
|
import IconPieChart from 'icons/PieChart' |
||||
|
import IconReceive from 'icons/Receive' |
||||
|
import IconSend from 'icons/Send' |
||||
|
import IconExchange from 'icons/Exchange' |
||||
|
|
||||
|
import AccountListItem from './AccountListItem' |
||||
|
import AddAccountButton from './AddAccountButton' |
||||
|
|
||||
|
const mapStateToProps = state => ({ |
||||
|
accounts: accountsSelector(state), |
||||
|
updateStatus: getUpdateStatus(state), |
||||
|
}) |
||||
|
|
||||
|
const mapDispatchToProps = { |
||||
|
push, |
||||
|
openModal, |
||||
|
} |
||||
|
|
||||
|
type Props = { |
||||
|
t: T, |
||||
|
accounts: Account[], |
||||
|
location: Location, |
||||
|
push: string => void, |
||||
|
openModal: string => void, |
||||
|
updateStatus: UpdateStatus, |
||||
|
} |
||||
|
|
||||
|
class MainSideBar extends PureComponent<Props> { |
||||
|
push = (to: string) => { |
||||
|
const { push } = this.props |
||||
|
const { |
||||
|
location: { pathname }, |
||||
|
} = this.props |
||||
|
if (pathname === to) { |
||||
|
return |
||||
|
} |
||||
|
push(to) |
||||
|
} |
||||
|
|
||||
|
handleClickDashboard = () => this.push('/') |
||||
|
handleOpenSendModal = () => this.props.openModal(MODAL_SEND) |
||||
|
handleOpenReceiveModal = () => this.props.openModal(MODAL_RECEIVE) |
||||
|
handleClickManager = () => this.push('/manager') |
||||
|
handleClickExchange = () => this.push('/exchange') |
||||
|
handleOpenImportModal = () => this.props.openModal('importAccounts') |
||||
|
|
||||
|
render() { |
||||
|
const { t, accounts, location, updateStatus } = this.props |
||||
|
const { pathname } = location |
||||
|
|
||||
|
const addAccountButton = ( |
||||
|
<AddAccountButton |
||||
|
tooltipText={t('importAccounts:title')} |
||||
|
onClick={this.handleOpenImportModal} |
||||
|
/> |
||||
|
) |
||||
|
|
||||
|
return ( |
||||
|
<Box relative bg="white" style={{ width: 230 }}> |
||||
|
<GrowScroll> |
||||
|
<Space of={70} /> |
||||
|
<SideBarList title={t('sidebar:menu')}> |
||||
|
<SideBarListItem |
||||
|
label={t('dashboard:title')} |
||||
|
icon={IconPieChart} |
||||
|
iconActiveColor={'wallet'} |
||||
|
onClick={this.handleClickDashboard} |
||||
|
isActive={pathname === '/'} |
||||
|
hasNotif={updateStatus === 'downloaded'} |
||||
|
/> |
||||
|
<SideBarListItem |
||||
|
label={t('send:title')} |
||||
|
icon={IconSend} |
||||
|
iconActiveColor={'wallet'} |
||||
|
onClick={this.handleOpenSendModal} |
||||
|
/> |
||||
|
<SideBarListItem |
||||
|
label={t('receive:title')} |
||||
|
icon={IconReceive} |
||||
|
iconActiveColor={'wallet'} |
||||
|
onClick={this.handleOpenReceiveModal} |
||||
|
/> |
||||
|
<SideBarListItem |
||||
|
label={t('sidebar:manager')} |
||||
|
icon={IconManager} |
||||
|
iconActiveColor={'wallet'} |
||||
|
onClick={this.handleClickManager} |
||||
|
isActive={pathname === '/manager'} |
||||
|
/> |
||||
|
<SideBarListItem |
||||
|
label={t('sidebar:exchange')} |
||||
|
icon={IconExchange} |
||||
|
iconActiveColor={'wallet'} |
||||
|
onClick={this.handleClickExchange} |
||||
|
isActive={pathname === '/exchange'} |
||||
|
/> |
||||
|
</SideBarList> |
||||
|
<Space of={40} /> |
||||
|
<SideBarList |
||||
|
title={t('sidebar:accounts', { count: accounts.length })} |
||||
|
titleRight={addAccountButton} |
||||
|
emptyText={t('emptyState:sidebar.text')} |
||||
|
> |
||||
|
{accounts.map(account => ( |
||||
|
<AccountListItem |
||||
|
key={account.id} |
||||
|
account={account} |
||||
|
push={this.push} |
||||
|
isActive={pathname === `/account/${account.id}`} |
||||
|
/> |
||||
|
))} |
||||
|
</SideBarList> |
||||
|
<Space of={15} /> |
||||
|
</GrowScroll> |
||||
|
</Box> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const decorate = compose( |
||||
|
withRouter, |
||||
|
translate(), |
||||
|
connect( |
||||
|
mapStateToProps, |
||||
|
mapDispatchToProps, |
||||
|
), |
||||
|
) |
||||
|
export default decorate(MainSideBar) |
||||
@ -1,3 +1,4 @@ |
|||||
// @flow
|
// @flow
|
||||
|
|
||||
export { default as SideBarList } from './SideBarList' |
export { default as SideBarList } from './SideBarList' |
||||
|
export { default as SideBarListItem } from './SideBarListItem' |
||||
|
|||||
@ -1,4 +1,4 @@ |
|||||
menu: Menu |
menu: Menu |
||||
accounts: Accounts |
accounts: Accounts ({{count}}) |
||||
manager: Manager |
manager: Manager |
||||
exchange: Exchange |
exchange: Exchange |
||||
|
|||||
@ -1,7 +1,17 @@ |
|||||
--- |
--- |
||||
title: Import accounts |
title: Add accounts |
||||
breadcrumb: |
breadcrumb: |
||||
informations: Informations |
informations: Informations |
||||
connectDevice: Connect device |
connectDevice: Connect device |
||||
import: Import |
import: Import |
||||
finish: End |
finish: End |
||||
|
accountToImportSubtitle: Account to import |
||||
|
accountToImportSubtitle_plural: 'Accounts to import ({{count}})' |
||||
|
selectAll: Select all |
||||
|
unselectAll: Unselect all |
||||
|
createNewAccount: Create new account |
||||
|
retrySync: Retry sync |
||||
|
cta: |
||||
|
create: 'Create account' |
||||
|
import: 'Import account' |
||||
|
import_plural: 'Import accounts' |
||||
|
|||||
@ -0,0 +1,3 @@ |
|||||
|
--- |
||||
|
title: Release notes |
||||
|
version: Version {{versionNb}} |
||||
@ -1,5 +1,5 @@ |
|||||
--- |
--- |
||||
menu: Menu |
menu: Menu |
||||
accounts: Comptes |
accounts: Accounts ({{count}}) |
||||
manager: Manager |
manager: Manager |
||||
exchange: Exchange |
exchange: Exchange |
||||
|
|||||
Loading…
Reference in new issue