Fixes remote attachments testing in example app

example/README.md

@@ -15,6 +15,24 @@ npx pod-install
 yarn run [ios or android]
 ```
 
+### If testing the remote attachment content type, run (from example directory):
+
+```bash
+yarn run upload:up
+```
+
+If running on andoid also run:
+
+```bash
+adb reverse tcp:8443 tcp:8443
+```
+
+To clean up after testing you can run:
+
+```bash
+yarn run upload:down
+```
+
 ### Configure ThirdWeb Client API
 
 > Note - The connect wallet button will still work without adding a client id, you just may see some extra network errors when viewing account info in the Thirdweb button after connecting.
@@ -38,19 +56,21 @@ Running tests locally is useful when updating GitHub actions, or locally testing
 
 1. [Install Docker](https://docs.docker.com/get-docker/)
 
-2. Start a local XMTP server (from example directory)
+2. Start a local XMTP server
     ```bash
-    docker-compose -p xmtp -f dev/local/docker-compose.yml up -d
+    git clone https://github.com/xmtp/libxmtp.git
+    cd libxmtp
+    dev/up
     ```
 3. Verify the XMTP server is running
     ```bash
     docker-compose ls
 
     NAME                STATUS              CONFIG FILES
-    xmtp                running(3)          <REPO_DIRECTORY>/xmtp-react-native/example/dev/local/docker-compose.yml
+    libxmtp             running(9)          <REPO_DIRECTORY>/libxmtp/dev/docker/docker-compose.yml
     ```
 4. You can now run unit tests on your local emulators
 5. You can stop the XMTP server with the following command:
     ```bash
-    docker-compose -p xmtp -f dev/local/docker-compose.yml down
+    dev/down
     ```

example/dev/local/docker-compose.yml

@@ -1,38 +1,5 @@
 version: "3.8"
 services:
-  wakunode:
-    image: xmtp/node-go:latest
-    platform: linux/amd64
-    environment:
-      - GOWAKU-NODEKEY=8a30dcb604b0b53627a5adc054dbf434b446628d4bd1eccc681d223f0550ce67
-    command:
-      - --store.enable
-      - --store.db-connection-string=postgres://postgres:xmtp@db:5432/postgres?sslmode=disable
-      - --store.reader-db-connection-string=postgres://postgres:xmtp@db:5432/postgres?sslmode=disable
-      - --wait-for-db=30s
-      - --api.authn.enable
-    ports:
-      - 9001:9001
-      - 5555:5555 # http message API
-      - 5556:5556 # grpc message API
-    depends_on:
-      - db
-    healthcheck:
-      test: [ "CMD", "lsof", "-i", ":5556" ]
-      interval: 3s
-      timeout: 10s
-      retries: 5
-  db:
-    image: postgres:13
-    environment:
-      POSTGRES_PASSWORD: xmtp
-  js:
-    restart: always
-    platform: linux/amd64
-    depends_on:
-      wakunode:
-        condition: service_healthy
-    build: ./test
 
   upload-service:
     build: ./upload-service
@@ -42,7 +9,7 @@ services:
   caddy:
     image: caddy:latest
     ports:
-      - "443:443"
+      - "8443:8443"
     volumes:
       - ./upload-service/Caddyfile:/etc/caddy/Caddyfile
       - ./upload-service/data/data:/data

example/dev/local/upload-service/Caddyfile

@@ -1,4 +1,4 @@
-localhost {
+localhost:8443 {
   tls internal
   reverse_proxy upload-service:4567
 }

example/package.json

@@ -6,7 +6,9 @@
     "android": "expo run:android",
     "ios": "expo run:ios",
     "ios:clean": "expo run:ios --no-build-cache",
-    "web": "expo start --web"
+    "web": "expo start --web",
+    "upload:up": "docker-compose -p xmtp -f dev/local/docker-compose.yml up -d",
+    "upload:down": "docker-compose -p xmtp -f dev/local/docker-compose.yml down"
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.21.0",

example/src/LaunchScreen.tsx

@@ -2,7 +2,6 @@ import { NativeStackScreenProps } from '@react-navigation/native-stack'
 import { ConnectWallet, useSigner } from '@thirdweb-dev/react-native'
 import React, { useCallback, useEffect, useState } from 'react'
 import { Button, ScrollView, StyleSheet, Text, View } from 'react-native'
-import EncryptedStorage from 'react-native-encrypted-storage'
 import ModalSelector from 'react-native-modal-selector'
 import * as XMTP from 'xmtp-react-native-sdk'
 import { useXmtp } from 'xmtp-react-native-sdk'

example/src/storage.ts

@@ -7,7 +7,7 @@ import ReactNativeBlobUtil from 'react-native-blob-util'
 
 const useLocalServer = !process.env.REACT_APP_USE_LOCAL_SERVER
 const storageUrl = useLocalServer
-  ? 'https://localhost'
+  ? 'https://localhost:8443'
   : process.env.REACT_APP_STORAGE_URL
 const headers = {
   'Content-Type': 'application/octet-stream',
@@ -19,15 +19,26 @@ export async function uploadFile(
 ): Promise<string> {
   const url = `${storageUrl}/${fileId}`
   console.log('uploading to', url)
-  await ReactNativeBlobUtil.config({
-    fileCache: true,
-    trusty: useLocalServer,
-  }).fetch(
-    'POST',
-    url,
-    headers,
-    ReactNativeBlobUtil.wrap(localFileUri.slice('file://'.length))
-  )
+
+  try {
+    await ReactNativeBlobUtil.config({
+      fileCache: true,
+      trusty: useLocalServer,
+    }).fetch(
+      'POST',
+      url,
+      headers,
+      ReactNativeBlobUtil.wrap(localFileUri.slice('file://'.length))
+    )
+  } catch (error) {
+    console.error(
+      'Error during file upload:',
+      error,
+      'Did you run the `yarn run upload:up` command from the xmtp-react-native/example directory?',
+      'Did you run `adb reverse tcp:8443 tcp:8443` if testing on Android?'
+    )
+    throw error
+  }
 
   return url
 }