Merge remote-tracking branch 'origin/main' into feat/update-tooltip-celo

Author: AGMASO

src/locales/el/messages.js

@@ -70,6 +70,10 @@ msgstr "Estimated time"
 msgid "Remind me"
 msgstr "Remind me"
 
+#: src/modules/umbrella/helpers/StakedUnderlyingTooltip.tsx
+msgid "Total amount of underlying assets staked. This number represents the combined sum of your original asset and the corresponding aTokens staked in Umbrella."
+msgstr "Total amount of underlying assets staked. This number represents the combined sum of your original asset and the corresponding aTokens staked in Umbrella."
+
 #: src/modules/umbrella/helpers/ApyTooltip.tsx
 msgid "Reward APY adjusts with total staked amount, following a curve that targets optimal staking levels."
 msgstr "Reward APY adjusts with total staked amount, following a curve that targets optimal staking levels."
@@ -196,7 +200,7 @@ msgstr "Please connect a wallet to view your personal information here."
 msgid "USDT on Ethereum requires approval reset before a new approval. This will require an additional transaction."
 msgstr "USDT on Ethereum requires approval reset before a new approval. This will require an additional transaction."
 
-#: src/modules/umbrella/AmountStakedItem.tsx
+#: src/modules/umbrella/AmountSharesItem.tsx
 msgid "After the cooldown period ends, you will enter the unstake window of {0}. You will continue receiving rewards during cooldown and the unstake period."
 msgstr "After the cooldown period ends, you will enter the unstake window of {0}. You will continue receiving rewards during cooldown and the unstake period."
 
@@ -364,6 +368,7 @@ msgstr "Maximum available to borrow"
 msgid "Sign to continue"
 msgstr "Sign to continue"
 
+#: src/modules/umbrella/UmbrellaHeader.tsx
 #: src/modules/umbrella/UmbrellaHeader.tsx
 msgid "Total amount staked"
 msgstr "Total amount staked"
@@ -462,10 +467,6 @@ msgstr "Signing"
 msgid "Repay {symbol}"
 msgstr "Repay {symbol}"
 
-#: src/modules/umbrella/StakeAssets/UmbrellaAssetsListMobileItem.tsx
-msgid "Your staked amount"
-msgstr "Your staked amount"
-
 #: src/modules/sGho/SavingsGhoCard.tsx
 #: src/modules/sGho/SGhoDepositPanel.tsx
 #: src/modules/staking/GhoStakingPanel.tsx
@@ -569,7 +570,7 @@ msgstr "Claim all"
 #: src/modules/sGho/SGhoDepositPanel.tsx
 #: src/modules/staking/GhoStakingPanel.tsx
 #: src/modules/staking/StakingPanel.tsx
-#: src/modules/umbrella/AmountStakedItem.tsx
+#: src/modules/umbrella/AmountSharesItem.tsx
 msgid "Time remaining until the withdraw period ends."
 msgstr "Time remaining until the withdraw period ends."
 
@@ -762,6 +763,10 @@ msgstr "Protocol borrow cap at 100% for this asset. Further borrowing unavailabl
 msgid "Stable"
 msgstr "Stable"
 
+#: src/modules/umbrella/helpers/SharesTooltip.tsx
+msgid "Shares"
+msgstr "Shares"
+
 #: src/components/transactions/DebtSwitch/DebtSwitchModalContent.tsx
 msgid "Variable rate"
 msgstr "Variable rate"
@@ -1748,10 +1753,14 @@ msgstr "Show Frozen or paused assets"
 #: src/modules/sGho/SGhoDepositPanel.tsx
 #: src/modules/staking/GhoStakingPanel.tsx
 #: src/modules/staking/StakingPanel.tsx
-#: src/modules/umbrella/AmountStakedItem.tsx
+#: src/modules/umbrella/AmountSharesItem.tsx
 msgid "Amount in cooldown"
 msgstr "Amount in cooldown"
 
+#: src/modules/umbrella/helpers/SharesTooltip.tsx
+msgid "Shares are Umbrella Stake Tokens you receive when staking. They represent your ownership in the pool, and the amount of underlying you can redeem depends on the current exchange rate between shares and the underlying."
+msgstr "Shares are Umbrella Stake Tokens you receive when staking. They represent your ownership in the pool, and the amount of underlying you can redeem depends on the current exchange rate between shares and the underlying."
+
 #: src/modules/governance/proposal/VotersListContainer.tsx
 msgid "Failed to load proposal voters. Please refresh the page."
 msgstr "Failed to load proposal voters. Please refresh the page."
@@ -2029,6 +2038,10 @@ msgstr "Amount to Bridge"
 msgid "Please always be aware of your <0>Health Factor (HF)</0> when partially migrating a position and that your rates will be updated to V3 rates."
 msgstr "Please always be aware of your <0>Health Factor (HF)</0> when partially migrating a position and that your rates will be updated to V3 rates."
 
