feat: Feat/add redux debugger

.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

app/store/index.ts

@@ -34,9 +34,20 @@ 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
+    /* eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires */
+    const createReduxFlipperDebugger = require('redux-flipper').default;
+    middlewares.push(createReduxFlipperDebugger());
+  }
+
   store = configureStore({
     reducer: pReducer,
-    middleware: [sagaMiddleware, thunk],
+    middleware: middlewares,
     preloadedState: initialState,
   });
 

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/<USER_NAME>/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`

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

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": {

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=
@@ -15327,10 +15327,10 @@ 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.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==
 
 debug@2.6.9, debug@^2.2.0, debug@^2.6.9:
   version "2.6.9"
@@ -25555,6 +25555,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 +26400,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"