feat: add hook for confirmed btc balance, inscription callouts

package.json

@@ -10,7 +10,7 @@
     "@ledgerhq/hw-transport-webusb": "^6.27.13",
     "@phosphor-icons/react": "^2.0.10",
     "@react-spring/web": "^9.6.1",
-    "@secretkeylabs/xverse-core": "5.3.0",
+    "@secretkeylabs/xverse-core": "5.3.0-1be3831",
     "@stacks/connect": "^6.10.2",
     "@stacks/encryption": "4.3.5",
     "@stacks/stacks-blockchain-api-types": "6.1.1",

src/app/hooks/queries/useConfirmedBtcBalance.ts

@@ -0,0 +1,30 @@
+import useBtcClient from '@hooks/useBtcClient';
+import { useQuery } from '@tanstack/react-query';
+import useWalletSelector from '../useWalletSelector';
+
+const useConfirmBtcBalance = () => {
+  const { btcAddress } = useWalletSelector();
+  const btcClient = useBtcClient();
+
+  const fetchBtcAddressData = async () => btcClient.getAddressData(btcAddress);
+
+  let confirmedBalance: number = 0;
+
+  const response = 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;
+  }
+
+  return {
+    confirmedBalance,
+  };
+};
+
+export default useConfirmBtcBalance;

src/app/screens/createInscription/index.tsx

@@ -13,6 +13,7 @@ import {
   currencySymbolMap,
   fetchBtcFeeRate,
   getNonOrdinalUtxo,
+  InscriptionErrorCode,
   useInscriptionExecute,
   useInscriptionFees,
   UTXO,
@@ -25,8 +26,9 @@ import { ExternalSatsMethods, MESSAGE_SOURCE } from '@common/types/message-types
 import AccountHeaderComponent from '@components/accountHeader';
 import ConfirmScreen from '@components/confirmScreen';
 import useWalletSelector from '@hooks/useWalletSelector';
-import { getShortTruncatedAddress } from '@utils/helper';
+import { getShortTruncatedAddress, isLedgerAccount } from '@utils/helper';
 
+import useConfirmedBtcBalance from '@hooks/queries/useConfirmedBtcBalance';
 import useBtcClient from '@hooks/useBtcClient';
 import useSeedVault from '@hooks/useSeedVault';
 import Callout from '@ui-library/callout';
@@ -265,13 +267,21 @@ function CreateInscription() {
 
   const [utxos, setUtxos] = useState<UTXO[] | undefined>();
   const [showFeeSettings, setShowFeeSettings] = useState(false);
+  const [showConfirmedBalanceError, setShowConfirmedBalanceError] = useState(false);
   const [feeRate, setFeeRate] = useState(suggestedMinerFeeRate ?? DEFAULT_FEE_RATE);
   const [feeRates, setFeeRates] = useState<BtcFeeResponse>();
   const { getSeed } = useSeedVault();
   const btcClient = useBtcClient();
 
-  const { ordinalsAddress, network, btcAddress, selectedAccount, btcFiatRate, fiatCurrency } =
-    useWalletSelector();
+  const {
+    ordinalsAddress,
+    network,
+    btcAddress,
+    selectedAccount,
+    btcFiatRate,
+    fiatCurrency,
+    btcBalance,
+  } = useWalletSelector();
 
   useEffect(() => {
     getNonOrdinalUtxo(btcAddress, btcClient, requestedNetwork.type).then(setUtxos);
@@ -381,8 +391,11 @@ function CreateInscription() {
     inscriptionValue,
   } = commitValueBreakdown ?? {};
 
+  const { confirmedBalance } = useConfirmedBtcBalance();
+
   const chainFee = (revealChainFee ?? 0) + (commitChainFee ?? 0);
   const totalFee = (revealServiceFee ?? 0) + (externalServiceFee ?? 0) + chainFee;
+
   const showTotalFee = totalFee !== chainFee;
 
   const toFiat = (value: number | string = 0) =>
@@ -392,6 +405,18 @@ function CreateInscription() {
     .plus(new BigNumber(totalInscriptionValue ?? 0))
     .toString();
 
+  const errorCode = feeErrorCode || executeErrorCode;
+
+  const isLoading = utxos === undefined || inscriptionFeesLoading;
+
+  useEffect(() => {
+    const showConfirmError =
+      !isLoading &&
+      errorCode !== InscriptionErrorCode.INSUFFICIENT_FUNDS &&
+      Number(bundlePlusFees) > confirmedBalance;
+    setShowConfirmedBalanceError(!!showConfirmError);
+  }, [confirmedBalance, errorCode, bundlePlusFees, isLoading]);
+
   if (complete && revealTransactionId) {
     const onClose = () => {
       const response = {
@@ -420,9 +445,12 @@ function CreateInscription() {
     return <CompleteScreen txId={revealTransactionId} onClose={onClose} network={network} />;
   }
 
-  const errorCode = feeErrorCode || executeErrorCode;
-
-  const isLoading = utxos === undefined || inscriptionFeesLoading;
+  const disableConfirmButton =
+    !!errorCode ||
+    isExecuting ||
+    showOver24RepeatsError ||
+    showConfirmedBalanceError ||
+    isLedgerAccount(selectedAccount);
 
   return (
     <ConfirmScreen
@@ -431,7 +459,7 @@ function CreateInscription() {
       cancelText={t('CANCEL_BUTTON')}
       confirmText={!errorCode ? t('CONFIRM_BUTTON') : t(`ERRORS.SHORT.${errorCode}`)}
       loading={isExecuting || isLoading}
-      disabled={!!errorCode || isExecuting || showOver24RepeatsError}
+      disabled={disableConfirmButton}
       isError={!!errorCode || showOver24RepeatsError}
     >
       <OuterContainer>
@@ -442,6 +470,12 @@ function CreateInscription() {
           {showOver24RepeatsError && (
             <StyledCallout variant="danger" bodyText={t('ERRORS.TOO_MANY_REPEATS')} />
           )}
+          {showConfirmedBalanceError && (
+            <StyledCallout variant="danger" bodyText={t('ERRORS.UNCONFIRMED_UTXO')} />
+          )}
+          {isLedgerAccount(selectedAccount) && (
+            <StyledCallout variant="danger" bodyText={t('ERRORS.LEDGER_INSCRIPTION')} />
+          )}
           <CardContainer bottomPadding>
             <CardRow>
               <StyledPillLabel>

src/locales/en.json

@@ -982,7 +982,9 @@
         "FAILED_TO_FINALIZE": "The inscription transaction failed to finalize. Please try again or contact support.",
         "SERVER_ERROR": "An unknown server error occurred. Please try again or contact support."
       },
-      "TOO_MANY_REPEATS": "You can only create up to 24 inscriptions in a single request"
+      "TOO_MANY_REPEATS": "You can only create up to 24 inscriptions in a single request",
+      "UNCONFIRMED_UTXO": "Some of your balance consists of unconfirmed outputs. You don't have enough confirmed funds to proceed with this transaction",
+      "LEDGER_INSCRIPTION": "This inscription service is not compatible with Ledger accounts. Please switch to a standard account to inscribe."
     }
   },
   "ERROR_SCREEN": {