[Wallet] Enable Flipper on iOS along with Redux Debugger and Reactotr…

…on (#6488) ### Description This PR enables Flipper on iOS along with `Redux Debugger` and `Reactotron` plugins. This allows viewing / debugging the following: - React DevTools (Components and Profiling) - Network connections - View hierarchy - Redux State / Actions - AsyncStorage - App preferences - Hermes - and more ;) It also opens the door for creating/adding our own Flipper plugins (for instance for viewing transactions 😉). Setup instructions were added to the mobile README. ### Details When we upgraded to React Native 0.63.x and Reanimated 2, the introduction of TurboModules broke the ability to use remote debugging with the Chrome DevTools, see [this discussion with more details](react-native-community/discussions-and-proposals#206). As an alternative we can use Flipper to provide similar debugging functionalities. Flipper was already working on Android, but on iOS there was a conflict between the OpenSSL lib shipped as part of `react-native-fast-crypto` and the one included by `Flipper`. To workaround this problem, we now use [a "headers" only version of `OpenSSL`](https://github.com/celo-org/OpenSSL-headers) that makes `Flipper` happy while building. The 2nd issue was that Flipper in React Native doesn't work with `use_frameworks!` enabled in the `Podfile`, which we need because we have Swift dependencies, which don't work without it. I bent CocoaPods a little more so that everything Flipper related is built as static frameworks. I've integrated both `Redux Debugger` and `Reactotron` as they provide different lenses to debug the app. There's also a `redux-saga` plugin for `Reactotron` but it triggered some odd unhandled promise rejections, so I didn't include it. While working on this I noticed the state in the `exchange` reducer is very big and made the `Redux Debugger` plugin quite unusable within Flipper. There's an issue open which should address this (#6284). In the meantime I've filtered out that part of the state in `Redux Debugger`. `Reactotron` can still be used to see it and is not affected. Overall this gives us more tools to see what is happening within the app. ### Tested - Flipper works on both iOS and Android along with their `Redux Debugger` and `Reactotron` plugins. - iOS release builds don't include Flipper (Flipper modules are built for release builds, but NOT linked - this makes the build take more time, but unfortunately no simple way around this with CocoaPods for now, or we'd need to manage multiple `Podfile.lock` files, see facebook/flipper#1275). <img width="1554" alt="Screenshot 2021-01-15 at 11 38 52" src="https://user-images.githubusercontent.com/57791/104722566-4bfe4800-572e-11eb-973c-63c7af58b94f.png"> <img width="1554" alt="Screenshot 2021-01-15 at 11 39 19" src="https://user-images.githubusercontent.com/57791/104722570-4f91cf00-572e-11eb-9bb7-4fe0abf4336c.png"> <img width="1554" alt="Screenshot 2021-01-15 at 12 30 47" src="https://user-images.githubusercontent.com/57791/104722693-836cf480-572e-11eb-8ef0-83e54a52dfe8.png"> <img width="1554" alt="Screenshot 2021-01-15 at 11 40 26" src="https://user-images.githubusercontent.com/57791/104722580-5587b000-572e-11eb-886e-8fff2da8cffd.png"> <img width="1554" alt="Screenshot 2021-01-15 at 11 40 48" src="https://user-images.githubusercontent.com/57791/104722594-5a4c6400-572e-11eb-86bd-873add6027b1.png"> <img width="1554" alt="Screenshot 2021-01-15 at 11 47 17" src="https://user-images.githubusercontent.com/57791/104722632-6801e980-572e-11eb-8412-d86a8a29d383.png"> <img width="1554" alt="Screenshot 2021-01-15 at 11 49 12" src="https://user-images.githubusercontent.com/57791/104722649-6df7ca80-572e-11eb-8ac5-bae41abd6488.png"> <img width="1554" alt="Screenshot 2021-01-15 at 11 49 32" src="https://user-images.githubusercontent.com/57791/104722659-7223e800-572e-11eb-9734-59512f3987f9.png"> ### Related issues - Discussed on Slack: https://celo-org.slack.com/archives/CL7BVQPHB/p1610040529072600 ### Backwards compatibility Yes
celo-org · Jan 27, 2021 · c549ae5 · c549ae5
1 parent b185116
commit c549ae5
Show file tree

Hide file tree

Showing 13 changed files with 311 additions and 52 deletions.
diff --git a/package.json b/package.json
@@ -108,6 +108,7 @@
     "node-libs-react-native": "^1.2.0",
     "object-path": "^0.11.5",
     "node-forge": "^0.10.0",
-    "web3-eth-contract": "1.3.0"
+    "web3-eth-contract": "1.3.0",
+    "react-native-flipper": "^0.70.0"
   }
 }
