Merge pull request #204 from status-im/72-eth-dm

.github/workflows/deploy-gh-pages.yml

@@ -35,20 +35,35 @@ jobs:
       - name: "[js-waku] build"
         run: npm run build
 
-      - name: install using npm i
+      - name: "[web-chat] install using npm i"
         run: npm install
         working-directory: examples/web-chat
 
-      - name: build web app
+      - name: "[web-chat] build"
         run: npm run build
         working-directory: examples/web-chat
 
-      - name: Deploy web chat app on gh pages
+      - name: "[web-chat] Deploy on gh pages to /"
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./examples/web-chat/build
 
+      - name: "[eth-dm] install using npm i"
+        run: npm install
+        working-directory: examples/eth-dm
+
+      - name: "[eth-dm] build"
+        run: npm run build
+        working-directory: examples/eth-dm
+
+      - name: "[eth-dm] Deploy on gh pages to /eth-dm"
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./examples/eth-dm/build
+          destination_dir: eth-dm
+
       - name: Generate docs
         run: npm run doc:html
 

examples/eth-dm/.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+/cache/

examples/eth-dm/README.md

@@ -0,0 +1,3 @@
+# Ethereum Direct Message Web App
+
+A showcase app of [20/ETH-DM](https://rfc.vac.dev/spec/20/).

examples/eth-dm/contracts/Dummy.sol

@@ -0,0 +1,6 @@
+pragma solidity ^0.6.0;
+
+contract Dummy {
+  constructor() public {
+  }
+}

examples/eth-dm/contracts_build/Dummy.json

@@ -0,0 +1,24 @@
+{
+  "abi": [
+    {
+      "inputs": [],
+      "stateMutability": "nonpayable",
+      "type": "constructor"
+    }
+  ],
+  "evm": {
+    "bytecode": {
+      "linkReferences": {},
+      "object": "6080604052348015600f57600080fd5b50603f80601d6000396000f3fe6080604052600080fdfea264697066735822122085ecc1272da81a9643c13d0f593ec5056152ae255b6b63d3368e440c9cffe75c64736f6c63430006020033",
+      "opcodes": "PUSH1 0x80 PUSH1 0x40 MSTORE CALLVALUE DUP1 ISZERO PUSH1 0xF JUMPI PUSH1 0x0 DUP1 REVERT JUMPDEST POP PUSH1 0x3F DUP1 PUSH1 0x1D PUSH1 0x0 CODECOPY PUSH1 0x0 RETURN INVALID PUSH1 0x80 PUSH1 0x40 MSTORE PUSH1 0x0 DUP1 REVERT INVALID LOG2 PUSH5 0x6970667358 0x22 SLT KECCAK256 DUP6 0xEC 0xC1 0x27 0x2D 0xA8 BYTE SWAP7 NUMBER 0xC1 RETURNDATASIZE 0xF MSIZE RETURNDATACOPY 0xC5 SDIV PUSH2 0x52AE 0x25 JUMPDEST PUSH12 0x63D3368E440C9CFFE75C6473 PUSH16 0x6C634300060200330000000000000000 ",
+      "sourceMap": "25:47:0:-:0;;;44:26;8:9:-1;5:2;;;30:1;27;20:12;5:2;44:26:0;25:47;;;;;;"
+    },
+    "deployedBytecode": {
+      "linkReferences": {},
+      "object": "6080604052600080fdfea264697066735822122085ecc1272da81a9643c13d0f593ec5056152ae255b6b63d3368e440c9cffe75c64736f6c63430006020033",
+      "opcodes": "PUSH1 0x80 PUSH1 0x40 MSTORE PUSH1 0x0 DUP1 REVERT INVALID LOG2 PUSH5 0x6970667358 0x22 SLT KECCAK256 DUP6 0xEC 0xC1 0x27 0x2D 0xA8 BYTE SWAP7 NUMBER 0xC1 RETURNDATASIZE 0xF MSIZE RETURNDATACOPY 0xC5 SDIV PUSH2 0x52AE 0x25 JUMPDEST PUSH12 0x63D3368E440C9CFFE75C6473 PUSH16 0x6C634300060200330000000000000000 ",
+      "sourceMap": "25:47:0:-:0;;;;;"
+    }
+  },
+  "bytecode": "6080604052348015600f57600080fd5b50603f80601d6000396000f3fe6080604052600080fdfea264697066735822122085ecc1272da81a9643c13d0f593ec5056152ae255b6b63d3368e440c9cffe75c64736f6c63430006020033"
+}

examples/eth-dm/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "eth-dm",
+  "version": "0.1.0",
+  "private": true,
+  "homepage": "/js-waku/eth-dm",
+  "dependencies": {
+    "@material-ui/core": "^4.11.4",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^12.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "eth-crypto": "^1.9.0",
+    "ethers": "^5.2.0",
+    "fontsource-roboto": "^4.0.0",
+    "js-waku": "../../build/main",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "typescript": "^4.1.2",
+    "web-vitals": "^1.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "run-s build:*",
+    "build:waffle": "waffle",
+    "build:react": "react-scripts build",
+    "test:unit": "react-scripts test",
+    "eject": "react-scripts eject",
+    "fix": "run-s fix:*",
+    "test": "run-s build test:*",
+    "test:lint": "eslint src --ext .ts --ext .tsx",
+    "test:prettier": "prettier \"src/**/*.{ts,tsx}\" \"./*.json\" --list-different",
+    "test:spelling": "cspell \"{README.md,src/**/*.{ts,tsx},public/**/*.html}\" -c ../../.cspell.json",
+    "fix:prettier": "prettier \"src/**/*.{ts,tsx}\" \"./*.json\" --write",
+    "fix:lint": "eslint src --ext .ts --ext .tsx --fix"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@ethereum-waffle/jest": "^3.2.2",
+    "@ethersproject/shims": "^5.3.0",
+    "ethereum-waffle": "^3.3.0",
+    "npm-run-all": "^4.1.5"
+  }
+}

