refactor: stacks queries

package.json

@@ -134,14 +134,14 @@
     "@coinbase/cbpay-js": "2.1.0",
     "@fungible-systems/zone-file": "2.0.0",
     "@hirosystems/token-metadata-api-client": "1.2.0",
-    "@leather.io/bitcoin": "0.8.6",
-    "@leather.io/constants": "0.8.1",
-    "@leather.io/crypto": "1.0.3",
-    "@leather.io/models": "0.10.1",
-    "@leather.io/query": "0.11.2",
-    "@leather.io/tokens": "0.6.1",
-    "@leather.io/ui": "1.6.3",
-    "@leather.io/utils": "0.10.1",
+    "@leather.io/bitcoin": "0.9.1",
+    "@leather.io/constants": "0.8.2",
+    "@leather.io/crypto": "1.0.4",
+    "@leather.io/models": "0.10.2",
+    "@leather.io/query": "1.0.2",
+    "@leather.io/tokens": "0.6.2",
+    "@leather.io/ui": "1.6.4",
+    "@leather.io/utils": "0.10.2",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.4.0",
     "@noble/secp256k1": "2.1.0",
@@ -248,10 +248,10 @@
     "@actions/core": "1.10.1",
     "@btckit/types": "0.0.19",
     "@chromatic-com/storybook": "1.2.23",
-    "@leather.io/eslint-config": "0.6.0",
-    "@leather.io/panda-preset": "0.3.0",
+    "@leather.io/eslint-config": "0.6.1",
+    "@leather.io/panda-preset": "0.3.2",
     "@leather.io/prettier-config": "0.5.0",
-    "@leather.io/rpc": "2.0.0",
+    "@leather.io/rpc": "2.0.2",
     "@ls-lint/ls-lint": "2.2.3",
     "@mdx-js/loader": "3.0.0",
     "@pandacss/dev": "0.40.1",

src/app/common/hooks/account/use-account-names.ts

@@ -1,27 +1,41 @@
-import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
 
-import { useGetBnsNamesOwnedByAddressQuery } from '@leather.io/query';
+import { createGetBnsNamesOwnedByAddressQueryOptions, useStacksClient } from '@leather.io/query';
 import { isUndefined } from '@leather.io/utils';
 
 import { parseIfValidPunycode } from '@app/common/utils';
 import { formatAccountName } from '@app/common/utils/format-account-name';
 import { getAutogeneratedAccountDisplayName } from '@app/common/utils/get-account-display-name';
