Merge pull request #220 from status-im/eth-dm-clean-up

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - **Breaking**: Auto select peer if none provided for store and light push protocols.
 - Upgrade to `libp2p@0.31.7` and `libp2p-gossipsub@0.10.0` to avoid `TextEncoder` errors in ReactJS tests.
+- Disable keep alive by default as latest nim-waku release does not support ping protocol.
 
 ### Fixed
 - Disable `keepAlive` if set to `0`.

examples/eth-dm/src/App.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 import './App.css';
 import { Waku } from 'js-waku';
 import { ethers } from 'ethers';
-import { Web3Provider } from '@ethersproject/providers';
+import { Signer } from '@ethersproject/abstract-signer';
 import { KeyPair } from './crypto';
 import { Message } from './messaging/Messages';
 import 'fontsource-roboto';
@@ -52,12 +52,18 @@ const useStyles = makeStyles({
     flex: 1,
     margin: '10px',
   },
-  wakuStatus: {},
+  wakuStatus: {
+    marginRight: theme.spacing(2),
+  },
+  title: {
+    flexGrow: 1,
+  },
+  peers: {},
 });
 
 function App() {
   const [waku, setWaku] = useState<Waku>();
-  const [provider, setProvider] = useState<Web3Provider>();
+  const [signer, setSigner] = useState<Signer>();
   const [ethDmKeyPair, setEthDmKeyPair] = useState<KeyPair | undefined>();
   const [publicKeys, setPublicKeys] = useState<Map<string, string>>(new Map());
   const [messages, setMessages] = useState<Message[]>([]);
@@ -66,36 +72,37 @@ function App() {
   const classes = useStyles();
 
   useEffect(() => {
-    if (provider) return;
     try {
-      window.ethereum.request({ method: 'eth_requestAccounts' });
+      window.ethereum
+        .request({ method: 'eth_requestAccounts' })
+        .then((accounts: string[]) => {
           const _provider = new ethers.providers.Web3Provider(window.ethereum);
-      setProvider(_provider);
+          setAddress(accounts[0]);
+          setSigner(_provider.getSigner());
+        });
     } catch (e) {
       console.error('No web3 provider available');
     }
-  }, [provider]);
+  }, [address, signer]);
 
-  useEffect(() => {
-    provider
-      ?.getSigner()
-      .getAddress()
-      .then((address) => setAddress(address));
-  });
-
-  let peers;
+  let peers = 0;
   if (waku) {
     peers = waku.libp2p.connectionManager.connections.size;
   }
 
