Merge pull request #176 from xmtp/cameronvoell/example-wallet-auth

Added thirdweb ConnectWallet button to LaunchScreen
xmtp · Jan 20, 2024 · 1d16938 · 1d16938
2 parents a6afde6 + fc0d7a5
commit 1d16938
Show file tree

Hide file tree

Showing 15 changed files with 8,644 additions and 17,938 deletions.
diff --git a/example/.gitignore b/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
diff --git a/example/App.tsx b/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>
   )
 }
diff --git a/example/EXAMPLE.env b/example/EXAMPLE.env
@@ -0,0 +1 @@
+THIRD_WEB_CLIENT_ID=INSERT_CLIENT_ID_HERE
diff --git a/example/README.md b/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.
 

diff --git a/example/android/app/build.gradle b/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");

diff --git a/example/android/settings.gradle b/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')
diff --git a/example/index.js b/example/index.js
@@ -1,3 +1,5 @@
+import "@thirdweb-dev/react-native-compat";
+
 import { registerRootComponent } from 'expo'
 
 import App from './App'

diff --git a/example/ios/Podfile b/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',