feat: sexier landing pages #184
Conversation
WalkthroughThe pull request introduces enhanced user experience for the Bank and Factory pages by implementing conditional rendering when no assets or activities are found. Two new components, Changes
Assessment against linked issues
Possibly related PRs
Poem
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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #184 +/- ##
==========================================
- Coverage 55.04% 54.40% -0.64%
==========================================
Files 153 153
Lines 15515 15787 +272
==========================================
+ Hits 8540 8589 +49
- Misses 6975 7198 +223 ☔ View full report in Codecov by Sentry. |
![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
🧹 Nitpick comments (3)
pages/bank.tsx (1)
237-255: Consider adding a call-to-action button.For consistency with the factory page's empty state, consider adding a CTA button that guides users on how to acquire assets.
function NoAssetsFound() { return ( <section className="transition-opacity duration-300 h-auto mt-12 ease-in-out animate-fadeIn w-full flex items-center justify-center"> <div className="grid max-w-4xl bg-base-300 p-12 rounded-md w-full mx-auto gap-8 lg:grid-cols-12"> <div className="mr-auto place-self-center lg:col-span-7"> <h1 className="max-w-2xl mb-4 text-2xl font-extrabold tracking-tight leading-none md:text-3xl xl:text-4xl dark:text-white text-black"> No Assets Found </h1> <p className="max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl"> You do not have any assets yet. </p> + <Link href="/factory" passHref> + <button className="btn btn-gradient">Create New Token</button> + </Link> </div> <div className="hidden lg:mt-0 lg:ml-24 lg:col-span-5 lg:flex"> <BankIcon className="h-60 w-60 text-primary" /> </div> </div> </section> ); }pages/factory/index.tsx (2)
121-164: Consider enhancing the search experience.When search results are empty (but combinedData is not), consider showing a "No matching tokens" message instead of an empty list.
<DenomList denoms={combinedData} isLoading={isLoading} refetchDenoms={refetchData} pageSize={denomListPageSize} address={address ?? ''} admin={address ?? ''} searchTerm={searchTerm} + emptySearchMessage="No matching tokens found" />
175-175: Maintain consistent height across empty states.The height of empty states differs between pages (h-[80vh] vs h-auto). Consider using a consistent height for a uniform experience.
Choose one approach and apply it consistently:
# In pages/bank.tsx - <section className="transition-opacity duration-300 h-auto mt-12 ease-in-out animate-fadeIn w-full flex items-center justify-center"> + <section className="transition-opacity duration-300 h-[80vh] ease-in-out animate-fadeIn w-full flex items-center justify-center"> # Or in pages/factory/index.tsx - <section className="transition-opacity duration-300 h-[80vh] ease-in-out animate-fadeIn w-full flex items-center justify-center"> + <section className="transition-opacity duration-300 h-auto mt-12 ease-in-out animate-fadeIn w-full flex items-center justify-center">Also applies to: 239-239
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
pages/bank.tsx(4 hunks)pages/factory/index.tsx(2 hunks)
🔇 Additional comments (3)
pages/bank.tsx (3)
153-164: LGTM! Well-implemented conditional search input.The search input is properly hidden when there are no assets, preventing user confusion, and includes accessibility features.
195-208: LGTM! Clean conditional rendering of assets.The implementation elegantly handles both empty and populated states, with proper prop passing to the TokenList component.
257-276: LGTM! Clear and helpful empty state message.The component provides excellent user guidance by explaining how to generate activity.
| <Link href="/groups/create" passHref> | ||
| <button className="btn btn-gradient">Create New Token</button> | ||
| </Link> |
There was a problem hiding this comment.
Fix incorrect navigation link.
The "Create New Token" button links to "/groups/create" instead of the token creation page.
- <Link href="/groups/create" passHref>
+ <Link href="/factory/create" passHref>
<button className="btn btn-gradient">Create New Token</button>
</Link>📝 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.
| <Link href="/groups/create" passHref> | |
| <button className="btn btn-gradient">Create New Token</button> | |
| </Link> | |
| <Link href="/factory/create" passHref> | |
| <button className="btn btn-gradient">Create New Token</button> | |
| </Link> |
fixes #178
Summary by CodeRabbit
New Features
User Experience Improvements