git.iko.soy/bridge
on 703ff86 help sign in
bridge/src/components/NetworkKeys.jsx
98 lines 2.5 kB history raw
1import React from 'react';
2import { Grid, Flex, H5 } from 'indigo-react';
4import { formatDotsWithTime } from 'lib/dateFormat';
5import { segmentNetworkKey } from 'lib/keys';
7import { usePointCache } from 'store/pointCache';
8import { useRollerStore } from 'store/rollerStore';
10const renderNetworkKey = key => {
11 const segments = segmentNetworkKey(key);
13 if (!segments) {
14 return 'Not set';
15 }
17 return segments.join('\n');
18};
20export default function NetworkKeys() {
21 const { getRekeyDate } = usePointCache();
22 const { point } = useRollerStore();
24 const {
25 networkKeysSet,
26 keyRevisionNumber,
27 continuityNumber,
28 cryptoSuiteVersion,
29 authenticationKey,
30 encryptionKey,
31 } = point;
33 const renderNetworkKeySection = (title, key) => (
34 <>
35 <Grid.Item full as={H5} className="mt3 gray4">
36 {title}
37 </Grid.Item>
38 {key ? (
39 <>
40 <Grid.Item full as="div" className="f5 mono">
41 0x
42 </Grid.Item>
43 <Grid.Item full as="code" className="f5 mono wrap">
44 {renderNetworkKey(key)}
45 </Grid.Item>
46 </>
47 ) : (
48 <Grid.Item full as="code" className="f5 mono gray4">
49 Not set
50 </Grid.Item>
51 )}
52 </>
53 );
55 const renderDetail = (title, value) => (
56 <Flex.Item as={Flex} row>
57 <Flex.Item style={{ minWidth: 192, marginBottom: 8 }} as={H5}>
58 {title}
59 </Flex.Item>
60 {value === 'Not set' ? (
61 <Flex.Item as={H5} className="f5 gray4">
62 Not set
63 </Flex.Item>
64 ) : (
65 <Flex.Item as={H5}>{value}</Flex.Item>
66 )}
67 </Flex.Item>
68 );
70 const revisionTime = networkKeysSet
71 ? ` at ${getRekeyDate(point.value)
72 .map(date =>
73 date.matchWith({
74 Ok: r => formatDotsWithTime(r.value),
75 Error: () => 'No date available',
76 })
77 )
78 .matchWith({
79 Nothing: () => null,
80 Just: ({ value }) => value,
81 })}`
82 : '';
84 return (
85 <>
86 <h5 className="fw-bold">Network Keys</h5>
87 <h5 className="gray4">
88 Revision {keyRevisionNumber} {revisionTime}
89 </h5>
90 {renderNetworkKeySection('Authentication Key', authenticationKey)}
91 {renderNetworkKeySection('Encryption Key', encryptionKey)}
92 <Grid.Item full as={Flex} col justify="between" className="mt3">
93 {renderDetail('Continuity Era', continuityNumber)}
94 {renderDetail('Crypto Suite Version', cryptoSuiteVersion)}
95 </Grid.Item>
96 </>
97 );