Skip to content
Permalink
Browse files

feat(ui): implement new profile pages

fix #2317
  • Loading branch information...
mrfelton committed Jun 8, 2019
1 parent 14be89d commit f04281d17086954920236f65a768b9480d39dab9
@@ -0,0 +1,35 @@
import React from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'
import { Menu } from 'components/UI'
import { PANE_NODEINFO, PANE_LNDCONNECT } from '../constants'
import messages from './messages'

const ProfileMenu = ({ group, setGroup, isLocalWallet, ...rest }) => {
// Define all possible menu links.
const nodeInfoLink = {
id: PANE_NODEINFO,
title: <FormattedMessage {...messages.profile_pane_nodeinfo_title} />,
onClick: () => setGroup(PANE_NODEINFO),
}
const connectLink = {
id: PANE_LNDCONNECT,
title: <FormattedMessage {...messages.profile_pane_connect_title} />,
onClick: () => setGroup(PANE_LNDCONNECT),
}

// Get set of menu links based on wallet type.
const getLocalLinks = () => [nodeInfoLink]
const getRemoteLinks = () => [nodeInfoLink, connectLink]
const items = isLocalWallet ? getLocalLinks() : getRemoteLinks()

return <Menu items={items} selectedItem={group} {...rest} />
}

ProfileMenu.propTypes = {
group: PropTypes.string,
isLocalWallet: PropTypes.bool,
setGroup: PropTypes.func.isRequired,
}

export default ProfileMenu
@@ -0,0 +1,3 @@
import ProfileMenu from './ProfileMenu'

export default ProfileMenu
@@ -0,0 +1,7 @@
import { defineMessages } from 'react-intl'

/* eslint-disable max-len */
export default defineMessages({
profile_pane_nodeinfo_title: 'Node Info',
profile_pane_connect_title: 'Connect',
})
@@ -0,0 +1,47 @@
import React, { useState } from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'
import { Heading, MainContent, Panel, Sidebar } from 'components/UI'
import ZapLogo from 'components/Icon/ZapLogo'
import ProfilePaneConnect from 'containers/Profile/ProfilePaneConnect'
import ProfilePaneNodeInfo from 'containers/Profile/ProfilePaneNodeInfo'
import ProfileMenu from '../ProfileMenu'
import { PANE_NODEINFO, PANE_LNDCONNECT, DEFAULT_PANE } from '../constants'
import messages from './messages'

const ProfilePage = ({ activeWalletSettings }) => {
const [group, setGroup] = useState(DEFAULT_PANE)
const isLocalWallet = activeWalletSettings.type === 'local'

const hasNodeInfoPane = group === PANE_NODEINFO
const hasConnectPane = group === PANE_LNDCONNECT && !isLocalWallet

return (
<>
<Sidebar.medium pt={40}>
<Panel>
<Panel.Header mb={40} px={4}>
<ZapLogo height={28} width={28} />
</Panel.Header>
<Panel.Body css={{ 'overflow-y': 'overlay' }}>
<ProfileMenu group={group} isLocalWallet={isLocalWallet} p={2} setGroup={setGroup} />
</Panel.Body>
</Panel>
</Sidebar.medium>

<MainContent pb={2} pt={4} px={5}>
<Heading.h1 fontSize={60} mb={2}>
<FormattedMessage {...messages.profile_page_title} />
</Heading.h1>
{hasNodeInfoPane && <ProfilePaneNodeInfo />}
{hasConnectPane && <ProfilePaneConnect />}
</MainContent>
</>
)
}

ProfilePage.propTypes = {
activeWalletSettings: PropTypes.object.isRequired,
}

export default ProfilePage
@@ -0,0 +1,3 @@
import ProfilePage from './ProfilePage'

export default ProfilePage
@@ -0,0 +1,8 @@
import { defineMessages } from 'react-intl'

/* eslint-disable max-len */
export default defineMessages({
profile_page_title: 'Profile',
profile_pane_nodeinfo_title: 'Node Info',
profile_pane_connect_title: 'Connect',
})
@@ -0,0 +1,62 @@
import React, { useState } from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage, injectIntl, intlShape } from 'react-intl'
import { Box } from 'rebass'
import { Bar, DataRow, Button, CopyBox, Message, QRCode, Text } from 'components/UI'
import messages from './messages'

