review fixes

package.json

@@ -160,7 +160,7 @@
   },
   "dependencies": {
     "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
-    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#2b4635b",
+    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#e163ab6",
     "@gnosis.pm/util-contracts": "2.0.6",
     "@ledgerhq/hw-transport-node-hid": "5.19.1",
     "@material-ui/core": "4.11.0",

src/components/Header/components/ProviderInfo/ProviderAccessible.tsx

@@ -1,7 +1,6 @@
 import { makeStyles } from '@material-ui/core/styles'
 import * as React from 'react'
-import { AddressInfo, Identicon, Text } from '@gnosis.pm/safe-react-components'
+import { AddressInfo, Text } from '@gnosis.pm/safe-react-components'
-import styled from 'styled-components'
 
 import NetworkLabel from '../NetworkLabel'
 import CircleDot from 'src/components/Header/components/CircleDot'
@@ -10,16 +9,6 @@ import Paragraph from 'src/components/layout/Paragraph'
 import WalletIcon from '../WalletIcon'
 import { connected as connectedBg, screenSm, sm } from 'src/theme/variables'
 
-const AddressWrapper = styled.div`
-  display: flex;
-  align-items: center;
-
-  > div {
-    margin-left: 5px;
-    margin-top: 2px;
-  }
-`
-
 const useStyles = makeStyles({
   network: {
     fontFamily: 'Averta, sans-serif',
@@ -97,16 +86,15 @@ const ProviderInfo = ({ connected, provider, userAddress, network }: ProviderInf
         </Paragraph>
         <div className={classes.providerContainer}>
           {connected ? (
-            <AddressWrapper>
-              <Identicon address={userAddress || 'random'} size="xs" />
             <AddressInfo
               address={userAddress}
               shortenAddress={4}
+              showIdenticon
+              identiconSize="xs"
               textColor={addressColor}
               textSize="sm"
               network={network}
             />
-            </AddressWrapper>
           ) : (
             <Text size="md" color={addressColor}>
               Connection Error

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/CreationTx/index.tsx

@@ -1,10 +1,11 @@
 import { makeStyles } from '@material-ui/core/styles'
 import React from 'react'
+import { AddressInfo } from '@gnosis.pm/safe-react-components'
+import { getNetwork } from 'src/config'
 
 import { formatDate } from 'src/routes/safe/components/Transactions/TxsTable/columns'
 import Bold from 'src/components/layout/Bold'
 import Paragraph from 'src/components/layout/Paragraph'
-import EtherscanLink from 'src/components/EtherscanLink'
 import Block from 'src/components/layout/Block'
 import { TransactionTypes } from 'src/routes/safe/store/models/types/transaction'
 
@@ -39,15 +40,33 @@ export const CreationTx = ({ tx }) => {
       </Paragraph>
       <Block align="left" className={classes.txData}>
         <Bold className={classes.txHash}>Creator:</Bold>
-        {tx.creator ? <EtherscanLink cut={8} type="address" value={tx.creator} /> : 'n/a'}
+        {tx.creator ? (
+          <AddressInfo address={tx.creator} shortenAddress={4} showCopyBtn showEtherscanBtn network={getNetwork()} />
+        ) : (
+          'n/a'
+        )}
       </Block>
       <Block align="left" className={classes.txData}>
         <Bold className={classes.txHash}>Factory:</Bold>
-        {tx.factoryAddress ? <EtherscanLink cut={8} type="address" value={tx.factoryAddress} /> : 'n/a'}
+        {tx.factoryAddress ? (
+          <AddressInfo
+            address={tx.factoryAddress}
+            shortenAddress={4}
+            showCopyBtn
+            showEtherscanBtn
+            network={getNetwork()}
+          />
+        ) : (
+          'n/a'
+        )}
       </Block>
       <Block align="left" className={classes.txData}>
         <Bold className={classes.txHash}>Mastercopy:</Bold>
-        {tx.masterCopy ? <EtherscanLink cut={8} type="address" value={tx.masterCopy} /> : 'n/a'}
+        {tx.masterCopy ? (
+          <AddressInfo address={tx.masterCopy} shortenAddress={4} showCopyBtn showEtherscanBtn network={getNetwork()} />
+        ) : (
+          'n/a'
+        )}
       </Block>
     </>
   ) : null

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/OwnerComponent.tsx

@@ -2,6 +2,8 @@ import { withStyles } from '@material-ui/core/styles'
 import cn from 'classnames'
 import React from 'react'
 import { useSelector } from 'react-redux'
+import { AddressInfo } from '@gnosis.pm/safe-react-components'
+import { getNetwork } from 'src/config'
 
 import CancelSmallFilledCircle from './assets/cancel-small-filled.svg'
 import ConfirmSmallFilledCircle from './assets/confirm-small-filled.svg'
@@ -11,12 +13,9 @@ import ConfirmSmallRedCircle from './assets/confirm-small-red.svg'
 import PendingSmallYellowCircle from './assets/confirm-small-yellow.svg'
 import { styles } from './style'
 
-import EtherscanLink from 'src/components/EtherscanLink'
-import Identicon from 'src/components/Identicon'
 import Block from 'src/components/layout/Block'
 import Button from 'src/components/layout/Button'
 import Img from 'src/components/layout/Img'
-import Paragraph from 'src/components/layout/Paragraph'
 import { getNameFromAddressBook } from 'src/logic/addressBook/store/selectors'
 
 export const CONFIRM_TX_BTN_TEST_ID = 'confirm-btn'
@@ -153,13 +152,15 @@ const OwnerComponent = ({
       <div className={classes.circleState}>
         <Img alt="" src={imgCircle} />
       </div>
-      <Identicon address={owner} className={classes.icon} diameter={32} />
+      <AddressInfo
-      <Block>
+        address={owner}
-        <Paragraph className={classes.name} noMargin>
+        name={nameInAdbk}
-          {nameInAdbk}
+        shortenAddress={4}
-        </Paragraph>
+        showIdenticon
-        <EtherscanLink className={classes.address} cut={4} type="address" value={owner} />
+        showCopyBtn
-      </Block>
+        showEtherscanBtn
+        network={getNetwork()}
+      />
       <Block className={classes.spacer} />
       {owner === userAddress && <Block>{isCancelTx ? rejectButton() : confirmButton()}</Block>}
       {owner === executor && <Block className={classes.executor}>Executor</Block>}

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

@@ -58,7 +58,7 @@ const ExpandedTx = ({ cancelTx, tx }) => {
         <Row>
           <Col layout="column" xs={6}>
             <Block className={cn(classes.txDataContainer, (isIncomingTx || isCreationTx) && classes.incomingTxBlock)}>
-              <Block align="left" className={classes.txData}>
+              <div style={{ display: 'flex' }}>
                 <Bold className={classes.txHash}>Hash:</Bold>
                 {tx.executionTxHash ? (
                   <AddressInfo
@@ -71,7 +71,7 @@ const ExpandedTx = ({ cancelTx, tx }) => {
                 ) : (
                   'n/a'
                 )}
-              </Block>
+              </div>
               {!isIncomingTx && !isCreationTx && (
                 <Paragraph noMargin>
                   <Bold>Nonce: </Bold>

yarn.lock

@@ -1337,9 +1337,9 @@
     solc "0.5.14"
     truffle "^5.1.21"
 
-"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#2b4635b":
+"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#e163ab6":
   version "0.2.0"
-  resolved "https://github.com/gnosis/safe-react-components.git#2b4635b22bebfca0260486f1ae7a9a35b02d71c2"
+  resolved "https://github.com/gnosis/safe-react-components.git#e163ab6375ad384a39411104b6486c18a4238f27"
   dependencies:
     classnames "^2.2.6"
     polished "3.6.5"