Adding onConnect and onDisconnect to Header provider's components

src/components/Header/actions.js

@@ -1,6 +1,12 @@
 // @flow
-import { fetchProvider } from '~/logic/wallets/store/actions'
+import { fetchProvider, removeProvider } from '~/logic/wallets/store/actions'
+
+export type Actions = {
+  fetchProvider: typeof fetchProvider,
+  removeProvider: typeof removeProvider,
+}
 
 export default {
   fetchProvider,
+  removeProvider,
 }

src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx

@@ -11,6 +11,7 @@ const connectedLogo = require('../../assets/connect-wallet.svg')
 
 type Props = {
   classes: Object,
+  onConnect: Function,
 }
 
 const styles = () => ({
@@ -36,7 +37,7 @@ const styles = () => ({
   },
 })
 
-const ConnectDetails = ({ classes }: Props) => (
+const ConnectDetails = ({ classes, onConnect }: Props) => (
   <React.Fragment>
     <div className={classes.container}>
       <Row margin="lg" align="center">
@@ -48,6 +49,7 @@ const ConnectDetails = ({ classes }: Props) => (
     </Row>
     <Row className={classes.connect}>
       <Button
+        onClick={onConnect}
         size="medium"
         variant="raised"
         color="primary"

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

@@ -26,6 +26,7 @@ type Props = {
   network: string,
   userAddress: string,
   classes: Object,
+  onDisconnect: Function,
 }
 
 const openIconStyle = {
@@ -75,10 +76,11 @@ const styles = () => ({
 })
 
 const UserDetails = ({
-  provider, connected, network, userAddress, classes,
+  provider, connected, network, userAddress, classes, onDisconnect,
 }: Props) => {
-  const status = connected ? 'Connected' : 'Not connected'
-  const address = shortVersionOf(userAddress, 6)
+  const status = connected ? 'Connected' : 'Connection error'
+  const address = userAddress ? shortVersionOf(userAddress, 6) : 'Not available'
+  const identiconAddress = userAddress || 'random'
   const connectionLogo = connected ? connectedLogo : connectedWarning
   const color = connected ? 'primary' : 'warning'
 
@@ -86,7 +88,7 @@ const UserDetails = ({
     <React.Fragment>
       <Block className={classes.container}>
         <Row className={classes.identicon} margin="md" align="center">
-          <Identicon address={userAddress} diameter={60} />
+          <Identicon address={identiconAddress} diameter={60} />
         </Row>
         <Block align="center" className={classes.user}>
           <Paragraph className={classes.address} size="sm" noMargin>{address}</Paragraph>
@@ -127,6 +129,7 @@ const UserDetails = ({
       <Hairline margin="xs" />
       <Row className={classes.disconnect}>
         <Button
+          onClick={onDisconnect}
           size="medium"
           variant="raised"
           color="primary"

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

@@ -47,10 +47,11 @@ const ProviderInfo = ({
   const cutAddress = connected ? shortVersionOf(userAddress, 6) : 'Connection Error'
   const color = connected ? 'primary' : 'warning'
   const logo = connected ? connectedLogo : connectedWarning
+  const identiconAddress = userAddress || 'random'
 
   return (
     <React.Fragment>
-      <Identicon address={userAddress} diameter={30} />
+      <Identicon address={identiconAddress} diameter={30} />
       <Img className={classes.logo} src={logo} height={20} alt="Connection status" />
       <Col end="sm" middle="xs" layout="column" className={classes.account}>
         <Paragraph size="sm" transform="capitalize" className={classes.network} noMargin weight="bold">{providerText}</Paragraph>

src/components/Header/index.jsx

@@ -7,38 +7,15 @@ import ProviderDetails from './component/ProviderInfo/UserDetails'
 import ProviderDisconnected from './component/ProviderDisconnected'
 import ConnectDetails from './component/ProviderDisconnected/ConnectDetails'
 import Layout from './component/Layout'
-import actions from './actions'
-import selector from './selector'
+import actions, { type Actions } from './actions'
+import selector, { type SelectorProps } from './selector'
 
-type Props = {
-  provider: string,
-  fetchProvider: Function,
-  userAddress: string,
-  network: string,
-  loaded: boolean,
-  available: boolean,
-}
+type Props = Actions & SelectorProps
 
 type State = {
   hasError: boolean,
 }
 
-const getProviderInfoBased = (hasError, loaded, available, provider, network, userAddress) => {
-  if (hasError || !loaded) {
-    return <ProviderDisconnected />
-  }
-
-  return <ProviderInfo provider={provider} network={network} userAddress={userAddress} connected={available} />
-}
-
-const getProviderDetailsBased = (hasError, loaded, available, provider, network, userAddress) => {
-  if (hasError || !loaded) {
-    return <ConnectDetails />
-  }
-
-  return <ProviderDetails provider={provider} network={network} userAddress={userAddress} connected={available} />
-}
-
 class Header extends React.PureComponent<Props, State> {
   state = {
     hasError: false,
@@ -54,14 +31,49 @@ class Header extends React.PureComponent<Props, State> {
     logComponentStack(error, info)
   }
 
-  render() {
+  onDisconnect = () => {
+    this.props.removeProvider()
+  }
+
+  onConnect = () => {
+    this.props.fetchProvider()
+  }
+
+  getProviderInfoBased = () => {
     const { hasError } = this.state
     const {
       loaded, available, provider, network, userAddress,
     } = this.props
 
-    const info = getProviderInfoBased(hasError, loaded, available, provider, network, userAddress)
-    const details = getProviderDetailsBased(hasError, loaded, available, provider, network, userAddress)
+    if (hasError || !loaded) {
+      return <ProviderDisconnected />
+    }
+
+    return <ProviderInfo provider={provider} network={network} userAddress={userAddress} connected={available} />
+  }
+
+  getProviderDetailsBased = () => {
+    const { hasError } = this.state
+    const {
+      loaded, available, provider, network, userAddress,
+    } = this.props
+
+    if (hasError || !loaded) {
+      return <ConnectDetails onConnect={this.onConnect} />
+    }
+
+    return (<ProviderDetails
+      provider={provider}
+      network={network}
+      userAddress={userAddress}
+      connected={available}
+      onDisconnect={this.onDisconnect}
+    />)
+  }
+
+  render() {
+    const info = this.getProviderInfoBased()
+    const details = this.getProviderDetailsBased()
 
     return <Layout providerInfo={info} providerDetails={details} />
   }

src/components/Header/selector.js

@@ -2,6 +2,14 @@
 import { createStructuredSelector } from 'reselect'
 import { providerNameSelector, userAccountSelector, networkSelector, availableSelector, loadedSelector } from '~/logic/wallets/store/selectors'
 
+export type SelectorProps = {
+  provider: string,
+  userAddress: string,
+  network: string,
+  loaded: boolean,
+  available: boolean,
+}
+
 export default createStructuredSelector({
   provider: providerNameSelector,
   userAddress: userAccountSelector,