diff --git a/configs/app/ui.ts b/configs/app/ui.ts index 0210b73493..7886ca866b 100644 --- a/configs/app/ui.ts +++ b/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>(getEnvValue('NEXT_PUBLIC_NETWORK_EXPLORERS')) || [], }, diff --git a/configs/envs/.env.eth b/configs/envs/.env.eth index 90009cb2fc..3bfc1c34d8 100644 --- a/configs/envs/.env.eth +++ b/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='Chain-specific API keys are being deprecated. Please migrate to Blockscout's PRO API for new multichain access. Existing API keys will become invalid on 1st of Jan 2027' \ No newline at end of file diff --git a/docs/ENVS.md b/docs/ENVS.md index 949b2e82ff..43c4a8dd83 100644 --- a/docs/ENVS.md +++ b/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 (`

`, `

`, etc.) | - | - | `{'name':'Montserrat','url':'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap'}` | v1.35.0+ | diff --git a/ui/pages/ApiKeys.tsx b/ui/pages/ApiKeys.tsx index bf6678f5b0..e148527711 100644 --- a/ui/pages/ApiKeys.tsx +++ b/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 ? : null; + return ( <> { description } + { alert } { Boolean(data?.length) && list } { + return ( + + + + ); +}; + +export default React.memo(chakra(AlertWithExternalHtml)); diff --git a/ui/snippets/header/HeaderAlert.tsx b/ui/snippets/header/HeaderAlert.tsx index d4580cb11e..8fb8818fcb 100644 --- a/ui/snippets/header/HeaderAlert.tsx +++ b/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 ( - + { maintenanceAlertHtml && } ); diff --git a/ui/snippets/header/alerts/MaintenanceAlert.tsx b/ui/snippets/header/alerts/MaintenanceAlert.tsx deleted file mode 100644 index d6b9554dfd..0000000000 --- a/ui/snippets/header/alerts/MaintenanceAlert.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Box } from '@chakra-ui/react'; -import React from 'react'; - -import config from 'configs/app'; -import { Alert } from 'toolkit/chakra/alert'; - -const MaintenanceAlert = () => { - if (!config.UI.maintenanceAlert.message) { - return null; - } - - return ( - - - - ); -}; - -export default MaintenanceAlert;