Skip to content

feat: add popular network list modal#25160

Merged
bergeron merged 11 commits intodevelopfrom
add-popular-network-list-modal
Jun 11, 2024
Merged

feat: add popular network list modal#25160
bergeron merged 11 commits intodevelopfrom
add-popular-network-list-modal

Conversation

@salimtb
Copy link
Copy Markdown
Contributor

@salimtb salimtb commented Jun 9, 2024

Description

This PR introduces the addition of a Popular Networks list to the Add Network modal.

Open in GitHub Codespaces

Related issues

Fixes:

Manual testing steps

  1. Run yarn && ENABLE_NETWORK_UI_REDESIGN=1 yarn start
  2. Go to Settings -> Developer Options
  3. Tun on the network new toggle
  4. Go to the wallet page
  5. Click on the network button ( see the video below )
  6. you should see the list of popular network
  7. you should be able to add a network from the modal

Screenshots/Recordings

Before

before.mov

After

before-search.mov

Pre-merge author checklist

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.

@salimtb salimtb requested a review from a team as a code owner June 9, 2024 21:53
@salimtb salimtb added team-assets needs-assets-ux-review A shared label between the Assets and UX team to flag PRs ready for consolidated team review. labels Jun 9, 2024
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Jun 9, 2024

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.

@salimtb salimtb changed the title Add popular network list modal Feat: Add popular network list modal Jun 9, 2024
@salimtb salimtb changed the title Feat: Add popular network list modal feat: add popular network list modal Jun 9, 2024
@metamaskbot
Copy link
Copy Markdown
Collaborator

Builds ready [a902473]
Page Load Metrics (49 ± 5 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint6613985168
domContentLoaded8271142
load397549105
domInteractive8271142
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 0 Bytes (0.00%)
  • ui: 7.39 KiB (0.11%)
  • common: 43 Bytes (0.00%)

@codecov
Copy link
Copy Markdown

codecov bot commented Jun 10, 2024

Codecov Report

Attention: Patch coverage is 88.88889% with 5 lines in your changes missing coverage. Please review.

Project coverage is 65.61%. Comparing base (9f6803e) to head (b59b7e8).
Report is 8 commits behind head on develop.

Files Patch % Lines
...firmation-popover/network-confirmation-popover.tsx 78.57% 3 Missing ⚠️
.../multichain/network-list-menu/network-list-menu.js 87.50% 2 Missing ⚠️
Additional details and impacted files
@@             Coverage Diff             @@
##           develop   #25160      +/-   ##
===========================================
+ Coverage    65.59%   65.61%   +0.02%     
===========================================
  Files         1362     1364       +2     
  Lines        54167    54209      +42     
  Branches     14167    14181      +14     
===========================================
+ Hits         35527    35565      +38     
- Misses       18640    18644       +4     

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

@salimtb salimtb force-pushed the add-popular-network-list-modal branch 3 times, most recently from 60fd8c1 to 3dc3324 Compare June 10, 2024 10:40
@metamaskbot
Copy link
Copy Markdown
Collaborator

Builds ready [3dc3324]
Page Load Metrics (58 ± 4 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint7210689105
domContentLoaded10161221
load43735884
domInteractive10161221
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 0 Bytes (0.00%)
  • ui: 7.37 KiB (0.11%)
  • common: 94 Bytes (0.00%)

Copy link
Copy Markdown
Contributor

@darkwing darkwing left a comment

Choose a reason for hiding this comment

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

Functionally this works great!

Copy link
Copy Markdown
Contributor

@darkwing darkwing left a comment

Choose a reason for hiding this comment

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

Sorry, requested a few changes

@salimtb salimtb force-pushed the add-popular-network-list-modal branch from 0a16f10 to 7e13f90 Compare June 10, 2024 13:42
@salimtb salimtb requested a review from darkwing June 10, 2024 13:58
@metamaskbot
Copy link
Copy Markdown
Collaborator

Builds ready [7e13f90]
Page Load Metrics (46 ± 4 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint631047684
domContentLoaded8251142
load39774694
domInteractive8251142
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: -25.32 KiB (-0.73%)
  • ui: 7.39 KiB (0.11%)
  • common: 25.41 KiB (0.40%)

variant={ButtonVariant.Link}
data-testid="test-add-button"
onClick={async () => {
dispatch(toggleNetworkMenu());
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.

Let's do this call second so that it disappears in the background instead of before the requestUserApproval finishes.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

eeem i think we will have a problem if we do it that way, The issue arises because requestUserApproval is an asynchronous function. When we use await requestUserApproval(), the execution pauses, waiting for the user to either approve or reject through the confirmation modal. This means the promise stays in a pending state until the user interacts with the "add network" confirmation modal, which is triggered by requestUserApproval. However, there's a complication: our modal ends up obscuring the confirmation modal because dispatch(toggleNetworkMenu()); is called after, not before, this interaction. As a result, from a functional standpoint, we encounter a problem where the user might not be able to see or interact with the confirmation modal as intended.

@salimtb salimtb force-pushed the add-popular-network-list-modal branch from 496f89c to 6eb16ed Compare June 11, 2024 09:24
@salimtb salimtb force-pushed the add-popular-network-list-modal branch from 6eb16ed to dcf526b Compare June 11, 2024 09:24
@salimtb salimtb force-pushed the add-popular-network-list-modal branch from dcf526b to 2a850e0 Compare June 11, 2024 09:34
@metamaskbot
Copy link
Copy Markdown
Collaborator

Builds ready [2a850e0]
Page Load Metrics (121 ± 158 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint6510678115
domContentLoaded9191021
load391552121328158
domInteractive9191021
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: -25.32 KiB (-0.73%)
  • ui: 7.35 KiB (0.11%)
  • common: 25.41 KiB (0.40%)

@metamaskbot
Copy link
Copy Markdown
Collaborator

Builds ready [b59b7e8]
Page Load Metrics (46 ± 2 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint63907884
domContentLoaded9111010
load40564652
domInteractive9111010
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: -25.32 KiB (-0.73%)
  • ui: 7.2 KiB (0.10%)
  • common: 25.41 KiB (0.40%)

Copy link
Copy Markdown
Contributor

@bergeron bergeron left a comment

Choose a reason for hiding this comment

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

Worked for me locally, looks good

Comment on lines +108 to +118
const networkConfigurationChainIds = Object.values(networkConfigurations).map(
(net) => net.chainId,
);

const sortedFeaturedNetworks = FEATURED_RPCS.sort((a, b) =>
a.nickname > b.nickname ? 1 : -1,
).slice(0, FEATURED_RPCS.length);

const notExistingNetworkConfigurations = sortedFeaturedNetworks.filter(
({ chainId }) => !networkConfigurationChainIds.includes(chainId),
);
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.

maybe stuff that could be memoized with useMemo to avoid recalculating when unrelated stuff changes. For example, dragging networks to a different order will re-render this component, but shouldn't change this calculation.

@bergeron bergeron merged commit 4f7f8f0 into develop Jun 11, 2024
@bergeron bergeron deleted the add-popular-network-list-modal branch June 11, 2024 18:09
@github-actions github-actions bot locked and limited conversation to collaborators Jun 11, 2024
@metamaskbot metamaskbot added the release-12.1.0 Issue or pull request that will be included in release 12.1.0 label Jun 11, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

needs-assets-ux-review A shared label between the Assets and UX team to flag PRs ready for consolidated team review. release-12.1.0 Issue or pull request that will be included in release 12.1.0 team-assets

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants