[landing]: bridge UI Improvement #2484
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe changes in this pull request involve significant updates to four components: Changes
Possibly related PRs
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
|
You are out of MentatBot reviews. Your usage will refresh December 16 at 08:00 AM. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
landing/src/components/modules/bridge-out-step-2.tsx (1)
139-172: Extract SVG icon into a reusable componentWhile the UI layout is well-organized, the inline SVG checkmark icon should be extracted into a reusable component for better maintainability and consistency.
Consider creating a CheckIcon component:
// components/ui/icons/CheckIcon.tsx export const CheckIcon = () => ( <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" > <path d="M20 6L9 17l-5-5" /> </svg> );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
landing/src/components/modules/bridge-in.tsx(4 hunks)landing/src/components/modules/bridge-out-step-1.tsx(1 hunks)landing/src/components/modules/bridge-out-step-2.tsx(2 hunks)
🔇 Additional comments (6)
landing/src/components/modules/bridge-in.tsx (3)
41-44: LGTM: Default resource initialization
The implementation correctly sets Lords as the default resource with a safe initial amount of 0, improving user experience by pre-selecting the most commonly used resource.
156-159: LGTM: Consistent state reset
The state reset after a successful bridge operation maintains consistency by reverting to the default Lords selection, providing a smooth user experience for subsequent operations.
230-234: LGTM: Clear wallet connection messaging
The conditional rendering provides clear feedback about wallet connection status, improving user guidance and maintaining consistency across the application.
landing/src/components/modules/bridge-out-step-1.tsx (2)
156-172: LGTM: Consistent UI structure
The UI layout maintains consistency with the bridge-in component, providing clear steps and instructions for the withdrawal process.
177-177: LGTM: Consistent wallet connection handling
The wallet connection prompt maintains consistency with other components in the application.
landing/src/components/modules/bridge-out-step-2.tsx (1)
343-343: LGTM: Simplified button text
The button text has been simplified while maintaining clarity, providing a better user experience.
| <div className="space-y-4"> | ||
| <h2 className="text-2xl font-bold mb-4 text-gold border-b border-gold/20 pb-2"> | ||
| Bridge Resources Into Your Realm | ||
| </h2> | ||
|
|
||
| <div className="flex flex-col gap-4 bg-gold/5 p-4 rounded-lg border border-gold/10"> | ||
| <div className="flex items-start space-x-3"> | ||
| <div className="flex-shrink-0"> | ||
| <span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-gold/20 text-gold font-semibold text-sm"> | ||
| 1 | ||
| </span> | ||
| </div> | ||
| <div className="space-y-1"> | ||
| <h3 className="font-semibold text-gold/90">Bridge Assets into the Game</h3> | ||
| <p className="text-sm opacity-80"> | ||
| Bridge your ERC20 assets, resources and lords from your Starknet wallet into the Eternum game. | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex items-start space-x-3"> | ||
| <div className="flex-shrink-0"> | ||
| <span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-gold/20 text-gold font-semibold text-sm"> | ||
| 2 | ||
| </span> | ||
| </div> | ||
| <div className="space-y-1"> | ||
| <h3 className="font-semibold text-gold/90">Complete Claim</h3> | ||
| <p className="text-sm opacity-80"> | ||
| Complete the claim on your Realm in the{" "} | ||
| <a | ||
| href="https://eternum.realms.world/" | ||
| target="_blank" | ||
| className="text-gold underline hover:text-gold/80 transition-colors" | ||
| > | ||
| <span className="font-bold">game</span> | ||
| </a>{" "} | ||
| by checking the <span className="font-bold">Resource Arrivals (Donkeys)</span> tab in the game. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add security attribute to external link
The new UI layout provides clear instructions with well-organized steps. However, the external link to the game should include the rel="noopener noreferrer" security attribute when using target="_blank".
<a
href="https://eternum.realms.world/"
target="_blank"
+ rel="noopener noreferrer"
className="text-gold underline hover:text-gold/80 transition-colors"
>📝 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.
| <div className="space-y-4"> | |
| <h2 className="text-2xl font-bold mb-4 text-gold border-b border-gold/20 pb-2"> | |
| Bridge Resources Into Your Realm | |
| </h2> | |
| <div className="flex flex-col gap-4 bg-gold/5 p-4 rounded-lg border border-gold/10"> | |
| <div className="flex items-start space-x-3"> | |
| <div className="flex-shrink-0"> | |
| <span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-gold/20 text-gold font-semibold text-sm"> | |
| 1 | |
| </span> | |
| </div> | |
| <div className="space-y-1"> | |
| <h3 className="font-semibold text-gold/90">Bridge Assets into the Game</h3> | |
| <p className="text-sm opacity-80"> | |
| Bridge your ERC20 assets, resources and lords from your Starknet wallet into the Eternum game. | |
| </p> | |
| </div> | |
| </div> | |
| <div className="flex items-start space-x-3"> | |
| <div className="flex-shrink-0"> | |
| <span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-gold/20 text-gold font-semibold text-sm"> | |
| 2 | |
| </span> | |
| </div> | |
| <div className="space-y-1"> | |
| <h3 className="font-semibold text-gold/90">Complete Claim</h3> | |
| <p className="text-sm opacity-80"> | |
| Complete the claim on your Realm in the{" "} | |
| <a | |
| href="https://eternum.realms.world/" | |
| target="_blank" | |
| className="text-gold underline hover:text-gold/80 transition-colors" | |
| > | |
| <span className="font-bold">game</span> | |
| </a>{" "} | |
| by checking the <span className="font-bold">Resource Arrivals (Donkeys)</span> tab in the game. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="space-y-4"> | |
| <h2 className="text-2xl font-bold mb-4 text-gold border-b border-gold/20 pb-2"> | |
| Bridge Resources Into Your Realm | |
| </h2> | |
| <div className="flex flex-col gap-4 bg-gold/5 p-4 rounded-lg border border-gold/10"> | |
| <div className="flex items-start space-x-3"> | |
| <div className="flex-shrink-0"> | |
| <span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-gold/20 text-gold font-semibold text-sm"> | |
| 1 | |
| </span> | |
| </div> | |
| <div className="space-y-1"> | |
| <h3 className="font-semibold text-gold/90">Bridge Assets into the Game</h3> | |
| <p className="text-sm opacity-80"> | |
| Bridge your ERC20 assets, resources and lords from your Starknet wallet into the Eternum game. | |
| </p> | |
| </div> | |
| </div> | |
| <div className="flex items-start space-x-3"> | |
| <div className="flex-shrink-0"> | |
| <span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-gold/20 text-gold font-semibold text-sm"> | |
| 2 | |
| </span> | |
| </div> | |
| <div className="space-y-1"> | |
| <h3 className="font-semibold text-gold/90">Complete Claim</h3> | |
| <p className="text-sm opacity-80"> | |
| Complete the claim on your Realm in the{" "} | |
| <a | |
| href="https://eternum.realms.world/" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="text-gold underline hover:text-gold/80 transition-colors" | |
| > | |
| <span className="font-bold">game</span> | |
| </a>{" "} | |
| by checking the <span className="font-bold">Resource Arrivals (Donkeys)</span> tab in the game. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
|
Failed to generate code suggestions for PR |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (3)
landing/src/components/modules/season-passes-grid.tsx (1)
26-58: Enhance accessibility and maintainability of the empty state UIThe empty state UI implementation looks great with its decorative elements and clear user guidance. Consider these improvements:
- Move the marketplace URL to a constants file for better maintainability
- Add aria-label to the button for better screen reader support
- <a href={`https://market.realms.world/collection/0x057675b9c0bd62b096a2e15502a37b290fa766ead21c33eda42993e48a714b80`} target="_blank"> + <a href={`https://market.realms.world/collection/0x057675b9c0bd62b096a2e15502a37b290fa766ead21c33eda42993e48a714b80`} + target="_blank" + rel="noopener noreferrer"> <Button variant="outline" - className="mt-6 group hover:border-primary/50 transition-all duration-300"> + className="mt-6 group hover:border-primary/50 transition-all duration-300" + aria-label="Navigate to marketplace to purchase your first season pass"> <Crown className="w-4 h-4 mr-2 group-hover:text-primary transition-colors" /> Buy Your First Pass </Button>landing/src/components/modules/realms-grid.tsx (2)
34-67: Add aria-label and security attributes to marketplace linkSimilar to the season passes grid, enhance accessibility and security of the marketplace link.
- <a href={`https://market.realms.world/collection/0x07ae27a31bb6526e3de9cf02f081f6ce0615ac12a6d7b85ee58b8ad7947a2809`} target="_blank"> + <a href={`https://market.realms.world/collection/0x07ae27a31bb6526e3de9cf02f081f6ce0615ac12a6d7b85ee58b8ad7947a2809`} + target="_blank" + rel="noopener noreferrer"> <Button variant="outline" - className="mt-6 group hover:border-primary/50 transition-all duration-300"> + className="mt-6 group hover:border-primary/50 transition-all duration-300" + aria-label="Navigate to marketplace to purchase your first realm"> <Castle className="w-4 h-4 mr-2 group-hover:text-primary transition-colors" /> Buy Your First Realm </Button>
34-67: Consider moving marketplace URLs to environment variables or constantsThe marketplace URLs should be configurable to support different environments (development, staging, production).
Create a constants file:
// constants/marketplace.ts export const MARKETPLACE_URLS = { SEASON_PASS: 'https://market.realms.world/collection/0x057675b9c0bd62b096a2e15502a37b290fa766ead21c33eda42993e48a714b80', REALM: 'https://market.realms.world/collection/0x07ae27a31bb6526e3de9cf02f081f6ce0615ac12a6d7b85ee58b8ad7947a2809' } as const;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
landing/src/components/modules/realms-grid.tsx(2 hunks)landing/src/components/modules/season-passes-grid.tsx(2 hunks)
🔇 Additional comments (2)
landing/src/components/modules/season-passes-grid.tsx (1)
3-3: LGTM: Icon import added for empty state enhancement
The Crown icon import aligns with the UI improvements for the empty state visualization.
landing/src/components/modules/realms-grid.tsx (1)
3-3: LGTM: Icon import added for empty state enhancement
The Castle icon import aligns with the UI improvements for the empty state visualization.
| if (!realms?.length) { | ||
| return ( | ||
| <div className="relative flex flex-col items-center justify-center p-16 text-center space-y-6 min-h-[500px] rounded-xl border-2 border-dashed border-gray-200 bg-gradient-to-b from-gray-50/50 to-gray-100/50"> | ||
| {/* Decorative elements */} | ||
| <div className="absolute inset-0 overflow-hidden"> | ||
| <div className="absolute -top-4 -left-4 w-24 h-24 bg-primary/5 rounded-full blur-xl" /> | ||
| <div className="absolute -bottom-4 -right-4 w-24 h-24 bg-primary/5 rounded-full blur-xl" /> | ||
| </div> | ||
| <Castle className="w-20 h-20 text-primary/60 animate-pulse" /> | ||
|
|
||
| <div className="relative"> | ||
| <h3 className="text-2xl font-bold text-gray-900 tracking-tight mt-6"> | ||
| No Realms Yet | ||
| </h3> | ||
|
|
||
| <p className="text-gray-600 max-w-md leading-relaxed"> | ||
| Your collection of realms will appear here once you acquire them. | ||
|
|
||
| Get your first realm to start your journey into Realms World! | ||
| </p> | ||
|
|
||
| <a href={`https://market.realms.world/collection/0x07ae27a31bb6526e3de9cf02f081f6ce0615ac12a6d7b85ee58b8ad7947a2809`} target="_blank"> | ||
| <Button | ||
| variant="outline" | ||
| className="mt-6 group hover:border-primary/50 transition-all duration-300" | ||
| > | ||
| <Castle className="w-4 h-4 mr-2 group-hover:text-primary transition-colors" /> | ||
| Buy Your First Realm | ||
| </Button> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider extracting empty state UI into a reusable component
The empty state UI implementation is well-designed but duplicates the pattern from season-passes-grid.tsx. Consider extracting this into a reusable component to improve maintainability and consistency.
// components/ui/empty-state.tsx
interface EmptyStateProps {
icon: React.ReactNode;
title: string;
description: string;
ctaText: string;
ctaHref: string;
ctaIcon: React.ReactNode;
}
export const EmptyState = ({
icon,
title,
description,
ctaText,
ctaHref,
ctaIcon
}: EmptyStateProps) => (
<div className="relative flex flex-col items-center justify-center p-16 text-center space-y-6 min-h-[500px] rounded-xl border-2 border-dashed border-gray-200 bg-gradient-to-b from-gray-50/50 to-gray-100/50">
{/* Decorative elements */}
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -top-4 -left-4 w-24 h-24 bg-primary/5 rounded-full blur-xl" />
<div className="absolute -bottom-4 -right-4 w-24 h-24 bg-primary/5 rounded-full blur-xl" />
</div>
<div className="w-20 h-20 text-primary/60 animate-pulse">
{icon}
</div>
<div className="relative">
<h3 className="text-2xl font-bold text-gray-900 tracking-tight mt-6">
{title}
</h3>
<p className="text-gray-600 max-w-md leading-relaxed">
{description}
</p>
<a href={ctaHref} target="_blank" rel="noopener noreferrer">
<Button
variant="outline"
className="mt-6 group hover:border-primary/50 transition-all duration-300"
aria-label={`Navigate to marketplace to purchase your first ${title.toLowerCase()}`}
>
<span className="w-4 h-4 mr-2 group-hover:text-primary transition-colors">
{ctaIcon}
</span>
{ctaText}
</Button>
</a>
</div>
</div>
);Usage example:
if (!realms?.length) {
return (
<EmptyState
icon={<Castle />}
title="No Realms Yet"
description="Your collection of realms will appear here once you acquire them. Get your first realm to start your journey into Realms World!"
ctaText="Buy Your First Realm"
ctaHref="https://market.realms.world/collection/0x07ae27a31bb6526e3de9cf02f081f6ce0615ac12a6d7b85ee58b8ad7947a2809"
ctaIcon={<Castle />}
/>
);
}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
landing/src/components/modules/season-passes-grid.tsx (1)
54-58: Consider improvements for maintainabilityA few suggestions to enhance maintainability:
- Consider extracting the hardcoded marketplace URL to a configuration file
- The instructional text could be moved to a localization file for easier updates and potential internationalization
Example refactor:
+ // In config/constants.ts + export const MARKETPLACE_URLS = { + SEASON_PASS: 'https://market.realms.world/collection/0x057675b9c0bd62b096a2e15502a37b290fa766ead21c33eda42993e48a714b80' + }; + // In locales/en.ts + export const SEASON_PASS_MESSAGES = { + empty_state: { + description: 'Your collection of season passes will appear here...', + sub_description: 'Once you burn a pass, it will be removed from this view.', + cta: 'Get your pass to join the game and start your journey into Eternum!' + } + }; - <p className="text-gray-600 max-w-lg mx-auto leading-relaxed"> - Your collection of season passes will appear here until you burn them to mint a realm in the game. - </p> + <p className="text-gray-600 max-w-lg mx-auto leading-relaxed"> + {SEASON_PASS_MESSAGES.empty_state.description} + </p> - href="https://market.realms.world/collection/0x057675b9c0bd62b096a2e15502a37b290fa766ead21c33eda42993e48a714b80" + href={MARKETPLACE_URLS.SEASON_PASS}Also applies to: 42-51
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
landing/src/components/modules/realms-grid.tsx(2 hunks)landing/src/components/modules/season-passes-grid.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- landing/src/components/modules/realms-grid.tsx
🔇 Additional comments (2)
landing/src/components/modules/season-passes-grid.tsx (2)
3-3: LGTM: Clean import addition
The Crown icon import is properly grouped with other lucide-react imports.
28-68: Well-crafted empty state implementation!
The empty state UI is thoughtfully designed with:
- Clear visual hierarchy guiding users
- Engaging animations and visual effects
- Proper accessibility considerations
- Secure external link handling
Summary by CodeRabbit
New Features
Bug Fixes
Documentation