Update WebUI navigation, footer, and brand assets - #26
Conversation
WalkthroughThe change updates deployment metadata, deployment labels, navbar branding, community links, footer branding, footer resources, copyright alignment, and the Stability Nexus badge across the application. ChangesBranding and footer refresh
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested labels: Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ 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 |
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
lib/deployments-ui.tsx (1)
238-242: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winUse real destinations for the new resource links.
The new resource entries use
href="#"in every footer copy, so they do not open the promised resources.
lib/deployments-ui.tsx#L238-L242: provide actual URLs forTechnical PaperandKYA / Terms.app/deployments/page.tsx#L307-L308: provide actual URLs forTechnical PaperandKYA / Terms.app/page.tsx#L625-L626: provide actual URLs forTechnical PaperandKYA / Terms.🤖 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 `@lib/deployments-ui.tsx` around lines 238 - 242, Replace the placeholder href="#" values for the “Technical Paper” and “KYA / Terms” entries with their real resource URLs in lib/deployments-ui.tsx lines 238-242, app/deployments/page.tsx lines 307-308, and app/page.tsx lines 625-626, preserving the existing labels and link rendering.
🤖 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:
- Line 597: Replace the placeholder KYA / Terms href in the footer links of
DeploymentDetailClient with the actual terms route or external URL, and replace
the hardcoded label with a new footer i18n key. Add the corresponding
translation to the resource files and use that key alongside the existing
tFooter entries.
- Around line 594-597: Define explicit FooterLink and FooterColumn types near
the footer data in DeploymentDetailClient, then convert each column’s positional
links arrays into { label, href } objects. Update the footer rendering logic to
read link.label and link.href while preserving the existing translated labels
and destinations.
In `@lib/deployments-data.ts`:
- Line 33: Update the five contract-read configurations for the usdp-amoy
deployment to require chainId === d.chainId in each enabled condition, ensuring
reads and MintRedeemForm data are only active on Amoy while preserving existing
conditions.
- Line 33: Update the deployment contract-read enablement logic to require both
!d.isPlaceholder and a connected chainId equal to d.chainId, preventing reads
for deployments on other networks. Keep POL as a display-only reserveAsset label
and do not add asset lookup or allowance handling.
In `@lib/deployments-ui.tsx`:
- Around line 186-197: Extract the reusable footer markup currently owned by
PageShell into components/Footer.tsx, including its branding, links, and
translation behavior. Replace the equivalent footer markup in PageShell,
app/page.tsx, and app/deployments/page.tsx with the shared Footer component
while preserving the existing styling and content.
- Around line 229-238: Externalize all user-visible footer and community labels
through the existing localization resources. Update the community/resource
sections in lib/deployments-ui.tsx lines 229-238 and app/deployments/page.tsx
lines 298-308, copyright text in lib/deployments-ui.tsx lines 253-255 and
app/deployments/page.tsx lines 315-316 with localized year interpolation, and
community/footer labels in app/page.tsx lines 559-570 and 617-626; use localized
resource keys consistently across all views.
---
Outside diff comments:
In `@lib/deployments-ui.tsx`:
- Around line 238-242: Replace the placeholder href="#" values for the
“Technical Paper” and “KYA / Terms” entries with their real resource URLs in
lib/deployments-ui.tsx lines 238-242, app/deployments/page.tsx lines 307-308,
and app/page.tsx lines 625-626, preserving the existing labels and link
rendering.
🪄 Autofix
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 Plus
Run ID: 1ec60a23-e325-4dec-883a-182234b29517
⛔ Files ignored due to path filters (1)
public/logo-animated.gifis excluded by!**/*.gif
📒 Files selected for processing (6)
app/deployments/[id]/DeploymentDetailClient.tsxapp/deployments/page.tsxapp/page.tsxcomponents/Navbar.tsxlib/deployments-data.tslib/deployments-ui.tsx
| {[ | ||
| { title: tFooter("protocol"), links: [["Docs","#"],["Contracts","#"],["GitHub","https://github.com/StabilityNexus/Tectonic-EVM-WebUI"]] }, | ||
| { title: tFooter("community"), links: [["Discord","https://discord.com/channels/995968619034984528/1503320626096635935"],["Twitter","#"]] }, | ||
| { title: tFooter("resources"), links: [[tFooter("technicalPaper"),"#"]] }, | ||
| { title: tFooter("community"), links: [["Discord","https://discord.gg/YzDKeEfWtS"],["Telegram","https://t.me/StabilityNexus"]] }, | ||
| { title: tFooter("resources"), links: [[tFooter("technicalPaper"),"#"], ["KYA / Terms", "#"]] }, |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Use explicit types for footer link data.
The nested links arrays are inferred from positional string values. Define FooterLink and FooterColumn types, use { label, href } objects, and render named fields. This makes the footer data contract explicit.
Suggested type shape
+type FooterLink = {
+ label: string;
+ href: string;
+};
+
+type FooterColumn = {
+ title: string;
+ links: FooterLink[];
+};
+
- {col.links.map(([label, href]) => (
+ {col.links.map(({ label, href }) => (As per coding guidelines: “Use explicit types or interfaces for data structures in TypeScript code.”
As per path instructions: “Avoid ‘any’, use explicit types.”
🤖 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 594 - 597,
Define explicit FooterLink and FooterColumn types near the footer data in
DeploymentDetailClient, then convert each column’s positional links arrays into
{ label, href } objects. Update the footer rendering logic to read link.label
and link.href while preserving the existing translated labels and destinations.
Sources: Coding guidelines, Path instructions
| { title: tFooter("community"), links: [["Discord","https://discord.com/channels/995968619034984528/1503320626096635935"],["Twitter","#"]] }, | ||
| { title: tFooter("resources"), links: [[tFooter("technicalPaper"),"#"]] }, | ||
| { title: tFooter("community"), links: [["Discord","https://discord.gg/YzDKeEfWtS"],["Telegram","https://t.me/StabilityNexus"]] }, | ||
| { title: tFooter("resources"), links: [[tFooter("technicalPaper"),"#"], ["KYA / Terms", "#"]] }, |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Replace the placeholder KYA / Terms link.
href="#" only moves the user to the top of the current page. It does not provide the terms document. Use the real route or external URL, and add a footer translation key for the label.
As per path instructions: “User-visible strings should be externalized to resource files (i18n).”
🤖 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 at line 597, Replace the
placeholder KYA / Terms href in the footer links of DeploymentDetailClient with
the actual terms route or external URL, and replace the hardcoded label with a
new footer i18n key. Add the corresponding translation to the resource files and
use that key alongside the existing tFooter entries.
Source: Path instructions
| { id:"tusd-local", name:"TUSD on Local (Anvil)", chain:"Hardhat", chainShort:"LOCAL",chainColor:"#f3f3f3", chainTextColor:"text-[#1a1a1a]", chainId:31337, isPlaceholder:false, stablecoin:"TUSD", equityCoin:"TEQT", reserveRatio:325, totalReserve:"$14.82M", stableSupply:"1.2M", equitySupply:"45K", equityLeverage:"3.25×", equityYield:6.2, tvl:"$4.56M", status:"healthy", reserveAsset:"ETH", pegAsset:"USD" }, | ||
| { id:"tusd-sepolia",name:"TUSD on Sepolia", chain:"Sepolia", chainShort:"SEP", chainColor:"#cfb53b", chainTextColor:"text-white", chainId:11155111, isPlaceholder:false, stablecoin:"TUSD", equityCoin:"TEQT", reserveRatio:410, totalReserve:"$13.28M", stableSupply:"850K", equitySupply:"22K", equityLeverage:"4.1×", equityYield:5.8, tvl:"$3.24M", status:"healthy", reserveAsset:"ETH", pegAsset:"USD" }, | ||
| { id:"usdp-amoy", name:"USDP on Polygon Amoy", chain:"Polygon", chainShort:"AMOY", chainColor:"#8247e5", chainTextColor:"text-white", chainId:80002, isPlaceholder:true, stablecoin:"USDP", equityCoin:"PEQT", reserveRatio:155, totalReserve:"$3.19M", stableSupply:"2.1M", equitySupply:"18K", equityLeverage:"1.55×", equityYield:4.1, tvl:"$2.06M", status:"warning", reserveAsset:"MATIC",pegAsset:"USD" }, | ||
| { id:"usdp-amoy", name:"USDP on Polygon Amoy", chain:"Polygon", chainShort:"AMOY", chainColor:"#8247e5", chainTextColor:"text-white", chainId:80002, isPlaceholder:false, stablecoin:"USDP", equityCoin:"PEQT", reserveRatio:155, totalReserve:"$3.19M", stableSupply:"2.1M", equitySupply:"18K", equityLeverage:"1.55×", equityYield:4.1, tvl:"$2.06M", status:"warning", reserveAsset:"POL",pegAsset:"USD" }, |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n -C 8 \
'getContractAddress|useChainId|isMismatch|useReadContract|MintRedeemForm|usdp-amoy|80002' \
--glob '*.{ts,tsx}' .Repository: StabilityNexus/Tectonic-EVM-WebUI
Length of output: 26435
🏁 Script executed:
#!/bin/bash
set -euo pipefail
file='app/deployments/[id]/DeploymentDetailClient.tsx'
printf '%s\n' '--- contract reads and mismatch handling ---'
sed -n '388,505p' "$file"
printf '%s\n' '--- form submission and write path ---'
sed -n '60,205p' "$file"
printf '%s\n' '--- chain configuration references ---'
rg -n -C 5 'WagmiProvider|createConfig|chains:|80002|CONTRACT_ADDRESSES' --glob '*.{ts,tsx}' .Repository: StabilityNexus/Tectonic-EVM-WebUI
Length of output: 16531
🏁 Script executed:
#!/bin/bash
set -euo pipefail
python3 - <<'PY'
from pathlib import Path
import re
data = Path("lib/deployments-data.ts").read_text()
client = Path("app/deployments/[id]/DeploymentDetailClient.tsx").read_text()
amoy = re.search(r'id:"usdp-amoy".*?chainId:(\d+).*?isPlaceholder:(\w+)', data)
assert amoy, "usdp-amoy record not found"
deployment_chain = int(amoy.group(1))
is_placeholder = amoy.group(2) == "true"
read_blocks = re.findall(
r'useReadContract\(\{.*?query: \{ enabled: ([^}]+) \}',
client,
re.S,
)
assert len(read_blocks) == 5, f"expected five reads, found {len(read_blocks)}"
assert all(expr.strip() == "!d?.isPlaceholder" for expr in read_blocks)
mismatch_expr = re.search(r'const isMismatch = ([^;]+);', client)
assert mismatch_expr and mismatch_expr.group(1).strip() == "chainId !== d.chainId"
supported_chain = 11155111
assert supported_chain != deployment_chain
reads_enabled = not is_placeholder
mismatch = supported_chain != deployment_chain
print({
"deployment_chain": deployment_chain,
"supported_connected_chain": supported_chain,
"reads_enabled": reads_enabled,
"isMismatch": mismatch,
"five_reads_run_before_mismatch_check": True,
"transaction_button_disabled_on_mismatch": "isMismatch ?" in client,
})
PYRepository: StabilityNexus/Tectonic-EVM-WebUI
Length of output: 376
Gate Amoy contract reads by deployment chain.
For usdp-amoy, all five reads remain enabled when the wallet is on another supported chain, such as Sepolia. The page can display that chain’s prices and ratio for the Amoy deployment and passes its contract address to MintRedeemForm. Add chainId === d.chainId to each read’s enabled condition or target reads to d.chainId.
🤖 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 `@lib/deployments-data.ts` at line 33, Update the five contract-read
configurations for the usdp-amoy deployment to require chainId === d.chainId in
each enabled condition, ensuring reads and MintRedeemForm data are only active
on Amoy while preserving existing conditions.
🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n -C 8 \
'MintRedeemForm|reserveAsset|inputAsset|outputToken|\bMATIC\b|\bPOL\b' \
--glob '*.{ts,tsx}' .Repository: StabilityNexus/Tectonic-EVM-WebUI
Length of output: 26959
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '%s\n' '--- DeploymentDetailClient structure ---'
ast-grep outline 'app/deployments/[id]/DeploymentDetailClient.tsx'
printf '%s\n' '--- Transaction and asset handling ---'
sed -n '1,230p' 'app/deployments/[id]/DeploymentDetailClient.tsx'
printf '%s\n' '--- Contract address and ABI definitions ---'
rg -n -C 6 'CONTRACT_ADDRESSES|tectonicAbi|balanceOf|allowance|approve|mint|redeem|parseUnits|writeContract|readContract' \
--glob '*.{ts,tsx}' lib app components hooks
printf '%s\n' '--- All POL and MATIC references ---'
rg -n -C 4 '\bPOL\b|\bMATIC\b' --glob '*.{ts,tsx,json}' .Repository: StabilityNexus/Tectonic-EVM-WebUI
Length of output: 43883
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '%s\n' '--- Deployment and network gating ---'
sed -n '389,475p' 'app/deployments/[id]/DeploymentDetailClient.tsx'
printf '%s\n' '--- Exact asset and transaction references ---'
python3 - <<'PY'
from pathlib import Path
paths = [
Path("app/deployments/[id]/DeploymentDetailClient.tsx"),
Path("lib/abi/Tectonic.ts"),
]
terms = ("reserveAsset", "inputAsset", "outputToken", "MATIC", "POL",
"balanceOf", "allowance", "approve", "functionName", "value", "args")
for path in paths:
print(f"FILE {path}")
for number, line in enumerate(path.read_text().splitlines(), 1):
if any(term in line for term in terms):
print(f"{number}: {line.strip()}")
PY
printf '%s\n' '--- Static transaction-path invariant ---'
python3 - <<'PY'
from pathlib import Path
detail = Path("app/deployments/[id]/DeploymentDetailClient.tsx").read_text()
abi = Path("lib/abi/Tectonic.ts").read_text()
assert 'reserveAsset' in detail
assert 'inputAsset={tab === "mint" ? d.reserveAsset' in detail
assert 'outputToken={tab === "mint" ? d.stablecoin : d.reserveAsset}' in detail
assert 'balanceOf' not in detail and 'allowance' not in detail and 'approve' not in detail
assert '"MATIC"' not in detail and '"POL"' not in detail
assert 'value: weiAmount' in detail
assert 'args: [weiAmount]' in detail
assert 'name: "mint"' in abi and 'name: "mintEquityCoins"' in abi
assert 'name: "redeem"' in abi and 'name: "redeemEquityCoins"' in abi
print("reserveAsset is used for form labels/outputs only.")
print("No asset lookup, balance, allowance, approval, or MATIC/POL branch exists.")
print("Mint writes use native value; redeem writes pass only the amount.")
PYRepository: StabilityNexus/Tectonic-EVM-WebUI
Length of output: 5062
Gate contract reads on the deployment network. The reads use the connected chain’s contract address while enabled checks only isPlaceholder. A wallet connected to Sepolia can therefore display Sepolia data for the active Amoy deployment. Disable reads when chainId !== d.chainId or resolve the deployment’s own address. POL is used only for labels; no asset lookup or allowance logic is required.
🤖 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 `@lib/deployments-data.ts` at line 33, Update the deployment contract-read
enablement logic to require both !d.isPlaceholder and a connected chainId equal
to d.chainId, preventing reads for deployments on other networks. Keep POL as a
display-only reserveAsset label and do not add asset lookup or allowance
handling.
| <div className="max-w-sm flex flex-col items-start"> | ||
| <div className="flex flex-col items-center text-center"> | ||
| <div className="logo-hover-wrap mb-4 flex flex-col items-center gap-3 text-slate-900"> | ||
| <Image src={`${process.env.NEXT_PUBLIC_BASE_PATH ?? ""}/Logo.svg`} alt="Tectonic logo" width={72} height={72} className="logo-hover-zoom h-16 w-auto object-contain" /> | ||
| <span className="text-2xl font-black tracking-[0.04em] bg-gradient-to-b from-[#c38b44] to-[#7e4420] bg-clip-text text-transparent drop-shadow-[0_2px_4px_rgba(0,0,0,0.4)] leading-none"> | ||
| TECTONIC | ||
| </span> | ||
| </div> | ||
| <p className="max-w-xs text-sm leading-6 text-slate-600"> | ||
| Next-generation stablecoin protocol. | ||
| </p> | ||
| </div> |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | 🏗️ Heavy lift
Move the reusable footer into components/Footer.tsx.
PageShell owns reusable footer UI, while equivalent markup exists in app/page.tsx and app/deployments/page.tsx. Use one footer component to prevent branding, link, and translation drift.
As per path instructions, reusable UI components should be placed in the components/ directory.
🤖 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 `@lib/deployments-ui.tsx` around lines 186 - 197, Extract the reusable footer
markup currently owned by PageShell into components/Footer.tsx, including its
branding, links, and translation behavior. Replace the equivalent footer markup
in PageShell, app/page.tsx, and app/deployments/page.tsx with the shared Footer
component while preserving the existing styling and content.
Source: Path instructions
| <li><a href="https://discord.gg/YzDKeEfWtS" target="_blank" rel="noopener noreferrer" className="transition hover:text-amber-700 hover:underline hover:underline-offset-4">Discord</a></li> | ||
| <li><a href="https://t.me/StabilityNexus" target="_blank" rel="noopener noreferrer" className="transition hover:text-amber-700 hover:underline hover:underline-offset-4">Telegram</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"> | ||
| {["Technical Paper"].map((l) => ( | ||
| {["Technical Paper", "KYA / Terms"].map((l) => ( |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Use localized resources for the refreshed footer and community copy.
The changed labels and copyright text are hardcoded across multiple views, so locale changes will remain inconsistent.
lib/deployments-ui.tsx#L229-L238: externalize the community and resource labels.lib/deployments-ui.tsx#L253-L255: externalize the copyright text and interpolate the year.app/deployments/page.tsx#L298-L308: externalize the community and resource labels.app/deployments/page.tsx#L315-L316: externalize the copyright text and interpolate the year.app/page.tsx#L559-L570: externalize the community CTA labels.app/page.tsx#L617-L626: externalize the footer community and terms labels.
As per path instructions, user-visible strings should be externalized to resource files.
📍 Affects 3 files
lib/deployments-ui.tsx#L229-L238(this comment)lib/deployments-ui.tsx#L253-L255app/deployments/page.tsx#L298-L308app/deployments/page.tsx#L315-L316app/page.tsx#L559-L570app/page.tsx#L617-L626
🤖 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 `@lib/deployments-ui.tsx` around lines 229 - 238, Externalize all user-visible
footer and community labels through the existing localization resources. Update
the community/resource sections in lib/deployments-ui.tsx lines 229-238 and
app/deployments/page.tsx lines 298-308, copyright text in lib/deployments-ui.tsx
lines 253-255 and app/deployments/page.tsx lines 315-316 with localized year
interpolation, and community/footer labels in app/page.tsx lines 559-570 and
617-626; use localized resource keys consistently across all views.
Source: Path instructions
Summary of Changes:
1. components/Navbar.tsx: Improved the UI styling for the top navigation bar, specifically adding the premium gradient effect to the Tectonic brand text and improving the "Available Balance" display elements.
2. app/deployments/[id]/DeploymentDetailClient.tsx: Updated fallback contract addresses and fully overhauled the Footer component. Replaced generic links with our official community links and embedded the new gradient Tectonic text logo.
3. lib/deployments-ui.tsx: Refactored the PageShell global footer to match the new design system. Replaced the "Twitter" link with our official Telegram link, fixed the Discord URL, and added the hyperlinked Stability Nexus animated badge to the bottom right.
4. app/page.tsx: Upgraded the "Join the Community" section by replacing plain text links with visually styled primary/secondary buttons (including proper SVG icons) for Discord, Telegram, and GitHub.
5. lib/deployments-data.ts: The Amoy network is now fully unlocked on the WebUI and updated to use the new POL ticker.
6. app/deployments/page.tsx: Minor styling and layout alignment improvements to match the new UI constraints.
7. public/logo-animated.gif: Uploaded the new animated Stability Nexus badge asset for use in the global footer.
Addressed Issues:
Fixes #(TODO:issue number)
Screenshots/Recordings:
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
Style