-
Notifications
You must be signed in to change notification settings - Fork 0
/
TemplateModule.jsx
109 lines (98 loc) · 2.74 KB
/
TemplateModule.jsx
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
import React, { useEffect, useState } from "react";
import { Form, Input, Grid, Card, Statistic, Dropdown } from "semantic-ui-react";
import TxButton from "./TxButton";
export default function Transfer(props) {
const { api, keyring } = props;
// The transaction submission status
const [status, setStatus] = useState("");
// The currently stored value
const [currentValue, setCurrentValue] = useState(0);
const initialState = {
addressFrom: "",
newValue: 0,
};
const [formState, setFormState] = useState(initialState);
const { addressFrom, newValue } = formState;
const adminPair = !!addressFrom && keyring.getPair(addressFrom);
// This was leftover from the runtime upgrade example.
// Do I still need it?
const keyringOptions = keyring.getPairs().map(account => ({
key: account.address,
value: account.address,
text: account.meta.name.toUpperCase()
}));
const onChange = (first, data) => {
setFormState(formState => {
return {
...formState,
[data.state]: data.value
};
});
};
useEffect(() => {
let unsubscribe;
api.query.templateModule.something(newValue => {
// The storage value is an Option<u32>
// So we have to check whether it is None first
// There is also unwrapOr
if (newValue.isNone){
setCurrentValue("<None>");
}
else{
setCurrentValue(newValue.unwrap().toNumber());
}
}).then(unsub => {
unsubscribe = unsub;
})
.catch(console.error);
return () => unsubscribe && unsubscribe();
}, [api.query.templateModule, api.query.templateModule.something]);
return (
<Grid.Column>
<h1>Template Module</h1>
<Card>
<Card.Content textAlign="center">
<Statistic
label="Current Value"
value={currentValue}
/>
</Card.Content>
</Card>
<Form>
<Form.Field>
<Dropdown
placeholder="Select from your accounts"
fluid
label="From"
onChange={onChange}
search
selection
state="addressFrom"
options={keyringOptions}
/>
</Form.Field>
<Form.Field>
<Input
type="number"
id="new_value"
state="newValue"
label="New Value"
onChange={onChange}
/>
</Form.Field>
<Form.Field>
<TxButton
api={api}
fromPair={adminPair}
label={"Store Something"}
params={[newValue]}
setStatus={setStatus}
tx={api.tx.templateModule.doSomething}
sudo={false}
/>
{status}
</Form.Field>
</Form>
</Grid.Column>
);
}