@@ -1,4 +1,7 @@
11import React, { useCallback, useEffect, useMemo, useState } from 'react';
2+import { Just, Nothing } from 'folktale/maybe';
3+import * as need from 'lib/need';
4+import * as ob from 'urbit-ob';
25
36import { ActivateSteps } from './ActivateSteps';
47import { Box } from '@tlon/indigo-react';
@@ -10,10 +13,54 @@ import { FadeableMasterKeyCopy as MasterKeyCopy } from './MasterKeyCopy';
1013import { FadeableMasterKeyPresenter as MasterKeyPresenter } from './MasterKeyPresenter';
1114import { useActivateFlow } from './ActivateFlow';
1215import ActivateView from './ActivateView';
16+import { useLocalRouter } from 'lib/LocalRouter';
17+import { compileNetworkingKey } from 'lib/keys';
18+import { downloadWallet } from 'lib/invite';
19+import PaperBuilder from 'components/PaperBuilder';
1320
1421const MasterKeyDownload = () => {
15− const { setIsIn } = useActivateFlow();
22+ const {
23+ derivedPoint,
24+ derivedWallet,
25+ generated,
26+ setGenerated,
27+ setIsIn,
28+ } = useActivateFlow();
29+ const { push, names } = useLocalRouter();
30+ const point = need.point(derivedPoint);
31+ const wallet = need.wallet(derivedWallet);
32+ const ticket = wallet.ticket;
33+
34+ const [paper, setPaper] = useState(Nothing());
1635 const [triggerAnimation, setTriggerAnimation] = useState<boolean>(false);
36+ const [downloaded, setDownloaded] = useState<boolean>(false);
37+
38+ const pointAsString = derivedPoint.matchWith({
39+ Nothing: () => '',
40+ Just: p => p.value.toFixed(),
41+ });
42+
43+ const download = useCallback(() => {
44+ const netkey = compileNetworkingKey(wallet.network.keys, point, 1);
45+ //TODO could be deduplicated with useKeyfileGenerator's logic
46+ const filename = ob.patp(point).slice(1) + '-1.key';
47+ downloadWallet(paper.getOrElse([]), netkey, filename);
48+ setDownloaded(true);
49+ }, [paper, wallet, point, setDownloaded]);
50+
51+ // sync paper value to activation state
52+ useEffect(
53+ () =>
54+ setGenerated(
55+ paper.matchWith({
56+ Nothing: () => false,
57+ Just: () => true,
58+ })
59+ ),
60+ [paper, setGenerated]
61+ );
62+
63+ const goToVerify = useCallback(() => push(names.VERIFY), [push, names]);
1764
1865 const header = useMemo(() => {
1966 return triggerAnimation ? (
@@ -30,11 +77,14 @@ const MasterKeyDownload = () => {
3077
3178 const footer = useMemo(() => {
3279 return triggerAnimation ? (
33− <ActivateButton onClick={() => console.log('download')}>
34− Download Backup
80+ <ActivateButton
81+ disabled={!generated}
82+ onClick={!downloaded ? download : goToVerify}
83+ success={downloaded}>
84+ {!downloaded ? 'Download Backup (Passport)' : 'Continue'}
3585 </ActivateButton>
3686 ) : null;
37− }, [triggerAnimation]);
87+ }, [download, downloaded, generated, goToVerify, triggerAnimation]);
3888
3989 const delayedReveal = useCallback(async () => {
4090 setTimeout(() => {
@@ -64,11 +114,18 @@ const MasterKeyDownload = () => {
64114 {triggerAnimation && (
65115 <DangerBox>Do not share this with anyone else!</DangerBox>
66116 )}
67− <MasterKeyPresenter fadeIn={true} />
68− {triggerAnimation && <MasterKeyCopy text={'test'} />}
117+ {ticket && <MasterKeyPresenter fadeIn={true} ticket={ticket} />}
118+ {triggerAnimation && <MasterKeyCopy text={ticket} />}
69119 </Box>
70120 </ActivateView>
71121 <ActivateSteps currentStep={1} totalSteps={4} />
122+ <PaperBuilder
123+ point={pointAsString}
124+ wallets={[wallet]}
125+ callback={data => {
126+ setPaper(Just(data));
127+ }}
128+ />
72129 </>
73130 );
74131};