[Release] - USDS Handling for RBS, Price Consistency Updates

src/components/Sidebar/NavContent.tsx

@@ -1,16 +1,15 @@
-import { Box, Link, Paper, SvgIcon, Typography, useTheme } from "@mui/material";
+import { Box, Link, Paper, SvgIcon, Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { Icon } from "@olympusdao/component-library";
 import React from "react";
-import { NavLink } from "react-router-dom";
 import lendAndBorrowIcon from "src/assets/icons/lendAndBorrow.svg?react";
 import OlympusIcon from "src/assets/icons/olympus-nav-header.svg?react";
 import NavItem from "src/components/library/NavItem";
-import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
+import { formatCurrency } from "src/helpers";
 import { Environment } from "src/helpers/environment/Environment/Environment";
+import { useGohmPriceContract } from "src/hooks/usePrices";
 import { useTestableNetworks } from "src/hooks/useTestableNetworks";
-import { BondDiscount } from "src/views/Bond/components/BondDiscount";
-import { DetermineRangeDiscount } from "src/views/Range/hooks";
+import { usePriceContractPrice } from "src/views/Range/hooks";
 import { useNetwork } from "wagmi";
 
 const PREFIX = "NavContent";
@@ -26,9 +25,10 @@ const StyledBox = styled(Box)(({ theme }) => ({
 }));
 
 const NavContent: React.VFC = () => {
-  const theme = useTheme();
   const { chain = { id: 1 } } = useNetwork();
   const networks = useTestableNetworks();
+  const { data: ohmPrice } = usePriceContractPrice();
+  const { data: gohmPrice } = useGohmPriceContract();
 
   const protocolMetricsEnabled = Boolean(Environment.getWundergraphNodeUrl());
   const emissionsManagerEnabled = Environment.getEmissionsManagerEnabled();
@@ -49,6 +49,14 @@ const NavContent: React.VFC = () => {
                 Olympus
               </Typography>
             </Link>
+            <Box display="flex" flexDirection="column" mt="10px">
+              <Box fontSize="12px" fontWeight="500" lineHeight={"15px"}>
+                OHM Price: {formatCurrency(ohmPrice || 0, 2)}
+              </Box>
+              <Box fontSize="12px" fontWeight="500" lineHeight="15px">
+                gOHM Price: {formatCurrency(gohmPrice || 0, 2)}
+              </Box>
+            </Box>
           </Box>
 
           <div className="dapp-menu-links">
@@ -98,29 +106,4 @@ const NavContent: React.VFC = () => {
   );
 };
 
-const RangePrice = (props: { bidOrAsk: "bid" | "ask" }) => {
-  const { data, isFetched } = DetermineRangeDiscount(props.bidOrAsk);
-  return (
-    <>
-      {isFetched && (
-        <Box ml="26px" mt="12px" mb="12px" mr="18px">
-          <Typography variant="body2" color="textSecondary">
-            {props.bidOrAsk === "bid" ? `Bid` : `Ask`}
-          </Typography>
-          <Box mt="12px">
-            <Box mt="8px">
-              <Link component={NavLink} to={`/range`}>
-                <Box display="flex" flexDirection="row" justifyContent="space-between">
-                  <Typography variant="body1">{data.quoteToken}</Typography>
-                  <BondDiscount discount={new DecimalBigNumber(data.discount.toString())} />
-                </Box>
-              </Link>
-            </Box>
-          </Box>
-        </Box>
-      )}
-    </>
-  );
-};
-
 export default NavContent;

src/constants/addresses.ts

@@ -52,6 +52,11 @@ export const DAI_ADDRESSES = {
   [NetworkId.MAINNET]: "0x6b175474e89094c44da98b954eedeac495271d0f",
 };
 
+export const USDS_ADDRESSES = {
+  [NetworkId.MAINNET]: "0xdC035D45d973E3EC169d2276DDab16f1e407384F",
+  [NetworkId.TESTNET_GOERLI]: "",
+};
+
 export const WETH_ADDRESSES = {
   [NetworkId.MAINNET]: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2",
 };
@@ -142,7 +147,7 @@ export const BALANCER_VAULT_ADDRESSSES = {
 };
 
 export const RANGE_OPERATOR_ADDRESSES = {
-  [NetworkId.MAINNET]: "0x0AE561226896dA978EaDA0Bec4a7d3CfAE04f506",
+  [NetworkId.MAINNET]: "0x6417F206a0a6628Da136C0Faa39026d0134D2b52",
   [NetworkId.TESTNET_GOERLI]: "0x6620592f9bdffAbadcea644a35946E7b93EaaF56",
 };
 

src/helpers/pricing/useGetDefillamaPrice.ts

@@ -19,6 +19,8 @@ export const useGetDefillamaPrice = ({ addresses }: { addresses: string[] }) =>
         const response = await axios.get<DefillamaPriceResponse>(
           `https://coins.llama.fi/prices/current/${joinedAddresses}`,
         );
+
+        console.log("coins", response.data.coins);
         return response.data.coins;
       } catch (error) {
         return {};

src/hooks/usePrices.ts

@@ -5,6 +5,7 @@ import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber"
 import { queryAssertion } from "src/helpers/react-query/queryAssertion";
 import { nonNullable } from "src/helpers/types/nonNullable";
 import { useCurrentIndex } from "src/hooks/useCurrentIndex";
+import { usePriceContractPrice } from "src/views/Range/hooks";
 
 export const ohmPriceQueryKey = () => ["useOhmPrice"];
 
@@ -40,3 +41,22 @@ export const useGohmPrice = () => {
     { enabled: !!ohmPrice && !!currentIndex },
   );
 };
+
+/**
+ * Returns the calculated price of gOHM.
+ */
+export const useGohmPriceContract = () => {
+  const { data: ohmPrice } = usePriceContractPrice();
+  const { data: currentIndex } = useCurrentIndex();
+
+  const key = gohmPriceQueryKey(ohmPrice, currentIndex);
+  return useQuery<number, Error>(
+    [key],
+    async () => {
+      queryAssertion(ohmPrice && currentIndex, key);
+
+      return currentIndex.toApproxNumber() * ohmPrice;
+    },
+    { enabled: !!ohmPrice && !!currentIndex },
+  );
+};

src/hooks/useProtocolMetrics.ts

@@ -10,44 +10,6 @@ export const useTotalValueDeposited = ({ ignoreCache }: { ignoreCache?: boolean
   return data.sOhmTotalValueLocked;
 };
 
-/**
- * Returns the latest OHM price (in USD).
- *
- * This data is fetched from the subgraph, and will not reflect market rates.
- * Do NOT use this if you need real-time data. Instead, use `useOhmPrice` from
- * `src/hooks/usePrices.ts`.
- *
- * @returns
- */
-export const useOhmPrice = ({ ignoreCache }: { ignoreCache?: boolean }): number | undefined => {
-  const { data } = useMetricsLatestQuery({ ignoreCache });
-
-  if (!data) {
-    return undefined;
-  }
-
-  return data.ohmPrice;
-};
-
-/**
- * Returns the latest gOHM price (in USD).
- *
- * This data is fetched from the subgraph, and will not reflect market rates.
- * Do NOT use this if you need real-time data. Instead, use `useGohmPrice` from
- * `src/hooks/usePrices.ts`.
- *
- * @returns
- */
-export const useGOhmPrice = ({ ignoreCache }: { ignoreCache?: boolean }): number | undefined => {
-  const { data } = useMetricsLatestQuery({ ignoreCache });
-
-  if (!data) {
-    return undefined;
-  }
-
-  return data.gOhmPrice;
-};
-
 /**
  * Determines the current index.
  *

src/views/MyBalances/MyCoolerLoans.tsx

@@ -4,19 +4,15 @@ import { ethers } from "ethers";
 import { Link as RouterLink } from "react-router-dom";
 import lendAndBorrowIcon from "src/assets/icons/lendAndBorrow.svg?react";
 import { formatCurrency } from "src/helpers";
-import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
-import { useCurrentIndex } from "src/hooks/useCurrentIndex";
-import { useOhmPrice } from "src/hooks/usePrices";
+import { useGohmPriceContract } from "src/hooks/usePrices";
 import { useGetClearingHouse } from "src/views/Lending/Cooler/hooks/useGetClearingHouse";
 import { useGetCoolerLoans } from "src/views/Lending/Cooler/hooks/useGetCoolerLoans";
 import { useAccount } from "wagmi";
 
 export const MyCoolerLoans = ({ balance, balanceUSD }: { balance: string; balanceUSD: string }) => {
   const theme = useTheme();
   const { address } = useAccount();
-  const { data: ohmPrice = 0 } = useOhmPrice();
-  const { data: currentIndex = new DecimalBigNumber("0", 9) } = useCurrentIndex();
-  const gOhmPrice = ohmPrice * currentIndex.toApproxNumber();
+  const { data: gOhmPrice = 0 } = useGohmPriceContract();
 
   const { data: clearingHouseV1 } = useGetClearingHouse({ clearingHouse: "clearingHouseV1" });
   const { data: clearingHouseV2 } = useGetClearingHouse({ clearingHouse: "clearingHouseV2" });

src/views/MyBalances/MyGohmBalances.tsx

@@ -5,16 +5,13 @@ import WalletIcon from "src/assets/icons/wallet.svg?react";
 import { formatCurrency } from "src/helpers";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
 import { useGohmBalance } from "src/hooks/useBalance";
-import { useCurrentIndex } from "src/hooks/useCurrentIndex";
-import { useOhmPrice } from "src/hooks/usePrices";
+import { useGohmPriceContract } from "src/hooks/usePrices";
 import { useTestableNetworks } from "src/hooks/useTestableNetworks";
 import { NetworkId } from "src/networkDetails";
 
 export const MyGohmBalances = ({ walletBalance }: { walletBalance?: DecimalBigNumber }) => {
   const gohmBalances = useGohmBalance();
-  const { data: currentIndex = new DecimalBigNumber("0", 9) } = useCurrentIndex();
-  const { data: ohmPrice = 0 } = useOhmPrice();
-  const gOhmPrice = ohmPrice * currentIndex.toApproxNumber();
+  const { data: gOhmPrice = 0 } = useGohmPriceContract();
 
   const networks = useTestableNetworks();
 

src/views/MyBalances/index.tsx

@@ -1,6 +1,6 @@
-import { Box, Grid, Skeleton, Typography, useMediaQuery } from "@mui/material";
+import { Box, Grid, Typography, useMediaQuery } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
-import { Metric, Token } from "@olympusdao/component-library";
+import { Token } from "@olympusdao/component-library";
 import { FC } from "react";
 import { InPageConnectButton } from "src/components/ConnectButton/ConnectButton";
 import { DevFaucet } from "src/components/DevFaucet";
@@ -18,7 +18,6 @@ import {
   useWsohmBalance,
 } from "src/hooks/useBalance";
 import { useCurrentIndex } from "src/hooks/useCurrentIndex";
-import { useOhmPrice } from "src/hooks/useProtocolMetrics";
 import { useTestableNetworks } from "src/hooks/useTestableNetworks";
 import { NetworkId } from "src/networkDetails";
 import { useGetClearingHouse } from "src/views/Lending/Cooler/hooks/useGetClearingHouse";
@@ -29,6 +28,7 @@ import { LearnAboutOhm } from "src/views/MyBalances/LearnAboutOhm";
 import { MyCoolerLoans } from "src/views/MyBalances/MyCoolerLoans";
 import { MyGohmBalances } from "src/views/MyBalances/MyGohmBalances";
 import { MyOhmBalances } from "src/views/MyBalances/MyOhmBalances";
+import { usePriceContractPrice } from "src/views/Range/hooks";
 import { useAccount, useNetwork } from "wagmi";
 
 /**
@@ -42,7 +42,7 @@ export const MyBalances: FC<OHMAssetsProps> = () => {
   const { address } = useAccount();
   const networks = useTestableNetworks();
   const { chain = { id: 1 } } = useNetwork();
-  const ohmPrice = useOhmPrice({}) || 0;
+  const { data: ohmPrice = 0 } = usePriceContractPrice();
   const { data: currentIndex = new DecimalBigNumber("0", 9) } = useCurrentIndex();
   const { data: v1OhmBalance = new DecimalBigNumber("0", 9) } = useV1OhmBalance()[networks.MAINNET];
   const { data: v1SohmBalance = new DecimalBigNumber("0", 9) } = useV1SohmBalance()[networks.MAINNET];
@@ -177,9 +177,6 @@ export const MyBalances: FC<OHMAssetsProps> = () => {
                       </Box>
                     </Box>
                   </Grid>
-                  <Grid item xs={6} sm={4}>
-                    <Metric label="OHM Price" metric={ohmPrice ? formatCurrency(ohmPrice, 2) : <Skeleton />} />
-                  </Grid>
                 </Grid>
                 <Box display="flex" flexDirection="row" justifyContent="space-between"></Box>
                 <Box display="flex" flexWrap="wrap" justifyContent="space-between" mt="50px" gap="20px">

src/views/Range/RangeConfirmationModal.tsx

@@ -84,7 +84,9 @@ const RangeConfirmationModal = (props: {
         <Box display="flex" flexDirection="row" justifyContent="space-between" alignItems="center" mb={"9px"}>
           <Typography sx={{ fontSize: "15px", lineHeight: "21px" }}>Price of OHM</Typography>
           <Box display="flex" flexDirection="column" textAlign="right">
-            <Typography sx={{ fontSize: "15px", lineHeight: "21px" }}>{props.swapPrice} DAI</Typography>
+            <Typography sx={{ fontSize: "15px", lineHeight: "21px" }}>
+              {props.swapPrice} {props.reserveSymbol}
+            </Typography>
           </Box>
         </Box>
         <Box display="flex" flexDirection="row" justifyContent="space-between" alignItems="center" mb={"9px"}>

src/views/Range/RangeInputForm.tsx

@@ -1,9 +1,9 @@
-import { Box } from "@mui/material";
+import { Box, SvgIcon } from "@mui/material";
 import { SwapCollection } from "@olympusdao/component-library";
 import { OHMTokenProps, SwapCard } from "@olympusdao/component-library";
 import React from "react";
+import usdsIcon from "src/assets/tokens/usds.svg?react";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
-
 /**
  * Component for Displaying RangeInputForm
  */
@@ -36,22 +36,33 @@ const RangeInputForm = (props: {
   const trimmedOhmBalance = ohmBalance.toString({ decimals: 2 });
   const trimmedReserveBalance = reserveBalance.toString({ decimals: 2 });
 
-  const ReserveInput = () => (
-    <SwapCard
-      key="reserveAmount"
-      id="reserve-amount"
-      inputProps={{ "data-testid": "reserve-amount" }}
-      name="reserveAmount"
-      value={reserveAmount}
-      onChange={event => onChangeReserveAmount(event.currentTarget.value)}
-      endString={`Max`}
-      endStringOnClick={() => hasPrice && onChangeReserveAmount(reserveBalance.toString())}
-      token={reserveSymbol}
-      type="string"
-      info={`Balance: ${trimmedReserveBalance} ${reserveSymbol}`}
-      disabled={!hasPrice}
-    />
-  );
+  const ReserveInput = () => {
+    const token =
+      reserveSymbol === ("USDS" as OHMTokenProps["name"]) ? (
+        <Box display="flex" gap="9px" alignItems="center">
+          <SvgIcon color="primary" sx={{ width: "20px", height: "20px" }} viewBox="0 0 50 50" component={usdsIcon} />
+          USDS
+        </Box>
+      ) : (
+        reserveSymbol
+      );
+    return (
+      <SwapCard
+        key="reserveAmount"
+        id="reserve-amount"
+        inputProps={{ "data-testid": "reserve-amount" }}
+        name="reserveAmount"
+        value={reserveAmount}
+        onChange={event => onChangeReserveAmount(event.currentTarget.value)}
+        endString={`Max`}
+        endStringOnClick={() => hasPrice && onChangeReserveAmount(reserveBalance.toString())}
+        token={token}
+        type="string"
+        info={`Balance: ${trimmedReserveBalance} ${reserveSymbol}`}
+        disabled={!hasPrice}
+      />
+    );
+  };
 
   const OhmInput = () => (
     <SwapCard