Refactor getEtherscanLink

config/env.js

@@ -1,28 +1,29 @@
+// @flow
 // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
 // injected into the application via DefinePlugin in Webpack configuration.
 
-var REACT_APP = /^REACT_APP_/i;
+const REACT_APP = /^REACT_APP_/i
 
 function getClientEnvironment(publicUrl) {
-  var processEnv = Object
+  const processEnv = Object.keys(process.env)
-    .keys(process.env)
+    .filter((key) => REACT_APP.test(key))
-    .filter(key => REACT_APP.test(key))
+    .reduce(
-    .reduce((env, key) => {
+      (env, key) => {
-      env[key] = JSON.stringify(process.env[key]);
+        env[key] = JSON.stringify(process.env[key])
-      return env;
+        return env
-    }, {
+      },
-      // Useful for determining whether we’re running in production mode.
+      {
-      // Most importantly, it switches React into the correct mode.
+        // Useful for determining whether we’re running in production mode.
-      'NODE_ENV': JSON.stringify(
+        // Most importantly, it switches React into the correct mode.
-        process.env.NODE_ENV || 'development'
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
-      ),
+        // Useful for resolving the correct path to static assets in `public`.
-      // Useful for resolving the correct path to static assets in `public`.
+        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
-      // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+        // This should only be used as an escape hatch. Normally you would put
-      // This should only be used as an escape hatch. Normally you would put
+        // images into the `src` and `import` them in code to get their paths.
-      // images into the `src` and `import` them in code to get their paths.
+        PUBLIC_URL: JSON.stringify(publicUrl),
-      'PUBLIC_URL': JSON.stringify(publicUrl)
+      },
-    });
+    )
-  return {'process.env': processEnv};
+  return { 'process.env': processEnv }
 }
 
-module.exports = getClientEnvironment;
+module.exports = getClientEnvironment

scripts/start.js

@@ -1,6 +1,5 @@
 /*eslint-disable*/
 process.env.NODE_ENV = 'development'
-process.env.NETWORK = 'mainnet'
 
 // Load environment variables from .env file. Suppress warnings using silent
 // if this file is missing. dotenv will never modify any environment variables

src/components/EtherscanBtn/index.jsx

@@ -2,11 +2,9 @@
 import React from 'react'
 import Tooltip from '@material-ui/core/Tooltip'
 import { withStyles } from '@material-ui/core/styles'
-import { connect } from 'react-redux'
 import Img from '~/components/layout/Img'
 import { getEtherScanLink } from '~/logic/wallets/getWeb3'
 import { xs } from '~/theme/variables'
