Torified webview in react-native #247

KoalaSat · 2022-09-16T19:26:23Z

Fixes #42

We previously refactored the front-end to have a high level API client we can easily switch #242 and created a single component for avatars so static image files can be easily managed #251

This PR includes:

New client on the front-end that communicates with react-native.
Tor client on react-native that listen for requests, fetch and returns them back to webview.
Other fixes found related with running the front-end on Android, and closely related to HTTP requests.

Screenshot taken from an Android device, all the data is being obtained through the Tor daemon.

Issues found on Android

Details of this list: #42 (comment)

Fetching internal files
Including extra static files on the app will also help to make sure the translation files are on the same version as the JS on the app. My intial approach was to run a static server, but it's not possible because of Compilation error with gradle 7 and react native latest version 0.69 futurepress/react-native-static-server#115, so I just included i18n on the mobile webpack bundle
Solution: https://github.com/Reckless-Satoshi/robosats/pull/247/files#diff-a7def86cc36a2178b4ee07b000c53d49e04068db4bc85967c0758578a2f37700R44
External sources
Using the request function I manage to do XHR requests and obtain the base64 of external files.
Solution: https://github.com/Reckless-Satoshi/robosats/pull/247/files#diff-ab78113fffebdaf893575b9bdd85086680e9553cf9f9f10bec0a1dc0e11e1c35R55
MUI Avatar not loading
After Refactor avatars #251 it was way easier to asynchronously manage the image src load, I also implemented an in-memory cache to avoid loading the image every time the src is requested (only for the Android build).
Solution: https://github.com/Reckless-Satoshi/robosats/pull/247/files#diff-35aa11cfb6d388c4d5c62abbc4b3bc0281ea8d19bc1ec800f0a0f47a59fedbfbR47
react-native-tor does not implement PUT
PUT Request method Sifir-io/react-native-tor#51 We decided to not implement it.
react-native-tor crashes
Following this workaround seems to fix the issue React Native Tor on android freezes Sifir-io/react-native-tor#30 (comment) . At least for my case, it also increased considerably the general performance on Tor requests.
Cookies not available on local files
Webview android not saving cookies react-native-webview/react-native-webview#2643 I started working on it, but I ended up modifying +15 files on the web front-end, so I think it's better to just disable cookies on Android and fix it later. HEADS UP! Because of this, accessing the order page will fail, yet the requests are still being done

Error: Request Response Code (400): {"bad_request":"You must have a robot avatar to see the order details"}

Changes to test on Web front-end

Routes
User Gen Main Avatar
Translations

Remaining work for a fully functional Android app

Cookies
Communicate with clipboard
Websockets

Further Considerations

I'm not sure at all about the security risks on this command but I couldn't find a way to make the JS injection work without it.
There is a JavaBinder error that repeats over and over and I couldn't find a solution for it, looks like something related to the build size

mobile/App.tsx

+  const injectMessage = (id: string, data: object) => {
+    const json = JSON.stringify(data);
+    webViewRef.current?.injectJavaScript(
+      `(function() {window.NativeRobosats.onMessageResolve(${id}, ${json});})();`,


This reverts commit 340bcf8.

KoalaSat · 2022-09-23T18:03:56Z

frontend/src/components/UserGenPage.js

+                  smooth={true}
+                  avatarClass=""
+                  tooltip={t('This is your trading avatar')}
+                />


I missed this one on the Refactor, should be checked on frontend

On the fully dockerized dev environment the npm process cannot save files outside of /frontend directory. Now it can also save the builds to /mobile

KoalaSat · 2022-09-26T08:24:56Z

frontend/src/components/UnsafeAlert.js

+      return http.status === 200;
+    } catch {
+      return false;
+    }


@Reckless-Satoshi A gentle try...catch did the job :)

Reckless-Satoshi · 2022-09-27T17:00:26Z

Other than the main avatar looking different (style missing) everything else seems to work as intended in web. Ready to merge to create a pre-release with a .apk for testing.

Submit a LN invoice from a proxy wallet for 2M Sats. Thanks a lot for figuring out one of the biggest hurdles so far during the development of RoboSats! 🚀

