diff --git a/packages/next-common/components/assets/transferPopup/index.js b/packages/next-common/components/assets/transferPopup/index.js
index e54b198f7a..51c90945ee 100644
--- a/packages/next-common/components/assets/transferPopup/index.js
+++ b/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" });
diff --git a/packages/next-common/components/assets/transferPopup/useTransferAmount.js b/packages/next-common/components/assets/transferPopup/useTransferAmount.js
deleted file mode 100644
index aa94fc2212..0000000000
--- a/packages/next-common/components/assets/transferPopup/useTransferAmount.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import TransferAmount from "next-common/components/popup/fields/transferAmountField";
-import { checkTransferAmount } from "next-common/utils/checkTransferAmount";
-import { useCallback, useState } from "react";
-
-export default function useTransferAmount({ asset, transferFromAddress }) {
- const [transferAmount, setTransferAmount] = useState("");
-
- const component = (
-
- );
-
- const getCheckedValue = useCallback(() => {
- return checkTransferAmount({
- transferAmount,
- decimals: asset.decimals,
- transferrable: asset.transferrable,
- });
- }, [transferAmount, asset.transferrable, asset.decimals]);
-
- return { value: transferAmount, getCheckedValue, component };
-}
diff --git a/packages/next-common/components/overview/accountInfo/hook/useAccountTransferPopup.jsx b/packages/next-common/components/overview/accountInfo/hook/useAccountTransferPopup.jsx
index c5b98cee0d..ea7c943091 100644
--- a/packages/next-common/components/overview/accountInfo/hook/useAccountTransferPopup.jsx
+++ b/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 && (
- setIsOpen(false)}
- />
+ 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" });
diff --git a/packages/next-common/components/popup/fields/useTransferAmount.js b/packages/next-common/components/popup/fields/useTransferAmount.js
new file mode 100644
index 0000000000..7ff59e1e3c
--- /dev/null
+++ b/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[0], "transferAmount" | "setTransferAmount">} props
+ */
+export function useTransferAmount(props = {}) {
+ const { transferrable, decimals, symbol, transferFromAddress, isLoading } =
+ props;
+
+ const [transferAmount, setTransferAmount] = useState("");
+
+ const component = (
+
+ );
+
+ const getCheckedValue = useCallback(() => {
+ return checkTransferAmount({
+ transferAmount,
+ decimals,
+ transferrable,
+ });
+ }, [transferAmount, decimals, transferrable]);
+
+ return {
+ value: transferAmount,
+ component,
+ getCheckedValue,
+ };
+}
diff --git a/packages/next-common/hooks/assets/useMyNativeAsset.js b/packages/next-common/hooks/assets/useMyNativeAsset.js
index 817fa42b3e..913c4e3bf5 100644
--- a/packages/next-common/hooks/assets/useMyNativeAsset.js
+++ b/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",
},
};
diff --git a/packages/next-common/hooks/balance/useMyBalance.js b/packages/next-common/hooks/balance/useMyBalance.js
deleted file mode 100644
index 23feccf939..0000000000
--- a/packages/next-common/hooks/balance/useMyBalance.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useEffect, useState } from "react";
-import { useSubMyBalanceInfo } from "./useSubMyBalanceInfo";
-
-export function useMyBalance() {
- const balance = useSubMyBalanceInfo();
- const [loading, setLoading] = useState(true);
-
- useEffect(() => {
- if (balance) {
- setLoading(false);
- }
- }, [balance]);
-
- return {
- loading,
- value: balance,
- };
-}
diff --git a/packages/next-common/hooks/balance/useSubBalanceInfo.js b/packages/next-common/hooks/balance/useSubBalanceInfo.js
index 8e265ff3e4..9d481b241b 100644
--- a/packages/next-common/hooks/balance/useSubBalanceInfo.js
+++ b/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,
+ };
}
diff --git a/packages/next-common/hooks/balance/useSubMyBalanceInfo.js b/packages/next-common/hooks/balance/useSubMyBalanceInfo.js
deleted file mode 100644
index 97602d21fe..0000000000
--- a/packages/next-common/hooks/balance/useSubMyBalanceInfo.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import useRealAddress from "next-common/utils/hooks/useRealAddress";
-import { useSubBalanceInfo } from "./useSubBalanceInfo";
-
-export function useSubMyBalanceInfo() {
- const address = useRealAddress();
- return useSubBalanceInfo(address);
-}