diff --git a/package.json b/package.json index 9667019..ab1e0ad 100644 --- a/package.json +++ b/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", diff --git a/src/components/projects/CreateProject.jsx b/src/components/projects/CreateProject.jsx index 8cdc0a1..5d05331 100644 --- a/src/components/projects/CreateProject.jsx +++ b/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 ( { isSubmitting }) => { const { firstHalf, secondHalf, fullWidth } = classes + const { goalToken, goal } = values + const usdValue = convertTokenAmountUsd(goalToken, goal, prices) + console.log({prices, usdValue}) return (
@@ -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 || ''} diff --git a/src/dapp.js b/src/dapp.js index 7cf960c..69df18e 100644 --- a/src/dapp.js +++ b/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 { appendFundProfile, appendPledges, transferPledgeAmounts, openSnackBar, closeSnackBar, syncWithRemote } = this + const { account, needsInit, lpAllowance: _lpAllowance, loading, authorizedPayments, snackbar, prices } = this.state + 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 ( diff --git a/yarn.lock b/yarn.lock index f923000..ffaad3e 100644 --- a/yarn.lock +++ b/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"