feat: stx optInModalMinVersion feature flag - UI part #24727

dbrans · 2024-05-22T21:20:28Z

Note

This PR is intended to be cherry-picked into v11.16.x

Description

The smartTransactions.optInModalMinVersion feature flag on the swaps api is a string of the form "major.minor.patch". The stx opt-in modal is blocked unless optInModalMinVersion is:

present and
valid and
the extension version >= optInModalMinVersion.

To support this new feature flag, this PR also makes the following material changes:

revert feat: disable stx opt-in modal #24715
ui/index.js loads the swaps feature flags using a thunk, which we do not await.

The reason we have been loading swaps feature flags in the ui - and not the background - is unclear. I will ask @dan437 when he is back.

Related issues

Fixes:

Manual testing steps

overrode the swaps api response in chrome devtools with different optInModalMinVersion values.
Confirmed we either show the What's New popup or the stx opt-in modal as expected, based on the value of optInModalMinVersion.

Screenshots/Recordings

Before

After

Pre-merge author checklist

I’ve followed MetaMask 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.

This reverts commit 20e51e6.

github-actions · 2024-05-22T21:20:41Z

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.

@keithchew

## **Description** Bump transaction controller to get a couple fixes in. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/24701?quickstart=1) ## **Related issues** Fixes: #24586 Fixes: #24183 Related: #24359 @keithchew to verify ## **Manual testing steps** 1. Go to this page... 2. 3. ## **Screenshots/Recordings**  ### **Before**  ### **After**  ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] 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](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). 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.

legobeat

This failing unit test looks related:

$ yarn test:coverage:jest

[...] 

Summary of all failing tests
FAIL ui/pages/routes/routes.component.test.js (25.163 s)
  ● Routes Component › render during send flow › should render when send transaction is not active

    TypeError: Cannot read properties of undefined (reading 'isFeatureFlagLoaded')

      249 |
      250 | export const getIsFeatureFlagLoaded = (state) =>
    > 251 |   state.swaps.isFeatureFlagLoaded;
          |               ^
      252 |
      253 | export const getSwapsSTXLoading = (state) => state.swaps.swapsSTXLoading;
      254 |

      at isFeatureFlagLoaded (ui/ducks/swaps/swaps.js:251:15)
      at Function.mapStateToProps [as mapToProps] (ui/pages/home/home.container.js:155:27)
      at mapToPropsProxy (node_modules/react-redux/lib/connect/wrapMapToProps.js:53:92)
      at Function.detectFactoryAndVerify (node_modules/react-redux/lib/connect/wrapMapToProps.js:62:19)
      at mapToPropsProxy (node_modules/react-redux/lib/connect/wrapMapToProps.js:53:46)
      at handleFirstCall (node_modules/react-redux/lib/connect/selectorFactory.js:34:18)
      at pureFinalPropsSelector (node_modules/react-redux/lib/connect/selectorFactory.js:75:81)
      at node_modules/react-redux/lib/components/connectAdvanced.js:333:16
      at mountMemo (node_modules/react-dom/cjs/react-dom.development.js:16833:19)
      at Object.useMemo (node_modules/react-dom/cjs/react-dom.development.js:17152:16)
      at useMemo (node_modules/react/cjs/react.development.js:1521:21)
      at ConnectFunction (node_modules/react-redux/lib/components/connectAdvanced.js:318:30)
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16260:18)
      at updateFunctionComponent (node_modules/react-dom/cjs/react-dom.development.js:18347:20)
      at updateSimpleMemoComponent (node_modules/react-dom/cjs/react-dom.development.js:18285:10)
      at updateMemoComponent (node_modules/react-dom/cjs/react-dom.development.js:18188:14)
      at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:20248:16)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:336:14)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:385:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:440:31)
      at beginWork$$1 (node_modules/react-dom/cjs/react-dom.development.js:25780:7)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:24698:12)
      at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:24671:22)
      at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:24270:11)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:23698:7)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:27103:3)
      at node_modules/react-dom/cjs/react-dom.development.js:27528:7
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:24433:12)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:27527:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:27608:10)
      at node_modules/@testing-library/react/dist/pure.js:100:25
      at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:24386:12)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1092:14)
      at render (node_modules/@testing-library/react/dist/pure.js:96:26)
      at renderWithProvider (test/jest/rendering.js:61:16)
      at ui/pages/routes/routes.component.test.js:79:45
      at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:24386:12)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1092:14)
      at render (ui/pages/routes/routes.component.test.js:78:12)
      at Object.render (ui/pages/routes/routes.component.test.js:180:37)


