Skip to content
Permalink
Browse files

feat(wallet): add wallet menu quick links

address #1933
  • Loading branch information...
mrfelton committed Apr 3, 2019
1 parent 2e31d1f commit bf68c03e822f417125e32a4cc141a545cb66589d
@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl'
import { MenuContainer, Menu, MenuItem } from 'components/UI/Dropdown'
import messages from './messages'

const SettingsMenu = ({ history, setActiveSubMenu, openModal }) => (
const SettingsMenu = ({ history, setActiveSubMenu }) => (
<MenuContainer>
<Menu justify="right">
<MenuItem
@@ -26,16 +26,6 @@ const SettingsMenu = ({ history, setActiveSubMenu, openModal }) => (
onClick={() => setActiveSubMenu('theme')}
/>

<MenuItem
item={{ key: 'channels', name: <FormattedMessage {...messages.channels} /> }}
onClick={() => openModal('CHANNELS')}
/>

<MenuItem
item={{ key: 'Autopay', name: <FormattedMessage {...messages.autopay} /> }}
onClick={() => openModal('AUTOPAY')}
/>

<MenuItem
item={{ key: 'logout', name: <FormattedMessage {...messages.logout} /> }}
onClick={() => history.push('/logout')}
@@ -46,7 +36,6 @@ const SettingsMenu = ({ history, setActiveSubMenu, openModal }) => (

SettingsMenu.propTypes = {
history: PropTypes.object.isRequired,
openModal: PropTypes.func.isRequired,
setActiveSubMenu: PropTypes.func.isRequired,
}

@@ -2,10 +2,8 @@ import { defineMessages } from 'react-intl'

/* eslint-disable max-len */
export default defineMessages({
autopay: 'Autopay',
fiat: 'Fiat Currency',
locale: 'Language',
theme: 'Theme',
channels: 'Manage Channels',
logout: 'Logout',
})
@@ -1,6 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Box, Flex } from 'rebass'
import styled from 'styled-components'
import { StatusIndicator, Text } from 'components/UI'
import { WalletName } from 'components/Util'
import AngleUp from 'components/Icon/AngleUp'
@@ -10,6 +11,14 @@ import Fiat from './Fiat'
import Locale from './Locale'
import Theme from './Theme'

const StyledText = styled(Text)`
cursor: pointer;
transition: all 0.25s;
&:hover {
opacity: 0.6;
}
`

class Settings extends React.Component {
menuRef = React.createRef()
buttonRef = React.createRef()
@@ -50,14 +59,7 @@ class Settings extends React.Component {
}

renderSettings = () => {
const {
activeSubMenu,
fiatProps,
localeProps,
themeProps,
setActiveSubMenu,
openModal,
} = this.props
const { activeSubMenu, fiatProps, localeProps, themeProps, setActiveSubMenu } = this.props
switch (activeSubMenu) {
case 'fiat':
return <Fiat {...fiatProps} />
@@ -66,7 +68,7 @@ class Settings extends React.Component {
case 'theme':
return <Theme {...themeProps} />
default:
return <Menu openModal={openModal} setActiveSubMenu={setActiveSubMenu} />
return <Menu setActiveSubMenu={setActiveSubMenu} />
}
}

@@ -83,9 +85,9 @@ class Settings extends React.Component {
>
<StatusIndicator mr={2} variant="online" />
<Flex alignItems="center">
<Text mr={1} textAlign="left">
<StyledText mr={1} textAlign="left">
<WalletName wallet={activeWalletSettings} />
</Text>
</StyledText>
{isSettingsOpen ? <AngleUp width="0.6em" /> : <AngleDown width="0.6em" />}
</Flex>
</Flex>
@@ -102,7 +104,6 @@ Settings.propTypes = {
fiatProps: PropTypes.object.isRequired,
isSettingsOpen: PropTypes.bool,
localeProps: PropTypes.object.isRequired,
openModal: PropTypes.func.isRequired,
openSettings: PropTypes.func.isRequired,
setActiveSubMenu: PropTypes.func.isRequired,
themeProps: PropTypes.object.isRequired,
@@ -1,61 +1,21 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Box, Flex } from 'rebass'
import Settings from 'containers/Settings'
import { CryptoSelector, CryptoValue, FiatValue } from 'containers/UI'
import { Button, Text } from 'components/UI'
import ZapLogo from 'components/Icon/ZapLogo'
import Qrcode from 'components/Icon/Qrcode'
import { FormattedMessage } from 'react-intl'
import messages from './messages'
import WalletBalance from './WalletBalance'
import WalletButtons from './WalletButtons'
import WalletMenu from './WalletMenu'
import WalletLogo from './WalletLogo'

const Wallet = ({ totalBalance, networkInfo, openWalletModal, openModal }) => (
<Box bg="secondaryColor" pb={3} pt={3} px={5}>
<Flex as="header" justifyContent="space-between" pt={2}>
<Flex alignItems="center" as="section" mt={4}>
<ZapLogo height="32px" width="70px" />
{networkInfo.id !== 'mainnet' && (
<Text color="superGreen" fontSize="xs" ml={2}>
{networkInfo.name}
</Text>
)}
</Flex>
<Box as="section">
<Settings />
</Box>
<Box bg="secondaryColor" pb={3} pt={4} px={5}>
<Flex alignItems="flex-end" as="header" justifyContent="space-between" mt={2}>
<WalletLogo networkInfo={networkInfo} />
<WalletMenu openModal={openModal} />
</Flex>

<Flex as="header" justifyContent="space-between" mt={4}>
<Box as="section">
<Flex alignItems="center">
<Box mr={3} onClick={openWalletModal}>
<Button variant="secondary">
<Qrcode height="21px" width="21px" />
</Button>
</Box>

<Box>
<Flex alignItems="baseline">
<Text fontSize="xxl">
<CryptoValue value={totalBalance} />
</Text>
<CryptoSelector ml={1} />
</Flex>
<Text color="gray">
{''}
<FiatValue style="currency" value={totalBalance} />
</Text>
</Box>
</Flex>
</Box>
<Box as="section">
<Button mr={2} onClick={() => openModal('PAY_FORM')} width={145}>
<FormattedMessage {...messages.pay} />
</Button>
<Button onClick={() => openModal('REQUEST_FORM')} width={145}>
<FormattedMessage {...messages.request} />
</Button>
</Box>
<Flex alignItems="flex-end" as="header" justifyContent="space-between" mb={3} mt={4}>
<WalletBalance openWalletModal={openWalletModal} totalBalance={totalBalance} />
<WalletButtons openModal={openModal} />
</Flex>
</Box>
)
@@ -67,7 +27,6 @@ Wallet.propTypes = {
}).isRequired,
openModal: PropTypes.func.isRequired,
openWalletModal: PropTypes.func.isRequired,
ticker: PropTypes.object.isRequired,
totalBalance: PropTypes.number,
}

@@ -0,0 +1,38 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Box, Flex } from 'rebass'
import { CryptoSelector, CryptoValue, FiatValue } from 'containers/UI'
import { Button, Text } from 'components/UI'
import Qrcode from 'components/Icon/Qrcode'

const WalletBalance = ({ totalBalance, openWalletModal }) => (
<Box as="section">
<Flex alignItems="center">
<Box mr={3} onClick={openWalletModal}>
<Button variant="secondary">
<Qrcode height="21px" width="21px" />
</Button>
</Box>

<Box>
<Flex alignItems="baseline">
<Text fontSize="xxl">
<CryptoValue value={totalBalance} />
</Text>
<CryptoSelector ml={1} />
</Flex>
<Text color="gray">
{''}
<FiatValue style="currency" value={totalBalance} />
</Text>
</Box>
</Flex>
</Box>
)

WalletBalance.propTypes = {
openWalletModal: PropTypes.func.isRequired,
totalBalance: PropTypes.number,
}

export default WalletBalance
@@ -0,0 +1,23 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Box } from 'rebass'
import { Button } from 'components/UI'
import { FormattedMessage } from 'react-intl'
import messages from './messages'

const WalletButtons = ({ openModal }) => (
<Box as="section">
<Button mr={2} onClick={() => openModal('PAY_FORM')} width={145}>
<FormattedMessage {...messages.pay} />
</Button>
<Button onClick={() => openModal('REQUEST_FORM')} width={145}>
<FormattedMessage {...messages.request} />
</Button>
</Box>
)

WalletButtons.propTypes = {
openModal: PropTypes.func.isRequired,
}

export default WalletButtons
@@ -0,0 +1,25 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Flex } from 'rebass'
import { Text } from 'components/UI'
import ZapLogo from 'components/Icon/ZapLogo'

const WalletLogo = ({ networkInfo }) => (
<Flex alignItems="center" as="section">
<ZapLogo height="32px" width="70px" />
{networkInfo.id !== 'mainnet' && (
<Text color="superGreen" fontSize="xs" ml={2}>
{networkInfo.name}
</Text>
)}
</Flex>
)

WalletLogo.propTypes = {
networkInfo: PropTypes.shape({
id: PropTypes.string,
name: PropTypes.string,
}).isRequired,
}

export default WalletLogo
@@ -0,0 +1,43 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Flex } from 'rebass'
import styled from 'styled-components'
import Settings from 'containers/Settings'
import { Text } from 'components/UI'
import { FormattedMessage } from 'react-intl'
import messages from './messages'

