@@ -1,186 +1,207 @@
11import React from 'react';
22import { Just, Nothing } from 'folktale/maybe';
3−import { H1, H2, P, Grid } from 'indigo-react';
4−
5−import { ROUTE_NAMES } from 'lib/routeNames';
6−import { isZeroAddress } from 'lib/wallet';
7−import useIsEclipticOwner from 'lib/useIsEclipticOwner';
8−import { useSyncKnownPoints } from 'lib/useSyncPoints';
3+import { Grid, H5, H1, HelpText, LinkButton, Flex } from 'indigo-react';
94
105import { useHistory } from 'store/history';
116import { useWallet } from 'store/wallet';
127import { usePointCache } from 'store/pointCache';
8+import { usePointCursor } from 'store/pointCursor';
9+
10+import * as need from 'lib/need';
11+import { ROUTE_NAMES } from 'lib/routeNames';
12+import { isZeroAddress, abbreviateAddress } from 'lib/wallet';
13+import useIsEclipticOwner from 'lib/useIsEclipticOwner';
14+import { useSyncKnownPoints } from 'lib/useSyncPoints';
1315
1416import View from 'components/View';
15−import { ForwardButton } from 'components/Buttons';
16−import useLifecycle from 'lib/useLifecycle';
17+import FooterButton from 'components/FooterButton';
18+import Blinky from 'components/Blinky';
19+import Passport from 'components/Passport';
20+
21+const getFromMaybe = (obj, key, defaultValue) =>
22+ obj.matchWith({
23+ Nothing: () => defaultValue,
24+ Just: p =>
25+ p.value.matchWith({
26+ Ok: r => r.value[key],
27+ Error: e => defaultValue,
28+ }),
29+ });
1730
18−//TODO new component
19−import { usePointCursor } from 'store/pointCursor';
20−import * as ob from 'urbit-ob';
21−const PointList = function(props) {
31+const hasTransferProxy = (details, point) =>
32+ !isZeroAddress(details.transferProxy);
33+
34+const PointList = function({ points, className, actions, ...rest }) {
2235 const { setPointCursor } = usePointCursor();
2336 const history = useHistory();
24− const { points, loading } = props;
25−
26− return points.length === 0 ? (
27− <p>{loading ? 'Loading...' : 'No points to display'}</p>
28− ) : (
29− <>
30− {points.map(point => (
31− <P
32− key={point}
33− onClick={() => {
34− setPointCursor(Just(point));
35− history.push(ROUTE_NAMES.POINT);
36− }}>
37− {ob.patp(point)}
38− </P>
37+
38+ return (
39+ <Grid gap={3} className={className}>
40+ {points.map((point, i) => (
41+ <Grid.Item half={(i % 2) + 1} key={point}>
42+ <Flex col>
43+ <Passport.Mini
44+ point={point}
45+ className="clickable"
46+ onClick={() => {
47+ setPointCursor(Just(point));
48+ history.push(history.names.POINT);
49+ }}
50+ {...rest}
51+ />
52+ <Flex.Item className="mt2">{actions}</Flex.Item>
53+ </Flex>
54+ </Grid.Item>
3955 ))}
40− </>
56+ </Grid>
4157 );
4258};
4359
44−const matchArray = obj =>
45− obj.matchWith({ Nothing: () => [], Just: p => p.value });
46−
47−const hasTransferProxy = (details, point) =>
48− !isZeroAddress(details.transferProxy);
60+function ActionButtons({ actions = [] }) {
61+ return (
62+ <Flex row>
63+ {actions.map(action => (
64+ <Flex.Item
65+ key={action.text}
66+ as={LinkButton}
67+ className="mr3"
68+ onClick={action.onClick}>
69+ {action.text}
70+ </Flex.Item>
71+ ))}
72+ </Flex>
73+ );
74+}
4975
5076export default function Points() {
5177 const { wallet } = useWallet();
5278 const history = useHistory();
53− const {
54− getControlledPoints,
55− syncControlledPoints,
56− getDetails,
57− } = usePointCache();
58− const {
59− ownedPoints,
60− incomingPoints,
61− managingPoints,
62− votingPoints,
63− spawningPoints,
64− } = getControlledPoints(wallet);
79+ const { controlledPoints, getDetails } = usePointCache();
6580 const isEclipticOwner = useIsEclipticOwner();
6681
67− const owned = matchArray(ownedPoints);
68− const incoming = matchArray(incomingPoints);
69− const managing = matchArray(managingPoints);
70− const voting = matchArray(votingPoints);
71− const spawning = matchArray(spawningPoints);
82+ const address = need.addressFromWallet(wallet);
7283
73− // sync controlled points on mount
74− useLifecycle(() => {
75− syncControlledPoints();
76− });
84+ const loading = Nothing.hasInstance(controlledPoints);
7785
78− // sync display details for known points
79− useSyncKnownPoints([
80− ...owned,
81− ...incoming,
82− ...managing,
83− ...voting,
84− ...spawning,
85− ]);
86−
87− const loading = Nothing.hasInstance(ownedPoints);
88−
89− const outgoing = ownedPoints.filter(point =>
86+ const ownedPoints = getFromMaybe(controlledPoints, 'ownedPoints', []);
87+ const incomingPoints = getFromMaybe(controlledPoints, 'incomingPoints', []);
88+ const managingPoints = getFromMaybe(controlledPoints, 'managingPoints', []);
89+ const votingPoints = getFromMaybe(controlledPoints, 'votingPoints', []);
90+ const spawningPoints = getFromMaybe(controlledPoints, 'spawningPoints', []);
91+ const outgoingPoints = ownedPoints.filter(point =>
9092 getDetails(point).matchWith({
9193 Nothing: () => false,
9294 Just: p => hasTransferProxy(p.value),
9395 })
9496 );
9597
98+ const multipassPoints = [
99+ ...ownedPoints,
100+ ...managingPoints,
101+ ...votingPoints,
102+ ...spawningPoints,
103+ ];
104+
105+ // sync display details for known points
106+ useSyncKnownPoints([
107+ ...ownedPoints,
108+ ...incomingPoints,
109+ ...managingPoints,
110+ ...votingPoints,
111+ ...spawningPoints,
112+ ]);
113+
96114 return (
97115 <View>
98− <H1>Points</H1>
99−
100− <P>
101− A point is an identity on the Ethereum blockchain. Points declare keys
102− for ships on the Arvo network.
103− </P>
104−
105− <Grid>
106− <Grid.Divider />
107− <Grid.Item full>
108− <ForwardButton
109− detail="View a point on Azimuth"
110− onClick={() => history.push(ROUTE_NAMES.VIEW_POINT)}>
111− View a point
112− </ForwardButton>
116+ <Grid className="mt6">
117+ <Grid.Item full as={H1} className="f6 mono gray4 mb4">
118+ {abbreviateAddress(address)}
113119 </Grid.Item>
114− <Grid.Divider />
115− {isEclipticOwner && (
116− <>
117− <Grid.Item full>
118− <ForwardButton
119− detail="You have the authority to create a new Galaxy."
120− onClick={() => history.push(ROUTE_NAMES.CREATE_GALAXY)}>
121− Create a galaxy
122− </ForwardButton>
120+
121+ {loading && (
122+ <Grid.Item full as={HelpText} className="mt8 t-center">
123+ <Blinky /> Loading...
124+ </Grid.Item>
125+ )}
126+
127+ {incomingPoints.length > 0 && (
128+ <Grid.Item full as={Grid} gap={1} className="mb6">
129+ <Grid.Item full as={H5}>
130+ Incoming Transfers
123131 </Grid.Item>
124− <Grid.Divider />
125− </>
132+ <Grid.Item
133+ full
134+ as={PointList}
135+ points={incomingPoints}
136+ actions={
137+ <ActionButtons
138+ actions={[
139+ {
140+ text: 'Accept',
141+ onClick: () => {
142+ // TODO: accept
143+ console.log('accept');
144+ },
145+ },
146+ {
147+ text: 'Reject',
148+ onClick: () => {
149+ // TODO: reject
150+ console.log('reject');
151+ },
152+ },
153+ ]}
154+ />
155+ }
156+ inverted
157+ />
158+ </Grid.Item>
159+ )}
160+
161+ {outgoingPoints.length > 0 && (
162+ <Grid.Item full as={Grid} gap={1} className="mb6">
163+ <Grid.Item full as={H5}>
164+ Outgoing Transfers
165+ </Grid.Item>
166+ <Grid.Item
167+ full
168+ as={PointList}
169+ points={outgoingPoints}
170+ actions={
171+ <ActionButtons
172+ actions={[
173+ {
174+ text: 'Cancel',
175+ onClick: () => {
176+ // TODO: cancel
177+ console.log('cancel');
178+ },
179+ },
180+ ]}
181+ />
182+ }
183+ inverted
184+ />
185+ </Grid.Item>
126186 )}
127− </Grid>
128187
129− {incoming.length > 0 && (
130− <>
131− <H2>Incoming Transfers</H2>
132− <P>
133− You do not own these points until you accept the incoming transfer.
134− You may reject any incoming transfers.
135− </P>
136− <PointList routeHandler={history.push} points={incoming} />
137− </>
138− )}
139−
140− {outgoing.length > 0 && (
141− <>
142− <H2>Outgoing Transfers</H2>
143− <P>
144− You own these points until the recipient accepts the incoming
145− transfer. You may cancel the transfer until accepted.
146− </P>
147− <PointList routeHandler={history.push} points={outgoing} />
148− </>
149− )}
150−
151− <H2>Your Points</H2>
152−
153− <PointList routeHandler={history.push} points={owned} loading={loading} />
154−
155− {managing.length > 0 && (
156− <>
157− <H2>You Are a Management Proxy For</H2>
158− <P>
159− You can configure or set network keys and conduct sponsorship
160− related operations for these points.
161− </P>
162− <PointList routeHandler={history.push} points={managing} />
163− </>
164− )}
165−
166− {voting.length > 0 && (
167− <>
168− <H2>You Are a Voting Proxy For</H2>
169− <P>
170− Since you are part of the Galactic Senate, you can cast votes on new
171− Azimuth proposals on behalf of these points.
172− </P>
173− <PointList routeHandler={history.push} points={voting} />
174− </>
175− )}
176−
177− {spawning.length > 0 && (
178− <>
179− <H2>You Are a Spawn Proxy For</H2>
180− <P>You can create new child points under these points.</P>
181− <PointList routeHandler={history.push} points={spawning} />
182− </>
183− )}
188+ {multipassPoints.length > 0 && (
189+ <Grid.Item full as={Grid} gap={1}>
190+ <Grid.Item full as={H5}>
191+ Multipasses
192+ </Grid.Item>
193+ <Grid.Item full as={PointList} points={multipassPoints} />
194+ </Grid.Item>
195+ )}
196+
197+ {isEclipticOwner && (
198+ <FooterButton
199+ detail="You have the authority to create a new Galaxy."
200+ onClick={() => history.push(ROUTE_NAMES.CREATE_GALAXY)}>
201+ Create a galaxy
202+ </FooterButton>
203+ )}
204+ </Grid>
184205 </View>
185206 );
186207}