fix(wallet): correctly identify active network

Due to recent changes in lnd network information (chain/network) can
be located in different parts of the lnd getInfo api call response. We
have already taken some measures to detect and modify this information
so that it is consistent but there were some places in our code where
we were still looking for the info in the old location and as a result
incorrectly identifying the network that a node is running on.

Fix LN-Zap#1510

app/components/Contacts/Network/Network.js

@@ -74,7 +74,7 @@ class Network extends Component {
       changeFilter,
       setSelectedChannel,
       closeChannel,
-      network,
+      networkInfo,
       currencyName,
       intl
     } = this.props
@@ -305,7 +305,7 @@ class Network extends Component {
                             py={0}
                             onClick={() =>
                               blockExplorer.showTransaction(
-                                network,
+                                networkInfo,
                                 channelObj.closing_txid || channel.channel_point.split(':')[0]
                               )
                             }
@@ -439,7 +439,10 @@ Network.propTypes = {
   channelBalance: PropTypes.number,
   currentTicker: PropTypes.object,
   ticker: PropTypes.object.isRequired,
-  network: PropTypes.object.isRequired,
+  networkInfo: PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string
+  }),
   fetchChannels: PropTypes.func.isRequired,
   openContactsForm: PropTypes.func.isRequired,
   changeFilter: PropTypes.func.isRequired,

app/components/Wallet/ReceiveModal/ReceiveModal.js

@@ -42,7 +42,7 @@ class ReceiveModal extends React.Component {
       alias,
       closeReceiveModal,
       cryptoName,
-      network,
+      networkInfo,
       intl
     } = this.props
     const { qrCodeType } = this.state
