From 2773a1eef3d896bc49ba5e2b3cfbe0125183c277 Mon Sep 17 00:00:00 2001 From: antonnell Date: Thu, 2 Dec 2021 16:40:30 +0200 Subject: [PATCH] Showing available rewards for Convex staking on asset page. Signed-off-by: antonnell --- components/ffAssetOverview/ffAssetOverview.js | 2 +- .../ffClaimConvexGauge/ffClaimConvexGauge.js | 102 +++++++++++++ .../ffClaimConvexGauge.module.css | 138 ++++++++++++++++++ components/ffClaimConvexGauge/package.json | 3 + .../ffClaimCurveGauge/ffClaimCurveGauge.js | 2 +- .../ffClaimCurveGauge.module.css | 2 +- pages/asset/[address]/curve/index.js | 2 + stores/fixedForexStore.js | 7 +- 8 files changed, 252 insertions(+), 6 deletions(-) create mode 100644 components/ffClaimConvexGauge/ffClaimConvexGauge.js create mode 100644 components/ffClaimConvexGauge/ffClaimConvexGauge.module.css create mode 100644 components/ffClaimConvexGauge/package.json diff --git a/components/ffAssetOverview/ffAssetOverview.js b/components/ffAssetOverview/ffAssetOverview.js index bf258a5..75fc8a5 100644 --- a/components/ffAssetOverview/ffAssetOverview.js +++ b/components/ffAssetOverview/ffAssetOverview.js @@ -64,7 +64,7 @@ export default function ffAssetOverview({ asset }) {
Total Staked: - {formatCurrency(asset?.gauge?.userGaugeBalance)} + {formatCurrency(BigNumber(asset?.gauge?.userGaugeBalance).plus(asset?.convex?.balance))} {asset?.gauge?.poolSymbol}
diff --git a/components/ffClaimConvexGauge/ffClaimConvexGauge.js b/components/ffClaimConvexGauge/ffClaimConvexGauge.js new file mode 100644 index 0000000..2609787 --- /dev/null +++ b/components/ffClaimConvexGauge/ffClaimConvexGauge.js @@ -0,0 +1,102 @@ +import React, { useState, useEffect } from 'react'; +import { Paper, Grid, Typography } from '@material-ui/core'; +import BigNumber from 'bignumber.js'; + +import { formatCurrency } from '../../utils'; +import classes from './ffClaimConvexGauge.module.css'; + +import stores from '../../stores' +import { ERROR, FIXED_FOREX_CLAIM_CURVE_REWARDS, FIXED_FOREX_CURVE_REWARD_CLAIMED } from '../../stores/constants'; + +export default function ffClaimConvexGauge({ asset }) { + + const [ loading, setLoading ] = useState(false) + + useEffect(() => { + const rewardClaimed = () => { + setLoading(false) + } + + stores.emitter.on(FIXED_FOREX_CURVE_REWARD_CLAIMED, rewardClaimed); + stores.emitter.on(ERROR, rewardClaimed); + return () => { + stores.emitter.removeListener(FIXED_FOREX_CURVE_REWARD_CLAIMED, rewardClaimed); + stores.emitter.removeListener(ERROR, rewardClaimed); + }; + }, []); + + const claim = () => { + if(BigNumber(asset && asset.gauge ? asset.gauge.earned : 0).gt(0)) { + setLoading(true) + stores.dispatcher.dispatch({ type: FIXED_FOREX_CLAIM_CURVE_REWARDS, content: { asset }}) + } + } + + return ( +
+ +
{ claim() } }> + + +
+ Convex Logo +
+ Convex + Gauge Rewards +
+
+ + +
+ { formatCurrency(asset && asset.convex ? asset.convex.earnedCRV : 0) } CRV + { BigNumber(asset && asset.convex ? asset.convex.earnedCRV : 0).gt(0) && +
+ + ${ formatCurrency(asset && asset.convex ? asset.convex.earnedCRV : 0) } +  (Pull Dollar value here) + +
+ } +
+
+ { formatCurrency(asset && asset.convex ? asset.convex.earnedCVX : 0) } CVX + { BigNumber(asset && asset.convex ? asset.convex.earnedCVX : 0).gt(0) && +
+ + ${ formatCurrency(asset && asset.convex ? asset.convex.earnedCVX : 0) } +  (Pull Dollar value here) + +
+ } +
+
+ { formatCurrency(asset && asset.convex ? asset.convex.earnedRKP3R : 0) } rKP3R + { BigNumber(asset && asset.convex ? asset.convex.earnedRKP3R : 0).gt(0) && +
+ + ${ formatCurrency(asset && asset.convex ? asset.convex.earnedRKP3R : 0) } +  (Pull Dollar value here) + +
+ } +
+ + +
+ { BigNumber(asset && asset.convex ? asset.convex.earnedCRV : 0).gt(0) && + Claim Now + } + { !BigNumber(asset && asset.convex ? asset.convex.earnedCRV : 0).gt(0) && + Stake in gauge to earn rewards + } +
+ + + { BigNumber(asset && asset.convex ? asset.convex.earnedCRV : 0).gt(0) && +
+ } +
+ +
+ ); +} diff --git a/components/ffClaimConvexGauge/ffClaimConvexGauge.module.css b/components/ffClaimConvexGauge/ffClaimConvexGauge.module.css new file mode 100644 index 0000000..0a2c23f --- /dev/null +++ b/components/ffClaimConvexGauge/ffClaimConvexGauge.module.css @@ -0,0 +1,138 @@ +.container { + width: calc(100%); + margin: 0; + margin-top: 0px; + position: relative; + right: 0 !important; +} + +.container:hover { +} + +.title { + font-size: 20px !important; + margin-bottom: 24px !important; + margin-top: 0 !important; +} + +.lpOptionsContainer { + /* border: 1px solid rgba(104, 108, 122, 0.2); */ + border: 1px solid rgba(104,108,122,0.2); + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-evenly; + cursor: pointer; + -webkit-transition: all 300ms ease-out !important; + -moz-transition: all 300ms ease-out !important; + -ms-transition: all 300ms ease-out !important; + -o-transition: all 600ms ease-out !important; + transition: all 300ms ease-out !important; +} + +.lpOptionsContainer:hover { + border-radius: 10px; + box-sizing: border-box !important; + -webkit-box-shadow: 0px 3px 0px 0 #4aa166 !important; + box-shadow: 0px 3px 0px 0 #4aa166 !important; + transform: translate(0px, -3px); +} + +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +.lpOption { + position: relative; + flex: 1; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0px; + transition: background 0.5s ease; +} + +.lpOptionTitle { + display: flex; + align-items: center; + background: none; + border-bottom: 1px solid rgba(104,108,122,0.2); + padding: 17px 30px 20px 30px; + border-radius: 10px 10px 0px 0px; +} + +.lpOptionName { + font-size: 20px !important; + margin: 0 !important; + font-weight: 700 !important; +} + +.lpOptionDescription { + font-size: 15px !important; + opacity: 0.7; + margin-top: 5px !important; +} + +.lpOptionIcon { + margin-right: 15px; + margin-left: -5px; + transform: scale(.6); +} + +.activeIcon { + height: 10px; + width: 10px; + background-color: #0ba360; + border-radius: 50%; + display: inline-block; + position: absolute; + right: 12px; + top: 12px; +} + +.center { + display: flex; + align-items: center; + height: 100%; + padding: 0px 30px 30px 30px; + text-align: center !important; +} + +.amountText { + font-size: 34px !important; + font-weight: bold !important; + padding: 10px 30px 0px 30px; + text-align: center !important; +} + +.iHazRewardz { + background: gold !important; + opacity: 1 !important; + width: 100%; + color: #000 !important; + padding: 15px 25px !important; + text-align: center !important; + border-radius: 10px; +} + +.iHazNoRewardz { + width: 100%; + text-align: center !important; + opacity: 0.5 !important; +} + +.dollarValue { + width: 100%; + text-align: center !important; + opacity: 0.5 !important; + margin: 10px 0 !important; + display: none; +} diff --git a/components/ffClaimConvexGauge/package.json b/components/ffClaimConvexGauge/package.json new file mode 100644 index 0000000..7283253 --- /dev/null +++ b/components/ffClaimConvexGauge/package.json @@ -0,0 +1,3 @@ +{ + "main": "ffClaimConvexGauge.js" +} diff --git a/components/ffClaimCurveGauge/ffClaimCurveGauge.js b/components/ffClaimCurveGauge/ffClaimCurveGauge.js index 529cd93..392ba2b 100644 --- a/components/ffClaimCurveGauge/ffClaimCurveGauge.js +++ b/components/ffClaimCurveGauge/ffClaimCurveGauge.js @@ -39,7 +39,7 @@ export default function ffClaimCurveGauge({ asset }) {
- FF Logo + Curve Logo
Curve Gauge Rewards diff --git a/components/ffClaimCurveGauge/ffClaimCurveGauge.module.css b/components/ffClaimCurveGauge/ffClaimCurveGauge.module.css index 0a2c23f..d7ea401 100644 --- a/components/ffClaimCurveGauge/ffClaimCurveGauge.module.css +++ b/components/ffClaimCurveGauge/ffClaimCurveGauge.module.css @@ -1,7 +1,7 @@ .container { width: calc(100%); margin: 0; - margin-top: 0px; + margin-top: 20px; position: relative; right: 0 !important; } diff --git a/pages/asset/[address]/curve/index.js b/pages/asset/[address]/curve/index.js index effa82d..483ec4d 100644 --- a/pages/asset/[address]/curve/index.js +++ b/pages/asset/[address]/curve/index.js @@ -12,6 +12,7 @@ import FFCurveGauge from '../../../../components/ffCurveGauge' import FFConvexGauge from '../../../../components/ffConvexGauge' import FFClaimCurveGauge from '../../../../components/ffClaimCurveGauge' import FFClaimCurveRKP3RGauge from '../../../../components/ffClaimCurveRKP3RGauge' +import FFClaimConvexGauge from '../../../../components/ffClaimConvexGauge' import classes from './curve.module.css'; @@ -73,6 +74,7 @@ function Asset({ changeTheme }) { Claimable Rewards
+
diff --git a/stores/fixedForexStore.js b/stores/fixedForexStore.js index 7669f48..554aff6 100644 --- a/stores/fixedForexStore.js +++ b/stores/fixedForexStore.js @@ -911,9 +911,10 @@ class Store { assets[i].convex.balance = BigNumber(assetsBalances[i].convexBalanceOf).div(10**18).toFixed(18) assets[i].convex.earnedCRV = BigNumber(assetsBalances[i].convexEarned).div(10**18).toFixed(18) // this is crv - const cliff = BigNumber(assetsBalances[i].convexTotalSupply).div(assetsBalances[i].reductionPerCliff) - const reduction = BigNumber(assetsBalances[i].convexTotalCliffs).minus(cliff) - assets[i].convex.earnedCVX = BigNumber(assetsBalances[i].convexEarned).times(reduction).div(assetsBalances[i].convexTotalCliffs).toFixed(18) // this is crv + const cliff = BigNumber(assetsBalances[i].convexTotalSupply).div(assetsBalances[i].convexReductionPerCliff).toFixed(18) + const reduction = BigNumber(assetsBalances[i].convexTotalCliffs).minus(cliff).toFixed(18) + + assets[i].convex.earnedCVX = BigNumber(assetsBalances[i].convexEarned).times(reduction).div(assetsBalances[i].convexTotalCliffs).div(10**18).toFixed(18) // this is crv assets[i].convex.earnedRKP3R = BigNumber(assetsBalances[i].convexRewardCallsResponse).div(10**18).toFixed(18) assets[i].convex.poolGaugeAllowance = BigNumber(assetsBalances[i].poolConvexAllowance).div(10**18).toFixed(18)