My account: API keys section disclaimer

configs/app/ui.ts

@@ -85,6 +85,9 @@ const UI = Object.freeze({
   maintenanceAlert: {
     message: getEnvValue('NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE'),
   },
+  apiKeysAlert: {
+    message: getEnvValue('NEXT_PUBLIC_API_KEYS_ALERT_MESSAGE'),
+  },
   explorers: {
     items: parseEnvJson<Array<NetworkExplorer>>(getEnvValue('NEXT_PUBLIC_NETWORK_EXPLORERS')) || [],
   },

configs/envs/.env.eth

@@ -76,3 +76,4 @@ NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES=[{'name':'OpenSea','collection_url':'https://
 NEXT_PUBLIC_VIEWS_TOKEN_SCAM_TOGGLE_ENABLED=true
 NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
 NEXT_PUBLIC_XSTAR_SCORE_URL=https://docs.xname.app/the-solution-adaptive-proof-of-humanity-on-blockchain/xhs-scoring-algorithm?utm_source=blockscout&utm_medium=address
+NEXT_PUBLIC_API_KEYS_ALERT_MESSAGE='<strong>Chain-specific API keys are being deprecated.</strong> Please migrate to <a href="https://docs.blockscout.com/for-developers/api-keys/pro-api" target="_blank" rel="noopener noreferrer">Blockscout's PRO API</a> for new multichain access. Existing API keys will become invalid on 1st of Jan 2027'

docs/ENVS.md

@@ -380,6 +380,7 @@ Settings for meta tags, OG tags and SEO
 | NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS | `boolean` | Set to `true` to hide indexing alert in the page footer about indexing block's internal transactions | - | `false` | `true` | v1.17.0+ |
 | NEXT_PUBLIC_HIDE_NATIVE_COIN_PRICE | `boolean` | Set to `true` to hide the native coin price in the top bar | - | `false` | `true` | v2.4.0+ |
 | NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE | `string` | Used for displaying custom announcements or alerts in the header of the site. Could be a regular string or a HTML code. | - | - | `Hello world! 🤪` | v1.13.0+ |
+| NEXT_PUBLIC_API_KEYS_ALERT_MESSAGE | `string` | Used for displaying custom alerts on the API keys page. Could be a regular string or a HTML code. | - | - | `Hello world! 🤪` | v2.7.0+ |
 | NEXT_PUBLIC_COLOR_THEME_DEFAULT | `'light' \| 'dim' \| 'midnight' \| 'dark'` | Preferred color theme of the app | - | - | `midnight` | v1.30.0+ |
 | NEXT_PUBLIC_COLOR_THEME_OVERRIDES | `string` | Color overrides for the default theme; pass a JSON-like string that represents a subset of the `DEFAULT_THEME_COLORS` object (see `toolkit/theme/foundations/colors.ts`) to customize the app's main colors. See [here](https://www.figma.com/design/4In0X8UADoZaTfZ34HaZ3K/Blockscout-design-system?node-id=29124-23813&t=XOv4ahHUSsTDlNkN-4) the Figma worksheet with description of available color tokens. | - | - | `{'text':{'primary':{'_light':{'value':'rgba(16,17,18,0.80)'},'_dark':{'value':'rgba(222,217,217)'}}}}` | v2.3.0+ |
 | NEXT_PUBLIC_FONT_FAMILY_HEADING | `FontFamily`, see full description [below](#font-family-configuration-properties) | Special typeface to use in page headings (`<h1>`, `<h2>`, etc.) | - | - | `{'name':'Montserrat','url':'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap'}` | v1.35.0+ |

ui/pages/ApiKeys.tsx

@@ -3,6 +3,7 @@ import React, { useCallback, useState } from 'react';
 
 import type { ApiKey } from 'types/api/account';
 
+import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import { API_KEY } from 'stubs/account';
 import { Button } from 'toolkit/chakra/button';
@@ -15,12 +16,15 @@ import ApiKeyListItem from 'ui/apiKey/ApiKeyTable/ApiKeyListItem';
 import ApiKeyTable from 'ui/apiKey/ApiKeyTable/ApiKeyTable';
 import DeleteApiKeyModal from 'ui/apiKey/DeleteApiKeyModal';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
+import AlertWithExternalHtml from 'ui/shared/alerts/AlertWithExternalHtml';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useRedirectForInvalidAuthToken from 'ui/snippets/auth/useRedirectForInvalidAuthToken';
 
 const DATA_LIMIT = 3;
 
+const apiKeysAlertHtml = config.UI.apiKeysAlert.message;
+
 const ApiKeysPage: React.FC = () => {
   const apiKeyModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();
@@ -94,9 +98,12 @@ const ApiKeysPage: React.FC = () => {
 
     const canAdd = !isPlaceholderData ? (data?.length || 0) < DATA_LIMIT : true;
 
+    const alert = apiKeysAlertHtml ? <AlertWithExternalHtml html={ apiKeysAlertHtml } status="warning" mb={ 6 }/> : null;
+
     return (
       <>
         { description }
+        { alert }
         { Boolean(data?.length) && list }
         <Skeleton
           marginTop={ 8 }

ui/shared/alerts/AlertWithExternalHtml.tsx

@@ -0,0 +1,33 @@
+import { Box, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AlertProps } from 'toolkit/chakra/alert';
+import { Alert } from 'toolkit/chakra/alert';
+
+type Props = {
+  html: string;
+  status: AlertProps['status'];
+  showIcon?: boolean;
+  className?: string;
+};
+
+const AlertWithExternalHtml = ({ html, status, showIcon, className }: Props) => {
+  return (
+    <Alert status={ status } showIcon={ showIcon } className={ className }>
+      <Box
+        dangerouslySetInnerHTML={{ __html: html }}
+        css={{
+          '& a': {
+            color: 'link.primary',
+            _hover: {
+              color: 'link.primary.hover',
+            },
+          },
+        }}
+
+      />
+    </Alert>
+  );
+};
+
+export default React.memo(chakra(AlertWithExternalHtml));

ui/snippets/header/HeaderAlert.tsx

@@ -2,13 +2,17 @@ import type { FlexProps } from '@chakra-ui/react';
 import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
+import config from 'configs/app';
+import AlertWithExternalHtml from 'ui/shared/alerts/AlertWithExternalHtml';
+
 import IndexingBlocksAlert from './alerts/IndexingBlocksAlert';
-import MaintenanceAlert from './alerts/MaintenanceAlert';
+
+const maintenanceAlertHtml = config.UI.maintenanceAlert.message || '';
 
 const HeaderAlert = (props: FlexProps) => {
   return (
     <Flex flexDir="column" rowGap={ 1 } mb={{ base: 6, lg: 3 }} _empty={{ display: 'none' }} { ...props }>
-      <MaintenanceAlert/>
+      { maintenanceAlertHtml && <AlertWithExternalHtml html={ maintenanceAlertHtml } status="info" showIcon/> }
       <IndexingBlocksAlert/>
     </Flex>
   );