git.iko.soy/bridge
on df0c310 help sign in
bridge/src/views/Ops/Ops.tsx
111 lines 3.5 kB history raw
1import { useCallback } from 'react';
2import * as need from 'lib/need';
3import { Box, Row, Button, Icon } from '@tlon/indigo-react';
5import { useRollerStore } from 'store/rollerStore';
6import { usePointCursor } from 'store/pointCursor';
8import { useLocalRouter } from 'lib/LocalRouter';
9import { isGalaxy } from 'lib/utils/point';
11import Window from 'components/L2/Window/Window';
12import HeaderPane from 'components/L2/Window/HeaderPane';
13import BodyPane from 'components/L2/Window/BodyPane';
14import View from 'components/View';
15import L2BackHeader from 'components/L2/Headers/L2BackHeader';
17import './Ops.scss';
19export const Ops = () => {
20 const { pop, push, popAndPush, names }: any = useLocalRouter();
21 const { pointCursor }: any = usePointCursor();
22 const { point } = useRollerStore();
23 const _point = need.point(pointCursor);
25 const goSenate = useCallback(() => push(names.SENATE), [push, names]);
26 const goResidents = useCallback(() => push(names.RESIDENTS), [push, names]);
27 const goRequests = useCallback(() => push(names.REQUESTS), [push, names]);
28 const goIssuePoint = useCallback(() => push(names.ISSUE_CHILD), [
29 names.ISSUE_CHILD,
30 push,
31 ]);
32 const goUrbitOS = useCallback(() => popAndPush(names.URBIT_OS), [
33 names.URBIT_OS,
34 popAndPush,
35 ]);
37 const getButtonContent = () => {
38 if (!point.couldSpawn) {
39 return null;
40 } else if (point.networkKeysSet) {
41 return (
42 <Button onClick={goIssuePoint} className="header-button">
43 <Icon icon="Node" /> &nbsp;Spawn&nbsp;
44 {isGalaxy(_point) ? 'Stars' : 'Planets'}
45 </Button>
46 );
47 }
48 return (
49 <Button onClick={goUrbitOS} className="header-button">
50 Set Network Keys
51 </Button>
52 );
53 };
55 return (
56 <View
57 pop={pop}
58 inset
59 hideBack
60 className="ops"
61 header={<L2BackHeader hideBalance back={pop} />}>
62 <Window className="id-ops">
63 <HeaderPane>
64 <Row className="header-row">
65 <h5>{isGalaxy(_point) ? 'Galaxy' : 'Star'} Ops</h5>
66 {getButtonContent()}
67 </Row>
68 </HeaderPane>
69 <BodyPane>
70 <Row className="between-row management">
71 <Box>
72 <Box className="section-title">Residents</Box>
73 <Box className="subtitle">
74 {isGalaxy(_point) ? 'Stars' : 'Planets'} that you route packets
75 for
76 </Box>
77 </Box>
78 <Button className="secondary" onClick={goResidents}>
79 View
80 </Button>
81 </Row>
82 <Row className="between-row management">
83 <Box>
84 <Box className="section-title">Requests</Box>
85 <Box className="subtitle">
86 {isGalaxy(_point) ? 'Stars' : 'Planets'} requesting your
87 sponsorship
88 </Box>
89 </Box>
90 <Button className="secondary" onClick={goRequests}>
91 View
92 </Button>
93 </Row>
94 {point.isGalaxy && (
95 <Row className="between-row management">
96 <Box>
97 <Box className="section-title">Proposals</Box>
98 <Box className="subtitle">
99 View or vote on proposals in the Senate
100 </Box>
101 </Box>
102 <Button className="secondary" onClick={goSenate}>
103 View
104 </Button>
105 </Row>
106 )}
107 </BodyPane>
108 </Window>
109 </View>
110 );
111};