feat: Create select page into modal #11510

Jarsen136 · 2025-04-03T21:53:21Z

Thank you for your contribution to the Koda - Generative Art Marketplace.

👇 __ Let's make a quick check before the contribution.

PR Type

Feature

Needs Design check

@exezbcz please review

Needs QA check

@kodadot/qa-guild please review

Context

Closes Create select page into modal #11506

Screenshot 📸

My fix has changed something on UI; a screenshot is best to understand changes for others.

Summary by CodeRabbit

New Features
- Replaced the legacy NFT creation landing page with a streamlined, modal-based interface for selecting creation options.
- Updated the creation dropdown to open a modal dialog, enhancing navigation and interaction.
- Revised on-screen instructions and adjusted the supported blockchain networks for asset creation.
- Introduced a new modal for creating various digital assets, improving user interaction.
Style
- Introduced a new light blue color theme for card elements to enhance the visual appearance.
Bug Fixes
- Adjusted navigation paths for NFT creation to ensure proper routing.
Chores
- Removed deprecated functions and constants to streamline codebase and improve maintainability.

coderabbitai · 2025-04-03T21:53:30Z

Walkthrough

This pull request overhauls the NFT creation workflow and adjusts related styling and configuration. The previous landing page components have been removed in favor of a modal-driven interaction. Navigation and user authentication flows now leverage modal dialogs that present creation options. Localization files were updated to support the modal content, and new styling variables were introduced for consistent theming. Additionally, testing and utility functions were updated to align with the new control flow and chain management features.

Changes

File(s)	Change Summary
`components/create/CreateLanding.vue` `pages/[prefix]/create/index.vue`	Deleted landing page components and associated SEO metadata used for NFT creation.
`components/navbar/CreateDropdown.vue`	Modified navigation: replaced `<nuxt-link>` with `<div>`, added and wired up `handleButtonClick` and `isModalActive` to trigger a modal instead of direct navigation.
`components/create/EntryModal.vue`	Added a new modal component displaying creation options for NFTs and collections, with click handlers to launch login and redirection flows.
`i18n/locales/en.json`	Removed "landing" text keys and introduced a new "modal" section with revised copy guiding NFT and collection creation.
`libs/ui/src/scss/tailwind.scss` `libs/ui/tailwind.config.js`	Introduced a new CSS variable (`--blue-light-cards`) and corresponding Tailwind color (`blue-light-cards`) for light blue card theming.
`tests/e2e/createnft.spec.ts`	Removed the direct navigation constant and updated test steps to interact with elements using test IDs, altering the navigation sequence.
`utils/chain.ts` `utils/prefix.ts`	In `chain.ts`: Added `enableCreateChains` and removed `popularChains`; in `prefix.ts`: Removed the `hasMarketplace` function.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Dropdown as CreateDropdown
    participant Modal as EntryModal
    participant Auth
    participant Router

    User->>Dropdown: Clicks create option
    Dropdown->>Modal: Triggers handleButtonClick (isModalActive = true)
    Modal->>User: Displays creation options modal
    User->>Modal: Selects a creation option
    Modal->>Auth: Initiates login if required
    Auth-->>Modal: Returns authentication confirmation
    Modal->>Router: Redirects to chosen creation path

Poem

Oh! I'm a bunny with a skip and a hop,
Watching old pages vanish, never to stop.
A modal now dances with buttons so neat,
Colors of blue make our UI complete.
Code Rabbit cheers with whiskers in play—
Hoppy changes brighten up our day! 🐇💻

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Free

📥 Commits

Reviewing files that changed from the base of the PR and between 279f1da and fd41e7b.

📒 Files selected for processing (1)

components/create/EntryModal.vue (1 hunks)

Note

🎁 Summarized by CodeRabbit Free

Your organization has reached its limit of developer seats under the Pro Plan. For new users, CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please add seats to your subscription by visiting https://app.coderabbit.ai/login.If you believe this is a mistake and have available seats, please assign one to the pull request author through the subscription management page using the link above.

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

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)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai plan to trigger planning for file edits and PR creation.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

