Remove InitWaku component

There was an issue where the observers are added/removed continously.
This is due to using `useEffect` on props.

By removing this component then `useEffect` ends only being called when
 waku changes, ie, at initialisation.

examples/eth-dm/src/App.tsx

@@ -10,7 +10,6 @@ import { Message } from './messaging/Messages';
 import 'fontsource-roboto';
 import { AppBar, IconButton, Toolbar, Typography } from '@material-ui/core';
 import KeyPairHandling from './key_pair_handling/KeyPairHandling';
-import InitWaku from './InitWaku';
 import {
   createMuiTheme,
   ThemeProvider,
@@ -20,6 +19,13 @@ import { teal, purple, green } from '@material-ui/core/colors';
 import WifiIcon from '@material-ui/icons/Wifi';
 import BroadcastPublicKey from './BroadcastPublicKey';
 import Messaging from './messaging/Messaging';
+import {
+  DirectMessageContentTopic,
+  handleDirectMessage,
+  handlePublicKeyMessage,
+  initWaku,
+  PublicKeyContentTopic,
+} from './waku';
 
 declare let window: any;
 
@@ -71,6 +77,61 @@ function App() {
 
   const classes = useStyles();
 
+  // Waku initialization
+  useEffect(() => {
+    if (waku) return;
+    initWaku()
+      .then((_waku) => {
+        console.log('waku: ready');
+        setWaku(_waku);
+      })
+      .catch((e) => {
+        console.error('Failed to initiate Waku', e);
+      });
+  }, [waku]);
+
+  const observerPublicKeyMessage = handlePublicKeyMessage.bind(
+    {},
+    ethDmKeyPair?.publicKey,
+    setPublicKeys
+  );
+
+  const observerDirectMessage =
+    ethDmKeyPair && address
+      ? handleDirectMessage.bind(
+          {},
+          setMessages,
+          ethDmKeyPair.privateKey,
+          address
+        )
+      : undefined;
+
+  useEffect(() => {
+    if (!waku) return;
+    waku.relay.addObserver(observerPublicKeyMessage, [PublicKeyContentTopic]);
+
+    return function cleanUp() {
+      if (!waku) return;
+      waku.relay.deleteObserver(observerPublicKeyMessage, [
+        PublicKeyContentTopic,
+      ]);
+    };
+  }, [waku]);
+
+  useEffect(() => {
+    if (!waku) return;
+    if (!observerDirectMessage) return;
+    waku.relay.addObserver(observerDirectMessage, [DirectMessageContentTopic]);
+
+    return function cleanUp() {
+      if (!waku) return;
+      if (!observerDirectMessage) return;
+      waku.relay.deleteObserver(observerDirectMessage, [
+        DirectMessageContentTopic,
+      ]);
+    };
+  }, [waku]);
+
   useEffect(() => {
     try {
       window.ethereum
@@ -123,14 +184,6 @@ function App() {
 
         <div className={classes.container}>
           <main className={classes.main}>
-            <InitWaku
-              ethDmKeyPair={ethDmKeyPair}
-              setMessages={setMessages}
-              setPublicKeys={setPublicKeys}
-              setWaku={setWaku}
-              waku={waku}
-              address={address}
-            />
             <fieldset>
               <legend>Eth-DM Key Pair</legend>
               <KeyPairHandling

examples/eth-dm/src/BroadcastPublicKey.tsx

@@ -4,7 +4,7 @@ import { createPublicKeyMessage, KeyPair } from './crypto';
 import { PublicKeyMessage } from './messaging/wire';
 import { WakuMessage, Waku } from 'js-waku';
 import { Signer } from '@ethersproject/abstract-signer';
-import { PublicKeyContentTopic } from './InitWaku';
+import { PublicKeyContentTopic } from './waku';
 
 interface Props {
   ethDmKeyPair: KeyPair | undefined;

examples/eth-dm/src/messaging/SendMessage.tsx

@@ -10,7 +10,7 @@ import React, { ChangeEvent, useState, KeyboardEvent } from 'react';
 import { Waku, WakuMessage } from 'js-waku';
 import { DirectMessage, encode } from './wire';
 import { encryptMessage } from '../crypto';
-import { DirectMessageContentTopic } from '../InitWaku';
+import { DirectMessageContentTopic } from '../waku';
 
 const useStyles = makeStyles((theme) => ({
   formControl: {

examples/eth-dm/src/waku.ts

@@ -8,87 +8,7 @@ import { byteArrayToHex } from './utils';
 export const PublicKeyContentTopic = '/eth-dm/1/public-key/proto';
 export const DirectMessageContentTopic = '/eth-dm/1/direct-message/json';
 
-interface Props {
-  waku: Waku | undefined;
-  setWaku: (waku: Waku) => void;
-  ethDmKeyPair: KeyPair | undefined;
-  setPublicKeys: Dispatch<SetStateAction<Map<string, string>>>;
-  setMessages: Dispatch<SetStateAction<Message[]>>;
-  address: string | undefined;
-}
-
-/**
- * Does all the waku initialization
- */
-export default function InitWaku({
-  waku,
-  setWaku,
-  ethDmKeyPair,
-  setPublicKeys,
-  setMessages,
-  address,
-}: Props) {
-  useEffect(() => {
-    if (waku) return;
-    initWaku()
-      .then((wakuNode) => {
-        console.log('waku: ready');
-        setWaku(wakuNode);
-      })
-      .catch((e) => {
-        console.error('Failed to initiate Waku', e);
-      });
-  }, [waku, setWaku]);
-
-  const observerPublicKeyMessage = handlePublicKeyMessage.bind(
-    {},
-    ethDmKeyPair?.publicKey,
-    setPublicKeys
-  );
-
-  const observerDirectMessage =
-    ethDmKeyPair && address
-      ? handleDirectMessage.bind(
-          {},
-          setMessages,
-          ethDmKeyPair.privateKey,
-          address
-        )
-      : undefined;
-
-  useEffect(() => {
-    if (!waku) return;
-    waku.relay.addObserver(observerPublicKeyMessage, [PublicKeyContentTopic]);
-
-    return function cleanUp() {
-      if (!waku) return;
-      waku.relay.deleteObserver(observerPublicKeyMessage, [
-        PublicKeyContentTopic,
-      ]);
-    };
-  });
-
-  useEffect(() => {
-    if (!waku) return;
-    if (!observerDirectMessage) return;
-    waku.relay.addObserver(observerDirectMessage, [DirectMessageContentTopic]);
-
-    return function cleanUp() {
-      if (!waku) return;
-      if (!observerDirectMessage) return;
-      waku.relay.deleteObserver(observerDirectMessage, [
-        DirectMessageContentTopic,
-      ]);
-    };
-  });
-
-  // Returns an empty fragment.
-  // Taking advantages of React's state management and useEffect()
-  // Not sure it is best practice but it works.
-  return <></>;
-}
-
-async function initWaku(): Promise<Waku> {
+export async function initWaku(): Promise<Waku> {
   const waku = await Waku.create({});
 
   const nodes = await getNodes();
@@ -105,7 +25,7 @@ function getNodes() {
   return getStatusFleetNodes(Environment.Prod);
 }
 
-function handlePublicKeyMessage(
+export function handlePublicKeyMessage(
   myPublicKey: string | undefined,
   setter: Dispatch<SetStateAction<Map<string, string>>>,
   msg: WakuMessage
@@ -128,7 +48,7 @@ function handlePublicKeyMessage(
   }
 }
 
-async function handleDirectMessage(
+export async function handleDirectMessage(
   setter: Dispatch<SetStateAction<Message[]>>,
   privateKey: string,
   address: string,