@@ -137,7 +137,7 @@ class ReceiveModal extends React.Component {
               <Box>
                 <Heading.h4 mb={2} fontWeight="normal">
                   <FormattedMessage {...messages.wallet_address} values={{ chain: cryptoName }} />{' '}
-                  {network && network.name.toLowerCase() === 'testnet' && network.name}
+                  {networkInfo && networkInfo.id === 'testnet' && networkInfo.name}
                 </Heading.h4>
                 <Flex bg="tertiaryColor" justifyContent="space-between" width={1}>
                   <Text
@@ -174,9 +174,10 @@ class ReceiveModal extends React.Component {
 }
 
 ReceiveModal.propTypes = {
-  network: PropTypes.shape({
+  networkInfo: PropTypes.shape({
+    id: PropTypes.string,
     name: PropTypes.string
-  }).isRequired,
+  }),
   cryptoName: PropTypes.string,
   isOpen: PropTypes.bool.isRequired,
   pubkey: PropTypes.string,

app/components/Wallet/Wallet.js

@@ -13,7 +13,7 @@ const Wallet = ({
   totalBalance,
   currencyFilters,
   currentTicker,
-  info,
+  networkInfo,
   ticker,
   openWalletModal,
   setCurrency,
@@ -30,9 +30,9 @@ const Wallet = ({
       <Flex as="header" justifyContent="space-between" pt={2}>
         <Flex as="section" alignItems="center" mt={4}>
           <ZapLogo width="70px" height="32px" />
-          {info.data.testnet && (
+          {networkInfo.id !== 'mainnet' && (
             <Text color="superGreen" fontSize={1} ml={2}>
-              Testnet
+              {networkInfo.name}
             </Text>
           )}
         </Flex>
@@ -92,7 +92,10 @@ Wallet.propTypes = {
   totalBalance: PropTypes.number,
   currencyFilters: PropTypes.array.isRequired,
   currentTicker: PropTypes.object,
-  info: PropTypes.object.isRequired,
+  networkInfo: PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string
+  }),
   ticker: PropTypes.object.isRequired,
 
   // Dispatch props

app/containers/Activity/TransactionModalContainer.js

@@ -1,5 +1,6 @@
 import { connect } from 'react-redux'
 import { setCurrency, setFiatTicker, tickerSelectors } from 'reducers/ticker'
+import { infoSelectors } from 'reducers/info'
 import { TransactionModal } from 'components/Activity/TransactionModal'
 
 const mapStateToProps = state => ({
@@ -8,7 +9,7 @@ const mapStateToProps = state => ({
   cryptoCurrencies: tickerSelectors.currencyFilters(state),
   fiatCurrencies: state.ticker.fiatTickers,
   fiatCurrency: state.ticker.fiatTicker,
-  network: state.info.network
+  network: infoSelectors.networkInfo(state)
 })
 
 const mapDispatchToProps = {

app/containers/App.js

@@ -5,6 +5,7 @@ import { setCurrency, tickerSelectors } from 'reducers/ticker'
 import { closeWalletModal } from 'reducers/address'
 import { setFormType } from 'reducers/form'
 import { createInvoice, fetchInvoice } from 'reducers/invoice'
+import { infoSelectors } from 'reducers/info'
 import { lndSelectors } from 'reducers/lnd'
 import {
   fetchChannels,
@@ -99,6 +100,7 @@ const mapStateToProps = state => ({
   filteredNetworkNodes: contactFormSelectors.filteredNetworkNodes(state),
   showManualForm: contactFormSelectors.showManualForm(state),
 
+  networkInfo: infoSelectors.networkInfo(state),
   currentChannels: currentChannels(state),
   activeChannelPubkeys: channelsSelectors.activeChannelPubkeys(state),
   nonActiveChannelPubkeys: channelsSelectors.nonActiveChannelPubkeys(state),
@@ -122,7 +124,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     contactsform: stateProps.contactsform,
     nodes: stateProps.network.nodes,
     ticker: stateProps.ticker,
-    network: stateProps.info.network,
+    networkInfo: stateProps.networkInfo,
     currencyName: stateProps.currencyName,
 
     fetchChannels: dispatchProps.fetchChannels,
@@ -153,7 +155,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
 
   const receiveModalProps = {
     isOpen: stateProps.address.walletModal,
-    network: stateProps.info.network,
+    networkInfo: stateProps.networkInfo,
     cryptoName: stateProps.cryptoName,
     pubkey: get(stateProps.info, 'data.uris[0]') || get(stateProps.info, 'data.identity_pubkey'),
     address: stateProps.address.address,

app/containers/Pay.js

@@ -2,13 +2,12 @@ import { connect } from 'react-redux'
 import { Pay } from 'components/Pay'
 import { tickerSelectors, setCurrency, setFiatTicker } from 'reducers/ticker'
 import { setPayReq, queryFees, queryRoutes } from 'reducers/pay'
-import { infoSelectors } from 'reducers/info'
 import { sendCoins } from 'reducers/transaction'
 import { payInvoice } from 'reducers/payment'
 
 const mapStateToProps = state => ({
   chain: state.info.chain,
-  network: infoSelectors.testnetSelector(state) ? 'testnet' : 'mainnet',
+  network: state.info.network,
   cryptoName: tickerSelectors.cryptoName(state),
   channelBalance: state.balance.channelBalance,
   currentTicker: tickerSelectors.currentTicker(state),

app/containers/Wallet.js

@@ -3,6 +3,7 @@ import { setCurrency, tickerSelectors } from 'reducers/ticker'
 import { openWalletModal } from 'reducers/address'
 import { setFormType } from 'reducers/form'
 import { balanceSelectors } from 'reducers/balance'
+import { infoSelectors } from 'reducers/info'
 import Wallet from 'components/Wallet'
 
 const mapDispatchToProps = {
@@ -12,7 +13,7 @@ const mapDispatchToProps = {
 }
 
 const mapStateToProps = state => ({
-  info: state.info,
+  networkInfo: infoSelectors.networkInfo(state),
   ticker: state.ticker,
   totalBalance: balanceSelectors.totalBalance(state),
   currentTicker: tickerSelectors.currentTicker(state),

app/reducers/contactsform.js

@@ -141,7 +141,7 @@ const nodeSelector = state => state.contactsform.node
 const channelsSelector = state => state.channels.channels
 const peersSelector = state => state.peers.peers
 const contactable = node => node.addresses.length > 0
-const testnetSelector = state => state.info.data.testnet
+const networkSelector = state => state.info.network
 const testnetNodesSelector = state => state.channels.suggestedNodes.testnet
 const mainnetNodesSelector = state => state.channels.suggestedNodes.mainnet
 
@@ -156,11 +156,11 @@ const contactableFirst = (a, b) => {
 }
 
 contactFormSelectors.suggestedNodes = createSelector(
-  testnetSelector,
+  networkSelector,
   testnetNodesSelector,
   mainnetNodesSelector,
-  (testnet, testnetNodes, mainnetNodes) => {
-    return testnet ? testnetNodes : mainnetNodes
+  (network, testnetNodes, mainnetNodes) => {
+    return network === 'testnet' ? testnetNodes : mainnetNodes
   }
 )
 

app/reducers/info.js

@@ -1,3 +1,4 @@
+import { createSelector } from 'reselect'
 import { send } from 'redux-electron-ipc'
 import get from 'lodash.get'
 import db from 'store/db'
@@ -87,7 +88,7 @@ export const receiveInfo = (event, data) => async (dispatch, getState) => {
 
   // Update the active wallet settings with info discovered from getinfo.
   const chain = get(state, 'info.chain')
-  const network = get(state, 'info.network.id')
+  const network = get(state, 'info.network')
 
   const wallet = walletSelectors.activeWalletSettings(state)
   if (wallet && (wallet.chain !== chain || wallet.network !== network)) {
@@ -109,12 +110,11 @@ const ACTION_HANDLERS = {
   [RECEIVE_INFO]: (state, { data }) => {
     const chain = get(data, 'chains[0].chain')
     const network = get(data, 'chains[0].network')
-    const networkData = get(networkInfo, `${chain}.${network}`)
     return {
       ...state,
       infoLoading: false,
-      network: networkData,
       chain,
+      network,
       data
     }
   }
@@ -126,18 +126,27 @@ const ACTION_HANDLERS = {
 const initialState = {
   infoLoading: false,
   hasSynced: undefined,
-  network: {},
+  chain: null,
+  network: null,
   data: {},
-  chain: null
+  networks: networkInfo
 }
 
 // Selectors
 const infoSelectors = {}
-infoSelectors.testnetSelector = state => state.info.data.testnet
+infoSelectors.chainSelector = state => state.info.chain
 infoSelectors.networkSelector = state => state.info.network
+infoSelectors.networksSelector = state => state.info.networks
 infoSelectors.infoLoading = state => state.info.infoLoading
 infoSelectors.hasSynced = state => state.info.hasSynced
 
+infoSelectors.networkInfo = createSelector(
+  infoSelectors.chainSelector,
+  infoSelectors.networkSelector,
+  infoSelectors.networksSelector,
+  (chain, network, networks) => get(networks, `${chain}.${network}`)
+)
+
 export { infoSelectors }
 
 export default function infoReducer(state = initialState, action) {

app/reducers/ticker.js

@@ -131,15 +131,15 @@ tickerSelectors.cryptoName = createSelector(
 
 tickerSelectors.currencyFilters = createSelector(
   cryptoSelector,
-  infoSelectors.networkSelector,
+  infoSelectors.networkInfo,
   currencyFiltersSelector,
-  (crypto, network, currencyFilters) => {
-    if (!crypto || !network) {
+  (crypto, networkInfo, currencyFilters) => {
+    if (!crypto || !networkInfo) {
       return []
     }
     return currencyFilters[crypto].map(item => ({
       ...item,
-      name: `${network.unitPrefix}${item.name}`
+      name: `${networkInfo.unitPrefix}${item.name}`
     }))
   }
 )