diff --git a/components/charts/StakeChart/index.tsx b/components/charts/StakeChart/index.tsx index 747060598..ffab30528 100644 --- a/components/charts/StakeChart/index.tsx +++ b/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 = () => { - - + + + + + + @@ -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} diff --git a/components/staking/Progress/index.tsx b/components/staking/Progress/index.tsx index 657945b71..2c3e3d16b 100644 --- a/components/staking/Progress/index.tsx +++ b/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 ( @@ -36,9 +37,14 @@ function Progress() { overflow="hidden" > - - {t('Rewards')} - + + + {t('Your Rewards')} + + + + + {start !== undefined && ( )} diff --git a/components/staking/StakedEXASummary/index.tsx b/components/staking/StakedEXASummary/index.tsx index d2ce186c4..6b59ae752 100644 --- a/components/staking/StakedEXASummary/index.tsx +++ b/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() { {t('Estimated APR')} - - {formatNumber(Number(totalRewardsAPR))}% - + {totalRewardsAPR === undefined ? ( + + ) : ( + + {formatNumber(Number(totalRewardsAPR))}% + + )} {rewardsTokens === undefined ? ( ) : ( diff --git a/components/staking/StakingEXAInput/index.tsx b/components/staking/StakingEXAInput/index.tsx index 9fc8c48f4..2753d4737 100644 --- a/components/staking/StakingEXAInput/index.tsx +++ b/components/staking/StakingEXAInput/index.tsx @@ -385,9 +385,9 @@ function StakingEXAInput({ refetch, operation }: Props) { REWARDS - + {/* ~${formatNumber('0' || '0', 'USD')} - + */} - {stakedProgress > 0 && ( + {stakedProgress > 0 && balance !== undefined && balance > 0n && ( diff --git a/components/staking/StakingProgress/stakingProgressBar.tsx b/components/staking/StakingProgress/stakingProgressBar.tsx index f2b1595f3..b32089ff0 100644 --- a/components/staking/StakingProgress/stakingProgressBar.tsx +++ b/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 = ({ 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 = ({ }} /> - {ended ? 'Not Available to claim' : 'Estimated Total'} + {ended ? t('Not available to claim') : t('Projected Remainder')} diff --git a/hooks/useStakedEXA.ts b/hooks/useStakedEXA.ts index 1ab83efc9..61cd0f6dd 100644 --- a/hooks/useStakedEXA.ts +++ b/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; }; diff --git a/i18n/es/translation.json b/i18n/es/translation.json index 6b63b8a8f..90e6d0e42 100644 --- a/i18n/es/translation.json +++ b/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." } diff --git a/pages/staking.tsx b/pages/staking.tsx index 16764716c..dc91e065d 100644 --- a/pages/staking.tsx +++ b/pages/staking.tsx @@ -46,14 +46,15 @@ const Staking: NextPage = () => { {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 ', )} - - - {t('For further details, ')} - - {t('please check our documentation.')} + + {t('our docs.')} diff --git a/pages/strategies.tsx b/pages/strategies.tsx index fe69b0bbe..7752f36bb 100644 --- a/pages/strategies.tsx +++ b/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: ( + + + + ), + isNew: true, + source: 'exactly' as const, + imgPath: '/img/strategies/featured_staking.svg', + }, { title: t('Debit to Credit'), description: t( diff --git a/public/img/strategies/featured_staking.svg b/public/img/strategies/featured_staking.svg new file mode 100644 index 000000000..1ba20b6b1 --- /dev/null +++ b/public/img/strategies/featured_staking.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +