From 31d0efc8d2c8e4e4cd42207ba6cab613b114f4b5 Mon Sep 17 00:00:00 2001 From: Franck Royer Date: Tue, 29 Jun 2021 15:32:29 +1000 Subject: [PATCH] Organise elements in fieldboxes --- examples/eth-dm/package-lock.json | 31 +++++ examples/eth-dm/package.json | 1 + examples/eth-dm/src/App.tsx | 127 ++++++++++++++---- examples/eth-dm/src/InitWaku.tsx | 2 +- .../src/key_pair_handling/KeyPairHandling.tsx | 90 ++++++++----- .../src/key_pair_handling/LoadKeyPair.tsx | 43 ++---- .../src/key_pair_handling/PasswordInput.tsx | 24 ++++ .../src/key_pair_handling/SaveKeyPair.tsx | 43 ++---- 8 files changed, 232 insertions(+), 129 deletions(-) create mode 100644 examples/eth-dm/src/key_pair_handling/PasswordInput.tsx diff --git a/examples/eth-dm/package-lock.json b/examples/eth-dm/package-lock.json index 875cb74f35..18ca7dca48 100644 --- a/examples/eth-dm/package-lock.json +++ b/examples/eth-dm/package-lock.json @@ -8,6 +8,7 @@ "version": "0.1.0", "dependencies": { "@material-ui/core": "^4.11.4", + "@material-ui/icons": "^4.11.2", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", @@ -3451,6 +3452,28 @@ } } }, + "node_modules/@material-ui/icons": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz", + "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==", + "dependencies": { + "@babel/runtime": "^7.4.4" + }, + "engines": { + "node": ">=8.0.0" + }, + "peerDependencies": { + "@material-ui/core": "^4.0.0", + "@types/react": "^16.8.6 || ^17.0.0", + "react": "^16.8.0 || ^17.0.0", + "react-dom": "^16.8.0 || ^17.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@material-ui/styles": { "version": "4.11.4", "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz", @@ -26510,6 +26533,14 @@ "react-transition-group": "^4.4.0" } }, + "@material-ui/icons": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz", + "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==", + "requires": { + "@babel/runtime": "^7.4.4" + } + }, "@material-ui/styles": { "version": "4.11.4", "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz", diff --git a/examples/eth-dm/package.json b/examples/eth-dm/package.json index 4851ff1e55..1c7cb88c86 100644 --- a/examples/eth-dm/package.json +++ b/examples/eth-dm/package.json @@ -5,6 +5,7 @@ "homepage": "/js-waku/eth-dm", "dependencies": { "@material-ui/core": "^4.11.4", + "@material-ui/icons": "^4.11.2", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", diff --git a/examples/eth-dm/src/App.tsx b/examples/eth-dm/src/App.tsx index b1580a2859..07dcbbd0a9 100644 --- a/examples/eth-dm/src/App.tsx +++ b/examples/eth-dm/src/App.tsx @@ -9,16 +9,61 @@ import { createPublicKeyMessage, KeyPair } from './crypto'; import { encode, PublicKeyMessage } from './messages'; import Messages, { Message } from './Messages'; import 'fontsource-roboto'; -import { Button } from '@material-ui/core'; +import { + AppBar, + Button, + IconButton, + Toolbar, + Typography, +} from '@material-ui/core'; import SendMessage from './SendMessage'; import KeyPairHandling from './key_pair_handling/KeyPairHandling'; import InitWaku from './InitWaku'; +import { + createMuiTheme, + ThemeProvider, + makeStyles, +} 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'; declare let window: any; +const theme = createMuiTheme({ + palette: { + primary: { + main: purple[500], + }, + secondary: { + main: teal[600], + }, + }, +}); + +const useStyles = makeStyles({ + root: { + textAlign: 'center', + display: 'flex', + flexDirection: 'column', + minHeight: '100vh', + }, + appBar: { + // height: '200p', + }, + container: { + display: 'flex', + flex: 1, + }, + main: { + flex: 1, + margin: '10px', + }, + wakuStatus: {}, +}); + function App() { const [waku, setWaku] = useState(); const [provider, setProvider] = useState(); @@ -28,6 +73,8 @@ function App() { const [messages, setMessages] = useState([]); const [address, setAddress] = useState(); + const classes = useStyles(); + useEffect(() => { if (provider) return; try { @@ -72,34 +119,58 @@ function App() { }; return ( -
-
- - setEthDmKeyPair(keyPair)} - /> -
- + +
+ + + Ethereum Direct Message + + + + + + +
+
+ +
+ Eth-DM Key Pair + setEthDmKeyPair(keyPair)} + /> + +
+
+ Messaging + + +
+
- - -
-
+ + ); } diff --git a/examples/eth-dm/src/InitWaku.tsx b/examples/eth-dm/src/InitWaku.tsx index 87e7553598..31eb4a3477 100644 --- a/examples/eth-dm/src/InitWaku.tsx +++ b/examples/eth-dm/src/InitWaku.tsx @@ -79,7 +79,7 @@ export default function InitWaku({ }; }); - return

{!!waku ? 'Waku is ready' : 'Waku is loading'}

; + return
; } async function initWaku(): Promise { diff --git a/examples/eth-dm/src/key_pair_handling/KeyPairHandling.tsx b/examples/eth-dm/src/key_pair_handling/KeyPairHandling.tsx index ea22c6a91c..a9db833941 100644 --- a/examples/eth-dm/src/key_pair_handling/KeyPairHandling.tsx +++ b/examples/eth-dm/src/key_pair_handling/KeyPairHandling.tsx @@ -1,8 +1,32 @@ import { Button } from '@material-ui/core'; import { LoadKeyPair } from './LoadKeyPair'; import { SaveKeyPair } from './SaveKeyPair'; -import React from 'react'; +import React, { useState } from 'react'; import { generateEthDmKeyPair, KeyPair } from '../crypto'; +import { makeStyles } from '@material-ui/core/styles'; +import PasswordInput from './PasswordInput'; + +const useStyles = makeStyles({ + root: { + textAlign: 'center', + display: 'flex', + alignItems: 'center', + flexDirection: 'column', + margin: '5px', + }, + generate: { margin: '5px' }, + storage: { + margin: '5px', + }, + loadSave: { + display: 'flex', + flexDirection: 'row', + margin: '5px', + }, + loadSaveButton: { + margin: '5px', + }, +}); export interface Props { ethDmKeyPair: KeyPair | undefined; @@ -13,6 +37,10 @@ export default function KeyPairHandling({ ethDmKeyPair, setEthDmKeyPair, }: Props) { + const classes = useStyles(); + + const [password, setPassword] = useState(); + const generateKeyPair = () => { if (ethDmKeyPair) return; @@ -26,43 +54,33 @@ export default function KeyPairHandling({ }; return ( -
-
+ -
-
- setEthDmKeyPair(keyPair)} - disabled={!!ethDmKeyPair} + Generate Eth-DM Key Pair + +
+ setPassword(p)} /> -
-
- +
+
+ setEthDmKeyPair(keyPair)} + disabled={!!ethDmKeyPair} + password={password} + /> +
+
+ +
+
); diff --git a/examples/eth-dm/src/key_pair_handling/LoadKeyPair.tsx b/examples/eth-dm/src/key_pair_handling/LoadKeyPair.tsx index 23b864d295..2a79cb37c0 100644 --- a/examples/eth-dm/src/key_pair_handling/LoadKeyPair.tsx +++ b/examples/eth-dm/src/key_pair_handling/LoadKeyPair.tsx @@ -1,20 +1,15 @@ -import { Button, TextField } from '@material-ui/core'; -import React, { ChangeEvent, useState } from 'react'; +import { Button } from '@material-ui/core'; +import React from 'react'; import { loadKeyPairFromStorage } from './key_pair_storage'; import { KeyPair } from '../crypto'; export interface Props { setEthDmKeyPair: (keyPair: KeyPair) => void; disabled: boolean; + password: string | undefined; } -export function LoadKeyPair({ disabled, setEthDmKeyPair }: Props) { - const [password, setPassword] = useState(); - - const handlePasswordChange = (event: ChangeEvent) => { - setPassword(event.target.value); - }; - +export function LoadKeyPair({ password, disabled, setEthDmKeyPair }: Props) { const loadKeyPair = () => { if (disabled) return; if (!password) return; @@ -26,29 +21,13 @@ export function LoadKeyPair({ disabled, setEthDmKeyPair }: Props) { }; return ( -
- - -
+ Load Eth-DM Key Pair from storage + ); } diff --git a/examples/eth-dm/src/key_pair_handling/PasswordInput.tsx b/examples/eth-dm/src/key_pair_handling/PasswordInput.tsx new file mode 100644 index 0000000000..cc0e770555 --- /dev/null +++ b/examples/eth-dm/src/key_pair_handling/PasswordInput.tsx @@ -0,0 +1,24 @@ +import { TextField } from '@material-ui/core'; +import React, { ChangeEvent } from 'react'; + +interface Props { + password: string | undefined; + setPassword: (password: string) => void; +} + +export default function PasswordInput({ password, setPassword }: Props) { + const handlePasswordChange = (event: ChangeEvent) => { + setPassword(event.target.value); + }; + + return ( + + ); +} diff --git a/examples/eth-dm/src/key_pair_handling/SaveKeyPair.tsx b/examples/eth-dm/src/key_pair_handling/SaveKeyPair.tsx index 2d476a3a70..f8fef3399a 100644 --- a/examples/eth-dm/src/key_pair_handling/SaveKeyPair.tsx +++ b/examples/eth-dm/src/key_pair_handling/SaveKeyPair.tsx @@ -1,19 +1,14 @@ -import { Button, TextField } from '@material-ui/core'; -import React, { ChangeEvent, useState } from 'react'; +import { Button } from '@material-ui/core'; +import React from 'react'; import { KeyPair } from '../crypto'; import { saveKeyPairToStorage } from './key_pair_storage'; export interface Props { ethDmKeyPair: KeyPair | undefined; + password: string | undefined; } -export function SaveKeyPair({ ethDmKeyPair }: Props) { - const [password, setPassword] = useState(); - - const handlePasswordChange = (event: ChangeEvent) => { - setPassword(event.target.value); - }; - +export function SaveKeyPair({ password, ethDmKeyPair }: Props) { const saveKeyPair = () => { if (!ethDmKeyPair) return; if (!password) return; @@ -23,29 +18,13 @@ export function SaveKeyPair({ ethDmKeyPair }: Props) { }; return ( -
- - -
+ Save Eth-DM Key Pair to storage + ); }