feat: add OG image generation for feature gate pages (#913)

## Description
- Add Open Graph image generation for feature gate pages so shared links
display a rich preview with the feature title and SIMD number(s). Works
for `/address/<address>/feature-gate`
[example](https://explorer.solana.com/address/5xXZc66h4UdB6Yq7FzdBxBiRAFMMScMLwHxk2QZDaNZL/feature-gate?cluster=testnet)
and `/address/<address>`
[example](https://explorer.solana.com/address/5xXZc66h4UdB6Yq7FzdBxBiRAFMMScMLwHxk2QZDaNZL?cluster=testnet)
- Refactor `app/features/feature-gate/` into FSD-aligned sub-modules
(`api/`, `lib/`, `ui/`, `env.ts`, `server.ts`) and narrow the
client-facing `index.ts` export
- Extract `SolanaLogo` from receipt feature into
`app/shared/components/` with `variant` (`gradient` | `green`) and
unique SVG `id` props to support reuse across OG images

## Type of change

<!-- Check the appropriate options that apply to this PR -->

-   [x] New feature

## Screenshots
<img width="2184" height="755"
alt="localhost_3000_og_feature-gate_5xXZc66h4UdB6Yq7FzdBxBiRAFMMScMLwHxk2QZDaNZL"
src="https://github.com/user-attachments/assets/1739f84e-76ef-41c3-9a8f-aefdbd06f49e"
/>


## Testing
### Environment
- FEATURE_GATE_OG_ENABLED — set to "true" to enable OG images on feature
gate pages (default: disabled)
- FEATURE_GATE_BASE_URL — set to https://explorer.solana.com
                      
### Vercel Firewall Configuration
If Attack Challenge Mode is enabled, add bypass rules so social media
crawlers can fetch preview images and visit feature gate pages:
                                                          
Name: Allow bots for feature gate OG images
  Rule:                                                   
If `Request Path` `Starts with` `/og/feature-gate/`
Then `Bypass`
Name: Allow bots to visit feature gate address pages
Rule:
If `Request Path` `Starts with` `/address/`
      Then `Bypass`        

## Test plan
- [ ] Set `FEATURE_GATE_OG_ENABLED=true` and visit
`/og/feature-gate/<known-feature-address>` — should return a PNG
- [ ] Visit `/og/feature-gate/<unknown-address>` — should return 404
- [ ] Visit `/og/feature-gate/invalid!!!` — should return 400
- [ ] With `FEATURE_GATE_OG_ENABLED=false`, all OG routes return 404 and
pages have no `og:image` meta
- [ ] Existing receipt OG images still work (Logo import path changed)

## Related Issues

Closes
[HOO-384](https://linear.app/solana-fndn/issue/HOO-384/add-share-preview-images-for-explorer-features)

## Checklist

<!-- Verify that you have completed the following before requesting
review -->

-   [x] My code follows the project's style guidelines
-   [x] I have added tests that prove my fix/feature works
-   [x] All tests pass locally and in CI
-   [x] I have updated documentation as needed
-   [x] I have run `build:info` script to update build information
-   [x] CI/CD checks pass
-   [x] I have included screenshots for protocol screens (if applicable)

---------

Co-authored-by: Sergo <rogaldh@radsh.red>

Author: askov

.env.example

@@ -45,6 +45,11 @@ RECEIPT_BASE_URL=https://explorer.solana.com
 RECEIPT_OG_IMAGE_VERSION=1
 ### Comma-separated Jito tip recipient addresses (optional; defaults to known Jito accounts). Exposed to client.
 NEXT_PUBLIC_RECEIPT_JITO_ACCOUNTS=3AVi9Tg9Uo68tJfuvoKvqKNWKkC5wPdSSdeBnizKZ6jT,HFqU5x63VTqvQss8hp11i4wVV8bD44PvwucfZ2bU7gRe
+## Configuration for "Feature Gate OG" feature
+### Set to "true" to enable OG images on feature gate pages
+FEATURE_GATE_OG_ENABLED=false
+### Base URL for OG image links (defaults to https://explorer.solana.com)
+FEATURE_GATE_BASE_URL=https://explorer.solana.com
 ## Configuration for token verification feature
 ### Configuration for Jupiter API
 JUPITER_API_KEY=

app/address/[address]/feature-gate/page.tsx

@@ -5,7 +5,7 @@ import ReactMarkdown from 'react-markdown';
 import remarkFrontmatter from 'remark-frontmatter';
 import remarkGFM from 'remark-gfm';
 
-import { fetchFeatureGateInformation } from '@/app/features/feature-gate';
+import { fetchFeatureGateInformation, getFeatureGateOpenGraph } from '@/app/features/feature-gate/server';
 import { getFeatureInfo } from '@/app/utils/feature-gate/utils';
 
 type Props = Readonly<{
@@ -15,9 +15,11 @@ type Props = Readonly<{
 }>;
 
 export async function generateMetadata(props: AddressPageMetadataProps): Promise<Metadata> {
+    const title = `Feature Gate | ${await getReadableTitleFromAddress(props)} | Solana`;
     return {
         description: `Feature information for address ${props.params.address} on Solana`,
-        title: `Feature Gate | ${await getReadableTitleFromAddress(props)} | Solana`,
+        openGraph: getFeatureGateOpenGraph(props.params.address),
+        title,
     };
 }
 

app/address/[address]/page.tsx

@@ -2,6 +2,7 @@ import { TransactionHistoryCard } from '@components/account/history/TransactionH
 import getReadableTitleFromAddress, { AddressPageMetadataProps } from '@utils/get-readable-title-from-address';
 import { Metadata } from 'next/types';
 
+import { getFeatureGateOpenGraph } from '@/app/features/feature-gate/server';
 import { TransactionsProvider } from '@/app/providers/transactions';
 
 type Props = Readonly<{
@@ -11,9 +12,14 @@ type Props = Readonly<{
 }>;
 
 export async function generateMetadata(props: AddressPageMetadataProps): Promise<Metadata> {
+    const title = `Transaction History | ${await getReadableTitleFromAddress(props)} | Solana`;
     return {
         description: `History of all transactions involving the address ${props.params.address} on Solana`,
-        title: `Transaction History | ${await getReadableTitleFromAddress(props)} | Solana`,
+        // Feature gate OG images are intentionally shown on the main address page too,
+        // so shared links to feature gate addresses always display the rich preview.
+        // e.g. /address/5xXZc66h4UdB6Yq7FzdBxBiRAFMMScMLwHxk2QZDaNZL?cluster=testnet
+        openGraph: getFeatureGateOpenGraph(props.params.address),
+        title,
     };
 }
 

app/components/shared/__stories__/HexData.stories.tsx

@@ -21,10 +21,8 @@ const truncateShortData = new Uint8Array([0xfe, 0xab, 0xcd]);
 const truncateLongData = new Uint8Array(Array.from({ length: 67 }, (_, i) => i));
 const atThresholdData = new Uint8Array(Array.from({ length: 16 }, (_, i) => i + 0xa0));
 
-// Centered default for autodocs preview
 export const Default: Story = {
     args: { align: 'start', raw: multiRowData },
-    parameters: { layout: 'centered' },
 };
 
 // ── Empty ────────────────────────────────────────────────────────────

app/features/feature-gate/__tests__/feature-gate.spec.ts

@@ -3,7 +3,7 @@ import { vi } from 'vitest';
 
 import { FeatureInfoType } from '@/app/utils/feature-gate/types';
 
-import { fetchFeatureGateInformation, getLink } from '../index';
+import { fetchFeatureGateInformation, getLink } from '../api/fetchFeatureGateInformation';
 
 // Taken from ../../../utils/feature-gate/featureGates.json
 const FEATURE: FeatureInfoType = {

app/features/feature-gate/api/fetchFeatureGateInformation.ts

@@ -0,0 +1,49 @@
+import fetch from 'cross-fetch';
+
+import { Logger } from '@/app/shared/lib/logger';
+import { FeatureInfoType } from '@/app/utils/feature-gate/types';
+
+// Good candidate to move to environment variables, but at the moment repository is public, so we leave them hardcoded (could be changed later)
+const OWNER = 'solana-foundation';
+const REPO = 'solana-improvement-documents';
+const BRANCH = 'main';
+const PATH_COMPONENT = 'proposals';
+
+export async function fetchFeatureGateInformation(featureInfo?: FeatureInfoType): Promise<string[]> {
+    const empty: string[] = ['No data'];
+
+    const fileNames = featureInfo?.simd_link;
+
+    if (!fileNames) return empty;
+
+    const results = await Promise.all(
+        fileNames.map(async fileName => {
+            const link = getLink(fileName);
+            try {
+                const resp = await fetch(link, { method: 'GET' });
+
+                if (!resp.ok) {
+                    Logger.warn('[feature-gate] SIMD fetch failed', { link, status: resp.status });
+                    return 'No data';
+                }
+
+                return resp.text();
+            } catch (e) {
+                Logger.warn('[feature-gate] Cannot fetch link', { cause: e, link });
+                return 'No data';
+            }
+        }),
+    );
+
+    return results;
+}
+
+export function getLink(simdLink: string) {
+    // All the READMEs are stored at the same directory. That's why we only need the file name.
+    const components = simdLink.split('/');
+    const file = components[components.length - 1];
+
+    const uri = `https://raw.githubusercontent.com/${OWNER}/${REPO}/${BRANCH}/${PATH_COMPONENT}/${file}`;
+
+    return uri;
+}

app/features/feature-gate/constants.ts

@@ -0,0 +1,4 @@
+export const IMAGE_SIZE = {
+    height: 630,
+    width: 1200,
+};

app/features/feature-gate/env.ts

@@ -0,0 +1,9 @@
+import { EXPLORER_BASE_URL, isEnvEnabled } from '@utils/env';
+
+export function isFeatureGateOgEnabled() {
+    return isEnvEnabled(process.env.FEATURE_GATE_OG_ENABLED);
+}
+
+// Empty string is valid (relative URLs), only undefined falls back to EXPLORER_BASE_URL
+export const FEATURE_GATE_BASE_URL =
+    process.env.FEATURE_GATE_BASE_URL !== undefined ? process.env.FEATURE_GATE_BASE_URL.trim() : EXPLORER_BASE_URL;

app/features/feature-gate/index.ts

@@ -1,60 +1 @@
-import fetch from 'cross-fetch';
-
-import { Logger } from '@/app/shared/lib/logger';
-import { Cluster } from '@/app/utils/cluster';
-import { FeatureInfoType } from '@/app/utils/feature-gate/types';
-
-// Good candidate to move to environment variables, but at the moment repository is public, so we leave them hardcoded (could be changed later)
-const OWNER = 'solana-foundation';
-const REPO = 'solana-improvement-documents';
-const BRANCH = 'main';
-const PATH_COMPONENT = 'proposals';
-
-export function getLink(simdLink: string) {
-    // All the READMEs are stored at the same directory. That's why we only need the file name.
-    const components = simdLink.split('/');
-    const file = components[components.length - 1];
-
-    const uri = `https://raw.githubusercontent.com/${OWNER}/${REPO}/${BRANCH}/${PATH_COMPONENT}/${file}`;
-
-    return uri;
-}
-
-export async function fetchFeatureGateInformation(featureInfo?: FeatureInfoType): Promise<string[]> {
-    const empty: string[] = ['No data'];
-
-    const fileNames = featureInfo?.simd_link ?? null;
-
-    if (fileNames === null) return empty;
-
-    const results = await Promise.all(
-        fileNames.map(async fileName => {
-            const link = getLink(fileName);
-            try {
-                const resp = await fetch(link, { method: 'GET' });
-
-                if (!resp.ok) return 'No data';
-
-                return resp.text();
-            } catch (_e) {
-                Logger.debug('[feature-gate] Cannot fetch link', { link });
-                return 'No data';
-            }
-        }),
-    );
-
-    return results;
-}
-
-export function isFeatureActivated(feature: FeatureInfoType, cluster: Cluster) {
-    switch (cluster) {
-        case Cluster.MainnetBeta:
-            return feature.mainnet_activation_epoch !== null;
-        case Cluster.Devnet:
-            return feature.devnet_activation_epoch !== null;
-        case Cluster.Testnet:
-            return feature.testnet_activation_epoch !== null;
-        default:
-            return false;
-    }
-}
+export { isFeatureActivated } from './lib/isFeatureActivated';

app/features/feature-gate/lib/getFeatureGateOpenGraph.ts

@@ -0,0 +1,18 @@
+import type { Metadata } from 'next/types';
+
+import { getFeatureInfo } from '@/app/utils/feature-gate/utils';
+
+import { IMAGE_SIZE } from '../constants';
+import { FEATURE_GATE_BASE_URL, isFeatureGateOgEnabled } from '../env';
+
+export function getFeatureGateOpenGraph(address: string): Metadata['openGraph'] | undefined {
+    if (!isFeatureGateOgEnabled()) return undefined;
+
+    const featureInfo = getFeatureInfo(address);
+    if (!featureInfo) return undefined;
+
+    return {
+        images: [{ ...IMAGE_SIZE, url: `${FEATURE_GATE_BASE_URL}/og/feature-gate/${address}` }],
+        title: `Feature Gate | ${featureInfo.title} | Solana`,
+    };
+}