enhance(channels): Extract blockExplorer util

To handle shelling out to the transaction display

This was previously done inline via electron.shell.openExternal. Consolidating
it in the utility DRYs up the code both in terms of the base url and the path
building.

Note there is also code in reducers/info.js relating to:
infoSelectors.explorerLinkBase, but it seems to be unused currently.

app/components/Contacts/ClosingContact.js

@@ -1,8 +1,7 @@
-import { shell } from 'electron'
 import React from 'react'
 import PropTypes from 'prop-types'
 import { FaCircle } from 'react-icons/lib/fa'
-import { btc } from 'utils'
+import { btc, blockExplorer } from 'utils'
 import styles from './Contact.scss'
 
 const ClosingContact = ({ channel }) => (
@@ -12,7 +11,7 @@ const ClosingContact = ({ channel }) => (
         <FaCircle style={{ verticalAlign: 'top' }} />
         <span>
           Removing
-          <i onClick={() => shell.openExternal(`${'https://testnet.smartbit.com.au'}/tx/${channel.closing_txid}`)}>
+          <i onClick={() => blockExplorer.showChannelClosing(channel)}>
             (Details)
           </i>
         </span>

app/components/Contacts/PendingContact.js

@@ -1,8 +1,7 @@
-import { shell } from 'electron'
 import React from 'react'
 import PropTypes from 'prop-types'
 import { FaCircle } from 'react-icons/lib/fa'
-import { btc } from 'utils'
+import { btc, blockExplorer } from 'utils'
 import styles from './Contact.scss'
 
 const PendingContact = ({ channel }) => (
@@ -12,7 +11,7 @@ const PendingContact = ({ channel }) => (
         <FaCircle style={{ verticalAlign: 'top' }} />
         <span>
           Pending
-          <i onClick={() => shell.openExternal(`${'https://testnet.smartbit.com.au'}/tx/${channel.channel.channel_point.split(':')[0]}`)}>
+          <i onClick={() => blockExplorer.showChannelPoint(channel)}>
             (Details)
           </i>
         </span>

app/components/ModalRoot/SuccessfulSendCoins.js

@@ -1,8 +1,7 @@
-import { shell } from 'electron'
 import React from 'react'
 import PropTypes from 'prop-types'
 import AnimatedCheckmark from 'components/AnimatedCheckmark'
-import { btc } from 'utils'
+import { btc, blockExplorer } from 'utils'
 import styles from './SuccessfulSendCoins.scss'
 
 const SuccessfulSendCoins = ({
@@ -15,7 +14,7 @@ const SuccessfulSendCoins = ({
       <AnimatedCheckmark />
       <h1>
         You&nbsp;
-        <span className={styles.link} onClick={() => shell.openExternal(`https://testnet.smartbit.com.au/tx/${txid}`)}>sent</span>&nbsp;
+        <span className={styles.link} onClick={() => blockExplorer.showTransaction(txid)}>sent</span>&nbsp;
         <span className={styles.amount}>{calculatedAmount} {currency.toUpperCase()}</span>&nbsp;
         to&nbsp;
         <span className={styles.addr}>{addr}</span>

app/components/Network/ChannelsList.js

@@ -1,7 +1,6 @@
-import { shell } from 'electron'
 import React from 'react'
 import PropTypes from 'prop-types'
-import { btc } from 'utils'
+import { btc, blockExplorer } from 'utils'
 import styles from './ChannelsList.scss'
 
 const ChannelsList = ({ channels, updateSelectedChannels, selectedChannelIds }) => (
@@ -13,7 +12,7 @@ const ChannelsList = ({ channels, updateSelectedChannels, selectedChannelIds })
 
           <header>
             <h1>Capacity: {btc.satoshisToBtc(channel.capacity)}</h1>
-            <span onClick={() => shell.openExternal(`https://testnet.smartbit.com.au/tx/${channel.channel_point.split(':')[0]}`)}>Channel Point</span>
+            <span onClick={() => blockExplorer.showChannelPoint({ channel })}>Channel Point</span>
           </header>
 
           <section>

app/reducers/info.js

@@ -1,5 +1,6 @@
 import { createSelector } from 'reselect'
 import { ipcRenderer } from 'electron'
+import { blockExplorer } from 'utils'
 
 // ------------------------------------
 // Constants
@@ -57,7 +58,7 @@ infoSelectors.isTestnet = createSelector(
 
 infoSelectors.explorerLinkBase = createSelector(
   infoSelectors.isTestnet,
-  isTestnet => (isTestnet ? 'https://testnet.smartbit.com.au' : 'https://smartbit.com.au')
+  isTestnet => (isTestnet ? blockExplorer.testnetUrl : blockExplorer.mainnetUrl)
 )
 
 export { infoSelectors }

app/routes/activity/components/components/Modal/Transaction/Transaction.js

@@ -1,11 +1,10 @@
-import { shell } from 'electron'
 import React from 'react'
 import PropTypes from 'prop-types'
 
 import Moment from 'react-moment'
 import 'moment-timezone'
 
-import { btc } from 'utils'
+import { btc, blockExplorer } from 'utils'
 
 import styles from './Transaction.scss'
 
@@ -34,7 +33,7 @@ const Transaction = ({ transaction, ticker, currentTicker }) => (
           <i>BTC</i>
         </h1>
       </div>
-      <h3 onClick={() => shell.openExternal(`https://testnet.smartbit.com.au/tx/${transaction.tx_hash}`)}>{transaction.tx_hash}</h3>
+      <h3 onClick={() => blockExplorer.showTransaction(transaction.tx_hash)}>{transaction.tx_hash}</h3>
     </header>
     <dl>
       <dt>Confirmations</dt>

app/utils/blockExplorer.js

@@ -0,0 +1,21 @@
+import { shell } from 'electron'
+
+const testnetUrl = 'https://testnet.smartbit.com.au'
+const mainnetUrl = 'https://smartbit.com.au'
+
+const showTransaction = txid =>
+  shell.openExternal(`${testnetUrl}/tx/${txid}`)
+
+const showChannelClosing = channel =>
+  showTransaction(channel.closing_txid)
+
+const showChannelPoint = channel =>
+  showTransaction(channel.channel.channel_point.split(':')[0])
+
+export default {
+  testnetUrl,
+  mainnetUrl,
+  showTransaction,
+  showChannelClosing,
+  showChannelPoint
+}

app/utils/index.js

@@ -1,9 +1,11 @@
 import btc from './btc'
 import usd from './usd'
 import bech32 from './bech32'
+import blockExplorer from './blockExplorer'
 
 export default {
   btc,
   usd,
-  bech32
+  bech32,
+  blockExplorer
 }