KoalaSat · 2022-09-27T18:35:22Z

mobile/services/Tor/index.ts

+    this.baseUrl = 'http://robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion';
+    this.daemon = Tor({
+      stopDaemonOnBackground: false,
+      numberConcurrentRequests: 0,


@Reckless-Satoshi According to https://github.com/Sifir-io/react-native-tor/blob/ed9dc6f1c474c3aa1ae7512f7437343159a46480/src/index.tsx#L349 we are safe to set this to 0 (we are using v8) and it should resolve the error you got. I tested loading all pages and didn't get any error.

KoalaSat · 2022-09-27T19:51:53Z

Other than the main avatar looking different (style missing) everything else seems to work as intended in web. Ready to merge to create a pre-release with a .apk for testing.

Submit a LN invoice from a proxy wallet for 2M Sats. Thanks a lot for figuring out one of the biggest hurdles so far during the development of RoboSats! 🚀

Has been fun!

KoalaSat · 2022-09-27T19:52:42Z

lnbc20m1p3nx4rhpp5v8kasn3myn5k6sg8rfawtel8pj64948ch0mqr3wdx3r4zj6f738qdq5g9kxy7fqd9h8vmmfvdjscqzpgxqyz5vqsp5cl5f0skrxn3dmeuhn6f7q9zsaxtha3398xeh5qaqhl83q69samxs9qyyssqe4nvqxpljaaprx9uy9j8ke6yl96l9dj8w8ekf27zvht7hq2ecqkh7uyqc4rzyt67yz0utgsmnqcvwqxjx2ljfhguc3wtqluy5glu03sp2qec2w

Reckless-Satoshi · 2022-09-28T12:06:16Z

lnbc20m1p3nx4rhpp5v8kasn3myn5k6sg8rfawtel8pj64948ch0mqr3wdx3r4zj6f738qdq5g9kxy7fqd9h8vmmfvdjscqzpgxqyz5vqsp5cl5f0skrxn3dmeuhn6f7q9zsaxtha3398xeh5qaqhl83q69samxs9qyyssqe4nvqxpljaaprx9uy9j8ke6yl96l9dj8w8ekf27zvht7hq2ecqkh7uyqc4rzyt67yz0utgsmnqcvwqxjx2ljfhguc3wtqluy5glu03sp2qec2w

3837663333336464643462343531353332346162383631326635353661313764

* Add android build workflow * Initial webview on tsx template * Insert ReactJS app from local * Add Android app icon by @red_purdy (#174) * Add files via upload * Add files via upload * Add files via upload * Add files via upload * Add files via upload * Add files via upload Co-authored-by: RedPurdy <[email protected]> * Fix local reactjs * Add setup guide. Bundled dev main.js * Add react native tor * Move Android CHANGELOG.md to /mobile * Add torified webview in react-native (#247) * Add android build workflow * Android Tor Requests * Fetching internal files (i18n) * react-native-tor does not implement PUT * Get Files from Tor * Revert "Add android build workflow" This reverts commit 340bcf8. * Fix Rebase Removals * External sources * react-native-tor crashes * Last Refactor * Fix/revert setup guide * Add /mobile as volume to npm-dev container On the fully dockerized dev environment the npm process cannot save files outside of /frontend directory. Now it can also save the builds to /mobile * Fix UsafeAlert * Run prettier * Run lint:fix * Main Profile Image fix * Remove Tor Requests limitation Co-authored-by: Reckless_Satoshi <[email protected]> Co-authored-by: RedPurdy <[email protected]> Co-authored-by: KoalaSat <[email protected]>

KoalaSat mentioned this pull request Sep 16, 2022

Fix react router for mobile #240

Closed

KoalaSat force-pushed the android-tor-requests branch from 91ae9bc to 914dc05 Compare September 19, 2022 07:06

github-advanced-security bot found potential problems Sep 19, 2022

View reviewed changes

KoalaSat force-pushed the android-tor-requests branch 3 times, most recently from aff1c2e to feb3190 Compare September 19, 2022 19:14

Reckless-Satoshi force-pushed the android-webview-app-ts-2 branch from ce2ef1f to 0ce559f Compare September 23, 2022 11:46

Reckless-Satoshi and others added 6 commits September 23, 2022 16:44

Add android build workflow

340bcf8

Android Tor Requests

49f5c69

Fetching internal files (i18n)

7ab6cc2

react-native-tor does not implement PUT

433871a

Get Files from Tor

fc782f0

Revert "Add android build workflow"

55358d8

This reverts commit 340bcf8.

KoalaSat force-pushed the android-tor-requests branch from 1885f18 to 55358d8 Compare September 23, 2022 14:47

Fix Rebase Removals

b6bcd75

KoalaSat force-pushed the android-tor-requests branch from d6358ca to b6bcd75 Compare September 23, 2022 15:58

External sources

2d2c55a

KoalaSat commented Sep 23, 2022

View reviewed changes

react-native-tor crashes

e54132a

KoalaSat force-pushed the android-tor-requests branch 2 times, most recently from 413b77b to 64e3463 Compare September 25, 2022 09:55

KoalaSat marked this pull request as ready for review September 25, 2022 10:01

Last Refactor

85b0882

KoalaSat force-pushed the android-tor-requests branch from 64e3463 to 85b0882 Compare September 25, 2022 10:03

KoalaSat changed the title ~~Android Tor Requests~~ Torified webview in react-native Sep 25, 2022

Reckless-Satoshi added 2 commits September 25, 2022 14:29

Fix/revert setup guide

3e17ec6

Add /mobile as volume to npm-dev container

d356fa2

On the fully dockerized dev environment the npm process cannot save files outside of /frontend directory. Now it can also save the builds to /mobile

KoalaSat commented Sep 26, 2022

View reviewed changes

Fix UsafeAlert

0df6ab2

KoalaSat force-pushed the android-tor-requests branch from 597a2ca to 0df6ab2 Compare September 26, 2022 08:29

Reckless-Satoshi added 2 commits September 27, 2022 09:04

Run prettier

1e70c7d

Run lint:fix

9a180c7

KoalaSat added 2 commits September 27, 2022 20:30

Main Profile Image fix

0fa911d

Remove Tor Requests limitation

5e51c99

KoalaSat commented Sep 27, 2022

View reviewed changes

Reckless-Satoshi linked an issue Sep 28, 2022 that may be closed by this pull request

Android/iOS app. Torified webview in react-native. #42

Closed

Reckless-Satoshi merged commit d995e8f into RoboSats:android-webview-app-ts-2 Sep 28, 2022

KoalaSat deleted the android-tor-requests branch November 9, 2022 09:28

Reckless-Satoshi mentioned this pull request May 23, 2023

Upgrade Android toolchain #615

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Torified webview in react-native #247

Torified webview in react-native #247

KoalaSat commented Sep 16, 2022 •

edited by Reckless-Satoshi

Loading

KoalaSat Sep 23, 2022

KoalaSat Sep 26, 2022 •

edited

Loading

Reckless-Satoshi commented Sep 27, 2022

KoalaSat Sep 27, 2022

Reckless-Satoshi Sep 28, 2022

KoalaSat commented Sep 27, 2022

KoalaSat commented Sep 27, 2022

Reckless-Satoshi commented Sep 28, 2022

Torified webview in react-native #247

Torified webview in react-native #247

Conversation

KoalaSat commented Sep 16, 2022 • edited by Reckless-Satoshi Loading

Issues found on Android

Changes to test on Web front-end

Remaining work for a fully functional Android app

Further Considerations

KoalaSat Sep 23, 2022

Choose a reason for hiding this comment

KoalaSat Sep 26, 2022 • edited Loading

Choose a reason for hiding this comment

Reckless-Satoshi commented Sep 27, 2022

KoalaSat Sep 27, 2022

Choose a reason for hiding this comment

Reckless-Satoshi Sep 28, 2022

Choose a reason for hiding this comment

KoalaSat commented Sep 27, 2022

KoalaSat commented Sep 27, 2022

Reckless-Satoshi commented Sep 28, 2022

KoalaSat commented Sep 16, 2022 •

edited by Reckless-Satoshi

Loading

KoalaSat Sep 26, 2022 •

edited

Loading