meriadec
7 years ago
2 changed files with 0 additions and 324 deletions
@ -1,146 +0,0 @@ |
|||||
// @flow
|
|
||||
|
|
||||
import React from 'react' |
|
||||
import styled from 'styled-components' |
|
||||
import { compose } from 'redux' |
|
||||
import { withRouter } from 'react-router' |
|
||||
import { push } from 'react-router-redux' |
|
||||
import { connect } from 'react-redux' |
|
||||
|
|
||||
import { openModal } from 'reducers/modals' |
|
||||
|
|
||||
import type { Node } from 'react' |
|
||||
import type { Location } from 'react-router' |
|
||||
|
|
||||
import Box, { Tabbable } from 'components/base/Box' |
|
||||
import Text from 'components/base/Text' |
|
||||
|
|
||||
const mapStateToProps = (state: any) => ({ |
|
||||
// connect router here only to make components re-render
|
|
||||
// see https://github.com/ReactTraining/react-router/issues/4671
|
|
||||
router: state.router, |
|
||||
}) |
|
||||
|
|
||||
const mapDispatchToProps: Object = { |
|
||||
push, |
|
||||
openModal, |
|
||||
} |
|
||||
|
|
||||
const Container = styled(Tabbable).attrs({ |
|
||||
alignItems: 'center', |
|
||||
borderRadius: 1, |
|
||||
ff: 'Open Sans|SemiBold', |
|
||||
flow: 3, |
|
||||
horizontal: true, |
|
||||
pl: 3, |
|
||||
})` |
|
||||
cursor: ${p => (p.isActive ? 'default' : 'pointer')}; |
|
||||
color: ${p => p.theme.colors.dark}; |
|
||||
background: ${p => (p.isActive ? p.theme.colors.lightGrey : '')}; |
|
||||
height: ${p => (p.big ? 50 : 36)}px; |
|
||||
outline: none; |
|
||||
|
|
||||
.desaturate { |
|
||||
opacity: ${p => (p.isActive ? 1 : 0.4)}; |
|
||||
} |
|
||||
|
|
||||
&:hover, |
|
||||
&:focus { |
|
||||
.desaturate { |
|
||||
opacity: 1; |
|
||||
} |
|
||||
|
|
||||
svg { |
|
||||
color: ${p => p.theme.colors[p.iconActiveColor] || p.iconActiveColor}; |
|
||||
} |
|
||||
} |
|
||||
` |
|
||||
|
|
||||
const Bullet = styled.div` |
|
||||
background: ${p => p.theme.colors.wallet}; |
|
||||
width: 8px; |
|
||||
height: 8px; |
|
||||
border-radius: 100%; |
|
||||
` |
|
||||
|
|
||||
type Props = { |
|
||||
iconActiveColor?: string, |
|
||||
children: string, |
|
||||
linkTo?: string | null, |
|
||||
modal?: string | null, |
|
||||
desc?: string | null, |
|
||||
icon?: Node | null, |
|
||||
big?: boolean, |
|
||||
highlight?: boolean, |
|
||||
location: Location, |
|
||||
push: Function, |
|
||||
openModal: Function, |
|
||||
} |
|
||||
|
|
||||
function Item({ |
|
||||
big, |
|
||||
iconActiveColor, |
|
||||
children, |
|
||||
desc, |
|
||||
icon, |
|
||||
linkTo, |
|
||||
push, |
|
||||
location, |
|
||||
modal, |
|
||||
openModal, |
|
||||
highlight, |
|
||||
}: Props) { |
|
||||
const { pathname } = location |
|
||||
const isActive = linkTo === pathname |
|
||||
return ( |
|
||||
<Container |
|
||||
big={big} |
|
||||
iconActiveColor={iconActiveColor} |
|
||||
isActive={isActive} |
|
||||
onClick={ |
|
||||
linkTo |
|
||||
? isActive |
|
||||
? undefined |
|
||||
: () => push(linkTo) |
|
||||
: modal |
|
||||
? () => openModal(modal) |
|
||||
: void 0 |
|
||||
} |
|
||||
> |
|
||||
{icon && ( |
|
||||
<Box color={isActive ? iconActiveColor : void 0} className="desaturate"> |
|
||||
{icon} |
|
||||
</Box> |
|
||||
)} |
|
||||
<Box justifyContent="center" className="desaturate"> |
|
||||
<Text fontSize={4}>{children}</Text> |
|
||||
{desc && ( |
|
||||
<Box color="graphite" fontSize={3}> |
|
||||
{desc} |
|
||||
</Box> |
|
||||
)} |
|
||||
</Box> |
|
||||
{highlight && ( |
|
||||
<Box flex="1" align="flex-end" pr={2}> |
|
||||
<Bullet /> |
|
||||
</Box> |
|
||||
)} |
|
||||
</Container> |
|
||||
) |
|
||||
} |
|
||||
|
|
||||
Item.defaultProps = { |
|
||||
iconActiveColor: 'wallet', |
|
||||
big: false, |
|
||||
desc: null, |
|
||||
icon: null, |
|
||||
linkTo: null, |
|
||||
modal: null, |
|
||||
} |
|
||||
|
|
||||
export default compose( |
|
||||
withRouter, |
|
||||
connect(mapStateToProps, mapDispatchToProps, null, { |
|
||||
pure: false, |
|
||||
}), |
|
||||
)(Item) |
|
||||
@ -1,178 +0,0 @@ |
|||||
// @flow
|
|
||||
|
|
||||
import React, { PureComponent, Fragment } from 'react' |
|
||||
import { compose } from 'redux' |
|
||||
import { translate } from 'react-i18next' |
|
||||
import styled from 'styled-components' |
|
||||
import { withRouter } from 'react-router' |
|
||||
import { connect } from 'react-redux' |
|
||||
import { getCryptoCurrencyIcon } from '@ledgerhq/live-common/lib/react' |
|
||||
import type { Account } from '@ledgerhq/live-common/lib/types' |
|
||||
|
|
||||
import { MODAL_SEND, MODAL_RECEIVE } from 'config/constants' |
|
||||
|
|
||||
import type { T } from 'types/common' |
|
||||
|
|
||||
import { openModal } from 'reducers/modals' |
|
||||
import { accountsSelector } from 'reducers/accounts' |
|
||||
import { getUpdateStatus } from 'reducers/update' |
|
||||
import type { UpdateStatus } from 'reducers/update' |
|
||||
|
|
||||
import IconManager from 'icons/Manager' |
|
||||
import IconPieChart from 'icons/PieChart' |
|
||||
import IconPlus from 'icons/Plus' |
|
||||
import IconReceive from 'icons/Receive' |
|
||||
import IconSend from 'icons/Send' |
|
||||
import IconExchange from 'icons/Exchange' |
|
||||
|
|
||||
import Box, { Tabbable } from 'components/base/Box' |
|
||||
import FormattedVal from 'components/base/FormattedVal' |
|
||||
import GrowScroll from 'components/base/GrowScroll' |
|
||||
import Tooltip from 'components/base/Tooltip' |
|
||||
|
|
||||
import Item from './Item' |
|
||||
|
|
||||
const CapsSubtitle = styled(Box).attrs({ |
|
||||
color: 'dark', |
|
||||
ff: 'Museo Sans|ExtraBold', |
|
||||
fontSize: 1, |
|
||||
px: 4, |
|
||||
})` |
|
||||
cursor: default; |
|
||||
letter-spacing: 2px; |
|
||||
text-transform: uppercase; |
|
||||
` |
|
||||
|
|
||||
const Container = styled(Box)` |
|
||||
width: ${p => p.theme.sizes.sideBarWidth}px; |
|
||||
` |
|
||||
|
|
||||
const PlusBtn = styled(Tabbable).attrs({ |
|
||||
p: 1, |
|
||||
m: -1, |
|
||||
})` |
|
||||
cursor: pointer; |
|
||||
outline: none; |
|
||||
` |
|
||||
|
|
||||
type Props = { |
|
||||
t: T, |
|
||||
openModal: Function, |
|
||||
updateStatus: UpdateStatus, |
|
||||
accounts: Account[], |
|
||||
} |
|
||||
|
|
||||
const mapStateToProps = state => ({ |
|
||||
accounts: accountsSelector(state), |
|
||||
updateStatus: getUpdateStatus(state), |
|
||||
}) |
|
||||
|
|
||||
const mapDispatchToProps: Object = { |
|
||||
openModal, |
|
||||
} |
|
||||
|
|
||||
class SideBar extends PureComponent<Props> { |
|
||||
render() { |
|
||||
const { t, openModal, updateStatus, accounts } = this.props |
|
||||
|
|
||||
return ( |
|
||||
<Container bg="white"> |
|
||||
<Box flow={7} pt={8} grow> |
|
||||
<Box flow={4}> |
|
||||
<CapsSubtitle>{t('sidebar:menu')}</CapsSubtitle> |
|
||||
<Box px={4} flow={2}> |
|
||||
<Item |
|
||||
icon={<IconPieChart size={16} />} |
|
||||
linkTo="/" |
|
||||
highlight={updateStatus === 'downloaded'} |
|
||||
> |
|
||||
{t('dashboard:title')} |
|
||||
</Item> |
|
||||
<Item icon={<IconSend size={16} />} modal={MODAL_SEND}> |
|
||||
{t('send:title')} |
|
||||
</Item> |
|
||||
<Item icon={<IconReceive size={16} />} modal={MODAL_RECEIVE}> |
|
||||
{t('receive:title')} |
|
||||
</Item> |
|
||||
<Item icon={<IconManager size={16} />} linkTo="/manager"> |
|
||||
{t('sidebar:manager')} |
|
||||
</Item> |
|
||||
<Item icon={<IconExchange size={16} />} linkTo="/exchange"> |
|
||||
{t('sidebar:exchange')} |
|
||||
</Item> |
|
||||
</Box> |
|
||||
</Box> |
|
||||
<Box flow={4} grow pt={1}> |
|
||||
<CapsSubtitle horizontal alignItems="center"> |
|
||||
<Box grow>{t('sidebar:accounts')}</Box> |
|
||||
<Tooltip render={() => t('addAccount:title')}> |
|
||||
<PlusBtn onClick={() => openModal('importAccounts')}> |
|
||||
<IconPlus size={16} /> |
|
||||
</PlusBtn> |
|
||||
</Tooltip> |
|
||||
</CapsSubtitle> |
|
||||
<GrowScroll pb={4} px={4} flow={2}> |
|
||||
{accounts.length > 0 ? ( |
|
||||
<AccountsList /> |
|
||||
) : ( |
|
||||
<NoAccountsText>{t('emptyState:sidebar.text')}</NoAccountsText> |
|
||||
)} |
|
||||
</GrowScroll> |
|
||||
</Box> |
|
||||
</Box> |
|
||||
</Container> |
|
||||
) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const AccountsList = compose( |
|
||||
withRouter, |
|
||||
connect( |
|
||||
state => ({ |
|
||||
accounts: accountsSelector(state), |
|
||||
}), |
|
||||
null, |
|
||||
null, |
|
||||
{ pure: false }, |
|
||||
), |
|
||||
)(({ accounts }: { accounts: Account[] }) => ( |
|
||||
<Fragment> |
|
||||
{accounts.map(account => { |
|
||||
const Icon = getCryptoCurrencyIcon(account.currency) |
|
||||
return ( |
|
||||
<Item |
|
||||
big |
|
||||
desc={ |
|
||||
<FormattedVal |
|
||||
alwaysShowSign={false} |
|
||||
color="graphite" |
|
||||
unit={account.unit} |
|
||||
showCode |
|
||||
val={account.balance || 0} |
|
||||
/> |
|
||||
} |
|
||||
iconActiveColor={account.currency.color} |
|
||||
icon={Icon ? <Icon size={16} /> : null} |
|
||||
key={account.id} |
|
||||
linkTo={`/account/${account.id}`} |
|
||||
> |
|
||||
{account.name} |
|
||||
</Item> |
|
||||
) |
|
||||
})} |
|
||||
</Fragment> |
|
||||
)) |
|
||||
|
|
||||
export default compose( |
|
||||
withRouter, |
|
||||
connect(mapStateToProps, mapDispatchToProps, null, { pure: false }), |
|
||||
translate(), |
|
||||
)(SideBar) |
|
||||
|
|
||||
export const NoAccountsText = styled(Box).attrs({ |
|
||||
ff: 'Open Sans|Regular', |
|
||||
fontSize: 3, |
|
||||
color: p => p.theme.colors.grey, |
|
||||
shrink: true, |
|
||||
mt: 3, |
|
||||
})`` |
|
||||
Loading…
Reference in new issue