feat(): replaced etherscanBaseUrl with blockExplorerUrl (#639)

apps/finance/app/src/App.js

@@ -10,7 +10,6 @@ import AppLayout from './components/AppLayout'
 import NewTransferIcon from './components/NewTransferIcon'
 import { networkContextType } from './lib/provideNetwork'
 import { ETHER_TOKEN_FAKE_ADDRESS } from './lib/token-utils'
-import { makeEtherscanBaseUrl } from './lib/utils'
 
 import addFundsIcon from './components/assets/add-funds-icon.svg'
 
@@ -37,7 +36,6 @@ class App extends React.Component {
     const { network } = this.props
     return {
       network: {
-        etherscanBaseUrl: makeEtherscanBaseUrl(network.type),
         type: network.type,
       },
     }

apps/finance/app/src/components/TransferRow.js

@@ -7,6 +7,7 @@ import {
   ContextMenu,
   ContextMenuItem,
   IdentityBadge,
+  blockExplorerUrl,
   theme,
 } from '@aragon/ui'
 import provideNetwork from '../lib/provideNetwork'
@@ -16,10 +17,15 @@ import IconTokens from './icons/IconTokens'
 class TransferRow extends React.PureComponent {
   handleViewTransaction = () => {
     const {
-      network: { etherscanBaseUrl },
+      network,
       transaction: { transactionHash },
     } = this.props
-    window.open(`${etherscanBaseUrl}/tx/${transactionHash}`, '_blank')
+    window.open(
+      blockExplorerUrl('transaction', transactionHash, {
+        networkType: network.type,
+      }),
+      '_blank'
+    )
   }
 
   render() {
@@ -33,9 +39,13 @@ class TransferRow extends React.PureComponent {
         isIncoming,
         numData: { amount },
         reference,
+        transactionHash,
       },
     } = this.props
 
+    const txUrl = blockExplorerUrl('transaction', transactionHash, {
+      networkType: network.type,
+    })
     const formattedAmount = formatTokenAmount(
       amount,
       isIncoming,
@@ -96,7 +106,7 @@ class TransferRow extends React.PureComponent {
         </NoWrapCell>
         <NoWrapCell>
           <div css="position: relative">
-            {network.etherscanBaseUrl && (
+            {txUrl && (
               <ContextMenu>
                 <ContextMenuItem onClick={this.handleViewTransaction}>
                   <IconTokens />

apps/finance/app/src/lib/provideNetwork.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import getDisplayName from 'react-display-name'
 
 export const networkContextType = PropTypes.shape({
-  etherscanBaseUrl: PropTypes.string,
   type: PropTypes.string,
 })
 

apps/finance/app/src/lib/utils.js

@@ -15,15 +15,3 @@ export const formatTokenAmount = (
       maximumFractionDigits: 18,
     }
   )
-
-export function makeEtherscanBaseUrl(network) {
-  // Don't make etherscan urls if the network isn't one that etherscan supports
-  if (
-    network === 'main' ||
-    network === 'kovan' ||
-    network === 'rinkeby' ||
-    network === 'ropsten'
-  ) {
-    return `https://${network === 'main' ? '' : `${network}.`}etherscan.io`
-  }
-}

apps/token-manager/app/src/App.js

@@ -1,17 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import BN from 'bn.js'
-import { Badge, Main, SidePanel, font, observe } from '@aragon/ui'
+import { Badge, Main, SidePanel, observe } from '@aragon/ui'
 import EmptyState from './screens/EmptyState'
 import Holders from './screens/Holders'
 import AssignVotePanelContent from './components/Panels/AssignVotePanelContent'
-import MenuButton from './components/MenuButton/MenuButton'
 import AssignTokensIcon from './components/AssignTokensIcon'
 import AppLayout from './components/AppLayout'
 import { networkContextType } from './provide-network'
 import { hasLoadedTokenSettings } from './token-settings'
-import { makeEtherscanBaseUrl } from './utils'
 import { addressesEqual } from './web3-utils'
 
 const initialAssignTokensConfig = {
@@ -43,7 +40,6 @@ class App extends React.Component {
 
     return {
       network: {
-        etherscanBaseUrl: makeEtherscanBaseUrl(network.type),
         type: network.type,
       },
     }

apps/token-manager/app/src/components/TokenBadge.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { SafeLink } from '@aragon/ui'
+import { SafeLink, blockExplorerUrl } from '@aragon/ui'
 import provideNetwork from '../provide-network'
 
 import { ETHER_TOKEN_VERIFIED_ADDRESSES } from '../verified-tokens'
@@ -12,7 +12,7 @@ class TokenBadge extends React.PureComponent {
     return (
       <Main
         title={`${name} (${address})`}
-        href={`${network.etherscanBaseUrl}/token/${address}`}
+        href={blockExplorerUrl('token', address, { networkType: network.type })}
       >
         <Label>
           {verified && (

apps/token-manager/app/src/provide-network.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import getDisplayName from 'react-display-name'
 
 export const networkContextType = PropTypes.shape({
-  etherscanBaseUrl: PropTypes.string,
   type: PropTypes.string,
 })
 

apps/token-manager/app/src/screens/Holders.js

@@ -7,7 +7,6 @@ import {
   TableRow,
   Viewport,
   breakpoint,
-  springs,
 } from '@aragon/ui'
 import HolderRow from '../components/HolderRow'
 import SideBar from '../components/SideBar'

apps/token-manager/app/src/utils.js

@@ -202,15 +202,3 @@ export function stakesPercentages(
         adjustedStakes[firstZeroIndex - 1].percentage
       )
 }
-
-export function makeEtherscanBaseUrl(network) {
-  // Don't make etherscan urls if the network isn't one that etherscan supports
-  if (
-    network === 'main' ||
-    network === 'kovan' ||
-    network === 'rinkeby' ||
-    network === 'ropsten'
-  ) {
-    return `https://${network === 'main' ? '' : `${network}.`}etherscan.io`
-  }
-}

apps/voting/app/src/App.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import { Main, SidePanel, observe } from '@aragon/ui'
 import BN from 'bn.js'
 import EmptyState from './screens/EmptyState'
@@ -9,15 +8,13 @@ import tokenAbi from './abi/token-balanceOfAt.json'
 import VotePanelContent from './components/VotePanelContent'
 import NewVotePanelContent from './components/NewVotePanelContent'
 import AutoLink from './components/AutoLink'
-import MenuButton from './components/MenuButton/MenuButton'
 import AppLayout from './components/AppLayout'
 import NewVoteIcon from './components/NewVoteIcon'
 import { networkContextType } from './utils/provideNetwork'
 import { settingsContextType } from './utils/provideSettings'
 import { hasLoadedVoteSettings } from './vote-settings'
 import { VOTE_YEA } from './vote-types'
 import { EMPTY_CALLSCRIPT } from './evmscript-utils'
-import { makeEtherscanBaseUrl } from './utils'
 import { isVoteOpen, voteTypeFromContractEnum } from './vote-utils'
 import { shortenAddress, transformAddresses } from './web3-utils'
 
@@ -42,7 +39,6 @@ class App extends React.Component {
 
     return {
       network: {
-        etherscanBaseUrl: makeEtherscanBaseUrl(network.type),
         type: network.type,
       },
       settings: {

apps/voting/app/src/components/VotePanelContent.js

@@ -10,6 +10,7 @@ import {
   SidePanelSeparator,
   Countdown,
   Text,
+  blockExplorerUrl,
   theme,
 } from '@aragon/ui'
 import provideNetwork from '../utils/provideNetwork'
@@ -123,15 +124,12 @@ class VotePanelContent extends React.Component {
   }
   renderBlockLink = snapshotBlock => {
     const {
-      network: { etherscanBaseUrl },
+      network: { type },
     } = this.props
     const text = `(block ${snapshotBlock})`
-
-    return etherscanBaseUrl ? (
-      <SafeLink
-        href={`${etherscanBaseUrl}/block/${snapshotBlock}`}
-        target="_blank"
-      >
+    const url = blockExplorerUrl('block', snapshotBlock, { networkType: type })
+    return url ? (
+      <SafeLink href={url} target="_blank">
         {text}
       </SafeLink>
     ) : (
@@ -229,10 +227,7 @@ class VotePanelContent extends React.Component {
             <Label>Created By</Label>
           </h2>
           <Creator>
-            <IdentityBadge
-              entity={creator} 
-              networkType={network.type}
-            />
+            <IdentityBadge entity={creator} networkType={network.type} />
           </Creator>
         </Part>
         <SidePanelSeparator />

apps/voting/app/src/components/VotingCard/VotingCardGroup.js

@@ -32,7 +32,7 @@ const Grid = styled.div`
     'medium',
     `
       grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-     `,
+     `
   )};
 `
 

apps/voting/app/src/utils.js

@@ -6,15 +6,3 @@ export function pluralize(count, singular, plural, re = PLURALIZE_RE) {
   }
   return plural.replace(re, count)
 }
-
-export function makeEtherscanBaseUrl(network) {
-  // Don't make etherscan urls if the network isn't one that etherscan supports
-  if (
-    network === 'main' ||
-    network === 'kovan' ||
-    network === 'rinkeby' ||
-    network === 'ropsten'
-  ) {
-    return `https://${network === 'main' ? '' : `${network}.`}etherscan.io`
-  }
-}

apps/voting/app/src/utils/provideNetwork.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import getDisplayName from 'react-display-name'
 
 export const networkContextType = PropTypes.shape({
-  etherscanBaseUrl: PropTypes.string,
   type: PropTypes.string,
 })