diff --git a/packages/mobile/README.md b/packages/mobile/README.md
@@ -267,18 +267,37 @@ To debug network requests in forno mode, we use Charles, a proxy for monitoring
 
 ### Debugging
 
-_To avoid debugging errors, ensure your device and laptop are connected to the same WiFi network even if they are connected via USB._
+Since we integrated dependencies making use of TurboModules, debugging via Chrome DevTools or React Native Debugger doesn't work anymore.
+As an alternative, Flipper can be used instead.
 
-1. Either shake the device or run `yarn run dev:show-menu` (only for Android) to open up the developer menu.
+#### Install Flipper
 
-2. Select `Debug` (iOS) or `Start Remote JS Debugging` (Android). This should open a new tab in your browser with React Native logger in the console. In order to get a full picture, the console's filter should be set to
-   `All levels`.
+[Flipper][flipper] is a platform for debugging iOS, Android and React Native apps. Visualize, inspect, and control your apps from a simple desktop interface.
 
-3. For the fastest development experience, you likely want to open the developer menu again and ensure `Fast Reloading` (iOS) or `Live Reloading` and `Hot Reloading` (Android) is enabled.
+```sh
+brew install flipper
+```
+
+As of Jan 2021, Flipper is not notarized and triggers a MacOS Gatekeeper popup when trying to run it for the first time.
+Follow [these steps to successfully launch it](https://github.com/facebook/flipper/issues/1308#issuecomment-652951556) (only needed the very first time it's run)
+
+The application currently makes use of 2 additional Flipper plugins to enable more detailed debugging:
+
+- Reactotron (Flipper -> Manage Plugins -> Install Plugins -> flipper-plugin-reactotron)
+- Redux Debugger (Flipper -> Manage Plugins > Install Plugins > search redux-debugger)
+
+Once installed, you should be able to see them and interact with them when the wallet is running (only in dev builds).
 
-#### Optional: Install React Native Debugger
+This allows viewing / debugging the following:
 
-The [React Native Debugger][rn debugger] bundles together the Redux and Chrome dev tools nicely and provides a clean debugging environment.
+- React DevTools (Components and Profiling)
+- Network connections
+- View hierarchy
+- Redux State / Actions
+- AsyncStorage
+- App preferences
+- Hermes
+- and more ;)
 
 ### App Profiling
 
@@ -448,7 +467,7 @@ $ adb kill-server && adb start-server
 [light node]: https://docs.celo.org/overview#ultralight-synchronization
 [protocol readme]: ../protocol/README.md
 [react native]: https://facebook.github.io/react-native/
-[rn debugger]: https://github.com/jhen0409/react-native-debugger
+[flipper]: https://fbflipper.com
 [rn optimize example]: https://reactjs.org/docs/optimizing-performance.html#examples
 [rn profiler]: https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html
 [rn running on device]: https://facebook.github.io/react-native/docs/running-on-device

diff --git a/packages/mobile/__mocks__/reactotron-react-native.ts b/packages/mobile/__mocks__/reactotron-react-native.ts
@@ -0,0 +1,10 @@
+const reactotron = {
+  setAsyncStorageHandler: () => reactotron,
+  configure: () => reactotron,
+  useReactNative: () => reactotron,
+  use: () => reactotron,
+  connect: () => reactotron,
+  createEnhancer: () => (next) => next,
+}
+
+export default reactotron
diff --git a/packages/mobile/android/gradle.properties b/packages/mobile/android/gradle.properties
@@ -32,4 +32,4 @@ android.useAndroidX=true
 android.enableJetifier=true
 
 # Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.54.0
