From 7dc6525748399cd4e0fe841050ca6f2b2920c001 Mon Sep 17 00:00:00 2001
From: Mark Grothe <grothem@gmail.com>
Date: Tue, 7 May 2024 03:54:05 -0500
Subject: [PATCH] fix: merit badge (#2062)

---
 pages/staking.staking.tsx                     | 11 ----------
 .../incentives/IncentivesButton.tsx           | 11 ++++++----
 src/modules/staking/StakingPanel.tsx          | 20 ++++++++++++++++++-
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/pages/staking.staking.tsx b/pages/staking.staking.tsx
index eac8d83465..35ecd5d61a 100644
--- a/pages/staking.staking.tsx
+++ b/pages/staking.staking.tsx
@@ -9,10 +9,6 @@ import dynamic from 'next/dynamic';
 import { useEffect, useState } from 'react';
 import { ConnectWalletPaperStaking } from 'src/components/ConnectWalletPaperStaking';
 import { ContentContainer } from 'src/components/ContentContainer';
-import {
-  MeritIncentivesButton,
-  UserMeritIncentivesButton,
-} from 'src/components/incentives/IncentivesButton';
 import { Link } from 'src/components/primitives/Link';
 import { Warning } from 'src/components/primitives/Warning';
 import StyledToggleButton from 'src/components/StyledToggleButton';
@@ -228,13 +224,6 @@ export default function Staking() {
                   onCooldownAction={() => openStakeCooldown(Stake.gho, 'GHO')}
                   onUnstakeAction={() => openUnstake(Stake.gho, 'GHO')}
                   onStakeRewardClaimAction={() => openStakeRewardsClaim(Stake.gho, 'AAVE')}
-                  headerAction={
-                    stkGhoUserData?.stakeTokenUserBalance !== '0' ? (
-                      <UserMeritIncentivesButton symbol="stkgho" />
-                    ) : (
-                      <MeritIncentivesButton symbol="stkgho" />
-                    )
-                  }
                 />
               </Grid>
 
diff --git a/src/components/incentives/IncentivesButton.tsx b/src/components/incentives/IncentivesButton.tsx
index 810f635f82..d685f1dec8 100644
--- a/src/components/incentives/IncentivesButton.tsx
+++ b/src/components/incentives/IncentivesButton.tsx
@@ -62,7 +62,7 @@ export const UserMeritIncentivesButton = ({ symbol }: { symbol: 'gho' | 'stkgho'
       setOpen={setOpen}
       open={open}
     >
-      <Content incentives={[incentives]} incentivesNetAPR={+incentives.incentiveAPR} />
+      <Content incentives={[incentives]} incentivesNetAPR={+incentives.incentiveAPR} plus />
     </ContentWithTooltip>
   );
 };
@@ -93,7 +93,7 @@ export const MeritIncentivesButton = ({ symbol }: { symbol: 'gho' | 'stkgho' })
       setOpen={setOpen}
       open={open}
     >
-      <Content incentives={[incentives]} incentivesNetAPR={+incentives.incentiveAPR} />
+      <Content incentives={[incentives]} incentivesNetAPR={+incentives.incentiveAPR} plus />
     </ContentWithTooltip>
   );
 };
@@ -148,10 +148,12 @@ const Content = ({
   incentives,
   incentivesNetAPR,
   displayBlank,
+  plus,
 }: {
   incentives: ReserveIncentiveResponse[];
   incentivesNetAPR: number | 'Infinity';
   displayBlank?: boolean;
+  plus?: boolean;
 }) => {
   const [open, setOpen] = useState(false);
   const trackEvent = useRootStore((store) => store.trackEvent);
@@ -226,8 +228,9 @@ const Content = ({
         setOpen(!open);
       }}
     >
-      <Box sx={{ mr: 2 }}>{incentivesButtonValue()}</Box>
-
+      <Box sx={{ mr: 2 }}>
+        {plus ? '+' : ''} {incentivesButtonValue()}
+      </Box>
       <Box sx={{ display: 'inline-flex' }}>
         <>
           {incentives.length < 5 ? (
diff --git a/src/modules/staking/StakingPanel.tsx b/src/modules/staking/StakingPanel.tsx
index 7331b4f40d..d5f968f012 100644
--- a/src/modules/staking/StakingPanel.tsx
+++ b/src/modules/staking/StakingPanel.tsx
@@ -17,6 +17,10 @@ import {
 import { BigNumber } from 'ethers';
 import { formatEther, formatUnits } from 'ethers/lib/utils';
 import React from 'react';
+import {
+  MeritIncentivesButton,
+  UserMeritIncentivesButton,
+} from 'src/components/incentives/IncentivesButton';
 import { DarkTooltip } from 'src/components/infoTooltips/DarkTooltip';
 import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
 import { Link } from 'src/components/primitives/Link';
@@ -320,7 +324,21 @@ export const StakingPanel: React.FC<StakingPanelProps> = ({
               </TextWithTooltip>
             )}
           </Stack>
-          <FormattedNumber value={stakeData.stakeApyFormatted} percent variant="secondary14" />
+          <Stack direction="row" alignItems="center">
+            <FormattedNumber
+              sx={{ mr: 2 }}
+              value={stakeData.stakeApyFormatted}
+              percent
+              variant="secondary14"
+            />
+            {stakedToken === 'GHO' ? (
+              stakeUserData.stakeTokenUserBalance !== '0' ? (
+                <UserMeritIncentivesButton symbol="stkgho" />
+              ) : (
+                <MeritIncentivesButton symbol="stkgho" />
+              )
+            ) : null}
+          </Stack>
         </Box>
         <Box
           sx={{