git.iko.soy/bridge
on aee35bb help sign in
bridge/src/views/Point.js
143 lines 3.7 kB history raw
1import { Just, Nothing } from 'folktale/maybe';
2import React from 'react';
3import { pour } from 'sigil-js';
4import * as ob from 'urbit-ob';
5import * as azimuth from 'azimuth-js';
6import * as need from '../lib/need';
8import PointList from '../components/old/PointList';
9import ReactSVGComponents from '../components/ReactSVGComponents';
10import KeysAndMetadata from './Point/KeysAndMetadata';
11import Actions from './Point/Actions';
12import { H1, H3 } from '../components/old/Base';
13import { withHistory } from '../store/history';
14import { withNetwork } from '../store/network';
15import { compose } from '../lib/lib';
16import { withWallet } from '../store/wallet';
17import { withPointCursor } from '../store/pointCursor';
18import { withPointCache } from '../store/pointCache';
19import View from 'components/View';
21class Point extends React.Component {
22 constructor(props) {
23 super(props);
25 this.state = {
26 spawned: [],
27 invites: Nothing(),
28 };
29 }
31 componentDidMount() {
32 this.cachePoints();
33 }
35 componentDidUpdate(prevProps) {
36 //
37 // NB (jtobin)
38 //
39 // When a link in the 'issued points' component is clicked, we don't
40 // actually leave the Point component, and componentDidMount will not fire
41 // again. But, we can force a call to cachePoints here.
42 //
43 const oldCursor = prevProps.pointCursor.getOrElse(true);
44 const newCursor = this.props.pointCursor.getOrElse(true);
46 if (oldCursor !== newCursor) {
47 this.cachePoints();
48 }
49 }
51 cachePoints() {
52 const { web3, contracts, pointCursor, addToPointCache } = this.props;
54 web3.chain(_ =>
55 contracts.chain(ctrcs =>
56 pointCursor.chain(point => {
57 azimuth.azimuth
58 .getPoint(ctrcs, point)
59 .then(details => addToPointCache({ [point]: details }));
60 azimuth.delegatedSending
61 .getTotalUsableInvites(ctrcs, point)
62 .then(count => this.setState({ invites: Just(count) }));
63 this.updateSpawned(ctrcs, point);
64 })
65 )
66 );
67 }
69 updateSpawned = contracts => {
70 const { pointCursor } = this.props;
72 pointCursor.matchWith({
73 Nothing: _ => {},
74 Just: point => {
75 azimuth.azimuth
76 .getSpawned(contracts, point.value)
77 .then(spawned => this.setState({ spawned }));
78 },
79 });
80 };
82 render() {
83 const { web3, history, wallet, pointCache } = this.props;
85 const { spawned } = this.state;
87 const point = need.pointCursor(this.props.pointCursor);
89 const pointDetails =
90 point in pointCache ? Just(pointCache[point]) : Nothing();
92 const name = ob.patp(point);
94 const sigil = pour({
95 patp: name,
96 renderer: ReactSVGComponents,
97 size: 256,
98 });
100 const online = Just.hasInstance(web3);
102 const authenticated = Just.hasInstance(wallet);
104 const issuedPointList =
105 spawned.length === 0 ? (
106 <div />
107 ) : (
108 <div>
109 <H3>{'Issued Points'}</H3>
111 <PointList routeHandler={history.popAndPush} points={spawned} />
112 </div>
113 );
115 return (
116 <View>
117 <div className={'mt-12 pt-6'}>{sigil}</div>
118 <H1>
119 <code>{name}</code>
120 </H1>
121 {authenticated ? (
122 <Actions
123 online={online}
124 point={point}
125 pointDetails={pointDetails}
126 invites={this.state.invites}
127 />
128 ) : null}
130 {online ? <KeysAndMetadata pointDetails={pointDetails} /> : <div />}
131 {issuedPointList}
132 </View>
133 );
134 }
137export default compose(
138 withNetwork,
139 withHistory,
140 withWallet,
141 withPointCursor,
142 withPointCache
143)(Point);