feat: delete collection nfts with auto-teleport #11477
Conversation
hassnian
requested review from
preschian and
Jarsen136
and removed request for
a team
|
Caution Review failedThe pull request is closed. WalkthroughThis pull request updates several Vue components and the preferences store. The NFT deletion component has been refactored to remove the loading modal and streamline deletion through a new query mechanism. Other components have received formatting and conditional logic updates tied to the user’s silent mode preference, including button layouts, cart visibility, and styling. The user cart modal now utilizes a new closing method, and an unused localization key has been removed. Finally, the preferences store now includes a silent mode property and related methods. Changes
Sequence Diagram(s)NFT Deletion FlowsequenceDiagram
participant U as User
participant HB as HeroButtonDeleteNfts
participant GS as GraphQL Service
participant PS as PreferencesStore
U->>HB: Initiates NFT deletion
HB->>HB: Compute NFT IDs
HB->>GS: Call listNftByNftWithMetadata for each NFT
GS-->>HB: Return NFT data
HB->>PS: Set user cart modal to open with 'burn' action
User Cart Modal Closing FlowsequenceDiagram
participant U as User
participant UCM as UserCartModal
participant PS as PreferencesStore
U->>UCM: Clicks close on modal
UCM->>PS: Call setClosedUserCartModal()
UCM->>UCM: onModalAnimation completes
UCM->>PS: Reset userCartModal to undefined
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
Note 🎁 Summarized by CodeRabbit FreeYour 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. 🪧 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 (
|
✅ Deploy Preview for koda-canary ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![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
🧹 Nitpick comments (4)
components/common/userCart/UserCartModal.vue (1)
83-87: Improved modal closing with a dedicated methodThe modal closing logic has been refactored to use a dedicated
setClosedUserCartModal()method instead of directly manipulating the state. The final reset of the modal state has been moved inside the animation callback, ensuring proper sequencing of operations.Consider combining both state updates into a single operation within the preferences store to avoid potential race conditions or inconsistent states:
const onClose = () => { preferencesStore.setClosedUserCartModal() onModalAnimation(() => { listingCartStore.clearListedItems() - preferencesStore.userCartModal = undefined emit('reset') }) }stores/preferences.ts (1)
51-51: Add documentation for the optionalsilentproperty.
Introducing the optionalsilentflag is useful to handle silent cart operations. Consider adding a small comment or JSDoc notation to clarify its intended usage and effect.components/collection/HeroButtonDeleteNfts.vue (2)
26-26: Validatecollection.idexistence.
Ifprops.collectionis ever undefined or lacks anid, these computed properties could break. Add a fallback or error-handling mechanism if needed.
36-36: Handle potential large datasets.
This map operation could become expensive if the user has many NFTs. Keep an eye on performance if large collections are common.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
components/collection/HeroButtonDeleteNfts.vue(1 hunks)components/collection/HeroButtons.vue(1 hunks)components/common/listingCart/ListingCartMini.vue(1 hunks)components/common/userCart/UserCartModal.vue(1 hunks)components/items/ItemsGrid/ItemsGridImage.vue(1 hunks)components/items/ItemsGrid/ItemsGridImageTokenEntity.vue(1 hunks)i18n/locales/en.json(0 hunks)stores/preferences.ts(3 hunks)
💤 Files with no reviewable changes (1)
- i18n/locales/en.json
⏰ Context from checks skipped due to timeout of 90000ms (16)
- GitHub Check: Redirect rules
- GitHub Check: Header rules
- GitHub Check: Pages changed
- GitHub Check: shard (5, 10)
- GitHub Check: build-cf
- GitHub Check: build
- GitHub Check: shard (3, 10)
- GitHub Check: shard (2, 10)
- GitHub Check: shard (8, 10)
- GitHub Check: shard (6, 10)
- GitHub Check: shard (7, 10)
- GitHub Check: shard (1, 10)
- GitHub Check: shard (10, 10)
- GitHub Check: shard (9, 10)
- GitHub Check: shard (4, 10)
- GitHub Check: runner / eslint
🔇 Additional comments (10)
components/common/listingCart/ListingCartMini.vue (1)
4-4: Added silent mode support to cart visibilityThe cart is now conditionally displayed based on both the item count and the user's silent mode preference. This change ensures the cart mini panel respects the user's preference for a less intrusive UI when silent mode is enabled.
components/items/ItemsGrid/ItemsGridImage.vue (1)
13-13: Added silent mode condition to cart indicator stylingThe highlight border for items in the cart is now only applied when the user is not in silent mode. This change maintains UI consistency with the cart visibility preference implemented in other components.
components/collection/HeroButtons.vue (1)
98-100: Simplified component structure for collection action buttonsThe component rendering has been refactored to use a more concise format with self-closing tags and inline props, improving code readability while maintaining the same functionality.
components/items/ItemsGrid/ItemsGridImageTokenEntity.vue (1)
13-15: Confirm desired behavior when silent mode is enabled.
Now, the'in-cart-border'class is only applied if the user is not in silent mode and the NFT is in either the shopping or listing cart. This aligns with a potential UX choice to hide cart highlights in silent mode. However, if users still need a visual indication even in silent mode, you may want to revisit this condition.stores/preferences.ts (3)
144-144: Straightforward silent mode getter.
This getter cleanly converts the optional silent property to a boolean. The approach is simple and maintainable.
242-244: Flexible approach to opening cart modal in silent mode.
Allowing an optional{ silent = false }object parameter provides extra control. The default value and strongly typed method signature look good.
245-248: Consistent persistence ofsilentflag when closing modal.
This preserves the preexisting modal mode andsilentstate. The approach is straightforward and correct for maintaining context if the user reopens the modal.components/collection/HeroButtonDeleteNfts.vue (3)
12-13: Imports aligned with new graph query approach.
ImportingNFTWithMetadataandnftEntitiesByIDsis consistent with the new mechanism for retrieving NFTs via Subsquid.
23-24: Refined deletion strategy usinglistNftByNftWithMetadata.
This direct approach for NFT deletion (or burn listing) is concise. Confirm that all required side effects (e.g., UI updates) are handled downstream.
38-46: Appropriate use of GraphQL subquery.
Retrieving the NFT entities by IDs is a clean approach. Confirm that the GQL server can handle any large sets of IDs for bigger collections.
|
@hassnian you have some conflicts |
# Conflicts: # components/collection/HeroButtonDeleteNfts.vue
|
PR Type
Context
Screenshot 📸
CleanShot.2025-03-13.at.11.59.19.mp4
Summary by CodeRabbit
New Features
Bug Fixes
Refactor