Fixed wallet SPK data fetching

src/api/queries/index.ts

@@ -64,3 +64,4 @@ export * from "./get-order-book-query";
 export * from "./get-search-by-username-query";
 export * from "./get-rc-operators-stats-query";
 export * from "./get-announcements-query";
+export * from "./spk";

src/api/queries/spk/get-spk-wallet-query.ts

@@ -0,0 +1,78 @@
+import { EcencyQueriesManager, QueryIdentifiers } from "@/core/react-query";
+import { getMarkets, getSpkWallet, rewardSpk } from "@/api/spk-api";
+import { getEstimatedBalance } from "@/app/(dynamicPages)/profile/[username]/_components/wallet-spk/util";
+
+export const getSpkWalletQuery = (username?: string) =>
+  EcencyQueriesManager.generateClientServerQuery({
+    queryKey: [QueryIdentifiers.SPK_USER_WALLET, username],
+    queryFn: async () => {
+      if (!username) {
+        throw new Error("[SPK][getUserWallet] username isn`t provided");
+      }
+      const wallet = await getSpkWallet(username);
+      const { raw, list } = await getMarkets();
+
+      const format = (value: number) => value.toFixed(3);
+
+      return {
+        tokenBalance: format(
+          (wallet.spk +
+            rewardSpk(
+              wallet,
+              raw.stats || {
+                spk_rate_lgov: "0.001",
+                spk_rate_lpow: format(parseFloat(raw.stats.spk_rate_lpow) * 100),
+                spk_rate_ldel: format(parseFloat(raw.stats.spk_rate_ldel) * 100)
+              }
+            )) /
+            1000
+        ),
+        larynxAirBalance: format(wallet.drop.availible.amount / 1000),
+        larynxTokenBalance: format(wallet.balance / 1000),
+        larynxPowerBalance: format(wallet.poweredUp / 1000),
+        larynxGrantedBalance: wallet.granted?.t ? format(wallet.granted.t / 1000) : "",
+        larynxGrantingBalance: wallet.granting?.t ? format(wallet.granting.t / 1000) : "",
+        larynxLockedBalance: wallet.gov > 0 ? format(wallet.gov / 1000) : "",
+        claim: format(wallet.claim / 1000),
+        larynxPowerRate: "0.010",
+        headBlock: wallet.head_block,
+        powerDownList: Object.values(wallet.power_downs),
+        delegatedItems: Object.entries(wallet.granted).filter(([name]) => name !== "t") as [
+          string,
+          number
+        ][],
+        delegatingItems: Object.entries(wallet.granting).filter(([name]) => name !== "t") as [
+          string,
+          number
+        ][],
+        estimatedBalance: await getEstimatedBalance(wallet),
+        markets: list,
+        isNode: list.some((market) => market.name === username),
+        rateLPow: format(parseFloat(raw.stats.spk_rate_lpow) * 100),
+        rateLDel: format(parseFloat(raw.stats.spk_rate_ldel) * 100)
+      };
+    },
+    enabled: !!username,
+    refetchOnMount: true,
+    staleTime: 30000,
+    initialData: {
+      tokenBalance: "0.000",
+      larynxAirBalance: "0.000",
+      larynxTokenBalance: "0.000",
+      larynxPowerBalance: "0.000",
+      larynxGrantedBalance: "0.000",
+      larynxGrantingBalance: "0.000",
+      larynxLockedBalance: "0.000",
+      claim: "0.000",
+      larynxPowerRate: "0.000",
+      headBlock: 0,
+      powerDownList: [],
+      delegatingItems: [],
+      delegatedItems: [],
+      estimatedBalance: "0.000",
+      markets: [],
+      isNode: false,
+      rateLDel: "0.000",
+      rateLPow: "0.000"
+    }
+  });

src/api/queries/spk/index.ts

@@ -0,0 +1 @@
+export * from "./get-spk-wallet-query";

src/app/(dynamicPages)/profile/[username]/_components/wallet-spk/index.tsx

@@ -1,40 +1,59 @@
 "use client";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import { WalletSpkSection } from "./wallet-spk-section";
 import { SendSpkDialog } from "./send-spk-dialog";
 import { WalletSpkLarynxPower } from "./wallet-spk-larynx-power";
 import { WalletSpkLarynxLocked } from "./wallet-spk-larynx-locked";
 import { WalletSpkUnclaimedPoints } from "./wallet-spk-unclaimed-points";
 import { WalletSpkDelegatedPowerDialog } from "./wallet-spk-delegated-power-dialog";