+#: src/modules/umbrella/helpers/StakedUnderlyingTooltip.tsx
+msgid "Staked Underlying"
+msgstr "Staked Underlying"
+
 #: src/layouts/components/StakingMenu.tsx
 #: src/layouts/components/StakingMenu.tsx
 msgid "Umbrella"
@@ -2185,7 +2198,7 @@ msgstr "This asset is eligible for rewards through SuperFest. Aave Labs does not
 msgid "Cooldown period warning"
 msgstr "Cooldown period warning"
 
-#: src/modules/umbrella/AmountStakedItem.tsx
+#: src/modules/umbrella/AmountSharesItem.tsx
 msgid "Available to withdraw"
 msgstr "Available to withdraw"
 
@@ -2460,10 +2473,6 @@ msgstr "Borrowed"
 msgid "Received"
 msgstr "Received"
 
-#: src/modules/umbrella/StakeAssets/UmbrellaAssetsList.tsx
-msgid "Your Staked Amount"
-msgstr "Your Staked Amount"
-
 #: src/modules/dashboard/LiquidationRiskParametresModal/LiquidationRiskParametresModal.tsx
 msgid "Your current loan to value based on your collateral supplied."
 msgstr "Your current loan to value based on your collateral supplied."

src/locales/en/messages.js

@@ -13,7 +13,7 @@ import { useCurrentTimestamp } from 'src/hooks/useCurrentTimestamp';
 
 import { ListValueColumn } from '../dashboard/lists/ListValueColumn';
 
