Tapping a tx in tx history extends a collapse which reveals: a link to the tx that opens the block explorer in a new tab and a copy txid button which fires a notification when the txid has been copied to the user's clipboard. Related to task T1774.
Details
Details
- Reviewers
bytesofman emack johnkuney - Group Reviewers
Restricted Project
cd web/cashtab
npm start
on the main wallet tab, click on a transaction
onClick, the tx card should expand, revealing a link to the tx on the block explorer>
click on the link, it should open the block explorer in a new tab
click on the Copy Txid button, it should fire a success notification
paste the txid somewhere to ensure it was copied to the clipboard.
send XEC, check that the new transaction panel expands on click
receive XEC, check that the new transaction panel expands on click
Diff Detail
Diff Detail
- Repository
- rABC Bitcoin ABC
- Branch
- tx-history-dropdown
- Lint
Lint Passed - Unit
No Test Coverage - Build Status
Buildable 18366 Build 36534: Build Diff cashtab-tests Build 36533: arc lint + arc unit
Event Timeline
Comment Actions
From an UX perspective, the copy tx ID button isn't obvious enough that it's copying the Tx ID and not other fields until the user clicks on it. Once we start adding other copy to clipboard buttons for things like the OP_RETURN message then this will be even more confusing. Perhaps change the icon to something like the below?
And then going forward when we add the copy msg button it can be a similar copy icon but with 'msg' on it.
From an UX perspective, the copy tx ID button isn't obvious enough that it's copying the Tx ID and not other fields until the user clicks on it. Once we start adding other copy to clipboard buttons for things like the OP_RETURN message then this will be even more confusing. Perhaps change the icon to something like the below?
And then going forward when we add the copy msg button it can be a similar copy icon but with 'msg' on it.
| web/cashtab/src/components/Home/Tx.js | ||
|---|---|---|
| 325 ↗ | (On Diff #32410) | Move this to '@components/Common/Notifications.js' and rename this to GeneralNotification that takes in (data, msgStr), where msgStr is the message to be displayed in the notification, e.g. 'Tx ID copied to Clipboard', 'Message copied to Clipboard'...etc. |
| 327 ↗ | (On Diff #32410) | message: 'Tx ID copied to Clipboard', |
| web/cashtab/src/components/Common/Notifications.js | ||
|---|---|---|
| 174 ↗ | (On Diff #32436) | Notifications need to be dynamically styled for margin depending on device. Similar to other notifications, add in: const notificationStyle = getDeviceNotificationStyle(); and then use ' style: notificationStyle, ' within notification.success |
| web/cashtab/src/components/Home/Tx.js | ||
| 294–316 ↗ | (On Diff #32436) | Since this diff will be introducing this contextual collapse UI for the first time, we'll want this to be reusable by other components to ensure UI/UX consistency across future diffs. Can you move this (and any relevant styling) into the StyledCollapse component and insert 'context' into the name (e.g. AntdContextCollapseWrapper) to differentiate it from the existing dropdown collapse UI for seed phrase reveal, saved wallets... etc. |
Comment Actions
Overall looks good, but looks like there is some extra space now on the rows when collapsed
And I would suggest adding some text too, moving to the right, and make icons smaller. Same font size as the gray font in the transaction info
And maybe have the copy transaction link blue on hover, and the explorer link be.cash pink #f84970 on hover
Comment Actions
- Please make the :hover colors the same for each link
- See if you can get the :hover effect to also apply to the icons
- Play with the line height / padding to get a better aesthetic alignment between the text and the icons. The copy paste icon looks much lower than the "Copy Tx ID" text.
