-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
121 lines (107 loc) · 3.01 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
// Copyright 2017-2020 @polkadot/example-react authors & contributors
// SPDX-License-Identifier: Apache-2.0
import React, { useCallback, useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import Identicon from '@polkadot/react-identicon';
import keyring from '@polkadot/ui-keyring';
import settings from '@polkadot/ui-settings';
import { cryptoWaitReady, mnemonicGenerate } from '@polkadot/util-crypto';
interface Props {
className?: string;
}
const rootElement = document.getElementById('example');
if (!rootElement) {
throw new Error('Unable to find element with id \'example\'');
}
function App ({ className }: Props): React.ReactElement<Props> | null {
const [address, setAddress] = useState<string | null>(null);
const [phrase, setPhrase] = useState<string | null>(null);
const [ss58Format, setSS58Format] = useState(42);
const _onClickNew = useCallback(
(): void => {
const phrase = mnemonicGenerate(12);
const { address } = keyring.createFromUri(phrase);
setAddress(keyring.encodeAddress(address, ss58Format));
setPhrase(phrase);
},
[ss58Format]
);
const _onChangeSS58Format = useCallback(
({ currentTarget: { value } }: React.SyntheticEvent<HTMLSelectElement>): void => {
setSS58Format(parseInt(value, 10));
},
[]
);
useEffect((): void => {
_onClickNew();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect((): void => {
address && setAddress(keyring.encodeAddress(address, ss58Format));
}, [address, ss58Format]);
if (!address || !phrase) {
return null;
}
return (
<div className={className}>
<section>
<button onClick={_onClickNew}>another random address</button>
</section>
<section>
<label>phrase</label>
<textarea
cols={40}
readOnly
rows={4}
value={phrase}
/>
</section>
<section>
<label>icons</label>
<Identicon
className='icon'
value={address}
/>
<Identicon
className='icon'
theme='polkadot'
value={address}
/>
<Identicon
className='icon'
theme='beachball'
value={address}
/>
</section>
<section>
<label>address</label>
{address}
</section>
<section>
<label>ss58 format</label>
<select
onChange={_onChangeSS58Format}
value={ss58Format}
>
{settings.availablePrefixes
.filter((_, index): boolean => index !== 0)
.map(({ text, value }): React.ReactNode => (
<option
key={value}
value={value}
>
{text}
</option>
))
}
</select>
</section>
</div>
);
}
cryptoWaitReady()
.then((): void => {
keyring.loadAll({ ss58Format: 42, type: 'sr25519' });
ReactDOM.render(<App />, rootElement);
})
.catch(console.error);