Qa/round 1 (#372)

* wip * add useRewardsDistributors * round 1 qa
Synthetixio · Jul 21, 2024 · a02d466 · a02d466
1 parent bc4328c
commit a02d466
Show file tree

Hide file tree

Showing 9 changed files with 150 additions and 64 deletions.
diff --git a/liquidity/lib/useRewardsDistributors/index.ts b/liquidity/lib/useRewardsDistributors/index.ts
@@ -0,0 +1 @@
+export * from './useRewardsDistributors';
diff --git a/liquidity/lib/useRewardsDistributors/package.json b/liquidity/lib/useRewardsDistributors/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@snx-v3/useRewardsDistributors",
+  "private": true,
+  "main": "index.ts",
+  "version": "0.0.1",
+  "dependencies": {
+    "@snx-v3/contracts": "workspace:*",
+    "@snx-v3/useBlockchain": "workspace:*",
+    "@tanstack/react-query": "^5.8.3"
+  }
+}
diff --git a/liquidity/lib/useRewardsDistributors/useRewardsDistributors.ts b/liquidity/lib/useRewardsDistributors/useRewardsDistributors.ts
@@ -0,0 +1,19 @@
+import { Network, useNetwork } from '@snx-v3/useBlockchain';
+import { useQuery } from '@tanstack/react-query';
+import { importRewardsDistributors } from '@snx-v3/contracts';
+
+export function useRewardsDistributors(customNetwork?: Network) {
+  const { network } = useNetwork();
+  const targetNetwork = customNetwork || network;
+
+  return useQuery({
+    queryKey: [`${targetNetwork?.id}-${targetNetwork?.preset}`, 'RewardsDistributors'],
+    queryFn: async function () {
+      if (!targetNetwork) throw new Error('useRewardsDistributors should be disabled');
+
+      return importRewardsDistributors(targetNetwork?.id, targetNetwork?.preset);
+    },
+    enabled: Boolean(targetNetwork),
+    staleTime: Infinity,
+  });
+}
diff --git a/liquidity/ui/package.json b/liquidity/ui/package.json
@@ -66,6 +66,7 @@
     "@snx-v3/usePoolsList": "workspace:*",
     "@snx-v3/useRepay": "workspace:*",
     "@snx-v3/useRewards": "workspace:^",
+    "@snx-v3/useRewardsDistributors": "workspace:^",
     "@snx-v3/useSystemToken": "workspace:*",
     "@snx-v3/useTokenBalance": "workspace:*",
     "@snx-v3/useTransferAccountId": "workspace:*",

diff --git a/liquidity/ui/src/components/Pools/PoolCards/PoolCard.tsx b/liquidity/ui/src/components/Pools/PoolCards/PoolCard.tsx
@@ -56,6 +56,7 @@ export interface PoolCardProps {
     collateralAprs: any[];
   };
   balances?: Wei[];
