Merge pull request #161 from Empact/enhance/block-explorer

Extract blockExplorer util

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
 }