feat(example): polish arbitrum-london demo for judge-readiness#22
Merged
Conversation
- Wire the real @txkit/themes design tokens. The app was rendering entirely from hardcoded hex fallbacks: <html> used .txkit-dark (no such selector; real one is .tx-dark) and globals.css referenced non-existent --txkit-color-* vars. Now <html class="tx-root tx-dark"> + base/dark imports + a --tx-* -> --color-* bridge, so the brand indigo, slate dark surfaces, IBM Plex Mono, spacing, radii and semantic colors all come from the design system. - Elevate EnvelopePreview: prominent action header + innerLabel, middle-ellipsis monospace addresses, sectioned layout, optional feeSlot. - Add SequencerFeeRow (Pendle flow only): live L1 calldata + L2 compute split via @txkit/arbitrum-adapter previewSequencerFee, fetched with react-query through the wagmi public client; loading hint, null degrades to hidden. - Landing: lead with the value prop + ERC-8265 (PR #1753) credential chip, promote the working Pendle flow, demote scenario C to an honest roadmap card. - PolicyStatusBadge + error surfaces use semantic tokens. - PendleAgentChat: consolidate six useState into one object state, replace the nested ternaries (button label, reply text) with named helpers; behaviour preserved. - Commit the favicon.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
…cursor Adopts the strongest ideas from a Figma Make pass of the same screen, kept on @txkit/themes tokens and txKit conventions (no lucide / inline SVG, prop-driven, wired to the real envelope + previewSequencerFee). - globals.css: restore cursor: pointer on enabled buttons (Tailwind v4 dropped the preflight default), so every button across the demo shows the pointer. - CopyableValue: new component - click-to-copy for addresses and the envelope hash with a brief confirmation, plus an optional Arbiscan link (text glyph, not an inline SVG). - EnvelopePreview: live ticking expiry countdown (h/m/s), copyable values via CopyableValue with explorer links, and the fee moved to its own section. - SequencerFeeRow: render an L1 calldata / L2 compute / Total breakdown card (Total is the real totalFeeWei from previewSequencerFee) instead of one line. - PendleAgentChat: pass the Arbiscan base url, add a Reject button beside Sign. Deliberately skipped from the Figma pass: USD fee equivalents (needs a price oracle, were mock there) and lucide status icons (txKit uses CSS-mask SVG, and the badge dot already carries the status). Verified: tsc clean, eslint clean on the changed files, button cursor computes to pointer, dev server console error-free.
Code-review follow-ups for PR #22. - CopyableValue: await navigator.clipboard.writeText and only show the 'copied' confirmation when it resolves, so a denied clipboard no longer shows a false success. The dismiss timeout is tracked in a ref and cleared on unmount (and before re-arming) to avoid a setState-after-unmount leak. - CopyableValue: the explorer link title is now 'View on block explorer' (the component is generic; the link can point at Robinhood Chain). - SequencerFeeRow: derive the chainId from the chain prop instead of a hardcoded ARBITRUM_SEPOLIA_CHAIN_ID, so the type contract is honest. The wagmi config wires Arbitrum Sepolia, and an unconfigured chain returns an undefined client which the queryFn already treats as no preview. - arbitrum-adapter/sequencer.ts: drop the stray blank line inside the catch. Verified: example tsc + eslint clean, @txkit/arbitrum-adapter tests 23/23.
…ll3) The fee row never rendered in the browser. Root cause: wagmi's shared public client batches reads through Multicall3, and the Arbitrum NodeInterface (0xC8) is a virtual precompile the node only resolves on a DIRECT eth_call - routed as a Multicall3 sub-call it returns empty data, so previewSequencerFee always got null. (Node-side, a plain viem client worked, which masked the issue earlier.) - SequencerFeeRow: read the precompile through a dedicated plain viem client instead of wagmi's usePublicClient. viem does not multicall unless asked, so the direct eth_call reaches the precompile. demo: Arbitrum Sepolia only (the Pendle flow is the sole caller); this also resolves the earlier nit about the hardcoded chain by making the scope explicit in a comment. - providers + .env.example: NEXT_PUBLIC_ARB_SEPOLIA_RPC_URL configures the Arbitrum Sepolia RPC for both the fee client and the wagmi config, falling back to the public default. A dedicated RPC (e.g. Alchemy) is recommended: the public default is rate-limited for the NodeInterface eth_call. Verified in-browser against a configured Alchemy RPC: the fee renders L1 calldata / L2 compute / Total live. The Alchemy url lives in .env.local (gitignored), never committed. tsc + eslint clean.
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
1 participant
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.
Polish pass on the Arbitrum Open House London Buildathon demo (
examples/arbitrum-london) to make it judge-ready. Scope is the example only - nopackages/*changes. The Pendle flow (Scenario A) is the live demo; Scenario C (RWA on Robinhood) is honestly framed as roadmap.The headline fix: the demo now actually uses @txkit/themes
The app was rendering entirely from hardcoded hex fallbacks, not the design system. Proven via
getComputedStyle:<html>hadclass="txkit-dark"but the real selector is.tx-dark(+.tx-rootfor the base), andglobals.cssreferenced non-existent--txkit-color-*vars. So--tx-color-bg/--tx-color-primarywere empty and everything fell back to#0a0a0a/#5b8cff.Fix (2 files):
<html class="tx-root tx-dark">+ import@txkit/themes/baseand/dark, and bridge the real--tx-*tokens onto the--color-*names the components already reference. The brand indigo, slate-tinted dark surfaces, IBM Plex Mono, spacing, radii and semantic colors now all come from the design system - which is the point of the demo. Verified live (tokens resolve, mono = IBM Plex Mono).Other changes
0x9a7C…8E90), sectioned layout, optionalfeeSlot.@txkit/arbitrum-adapterpreviewSequencerFee, fetched with react-query through the wagmi public client. Loading hint; a null preview (RPC down or simulated call reverts) renders nothing rather than blocking the envelope.--tx-color-success/warning/errortokens instead of hardcoded Tailwind palette.useStateconsolidated into one object state; nested ternaries (button label, reply text) replaced with named helpers. Behaviour preserved.@txkit/arbitrum-adapteradded as a workspace dependency.Verification
tsc --noEmitclean.eslint app src/uiclean (the repo-wide eslint errors are all from vendoredcontracts/lib/**Solidity deps, pre-existing and out of scope)./flow-a,/flow-call render, browser console error-free.Decisions baked in (confirmed with Mike)
buildRwaEnvelopestill throws).useStateconsolidation, not just the visual pass.Known follow-ups (not blockers, not in scope here)
@txkit/themesships--tx-*tokens butmono/CLAUDE.mdstill documents the old--txkit-*prefix - a docs drift to fix in the themes package, noted here, not touched.Not merging - leaving open for review.