forked from antonnell/fixed-forex
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added ag-ibeur curve pool and gauge.
Added vested balance to vesting overview. Added liquidity providing section to dashboard. Catering for no yearn/convex staking options. Signed-off-by: Anton Nell <[email protected]>
- Loading branch information
Showing
22 changed files
with
2,310 additions
and
14,041 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
158 changes: 158 additions & 0 deletions
158
components/ffDashboardAssetOverview/ffDashboardOverview.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,158 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import { Paper, Grid, Typography, SvgIcon, Button, TextField, InputAdornment, CircularProgress } from '@material-ui/core'; | ||
| import Autocomplete from '@material-ui/lab/Autocomplete'; | ||
| import Skeleton from '@material-ui/lab/Skeleton'; | ||
| import BigNumber from 'bignumber.js'; | ||
|
|
||
| import { formatCurrency } from '../../utils'; | ||
| import classes from './ffDashboardOverview.module.css'; | ||
|
|
||
| import stores from '../../stores' | ||
| import { FIXED_FOREX_UPDATED } from '../../stores/constants'; | ||
|
|
||
| function BalanceIcon(props) { | ||
| const { color, className } = props; | ||
| return ( | ||
| <SvgIcon viewBox="0 0 48 48" stroke-width="3" className={className}> | ||
| <g stroke-width="3" transform="translate(0.5, 0.5)"><rect x="16" y="23" width="16" height="10" fill="none" stroke="#ffffff" stroke-linecap="square" stroke-miterlimit="10" stroke-width="3" data-color="color-2" stroke-linejoin="miter"></rect><path d="M20,23V17a4.012,4.012,0,0,1,4-4h0a4.012,4.012,0,0,1,4,4v6" fill="none" stroke="#ffffff" stroke-linecap="square" stroke-miterlimit="10" stroke-width="3" data-color="color-2" stroke-linejoin="miter"></path><path d="M42,27A18,18,0,0,1,6,27V7L24,3,42,7Z" fill="none" stroke="#ffffff" stroke-linecap="square" stroke-miterlimit="10" stroke-width="3" stroke-linejoin="miter"></path></g> | ||
| </SvgIcon> | ||
| ); | ||
| } | ||
|
|
||
| function VestedBalanceIcon(props) { | ||
| const { color, className } = props; | ||
| return ( | ||
| <SvgIcon viewBox="0 0 32 32" stroke-width="1" className={className}> | ||
| <g stroke-width="2" transform="translate(0, 0)"><polyline fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points="14,8 14,14 8,14 " stroke-linejoin="miter"></polyline> <path data-cap="butt" data-color="color-2" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" d="M19,20v4c0,1.657,2.686,3,6,3 s6-1.343,6-3v-4" stroke-linejoin="miter" stroke-linecap="butt"></path> <path data-cap="butt" data-color="color-2" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" d="M19,24v4c0,1.657,2.686,3,6,3 s6-1.343,6-3v-4" stroke-linejoin="miter" stroke-linecap="butt"></path> <ellipse data-color="color-2" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" cx="25" cy="20" rx="6" ry="3" stroke-linejoin="miter"></ellipse> <path fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M15,26.962 C14.67,26.987,14.336,27,14,27C6.82,27,1,21.18,1,14S6.82,1,14,1c6.843,0,12.452,5.288,12.962,12" stroke-linejoin="miter"></path></g> | ||
| </SvgIcon> | ||
| ); | ||
| } | ||
|
|
||
| function IbBalanceIcon(props) { | ||
| const { color, className } = props; | ||
| return ( | ||
| <SvgIcon viewBox="0 0 32 32" stroke-width="1" className={className}> | ||
| <g stroke-width="2" transform="translate(0, 0)"><path data-cap="butt" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" d="M1,5v4c0,1.657,2.686,3,6,3 s6-1.343,6-3V5" stroke-linejoin="miter" stroke-linecap="butt"></path> <path data-cap="butt" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" d="M1,9v4c0,1.657,2.686,3,6,3 s6-1.343,6-3V9" stroke-linejoin="miter" stroke-linecap="butt"></path> <line data-cap="butt" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" x1="13" y1="16.401" x2="13" y2="13" stroke-linejoin="miter" stroke-linecap="butt"></line> <path data-cap="butt" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" d="M1,13v4c0,1.657,2.686,3,6,3 c1.093,0,2.117-0.147,3-0.402" stroke-linejoin="miter" stroke-linecap="butt"></path> <path data-cap="butt" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" d="M1,17v4c0,1.657,2.686,3,6,3 c1.093,0,2.118-0.147,3-0.402" stroke-linejoin="miter" stroke-linecap="butt"></path> <ellipse fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" cx="7" cy="5" rx="6" ry="3" stroke-linejoin="miter"></ellipse> <path data-cap="butt" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" d="M19,9v4c0,1.657,2.686,3,6,3 s6-1.343,6-3V9" stroke-linejoin="miter" stroke-linecap="butt"></path> <path data-cap="butt" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" d="M22,19.594 C22.883,19.85,23.906,20,25,20c3.314,0,6-1.343,6-3v-4" stroke-linejoin="miter" stroke-linecap="butt"></path> <line data-cap="butt" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" x1="19" y1="13" x2="19" y2="16.401" stroke-linejoin="miter" stroke-linecap="butt"></line> <path data-cap="butt" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" d="M22,23.596 C22.883,23.851,23.907,24,25,24c3.314,0,6-1.343,6-3v-4" stroke-linejoin="miter" stroke-linecap="butt"></path> <ellipse fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" cx="25" cy="9" rx="6" ry="3" stroke-linejoin="miter"></ellipse> <path data-cap="butt" data-color="color-2" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" d="M10,19v4c0,1.657,2.686,3,6,3 s6-1.343,6-3v-4" stroke-linejoin="miter" stroke-linecap="butt"></path> <path data-cap="butt" data-color="color-2" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" d="M10,23v4c0,1.657,2.686,3,6,3 s6-1.343,6-3v-4" stroke-linejoin="miter" stroke-linecap="butt"></path> <ellipse data-color="color-2" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" cx="16" cy="19" rx="6" ry="3" stroke-linejoin="miter"></ellipse></g> | ||
| </SvgIcon> | ||
| ); | ||
| } | ||
|
|
||
| export default function ffOverview() { | ||
|
|
||
| const [ ibff, setIBFF] = useState(null) | ||
| const [ veIBFF, setVeIBFF] = useState(null) | ||
| const [ rewards, setRewards] = useState(null) | ||
| const [ assets, setAssets] = useState(null) | ||
| const [ totalBalanceCurve, setTotalBalanceCurve ] = useState(0) | ||
| const [ totalBalanceConvex, setTotalBalanceConvex ] = useState(0) | ||
| const [ totalBalanceYearn, setTotalBalanceYearn ] = useState(0) | ||
|
|
||
| useEffect(() => { | ||
| const forexUpdated = () => { | ||
| setIBFF(stores.fixedForexStore.getStore('ibff')) | ||
| setVeIBFF(stores.fixedForexStore.getStore('veIBFF')) | ||
| setRewards(stores.fixedForexStore.getStore('rewards')) | ||
| const ass = stores.fixedForexStore.getStore('assets') | ||
| setAssets(ass) | ||
|
|
||
| calculateTotalBalance(ass) | ||
| } | ||
|
|
||
| setIBFF(stores.fixedForexStore.getStore('ibff')) | ||
| setVeIBFF(stores.fixedForexStore.getStore('veIBFF')) | ||
| setRewards(stores.fixedForexStore.getStore('rewards')) | ||
| const ass = stores.fixedForexStore.getStore('assets') | ||
| setAssets(ass) | ||
|
|
||
| calculateTotalBalance(ass) | ||
|
|
||
| stores.emitter.on(FIXED_FOREX_UPDATED, forexUpdated); | ||
| return () => { | ||
| stores.emitter.removeListener(FIXED_FOREX_UPDATED, forexUpdated); | ||
| }; | ||
| }, []); | ||
|
|
||
| const calculateTotalBalance = (ass) => { | ||
| if(!ass) { | ||
| return | ||
| } | ||
|
|
||
| let balanceCurve = 0 | ||
| let balanceConvex = 0 | ||
| let balanceYearn = 0 | ||
|
|
||
| for(let i = 0; i < ass.length; i++) { | ||
| let asset = ass[i] | ||
| if(asset && asset.gauge) { | ||
| let pooledBalance = BigNumber(asset.gauge.userPoolBalance).times(asset.gauge.virtualPrice).times(asset.price) | ||
| let stakedBalance = BigNumber(asset.gauge.userGaugeBalance).times(asset.gauge.virtualPrice).times(asset.price) | ||
| let convexBalance = BigNumber((asset && asset.convex && asset.convex.balance) ? asset.convex.balance : 0).times(asset.gauge.virtualPrice).times(asset.price) | ||
| let yearnBalance = BigNumber((asset && asset.yearn && asset.yearn.userVaultBalance) ? asset.yearn.userVaultBalance : 0).times(asset.price) | ||
|
|
||
| balanceCurve = BigNumber(balanceCurve).plus(stakedBalance).plus(pooledBalance) | ||
| balanceConvex = BigNumber(balanceConvex).plus(convexBalance) | ||
| balanceYearn = BigNumber(balanceYearn).plus(yearnBalance) | ||
| } | ||
| } | ||
|
|
||
| setTotalBalanceCurve(balanceCurve) | ||
| setTotalBalanceConvex(balanceConvex) | ||
| setTotalBalanceYearn(balanceYearn) | ||
| } | ||
|
|
||
| return ( | ||
| <div className={ classes.container }> | ||
| <Grid container spacing={4}> | ||
|
|
||
| <Grid item lg={4} md={4} sm={12} xs={12}> | ||
| <Paper elevation={0} className={ classes.itemWrapGrid }> | ||
| <Grid container spacing={0}> | ||
| <Grid item lg={3} md={3} sm={3} xs={3} className={classes.iconWrap}> | ||
| <IbBalanceIcon className={ classes.overviewIcon } /> | ||
| </Grid> | ||
| <Grid item lg={9} md={9} sm={9} xs={9} className={ classes.itemContent }> | ||
| <Typography className={ classes.title }>Curve (ib*) Balances:</Typography> | ||
| <div className={ classes.inline }> | ||
| <Typography className={ classes.value }>${ formatCurrency(totalBalanceCurve) }</Typography> | ||
| </div> | ||
| </Grid> | ||
| </Grid> | ||
| </Paper> | ||
| </Grid> | ||
|
|
||
| <Grid item lg={4} md={4} sm={12} xs={12}> | ||
| <Paper elevation={0} className={ classes.itemWrapGrid }> | ||
| <Grid container spacing={0}> | ||
| <Grid item lg={3} md={3} sm={3} xs={3} className={classes.iconWrap}> | ||
| <IbBalanceIcon className={ classes.overviewIcon } /> | ||
| </Grid> | ||
| <Grid item lg={9} md={9} sm={9} xs={9} className={ classes.itemContent }> | ||
| <Typography className={ classes.title }>Convex (ib*) Balances:</Typography> | ||
| <div className={ classes.inline }> | ||
| <Typography className={ classes.value }>${ formatCurrency(totalBalanceConvex) }</Typography> | ||
| </div> | ||
| </Grid> | ||
| </Grid> | ||
| </Paper> | ||
| </Grid> | ||
|
|
||
| <Grid item lg={4} md={4} sm={12} xs={12}> | ||
| <Paper elevation={0} className={ classes.itemWrapGrid }> | ||
| <Grid container spacing={0}> | ||
| <Grid item lg={3} md={3} sm={3} xs={3} className={classes.iconWrap}> | ||
| <IbBalanceIcon className={ classes.overviewIcon } /> | ||
| </Grid> | ||
| <Grid item lg={9} md={9} sm={9} xs={9} className={ classes.itemContent }> | ||
| <Typography className={ classes.title }>Yearn (ib*) Balances:</Typography> | ||
| <div className={ classes.inline }> | ||
| <Typography className={ classes.value }>${ formatCurrency(totalBalanceYearn) }</Typography> | ||
| </div> | ||
| </Grid> | ||
| </Grid> | ||
| </Paper> | ||
| </Grid> | ||
|
|
||
| </Grid> | ||
| </div> | ||
| ); | ||
| } |
111 changes: 111 additions & 0 deletions
111
components/ffDashboardAssetOverview/ffDashboardOverview.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| .container { | ||
| width: calc(100% - 0px); | ||
| margin-bottom: 0px; | ||
| } | ||
|
|
||
| .field { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| justify-content: flex-start; | ||
| text-align: left !important; | ||
| margin-right: 30px !important; | ||
| width: auto !important; | ||
| border-radius: 12px; | ||
| } | ||
|
|
||
| @keyframes gradient { | ||
| 0% { | ||
| background-position: 0% 50%; | ||
| } | ||
| 50% { | ||
| background-position: 100% 50%; | ||
| } | ||
| 100% { | ||
| background-position: 0% 50%; | ||
| } | ||
| } | ||
|
|
||
| .title { | ||
| /* background: rgba(256, 256, 256, 0.2); */ | ||
| border-radius: 30px; | ||
| padding: 0px; | ||
| width: 100%; | ||
| font-size: 14px !important; | ||
| margin: 0px 0 6px 0 !important; | ||
| text-align: left !important; | ||
| opacity: 0.6; | ||
| } | ||
|
|
||
| .value { | ||
| font-size: 24px !important; | ||
| font-weight: bold !important; | ||
| text-align: left !important; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .inline { | ||
| display: flex; | ||
| align-items: flex-end; | ||
| } | ||
|
|
||
| .valueSymbol { | ||
| font-size: 20px !important; | ||
| font-weight: bold !important; | ||
| margin-bottom: 2px !important; | ||
| margin-left: 4px !important; | ||
| } | ||
|
|
||
| .overviewIcon { | ||
| color: #fff; | ||
| font-size: 26px !important; | ||
| } | ||
|
|
||
| .itemWrapGrid { | ||
| border-radius: 12px; | ||
| overflow: hidden; | ||
| min-height: 110px; | ||
| border: 1px solid rgba(104,108,122, 0.2) !important; | ||
| padding: 0 !important; | ||
| margin: 0 !important; | ||
| } | ||
|
|
||
| .itemContent { | ||
| background: none; | ||
| display: flex; | ||
| align-items: flex-start; | ||
| justify-content: center; | ||
| flex-direction: column; | ||
| padding-left: 30px; | ||
| text-align: left !important; | ||
| } | ||
|
|
||
| .iconWrap { | ||
| width: 100%; | ||
| min-height: 120px; | ||
| border-radius: 0px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| background: linear-gradient(-45deg, #23a6d5, #234ce7); | ||
| background-size: 200% 200%; | ||
| animation: gradient 35s ease infinite; | ||
| } | ||
|
|
||
| @keyframes gradient { | ||
| 0% { | ||
| background-position: 0% 50%; | ||
| } | ||
| 50% { | ||
| background-position: 100% 50%; | ||
| } | ||
| 100% { | ||
| background-position: 0% 50%; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: 600px) { | ||
| .container { | ||
| margin-bottom: 40px; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "main": "ffDashboardOverview.js" | ||
| } |
Oops, something went wrong.