fix: stx available balance issues

leather-io · Jan 17, 2025 · ec6d4e3 · ec6d4e3
1 parent 6a94dbe
commit ec6d4e3
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 23 deletions.
diff --git a/src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item.tsx b/src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item.tsx
@@ -17,6 +17,7 @@ interface StxCryptoAssetItemProps {
   isPrivate?: boolean;
   onSelectAsset?(symbol: string): void;
 }
+
 export function StxCryptoAssetItem({
   balance,
   isLoading,
@@ -25,26 +26,24 @@ export function StxCryptoAssetItem({
 }: StxCryptoAssetItemProps) {
   const marketData = useCryptoCurrencyMarketDataMeanAverage('STX');
 
-  const { availableBalance, lockedBalance } = balance;
+  const { lockedBalance, totalBalance } = balance;
   const showLockedBalance = lockedBalance.amount.isGreaterThan(0) && !isPrivate;
 
   const fiatLockedBalance = i18nFormatCurrency(
     baseCurrencyAmountInQuote(lockedBalance, marketData)
   );
-  const fiatAvailableBalance = i18nFormatCurrency(
-    baseCurrencyAmountInQuote(availableBalance, marketData)
-  );
+  const fiatTotalBalance = i18nFormatCurrency(baseCurrencyAmountInQuote(totalBalance, marketData));
   const titleRightBulletInfo = (
     <styled.span>{formatMoneyWithoutSymbol(lockedBalance)} locked</styled.span>
   );
   const captionRightBulletInfo = <Caption>{fiatLockedBalance} locked</Caption>;
 
   return (
     <CryptoAssetItemLayout
-      availableBalance={balance.availableBalance}
+      availableBalance={totalBalance}
       captionLeft="STX"
       captionRightBulletInfo={showLockedBalance && captionRightBulletInfo}
-      fiatBalance={fiatAvailableBalance}
+      fiatBalance={fiatTotalBalance}
       icon={<StxAvatarIcon />}
       isLoading={isLoading}
       isPrivate={isPrivate}

diff --git a/src/app/pages/send/send-crypto-asset-form/form/stx/stx-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/stx/stx-send-form.tsx
@@ -17,7 +17,7 @@ const symbol = 'STX' satisfies CryptoCurrency;
 export function StxSendForm() {
   const stxMarketData = useCryptoCurrencyMarketDataMeanAverage(symbol);
   const {
-    availableUnlockedBalance,
+    availableBalance,
     initialValues,
     previewTransaction,
     sendMaxBalance,
@@ -27,13 +27,10 @@ export function StxSendForm() {
 
   const amountField = (
     <AmountField
-      balance={availableUnlockedBalance}
+      balance={availableBalance}
       switchableAmount={<SendFiatValue marketData={stxMarketData} assetSymbol={symbol} />}
       bottomInputOverlay={
-        <SendMaxButton
-          balance={availableUnlockedBalance}
-          sendMaxBalance={sendMaxBalance.toString()}
-        />
+        <SendMaxButton balance={availableBalance} sendMaxBalance={sendMaxBalance.toString()} />
       }
     />
   );
@@ -53,7 +50,7 @@ export function StxSendForm() {
           amountField={amountField}
           selectedAssetField={selectedAssetField}
           fees={fees}
-          availableTokenBalance={availableUnlockedBalance}
+          availableTokenBalance={availableBalance}
         />
       </Content>
     </>

diff --git a/src/app/pages/send/send-crypto-asset-form/form/stx/use-stx-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/stx/use-stx-send-form.tsx
@@ -7,9 +7,9 @@ import { STX_DECIMALS } from '@leather.io/constants';
 import {
   useCalculateStacksTxFees,
   useStacksValidateFeeByNonce,
-  useStxAvailableUnlockedBalance,
+  useStxCryptoAssetBalance,
 } from '@leather.io/query';
-import { convertAmountToBaseUnit } from '@leather.io/utils';
+import { convertAmountToBaseUnit, createMoney } from '@leather.io/utils';
 
 import { logger } from '@shared/logger';
 import { StacksSendFormValues } from '@shared/models/form.model';
@@ -37,34 +37,38 @@ export function useStxSendForm() {
   const sendFormNavigate = useSendFormNavigate();
   const address = useCurrentStacksAccountAddress();
   const { changeFeeByNonce } = useStacksValidateFeeByNonce(address);
-  const availableUnlockedBalance = useStxAvailableUnlockedBalance(address);
+
+  // get stx balance
+  const { filteredBalanceQuery } = useStxCryptoAssetBalance(address);
+  const { data: balance } = filteredBalanceQuery;
+  const availableBalance = balance?.availableUnlockedBalance ?? createMoney(0, 'STX');
 
   const sendMaxBalance = useMemo(
     () =>
       convertAmountToBaseUnit(
-        availableUnlockedBalance.amount.minus(stxFees?.estimates[1].fee.amount || 0),
+        availableBalance.amount.minus(stxFees?.estimates[1].fee.amount || 0),
         STX_DECIMALS
       ),
-    [availableUnlockedBalance.amount, stxFees?.estimates]
+    [availableBalance.amount, stxFees?.estimates]
   );
 
   const { initialValues, checkFormValidation, recipient, memo, nonce } = useStacksCommonSendForm({
     symbol: 'STX',
-    availableTokenBalance: availableUnlockedBalance,
+    availableTokenBalance: availableBalance,
   });
 
   return {
-    availableUnlockedBalance,
+    availableBalance,
     initialValues,
     onFormStateChange,
     sendMaxBalance,
     stxFees,
 
     validationSchema: yup.object({
-      amount: stxAmountValidator(availableUnlockedBalance).concat(
-        stxAvailableBalanceValidator(availableUnlockedBalance)
+      amount: stxAmountValidator(availableBalance).concat(
+        stxAvailableBalanceValidator(availableBalance)
       ),
-      fee: stxFeeValidator(availableUnlockedBalance),
+      fee: stxFeeValidator(availableBalance),
       recipient,
       memo,
       nonce,