Fix the dependencies

examples/eth-dm/src/App.tsx

@@ -77,61 +77,6 @@ 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
@@ -146,6 +91,62 @@ function App() {
     }
   }, [address, signer]);
 
+  // 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]);
+
+  useEffect(() => {
+    if (!waku) return;
+    if (!address) return;
+
+    const observerPublicKeyMessage = handlePublicKeyMessage.bind(
+      {},
+      address,
+      setPublicKeys
+    );
+
+    waku.relay.addObserver(observerPublicKeyMessage, [PublicKeyContentTopic]);
+
+    return function cleanUp() {
+      if (!waku) return;
+      waku.relay.deleteObserver(observerPublicKeyMessage, [
+        PublicKeyContentTopic,
+      ]);
+    };
+  }, [waku, address]);
+
+  useEffect(() => {
+    if (!waku) return;
+    if (!ethDmKeyPair) return;
+    if (!address) return;
+
+    const observerDirectMessage = handleDirectMessage.bind(
+      {},
+      setMessages,
+      ethDmKeyPair.privateKey,
+      address
+    );
+
+    waku.relay.addObserver(observerDirectMessage, [DirectMessageContentTopic]);
+
+    return function cleanUp() {
+      if (!waku) return;
+      if (!observerDirectMessage) return;
+      waku.relay.deleteObserver(observerDirectMessage, [
+        DirectMessageContentTopic,
+      ]);
+    };
+  }, [waku, address, ethDmKeyPair]);
+
   let peers = 0;
   if (waku) {
     peers = waku.libp2p.connectionManager.connections.size;

examples/eth-dm/src/utils.ts

@@ -6,3 +6,24 @@ export function byteArrayToHex(bytes: Uint8Array): string {
 export function hexToBuf(str: string): Buffer {
   return Buffer.from(str.replace(/0x/, ''), 'hex');
 }
+
+export function equalByteArrays(
+  a: Uint8Array | Buffer | string,
+  b: Uint8Array | Buffer | string
+): boolean {
+  let aBuf: Buffer;
+  let bBuf: Buffer;
+  if (typeof a === 'string') {
+    aBuf = hexToBuf(a);
+  } else {
+    aBuf = Buffer.from(a);
+  }
+
+  if (typeof b === 'string') {
+    bBuf = hexToBuf(b);
+  } else {
+    bBuf = Buffer.from(b);
+  }
+
+  return aBuf.compare(bBuf) === 0;
+}

examples/eth-dm/src/waku.ts

@@ -1,9 +1,9 @@
-import { Dispatch, SetStateAction, useEffect } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 import { Environment, getStatusFleetNodes, Waku, WakuMessage } from 'js-waku';
 import { decode, DirectMessage, PublicKeyMessage } from './messaging/wire';
-import { decryptMessage, KeyPair, validatePublicKeyMessage } from './crypto';
+import { decryptMessage, validatePublicKeyMessage } from './crypto';
 import { Message } from './messaging/Messages';
-import { byteArrayToHex } from './utils';
+import { byteArrayToHex, equalByteArrays } from './utils';
 
 export const PublicKeyContentTopic = '/eth-dm/1/public-key/proto';
 export const DirectMessageContentTopic = '/eth-dm/1/direct-message/json';
@@ -26,7 +26,7 @@ function getNodes() {
 }
 
 export function handlePublicKeyMessage(
-  myPublicKey: string | undefined,
+  myAddress: string,
   setter: Dispatch<SetStateAction<Map<string, string>>>,
   msg: WakuMessage
 ) {
@@ -35,7 +35,8 @@ export function handlePublicKeyMessage(
   const publicKeyMsg = PublicKeyMessage.decode(msg.payload);
   if (!publicKeyMsg) return;
   const ethDmPublicKey = byteArrayToHex(publicKeyMsg.ethDmPublicKey);
-  if (ethDmPublicKey === myPublicKey) return;
+  console.log(ethDmPublicKey, myAddress);
+  if (myAddress && equalByteArrays(publicKeyMsg.ethAddress, myAddress)) return;
 
   const res = validatePublicKeyMessage(publicKeyMsg);
   console.log('Is Public Key Message valid?', res);