SOV-3136: update lend page text

.changeset/gold-squids-agree.md

@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-3136: update lend page text

apps/frontend/src/app/2_molecules/FixedInterestPoolRowTitle/FixedInterestPoolRowTitle.tsx

@@ -33,7 +33,7 @@ export const FixedInterestPoolRowTitle: FC<FixedInterestPoolRowTitleProps> = ({
       <span className="text-gray-30 ml-1 font-medium">
         {isBorrow
           ? t(translations.fixedInterestPage.borrowAssetsTable.borrowAprMobile)
-          : t(translations.lendPage.table.lendApyMobile)}
+          : t(translations.lendPage.table.lendAprMobile)}
       </span>
     </div>
   </div>

apps/frontend/src/app/5_pages/LendPage/components/AdjustModal/AdjustLendingModalContainer.tsx

@@ -34,7 +34,7 @@ export type AdjustModalProps = {
 
 export type FullAdjustModalState = {
   token: SupportedTokens;
-  apy: Decimal;
+  apr: Decimal;
   balance: Decimal;
   liquidity: Decimal;
   poolTokenContract: Contract;
@@ -93,7 +93,7 @@ export const AdjustLendingModalContainer: FC<AdjustModalProps> = ({
         () => poolTokenContract?.marketLiquidity(),
       ).then(Decimal.fromBigNumberString);
 
-      const apy = await asyncCall(
+      const apr = await asyncCall(
         `poolToken/${poolToken.address}/nextSupplyInterestRate`,
         () => poolTokenContract?.nextSupplyInterestRate('0'),
       ).then(Decimal.fromBigNumberString);
@@ -102,7 +102,7 @@ export const AdjustLendingModalContainer: FC<AdjustModalProps> = ({
         token: value,
         balance,
         liquidity,
-        apy,
+        apr,
         poolTokenContract,
         tokenContract,
         tokenDetails,
@@ -140,7 +140,7 @@ export const AdjustLendingModalContainer: FC<AdjustModalProps> = ({
             <div className="bg-gray-90 p-4 rounded">
               <CurrentStats
                 symbol={state.token}
-                apy={state.apy}
+                apr={state.apr}
                 balance={state.balance}
               />
             </div>

apps/frontend/src/app/5_pages/LendPage/components/AdjustModal/CurrentStats.tsx

@@ -13,13 +13,13 @@ import { translations } from '../../../../../locales/i18n';
 import styles from './CurrentStats.module.css';
 
 export type CurrentStatsProps = {
-  apy: Decimal;
+  apr: Decimal;
   balance: Decimal;
   symbol: SupportedTokens;
 };
 
 export const CurrentStats: FC<CurrentStatsProps> = ({
-  apy,
+  apr,
   balance,
   symbol,
 }) => (
@@ -32,9 +32,9 @@ export const CurrentStats: FC<CurrentStatsProps> = ({
     <div className="flex gap-8">
       <div className="mt-6 flex flex-col gap-2">
         <Paragraph className="font-medium text-gray-30">
-          {t(translations.lendingAdjust.apy)}
+          {t(translations.lendingAdjust.apr)}
         </Paragraph>
-        <AmountRenderer value={apy} suffix="%" />
+        <AmountRenderer value={apr} suffix="%" />
       </div>
       <div className="mt-6 flex flex-col gap-2">
         <Paragraph className="font-medium text-gray-30">

apps/frontend/src/app/5_pages/LendPage/components/AdjustModal/LendingForm.tsx

@@ -85,8 +85,8 @@ export const LendingForm: FC<DepositProps> = ({ state, onConfirm }) => {
   }, [amount, balance, isDeposit, state.balance]);
 
   const [totalSupply, setTotalSupply] = useState<BigNumber>(BigNumber.from(0));
-  const [lendApy, setLendApy] = useState<Decimal>(state.apy);
-  const [withdrawApy, setWithdrawApy] = useState<Decimal>(state.apy);
+  const [lendApr, setLendApr] = useState<Decimal>(state.apr);
+  const [withdrawApr, setWithdrawApr] = useState<Decimal>(state.apr);
 
   useEffect(() => {
     asyncCall(
@@ -100,7 +100,7 @@ export const LendingForm: FC<DepositProps> = ({ state, onConfirm }) => {
       asyncCall(
         `lending/${state.poolTokenContract.address}/nextSupplyInterestRate/${amount}`,
         () => state.poolTokenContract.nextSupplyInterestRate(amount),
-      ).then(res => setLendApy(Decimal.fromBigNumberString(res.toString())));
+      ).then(res => setLendApr(Decimal.fromBigNumberString(res.toString())));
     }
   }, [state.poolTokenContract, amount, type, isDeposit]);
 
@@ -115,14 +115,14 @@ export const LendingForm: FC<DepositProps> = ({ state, onConfirm }) => {
             totalSupply.sub(amount),
           ),
       ).then(res =>
-        setWithdrawApy(Decimal.fromBigNumberString(res.toString())),
+        setWithdrawApr(Decimal.fromBigNumberString(res.toString())),
       );
     }
   }, [amount, isDeposit, state.poolTokenContract, totalSupply]);
 
-  const newApy = useMemo(
-    () => (isDeposit ? lendApy : withdrawApy),
-    [isDeposit, lendApy, withdrawApy],
+  const newApr = useMemo(
+    () => (isDeposit ? lendApr : withdrawApr),
+    [isDeposit, lendApr, withdrawApr],
   );
 
   // reset value when tab changed
@@ -164,8 +164,13 @@ export const LendingForm: FC<DepositProps> = ({ state, onConfirm }) => {
       )}
       <SimpleTable className="mt-8">
         <SimpleTableRow
-          label={t(translations.lendingAdjust.newApy)}
-          value={<AmountRenderer value={newApy} suffix="% APY" />}
+          label={t(translations.lendingAdjust.newApr)}
+          value={
+            <AmountRenderer
+              value={newApr}
+              suffix={`% ${t(translations.lendPage.apr)}`}
+            />
+          }
         />
         <SimpleTableRow
           label={t(translations.lendingAdjust.newBalance)}

apps/frontend/src/app/5_pages/LendPage/components/LendFrame/LendFrame.constants.tsx

@@ -27,11 +27,11 @@ export const COLUMNS_CONFIG = [
     ),
   },
   {
-    id: 'lendApy',
+    id: 'lendApr',
     title: (
       <span className="flex items-center gap-1">
-        {t(translations.lendPage.table.lendApy)}{' '}
-        <HelperButton content={t(translations.lendPage.table.lendApyInfo)} />
+        {t(translations.lendPage.table.lendApr)}{' '}
+        <HelperButton content={t(translations.lendPage.table.lendAprInfo)} />
       </span>
     ),
     cellRenderer: (pool: LendingPool) => (

apps/frontend/src/app/5_pages/LendPage/components/LendFrame/components/LendFrameAction/LendFrameAction.tsx

@@ -56,8 +56,8 @@ export const LendFrameAction: FC<LendFrameProps> = ({ pool }) => {
         <Button
           style={ButtonStyle.primary}
           size={ButtonSize.small}
-          text={t(translations.lendPage.actions.lend)}
-          dataAttribute="lend-frame-lend-button"
+          text={t(translations.lendPage.actions.deposit)}
+          dataAttribute="lend-frame-deposit-button"
           className="w-full lg:w-auto prevent-row-click"
           disabled={!account}
           onClick={handleLendClick}

apps/frontend/src/app/5_pages/LendPage/components/LendFrame/components/LendFrameChart/LendFrameChart.tsx

@@ -18,14 +18,14 @@ export const LendFrameChart: FC<LendFrameProps> = memo(({ pool }) => {
   const { lendHistory } = useGetLendHistory(asset);
 
   const mockData = convertPoolHistoryToMockData(lendHistory);
-  const lendAPYTickStep = useMemo(
-    () => (Math.max(...mockData.lendAPY) - Math.min(...mockData.lendAPY)) / 6,
-    [mockData.lendAPY],
+  const lendAprTickStep = useMemo(
+    () => (Math.max(...mockData.lendApr) - Math.min(...mockData.lendApr)) / 6,
+    [mockData.lendApr],
   );
 
   const chartOptions = useMemo(
-    () => getChartOptions(lendAPYTickStep, mockData, pool),
-    [lendAPYTickStep, mockData, pool],
+    () => getChartOptions(lendAprTickStep, mockData, pool),
+    [lendAprTickStep, mockData, pool],
   );
 
   useEffect(() => {
@@ -37,14 +37,14 @@ export const LendFrameChart: FC<LendFrameProps> = memo(({ pool }) => {
       return;
     }
 
-    const lendApyGradient = chartRef.current?.ctx?.createLinearGradient(
+    const lendAprGradient = chartRef.current?.ctx?.createLinearGradient(
       0,
       0,
       0,
       400,
     );
-    lendApyGradient?.addColorStop(0, 'rgba(114, 234, 222, 1)');
-    lendApyGradient?.addColorStop(1, 'rgba(114, 234, 222, 0.09');
+    lendAprGradient?.addColorStop(0, 'rgba(114, 234, 222, 1)');
+    lendAprGradient?.addColorStop(1, 'rgba(114, 234, 222, 0.09');
 
     const totalLiquidityGradient = chartRef.current?.ctx?.createLinearGradient(
       0,
@@ -62,7 +62,7 @@ export const LendFrameChart: FC<LendFrameProps> = memo(({ pool }) => {
 
     chartRef.current = new Chart(canvas.current, {
       type: 'line',
-      data: getChartData(mockData, lendApyGradient, totalLiquidityGradient),
+      data: getChartData(mockData, lendAprGradient, totalLiquidityGradient),
       options: chartOptions,
       plugins: [customCanvasBackgroundColor],
     });

apps/frontend/src/app/5_pages/LendPage/components/LendFrame/components/LendFrameChart/LendFrameChart.types.ts

@@ -1,6 +1,6 @@
 export type ChartData = {
   date: Date;
-  lendAPY: number;
+  lendApr: number;
   availableLiquidity: number;
   borrowedLiquidity: number;
 };
@@ -18,6 +18,6 @@ export type PoolHistoryData = {
 
 export type MockData = {
   dates: string[];
-  lendAPY: number[];
+  lendApr: number[];
   totalLiquidity: number[];
 };

apps/frontend/src/app/5_pages/LendPage/components/LendFrame/components/LendFrameChart/LendFrameChart.utils.tsx

@@ -58,12 +58,12 @@ export const convertPoolHistoryToMockData = (
   const dates = poolHistory.map(entry =>
     dayjs(entry.timestamp).format('YYYY-MM-DD'),
   );
-  const lendAPY = poolHistory.map(entry => parseFloat(entry.supply_apr));
+  const lendApr = poolHistory.map(entry => parseFloat(entry.supply_apr));
   const totalLiquidity = poolHistory.map(entry => parseFloat(entry.supply));
 
   return {
     dates,
-    lendAPY,
+    lendApr,
     totalLiquidity,
   };
 };
@@ -82,16 +82,16 @@ export const customCanvasBackgroundColor = {
 
 export const getChartData = (
   mockData: MockData,
-  lendApyGradient: CanvasGradient | undefined,
+  lendAprGradient: CanvasGradient | undefined,
   totalLiquidityGradient: CanvasGradient | undefined,
 ) => {
   return {
     labels: mockData.dates,
     datasets: [
       {
-        label: t(translations.lendPage.table.lendApy),
-        data: mockData.lendAPY,
-        backgroundColor: lendApyGradient,
+        label: t(translations.lendPage.table.lendApr),
+        data: mockData.lendApr,
+        backgroundColor: lendAprGradient,
         borderColor: '#72EADE',
         fill: true,
         yAxisID: 'y1',
@@ -111,7 +111,7 @@ export const getChartData = (
 };
 
 export const getChartOptions = (
-  lendAPYTickStep: number,
+  lendAprTickStep: number,
   mockData: MockData,
   pool: LendingPool,
 ) => {
@@ -123,22 +123,22 @@ export const getChartOptions = (
   const fontWeight = '500';
   const dashGridType = 'dash';
 
-  const lendAPYAxisOptions = {
+  const lendAprAxisOptions = {
     border: {
       color: borderColor,
     },
     position: 'left' as const,
     display: true,
     title: {
       display: true,
-      text: t(translations.lendPage.table.lendApy),
+      text: t(translations.lendPage.table.lendApr),
       color: textColor,
     },
     ticks: {
       callback: value => Number(value).toFixed(3) + '%',
-      stepSize: lendAPYTickStep,
-      min: Math.min(...mockData.lendAPY) - 3 * lendAPYTickStep,
-      max: Math.max(...mockData.lendAPY) + 3 * lendAPYTickStep,
+      stepSize: lendAprTickStep,
+      min: Math.min(...mockData.lendApr) - 3 * lendAprTickStep,
+      max: Math.max(...mockData.lendApr) + 3 * lendAprTickStep,
       color: textColor,
       font: {
         family: fontFamily,
@@ -224,7 +224,7 @@ export const getChartOptions = (
       },
     },
     scales: {
-      y1: lendAPYAxisOptions,
+      y1: lendAprAxisOptions,
       y: borrowedAvailableAxisOptions,
       x: xAxisOptions,
     },

apps/frontend/src/app/5_pages/LendPage/components/LendFrame/components/LendFrameChart/hooks/useGetLendFrameChartOptions.ts

@@ -1,8 +1,11 @@
+import { t } from 'i18next';
+
+import { translations } from '../../../../../../../../locales/i18n';
 import { LendingPool } from '../../../../../../../../utils/LendingPool';
 import { MockData } from '../LendFrameChart.types';
 
 export const useGetLendFrameChartOptions = (
-  lendAPYTickStep: number,
+  lendAprTickStep: number,
   mockData: MockData,
   pool: LendingPool,
 ) => {
@@ -36,14 +39,14 @@ export const useGetLendFrameChartOptions = (
         display: true,
         title: {
           display: true,
-          text: 'Lend APY',
+          text: t(translations.lending.apr),
           color: '#B6BAC2',
         },
         ticks: {
           callback: value => Number(value).toFixed(0) + '%',
-          stepSize: lendAPYTickStep,
-          min: Math.min(...mockData.lendAPY) - 3 * lendAPYTickStep,
-          max: Math.max(...mockData.lendAPY) + 3 * lendAPYTickStep,
+          stepSize: lendAprTickStep,
+          min: Math.min(...mockData.lendApr) - 3 * lendAprTickStep,
+          max: Math.max(...mockData.lendApr) + 3 * lendAprTickStep,
           color: '#B6BAC2',
           font: {
             family: 'Roboto',

apps/frontend/src/app/5_pages/LendPage/components/LendModal/CurrentStats.tsx

@@ -14,11 +14,11 @@ import { AcceptedCollateral } from '../AcceptedCollateral/AcceptedCollateral';
 import styles from './CurrentStats.module.css';
 
 export type CurrentStatsProps = {
-  apy: Decimal;
+  apr: Decimal;
   token: SupportedTokens;
 };
 
-export const CurrentStats: FC<CurrentStatsProps> = ({ apy, token }) => {
+export const CurrentStats: FC<CurrentStatsProps> = ({ apr, token }) => {
   const pool = LendingPoolDictionary.get(token);
 
   return (
@@ -31,9 +31,9 @@ export const CurrentStats: FC<CurrentStatsProps> = ({ apy, token }) => {
       <div className="flex gap-8">
         <div className="mt-6 flex flex-col gap-2">
           <Paragraph className="font-medium text-gray-30">
-            {t(translations.lending.apy)}
+            {t(translations.lending.apr)}
           </Paragraph>
-          <AmountRenderer value={apy} suffix="%" />
+          <AmountRenderer value={apr} suffix="%" />
         </div>
         <div className="mt-6 flex flex-col gap-2">
           <Paragraph className="font-medium text-gray-30">

apps/frontend/src/app/5_pages/LendPage/components/LendModal/LendingForm.tsx

@@ -67,13 +67,13 @@ export const LendingForm: FC<DepositProps> = ({ state, onConfirm }) => {
     [isValidAmount, hasDisclaimerBeenChecked, depositLocked],
   );
 
-  const [lendApy, setLendApy] = useState<Decimal>(state.apy);
+  const [lendApr, setLendApr] = useState<Decimal>(state.apr);
 
   useEffect(() => {
     asyncCall(
       `lending/${state.poolTokenContract.address}/nextSupplyInterestRate/${amount}`,
       () => state.poolTokenContract.nextSupplyInterestRate(amount),
-    ).then(res => setLendApy(Decimal.fromBigNumberString(res.toString())));
+    ).then(res => setLendApr(Decimal.fromBigNumberString(res.toString())));
   }, [state.poolTokenContract, amount]);
 
   useEffect(() => setValue(''), [setValue]);
@@ -113,8 +113,13 @@ export const LendingForm: FC<DepositProps> = ({ state, onConfirm }) => {
       )}
       <SimpleTable className="mt-6">
         <SimpleTableRow
-          label={t(translations.lending.newApy)}
-          value={<AmountRenderer value={lendApy} suffix="% APY" />}
+          label={t(translations.lending.newApr)}
+          value={
+            <AmountRenderer
+              value={lendApr}
+              suffix={`% ${t(translations.lendPage.apr)}`}
+            />
+          }
         />
       </SimpleTable>