28d (#168)

* Cleanup unused calculations * 28d
Synthetixio · Jan 24, 2025 · 6d0b9d4 · 6d0b9d4
1 parent 32aa05f
commit 6d0b9d4
Show file tree

Hide file tree

Showing 18 changed files with 148 additions and 572 deletions.
diff --git a/liquidity/lib/Pools/PoolRow.tsx b/liquidity/lib/Pools/PoolRow.tsx
@@ -1,9 +1,10 @@
 import { Button, Fade, Flex, Link, Text } from '@chakra-ui/react';
 import { ZEROWEI } from '@snx-v3/constants';
-import { formatApr, formatNumber, formatNumberToUsd } from '@snx-v3/formatters';
+import { formatNumber, formatNumberToUsd } from '@snx-v3/formatters';
 import { Sparkles } from '@snx-v3/icons';
 import { TokenIcon } from '@snx-v3/TokenIcon';
 import { Tooltip } from '@snx-v3/Tooltip';
+import { useApr } from '@snx-v3/useApr';
 import { useStataUSDCApr } from '@snx-v3/useApr/useStataUSDCApr';
 import { Network, NetworkIcon, useNetwork, useWallet } from '@snx-v3/useBlockchain';
 import { CollateralType } from '@snx-v3/useCollateralTypes';
@@ -24,7 +25,6 @@ interface CollateralTypeWithDeposited extends CollateralType {
 export function PoolRow({
   pool: _pool,
   network,
-  apr,
   collateralType,
   collateralPrices,
 }: {
@@ -38,11 +38,6 @@ export function PoolRow({
     symbol: string;
     price: ethers.BigNumber;
   }[];
-  apr: {
-    combinedApr: number;
-    cumulativePnl: number;
-    collateralAprs: any[];
-  };
 }) {
   const [params, setParams] = useParams();
 
@@ -90,11 +85,14 @@ export function PoolRow({
     )?.price ?? 0
   );
 
-  const collateralApr = apr.collateralAprs.find(
-    (apr) => apr.collateralType === collateralType.tokenAddress.toLowerCase()
-  ) || { apr7d: 0, apr7dRewards: 0, apr7dPnl: 0 };
-
-  const { apr7d, apr7dRewards, apr7dPnl } = collateralApr;
+  const { data: apr, isPending: isPendingApr } = useApr(network);
+  const positionApr = React.useMemo(() => {
+    if (apr && collateralType) {
+      return apr.find(
+        (item) => item.collateralType.toLowerCase() === collateralType.tokenAddress.toLowerCase()
+      );
+    }
+  }, [apr, collateralType]);
 
   const onClick = async (e: React.MouseEvent) => {
     e.preventDefault();
@@ -236,33 +234,49 @@ export function PoolRow({
             fontWeight={500}
             color="white"
           >
-            {isAndromedaStataUSDC && stataUSDCApr
-              ? formatApr(apr7d * 100 + stataUSDCApr)
-              : formatApr(apr7d * 100)}
-            <Tooltip
-              label={
-                <Flex direction="column">
-                  <Flex justifyContent="space-between">
-                    <Text fontWeight={700} mr={2}>
-                      Total APR:
-                    </Text>
-                    <Text fontWeight={700}>{formatApr(apr7d * 100)}</Text>
-                  </Flex>
-                  <Flex justifyContent="space-between">
-                    <Text mr={2}>Performance:</Text>
-                    <Text>{formatApr(apr7dPnl * 100)}</Text>
-                  </Flex>
-                  <Flex justifyContent="space-between">
-                    <Text mr={2}>Rewards: </Text>
-                    <Text>{formatApr(apr7dRewards * 100)}</Text>
+            {isPendingApr ? '~' : null}
+            {!isPendingApr && positionApr && positionApr.apr28d > 0
+              ? (
+                  positionApr.apr28d * 100 +
+                  (isAndromedaStataUSDC && stataUSDCApr ? stataUSDCApr : 0)
+                )
+                  .toFixed(2)
+                  .concat('%')
+              : '-'}
+            {!isPendingApr && positionApr && positionApr.apr28d > 0 ? (
+              <Tooltip
+                label={
+                  <Flex direction="column">
+                    <Flex justifyContent="space-between">
+                      <Text fontWeight={700} mr={2}>
+                        Total APR:
+                      </Text>
+                      <Text fontWeight={700}>
+                        {(positionApr.apr28d * 100).toFixed(2).concat('%')}
+                      </Text>
+                    </Flex>
+                    <Flex justifyContent="space-between">
+                      <Text mr={2}>Performance:</Text>
+                      <Text>{(positionApr.apr28dPnl * 100).toFixed(2).concat('%')}</Text>
+                    </Flex>
+                    <Flex justifyContent="space-between">
+                      <Text mr={2}>Rewards: </Text>
+                      <Text>{(positionApr.apr28dRewards * 100).toFixed(2).concat('%')}</Text>
+                    </Flex>
+                    {isAndromedaStataUSDC && stataUSDCApr ? (
+                      <Flex justifyContent="space-between">
+                        <Text mr={2}>AAVE yield: </Text>
+                        <Text>{stataUSDCApr.toFixed(2).concat('%')}</Text>
+                      </Flex>
+                    ) : null}
                   </Flex>
+                }
+              >
+                <Flex as="span" display="inline">
+                  <Sparkles w="14px" h="14px" mb={1} ml="0.5px" mt="1px" />
                 </Flex>
-              }
-            >
-              <Flex as="span" display="inline">
-                <Sparkles w="14px" h="14px" mb={1} ml="0.5px" mt="1px" />
-              </Flex>
-            </Tooltip>
+              </Tooltip>
+            ) : null}
           </Text>
         </Flex>
         <Flex minW="120px" flex="1" justifyContent="flex-end">

diff --git a/liquidity/lib/Pools/PoolsList.tsx b/liquidity/lib/Pools/PoolsList.tsx
@@ -64,11 +64,11 @@ export function PoolsList() {
     isStataPriceLoading;
 
   const filteredPools = React.useMemo(() => {
-    if (!poolsList?.synthetixPools) {
+    if (!poolsList) {
       return [];
     }
 
-    return poolsList.synthetixPools.map(({ network, poolInfo, apr }) => {
+    return poolsList.map(({ network, poolInfo }) => {
       const collateralDeposited = poolInfo.map(({ collateral_type }) => ({
         collateralDeposited: collateral_type.total_amount_deposited,
         tokenAddress: collateral_type.id,
@@ -93,12 +93,11 @@ export function PoolsList() {
       return {
         network,
         poolInfo,
-        apr,
         collateralDeposited,
         collateralTypes,
       };
     });
-  }, [poolsList?.synthetixPools, baseCollateralTypes, mainnetCollateralTypes]);
+  }, [poolsList, baseCollateralTypes, mainnetCollateralTypes]);
 
   const allCollateralPrices = React.useMemo(() => {
     if (stata && stataPrice) {
@@ -122,13 +121,12 @@ export function PoolsList() {
       {!isPending && filteredPools && allCollateralPrices ? (
         <Flex minW="800px" direction="column-reverse" gap={4}>
           {filteredPools.flatMap(
-            ({ network, poolInfo, apr, collateralTypes }) =>
+            ({ network, poolInfo, collateralTypes }) =>
               collateralTypes?.map((collateralType) => (
                 <PoolRow
                   key={`${network.id}-${collateralType.address}`}
                   pool={poolInfo?.[0]?.pool}
                   network={network}
-                  apr={apr}
                   collateralType={collateralType}
                   collateralPrices={allCollateralPrices}
                 />

diff --git a/liquidity/lib/Positions/PositionTableHeader.tsx b/liquidity/lib/Positions/PositionTableHeader.tsx
@@ -50,7 +50,7 @@ export function PositionTableHeader() {
               label={
                 <Flex flexDirection="column" alignItems="start">
                   <Text textAlign="left" fontSize="14px">
-                    APR is averaged over the trailing 7 days and is comprised of both performance
+                    APR is averaged over the trailing 28 days and is comprised of both performance
                     and rewards
                   </Text>
                 </Flex>

diff --git a/liquidity/lib/Positions/PositionsList.tsx b/liquidity/lib/Positions/PositionsList.tsx
@@ -1,6 +1,5 @@
 import { Flex, Heading, Table, TableContainer, Tbody, Text, Tr } from '@chakra-ui/react';
 import { POOL_ID } from '@snx-v3/constants';
-import { useApr } from '@snx-v3/useApr';
 import { NetworkIcon, useNetwork, useWallet } from '@snx-v3/useBlockchain';
 import { useLiquidityPositions } from '@snx-v3/useLiquidityPositions';
 import { useParams } from '@snx-v3/useParams';
@@ -20,7 +19,6 @@ export const PositionsList = () => {
 
   const { data: liquidityPositions, isPending: isPendingLiquidityPositions } =
     useLiquidityPositions({ accountId: params.accountId });
-  const { data: apr } = useApr();
 
   const filteredLiquidityPositions = React.useMemo(
     () =>
@@ -99,23 +97,14 @@ export const PositionsList = () => {
               ) : (
                 <>
                   {filteredLiquidityPositions?.map((liquidityPosition, i) => {
-                    const positionApr = apr?.collateralAprs?.find(
-                      (apr: { collateralType: string }) =>
-                        apr.collateralType.toLowerCase() ===
-                        liquidityPosition.collateralType.tokenAddress.toLowerCase()
-                    );
-
                     return (
                       <Tr
                         key={`${POOL_ID}-${liquidityPosition.collateralType.tokenAddress}`}
                         borderBottomWidth={
                           i === filteredLiquidityPositions.length - 1 ? 'none' : '1px'
                         }
                       >
-                        <PositionRow
-                          liquidityPosition={liquidityPosition}
-                          apr={positionApr?.apr7d * 100}
-                        />
+                        <PositionRow liquidityPosition={liquidityPosition} />
                       </Tr>
                     );
                   })}

diff --git a/liquidity/lib/Positions/PositionsRow.tsx b/liquidity/lib/Positions/PositionsRow.tsx
@@ -22,14 +22,10 @@ import { type LiquidityPositionType } from '@snx-v3/useLiquidityPosition';
 import { makeSearch, useParams } from '@snx-v3/useParams';
 import { useWithdrawTimer } from '@snx-v3/useWithdrawTimer';
 import lockIcon from './lock.svg';
+import React from 'react';
+import { useApr } from '@snx-v3/useApr';
 
-export function PositionRow({
-  liquidityPosition,
-  apr,
-}: {
-  liquidityPosition: LiquidityPositionType;
-  apr?: number;
-}) {
+export function PositionRow({ liquidityPosition }: { liquidityPosition: LiquidityPositionType }) {
   const [params, setParams] = useParams();
   const { network } = useNetwork();
 
@@ -39,8 +35,7 @@ export function PositionRow({
   });
 
   const { minutes, hours, isRunning } = useWithdrawTimer(params.accountId);
-  const { data: stataUSDCAPR } = useStataUSDCApr(network?.id, network?.preset);
-  const stataUSDCAPRParsed = stataUSDCAPR || 0;
+  const { data: stataUSDCApr } = useStataUSDCApr(network?.id, network?.preset);
 
   const collateralAmount = liquidityPosition
     ? liquidityPosition.collateralAmount.add(liquidityPosition.totalLocked)
@@ -52,6 +47,17 @@ export function PositionRow({
       )
     : undefined;
 
+  const { data: apr, isPending: isPendingApr } = useApr(network);
+  const positionApr = React.useMemo(
+    () =>
+      apr?.find(
+        (item) =>
+          item.collateralType.toLowerCase() ===
+          liquidityPosition?.collateralType?.tokenAddress.toLowerCase()
+      ),
+    [apr, liquidityPosition?.collateralType?.tokenAddress]
+  );
+
   return (
     <>
       <Td border="none">
@@ -190,8 +196,14 @@ export function PositionRow({
         <Fade in>
           <Flex flexDirection="column" alignItems="flex-end">
             <Text color="white" lineHeight="1.25rem" fontFamily="heading" fontSize="sm">
-              {apr && apr > 0
-                ? (isAndromedaStataUSDC ? apr + stataUSDCAPRParsed : apr).toFixed(2).concat('%')
+              {isPendingApr ? '~' : null}
+              {!isPendingApr && positionApr && positionApr.apr28d > 0
+                ? (
+                    positionApr.apr28d * 100 +
+                    (isAndromedaStataUSDC && stataUSDCApr ? stataUSDCApr : 0)
+                  )
+                    .toFixed(2)
+                    .concat('%')
                 : '-'}
             </Text>
           </Flex>