adds the ability to run example app tests against d14n testnet staging

Author: cameronvoell

example/EXAMPLE.env

@@ -1,2 +1,3 @@
 TEST_PRIVATE_KEY=INSERT_TEST_PRIVATE_KEY_HERE
 THIRD_WEB_CLIENT_ID=INSERT_CLIENT_ID_HERE
+GATEWAY_HOST=D14N_GATEWAY_PAYER_HOST_URL_HERE

example/app.json

@@ -22,7 +22,8 @@
           "cameraPermission": "The app accesses your camera to let you attach photos as messages."
         }
       ],
-      "expo-secure-store"
+      "expo-secure-store",
+      "./plugins/withReactNativeConfigEnv.js"
     ],
     "ios": {
       "supportsTablet": true,

example/plugins/withReactNativeConfigEnv.js

@@ -0,0 +1,34 @@
+/**
+ * Expo config plugin: injects react-native-config's dotenv.gradle into the Android app build
+ * so that .env is loaded into BuildConfig and Config.* works on Android (same as iOS).
+ * Without this, env vars work on iOS but not Android after prebuild.
+ *
+ * @see https://github.com/luggit/react-native-config#android
+ */
+const { withAppBuildGradle } = require('expo/config-plugins')
+
+const DOTENV_LINE =
+  'apply from: project.file("../../node_modules/react-native-config/android/dotenv.gradle")'
+const COMMENT =
+  '// Load .env into BuildConfig so react-native-config Config.* works on Android (required for env vars in JS)'
+
+function withReactNativeConfigEnv(config) {
+  return withAppBuildGradle(config, (config) => {
+    const contents = config.modResults.contents
+    if (contents.includes('react-native-config/android/dotenv.gradle')) {
+      return config
+    }
+    const afterPlugins = contents.indexOf('apply plugin: "com.facebook.react"')
+    if (afterPlugins === -1) {
+      return config
+    }
+    const insertAt = contents.indexOf('\n', afterPlugins) + 1
+    const before = contents.slice(0, insertAt)
+    const after = contents.slice(insertAt)
+    config.modResults.contents =
+      before + '\n' + COMMENT + '\n' + DOTENV_LINE + '\n\n' + after
+    return config
+  })
+}
+
+module.exports = withReactNativeConfigEnv

example/src/LaunchScreen.tsx

@@ -1,6 +1,6 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
 // import { ConnectWallet, useSigner } from '@thirdweb-dev/react-native'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import {
   Button,
   ScrollView,
@@ -18,6 +18,7 @@ import { NavigationParamList } from './Navigation'
 import { TestCategory } from './TestScreen'
 import { supportedCodecs } from './contentTypes/contentTypes'
 import { getDbEncryptionKey } from './hooks'
+import { setTestEnv, type TestEnvOption } from './testEnv'
 
 // Custom Modal Picker Component
 const CustomPicker = ({
@@ -105,9 +106,15 @@ export default function LaunchScreen(
   const [selectedTest, setSelectedTest] = useState<TestCategory>(
     TestCategory.all
   )
+  const [selectedTestEnv, setSelectedTestEnv] = useState<TestEnvOption>('local')
   const [selectedNetwork, setSelectedNetwork] = useState<
     'dev' | 'local' | 'production'
   >('dev')
+
+  useEffect(() => {
+    setTestEnv(selectedTestEnv)
+  }, [selectedTestEnv])
+
   // const signer = useSigner()
   // const [signerAddressDisplay, setSignerAddressDisplay] = useState<string>()
   const { setClient } = useXmtp()
@@ -170,6 +177,12 @@ export default function LaunchScreen(
     label,
   }))
 
+  const testEnvOptions: { id: TestEnvOption; label: string }[] = [
+    { id: 'local', label: 'local' },
+    { id: 'dev', label: 'dev' },
+    { id: 'd14n', label: 'd14n (dev + gateway)' },
+  ]
+
   return (
     <ScrollView>
       <Text style={styles.title}>Automated Tests</Text>
@@ -182,6 +195,23 @@ export default function LaunchScreen(
           placeholder="Select Test"
         />
       </View>
+      <View style={styles.row}>
+        <Text style={styles.label}>Test environment:</Text>
+        <CustomPicker
+          value={
+            testEnvOptions.find((o) => o.id === selectedTestEnv)?.label ??
+            selectedTestEnv
+          }
+          onValueChange={(value) => {
+            const option = testEnvOptions.find((o) => o.label === value)
+            const env = (option?.id ?? value) as TestEnvOption
+            setSelectedTestEnv(env)
+            setTestEnv(env)
+          }}
+          options={testEnvOptions}
+          placeholder="Test environment"
+        />
+      </View>
       <View key="run-tests" style={{ margin: 16 }}>
         <Button
           title={`Run Selected Tests: ${selectedTest}`}

example/src/testEnv.ts

@@ -0,0 +1,18 @@
+/**
+ * Test environment selection for createClients() when no env is passed.
+ * Set from LaunchScreen; read from test-utils. Default is 'local'.
+ * - local: XMTP local network
+ * - dev: XMTP dev network
+ * - d14n: dev network with custom gateway (uses GATEWAY_HOST from .env)
+ */
+export type TestEnvOption = 'local' | 'dev' | 'd14n'
+
+let testEnv: TestEnvOption = 'local'
+
+export function getTestEnv(): TestEnvOption {
+  return testEnv
+}
+
+export function setTestEnv(value: TestEnvOption): void {
+  testEnv = value
+}

example/src/tests/clientTests.ts

@@ -1,7 +1,8 @@
 import { ethers, Wallet } from 'ethers'
+import Config from 'react-native-config'
 import RNFS from 'react-native-fs'
 import { ArchiveOptions } from 'xmtp-react-native-sdk/lib/ArchiveOptions'
-import { InstallationId } from 'xmtp-react-native-sdk/lib/Client'
+import { InstallationId, XMTPEnvironment } from 'xmtp-react-native-sdk/lib/Client'
 
 import {
   Test,
@@ -1330,3 +1331,46 @@ test('can import archive on top of full database', async () => {
 
   return true
 })
+
+test('can make a new client and build existing from existing db using d14n staging testnet', async () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const keyBytes = new Uint8Array([
+    233, 120, 198, 96, 154, 65, 132, 17, 132, 96, 250, 40, 103, 35, 125, 64,
+    166, 83, 208, 224, 254, 44, 205, 227, 175, 49, 234, 129, 74, 252, 135, 145,
+  ])
+  const dbDirPath = `${RNFS.DocumentDirectoryPath}/xmtp_db`
+  const directoryExists = await RNFS.exists(dbDirPath)
+  if (!directoryExists) {
+    await RNFS.mkdir(dbDirPath)
+  }
+
+  const options = {
+    env: 'dev' as XMTPEnvironment,
+    dbEncryptionKey: keyBytes,
+    dbDirectory: dbDirPath,
+    deviceSyncEnabled: false,
+    appVersion: '0.0.0',
+    gatewayHost: Config.GATEWAY_HOST
+  }
+  
+  const client = await Client.createRandom(options)
+
+  const inboxId = await Client.getOrCreateInboxId(
+    client.publicIdentity,
+    'dev'
+  )
+
+  assert(
+    client.inboxId === inboxId,
+    `inboxIds should match but were ${client.inboxId} and ${inboxId}`
+  )
+
+  const clientFromBundle = await Client.build(client.publicIdentity, options)
+
+  assert(
+    clientFromBundle.inboxId === client.inboxId,
+    `inboxIds should match but were ${clientFromBundle.inboxId} and ${client.inboxId}`
+  )
+
+  return true
+})

example/src/tests/test-utils.ts

@@ -1,5 +1,6 @@
 import { Wallet } from 'ethers'
 import { Platform } from 'expo-modules-core'
+import Config from 'react-native-config'
 import {
   Client,
   GroupUpdatedCodec,
@@ -17,6 +18,8 @@ import {
   ReplyCodec,
 } from 'xmtp-react-native-sdk'
 
+import { getTestEnv } from '../testEnv'
+
 // Debug logging state
 let debugLoggingEnabled = false
 
@@ -59,16 +62,37 @@ export async function createClients(
   env?: XMTPEnvironment | undefined,
   customCodecs?: JSContentCodec<any>[]
 ): Promise<Client[]> {
+  const keyBytes = new Uint8Array([
+    233, 120, 198, 96, 154, 65, 132, 17, 132, 96, 250, 40, 103, 35, 125, 64,
+    166, 83, 208, 224, 254, 44, 205, 227, 175, 49, 234, 129, 74, 252, 135, 145,
+  ])
+
+  let resolvedEnv: XMTPEnvironment
+  let gatewayHost: string | undefined
+  if (env !== undefined) {
+    resolvedEnv = env
+  } else {
+    const testEnvOption = getTestEnv()
+    if (testEnvOption === 'd14n') {
+      debugLog('Using d14n test environment')
+      resolvedEnv = 'dev'
+      gatewayHost = Config.GATEWAY_HOST
+      if (!gatewayHost) {
+        throw new Error(
+          'Test env is "d14n" but GATEWAY_HOST is not set. Copy EXAMPLE.env to .env, set GATEWAY_HOST, and rebuild the app.'
+        )
+      }
+    } else {
+      resolvedEnv = testEnvOption
+    }
+  }
+
   const clients = []
   for (let i = 0; i < numClients; i++) {
-    const keyBytes = new Uint8Array([
-      233, 120, 198, 96, 154, 65, 132, 17, 132, 96, 250, 40, 103, 35, 125, 64,
-      166, 83, 208, 224, 254, 44, 205, 227, 175, 49, 234, 129, 74, 252, 135,
-      145,
-    ])
     const client = await Client.createRandom({
-      env: env ?? 'local',
+      env: resolvedEnv,
       dbEncryptionKey: keyBytes,
+      ...(gatewayHost !== undefined && { gatewayHost }),
     })
     Client.register(new GroupUpdatedCodec())
     Client.register(new RemoteAttachmentCodec())

example/src/types/react-native-config.d.ts

@@ -3,6 +3,7 @@ declare module 'react-native-config' {
     THIRD_WEB_CLIENT_ID?: string
     TEST_PRIVATE_KEY?: string
     TEST_V3_PRIVATE_KEY?: string
+    GATEWAY_HOST?: string
   }
 
   export const Config: NativeConfig