@@ -1,245 +1,159 @@
11import React from 'react';
2−import { H1, H2, P } from '../components/old/Base';
3−import { Button } from '../components/old/Base';
4−import * as azimuth from 'azimuth-js';
5−
6−import PointList from '../components/old/PointList';
7−import { NETWORK_TYPES } from '../lib/network';
8−import { ROUTE_NAMES } from '../lib/routeNames';
9−import { withHistory } from '../store/history';
10−import { ETH_ZERO_ADDR, eqAddr } from '../lib/wallet';
11−import { withNetwork } from '../store/network';
12−import { compose } from '../lib/lib';
13−import { withWallet } from '../store/wallet';
14−import { withPointCache } from '../store/pointCache';
2+import Maybe from 'folktale/maybe';
3+import { H1, H2, P, Grid } from 'indigo-react';
4+
5+import { ROUTE_NAMES } from 'lib/routeNames';
6+import { ETH_ZERO_ADDR, eqAddr } from 'lib/wallet';
7+import useIsEclipticOwner from 'lib/useIsEclipticOwner';
8+import { useSyncKnownPoints } from 'lib/useSyncPoints';
9+
10+import { useHistory } from 'store/history';
11+import { useWallet } from 'store/wallet';
12+import { usePointCache } from 'store/pointCache';
13+
14+import PointList from 'components/old/PointList';
1515import View from 'components/View';
16−import { Grid } from 'indigo-react';
17−
18−const hasTransferProxy = (cache, point) =>
19− point in cache ? !eqAddr(cache[point].transferProxy, ETH_ZERO_ADDR) : false;
20−
21−class Points extends React.Component {
22− constructor(props) {
23− super(props);
24−
25− const { networkType } = props;
26− const loading = networkType !== NETWORK_TYPES.OFFLINE;
27−
28− this.state = {
29− points: [],
30− incoming: [],
31− managing: [],
32− voting: [],
33− spawning: [],
34− eclipticOwner: false,
35− loading: loading,
36− };
37− }
38−
39− componentDidMount() {
40− const { web3, wallet, contracts, addToPointCache } = this.props;
41−
42− web3.chain(_ =>
43− contracts.chain(ctrcs =>
44− wallet.chain(async wal => {
45− const addr = wal.address;
46−
47− const points = await azimuth.azimuth.getOwnedPoints(ctrcs, addr);
48−
49− const incoming = await azimuth.azimuth.getTransferringFor(
50− ctrcs,
51− addr
52− );
53−
54− const managing = await azimuth.azimuth.getManagerFor(ctrcs, addr);
55−
56− const voting = await azimuth.azimuth.getVotingFor(ctrcs, addr);
57−
58− const spawning = await azimuth.azimuth.getSpawningFor(ctrcs, addr);
59−
60− const owner = await azimuth.ecliptic.owner(ctrcs);
61−
62− const eclipticOwner = eqAddr(addr, owner);
63−
64− this.setState({
65− points,
66− incoming,
67− managing,
68− voting,
69− spawning,
70− eclipticOwner,
71− loading: false,
72− });
73−
74− this.cachePoints(ctrcs, addToPointCache, points);
75− })
76− )
77− );
78− }
79−
80− cachePoints(contracts, addToPointCache, points) {
81− points.forEach(point => {
82− azimuth.azimuth
83− .getPoint(contracts, point)
84− .then(details => addToPointCache({ [point]: details }));
85− });
86− }
87−
88− render() {
89− const { history, pointCache } = this.props;
90−
91− const {
92− points,
93− incoming,
94− managing,
95− voting,
96− spawning,
97− loading,
98− eclipticOwner,
99− } = this.state;
100−
101− const lookupPointButton = (
16+import { ForwardButton } from 'components/Buttons';
17+import useLifecycle from 'lib/useLifecycle';
18+
19+const matchArray = obj =>
20+ obj.matchWith({ Nothing: () => [], Just: p => p.value });
21+
22+const hasTransferProxy = (details, point) =>
23+ !eqAddr(details.transferProxy, ETH_ZERO_ADDR);
24+
25+export default function Points() {
26+ const { wallet } = useWallet();
27+ const history = useHistory();
28+ const {
29+ getControlledPoints,
30+ syncControlledPoints,
31+ getDetails,
32+ } = usePointCache();
33+ const {
34+ ownedPoints,
35+ incomingPoints,
36+ managingPoints,
37+ votingPoints,
38+ spawningPoints,
39+ } = getControlledPoints(wallet);
40+ const isEclipticOwner = useIsEclipticOwner();
41+
42+ const owned = matchArray(ownedPoints);
43+ const incoming = matchArray(incomingPoints);
44+ const managing = matchArray(managingPoints);
45+ const voting = matchArray(votingPoints);
46+ const spawning = matchArray(spawningPoints);
47+
48+ // sync controlled points on mount
49+ useLifecycle(() => {
50+ syncControlledPoints();
51+ });
52+
53+ // sync display details for known points
54+ useSyncKnownPoints([
55+ ...owned,
56+ ...incoming,
57+ ...managing,
58+ ...voting,
59+ ...spawning,
60+ ]);
61+
62+ const loading = Maybe.Nothing.hasInstance(ownedPoints);
63+
64+ const outgoing = ownedPoints.filter(point =>
65+ getDetails(point).matchWith({
66+ Nothing: () => false,
67+ Just: p => hasTransferProxy(p.value),
68+ })
69+ );
70+
71+ return (
72+ <View>
73+ <H1>Points</H1>
74+
75+ <P>
76+ A point is an identity on the Ethereum blockchain. Points declare keys
77+ for ships on the Arvo network.
78+ </P>
79+
10280 <Grid>
10381 <Grid.Item full>
104− <Button
105− prop-type={'link'}
106− prop-size={'md'}
82+ <ForwardButton
83+ detail="View a point on Azimuth"
10784 onClick={() => history.push(ROUTE_NAMES.VIEW_POINT)}>
108− {'View a point →'}
109− </Button>
110− <P>{'View a point on Azimuth.'}</P>
85+ View a point
86+ </ForwardButton>
11187 </Grid.Item>
11288 </Grid>
113− );
11489
115− const createGalaxyButton =
116− eclipticOwner === false ? (
117− <div />
118− ) : (
90+ {isEclipticOwner && (
11991 <Grid>
12092 <Grid.Item full>
121− <Button
122− prop-type={'link'}
123− prop-size={'md'}
93+ <ForwardButton
94+ detail="You have the authority to create a new Galaxy."
12495 onClick={() => history.push(ROUTE_NAMES.CREATE_GALAXY)}>
125− {'Create a galaxy →'}
126− </Button>
127− <P>
128− {
129− 'You have the authority to create a new Galaxy and you can do so here.'
130− }
131− </P>
96+ Create a galaxy
97+ </ForwardButton>
13298 </Grid.Item>
13399 </Grid>
134− );
100+ )}
135101
136− const outgoing = points.filter(point =>
137− hasTransferProxy(pointCache, point)
138− );
139−
140− const outgoingPoints =
141− outgoing.length !== 0 ? (
142− <React.Fragment>
143− <H2>{'Outgoing Transfers'}</H2>
102+ {incoming.length > 0 && (
103+ <>
104+ <H2>Incoming Transfers</H2>
144105 <P>
145− {`You own these points until the recipient accepts the incoming
146− transfer. You may cancel the transfer until accepted.`}
106+ You do not own these points until you accept the incoming transfer.
107+ You may reject any incoming transfers.
147108 </P>
148− <PointList routeHandler={history.push} points={outgoing} />
149− </React.Fragment>
150− ) : (
151− <div />
152− );
153−
154− const incomingPoints =
155− incoming.length !== 0 ? (
156− <React.Fragment>
157− <H2>{'Incoming Transfers'}</H2>
109+ <PointList routeHandler={history.push} points={incoming} />
110+ </>
111+ )}
112+
113+ {outgoing.length > 0 && (
114+ <>
115+ <H2>Outgoing Transfers</H2>
158116 <P>
159− {`You do not own these points until you accept the incoming transfer.
160− You may reject any incoming transfers.`}
117+ You own these points until the recipient accepts the incoming
118+ transfer. You may cancel the transfer until accepted.
161119 </P>
162− <PointList routeHandler={history.push} points={incoming} />
163− </React.Fragment>
164− ) : (
165− <div />
166− );
167−
168− const managingPoints =
169− managing.length !== 0 ? (
170− <React.Fragment>
171− <H2>{'You Are a Management Proxy For'}</H2>
120+ <PointList routeHandler={history.push} points={outgoing} />
121+ </>
122+ )}
123+
124+ <H2>Your Points</H2>
125+
126+ <PointList routeHandler={history.push} points={owned} loading={loading} />
127+
128+ {managing.length > 0 && (
129+ <>
130+ <H2>You Are a Management Proxy For</H2>
172131 <P>
173− {`You can configure or set network keys and conduct sponsorship
174− related operations for these points.`}
132+ You can configure or set network keys and conduct sponsorship
133+ related operations for these points.
175134 </P>
176135 <PointList routeHandler={history.push} points={managing} />
177− </React.Fragment>
178− ) : (
179− <div />
180− );
181−
182− const votingPoints =
183− voting.length !== 0 ? (
184− <React.Fragment>
185− <H2>{'You Are a Voting Proxy For'}</H2>
136+ </>
137+ )}
138+
139+ {voting.length > 0 && (
140+ <>
141+ <H2>You Are a Voting Proxy For</H2>
186142 <P>
187− {`Since you are part of the Galactic Senate, you can cast votes on
188− new Azimuth proposals on behalf of these points.`}
143+ Since you are part of the Galactic Senate, you can cast votes on new
144+ Azimuth proposals on behalf of these points.
189145 </P>
190146 <PointList routeHandler={history.push} points={voting} />
191− </React.Fragment>
192− ) : (
193− <div />
194− );
195−
196− const spawningPoints =
197− spawning.length !== 0 ? (
198− <React.Fragment>
199− <H2>{'You Are a Spawn Proxy For'}</H2>
200− <P>{`You can create new child ships under these points.`}</P>
201− <PointList routeHandler={history.push} points={spawning} />
202− </React.Fragment>
203− ) : (
204− <div />
205− );
206−
207− return (
208− <View>
209− <H1>{'Points'}</H1>
210−
211− <P>{`A point is an identity on the Ethereum blockchain.
212− Points declare keys for ships on the Arvo network.`}</P>
213−
214− {lookupPointButton}
215−
216− {createGalaxyButton}
217−
218− {incomingPoints}
219−
220− {outgoingPoints}
147+ </>
148+ )}
221149
222− <H2>{'Your Points'}</H2>
223−
224− <PointList
225− routeHandler={history.push}
226− points={points}
227− loading={loading}
228− />
229−
230− {managingPoints}
231−
232− {votingPoints}
233−
234− {spawningPoints}
235− </View>
236− );
237− }
150+ {spawning.length > 0 && (
151+ <>
152+ <H2>You Are a Spawn Proxy For</H2>
153+ <P>You can create new child points under these points.</P>
154+ <PointList routeHandler={history.push} points={spawning} />
155+ </>
156+ )}
157+ </View>
158+ );
238159}
239−
240−export default compose(
241− withNetwork,
242− withHistory,
243− withWallet,
244− withPointCache
245−)(Points);