git.iko.soy/bridge
on b76a2ec help sign in
bridge/src/views/IssueChild.js
176 lines 4.7 kB history raw
1import React, { useCallback, useEffect, useMemo, useState } from 'react';
2import { Nothing, Just } from 'folktale/maybe';
3import cn from 'classnames';
4import { Grid, Text, Input } from 'indigo-react';
5import * as azimuth from 'azimuth-js';
6import * as ob from 'urbit-ob';
8import { useNetwork } from 'store/network';
9import { useHistory } from 'store/history';
10import { usePointCache } from 'store/pointCache';
12import * as need from 'lib/need';
13import { useAddressInput, usePointInput } from 'lib/useInputs';
14import useEthereumTransaction from 'lib/useEthereumTransaction';
15import { GAS_LIMITS } from 'lib/constants';
16import patp2dec from 'lib/patp2dec';
18import ViewHeader from 'components/ViewHeader';
19import MiniBackButton from 'components/MiniBackButton';
20import InlineEthereumTransaction from 'components/InlineEthereumTransaction';
21import View from 'components/View';
22import useLifecycle from 'lib/useLifecycle';
23import { usePointCursor } from 'store/pointCursor';
24import { validateInSet } from 'lib/validators';
25import { getSpawnCandidate } from 'lib/child';
27function useIssueChild() {
28 const { contracts } = useNetwork();
29 const { syncKnownPoint } = usePointCache();
31 const _contracts = need.contracts(contracts);
33 const [spawnedPoint, setSpawnedPoint] = useState();
35 return useEthereumTransaction(
36 useCallback(
37 (spawnedPoint, owner) => {
38 setSpawnedPoint(spawnedPoint);
39 return azimuth.ecliptic.spawn(_contracts, spawnedPoint, owner);
40 },
41 [_contracts]
42 ),
43 useCallback(() => syncKnownPoint(spawnedPoint), [
44 spawnedPoint,
45 syncKnownPoint,
46 ]),
47 GAS_LIMITS.DEFAULT
48 );
51export default function IssueChild() {
52 const { pop } = useHistory();
53 const { contracts } = useNetwork();
54 const { pointCursor } = usePointCursor();
56 const _contracts = need.contracts(contracts);
57 const _point = need.point(pointCursor);
59 const [availablePointNames, setAvailablePointNames] = useState(Nothing());
61 const candidates = useMemo(() => {
62 const getCandidate = () => ob.patp(getSpawnCandidate(_point));
64 return [getCandidate(), getCandidate(), getCandidate(), getCandidate()];
65 }, [_point]);
67 const {
68 isDefaultState,
69 construct,
70 unconstruct,
71 completed,
72 inputsLocked,
73 bind,
74 } = useIssueChild();
76 const validators = useMemo(
77 () => [
78 validateInSet(
79 availablePointNames.getOrElse(new Set()),
80 'This point cannot be spawned.'
81 ),
82 ],
83 [availablePointNames]
84 );
85 const [
86 pointNameInput,
87 { pass: validPointName, value: pointName },
88 // ^ we use value: here so our effect runs onChange
89 ] = usePointInput({
90 name: 'point',
91 disabled: inputsLocked,
92 autoFocus: true,
93 validators,
94 error: availablePointNames.matchWith({
95 Nothing: () => 'Loading availability...',
96 Just: () => undefined,
97 }),
98 });
100 const [ownerInput, { pass: validOwner, data: owner }] = useAddressInput({
101 name: 'owner',
102 label: `Ethereum Address`,
103 disabled: inputsLocked,
104 });
106 useEffect(() => {
107 if (validPointName && validOwner) {
108 construct(patp2dec(pointName), owner);
109 } else {
110 unconstruct();
111 }
112 }, [owner, construct, unconstruct, validPointName, validOwner, pointName]);
114 useLifecycle(() => {
115 let mounted = true;
117 (async () => {
118 const availablePoints = await azimuth.azimuth.getUnspawnedChildren(
119 _contracts,
120 _point
121 );
123 if (!mounted) {
124 return;
125 }
127 setAvailablePointNames(Just(new Set(availablePoints.map(ob.patp))));
128 })();
130 return () => (mounted = false);
131 });
133 return (
134 <View inset>
135 <Grid>
136 <Grid.Item full as={MiniBackButton} onClick={() => pop()} />
138 <Grid.Item full as={ViewHeader}>
139 Issue Child Point
140 </Grid.Item>
142 {isDefaultState && (
143 <Grid.Item full as={Text}>
144 Perhaps one of {candidates.slice(0, 3).join(', ')}, or{' '}
145 {candidates[candidates.length - 1]}?
146 </Grid.Item>
147 )}
149 {completed && (
150 <Grid.Item
151 full
152 as={Text}
153 className={cn('f5', {
154 green3: completed,
155 })}>
156 {pointName} has been spawned and can be claimed by {owner}.
157 </Grid.Item>
158 )}
160 {!completed && (
161 <>
162 <Grid.Item full as={Input} {...pointNameInput} className="mt4" />
163 <Grid.Item full as={Input} {...ownerInput} className="mb4" />
164 </>
165 )}
167 <Grid.Item
168 full
169 as={InlineEthereumTransaction}
170 {...bind}
171 onReturn={() => pop()}
172 />
173 </Grid>
174 </View>
175 );