From 2770746b9803a711077bbd82501e6702275fc0c7 Mon Sep 17 00:00:00 2001 From: Cal-L Date: Wed, 21 Aug 2024 17:44:50 -0700 Subject: [PATCH 1/6] Add redux debugger package --- ios/Podfile.lock | 6 ++++++ package.json | 4 +++- yarn.lock | 20 +++++++++++++++++++- 3 files changed, 28 insertions(+), 2 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 33b5f22dec7..3042b958f06 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -532,6 +532,8 @@ PODS: - React-Core - react-native-cookies (6.2.1): - React-Core + - react-native-flipper (0.263.0): + - React-Core - react-native-get-random-values (1.8.0): - React-Core - react-native-gzip (1.1.0): @@ -848,6 +850,7 @@ DEPENDENCIES: - react-native-camera (from `../node_modules/react-native-camera`) - "react-native-compat (from `../node_modules/@walletconnect/react-native-compat`)" - "react-native-cookies (from `../node_modules/@react-native-cookies/cookies`)" + - react-native-flipper (from `../node_modules/react-native-flipper`) - react-native-get-random-values (from `../node_modules/react-native-get-random-values`) - react-native-gzip (from `../node_modules/react-native-gzip`) - react-native-in-app-review (from `../node_modules/react-native-in-app-review`) @@ -1021,6 +1024,8 @@ EXTERNAL SOURCES: :path: "../node_modules/@walletconnect/react-native-compat" react-native-cookies: :path: "../node_modules/@react-native-cookies/cookies" + react-native-flipper: + :path: "../node_modules/react-native-flipper" react-native-get-random-values: :path: "../node_modules/react-native-get-random-values" react-native-gzip: @@ -1216,6 +1221,7 @@ SPEC CHECKSUMS: react-native-camera: b8cc03e2feec0c04403d0998e37cf519d8fd4c6f react-native-compat: 24c27f0076c5d094ac54a7c803aa5fd4f582444d react-native-cookies: f54fcded06bb0cda05c11d86788020b43528a26c + react-native-flipper: 6cfd5991388121f7f96fc5171b93380f97ebb3c6 react-native-get-random-values: a6ea6a8a65dc93e96e24a11105b1a9c8cfe1d72a react-native-gzip: c5e87ee9e359f02350e3a2ee52eb35eddc398868 react-native-in-app-review: 23f4f5b9fcd94339dd5d93c6230557f9c67c7dda diff --git a/package.json b/package.json index 72d8ff16416..28388f4c028 100644 --- a/package.json +++ b/package.json @@ -492,7 +492,9 @@ "webpack-cli": "^5.1.4", "xhr2": "^0.2.1", "xml2js": "^0.5.0", - "yarn-deduplicate": "^6.0.2" + "yarn-deduplicate": "^6.0.2", + "redux-flipper": "^2.0.3", + "react-native-flipper": "^0.263.0" }, "config": { "react-native-storybook-loader": { diff --git a/yarn.lock b/yarn.lock index 1b80a8b3077..97a0e1ee9fc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15177,7 +15177,7 @@ csv-writer@^1.6.0: resolved "https://registry.yarnpkg.com/csv-writer/-/csv-writer-1.6.0.tgz#d0cea44b6b4d7d3baa2ecc6f3f7209233514bcf9" integrity sha512-NOx7YDFWEsM/fTRAJjRpPp8t+MKRVvniAg9wQlUKx20MFrPs73WLJhFf5iteqrxNYnsy924K3Iroh3yNHeYd2g== -cycle@1.0.x: +cycle@1.0.x, cycle@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/cycle/-/cycle-1.0.3.tgz#21e80b2be8580f98b468f379430662b046c34ad2" integrity sha1-IegLK+hYD5i0aPN5QwZisEbDStI= @@ -15332,6 +15332,11 @@ dayjs@^1.10.5, dayjs@^1.8.15: resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.9.tgz#9ca491933fadd0a60a2c19f6c237c03517d71d1a" integrity sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA== +dayjs@^1.8.29: + version "1.11.13" + resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.13.tgz#92430b0139055c3ebb60150aa13e860a4b5a366c" + integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg== + debug@2.6.9, debug@^2.2.0, debug@^2.6.9: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" @@ -25555,6 +25560,11 @@ react-native-flash-message@0.1.11: prop-types "^15.7.2" react-native-iphone-x-helper "^1.2.0" +react-native-flipper@^0.263.0: + version "0.263.0" + resolved "https://registry.yarnpkg.com/react-native-flipper/-/react-native-flipper-0.263.0.tgz#c92ae71b04011470deb244ad48f58f76776d7e4a" + integrity sha512-eGQjGYHEJ3FQdcCijqziK9NTOaxZS7fyWKMpPbdqGgWMPDh/wUntmT/1VG1QxZgEJFInhCTge2LPIvjhn8poyg== + react-native-fs@^2.20.0: version "2.20.0" resolved "https://registry.yarnpkg.com/react-native-fs/-/react-native-fs-2.20.0.tgz#05a9362b473bfc0910772c0acbb73a78dbc810f6" @@ -26395,6 +26405,14 @@ redis-parser@^3.0.0: dependencies: redis-errors "^1.0.0" +redux-flipper@^2.0.3: + version "2.0.3" + resolved "https://registry.yarnpkg.com/redux-flipper/-/redux-flipper-2.0.3.tgz#5373af20bd0efd91b5a1f9efa92c3338780f5732" + integrity sha512-JpNEZnBnBE9kGiZZrmzi23cFD9gjRUFoJE6nX0MPfmMVeIqfvkJWMATnbqRsTn8xwBXvWtOk+7Qbs8u4RZZcVw== + dependencies: + cycle "^1.0.3" + dayjs "^1.8.29" + redux-mock-store@1.5.4: version "1.5.4" resolved "https://registry.yarnpkg.com/redux-mock-store/-/redux-mock-store-1.5.4.tgz#90d02495fd918ddbaa96b83aef626287c9ab5872" From 93bb7539055adab3a6cc5393b3f2ae1037c3c9aa Mon Sep 17 00:00:00 2001 From: Cal-L Date: Wed, 21 Aug 2024 17:45:12 -0700 Subject: [PATCH 2/6] Add redux debugger as middleware --- app/store/index.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/app/store/index.ts b/app/store/index.ts index a109632138d..dbbd90cbe5c 100644 --- a/app/store/index.ts +++ b/app/store/index.ts @@ -34,9 +34,19 @@ const createStoreAndPersistor = async () => { // Create the store and apply middlewares. In E2E tests, an optional initialState // from fixtures can be provided to preload the store; otherwise, it remains undefined. + const middlewares = [sagaMiddleware, thunk]; + + if (__DEV__) { + // Add redux flipper middleware for debugging Redux with Flipper + // Flipper's client side plugin is https://github.com/jk-gan/flipper-plugin-redux-debugger, which needs to be added as a plugin + // flipper-plugin-redux-debugger is named redux-debugger in Flipper's plugin list + const createReduxFlipperDebugger = require('redux-flipper').default; + middlewares.push(createReduxFlipperDebugger()); + } + store = configureStore({ reducer: pReducer, - middleware: [sagaMiddleware, thunk], + middleware: middlewares, preloadedState: initialState, }); From 65e297cf8f67e3e6f5ab0cf850e2429af7fa5f94 Mon Sep 17 00:00:00 2001 From: Cal-L Date: Wed, 21 Aug 2024 17:45:28 -0700 Subject: [PATCH 3/6] Update debugger docs with redux debugging --- docs/readme/debugging.md | 58 +++++++++++++++++++++++++--------------- 1 file changed, 36 insertions(+), 22 deletions(-) diff --git a/docs/readme/debugging.md b/docs/readme/debugging.md index d4a0af062bb..97a70971032 100644 --- a/docs/readme/debugging.md +++ b/docs/readme/debugging.md @@ -1,45 +1,59 @@ -### Debugging +# Debugging -First, make sure you have the following running: +The following tools are used for debugging the MetaMask mobile app: -- `yarn watch` -- Your Android emulator or iOS simulator -- `yarn start:android` or `yarn start:ios` +- [Flipper](https://fbflipper.com/) - For general debugging on iOS and Android + - [Redux Debugger](https://github.com/jk-gan/flipper-plugin-redux-debugger) - A plugin in Flipper for debugging Redux +- [Safari Browser](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Debugging.md#debugging-webview-contents) - For debugging the in-app browser for the mobile app +- [Google Chrome](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Debugging.md#debugging-webview-contents) - For debugging the in-app browser for the mobile app -Next, install the [Flipper](https://fbflipper.com/) desktop app (verified working with v0.127.0) +## Flipper Setup -- Once Flipper is installed, configure your system as follows: - - Install react-devtools: `npm i -g react-devtools@4.22.1` - - Update Android SDK location settings by accessing Flipper's settings via the `Gear Icon` -> `Settings` - - Example SDK path: `/Users//Library/Android/sdk` +The prerequisite for debugging is to ensure that the mobile app is up and running: + +- `yarn watch` - Start the metro bundler, which serves the JS bundle to the native app +- `yarn start:android` or `yarn start:ios`, which builds the app and installs it in the simulator + +Install and run [Flipper](https://fbflipper.com/docs/getting-started/) using `npx flipper-server` (verified working with v0.263.0) + +- If there are warnings on the `Troubleshoot` tab, follow the `Setup Doctor` to resolve all of the checks Finally, check that the debugger is working: -- Open your emulator or simulator alongside the Flipper app -- Flipper should auto-detect the device and the application to debug -- You should now be able to access features such as `Logs` +- With the Flipper browser tab open, open your simulator alongside the Flipper app +- Flipper will auto-detect the device and the application to debug +- At this point, you should now be able to access features such as `Logs` -#### Debugging Physical iOS devices +To enable Redux debugging: in Flipper, select the `More` tab -> `Plugin` and add [`redux-debugger`](https://github.com/jk-gan/flipper-plugin-redux-debugger) -- Debugging physical iOS devices requires `idb` to be installed, which consists of 2 parts -- Install the two idb parts: - 1. `brew tap facebook/fb` & `brew install idb-companion` - 2. `pip3.9 install fb-idb` (This step may require that you install python3 via `python -m pip3 install --upgrade pip`) +- If the plugin is disabled, add or enable the plugin +- Once enabled, the plugin automatically picks up Redux actions, which can be used for debugging state changes -#### Debug a website inside the WebView (in-app browser) +## Debugging the WebView (in-app browser) -Android +### Android - Run the app in debug mode (for example, in a simulator) - Open Chrome on your desktop - Go to `chrome://inspect/#devices` - Look for the device and click inspect -iOS +### iOS - Run the app in debug mode (for example, in a simulator) - Make sure the value of `webviewDebuggingEnabled` prop on the Webview component is `true` - Open Safari on your desktop - Go to the menu Develop -> [Your device] -> [Website] -You should see the console for the website that is running inside the WebView +## Troubleshooting + +- Flipper can't find watchman + - Flipper expects watchman in the `user/local/bin` dir + - Ex. If `watchman` was installed using `brew`, you may symlink `ln -s /opt/homebrew/bin/watchman /usr/local/bin/watchman` +- IDB binary not found + - Flipper expects `idb` binary to exist in the path provided to it + - First, ensure that [`idb`](https://github.com/facebook/idb?tab=readme-ov-file#idb-client) is installed + - Then update the `idb` binary path in Flipper with the path returned by `which idb` +- Trouble installing `idb` with `pip3.6` + - An alternative is to use [`pipx`](https://pipx.pypa.io/stable/) to install `idb` + - Ensure that `pipx` path is added to your terminal's profile file using `pipx ensurepath` From 2669407ba387e92efa00b18a879a8ddc7a0bc1b5 Mon Sep 17 00:00:00 2001 From: Cal-L Date: Wed, 21 Aug 2024 21:54:11 -0700 Subject: [PATCH 4/6] Fix dedupe --- yarn.lock | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/yarn.lock b/yarn.lock index 97a0e1ee9fc..f59fe2a85b7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15327,12 +15327,7 @@ date-format@4.0.3: resolved "https://registry.yarnpkg.com/date-format/-/date-format-4.0.3.tgz#f63de5dc08dc02efd8ef32bf2a6918e486f35873" integrity sha512-7P3FyqDcfeznLZp2b+OMitV9Sz2lUnsT87WaTat9nVwqsBkTzPG3lPLNwW3en6F4pHUiWzr6vb8CLhjdK9bcxQ== -dayjs@^1.10.5, dayjs@^1.8.15: - version "1.11.9" - resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.9.tgz#9ca491933fadd0a60a2c19f6c237c03517d71d1a" - integrity sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA== - -dayjs@^1.8.29: +dayjs@^1.10.5, dayjs@^1.8.15, dayjs@^1.8.29: version "1.11.13" resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.13.tgz#92430b0139055c3ebb60150aa13e860a4b5a366c" integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg== From 32fa1c8c4ca99120f77e7d35548c8278b836a254 Mon Sep 17 00:00:00 2001 From: Cal-L Date: Wed, 21 Aug 2024 22:18:14 -0700 Subject: [PATCH 5/6] Ignore audit, waiting for resolution --- .iyarc | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.iyarc b/.iyarc index abbf0e189d2..5133f2e986d 100644 --- a/.iyarc +++ b/.iyarc @@ -1,3 +1,7 @@ # ReDoS vulnerability, no impact to this application, and fix not backported yet to the versions we use GHSA-c2qf-rxjj-qqgw + +# Waiting on version with patch - https://github.com/advisories/GHSA-952p-6rrq-rcjv + +GHSA-952p-6rrq-rcjv From 06115a23f3c166b947fd8aff62c1855cd2c9bf72 Mon Sep 17 00:00:00 2001 From: Cal-L Date: Thu, 22 Aug 2024 07:23:23 -0700 Subject: [PATCH 6/6] Fix lint --- app/store/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/app/store/index.ts b/app/store/index.ts index dbbd90cbe5c..2d30d946cde 100644 --- a/app/store/index.ts +++ b/app/store/index.ts @@ -40,6 +40,7 @@ const createStoreAndPersistor = async () => { // Add redux flipper middleware for debugging Redux with Flipper // Flipper's client side plugin is https://github.com/jk-gan/flipper-plugin-redux-debugger, which needs to be added as a plugin // flipper-plugin-redux-debugger is named redux-debugger in Flipper's plugin list + /* eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires */ const createReduxFlipperDebugger = require('redux-flipper').default; middlewares.push(createReduxFlipperDebugger()); }