feat: STAKE-898: build select token component for earn products

[Matt561]

Description

This PR adds the <EarnTokenList /> component which displays a list of supported staking and lending tokens. Portions of the EarnTokenList are still hardcoded until we add data-fetching.

Network Switching

• The active network will be switched automatically if a token that isn't on the current network is selected (e.g. Base USDC)

Filtering Out Ineligible Tokens

• Staking tokens won't be displayed in the list if a user isn't eligible to stake
• Lending tokens won't be displayed in the list if a user isn't eligible to lend.

Token Display Order

• Tokens where a user has a balance will be displayed first
• Tokens where a user doesn't have a balance will still be displayed with an APR estimate.

Reason for change

This is part of the Stablecoin Lending initiative.

Related issues

• STAKE-898: [FE] Build 'Select Token' component for Earn Products

Manual testing steps

1. Add export MM_STABLECOIN_LENDING_UI_ENABLED=true to your .js.env file
2. From the home screen (asset list), click on the wallet action button (the center blue bottom in the bottom tab bar with 2 arrows)
3. Select the "Earn" action
4. Select any token
5. The network should change automatically if not already selected
6. You should be redirected to the input screen. This screen should have a title of Stake ETH or Deposit ${token.symbol} depending on your selection during step 4

Screenshots/Recordings

Designs

https://www.figma.com/design/HSYn1fXfnBvDwHvBO1ZZHb/Earn?m=auto&node-id=7079-143568

Before

stake-898-build-token-list-component-before.mov

After

stake-898-build-token-list-component-after.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.

[github-actions]

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.

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 889ccdc
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/b5b21cae-dc4a-4d4c-8307-1500a295f939

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

[Matt561]

Quality Gate failed

Failed conditions 53.6% Duplication on New Code (required ≤ 10%)

See analysis details on SonarQube Cloud

@amitabh94 @nickewansmith The code duplication is 100% in the test mock data. Is there a way to bypass this warning?

[amitabh94]

Quality Gate failed

Failed conditions 53.6% Duplication on New Code (required ≤ 10%)
See analysis details on SonarQube Cloud

@amitabh94 @nickewansmith The code duplication is 100% in the test mock data. Is there a way to bypass this warning?

How about having a utility function to generate list of tokens or having a common list for fields used in all tokens like aggregators ?

[github-actions]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 2a70144
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/5ece0c34-7eed-4c50-9c61-33633c242ff9

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

[nickewansmith]

Tests good, just a few minor comments and questions!

[nickewansmith]

Which tab bar is this referring to? I may be missing context about it, but maybe there could be a more descriptive name.

[Matt561]

I agree that this is a bit ambiguous. This is the value for other events in the WalletActions.tsx file. I'll rename it to be more descriptive.

How about WalletActionsBottomSheet?

[amitabh94]

A small high level comment but overall LGTM!

[amitabh94]

We can keep the filtering logic here for now but we can also have this whole logic on the controller side and just fetch the list of tokens that user is eligible to earn on from the Earn controller state.
All the filtering and eligibility check happens on the controller side and UI layer is responsible for only rendering the supported token list for user fetched from the state.

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 83.76068% with 19 lines in your changes missing coverage. Please review.

Project coverage is 61.88%. Comparing base (1937f9a) to head (da49fe3).
Report is 10 commits behind head on main.

Files with missing lines	Patch %	Lines
...onents/UI/Stake/components/EarnTokenList/index.tsx	81.35%	4 Missing and 7 partials ⚠️
app/components/UI/Stake/testUtils/index.ts	75.00%	2 Missing and 2 partials ⚠️
app/components/UI/Stake/utils/token/index.ts	92.59%	1 Missing and 1 partial ⚠️
...s/UI/Stake/Views/StakeInputView/StakeInputView.tsx	50.00%	0 Missing and 1 partial ⚠️
.../components/UI/Stake/Views/StakeInputView/utils.ts	80.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #13258      +/-   ##
==========================================
+ Coverage   61.58%   61.88%   +0.30%     
==========================================
  Files        1953     1975      +22     
  Lines       43442    43903     +461     
  Branches     5835     5943     +108     
==========================================
+ Hits        26753    27170     +417     
- Misses      14905    14925      +20     
- Partials     1784     1808      +24     

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

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[github-actions]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: da49fe3
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/6cc38392-b19a-48c6-8d93-a1face32eaff

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