-import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
+import {
+  useCurrentStacksAccount,
+  useCurrentStacksAccountAddress,
+} from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
+import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';
 
 export function useCurrentAccountDisplayName() {
   const account = useCurrentStacksAccount();
-  const names = useGetBnsNamesOwnedByAddressQuery(account?.address ?? '').data?.names;
+  const address = useCurrentStacksAccountAddress();
+  const client = useStacksClient();
+  const { isTestnet } = useCurrentNetworkState();
 
-  return useMemo(() => {
-    if (isUndefined(account?.index) && (!account || typeof account?.index !== 'number'))
-      return 'Account';
-    if (names?.length && names[0]) return parseIfValidPunycode(names[0]);
-    return getAutogeneratedAccountDisplayName(account?.index);
-  }, [account, names]);
+  return useQuery({
+    ...createGetBnsNamesOwnedByAddressQueryOptions({ address, client, isTestnet }),
+    select: resp => {
+      if (isUndefined(account?.index) && (!account || typeof account?.index !== 'number'))
+        return 'Account';
+      const names = resp.names ?? [];
+      if (names.length && names[0]) return parseIfValidPunycode(names[0]);
+      return getAutogeneratedAccountDisplayName(account?.index);
+    },
+  });
 }
 
 export function useAccountDisplayName({ address, index }: { index: number; address: string }) {
-  const query = useGetBnsNamesOwnedByAddressQuery(address, {
+  const client = useStacksClient();
+  const { isTestnet } = useCurrentNetworkState();
+
+  const query = useQuery({
+    ...createGetBnsNamesOwnedByAddressQueryOptions({ address, client, isTestnet }),
     select: resp => {
       const names = resp.names ?? [];
       return formatAccountName(names[0]) || getAutogeneratedAccountDisplayName(index);

src/app/common/hooks/account/use-refresh-all-account-data.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 
-import { useAccountMempoolQuery } from '@leather.io/query';
+import { useGetAddressMempoolTransactionsQuery } from '@leather.io/query';
 import { delay } from '@leather.io/utils';
 
 import { useCurrentStacksAccountAddress } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
@@ -9,7 +9,7 @@ import { useCurrentStacksAccountAddress } from '@app/store/accounts/blockchain/s
 // to use react-query itself to do this if needed?
 export function useRefreshAllAccountData() {
   const address = useCurrentStacksAccountAddress();
-  const { refetch } = useAccountMempoolQuery(address);
+  const { refetch } = useGetAddressMempoolTransactionsQuery(address);
   return useCallback(
     async (ms?: number) => {
       if (typeof ms === 'number') await delay(ms);

src/app/features/collectibles/hooks/use-is-fetching-collectibles.ts

@@ -1,6 +1,6 @@
 import { useIsFetching } from '@tanstack/react-query';
 
-import { QueryPrefixes } from '@leather.io/query';
+import { BitcoinQueryPrefixes, StacksQueryPrefixes } from '@leather.io/query';
 import { sumNumbers } from '@leather.io/utils';
 
 function areAnyQueriesFetching(...args: number[]) {
@@ -9,17 +9,17 @@ function areAnyQueriesFetching(...args: number[]) {
 
 export function useIsFetchingCollectiblesRelatedQuery() {
   // Ordinal inscriptions
-  const n1 = useIsFetching({ queryKey: [QueryPrefixes.TaprootAddressUtxos] });
-  const n2 = useIsFetching({ queryKey: [QueryPrefixes.InscriptionsByAddress] });
-  const n3 = useIsFetching({ queryKey: [QueryPrefixes.InscriptionMetadata] });
-  const n4 = useIsFetching({ queryKey: [QueryPrefixes.OrdinalTextContent] });
-  const n5 = useIsFetching({ queryKey: [QueryPrefixes.GetInscriptions] });
+  const n1 = useIsFetching({ queryKey: [BitcoinQueryPrefixes.TaprootAddressUtxos] });
+  const n2 = useIsFetching({ queryKey: [BitcoinQueryPrefixes.InscriptionsByAddress] });
+  const n3 = useIsFetching({ queryKey: [BitcoinQueryPrefixes.InscriptionMetadata] });
+  const n4 = useIsFetching({ queryKey: [BitcoinQueryPrefixes.OrdinalTextContent] });
+  const n5 = useIsFetching({ queryKey: [BitcoinQueryPrefixes.GetInscriptions] });
 
   // BNS
-  const n6 = useIsFetching({ queryKey: [QueryPrefixes.BnsNamesByAddress] });
+  const n6 = useIsFetching({ queryKey: [StacksQueryPrefixes.GetBnsNamesByAddress] });
 
   // NFTs
-  const n7 = useIsFetching({ queryKey: [QueryPrefixes.GetNftMetadata] });
+  const n7 = useIsFetching({ queryKey: [StacksQueryPrefixes.GetNftMetadata] });
 
   return areAnyQueriesFetching(n1, n2, n3, n4, n5, n6, n7);
 }

src/app/features/current-account/current-account-avatar.tsx

@@ -11,7 +11,7 @@ interface CurrentAccountAvatar extends CircleProps {
 }
 export const CurrentAccountAvatar = memo(({ toggleSwitchAccount }: CurrentAccountAvatar) => {
   const stacksAccount = useCurrentStacksAccount();
-  const name = useCurrentAccountDisplayName();
+  const { data: name = 'Account' } = useCurrentAccountDisplayName();
   if (!stacksAccount) return null;
 
   return (

src/app/features/current-account/current-account-name.tsx

@@ -21,7 +21,7 @@ function AccountNameTitle({ children, ...props }: HasChildren & BoxProps) {
 
 const AccountNameSuspense = memo((props: BoxProps) => {
   const currentAccount = useCurrentStacksAccount();
-  const name = useCurrentAccountDisplayName();
+  const { data: name = 'Account' } = useCurrentAccountDisplayName();
   if (!currentAccount || typeof currentAccount.index === 'undefined') return null;
   // FIXME: The name is truncated here with JS but we could just use CSS to do this
   const nameCharLimit = 18;
@@ -35,7 +35,7 @@ const AccountNameSuspense = memo((props: BoxProps) => {
 });
 
 export function CurrentAccountName() {
-  const defaultName = useCurrentAccountDisplayName();
+  const { data: defaultName = 'Account' } = useCurrentAccountDisplayName();
   const fallback = <AccountNameTitle>{defaultName}</AccountNameTitle>;
   return (
     <Suspense fallback={fallback}>

src/app/features/dialogs/increase-fee-dialog/increase-stx-fee-dialog.tsx

@@ -8,9 +8,9 @@ import { Flex, Stack } from 'leather-styles/jsx';
 import * as yup from 'yup';
 
 import {
+  useGetTransactionByIdQuery,
   useStacksRawTransaction,
   useStxAvailableUnlockedBalance,
-  useTransactionById,
 } from '@leather.io/query';
 import { Caption, Dialog, Spinner } from '@leather.io/ui';
 import { microStxToStx, stxToMicroStx } from '@leather.io/utils';
@@ -39,7 +39,7 @@ export function IncreaseStxFeeDialog() {
   const { txid } = useParams();
   const toast = useToast();
   const refreshAccountData = useRefreshAllAccountData();
-  const { data: tx, isLoading: isLoadingTx } = useTransactionById(txid || '');
+  const { data: tx, isLoading: isLoadingTx } = useGetTransactionByIdQuery(txid || '');
   const stxAddress = useCurrentStacksAccountAddress();
   const availableUnlockedBalance = useStxAvailableUnlockedBalance(stxAddress);
   const submittedTransactionsActions = useSubmittedTransactionsActions();

src/app/features/settings/network/network-list-item.tsx

@@ -1,5 +1,5 @@
 import { defaultCurrentNetwork } from '@leather.io/models';
-import { useNetworkStatus } from '@leather.io/query';
+import { useGetStacksNetworkStatusQuery } from '@leather.io/query';
 
 import { useCurrentNetworkId, useNetworks } from '@app/store/networks/networks.selectors';
 
@@ -21,12 +21,12 @@ export function NetworkListItem({
   const networks = useNetworks();
 
   const network = networks[networkId] || defaultCurrentNetwork;
-  const isOnline = useNetworkStatus(network.chain.stacks.url);
+  const { isSuccess } = useGetStacksNetworkStatusQuery(network.chain.stacks.url);
 
   return (
     <NetworkListItemLayout
       isActive={networkId === currentNetworkId}
-      isOnline={isOnline}
+      isOnline={isSuccess}
       network={network}
       networkId={networkId}
       isCustom={isCustom}

src/app/features/stacks-transaction-request/contract-call-details/function-argument-item.tsx

@@ -16,7 +16,7 @@ interface FunctionArgumentProps {
 export function FunctionArgumentItem(props: FunctionArgumentProps) {
   const { arg, index, ...rest } = props;
   const transactionRequest = useTransactionRequestState();
-  const contractFunction = useContractFunction(transactionRequest);
+  const { data: contractFunction } = useContractFunction(transactionRequest);
   const argCV = deserializeCV(Buffer.from(arg, 'hex'));
   const strValue = cvToString(argCV);
 

src/app/features/stacks-transaction-request/hooks/use-stacks-transaction-summary.ts

@@ -14,7 +14,7 @@ import BigNumber from 'bignumber.js';
 import type { CryptoCurrencies } from '@leather.io/models';
 import {
   useCryptoCurrencyMarketDataMeanAverage,
-  useGetStackNetworkBlockTimeQuery,
+  useGetStacksNetworkBlockTimeQuery,
 } from '@leather.io/query';
 import {
   baseCurrencyAmountInQuote,
@@ -34,7 +34,7 @@ export function useStacksTransactionSummary(token: CryptoCurrencies) {
   // TODO: unsafe type assumption
   const tokenMarketData = useCryptoCurrencyMarketDataMeanAverage(token as 'BTC' | 'STX');
   const { isTestnet } = useCurrentNetworkState();
-  const { data: blockTime } = useGetStackNetworkBlockTimeQuery();
+  const { data: blockTime } = useGetStacksNetworkBlockTimeQuery();
 
   function formSentSummaryTxState(txId: string, signedTx: StacksTransaction, decimals?: number) {
     return {

src/app/features/stacks-transaction-request/hooks/use-transaction-error.ts

@@ -1,10 +1,10 @@
 import { useMemo } from 'react';
 
-import { ContractCallPayload, TransactionTypes } from '@stacks/connect';
+import { TransactionTypes } from '@stacks/connect';
 import BigNumber from 'bignumber.js';
 import { useFormikContext } from 'formik';
 
-import { useContractInterface, useStxAvailableUnlockedBalance } from '@leather.io/query';
+import { useGetContractInterfaceQuery, useStxAvailableUnlockedBalance } from '@leather.io/query';
 import { stxToMicroStx } from '@leather.io/utils';
 
 import { StacksTransactionFormValues } from '@shared/models/form.model';
@@ -22,7 +22,7 @@ function getIsMultisig() {
 
 export function useTransactionError() {
   const transactionRequest = useTransactionRequestState();
-  const contractInterface = useContractInterface(transactionRequest as ContractCallPayload);
+  const contractInterface = useGetContractInterfaceQuery(transactionRequest);
   const { origin } = useDefaultRequestParams();
   const { values } = useFormikContext<StacksTransactionFormValues>();
 

src/app/pages/receive/receive-stx.tsx

@@ -13,7 +13,7 @@ export function ReceiveStxModal() {
   const toast = useToast();
   const currentAccount = useCurrentStacksAccount();
 
-  const accountName = useCurrentAccountDisplayName();
+  const { data: accountName = 'Account' } = useCurrentAccountDisplayName();
 
   if (!currentAccount) return null;
 

src/app/pages/swap/components/swap-details/swap-details.tsx

@@ -2,7 +2,7 @@ import { SwapSelectors } from '@tests/selectors/swap.selectors';
 import BigNumber from 'bignumber.js';
 import { HStack, styled } from 'leather-styles/jsx';
 
-import { useGetStackNetworkBlockTimeQuery } from '@leather.io/query';
+import { useGetStacksNetworkBlockTimeQuery } from '@leather.io/query';
 import { ChevronUpIcon } from '@leather.io/ui';
 import {
   createMoneyFromDecimal,
@@ -37,7 +37,7 @@ const sponsoredFeeLabel =
 export function SwapDetails() {
   const { swapSubmissionData } = useSwapContext();
   const { isTestnet } = useCurrentNetworkState();
-  const { data: blockTime } = useGetStackNetworkBlockTimeQuery();
+  const { data: blockTime } = useGetStacksNetworkBlockTimeQuery();
 
   if (
     isUndefined(swapSubmissionData) ||

src/app/store/software-keys/software-key.actions.ts

@@ -2,8 +2,8 @@ import { AddressVersion } from '@stacks/transactions';
 
 import {
   type BitcoinClient,
-  QueryPrefixes,
   type StacksClient,
+  StacksQueryPrefixes,
   fetchNamesForAddress,
 } from '@leather.io/query';
 
@@ -60,7 +60,7 @@ function setWalletEncryptionPassword(args: {
         isTestnet: false,
         signal: new AbortSignal(),
       });
-      queryClient.setQueryData([QueryPrefixes.BnsNamesByAddress, address], resp);
+      queryClient.setQueryData([StacksQueryPrefixes.GetBnsNamesByAddress, address], resp);
       return resp.names.length > 0;
     }