git.iko.soy/bridge
on f99fec0 help sign in
bridge/src/views/IssueChild.js
197 lines 5.4 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/CopiableAddress';
33import convertToInt from 'lib/convertToInt';
35function useIssueChild() {
36 const { contracts } = useNetwork();
37 const { syncKnownPoint } = 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(() => syncKnownPoint(spawnedPoint), [
52 spawnedPoint,
53 syncKnownPoint,
54 ]),
55 GAS_LIMITS.DEFAULT
56 );
59export default function IssueChild() {
60 const { pop } = useLocalRouter();
61 const { contracts } = useNetwork();
62 const { pointCursor } = usePointCursor();
64 const _contracts = need.contracts(contracts);
65 const _point = convertToInt(need.point(pointCursor), 10);
67 const availablePointsPromise = useConstant(() =>
68 azimuth.azimuth
69 .getUnspawnedChildren(_contracts, _point)
70 .then(points => new Set(points))
71 );
73 const candidates = useMemo(() => {
74 const getCandidate = () => ob.patp(getSpawnCandidate(_point));
76 return [getCandidate(), getCandidate(), getCandidate(), getCandidate()];
77 }, [_point]);
79 const {
80 isDefaultState,
81 construct,
82 unconstruct,
83 completed,
84 inputsLocked,
85 bind,
86 } = useIssueChild();
88 const validateFormAsync = useCallback(
89 async values => {
90 const point = patp2dec(values.point);
91 const hasPoint = (await availablePointsPromise).has(point);
93 if (!hasPoint) {
94 return { point: 'This point cannot be spawned.' };
95 }
96 },
97 [availablePointsPromise]
98 );
100 const validateForm = useCallback(
101 (values, errors) => {
102 if (hasErrors(errors)) {
103 return errors;
104 }
106 return validateFormAsync(values, errors);
107 },
108 [validateFormAsync]
109 );
111 const validate = useMemo(
112 () =>
113 composeValidator(
114 {
115 point: buildPointValidator(4, [validateChild(ob.patp(_point))]),
116 owner: buildAddressValidator(),
117 },
118 validateForm
119 ),
120 [_point, validateForm]
121 );
123 const onValues = useCallback(
124 ({ valid, values }) => {
125 if (valid) {
126 construct(patp2dec(values.point), values.owner);
127 } else {
128 unconstruct();
129 }
130 },
131 [construct, unconstruct]
132 );
134 return (
135 <View pop={pop} inset>
136 <Grid>
137 <Grid.Item full as={ViewHeader}>
138 Issue Child Point
139 </Grid.Item>
141 {isDefaultState && (
142 <Grid.Item full as={Text}>
143 Perhaps one of {candidates.slice(0, 3).join(', ')}, or{' '}
144 {candidates[candidates.length - 1]}?
145 </Grid.Item>
146 )}
148 <BridgeForm validate={validate} onValues={onValues}>
149 {({ handleSubmit, values }) => (
150 <>
151 {completed && (
152 <Grid.Item
153 full
154 as={Text}
155 className={cn('f5 wrap', {
156 green3: completed,
157 })}>
158 {values.point} has been spawned and can be claimed by{' '}
159 <CopiableAddress>{values.owner}</CopiableAddress>.
160 </Grid.Item>
161 )}
163 {!completed && (
164 <>
165 <Grid.Item
166 full
167 as={PointInput}
168 name="point"
169 disabled={inputsLocked}
170 className="mt4"
171 />
172 <Grid.Item
173 full
174 as={AddressInput}
175 className="mb4"
176 name="owner"
177 label="Ethereum Address"
178 disabled={inputsLocked}
179 />
180 </>
181 )}
183 <Grid.Item full as={FormError} />
185 <Grid.Item
186 full
187 as={InlineEthereumTransaction}
188 {...bind}
189 onReturn={() => pop()}
190 />
191 </>
192 )}
193 </BridgeForm>
194 </Grid>
195 </View>
196 );