git.iko.soy/bridge
on df0c310 help sign in
bridge/src/views/Release/WithdrawForm.tsx
137 lines 4.0 kB history raw
1import cn from 'classnames';
2import { Box, Text } from '@tlon/indigo-react';
3import { AddressButton } from 'components/AddressButton';
4import InlineEthereumTransaction from 'components/InlineEthereumTransaction';
5import BridgeForm from 'form/BridgeForm';
6import { convertToNumber } from 'form/formatters';
7import FormError from 'form/FormError';
8import { AddressInput, NumberInput } from 'form/Inputs';
9import { buildNumberValidator, composeValidator } from 'form/validators';
10import { Grid, Flex } from 'indigo-react';
11import { pluralize } from 'lib/pluralize';
12import { useCallback, useEffect, useMemo } from 'react';
13import { useStarReleaseCache } from 'store/starRelease';
14import { useWithdrawStars } from './useWithdrawStars';
16interface WithdrawFormProps {
17 afterSubmit: VoidFunction;
20export const WithdrawForm = ({ afterSubmit }: WithdrawFormProps) => {
21 const {
22 bind,
23 construct,
24 unconstruct,
25 inputsLocked,
26 completed,
27 reset,
28 } = useWithdrawStars();
30 const {
31 syncStarReleaseDetails,
32 starReleaseDetails,
33 }: any = useStarReleaseCache();
35 useEffect(() => {
36 syncStarReleaseDetails();
37 }, [syncStarReleaseDetails]);
39 const onValues = useCallback(
40 ({ valid, values }) => {
41 if (valid) {
42 construct(values.address, convertToNumber(values.numStars));
43 } else {
44 unconstruct();
45 }
46 },
47 [construct, unconstruct]
48 );
50 const canWithdraw = starReleaseDetails.map((b: any) => b.available);
51 const total = starReleaseDetails.map((b: any) => b.total);
53 const validate = useMemo(
54 () =>
55 composeValidator(
56 {
57 numStars: buildNumberValidator(0, canWithdraw.getOrElse(0) + 1),
58 },
59 (values, errors) => (inputsLocked ? false : errors)
60 ),
61 [canWithdraw, inputsLocked]
62 );
64 const initialValues = {};
66 return (
67 <>
68 <BridgeForm
69 initialValues={initialValues}
70 onValues={onValues}
71 validate={validate}
72 afterSubmit={afterSubmit}>
73 {({ values, form }: any) => (
74 <>
75 {!completed && (
76 <>
77 <Box
78 className={cn('info-row', {
79 available: canWithdraw.value > 0,
80 })}>
81 <Text>{`${canWithdraw.value} of ${total.value} available`}</Text>
82 </Box>
83 <Box className="info-row">
84 <Text>{`${total.value -
85 canWithdraw.value} are in lockup`}</Text>
86 </Box>
87 <Grid.Item
88 cols={[1, 4]}
89 label="Stars"
90 as={NumberInput}
91 placeholder="0"
92 name="numStars"
93 disabled={inputsLocked}
94 />
95 <Grid.Item full className="f5" cols={[1, 13]} as={Flex} col>
96 <Flex.Item
97 name="address"
98 as={AddressInput}
99 label="Withdraw To"
100 disabled={inputsLocked}
101 />
102 <Box>
103 <AddressButton inputName="address">
104 Use my address
105 </AddressButton>
106 </Box>
107 </Grid.Item>
108 </>
109 )}
111 <Grid.Item full as={FormError} />
112 {completed && (
113 <>
114 <Grid.Item full className="pv4">
115 {values.numStars}{' '}
116 {pluralize(values.numStars, 'star has', 'stars have')} been
117 withdrawn
118 </Grid.Item>
119 <Grid.Divider />
120 </>
121 )}
122 <Grid.Item
123 full
124 as={InlineEthereumTransaction}
125 {...bind}
126 label="Withdraw Stars"
127 onReturn={() => {
128 reset();
129 form.reset();
130 }}
131 />
132 </>
133 )}
134 </BridgeForm>
135 </>
136 );
137};