chore: add support for remote devices with re-frisk server (#21805)

This changes adds support for connecting remotely to re-frisk when running the app on a mobile device. This change is essentially aimed towards better support for introspecting on iOS devices, but these changes should also work for Android devices too. Note, that running in the Android simulator may still require port-forwarding with `adb reverse`.

Makefile

@@ -267,9 +267,11 @@ run-metro: export TARGET := clojure
 run-metro: ##@run Start Metro to build React Native changes
 	@scripts/run-metro.sh
 
+export RE_FRISK_PORT ?= 4567
+
 run-re-frisk: export TARGET := clojure
 run-re-frisk: ##@run Start re-frisk server
-	yarn shadow-cljs run re-frisk-remote.core/start
+	yarn shadow-cljs run re-frisk-remote.core/start ${RE_FRISK_PORT}
 
 # TODO: Migrate this to a Nix recipe, much the same way as nix/mobile/android/targets/release-android.nix
 run-android: export TARGET := android
@@ -443,7 +445,7 @@ android-ports: export RCT_METRO_PORT ?= 8081
 android-ports: ##@other Add proxies to Android Device/Simulator
 	adb reverse tcp:$(RCT_METRO_PORT) tcp:$(RCT_METRO_PORT) && \
 	adb reverse tcp:3449 tcp:3449 && \
-	adb reverse tcp:4567 tcp:4567 && \
+	adb reverse tcp:$(RE_FRISK_PORT) tcp:$(RE_FRISK_PORT) && \
 	adb reverse tcp:$(FLOWSTORM_PORT) tcp:$(FLOWSTORM_PORT) && \
 	adb forward tcp:5561 tcp:5561
 

shadow-cljs.edn

@@ -58,7 +58,7 @@
                :preloads          [;; The official recommendation is to
                                    ;; load the debugger preload first.
                                    flow-storm.api
-                                   re-frisk-remote.preload
+                                   dev.re-frisk-preload
                                    status-im.setup.schema-preload
                                    ;; In order to use component test helpers in the REPL we need to
                                    ;; preload namespaces that are not normally required by

src/dev/re_frisk_preload.cljs

@@ -0,0 +1,5 @@
+(ns dev.re-frisk-preload
+  (:require [re-frisk-remote.core :as re-frisk-remote]
+            [status-im.config]))
+
+(re-frisk-remote/enable {:host (str status-im.config/re-frisk-host ":" status-im.config/re-frisk-port)})

src/status_im/config.cljs

@@ -124,3 +124,6 @@
 (goog-define STATUS_BACKEND_SERVER_ROOT_DATA_DIR "")
 ;; if you're using android simulator, I suggest set the env variable to "http://10.0.2.2:"
 (goog-define STATUS_BACKEND_SERVER_IMAGE_SERVER_URI_PREFIX "https://localhost:")
+
+(def re-frisk-host (get-config :RE_FRISK_HOST "http://localhost"))
+(def re-frisk-port (get-config :RE_FRISK_PORT "4567"))