diff --git a/eth-pm/craco.config.js b/eth-pm/craco.config.js new file mode 100644 index 0000000..534c73b --- /dev/null +++ b/eth-pm/craco.config.js @@ -0,0 +1,27 @@ +const { getLoaders, loaderByName } = require("@craco/craco"); + +module.exports = { + webpack: { + configure: (webpackConfig) => { + const { hasFoundAny, matches } = getLoaders( + webpackConfig, + loaderByName("babel-loader") + ); + + if (hasFoundAny) { + matches.forEach((c) => { + // Modify test to include cjs for @chainsafe/libp2p-gossipsub rpc module + if (c.loader.test.toString().includes("mjs")) { + if (c.loader.test.toString().includes("jsx")) { + c.loader.test = /\.(js|cjs|mjs|jsx|ts|tsx)$/; + } else { + c.loader.test = /\.(js|cjs|mjs|ts)$/; + } + } + }); + } + + return webpackConfig; + }, + }, +}; diff --git a/eth-pm/package.json b/eth-pm/package.json index 024601a..a73401b 100644 --- a/eth-pm/package.json +++ b/eth-pm/package.json @@ -17,9 +17,8 @@ "uint8arrays": "^3.1.0" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "eject": "react-scripts eject", + "start": "GENERATE_SOURCEMAP=false PORT=3001 craco start", + "build": "GENERATE_SOURCEMAP=false craco build", "fix": "run-s fix:*", "test": "run-s build test:*", "test:lint": "eslint src --ext .ts --ext .tsx", @@ -49,6 +48,7 @@ ] }, "devDependencies": { + "@craco/craco": "^6.4.5", "@ethersproject/shims": "^5.5.0", "@types/jest": "^27.4.0", "@types/node": "^17.0.19", diff --git a/eth-pm/pnpm-lock.yaml b/eth-pm/pnpm-lock.yaml index a127789..f964d63 100644 --- a/eth-pm/pnpm-lock.yaml +++ b/eth-pm/pnpm-lock.yaml @@ -1,6 +1,7 @@ lockfileVersion: 5.4 specifiers: + '@craco/craco': ^6.4.5 '@ethersproject/abstract-signer': 5.7.0 '@ethersproject/providers': 5.7.0 '@ethersproject/shims': ^5.5.0 @@ -38,6 +39,7 @@ dependencies: uint8arrays: 3.1.0 devDependencies: + '@craco/craco': 6.4.5_vfhaetykun4jxpegkdvqdfa4hu '@ethersproject/shims': 5.6.0 '@types/jest': 27.5.2 '@types/node': 17.0.45 @@ -1688,6 +1690,27 @@ packages: - supports-color dev: false + /@craco/craco/6.4.5_vfhaetykun4jxpegkdvqdfa4hu: + resolution: {integrity: sha512-8F2rIAao8sEh0FPP52ViEvDM9GjJ7acq0knu1c8UgI+EuZMD5/ZB270ol6jV4iNY7it9Umg/RoGBvNRUNr8U8w==} + engines: {node: '>=6'} + hasBin: true + peerDependencies: + react-scripts: ^4.0.0 + dependencies: + cosmiconfig: 7.0.1 + cosmiconfig-typescript-loader: 1.0.9_lhkinfllngsms325uqqrakqdby + cross-spawn: 7.0.3 + lodash: 4.17.21 + react-scripts: 5.0.1_zqc2lflk57y5fs7vjdkkfoejyi + semver: 7.3.7 + webpack-merge: 4.2.2 + transitivePeerDependencies: + - '@swc/core' + - '@swc/wasm' + - '@types/node' + - typescript + dev: true + /@cspell/cspell-bundled-dicts/6.5.0: resolution: {integrity: sha512-rY1d9zNlMlhoOzN/S22zO6Z5171lAg0OX5ZtYepgyurnrrf6VL3tb31PD7pTC4N2aqCGXzk5DJql//vreg5buw==} engines: {node: '>=14'} @@ -1919,6 +1942,13 @@ packages: resolution: {integrity: sha512-/MB0RS0Gn01s4pgmjy0FvsLfr3RRMrRphEuvTRserNcM8XVtoIVAtrjig/Gg0DPwDrN8Clm0L1j7iQay6S8D0g==} dev: true + /@cspotcode/source-map-support/0.8.1: + resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==} + engines: {node: '>=12'} + dependencies: + '@jridgewell/trace-mapping': 0.3.9 + dev: true + /@csstools/normalize.css/12.0.0: resolution: {integrity: sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg==} dev: true @@ -2754,6 +2784,13 @@ packages: '@jridgewell/sourcemap-codec': 1.4.14 dev: true + /@jridgewell/trace-mapping/0.3.9: + resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==} + dependencies: + '@jridgewell/resolve-uri': 3.1.0 + '@jridgewell/sourcemap-codec': 1.4.14 + dev: true + /@leichtgewicht/base64-codec/1.0.0: resolution: {integrity: sha512-0cgP4lRBzh3F4tlpTfs7F+PJyBN8j5yUC9KrQFWp/bREswgzZVHE8T1rNyRDWgvALwwpPtnJDQfqWUmxI33Epg==} dev: false @@ -3855,6 +3892,22 @@ packages: engines: {node: '>=10.13.0'} dev: true + /@tsconfig/node10/1.0.9: + resolution: {integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==} + dev: true + + /@tsconfig/node12/1.0.11: + resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==} + dev: true + + /@tsconfig/node14/1.0.3: + resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==} + dev: true + + /@tsconfig/node16/1.0.3: + resolution: {integrity: sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==} + dev: true + /@types/babel__core/7.1.19: resolution: {integrity: sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw==} dependencies: @@ -4434,6 +4487,11 @@ packages: engines: {node: '>=0.4.0'} dev: true + /acorn-walk/8.2.0: + resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==} + engines: {node: '>=0.4.0'} + dev: true + /acorn/7.4.1: resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==} engines: {node: '>=0.4.0'} @@ -4572,6 +4630,10 @@ packages: picomatch: 2.3.1 dev: true + /arg/4.1.3: + resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==} + dev: true + /arg/5.0.2: resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==} dev: true @@ -5368,6 +5430,23 @@ packages: resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==} dev: true + /cosmiconfig-typescript-loader/1.0.9_lhkinfllngsms325uqqrakqdby: + resolution: {integrity: sha512-tRuMRhxN4m1Y8hP9SNYfz7jRwt8lZdWxdjg/ohg5esKmsndJIn4yT96oJVcf5x0eA11taXl+sIp+ielu529k6g==} + engines: {node: '>=12', npm: '>=6'} + peerDependencies: + '@types/node': '*' + cosmiconfig: '>=7' + typescript: '>=3' + dependencies: + '@types/node': 17.0.45 + cosmiconfig: 7.0.1 + ts-node: 10.9.1_vxrnv5tlr43u5xabofdb6zoswy + typescript: 4.8.2 + transitivePeerDependencies: + - '@swc/core' + - '@swc/wasm' + dev: true + /cosmiconfig/6.0.0: resolution: {integrity: sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==} engines: {node: '>=8'} @@ -5390,6 +5469,10 @@ packages: yaml: 1.10.2 dev: true + /create-require/1.1.1: + resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==} + dev: true + /cross-spawn/6.0.5: resolution: {integrity: sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==} engines: {node: '>=4.8'} @@ -5921,6 +6004,11 @@ packages: engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} dev: true + /diff/4.0.2: + resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==} + engines: {node: '>=0.3.1'} + dev: true + /dir-glob/3.0.1: resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==} engines: {node: '>=8'} @@ -8982,6 +9070,10 @@ packages: semver: 6.3.0 dev: true + /make-error/1.3.6: + resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==} + dev: true + /makeerror/1.0.12: resolution: {integrity: sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==} dependencies: @@ -11971,6 +12063,37 @@ packages: resolution: {integrity: sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==} dev: true + /ts-node/10.9.1_vxrnv5tlr43u5xabofdb6zoswy: + resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==} + hasBin: true + peerDependencies: + '@swc/core': '>=1.2.50' + '@swc/wasm': '>=1.2.50' + '@types/node': '*' + typescript: '>=2.7' + peerDependenciesMeta: + '@swc/core': + optional: true + '@swc/wasm': + optional: true + dependencies: + '@cspotcode/source-map-support': 0.8.1 + '@tsconfig/node10': 1.0.9 + '@tsconfig/node12': 1.0.11 + '@tsconfig/node14': 1.0.3 + '@tsconfig/node16': 1.0.3 + '@types/node': 17.0.45 + acorn: 8.8.0 + acorn-walk: 8.2.0 + arg: 4.1.3 + create-require: 1.1.1 + diff: 4.0.2 + make-error: 1.3.6 + typescript: 4.8.2 + v8-compile-cache-lib: 3.0.1 + yn: 3.1.1 + dev: true + /tsconfig-paths/3.14.1: resolution: {integrity: sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==} dependencies: @@ -12206,6 +12329,10 @@ packages: resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==} hasBin: true + /v8-compile-cache-lib/3.0.1: + resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==} + dev: true + /v8-compile-cache/2.3.0: resolution: {integrity: sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==} dev: true @@ -12367,6 +12494,12 @@ packages: webpack-sources: 2.3.1 dev: true + /webpack-merge/4.2.2: + resolution: {integrity: sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==} + dependencies: + lodash: 4.17.21 + dev: true + /webpack-sources/1.4.3: resolution: {integrity: sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==} dependencies: @@ -12805,6 +12938,11 @@ packages: yargs-parser: 20.2.9 dev: true + /yn/3.1.1: + resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==} + engines: {node: '>=6'} + dev: true + /yocto-queue/0.1.0: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} engines: {node: '>=10'} diff --git a/eth-pm/src/App.tsx b/eth-pm/src/App.tsx index 428c737..814a1f9 100644 --- a/eth-pm/src/App.tsx +++ b/eth-pm/src/App.tsx @@ -2,7 +2,7 @@ import "@ethersproject/shims"; import React, { useEffect, useState } from "react"; import "./App.css"; -import type { WakuLight } from "js-waku/lib/interfaces"; +import type { WakuPrivacy } from "js-waku/lib/interfaces"; import { AsymDecoder, SymDecoder } from "js-waku/lib/waku_message/version_1"; import { KeyPair, PublicKeyMessageEncryptionKey } from "./crypto"; import { Message } from "./messaging/Messages"; @@ -67,7 +67,7 @@ const useStyles = makeStyles({ }); function App() { - const [waku, setWaku] = useState(); + const [waku, setWaku] = useState(); const [provider, setProvider] = useState(); const [encryptionKeyPair, setEncryptionKeyPair] = useState< KeyPair | undefined @@ -80,11 +80,9 @@ function App() { const [messages, setMessages] = useState([]); const [address, setAddress] = useState(); const [peerStats, setPeerStats] = useState<{ - filterPeers: number; - lightPushPeers: number; + relayPeers: number; }>({ - filterPeers: 0, - lightPushPeers: 0, + relayPeers: 0, }); const classes = useStyles(); @@ -118,17 +116,7 @@ function App() { let unsubscribe: undefined | (() => Promise); - waku.filter - .subscribe([publicKeyMessageDecoder], observerPublicKeyMessage) - .then( - (_unsubscribe) => { - console.log("subscribed to ", PublicKeyContentTopic); - unsubscribe = _unsubscribe; - }, - (e) => { - console.error("Failed to subscribe", e); - } - ); + waku.relay.addObserver(publicKeyMessageDecoder, observerPublicKeyMessage); return function cleanUp() { if (typeof unsubscribe === "undefined") return; @@ -163,14 +151,7 @@ function App() { let unsubscribe: undefined | (() => Promise); - waku.filter.subscribe([privateMessageDecoder], observerPrivateMessage).then( - (_unsubscribe) => { - unsubscribe = _unsubscribe; - }, - (e) => { - console.error("Failed to subscribe", e); - } - ); + waku.relay.addObserver(privateMessageDecoder, observerPrivateMessage); return function cleanUp() { if (typeof unsubscribe === "undefined") return; @@ -182,12 +163,10 @@ function App() { if (!waku) return; const interval = setInterval(async () => { - const lightPushPeers = await waku.store.peers(); - const filterPeers = await waku.filter.peers(); + const peers = waku.relay.getPeers(); setPeerStats({ - filterPeers: filterPeers.length, - lightPushPeers: lightPushPeers.length, + relayPeers: peers.length, }); }, 1000); return () => clearInterval(interval); @@ -215,8 +194,7 @@ function App() { /> - Peers: {peerStats.filterPeers} filter, {peerStats.lightPushPeers}{" "} - light push + (Relay) Peers: {peerStats.relayPeers} Ethereum Private Message diff --git a/eth-pm/src/BroadcastPublicKey.tsx b/eth-pm/src/BroadcastPublicKey.tsx index bf97056..c0eceab 100644 --- a/eth-pm/src/BroadcastPublicKey.tsx +++ b/eth-pm/src/BroadcastPublicKey.tsx @@ -6,14 +6,14 @@ import { PublicKeyMessageEncryptionKey, } from "./crypto"; import { PublicKeyMessage } from "./messaging/wire"; -import type { WakuLight } from "js-waku/lib/interfaces"; +import type { WakuPrivacy } from "js-waku/lib/interfaces"; import { SymEncoder } from "js-waku/lib/waku_message/version_1"; import { PublicKeyContentTopic } from "./waku"; import type { TypedDataSigner } from "@ethersproject/abstract-signer"; interface Props { encryptionKeyPair: KeyPair | undefined; - waku: WakuLight | undefined; + waku: WakuPrivacy | undefined; address: string | undefined; signer: TypedDataSigner | undefined; } @@ -52,7 +52,7 @@ export default function BroadcastPublicKey({ PublicKeyMessageEncryptionKey ); - waku.lightPush.push(publicKeyMessageEncoder, { payload }); + await waku.relay.send(publicKeyMessageEncoder, { payload }); }; return ( diff --git a/eth-pm/src/messaging/Messaging.tsx b/eth-pm/src/messaging/Messaging.tsx index 96ad52f..a44a1fa 100644 --- a/eth-pm/src/messaging/Messaging.tsx +++ b/eth-pm/src/messaging/Messaging.tsx @@ -1,5 +1,5 @@ import Messages, { Message } from "./Messages"; -import type { WakuLight } from "js-waku/lib/interfaces"; +import type { WakuPrivacy } from "js-waku/lib/interfaces"; import SendMessage from "./SendMessage"; import { makeStyles } from "@material-ui/core"; @@ -13,7 +13,7 @@ const useStyles = makeStyles({ }); interface Props { - waku: WakuLight | undefined; + waku: WakuPrivacy | undefined; recipients: Map; messages: Message[]; } diff --git a/eth-pm/src/messaging/SendMessage.tsx b/eth-pm/src/messaging/SendMessage.tsx index 38f52b5..589b8f6 100644 --- a/eth-pm/src/messaging/SendMessage.tsx +++ b/eth-pm/src/messaging/SendMessage.tsx @@ -8,7 +8,7 @@ import { } from "@material-ui/core"; import React, { ChangeEvent, useState, KeyboardEvent } from "react"; import { utils } from "js-waku"; -import type { WakuLight } from "js-waku/lib/interfaces"; +import type { WakuPrivacy } from "js-waku/lib/interfaces"; import { AsymEncoder } from "js-waku/lib/waku_message/version_1"; import { PrivateMessage } from "./wire"; import { PrivateMessageContentTopic } from "../waku"; @@ -24,7 +24,7 @@ const useStyles = makeStyles((theme) => ({ })); export interface Props { - waku: WakuLight | undefined; + waku: WakuPrivacy | undefined; // address, public key recipients: Map; } @@ -106,7 +106,7 @@ export default function SendMessage({ waku, recipients }: Props) { } async function sendMessage( - waku: WakuLight, + waku: WakuPrivacy, recipientAddress: string, recipientPublicKey: Uint8Array, message: string, @@ -124,7 +124,7 @@ async function sendMessage( ); console.log("pushing"); - const res = await waku.lightPush.push(encoder, { payload }); + const res = await waku.relay.send(encoder, { payload }); console.log("Message sent", res); callback(Boolean(res.recipients.length)); } diff --git a/eth-pm/src/waku.ts b/eth-pm/src/waku.ts index b3261ac..232cc95 100644 --- a/eth-pm/src/waku.ts +++ b/eth-pm/src/waku.ts @@ -1,20 +1,23 @@ import { Dispatch, SetStateAction } from "react"; import { Protocols, utils } from "js-waku"; -import type { WakuLight, Message as WakuMessage } from "js-waku/lib/interfaces"; +import type { + Message as WakuMessage, + WakuPrivacy, +} from "js-waku/lib/interfaces"; import { PrivateMessage, PublicKeyMessage } from "./messaging/wire"; import { validatePublicKeyMessage } from "./crypto"; import { Message } from "./messaging/Messages"; import { equals } from "uint8arrays/equals"; import { waitForRemotePeer } from "js-waku/lib/wait_for_remote_peer"; -import { createLightNode } from "js-waku/lib/create_waku"; +import { createPrivacyNode } from "js-waku/lib/create_waku"; export const PublicKeyContentTopic = "/eth-pm/1/public-key/proto"; export const PrivateMessageContentTopic = "/eth-pm/1/private-message/proto"; -export async function initWaku(): Promise { - const waku = await createLightNode({ defaultBootstrap: true }); +export async function initWaku(): Promise { + const waku = await createPrivacyNode({ defaultBootstrap: true }); await waku.start(); - await waitForRemotePeer(waku, [Protocols.Filter, Protocols.LightPush]); + await waitForRemotePeer(waku, [Protocols.Relay]); return waku; }