+FLIPPER_VERSION=0.69.0
diff --git a/packages/mobile/index.js b/packages/mobile/index.js
@@ -3,6 +3,9 @@ import 'node-libs-react-native/globals'
 import 'src/missingGlobals'
 import 'src/forceCommunityAsyncStorage'
 import 'src/setupE2eEnv' // This is only for E2E tests and has no effects when not running E2E tests
+if (__DEV__) {
+  import('./src/reactotronConfig').then(() => console.log('Reactotron Configured'))
+}
 import { AppRegistry } from 'react-native'
 import Logger from 'src/utils/Logger'
 import App from 'src/app/App'

diff --git a/packages/mobile/ios/Podfile b/packages/mobile/ios/Podfile
@@ -6,6 +6,12 @@ source 'https://cdn.cocoapods.org/'
 # `The 'Pods-celo' target has transitive dependencies that include statically linked binaries [...]`
 $RNFirebaseAsStaticFramework = true
 
+# Workaround OpenSSL-Universal react-native-fast-crypto conflict
+$static_framework = ['react-native-flipper', 'react-native-fast-crypto', 'FlipperKit', 'Flipper', 'Flipper-Folly',
+  'CocoaAsyncSocket', 'ComponentKit', 'Flipper-DoubleConversion',
+  'Flipper-Glog', 'Flipper-PeerTalk', 'Flipper-RSocket',
+  'CocoaLibEvent', 'OpenSSL-Universal']
+
 require_relative "../../../node_modules/react-native/scripts/react_native_pods"
 require_relative "../../../node_modules/@react-native-community/cli-platform-ios/native_modules"
 
@@ -14,6 +20,8 @@ platform :ios, '12.4'
 target "celo" do
   use_frameworks!
 
+  # Headers only version of OpenSSL-Universal to workaround libcrypto / libssl conflict between Flipper and react-native-fast-crypto
+  pod 'OpenSSL-Universal', :git => "https://github.com/celo-org/OpenSSL-headers.git"
 
   pod "react-native-geth", :path => "../../../node_modules/react-native-geth"
   pod "CeloBlockchain", :path => "../../../node_modules/@celo/client/CeloBlockchain.podspec", :modular_headers => true
@@ -37,14 +45,14 @@ target "celo" do
   #
   # Note that if you have use_frameworks! enabled, Flipper will not work and
   # you should disable these next few lines.
-  # use_flipper!
+  use_flipper!({ 'Flipper' => '~> 0.69.0' })
 end
 
 # Convert all permission pods into static libraries
 # See https://github.com/react-native-community/react-native-permissions#workaround-for-use_frameworks-issues
 pre_install do |installer|
   installer.pod_targets.each do |pod|
-    if pod.name.eql?('RNPermissions') || pod.name.start_with?('Permission-')
+    if $static_framework.include?(pod.name) || pod.name.eql?('RNPermissions') || pod.name.start_with?('Permission-')
       def pod.build_type;
         Pod::BuildType.static_library
       end
@@ -53,7 +61,7 @@ pre_install do |installer|
 end
 
 post_install do |installer|
-  # flipper_post_install(installer)
+  flipper_post_install(installer)
 
   installer.pods_project.targets.each do |target|
     target.build_configurations.each do |config|

diff --git a/packages/mobile/ios/Podfile.lock b/packages/mobile/ios/Podfile.lock
@@ -2,6 +2,8 @@ PODS:
   - Analytics (4.1.2)
   - boost-for-react-native (1.63.0)
   - CeloBlockchain (0.0.319)
+  - CocoaAsyncSocket (7.6.5)
+  - CocoaLibEvent (1.0.0)
   - DoubleConversion (1.1.6)
   - FBLazyVector (0.63.4)
   - FBReactNativeSpec (0.63.4):
@@ -84,6 +86,52 @@ PODS:
     - FirebaseAuthInterop (~> 1.0)
     - FirebaseCore (~> 6.0)
     - GTMSessionFetcher/Core (~> 1.1)
