2b07680 · bridge · git.iko.soy

git.iko.soy/bridge

netKeys: add dismissed checkbox to modal

commit2b07680c03172dfb5db4692d50666fd4199ba46a authoryosoyubik <yosoyubik@gmail.com> dateMon 27 Sep 2021, 11:30 (5 years ago) parent3fc5a9c

3 files changed+60−9

compare with master

unifiedsplit

src/lib/useSeenMissingKeys.js+7 src/views/Point/Point.scss+30−1 src/views/Point/Point.tsx+23−8

src/lib/useSeenMissingKeys.jsnew file+7

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

4545 align-items: center;

4646

4747 .date {

48−

48+

4949 }

5050 }

5151}

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

7676 width: 340px;

7777 }

7878

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+

79106 .buttons {

80107 display: flex;

81108 flex-direction: row;

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

93120 }

94121 }

95122

123+

124+

96125 .cancel {

97126 margin-right: 8px;

98127 background-color: $washed-gray;

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

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

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

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

44import { 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';

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

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

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

2222import useCurrentPermissions from 'lib/useCurrentPermissions';

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

2424import useRoller from 'lib/useRoller';

25+import useSeenMissingKeys from 'lib/useSeenMissingKeys';

2526

2627import './Point.scss';

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

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

4950 } = useRollerStore();

5051 const networkKeysSet = useHasNetworkKeysSet();

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

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

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

5255

5356 useEffect(() => {

5457 setShowModal(!networkKeysSet);

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

109112

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

111114

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]);

113120

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

115122

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

248255 )}

249256 {senateButton}

250257 </Grid>

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

258+ <Modal

259+ show={showModal && !seenMissingKeys}

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

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

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

254263 ×

255264 </Box>

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

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

257266 <Box className="message">

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

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

260− Settings.

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

261268 </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>

262277 <Row className="buttons">

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

264279 Cancel

265280 </Button>

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

267− Set Keys

282+ Set Network Keys

268283 </Button>

269284 </Row>

270285 </Box>