Adding hideDot option in CircleDot component

src/components/Header/component/CircleDot.jsx

@@ -7,7 +7,7 @@ import Img from '~/components/layout/Img'
 import { fancy, border, warning } from '~/theme/variables'
 
 const key = require('../assets/key.svg')
-const triangle = require('../assets/key.svg')
+const triangle = require('../assets/triangle.svg')
 
 const styles = () => ({
   root: {
@@ -24,6 +24,10 @@ const styles = () => ({
     justifyContent: 'center',
     backgroundColor: border,
   },
+  warning: {
+    position: 'relative',
+    top: '-2px',
+  },
 })
 
 type Mode = 'error' | 'warning'
@@ -35,8 +39,9 @@ type Props = {
   dotSize: number,
   dotTop: number,
   dotRight: number,
-  center?: boolean,
   mode: Mode,
+  center?: boolean,
+  hideDot?: boolean,
 }
 
 const buildKeyStyleFrom = (size: number, center: boolean, dotSize: number) => ({
@@ -56,19 +61,26 @@ const buildDotStyleFrom = (size: number, top: number, right: number, mode: Mode)
 })
 
 const KeyRing = ({
-  classes, circleSize, keySize, dotSize, dotTop, dotRight, mode, center = false,
+  classes, circleSize, keySize, dotSize, dotTop, dotRight, mode, center = false, hideDot = false,
 }: Props) => {
   const keyStyle = buildKeyStyleFrom(circleSize, center, dotSize)
   const dotStyle = buildDotStyleFrom(dotSize, dotTop, dotRight, mode)
-  const img = mode === warning ? triangle : key
+  const isWarning = mode === 'warning'
+  const img = isWarning ? triangle : key
 
   return (
     <React.Fragment>
       <Block className={classes.root}>
         <Block className={classes.key} style={keyStyle}>
-          <Img src={img} height={keySize} alt="Status disconnected" />
+          <Img
+            src={img}
+            height={keySize}
+            width={isWarning ? keySize + 2 : keySize}
+            alt="Status connection"
+            className={isWarning ? classes.warning : undefined}
+          />
         </Block>
-        <Dot className={classes.dot} style={dotStyle} />
+        { !hideDot && <Dot className={classes.dot} style={dotStyle} /> }
       </Block>
     </React.Fragment>
   )

src/components/Header/component/ProviderInfo/UserDetails.jsx

@@ -15,6 +15,7 @@ import { xs, sm, md, lg, background, secondary } from '~/theme/variables'
 import { upperFirst } from '~/utils/css'
 import { shortVersionOf } from '~/logic/wallets/ethAddresses'
 import { openAddressInEtherScan } from '~/logic/wallets/getWeb3'
+import CircleDot from '~/components/Header/component/CircleDot'
 
 const metamask = require('../../assets/metamask.svg')
 const connectedLogo = require('../../assets/connected.svg')
@@ -92,7 +93,10 @@ const UserDetails = ({
     <React.Fragment>
       <Block className={classes.container}>
         <Row className={classes.identicon} margin="md" align="center">
-          <Identicon address={identiconAddress} diameter={60} />
+          { connected
+            ? <Identicon address={identiconAddress} diameter={60} />
+            : <CircleDot keySize={30} circleSize={75} dotSize={25} dotTop={50} dotRight={25} mode="warning" hideDot />
+          }
         </Row>
         <Block align="center" className={classes.user}>
           <Paragraph className={classes.address} size="sm" noMargin>{address}</Paragraph>

src/components/Header/component/ProviderInfo/index.jsx

@@ -64,7 +64,7 @@ const ProviderInfo = ({
         </React.Fragment>
       }
       { !connected &&
-        <CircleDot keySize={17} circleSize={35} dotSize={16} dotTop={24} dotRight={11} mode="warning" />
+        <CircleDot keySize={14} circleSize={35} dotSize={16} dotTop={24} dotRight={11} mode="warning" />
       }
       <Col start="sm" layout="column" className={classes.account}>
         <Paragraph size="sm" transform="capitalize" className={classes.network} noMargin weight="bolder">{providerText}</Paragraph>