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

git.iko.soy/bridge

on 91efb05 help sign in

bridge/src/views/Points.js

423 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/copiable/CopiableAddress';

26import NavHeader from 'components/NavHeader';

27import L2PointHeader from 'components/L2/Headers/L2PointHeader';

28import IncomingPoint from 'components/L2/Points/IncomingPoint';

29import { useNetwork } from 'store/network';

31export const maybeGetResult = (obj, key, defaultValue) =>

32 obj.matchWith({

33 Nothing: () => defaultValue,

34 Just: p =>

35 p.value.matchWith({

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

37 Error: e => defaultValue,

38 }),

39 });

41export const hasTransferProxy = details =>

42 !isZeroAddress(details.transferProxy);

44export const getOutgoingPoints = (controlledPoints, getDetails) => {

45 return controlledPoints

46 .chain(points =>

47 points.matchWith({

48 Error: () => Nothing(),

49 Ok: c => {

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

51 getDetails(point).chain(details =>

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

53 )

54 );

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

56 const outgoing = points

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

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

59 return Just(outgoing);

60 } else {

61 return Nothing();

62 }

63 },

64 })

65 )

66 .getOrElse([]);

67};

69export const isLocked = (details, contracts) =>

70 details.owner === contracts.linearSR ||

71 details.owner === contracts.conditionalSR;

73const PointList = function({

74 points,

75 className,

76 actions,

77 locked = false,

78 ...rest

79}) {

80 const { setPointCursor } = usePointCursor();

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

83 return (

84 <Grid gap={4} className={className}>

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

86 <Grid.Item

87 key={point}

88 className={`full fourth-${(i % 4) + 1}-md fourth-${(i % 4) + 1}-lg`}>

89 <Flex col>

90 <Passport.Mini

91 locked={locked}

92 point={point}

93 onClick={

94 locked

95 ? undefined

96 : () => {

97 setPointCursor(Just(point));

98 push(names.POINT);

99 }

100 }

101 {...rest}

102 />

103 {actions && (

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

105 )}

106 </Flex>

107 </Grid.Item>

108 ))}

109 </Grid>

110 );

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

114 return (

115 <Flex row>

116 {actions.map(action => (

117 <Flex.Item

118 key={action.text}

119 as={LinkButton}

120 className="mr3"

121 onClick={action.onClick}>

122 {action.text}

123 </Flex.Item>

124 ))}

125 </Flex>

126 );

129export default function Points() {

130 const { wallet } = useWallet();

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

132 const { setPointCursor } = usePointCursor();

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

134 const { contracts } = useNetwork();

135 const isEclipticOwner = useIsEclipticOwner();

136 const [

137 rejectedPoints,

138 addRejectedPoint,

139 ] = useRejectedIncomingPointTransfers();

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

142 const outgoingPoints = useMemo(

143 () => getOutgoingPoints(controlledPoints, getDetails),

144 [getDetails, controlledPoints]

145 );

147 const _contracts = need.contracts(contracts);

149 const maybeLockedPoints = useMemo(

150 () =>

151 controlledPoints.chain(points =>

152 points.matchWith({

153 Error: () => Nothing(),

154 Ok: c => {

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

156 getDetails(point).chain(details =>

157 Just({ point, has: isLocked(details, _contracts) })

158 )

159 );

160 // if we have details for every point,

161 // return the array of pending transfers.

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

163 const locked = points

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

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

166 return Just(locked);

167 } else {

168 return Nothing();

169 }

170 },

171 })

172 ),

173 [getDetails, controlledPoints, _contracts]

174 );

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

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

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

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

180 useEffect(() => {

181 if (outgoingPoints.length < 1 || Nothing.hasInstance(starReleaseDetails)) {

182 return;

183 }

184 controlledPoints.matchWith({

185 Nothing: () => null,

186 Just: r => {

187 r.value.matchWith({

188 Error: () => null,

189 Ok: c => {

190 let all = [

191 ...c.value.ownedPoints,

192 ...c.value.votingPoints,

193 ...c.value.managingPoints,

194 ...c.value.spawningPoints,

195 ];

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

197 p => !rejectedPoints.includes(p)

198 );

199 if (

200 all.length === 1 &&

201 incoming.length === 0 &&

202 outgoingPoints.length === 0 &&

203 (starReleaseDetails.value === null ||

204 starReleaseDetails.value.total === 0)

205 ) {

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

207 popAndPush(names.POINT);

208 }

209 },

210 });

211 },

212 });

213 }, [

214 controlledPoints,

215 rejectedPoints,

216 outgoingPoints,

217 setPointCursor,

218 popAndPush,

219 names,

220 starReleaseDetails,

221 ]);