-import { networkSelector } from '~/logic/wallets/store/selectors'
 import SearchIcon from './search.svg'
 
 const styles = () => ({
@@ -26,17 +24,16 @@ const styles = () => ({
 type EtherscanBtnProps = {
   type: 'tx' | 'address',
   value: string,
-  currentNetwork: string,
   classes: Object,
 }
 
 const EtherscanBtn = ({
-  type, value, currentNetwork, classes,
+  type, value, classes,
 }: EtherscanBtnProps) => (
   <Tooltip title="Show details on Etherscan" placement="top">
     <a
       className={classes.container}
-      href={getEtherScanLink(type, value, currentNetwork)}
+      href={getEtherScanLink(type, value)}
       target="_blank"
       rel="noopener noreferrer"
       aria-label="Show details on Etherscan"
@@ -48,7 +45,4 @@ const EtherscanBtn = ({
 
 const EtherscanBtnWithStyles = withStyles(styles)(EtherscanBtn)
 
-export default connect<Object, Object, ?Function, ?Object>(
+export default EtherscanBtnWithStyles
-  (state) => ({ currentNetwork: networkSelector(state) }),
-  null,
-)(EtherscanBtnWithStyles)

src/components/EtherscanLink/index.jsx

@@ -1,11 +1,9 @@
 // @flow
 import React from 'react'
-import { connect } from 'react-redux'
 import OpenInNew from '@material-ui/icons/OpenInNew'
 import { getEtherScanLink } from '~/logic/wallets/getWeb3'
 import { shortVersionOf } from '~/logic/wallets/ethAddresses'
 import { secondary } from '~/theme/variables'
-import { networkSelector } from '~/logic/wallets/store/selectors'
 
 const openIconStyle = {
   height: '13px',
@@ -15,17 +13,13 @@ const openIconStyle = {
 type EtherscanLinkProps = {
   type: 'tx' | 'address',
   value: string,
-  currentNetwork: string,
 }
 
-const EtherscanLink = ({ type, value, currentNetwork }: EtherscanLinkProps) => (
+const EtherscanLink = ({ type, value }: EtherscanLinkProps) => (
-  <a href={getEtherScanLink(type, value, currentNetwork)} target="_blank" rel="noopener noreferrer">
+  <a href={getEtherScanLink(type, value)} target="_blank" rel="noopener noreferrer">
     {shortVersionOf(value, 4)}
     <OpenInNew style={openIconStyle} />
   </a>
 )
 
-export default connect<Object, Object, ?Function, ?Object>(
+export default EtherscanLink
-  (state) => ({ currentNetwork: networkSelector(state) }),
-  null,
-)(EtherscanLink)

src/components/Header/component/ProviderDetails/UserDetails.jsx

@@ -123,7 +123,7 @@ const UserDetails = ({
             {address}
           </Paragraph>
           {userAddress && (
-            <Link className={classes.open} to={getEtherScanLink('address', userAddress, network)} target="_blank">
+            <Link className={classes.open} to={getEtherScanLink('address', userAddress)} target="_blank">
               <OpenInNew style={openIconStyle} />
             </Link>
           )}

src/config/index.js

@@ -13,18 +13,17 @@ const configuration = () => {
   }
 
   if (process.env.NODE_ENV === 'production') {
-    if (process.env.NETWORK === 'mainnet') {
+    if (process.env.REACT_APP_NETWORK === 'mainnet') {
       return mainnetProdConfig
     }
 
     return prodConfig
   }
-  console.log(process.env)
 
   return devConfig
 }
 
-export const getNetwork = () => (process.env.NETWORK === 'mainnet' ? ETHEREUM_NETWORK.MAIN : ETHEREUM_NETWORK.RINKEBY)
+export const getNetwork = () => (process.env.REACT_APP_NETWORK === 'mainnet' ? ETHEREUM_NETWORK.MAIN : ETHEREUM_NETWORK.RINKEBY)
 
 const getConfig = ensureOnce(configuration)
 

src/logic/wallets/getWeb3.js

@@ -2,6 +2,7 @@
 import Web3 from 'web3'
 import ENS from 'ethereum-ens'
 import type { ProviderProps } from '~/logic/wallets/store/model/provider'
+import { getNetwork } from '~/config/index'
 
 export const ETHEREUM_NETWORK = {
   MAIN: 'MAIN',
@@ -33,7 +34,12 @@ export const ETHEREUM_NETWORK_IDS = {
   42: ETHEREUM_NETWORK.KOVAN,
 }
 
-export const getEtherScanLink = (type: 'address' | 'tx', value: string, network: string) => `https://${network.toLowerCase() === 'mainnet' ? '' : `${network.toLowerCase()}.`}etherscan.io/${type}/${value}`
+export const getEtherScanLink = (type: 'address' | 'tx', value: string) => {
+  const network = getNetwork()
+  return `https://${
+    network.toLowerCase() === 'mainnet' ? '' : `${network.toLowerCase()}.`
+  }etherscan.io/${type}/${value}`
+}
 
 let web3
 export const getWeb3 = () => web3 || (window.web3 && new Web3(window.web3.currentProvider)) || (window.ethereum && new Web3(window.ethereum))

src/routes/opening/component/index.jsx

@@ -39,7 +39,7 @@ const styles = {
 }
 
 const Opening = ({
-  classes, name = 'Safe creation process', tx, network,
+  classes, name = 'Safe creation process', tx,
 }: Props) => (
   <Page align="center">
     <Paragraph color="primary" size="xxl" weight="bold" align="center">
@@ -70,7 +70,7 @@ const Opening = ({
           Follow progress on
           {' '}
           <a
-            href={getEtherScanLink('tx', tx, network)}
+            href={getEtherScanLink('tx', tx)}
             target="_blank"
             rel="noopener noreferrer"
             className={classes.etherscan}

src/routes/safe/components/Layout.jsx

@@ -106,7 +106,7 @@ class Layout extends React.Component<Props, State> {
     }
 
     const { address, ethBalance, name } = safe
-    const etherScanLink = getEtherScanLink('address', address, network)
+    const etherScanLink = getEtherScanLink('address', address)
 
     return (
       <>

src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.jsx

@@ -26,7 +26,6 @@ type Props = {
   safeName: string,
   owners: List<Owner>,
   threshold: number,
-  network: string,
   addSafeOwner: Function,
   createTransaction: Function,
 }
@@ -58,7 +57,6 @@ const AddOwner = ({
   safeName,
   owners,
   threshold,
-  network,
   createTransaction,
   addSafeOwner,
 }: Props) => {
@@ -138,7 +136,6 @@ const AddOwner = ({
                     onClose={onClose}
                     safeName={safeName}
                     owners={owners}
-                    network={network}
                     values={values}
                     onClickBack={onClickBack}
                     onSubmit={onAddOwner}

src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.jsx

@@ -31,14 +31,13 @@ type Props = {
   classes: Object,
   safeName: string,
   owners: List<Owner>,
-  network: string,
   values: Object,
   onClickBack: Function,
   onSubmit: Function,
 }
 
 const ReviewAddOwner = ({
-  classes, onClose, safeName, owners, network, values, onClickBack, onSubmit,
+  classes, onClose, safeName, owners, values, onClickBack, onSubmit,
 }: Props) => {
   const handleSubmit = () => {
     onSubmit()
@@ -80,7 +79,6 @@ const ReviewAddOwner = ({
                   {values.threshold}
                   {' '}
                   out of
-                  {' '}
                   {owners.size + 1}
                   {' '}
                   owner(s)
@@ -112,7 +110,7 @@ const ReviewAddOwner = ({
                         <Paragraph size="md" color="disabled" noMargin>
                           {owner.address}
                         </Paragraph>
-                        <Link className={classes.open} to={getEtherScanLink('address', owner.address, network)} target="_blank">
+                        <Link className={classes.open} to={getEtherScanLink('address', owner.address)} target="_blank">
                           <OpenInNew style={openIconStyle} />
                         </Link>
                       </Block>
@@ -141,7 +139,11 @@ const ReviewAddOwner = ({
                     <Paragraph size="md" color="disabled" noMargin>
                       {values.ownerAddress}
                     </Paragraph>
-                    <Link className={classes.open} to={getEtherScanLink('address', values.ownerAddress, network)} target="_blank">
+                    <Link
+                      className={classes.open}
+                      to={getEtherScanLink('address', values.ownerAddress)}
+                      target="_blank"
+                    >
                       <OpenInNew style={openIconStyle} />
                     </Link>
                   </Block>

src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.jsx

@@ -34,7 +34,6 @@ type Props = {
   isOpen: boolean,
   safeAddress: string,
   ownerAddress: string,
-  network: string,
   selectedOwnerName: string,
   editSafeOwner: Function,
 }
@@ -47,7 +46,6 @@ const EditOwnerComponent = ({
   ownerAddress,
   selectedOwnerName,
   editSafeOwner,
-  network,
 }: Props) => {
   const handleSubmit = (values) => {
     editSafeOwner({ safeAddress, ownerAddress, ownerName: values.ownerName })
@@ -94,7 +92,7 @@ const EditOwnerComponent = ({
                   <Paragraph style={{ marginLeft: 10 }} size="md" color="disabled" noMargin>
                     {ownerAddress}
                   </Paragraph>
-                  <Link className={classes.open} to={getEtherScanLink('address', ownerAddress, network)} target="_blank">
+                  <Link className={classes.open} to={getEtherScanLink('address', ownerAddress)} target="_blank">
                     <OpenInNew style={openIconStyle} />
                   </Link>
                 </Block>

src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/index.jsx

@@ -28,7 +28,6 @@ type Props = {
   ownerName: string,
   owners: List<Owner>,
   threshold: number,
-  network: string,
   createTransaction: Function,
   removeSafeOwner: Function,
 }
@@ -71,7 +70,6 @@ const RemoveOwner = ({
   ownerName,
   owners,
   threshold,
-  network,
   createTransaction,
   removeSafeOwner,
 }: Props) => {
@@ -136,7 +134,6 @@ const RemoveOwner = ({
                     onClose={onClose}
                     ownerAddress={ownerAddress}
                     ownerName={ownerName}
-                    network={network}
                     onSubmit={ownerSubmitted}
                   />
                 )}
@@ -154,7 +151,6 @@ const RemoveOwner = ({
                     onClose={onClose}
                     safeName={safeName}
                     owners={owners}
-                    network={network}
                     values={values}
                     ownerAddress={ownerAddress}
                     ownerName={ownerName}

src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner/index.jsx

@@ -29,12 +29,11 @@ type Props = {
   classes: Object,
   ownerAddress: string,
   ownerName: string,
-  network: string,
   onSubmit: Function,
 }
 
 const CheckOwner = ({
-  classes, onClose, ownerAddress, ownerName, network, onSubmit,
+  classes, onClose, ownerAddress, ownerName, onSubmit,
 }: Props) => {
   const handleSubmit = (values) => {
     onSubmit(values)
@@ -69,7 +68,7 @@ const CheckOwner = ({
                 <Paragraph size="md" color="disabled" noMargin>
                   {ownerAddress}
                 </Paragraph>
-                <Link className={classes.open} to={getEtherScanLink('address', ownerAddress, network)} target="_blank">
+                <Link className={classes.open} to={getEtherScanLink('address', ownerAddress)} target="_blank">
                   <OpenInNew style={openIconStyle} />
                 </Link>
               </Block>

src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.jsx

@@ -31,7 +31,6 @@ type Props = {
   classes: Object,
   safeName: string,
   owners: List<Owner>,
-  network: string,
   values: Object,
   ownerAddress: string,
   ownerName: string,
@@ -44,7 +43,6 @@ const ReviewRemoveOwner = ({
   onClose,
   safeName,
   owners,
-  network,
   values,
   ownerAddress,
   ownerName,
@@ -91,10 +89,10 @@ const ReviewRemoveOwner = ({
                 <Paragraph size="lg" color="primary" noMargin weight="bolder" className={classes.name}>
                   {values.threshold}
                   {' '}
-out of
+                  out of
                   {owners.size - 1}
                   {' '}
-owner(s)
+                  owner(s)
                 </Paragraph>
               </Block>
             </Block>
@@ -104,7 +102,7 @@ owner(s)
               <Paragraph size="lg" color="primary" noMargin>
                 {owners.size - 1}
                 {' '}
-Safe owner(s)
+                Safe owner(s)
               </Paragraph>
             </Row>
             <Hairline />
@@ -126,7 +124,7 @@ Safe owner(s)
                           </Paragraph>
                           <Link
                             className={classes.open}
-                            to={getEtherScanLink('address', owner.address, network)}
+                            to={getEtherScanLink('address', owner.address)}
                             target="_blank"
                           >
                             <OpenInNew style={openIconStyle} />
@@ -160,7 +158,7 @@ Safe owner(s)
                     </Paragraph>
                     <Link
                       className={classes.open}
-                      to={getEtherScanLink('address', ownerAddress, network)}
+                      to={getEtherScanLink('address', ownerAddress)}
                       target="_blank"
                     >
                       <OpenInNew style={openIconStyle} />

src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.jsx

@@ -4,6 +4,7 @@ import { List } from 'immutable'
 import { withStyles } from '@material-ui/core/styles'
 import { SharedSnackbarConsumer } from '~/components/SharedSnackBar'
 import Modal from '~/components/Modal'
+import { type Owner } from '~/routes/safe/store/models/owner'
 import { getGnosisSafeInstanceAt, SENTINEL_ADDRESS } from '~/logic/contracts/safeContracts'
 import OwnerForm from './screens/OwnerForm'
 import ReviewReplaceOwner from './screens/Review'
@@ -25,7 +26,6 @@ type Props = {
   ownerAddress: string,
   ownerName: string,
   owners: List<Owner>,
-  network: string,
   threshold: string,
   createTransaction: Function,
   replaceSafeOwner: Function,
@@ -73,7 +73,6 @@ const ReplaceOwner = ({
   ownerAddress,
   ownerName,
   owners,
-  network,
   threshold,
   createTransaction,
   replaceSafeOwner,
@@ -136,7 +135,6 @@ const ReplaceOwner = ({
                     ownerAddress={ownerAddress}
                     ownerName={ownerName}
                     owners={owners}
-                    network={network}
                     onSubmit={ownerSubmitted}
                   />
                 )}
@@ -145,7 +143,6 @@ const ReplaceOwner = ({
                     onClose={onClose}
                     safeName={safeName}
                     owners={owners}
-                    network={network}
                     values={values}
                     ownerAddress={ownerAddress}
                     ownerName={ownerName}

src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/index.jsx

@@ -46,13 +46,12 @@ type Props = {
   classes: Object,
   ownerAddress: string,
   ownerName: string,
-  network: string,
   onSubmit: Function,
   owners: List<Owner>,
 }
 
 const OwnerForm = ({
-  classes, onClose, ownerAddress, ownerName, network, onSubmit, owners,
+  classes, onClose, ownerAddress, ownerName, onSubmit, owners,
 }: Props) => {
   const handleSubmit = (values) => {
     onSubmit(values)
@@ -102,7 +101,7 @@ const OwnerForm = ({
                         </Paragraph>
                         <Link
                           className={classes.open}
-                          to={getEtherScanLink('address', ownerAddress, network)}
+                          to={getEtherScanLink('address', ownerAddress)}
                           target="_blank"
                         >
                           <OpenInNew style={openIconStyle} />

src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.jsx

@@ -31,7 +31,6 @@ type Props = {
   classes: Object,
   safeName: string,
   owners: List<Owner>,
-  network: string,
   values: Object,
   ownerAddress: string,
   ownerName: string,
@@ -45,7 +44,6 @@ const ReviewRemoveOwner = ({
   onClose,
   safeName,
   owners,
-  network,
   values,
   ownerAddress,
   ownerName,
@@ -129,7 +127,7 @@ const ReviewRemoveOwner = ({
                           </Paragraph>
                           <Link
                             className={classes.open}
-                            to={getEtherScanLink('address', owner.address, network)}
+                            to={getEtherScanLink('address', owner.address)}
                             target="_blank"
                           >
                             <OpenInNew style={openIconStyle} />
@@ -161,7 +159,7 @@ const ReviewRemoveOwner = ({
                     <Paragraph size="md" color="disabled" noMargin>
                       {ownerAddress}
                     </Paragraph>
-                    <Link className={classes.open} to={getEtherScanLink('address', ownerAddress, network)} target="_blank">
+                    <Link className={classes.open} to={getEtherScanLink('address', ownerAddress)} target="_blank">
                       <OpenInNew style={openIconStyle} />
                     </Link>
                   </Block>
@@ -187,7 +185,7 @@ const ReviewRemoveOwner = ({
                     <Paragraph size="md" color="disabled" noMargin>
                       {values.ownerAddress}
                     </Paragraph>
-                    <Link className={classes.open} to={getEtherScanLink('address', values.ownerAddress, network)} target="_blank">
+                    <Link className={classes.open} to={getEtherScanLink('address', values.ownerAddress)} target="_blank">
                       <OpenInNew style={openIconStyle} />
                     </Link>
                   </Block>

src/routes/safe/components/Settings/ManageOwners/index.jsx

@@ -219,7 +219,6 @@ class ManageOwners extends React.Component<Props, State> {
           safeName={safeName}
           owners={owners}
           threshold={threshold}
-          network={network}
           userAddress={userAddress}
           createTransaction={createTransaction}
           addSafeOwner={addSafeOwner}
@@ -233,7 +232,6 @@ class ManageOwners extends React.Component<Props, State> {
           ownerName={selectedOwnerName}
           owners={owners}
           threshold={threshold}
-          network={network}
           userAddress={userAddress}
           createTransaction={createTransaction}
           removeSafeOwner={removeSafeOwner}
@@ -259,7 +257,6 @@ class ManageOwners extends React.Component<Props, State> {
           ownerAddress={selectedOwnerAddress}
           selectedOwnerName={selectedOwnerName}
           owners={owners}
-          network={network}
           editSafeOwner={editSafeOwner}
         />
       </>

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/List.jsx

@@ -41,7 +41,7 @@ const OwnerComponent = withStyles(styles)(({ owner, classes, isExecutor }: Owner
     <ListItemText
       primary={owner.name}
       secondary={(
-        <a href={getEtherScanLink('address', owner.address, 'rinkeby')} target="_blank" rel="noopener noreferrer">
+        <a href={getEtherScanLink('address', owner.address)} target="_blank" rel="noopener noreferrer">
           {shortVersionOf(owner.address, 4)}
           {' '}
           <OpenInNew style={openIconStyle} />

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.jsx

@@ -74,7 +74,7 @@ const ExpandedTx = ({
               <Paragraph noMargin>
                 <Bold>TX hash: </Bold>
                 {tx.executionTxHash ? (
-                  <a href={getEtherScanLink('tx', tx.executionTxHash, 'rinkeby')} target="_blank" rel="noopener noreferrer">
+                  <a href={getEtherScanLink('tx', tx.executionTxHash)} target="_blank" rel="noopener noreferrer">
                     {shortVersionOf(tx.executionTxHash, 4)}
                     <OpenInNew style={openIconStyle} />
                   </a>

src/routes/safe/components/Transactions/TxsTable/index.jsx

@@ -39,7 +39,6 @@ type Props = {
   safeAddress: string,
   createTransaction: Function,
   processTransaction: Function,
-  currentNetwork: string,
 }
 
 const TxsTable = ({
@@ -52,16 +51,15 @@ const TxsTable = ({
   safeAddress,
   createTransaction,
   processTransaction,
-  currentNetwork,
 }: Props) => {
   const [expandedTx, setExpandedTx] = useState<string | null>(null)
 
   const handleTxExpand = (safeTxHash) => {
-    setExpandedTx(prevTx => (prevTx === safeTxHash ? null : safeTxHash))
+    setExpandedTx((prevTx) => (prevTx === safeTxHash ? null : safeTxHash))
   }
 
   const columns = generateColumns()
-  const autoColumns = columns.filter(c => !c.custom)
+  const autoColumns = columns.filter((c) => !c.custom)
   const filteredData = getTxTableData(transactions)
 
   return (
@@ -118,7 +116,6 @@ const TxsTable = ({
                   threshold={threshold}
                   owners={owners}
                   granted={granted}
-                  currentNetwork={currentNetwork}
                   userAddress={userAddress}
                   createTransaction={createTransaction}
                   processTransaction={processTransaction}
@@ -127,8 +124,7 @@ const TxsTable = ({
               </TableCell>
             </TableRow>
           </React.Fragment>
-        ))
+        ))}
-        }
       </Table>
     </Block>
   )