Add etherscan/copy buttons to remove owner flow

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

@@ -4,26 +4,19 @@ import classNames from 'classnames/bind'
 import { withStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import IconButton from '@material-ui/core/IconButton'
-import OpenInNew from '@material-ui/icons/OpenInNew'
 import Paragraph from '~/components/layout/Paragraph'
 import Row from '~/components/layout/Row'
 import Col from '~/components/layout/Col'
 import Button from '~/components/layout/Button'
 import Block from '~/components/layout/Block'
 import Hairline from '~/components/layout/Hairline'
-import Link from '~/components/layout/Link'
+import EtherscanBtn from '~/components/EtherscanBtn'
+import CopyBtn from '~/components/CopyBtn'
 import Identicon from '~/components/Identicon'
-import { getEtherScanLink } from '~/logic/wallets/getWeb3'
 import { styles } from './style'
-import { secondary } from '~/theme/variables'
 
 export const REMOVE_OWNER_MODAL_NEXT_BTN_TEST_ID = 'remove-owner-next-btn'
 
-const openIconStyle = {
-  height: '16px',
-  color: secondary,
-}
-
 type Props = {
   onClose: () => void,
   classes: Object,
@@ -65,12 +58,11 @@ const CheckOwner = ({
                 {ownerName}
               </Paragraph>
               <Block justify="center" className={classes.user}>
-                <Paragraph size="md" color="disabled" noMargin>
+                <Paragraph size="md" color="disabled" className={classes.address} noMargin>
                   {ownerAddress}
                 </Paragraph>
-                <Link className={classes.open} to={getEtherScanLink('address', ownerAddress)} target="_blank">
-                  <OpenInNew style={openIconStyle} />
-                </Link>
+                <CopyBtn content={ownerAddress} />
+                <EtherscanBtn type="address" value={ownerAddress} />
               </Block>
             </Block>
           </Col>

src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner/style.js

@@ -19,6 +19,9 @@ export const styles = () => ({
   manage: {
     fontSize: '24px',
   },
+  address: {
+    marginRight: sm,
+  },
   closeIcon: {
     height: '35px',
     width: '35px',

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

@@ -3,11 +3,11 @@ import React from 'react'
 import { List } from 'immutable'
 import classNames from 'classnames'
 import { withStyles } from '@material-ui/core/styles'
-import OpenInNew from '@material-ui/icons/OpenInNew'
 import Close from '@material-ui/icons/Close'
 import IconButton from '@material-ui/core/IconButton'
+import EtherscanBtn from '~/components/EtherscanBtn'
+import CopyBtn from '~/components/CopyBtn'
 import Identicon from '~/components/Identicon'
-import Link from '~/components/layout/Link'
 import Paragraph from '~/components/layout/Paragraph'
 import Row from '~/components/layout/Row'
 import Col from '~/components/layout/Col'
@@ -15,17 +15,10 @@ import Button from '~/components/layout/Button'
 import Block from '~/components/layout/Block'
 import Hairline from '~/components/layout/Hairline'
 import type { Owner } from '~/routes/safe/store/models/owner'
-import { getEtherScanLink } from '~/logic/wallets/getWeb3'
-import { secondary } from '~/theme/variables'
 import { styles } from './style'
 
 export const REMOVE_OWNER_REVIEW_BTN_TEST_ID = 'remove-owner-review-btn'
 
-const openIconStyle = {
-  height: '16px',
-  color: secondary,
-}
-
 type Props = {
   onClose: () => void,
   classes: Object,
@@ -95,9 +88,7 @@ const ReviewRemoveOwner = ({
           <Col xs={8} layout="column" className={classes.owners}>
             <Row className={classes.ownersTitle}>
               <Paragraph size="lg" color="primary" noMargin>
-                {owners.size - 1}
-                {' '}
-                Safe owner(s)
+                {`${owners.size - 1} Safe owner(s)`}
               </Paragraph>
             </Row>
             <Hairline />
@@ -114,16 +105,11 @@ const ReviewRemoveOwner = ({
                           {owner.name}
                         </Paragraph>
                         <Block justify="center" className={classes.user}>
-                          <Paragraph size="md" color="disabled" noMargin>
+                          <Paragraph size="md" color="disabled" className={classes.address} noMargin>
                             {owner.address}
                           </Paragraph>
-                          <Link
-                            className={classes.open}
-                            to={getEtherScanLink('address', owner.address)}
-                            target="_blank"
-                          >
-                            <OpenInNew style={openIconStyle} />
-                          </Link>
+                          <CopyBtn content={owner.address} />
+                          <EtherscanBtn type="address" value={owner.address} />
                         </Block>
                       </Block>
                     </Col>
@@ -148,16 +134,11 @@ const ReviewRemoveOwner = ({
                     {ownerName}
                   </Paragraph>
                   <Block justify="center" className={classes.user}>
-                    <Paragraph size="md" color="disabled" noMargin>
+                    <Paragraph size="md" color="disabled" className={classes.address} noMargin>
                       {ownerAddress}
                     </Paragraph>
-                    <Link
-                      className={classes.open}
-                      to={getEtherScanLink('address', ownerAddress)}
-                      target="_blank"
-                    >
-                      <OpenInNew style={openIconStyle} />
-                    </Link>
+                    <CopyBtn content={ownerAddress} />
+                    <EtherscanBtn type="address" value={ownerAddress} />
                   </Block>
                 </Block>
               </Col>

src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.js

@@ -49,6 +49,9 @@ export const styles = () => ({
   ownersTitle: {
     padding: lg,
   },
+  address: {
+    marginRight: sm,
+  },
   owner: {
     padding: sm,
     alignItems: 'center',