Skip to content
This repository has been archived by the owner on Nov 17, 2023. It is now read-only.

Commit

Permalink
feat(ui): show multiple node uris if there are more than one
Browse files Browse the repository at this point in the history 
fix #3150
  • Loading branch information
@bolatovumar @mrfelton
bolatovumar authored and mrfelton committed May 4, 2020
1 parent 5c46f6b commit 8a418d9
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 36 deletions.
86 changes: 59 additions & 27 deletions renderer/components/Profile/ProfilePaneNodeInfo/ProfilePaneNodeInfo.js
View file
Expand Up @@ -2,7 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage, injectIntl } from 'react-intl'
import { clean } from 'semver'
import { Box } from 'rebass/styled-components'
import { Box, Flex } from 'rebass/styled-components'
import { Bar, CopyBox, DataRow, QRCode, Text } from 'components/UI'
import messages from './messages'
import { intlShape } from '@zap/i18n'
Expand All @@ -27,7 +27,7 @@ const ProfilePaneNodeInfo = ({
intl,
activeWalletSettings,
commitString,
nodeUriOrPubkey,
nodeUrisOrPubkey,
showNotification,
backupProvider,
versionString,
Expand All @@ -37,36 +37,68 @@ const ProfilePaneNodeInfo = ({
showNotification(intl.formatMessage({ ...messages.pubkey_copied_notification_description }))
const isLocalWallet = activeWalletSettings.type === 'local'

const renderMultipleNodeUris = () => (
<>
<Box mb={4}>
<Text fontWeight="normal" mb={2}>
<FormattedMessage {...messages.node_pubkey_title} />
</Text>
<Text color="gray" fontWeight="light">
<FormattedMessage {...messages.node_pubkey_description} />
</Text>
</Box>
{nodeUrisOrPubkey.map(uriOrPubkey => (
<Box key={uriOrPubkey} mb={6}>
{!isLocalWallet && (
<Flex justifyContent="center">
<QRCode size="xxlarge" value={uriOrPubkey} />
</Flex>
)}
<CopyBox
hint={intl.formatMessage({ ...messages.copy_pubkey })}
my={3}
onCopy={notifyOfCopy}
value={uriOrPubkey}
/>
</Box>
))}
</>
)

const renderSingleNodeUri = () => (
<>
<DataRow
left={
<Box mr={3}>
<Text fontWeight="normal" mb={2}>
<FormattedMessage {...messages.node_pubkey_title} />
</Text>
<Text color="gray" fontWeight="light">
<FormattedMessage {...messages.node_pubkey_description} />
</Text>
</Box>
}
py={2}
right={!isLocalWallet && <QRCode size="xxlarge" value={nodeUrisOrPubkey[0]} />}
/>
<CopyBox
hint={intl.formatMessage({ ...messages.copy_pubkey })}
my={3}
onCopy={notifyOfCopy}
value={nodeUrisOrPubkey[0]}
/>
</>
)

return (
<Box as="section" {...rest}>
<Text fontWeight="normal">
<FormattedMessage {...messages.nodeinfo_pane_title} />
</Text>
<Bar mb={4} mt={2} />
{nodeUriOrPubkey && (
<>
<DataRow
left={
<Box mr={3}>
<Text fontWeight="normal" mb={2}>
<FormattedMessage {...messages.node_pubkey_title} />
</Text>
<Text color="gray" fontWeight="light">
<FormattedMessage {...messages.node_pubkey_description} />
</Text>
</Box>
}
py={2}
right={!isLocalWallet && <QRCode size="xxlarge" value={nodeUriOrPubkey} />}
/>
<CopyBox
hint={intl.formatMessage({ ...messages.copy_pubkey })}
my={3}
onCopy={notifyOfCopy}
value={nodeUriOrPubkey}
/>
</>
)}
{nodeUrisOrPubkey && nodeUrisOrPubkey.length > 0 && nodeUrisOrPubkey.length > 1
? renderMultipleNodeUris()
: renderSingleNodeUri()}
<DataRow
left={
<Text fontWeight="normal">
Expand Down Expand Up @@ -105,7 +137,7 @@ ProfilePaneNodeInfo.propTypes = {
backupProvider: PropTypes.string,
commitString: PropTypes.string,
intl: intlShape.isRequired,
nodeUriOrPubkey: PropTypes.string.isRequired,
nodeUrisOrPubkey: PropTypes.arrayOf(PropTypes.string).isRequired,
showNotification: PropTypes.func.isRequired,
versionString: PropTypes.string.isRequired,
}
Expand Down
2 changes: 1 addition & 1 deletion renderer/containers/Profile/ProfilePaneNodeInfo.js
View file
Expand Up @@ -7,7 +7,7 @@ import ProfilePaneNodeInfo from 'components/Profile/ProfilePaneNodeInfo'

const mapStateToProps = state => ({
activeWalletSettings: walletSelectors.activeWalletSettings(state),
nodeUriOrPubkey: infoSelectors.nodeUriOrPubkey(state),
nodeUrisOrPubkey: infoSelectors.nodeUrisOrPubkey(state),
versionString: infoSelectors.versionString(state),
commitString: infoSelectors.commitString(state),
backupProvider: backupSelectors.providerSelector(state),
Expand Down
16 changes: 8 additions & 8 deletions renderer/reducers/info.js
View file
Expand Up @@ -213,8 +213,8 @@ infoSelectors.infoLoaded = state => state.info.infoLoaded
infoSelectors.hasSynced = state => state.info.hasSynced
infoSelectors.isSyncedToChain = state => get(state, 'info.data.syncedToChain', false)
infoSelectors.version = state => get(state, 'info.data.version')
infoSelectors.identityPubkey = state => get(state, 'info.data.identityPubkey')
infoSelectors.nodeUri = state => get(state, 'info.data.uris[0]')
infoSelectors.identityPubkey = state => get(state, 'info.data.identity_pubkey')
infoSelectors.nodeUris = state => get(state, 'info.data.uris')
infoSelectors.grpcProtoVersion = state => get(state, 'info.data.grpcProtoVersion')

// Extract the version string from the version.
Expand Down Expand Up @@ -242,19 +242,19 @@ infoSelectors.hasRouterSupport = createSelector(infoSelectors.grpcProtoVersion,

// Get the node pubkey. If not set, try to extract it from the node uri.
infoSelectors.nodePubkey = createSelector(
infoSelectors.nodeUri,
infoSelectors.nodeUris,
infoSelectors.identityPubkey,
(nodeUri, identityPubkey) => {
const parseFromDataUri = () => nodeUri && nodeUri.split('@')[0]
(nodeUris, identityPubkey) => {
const parseFromDataUri = () => nodeUris && nodeUris[0].split('@')[0]
return identityPubkey || parseFromDataUri()
}
)

// Get the node uri or pubkey.
infoSelectors.nodeUriOrPubkey = createSelector(
infoSelectors.nodeUri,
infoSelectors.nodeUrisOrPubkey = createSelector(
infoSelectors.nodeUris,
infoSelectors.nodePubkey,
(nodeUri, nodePubkey) => nodeUri || nodePubkey
(nodeUris, nodePubkey) => nodeUris || [nodePubkey]
)

infoSelectors.networkInfo = createSelector(
Expand Down

0 comments on commit 8a418d9

Please sign in to comment.