examples/eth-dm/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

examples/eth-dm/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

examples/eth-dm/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

examples/eth-dm/src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #dddddd;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: black;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

examples/eth-dm/src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

examples/eth-dm/src/App.tsx

@@ -0,0 +1,235 @@
+import '@ethersproject/shims';
+
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import './App.css';
+import { Environment, getStatusFleetNodes, Waku, WakuMessage } from 'js-waku';
+import { ethers } from 'ethers';
+import { Web3Provider } from '@ethersproject/providers';
+import {
+  createPublicKeyMessage,
+  generateEthDmKeyPair,
+  KeyPair,
+  validatePublicKeyMessage,
+} from './crypto';
+import * as EthCrypto from 'eth-crypto';
+import { decode, DirectMessage, encode, PublicKeyMessage } from './messages';
+import { Message, Messages } from './Messages';
+import 'fontsource-roboto';
+import { Button } from '@material-ui/core';
+import { SendMessage } from './SendMessage';
+
+export const PublicKeyContentTopic = '/eth-dm/1/public-key/json';
+export const DirectMessageContentTopic = '/eth-dm/1/direct-message/json';
+
+declare let window: any;
+
+function App() {
+  const [waku, setWaku] = useState<Waku>();
+  const [provider, setProvider] = useState<Web3Provider>();
+  const [ethDmKeyPair, setEthDmKeyPair] = useState<KeyPair>();
+  const [publicKeyMsg, setPublicKeyMsg] = useState<PublicKeyMessage>();
+  const [publicKeys, setPublicKeys] = useState<Map<string, string>>(new Map());
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  useEffect(() => {
+    if (provider) return;
+    try {
+      window.ethereum.enable();
+      const _provider = new ethers.providers.Web3Provider(window.ethereum);
+      setProvider(_provider);
+    } catch (e) {
+      console.error('No web3 provider available');
+    }
+  }, [provider]);
+
+  useEffect(() => {
+    if (waku) return;
+    initWaku()
+      .then((wakuNode) => {
+        console.log('waku: ready');
+        setWaku(wakuNode);
+      })
+      .catch((e) => {
+        console.error('Failed to initiate Waku', e);
+      });
+  }, [waku]);
+
+  const generateKeyPair = () => {
+    if (ethDmKeyPair) return;
+    if (!provider) return;
+
+    generateEthDmKeyPair(provider.getSigner())
+      .then((keyPair) => {
+        setEthDmKeyPair(keyPair);
+      })
+      .catch((e) => {
+        console.error('Failed to generate Key Pair', e);
+      });
+  };
+
+  const observerPublicKeyMessage = handlePublicKeyMessage.bind(
+    {},
+    setPublicKeys
+  );
+
+  const observerDirectMessage = ethDmKeyPair
+    ? handleDirectMessage.bind({}, setMessages, ethDmKeyPair.privateKey)
+    : 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,
+      ]);
+    };
+  });
+
+  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');
+      });
+    } 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');
+          });
+        })
+        .catch((e) => {
+          console.error('Failed to creat Eth-Dm Publication message', e);
+        });
+    }
+  };
+
+  const wakuReady = !!waku ? 'Waku is ready' : 'Waku is loading';
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        {wakuReady}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+          }}
+        >
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={generateKeyPair}
+            disabled={!provider}
+          >
+            Generate Eth-DM Key Pair
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={broadcastPublicKey}
+            disabled={!ethDmKeyPair || !waku}
+          >
+            Broadcast Eth-DM Public Key
+          </Button>
+        </div>
+        <SendMessage recipients={publicKeys} waku={waku} />
+        <Messages messages={messages} />
+      </header>
+    </div>
+  );
+}
+
+export default App;
+
+async function initWaku(): Promise<Waku> {
+  const waku = await Waku.create({});
+
+  const nodes = await getNodes();
+  await Promise.all(
+    nodes.map((addr) => {
+      return waku.dial(addr);
+    })
+  );
+
+  return waku;
+}
+
+function getNodes() {
+  // Works with react-scripts
+  // if (process?.env?.NODE_ENV === 'development') {
+  return getStatusFleetNodes(Environment.Test);
+  // } else {
+  //   return getStatusFleetNodes(Environment.Prod);
+  // }
+}
+
+function encodePublicKeyWakuMessage(ethDmMsg: PublicKeyMessage): WakuMessage {
+  const payload = encode(ethDmMsg);
+  return WakuMessage.fromBytes(payload, PublicKeyContentTopic);
+}
+
+function handlePublicKeyMessage(
+  setter: Dispatch<SetStateAction<Map<string, string>>>,
+  msg: WakuMessage
+) {
+  if (!msg.payload) return;
+  const publicKeyMsg: PublicKeyMessage = decode(msg.payload);
+  const res = validatePublicKeyMessage(publicKeyMsg);
+  console.log(`Public Key Message Received, valid: ${res}`, publicKeyMsg);
+
+  setter((prevPks: Map<string, string>) => {
+    prevPks.set(publicKeyMsg.ethAddress, publicKeyMsg.ethDmPublicKey);
+    return new Map(prevPks);
+  });
+}
+
+async function handleDirectMessage(
+  setter: Dispatch<SetStateAction<Message[]>>,
+  privateKey: string,
+  wakuMsg: WakuMessage
+) {
+  console.log('Waku Message received:', wakuMsg);
+  if (!wakuMsg.payload) return;
+  const directMessage: DirectMessage = decode(wakuMsg.payload);
+  const text = await EthCrypto.decryptWithPrivateKey(
+    privateKey,
+    directMessage.encMessage
+  );
+
+  const timestamp = wakuMsg.timestamp ? wakuMsg.timestamp : new Date();
+
+  console.log('Message decrypted:', text);
+  setter((prevMsgs: Message[]) => {
+    const copy = prevMsgs.slice();
+    copy.push({
+      text: text,
+      timestamp: timestamp,
+    });
+    return copy;
+  });
+}

examples/eth-dm/src/Messages.tsx

@@ -0,0 +1,30 @@
+export interface Message {
+  text: string;
+  timestamp: Date;
+}
+
+export interface Props {
+  messages: Message[];
+}
+
+export function Messages(props: Props) {
+  const messages = props.messages.map((msg) => {
+    return (
+      <li>
+        {formatDisplayDate(msg.timestamp)} {msg.text}
+      </li>
+    );
+  });
+
+  return <ul>{messages}</ul>;
+}
+
+function formatDisplayDate(timestamp: Date): string {
+  return timestamp.toLocaleString([], {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: false,
+  });
+}

examples/eth-dm/src/SendMessage.tsx

@@ -0,0 +1,150 @@
+import {
+  FormControl,
+  InputLabel,
+  makeStyles,
+  MenuItem,
+  Select,
+  TextField,
+} from '@material-ui/core';
+import React, { ChangeEvent, useState, KeyboardEvent } from 'react';
+import { Waku, WakuMessage } from 'js-waku';
+import * as EthCrypto from 'eth-crypto';
+import { DirectMessage, encode } from './messages';
+import { DirectMessageContentTopic } from './App';
+
+const useStyles = makeStyles((theme) => ({
+  formControl: {
+    margin: theme.spacing(1),
+    minWidth: 120,
+  },
+  selectEmpty: {
+    marginTop: theme.spacing(2),
+  },
+}));
+
+export interface Props {
+  waku: Waku | undefined;
+  // address, public key
+  recipients: Map<string, string>;
+}
+
+export function SendMessage(props: Props) {
+  const classes = useStyles();
+  const [recipient, setRecipient] = useState<string>('');
+  const [message, setMessage] = useState<string>();
+
+  const waku = props.waku;
+
+  const handleRecipientChange = (
+    event: ChangeEvent<{ name?: string; value: unknown }>
+  ) => {
+    setRecipient(event.target.value as string);
+  };
+
+  const handleMessageChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setMessage(event.target.value);
+  };
+
+  const items = Array.from(props.recipients.keys()).map((recipient) => {
+    return (
+      <MenuItem key={recipient} value={recipient}>
+        {recipient}
+      </MenuItem>
+    );
+  });
+
+  const keyDownHandler = async (event: KeyboardEvent<HTMLInputElement>) => {
+    if (
+      event.key === 'Enter' &&
+      !event.altKey &&
+      !event.ctrlKey &&
+      !event.shiftKey
+    ) {
+      if (!waku) return;
+      if (!recipient) return;
+      if (!message) return;
+      const publicKey = props.recipients.get(recipient);
+      if (!publicKey) return;
+
+      sendMessage(waku, recipient, publicKey, message, (res) => {
+        if (res) {
+          console.log('callback called with', res);
+          setMessage('');
+        }
+      });
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <FormControl className={classes.formControl}>
+        <InputLabel id="select-recipient-label">Recipient</InputLabel>
+        <Select
+          labelId="select-recipient"
+          id="select-recipient"
+          value={recipient}
+          onChange={handleRecipientChange}
+        >
+          {items}
+        </Select>
+      </FormControl>
+      <TextField
+        id="message-input"
+        label="Message"
+        variant="filled"
+        onChange={handleMessageChange}
+        onKeyDown={keyDownHandler}
+        value={message}
+      />
+    </div>
+  );
+}
+
+async function encodeEncryptedWakuMessage(
+  message: string,
+  publicKey: string,
+  address: string
+): Promise<WakuMessage> {
+  const encryptedMsg = await EthCrypto.encryptWithPublicKey(publicKey, message);
+
+  const directMsg: DirectMessage = {
+    toAddress: address,
+    encMessage: encryptedMsg,
+  };
+
+  const payload = encode(directMsg);
+  return WakuMessage.fromBytes(payload, DirectMessageContentTopic);
+}
+
+function sendMessage(
+  waku: Waku,
+  recipientAddress: string,
+  recipientPublicKey: string,
+  message: string,
+  callback: (res: boolean) => void
+) {
+  encodeEncryptedWakuMessage(message, recipientPublicKey, recipientAddress)
+    .then((msg) => {
+      console.log('pushing');
+      waku.lightPush
+        .push(msg)
+        .then((res) => {
+          console.log('Message sent', res);
+          callback(res ? res.isSuccess : false);
+        })
+        .catch((e) => {
+          console.error('Failed to send message', e);
+          callback(false);
+        });
+    })
+    .catch((e) => {
+      console.error('Cannot encode & encrypt message', e);
+      callback(false);
+    });
+}

examples/eth-dm/src/crypto.test.ts

@@ -0,0 +1,26 @@
+import '@ethersproject/shims';
+
+import {
+  createPublicKeyMessage,
+  generateEthDmKeyPair,
+  validatePublicKeyMessage,
+} from './crypto';
+import { MockProvider } from 'ethereum-waffle';
+import { waffleJest } from '@ethereum-waffle/jest';
+
+expect.extend(waffleJest);
+
+test('Signature of Eth-DM key is verifiable', async () => {
+  console.log('get wallet');
+  const [wallet] = new MockProvider().getWallets();
+  console.log('Generate Keys');
+  const ethDmKeys = await generateEthDmKeyPair(wallet);
+
+  console.log('Create EthDm message');
+  const ethDmMsg = await createPublicKeyMessage(wallet, ethDmKeys.publicKey);
+
+  console.log('Verify EthDm message');
+  const res = validatePublicKeyMessage(ethDmMsg);
+
+  expect(res).toBe(true);
+});

examples/eth-dm/src/crypto.ts

@@ -0,0 +1,75 @@
+import '@ethersproject/shims';
+
+import * as EthCrypto from 'eth-crypto';
+import { toUtf8Bytes } from '@ethersproject/strings';
+import { ethers } from 'ethers';
+import { Signer } from '@ethersproject/abstract-signer';
+import { PublicKeyMessage } from './messages';
+
+const Salt =
+  'Salt for Eth-Dm, do not share a signature of this message or others could decrypt your messages';
+
+export interface KeyPair {
+  privateKey: string;
+  publicKey: string;
+  address: string;
+}
+
+/**
+ * Use the signature of the Salt ("Salt for eth-dm...") as
+ * the entropy for the EthCrypto keypair. Note that the entropy is hashed with keccak256
+ * to make the private key.
+ */
+export async function generateEthDmKeyPair(
+  web3Signer: Signer
+): Promise<KeyPair> {
+  const signature = await web3Signer.signMessage(Salt);
+  const entropy = Buffer.from(toUtf8Bytes(signature));
+  const keys = EthCrypto.createIdentity(entropy);
+  return keys;
+}
+
+/**
+ * Sign the Eth-DM public key with Web3. This can then be published to let other
+ * users know to use this Eth-DM public key to encrypt messages destinated to the
+ * Web3 account holder (ie, Ethereum Address holder).
+ */
+export async function createPublicKeyMessage(
+  web3Signer: Signer,
+  ethDmPublicKey: string
+): Promise<PublicKeyMessage> {
+  const ethAddress = await web3Signer.getAddress();
+  const sig = await web3Signer.signMessage(
+    formatPublicKeyForSignature(ethDmPublicKey)
+  );
+  return { ethDmPublicKey, ethAddress, sig };
+}
+
+/**
+ * Validate that the EthDm Public Key was signed by the holder of the given Ethereum address.
+ */
+export function validatePublicKeyMessage(msg: PublicKeyMessage): boolean {
+  try {
+    const sigAddress = ethers.utils.verifyMessage(
+      formatPublicKeyForSignature(msg.ethDmPublicKey),
+      msg.sig
+    );
+    return sigAddress === msg.ethAddress;
+  } catch (e) {
+    return false;
+  }
+}
+
+/**
+ * Prepare Eth-Dm Public key to be signed for publication.
+ * The public key is set in on Object `{ ethDmPublicKey: string; }`, converted
+ * to JSON and then hashed with Keccak256.
+ * The usage of the object helps ensure the signature is only used in an Eth-DM
+ * context.
+ */
+function formatPublicKeyForSignature(ethDmPublicKey: string): string {
+  const txt = JSON.stringify({
+    ethDmPublicKey,
+  });
+  return txt;
+}

