Update chat client and adapt api (#114)

* Update chat client and adapt api

* Fix package json

wallets/react-wallet-chat/package.json

@@ -15,7 +15,7 @@
     "@json-rpc-tools/utils": "1.7.6",
     "@nextui-org/react": "1.0.8-beta.5",
     "@solana/web3.js": "1.43.0",
-    "@walletconnect/chat-client": "0.1.7",
+    "@walletconnect/chat-client": "^0.2.2",
     "@walletconnect/sign-client": "2.0.0-rc.4",
     "@walletconnect/utils": "2.0.0-rc.4",
     "@web3modal/core": "^2.0.0-beta.7",

wallets/react-wallet-chat/src/hooks/useInitialization.ts

@@ -1,6 +1,6 @@
 import SettingsStore from '@/store/SettingsStore'
 import { createOrRestoreCosmosWallet } from '@/utils/CosmosWalletUtil'
-import { createOrRestoreEIP155Wallet } from '@/utils/EIP155WalletUtil'
+import { createOrRestoreEIP155Wallet, eip155Wallets } from '@/utils/EIP155WalletUtil'
 import { createOrRestoreSolanaWallet } from '@/utils/SolanaWalletUtil'
 import { chatClient, createChatClient, createSignClient } from '@/utils/WalletConnectUtil'
 import { useCallback, useEffect, useState } from 'react'
@@ -25,7 +25,12 @@ export default function useInitialization() {
       await createSignClient()
 
       await createChatClient()
-      await chatClient.register({ account: `eip155:1:${eip155Addresses[accountIndex]}` })
+      await chatClient.register({
+        account: `eip155:1:${eip155Addresses[accountIndex]}`,
+        onSign: async message => {
+          return eip155Wallets[eip155Addresses[accountIndex]].signMessage(message)
+        }
+      })
       console.log(
         '[Chat] registered address %s on keyserver',
         `eip155:1:${eip155Addresses[accountIndex]}`

wallets/react-wallet-chat/src/pages/chat.tsx

@@ -47,11 +47,10 @@ export default function ChatPage() {
   async function onOutgoingMessage(outgoingMessage: string) {
     await chatClient.message({
       topic,
-      payload: {
-        message: outgoingMessage,
-        authorAccount: fullEip155Address,
-        timestamp: Date.now()
-      }
+
+      message: outgoingMessage,
+      authorAccount: fullEip155Address,
+      timestamp: Date.now()
     })
 
     if (chatClient.getMessages({ topic }).length) {

wallets/react-wallet-chat/src/pages/chatRequests.tsx

@@ -5,17 +5,26 @@ import { chatClient } from '@/utils/WalletConnectUtil'
 import { ChatClientTypes } from '@walletconnect/chat-client'
 import ChatRequestCard from '@/components/ChatRequestCard'
 import { useRouter } from 'next/router'
+import { useSnapshot } from 'valtio'
+import SettingsStore from '@/store/SettingsStore'
 
 export default function ChatRequestsPage() {
   const router = useRouter()
-  const [chatInvites, setChatInvites] = useState<Map<number, ChatClientTypes.Invite>>(new Map())
+  const [chatInvites, setChatInvites] = useState<ChatClientTypes.ReceivedInvite[]>([])
+
+  const { eip155Address } = useSnapshot(SettingsStore.state)
 
   useEffect(() => {
-    console.log('setting invites:', chatClient.getInvites())
+    console.log(
+      'setting invites:',
+      chatClient.getReceivedInvites({ account: `eip155:1:${eip155Address}` })
+    )
 
-    setChatInvites(chatClient.getInvites())
+    setChatInvites(chatClient.getReceivedInvites({ account: `eip155:1:${eip155Address}` }))
   }, [])
 
+  console.log('NEWINVITES:::::', chatInvites)
+
   const acceptChatInvite = async (inviteId: number) => {
     await chatClient.accept({ id: inviteId })
     router.push('/chats')
@@ -29,14 +38,15 @@ export default function ChatRequestsPage() {
     <Fragment>
       <PageHeader title="Chat Requests" withBackButton backButtonHref="/chats" />
 
-      {chatInvites.size > 0 ? (
-        Array.from(chatInvites).map(([inviteId, invite]) => {
+      {chatInvites.length > 0 ? (
+        chatInvites.map(invite => {
           return (
             <ChatRequestCard
-              key={inviteId}
+              account={eip155Address}
+              key={invite.id}
               {...invite}
-              onAccept={() => acceptChatInvite(Number(inviteId))}
-              onReject={() => rejectChatInvite(Number(inviteId))}
+              onAccept={() => acceptChatInvite(Number(invite.id))}
+              onReject={() => rejectChatInvite(Number(invite.id))}
             />
           )
         })

wallets/react-wallet-chat/src/pages/chats.tsx

@@ -13,7 +13,10 @@ import SettingsStore from '@/store/SettingsStore'
 import { Web3Modal } from '@web3modal/standalone'
 import { HiQrcode } from 'react-icons/hi'
 
-const web3modal = new Web3Modal({})
+const web3modal = new Web3Modal({
+  projectId: process.env.NEXT_PUBLIC_PROJECT_ID || '',
+  walletConnectVersion: 1
+})
 
 export default function ChatsPage() {
   const router = useRouter()
@@ -24,6 +27,7 @@ export default function ChatsPage() {
   >([])
 
   const [chatInvites, setChatInvites] = useState<any[]>([])
+  const { eip155Address } = useSnapshot(SettingsStore.state)
 
   const inviteQrCode = useCallback(async () => {
     const idx = SettingsStore.state.account === 0 ? 1 : 0
@@ -35,17 +39,19 @@ export default function ChatsPage() {
   const initChatClient = async () => {
     console.log(chatClient)
 
-    console.log('chatInvites on load:', chatClient.chatInvites.getAll())
+    console.log(
+      'chatInvites on load:',
+      chatClient.chatReceivedInvites.getAll({ inviteeAccount: eip155Address })
+    )
     console.log('chatThreads on load:', chatClient.chatThreads.getAll())
     console.log('chatMessages on load:', chatClient.chatMessages.getAll())
     setChatThreads(chatClient.chatThreads.getAll())
-    setChatInvites(chatClient.chatInvites.getAll())
+    setChatInvites(chatClient.getReceivedInvites({ account: `eip155:1:${eip155Address}` }))
 
     chatClient.on('chat_invite', async args => {
       console.log('chat_invite:', args)
       web3modal.closeModal()
-      console.log(chatClient.chatInvites.getAll())
-      setChatInvites(chatClient.chatInvites.getAll())
+      setChatInvites(chatClient.getReceivedInvites({ account: `eip155:1:${eip155Address}` }))
     })
 
     chatClient.on('chat_joined', async args => {
@@ -61,6 +67,8 @@ export default function ChatsPage() {
     initChatClient()
   }, [])
 
+  console.log({ chatInvitesLength: chatInvites.length })
+
   return (
     <Fragment>
       <PageHeader

wallets/react-wallet-chat/src/pages/newChat.tsx

@@ -25,13 +25,11 @@ export default function NewChatPage() {
 
   const createInvite = useCallback(
     async (targetAddress: string) => {
-      const invite: ChatClientTypes.PartialInvite = {
-        message: "hey let's chat",
-        account: `eip155:1:${eip155Address}`
-      }
       await chatClient.invite({
-        account: targetAddress,
-        invite
+        inviteeAccount: targetAddress,
+        inviterAccount: `eip155:1:${eip155Address}`,
+        message: "hey let's message",
+        inviteePublicKey: await chatClient.resolve({ account: targetAddress })
       })
     },
     [eip155Address]