Add API keys button and alert message configuration (#3307)

feat: add API keys button and alert message configuration

- Introduced `NEXT_PUBLIC_ACCOUNT_API_KEYS_BUTTON` to control the visibility of the "Add API key" button, allowing it to be a boolean or a URL.
- Added `NEXT_PUBLIC_API_DOCS_ALERT_MESSAGE` for custom alerts on the API documentation page.
- Updated relevant schemas and documentation to reflect these new environment variables.
- Enhanced the account and API documentation features to utilize the new configurations.

configs/app/features/account.ts

@@ -7,12 +7,24 @@ import { getEnvValue } from '../utils';
 
 const title = 'My account';
 
+const apiKeysButton = (() => {
+  const value = getEnvValue('NEXT_PUBLIC_ACCOUNT_API_KEYS_BUTTON');
+  if (value === undefined || value === 'true') {
+    return true;
+  }
+  if (value === 'false') {
+    return false;
+  }
+  return value;
+})();
+
 const config: Feature<{
   isEnabled: true;
   authProvider: AuthProvider;
   dynamic?: {
     environmentId: string;
   };
+  apiKeysButton: boolean | string;
 }> = (() => {
 
   if (
@@ -30,6 +42,7 @@ const config: Feature<{
         dynamic: {
           environmentId: dynamicEnvironmentId,
         },
+        apiKeysButton,
       });
     }
 
@@ -38,6 +51,7 @@ const config: Feature<{
         title,
         isEnabled: true,
         authProvider: 'auth0',
+        apiKeysButton,
       });
     }
   }

configs/app/features/apiDocs.ts

@@ -15,12 +15,14 @@ const title = 'API documentation';
 
 const config: Feature<{
   tabs: Array<ApiDocsTabId>;
+  alertMessage: string | undefined;
 }> = (() => {
   if (tabs) {
     return Object.freeze({
       title,
       isEnabled: true,
       tabs,
+      alertMessage: getEnvValue('NEXT_PUBLIC_API_DOCS_ALERT_MESSAGE'),
     });
   }
 

configs/envs/.env.eth

@@ -74,4 +74,6 @@ 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'
+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'
+NEXT_PUBLIC_API_DOCS_ALERT_MESSAGE='<strong>Blockscout Pro API is now available.</strong> Check out the <a href="https://dev.blockscout.com" target="_blank" rel="noopener noreferrer">Blockscout Pro API documentation</a> for new multichain access.'
+NEXT_PUBLIC_ACCOUNT_API_KEYS_BUTTON=https://dev.blockscout.com

deploy/tools/envs-validator/schema.ts

@@ -149,6 +149,7 @@ const schema = yup
     // Misc
     NEXT_PUBLIC_USE_NEXT_JS_PROXY: yup.boolean(),
     NEXT_PUBLIC_API_KEYS_ALERT_MESSAGE: yup.string(),
+    NEXT_PUBLIC_API_DOCS_ALERT_MESSAGE: yup.string(),
   })
   .concat(apisSchema)
   .concat(chainSchema)

deploy/tools/envs-validator/schemas/features/account.ts

@@ -1,16 +1,31 @@
 import { AuthProvider } from 'types/client/account';
 import * as yup from 'yup';
