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