@@ -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+}