💄 stake: update ui details

components/charts/StakeChart/index.tsx

@@ -42,7 +42,7 @@ const StakeChart = () => {
   const processedData = useMemo(() => {
     return data.map((item) => {
       if (item.timestamp <= now) {
-        return { ...item, claimedPercentage, claimablePercentage, restValue }; // 'newKey' es el nombre de la clave que deseas agregar
+        return { ...item, claimedPercentage, claimablePercentage, restValue };
       }
       return item;
     });
@@ -85,8 +85,12 @@ const StakeChart = () => {
                   <rect x="3" width="3" height="6" fill="#ffffff" />
                 </pattern>
                 <pattern id="rest" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(25)">
-                  <rect width="3" height="6" fill="red" />
-                  <rect x="3" width="3" height="6" fill="#ffffff" />
+                  <rect width="3" height="6" fill={isEnded ? 'red' : palette.figma.green['50']} />
+                  <rect x="3" width="3" height="6" fill={isEnded ? '#ffffff' : palette.figma.green['50']} />
+                </pattern>
+                <pattern id="claimed" patternUnits="userSpaceOnUse" width="6" height="6">
+                  <rect width="3" height="6" fill={palette.figma.green['500']} />
+                  <rect x="3" width="3" height="6" fill={palette.figma.green['500']} />
                 </pattern>
               </defs>
               <CartesianGrid horizontal vertical={false} stroke={palette.grey[300]} />
@@ -122,7 +126,7 @@ const StakeChart = () => {
                 dataKey="claimedPercentage"
                 name={t('Claimed')}
                 stroke="none"
-                fill={palette.figma.green['500']}
+                fill="url(#claimed)"
                 fillOpacity={1}
                 dot={false}
                 stackId="1"
@@ -144,9 +148,9 @@ const StakeChart = () => {
                 xAxisId="date"
                 type="monotone"
                 dataKey="restValue"
-                name={t('Rest')}
+                name={isEnded ? t('Not available to claim') : t('Projected Remainder')}
                 stroke="none"
-                fill={isEnded ? 'url(#rest)' : palette.figma.green['50']}
+                fill="url(#rest)"
                 fillOpacity={1}
                 dot={false}
                 stackId="1"
@@ -156,7 +160,7 @@ const StakeChart = () => {
                 xAxisId="date"
                 type="monotone"
                 dataKey="value"
-                name={t('Discount Factor')}
+                name={t('Growth Factor')}
                 stroke={palette.mode === 'light' ? 'black' : 'white'}
                 dot={false}
                 strokeWidth={2}

components/staking/Progress/index.tsx

@@ -1,25 +1,26 @@
 import React, { useMemo } from 'react';
-import { Box, Typography, useTheme } from '@mui/material';
+import { Box, Tooltip, Typography, useTheme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useStakeEXA } from 'contexts/StakeEXAContext';
 import { parseEther } from 'viem';
 import WAD from '@exactly/lib/esm/fixed-point-math/WAD';
 import StakingProgressBar from '../StakingProgress/stakingProgressBar';
+import { InfoOutlined } from '@mui/icons-material';
 
 function Progress() {
   const { t } = useTranslation();
   const { palette } = useTheme();
 
-  const { start, totalClaimable, totalClaimed, totalEarned, parameters } = useStakeEXA();
+  const { start, totalClaimable, totalClaimed, totalEarned, parameters, balance } = useStakeEXA();
 
   const isEnded = useMemo(() => {
-    if (!start || !parameters) return false;
+    if (!start || !parameters || !balance || balance === 0n) return false;
     const now = Math.floor(Date.now() / 1000);
     const avgStart = start === 0n ? parseEther(now.toString()) : start;
     const endTime = Number(avgStart / WAD + parameters.refTime);
 
     return now > endTime;
-  }, [parameters, start]);
+  }, [balance, parameters, start]);
 
   return (
     <Box>
@@ -36,9 +37,14 @@ function Progress() {
         overflow="hidden"
       >
         <Box display="flex" flexDirection="column" position="relative" zIndex={2} gap={2}>
-          <Typography fontSize={19} fontWeight={700}>
-            {t('Rewards')}
-          </Typography>
+          <Box display="flex" gap={1}>
+            <Typography fontSize={19} fontWeight={700}>
+              {t('Your Rewards')}
+            </Typography>
+            <Tooltip title={t('Your rewards are earnings from the protocol treasury fees.')} placement="top" arrow>
+              <InfoOutlined sx={{ fontSize: '19px', my: 'auto', color: 'figma.grey.500', cursor: 'pointer' }} />
+            </Tooltip>
+          </Box>
           {start !== undefined && (
             <StakingProgressBar claimed={totalClaimed} claimable={totalClaimable} total={totalEarned} ended={isEnded} />
           )}

components/staking/StakedEXASummary/index.tsx

@@ -24,7 +24,7 @@ function StakedEXASummary() {
       const decimals = accountData.find((token) => token.symbol.includes(symbol))?.decimals || 18;
       const decimalWAD = 10n ** BigInt(decimals);
 
-      const apr = (((rate * yearInSeconds * rewardPrice) / (totalAssets * exaPrice)) * 100n) / decimalWAD;
+      const apr = (rate * yearInSeconds * rewardPrice * 100n) / (totalAssets * exaPrice) / decimalWAD;
 
       return { symbol, apr };
     });
@@ -55,9 +55,13 @@ function StakedEXASummary() {
       <Box>
         <Typography variant="h6">{t('Estimated APR')}</Typography>
         <Box display="flex" gap={1}>
-          <Typography fontSize={32} fontWeight={500}>
-            {formatNumber(Number(totalRewardsAPR))}%
-          </Typography>
+          {totalRewardsAPR === undefined ? (
+            <Skeleton variant="text" width={100} height={45} />
+          ) : (
+            <Typography fontSize={32} fontWeight={500}>
+              {formatNumber(Number(totalRewardsAPR))}%
+            </Typography>
+          )}
           {rewardsTokens === undefined ? (
             <Skeleton variant="text" width={80} />
           ) : (

components/staking/StakingEXAInput/index.tsx

@@ -385,9 +385,9 @@ function StakingEXAInput({ refetch, operation }: Props) {
               REWARDS
             </Typography>
             <Box display="flex" alignItems="center" gap={1}>
-              <Typography color="figma.grey.500" fontWeight={500} fontSize={13} fontFamily="fontFamilyMonospaced">
+              {/* <Typography color="figma.grey.500" fontWeight={500} fontSize={13} fontFamily="fontFamilyMonospaced">
                 ~${formatNumber('0' || '0', 'USD')}
-              </Typography>
+              </Typography> */}
               <AvatarGroup
                 max={6}
                 sx={{

components/staking/StakingOperations/index.tsx

@@ -258,7 +258,7 @@ function StakingProgress() {
               ${formatNumber(EXAUsdValue || '0', 'USD')}
             </Typography>
           </Box>
-          {stakedProgress > 0 && (
+          {stakedProgress > 0 && balance !== undefined && balance > 0n && (
             <Box>
               <Grid container>
                 <Grid item xs={6}>

components/staking/StakingProgress/stakingProgressBar.tsx

@@ -6,6 +6,7 @@ import formatNumber from 'utils/formatNumber';
 import { formatEther } from 'viem';
 import { useStakeEXA } from 'contexts/StakeEXAContext';
 import Image from 'next/image';
+import { useTranslation } from 'react-i18next';
 
 const ProgressBar = styled('div')<{ ended: boolean }>(({ ended, theme }) => ({
   display: 'flex',
@@ -114,6 +115,7 @@ const StakingProgressBar: FC<DualProgressBarProps> = ({
   ended = false,
 }) => {
   const { palette } = useTheme();
+  const { t } = useTranslation();
   const { rewardsTokens, claimableTokens, claimedTokens, earnedTokens } = useStakeEXA();
 
   const claimedPercentage = total > 0n ? Number((claimed * 100n) / total) : 0;
@@ -241,7 +243,7 @@ const StakingProgressBar: FC<DualProgressBarProps> = ({
               }}
             />
             <Typography fontSize={16} fontWeight={700}>
-              {ended ? 'Not Available to claim' : 'Estimated Total'}
+              {ended ? t('Not available to claim') : t('Projected Remainder')}
             </Typography>
           </Box>
           <Box display="flex" gap={1}>

hooks/useStakedEXA.ts

@@ -26,7 +26,7 @@ export const useStakedEXABalance = () => {
 };
 
 export const useStakedEXAChart = () => {
-  const { start, parameters } = useStakeEXA();
+  const { start, balance, parameters } = useStakeEXA();
 
   const calculateValue = useCallback(
     (
@@ -52,14 +52,15 @@ export const useStakedEXAChart = () => {
   );
 
   const points = useMemo(() => {
-    if (parameters !== undefined && start !== undefined) {
+    if (parameters !== undefined && start !== undefined && balance !== undefined) {
       const now = parseEther(Math.floor(Date.now() / 1000).toString());
       const minTime = parameters.minTime * WAD;
       const avgStart = start > 0n ? start : now;
       const cliff = avgStart + minTime;
       const refTime = parameters.refTime * WAD;
       const optimalStakeTime = avgStart + refTime;
-      const extra = now > optimalStakeTime ? now - optimalStakeTime + 172_800n * WAD : 172_800n * WAD;
+      const tailTime = (refTime * 25n) / 100n; //25% of refTime
+      const extra = now > optimalStakeTime ? now - optimalStakeTime + tailTime : tailTime;
       const endTime = optimalStakeTime + extra;
       const numberOfTicks = 100n * WAD;
       const interval = ((endTime - avgStart) * WAD) / numberOfTicks;
@@ -120,7 +121,7 @@ export const useStakedEXAChart = () => {
       return dataPoints.sort((a, b) => a.timestamp - b.timestamp);
     }
     return [];
-  }, [parameters, start, calculateValue]);
+  }, [parameters, start, balance, calculateValue]);
 
   return points;
 };

i18n/es/translation.json

@@ -637,20 +637,39 @@
   "Total borrowed: ": "Total prestado",
   "Deposit EXA": "Depositar EXA",
   "Deposit EXA on Extra Finance and get up to {{apy}} APY": "Deposita EXA en Extra Finance y obtén hasta {{apy}} APY",
-  "Total Exa Staked": "Total de Exa Stakeados",
-  "Estmated APR": "TNA Estimada",
-  "Total Fees Shared": "Total de Comisiones Compartidas",
   "Stake amount": "Monto a Stakear",
   "Withdraw amount": "Monto a Retirar",
   "Your Staked EXA": "Tu EXA Stakeado",
   "Early Withdraw": "Retiro Anticipado",
-  "You don’t have any staked EXA yet. Here you’ll see information about your staked assets.": "Aún no tienes ningún EXA stakeado. Aquí verás información sobre tus activos stakeados.",
-  "Start staking now": "Comienza a stakear ahora",
   "Staked": "Stakeado",
   "Insufficient EXA balance": "Saldo de EXA insuficiente",
   "EXA Staking": "Staking de EXA",
   "Staking status": "Estado de Staking",
-  "EXA holders can now stake their assets and receive rewards. You have the flexibility to withdraw your assets anytime, but for optimal rewards, we recommend keeping your assets staked for six months. Early withdrawals are subject to penalties, and you will receive just a portion of the rewards earned so far.": "Los titulares de EXA ahora pueden stakear sus activos y recibir recompensas. Tienes la flexibilidad de retirar tus activos en cualquier momento, pero para obtener recompensas óptimas, recomendamos mantener tus activos stakeados durante seis meses. Los retiros anticipados están sujetos a penalizaciones, y solo recibirás una parte de las recompensas ganadas hasta ahora.",
-  "For further details on our staking program, ": "Para más detalles sobre nuestro programa de stakeo, ",
-  "please check our documentation.": "por favor revisa nuestra documentación."
+  "Not available to claim": "No disponible para reclamar",
+  "Projected Remainder": "Remanente Proyectado",
+  "Growth Factor": "Factor de Crecimiento",
+  "Total EXA Staked": "Total de EXA Stakeado",
+  "EXA": "EXA",
+  "Estimated APR": "TNA Estimada",
+  "pending": "pendiente",
+  "success": "éxito",
+  "error": "error",
+  "Stake EXA": "Stakear EXA",
+  "Stake Amount": "Monto a Stakear",
+  "Started": "Iniciado",
+  "Ends": "Finaliza",
+  "Claim rewards to date": "Reclamar recompensas hasta la fecha",
+  "Staking progress": "Progreso de Staking",
+  "Started on": "Iniciado el",
+  "Rewards to date": "Recompensas hasta la fecha",
+  "Claimed: ": "Reclamado: ",
+  "penalty": "penalización",
+  "Total rewards": "Recompensas totales",
+  "By staking end on ": "Al finalizar el staking el ",
+  "Staking Program": "Programa de Staking",
+  "Earn a portion of the Protocol’s treasury fees by staking your EXA over a twelve-month period.": "Gana una parte de las tarifas del tesoro del Protocolo stakeando tu EXA durante un período de doce meses.",
+  "Your Rewards": "Tus Recompensas",
+  "Your rewards are earnings from the protocol treasury fees.": "Tus recompensas son ganancias de las tarifas del tesoro del protocolo.",
+  "The EXA staking period is twelve months. You can add more EXA, claim fees, or unstake anytime. Early or late withdrawal will reduce your eligible rewards. Keep your EXA staked for the entire period to receive the full treasury fees. For more information, please check ": "El período de staking de EXA es de doce meses. Puedes agregar más EXA, reclamar tarifas o deshacer el staking en cualquier momento. El retiro anticipado o tardío reducirá tus recompensas elegibles. Mantén tu EXA stakeado durante todo el período para recibir todas las tarifas del tesoro. Para obtener más información, consulta ",
+  "our docs.": "nuestra documentación."
 }

pages/staking.tsx

@@ -46,14 +46,15 @@ const Staking: NextPage = () => {
           <Box display="flex" flexDirection="column" gap={1}>
             <Typography>
               {t(
-                'The staking period is twelve months. You can add more EXA, claim fees, or unstake anytime. Keep your EXA staked for the entire period to receive the full fees. Early or late withdrawal will reduce your eligible rewards.',
+                'The EXA staking period is twelve months. You can add more EXA, claim fees, or unstake anytime. Early or late withdrawal will reduce your eligible rewards. Keep your EXA staked for the entire period to receive the full treasury fees. For more information, please check ',
               )}
-            </Typography>
-            <Typography>
-              {t('For further details, ')}
               <Typography sx={{ textDecoration: 'underline' }} component="span">
-                <a target="_blank" rel="noreferrer noopener" href="https://docs.exact.ly/">
-                  {t('please check our documentation.')}
+                <a
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  href="https://docs.exact.ly/governance/exactly-token-exa/exa-staking-program-stexa"
+                >
+                  {t('our docs.')}
                 </a>
               </Typography>
             </Typography>

pages/strategies.tsx

@@ -106,6 +106,34 @@ const Strategies: NextPage = () => {
           imgPath: '/img/strategies/featured_esEXA.svg',
           chainId: optimism.id,
         },
+        {
+          title: t('Staking Program'),
+          description: t(
+            'Earn a portion of the Protocol’s treasury fees by staking your EXA over a twelve-month period.',
+          ),
+          tags: [{ text: t('Advanced'), size: 'small' as const }],
+          button: (
+            <Link href={{ pathname: '/staking' }} style={{ width: '100%' }}>
+              <Button
+                fullWidth
+                variant="contained"
+                onClick={() =>
+                  track('Button Clicked', {
+                    location: 'Strategies',
+                    name: 'staking',
+                    href: '/staking',
+                    isNew: true,
+                  })
+                }
+              >
+                {t('Stake EXA')}
+              </Button>
+            </Link>
+          ),
+          isNew: true,
+          source: 'exactly' as const,
+          imgPath: '/img/strategies/featured_staking.svg',
+        },
         {
           title: t('Debit to Credit'),
           description: t(