Init repo, add crypto functions

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,5 @@
+# Ethereum Direct Message Web App
+
+A showcase app of [20/ETH-DM](https://rfc.vac.dev/spec/20/).
+
+Note: This examples uses [yarn](https://yarnpkg.com/) package manager.

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,59 @@
+{
+  "name": "eth-dm",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@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",
+    "js-waku": "^0.5.0",
+    "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",
+    "ethereum-waffle": "^3.3.0"
+  }
+}

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/AddressInput.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+
+
+export interface Props {
+  sendMessage: (message: string) => void;
+}
+function MessageInput(props: Props) {
+  const [inputText, setInputText] = useState("");
+
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputText(event.target.value);
+  };
+
+  const onKeyDown = (event: { key: string; }) => {
+    if (event.key === "Enter") {
+      props.sendMessage(inputText);
+      setInputText("");
+    }
+  };
+
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="Send a message...."
+        onChange={onChange}
+        onKeyDown={onKeyDown}
+        value={inputText}
+      />
+    </div>
+  );
+}

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: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.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,51 @@
+import React, { useEffect, useState } from 'react';
+import './App.css';
+import { Environment, getStatusFleetNodes, Waku, WakuMessage } from 'js-waku';
+
+declare let window: any;
+
+function App() {
+  const [waku, setWaku] = useState<Waku>();
+  // const [provider, setProvider] = useState(new ethers.providers.Web3Provider(window.ethereum));
+
+  useEffect(() => {
+    if (!waku) {
+      initWaku().then((wakuNode) => {
+        setWaku(wakuNode);
+      }).catch(e => {
+        console.error('Failed to initiate Waku', e);
+      });
+    }
+  }, [waku]);
+
+  return (
+    <div className='App'>
+      <header className='App-header'>
+      </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);
+  }
+}

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

@@ -0,0 +1,24 @@
+import {
+  createEthDmPublicationMessage,
+  generateEthDmKeyPair,
+  verifyEthDmPublicKey
+} 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 createEthDmPublicationMessage(wallet, ethDmKeys.publicKey);
+
+  console.log("Verify EthDm message")
+  const res = verifyEthDmPublicKey(ethDmMsg)
+
+  expect(res).toBe(true);
+});

examples/eth-dm/src/crypto.ts

@@ -0,0 +1,64 @@
+import * as EthCrypto from 'eth-crypto';
+import { toUtf8Bytes } from '@ethersproject/strings';
+import { ethers } from 'ethers';
+import { Signer } from '@ethersproject/abstract-signer';
+
+const Salt = EthCrypto.hash.keccak256("Salt for Eth-Dm, do not share a signature of this message or other could decrypt your messages");
+
+/**
+ * Use the signature of the Salt (keccak256 hash of the sentence "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) {
+  const signature = await web3Signer.signMessage(Salt)
+  const entropy = Buffer.from(toUtf8Bytes(signature));
+  const keys = EthCrypto.createIdentity(entropy);
+  return keys;
+}
+
+/**
+ * Message used to communicate the Eth-Dm public key linked to a given Ethereum account
+ */
+export interface EthDmPublicationMessage {
+  ethDmPublicKey: string;
+  ethAddress: string;
+  sig: string;
+}
+
+/**
+ * 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 createEthDmPublicationMessage(web3Signer: Signer, ethDmPublicKey: string): Promise<EthDmPublicationMessage> {
+  const ethAddress = await web3Signer.getAddress();
+  const sig = await web3Signer.signMessage(formatEthDmPublicKeyForSig(ethDmPublicKey))
+  return { ethDmPublicKey, ethAddress, sig };
+}
+
+/**
+ * Verifies that the EthDm Public Key was signed by the holder of the given Ethereum address.
+ */
+export function verifyEthDmPublicKey(msg: EthDmPublicationMessage): boolean {
+  try {
+    const sigAddress = ethers.utils.verifyMessage(formatEthDmPublicKeyForSig(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 formatEthDmPublicKeyForSig(ethDmPublicKey: string): string {
+  return EthCrypto.hash.keccak256(JSON.stringify({
+    ethDmPublicKey
+  }))
+}

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/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,26 @@
+{
+  "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,7 @@
+{
+  "compilerType": "solcjs",
+  "compilerVersion": "0.6.2",
+  "sourceDirectory": "./contracts",
+  "outputDirectory": "./contracts_build"
+}
+