diff --git a/packages/status-react/src/protocol/provider.tsx b/packages/status-react/src/protocol/provider.tsx
new file mode 100644
index 00000000..d10206f1
--- /dev/null
+++ b/packages/status-react/src/protocol/provider.tsx
@@ -0,0 +1,37 @@
+import React, { createContext, useContext, useMemo } from 'react'
+
+import type { Config } from '~/src/types/config'
+// import { createClient } from '@status-im/core'
+// import type { Client } from '@status-im/core'
+
+interface ClientContext {
+  client: Config
+}
+
+const Context = createContext<ClientContext | undefined>(undefined)
+
+export function useClient() {
+  const context = useContext(Context)
+
+  if (!context) {
+    throw new Error(`useClient must be used within a ClientProvider`)
+  }
+
+  return context
+}
+
+interface ClientProviderProps {
+  config: Config
+  children: React.ReactNode
+}
+
+export const ClientProvider = (props: ClientProviderProps) => {
+  const { config, children } = props
+
+  const client = useMemo(() => {
+    // return createClient({ ...config })
+    return { client: config }
+  }, [config])
+
+  return <Context.Provider value={client}>{children}</Context.Provider>
+}
diff --git a/packages/status-react/src/protocol/use-channels.tsx b/packages/status-react/src/protocol/use-channels.tsx
new file mode 100644
index 00000000..874a25b2
--- /dev/null
+++ b/packages/status-react/src/protocol/use-channels.tsx
@@ -0,0 +1,5 @@
+import { useClient } from './provider'
+
+export const useChannels = () => {
+  const client = useClient()
+}
diff --git a/packages/status-react/src/protocol/use-chat.tsx b/packages/status-react/src/protocol/use-chat.tsx
new file mode 100644
index 00000000..e3ad413f
--- /dev/null
+++ b/packages/status-react/src/protocol/use-chat.tsx
@@ -0,0 +1,16 @@
+interface Chat {
+  type: 'channel' | 'group-chat' | 'chat'
+}
+
+const chats: Record<string, Chat> = {
+  welcome: { type: 'channel' },
+  general: { type: 'channel' },
+  random: { type: 'channel' },
+  'vitalik.eth': { type: 'chat' },
+  'pvl.eth': { type: 'chat' },
+  'Climate Change': { type: 'group-chat' },
+}
+
+export const useChat = (id: string) => {
+  return chats[id]
+}
diff --git a/packages/status-react/src/protocol/use-chats.tsx b/packages/status-react/src/protocol/use-chats.tsx
new file mode 100644
index 00000000..1aa14292
--- /dev/null
+++ b/packages/status-react/src/protocol/use-chats.tsx
@@ -0,0 +1,9 @@
+import { useClient } from './provider'
+
+interface Chat {
+  type: 'channel' | 'group-chat' | 'chat'
+}
+
+export const useChats = (id: string) => {
+  const client = useClient()
+}
diff --git a/packages/status-react/src/protocol/use-community.tsx b/packages/status-react/src/protocol/use-community.tsx
new file mode 100644
index 00000000..d97c4519
--- /dev/null
+++ b/packages/status-react/src/protocol/use-community.tsx
@@ -0,0 +1,11 @@
+export const useCommunity = () => {
+  return {
+    name: 'CryptoKitties',
+    description: 'A community of cat lovers, meow!',
+    publicKey: '0x2Ef1907d50926...6cEbd975aC5E0Ba',
+    imageUrl:
+      'https://images.unsplash.com/photo-1592194996308-7b43878e84a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80',
+    membersCount: 182,
+    requestNeeded: true,
+  }
+}
diff --git a/packages/status-react/src/protocol/use-contacts.tsx b/packages/status-react/src/protocol/use-contacts.tsx
new file mode 100644
index 00000000..95e0da19
--- /dev/null
+++ b/packages/status-react/src/protocol/use-contacts.tsx
@@ -0,0 +1,3 @@
+export const useContacts = () => {
+  return []
+}
diff --git a/packages/status-react/src/protocol/use-members.tsx b/packages/status-react/src/protocol/use-members.tsx
new file mode 100644
index 00000000..b1a89be1
--- /dev/null
+++ b/packages/status-react/src/protocol/use-members.tsx
@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from 'react'
+
+import { useClient } from './provider'
+
+interface State {
+  fetching: boolean
+  stale: boolean
+  data?: any
+  error?: Error
+}
+
+export const useMembers = (): State => {
+  const isMounted = useRef(true)
+  const client = useClient()
+
+  const [state, setState] = useState<State>({
+    fetching: false,
+    stale: false,
+    data: undefined,
+    error: undefined,
+  })
+
+  useEffect(() => {
+    isMounted.current = true
+    return () => {
+      isMounted.current = false
+    }
+  }, [])
+
+  return state
+}
diff --git a/packages/status-react/src/protocol/use-profile.tsx b/packages/status-react/src/protocol/use-profile.tsx
new file mode 100644
index 00000000..722f5211
--- /dev/null
+++ b/packages/status-react/src/protocol/use-profile.tsx
@@ -0,0 +1,8 @@
+export const useProfile = () => {
+  return {
+    name: 'Satoshi',
+    publicKey: '71C7656EC7ab88b098defB751B7401B5f6d8976F',
+    imageUrl:
+      'https://images.unsplash.com/photo-1546776310-eef45dd6d63c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1620&q=80',
+  }
+}