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