Refactor getEtherscanLink

This commit is contained in:
mmv 2019-09-24 17:20:48 +04:00
parent e7383adc44
commit 365f4cdfb0
22 changed files with 67 additions and 97 deletions

View File

@ -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
.keys(process.env)
.filter(key => REACT_APP.test(key))
.reduce((env, key) => {
env[key] = JSON.stringify(process.env[key]);
return env;
}, {
// Useful for determining whether were running in production mode.
// Most importantly, it switches React into the correct mode.
'NODE_ENV': JSON.stringify(
process.env.NODE_ENV || 'development'
),
// Useful for resolving the correct path to static assets in `public`.
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// 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.
'PUBLIC_URL': JSON.stringify(publicUrl)
});
return {'process.env': processEnv};
const processEnv = Object.keys(process.env)
.filter((key) => REACT_APP.test(key))
.reduce(
(env, key) => {
env[key] = JSON.stringify(process.env[key])
return env
},
{
// Useful for determining whether were running in production mode.
// Most importantly, it switches React into the correct mode.
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
// Useful for resolving the correct path to static assets in `public`.
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// 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.
PUBLIC_URL: JSON.stringify(publicUrl),
},
)
return { 'process.env': processEnv }
}
module.exports = getClientEnvironment;
module.exports = getClientEnvironment

View File

@ -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

View File

@ -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>(
(state) => ({ currentNetwork: networkSelector(state) }),
null,
)(EtherscanBtnWithStyles)
export default EtherscanBtnWithStyles

View File

@ -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) => (
<a href={getEtherScanLink(type, value, currentNetwork)} target="_blank" rel="noopener noreferrer">
const EtherscanLink = ({ type, value }: EtherscanLinkProps) => (
<a href={getEtherScanLink(type, value)} target="_blank" rel="noopener noreferrer">
{shortVersionOf(value, 4)}
<OpenInNew style={openIconStyle} />
</a>
)
export default connect<Object, Object, ?Function, ?Object>(
(state) => ({ currentNetwork: networkSelector(state) }),
null,
)(EtherscanLink)
export default EtherscanLink

View File

@ -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>
)}

View File

@ -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)

View File

@ -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))

View File

@ -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}

View File

@ -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 (
<>

View File

@ -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}

View File

@ -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>

View File

@ -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>

View File

@ -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}

View File

@ -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>

View File

@ -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} />

View File

@ -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}

View File

@ -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} />

View File

@ -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>

View File

@ -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}
/>
</>

View File

@ -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} />

View File

@ -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>

View File

@ -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>
)