update provider details

src/components/Header/component/Provider.jsx

@@ -38,21 +38,21 @@ const styles = () => ({
 type ProviderRef = { current: null | HTMLDivElement }
 
 class Provider extends React.Component<Props> {
+  myRef: ProviderRef
+
   constructor(props: Props) {
     super(props)
 
     this.myRef = React.createRef()
   }
 
-  myRef: ProviderRef
-
   render() {
     const {
       open, toggle, children, classes, info,
     } = this.props
 
     return (
-      <React.Fragment>
+      <>
         <div ref={this.myRef} className={classes.root}>
           <Col end="sm" middle="xs" className={classes.provider} onClick={toggle}>
             {info}
@@ -62,7 +62,7 @@ class Provider extends React.Component<Props> {
           </Col>
         </div>
         {children(this.myRef)}
-      </React.Fragment>
+      </>
     )
   }
 }

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

@@ -104,7 +104,7 @@ const UserDetails = ({
   provider, connected, network, userAddress, classes, onDisconnect,
 }: Props) => {
   const status = connected ? 'Connected' : 'Connection error'
-  const address = userAddress ? shortVersionOf(userAddress, 6) : 'Address not available'
+  const address = userAddress ? shortVersionOf(userAddress, 4) : 'Address not available'
   const identiconAddress = userAddress || 'random'
   const color = connected ? 'primary' : 'warning'
 
@@ -119,7 +119,7 @@ const UserDetails = ({
           )}
         </Row>
         <Block align="center" className={classes.user}>
-          <Paragraph className={classes.address} size="sm" noMargin>
+          <Paragraph className={classes.address} size="xs" noMargin>
             {address}
           </Paragraph>
           {userAddress && (

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

@@ -48,7 +48,7 @@ const ProviderInfo = ({
   provider, network, userAddress, connected, classes,
 }: Props) => {
   const providerText = `${provider} [${network}]`
-  const cutAddress = connected ? shortVersionOf(userAddress, 6) : 'Connection Error'
+  const cutAddress = connected ? shortVersionOf(userAddress, 4) : 'Connection Error'
   const color = connected ? 'primary' : 'warning'
   const identiconAddress = userAddress || 'random'
 
@@ -62,10 +62,10 @@ const ProviderInfo = ({
       )}
       {!connected && <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">
+        <Paragraph size="xs" transform="capitalize" className={classes.network} noMargin weight="bolder">
           {providerText}
         </Paragraph>
-        <Paragraph size="sm" className={classes.address} noMargin color={color}>
+        <Paragraph size="xs" className={classes.address} noMargin color={color}>
           {cutAddress}
         </Paragraph>
       </Col>

src/components/layout/Paragraph/index.jsx

@@ -10,7 +10,7 @@ type Props = {
   noMargin?: boolean,
   noPadding?: boolean,
   weight?: 'light' | 'regular' | 'bolder' | 'bold',
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl',
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl',
   color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary' | 'secondary' | 'warning' | 'disabled' | 'error',
   transform?: 'capitalize' | 'lowercase' | 'uppercase',
   children: React.Node,

src/components/layout/Paragraph/index.scss

@@ -72,6 +72,10 @@
   text-align: right;
 }
 
+.xs {
+  font-size: $extraSmallFontSize;
+}
+
 .sm {
   font-size: $smallFontSize;
 }