git.iko.soy/bridge
on master help sign in
ux: keyfile button gives helpful feedback
fe8db0atomholford
src/components/L2/Window/HeaderPane.scss+5
compare with master
unifiedsplit
@@ -33,6 +33,11 @@
33 padding: 8px 16px;
33 padding: 8px 16px;
34 font-family: $default-font;
34 font-family: $default-font;
35
35
36+ &.keyfile-unavailable {
37+ height: unset;
38+ background-color: rgba(0, 0, 0, 0.6);
39+ }
40+
36 &:hover {
41 &:hover {
37 opacity: 0.8;
42 opacity: 0.8;
38 }
43 }
src/views/UrbitOS/Home.tsx+29−10
@@ -16,6 +16,7 @@ import CopiableWithTooltip from 'components/copiable/CopiableWithTooltip';
16import './UrbitOS.scss';
16import './UrbitOS.scss';
17import Modal from 'components/L2/Modal';
17import Modal from 'components/L2/Modal';
18import { useRollerStore } from 'store/rollerStore';
18import { useRollerStore } from 'store/rollerStore';
19+import WithTooltip from 'components/WithTooltip';
19
20
20export default function UrbitOSHome() {
21export default function UrbitOSHome() {
21 const { point } = useRollerStore();
22 const { point } = useRollerStore();
@@ -42,22 +43,40 @@ export default function UrbitOSHome() {
42 names,
43 names,
43 ]);
44 ]);
44
45
45− const { code, download } = useSingleKeyfileGenerator({});
46+ const { available, code, download, generating } = useSingleKeyfileGenerator(
47+ {}
48+ );
49+ const keyfileAvailable = available && !generating;
50+
51+ const headerButton = () => {
52+ if (!hasSetNetworkKeys) {
53+ return null;
54+ }
55+
56+ if (generating) {
57+ return <Box className="header-button keyfile">Generating...</Box>;
58+ }
59+
60+ return keyfileAvailable ? (
61+ <Button className="header-button keyfile" onClick={download}>
62+ <KeyfileIcon />
63+ Download Keyfile
64+ </Button>
65+ ) : (
66+ <WithTooltip content="Either the key was derived non-deterministically, or try Login > Use Legacy Compatibility">
67+ <Box className="header-button keyfile-unavailable">
68+ Keyfile Unavailable
69+ </Box>
70+ </WithTooltip>
71+ );
72+ };
46
73
47 return (
74 return (
48 <Window className="os-home">
75 <Window className="os-home">
49 <HeaderPane>
76 <HeaderPane>
50 <Row className="header-row">
77 <Row className="header-row">
51 <h5>OS</h5>
78 <h5>OS</h5>
52− {hasSetNetworkKeys && (
79+ {headerButton()}
53− <Button
54− className="header-button keyfile"
55− disabled={!hasSetNetworkKeys}
56− onClick={download}>
57− <KeyfileIcon />
58− Download Keyfile
59− </Button>
60− )}
61 </Row>
80 </Row>
62 </HeaderPane>
81 </HeaderPane>
63 <BodyPane>
82 <BodyPane>