const ProfilePaneConnect = ({ intl, lndconnectQRCode, showNotification, ...rest }) => {
const [isObfuscated, setIsObfuscated] = useState(true)
const toggleReveal = () => setIsObfuscated(!isObfuscated)
const buttonMessage = isObfuscated ? 'lndconnect_reveal_button' : 'lndconnect_hide_button'
const notifyOfCopy = () =>
showNotification(intl.formatMessage({ ...messages.lndconnect_copied_notification_description }))

return (
<Box as="section" {...rest}>
<Text fontWeight="normal">
<FormattedMessage {...messages.connect_pane_title} />
</Text>
<Bar mb={4} mt={2} />
{lndconnectQRCode && (
<>
<DataRow
left={
<Box pr={4}>
<Text fontWeight="normal" mb={2}>
<FormattedMessage {...messages.lndconnect_title} />
</Text>
<Text color="gray" fontWeight="light">
<FormattedMessage {...messages.lndconnect_description} />
</Text>
<Button mt={4} onClick={toggleReveal} size="small">
<FormattedMessage {...messages[buttonMessage]} />
</Button>
<Message my={3} variant="warning">
<FormattedMessage {...messages.lndconnect_warning} />
</Message>
</Box>
}
py={2}
right={<QRCode isObfuscated={isObfuscated} size="xxlarge" value={lndconnectQRCode} />}
/>

<CopyBox
hint={intl.formatMessage({ ...messages.copy_lndconnect })}
my={3}
onCopy={notifyOfCopy}
value={lndconnectQRCode}
/>
</>
)}
</Box>
)
}

ProfilePaneConnect.propTypes = {
intl: intlShape.isRequired,
lndconnectQRCode: PropTypes.string.isRequired,
showNotification: PropTypes.func.isRequired,
}

export default injectIntl(ProfilePaneConnect)
@@ -0,0 +1,3 @@
import ProfilePaneConnect from './ProfilePaneConnect'

export default ProfilePaneConnect
@@ -0,0 +1,15 @@
import { defineMessages } from 'react-intl'

/* eslint-disable max-len */
export default defineMessages({
connect_pane_title: 'Connect',
copy_lndconnect: 'Copy Lndconnect',
lndconnect_copied_notification_description: 'Node URI key has been copied to your clipboard',
lndconnect_description:
'This QR Code can be used to connect other devices to your lnd node. It can be used with Zap iOS and Zap Android and any other wallet that supports the lndconnect standard.',
lndconnect_warning:
'Keep this private! If someone gains access to this QR Code they can steal your money.',
lndconnect_reveal_button: 'Click to reveal QR Code',
lndconnect_hide_button: 'Click to hide QR Code',
lndconnect_title: 'LndConnect QR Code',
})
@@ -0,0 +1,71 @@
import React from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage, injectIntl, intlShape } from 'react-intl'
import { Box } from 'rebass'
import { Bar, CopyBox, DataRow, QRCode, Text } from 'components/UI'
import messages from './messages'

const ProfilePaneNodeInfo = ({
intl,
activeWalletSettings,
nodeUriOrPubkey,
lndVersion,
showNotification,
...rest
}) => {
const notifyOfCopy = () =>
showNotification(intl.formatMessage({ ...messages.pubkey_copied_notification_description }))
const isLocalWallet = activeWalletSettings.type === 'local'

return (
<Box as="section" {...rest}>
<Text fontWeight="normal">
<FormattedMessage {...messages.nodeinfo_pane_title} />
</Text>
<Bar mb={4} mt={2} />
{nodeUriOrPubkey && (
<>
<DataRow
left={
<>
<Text fontWeight="normal" mb={2}>
<FormattedMessage {...messages.node_pubkey_title} />
</Text>
<Text color="gray" fontWeight="light">
<FormattedMessage {...messages.node_pubkey_description} />
</Text>
</>
}
py={2}
right={!isLocalWallet && <QRCode size="xxlarge" value={nodeUriOrPubkey} />}
/>
<CopyBox
hint={intl.formatMessage({ ...messages.copy_pubkey })}
my={3}
onCopy={notifyOfCopy}
value={nodeUriOrPubkey}
/>
</>
)}
<DataRow
left={
<Text fontWeight="normal">
<FormattedMessage {...messages.node_version} />
</Text>
}
py={2}
right={lndVersion}
/>
</Box>
)
}

