Load community key from env (#175)

.gitignore

@@ -2,6 +2,7 @@ dist
 node_modules
 yarn-error.log
 .DS_Store
+.env
 build
 cache
 

packages/react-chat-example/package.json

@@ -9,7 +9,7 @@
     "clean:all": "yarn clean && rimraf node_modules/",
     "clean": "rimraf dist/",
     "build": "rm -rf dist && webpack --mode=production --env ENV=production",
-    "start": "webpack serve --mode=development --env ENV=development --https",
+    "start": "webpack serve --mode=development --env ENV=$ENV COMMUNITY_KEY=$COMMUNITY_KEY --https",
     "fix": "run-s 'fix:*'",
     "fix:prettier": "prettier './{src,test}/**/*.{ts,tsx}' \"./*.json\" --write",
     "fix:lint": "eslint './{src,test}/**/*.{ts,tsx}' --fix",

packages/react-chat-example/src/index.tsx

@@ -75,9 +75,10 @@ function DragDiv() {
         <FloatingDiv className={showChat ? "" : "hide"}>
           <ReactChat
             theme={theme ? lightTheme : darkTheme}
-            communityKey={
-              "0x03c07c5a31d5a662b670a9caaccd131bb2cfad0659bcc031205f22d5788b97e3d2"
-            }
+            config={{
+              communityKey: process.env.COMMUNITY_KEY ?? "",
+              environment: process.env.ENV ?? "",
+            }}
             fetchMetadata={fetchMetadata}
           />
         </FloatingDiv>

packages/react-chat-example/webpack.config.js

@@ -5,10 +5,8 @@ const webpack = require('webpack');
 const { ESBuildMinifyPlugin } = require('esbuild-loader');
 
 module.exports = env => {
-  let environment = 'development';
-  if (env.ENV) {
-    environment = env.ENV;
-  }
+  const environment = env.ENV || 'development';
+  const communityKey = env.COMMUNITY_KEY || '';
 
   return {
     entry: './src/index.tsx',
@@ -71,6 +69,7 @@ module.exports = env => {
       }),
       new webpack.DefinePlugin({
         'process.env.ENV': JSON.stringify(environment),
+        'process.env.COMMUNITY_KEY': JSON.stringify(communityKey),
       }),
       new webpack.ProvidePlugin({
         process: 'process/browser.js',

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

@@ -11,17 +11,13 @@ import {
 import { Chat } from "./Chat";
 import { IdentityLoader } from "./Form/IdentityLoader";
 
-interface ChatLoaderProps {
-  communityKey: string;
-}
-
-export function ChatLoader({ communityKey }: ChatLoaderProps) {
+export function ChatLoader() {
   const [userCreationState] = useUserCreationState();
 
   if (userCreationState === UserCreationState.NotCreating)
     return (
       <IdentityProvider>
-        <MessengerProvider communityKey={communityKey}>
+        <MessengerProvider>
           <ChatStateProvider>
             <Chat />
           </ChatStateProvider>

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

@@ -2,7 +2,9 @@ import React, { useRef } from "react";
 import { ThemeProvider } from "styled-components";
 import styled from "styled-components";
 
+import { ConfigType } from "..";
 import { ActivityProvider } from "../contexts/activityProvider";
+import { ConfigProvider } from "../contexts/configProvider";
 import { FetchMetadataProvider } from "../contexts/fetchMetadataProvider";
 import { ModalProvider } from "../contexts/modalProvider";
 import { NarrowProvider } from "../contexts/narrowProvider";
@@ -16,36 +18,34 @@ import { ChatLoader } from "./ChatLoader";
 
 interface ReactChatProps {
   theme: Theme;
-  communityKey: string;
+  config: ConfigType;
   fetchMetadata?: (url: string) => Promise<Metadata | undefined>;
 }
 
-export function ReactChat({
-  theme,
-  communityKey,
-  fetchMetadata,
-}: ReactChatProps) {
+export function ReactChat({ theme, config, fetchMetadata }: ReactChatProps) {
   const ref = useRef<HTMLHeadingElement>(null);
   return (
-    <ThemeProvider theme={theme}>
-      <NarrowProvider myRef={ref}>
-        <FetchMetadataProvider fetchMetadata={fetchMetadata}>
-          <ModalProvider>
-            <ActivityProvider>
-              <UserCreationStateProvider>
-                <ToastProvider>
-                  <Wrapper ref={ref}>
-                    <GlobalStyle />
-                    <ChatLoader communityKey={communityKey} />
-                    <div id="modal-root" />
-                  </Wrapper>
-                </ToastProvider>
-              </UserCreationStateProvider>
-            </ActivityProvider>
-          </ModalProvider>
-        </FetchMetadataProvider>
-      </NarrowProvider>
-    </ThemeProvider>
+    <ConfigProvider config={config}>
+      <ThemeProvider theme={theme}>
+        <NarrowProvider myRef={ref}>
+          <FetchMetadataProvider fetchMetadata={fetchMetadata}>
+            <ModalProvider>
+              <ActivityProvider>
+                <UserCreationStateProvider>
+                  <ToastProvider>
+                    <Wrapper ref={ref}>
+                      <GlobalStyle />
+                      <ChatLoader />
+                      <div id="modal-root" />
+                    </Wrapper>
+                  </ToastProvider>
+                </UserCreationStateProvider>
+              </ActivityProvider>
+            </ModalProvider>
+          </FetchMetadataProvider>
+        </NarrowProvider>
+      </ThemeProvider>
+    </ConfigProvider>
   );
 }
 

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

@@ -0,0 +1,24 @@
+import React, { createContext, useContext } from "react";
+
+export type ConfigType = {
+  communityKey: string;
+  environment: string;
+};
+
+const ConfigContext = createContext<ConfigType>({
+  communityKey: "",
+  environment: "production",
+});
+
+export function useConfig() {
+  return useContext(ConfigContext);
+}
+
+type ConfigProviderProps = {
+  children: React.ReactNode;
+  config: ConfigType;
+};
+
+export function ConfigProvider({ children, config }: ConfigProviderProps) {
+  return <ConfigContext.Provider value={config} children={children} />;
+}

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

@@ -37,15 +37,11 @@ export function useMessengerContext() {
 
 interface MessengerProviderProps {
   children: React.ReactNode;
-  communityKey?: string;
 }
 
-export function MessengerProvider({
-  children,
-  communityKey,
-}: MessengerProviderProps) {
+export function MessengerProvider({ children }: MessengerProviderProps) {
   const identity = useIdentity();
   const nickname = useNickname();
-  const messenger = useMessenger(communityKey, identity, nickname);
+  const messenger = useMessenger(identity, nickname);
   return <MessengerContext.Provider value={messenger} children={children} />;
 }

packages/react-chat/src/hooks/messenger/useMessenger.ts

@@ -8,6 +8,7 @@ import {
   Messenger,
 } from "status-communities/dist/cjs";
 
+import { useConfig } from "../../contexts/configProvider";
 import { ChannelData, ChannelsData } from "../../models/ChannelData";
 import { ChatMessage } from "../../models/ChatMessage";
 import { CommunityData } from "../../models/CommunityData";
@@ -49,9 +50,10 @@ export type MessengerType = {
 };
 
 function useCreateMessenger(identity: Identity | undefined) {
+  const { environment } = useConfig();
   const [messenger, setMessenger] = useState<Messenger | undefined>(undefined);
   useEffect(() => {
-    createMessenger(identity).then((e) => {
+    createMessenger(identity, environment).then((e) => {
       setMessenger(e);
     });
   }, [identity]);
@@ -98,10 +100,10 @@ function useCreateCommunity(
 }
 
 export function useMessenger(
-  communityKey: string | undefined,
   identity: Identity | undefined,
   nickname: string | undefined
 ) {
+  const { communityKey } = useConfig();
   const [activeChannel, setActiveChannel] = useState<ChannelData>({
     id: "",
     name: "",

packages/react-chat/src/index.ts

@@ -1,4 +1,4 @@
 import { ReactChat } from "./components/ReactChat";
+import { ConfigType } from "./contexts/configProvider";
 import { darkTheme, lightTheme } from "./styles/themes";
-
-export { ReactChat, lightTheme, darkTheme };
+export { ReactChat, lightTheme, darkTheme, ConfigType };

packages/react-chat/src/utils/createMessenger.ts

@@ -1,18 +1,33 @@
-import { StoreCodec } from "js-waku";
+import { getBootstrapNodes, StoreCodec } from "js-waku";
 import { Identity, Messenger } from "status-communities/dist/cjs";
 
-const WAKU_OPTIONS = {
-  libp2p: {
-    config: {
-      pubsub: {
-        enabled: true,
-        emitSelf: true,
+function createWakuOptions(env: string) {
+  let bootstrap: any = true;
+  if (env === "test") {
+    bootstrap = getBootstrapNodes.bind({}, [
+      "fleets",
+      "wakuv2.test",
+      "waku-websocket",
+    ]);
+  }
+  return {
+    bootstrap,
+    libp2p: {
+      config: {
+        pubsub: {
+          enabled: true,
+          emitSelf: true,
+        },
       },
     },
-  },
-};
+  };
+}
 
-export async function createMessenger(identity: Identity | undefined) {
+export async function createMessenger(
+  identity: Identity | undefined,
+  env: string
+) {
+  const WAKU_OPTIONS = createWakuOptions(env);
   const messenger = await Messenger.create(identity, WAKU_OPTIONS);
   await new Promise((resolve) => {
     messenger.waku.libp2p.peerStore.on("change:protocols", ({ protocols }) => {

packages/status-communities/src/groupChats.ts

@@ -436,6 +436,7 @@ export class GroupChats {
           await this.waku.store.queryHistory([member.topic], {
             timeFilter: { startTime, endTime },
             callback: (msg) => _callback(msg, member.id),
+            decryptionKeys: [member.symKey],
           })
         ).length;
         amountOfMessages.push(msgLength);