Load community key from env (#175)

This commit is contained in:
Szymon Szlachtowicz 2022-01-05 13:51:12 +01:00 committed by GitHub
parent 8a0ac14413
commit e03b020397
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 94 additions and 59 deletions

1
.gitignore vendored
View File

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

View File

@ -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",

View File

@ -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>

View File

@ -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',

View File

@ -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>

View File

@ -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>
);
}

View File

@ -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} />;
}

View File

@ -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} />;
}

View File

@ -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: "",

View File

@ -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 };

View File

@ -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 }) => {

View File

@ -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);