feat: bitcoin contracts query

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

@@ -60,6 +60,7 @@ export function useBitcoinContracts() {
   const defaultParams = useDefaultRequestParams();
   const bitcoinMarketData = useCryptoCurrencyMarketData('BTC');
   const calculateFiatValue = useCalculateBitcoinFiatValue();
+
   const bitcoinAccountDetails = useCurrentAccountNativeSegwitIndexZeroSigner();
   const currentIndex = useCurrentAccountIndex();
   const nativeSegwitPrivateKeychain = useNativeSegwitAccountBuilder()?.(currentIndex);
@@ -236,17 +237,19 @@ export function useBitcoinContracts() {
     };
   }
 
-  async function sumBitcoinContractCollateralAmounts(): Promise<Money | undefined> {
+  async function sumBitcoinContractCollateralAmounts(): Promise<Money> {
     let bitcoinContractsCollateralSum = 0;
     const bitcoinContracts = await getAllSignedBitcoinContracts();
-    if (!bitcoinContracts) return;
+    if (!bitcoinContracts) return createMoneyFromDecimal(0, 'BTC');
+
     bitcoinContracts.forEach((bitcoinContract: BitcoinContractListItem) => {
       bitcoinContractsCollateralSum += parseInt(bitcoinContract.acceptorCollateral);
     });
     const bitcoinContractCollateralSumMoney = createMoneyFromDecimal(
       satToBtc(bitcoinContractsCollateralSum),
       'BTC'
     );
+
     return bitcoinContractCollateralSumMoney;
   }
 

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

@@ -1,51 +1,30 @@
-import { useState } from 'react';
-import { useAsync } from 'react-async-hook';
 import { useNavigate } from 'react-router-dom';
 
-import { Money, createMoneyFromDecimal } from '@shared/models/money.model';
 import { RouteUrls } from '@shared/route-urls';
 
-import { useBitcoinContracts } from '@app/common/hooks/use-bitcoin-contracts';
-import { i18nFormatCurrency } from '@app/common/money/format-money';
-import { useCalculateBitcoinFiatValue } from '@app/query/common/market-data/market-data.hooks';
+import { useGetBitcoinContractsBalance } from '@app/query/bitcoin/balance/bitcoin-contracts-balance.hooks';
 import { BitcoinContractIcon } from '@app/ui/components/icons/bitcoin-contract-icon';
 
 import { BitcoinContractEntryPointLayout } from './bitcoin-contract-entry-point-layout';
 
-interface BitcoinContractEntryPointProps {
-  btcAddress: string;
-}
-export function BitcoinContractEntryPoint({ btcAddress }: BitcoinContractEntryPointProps) {
+export function BitcoinContractEntryPoint() {
   const navigate = useNavigate();
-  const { sumBitcoinContractCollateralAmounts } = useBitcoinContracts();
-  const [isLoading, setIsLoading] = useState(true);
-  const calculateFiatValue = useCalculateBitcoinFiatValue();
-  const [bitcoinContractSum, setBitcoinContractSum] = useState<Money>(
-    createMoneyFromDecimal(0, 'BTC')
-  );
 
-  useAsync(async () => {
-    setIsLoading(true);
-    const currentBitcoinContractSum = await sumBitcoinContractCollateralAmounts();
-    if (!currentBitcoinContractSum) return;
-    setBitcoinContractSum(currentBitcoinContractSum);
-    setIsLoading(false);
-  }, [btcAddress]);
+  const { bitcoinContractsBalance, bitcoinContractsBalanceInUSD, isLoading } =
+    useGetBitcoinContractsBalance();
 
   function onClick() {
     navigate(RouteUrls.BitcoinContractList);
   }
 
   return (
-    !bitcoinContractSum.amount.isZero() && (
-      <BitcoinContractEntryPointLayout
-        isLoading={isLoading}
-        balance={bitcoinContractSum}
-        caption={bitcoinContractSum.symbol}
-        icon={<BitcoinContractIcon />}
-        usdBalance={i18nFormatCurrency(calculateFiatValue(bitcoinContractSum))}
-        onClick={onClick}
-      />
-    )
+    <BitcoinContractEntryPointLayout
+      isLoading={isLoading}
+      balance={bitcoinContractsBalance}
+      caption={bitcoinContractsBalance.symbol}
+      icon={<BitcoinContractIcon />}
+      usdBalance={bitcoinContractsBalanceInUSD}
+      onClick={onClick}
+    />
   );
 }

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

@@ -57,7 +57,7 @@ export function AssetsList() {
       {/* Temporary duplication during Ledger Bitcoin feature dev */}
       {['testnet', 'regtest'].includes(network.chain.bitcoin.bitcoinNetwork) &&
         whenWallet({
-          software: <BitcoinContractEntryPoint btcAddress={btcAddress} />,
+          software: <BitcoinContractEntryPoint />,
           ledger: null,
         })}
 

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/bitcoin/balance/bitcoin-contracts-balance.query.ts

@@ -0,0 +1,27 @@
+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;
+
+const balanceQueryOptions = {
+  staleTime,
+  keepPreviousData: false,
+  refetchOnMount: true,
+} as const;
+
+export function useBitcoinContractsBalanceQuery(): UseQueryResult<Money> {
+  const { sumBitcoinContractCollateralAmounts } = useBitcoinContracts();
+  const currentAccountIndex = useCurrentAccountIndex();
+  const currentNetwork = useCurrentNetwork();
+
+  return useQuery({
+    queryKey: ['sum-bitcoin-contract-collateral-amounts', currentAccountIndex, currentNetwork?.id],
+    queryFn: sumBitcoinContractCollateralAmounts,
+    ...balanceQueryOptions,
+  });
+}