-export const AmountStakedItem = ({ stakeData }: { stakeData: MergedStakeData }) => {
+export const AmountSharesItem = ({ stakeData }: { stakeData: MergedStakeData }) => {
   const now = useCurrentTimestamp(1);
   const { stakeTokenBalance, stakeTokenBalanceUSD } = stakeData.formattedBalances;
 

src/locales/en/messages.po

@@ -0,0 +1,45 @@
+import { Stack } from '@mui/material';
+import { formatUnits } from 'ethers/lib/utils';
+import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
+import { MergedStakeData } from 'src/hooks/stake/useUmbrellaSummary';
+import { useRootStore } from 'src/store/root';
+
+import { usePreviewRedeem } from './hooks/usePreviewRedeem';
+
+export const AmountStakedUnderlyingItem = ({
+  stakeData,
+  isMobile,
+}: {
+  stakeData: MergedStakeData;
+  isMobile?: boolean;
+}) => {
+  const currentMarketData = useRootStore((s) => s.currentMarketData);
+  const chainId = currentMarketData?.chainId;
+
+  const { stakeTokenRedeemableAmount } = stakeData.balances;
+  const { underlyingTokenAddress, underlyingTokenDecimals, underlyingIsStataToken, decimals } =
+    stakeData;
+
+  const isGhoToken = !underlyingIsStataToken;
+
+  const { data: sharesEquivalentAssets = '0' } = usePreviewRedeem(
+    stakeTokenRedeemableAmount,
+    underlyingTokenDecimals,
+    underlyingTokenAddress,
+    chainId,
+    !isGhoToken
+  );
+  const formattedGhoAmount = formatUnits(stakeTokenRedeemableAmount, decimals);
+  const assetUnderlyingAmount = isGhoToken ? formattedGhoAmount : sharesEquivalentAssets;
+
+  return (
+    <Stack
+      direction={isMobile ? 'row' : 'column'}
+      alignItems="center"
+      justifyContent="center"
+      gap={2}
+    >
+      <FormattedNumber compact value={assetUnderlyingAmount} variant="secondary14" />
+    </Stack>
+  );
+};

src/locales/es/messages.js

@@ -7,6 +7,8 @@ import { ListHeaderWrapper } from 'src/components/lists/ListHeaderWrapper';
 import { MergedStakeData } from 'src/hooks/stake/useUmbrellaSummary';
 
 import { ApyTooltip } from '../helpers/ApyTooltip';
+import { SharesTooltip } from '../helpers/SharesTooltip';
+import { StakedUnderlyingTooltip } from '../helpers/StakedUnderlyingTooltip';
 import { UmbrellaAssetsListItemLoader } from './UmbrellaAssetsListItemLoader';
 import { UmbrellaAssetsListMobileItem } from './UmbrellaAssetsListMobileItem';
 import { UmbrellaAssetsListMobileItemLoader } from './UmbrellaAssetsListMobileItemLoader';
@@ -22,8 +24,12 @@ const listHeaders = [
     sortKey: 'totalAPY',
   },
   {
-    title: <Trans>Your Staked Amount</Trans>,
-    sortKey: 'stakeTokenBalance',
+    title: <StakedUnderlyingTooltip />,
+    sortKey: 'stakeTokenUnderlyingBalance',
+  },
+  {
+    title: <SharesTooltip />,
+    sortKey: 'stakeSharesTokens',
   },
   {
     title: <Trans>Available to Stake</Trans>,
@@ -80,8 +86,16 @@ export default function UmbrellaAssetsList({
         const balanceB = Number(b.formattedBalances.totalAvailableToStake);
         return sortDesc ? balanceB - balanceA : balanceA - balanceB;
       }
-
-      if (sortName === 'stakeTokenBalance') {
+      //! Your Staked Amount: shows the underlying of assets(ej. USDC, WETH) staked or equivalent to the
+      //! shares.
+      //! Using stakeTokenReedemableAmount should be the equivalent in Asset to the shares
+      if (sortName === 'stakeTokenUnderlyingBalance') {
+        const balanceA = Number(a.formattedBalances?.stakeTokenRedeemableAmount || '0');
+        const balanceB = Number(b.formattedBalances?.stakeTokenRedeemableAmount || '0');
+        return sortDesc ? balanceB - balanceA : balanceA - balanceB;
+      }
+      //!trial: Shares shows the staked StkToken obtained from the staked asset amount
+      if (sortName === 'stakeSharesTokens') {
         const balanceA = Number(a.formattedBalances?.stakeTokenBalance || '0');
         const balanceB = Number(b.formattedBalances?.stakeTokenBalance || '0');
         return sortDesc ? balanceB - balanceA : balanceA - balanceB;

src/locales/fr/messages.js

@@ -8,10 +8,13 @@ import { useShallow } from 'zustand/shallow';
 
 import { Row } from '../../../components/primitives/Row';
 import { ListMobileItemWrapper } from '../../dashboard/lists/ListMobileItemWrapper';
-import { AmountStakedItem } from '../AmountStakedItem';
+import { AmountSharesItem } from '../AmountSharesItem';
+import { AmountStakedUnderlyingItem } from '../AmountStakedUnderlyingItem';
 import { AvailableToClaimItem } from '../AvailableToClaimItem';
 import { AvailableToStakeItem } from '../AvailableToStakeItem';
 import { ApyTooltip } from '../helpers/ApyTooltip';
+import { SharesTooltip } from '../helpers/SharesTooltip';
+import { StakedUnderlyingTooltip } from '../helpers/StakedUnderlyingTooltip';
 import { StakingApyItem } from '../StakingApyItem';
 import { StakeAssetName } from './StakeAssetName';
 
@@ -44,13 +47,17 @@ export const UmbrellaAssetsListMobileItem = ({ ...umbrellaStakeAsset }: MergedSt
         </Box>
       </Row>
       <Row
-        caption={<Trans>Your staked amount</Trans>}
+        caption={<StakedUnderlyingTooltip />}
         captionVariant="description"
         mb={3}
         align="flex-start"
       >
-        <AmountStakedItem stakeData={umbrellaStakeAsset} />
+        <AmountStakedUnderlyingItem stakeData={umbrellaStakeAsset} isMobile />
       </Row>
+      <Row caption={<SharesTooltip />} captionVariant="description" mb={3} align="flex-start">
+        <AmountSharesItem stakeData={umbrellaStakeAsset} />
+      </Row>
+
       <Row
         caption={<Trans>Available to stake</Trans>}
         captionVariant="description"

src/modules/umbrella/AmountStakedItem.tsx renamed to src/modules/umbrella/AmountSharesItem.tsx

@@ -5,7 +5,8 @@ import { useShallow } from 'zustand/shallow';
 
 import { ListColumn } from '../../../components/lists/ListColumn';
 import { ListItem } from '../../../components/lists/ListItem';
-import { AmountStakedItem } from '../AmountStakedItem';
+import { AmountSharesItem } from '../AmountSharesItem';
+import { AmountStakedUnderlyingItem } from '../AmountStakedUnderlyingItem';
 import { AvailableToClaimItem } from '../AvailableToClaimItem';
 import { AvailableToStakeItem } from '../AvailableToStakeItem';
 import { StakingApyItem } from '../StakingApyItem';
@@ -32,7 +33,12 @@ export const UmbrellaStakeAssetsListItem = ({ ...umbrellaStakeAsset }: MergedSta
       </ListColumn>
 
       <ListColumn>
-        <AmountStakedItem stakeData={umbrellaStakeAsset} />
+        <AmountStakedUnderlyingItem stakeData={umbrellaStakeAsset} />
+      </ListColumn>
+
+      {/* Shares */}
+      <ListColumn>
+        <AmountSharesItem stakeData={umbrellaStakeAsset} />
       </ListColumn>
 
       <ListColumn>