fix: tx-id-page-fixes

[BLuEScioN]

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

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

Description

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 Git ↗︎

Project	Status	Preview	Comments	Updated (UTC)
explorer-storybook	✅ Ready	Visit Preview	💬 Add feedback	Aug 11, 2025 9:08pm
hiro-explorer	✅ Ready	Visit Preview	💬 Add feedback	Aug 11, 2025 9:08pm

[codecov]

Codecov Report

❌ Patch coverage is 10.10638% with 169 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
src/common/utils/transactions.tsx	31.25%	27 Missing and 6 partials ⚠️
[...xId]/redesign/tx-summary/TenureChangeTxSummary.tsx](https://app.codecov.io/gh/hirosystems/explorer/pull/2445?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=hirosystems#diff-c3JjL2FwcC90eGlkL1t0eElkXS9yZWRlc2lnbi90eC1zdW1tYXJ5L1RlbnVyZUNoYW5nZVR4U3VtbWFyeS50c3g=)	0.00%	22 Missing ⚠️
.../app/txid/[txId]/redesign/tx-summary/TxSummary.tsx	0.00%	19 Missing and 2 partials ⚠️
[...xId]/redesign/tx-summary/ContractCallTxSummary.tsx](https://app.codecov.io/gh/hirosystems/explorer/pull/2445?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=hirosystems#diff-c3JjL2FwcC90eGlkL1t0eElkXS9yZWRlc2lnbi90eC1zdW1tYXJ5L0NvbnRyYWN0Q2FsbFR4U3VtbWFyeS50c3g=)	0.00%	18 Missing ⚠️
...d/[txId]/redesign/tx-summary/CoinbaseTxSummary.tsx	0.00%	17 Missing ⚠️
[...Id]/redesign/tx-summary/TokenTransferTxSummary.tsx](https://app.codecov.io/gh/hirosystems/explorer/pull/2445?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=hirosystems#diff-c3JjL2FwcC90eGlkL1t0eElkXS9yZWRlc2lnbi90eC1zdW1tYXJ5L1Rva2VuVHJhbnNmZXJUeFN1bW1hcnkudHN4)	0.00%	14 Missing ⚠️
src/app/txid/[txId]/redesign/TxTabs.tsx	0.00%	7 Missing ⚠️
src/app/txid/[txId]/redesign/TxHeader.tsx	0.00%	5 Missing ⚠️
src/app/txid/[txId]/redesign/CoinbasePage.tsx	0.00%	4 Missing ⚠️
src/app/txid/[txId]/redesign/TenureChangePage.tsx	0.00%	4 Missing ⚠️
... and 14 more

📢 Thoughts on this report? Let us know!

[ginny-d]

Thanks for sharing these @BLuEScioN , it's looking great so far. Here are my revision notes:

• Please revise the font styles and font colors for the Tabs. The current used text style is Instrument sans, but it should be heading-xs in this case which is Matter SQ font

---

• The inactive tab text color should be text-secondary, but the number in this case (1) should remain text-tertiary

---

• The border gradient color of the header should be the same as the current tx-type color. Currently it's applying bitcoin-500 color to all tx types.

---

• The loading skeleton is taking the layout from the old design. Is it possible to apply the skeleton to the new layout? Or alternatively just swap for a loading spinner

Screen.Recording.2025-08-04.at.15.25.34.mov

---

• When copying these IDs to clipboard, it only copies the truncated "0xe3…d00d9". It should copy the entire ID (0xe35c8fd419e49d6e19771fd9b31592b0dafceaeb8a5e76a81051ad114efd00d9) even if the displayed one is the truncated version

---

• Let's remove the Status: Confirmed line since it's already on the header

---

• Please match the paddings of the Status tag to the ones in the design system. The icon used should be weight bold.

---

• This square size is 16x16 but it should be 18x18

This tag also seems to be slightly different to the ones used in the table?

---

• Can we use "Block found" without the _ in between?

---

• Here the first ID has a normal underline link style, but the second one has a different one. It should be like the first one

---

• The timestamp tags and block height badges have a different style than the ones already in use in the Explorer. Design system for reference: Block heights, Tags

---

• We don't need to show this "Show" on Coinbase and Tenure change since those tx type don't have a value associated, and the values of fees are usually less than $0.1

---

• The arrow should be medium weight (text-medium-m)

---

• The footer should always stick to the bottom like in the second screenshot, as opposed to be appearing 'floating' and leaving space after the footer

---

• Let's use the same title for the header of the tx title as we use in the tables

---

• The copy button is missing this hover state:

---

• Let's remove 'coinbase' from the title as it's redundant

---

• The underline link on the Bitcoin block details is different from the others used in the table

---

• The content on the sticky header is not vertically aligned

---

• Can we use the same column layout as in the design? Right now the Bitcoin column looks to thin

---

• Here it should show the bitcoin block, not the stacks block

Can we also replace the title for "Burn block details"? I changed this recently to make it more accurate

---

• On dark mode, the icon shouldn't change to be white, as it's a fixed color (sand-1000)

---

• The old tooltip style is still being used, please refer to the new tooltip style on dark mode

---

• On mobile, the columns should adjust to the full width

---

• Can the filters be outside the table like in the rest of the tables?

---

• The index tag style appears to be different:

---

• Can we use "STX token" here as to not have redundant information?

---

• These columns don't appear to be aligned

---

• The arrow should be text-tertiary like in the rest of the tables

---

• Has the API been updated with this to match the design?

---

• I'm not sure what the 'Address' filter should do, should it be "From/to" like in the other tables?

---

• Let's use the STX icon here as well like we use in the other table

---

• When opening and closing this dropdown, the drop shadow seems to be out of sync, making a weird flickering effect

Screen.Recording.2025-08-04.at.15.35.14.mov

[BLuEScioN]

"The loading skeleton is taking the layout from the old design. Is it possible to apply the skeleton to the new layout? Or alternatively just swap for a loading spinner"

Once we remove the feature flag, the skeleton will not be shown

[BLuEScioN]

@ginny-d
These columns don't appear to be aligned
Screenshot 2025-08-04 at 16 12 01

There is horizontal padding on the column headers. Do you want me to remove that?

[ginny-d]

@ginny-d These columns don't appear to be aligned Screenshot 2025-08-04 at 16 12 01

There is horizontal padding on the column headers. Do you want me to remove that?

In that case, should the same horizontal padding be applied to the table cells?

[BLuEScioN]

@ginny-d
"I'm not sure what the 'Address' filter should do, should it be "From/to" like in the other tables?"
The API only allows us to filter by one address. We have an open issue to bring the endpoint into parity with the tx endpoint hirosystems/stacks-blockchain-api#2309

[BLuEScioN]

@ginny-d
"When opening and closing this dropdown, the drop shadow seems to be out of sync, making a weird flickering effect"
I don't think this issue is relevant to this PR. We can create separate issue for this, but I feel this could be an issue not with our code but instead the browser rendering engine.

[BLuEScioN]

@ginny-d
"Let's use the STX icon here as well like we use in the other table"
I can do this, just mentioning that it's not just STX tokens that will be shown, and we don't have the information to get other token's icons without making an additional request.

[BLuEScioN]

@ginny-d These columns don't appear to be aligned Screenshot 2025-08-04 at 16 12 01
There is horizontal padding on the column headers. Do you want me to remove that?

In that case, should the same horizontal padding be applied to the table cells?

All of the cells have padding, header cells and row cells. But for some reason the header cell content had padding. So padding inside padding is the issue. I just removed the inner padding

[BLuEScioN]

@ginny-d
"Has the API been updated with this to match the design?"
Did you mean the UI? If it is the API, could you explain further please?

[BLuEScioN]

@ginny-d I have addresed your feedback. This PR is ready for another look

[ginny-d]

@ginny-d "Let's use the STX icon here as well like we use in the other table" I can do this, just mentioning that it's not just STX tokens that will be shown, and we don't have the information to get other token's icons without making an additional request.

That's ok, we should only highlight/use STX, BTC, and sBTC icons, as the "native" currencies of Stacks. We don't need to use any additional icons for other tokens

[ginny-d]

@ginny-d "Has the API been updated with this to match the design?" Did you mean the UI? If it is the API, could you explain further please?

Sorry it wasn't clear, so on this one:

We have "STX lock", but that's not an asset type, rather an event type. Maybe we just remove it?

[ginny-d]

@ginny-d "Please revise the font styles and font colors for the Tabs. The current used text style is Instrument sans, but it should be heading-xs in this case which is Matter SQ font" Can you please revise the designs as well. It's very confusing making changes, like changing the font style from instrumentSans to matterMono, and then looking back and seeing that the designs still have the font style instrumentSans.

I understand the confusion here. The tabs themselves haven’t changed, the difference comes from how font styles are applied at different sizes.

• Small (sm) and medium (m) tabs use text-medium-xs (Instrument Sans), which is smaller and follows the text styling.

• Large (lg) and above tabs use the heading font styles, which are set in Matter SQ, because the font size is bigger.

This causes the visual difference you’re seeing between small and large tab sizes.