@@ -199,6 +199,7 @@ export const TreasuryBreakdown: React.FC<TreasuryBreakdownProps> = (props) => {
199199 const [ totalTreasuryAmountUSD , setTotalTreasuryAmountUSD ] = React . useState ( '-' ) ;
200200 const [ zrxUSDValue , setZrxUSDValue ] = React . useState ( undefined ) ;
201201 const [ maticUSDValue , setMaticUSDValue ] = React . useState ( undefined ) ;
202+ const [ wCeloUSDValue , setWCeloUSDValue ] = React . useState ( undefined ) ;
202203 const [ assetList , setAssetList ] = React . useState ( [ ] ) ;
203204 const [ allocations , setAllocations ] = React . useState ( [ ] ) ;
204205
@@ -211,22 +212,41 @@ export const TreasuryBreakdown: React.FC<TreasuryBreakdownProps> = (props) => {
211212 '0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0' ,
212213 providerState . provider ,
213214 ) ;
215+ const wCeloTokenContract = new ERC20TokenContract (
216+ '0xe452e6ea2ddeb012e20db73bf5d3863a3ac8d77a' ,
217+ providerState . provider ,
218+ ) ;
214219
215220 // tslint:disable-next-line:no-floating-promises
216221 ( async ( ) => {
217- const [ zrxBalance , maticBalance ] = await Promise . all ( [
222+ const [ zrxBalance , maticBalance , wCeloBalance ] = await Promise . all ( [
218223 zrxTokenContract . balanceOf ( GOVERNOR_CONTRACT_ADDRESS . ZRX ) . callAsync ( ) ,
219224 maticTokenContract . balanceOf ( GOVERNOR_CONTRACT_ADDRESS . ZRX ) . callAsync ( ) ,
225+ wCeloTokenContract . balanceOf ( GOVERNOR_CONTRACT_ADDRESS . ZRX ) . callAsync ( ) ,
220226 ] ) ;
221- const res = await backendClient . getTreasuryTokenPricesAsync ( ) ;
227+ const treasuryTokenPrices = await backendClient . getTreasuryTokenPricesAsync ( ) ;
228+ const getTokenPrice = ( tokenSymbol : string ) => {
229+ const symbolIdMap : { [ symbol : string ] : string } = {
230+ 'ZRX' : '0x' ,
231+ 'MATIC' : 'matic-network' ,
232+ 'wCELO' : 'celo'
233+ }
234+ const priceId = symbolIdMap [ tokenSymbol ] ;
235+ const price = treasuryTokenPrices [ priceId ] . usd ;
236+
237+ return price ;
238+ }
222239 const zrxAmount = Web3Wrapper . toUnitAmount ( zrxBalance , 18 ) ;
223240 const maticAmount = Web3Wrapper . toUnitAmount ( maticBalance , 18 ) ;
241+ const wCeloAmount = Web3Wrapper . toUnitAmount ( wCeloBalance , 18 ) ;
224242
225- const zrxUSD = zrxAmount . multipliedBy ( res [ '0x' ] . usd ) ;
226- const maticUSD = maticAmount . multipliedBy ( res [ 'matic-network' ] . usd ) ;
243+ const zrxUSD = zrxAmount . multipliedBy ( getTokenPrice ( 'ZRX' ) ) ;
244+ const maticUSD = maticAmount . multipliedBy ( getTokenPrice ( 'MATIC' ) ) ;
245+ const wCeloUSD = wCeloAmount . multipliedBy ( getTokenPrice ( 'wCELO' ) ) ;
227246
228247 setZrxUSDValue ( zrxUSD ) ;
229248 setMaticUSDValue ( maticUSD ) ;
249+ setWCeloUSDValue ( wCeloUSD ) ;
230250 setAssetList ( [
231251 {
232252 name : 'ZRX' ,
@@ -250,6 +270,17 @@ export const TreasuryBreakdown: React.FC<TreasuryBreakdownProps> = (props) => {
250270 } ) . formatted
251271 } `,
252272 } ,
273+ {
274+ name : 'wCELO' ,
275+ balance : wCeloAmount . toString ( ) ,
276+ usdValue : `$${
277+ formatNumber ( wCeloUSD . toString ( ) , {
278+ decimals : 0 ,
279+ decimalsRounded : 6 ,
280+ bigUnitPostfix : false ,
281+ } ) . formatted
282+ } `,
283+ } ,
253284 ] ) ;
254285
255286 const treauryProposalDistributions = await backendClient . getTreasuryProposalDistributionsAsync (
@@ -258,12 +289,8 @@ export const TreasuryBreakdown: React.FC<TreasuryBreakdownProps> = (props) => {
258289
259290 const treasuryAllocations = treauryProposalDistributions . map ( ( distribution : any ) => {
260291 const { tokensTransferred } = distribution ;
261-
262292 const updatedTokensTransferred = tokensTransferred . map ( ( token : any ) => {
263- token . usdValue =
264- token . name === 'ZRX'
265- ? Math . round ( token . amount * res [ '0x' ] . usd )
266- : Math . round ( token . amount * res [ 'matic-network' ] . usd ) ;
293+ token . usdValue = Math . round ( token . amount * getTokenPrice ( token . name ) ) ;
267294
268295 return token ;
269296 } ) ;
@@ -275,7 +302,7 @@ export const TreasuryBreakdown: React.FC<TreasuryBreakdownProps> = (props) => {
275302
276303 setTotalTreasuryAmountUSD (
277304 `$${
278- formatNumber ( zrxUSD . plus ( maticUSD ) . toString ( ) , {
305+ formatNumber ( zrxUSD . plus ( maticUSD ) . plus ( wCeloUSD ) . toString ( ) , {
279306 decimals : 6 ,
280307 decimalsRounded : 6 ,
281308 bigUnitPostfix : true ,
@@ -294,7 +321,7 @@ export const TreasuryBreakdown: React.FC<TreasuryBreakdownProps> = (props) => {
294321 < Title > { totalTreasuryAmountUSD } </ Title >
295322 < PieAndLegend >
296323 < PieChartWrapper >
297- { zrxUSDValue && maticUSDValue && (
324+ { zrxUSDValue && maticUSDValue && wCeloUSDValue && (
298325 < PieChart
299326 data = { [
300327 {
@@ -307,6 +334,11 @@ export const TreasuryBreakdown: React.FC<TreasuryBreakdownProps> = (props) => {
307334 value : parseInt ( maticUSDValue . toString ( ) , 10 ) ,
308335 color : '#8247E5' ,
309336 } ,
337+ {
338+ title : 'wCELO' ,
339+ value : parseInt ( wCeloUSDValue . toString ( ) , 10 ) ,
340+ color : '#fcc44c' ,
341+ } ,
310342 ] }
311343 label = { ( data : any ) => `${ Math . round ( data . dataEntry . percentage ) } %` }
312344 labelStyle = { {
@@ -325,6 +357,9 @@ export const TreasuryBreakdown: React.FC<TreasuryBreakdownProps> = (props) => {
325357 < LegendItem >
326358 < ColorBlock color = { '#8247E5' } /> Matic
327359 </ LegendItem >
360+ < LegendItem >
361+ < ColorBlock color = { '#fcc44c' } /> wCelo
362+ </ LegendItem >
328363 </ Legend >
329364 </ PieAndLegend >
330365 < BreakdownCopy >
0 commit comments