Add "Verify contract" page

Fixes #1329

.github/workflows/upload-source-maps.yml

@@ -45,4 +45,4 @@ jobs:
               run: yarn sentry-cli sourcemaps inject ./.next
 
             - name: Upload source maps to Sentry
-              run: yarn sentry-cli sourcemaps upload --release=${{ github.ref_name }} --validate ./.next
+              run: yarn sentry-cli sourcemaps upload --release=${{ github.ref_name }} --url-prefix=~/_next/ --validate ./.next

docs/CONTRIBUTING.md

@@ -44,15 +44,21 @@ And of course our premier language is [Typescript](https://www.typescriptlang.or
 
 ## Local development
 
-1. Prepare your environment variables:  
-    - clone `.env.example` into `configs/envs/.env.secrets` and fill it with necessary secrets for the [external services](./ENVS.md#external-services-configuration) integration; you can pick up only those that your needed
-    - choose one of the following options:  
-        A. create `.env.local` file in the root folder with environment variables from the [list](./ENVS.md); all required variables should be present in the file;  
-        B. pick up one of the predefined configurations located at `/configs/envs` folder; no actual action is needed at this stage;
-2. Run your local dev server:
-    - if you picked up option "A" above, use `yarn dev` command
-    - if your options is "B", use `yarn dev:<config_name>` command
-3. In browser navigate to the URL from the command output (by default, it is `http://localhost:3000`)
+To develop locally, follow one of the two paths outlined below:
+
+A. Custom configuration:
+
+1. Create `.env.local` file in the root folder and include all required environment variables from the [list](./ENVS.md)
+2. Optionally, clone `.env.example` and name it `.env.secrets`. Fill it with necessary secrets for integrating with [external services](./ENVS.md#external-services-configuration). Include only secrets your need.
+3. Use `yarn dev` command to start the dev server.
+4. Open your browser and navigate to the URL provided in the command line output (by default, it is `http://localhost:3000`).
+
+B. Pre-defined configuration:
+
+1. Optionally, clone `.env.example` file into `configs/envs/.env.secrets`. Fill it with necessary secrets for integrating with [external services](./ENVS.md#external-services-configuration). Include only secrets your need.
+2. Choose one of the predefined configurations located in the `/configs/envs` folder.
+3. Start your local dev server using the `yarn dev:<config_name>` command.
+4. Open your browser and navigate to the URL provided in the command line output (by default, it is `http://localhost:3000`).
 
 &nbsp;
 

package.json

@@ -8,7 +8,7 @@
     "npm": "8"
   },
   "scripts": {
-    "dev": "next dev",
+    "dev": "./tools/scripts/dev.sh",
     "dev:preset": "./tools/scripts/dev.preset.sh",
     "build": "next build",
     "build:docker": "docker build --build-arg GIT_COMMIT_SHA=$(git rev-parse --short HEAD) --build-arg GIT_TAG=$(git describe --tags --abbrev=0) -t blockscout-frontend:local ./",

tools/scripts/dev.preset.sh

@@ -14,11 +14,6 @@ if [ ! -f "$config_file" ]; then
     exit 1
 fi
 
-if [ ! -f "$secrets_file" ]; then
-    echo "Error: File '$secrets_file' not found."
-    exit 1
-fi
-
 # download assets for the running instance
 dotenv \
   -e $config_file \

tools/scripts/dev.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+
+# download assets for the running instance
+dotenv \
+  -e .env.development.local \
+  -e .env.local \
+  -e .env.development \
+  -e .env \
+  -- bash -c './deploy/scripts/download_assets.sh ./public/assets'
+
+# generate envs.js file and run the app
+dotenv \
+  -v NEXT_PUBLIC_GIT_COMMIT_SHA=$(git rev-parse --short HEAD) \
+  -v NEXT_PUBLIC_GIT_TAG=$(git describe --tags --abbrev=0) \
+  -e .env.secrets \
+  -e .env.development.local \
+  -e .env.local \
+  -e .env.development \
+  -e .env \
+  -- bash -c './deploy/scripts/make_envs_script.sh && next dev -- -p $NEXT_PUBLIC_APP_PORT' |
+pino-pretty

ui/home/Stats.tsx

@@ -77,7 +77,7 @@ const Stats = () => {
           <StatsItem
             icon={ clockIcon }
             title="Average block time"
-            value={ `${ (data.average_block_time / 1000).toFixed(1) } s` }
+            value={ `${ (data.average_block_time / 1000).toFixed(1) }s` }
             isLoading={ isPlaceholderData }
           />
         ) }

ui/marketplace/MarketplaceAppCard.tsx

@@ -74,14 +74,14 @@ const MarketplaceAppCard = ({
           marginBottom={ 4 }
           w={{ base: '64px', sm: '96px' }}
           h={{ base: '64px', sm: '96px' }}
-          borderRadius={ 8 }
           display="flex"
           alignItems="center"
           justifyContent="center"
         >
           <Image
             src={ isLoading ? undefined : logoUrl }
             alt={ `${ title } app icon` }
+            borderRadius="8px"
           />
         </Skeleton>
 

ui/shared/tx/TxFeeStability.tsx

@@ -27,7 +27,7 @@ const TxFeeStability = ({ data, isLoading, hideUsd, accuracy, className }: Props
   return (
     <Skeleton whiteSpace="pre" isLoaded={ !isLoading } display="flex" className={ className }>
       <span>{ valueStr } </span>
-      { valueStr !== '0' && <TokenEntity token={ data.token } noIcon noCopy onlySymbol w="auto"/> }
+      { valueStr !== '0' && <TokenEntity token={ data.token } noCopy onlySymbol w="auto" ml={ 1 }/> }
       { usd && !hideUsd && <chakra.span color="text_secondary"> (${ usd })</chakra.span> }
     </Skeleton>
   );

ui/snippets/navigation/NavigationDesktop.pw.tsx

@@ -110,6 +110,7 @@ test.describe('with tooltips', () => {
       { hooksConfig },
     );
 
+    await component.locator('header').hover();
     await page.locator('svg[aria-label="Expand/Collapse menu"]').click();
     await page.locator('a[aria-label="Tokens link"]').hover();
 
@@ -212,3 +213,37 @@ base.describe('cookie set to true', () => {
     expect(await networkMenu.isVisible()).toBe(false);
   });
 });
+
+test('hover +@dark-mode', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <Flex w="100%" minH="100vh" alignItems="stretch">
+        <NavigationDesktop/>
+        <Box bgColor="lightpink" w="100%"/>
+      </Flex>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await component.locator('header').hover();
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('hover xl screen', () => {
+  test.use({ viewport: configs.viewport.xl });
+
+  test('+@dark-mode', async({ mount }) => {
+    const component = await mount(
+      <TestApp>
+        <Flex w="100%" minH="100vh" alignItems="stretch">
+          <NavigationDesktop/>
+          <Box bgColor="lightpink" w="100%"/>
+        </Flex>
+      </TestApp>,
+      { hooksConfig },
+    );
+
+    await component.locator('header').hover();
+    await expect(component).toHaveScreenshot();
+  });
+});

ui/snippets/navigation/NavigationDesktop.tsx

@@ -59,6 +59,11 @@ const NavigationDesktop = () => {
       py={ 12 }
       width={{ lg: isExpanded ? '229px' : '92px', xl: isCollapsed ? '92px' : '229px' }}
       { ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) }
+      sx={{
+        '&:hover #expand-icon': {
+          display: 'block',
+        },
+      }}
     >
       { config.chain.isTestnet && <Icon as={ testnetIcon } h="14px" w="auto" color="red.400" position="absolute" pl={ 3 } top="34px"/> }
       <Box
@@ -113,6 +118,8 @@ const NavigationDesktop = () => {
         cursor="pointer"
         onClick={ handleTogglerClick }
         aria-label="Expand/Collapse menu"
+        id="expand-icon"
+        display="none"
       />
     </Flex>
   );