src/views/Points.js · bridge · git.iko.soy

git.iko.soy/bridge

on 4b0ca21 help sign in

bridge/src/views/Points.js

396 lines 12 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/utils/address';

14import useIsEclipticOwner from 'lib/useIsEclipticOwner';

15import { useSyncDetails } from 'lib/useSyncPoints';

16import useRejectedIncomingPointTransfers from 'lib/useRejectedIncomingPointTransfers';

17import { pluralize } from 'lib/pluralize';

18import newGithubIssueUrl from 'new-github-issue-url';

20import View from 'components/View';

21import Blinky from 'components/Blinky';

22import Passport from 'components/Passport';

23import Footer from 'components/Footer';

24import { ForwardButton } from 'components/Buttons';

25import CopiableAddress from 'components/CopiableAddress';

26import NavHeader from 'components/NavHeader';

28const maybeGetResult = (obj, key, defaultValue) =>

29 obj.matchWith({

30 Nothing: () => defaultValue,

31 Just: p =>

32 p.value.matchWith({

33 Ok: r => get(r.value, key, defaultValue),

34 Error: e => defaultValue,

35 }),

36 });

38const hasTransferProxy = details => !isZeroAddress(details.transferProxy);

40const PointList = function({ points, className, actions, ...rest }) {

41 const { setPointCursor } = usePointCursor();

42 const { push, names } = useHistory();

44 return (

45 <Grid gap={3} className={className}>

46 {points.map((point, i) => (

47 <Grid.Item

48 key={point}

49 className={`full half-${(i % 2) + 1}-md half-${(i % 2) + 1}-lg`}>

50 <Flex col>

51 <Passport.Mini

52 point={point}

53 className="pointer"

54 onClick={() => {

55 setPointCursor(Just(point));

56 push(names.POINT);

57 }}

58 {...rest}

59 />

60 {actions && (

61 <Flex.Item className="mt2">{actions(point, i)}</Flex.Item>

62 )}

63 </Flex>

64 </Grid.Item>

65 ))}

66 </Grid>

67 );

68};

