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

git.iko.soy/bridge

on 100b34b help sign in

bridge/src/views/Points.js

391 lines 12 kB history raw

1import React, { useCallback, useEffect, useMemo } from 'react';

2import { Just, Nothing, Result } 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/crypto';

14import useIsEclipticOwner from 'lib/useIsEclipticOwner';

15import useRejectedIncomingPointTransfers from 'lib/useRejectedIncomingPointTransfers';

16import pluralize from 'lib/pluralize';

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

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]);

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

207 names.CREATE_GALAXY,

208 push,

209 ]);

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

212 names.STAR_RELEASE,

213 push,

214 ]);

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

217 // a potentially inaccurately empty point list.

218 //

219 if (

220 Just.hasInstance(controlledPoints) &&

221 controlledPoints.value.matchWith({

222 Error: e => true,

223 Ok: v => false,

224 })

225 ) {

226 const url = newGithubIssueUrl({

227 user: 'urbit',

228 repo: 'bridge',

229 title: controlledPoints.value.value,

230 body: ``,

231 });

232 return (

233 <View inset>

234 <Grid>

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

236 {controlledPoints.value.value}

237 <br />

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

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

240 </Grid.Item>

241 </Grid>

242 </View>

243 );

244 }

246 if (

247 loading ||

248 (allPoints.length === 1 &&

249 incomingPoints.length === 0 &&

250 outgoingPoints.length === 0 &&

251 !starReleasing)

252 ) {

253 return (

254 <View inset>

255 <Grid>

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

257 <Blinky /> Loading...

258 </Grid.Item>

259 </Grid>

260 </View>

261 );

262 }

264 return (

265 <View inset pop={pop} hideBack>

266 <NavHeader>

267 <CopiableAddress

268 text={address}

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

270 {abbreviateAddress(address)}

271 </CopiableAddress>

272 </NavHeader>

273 <Grid>

274 {displayEmptyState && (

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

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

277 points.

278 </Grid.Item>

279 )}

281 {incomingPoints.length > 0 && (

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

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

284 {pluralize(

285 incomingPoints.length,

286 'Incoming Transfer',

287 'Incoming Transfers'

288 )}

289 </Grid.Item>

290 <Grid.Item

291 full

292 as={PointList}

293 points={incomingPoints}

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

295 <ActionButtons

296 actions={[

297 {

298 text: 'Accept',

299 onClick: () => {

300 setPointCursor(Just(point));

301 push(names.ACCEPT_TRANSFER);

302 },

303 },

304 {

305 text: 'Reject',

306 onClick: () => {

307 addRejectedPoint(point);

308 },

309 },

310 ]}

311 />

312 )}

313 inverted

314 />

315 </Grid.Item>

316 )}

318 {outgoingPoints.length > 0 && (

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

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

321 {pluralize(

322 outgoingPoints.length,

323 'Outgoing Transfer',

324 'Outgoing Transfers'

325 )}

326 </Grid.Item>

327 <Grid.Item

328 full

329 as={PointList}

330 points={outgoingPoints}

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

332 <ActionButtons

333 actions={[

334 {

335 text: 'Cancel',

336 onClick: () => {

337 setPointCursor(Just(point));

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

339 push(names.CANCEL_TRANSFER);

340 },

341 },

342 ]}

343 />

344 )}

345 inverted

346 />

347 </Grid.Item>

348 )}

350 {allPoints.length > 0 && (

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

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

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

354 </Grid.Item>

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

356 </Grid.Item>

357 )}

359 <Footer>

360 <Grid>

361 <Grid.Divider />

362 {isEclipticOwner && (

363 <>

364 <Grid.Item

365 full

366 as={ForwardButton}

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

368 onClick={goCreateGalaxy}>

369 Create a galaxy

370 </Grid.Item>

371 <Grid.Divider />

372 </>

373 )}

374 {starReleasing && (

375 <>

376 <Grid.Item

377 full

378 as={ForwardButton}

379 detail="You have points being released"

380 onClick={goStarRelease}>

381 View Star Release

382 </Grid.Item>

383 <Grid.Divider />

384 </>

385 )}

386 </Grid>

387 </Footer>

388 </Grid>

389 </View>

390 );