2b07680 · bridge · git.iko.soy

git.iko.soy/bridge

on master help sign in

netKeys: add dismissed checkbox to modal

2b07680yosoyubik5 years ago

src/lib/useSeenMissingKeys.jsnew file+7

compare with master

unifiedsplit

@@ -0,0 +1,7 @@

1+import useLocalStorageState from './useLocalStorageState';

3+const NETWORKING_KEYS = 'bridge:networking-keys';

5+export default function useSeenMissingKeys() {

6+ return useLocalStorageState(NETWORKING_KEYS, false);

7+}

src/views/Point/Point.scss+30−1

@@ -45,7 +45,7 @@

45 align-items: center;

47 .date {

48−

48+

49 }

50 }

51}

@@ -76,6 +76,33 @@

76 width: 340px;

77 }

79+ .hide-row {

80+ display: flex;

81+ flex-direction: row;

82+ align-items: center;

83+ margin-top: 31px;

84+

85+ .checkbox {

86+ height: 16px;

87+ width: 16px;

88+

89+ svg {

90+ width: 16px;

91+ height: 16px;

92+ color: white;

93+ }

94+ }

95+

96+ .dont-show {

97+ margin-left: 8px;

98+ font-weight: 400;

99+ font-size: 12px;

100+ line-height: 16px;

101+

102+ }

103+ }

104+

105+

79 .buttons {

106 .buttons {

80 display: flex;

107 display: flex;

81 flex-direction: row;

108 flex-direction: row;

@@ -93,6 +120,8 @@

93 }

120 }

94 }

121 }

122

123+

124+

96 .cancel {

125 .cancel {

97 margin-right: 8px;

126 margin-right: 8px;

98 background-color: $washed-gray;

127 background-color: $washed-gray;

src/views/Point/Point.tsx+23−8

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';

2import { azimuth } from 'azimuth-js';

3import { Just } from 'folktale/maybe';

4import { Grid, Flex } from 'indigo-react';

5−import { Box, Icon, Row, Button } from '@tlon/indigo-react';

5+import { Box, Icon, Row, Button, Checkbox } from '@tlon/indigo-react';

7import { usePointCursor } from 'store/pointCursor';

8import { useWallet } from 'store/wallet';

@@ -22,6 +22,7 @@ import useInvites from 'lib/useInvites';

22import useCurrentPermissions from 'lib/useCurrentPermissions';

23import { useLocalRouter } from 'lib/LocalRouter';

24import useRoller from 'lib/useRoller';

25+import useSeenMissingKeys from 'lib/useSeenMissingKeys';

26import './Point.scss';

27import './Point.scss';

27import { isL2 } from 'lib/utils/roller';

28import { isL2 } from 'lib/utils/roller';

@@ -49,6 +50,8 @@ export default function Point() {

49 } = useRollerStore();

50 } = useRollerStore();

50 const networkKeysSet = useHasNetworkKeysSet();

51 const networkKeysSet = useHasNetworkKeysSet();

51 const [showModal, setShowModal] = useState(false);

52 const [showModal, setShowModal] = useState(false);

53+ const [seenMissingKeys, setSeeingMissingKeys] = useSeenMissingKeys();

54+ const [hideMessage, setHideMessage] = useState(false);

53 useEffect(() => {

56 useEffect(() => {

54 setShowModal(!networkKeysSet);

57 setShowModal(!networkKeysSet);

@@ -109,7 +112,11 @@ export default function Point() {

109

112

110 const goCohort = useCallback(() => push(names.INVITE_COHORT), [push, names]);

113 const goCohort = useCallback(() => push(names.INVITE_COHORT), [push, names]);

111

114

112− const goUrbitOS = useCallback(() => push(names.URBIT_OS), [push, names]);

115+ const goUrbitOS = useCallback(() => {

116+ if (hideMessage) setSeeingMissingKeys(hideMessage);

117+

118+ push(names.URBIT_OS);

119+ }, [push, names, hideMessage, setSeeingMissingKeys]);

113

120

114 const goUrbitID = useCallback(() => push(names.URBIT_ID), [push, names]);

121 const goUrbitID = useCallback(() => push(names.URBIT_ID), [push, names]);

115

122

@@ -248,23 +255,31 @@ export default function Point() {

248 )}

255 )}

249 {senateButton}

256 {senateButton}

250 </Grid>

257 </Grid>

258+ <Modal

259+ show={showModal && !seenMissingKeys}

251− <Modal show={showModal} hide={() => setShowModal(false)}>

260+ hide={() => setShowModal(false)}>

252 <Box className="network-keys-modal">

261 <Box className="network-keys-modal">

253 <Box className="close" onClick={() => setShowModal(false)}>

262 <Box className="close" onClick={() => setShowModal(false)}>

254 ×

263 ×

255 </Box>

264 </Box>

256− <Box className="title">Network Keys Not Set</Box>

265+ <Box className="title">No Network Keys Found</Box>

257 <Box className="message">

266 <Box className="message">

258− This point's network keys are not set. The network keys must be set

267+ Network Keys are required to generate a Keyfile and use Landscape.

259− to spawn points or migrate to Layer 2. Please set them in Urbit OS

260− Settings.

261 </Box>

268 </Box>

269+ <Row className="hide-row">

270+ <Checkbox

271+ className="checkbox"

272+ selected={hideMessage}

273+ onClick={() => setHideMessage(!hideMessage)}

274+ />

275+ <Box className="dont-show">Do not warn me again</Box>

276+ </Row>

262 <Row className="buttons">

277 <Row className="buttons">

263 <Button className="cancel" onClick={() => setShowModal(false)}>

278 <Button className="cancel" onClick={() => setShowModal(false)}>

264 Cancel

279 Cancel

265 </Button>

280 </Button>

266 <Button className="migrate" onClick={goUrbitOS}>

281 <Button className="migrate" onClick={goUrbitOS}>

267− Set Keys

282+ Set Network Keys

268 </Button>

283 </Button>

269 </Row>

284 </Row>

270 </Box>

285 </Box>