+  - Flipper (0.69.0):
+    - Flipper-Folly (~> 2.3)
+    - Flipper-RSocket (~> 1.1)
+  - Flipper-DoubleConversion (1.1.7)
+  - Flipper-Folly (2.3.0):
+    - boost-for-react-native
+    - CocoaLibEvent (~> 1.0)
+    - Flipper-DoubleConversion
+    - Flipper-Glog
+    - OpenSSL-Universal (= 1.0.2.20)
+  - Flipper-Glog (0.3.6)
+  - Flipper-PeerTalk (0.0.4)
+  - Flipper-RSocket (1.1.0):
+    - Flipper-Folly (~> 2.2)
+  - FlipperKit (0.69.0):
+    - FlipperKit/Core (= 0.69.0)
+  - FlipperKit/Core (0.69.0):
+    - Flipper (~> 0.69.0)
+    - FlipperKit/CppBridge
+    - FlipperKit/FBCxxFollyDynamicConvert
+    - FlipperKit/FBDefines
+    - FlipperKit/FKPortForwarding
+  - FlipperKit/CppBridge (0.69.0):
+    - Flipper (~> 0.69.0)
+  - FlipperKit/FBCxxFollyDynamicConvert (0.69.0):
+    - Flipper-Folly (~> 2.3)
+  - FlipperKit/FBDefines (0.69.0)
+  - FlipperKit/FKPortForwarding (0.69.0):
+    - CocoaAsyncSocket (~> 7.6)
+    - Flipper-PeerTalk (~> 0.0.4)
+  - FlipperKit/FlipperKitHighlightOverlay (0.69.0)
+  - FlipperKit/FlipperKitLayoutPlugin (0.69.0):
+    - FlipperKit/Core
+    - FlipperKit/FlipperKitHighlightOverlay
+    - FlipperKit/FlipperKitLayoutTextSearchable
+    - YogaKit (~> 1.18)
+  - FlipperKit/FlipperKitLayoutTextSearchable (0.69.0)
+  - FlipperKit/FlipperKitNetworkPlugin (0.69.0):
+    - FlipperKit/Core
+  - FlipperKit/FlipperKitReactPlugin (0.69.0):
+    - FlipperKit/Core
+  - FlipperKit/FlipperKitUserDefaultsPlugin (0.69.0):
+    - FlipperKit/Core
+  - FlipperKit/SKIOSNetworkPlugin (0.69.0):
+    - FlipperKit/Core
+    - FlipperKit/FlipperKitNetworkPlugin
   - Folly (2020.01.13.00):
     - boost-for-react-native
     - DoubleConversion
@@ -134,6 +182,9 @@ PODS:
     - nanopb/encode (= 0.3.9011)
   - nanopb/decode (0.3.9011)
   - nanopb/encode (0.3.9011)
+  - OpenSSL-Universal (1.0.2.20):
+    - OpenSSL-Universal/Static (= 1.0.2.20)
+  - OpenSSL-Universal/Static (1.0.2.20)
   - Permission-Camera (2.1.5):
     - RNPermissions
   - PromisesObjC (1.2.11)
@@ -322,6 +373,8 @@ PODS:
     - React
   - react-native-fast-crypto (1.8.4):
     - React
+  - react-native-flipper (0.70.0):
+    - React
   - react-native-geth (1.0.0):
     - CeloBlockchain
     - React
@@ -520,16 +573,38 @@ PODS:
   - Sentry/Core (6.0.9)
   - Toast (4.0.0)
   - Yoga (1.14.0)
