Fix fellowship finance

packages/next-common/components/overview/fellowship/finance/common.js

@@ -1,11 +1,17 @@
 import { useAssetHubApi } from "next-common/hooks/chain/useAssetHubApi";
 import { SYMBOL_DECIMALS } from "next-common/utils/consts/asset";
 import { useAsync } from "react-use";
+import { useHydrationCurrencyAccountData } from "next-common/hooks/useHydrationCurrencyInfo";
+
+export const HYDRATION_ASSET_IDS = {
+  DOT: 5,
+  HOLLAR: 222,
+};
 
 export const HOLLAR_FOREIGN_ASSET_KEY = {
   parents: 1,
   interior: {
-    X2: [{ Parachain: 2034 }, { GeneralIndex: "222" }],
+    X2: [{ Parachain: 2034 }, { GeneralIndex: HYDRATION_ASSET_IDS.HOLLAR }],
   },
 };
 
@@ -30,6 +36,12 @@ export function useFetchHollarBalance(address) {
   return { balance: value || "0", loading };
 }
 
+export function useHydrationCurrencyBalance(tokenId, address) {
+  const { value, loading } = useHydrationCurrencyAccountData(tokenId, address);
+  const balance = value?.free?.toString() || "0";
+  return { balance, loading };
+}
+
 export function ExternalLink({ href, children }) {
   return (
     <a

packages/next-common/components/overview/fellowship/finance/index.jsx

@@ -1,6 +1,7 @@
 import { TitleContainer } from "next-common/components/styled/containers/titleContainer";
 import { SecondaryCard } from "next-common/components/styled/containers/secondaryCard";
 import CollectivesProvider from "next-common/context/collectives/collectives";
+import { FiatPriceProvider } from "next-common/context/fiatPrice";
 import FellowshipTreasury from "./treasury";
 import FellowshipSalary from "./salary";
 import FellowshipCurrentSalaryCycleSummary from "./currentSalaryCycle";
@@ -21,8 +22,10 @@ export default function FellowshipFinanceOverview() {
             : "max-md:grid-cols-2 max-lg:grid-cols-4",
         )}
       >
-        <FellowshipTreasury />
-        <FellowshipSalary />
+        <FiatPriceProvider>
+          <FellowshipTreasury />
+          <FellowshipSalary />
+        </FiatPriceProvider>
         <CollectivesProvider>
           <FellowshipCurrentSalaryCycleSummary title="Fellowship Salary Cycle" />
         </CollectivesProvider>

packages/next-common/components/overview/fellowship/finance/salary.jsx

@@ -8,12 +8,14 @@ import { toPrecision } from "next-common/utils";
 import { SYMBOL_DECIMALS } from "next-common/utils/consts/asset";
 import TokenSymbolAsset from "next-common/components/summary/polkadotTreasurySummary/common/tokenSymbolAsset";
 import { HOLLAR_DECIMALS, useFetchHollarBalance, ExternalLink } from "./common";
+import { useFiatPrice } from "next-common/context/fiatPrice";
 
 export default function FellowshipSalary() {
   const { balance: usdtBalance, isLoading: usdtLoading } =
     useQueryFellowshipSalaryBalance("USDT");
   const { balance: hollarBalance, loading: hollarLoading } =
     useFetchHollarBalance(StatemintFellowShipSalaryAccount);
+  const { price: fiatPrice, loading: fiatPriceLoading } = useFiatPrice();
 
   const Title = (
     <ExternalLink
@@ -25,12 +27,15 @@ export default function FellowshipSalary() {
 
   return (
     <SummaryItem title={Title}>
-      <LoadableContent isLoading={usdtLoading && hollarLoading}>
+      <LoadableContent
+        isLoading={usdtLoading || hollarLoading || fiatPriceLoading}
+      >
         <div className="flex flex-col gap-[4px]">
           <div>
             <FiatPriceLabel
               usdtBalance={usdtBalance}
               hollarBalance={hollarBalance}
+              fiatPrice={fiatPrice}
             />
           </div>
           <div className="flex flex-col gap-y-1">

packages/next-common/components/overview/fellowship/finance/treasury.jsx

@@ -7,7 +7,15 @@ import { useAssetHubApi } from "next-common/hooks/chain/useAssetHubApi";
 import useSubStorage from "next-common/hooks/common/useSubStorage";
 import { toPrecision } from "next-common/utils";
 import TokenSymbolAsset from "next-common/components/summary/polkadotTreasurySummary/common/tokenSymbolAsset";
-import { HOLLAR_DECIMALS, useFetchHollarBalance, ExternalLink } from "./common";
+import {
+  HYDRATION_ASSET_IDS,
+  HOLLAR_DECIMALS,
+  useFetchHollarBalance,
+  useHydrationCurrencyBalance,
+  ExternalLink,
+} from "./common";
+import { useFiatPrice } from "next-common/context/fiatPrice";
+import bigAdd from "next-common/utils/math/bigAdd";
 
 function useFetchFellowshipTreasuryBalance() {
   const api = useAssetHubApi();
@@ -24,11 +32,34 @@ function useFetchFellowshipTreasuryBalance() {
 }
 
 export default function FellowshipTreasury() {
-  const { balance: dotBalance, loading: dotLoading } =
+  const { balance: dotAhBalance, loading: dotAhLoading } =
     useFetchFellowshipTreasuryBalance();
-  const { balance: hollarBalance, loading: hollarLoading } =
+  const { balance: hollarAhBalance, loading: hollarAhLoading } =
     useFetchHollarBalance(StatemintFellowShipTreasuryAccount);
 
+  const { balance: dotHydrationBalance, loading: dotHydrationLoading } =
+    useHydrationCurrencyBalance(
+      HYDRATION_ASSET_IDS.DOT,
+      StatemintFellowShipTreasuryAccount,
+    );
+  const { balance: hollarHydrationBalance, loading: hollarHydrationLoading } =
+    useHydrationCurrencyBalance(
+      HYDRATION_ASSET_IDS.HOLLAR,
+      StatemintFellowShipTreasuryAccount,
+    );
+
+  const { price: fiatPrice, loading: fiatPriceLoading } = useFiatPrice();
+
+  const dotBalance = bigAdd(dotAhBalance, dotHydrationBalance);
+  const hollarBalance = bigAdd(hollarAhBalance, hollarHydrationBalance);
+
+  const loading =
+    dotAhLoading ||
+    hollarAhLoading ||
+    dotHydrationLoading ||
+    hollarHydrationLoading ||
+    fiatPriceLoading;
+
   const Title = (
     <ExternalLink
       href={`https://assethub-polkadot.statescan.io/#/accounts/${StatemintFellowShipTreasuryAccount}`}
@@ -39,10 +70,14 @@ export default function FellowshipTreasury() {
 
   return (
     <SummaryItem title={Title}>
-      <LoadableContent isLoading={dotLoading || hollarLoading}>
+      <LoadableContent isLoading={loading}>
         <div className="flex flex-col gap-[4px]">
           <div>
-            <FiatPriceLabel free={dotBalance} hollarBalance={hollarBalance} />
+            <FiatPriceLabel
+              free={dotBalance}
+              hollarBalance={hollarBalance}
+              fiatPrice={fiatPrice}
+            />
           </div>
           <div className="flex items-center gap-x-1">
             <NativeTokenSymbolAsset free={dotBalance} />

packages/next-common/components/summary/polkadotTreasurySummary/common/fiatPriceLabel.jsx

@@ -6,15 +6,14 @@ import { useFiatPriceSnapshot } from "next-common/hooks/useFiatPrice";
 import { toPrecision } from "next-common/utils";
 import { SYMBOL_DECIMALS } from "next-common/utils/consts/asset";
 
-export default function FiatPriceLabel({
-  free = 0,
-  usdcBalance = 0,
-  usdtBalance = 0,
-  hollarBalance = 0,
+function FiatPriceLabelInner({
+  free,
+  usdcBalance,
+  usdtBalance,
+  hollarBalance,
+  fiatPrice,
 }) {
-  const { price: fiatPrice } = useFiatPriceSnapshot();
   const { decimals } = useChainSettings();
-
   const totalPrice = BigNumber(free)
     .dividedBy(Math.pow(10, decimals))
     .multipliedBy(fiatPrice)
@@ -30,3 +29,50 @@ export default function FiatPriceLabel({
     </div>
   );
 }
+
+function FiatPriceLabelWithHook({
+  free,
+  usdcBalance,
+  usdtBalance,
+  hollarBalance,
+}) {
+  const { price: fiatPrice } = useFiatPriceSnapshot();
+  return (
+    <FiatPriceLabelInner
+      free={free}
+      usdcBalance={usdcBalance}
+      usdtBalance={usdtBalance}
+      hollarBalance={hollarBalance}
+      fiatPrice={fiatPrice}
+    />
+  );
+}
+
+export default function FiatPriceLabel({
+  free = 0,
+  usdcBalance = 0,
+  usdtBalance = 0,
+  hollarBalance = 0,
+  fiatPrice,
+}) {
+  if (!isNil(fiatPrice)) {
+    return (
+      <FiatPriceLabelInner
+        free={free}
+        usdcBalance={usdcBalance}
+        usdtBalance={usdtBalance}
+        hollarBalance={hollarBalance}
+        fiatPrice={fiatPrice}
+      />
+    );
+  }
+
+  return (
+    <FiatPriceLabelWithHook
+      free={free}
+      usdcBalance={usdcBalance}
+      usdtBalance={usdtBalance}
+      hollarBalance={hollarBalance}
+    />
+  );
+}

packages/next-common/components/summary/polkadotTreasurySummary/hook/useHydrationADotBalance.js

@@ -1,59 +1,11 @@
-import { useCallback, useEffect, useState, useMemo } from "react";
-import { useHydrationApi } from "next-common/hooks/chain/useHydrationApi";
+import { useHydrationCurrencyAccountData } from "next-common/hooks/useHydrationCurrencyInfo";
 
 const ADOT_TOKEN_ID = 1001;
-const CURRENCIES_API_METHOD = "CurrenciesApi_account";
-const RUNTIME_API_TYPE = "PalletCurrenciesRpcRuntimeApiAccountData";
 
 export default function useHydrationADotBalance(address) {
-  const api = useHydrationApi();
-  const [value, setValue] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  const callParams = useMemo(() => {
-    if (!api?.registry || !address) {
-      return null;
-    }
-
-    try {
-      const assetId = api.registry.createType("u32", ADOT_TOKEN_ID);
-      const accountId = api.registry.createType("AccountId", address);
-
-      return new Uint8Array([...assetId.toU8a(), ...accountId.toU8a()]);
-    } catch (error) {
-      console.error("Error creating call parameters:", error);
-      return null;
-    }
-  }, [api, address]);
-
-  const fetchADotBalance = useCallback(async () => {
-    if (!api?.rpc?.state || !address || !callParams) {
-      return null;
-    }
-
-    try {
-      setIsLoading(true);
-      const resultRaw = await api.rpc.state.call(
-        CURRENCIES_API_METHOD,
-        Array.from(callParams),
-      );
-
-      const accountData = api.registry.createType(RUNTIME_API_TYPE, resultRaw);
-      setValue(accountData);
-    } catch (error) {
-      console.error("Error fetching aDot value:", error);
-      return null;
-    } finally {
-      setIsLoading(false);
-    }
-  }, [api, address, callParams]);
-
-  useEffect(() => {
-    fetchADotBalance();
-  }, [fetchADotBalance]);
-
-  return {
-    value,
-    isLoading,
-  };
+  const { value, loading } = useHydrationCurrencyAccountData(
+    ADOT_TOKEN_ID,
+    address,
+  );
+  return { value: value, isLoading: loading };
 }

packages/next-common/context/fiatPrice.js

@@ -0,0 +1,50 @@
+import { createContext, useContext, useEffect } from "react";
+import { gql } from "@apollo/client";
+import { useChain } from "next-common/context/chain";
+import { useDoTreasuryEcoLazyQuery } from "next-common/hooks/apollo";
+import collectives from "next-common/utils/consts/settings/collectives";
+import polkadot from "next-common/utils/consts/settings/polkadot";
+import bifrostPolkadot from "next-common/utils/consts/settings/bifrostPolkadot";
+import bifrost from "next-common/utils/consts/settings/bifrost";
+import { find } from "lodash-es";
+
+const GET_TREASURIES = gql`
+  query GetTreasuries {
+    treasuries {
+      chain
+      price
+    }
+  }
+`;
+
+const CHAIN_VALUE_TREASURY_MAP = {
+  [bifrostPolkadot.value]: bifrost.value,
+  [collectives.value]: polkadot.value,
+};
+
+const FiatPriceContext = createContext({ price: undefined, loading: true });
+
+export function FiatPriceProvider({ children }) {
+  const chain = useChain();
+
+  const [getTreasuries, { data, loading }] =
+    useDoTreasuryEcoLazyQuery(GET_TREASURIES);
+
+  useEffect(() => {
+    getTreasuries();
+  }, [getTreasuries]);
+
+  const treasury = find(data?.treasuries, {
+    chain: CHAIN_VALUE_TREASURY_MAP[chain] || chain,
+  });
+
+  return (
+    <FiatPriceContext.Provider value={{ price: treasury?.price, loading }}>
+      {children}
+    </FiatPriceContext.Provider>
+  );
+}
+
+export function useFiatPrice() {
+  return useContext(FiatPriceContext);
+}