70function ActionButtons({ actions = [] }) {

71 return (

72 <Flex row>

73 {actions.map(action => (

74 <Flex.Item

75 key={action.text}

76 as={LinkButton}

77 className="mr3"

78 onClick={action.onClick}>

79 {action.text}

80 </Flex.Item>

81 ))}

82 </Flex>

83 );

86export default function Points() {

87 const { wallet } = useWallet();

88 const { pop, push, popAndPush, names } = useHistory();

89 const { setPointCursor } = usePointCursor();

90 const { controlledPoints, getDetails } = usePointCache();

91 const isEclipticOwner = useIsEclipticOwner();

92 const [

93 rejectedPoints,

94 addRejectedPoint,

95 ] = useRejectedIncomingPointTransfers();

96 const { syncStarReleaseDetails, starReleaseDetails } = useStarReleaseCache();

98 const maybeOutgoingPoints = useMemo(

99 () =>

100 controlledPoints.chain(points =>

101 points.matchWith({

102 Error: () => Nothing(),

103 Ok: c => {

104 const points = c.value.ownedPoints.map(point =>

105 getDetails(point).chain(details =>

106 Just({ point: point, has: hasTransferProxy(details) })

107 )

108 );

109 // if we have details for every point,

110 // return the array of pending transfers.

111 if (points.every(p => Just.hasInstance(p))) {

112 const outgoing = points

113 .filter(p => p.value.has)

114 .map(p => p.value.point);

115 return Just(outgoing);

116 } else {

117 return Nothing();

118 }

119 },

120 })

121 ),

122 [getDetails, controlledPoints]

123 );

125 // if we can only interact with a single point, forget about the existence

126 // of this page and jump to the point page.

127 // if there are any pending transfers, incoming or outgoing, stay on this

128 // page, because those can only be completed/cancelled here.

129 useEffect(() => {

130 if (

131 Nothing.hasInstance(maybeOutgoingPoints) ||

132 Nothing.hasInstance(starReleaseDetails)

133 ) {

134 return;

135 }

136 controlledPoints.matchWith({

137 Nothing: () => null,

138 Just: r => {

139 r.value.matchWith({

140 Error: () => null,

141 Ok: c => {

142 let all = [

143 ...c.value.ownedPoints,

144 ...c.value.votingPoints,

145 ...c.value.managingPoints,

146 ...c.value.spawningPoints,

147 ];

148 const incoming = c.value.incomingPoints.filter(

149 p => !rejectedPoints.includes(p)

150 );

151 if (

152 all.length === 1 &&

153 incoming.length === 0 &&

154 maybeOutgoingPoints.value.length === 0 &&

155 (starReleaseDetails.value === null ||

156 starReleaseDetails.value.total === 0)

157 ) {

158 setPointCursor(Just(all[0]));

159 popAndPush(names.POINT);

160 }

161 },

162 });

163 },

164 });

165 }, [

166 controlledPoints,

167 rejectedPoints,

168 maybeOutgoingPoints,

169 setPointCursor,

170 popAndPush,

171 names,

172 starReleaseDetails,

173 ]);

175 const address = need.addressFromWallet(wallet);

177 const loading = Nothing.hasInstance(controlledPoints);

179 const ownedPoints = maybeGetResult(controlledPoints, 'ownedPoints', []);

180 const incomingPoints = maybeGetResult(

181 controlledPoints,

182 'incomingPoints',

183 []

184 ).filter(point => !rejectedPoints.includes(point));

185 const managingPoints = maybeGetResult(controlledPoints, 'managingPoints', []);

186 const votingPoints = maybeGetResult(controlledPoints, 'votingPoints', []);

187 const spawningPoints = maybeGetResult(controlledPoints, 'spawningPoints', []);

188 const outgoingPoints = maybeOutgoingPoints.getOrElse([]);

190 const allPoints = [

191 ...ownedPoints.filter(p => !outgoingPoints.includes(p)),

192 ...managingPoints,

193 ...votingPoints,

194 ...spawningPoints,

195 ];

197 const displayEmptyState =

198 !loading && incomingPoints.length === 0 && allPoints.length === 0;

200 const starReleasing = starReleaseDetails

201 .map(s => (s ? s.total > 0 : false))

202 .getOrElse(false);

204 useEffect(() => {

205 syncStarReleaseDetails();

206 }, [syncStarReleaseDetails]);

208 // sync display details for known points

209 useSyncDetails(ownedPoints);

211 const goCreateGalaxy = useCallback(() => push(names.CREATE_GALAXY), [

212 names.CREATE_GALAXY,

213 push,

214 ]);

216 const goStarRelease = useCallback(() => push(names.STAR_RELEASE), [

217 names.STAR_RELEASE,

218 push,

219 ]);

221 // if we got an error result, we should display it, instead of showing

222 // a potentially inaccurately empty point list.

223 //

224 if (

225 Just.hasInstance(controlledPoints) &&

226 controlledPoints.value.matchWith({

227 Error: e => true,

228 Ok: v => false,

229 })

230 ) {

231 const url = newGithubIssueUrl({

232 user: 'urbit',

233 repo: 'bridge',

234 title: controlledPoints.value.value,

235 body: ``,

236 });

237 return (

238 <View inset>

239 <Grid>

240 <Grid.Item full as={HelpText} className="mt8 t-center">

241 {controlledPoints.value.value}

242 <br />

243 Try reloading the page. If this problem persists, please{' '}

244 <a href={url}>file an issue on GitHub</a>.

245 </Grid.Item>

246 </Grid>

247 </View>

248 );

249 }

251 if (

252 loading ||

253 (allPoints.length === 1 &&

254 incomingPoints.length === 0 &&

255 outgoingPoints.length === 0 &&

256 !starReleasing)

257 ) {

258 return (

259 <View inset>

260 <Grid>

261 <Grid.Item full as={HelpText} className="mt8 t-center">

262 <Blinky /> Loading...

263 </Grid.Item>

264 </Grid>

265 </View>

266 );

267 }

269 return (

270 <View inset pop={pop} hideBack>

271 <NavHeader>

272 <CopiableAddress

273 text={address}

274 className="f6 mono gray4 mb4 us-none pointer">

275 {abbreviateAddress(address)}

276 </CopiableAddress>

277 </NavHeader>

278 <Grid>

279 {displayEmptyState && (

280 <Grid.Item full as={HelpText} className="mt8 t-center">

281 No points to display. This wallet is not the owner or proxy for any

282 points.

283 </Grid.Item>

284 )}

286 {incomingPoints.length > 0 && (

287 <Grid.Item full as={Grid} gap={1} className="mb6">

288 <Grid.Item full as={H5}>

289 {pluralize(

290 incomingPoints.length,

291 'Incoming Transfer',

292 'Incoming Transfers'

293 )}

294 </Grid.Item>

295 <Grid.Item

296 full

297 as={PointList}

298 points={incomingPoints}

299 actions={(point, i) => (

300 <ActionButtons

301 actions={[

302 {

303 text: 'Accept',

304 onClick: () => {

305 setPointCursor(Just(point));

306 push(names.ACCEPT_TRANSFER);

307 },

308 },

309 {

310 text: 'Reject',

311 onClick: () => {

312 addRejectedPoint(point);

313 },

314 },

315 ]}

316 />

317 )}

318 inverted

319 />

320 </Grid.Item>

321 )}

323 {outgoingPoints.length > 0 && (

324 <Grid.Item full as={Grid} gap={1} className="mb6">

325 <Grid.Item full as={H5}>

326 {pluralize(

327 outgoingPoints.length,

328 'Outgoing Transfer',

329 'Outgoing Transfers'

330 )}

331 </Grid.Item>

332 <Grid.Item

333 full

334 as={PointList}

335 points={outgoingPoints}

336 actions={(point, i) => (

337 <ActionButtons

338 actions={[

339 {

340 text: 'Cancel',

341 onClick: () => {

342 setPointCursor(Just(point));

343 // TODO: deep linking to fix this duplicate route

344 push(names.CANCEL_TRANSFER);

345 },

346 },

347 ]}

348 />

349 )}

350 inverted

351 />

352 </Grid.Item>

353 )}

355 {allPoints.length > 0 && (

356 <Grid.Item full as={Grid} gap={1}>

357 <Grid.Item full as={H5}>

358 {pluralize(allPoints.length, 'ID')}

359 </Grid.Item>

360 <Grid.Item full as={PointList} points={allPoints} />

361 </Grid.Item>

362 )}

364 <Footer>

365 <Grid>

366 <Grid.Divider />

367 {isEclipticOwner && (

368 <>

369 <Grid.Item

370 full

371 as={ForwardButton}

372 detail="You have the authority to create a new Galaxy."

373 onClick={goCreateGalaxy}>

374 Create a galaxy

375 </Grid.Item>

376 <Grid.Divider />

377 </>

378 )}

379 {starReleasing && (

380 <>

381 <Grid.Item

382 full

383 as={ForwardButton}

384 detail="You have points being released"

385 onClick={goStarRelease}>

386 View Star Release

387 </Grid.Item>

388 <Grid.Divider />

389 </>

390 )}

391 </Grid>

392 </Footer>

393 </Grid>

394 </View>

395 );