Merge pull request #3332 from tloncorp/db/debug-utils

Mobile debug utils
tloncorp · Mar 13, 2024 · 9af8639 · 9af8639
2 parents 4bc0fe7 + e7aa4cc
commit 9af8639
Show file tree

Hide file tree

Showing 14 changed files with 254 additions and 64 deletions.
diff --git a/apps/tlon-mobile/.env.sample b/apps/tlon-mobile/.env.sample
@@ -9,3 +9,7 @@ DEFAULT_LURE=
 DEFAULT_PRIORITY_TOKEN=
 RECAPTCHA_SITE_KEY_ANDROID=
 RECAPTCHA_SITE_KEY_IOS=
+DEFAULT_TLON_LOGIN_EMAIL=
+DEFAULT_TLON_LOGIN_PASSWORD=
+DEFAULT_SHIP_LOGIN_URL=
+DEFAULT_SHIP_LOGIN_ACCESS_CODE=
diff --git a/apps/tlon-mobile/README.md b/apps/tlon-mobile/README.md
@@ -70,6 +70,25 @@ Plug in your iOS device or start the iPhone Simulator and run the application in
 npm run ios
 ```
 
+## Debugging
+
+### Dev tools
+
+Press `j` while running expo-cli/metro to open chrome devtools. You can use the devtools to view logs, network requests, and more. [More info here](https://docs.expo.dev/debugging/tools/#debugging-with-chrome-devtools).
+
+### Default Credentials
+
+To streamline testing the login flow, you can use env variables to prepopulate fields in the Tlon Login and ship login screen. The relevant variables are:
+
+```
+DEFAULT_TLON_LOGIN_EMAIL=
+DEFAULT_TLON_LOGIN_PASSWORD=
+DEFAULT_SHIP_LOGIN_URL=
+DEFAULT_SHIP_LOGIN_ACCESS_CODE=
+```
+
+See `.env.sample` for other configurable env variables.
+
 ## Deployment
 
 Deployment is handled by [Expo Application Services](https://expo.dev/eas).

diff --git a/apps/tlon-mobile/app.config.ts b/apps/tlon-mobile/app.config.ts
@@ -23,10 +23,12 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     shipUrlPattern: process.env.SHIP_URL_PATTERN,
     defaultLure: process.env.DEFAULT_LURE,
     defaultPriorityToken: process.env.DEFAULT_PRIORITY_TOKEN,
+    defaultTlonLoginEmail: process.env.DEFAULT_TLON_LOGIN_EMAIL,
+    defaultTlonLoginPassword: process.env.DEFAULT_TLON_LOGIN_PASSWORD,
+    defaultShipLoginUrl: process.env.DEFAULT_SHIP_LOGIN_URL,
+    defaultShipLoginAccessCode: process.env.DEFAULT_SHIP_LOGIN_ACCESS_CODE,
     recaptchaSiteKeyAndroid: process.env.RECAPTCHA_SITE_KEY_ANDROID,
     recaptchaSiteKeyIOS: process.env.RECAPTCHA_SITE_KEY_IOS,
-    devLocal: Boolean(process.env.DEV_LOCAL),
-    devLocalCode: process.env.DEV_LOCAL_CODE,
   },
   ios: {
     runtimeVersion: '4.0.0',

diff --git a/apps/tlon-mobile/index.js b/apps/tlon-mobile/index.js
@@ -1,4 +1,5 @@
 import { registerRootComponent } from 'expo';
+import 'expo-dev-client';
 import { TailwindProvider } from 'tailwind-rn';
 
 import App from './src/App';

diff --git a/apps/tlon-mobile/ios/Landscape.xcodeproj/project.pbxproj b/apps/tlon-mobile/ios/Landscape.xcodeproj/project.pbxproj
@@ -482,7 +482,7 @@
 			mainGroup = 83CBB9F61A601CBA00E9B192;
 			packageReferences = (
 				70A62C5F2A5A6B1A00EBED16 /* XCRemoteSwiftPackageReference "SimpleKeychain" */,
-				70D386462A6098F800AFB46E /* XCRemoteSwiftPackageReference "Alamofire" */,
+				70D386462A6098F800AFB46E /* XCRemoteSwiftPackageReference "Alamofire.git" */,
 				70D3866D2A60A3B300AFB46E /* XCRemoteSwiftPackageReference "UrsusSigil" */,
 			);
 			productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
@@ -653,12 +653,16 @@
 				"${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/EXConstants.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/EXUpdates/EXUpdates.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/RCTI18nStrings.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/expo-dev-launcher/EXDevLauncher.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/expo-dev-menu/EXDevMenu.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXConstants.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXUpdates.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCTI18nStrings.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXDevLauncher.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXDevMenu.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
@@ -729,12 +733,16 @@
 				"${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/EXConstants.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/EXUpdates/EXUpdates.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/RCTI18nStrings.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/expo-dev-launcher/EXDevLauncher.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/expo-dev-menu/EXDevMenu.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXConstants.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXUpdates.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCTI18nStrings.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXDevLauncher.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXDevMenu.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
@@ -1360,7 +1368,7 @@
 				minimumVersion = 1.0.0;
 			};
 		};
-		70D386462A6098F800AFB46E /* XCRemoteSwiftPackageReference "Alamofire" */ = {
+		70D386462A6098F800AFB46E /* XCRemoteSwiftPackageReference "Alamofire.git" */ = {
 			isa = XCRemoteSwiftPackageReference;
 			repositoryURL = "https://github.com/Alamofire/Alamofire.git";
 			requirement = {
@@ -1384,7 +1392,7 @@
 				minimumVersion = 1.0.0;
 			};
 		};
-		70DBBFE32B7C60B50021EA96 /* XCRemoteSwiftPackageReference "Alamofire" */ = {
+		70DBBFE32B7C60B50021EA96 /* XCRemoteSwiftPackageReference "Alamofire.git" */ = {
 			isa = XCRemoteSwiftPackageReference;
 			repositoryURL = "https://github.com/Alamofire/Alamofire.git";
 			requirement = {
@@ -1410,7 +1418,7 @@
 		};
 		70D386472A6098F800AFB46E /* Alamofire */ = {
 			isa = XCSwiftPackageProductDependency;
-			package = 70D386462A6098F800AFB46E /* XCRemoteSwiftPackageReference "Alamofire" */;
+			package = 70D386462A6098F800AFB46E /* XCRemoteSwiftPackageReference "Alamofire.git" */;
 			productName = Alamofire;
 		};
 		70D3866E2A60A3B300AFB46E /* UrsusSigil */ = {
@@ -1425,7 +1433,7 @@
 		};
 		70DBBFE22B7C60B50021EA96 /* Alamofire */ = {
 			isa = XCSwiftPackageProductDependency;
-			package = 70DBBFE32B7C60B50021EA96 /* XCRemoteSwiftPackageReference "Alamofire" */;
+			package = 70DBBFE32B7C60B50021EA96 /* XCRemoteSwiftPackageReference "Alamofire.git" */;
 			productName = Alamofire;
 		};
 		70DBBFE42B7C60B50021EA96 /* UrsusSigil */ = {

diff --git a/apps/tlon-mobile/ios/Podfile.lock b/apps/tlon-mobile/ios/Podfile.lock
@@ -17,6 +17,73 @@ PODS:
     - ExpoModulesCore
   - Expo (50.0.6):
     - ExpoModulesCore
+  - expo-dev-client (3.3.9):
+    - EXManifests
+    - expo-dev-launcher
+    - expo-dev-menu
+    - expo-dev-menu-interface
+    - EXUpdatesInterface
+  - expo-dev-launcher (3.6.7):
+    - EXManifests
+    - expo-dev-launcher/Main (= 3.6.7)
+    - expo-dev-menu
+    - expo-dev-menu-interface
+    - ExpoModulesCore
+    - EXUpdatesInterface
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Core
+    - React-RCTAppDelegate
+  - expo-dev-launcher/Main (3.6.7):
+    - EXManifests
+    - expo-dev-launcher/Unsafe
+    - expo-dev-menu
+    - expo-dev-menu-interface
+    - ExpoModulesCore
+    - EXUpdatesInterface
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Core
+    - React-RCTAppDelegate
+  - expo-dev-launcher/Unsafe (3.6.7):
+    - EXManifests
+    - expo-dev-menu
+    - expo-dev-menu-interface
+    - ExpoModulesCore
+    - EXUpdatesInterface
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Core
+    - React-RCTAppDelegate
+  - expo-dev-menu (4.5.6):
+    - expo-dev-menu/Main (= 4.5.6)
+    - expo-dev-menu/ReactNativeCompatibles (= 4.5.6)
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Core
+  - expo-dev-menu-interface (1.7.2)
+  - expo-dev-menu/Main (4.5.6):
+    - EXManifests
+    - expo-dev-menu-interface
+    - expo-dev-menu/Vendored
+    - ExpoModulesCore
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Core
+  - expo-dev-menu/ReactNativeCompatibles (4.5.6):
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Core
+  - expo-dev-menu/SafeAreaView (4.5.6):
+    - ExpoModulesCore
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Core
+  - expo-dev-menu/Vendored (4.5.6):
+    - expo-dev-menu/SafeAreaView
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Core
   - ExpoClipboard (5.0.1):
     - ExpoModulesCore
   - ExpoDevice (5.9.3):
@@ -1227,6 +1294,10 @@ DEPENDENCIES:
   - EXManifests (from `../../../node_modules/expo-manifests/ios`)
   - EXNotifications (from `../../../node_modules/expo-notifications/ios`)
   - Expo (from `../../../node_modules/expo`)
+  - expo-dev-client (from `../../../node_modules/expo-dev-client/ios`)
+  - expo-dev-launcher (from `../../../node_modules/expo-dev-launcher`)
+  - expo-dev-menu (from `../../../node_modules/expo-dev-menu`)
+  - expo-dev-menu-interface (from `../../../node_modules/expo-dev-menu-interface/ios`)
   - ExpoClipboard (from `../../../node_modules/expo-clipboard/ios`)
   - ExpoDevice (from `../../../node_modules/expo-device/ios`)
   - ExpoFileSystem (from `../../../node_modules/expo-file-system/ios`)
@@ -1348,6 +1419,14 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/expo-notifications/ios"
   Expo:
     :path: "../../../node_modules/expo"
+  expo-dev-client:
+    :path: "../../../node_modules/expo-dev-client/ios"
+  expo-dev-launcher:
+    :path: "../../../node_modules/expo-dev-launcher"
+  expo-dev-menu:
+    :path: "../../../node_modules/expo-dev-menu"
+  expo-dev-menu-interface:
+    :path: "../../../node_modules/expo-dev-menu-interface/ios"
   ExpoClipboard:
     :path: "../../../node_modules/expo-clipboard/ios"
   ExpoDevice:
@@ -1508,6 +1587,10 @@ SPEC CHECKSUMS:
   EXManifests: 5e8c29f36c716af768a4ea47ec05e1b89ab93091
   EXNotifications: e11f0e9a5b657c064a481a5d522f3bc5a07bf7cd
   Expo: fb745b3074989670b6641f9f20463e8ee56a69ca
+  expo-dev-client: dbc8e8a81d17a9d92e083a2856d056ba9a58984d
+  expo-dev-launcher: fcdb0f3e91c34778f0816b0f590c7a57f052a87c
+  expo-dev-menu: 166fc9c7b82641cdead1dc26d958d20a127ee97b
+  expo-dev-menu-interface: 7ba029c9d1a82ac22b9b584c00514860b060553e
   ExpoClipboard: b597982124f067ff9f5b89093eb3d97898d5d877
   ExpoDevice: d204395e17fffdcefa7470bdef33b07719ac41b1
   ExpoFileSystem: a9273932e69a9a1e1a8d01b6ba895bb8294bbea2
@@ -1599,7 +1682,7 @@ SPEC CHECKSUMS:
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   sqlite3: f163dbbb7aa3339ad8fc622782c2d9d7b72f7e9c
   UMAppLoader: 5df85360d65cabaef544be5424ac64672e648482
-  Yoga: 1b901a6d6eeba4e8a2e8f308f708691cdb5db312
+  Yoga: 64cd2a583ead952b0315d5135bf39e053ae9be70
 
 PODFILE CHECKSUM: 82da24eb176d4abdeaf445b3581717ec492dd7e8
 

diff --git a/apps/tlon-mobile/package.json b/apps/tlon-mobile/package.json
@@ -48,6 +48,7 @@
     "expo-asset": "~9.0.2",
     "expo-clipboard": "~5.0.1",
     "expo-constants": "~15.4.5",
+    "expo-dev-client": "^3.3.9",
     "expo-device": "~5.9.3",
     "expo-file-system": "~16.0.6",
     "expo-localization": "~14.8.3",

diff --git a/apps/tlon-mobile/src/App.tsx b/apps/tlon-mobile/src/App.tsx
@@ -15,14 +15,12 @@ import { useTailwind } from 'tailwind-rn';
 
 import AuthenticatedApp from './components/AuthenticatedApp';
 import { LoadingSpinner } from './components/LoadingSpinner';
-import { DEV_LOCAL, DEV_LOCAL_CODE } from './constants';
 import { BranchProvider, useBranch } from './contexts/branch';
 import { ShipProvider, useShip } from './contexts/ship';
 import * as db from './db';
 import { useIsDarkMode } from './hooks/useIsDarkMode';
 import { useScreenOptions } from './hooks/useScreenOptions';
 import { syncContacts } from './lib/sync';
-import { useDevTools } from './lib/useDevTools';
 import { CheckVerifyScreen } from './screens/CheckVerifyScreen';
 import { EULAScreen } from './screens/EULAScreen';
 import { JoinWaitListScreen } from './screens/JoinWaitListScreen';
@@ -50,7 +48,6 @@ const OnboardingStack = createNativeStackNavigator<OnboardingStackParamList>();
 // on Android if a notification click causes the app to open, the corresponding notification
 // path is passed in here as "wer"
 const App = ({ wer }: Props) => {
-  useDevTools({ enabled: DEV_LOCAL, localCode: DEV_LOCAL_CODE });
   const isDarkMode = useIsDarkMode();
   const tailwind = useTailwind();
   const { isLoading, isAuthenticated } = useShip();

diff --git a/apps/tlon-mobile/src/components/SingletonWebview.tsx b/apps/tlon-mobile/src/components/SingletonWebview.tsx
@@ -11,7 +11,7 @@ import { URL } from 'react-native-url-polyfill';
 import { WebView } from 'react-native-webview';
 import { useTailwind } from 'tailwind-rn';
 
-import { DEV_LOCAL } from '../constants';
+import { DEFAULT_SHIP_LOGIN_URL, DEFAULT_TLON_LOGIN_EMAIL } from '../constants';
 import { useShip } from '../contexts/ship';
 import { useWebViewContext } from '../contexts/webview/webview';
 import { useWebView } from '../hooks/useWebView';
@@ -139,7 +139,8 @@ export const SingletonWebview = () => {
         window.colorscheme="${nativeOptions.colorScheme}";
         window.safeAreaInsets=${JSON.stringify(nativeOptions.safeAreaInsets)};
         ${
-          DEV_LOCAL
+          // in development, explicitly set Urbit runtime configured window vars
+          DEFAULT_SHIP_LOGIN_URL || DEFAULT_TLON_LOGIN_EMAIL
             ? ` window.our="${ship}"; window.ship="${ship?.slice(1)}"; `
             : ''
         }

diff --git a/apps/tlon-mobile/src/constants.ts b/apps/tlon-mobile/src/constants.ts
@@ -27,6 +27,8 @@ export const SHIP_URL_PATTERN =
   extra.shipUrlPattern ?? 'https://{shipId}.tlon.network';
 export const DEFAULT_LURE = extra.defaultLure ?? '~nibset-napwyn/tlon';
 export const DEFAULT_PRIORITY_TOKEN = extra.defaultPriorityToken ?? 'mobile';
-
-export const DEV_LOCAL = extra.devLocal ? Boolean(extra.devLocal) : false;
-export const DEV_LOCAL_CODE = extra.devLocalCode ?? '';
+export const DEFAULT_TLON_LOGIN_EMAIL = extra.defaultTlonLoginEmail ?? '';
+export const DEFAULT_TLON_LOGIN_PASSWORD = extra.defaultTlonLoginPassword ?? '';
+export const DEFAULT_SHIP_LOGIN_URL = extra.defaultShipLoginUrl ?? '';
+export const DEFAULT_SHIP_LOGIN_ACCESS_CODE =
+  extra.defaultShipLoginAccessCode ?? '';
diff --git a/apps/tlon-mobile/src/lib/useDevTools.ts b/apps/tlon-mobile/src/lib/useDevTools.ts
diff --git a/apps/tlon-mobile/src/screens/ShipLoginScreen.tsx b/apps/tlon-mobile/src/screens/ShipLoginScreen.tsx
@@ -6,7 +6,11 @@ import { useTailwind } from 'tailwind-rn';
 
 import { HeaderButton } from '../components/HeaderButton';
 import { LoadingSpinner } from '../components/LoadingSpinner';
-import { ACCESS_CODE_REGEX } from '../constants';
+import {
+  ACCESS_CODE_REGEX,
+  DEFAULT_SHIP_LOGIN_ACCESS_CODE,
+  DEFAULT_SHIP_LOGIN_URL,
+} from '../constants';
 import { useShip } from '../contexts/ship';
 import { getLandscapeAuthCookie } from '../lib/landscapeApi';
 import type { OnboardingStackParamList } from '../types';
@@ -34,7 +38,12 @@ export const ShipLoginScreen = ({ navigation }: Props) => {
     handleSubmit,
     formState: { errors },
     setValue,
-  } = useForm<FormData>();
+  } = useForm<FormData>({
+    defaultValues: {
+      shipUrl: DEFAULT_SHIP_LOGIN_URL,
+      accessCode: DEFAULT_SHIP_LOGIN_ACCESS_CODE,
+    },
+  });
   const { setShip } = useShip();
 
   const onSubmit = handleSubmit(async ({ shipUrl: rawShipUrl, accessCode }) => {