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'
@@ -135,12 +131,12 @@ async function getProjectAssets(hash, setState){
   console.log({hash})
   const CID = hash.split('/').slice(-1)[0]
   getFiles(CID)
-    .then((files) => {
+                  .then((files) => {
-      setState(files)
+                    setState(files)
-      const manifest = files[2]
+                    const manifest = files[2]
-      console.log({files}, JSON.parse(manifest.content))
+                    console.log({files}, JSON.parse(manifest.content))
-    })
+                  })
-    .catch(console.log)
+                  .catch(console.log)
 }
 
 const getProjectManifest = assets => assets ? JSON.parse(assets.find(a => a.name.toLowerCase() === 'manifest.json').content) : null
@@ -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])
@@ -193,59 +188,62 @@ function Project({ classes, match, profile, transfers, pledges, projectAddedEven
   const percentToGoal = manifest ? Math.min(
     (Number(totalPledged) / Number(manifest.goal)) * 100,
     100
-    ) : 0
+  ) : 0
-  console.log({profile, projectAssets, mediaUrl, mediaType, amountsPledged})
+  console.log({profile, projectAssets, mediaUrl, mediaType, amountsPledged, pledges, transfers})
   return (
-    <div className={classes.root}>
+    !profile.length || !projectAssets
-      <div className={classes.creator}>
+    ? <Loading />
-        <Avatar src={manifest && manifest.avatar} />
+    :
-        <Typography className={classes.creatorName}>{manifest && `By ${manifest.creator}`}</Typography>
+      <div className={classes.root}>
-      </div>
+        <div className={classes.creator}>
-      <div>
+          <Avatar src={manifest && manifest.avatar} />
-        <Typography className={classes.title} component="h2" gutterBottom>
+          <Typography className={classes.creatorName}>{manifest && `By ${manifest.creator}`}</Typography>
-          {manifest && manifest.title}
+        </div>
-        </Typography>
+        <div>
-        <Typography className={classes.subTitle} component="h5" gutterBottom>
+          <Typography className={classes.title} component="h2" gutterBottom>
-          {manifest && manifest.subtitle}
+            {manifest && manifest.title}
-        </Typography>
+          </Typography>
-      </div>
+          <Typography className={classes.subTitle} component="h5" gutterBottom>
-      <div className={classes.secondRow}>
+            {manifest && manifest.subtitle}
-        {mediaType
+          </Typography>
-        ? <ReactPlayer width="100%" height="100%" url={mediaUrl} playing={manifest.media.isPlaying} />
+        </div>
-        : <CardMedia
+        <div className={classes.secondRow}>
-            component="img"
+          {mediaType
-            alt="video"
+          ? <ReactPlayer width="100%" height="100%" url={mediaUrl} playing={manifest.media.isPlaying} />
-            className={classes.media}
+          : <CardMedia
-            src={mediaUrl}
+              component="img"
-            title="media-description"
+              alt="video"
-        />}
+              className={classes.media}
-        <div className={classes.infoBox}>
+              src={mediaUrl}
-          <LinearProgress
+              title="media-description"
-            classes={{
+          />}
-              colorPrimary: classes.linearColorPrimary,
+          <div className={classes.infoBox}>
-              barColorPrimary: classes.linearBarColorPrimary,
+            <LinearProgress
-            }}
+              classes={{
-            variant="determinate"
+                colorPrimary: classes.linearColorPrimary,
-            value={percentToGoal}
+                barColorPrimary: classes.linearBarColorPrimary,
-          />
+              }}
-          <div className={classes.infoBoxSection}>
+              variant="determinate"
-            <span className={classes.raisedAmount}>
+              value={percentToGoal}
-              {`${totalPledged.toLocaleString()} ${amountsPledged[0] ? amountsPledged[0][0] : ''}`}
+            />
-            </span>
+            <div className={classes.infoBoxSection}>
-            <span className={classes.subtext}>{manifest && `pledged of ${Number(manifest.goal).toLocaleString()} goal`}</span>
+              <span className={classes.raisedAmount}>
+                {`${totalPledged.toLocaleString()} ${amountsPledged[0] ? amountsPledged[0][0] : ''}`}
+              </span>
+              <span className={classes.subtext}>{manifest && `pledged of ${Number(manifest.goal).toLocaleString()} goal`}</span>
+            </div>
+            <div className={classes.infoBoxSection}>
+              <span className={classes.infoText}>{numberOfBackers}</span>
+              <span className={classes.subtext}>backers</span>
+            </div>
+            <div className={classes.infoBoxSection}>
+              <span className={classes.infoText}>{projectAge}</span>
+              <span className={classes.subtext}>days active</span>
+            </div>
+            <Button color="primary" variant="contained" style={{ height: '50px' }}>Back this project</Button>
           </div>
-          <div className={classes.infoBoxSection}>
-            <span className={classes.infoText}>{numberOfBackers}</span>
-            <span className={classes.subtext}>backers</span>
-          </div>
-          <div className={classes.infoBoxSection}>
-            <span className={classes.infoText}>{projectAge}</span>
-            <span className={classes.subtext}>days active</span>
-          </div>
-          <Button color="primary" variant="contained" style={{ height: '50px' }}>Back this project</Button>
         </div>
       </div>
-    </div>
   )
 }
 

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}