netlify · 2025-04-03T21:53:39Z

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	`fd41e7b`
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/67f682322353e60008b73774
😎 Deploy Preview	https://deploy-preview-11510--koda-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

exezbcz · 2025-04-06T07:24:52Z

connect wallet modal when trying to click an item in the wallet connect modal

Jarsen136 · 2025-04-06T07:31:21Z

connect wallet modal when trying to click an item in the wallet connect modal

It's fixed here but not merged yet #11509

exezbcz · 2025-04-06T09:09:38Z

oki, then it works, thanks!

hassnian

otherwise lgtm

components/create/CreateModal.vue

components/navbar/CreateDropdown.vue

components/create/CreateModal.vue

i18n/locales/en.json

sonarqubecloud · 2025-04-09T14:21:40Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Jarsen136 added 2 commits April 3, 2025 23:48

feat: Create select page into modal

ddd78f3

feat: create modal test case

3dabbb5

Jarsen136 requested a review from a team as a code owner April 3, 2025 21:53

Jarsen136 requested review from vikiival and hassnian and removed request for a team April 3, 2025 21:53

vikiival assigned exezbcz Apr 6, 2025

Jarsen136 added the S-visual-ok-✅ label Apr 6, 2025

Merge branch 'main' into issue-11506

32bbee7

hassnian reviewed Apr 8, 2025

View reviewed changes

hassnian mentioned this pull request Apr 8, 2025

can create collection on base #11521

Closed

Jarsen136 added 2 commits April 8, 2025 17:18

Merge branch 'main' into issue-11506

69e1a98

fix: create entry modal

4093cf3

hassnian approved these changes Apr 9, 2025

View reviewed changes

fix: e2t test

279f1da

Jarsen136 enabled auto-merge April 9, 2025 14:12

fix: path

fd41e7b

Jarsen136 mentioned this pull request Apr 9, 2025

fix: can create collection/nft on base #11526

Merged

3 tasks

vikiival approved these changes Apr 10, 2025

View reviewed changes

Jarsen136 added this pull request to the merge queue Apr 10, 2025

Merged via the queue into kodadot:main with commit 4af44c0 Apr 10, 2025
27 checks passed

Jarsen136 deleted the issue-11506 branch April 10, 2025 19:51

vikiival mentioned this pull request Apr 21, 2025

(beta): 70% of April 2025: Lemon 🍋 #11543

Merged

vikiival mentioned this pull request Apr 21, 2025

(prod): 70% of April 2025: Lemon 🍋 #11544

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: Create select page into modal #11510

feat: Create select page into modal #11510

Uh oh!

Jarsen136 commented Apr 3, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Apr 3, 2025 •

edited

Loading

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

netlify bot commented Apr 3, 2025 •

edited

Loading

Uh oh!

exezbcz commented Apr 6, 2025

Uh oh!

Jarsen136 commented Apr 6, 2025

Uh oh!

exezbcz commented Apr 6, 2025

Uh oh!

hassnian left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sonarqubecloud bot commented Apr 9, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

feat: Create select page into modal #11510

feat: Create select page into modal #11510

Uh oh!

Conversation

Jarsen136 commented Apr 3, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Type

Needs Design check

Needs QA check

Context

Screenshot 📸

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Apr 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Poem

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

netlify bot commented Apr 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for koda-canary ready!

Uh oh!

exezbcz commented Apr 6, 2025

Uh oh!

Jarsen136 commented Apr 6, 2025

Uh oh!

exezbcz commented Apr 6, 2025

Uh oh!

hassnian left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sonarqubecloud bot commented Apr 9, 2025

Quality Gate passed

Uh oh!

Uh oh!

Uh oh!

Jarsen136 commented Apr 3, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Apr 3, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

netlify bot commented Apr 3, 2025 •

edited

Loading