docs: sample feature for tutorials

[NicolasMassart]

💬 Status: Request for Comment

Description

This PR is intended to provide a complete reference implementation showing how to build features in our stack.

Core Implementation

• [x] New route & page setup
• [x] React component architecture
• [ ] State management (Redux)
• [ ] API controller integration

Quality, Observability & Operations

• [ ] E2E test
• [ ] Error handling patterns
• [ ] Feature flag configuration
• [x] Unit tests
• [ ] Storybook stories
• [ ] Analytics event tracking
• [ ] Performance tracing
• [ ] Documentation (code doc, readme, ...)

Use this as a template for future feature development! Let me know if anything needs clarification.

[!NOTE] See also https://github.com/MetaMask/core/pull/5363 for the sample controllers used in this sample feature

Related issues

fixes https://github.com/MetaMask/MetaMask-planning/issues/4428

Manual testing steps

1. Go to Settings / Developer Options (only accessible when this section is available)
2. Press Navigate to Sample Feature
3. TBD

Screenshots/Recordings

Before

N/A

After

https://github.com/user-attachments/assets/2aae7a85-b2ee-4ede-aec5-3fe5d5e42612

Pre-merge author checklist

• [x] I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• [x] I've completed the PR template to the best of my ability
• [x] I’ve included tests if applicable
• [x] I’ve documented my code using JSDoc format if applicable
• [x] 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[bot]]

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.

[Cal-L]

I may be missing context on the purpose of the chosen sample feature UI - I would recommend that we simplify the feature and keep the functionality as isolated as possible. A few reasons for this:

• Keeping this as barebones as possible and keeping the logic completely isolated from production code will reduce the upkeep and lessen the chances of the sample breaking
• More components & more hooks != more help, I would argue to say less is more here and less code would also reduce the noise

[codecov-commenter]

Codecov Report

:x: Patch coverage is 94.30380% with 9 lines in your changes missing coverage. Please review. :white_check_mark: Project coverage is 76.01%. Comparing base (ec8ebc7) to head (603bbdb).

Files with missing lines	Patch %	Lines
...components/views/SamplePetNames/SamplePetNames.tsx	66.66%	2 Missing and 1 partial :warning:
...onents/views/SamplePetNames/SamplePetNamesForm.tsx	89.47%	2 Missing :warning:
...pleFeature/selectors/sampleFeatureCounter/index.ts	60.00%	2 Missing :warning:
app/components/Nav/Main/MainNavigator.js	66.66%	1 Missing :warning:
...ponents/hooks/useSampleCounter/useSampleCounter.ts	91.66%	0 Missing and 1 partial :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #14158      +/-   ##
==========================================
+ Coverage   75.98%   76.01%   +0.03%     
==========================================
  Files        3197     3221      +24     
  Lines       75368    75526     +158     
  Branches    13383    13395      +12     
==========================================
+ Hits        57270    57414     +144     
- Misses      14382    14394      +12     
- Partials     3716     3718       +2     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[socket-security[bot]]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/​@​metamask/​sample-controllers@​0.1.0

View full report

[github-actions[bot]]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: b58b16ed789c33adb981641db5f1551543281d27 Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/c4879112-5a64-4706-ace0-f48d4988f70a

[!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

[cursor[bot]]

🚨 BugBot couldn't run

BugBot is experiencing high demand right now. Try again in a few minutes by commenting "bugbot run" (requestId: serverGenReqId_894ac2ce-a033-40a6-9213-d82ab70f5d80).

[github-actions[bot]]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: ef3c8aa4aeb411cc3dfde68cc78bf0646898e8f3 Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/26b54b6c-d453-4124-80dd-b2e68225f65d

[!NOTE]

• You can rerun any failed steps by opening the Bitrise build, tapping Rebuild on the upper right then Rebuild unsuccessful Workflows
• 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

[sonarqubecloud[bot]]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[Cal-L]

I don't understand why we're adding a bunch of dead code to actual source code of the app. Wouldn't it be better to improve the documentation instead?

I'm also on the same boat that this shouldn't exist as dead code and can be all placed in documentation instead. Will ask around to get more context on the decision around this and will follow up 👍

[NicolasMassart]

As I answered via Slack in July:

The reason is that having the sample feature in the main codebase is the only way to have it up to date and working. This will force refactoring of the sample whenever we make structural changes to the app. We all know and experienced outdated doc and tutorials becasue samples are never reworked by devs when they change the app. Here it's completely isolated and never shipped in prod, but it's not dead codce (dead code is commented or never run code), it's just only available in local dev build for devs to use as an example. It means that it compiles and matches our best code patterns. If, for any reason we have an issue with this, I ensure you this will be very easy to remove from the codebase. Really. It's desiged to be really isolated.

[github-actions[bot]]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: c9f6f670a846c74a27583411cb09c9862d3e6a36 Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/242adccf-d764-4300-a515-583d739a5000

[!NOTE]

• You can rerun any failed steps by opening the Bitrise build, tapping Rebuild on the upper right then Rebuild unsuccessful Workflows
• 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[bot]]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 6dd1e2890ea0e7cb6d13b41673f1d52b932acd6b Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/e44d89b1-87be-4282-a4f6-6773010b58d0

[!NOTE]

• You can rerun any failed steps by opening the Bitrise build, tapping Rebuild on the upper right then Rebuild unsuccessful Workflows
• 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[bot]]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 603bbdba3384f6983e2be8353ef857286d09e00d Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/857de206-a879-4466-bfd4-e72352c1df3f

[!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

[sonarqubecloud[bot]]

Quality Gate passed

Issues
21 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[socket-security[bot]]

All alerts resolved. Learn more about Socket for GitHub.

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report

[sonarqubecloud[bot]]

Quality Gate passed

Issues
0 New issues
24 Accepted issues

Measures
0 Security Hotspots
94.0% Coverage on New Code
0.2% Duplication on New Code

See analysis details on SonarQube Cloud