feat: Add auto-teleport to Delete Collection
#11459
Conversation
WalkthroughThe changes update multiple components handling collection deletion. The deletion process now uses a new modal component, ActionModal, replacing legacy modals. Key modifications include adjustments to prop definitions and event handling, a shift to a checkbox-based acknowledgment instead of buttons, and a streamlined deletion workflow. Additional updates include minor interface changes in auxiliary components and a wording update in internationalization messages. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant HB as HeroButtonDeleteCollection
participant CTM as ConfirmDeleteCollectionModal
participant AM as ActionModal
participant S as CollectionService
U->>HB: Click "Delete Collection"
HB->>CTM: Open deletion modal (passes getAction & collection)
CTM->>AM: Render modal with updated props & acknowledgment checkbox
U->>AM: Toggle acknowledgment checkbox
U->>AM: Confirm deletion action
AM->>S: Invoke getAction() to perform deletion
S-->>AM: Return deletion confirmation
AM-->>CTM: Close modal and notify completion
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (7)
🪧 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. |
hassnian
changed the title
Delete Collection
hassnian
changed the title
Delete Collection Delete Collection
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (8)
components/common/autoTeleport/AutoTeleportActionButton.vue (1)
126-126: Consider verifying default value for optionalamountprop.Changing
amountto an optional prop while also assigning a default of0in the defaults block (line 144) might cause confusion if other parts of the code rely on this prop being set. Ensure consumers ofAutoTeleportActionButtonhandle the case whenamountis undefined, and confirm that default usage is consistent.components/common/ActionModal.vue (2)
13-60: Ensure consistent close logic in<NeoModal>.The
close-at-signedprop in the signing modal and the@close="onClose"in<NeoModal>may result in multiple routes for dismissal. Verify that dismissal events from both modal instances do not conflict or leave the component in an inconsistent state. For clarity, unify or document the desired close behavior.
64-218: Transactional flow and error handling.
- The
submitfunction (lines 133–148) callsexecTransactiononly whenautoteleportis false. Ensure there's no edge case where skippingexecTransactioninadvertently omits required steps.onBeforeMount(closeModal)(line 216) can prematurely close the modal when the component is mounted. Verify this behavior if the modal should be visible upon initial render.- The
useTransactionNotificationblock (lines 150–185) effectively handles success and error states. However, ensure large or delicate transactions properly surface partial failures or edge cases, especially if further user intervention is required.components/collection/HeroButtonDeleteCollection.vue (2)
20-22: Provide a narrower type forcollectionUsing
unknownmay reduce clarity and type safety. For improved maintainability, consider supplying a more explicit type definition if known.
42-57: Refine subscription usage to avoid duplicatesCurrent logic overwrites the
unsubscribeSubscription.valueon each call. If a user attempts repeated openings, ensure the old subscription is unsubscribed first or that it is not triggered multiple times to prevent potential memory leaks.components/collection/ConfirmDeleteCollectionModal.vue (1)
41-45: Improve type definitions forcollectionUsing
anycan mask type issues. If possible, define a custom interface or type that accurately represents the collection to increase reliability and clarity.components/common/userCart/UserCartModal.vue (2)
82-82: Double-check concurrency on closing the modal
onClosesetsuserCartModalto undefined and clears items. If multiple modal closures occur in quick succession, ensure the store updates and emits remain consistent without race conditions.
90-90: Consider deep clone if needed
items.value = [...listingCartStore.itemsInChain]copies the array but not nested objects. If items are deeply nested, changes to store data might reflect unexpectedly. Evaluate if a deep clone can improve isolation.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
components/collection/ConfirmDeleteCollectionModal.vue(1 hunks)components/collection/HeroButtonDeleteCollection.vue(1 hunks)components/collection/HeroButtons.vue(1 hunks)components/common/ActionModal.vue(1 hunks)components/common/autoTeleport/AutoTeleportActionButton.vue(1 hunks)components/common/userCart/UserCartModal.vue(2 hunks)i18n/locales/en.json(1 hunks)
⏰ 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 (10, 10)
- GitHub Check: runner / eslint
- GitHub Check: build-cf
- GitHub Check: build
- GitHub Check: shard (9, 10)
- GitHub Check: shard (7, 10)
- GitHub Check: shard (8, 10)
- GitHub Check: shard (2, 10)
- GitHub Check: shard (4, 10)
- GitHub Check: shard (6, 10)
- GitHub Check: shard (3, 10)
- GitHub Check: shard (5, 10)
- GitHub Check: shard (1, 10)
🔇 Additional comments (16)
i18n/locales/en.json (1)
270-270: Wording adjustment for clarity.The updated message "I understand collection will be permanently destroyed. Your deposit will be refunded." is concise and emphasizes finality. This also helps ensure user acknowledgment before a destructive action. Looks good.
components/collection/HeroButtons.vue (1)
99-101: Prop binding forCollectionHeroButtonDeleteCollection.Passing
:collection="collection"ensures the child component can access and handle the collection’s data directly. Verify that this prop is optional or required in the child component and handle any potential null or undefined values if it’s required.components/common/ActionModal.vue (1)
1-11: Modal stacking logic with SigningModal.The template conditionally renders the
<SigningModal>only whenautoTeleportis false. Confirm that there are no scenarios where both modals need to be visible simultaneously. Otherwise, consider a separate approach to handle parallel states (e.g., queueing or layering).components/collection/HeroButtonDeleteCollection.vue (4)
8-10: Validate usage of modal props and eventsUsing
getActionandcollectionas props works well with@success. However, consider verifying thatcollectionis fully loaded before opening the modal, to avoid potential undefined references or incomplete data.
18-19: Typed import looks goodImporting
Actionsfrom the transaction types is clear and descriptive. No concerns here.
32-32: Check for valid route paramWhen computing
collectionId, ensureroute.params.idactually exists and is convertible to a string. If it might beundefined, add a safe fallback or explicit error handling.
34-40: Consider graceful handling for invalid IDs
getActionreturns an action withcollectionId. Ifroute.params.idis missing or invalid, a deletion request could fail. ValidatecollectionId.valuebefore returning the action object to reduce the chance of runtime errors.components/collection/ConfirmDeleteCollectionModal.vue (6)
2-10: Refactor to ActionModal is coherentSwitching from
NeoModaltoActionModalaligns with the updated workflow. Passing@success="$emit('success')"centralizes success handling and simplifies code.
12-21: Verifycollection.metaavailabilityWhen displaying
collection.meta.image, confirmmetais defined to prevent runtime errors if the collection lacks metadata or an image. A fallback image or error check could improve robustness.
23-32: Acknowledgment checkbox enhances clarityUsing a checkbox to ensure the user acknowledges the deletion is a good UX improvement. This approach discourages accidental clicks and clarifies the irreversible action.
37-39: Sanitize IPFS URLs carefully
sanitizeIpfsUrlis helpful. Ensure that edge cases (e.g., invalid strings) are handled gracefully so that the UI does not break or display invalid URLs.
50-57: Dynamic label is user-friendlyThe computed label that instructs users to acknowledge before continuing provides clarity. This straightforward approach improves usability.
59-63: Resetting acknowledgment ensures repeat confirmationsClearing the checkbox state whenever the modal closes is a robust approach and prevents accidental re-use of previous acknowledgments.
components/common/userCart/UserCartModal.vue (3)
2-40: ActionModal integration looks consistentReplacing
NeoModalandSigningModalwithActionModalunifies the modal pattern. The new approach is cleaner and easier to maintain. Confirm that no references to old modals remain in surrounding code.
50-50: Exposed type is clearDefining
UserCartModalExposeclarifies what this component exposes. This helps other components or tests rely on a stable interface.
80-80: Verify loading fallback
const loading = computed(() => (props.loading || loadingAbi.value))merges prop-based loading with ABI loading checks. Ensure theprops.loadingdefault covers all usage scenarios.
|
hassnian
requested review from
preschian and
Jarsen136
and removed request for
a team
PR Type
Context
Needs QA check
Screenshot 📸
Summary by CodeRabbit
New Features
Refactor