Skip to content

feat(ui): make API keys instruction configurable via NEXT_PUBLIC_API_… #3329

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rahulkumaar03 wants to merge 1 commit into
base: main
Choose a base branch
from
+18 −5
Open

feat(ui): make API keys instruction configurable via NEXT_PUBLIC_API_… #3329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions configs/app/ui.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ const UI = Object.freeze({
apiKeysAlert: {
message: getEnvValue('NEXT_PUBLIC_API_KEYS_ALERT_MESSAGE'),
},
apiKeysInstruction: getEnvValue('NEXT_PUBLIC_API_KEYS_INSTRUCTION'),
explorers: {
items: parseEnvJson<Array<NetworkExplorer>>(getEnvValue('NEXT_PUBLIC_NETWORK_EXPLORERS')) || [],
},
Expand Down
1 change: 1 addition & 0 deletions deploy/tools/envs-validator/schema.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@ const schema = yup
// Misc
NEXT_PUBLIC_USE_NEXT_JS_PROXY: yup.boolean(),
NEXT_PUBLIC_API_KEYS_ALERT_MESSAGE: yup.string(),
NEXT_PUBLIC_API_KEYS_INSTRUCTION: yup.string(),
NEXT_PUBLIC_API_DOCS_ALERT_MESSAGE: yup.string(),
})
.concat(apisSchema)
Expand Down
1 change: 1 addition & 0 deletions deploy/tools/envs-validator/test/.env.base
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN=https://rollbar.com
NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
NEXT_PUBLIC_ACCOUNT_API_KEYS_BUTTON=false
NEXT_PUBLIC_API_KEYS_INSTRUCTION='Create API keys to use for your RPC and EthRPC API requests. For more information, see <a href="https://docs.blockscout.com/using-blockscout/my-account/api-keys#api-keys" target="_blank" rel="noopener noreferrer">"How to use a Blockscout API key"</a>.'
NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=xxx
NEXT_PUBLIC_WALLET_CONNECT_FEATURED_WALLET_IDS=['xxx']
NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=xxx
Expand Down
1 change: 1 addition & 0 deletions docs/ENVS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -380,6 +380,7 @@ Settings for meta tags, OG tags and SEO
| 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 \| Array<string>` | Used to display custom announcements or alerts in the site's header, this feature can handle a single instance or an array of regular strings or HTML code. If an array of instances is provided, the banners will rotate randomly each time the user reloads the page. In this case, please ensure that you properly escape the values of HTML attributes or other special symbols (for example, `<a href=\\"https://example.com\\">Link!</a>`). | - | - | `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_API_KEYS_INSTRUCTION | `string` | Optional intro paragraph above the API keys list. Plain text or HTML (e.g. with `<a>` links). If unset or empty, the intro line is hidden. | - | - | `Create API keys to use for your RPC and EthRPC API requests. For more information, see <a href="https://docs.blockscout.com/using-blockscout/my-account/api-keys#api-keys" target="_blank" rel="noopener noreferrer">"How to use a Blockscout API key"</a>.` | 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+ |
Expand Down
19 changes: 14 additions & 5 deletions ui/pages/ApiKeys.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { Button } from 'toolkit/chakra/button';
import { Link } from 'toolkit/chakra/link';
import { Skeleton } from 'toolkit/chakra/skeleton';
import { useDisclosure } from 'toolkit/hooks/useDisclosure';
import { space } from 'toolkit/utils/htmlEntities';
import ApiKeyModal from 'ui/apiKey/ApiKeyModal/ApiKeyModal';
import ApiKeyListItem from 'ui/apiKey/ApiKeyTable/ApiKeyListItem';
import ApiKeyTable from 'ui/apiKey/ApiKeyTable/ApiKeyTable';
Expand All @@ -24,6 +23,7 @@ import useRedirectForInvalidAuthToken from 'ui/snippets/auth/useRedirectForInval
const DATA_LIMIT = 3;

const apiKeysAlertHtml = config.UI.apiKeysAlert.message;
const apiKeysInstructionHtml = config.UI.apiKeysInstruction?.trim();
const feature = config.features.account;

const ApiKeysPage: React.FC = () => {
Expand Down Expand Up @@ -60,12 +60,21 @@ const ApiKeysPage: React.FC = () => {
deleteModalProps.onOpenChange({ open });
}, [ deleteModalProps ]);

const description = (
const description = apiKeysInstructionHtml ? (
Copy link
Copy Markdown
Collaborator

@tom2drum tom2drum Apr 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @rahulkumaar03,
Thank you for your contribution. However, we would prefer to keep the current text as the default if the variable is not set.

<AccountPageDescription>
Create API keys to use for your RPC and EthRPC API requests. For more information, see { space }
<Link href="https://docs.blockscout.com/using-blockscout/my-account/api-keys#api-keys" external noIcon>"How to use a Blockscout API key"</Link>.
<Box
dangerouslySetInnerHTML={{ __html: apiKeysInstructionHtml }}
css={{
'& a': {
color: 'link.primary',
_hover: {
color: 'link.primary.hover',
},
},
}}
/>
</AccountPageDescription>
);
) : null;

const content = (() => {
if (isError) {
Expand Down