refactor: stx available balance

leather-io · Dec 27, 2024 · 7f838c2 · 7f838c2
1 parent 7d28486
commit 7f838c2
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 37 deletions.
diff --git a/src/app/common/hooks/balance/use-balances.tsx b/src/app/common/hooks/balance/use-balances.tsx
@@ -32,7 +32,10 @@ export function useBalances({ btcAddress, stxAddress }: UseBalanceArgs) {
     isPending: isPendingStxBalance,
   } = filteredBalanceQuery;
 
-  const stxBalance = balance ? balance.totalBalance : createMoney(0, 'STX');
+  const totalStxBalance = balance ? balance.totalBalance : createMoney(0, 'STX');
+  const availableUnlockedStxBalance = balance
+    ? balance.availableUnlockedBalance
+    : createMoney(0, 'STX');
 
   // get btc balance
   const {
@@ -47,7 +50,12 @@ export function useBalances({ btcAddress, stxAddress }: UseBalanceArgs) {
 
   return useMemo(() => {
     // calculate total balance
-    const stxUsdAmount = baseCurrencyAmountInQuote(stxBalance, stxMarketData);
+    const totalStxUsdAmount = baseCurrencyAmountInQuote(totalStxBalance, stxMarketData);
+    // calculate available unlocked balance
+    const availableUnlockedStxUsdAmount = baseCurrencyAmountInQuote(
+      availableUnlockedStxBalance,
+      stxMarketData
+    );
 
     const availableBtcUsdAmount = baseCurrencyAmountInQuote(
       btcBalance.availableBalance,
@@ -57,13 +65,15 @@ export function useBalances({ btcAddress, stxAddress }: UseBalanceArgs) {
     const totalBtcUsdAmount = baseCurrencyAmountInQuote(btcBalance.totalBalance, btcMarketData);
 
     const totalBalance = {
-      ...stxUsdAmount,
-      amount: stxUsdAmount.amount.plus(totalBtcUsdAmount.amount).plus(sip10BalanceUsd.amount),
+      ...totalStxUsdAmount,
+      amount: totalStxUsdAmount.amount.plus(totalBtcUsdAmount.amount).plus(sip10BalanceUsd.amount),
     };
 
     const availableBalance = {
-      ...stxUsdAmount,
-      amount: stxUsdAmount.amount.plus(availableBtcUsdAmount.amount).plus(sip10BalanceUsd.amount),
+      ...availableUnlockedStxUsdAmount,
+      amount: availableUnlockedStxUsdAmount.amount
+        .plus(availableBtcUsdAmount.amount)
+        .plus(sip10BalanceUsd.amount),
     };
 
     return {
@@ -86,8 +96,9 @@ export function useBalances({ btcAddress, stxAddress }: UseBalanceArgs) {
         isLoadingAdditionalDataStxBalance || isLoadingAdditionalDataBtcBalance,
     };
   }, [
-    stxBalance,
+    totalStxBalance,
     stxMarketData,
+    availableUnlockedStxBalance,
     btcBalance.availableBalance,
     btcBalance.totalBalance,
     btcMarketData,

diff --git a/src/app/pages/home/components/account-actions.tsx b/src/app/pages/home/components/account-actions.tsx
@@ -1,10 +1,8 @@
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { ChainID } from '@stacks/transactions';
 import { HomePageSelectors } from '@tests/selectors/home.selectors';
 import { Box, Flex } from 'leather-styles/jsx';
 
-import { whenStacksChainId } from '@leather.io/stacks';
 import { ArrowsRepeatLeftRightIcon, CreditCardIcon, IconButton, InboxIcon } from '@leather.io/ui';
 
 import { RouteUrls } from '@shared/route-urls';
@@ -16,7 +14,6 @@ import {
 import { useCurrentAccountNativeSegwitIndexZeroSignerNullable } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';
-import { useCurrentNetwork } from '@app/store/networks/networks.selectors';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 import { SendButton } from './send-button';
@@ -29,7 +26,6 @@ export function AccountActions() {
   const stacksAccount = useCurrentStacksAccount();
   const currentBtcSigner = useCurrentAccountNativeSegwitIndexZeroSignerNullable();
   const btcAccount = currentBtcSigner?.address;
-  const currentNetwork = useCurrentNetwork();
   const { isTestnet } = useCurrentNetworkState();
 
   const swapsEnabled = useConfigSwapsEnabled();
@@ -57,37 +53,17 @@ export function AccountActions() {
           onClick={() => navigate(RouteUrls.FundChooseCurrency)}
         />
       )}
-      {whenStacksChainId(currentNetwork.chain.stacks.chainId)({
-        [ChainID.Mainnet]: (
-          <BasicTooltip
-            label={swapsEnabled ? '' : <SwapsDisabledTooltipLabel />}
-            side="left"
-            asChild
-          >
-            <Box display="flex">
-              <IconButton
-                data-testid={HomePageSelectors.SwapBtn}
-                disabled={swapsBtnDisabled}
-                icon={<ArrowsRepeatLeftRightIcon />}
-                label="Swap"
-                onClick={() =>
-                  navigate(RouteUrls.Swap.replace(':base', 'STX').replace(':quote', ''))
-                }
-              />
-            </Box>
-          </BasicTooltip>
-        ),
-        // Temporary for sBTC testing
-        [ChainID.Testnet]: (
+      <BasicTooltip label={swapsEnabled ? '' : <SwapsDisabledTooltipLabel />} side="left" asChild>
+        <Box display="flex">
           <IconButton
             data-testid={HomePageSelectors.SwapBtn}
             disabled={swapsBtnDisabled}
             icon={<ArrowsRepeatLeftRightIcon />}
             label="Swap"
             onClick={() => navigate(RouteUrls.Swap.replace(':base', 'STX').replace(':quote', ''))}
           />
-        ),
-      })}
+        </Box>
+      </BasicTooltip>
     </Flex>
   );
 }
diff --git a/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-common-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-common-send-form.tsx
@@ -44,7 +44,6 @@ export function StacksCommonSendForm({
   amountField,
   selectedAssetField,
   fees,
-
   availableTokenBalance,
 }: StacksCommonSendFormProps) {
   const navigate = useNavigate();

diff --git a/src/app/ui/components/account/account.card.tsx b/src/app/ui/components/account/account.card.tsx
@@ -21,7 +21,7 @@ import { PrivateTextLayout } from '@app/components/privacy/private-text.layout';
 import { BasicTooltip } from '../tooltip/basic-tooltip';
 
 const availableBalanceTooltipLabel =
-  'Total balance minus locked amounts, outbound transfers, protected collectibles and uneconomical UTXOs';
+  'Total balance minus locked amounts, outbound transfers, protected collectibles and uneconomical UTXOs.';
 
 interface AccountCardProps {
   name: string;