+  let addressDisplay = '';
+  if (address) {
+    addressDisplay =
+      address.substr(0, 6) + '...' + address.substr(address.length - 4, 4);
+  }
+
   return (
     <ThemeProvider theme={theme}>
       <div className={classes.root}>
         <AppBar className={classes.appBar} position="static">
           <Toolbar>
-            <Typography>Ethereum Direct Message</Typography>
             <IconButton
-              edge="end"
+              edge="start"
               className={classes.wakuStatus}
               aria-label="waku-status"
             >
@@ -104,7 +111,13 @@ function App() {
                 style={waku ? { color: green[500] } : {}}
               />
             </IconButton>
-            <Typography>{peers}</Typography>
+            <Typography className={classes.peers} aria-label="connected-peers">
+              {peers} peer{peers && peers > 1 ? 's' : ''}
+            </Typography>
+            <Typography variant="h6" className={classes.title}>
+              Ethereum Direct Message
+            </Typography>
+            <Typography>{addressDisplay}</Typography>
           </Toolbar>
         </AppBar>
 
@@ -125,7 +138,7 @@ function App() {
                 setEthDmKeyPair={(keyPair) => setEthDmKeyPair(keyPair)}
               />
               <BroadcastPublicKey
-                signer={provider?.getSigner()}
+                signer={signer}
                 ethDmKeyPair={ethDmKeyPair}
                 waku={waku}
               />

examples/eth-dm/src/InitWaku.tsx

@@ -1,13 +1,9 @@
 import { Dispatch, SetStateAction, useEffect } from 'react';
 import { Environment, getStatusFleetNodes, Waku, WakuMessage } from 'js-waku';
-import {
-  bytesToHexStr,
-  decode,
-  DirectMessage,
-  PublicKeyMessage,
-} from './messaging/wire';
+import { decode, DirectMessage, PublicKeyMessage } from './messaging/wire';
 import { decryptMessage, KeyPair, validatePublicKeyMessage } from './crypto';
 import { Message } from './messaging/Messages';
+import { byteArrayToHex } from './utils';
 
 export const PublicKeyContentTopic = '/eth-dm/1/public-key/proto';
 export const DirectMessageContentTopic = '/eth-dm/1/direct-message/json';
@@ -106,12 +102,7 @@ async function initWaku(): Promise<Waku> {
 }
 
 function getNodes() {
-  // Works with react-scripts
-  if (process?.env?.NODE_ENV === 'development') {
-    return getStatusFleetNodes(Environment.Test);
-  } else {
   return getStatusFleetNodes(Environment.Prod);
-  }
 }
 
 function handlePublicKeyMessage(
@@ -123,7 +114,7 @@ function handlePublicKeyMessage(
   if (!msg.payload) return;
   const publicKeyMsg = PublicKeyMessage.decode(msg.payload);
   if (!publicKeyMsg) return;
-  const ethDmPublicKey = bytesToHexStr(publicKeyMsg.ethDmPublicKey);
+  const ethDmPublicKey = byteArrayToHex(publicKeyMsg.ethDmPublicKey);
   if (ethDmPublicKey === myPublicKey) return;
 
   const res = validatePublicKeyMessage(publicKeyMsg);
@@ -131,7 +122,7 @@ function handlePublicKeyMessage(
 
   if (res) {
     setter((prevPks: Map<string, string>) => {
-      prevPks.set(bytesToHexStr(publicKeyMsg.ethAddress), ethDmPublicKey);
+      prevPks.set(byteArrayToHex(publicKeyMsg.ethAddress), ethDmPublicKey);
       return new Map(prevPks);
     });
   }

examples/eth-dm/src/crypto.ts

@@ -3,11 +3,8 @@ import '@ethersproject/shims';
 import * as EthCrypto from 'eth-crypto';
 import { ethers } from 'ethers';
 import { Signer } from '@ethersproject/abstract-signer';
-import {
-  bytesToHexStr,
-  DirectMessage,
-  PublicKeyMessage,
-} from './messaging/wire';
+import { DirectMessage, PublicKeyMessage } from './messaging/wire';
+import { byteArrayToHex, hexToBuf } from './utils';
 
 export interface KeyPair {
   privateKey: string;
@@ -33,21 +30,15 @@ export async function createPublicKeyMessage(
   ethDmPublicKey: string
 ): Promise<PublicKeyMessage> {
   const ethAddress = await web3Signer.getAddress();
-  const bytesEthDmPublicKey = Buffer.from(
-    ethDmPublicKey.replace(/0x/, ''),
-    'hex'
-  );
+  const bytesEthDmPublicKey = hexToBuf(ethDmPublicKey);
   const signature = await web3Signer.signMessage(
     formatPublicKeyForSignature(bytesEthDmPublicKey)
   );
 
-  const bytesEthAddress = Buffer.from(ethAddress.replace(/0x/, ''), 'hex');
-  const bytesSignature = Buffer.from(signature.replace(/0x/, ''), 'hex');
-
   return new PublicKeyMessage({
     ethDmPublicKey: bytesEthDmPublicKey,
-    ethAddress: bytesEthAddress,
-    signature: bytesSignature,
+    ethAddress: hexToBuf(ethAddress),
+    signature: hexToBuf(signature),
   });
 }
 
@@ -58,7 +49,7 @@ export function validatePublicKeyMessage(msg: PublicKeyMessage): boolean {
   const formattedMsg = formatPublicKeyForSignature(msg.ethDmPublicKey);
   try {
     const sigAddress = ethers.utils.verifyMessage(formattedMsg, msg.signature);
-    const sigAddressBytes = Buffer.from(sigAddress.replace(/0x/, ''), 'hex');
+    const sigAddressBytes = hexToBuf(sigAddress);
     // Compare the actual byte arrays instead of strings that may differ in casing or prefixing.
     const cmp = sigAddressBytes.compare(new Buffer(msg.ethAddress));
     console.log(
@@ -86,7 +77,7 @@ export function validatePublicKeyMessage(msg: PublicKeyMessage): boolean {
  */
 function formatPublicKeyForSignature(ethDmPublicKey: Uint8Array): string {
   return JSON.stringify({
-    ethDmPublicKey: bytesToHexStr(ethDmPublicKey),
+    ethDmPublicKey: byteArrayToHex(ethDmPublicKey),
   });
 }
 

examples/eth-dm/src/messaging/wire.ts

@@ -56,11 +56,6 @@ export class PublicKeyMessage {
   }
 }
 
-export function bytesToHexStr(bytes: Uint8Array): string {
-  const buf = new Buffer(bytes);
-  return buf.toString('hex');
-}
-
 /**
  * Direct Encrypted Message used for private communication over the Waku network.
  */

examples/eth-dm/src/utils.ts

@@ -0,0 +1,8 @@
+export function byteArrayToHex(bytes: Uint8Array): string {
+  const buf = new Buffer(bytes);
+  return buf.toString('hex');
+}
+
+export function hexToBuf(str: string): Buffer {
+  return Buffer.from(str.replace(/0x/, ''), 'hex');
+}

src/lib/waku.ts

@@ -76,7 +76,7 @@ export class Waku {
     this.lightPush = lightPush;
     this.keepAliveTimers = {};
 
-    const keepAlive = options.keepAlive !== undefined ? options.keepAlive : 10;
+    const keepAlive = options.keepAlive !== undefined ? options.keepAlive : 0;
 
     if (keepAlive !== 0) {
       libp2p.connectionManager.on('peer:connect', (connection: Connection) => {

src/lib/waku_relay/index.ts

@@ -114,7 +114,7 @@ export class WakuRelay extends Gossipsub {
    */
   public async send(message: WakuMessage): Promise<void> {
     const msg = message.encode();
-    await super.publish(this.pubsubTopic, Buffer.from(msg));
+    await super.publish(this.pubsubTopic, new Buffer(msg));
   }
 
   /**