update the example app

xmtp · Nov 11, 2024 · d48013a · d48013a
1 parent ef0a151
commit d48013a
Show file tree

Hide file tree

Showing 12 changed files with 216 additions and 119 deletions.
diff --git a/example/src/ConversationCreateScreen.tsx b/example/src/ConversationCreateScreen.tsx
@@ -22,15 +22,15 @@ export default function ConversationCreateScreen({
     }
     if (groupsEnabled) {
       const toAddresses = toAddress.split(',')
-      const canMessage = await client.canGroupMessage(toAddresses)
+      const canMessage = await client.canMessage(toAddresses)
       if (!canMessage) {
         setAlert(`${toAddress} cannot be added to a group conversation yet`)
         return
       }
       const group = await client.conversations.newGroup(toAddresses)
       navigation.navigate('group', { id: group.id })
     } else {
-      const canMessage = await client.canMessage(toAddress)
+      const canMessage = await client.canMessage([toAddress])
       if (!canMessage) {
         setAlert(`${toAddress} is not on the XMTP network yet`)
         return

diff --git a/example/src/ConversationScreen.tsx b/example/src/ConversationScreen.tsx
@@ -959,7 +959,7 @@ function MessageItem({
                   {message.senderAddress.slice(-4)}
                 </Text>
                 <Text style={{ fontWeight: '300' }}>
-                  {moment(message.sent).fromNow()}
+                  {moment(message.sentNs / 1000000).fromNow()}
                 </Text>
               </View>
             )}

diff --git a/example/src/GroupScreen.tsx b/example/src/GroupScreen.tsx
@@ -959,7 +959,7 @@ function MessageItem({
                   {message.senderAddress.slice(-4)}
                 </Text>
                 <Text style={{ fontWeight: '300' }}>
-                  {moment(message.sent).fromNow()}
+                  {moment(message.sentNs / 1000000).fromNow()}
                 </Text>
               </View>
             )}

diff --git a/example/src/HomeScreen.tsx b/example/src/HomeScreen.tsx
@@ -103,7 +103,7 @@ function GroupListItem({
   const [consentState, setConsentState] = useState<string | undefined>()
 
   const denyGroup = async () => {
-    await client?.contacts.denyGroups([group.id])
+    await group.updateConsent('denied')
     const consent = await group.consentState()
     setConsentState(consent)
   }
@@ -154,7 +154,7 @@ function GroupListItem({
             {lastMessage?.fallback}
           </Text>
           <Text>{lastMessage?.senderAddress}:</Text>
-          <Text>{moment(lastMessage?.sent).fromNow()}</Text>
+          <Text>{moment(lastMessage?.sentNs / 1000000).fromNow()}</Text>
         </View>
       </View>
     </Pressable>
@@ -185,7 +185,7 @@ function ConversationItem({
   }, [conversation])
 
   const denyContact = async () => {
-    await client?.contacts.deny([conversation.peerAddress])
+    await conversation.updateConsent('denied')
     conversation
       .consentState()
       .then(setConsentState)
@@ -223,7 +223,7 @@ function ConversationItem({
             {lastMessage?.fallback}
           </Text>
           <Text>{lastMessage?.senderAddress}:</Text>
-          <Text>{moment(lastMessage?.sent).fromNow()}</Text>
+          <Text>{moment(lastMessage?.sentNs / 1000000).fromNow()}</Text>
           <Text style={{ fontWeight: 'bold', color: 'red' }}>
             {getConsentState}
           </Text>

diff --git a/example/src/LaunchScreen.tsx b/example/src/LaunchScreen.tsx
@@ -10,7 +10,7 @@ import { useXmtp } from 'xmtp-react-native-sdk'
 import { NavigationParamList } from './Navigation'
 import { TestCategory } from './TestScreen'
 import { supportedCodecs } from './contentTypes/contentTypes'
-import { useSavedKeys } from './hooks'
+import { useSavedAddress } from './hooks'
 
 const appVersion = 'XMTP_RN_EX/0.0.1'
 
@@ -65,11 +65,10 @@ export default function LaunchScreen(
   const [selectedNetwork, setSelectedNetwork] = useState<
     'dev' | 'local' | 'production'
   >('dev')
-  const [enableGroups, setEnableGroups] = useState('true')
   const signer = useSigner()
   const [signerAddressDisplay, setSignerAddressDisplay] = useState<string>()
   const { setClient } = useXmtp()
-  const savedKeys = useSavedKeys()
+  const savedKeys = useSavedAddress()
   const configureWallet = useCallback(
     (label: string, configuring: Promise<XMTP.Client<any>>) => {
       console.log('Connecting XMTP client', label)
@@ -81,8 +80,7 @@ export default function LaunchScreen(
           setClient(client)
           navigation.navigate('home')
           // Save the configured client keys for use in later sessions.
-          const keyBundle = await client.exportKeyBundle()
-          await savedKeys.save(keyBundle)
+          await savedKeys.save(client.address)
         })
         .catch((err) =>
           console.log('Unable to connect XMTP client', label, err)
@@ -91,14 +89,6 @@ export default function LaunchScreen(
     []
   )
 
-  const preCreateIdentityCallback = () => {
-    console.log('Pre Create Identity Callback')
-  }
-
-  const preEnableIdentityCallback = () => {
-    console.log('Pre Enable Identity Callback')
-  }
-
   const preAuthenticateToInboxCallback = async () => {
     console.log('Pre Authenticate To Inbox Callback')
   }
@@ -191,10 +181,6 @@ export default function LaunchScreen(
           selectTextStyle={styles.modalSelectText}
           backdropPressToClose
           data={groupOptions}
-          initValue={enableGroups}
-          onChange={(option) => {
-            setEnableGroups(option.label)
-          }}
         />
       </View>
       <View style={styles.row}>
@@ -209,12 +195,7 @@ export default function LaunchScreen(
               color="orange"
               onPress={() => {
                 ;(async () => {
-                  console.log(
-                    'Using network ' +
-                      selectedNetwork +
-                      ' and enableV3 ' +
-                      enableGroups
-                  )
+                  console.log('Using network ' + selectedNetwork)
 
                   const dbEncryptionKey = await getDbEncryptionKey(
                     selectedNetwork,
@@ -227,10 +208,7 @@ export default function LaunchScreen(
                       env: selectedNetwork,
                       appVersion,
                       codecs: supportedCodecs,
-                      preCreateIdentityCallback,
-                      preEnableIdentityCallback,
                       preAuthenticateToInboxCallback,
-                      enableV3: enableGroups === 'true',
                       dbEncryptionKey,
                     })
                   )
@@ -246,12 +224,7 @@ export default function LaunchScreen(
           color="green"
           onPress={() => {
             ;(async () => {
-              console.log(
-                'Using network ' +
-                  selectedNetwork +
-                  ' and enableV3 ' +
-                  enableGroups
-              )
+              console.log('Using network ' + selectedNetwork)
               const dbEncryptionKey = await getDbEncryptionKey(
                 selectedNetwork,
                 true
@@ -262,40 +235,31 @@ export default function LaunchScreen(
                   env: selectedNetwork,
                   appVersion,
                   codecs: supportedCodecs,
-                  preCreateIdentityCallback,
-                  preEnableIdentityCallback,
                   preAuthenticateToInboxCallback,
-                  enableV3: enableGroups === 'true',
                   dbEncryptionKey,
                 })
               )
             })().catch(console.error) // Don't forget error handling
           }}
         />
       </View>
-      {!!savedKeys.keyBundle && (
+      {!!savedKeys.address && (
         <>
           <View key="saved-dev" style={{ margin: 16 }}>
             <Button
               title="Use Saved Wallet"
               color="purple"
               onPress={() => {
                 ;(async () => {
-                  console.log(
-                    'Using network ' +
-                      selectedNetwork +
-                      ' and enableV3 ' +
-                      enableGroups
-                  )
+                  console.log('Using network ' + selectedNetwork)
                   const dbEncryptionKey =
                     await getDbEncryptionKey(selectedNetwork)
                   configureWallet(
                     selectedNetwork,
-                    XMTP.Client.createFromKeyBundle(savedKeys.keyBundle!, {
+                    XMTP.Client.build(savedKeys.address!, {
                       env: selectedNetwork,
                       appVersion,
                       codecs: supportedCodecs,
-                      enableV3: enableGroups === 'true',
                       dbEncryptionKey,
                     })
                   )

diff --git a/example/src/StreamScreen.tsx b/example/src/StreamScreen.tsx
@@ -154,7 +154,7 @@ const ConversationItem = ({
           <FlatList
             data={messages}
             keyExtractor={(item) => item.id}
-            renderItem={({ item }) => <Text>{item.sent}</Text>}
+            renderItem={({ item }) => <Text>{item.sentNs}</Text>}
           />
         </>
       )}

diff --git a/example/src/TestScreen.tsx b/example/src/TestScreen.tsx
@@ -3,13 +3,12 @@ import React, { useEffect, useState } from 'react'
 import { View, Text, Button, ScrollView } from 'react-native'
 
 import { conversationTests } from './tests/conversationTests'
+import { dmTests } from './tests/dmTests'
 import { groupPerformanceTests } from './tests/groupPerformanceTests'
 import { groupPermissionsTests } from './tests/groupPermissionsTests'
 import { groupTests } from './tests/groupTests'
 import { restartStreamTests } from './tests/restartStreamsTests'
 import { Test } from './tests/test-utils'
-import { tests } from './tests/tests'
-import { v3OnlyTests } from './tests/v3OnlyTests'
 
 type Result = 'waiting' | 'running' | 'success' | 'failure' | 'error'
 
@@ -107,10 +106,9 @@ function TestView({
 
 export enum TestCategory {
   all = 'all',
-  tests = 'tests',
   conversation = 'conversation',
   group = 'group',
-  v3Only = 'v3Only',
+  dm = 'dm',
   restartStreans = 'restartStreams',
   groupPermissions = 'groupPermissions',
   groupPerformance = 'groupPerformance',
@@ -123,23 +121,21 @@ export default function TestScreen(): JSX.Element {
     testSelection: TestCategory
   }
   const allTests = [
-    ...tests,
+    ...dmTests,
     ...groupTests,
     ...conversationTests,
-    ...v3OnlyTests,
     ...restartStreamTests,
     ...groupPermissionsTests,
-    ...groupPerformanceTests,
   ]
   let activeTests, title
   switch (params.testSelection) {
     case TestCategory.all:
       activeTests = allTests
       title = 'All Unit Tests'
       break
-    case TestCategory.tests:
-      activeTests = tests
-      title = 'Original Unit Tests'
+    case TestCategory.dm:
+      activeTests = dmTests
+      title = 'Dm Unit Tests'
       break
     case TestCategory.group:
       activeTests = groupTests
@@ -149,10 +145,6 @@ export default function TestScreen(): JSX.Element {
       activeTests = conversationTests
       title = 'Conversation Unit Tests'
       break
-    case TestCategory.v3Only:
-      activeTests = v3OnlyTests
-      title = 'V3 Only Tests'
-      break
     case TestCategory.restartStreans:
       activeTests = restartStreamTests
       title = 'Restart Streams Unit Tests'

diff --git a/example/src/hooks.tsx b/example/src/hooks.tsx
@@ -24,32 +24,11 @@ export function useConversationList(): UseQueryResult<
   Conversation<SupportedContentTypes>[]
 > {
   const { client } = useXmtp()
-  client?.contacts
-    .refreshConsentList()
-    .then(() => {
-      console.log('Refreshed consent list successfully')
-    })
-    .catch((error) => {
-      console.error('Error refreshing consent list', error)
-    })
   return useQuery<Conversation<SupportedContentTypes>[]>(
     ['xmtp', 'conversations', client?.address],
-    () => client!.conversations.list(),
-    {
-      enabled: !!client,
-    }
-  )
-}
-
-export function useGroupsList(): UseQueryResult<
-  Group<SupportedContentTypes>[]
-> {
-  const { client } = useXmtp()
-  return useQuery<Group<SupportedContentTypes>[]>(
-    ['xmtp', 'groups', client?.address],
     async () => {
-      await client?.conversations.syncGroups()
-      return (await client?.conversations.listGroups()) || []
+      await client?.conversations.sync()
+      return (await client?.conversations.list()) || []
     },
     {
       enabled: !!client,
@@ -550,23 +529,23 @@ export function usePrepareRemoteAttachment({
 /**
  * Load or save a keyBundle for future use.
  */
-export function useSavedKeys(): {
-  keyBundle: string | null | undefined
-  save: (keyBundle: string) => void
+export function useSavedAddress(): {
+  address: string | null | undefined
+  save: (address: string) => void
   clear: () => void
 } {
-  const { data: keyBundle, refetch } = useQuery<string | null>(
-    ['xmtp', 'keyBundle'],
-    () => EncryptedStorage.getItem('xmtp.keyBundle')
+  const { data: address, refetch } = useQuery<string | null>(
+    ['xmtp', 'address'],
+    () => EncryptedStorage.getItem('xmtp.address')
   )
   return {
-    keyBundle,
-    save: async (keyBundle: string) => {
-      await EncryptedStorage.setItem('xmtp.keyBundle', keyBundle)
+    address,
+    save: async (address: string) => {
+      await EncryptedStorage.setItem('xmtp.address', address)
       await refetch()
     },
     clear: async () => {
-      await EncryptedStorage.removeItem('xmtp.keyBundle')
+      await EncryptedStorage.removeItem('xmtp.address')
       await refetch()
     },
   }