W3iContext

W3i Context

This is the central context provider for Web3Inbox, that for the most part just observers the Observables that W3i Proxy generates on demand.

The context provider lives under src/contexts/W3iContext/index.tsx, the context's state shape is declared in src/contexts/W3iContext/context.tsx.

Shape

interface W3iContextState {
  chatClientProxy: W3iChatClient | null
  registeredKey: string | null
  refreshThreadsAndInvites: () => void
  setUserPubkey: Dispatch<SetStateAction<string | undefined>>
  activeSubscriptions: PushClientTypes.PushSubscription[]
  sentInvites: ChatClientTypes.SentInvite[]
  threads: ChatClientTypes.Thread[]
  invites: ChatClientTypes.ReceivedInvite[]
  userPubkey?: string
  disconnect: () => void
  pushClientProxy: W3iPushClient | null
  registerMessage: string | null
  chatProvider: string
  pushProvider: string
  uiEnabled: UiEnabled
}

As seen in the interface, the context provides all the data required from the proxies as well the proxies themselves for convenience.

Reactivity

All state exposed from the interface is continuously updated through event based observers, for example:

    const pushSubscriptionSub = pushClient.observe('push_subscription', {
      next: refreshPushState
    })
    ...
    return () => {
      ...
      pushSubscriptionSub.unsubscribe()
      ...
    }

Data flow

Data flow in w3i flows is bi-directional:

UI -> Provider

UI (Eg: Button) -> Proxy Object Provided through Context (eg: pushClientProxy) -> Provider (Eg: ExternalPushProvider) -> Communicator [if external] (Eg: AndroidCommunicator) -> Platform internals (Eg: the W3I-Sdk written in Kotlin)

Provider -> UI

Platform -> Proxy (Eg: window.web3inbox.chat.postMessage) -> Provider (Eg: ExternalChatProvider)

External Event Flow

Platform -> Proxy (Eg: window.web3inbox.chat.postMessage) -> Provider (Eg: ExternalChatProvider) -> W3iContext