chore: upgrade playwright

.vscode/tasks.json

@@ -0,0 +1,16 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Check TypeScript Errors",
+      "type": "shell",
+      "command": "npx tsc --noEmit",
+      "problemMatcher": ["$tsc"],
+      "group": "build",
+      "presentation": {
+        "reveal": "always",
+        "panel": "shared"
+      }
+    }
+  ]
+}

package.json

@@ -141,14 +141,15 @@
     "@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.15.0",
+    "@hookform/resolvers": "3.9.1",
+    "@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.18.0",
-    "@leather.io/stacks": "1.2.4",
-    "@leather.io/tokens": "0.9.1",
-    "@leather.io/ui": "1.31.1",
+    "@leather.io/query": "2.19.0",
+    "@leather.io/stacks": "1.3.0",
+    "@leather.io/tokens": "0.9.2",
+    "@leather.io/ui": "1.32.0",
     "@leather.io/utils": "0.16.7",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.5.0",
@@ -176,7 +177,7 @@
     "@stacks/profile": "6.15.0",
     "@stacks/rpc-client": "1.0.3",
     "@stacks/storage": "6.15.0",
-    "@stacks/transactions": "6.15.0",
+    "@stacks/transactions": "6.17.0",
     "@stacks/wallet-sdk": "6.15.0",
     "@stitches/react": "1.2.8",
     "@storybook/addon-styling-webpack": "1.0.0",
@@ -262,13 +263,13 @@
     "@btckit/types": "0.0.19",
     "@chromatic-com/storybook": "1.2.23",
     "@leather.io/eslint-config": "0.7.0",
-    "@leather.io/panda-preset": "0.4.1",
+    "@leather.io/panda-preset": "0.4.2",
     "@leather.io/prettier-config": "0.6.0",
     "@leather.io/rpc": "2.1.14",
     "@ls-lint/ls-lint": "2.2.3",
     "@mdx-js/loader": "3.0.0",
     "@pandacss/dev": "0.46.1",
-    "@playwright/test": "1.44.0",
+    "@playwright/test": "1.48.2",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.13",
     "@redux-devtools/cli": "4.0.0",
     "@redux-devtools/remote": "0.9.3",

src/app/features/collectibles/components/bitcoin/ordinals.tsx

@@ -1,7 +1,5 @@
 import { useEffect } from 'react';
 
-import { useInscriptions } from '@leather.io/query';
-
 import { analytics } from '@shared/utils/analytics';
 
 import { useInscriptions } from '@app/query/bitcoin/ordinals/inscriptions/inscriptions.query';

src/app/features/collectibles/components/collectible-item.layout.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { useInView } from 'react-intersection-observer';
 
 import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
 import { Box, Stack, styled } from 'leather-styles/jsx';
