Refactor Header Provider Info & Details

src/components/Header/component/Layout.stories.js

@@ -3,10 +3,10 @@ import { storiesOf } from '@storybook/react'
 import * as React from 'react'
 import styles from '~/components/layout/PageFrame/index.scss'
 import Layout from './Layout'
-import ProviderInfo from './ProviderInfo'
-import ProviderDetails from './ProviderInfo/UserDetails'
-import ProviderDisconnected from './ProviderDisconnected'
-import ConnectDetails from './ProviderDisconnected/ConnectDetails'
+import ProviderAccesible from './ProviderInfo/ProviderAccesible'
+import UserDetails from './ProviderDetails/UserDetails'
+import ProviderDisconnected from './ProviderInfo/ProviderDisconnected'
+import ConnectDetails from './ProviderDetails/ConnectDetails'
 
 const FrameDecorator = story => (
   <div className={styles.frame}>
@@ -20,8 +20,8 @@ storiesOf('Components /Header', module)
     const provider = 'Metamask'
     const userAddress = '0x873faa4cddd5b157e8e5a57e7a5479afc5d30moe'
     const network = 'RINKEBY'
-    const info = <ProviderInfo provider={provider} network={network} userAddress={userAddress} connected />
-    const details = <ProviderDetails provider={provider} network={network} userAddress={userAddress} connected />
+    const info = <ProviderAccesible provider={provider} network={network} userAddress={userAddress} connected />
+    const details = <UserDetails provider={provider} network={network} userAddress={userAddress} connected />
 
     return <Layout providerInfo={info} providerDetails={details} />
   })
@@ -35,8 +35,8 @@ storiesOf('Components /Header', module)
     const provider = 'Metamask'
     const userAddress = '0x873faa4cddd5b157e8e5a57e7a5479afc5d30moe'
     const network = 'RINKEBY'
-    const info = <ProviderInfo provider={provider} network={network} userAddress={userAddress} connected={false} />
-    const details = (<ProviderDetails
+    const info = <ProviderAccesible provider={provider} network={network} userAddress={userAddress} connected={false} />
+    const details = (<UserDetails
       provider={provider}
       network={network}
       userAddress={userAddress}

src/components/Header/index.jsx

@@ -4,10 +4,10 @@ import { connect } from 'react-redux'
 import { logComponentStack, type Info } from '~/utils/logBoundaries'
 import { SharedSnackbarConsumer, type Variant } from '~/components/SharedSnackBar/Context'
 import { WALLET_ERROR_MSG } from '~/logic/wallets/store/actions'
-import ProviderInfo from './component/ProviderInfo'
-import ProviderDetails from './component/ProviderInfo/UserDetails'
-import ProviderDisconnected from './component/ProviderDisconnected'
-import ConnectDetails from './component/ProviderDisconnected/ConnectDetails'
+import ProviderAccesible from './component/ProviderInfo/ProviderAccesible'
+import UserDetails from './component/ProviderDetails/UserDetails'
+import ProviderDisconnected from './component/ProviderInfo/ProviderDisconnected'
+import ConnectDetails from './component/ProviderDetails/ConnectDetails'
 import Layout from './component/Layout'
 import actions, { type Actions } from './actions'
 import selector, { type SelectorProps } from './selector'
@@ -54,7 +54,7 @@ class HeaderComponent extends React.PureComponent<Props, State> {
       return <ProviderDisconnected />
     }
 
-    return <ProviderInfo provider={provider} network={network} userAddress={userAddress} connected={available} />
+    return <ProviderAccesible provider={provider} network={network} userAddress={userAddress} connected={available} />
   }
 
   getProviderDetailsBased = () => {
@@ -67,7 +67,7 @@ class HeaderComponent extends React.PureComponent<Props, State> {
       return <ConnectDetails onConnect={this.onConnect} />
     }
 
-    return (<ProviderDetails
+    return (<UserDetails
       provider={provider}
       network={network}
       userAddress={userAddress}