+  - YogaKit (1.18.1):
+    - Yoga (~> 1.14)
 
 DEPENDENCIES:
   - "CeloBlockchain (from `../../../node_modules/@celo/client/CeloBlockchain.podspec`)"
   - DoubleConversion (from `../../../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
   - FBLazyVector (from `../../../node_modules/react-native/Libraries/FBLazyVector`)
   - FBReactNativeSpec (from `../../../node_modules/react-native/Libraries/FBReactNativeSpec`)
+  - Flipper (~> 0.69.0)
+  - Flipper-DoubleConversion (= 1.1.7)
+  - Flipper-Folly (~> 2.2)
+  - Flipper-Glog (= 0.3.6)
+  - Flipper-PeerTalk (~> 0.0.4)
+  - Flipper-RSocket (~> 1.1)
+  - FlipperKit (~> 0.69.0)
+  - FlipperKit/Core (~> 0.69.0)
+  - FlipperKit/CppBridge (~> 0.69.0)
+  - FlipperKit/FBCxxFollyDynamicConvert (~> 0.69.0)
+  - FlipperKit/FBDefines (~> 0.69.0)
+  - FlipperKit/FKPortForwarding (~> 0.69.0)
+  - FlipperKit/FlipperKitHighlightOverlay (~> 0.69.0)
+  - FlipperKit/FlipperKitLayoutPlugin (~> 0.69.0)
+  - FlipperKit/FlipperKitLayoutTextSearchable (~> 0.69.0)
+  - FlipperKit/FlipperKitNetworkPlugin (~> 0.69.0)
+  - FlipperKit/FlipperKitReactPlugin (~> 0.69.0)
+  - FlipperKit/FlipperKitUserDefaultsPlugin (~> 0.69.0)
+  - FlipperKit/SKIOSNetworkPlugin (~> 0.69.0)
   - Folly (from `../../../node_modules/react-native/third-party-podspecs/Folly.podspec`)
   - glog (from `../../../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - lottie-ios (from `../../../node_modules/lottie-ios`)
   - lottie-react-native (from `../../../node_modules/lottie-react-native`)
+  - OpenSSL-Universal (from `https://github.com/celo-org/OpenSSL-headers.git`)
   - Permission-Camera (from `../../../node_modules/react-native-permissions/ios/Camera.podspec`)
   - RCTRequired (from `../../../node_modules/react-native/Libraries/RCTRequired`)
   - RCTTypeSafety (from `../../../node_modules/react-native/Libraries/TypeSafety`)
@@ -548,6 +623,7 @@ DEPENDENCIES:
   - react-native-config (from `../../../node_modules/react-native-config`)
   - react-native-contacts (from `../../../node_modules/react-native-contacts`)
   - "react-native-fast-crypto (from `../../../node_modules/@celo/react-native-fast-crypto`)"
+  - react-native-flipper (from `../../../node_modules/react-native-flipper`)
   - react-native-geth (from `../../../node_modules/react-native-geth`)
   - react-native-keep-awake (from `../../../node_modules/react-native-keep-awake`)
   - react-native-mail (from `../../../node_modules/react-native-mail`)
@@ -602,6 +678,8 @@ SPEC REPOS:
   trunk:
     - Analytics
     - boost-for-react-native
+    - CocoaAsyncSocket
+    - CocoaLibEvent
     - Firebase
     - FirebaseAnalytics
     - FirebaseAnalyticsInterop
@@ -615,6 +693,13 @@ SPEC REPOS:
     - FirebaseInstanceID
     - FirebaseMessaging
     - FirebaseStorage
+    - Flipper
+    - Flipper-DoubleConversion
+    - Flipper-Folly
+    - Flipper-Glog
+    - Flipper-PeerTalk
+    - Flipper-RSocket
+    - FlipperKit
     - GoogleAppMeasurement
     - GoogleDataTransport
     - GoogleDataTransportCCTSupport
@@ -627,6 +712,7 @@ SPEC REPOS:
     - Segment-Firebase
     - Sentry
     - Toast
+    - YogaKit
 
 EXTERNAL SOURCES:
   CeloBlockchain:
@@ -645,6 +731,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/lottie-ios"
   lottie-react-native:
     :path: "../../../node_modules/lottie-react-native"
+  OpenSSL-Universal:
+    :git: https://github.com/celo-org/OpenSSL-headers.git
   Permission-Camera:
     :path: "../../../node_modules/react-native-permissions/ios/Camera.podspec"
   RCTRequired:
@@ -677,6 +765,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native-contacts"
   react-native-fast-crypto:
     :path: "../../../node_modules/@celo/react-native-fast-crypto"
+  react-native-flipper:
+    :path: "../../../node_modules/react-native-flipper"
   react-native-geth:
     :path: "../../../node_modules/react-native-geth"
   react-native-keep-awake:
@@ -774,10 +864,17 @@ EXTERNAL SOURCES:
   Yoga:
     :path: "../../../node_modules/react-native/ReactCommon/yoga"
 
+CHECKOUT OPTIONS:
+  OpenSSL-Universal:
+    :commit: 2d313f597c2f66a93e47e359301aafc0127e866c
+    :git: https://github.com/celo-org/OpenSSL-headers.git
+
 SPEC CHECKSUMS:
   Analytics: 177da2c597aba83a6882b706ca6e0a071fd7cd26
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   CeloBlockchain: 2b3bc8846dff06152d3fcc59c14c43c9740c0a72
+  CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
+  CocoaLibEvent: 2fab71b8bd46dd33ddb959f7928ec5909f838e3f
   DoubleConversion: cde416483dac037923206447da6e1454df403714
   FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
   FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
@@ -794,6 +891,13 @@ SPEC CHECKSUMS:
   FirebaseInstanceID: ebd2ea79ee38db0cb5f5167b17a0d387e1cc7b6e
   FirebaseMessaging: 089b7a4991425783384acc8bcefcd78c0af913bd
   FirebaseStorage: 93fe2f8190a01bfb2b2c4932df7d679744c4ef1d
+  Flipper: 289ede5e376b23149e724b0a516817a62e65d170
+  Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
+  Flipper-Folly: e4493b013c02d9347d5e0cb4d128680239f6c78a
+  Flipper-Glog: 1dfd6abf1e922806c52ceb8701a3599a79a200a6
+  Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
+  Flipper-RSocket: 64e7431a55835eb953b0bf984ef3b90ae9fdddd7
+  FlipperKit: 0367d53d5c2829ea8137eaa5d1296c5fc623848b
   Folly: b73c3869541e86821df3c387eb0af5f65addfab4
   glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
   GoogleAppMeasurement: dfe55efa543e899d906309eaaac6ca26d249862f
@@ -805,6 +909,7 @@ SPEC CHECKSUMS:
   lottie-ios: 48fac6be217c76937e36e340e2d09cf7b10b7f5f
   lottie-react-native: 2a1a82bb326ae51331a5520de0cf706733c6db69
   nanopb: 18003b5e52dab79db540fe93fe9579f399bd1ccd
+  OpenSSL-Universal: 5a7a97f177ed1db20a4b1501d936aafb9e5bd747
   Permission-Camera: afad27bf90337684d4a86f3825112d648c8c4d3b
   PromisesObjC: 8c196f5a328c2cba3e74624585467a557dcb482f
   Protobuf: 0cde852566359049847168e51bd1c690e0f70056
@@ -823,6 +928,7 @@ SPEC CHECKSUMS:
   react-native-config: e8c71f602c92ddd2f5c24b0b7a90d239ecab8d9f
   react-native-contacts: d1a60e38dadb67dbbe481480338988e00966a30d
   react-native-fast-crypto: 149fd8fd16e1f9bd6b6be2b8295fe0eb76923602
+  react-native-flipper: da8e630768f0a35153837df953d9781fa7f860ba
   react-native-geth: 51d17abd8bac4b80c4e12adb446242ba1407a0c3
   react-native-keep-awake: afad8a51dfef9fe9655a6344771be32c8596d774
   react-native-mail: 88305252f4c3fb0157015ff8a7ac9c41b321a0dd
@@ -874,7 +980,8 @@ SPEC CHECKSUMS:
   Sentry: 388c9dc093b2fd3a264466a5c5b21e25959610a9
   Toast: 91b396c56ee72a5790816f40d3a94dd357abc196
   Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6
+  YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: cabacda18940fe959457c73daaa3c54088c71ee8
+PODFILE CHECKSUM: a0dfbf57c70298685dd1e3a2a107f65f34e48c67
 
 COCOAPODS: 1.10.0