Merge pull request #227 from xmtp/main

`main` => `beta`

.github/workflows/syncBeta.yml

@@ -0,0 +1,19 @@
+name: Auto PR Creation
+on:
+  schedule:
+    - cron: '5 9 * * 5' # Runs at 1:05 AM PT(-8) every Monday (time in UTC)
+  workflow_dispatch:
+
+jobs:
+  create-pr:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+      - name: Create Pull Request
+        uses: repo-sync/pull-request@v2
+        with:
+          source_branch: "main"
+          destination_branch: "beta"
+          pr_title: "`main` => `beta`"
+          github_token: ${{ secrets.GITHUB_TOKEN }}

android/build.gradle

@@ -66,15 +66,18 @@ afterEvaluate {
 }
 
 android {
-  compileSdkVersion safeExtGet("compileSdkVersion", 31)
+  compileSdkVersion safeExtGet("compileSdkVersion", 33)
 
-  compileOptions {
-    sourceCompatibility JavaVersion.VERSION_11
-    targetCompatibility JavaVersion.VERSION_11
-  }
+  def agpVersion = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION
+  if (agpVersion.tokenize('.')[0].toInteger() < 8) {
+    compileOptions {
+      sourceCompatibility JavaVersion.VERSION_11
+      targetCompatibility JavaVersion.VERSION_11
+    }
 
-  kotlinOptions {
-    jvmTarget = JavaVersion.VERSION_11.majorVersion
+    kotlinOptions {
+      jvmTarget = JavaVersion.VERSION_11.majorVersion
+    }
   }
 
   defaultConfig {
@@ -95,7 +98,7 @@ repositories {
 dependencies {
   implementation project(':expo-modules-core')
   implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:${getKotlinVersion()}"
-  implementation "org.xmtp:android:0.7.3"
+  implementation "org.xmtp:android:0.7.6"
   implementation 'com.google.code.gson:gson:2.10.1'
   implementation 'com.facebook.react:react-native:0.71.3'
   implementation "com.daveanthonythomas.moshipack:moshipack:1.0.1"

android/src/main/java/expo/modules/xmtpreactnativesdk/XMTPModule.kt

@@ -26,7 +26,6 @@ import kotlinx.coroutines.suspendCancellableCoroutine
 import org.json.JSONObject
 import org.xmtp.android.library.Client
 import org.xmtp.android.library.ClientOptions
-import org.xmtp.android.library.ConsentState
 import org.xmtp.android.library.Conversation
 import org.xmtp.android.library.PreEventCallback
 import org.xmtp.android.library.PreparedMessage
@@ -156,9 +155,9 @@ class XMTPModule : Module() {
             val reactSigner = ReactNativeSigner(module = this@XMTPModule, address = address)
             signer = reactSigner
 
-            if (hasCreateIdentityCallback == true) 
+            if (hasCreateIdentityCallback == true)
                 preCreateIdentityCallbackDeferred = CompletableDeferred()
-            if (hasEnableIdentityCallback == true) 
+            if (hasEnableIdentityCallback == true)
                 preEnableIdentityCallbackDeferred = CompletableDeferred()
             val preCreateIdentityCallback: PreEventCallback? =
                 preCreateIdentityCallback.takeIf { hasCreateIdentityCallback == true }
@@ -185,9 +184,9 @@ class XMTPModule : Module() {
             logV("createRandom")
             val privateKey = PrivateKeyBuilder()
 
-            if (hasCreateIdentityCallback == true) 
+            if (hasCreateIdentityCallback == true)
                 preCreateIdentityCallbackDeferred = CompletableDeferred()
-            if (hasEnableIdentityCallback == true) 
+            if (hasEnableIdentityCallback == true)
                 preEnableIdentityCallbackDeferred = CompletableDeferred()
             val preCreateIdentityCallback: PreEventCallback? =
                 preCreateIdentityCallback.takeIf { hasCreateIdentityCallback == true }
@@ -476,7 +475,7 @@ class XMTPModule : Module() {
                     }
                 }
             val encodedContent = EncodedContent.parseFrom(encodedContentDataBytes)
-    
+
             val prepared = conversation.prepareMessage(
                 encodedContent = encodedContent,
             )
@@ -643,7 +642,7 @@ class XMTPModule : Module() {
             preCreateIdentityCallbackDeferred?.complete(Unit)
         }
 
-        Function("preEnableIdentityCallbackCompleted") { 
+        Function("preEnableIdentityCallbackCompleted") {
             logV("preEnableIdentityCallbackCompleted")
             preEnableIdentityCallbackDeferred?.complete(Unit)
         }

android/src/main/java/expo/modules/xmtpreactnativesdk/wrappers/ContentJson.kt

@@ -51,8 +51,6 @@ class ContentJson(
             Client.register(RemoteAttachmentCodec())
             Client.register(ReplyCodec())
             Client.register(ReadReceiptCodec())
-            // TODO:
-            //Client.register(CompositeCodec())
         }
 
         fun fromJsonObject(obj: JsonObject): ContentJson {
@@ -121,8 +119,8 @@ class ContentJson(
             return fromJsonObject(obj);
         }
 
-        fun bytesFrom64(bytes64: String): ByteArray = Base64.decode(bytes64, Base64.DEFAULT)
-        fun bytesTo64(bytes: ByteArray): String = Base64.encodeToString(bytes, Base64.DEFAULT)
+        fun bytesFrom64(bytes64: String): ByteArray = Base64.decode(bytes64, Base64.NO_WRAP)
+        fun bytesTo64(bytes: ByteArray): String = Base64.encodeToString(bytes, Base64.NO_WRAP)
     }
 
     fun toJsonMap(): Map<String, Any> {
@@ -186,6 +184,8 @@ class ContentJson(
                     json.addProperty("fallback", encodedContent.fallback)
                     json.add("parameters", JsonParser.parseString(parameters))
                     json.add("type", typeJson)
+                    json.addProperty("content", bytesTo64(encodedContent.content.toByteArray()))
+
                 }
                 val encodedContentJSON = json.toString()
                 if (encodedContentJSON.isNotBlank()) {

android/src/main/java/expo/modules/xmtpreactnativesdk/wrappers/ConversationWrapper.kt

@@ -1,5 +1,6 @@
 package expo.modules.xmtpreactnativesdk.wrappers
 
+import android.util.Base64
 import com.google.gson.GsonBuilder
 import org.xmtp.android.library.Client
 import org.xmtp.android.library.Conversation
@@ -24,7 +25,8 @@ class ConversationWrapper {
                 "topic" to conversation.topic,
                 "peerAddress" to conversation.peerAddress,
                 "version" to if (conversation.version == Conversation.Version.V1) "v1" else "v2",
-                "conversationID" to (conversation.conversationId ?: "")
+                "conversationID" to (conversation.conversationId ?: ""),
+                "keyMaterial" to Base64.encodeToString(conversation.keyMaterial, Base64.NO_WRAP)
             )
         }
 

example/.gitignore

@@ -15,3 +15,6 @@ web-build/
 
 # Temporary files created by Metro to check the health of the file watcher
 .metro-health-check*
+
+# Environment settings
+.env

example/App.tsx

@@ -9,68 +9,88 @@ import HomeScreen from './src/HomeScreen'
 import LaunchScreen from './src/LaunchScreen'
 import { Navigator } from './src/Navigation'
 import TestScreen from './src/TestScreen'
+import { ThirdwebProvider, metamaskWallet, rainbowWallet } from '@thirdweb-dev/react-native'
+import { Ethereum } from '@thirdweb-dev/chains'
+import Config from 'react-native-config'
 
 const queryClient = new QueryClient()
+
 export default function App() {
+  // Uncomment below to ensure correct id loaded from .env
+  // console.log("Thirdweb client id: " + Config.THIRD_WEB_CLIENT_ID)
   return (
-    <QueryClientProvider client={queryClient}>
-      <XmtpProvider>
-        <NavigationContainer>
-          <Navigator.Navigator>
-            <Navigator.Screen
-              name="launch"
-              component={LaunchScreen}
-              options={{
-                title: 'XMTP RN Example',
-                headerStyle: {
-                  backgroundColor: 'rgb(49 0 110)',
-                },
-                headerTintColor: '#fff',
-                headerTitleStyle: {
-                  fontWeight: 'bold',
-                },
-              }}
-            />
-            <Navigator.Screen
-              name="test"
-              component={TestScreen}
-              options={{ title: 'Unit Tests' }}
-            />
-            <Navigator.Screen
-              name="home"
-              component={HomeScreen}
-              options={({ navigation }) => ({
-                title: 'My Conversations',
-                headerStyle: {
-                  backgroundColor: 'rgb(49 0 110)',
-                },
-                headerTintColor: '#fff',
-                headerTitleStyle: {
-                  fontWeight: 'bold',
-                },
-                headerRight: () => (
-                  <Button
-                    onPress={() => navigation.navigate('conversationCreate')}
-                    title="New"
-                    color={Platform.OS === 'ios' ? '#fff' : 'rgb(49 0 110)'}
-                  />
-                ),
-              })}
-            />
-            <Navigator.Screen
-              name="conversation"
-              component={ConversationScreen}
-              options={{ title: 'Conversation' }}
-              initialParams={{ topic: '' }}
-            />
-            <Navigator.Screen
-              name="conversationCreate"
-              component={ConversationCreateScreen}
-              options={{ title: 'New Conversation' }}
-            />
-          </Navigator.Navigator>
-        </NavigationContainer>
-      </XmtpProvider>
-    </QueryClientProvider>
+    <ThirdwebProvider
+      activeChain={ Ethereum }
+      supportedChains={ [ Ethereum ] }
+      clientId={ Config.THIRD_WEB_CLIENT_ID }
+      dAppMeta={{
+        name: 'XMTP Example',
+        description: 'Example app from xmtp-react-native repo',
+        logoUrl: 'https://pbs.twimg.com/profile_images/1668323456935510016/2c_Ue8dF_400x400.jpg',
+        url: 'https://xmtp.org',
+      }}
+      supportedWallets={[
+        metamaskWallet(), rainbowWallet()
+      ]}>
+      <QueryClientProvider client={queryClient}>
+        <XmtpProvider>
+          <NavigationContainer>
+            <Navigator.Navigator>
+              <Navigator.Screen
+                name="launch"
+                component={LaunchScreen}
+                options={{
+                  title: 'XMTP RN Example',
+                  headerStyle: {
+                    backgroundColor: 'rgb(49 0 110)',
+                  },
+                  headerTintColor: '#fff',
+                  headerTitleStyle: {
+                    fontWeight: 'bold',
+                  },
+                }}
+              />
+              <Navigator.Screen
+                name="test"
+                component={TestScreen}
+                options={{ title: 'Unit Tests' }}
+              />
+              <Navigator.Screen
+                name="home"
+                component={HomeScreen}
+                options={({ navigation }) => ({
+                  title: 'My Conversations',
+                  headerStyle: {
+                    backgroundColor: 'rgb(49 0 110)',
+                  },
+                  headerTintColor: '#fff',
+                  headerTitleStyle: {
+                    fontWeight: 'bold',
+                  },
+                  headerRight: () => (
+                    <Button
+                      onPress={() => navigation.navigate('conversationCreate')}
+                      title="New"
+                      color={Platform.OS === 'ios' ? '#fff' : 'rgb(49 0 110)'}
+                    />
+                  ),
+                })}
+              />
+              <Navigator.Screen
+                name="conversation"
+                component={ConversationScreen}
+                options={{ title: 'Conversation' }}
+                initialParams={{ topic: '' }}
+              />
+              <Navigator.Screen
+                name="conversationCreate"
+                component={ConversationCreateScreen}
+                options={{ title: 'New Conversation' }}
+              />
+            </Navigator.Navigator>
+          </NavigationContainer>
+        </XmtpProvider>
+      </QueryClientProvider>
+    </ThirdwebProvider>
   )
 }

example/EXAMPLE.env

@@ -0,0 +1 @@
+THIRD_WEB_CLIENT_ID=INSERT_CLIENT_ID_HERE

example/README.md

@@ -5,7 +5,7 @@ This basic messaging app has an intentionally unopinionated UI to help make it e
 ## Run the example app
 Follow the [React Native guide](https://reactnative.dev/docs/environment-setup) to set up a CLI environment.
 
-To use the example app, run:
+### To use the example app, run:
 
 ```bash
 yarn
@@ -15,6 +15,24 @@ npx pod-install
 yarn run [ios or android]
 ```
 
+### 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.
+
+First create a free account and download your client id from https://thirdweb.com/dashboard/settings/api-keys. Next create your .env file in the example directory
+
+```
+cd example
+cp EXAMPLE.env .env
+```
+Finally, insert yout Thirdweb client id in specified location of `example/.env` file:
+```
+THIRD_WEB_CLIENT_ID=INSERT_CLIENT_ID_HERE
+```
+
+If your app doesn't appear to be picking up changes in the .env file, you can try editing the TypeScript file you're reading the env variable from (`App.tsx`) or building the app with the `--no-build-cache` flag added.
+
+
 ## Run example app unit tests on local emulators
 Running tests locally is useful when updating GitHub actions, or locally testing between changes.
 

example/android/app/build.gradle

@@ -2,6 +2,8 @@ apply plugin: "com.android.application"
 apply plugin: "com.facebook.react"
 apply plugin: 'kotlin-android'
 
+apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
+
 import com.android.build.OutputFile
 
 def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
@@ -268,6 +270,9 @@ dependencies {
     androidTestImplementation "androidx.test.ext:junit-ktx:1.1.5"
     androidTestUtil "androidx.test.services:test-services:1.4.2"
     androidTestUtil 'androidx.test:orchestrator:1.4.2'
+
+    // For loading .env
+    implementation project(':react-native-config')
 }
 
 apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json')"].execute(null, rootDir).text.trim(), "../native_modules.gradle");

example/android/settings.gradle

@@ -8,3 +8,6 @@ applyNativeModulesSettingsGradle(settings)
 
 include ':app'
 includeBuild(new File(["node", "--print", "require.resolve('react-native-gradle-plugin/package.json')"].execute(null, rootDir).text.trim()).getParentFile())
+
+include ':react-native-config'
+project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-config/android')

example/index.js

@@ -1,3 +1,5 @@
+import "@thirdweb-dev/react-native-compat";
+
 import { registerRootComponent } from 'expo'
 
 import App from './App'

example/ios/Podfile

@@ -48,6 +48,9 @@ target 'xmtpreactnativesdkexample' do
   # Flags change depending on the env values.
   flags = get_default_flags()
 
+  # See https://github.com/margelo/react-native-quick-crypto/issues/189#issuecomment-1711561970
+  pod "OpenSSL-Universal", "1.1.2200"
+
   use_react_native!(
     :path => config[:reactNativePath],
     :hermes_enabled => podfile_properties['expo.jsEngine'] == nil || podfile_properties['expo.jsEngine'] == 'hermes',