Merge pull request #557 from xmtp/cv/example-app-fixes

Example app fixes
xmtp · Dec 6, 2024 · 92e712a · 92e712a
2 parents ad24e3e + 4d60b0d
commit 92e712a
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 65 deletions.
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -433,6 +433,8 @@ PODS:
     - React-perflogger (= 0.71.14)
   - RNCAsyncStorage (1.21.0):
     - React-Core
+  - RNCClipboard (1.5.1):
+    - React-Core
   - RNFS (2.20.0):
     - React-Core
   - RNScreens (3.20.0):
@@ -452,7 +454,7 @@ PODS:
     - CSecp256k1 (~> 0.2)
     - LibXMTP (= 3.0.10)
     - SQLCipher (= 4.5.7)
-  - XMTPReactNative (0.1.0):
+  - XMTPReactNative (3.1.1):
     - CSecp256k1 (~> 0.2)
     - ExpoModulesCore
     - MessagePacker
@@ -524,6 +526,7 @@ DEPENDENCIES:
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
+  - "RNCClipboard (from `../node_modules/@react-native-community/clipboard`)"
   - RNFS (from `../node_modules/react-native-fs`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNSVG (from `../node_modules/react-native-svg`)
@@ -668,6 +671,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-async-storage/async-storage"
+  RNCClipboard:
+    :path: "../node_modules/@react-native-community/clipboard"
   RNFS:
     :path: "../node_modules/react-native-fs"
   RNScreens:
@@ -751,13 +756,14 @@ SPEC CHECKSUMS:
   React-runtimeexecutor: ffe826b7b1cfbc32a35ed5b64d5886c0ff75f501
   ReactCommon: 7f3dd5e98a9ec627c6b03d26c062bf37ea9fc888
   RNCAsyncStorage: 618d03a5f52fbccb3d7010076bc54712844c18ef
+  RNCClipboard: 41d8d918092ae8e676f18adada19104fa3e68495
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
   RNScreens: 218801c16a2782546d30bd2026bb625c0302d70f
   RNSVG: d00c8f91c3cbf6d476451313a18f04d220d4f396
   SQLCipher: 5e6bfb47323635c8b657b1b27d25c5f1baf63bf5
   SwiftProtobuf: 4dbaffec76a39a8dc5da23b40af1a5dc01a4c02d
   XMTP: 3b586fa3703640bb5fec8a64daba9e157d9e5fdc
-  XMTPReactNative: ab20c0030e2092fb7201c42d6ec17a7055ec6bf8
+  XMTPReactNative: f3e1cbf80b7278b817bd42982703a95a9250497d
   Yoga: e71803b4c1fff832ccf9b92541e00f9b873119b9
 
 PODFILE CHECKSUM: 0e6fe50018f34e575d38dc6a1fdf1f99c9596cdd

diff --git a/example/package.json b/example/package.json
@@ -5,10 +5,12 @@
     "start": "expo start --dev-client",
     "android": "expo run:android",
     "ios": "expo run:ios",
+    "ios:clean": "expo run:ios --no-build-cache",
     "web": "expo start --web"
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.21.0",
+    "@react-native-community/clipboard": "^1.5.1",
     "@react-native-community/netinfo": "^11.2.0",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",

diff --git a/example/src/HomeScreen.tsx b/example/src/HomeScreen.tsx
@@ -1,3 +1,4 @@
+import Clipboard from '@react-native-community/clipboard'
 import { NavigationContext } from '@react-navigation/native'
 import moment from 'moment'
 import React, { useContext, useEffect, useState } from 'react'
@@ -8,6 +9,7 @@ import {
   StyleSheet,
   Text,
   View,
+  TouchableOpacity,
 } from 'react-native'
 import {
   Conversation,
@@ -16,7 +18,6 @@ import {
   DecodedMessage,
 } from 'xmtp-react-native-sdk'
 
-import { SupportedContentTypes } from './contentTypes/contentTypes'
 import { useConversationList } from './hooks'
 
 /// Show the user's list of conversations.
@@ -56,9 +57,26 @@ export default function HomeScreen() {
               }}
             >
               <Text style={{ fontSize: 14 }}>Connected as</Text>
-              <Text selectable style={{ fontSize: 14, fontWeight: 'bold' }}>
-                {client?.address}
-              </Text>
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <Text style={{ fontSize: 12, fontWeight: 'bold', flex: 1 }}>
+                  {client?.address}
+                </Text>
+                <TouchableOpacity
+                  onPress={() => {
+                    if (client?.address) {
+                      Clipboard.setString(client.address)
+                    }
+                  }}
+                  style={{
+                    padding: 8,
+                    backgroundColor: '#ddd',
+                    borderRadius: 4,
+                    marginLeft: 8,
+                  }}
+                >
+                  <Text>Copy</Text>
+                </TouchableOpacity>
+              </View>
             </View>
           }
         />
