waku-org
/
js-waku
mirror of https://github.com/waku-org/js-waku.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Extract Key Pair Handling as separate component

This commit is contained in:
Franck Royer 2021-06-29 12:05:16 +10:00
parent b677b0eb7b
commit 53182e834d
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
2 changed files with 71 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
examples/eth-dm/src/App.tsx
View File

@ -8,7 +8,6 @@ import { Web3Provider } from '@ethersproject/providers';
import {
createPublicKeyMessage,
decryptMessage,
generateEthDmKeyPair,
KeyPair,
validatePublicKeyMessage,
} from './crypto';
@ -17,8 +16,7 @@ import { Message, Messages } from './Messages';
import 'fontsource-roboto';
import { Button } from '@material-ui/core';
import { SendMessage } from './SendMessage';
import { SaveKeyPair } from './key_pair_handling/SaveKeyPair';
import { LoadKeyPair } from './key_pair_handling/LoadKeyPair';
import { KeyPairHandling } from './key_pair_handling/KeyPairHandling';
export const PublicKeyContentTopic = '/eth-dm/1/public-key/json';
export const DirectMessageContentTopic = '/eth-dm/1/direct-message/json';
@ -56,18 +54,6 @@ function App() {
});
}, [waku]);
const generateKeyPair = () => {
if (ethDmKeyPair) return;
generateEthDmKeyPair()
.then((keyPair) => {
setEthDmKeyPair(keyPair);
})
.catch((e) => {
console.error('Failed to generate Key Pair', e);
});
};
const observerPublicKeyMessage = handlePublicKeyMessage.bind(
{},
ethDmKeyPair?.publicKey,
@ -135,43 +121,10 @@ function App() {
<div className="App">
<header className="App-header">
{wakuReady}
<div
style={{
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
}}
>
<Button
variant="contained"
color="primary"
onClick={generateKeyPair}
disabled={!!ethDmKeyPair}
>
Generate Eth-DM Key Pair
</Button>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
}}
>
<LoadKeyPair
<KeyPairHandling
ethDmKeyPair={ethDmKeyPair}
setEthDmKeyPair={(keyPair) => setEthDmKeyPair(keyPair)}
disabled={!!ethDmKeyPair}
/>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
}}
>
<SaveKeyPair ethDmKeyPair={ethDmKeyPair} />
</div>
<div>
<Button
variant="contained"

66
examples/eth-dm/src/key_pair_handling/KeyPairHandling.tsx Normal file
View File

@ -0,0 +1,66 @@
import { Button } from '@material-ui/core';
import { LoadKeyPair } from './LoadKeyPair';
import { SaveKeyPair } from './SaveKeyPair';
import React from 'react';
import { generateEthDmKeyPair, KeyPair } from '../crypto';
export interface Props {
ethDmKeyPair: KeyPair | undefined;
setEthDmKeyPair: (keyPair: KeyPair) => void;
}
export function KeyPairHandling({ ethDmKeyPair, setEthDmKeyPair }: Props) {
const generateKeyPair = () => {
if (ethDmKeyPair) return;
generateEthDmKeyPair()
.then((keyPair) => {
setEthDmKeyPair(keyPair);
})
.catch((e) => {
console.error('Failed to generate Key Pair', e);
});
};
return (
<div>
<div
style={{
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
}}
>
<Button
variant="contained"
color="primary"
onClick={generateKeyPair}
disabled={!!ethDmKeyPair}
>
Generate Eth-DM Key Pair
</Button>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
}}
>
<LoadKeyPair
setEthDmKeyPair={(keyPair) => setEthDmKeyPair(keyPair)}
disabled={!!ethDmKeyPair}
/>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
}}
>
<SaveKeyPair ethDmKeyPair={ethDmKeyPair} />
</div>
</div>
);
}