Top bar and dimmed color theme

lib/cookies.ts

@@ -9,6 +9,7 @@ export enum NAMES {
   CONFIRM_EMAIL_PAGE_VIEWED='confirm_email_page_viewed',
   TXS_SORT='txs_sort',
   COLOR_MODE='chakra-ui-color-mode',
+  COLOR_MODE_HEX='chakra-ui-color-mode-hex',
   INDEXING_ALERT='indexing_alert',
   ADBLOCK_DETECTED='adblock_detected',
   MIXPANEL_DEBUG='_mixpanel_debug',

lib/html-entities.ts

@@ -1,5 +1,6 @@
-// https://unicode-table.com
-export const asymp = String.fromCharCode(8776); // ~
+// https://symbl.cc/en/
+export const asymp = String.fromCharCode(8776); // ≈
+export const tilde = String.fromCharCode(126); // ~
 export const hellip = String.fromCharCode(8230); // …
 export const nbsp = String.fromCharCode(160); // no-break Space
 export const thinsp = String.fromCharCode(8201); // thin Space

types/api/stats.ts

@@ -3,7 +3,7 @@ export type HomeStats = {
   total_addresses: string;
   total_transactions: string;
   average_block_time: number;
-  coin_price: string;
+  coin_price: string | null;
   total_gas_used: string;
   transactions_today: string;
   gas_used_today: string;

ui/pages/SearchResults.pw.tsx

@@ -8,8 +8,6 @@ import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
 import TestApp from 'playwright/TestApp';
 import * as app from 'playwright/utils/app';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
-import LayoutMainColumn from 'ui/shared/layout/components/MainColumn';
 
 import SearchResults from './SearchResults';
 
@@ -47,17 +45,12 @@ test.describe('search by name ', () => {
 
     const component = await mount(
       <TestApp>
-        <LayoutMainColumn>
-          <SearchResults/>
-        </LayoutMainColumn>
+        <SearchResults/>
       </TestApp>,
       { hooksConfig },
     );
 
-    await expect(component).toHaveScreenshot({
-      mask: [ page.locator('header'), page.locator('form') ],
-      maskColor: configs.maskColor,
-    });
+    await expect(component.locator('main')).toHaveScreenshot();
   });
 });
 
