No use subscribe to preview disconnected issue

packages/next-common/components/summary/polkadotTreasurySummary/context/index.js

@@ -1,20 +1,20 @@
 import { createContext, useContext } from "react";
-import useSubscribeAssetHubAssets from "next-common/hooks/assetHub/useSubscribeAssetHubAssets";
-import { useSubscribeFellowshipTreasuryFree } from "../hook/useSubscribeAssetHubTreasuryFree";
+import useQueryAssetHubAssets from "next-common/hooks/assetHub/useQueryAssetHubAssets";
+import { useQueryAssetHubTreasuryFree } from "../hook/useQueryAssetHubTreasuryFree";
 import {
   StatemintTreasuryAccount,
   getAssetBySymbol,
   StatemintFellowShipTreasuryAccount,
 } from "next-common/hooks/treasury/useAssetHubTreasuryBalance";
 import useTreasuryFree from "next-common/utils/hooks/useTreasuryFree";
 import { useContextApi } from "next-common/context/api";
-import useSubscribeFellowshipSalaryBalance from "../hook/useSubscribeFellowshipSalaryBalance";
+import useQueryFellowshipSalaryBalance from "../hook/useQueryFellowshipSalaryBalance";
 
 const PolkadotTreasurySummaryContext = createContext();
 
 function useTreasuryAccountAssetBalance(symbol) {
   const asset = getAssetBySymbol(symbol);
-  return useSubscribeAssetHubAssets(asset.id, StatemintTreasuryAccount);
+  return useQueryAssetHubAssets(asset.id, StatemintTreasuryAccount);
 }
 
 export function PolkadotTreasurySummaryProvider({ children }) {
@@ -27,17 +27,17 @@ export function PolkadotTreasurySummaryProvider({ children }) {
   const {
     free: fellowshipTreasuryDotBalance,
     isLoading: isFellowshipTreasuryDotBalanceLoading,
-  } = useSubscribeFellowshipTreasuryFree(StatemintFellowShipTreasuryAccount);
+  } = useQueryAssetHubTreasuryFree(StatemintFellowShipTreasuryAccount);
 
   const {
     balance: fellowshipSalaryUsdtBalance,
     isLoading: isFellowshipSalaryUsdtBalanceLoading,
-  } = useSubscribeFellowshipSalaryBalance("USDt");
+  } = useQueryFellowshipSalaryBalance("USDt");
 
   const {
     free: dotTreasuryBalanceOnAssetHub,
     isLoading: isDotTreasuryBalanceOnAssetHubLoading,
-  } = useSubscribeFellowshipTreasuryFree(StatemintTreasuryAccount);
+  } = useQueryAssetHubTreasuryFree(StatemintTreasuryAccount);
 
   const {
     balance: usdtTreasuryBalanceOnAssetHub,

packages/next-common/components/summary/polkadotTreasurySummary/context/treasuryOnHydration.js

@@ -1,11 +1,10 @@
 import { createContext, useContext } from "react";
-import { useSubscribeHydrationTreasuryBalances } from "../hook/useSubscribeHydrationTreasuryBalances";
+import { useQueryHydrationTreasuryBalances } from "../hook/useQueryHydrationTreasuryBalances";
 
 const HydrationTreasurySummaryContext = createContext();
 
 export function TreasuryOnHydrationProvider({ children }) {
-  const { dot, usdt, usdc, isLoading } =
-    useSubscribeHydrationTreasuryBalances();
+  const { dot, usdt, usdc, isLoading } = useQueryHydrationTreasuryBalances();
 
   return (
     <HydrationTreasurySummaryContext.Provider

packages/next-common/components/summary/polkadotTreasurySummary/fellowshipTreasuryOnAssetHub/index.js

@@ -6,7 +6,7 @@ import SummaryItem from "next-common/components/summary/layout/item";
 import { StatemintFellowShipTreasuryAccount } from "next-common/hooks/treasury/useAssetHubTreasuryBalance";
 import { toPrecision } from "next-common/utils";
 import { SYMBOL_DECIMALS } from "next-common/utils/consts/asset";
-import { StatemintFellowShipSalaryAccount } from "../hook/useSubscribeFellowshipSalaryBalance";
+import { StatemintFellowShipSalaryAccount } from "../hook/useQueryFellowshipSalaryBalance";
 import { useChainSettings } from "next-common/context/chain";
 import ValueDisplay from "next-common/components/valueDisplay";
 

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

@@ -0,0 +1,16 @@
+import { useAssetHubApi } from "next-common/context/assetHub";
+import useCall from "next-common/utils/hooks/useCall";
+
+export function useQueryAccountFree(api, address) {
+  const { loaded, value } = useCall(api?.query.system?.account, [address]);
+
+  return {
+    free: value?.data?.free?.toJSON() || 0,
+    isLoading: !loaded,
+  };
+}
+
+export function useQueryAssetHubTreasuryFree(address) {
+  const api = useAssetHubApi();
+  return useQueryAccountFree(api, address);
+}

packages/next-common/components/summary/polkadotTreasurySummary/hook/useSubscribeFellowshipSalaryBalance.js → packages/next-common/components/summary/polkadotTreasurySummary/hook/useQueryFellowshipSalaryBalance.js

@@ -1,12 +1,12 @@
 import { useChain } from "next-common/context/chain";
 import Chains from "next-common/utils/consts/chains";
 import { getAssetBySymbol } from "next-common/hooks/treasury/useAssetHubTreasuryBalance";
-import useSubscribeAssetHubAssets from "next-common/hooks/assetHub/useSubscribeAssetHubAssets";
+import useQueryAssetHubAssets from "next-common/hooks/assetHub/useQueryAssetHubAssets";
 
 export const StatemintFellowShipSalaryAccount =
   "13w7NdvSR1Af8xsQTArDtZmVvjE8XhWNdL4yed3iFHrUNCnS";
 
-export default function useSubscribeFellowshipSalaryBalance(symbol) {
+export default function useQueryFellowshipSalaryBalance(symbol) {
   const chain = useChain();
 
   let salaryAccount = null;
@@ -16,5 +16,5 @@ export default function useSubscribeFellowshipSalaryBalance(symbol) {
   }
 
   const asset = getAssetBySymbol(symbol);
-  return useSubscribeAssetHubAssets(asset.id, salaryAccount);
+  return useQueryAssetHubAssets(asset.id, salaryAccount);
 }

packages/next-common/components/summary/polkadotTreasurySummary/hook/useSubscribeHydrationTreasuryBalances.js → packages/next-common/components/summary/polkadotTreasurySummary/hook/useQueryHydrationTreasuryBalances.js

@@ -1,5 +1,5 @@
 import { useHydrationApi } from "next-common/context/hydration";
-import useSubStorage from "next-common/hooks/common/useSubStorage";
+import useCall from "next-common/utils/hooks/useCall";
 
 const DotTokenId = 5;
 const UsdtTokenIdFromAssetHub = 10;
@@ -14,28 +14,22 @@ function getTotal(account) {
 export const PolkadotTreasuryOnHydrationAccount =
   "7KCp4eenFS4CowF9SpQE5BBCj5MtoBA3K811tNyRmhLfH1aV";
 
-export function useSubscribeHydrationTreasuryBalances() {
+export function useQueryHydrationTreasuryBalances() {
   const api = useHydrationApi();
-  const { loading: isLoadingUSDT, result: accountUsdt } = useSubStorage(
-    "tokens",
-    "accounts",
+  const { loaded: isUsdtLoaded, value: accountUsdt } = useCall(
+    api?.query.tokens?.accounts,
     [PolkadotTreasuryOnHydrationAccount, UsdtTokenIdFromAssetHub],
-    { api },
   );
-  const { loading: isLoadingUSDC, result: accountUsdc } = useSubStorage(
-    "tokens",
-    "accounts",
+  const { loaded: isUsdcLoaded, value: accountUsdc } = useCall(
+    api?.query.tokens?.accounts,
     [PolkadotTreasuryOnHydrationAccount, UsdcTokenIdFromAssetHub],
-    { api },
   );
-  const { loading: isLoadingDOT, result: accountDot } = useSubStorage(
-    "tokens",
-    "accounts",
+  const { loaded: isDotLoaded, value: accountDot } = useCall(
+    api?.query.tokens?.accounts,
     [PolkadotTreasuryOnHydrationAccount, DotTokenId],
-    { api },
   );
 
-  const isLoading = isLoadingUSDT || isLoadingUSDC || isLoadingDOT;
+  const isLoading = !isUsdtLoaded || !isUsdcLoaded || !isDotLoaded;
 
   const dot = getTotal(accountDot);
   const usdt = getTotal(accountUsdt);

packages/next-common/components/summary/polkadotTreasurySummary/treasuryOnHydration/index.jsx

@@ -1,7 +1,7 @@
 import LoadableContent from "next-common/components/common/loadableContent";
 import SummaryItem from "next-common/components/summary/layout/item";
 import Link from "next/link";
-import { PolkadotTreasuryOnHydrationAccount } from "../hook/useSubscribeHydrationTreasuryBalances";
+import { PolkadotTreasuryOnHydrationAccount } from "../hook/useQueryHydrationTreasuryBalances";
 import DotTokenSymbolAsset from "../common/dotTokenSymbolAsset";
 import FiatPriceLabel from "../common/fiatPriceLabel";
 import { useHydrationTreasurySummary } from "../context/treasuryOnHydration";

packages/next-common/hooks/assetHub/useQueryAssetHubAssets.js

@@ -0,0 +1,21 @@
+import { useAssetHubApi } from "next-common/context/assetHub";
+import useCall from "next-common/utils/hooks/useCall";
+
+export default function useQueryAssetHubAssets(assetId, address) {
+  const api = useAssetHubApi();
+
+  const { loaded: isAccountLoaded, value: account } = useCall(
+    api?.query.assets?.account,
+    [assetId, address],
+  );
+  const { loaded: isMetaLoaded, value: meta } = useCall(
+    api?.query.assets?.metadata,
+    [assetId],
+  );
+
+  return {
+    isLoading: !isAccountLoaded || !isMetaLoaded,
+    balance: account?.toJSON()?.balance || 0,
+    decimals: meta?.toJSON()?.decimals || 0,
+  };
+}