refactor: apply mono package updates

package.json

@@ -146,15 +146,15 @@
     "@hirosystems/token-metadata-api-client": "1.2.0",
     "@hookform/resolvers": "3.9.1",
     "@leather.io/analytics": "2.0.0",
-    "@leather.io/bitcoin": "0.16.0",
-    "@leather.io/constants": "0.13.0",
-    "@leather.io/crypto": "1.6.7",
-    "@leather.io/models": "0.18.3",
-    "@leather.io/query": "2.19.0",
-    "@leather.io/stacks": "1.3.0",
-    "@leather.io/tokens": "0.9.2",
-    "@leather.io/ui": "1.32.1",
-    "@leather.io/utils": "0.16.7",
+    "@leather.io/bitcoin": "0.16.1",
+    "@leather.io/constants": "0.13.1",
+    "@leather.io/crypto": "1.6.8",
+    "@leather.io/models": "0.19.0",
+    "@leather.io/query": "2.20.0",
+    "@leather.io/stacks": "1.3.1",
+    "@leather.io/tokens": "0.10.0",
+    "@leather.io/ui": "1.32.2",
+    "@leather.io/utils": "0.17.0",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.5.0",
     "@noble/secp256k1": "2.1.0",
@@ -267,9 +267,9 @@
     "@btckit/types": "0.0.19",
     "@chromatic-com/storybook": "1.2.23",
     "@leather.io/eslint-config": "0.7.0",
-    "@leather.io/panda-preset": "0.4.2",
+    "@leather.io/panda-preset": "0.4.3",
     "@leather.io/prettier-config": "0.6.0",
-    "@leather.io/rpc": "2.1.14",
+    "@leather.io/rpc": "2.1.15",
     "@ls-lint/ls-lint": "2.2.3",
     "@mdx-js/loader": "3.0.0",
     "@pandacss/dev": "0.46.1",

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

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { createGetBnsNamesOwnedByAddressQueryOptions, useStacksClient } from '@leather.io/query';
+import { bitcoinNetworkModeToCoreNetworkMode } from '@leather.io/bitcoin';
+import { createGetBnsNamesOwnedByAddressQueryOptions } from '@leather.io/query';
 import { isUndefined } from '@leather.io/utils';
 
 import { parseIfValidPunycode } from '@app/common/utils';
