From 7f838c2f8d5594a255c6c25596b3f5b770bf14e7 Mon Sep 17 00:00:00 2001
From: Fara Woolf <fara@trustmachines.co>
Date: Fri, 27 Dec 2024 12:07:08 -0500
Subject: [PATCH] refactor: stx available balance

---
 src/app/common/hooks/balance/use-balances.tsx | 25 +++++++++++----
 .../pages/home/components/account-actions.tsx | 32 +++----------------
 .../form/stacks/stacks-common-send-form.tsx   |  1 -
 .../ui/components/account/account.card.tsx    |  2 +-
 4 files changed, 23 insertions(+), 37 deletions(-)

diff --git a/src/app/common/hooks/balance/use-balances.tsx b/src/app/common/hooks/balance/use-balances.tsx
index f92a1bd7b1..60272a2207 100644
--- 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
index 3148fdd321..e58bfd57b6 100644
--- 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,28 +53,8 @@ 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}
@@ -86,8 +62,8 @@ export function AccountActions() {
             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
index e321858fdb..47d102f3e8 100644
--- 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
index 79c452a812..a64d8dbd36 100644
--- 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;