Merge branch 'main' of github.com:blockscout/frontend

lib/api/nodeFetch.ts

@@ -14,11 +14,14 @@ export default function fetchFactory(
   // FIXME migrate to RequestInfo later if needed
   return function fetch(url: string, init?: RequestInit): Promise<Response> {
     const csrfToken = _req.headers['x-csrf-token'];
+    const authToken = _req.headers['Authorization'];
+
     const headers = {
       accept: _req.headers['accept'] || 'application/json',
       'content-type': _req.headers['content-type'] || 'application/json',
       cookie: `${ cookies.NAMES.API_TOKEN }=${ _req.cookies[cookies.NAMES.API_TOKEN] }`,
       ...(csrfToken ? { 'x-csrf-token': String(csrfToken) } : {}),
+      ...(authToken ? { Authorization: String(authToken) } : {}),
     };
 
     httpLogger.logger.info({

lib/api/resources.ts

@@ -65,6 +65,7 @@ export interface ApiResource {
   endpoint?: string;
   basePath?: string;
   pathParams?: Array<string>;
+  needAuth?: boolean; // for external APIs which require authentication
 }
 
 export const RESOURCES = {
@@ -109,6 +110,7 @@ export const RESOURCES = {
     pathParams: [ 'chainId' as const, 'type' as const ],
     endpoint: appConfig.contractInfoApi.endpoint,
     basePath: appConfig.contractInfoApi.basePath,
+    needAuth: true,
   },
 
   verified_addresses: {
@@ -116,6 +118,7 @@ export const RESOURCES = {
     pathParams: [ 'chainId' as const ],
     endpoint: appConfig.contractInfoApi.endpoint,
     basePath: appConfig.contractInfoApi.basePath,
+    needAuth: true,
   },
 
   token_info_applications_config: {
@@ -123,6 +126,7 @@ export const RESOURCES = {
     pathParams: [ 'chainId' as const ],
     endpoint: appConfig.adminServiceApi.endpoint,
     basePath: appConfig.adminServiceApi.basePath,
+    needAuth: true,
   },
 
   token_info_applications: {
@@ -130,6 +134,7 @@ export const RESOURCES = {
     pathParams: [ 'chainId' as const, 'id' as const ],
     endpoint: appConfig.adminServiceApi.endpoint,
     basePath: appConfig.adminServiceApi.basePath,
+    needAuth: true,
   },
 
   // STATS

lib/api/useApiFetch.tsx

 import React from 'react';
 
 import isNeedProxy from 'lib/api/isNeedProxy';
+import * as cookies from 'lib/cookies';
 import type { Params as FetchParams } from 'lib/hooks/useFetch';
 import useFetch from 'lib/hooks/useFetch';
 
@@ -27,9 +28,10 @@ export default function useApiFetch() {
       url,
       {
         credentials: 'include',
-        ...(resource.endpoint && isNeedProxy() ? {
+        ...(resource.endpoint ? {
           headers: {
-            'x-endpoint': resource.endpoint,
+            ...(isNeedProxy() ? { 'x-endpoint': resource.endpoint } : {}),
+            ...(resource.needAuth ? { Authorization: cookies.get(cookies.NAMES.API_TOKEN) } : {}),
           },
         } : {}),
         ...fetchParams,

ui/tx/TxDetails.pw.tsx

@@ -167,3 +167,28 @@ l2Test('l2', async({ mount, page }) => {
 
   await expect(component).toHaveScreenshot();
 });
+
+const mainnetTest = test.extend({
+  context: contextWithEnvs([
+    { name: 'NEXT_PUBLIC_IS_TESTNET', value: 'false' },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ]) as any,
+});
+
+mainnetTest('without testnet warning', async({ mount, page }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(txMock.l2tx),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <TxDetails/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await insertAdPlaceholder(page);
+
+  await expect(component).toHaveScreenshot();
+});