Move messaging components to module

examples/eth-dm/src/App.tsx

@@ -2,21 +2,19 @@ import '@ethersproject/shims';
 
 import React, { useEffect, useState } from 'react';
 import './App.css';
-import { Waku, WakuMessage } from 'js-waku';
+import { Waku } from 'js-waku';
 import { ethers } from 'ethers';
 import { Web3Provider } from '@ethersproject/providers';
-import { createPublicKeyMessage, KeyPair } from './crypto';
+import { KeyPair } from './crypto';
-import { encode, PublicKeyMessage } from './messages';
+import Messages, { Message } from './messaging/Messages';
-import Messages, { Message } from './Messages';
 import 'fontsource-roboto';
 import {
   AppBar,
-  Button,
   IconButton,
   Toolbar,
   Typography,
 } from '@material-ui/core';
-import SendMessage from './SendMessage';
+import SendMessage from './messaging/SendMessage';
 import KeyPairHandling from './key_pair_handling/KeyPairHandling';
 import InitWaku from './InitWaku';
 import {
@@ -26,9 +24,7 @@ import {
 } from '@material-ui/core/styles';
 import { teal, purple, green } from '@material-ui/core/colors';
 import WifiIcon from '@material-ui/icons/Wifi';
-
+import BroadcastPublicKey from './BroadcastPublicKey';
-export const PublicKeyContentTopic = '/eth-dm/1/public-key/json';
-export const DirectMessageContentTopic = '/eth-dm/1/direct-message/json';
 
 declare let window: any;
 
@@ -68,7 +64,6 @@ function App() {
   const [waku, setWaku] = useState<Waku>();
   const [provider, setProvider] = useState<Web3Provider>();
   const [ethDmKeyPair, setEthDmKeyPair] = useState<KeyPair | undefined>();
-  const [publicKeyMsg, setPublicKeyMsg] = useState<PublicKeyMessage>();
   const [publicKeys, setPublicKeys] = useState<Map<string, string>>(new Map());
   const [messages, setMessages] = useState<Message[]>([]);
   const [address, setAddress] = useState<string>();
@@ -93,31 +88,6 @@ function App() {
       .then((address) => setAddress(address));
   });
 
-  const broadcastPublicKey = () => {
-    if (!ethDmKeyPair) return;
-    if (!provider) return;
-    if (!waku) return;
-
-    if (publicKeyMsg) {
-      const wakuMsg = encodePublicKeyWakuMessage(publicKeyMsg);
-      waku.lightPush.push(wakuMsg).catch((e) => {
-        console.error('Failed to send Public Key Message', e);
-      });
-    } else {
-      createPublicKeyMessage(provider.getSigner(), ethDmKeyPair.publicKey)
-        .then((msg) => {
-          setPublicKeyMsg(msg);
-          const wakuMsg = encodePublicKeyWakuMessage(msg);
-          waku.lightPush.push(wakuMsg).catch((e) => {
-            console.error('Failed to send Public Key Message', e);
-          });
-        })
-        .catch((e) => {
-          console.error('Failed to creat Eth-Dm Publication message', e);
-        });
-    }
-  };
-
   return (
     <ThemeProvider theme={theme}>
       <div className={classes.root}>
@@ -153,14 +123,11 @@ function App() {
                 ethDmKeyPair={ethDmKeyPair}
                 setEthDmKeyPair={(keyPair) => setEthDmKeyPair(keyPair)}
               />
-              <Button
+              <BroadcastPublicKey
-                variant="contained"
+                signer={provider?.getSigner()}
-                color="primary"
+                ethDmKeyPair={ethDmKeyPair}
-                onClick={broadcastPublicKey}
+                waku={waku}
-                disabled={!ethDmKeyPair || !waku}
+              />
-              >
-                Broadcast Eth-DM Public Key
-              </Button>
             </fieldset>
             <fieldset>
               <legend>Messaging</legend>
@@ -175,8 +142,3 @@ function App() {
 }
 
 export default App;
-
-function encodePublicKeyWakuMessage(ethDmMsg: PublicKeyMessage): WakuMessage {
-  const payload = encode(ethDmMsg);
-  return WakuMessage.fromBytes(payload, PublicKeyContentTopic);
-}

examples/eth-dm/src/BroadcastPublicKey.tsx

@@ -0,0 +1,62 @@
+import { Button } from '@material-ui/core';
+import React, { useState } from 'react';
+import { createPublicKeyMessage, KeyPair } from './crypto';
+import { encode, PublicKeyMessage } from './messaging/wire';
+import { WakuMessage, Waku } from 'js-waku';
+import { Signer } from '@ethersproject/abstract-signer';
+import { PublicKeyContentTopic } from './InitWaku';
+
+interface Props {
+  ethDmKeyPair: KeyPair | undefined;
+  waku: Waku | undefined;
+  signer: Signer | undefined;
+}
+
+export default function BroadcastPublicKey({
+  signer,
+  ethDmKeyPair,
+  waku,
+}: Props) {
+  const [publicKeyMsg, setPublicKeyMsg] = useState<PublicKeyMessage>();
+
+  const broadcastPublicKey = () => {
+    if (!ethDmKeyPair) return;
+    if (!signer) return;
+    if (!waku) return;
+
+    if (publicKeyMsg) {
+      const wakuMsg = encodePublicKeyWakuMessage(publicKeyMsg);
+      waku.lightPush.push(wakuMsg).catch((e) => {
+        console.error('Failed to send Public Key Message', e);
+      });
+    } else {
+      createPublicKeyMessage(signer, ethDmKeyPair.publicKey)
+        .then((msg) => {
+          setPublicKeyMsg(msg);
+          const wakuMsg = encodePublicKeyWakuMessage(msg);
+          waku.lightPush.push(wakuMsg).catch((e) => {
+            console.error('Failed to send Public Key Message', e);
+          });
+        })
+        .catch((e) => {
+          console.error('Failed to creat Eth-Dm Publication message', e);
+        });
+    }
+  };
+
+  return (
+    <Button
+      variant="contained"
+      color="primary"
+      onClick={broadcastPublicKey}
+      disabled={!ethDmKeyPair || !waku}
+    >
+      Broadcast Eth-DM Public Key
+    </Button>
+  );
+}
+
+function encodePublicKeyWakuMessage(ethDmMsg: PublicKeyMessage): WakuMessage {
+  const payload = encode(ethDmMsg);
+  return WakuMessage.fromBytes(payload, PublicKeyContentTopic);
+}

examples/eth-dm/src/InitWaku.tsx

@@ -1,9 +1,11 @@
 import { Dispatch, SetStateAction, useEffect } from 'react';
 import { Environment, getStatusFleetNodes, Waku, WakuMessage } from 'js-waku';
-import { decode, DirectMessage, PublicKeyMessage } from './messages';
+import { decode, DirectMessage, PublicKeyMessage } from './messaging/wire';
 import { decryptMessage, KeyPair, validatePublicKeyMessage } from './crypto';
-import { Message } from './Messages';
+import { Message } from './messaging/Messages';
-import { DirectMessageContentTopic, PublicKeyContentTopic } from './App';
+
+export const PublicKeyContentTopic = '/eth-dm/1/public-key/json';
+export const DirectMessageContentTopic = '/eth-dm/1/direct-message/json';
 
 interface Props {
   waku: Waku | undefined;

examples/eth-dm/src/crypto.ts

@@ -3,7 +3,7 @@ import '@ethersproject/shims';
 import * as EthCrypto from 'eth-crypto';
 import { ethers } from 'ethers';
 import { Signer } from '@ethersproject/abstract-signer';
-import { DirectMessage, PublicKeyMessage } from './messages';
+import { DirectMessage, PublicKeyMessage } from './messaging/wire';
 
 export interface KeyPair {
   privateKey: string;

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

@@ -1,3 +1,6 @@
+/**
+ * Clear text message
+ */
 export interface Message {
   text: string;
   timestamp: Date;

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

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