Test Suites: 1 failed, 92 passed, 93 total
Tests:       1 failed, 551 passed, 552 total
Snapshots:   62 passed, 62 total
Time:        107.588 s
Ran all test suites.

…-flag

metamaskbot · 2024-05-23T18:29:50Z

Builds ready [a99f9db]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8
- content-script: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1074 ± 584 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	60	220	115	45	22
		domContentLoaded	9	80	21	17	8
		load	49	2905	1074	1217	584
		domInteractive	9	80	20	17	8

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 0 Bytes (0.00%)
ui: 170 Bytes (0.00%)
common: 1.69 KiB (0.03%)

codecov · 2024-05-23T20:54:12Z

Codecov Report

Attention: Patch coverage is 82.50000% with 7 lines in your changes are missing coverage. Please review.

Project coverage is 66.01%. Comparing base (38199bb) to head (b7810eb).
Report is 3 commits behind head on develop.

Files	Patch %	Lines
shared/modules/feature-flags.ts	50.00%	3 Missing ⚠️
ui/index.js	0.00%	2 Missing ⚠️
shared/lib/semversion.ts	92.31%	1 Missing ⚠️
shared/modules/selectors/feature-flags.ts	66.67%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #24727      +/-   ##
===========================================
+ Coverage    66.01%   66.01%   +0.01%     
===========================================
  Files         1348     1349       +1     
  Lines        52499    52535      +36     
  Branches     13493    13500       +7     
===========================================
+ Hits         34652    34680      +28     
- Misses       17847    17855       +8

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

danjm · 2024-06-27T08:02:39Z

Closing for now, we can re-open if we again decide we want something like this

dbrans added 6 commits May 22, 2024 15:42

added semversion utilities

301c66d

Revert "feat: disable stx opt-in modal (#24715)"

c29d8ac

This reverts commit 20e51e6.

refractor feature–flags.ts

7ba056d

getMeetsMinimumVersionToShowOptInModal

ac716d6

load feature flags in home component

a621e35

do not show stx opt-in modal unless isFeatureFlagLoaded

ed35836

dbrans added the team-transactions Transactions team label May 22, 2024

dbrans marked this pull request as ready for review May 22, 2024 21:21

dbrans requested a review from a team as a code owner May 22, 2024 21:21

dbrans added 2 commits May 22, 2024 17:54

lint

ca69e06

legobeat requested changes May 23, 2024

View reviewed changes

dbrans marked this pull request as draft May 23, 2024 00:56

dbrans added 3 commits May 23, 2024 13:34

fetchFeatureFlagsThunk approach

7a71079

Merge remote-tracking branch 'origin/develop' into dbrans/smart-modal…

a84d9d9

…-flag

fix import

a99f9db

dbrans marked this pull request as ready for review May 23, 2024 17:36

dbrans requested review from darkwing, Gudahtt and NidhiKJha May 23, 2024 17:48

start fetch feature flags sooner

b7810eb

danjm closed this Jun 27, 2024

github-actions bot locked and limited conversation to collaborators Jun 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: stx optInModalMinVersion feature flag - UI part #24727

feat: stx optInModalMinVersion feature flag - UI part #24727

dbrans commented May 22, 2024 •

edited

Loading

github-actions bot commented May 22, 2024

legobeat left a comment

metamaskbot commented May 23, 2024

codecov bot commented May 23, 2024

danjm commented Jun 27, 2024

feat: stx optInModalMinVersion feature flag - UI part #24727

feat: stx optInModalMinVersion feature flag - UI part #24727

Conversation

dbrans commented May 22, 2024 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented May 22, 2024

legobeat left a comment

Choose a reason for hiding this comment

metamaskbot commented May 23, 2024

codecov bot commented May 23, 2024

Codecov Report

danjm commented Jun 27, 2024

dbrans commented May 22, 2024 •

edited

Loading