Merge pull request #657 from blockscout/menu-add

graphql and contracts link

lib/hooks/useNavItems.tsx

@@ -20,7 +20,7 @@ import topAccountsIcon from 'icons/top-accounts.svg';
 import transactionsIcon from 'icons/transactions.svg';
 // import depositsIcon from 'icons/arrows/south-east.svg';
 // import txnBatchIcon from 'icons/txn_batches.svg';
-// import verifiedIcon from 'icons/verified.svg';
+import verifiedIcon from 'icons/verified.svg';
 import watchlistIcon from 'icons/watchlist.svg';
 // import { rightLineArrow } from 'lib/html-entities';
 import notEmpty from 'lib/notEmpty';
@@ -61,9 +61,9 @@ export default function useNavItems(): ReturnType {
       { text: 'Top accounts', nextRoute: { pathname: '/accounts' as const }, icon: topAccountsIcon, isActive: pathname === '/accounts', isNewUi: true };
     const blocks = { text: 'Blocks', nextRoute: { pathname: '/blocks' as const }, icon: blocksIcon, isActive: pathname.startsWith('/block'), isNewUi: true };
     const txs = { text: 'Transactions', nextRoute: { pathname: '/txs' as const }, icon: transactionsIcon, isActive: pathname.startsWith('/tx'), isNewUi: true };
-    // const verifiedContracts =
+    const verifiedContracts =
     // eslint-disable-next-line max-len
-    //  { text: 'Verified contracts', nextRoute: { pathname: '/verified_contracts' as const }, icon: verifiedIcon, isActive: pathname === '/verified_contracts', isNewUi: false },
+     { text: 'Verified contracts', nextRoute: { pathname: '/verified-contracts' as const }, icon: verifiedIcon, isActive: false, isNewUi: false };
 
     if (appConfig.L2.isL2Network) {
       blockchainNavItems = [
@@ -83,17 +83,15 @@ export default function useNavItems(): ReturnType {
         ],
         [
           topAccounts,
+          verifiedContracts,
         ],
-        // [
-        //   verifiedContracts
-        // ],
       ];
     } else {
       blockchainNavItems = [
         txs,
         blocks,
         topAccounts,
-        // verifiedContracts,
+        verifiedContracts,
       ];
     }
 
@@ -106,6 +104,8 @@ export default function useNavItems(): ReturnType {
         isActive: pathname === '/api-docs',
         isNewUi: true,
       } : null,
+      // FIXME: need icon for this item
+      { text: 'GraphQL', nextRoute: { pathname: '/graphiql' as const }, icon: topAccountsIcon, isActive: false, isNewUi: false },
     ].filter(notEmpty);
 
     const mainNavItems = [

pages/graphiql.tsx

+import type { NextPage } from 'next';
+
+const GraphQLPage: NextPage = () => {
+  return null;
+};
+
+export default GraphQLPage;
+
+export async function getServerSideProps() {
+  return {
+    notFound: true,
+  };
+}

pages/verified-contracts.tsx

+import type { NextPage } from 'next';
+
+const VerifiedContractsPage: NextPage = () => {
+  return null;
+};
+
+export default VerifiedContractsPage;
+
+export async function getServerSideProps() {
+  return {
+    notFound: true,
+  };
+}

types/nextjs-routes.d.ts

@@ -25,6 +25,7 @@ declare module "nextjs-routes" {
     | StaticRoute<"/blocks">
     | StaticRoute<"/csv-export">
     | StaticRoute<"/graph">
+    | StaticRoute<"/graphiql">
     | StaticRoute<"/">
     | StaticRoute<"/login">
     | StaticRoute<"/search-results">
@@ -34,6 +35,7 @@ declare module "nextjs-routes" {
     | StaticRoute<"/tokens">
     | DynamicRoute<"/tx/[hash]", { "hash": string }>
     | StaticRoute<"/txs">
+    | StaticRoute<"/verified-contracts">
     | StaticRoute<"/visualize/sol2uml">;
 
   interface StaticRoute<Pathname> {

ui/snippets/header/Burger.pw.tsx

@@ -25,7 +25,7 @@ test('base view', async({ mount, page }) => {
   );
 
   await component.locator('svg[aria-label="Menu button"]').click();
-  await expect(page).toHaveScreenshot();
+  await expect(page.locator('.chakra-modal__content-container')).toHaveScreenshot();
 
   await page.locator('button[aria-label="Network menu"]').click();
   await expect(page).toHaveScreenshot();
@@ -50,6 +50,19 @@ test.describe('dark mode', () => {
   });
 });
 
+test('submenu', async({ mount, page }) => {
+  const component = await mount(
+    <TestApp>
+      <Burger/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await component.locator('svg[aria-label="Menu button"]').click();
+  await page.locator('div[aria-label="Blockchain link group"]').click();
+  await expect(page).toHaveScreenshot();
+});
+
 test.describe('auth', () => {
   const extendedTest = test.extend({
     context: ({ context }, use) => {
@@ -58,19 +71,9 @@ test.describe('auth', () => {
     },
   });
 
-  extendedTest('base view', async({ mount, page }) => {
-    const component = await mount(
-      <TestApp>
-        <Burger/>
-      </TestApp>,
-      { hooksConfig },
-    );
-
-    await component.locator('svg[aria-label="Menu button"]').click();
-    await expect(page).toHaveScreenshot();
-  });
+  extendedTest.use({ viewport: { width: devices['iPhone 13 Pro'].viewport.width, height: 1000 } });
 
-  extendedTest('submenu', async({ mount, page }) => {
+  extendedTest('base view', async({ mount, page }) => {
     const component = await mount(
       <TestApp>
         <Burger/>
@@ -79,7 +82,6 @@ test.describe('auth', () => {
     );
 
     await component.locator('svg[aria-label="Menu button"]').click();
-    await page.locator('div[aria-label="Blockchain link group"]').click();
     await expect(page).toHaveScreenshot();
   });
 });