feat: estimated sgho rewards

package.json

@@ -49,6 +49,7 @@
     "@mui/icons-material": "^5.10.14",
     "@mui/lab": "5.0.0-alpha.103",
     "@mui/material": "^5.10.9",
+    "@number-flow/react": "^0.5.10",
     "@paraswap/sdk": "6.10.0",
     "@safe-global/safe-apps-provider": "^0.18.4",
     "@safe-global/safe-apps-sdk": "^9.1.0",

src/components/AddressBlockedModal.tsx

@@ -46,7 +46,7 @@ export const AddressBlockedModal = ({
               <br />
               <Typography variant="helperText" sx={{ mb: 1 }}>
                 {' '}
-                <Trans>error code: 1</Trans>{' '}
+                <Trans>error code: 2455</Trans>{' '}
               </Typography>
             </>
           )}

src/locales/en/messages.po

@@ -1026,6 +1026,10 @@ msgstr "Reactivate cooldown period to unstake {0} {stakedToken}"
 msgid "Migrate to v3"
 msgstr "Migrate to v3"
 
+#: src/components/AddressBlockedModal.tsx
+msgid "error code: 2455"
+msgstr "error code: 2455"
+
 #: src/components/transactions/Bridge/BridgeModalContent.tsx
 msgid "The source chain time to finality is the main factor that determines the time to destination. <0>Learn more</0>"
 msgstr "The source chain time to finality is the main factor that determines the time to destination. <0>Learn more</0>"
@@ -1450,10 +1454,6 @@ msgstr "Maximum amount received"
 msgid "Activating Cooldown"
 msgstr "Activating Cooldown"
 
-#: src/components/AddressBlockedModal.tsx
-msgid "error code: 1"
-msgstr "error code: 1"
-
 #: src/components/transactions/GovDelegation/GovDelegationModalContent.tsx
 msgid "Recipient address"
 msgstr "Recipient address"
@@ -1523,6 +1523,10 @@ msgstr "View all"
 msgid "Swap to"
 msgstr "Swap to"
 
+#: src/modules/sGho/SGhoHeader.tsx
+msgid "Weekly Rewards"
+msgstr "Weekly Rewards"
+
 #: src/components/transactions/CollateralChange/CollateralChangeActions.tsx
 #: src/components/transactions/Faucet/FaucetActions.tsx
 msgid "Pending..."
@@ -2754,6 +2758,10 @@ msgstr "Safety Module"
 msgid "Deposit GHO into savings GHO (sGHO) and earn <0>{0}%</0> APY on your GHO holdings. There's no lockups, no rehypothecation, and you can withdraw anytime. Simply deposit GHO, receive sGHO tokens representing your balance, and watch your savings grow earning claimable rewards from merit."
 msgstr "Deposit GHO into savings GHO (sGHO) and earn <0>{0}%</0> APY on your GHO holdings. There's no lockups, no rehypothecation, and you can withdraw anytime. Simply deposit GHO, receive sGHO tokens representing your balance, and watch your savings grow earning claimable rewards from merit."
 
+#: src/modules/sGho/SGhoHeader.tsx
+msgid "Estimated weekly rewards based on your current sGHO balance and APR. Actual rewards may vary depending on market conditions."
+msgstr "Estimated weekly rewards based on your current sGHO balance and APR. Actual rewards may vary depending on market conditions."
+
 #: src/modules/dashboard/lists/SlippageList.tsx
 msgid "Select slippage tolerance"
 msgstr "Select slippage tolerance"

src/modules/sGho/SGhoHeader.tsx

@@ -1,12 +1,19 @@
+import { Stake } from '@aave/contract-helpers';
+import { valueToBigNumber } from '@aave/math-utils';
 import { AaveSafetyModule } from '@bgd-labs/aave-address-book';
 import { Trans } from '@lingui/macro';
 import { Box, Stack, Typography, useMediaQuery, useTheme } from '@mui/material';
-import { useEffect } from 'react';
+import NumberFlow from '@number-flow/react';
+import { BigNumber } from 'bignumber.js';
+import { formatEther } from 'ethers/lib/utils';
+import { useEffect, useState } from 'react';
 import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
 import { TokenIcon } from 'src/components/primitives/TokenIcon';
