Modal UI improved. Error message added for wrongs chains. #64
Conversation
WalkthroughThe changes unify multiple modal dialogs into a single, dynamically controlled modal in Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant InteractionClient
participant WagmiHooks
participant Modal
User->>InteractionClient: Clicks a "Reduce" button
InteractionClient->>WagmiHooks: Check connection & chainId
WagmiHooks-->>InteractionClient: Return isConnected, chainId
alt On correct chain
InteractionClient->>Modal: Open with type (maxSupply/threshold/expansionRate)
User->>Modal: Interacts (input, update, close)
Modal->>InteractionClient: Update values or close modal
else On wrong chain
InteractionClient->>User: Show warning banner, disable controls
end
sequenceDiagram
participant User
participant HomePage
participant Modal
User->>HomePage: Clicks "Use Existing CAT"
HomePage->>Modal: Open animated modal
User->>Modal: Interacts (select, input, close)
Modal->>HomePage: Update state or close modal
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
web/src/app/[cat]/InteractionClient.tsx(11 hunks)web/src/app/page.tsx(3 hunks)web/src/components/ui/select.tsx(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
web/src/components/ui/select.tsx (1)
web/src/lib/utils.ts (1)
cn(4-6)
🔇 Additional comments (3)
web/src/app/page.tsx (1)
59-68: Well implemented scroll locking mechanismThe body scroll locking is properly implemented with cleanup on unmount. This prevents background scrolling when the modal is open, improving user experience.
web/src/app/[cat]/InteractionClient.tsx (2)
543-679: Excellent modal consolidationThe refactoring of three separate modals into a single dynamic modal is well implemented. It reduces code duplication, improves maintainability, and provides consistent behavior across all modals.
694-733: Excellent chain mismatch warning implementationThe warning banner provides clear, actionable feedback to users when they're on the wrong network. The visual design with gradients, icons, and proper spacing makes it immediately noticeable.
| </div> | ||
| <div className="space-y-1"> | ||
| <p className="text-sm text-red-600 dark:text-red-300"> | ||
| This token is deployed on <span className="font-semibold">{CHAIN_NAMES[chainId!]}</span> (Chain ID: {chainId}) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add fallback for unknown chain names
The code assumes all chain IDs will be in the CHAIN_NAMES mapping. Add a fallback to handle unmapped chains gracefully.
-This token is deployed on <span className="font-semibold">{CHAIN_NAMES[chainId!]}</span> (Chain ID: {chainId})
+This token is deployed on <span className="font-semibold">{CHAIN_NAMES[chainId!] || `Chain ${chainId}`}</span> (Chain ID: {chainId})📝 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.
| This token is deployed on <span className="font-semibold">{CHAIN_NAMES[chainId!]}</span> (Chain ID: {chainId}) | |
| This token is deployed on <span className="font-semibold">{CHAIN_NAMES[chainId!] || `Chain ${chainId}`}</span> (Chain ID: {chainId}) |
🤖 Prompt for AI Agents
In web/src/app/[cat]/InteractionClient.tsx at line 719, the code directly
accesses CHAIN_NAMES[chainId!] without handling cases where chainId is not in
the mapping. Update the code to provide a fallback string like "Unknown Chain"
when CHAIN_NAMES[chainId!] is undefined, ensuring the UI handles unmapped chain
IDs gracefully.
Summary by CodeRabbit
New Features
Improvements
Bug Fixes