git.iko.soy/bridge
on master help sign in
creating-invites: adjust styles to match updated design
1d31d97Hunter Miller
src/components/L2/CreatingInvitesModal.tsxnew file+85
compare with master
unifiedsplit
@@ -0,0 +1,85 @@
1+import { Col, H3, LoadingSpinner, Row, Text, Button } from '@tlon/indigo-react';
2+import Modal from 'components/L2/Modal';
3+import { ReactComponent as InviteIcon } from 'assets/invite.svg';
4+import { InviteGeneratingStatus } from '../../views/Invite/useInvites';
5+import BodyPane from './Window/BodyPane';
6+
7+interface GeneratingModalProps {
8+ status: InviteGeneratingStatus;
9+ current: number;
10+ total: number;
11+ error?: string;
12+ hide: () => void;
13+}
14+
15+export const CreatingInvitesModal = ({
16+ status,
17+ current,
18+ total,
19+ hide,
20+ error,
21+}: GeneratingModalProps) => {
22+ const successfulInvites = current > 1 ? current - 1 : 0;
23+ return (
24+ <Modal
25+ small
26+ show={status !== 'initial'}
27+ hide={hide}
28+ hideClose={status !== 'finished'}>
29+ <BodyPane p={0}>
30+ <Col width="350px">
31+ {status === 'generating' && (
32+ <Row alignItems="center">
33+ <LoadingSpinner dark />
34+ <Text bold marginLeft={2}>
35+ Creating Invite {current}/{total}...
36+ </Text>
37+ </Row>
38+ )}
39+ {status === 'finished' && (
40+ <>
41+ <Row mb={3}>
42+ <InviteIcon />
43+ <Text bold ml={2}>
44+ All Invites Created
45+ </Text>
46+ </Row>
47+ <Text mb={3}>
48+ The planets you selected are re-ticketed and appear as new
49+ invitation links under each star.
50+ </Text>
51+ <Row>
52+ <Button className="secondary" ml="auto" onClick={hide}>
53+ Close
54+ </Button>
55+ </Row>
56+ </>
57+ )}
58+ {status === 'errored' && (
59+ <>
60+ <H3 marginBottom={2}>
61+ There was an error while creating your invites:
62+ </H3>
63+ {error && (
64+ <Text color="red" mono marginBottom={3}>
65+ {error}
66+ </Text>
67+ )}
68+ {!!successfulInvites && (
69+ <Text marginY={3}>
70+ At least {successfulInvites} planet
71+ {successfulInvites > 1 ? 's' : ''} were successfully
72+ re-ticketed and appear as new invitation links under each
73+ star.
74+ </Text>
75+ )}
76+ <Button className="secondary" onClick={hide}>
77+ Back
78+ </Button>
79+ </>
80+ )}
81+ </Col>
82+ </BodyPane>
83+ </Modal>
84+ );
85+};
src/components/L2/Headers/L2PointHeader.scss+12−8
@@ -31,14 +31,12 @@
31 border-radius: $medium-border-radius;
31 border-radius: $medium-border-radius;
32 background-color: $washed-gray;
32 background-color: $washed-gray;
33 }
33 }
34−
35− .info {
36− svg {
37− width: 14px;
38− height: 16px;
39− }
40
34
35+ .info {
36+ .invites,
37+ .history,
38+ .create-invites,
41− .invites, .history, .rollup-timer {
39+ .rollup-timer {
42 border-radius: $medium-border-radius;
40 border-radius: $medium-border-radius;
43
41
44 &:hover {
42 &:hover {
@@ -46,11 +44,17 @@
46 }
44 }
47 }
45 }
48
46
49− .invites, .history {
47+ .invites,
48+ .history,
49+ .create-invites {
50 background-color: $washed-gray;
50 background-color: $washed-gray;
51 padding: 8px;
51 padding: 8px;
52 }
52 }
53
53
54+ .create-invites {
55+ margin-left: 4px;
56+ }
57+
54 .invites {
58 .invites {
55 margin-right: 4px;
59 margin-right: 4px;
56
60
src/components/L2/Headers/L2PointHeader.tsx+2−2
@@ -90,13 +90,13 @@ const L2PointHeader = ({
90 {/* {point.isL1 && point.isL2Spawn && <Box className="l2-spawn">L2 Spawn</Box>} */}
90 {/* {point.isL1 && point.isL2Spawn && <Box className="l2-spawn">L2 Spawn</Box>} */}
91 </Row>
91 </Row>
92 <Row>
92 <Row>
93− <Row className="info" mr={3}>
93+ <Row className="info">
94 {renderInviteButton()}
94 {renderInviteButton()}
95 <Box className="history" onClick={goToHistory}>
95 <Box className="history" onClick={goToHistory}>
96 History
96 History
97 </Box>
97 </Box>
98+ {points && <InviteConverter points={points} />}
98 </Row>
99 </Row>
99− {points && <InviteConverter points={points} />}
100 </Row>
100 </Row>
101 </Row>
101 </Row>
102 );
102 );
src/components/L2/InviteConverter.tsx+83−61
@@ -1,14 +1,15 @@
1import {
1import {
2 Checkbox,
2 Checkbox,
3 Col,
3 Col,
4− H3,
5 Row,
4 Row,
6 Button as IndigoButton,
5 Button as IndigoButton,
7 Text,
6 Text,
7+ Action,
8} from '@tlon/indigo-react';
8} from '@tlon/indigo-react';
9import { Button } from 'indigo-react';
9import { Button } from 'indigo-react';
10import Modal from './Modal';
10import Modal from './Modal';
11import { useCallback, useEffect, useState } from 'react';
11import { useCallback, useEffect, useState } from 'react';
12+import { ReactComponent as InviteIcon } from 'assets/invite.svg';
12import Point from 'lib/types/Point';
13import Point from 'lib/types/Point';
13import useRoller from 'lib/useRoller';
14import useRoller from 'lib/useRoller';
14import BodyPane from './Window/BodyPane';
15import BodyPane from './Window/BodyPane';
@@ -17,8 +18,8 @@ import {
17 useInvites,
18 useInvites,
18 useInviteStore,
19 useInviteStore,
19} from 'views/Invite/useInvites';
20} from 'views/Invite/useInvites';
20−import { GeneratingModal } from 'views/Invite/GeneratingModal';
21import { usePointCache } from 'store/pointCache';
21import { usePointCache } from 'store/pointCache';
22+import { CreatingInvitesModal } from './CreatingInvitesModal';
22
23
23interface StarMap {
24interface StarMap {
24 [key: string]: {
25 [key: string]: {
@@ -60,8 +61,11 @@ export const InviteConverter = ({ points }: InviteConverterProps) => {
60 const [generatingStatus, setGeneratingStatus] = useState<
61 const [generatingStatus, setGeneratingStatus] = useState<
61 InviteGeneratingStatus
62 InviteGeneratingStatus
62 >('initial');
63 >('initial');
64+ const [error, setError] = useState('');
65+ const [created, setCreated] = useState(0);
63 const [currentPoint, setCurrentPoint] = useState<Point>();
66 const [currentPoint, setCurrentPoint] = useState<Point>();
64 const currentJob = inviteJobs[currentPoint?.value || 0];
67 const currentJob = inviteJobs[currentPoint?.value || 0];
68+ const signatureCount = selected.length * 3;
65
69
66 useEffect(() => {
70 useEffect(() => {
67 if (!points) {
71 if (!points) {
@@ -70,11 +74,13 @@ export const InviteConverter = ({ points }: InviteConverterProps) => {
70
74
71 async function collect() {
75 async function collect() {
72 const pointMap: StarMap = {};
76 const pointMap: StarMap = {};
73− const stars = points.filter(point => point.isStar);
77+ const stars = points.filter(point => point.isStar && point.isL2Spawn);
74
78
75 for (const star of stars) {
79 for (const star of stars) {
76 const spawns = await api.getSpawned(star.value);
80 const spawns = await api.getSpawned(star.value);
77− const filteredPoints = points.filter(p => spawns.includes(p.value));
81+ const filteredPoints = points.filter(
82+ p => spawns.includes(p.value) && p.isL2Spawn
83+ );
78
84
79 if (filteredPoints.length !== 0) {
85 if (filteredPoints.length !== 0) {
80 pointMap[star.patp] = {
86 pointMap[star.patp] = {
@@ -126,56 +132,65 @@ export const InviteConverter = ({ points }: InviteConverterProps) => {
126
132
127 setGeneratingStatus('generating');
133 setGeneratingStatus('generating');
128
134
135+ try {
129− for (const { point, children } of Object.values(starMap)) {
136+ for (const { point, children } of Object.values(starMap)) {
130− debugger;
137+ debugger;
131− const filtered = children
138+ const filtered = children
132− .filter(p => selected.includes(p.patp))
139+ .filter(p => selected.includes(p.patp))
133− .map(p => p.value);
140+ .map(p => p.value);
134
141
135− if (filtered.length <= 0) {
142+ if (filtered.length <= 0) {
136− continue;
143+ continue;
144+ }
145+
146+ setCurrentPoint(point);
147+ await generateInviteCodes(point, filtered, false);
148+ await getAndUpdatePoint(point.value);
149+ setCreated(children.length);
137 }
150 }
138
151
139− setCurrentPoint(point);
152+ setGeneratingStatus('finished');
140− await generateInviteCodes(point, filtered, false);
153+ } catch (error) {
141− await getAndUpdatePoint(point.value);
154+ if (typeof error === 'object' && (error as Error)?.message) {
155+ setError((error as Error).message);
156+ } else if (typeof error === 'string') {
157+ setError(error);
158+ } else {
159+ setError('Creating invites failed');
160+ }
161+ setGeneratingStatus('errored');
142 }
162 }
143−
144− getPendingTransactions();
145− syncControlledPoints();
146− setGeneratingStatus('finished');
147 }, [
163 }, [
148 generatingStatus,
164 generatingStatus,
149 selected,
165 selected,
150 starMap,
166 starMap,
151 generateInviteCodes,
167 generateInviteCodes,
152 getAndUpdatePoint,
168 getAndUpdatePoint,
153− getPendingTransactions,
154− syncControlledPoints,
155 ]);
169 ]);
156
170
171+ const hasPlanets =
172+ Object.entries(starMap).reduce((sum, [, star]) => {
173+ return (sum += star.children.length);
174+ }, 0) > 0;
175+
176+ if (!hasPlanets) {
177+ return null;
178+ }
179+
157 if (generatingStatus !== 'initial') {
180 if (generatingStatus !== 'initial') {
158 return (
181 return (
159− <GeneratingModal
182+ <CreatingInvitesModal
160 status={generatingStatus}
183 status={generatingStatus}
161− current={currentJob?.generatingNum}
184+ current={created + currentJob?.generatingNum}
162− total={
163− generatingStatus === 'finished'
164− ? selected.length
165− : selected.filter(p => {
166− const children = starMap[currentPoint?.patp || '']?.children;
167− return children.map(c => c.patp).includes(p);
168− }).length
185+ total={selected.length}
169− }
186+ error={error}
170− fromStar={currentPoint?.patp}
171− spawn={false}
172 hide={() => {
187 hide={() => {
173 setGeneratingStatus('initial');
188 setGeneratingStatus('initial');
174 setSelected([]);
189 setSelected([]);
175 setShow(false);
190 setShow(false);
176− if (generatingStatus !== 'errored') {
191+ setCreated(0);
177− //pop();
192+ getPendingTransactions();
178− }
193+ syncControlledPoints();
179 }}
194 }}
180 />
195 />
181 );
196 );
@@ -185,51 +200,57 @@ export const InviteConverter = ({ points }: InviteConverterProps) => {
185 <>
200 <>
186 {/*
201 {/*
187 @ts-ignore */}
202 @ts-ignore */}
188− <Button solid center onClick={() => setShow(true)}>
203+ <Button className="create-invites" center onClick={() => setShow(true)}>
189− Convert to Invites
204+ Create Invites from Planets
190 </Button>
205 </Button>
191− <Modal show={show} hide={() => setShow(false)}>
206+ <Modal small show={show} hide={() => setShow(false)}>
192 <BodyPane p={0}>
207 <BodyPane p={0}>
193− <Col width="420px">
208+ <Col width="368px">
194− <H3 mb={2}>Convert Planet Spawns to Invites</H3>
209+ <Row alignItems="center" mb={3}>
210+ <InviteIcon />
211+ <Text bold ml={2}>
212+ Create Invites for Existing Planets
213+ </Text>
214+ </Row>
195− <Text>
215+ <Text mb={5}>
196− This allows you to convert a spawned planets into invites. After
216+ Select L2 planets you own to convert them back into invite links
197− this operation, invites will show up under the point they were
217+ under each star.{' '}
198− spawned from.
218+ <Text color="red" lineHeight="24px">
219+ Note: this will re-ticket the planets and render their existing
220+ keys invalid.
221+ </Text>
222+ </Text>
223+ <Text bold className={!!signatureCount ? '' : 'hidden'}>
224+ {signatureCount} manual signatures will be required.
199 </Text>
225 </Text>
200 <Col
226 <Col
201 bg="washedGray"
227 bg="washedGray"
202 height="300px"
228 height="300px"
203 mt={3}
229 mt={3}
204− p={2}
230+ p={3}
205 borderRadius={2}
231 borderRadius={2}
206 overflowY="auto">
232 overflowY="auto">
207 {Object.entries(starMap).map(([patp, { children }]) => (
233 {Object.entries(starMap).map(([patp, { children }]) => (
208 <Col mb={4}>
234 <Col mb={4}>
209 <Row>
235 <Row>
210− <Text mb={2} fontSize={2}>
236+ <Text bold mb={2}>
211− Spawned by{' '}
212− <Text bold fontSize={2}>
213− {patp}
237+ Owned by {patp}
214− </Text>
215 </Text>
238 </Text>
216− <IndigoButton
239+ <Action
217− height="18px"
240+ backgroundColor="transparent"
218− px={2}
219− fontSize={0}
220 ml="auto"
241 ml="auto"
221 onClick={() => selectChildren(children)}>
242 onClick={() => selectChildren(children)}>
222 {selectText(selected, children)}
243 {selectText(selected, children)}
223− </IndigoButton>
244+ </Action>
224 </Row>
245 </Row>
225− {children.map(point => (
246+ {children.map((point, index) => (
226 <Row
247 <Row
227 alignItems="center"
248 alignItems="center"
228 justifyContent="space-between"
249 justifyContent="space-between"
229− ml={3}
230− mb={2}
231 py={1}
250 py={1}
232− borderBottomWidth="1px"
251+ borderBottomWidth={
252+ index === children.length - 1 ? '0px' : '1px'
253+ }
233 borderBottomStyle="solid"
254 borderBottomStyle="solid"
234 borderBottomColor="washedGray">
255 borderBottomColor="washedGray">
235 <Text>{point.patp}</Text>
256 <Text>{point.patp}</Text>
@@ -241,8 +262,9 @@ export const InviteConverter = ({ points }: InviteConverterProps) => {
241 ))}
262 ))}
242 </Col>
263 </Col>
243 ))}
264 ))}
265+ {}
244 </Col>
266 </Col>
245− <Row mt={4} justifyContent="end">
267+ <Row mt={3} justifyContent="end">
246 <IndigoButton
268 <IndigoButton
247 className="secondary"
269 className="secondary"
248 onClick={() => setShow(false)}>
270 onClick={() => setShow(false)}>
@@ -255,7 +277,7 @@ export const InviteConverter = ({ points }: InviteConverterProps) => {
255 ml={2}
277 ml={2}
256 onClick={convert}
278 onClick={convert}
257 disabled={selected.length === 0}>
279 disabled={selected.length === 0}>
258− Convert
280+ Convert Selected
259 </IndigoButton>
281 </IndigoButton>
260 </Row>
282 </Row>
261 </Col>
283 </Col>
src/components/L2/Modal.scss+7−1
@@ -1,7 +1,7 @@
1@import 'style/shared/variables.scss';
1@import 'style/shared/variables.scss';
2
2
3.modal {
3.modal {
4− background-color: rgba(0,0,0,0.2);
4+ background-color: rgba(0, 0, 0, 0.2);
5 position: fixed;
5 position: fixed;
6 top: 0;
6 top: 0;
7 bottom: 0;
7 bottom: 0;
@@ -32,4 +32,10 @@
32 line-height: 24px;
32 line-height: 24px;
33 max-width: calc(100vw - 80px);
33 max-width: calc(100vw - 80px);
34 }
34 }
35+
36+ &.modal-small {
37+ .content {
38+ padding: 16px;
39+ }
40+ }
35}
41}
src/components/L2/Modal.tsx+3−1
@@ -7,6 +7,7 @@ export interface ModalProps {
7 show: boolean;
7 show: boolean;
8 hide: () => void;
8 hide: () => void;
9 hideClose?: boolean;
9 hideClose?: boolean;
10+ small?: boolean;
10 children: React.ReactNode;
11 children: React.ReactNode;
11}
12}
12
13
@@ -14,6 +15,7 @@ export default function Modal({
14 show,
15 show,
15 hide,
16 hide,
16 hideClose = false,
17 hideClose = false,
18+ small = false,
17 children,
19 children,
18}: ModalProps) {
20}: ModalProps) {
19 const dontHide = (e: MouseEvent) => {
21 const dontHide = (e: MouseEvent) => {
@@ -25,7 +27,7 @@ export default function Modal({
25 }
27 }
26
28
27 return (
29 return (
28− <Box className="modal" onClick={hide}>
30+ <Box className={`modal${small ? ' modal-small' : ''}`} onClick={hide}>
29 <Box className="content">
31 <Box className="content">
30 {!hideClose && (
32 {!hideClose && (
31 <Box className="close" onClick={hide}>
33 <Box className="close" onClick={hide}>
src/views/Invite/GeneratingModal.tsx+2−7
@@ -7,9 +7,7 @@ interface GeneratingModalProps {
7 status: InviteGeneratingStatus;
7 status: InviteGeneratingStatus;
8 current: number;
8 current: number;
9 total: number;
9 total: number;
10− fromStar?: string;
11 error?: string;
10 error?: string;
12− spawn?: boolean;
13 hide: () => void;
11 hide: () => void;
14}
12}
15
13
@@ -19,8 +17,6 @@ export const GeneratingModal = ({
19 total,
17 total,
20 hide,
18 hide,
21 error,
19 error,
22− fromStar,
23− spawn = true,
24}: GeneratingModalProps) => {
20}: GeneratingModalProps) => {
25 const successfulInvites = current > 1 ? current - 1 : 0;
21 const successfulInvites = current > 1 ? current - 1 : 0;
26 return (
22 return (
@@ -38,11 +34,10 @@ export const GeneratingModal = ({
38 Generating {current} of {total} Invites
34 Generating {current} of {total} Invites
39 </H3>
35 </H3>
40 </Row>
36 </Row>
41− {fromStar && <Text ml={4}>from {fromStar}</Text>}
42 </Col>
37 </Col>
43 <Text>
38 <Text>
44− Each invite will require {spawn ? 'four' : 'three'} transactions
39+ Each invite will require four transactions to be signed, unless
45− to be signed, unless your point is owned by a master ticket.
40+ your point is owned by a master ticket.
46 </Text>
41 </Text>
47 </>
42 </>
48 )}
43 )}