diff --git a/examples/eth-dm/.gitignore b/examples/eth-dm/.gitignore new file mode 100644 index 0000000000..59edd5cfe0 --- /dev/null +++ b/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/ diff --git a/examples/eth-dm/README.md b/examples/eth-dm/README.md new file mode 100644 index 0000000000..405cf381c1 --- /dev/null +++ b/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. diff --git a/examples/eth-dm/contracts/Dummy.sol b/examples/eth-dm/contracts/Dummy.sol new file mode 100644 index 0000000000..6fabc21a78 --- /dev/null +++ b/examples/eth-dm/contracts/Dummy.sol @@ -0,0 +1,6 @@ +pragma solidity ^0.6.0; + +contract Dummy { + constructor() public { + } +} diff --git a/examples/eth-dm/contracts_build/Dummy.json b/examples/eth-dm/contracts_build/Dummy.json new file mode 100644 index 0000000000..2def0c0f77 --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/examples/eth-dm/package.json b/examples/eth-dm/package.json new file mode 100644 index 0000000000..a479fe4009 --- /dev/null +++ b/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" + } +} diff --git a/examples/eth-dm/public/favicon.ico b/examples/eth-dm/public/favicon.ico new file mode 100644 index 0000000000..a11777cc47 Binary files /dev/null and b/examples/eth-dm/public/favicon.ico differ diff --git a/examples/eth-dm/public/index.html b/examples/eth-dm/public/index.html new file mode 100644 index 0000000000..aa069f27cb --- /dev/null +++ b/examples/eth-dm/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + React App + + + +
+ + + diff --git a/examples/eth-dm/public/logo192.png b/examples/eth-dm/public/logo192.png new file mode 100644 index 0000000000..fc44b0a379 Binary files /dev/null and b/examples/eth-dm/public/logo192.png differ diff --git a/examples/eth-dm/public/logo512.png b/examples/eth-dm/public/logo512.png new file mode 100644 index 0000000000..a4e47a6545 Binary files /dev/null and b/examples/eth-dm/public/logo512.png differ diff --git a/examples/eth-dm/public/manifest.json b/examples/eth-dm/public/manifest.json new file mode 100644 index 0000000000..080d6c77ac --- /dev/null +++ b/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" +} diff --git a/examples/eth-dm/public/robots.txt b/examples/eth-dm/public/robots.txt new file mode 100644 index 0000000000..e9e57dc4d4 --- /dev/null +++ b/examples/eth-dm/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/examples/eth-dm/src/AddressInput.tsx b/examples/eth-dm/src/AddressInput.tsx new file mode 100644 index 0000000000..e7c81176aa --- /dev/null +++ b/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) => { + setInputText(event.target.value); + }; + + const onKeyDown = (event: { key: string; }) => { + if (event.key === "Enter") { + props.sendMessage(inputText); + setInputText(""); + } + }; + + return ( +
+ +
+ ); +} diff --git a/examples/eth-dm/src/App.css b/examples/eth-dm/src/App.css new file mode 100644 index 0000000000..74b5e05345 --- /dev/null +++ b/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); + } +} diff --git a/examples/eth-dm/src/App.test.tsx b/examples/eth-dm/src/App.test.tsx new file mode 100644 index 0000000000..2a68616d98 --- /dev/null +++ b/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(); + const linkElement = screen.getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/examples/eth-dm/src/App.tsx b/examples/eth-dm/src/App.tsx new file mode 100644 index 0000000000..e42fe9f168 --- /dev/null +++ b/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(); + // 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 ( +
+
+
+
+ ); +} + +export default App; + +async function initWaku(): Promise { + 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); + } +} diff --git a/examples/eth-dm/src/crypto.test.ts b/examples/eth-dm/src/crypto.test.ts new file mode 100644 index 0000000000..f69c324d3d --- /dev/null +++ b/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); +}); diff --git a/examples/eth-dm/src/crypto.ts b/examples/eth-dm/src/crypto.ts new file mode 100644 index 0000000000..3f75d5e2b9 --- /dev/null +++ b/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 { + 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 + })) +} diff --git a/examples/eth-dm/src/index.css b/examples/eth-dm/src/index.css new file mode 100644 index 0000000000..ec2585e8c0 --- /dev/null +++ b/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; +} diff --git a/examples/eth-dm/src/index.tsx b/examples/eth-dm/src/index.tsx new file mode 100644 index 0000000000..ef2edf8ea3 --- /dev/null +++ b/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( + + + , + 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(); diff --git a/examples/eth-dm/src/logo.svg b/examples/eth-dm/src/logo.svg new file mode 100644 index 0000000000..9dfc1c058c --- /dev/null +++ b/examples/eth-dm/src/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/eth-dm/src/react-app-env.d.ts b/examples/eth-dm/src/react-app-env.d.ts new file mode 100644 index 0000000000..6431bc5fc6 --- /dev/null +++ b/examples/eth-dm/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/eth-dm/src/reportWebVitals.ts b/examples/eth-dm/src/reportWebVitals.ts new file mode 100644 index 0000000000..49a2a16e0f --- /dev/null +++ b/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; diff --git a/examples/eth-dm/src/setupTests.ts b/examples/eth-dm/src/setupTests.ts new file mode 100644 index 0000000000..8f2609b7b3 --- /dev/null +++ b/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'; diff --git a/examples/eth-dm/tsconfig.json b/examples/eth-dm/tsconfig.json new file mode 100644 index 0000000000..a273b0cfc0 --- /dev/null +++ b/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" + ] +} diff --git a/examples/eth-dm/waffle.json b/examples/eth-dm/waffle.json new file mode 100644 index 0000000000..a658e1b11d --- /dev/null +++ b/examples/eth-dm/waffle.json @@ -0,0 +1,7 @@ +{ + "compilerType": "solcjs", + "compilerVersion": "0.6.2", + "sourceDirectory": "./contracts", + "outputDirectory": "./contracts_build" +} +