@@ -75,9 +93,7 @@ function ConversationItem({
   client: Client<any> | null
 }) {
   const navigation = useContext(NavigationContext)
-  const [messages, setMessages] = useState<
-    DecodedMessage<SupportedContentTypes>[]
-  >([])
+  const [messages, setMessages] = useState<DecodedMessage[]>([])
   const lastMessage = messages?.[0]
   const [consentState, setConsentState] = useState<string | undefined>()
 
@@ -103,11 +119,13 @@ function ConversationItem({
 
   return (
     <Pressable
-      onPress={() =>
+      onPress={() => {
+        console.log('conversation pressed')
+        console.log(conversation.topic)
         navigation!.navigate('conversation', {
-          id: conversation.id,
+          topic: conversation.topic,
         })
-      }
+      }}
     >
       <View
         style={{

diff --git a/example/src/hooks.tsx b/example/src/hooks.tsx
@@ -94,12 +94,15 @@ export function useMessages({
   topic,
 }: {
   topic: string
-}): UseQueryResult<DecodedMessage<SupportedContentTypes>[]> {
+}): UseQueryResult<DecodedMessage[]> {
   const { client } = useXmtp()
   const { data: conversation } = useConversation({ topic })
-  return useQuery<DecodedMessage<SupportedContentTypes>[]>(
+  return useQuery<DecodedMessage[]>(
     ['xmtp', 'messages', client?.address, conversation?.topic],
-    () => conversation!.messages(),
+    async () => {
+      await conversation!.sync()
+      return conversation!.messages()
+    },
     {
       enabled: !!client && !!topic && !!conversation,
     }
@@ -110,10 +113,10 @@ export function useGroupMessages({
   id,
 }: {
   id: string
-}): UseQueryResult<DecodedMessage<SupportedContentTypes>[]> {
+}): UseQueryResult<DecodedMessage[]> {
   const { client } = useXmtp()
   const { data: group } = useGroup({ groupId: id })
-  return useQuery<DecodedMessage<SupportedContentTypes>[]>(
+  return useQuery<DecodedMessage[]>(
     ['xmtp', 'groupMessages', client?.address, group?.id],
     async () => {
       await group!.sync()
@@ -139,7 +142,7 @@ export function useMessage({
   topic: string
   messageId: string
 }): {
-  message: DecodedMessage<SupportedContentTypes> | undefined
+  message: DecodedMessage | undefined
   isSenderMe: boolean
   performReaction:
     | undefined
@@ -183,7 +186,7 @@ export function useGroupMessage({
   groupId: string
   messageId: string
 }): {
-  message: DecodedMessage<SupportedContentTypes> | undefined
+  message: DecodedMessage | undefined
   isSenderMe: boolean
   performReaction:
     | undefined
@@ -551,29 +554,26 @@ export function useSavedAddress(): {
   }
 }
 
-export function getDbEncryptionKey(
+export async function getDbEncryptionKey(
   network: string,
   clear: boolean = false
-): Uint8Array {
+): Promise<Uint8Array> {
   const key = `xmtp-${network}`
-  // eslint-disable-next-line no-unused-expressions
-  ;async () => {
-    const result = await EncryptedStorage.getItem(key)
-    if ((result && clear === true) || !result) {
-      if (result) {
-        await EncryptedStorage.removeItem(key)
-      }
 
-      const randomBytes = crypto.getRandomValues(new Uint8Array(32))
-      const randomBytesString = uint8ArrayToHexString(randomBytes)
-      await EncryptedStorage.setItem(key, randomBytesString)
-      return randomBytes
-    } else {
-      return hexStringToUint8Array(result)
+  const result = await EncryptedStorage.getItem(key)
+  if ((result && clear === true) || !result) {
+    if (result) {
+      console.log('Removing existing dbEncryptionKey', key)
+      await EncryptedStorage.removeItem(key)
     }
+
+    const randomBytes = crypto.getRandomValues(new Uint8Array(32))
+    const randomBytesString = uint8ArrayToHexString(randomBytes)
+    await EncryptedStorage.setItem(key, randomBytesString)
+    return randomBytes
+  } else {
+    return hexStringToUint8Array(result)
   }
-  const randomBytes = crypto.getRandomValues(new Uint8Array(32))
-  return randomBytes
 }
 
 function uint8ArrayToHexString(byteArray: Uint8Array): string {

diff --git a/example/src/tests/conversationTests.ts b/example/src/tests/conversationTests.ts
@@ -1,4 +1,6 @@
+import { Wallet } from 'ethers'
 import RNFS from 'react-native-fs'
+
 import { Test, assert, createClients, delayToPropogate } from './test-utils'
 import {
   Client,
@@ -7,7 +9,6 @@ import {
   ConversationId,
   ConversationVersion,
 } from '../../../src/index'
-import { Wallet } from 'ethers'
 
 export const conversationTests: Test[] = []
 let counter = 1

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -5521,6 +5521,11 @@
     prompts "^2.4.0"
     semver "^6.3.0"
 
+"@react-native-community/clipboard@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.npmjs.org/@react-native-community/clipboard/-/clipboard-1.5.1.tgz#32abb3ea2eb91ee3f9c5fb1d32d5783253c9fabe"
+  integrity sha512-AHAmrkLEH5UtPaDiRqoULERHh3oNv7Dgs0bTC0hO5Z2GdNokAMPT5w8ci8aMcRemcwbtdHjxChgtjbeA38GBdA==
+
 "@react-native-community/netinfo@^11.2.0":
   version "11.2.1"
   resolved "https://registry.npmjs.org/@react-native-community/netinfo/-/netinfo-11.2.1.tgz"
@@ -14508,16 +14513,7 @@ strict-uri-encode@^2.0.0:
   resolved "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz"
   integrity sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -14591,7 +14587,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -14605,13 +14601,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz"
@@ -15882,7 +15871,7 @@ word-wrap@~1.2.3:
   resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -15900,15 +15889,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz"