@@ -1,82 +1,64 @@
1−import React, { useCallback, useState } from 'react';
1+import React from 'react';
2+import cn from 'classnames';
23import Maybe from 'folktale/maybe';
3−import { Grid, H4, P } from 'indigo-react';
4−import PaperCollateralRenderer from 'PaperCollateralRenderer';
4+import { Grid } from 'indigo-react';
55
6−import * as need from 'lib/need';
7−import { useLocalRouter } from 'lib/LocalRouter';
6+import { LocalRouterProvider } from 'lib/LocalRouter';
87
98import View from 'components/View';
10−import { ForwardButton, DownloadButton } from 'components/Buttons';
119import Passport from 'components/Passport';
1210
1311import { useActivateFlow } from './ActivateFlow';
14−import { downloadWallet } from 'lib/invite';
12+import useBreakpoints from 'lib/useBreakpoints';
13+import useRouter from 'lib/useRouter';
1514
16−export default function ActivatePassport() {
17− const { push, names } = useLocalRouter();
18− const { derivedPoint, derivedWallet } = useActivateFlow();
19− // const point = need.point(derivedPoint);
20− const wallet = need.wallet(derivedWallet);
15+import PassportDownload from './PassportDownload';
16+import PassportVerify from './PassportVerify';
17+import PassportTransfer from './PassportTransfer';
2118
22− const [paper, setPaper] = useState(Maybe.Nothing());
19+const kPassportNames = {
20+ DOWNLOAD: 'DOWNLOAD',
21+ VERIFY: 'VERIFY',
22+ TRANSFER: 'TRANSFER',
23+};
2324
24− const goToPassport = useCallback(() => push(names.PASSPORT), [push, names]);
25+const kPassportViews = {
26+ [kPassportNames.DOWNLOAD]: PassportDownload,
27+ [kPassportNames.VERIFY]: PassportVerify,
28+ [kPassportNames.TRANSFER]: PassportTransfer,
29+};
2530
26− const pointAsString = derivedPoint.matchWith({
27− Nothing: () => '',
28− Just: p => p.value.toFixed(),
29− });
31+export default function ActivatePassport() {
32+ const { derivedPoint, generated } = useActivateFlow();
3033
31− const generated = paper.matchWith({
32− Nothing: () => false,
33− Just: () => true,
34+ const { Route, ...router } = useRouter({
35+ names: kPassportNames,
36+ views: kPassportViews,
37+ initialRoutes: [{ key: kPassportNames.DOWNLOAD }],
3438 });
3539
36− const download = useCallback(() => downloadWallet(paper.getOrElse([])), [
37− paper,
38− ]);
40+ const fullView = useBreakpoints([false, false, true]);
41+ const gap = useBreakpoints([4, 4, 7]);
42+ const marginTop = useBreakpoints([false, false, 8]);
43+ const full = useBreakpoints([true, true, false]);
44+ const leftHalf = useBreakpoints([false, false, 1]);
45+ const rightHalf = useBreakpoints([false, false, 2]);
3946
4047 return (
41− <View.Full>
42− <Grid gap={10} className="mt8 mb10" align="center">
43− <Grid.Item half={1} alignSelf="center">
44− <Passport point={derivedPoint} ticket={generated} />
45− </Grid.Item>
46− <Grid.Item half={2} as={Grid} gap={5} alignSelf="center">
47− <Grid.Item full>Step 1 of 3</Grid.Item>
48− <Grid.Item full as={H4}>
49− Passport
50− </Grid.Item>
51− <Grid.Item full as={P}>
52− After you’ve downloaded your passport, back up the ticket manually
53− or store on a trusted device.
54− </Grid.Item>
55− <Grid.Item full as={P}>
56− What is digital identity? A passport is your digital identity. You
57− will use your passport to access your true computer, send payments,
58− and administer your identity. So naturally, you must keep this
59− secure.
60− </Grid.Item>
61− <Grid.Item
62− full
63− as={DownloadButton}
64− disabled={!generated}
65− onClick={download}
66− solid>
67− Download Passport
48+ <LocalRouterProvider value={router}>
49+ <View full={fullView}>
50+ <Grid gap={gap} className="mt8 mb10">
51+ <Grid.Item half={leftHalf} full={full}>
52+ <Passport
53+ className={cn({ [`mt${marginTop}`]: marginTop })}
54+ point={derivedPoint}
55+ ticket={generated}
56+ address={Maybe.Nothing()}
57+ />
6858 </Grid.Item>
69− </Grid.Item>
70− </Grid>
71− <PaperCollateralRenderer
72− className="super-hidden"
73− wallet={{ [pointAsString]: wallet }}
74− callback={data => {
75− console.log(data);
76− setPaper(Maybe.Just(data));
77− }}
78− mode="REGISTRATION"
79− />
80− </View.Full>
59+ <Grid.Item half={rightHalf} full={full} as={Route} />
60+ </Grid>
61+ </View>
62+ </LocalRouterProvider>
8163 );
8264}