git.iko.soy/bridge
on c19b2a8 help sign in
bridge/src/views/Points.js
371 lines 11 kB history raw
1import React, { useCallback, useEffect, useMemo } from 'react';
2import { Just, Nothing } from 'folktale/maybe';
3import { Grid, H5, HelpText, LinkButton, Flex } from 'indigo-react';
4import { get } from 'lodash';
6import { useHistory } from 'store/history';
7import { useWallet } from 'store/wallet';
8import { usePointCache } from 'store/pointCache';
9import { usePointCursor } from 'store/pointCursor';
10import { useStarReleaseCache } from 'store/starRelease';
12import * as need from 'lib/need';
13import { isZeroAddress, abbreviateAddress } from 'lib/wallet';
14import useIsEclipticOwner from 'lib/useIsEclipticOwner';
15import { useSyncKnownPoints, useSyncOwnedPoints } from 'lib/useSyncPoints';
16import useRejectedIncomingPointTransfers from 'lib/useRejectedIncomingPointTransfers';
17import pluralize from 'lib/pluralize';
19import View from 'components/View';
20import Blinky from 'components/Blinky';
21import Passport from 'components/Passport';
22import Footer from 'components/Footer';
23import { ForwardButton } from 'components/Buttons';
24import CopiableAddress from 'components/CopiableAddress';
25import NavHeader from 'components/NavHeader';
27const maybeGetResult = (obj, key, defaultValue) =>
28 obj.matchWith({
29 Nothing: () => defaultValue,
30 Just: p =>
31 p.value.matchWith({
32 Ok: r => get(r.value, key, defaultValue),
33 Error: e => defaultValue,
34 }),
35 });
37const hasTransferProxy = details => !isZeroAddress(details.transferProxy);
39const PointList = function({ points, className, actions, ...rest }) {
40 const { setPointCursor } = usePointCursor();
41 const { push, names } = useHistory();
43 return (
44 <Grid gap={3} className={className}>
45 {points.map((point, i) => (
46 <Grid.Item
47 key={point}
48 className={`full half-${(i % 2) + 1}-md half-${(i % 2) + 1}-lg`}>
49 <Flex col>
50 <Passport.Mini
51 point={point}
52 className="pointer"
53 onClick={() => {
54 setPointCursor(Just(point));
55 push(names.POINT);
56 }}
57 {...rest}
58 />
59 {actions && (
60 <Flex.Item className="mt2">{actions(point, i)}</Flex.Item>
61 )}
62 </Flex>
63 </Grid.Item>
64 ))}
65 </Grid>
66 );
67};
69function ActionButtons({ actions = [] }) {
70 return (
71 <Flex row>
72 {actions.map(action => (
73 <Flex.Item
74 key={action.text}
75 as={LinkButton}
76 className="mr3"
77 onClick={action.onClick}>
78 {action.text}
79 </Flex.Item>
80 ))}
81 </Flex>
82 );
85export default function Points() {
86 const { wallet } = useWallet();
87 const { pop, push, popAndPush, names } = useHistory();
88 const { setPointCursor } = usePointCursor();
89 const { controlledPoints, getDetails } = usePointCache();
90 const isEclipticOwner = useIsEclipticOwner();
91 const [
92 rejectedPoints,
93 addRejectedPoint,
94 ] = useRejectedIncomingPointTransfers();
95 const { syncStarReleaseDetails, starReleaseDetails } = useStarReleaseCache();
97 const maybeOutgoingPoints = useMemo(
98 () =>
99 controlledPoints.chain(points =>
100 points.matchWith({
101 Error: () => Nothing(),
102 Ok: c => {
103 const points = c.value.ownedPoints.map(point =>
104 getDetails(point).chain(details =>
105 Just({ point: point, has: hasTransferProxy(details) })
106 )
107 );
108 // if we have details for every point,
109 // return the array of pending transfers.
110 if (points.every(p => Just.hasInstance(p))) {
111 const outgoing = points
112 .filter(p => p.value.has)
113 .map(p => p.value.point);
114 return Just(outgoing);
115 } else {
116 return Nothing();
117 }
118 },
119 })
120 ),
121 [getDetails, controlledPoints]
122 );
124 // if we can only interact with a single point, forget about the existence
125 // of this page and jump to the point page.
126 // if there are any pending transfers, incoming or outgoing, stay on this
127 // page, because those can only be completed/cancelled here.
128 useEffect(() => {
129 if (
130 Nothing.hasInstance(maybeOutgoingPoints) ||
131 Nothing.hasInstance(starReleaseDetails)
132 ) {
133 return;
134 }
135 controlledPoints.matchWith({
136 Nothing: () => null,
137 Just: r => {
138 r.value.matchWith({
139 Error: () => null,
140 Ok: c => {
141 let all = [
142 ...c.value.ownedPoints,
143 ...c.value.votingPoints,
144 ...c.value.managingPoints,
145 ...c.value.spawningPoints,
146 ];
147 const incoming = c.value.incomingPoints.filter(
148 p => !rejectedPoints.includes(p)
149 );
150 if (
151 all.length === 1 &&
152 incoming.length === 0 &&
153 maybeOutgoingPoints.value.length === 0 &&
154 starReleaseDetails.value.total === 0
155 ) {
156 setPointCursor(Just(all[0]));
157 popAndPush(names.POINT);
158 }
159 },
160 });
161 },
162 });
163 }, [
164 controlledPoints,
165 rejectedPoints,
166 maybeOutgoingPoints,
167 setPointCursor,
168 popAndPush,
169 names,
170 starReleaseDetails,
171 ]);
173 const address = need.addressFromWallet(wallet);
175 const loading = Nothing.hasInstance(controlledPoints);
177 const ownedPoints = maybeGetResult(controlledPoints, 'ownedPoints', []);
178 const incomingPoints = maybeGetResult(
179 controlledPoints,
180 'incomingPoints',
181 []
182 ).filter(point => !rejectedPoints.includes(point));
183 const managingPoints = maybeGetResult(controlledPoints, 'managingPoints', []);
184 const votingPoints = maybeGetResult(controlledPoints, 'votingPoints', []);
185 const spawningPoints = maybeGetResult(controlledPoints, 'spawningPoints', []);
186 const outgoingPoints = maybeOutgoingPoints.getOrElse([]);
188 const allPoints = [
189 ...ownedPoints.filter(p => !outgoingPoints.includes(p)),
190 ...managingPoints,
191 ...votingPoints,
192 ...spawningPoints,
193 ];
195 const displayEmptyState =
196 !loading && incomingPoints.length === 0 && allPoints.length === 0;
198 const starReleasing = starReleaseDetails
199 .map(s => s.total > 0)
200 .getOrElse(false);
202 useEffect(() => {
203 syncStarReleaseDetails();
204 }, [syncStarReleaseDetails]);
205 // sync display details for known points
206 useSyncKnownPoints([
207 ...ownedPoints,
208 ...incomingPoints,
209 ...managingPoints,
210 ...votingPoints,
211 ...spawningPoints,
212 ]);
214 useSyncOwnedPoints(ownedPoints);
216 const goCreateGalaxy = useCallback(() => push(names.CREATE_GALAXY), [
217 names.CREATE_GALAXY,
218 push,
219 ]);
221 const goStarRelease = useCallback(() => push(names.STAR_RELEASE), [
222 names.STAR_RELEASE,
223 push,
224 ]);
226 if (
227 loading ||
228 (allPoints.length === 1 &&
229 incomingPoints.length === 0 &&
230 outgoingPoints.length === 0 &&
231 !starReleasing)
232 ) {
233 return (
234 <View inset pop={pop}>
235 <Grid>
236 <Grid.Item full as={HelpText} className="mt8 t-center">
237 <Blinky /> Loading...
238 </Grid.Item>
239 </Grid>
240 </View>
241 );
242 }
244 return (
245 <View pop={pop} inset>
246 <NavHeader>
247 <CopiableAddress
248 text={address}
249 className="f6 mono gray4 mb4 us-none pointer">
250 {abbreviateAddress(address)}
251 </CopiableAddress>
252 </NavHeader>
253 <Grid>
254 {displayEmptyState && (
255 <Grid.Item full as={HelpText} className="mt8 t-center">
256 No points to display. This wallet is not the owner or proxy for any
257 points.
258 </Grid.Item>
259 )}
261 {incomingPoints.length > 0 && (
262 <Grid.Item full as={Grid} gap={1} className="mb6">
263 <Grid.Item full as={H5}>
264 {pluralize(
265 incomingPoints.length,
266 'Incoming Transfer',
267 'Incoming Transfers'
268 )}
269 </Grid.Item>
270 <Grid.Item
271 full
272 as={PointList}
273 points={incomingPoints}
274 actions={(point, i) => (
275 <ActionButtons
276 actions={[
277 {
278 text: 'Accept',
279 onClick: () => {
280 setPointCursor(Just(point));
281 push(names.ACCEPT_TRANSFER);
282 },
283 },
284 {
285 text: 'Reject',
286 onClick: () => {
287 addRejectedPoint(point);
288 },
289 },
290 ]}
291 />
292 )}
293 inverted
294 />
295 </Grid.Item>
296 )}
298 {outgoingPoints.length > 0 && (
299 <Grid.Item full as={Grid} gap={1} className="mb6">
300 <Grid.Item full as={H5}>
301 {pluralize(
302 outgoingPoints.length,
303 'Outgoing Transfer',
304 'Outgoing Transfers'
305 )}
306 </Grid.Item>
307 <Grid.Item
308 full
309 as={PointList}
310 points={outgoingPoints}
311 actions={(point, i) => (
312 <ActionButtons
313 actions={[
314 {
315 text: 'Cancel',
316 onClick: () => {
317 setPointCursor(Just(point));
318 // TODO: deep linking to fix this duplicate route
319 push(names.CANCEL_TRANSFER);
320 },
321 },
322 ]}
323 />
324 )}
325 inverted
326 />
327 </Grid.Item>
328 )}
330 {allPoints.length > 0 && (
331 <Grid.Item full as={Grid} gap={1}>
332 <Grid.Item full as={H5}>
333 {pluralize(allPoints.length, 'ID')}
334 </Grid.Item>
335 <Grid.Item full as={PointList} points={allPoints} />
336 </Grid.Item>
337 )}
339 <Footer>
340 <Grid>
341 <Grid.Divider />
342 {isEclipticOwner && (
343 <>
344 <Grid.Item
345 full
346 as={ForwardButton}
347 detail="You have the authority to create a new Galaxy."
348 onClick={goCreateGalaxy}>
349 Create a galaxy
350 </Grid.Item>
351 <Grid.Divider />
352 </>
353 )}
354 {starReleasing && (
355 <>
356 <Grid.Item
357 full
358 as={ForwardButton}
359 detail="You have points being released"
360 onClick={goStarRelease}>
361 View Star Release
362 </Grid.Item>
363 <Grid.Divider />
364 </>
365 )}
366 </Grid>
367 </Footer>
368 </Grid>
369 </View>
370 );