git.iko.soy/bridge
on 2879d31 help sign in
bridge/src/views/Invite/GeneratingModal.tsx
93 lines 2.7 kB history raw
1import { Col, H3, LoadingSpinner, Row, Text } from '@tlon/indigo-react';
2import Modal from 'components/L2/Modal';
3import { Button } from 'indigo-react';
4import { InviteGeneratingStatus } from './useInvites';
6interface GeneratingModalProps {
7 status: InviteGeneratingStatus;
8 current: number;
9 total: number;
10 fromStar?: string;
11 error?: string;
12 spawn?: boolean;
13 hide: () => void;
16export const GeneratingModal = ({
17 status,
18 current,
19 total,
20 hide,
21 error,
22 fromStar,
23 spawn = true,
24}: GeneratingModalProps) => {
25 const successfulInvites = current > 1 ? current - 1 : 0;
26 return (
27 <Modal
28 show={status !== 'initial'}
29 hide={hide}
30 hideClose={status !== 'finished'}>
31 <Col width="350px">
32 {status === 'generating' && (
33 <>
34 <Col mb={3}>
35 <Row alignItems="center">
36 <LoadingSpinner dark />
37 <H3 marginLeft={2}>
38 Generating {current} of {total} Invites
39 </H3>
40 </Row>
41 {fromStar && <Text ml={4}>from {fromStar}</Text>}
42 </Col>
43 <Text>
44 Each invite will require {spawn ? 'four' : 'three'} transactions
45 to be signed, unless your point is owned by a master ticket.
46 </Text>
47 </>
48 )}
49 {status === 'finished' && (
50 <>
51 <H3 marginBottom={2}>
52 <span className="ph1 number-emphasis">{total}</span> Invites
53 Generated
54 </H3>
55 <Text marginBottom={4}>
56 Your invites have been sent to the roller for confirmation in the
57 next batch. Check the point's page to see its status.
58 </Text>
59 {/*
60 // @ts-ignore */}
61 <Button solid onClick={hide}>
62 Check Status
63 </Button>
64 </>
65 )}
66 {status === 'errored' && (
67 <>
68 <H3 marginBottom={2}>
69 There was an error while generating your invites:
70 </H3>
71 {error && (
72 <Text color="red" mono marginBottom={3}>
73 {error}
74 </Text>
75 )}
76 {!!successfulInvites && (
77 <Text marginY={3}>
78 At least {successfulInvites} invite
79 {successfulInvites > 1 ? 's' : ''} were successfully generated.
80 Go back to see them or try again.
81 </Text>
82 )}
83 {/*
84 // @ts-ignore */}
85 <Button solid onClick={hide}>
86 Back
87 </Button>
88 </>
89 )}
90 </Col>
91 </Modal>
92 );
93};