@@ -78,17 +71,12 @@ test('search by address hash +@mobile', async({ mount, page }) => {
 
   const component = await mount(
     <TestApp>
-      <LayoutMainColumn>
-        <SearchResults/>
-      </LayoutMainColumn>
+      <SearchResults/>
     </TestApp>,
     { hooksConfig },
   );
 
-  await expect(component).toHaveScreenshot({
-    mask: [ page.locator('header'), page.locator('form') ],
-    maskColor: configs.maskColor,
-  });
+  await expect(component.locator('main')).toHaveScreenshot();
 });
 
 test('search by block number +@mobile', async({ mount, page }) => {
@@ -109,17 +97,12 @@ test('search by block number +@mobile', async({ mount, page }) => {
 
   const component = await mount(
     <TestApp>
-      <LayoutMainColumn>
-        <SearchResults/>
-      </LayoutMainColumn>
+      <SearchResults/>
     </TestApp>,
     { hooksConfig },
   );
 
-  await expect(component).toHaveScreenshot({
-    mask: [ page.locator('header'), page.locator('form') ],
-    maskColor: configs.maskColor,
-  });
+  await expect(component.locator('main')).toHaveScreenshot();
 });
 
 test('search by block hash +@mobile', async({ mount, page }) => {
@@ -139,17 +122,12 @@ test('search by block hash +@mobile', async({ mount, page }) => {
 
   const component = await mount(
     <TestApp>
-      <LayoutMainColumn>
-        <SearchResults/>
-      </LayoutMainColumn>
+      <SearchResults/>
     </TestApp>,
     { hooksConfig },
   );
 
-  await expect(component).toHaveScreenshot({
-    mask: [ page.locator('header'), page.locator('form') ],
-    maskColor: configs.maskColor,
-  });
+  await expect(component.locator('main')).toHaveScreenshot();
 });
 
 test('search by tx hash +@mobile', async({ mount, page }) => {
@@ -169,17 +147,12 @@ test('search by tx hash +@mobile', async({ mount, page }) => {
 
   const component = await mount(
     <TestApp>
-      <LayoutMainColumn>
-        <SearchResults/>
-      </LayoutMainColumn>
+      <SearchResults/>
     </TestApp>,
     { hooksConfig },
   );
 
-  await expect(component).toHaveScreenshot({
-    mask: [ page.locator('header'), page.locator('form') ],
-    maskColor: configs.maskColor,
-  });
+  await expect(component.locator('main')).toHaveScreenshot();
 });
 
 test.describe('with apps', () => {
@@ -228,16 +201,11 @@ test.describe('with apps', () => {
 
     const component = await mount(
       <TestApp>
-        <LayoutMainColumn>
-          <SearchResults/>
-        </LayoutMainColumn>
+        <SearchResults/>
       </TestApp>,
       { hooksConfig },
     );
 
-    await expect(component).toHaveScreenshot({
-      mask: [ page.locator('header'), page.locator('form') ],
-      maskColor: configs.maskColor,
-    });
+    await expect(component.locator('main')).toHaveScreenshot();
   });
 });

ui/pages/SearchResults.tsx

@@ -15,8 +15,9 @@ import * as Layout from 'ui/shared/layout/components';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import Thead from 'ui/shared/TheadSticky';
-import Header from 'ui/snippets/header/Header';
 import HeaderAlert from 'ui/snippets/header/HeaderAlert';
+import HeaderDesktop from 'ui/snippets/header/HeaderDesktop';
+import HeaderMobile from 'ui/snippets/header/HeaderMobile';
 import useSearchQuery from 'ui/snippets/searchBar/useSearchQuery';
 
 const SearchResultsPageContent = () => {
@@ -181,13 +182,20 @@ const SearchResultsPageContent = () => {
 
   return (
     <>
-      <HeaderAlert/>
-      <Header renderSearchBar={ renderSearchBar }/>
-      <AppErrorBoundary>
-        <Layout.Content>
-          { pageContent }
-        </Layout.Content>
-      </AppErrorBoundary>
+      <HeaderMobile renderSearchBar={ renderSearchBar }/>
+      <Layout.MainArea>
+        <Layout.SideBar/>
+        <Layout.MainColumn>
+          <HeaderAlert/>
+          <HeaderDesktop renderSearchBar={ renderSearchBar }/>
+          <AppErrorBoundary>
+            <Layout.Content>
+              { pageContent }
+            </Layout.Content>
+          </AppErrorBoundary>
+        </Layout.MainColumn>
+      </Layout.MainArea>
+      <Layout.Footer/>
     </>
   );
 };

ui/shared/layout/Layout.tsx

@@ -3,19 +3,22 @@ import React from 'react';
 import type { Props } from './types';
 
 import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
-import Header from 'ui/snippets/header/Header';
 import HeaderAlert from 'ui/snippets/header/HeaderAlert';
+import HeaderDesktop from 'ui/snippets/header/HeaderDesktop';
+import HeaderMobile from 'ui/snippets/header/HeaderMobile';
 
 import * as Layout from './components';
 
 const LayoutDefault = ({ children }: Props) => {
   return (
     <Layout.Container>
+      <Layout.TopRow/>
+      <HeaderMobile/>
       <Layout.MainArea>
         <Layout.SideBar/>
         <Layout.MainColumn>
           <HeaderAlert/>
-          <Header/>
+          <HeaderDesktop/>
           <AppErrorBoundary>
             <Layout.Content>
               { children }

ui/shared/layout/LayoutError.tsx

@@ -3,19 +3,22 @@ import React from 'react';
 import type { Props } from './types';
 
 import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
-import Header from 'ui/snippets/header/Header';
 import HeaderAlert from 'ui/snippets/header/HeaderAlert';
+import HeaderDesktop from 'ui/snippets/header/HeaderDesktop';
+import HeaderMobile from 'ui/snippets/header/HeaderMobile';
 
 import * as Layout from './components';
 
 const LayoutError = ({ children }: Props) => {
   return (
     <Layout.Container>
+      <Layout.TopRow/>
+      <HeaderMobile/>
       <Layout.MainArea>
         <Layout.SideBar/>
         <Layout.MainColumn>
           <HeaderAlert/>
-          <Header/>
+          <HeaderDesktop/>
           <AppErrorBoundary>
             <main>
               { children }

ui/shared/layout/LayoutHome.tsx

@@ -3,21 +3,22 @@ import React from 'react';
 import type { Props } from './types';
 
 import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
-import Header from 'ui/snippets/header/Header';
 import HeaderAlert from 'ui/snippets/header/HeaderAlert';
+import HeaderMobile from 'ui/snippets/header/HeaderMobile';
 
 import * as Layout from './components';
 
 const LayoutHome = ({ children }: Props) => {
   return (
     <Layout.Container>
+      <Layout.TopRow/>
+      <HeaderMobile isHomePage/>
       <Layout.MainArea>
         <Layout.SideBar/>
         <Layout.MainColumn
-          paddingTop={{ base: '88px', lg: 9 }}
+          paddingTop={{ base: 6, lg: 9 }}
         >
           <HeaderAlert/>
-          <Header isHomePage/>
           <AppErrorBoundary>
             { children }
           </AppErrorBoundary>

ui/shared/layout/LayoutSearchResults.tsx

@@ -8,13 +8,8 @@ const LayoutSearchResults = ({ children }: Props) => {
 
   return (
     <Layout.Container>
-      <Layout.MainArea>
-        <Layout.SideBar/>
-        <Layout.MainColumn>
-          { children }
-        </Layout.MainColumn>
-      </Layout.MainArea>
-      <Layout.Footer/>
+      <Layout.TopRow/>
+      { children }
     </Layout.Container>
   );
 };

ui/shared/layout/components/MainColumn.tsx

@@ -14,7 +14,7 @@ const MainColumn = ({ children, className }: Props) => {
       flexGrow={ 1 }
       w={{ base: '100%', lg: 'auto' }}
       paddingX={{ base: 4, lg: 12 }}
-      paddingTop={{ base: '138px', lg: 9 }}
+      paddingTop={{ base: `${ 32 + 60 }px`, lg: 9 }} // 32px is top padding of content area, 60px is search bar height
       paddingBottom={ 10 }
     >
       { children }

ui/shared/layout/components/index.tsx

@@ -1,4 +1,5 @@
 import Footer from 'ui/snippets/footer/Footer';
+import TopRow from 'ui/snippets/topBar/TopBar';
 
 import Container from './Container';
 import Content from './Content';
@@ -13,9 +14,11 @@ export {
   SideBar,
   MainColumn,
   Footer,
+  TopRow,
 };
 
 // Container
+//    TopRow
 //    MainArea
 //       SideBar
 //       MainColumn

ui/snippets/footer/Footer.tsx

@@ -18,7 +18,6 @@ import useFetch from 'lib/hooks/useFetch';
 import useIssueUrl from 'lib/hooks/useIssueUrl';
 import NetworkAddToWallet from 'ui/shared/NetworkAddToWallet';
 
-import ColorModeToggler from '../header/ColorModeToggler';
 import FooterLinkItem from './FooterLinkItem';
 import IntTxsIndexingStatus from './IntTxsIndexingStatus';
 import getApiVersionUrl from './utils/getApiVersionUrl';
@@ -117,7 +116,6 @@ const Footer = () => {
     >
       <Box flexGrow="1" mb={{ base: 8, lg: 0 }} minW="195px">
         <Flex flexWrap="wrap" columnGap={ 8 } rowGap={ 6 }>
-          <ColorModeToggler/>
           { !config.UI.indexingAlert.intTxs.isHidden && <IntTxsIndexingStatus/> }
           <NetworkAddToWallet/>
         </Flex>