Add identity provider (#117)

packages/react-chat/src/components/Chat.tsx

@@ -1,5 +1,4 @@
 import React, { useMemo, useState } from "react";
-import { Identity } from "status-communities/dist/cjs";
 import styled from "styled-components";
 
 import { useMessengerContext } from "../contexts/messengerProvider";
@@ -15,11 +14,7 @@ import { CommunityModal } from "./Modals/CommunityModal";
 import { EditModal } from "./Modals/EditModal";
 import { CommunitySkeleton } from "./Skeleton/CommunitySkeleton";
 
-interface ChatProps {
-  identity: Identity;
-}
-
-export function Chat({ identity }: ChatProps) {
+export function Chat() {
   const [showMembers, setShowMembers] = useState(true);
   const [showChannels, setShowChannels] = useState(true);
   const [membersList, setMembersList] = useState([]);
@@ -72,7 +67,6 @@ export function Chat({ identity }: ChatProps) {
 
       {!createChat && (
         <ChatBody
-          identity={identity}
           onClick={() => setShowMembers(!showMembers)}
           showMembers={showMembers}
           community={communityData}
@@ -88,14 +82,12 @@ export function Chat({ identity }: ChatProps) {
       )}
       {showMembers && !narrow && !createChat && (
         <Members
-          identity={identity}
           setShowChannels={setShowChannels}
           setMembersList={setMembersList}
         />
       )}
       {createChat && communityData && (
         <ChatCreation
-          identity={identity}
           community={communityData}
           setMembersList={setMembersList}
           setGroupList={setGroupList}

packages/react-chat/src/components/Chat/ChatBody.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { Identity } from "status-communities/dist/cjs";
 import styled from "styled-components";
 
 import { useMessengerContext } from "../../contexts/messengerProvider";
@@ -21,7 +20,6 @@ import { ChatInput } from "./ChatInput";
 import { ChatMessages } from "./ChatMessages";
 
 interface ChatBodyProps {
-  identity: Identity;
   community: CommunityData | undefined;
   onClick: () => void;
   showMembers: boolean;
@@ -36,7 +34,6 @@ interface ChatBodyProps {
 }
 
 export function ChatBody({
-  identity,
   community,
   onClick,
   showMembers,
@@ -78,7 +75,6 @@ export function ChatBody({
     <ChatBodyWrapper className={className}>
       {editGroup && community ? (
         <ChatCreation
-          identity={identity}
           community={community}
           setMembersList={setMembersList}
           setGroupList={setGroupList}
@@ -170,7 +166,6 @@ export function ChatBody({
           )}
           {showMembersList && narrow && (
             <NarrowMembers
-              identity={identity}
               community={community}
               setShowChannels={setShowChannelsList}
               setShowMembersList={setShowMembersList}

packages/react-chat/src/components/Chat/ChatCreation.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
-import { Identity } from "status-communities/dist/cjs";
 import { bufToHex } from "status-communities/dist/cjs/utils";
 import styled from "styled-components";
 
+import { useIdentity } from "../../contexts/identityProvider";
 import { useMessengerContext } from "../../contexts/messengerProvider";
 import { CommunityData } from "../../models/CommunityData";
 import { buttonStyles } from "../Buttons/buttonStyle";
@@ -11,7 +11,6 @@ import { Member } from "../Members/Member";
 import { SearchBlock } from "../SearchBlock";
 import { textMediumStyles } from "../Text";
 interface ChatCreationProps {
-  identity: Identity;
   community: CommunityData;
   setMembersList: any;
   setGroupList: any;
@@ -20,13 +19,13 @@ interface ChatCreationProps {
 }
 
 export function ChatCreation({
-  identity,
   community,
   setMembersList,
   setGroupList,
   setCreateChat,
   editGroup,
 }: ChatCreationProps) {
+  const identity = useIdentity();
   const [query, setQuery] = useState("");
   const [styledGroup, setStyledGroup] = useState<string[]>([]);
 

packages/react-chat/src/components/ChatLoader.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { Identity } from "status-communities/dist/cjs";
 
+import { IdentityProvider } from "../contexts/identityProvider";
 import { MessengerProvider } from "../contexts/messengerProvider";
 
 import { Chat } from "./Chat";
@@ -15,9 +16,11 @@ export function ChatLoader({ communityKey }: ChatLoaderProps) {
 
   if (identity) {
     return (
+      <IdentityProvider identity={identity}>
         <MessengerProvider identity={identity} communityKey={communityKey}>
-        <Chat identity={identity} />
+          <Chat />
         </MessengerProvider>
+      </IdentityProvider>
     );
   } else {
     return <IdentityLoader setIdentity={setIdentity} />;

packages/react-chat/src/components/Members/Members.tsx

@@ -1,25 +1,18 @@
 import React from "react";
-import { Identity } from "status-communities/dist/cjs";
 import styled from "styled-components";
 
 import { MembersList } from "./MembersList";
 
 interface MembersProps {
-  identity: Identity;
   setShowChannels: (val: boolean) => void;
   setMembersList: any;
 }
 
-export function Members({
-  identity,
-  setShowChannels,
-  setMembersList,
-}: MembersProps) {
+export function Members({ setShowChannels, setMembersList }: MembersProps) {
   return (
     <MembersWrapper>
       <MemberHeading>Members</MemberHeading>
       <MembersList
-        identity={identity}
         setShowChannels={setShowChannels}
         setMembersList={setMembersList}
       />

packages/react-chat/src/components/Members/MembersList.tsx

@@ -1,27 +1,27 @@
 import React from "react";
-import { Identity, utils } from "status-communities/dist/cjs";
+import { utils } from "status-communities/dist/cjs";
 import { bufToHex } from "status-communities/dist/cjs/utils";
 import styled from "styled-components";
 
+import { useIdentity } from "../../contexts/identityProvider";
 import { useMessengerContext } from "../../contexts/messengerProvider";
 import { UserIcon } from "../Icons/UserIcon";
 
 import { Member, MemberData, MemberIcon } from "./Member";
 
 interface MembersListProps {
-  identity: Identity;
   setShowChannels: (val: boolean) => void;
   setShowMembers?: (val: boolean) => void;
   setMembersList: any;
 }
 
 export function MembersList({
-  identity,
   setShowChannels,
   setShowMembers,
   setMembersList,
 }: MembersListProps) {
   const { contacts } = useMessengerContext();
+  const identity = useIdentity();
 
   return (
     <MembersListWrap>

packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { Identity } from "status-communities/dist/cjs";
 import styled from "styled-components";
 
 import { CommunityData } from "../../models/CommunityData";
@@ -8,7 +7,6 @@ import { MembersList } from "../Members/MembersList";
 import { NarrowTopbar } from "./NarrowTopbar";
 
 interface NarrowMembersProps {
-  identity: Identity;
   community: CommunityData;
   setShowChannels: (val: boolean) => void;
   setShowMembersList: (val: boolean) => void;
@@ -16,7 +14,6 @@ interface NarrowMembersProps {
 }
 
 export function NarrowMembers({
-  identity,
   community,
   setShowChannels,
   setShowMembersList,
@@ -26,7 +23,6 @@ export function NarrowMembers({
     <ListWrapper>
       <NarrowTopbar list="Community members" community={community.name} />
       <MembersList
-        identity={identity}
         setShowChannels={setShowChannels}
         setShowMembers={setShowMembersList}
         setMembersList={setMembersList}

packages/react-chat/src/contexts/identityProvider.tsx

@@ -0,0 +1,20 @@
+import React, { createContext, useContext } from "react";
+import { Identity } from "status-communities/dist/cjs";
+
+const IdentityContext = createContext(new Identity(new Uint8Array()));
+
+export function useIdentity() {
+  return useContext(IdentityContext);
+}
+
+interface IdentityProviderProps {
+  children: React.ReactNode;
+  identity: Identity;
+}
+
+export function IdentityProvider({
+  children,
+  identity,
+}: IdentityProviderProps) {
+  return <IdentityContext.Provider value={identity} children={children} />;
+}