From 6bece44aed07531077b2423d5f87cdd8dd2a3b92 Mon Sep 17 00:00:00 2001 From: Barry Gitarts Date: Mon, 23 Sep 2019 13:22:15 -0400 Subject: [PATCH] use subgraph for retrieving pledges for withdraws --- src/components/projects/ProjectPledges.jsx | 51 ++++++++++++--------- src/components/projects/queries.js | 52 ++++++++++++++++++++++ src/utils/conversions.js | 1 + 3 files changed, 82 insertions(+), 22 deletions(-) diff --git a/src/components/projects/ProjectPledges.jsx b/src/components/projects/ProjectPledges.jsx index d125197..986f607 100644 --- a/src/components/projects/ProjectPledges.jsx +++ b/src/components/projects/ProjectPledges.jsx @@ -1,5 +1,5 @@ /*global web3*/ -import React, { useState, useEffect } from 'react' +import React, { useState } from 'react' import PropTypes from 'prop-types' import { Formik } from 'formik' import LiquidPledging from '../../embarkArtifacts/contracts/LiquidPledging' @@ -8,13 +8,18 @@ import withObservables from '@nozbe/with-observables' import { Q } from '@nozbe/watermelondb' import { withDatabase } from '@nozbe/watermelondb/DatabaseProvider' import { withStyles } from '@material-ui/core/styles' -import { useProjectData, useProfileData, usePledgesAuthorizations } from './hooks' +import { useProjectData, useProfileData } from './hooks' import { Button, Divider, Typography, Card, CardActions, CardContent, FormControlLabel, Switch } from '@material-ui/core' import { makeStyles } from '@material-ui/styles' import Paper from '@material-ui/core/Paper' import Tabs from '@material-ui/core/Tabs' import Tab from '@material-ui/core/Tab' import { getTokenLabel, getHumanAmountFormatter } from '../../utils/currencies' +import { toDecimal } from '../../utils/conversions' +import { formatProjectId } from '../../utils/project' +import { getProfileWithPledges } from './queries' +import { useQuery } from '@apollo/react-hooks' +import Loading from '../base/Loading' const { mWithdraw, withdraw } = LiquidPledging.methods const { confirmPayment } = LPVault.methods @@ -43,13 +48,12 @@ const buttonText = { 2: 'Already paid' } -const getCommitTime = async (pledge, setState) => { +const getCommitTime = (pledge, profileCommitTime) => { const { commitTime } = pledge - const profile = await pledge.profile.fetch() - if (!profile || Number(commitTime) === 0) return 0 - const time = Number(commitTime) + Number(profile.commitTime) + if (Number(commitTime) === 0) return 0 + const time = Number(commitTime) + Number(profileCommitTime) const date = new Date(time * 1000) - setState(`${date.toLocaleDateString()} ${date.toLocaleTimeString()}`) + return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}` } const styles = theme => ({ @@ -96,16 +100,12 @@ const styles = theme => ({ } }) -function SimplePledge({ classes, pledge, values, handleChange, pledgeType }) { - const [commitTime, setCommitTime] = useState(0); +function SimplePledge({ classes, pledge, values, handleChange, pledgeType, profileCommitTime }) { const pledgeId = `pledge.${pledge.id}` + const commitTime = getCommitTime(pledge, profileCommitTime) const keys = Object.keys(values) const value = keys.find(k => values[k].id === pledgeId) - useEffect(() => { - getCommitTime(pledge, setCommitTime) - }, [pledge]) - const notPaid = pledgeTypes[pledgeType] !== PAID const notPaying = pledgeTypes[pledgeType] !== PAYING const amtFormatter = getHumanAmountFormatter(pledge.token) @@ -116,7 +116,7 @@ function SimplePledge({ classes, pledge, values, handleChange, pledgeType }) { {amtFormatter(pledge.amount)} {getTokenLabel(pledge.token)} - Pledge ID: {pledge.idPledge} + Pledge ID: {toDecimal(pledge.id)} Pledge Status: {pledgeTypes[pledge.pledgeState]} @@ -176,7 +176,7 @@ const getArgs = (pledgeType, filteredPledges) => { const { idPayment } = filteredPledges.filter(p => !!p)[0].authorization.returnValues return [idPayment] } -const SubmissionSection = ({ classes, openSnackBar, syncWithRemote, pledges, pledgeType }) => { +const SubmissionSection = ({ classes, openSnackBar, syncWithRemote, pledges, pledgeType, profileCommitTime }) => { return ( { @@ -215,7 +215,7 @@ const SubmissionSection = ({ classes, openSnackBar, syncWithRemote, pledges, ple }) => { return (
- {pledges.map(pledge => )} + {pledges.map(pledge => )} {pledgeTypes[pledgeType] !== PAID && } ) @@ -256,15 +256,21 @@ function CenteredTabs({ pledged, paying, paid, pledgeType, setPledgeType }) { ); } -function ProjectPledges({classes, match, projectAddedEvents, pledges, authorizedPayments, confirmedPayments}) { +function ProjectPledges({classes, match}) { const [pledgeType, setPledgeType] = useState(0) const projectId = match.params.id - const { manifest, delegateProfiles, openSnackBar, syncWithRemote } = useProjectData(projectId, projectAddedEvents) + const { loading, error, data } = useQuery(getProfileWithPledges, { + variables: { id: formatProjectId(projectId) } + }); + + const { manifest, delegateProfiles, openSnackBar, syncWithRemote } = useProjectData(projectId, data) const delegatePledges = useProfileData(delegateProfiles) - const enrichedPledges = usePledgesAuthorizations(pledges, authorizedPayments, confirmedPayments).filter(p => Number(p.amount) > 0) - const pledged = enrichedPledges.filter(p => p.pledgeState === 0) - const paying = enrichedPledges.filter(p => p.pledgeState === 1) - const paid = enrichedPledges.filter(p => p.pledgeState === 2) + if (loading) return + if (error) return
{`Error! ${error.message}`}
+ const { pledges } = data.profile + const pledged = pledges.filter(p => p.pledgeState === 0) + const paying = pledges.filter(p => p.pledgeState === 1) + const paid = pledges.filter(p => p.pledgeState === 2) const selectedPledges = { 0: pledged, 1: paying, @@ -289,6 +295,7 @@ function ProjectPledges({classes, match, projectAddedEvents, pledges, authorized syncWithRemote={syncWithRemote} pledges={selectedPledges[pledgeType]} pledgeType={pledgeType} + profileCommitTime={data.profile.commitTime} /> ) diff --git a/src/components/projects/queries.js b/src/components/projects/queries.js index 5d1a9a9..35139ee 100644 --- a/src/components/projects/queries.js +++ b/src/components/projects/queries.js @@ -14,6 +14,18 @@ fragment PledgesInfoFields on PledgesInfo { } ` +export const pledgeFields = gql` +fragment PledgeFields on Pledge { + id, + amount, + token, + commitTime, + pledgeState, + intendedProject, + nDelegates +} +` + export const getProfileById = gql` ${pledgesInfosFields} @@ -48,6 +60,46 @@ query Profile($id: ID!) { } } ` + +export const getProfileWithPledges = gql` +${pledgesInfosFields} +${pledgeFields} + +query Profile($id: ID!) { + profile(id: $id) { + id + addr + commitTime + url + profileId + type + name + creationTime + pledgesInfos { + ...PledgesInfoFields + } + pledges { + ...PledgeFields + } + projectInfo { + id + title + subtitle + creator + repo + avatar + goal + goalToken + description + chatRoom + file + type + isPlaying + } + } +} +` + export const getProjects = gql` ${pledgesInfosFields} diff --git a/src/utils/conversions.js b/src/utils/conversions.js index 21bbeeb..78d778c 100644 --- a/src/utils/conversions.js +++ b/src/utils/conversions.js @@ -3,5 +3,6 @@ export const toEther = (amount, scale = 'ether') => web3.utils.fromWei(amount, scale) export const toWei = (amount, scale = 'ether') => web3.utils.toWei(amount, scale) export const toBN = amount => web3.utils.toBN(amount) +export const toDecimal = hex => web3.utils.toDecimal(hex) export const compoundWhole = amount => (Number(amount) / (10**8)).toString() export const compoundToChain = amount => (Number(amount) * (10**8)).toString()