@@ -6,9 +6,10 @@ import React, {
66 useState,
77} from 'react';
88import { Just } from 'folktale/maybe';
9−import { Grid, ToggleInput, CheckboxInput, Button } from 'indigo-react';
9+import { 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';
1213
1314import { usePointCursor } from 'store/pointCursor';
1415import { usePointCache } from 'store/pointCache';
@@ -41,26 +42,29 @@ import {
4142 buildHexValidator,
4243} from 'form/validators';
4344import BridgeForm from 'form/BridgeForm';
44−import Condition from 'form/Condition';
4545import FormError from 'form/FormError';
4646import { convertToInt } from 'lib/convertToInt';
4747import Window from 'components/L2/Window/Window';
4848import HeaderPane from 'components/L2/Window/HeaderPane';
4949import BodyPane from 'components/L2/Window/BodyPane';
50−import { Box, Row } from '@tlon/indigo-react';
5150
52−function useSetKeys(manualNetworkSeed, setManualNetworkSeed) {
53− const { urbitWallet, wallet, authMnemonic, authToken } = useWallet();
54− const { pointCursor } = usePointCursor();
55− const { syncDetails, syncRekeyDate, getDetails } = usePointCache();
56− const { contracts } = useNetwork();
51+import './NetworkKeys.scss';
52+
53+function useSetKeys(
54+ manualNetworkSeed: string,
55+ setManualNetworkSeed: (seed: string) => void
56+) {
57+ const { urbitWallet, wallet, authMnemonic, authToken }: any = useWallet();
58+ const { pointCursor }: any = usePointCursor();
59+ const { syncDetails, syncRekeyDate, getDetails }: any = usePointCache();
60+ const { contracts }: any = useNetwork();
5761
5862 const _point = need.point(pointCursor);
5963 const _contracts = need.contracts(contracts);
6064 const _details = need.details(getDetails(_point));
6165
6266 const networkRevision = convertToInt(_details.keyRevisionNumber, 10);
63− const randomSeed = useRef();
67+ const randomSeed = useRef<string | null>();
6468
6569 const {
6670 available: keyfileAvailable,
@@ -112,7 +116,7 @@ function useSetKeys(manualNetworkSeed, setManualNetworkSeed) {
112116
113117 const { completed: _completed, ...rest } = useEthereumTransaction(
114118 useCallback(
115− async (manualSeed, isDiscontinuity) => {
119+ async (manualSeed: string, isDiscontinuity: boolean) => {
116120 const seed = await buildNetworkSeed(manualSeed);
117121 const pair = deriveNetworkKeys(seed);
118122
@@ -148,8 +152,11 @@ function useSetKeys(manualNetworkSeed, setManualNetworkSeed) {
148152export default function UrbitOSNetworkKeys({
149153 manualNetworkSeed,
150154 setManualNetworkSeed,
155+}: {
156+ manualNetworkSeed: string;
157+ setManualNetworkSeed: (seed: string) => void;
151158}) {
152− const { pop } = useLocalRouter();
159+ const { pop }: any = useLocalRouter();
153160 const { point, setLoading } = useRollerStore();
154161 const {
155162 configureNetworkKeys,
@@ -157,6 +164,7 @@ export default function UrbitOSNetworkKeys({
157164 checkForUpdates,
158165 } = useRoller();
159166 const [breach, setBreach] = useState(false);
167+ const [useCustomSeed, setUseCustomSeed] = useState(false);
160168
161169 const hasKeys = point.networkKeysSet;
162170
@@ -200,12 +208,9 @@ export default function UrbitOSNetworkKeys({
200208 const onValues = useCallback(
201209 ({ valid, values, form }) => {
202210 if (valid) {
203− construct(
204− values.useNetworkSeed ? values.networkSeed : undefined,
205− values.useDiscontinuity
206− );
207− setBreach(values.useDiscontinuity);
208− setManualNetworkSeed(values.useNetworkSeed);
211+ const networkSeed = useCustomSeed ? values.networkSeed : undefined;
212+ construct(networkSeed, breach);
213+ setManualNetworkSeed(networkSeed);
209214 } else {
210215 unconstruct();
211216 }
@@ -216,7 +221,14 @@ export default function UrbitOSNetworkKeys({
216221 setManualNetworkSeed('');
217222 }
218223 },
219− [construct, unconstruct, setManualNetworkSeed, setBreach]
224+ [
225+ construct,
226+ unconstruct,
227+ breach,
228+ setManualNetworkSeed,
229+ setBreach,
230+ useCustomSeed,
231+ ]
220232 );
221233
222234 const setNetworkKeys = useCallback(async () => {
@@ -224,10 +236,10 @@ export default function UrbitOSNetworkKeys({
224236 try {
225237 await configureNetworkKeys({
226238 breach,
227− manualNetworkSeed,
239+ customNetworkSeed: manualNetworkSeed,
228240 });
229241 // TODO: just use the tx hash instead?
230− getPendingTransactions(point);
242+ getPendingTransactions();
231243 // TODO: this is just so we get visual feedback that the tx has gone through
232244 // but this should be addressed with the new UI flow (-> download keyfile)
233245 //
@@ -264,26 +276,17 @@ export default function UrbitOSNetworkKeys({
264276 []
265277 );
266278
267− const viewTitle = completed
268− ? 'Network Keys are now set'
269− : 'Set Network Keys';
279+ const viewTitle = completed ? 'Network Keys are now set' : 'Set Network Keys';
270280
271281 const usageMessage =
272282 'You need this keyfile to authenticate with your OS. Please Download.';
273283
274284 return (
275− <Window>
285+ <Window className="network-keys">
276286 <HeaderPane>
277− <Row className="header-row">
278− <h5>{viewTitle}</h5>
279− </Row>
287+ <h5>{viewTitle}</h5>
280288 </HeaderPane>
281289 <BodyPane>
282− {!completed && (
283− <Grid.Item className="gray4 f5 mv2 align-self-start" full>
284− Network Keys authenticate Urbit ID with Urbit OS.
285− </Grid.Item>
286− )}
287290 {completed && (
288291 <>
289292 <Grid.Item
@@ -304,43 +307,54 @@ export default function UrbitOSNetworkKeys({
304307 onValues={onValues}
305308 initialValues={initialValues}>
306309 {() => (
307− <Box width="100%">
310+ <Box className="contents">
308311 {!completed && (
309− <>
310− <Grid.Item
311− full
312− as={ToggleInput}
313− name="useNetworkSeed"
314− label="Use Custom Network Seed"
315− inverseLabel="Back to Derived Network Seed"
316− disabled={inputsLocked}
317− />
318− <Condition when="useNetworkSeed" is={true}>
319− <Grid.Item full as={NoticeBox} className="mb2">
320− When using a custom network seed, you'll need to download
321− your Arvo keyfile immediately after this transaction as
322− Bridge does not store your seed.
323− </Grid.Item>
324− <Grid.Item
325− full
326− as={HexInput}
327− name="networkSeed"
328− label="Network Seed (32 bytes)"
312+ <Box>
313+ <Row className="check-row" onClick={() => setBreach(!breach)}>
314+ <Checkbox
315+ className="checkbox"
316+ selected={breach}
329317 disabled={inputsLocked}
330− className="mb6"
331318 />
332− </Condition>
333− <Grid.Item
334− full
335− as={CheckboxInput}
336− name="useDiscontinuity"
337− label="Breach Continuity"
338− disabled={inputsLocked}
339− className="mb6"
340− />
341−
319+ Factory Reset
320+ </Row>
321+ <Box className="info-text">
322+ Use if your ship is corrupted, you lost your files, or
323+ <br />
324+ you want to erase your data
325+ </Box>
326+ <Row
327+ className="check-row"
328+ onClick={() => setUseCustomSeed(!useCustomSeed)}>
329+ <Checkbox
330+ className="checkbox"
331+ selected={useCustomSeed}
332+ disabled={inputsLocked}
333+ />
334+ Custom Network Seed
335+ </Row>
336+ <Box className="info-text">
337+ Enter your own custom network seed to derive from
338+ </Box>
339+ {useCustomSeed && (
340+ <>
341+ <Grid.Item full as={NoticeBox} className="mb2">
342+ When using a custom network seed, you'll need to
343+ download your Arvo keyfile immediately after this
344+ transaction as Bridge does not store your seed.
345+ </Grid.Item>
346+ <Grid.Item
347+ full
348+ as={HexInput}
349+ name="networkSeed"
350+ label="Network Seed (32 bytes)"
351+ disabled={inputsLocked}
352+ className="mb5"
353+ />
354+ </>
355+ )}
342356 <Grid.Item full as={FormError} />
343− </>
357+ </Box>
344358 )}
345359
346360 {point.isL2 ? (