From 121e370be3c6057bc3b62f26453c0db451c96f0f Mon Sep 17 00:00:00 2001
From: Drew Ewing <drew.ewing@satellite.im>
Date: Mon, 29 Aug 2022 14:56:28 -0700
Subject: [PATCH 1/3] feat(refactor): pre-launch cleanup (wip, will be broken
 up)

---
 .../interactables/UserPicker/UserPicker.vue   |   4 +-
 .../ui/BackgroundCall/BackgroundCall.vue      |  34 +-
 .../Chat/TypingIndicator/TypingIndicator.vue  |  13 +-
 components/ui/Global/Global.html              |   2 +-
 components/ui/Global/Global.vue               |  16 +-
 components/ui/User/State/State.vue            |  31 +-
 components/views/chat/chatbar/Chatbar.vue     |   2 +-
 .../views/chat/chatbar/footer/Footer.vue      |  15 +-
 .../views/chat/conversation/Conversation.vue  |  28 +-
 components/views/chat/message/Message.vue     |   8 +-
 .../views/chat/message/actions/Actions.vue    |   3 +-
 components/views/friends/friend/Friend.html   |   1 +
 components/views/friends/friend/Friend.vue    |   5 +-
 .../views/friends/requests/Requests.vue       |   3 +-
 components/views/friends/search/Search.vue    |  54 +-
 components/views/group/invite/Invite.vue      |   3 +-
 components/views/media/Media.vue              |  16 +-
 components/views/media/actions/Actions.vue    |   2 +-
 components/views/media/heading/Heading.html   |   4 +-
 components/views/media/heading/Heading.vue    |  17 +-
 .../views/media/incomingCall/IncomingCall.vue |   3 +-
 .../views/media/previewCall/PreviewCall.vue   |  19 +-
 components/views/media/user/User.vue          |  49 +-
 .../navigation/mobile/toolbar/Toolbar.vue     |  48 +-
 .../views/navigation/sidebar/Sidebar.vue      |   4 +-
 .../views/navigation/sidebar/list/List.html   |   2 +-
 .../views/navigation/sidebar/list/List.vue    |  13 +-
 .../navigation/sidebar/list/item/Item.html    |  10 +-
 .../navigation/sidebar/list/item/Item.vue     |  37 +-
 .../views/navigation/sidebar/live/Live.vue    |   5 +-
 .../views/navigation/sidebar/quick/Quick.vue  |   1 -
 .../navigation/sidebar/status/Status.vue      |  12 +-
 .../views/navigation/toolbar/Toolbar.html     |   8 +-
 .../views/navigation/toolbar/Toolbar.vue      |  30 +-
 .../navigation/toolbar/alerts/Alerts.html     |  33 +-
 .../navigation/toolbar/alerts/Alerts.less     |   5 +-
 .../navigation/toolbar/alerts/Alerts.vue      |  18 +-
 .../toolbar/alerts/alert/Alert.html           |  14 +-
 .../navigation/toolbar/alerts/alert/Alert.vue |   8 +-
 .../views/settings/pages/accounts/index.vue   |   9 +-
 libraries/Iridium/IridiumManager.ts           |  39 +-
 libraries/Iridium/NotificationManager.ts      |  92 +--
 libraries/Iridium/chat/ChatManager.ts         | 282 ++++----
 libraries/Iridium/chat/types.ts               |   5 +-
 libraries/Iridium/friends/FriendsManager.ts   | 168 +++--
 libraries/Iridium/groups/GroupManager.ts      |  51 +-
 libraries/Iridium/profile/ProfileManager.ts   |  20 +-
 libraries/Iridium/users/UsersManager.ts       | 132 ++--
 libraries/Iridium/webrtc/WebRTCManager.ts     | 610 ++++++------------
 libraries/Iridium/webrtc/hooks.ts             | 129 ----
 libraries/Iridium/webrtc/types.ts             |   2 +-
 libraries/WebRTC/Call.ts                      |   2 +-
 pages/chat/_id.vue                            |  15 +-
 pages/friends/index.vue                       |   8 +-
 pages/index.vue                               |   4 +
 store/accounts/actions.ts                     |  19 +-
 store/audio/actions.ts                        |   7 +
 57 files changed, 991 insertions(+), 1183 deletions(-)
 delete mode 100644 libraries/Iridium/webrtc/hooks.ts

