feat: use toast notification for copy transaction ID #39689
Closed
+116
−35
Conversation
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
georgewrmarshall
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
Contributor
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
metamaskbot
added
the
team-design-system
Contributor
✨ Files requiring CODEOWNER review ✨👨🔧 @MetaMask/core-extension-ux (4 files, +22 -27)
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
georgewrmarshall
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
Contributor
Builds ready [efdd2fc]
UI Startup Metrics (1322 ± 109 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Replace inline tooltip with toast notification when copying transaction ID in transaction details modal. This provides better visibility and consistency with other copy actions in the application. Changes: - Add toast state management for copy transaction ID - Remove tooltip and local state from transaction details component - Add CopyTransactionIdToast component with 2-second auto-hide - Add "Transaction ID copied" translation message 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Updated toast z-index from 200 to 1100 in design system - Made ToastContainer use ReactDOM.createPortal to render to document.body - Ensures toasts and modals share same stacking context for proper layering - Fixes issue where copy transaction ID toast appeared behind modal dialog
georgewrmarshall
force-pushed
the
contract-copy-toast
branch
from
efdd2fc to
ae17afc
Compare
georgewrmarshall
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
georgewrmarshall
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
- Remove unused setShowCopyTransactionIdToast import from component - Add showCopyTransactionIdToast to Sentry errors test snapshot - Fixes lint error (no-unused-vars, no-shadow) - Fixes e2e test: 'should capture UI application state'
georgewrmarshall
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
…oast - Create reusable CopySuccessToast component to reduce duplication - CopyAddressToast and CopyTransactionIdToast now use the shared component - Parameterized selector, messageKey, setAction, toastKey, and dataTestId - Addresses PR review comment about duplicate code
georgewrmarshall
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
| <NewSrpAddedToast /> | ||
| <InfuraSwitchToast /> | ||
| <CopyAddressToast /> | ||
| <CopyTransactionIdToast /> |
There was a problem hiding this comment.
Toast Not Shown When Copying Transaction ID From Asset Page
Medium Severity
The CopyTransactionIdToast component is only rendered when onHomeScreen is true (when on / route). However, users can copy transaction IDs from the asset page (/asset route) which also renders the transaction list. When copying from the asset page, the Redux state showCopyTransactionIdToast gets set to true, but no toast appears because ToastMaster returns null on non-home screens. The previous tooltip-based feedback worked everywhere since it used component-local state. Additionally, if the user later navigates to the home screen, the stale toast may unexpectedly appear there.
Contributor
Author
Closing Due to Architectural LimitationThis PR is being closed due to a significant architectural limitation with the current toast system that was identified during review. The ProblemThe
When copying from the asset page:
The previous tooltip-based feedback worked everywhere since it used component-local state. Why This HappensThe if (onHomeScreen) {
return (
<ToastContainer>
{/* toasts including CopyTransactionIdToast */}
</ToastContainer>
);
}This architectural pattern means any toast added to the home screen section won't appear on other routes. The SolutionThis issue cannot be properly fixed within the current toast architecture without:
Next Steps
Related Links
Thank you to Cursor Bugbot for identifying this architectural issue before it reached production! 🤖 |
georgewrmarshall
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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
This PR replaces the tooltip feedback with a toast notification when users copy a transaction ID from the transaction details view. This change makes the copy transaction ID action consistent with other copy actions in the application (like copy address) which already use the toast notification system.
What changed:
justCopied) from transaction details componentcopiedTransactionIdlocale messageCopyTransactionIdToastcomponent in toast-mastershowCopyTransactionIdToastWhy:
Changelog
CHANGELOG entry: Updated copy transaction ID feedback to use toast notification for consistency with other copy actions
Related issues
Fixes: N/A - UX improvement for consistency
Manual testing steps
Screenshots/Recordings
Before
Clicking "Copy Transaction ID" showed a tooltip with "Copied!" text that appeared above the button
After
Clicking "Copy Transaction ID" now shows a toast notification at the bottom with "Transaction ID copied" text and a success icon
after720.mov
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Low Risk
Low risk UI-only change that reuses the existing toast framework and adds a small Redux flag; main risk is minor regressions in toast display/stacking due to the portal/z-index adjustments.
Overview
Replaces the transaction details “copied” tooltip feedback with a centralized toast when users click Copy Transaction ID, aligning it with the existing copy-to-clipboard toast pattern.
Adds a new
copiedTransactionIdlocale string and ashowCopyTransactionIdToastRedux flag (action, reducer, selector), refactors copy-success toasts into a reusableCopySuccessToast, and updatesToastContainerto render via a portal with a higher toast z-index to ensure visibility.Written by Cursor Bugbot for commit 03d3879. This will update automatically on new commits. Configure here.