Add WalletConnect auth

App.tsx

@@ -1,97 +1,41 @@
 /**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * Generated with the TypeScript template
- * https://github.com/react-native-community/react-native-template-typescript
- *
- * @format
+ * Example React Native App using XMTP.
  */
-
 import React from 'react';
-import {
-  Button,
-  Platform,
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
 
+// Polyfill necessary xmtp-js libraries for React Native.
 import './polyfills.js';
-import {Wallet} from 'ethers';
-import {utils as SecpUtils} from '@noble/secp256k1';
-import {Client} from '@xmtp/xmtp-js';
 
-import {Colors} from 'react-native/Libraries/NewAppScreen';
+import Home from './components/Home';
+import * as Linking from 'expo-linking';
+import {Text} from 'react-native';
+import {NavigationContainer} from '@react-navigation/native';
+import WalletConnectProvider from '@walletconnect/react-native-dapp';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
-const App = () => {
-  const isDarkMode = useColorScheme() === 'dark';
+const prefix = Linking.createURL('/');
+
+export const INFURA_API_KEY = '2bf116f1cc724c5ab9eec605ca8440e1';
 
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+const App = () => {
+  const linking = {
+    prefixes: [prefix],
   };
 
-  const account = new Wallet(SecpUtils.randomPrivateKey());
+  const APP_SCHEME = 'examplexmtp://';
 
   return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
-          <Text style={styles.sectionTitle}>Example Chat App</Text>
-          <Text>{account.address}</Text>
-          <Button title="Send a gm" onPress={() => sendGm(account)} />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
+    <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
+      <WalletConnectProvider
+        redirectUrl={APP_SCHEME}
+        storageOptions={{
+          // @ts-expect-error: Internal
+          asyncStorage: AsyncStorage,
+        }}>
+        <Home />
+      </WalletConnectProvider>
+    </NavigationContainer>
   );
 };
 
-async function sendGm(account: Wallet) {
-  console.log('creating xmtp client');
-  try {
-    const xmtp = await Client.create(account);
-    const conversation = await xmtp.conversations.newConversation(
-      'ENTER RECEIVING ACCOUNT ADDRESS HERE',
-    );
-    const message = await conversation.send(
-      `gm! ${Platform.OS === 'ios' ? 'from iOS' : 'from Android'}`,
-    );
-    console.log('sent message: ' + message.content);
-  } catch (error) {
-    console.log(`error creating client: ${error}`);
-  }
-}
-
-const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-});
-
 export default App;

android/app/src/main/AndroidManifest.xml

@@ -3,6 +3,17 @@
 
     <uses-permission android:name="android.permission.INTERNET" />
 
+    <queries>
+      <intent>
+          <action android:name="android.intent.action.VIEW" />
+          <data android:scheme="wc"/>
+      </intent>
+      <intent>
+          <action android:name="android.intent.action.VIEW" />
+          <data android:scheme="examplexmtp"/>
+      </intent>
+    </queries>
+
     <application
       android:name=".MainApplication"
       android:label="@string/app_name"

android/app/src/main/java/com/example_chat_rn/MainActivity.java

@@ -1,4 +1,5 @@
 package com.example_chat_rn;
+import expo.modules.ReactActivityDelegateWrapper;
 
 import com.facebook.react.ReactActivity;
 import com.facebook.react.ReactActivityDelegate;
@@ -22,7 +23,7 @@ protected String getMainComponentName() {
    */
   @Override
   protected ReactActivityDelegate createReactActivityDelegate() {
-    return new MainActivityDelegate(this, getMainComponentName());
+    return new ReactActivityDelegateWrapper(this, BuildConfig.IS_NEW_ARCHITECTURE_ENABLED, new MainActivityDelegate(this, getMainComponentName()));
   }
 
   public static class MainActivityDelegate extends ReactActivityDelegate {

android/app/src/main/java/com/example_chat_rn/MainApplication.java

@@ -1,4 +1,7 @@
 package com.example_chat_rn;
+import android.content.res.Configuration;
+import expo.modules.ApplicationLifecycleDispatcher;
+import expo.modules.ReactNativeHostWrapper;
 
 import android.app.Application;
 import android.content.Context;
@@ -16,7 +19,7 @@
 public class MainApplication extends Application implements ReactApplication {
 
   private final ReactNativeHost mReactNativeHost =
-      new ReactNativeHost(this) {
+      new ReactNativeHostWrapper(this, new ReactNativeHost(this) {
         @Override
         public boolean getUseDeveloperSupport() {
           return BuildConfig.DEBUG;
@@ -35,10 +38,10 @@ protected List<ReactPackage> getPackages() {
         protected String getJSMainModuleName() {
           return "index";
         }
-      };
+      });
 
   private final ReactNativeHost mNewArchitectureNativeHost =
-      new MainApplicationReactNativeHost(this);
+      new ReactNativeHostWrapper(this, new MainApplicationReactNativeHost(this));
 
   @Override
   public ReactNativeHost getReactNativeHost() {
@@ -56,6 +59,7 @@ public void onCreate() {
     ReactFeatureFlags.useTurboModules = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
     SoLoader.init(this, /* native exopackage */ false);
     initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
+    ApplicationLifecycleDispatcher.onApplicationCreate(this);
   }
 
   /**
@@ -88,4 +92,10 @@ private static void initializeFlipper(
       }
     }
   }
+
+  @Override
+  public void onConfigurationChanged(Configuration newConfig) {
+    super.onConfigurationChanged(newConfig);
+    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig);
+  }
 }

android/settings.gradle

@@ -9,3 +9,6 @@ if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true")
     include(":ReactAndroid:hermes-engine")
     project(":ReactAndroid:hermes-engine").projectDir = file('../node_modules/react-native/ReactAndroid/hermes-engine')
 }
+
+apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle")
+useExpoModules()

app.json

@@ -1,4 +1,7 @@
 {
   "name": "example_chat_rn",
-  "displayName": "example_chat_rn"
-}
+  "displayName": "example_chat_rn",
+  "expo": {
+    "scheme": "examplexmtp"
+  }
+}

components/Authenticating.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {ActivityIndicator, StyleSheet, Text, View} from 'react-native';
+
+const Authenticating = () => (
+  <View style={[styles.container]}>
+    <ActivityIndicator size="large" />
+    <Text style={[styles.text]}>Waiting for signature...</Text>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    marginTop: 10,
+  },
+});
+
+export default Authenticating;

components/Error.tsx

@@ -0,0 +1,24 @@
+import React, {FC} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+
+interface Props {
+  message: string;
+}
+
+const Error: FC<Props> = ({message}) => (
+  <View style={[styles.container]}>
+    <Text>Something went wrong</Text>
+    <Text>{message}</Text>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default Error;