ProfilePaneNodeInfo.propTypes = {
activeWalletSettings: PropTypes.object.isRequired,
intl: intlShape.isRequired,
lndVersion: PropTypes.string,
nodeUriOrPubkey: PropTypes.string.isRequired,
showNotification: PropTypes.func.isRequired,
}

export default injectIntl(ProfilePaneNodeInfo)
@@ -0,0 +1,3 @@
import ProfilePaneNodeInfo from './ProfilePaneNodeInfo'

export default ProfilePaneNodeInfo
@@ -0,0 +1,12 @@
import { defineMessages } from 'react-intl'

/* eslint-disable max-len */
export default defineMessages({
nodeinfo_pane_title: 'Node Info',
copy_pubkey: 'Copy Pubkey',
pubkey_copied_notification_description: 'Node public key has been copied to your clipboard',
node_pubkey_title: 'Node Pubkey',
node_pubkey_description:
'Node pubkey (short for public key) is the public address of your node. This is your unique identifier, generated from your seed.',
node_version: 'Node Version',
})
@@ -0,0 +1,3 @@
export const PANE_NODEINFO = 'nodeinfo'
export const PANE_LNDCONNECT = 'lndconnect'
export const DEFAULT_PANE = PANE_NODEINFO
@@ -0,0 +1,4 @@
export ProfileMenu from './ProfileMenu'
export ProfilePage from './ProfilePage'
export ProfilePaneConnect from './ProfilePaneConnect'
export ProfilePaneNodeInfo from './ProfilePaneNodeInfo'
@@ -0,0 +1,9 @@
import { connect } from 'react-redux'
import { walletSelectors } from 'reducers/wallet'
import ProfilePage from 'components/Profile/ProfilePage'

const mapStateToProps = state => ({
activeWalletSettings: walletSelectors.activeWalletSettings(state),
})

export default connect(mapStateToProps)(ProfilePage)
@@ -0,0 +1,17 @@
import { connect } from 'react-redux'
import { showNotification } from 'reducers/notification'
import { walletSelectors } from 'reducers/wallet'
import ProfilePaneConnect from 'components/Profile/ProfilePaneConnect'

const mapStateToProps = state => ({
lndconnectQRCode: walletSelectors.lndconnectQRCode(state),
})

const mapDispatchToProps = {
showNotification,
}

export default connect(
mapStateToProps,
mapDispatchToProps
)(ProfilePaneConnect)
@@ -0,0 +1,20 @@
import { connect } from 'react-redux'
import { showNotification } from 'reducers/notification'
import { infoSelectors } from 'reducers/info'
import { walletSelectors } from 'reducers/wallet'
import ProfilePaneNodeInfo from 'components/Profile/ProfilePaneNodeInfo'

const mapStateToProps = state => ({
activeWalletSettings: walletSelectors.activeWalletSettings(state),
nodeUriOrPubkey: infoSelectors.nodeUriOrPubkey(state),
lndVersion: infoSelectors.lndVersion(state),
})

const mapDispatchToProps = {
showNotification,
}

export default connect(
mapStateToProps,
mapDispatchToProps
)(ProfilePaneNodeInfo)
@@ -200,11 +200,14 @@ walletSelectors.hasWallets = createSelector(
walletSelectors.wallets,
wallets => wallets.length > 0
)

walletSelectors.isWalletOpen = createSelector(
isWalletOpenSelector,
isOpen => isOpen
)
walletSelectors.lndconnectQRCode = createSelector(
walletSelectors.activeWalletSettings,
activeWallet => activeWallet.lndconnectQRCode
)

export { walletSelectors }

0 comments on commit f04281d

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