@@ -15,11 +16,11 @@ import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';
 export function useCurrentAccountDisplayName() {
   const account = useCurrentStacksAccount();
   const address = useCurrentStacksAccountAddress();
-  const client = useStacksClient();
-  const { isTestnet } = useCurrentNetworkState();
+  const { chain } = useCurrentNetworkState();
+  const network = bitcoinNetworkModeToCoreNetworkMode(chain.bitcoin.mode);
 
   return useQuery({
-    ...createGetBnsNamesOwnedByAddressQueryOptions({ address, client, isTestnet }),
+    ...createGetBnsNamesOwnedByAddressQueryOptions({ address, network }),
     select: resp => {
       if (isUndefined(account?.index) && (!account || typeof account?.index !== 'number'))
         return 'Account';
@@ -31,11 +32,14 @@ export function useCurrentAccountDisplayName() {
 }
 
 export function useAccountDisplayName({ address, index }: { index: number; address: string }) {
-  const client = useStacksClient();
-  const { isTestnet } = useCurrentNetworkState();
+  const { chain } = useCurrentNetworkState();
+  const network = bitcoinNetworkModeToCoreNetworkMode(chain.bitcoin.mode);
 
   const query = useQuery({
-    ...createGetBnsNamesOwnedByAddressQueryOptions({ address, client, isTestnet }),
+    ...createGetBnsNamesOwnedByAddressQueryOptions({
+      address,
+      network,
+    }),
     select: resp => {
       const names = resp.names ?? [];
       return formatAccountName(names[0]) || getAutogeneratedAccountDisplayName(index);

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

@@ -24,13 +24,23 @@ function getTokenId(token: Stx20TokenItem) {
   return token.info.symbol;
 }
 
+function castFullTokenInfo(rawToken: Partial<Stx20CryptoAssetInfo>) {
+  return {
+    chain: rawToken.chain!,
+    category: rawToken.category!,
+    protocol: rawToken.protocol!,
+    symbol: rawToken.symbol!,
+    decimals: rawToken.decimals!,
+    hasMemo: rawToken.hasMemo!,
+  };
+}
+
 export function Stx20TokensLoader({ address, children, filter = 'all' }: Stx20TokensLoaderProps) {
   const { data: tokens = [] } = useStx20Tokens(address);
-
   const { filterTokens } = useManageTokens();
   const preEnabledTokensIds: string[] = [];
   const filteredTokens = filterTokens({
-    tokens,
+    tokens: tokens.map(t => ({ ...t, info: castFullTokenInfo(t.info) })),
     filter,
     getTokenId,
     preEnabledTokensIds,

src/app/features/asset-list/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx

@@ -5,6 +5,7 @@ import { Stack } from 'leather-styles/jsx';
 
 import type { Brc20CryptoAssetInfo, CryptoAssetBalance, MarketData } from '@leather.io/models';
 import { Brc20AvatarIcon } from '@leather.io/ui';
+import { getAssetDisplayName } from '@leather.io/utils';
 
 import { convertAssetBalanceToFiat } from '@app/common/asset-utils';
 import { useManageTokens } from '@app/common/hooks/use-manage-tokens';
@@ -60,7 +61,7 @@ export function Brc20TokenAssetList({
     <Stack data-testid={CryptoAssetSelectors.CryptoAssetList}>
       {tokens.map(token => {
         const key = token.info.symbol;
-        const captionLeft = token.info.name.toUpperCase();
+        const captionLeft = getAssetDisplayName(token.info).toUpperCase();
         const icon = <Brc20AvatarIcon />;
         const titleLeft = token.info.symbol;
 

src/app/features/asset-list/bitcoin/src20-token-asset-list/src20-token-asset-list.tsx

@@ -1,6 +1,7 @@
 import { type Dispatch, type SetStateAction, useEffect } from 'react';
 
 import { Src20AvatarIcon } from '@leather.io/ui';
+import { getAssetDisplayName } from '@leather.io/utils';
 
 import { useManageTokens } from '@app/common/hooks/use-manage-tokens';
 import { CryptoAssetItem } from '@app/components/crypto-asset-item/crypto-asset-item';
@@ -32,7 +33,7 @@ export function Src20TokenAssetList({
 
   return tokens.map((token, i) => {
     const key = `${token.info.id}${i}`;
-    const captionLeft = token.info.name.toUpperCase();
+    const captionLeft = getAssetDisplayName(token.info).toUpperCase();
     const icon = <Src20AvatarIcon />;
     const titleLeft = token.info.symbol.toUpperCase();
     const symbol = token.info.symbol;

src/app/features/asset-list/stacks/stx20-token-asset-list/stx20-token-asset-list.tsx

@@ -1,6 +1,7 @@
 import { type Dispatch, type SetStateAction, useEffect } from 'react';
 
 import type { CryptoAssetBalance, Stx20CryptoAssetInfo } from '@leather.io/models';
+import { getAssetDisplayName } from '@leather.io/utils';
 
 import { useManageTokens } from '@app/common/hooks/use-manage-tokens';
 import { CryptoAssetItem } from '@app/components/crypto-asset-item/crypto-asset-item';
@@ -37,7 +38,7 @@ export function Stx20TokenAssetList({
 
   return tokens.map((token, i) => {
     const key = `${token.info.symbol}${i}`;
-    const captionLeft = token.info.name.toUpperCase();
+    const captionLeft = getAssetDisplayName(token.info).toUpperCase();
     const icon = <Stx20AvatarIcon />;
     const symbol = token.info.symbol;
     const titleLeft = symbol;

src/app/features/collectibles/components/stacks/stacks-crypto-assets.tsx

@@ -16,7 +16,7 @@ interface StacksCryptoAssetsProps {
   address: string;
 }
 export function StacksCryptoAssets({ address }: StacksCryptoAssetsProps) {
-  const names = useGetBnsNamesOwnedByAddressQuery(address).data?.names;
+  const bnsNames = useGetBnsNamesOwnedByAddressQuery(address).data?.names;
 
   const stacksNftsMetadataResp = useStacksNonFungibleTokensMetadata(address);
 
@@ -29,13 +29,23 @@ export function StacksCryptoAssets({ address }: StacksCryptoAssetsProps) {
     }
   }, [stacksNftsMetadataResp.length]);
 
+  function hideBnsCollectible(name: string) {
+    return bnsNames?.includes(name) || name === 'BNS - Archive';
+  }
+
   return (
     <>
-      {(names ?? []).map(name => (
+      {(bnsNames ?? []).map(name => (
         <StacksBnsName bnsName={parseIfValidPunycode(name)} key={name} />
       ))}
+
       {stacksNftsMetadataResp.map((nft, i) => {
         if (!nft || !nft.metadata) return null;
+
+        if (hideBnsCollectible(nft.metadata?.name ?? '')) {
+          return null;
+        }
+
         return <StacksNonFungibleTokens key={i} metadata={nft.metadata} />;
       })}
     </>

src/app/features/container/container.tsx

@@ -11,7 +11,7 @@ import {
 } from '@app/common/app-analytics';
 import { ContainerLayout } from '@app/components/layout';
 import { LoadingSpinner } from '@app/components/loading-spinner';
-import { SwitchAccountSheet } from '@app/features/dialogs/switch-account-dialog/switch-account-dialog';
+import { SwitchAccountSheet } from '@app/features/dialogs/switch-account-sheet/switch-account-sheet';
 import { InAppMessages } from '@app/features/hiro-messages/in-app-messages';
 import { useOnChangeAccount } from '@app/routes/hooks/use-on-change-account';
 import { useOnSignOut } from '@app/routes/hooks/use-on-sign-out';

src/app/features/dialogs/switch-account-dialog/components/switch-account-list-item.tsx → src/app/features/dialogs/switch-account-sheet/components/switch-account-list-item.tsx

@@ -1,5 +1,7 @@
 import { memo } from 'react';
 
+import { getSwitchAccountSheetAccountNameSelector } from '@tests/selectors/account.selectors';
+
 import { useAccountDisplayName } from '@app/common/hooks/account/use-account-names';
 import { useSwitchAccount } from '@app/common/hooks/account/use-switch-account';
 import { useLoading } from '@app/common/hooks/use-loading';
@@ -43,7 +45,14 @@ export const SwitchAccountListItem = memo(
     return (
       <AccountListItemLayout
         accountAddresses={<AcccountAddresses index={index} />}
-        accountName={<AccountNameLayout isLoading={isFetchingBnsName}>{name}</AccountNameLayout>}
+        accountName={
+          <AccountNameLayout
+            data-testid={getSwitchAccountSheetAccountNameSelector(index)}
+            isLoading={isFetchingBnsName}
+          >
+            {name}
+          </AccountNameLayout>
+        }
         avatar={
           <AccountAvatarItem
             index={index}

src/app/features/stacks-transaction-request/transaction-error/error-messages.tsx

@@ -14,7 +14,7 @@ import { analytics } from '@shared/utils/analytics';
 
 import { useScrollLock } from '@app/common/hooks/use-scroll-lock';
 import { stacksValue } from '@app/common/stacks-utils';
-import { SwitchAccountSheet } from '@app/features/dialogs/switch-account-dialog/switch-account-dialog';
+import { SwitchAccountSheet } from '@app/features/dialogs/switch-account-sheet/switch-account-sheet';
 import { ErrorMessage } from '@app/features/stacks-transaction-request/transaction-error/error-message';
 import { useCurrentStacksAccountAddress } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';

src/app/query/bitcoin/ordinals/brc20/brc20-tokens.hooks.ts

@@ -41,9 +41,11 @@ export function useBrc20FeatureFlag() {
 
 function createBrc20CryptoAssetInfo(decimals: number, ticker: string): Brc20CryptoAssetInfo {
   return {
+    chain: 'bitcoin',
+    category: 'fungible',
+    protocol: 'brc20',
     decimals,
     hasMemo: false,
-    name: 'brc-20',
     symbol: ticker,
   };
 }

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

@@ -57,9 +57,8 @@ function setWalletEncryptionPassword(args: {
     async function doesStacksAddressHaveBnsName(address: string) {
       const controller = new AbortController();
       const resp = await fetchNamesForAddress({
-        client: stxClient,
         address,
-        isTestnet: false,
+        network: 'mainnet',
         signal: controller.signal,
       });
       queryClient.setQueryData([StacksQueryPrefixes.GetBnsNamesByAddress, address], resp);

tests/mocks/mock-stacks-bns.ts

@@ -11,3 +11,17 @@ export async function mockMainnetTestAccountStacksBnsNameRequest(page: Page) {
     })
   );
 }
+
+const mockedBnsV2NamesResponse = {
+  total: 1,
+  current_burn_block: 869830,
+  limit: 50,
+  offset: 0,
+  names: [{ full_name: 'leather.btc', name_string: 'leather', namespace_string: 'btc' }],
+};
+
+export async function mockBnsV2NamesRequest(page: Page) {
+  await page.route(`**/api.bnsv2.com/names/address/${TEST_ACCOUNT_1_STX_ADDRESS}/valid`, route =>
+    route.fulfill({ json: mockedBnsV2NamesResponse })
+  );
+}

tests/selectors/account.selectors.ts

@@ -0,0 +1,7 @@
+export function getSwitchAccountSheetAccountNameSelector(index: number) {
+  return AccountSelectors.SwitchAccountSheetAccountName.replace('{index}', index.toString());
+}
+
+export const AccountSelectors = {
+  SwitchAccountSheetAccountName: 'switch-account-sheet-account-name-{index}',
+};

tests/specs/bns-names/bns-names.spec.ts

@@ -0,0 +1,28 @@
+import { mockBnsV2NamesRequest } from '@tests/mocks/mock-stacks-bns';
+import { getSwitchAccountSheetAccountNameSelector } from '@tests/selectors/account.selectors';
+import { SettingsSelectors } from '@tests/selectors/settings.selectors';
+
+import { test } from '../../fixtures/fixtures';
+
+const ACCOUNT_ONE_NAME = 'leather.btc';
+
+test.describe('Bns v2 names', () => {
+  test.beforeEach(async ({ extensionId, globalPage, onboardingPage }) => {
+    await globalPage.setupAndUseApiCalls(extensionId);
+    await mockBnsV2NamesRequest(globalPage.page);
+    await onboardingPage.signInWithTestAccount(extensionId);
+  });
+
+  test('that correctly shows bns v2 account name', async ({ page }) => {
+    const accountName = page.getByTestId(SettingsSelectors.CurrentAccountDisplayName);
+
+    const accountNameText = await accountName.innerText();
+    test.expect(accountNameText).toEqual(ACCOUNT_ONE_NAME);
+    await accountName.click();
+
+    const accountOneName = page.getByTestId(getSwitchAccountSheetAccountNameSelector(0));
+    const accountOneNameText = await accountOneName.innerText();
+
+    test.expect(accountOneNameText).toEqual(ACCOUNT_ONE_NAME);
+  });
+});