git.iko.soy/bridge
on fd7895b help sign in
bridge/src/views/Point/IssueChild.js
197 lines 5.5 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';
34import useCurrentPermissions from 'lib/useCurrentPermissions';
36export function useIssueChild() {
37 const { contracts } = useNetwork();
38 const { syncDates } = usePointCache();
40 const _contracts = need.contracts(contracts);
42 const [spawnedPoint, setSpawnedPoint] = useState();
44 return useEthereumTransaction(
45 useCallback(
46 (spawnedPoint, owner) => {
47 setSpawnedPoint(spawnedPoint);
48 return azimuth.ecliptic.spawn(_contracts, spawnedPoint, owner);
49 },
50 [_contracts]
51 ),
52 useCallback(() => syncDates(spawnedPoint), [spawnedPoint, syncDates]),
53 GAS_LIMITS.DEFAULT
54 );
57export default function IssueChild() {
58 const { pop } = useLocalRouter();
59 const { contracts } = useNetwork();
60 const { pointCursor } = usePointCursor();
62 const _contracts = need.contracts(contracts);
63 const _point = convertToInt(need.point(pointCursor), 10);
65 const availablePointsPromise = useConstant(() =>
66 azimuth.azimuth
67 .getUnspawnedChildren(_contracts, _point)
68 .then(points => new Set(points))
69 );
71 const candidates = useMemo(() => {
72 const getCandidate = () => ob.patp(getSpawnCandidate(_point));
74 return [getCandidate(), getCandidate(), getCandidate(), getCandidate()];
75 }, [_point]);
77 const {
78 isDefaultState,
79 construct,
80 unconstruct,
81 completed,
82 inputsLocked,
83 bind,
84 } = useIssueChild();
86 const validateFormAsync = useCallback(
87 async values => {
88 const point = patp2dec(values.point);
89 const hasPoint = (await availablePointsPromise).has(point);
91 if (!hasPoint) {
92 return { point: 'This point cannot be spawned.' };
93 }
94 },
95 [availablePointsPromise]
96 );
98 const validateForm = useCallback(
99 (values, errors) => {
100 if (hasErrors(errors)) {
101 return errors;
102 }
104 return validateFormAsync(values, errors);
105 },
106 [validateFormAsync]
107 );
109 const validate = useMemo(
110 () =>
111 composeValidator(
112 {
113 point: buildPointValidator(4, [validateChild(ob.patp(_point))]),
114 owner: buildAddressValidator(),
115 },
116 validateForm
117 ),
118 [_point, validateForm]
119 );
121 const onValues = useCallback(
122 ({ valid, values }) => {
123 if (valid) {
124 construct(patp2dec(values.point), values.owner);
125 } else {
126 unconstruct();
127 }
128 },
129 [construct, unconstruct]
130 );
132 const { isStar } = useCurrentPermissions();
134 return (
135 <View pop={pop} inset>
136 <Grid>
137 <Grid.Item full as={ViewHeader}>
138 Spawn {isStar ? ' Planets' : ' Stars'}
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 );