-
Notifications
You must be signed in to change notification settings - Fork 39
/
fund-button.js
97 lines (96 loc) · 2.53 KB
/
fund-button.js
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
import {
Box,
Button,
Field,
Form,
Popup,
Text,
useContract,
useWeb3,
} from "@kleros/components";
import { useCallback, useMemo } from "react";
export default function FundButton({
totalCost,
totalContribution,
submissionID,
}) {
const [accounts] = useWeb3("eth", "getAccounts");
const amountNeeded = useMemo(() => totalCost.sub(totalContribution), [
totalCost,
totalContribution,
]);
const { web3 } = useWeb3();
const amountNeededString = web3.utils.fromWei(amountNeeded);
const { send } = useContract("proofOfHumanity", "fundSubmission");
return (
<Popup
trigger={
<Button
sx={{
marginBottom: 1,
width: "100%",
}}
disabled={!accounts?.[0]}
>
Fund Submission
</Button>
}
modal
>
<Box sx={{ padding: 2 }}>
<Form
createValidationSchema={useCallback(
({ eth, web3: _web3 }) => ({
contribution: eth()
.test({
test(value) {
if (value.lte(_web3.utils.toBN(0)))
return this.createError({
message: `You need to contribute something.`,
});
return true;
},
})
.test({
test(value) {
if (value.gt(amountNeeded))
return this.createError({
message: `There's no need to contribute this much.`,
});
return true;
},
}),
}),
[amountNeeded]
)}
onSubmit={({ contribution }) =>
send(submissionID, { value: contribution })
}
>
{({ isSubmitting }) => (
<>
<Field
name="contribution"
label={({ field }) => (
<Text>
Contribution
<Text
sx={{ fontWeight: "bold" }}
onClick={() => field[2].setValue(amountNeededString)}
>
(Needed: {amountNeededString})
</Text>
</Text>
)}
type="number"
/>
<Button type="submit" loading={isSubmitting}>
Fund Submission
</Button>
</>
)}
</Form>
</Box>
</Popup>
);
}