git.iko.soy/bridge
on 368f024 help sign in
bridge/src/views/Point/IssueChild.tsx
253 lines 7.7 kB history raw
1import React, { useCallback, useEffect, useMemo, useState } from 'react';
2import cn from 'classnames';
3import { Grid } from 'indigo-react';
4import Window from 'components/L2/Window/Window';
5import HeaderPane from 'components/L2/Window/HeaderPane';
6import BodyPane from 'components/L2/Window/BodyPane';
8import * as azimuth from 'azimuth-js';
9import ob from 'urbit-ob';
11import { useNetwork } from 'store/network';
12import { usePointCache } from 'store/pointCache';
13import { usePointCursor } from 'store/pointCursor';
15import * as need from 'lib/need';
16import useEthereumTransaction from 'lib/useEthereumTransaction';
17import { GAS_LIMITS } from 'lib/constants';
18import { patp2dec } from 'lib/patp2dec';
19import { getSpawnCandidate } from 'lib/child';
20import { useLocalRouter } from 'lib/LocalRouter';
21import { validateChild } from 'lib/validators';
23import InlineEthereumTransaction from 'components/InlineEthereumTransaction';
24import View from 'components/View';
25import { PointInput, AddressInput } from 'form/Inputs';
26import {
27 composeValidator,
28 buildPointValidator,
29 buildAddressValidator,
30 hasErrors,
31} from 'form/validators';
32import BridgeForm from 'form/BridgeForm';
33import FormError from 'form/FormError';
34import CopiableAddress from 'components/copiable/CopiableAddress';
35import { convertToInt } from 'lib/convertToInt';
36import { Box, Icon, Row, Text } from '@tlon/indigo-react';
37import { isGalaxy } from 'lib/utils/point';
38import L2BackHeader from 'components/L2/Headers/L2BackHeader';
40import './IssueChild.scss';
41import { PatpBadge } from './PatpBadge';
42import useRoller from 'lib/useRoller';
43import { AddressButton } from './AddressButton';
45export function useIssueChild() {
46 const { contracts } = useNetwork();
47 const { syncDates } = usePointCache();
49 const _contracts = need.contracts(contracts);
51 const [spawnedPoint, setSpawnedPoint] = useState();
53 return useEthereumTransaction(
54 useCallback(
55 (spawnedPoint, owner) => {
56 setSpawnedPoint(spawnedPoint);
57 return azimuth.ecliptic.spawn(_contracts, spawnedPoint, owner);
58 },
59 [_contracts]
60 ),
61 useCallback(() => syncDates(spawnedPoint), [spawnedPoint, syncDates]),
62 GAS_LIMITS.DEFAULT
63 );
66export default function IssueChild() {
67 const { pop } = useLocalRouter();
68 const { api } = useRoller();
69 const { pointCursor } = usePointCursor();
71 const _point = convertToInt(need.point(pointCursor), 10);
72 const [availablePoints, setAvailablePoints] = useState<Set<number> | null>(
73 null
74 );
75 const [candidates, setCandidates] = useState<string[]>([]);
77 const fetchAvailablePoints = useCallback(async () => {
78 const available = await api.getUnspawned(_point);
79 setAvailablePoints(new Set(available));
80 }, [_point, api]);
82 const shuffle = useCallback(() => {
83 const newCandidates = Array.from({ length: 3 }, () => {
84 return ob.patp(getSpawnCandidate(_point));
85 });
87 setCandidates(newCandidates);
88 }, [_point]);
90 const handleShuffleClick = useCallback(() => {
91 shuffle();
92 }, [shuffle]);
94 useEffect(() => {
95 // load the availablePoints for validation
96 fetchAvailablePoints();
97 // set the candidates
98 shuffle();
99 }, [fetchAvailablePoints, shuffle]);
101 const {
102 isDefaultState,
103 construct,
104 unconstruct,
105 completed,
106 inputsLocked,
107 bind,
108 } = useIssueChild();
110 const validateFormAsync = useCallback(
111 async values => {
112 const point = patp2dec(values.point);
113 const hasPoint = availablePoints && availablePoints.has(point);
115 if (!hasPoint) {
116 return { point: 'This point cannot be spawned.' };
117 }
118 },
119 [availablePoints]
120 );
122 const validateForm = useCallback(
123 (values, errors) => {
124 if (hasErrors(errors)) {
125 return errors;
126 }
128 return validateFormAsync(values, errors);
129 },
130 [validateFormAsync]
131 );
133 const validate = useMemo(
134 () =>
135 composeValidator(
136 {
137 point: buildPointValidator(4, [validateChild(ob.patp(_point))]),
138 owner: buildAddressValidator(),
139 },
140 validateForm
141 ),
142 [_point, validateForm]
143 );
145 const onValues = useCallback(
146 ({ valid, values }) => {
147 if (valid) {
148 construct(patp2dec(values.point), values.owner);
149 } else {
150 unconstruct();
151 }
152 },
153 [construct, unconstruct]
154 );
156 return (
157 <View
158 pop={pop}
159 hideBack
160 inset
161 header={<L2BackHeader hideBalance={false} back={pop} />}>
162 <Window className="id-issue-child">
163 <HeaderPane>
164 <Row>
165 <h5>Spawn {isGalaxy(_point) ? 'Star' : 'Planet'}</h5>
166 </Row>
167 </HeaderPane>
168 <BodyPane>
169 <Box className="inner-container">
170 <BridgeForm
171 style={{ width: '100%' }}
172 validate={validate}
173 onValues={onValues}>
174 {({ handleSubmit, values }) => (
175 <>
176 {completed && (
177 <Grid.Item
178 full
179 as={Text}
180 className={cn('f5 wrap', {
181 green3: completed,
182 })}>
183 {values.point} has been spawned and can be claimed by{' '}
184 <CopiableAddress>{values.owner}</CopiableAddress>.
185 </Grid.Item>
186 )}
188 {!completed && (
189 <>
190 <Grid.Item
191 full
192 as={PointInput}
193 name="point"
194 disabled={inputsLocked}
195 className="mt4"
196 />
198 {isDefaultState && candidates.length > 0 && (
199 <>
200 <Text className={'input-hint'}>Perhaps:</Text>
201 <Row>
202 <Box className={'patp-badge-container'}>
203 <Box className="badges">
204 {candidates.map(p => (
205 <PatpBadge className={'patp-badge'}>
206 {p}
207 </PatpBadge>
208 ))}
209 </Box>
210 <Box className="shuffle">
211 <Icon
212 size={16}
213 icon="ArrowRefresh"
214 onClick={handleShuffleClick}></Icon>
215 </Box>
216 </Box>
217 </Row>
218 </>
219 )}
221 <Grid.Item
222 full
223 as={AddressInput}
224 className="mb4"
225 name="owner"
226 label="Ethereum Address"
227 disabled={inputsLocked}
228 />
229 {isDefaultState && (
230 <Box>
231 <AddressButton>Use my address</AddressButton>
232 </Box>
233 )}
234 </>
235 )}
237 <Grid.Item full as={FormError} />
239 <Grid.Item
240 full
241 as={InlineEthereumTransaction}
242 {...bind}
243 onReturn={() => pop()}
244 />
245 </>
246 )}
247 </BridgeForm>
248 </Box>
249 </BodyPane>
250 </Window>
251 </View>
252 );