Misaligned Confirm Button & Unauthorized Editable Fields on Shared NFT Page
๐งญ Affected Platform: ArcBlock Marketplace
๐ Affected Page: https://marketplace.arcblock.io/auctions/aea100b0-7f2a-4885-b0d4-cc57f31d8bd3
๐งพ Summary
Two issues were observed on the NFT sale/auction page:
- UI Misalignment:
- The โConfirmโ button appears misaligned, with a white gap above and below it.
- This breaks visual consistency on both dark and light themes.
- Unauthorized Editable Fields:
- When the link is shared with another user or opened in incognito mode, all the fields such as:
- NFT Description
- Advanced Setting
- Choose Tag for this NFT
- Confirm Button remain enabled and editable even if the viewer is not the NFT owner.
๐ฑ Environment
| Parameter | Details |
|---|---|
| Device | Laptop / Desktop |
| Browser | Google Chrome (latest version) |
| OS | Windows 10 |
| Theme | Dark Mode |
| Connection | Stable (tested multiple times) |
๐งช Steps to Reproduce
Issue 1 โ Confirm Button Misalignment
- Go to your NFT auction/sale page on ArcBlock Marketplace.
- Scroll down to the Confirm section.
- Observe the white rectangular gap above and below the orange button.
Issue 2 โ Unauthorized Editable Fields
- Log in and navigate to your NFT sale page.
- Copy the link and share it with another user or open it in incognito mode.
- Observe that even without being logged in:
- All input fields remain enabled.
- The Confirm button remains clickable.
๐ฅ Actual Results
- Visual: Confirm button is not properly aligned (white borders visible).
- Permission: Shared page allows unauthorized editing attempts of NFT listing fields.
โ Expected Results
- Confirm button should be visually aligned with no gaps or background bleed.
- Non-owners or non-authenticated users should see a read-only version of the page:
- Disabled or hidden โDescription,โ โAdvanced Settings,โ โTag,โ and โConfirmโ controls.
โ๏ธ Possible Causes
- Missing UI alignment rules for dark theme CSS class (e.g.,
button-containerpadding or margin). - Lack of ownership check or user authentication before enabling editable components.
๐ก Suggested Fixes
UI Alignment
- Adjust padding/margin for the Confirm button container in CSS:
javascript .confirm-button { margin: 0; padding: 0; background-color: transparent; }
Access Control
- Add ownership verification logic before rendering editable fields:
javascript const isOwner = currentUserDid === nftOwnerDid; {isOwner ? <EditableSection /> : <ReadOnlySection />}
๐ Severity
| Type | Severity | Description |
|---|---|---|
| UI Bug | ๐ก Medium | Visual layout inconsistency |
| Access Control Bug | ๐ด High | Editable fields shown to unauthorized users |
๐งฉ Additional Notes
- Issue reproduced on both Desktop and Mobile browsers.
- Not related to caching or network delay.
- Recommended to audit similar NFT listing pages to confirm consistent field protection.