use activityCenter.ts

packages/status-js/src/index.ts

@@ -1,4 +1,5 @@
 export type { Account } from './client/account'
+export type { ActivityCenter } from './client/activityCenter'
 export type { ChatMessage as Message } from './client/chat'
 export type { Client, ClientOptions } from './client/client'
 export { createClient } from './client/client'

packages/status-react/src/components/main-sidebar/components/chats/chat-item.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef } from 'react'
 
 import { NavLink } from 'react-router-dom'
 
+import { useActivityCenter } from '../../../../protocol'
 import { styled } from '../../../../styles/config'
 import { Avatar } from '../../../../system'
 
@@ -15,8 +16,10 @@ interface Props {
 const ChatItem = (props: Props, ref: Ref<HTMLAnchorElement>) => {
   const { chat } = props
 
+  const { unreadChats } = useActivityCenter().data
+
   const muted = false
-  const unread = false
+  const unread = unreadChats.has(chat.id)
 
   const { color, displayName } = chat.identity!
 
@@ -66,18 +69,18 @@ const Link = styled(NavLink, {
       unread: {
         color: '$accent-1',
         fontWeight: '$600',
-        '&::after': {
+        // '&::after': {
-          content: '"1"',
+        //   content: '"1"',
-          textAlign: 'center',
+        //   textAlign: 'center',
-          position: 'absolute',
+        //   position: 'absolute',
-          right: 8,
+        //   right: 8,
-          width: 22,
+        //   width: 22,
-          height: 22,
+        //   height: 22,
-          background: '$primary-1',
+        //   background: '$primary-1',
-          borderRadius: '$full',
+        //   borderRadius: '$full',
-          fontSize: 12,
+        //   fontSize: 12,
-          color: '$accent-11',
+        //   color: '$accent-11',
-        },
+        // },
       },
     },
   },

packages/status-react/src/protocol/index.tsx

@@ -1,6 +1,7 @@
 export { ProtocolProvider, useProtocol } from './provider'
 export type { Account } from './use-account'
 export { useAccount } from './use-account'
+export { useActivityCenter } from './use-activity-center'
 export type { Chat } from './use-chat'
 export { useChat } from './use-chat'
 export type { Member } from './use-members'

packages/status-react/src/protocol/provider.tsx

@@ -4,13 +4,21 @@ import { createClient } from '@status-im/js'
 
 import { Loading } from '../components/loading'
 
-import type { Account, Client, ClientOptions, Community } from '@status-im/js'
+import type {
+  Account,
+  ActivityCenter,
+  Client,
+  ClientOptions,
+  Community,
+} from '@status-im/js'
 
 const Context = createContext<State | undefined>(undefined)
 
 type State = {
   loading: boolean
   client: Client | undefined
+  // todo?: remove, use via client
+  activityCenter: ActivityCenter | undefined
   community: Community['description'] | undefined
   account: Account | undefined
   dispatch?: React.Dispatch<Action>
@@ -35,6 +43,7 @@ const reducer = (state: State, action: Action): State => {
         ...state,
         loading: false,
         client,
+        activityCenter: client.activityCenter,
         community: client.community.description,
       }
     }
@@ -56,6 +65,7 @@ export const ProtocolProvider = (props: Props) => {
   const [state, dispatch] = useReducer(reducer, {
     loading: true,
     client: undefined,
+    activityCenter: undefined,
     community: undefined,
     account: undefined,
     dispatch: undefined,

packages/status-react/src/protocol/use-activity-center.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react'
+
+import { useProtocol } from './provider'
+
+interface Result {
+  data: any
+}
+
+export const useActivityCenter = (): Result => {
+  const { client } = useProtocol()
+
+  const activityCenter = client.activityCenter
+
+  const [data, setData] = useState<any>(() => activityCenter.getLatest())
+
+  useEffect(() => {
+    setData(activityCenter.getLatest())
+
+    const handleUpdate = (latest: any) => {
+      setData(latest)
+    }
+
+    return activityCenter.onChange(handleUpdate)
+  }, [activityCenter])
+
+  return {
+    data,
+  }
+}