const StyledText = styled(Text)`
cursor: pointer;
transition: all 0.25s;
&:hover {
opacity: 0.6;
}
`
const MenuItem = ({ children, ...rest }) => (
<StyledText ml={4} pl={2} {...rest}>
{children}
</StyledText>
)

MenuItem.propTypes = {
children: PropTypes.node.isRequired,
}

const WalletMenu = ({ openModal }) => (
<Flex as="section">
<MenuItem onClick={() => openModal('CHANNELS')}>
<FormattedMessage {...messages.menu_item_channels} />
</MenuItem>
<MenuItem onClick={() => openModal('AUTOPAY')}>
<FormattedMessage {...messages.menu_item_autopay} />
</MenuItem>
<Settings ml={4} />
</Flex>
)

WalletMenu.propTypes = {
openModal: PropTypes.func.isRequired,
}

export default WalletMenu
@@ -7,4 +7,6 @@ export default defineMessages({
sending_tx: 'Sending your transaction…',
payment_success: 'Successfully sent payment',
transaction_success: 'Successfully sent transaction',
menu_item_autopay: 'Autopay',
menu_item_channels: 'Channels',
})
@@ -8,7 +8,6 @@ import {
disableSubMenu,
} from 'reducers/settingsmenu'
import { setTheme } from 'reducers/theme'
import { openModal } from 'reducers/modal'
import { walletSelectors } from 'reducers/wallet'

import Settings from 'components/Settings'
@@ -29,21 +28,20 @@ const mapDispatchToProps = {
openSettings,
closeSettings,
setActiveSubMenu,
openModal,
disableSubMenu,
setFiatTicker,
setLocale,
setTheme,
}

const mergeProps = (stateProps, dispatchProps) => ({
const mergeProps = (stateProps, dispatchProps, ownProps) => ({
activeWalletSettings: stateProps.activeWalletSettings,
activeSubMenu: stateProps.activeSubMenu,
isSettingsOpen: stateProps.isSettingsOpen,
openSettings: dispatchProps.openSettings,
closeSettings: dispatchProps.closeSettings,
setActiveSubMenu: dispatchProps.setActiveSubMenu,
openModal: dispatchProps.openModal,
...ownProps,

fiatProps: {
fiatTicker: stateProps.fiatTicker,

0 comments on commit bf68c03

Please sign in to comment.
You can’t perform that action at this time.