Showing available rewards for Convex staking on asset page.

Signed-off-by: antonnell <[email protected]>
SeaSaltyFunk · Dec 2, 2021 · 2773a1e · 2773a1e
1 parent dcdb256
commit 2773a1e
Show file tree

Hide file tree

Showing 8 changed files with 252 additions and 6 deletions.
diff --git a/components/ffAssetOverview/ffAssetOverview.js b/components/ffAssetOverview/ffAssetOverview.js
@@ -64,7 +64,7 @@ export default function ffAssetOverview({ asset }) {
           </div>
           <div className={ classes.flex1 }>
             <Typography className={ classes.title }>Total Staked:</Typography>
-            <Typography className={ classes.stakedAmount }>{formatCurrency(asset?.gauge?.userGaugeBalance)}</Typography>
+            <Typography className={ classes.stakedAmount }>{formatCurrency(BigNumber(asset?.gauge?.userGaugeBalance).plus(asset?.convex?.balance))}</Typography>
             <Typography className={ classes.assetSymbol }>{asset?.gauge?.poolSymbol}</Typography>
           </div>
         </div>

diff --git a/components/ffClaimConvexGauge/ffClaimConvexGauge.js 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 (
+    <div className={ classes.container}>
+      <Paper elevation={0} className={ classes.lpOptionsContainer }>
+        <div className={ classes.lpOption } onClick={ () => { claim() } }>
+        <Grid container spacing={2}>
+          <Grid item lg={12} md={12} xs={12}>
+            <div className={ classes.lpOptionTitle }>
+              <img className={ classes.lpOptionIcon } src='/images/Convex.png' alt='Convex Logo' width={ 60 } height={ 60 } />
+              <div>
+                <Typography className={ classes.lpOptionName }>Convex</Typography>
+                <Typography className={ classes.lpOptionDescription }>Gauge Rewards</Typography>
+              </div>
+            </div>
+          </Grid>
+          <Grid item lg={12} md={12} xs={12}>
+            <div>
+              <Typography className={ classes.amountText }>{ formatCurrency(asset && asset.convex ? asset.convex.earnedCRV : 0) } CRV</Typography>
+              { BigNumber(asset && asset.convex ? asset.convex.earnedCRV : 0).gt(0) &&
+                <div>
+                  <Typography className={classes.dollarValue}>
+                  ${ formatCurrency(asset && asset.convex ? asset.convex.earnedCRV : 0) }
+                  &nbsp;(Pull Dollar value here)
+                  </Typography>
+                </div>
+              }
+            </div>
+            <div>
+              <Typography className={ classes.amountText }>{ formatCurrency(asset && asset.convex ? asset.convex.earnedCVX : 0) } CVX</Typography>
+              { BigNumber(asset && asset.convex ? asset.convex.earnedCVX : 0).gt(0) &&
+                <div>
+                  <Typography className={classes.dollarValue}>
+                  ${ formatCurrency(asset && asset.convex ? asset.convex.earnedCVX : 0) }
+                  &nbsp;(Pull Dollar value here)
+                  </Typography>
+                </div>
+              }
+            </div>
+            <div>
+              <Typography className={ classes.amountText }>{ formatCurrency(asset && asset.convex ? asset.convex.earnedRKP3R : 0) } rKP3R</Typography>
+              { BigNumber(asset && asset.convex ? asset.convex.earnedRKP3R : 0).gt(0) &&
+                <div>
+                  <Typography className={classes.dollarValue}>
+                  ${ formatCurrency(asset && asset.convex ? asset.convex.earnedRKP3R : 0) }
+                  &nbsp;(Pull Dollar value here)
+                  </Typography>
+                </div>
+              }
+            </div>
+          </Grid>
+          <Grid item lg={12} md={12} xs={12}>
+            <div className={ classes.center}>
+              { BigNumber(asset && asset.convex ? asset.convex.earnedCRV : 0).gt(0) &&
+                <Typography className={classes.iHazRewardz}>Claim Now</Typography>
+              }
+              { !BigNumber(asset && asset.convex ? asset.convex.earnedCRV : 0).gt(0) &&
+                <Typography className={classes.iHazNoRewardz}>Stake in gauge to earn rewards</Typography>
+              }
+            </div>
+          </Grid>
+        </Grid>
+        { BigNumber(asset && asset.convex ? asset.convex.earnedCRV : 0).gt(0) &&
+          <div className={ classes.activeIcon }></div>
+        }
+      </div>
+      </Paper>
+    </div>
+  );
+}
diff --git a/components/ffClaimConvexGauge/ffClaimConvexGauge.module.css 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
@@ -0,0 +1,3 @@
+{
+  "main": "ffClaimConvexGauge.js"
+}
diff --git a/components/ffClaimCurveGauge/ffClaimCurveGauge.js b/components/ffClaimCurveGauge/ffClaimCurveGauge.js
@@ -39,7 +39,7 @@ export default function ffClaimCurveGauge({ asset }) {
         <Grid container spacing={2}>
           <Grid item lg={12} md={12} xs={12}>
             <div className={ classes.lpOptionTitle }>
-              <img className={ classes.lpOptionIcon } src='/images/Curve.png' alt='FF Logo' width={ 60 } height={ 60 } />
+              <img className={ classes.lpOptionIcon } src='/images/Curve.png' alt='Curve Logo' width={ 60 } height={ 60 } />
               <div>
                 <Typography className={ classes.lpOptionName }>Curve</Typography>
                 <Typography className={ classes.lpOptionDescription }>Gauge Rewards</Typography>

diff --git 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
@@ -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 }) {
           <Grid className={classes.columnRight} item lg={4} md={12} sm={12} xs={12}>
             <Typography variant="h5" className={ classes.title}>Claimable Rewards</Typography>
             <div className={classes.rewardsWrap}>
+              <FFClaimConvexGauge asset={ asset } />
               <FFClaimCurveGauge asset={ asset } />
               <FFClaimCurveRKP3RGauge asset={ asset } />
             </div>

diff --git 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)