git.iko.soy/bridge
on master help sign in
add viewing of network keys
bc74a1eLiam Fitzgerald
src/components/NetworkingKeys.jsnew file+113
compare with master
unifiedsplit
@@ -0,0 +1,113 @@
1+import React from 'react';
2+import { Grid, Flex, H5, Text } from 'indigo-react';
3+import { Just, Nothing } from 'folktale/maybe';
4+
5+import { formatDotsWithTime } from 'lib/dateFormat';
6+import { segmentNetworkKey, CURVE_ZERO_ADDR } from 'lib/keys';
7+
8+import { usePointCache } from 'store/pointCache';
9+
10+const chainKeyProp = name => d =>
11+ d[name] === CURVE_ZERO_ADDR ? Nothing() : Just(d[name]);
12+
13+const renderNetworkKey = key => {
14+ const segments = segmentNetworkKey(key);
15+
16+ if (!segments) {
17+ return 'Unset';
18+ }
19+
20+ return segments.join('\n');
21+};
22+
23+export default function NetworkingKeys({ point }) {
24+ const { getDetails, getRekeyDate } = usePointCache();
25+
26+ const details = getDetails(point);
27+
28+ const hasKeys = details.matchWith({
29+ Nothing: () => false,
30+ Just: ({ value: details }) => parseInt(details.keyRevisionNumber, 10) > 0,
31+ // we actually don't mind the default NaN behavior of parseInt here,
32+ // since NaN > 0 === false and that's a reasonable result
33+ });
34+
35+ const renderTitle = () => {
36+ return 'Networking';
37+ };
38+
39+ const renderNetworkKeySection = (title, key) => (
40+ <>
41+ <Grid.Item full as={H5} className="mt3 gray4">
42+ {title}
43+ </Grid.Item>
44+ {key.matchWith({
45+ Nothing: () => (
46+ <Grid.Item full as="code" className="f5 mono gray4">
47+ Unset
48+ </Grid.Item>
49+ ),
50+ Just: ({ value: key }) => (
51+ <>
52+ <Grid.Item full as="code" className="f5 mono wrap">
53+ 0x
54+ </Grid.Item>
55+ <Grid.Item full as="code" className="f5 mono wrap">
56+ {renderNetworkKey(key)}
57+ </Grid.Item>
58+ </>
59+ ),
60+ })}
61+ </>
62+ );
63+
64+ const renderDetail = (title, value) => (
65+ <Flex.Item as={Flex} col>
66+ <Flex.Item as={H5} className="gray4">
67+ {title}
68+ </Flex.Item>
69+ {value.matchWith({
70+ Nothing: () => (
71+ <Flex.Item as={Text} className="f5 gray4">
72+ Unset
73+ </Flex.Item>
74+ ),
75+ Just: ({ value }) => <Flex.Item as={Text}>{value}</Flex.Item>,
76+ })}
77+ </Flex.Item>
78+ );
79+
80+ return (
81+ <>
82+ {renderNetworkKeySection(
83+ 'Authentication',
84+ details.chain(chainKeyProp('authenticationKey'))
85+ )}
86+ {renderNetworkKeySection(
87+ 'Encryption',
88+ details.chain(chainKeyProp('encryptionKey'))
89+ )}
90+ <Grid.Item full as={Flex} row justify="between" className="mt3">
91+ {renderDetail('Revision', details.map(d => d.keyRevisionNumber))}
92+ {renderDetail('Continuity Era', details.map(d => d.continuityNumber))}
93+ {renderDetail(
94+ 'Crypto Suite Ver.',
95+ details.map(d => d.cryptoSuiteVersion)
96+ )}
97+ </Grid.Item>
98+ {hasKeys && (
99+ <Grid.Item full as={Flex} row justify="between" className="mt3">
100+ {renderDetail(
101+ 'Last Set',
102+ getRekeyDate(point).map(date =>
103+ date.matchWith({
104+ Ok: r => formatDotsWithTime(r.value),
105+ Error: () => Nothing(),
106+ })
107+ )
108+ )}
109+ </Grid.Item>
110+ )}
111+ </>
112+ );
113+}
src/views/UrbitOS/Home.js+15−7
@@ -1,5 +1,5 @@
1−import React, { useCallback } from 'react';
1+import React, { useCallback, useState } from 'react';
2−import { Grid, Button, SelectInput } from 'indigo-react';
2+import { Grid, Button, SelectInput, Flex, H5, Text } from 'indigo-react';
3import * as ob from 'urbit-ob';
3import * as ob from 'urbit-ob';
4
4
5import { usePointCursor } from 'store/pointCursor';
5import { usePointCursor } from 'store/pointCursor';
@@ -9,6 +9,7 @@ import useCurrentPointName from 'lib/useCurrentPointName';
9import * as need from 'lib/need';
9import * as need from 'lib/need';
10
10
11import { OutButton, ForwardButton } from 'components/Buttons';
11import { OutButton, ForwardButton } from 'components/Buttons';
12+import NetworkingKeys from 'components/NetworkingKeys';
12
13
13import BridgeForm from 'form/BridgeForm';
14import BridgeForm from 'form/BridgeForm';
14import { useLocalRouter } from 'lib/LocalRouter';
15import { useLocalRouter } from 'lib/LocalRouter';
@@ -24,6 +25,12 @@ export default function UrbitOSHome() {
24
25
25 const sponsor = ob.patp(details.sponsor);
26 const sponsor = ob.patp(details.sponsor);
26
27
28+ const [showKeys, setShowKeys] = useState(false);
29+ const toggleShowKeys = useCallback(() => setShowKeys(!showKeys), [
30+ setShowKeys,
31+ showKeys,
32+ ]);
33+
27 const goNetworkingKeys = useCallback(() => push(names.NETWORKING_KEYS), [
34 const goNetworkingKeys = useCallback(() => push(names.NETWORKING_KEYS), [
28 names,
35 names,
29 push,
36 push,
@@ -55,13 +62,14 @@ export default function UrbitOSHome() {
55 Reset Networking Keys
62 Reset Networking Keys
56 </Grid.Item>
63 </Grid.Item>
57 <Grid.Divider />
64 <Grid.Divider />
65+ <Grid.Item
66+ full
58− <Grid.Item full as={ForwardButton}>
67+ as={ForwardButton}
59− Unset
68+ accessory={showKeys ? '▲' : '▼'}
60− </Grid.Item>
69+ onClick={toggleShowKeys}>
61− <Grid.Divider />
62− <Grid.Item full as={ForwardButton}>
63 View Networking Keys
70 View Networking Keys
64 </Grid.Item>
71 </Grid.Item>
72+ {showKeys && <Grid.Item full as={NetworkingKeys} point={point} />}
65 </Grid>
73 </Grid>
66 </>
74 </>
67 );
75 );