feat: modified bitcoin contracts balance fetching

package.json

@@ -122,7 +122,7 @@
   "dependencies": {
     "@bitcoinerlab/secp256k1": "1.0.2",
     "@coinbase/cbpay-js": "1.0.2",
-    "@dlc-link/dlc-tools": "1.0.7",
+    "@dlc-link/dlc-tools": "1.0.9",
     "@fungible-systems/zone-file": "2.0.0",
     "@hirosystems/token-metadata-api-client": "1.1.0",
     "@ledgerhq/hw-transport-webusb": "6.27.19",

src/app/common/hooks/use-bitcoin-contracts.ts

@@ -29,7 +29,6 @@ import { useCurrentNetwork } from '@app/store/networks/networks.selectors';
 import { initialSearchParams } from '../initial-search-params';
 import { i18nFormatCurrency } from '../money/format-money';
 import { satToBtc } from '../money/unit-conversion';
-import { useConvertCryptoCurrencyToFiatAmount } from './use-convert-to-fiat-amount';
 import { useDefaultRequestParams } from './use-default-request-search-params';
 
 export interface SimplifiedBitcoinContract {
@@ -211,15 +210,13 @@ export function useBitcoinContracts() {
   async function getAllSignedBitcoinContracts(): Promise<BitcoinContractListItem[] | undefined> {
     const bitcoinContractInterface = await getBitcoinContractInterface();
 
-    console.log('bitcoinContractInterface', bitcoinContractInterface?.get_options())
     if (!bitcoinContractInterface) return;
 
     const bitcoinContracts = await bitcoinContractInterface.get_contracts();
     const signedBitcoinContracts = bitcoinContracts.filter(
       (bitcoinContract: BitcoinContractListItem) => bitcoinContract.state === 'Signed'
     );
 
-    console.log('signedBitcoinContracts', signedBitcoinContracts)
     return signedBitcoinContracts;
   }
 
@@ -241,7 +238,6 @@ export function useBitcoinContracts() {
   }
 
   async function sumBitcoinContractCollateralAmounts(): Promise<Money> {
-    console.log('sumBitcoinContractCollateralAmounts')
     let bitcoinContractsCollateralSum = 0;
     const bitcoinContracts = await getAllSignedBitcoinContracts();
     if (!bitcoinContracts) return createMoneyFromDecimal(0, 'BTC');

src/app/common/money/calculate-money.ts

@@ -9,7 +9,6 @@ import { formatMoney } from './format-money';
 import { isMoney } from './is-money';
 
 export function baseCurrencyAmountInQuote(quantity: Money, { pair, price }: MarketData) {
-  console.log(quantity, pair, price)
   if (quantity.symbol !== pair.base)
     throw new Error(
       `Cannot calculate value of ${formatMoney(quantity)} with market pair of ${formatMarketPair(
@@ -42,7 +41,6 @@ export function convertToMoneyTypeWithDefaultOfZero(
 
 // ts-unused-exports:disable-next-line
 export function convertAmountToBaseUnit(num: Money | BigNumber, decimals?: number) {
-  console.log(num, decimals)
   if (isMoney(num)) return num.amount.shiftedBy(-num.decimals);
   if (!isNumber(decimals)) throw new Error('Must define decimal of given currency');
   return num.shiftedBy(-decimals);

src/app/common/money/format-money.ts

@@ -15,7 +15,6 @@ export function formatMoneyPadded({ amount, symbol, decimals }: Money) {
 }
 
 export function i18nFormatCurrency(quantity: Money, locale = 'en-US') {
-  console.log(quantity)
   if (quantity.symbol !== 'USD') throw new Error('Cannot format non-USD amounts');
   const currencyFormatter = new Intl.NumberFormat(locale, { style: 'currency', currency: 'USD' });
 

src/app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point-layout.tsx

@@ -26,6 +26,8 @@ export function BitcoinContractEntryPointLayout(props: BitcoinContractEntryPoint
     : balance.amount.toString();
   const formattedBalance = formatBalance(amount);
 
+  if (Number(balance.amount) === 0) return false;
+
   return (
     <Flex cursor={cursor} onClick={onClick} outline={0}>
       <Flag align="middle" img={icon} spacing="space.04" width="100%">

src/app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point.tsx

@@ -2,31 +2,29 @@ import { useNavigate } from 'react-router-dom';
 
 import { RouteUrls } from '@shared/route-urls';
 
-import { useBitcoinContractsBalanceQuery } from '@app/query/stacks/balance/bitcoin-contracts-balance.query';
+import { useGetBitcoinContractsBalance } from '@app/query/bitcoin/balance/bitcoin-contracts-balance.hooks';
 import { BitcoinContractIcon } from '@app/ui/components/icons/bitcoin-contract-icon';
 
-import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/market-data.hooks';
-import { createMoney } from '@shared/models/money.model';
 import { BitcoinContractEntryPointLayout } from './bitcoin-contract-entry-point-layout';
 
 export function BitcoinContractEntryPoint() {
   const navigate = useNavigate();
 
-  const { data: bitcoinContactsBalance, isLoading, refetch } = useBitcoinContractsBalanceQuery();
-
+  const { bitcoinContractsBalance, bitcoinContractsBalanceInUSD, isLoading } =
+    useGetBitcoinContractsBalance();
 
   function onClick() {
     navigate(RouteUrls.BitcoinContractList);
   }
 
   return (
-      <BitcoinContractEntryPointLayout
-        isLoading={isLoading}
-        balance={bitcoinContactsBalance ? bitcoinContactsBalance : createMoney(0, 'BTC')}
-        caption={bitcoinContactsBalance ? bitcoinContactsBalance.symbol : 'BTC'}
-        icon={<BitcoinContractIcon />}
-        // usdBalance={btcUsdBalance}
-        onClick={onClick}
-      />
-    )
+    <BitcoinContractEntryPointLayout
+      isLoading={isLoading}
+      balance={bitcoinContractsBalance}
+      caption={bitcoinContractsBalance.symbol}
+      icon={<BitcoinContractIcon />}
+      usdBalance={bitcoinContractsBalanceInUSD}
+      onClick={onClick}
+    />
+  );
 }

src/app/features/asset-list/asset-list.tsx

@@ -14,7 +14,6 @@ import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accoun
 import { useCurrentNetwork } from '@app/store/networks/networks.selectors';
 import { BtcIcon } from '@app/ui/components/icons/btc-icon';
 
-import { useBitcoinContractsBalance } from '@app/query/stacks/balance/bitcoin-contracts-balance.query';
 import { Collectibles } from '../collectibles/collectibles';
 import { PendingBrc20TransferList } from '../pending-brc-20-transfers/pending-brc-20-transfers';
 import { BitcoinFungibleTokenAssetList } from './components/bitcoin-fungible-tokens-asset-list';

src/app/query/bitcoin/balance/bitcoin-contracts-balance.hooks.ts

@@ -0,0 +1,38 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import BigNumber from 'bignumber.js';
+
+import { createMoney } from '@shared/models/money.model';
+import { isUndefined } from '@shared/utils';
+
+import { i18nFormatCurrency } from '@app/common/money/format-money';
+import { useCalculateBitcoinFiatValue } from '@app/query/common/market-data/market-data.hooks';
+
+import { useBitcoinContractsBalanceQuery } from './bitcoin-contracts-balance.query';
+
+export function useGetBitcoinContractsBalance() {
+  const calculateFiatValue = useCalculateBitcoinFiatValue();
+  const { data: bitcoinContractsBalance, isLoading } = useBitcoinContractsBalanceQuery();
+  const [bitcoinContractsBalanceInUSD, setBitcoinContractsBalanceInUSD] = useState<string>('0');
+
+  useEffect(() => {
+    if (isUndefined(bitcoinContractsBalance)) return;
+    setBitcoinContractsBalanceInUSD(
+      i18nFormatCurrency(calculateFiatValue(createMoney(bitcoinContractsBalance.amount, 'BTC')))
+    );
+  }, [bitcoinContractsBalance, calculateFiatValue]);
+
+  return useMemo(() => {
+    if (isUndefined(bitcoinContractsBalance))
+      return {
+        bitcoinContractsBalance: createMoney(new BigNumber(0), 'BTC'),
+        bitcoinContractsBalanceInUSD: i18nFormatCurrency(createMoney(new BigNumber(0), 'USD')),
+        isLoading,
+      };
+    return {
+      bitcoinContractsBalance,
+      bitcoinContractsBalanceInUSD: bitcoinContractsBalanceInUSD,
+      isLoading,
+    };
+  }, [bitcoinContractsBalance, bitcoinContractsBalanceInUSD, isLoading]);
+}

src/app/query/stacks/balance/bitcoin-contracts-balance.query.ts → src/app/query/bitcoin/balance/bitcoin-contracts-balance.query.ts

@@ -3,6 +3,7 @@ import { UseQueryResult, useQuery } from '@tanstack/react-query';
 import { Money } from '@shared/models/money.model';
 
 import { useBitcoinContracts } from '@app/common/hooks/use-bitcoin-contracts';
+import { useCurrentAccountIndex } from '@app/store/accounts/account';
 import { useCurrentNetwork } from '@app/store/networks/networks.selectors';
 
 const staleTime = 1 * 60 * 1000;
@@ -15,12 +16,12 @@ const balanceQueryOptions = {
 
 export function useBitcoinContractsBalanceQuery(): UseQueryResult<Money> {
   const { sumBitcoinContractCollateralAmounts } = useBitcoinContracts();
+  const currentAccountIndex = useCurrentAccountIndex();
   const currentNetwork = useCurrentNetwork();
 
   return useQuery({
-    queryKey: ['sum-bitcoin-contract-collateral-amounts', currentNetwork.id],
+    queryKey: ['sum-bitcoin-contract-collateral-amounts', currentAccountIndex, currentNetwork?.id],
     queryFn: sumBitcoinContractCollateralAmounts,
-    enabled: !!currentNetwork,
     ...balanceQueryOptions,
   });
 }