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

[jeanregisser]

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.

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 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 Flipper should not get built on iOS release builds facebook/flipper#1275).

Related issues

• Discussed on Slack: https://celo-org.slack.com/archives/CL7BVQPHB/p1610040529072600

Backwards compatibility

Yes

[tarikbellamine]

Awesome, thanks for tackling this!

Would you (or someone else who's familiar with Flipper) consider doing a short demo for the team sometime soon? Setting up and getting the most out of a new tool often takes a bit of time so it would be great to jump start us on this process :)

[jeanregisser]

Would you (or someone else who's familiar with Flipper) consider doing a short demo for the team sometime soon? Setting up and getting the most out of a new tool often takes a bit of time so it would be great to jump start us on this process :)

Yes definitely! I'll schedule this soon!

[Lss-Ankit]

Hi @jeanregisser Could you please let us know what need to test us here from front end side? Also please let us know if anything which we would test from backend side.