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

git.iko.soy/bridge

on 368f024 help sign in

bridge/src/views/Points.js

422 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';

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

13import * as need from 'lib/need';

14import { isZeroAddress, abbreviateAddress } from 'lib/utils/address';

15import useIsEclipticOwner from 'lib/useIsEclipticOwner';

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

17import useRejectedIncomingPointTransfers from 'lib/useRejectedIncomingPointTransfers';

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

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

21import View from 'components/View';

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 LoadingOverlay from 'components/L2/LoadingOverlay';

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

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

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

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

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

179 useEffect(() => {

180 if (

181 Nothing.hasInstance(outgoingPoints) ||

182 Nothing.hasInstance(starReleaseDetails)

183 ) {

184 return;

185 }

186 controlledPoints.matchWith({

187 Nothing: () => null,

188 Just: r => {

189 r.value.matchWith({

190 Error: () => null,

191 Ok: c => {

192 let all = [

193 ...c.value.ownedPoints,

194 ...c.value.votingPoints,

195 ...c.value.managingPoints,

196 ...c.value.spawningPoints,

197 ];

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

199 p => !rejectedPoints.includes(p)

200 );

201 if (

202 all.length === 1 &&

203 incoming.length === 0 &&

204 outgoingPoints.length === 0 &&

205 (starReleaseDetails.value === null ||

206 starReleaseDetails.value.total === 0)

207 ) {

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

209 popAndPush(names.POINT);

210 }

211 },

212 });

213 },

214 });

215 }, [

216 controlledPoints,

217 rejectedPoints,

218 outgoingPoints,

219 setPointCursor,

220 popAndPush,

221 names,

222 starReleaseDetails,

223 ]);

225 const address = need.addressFromWallet(wallet);

227 const loading = Nothing.hasInstance(controlledPoints);

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

230 const incomingPoints = maybeGetResult(

231 controlledPoints,

232 'incomingPoints',

233 []

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

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

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

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

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

240 const allPoints = [

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

242 ...managingPoints,

243 ...votingPoints,

244 ...spawningPoints,

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

247 const displayEmptyState =

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

250 const starReleasing = starReleaseDetails

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

252 .getOrElse(false);

254 useEffect(() => {

255 syncStarReleaseDetails();

256 }, [syncStarReleaseDetails]);

258 // sync display details for known points

259 useSyncDetails(ownedPoints);

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

262 names.CREATE_GALAXY,

263 push,

264 ]);

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

267 names.STAR_RELEASE,

268 push,

269 ]);

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

272 // a potentially inaccurately empty point list.

273 //

274 if (

275 Just.hasInstance(controlledPoints) &&

276 controlledPoints.value.matchWith({

277 Error: e => true,

278 Ok: v => false,

279 })

280 ) {

281 const url = newGithubIssueUrl({

282 user: 'urbit',

283 repo: 'bridge',

284 title: controlledPoints.value.value,

285 body: ``,

286 });

287 return (

288 <View inset>

289 <Grid>

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

291 {controlledPoints.value.value}

292 <br />

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

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

295 </Grid.Item>

296 </Grid>

297 </View>

298 );

299 }

301 if (

302 loading ||

303 (allPoints.length === 1 &&

304 incomingPoints.length === 0 &&

305 outgoingPoints.length === 0 &&

306 !starReleasing)

307 ) {

308 return (

309 <View inset>

310 <LoadingOverlay loading />

311 </View>

312 );

313 }

315 return (

316 <View

317 inset

318 pop={pop}

319 hideBack

320 header={<L2PointHeader hideHome hideTimer hideInvites showMigrate />}>

321 <NavHeader>

322 <CopiableAddress

323 text={address}

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

325 {abbreviateAddress(address)}

326 </CopiableAddress>

327 </NavHeader>

328 {incomingPoints.map(point => (

329 <IncomingPoint

330 key={point}

331 point={point}

332 accept={() => {

333 setPointCursor(Just(point));

334 push(names.ACCEPT_TRANSFER);

335 }}

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

337 />

338 ))}

339 <Grid>

340 {displayEmptyState && (

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

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

343 points.

344 </Grid.Item>

345 )}

347 {outgoingPoints.length > 0 && (

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

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

350 {pluralize(

351 outgoingPoints.length,

352 'Outgoing Transfer',

353 'Outgoing Transfers'

354 )}

355 </Grid.Item>

356 <Grid.Item

357 full

358 as={PointList}

359 points={outgoingPoints}

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

361 <ActionButtons

362 actions={[

363 {

364 text: 'Cancel',

365 onClick: () => {

366 setPointCursor(Just(point));

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

368 push(names.CANCEL_TRANSFER);

369 },

370 },

371 ]}

372 />

373 )}

374 />

375 </Grid.Item>

376 )}

378 {allPoints.length > 0 && (

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

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

381 </Grid.Item>

382 )}

384 {lockedPoints.length > 0 && (

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

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

387 </Grid.Item>

388 )}

390 <Footer>

391 <Grid>

392 <Grid.Divider />

393 {isEclipticOwner && (

394 <>

395 <Grid.Item

396 full

397 as={ForwardButton}

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

399 onClick={goCreateGalaxy}>

400 Create a galaxy

401 </Grid.Item>

402 <Grid.Divider />

403 </>

404 )}

405 {starReleasing && (

406 <>

407 <Grid.Item

408 full

409 as={ForwardButton}

410 detail="You have points being released"

411 onClick={goStarRelease}>

412 View Star Release

413 </Grid.Item>

414 <Grid.Divider />

415 </>

416 )}

417 </Grid>

418 </Footer>

419 </Grid>

420 </View>

421 );