Merge branch 'main' of github.com:blockscout/frontend into dim-color-…

…mode

.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;
 

docs/ENVS.md

@@ -188,6 +188,7 @@ Settings for meta tags and OG tags
 | `burnt_fees` | Burnt fees |
 | `total_reward` | Total block reward |
 | `nonce` | Block nonce |
+| `miner` | Address of block's miner or validator |
 
  
 

lib/hooks/useNavItems.tsx

@@ -24,6 +24,7 @@ import topAccountsIcon from 'icons/top-accounts.svg';
 import transactionsIcon from 'icons/transactions.svg';
 import txnBatchIcon from 'icons/txn_batches.svg';
 import verifiedIcon from 'icons/verified.svg';
+import verifyContractIcon from 'icons/verify-contract.svg';
 import watchlistIcon from 'icons/watchlist.svg';
 import { rightLineArrow } from 'lib/html-entities';
 import UserAvatar from 'ui/shared/UserAvatar';
@@ -176,11 +177,19 @@ export default function useNavItems(): ReturnType {
         isActive: apiNavItems.some(item => isInternalItem(item) && item.isActive),
         subItems: apiNavItems,
       },
-      config.UI.sidebar.otherLinks.length > 0 ? {
+      {
         text: 'Other',
         icon: gearIcon,
-        subItems: config.UI.sidebar.otherLinks,
-      } : null,
+        subItems: [
+          {
+            text: 'Verify contract',
+            nextRoute: { pathname: '/contract-verification' as const },
+            icon: verifyContractIcon,
+            isActive: pathname.startsWith('/contract-verification'),
+          },
+          ...config.UI.sidebar.otherLinks,
+        ],
+      },
     ].filter(Boolean);
 
     const accountNavItems: ReturnType['accountNavItems'] = [

lib/metadata/getPageOgType.ts

@@ -12,6 +12,7 @@ const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
   '/accounts': 'Root page',
   '/address/[hash]': 'Regular page',
   '/verified-contracts': 'Root page',
+  '/contract-verification': 'Root page',
   '/address/[hash]/contract-verification': 'Regular page',
   '/tokens': 'Root page',
   '/token/[hash]': 'Regular page',

lib/metadata/templates/description.ts

@@ -15,6 +15,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/accounts': DEFAULT_TEMPLATE,
   '/address/[hash]': 'View the account balance, transactions, and other data for %hash% on the %network_title%',
   '/verified-contracts': DEFAULT_TEMPLATE,
+  '/contract-verification': DEFAULT_TEMPLATE,
   '/address/[hash]/contract-verification': 'View the account balance, transactions, and other data for %hash% on the %network_title%',
   '/tokens': DEFAULT_TEMPLATE,
   '/token/[hash]': '%hash%, balances and analytics on the %network_title%',

lib/metadata/templates/title.ts

@@ -10,6 +10,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/accounts': 'top accounts',
   '/address/[hash]': 'address details for %hash%',
   '/verified-contracts': 'verified contracts',
+  '/contract-verification': 'verify contract',
   '/address/[hash]/contract-verification': 'contract verification for %hash%',
   '/tokens': 'tokens',
   '/token/[hash]': '%symbol% token details',

lib/mixpanel/getPageType.ts

@@ -10,7 +10,8 @@ export const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/accounts': 'Top accounts',
   '/address/[hash]': 'Address details',
   '/verified-contracts': 'Verified contracts',
-  '/address/[hash]/contract-verification': 'Contract verification',
+  '/contract-verification': 'Contract verification',
+  '/address/[hash]/contract-verification': 'Contract verification for address',
   '/tokens': 'Tokens',
   '/token/[hash]': 'Token details',
   '/token/[hash]/instance/[id]': 'Token Instance',

nextjs/nextjs-routes.d.ts

@@ -28,6 +28,7 @@ declare module "nextjs-routes" {
     | StaticRoute<"/auth/unverified-email">
     | DynamicRoute<"/block/[height_or_hash]", { "height_or_hash": string }>
     | StaticRoute<"/blocks">
+    | StaticRoute<"/contract-verification">
     | StaticRoute<"/csv-export">
     | StaticRoute<"/graphiql">
     | StaticRoute<"/">

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 ./",

pages/address/[hash]/contract-verification.tsx

@@ -4,12 +4,12 @@ import React from 'react';
 import type { Props } from 'nextjs/getServerSideProps';
 import PageNextJs from 'nextjs/PageNextJs';
 
-import ContractVerification from 'ui/pages/ContractVerification';
+import ContractVerificationForAddress from 'ui/pages/ContractVerificationForAddress';
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
     <PageNextJs pathname="/address/[hash]/contract-verification" query={ props }>
-      <ContractVerification/>
+      <ContractVerificationForAddress/>
     </PageNextJs>
   );
 };

pages/contract-verification.tsx

