feat: Token Network Filter UI [Mobile] #11808

gambinish · 2024-10-16T01:49:01Z

Description

This PR introduces token network filter UI component. It lives behind a feature flag PORTFOLIO_VIEW in order to allow this to get merged while backend changes are in flight.

Integration with the multichain asset list will occur in a separate PR. We'll likely want to add additional e2e tests when that happens.

Running this branch

yarn && yarn setup
PORTFOLIO_VIEW=1 yarn watch
yarn start:ios or i from the watch process

Please ensure that this PR looks okay both with and without the feature flag running. I have introduced a horizontal scroll view because there simply was not enough screen real estate to make the network filter look okay with truncated text.

Related issues

Fixes:

Manual testing steps

Run app with feature flag
Go to main Portfolio view
Pressing the network filter should trigger the bottom sheet, allowing the user to select different filter options.

Screenshots/Recordings

Screen.Recording.2024-10-29.at.1.25.18.PM.mov

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.

…h component

…is handling

…/metamask-mobile into chore/componetize-tokens-screen

…endering

…Mask/metamask-mobile into feat/mmassets-431_network-filter-ui

github-actions · 2024-11-05T19:58:40Z

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: fcafb86
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/d35072c8-ac90-4022-8604-14b6dc87cccc

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

Tip

Check the documentation if you have any doubts on how to understand the failure on bitrise

github-actions · 2024-11-06T14:55:42Z

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: de35586
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/ac4e1252-61c1-4a0d-b737-9040c6f1f4c6

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

Tip

Check the documentation if you have any doubts on how to understand the failure on bitrise

gambinish · 2024-11-06T18:48:11Z

Just leaving a comment per @Cal-L suggestion. The failing Bitrise workflow is related to some flaky Android tests that are currently being investigated. They are unrelated to this PR and it can be reviewed.

github-actions · 2024-11-07T16:09:04Z

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 915549e
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/04d94db9-7af7-456d-8d9d-2300891aa494

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. Let's also remove the empty horizontal gutter from the pills.

app/components/UI/Tokens/index.tsx

Cal-L · 2024-11-07T20:01:35Z

app/components/UI/Tokens/styles.ts

