refactor use balance related hooks

packages/next-common/components/assets/transferPopup/index.js

@@ -6,7 +6,7 @@ import { useDispatch } from "react-redux";
 import { newErrorToast } from "next-common/store/reducers/toastSlice";
 import { useContextApi } from "next-common/context/api";
 import useRealAddress from "next-common/utils/hooks/useRealAddress";
-import useTransferAmount from "./useTransferAmount";
+import { useTransferAmount } from "next-common/components/popup/fields/useTransferAmount";
 import useAddressComboField from "next-common/components/preImages/createPreimagePopup/fields/useAddressComboField";
 import Signer from "next-common/components/popup/fields/signerField";
 
@@ -18,7 +18,13 @@ function PopupContent() {
   const {
     getCheckedValue: getCheckedTransferAmount,
     component: transferAmountField,
-  } = useTransferAmount({ asset, transferFromAddress: address });
+  } = useTransferAmount({
+    transferrable: asset.transferrable,
+    decimals: asset.decimals,
+    symbol: asset.symbol,
+    transferFromAddress: address,
+  });
+
   const { value: transferToAddress, component: transferToAddressField } =
     useAddressComboField({ title: "To" });
 

packages/next-common/components/overview/accountInfo/hook/useAccountTransferPopup.jsx

@@ -8,19 +8,16 @@ import { newErrorToast } from "next-common/store/reducers/toastSlice";
 import useRealAddress from "next-common/utils/hooks/useRealAddress";
 import { useCallback, useState } from "react";
 import { useDispatch } from "react-redux";
-import useTransferAmount from "next-common/components/assets/transferPopup/useTransferAmount";
 import AdvanceSettings from "next-common/components/summary/newProposalQuickStart/common/advanceSettings";
 import ExistentialDeposit from "next-common/components/popup/fields/existentialDepositField";
-import { useMyBalance } from "next-common/hooks/balance/useMyBalance";
+import { useSubBalanceInfo } from "next-common/hooks/balance/useSubBalanceInfo";
+import { useChainSettings } from "next-common/context/chain";
+import { useTransferAmount } from "next-common/components/popup/fields/useTransferAmount";
 
 export function useAccountTransferPopup() {
-  const balance = useMyBalance();
   const [isOpen, setIsOpen] = useState(false);
   const component = isOpen && (
-    <AccountTransferPopup
-      balance={balance?.value}
-      onClose={() => setIsOpen(false)}
-    />
+    <AccountTransferPopup onClose={() => setIsOpen(false)} />
   );
 
   return {
@@ -30,14 +27,22 @@ export function useAccountTransferPopup() {
 }
 
 function PopupContent() {
-  const { balance, onClose } = usePopupParams();
-  const api = useContextApi();
+  const { onClose } = usePopupParams();
+  const { decimals, symbol } = useChainSettings();
   const address = useRealAddress();
+  const { value: balance, loading } = useSubBalanceInfo(address);
+  const api = useContextApi();
   const dispatch = useDispatch();
   const {
     getCheckedValue: getCheckedTransferAmount,
     component: transferAmountField,
-  } = useTransferAmount({ asset: balance, transferFromAddress: address });
+  } = useTransferAmount({
+    transferrable: balance?.transferrable,
+    decimals,
+    symbol,
+    isLoading: loading,
+    transferFromAddress: address,
+  });
   const { value: transferToAddress, component: transferToAddressField } =
     useAddressComboField({ title: "To" });
 

packages/next-common/components/popup/fields/useTransferAmount.js

@@ -0,0 +1,39 @@
+import { useCallback, useState } from "react";
+import TransferAmount from "./transferAmountField";
+import { checkTransferAmount } from "next-common/utils/checkTransferAmount";
+
+/**
+ * @param {Omit<Parameters<typeof TransferAmount>[0], "transferAmount" | "setTransferAmount">} props
+ */
+export function useTransferAmount(props = {}) {
+  const { transferrable, decimals, symbol, transferFromAddress, isLoading } =
+    props;
+
+  const [transferAmount, setTransferAmount] = useState("");
+
+  const component = (
+    <TransferAmount
+      transferrable={transferrable}
+      decimals={decimals}
+      symbol={symbol}
+      isLoading={isLoading}
+      transferFromAddress={transferFromAddress}
+      transferAmount={transferAmount}
+      setTransferAmount={setTransferAmount}
+    />
+  );
+
+  const getCheckedValue = useCallback(() => {
+    return checkTransferAmount({
+      transferAmount,
+      decimals,
+      transferrable,
+    });
+  }, [transferAmount, decimals, transferrable]);
+
+  return {
+    value: transferAmount,
+    component,
+    getCheckedValue,
+  };
+}

packages/next-common/hooks/assets/useMyNativeAsset.js

@@ -1,12 +1,20 @@
-import { useMyBalance } from "../balance/useMyBalance";
+import useRealAddress from "next-common/utils/hooks/useRealAddress";
+import { useSubBalanceInfo } from "../balance/useSubBalanceInfo";
+import { useChainSettings } from "next-common/context/chain";
 
 export function useMyNativeAsset() {
-  const { value: balance, loading } = useMyBalance();
+  const { decimals, symbol, name } = useChainSettings();
+
+  const address = useRealAddress();
+  const { value: balance, loading } = useSubBalanceInfo(address);
 
   return {
     loading,
     value: {
       ...balance,
+      decimals,
+      symbol,
+      name,
       type: "native",
     },
   };

packages/next-common/hooks/balance/useSubBalanceInfo.js

@@ -1,36 +1,29 @@
 import useQueryExistentialDeposit from "next-common/utils/hooks/chain/useQueryExistentialDeposit";
-import { useMemo } from "react";
 import useSubStorage from "../common/useSubStorage";
 import calcTransferable from "next-common/utils/account/transferable";
-import { useChainSettings } from "next-common/context/chain";
 
 export function useSubBalanceInfo(address) {
-  const { decimals, symbol, name } = useChainSettings();
   const existentialDeposit = useQueryExistentialDeposit();
 
-  const { result } = useSubStorage("system", "account", [address]);
-  const accountInfo = result?.data?.toJSON();
+  const { result, loading } = useSubStorage("system", "account", [address]);
+  const info = result?.data?.toJSON();
 
-  return useMemo(() => {
-    const info = {
-      balance: 0,
-      transferrable: 0,
-      decimals,
-      symbol,
-      name,
+  if (!info) {
+    return {
+      value: null,
+      loading,
     };
+  }
 
-    if (!accountInfo) {
-      return info;
-    }
+  const { free, reserved } = info;
+  const balance = (free + reserved).toString();
+  const transferrable = calcTransferable(info, existentialDeposit);
 
-    const { free, reserved } = accountInfo;
-    const balance = (free + reserved).toString();
-    const transferrable = calcTransferable(accountInfo, existentialDeposit);
-
-    info.balance = balance;
-    info.transferrable = transferrable;
-
-    return info;
-  }, [accountInfo, decimals, existentialDeposit, name, symbol]);
+  return {
+    value: {
+      balance,
+      transferrable,
+    },
+    loading,
+  };
 }