Using notifications when app is connected to web3 provider

src/components/Header/index.jsx

@@ -2,6 +2,7 @@
 import * as React from 'react'
 import { connect } from 'react-redux'
 import { logComponentStack, type Info } from '~/utils/logBoundaries'
+import { SharedSnackbarConsumer, type Variant } from '~/components/SharedSnackBar/Context'
 import ProviderInfo from './component/ProviderInfo'
 import ProviderDetails from './component/ProviderInfo/UserDetails'
 import ProviderDisconnected from './component/ProviderDisconnected'
@@ -10,33 +11,36 @@ import Layout from './component/Layout'
 import actions, { type Actions } from './actions'
 import selector, { type SelectorProps } from './selector'
 
-type Props = Actions & SelectorProps
+type Props = Actions & SelectorProps & {
+  openSnackbar: (message: string, variant: Variant) => void,
+}
 
 type State = {
   hasError: boolean,
 }
 
-class Header extends React.PureComponent<Props, State> {
+class HeaderComponent extends React.PureComponent<Props, State> {
   state = {
     hasError: false,
   }
 
   componentDidMount() {
-    this.props.fetchProvider()
+    this.props.fetchProvider(this.props.openSnackbar)
   }
 
   componentDidCatch(error: Error, info: Info) {
     this.setState({ hasError: true })
+    this.props.openSnackbar('Error connecting to your wallet', 'error')
 
     logComponentStack(error, info)
   }
 
   onDisconnect = () => {
-    this.props.removeProvider()
+    this.props.removeProvider(this.props.openSnackbar)
   }
 
   onConnect = () => {
-    this.props.fetchProvider()
+    this.props.fetchProvider(this.props.openSnackbar)
   }
 
   getProviderInfoBased = () => {
@@ -79,4 +83,14 @@ class Header extends React.PureComponent<Props, State> {
   }
 }
 
-export default connect(selector, actions)(Header)
+const Header = connect(selector, actions)(HeaderComponent)
+
+const HeaderSnack = () => (
+  <SharedSnackbarConsumer>
+    {({ openSnackbar }) => (
+      <Header openSnackbar={openSnackbar} />
+    )}
+  </SharedSnackbarConsumer>
+)
+
+export default HeaderSnack

src/components/layout/PageFrame/index.jsx

@@ -2,6 +2,7 @@
 import React from 'react'
 import Footer from '~/components/Footer'
 import Header from '~/components/Header'
+import { SharedSnackbarProvider } from '~/components/SharedSnackBar/Context'
 import styles from './index.scss'
 
 type Props = {
@@ -9,11 +10,13 @@ type Props = {
 }
 
 const PageFrame = ({ children }: Props) => (
+  <SharedSnackbarProvider>
     <div className={styles.frame}>
       <Header />
       {children}
       <Footer />
     </div>
+  </SharedSnackbarProvider>
 )
 
 export default PageFrame

src/logic/wallets/store/actions/fetchProvider.js

@@ -17,8 +17,16 @@ export const processProviderResponse = (dispatch: ReduxDispatch<*>, response: Pr
   dispatch(addProvider(walletRecord))
 }
 
-export default () => async (dispatch: ReduxDispatch<*>) => {
+const SUCCESS_MSG = 'Wallet connected sucessfully'
+const UNLOCK_MSG = 'Unlock your wallet to connect'
+
+export default (openSnackbar: Function) => async (dispatch: ReduxDispatch<*>) => {
   const response: ProviderProps = await getProviderInfo()
 
+  const { loaded } = response
+  const msg = loaded ? SUCCESS_MSG : UNLOCK_MSG
+  const variant = loaded ? 'success' : 'warning'
+  openSnackbar(msg, variant)
+
   processProviderResponse(dispatch, response)
 }

src/logic/wallets/store/actions/removeProvider.js

@@ -3,7 +3,7 @@ import type { Dispatch as ReduxDispatch } from 'redux'
 import { makeProvider, type ProviderProps, type Provider } from '~/logic/wallets/store/model/provider'
 import addProvider from './addProvider'
 
-export default () => async (dispatch: ReduxDispatch<*>) => {
+export default (openSnackbar: Function) => async (dispatch: ReduxDispatch<*>) => {
   const providerProps: ProviderProps = {
     name: '',
     available: false,
@@ -13,5 +13,7 @@ export default () => async (dispatch: ReduxDispatch<*>) => {
   }
 
   const provider: Provider = makeProvider(providerProps)
+  openSnackbar('Wallet disconnected succesfully', 'info')
+
   dispatch(addProvider(provider))
 }