Merge pull request #15 from LN-Zap/fix/dynamic-explorer-links

fix(explorer link): dynamically set explorer link

app/reducers/info.js

@@ -1,3 +1,4 @@
+import { createSelector } from 'reselect'
 import { ipcRenderer } from 'electron'
 // ------------------------------------
 // Constants
@@ -39,6 +40,22 @@ const initialState = {
   data: {}
 }
 
+// Selectors
+const infoSelectors = {}
+const testnetSelector = state => state.info.data.testnet
+
+infoSelectors.isTestnet = createSelector(
+  testnetSelector,
+  isTestnet => (!!isTestnet)
+)
+
+infoSelectors.explorerLinkBase = createSelector(
+  infoSelectors.isTestnet,
+  isTestnet => isTestnet ? 'https://testnet.smartbit.com.au' : 'https://smartbit.com.au'
+)
+
+export { infoSelectors }
+
 export default function infoReducer(state = initialState, action) {
   const handler = ACTION_HANDLERS[action.type]
 

app/routes/wallet/components/Wallet.js

@@ -31,7 +31,8 @@ class Wallet extends Component {
       disconnectRequest,
       allChannels,
       openChannel,
-      currentTicker
+      currentTicker,
+      explorerLinkBase
     } = this.props
 
     return (
@@ -75,6 +76,7 @@ class Wallet extends Component {
             setChannelForm={setChannelForm}
             openChannel={openChannel}
             currentTicker={currentTicker}
+            explorerLinkBase={explorerLinkBase}
           />
         </section>
       </div>
@@ -101,7 +103,8 @@ Wallet.propTypes = {
   openChannel: PropTypes.func.isRequired,
   newAddress: PropTypes.func.isRequired,
   address: PropTypes.object.isRequired,
-  currentTicker: PropTypes.object.isRequired
+  currentTicker: PropTypes.object.isRequired,
+  explorerLinkBase: PropTypes.string.isRequired
 }
 
 

app/routes/wallet/components/components/Channels/Channels.js

@@ -19,10 +19,11 @@ const Channels = ({
   setChannelForm,
   allChannels,
   openChannel,
-  currentTicker
+  currentTicker,
+  explorerLinkBase
 }) => (
   <div className={styles.channels}>
-    <ChannelModal isOpen={channelModalOpen} resetChannel={setChannel} channel={modalChannel} />
+    <ChannelModal isOpen={channelModalOpen} resetChannel={setChannel} channel={modalChannel} explorerLinkBase={explorerLinkBase} />
     <ChannelForm form={channelForm} setForm={setChannelForm} ticker={ticker} peers={peers} openChannel={openChannel} currentTicker={currentTicker} />
     <div className={styles.header}>
       <h3>Channels</h3>
@@ -45,6 +46,7 @@ const Channels = ({
                   channel={channel}
                   ticker={ticker}
                   currentTicker={currentTicker}
+                  explorerLinkBase={explorerLinkBase}
                 />
               )
             } else if (Object.prototype.hasOwnProperty.call(channel, 'closing_txid')) {
@@ -54,6 +56,7 @@ const Channels = ({
                   channel={channel}
                   ticker={ticker}
                   currentTicker={currentTicker}
+                  explorerLinkBase={explorerLinkBase}
                 />
               )
             }
@@ -85,7 +88,8 @@ Channels.propTypes = {
   setChannelForm: PropTypes.func.isRequired,
   allChannels: PropTypes.array.isRequired,
   openChannel: PropTypes.func.isRequired,
-  currentTicker: PropTypes.object.isRequired
+  currentTicker: PropTypes.object.isRequired,
+  explorerLinkBase: PropTypes.string.isRequired
 }
 
 export default Channels

app/routes/wallet/components/components/Channels/components/ChannelModal/ChannelModal.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import ReactModal from 'react-modal'
 import styles from './ChannelModal.scss'
 
-const ChannelModal = ({ isOpen, resetChannel, channel }) => {
+const ChannelModal = ({ isOpen, resetChannel, channel, explorerLinkBase }) => {
   const customStyles = {
     overlay: {
       cursor: 'pointer',
@@ -39,7 +39,7 @@ const ChannelModal = ({ isOpen, resetChannel, channel }) => {
               <h2
                 data-hint='Channel point'
                 className='hint--top-left'
-                onClick={() => shell.openExternal(`https://testnet.smartbit.com.au/tx/${channel.channel_point.split(':')[0]}`)}
+                onClick={() => shell.openExternal(`${explorerLinkBase}/tx/${channel.channel_point.split(':')[0]}`)}
               >
                 {channel.channel_point}
               </h2>
@@ -88,7 +88,8 @@ const ChannelModal = ({ isOpen, resetChannel, channel }) => {
 ChannelModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   resetChannel: PropTypes.func.isRequired,
-  channel: PropTypes.object
+  channel: PropTypes.object,
+  explorerLinkBase: PropTypes.string.isRequired
 }
 
 export default ChannelModal

app/routes/wallet/components/components/Channels/components/ClosedPendingChannel/ClosedPendingChannel.js

@@ -4,8 +4,8 @@ import PropTypes from 'prop-types'
 import { btc } from '../../../../../../../utils'
 import styles from './ClosedPendingChannel.scss'
 
-const ClosedPendingChannel = ({ ticker, channel: { channel, closing_txid }, currentTicker }) => (
+const ClosedPendingChannel = ({ ticker, channel: { channel, closing_txid }, currentTicker, explorerLinkBase }) => (
-  <li className={styles.channel} onClick={() => shell.openExternal(`https://testnet.smartbit.com.au/tx/${closing_txid}`)}>
+  <li className={styles.channel} onClick={() => shell.openExternal(`${explorerLinkBase}/tx/${closing_txid}`)}>
     <h1 className={styles.closing}>Status: Closing</h1>
     <div className={styles.left}>
       <section className={styles.remotePubkey}>
@@ -60,7 +60,8 @@ const ClosedPendingChannel = ({ ticker, channel: { channel, closing_txid }, curr
 ClosedPendingChannel.propTypes = {
   ticker: PropTypes.object.isRequired,
   channel: PropTypes.object.isRequired,
-  currentTicker: PropTypes.object.isRequired
+  currentTicker: PropTypes.object.isRequired,
+  explorerLinkBase: PropTypes.string.isRequired
 }
 
 export default ClosedPendingChannel

app/routes/wallet/components/components/Channels/components/OpenPendingChannel/OpenPendingChannel.js

@@ -4,8 +4,8 @@ import PropTypes from 'prop-types'
 import { btc } from '../../../../../../../utils'
 import styles from './OpenPendingChannel.scss'
 
-const OpenPendingChannel = ({ ticker, channel: { channel }, currentTicker }) => (
+const OpenPendingChannel = ({ ticker, channel: { channel }, currentTicker, explorerLinkBase }) => (
-  <li className={styles.channel} onClick={() => shell.openExternal(`https://testnet.smartbit.com.au/tx/${channel.channel_point.split(':')[0]}`)}>
+  <li className={styles.channel} onClick={() => shell.openExternal(`${explorerLinkBase}/tx/${channel.channel_point.split(':')[0]}`)}>
     <h1 className={styles.pending}>Status: Pending</h1>
     <div className={styles.left}>
       <section className={styles.remotePubkey}>
@@ -60,7 +60,8 @@ const OpenPendingChannel = ({ ticker, channel: { channel }, currentTicker }) =>
 OpenPendingChannel.propTypes = {
   ticker: PropTypes.object.isRequired,
   channel: PropTypes.object.isRequired,
-  currentTicker: PropTypes.object.isRequired
+  currentTicker: PropTypes.object.isRequired,
+  explorerLinkBase: PropTypes.string.isRequired
 }
 
 export default OpenPendingChannel

app/routes/wallet/containers/WalletContainer.js

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux'
+import { infoSelectors } from '../../../reducers/info'
 import { newAddress } from '../../../reducers/address'
 import { tickerSelectors } from '../../../reducers/ticker'
 import {
@@ -49,7 +50,9 @@ const mapStateToProps = state => ({
   peerModalOpen: peersSelectors.peerModalOpen(state),
   channelModalOpen: channelsSelectors.channelModalOpen(state),
 
-  currentTicker: tickerSelectors.currentTicker(state)
+  currentTicker: tickerSelectors.currentTicker(state),
+
+  explorerLinkBase: infoSelectors.explorerLinkBase(state)
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Wallet)