Connected wallet

src/components/Header/components/ProviderDetails/UserDetails.tsx

@@ -2,11 +2,11 @@ import { withStyles } from '@material-ui/core/styles'
 import Dot from '@material-ui/icons/FiberManualRecord'
 import classNames from 'classnames'
 import * as React from 'react'
+import { Identicon } from '@gnosis.pm/safe-react-components'
 
 import CopyBtn from 'src/components/CopyBtn'
 import EtherscanBtn from 'src/components/EtherscanBtn'
 import CircleDot from 'src/components/Header/components/CircleDot'
-import Identicon from 'src/components/Identicon'
 import Spacer from 'src/components/Spacer'
 import Block from 'src/components/layout/Block'
 import Button from 'src/components/layout/Button'
@@ -102,7 +102,7 @@ const UserDetails = ({ classes, connected, network, onDisconnect, openDashboard,
       <Block className={classes.container}>
         <Row align="center" className={classes.identicon} margin="md">
           {connected ? (
-            <Identicon address={identiconAddress} diameter={60} />
+            <Identicon address={identiconAddress} size="lg" />
           ) : (
             <CircleDot circleSize={75} dotRight={25} dotSize={25} dotTop={50} hideDot keySize={30} mode="warning" />
           )}

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

@@ -1,15 +1,25 @@
 import { makeStyles } from '@material-ui/core/styles'
 import * as React from 'react'
+import { AddressInfo, Identicon, Text } from '@gnosis.pm/safe-react-components'
+import styled from 'styled-components'
 
 import NetworkLabel from '../NetworkLabel'
 import CircleDot from 'src/components/Header/components/CircleDot'
-import Identicon from 'src/components/Identicon'
 import Col from 'src/components/layout/Col'
 import Paragraph from 'src/components/layout/Paragraph'
-import { shortVersionOf } from 'src/logic/wallets/ethAddresses'
 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',
@@ -69,10 +79,7 @@ interface ProviderInfoProps {
 
 const ProviderInfo = ({ connected, provider, userAddress, network }: ProviderInfoProps): React.ReactElement => {
   const classes = useStyles()
-  const cutAddress = connected ? shortVersionOf(userAddress, 4) : 'Connection Error'
-  const color = connected ? 'primary' : 'warning'
-  const identiconAddress = userAddress || 'random'
-
+  const addressColor = connected ? 'text' : 'warning'
   return (
     <>
       {!connected && <CircleDot circleSize={35} dotRight={11} dotSize={16} dotTop={24} keySize={14} mode="warning" />}
@@ -89,10 +96,20 @@ const ProviderInfo = ({ connected, provider, userAddress, network }: ProviderInf
           {provider}
         </Paragraph>
         <div className={classes.providerContainer}>
-          {connected && <Identicon address={identiconAddress} className={classes.identicon} diameter={10} />}
-          <Paragraph className={classes.address} color={color} noMargin size="xs">
+          {connected ? (
+            <AddressWrapper>
+              <Identicon address={userAddress || 'random'} size="xs" />
+              <AddressInfo address={userAddress} shortenAddress={4} textColor={addressColor} textSize="sm" />
+            </AddressWrapper>
+          ) : (
+            <Text size="md" color={addressColor}>
+              Connection Error
+            </Text>
+          )}
+
+          {/* <Paragraph className={classes.address} color={color} noMargin size="xs">
             {cutAddress}
-          </Paragraph>
+          </Paragraph> */}
         </div>
       </Col>
       <Col className={classes.networkLabel} layout="column" start="sm">