@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import React from 'react';
+
+import type { Props } from 'nextjs/getServerSideProps';
+import PageNextJs from 'nextjs/PageNextJs';
+
+import ContractVerification from 'ui/pages/ContractVerification';
+
+const Page: NextPage<Props> = (props: Props) => {
+  return (
+    <PageNextJs pathname="/contract-verification" query={ props }>
+      <ContractVerification/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { base as getServerSideProps } from 'nextjs/getServerSideProps';

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

types/views/block.ts

@@ -4,6 +4,7 @@ export const BLOCK_FIELDS_IDS = [
   'burnt_fees',
   'total_reward',
   'nonce',
+  'miner',
 ] as const;
 
 export type BlockFieldId = ArrayElement<typeof BLOCK_FIELDS_IDS>;

ui/block/BlockDetails.tsx

@@ -202,19 +202,21 @@ const BlockDetails = ({ query }: Props) => {
           </Skeleton>
         </DetailsInfoItem>
       ) }
-      <DetailsInfoItem
-        title={ verificationTitle }
-        hint="A block producer who successfully included the block onto the blockchain"
-        columnGap={ 1 }
-        isLoading={ isPlaceholderData }
-      >
-        <AddressEntity
-          address={ data.miner }
+      { !config.UI.views.block.hiddenFields?.miner && (
+        <DetailsInfoItem
+          title={ verificationTitle }
+          hint="A block producer who successfully included the block onto the blockchain"
+          columnGap={ 1 }
           isLoading={ isPlaceholderData }
-        />
-        { /* api doesn't return the block processing time yet */ }
-        { /* <Text>{ dayjs.duration(block.minedIn, 'second').humanize(true) }</Text> */ }
-      </DetailsInfoItem>
+        >
+          <AddressEntity
+            address={ data.miner }
+            isLoading={ isPlaceholderData }
+          />
+          { /* api doesn't return the block processing time yet */ }
+          { /* <Text>{ dayjs.duration(block.minedIn, 'second').humanize(true) }</Text> */ }
+        </DetailsInfoItem>
+      ) }
       { !isRollup && !totalReward.isEqualTo(ZERO) && !config.UI.views.block.hiddenFields?.total_reward && (
         <DetailsInfoItem
           title="Block reward"

ui/blocks/BlocksListItem.tsx

@@ -57,13 +57,15 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
           <span>{ data.size.toLocaleString() } bytes</span>
         </Skeleton>
       </Flex>
-      <Flex columnGap={ 2 } w="100%">
-        <Text fontWeight={ 500 }>{ capitalize(getNetworkValidatorTitle()) }</Text>
-        <AddressEntity
-          address={ data.miner }
-          isLoading={ isLoading }
-        />
-      </Flex>
+      { !config.UI.views.block.hiddenFields?.miner && (
+        <Flex columnGap={ 2 } w="100%">
+          <Text fontWeight={ 500 }>{ capitalize(getNetworkValidatorTitle()) }</Text>
+          <AddressEntity
+            address={ data.miner }
+            isLoading={ isLoading }
+          />
+        </Flex>
+      ) }
       <Flex columnGap={ 2 }>
         <Text fontWeight={ 500 }>Txn</Text>
         { data.tx_count > 0 ? (

ui/blocks/BlocksTable.tsx

@@ -42,7 +42,8 @@ const BlocksTable = ({ data, isLoading, top, page, showSocketInfo, socketInfoNum
         <Tr>
           <Th width="125px">Block</Th>
           <Th width="120px">Size, bytes</Th>
-          <Th width={ `${ VALIDATOR_COL_WEIGHT / widthBase * 100 }%` } minW="160px">{ capitalize(getNetworkValidatorTitle()) }</Th>
+          { !config.UI.views.block.hiddenFields?.miner &&
+            <Th width={ `${ VALIDATOR_COL_WEIGHT / widthBase * 100 }%` } minW="160px">{ capitalize(getNetworkValidatorTitle()) }</Th> }
           <Th width="64px" isNumeric>Txn</Th>
           <Th width={ `${ GAS_COL_WEIGHT / widthBase * 100 }%` }>Gas used</Th>
           { !isRollup && !config.UI.views.block.hiddenFields?.total_reward &&

ui/blocks/BlocksTableItem.tsx

@@ -66,12 +66,14 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
           { data.size.toLocaleString() }
         </Skeleton>
       </Td>
-      <Td fontSize="sm">
-        <AddressEntity
-          address={ data.miner }
-          isLoading={ isLoading }
-        />
-      </Td>
+      { !config.UI.views.block.hiddenFields?.miner && (
+        <Td fontSize="sm">
+          <AddressEntity
+            address={ data.miner }
+            isLoading={ isLoading }
+          />
+        </Td>
+      ) }
       <Td isNumeric fontSize="sm">
         { data.tx_count > 0 ? (
           <Skeleton isLoaded={ !isLoading } display="inline-block">