fix: add useFiatPrice to query fiat price (#1491)

* fix: add useFiatPrice to query fiat price * add guard for useFiatPrice * remove useless code
opensquare-network · Dec 31, 2024 · 83a7397 · 83a7397
1 parent 28f277c
commit 83a7397
Show file tree

Hide file tree

Showing 11 changed files with 59 additions and 40 deletions.
diff --git a/site/src/context/PolkadotTreasury.jsx b/site/src/context/PolkadotTreasury.jsx
@@ -1,5 +1,3 @@
-import { useSelector } from "react-redux";
-import { overviewSelector } from "../store/reducers/overviewSlice";
 import useQueryRelayChainFree from "../hooks/treasury/useQueryRelayChainFree";
 import { useAssetHubDot } from "../hooks/assetHub/useAssetHubDot";
 import { useAssetHubAsset } from "../hooks/assetHub/useAssetHubAsset";
@@ -24,7 +22,7 @@ import {
 } from "../hooks/treasury/useLoansBalances";
 import useAssetHubForeignAssets from "../hooks/assetHub/useAssetHubForeignAssets";
 import { MYTH, MYTH_TOKEN_ACCOUNT } from "../constants/foreignAssets";
-import useFiatPrice from "../hooks/useFiatPrice";
+import useFiatPrice, { useFiatPriceBySymbol } from "../hooks/useFiatPrice";
 import BigNumber from "bignumber.js";
 import { polkadot } from "../utils/chains/polkadot";
 import { toPrecision } from "../utils";
@@ -41,8 +39,7 @@ export function usePolkadotTreasuryData() {
 }
 
 export default function PolkadotTreasuryProvider({ children }) {
-  const overview = useSelector(overviewSelector);
-  const dotPrice = overview?.latestSymbolPrice ?? 0;
+  const { price: dotPrice } = useFiatPrice();
 
   const { balance: relayChainFreeBalance, isLoading: isRelayChainFreeLoading } =
     useQueryRelayChainFree();
@@ -104,7 +101,7 @@ export default function PolkadotTreasuryProvider({ children }) {
 
   const { balance: mythTokenBalance, isLoading: isMythTokenLoading } =
     useAssetHubForeignAssets(MYTH_TOKEN_ACCOUNT);
-  const { price: mythTokenPrice } = useFiatPrice("MYTH");
+  const { price: mythTokenPrice } = useFiatPriceBySymbol("MYTH");
 
   const totalDotValue = BigNumber.sum(
     relayChainFreeBalance || 0,

diff --git a/site/src/hooks/useFiatPrice.js b/site/src/hooks/useFiatPrice.js
@@ -2,6 +2,17 @@ import { gql } from "@apollo/client";
 import useDoTreasuryEcoLazyQuery from "./useDoTreasuryEcoLazyQuery";
 import { find } from "lodash-es";
 import { useEffect } from "react";
+import { chainSelector } from "../store/reducers/chainSlice";
+import { useSelector } from "react-redux";
+
+const GET_TREASURIES = gql`
+  query GetTreasuries {
+    treasuries {
+      chain
+      price
+    }
+  }
+`;
 
 const GET_PRICE = gql`
   query GetPrice($symbol: String!) {
@@ -12,7 +23,33 @@ const GET_PRICE = gql`
   }
 `;
 
-export default function useFiatPrice(symbol) {
+export default function useFiatPrice() {
+  const chain = useSelector(chainSelector);
+
+  const [getTreasuries, { data, loading }] =
+    useDoTreasuryEcoLazyQuery(GET_TREASURIES);
+
+  useEffect(() => {
+    getTreasuries();
+
+    const intervalId = setInterval(() => {
+      getTreasuries();
+    }, 60000);
+
+    return () => clearInterval(intervalId);
+  }, [getTreasuries]);
+
+  const treasury = find(data?.treasuries, {
+    chain,
+  });
+
+  return {
+    price: treasury?.price || 0,
+    loading,
+  };
+}
+
+export function useFiatPriceBySymbol(symbol) {
   const [getPrice, { data, loading }] = useDoTreasuryEcoLazyQuery(GET_PRICE);
 
   useEffect(() => {

diff --git a/site/src/pages/Overview/AssetHub.jsx b/site/src/pages/Overview/AssetHub.jsx
@@ -16,8 +16,6 @@ import { mrgap } from "../../styles";
 import Text from "../../components/Text";
 import TextMinor from "../../components/TextMinor";
 import { abbreviateBigNumber, toPrecision } from "../../utils";
-import { overviewSelector } from "../../store/reducers/overviewSlice";
-import { useSelector } from "react-redux";
 import { useAssetHubAsset } from "../../hooks/assetHub/useAssetHubAsset";
 import {
   ASSET_HUB_ACCOUNT_LINK,
@@ -34,6 +32,7 @@ import { Fragment } from "react";
 import BigNumber from "bignumber.js";
 import SkeletonBar from "../../components/skeleton/bar";
 import { useMemo } from "react";
+import useFiatPrice from "../../hooks/useFiatPrice";
 
 const Wrapper = styled(Card)`
   margin-bottom: 16px;
@@ -124,13 +123,11 @@ function SummarySkeletonContent({ loading, children }) {
 }
 
 export default function AssetHub() {
-  const overview = useSelector(overviewSelector);
   const [dotValue, dotLoading] = useAssetHubDot();
   const [usdtValue, usdtLoading] = useAssetHubAsset(ASSET_HUB_USDT_ASSET_ID);
   const [usdcValue, usdcLoading] = useAssetHubAsset(ASSET_HUB_USDC_ASSET_ID);
   const { decimals, symbol } = currentChainSettings;
-
-  const symbolPrice = overview?.latestSymbolPrice ?? 0;
+  const { price: symbolPrice } = useFiatPrice();
 
   const dotPriceValue = toPrecision(dotValue, decimals) * symbolPrice;
   const usdtPriceValue = toPrecision(usdtValue, USDt.decimals);

diff --git a/site/src/pages/Overview/Summary.jsx b/site/src/pages/Overview/Summary.jsx
@@ -37,6 +37,7 @@ import BigNumber from "bignumber.js";
 import SummaryItem from "../../components/Summary/Item";
 import ImageWithDark from "../../components/ImageWithDark";
 import { currentChainSettings, isCentrifuge } from "../../utils/chains";
+import useFiatPrice from "../../hooks/useFiatPrice";
 
 const Wrapper = styled(Card)`
   margin-bottom: 16px;
@@ -113,10 +114,9 @@ const Summary = () => {
   const spendPeriod = useSelector(spendPeriodSelector);
   const treasury = useSelector(treasurySelector);
   const symbol = useSelector(chainSymbolSelector);
+  const { price: symbolPrice } = useFiatPrice();
 
   const precision = getPrecision(symbol);
-
-  const symbolPrice = overview?.latestSymbolPrice ?? 0;
   const toBeAwarded = BigNumber(overview?.toBeAwarded?.total ?? 0).toNumber();
   const toBeAwardedValue = BigNumber(
     toPrecision(toBeAwarded, precision),

diff --git a/site/src/pages/Overview/polkadot/treasuryDetail/assets.jsx b/site/src/pages/Overview/polkadot/treasuryDetail/assets.jsx
@@ -7,12 +7,11 @@ import { ASSET_HUB_ACCOUNT } from "../../../../constants/assetHub";
 import AssetValueDisplay from "./common/assetValueDisplay";
 import { polkadot } from "../../../../utils/chains/polkadot";
 import BigNumber from "bignumber.js";
-import { useSelector } from "react-redux";
-import { overviewSelector } from "../../../../store/reducers/overviewSlice";
 import { toPrecision } from "../../../../utils";
 import { USDt } from "../../../../utils/chains/usdt";
 import { USDC } from "../../../../utils/chains/usdc";
 import { usePolkadotTreasuryData } from "../../../../context/PolkadotTreasury";
+import useFiatPrice from "../../../../hooks/useFiatPrice";
 
 const AssetGroup = styled.div`
   ${space_y(8)}
@@ -29,8 +28,7 @@ export default function TreasuryDetailAssets() {
     assetHubUSDCBalance,
     isAssetHubUSDCLoading,
   } = usePolkadotTreasuryData();
-  const overview = useSelector(overviewSelector);
-  const dotPrice = overview?.latestSymbolPrice ?? 0;
+  const { price: dotPrice } = useFiatPrice();
 
   const totalRelayChainFreeValue = BigNumber(
     toPrecision(relayChainFreeBalance, polkadot.decimals),

diff --git a/site/src/pages/Overview/polkadot/treasuryDetail/bounties.jsx b/site/src/pages/Overview/polkadot/treasuryDetail/bounties.jsx
@@ -4,12 +4,11 @@ import ValueDisplay from "../../../../components/ValueDisplay";
 import styled from "styled-components";
 import AssetWrapper from "./common/assetWrapper";
 import AssetValueDisplay from "./common/assetValueDisplay";
-import { overviewSelector } from "../../../../store/reducers/overviewSlice";
-import { useSelector } from "react-redux";
 import { toPrecision } from "../../../../utils";
 import BigNumber from "bignumber.js";
 import { polkadot } from "../../../../utils/chains/polkadot";
 import { usePolkadotTreasuryData } from "../../../../context/PolkadotTreasury";
+import useFiatPrice from "../../../../hooks/useFiatPrice";
 
 const Link = styled(LinkOrigin)`
   color: var(--textSecondary);
@@ -22,8 +21,7 @@ const Link = styled(LinkOrigin)`
 export default function TreasuryDetailBounties() {
   const { bountiesTotalBalance, bountiesCount, isBountiesTotalBalanceLoading } =
     usePolkadotTreasuryData();
-  const overview = useSelector(overviewSelector);
-  const dotPrice = overview?.latestSymbolPrice ?? 0;
+  const { price: dotPrice } = useFiatPrice();
 
   const totalValue = toPrecision(
     BigNumber(bountiesTotalBalance).multipliedBy(dotPrice),

diff --git a/site/src/pages/Overview/polkadot/treasuryDetail/fellowship.jsx b/site/src/pages/Overview/polkadot/treasuryDetail/fellowship.jsx
@@ -10,12 +10,11 @@ import {
   STATEMINT_FELLOWSHIP_TREASURY_ACCOUNT,
 } from "../../../../constants/statemint";
 import AssetValueDisplay from "./common/assetValueDisplay";
-import { overviewSelector } from "../../../../store/reducers/overviewSlice";
-import { useSelector } from "react-redux";
 import { currentChainSettings } from "../../../../utils/chains";
 import AssetItem from "./common/assetItem";
 import { polkadot } from "../../../../utils/chains/polkadot";
 import { usePolkadotTreasuryData } from "../../../../context/PolkadotTreasury";
+import useFiatPrice from "../../../../hooks/useFiatPrice";
 
 const AssetGroup = styled.div`
   ${space_y(8)}
@@ -28,8 +27,7 @@ export default function TreasuryDetailFellowship() {
     fellowshipTreasuryDotBalance,
     isFellowshipTreasuryDotLoading,
   } = usePolkadotTreasuryData();
-  const overview = useSelector(overviewSelector);
-  const dotPrice = overview?.latestSymbolPrice ?? 0;
+  const { price: dotPrice } = useFiatPrice();
 
   const totalTreasuryValue = BigNumber(
     toPrecision(fellowshipTreasuryDotBalance, polkadot.decimals),

diff --git a/site/src/pages/Overview/polkadot/treasuryDetail/hydration.jsx b/site/src/pages/Overview/polkadot/treasuryDetail/hydration.jsx
@@ -1,4 +1,3 @@
-import { useSelector } from "react-redux";
 import {
   PolkadotTreasuryOnHydrationAccount1,
   PolkadotTreasuryOnHydrationAccount2,
@@ -7,7 +6,6 @@ import { polkadot } from "../../../../utils/chains/polkadot";
 import AssetValueDisplay from "./common/assetValueDisplay";
 import AssetWrapper from "./common/assetWrapper";
 import TreasuryDetailItem from "./common/item";
-import { overviewSelector } from "../../../../store/reducers/overviewSlice";
 import BigNumber from "bignumber.js";
 import { USDt } from "../../../../utils/chains/usdt";
 import { USDC } from "../../../../utils/chains/usdc";
@@ -18,6 +16,7 @@ import ExplorerLinkOrigin from "../../../../components/ExplorerLink";
 import { p_12_medium } from "../../../../styles/text";
 import { space_x } from "../../../../styles/tailwindcss";
 import { usePolkadotTreasuryData } from "../../../../context/PolkadotTreasury";
+import useFiatPrice from "../../../../hooks/useFiatPrice";
 
 export const AddressGroup = styled.div`
   ${space_x(8)}
@@ -40,8 +39,7 @@ export default function TreasuryDetailHydration() {
     hydrationUSDCBalance,
     isHydrationLoading,
   } = usePolkadotTreasuryData();
-  const overview = useSelector(overviewSelector);
-  const dotPrice = overview?.latestSymbolPrice ?? 0;
+  const { price: dotPrice } = useFiatPrice();
 
   const totalDotValue = BigNumber(
     toPrecision(hydrationDotBalance, polkadot.decimals),

diff --git a/site/src/pages/Overview/polkadot/treasuryDetail/loans.jsx b/site/src/pages/Overview/polkadot/treasuryDetail/loans.jsx
@@ -5,13 +5,12 @@ import { toPrecision } from "../../../../utils";
 import TreasuryDetailItem from "./common/item";
 import { polkadot } from "../../../../utils/chains/polkadot";
 import { USDt } from "../../../../utils/chains/usdt";
-import { useSelector } from "react-redux";
-import { overviewSelector } from "../../../../store/reducers/overviewSlice";
 import { space_y } from "../../../../styles/tailwindcss";
 import styled from "styled-components";
 import AssetValueDisplay from "./common/assetValueDisplay";
 import AssetItem from "./common/assetItem";
 import { usePolkadotTreasuryData } from "../../../../context/PolkadotTreasury";
+import useFiatPrice from "../../../../hooks/useFiatPrice";
 
 const AssetGroup = styled.div`
   ${space_y(8)}
@@ -28,8 +27,7 @@ export default function TreasuryDetailLoans() {
     loansHydrationDotBalance,
     isLoansHydrationDotLoading,
   } = usePolkadotTreasuryData();
-  const overview = useSelector(overviewSelector);
-  const dotPrice = overview?.latestSymbolPrice ?? 0;
+  const { price: dotPrice } = useFiatPrice();
 
   const totalBifrostValue = BigNumber(
     toPrecision(loansBifrostDotBalance, polkadot.decimals),

diff --git a/site/src/pages/Overview/polkadot/treasuryDetail/mythToken.jsx b/site/src/pages/Overview/polkadot/treasuryDetail/mythToken.jsx
@@ -5,7 +5,7 @@ import { toPrecision } from "../../../../utils";
 import ValueDisplay from "../../../../components/ValueDisplay";
 import { MYTH } from "../../../../constants/foreignAssets";
 import { MYTH_TOKEN_ACCOUNT } from "../../../../constants/foreignAssets";
-import useFiatPrice from "../../../../hooks/useFiatPrice";
+import { useFiatPriceBySymbol } from "../../../../hooks/useFiatPrice";
 import AssetWrapper from "./common/assetWrapper";
 import { ExplorerLink, AddressGroup } from "./hydration";
 import { usePolkadotTreasuryData } from "../../../../context/PolkadotTreasury";
@@ -27,7 +27,7 @@ function AddressLink({ title, address, base }) {
 export default function TreasuryDetailMythToken() {
   const { mythTokenBalance, isMythTokenLoading } = usePolkadotTreasuryData();
   const { price: mythTokenPrice, isLoading: isFiatPriceLoading } =
-    useFiatPrice("MYTH");
+    useFiatPriceBySymbol("MYTH");
 
   const totalValue = toPrecision(
     BigNumber(mythTokenBalance).multipliedBy(mythTokenPrice),

diff --git a/site/src/pages/Proposals/Summary.jsx b/site/src/pages/Proposals/Summary.jsx
@@ -6,6 +6,7 @@ import TextMinor from "../../components/TextMinor";
 import CountDown from "../../components/CountDown";
 import BlocksTime from "../../components/BlocksTime";
 import { mrgap } from "../../styles";
+import useFiatPrice from "../../hooks/useFiatPrice";
 
 import {
   fetchProposalsSummary,
@@ -29,7 +30,6 @@ import {
   grid_cols,
 } from "../../styles/tailwindcss";
 import { h3_18_semibold, p_12_normal } from "../../styles/text";
-import { overviewSelector } from "../../store/reducers/overviewSlice";
 import { parseEstimateTime } from "../../utils/parseEstimateTime";
 import { extractTime } from "@polkadot/util";
 import SummaryItem from "../../components/Summary/Item";
@@ -78,13 +78,11 @@ const Summary = () => {
     dispatch(fetchTreasury());
   }, [dispatch]);
 
-  const overview = useSelector(overviewSelector);
   const summary = useSelector(proposalSummarySelector);
   const spendPeriod = useSelector(spendPeriodSelector);
   const treasury = useSelector(treasurySelector);
   const symbol = useSelector(chainSymbolSelector);
-
-  const symbolPrice = overview?.latestSymbolPrice ?? 0;
+  const { price: symbolPrice } = useFiatPrice();
 
   return (
     <SummaryProposalsWrapper>