-import { getEstimatedBalance } from "./util";
-import { Account, Market } from "@/entities";
+import { Account } from "@/entities";
 import i18next from "i18next";
 import { WalletMenu } from "../wallet-menu";
-import { claimLarynxRewards, getMarkets, getSpkWallet, rewardSpk } from "@/api/spk-api";
+import { claimLarynxRewards } from "@/api/spk-api";
 import { useGlobalStore } from "@/core/global-store";
 import { error, success } from "@/features/shared";
 import { formatError } from "@/api/operations";
-import { usePrevious } from "react-use";
+import { getSpkWalletQuery } from "@/api/queries";
+import useMount from "react-use/lib/useMount";
 
 export interface Props {
   account: Account;
 }
 
 export function WalletSpk({ account }: Props) {
   const activeUser = useGlobalStore((s) => s.activeUser);
-  const previousActiveUser = usePrevious(activeUser);
 
-  const [tokenBalance, setTokenBalance] = useState("0");
-  const [larynxAirBalance, setLarynxAirBalance] = useState("0");
-  const [larynxPowerBalance, setLarynxPowerBalance] = useState("0");
-  const [larynxTokenBalance, setLarynxTokenBalance] = useState("0");
-  const [activeUserTokenBalance, setActiveUserTokenBalance] = useState("0");
-  const [activeUserLarynxTokenBalance, setActiveUserLarynxTokenBalance] = useState("0");
-  const [estimatedBalance, setEstimatedBalance] = useState("0");
-  const [larynxPowerRate, setLarynxPowerRate] = useState("0");
-  const [larynxGrantedPower, setLarynxGrantedPower] = useState("");
-  const [larynxGrantingPower, setLarynxGrantingPower] = useState("");
-  const [larynxLockedBalance, setLarynxLockedBalance] = useState("");
+  const [prefilledAmount, setPrefilledAmount] = useState("");
+
+  // should !isActiveUserWallet only, otherwise it should be 0
+  const { data: activeUserSpkWalletData, refetch: refetchActiveUserData } = getSpkWalletQuery(
+    activeUser?.username
+  ).useClientQuery();
+  const { tokenBalance: activeUserTokenBalance, larynxTokenBalance: activeUserLarynxTokenBalance } =
+    activeUserSpkWalletData!;
+
+  const { data: accountSpkData, refetch: refetchAccountData } = getSpkWalletQuery(
+    account.name
+  ).useClientQuery();
+  const {
+    tokenBalance,
+    larynxTokenBalance,
+    larynxLockedBalance,
+    larynxPowerBalance,
+    larynxPowerRate,
+    larynxGrantingBalance,
+    larynxGrantedBalance,
+    estimatedBalance,
+    markets,
+    rateLPow,
+    rateLDel,
+    headBlock,
+    powerDownList,
+    delegatingItems,
+    delegatedItems,
+    isNode
+  } = accountSpkData!;
+
   const [sendSpkShow, setSendSpkShow] = useState(false);
   const [delegatedPowerDialogShow, setDelegatedPowerDialogShow] = useState(false);
   const [delegatingPowerDialogShow, setDelegatingPowerDialogShow] = useState(false);
@@ -44,15 +63,6 @@ export function WalletSpk({ account }: Props) {
   >("transfer");
   const [claim, setClaim] = useState("0");
   const [claiming, setClaiming] = useState(false);
-  const [headBlock, setHeadBlock] = useState(0);
-  const [powerDownList, setPowerDownList] = useState<string[]>([]);
-  const [prefilledAmount, setPrefilledAmount] = useState("");
-  const [markets, setMarkets] = useState<Market[]>([]);
-  const [isNode, setIsNode] = useState(false);
-  const [delegatedItems, setDelegatedItems] = useState<[string, number][]>([]);
-  const [delegatingItems, setDelegatingItems] = useState<[string, number][]>([]);
-  const [rateLPow, setRateLPow] = useState("0.0001");
-  const [rateLDel, setRateLDel] = useState("0.00015");
 
   const isActiveUserWallet = useMemo(
     () => activeUser?.username === account.name,
@@ -80,63 +90,6 @@ export function WalletSpk({ account }: Props) {
       }
   }
 
-  const fetchActiveUserWallet = useCallback(async () => {
-    const format = (value: number) => value.toFixed(3);
-    if (!isActiveUserWallet && activeUser) {
-      const activeUserWallet = await getSpkWallet(activeUser?.username);
-      setActiveUserTokenBalance(format(activeUserWallet.spk / 1000));
-      setActiveUserLarynxTokenBalance(format(activeUserWallet.balance / 1000));
-    }
-  }, [activeUser, isActiveUserWallet]);
-  const fetch = async () => {
-    try {
-      const wallet = await getSpkWallet(account.name);
-      const format = (value: number) => value.toFixed(3);
-
-      setTokenBalance(format(wallet.spk / 1000));
-      setLarynxAirBalance(format(wallet.drop.availible.amount / 1000));
-      setLarynxTokenBalance(format(wallet.balance / 1000));
-      setLarynxPowerBalance(format(wallet.poweredUp / 1000));
-      setLarynxGrantedPower(wallet.granted?.t ? format(wallet.granted.t / 1000) : "");
-      setLarynxGrantingPower(wallet.granting?.t ? format(wallet.granting.t / 1000) : "");
-      setLarynxLockedBalance(wallet.gov > 0 ? format(wallet.gov / 1000) : "");
-      setClaim(format(wallet.claim / 1000));
-      setLarynxPowerRate("0.010");
-      setHeadBlock(wallet.head_block);
-      setPowerDownList(Object.values(wallet.power_downs));
-      setDelegatedItems(
-        Object.entries(wallet.granted).filter(([name]) => name !== "t") as [string, number][]
-      );
-      setDelegatingItems(
-        Object.entries(wallet.granting).filter(([name]) => name !== "t") as [string, number][]
-      );
-
-      fetchActiveUserWallet();
-      setEstimatedBalance(await getEstimatedBalance(wallet));
-
-      const { raw, list } = await getMarkets();
-      setMarkets(list);
-      setIsNode(list.some((market) => market.name === account?.name));
-      setRateLPow(format(parseFloat(raw.stats.spk_rate_lpow) * 100));
-      setRateLDel(format(parseFloat(raw.stats.spk_rate_ldel) * 100));
-      setTokenBalance(
-        format(
-          (wallet.spk +
-            rewardSpk(
-              wallet,
-              raw.stats || {
-                spk_rate_lgov: "0.001",
-                spk_rate_lpow: rateLPow,
-                spk_rate_ldel: rateLDel
-              }
-            )) /
-            1000
-        )
-      );
-    } catch (e) {
-      console.error(e);
-    }
-  };
   const claimRewards = () => {
     if (claiming || !activeUser) {
       return;
@@ -160,11 +113,7 @@ export function WalletSpk({ account }: Props) {
       });
   };
 
-  useEffect(() => {
-    if (activeUser && activeUser?.username !== previousActiveUser?.username) {
-      fetchActiveUserWallet();
-    }
-  }, [activeUser, fetchActiveUserWallet, previousActiveUser?.username]);
+  useMount(() => refetchAccountData());
 
   return (
     <div className="wallet-ecency wallet-spk">
@@ -243,8 +192,8 @@ export function WalletSpk({ account }: Props) {
             isActiveUserWallet={isActiveUserWallet}
             rateLDel={rateLDel}
             rateLPow={rateLPow}
-            larynxGrantedPower={larynxGrantedPower}
-            larynxGrantingPower={larynxGrantingPower}
+            larynxGrantedPower={larynxGrantedBalance}
+            larynxGrantingPower={larynxGrantingBalance}
             headBlock={headBlock}
             powerDownList={powerDownList}
             onStop={() => {
@@ -304,7 +253,10 @@ export function WalletSpk({ account }: Props) {
         show={sendSpkShow}
         setShow={(v) => setSendSpkShow(v)}
         balance={balance}
-        onFinish={() => fetch()}
+        onFinish={() => {
+          refetchAccountData();
+          refetchActiveUserData();
+        }}
       />
 
       <WalletSpkDelegatedPowerDialog

src/app/(dynamicPages)/profile/[username]/_components/wallet-spk/wallet-spk-active-power-down.tsx

@@ -30,6 +30,7 @@ export const WalletSpkActivePowerDown = ({ headBlock, powerUpList, onStop }: Pro
     }
     return Math.floor(seconds) + " seconds";
   };
+
   return (
     <>
       {when(powerUpList) ? (

src/core/react-query/index.ts

@@ -89,7 +89,8 @@ export enum QueryIdentifiers {
   HIVE_HBD_STATS = "hive-hbd-stats",
   GET_ORDER_BOOK = "get-order-book",
   SIMILAR_ENTRIES = "similar-entries",
-  SEARCH_BY_USERNAME = "search-by-username"
+  SEARCH_BY_USERNAME = "search-by-username",
+  SPK_USER_WALLET = "spk-user-wallet"
 }
 
 export function makeQueryClient() {