git.iko.soy/bridge
on master help sign in
bridge/src/views/Ops/Ops.tsx
126 lines 3.9 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
71 className={
72 'between-row management' + (point.canManage ? '' : ' disabled')
73 }>
74 <Box>
75 <Box className="section-title">Residents</Box>
76 <Box className="subtitle">
77 {isGalaxy(_point) ? 'Stars' : 'Planets'} that you route packets
78 for
79 </Box>
80 </Box>
81 <Button
82 className="secondary"
83 onClick={point.canManage ? goResidents : undefined}>
84 View
85 </Button>
86 </Row>
87 <Row
88 className={
89 'between-row management' + (point.canManage ? '' : ' disabled')
90 }>
91 <Box>
92 <Box className="section-title">Requests</Box>
93 <Box className="subtitle">
94 {isGalaxy(_point) ? 'Stars' : 'Planets'} requesting your
95 sponsorship
96 </Box>
97 </Box>
98 <Button
99 className="secondary"
100 onClick={point.canManage ? goRequests : undefined}>
101 View
102 </Button>
103 </Row>
104 {point.isGalaxy && (
105 <Row
106 className={
107 'between-row management' + (point.canVote ? '' : ' disabled')
108 }>
109 <Box>
110 <Box className="section-title">Proposals</Box>
111 <Box className="subtitle">
112 View or vote on proposals in the Senate
113 </Box>
114 </Box>
115 <Button
116 className="secondary"
117 onClick={point.canVote ? goSenate : undefined}>
118 View
119 </Button>
120 </Row>
121 )}
122 </BodyPane>
123 </Window>
124 </View>
125 );
126};