Skip to content

feat: UX MULTICHAIN: Added toast in the connections flow components#23624

Merged
NidhiKJha merged 5 commits intodevelopfrom
feat-planning-2281
Mar 26, 2024
Merged

feat: UX MULTICHAIN: Added toast in the connections flow components#23624
NidhiKJha merged 5 commits intodevelopfrom
feat-planning-2281

Conversation

@NidhiKJha
Copy link
Copy Markdown
Member

This PR is to add toast in the following scenarios:

  1. Show Toast when an account is disconnected
  2. Show a toast when all accounts are disconnected
  3. Show Toast when a new account is connected

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/2281

Manual testing steps

  1. Run extension with Multichain flag
  2. Connect with Dapp
  3. Go the connections page
  4. Connect a new account by connect more accounts flow, toast should up when you add new account
  5. Disconnect all accounts, toast should show up
  6. Disconnect a single account, toast should show up

Screenshots/Recordings

Before

NA

After

When a new account is connected

Screen.Recording.2024-03-21.at.4.59.06.PM.mov

When a single account is disconnected

Screen.Recording.2024-03-21.at.4.59.33.PM.mov

When all accounts are disconnected

Screen.Recording.2024-03-21.at.4.59.57.PM.mov

Pre-merge author checklist

  • I’ve followed MetaMask Coding Standards.
  • I've clearly explained what problem this PR is solving and how it is solved.
  • I've linked related issues
  • I've included manual testing steps
  • I've included screenshots/recordings if applicable
  • I’ve included tests if applicable
  • I’ve documented my code using JSDoc format if applicable
  • I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.
  • I’ve properly set the pull request status:
    • In case it's not yet "ready for review", I've set it to "draft".
    • In case it's "ready for review", I've changed it from "draft" to "non-draft".

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

@NidhiKJha NidhiKJha requested a review from a team as a code owner March 21, 2024 11:30
@NidhiKJha NidhiKJha added team-core-extension-ux Core Extension UX team needs-assets-ux-review A shared label between the Assets and UX team to flag PRs ready for consolidated team review. labels Mar 21, 2024
@metamaskbot metamaskbot added the INVALID-PR-TEMPLATE PR's body doesn't match template label Mar 21, 2024
@metamaskbot
Copy link
Copy Markdown
Collaborator

Builds ready [ba59b43]
Page Load Metrics (1487 ± 671 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint853531736531
domContentLoaded128038178
load66360614871398671
domInteractive128038178
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 0 Bytes (0.00%)
  • ui: 1.38 KiB (0.02%)
  • common: 312 Bytes (0.01%)

@codecov
Copy link
Copy Markdown

codecov bot commented Mar 22, 2024

Codecov Report

Attention: Patch coverage is 46.15385% with 14 lines in your changes are missing coverage. Please review.

Project coverage is 69.20%. Comparing base (17abe58) to head (e5cc7b7).

Files Patch % Lines
...nents/multichain/pages/connections/connections.tsx 50.00% 11 Missing ⚠️
...ect-accounts-modal/connect-accounts-modal-list.tsx 0.00% 1 Missing ⚠️
.../connect-accounts-modal/connect-accounts-modal.tsx 50.00% 1 Missing ⚠️
...onnected-accounts-menu/connected-accounts-menu.tsx 0.00% 1 Missing ⚠️
Additional details and impacted files
@@             Coverage Diff             @@
##           develop   #23624      +/-   ##
===========================================
- Coverage    69.21%   69.20%   -0.01%     
===========================================
  Files         1160     1160              
  Lines        44158    44177      +19     
  Branches     11803    11809       +6     
===========================================
+ Hits         30562    30570       +8     
- Misses       13596    13607      +11     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

/**
* Function to set account name to show disconnect toast when an account is disconnected
*/
onActionClick: PropTypes.func,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be isRequired if we don't have a default value.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of assuming onActionClick is there, and passing () => null args, can we do:

onActionClick?.()

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, updated here 19e5b4d

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I updated toast to use actionClick as optional prop b9b247b

disableAccountSwitcher: boolean;
onClose: () => void;
closeMenu: () => void;
onActionClick: (mesg: string) => void;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Total nit but can this be message? Abbreviations like this aren't necessary.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated here 19e5b4d

@metamaskbot
Copy link
Copy Markdown
Collaborator

Builds ready [b9b247b]
Page Load Metrics (1916 ± 647 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint973721897134
domContentLoaded11118433014
load75342319161348647
domInteractive11118433014
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 0 Bytes (0.00%)
  • ui: 1.27 KiB (0.02%)
  • common: 312 Bytes (0.01%)

darkwing
darkwing previously approved these changes Mar 26, 2024
vthomas13
vthomas13 previously approved these changes Mar 26, 2024
@NidhiKJha NidhiKJha dismissed stale reviews from vthomas13 and darkwing via e5cc7b7 March 26, 2024 17:50
@NidhiKJha NidhiKJha force-pushed the feat-planning-2281 branch from b9b247b to e5cc7b7 Compare March 26, 2024 17:50
@metamaskbot
Copy link
Copy Markdown
Collaborator

Builds ready [e5cc7b7]
Page Load Metrics (526 ± 423 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint703971327737
domContentLoaded126827147
load582495526880423
domInteractive126827147
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 0 Bytes (0.00%)
  • ui: 1.27 KiB (0.02%)
  • common: 312 Bytes (0.01%)

@NidhiKJha NidhiKJha merged commit c6a8f0d into develop Mar 26, 2024
@NidhiKJha NidhiKJha deleted the feat-planning-2281 branch March 26, 2024 18:18
@github-actions github-actions bot locked and limited conversation to collaborators Mar 26, 2024
@metamaskbot metamaskbot added the release-11.15.0 Issue or pull request that will be included in release 11.15.0 label Mar 26, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

INVALID-PR-TEMPLATE PR's body doesn't match template needs-assets-ux-review A shared label between the Assets and UX team to flag PRs ready for consolidated team review. release-11.15.0 Issue or pull request that will be included in release 11.15.0 team-core-extension-ux Core Extension UX team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants