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