explorer icon indicating copy to clipboard operation
explorer copied to clipboard

feat: enabled the token id page redesign

Open nick-stacks opened this issue 2 months ago • 6 comments

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [X] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

enabled the token id page redesign

Issue ticket number and link

Checklist:

  • [X] I have performed a self-review of my code.
  • [X] I have tested the change on desktop and mobile.
  • [ ] I have added thorough tests where applicable.
  • [ ] I've added analytics and error logging where applicable.

Screenshots (if appropriate):

nick-stacks avatar Oct 30 '25 20:10 nick-stacks

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
stacks-labs-explorer Ready Ready Preview Comment Nov 10, 2025 7:58pm

vercel[bot] avatar Oct 30 '25 20:10 vercel[bot]

Thanks Nick, here are my comments:

  • [x] 1) Suspicious token mark inconsistency A token is marked as suspicious in the table, but this mark is missing on the ID page.
Screenshot 2025-10-31 at 09 50 03 Screenshot 2025-10-31 at 09 50 07

Expected:

Screenshot 2025-10-31 at 09 50 22
  • [x] 2) Missing the SIP-10 data callout:
Screenshot 2025-10-31 at 09 50 18
  • [x] 3) Token image styling The token image should be larger (40x40px) and round.
Screenshot 2025-10-31 at 09 50 30 ### Expected: Screenshot 2025-10-31 at 09 50 27
  • [x] 4) Different underline styling in these rows:
Screenshot 2025-10-31 at 09 50 37
  • [x] 5) "No data available" should be text-secondary color
Screenshot 2025-10-31 at 09 50 46

Expected:

Screenshot 2025-10-31 at 09 50 42
  • [x] 6) Missing copy functionality on market data:
Screenshot 2025-10-31 at 09 50 52

Expected:

Screenshot 2025-10-31 at 09 50 55
  • [x] 7) Holders table numbering logic If we can’t sort holders by the largest holdings, we should remove the first column with numbers as they don’t currently follow any logic.
Screenshot 2025-10-31 at 09 51 29
  • [x] 8) Source code tab is duplicated Screenshot 2025-10-31 at 09 51 37

  • [x] 9) On mobile, Market Data should appear as the second section, right after the token name data. (Apologies — this was not included in the original design spec.) Screenshot 2025-10-31 at 09 54 39

  • [x] 10) The sticky header is showing incorrect data and icon:
Screenshot 2025-10-31 at 09 56 17

Expected:

Screenshot 2025-10-31 at 09 56 10
  • [ ] 11) Is it possible to add this notice when a token name is repeated a lot?
Screenshot 2025-10-31 at 09 55 53

ginny-stacks avatar Oct 31 '25 09:10 ginny-stacks

@ginny-stacks Regarding 11, this UX warrants more discussion imo. A few points:

  1. This warning may not be as useful as it would seem. Take USDC for example. There are multiple, legitamate wrapped versions of USDC. This would flag all of the USDC tokens and raise suspicion and worry, despite all of the tokens being legitamate.
  2. If coming from the tokens list page and searching the user would see all the similar tokens.
  3. There needs to be a criteria set for what is considered similar? If I am looking at USDC, am I searching for tokens with USDC in the name? USD? What about SBTC? Am I looking for SBTC, BTC, SBTD, etc.?
  4. Performance. This adds a pretty heavy query - searching for a list of tokens that match a string. If this were to add any amount of significant lag to the first contentful paint, then I wouldn't be in favor of adding it to the SSR code. We could add it client side but the alert would pop-in.

nick-stacks avatar Nov 06 '25 01:11 nick-stacks

Thanks for addressing the feedback @nick-stacks ! There are just some standing fixes:

  • [x] 1) Link styling and wrapping
  • The link styling is not visible in its normal state. Please make it underlined by default.
  • Also, the link text is not wrapping correctly on mobile. Screenshot 2025-11-06 at 11 05 06 Screenshot 2025-11-06 at 11 05 13
Screenshot 2025-11-06 at 11 14 07
  • [x] 2) Spacing between the two tables
  • On desktop, the space between the two tables is too large. Please adjust to match the design reference.
  • On mobile, the spacing is too tight, it needs a bit more breathing room. Screenshot 2025-11-06 at 11 08 57
Screenshot 2025-11-06 at 11 25 41 Screenshot 2025-11-06 at 11 15 12 Screenshot 2025-11-06 at 11 17 10
  • [x] 3) Table responsiveness
  • The tables are not adjusting properly on mobile and appear cropped. Screenshot 2025-11-06 at 11 15 08

  • [x] 4) Banner icon alignment
  • The banner icon should align to the top (as shown in the reference design), rather than being vertically centered. Screenshot 2025-11-06 at 11 32 46
Screenshot 2025-11-06 at 11 15 27
  • [x] 5) Outstanding issue
  • This issue still needs resolution (see previous notes for details). Screenshot 2025-11-06 at 11 18 14

As for your comment on item 11, I understand - let’s revisit that discussion later if it becomes a real issue for users.

ginny-stacks avatar Nov 06 '25 10:11 ginny-stacks

@ginny-stacks Regarding #5, You can see that the API returns the holders in desc order of holding percentage. So the numbering still makes sense. The API just doesn't allow was to sort in reverse

nick-stacks avatar Nov 07 '25 19:11 nick-stacks

Thanks @nick-stacks , looking good! My only last comment is that this column should hug contents in height, as it used to do before:

Screenshot 2025-11-10 at 09 36 56

Other than that, it's approved 👍

ginny-stacks avatar Nov 10 '25 08:11 ginny-stacks