feat(og): dynamic OG rendering for all entity routes + block/receipt#768
Merged
feat(og): dynamic OG rendering for all entity routes + block/receipt#768
Conversation
achalvs
force-pushed
the
feat/static-og-images
branch
2 times, most recently
from
55af6ce to
bf92856
Compare
achalvs
force-pushed
the
feat/static-og-images
branch
from
bf92856 to
22cc72d
Compare
Cloudflare Deployments
|
achalvs
force-pushed
the
feat/static-og-images
branch
2 times, most recently
from
681171c to
dd756a6
Compare
Bundle Size Report
Chunk changes (>1KB)
Compared against main branch (baseline from 2/4/2026, 5:13:51 PM) |
achalvs
force-pushed
the
feat/static-og-images
branch
3 times, most recently
from
36567e0 to
0ac8936
Compare
Collaborator
Author
OG Image Test Matrix (50 test cases)All images from real Tempo mainnet data. URLs constructed as explorer will generate post-merge. Blocks (8)
Transactions (11)
Receipts (10)
Addresses (6)
Contracts (6)
Tokens (6)
Static (3)
|
achalvs
force-pushed
the
feat/static-og-images
branch
2 times, most recently
from
9775ddd to
8663d7b
Compare
Restore dynamic OG image rendering for all entity routes (tx, token, address, receipt, block) with updated background templates. - /tx/:hash renders ReceiptCard on transaction background - /receipt/:hash renders ReceiptCard on receipt background - /block/:id renders BlockCard on block background (new) - /token/:address renders TokenCard on token background - /address/:address renders AddressCard on address/contract background - /blocks and /tokens serve static listing images - /explorer serves static default image - Replace Tempo Receipt logo with TEMPO lockup SVG - Add BlockCard component and blockOgQuerySchema - Add OG meta tags to explorer block detail pages
achalvs
force-pushed
the
feat/static-og-images
branch
from
8663d7b to
e7bd4fb
Compare
o-az
approved these changes
Mar 24, 2026
- Show "No events to display." when events array is empty - Show "Failed to render summary." when eventsFailed flag is set - Wire eventsFailed query param through schema and route handlers
…tweaks - Add contractCall case to both OG event formatters so system txs show "Call 0xc0000000 on 0x000...000" instead of bare "Call" - Replace ReceiptMark logo with "View →" pill button in tx sidebar - Brighten receipt card background (bg-base-alt) for dark mode visibility
…col layout Takumi's renderer doesn't handle React fragments inside flex-col containers, causing events to render side-by-side instead of stacked.
# Conflicts: # pnpm-lock.yaml
- Fee: always show "Fee (pathUSD)" label, "$0.00" in grey for zero-fee txs - Date: rename to "Time (UTC)", smart format "Month Day ⋅ HH:MM:SS" (drop year if current year) - Status: add Success/Failed badge with color coding on tx/receipt cards - Blocks: reorder (Miner/Parent above Txns/Gas), add tx histogram with blue current bar, add 20-segment gas usage progress bar - Events: purple for hex selectors, no-wrap when no amount column - Addresses: "$0.00" grey for empty holdings, remove Last Active from contracts - Params: add status field to tx schema, prevBlocks to block schema
… reorder fields - TxHistogram: maxHeight 80->40, bar width 8->12px, grey #d1d5db->#e5e7eb - GasProgressBar: unfilled #e5e7eb->#f3f4f6 - Pipe dividers: lighter color, histogram pipe 40->28px - Field order: Transactions + Gas Usage now above Miner + Parent
…ted txs - Replace U+22C5 dot operator with U+00B7 middle dot (Pilat font compat) - Move status badge after block number, not before - Always use "Call" as contract call action name (not "Failed" for reverted txs) since status is shown via the badge
OG worker: - Convert TxHistogram and GasProgressBar from div-based to inline SVG data URIs for dramatically faster WASM rendering - Fix cdot U+22C5 -> U+00B7 middle dot (Pilat font compat) - Move status badge after block number, not before - Gracefully skip histogram when prevBlocks data missing Explorer: - Block loader fetches 7 prior blocks' tx counts via Promise.all - head() passes prevBlocks param in OG URL for histogram rendering
# Conflicts: # apps/og/src/ui.tsx
- Set fontWeight 400 explicitly on token name (prevents synthetic bold) - Increase name truncation from 18 to 28 chars (allows longer names) - Reduce font size from text-5xl to text-[42px] with line-height 1.1 - Show "0" in grey for holders when data unavailable (was showing —)
- Badge border radius (6px) + consistent padding on Success/Failed - Status badge text size reduced to 20px - Don't show $0 on event amounts (hides useless amounts) - Pill styling shared constant (8px radius, consistent padding) - All badges (tokens, methods, action) use rounded pill style - Gradient increased from 60px to 100px - Card minHeight 400px to ensure gradient coverage - Holdings row vertical centering with padding - Token name: stack badge below if name > 20 chars - Currency symbol icon (circle with $,€ etc) next to currency name - Holders greyed when 0, supply shows "0.00" greyed when empty - Contract header: items-center for vertical alignment - Assets label added before token badges in address card - Token badge margin fix: no left margin on first badge - Method badges: increased maxCharsPerRow to 48, single flex-wrap row to prevent premature +N overflow
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
/explorer,/blocks, and/tokenslisting pagesBlockCardcomponent with SVG transaction histogram and gas usage progress bar<meta og:image>tags for blocks, tokens listing, and receipt pagesRoute Coverage
/explorer/tx/:hash/receipt/:hash/block/:id/token/:address/address/:address(EOA)/address/:address(contract)/blocks/tokensScreenshots
Dynamic Routes
/tx/:hash/receipt/:hash/block/:id/token/:address/address/:address(EOA)/address/:address(contract)Technical Changes
OG Worker (
apps/og)font-feature-settings: "tnum"for tabular numeralsBlockCardwith prev-block tx counts, gas percentage visualizationReceiptCardwith status badge, event details, fee token labelExplorer (
apps/explorer)head()passesprevBlocksandstatusparams in OG URLsbg-base-alt)Test Plan
GET /explorerreturns updated static imageGET /tx/:hash?...renders card with status badge, event detailsGET /receipt/:hash?...renders receipt cardGET /block/:id?...renders BlockCard with histogram + gas barGET /token/:address?...renders TokenCard with icon and real dataGET /address/:address?...&accountType=accountrenders AddressCardGET /address/:address?...&accountType=contractrenders ContractCards-maxage=3600) applies in production