From 8a418d94c913a250b5d232b1b672312e36b9dae6 Mon Sep 17 00:00:00 2001
From: Umar Bolatov <bolatovumar@gmail.com>
Date: Sat, 9 Nov 2019 15:49:56 -0800
Subject: [PATCH] feat(ui): show multiple node uris if there are more than one

fix #3150
---
 .../ProfilePaneNodeInfo.js                    | 86 +++++++++++++------
 .../containers/Profile/ProfilePaneNodeInfo.js |  2 +-
 renderer/reducers/info.js                     | 16 ++--
 3 files changed, 68 insertions(+), 36 deletions(-)

diff --git a/renderer/components/Profile/ProfilePaneNodeInfo/ProfilePaneNodeInfo.js b/renderer/components/Profile/ProfilePaneNodeInfo/ProfilePaneNodeInfo.js
index 3977f74e4d6..cb6516b5ff7 100644
--- a/renderer/components/Profile/ProfilePaneNodeInfo/ProfilePaneNodeInfo.js
+++ b/renderer/components/Profile/ProfilePaneNodeInfo/ProfilePaneNodeInfo.js
@@ -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'
@@ -27,7 +27,7 @@ const ProfilePaneNodeInfo = ({
   intl,
   activeWalletSettings,
   commitString,
-  nodeUriOrPubkey,
+  nodeUrisOrPubkey,
   showNotification,
   backupProvider,
   versionString,
@@ -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">
@@ -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,
 }
diff --git a/renderer/containers/Profile/ProfilePaneNodeInfo.js b/renderer/containers/Profile/ProfilePaneNodeInfo.js
index cc7e3f720d7..82d093c93f6 100644
--- a/renderer/containers/Profile/ProfilePaneNodeInfo.js
+++ b/renderer/containers/Profile/ProfilePaneNodeInfo.js
@@ -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),
diff --git a/renderer/reducers/info.js b/renderer/reducers/info.js
index 6575d0f0c32..8ca2d9b2b1c 100644
--- a/renderer/reducers/info.js
+++ b/renderer/reducers/info.js
@@ -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.
@@ -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(