+import { TextWithTooltip } from 'src/components/TextWithTooltip';
 import { TopInfoPanel } from 'src/components/TopInfoPanel/TopInfoPanel';
 import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
 import { StakeTokenFormatted, useGeneralStakeUiData } from 'src/hooks/stake/useGeneralStakeUiData';
+import { useUserStakeUiData } from 'src/hooks/stake/useUserStakeUiData';
 import { useStakeTokenAPR } from 'src/hooks/useStakeTokenAPR';
 import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { useRootStore } from 'src/store/root';
@@ -68,7 +75,10 @@ export const SGHOHeader: React.FC = () => {
             <Trans>
               Deposit GHO into savings GHO (sGHO) and earn{' '}
               <Box component="span" sx={{ color: '#338E3C', fontWeight: 'bold' }}>
-                {((stakeAPR?.apr ? convertAprToApy(parseFloat(stakeAPR.apr)) : 0) * 100).toFixed(2)}
+                {(
+                  (stakeAPR?.apr ? convertAprToApy(new BigNumber(stakeAPR.apr).toNumber()) : 0) *
+                  100
+                ).toFixed(2)}
                 %
               </Box>{' '}
               APY on your GHO holdings. There&apos;s no lockups, no rehypothecation, and you can
@@ -90,6 +100,7 @@ export const SGHOHeader: React.FC = () => {
 };
 
 const SGhoHeaderUserDetails = ({
+  currentMarketData,
   valueTypographyVariant,
   symbolsTypographyVariant,
   stkGho,
@@ -100,6 +111,7 @@ const SGhoHeaderUserDetails = ({
   stkGho: StakeTokenFormatted;
 }) => {
   const { data: stakeAPR, isLoading: isLoadingStakeAPR } = useStakeTokenAPR();
+  const { data: stakeUserResult } = useUserStakeUiData(currentMarketData, Stake.gho);
   const { reserves } = useAppDataContext();
 
   const {
@@ -114,13 +126,33 @@ const SGhoHeaderUserDetails = ({
 
   const downToSM = useMediaQuery(theme.breakpoints.down('sm'));
 
+  const stakeUserData = stakeUserResult?.[0];
+  const userSGhoBalance = stakeUserData?.stakeTokenRedeemableAmount || '0';
+  const userSGhoBalanceFormatted = formatEther(userSGhoBalance);
+
+  // Calculate estimated weekly rewards with precision
+  // Formula: (balance * APR) / 52 weeks
+  const aprBN = stakeAPR?.apr ? new BigNumber(stakeAPR.apr) : new BigNumber(0);
+  const balanceBN = new BigNumber(userSGhoBalanceFormatted || '0');
+  const weeklyRewardsEstimateBN = balanceBN.multipliedBy(aprBN).dividedBy(52);
+  const weeklyRewardsEstimate = weeklyRewardsEstimateBN.toNumber();
+
+  const [displayedWeeklyRewards, setDisplayedWeeklyRewards] = useState(0);
+
+  const symbolsColor = theme.palette.text.muted;
+  const iconSize = valueTypographyVariant === 'main21' ? 20 : 16;
+
+  useEffect(() => {
+    setDisplayedWeeklyRewards(Math.max(0, weeklyRewardsEstimate));
+  }, [weeklyRewardsEstimate]);
+
   return (
     <>
       <TopInfoPanelItem hideIcon title={<Trans>APY</Trans>} loading={isLoadingStakeAPR}>
         <FormattedNumber
-          value={stakeAPR?.apr ? convertAprToApy(parseFloat(stakeAPR.apr)) : 0}
+          value={stakeAPR?.apr ? convertAprToApy(valueToBigNumber(stakeAPR.apr).toNumber()) : 0}
           variant={valueTypographyVariant}
-          symbolsColor="#A5A8B6"
+          symbolsColor={symbolsColor}
           visibleDecimals={2}
           percent
           symbolsVariant={symbolsTypographyVariant}
@@ -140,7 +172,7 @@ const SGhoHeaderUserDetails = ({
           symbol="USD"
           variant={valueTypographyVariant}
           symbolsVariant={symbolsTypographyVariant}
-          symbolsColor="#A5A8B6"
+          symbolsColor={symbolsColor}
           visibleDecimals={2}
         />
       </TopInfoPanelItem>
@@ -158,11 +190,77 @@ const SGhoHeaderUserDetails = ({
           symbol="USD"
           variant={valueTypographyVariant}
           symbolsVariant={symbolsTypographyVariant}
-          symbolsColor="#A5A8B6"
+          symbolsColor={symbolsColor}
           visibleDecimals={2}
         />
       </TopInfoPanelItem>
 
+      <TopInfoPanelItem
+        hideIcon
+        title={
+          <Stack direction="row" alignItems="center">
+            <TextWithTooltip text={<Trans>Weekly Rewards</Trans>} variant="inherit">
+              <Trans>
+                Estimated weekly rewards based on your current sGHO balance and APR. Actual rewards
+                may vary depending on market conditions.
+              </Trans>
+            </TextWithTooltip>
+          </Stack>
+        }
+        loading={isLoadingStakeAPR}
+      >
+        {balanceBN.gt(0) ? (
+          <Typography
+            variant={valueTypographyVariant}
+            sx={{
+              display: 'inline-flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              position: 'relative',
+              '& number-flow-react.custom-number-flow': {
+                '--number-flow-mask-height': '0',
+                '--number-flow-char-height': '1em',
+                fontVariantNumeric: 'tabular-nums',
+                display: 'inline-block',
+                verticalAlign: 'baseline',
+                paddingLeft: '12px',
+                paddingRight: '12px',
+                paddingTop: '2px',
+              },
+            }}
+            noWrap
+          >
+            <NumberFlow
+              value={displayedWeeklyRewards}
+              format={{
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2,
+              }}
+              style={{
+                color: 'inherit',
+                fontFamily: 'inherit',
+                fontSize: 'inherit',
+                fontWeight: 'inherit',
+                lineHeight: 'inherit',
+              }}
+              className="custom-number-flow"
+            />
+            <TokenIcon
+              symbol="sgho"
+              sx={{
+                ml: 0.5,
+                width: iconSize,
+                height: iconSize,
+              }}
+            />
+          </Typography>
+        ) : (
+          <Typography variant={valueTypographyVariant} color={symbolsColor}>
+            —
+          </Typography>
+        )}
+      </TopInfoPanelItem>
+
       <Box sx={{ display: 'inline-flex', alignItems: 'center', height: '40px' }}>
         {poolReserve && (
           <>

yarn.lock

@@ -3492,6 +3492,14 @@
   resolved "https://registry.yarnpkg.com/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz#3dc35ba0f1e66b403c00b39344f870298ebb1c8e"
   integrity sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==
 
+"@number-flow/react@^0.5.10":
+  version "0.5.10"
+  resolved "https://registry.yarnpkg.com/@number-flow/react/-/react-0.5.10.tgz#7468384c0aaf03148986e4948d534ac832fe42e9"
+  integrity sha512-a8Wh5eNITn7Km4xbddAH7QH8eNmnduR6k34ER1hkHSGO4H2yU1DDnuAWLQM99vciGInFODemSc0tdxrXkJEpbA==
+  dependencies:
+    esm-env "^1.1.4"
+    number-flow "0.5.8"
+
 "@openzeppelin/merkle-tree@^1.0.8":
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/@openzeppelin/merkle-tree/-/merkle-tree-1.0.8.tgz#31ea9cdc09de37315c32650a9772db1352dcdcd8"
@@ -7516,6 +7524,11 @@ eslint@^8.29.0:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
+esm-env@^1.1.4:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/esm-env/-/esm-env-1.2.2.tgz#263c9455c55861f41618df31b20cb571fc20b75e"
+  integrity sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==
+
 espree@^9.6.0, espree@^9.6.1:
   version "9.6.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
@@ -10995,6 +11008,13 @@ nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
+[email protected]:
+  version "0.5.8"
+  resolved "https://registry.yarnpkg.com/number-flow/-/number-flow-0.5.8.tgz#39bbf5fbce414513f1add06d717c27a299f1e433"
+  integrity sha512-FPr1DumWyGi5Nucoug14bC6xEz70A1TnhgSHhKyfqjgji2SOTz+iLJxKtv37N5JyJbteGYCm6NQ9p1O4KZ7iiA==
+  dependencies:
+    esm-env "^1.1.4"
+
 nwsapi@^2.2.2:
   version "2.2.16"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.16.tgz#177760bba02c351df1d2644e220c31dfec8cdb43"