Merge pull request #75 from waku-org/upgrade-js-waku-eth-pm

eth-pm/README.md

@@ -5,7 +5,8 @@
 - Private Messaging
 - React/TypeScript
 - Waku Light Push
-- Signature with Web3
+- Waku Filter
+- Signature with Web3 (EIP-712, sign typed data)
 - Asymmetric Encryption
 - Symmetric Encryption
 

eth-pm/config/webpack.extend.js

@@ -1,60 +0,0 @@
-const webpack = require('webpack');
-
-module.exports = {
-  dev: (config) => {
-    // Override webpack 5 config from react-scripts to load polyfills
-    if (!config.resolve) config.resolve = {};
-    if (!config.resolve.fallback) config.resolve.fallback = {};
-    Object.assign(config.resolve.fallback, {
-      buffer: require.resolve('buffer'),
-      crypto: false,
-      stream: require.resolve('stream-browserify'),
-    });
-
-    if (!config.plugins) config.plugins = [];
-    config.plugins.push(
-      new webpack.DefinePlugin({
-        'process.env.ENV': JSON.stringify('dev'),
-      })
-    );
-    config.plugins.push(
-      new webpack.ProvidePlugin({
-        process: 'process/browser.js',
-        Buffer: ['buffer', 'Buffer'],
-      })
-    );
-
-    if (!config.ignoreWarnings) config.ignoreWarnings = [];
-    config.ignoreWarnings.push(/Failed to parse source map/);
-
-    return config;
-  },
-  prod: (config) => {
-    // Override webpack 5 config from react-scripts to load polyfills
-    if (!config.resolve) config.resolve = {};
-    if (!config.resolve.fallback) config.resolve.fallback = {};
-    Object.assign(config.resolve.fallback, {
-      buffer: require.resolve('buffer'),
-      crypto: false,
-      stream: require.resolve('stream-browserify'),
-    });
-
-    if (!config.plugins) config.plugins = [];
-    config.plugins.push(
-      new webpack.DefinePlugin({
-        'process.env.ENV': JSON.stringify('prod'),
-      })
-    );
-    config.plugins.push(
-      new webpack.ProvidePlugin({
-        process: 'process/browser.js',
-        Buffer: ['buffer', 'Buffer'],
-      })
-    );
-
-    if (!config.ignoreWarnings) config.ignoreWarnings = [];
-    config.ignoreWarnings.push(/Failed to parse source map/);
-
-    return config;
-  },
-};

eth-pm/package.json

@@ -2,25 +2,24 @@
   "name": "eth-pm",
   "version": "0.1.0",
   "private": true,
-  "homepage": "/examples/eth-pm",
+  "homepage": "/eth-pm",
   "dependencies": {
-    "@ethersproject/providers": "^5.6.8",
+    "@ethersproject/abstract-signer": "5.7.0",
+    "@ethersproject/providers": "5.7.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
-    "eth-sig-util": "^3.0.1",
-    "ethers": "^5.5.4",
+    "ethers": "5.7.0",
     "fontsource-roboto": "^4.0.0",
-    "js-waku": "^0.24.0",
+    "js-waku": "0.24.0-cdd0752",
     "protobufjs": "^6.11.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "uint8arrays": "^3.1.0"
   },
   "scripts": {
-    "start": "cra-webpack-rewired start",
-    "build": "run-s build:*",
-    "build:react": "cra-webpack-rewired build",
-    "eject": "cra-webpack-rewired eject",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "eject": "react-scripts eject",
     "fix": "run-s fix:*",
     "test": "run-s build test:*",
     "test:lint": "eslint src --ext .ts --ext .tsx",
@@ -55,16 +54,11 @@
     "@types/node": "^17.0.19",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
-    "assert": "^2.0.0",
-    "buffer": "^6.0.3",
-    "cra-webpack-rewired": "^1.0.1",
     "cspell": "^6.0.0",
     "eslint": "^8.9.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.5.1",
-    "process": "^0.11.10",
     "react-scripts": "5.0.0",
-    "stream-browserify": "^3.0.0",
     "typescript": "^4.5.5"
   }
 }

eth-pm/src/App.tsx

@@ -26,6 +26,7 @@ import {
 } from "./waku";
 import { Web3Provider } from "@ethersproject/providers/src.ts/web3-provider";
 import ConnectWallet from "./ConnectWallet";