+import { urlTest } from '../../utils';
 
 export const accountSchema = yup
   .object()
   .shape({
     NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED: yup.boolean(),
+    NEXT_PUBLIC_ACCOUNT_API_KEYS_BUTTON: yup
+      .mixed()
+      .test('shape', 'Invalid schema were provided for NEXT_PUBLIC_ACCOUNT_API_KEYS_BUTTON, it should be either boolean or string', (data) => {
+        return yup.boolean().isValidSync(data) || yup.string().test(urlTest).isValidSync(data);
+      })
+      .when('NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED', {    
+        is: (value: boolean) => value === true,
+        then: (schema) => schema,
+        otherwise: (schema) => schema.test(
+          'not-exist',
+          'NEXT_PUBLIC_ACCOUNT_API_KEYS_BUTTON can only be used if NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED is set to \'true\'',
+          value => value === undefined,
+        ),
+      }),
     NEXT_PUBLIC_ACCOUNT_AUTH_PROVIDER: yup
       .string<AuthProvider>()
       .when('NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED', {
         is: (value: boolean) => value === true,
         then: (schema) => schema.oneOf([ 'auth0', 'dynamic' ]),
-        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_ACCOUNT_AUTH_PROVIDER cannot not be used if NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED is not defined'),
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_ACCOUNT_AUTH_PROVIDER can only be used if NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED is set to \'true\''),
       }),
     NEXT_PUBLIC_ACCOUNT_DYNAMIC_ENVIRONMENT_ID: yup
       .string()

deploy/tools/envs-validator/test/.env.alt

@@ -11,5 +11,6 @@ NEXT_PUBLIC_HAS_USER_OPS=true
 NEXT_PUBLIC_USER_OPS_INDEXER_API_HOST=https://example.com
 NEXT_PUBLIC_NAVIGATION_PROMO_BANNER_CONFIG={'img_url': {'small': 'https://example.com/promo-sm.png', 'large': 'https://example.com/promo-lg.png'}, 'link_url': 'https://example.com'}
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_ACCOUNT_API_KEYS_BUTTON=https://example.com
 NEXT_PUBLIC_ACCOUNT_AUTH_PROVIDER=dynamic
 NEXT_PUBLIC_ACCOUNT_DYNAMIC_ENVIRONMENT_ID=xxx

deploy/tools/envs-validator/test/.env.base

@@ -1,5 +1,6 @@
 NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN=https://rollbar.com
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_ACCOUNT_API_KEYS_BUTTON=false
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=xxx
 NEXT_PUBLIC_WALLET_CONNECT_FEATURED_WALLET_IDS=['xxx']
 NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=xxx

docs/ENVS.md

@@ -430,6 +430,7 @@ Settings for meta tags, OG tags and SEO
 | NEXT_PUBLIC_ACCOUNT_AUTH_PROVIDER | `auth0 \| dynamic` | Auth provider that enables basic user authentication.  | - | `auth0` | `dynamic` | upcoming |
 | NEXT_PUBLIC_ACCOUNT_DYNAMIC_ENVIRONMENT_ID | `string` | Environment ID of the Dynamic project.  | Required, if provider is `dynamic` | - | `<your-secret>` | upcoming |
 | NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY | `boolean` | See [below](#google-recaptcha) | Required, if provided is `auth0` | - | `<your-secret>` | v1.0.x+ |
+| NEXT_PUBLIC_ACCOUNT_API_KEYS_BUTTON | `boolean \| string` | Pass `true` or `false` to enable or disable the "Add API key" button, or provide a URL to convert it into a link. | - | `true` | `https://example.com` | upcoming |
 
 &nbsp;
 
@@ -594,6 +595,7 @@ Ads are enabled by default on all self-hosted instances. If you would like to di
 | Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
 | --- | --- | --- | --- | --- | --- | --- |
 | NEXT_PUBLIC_API_DOCS_TABS | `Array<TabId>` | Controls which tabs appear on the API documentation page. Possible values for `TabId` are `rest_api`, `eth_rpc_api`, `rpc_api`, and `graphql_api`. **Note** that this variable has a default value, so the feature is enabled by default. Pass an empty array to disable it. | - | `['rest_api','eth_rpc_api','rpc_api','graphql_api']` | `[]` | v2.3.x+ |
+| NEXT_PUBLIC_API_DOCS_ALERT_MESSAGE | `string` | Used for displaying custom alerts on the API documentation page. Could be a regular string or a HTML code. | - | - | `Hello world! 🤪` | upcoming |
 
 &nbsp;
 

ui/pages/ApiDocs.tsx

@@ -9,6 +9,7 @@ import EthRpcApi from 'ui/apiDocs/EthRpcApi';
 import GraphQL from 'ui/apiDocs/GraphQL';
 import RestApi from 'ui/apiDocs/RestApi';
 import RpcApi from 'ui/apiDocs/RpcApi';
+import AlertWithExternalHtml from 'ui/shared/alerts/AlertWithExternalHtml';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
 const feature = config.features.apiDocs;
@@ -27,6 +28,7 @@ const ApiDocs = () => {
       <PageTitle
         title={ config.meta.seo.enhancedDataEnabled ? `${ config.chain.name } API documentation` : 'API documentation' }
       />
+      { feature.isEnabled && feature.alertMessage ? <AlertWithExternalHtml html={ feature.alertMessage } status="info" showIcon mb={ 6 }/> : null }
       { tabs.length > 0 ? <RoutedTabs tabs={ tabs }/> : <Text>No API documentation available</Text> }
     </>
   );

ui/pages/ApiKeys.tsx

@@ -24,6 +24,7 @@ import useRedirectForInvalidAuthToken from 'ui/snippets/auth/useRedirectForInval
 const DATA_LIMIT = 3;
 
 const apiKeysAlertHtml = config.UI.apiKeysAlert.message;
+const feature = config.features.account;
 
 const ApiKeysPage: React.FC = () => {
   const apiKeyModalProps = useDisclosure();
@@ -100,6 +101,29 @@ const ApiKeysPage: React.FC = () => {
 
     const alert = apiKeysAlertHtml ? <AlertWithExternalHtml html={ apiKeysAlertHtml } status="warning" mb={ 6 }/> : null;
 
+    const button = (() => {
+      if (!feature.isEnabled || feature.apiKeysButton === false) {
+        return null;
+      }
+
+      if (typeof feature.apiKeysButton === 'string') {
+        return (
+          <Link href={ feature.apiKeysButton } external noIcon>
+            <Button>Add API key</Button>
+          </Link>
+        );
+      }
+
+      return (
+        <Button
+          onClick={ apiKeyModalProps.onOpen }
+          disabled={ !canAdd }
+        >
+          Add API key
+        </Button>
+      );
+    })();
+
     return (
       <>
         { description }
@@ -114,12 +138,7 @@ const ApiKeysPage: React.FC = () => {
           columnGap={ 5 }
           rowGap={ 5 }
         >
-          <Button
-            onClick={ apiKeyModalProps.onOpen }
-            disabled={ !canAdd }
-          >
-            Add API key
-          </Button>
+          { button }
           { !canAdd && (
             <Text fontSize="sm" color="text.secondary">
               { `You have added the maximum number of API keys (${ DATA_LIMIT }). Contact us to request additional keys.` }