feat: MMPD-1528 - View recents and favorites in browser URL modal #12938

ziad-saab · 2025-01-10T18:33:17Z

Description

https://consensyssoftware.atlassian.net/browse/MMPD-1528

Change the behaviour of the browser url autocomplete:

add scrolling
when nothing is typed, show recents (max 5) and favorites
when user starts typing, auto complete from dapp list + recents + favorites
adjust styling to match new figma styles

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MMPD-1528

Manual testing steps

Go to the in-app browser
Press the URL bar
Observe that the currently typed URL is available as a result, just like in the current version
Clear the input and observe that you see your (up to) 5 latest recents, + favorites, and that you can scroll
Start typing, and observe that you get up to 3 lists: Sites, Recents, and Favorites. The elements shown are matched from what you're typing

Screenshots/Recordings

Before

After

Pre-merge author checklist

I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
I've completed the PR template to the best of my ability
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.

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.

- when nothing is typed, show recents (max 5) and favorites - when user starts typing, show results from the dapp list

github-actions · 2025-01-10T18:33:30Z

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.

…mplete

github-actions · 2025-01-13T21:57:18Z

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 4af548d
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/258a6bb8-0746-4cdf-aa7b-051017c7d197

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

…mplete

github-actions · 2025-01-14T20:24:38Z

Bitrise

🔄🔄🔄 pr_smoke_e2e_pipeline started on Bitrise...🔄🔄🔄

Commit hash: bb0fae8
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/be044e8e-a84b-4490-8fdd-419be90fa4ae

Note

This comment will auto-update when build completes
You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

github-actions · 2025-01-14T20:35:43Z

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 01270c6
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/82b4defb-617b-46a3-8d76-0fb8bbc59ffc

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

…mplete

github-actions · 2025-01-15T16:36:19Z

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: f0b234e
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/78b61287-17b4-4af6-a54a-540300ffacb5

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Cal-L

Left some comments

app/components/UI/UrlAutocomplete/index.js

Cal-L · 2025-01-15T17:23:38Z

app/components/UI/UrlAutocomplete/index.js

+    category: {
+      fontSize: 16,
+      color: colors.text.default,
+      ...fontStyles.bold,


Use typography from theme based on what font style Figma is showing. For example, reference Input.styles.ts

@Cal-L need more details on this one please

app/components/UI/UrlAutocomplete/index.js

Cal-L · 2025-01-15T17:34:39Z

app/components/Views/BrowserUrlModal/styles.ts

+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: colors.border.default,
+      height: Device.isAndroid() ? 50 : 40,


Is it necessary to have different heights for the platforms or can we just use one value?

Cal-L

Heads up that the many use of array methods in the UrlAutocomplete may potentially cause performance issues. It seems that there could be a more optimal way to store the values to reduce the amount of transformations. Happy to pair on this

…mplete

sonarqubecloud · 2025-01-15T20:02:11Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
86.8% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Cal-L

Left a comment

Cal-L · 2025-01-15T20:44:01Z

app/components/UI/UrlAutocomplete/index.js

@@ -268,24 +159,18 @@ export class UrlAutocomplete extends PureComponent {
      );
    }

