feat: Add ecosystem hub with deployment dashboard and protocol feature pages#4
Merged
Merged
Conversation
…e pages This comprehensive update introduces the complete Tectonic protocol ecosystem interface with four new feature pages and enhanced navigation. ## Key Changes ### 🎯 New Pages Added (4 new feature pages) 1. **Deployments Dashboard** (app/deployments/page.tsx) - Live reserve ratio monitoring across all EVM chains - Contract health status with visual indicators - Mint/Redeem interface with real-time oracle prices - Interactive deployment cards with chain-specific data - Protocol overview section with sparkline charts 2. **Equity Coins Hub** (app/equity/page.tsx) - Detailed equity coin listings for all deployments - Per-deployment yield tracking and APR calculations - Price charts, leverage exposure, and supply metrics - Buy/Sell interface with status indicators 3. **Force Redemption Monitor** (app/force-redemption/page.tsx) - Real-time monitoring of reserve ratio health - Visual reserve ratio scale and safe threshold indicators - Detailed explanation of force redemption mechanism - One-click redemption interface for crisis scenarios 4. **StablePay Feature Page** (app/stablepay/page.tsx) - Interactive payment flow animation demo - Live checkout simulation (ETH to stablecoin conversion) - Technical flow explanation with step-by-step breakdown - Fee structure and settlement details ### 🧩 Component Updates - **New Navbar Component** (components/Navbar.tsx) - Global navigation with active link highlighting - Wallet connection modal with MetaMask, WalletConnect, Coinbase support - Connected wallet dropdown with address copy, chain info, balance display - Mobile responsive hamburger menu - Animated active state indicators - **Homepage Updates** (app/page.tsx) - Integrated Navbar component - Added HeroTypewriter component for animated hero text - Updated hero section with typewriter effect - Removed legacy status column from deployment table - Enhanced mobile responsiveness ### 📐 Configuration & Styling - **GitHub Pages Deployment** (next.config.ts) - Added static export configuration - BasePath and assetPrefix for GitHub Pages - Unoptimized images for static hosting - **CSS Enhancements** (app/globals.css) - Active navigation link styling with persistent underline - Improved visual hierarchy and transitions - **Documentation Update** (README.md) - Complete rewrite with better structure - Added Table of Contents - Expanded feature descriptions - Improved Getting Started section - Added Roadmap and Community integration links ## 🎨 Design Consistency - All new pages follow the existing amber/gold color palette (#fbbf24) - Consistent card design with warm off-white backgrounds (#fbf6ec) - Unified border styling with #e7dac4 - Status indicators: Emerald (healthy), Amber (warning), Red (danger/force redemption) - Matching typography and spacing across all components ## ✨ Features Included - Real-time data displays with mock API data - Animated transitions and interactive elements - Fully responsive design (mobile, tablet, desktop) - Accessibility features (ARIA labels, semantic HTML) - Modal dialogs for mint/redeem operations - Wallet connection management - Network chain indicators with color coding ## 📱 Responsive Design - Mobile-first approach with proper breakpoints - Touch-friendly interactive elements - Collapsible navigation menu for mobile - Adaptive card grids (1, 2, 3 columns based on screen size) ## 🔗 Navigation Structure ` / (home) ├── /deployments (Deployment Dashboard) ├── /equity (Equity Coins Hub) ├── /force-redemption (Force Redemption Monitor) └── /stablepay (StablePay Feature) ` ## 🚀 Ready for Deployment - Static export ready for GitHub Pages - All images optimized for static hosting - No server-side dependencies - Fast static site generation
|
Warning Review limit reached
More reviews will be available in 26 minutes and 57 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (8)
WalkthroughIntroduces a multi-page dashboard for the Tectonic EVM WebUI: a shared ChangesDashboard Pages and Navigation Infrastructure
Sequence Diagram(s)sequenceDiagram
participant User
participant Navbar
participant WalletModal
participant window.ethereum
participant WalletDropdown
User->>Navbar: Click "Connect Wallet"
Navbar->>WalletModal: open modal
User->>WalletModal: select wallet provider
alt MetaMask detected
WalletModal->>window.ethereum: eth_requestAccounts
window.ethereum-->>WalletModal: accounts[]
WalletModal->>window.ethereum: eth_chainId
window.ethereum-->>WalletModal: chainId hex
else Other provider
WalletModal->>WalletModal: simulated delay + fake address + fixed chainId
end
WalletModal->>Navbar: onConnected(WalletInfo)
Navbar->>WalletDropdown: render connected wallet state
User->>WalletDropdown: copy address / view Etherscan / disconnect
sequenceDiagram
participant Browser
participant DeploymentDetailPage
participant DeploymentDetailClient
participant DEPLOYMENTS
participant MintRedeemForm
Browser->>DeploymentDetailPage: GET /deployments/[id]
DeploymentDetailPage->>DeploymentDetailClient: render(id)
DeploymentDetailClient->>DEPLOYMENTS: find by id
alt id not found
DeploymentDetailClient-->>Browser: notFound()
else found
DeploymentDetailClient->>DeploymentDetailClient: statusCfg(d.status) → styling
DeploymentDetailClient->>MintRedeemForm: render StableCoinCard + EquityCoinCard
MintRedeemForm->>MintRedeemForm: compute net = amount × (1 - 0.003)
MintRedeemForm->>MintRedeemForm: estimateFn(net) → output preview
DeploymentDetailClient-->>Browser: full page with health section
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
…pages - Fix property name references in app/equity/page.tsx: - c.border → c.cardBorder - c.bg → c.headerBg - c.bbg → c.badgeBg - c.bt → c.badgeBorder - c.dot → c.dotColor (with proper dot element) - Fix property name references in app/force-redemption/page.tsx: - c.bbg → c.badgeBg - c.bt → c.badgeBorder - c.dot → c.dotColor (with proper dot element) - c.bar → c.barColor These fixes resolve TypeScript compilation errors in the build.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 19
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
app/page.tsx (3)
513-513:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winFix the invalid Tailwind shadow utility.
At Line 513,
shadow-[0_10px_28_rgba(15,23,42,0.06)]is malformed (28is missingpx), so this shadow class won’t compile/apply as intended.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/page.tsx` at line 513, The Tailwind shadow utility in the div class string is malformed: replace the invalid fragment "shadow-[0_10px_28_rgba(15,23,42,0.06)]" (seen in the div with classes including rounded-2xl border bg-white/80 p-5 text-center) with a valid arbitrary shadow such as "shadow-[0_10px_28px_rgba(15,23,42,0.06)]" so the "28" includes the missing "px" and the shadow compiles/applies correctly.
141-163: 🛠️ Refactor suggestion | 🟠 Major | 🏗️ Heavy liftExternalize user-visible strings to i18n resources.
This page introduces substantial inline UI copy; move it to resource files to satisfy localization requirements and avoid hardcoded English in components.
As per coding guidelines, "Internationalization: User-visible strings should be externalized to resource files (i18n)."Also applies to: 219-253, 280-285, 347-348, 380-385, 490-493, 551-552
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/page.tsx` around lines 141 - 163, The page contains hardcoded user-visible strings in the feature objects (properties title, emoji, desc) and elsewhere; extract these strings into your i18n resource files and replace the literals with lookup calls (e.g., t('features.forcedRedemptions.title'), t('features.forcedRedemptions.desc')) used by your app's translation helper; update the feature array (the objects with title/emoji/desc/color) and all other occurrences noted (lines ~219-253, 280-285, 347-348, 380-385, 490-493, 551-552) to reference the i18n keys, keep non-user-visible values like color unchanged, and ensure the component (page/component that renders these features) imports and uses the translation function so the UI strings come from the resource files.Source: Coding guidelines
305-305:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winReplace placeholder
href="#"links in user-facing CTAs.These anchors are currently dead/stale targets (for example at Lines 305, 321, 474, 482, 530, 557, 564, 571, 610-611, 620-621, 628-630), which degrades navigation and trust in core calls-to-action.
Also applies to: 321-321, 474-474, 482-482, 530-530, 557-557, 564-564, 571-571, 610-611, 620-621, 628-630
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/page.tsx` at line 305, Several user-facing CTA anchors use placeholder href="#" (e.g., the <a className="text-yellow-600 font-medium hover:underline">Learn more →</a> instances), which yields dead links; replace each placeholder link with the correct destination (internal route path or external URL) or convert the element to Next.js <Link> when routing within the app, and add an appropriate aria-label; for external targets include rel="noopener noreferrer" and target="_blank" as needed. Locate all occurrences by searching for the "Learn more →" text and the "text-yellow-600 font-medium hover:underline" class (and other CTA anchors called out in the comment) and update their hrefs or switch to Link accordingly so CTAs navigate to meaningful pages. Ensure accessibility attributes are present and remove any remaining '#' hrefs.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/deployments/page.tsx`:
- Around line 168-180: The footer currently renders anchors with placeholder
href="#" in the map expressions for labels (the arrays used in the three blocks
that render ["Docs","Contracts","GitHub"], ["Discord","Twitter","Forum"], and
["Whitepaper","Blog","Press"]), causing broken links; update those renderings so
any item without a real URL is not an interactive anchor — either supply the
correct URL for that label (e.g., replace "#" with the real destination) or
render a non-clickable element (span or a visually/semantically disabled link
with aria-disabled and no href) for labels that aren’t ready, and ensure
GitHub/Discord/Twitter keep their external anchor behavior when real URLs exist.
- Around line 129-191: The PageShell component currently contains hardcoded UI
strings (e.g., the back link "← Back to Deployments", heading/subtitle, all
footer and list labels inside PageShell) which must be externalized to i18n
resources: replace literal JSX strings in PageShell with calls to your
translation API (e.g., t('deployments.back'), t('deployments.title'),
t('footer.protocol'), etc.), create matching keys in the locale resource files,
and load/use the translation hook or HOC at the top of PageShell (or pass
translated props) so the component consumes stable keys instead of literals;
update all other hardcoded blocks noted in the comment (the repeated
footer/sections around the component) similarly and ensure externalized keys
cover headings, link labels, list items and copyright text.
- Around line 223-239: The overlay markup (the top-level div with backdrop and
the inner dialog header that uses mode and d) must be converted into an
accessible dialog: add role="dialog" and aria-modal="true" to the dialog
container, add an aria-labelledby pointing to the header h3 (give the h3 a
stable id), and ensure the close button uses aria-label; wire Escape key
handling to call onClose and restore focus to the element that opened the
dialog; implement basic focus management (move initial focus into the
dialog—preferably to the first focusable control such as the close button—and
trap tab/shift+tab inside the dialog while open). Ensure backdrop click behavior
remains (existing onClick comparing e.target === e.currentTarget) and that these
changes are applied to both occurrences referenced in the file.
- Around line 388-398: The effect schedules requestAnimationFrame loops (tick)
but never cancels them, so add a cleanup that cancels the pending animation
frame on unmount: inside the useEffect that uses countDone, target, dur, s0,
tick, and setTvl, capture the requestAnimationFrame id(s) (assign the return
value of requestAnimationFrame to a variable and update it each time tick
re-schedules) and return a cleanup function that calls cancelAnimationFrame on
that id; this ensures tick stops and setTvl won't run after unmount.
- Around line 216-250: The mint asset selector (state variable asset and
setAsset) can diverge from the quote source used to compute receive (which
always uses d.oraclePrice and d.reserveAsset), causing incorrect quotes; fix by
removing the free selector and binding the control to the deployment's reserve
asset (use d.reserveAsset as the only option and initialize asset to
d.reserveAsset), or if you intend to support multiple reserve assets, implement
per-asset pricing logic: replace the single d.oraclePrice usage with a lookup
that picks the correct oracle price for the selected asset (e.g.,
getOraclePriceFor(asset) and use that in receive) and populate the <select>
options from deployment-supported assets instead of hardcoded ETH/WBTC/MATIC;
ensure setAsset updates the price lookup so receive recalculates correctly.
In `@app/equity/page.tsx`:
- Around line 16-154: This page has many hard-coded user strings (titles,
subtitles, badge text, stat labels, explainer items, card labels, button text,
table headers) — move all user-visible strings into your i18n resource files and
replace inline literals with i18n lookups (e.g., using useTranslation/t or a
translate function) inside the component; specifically update references used in
this file such as EQUITY_COINS, DEPLOYMENTS, the top-level title/subtitle/badge,
each label in the stats map, the explainer items array, the card header/status
text (c.label, button texts "Buy"/"Sell"/"Exit Position"), and the table header
literals to use locale keys, and add the necessary import (useTranslation) and
key names in your locale JSON so the component calls t('equity.title'),
t('equity.stats.teqtLabel'), etc., rather than embedding strings.
- Around line 64-72: The card component is using the old statusCfg aliases
(c.border/c.bg/c.bbg/c.bt/c.dot/bar) which don't match the provider contract;
update all references to use the provider field names instead (replace c.border
→ c.cardBorder, c.bg → c.headerBg, c.bbg → c.badgeBg, c.bt → c.badgeText, c.dot
→ c.dotColor and any bar → barColor) wherever the component renders (e.g., in
the JSX that uses eq and c in page.tsx and the other page with the same pattern)
so the className/style lookups align with the provider's
cardBorder/headerBg/badgeBg/badgeText/dotColor/barColor keys.
In `@app/force-redemption/page.tsx`:
- Around line 18-169: The page hardcodes all user-facing strings (e.g., the page
title "Force Redemption Monitor", subtitle, badge "Monitoring Active", banner
headings/descriptions, the "How Force Redemption Works" card items,
ReserveWidget label, table headers, button labels "Force Redeem"/"Monitor", and
the Reserve Ratio Scale labels) and must be externalized to i18n resource keys;
create keys for each literal (including the array of step items and table header
labels) and replace inline strings with i18n lookups in this component, the
mapped item arrays, and any child components like ReserveWidget; ensure dynamic
strings (e.g., banner "Force Redemption Active — {names}" and
dangerList/warningList joins, ratio/pct values) use interpolation/placeholders
from the i18n resources, and propagate locale props or use the existing i18n
hook (e.g., useLocale/useTranslation) so statusCfg, DEPLOYMENTS labels and
buttons render with localized text while preserving existing identifiers such as
dangerList, warningList, ReserveWidget, DEPLOYMENTS, statusCfg, and
setRedeemTarget.
In `@app/globals.css`:
- Around line 422-426: The rule .active-nav-link::after uses !important which
blocks overrides; change it to a more specific selector such as
.nav-link.active-nav-link::after (or increase specificity by combining
parent/class context) and remove the !important declarations so the underline
state is controlled by normal cascade and theming; update the selector for the
transform and opacity properties in the active-nav-link::after rule and ensure
no other conflicting rules rely on !important.
In `@app/stablepay/page.tsx`:
- Line 25: The anchor using href="#" inside the detail renderer for the "Payment
Successful" item (the detail: () => ... JSX in app/stablepay/page.tsx) should
not navigate; either replace the <a href="#">View on Explorer →</a> with a
<button> styled like a link (keeping classes like text-xs text-amber-600
hover:underline) or add an onClick handler that calls e.preventDefault() and any
intended handler; apply the same change to the other similar anchor instance
mentioned (the other detail renderer around the same component).
- Around line 7-213: The file currently hardcodes all user-visible strings —
externalize them to i18n resources: replace inline labels and text found in
PaymentFlow (step labels in the steps array, button text used in the CTA, input
placeholder/aria text, amount USD display, the step detail strings), and the
page-level strings in StablePayPage (title, subtitle, badge text, value
proposition items, technical flow items, table headers and rows) with keys
looked up from your i18n layer (e.g., t('stablepay.checkout.title') etc.);
update usages in functions/components PaymentFlow and StablePayPage to call the
translator (or use Trans components) and move all strings into locale
JSON/resource files, ensuring interpolation for dynamic values like amount and
method and keeping existing keys consistent with the UI structure.
- Around line 21-26: The steps array and its per-step detail callbacks are being
recreated on every render; extract them out of the component by creating a small
factory like buildSteps(amount, method) that returns the steps array (or by
exporting a constant for truly static entries) so you only allocate new objects
when amount/method change; update usages of steps in the component to call
buildSteps(amount, method) (or use the exported constant) and ensure the detail
entries no longer close over component scope but receive amount/method as
parameters or already-resolved JSX so you avoid recreating function instances
each render (refer to the steps variable and each detail callback in the diff).
- Around line 141-210: The component recreates three static arrays on every
render (the value props array mapped to item, the technical flow steps array
mapped to s, and the fee table rows array mapped from tuples), so extract them
as top-level constants (e.g., VALUE_PROPS, TECHNICAL_STEPS, FEE_ROWS) outside
the component in the same module and replace the inline arrays in the JSX with
those constants; keep the existing keys (item.title, s.n, action) and mapping
logic (the .map callbacks and JSX blocks) unchanged so the render behavior is
identical.
- Around line 42-48: The amount input lacks an associated label and allows
zero/negative values; add an accessible label linked to the input (use an id on
the input and a <label htmlFor="..."> or add aria-label) and enforce validation
on the amount state (in the onChange/onBlur handlers) so values below 1 are
rejected or clamped to a minimum of 1; update the input element referenced by
value={amount} and onChange={e => setAmount(...)} to parse the numeric value,
ignore or correct invalid/non-positive numbers, and set a min attribute
(min={1}) to reinforce browser-level validation.
- Around line 13-18: The start function schedules multiple timeouts (setTimeouts
setting setStep and setRunning) but doesn't clear them on unmount; change this
by storing each timer id in a ref (e.g., timersRef) when calling start, add a
useEffect that returns a cleanup which iterates timersRef to clearTimeout all
pending timers and resets the ref, and ensure you import useRef and useEffect
from React; also clear any existing timers at the start of start() before
scheduling new ones to avoid duplicates.
In `@components/Navbar.tsx`:
- Around line 355-359: The Docs nav entry in NAV_ITEMS uses an in-page anchor
("`#docs`") which can be a dead link on routes without that anchor; update
NAV_ITEMS so the Docs item points to a stable route (for example change the href
value for the object with label "Docs" from "`#docs`" to "/docs" or another
guaranteed route/id) and ensure any route-generation or Link/Menu rendering
logic continues to use NAV_ITEMS unchanged.
In `@next.config.ts`:
- Around line 5-13: The config currently hardcodes repoName
("Tectonic-EVM-WebUI") which breaks basePath/assetPrefix for forks or renames;
replace the static repoName with a value derived from the GITHUB_REPOSITORY
environment variable when isGitHubPagesBuild is true. Update nextConfig to
compute repoSlug = process.env.GITHUB_REPOSITORY?.split("/")[1] ||
repoNameFallback and use that repoSlug for basePath and assetPrefix (referencing
repoName, basePath, assetPrefix, and isGitHubPagesBuild) so CI-provided
repository names drive the paths while preserving a sensible fallback.
In `@README.md`:
- Around line 93-108: The README's project tree is outdated and omits new files
introduced in this PR; update the ASCII tree to include the new navigation and
pages by adding entries for components/Navbar.tsx and the app routes
app/deployments/page.tsx, app/equity/page.tsx, app/force-redemption/page.tsx,
and app/stablepay/page.tsx so the structure matches the repository; ensure the
filenames match the exact casing used in the repo and place each file under the
correct directory node (components/ and app/) in the displayed tree.
- Around line 193-204: The ordered list in README.md is broken by an unindented
code block between steps 4 and 5 which triggers markdown linters; fix the list
by either converting step 4 to a single inline sentence ("Run `npm run build`
and `npm run lint` to verify your changes") or by indenting the fenced code
block so it belongs to step 4 (e.g., indent the triple-backtick fence and its
contents under the "4. Run:" line) so the numbering (steps 1–5) remains
continuous and lint-safe.
---
Outside diff comments:
In `@app/page.tsx`:
- Line 513: The Tailwind shadow utility in the div class string is malformed:
replace the invalid fragment "shadow-[0_10px_28_rgba(15,23,42,0.06)]" (seen in
the div with classes including rounded-2xl border bg-white/80 p-5 text-center)
with a valid arbitrary shadow such as "shadow-[0_10px_28px_rgba(15,23,42,0.06)]"
so the "28" includes the missing "px" and the shadow compiles/applies correctly.
- Around line 141-163: The page contains hardcoded user-visible strings in the
feature objects (properties title, emoji, desc) and elsewhere; extract these
strings into your i18n resource files and replace the literals with lookup calls
(e.g., t('features.forcedRedemptions.title'),
t('features.forcedRedemptions.desc')) used by your app's translation helper;
update the feature array (the objects with title/emoji/desc/color) and all other
occurrences noted (lines ~219-253, 280-285, 347-348, 380-385, 490-493, 551-552)
to reference the i18n keys, keep non-user-visible values like color unchanged,
and ensure the component (page/component that renders these features) imports
and uses the translation function so the UI strings come from the resource
files.
- Line 305: Several user-facing CTA anchors use placeholder href="#" (e.g., the
<a className="text-yellow-600 font-medium hover:underline">Learn more →</a>
instances), which yields dead links; replace each placeholder link with the
correct destination (internal route path or external URL) or convert the element
to Next.js <Link> when routing within the app, and add an appropriate
aria-label; for external targets include rel="noopener noreferrer" and
target="_blank" as needed. Locate all occurrences by searching for the "Learn
more →" text and the "text-yellow-600 font-medium hover:underline" class (and
other CTA anchors called out in the comment) and update their hrefs or switch to
Link accordingly so CTAs navigate to meaningful pages. Ensure accessibility
attributes are present and remove any remaining '#' hrefs.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 91c4bc52-7666-4471-a784-736f925dc794
📒 Files selected for processing (9)
README.mdapp/deployments/page.tsxapp/equity/page.tsxapp/force-redemption/page.tsxapp/globals.cssapp/page.tsxapp/stablepay/page.tsxcomponents/Navbar.tsxnext.config.ts
Comment on lines
+129
to
+191
| export function PageShell({ title, subtitle, badge, children }: { | ||
| title: string; subtitle: string; badge?: React.ReactNode; children: React.ReactNode; | ||
| }) { | ||
| return ( | ||
| <> | ||
| <Navbar /> | ||
| <div className="pt-[68px] border-b border-[#e7dac4] bg-white"> | ||
| <div className="max-w-7xl mx-auto px-4 sm:px-6 py-8 flex items-start justify-between flex-wrap gap-4"> | ||
| <div> | ||
| <Link href="/deployments" | ||
| className="text-xs font-semibold text-amber-600 hover:text-amber-700 transition flex items-center gap-1 mb-3"> | ||
| ← Back to Deployments | ||
| </Link> | ||
| <h1 className="text-2xl md:text-3xl font-bold text-[#1a1a1a]">{title}</h1> | ||
| <p className="text-gray-500 text-sm mt-1 max-w-xl">{subtitle}</p> | ||
| </div> | ||
| {badge} | ||
| </div> | ||
| </div> | ||
| <main className="min-h-screen bg-[#fbf6ec] pb-24"> | ||
| <div className="max-w-7xl mx-auto px-4 sm:px-6 py-8">{children}</div> | ||
| </main> | ||
| {/* footer — identical to homepage */} | ||
| <footer className="relative overflow-hidden border-t border-amber-200 bg-gradient-to-br from-amber-50 via-white to-orange-50 px-6 pt-14 pb-4"> | ||
| <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-amber-300 to-transparent opacity-80" /> | ||
| <div className="pointer-events-none absolute -left-16 bottom-0 h-40 w-40 rounded-full bg-amber-200/30 blur-3xl" /> | ||
| <div className="pointer-events-none absolute right-0 top-10 h-44 w-44 rounded-full bg-orange-200/30 blur-3xl" /> | ||
| <div className="relative mx-auto max-w-7xl px-2 pt-4 pb-0 md:px-6"> | ||
| <div className="grid gap-10 md:grid-cols-[1.25fr_1fr_1fr_1fr] md:gap-12"> | ||
| <div className="max-w-sm"> | ||
| <div className="logo-hover-wrap mb-4 flex items-center gap-3 text-slate-900"> | ||
| <Image src="/Logo.svg" alt="Tectonic logo" width={160} height={44} className="logo-hover-zoom h-9 w-auto object-contain" /> | ||
| <span className="text-xl font-black tracking-[0.22em]">TECTONIC</span> | ||
| </div> | ||
| <p className="max-w-xs text-sm leading-6 text-slate-600">Next-generation stablecoin protocol.</p> | ||
| </div> | ||
| <div> | ||
| <h4 className="mb-4 text-sm font-semibold uppercase tracking-[0.22em] text-amber-700">Protocol</h4> | ||
| <ul className="space-y-3 text-sm text-slate-700"> | ||
| {["Docs","Contracts","GitHub"].map(l=><li key={l}><a href={l==="GitHub"?"https://github.com/StabilityNexus/Tectonic-EVM-WebUI":"#"} target={l==="GitHub"?"_blank":undefined} rel={l==="GitHub"?"noopener noreferrer":undefined} className="transition hover:text-amber-700 hover:underline hover:underline-offset-4">{l}</a></li>)} | ||
| </ul> | ||
| </div> | ||
| <div> | ||
| <h4 className="mb-4 text-sm font-semibold uppercase tracking-[0.22em] text-amber-700">Community</h4> | ||
| <ul className="space-y-3 text-sm text-slate-700"> | ||
| {["Discord","Twitter","Forum"].map(l=><li key={l}><a href={l==="Discord"?"https://discord.com/channels/995968619034984528/1503320626096635935":"#"} target={l==="Discord"?"_blank":undefined} rel={l==="Discord"?"noopener noreferrer":undefined} className="transition hover:text-amber-700 hover:underline hover:underline-offset-4">{l}</a></li>)} | ||
| </ul> | ||
| </div> | ||
| <div> | ||
| <h4 className="mb-4 text-sm font-semibold uppercase tracking-[0.22em] text-amber-700">Resources</h4> | ||
| <ul className="space-y-3 text-sm text-slate-700"> | ||
| {["Whitepaper","Blog","Press"].map(l=><li key={l}><a href="#" className="transition hover:text-amber-700 hover:underline hover:underline-offset-4">{l}</a></li>)} | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| <div className="mt-24 border-t border-amber-200/80 pt-6"> | ||
| <p className="text-center text-sm text-slate-600">© 2026 Tectonic Protocol. All rights reserved.</p> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
| </> | ||
| ); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major | 🏗️ Heavy lift
Move the UI copy into locale resources instead of JSX literals.
Headings, button labels, status text, feature descriptions, and footer copy are all hardcoded in the component tree. That locks the dashboard to one language and makes future localization require code edits throughout the route. Please lift the copy into an i18n resource layer and keep stable keys in the component code.
As per coding guidelines, Internationalization: User-visible strings should be externalized to resource files (i18n).
Also applies to: 214-301, 420-703
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/deployments/page.tsx` around lines 129 - 191, The PageShell component
currently contains hardcoded UI strings (e.g., the back link "← Back to
Deployments", heading/subtitle, all footer and list labels inside PageShell)
which must be externalized to i18n resources: replace literal JSX strings in
PageShell with calls to your translation API (e.g., t('deployments.back'),
t('deployments.title'), t('footer.protocol'), etc.), create matching keys in the
locale resource files, and load/use the translation hook or HOC at the top of
PageShell (or pass translated props) so the component consumes stable keys
instead of literals; update all other hardcoded blocks noted in the comment (the
repeated footer/sections around the component) similarly and ensure externalized
keys cover headings, link labels, list items and copyright text.
Source: Coding guidelines
Comment on lines
+168
to
+180
| {["Docs","Contracts","GitHub"].map(l=><li key={l}><a href={l==="GitHub"?"https://github.com/StabilityNexus/Tectonic-EVM-WebUI":"#"} target={l==="GitHub"?"_blank":undefined} rel={l==="GitHub"?"noopener noreferrer":undefined} className="transition hover:text-amber-700 hover:underline hover:underline-offset-4">{l}</a></li>)} | ||
| </ul> | ||
| </div> | ||
| <div> | ||
| <h4 className="mb-4 text-sm font-semibold uppercase tracking-[0.22em] text-amber-700">Community</h4> | ||
| <ul className="space-y-3 text-sm text-slate-700"> | ||
| {["Discord","Twitter","Forum"].map(l=><li key={l}><a href={l==="Discord"?"https://discord.com/channels/995968619034984528/1503320626096635935":"#"} target={l==="Discord"?"_blank":undefined} rel={l==="Discord"?"noopener noreferrer":undefined} className="transition hover:text-amber-700 hover:underline hover:underline-offset-4">{l}</a></li>)} | ||
| </ul> | ||
| </div> | ||
| <div> | ||
| <h4 className="mb-4 text-sm font-semibold uppercase tracking-[0.22em] text-amber-700">Resources</h4> | ||
| <ul className="space-y-3 text-sm text-slate-700"> | ||
| {["Whitepaper","Blog","Press"].map(l=><li key={l}><a href="#" className="transition hover:text-amber-700 hover:underline hover:underline-offset-4">{l}</a></li>)} |
There was a problem hiding this comment.
Replace the href="#" footer placeholders before shipping.
Docs, Contracts, Twitter, Forum, Whitepaper, Blog, and Press currently look interactive but only jump to the top of the current page. If those destinations are not ready yet, render plain text or a disabled state instead of broken links.
Also applies to: 675-696
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/deployments/page.tsx` around lines 168 - 180, The footer currently
renders anchors with placeholder href="#" in the map expressions for labels (the
arrays used in the three blocks that render ["Docs","Contracts","GitHub"],
["Discord","Twitter","Forum"], and ["Whitepaper","Blog","Press"]), causing
broken links; update those renderings so any item without a real URL is not an
interactive anchor — either supply the correct URL for that label (e.g., replace
"#" with the real destination) or render a non-clickable element (span or a
visually/semantically disabled link with aria-disabled and no href) for labels
that aren’t ready, and ensure GitHub/Discord/Twitter keep their external anchor
behavior when real URLs exist.
**next.config.ts:** - Replace hardcoded repo slug with GITHUB_REPOSITORY-derived value - Fixes broken routing for forks and template reuse **components/Navbar.tsx:** - Fix non-functional '#docs' link to valid homepage route - Prevents dead link on pages without anchor **app/deployments/page.tsx (MRModal):** - Add role='dialog' and aria-modal='true' for accessibility - Add aria-labelledby linking to dialog header - Add aria-label to close button - Implement Escape key handler for keyboard navigation - Fix asset selector to lock to deployment's reserve asset (removes state mutation) - Replaces free selector dropdown with read-only input field **app/deployments/page.tsx (useEffect):** - Cancel requestAnimationFrame on component unmount - Prevents animation callbacks running on unmounted component - Fixes potential memory leaks and React warnings **app/stablepay/page.tsx:** - Add useRef to track timeout IDs - Clear all pending timeouts on component unmount - Prevent state updates on unmounted component - Fixes memory leaks from setTimeout callbacks **README.md:** - Update project structure to reflect all new pages and components - Add descriptions for each new feature page - Fix markdown list interrupted by code block (improves linting)
ankitkr104
added
enhancement
…otocol pages - Rename StableCoin/EquityCoin terminology consistently across all pages - Add deployments-data.ts as single source of truth for deployment data - Redesign deployment detail page with two-card layout (StableCoin + EquityCoin) - Add Deployment Health section with reserve ratio slider and trigger redemptions status - Rename deployment cards with proper readable names (TUSD on Ethereum, etc.) - Remove redundant reserve ratio widget and Quick Reference section - Replace undraw SVG with effect.mp4 video in StableCoin panel - Add VIEW ALL DEPLOYMENTS button with hover arrow animation linking to /deployments - Fix oraclePrice build error in equity page (replaced with totalReserve) - Add DeploymentDetailClient with per-deployment mint/redeem action panels - Update equity page Yield by Deployment table headers
There was a problem hiding this comment.
Actionable comments posted: 8
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/deployments/`[id]/DeploymentDetailClient.tsx:
- Around line 36-77: Extract all user-facing strings embedded in the
DeploymentDetailClient.tsx component and move them to i18n resource files. This
includes labels like "Deposit"/"Burn", placeholder text "0.00", card headings
like "Fee" and "You Receive", button text like "Mint" and "Redeem", and any
other visible UI copy throughout the component (lines 36-77 and extending
through line 401). Import the appropriate i18n hook or function and replace each
hardcoded string with a call to retrieve the localized string from the resource
file using the corresponding translation key. Ensure all user-visible text in
the component uses i18n lookups instead of being hardcoded directly in JSX.
- Around line 376-389: Replace the placeholder href="#" values in the footer
navigation links with actual URLs or remove the link functionality entirely. In
the DeploymentDetailClient.tsx file where the footer columns are mapped (the
structure containing "Docs", "Twitter", and "Technical Paper" links), update
each link's href attribute to point to real destinations. For links without a
real URL destination, either provide the actual URL or convert them to
non-interactive text elements instead of anchor tags to avoid creating broken
navigation experiences for users.
In `@app/deployments/page.tsx`:
- Around line 8-13: Remove the named exports of CHART_DATA, statusCfg, pct,
Sparkline, ReserveWidget, and PageShell from the app/deployments/page.tsx file
to comply with Next.js App Router constraints that only allow reserved exports
in page.tsx files. Create a new shared module (such as
app/deployments/shared.tsx or lib/deployments-ui.tsx) and move these utilities
and components there, then update all three consuming locations that currently
import these exports from app/deployments/page.tsx to instead import them from
the new shared module.
In `@app/force-redemption/page.tsx`:
- Line 63: The ReserveWidget component at this location has hardcoded ratio and
label values that duplicate data from the DEPLOYMENTS source. Instead of using
ratio={120} and label="BSC — USDBN-BSC (Active)" as fixed values, derive both
the ratio and label from the dangerList (or DEPLOYMENTS) data structure. This
ensures that when the deployment configuration changes in the source data, the
widget automatically reflects the correct values without manual updates.
- Around line 141-161: Replace the hardcoded array that is being mapped over in
the visualization with data derived from the DEPLOYMENTS constant. Instead of
maintaining duplicate ratio and label information, extract the relevant
deployment entries from DEPLOYMENTS and transform them to match the shape needed
for the map function, using the reserveRatio field from DEPLOYMENTS for the
ratio values and constructing the labels from the deployment metadata. This
ensures the visualization automatically stays in sync with the actual deployment
data and eliminates the current mismatch where the hardcoded ratio of 350 for
Ethereum differs from the DEPLOYMENTS reserveRatio of 325.
In `@app/page.tsx`:
- Line 142: Externalize all hardcoded user-visible strings to support
internationalization by setting up an i18n solution like next-intl. Create
locale resource files with translations for each user-facing string (including
"Trigger Redemptions", "StableCoin Supply", "StableCoin Protocol", "Technical
Paper", and all other UI labels referenced in app/page.tsx). Import and use the
useTranslations hook in the component to replace each hardcoded string with
corresponding translation function calls throughout the file at all affected
locations (lines 142, 179, 220, 247, 408, 520, 528, 536-537, 544, and 640).
Ensure each string is moved to the appropriate section in the locale JSON files
with a clear, hierarchical key structure that reflects its purpose and context.
- Around line 331-340: The video element displaying effect.mp4 lacks
accessibility attributes for users with motion sensitivity. Add
aria-hidden="true" to the video element to indicate it is decorative content.
Additionally, add a Tailwind class (such as motion-reduce:hidden) to the video
container div to hide it when users have enabled prefers-reduced-motion in their
system settings. Then add the corresponding CSS media query rule in your
Tailwind configuration or global CSS file to define the motion-reduce:hidden
utility class that respects the prefers-reduced-motion preference.
In `@README.md`:
- Around line 205-210: The markdown fenced code block containing the npm run
build and npm run lint commands is missing required blank lines before and after
the fence delimiters, which violates the MD031 linting rule. Add a blank line
immediately after the opening triple backticks (before the bash language
identifier or first command) and add a blank line immediately after the closing
triple backticks (before "5. Submit a Pull Request.") to properly separate the
code block from surrounding content.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 0a3b33e7-16db-471e-aa61-2d3520b4b92c
⛔ Files ignored due to path filters (2)
public/effect.mp4is excluded by!**/*.mp4public/undraw_crypto-portfolio_mf2i (1).svgis excluded by!**/*.svg
📒 Files selected for processing (10)
README.mdapp/deployments/[id]/DeploymentDetailClient.tsxapp/deployments/[id]/page.tsxapp/deployments/page.tsxapp/equity/page.tsxapp/force-redemption/page.tsxapp/page.tsxcomponents/Navbar.tsxlib/deployments-data.tsnext.config.ts
💤 Files with no reviewable changes (1)
- components/Navbar.tsx
Comment on lines
+376
to
+389
| { title: "Protocol", links: [["Docs","#"],["Contracts","#"],["GitHub","https://github.com/StabilityNexus/Tectonic-EVM-WebUI"]] }, | ||
| { title: "Community", links: [["Discord","https://discord.com/channels/995968619034984528/1503320626096635935"],["Twitter","#"]] }, | ||
| { title: "Resources", links: [["Technical Paper","#"]] }, | ||
| ].map(col => ( | ||
| <div key={col.title}> | ||
| <h4 className="mb-4 text-sm font-semibold uppercase tracking-[0.22em] text-amber-700">{col.title}</h4> | ||
| <ul className="space-y-3 text-sm text-slate-700"> | ||
| {col.links.map(([label, href]) => ( | ||
| <li key={label}> | ||
| <a | ||
| href={href} | ||
| target={href.startsWith("http") ? "_blank" : undefined} | ||
| rel={href.startsWith("http") ? "noopener noreferrer" : undefined} | ||
| className="transition hover:text-amber-700 hover:underline hover:underline-offset-4" |
There was a problem hiding this comment.
Replace href="#" placeholders with real URLs or non-interactive text.
These links look actionable but currently do not navigate to real destinations, which creates a broken UX in a primary footer area.
Proposed fix pattern
- { title: "Protocol", links: [["Docs","#"],["Contracts","#"],["GitHub","https://github.com/StabilityNexus/Tectonic-EVM-WebUI"]] },
+ { title: "Protocol", links: [["Docs", null],["Contracts", null],["GitHub","https://github.com/StabilityNexus/Tectonic-EVM-WebUI"]] },
- {col.links.map(([label, href]) => (
+ {col.links.map(([label, href]) => (
<li key={label}>
- <a href={href} ...>{label}</a>
+ {href ? (
+ <a href={href} ...>{label}</a>
+ ) : (
+ <span className="text-slate-400 cursor-default">{label}</span>
+ )}
</li>
))}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/deployments/`[id]/DeploymentDetailClient.tsx around lines 376 - 389,
Replace the placeholder href="#" values in the footer navigation links with
actual URLs or remove the link functionality entirely. In the
DeploymentDetailClient.tsx file where the footer columns are mapped (the
structure containing "Docs", "Twitter", and "Technical Paper" links), update
each link's href attribute to point to real destinations. For links without a
real URL destination, either provide the actual URL or convert them to
non-interactive text elements instead of anchor tags to avoid creating broken
navigation experiences for users.
Comment on lines
+205
to
+210
| 4. Run the following commands: | ||
| ```bash | ||
| npm run build | ||
| npm run lint | ||
| ``` | ||
| 5. Submit a Pull Request. |
There was a problem hiding this comment.
Add blank lines around the fenced code block to comply with markdown linting.
Lines 205–210 are missing blank lines before and after the code block, which triggers the MD031 (blanks-around-fences) markdownlint warning. Even when code blocks are indented as list continuations, markdown linters expect blank lines to separate the fence from surrounding content.
🔧 Proposed fix for markdown spacing
4. Run the following commands:
+
```bash
npm run build
npm run lint
```
+
5. Submit a Pull Request.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| 4. Run the following commands: | |
| ```bash | |
| npm run build | |
| npm run lint | |
| ``` | |
| 5. Submit a Pull Request. | |
| 4. Run the following commands: |
🧰 Tools
🪛 markdownlint-cli2 (0.22.1)
[warning] 206-206: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
[warning] 209-209: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@README.md` around lines 205 - 210, The markdown fenced code block containing
the npm run build and npm run lint commands is missing required blank lines
before and after the fence delimiters, which violates the MD031 linting rule.
Add a blank line immediately after the opening triple backticks (before the bash
language identifier or first command) and add a blank line immediately after the
closing triple backticks (before "5. Submit a Pull Request.") to properly
separate the code block from surrounding content.
Source: Linters/SAST tools
Contributor
Author
|
Hi @Zahnentferner , I've addressed your suggestions, resolved the CodeRabbit comments, and incorporated the UI improvements we discussed. The deployment page has been restructured to better separate StableCoin and EquityCoin operations, deployment naming has been updated, and the overall layout has been refined. Could you please take a look and let me know if there's anything I've missed or any additional changes you'd like to see before we move forward? https://drive.google.com/file/d/11kV-QyhWb2RtJ09U-GarMEbMGviWT5rG/view?usp=sharing |
This was referenced Jun 19, 2026
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.
This comprehensive update introduces the complete Tectonic protocol ecosystem interface with four new feature pages and enhanced navigation.
Key Changes
🎯 New Pages Added (4 new feature pages)
Deployments Dashboard (app/deployments/page.tsx)
Equity Coins Hub (app/equity/page.tsx)
Force Redemption Monitor (app/force-redemption/page.tsx)
StablePay Feature Page (app/stablepay/page.tsx)
🧩 Component Updates
New Navbar Component (components/Navbar.tsx)
Homepage Updates (app/page.tsx)
📐 Configuration & Styling
GitHub Pages Deployment (next.config.ts)
CSS Enhancements (app/globals.css)
Documentation Update (README.md)
🎨 Design Consistency
✨ Features Included
📱 Responsive Design
🔗 Navigation Structure
/ (home) ├── /deployments (Deployment Dashboard) ├── /equity (Equity Coins Hub) ├── /force-redemption (Force Redemption Monitor) └── /stablepay (StablePay Feature)🚀 Ready for Deployment
Recordings:
new.mp4
Additional Notes:
AI Usage Disclosure:
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.
Check one of the checkboxes below:
I have used the following AI models and tools: TODO
Checklist
Summary by CodeRabbit
New Features
Improvements
Chores