even more test fixes

toolkit/theme/recipes/skeleton.recipe.ts

@@ -38,6 +38,7 @@ export const recipe = defineRecipe({
         '--end-color': 'colors.skeleton.bg.end',
         backgroundImage:
           'linear-gradient(90deg,var(--start-color) 8%,var(--end-color) 18%,var(--start-color) 33%)',
+        backgroundColor: 'transparent',
         backgroundSize: '200% 100%',
         animation: 'bg-position var(--duration, 2s) linear infinite',
       },

ui/address/AddressContract.pw.tsx

@@ -33,7 +33,7 @@ test.describe('ABI functionality', () => {
 
     await expect(component.getByRole('button', { name: 'Connect wallet' })).toBeVisible();
     await component.getByText('FLASHLOAN_PREMIUM_TOTAL').click();
-    await expect(component.getByRole('button', { name: 'Read' })).toBeVisible();
+    await expect(component.getByLabel('FLASHLOAN_PREMIUM_TOTAL').getByRole('button', { name: 'Read' })).toBeVisible();
   });
 
   test('read, no wallet client', async({ render, createSocket, mockEnvs }) => {
@@ -49,7 +49,7 @@ test.describe('ABI functionality', () => {
 
     await expect(component.getByRole('button', { name: 'Connect wallet' })).toBeHidden();
     await component.getByText('FLASHLOAN_PREMIUM_TOTAL').click();
-    await expect(component.getByRole('button', { name: 'Read' })).toBeVisible();
+    await expect(component.getByLabel('FLASHLOAN_PREMIUM_TOTAL').getByRole('button', { name: 'Read' })).toBeVisible();
   });
 
   test('write', async({ render, createSocket }) => {

ui/address/contract/methods/ContractMethodsRegular.pw.tsx

@@ -5,6 +5,7 @@ import type { SmartContractMethod } from './types';
 import * as addressMock from 'mocks/address/address';
 import * as methodsMock from 'mocks/contract/methods';
 import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import ContractMethodsRegular from './ContractMethodsRegular';
 
@@ -33,7 +34,7 @@ test('can read method', async({ render, mockContractReadResponse }) => {
   await expect(component.getByText('USDC')).toBeVisible({ timeout: 20_000 });
 });
 
-test('all methods +@dark-mode +@mobile', async({ render }) => {
+test('all methods +@dark-mode', async({ render }) => {
   const hooksConfig = {
     router: {
       query: { hash: addressHash, tab: 'read_write_contract' },
@@ -47,3 +48,24 @@ test('all methods +@dark-mode +@mobile', async({ render }) => {
 
   await expect(component).toHaveScreenshot();
 });
+
+test.describe('all methods', () => {
+  test.use({ viewport: pwConfig.viewport.mobile });
+
+  test('mobile', async({ render }) => {
+    test.slow();
+
+    const hooksConfig = {
+      router: {
+        query: { hash: addressHash, tab: 'read_write_contract' },
+      },
+    };
+
+    const abi: Array<SmartContractMethod> = [ ...methodsMock.read, ...methodsMock.write ];
+    const component = await render(<ContractMethodsRegular abi={ abi }/>, { hooksConfig });
+    await component.getByText(/expand all/i).click();
+    // await expect(component.getByText('HTTP request failed')).toBeVisible();
+
+    await expect(component).toHaveScreenshot();
+  });
+});

ui/address/details/AddressMetadataAlert.tsx

@@ -29,14 +29,15 @@ const AddressMetadataAlert = ({ tags, className }: Props) => {
           display="inline-block"
           css={{
             '& a': {
-              color: 'link',
+              color: 'link.primary',
               _hover: {
                 color: 'link.primary.hover',
               },
             },
           }}
-          dangerouslySetInnerHTML={{ __html: noteTag.meta?.data ?? '' }}
-        />
+        >
+          <div dangerouslySetInnerHTML={{ __html: noteTag.meta?.data ?? '' }}/>
+        </Alert>
       )) }
     </Flex>
   );

ui/address/ensDomains/AddressEnsDomains.pw.tsx

@@ -34,6 +34,6 @@ test('base view', async({ render, page, mockAssetResponse }) => {
       mainDomainName={ ensDomainMock.ensDomainA.name }
     />,
   );
-  await component.getByText('4').click();
+  await component.getByLabel('Address domains').click();
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 550, height: 350 } });
 });

ui/address/mud/AddressMudTable.pw.tsx

@@ -37,7 +37,7 @@ test('expanded view +@mobile', async({ render, mockApiResponse }) => {
     { hooksConfig },
   );
 
-  await component.locator('a[aria-label="show/hide columns"]').first().click();
+  await component.getByLabel('show/hide columns').click();
 
   await expect(component).toHaveScreenshot();
 });

ui/address/mud/AddressMudTables.pw.tsx

@@ -26,7 +26,7 @@ test('base view +@mobile', async({ render, mockApiResponse }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('with schema opened +@mobile', async({ render, mockApiResponse }) => {
+test('with schema opened +@mobile', async({ render, mockApiResponse }, testInfo) => {
   await mockApiResponse('address_mud_tables', mudTables, { pathParams: { hash: ADDRESS_HASH }, queryParams: { q: 'o' } });
 
   const component = await render(
@@ -36,7 +36,7 @@ test('with schema opened +@mobile', async({ render, mockApiResponse }) => {
     { hooksConfig },
   );
 
-  await component.locator('div[aria-label="View schema"]').first().click();
+  await component.getByLabel('View schema').nth(testInfo.project.name === 'mobile' ? 2 : 0).click();
 
   await expect(component).toHaveScreenshot();
 });

ui/address/tokenSelect/TokenSelect.pw.tsx

@@ -75,14 +75,14 @@ test('sort', async({ render, page }) => {
     { hooksConfig },
   );
   await page.getByRole('button', { name: /select/i }).click();
-  await page.locator('a[aria-label="Sort ERC-20 tokens"]').click();
+  await page.locator('[aria-label="Sort ERC-20 tokens"]').click();
 
   await page.mouse.wheel(0, -1000);
   await expect(page).toHaveScreenshot({ clip: CLIPPING_AREA });
 
   await page.mouse.move(100, 200);
   await page.mouse.wheel(0, 1000);
-  await page.locator('a[aria-label="Sort ERC-1155 tokens"]').click();
+  await page.locator('[aria-label="Sort ERC-1155 tokens"]').click();
 
   await expect(page).toHaveScreenshot({ clip: CLIPPING_AREA });
 });

ui/address/tokenSelect/TokenSelectMobile.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { FormattedData } from './types';
 
-import { DialogContent, DialogRoot } from 'toolkit/chakra/dialog';
+import { DialogBody, DialogContent, DialogHeader, DialogRoot, DialogTrigger } from 'toolkit/chakra/dialog';
 import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 
 import TokenSelectButton from './TokenSelectButton';
@@ -19,14 +19,17 @@ const TokenSelectMobile = ({ data, isLoading }: Props) => {
   const result = useTokenSelect(data);
 
   return (
-    <>
-      <TokenSelectButton isOpen={ open } data={ result.data } isLoading={ isLoading }/>
     <DialogRoot open={ open } onOpenChange={ onOpenChange } size="full">
+      <DialogTrigger asChild>
+        <TokenSelectButton isOpen={ open } data={ result.data } isLoading={ isLoading }/>
+      </DialogTrigger>
       <DialogContent>
+        <DialogHeader>Tokens</DialogHeader>
+        <DialogBody>
           <TokenSelectMenu { ...result }/>
+        </DialogBody>
       </DialogContent>
     </DialogRoot>
-    </>
   );
 };
 

ui/marketplace/MarketplaceAppModal.tsx

@@ -207,8 +207,8 @@ const MarketplaceAppModal = ({
           >
             <Flex flexWrap="wrap" gap={ 6 }>
               <Flex width={{ base: '100%', md: 'auto' }}>
-                <Link href={ external ? url : route({ pathname: '/apps/[id]', query: { id: data.id } }) } external={ external } noIcon>
-                  <Button size="sm" mr={ 2 } w={{ base: '100%', sm: 'auto' }}>
+                <Link href={ external ? url : route({ pathname: '/apps/[id]', query: { id: data.id } }) } external={ external } noIcon mr={ 2 }>
+                  <Button size="sm">
                     Launch app
                   </Button>
                 </Link>

ui/marketplace/Rating/TriggerButton.tsx

@@ -45,8 +45,7 @@ const TriggerButton = (
           <Button
             ref={ ref }
             size="xs"
-            variant="outline"
-            border={ 0 }
+            variant="link"
             p={ 0 }
             fontSize={ fullView ? 'md' : 'sm' }
             fontWeight={ fullView ? '400' : '500' }

ui/pages/Marketplace.pw.tsx

@@ -28,16 +28,20 @@ test.beforeEach(async({ mockConfigResponse, mockEnvs, mockAssetResponse, page })
   }));
 });
 
-test('base view +@dark-mode', async({ render }) => {
+test('base view +@dark-mode', async({ render, page }) => {
+  await page.evaluate(() => window.localStorage.setItem('favoriteApps', '["hop-exchange"]'));
+
   const component = await render(<Marketplace/>);
 
   await expect(component).toHaveScreenshot();
 });
 
-test('with featured app +@dark-mode', async({ render, mockEnvs }) => {
+test('with featured app +@dark-mode', async({ render, mockEnvs, page }) => {
   await mockEnvs([
     [ 'NEXT_PUBLIC_MARKETPLACE_FEATURED_APP', 'hop-exchange' ],
   ]);
+  await page.evaluate(() => window.localStorage.setItem('favoriteApps', '["hop-exchange"]'));
+
   const component = await render(<Marketplace/>);
 
   await expect(component).toHaveScreenshot();
@@ -62,7 +66,8 @@ test('with banner +@dark-mode', async({ render, mockEnvs, mockConfigResponse })
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  test('base view', async({ render }) => {
+  test('base view', async({ render, page }) => {
+    await page.evaluate(() => window.localStorage.setItem('favoriteApps', '["hop-exchange"]'));
     const component = await render(
       <Box>
         { /* Added a fake header because without the ActionBar works incorrectly without it */ }
@@ -76,10 +81,11 @@ test.describe('mobile', () => {
     await expect(component).toHaveScreenshot();
   });
 
-  test('with featured app', async({ render, mockEnvs }) => {
+  test('with featured app', async({ render, mockEnvs, page }) => {
     await mockEnvs([
       [ 'NEXT_PUBLIC_MARKETPLACE_FEATURED_APP', 'hop-exchange' ],
     ]);
+    await page.evaluate(() => window.localStorage.setItem('favoriteApps', '["hop-exchange"]'));
     const component = await render(<Marketplace/>);
 
     await expect(component).toHaveScreenshot();

ui/searchResults/SearchResultListItem.tsx

@@ -311,8 +311,8 @@ const SearchResultListItem = ({ data, searchTerm, isLoading, addressFormat }: Pr
 
         return (
           <>
-            <Skeleton loading={ isLoading } as={ shouldHighlightHash ? 'mark' : 'span' } display="block" whiteSpace="nowrap" overflow="hidden" mb={ 1 }>
-              <HashStringShortenDynamic hash={ data.block_hash }/>
+            <Skeleton loading={ isLoading } display="block" whiteSpace="nowrap" overflow="hidden" mb={ 1 }>
+              <HashStringShortenDynamic hash={ data.block_hash } as={ shouldHighlightHash ? 'mark' : 'span' }/>
             </Skeleton>
             <Skeleton loading={ isLoading } color="text.secondary" mr={ 2 }>
               <span>{ dayjs(data.timestamp).format('llll') }</span>

ui/searchResults/SearchResultTableItem.tsx

@@ -280,8 +280,8 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading, addressFormat }: P
                 <Flex columnGap={ 2 } alignItems="center">
                   { data.block_type === 'reorg' && !isLoading && <Tag flexShrink={ 0 }>Reorg</Tag> }
                   { data.block_type === 'uncle' && !isLoading && <Tag flexShrink={ 0 }>Uncle</Tag> }
-                  <Skeleton loading={ isLoading } overflow="hidden" whiteSpace="nowrap" as={ shouldHighlightHash ? 'mark' : 'span' } display="block">
-                    <HashStringShortenDynamic hash={ data.block_hash }/>
+                  <Skeleton loading={ isLoading } overflow="hidden" whiteSpace="nowrap" display="block">
+                    <HashStringShortenDynamic hash={ data.block_hash } as={ shouldHighlightHash ? 'mark' : 'span' }/>
                   </Skeleton>
                 </Flex>
               ) }

ui/shared/NetworkExplorers.pw.tsx

@@ -6,6 +6,6 @@ import NetworkExplorers from './NetworkExplorers';
 
 test('base view', async({ render, page }) => {
   const component = await render(<NetworkExplorers type="tx" pathParam="0x123"/>);
-  await component.getByText('2').click();
+  await component.getByLabel('Verify with other explorers').click();
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 300, height: 150 } });
 });

ui/shared/logs/LogTopic.pw.tsx

@@ -4,16 +4,18 @@ import { test, expect } from 'playwright/lib';
 
 import LogTopic from './LogTopic';
 
-test('address view +@mobile -@default', async({ render }) => {
+test('address view +@mobile -@default', async({ render, page }) => {
   const component = await render(<LogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>);
-  await component.locator('select[aria-label="Data type"]').selectOption('address');
+  await component.getByRole('combobox').click();
+  await page.getByRole('option', { name: /address/i }).click();
 
   await expect(component).toHaveScreenshot();
 });
 
-test('hex view +@mobile -@default', async({ render }) => {
+test('hex view +@mobile -@default', async({ render, page }) => {
   const component = await render(<LogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>);
-  await component.locator('select[aria-label="Data type"]').selectOption('hex');
+  await component.getByRole('combobox').click();
+  await page.getByRole('option', { name: /hex/i }).click();
 
   await expect(component).toHaveScreenshot();
 });

ui/snippets/auth/AuthModal.pw.tsx

@@ -26,7 +26,12 @@ test('email login', async({ render, page, mockApiResponse }) => {
   await page.getByText('Send a code').click();
 
   // fill otp code
-  await page.getByLabel(/enter your pin code/i).nth(0).fill('123456');
+  await page.getByLabel('pin code 1 of 6').fill('1');
+  await page.getByLabel('pin code 2 of 6').fill('2');
+  await page.getByLabel('pin code 3 of 6').fill('3');
+  await page.getByLabel('pin code 4 of 6').fill('4');
+  await page.getByLabel('pin code 5 of 6').fill('5');
+  await page.getByLabel('pin code 6 of 6').fill('6');
   await expect(page).toHaveScreenshot();
 
   // submit otp code
@@ -56,7 +61,12 @@ linkEmailTest('link email to account', async({ render, page, mockApiResponse })
   // send and fill otp code
   await mockApiResponse('auth_send_otp', {} as never);
   await page.getByText('Send a code').click();
-  await page.getByLabel(/enter your pin code/i).nth(0).fill('123456');
+  await page.getByLabel('pin code 1 of 6').fill('1');
+  await page.getByLabel('pin code 2 of 6').fill('2');
+  await page.getByLabel('pin code 3 of 6').fill('3');
+  await page.getByLabel('pin code 4 of 6').fill('4');
+  await page.getByLabel('pin code 5 of 6').fill('5');
+  await page.getByLabel('pin code 6 of 6').fill('6');
   await mockApiResponse('auth_link_email', profileMock.base as never);
   await page.getByText('Submit').click();
 

ui/snippets/searchBar/SearchBarInput.tsx

@@ -139,7 +139,7 @@ const SearchBarInput = (
       position={{ base: isHomepage ? 'static' : 'absolute', lg: 'relative' }}
       top={{ base: isHomepage ? 0 : 55, lg: 0 }}
       left="0"
-      zIndex={{ base: isHomepage ? 'auto' : '-1', lg: isSuggestOpen ? 'popover' : 'auto' }}
+      zIndex={{ base: isHomepage ? 'auto' : '0', lg: isSuggestOpen ? 'popover' : 'auto' }}
       paddingX={{ base: isHomepage ? 0 : 3, lg: 0 }}
       paddingTop={{ base: isHomepage ? 0 : 1, lg: 0 }}
       paddingBottom={{ base: isHomepage ? 0 : 2, lg: 0 }}
@@ -159,6 +159,7 @@ const SearchBarInput = (
           placeholder={ isMobile ? 'Search by address / ... ' : 'Search by address / txn hash / block / token... ' }
           value={ value }
           onChange={ handleChange }
+          onFocus={ onFocus }
           border={ isHomepage ? 'none' : '2px solid' }
           borderColor={{ _light: 'blackAlpha.100', _dark: 'whiteAlpha.200' }}
           color={{ _light: 'black', _dark: 'white' }}

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx

@@ -49,7 +49,7 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm, addressFormat }:
             <span>{ expiresText }</span>
         ) }
       </Text>
-      { data.certified && <ContractCertifiedLabel boxSize={ 4 } iconSize={ 4 } ml={ 1 }/> }
+      { data.certified && <ContractCertifiedLabel boxSize={ 4 } iconSize={ 4 } ml={ 1 } flexShrink={ 0 }/> }
     </Flex>
   );
   const tagEl = data.type === 'metadata_tag' ? (

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx

@@ -13,8 +13,8 @@ import IconSvg from 'ui/shared/IconSvg';
 
 const SearchBarSuggestToken = ({ data, isMobile, searchTerm, addressFormat }: ItemsProps<SearchResultToken>) => {
   const icon = <TokenEntity.Icon token={{ ...data, type: data.token_type }}/>;
-  const verifiedIcon = <IconSvg name="certified" boxSize={ 4 } color="green.500" ml={ 1 }/>;
-  const certifiedIcon = <ContractCertifiedLabel iconSize={ 4 } boxSize={ 4 } ml={ 1 }/>;
+  const verifiedIcon = <IconSvg name="certified" boxSize={ 4 } color="green.500" ml={ 1 } flexShrink={ 0 }/>;
+  const certifiedIcon = <ContractCertifiedLabel iconSize={ 4 } boxSize={ 4 } ml={ 1 } flexShrink={ 0 }/>;
   const hash = data.filecoin_robust_address || (addressFormat === 'bech32' ? toBech32Address(data.address) : data.address);
 
   const name = (

ui/tokenInstance/TokenInstanceMetadata.pw.tsx

@@ -21,9 +21,9 @@ test('base view +@mobile', async({ render }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('raw view', async({ render }) => {
+test('raw view', async({ render, page }) => {
   const component = await render(<TokenInstanceMetadata data={ tokenInstanceMock.withRichMetadata.metadata }/>);
-  await component.getByRole('button', { name: 'Table' }).click();
-  await component.getByText('JSON').click();
+  await component.getByRole('combobox').click();
+  await page.getByRole('option', { name: 'JSON' }).click();
   await expect(component).toHaveScreenshot();
 });

ui/tokenInstance/TokenInstanceMetadata.tsx

@@ -28,12 +28,12 @@ interface Props {
 }
 
 const TokenInstanceMetadata = ({ data, isPlaceholderData }: Props) => {
-  const [ format, setFormat ] = React.useState<Format>('Table');
+  const [ format, setFormat ] = React.useState<Array<Format>>([ 'Table' ]);
 
   const { status: refetchStatus } = useMetadataUpdateContext() || {};
 
   const handleValueChange = React.useCallback(({ value }: { value: Array<string> }) => {
-    setFormat(value[0] as Format);
+    setFormat(value as Array<Format>);
   }, []);
 
   if (isPlaceholderData || refetchStatus === 'WAITING_FOR_RESPONSE') {
@@ -44,7 +44,7 @@ const TokenInstanceMetadata = ({ data, isPlaceholderData }: Props) => {
     return <Box>There is no metadata for this NFT</Box>;
   }
 
-  const content = format === 'Table' ?
+  const content = format[0] === 'Table' ?
     <MetadataAccordion data={ data }/> :
     <RawDataSnippet data={ JSON.stringify(data, undefined, 4) } showCopy={ false }/>;
 
@@ -60,12 +60,12 @@ const TokenInstanceMetadata = ({ data, isPlaceholderData }: Props) => {
         <Select
           collection={ collection }
           placeholder="Select type"
-          defaultValue={ [ format ] }
+          value={ format }
           onValueChange={ handleValueChange }
           ml={ 5 }
           w="100px"
         />
-        { format === 'JSON' && <CopyToClipboard text={ JSON.stringify(data) } ml="auto"/> }
+        { format[0] === 'JSON' && <CopyToClipboard text={ JSON.stringify(data) } ml="auto"/> }
       </Flex>
       { content }
     </Box>