loading handling for projects page

app/actions/pledges.js

@@ -6,7 +6,6 @@ import { getProfilesById } from './profiles'
 
 const createPledge = (pledge, data, profiles) => {
   const { id, owner, amount, blockNumber, token, commitTime, nDelegates, pledgeState, intendedProject } = data
-  console.log({data})
   const profile = profiles.find(p => p.idProfile == owner)
   pledge.pledgeId = Number(id)
   pledge.owner = Number(owner)

app/components/PledgesTable.jsx

@@ -1,10 +1,9 @@
-import React, { Fragment, Component } from 'react'
+import React, { Component } from 'react'
 import MaterialTable from 'material-table'
 import withObservables from '@nozbe/with-observables'
 import { withDatabase } from '@nozbe/watermelondb/DatabaseProvider'
 import { toEther } from '../utils/conversions'
 import { getTokenLabel } from '../utils/currencies'
-import TransferDialog from './TransferDialog'
 import TransferCard from './table/TransferCard'
 import WithdrawCard from './table/WithdrawCard'
 

app/components/base/Loading.css

@@ -0,0 +1,21 @@
+.Loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.Loading-logo {
+  animation: Loading-logo-spin infinite 20s linear;
+  height: 40vmin;
+  pointer-events: none;
+  margin-bottom: 20%;
+}
+
+@keyframes Loading-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

app/components/base/Loading.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import Typography from '@material-ui/core/Typography'
+
+import './Loading.css'
+
+function Loading() {
+  return (
+    <div className="Loading-container">
+      <img className="Loading-logo" id="loading" src="https://our.status.im/content/images/2018/07/status_logo_blue_1--2-.png" />
+      <Typography style={{ fontSize: '1.5rem' }}>Hold on while we gather the latest information</Typography>
+    </div>
+  )
+}
+
+export default Loading

app/components/projects/Project.jsx

@@ -5,13 +5,9 @@ import Button from '@material-ui/core/Button'
 import withObservables from '@nozbe/with-observables'
 import { Q } from '@nozbe/watermelondb'
 import { withDatabase } from '@nozbe/watermelondb/DatabaseProvider'
-import Card from '@material-ui/core/Card'
-import CardHeader from '@material-ui/core/CardHeader'
 import CardMedia from '@material-ui/core/CardMedia'
-import CardContent from '@material-ui/core/CardContent'
-import CardActions from '@material-ui/core/CardActions'
-import CardActionArea from '@material-ui/core/CardActionArea'
 import LinearProgress from '@material-ui/core/LinearProgress'
+import Loading from '../base/Loading'
 import Avatar from '@material-ui/core/Avatar'
 import ReactPlayer from 'react-player'
 import { uniqBy, length } from 'ramda'
@@ -169,6 +165,7 @@ const getMediaSrc = assets => {
   }
 }
 
+
 function Project({ classes, match, profile, transfers, pledges, projectAddedEvents }) {
   const projectId = match.params.id
   const [projectAge, setAge] = useState(null)
@@ -179,11 +176,9 @@ function Project({ classes, match, profile, transfers, pledges, projectAddedEven
   }, [projectAge])
 
   useEffect(() => {
-    getProjectAssets(profile[0].url, setAssets)
+    if (profile[0]) getProjectAssets(profile[0].url, setAssets)
   }, [profile])
 
-  const received = useMemo(() => getReceivedAmount(projectId, transfers), [projectId, transfers])
-  const withdrawn = useMemo(() => getWithdrawnAmount(projectId, transfers), [projectId, transfers])
   const amountsPledged = useMemo(() => getAmountsPledged(pledges), [pledges])
   const numberOfBackers = useMemo(() => getNumberOfBackers(pledges), [pledges])
   const mediaType = useMemo(() => getMediaType(projectAssets), [projectAssets])
@@ -194,8 +189,11 @@ function Project({ classes, match, profile, transfers, pledges, projectAddedEven
     (Number(totalPledged) / Number(manifest.goal)) * 100,
     100
   ) : 0
-  console.log({profile, projectAssets, mediaUrl, mediaType, amountsPledged})
+  console.log({profile, projectAssets, mediaUrl, mediaType, amountsPledged, pledges, transfers})
   return (
+    !profile.length || !projectAssets
+    ? <Loading />
+    :
       <div className={classes.root}>
         <div className={classes.creator}>
           <Avatar src={manifest && manifest.avatar} />

app/components/table/TransferCard.jsx

@@ -119,7 +119,7 @@ function TransferCard({ row, handleClose, classes }) {
                   <Button size="large" onClick={close}>
                     Cancel
                   </Button>
-                  <Button size="large" onClick={submitForm} color="primary" type="submit">
+                  <Button size="large" color="primary" type="submit">
                     Transfer
                   </Button>
                 </CardActions>

app/components/table/WithdrawCard.jsx

@@ -37,7 +37,7 @@ function Withdraw({ handleClose, classes, rowData, authorizedPayment }) {
           const toSend = sendFn(...args)
           const estimateGas = await toSend.estimateGas()
           toSend
-            .send({ gas: estimateGas + 1000 })
+            .send({ gas: estimateGas })
             .then(res => {
               console.log({res})
             })
@@ -68,7 +68,7 @@ function Withdraw({ handleClose, classes, rowData, authorizedPayment }) {
             <Card className={classes.card} elevation={0}>
               <CardContent>
                 <Typography variant="h6" component="h2">
-                  {`${isPaying ? 'Confirm' : ''} Withdraw${isPaying ? 'al' : ''} ${values.amount || ''}  ${values.amount ? getTokenLabel(rowData[6]) : ''} from Pledge ${rowData.pledgeId}`}
+                  {`${isPaying ? 'Confirm' : ''} Withdraw${isPaying ? 'al' : ''} ${values.amount || ''}  ${values.amount ? getTokenLabel(rowData.pledge.token) : ''} from Pledge ${rowData.pledgeId}`}
                 </Typography>
                 {!isPaying && <TextField
                                 className={classes.amount}