add link to withdraw pledges

src/components/Pledges.jsx

@@ -132,7 +132,7 @@ function Pledges({ match }) {
   const [selectedPledges, setSelected] = useState([])
   const [submitted, setSubmitted] = useState(false)
   const [confirmed, setConfirmed] = useState(false)
-  const { openSnackBar } = useContext(FundingContext)
+  const { openSnackBar, currencies } = useContext(FundingContext)
   const projectId = match.params.id
   const { loading, error, data, startPolling, stopPolling } = useQuery(getProfileWithPledges, {
     variables: { id: formatProjectId(projectId) }
@@ -145,8 +145,8 @@ function Pledges({ match }) {
   if (error) return <div>{`Error! ${error.message}`}</div>
   const { pledges, projectInfo: { goalToken } } = data.profile
 
-  const amtFormatter = getHumanAmountFormatter(goalToken)
-  const tokenLabel = getTokenLabel(goalToken)
+  const amtFormatter = getHumanAmountFormatter(goalToken, currencies)
+  const tokenLabel = getTokenLabel(goalToken, currencies)
   const allSelected = selectedPledges.length === pledges.length
   const selectAll = () => {
     if (allSelected) return setSelected([])

src/components/projects/FundProject.jsx

@@ -5,6 +5,7 @@ import classnames from 'classnames'
 import { useQuery } from '@apollo/react-hooks'
 import LiquidPledging from '../../embarkArtifacts/contracts/LiquidPledging'
 import SwapProxy from '../../embarkArtifacts/contracts/SwapProxy'
+import { Link } from 'react-router-dom'
 import Typography from '@material-ui/core/Typography'
 import { FundingContext } from '../../context'
 import TextDisplay from '../base/TextDisplay'
@@ -317,6 +318,12 @@ function FundProject({ match, history }) {
         profileData={data.profile}
         startPolling={startPolling}
       />
+      {!!Number(data.profile.pledgesInfos[0].lifetimeReceived) && <div className={classes.pledgesLink}>
+        <Typography>This project received pledges. You have funds available to withdraw.</Typography>
+        <Link to={`/pledges/${projectId}`} className={classes.link}>
+          <StatusButton buttonText="View Pledges" />
+        </Link>
+      </div>}
     </div>
   )
 }

src/components/projects/styles/FundProject.js

@@ -145,6 +145,9 @@ const styles = theme => ({
     marginTop: '15px',
     color: '#4360DF'
   },
+  link:{
+    textDecoration: 'none'
+  },
   secondHalf: {
     display: 'grid',
     gridTemplateColumns: 'repeat(12, [col] 1fr)',
@@ -187,6 +190,10 @@ const styles = theme => ({
   preview: {
     fontSize: '20px'
   },
+  pledgesLink: {
+    gridColumn: '5 / 10',
+    textAlign: 'center',
+  },
   contact: {
     gridColumnStart: '1',
     gridColumnEnd: '6'

src/utils/currencies.js

@@ -50,7 +50,7 @@ export const currencies = [
 ]
 
 export const getTokenByAddress = (value, currencies = currencies) => currencies.find(currency => currency.value.toLowerCase() === value.toLowerCase())
-export const getHumanAmountFormatter = tokenAddress => getTokenByAddress(tokenAddress).humanReadibleFn
+export const getHumanAmountFormatter = (tokenAddress, currencies = currencies) => getTokenByAddress(tokenAddress, currencies).humanReadibleFn
 export const getTokenLabel = (value, currencies = currencies) => {
   const token = getTokenByAddress(value, currencies)
   return token ? token.label : null