-    const categoriesWithResults = ORDERED_CATEGORIES.filter(category => resultsByCategory[category]?.length > 0);
-
    return (
      <ScrollView style={styles.wrapper} contentContainerStyle={styles.contentContainer}>


This should be updated to be a Flatlist instead of a Scrollview since it abstracts the need to map over the results.

ziad-saab added 2 commits January 10, 2025 13:31

feat: change browser url modal behavior

81aad30

- when nothing is typed, show recents (max 5) and favorites - when user starts typing, show results from the dapp list

Merge branch 'main' into zs/new-browser-autocomplete

34651ad

ziad-saab added needs-qa Any New Features that needs a full manual QA prior to being added to a release. team-portfolio labels Jan 10, 2025

ziad-saab added 6 commits January 13, 2025 11:28

update snapshots

409a2fa

Autocomplete on recents and favorites

ed43635

limit recents to 5 results

1d31579

Merge remote-tracking branch 'origin/main' into zs/new-browser-autoco…

3c746e4

…mplete

re-set search wrapper new background color

e6f72f2

adjust size of no-results autocomplete container

0e7e895

ziad-saab marked this pull request as ready for review January 13, 2025 20:30

ziad-saab requested a review from a team as a code owner January 13, 2025 20:30

update snapshots

5373f1c

ziad-saab added No E2E Smoke Needed If the PR does not need E2E smoke test run QA Passed A successful QA run through has been done and removed needs-qa Any New Features that needs a full manual QA prior to being added to a release. labels Jan 13, 2025

linting

b72d983

ziad-saab marked this pull request as draft January 13, 2025 20:56

ziad-saab added 2 commits January 13, 2025 16:37

increase test coverage of UrlAutocomplete

eca4984

linting

0e5db41

ziad-saab marked this pull request as ready for review January 13, 2025 21:49

Merge branch 'main' into zs/new-browser-autocomplete

4af548d

ziad-saab added Run Smoke E2E Triggers smoke e2e on Bitrise and removed No E2E Smoke Needed If the PR does not need E2E smoke test run labels Jan 13, 2025

ziad-saab added 3 commits January 14, 2025 13:04

Merge remote-tracking branch 'origin/main' into zs/new-browser-autoco…

50d56d2

…mplete

Add trash icon to remove favorites

f56623f

Merge remote-tracking branch 'origin/main' into zs/new-browser-autoco…

bb0fae8

…mplete

ziad-saab removed the Run Smoke E2E Triggers smoke e2e on Bitrise label Jan 14, 2025

ziad-saab added the Run Smoke E2E Triggers smoke e2e on Bitrise label Jan 14, 2025

remove duplicate import

01270c6

ziad-saab added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Jan 14, 2025

ziad-saab enabled auto-merge January 14, 2025 21:06

ziad-saab added 3 commits January 15, 2025 11:22

Merge remote-tracking branch 'origin/main' into zs/new-browser-autoco…

66bb113

…mplete

remove commented code

63ae029

Merge branch 'main' into zs/new-browser-autocomplete

f0b234e

ziad-saab added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Jan 15, 2025

Cal-L reviewed Jan 15, 2025

View reviewed changes

ziad-saab added 2 commits January 15, 2025 14:49

address PR feedback

4c2af83

Merge remote-tracking branch 'origin/main' into zs/new-browser-autoco…

d1710d0

…mplete

ziad-saab requested a review from Cal-L January 15, 2025 20:36

Cal-L reviewed Jan 15, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: MMPD-1528 - View recents and favorites in browser URL modal #12938

feat: MMPD-1528 - View recents and favorites in browser URL modal #12938

ziad-saab commented Jan 10, 2025 •

edited

Loading

github-actions bot commented Jan 10, 2025

github-actions bot commented Jan 13, 2025 •

edited by metamaskbot

Loading

github-actions bot commented Jan 14, 2025

github-actions bot commented Jan 14, 2025 •

edited by metamaskbot

Loading

github-actions bot commented Jan 15, 2025 •

edited by metamaskbot

Loading

Cal-L left a comment

Cal-L Jan 15, 2025

ziad-saab Jan 15, 2025

Cal-L Jan 15, 2025

Cal-L left a comment

sonarqubecloud bot commented Jan 15, 2025

Cal-L left a comment

Cal-L Jan 15, 2025

feat: MMPD-1528 - View recents and favorites in browser URL modal #12938

Are you sure you want to change the base?

feat: MMPD-1528 - View recents and favorites in browser URL modal #12938

Conversation

ziad-saab commented Jan 10, 2025 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Jan 10, 2025

github-actions bot commented Jan 13, 2025 • edited by metamaskbot Loading

Bitrise

github-actions bot commented Jan 14, 2025

Bitrise

github-actions bot commented Jan 14, 2025 • edited by metamaskbot Loading

Bitrise

github-actions bot commented Jan 15, 2025 • edited by metamaskbot Loading

Bitrise

Cal-L left a comment

Choose a reason for hiding this comment

Cal-L Jan 15, 2025

Choose a reason for hiding this comment

ziad-saab Jan 15, 2025

Choose a reason for hiding this comment

Cal-L Jan 15, 2025

Choose a reason for hiding this comment

Cal-L left a comment

Choose a reason for hiding this comment

sonarqubecloud bot commented Jan 15, 2025

Quality Gate passed

Cal-L left a comment

Choose a reason for hiding this comment

Cal-L Jan 15, 2025

Choose a reason for hiding this comment

ziad-saab commented Jan 10, 2025 •

edited

Loading

github-actions bot commented Jan 13, 2025 •

edited by metamaskbot

Loading

github-actions bot commented Jan 14, 2025 •

edited by metamaskbot

Loading

github-actions bot commented Jan 15, 2025 •

edited by metamaskbot

Loading