Add etherscan/copy buttons to custom txs flow

src/routes/safe/components/Balances/SendModal/index.jsx

@@ -24,7 +24,6 @@ type Props = {
   classes: Object,
   isOpen: boolean,
   safeAddress: string,
-  etherScanLink: string,
   safeName: string,
   ethBalance: string,
   tokens: List<Token>,
@@ -65,7 +64,6 @@ const Send = ({
   isOpen,
   classes,
   safeAddress,
-  etherScanLink,
   safeName,
   ethBalance,
   tokens,
@@ -148,7 +146,6 @@ const Send = ({
             onClose={onClose}
             setActiveScreen={setActiveScreen}
             safeAddress={safeAddress}
-            etherScanLink={etherScanLink}
             safeName={safeName}
             ethBalance={ethBalance}
             createTransaction={createTransaction}

src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx

@@ -1,20 +1,19 @@
 // @flow
 import React, { useState, useEffect } from 'react'
-import OpenInNew from '@material-ui/icons/OpenInNew'
 import { withStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import IconButton from '@material-ui/core/IconButton'
 import { withSnackbar } from 'notistack'
 import Paragraph from '~/components/layout/Paragraph'
 import Row from '~/components/layout/Row'
-import Link from '~/components/layout/Link'
 import Col from '~/components/layout/Col'
 import Button from '~/components/layout/Button'
 import Img from '~/components/layout/Img'
 import Block from '~/components/layout/Block'
 import Identicon from '~/components/Identicon'
 import Hairline from '~/components/layout/Hairline'
-import { copyToClipboard } from '~/utils/clipboard'
+import EtherscanBtn from '~/components/EtherscanBtn'
+import CopyBtn from '~/components/CopyBtn'
 import SafeInfo from '~/routes/safe/components/Balances/SendModal/SafeInfo'
 import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils'
 import { estimateApprovalTxGasCosts } from '~/logic/safe/transactions/gasNew'
@@ -23,7 +22,6 @@ import { TX_NOTIFICATION_TYPES } from '~/logic/safe/transactions'
 import { getEthAsToken } from '~/logic/tokens/utils/tokenHelpers'
 import { formatAmount } from '~/logic/tokens/utils/formatAmount'
 import ArrowDown from '../assets/arrow-down.svg'
-import { secondary } from '~/theme/variables'
 import { styles } from './style'
 
 type Props = {
@@ -31,7 +29,6 @@ type Props = {
   setActiveScreen: Function,
   classes: Object,
   safeAddress: string,
-  etherScanLink: string,
   safeName: string,
   ethBalance: string,
   tx: Object,
@@ -40,17 +37,11 @@ type Props = {
   closeSnackbar: Function,
 }
 
-const openIconStyle = {
-  height: '16px',
-  color: secondary,
-}
-
 const ReviewCustomTx = ({
   onClose,
   setActiveScreen,
   classes,
   safeAddress,
-  etherScanLink,
   safeName,
   ethBalance,
   tx,
@@ -112,12 +103,7 @@ const ReviewCustomTx = ({
       </Row>
       <Hairline />
       <Block className={classes.container}>
-        <SafeInfo
-          safeAddress={safeAddress}
-          etherScanLink={etherScanLink}
-          safeName={safeName}
-          ethBalance={ethBalance}
-        />
+        <SafeInfo safeAddress={safeAddress} safeName={safeName} ethBalance={ethBalance} />
         <Row margin="md">
           <Col xs={1}>
             <img src={ArrowDown} alt="Arrow Down" style={{ marginLeft: '8px' }} />
@@ -136,12 +122,13 @@ const ReviewCustomTx = ({
             <Identicon address={tx.recipientAddress} diameter={32} />
           </Col>
           <Col xs={11} layout="column">
-            <Paragraph weight="bolder" onClick={copyToClipboard} noMargin>
-              {tx.recipientAddress}
-              <Link to={etherScanLink} target="_blank">
-                <OpenInNew style={openIconStyle} />
-              </Link>
-            </Paragraph>
+            <Block justify="left">
+              <Paragraph weight="bolder" className={classes.address} noMargin>
+                {tx.recipientAddress}
+              </Paragraph>
+              <CopyBtn content={tx.recipientAddress} />
+              <EtherscanBtn type="address" value={tx.recipientAddress} />
+            </Block>
           </Col>
         </Row>
         <Row margin="xs">
@@ -195,5 +182,4 @@ const ReviewCustomTx = ({
   )
 }
 
-
 export default withStyles(styles)(withSnackbar(ReviewCustomTx))

src/routes/safe/components/Balances/index.jsx

@@ -43,7 +43,6 @@ type Props = {
   activeTokens: List<Token>,
   safeAddress: string,
   safeName: string,
-  etherScanLink: string,
   ethBalance: string,
   createTransaction: Function,
 }
@@ -107,7 +106,6 @@ class Balances extends React.Component<Props, State> {
       safeAddress,
       activeTokens,
       safeName,
-      etherScanLink,
       ethBalance,
       createTransaction,
     } = this.props
@@ -201,7 +199,6 @@ class Balances extends React.Component<Props, State> {
         <SendModal
           onClose={this.hideSendFunds}
           isOpen={sendFunds.isOpen}
-          etherScanLink={etherScanLink}
           safeAddress={safeAddress}
           safeName={safeName}
           ethBalance={ethBalance}

src/routes/safe/components/Layout.jsx

@@ -4,7 +4,6 @@ import classNames from 'classnames/bind'
 import {
   Switch, Redirect, Route, withRouter,
 } from 'react-router-dom'
-import OpenInNew from '@material-ui/icons/OpenInNew'
 import Tabs from '@material-ui/core/Tabs'
 import Tab from '@material-ui/core/Tab'
 import CallMade from '@material-ui/icons/CallMade'
@@ -25,7 +24,7 @@ import Receive from './Balances/Receive'
 import NoSafe from '~/components/NoSafe'
 import { type SelectorProps } from '~/routes/safe/container/selector'
 import { getEtherScanLink } from '~/logic/wallets/getWeb3'
-import { secondary, border } from '~/theme/variables'
+import { border } from '~/theme/variables'
 import { type Actions } from '../container/actions'
 import Balances from './Balances'
 import Transactions from './Transactions'
@@ -52,11 +51,6 @@ type Props = SelectorProps &
     history: Object,
   }
 
-const openIconStyle = {
-  height: '16px',
-  color: secondary,
-}
-
 const Layout = (props: Props) => {
   const {
     safe,
@@ -165,7 +159,6 @@ const Layout = (props: Props) => {
               granted={granted}
               safeAddress={address}
               safeName={name}
-              etherScanLink={etherScanLink}
               createTransaction={createTransaction}
             />
           )}
@@ -211,7 +204,6 @@ const Layout = (props: Props) => {
       <SendModal
         onClose={hideSendFunds}
         isOpen={sendFunds.isOpen}
-        etherScanLink={etherScanLink}
         safeAddress={address}
         safeName={name}
         ethBalance={ethBalance}