feat: UI improvements — deployment cards, HOW IT WORKS content, and layout fixes#5
Merged
Merged
Conversation
…ayout fixes
Changes in this PR:
1. Standardise HOW IT WORKS step content (app/page.tsx + lib/i18n/locales/en.json)
- Step 3: 'Mint EquityCoin' → 'Use or Redeem' with updated description
focused on user action (payments or redemption) rather than internal minting
- Step 4: 'Trigger Redemptions' → 'Automatic Safety Protection' with updated
description explaining reserve ratio protection and peg maintenance
- Updated howItWorksDesc to reflect the cleaner, user-facing flow
2. Fix HOW IT WORKS card alignment (app/page.tsx)
- Added md:items-stretch to the grid so all 4 cards match the tallest card height
- Added flex flex-col to each card for proper vertical stretching
- Added flex-1 to description paragraphs so they fill remaining space evenly
- Added flex-shrink-0 to number circles and arrows to prevent squishing
- Unified title font size to text-base across all 4 cards (was inconsistent text-lg)
3. Remove EquityCoins and Trigger Redemptions nav buttons (app/deployments/page.tsx)
- Removed the two bottom navigation buttons from the Deployments page
- Removed the divider above them
- Page now ends cleanly after the deployment cards grid
4. Redesign deployment detail page layout (app/deployments/[id]/DeploymentDetailClient.tsx)
- Replaced single 4-tab action panel with two dedicated cards:
StableCoin card (Supply, Crash Tolerance, Reserve Ratio + Mint/Redeem)
EquityCoin card (Supply, Annual Yield, Leverage + Mint/Redeem)
- Added Deployment Health section (Total Reserve, ratio slider, Trigger Redemptions status)
- Trigger Redemption button appears inside the detail page only when status is danger
- Removed redundant ReserveWidget, Quick Reference, and Reserve Asset/Network rows
- Added Crash Tolerance metric calculated from reserve ratio
🚥 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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 339-342: The "Trigger Redemption →" button in
DeploymentDetailClient.tsx lacks both a click handler and localization. Add an
onClick handler to the button element that navigates to the trigger-redemption
path or invokes the appropriate mutation handler to enable the intended flow.
Additionally, extract the hardcoded "Trigger Redemption →" text string to your
i18n resource file and replace it with the corresponding i18n translation hook
call to comply with localization standards.
In `@app/deployments/page.tsx`:
- Around line 111-119: Extract the hardcoded user-facing strings from the two
conditional blocks checking d.status (the "⚡ Approaching 150% threshold" text in
the warning block and the "⚠ Reserve below 150% — redemptions active" text in
the danger block) and move them to your i18n locale resource files. Then update
the respective paragraph elements in both the d.status === "warning" and
d.status === "danger" blocks to use your translation function (such as
useTranslation hook) to render these externalized strings instead of hardcoding
them in the JSX.
🪄 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: 6b65829c-4600-49db-995a-dcc85d0db1f5
📒 Files selected for processing (4)
app/deployments/[id]/DeploymentDetailClient.tsxapp/deployments/page.tsxapp/page.tsxlib/i18n/locales/en.json
ankitkr104
added
enhancement
- Replace hardcoded 'Trigger Redemption →' button with Link to /force-redemption
and use tDetail('triggerRedemptionCta') for i18n compliance
- Add useTranslations to deployments/page.tsx ContractCard and replace
hardcoded warning/danger status strings with tDeploy('warningStatus')
and tDeploy('dangerStatus')
- Add triggerRedemptionCta, warningStatus, dangerStatus keys to en.json
sach2004
reviewed
Jun 19, 2026
sach2004
left a comment
sach2004
left a comment
There was a problem hiding this comment.
i reviewed this PR for any major bugs, and i didnt find any and there are no blockers
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
3 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.
Changes in this PR:
Standardise HOW IT WORKS step content (app/page.tsx + lib/i18n/locales/en.json)
Fix HOW IT WORKS card alignment (app/page.tsx)
Remove EquityCoins and Trigger Redemptions nav buttons (app/deployments/page.tsx)
Redesign deployment detail page layout (app/deployments/[id]/DeploymentDetailClient.tsx)
Addressed Issues:
Fixes #(TODO:issue number)
Screenshots/Recordings:
TODO: If applicable, add screenshots or recordings that demonstrate the interface before and after the changes.
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
UX & UI Updates