feat: add bns v2 names integration test

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 isBnsV2Collectible(name: string) {
+    return bnsNames?.includes(name);
+  }
+
   return (
     <>
-      {(names ?? []).map(name => (
+      {(bnsNames ?? []).map(name => (
         <StacksBnsName bnsName={parseIfValidPunycode(name)} key={name} />
       ))}
+
       {stacksNftsMetadataResp.map((nft, i) => {
         if (!nft || !nft.metadata) return null;
+
+        if (isBnsV2Collectible(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';

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);
+  });
+});