+    },
+    controlButtonText: {
+      color: colors.text.default,
+      ...fontStyles.normal,


Use font from theme instead

Cal-L · 2024-11-07T20:07:19Z

patches/@metamask+preferences-controller+13.1.0.patch

     useTokenDetection: { persist: true, anonymous: true },
     smartTransactionsOptInStatus: { persist: true, anonymous: false },
     useTransactionSimulations: { persist: true, anonymous: true },
 +    useSafeChainsListValidation: { persist: true, anonymous: true },
 +    showMultiRpcModal: { persist: false, anonymous: false },
 +    tokenSortConfig: { persist: true, anonymous: false },
+    tokenNetworkFilter: { persist: true, anonymous: false },


Has this logic been updated in the controllers already?

Good call, it may be updated now, I'll check. I think only the tokenNetworkFilter has not yet been released in core

It looks like some of these were included in the latest release of PreferencesController. Are you okay with addressing this upgrade in a separate PR? I don't want to expand the scope of this any more than it needs to be.

I attempted an upgrade, but it appears there are a few unrelated things that also need to be updated to properly bump the version as we need it to.

github-actions · 2024-11-08T01:20:06Z

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: fd28086
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/477f6d9d-8671-4025-b052-80060f9a8296

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

sonarcloud · 2024-11-08T01:28:17Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarCloud

gambinish and others added 30 commits September 26, 2024 17:09

feat: Add sortAssets utility function

0248c74

chore: Breakup monolithic Tokens/index.tsx into smaller components

6a2e8c7

fix: Correctly handle null check for buyable footer button

7a78717

fix: Tweak boolean logic for rendering footer components

57295ee

chore: Update snapshot

d00354f

chore: Type out tokens as TokenI[]

be87f81

chore: Remove unecessary comments around import statements in Networt…

68c7b2e

…h component

Merge branch 'main' into chore/componetize-tokens-screen

a02e139

Merge branch 'main' into chore/componetize-tokens-screen

de5bbed

Merge branch 'main' into chore/componetize-tokens-screen

0fd9ad5

chore: Add unit tests to utility file, provide exports from index file

032618c

chore: Rename handleBalance to me more descriptive of what its logic …

a58f1ba

…is handling

chore: rename Networth to PortfolioBalance for clarity

1dd31e3

chore: Cleanup styles extra whitespace

16ded6a

Merge branch 'main' into chore/componetize-tokens-screen

52d3d85

fix: Update snapshot tests

dd3ffdf

Merge branch 'chore/componetize-tokens-screen' of github.com:MetaMask…

da640bc

…/metamask-mobile into chore/componetize-tokens-screen

fix: Remove unused component

ebcbcf6

Merge branch 'main' into chore/componetize-tokens-screen

31fad19

chore: Move PotfolioBalance above TabView

4a8d927

fix: Wrap PortfolioBalance and ScrollableView in fragment for token r…

a7b4c17

…endering

fix: Padding tweak below tab bar for consistency of token list

658fcf6

fix: Reorganize test suite for PortfolioBalance

18035d4

fix: Revert changes to wallet test

c570c2c

fix: Update fiatBalance text style to DisplayMD

a97128b

chore: Patch PreferencesController with tokenSortConfig

8036a0a

chore: Patch preferences controller with type

1f0ac51

feat: Build token sorting UI, patch PreferencesController

34d987c

chore: Merge main, address merge conflicts

d57558b

fix: ListHeaderComponent not needed in FlatList anymore

c5c954c

gambinish and others added 3 commits November 5, 2024 11:57

fix: Lint

68a76d6

Merge branch 'feat/mmassets-431_network-filter-ui' of github.com:Meta…

166ac02

…Mask/metamask-mobile into feat/mmassets-431_network-filter-ui

Merge branch 'main' into feat/mmassets-431_network-filter-ui

fcafb86

gambinish added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Nov 5, 2024

Merge branch 'main' into feat/mmassets-431_network-filter-ui

de35586

gambinish added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Nov 6, 2024

brianacnguyen previously approved these changes Nov 6, 2024

View reviewed changes

chore: Replace unrelated build flag

edc8c5c

gambinish dismissed brianacnguyen’s stale review via edc8c5c November 6, 2024 19:36

Merge branch 'main' into feat/mmassets-431_network-filter-ui

915549e

gambinish added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Nov 7, 2024

Cal-L reviewed Nov 7, 2024

View reviewed changes

gambinish force-pushed the feat/mmassets-431_network-filter-ui branch from 33d6d30 to 915549e Compare November 8, 2024 01:06

gambinish added 2 commits November 7, 2024 17:16

fix: Remove unused font style

ab20b3e

fix: Use true for feature flag

fd28086

gambinish added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Nov 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Token Network Filter UI [Mobile] #11808

feat: Token Network Filter UI [Mobile] #11808

gambinish commented Oct 16, 2024 •

edited

Loading

github-actions bot commented Nov 5, 2024 •

edited by metamaskbot

Loading

github-actions bot commented Nov 6, 2024 •

edited by metamaskbot

Loading

gambinish commented Nov 6, 2024

github-actions bot commented Nov 7, 2024 •

edited by metamaskbot

Loading

Cal-L left a comment

Cal-L Nov 7, 2024

Cal-L Nov 7, 2024

gambinish Nov 7, 2024

gambinish Nov 8, 2024 •

edited

Loading

github-actions bot commented Nov 8, 2024 •

edited by metamaskbot

Loading

sonarcloud bot commented Nov 8, 2024

feat: Token Network Filter UI [Mobile] #11808

Are you sure you want to change the base?

feat: Token Network Filter UI [Mobile] #11808

Conversation

gambinish commented Oct 16, 2024 • edited Loading

Description

Running this branch

Related issues

Manual testing steps

Screenshots/Recordings

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Nov 5, 2024 • edited by metamaskbot Loading

Bitrise

github-actions bot commented Nov 6, 2024 • edited by metamaskbot Loading

Bitrise

gambinish commented Nov 6, 2024

github-actions bot commented Nov 7, 2024 • edited by metamaskbot Loading

Bitrise

Cal-L left a comment

Choose a reason for hiding this comment

Cal-L Nov 7, 2024

Choose a reason for hiding this comment

Cal-L Nov 7, 2024

Choose a reason for hiding this comment

gambinish Nov 7, 2024

Choose a reason for hiding this comment

gambinish Nov 8, 2024 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Nov 8, 2024 • edited by metamaskbot Loading

Bitrise

sonarcloud bot commented Nov 8, 2024

Quality Gate passed

gambinish commented Oct 16, 2024 •

edited

Loading

github-actions bot commented Nov 5, 2024 •

edited by metamaskbot

Loading

github-actions bot commented Nov 6, 2024 •

edited by metamaskbot

Loading

github-actions bot commented Nov 7, 2024 •

edited by metamaskbot

Loading

gambinish Nov 8, 2024 •

edited

Loading

github-actions bot commented Nov 8, 2024 •

edited by metamaskbot

Loading