display converted price when creating project

package.json

@@ -79,6 +79,7 @@
     "chai": "^4.1.0",
     "chart.js": "^2.7.3",
     "classnames": "^2.2.6",
+    "cryptocompare": "^1.0.0",
     "cryptocurrency-icons": "^0.9.3",
     "css-loader": "1.0.0",
     "cytoscape": "^3.3.0",

src/components/projects/CreateProject.jsx

@@ -15,6 +15,7 @@ import CurrencySelect from '../base/CurrencySelect'
 import StatusTextField from '../base/TextField'
 import IconTextField from '../base/IconTextField'
 import Icon from '../base/icons/IconByName'
+import { convertTokenAmountUsd } from '../../utils/prices'
 
 const { addProject } = LiquidPledging.methods
 
@@ -23,6 +24,7 @@ const hoursToSeconds = hours => hours * 60 * 60
 const helperText = 'The length of time the Project has to veto when the project delegates to another delegate and they pledge those funds to a project'
 const generateChatRoom = title => `#status-${title.replace(/\s/g, '')}`
 
+
 const styles = theme => ({
   adornmentText: {
     cursor: 'pointer',
@@ -174,7 +176,7 @@ const addProjectSucessMsg = response => {
 }
 const SubmissionSection = ({ classes, history }) => {
   const [uploads, setUploads] = useState({})
-  const { account, openSnackBar } = useContext(FundingContext)
+  const { account, openSnackBar, prices } = useContext(FundingContext)
   return (
     <Formik
       initialValues={{
@@ -229,6 +231,9 @@ const SubmissionSection = ({ classes, history }) => {
         isSubmitting
       }) => {
         const { firstHalf, secondHalf, fullWidth } = classes
+        const { goalToken, goal } = values
+        const usdValue = convertTokenAmountUsd(goalToken, goal, prices)
+        console.log({prices, usdValue})
         return (
           <form onSubmit={handleSubmit} className={classes.submissionRoot}>
             <div className={firstHalf}>
@@ -420,6 +425,7 @@ const SubmissionSection = ({ classes, history }) => {
                 name="goal"
                 label="Enter your funding goal"
                 placeholder="Enter your funding goal"
+                bottomLeftLabel={usdValue}
                 onChange={handleChange}
                 onBlur={handleBlur}
                 value={values.goal || ''}

src/dapp.js

@@ -14,6 +14,7 @@ import { addFormattedProfiles } from './actions/profiles'
 import { updateStalePledges, getAndAddPledges } from './actions/pledges'
 import { updateDelegates } from './actions/delegates'
 import { MySnackbarContentWrapper } from './components/base/SnackBars'
+import { getUsdPrice, getPrices, generatePairKey } from './utils/prices'
 
 const { getNetworkType } = web3.eth.net
 
@@ -22,6 +23,7 @@ class App extends React.Component {
     loading: true,
     lpAllowance: 0,
     needsInit: true,
+    prices: {}
   };
 
   componentDidMount(){
@@ -36,6 +38,7 @@ class App extends React.Component {
           if (environment === 'development') console.log('mock_time:', await LiquidPledging.mock_time.call())
 
           const account = await web3.eth.getCoinbase()
+          this.getAndSetPrices()
           this.setState({ account })
           const lpAllowance = await getLpAllowance()
           //TODO add block based sync
@@ -68,6 +71,11 @@ class App extends React.Component {
     this.setState({ loading: false })
   }
 
+  getAndSetPrices = async () => {
+    const prices = await getPrices()
+    this.setState({ prices })
+  }
+
   openSnackBar = (variant, message) => {
     this.setState({ snackbar: { variant, message } })
   }
@@ -81,9 +89,16 @@ class App extends React.Component {
     getAndAddPledges()
   }
 
+  updateUsdPrice = async ticker => {
+    const { prices } = this.state
+    const key = generatePairKey(ticker, 'USD')
+    const price = await getUsdPrice(ticker)
+    this.setState({ prices: { ...prices, [key]: price }})
+  }
+
   render() {
-    const { account, needsInit, lpAllowance: _lpAllowance, loading, authorizedPayments, snackbar } = this.state
+    const { account, needsInit, lpAllowance: _lpAllowance, loading, authorizedPayments, snackbar, prices } = this.state
-    const { appendFundProfile, appendPledges, transferPledgeAmounts, openSnackBar, closeSnackBar, syncWithRemote } = this
+    const { appendFundProfile, appendPledges, transferPledgeAmounts, openSnackBar, closeSnackBar, syncWithRemote, updateUsdPrice } = this
     const fundingContext = {
       appendPledges,
       appendFundProfile,
@@ -95,7 +110,9 @@ class App extends React.Component {
       standardTokenApproval,
       openSnackBar,
       closeSnackBar,
-      syncWithRemote
+      syncWithRemote,
+      prices,
+      updateUsdPrice
     }
     return (
       <FundingContext.Provider value={fundingContext}>

yarn.lock

@@ -5078,6 +5078,11 @@ crypto-random-string@^1.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
   integrity sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=
 
+cryptocompare@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/cryptocompare/-/cryptocompare-1.0.0.tgz#d93bafd037686ec13bbf3cf6b40187310f991a3d"
+  integrity sha512-Xk6+hJJ+XSlWsofIx2WHF2n410ADLkXMfCn/1aLTI4NlWLo2LPtQzw+j3aBEPQ+HVar1dO5HVLAJFBQqGyhdOQ==
+
 cryptocurrency-icons@^0.9.3:
   version "0.9.3"
   resolved "https://registry.yarnpkg.com/cryptocurrency-icons/-/cryptocurrency-icons-0.9.3.tgz#a126ac0f5cb90129fbf15741838e538ead3a670f"