refactor: use stacks query pkg, closes #68 and #5070

package.json

@@ -138,7 +138,7 @@
     "@leather-wallet/bitcoin": "0.7.2",
     "@leather-wallet/crypto": "1.0.1",
     "@leather-wallet/models": "0.8.0",
-    "@leather-wallet/query": "0.8.3",
+    "@leather-wallet/query": "0.8.4",
     "@leather-wallet/tokens": "0.5.2",
     "@leather-wallet/utils": "0.8.1",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
@@ -268,7 +268,7 @@
     "@sentry/react": "7.106.0",
     "@sentry/webpack-plugin": "2.17.0",
     "@stacks/connect-react": "22.2.0",
-    "@stacks/stacks-blockchain-api-types": "6.3.4",
+    "@stacks/stacks-blockchain-api-types": "7.8.2",
     "@storybook/addon-docs": "8.0.1",
     "@storybook/addon-essentials": "8.0.1",
     "@storybook/addon-interactions": "8.0.1",
@@ -360,6 +360,7 @@
     "webpack-shell-plugin": "0.5.0"
   },
   "resolutions": {
+    "braces": "3.0.3",
     "nanoid": "3.3.4",
     "socket.io-parser": "4.2.4",
     "wrap-ansi": "7.0.0",

src/app/app.tsx

@@ -26,6 +26,7 @@ const reactQueryDevToolsEnabled = process.env.REACT_QUERY_DEVTOOLS_ENABLED === '
 
 function ConnectedApp() {
   const network = useCurrentNetwork();
+
   return (
     <QueryClientProvider client={queryClient}>
       <LeatherQueryProvider

src/app/common/asset-utils.ts

@@ -5,25 +5,6 @@ import {
   isMoneyGreaterThanZero,
 } from '@leather-wallet/utils';
 
-export function sortAssetsByName<T extends { name: string }[]>(assets: T) {
-  return assets
-    .sort((a, b) => {
-      if (a.name < b.name) return -1;
-      if (a.name > b.name) return 1;
-      return 0;
-    })
-    .sort((a, b) => {
-      if (a.name === 'STX') return -1;
-      if (b.name !== 'STX') return 1;
-      return 0;
-    })
-    .sort((a, b) => {
-      if (a.name === 'BTC') return -1;
-      if (b.name !== 'BTC') return 1;
-      return 0;
-    });
-}
-
 export function migratePositiveAssetBalancesToTop<T extends { balance: Money }[]>(assets: T) {
   const assetsWithPositiveBalance = assets.filter(asset => asset.balance.amount.isGreaterThan(0));
   const assetsWithZeroBalance = assets.filter(asset => asset.balance.amount.isEqualTo(0));

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

@@ -1,28 +1,27 @@
 import { useMemo } from 'react';
 
+import { useGetBnsNamesOwnedByAddressQuery } from '@leather-wallet/query';
 import { isUndefined } from '@leather-wallet/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 { useCurrentAccountNames } from '@app/query/stacks/bns/bns.hooks';
-import { useGetBnsNamesOwnedByAddress } from '@app/query/stacks/bns/bns.query';
 import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 
 export function useCurrentAccountDisplayName() {
   const account = useCurrentStacksAccount();
-  const { data: names = [] } = useCurrentAccountNames();
+  const names = useGetBnsNamesOwnedByAddressQuery(account?.address ?? '').data?.names;
 
   return useMemo(() => {
     if (isUndefined(account?.index) && (!account || typeof account?.index !== 'number'))
       return 'Account';
-    if (names[0]) return parseIfValidPunycode(names[0]);
+    if (names?.length && names[0]) return parseIfValidPunycode(names[0]);
     return getAutogeneratedAccountDisplayName(account?.index);
   }, [account, names]);
 }
 
 export function useAccountDisplayName({ address, index }: { index: number; address: string }) {
-  const query = useGetBnsNamesOwnedByAddress(address, {
+  const query = useGetBnsNamesOwnedByAddressQuery(address, {
     select: resp => {
       const names = resp.names ?? [];
       return formatAccountName(names[0]) || getAutogeneratedAccountDisplayName(index);

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

@@ -1,13 +1,15 @@
 import { useCallback } from 'react';
 
+import { useAccountMempoolQuery } from '@leather-wallet/query';
 import { delay } from '@leather-wallet/utils';
 
-import { useCurrentAccountMempool } from '@app/query/stacks/mempool/mempool.hooks';
+import { useCurrentStacksAccountAddress } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 
 // TODO: Can this be removed? It seems like we should be able
 // to use react-query itself to do this if needed?
 export function useRefreshAllAccountData() {
-  const { refetch } = useCurrentAccountMempool();
+  const address = useCurrentStacksAccountAddress();
+  const { refetch } = useAccountMempoolQuery(address);
   return useCallback(
     async (ms?: number) => {
       if (typeof ms === 'number') await delay(ms);

src/app/common/hooks/balance/use-total-balance.tsx

@@ -1,10 +1,12 @@
 import { useMemo } from 'react';
 
-import { useCryptoCurrencyMarketDataMeanAverage } from '@leather-wallet/query';
+import {
+  useCryptoCurrencyMarketDataMeanAverage,
+  useStxCryptoAssetBalance,
+} from '@leather-wallet/query';
 import { baseCurrencyAmountInQuote, createMoney, i18nFormatCurrency } from '@leather-wallet/utils';
 
 import { useBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
-import { useStxCryptoAssetBalance } from '@app/query/stacks/balance/account-balance.hooks';
 
 interface UseTotalBalanceArgs {
   btcAddress: string;

src/app/common/hooks/use-key-actions.ts

@@ -24,8 +24,8 @@ export function useKeyActions() {
   const analytics = useAnalytics();
   const dispatch = useAppDispatch();
   const defaultKeyDetails = useCurrentKeyDetails();
-  const stxClient = useStacksClient();
   const btcClient = useBitcoinClient();
+  const stxClient = useStacksClient();
 
   return useMemo(
     () => ({

src/app/common/hooks/use-loading.ts

@@ -1,7 +1,6 @@
 import { useLoadingState } from '@app/store/ui/ui.hooks';
 
 export enum LoadingKeys {
-  INCREASE_FEE_DRAWER = 'loading/INCREASE_FEE_DRAWER',
   SUBMIT_SEND_FORM_TRANSACTION = 'loading/SUBMIT_SEND_FORM_TRANSACTION',
   SUBMIT_SWAP_TRANSACTION = 'loading/SUBMIT_SWAP_TRANSACTION',
   SUBMIT_TRANSACTION_REQUEST = 'loading/SUBMIT_TRANSACTION_REQUEST',

src/app/common/hooks/use-submit-stx-transaction.ts

@@ -51,7 +51,7 @@ export function useSubmitTransactionCallback({ loadingKey }: UseSubmitTransactio
             logger.info('Transaction broadcast', response);
             submittedTransactionsActions.newTransactionSubmitted({
               rawTx: bytesToHex(transaction.serialize()),
-              txId: safelyFormatHexTxid(response.txid),
+              txid: safelyFormatHexTxid(response.txid),
             });
 
             await delay(500);

src/app/components/balance/stx-balance.tsx

@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
 
+import { useStxCryptoAssetBalance } from '@leather-wallet/query';
+
 import { stacksValue } from '@app/common/stacks-utils';
-import { useStxCryptoAssetBalance } from '@app/query/stacks/balance/account-balance.hooks';
 import { Caption } from '@app/ui/components/typography/caption';
 
 interface StxBalanceProps {

src/app/components/loaders/sip10-tokens-loader.tsx

@@ -1,8 +1,8 @@
 import {
+  type Sip10CryptoAssetFilter,
   type Sip10TokenAssetDetails,
   useFilteredSip10Tokens,
-} from '@app/query/stacks/sip10/sip10-tokens.hooks';
-import type { Sip10CryptoAssetFilter } from '@app/query/stacks/sip10/sip10-tokens.utils';
+} from '@leather-wallet/query';
 
 interface Sip10TokensLoaderProps {
   address: string;

src/app/components/loaders/stx-balance-loader.tsx

@@ -1,7 +1,7 @@
 import type { StxCryptoAssetBalance } from '@leather-wallet/models';
+import { useStxCryptoAssetBalance } from '@leather-wallet/query';
 
 import { isFetchedWithSuccess } from '@app/query/query-config';
-import { useStxCryptoAssetBalance } from '@app/query/stacks/balance/account-balance.hooks';
 
 interface StxBalanceLoaderProps {
   address: string;

src/app/components/loaders/stx20-tokens-loader.tsx

@@ -1,6 +1,5 @@
 import type { CryptoAssetBalance, Stx20CryptoAssetInfo } from '@leather-wallet/models';
-
-import { useStx20Tokens } from '@app/query/stacks/stx20/stx20-tokens.hooks';
+import { useStx20Tokens } from '@leather-wallet/query';
 
 interface Stx20TokensLoaderProps {
   address: string;