223 const address = need.addressFromWallet(wallet);

225 const loading = Nothing.hasInstance(controlledPoints);

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

228 const incomingPoints = maybeGetResult(

229 controlledPoints,

230 'incomingPoints',

231 []

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

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

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

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

236 const lockedPoints = maybeLockedPoints.getOrElse([]);

238 const allPoints = [

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

240 ...managingPoints,

241 ...votingPoints,

242 ...spawningPoints,

243 ].sort((a, b) => Number(a) - Number(b));

245 const displayEmptyState =

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

248 const starReleasing = starReleaseDetails

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

250 .getOrElse(false);

252 useEffect(() => {

253 syncStarReleaseDetails();

254 }, [syncStarReleaseDetails]);

256 // sync display details for known points

257 useSyncDetails(ownedPoints);

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

260 names.CREATE_GALAXY,

261 push,

262 ]);

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

265 names.STAR_RELEASE,

266 push,

267 ]);

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

270 // a potentially inaccurately empty point list.

271 //

272 if (

273 Just.hasInstance(controlledPoints) &&

274 controlledPoints.value.matchWith({

275 Error: e => true,

276 Ok: v => false,

277 })

278 ) {

279 const url = newGithubIssueUrl({

280 user: 'urbit',

281 repo: 'bridge',

282 title: controlledPoints.value.value,

283 body: ``,

284 });

285 return (

286 <View inset>

287 <Grid>

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

289 {controlledPoints.value.value}

290 <br />

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

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

293 </Grid.Item>

294 </Grid>

295 </View>

296 );

297 }

299 if (

300 loading ||

301 (allPoints.length === 1 &&

302 incomingPoints.length === 0 &&

303 outgoingPoints.length === 0 &&

304 !starReleasing)

305 ) {

306 return (

307 <View inset>

308 <Grid>

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

310 <Blinky /> Loading...

311 </Grid.Item>

312 </Grid>

313 </View>

314 );

315 }

317 return (

318 <View

319 inset

320 pop={pop}

321 hideBack

322 header={<L2PointHeader hideTimer hideInvites showMigrate />}>

323 <NavHeader>

324 <CopiableAddress

325 text={address}

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

327 {abbreviateAddress(address)}

328 </CopiableAddress>

329 </NavHeader>

330 {incomingPoints.map(point => (

331 <IncomingPoint

332 point={point}

333 accept={() => {

334 setPointCursor(Just(point));

335 push(names.ACCEPT_TRANSFER);

336 }}

337 reject={() => addRejectedPoint(point)}

338 />

339 ))}

340 <Grid>

341 {displayEmptyState && (

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

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

344 points.

345 </Grid.Item>

346 )}

348 {outgoingPoints.length > 0 && (

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

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

351 {pluralize(

352 outgoingPoints.length,

353 'Outgoing Transfer',

354 'Outgoing Transfers'

355 )}

356 </Grid.Item>

357 <Grid.Item

358 full

359 as={PointList}

360 points={outgoingPoints}

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

362 <ActionButtons

363 actions={[

364 {

365 text: 'Cancel',

366 onClick: () => {

367 setPointCursor(Just(point));

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

369 push(names.CANCEL_TRANSFER);

370 },

371 },

372 ]}

373 />

374 )}

375 />

376 </Grid.Item>

377 )}

379 {allPoints.length > 0 && (

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

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

382 </Grid.Item>

383 )}

385 {lockedPoints.length > 0 && (

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

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

388 </Grid.Item>

389 )}

391 <Footer>

392 <Grid>

393 <Grid.Divider />

394 {isEclipticOwner && (

395 <>

396 <Grid.Item

397 full

398 as={ForwardButton}

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

400 onClick={goCreateGalaxy}>

401 Create a galaxy

402 </Grid.Item>

403 <Grid.Divider />

404 </>

405 )}

406 {starReleasing && (

407 <>

408 <Grid.Item

409 full

410 as={ForwardButton}

411 detail="You have points being released"

412 onClick={goStarRelease}>

413 View Star Release

414 </Grid.Item>

415 <Grid.Divider />

416 </>

417 )}

418 </Grid>

419 </Footer>

420 </Grid>

421 </View>

422 );