Feat/sbtc token id page

[nick-stacks]

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

• Refactor
• Feature
• Bug Fix
• Optimization
• Documentation Update

Description

Adds the sbtc token id page header

Issue ticket number and link

Checklist:

• I have performed a self-review of my code.
• 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):

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
stacks-labs-explorer	Ready	Preview	Comment	Nov 24, 2025 8:40pm

[ginny-stacks]

Here's the QA review:

• 1) Update bridge links:
  Update “Get sBTC” button and “How can I get sBTC?” links to point to https://sbtc.stacks.co/ (this was changed recently).

---

• 2) Correct URL:
  Confirm that this token page should be accessible at: explorer.stacks.co/sbtc

---

• 3) Color space (P3):
  Confirm that colors use the P3 color profile in CSS to maintain Stacks’ brand color intended vibrancy.
  See for Reference: https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/

Implementation:

Figma:

---

• 4) Responsive market data boxes:
  Market data boxes should adapt to the viewport width.

Implementation:

Figma:

---

• 5) USD formatting issue (site-wide):
  When prices are shown in USD, the text currently appends “US” before the numbers, making them cumbersome and harder to read. Remove the “US” prefix entirely and ensure the $ symbol uses the standard single-stroke glyph.

Implementation:

Figma:

---

• 6) The bottom-right corner of the “Total Supply” box should use a 30px radius to better match the circular token illustration.

---

• 7) sBTC icon alignment:
  The sBTC icon appears visually off-center within its circle. Use the optimized version attached in the issue.

Implementation:

Figma:

(Right click and save here ⬇️)

---

• 8) Remove redundant market data block:
  The market data block on this page is redundant with the header. Replace it with links to the protocol contracts.

---

• 9) FAQ card interactions & design:
  FAQ cards are missing the pointer cursor on hover to indicate interactivity.
  Design revision: adding a gradient overlay to indicate that the content continues (to avoid the appearance of being cropped).
  See: https://www.figma.com/design/gsgfw9WmMbETBEC4FbY2H9/Stacks-Explorer--Redesign-?node-id=9100-37626&t=49uHOLjl8cgDy2do-1

---

• 10) Market data boxes, font & USD issue:
  The “US” issue appears again here. Also please confirm that font styles use heading-sm as intended.

Implementation:

Figma:

---

• 11) Remove SIP-10 data banner (this page only):
  For this sBTC token page, remove the SIP-10 compliance banner. It may create unnecessary concern; we can guarantee its accuracy internally as it is our own product.

---

• 12) Mobile sticky header icon size:
  The token image in the mobile sticky header is too large. It should scale to 24×24px.

Implementation:

Figma:

[nick-stacks]

@ginny-stacks Regarding #7, we are actually using the token image we get from the Token Metadata API. I think the optimal solution is to update the token image the API is using vs changing the logic to handle a custom svg just for sbtc.

My message to the API team is here

[ginny-stacks]

@ginny-stacks Regarding #7, we are actually using the token image we get from the Token Metadata API. I think the optimal solution is to update the token image the API is using vs changing the logic to handle a custom svg just for sbtc.

My message to the API team is here

Thanks! 🙏

[nick-stacks]

@ginny-stacks I believe I have solved the US$ issue, but I am having a hard time replicating it with even with a VPN. Please confirm if the issue is fixed for you.

Just FYI, the fix is making sure that we are using the narrowsymbol config parameter for the intl.numberformat function

[ginny-stacks]

Thanks! It looks great, just one last small tweak:

• On the FAQ cards, it would be great to add the interaction to close them upon clicking anywhere outside the box

• Regarding the sBTC token image, the core developers recommended hard-coding the optimized version at this point because updating the image within the contract is non-trivial, which would be the only way that allows the token API to reliably fetch the latest version.

@andresgalante-stacks This should be ready to release after those two updates. The question remains when do we want to release this update, if after the Bridge, or after the updated Withdrawal/Deposit/Transfers tabs, and/or the updated sBTC transaction ID pages. (or just now)

The base branch was changed.