@@ -9,9 +9,8 @@ import { Just } from 'folktale/maybe';
99import { Grid, Button } from 'indigo-react';
1010import * as azimuth from 'azimuth-js';
1111import { randomHex } from 'web3-utils';
12−import { Box, Checkbox, Row } from '@tlon/indigo-react';
12+import { Box, Checkbox, Icon, Row } from '@tlon/indigo-react';
1313
14−import { usePointCursor } from 'store/pointCursor';
1514import { usePointCache } from 'store/pointCache';
1615import { useNetwork } from 'store/network';
1716import { useWallet } from 'store/wallet';
@@ -26,14 +25,13 @@ import {
2625 CRYPTO_SUITE_VERSION,
2726} from 'lib/keys';
2827import useEthereumTransaction from 'lib/useEthereumTransaction';
29−import { GAS_LIMITS } from 'lib/constants';
28+import { GAS_LIMITS, ONE_SECOND } from 'lib/constants';
3029import { addHexPrefix } from 'lib/utils/address';
3130import useMultikeyFileGenerator from 'lib/useMultikeyFileGenerator';
3231
3332import DownloadKeyfileButton from 'components/DownloadKeyfileButton';
3433import InlineEthereumTransaction from 'components/InlineEthereumTransaction';
3534import NoticeBox from 'components/NoticeBox';
36−import AlertBox from 'components/AlertBox';
3735
3836import { HexInput } from 'form/Inputs';
3937import {
@@ -43,7 +41,6 @@ import {
4341} from 'form/validators';
4442import BridgeForm from 'form/BridgeForm';
4543import FormError from 'form/FormError';
46−import { convertToInt } from 'lib/convertToInt';
4744import Window from 'components/L2/Window/Window';
4845import HeaderPane from 'components/L2/Window/HeaderPane';
4946import BodyPane from 'components/L2/Window/BodyPane';
@@ -56,19 +53,16 @@ function useSetKeys(
5653 setManualNetworkSeed: (seed: string) => void
5754) {
5855 const { urbitWallet, wallet, authMnemonic, authToken }: any = useWallet();
59− const { pointCursor }: any = usePointCursor();
60− const { syncDetails, syncRekeyDate, getDetails }: any = usePointCache();
56+ const { point } = useRollerStore();
57+ const { syncDetails, syncRekeyDate }: any = usePointCache();
6158 const { contracts }: any = useNetwork();
6259
63− const _point = need.point(pointCursor);
6460 const _contracts = need.contracts(contracts);
65− const _details = need.details(getDetails(_point));
6661
67− const networkRevision = convertToInt(_details.keyRevisionNumber, 10);
62+ const networkRevision = Number(point.keyRevisionNumber);
6863 const randomSeed = useRef<string | null>();
6964
7065 const {
71− available: keyfileAvailable,
7266 generating: keyfileGenerating,
7367 filename,
7468 bind: keyfileBind,
@@ -87,8 +81,8 @@ function useSetKeys(
8781 urbitWallet,
8882 wallet,
8983 authMnemonic,
90− details: _details,
91− point: _point,
84+ details: point,
85+ point: point.value,
9286 authToken,
9387 revision: newNetworkRevision,
9488 });
@@ -104,13 +98,12 @@ function useSetKeys(
10498 }
10599 },
106100 [
107− _details,
108101 authMnemonic,
109102 setManualNetworkSeed,
110103 networkRevision,
111104 urbitWallet,
112105 wallet,
113− _point,
106+ point,
114107 authToken,
115108 ]
116109 );
@@ -123,24 +116,24 @@ function useSetKeys(
123116
124117 return azimuth.ecliptic.configureKeys(
125118 _contracts,
126− _point,
119+ point.value,
127120 addHexPrefix(pair.crypt.public),
128121 addHexPrefix(pair.auth.public),
129122 CRYPTO_SUITE_VERSION,
130123 isDiscontinuity
131124 );
132125 },
133− [_contracts, _point, buildNetworkSeed]
126+ [_contracts, point, buildNetworkSeed]
134127 ),
135128 useCallback(
136− () => Promise.all([syncDetails(_point), syncRekeyDate(_point)]),
137− [_point, syncDetails, syncRekeyDate]
129+ () => Promise.all([syncDetails(point.value), syncRekeyDate(point.value)]),
130+ [point, syncDetails, syncRekeyDate]
138131 ),
139132 GAS_LIMITS.CONFIGURE_KEYS
140133 );
141134
142135 // only treat the transaction as completed once we also have keys to download
143− const completed = _completed && keyfileAvailable && !keyfileGenerating;
136+ const completed = _completed && !keyfileGenerating;
144137
145138 return {
146139 completed,
@@ -166,6 +159,7 @@ export default function UrbitOSNetworkKeys({
166159 } = useRoller();
167160 const [breach, setBreach] = useState(false);
168161 const [useCustomSeed, setUseCustomSeed] = useState(false);
162+ const [l2Completed, setL2Completed] = useState(false);
169163
170164 const hasKeys = point.networkKeysSet;
171165
@@ -191,6 +185,7 @@ export default function UrbitOSNetworkKeys({
191185 hash: txHashes[0],
192186 time: new Date().getTime(),
193187 },
188+ intervalTime: ONE_SECOND,
194189 });
195190 }
196191 }, [completed]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -259,8 +254,9 @@ export default function UrbitOSNetworkKeys({
259254 checkForUpdates({
260255 point: point.value,
261256 message: `${point.patp}'s Network Keys have been set!`,
257+ intervalTime: ONE_SECOND,
262258 });
263− pop();
259+ setTimeout(() => setL2Completed(true), ONE_SECOND);
264260 } catch (error) {
265261 // setError(error);
266262 } finally {
@@ -271,7 +267,6 @@ export default function UrbitOSNetworkKeys({
271267 manualNetworkSeed,
272268 getPendingTransactions,
273269 point,
274− pop,
275270 configureNetworkKeys,
276271 setLoading,
277272 checkForUpdates,
@@ -279,10 +274,18 @@ export default function UrbitOSNetworkKeys({
279274
280275 const initialValues = useMemo(() => ({}), []);
281276
282− const viewTitle = completed ? 'Network Keys are now set' : 'Set Network Keys';
277+ const viewTitle = completed
278+ ? 'Network Keys have been set'
279+ : hasKeys
280+ ? 'Set Network Keys'
281+ : 'Initiate Network Keys';
283282
284283 const usageMessage =
285− 'You need this keyfile to authenticate with your OS. Please Download.';
284+ 'With your new network keys, you also have a new keyfile. Download your new keyfile to boot your OS.';
285+
286+ const buttonText = `${hasKeys ? 'Reset' : 'Set'} Network Keys`;
287+
288+ const isComplete = completed || l2Completed;
286289
287290 return (
288291 <Window className="network-keys">
@@ -290,98 +293,114 @@ export default function UrbitOSNetworkKeys({
290293 <h5>{viewTitle}</h5>
291294 </HeaderPane>
292295 <BodyPane>
293− {completed && (
294− <>
295− <Grid.Item
296− full
297− className="mb3"
298− as={DownloadKeyfileButton}
299− solid
300− left
301− {...keyfileBind}
302− />
303− <Grid.Item full as={AlertBox} className="mb8">
304− {usageMessage}
305− </Grid.Item>
306− </>
296+ {isComplete && (
297+ <Box className="flex-col col justify-between h-full">
298+ <Box className="flex-col download-message">
299+ <Icon icon="Download" className="download" />
300+ <Box>{usageMessage}</Box>
301+ </Box>
302+ {point.isL2 ? (
303+ <Grid.Item
304+ full
305+ as={Button}
306+ solid
307+ center
308+ onClick={keyfileBind.download}>
309+ Download Keyfile
310+ </Grid.Item>
311+ ) : (
312+ <Grid.Item
313+ full
314+ as={DownloadKeyfileButton}
315+ solid
316+ center
317+ {...keyfileBind}
318+ />
319+ )}
320+ </Box>
307321 )}
308− <BridgeForm
309− validate={validate}
310− onValues={onValues}
311− initialValues={initialValues}>
312− {() => (
313− <Box className="contents">
314− {!completed && (
315− <Box>
316− <Row className="check-row" onClick={() => setBreach(!breach)}>
317− <Checkbox
318− className="checkbox"
319− selected={breach}
320− disabled={inputsLocked}
321− />
322− Factory Reset
323− </Row>
324− <Box className="info-text">
325− Use if your ship is corrupted, you lost your files, or
326− <br />
327− you want to erase your data
328− </Box>
329− <Row
330− className="check-row"
331− onClick={() => setUseCustomSeed(!useCustomSeed)}>
332− <Checkbox
333− className="checkbox"
334− selected={useCustomSeed}
335− disabled={inputsLocked}
336− />
337− Custom Network Seed
338− </Row>
339− <Box className="info-text">
340− Enter your own custom network seed to derive from
341− </Box>
342− {useCustomSeed && (
343− <>
344− <Grid.Item full as={NoticeBox} className="mb2">
345− When using a custom network seed, you'll need to
346− download your Arvo keyfile immediately after this
347− transaction as Bridge does not store your seed.
348− </Grid.Item>
349− <Grid.Item
350− full
351− as={HexInput}
352− name="networkSeed"
353− label="Network Seed (32 bytes)"
322+
323+ {!isComplete && (
324+ <BridgeForm
325+ validate={validate}
326+ onValues={onValues}
327+ initialValues={initialValues}>
328+ {() => (
329+ <Box className="contents">
330+ {!isComplete && (
331+ <Box>
332+ <Row
333+ className="check-row"
334+ onClick={() => setBreach(!breach)}>
335+ <Checkbox
336+ className="checkbox"
337+ selected={breach}
354338 disabled={inputsLocked}
355− className="mb5"
356339 />
357− </>
358− )}
359− <Grid.Item full as={FormError} />
360− </Box>
361− )}
362−
363− {point.isL2 ? (
364− <Grid.Item
365− as={Button}
366− full
367− className=""
368− center
369− solid
370− onClick={setNetworkKeys}>
371− {'Reset Network Keys'}
372− </Grid.Item>
373− ) : (
374− <Grid.Item
375− full
376− as={InlineEthereumTransaction}
377− {...bind}
378− label={`${hasKeys ? 'Reset' : 'Set'} Network Keys`}
379− onReturn={() => pop()}
380− />
381− )}
382− </Box>
383− )}
384− </BridgeForm>
340+ Factory Reset
341+ </Row>
342+ <Box className="info-text">
343+ Use if your ship is corrupted, you lost your files, or
344+ <br />
345+ you want to erase your data
346+ </Box>
347+ <Row
348+ className="check-row"
349+ onClick={() => setUseCustomSeed(!useCustomSeed)}>
350+ <Checkbox
351+ className="checkbox"
352+ selected={useCustomSeed}
353+ disabled={inputsLocked}
354+ />
355+ Custom Network Seed
356+ </Row>
357+ <Box className="info-text">
358+ Enter your own custom network seed to derive from
359+ </Box>
360+ {useCustomSeed && (
361+ <>
362+ <Grid.Item full as={NoticeBox} className="mb2">
363+ When using a custom network seed, you'll need to
364+ download your Arvo keyfile immediately after this
365+ transaction as Bridge does not store your seed.
366+ </Grid.Item>
367+ <Grid.Item
368+ full
369+ as={HexInput}
370+ name="networkSeed"
371+ label="Network Seed (32 bytes)"
372+ disabled={inputsLocked}
373+ className="mb5"
374+ />
375+ </>
376+ )}
377+ <Grid.Item full as={FormError} />
378+ </Box>
379+ )}
380+
381+ {point.isL2 ? (
382+ <Grid.Item
383+ as={Button}
384+ full
385+ className=""
386+ center
387+ solid
388+ onClick={setNetworkKeys}>
389+ {buttonText}
390+ </Grid.Item>
391+ ) : (
392+ <Grid.Item
393+ full
394+ as={InlineEthereumTransaction}
395+ {...bind}
396+ label={buttonText}
397+ onReturn={() => pop()}
398+ />
399+ )}
400+ </Box>
401+ )}
402+ </BridgeForm>
403+ )}
385404 </BodyPane>
386405 </Window>
387406 );