git.iko.soy/bridge
on bd2bfea help sign in
bridge/src/views/IssueChild.js
194 lines 5.3 kB history raw
1import React, { useCallback, useMemo, useState } from 'react';
2import cn from 'classnames';
3import { Grid, Text } from 'indigo-react';
4import * as azimuth from 'azimuth-js';
5import ob from 'urbit-ob';
7import { useNetwork } from 'store/network';
8import { usePointCache } from 'store/pointCache';
9import { usePointCursor } from 'store/pointCursor';
11import * as need from 'lib/need';
12import useEthereumTransaction from 'lib/useEthereumTransaction';
13import { GAS_LIMITS } from 'lib/constants';
14import { patp2dec } from 'lib/patp2dec';
15import { getSpawnCandidate } from 'lib/child';
16import { useLocalRouter } from 'lib/LocalRouter';
17import useConstant from 'lib/useConstant';
18import { validateChild } from 'lib/validators';
20import ViewHeader from 'components/ViewHeader';
21import InlineEthereumTransaction from 'components/InlineEthereumTransaction';
22import View from 'components/View';
23import { PointInput, AddressInput } from 'form/Inputs';
24import {
25 composeValidator,
26 buildPointValidator,
27 buildAddressValidator,
28 hasErrors,
29} from 'form/validators';
30import BridgeForm from 'form/BridgeForm';
31import FormError from 'form/FormError';
32import CopiableAddress from 'components/copiable/CopiableAddress';
33import { convertToInt } from 'lib/convertToInt';
35function useIssueChild() {
36 const { contracts } = useNetwork();
37 const { syncDates } = usePointCache();
39 const _contracts = need.contracts(contracts);
41 const [spawnedPoint, setSpawnedPoint] = useState();
43 return useEthereumTransaction(
44 useCallback(
45 (spawnedPoint, owner) => {
46 setSpawnedPoint(spawnedPoint);
47 return azimuth.ecliptic.spawn(_contracts, spawnedPoint, owner);
48 },
49 [_contracts]
50 ),
51 useCallback(() => syncDates(spawnedPoint), [spawnedPoint, syncDates]),
52 GAS_LIMITS.DEFAULT
53 );
56export default function IssueChild() {
57 const { pop } = useLocalRouter();
58 const { contracts } = useNetwork();
59 const { pointCursor } = usePointCursor();
61 const _contracts = need.contracts(contracts);
62 const _point = convertToInt(need.point(pointCursor), 10);
64 const availablePointsPromise = useConstant(() =>
65 azimuth.azimuth
66 .getUnspawnedChildren(_contracts, _point)
67 .then(points => new Set(points))
68 );
70 const candidates = useMemo(() => {
71 const getCandidate = () => ob.patp(getSpawnCandidate(_point));
73 return [getCandidate(), getCandidate(), getCandidate(), getCandidate()];
74 }, [_point]);
76 const {
77 isDefaultState,
78 construct,
79 unconstruct,
80 completed,
81 inputsLocked,
82 bind,
83 } = useIssueChild();
85 const validateFormAsync = useCallback(
86 async values => {
87 const point = patp2dec(values.point);
88 const hasPoint = (await availablePointsPromise).has(point);
90 if (!hasPoint) {
91 return { point: 'This point cannot be spawned.' };
92 }
93 },
94 [availablePointsPromise]
95 );
97 const validateForm = useCallback(
98 (values, errors) => {
99 if (hasErrors(errors)) {
100 return errors;
101 }
103 return validateFormAsync(values, errors);
104 },
105 [validateFormAsync]
106 );
108 const validate = useMemo(
109 () =>
110 composeValidator(
111 {
112 point: buildPointValidator(4, [validateChild(ob.patp(_point))]),
113 owner: buildAddressValidator(),
114 },
115 validateForm
116 ),
117 [_point, validateForm]
118 );
120 const onValues = useCallback(
121 ({ valid, values }) => {
122 if (valid) {
123 construct(patp2dec(values.point), values.owner);
124 } else {
125 unconstruct();
126 }
127 },
128 [construct, unconstruct]
129 );
131 return (
132 <View pop={pop} inset>
133 <Grid>
134 <Grid.Item full as={ViewHeader}>
135 Issue Child Point
136 </Grid.Item>
138 {isDefaultState && (
139 <Grid.Item full as={Text}>
140 Perhaps one of {candidates.slice(0, 3).join(', ')}, or{' '}
141 {candidates[candidates.length - 1]}?
142 </Grid.Item>
143 )}
145 <BridgeForm validate={validate} onValues={onValues}>
146 {({ handleSubmit, values }) => (
147 <>
148 {completed && (
149 <Grid.Item
150 full
151 as={Text}
152 className={cn('f5 wrap', {
153 green3: completed,
154 })}>
155 {values.point} has been spawned and can be claimed by{' '}
156 <CopiableAddress>{values.owner}</CopiableAddress>.
157 </Grid.Item>
158 )}
160 {!completed && (
161 <>
162 <Grid.Item
163 full
164 as={PointInput}
165 name="point"
166 disabled={inputsLocked}
167 className="mt4"
168 />
169 <Grid.Item
170 full
171 as={AddressInput}
172 className="mb4"
173 name="owner"
174 label="Ethereum Address"
175 disabled={inputsLocked}
176 />
177 </>
178 )}
180 <Grid.Item full as={FormError} />
182 <Grid.Item
183 full
184 as={InlineEthereumTransaction}
185 {...bind}
186 onReturn={() => pop()}
187 />
188 </>
189 )}
190 </BridgeForm>
191 </Grid>
192 </View>
193 );