diff --git a/components/interactables/UserPicker/UserPicker.vue b/components/interactables/UserPicker/UserPicker.vue
index 0abf21d16e..046055d5c0 100644
--- a/components/interactables/UserPicker/UserPicker.vue
+++ b/components/interactables/UserPicker/UserPicker.vue
@@ -20,11 +20,11 @@ export default Vue.extend({
   data: () => ({
     selected: [] as Friend[],
     filter: '',
-    friendDids: iridium.friends.state.friends,
+    fm: iridium.friends.state,
   }),
   computed: {
     friends() {
-      return Object.values(this.friendDids)
+      return Object.values(this.fm.friends)
         .filter((did) => !this.exclude.includes(did))
         .map((did) => {
           return iridium.users.getUser(did)
diff --git a/components/ui/BackgroundCall/BackgroundCall.vue b/components/ui/BackgroundCall/BackgroundCall.vue
index 739a31b8d9..c35d31c731 100644
--- a/components/ui/BackgroundCall/BackgroundCall.vue
+++ b/components/ui/BackgroundCall/BackgroundCall.vue
@@ -3,45 +3,17 @@
 <script lang="ts">
 import Vue from 'vue'
 import iridium from '~/libraries/Iridium/IridiumManager'
-import { useCallElapsedTime, useWebRTC } from '~/libraries/Iridium/webrtc/hooks'
 
 export default Vue.extend({
-  setup() {
-    const { remoteParticipants } = useWebRTC()
-    const { elapsedTime, startInterval, clearTimer } = useCallElapsedTime()
-
-    const remoteParticipant = computed(() => {
-      return remoteParticipants.value.length > 0
-        ? remoteParticipants.value[0]
-        : null
-    })
-
-    return {
-      remoteParticipant,
-      elapsedTime,
-      startInterval,
-      clearTimer,
-    }
-  },
   data() {
     return {
       webrtc: iridium.webRTC.state,
+      callTime: iridium.webRTC.callTime,
     }
   },
-  watch: {
-    'webrtc.createdAt': {
-      handler() {
-        this.startInterval()
-      },
-      immediate: true,
-    },
-  },
-  beforeDestroy() {
-    this.clearTimer()
-  },
   methods: {
     navigateToActiveConversation() {
-      if (!this.remoteParticipant) {
+      if (!this.webrtc.activeCall) {
         return
       }
 
@@ -51,7 +23,7 @@ export default Vue.extend({
       }
 
       const id = iridium.chat?.directConversationIdFromDid(
-        this.remoteParticipant.did,
+        this.webrtc.activeCall.did,
       )
 
       if (!id || !iridium.chat?.hasConversation(id)) {
diff --git a/components/ui/Chat/TypingIndicator/TypingIndicator.vue b/components/ui/Chat/TypingIndicator/TypingIndicator.vue
index c5084d813e..739919a1fb 100644
--- a/components/ui/Chat/TypingIndicator/TypingIndicator.vue
+++ b/components/ui/Chat/TypingIndicator/TypingIndicator.vue
@@ -8,7 +8,8 @@ import { User } from '~/libraries/Iridium/users/types'
 export default Vue.extend({
   data() {
     return {
-      chat: iridium.chat,
+      chat: iridium.chat.state,
+      typing: iridium.chat.ephemeral.typing,
     }
   },
   computed: {
@@ -17,14 +18,14 @@ export default Vue.extend({
       if (!conversationId) {
         return []
       }
-      const conversation = this.chat.getConversation(conversationId)
-      if (!conversation || !conversation.typing) {
+      const conversation = this.chat.conversations[conversationId]
+      if (!conversation) {
         return []
       }
+      const conversationTyping = this.typing[conversationId] || []
 
-      return Object.keys(conversation.typing)
-        .filter((k) => conversation.typing?.[k])
-        .map((did) => iridium.users.getUser(did))
+      return conversationTyping
+        .map((did: string) => iridium.users.getUser(did))
         .filter(Boolean)
     },
     text(): string {
diff --git a/components/ui/Global/Global.html b/components/ui/Global/Global.html
index 890bf7cc79..86f91ea7bf 100644
--- a/components/ui/Global/Global.html
+++ b/components/ui/Global/Global.html
@@ -26,7 +26,7 @@
         :set-close-timeout="5000"
       />
     </UiModal> -->
-    <UiModal v-if="webrtc.incomingCall">
+    <UiModal v-if="incomingCall">
       <MediaIncomingCall :accept-call="acceptCall" :deny-call="denyCall" />
     </UiModal>
     <UiModal
diff --git a/components/ui/Global/Global.vue b/components/ui/Global/Global.vue
index 023552376e..52f3b99f23 100644
--- a/components/ui/Global/Global.vue
+++ b/components/ui/Global/Global.vue
@@ -5,7 +5,6 @@ import { mapState } from 'vuex'
 import { TrackKind } from '~/libraries/WebRTC/types'
 import { ModalWindows } from '~/store/ui/types'
 import iridium from '~/libraries/Iridium/IridiumManager'
-import { useWebRTC } from '~/libraries/Iridium/webrtc/hooks'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -15,11 +14,6 @@ declare module 'vue/types/vue' {
 
 export default Vue.extend({
   name: 'Global',
-  setup() {
-    const { isActiveCall, isBackgroundCall } = useWebRTC()
-
-    return { isActiveCall, isBackgroundCall }
-  },
   data() {
     return {
       webrtc: iridium.webRTC.state,
@@ -28,6 +22,16 @@ export default Vue.extend({
   computed: {
     ...mapState(['ui', 'media', 'conversation', 'files']),
     ModalWindows: () => ModalWindows,
+    incomingCall() {
+      console.info('incomingCall', this.webrtc.incomingCall)
+      return this.webrtc.incomingCall
+    },
+    isBackgroundCall(): boolean {
+      return iridium.webRTC.isBackgroundCall(this.$route.params.id)
+    },
+    isActiveCall(): boolean {
+      return iridium.webRTC.isActiveCall(this.$route.params.id)
+    },
     showBackgroundCall(): boolean {
       if (!this.$device.isMobile) {
         return this.isBackgroundCall
diff --git a/components/ui/User/State/State.vue b/components/ui/User/State/State.vue
index aaafe8f641..3112828b70 100644
--- a/components/ui/User/State/State.vue
+++ b/components/ui/User/State/State.vue
@@ -29,8 +29,8 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-
 import { SmartphoneIcon } from 'satellite-lucide-icons'
+import iridium from '~/libraries/Iridium/IridiumManager'
 import { User } from '~/libraries/Iridium/friends/types'
 
 export default Vue.extend({
@@ -38,22 +38,37 @@ export default Vue.extend({
     SmartphoneIcon,
   },
   props: {
-    user: {
-      type: Object as PropType<User>,
+    userId: {
+      type: String as PropType<User['did']>,
       required: true,
     },
-    isTyping: {
-      type: Boolean,
-      default: false,
-    },
     size: {
       type: Number,
       default: 36,
     },
   },
+  data() {
+    const conversationId = iridium.chat.directConversationIdFromDid(this.userId)
+    return {
+      users: iridium.users.state,
+      conversationId,
+      isTyping: conversationId
+        ? iridium.chat.ephemeral.typing[conversationId]
+        : false,
+    }
+  },
   computed: {
+    user() {
+      return (
+        this.users?.[this.userId] || {
+          did: this.userId,
+          name: this.userId,
+          status: 'offline',
+        }
+      )
+    },
     imageSource(): string {
-      return this.user.photoHash
+      return this.user?.photoHash
         ? this.$Config.ipfs.gateway + this.user.photoHash
         : ''
     },
diff --git a/components/views/chat/chatbar/Chatbar.vue b/components/views/chat/chatbar/Chatbar.vue
index f11809825c..1ebdefba55 100644
--- a/components/views/chat/chatbar/Chatbar.vue
+++ b/components/views/chat/chatbar/Chatbar.vue
@@ -95,7 +95,7 @@ const Chatbar = Vue.extend({
       )
     },
     isSubscribed(): boolean {
-      return iridium.chat.subscriptions[this.$route.params.id]?.connected
+      return iridium.chat.ready
     },
     text: {
       /**
diff --git a/components/views/chat/chatbar/footer/Footer.vue b/components/views/chat/chatbar/footer/Footer.vue
index d79e6ed105..88b3508ba9 100644
--- a/components/views/chat/chatbar/footer/Footer.vue
+++ b/components/views/chat/chatbar/footer/Footer.vue
@@ -17,6 +17,11 @@ export default Vue.extend({
       required: true,
     },
   },
+  data() {
+    return {
+      typing: iridium.chat.ephemeral.typing,
+    }
+  },
   computed: {
     ...mapState({
       ui: (state) => (state as RootState).ui,
@@ -26,14 +31,8 @@ export default Vue.extend({
       if (!conversationId) {
         return []
       }
-      const conversation = iridium.chat.getConversation(conversationId)
-      if (!conversation || !conversation.typing) {
-        return []
-      }
-
-      return Object.keys(conversation.typing).filter(
-        (k) => conversation.typing?.[k],
-      )
+      const typing = this.$data.typing[conversationId] || []
+      return typing
     },
     lengthCount() {
       return `${this.ui.chatbarContent.length}/${this.$Config.chat.maxChars}`
diff --git a/components/views/chat/conversation/Conversation.vue b/components/views/chat/conversation/Conversation.vue
index b4a24f92a0..d29726029f 100644
--- a/components/views/chat/conversation/Conversation.vue
+++ b/components/views/chat/conversation/Conversation.vue
@@ -3,7 +3,10 @@
 import Vue from 'vue'
 import { ChevronDownIcon } from 'satellite-lucide-icons'
 import iridium from '~/libraries/Iridium/IridiumManager'
-import { ConversationMessage } from '~/libraries/Iridium/chat/types'
+import {
+  Conversation,
+  ConversationMessage,
+} from '~/libraries/Iridium/chat/types'
 
 interface ChatItem {
   message: ConversationMessage
@@ -22,16 +25,19 @@ export default Vue.extend({
   },
   data() {
     return {
-      conversation:
-        iridium.chat.state.conversations?.[this.$route.params.id] ?? {},
+      chat: iridium.chat.state,
       numMessages: MESSAGE_PAGE_SIZE,
       isLoadingMore: false,
+      isBlurred: false,
     }
   },
   computed: {
     myDid(): string {
       return iridium.connector?.id ?? ''
     },
+    conversation(): Conversation {
+      return this.chat.conversations?.[this.$route.params.id] ?? {}
+    },
     messages(): ConversationMessage[] {
       if (!Object.keys(this.conversation).length) {
         return []
@@ -41,7 +47,8 @@ export default Vue.extend({
       )
     },
     chatItems(): ChatItem[] {
-      return this.messages
+      let maxTime = 0
+      const messages = this.messages
         .filter((message) => !message.replyToId)
         .slice(-this.numMessages)
         .map((message, index) => {
@@ -60,6 +67,7 @@ export default Vue.extend({
           const replies = this.messages.filter(
             (replyMessage) => replyMessage.replyToId === message.id,
           )
+          maxTime = Math.max(maxTime, message.at)
 
           return {
             message,
@@ -70,6 +78,10 @@ export default Vue.extend({
             replies,
           }
         })
+      if (maxTime > this.conversation.lastReadAt && !this.isBlurred) {
+        iridium.chat.updateConversationReadAt(this.conversation.id, maxTime)
+      }
+      return messages
     },
     noMore(): boolean {
       return (
@@ -78,6 +90,14 @@ export default Vue.extend({
       )
     },
   },
+  async mounted() {
+    window.addEventListener('blur', async () => {
+      this.isBlurred = true
+    })
+    window.addEventListener('focus', async () => {
+      this.isBlurred = false
+    })
+  },
   methods: {
     loadMore() {
       // TODO: we'll want to instead call iridium in this method once paginated
diff --git a/components/views/chat/message/Message.vue b/components/views/chat/message/Message.vue
index ab941ada16..015801928e 100644
--- a/components/views/chat/message/Message.vue
+++ b/components/views/chat/message/Message.vue
@@ -60,7 +60,13 @@ export default Vue.extend({
       return this.$route.params.id
     },
     author(): User {
-      return iridium.users.getUser(this.message.from)
+      return this.message.from === iridium.connector?.id
+        ? (iridium.profile.state as User)
+        : iridium.users.getUser(this.message.from) || {
+            did: this.message.from,
+            name: this.message.from,
+            photoHash: '',
+          }
     },
     avatarSrc(): string | undefined {
       return (
diff --git a/components/views/chat/message/actions/Actions.vue b/components/views/chat/message/actions/Actions.vue
index 926f6c7ba3..6619b9a117 100644
--- a/components/views/chat/message/actions/Actions.vue
+++ b/components/views/chat/message/actions/Actions.vue
@@ -57,6 +57,7 @@ export default Vue.extend({
     return {
       hasMoreSettings: false,
       featureReadyToShow: false,
+      chat: iridium.chat.state,
     }
   },
   computed: {
@@ -71,7 +72,7 @@ export default Vue.extend({
       if (!this.conversationId) {
         return undefined
       }
-      return iridium.chat.state.conversations[this.conversationId]
+      return this.chat.conversations[this.conversationId]
     },
     isGroup(): boolean {
       return this.conversation?.type === 'group'
diff --git a/components/views/friends/friend/Friend.html b/components/views/friends/friend/Friend.html
index a4be6629ee..6e2835eae7 100644
--- a/components/views/friends/friend/Friend.html
+++ b/components/views/friends/friend/Friend.html
@@ -9,6 +9,7 @@
     >
       {{ user.name || user.did }}
     </TypographyText>
+    <TypographyText v-if="isPreview" size="sm">{{ user.did }}</TypographyText>
     <TypographyText v-if="user.status" size="sm">
       {{ user.status }}
     </TypographyText>
diff --git a/components/views/friends/friend/Friend.vue b/components/views/friends/friend/Friend.vue
index 989601f798..2f618d9ebb 100644
--- a/components/views/friends/friend/Friend.vue
+++ b/components/views/friends/friend/Friend.vue
@@ -62,7 +62,7 @@ export default Vue.extend({
       ]
     },
     requestIncoming(): boolean | null {
-      return this.request && this.request.to === iridium.connector?.id
+      return this.request && this.request.incoming
     },
   },
   beforeDestroy() {
@@ -88,6 +88,9 @@ export default Vue.extend({
     async removeFriend() {
       this.loading = true
       await iridium.friends?.friendRemove(this.user.did)
+      if (this.$route.params.id === this.user.did) {
+        this.$router.replace('/friends')
+      }
       this.loading = false
     },
     async cancelRequest() {
diff --git a/components/views/friends/requests/Requests.vue b/components/views/friends/requests/Requests.vue
index e243e1efa1..8bbe003be4 100644
--- a/components/views/friends/requests/Requests.vue
+++ b/components/views/friends/requests/Requests.vue
@@ -64,13 +64,14 @@ export default Vue.extend({
   data() {
     return {
       friends: iridium.friends.state,
+      users: iridium.users.state,
     }
   },
   computed: {
     requests(): FriendRequest[] {
       return Object.values(this.friends.requests)
         .map((request) => {
-          const user = iridium.users.getUser(request.user.did)
+          const user = this.users[request.user.did]
           if (!user) {
             return null
           }
diff --git a/components/views/friends/search/Search.vue b/components/views/friends/search/Search.vue
index 84b7ed0682..73a466d963 100644
--- a/components/views/friends/search/Search.vue
+++ b/components/views/friends/search/Search.vue
@@ -1,27 +1,30 @@
 <template>
   <div>
     <InteractablesInput
-      v-model="friendId"
+      v-model="query"
       :placeholder="$t('friends.search_placeholder')"
       autofocus
       @change="_searchFriend"
     />
     <TypographyError v-if="error" :text="$t(error)" />
     <UiLoadersLoadingBar v-else-if="searching" />
-    <div v-else-if="!friendId" class="id-container">
+    <div v-else-if="!query" class="id-container">
       <button class="id-button" @click="copyId">
         <TypographyText class="id" color="dark">
           {{ $t('friends.copy_your_id') }}
         </TypographyText>
       </button>
     </div>
-    <FriendsFriend
-      v-else-if="user && user.did"
-      :user="user"
-      is-preview
-      class="friend-item"
-      @requestSent="onFriendRequestSent"
-    />
+    <div v-else-if="matches && matches.length">
+      <FriendsFriend
+        v-for="match in matches"
+        :key="match.did"
+        :user="match"
+        is-preview
+        class="friend-item"
+        @requestSent="onFriendRequestSent"
+      />
+    </div>
   </div>
 </template>
 
@@ -38,10 +41,11 @@ export default Vue.extend({
   data() {
     return {
       error: '',
-      friendId: '',
+      query: '',
       searching: false,
       request: null as FriendRequest | null,
       user: null as User | null,
+      matches: [] as User[],
     }
   },
   computed: {
@@ -51,7 +55,7 @@ export default Vue.extend({
   },
   async mounted() {
     if (this.$route.params && this.$route.params.id) {
-      this.$data.friendId = this.$route.params.id
+      this.$data.query = this.$route.params.id
       this._searchFriend()
     }
     iridium.friends?.on('request/error', (err: string) => {
@@ -60,7 +64,7 @@ export default Vue.extend({
   },
   methods: {
     _searchFriend: debounce(async function (this: any) {
-      if (!this.friendId.length) {
+      if (!this.query.length) {
         this.error = ''
         this.user = null
         this.searching = false
@@ -73,31 +77,41 @@ export default Vue.extend({
       this.user = null
       this.error = ''
       this.searching = true
-      const friendId = this.friendId.trim()
-      if (friendId === iridium.connector?.id) {
+      const query = this.query.trim()
+      const matches = await iridium.users.searchPeer(query)
+      const hasFriend =
+        matches.length === 1 && iridium.friends.isFriend(matches[0].did)
+
+      if (
+        query === iridium.connector?.id ||
+        (matches.length === 1 && matches[0].did === iridium.connector?.id)
+      ) {
         this.error = this.$t('friends.self_add') as string
         return
       }
-      await iridium.users.searchPeer(friendId)
-      const hasFriend = iridium.friends.isFriend(friendId)
       if (hasFriend) {
         this.error = this.$t('friends.already_friend') as string
       }
 
-      this.user = iridium.users.getUser(friendId)
+      this.matches = matches
       this.searching = false
     },
     onFriendRequestSent() {
       this.request = null
       this.user = null
-      this.friendId = ''
+      this.query = ''
       // @ts-ignore
       this.$toast.show(this.$t('friends.request_sent') as string)
     },
     copyId() {
-      // @ts-ignore
+      if (!iridium.connector) return
+      const shortID = iridium.profile.state
+        ? `${iridium.profile.state.name}#${iridium.connector.id.substring(
+            iridium.connector.id.length - 6,
+          )}`
+        : `${iridium.connector?.id}`
+      navigator.clipboard.writeText(shortID)
       this.$toast.show(this.$t('ui.copied') as string)
-      navigator.clipboard.writeText(this.accounts.active)
     },
   },
 })
diff --git a/components/views/group/invite/Invite.vue b/components/views/group/invite/Invite.vue
index a6257f6753..ae3452b6c9 100644
--- a/components/views/group/invite/Invite.vue
+++ b/components/views/group/invite/Invite.vue
@@ -9,6 +9,7 @@ import { User } from '~/libraries/Iridium/users/types'
 export default Vue.extend({
   data() {
     return {
+      chat: iridium.chat.state,
       recipients: [] as User[],
       isLoading: false,
       recipient: '',
@@ -26,7 +27,7 @@ export default Vue.extend({
       if (!this.conversationId) {
         return undefined
       }
-      return iridium.chat.state.conversations[this.conversationId]
+      return this.chat.conversations[this.conversationId]
     },
   },
   methods: {
diff --git a/components/views/media/Media.vue b/components/views/media/Media.vue
index 668a24b282..06056f5a2b 100644
--- a/components/views/media/Media.vue
+++ b/components/views/media/Media.vue
@@ -5,7 +5,6 @@ import Vue, { PropType } from 'vue'
 import { mapState } from 'vuex'
 import { User } from '~/libraries/Iridium/friends/types'
 import iridium from '~/libraries/Iridium/IridiumManager'
-import { useWebRTC } from '~/libraries/Iridium/webrtc/hooks'
 import { RootState } from '~/types/store/store'
 
 export default Vue.extend({
@@ -25,11 +24,6 @@ export default Vue.extend({
       required: true,
     },
   },
-  setup() {
-    const { localParticipant, remoteParticipants } = useWebRTC()
-
-    return { localParticipant, remoteParticipants }
-  },
   data() {
     return {
       webrtc: iridium.webRTC.state,
@@ -41,6 +35,16 @@ export default Vue.extend({
       callHeight: (state) => (state as RootState).ui.callHeight,
       volume: (state) => (state as RootState).audio.volume,
     }),
+    localParticipant(): User | undefined {
+      const p = iridium.webRTC.localParticipant()
+      console.info('localParticipant', p)
+      return p
+    },
+    remoteParticipants(): User[] {
+      const p = iridium.webRTC.remoteParticipants()
+      console.info('remoteParticipants', p)
+      return p
+    },
     height: {
       get(): string {
         return this.callHeight
diff --git a/components/views/media/actions/Actions.vue b/components/views/media/actions/Actions.vue
index f90d75ceeb..112de4a522 100644
--- a/components/views/media/actions/Actions.vue
+++ b/components/views/media/actions/Actions.vue
@@ -30,7 +30,7 @@ export default Vue.extend({
   },
   data() {
     return {
-      buttonsLoading: [],
+      buttonsLoading: [] as WebRTCEnum[],
       webrtc: iridium.webRTC.state,
     }
   },
diff --git a/components/views/media/heading/Heading.html b/components/views/media/heading/Heading.html
index 0e71f13018..2c0dfdee63 100644
--- a/components/views/media/heading/Heading.html
+++ b/components/views/media/heading/Heading.html
@@ -13,7 +13,7 @@
       <maximize-icon v-else data-cy="go-fullscreen" size="1.2x" />
     </button>
   </transition>
-  <TypographyTag v-if="elapsedTime" data-cy="elapsed-time">
-    {{$t('ui.live', { time: elapsedTime })}}
+  <TypographyTag v-if="callTime" data-cy="elapsed-time">
+    {{$t('ui.live', { time: callTime })}}
   </TypographyTag>
 </div>
diff --git a/components/views/media/heading/Heading.vue b/components/views/media/heading/Heading.vue
index 65d8194a3b..f187df995b 100644
--- a/components/views/media/heading/Heading.vue
+++ b/components/views/media/heading/Heading.vue
@@ -4,7 +4,6 @@
 import Vue from 'vue'
 import { MaximizeIcon, MinimizeIcon } from 'satellite-lucide-icons'
 import iridium from '~/libraries/Iridium/IridiumManager'
-import { useCallElapsedTime } from '~/libraries/Iridium/webrtc/hooks'
 
 export default Vue.extend({
   components: {
@@ -17,26 +16,12 @@ export default Vue.extend({
       required: true,
     },
   },
-  setup() {
-    const { elapsedTime, startInterval, clearTimer } = useCallElapsedTime()
-    return { elapsedTime, startInterval, clearTimer }
-  },
   data() {
     return {
       webrtc: iridium.webRTC.state,
+      callTime: iridium.webRTC.callTime,
     }
   },
-  watch: {
-    'webrtc.createdAt': {
-      handler() {
-        this.startInterval()
-      },
-      immediate: true,
-    },
-  },
-  beforeDestroy() {
-    this.clearTimer()
-  },
 })
 </script>
 
diff --git a/components/views/media/incomingCall/IncomingCall.vue b/components/views/media/incomingCall/IncomingCall.vue
index 00b0c9f3f8..6cdbf404d0 100644
--- a/components/views/media/incomingCall/IncomingCall.vue
+++ b/components/views/media/incomingCall/IncomingCall.vue
@@ -37,6 +37,7 @@ export default Vue.extend({
   data() {
     return {
       webrtc: iridium.webRTC.state,
+      chat: iridium.chat.state,
     }
   },
   computed: {
@@ -47,7 +48,7 @@ export default Vue.extend({
       if (!this.conversationId) {
         return undefined
       }
-      return iridium.chat.state.conversations[this.conversationId]
+      return this.chat.conversations[this.conversationId]
     },
     isGroup(): boolean {
       return this.conversation?.type === 'group'
diff --git a/components/views/media/previewCall/PreviewCall.vue b/components/views/media/previewCall/PreviewCall.vue
index ec195bf93c..f667b1a79c 100644
--- a/components/views/media/previewCall/PreviewCall.vue
+++ b/components/views/media/previewCall/PreviewCall.vue
@@ -4,7 +4,6 @@
 import Vue from 'vue'
 import { CornerUpLeftIcon } from 'satellite-lucide-icons'
 import iridium from '~/libraries/Iridium/IridiumManager'
-import { useWebRTC } from '~/libraries/Iridium/webrtc/hooks'
 
 export default Vue.extend({
   components: {
@@ -16,20 +15,14 @@ export default Vue.extend({
       default: false,
     },
   },
-  setup() {
-    const { remoteParticipants } = useWebRTC()
-
-    const remoteParticipant = computed(() => {
-      return remoteParticipants.value.length > 0
-        ? remoteParticipants.value[0]
-        : null
-    })
-
-    return { remoteParticipant }
+  data() {
+    return {
+      webrtc: iridium.webRTC.state,
+    }
   },
   methods: {
     navigateToActiveConversation() {
-      if (!iridium.webRTC.state.activeCall?.callId) {
+      if (!this.webrtc.activeCall) {
         return
       }
       if (this.$device.isMobile) {
@@ -37,7 +30,7 @@ export default Vue.extend({
         this.$store.commit('ui/setSwiperSlideIndex', 1)
         this.$store.commit('ui/showSidebar', false)
       }
-      this.$router.push(`/chat/${iridium.webRTC.state.activeCall.callId}`)
+      this.$router.push(`/chat/${this.webrtc.activeCall.callId}`)
     },
   },
 })
diff --git a/components/views/media/user/User.vue b/components/views/media/user/User.vue
index 61b3acccef..3bed982916 100644
--- a/components/views/media/user/User.vue
+++ b/components/views/media/user/User.vue
@@ -13,7 +13,8 @@ import { AudioStreamUtils } from '~/utilities/AudioStreamUtils'
 import { User } from '~/libraries/Iridium/friends/types'
 import { RootState } from '~/types/store/store'
 import iridium from '~/libraries/Iridium/IridiumManager'
-import { useUserStreams, useWebRTC } from '~/libraries/Iridium/webrtc/hooks'
+import { $WebRTC } from '~/libraries/WebRTC/WebRTC'
+import { WebRTCEnum } from '~/libraries/Enums/enums'
 
 export default Vue.extend({
   components: {
@@ -36,22 +37,10 @@ export default Vue.extend({
       default: false,
     },
   },
-  setup(props) {
-    const { call } = useWebRTC()
-    const { streams, getStream } = useUserStreams(props.user.did)
-
-    return {
-      call,
-      streams,
-      audioStream: getStream('audio'),
-      videoStream: getStream('video'),
-      screenStream: getStream('screen'),
-    }
-  },
   data() {
     return {
-      videoSettings: iridium.settings.state.video,
       webrtc: iridium.webRTC.state,
+      videoSettings: iridium.settings.state.video,
       isTalking: false,
       audioStreamUtils: null as AudioStreamUtils | null,
     }
@@ -61,6 +50,14 @@ export default Vue.extend({
       audio: (state) => (state as RootState).audio,
       video: (state) => (state as RootState).video,
     }),
+    call() {
+      if (!this.webrtc.activeCall?.callId) return
+      return $WebRTC.getCall(this.webrtc.activeCall.callId)
+    },
+    streams() {
+      if (!this.user.did || !this.call) return
+      return this.call.streams[this.user.did]
+    },
     src(): string {
       const hash = this.user.photoHash
       return hash ? `${this.$Config.ipfs.gateway}${hash}` : ''
@@ -68,10 +65,22 @@ export default Vue.extend({
     isPending(): boolean {
       return Boolean(
         this.user.did !== iridium.connector?.id &&
-          this.call &&
-          !this.webrtc.createdAt,
+          this.webrtc.activeCall &&
+          !this.webrtc.callStartedAt,
       )
     },
+    audioStream() {
+      if (this.isMuted('audio') || !this.call) return
+      return this.streams?.audio
+    },
+    videoStream() {
+      if (this.isMuted('video') || !this.call) return
+      return this.streams?.video
+    },
+    screenStream() {
+      if (this.isMuted('screen') || !this.call) return
+      return this.streams?.screen
+    },
   },
   watch: {
     audioStream(stream) {
@@ -104,6 +113,14 @@ export default Vue.extend({
   beforeDestroy() {
     this.audioStreamUtils?.destroy()
   },
+  methods: {
+    isMuted(kind: WebRTCEnum) {
+      return (
+        !this.user.did ||
+        Boolean(this.webrtc.streamMuted[this.user.did]?.[kind] ?? true)
+      )
+    },
+  },
 })
 </script>
 
diff --git a/components/views/navigation/mobile/toolbar/Toolbar.vue b/components/views/navigation/mobile/toolbar/Toolbar.vue
index fffc4ff7bd..f7df8d06c5 100644
--- a/components/views/navigation/mobile/toolbar/Toolbar.vue
+++ b/components/views/navigation/mobile/toolbar/Toolbar.vue
@@ -13,10 +13,10 @@ import { mapGetters } from 'vuex'
 import iridium from '~/libraries/Iridium/IridiumManager'
 import Group from '~/libraries/Iridium/groups/Group'
 import { TrackKind } from '~/libraries/WebRTC/types'
-import type { User } from '~/libraries/Iridium/friends/types'
+import type { Friend, User } from '~/libraries/Iridium/friends/types'
 import { Conversation } from '~/libraries/Iridium/chat/types'
 import { GroupMemberDetails } from '~/libraries/Iridium/groups/types'
-import { useWebRTC } from '~/libraries/Iridium/webrtc/hooks'
+import { GroupState } from '~/libraries/Iridium/groups/GroupManager'
 
 export default Vue.extend({
   components: {
@@ -25,21 +25,20 @@ export default Vue.extend({
     MenuIcon,
     VideoIcon,
   },
-  setup() {
-    const { isActiveCall } = useWebRTC()
-
-    return { isActiveCall }
-  },
   data() {
     return {
       users: iridium.users.state,
       groups: iridium.groups.state,
       isGroupInviteVisible: false,
       webrtc: iridium.webRTC.state,
+      chat: iridium.chat.state,
     }
   },
   computed: {
     ...mapGetters('ui', ['allUnseenNotifications']),
+    isActiveCall() {
+      return iridium.webRTC.isActiveCall(this.$route.params.id)
+    },
     conversationId(): Conversation['id'] | undefined {
       return this.$route.params.id
     },
@@ -47,20 +46,20 @@ export default Vue.extend({
       if (!this.conversationId) {
         return undefined
       }
-      return iridium.chat.state.conversations[this.conversationId]
+      return this.chat.conversations[this.conversationId]
     },
     isGroup(): boolean {
       return this.conversation?.type === 'group'
     },
-    details(): User | Group | undefined {
+    details(): User | GroupState | undefined {
       if (!this.conversation) {
         return undefined
       }
       if (this.isGroup) {
         return this.groups[this.conversation.id]
       }
-      const friendDid = this.conversation.participants.find(
-        (f) => f !== iridium.connector?.id,
+      const friendDid = this.conversation?.participants.find(
+        (f: string) => f !== iridium.connector?.id,
       )
       if (!friendDid) {
         return
@@ -68,24 +67,21 @@ export default Vue.extend({
       return this.users[friendDid]
     },
     groupMembers(): GroupMemberDetails[] {
-      const members = (this.details as Group).members ?? []
+      const members = (this.details as GroupState).members ?? []
       return Object.values(members)
     },
     enableRTC(): boolean {
+      console.info('enableRTC', this.details, this.isGroup)
       // todo- hook up to usermanager
-      return false
-      // if (this.isGroup) {
-      //   const memberIds = this.groupMembers.map((m) => m.id)
-      //   return this.friends.some(
-      //     (friend: Friend) =>
-      //       memberIds.includes(friend.did) && friend.status === 'online',
-      //   )
-      // }
-      // // Check current recipient is on the user's friends list
-      // const friend = this.friends.find(
-      //   (f) => f.did === (this.details as User)?.did,
-      // )
-      // return friend?.status === 'online'
+      if (this.isGroup) {
+        const memberIds = this.groupMembers.map((m) => m.id)
+        return this.friends.some(
+          (friend: Friend) =>
+            memberIds.includes(friend.did) && friend.status === 'online',
+        )
+      }
+      // Check current recipient is on the user's friends list
+      return this.details?.status === 'online'
     },
   },
   methods: {
@@ -94,7 +90,7 @@ export default Vue.extend({
         return
       }
       try {
-        await iridium.webRTC.call(this.details, kinds)
+        await iridium.webRTC.call(this.details as Friend, kinds)
       } catch (e: any) {
         this.$toast.error(this.$t(e.message) as string)
       }
diff --git a/components/views/navigation/sidebar/Sidebar.vue b/components/views/navigation/sidebar/Sidebar.vue
index 6c660d65a4..3a6e00a7ff 100644
--- a/components/views/navigation/sidebar/Sidebar.vue
+++ b/components/views/navigation/sidebar/Sidebar.vue
@@ -17,12 +17,12 @@ export default Vue.extend({
   data() {
     return {
       isQuickchatVisible: false,
-      requests: iridium.friends.state.requests,
+      friends: iridium.friends.state,
     }
   },
   computed: {
     incomingRequestsLength(): number {
-      return Object.values(this.requests).filter(
+      return Object.values(this.friends.requests).filter(
         (r: FriendRequest) => r.status === 'pending' && r.incoming,
       ).length
     },
diff --git a/components/views/navigation/sidebar/list/List.html b/components/views/navigation/sidebar/list/List.html
index 0acc25f806..6ced8198f9 100644
--- a/components/views/navigation/sidebar/list/List.html
+++ b/components/views/navigation/sidebar/list/List.html
@@ -2,7 +2,7 @@
   <SidebarListItem
     v-for="c in sortedConversations"
     :key="c.id"
-    :conversation="c"
+    :conversationId="c.id"
   />
   <FriendsEmptyMessage v-if="!sortedConversations.length" displayImage />
 </div>
diff --git a/components/views/navigation/sidebar/list/List.vue b/components/views/navigation/sidebar/list/List.vue
index d0f5827a4e..5ef5aef901 100644
--- a/components/views/navigation/sidebar/list/List.vue
+++ b/components/views/navigation/sidebar/list/List.vue
@@ -10,12 +10,15 @@ export default Vue.extend({
   components: {
     UserPlusIcon,
   },
-  data: () => ({
-    conversations: iridium.chat.state.conversations,
-  }),
+  data() {
+    return {
+      chat: iridium.chat.state,
+      users: iridium.users.state,
+    }
+  },
   computed: {
     sortedConversations(): Conversation[] {
-      return Object.values(this.conversations).sort(
+      return Object.values(this.chat.conversations).sort(
         (a, b) => this.lastMessageTimestamp(b) - this.lastMessageTimestamp(a),
       )
     },
@@ -23,7 +26,7 @@ export default Vue.extend({
   methods: {
     lastMessageTimestamp(conversation: Conversation): number {
       const messages = Object.values(
-        this.conversations[conversation.id].message,
+        this.chat.conversations[conversation.id].message,
       ).sort((a, b) => a.at - b.at)
       return messages.at(-1)?.at ?? (conversation.updatedAt || 0)
     },
diff --git a/components/views/navigation/sidebar/list/item/Item.html b/components/views/navigation/sidebar/list/item/Item.html
index 521fdc708b..dd733d7de3 100644
--- a/components/views/navigation/sidebar/list/item/Item.html
+++ b/components/views/navigation/sidebar/list/item/Item.html
@@ -6,8 +6,14 @@
   data-cy="sidebar-user"
 >
   <template>
-    <UiUserState v-if="conversation.type === 'direct'" :user="user" />
-    <UiGroupIcon v-else :members="participants" />
+    <UiUserState
+      v-if="conversation.type === 'direct' && userId"
+      :userId="userId"
+    />
+    <UiGroupIcon
+      v-else-if="conversation.participants"
+      :members="conversation.participants"
+    />
   </template>
   <div class="user-info">
     <TypographyText
diff --git a/components/views/navigation/sidebar/list/item/Item.vue b/components/views/navigation/sidebar/list/item/Item.vue
index a20d271db8..bd98068164 100644
--- a/components/views/navigation/sidebar/list/item/Item.vue
+++ b/components/views/navigation/sidebar/list/item/Item.vue
@@ -20,8 +20,8 @@ export default Vue.extend({
     VueMarkdown,
   },
   props: {
-    conversation: {
-      type: Object as PropType<Conversation>,
+    conversationId: {
+      type: String as PropType<Conversation['id']>,
       required: true,
     },
   },
@@ -30,7 +30,9 @@ export default Vue.extend({
       isLoading: false,
       timestamp: '' as string | TranslateResult,
       timeoutId: undefined as NodeJS.Timeout | undefined,
+      chat: iridium.chat.state,
       groups: iridium.groups.state,
+      users: iridium.users.state,
     }
   },
   computed: {
@@ -39,18 +41,16 @@ export default Vue.extend({
       accounts: (state) => (state as RootState).accounts,
     }),
     ...mapGetters('settings', ['getTimestamp', 'getDate']),
-    user(): User | undefined {
-      return this.participants.find(
-        (user) => user.did !== iridium.connector?.id,
-      )
+    conversation(): Conversation | undefined {
+      return this.chat.conversations[this.conversationId]
     },
-    participants(): User[] {
-      return this.conversation.participants.map((did) => {
-        return iridium.users.getUser(did)
-      })
+    userId(): string | undefined {
+      return (this.conversation?.participants || []).find(
+        (did) => did !== iridium.connector?.id,
+      )
     },
     contextMenuValues(): ContextMenuItem[] {
-      return this.conversation.type === 'direct'
+      return this.conversation?.type === 'direct'
         ? [
             { text: this.$t('context.send'), func: this.openConversation },
             {
@@ -74,10 +74,10 @@ export default Vue.extend({
           ]
     },
     messages(): ConversationMessage[] {
-      if (!Object.keys(this.conversation).length) {
+      if (!Object.keys(this.conversation || {}).length) {
         return []
       }
-      return Object.values(this.conversation.message).sort(
+      return Object.values(this.conversation?.message || {}).sort(
         (a, b) => a.at - b.at,
       )
     },
@@ -105,7 +105,7 @@ export default Vue.extend({
     },
 
     isSelected(): boolean {
-      return this.conversation.id === this.$route.params.id
+      return this.conversation?.id === this.$route.params.id
     },
   },
   watch: {
@@ -143,9 +143,15 @@ export default Vue.extend({
       await iridium.friends
         .friendRemove(this.user.did)
         .catch((e) => this.$toast.error(this.$t(e.message) as string))
+      if (this.$route.params.id === this.user.did) {
+        this.$router.replace('/friends')
+      }
       this.isLoading = false
     },
     async leaveGroup() {
+      if (!this.conversation?.id) {
+        return
+      }
       iridium.chat.leaveGroup(this.conversation.id)
     },
     /**
@@ -153,6 +159,9 @@ export default Vue.extend({
      * @description Navigates to user or group conversation
      */
     async openConversation() {
+      if (!this.conversation?.id) {
+        return
+      }
       if (this.$device.isMobile) {
         this.$router.push({ params: { id: this.conversation.id } })
         return
diff --git a/components/views/navigation/sidebar/live/Live.vue b/components/views/navigation/sidebar/live/Live.vue
index adcce5b16b..bc2b4879d6 100644
--- a/components/views/navigation/sidebar/live/Live.vue
+++ b/components/views/navigation/sidebar/live/Live.vue
@@ -21,6 +21,7 @@ export default Vue.extend({
       webrtc: iridium.webRTC,
       users: iridium.users.state,
       groups: iridium.groups.state,
+      chat: iridium.chat.state,
     }
   },
   computed: {
@@ -44,7 +45,7 @@ export default Vue.extend({
       if (!this.conversationId) {
         return undefined
       }
-      return iridium.chat.state.conversations[this.conversationId]
+      return this.chat.conversations[this.conversationId]
     },
     isGroup(): boolean {
       return this.conversation?.type === 'group'
@@ -56,7 +57,7 @@ export default Vue.extend({
       if (this.isGroup) {
         return this.groups[this.conversation.id]
       }
-      const participant = this.conversation.participants.find(
+      const participant = this.conversation?.participants.find(
         (f) => f !== iridium.connector?.id,
       )
       if (!participant) {
diff --git a/components/views/navigation/sidebar/quick/Quick.vue b/components/views/navigation/sidebar/quick/Quick.vue
index 6298b5543a..6605ead474 100644
--- a/components/views/navigation/sidebar/quick/Quick.vue
+++ b/components/views/navigation/sidebar/quick/Quick.vue
@@ -13,7 +13,6 @@ export default Vue.extend({
   data() {
     return {
       friends: [] as Friend[],
-      conversations: iridium.chat.state.conversations,
       isLoading: false,
       error: '' as TranslateResult,
       name: '',
diff --git a/components/views/navigation/sidebar/status/Status.vue b/components/views/navigation/sidebar/status/Status.vue
index e13934b546..b32d3be4fe 100644
--- a/components/views/navigation/sidebar/status/Status.vue
+++ b/components/views/navigation/sidebar/status/Status.vue
@@ -18,10 +18,14 @@ export default Vue.extend({
   },
   methods: {
     copyId() {
-      if (iridium.connector) {
-        navigator.clipboard.writeText(iridium.connector?.id)
-        this.$toast.show(this.$t('ui.copied') as string)
-      }
+      if (!iridium.connector) return
+      const shortID = iridium.profile.state
+        ? `${iridium.profile.state.name}#${iridium.connector.id.substring(
+            iridium.connector.id.length - 6,
+          )}`
+        : `${iridium.connector?.id}`
+      navigator.clipboard.writeText(shortID)
+      this.$toast.show(this.$t('ui.copied') as string)
     },
   },
 })
diff --git a/components/views/navigation/toolbar/Toolbar.html b/components/views/navigation/toolbar/Toolbar.html
index 37d4168a96..40a33ef2e2 100644
--- a/components/views/navigation/toolbar/Toolbar.html
+++ b/components/views/navigation/toolbar/Toolbar.html
@@ -2,7 +2,7 @@
   <InteractablesSidebarToggle v-if="!ui.showSidebar" />
   <div class="circle-container">
     <template v-if="details">
-      <UiUserState v-if="!isGroup" class="circle" :user="details" />
+      <UiUserState v-if="!isGroup" class="circle" :userId="details.did" />
       <UiGroupIcon v-else :members="members" />
     </template>
   </div>
@@ -13,15 +13,15 @@
   <div class="controls">
     <div class="toggle-alerts" data-cy="toolbar-alerts">
       <UiCircle
-        v-if="notifications.length"
+        v-if="notifications.notifications.length"
         class="notification-alert"
         :size="15"
         color="red"
         type="icon"
-        :data="notifications.length"
+        :data="notifications.notifications.length"
         @click="toggleAlerts"
       >
-        {{notifications.length}}
+        {{notifications.notifications.length}}
       </UiCircle>
       <ToolbarAlerts
         v-if="showAlerts && $device.isDesktop"
diff --git a/components/views/navigation/toolbar/Toolbar.vue b/components/views/navigation/toolbar/Toolbar.vue
index 855e1e58cb..fcab7610c6 100644
--- a/components/views/navigation/toolbar/Toolbar.vue
+++ b/components/views/navigation/toolbar/Toolbar.vue
@@ -20,7 +20,6 @@ import { TrackKind } from '~/libraries/WebRTC/types'
 import type { Friend, User } from '~/libraries/Iridium/friends/types'
 import { RootState } from '~/types/store/store'
 import { Conversation } from '~/libraries/Iridium/chat/types'
-import { useWebRTC } from '~/libraries/Iridium/webrtc/hooks'
 
 export default Vue.extend({
   components: {
@@ -40,44 +39,47 @@ export default Vue.extend({
   data() {
     return {
       searchRecommend,
+      notifications: iridium.notifications.state,
+      chat: iridium.chat.state,
       showAlerts: false,
       searchQuery: '' as string,
       users: iridium.users.state,
       groups: iridium.groups.state,
       isGroupInviteVisible: false,
       webrtc: iridium.webRTC.state,
-      webRTC: useWebRTC(),
     }
   },
   computed: {
     ...mapState({
-      notifications: () => Object.entries(iridium.notifications?.state),
       ui: (state) => (state as RootState).ui,
       audio: (state) => (state as RootState).audio,
       video: (state) => (state as RootState).video,
       modals: (state) => (state as RootState).ui.modals,
     }),
     ModalWindows: () => ModalWindows,
-    conversationId(): string {
+    conversationId(): Conversation['id'] | undefined {
       return this.$route.params.id
     },
+    isActiveCall() {
+      return this.webrtc.activeCall?.callId === this.conversationId
+    },
     conversation(): Conversation {
-      return iridium.chat.state.conversations[this.conversationId]
+      return this.chat.conversations[this.conversationId]
     },
     isGroup(): boolean {
-      return this.conversation.participants.length > 2
+      return this.conversation?.participants.length > 2
     },
     details(): User | Conversation {
       if (this.isGroup) {
-        return iridium.chat.state.conversations[this.conversationId]
+        return this.chat.conversations[this.conversationId]
       }
-      const friendDid = this.conversation.participants.find(
-        (f) => f !== iridium.connector?.id,
+      const friendDid = this.conversation?.participants.find(
+        (f: string) => f !== iridium.connector?.id,
       ) as string
       return this.users[friendDid]
     },
     members(): User[] {
-      return this.conversation.participants.map((did) => {
+      return this.conversation?.participants.map((did) => {
         return iridium.users.getUser(did)
       })
     },
@@ -91,6 +93,7 @@ export default Vue.extend({
       return (this.details as User).status || 'offline'
     },
     enableRTC(): boolean {
+      console.info('enableRTC', this.details, this.isGroup)
       // todo- hook up to usermanager
       if (this.isGroup) {
         const memberIds = this.members.map((m) => m.did)
@@ -100,10 +103,7 @@ export default Vue.extend({
         )
       }
       // Check current recipient is on the user's friends list
-      const friend = Object.values(this.users).find(
-        (f) => f.did === (this.details as User)?.did,
-      )
-      return friend?.status === 'online'
+      return this.details?.status === 'online'
     },
     callTooltipText(): string {
       if (this.isGroup) {
@@ -169,7 +169,7 @@ export default Vue.extend({
       if (this.isGroup) {
         return
       }
-      if (!this.enableRTC || this.webRTC.isActiveCall) {
+      if (!this.enableRTC || this.isActiveCall) {
         return
       }
       await this.call(['audio'])
diff --git a/components/views/navigation/toolbar/alerts/Alerts.html b/components/views/navigation/toolbar/alerts/Alerts.html
index 611d6762ac..b4f7eca6fb 100644
--- a/components/views/navigation/toolbar/alerts/Alerts.html
+++ b/components/views/navigation/toolbar/alerts/Alerts.html
@@ -3,20 +3,23 @@
     <flask-conical-icon size="0.85x" />
     <TypographySubtitle :size="6" :text="$t('pages.chat.alerts')" />
   </div>
-  <template v-if="notifications.length">
-<!--    <InteractablesButton-->
-<!--      @click="clearNotifications"-->
-<!--      class="alerts-clear-button"-->
-<!--      color="primary"-->
-<!--      :text="$t('ui.clear_all')"-->
-<!--    />-->
-    <ToolbarAlertsAlert
-      v-for="notification in notifications"
-      v-if="notification[1].type !== 'EMPTY'"
-      :alert="notification[1]"
-      :alertDid="notification[0]"
-      :key="notification.id"
-    />
+  <template>
+    <section v-if="alerts.length">
+      <InteractablesButton
+        @click="clearNotifications"
+        class="alerts-clear-button"
+        color="primary"
+        :text="$t('ui.clear_all')"
+      />
+      <ToolbarAlertsAlert
+        v-for="alert in alerts"
+        v-if="alert.type !== 'EMPTY'"
+        :alert="alert"
+        :key="alert.id"
+      />
+    </section>
+    <section v-else>
+      <TypographySubtitle :size="6" :text="$t('alerts.caught_up')" />
+    </section>
   </template>
-  <TypographySubtitle v-else :size="6" :text="$t('alerts.caught_up')" />
 </div>
diff --git a/components/views/navigation/toolbar/alerts/Alerts.less b/components/views/navigation/toolbar/alerts/Alerts.less
index a4064f8c70..cf3f407d57 100644
--- a/components/views/navigation/toolbar/alerts/Alerts.less
+++ b/components/views/navigation/toolbar/alerts/Alerts.less
@@ -3,6 +3,7 @@
   display: flex;
   flex-direction: column;
   gap: @light-spacing;
+  z-index: 10;
 
   top: 45px;
   left: 0;
@@ -27,7 +28,9 @@
 
   button {
     flex-shrink: 0;
-    width: fit-content;
+    width: 100%;
+    box-sizing: border-box;
+    margin-bottom: 8px;
   }
 }
 
diff --git a/components/views/navigation/toolbar/alerts/Alerts.vue b/components/views/navigation/toolbar/alerts/Alerts.vue
index b9e9ba617e..9baed0e5a2 100644
--- a/components/views/navigation/toolbar/alerts/Alerts.vue
+++ b/components/views/navigation/toolbar/alerts/Alerts.vue
@@ -2,7 +2,6 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { mapState } from 'vuex'
 import { FlaskConicalIcon } from 'satellite-lucide-icons'
 import iridium from '~/libraries/Iridium/IridiumManager'
 export default Vue.extend({
@@ -11,24 +10,17 @@ export default Vue.extend({
   },
   data() {
     return {
-      messages: [],
+      notifications: iridium.notifications.state,
     }
   },
   computed: {
-    ...mapState({
-      notifications: () =>
-        Object.entries(iridium.notifications?.state)
-          .sort((a: any, b: any) => {
-            return b.at - a.at
-          })
-          .filter((a) => {
-            return a
-          }),
-    }),
+    alerts() {
+      return this.notifications.notifications
+    },
   },
   methods: {
     clearNotifications() {
-      this.$store.commit('ui/setNotifications', [])
+      return iridium.notifications.deleteAll()
     },
   },
 })
diff --git a/components/views/navigation/toolbar/alerts/alert/Alert.html b/components/views/navigation/toolbar/alerts/alert/Alert.html
index 081ae565a4..0c61747383 100644
--- a/components/views/navigation/toolbar/alerts/alert/Alert.html
+++ b/components/views/navigation/toolbar/alerts/alert/Alert.html
@@ -1,10 +1,10 @@
-<div class="alert" >
-<!--  <UiCircle-->
-<!--    :type="alertImage ? 'image' : 'random'"-->
-<!--    :source="alertImage"-->
-<!--    :data-cy="{'circle-without-picture' : !alertImage}"-->
-<!--  />-->
-  <div class="info-container"  @click="notificationLink(alert.type)">
+<div class="alert">
+  <!--  <UiCircle-->
+  <!--    :type="alertImage ? 'image' : 'random'"-->
+  <!--    :source="alertImage"-->
+  <!--    :data-cy="{'circle-without-picture' : !alertImage}"-->
+  <!--  />-->
+  <div class="info-container" @click="notificationLink(alert.type)">
     <div class="head">
       <TypographySubtitle :size="6" :text="setTranslateText" />
       <TypographyText :text="$dayjs(alert.at).fromNow()" class="timestamp" />
diff --git a/components/views/navigation/toolbar/alerts/alert/Alert.vue b/components/views/navigation/toolbar/alerts/alert/Alert.vue
index 9c2fe2e709..5662740c7e 100644
--- a/components/views/navigation/toolbar/alerts/alert/Alert.vue
+++ b/components/views/navigation/toolbar/alerts/alert/Alert.vue
@@ -16,10 +16,6 @@ export default Vue.extend({
       type: Object as PropType<Notification>,
       required: true,
     },
-    alertDid: {
-      type: String,
-      required: true,
-    },
   },
   computed: {
     setTranslateText(): TranslateResult | undefined {
@@ -44,8 +40,8 @@ export default Vue.extend({
     // },
   },
   methods: {
-    removeNotification(id: string) {
-      iridium.notifications.deleteNotification(this.alertDid)
+    removeNotification() {
+      iridium.notifications.deleteNotification(this.alert.id as string)
     },
     notificationLink(alertType: NotificationType) {
       switch (alertType) {
diff --git a/components/views/settings/pages/accounts/index.vue b/components/views/settings/pages/accounts/index.vue
index 350af6a94b..c4b8fc2cc3 100644
--- a/components/views/settings/pages/accounts/index.vue
+++ b/components/views/settings/pages/accounts/index.vue
@@ -6,6 +6,7 @@ import { mapState } from 'vuex'
 
 import { ClipboardIcon } from 'satellite-lucide-icons'
 import { RootState } from '~/types/store/store'
+import iridium from '~/libraries/Iridium/IridiumManager'
 
 export default Vue.extend({
   name: 'AccountsSettings',
@@ -44,7 +45,13 @@ export default Vue.extend({
       this.showPhrase = !this.showPhrase
     },
     copyAddress() {
-      navigator.clipboard.writeText(this.accounts.active)
+      if (!iridium.connector) return
+      const shortID = iridium.profile.state
+        ? `${iridium.profile.state.name}#${iridium.connector.id.substring(
+            iridium.connector.id.length - 6,
+          )}`
+        : `${iridium.connector?.id}`
+      navigator.clipboard.writeText(shortID)
       this.$toast.show(this.$t('ui.copied') as string)
     },
     copyPhrase() {
diff --git a/libraries/Iridium/IridiumManager.ts b/libraries/Iridium/IridiumManager.ts
index 55cf50ebb4..0047e54314 100644
--- a/libraries/Iridium/IridiumManager.ts
+++ b/libraries/Iridium/IridiumManager.ts
@@ -97,23 +97,27 @@ export class IridiumManager extends Emitter {
 
     logger.log('iridium/manager', 'initializing profile')
     await this.profile.init()
-    logger.log('iridium/manager', 'initializing groups')
-    await this.groups.init()
-    logger.log('iridium/friends', 'initializing friends')
-    await this.friends.init()
-    logger.log('iridium/manager', 'initializing chat')
-    await this.chat.init()
-    logger.log('iridium/manager', 'initializing files')
-    await this.files.init()
-    logger.log('iridium/manager', 'initializing webRTC')
-    await this.webRTC.init()
-    logger.log('iridium/manager', 'initializing settings')
-    await this.settings.init()
-    logger.log('iridium/manager', 'notification settings')
-    await this.notifications.init()
-    logger.log('iridium/manager', 'initializing users')
-    await this.users.init()
-    logger.log('iridium/manager', 'ready')
+    logger.log('iridium/manager', 'sending sync init')
+
+    this.connector.p2p.on('ready', async () => {
+      logger.log('iridium/manager', 'initializing users')
+      await this.users.init()
+      logger.log('iridium/manager', 'initializing groups')
+      await this.groups.init()
+      logger.log('iridium/friends', 'initializing friends')
+      await this.friends.init()
+      logger.log('iridium/manager', 'initializing chat')
+      await this.chat.init()
+      logger.log('iridium/manager', 'initializing files')
+      await this.files.init()
+      logger.log('iridium/manager', 'initializing webRTC')
+      await this.webRTC.init()
+      logger.log('iridium/manager', 'initializing settings')
+      await this.settings.init()
+      logger.log('iridium/manager', 'notification settings')
+      await this.notifications.init()
+      logger.log('iridium/manager', 'ready')
+    })
 
     await this.sendSyncInit()
 
@@ -127,6 +131,7 @@ export class IridiumManager extends Emitter {
       return
     }
 
+    logger.info('iridium/manager', 'sending sync init', { profile })
     const payload = {
       type: 'sync/init',
       at: Date.now(),
diff --git a/libraries/Iridium/NotificationManager.ts b/libraries/Iridium/NotificationManager.ts
index e908afd380..358792a13b 100644
--- a/libraries/Iridium/NotificationManager.ts
+++ b/libraries/Iridium/NotificationManager.ts
@@ -1,3 +1,4 @@
+import Vue from 'vue'
 import {
   Emitter,
   EmitterCallback,
@@ -17,9 +18,9 @@ export default class NotificationManager extends Emitter<Notification> {
   public ready: boolean = false
   public subscriptions: string[] = []
   public state: {
-    notifications: [{ [key: string]: Notification }]
+    notifications: Notification[]
   } = {
-    notifications: [{}],
+    notifications: [],
   }
 
   constructor(public readonly iridium: IridiumManager) {
@@ -33,9 +34,22 @@ export default class NotificationManager extends Emitter<Notification> {
   }
 
   async fetch() {
-    this.state = (await this.iridium.connector?.get('notifications')) || {
-      notifications: [{}],
+    logger.info('iridium/notifications/fetch', 'fetching')
+    const fetched = await this.iridium.connector?.get<{
+      notifications: Notification[]
+    }>('notifications')
+    if (fetched) {
+      this.state.notifications = Array.isArray(fetched.notifications)
+        ? fetched.notifications
+        : fetched.notifications
+        ? Object.values(fetched.notifications)
+        : []
     }
+    logger.info('iridium/notifications/fetch', 'fetched', this.state)
+  }
+
+  get list(): Notification[] {
+    return Object.values(this.state.notifications)
   }
 
   get(path: string, options: IridiumGetOptions = {}) {
@@ -45,32 +59,27 @@ export default class NotificationManager extends Emitter<Notification> {
     )
   }
 
-  set(path: string, payload: any, options: IridiumSetOptions = {}) {
+  async set(path: string, payload: any, options: IridiumSetOptions = {}) {
     logger.info('iridium/notifications', 'path and paylaod', {
       path,
       payload,
     })
-    return this.iridium.connector?.set(
-      `/${path === '/' ? '' : path}`,
+    await this.iridium.connector?.set(
+      `/notifications${path === '/' ? '' : path}`,
       payload,
       options,
     )
-  }
-
-  async filterDeletedNotifications(): Promise<[{ [p: string]: Notification }]> {
-    this.state = (await this.iridium.connector?.get('notifications')) || {
-      notifications: [{}],
-    }
-    return this.state.notifications.sort((a: any, b: any) => {
-      return b.at - a.at
-    })
+    await this.fetch()
   }
 
   async seenAll() {
-    this.state.notifications.forEach((a) => {
-      a[1].seen = true
-      this.iridium.connector?.set(`/notifications/${a[0]}`, a[1])
-    })
+    this.state.notifications = this.state.notifications.map(
+      (a: Notification) => {
+        a.seen = true
+        return a
+      },
+    )
+    await this.save()
   }
 
   async subscribeToNotifications(
@@ -88,36 +97,47 @@ export default class NotificationManager extends Emitter<Notification> {
     this.off(`notifications`, onNotification)
   }
 
-  async deleteNotification(Id: string) {
-    await this.iridium.connector?.set(`/notifications/${Id}`, EmptyNotification)
+  async save() {
+    await this.set('/notifications', this.state.notifications)
+  }
+
+  async deleteNotification(id: string) {
+    Vue.delete(
+      this.state.notifications,
+      this.state.notifications.findIndex((n) => n.id === id),
+    )
+    await this.save()
+  }
+
+  async deleteAll() {
+    this.state.notifications = []
+    await this.save()
   }
 
   /**
    * Send a new notification
    * @method sendNotification
    */
-  async sendNotification(payload: Partial<Notification>) {
+  async sendNotification(notification: Exclude<Notification, 'id'>) {
     if (!this.iridium.connector) return
-    const notificationCID = await this.iridium.connector.store(payload, {})
-    if (!notificationCID) {
+    const notificationID = await this.iridium.connector.store(notification, {})
+    if (!notificationID) {
       throw new Error(NotificationsError.NOTIFICATION_NOT_SENT)
     }
-    await this.iridium.connector.set(
-      `/notifications/${notificationCID}`,
-      payload,
-    )
+    notification.id = notificationID.toString()
+    this.state.notifications = [...this.state.notifications, notification]
+    await this.save()
 
-    this.emit(`notifications/${notificationCID}`, {
-      action: 'notification',
-      message: payload,
+    this.emit(`notifications/send`, {
+      notification,
       from: this.iridium.connector.did,
     })
     const browserNotification = new Notifications()
     await browserNotification.sendNotifications(
-      payload.type!,
-      payload.title!,
-      payload.image!,
-      payload.description!,
+      notification.type!,
+      notification.title!,
+      notification.image!,
+      notification.description!,
     )
   }
 }
diff --git a/libraries/Iridium/chat/ChatManager.ts b/libraries/Iridium/chat/ChatManager.ts
index 34e21ef1fe..c8e74124f4 100644
--- a/libraries/Iridium/chat/ChatManager.ts
+++ b/libraries/Iridium/chat/ChatManager.ts
@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import {
   IridiumMessage,
   Emitter,
@@ -6,17 +5,14 @@ import {
   IridiumPubsubMessage,
   IridiumSetOptions,
   encoding,
-  IridiumPeerIdentifier,
+  IridiumDocument,
 } from '@satellite-im/iridium'
 import type { IridiumDecodedPayload } from '@satellite-im/iridium/src/core/encoding'
 import type { AddOptions, AddResult } from 'ipfs-core-types/root'
 import type { IPFS } from 'ipfs-core-types'
 import { CID } from 'multiformats'
 import * as json from 'multiformats/codecs/json'
-import type {
-  SyncFetchResponse,
-  SyncSubscriptionResponse,
-} from '@satellite-im/iridium/src/sync/agent'
+import type { SyncFetchResponse } from '@satellite-im/iridium/src/sync/agent'
 import type { EmitterCallback } from '@satellite-im/iridium'
 import { v4 } from 'uuid'
 import {
@@ -50,7 +46,7 @@ export type ConversationPubsubEvent = IridiumMessage<
 >
 
 export type State = {
-  conversations: { [key: Conversation['id']]: Conversation }
+  conversations: { [key: string]: Conversation }
 }
 
 const initialState: State = {
@@ -58,82 +54,75 @@ const initialState: State = {
 }
 
 export type Conversations = {
-  [key: Conversation['id']]: ConversationMessage[]
+  [key: string]: ConversationMessage[]
 }
 
 export default class ChatManager extends Emitter<ConversationMessage> {
   public ready: boolean = false
+
   public state: State = {
     conversations: {},
   }
 
-  private _intervals: { [key: string]: any } = {}
-  public subscriptions: {
-    [key: string]: { topic: string; connected: boolean }
-  } = {}
+  public ephemeral: { typing: { [key: string]: string[] } } = { typing: {} }
 
   constructor(public readonly iridium: IridiumManager) {
     super()
   }
 
   async init() {
-    this.state = ((await this.get()) as State) ?? initialState
+    const fetched = await this.get<State>()
+    this.state.conversations = fetched?.conversations || {}
     const conversations = Object.values(this.state.conversations)
     const iridium = this.iridium.connector
     if (!iridium) {
       throw new Error('cannot initialize chat manager, no iridium connector')
     }
-    // listen for sync node subscription responses
-    iridium.p2p.on<
-      IridiumPubsubMessage<IridiumDecodedPayload<SyncSubscriptionResponse>>
-    >('node/message/sync/subscribe', this.onSyncSubscriptionResponse.bind(this))
 
     iridium.p2p.on<
       IridiumPubsubMessage<IridiumDecodedPayload<SyncFetchResponse>>
     >('node/message/sync/fetch', this.onSyncFetchResponse.bind(this))
 
-    iridium.subscribe<IridiumConversationEvent>('/chat/announce', {
+    iridium.subscribe<
+      IridiumPubsubMessage<IridiumDecodedPayload<IridiumConversationEvent>>
+    >('/chat/announce', {
       handler: this.onConversationAnnounce.bind(this),
     })
 
-    iridium.p2p.on('ready', async () => {
-      if (!iridium.p2p.primaryNodeID) {
-        throw new Error('not connected to primary node')
-      }
+    if (!iridium.p2p.primaryNodeID) {
+      throw new Error('not connected to primary node')
+    }
 
+    logger.info('iridium/chatmanager/init', 'p2p ready, initializing chat...', {
+      node: iridium.p2p.primaryNodeID,
+    })
+    // sync fetch
+    await iridium.p2p.send(iridium.p2p.primaryNodeID, {
+      type: 'sync/fetch',
+    })
+
+    for (const conversation of conversations) {
+      const topic = `/chat/conversations/${conversation.id}`
       logger.info(
         'iridium/chatmanager/init',
-        'p2p ready, initializing chat...',
-        { node: iridium.p2p.primaryNodeID },
+        `requesting sync subscription to ${topic}`,
       )
-      // sync fetch
-      await iridium.p2p.send(iridium.p2p.primaryNodeID, {
-        type: 'sync/fetch',
+      // ask the sync node to subscribe to this topic
+      await iridium.subscribe<ConversationPubsubEvent>(topic, {
+        sync: {
+          offline: true,
+        },
+        handler: this.onConversationMessage.bind(this, conversation.id),
       })
-
-      for (const conversation of conversations) {
-        if (this.subscriptions[conversation.id] !== undefined) continue
-        const topic = `/chat/conversations/${conversation.id}`
-        this.subscriptions[conversation.id] = { topic, connected: false }
-
-        logger.info(
-          'iridium/chatmanager/init',
-          `requesting sync subscription to ${topic}`,
-        )
-        // ask the sync node to subscribe to this topic
-        await iridium.p2p.send(iridium.p2p.primaryNodeID, {
-          type: 'sync/subscribe',
-          topic,
-          offlineSync: true,
-        })
-      }
-      this.ready = true
-      this.emit('ready', {})
-    })
+    }
+    this.ready = true
+    this.emit('ready', {})
   }
 
   private async onConversationAnnounce(
-    message: IridiumMessage<IridiumConversationEvent>,
+    message: IridiumPubsubMessage<
+      IridiumDecodedPayload<IridiumConversationEvent>
+    >,
   ) {
     const payload = message.payload.body
 
@@ -144,10 +133,11 @@ export default class ChatManager extends Emitter<ConversationMessage> {
 
     await Promise.all(
       participants.map((did) => {
-        if (!this.iridium.users.getUser(did)) {
-          return this.iridium.users.searchPeer(did)
+        const user = this.iridium.users.getUser(did)
+        if (user) {
+          return user
         }
-        return null
+        return this.iridium.users.searchPeer(did)
       }),
     )
 
@@ -165,59 +155,6 @@ export default class ChatManager extends Emitter<ConversationMessage> {
     }
   }
 
-  /**
-   * @param message - pubsub message from the sync node
-   * @description - handle a sync subscription response from the sync node
-   */
-  async onSyncSubscriptionResponse(
-    message: IridiumPubsubMessage<
-      IridiumDecodedPayload<SyncSubscriptionResponse>
-    >,
-  ) {
-    logger.info(
-      'iridium/chatmanager/onSyncSubscriptionResponse',
-      'message received from sync node',
-      message,
-    )
-    if (!message.payload.body.topic) {
-      throw new Error('no topic in sync subscription response')
-    }
-    const [conversationId, subscription] =
-      Object.entries(this.subscriptions).find(
-        ([, { topic }]) => topic === message.payload.body.topic,
-      ) || []
-
-    if (!conversationId || !subscription) {
-      return
-    }
-    if (subscription?.connected) {
-      throw new Error('subscription already connected')
-    }
-    if (message.payload.body.success) {
-      logger.info(
-        'iridium/chatmanager/onSyncSubscriptionResponse',
-        `sync node subscribed to ${message.payload.body.topic}`,
-      )
-      await this.iridium.connector?.subscribe(message.payload.body.topic, {
-        handler: this.onConversationMessage.bind(this, conversationId),
-      })
-      subscription.connected = true
-      this.subscriptions = {
-        ...this.subscriptions,
-        [conversationId]: {
-          ...this.subscriptions[conversationId],
-          connected: true,
-        },
-      }
-      return
-    }
-    logger.warn(
-      'iridium/chatmanager/onSyncSubscriptionResponse',
-      'sync node failed to subscribe',
-      message,
-    )
-  }
-
   async onSyncFetchResponse(
     message: IridiumPubsubMessage<IridiumDecodedPayload<SyncFetchResponse>>,
   ) {
@@ -269,8 +206,8 @@ export default class ChatManager extends Emitter<ConversationMessage> {
     logger.info('iridium/chatmanager', 'sync/fetch/messages - done')
   }
 
-  get(path: string = '', options: any = {}) {
-    return this.iridium.connector?.get(`/chat${path}`, options)
+  get<T = IridiumDocument>(path: string = '', options: any = {}) {
+    return this.iridium.connector?.get<T>(`/chat${path}`, options)
   }
 
   set(path: string = '', payload: any, options: IridiumSetOptions = {}) {
@@ -309,11 +246,10 @@ export default class ChatManager extends Emitter<ConversationMessage> {
         { message, cid, from, conversationId },
       )
 
-      Vue.set(
-        this.state.conversations[conversationId].message,
-        message.id,
-        message,
-      )
+      this.state.conversations[conversationId].message = {
+        ...this.state.conversations[conversationId].message,
+        [message.id]: message,
+      }
       this.set(
         `/conversations/${conversationId}/message/${message.id}`,
         message,
@@ -321,14 +257,12 @@ export default class ChatManager extends Emitter<ConversationMessage> {
 
       // Remove is_typing indicator upon user message receive
       clearTimeout(this.iridium.webRTC.timeoutMap[message.from])
-      Vue.set(
-        this.state.conversations[conversationId].typing,
-        message.from,
-        false,
-      )
+      this.ephemeral.typing[conversationId] = (
+        this.ephemeral.typing[conversationId] || []
+      ).filter((did) => did !== message.from)
 
       const friendName = this.iridium.users.getUser(message?.from)
-      const buildNotification: Partial<Notification> = {
+      const buildNotification: Exclude<Notification, 'id'> = {
         fromName: friendName?.name,
         at: Date.now(),
         fromAddress: conversationId,
@@ -336,7 +270,7 @@ export default class ChatManager extends Emitter<ConversationMessage> {
         description:
           message.body?.length! > 79
             ? `${message.body?.substring(0, 80)}...`
-            : message.body,
+            : message.body || '',
         image: message.from,
         type: NotificationType.DIRECT_MESSAGE,
         seen: false,
@@ -386,11 +320,11 @@ export default class ChatManager extends Emitter<ConversationMessage> {
     name,
     participants,
   }: {
-    id?: Conversation['id']
+    id?: string
     type: Conversation['type']
     name: Conversation['name']
     participants: Conversation['participants']
-  }): Promise<Conversation['id']> {
+  }): Promise<string> {
     if (!id) {
       id = await this.generateConversationId(type, participants)
     }
@@ -406,37 +340,48 @@ export default class ChatManager extends Emitter<ConversationMessage> {
       message: {},
       createdAt: Date.now(),
       updatedAt: Date.now(),
+      lastReadAt: 0,
+    }
+    this.state.conversations = {
+      ...this.state.conversations,
+      [id]: conversation,
     }
-    Vue.set(this.state.conversations, id, conversation)
     await this.set(`/conversations/${id}`, conversation)
     this.emit(`conversations/${id}`, conversation)
 
     // ask the sync node to subscribe to this topic
-    this.subscriptions[conversation.id] = {
-      topic: `/chat/conversations/${id}`,
-      connected: false,
-    }
-    if (this.iridium.connector?.p2p.primaryNodeID) {
-      await this.iridium.connector?.p2p.send(
-        this.iridium.connector?.p2p.primaryNodeID,
-        {
-          type: 'sync/subscribe',
-          topic: `/chat/conversations/${id}`,
-          offlineSync: true,
-        },
-      )
-    }
+    await this.iridium.connector?.subscribe(`/chat/conversations/${id}`, {
+      sync: { offline: true },
+    })
 
     return id
   }
 
+  async updateConversationReadAt(
+    conversationId: string,
+    readAt: number,
+  ): Promise<void> {
+    const conversation = this.getConversation(conversationId)
+    if (!conversation) {
+      throw new Error(ChatError.CONVERSATION_NOT_FOUND)
+    }
+    conversation.lastReadAt = readAt
+    conversation.updatedAt = Date.now()
+    this.state.conversations = {
+      ...this.state.conversations,
+      [conversationId]: conversation,
+    }
+    await this.set(`/conversations/${conversationId}`, conversation)
+    this.emit(`conversations/${conversationId}`, conversation)
+  }
+
   async createGroupConversation({
     name,
     participants,
   }: {
     name: Conversation['name']
     participants: Conversation['participants']
-  }): Promise<Conversation['id']> {
+  }): Promise<string> {
     const id = await this.createConversation({
       type: 'group',
       name,
@@ -559,16 +504,19 @@ export default class ChatManager extends Emitter<ConversationMessage> {
     )
   }
 
-  async deleteConversation(id: Conversation['id']) {
-    if (!this.hasConversation(id)) {
-      return
-    }
-    Vue.delete(this.state.conversations, id)
+  async deleteConversation(id: string) {
+    this.state.conversations = Object.keys(this.state.conversations)
+      .filter((k) => k !== id)
+      .reduce((acc, key: string) => {
+        acc[key] = this.state.conversations[key]
+        return acc
+      }, {} as { [key: string]: Conversation })
+
     this.set('/conversations', this.state.conversations)
-    // todo - do we need to unsubscribe too?
+    await this.iridium.connector?.unsubscribe(`/chat/conversations/${id}`)
   }
 
-  getConversation(id: Conversation['id']): Conversation {
+  getConversation(id: string): Conversation {
     const conversation = this.state.conversations[id]
     if (!conversation) {
       throw new Error(ChatError.CONVERSATION_NOT_FOUND)
@@ -658,32 +606,38 @@ export default class ChatManager extends Emitter<ConversationMessage> {
 
     const { conversationId } = payload
     const conversation = this.getConversation(conversationId)
-    const message: Partial<ConversationMessage> = {
+    const partial: Omit<ConversationMessage, 'id'> = {
       ...payload,
       from: this.iridium.connector.id,
       reactions: {},
       attachments: payload.attachments,
     }
-    message.id = (
-      await this.iridium.connector.store(message, {
+    const messageID = (
+      await this.iridium.connector.store(partial, {
         syncPin: true,
         encrypt: { recipients: conversation.participants },
       })
-    ).toString()
+    ).toString() as string
+    const message: ConversationMessage = {
+      ...partial,
+      id: messageID,
+    }
+    if (message.id === undefined) {
+      throw new Error('message not sent, failed to store')
+    }
 
-    if (!this.subscriptions[conversationId]) {
-      // we're not subscribed yet
-      throw new Error(`not yet subscribed to conversation ${conversationId}`)
+    this.state.conversations[conversationId].message = {
+      ...this.state.conversations?.[conversationId]?.message,
+      [message.id]: message,
     }
 
-    Vue.set(
-      this.state.conversations[conversationId].message,
-      message.id,
-      message,
-    )
+    this.state.conversations[conversationId] = {
+      ...this.state.conversations[conversationId],
+      lastReadAt: Date.now(),
+    }
     await this.set(
-      `/conversations/${conversationId}/message/${message.id}`,
-      message,
+      `/conversations/${conversationId}`,
+      this.state.conversations[conversationId],
     )
 
     // broadcast the message to connected peers
@@ -708,11 +662,6 @@ export default class ChatManager extends Emitter<ConversationMessage> {
     const { conversationId, messageId } = payload
     const message = this.getConversationMessage(conversationId, messageId)
 
-    if (!this.subscriptions[conversationId]) {
-      // we're not subscribed yet
-      throw new Error(`not yet subscribed to conversation ${conversationId}`)
-    }
-
     const path = `/conversations/${conversationId}/message/${messageId}/reactions/${did}`
     let reactions = ((await this.get(path)) ?? []) as string[]
 
@@ -723,7 +672,7 @@ export default class ChatManager extends Emitter<ConversationMessage> {
       reactions.push(payload.reaction)
     }
 
-    Vue.set(message.reactions, did, reactions)
+    message.reactions = { ...message.reactions, [did]: reactions }
     this.set(path, reactions)
 
     // broadcast the message to connected peers
@@ -738,4 +687,11 @@ export default class ChatManager extends Emitter<ConversationMessage> {
       },
     )
   }
+
+  setTyping(conversationId: string, did: string, typing: boolean = true) {
+    this.ephemeral.typing[conversationId] = {
+      ...this.ephemeral.typing[conversationId],
+      [did]: typing,
+    }
+  }
 }
diff --git a/libraries/Iridium/chat/types.ts b/libraries/Iridium/chat/types.ts
index 9f7e14058f..573d506a9f 100644
--- a/libraries/Iridium/chat/types.ts
+++ b/libraries/Iridium/chat/types.ts
@@ -33,6 +33,7 @@ export type ConversationMessage = {
   glyph?: MessageGlyph
   attachments: MessageAttachment[]
   reactions: { [key: string]: string[] }
+  payload: any
   replyToId?: string
 }
 
@@ -53,11 +54,9 @@ export type Conversation = {
   type: 'direct' | 'group'
   name?: string
   participants: string[]
-  typing?: {
-    [key: string]: boolean
-  }
   createdAt: number
   updatedAt: number
+  lastReadAt: number
   message: {
     [key: string]: ConversationMessage
   }
diff --git a/libraries/Iridium/friends/FriendsManager.ts b/libraries/Iridium/friends/FriendsManager.ts
index c057698518..109d8fefe5 100644
--- a/libraries/Iridium/friends/FriendsManager.ts
+++ b/libraries/Iridium/friends/FriendsManager.ts
@@ -4,12 +4,14 @@ import {
   Emitter,
   didUtils,
   encoding,
+  IridiumPubsubMessage,
 } from '@satellite-im/iridium'
 import type {
   IridiumMessage,
   IridiumGetOptions,
   IridiumSetOptions,
 } from '@satellite-im/iridium/src/types'
+import type { IridiumDecodedPayload } from '@satellite-im/iridium/src/core/encoding'
 import type { IridiumManager } from '../IridiumManager'
 import { FriendRequest, FriendRequestStatus, FriendsError, User } from './types'
 import logger from '~/plugins/local/logger'
@@ -31,7 +33,9 @@ export type FriendState = {
   blocked: string[]
 }
 
-export type IridiumFriendPubsub = IridiumMessage<IridiumFriendEvent>
+export type IridiumFriendPubsub = IridiumPubsubMessage<
+  IridiumDecodedPayload<IridiumFriendEvent>
+>
 
 export default class FriendsManager extends Emitter<IridiumFriendPubsub> {
   public readonly iridium: IridiumManager
@@ -59,50 +63,58 @@ export default class FriendsManager extends Emitter<IridiumFriendPubsub> {
     logger.info(this.loggerTag, 'pubsub', pubsub)
     await this.fetch()
     logger.log(this.loggerTag, 'friends state loaded', this.state)
+
     logger.info(this.loggerTag, 'subscribing to announce topic')
-    await iridium.subscribe<IridiumFriendEvent>('/friends/announce', {
+    await iridium.subscribe<IridiumFriendPubsub>('/friends/announce', {
       handler: this.onFriendsAnnounce.bind(this),
+      sync: { offline: true },
     })
-    logger.log(this.loggerTag, 'listening for friend activity', this.state)
-
-    this.iridium.connector?.p2p.on('ready', async () => {
-      // connect to all friends
-      logger.info(this.loggerTag, 'connecting to friends', this.state.friends)
-      await Promise.all(
-        this.state.friends.map(async (friendDid) => {
-          if (!iridium.p2p.hasPeer(friendDid)) {
-            logger.info(
-              this.loggerTag,
-              'registering friend as peer with iridium:',
-              { friendDid },
-            )
-            await iridium.p2p.addPeer({ did: friendDid, type: 'peer' })
-            await iridium.p2p.connect(friendDid)
-          }
-        }),
-      )
-
-      logger.info(
-        this.loggerTag,
-        'connecting to requested friends',
-        this.state.requests,
-      )
-      await Promise.all(
-        Object.values(this.state.requests).map(async (request) => {
-          if (request && !iridium.p2p.hasPeer(request.did)) {
+    // connect to all friends
+    logger.info(this.loggerTag, 'connecting to friends', {
+      friends: this.state.friends,
+    })
+    await Promise.all(
+      this.state.friends.map(async (friendDid) => {
+        if (!iridium.p2p.hasPeer(friendDid)) {
+          logger.info(
+            this.loggerTag,
+            'registering friend as peer with iridium:',
+            { friendDid },
+          )
+          await iridium.p2p.addPeer({ did: friendDid, type: 'peer' })
+        }
+        if (!this.iridium.users.hasUser(friendDid)) {
+          await this.iridium.users.searchPeer(friendDid)
+        }
+      }),
+    )
+
+    logger.info(
+      this.loggerTag,
+      'connecting to requested friends',
+      this.state.requests,
+    )
+
+    await Promise.all(
+      Object.values(this.state.requests)
+        .filter((request) => request.incoming)
+        .map(async (request) => {
+          if (!iridium.p2p.hasPeer(request.user.did)) {
             logger.info(
               this.loggerTag,
               'registering requested friend as peer with iridium',
               request,
             )
-            await iridium.p2p.addPeer({ did: request.did, type: 'peer' })
-            await iridium.p2p.connect(request.did)
+            await iridium.p2p.addPeer({ did: request.user.did, type: 'peer' })
+          }
+          if (!this.iridium.users.hasUser(request.user.did)) {
+            await this.iridium.users.searchPeer(request.user.did)
           }
         }),
-      )
-      logger.info(this.loggerTag, 'initialized', this)
-      this.emit('ready', {})
-    })
+    )
+
+    logger.info(this.loggerTag, 'initialized', this)
+    this.emit('ready', {})
   }
 
   async stop() {
@@ -115,25 +127,35 @@ export default class FriendsManager extends Emitter<IridiumFriendPubsub> {
    * @returns updated state
    */
   async fetch() {
+    const fetched = (await this.get('/')) || { friends: [], requests: {} }
     this.state = {
-      ...this.state,
-      ...(await this.get('/')),
+      requests: fetched?.requests || {},
+      friends: !fetched.friends
+        ? []
+        : Array.isArray(fetched.friends)
+        ? fetched.friends
+        : Object.values(fetched.friends),
+      blocked: fetched.blocked || [],
     }
     return this.state
   }
 
-  private async onFriendsAnnounce(message: IridiumMessage<IridiumFriendEvent>) {
+  private async onFriendsAnnounce(message: IridiumFriendPubsub) {
     const { from, payload } = message
     const { to, status } = payload.body
+    if (from === this.iridium.connector?.id) {
+      return
+    }
+    if (to !== this.iridium.connector?.id) return
     // if (Date.now() - at > 1000 * 60 * 60) {
     //   logger.warn(this.loggerPrefix, 'ignoring old friend activity')
     //   return
     // }
 
-    if (to !== this.iridium.connector?.id) return
     const request = await this.getRequest(from).catch(() => undefined)
     await this.iridium.users.searchPeer(payload.body.user.did)
-    const user = this.iridium.users.getUser(payload.body.user.did)
+    const user =
+      this.iridium.users.getUser(payload.body.user.did) || payload.body.user
     if (!request && status === 'pending') {
       await this.requestCreate(from, true, user)
     } else if (request && status === 'accepted') {
@@ -192,7 +214,7 @@ export default class FriendsManager extends Emitter<IridiumFriendPubsub> {
    * @returns boolean
    */
   isFriend(did: IridiumPeerIdentifier) {
-    return this.state.friends.includes(did.toString())
+    return this.state.friends.includes(didUtils.didString(did))
   }
 
   hasRequest(did: IridiumPeerIdentifier) {
@@ -244,11 +266,9 @@ export default class FriendsManager extends Emitter<IridiumFriendPubsub> {
     }
     if (this.hasRequest(did)) {
       logger.error(this.loggerTag, 'request already exists')
-      throw new Error(FriendsError.REQUEST_ALREADY_SENT)
+      return
     }
 
-    await this.iridium.users.searchPeer(did)
-
     if (!this.iridium.connector?.p2p.hasPeer(did)) {
       logger.info(this.loggerTag, 'adding peer for friend request', { did })
       await this.iridium.connector?.p2p.addPeer({
@@ -261,13 +281,16 @@ export default class FriendsManager extends Emitter<IridiumFriendPubsub> {
     }
 
     const request: FriendRequest = {
-      user: user || { did, name: 'TODObar' },
+      user: user || { did, name: did },
       status: 'pending',
       incoming,
       at: Date.now(),
     }
 
-    Vue.set(this.state.requests, did, request)
+    this.state.requests = {
+      ...this.state.requests,
+      [did]: request,
+    }
     await this.set(`/requests/${did}`, request)
     logger.info(this.loggerTag, 'friend request created', {
       did,
@@ -301,7 +324,7 @@ export default class FriendsManager extends Emitter<IridiumFriendPubsub> {
 
       const user = this.iridium.users.getUser(did)
 
-      const buildNotification: Partial<Notification> = {
+      const buildNotification: Exclude<Notification, 'id'> = {
         fromName: user.name,
         at: request.at,
         title: 'New Request',
@@ -328,7 +351,13 @@ export default class FriendsManager extends Emitter<IridiumFriendPubsub> {
       throw new Error(FriendsError.REQUEST_NOT_FOUND)
     }
 
-    Vue.delete(this.state.requests, didUtils.didString(did))
+    const id = didUtils.didString(did)
+    this.state.requests = Object.keys(this.state.requests)
+      .filter((key) => key !== id)
+      .reduce((acc, key: string) => {
+        acc[key] = this.state.requests[key]
+        return acc
+      }, {} as { [key: string]: FriendRequest })
     await this.set(`/requests`, this.state.requests)
     logger.info(this.loggerTag, 'request rejected', {
       did,
@@ -364,7 +393,8 @@ export default class FriendsManager extends Emitter<IridiumFriendPubsub> {
    * @param did - IridiumPeerIdentifier (required)
    * @returns Promise<void>
    */
-  async requestAccept(did: IridiumPeerIdentifier): Promise<void> {
+  async requestAccept(id: IridiumPeerIdentifier): Promise<void> {
+    const did = didUtils.didString(id)
     if (!this.iridium.connector) {
       logger.error(this.loggerTag, 'network error')
       throw new Error(FriendsError.NETWORK_ERROR)
@@ -379,12 +409,12 @@ export default class FriendsManager extends Emitter<IridiumFriendPubsub> {
       throw new Error(`already friends with ${did}`)
     }
 
-    if (!this.iridium.connector?.p2p.hasPeer(did.toString())) {
+    if (!this.iridium.connector?.p2p.hasPeer(did)) {
       logger.info(this.loggerTag, 'adding peer for friend request', {
         did,
       })
       await this.iridium.connector?.p2p.addPeer({
-        did: did.toString(),
+        did,
         type: 'peer',
       })
     }
@@ -393,12 +423,12 @@ export default class FriendsManager extends Emitter<IridiumFriendPubsub> {
       await this.iridium.connector?.p2p.connect(did)
     }
 
-    const user = this.iridium.users.getUser(did.toString())
+    const user = this.iridium.users.getUser(did)
     if (!user) {
       throw new Error(`can't find user: ${did}`)
     }
-    const participants = [did.toString(), this.iridium.connector.id]
-    if (!(await this.iridium.chat.hasDirectConversation(did.toString()))) {
+    const participants = [did, this.iridium.connector.id]
+    if (!(await this.iridium.chat.hasDirectConversation(did))) {
       await this.iridium.chat.createConversation({
         name: user.name,
         type: 'direct',
@@ -407,8 +437,14 @@ export default class FriendsManager extends Emitter<IridiumFriendPubsub> {
     }
 
     request.status = 'accepted'
-    this.state.friends = [...this.state.friends, did.toString()]
-    Vue.delete(this.state.requests, did.toString())
+    delete this.state.requests[did]
+    this.state.friends = [...this.state.friends, did]
+    this.state.requests = Object.keys(this.state.requests)
+      .filter((key) => key !== did)
+      .reduce((acc, key: string) => {
+        acc[key] = this.state.requests[key]
+        return acc
+      }, {} as { [key: string]: FriendRequest })
     await this.set(`/friends`, this.state.friends)
     await this.set(`/requests`, this.state.requests)
 
@@ -444,7 +480,8 @@ export default class FriendsManager extends Emitter<IridiumFriendPubsub> {
    * @param did - IridiumPeerIdentifier (required)
    * @returns Promise<void>
    */
-  async friendRemove(did: IridiumPeerIdentifier): Promise<void> {
+  async friendRemove(pid: IridiumPeerIdentifier): Promise<void> {
+    const did = didUtils.didString(pid)
     if (!this.iridium.connector) {
       logger.error(this.loggerTag, 'network error')
       throw new Error(FriendsError.NETWORK_ERROR)
@@ -455,23 +492,24 @@ export default class FriendsManager extends Emitter<IridiumFriendPubsub> {
       throw new Error(FriendsError.NETWORK_ERROR)
     }
 
-    if (!this.isFriend(did.toString())) {
-      logger.error(this.loggerTag, 'friend not found', { did })
-      throw new Error(FriendsError.FRIEND_NOT_FOUND)
+    if (!this.isFriend(pid)) {
+      logger.error(this.loggerTag, 'friend not found', {
+        did,
+        friends: this.state.friends,
+      })
+      return
     }
 
-    const deleteDid = didUtils.didString(did)
-
-    this.state.friends = this.state.friends.filter((did) => did !== deleteDid)
+    this.state.friends = this.state.friends.filter((id) => id !== did)
     await this.set(`/friends`, this.state.friends)
-    const id = this.iridium.chat.directConversationIdFromDid(deleteDid)
+    const id = this.iridium.chat.directConversationIdFromDid(did)
     if (id) {
       this.iridium.chat.deleteConversation(id)
     }
     logger.info(this.loggerTag, 'friend removed', { did })
 
     // Announce to the remote user
-    if (didUtils.didString(did) !== this.iridium.connector?.id) {
+    if (did !== this.iridium.connector?.id) {
       const payload: IridiumFriendEvent = {
         to: did,
         status: 'removed',
diff --git a/libraries/Iridium/groups/GroupManager.ts b/libraries/Iridium/groups/GroupManager.ts
index 66732c5b03..0734f4a1e1 100644
--- a/libraries/Iridium/groups/GroupManager.ts
+++ b/libraries/Iridium/groups/GroupManager.ts
@@ -1,14 +1,14 @@
-import Vue from 'vue'
 import {
   didUtils,
   Emitter,
   encoding,
   IridiumGetOptions,
   IridiumPeerIdentifier,
+  IridiumPubsubMessage,
 } from '@satellite-im/iridium'
 import type { IridiumMessage } from '@satellite-im/iridium/src/types'
+import type { IridiumDecodedPayload } from '@satellite-im/iridium/src/core/encoding'
 import { IridiumManager } from '../IridiumManager'
-import Group from './Group'
 import {
   GroupConfig,
   GroupManagerEvent,
@@ -17,18 +17,23 @@ import {
 } from './types'
 import logger from '~/plugins/local/logger'
 
+export type GroupState = GroupConfig & {
+  id: string
+  origin: string
+}
+
 export type IridiumGroupEvent = {
   to: IridiumPeerIdentifier
   status: GroupManagerEvent
   at: number
-  group: Group
+  group: GroupState
   member?: GroupMemberDetails
   data?: any
 }
 
 export default class GroupManager extends Emitter<IridiumMessage> {
   groupIds?: string[]
-  state: { [key: string]: Group } = {}
+  state: { [key: string]: GroupState } = {}
 
   private loggerTag = 'iridium/groups'
 
@@ -70,7 +75,9 @@ export default class GroupManager extends Emitter<IridiumMessage> {
     )
   }
 
-  private async onGroupsAnnounce(message: IridiumMessage<IridiumGroupEvent>) {
+  private async onGroupsAnnounce(
+    message: IridiumPubsubMessage<IridiumDecodedPayload<IridiumGroupEvent>>,
+  ) {
     const { from, payload } = message
     const { to, at, status, member, group } = payload.body
 
@@ -119,11 +126,14 @@ export default class GroupManager extends Emitter<IridiumMessage> {
       type: 'group',
       participants: Object.values(config.members).map((m) => m.id),
     })
-    Vue.set(this.state, id, {
-      id,
-      origin: this.iridium.connector.id,
-      ...config,
-    })
+    this.state = {
+      ...this.state,
+      [id]: {
+        id,
+        origin: this.iridium.connector?.id,
+        ...config,
+      },
+    }
     await this.iridium.connector.set(`/groups/${id}`, {
       id,
       origin: this.iridium.connector.id,
@@ -132,17 +142,12 @@ export default class GroupManager extends Emitter<IridiumMessage> {
     return id
   }
 
-  async getGroup(groupId: string) {
+  async getGroup(groupId: string): Promise<GroupState> {
     if (this.state[groupId]) {
       return this.state[groupId]
     }
 
-    const group = new Group(groupId, this.iridium)
-    if (!group) {
-      throw new Error(GroupsError.GROUP_NOT_FOUND)
-    }
-    await group.load()
-    return group
+    return this.get(`/${groupId}`)
   }
 
   async getGroupMembers(groupId: string) {
@@ -175,9 +180,9 @@ export default class GroupManager extends Emitter<IridiumMessage> {
       throw new Error(GroupsError.NOT_A_MEMBER)
     }
 
-    Vue.delete(group.members, this.iridium.connector.id)
+    delete group.members[this.iridium.connector.id]
 
-    Object.values(group.members).forEach(async (member) => {
+    Object.values(group.members).forEach(async (member: GroupMemberDetails) => {
       const payload: IridiumGroupEvent = {
         to: member.id,
         status: 'group-member-left',
@@ -194,9 +199,7 @@ export default class GroupManager extends Emitter<IridiumMessage> {
     })
 
     // remove group from local state and iridium
-    const conversations = this.iridium.chat.state.conversations
-    Vue.delete(conversations, group.id)
-    this.iridium.chat.set('/conversations', conversations)
+    this.iridium.chat.deleteConversation(group.id)
     logger.info(this.loggerTag, 'group left', { groupId, group })
   }
 
@@ -212,7 +215,7 @@ export default class GroupManager extends Emitter<IridiumMessage> {
       throw new Error(GroupsError.RECIPIENT_NOT_FOUND)
     }
 
-    Vue.delete(members, remotePeerDID)
+    delete members[remotePeerDID]
     await this.iridium.connector.set(`/groups/${groupId}`, {
       id: groupId,
       origin: this.iridium.connector.id,
@@ -250,7 +253,7 @@ export default class GroupManager extends Emitter<IridiumMessage> {
       photoHash: member.photoHash ?? '',
     }
 
-    Vue.set(members, remotePeerDID, details)
+    members[remotePeerDID] = details
 
     const conversation = this.iridium.chat.getConversation(groupId)
     conversation.participants.push(remotePeerDID)
diff --git a/libraries/Iridium/profile/ProfileManager.ts b/libraries/Iridium/profile/ProfileManager.ts
index 38360c42ec..797fce0f78 100644
--- a/libraries/Iridium/profile/ProfileManager.ts
+++ b/libraries/Iridium/profile/ProfileManager.ts
@@ -19,11 +19,14 @@ export default class IridiumProfile extends Emitter {
 
     iridium.on('changed', this.onStateChanged.bind(this))
     await this.fetch()
+    iridium.logger.info('iridium/profile', 'profile state loaded', {
+      state: this.state,
+    })
   }
 
   private async fetch() {
-    this.state = await this.iridium.connector?.get('/profile')
-    this.setUser()
+    this.state = await this.get<User>()
+    await this.setUser()
     // TODO: verify schema of profile data, recover from invalid data
   }
 
@@ -38,18 +41,19 @@ export default class IridiumProfile extends Emitter {
     }
   }
 
-  get(path: string = '', options: any = {}) {
-    return this.iridium.connector?.get(`/profile${path}`, options)
+  get<T = any>(path: string = '', options: any = {}) {
+    return this.iridium.connector?.get<T>(`/profile${path}`, options)
   }
 
-  set(path: string = '', payload: any, options: any = {}) {
-    return this.iridium.connector?.set(`/profile${path}`, payload, options)
+  async set(path: string = '', payload: any, options: any = {}) {
+    await this.iridium.connector?.set(`/profile${path}`, payload, options)
+    this.state = await this.get<User>()
   }
 
-  setUser() {
+  async setUser() {
     const id = this.iridium.connector?.id
     if (this.state && id) {
-      this.iridium.users.setUser(id, this.state)
+      await this.iridium.users.setUser(id, { ...this.state })
     }
   }
 }
diff --git a/libraries/Iridium/users/UsersManager.ts b/libraries/Iridium/users/UsersManager.ts
index 81cd54a8e9..0ec3fee7a1 100644
--- a/libraries/Iridium/users/UsersManager.ts
+++ b/libraries/Iridium/users/UsersManager.ts
@@ -5,12 +5,14 @@ import {
   Emitter,
   didUtils,
   encoding,
+  IridiumPubsubMessage,
 } from '@satellite-im/iridium'
 import type {
   IridiumMessage,
   IridiumGetOptions,
   IridiumSetOptions,
 } from '@satellite-im/iridium/src/types'
+import { IridiumDecodedPayload } from '@satellite-im/iridium/src/core/encoding'
 import type { IridiumManager } from '../IridiumManager'
 import { User, UsersError } from './types'
 import logger from '~/plugins/local/logger'
@@ -26,7 +28,9 @@ export type IridiumUserEvent = {
 
 export type UserState = { [key: User['did']]: User }
 
-export type IridiumUserPubsub = IridiumMessage<IridiumUserEvent>
+export type IridiumUserPubsub = IridiumPubsubMessage<
+  IridiumDecodedPayload<IridiumUserEvent>
+>
 
 export default class UsersManager extends Emitter<IridiumUserPubsub> {
   public readonly iridium: IridiumManager
@@ -55,26 +59,61 @@ export default class UsersManager extends Emitter<IridiumUserPubsub> {
     await this.fetch()
     logger.log(this.loggerTag, 'users state loaded', this.state)
     logger.info(this.loggerTag, 'subscribing to announce topic')
-    await iridium.subscribe('/users/announce')
-    iridium.pubsub.on('/users/announce', this.onUsersAnnounce.bind(this))
+    await iridium.subscribe<IridiumUserPubsub>('/users/announce', {
+      handler: this.onUsersAnnounce.bind(this),
+      sync: true,
+    })
     logger.log(this.loggerTag, 'listening for user activity', this.state)
-    // connect to all users
-    if (this.list) {
-      logger.info(this.loggerTag, 'connecting to users', this.list)
+
+    this.iridium.connector?.p2p.on('peer/disconnect', (peer) => {
+      logger.info(this.loggerTag, 'peer disconnected', peer)
+      this.setUser(peer.did, {
+        ...this.state[peer.did],
+        status: 'offline',
+        seen: Date.now(),
+      })
+    })
+
+    setInterval(() => {
       this.list.forEach(async (user: User) => {
-        if (user && !iridium.p2p.hasPeer(user.did)) {
-          logger.info(this.loggerTag, 'registering peer with iridium', user)
-          iridium.p2p.addPeer({ did: user.did, type: 'peer' })
+        if (
+          user.status === 'online' &&
+          Number(user.seen) < Date.now() - 1000 * 30
+        ) {
+          logger.info(this.loggerTag, 'user timed out', user)
+          this.iridium.users.setUser(user.did, {
+            ...user,
+            status: 'offline',
+            seen: Date.now(),
+          })
         }
       })
-    }
+    }, 10000)
+
+    this.iridium.connector?.p2p.on(
+      'node/message/sync/searchPeer',
+      (message) => {
+        const peers = message.payload.body.peers as User[]
+        peers.forEach((peer) => {
+          this.setUser(peer.did, peer)
+        })
+        this.emit(
+          `searchResults${
+            message.payload.body.request
+              ? `/${message.payload.body.request}`
+              : ''
+          }`,
+          peers,
+        )
+      },
+    )
 
     logger.info(this.loggerTag, 'initialized', this)
     this.emit('ready', {})
   }
 
   async unsubscribe() {
-    await this.iridium.connector?.pubsub.unsubscribe(`/users/announce`)
+    await this.iridium.connector?.unsubscribe(`/users/announce`)
   }
 
   /**
@@ -83,26 +122,24 @@ export default class UsersManager extends Emitter<IridiumUserPubsub> {
    * @returns updated state
    */
   async fetch() {
-    this.state = {
-      ...this.state,
-      ...(await this.get('/')),
-    }
-    return this.state
+    const fetched = await this.get('/')
+    this.state = Object.keys(fetched).reduce((acc, key: string) => {
+      acc[key] = { ...fetched[key], status: 'offline' }
+      return acc
+    }, this.state)
   }
 
   async getUsers(): Promise<{ [key: string]: User }> {
     return this.state || {}
   }
 
-  private async onUsersAnnounce(message: IridiumMessage<IridiumUserEvent>) {
+  private async onUsersAnnounce(message: IridiumUserPubsub) {
     const { from, payload } = message
     const { status } = payload.body
 
     if (status === 'removed') {
       await this.userRemove(from)
     }
-
-    return this.state
   }
 
   /**
@@ -152,7 +189,12 @@ export default class UsersManager extends Emitter<IridiumUserPubsub> {
    * @returns boolean
    */
   hasUser(did: IridiumPeerIdentifier) {
-    return did && !!this.state?.[didUtils.didString(did)]
+    const id = didUtils.didString(did)
+    logger.info(this.loggerTag, 'has user', {
+      id,
+      hasUser: id && !!this.state[id],
+    })
+    return id && !!this.state?.[id]
   }
 
   /**
@@ -165,45 +207,43 @@ export default class UsersManager extends Emitter<IridiumUserPubsub> {
     return this.state[didUtils.didString(did)]
   }
 
-  async searchPeer(did: IridiumPeerIdentifier) {
+  async searchPeer(query: string, page: number = 0): Promise<User[]> {
     const iridium = this.iridium.connector
     if (!iridium) {
-      return
+      return []
     }
 
-    await new Promise<void>((resolve) => {
+    return new Promise<User[]>((resolve) => {
       const id = v4()
-      const peerId = iridium.p2p.primaryNodeID
-      if (!peerId) {
-        return
+      if (!iridium.p2p.primaryNodeID) {
+        return resolve([])
       }
 
-      this.iridium.connector?.p2p.on(
-        'node/message/sync/searchPeer',
-        (message) => {
-          if (message.payload.body.request !== id) {
-            return
-          }
-          logger.log('onPeerMessage', 'node/message/sync/searchPeer', message)
-          const peers = message.payload.body.peers as User[]
-          peers.forEach((peer) => {
-            this.setUser(peer.did, peer)
-          })
-          resolve()
-        },
-      )
+      const timeout = setTimeout(() => {
+        logger.warn(this.loggerTag, 'peer search timeout', { query })
+        resolve([])
+      }, 10000)
+
+      this.once(`searchResults/${id}`, (results: User[]) => {
+        clearTimeout(timeout)
+        logger.info(this.loggerTag, 'peer search results', results)
+        resolve(results)
+      })
 
-      iridium.p2p.send(peerId, {
+      logger.info(this.loggerTag, 'peer search query', { query, page, id })
+      return iridium.p2p.send(iridium.p2p.primaryNodeID, {
         type: 'sync/searchPeer',
         id,
-        did: didUtils.didString(did),
+        query,
+        page,
       })
     })
   }
 
-  async setUser(did: IridiumPeerIdentifier, user: User) {
-    Vue.set(this.state, didUtils.didString(did), user)
-    await this.set(`/${didUtils.didString(did)}`, user)
+  async setUser(id: IridiumPeerIdentifier, user: User) {
+    const did = didUtils.didString(id)
+    this.state[did] = user
+    await this.set(`/${did}`, user)
   }
 
   async send(event: IridiumUserEvent) {
@@ -246,7 +286,7 @@ export default class UsersManager extends Emitter<IridiumUserPubsub> {
       [user.did, this.iridium.connector?.id].sort(),
     )
     if (id && this.iridium.chat.hasConversation(id)) {
-      Vue.delete(this.iridium.chat.state.conversations, id)
+      this.iridium.chat.deleteConversation(id)
     }
 
     logger.info(this.loggerTag, 'user removed', { did, user })
diff --git a/libraries/Iridium/webrtc/WebRTCManager.ts b/libraries/Iridium/webrtc/WebRTCManager.ts
index 5c885553b0..59d7af9d17 100644
--- a/libraries/Iridium/webrtc/WebRTCManager.ts
+++ b/libraries/Iridium/webrtc/WebRTCManager.ts
@@ -1,26 +1,39 @@
-import Vue from 'vue'
-import { Emitter, IridiumPubsubMessage } from '@satellite-im/iridium'
-import type { SyncSubscriptionResponse } from '@satellite-im/iridium/src/sync/agent'
+import { didUtils, Emitter, IridiumPubsubMessage } from '@satellite-im/iridium'
+import { IridiumDecodedPayload } from '@satellite-im/iridium/src/core/encoding'
 import { SignalData } from 'simple-peer'
 import iridium, { IridiumManager } from '../IridiumManager'
 import { WebRTCState } from '~/libraries/Iridium/webrtc/types'
 import { CallPeerDescriptor } from '~/libraries/WebRTC/Call'
-import { Friend } from '~/libraries/Iridium/friends/types'
 import SoundManager, { Sounds } from '~/libraries/SoundManager/SoundManager'
 import { TrackKind } from '~/libraries/WebRTC/types'
 import { $WebRTC } from '~/libraries/WebRTC/WebRTC'
 import logger from '~/plugins/local/logger'
 import { Config } from '~/config'
+import { WebRTCEnum } from '~/libraries/Enums/enums'
+import { User, Friend } from '~/libraries/Iridium/friends/types'
 
 const $Sounds = new SoundManager()
 
-const announceFrequency = 5000
+const announceFrequency = 15000
 
 const initialState: WebRTCState = {
   incomingCall: null,
   activeCall: null,
   streamMuted: {},
-  createdAt: 0,
+  callStartedAt: 0,
+}
+
+type WebRTCAnnounceMessage = {
+  type: 'announce'
+}
+type WebRTCCallMessage = {
+  type: 'call'
+  callId: string
+  peers: CallPeerDescriptor[]
+}
+type WebRTCTypingMessage = {
+  type: 'typing'
+  conversationId: string
 }
 
 export default class WebRTCManager extends Emitter {
@@ -28,10 +41,7 @@ export default class WebRTCManager extends Emitter {
   public state: WebRTCState
   private loggerTag = 'iridium/webRTC'
   public timeoutMap: { [key: string]: ReturnType<typeof setTimeout> } = {}
-
-  private _subscriptions: {
-    [key: string]: { topic: string; connected: boolean; handler?: Function }
-  } = {}
+  public callTime: number = 0
 
   constructor(iridium: IridiumManager) {
     super()
@@ -40,338 +50,104 @@ export default class WebRTCManager extends Emitter {
   }
 
   async init() {
-    await this.fetch()
-    // this.setupListeners()
-    await this.subscribeToAnnounce()
-
-    this.iridium.connector?.p2p.on<
-      IridiumPubsubMessage<SyncSubscriptionResponse>
-    >('node/message/sync/subscribe', this.onSyncSubscriptionResponse.bind(this))
-
-    this.iridium.connector?.p2p.on('ready', async () => {
-      if (!this.iridium.connector?.p2p.primaryNodeID) {
-        throw new Error('not connected to primary node')
-      }
-      logger.info(
-        'iridium/webrtcmanager/init',
-        'p2p ready, initializing webrtc...',
-      )
-
-      const channels = [
-        {
-          topic: 'webrtc',
-          handler: this.onMessage,
-        },
-      ]
-
-      channels.forEach(async ({ topic, handler }) => {
-        if (this._subscriptions[topic] !== undefined) return
-
-        this._subscriptions[topic] = { topic, handler, connected: false }
-        logger.info(
-          'iridium/webrtcmanager/init',
-          `requesting sync subscription to ${topic}`,
-        )
-        // ask the sync node to subscribe to this topic
-        await this.iridium.connector?.p2p.send(
-          this.iridium.connector?.p2p.primaryNodeID,
-          {
-            type: 'sync/subscribe',
-            topic,
-          },
-        )
-      })
-    })
-  }
-
-  /**
-   * @param message - pubsub message from the sync node
-   * @description - handle a sync subscription response from the sync node
-   */
-  async onSyncSubscriptionResponse(
-    message: IridiumPubsubMessage<SyncSubscriptionResponse>,
-  ) {
-    logger.info(
-      'iridium/webrtcmanager/onSyncSubscriptionResponse',
-      'message received from sync node',
-      message,
-    )
-    if (!message.payload.body.topic) {
-      throw new Error('no topic in sync subscription response')
-    }
-    const [channel, subscription] =
-      Object.entries(this._subscriptions).find(
-        ([, { topic }]) => topic === message.payload.body.topic,
-      ) || []
-
-    if (!channel || !subscription) {
-      return
+    if (!this.iridium.connector || !this.iridium.connector.p2p.primaryNodeID) {
+      throw new Error('not connected to primary node')
     }
-    if (subscription?.connected) {
-      throw new Error('subscription already connected')
-    }
-    if (message.payload.body.success) {
-      logger.info(
-        'iridium/webrtcmanager/onSyncSubscriptionResponse',
-        `sync node subscribed to ${message.payload.body.topic}`,
-      )
-      await this.iridium.connector?.subscribe(
-        message.payload.body.topic,
-        subscription.handler
-          ? { handler: subscription.handler.bind(this) }
-          : null,
-      )
-      subscription.connected = true
-      return
-    }
-    logger.warn(
-      'iridium/chatmanager/onSyncSubscriptionResponse',
-      'sync node failed to subscribe',
-      message,
+    logger.info(
+      'iridium/webrtcmanager/init',
+      'p2p ready, initializing webrtc...',
     )
-  }
 
-  async fetch() {
-    this.state = {
-      ...this.state,
-      ...(await this.get('/')),
-    }
-    return this.state
-  }
+    // ask the sync node to subscribe to this topic
+    await this.iridium.connector.subscribe('webrtc', {
+      handler: this.onMessage.bind(this),
+      sync: true,
+    })
+    await this.setupAnnounce()
 
-  get(path: string = '', options: any = {}) {
-    return this.iridium.connector?.get(`/webRTC${path}`, options)
+    setInterval(() => {
+      if (this.state.activeCall) {
+        this.callTime = Date.now() - this.state.callStartedAt
+      }
+    }, 1000)
   }
 
-  set(path: string = '', payload: any, options: any = {}) {
-    logger.info(this.loggerTag, 'path, paylaod and state', {
-      path,
-      payload,
-      state: this.state,
-    })
-    return this.iridium.connector?.set(
-      `/webRTC${path === '/' ? '' : path}`,
-      payload,
-      options,
-    )
+  private async setupAnnounce() {
+    await this.announce()
+    setInterval(this.announce.bind(this), announceFrequency)
   }
 
-  // NOT WORKING RN
-  // private setupListeners() {
-  //   this.iridium.connector?.on('peer:discovery', ({ did }: { did: string }) => {
-  //     const loggerPrefix = 'webrtc/peer:discovery - '
-  //     if (!did) return
-
-  //     const id = this.iridium.chat?.directConversationIdFromDid(did)
-
-  //     if (id && this.iridium.chat?.hasConversation(id)) {
-  //       const conversation = this.iridium.chat?.getConversation(id)
-  //       const connectedParticipant = conversation.participants.find(
-  //         (participant) => participant === did,
-  //       )
-  //       if (connectedParticipant) {
-  //         logger.log(loggerPrefix, `connected participant: ${did}`)
-  //         // this.iridium.chat.updateConversation({
-  //         //   ...conversation,
-  //         //   participants: conversation.participants.map((participant) => {
-  //         //     if (participant.did === connectedParticipant.did) {
-  //         //       return {
-  //         //         ...participant,
-  //         //         status: 'online',
-  //         //       }
-  //         //     }
-  //         //     return participant
-  //         //   }),
-  //         // })
-  //       }
-  //     }
-
-  //     const connectedFriend = this.iridium.friends.getFriend(did)
-
-  //     if (!connectedFriend) return
-
-  //     logger.log(loggerPrefix, `discovered peer: ${did}`)
-
-  //     this.iridium.friends.updateFriend({
-  //       ...connectedFriend,
-  //       status: 'online',
-  //     })
-  //   })
-
-  //   this.iridium.connector?.p2p.on(
-  //     'peer/connect',
-  //     ({ did }: { did: string }) => {
-  //       const loggerPrefix = 'webrtc/peer:connect - '
-
-  //       if (!did) return
-  //       const id = this.iridium.chat?.directConversationIdFromDid(did)
-
-  //       if (id && this.iridium.chat?.hasConversation(id)) {
-  //         const conversation = this.iridium.chat?.getConversation(id)
-  //         const connectedParticipant = conversation.participants.find(
-  //           (participant) => participant === did,
-  //         )
-  //         if (connectedParticipant) {
-  //           logger.log(loggerPrefix, `connected participant: ${did}`)
-  //           // this.iridium.chat.updateConversation({
-  //           //   ...conversation,
-  //           //   participants: conversation.participants.map((participant) => {
-  //           //     if (participant.did === connectedParticipant.did) {
-  //           //       return {
-  //           //         ...participant,
-  //           //         status: 'online',
-  //           //       }
-  //           //     }
-  //           //     return participant
-  //           //   }),
-  //           // })
-  //         }
-  //       }
-
-  //       const connectedFriend = this.iridium.friends.getFriend(did)
-
-  //       if (!connectedFriend) return
-
-  //       logger.log(loggerPrefix, `connected friend: ${did}`)
-
-  //       this.iridium.friends.updateFriend({
-  //         ...connectedFriend,
-  //         status: 'online',
-  //       })
-  //     },
-  //   )
-
-  //   this.iridium.connector?.on(
-  //     'peer:disconnect',
-  //     ({ did }: { did: string }) => {
-  //       const loggerPrefix = 'webrtc/peer:disconnect - '
-
-  //       if (!did) return
-
-  //       const id = this.iridium.chat?.directConversationIdFromDid(did)
-
-  //       if (id && this.iridium.chat?.hasConversation(id)) {
-  //         const conversation = this.iridium.chat?.getConversation(id)
-  //         const disconnectedParticipant = conversation.participants.find(
-  //           (participant) => participant === did,
-  //         )
-  //         if (disconnectedParticipant) {
-  //           logger.log(loggerPrefix, `disconnected participant: ${did}`)
-  //           // this.iridium.chat.updateConversation({
-  //           //   ...conversation,
-  //           //   participants: conversation.participants.map((participant) => {
-  //           //     if (participant.did === disconnectedParticipant.did) {
-  //           //       return {
-  //           //         ...participant,
-  //           //         status: 'offline',
-  //           //       }
-  //           //     }
-  //           //     return participant
-  //           //   }),
-  //           // })
-  //         }
-  //       }
-
-  //       const disconnectedFriend = this.iridium.friends.getFriend(did)
-
-  //       if (!disconnectedFriend) return
-
-  //       logger.log(loggerPrefix, `discovered peer: ${did}`)
-
-  //       this.iridium.friends.updateFriend({
-  //         ...disconnectedFriend,
-  //         status: 'offline',
-  //       })
-
-  //       $WebRTC.calls.forEach((call) => {
-  //         if (call.peers[did]) {
-  //           call.destroyPeer(did)
-  //           delete call.peers[did]
-  //         }
-  //       })
-  //     },
-  //   )
-  // }
-
-  // LATER WILL BE REMOVED
-  private subscribeToAnnounce = async () => {
+  async announce() {
     const profile = this.iridium.profile.state
+    const friends = iridium.connector && iridium.friends.state.friends
+    logger.debug(this.loggerTag, 'announce', {
+      friends,
+    })
 
-    setInterval(() => {
-      const id = this.iridium.chat?.directConversationIdFromDid(profile.did)
-
-      if (id && this.iridium.chat?.hasConversation(id)) {
-        const conversation = this.iridium.chat?.getConversation(id)
-        conversation.participants
-          .filter((p) => p !== this.iridium.connector?.id)
-          .forEach((p) => {
-            this.sendWebrtc(p, {
-              module: 'webrtc',
-              type: 'peer:announce',
-              did: this.iridium.connector.id,
-              name: profile.name,
-              address: profile.address,
-              profilePicture: profile.profilePicture,
-              at: Date.now().valueOf(),
-            })
-          })
-      }
-
-      const friends = Object.values(this.iridium.users.state)
-
-      friends
-        .filter((friend) => friend.did && friend.status !== 'online')
-        .forEach((friend) => {
-          this.sendWebrtc(friend.did, {
-            module: 'webrtc',
-            type: 'peer:announce',
-            did: this.iridium.connector.id,
-            name: profile.name,
-            address: profile.address,
-            profilePicture: profile.profilePicture,
-            at: Date.now().valueOf(),
-          })
-        })
-    }, announceFrequency)
+    if (!friends) return
+    await iridium.connector?.publish(
+      'webrtc',
+      {
+        type: 'announce',
+      },
+      {
+        encrypt: {
+          recipients: friends,
+        },
+      },
+    )
   }
 
-  private onMessage = ({ payload }: { payload: any }) => {
-    if (!payload.body.module || payload.body.module !== 'webrtc') {
-      return
-    }
-
+  private onMessage = ({
+    from,
+    payload,
+  }: IridiumPubsubMessage<
+    IridiumDecodedPayload<
+      WebRTCCallMessage | WebRTCAnnounceMessage | WebRTCTypingMessage
+    >
+  >) => {
     const { type } = payload.body
-
+    const did = didUtils.didString(from)
     switch (type) {
-      case 'peer:call':
-        this.onPeerCall(payload.body)
+      case 'call':
+        this.onPeerCall(did, payload.body as WebRTCCallMessage)
         break
-      case 'peer:typing':
-        this.onPeerTyping(payload.body)
+      case 'typing':
+        this.onPeerTyping(did, payload.body as WebRTCTypingMessage)
         break
-      case 'peer:announce':
-        this.onPeerAnnounce(payload.body)
+      case 'announce':
+        this.onPeerAnnounce(did, payload.body as WebRTCAnnounceMessage)
         break
     }
   }
 
-  private onPeerCall = async (payload: any) => {
-    const { did, callId, peers } = payload
-
-    const loggerPrefix = 'webrtc/peer:call - '
-    logger.log(loggerPrefix, `incoming call with callId: ${payload.callId}`)
+  private async onPeerCall(from: string, payload: WebRTCCallMessage) {
+    const { callId, peers } = payload
+    const loggerPrefix = 'iridium/webrtc/message/call'
 
     if (!callId) {
-      logger.log(loggerPrefix, `invalid callId`)
+      logger.error(loggerPrefix, `invalid callId`, {
+        from,
+        payload,
+      })
       return
     }
 
-    const call = $WebRTC.getCall(callId)
+    logger.log(loggerPrefix, `incoming call`, {
+      from,
+      callId,
+      peers,
+    })
 
+    const call = $WebRTC.getCall(callId)
     if (!call) {
-      logger.log(loggerPrefix, `create a call...`)
+      logger.info(loggerPrefix, `call not found, creating...`, {
+        from,
+        callId,
+        peers,
+      })
       await this.createCall({
-        did,
+        did: from,
         callId,
         peers,
       })
@@ -383,42 +159,30 @@ export default class WebRTCManager extends Emitter {
       return
     }
 
-    if (!call.peerConnected[did] && !call.peerDialingDisabled[did]) {
+    if (!call.peerConnected[from] && !call.peerDialingDisabled[from]) {
       logger.log(loggerPrefix, `initiate a call...`)
-      await call.initiateCall(did)
+      await call.initiateCall(from)
+      this.state.callStartedAt = Date.now()
     }
   }
 
-  private onPeerTyping = ({
-    did,
-    conversationId,
-  }: {
-    did: string
-    conversationId: string
-  }) => {
-    const conversation = this.iridium.chat.getConversation(conversationId)
-    if (!did || !conversation) return
-
-    if (!conversation.typing?.[did]) {
-      Vue.set(this.iridium.chat.state.conversations[conversationId], 'typing', {
-        ...conversation.typing,
-        [did]: true,
-      })
-    }
-
-    clearTimeout(this.timeoutMap[did])
+  private onPeerTyping(from: string, message: WebRTCTypingMessage) {
+    const { conversationId } = message
+    const conversation = this.iridium.chat.getConversation(
+      message.conversationId,
+    )
+    if (!from || !conversation || !conversation.participants.includes(from))
+      return
 
-    this.timeoutMap[did] = setTimeout(() => {
-      Vue.set(this.iridium.chat.state.conversations[conversationId], 'typing', {
-        ...conversation.typing,
-        [did]: false,
-      })
+    this.iridium.chat.setTyping(conversationId, from)
+    clearTimeout(this.timeoutMap[from])
+    this.timeoutMap[from] = setTimeout(() => {
+      this.iridium.chat.setTyping(conversationId, from, false)
     }, Config.chat.typingInputThrottle * 3)
   }
 
-  private onPeerAnnounce = (payload: any) => {
-    const did = payload.did as string
-    const requestFriend = this.iridium.users.getUser(did)
+  private onPeerAnnounce(from: string, _: WebRTCAnnounceMessage) {
+    const requestFriend = this.iridium.users.getUser(from)
 
     if (!requestFriend || requestFriend.status === 'online') return
 
@@ -426,6 +190,7 @@ export default class WebRTCManager extends Emitter {
     this.iridium.users.setUser(requestFriend.did, {
       ...requestFriend,
       status: 'online',
+      seen: Date.now(),
     })
   }
 
@@ -493,17 +258,13 @@ export default class WebRTCManager extends Emitter {
       return
     }
 
-    Vue.set(this.state.streamMuted, this.iridium.connector.id, {
+    this.setStreamMuted(this.iridium.connector.id, {
       audio: !kinds.includes('audio'),
       video: !kinds.includes('video'),
       screen: !kinds.includes('screen'),
     })
 
-    const $nuxt = useNuxtApp()
-    $nuxt.$store.commit('video/setDisabled', !kinds.includes('video'), {
-      root: true,
-    })
-
+    this.state.callStartedAt = Date.now()
     await call.createLocalTracks(kinds)
 
     this.state.incomingCall = null
@@ -515,7 +276,35 @@ export default class WebRTCManager extends Emitter {
     await call.start()
   }
 
-  private createCall = async ({
+  setStreamMuted(
+    did: string,
+    {
+      audio,
+      video,
+      screen,
+      headphones,
+    }: {
+      audio?: boolean
+      video?: boolean
+      screen?: boolean
+      headphones?: boolean
+    } = {},
+  ) {
+    this.state.streamMuted = {
+      ...this.state.streamMuted,
+      [did]: {
+        audio: audio ?? this.state.streamMuted[did]?.audio ?? false,
+        video: video ?? this.state.streamMuted[did]?.video ?? false,
+        screen: screen ?? this.state.streamMuted[did]?.screen ?? false,
+        headphones:
+          headphones ?? this.state.streamMuted[did]?.headphones ?? false,
+      },
+    }
+
+    this.emit('streamMuted', { did, ...this.state.streamMuted[did] })
+  }
+
+  private createCall({
     callId,
     peers,
     did,
@@ -523,7 +312,7 @@ export default class WebRTCManager extends Emitter {
     callId: string
     peers: CallPeerDescriptor[]
     did?: string
-  }) => {
+  }) {
     logger.log('webrtc: creating call', callId + peers)
 
     if (!this.iridium.connector?.id) {
@@ -555,6 +344,7 @@ export default class WebRTCManager extends Emitter {
       did: string
       data: SignalData
     }) => {
+      logger.debug('webrtc/createCall', 'onCallIncoming', { did, data })
       call.peerDialingDisabled[did] = true
       if (this.state.activeCall?.callId === call.callId) {
         call.answer(did, data)
@@ -594,15 +384,11 @@ export default class WebRTCManager extends Emitter {
     call.on('OUTGOING_CALL', onCallOutgoing)
 
     const onCallConnected = async ({ did }: { did: string }) => {
-      const $nuxt = useNuxtApp()
-
       this.state.incomingCall = null
       this.state.activeCall = { callId, did }
-      this.state.createdAt = Date.now()
+      this.state.callStartedAt = Date.now()
 
-      if ($nuxt.$store.state.audio.muted) {
-        call.mute({ did: this.iridium.connector?.id, kind: 'audio' })
-      }
+      this.emit('callConnected', { callId, did })
 
       $Sounds.stopSounds([Sounds.CALL])
       $Sounds.playSound(Sounds.CONNECTED)
@@ -612,7 +398,7 @@ export default class WebRTCManager extends Emitter {
     const onCallHangup = async () => {
       this.state.incomingCall = null
       this.state.activeCall = null
-      this.state.createdAt = 0
+      this.state.callStartedAt = 0
     }
     call.on('HANG_UP', onCallHangup)
 
@@ -632,18 +418,11 @@ export default class WebRTCManager extends Emitter {
         logger.error('webrtc', 'onCallTrack - connector.id not found')
         return
       }
-      const $nuxt = useNuxtApp()
 
-      let muted: Boolean = true
-      if (kind === 'audio') {
-        muted = $nuxt.$store.state.audio.muted
-      } else if (kind === 'video') {
-        muted = $nuxt.$store.state.video.disabled
-      }
-
-      Vue.set(this.state.streamMuted, this.iridium.connector.id, {
-        ...this.state.streamMuted[this.iridium.connector?.id],
-        [kind]: muted,
+      // emit the track event so that the UI can display/mute the track
+      this.emit('track', {
+        did: this.iridium.connector?.id,
+        kind,
       })
     }
     call.on('LOCAL_TRACK_CREATED', onCallTrack)
@@ -664,10 +443,7 @@ export default class WebRTCManager extends Emitter {
         return
       }
 
-      Vue.set(this.state.streamMuted, this.iridium.connector.id, {
-        ...this.state.streamMuted[this.iridium.connector?.id],
-        [kind]: false,
-      })
+      this.setStreamMuted(this.iridium.connector?.id, { [kind]: false })
     }
     call.on('LOCAL_TRACK_UNMUTED', onLocalTrackUnmuted)
 
@@ -687,10 +463,7 @@ export default class WebRTCManager extends Emitter {
 
       if (!kind) return
 
-      Vue.set(this.state.streamMuted, did, {
-        ...this.state.streamMuted[did],
-        [kind]: false,
-      })
+      this.setStreamMuted(did, { [kind]: !track.enabled })
     }
     call.on('REMOTE_TRACK_RECEIVED', onCallPeerTrack)
 
@@ -709,10 +482,7 @@ export default class WebRTCManager extends Emitter {
       )
       if (!kind) return
 
-      Vue.set(this.state.streamMuted, did, {
-        ...this.state.streamMuted[did],
-        [kind]: false,
-      })
+      this.setStreamMuted(did, { [kind]: false })
     }
     call.on('REMOTE_TRACK_UNMUTED', onPeerTrackUnmuted)
 
@@ -729,10 +499,7 @@ export default class WebRTCManager extends Emitter {
 
       logger.log('webrtc', `remote track muted: #${trackId} from ${did}`)
 
-      Vue.set(this.state.streamMuted, did, {
-        ...this.state.streamMuted[did],
-        [kind]: true,
-      })
+      this.setStreamMuted(did, { [kind]: true })
     }
     call.on('REMOTE_TRACK_MUTED', onRemoteTrackMuted)
 
@@ -752,19 +519,15 @@ export default class WebRTCManager extends Emitter {
         return
       }
 
-      Vue.set(this.state.streamMuted, this.iridium.connector.id, {
-        ...this.state.streamMuted[this.iridium.connector?.id],
-        [kind]: true,
-      })
+      this.setStreamMuted(this.iridium.connector?.id, { [kind]: true })
     }
     call.on('LOCAL_TRACK_REMOVED', onLocalTrackRemoved)
 
     const onStream = async ({ did, kind }: { did: string; kind?: string }) => {
       if (!kind) return
 
-      Vue.set(this.state.streamMuted, did, {
-        ...this.state.streamMuted[did],
-        [kind]: !!this.state.streamMuted[did]?.[kind],
+      this.setStreamMuted(did, {
+        [kind]: this.state.streamMuted?.[did]?.[kind as WebRTCEnum],
       })
     }
     call.on('STREAM', onStream)
@@ -778,7 +541,7 @@ export default class WebRTCManager extends Emitter {
     const onCallDestroy = async () => {
       this.state.incomingCall = null
       this.state.activeCall = null
-      this.state.createdAt = 0
+      this.state.callStartedAt = 0
 
       call.off('INCOMING_CALL', onCallIncoming)
       call.off('OUTGOING_CALL', onCallOutgoing)
@@ -802,7 +565,7 @@ export default class WebRTCManager extends Emitter {
     call.on('ERROR', onCallDestroy)
   }
 
-  public acceptCall = async (kinds: TrackKind[]) => {
+  public async acceptCall(kinds: TrackKind[]) {
     if (!this.iridium.connector?.id) {
       logger.error('webrtc', 'acceptCall - connector.id not found')
       return
@@ -813,17 +576,12 @@ export default class WebRTCManager extends Emitter {
       return
     }
 
-    Vue.set(this.state.streamMuted, this.iridium.connector.id, {
+    this.setStreamMuted(this.iridium.connector?.id, {
       audio: !kinds.includes('audio'),
       video: !kinds.includes('video'),
       screen: !kinds.includes('screen'),
     })
 
-    const $nuxt = useNuxtApp()
-    $nuxt.$store.commit('video/setDisabled', !kinds.includes('video'), {
-      root: true,
-    })
-
     const { callId, did, data } = this.state.incomingCall
 
     const call = $WebRTC.getCall(callId)
@@ -836,7 +594,7 @@ export default class WebRTCManager extends Emitter {
     await call.answer(did, data)
   }
 
-  public denyCall = () => {
+  public denyCall() {
     if (this.state.activeCall)
       $WebRTC.getCall(this.state.activeCall.callId)?.destroy()
     if (this.state.incomingCall) {
@@ -844,7 +602,7 @@ export default class WebRTCManager extends Emitter {
     }
   }
 
-  public hangUp = async () => {
+  public async hangUp() {
     if (this.state.activeCall) {
       $WebRTC.getCall(this.state.activeCall.callId)?.destroy()
     }
@@ -852,13 +610,7 @@ export default class WebRTCManager extends Emitter {
     this.state.activeCall = null
   }
 
-  public async toggleMute({
-    did,
-    kind,
-  }: {
-    did: string
-    kind: 'audio' | 'video' | 'screen'
-  }) {
+  public async toggleMute({ did, kind }: { did: string; kind: WebRTCEnum }) {
     if (!this.state.activeCall || !did) {
       return
     }
@@ -880,7 +632,7 @@ export default class WebRTCManager extends Emitter {
    * @method sendTyping
    * @description - send the TYPING event to the other conversation participants
    */
-  public sendTyping = async (conversationId: string) => {
+  public async sendTyping(conversationId: string) {
     const conversation = this.iridium.chat.getConversation(conversationId)
 
     if (!conversation) return
@@ -890,7 +642,7 @@ export default class WebRTCManager extends Emitter {
       'webrtc',
       {
         module: 'webrtc',
-        type: 'peer:typing',
+        type: 'typing',
         did: this.iridium.connector.id,
         conversationId,
         at: Date.now().valueOf(),
@@ -907,4 +659,42 @@ export default class WebRTCManager extends Emitter {
       encrypt: { recipients: [did] },
     })
   }
+
+  public isBackgroundCall(callId?: string) {
+    if (!this.state.activeCall?.callId) {
+      return false
+    }
+    return this.state.activeCall.callId !== callId
+  }
+
+  public isActiveCall(callId?: string) {
+    if (!iridium.webRTC.state.activeCall?.callId || !callId) {
+      return false
+    }
+    return iridium.webRTC.state.activeCall.callId === callId
+  }
+
+  public localParticipant(): User | undefined {
+    const id = this.state.activeCall?.did
+    if (!id) {
+      return
+    }
+    return { ...this.iridium.profile.state } as User
+  }
+
+  public remoteParticipants(): User[] {
+    const id = this.state.activeCall?.callId
+
+    if (!id || !this.iridium.chat.hasConversation(id)) {
+      return []
+    }
+
+    const conversation = this.iridium.chat.getConversation(id)
+
+    const dids = conversation.participants.filter(
+      (f) => f !== this.iridium.connector?.id,
+    )
+
+    return dids.map((did) => ({ ...this.iridium.users.getUser(did) }))
+  }
 }
diff --git a/libraries/Iridium/webrtc/hooks.ts b/libraries/Iridium/webrtc/hooks.ts
deleted file mode 100644
index df0d678a2f..0000000000
--- a/libraries/Iridium/webrtc/hooks.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import { Ref, UnwrapNestedRefs } from 'vue'
-import dayjs from 'dayjs'
-import { Call, CallPeerStreams } from '~/libraries/WebRTC/Call'
-import { User } from '~/libraries/Iridium/friends/types'
-import iridium from '~/libraries/Iridium/IridiumManager'
-import { $WebRTC } from '~/libraries/WebRTC/WebRTC'
-import { TrackKind } from '~/libraries/WebRTC/types'
-
-export function useCallElapsedTime() {
-  const state: UnwrapNestedRefs<{
-    interval: ReturnType<typeof setInterval> | null
-    elapsedTime: string
-  }> = reactive({ interval: null, elapsedTime: '' })
-
-  const updateElapsedTime = () => {
-    const duration = dayjs.duration(Date.now() - iridium.webRTC.state.createdAt)
-    const hours = duration.hours()
-    state.elapsedTime = `${hours > 0 ? hours + ':' : ''}${duration.format(
-      'mm:ss',
-    )}`
-  }
-
-  const startInterval = () => {
-    if (
-      !state.interval &&
-      iridium.webRTC.state.createdAt &&
-      iridium.webRTC.state.activeCall
-    ) {
-      updateElapsedTime()
-      state.interval = setInterval(updateElapsedTime, 1000)
-    }
-  }
-
-  const clearTimer = () => {
-    if (state.interval !== null) clearInterval(state.interval)
-  }
-
-  return {
-    elapsedTime: toRef(state, 'elapsedTime'),
-    startInterval,
-    clearTimer,
-  }
-}
-
-export function useUserStreams(did: string) {
-  const { call } = useWebRTC()
-
-  const streams: Ref<CallPeerStreams | undefined> = computed(() => {
-    if (!did || !call.value) return
-
-    return call.value.streams[did]
-  })
-
-  const getStream = (type: TrackKind): Ref<MediaStream | undefined> => {
-    return computed(() => {
-      const isMuted =
-        !did || Boolean(iridium.webRTC.state.streamMuted[did]?.[type] ?? true)
-
-      if (isMuted || !call.value) return
-
-      return streams.value?.[type]
-    })
-  }
-
-  return {
-    streams,
-    getStream,
-  }
-}
-
-export function useWebRTC() {
-  // THIS SHOULD BE IN ITS OWN useConversation Hook
-  const $nuxt = useNuxtApp()
-  const conversationId: Ref<string> = computed(() => {
-    return $nuxt.$route.params.id
-  })
-
-  const call: Ref<Call | undefined> = computed(() => {
-    if (!iridium.webRTC.state.activeCall?.callId) return
-
-    return $WebRTC.getCall(iridium.webRTC.state.activeCall.callId)
-  })
-
-  const isActiveCall: Ref<boolean> = computed(() => {
-    if (!iridium.webRTC.state.activeCall?.callId || !conversationId.value) {
-      return false
-    }
-    return iridium.webRTC.state.activeCall.callId === conversationId.value
-  })
-
-  const isBackgroundCall: Ref<boolean> = computed(() => {
-    if (!iridium.webRTC.state.activeCall?.callId) {
-      return false
-    }
-    return iridium.webRTC.state.activeCall.callId !== conversationId.value
-  })
-
-  const localParticipant: Ref<User | undefined> = computed(() => {
-    const id = iridium.webRTC.state.activeCall?.did
-    if (!id) {
-      return
-    }
-    return iridium.profile.state
-  })
-
-  const remoteParticipants: Ref<User[]> = computed(() => {
-    const id = iridium.webRTC.state.activeCall?.callId
-
-    if (!id || !iridium.chat.hasConversation(id)) {
-      return []
-    }
-
-    const conversation = iridium.chat.getConversation(id)
-
-    const dids = conversation.participants.filter(
-      (f) => f !== iridium.connector?.id,
-    )
-
-    return dids.map((did) => iridium.users.getUser(did))
-  })
-
-  return {
-    call,
-    isActiveCall,
-    isBackgroundCall,
-    localParticipant,
-    remoteParticipants,
-  }
-}
diff --git a/libraries/Iridium/webrtc/types.ts b/libraries/Iridium/webrtc/types.ts
index 726249b109..c569bd6610 100644
--- a/libraries/Iridium/webrtc/types.ts
+++ b/libraries/Iridium/webrtc/types.ts
@@ -20,7 +20,7 @@ export interface WebRTCState {
     type: 'group' | 'friend'
     data: SignalData
   } | null
-  createdAt: number
+  callStartedAt: number
 }
 
 export enum WebRTCError {
diff --git a/libraries/WebRTC/Call.ts b/libraries/WebRTC/Call.ts
index d23d9236aa..99a7369f16 100644
--- a/libraries/WebRTC/Call.ts
+++ b/libraries/WebRTC/Call.ts
@@ -237,7 +237,7 @@ export class Call extends Emitter<CallEventListeners> {
 
     return iridium.webRTC.sendWebrtc(did, {
       module: 'webrtc',
-      type: 'peer:call',
+      type: 'call',
       callId: this.callId === did ? iridium.connector?.id : this.callId,
       peers: this.peerDetails,
       did,
diff --git a/pages/chat/_id.vue b/pages/chat/_id.vue
index 60a1d03c90..b78530eae6 100644
--- a/pages/chat/_id.vue
+++ b/pages/chat/_id.vue
@@ -2,15 +2,20 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { useWebRTC } from '~/libraries/Iridium/webrtc/hooks'
+import iridium from '~/libraries/Iridium/IridiumManager'
 
 export default Vue.extend({
   name: 'Chat',
   layout: 'desktop',
-  setup() {
-    const { isActiveCall } = useWebRTC()
-
-    return { isActiveCall }
+  data() {
+    return {
+      webrtc: iridium.webRTC.state,
+    }
+  },
+  computed: {
+    isActiveCall(): boolean {
+      return iridium.webRTC.isActiveCall(this.$route.params.id)
+    },
   },
 })
 </script>
diff --git a/pages/friends/index.vue b/pages/friends/index.vue
index 4255ef6834..6dfde141fc 100644
--- a/pages/friends/index.vue
+++ b/pages/friends/index.vue
@@ -24,7 +24,13 @@ export default Vue.extend({
     }),
     friendsList(): Friend[] {
       return this.friends.friends.map((did) => {
-        return iridium.users.getUser(did)
+        return (
+          iridium.users.getUser(did) || {
+            did,
+            name: did,
+            avatar: '',
+          }
+        )
       })
     },
     activeTab(): FriendsTabs {
diff --git a/pages/index.vue b/pages/index.vue
index 5ad2322dd2..5bc470a916 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -11,6 +11,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import { mapGetters, mapState } from 'vuex'
+import logger from '~/plugins/local/logger'
 import { AccountsError } from '~/store/accounts/types'
 import { RootState } from '~/types/store/store'
 
@@ -84,6 +85,9 @@ export default Vue.extend({
           return
         }
 
+        logger.error('pages/index/loadAccount', 'error loading account', {
+          error,
+        })
         this.$store.commit('ui/toggleErrorNetworkModal', {
           state: true,
           action: this.loadAccount,
diff --git a/store/accounts/actions.ts b/store/accounts/actions.ts
index eac5a8974b..d2557f2b0e 100644
--- a/store/accounts/actions.ts
+++ b/store/accounts/actions.ts
@@ -192,23 +192,25 @@ export default {
       await iridium.initFromEntropy(entropy)
     }
 
-    logger.debug('accounts/actions/loadAccount', 'fetching iridium profile')
-    const userInfo = await iridium.profile?.get()
-    if (!userInfo?.did) {
+    const profile = await iridium.profile?.get()
+    logger.debug('accounts/actions/loadAccount', 'fetched iridium profile', {
+      profile,
+    })
+    if (!profile?.did) {
       logger.error('accounts/actions/loadAccount', 'user not registered')
       throw new Error(AccountsError.USER_NOT_REGISTERED)
     }
-    iridium.profile.setUser()
+    await iridium.profile.setUser()
     commit('setActiveAccount', iridium.connector?.id)
 
     logger.debug(
       'accounts/actions/loadAccount',
       'user loaded, dispatching setUserDetails & setRegistrationStatus',
-      userInfo,
+      profile,
     )
     commit('setUserDetails', {
-      username: userInfo.name,
-      ...userInfo,
+      username: profile.name,
+      ...profile,
     })
     commit('setRegistrationStatus', RegistrationStatus.REGISTERED)
     await iridium.connector?.waitForSyncNode()
@@ -265,13 +267,14 @@ export default {
     const imagePath = await uploadPicture(userData.image)
     const profile = {
       did: iridium.connector?.id,
-      peerId: iridium.connector?.peerId,
+      peerId: iridium.connector?.peerId.toString(),
       name: userData.name,
       status: userData.status,
       photoHash: imagePath,
     }
     await iridium.connector?.waitForSyncNode()
     await iridium.profile?.set('', profile)
+    console.info('setting profile', profile)
     await iridium.sendSyncInit()
     commit('setRegistrationStatus', RegistrationStatus.REGISTERED)
     commit('setActiveAccount', iridium.connector?.id)
diff --git a/store/audio/actions.ts b/store/audio/actions.ts
index 5026487705..415f0da45a 100644
--- a/store/audio/actions.ts
+++ b/store/audio/actions.ts
@@ -5,6 +5,13 @@ import { ActionsArguments } from '~/types/store/store'
 import iridium from '~/libraries/Iridium/IridiumManager'
 
 export default {
+  initialize({ dispatch, state }: ActionsArguments<AudioState>) {
+    iridium.webRTC.on('track', ({ did, kind }) => {
+      if (kind === 'audio' && state.muted && did === iridium.connector?.id) {
+        iridium.webRTC.setStreamMuted(did, { audio: true })
+      }
+    })
+  },
   /**
    * @method toggleMute
    * @description Toggles mute for outgoing audio

From 013f68742c1be6eb6c33f6523b057bed87a8cad7 Mon Sep 17 00:00:00 2001
From: Drew Ewing <drew.ewing@satellite.im>
Date: Mon, 29 Aug 2022 17:52:24 -0700
Subject: [PATCH 2/3] feat(merge): cleanup merge artifacts and problems

---
 .../ui/BackgroundCall/BackgroundCall.vue      | 11 ++--
 components/ui/Global/Global.html              |  2 +-
 components/ui/Global/Global.vue               | 10 +---
 components/ui/User/State/State.vue            |  5 --
 components/views/friends/search/Search.vue    |  9 ++-
 components/views/media/Media.vue              |  1 -
 .../views/media/previewCall/PreviewCall.vue   |  5 ++
 components/views/media/user/User.vue          |  7 ++-
 .../navigation/mobile/toolbar/Toolbar.vue     | 17 +++---
 .../navigation/toolbar/alerts/Alerts.vue      |  3 +-
 layouts/mobile.vue                            |  9 +--
 libraries/Iridium/chat/ChatManager.ts         | 32 +++++-----
 libraries/Iridium/friends/types.ts            |  1 +
 libraries/Iridium/webrtc/WebRTCManager.ts     | 60 ++++++++-----------
 libraries/Iridium/webrtc/types.ts             | 29 +++++----
 pages/mobile/chat/_id.vue                     | 11 ++--
 16 files changed, 102 insertions(+), 110 deletions(-)

diff --git a/components/ui/BackgroundCall/BackgroundCall.vue b/components/ui/BackgroundCall/BackgroundCall.vue
index e1be42a343..ead5df1ae8 100644
--- a/components/ui/BackgroundCall/BackgroundCall.vue
+++ b/components/ui/BackgroundCall/BackgroundCall.vue
@@ -3,6 +3,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import iridium from '~/libraries/Iridium/IridiumManager'
+import { $WebRTC } from '~/libraries/WebRTC/WebRTC'
 
 export default Vue.extend({
   data() {
@@ -11,17 +12,17 @@ export default Vue.extend({
       callTime: iridium.webRTC.callTime,
     }
   },
+  computed: {
+    remoteParticipant() {
+      return iridium.webRTC.remoteParticipants()?.[0] ?? undefined
+    },
+  },
   methods: {
     navigateToActiveConversation() {
       if (!this.webrtc.activeCall) {
         return
       }
 
-      if (this.$device.isMobile) {
-        // mobile, show slide 1 which is chat slide, set showSidebar flag false as css related
-        this.$store.commit('ui/showSidebar', false)
-      }
-
       const id = iridium.chat?.directConversationIdFromDid(
         this.webrtc.activeCall.did,
       )
diff --git a/components/ui/Global/Global.html b/components/ui/Global/Global.html
index 3973ac4891..4e5788ffe3 100644
--- a/components/ui/Global/Global.html
+++ b/components/ui/Global/Global.html
@@ -28,7 +28,7 @@
       />
     </UiModal> -->
     <UiModal v-if="incomingCall">
-      <MediaIncomingCall :accept-call="acceptCall" :deny-call="denyCall" />
+      <MediaIncomingCall />
     </UiModal>
     <UiModal
       v-if="ui.modals.marketplace"
diff --git a/components/ui/Global/Global.vue b/components/ui/Global/Global.vue
index 05a8084911..68f497ee09 100644
--- a/components/ui/Global/Global.vue
+++ b/components/ui/Global/Global.vue
@@ -4,6 +4,8 @@ import Vue from 'vue'
 import { mapState } from 'vuex'
 import { ModalWindows } from '~/store/ui/types'
 import iridium from '~/libraries/Iridium/IridiumManager'
+import { WebRTCIncomingCall } from '~/libraries/Iridium/webrtc/types'
+import { PropCommonEnum } from '~/libraries/Enums/enums'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -21,8 +23,7 @@ export default Vue.extend({
   computed: {
     ...mapState(['ui', 'media', 'conversation', 'files', 'settings']),
     ModalWindows: () => ModalWindows,
-    incomingCall() {
-      console.info('incomingCall', this.webrtc.incomingCall)
+    incomingCall(): WebRTCIncomingCall | null {
       return this.webrtc.incomingCall
     },
     isBackgroundCall(): boolean {
@@ -31,11 +32,6 @@ export default Vue.extend({
     isActiveCall(): boolean {
       return iridium.webRTC.isActiveCall(this.$route.params.id)
     },
-    showBackgroundCall(): boolean {
-      if (!this.$device.isMobile) {
-        return this.isBackgroundCall
-      }
-      return this.isBackgroundCall || (this.isActiveCall && this.ui.showSidebar)
   },
   watch: {
     'settings.audioInput'(audioInput: string) {
diff --git a/components/ui/User/State/State.vue b/components/ui/User/State/State.vue
index 04d1d3188f..6e98a0a5c6 100644
--- a/components/ui/User/State/State.vue
+++ b/components/ui/User/State/State.vue
@@ -45,17 +45,12 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import { SmartphoneIcon } from 'satellite-lucide-icons'
 import iridium from '~/libraries/Iridium/IridiumManager'
 import { User } from '~/libraries/Iridium/friends/types'
-import iridium from '~/libraries/Iridium/IridiumManager'
 import { UserStatus } from '~/libraries/Iridium/users/types'
 import { Config } from '~/config'
 
 export default Vue.extend({
-  components: {
-    SmartphoneIcon,
-  },
   props: {
     userId: {
       type: String as PropType<User['did']>,
diff --git a/components/views/friends/search/Search.vue b/components/views/friends/search/Search.vue
index 68c91127de..16f7124bca 100644
--- a/components/views/friends/search/Search.vue
+++ b/components/views/friends/search/Search.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <InteractablesInput
-      v-model="query"
+      v-model.trim="query"
       :placeholder="$t('friends.search_placeholder')"
       :autofocus="$device.isDesktop"
       @change="_searchFriend"
@@ -55,7 +55,7 @@ export default Vue.extend({
   },
   async mounted() {
     if (this.$route.params && this.$route.params.id) {
-      this.$data.query = this.$route.params.id
+      this.query = this.$route.params.id
       this._searchFriend()
     }
     iridium.friends?.on('request/error', (err: string) => {
@@ -77,13 +77,12 @@ export default Vue.extend({
       this.user = null
       this.error = ''
       this.searching = true
-      const query = this.query.trim()
-      const matches = await iridium.users.searchPeer(query)
+      const matches = await iridium.users.searchPeer(this.query)
       const hasFriend =
         matches.length === 1 && iridium.friends.isFriend(matches[0].did)
 
       if (
-        query === iridium.connector?.id ||
+        this.query === iridium.connector?.id ||
         (matches.length === 1 && matches[0].did === iridium.connector?.id)
       ) {
         this.error = this.$t('friends.self_add') as string
diff --git a/components/views/media/Media.vue b/components/views/media/Media.vue
index 2052d2fa09..1bc8f38d4e 100644
--- a/components/views/media/Media.vue
+++ b/components/views/media/Media.vue
@@ -42,7 +42,6 @@ export default Vue.extend({
     },
     remoteParticipants(): User[] {
       const p = iridium.webRTC.remoteParticipants()
-      console.info('remoteParticipants', p)
       return p
     },
     height: {
diff --git a/components/views/media/previewCall/PreviewCall.vue b/components/views/media/previewCall/PreviewCall.vue
index 9339ffd2e8..8682dc93a6 100644
--- a/components/views/media/previewCall/PreviewCall.vue
+++ b/components/views/media/previewCall/PreviewCall.vue
@@ -20,6 +20,11 @@ export default Vue.extend({
       webrtc: iridium.webRTC.state,
     }
   },
+  computed: {
+    remoteParticipant() {
+      return iridium.webRTC.remoteParticipants()?.[0] ?? undefined
+    },
+  },
   methods: {
     navigateToActiveConversation() {
       const conversationId = iridium.webRTC.state.activeCall?.callId
diff --git a/components/views/media/user/User.vue b/components/views/media/user/User.vue
index c6d9aa7bfd..8e1052f42b 100644
--- a/components/views/media/user/User.vue
+++ b/components/views/media/user/User.vue
@@ -77,9 +77,10 @@ export default Vue.extend({
       if (this.isMuted('video') || !this.call) return
       return this.streams?.video
     },
-    screenStream() {
-      if (this.isMuted('screen') || !this.call) return
-      return this.streams?.screen,
+    screenStream(): MediaStream | undefined {
+      if (this.isMuted('screen') || !this.call) return undefined
+      return this.streams?.screen
+    },
     isLocalVideoFlipped(): boolean {
       return iridium.settings.state.video.flipLocalStream
     },
diff --git a/components/views/navigation/mobile/toolbar/Toolbar.vue b/components/views/navigation/mobile/toolbar/Toolbar.vue
index f7df8d06c5..bd791dff4b 100644
--- a/components/views/navigation/mobile/toolbar/Toolbar.vue
+++ b/components/views/navigation/mobile/toolbar/Toolbar.vue
@@ -13,10 +13,11 @@ import { mapGetters } from 'vuex'
 import iridium from '~/libraries/Iridium/IridiumManager'
 import Group from '~/libraries/Iridium/groups/Group'
 import { TrackKind } from '~/libraries/WebRTC/types'
-import type { Friend, User } from '~/libraries/Iridium/friends/types'
 import { Conversation } from '~/libraries/Iridium/chat/types'
 import { GroupMemberDetails } from '~/libraries/Iridium/groups/types'
 import { GroupState } from '~/libraries/Iridium/groups/GroupManager'
+import { User } from '~/libraries/Iridium/users/types'
+import { Friend } from '~/libraries/Iridium/friends/types'
 
 export default Vue.extend({
   components: {
@@ -36,7 +37,7 @@ export default Vue.extend({
   },
   computed: {
     ...mapGetters('ui', ['allUnseenNotifications']),
-    isActiveCall() {
+    isActiveCall(): boolean {
       return iridium.webRTC.isActiveCall(this.$route.params.id)
     },
     conversationId(): Conversation['id'] | undefined {
@@ -71,17 +72,13 @@ export default Vue.extend({
       return Object.values(members)
     },
     enableRTC(): boolean {
-      console.info('enableRTC', this.details, this.isGroup)
-      // todo- hook up to usermanager
       if (this.isGroup) {
         const memberIds = this.groupMembers.map((m) => m.id)
-        return this.friends.some(
-          (friend: Friend) =>
-            memberIds.includes(friend.did) && friend.status === 'online',
-        )
+        return memberIds
+          .map((id) => this.users[id])
+          .some((u) => u.status === 'online')
       }
-      // Check current recipient is on the user's friends list
-      return this.details?.status === 'online'
+      return (this.details as User | undefined)?.status === 'online'
     },
   },
   methods: {
diff --git a/components/views/navigation/toolbar/alerts/Alerts.vue b/components/views/navigation/toolbar/alerts/Alerts.vue
index 9baed0e5a2..dd299b4da4 100644
--- a/components/views/navigation/toolbar/alerts/Alerts.vue
+++ b/components/views/navigation/toolbar/alerts/Alerts.vue
@@ -4,6 +4,7 @@
 import Vue from 'vue'
 import { FlaskConicalIcon } from 'satellite-lucide-icons'
 import iridium from '~/libraries/Iridium/IridiumManager'
+import { Notification } from '~/libraries/Iridium/notifications/types'
 export default Vue.extend({
   components: {
     FlaskConicalIcon,
@@ -14,7 +15,7 @@ export default Vue.extend({
     }
   },
   computed: {
-    alerts() {
+    alerts(): Notification[] {
       return this.notifications.notifications
     },
   },
diff --git a/layouts/mobile.vue b/layouts/mobile.vue
index b993b86cdd..e06ca894cd 100644
--- a/layouts/mobile.vue
+++ b/layouts/mobile.vue
@@ -22,15 +22,9 @@ import { flairs, Flair } from '~/libraries/Iridium/settings/types'
 import 'swiper/css'
 import { RootState } from '~/types/store/store'
 import { Conversation } from '~/libraries/Iridium/chat/types'
-import { useWebRTC } from '~/libraries/Iridium/webrtc/hooks'
 
 export default Vue.extend({
   name: 'Mobile',
-  setup() {
-    const { isBackgroundCall } = useWebRTC()
-
-    return { isBackgroundCall }
-  },
   data() {
     return {
       settings: iridium.settings.state,
@@ -41,6 +35,9 @@ export default Vue.extend({
     ...mapState({
       isMobileNavVisible: (state) => (state as RootState).ui.isMobileNavVisible,
     }),
+    isBackgroundCall(): boolean {
+      return iridium.webRTC.isBackgroundCall(this.$route.params.id)
+    },
     flair(): Flair {
       return flairs[this.settings.flair]
     },
diff --git a/libraries/Iridium/chat/ChatManager.ts b/libraries/Iridium/chat/ChatManager.ts
index 5b4f1ecbc4..b4f8d72353 100644
--- a/libraries/Iridium/chat/ChatManager.ts
+++ b/libraries/Iridium/chat/ChatManager.ts
@@ -1,7 +1,6 @@
 import {
   didUtils,
   Emitter,
-  encoding,
   IridiumMessage,
   IridiumPubsubMessage,
   IridiumSetOptions,
@@ -13,7 +12,6 @@ import type { AddOptions, AddResult } from 'ipfs-core-types/root'
 import type { IPFS } from 'ipfs-core-types'
 import { CID } from 'multiformats'
 import * as json from 'multiformats/codecs/json'
-import type { SyncFetchResponse } from '@satellite-im/iridium/src/sync/agent'
 import type { EmitterCallback } from '@satellite-im/iridium'
 import type {
   SyncFetchResponse,
@@ -272,7 +270,7 @@ export default class ChatManager extends Emitter<ConversationMessage> {
 
       const friendName = this.iridium.users.getUser(message?.from)
       const buildNotification: Exclude<Notification, 'id'> = {
-        fromName: friendName?.name,
+        fromName: friendName?.name || message.from,
         at: Date.now(),
         fromAddress: conversationId,
         chatName: conversation.participants.length > 2 ? conversation.name : '',
@@ -303,8 +301,15 @@ export default class ChatManager extends Emitter<ConversationMessage> {
         reaction.conversationId,
         reaction.messageId,
       )
-      Vue.set(message.reactions, reaction.userId, reaction.reactions)
-      await this.set(reactionsPath, reaction.reactions)
+
+      this.state.conversations[conversationId].message = {
+        ...this.state.conversations[conversationId].message,
+        [message.id]: message,
+      }
+      this.set(
+        `/conversations/${conversationId}/message/${message.id}`,
+        message,
+      )
     }
   }
 
@@ -485,6 +490,7 @@ export default class ChatManager extends Emitter<ConversationMessage> {
       members: newMembers,
       at: Date.now(),
       attachments: [],
+      payload: {},
     })
   }
 
@@ -517,6 +523,7 @@ export default class ChatManager extends Emitter<ConversationMessage> {
       type: 'member_leave',
       at: Date.now(),
       attachments: [],
+      payload: {},
     })
 
     const event: IridiumConversationEvent = {
@@ -561,7 +568,6 @@ export default class ChatManager extends Emitter<ConversationMessage> {
     await this.iridium.connector?.unsubscribe(`/chat/conversations/${id}`)
   }
 
-
   getConversation(id: Conversation['id']): Conversation | undefined {
     return this.state.conversations[id]
   }
@@ -657,7 +663,9 @@ export default class ChatManager extends Emitter<ConversationMessage> {
     const messageID = (
       await this.iridium.connector.store(partial, {
         syncPin: true,
-        encrypt: { recipients: conversation.participants },
+        encrypt: conversation?.participants
+          ? { recipients: conversation?.participants }
+          : undefined,
       })
     ).toString() as string
     const message: ConversationMessage = {
@@ -690,7 +698,9 @@ export default class ChatManager extends Emitter<ConversationMessage> {
         cid: message.id,
       },
       {
-        encrypt: { recipients: conversation.participants },
+        encrypt: conversation?.participants
+          ? { recipients: conversation.participants }
+          : undefined,
       },
     )
   }
@@ -706,11 +716,6 @@ export default class ChatManager extends Emitter<ConversationMessage> {
 
     const path = `/conversations/${conversationId}/message/${messageId}/reactions/${did}`
 
-    if (!this.subscriptions[conversationId]) {
-      // we're not subscribed yet
-      throw new Error(`not yet subscribed to conversation ${conversationId}`)
-    }
-
     let reactions = (message.reactions && message.reactions[did]) ?? []
 
     const shouldRemove = reactions.includes(payload.reaction)
@@ -723,7 +728,6 @@ export default class ChatManager extends Emitter<ConversationMessage> {
     message.reactions = { ...message.reactions, [did]: reactions }
     this.set(path, reactions)
 
-
     const reaction: MessageReaction = {
       conversationId,
       messageId,
diff --git a/libraries/Iridium/friends/types.ts b/libraries/Iridium/friends/types.ts
index d2ca0e4703..6fd5294953 100644
--- a/libraries/Iridium/friends/types.ts
+++ b/libraries/Iridium/friends/types.ts
@@ -2,6 +2,7 @@ export type User = {
   did: string
   name: string
   seen?: number
+  status?: 'online' | 'offline' | 'busy' | 'away' | 'invisible'
   photoHash?: string
 }
 
diff --git a/libraries/Iridium/webrtc/WebRTCManager.ts b/libraries/Iridium/webrtc/WebRTCManager.ts
index 76266306fd..9d6f4efbcc 100644
--- a/libraries/Iridium/webrtc/WebRTCManager.ts
+++ b/libraries/Iridium/webrtc/WebRTCManager.ts
@@ -2,7 +2,10 @@ import { didUtils, Emitter, IridiumPubsubMessage } from '@satellite-im/iridium'
 import { IridiumDecodedPayload } from '@satellite-im/iridium/src/core/encoding'
 import { SignalData } from 'simple-peer'
 import iridium, { IridiumManager } from '../IridiumManager'
-import { WebRTCState } from '~/libraries/Iridium/webrtc/types'
+import {
+  WebRTCState,
+  WebRTCStreamConstraints,
+} from '~/libraries/Iridium/webrtc/types'
 import { CallPeerDescriptor } from '~/libraries/WebRTC/Call'
 import SoundManager, { Sounds } from '~/libraries/SoundManager/SoundManager'
 import { TrackKind } from '~/libraries/WebRTC/types'
@@ -29,6 +32,7 @@ const initialState: WebRTCState = {
 
 type WebRTCAnnounceMessage = {
   type: 'announce'
+  status?: 'online' | 'offline'
 }
 type WebRTCCallMessage = {
   type: 'call'
@@ -44,7 +48,6 @@ export default class WebRTCManager extends Emitter {
   public readonly iridium: IridiumManager
   public state: WebRTCState
   private loggerTag = 'iridium/webRTC'
-  public timeoutMap: { [key: string]: ReturnType<typeof setTimeout> } = {}
   public callTime: number = 0
 
   constructor(iridium: IridiumManager) {
@@ -57,18 +60,7 @@ export default class WebRTCManager extends Emitter {
     this.state.streamConstraints = {
       ...this.state.streamConstraints,
       ...constraints,
-    }
-  }
-
-  get streamConstraints() {
-    return this.state.streamConstraints
-  }
-
-  set streamConstraints(constraints: MediaStreamConstraints) {
-    this.state.streamConstraints = {
-      ...this.state.streamConstraints,
-      ...constraints,
-    }
+    } as WebRTCStreamConstraints
   }
 
   get streamConstraints() {
@@ -201,35 +193,26 @@ export default class WebRTCManager extends Emitter {
       return
 
     this.iridium.chat.setTyping(conversationId, from)
-    clearTimeout(this.timeoutMap[from])
-    this.timeoutMap[from] = setTimeout(() => {
-      this.iridium.chat.setTyping(conversationId, from, false)
-    }, Config.chat.typingInputThrottle * 3)
   }
 
-  private onPeerAnnounce(from: string, _: WebRTCAnnounceMessage) {
+  private onPeerAnnounce(from: string, payload: WebRTCAnnounceMessage) {
     const requestFriend = this.iridium.users.getUser(from)
 
     if (!requestFriend) return
 
-    this.iridium.users.setUserStatus(requestFriend.did, payload.status)
+    this.iridium.users.setUserStatus(
+      requestFriend.did,
+      payload.status || 'online',
+    )
 
     if (payload.status === 'offline') {
       $WebRTC.calls.forEach((call) => {
-        if (call.peers[did]) {
-          call.destroyPeer(did)
-          delete call.peers[did]
+        if (call.peers[from]) {
+          call.destroyPeer(from)
+          delete call.peers[from]
         }
       })
-
-      return
     }
-
-    clearTimeout(this.userStatusMap[did])
-
-    this.userStatusMap[did] = setTimeout(() => {
-      this.iridium.users.setUserStatus(requestFriend.did, 'offline')
-    }, Config.webrtc.announceFrequency * 2)
   }
 
   public async call(recipient: Friend, kinds: TrackKind[]) {
@@ -274,7 +257,11 @@ export default class WebRTCManager extends Emitter {
 
       const peers = participants.map((did) => {
         const user =
-          this.iridium.users.getUser(did) || (this.iridium.profile.state ?? '')
+          this.iridium.users.getUser(did) ||
+          (this.iridium.profile.state ?? {
+            did,
+            name: did,
+          })
 
         return {
           name: user.name,
@@ -733,11 +720,12 @@ export default class WebRTCManager extends Emitter {
 
     const conversation = this.iridium.chat.getConversation(id)
 
-    const dids = conversation.participants.filter(
-      (f) => f !== this.iridium.connector?.id,
-    )
+    const dids =
+      conversation?.participants?.filter(
+        (f) => f !== this.iridium.connector?.id,
+      ) || []
 
-    return dids.map((did) => ({ ...this.iridium.users.getUser(did) }))
+    return dids.map((did) => ({ ...this.iridium.users.getUser(did) } as User))
   }
 
   public async mute({
diff --git a/libraries/Iridium/webrtc/types.ts b/libraries/Iridium/webrtc/types.ts
index c569bd6610..48072287ac 100644
--- a/libraries/Iridium/webrtc/types.ts
+++ b/libraries/Iridium/webrtc/types.ts
@@ -8,19 +8,28 @@ export type StreamMutedState = {
   [key: string]: PeerMutedState
 }
 
+export type WebRTCActiveCall = {
+  callId: string
+  did: string
+}
+
+export type WebRTCIncomingCall = {
+  callId: string
+  did: string
+  type: 'group' | 'friend'
+  data: SignalData
+}
+
+export type WebRTCStreamConstraints = {
+  audio: boolean
+  video: boolean
+}
 export interface WebRTCState {
   streamMuted: StreamMutedState
-  activeCall: {
-    callId: string
-    did: string
-  } | null
-  incomingCall: {
-    callId: string
-    did: string
-    type: 'group' | 'friend'
-    data: SignalData
-  } | null
+  activeCall: WebRTCActiveCall | null
+  incomingCall: WebRTCIncomingCall | null
   callStartedAt: number
+  streamConstraints: WebRTCStreamConstraints
 }
 
 export enum WebRTCError {
diff --git a/pages/mobile/chat/_id.vue b/pages/mobile/chat/_id.vue
index 2e5f6e773d..578765efe4 100644
--- a/pages/mobile/chat/_id.vue
+++ b/pages/mobile/chat/_id.vue
@@ -38,7 +38,7 @@ import { MenuIcon } from 'satellite-lucide-icons'
 import { Swiper, SwiperOptions } from 'swiper'
 import { RootState } from '~/types/store/store'
 import 'swiper/css'
-import { useWebRTC } from '~/libraries/Iridium/webrtc/hooks'
+import iridium from '~/libraries/Iridium/IridiumManager'
 
 export default Vue.extend({
   name: 'MobileChat',
@@ -46,18 +46,17 @@ export default Vue.extend({
     MenuIcon,
   },
   layout: 'mobile',
-  setup() {
-    const { isActiveCall } = useWebRTC()
-
-    return { isActiveCall }
-  },
   data: () => ({
     swiper: undefined as Swiper | undefined,
+    webrtc: iridium.webRTC.state,
   }),
   computed: {
     ...mapState({
       ui: (state) => (state as RootState).ui,
     }),
+    isActiveCall(): boolean {
+      return iridium.webRTC.isActiveCall(this.$route.params.id)
+    },
     swiperConfig(): SwiperOptions {
       return {
         noSwipingClass: 'disable-swipe',

From 602f20bd5a85c7d2bac56fffdee38546cd38fab2 Mon Sep 17 00:00:00 2001
From: Drew Ewing <drew.ewing@satellite.im>
Date: Mon, 29 Aug 2022 19:05:29 -0700
Subject: [PATCH 3/3] feat(refactor): merge fixes, icons, userStatus

---
 components/ui/User/State/State.vue            | 48 ++++---------------
 .../chatbar/footer/connected/Connected.vue    |  4 +-
 components/views/media/heading/Heading.vue    |  7 +--
 .../navigation/mobile/toolbar/Toolbar.vue     |  9 ++--
 .../views/navigation/sidebar/live/Live.vue    |  6 ++-
 .../views/navigation/toolbar/Toolbar.vue      | 28 ++++++-----
 libraries/Iridium/users/UsersManager.ts       |  2 +-
 libraries/Iridium/webrtc/WebRTCManager.ts     |  2 +-
 8 files changed, 40 insertions(+), 66 deletions(-)

diff --git a/components/ui/User/State/State.vue b/components/ui/User/State/State.vue
index 6e98a0a5c6..b25f08252c 100644
--- a/components/ui/User/State/State.vue
+++ b/components/ui/User/State/State.vue
@@ -10,7 +10,7 @@
         y="0"
         width="40"
         height="40"
-        :mask="`url(#${finalMask}-mask)`"
+        :mask="`url(#circle-mask)`"
       >
         <UiCircle
           :type="imageSource ? 'image' : 'random'"
@@ -22,13 +22,13 @@
       </foreignObject>
       <svg width="28" height="18" x="12" y="22" viewBox="0 0 28 18">
         <rect
-          :class="`status is-${state}`"
+          :class="`status is-${status}`"
           width="28"
           height="18"
-          :mask="`url(#mask-state-${state})`"
+          :mask="`url(#mask-state-${status})`"
         />
         <foreignObject
-          v-if="state === 'typing'"
+          v-if="status === 'typing'"
           x="3"
           y="9"
           width="25"
@@ -46,9 +46,7 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import iridium from '~/libraries/Iridium/IridiumManager'
-import { User } from '~/libraries/Iridium/friends/types'
-import { UserStatus } from '~/libraries/Iridium/users/types'
-import { Config } from '~/config'
+import { User, UserStatus } from '~/libraries/Iridium/users/types'
 
 export default Vue.extend({
   props: {
@@ -65,6 +63,7 @@ export default Vue.extend({
     const conversationId = iridium.chat.directConversationIdFromDid(this.userId)
     return {
       users: iridium.users.state,
+      userStatus: iridium.users.userStatus,
       conversationId,
       isTyping: conversationId
         ? iridium.chat.ephemeral.typing[conversationId]
@@ -72,7 +71,7 @@ export default Vue.extend({
     }
   },
   computed: {
-    user() {
+    user(): User {
       return (
         this.users?.[this.userId] || {
           did: this.userId,
@@ -81,6 +80,9 @@ export default Vue.extend({
         }
       )
     },
+    status(): UserStatus {
+      return this.userStatus[this.userId] || 'offline'
+    },
     imageSource(): string {
       return this.user?.photoHash
         ? this.$Config.ipfs.gateway + this.user.photoHash
@@ -88,36 +90,6 @@ export default Vue.extend({
     },
   },
 })
-
-const status = reactive({ data: iridium.users.userStatus })
-
-const userStatus: Ref<UserStatus> = computed(() => {
-  if (props.user.did === iridium.connector?.id) return 'online'
-
-  return status.data[props.user.did] || 'offline'
-})
-
-const state: Ref<UserStatus | 'typing'> = computed(() => {
-  if (props.isTyping) return 'typing'
-
-  return userStatus.value
-})
-
-const finalMask: Ref<string> = computed(() => {
-  if (
-    state.value === 'online' ||
-    state.value === 'offline' ||
-    state.value === 'busy' ||
-    state.value === 'away'
-  )
-    return 'circle'
-
-  return state.value
-})
-
-const imageSource: Ref<string> = computed(() => {
-  return props.user.photoHash ? Config.ipfs.gateway + props.user.photoHash : ''
-})
 </script>
 
 <style scoped lang="less" src="./State.less"></style>
diff --git a/components/views/chat/chatbar/footer/connected/Connected.vue b/components/views/chat/chatbar/footer/connected/Connected.vue
index 1394769a0f..89300b4837 100644
--- a/components/views/chat/chatbar/footer/connected/Connected.vue
+++ b/components/views/chat/chatbar/footer/connected/Connected.vue
@@ -47,7 +47,9 @@ export default Vue.extend({
       return this.participants.filter((p) => p.did !== iridium.connector?.id)
     },
     onlineParticipants(): UserType[] {
-      return this.otherParticipants.filter((p) => p.status === 'online')
+      return this.otherParticipants.filter(
+        (p) => this.userStatus[p.did] === 'online',
+      )
     },
     /**
      * @method participantsText
diff --git a/components/views/media/heading/Heading.vue b/components/views/media/heading/Heading.vue
index 12f4c77660..c8b61f3ef1 100644
--- a/components/views/media/heading/Heading.vue
+++ b/components/views/media/heading/Heading.vue
@@ -2,6 +2,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import { MaximizeIcon, MinimizeIcon } from 'satellite-lucide-icons'
 import iridium from '~/libraries/Iridium/IridiumManager'
 
 export default Vue.extend({
@@ -9,12 +10,6 @@ export default Vue.extend({
     MaximizeIcon,
     MinimizeIcon,
   },
-  props: {
-    isFullscreen: {
-      type: Boolean,
-      required: true,
-    },
-  },
   data() {
     return {
       webrtc: iridium.webRTC.state,
diff --git a/components/views/navigation/mobile/toolbar/Toolbar.vue b/components/views/navigation/mobile/toolbar/Toolbar.vue
index bd791dff4b..69b142ae26 100644
--- a/components/views/navigation/mobile/toolbar/Toolbar.vue
+++ b/components/views/navigation/mobile/toolbar/Toolbar.vue
@@ -11,7 +11,6 @@ import {
 
 import { mapGetters } from 'vuex'
 import iridium from '~/libraries/Iridium/IridiumManager'
-import Group from '~/libraries/Iridium/groups/Group'
 import { TrackKind } from '~/libraries/WebRTC/types'
 import { Conversation } from '~/libraries/Iridium/chat/types'
 import { GroupMemberDetails } from '~/libraries/Iridium/groups/types'
@@ -29,6 +28,7 @@ export default Vue.extend({
   data() {
     return {
       users: iridium.users.state,
+      userStatus: iridium.users.userStatus,
       groups: iridium.groups.state,
       isGroupInviteVisible: false,
       webrtc: iridium.webRTC.state,
@@ -74,11 +74,10 @@ export default Vue.extend({
     enableRTC(): boolean {
       if (this.isGroup) {
         const memberIds = this.groupMembers.map((m) => m.id)
-        return memberIds
-          .map((id) => this.users[id])
-          .some((u) => u.status === 'online')
+        return memberIds.some((id) => this.userStatus[id] === 'online')
       }
-      return (this.details as User | undefined)?.status === 'online'
+      const did = (this.details as User)?.did
+      return ((did && this.userStatus[did]) ?? null) === 'online'
     },
   },
   methods: {
diff --git a/components/views/navigation/sidebar/live/Live.vue b/components/views/navigation/sidebar/live/Live.vue
index bc2b4879d6..92e9b09be4 100644
--- a/components/views/navigation/sidebar/live/Live.vue
+++ b/components/views/navigation/sidebar/live/Live.vue
@@ -20,6 +20,7 @@ export default Vue.extend({
     return {
       webrtc: iridium.webRTC,
       users: iridium.users.state,
+      userStatus: iridium.users.userStatus,
       groups: iridium.groups.state,
       chat: iridium.chat.state,
     }
@@ -74,14 +75,15 @@ export default Vue.extend({
         const memberIds = this.groupMembers.map((m) => m.id)
         return Object.values(this.users).some(
           (friend: Friend) =>
-            memberIds.includes(friend.did) && friend.status === 'online',
+            memberIds.includes(friend.did) &&
+            this.userStatus[friend.did].status === 'online',
         )
       }
       // Check current recipient is on the user's friends list
       const friend = Object.values(this.users).find(
         (f) => f.did === (this.details as User)?.did,
       )
-      return friend?.status === 'online'
+      return this.userStatus[friend?.did]?.status === 'online'
     },
   },
   methods: {
diff --git a/components/views/navigation/toolbar/Toolbar.vue b/components/views/navigation/toolbar/Toolbar.vue
index 4581cf7ca8..1bf1ac8388 100644
--- a/components/views/navigation/toolbar/Toolbar.vue
+++ b/components/views/navigation/toolbar/Toolbar.vue
@@ -17,9 +17,9 @@ import { searchRecommend } from '~/mock/search'
 import { SearchQueryItem } from '~/types/search/search'
 import { ModalWindows } from '~/store/ui/types'
 import { TrackKind } from '~/libraries/WebRTC/types'
-import type { Friend, User } from '~/libraries/Iridium/friends/types'
 import { RootState } from '~/types/store/store'
 import { Conversation } from '~/libraries/Iridium/chat/types'
+import { User } from '~/libraries/Iridium/users/types'
 
 export default Vue.extend({
   components: {
@@ -61,31 +61,34 @@ export default Vue.extend({
     conversationId(): Conversation['id'] | undefined {
       return this.$route.params.id
     },
-    isActiveCall() {
+    isActiveCall(): boolean {
       return this.webrtc.activeCall?.callId === this.conversationId
     },
-    conversation(): Conversation {
-      return this.chat.conversations[this.conversationId]
+    conversation(): Conversation | undefined {
+      return (
+        (this.conversationId && this.chat.conversations[this.conversationId]) ||
+        undefined
+      )
     },
     isGroup(): boolean {
-      return this.conversation?.participants.length > 2
+      return (this.conversation?.participants || []).length > 2
     },
     details(): User | Conversation {
-      if (this.isGroup) {
+      if (this.isGroup && this.conversationId) {
         return this.chat.conversations[this.conversationId]
       }
       const friendDid = this.conversation?.participants.find(
         (f: string) => f !== iridium.connector?.id,
       ) as string
-      return this.users[friendDid]
+      return this.users[friendDid] as User
     },
     members(): User[] {
       if (!this.conversation) {
         return []
       }
-      return this.conversation.participants.map((did) => {
+      return (this.conversation?.participants || []).map((did) => {
         return iridium.users.getUser(did)
-      })
+      }) as User[]
     },
     subtitleText(): string {
       if (!this.details) {
@@ -102,13 +105,14 @@ export default Vue.extend({
       if (this.isGroup) {
         const memberIds = this.members.map((m) => m.did)
         return Object.values(this.users).some(
-          (friend: Friend) =>
+          (friend: User) =>
             memberIds.includes(friend.did) &&
             this.userStatus[friend.did] === 'online',
         )
       }
+      const did = (this.details as User).did
       // Check current recipient is on the user's friends list
-      return this.details?.status === 'online'
+      return this.userStatus[did] === 'online'
     },
     callTooltipText(): string {
       if (this.isGroup) {
@@ -165,7 +169,7 @@ export default Vue.extend({
         return
       }
       try {
-        await iridium.webRTC.call(this.details as User, kinds)
+        await iridium.webRTC.call(this.details as any, kinds)
       } catch (e: any) {
         this.$toast.error(this.$t(e.message) as string)
       }
diff --git a/libraries/Iridium/users/UsersManager.ts b/libraries/Iridium/users/UsersManager.ts
index 56bb2dc64b..77632bf7bf 100644
--- a/libraries/Iridium/users/UsersManager.ts
+++ b/libraries/Iridium/users/UsersManager.ts
@@ -78,7 +78,7 @@ export default class UsersManager extends Emitter<IridiumUserPubsub> {
     setInterval(() => {
       this.list.forEach(async (user: User) => {
         if (
-          user.status === 'online' &&
+          this.userStatus[user.did] === 'online' &&
           Number(user.seen) < Date.now() - 1000 * 30
         ) {
           logger.info(this.loggerTag, 'user timed out', user)
diff --git a/libraries/Iridium/webrtc/WebRTCManager.ts b/libraries/Iridium/webrtc/WebRTCManager.ts
index 9d6f4efbcc..53a534b416 100644
--- a/libraries/Iridium/webrtc/WebRTCManager.ts
+++ b/libraries/Iridium/webrtc/WebRTCManager.ts
@@ -197,7 +197,7 @@ export default class WebRTCManager extends Emitter {
 
   private onPeerAnnounce(from: string, payload: WebRTCAnnounceMessage) {
     const requestFriend = this.iridium.users.getUser(from)
-
+    console.info('peer announced', { from, requestFriend, payload })
     if (!requestFriend) return
 
     this.iridium.users.setUserStatus(