fix: stable coin reference (#312)

* fix: stable coin reference * update import * address feedback * show stablecoin symbol on positions list * hide mainnet * deps --------- Co-authored-by: jmzwar <james@jmzwar.com>
Synthetixio · Jun 19, 2024 · e010269 · e010269
1 parent 1273837
commit e010269
Show file tree

Hide file tree

Showing 14 changed files with 108 additions and 20 deletions.
diff --git a/liquidity/lib/usePoolsList/usePoolsList.ts b/liquidity/lib/usePoolsList/usePoolsList.ts
@@ -40,7 +40,8 @@ export function usePool(networkId: number, poolId: string) {
   };
 }
 
-const supportedNetworks = [1, 8453, 42161];
+// TODO: Add 1 and 10 to support Mainnet and Optimism
+const supportedNetworks = [8453, 42161];
 
 async function fetchTorosPool() {
   return fetch('https://api-v2.dhedge.org/graphql', {

diff --git a/liquidity/lib/useStablecoin/index.ts b/liquidity/lib/useStablecoin/index.ts
@@ -0,0 +1 @@
+export * from './useStablecoin';
diff --git a/liquidity/lib/useStablecoin/package.json b/liquidity/lib/useStablecoin/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@snx-v3/useStablecoin",
+  "private": true,
+  "main": "index.ts",
+  "version": "0.0.1",
+  "dependencies": {
+    "@snx-v3/useBlockchain": "workspace:*",
+    "@snx-v3/useGetUSDTokens": "workspace:*",
+    "@snx-v3/useTokenInfo": "workspace:*",
+    "@tanstack/react-query": "^5.8.3"
+  }
+}
diff --git a/liquidity/lib/useStablecoin/useStablecoin.ts b/liquidity/lib/useStablecoin/useStablecoin.ts
@@ -0,0 +1,29 @@
+import { useQuery } from '@tanstack/react-query';
+import { useNetwork } from '@snx-v3/useBlockchain';
+import { useGetUSDTokens } from '@snx-v3/useGetUSDTokens';
+import { useTokenInfo } from '@snx-v3/useTokenInfo';
+
+export function useStablecoin() {
+  const { network } = useNetwork();
+
+  const { data: USDTokens } = useGetUSDTokens();
+  const { data: stablecoinInfo } = useTokenInfo(USDTokens?.snxUSD);
+
+  return useQuery({
+    queryKey: [`${network?.id}-${network?.preset}`, 'stablecoin', USDTokens?.snxUSD],
+    queryFn: async function () {
+      if (!stablecoinInfo) {
+        throw new Error('useStablecoin requires more information');
+      }
+
+      const { name, symbol } = stablecoinInfo;
+
+      return {
+        symbol,
+        name,
+        address: USDTokens?.snxUSD,
+      };
+    },
+    enabled: Boolean(USDTokens?.snxUSD && stablecoinInfo),
+  });
+}
diff --git a/liquidity/lib/withERC7412/withERC7412.ts b/liquidity/lib/withERC7412/withERC7412.ts
@@ -181,7 +181,6 @@ const parseError = async (error: any, provider: providers.JsonRpcProvider, netwo
     const AllErrors = await importAllErrors(network.id, network.preset);
     const AllErrorsInterface = new ethers.utils.Interface([...AllErrors.abi, ...PYTH_ERRORS]);
     const decodedError = AllErrorsInterface.parseError(errorData);
-    console.log(`decodedError`, decodedError);
     return decodedError;
     // return ERC7412ErrorSchema.parse(decodedError);
   } catch (parseError) {

diff --git a/liquidity/ui/package.json b/liquidity/ui/package.json
@@ -59,6 +59,7 @@
     "@snx-v3/usePoolData": "workspace:*",
     "@snx-v3/usePoolsList": "workspace:*",
     "@snx-v3/useRewards": "workspace:^",
+    "@snx-v3/useStablecoin": "workspace:*",
     "@snx-v3/useTokenBalance": "workspace:*",
     "@snx-v3/useTransferAccountId": "workspace:*",
     "@snx-v3/useTransferableSynthetix": "workspace:*",

diff --git a/liquidity/ui/src/components/Borrow/Borrow.tsx b/liquidity/ui/src/components/Borrow/Borrow.tsx
@@ -13,29 +13,32 @@ import Wei from '@synthetixio/wei';
 import { useNetwork } from '@snx-v3/useBlockchain';
 import { isBaseAndromeda } from '@snx-v3/isBaseAndromeda';
 import { SUSDCIcon } from '@snx-v3/icons/SUSDCIcon';
+import { useStablecoin } from '@snx-v3/useStablecoin';
 
 const BorrowUi: FC<{
   debtChange: Wei;
   maxDebt: Wei;
   setDebtChange: (val: Wei) => void;
 }> = ({ debtChange, setDebtChange, maxDebt }) => {
   const { network } = useNetwork();
+  const { data: stablecoin } = useStablecoin();
+
   const isBase = isBaseAndromeda(network?.id, network?.preset);
   return (
     <Flex flexDirection="column">
       <Text fontSize="md" fontWeight="700" mb="0.5">
-        {isBase ? 'Claim USDC' : 'Borrow snxUSD'}
+        {isBase ? 'Claim USDC' : `Borrow ${stablecoin?.symbol}`}
       </Text>
       <Text fontSize="sm" color="gray.400" mb="4">
         {isBase
           ? 'Claim USDC fees you have earned from providing liquidity. These will be available in 24h for withdrawal.'
-          : `Take an interest-free loan of snxUSD against your collateral. This
+          : `Take an interest-free loan of ${stablecoin?.symbol} against your collateral. This
               increases your debt and decreases your C-Ratio.`}
       </Text>
       <BorderBox display="flex" py={2} px={3} mb="4">
         <Text display="flex" gap={2} alignItems="center" fontWeight="600" mx="2">
           {isBase ? <SUSDCIcon /> : <DollarCircle />}
-          {isBase ? 'USDC' : 'snxUSD'}
+          {isBase ? 'USDC' : stablecoin?.symbol}
         </Text>
         <Flex flexDirection="column" justifyContent="flex-end" flexGrow={1}>
           <NumberInput
@@ -60,13 +63,13 @@ const BorrowUi: FC<{
               }}
             >
               <Text>Max:</Text>
-              <Amount value={maxDebt} /> {isBase ? 'USDC' : 'snxUSD'}
+              <Amount value={maxDebt} /> {isBase ? 'USDC' : stablecoin?.symbol}
             </Flex>
           </Flex>
         </Flex>
       </BorderBox>
       <Button data-testid="borrow submit" type="submit">
-        {isBase ? 'Claim USDC' : 'Borrow snxUSD'}
+        {isBase ? 'Claim USDC' : `Borrow ${stablecoin?.symbol}`}
       </Button>
     </Flex>
   );

diff --git a/liquidity/ui/src/components/Manage/ManageActions.tsx b/liquidity/ui/src/components/Manage/ManageActions.tsx
@@ -29,6 +29,7 @@ import { safeImport } from '@synthetixio/safe-import';
 import { calculateCRatio } from '@snx-v3/calculations';
 import { Network, useNetwork } from '@snx-v3/useBlockchain';
 import { isBaseAndromeda } from '@snx-v3/isBaseAndromeda';
+import { useStablecoin } from '@snx-v3/useStablecoin';
 
 const RepayModal = lazy(() => safeImport(() => import('@snx-v3/RepayModal')));
 const BorrowModal = lazy(() => safeImport(() => import('@snx-v3/BorrowModal')));
@@ -83,6 +84,7 @@ const ManageActionUi: FC<{
 }> = ({ setActiveAction, manageAction, onSubmit, liquidityPosition, network }) => {
   const debt = Number(liquidityPosition?.debt?.toString());
   const isBase = isBaseAndromeda(network?.id, network?.preset);
+  const { data: stablecoin } = useStablecoin();
 
   return (
     <Box as="form" onSubmit={onSubmit}>
@@ -96,7 +98,7 @@ const ManageActionUi: FC<{
           action="repay"
           activeAction={manageAction}
         >
-          <DollarCircle mr={1} /> Repay {isBase ? '' : 'snxUSD'}
+          <DollarCircle mr={1} /> Repay {isBase ? '' : stablecoin?.symbol}
         </ActionButton>
       </Flex>
       <Flex mt={2} gap={2}>
@@ -109,7 +111,7 @@ const ManageActionUi: FC<{
           action="borrow"
           activeAction={manageAction}
         >
-          <BorrowIcon mr={1} /> {isBase ? 'Claim' : 'Borrow snxUSD'}
+          <BorrowIcon mr={1} /> {isBase ? 'Claim' : `Borrow ${stablecoin?.symbol}`}
         </ActionButton>
       </Flex>
       <Flex direction="column" mt={6}>

diff --git a/liquidity/ui/src/components/Positions/PositionsList.tsx b/liquidity/ui/src/components/Positions/PositionsList.tsx
@@ -6,26 +6,35 @@ import { useParams } from '@snx-v3/useParams';
 import { useApr } from '@snx-v3/useApr';
 import { isBaseAndromeda } from '@snx-v3/isBaseAndromeda';
 import { useNetwork } from '@snx-v3/useBlockchain';
+import { useStablecoin } from '@snx-v3/useStablecoin';
 
 export const PositionsList = () => {
   const { accountId } = useParams();
   const { network } = useNetwork();
 
-  const { data: positionsByKey, isLoading } = useLiquidityPositions({
+  const { data: positionsByKey, isLoading: isLiquidityPositionsLoading } = useLiquidityPositions({
     accountId,
   });
   const { data: apr } = useApr();
+  const { data: stablecoinInfo, isLoading: isStablecoinLoading } = useStablecoin();
 
   const isBase = isBaseAndromeda(network?.id, network?.preset);
   const positions = calculatePositions(positionsByKey, isBase);
   const parsedPositions = positions.filter((position) => position.collateralAmount.gt(0));
 
+  const isLoading = isLiquidityPositionsLoading || isStablecoinLoading;
+
   return (
     <Flex flexDir="column">
       <Heading fontSize="1.25rem" fontFamily="heading" lineHeight="1.75rem" mt={4}>
         Positions
       </Heading>
-      <PositionsTable isLoading={isLoading} positions={parsedPositions} apr={apr?.combinedApr} />
+      <PositionsTable
+        isLoading={isLoading}
+        positions={parsedPositions}
+        apr={apr?.combinedApr}
+        stablecoinInfo={stablecoinInfo}
+      />
     </Flex>
   );
 };
diff --git a/liquidity/ui/src/components/Positions/PositionsTable/PositionsRow.tsx b/liquidity/ui/src/components/Positions/PositionsTable/PositionsRow.tsx
@@ -10,6 +10,7 @@ interface PositionRow extends LiquidityPositionType {
   final: boolean;
   isBase: boolean;
   apr?: number;
+  stablecoinSymbol?: string;
 }
 [];
 
@@ -22,21 +23,25 @@ export function PositionRow({
   cRatio,
   isBase,
   apr,
+  stablecoinSymbol,
 }: PositionRow) {
   const [queryParams] = useSearchParams();
   const navigate = useNavigate();
+
   const { data: liquidityPosition } = useLiquidityPosition({
     tokenAddress: collateralType.tokenAddress,
     accountId,
     poolId,
   });
+
   const { data: borrow } = useGetBorrow({
     accountId,
     poolId,
     collateralTypeAddress: collateralType.tokenAddress,
   });
 
   const parsedCRatio = collateralType.issuanceRatioD18.gt(cRatio) ? 'MANAGE' : 'HEALTHY';
+
   return (
     <Tr borderBottomWidth={final ? 'none' : '1px'}>
       <Td border="none">
@@ -103,7 +108,7 @@ export function PositionRow({
                   {parseFloat(
                     utils.formatEther(borrow?.position?.net_issuance.toString() || '0')
                   ).toFixed(2)}{' '}
-                  snxUSD
+                  {stablecoinSymbol}
                 </Text>
               </Flex>
             </Fade>

diff --git a/liquidity/ui/src/components/Positions/PositionsTable/PositionsTable.tsx b/liquidity/ui/src/components/Positions/PositionsTable/PositionsTable.tsx
@@ -16,9 +16,19 @@ interface PositionsTableInterface {
   isLoading: boolean;
   positions?: LiquidityPositionType[];
   apr?: number;
+  stablecoinInfo?: {
+    symbol?: string;
+    name?: string;
+    address?: string;
+  };
 }
 
-export const PositionsTable = ({ isLoading, positions, apr }: PositionsTableInterface) => {
+export const PositionsTable = ({
+  isLoading,
+  positions,
+  apr,
+  stablecoinInfo,
+}: PositionsTableInterface) => {
   const { activeWallet } = useWallet();
   const { network } = useNetwork();
   const isBase = isBaseAndromeda(network?.id, network?.preset);
@@ -79,6 +89,7 @@ export const PositionsTable = ({ isLoading, positions, apr }: PositionsTableInte
                       final={index === positions.length - 1}
                       isBase={isBase}
                       apr={apr}
+                      stablecoinSymbol={stablecoinInfo?.symbol}
                     />
                   ))}
                 </>

diff --git a/liquidity/ui/src/components/Repay/Repay.tsx b/liquidity/ui/src/components/Repay/Repay.tsx
@@ -13,6 +13,7 @@ import { isBaseAndromeda } from '@snx-v3/isBaseAndromeda';
 import { useNetwork } from '@snx-v3/useBlockchain';
 import { RepayAllDebt } from './';
 import { Tooltip } from '@snx-v3/Tooltip';
+import { useStablecoin } from '@snx-v3/useStablecoin';
 
 export const RepayUi: FC<{
   debtChange: Wei;
@@ -26,20 +27,21 @@ export const RepayUi: FC<{
     snxUSDBalance && availableUSDCollateral ? snxUSDBalance.add(availableUSDCollateral) : undefined;
   const { network } = useNetwork();
   const isBase = isBaseAndromeda(network?.id, network?.preset);
+  const { data: stablecoin } = useStablecoin();
 
   return (
     <Flex flexDirection="column">
       <Text fontSize="md" fontWeight="700" mb="0.5">
-        Repay {isBase ? 'USDC' : 'snxUSD'}
+        Repay {isBase ? 'USDC' : stablecoin?.symbol}
       </Text>
       <Text fontSize="sm" color="gray.400" mb="4">
-        Pay down your position’s debt with {isBase ? 'USDC' : 'snxUSD'}. This decreases your debt
-        and increases your C-Ratio.
+        Pay down your position’s debt with {isBase ? 'USDC' : stablecoin?.symbol}. This decreases
+        your debt and increases your C-Ratio.
       </Text>
       <BorderBox display="flex" py={2} px={3} mb="4">
         <Text display="flex" gap={2} alignItems="center" fontWeight="600" mx="2">
           <DollarCircle />
-          {isBase ? 'USDC' : 'snxUSD'}
+          {isBase ? 'USDC' : stablecoin?.symbol}
         </Text>
         <Flex flexDirection="column" justifyContent="flex-end" flexGrow={1}>
           {/* TODO Figure out why repay is causing issues */}
@@ -97,8 +99,8 @@ export const RepayUi: FC<{
                   <Text display="inline">
                     <Amount
                       value={totalUsdBalance}
-                      data-testid="available snxUSD balance"
-                      suffix=" sUSD"
+                      data-testid={`available ${stablecoin?.symbol} balance`}
+                      suffix={` ${stablecoin?.symbol}`}
                     />
                   </Text>
                 </Flex>
@@ -112,7 +114,7 @@ export const RepayUi: FC<{
         type="submit"
         isDisabled={!(max && snxUSDBalance && currentDebt && availableUSDCollateral)}
       >
-        Repay {isBase ? 'USDC' : 'snxUSD'}
+        Repay {isBase ? 'USDC' : stablecoin?.symbol}
       </Button>
     </Flex>
   );

diff --git a/liquidity/ui/src/pages/Pool.tsx b/liquidity/ui/src/pages/Pool.tsx
@@ -18,6 +18,7 @@ export const Pool = () => {
     ?.map((info) => info.pool.registered_distributors)
     .flat()
     ?.filter((item, pos, self) => self.findIndex((d) => d.id === item.id) === pos);
+
   const collateralTypes = poolInfo?.map((info) => info.collateral_type);
 
   const network = NETWORKS.find((n) => n.id === Number(networkId));

diff --git a/yarn.lock b/yarn.lock
@@ -5806,6 +5806,7 @@ __metadata:
     "@snx-v3/usePoolData": "workspace:*"
     "@snx-v3/usePoolsList": "workspace:*"
     "@snx-v3/useRewards": "workspace:^"
+    "@snx-v3/useStablecoin": "workspace:*"
     "@snx-v3/useTokenBalance": "workspace:*"
     "@snx-v3/useTransferAccountId": "workspace:*"
     "@snx-v3/useTransferableSynthetix": "workspace:*"
@@ -6653,6 +6654,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@snx-v3/useStablecoin@workspace:*, @snx-v3/useStablecoin@workspace:liquidity/lib/useStablecoin":
+  version: 0.0.0-use.local
+  resolution: "@snx-v3/useStablecoin@workspace:liquidity/lib/useStablecoin"
+  dependencies:
+    "@snx-v3/useBlockchain": "workspace:*"
+    "@snx-v3/useGetUSDTokens": "workspace:*"
+    "@snx-v3/useTokenInfo": "workspace:*"
+    "@tanstack/react-query": "npm:^5.8.3"
+  languageName: unknown
+  linkType: soft
+
 "@snx-v3/useTeleport@workspace:liquidity/lib/useTeleport":
   version: 0.0.0-use.local
   resolution: "@snx-v3/useTeleport@workspace:liquidity/lib/useTeleport"