add global snackbar and connect to back project

app/components/CreateFunding.jsx

@@ -1,7 +1,5 @@
 import React, { useContext, useState, useEffect } from 'react';
 import { Formik } from 'formik';
-import EmbarkJS from 'Embark/EmbarkJS';
-import LPVault from 'Embark/contracts/LPVault';
 import LiquidPledging from 'Embark/contracts/LiquidPledging';
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';

app/components/projects/BackProject.jsx

@@ -52,7 +52,7 @@ const Title = ({ className, manifest }) => (
     <Divider />
   </div>
 )
-const SubmissionSection = ({ classes, profiles, delegatePledges, projectId }) => {
+const SubmissionSection = ({ classes, profiles, delegatePledges, projectId, openSnackBar }) => {
   return (
     <Formik
       initialValues={{ amount: '', delegateProfile: '', delegatePledge: '' }}
@@ -79,9 +79,11 @@ const SubmissionSection = ({ classes, profiles, delegatePledges, projectId }) =>
             }
           })
           .catch(e => {
+            openSnackBar('error', e)
             console.log({e})
           })
           .finally(() => {
+            openSnackBar('success', 'project backed!')
             resetForm()
           })
     }}
@@ -164,14 +166,20 @@ const SubmissionSection = ({ classes, profiles, delegatePledges, projectId }) =>
 
 function BackProject({classes, match, profile, delegates, projectAddedEvents, delegateAddedEvents}) {
   const projectId = match.params.id
-  const { projectAge, projectAssets, manifest, delegateProfiles } = useProjectData(projectId, profile, projectAddedEvents)
+  const { projectAge, projectAssets, manifest, delegateProfiles, openSnackBar } = useProjectData(projectId, profile, projectAddedEvents)
   const delegatePledges = useProfileData(delegateProfiles)
   const delegateProfilesArr = delegates.map(d => d.profile.fetch())
   console.log({delegateAddedEvents, profile, delegates, delegateProfilesArr, delegateProfiles}, profile[0].delegates.fetch())
   return (
     <div className={classes.root}>
       <Title className={classes.title} manifest={manifest} />
-      <SubmissionSection classes={classes} profiles={delegateProfiles} delegatePledges={delegatePledges} projectId={projectId} />
+      <SubmissionSection
+        classes={classes}
+        profiles={delegateProfiles}
+        delegatePledges={delegatePledges}
+        projectId={projectId}
+        openSnackBar={openSnackBar}
+      />
     </div>
   )
 }

app/components/projects/hooks.js

@@ -84,7 +84,7 @@ export function useProjectData(projectId, profile, projectAddedEvents) {
   const [projectAssets, setAssets] = useState(null)
   const [ipfsReady, setIpfsState] = useState(null)
   const [delegateProfiles, setDelegateProfiles] = useState(null)
-  const { account } = useContext(FundingContext)
+  const { account, openSnackBar } = useContext(FundingContext)
 
   useEffect(() => {
     ipfs.on('ready', () => { setIpfsState(true) })
@@ -104,5 +104,11 @@ export function useProjectData(projectId, profile, projectAddedEvents) {
 
   const manifest = useMemo(() => getProjectManifest(projectAssets), [projectAssets])
 
-  return { projectAge, projectAssets, manifest, delegateProfiles }
+  return {
+    projectAge,
+    projectAssets,
+    manifest,
+    delegateProfiles,
+    openSnackBar
+  }
 }

app/dapp.js

@@ -3,6 +3,7 @@ import { HashRouter as Router } from 'react-router-dom'
 import EmbarkJS from 'Embark/EmbarkJS'
 import LiquidPledging from 'Embark/contracts/LiquidPledging'
 import web3 from 'Embark/web3'
+import Snackbar from '@material-ui/core/Snackbar'
 import { initVaultAndLP, vaultPledgingNeedsInit, standardTokenApproval, getLpAllowance } from './utils/initialize'
 import { getAuthorizedPayments } from './utils/events'
 import { FundingContext } from './context'
@@ -12,6 +13,7 @@ import { getAndAddVaultEvents } from './actions/vaultEvents'
 import { addFormattedProfiles } from './actions/profiles'
 import { updateStalePledges, getAndAddPledges } from './actions/pledges'
 import { updateDelegates } from './actions/delegates'
+import { MySnackbarContentWrapper } from './components/base/SnackBars'
 
 const { getNetworkType } = web3.eth.net
 
@@ -62,15 +64,37 @@ class App extends React.Component {
     this.setState({ loading: false })
   }
 
+  openSnackBar = (variant, message) => {
+    this.setState({ snackbar: { variant, message } })
+  }
+
+  closeSnackBar = () => {
+    this.setState({ snackbar: null })
+  }
+
   render() {
-    const { account, needsInit, lpAllowance, loading, authorizedPayments } = this.state
+    const { account, needsInit, lpAllowance, loading, authorizedPayments, snackbar } = this.state
-    const { appendFundProfile, appendPledges, transferPledgeAmounts } = this
+    const { appendFundProfile, appendPledges, transferPledgeAmounts, openSnackBar, closeSnackBar } = this
-    const fundingContext = { appendPledges, appendFundProfile, account, transferPledgeAmounts, authorizedPayments, needsInit, initVaultAndLP, standardTokenApproval  }
+    const fundingContext = { appendPledges, appendFundProfile, account, transferPledgeAmounts, authorizedPayments, needsInit, initVaultAndLP, standardTokenApproval, openSnackBar, closeSnackBar  }
     return (
       <FundingContext.Provider value={fundingContext}>
         <Router>
           <MainCointainer loading={loading} />
         </Router>
+        {snackbar && <Snackbar
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'center',
+          }}
+          open={snackbar}
+          autoHideDuration={6000}
+          onClose={closeSnackBar}
+        >
+          <MySnackbarContentWrapper
+            variant={snackbar && snackbar.variant}
+            message={snackbar && snackbar.message}
+          />
+        </Snackbar>}
       </FundingContext.Provider>
     )
   }