-
Notifications
You must be signed in to change notification settings - Fork 25
/
ResetKeys.jsx
70 lines (60 loc) · 1.76 KB
/
ResetKeys.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import React, { useCallback, useState } from 'react';
import { Just, Nothing } from 'folktale/maybe';
import { Flex } from 'indigo-react';
import { LocalRouterProvider } from 'lib/LocalRouter';
import useRouter from 'lib/useRouter';
import Steps from 'components/Steps';
import ResetConfirm from './ResetKeys/ResetConfirm';
import ResetDownload from './ResetKeys/ResetDownload';
import ResetVerify from './ResetKeys/ResetVerify';
import ResetExecute from './ResetKeys/ResetExecute';
import Window from 'components/L2/Window/Window';
import HeaderPane from 'components/L2/Window/HeaderPane';
import BodyPane from 'components/L2/Window/BodyPane';
import { Row } from '@tlon/indigo-react';
const NAMES = {
CONFIRM: 'CONFIRM',
DOWNLOAD: 'DOWNLOAD',
VERIFY: 'VERIFY',
EXECUTE: 'EXECUTE',
};
const VIEWS = {
CONFIRM: ResetConfirm,
DOWNLOAD: ResetDownload,
VERIFY: ResetVerify,
EXECUTE: ResetExecute,
};
const STEPS = [NAMES.CONFIRM, NAMES.DOWNLOAD, NAMES.VERIFY, NAMES.EXECUTE];
export default function ResetKeys() {
const { Route, ...router } = useRouter({
names: NAMES,
views: VIEWS,
initialRoutes: [{ key: NAMES.CONFIRM }],
});
const [newWallet, _setNewWallet] = useState(Nothing());
const setNewWallet = useCallback(
(wallet, paper) => {
_setNewWallet(
Just({
wallet,
paper,
})
);
},
[_setNewWallet]
);
return (
<Window>
<HeaderPane>
<Row className="header-row">
<Flex.Item as={Steps} num={router.size} total={STEPS.length} />
</Row>
</HeaderPane>
<BodyPane>
<LocalRouterProvider value={router}>
<Route newWallet={newWallet} setNewWallet={setNewWallet} />
</LocalRouterProvider>
</BodyPane>
</Window>
);
}