feat(tokenDetails): ERC721 token navigation and recent tokens list#362
Open
AugustoL wants to merge 3 commits intoopenscan-explorer:devfrom
Open
feat(tokenDetails): ERC721 token navigation and recent tokens list#362AugustoL wants to merge 3 commits intoopenscan-explorer:devfrom
AugustoL wants to merge 3 commits intoopenscan-explorer:devfrom
Conversation
…lay (openscan-explorer#345) Add arrow buttons next to the token ID header that navigate to adjacent tokens in the collection. Uses BigInt arithmetic for uint256 safety and respects collection totalSupply when available; disabled states render when no neighbor exists or totalSupply is undefined.
…openscan-explorer#345) Surface the latest minted tokens on the ERC721 address/collection page using ERC721Enumerable's tokenByIndex. Renders a compact table with token IDs and owners linking into each token's detail page; silently hidden when the contract doesn't implement Enumerable or totalSupply is unavailable.
- Add missing .address-link rule (was falling back to browser default blue/purple) - Replace undefined --primary-color var in .nft-collection-link with --color-primary - Brighten .nft-link-button contrast and use --badge-info-text for dark-mode hover - Fix invisible .nft-token-uri-code background on dark bg via --overlay-light-5
|
🚀 Preview: https://pr-362--openscan.netlify.app |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds prev/next token navigation to the ERC-721 token detail page and a "Recent Tokens" table to the ERC-721 collection (address) page. Also fixes link color contrast on the token detail page in dark mode, where several links were falling back to the browser default (poor contrast on the dark card).
Related Issue
Closes #345
Type of Change
Changes Made
ERC721TokenDisplay.tsx): arrow buttons in the header, BigInt-safe math for uint256 IDs. Disabled state when at edges or whentotalSupplyisn't available.CollectionTokenList.tsx): queries ERC721Enumerable'stokenByIndexfor the latest N tokens on the collection page. Silently hides itself if the contract doesn't implement Enumerable (e.g., Nouns DAO reverts ontokenByIndex), so non-Enumerable collections aren't affected.erc721Metadata.ts:fetchTokenByIndex(address, index, rpcUrl)— selector0x4f6ccce5, returns the token ID as a decimal string ornullon revert.styles/components.css:.address-linkrule (Collection/Contract/Owner/Approved inline links) — was falling back to browser default blue/purple on dark bg.--primary-colorfallback in.nft-collection-linkwith--color-primaryfor brand consistency..nft-link-buttoncontrast (alpha-15 bg + border,--badge-info-texthover).rgba(0,0,0,0.03)URI-code bg for--overlay-light-5+--border-primaryso the block is visible in both themes.recentTokens,tableTokenId,tableOwnertoaddressnamespace, andpreviousToken,nextTokentotokenDetails, across all 5 locales (en, es, ja, pt-BR, zh).Screenshots (if applicable)
Verified in dark and light modes against Nouns DAO (
0x9C8fF…eDC03). All four inline links on the token detail page now render in--color-primary(#10b981) and match the.link-accentstyling used on the tx/block pages.Checklist
npm run format:fixandnpm run lint:fixnpm run typecheckwith no errorsnpm run test:runAdditional Notes
CollectionTokenListsection only appears for collections that implementERC721Enumerable. The firsttokenByIndex(totalSupply-1)probe is used to detect Enumerable support; if it reverts, the component setsenumerable=falseand renders nothing. Collections like Nouns (not Enumerable) therefore show the usual NFT Collection card without the recent-tokens list — no regression.Transferevents fromaddress(0)for non-Enumerable collections, so the recent-tokens table can also work for contracts that skipERC721Enumerablefor gas reasons.