+  rewardsPayoutTokens?: string[];
 }
 
 export const PoolCard = ({
@@ -65,6 +66,7 @@ export const PoolCard = ({
   collateralTypes,
   collateralPrices,
   balances,
+  rewardsPayoutTokens,
 }: PoolCardProps) => {
   const navigate = useNavigate();
   const [queryParams] = useSearchParams();
@@ -164,7 +166,23 @@ export const PoolCard = ({
                       ?.concat('%')}`
                   : '-'}
               </Text>
-              <Tooltip label="Apr is averaged over the trailing 28 days and is comprised of both performance and rewards.">
+              <Tooltip
+                label={
+                  <Flex direction="column">
+                    <Text color="white" fontFamily="heading" fontSize="sm" lineHeight={5}>
+                      Rewards Available
+                    </Text>
+                    {rewardsPayoutTokens?.map((token) => (
+                      <Flex key={token} alignItems="center" mt={1}>
+                        <TokenIcon mr={1} width={16} height={16} mt={1} symbol={token} />
+                        <Text mt={1} fontSize="sm" lineHeight={5}>
+                          {token}
+                        </Text>
+                      </Flex>
+                    ))}
+                  </Flex>
+                }
+              >
                 <Flex>
                   <Sparkles w="18px" h="18px" mb={0.5} />
                 </Flex>
@@ -279,10 +297,36 @@ export const PoolCard = ({
 
                 const { apr28d, apr28dRewards, apr28dPnl } = collateralApr;
 
+                const onClick = async () => {
+                  try {
+                    if (!currentNetwork) {
+                      connect();
+                      return;
+                    }
+
+                    if (currentNetwork.id !== network.id) {
+                      if (!(await setNetwork(network.id))) {
+                        return;
+                      }
+                    }
+
+                    queryParams.set('manageAction', 'deposit');
+                    navigate({
+                      pathname: `/positions/${type.symbol}/${pool.id}`,
+                      search: queryParams.toString(),
+                    });
+                  } catch (error) {}
+                };
+
                 return (
                   <Tr key={type.tokenAddress}>
                     <Td border="none" px={4} w="20%">
-                      <Flex minWidth="120px" alignItems="center">
+                      <Flex
+                        minWidth="120px"
+                        alignItems="center"
+                        _hover={{ textDecoration: 'underline', cursor: 'pointer' }}
+                        onClick={onClick}
+                      >
                         <TokenIcon w={26} h={26} symbol={type.symbol} />
                         <Flex flexDirection="column" ml={3} mr="auto">
                           <Text
@@ -383,28 +427,7 @@ export const PoolCard = ({
                     </Td>
                     <Td border="none" textAlign="right" pl={4} pr={0}>
                       <Button
-                        onClick={async (e) => {
-                          try {
-                            e.stopPropagation();
-
-                            if (!currentNetwork) {
-                              connect();
-                              return;
-                            }
-
-                            if (currentNetwork.id !== network.id) {
-                              if (!(await setNetwork(network.id))) {
-                                return;
-                              }
-                            }
-
-                            queryParams.set('manageAction', 'deposit');
-                            navigate({
-                              pathname: `/positions/${type.symbol}/${pool.id}`,
-                              search: queryParams.toString(),
-                            });
-                          } catch (error) {}
-                        }}
+                        onClick={onClick}
                         size="sm"
                         height="32px"
                         py="10px"
@@ -416,7 +439,7 @@ export const PoolCard = ({
                         fontSize="14px"
                         lineHeight="20px"
                       >
-                        Deposit
+                        {!currentNetwork ? 'Connect Wallet' : 'Deposit'}
                       </Button>
                     </Td>
                   </Tr>

diff --git a/liquidity/ui/src/components/Pools/PoolCards/TorosPoolCard.tsx b/liquidity/ui/src/components/Pools/PoolCards/TorosPoolCard.tsx
@@ -19,7 +19,6 @@ import {
 } from '@chakra-ui/react';
 import { NetworkIcon } from '@snx-v3/useBlockchain';
 import { TokenIcon } from '../../TokenIcon';
-import { Sparkles } from '@snx-v3/icons';
 import { Tooltip } from '@snx-v3/Tooltip';
 
 interface TorosPoolCardProps {
@@ -44,17 +43,7 @@ export function TorosPoolCard({ tvl, apy }: TorosPoolCardProps) {
           width="calc(100% - 2px)"
           height="calc(100% - 2px)"
         />
-        <Flex
-          position="relative"
-          onClick={() => {
-            window.open('https://toros.finance/synthetix-usdc-andromeda-yield', '_blank');
-          }}
-          flexDir="column"
-          rounded="base"
-          bg="navy.700"
-          _hover={{ cursor: 'pointer', bg: 'whiteAlpha.50', textDecoration: 'none' }}
-          p={6}
-        >
+        <Flex position="relative" flexDir="column" rounded="base" bg="navy.700" p={6}>
           <Flex
             flexDir={['column', 'row']}
             w="100%"
@@ -195,7 +184,6 @@ export function TorosPoolCard({ tvl, apy }: TorosPoolCardProps) {
                       minWidth="100px"
                     >
                       {apy}%
-                      <Sparkles w="14px" h="14px" mb={1} ml="0.5px" mt="1px" />
                     </Text>
                   </Td>
                   <Td border="none" textAlign="right" px={0}>

diff --git a/liquidity/ui/src/components/Pools/PoolsList.tsx b/liquidity/ui/src/components/Pools/PoolsList.tsx
@@ -10,6 +10,7 @@ import { ARBITRUM, BASE_ANDROMEDA } from '@snx-v3/useBlockchain';
 import { isBaseAndromeda } from '@snx-v3/isBaseAndromeda';
 import { useTokenBalances } from '@snx-v3/useTokenBalance';
 import { useGetUSDTokens } from '@snx-v3/useGetUSDTokens';
+import { useRewardsDistributors } from '@snx-v3/useRewardsDistributors';
 
 export const PoolsList = () => {
   const [state, dispatch] = useReducer(poolsReducer, { collateral: [], chain: [] });
@@ -54,6 +55,14 @@ export const PoolsList = () => {
     BASE_ANDROMEDA
   );
 
+  // Arb Rewards
+  const { data: ArbitrumRewards, isLoading: isArbitrumRewardsLoading } =
+    useRewardsDistributors(ARBITRUM);
+
+  // Base Rewards
+  const { data: BaseRewards, isLoading: isBaseRewardsLoading } =
+    useRewardsDistributors(BASE_ANDROMEDA);
+
   const { collateral, chain } = state;
 
   const showToros =
@@ -66,7 +75,9 @@ export const PoolsList = () => {
     isBaseCollateralLoading ||
     isArbCollateralLoading ||
     isArbitrumBalancesLoading ||
-    isBaseBalancesLoading;
+    isBaseBalancesLoading ||
+    isArbitrumRewardsLoading ||
+    isBaseRewardsLoading;
 
   const filteredPools = useMemo(() => {
     return (
@@ -88,6 +99,7 @@ export const PoolsList = () => {
           }));
 
           const balances = network.id === ARBITRUM.id ? ArbitrumTokenBalances : BaseTokenBalances;
+          const rewardsDistributors = network.id === ARBITRUM.id ? ArbitrumRewards : BaseRewards;
 
           return {
             network,
@@ -96,6 +108,7 @@ export const PoolsList = () => {
             collateralDeposited,
             collateralTypes,
             balances,
+            rewardsDistributors,
           };
         })
         .filter((pool) => {
@@ -133,6 +146,8 @@ export const PoolsList = () => {
     data?.synthetixPools,
     ArbitrumTokenBalances,
     BaseTokenBalances,
+    ArbitrumRewards,
+    BaseRewards,
   ]);
 
   return (
@@ -150,21 +165,32 @@ export const PoolsList = () => {
           <TorosPoolCard tvl={data?.toros.tvl || ''} apy={data?.toros.apy} />
         )}
         {!isLoading &&
-          filteredPools.map(({ network, poolInfo, apr, collateralTypes, balances }) => {
-            const { pool } = poolInfo[0];
-
-            return (
-              <PoolCard
-                key={network.hexId}
-                collateralTypes={collateralTypes}
-                collateralPrices={collateralPrices}
-                apr={apr}
-                network={network}
-                pool={pool}
-                balances={balances}
-              />
-            );
-          })}
+          filteredPools.map(
+            ({ network, poolInfo, apr, collateralTypes, balances, rewardsDistributors }) => {
+              const { pool } = poolInfo[0];
+
+              const rewardsPayoutTokens = [
+                ...new Set(
+                  rewardsDistributors?.map(({ payoutToken }: any) =>
+                    payoutToken.symbol.toUpperCase()
+                  )
+                ),
+              ] as string[];
+
+              return (
+                <PoolCard
+                  key={network.hexId}
+                  collateralTypes={collateralTypes}
+                  collateralPrices={collateralPrices}
+                  apr={apr}
+                  network={network}
+                  pool={pool}
+                  balances={balances}
+                  rewardsPayoutTokens={rewardsPayoutTokens}
+                />
+              );
+            }
+          )}
 
         {!isLoading && !filteredPools.length && (
           <Flex flexDir="column" alignItems="center">
@@ -216,7 +242,8 @@ function poolsReducer(state: PoolsFilterState, action: PoolsFilterAction): Pools
       if (action.payload?.collateral) {
         return {
           ...state,
-          collateral: [...state.collateral, action.payload.collateral],
+          // Only one collateral active at once
+          collateral: [action.payload.collateral],
         };
       }
 

diff --git a/liquidity/ui/src/components/Positions/PositionsTable/PositionsRow.tsx b/liquidity/ui/src/components/Positions/PositionsTable/PositionsRow.tsx
@@ -32,11 +32,23 @@ export function PositionRow({
     poolId,
   });
 
+  const onClick = () => {
+    queryParams.set('manageAction', debt.gt(0) ? 'repay' : 'claim');
+    navigate({
+      pathname: `/positions/${collateralType.symbol}/${poolId}`,
+      search: queryParams.toString(),
+    });
+  };
+
   return (
     <Tr borderBottomWidth={final ? 'none' : '1px'}>
       <Td border="none">
         <Fade in>
-          <Flex alignItems="center">
+          <Flex
+            alignItems="center"
+            _hover={{ textDecoration: 'underline', cursor: 'pointer' }}
+            onClick={onClick}
+          >
             <TokenIcon symbol={collateralType.symbol} />
             <Flex flexDirection="column" ml={3}>
               <Text
@@ -89,13 +101,7 @@ export function PositionRow({
               fontSize="0.75rem"
               lineHeight="1rem"
               cursor="pointer"
-              onClick={() => {
-                queryParams.set('manageAction', debt.gt(0) ? 'repay' : 'claim');
-                navigate({
-                  pathname: `/positions/${collateralType.symbol}/${poolId}`,
-                  search: queryParams.toString(),
-                });
-              }}
+              onClick={onClick}
             >
               {debt.gt(0) ? 'Repay Debt' : 'Claim Credit'}
             </Text>
@@ -109,7 +115,6 @@ export function PositionRow({
               <Text color="white" fontSize="sm" lineHeight="1.25rem" fontFamily="heading">
                 {debt.gt(0) ? (cRatio.toNumber() * 100).toFixed(2) + '%' : 'Infinite'}
               </Text>
-
               <CRatioBadge
                 cRatio={cRatio.toNumber() * 100}
                 liquidationCratio={(collateralType?.liquidationRatioD18?.toNumber() || 0) * 100}

diff --git a/yarn.lock b/yarn.lock
@@ -5829,6 +5829,7 @@ __metadata:
     "@snx-v3/usePoolsList": "workspace:*"
     "@snx-v3/useRepay": "workspace:*"
     "@snx-v3/useRewards": "workspace:^"
+    "@snx-v3/useRewardsDistributors": "workspace:^"
     "@snx-v3/useSystemToken": "workspace:*"
     "@snx-v3/useTokenBalance": "workspace:*"
     "@snx-v3/useTransferAccountId": "workspace:*"
@@ -6667,6 +6668,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@snx-v3/useRewardsDistributors@workspace:^, @snx-v3/useRewardsDistributors@workspace:liquidity/lib/useRewardsDistributors":
+  version: 0.0.0-use.local
+  resolution: "@snx-v3/useRewardsDistributors@workspace:liquidity/lib/useRewardsDistributors"
+  dependencies:
+    "@snx-v3/contracts": "workspace:*"
+    "@snx-v3/useBlockchain": "workspace:*"
+    "@tanstack/react-query": "npm:^5.8.3"
+  languageName: unknown
+  linkType: soft
+
 "@snx-v3/useSpotMarketProxy@workspace:*, @snx-v3/useSpotMarketProxy@workspace:liquidity/lib/useSpotMarketProxy":
   version: 0.0.0-use.local
   resolution: "@snx-v3/useSpotMarketProxy@workspace:liquidity/lib/useSpotMarketProxy"