@@ -31,8 +32,11 @@ export function CollectibleItemLayout({
 }: CollectibleItemLayoutProps) {
   const [isHovered, bind] = useHover();
 
+  const { ref, inView } = useInView();
+
   return (
     <Box
+      ref={ref}
       _focus={{
         outline: onClickLayout ? 'focus' : 'unset',
         outlineOffset: onClickLayout ? '-4px' : 'unset',
@@ -71,7 +75,7 @@ export function CollectibleItemLayout({
           top="0px"
           width="100%"
         >
-          {children}
+          {inView ? children : null}
         </Box>
       </Box>
       <Stack gap="space.01" mt="space.04" pl="space.02" textAlign="left">

src/app/features/collectibles/components/collectible.layout.tsx

@@ -16,7 +16,6 @@ export function CollectiblesLayout({
   isLoading,
   onRefresh,
   subHeader,
-
   children,
 }: CollectiblesLayoutProps) {
   return (

src/app/query/bitcoin/ordinals/inscriptions/inscriptions.query.ts

@@ -44,7 +44,7 @@ export function useCurrentTaprootAccountUninscribedUtxos() {
     taprootKeychain: taprootAccount?.keychain,
     currentAccountIndex,
   });
-  const query = useInscriptions({ xpubs: [taprootAccount?.keychain.publicExtendedKey!] });
+  const query = useInscriptions({ xpubs: [`tr(${taprootAccount?.keychain.publicExtendedKey!})`] });
   return useMemo(
     () => filterUninscribedUtxosToRecoverFromTaproot(utxos, query.inscriptions ?? []),
     [query.inscriptions, utxos]

src/app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks.ts

@@ -7,7 +7,7 @@ import { Psbt } from 'bitcoinjs-lib';
 import {
   deriveAddressIndexZeroFromAccount,
   deriveNativeSegwitAccountFromRootKeychain,
-  getNativeSegWitPaymentFromAddressIndex,
+  getNativeSegwitPaymentFromAddressIndex,
   lookUpLedgerKeysByPath,
   makeNativeSegwitAccountDerivationPath,
 } from '@leather.io/bitcoin';
@@ -67,7 +67,7 @@ export function useNativeSegwitNetworkSigners() {
   return useMakeBitcoinNetworkSignersForPaymentType(
     mainnetKeychain,
     testnetKeychain,
-    getNativeSegWitPaymentFromAddressIndex
+    getNativeSegwitPaymentFromAddressIndex
   );
 }
 
@@ -80,7 +80,7 @@ export function useNativeSegwitSigner(accountIndex: number) {
     return bitcoinAddressIndexSignerFactory({
       accountIndex,
       accountKeychain: account.keychain,
-      paymentFn: getNativeSegWitPaymentFromAddressIndex,
+      paymentFn: getNativeSegwitPaymentFromAddressIndex,
       network: account.network,
       extendedPublicKeyVersions,
     });
@@ -131,7 +131,7 @@ export function getNativeSegwitMainnetAddressFromMnemonic(secretKey: string) {
   return (accountIndex: number) => {
     const rootNode = mnemonicToRootNode(secretKey);
     const account = deriveNativeSegwitAccountFromRootKeychain(rootNode, 'mainnet')(accountIndex);
-    return getNativeSegWitPaymentFromAddressIndex(
+    return getNativeSegwitPaymentFromAddressIndex(
       deriveAddressIndexZeroFromAccount(account.keychain),
       'mainnet'
     );

tests/mocks/mock-inscriptions-bis.ts

@@ -3,25 +3,22 @@ import type { Page } from '@playwright/test';
 import { BESTINSLOT_API_BASE_URL_TESTNET } from '@leather.io/models';
 import { type BestInSlotInscriptionResponse } from '@leather.io/query';
 
-import { TEST_TESTNET_ACCOUNT_2_TAPROOT_ADDRESS } from './constants';
-
 export async function mockTestnetTestAccountInscriptionsRequests(
   page: Page,
   inscriptions: BestInSlotInscriptionResponse[]
 ) {
-  await page.route(`${BESTINSLOT_API_BASE_URL_TESTNET}/wallet/inscriptions_batch`, async route => {
-    const request = route.request();
-    const data = request.postData();
-    const requestBody = data ? JSON.parse(data) : {};
+  await page.route(
+    new RegExp(`${BESTINSLOT_API_BASE_URL_TESTNET}/wallet/inscriptions_xpub.*`),
+    async route => {
+      const request = route.request();
 
-    if (requestBody.addresses?.includes(TEST_TESTNET_ACCOUNT_2_TAPROOT_ADDRESS)) {
-      await route.fulfill({
-        json: { block_height: 859832, data: inscriptions },
-      });
-      return;
+      if (request.url().includes('xpub=tr')) {
+        await route.fulfill({
+          json: { block_height: 859832, data: inscriptions },
+        });
+        return;
+      }
+      await route.fulfill({ json: { block_height: 859832, data: [] } });
     }
-    await route.fulfill({
-      json: { block_height: 859832, data: [] },
-    });
-  });
+  );
 }

tests/page-object-models/onboarding.page.ts

@@ -4,7 +4,7 @@ import { HomePageSelectors } from '@tests/selectors/home.selectors';
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
 
 import type { SupportedBlockchains } from '@leather.io/models';
-import { createCounter } from '@leather.io/utils';
+import { createCounter, delay } from '@leather.io/utils';
 
 import { RouteUrls } from '@shared/route-urls';
 
@@ -312,7 +312,8 @@ export class OnboardingPage {
         testAccountDerivedKey
       );
 
-      await this.page.goto(`chrome-extension://${id}/index.html`, { waitUntil: 'networkidle' });
+      await this.page.goto(`chrome-extension://${id}/index.html`);
+      await delay(1000 * iterationCounter.getValue());
 
       iterationCounter.increment();
     } while (!(await isSignedIn()));

tests/specs/compliance-checks/compliance-checks.spec.ts

@@ -6,17 +6,15 @@ import { test } from '../../fixtures/fixtures';
 
 function mockChainalysisEntityRegistrationRequest(context: BrowserContext) {
   return async (routeHandler: (route: Route) => void) => {
-    console.log('Mocking entity registration');
-    context.route('https://api.chainalysis.com/api/risk/v2/entities', async route =>
+    return context.route('https://api.chainalysis.com/api/risk/v2/entities', async route =>
       routeHandler(route)
     );
   };
 }
 
 function mockChainalysisEntityCheckRequest(context: BrowserContext) {
   return async (routeHandler: (route: Route) => void) => {
-    console.log('Mocking entity check');
-    context.route('https://api.chainalysis.com/api/risk/v2/entities/*', async route =>
+    return context.route('https://api.chainalysis.com/api/risk/v2/entities/*', async route =>
       routeHandler(route)
     );
   };

tests/specs/send/send-inscription.spec.ts

@@ -11,11 +11,16 @@ import { FormErrorMessages } from '@shared/error-messages';
 
 import { test } from '../../fixtures/fixtures';
 
-test.describe('send inscription', () => {
+const mockInscriptionResp = {
+  ...mockInscriptionResponse3,
+  owner_wallet_addr: TEST_TESTNET_ACCOUNT_2_TAPROOT_ADDRESS,
+};
+
+test.describe('Send inscription', () => {
   test.beforeEach(async ({ extensionId, globalPage, onboardingPage }) => {
     await globalPage.setupAndUseApiCalls(extensionId);
     await onboardingPage.signInWithTestAccount(extensionId);
-    await mockTestnetTestAccountInscriptionsRequests(globalPage.page, [mockInscriptionResponse3]);
+    await mockTestnetTestAccountInscriptionsRequests(globalPage.page, [mockInscriptionResp]);
   });
 
   test.describe('valid send inscription data', () => {
@@ -73,7 +78,10 @@ test.describe('send inscription', () => {
       sendPage,
     }) => {
       await mockTestnetTestAccountInscriptionsRequests(globalPage.page, [
-        mockInscriptionResponseNonZeroOffset,
+        {
+          ...mockInscriptionResponseNonZeroOffset,
+          owner_wallet_addr: TEST_TESTNET_ACCOUNT_2_TAPROOT_ADDRESS,
+        },
       ]);
       await homePage.selectTestnet();
       await sendPage.selectInscription();
@@ -95,8 +103,8 @@ test.describe('send inscription', () => {
     sendPage,
   }) => {
     await mockTestnetTestAccountInscriptionsRequests(globalPage.page, [
-      mockInscriptionResponse3,
-      mockInscriptionResponse3,
+      mockInscriptionResp,
+      mockInscriptionResp,
     ]);
     await homePage.selectTestnet();
     await sendPage.selectInscription();