Home page test

ui/pages/Home.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as blockMock from 'mocks/blocks/block';
+import * as dailyTxsMock from 'mocks/stats/daily_txs';
+import * as statsMock from 'mocks/stats/index';
+import * as txMock from 'mocks/txs/tx';
+import TestApp from 'playwright/TestApp';
+
+import Home from './Home';
+
+test('default view -@default +@desktop-xl +@mobile +@dark-mode', async({ mount, page }) => {
+  await page.route('/node-api/stats', (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(statsMock.base),
+  }));
+  await page.route('/node-api/index/blocks', (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify([
+      blockMock.base,
+      blockMock.base2,
+    ]),
+  }));
+  await page.route('/node-api/index/txs', (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify([
+      txMock.base,
+      txMock.withContractCreation,
+      txMock.withTokenTransfer,
+    ]),
+  }));
+  await page.route('/node-api/stats/charts/transactions', (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(dailyTxsMock.base),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <Home/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});

ui/shared/UserAvatar.tsx

@@ -7,10 +7,12 @@ import type { UserInfo } from 'types/api/account';
 import { useAppContext } from 'lib/appContext';
 import * as cookies from 'lib/cookies';
 
+const IdenticonComponent = typeof Identicon === 'object' && 'default' in Identicon ? Identicon.default : Identicon;
+
 // for those who haven't got profile
 // or if we cannot download the profile picture for some reasons
 const FallbackImage = ({ size, id }: { size: number; id: string }) => {
-  const bgColor = useToken('colors', useColorModeValue('blackAlpha.100', 'white'));
+  const bgColor = useToken('colors', useColorModeValue('gray.100', 'white'));
 
   return (
     <Box
@@ -19,7 +21,7 @@ const FallbackImage = ({ size, id }: { size: number; id: string }) => {
       maxHeight={ `${ size }px` }
     >
       <Box boxSize={ `${ size * 2 }px` } transformOrigin="left top" transform="scale(0.5)" borderRadius="full" overflow="hidden">
-        <Identicon
+        <IdenticonComponent
           bg={ bgColor }
           string={ id }
           // the displayed size is doubled for retina displays and then scaled down