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