examples/eth-dm/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

examples/eth-dm/src/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

examples/eth-dm/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

examples/eth-dm/src/messages.ts

@@ -0,0 +1,29 @@
+import * as EthCrypto from 'eth-crypto';
+
+/**
+ * Message used to communicate the Eth-Dm public key linked to a given Ethereum account
+ */
+export interface PublicKeyMessage {
+  ethDmPublicKey: string;
+  ethAddress: string;
+  sig: string;
+}
+
+/**
+ * Direct Encrypted Message used for private communication over the Waku network.
+ */
+export interface DirectMessage {
+  toAddress: string;
+  encMessage: EthCrypto.Encrypted;
+}
+
+export function encode<T>(msg: T): Buffer {
+  const jsonStr = JSON.stringify(msg);
+  return Buffer.from(jsonStr, 'utf-8');
+}
+
+export function decode<T>(bytes: Uint8Array): T {
+  const buf = Buffer.from(bytes);
+  const str = buf.toString('utf-8');
+  return JSON.parse(str);
+}

examples/eth-dm/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

examples/eth-dm/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

examples/eth-dm/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

examples/eth-dm/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}

examples/eth-dm/waffle.json

@@ -0,0 +1,6 @@
+{
+  "compilerType": "solcjs",
+  "compilerVersion": "0.6.2",
+  "sourceDirectory": "./contracts",
+  "outputDirectory": "./contracts_build"
+}