From 5bc0eddd3a4cbd344ce1970423bc88fcd1577755 Mon Sep 17 00:00:00 2001 From: Franck Royer Date: Tue, 29 Jun 2021 15:46:07 +1000 Subject: [PATCH] Move messaging components to module --- examples/eth-dm/src/App.tsx | 58 +++-------------- examples/eth-dm/src/BroadcastPublicKey.tsx | 62 +++++++++++++++++++ examples/eth-dm/src/InitWaku.tsx | 8 ++- examples/eth-dm/src/crypto.ts | 2 +- .../eth-dm/src/{ => messaging}/Messages.tsx | 3 + .../src/{ => messaging}/SendMessage.tsx | 6 +- .../src/{messages.ts => messaging/wire.ts} | 0 7 files changed, 84 insertions(+), 55 deletions(-) create mode 100644 examples/eth-dm/src/BroadcastPublicKey.tsx rename examples/eth-dm/src/{ => messaging}/Messages.tsx (94%) rename examples/eth-dm/src/{ => messaging}/SendMessage.tsx (95%) rename examples/eth-dm/src/{messages.ts => messaging/wire.ts} (100%) diff --git a/examples/eth-dm/src/App.tsx b/examples/eth-dm/src/App.tsx index 07dcbbd0a9..674910afaf 100644 --- a/examples/eth-dm/src/App.tsx +++ b/examples/eth-dm/src/App.tsx @@ -2,21 +2,19 @@ import '@ethersproject/shims'; import React, { useEffect, useState } from 'react'; import './App.css'; -import { Waku, WakuMessage } from 'js-waku'; +import { Waku } from 'js-waku'; import { ethers } from 'ethers'; import { Web3Provider } from '@ethersproject/providers'; -import { createPublicKeyMessage, KeyPair } from './crypto'; -import { encode, PublicKeyMessage } from './messages'; -import Messages, { Message } from './Messages'; +import { KeyPair } from './crypto'; +import Messages, { Message } from './messaging/Messages'; import 'fontsource-roboto'; import { AppBar, - Button, IconButton, Toolbar, Typography, } from '@material-ui/core'; -import SendMessage from './SendMessage'; +import SendMessage from './messaging/SendMessage'; import KeyPairHandling from './key_pair_handling/KeyPairHandling'; import InitWaku from './InitWaku'; import { @@ -26,9 +24,7 @@ import { } from '@material-ui/core/styles'; import { teal, purple, green } from '@material-ui/core/colors'; import WifiIcon from '@material-ui/icons/Wifi'; - -export const PublicKeyContentTopic = '/eth-dm/1/public-key/json'; -export const DirectMessageContentTopic = '/eth-dm/1/direct-message/json'; +import BroadcastPublicKey from './BroadcastPublicKey'; declare let window: any; @@ -68,7 +64,6 @@ function App() { const [waku, setWaku] = useState(); const [provider, setProvider] = useState(); const [ethDmKeyPair, setEthDmKeyPair] = useState(); - const [publicKeyMsg, setPublicKeyMsg] = useState(); const [publicKeys, setPublicKeys] = useState>(new Map()); const [messages, setMessages] = useState([]); const [address, setAddress] = useState(); @@ -93,31 +88,6 @@ function App() { .then((address) => setAddress(address)); }); - 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', e); - }); - } 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', e); - }); - }) - .catch((e) => { - console.error('Failed to creat Eth-Dm Publication message', e); - }); - } - }; - return (
@@ -153,14 +123,11 @@ function App() { ethDmKeyPair={ethDmKeyPair} setEthDmKeyPair={(keyPair) => setEthDmKeyPair(keyPair)} /> - +
Messaging @@ -175,8 +142,3 @@ function App() { } export default App; - -function encodePublicKeyWakuMessage(ethDmMsg: PublicKeyMessage): WakuMessage { - const payload = encode(ethDmMsg); - return WakuMessage.fromBytes(payload, PublicKeyContentTopic); -} diff --git a/examples/eth-dm/src/BroadcastPublicKey.tsx b/examples/eth-dm/src/BroadcastPublicKey.tsx new file mode 100644 index 0000000000..d46fd32c9d --- /dev/null +++ b/examples/eth-dm/src/BroadcastPublicKey.tsx @@ -0,0 +1,62 @@ +import { Button } from '@material-ui/core'; +import React, { useState } from 'react'; +import { createPublicKeyMessage, KeyPair } from './crypto'; +import { encode, PublicKeyMessage } from './messaging/wire'; +import { WakuMessage, Waku } from 'js-waku'; +import { Signer } from '@ethersproject/abstract-signer'; +import { PublicKeyContentTopic } from './InitWaku'; + +interface Props { + ethDmKeyPair: KeyPair | undefined; + waku: Waku | undefined; + signer: Signer | undefined; +} + +export default function BroadcastPublicKey({ + signer, + ethDmKeyPair, + waku, +}: Props) { + const [publicKeyMsg, setPublicKeyMsg] = useState(); + + const broadcastPublicKey = () => { + if (!ethDmKeyPair) return; + if (!signer) return; + if (!waku) return; + + if (publicKeyMsg) { + const wakuMsg = encodePublicKeyWakuMessage(publicKeyMsg); + waku.lightPush.push(wakuMsg).catch((e) => { + console.error('Failed to send Public Key Message', e); + }); + } else { + createPublicKeyMessage(signer, ethDmKeyPair.publicKey) + .then((msg) => { + setPublicKeyMsg(msg); + const wakuMsg = encodePublicKeyWakuMessage(msg); + waku.lightPush.push(wakuMsg).catch((e) => { + console.error('Failed to send Public Key Message', e); + }); + }) + .catch((e) => { + console.error('Failed to creat Eth-Dm Publication message', e); + }); + } + }; + + return ( + + ); +} + +function encodePublicKeyWakuMessage(ethDmMsg: PublicKeyMessage): WakuMessage { + const payload = encode(ethDmMsg); + return WakuMessage.fromBytes(payload, PublicKeyContentTopic); +} diff --git a/examples/eth-dm/src/InitWaku.tsx b/examples/eth-dm/src/InitWaku.tsx index 31eb4a3477..e2beb50888 100644 --- a/examples/eth-dm/src/InitWaku.tsx +++ b/examples/eth-dm/src/InitWaku.tsx @@ -1,9 +1,11 @@ import { Dispatch, SetStateAction, useEffect } from 'react'; import { Environment, getStatusFleetNodes, Waku, WakuMessage } from 'js-waku'; -import { decode, DirectMessage, PublicKeyMessage } from './messages'; +import { decode, DirectMessage, PublicKeyMessage } from './messaging/wire'; import { decryptMessage, KeyPair, validatePublicKeyMessage } from './crypto'; -import { Message } from './Messages'; -import { DirectMessageContentTopic, PublicKeyContentTopic } from './App'; +import { Message } from './messaging/Messages'; + +export const PublicKeyContentTopic = '/eth-dm/1/public-key/json'; +export const DirectMessageContentTopic = '/eth-dm/1/direct-message/json'; interface Props { waku: Waku | undefined; diff --git a/examples/eth-dm/src/crypto.ts b/examples/eth-dm/src/crypto.ts index f0db5d213e..b357efcfef 100644 --- a/examples/eth-dm/src/crypto.ts +++ b/examples/eth-dm/src/crypto.ts @@ -3,7 +3,7 @@ import '@ethersproject/shims'; import * as EthCrypto from 'eth-crypto'; import { ethers } from 'ethers'; import { Signer } from '@ethersproject/abstract-signer'; -import { DirectMessage, PublicKeyMessage } from './messages'; +import { DirectMessage, PublicKeyMessage } from './messaging/wire'; export interface KeyPair { privateKey: string; diff --git a/examples/eth-dm/src/Messages.tsx b/examples/eth-dm/src/messaging/Messages.tsx similarity index 94% rename from examples/eth-dm/src/Messages.tsx rename to examples/eth-dm/src/messaging/Messages.tsx index 1d3384bc4d..0f9f530461 100644 --- a/examples/eth-dm/src/Messages.tsx +++ b/examples/eth-dm/src/messaging/Messages.tsx @@ -1,3 +1,6 @@ +/** + * Clear text message + */ export interface Message { text: string; timestamp: Date; diff --git a/examples/eth-dm/src/SendMessage.tsx b/examples/eth-dm/src/messaging/SendMessage.tsx similarity index 95% rename from examples/eth-dm/src/SendMessage.tsx rename to examples/eth-dm/src/messaging/SendMessage.tsx index d38cba8437..9057c21df9 100644 --- a/examples/eth-dm/src/SendMessage.tsx +++ b/examples/eth-dm/src/messaging/SendMessage.tsx @@ -8,9 +8,9 @@ import { } from '@material-ui/core'; import React, { ChangeEvent, useState, KeyboardEvent } from 'react'; import { Waku, WakuMessage } from 'js-waku'; -import { DirectMessage, encode } from './messages'; -import { DirectMessageContentTopic } from './App'; -import { encryptMessage } from './crypto'; +import { DirectMessage, encode } from './wire'; +import { encryptMessage } from '../crypto'; +import { DirectMessageContentTopic } from '../InitWaku'; const useStyles = makeStyles((theme) => ({ formControl: { diff --git a/examples/eth-dm/src/messages.ts b/examples/eth-dm/src/messaging/wire.ts similarity index 100% rename from examples/eth-dm/src/messages.ts rename to examples/eth-dm/src/messaging/wire.ts