+import { waku_message } from "js-waku";
 
 const theme = createMuiTheme({
   palette: {
@@ -77,10 +78,10 @@ function App() {
   const [messages, setMessages] = useState<Message[]>([]);
   const [address, setAddress] = useState<string>();
   const [peerStats, setPeerStats] = useState<{
-    relayPeers: number;
+    filterPeers: number;
     lightPushPeers: number;
   }>({
-    relayPeers: 0,
+    filterPeers: 0,
     lightPushPeers: 0,
   });
 
@@ -88,15 +89,15 @@ function App() {
 
   // Waku initialization
   useEffect(() => {
-    if (waku) return;
-    initWaku()
-      .then((_waku) => {
-        console.log("waku: ready");
-        setWaku(_waku);
-      })
-      .catch((e) => {
-        console.error("Failed to initiate Waku", e);
-      });
+    (async () => {
+      if (waku) return;
+
+      const _waku = await initWaku();
+      console.log("waku: ready");
+      setWaku(_waku);
+    })().catch((e) => {
+      console.error("Failed to initiate Waku", e);
+    });
   }, [waku]);
 
   useEffect(() => {
@@ -108,16 +109,34 @@ function App() {
       setPublicKeys
     );
 
-    waku.relay.addDecryptionKey(PublicKeyMessageEncryptionKey);
-    waku.relay.addObserver(observerPublicKeyMessage, [PublicKeyContentTopic]);
+    let unsubscribe: undefined | (() => Promise<void>);
+
+    waku.filter.addDecryptionKey(PublicKeyMessageEncryptionKey, {
+      method: waku_message.DecryptionMethod.Symmetric,
+      contentTopics: [PublicKeyContentTopic],
+    });
+    waku.filter
+      .subscribe(observerPublicKeyMessage, [PublicKeyContentTopic])
+      .then(
+        (_unsubscribe) => {
+          console.log("subscribed to ", PublicKeyContentTopic);
+          unsubscribe = _unsubscribe;
+        },
+        (e) => {
+          console.error("Failed to subscribe", e);
+        }
+      );
 
     return function cleanUp() {
       if (!waku) return;
-
-      waku.relay.deleteDecryptionKey(PublicKeyMessageEncryptionKey);
-      waku.relay.deleteObserver(observerPublicKeyMessage, [
-        PublicKeyContentTopic,
-      ]);
+      waku.filter.deleteDecryptionKey(PublicKeyMessageEncryptionKey);
+      if (typeof unsubscribe === "undefined") return;
+      unsubscribe().then(
+        () => {
+          console.log("unsubscribed to ", PublicKeyContentTopic);
+        },
+        (e) => console.error("Failed to unsubscribe", e)
+      );
     };
   }, [waku, address]);
 
@@ -125,13 +144,16 @@ function App() {
     if (!waku) return;
     if (!encryptionKeyPair) return;
 
-    waku.relay.addDecryptionKey(encryptionKeyPair.privateKey);
+    waku.filter.addDecryptionKey(encryptionKeyPair.privateKey, {
+      method: waku_message.DecryptionMethod.Asymmetric,
+      contentTopics: [PrivateMessageContentTopic],
+    });
 
     return function cleanUp() {
       if (!waku) return;
       if (!encryptionKeyPair) return;
 
-      waku.relay.deleteDecryptionKey(encryptionKeyPair.privateKey);
+      waku.filter.deleteDecryptionKey(encryptionKeyPair.privateKey);
     };
   }, [waku, encryptionKeyPair]);
 
@@ -146,16 +168,23 @@ function App() {
       address
     );
 
-    waku.relay.addObserver(observerPrivateMessage, [
-      PrivateMessageContentTopic,
-    ]);
+    let unsubscribe: undefined | (() => Promise<void>);
+
+    waku.filter
+      .subscribe(observerPrivateMessage, [PrivateMessageContentTopic])
+      .then(
+        (_unsubscribe) => {
+          unsubscribe = _unsubscribe;
+        },
+        (e) => {
+          console.error("Failed to subscribe", e);
+        }
+      );
 
     return function cleanUp() {
       if (!waku) return;
-      if (!observerPrivateMessage) return;
-      waku.relay.deleteObserver(observerPrivateMessage, [
-        PrivateMessageContentTopic,
-      ]);
+      if (typeof unsubscribe === "undefined") return;
+      unsubscribe().catch((e) => console.error("Failed to unsubscribe", e));
     };
   }, [waku, address, encryptionKeyPair]);
 
@@ -163,15 +192,12 @@ function App() {
     if (!waku) return;
 
     const interval = setInterval(async () => {
-      let lightPushPeers = 0;
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      for await (const _peer of waku.store.peers) {
-        lightPushPeers++;
-      }
+      const lightPushPeers = await waku.store.peers();
+      const filterPeers = await waku.filter.peers();
 
       setPeerStats({
-        relayPeers: waku.relay.getPeers().size,
-        lightPushPeers,
+        filterPeers: filterPeers.length,
+        lightPushPeers: lightPushPeers.length,
       });
     }, 1000);
     return () => clearInterval(interval);
@@ -199,7 +225,7 @@ function App() {
               />
             </IconButton>
             <Typography className={classes.peers} aria-label="connected-peers">
-              Peers: {peerStats.relayPeers} relay, {peerStats.lightPushPeers}{" "}
+              Peers: {peerStats.filterPeers} filter, {peerStats.lightPushPeers}{" "}
               light push
             </Typography>
             <Typography variant="h6" className={classes.title}>
@@ -228,7 +254,7 @@ function App() {
                 address={address}
                 EncryptionKeyPair={encryptionKeyPair}
                 waku={waku}
-                providerRequest={provider?.provider?.request}
+                signer={provider?.getSigner()}
               />
             </fieldset>
             <fieldset>

eth-pm/src/BroadcastPublicKey.tsx

@@ -8,21 +8,20 @@ import {
 import { PublicKeyMessage } from "./messaging/wire";
 import { WakuMessage, Waku } from "js-waku";
 import { PublicKeyContentTopic } from "./waku";
+import type { TypedDataSigner } from "@ethersproject/abstract-signer";
 
 interface Props {
   EncryptionKeyPair: KeyPair | undefined;
   waku: Waku | undefined;
   address: string | undefined;
-  providerRequest:
-    | ((request: { method: string; params?: Array<any> }) => Promise<any>)
-    | undefined;
+  signer: TypedDataSigner | undefined;
 }
 
 export default function BroadcastPublicKey({
   EncryptionKeyPair,
   waku,
   address,
-  providerRequest,
+  signer,
 }: Props) {
   const [publicKeyMsg, setPublicKeyMsg] = useState<PublicKeyMessage>();
 
@@ -30,7 +29,7 @@ export default function BroadcastPublicKey({
     if (!EncryptionKeyPair) return;
     if (!address) return;
     if (!waku) return;
-    if (!providerRequest) return;
+    if (!signer) return;
 
     if (publicKeyMsg) {
       encodePublicKeyWakuMessage(publicKeyMsg)
@@ -43,11 +42,7 @@ export default function BroadcastPublicKey({
           console.log("Failed to encode Public Key Message in Waku Message", e);
         });
     } else {
-      createPublicKeyMessage(
-        address,
-        EncryptionKeyPair.publicKey,
-        providerRequest
-      )
+      createPublicKeyMessage(address, EncryptionKeyPair.publicKey, signer)
         .then((msg) => {
           setPublicKeyMsg(msg);
           encodePublicKeyWakuMessage(msg)
@@ -77,7 +72,7 @@ export default function BroadcastPublicKey({
       variant="contained"
       color="primary"
       onClick={broadcastPublicKey}
-      disabled={!EncryptionKeyPair || !waku || !address || !providerRequest}
+      disabled={!EncryptionKeyPair || !waku || !address || !signer}
     >
       Broadcast Encryption Public Key
     </Button>

eth-pm/src/ConnectWallet.tsx

@@ -11,17 +11,14 @@ interface Props {
 }
 
 export default function ConnectWallet({ setAddress, setProvider }: Props) {
-  const connectWallet = () => {
+  const connectWallet = async () => {
     try {
-      window.ethereum
-        .request({ method: "eth_requestAccounts" })
-        .then((accounts: string[]) => {
-          const _provider = new ethers.providers.Web3Provider(window.ethereum);
-          setAddress(accounts[0]);
-          setProvider(_provider);
-        });
+      const provider = new ethers.providers.Web3Provider(window.ethereum);
+      const accounts = await provider.send("eth_requestAccounts", []);
+      setAddress(accounts[0]);
+      setProvider(provider);
     } catch (e) {
-      console.error("No web3 provider available");
+      console.error("No web3 provider available", e);
     }
   };
 

eth-pm/src/crypto.ts

@@ -2,13 +2,13 @@ import "@ethersproject/shims";
 
 import { PublicKeyMessage } from "./messaging/wire";
 import { generatePrivateKey, getPublicKey, utils } from "js-waku";
-import * as sigUtil from "eth-sig-util";
 import { PublicKeyContentTopic } from "./waku";
-import { keccak256 } from "ethers/lib/utils";
+import { keccak256, _TypedDataEncoder, recoverAddress } from "ethers/lib/utils";
 import { equals } from "uint8arrays/equals";
+import type { TypedDataSigner } from "@ethersproject/abstract-signer";
 
 export const PublicKeyMessageEncryptionKey = utils.hexToBytes(
-  keccak256(Buffer.from(PublicKeyContentTopic, "utf-8"))
+  keccak256(utils.utf8ToBytes(PublicKeyContentTopic))
 );
 
 export interface KeyPair {
@@ -33,15 +33,12 @@ export async function generateEncryptionKeyPair(): Promise<KeyPair> {
 export async function createPublicKeyMessage(
   address: string,
   encryptionPublicKey: Uint8Array,
-  providerRequest: (request: {
-    method: string;
-    params?: Array<any>;
-  }) => Promise<any>
+  signer: TypedDataSigner
 ): Promise<PublicKeyMessage> {
   const signature = await signEncryptionKey(
     encryptionPublicKey,
     address,
-    providerRequest
+    signer
   );
 
   console.log("Asking wallet to sign Public Key Message");
@@ -55,12 +52,12 @@ export async function createPublicKeyMessage(
 }
 
 function buildMsgParams(encryptionPublicKey: Uint8Array, fromAddress: string) {
-  return JSON.stringify({
+  return {
     domain: {
       name: "Ethereum Private Message over Waku",
       version: "1",
     },
-    message: {
+    value: {
       message:
         "By signing this message you certify that messages addressed to `ownerAddress` must be encrypted with `encryptionPublicKey`",
       encryptionPublicKey: utils.bytesToHex(encryptionPublicKey),
@@ -69,35 +66,26 @@ function buildMsgParams(encryptionPublicKey: Uint8Array, fromAddress: string) {
     // Refers to the keys of the *types* object below.
     primaryType: "PublishEncryptionPublicKey",
     types: {
-      EIP712Domain: [
-        { name: "name", type: "string" },
-        { name: "version", type: "string" },
-      ],
       PublishEncryptionPublicKey: [
         { name: "message", type: "string" },
         { name: "encryptionPublicKey", type: "string" },
         { name: "ownerAddress", type: "string" },
       ],
     },
-  });
+  };
 }
 
 export async function signEncryptionKey(
   encryptionPublicKey: Uint8Array,
   fromAddress: string,
-  providerRequest: (request: {
-    method: string;
-    params?: Array<any>;
-    from?: string;
-  }) => Promise<any>
+  signer: TypedDataSigner
 ): Promise<Uint8Array> {
-  const msgParams = buildMsgParams(encryptionPublicKey, fromAddress);
+  const { domain, types, value } = buildMsgParams(
+    encryptionPublicKey,
+    fromAddress
+  );
 
-  const result = await providerRequest({
-    method: "eth_signTypedData_v4",
-    params: [fromAddress, msgParams],
-    from: fromAddress,
-  });
+  const result = await signer._signTypedData(domain, types, value);
 
   console.log("TYPED SIGNED:" + JSON.stringify(result));
 
@@ -108,18 +96,21 @@ export async function signEncryptionKey(
  * Validate that the Encryption Public Key was signed by the holder of the given Ethereum address.
  */
 export function validatePublicKeyMessage(msg: PublicKeyMessage): boolean {
-  const recovered = sigUtil.recoverTypedSignature_v4({
-    data: JSON.parse(
-      buildMsgParams(
-        msg.encryptionPublicKey,
-        "0x" + utils.bytesToHex(msg.ethAddress)
-      )
-    ),
-    sig: "0x" + utils.bytesToHex(msg.signature),
-  });
+  const { domain, types, value } = buildMsgParams(
+    msg.encryptionPublicKey,
+    "0x" + utils.bytesToHex(msg.ethAddress)
+  );
 
-  console.log("Recovered", recovered);
-  console.log("ethAddress", "0x" + utils.bytesToHex(msg.ethAddress));
+  try {
+    const hash = _TypedDataEncoder.hash(domain, types, value);
 
-  return equals(utils.hexToBytes(recovered), msg.ethAddress);
+    const recovered = recoverAddress(hash, msg.signature);
+    console.log("Recovered", recovered);
+    console.log("ethAddress", "0x" + utils.bytesToHex(msg.ethAddress));
+
+    return equals(utils.hexToBytes(recovered.toLowerCase()), msg.ethAddress);
+  } catch (e) {
+    console.error("Could not recover public key from signature", e);
+    return false;
+  }
 }

eth-pm/src/messaging/SendMessage.tsx

@@ -133,7 +133,7 @@ function sendMessage(
         .push(msg)
         .then((res) => {
           console.log("Message sent", res);
-          callback(res ? res.isSuccess : false);
+          callback(res?.isSuccess ?? false);
         })
         .catch((e) => {
           console.error("Failed to send message", e);

eth-pm/src/messaging/wire.ts

@@ -29,9 +29,7 @@ export class PublicKeyMessage {
     return PublicKeyMessage.Type.encode(message).finish();
   }
 
-  public static decode(
-    bytes: Uint8Array | Buffer
-  ): PublicKeyMessage | undefined {
+  public static decode(bytes: Uint8Array): PublicKeyMessage | undefined {
     const payload = PublicKeyMessage.Type.decode(
       bytes
     ) as unknown as PublicKeyMessagePayload;
@@ -80,7 +78,7 @@ export class PrivateMessage {
     return PrivateMessage.Type.encode(message).finish();
   }
 
-  public static decode(bytes: Uint8Array | Buffer): PrivateMessage | undefined {
+  public static decode(bytes: Uint8Array): PrivateMessage | undefined {
     const payload = PrivateMessage.Type.decode(
       bytes
     ) as unknown as PrivateMessagePayload;

eth-pm/src/waku.ts

@@ -1,26 +1,35 @@
 import { Dispatch, SetStateAction } from "react";
-import { utils, Waku, WakuMessage } from "js-waku";
+import {
+  Protocols,
+  utils,
+  waitForRemotePeer,
+  Waku,
+  WakuMessage,
+} from "js-waku";
 import { PrivateMessage, PublicKeyMessage } from "./messaging/wire";
 import { validatePublicKeyMessage } from "./crypto";
 import { Message } from "./messaging/Messages";
 import { equals } from "uint8arrays/equals";
+import { createWaku } from "js-waku/lib/create_waku";
+import { PeerDiscoveryStaticPeers } from "js-waku/lib/peer_discovery_static_list";
+import {
+  getPredefinedBootstrapNodes,
+  Fleet,
+} from "js-waku/lib/predefined_bootstrap_nodes";
 
 export const PublicKeyContentTopic = "/eth-pm/1/public-key/proto";
 export const PrivateMessageContentTopic = "/eth-pm/1/private-message/proto";
 
 export async function initWaku(): Promise<Waku> {
-  const waku = await Waku.create({ bootstrap: { default: true } });
-
-  // Wait to be connected to at least one peer
-  await new Promise((resolve, reject) => {
-    // If we are not connected to any peer within 10sec let's just reject
-    // As we are not implementing connection management in this example
-
-    setTimeout(reject, 10000);
-    waku.libp2p.connectionManager.on("peer:connect", () => {
-      resolve(null);
-    });
+  const waku = await createWaku({
+    libp2p: {
+      peerDiscovery: [
+        new PeerDiscoveryStaticPeers(getPredefinedBootstrapNodes(Fleet.Test)),
+      ],
+    },
   });
+  await waku.start();
+  await waitForRemotePeer(waku, [Protocols.Filter, Protocols.LightPush]);
 
   return waku;
 }