Synthetixio · Rickk137 · Oct 3, 2024
diff --git a/liquidity/lib/usePoolsList/usePoolsList.ts b/liquidity/lib/usePoolsList/usePoolsList.ts
@@ -9,18 +9,14 @@ export function usePoolsList() {
     queryKey: ['poolsList'],
     queryFn: async () => {
       try {
-        const [pools, aprs, toros] = await Promise.all([
-          fetchPoolsList(),
-          fetchAprs(),
-          fetchTorosPool(),
-        ]);
+        const [pools, aprs] = await Promise.all([fetchPoolsList(), fetchAprs()]);
 
         const synthetixPools = pools.map((p, i) => ({
           ...p,
           apr: aprs[i],
         }));
 
-        return { synthetixPools, toros };
+        return { synthetixPools };
       } catch (error) {
         throw error;
       }
@@ -43,7 +39,7 @@ export function usePool(networkId: number, poolId: string) {
 
 const supportedNetworks = [MAINNET.id, BASE_ANDROMEDA.id, ARBITRUM.id];
 
-async function fetchTorosPool() {
+export async function fetchTorosPool(address: string) {
   return fetch('https://api-v2.dhedge.org/graphql', {
     method: 'POST',
     headers: {
@@ -60,7 +56,7 @@ async function fetchTorosPool() {
                 }
               }
             }`,
-      variables: { address: '0xc1e02884af4a283ca25ab63c45360d220d69da52' },
+      variables: { address },
     }),
   })
     .then((response) => response.json())

diff --git a/liquidity/ui/src/components/Pools/CollateralFilter.tsx b/liquidity/ui/src/components/Pools/CollateralFilter.tsx
@@ -3,15 +3,15 @@ import { Flex, Button } from '@chakra-ui/react';
 import { TokenIcon } from '../TokenIcon';
 import { PoolsFilterAction } from './PoolsList';
 
-const supportedCollateralTypes = ['WETH', 'SNX', 'USDC', 'ARB'];
+const supportedCollateralTypes = ['WETH', 'SNX', 'USDC', 'ARB', 'wstETH'];
 
 interface CollateralFilterProps {
-  activeCollateral: string[];
+  activeCollaterals: string[];
   dispatch: Dispatch<PoolsFilterAction>;
 }
 
-export const CollateralFilter = ({ activeCollateral, dispatch }: CollateralFilterProps) => {
-  const isAllActive = activeCollateral.length === 0;
+export const CollateralFilter = ({ activeCollaterals, dispatch }: CollateralFilterProps) => {
+  const isAllActive = activeCollaterals.length === 0;
 
   return (
     <Flex justifyContent="center">
@@ -31,7 +31,7 @@ export const CollateralFilter = ({ activeCollateral, dispatch }: CollateralFilte
         All Collaterals
       </Flex>
       {supportedCollateralTypes.map((collateral) => {
-        const isActive = activeCollateral.includes(collateral);
+        const isActive = activeCollaterals.includes(collateral);
 
         const toggle = () => {
           if (isActive) {

diff --git a/liquidity/ui/src/components/Pools/PoolCards/Specifics.tsx b/liquidity/ui/src/components/Pools/PoolCards/Specifics.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text, Tooltip } from '@chakra-ui/react';
+import { Text, Tooltip } from '@chakra-ui/react';
 import { isBaseAndromeda } from '@snx-v3/isBaseAndromeda';
 import { Network } from '@snx-v3/useBlockchain';
 import { CollateralType } from '@snx-v3/useCollateralTypes';
@@ -12,72 +12,45 @@ export const Specifics: React.FC<{
 
   if (isToros) {
     return (
-      <Tooltip
-        textAlign="left"
-        label="This vault is earning OP tokens via the Optimism Superfest"
-        hasArrow
-      >
-        <Flex alignItems="center" gap={1}>
-          <svg
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M9.88064 4.06846L11.3748 2.15234L13.0991 3.8503L15.2155 2.65124L16.1537 4.88353L18.5638 4.583L18.5764 7.01033L20.9153 7.65218L19.9966 9.90465L21.911 11.393L20.2043 13.1261L21.3988 15.2346L19.1624 16.1874L19.4585 18.5929L17.0302 18.6198L16.3803 20.9583L14.1346 20.051L12.6404 21.9669L10.9161 20.2691L8.8048 21.4668L7.86152 19.2358L5.45645 19.535L5.44384 17.1077L3.10504 16.4658L4.01854 14.2147L2.10938 12.725L3.81606 10.9919L2.62139 8.88343L4.85283 7.93191L4.56173 5.52507L6.98502 5.49955L7.63501 3.16113L9.88064 4.06846Z"
-              fill="#FF0420"
-            />
-            <path
-              d="M10.3028 5.5633L11.5158 4.00781L12.9156 5.3862L14.6337 4.41282L15.3953 6.22499L17.3518 5.981L17.3621 7.95153L19.2608 8.47257L18.515 10.3011L20.069 11.5093L18.6835 12.9163L19.6534 14.628L17.8378 15.4015L18.0782 17.3543L16.1069 17.3761L15.5792 19.2745L13.7562 18.5379L12.5432 20.0934L11.1434 18.7149L9.42948 19.6873L8.66372 17.8762L6.71129 18.1191L6.70105 16.1485L4.80241 15.6275L5.544 13.8L3.99414 12.5907L5.37961 11.1838L4.40979 9.4721L6.22128 8.69967L5.98494 6.74578L7.95217 6.72508L8.47984 4.82674L10.3028 5.5633Z"
-              fill="#FFF2AF"
-            />
-            <path
-              d="M10.7261 7.08202L11.649 5.89844L12.7141 6.94727L14.0214 6.2066L14.6009 7.58549L16.0896 7.39984L16.0975 8.89921L17.5421 9.29568L16.9747 10.687L18.1571 11.6064L17.1029 12.6769L17.8408 13.9793L16.4594 14.5679L16.6424 16.0538L15.1423 16.0704L14.7408 17.5148L13.3537 16.9543L12.4308 18.138L11.3657 17.0891L10.0615 17.8289L9.47887 16.4509L7.99325 16.6357L7.98548 15.1363L6.54081 14.7398L7.10506 13.3493L5.92578 12.4292L6.97999 11.3586L6.24205 10.0562L7.62041 9.46846L7.44058 7.98177L8.93746 7.96601L9.33895 6.52157L10.7261 7.08202Z"
-              fill="#69D7FF"
-            />
-          </svg>
-
-          <svg
-            width="18"
-            height="18"
-            viewBox="0 0 18 18"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M13.0174 5.43933L15.5565 5.4607L15.0114 4.65886C14.199 3.44599 13.0368 2.5094 11.6789 1.97498C10.3209 1.44054 8.83247 1.33405 7.41236 1.66991C5.9923 2.00576 4.70896 2.76772 3.73297 3.85315C3.07438 4.58558 2.57681 5.44183 2.26542 6.36621L1.01824 5.51595C2.28007 2.28873 5.41556 4.87321e-06 9.05782 5.23486e-06C10.3077 -0.00137571 11.5437 0.270478 12.6786 0.796884C13.3279 1.09804 14.2005 1.79177 14.8284 2.33033C15.3725 2.79694 15.8344 3.34704 16.238 3.93781L16.5875 4.44947V1.79811H18V6.87641H13.0174V5.43933Z"
-              fill="white"
-            />
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M4.98265 12.5607L2.44347 12.5393L2.98862 13.3411C3.801 14.554 4.96324 15.4906 6.32114 16.025C7.67912 16.5595 9.16753 16.666 10.5876 16.3301C12.0077 15.9942 13.291 15.2323 14.267 14.1469C14.9256 13.4144 15.4232 12.5582 15.7346 11.6338L16.9818 12.484C15.7199 15.7113 12.5844 18 8.94218 18C7.69234 18.0014 6.45634 17.7295 5.3214 17.2031C4.67209 16.902 3.79947 16.2082 3.17156 15.6697C2.62753 15.2031 2.16563 14.653 1.76203 14.0622L1.41246 13.5505V16.2019H0V11.1236H4.98265V12.5607Z"
-              fill="white"
-            />
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M8.15203 7.43259C8.15749 7.17392 8.23184 7.06855 8.2819 7.01839C8.34795 6.9522 8.47557 6.8811 8.71189 6.84375C9.20433 6.76593 9.87038 6.87923 10.42 7.02301L11.0951 7.19961L11.4508 5.8585L10.7756 5.6819C10.1959 5.53025 9.28981 5.34813 8.49247 5.47415C8.08389 5.53872 7.63721 5.69436 7.29017 6.04213C6.92908 6.40398 6.75541 6.89352 6.75541 7.46324V7.48949L6.75741 7.51568C6.80774 8.17482 7.2026 8.61291 7.61215 8.90098C7.9876 9.16507 8.453 9.35742 8.82896 9.51279C8.84315 9.51866 8.85721 9.52447 8.87114 9.53023C9.2958 9.70592 9.61093 9.84124 9.82934 10.0001C10.0216 10.14 10.0408 10.2246 10.0408 10.2993C10.0408 10.589 9.95496 10.7041 9.88771 10.7645C9.79772 10.8453 9.62873 10.9241 9.34044 10.9598C8.75321 11.0324 7.99039 10.8896 7.42884 10.7403L6.75445 10.5609L6.39323 11.9005L7.06761 12.0799C7.66109 12.2377 8.64365 12.4435 9.51303 12.336C9.95306 12.2815 10.4402 12.138 10.8242 11.7931C11.231 11.4277 11.4371 10.9136 11.4371 10.2993C11.4371 9.62952 11.0601 9.17643 10.6544 8.8813C10.2852 8.61267 9.81651 8.4189 9.43937 8.26297C9.42885 8.25862 9.4184 8.2543 9.40803 8.25001C8.98398 8.07458 8.65635 7.93607 8.41913 7.76921C8.21793 7.62769 8.1647 7.52425 8.15203 7.43259Z"
-              fill="white"
-            />
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M8.9936 11.3259C9.37918 11.3259 9.69176 11.6363 9.69176 12.0193V13.7528H8.29545V12.0193C8.29545 11.6363 8.60803 11.3259 8.9936 11.3259Z"
-              fill="white"
-            />
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M9.69176 4.04495V5.77849C9.69176 6.16146 9.37918 6.47191 8.9936 6.47191C8.60803 6.47191 8.29545 6.16146 8.29545 5.77849V4.04495H9.69176Z"
-              fill="white"
-            />
-          </svg>
-        </Flex>
+      <Tooltip textAlign="left" label="Auto compounding rewards" hasArrow>
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 18 18"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M13.0174 5.43933L15.5565 5.4607L15.0114 4.65886C14.199 3.44599 13.0368 2.5094 11.6789 1.97498C10.3209 1.44054 8.83247 1.33405 7.41236 1.66991C5.9923 2.00576 4.70896 2.76772 3.73297 3.85315C3.07438 4.58558 2.57681 5.44183 2.26542 6.36621L1.01824 5.51595C2.28007 2.28873 5.41556 4.87321e-06 9.05782 5.23486e-06C10.3077 -0.00137571 11.5437 0.270478 12.6786 0.796884C13.3279 1.09804 14.2005 1.79177 14.8284 2.33033C15.3725 2.79694 15.8344 3.34704 16.238 3.93781L16.5875 4.44947V1.79811H18V6.87641H13.0174V5.43933Z"
+            fill="white"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M4.98265 12.5607L2.44347 12.5393L2.98862 13.3411C3.801 14.554 4.96324 15.4906 6.32114 16.025C7.67912 16.5595 9.16753 16.666 10.5876 16.3301C12.0077 15.9942 13.291 15.2323 14.267 14.1469C14.9256 13.4144 15.4232 12.5582 15.7346 11.6338L16.9818 12.484C15.7199 15.7113 12.5844 18 8.94218 18C7.69234 18.0014 6.45634 17.7295 5.3214 17.2031C4.67209 16.902 3.79947 16.2082 3.17156 15.6697C2.62753 15.2031 2.16563 14.653 1.76203 14.0622L1.41246 13.5505V16.2019H0V11.1236H4.98265V12.5607Z"
+            fill="white"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8.15203 7.43259C8.15749 7.17392 8.23184 7.06855 8.2819 7.01839C8.34795 6.9522 8.47557 6.8811 8.71189 6.84375C9.20433 6.76593 9.87038 6.87923 10.42 7.02301L11.0951 7.19961L11.4508 5.8585L10.7756 5.6819C10.1959 5.53025 9.28981 5.34813 8.49247 5.47415C8.08389 5.53872 7.63721 5.69436 7.29017 6.04213C6.92908 6.40398 6.75541 6.89352 6.75541 7.46324V7.48949L6.75741 7.51568C6.80774 8.17482 7.2026 8.61291 7.61215 8.90098C7.9876 9.16507 8.453 9.35742 8.82896 9.51279C8.84315 9.51866 8.85721 9.52447 8.87114 9.53023C9.2958 9.70592 9.61093 9.84124 9.82934 10.0001C10.0216 10.14 10.0408 10.2246 10.0408 10.2993C10.0408 10.589 9.95496 10.7041 9.88771 10.7645C9.79772 10.8453 9.62873 10.9241 9.34044 10.9598C8.75321 11.0324 7.99039 10.8896 7.42884 10.7403L6.75445 10.5609L6.39323 11.9005L7.06761 12.0799C7.66109 12.2377 8.64365 12.4435 9.51303 12.336C9.95306 12.2815 10.4402 12.138 10.8242 11.7931C11.231 11.4277 11.4371 10.9136 11.4371 10.2993C11.4371 9.62952 11.0601 9.17643 10.6544 8.8813C10.2852 8.61267 9.81651 8.4189 9.43937 8.26297C9.42885 8.25862 9.4184 8.2543 9.40803 8.25001C8.98398 8.07458 8.65635 7.93607 8.41913 7.76921C8.21793 7.62769 8.1647 7.52425 8.15203 7.43259Z"
+            fill="white"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8.9936 11.3259C9.37918 11.3259 9.69176 11.6363 9.69176 12.0193V13.7528H8.29545V12.0193C8.29545 11.6363 8.60803 11.3259 8.9936 11.3259Z"
+            fill="white"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M9.69176 4.04495V5.77849C9.69176 6.16146 9.37918 6.47191 8.9936 6.47191C8.60803 6.47191 8.29545 6.16146 8.29545 5.77849V4.04495H9.69176Z"
+            fill="white"
+          />
+        </svg>
       </Tooltip>
     );
   }

diff --git a/liquidity/ui/src/components/Pools/PoolCards/TorosPoolCard.tsx b/liquidity/ui/src/components/Pools/PoolCards/TorosPoolCard.tsx
@@ -1,21 +1,40 @@
 import { Flex, Text, Button, Link, Fade, Icon, IconProps } from '@chakra-ui/react';
-import { BASE_ANDROMEDA, NetworkIcon } from '@snx-v3/useBlockchain';
+import { ARBITRUM, BASE_ANDROMEDA, NetworkIcon } from '@snx-v3/useBlockchain';
 import { TokenIcon } from '../../TokenIcon';
-import { useGetWrapperToken } from '@snx-v3/useGetUSDTokens';
-import { getSpotMarketId } from '@snx-v3/isBaseAndromeda';
 import { useTokenBalance } from '@snx-v3/useTokenBalance';
 import { formatNumberToUsd } from '@snx-v3/formatters';
 import { formatNumber } from 'humanize-plus';
 import { Specifics } from './Specifics';
+import { useQuery } from '@tanstack/react-query';
+import { fetchTorosPool } from '@snx-v3/usePoolsList';
 
 interface TorosPoolCardProps {
-  tvl: string;
-  apy: number;
+  token: 'USDC' | 'wstETH';
 }
 
-export function TorosPoolCard({ tvl, apy }: TorosPoolCardProps) {
-  const { data: wrapperToken } = useGetWrapperToken(getSpotMarketId('USDC'), BASE_ANDROMEDA);
-  const { data: balance } = useTokenBalance(wrapperToken, BASE_ANDROMEDA);
+const vaults = {
+  USDC: {
+    pool: '0xc1e02884af4a283ca25ab63c45360d220d69da52',
+    address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
+    network: BASE_ANDROMEDA,
+    link: 'https://toros.finance/synthetix-usdc-andromeda-yield',
+  },
+  wstETH: {
+    pool: '0xe9b5260d99d283ff887859c569baf8ad1bd12aac',
+    address: '0x5979d7b546e38e414f7e9822514be443a4800529',
+    network: ARBITRUM,
+    link: 'https://toros.finance/synthetix-eth-yield',
+  },
+};
+
+export function TorosPoolCard({ token }: TorosPoolCardProps) {
+  const vault = vaults[token];
+
+  const { data: balance } = useTokenBalance(vault.address, vault.network);
+  const { data } = useQuery({
+    queryKey: ['toros-pool', token],
+    queryFn: () => fetchTorosPool(vault.pool),
+  });
 
   return (
     <Fade in>
@@ -32,12 +51,12 @@ export function TorosPoolCard({ tvl, apy }: TorosPoolCardProps) {
       >
         <Flex width="190px" alignItems="center">
           <Flex position="relative">
-            <TokenIcon w={40} h={40} symbol="USDC" />
+            <TokenIcon w={40} h={40} symbol={token} />
             <NetworkIcon
               position="absolute"
               right={0}
               bottom={0}
-              networkId={BASE_ANDROMEDA.id}
+              networkId={vault.network.id}
               size="14px"
             />
           </Flex>
@@ -49,7 +68,7 @@ export function TorosPoolCard({ tvl, apy }: TorosPoolCardProps) {
               lineHeight="1.25rem"
               fontFamily="heading"
             >
-              USDC
+              {token}
             </Text>
             <Text
               textTransform="capitalize"
@@ -58,7 +77,7 @@ export function TorosPoolCard({ tvl, apy }: TorosPoolCardProps) {
               fontFamily="heading"
               lineHeight="1rem"
             >
-              Base Network
+              {vault.network.name} Network
             </Text>
           </Flex>
         </Flex>
@@ -73,7 +92,7 @@ export function TorosPoolCard({ tvl, apy }: TorosPoolCardProps) {
             {balance ? formatNumberToUsd(balance.toNumber()) : '-'}
           </Text>
           <Text color="gray.500" fontFamily="heading" fontSize="12px" lineHeight="16px">
-            {balance ? formatNumber(balance.toNumber()) : ''} USDC
+            {balance ? formatNumber(balance.toNumber()) : ''} {token}
           </Text>
         </Flex>
         <Flex width="189px" flexDir="column" justifyContent="cetner" alignItems="flex-end">
@@ -99,7 +118,7 @@ export function TorosPoolCard({ tvl, apy }: TorosPoolCardProps) {
             color="white"
             textAlign="right"
           >
-            ${tvl}
+            ${data?.tvl}
           </Text>
         </Flex>
         <Flex width="144px" alignItems="center" justifyContent="flex-end">
@@ -110,15 +129,15 @@ export function TorosPoolCard({ tvl, apy }: TorosPoolCardProps) {
             fontWeight={500}
             color="white"
           >
-            {apy}%
+            {data?.apy}%
           </Text>
         </Flex>
         <Flex alignItems="center" justifyContent="flex-end" width="121px" textAlign="right">
           <Specifics isToros />
         </Flex>
         <Flex flex={1} minWidth="159px" alignItems="center" justifyContent="flex-end">
           <Link
-            href="https://toros.finance/synthetix-usdc-andromeda-yield"
+            href={vault.link}
             rel="noopener"
             target="_blank"
             _hover={{ textDecoration: 'none' }}