From 7e1da7ab8d9969ae09853de2a15c853029c60d4a Mon Sep 17 00:00:00 2001
From: Abdul Haseeb <haseeb4239@gmail.com>
Date: Mon, 18 Dec 2023 11:14:49 +0500
Subject: [PATCH] chore: revert confirmed callout, improved hook

---
 .../confirmBtcTransactionComponent/index.tsx  | 16 +------------
 .../hooks/queries/useConfirmedBtcBalance.ts   | 24 ++++++++++++-------
 src/app/screens/createInscription/index.tsx   | 17 +++++--------
 3 files changed, 22 insertions(+), 35 deletions(-)

diff --git a/src/app/components/confirmBtcTransactionComponent/index.tsx b/src/app/components/confirmBtcTransactionComponent/index.tsx
index 186de6387..1a123ea85 100644
--- a/src/app/components/confirmBtcTransactionComponent/index.tsx
+++ b/src/app/components/confirmBtcTransactionComponent/index.tsx
@@ -4,7 +4,6 @@ import ActionButton from '@components/button';
 import RecipientComponent from '@components/recipientComponent';
 import TransactionSettingAlert from '@components/transactionSetting';
 import TransferFeeView from '@components/transferFeeView';
-import useConfirmBtcBalance from '@hooks/queries/useConfirmedBtcBalance';
 import useNftDataSelector from '@hooks/stores/useNftDataSelector';
 import useBtcClient from '@hooks/useBtcClient';
 import useOrdinalsByAddress from '@hooks/useOrdinalsByAddress';
@@ -149,9 +148,7 @@ function ConfirmBtcTransactionComponent({
   const [signedTx, setSignedTx] = useState(signedTxHex);
   const [total, setTotal] = useState<BigNumber>(new BigNumber(0));
   const [showFeeWarning, setShowFeeWarning] = useState(false);
-  const [showUnconfirmedWarning, setShowUnconfirmedWarning] = useState(false);
   const btcClient = useBtcClient();
-  const { confirmedBalance } = useConfirmBtcBalance();
 
   const bundle = selectedSatBundle ?? ordinalBundle ?? undefined;
   const {
@@ -275,10 +272,7 @@ function ConfirmBtcTransactionComponent({
       feeMultipliers &&
       currentFee.isGreaterThan(new BigNumber(feeMultipliers.thresholdHighSatsFee));
     setShowFeeWarning(!!isFeeHigh);
-
-    const shouldShowUnconfirmedWarning = currentFee.isGreaterThan(confirmedBalance);
-    setShowUnconfirmedWarning(shouldShowUnconfirmedWarning);
-  }, [currentFee, feeMultipliers, confirmedBalance]);
+  }, [currentFee, feeMultipliers]);
 
   const onAdvancedSettingClick = () => {
     setShowFeeSettings(true);
@@ -363,14 +357,6 @@ function ConfirmBtcTransactionComponent({
             <Callout bodyText={t('CONFIRM_TRANSACTION.HIGH_FEE_WARNING_TEXT')} variant="warning" />
           </CalloutContainer>
         )}
-        {showUnconfirmedWarning && (
-          <CalloutContainer>
-            <Callout
-              bodyText={t('CONFIRM_TRANSACTION.UNCONFIRMED_BALANCE_WARNING')}
-              variant="warning"
-            />
-          </CalloutContainer>
-        )}
         {/* TODO tim: refactor this not to use children. it should be just another prop */}
         {children}
         <ReviewTransactionText centerAligned={currencyType === 'Ordinal'}>
diff --git a/src/app/hooks/queries/useConfirmedBtcBalance.ts b/src/app/hooks/queries/useConfirmedBtcBalance.ts
index aeb0d9b54..34c869813 100644
--- a/src/app/hooks/queries/useConfirmedBtcBalance.ts
+++ b/src/app/hooks/queries/useConfirmedBtcBalance.ts
@@ -1,5 +1,6 @@
 import useBtcClient from '@hooks/useBtcClient';
 import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
 import useWalletSelector from '../useWalletSelector';
 
 const useConfirmBtcBalance = () => {
@@ -8,22 +9,27 @@ const useConfirmBtcBalance = () => {
 
   const fetchBtcAddressData = async () => btcClient.getAddressData(btcAddress);
 
-  let confirmedBalance = 0;
-
-  const response = useQuery({
+  const { data, isLoading, isError, error } = useQuery({
     queryKey: ['btc-address-data'],
     queryFn: fetchBtcAddressData,
   });
 
-  const chainStats = response.data?.chain_stats;
-  const mempoolStats = response.data?.mempool_stats;
-  if (chainStats && mempoolStats) {
-    confirmedBalance =
-      chainStats.funded_txo_sum - chainStats.spent_txo_sum - mempoolStats.spent_txo_sum;
-  }
+  const confirmedBalance = useMemo(() => {
+    if (!isLoading && !isError && data) {
+      const chainStats = data.chain_stats;
+      const mempoolStats = data.mempool_stats;
+
+      if (chainStats && mempoolStats) {
+        return chainStats.funded_txo_sum - chainStats.spent_txo_sum - mempoolStats.spent_txo_sum;
+      }
+    }
+    return undefined;
+  }, [data, isLoading, isError]);
 
   return {
     confirmedBalance,
+    isLoading,
+    error,
   };
 };
 
diff --git a/src/app/screens/createInscription/index.tsx b/src/app/screens/createInscription/index.tsx
index 9ccb337bb..15dd535aa 100644
--- a/src/app/screens/createInscription/index.tsx
+++ b/src/app/screens/createInscription/index.tsx
@@ -274,15 +274,8 @@ function CreateInscription() {
   const { getSeed } = useSeedVault();
   const btcClient = useBtcClient();
 
-  const {
-    ordinalsAddress,
-    network,
-    btcAddress,
-    selectedAccount,
-    btcFiatRate,
-    fiatCurrency,
-    btcBalance,
-  } = useWalletSelector();
+  const { ordinalsAddress, network, btcAddress, selectedAccount, btcFiatRate, fiatCurrency } =
+    useWalletSelector();
 
   useEffect(() => {
     getNonOrdinalUtxo(btcAddress, btcClient, requestedNetwork.type).then(setUtxos);
@@ -392,7 +385,7 @@ function CreateInscription() {
     inscriptionValue,
   } = commitValueBreakdown ?? {};
 
-  const { confirmedBalance } = useConfirmedBtcBalance();
+  const { confirmedBalance, isLoading: confirmedBalanceLoading } = useConfirmedBtcBalance();
 
   const chainFee = (revealChainFee ?? 0) + (commitChainFee ?? 0);
   const totalFee = (revealServiceFee ?? 0) + (externalServiceFee ?? 0) + chainFee;
@@ -413,10 +406,12 @@ function CreateInscription() {
   useEffect(() => {
     const showConfirmError =
       !isLoading &&
+      !confirmedBalanceLoading &&
       errorCode !== InscriptionErrorCode.INSUFFICIENT_FUNDS &&
+      confirmedBalance !== undefined &&
       Number(bundlePlusFees) > confirmedBalance;
     setShowConfirmedBalanceError(!!showConfirmError);
-  }, [confirmedBalance, errorCode, bundlePlusFees, isLoading]);
+  }, [confirmedBalance, errorCode, bundlePlusFees, isLoading, confirmedBalanceLoading]);
 
   if (complete && revealTransactionId) {
     const onClose = () => {