From 83d3cd0389e6481fb03083d6b395a5f519dcb735 Mon Sep 17 00:00:00 2001 From: 2nthony Date: Thu, 26 Sep 2024 14:52:47 +0800 Subject: [PATCH 1/6] refactor balance hooks --- .../next-common/hooks/balance/useMyBalance.js | 18 -------- .../hooks/balance/useSubBalanceInfo.js | 41 ++++++++----------- .../hooks/balance/useSubMyBalanceInfo.js | 7 ---- 3 files changed, 17 insertions(+), 49 deletions(-) delete mode 100644 packages/next-common/hooks/balance/useMyBalance.js delete mode 100644 packages/next-common/hooks/balance/useSubMyBalanceInfo.js 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); -} From 19f42da2ee8211c434ee73f7da50509ffc32c853 Mon Sep 17 00:00:00 2001 From: 2nthony Date: Thu, 26 Sep 2024 14:52:59 +0800 Subject: [PATCH 2/6] revert use my native asset hook logic --- .../next-common/hooks/assets/useMyNativeAsset.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) 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", }, }; From 82a51e2f35889d07a02d4988a97a9648c3654966 Mon Sep 17 00:00:00 2001 From: 2nthony Date: Thu, 26 Sep 2024 16:26:07 +0800 Subject: [PATCH 3/6] useTransferAmount field --- .../popup/fields/useTransferAmount.js | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 packages/next-common/components/popup/fields/useTransferAmount.js 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, + }; +} From 10eb8898530e3b1bada120a3315fe4772e1dbcc0 Mon Sep 17 00:00:00 2001 From: 2nthony Date: Thu, 26 Sep 2024 16:31:33 +0800 Subject: [PATCH 4/6] refactor useAccountTransferPopup --- .../hook/useAccountTransferPopup.jsx | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) 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" }); From 6af88b22e9397fe5ecf977bb2a00ba85e106acee Mon Sep 17 00:00:00 2001 From: 2nthony Date: Thu, 26 Sep 2024 16:34:29 +0800 Subject: [PATCH 5/6] refactor asset transfer popup --- .../components/assets/transferPopup/index.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) 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" }); From 3929d57bb4624197411be02afe508e778812262d Mon Sep 17 00:00:00 2001 From: 2nthony Date: Thu, 26 Sep 2024 16:35:13 +0800 Subject: [PATCH 6/6] delete --- .../assets/transferPopup/useTransferAmount.js | 28 ------------------- 1 file changed, 28 deletions(-) delete mode 100644 packages/next-common/components/assets/transferPopup/useTransferAmount.js 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 }; -}