git.iko.soy/bridge
on e082c49 help sign in
bridge/src/views/Points.js
228 lines 6.7 kB history raw
1import React from 'react';
2import { Just, Nothing } from 'folktale/maybe';
3import { Grid, H5, H1, HelpText, LinkButton, Flex } from 'indigo-react';
5import { useHistory } from 'store/history';
6import { useWallet } from 'store/wallet';
7import { usePointCache } from 'store/pointCache';
8import { usePointCursor } from 'store/pointCursor';
10import * as need from 'lib/need';
11import { ROUTE_NAMES } from 'lib/routeNames';
12import { isZeroAddress, abbreviateAddress } from 'lib/wallet';
13import useIsEclipticOwner from 'lib/useIsEclipticOwner';
14import { useSyncKnownPoints } from 'lib/useSyncPoints';
16import View from 'components/View';
17import FooterButton from 'components/FooterButton';
18import Blinky from 'components/Blinky';
19import Passport from 'components/Passport';
20import useRejectedIncomingPointTransfers from 'lib/useRejectedIncomingPointTransfers';
21import pluralize from 'lib/pluralize';
23const getFromMaybe = (obj, key, defaultValue) =>
24 obj.matchWith({
25 Nothing: () => defaultValue,
26 Just: p =>
27 p.value.matchWith({
28 Ok: r => r.value[key],
29 Error: e => defaultValue,
30 }),
31 });
33const hasTransferProxy = (details, point) =>
34 !isZeroAddress(details.transferProxy);
36const PointList = function({ points, className, actions, ...rest }) {
37 const { setPointCursor } = usePointCursor();
38 const history = useHistory();
40 return (
41 <Grid gap={3} className={className}>
42 {points.map((point, i) => (
43 <Grid.Item half={(i % 2) + 1} key={point}>
44 <Flex col>
45 <Passport.Mini
46 point={point}
47 className="clickable"
48 onClick={() => {
49 setPointCursor(Just(point));
50 history.push(history.names.POINT);
51 }}
52 {...rest}
53 />
54 {actions && (
55 <Flex.Item className="mt2">{actions(point, i)}</Flex.Item>
56 )}
57 </Flex>
58 </Grid.Item>
59 ))}
60 </Grid>
61 );
62};
64function ActionButtons({ actions = [] }) {
65 return (
66 <Flex row>
67 {actions.map(action => (
68 <Flex.Item
69 key={action.text}
70 as={LinkButton}
71 className="mr3"
72 onClick={action.onClick}>
73 {action.text}
74 </Flex.Item>
75 ))}
76 </Flex>
77 );
80export default function Points() {
81 const { wallet } = useWallet();
82 const history = useHistory();
83 const { setPointCursor } = usePointCursor();
84 const { controlledPoints, getDetails } = usePointCache();
85 const isEclipticOwner = useIsEclipticOwner();
86 const [
87 rejectedPoints,
88 addRejectedPoint,
89 ] = useRejectedIncomingPointTransfers();
91 const address = need.addressFromWallet(wallet);
93 const loading = Nothing.hasInstance(controlledPoints);
95 const ownedPoints = getFromMaybe(controlledPoints, 'ownedPoints', []);
96 const incomingPoints = getFromMaybe(
97 controlledPoints,
98 'incomingPoints',
99 []
100 ).filter(point => !rejectedPoints.includes(point));
101 const managingPoints = getFromMaybe(controlledPoints, 'managingPoints', []);
102 const votingPoints = getFromMaybe(controlledPoints, 'votingPoints', []);
103 const spawningPoints = getFromMaybe(controlledPoints, 'spawningPoints', []);
104 const outgoingPoints = ownedPoints.filter(point =>
105 getDetails(point).matchWith({
106 Nothing: () => false,
107 Just: p => hasTransferProxy(p.value),
108 })
109 );
111 const multipassPoints = [
112 ...ownedPoints,
113 ...managingPoints,
114 ...votingPoints,
115 ...spawningPoints,
116 ];
118 // sync display details for known points
119 useSyncKnownPoints([
120 ...ownedPoints,
121 ...incomingPoints,
122 ...managingPoints,
123 ...votingPoints,
124 ...spawningPoints,
125 ]);
127 return (
128 <View>
129 <Grid className="mt6">
130 <Grid.Item full as={H1} className="f6 mono gray4 mb4">
131 {abbreviateAddress(address)}
132 </Grid.Item>
134 {loading && (
135 <Grid.Item full as={HelpText} className="mt8 t-center">
136 <Blinky /> Loading...
137 </Grid.Item>
138 )}
140 {incomingPoints.length > 0 && (
141 <Grid.Item full as={Grid} gap={1} className="mb6">
142 <Grid.Item full as={H5}>
143 {pluralize(
144 incomingPoints.length,
145 'Incoming Transfer',
146 'Incoming Transfers'
147 )}
148 </Grid.Item>
149 <Grid.Item
150 full
151 as={PointList}
152 points={incomingPoints}
153 actions={(point, i) => (
154 <ActionButtons
155 actions={[
156 {
157 text: 'Accept',
158 onClick: () => {
159 setPointCursor(Just(point));
160 history.push(history.names.ACCEPT_TRANSFER);
161 },
162 },
163 {
164 text: 'Reject',
165 onClick: () => {
166 addRejectedPoint(point);
167 },
168 },
169 ]}
170 />
171 )}
172 inverted
173 />
174 </Grid.Item>
175 )}
177 {outgoingPoints.length > 0 && (
178 <Grid.Item full as={Grid} gap={1} className="mb6">
179 <Grid.Item full as={H5}>
180 {pluralize(
181 outgoingPoints.length,
182 'Outgoing Transfer',
183 'Outgoing Transfers'
184 )}
185 </Grid.Item>
186 <Grid.Item
187 full
188 as={PointList}
189 points={outgoingPoints}
190 actions={(point, i) => (
191 <ActionButtons
192 actions={[
193 {
194 text: 'Cancel',
195 onClick: () => {
196 setPointCursor(Just(point));
197 // TODO: deep linking to fix this duplicate route
198 history.push(history.names.CANCEL_TRANSFER);
199 },
200 },
201 ]}
202 />
203 )}
204 inverted
205 />
206 </Grid.Item>
207 )}
209 {multipassPoints.length > 0 && (
210 <Grid.Item full as={Grid} gap={1}>
211 <Grid.Item full as={H5}>
212 {pluralize(multipassPoints.length, 'Multipass', 'Multipasses')}
213 </Grid.Item>
214 <Grid.Item full as={PointList} points={multipassPoints} />
215 </Grid.Item>
216 )}
218 {isEclipticOwner && (
219 <FooterButton
220 detail="You have the authority to create a new Galaxy."
221 onClick={() => history.push(ROUTE_NAMES.CREATE_GALAXY)}>
222 Create a galaxy
223 </FooterButton>
224 )}
225 </Grid>
226 </View>
227 );