git.iko.soy/bridge
on 368f024 help sign in
bridge/src/views/Activate/MasterKeyTransfer.tsx
138 lines 3.6 kB history raw
1import React, { useState, useCallback, useMemo } from 'react';
3import useLifecycle from 'lib/useLifecycle';
5import { Anchor, Box, Text } from '@tlon/indigo-react';
6import { useActivateFlow } from './ActivateFlow';
7import ActivateView from './ActivateView';
8import useRoller from 'lib/useRoller';
9import { FadeableActivateHeader as ActivateHeader } from './ActivateHeader';
10import useFadeIn from './useFadeIn';
11import PointPresenter from './PointPresenter';
12import DangerBox from './DangerBox';
13import View from 'components/View';
15import { DownloadPortButton } from './DownloadPortButton';
17const MasterKeyTransfer = () => {
18 const { performL2Reticket } = useRoller();
19 const {
20 derivedPatp,
21 derivedPoint,
22 derivedWallet,
23 inviteWallet,
24 } = useActivateFlow();
25 const [error, setError] = useState();
27 const claimPoint = useCallback(async () => {
28 setError(undefined);
30 try {
31 await performL2Reticket({
32 point: derivedPoint.value,
33 to: derivedWallet.value.ownership.keys.address,
34 manager: derivedWallet.value.management.keys.address,
35 toWallet: derivedWallet.value,
36 fromWallet: inviteWallet.value,
37 });
38 } catch (e) {
39 console.error(e);
40 setError(e);
41 }
42 }, [
43 derivedWallet,
44 performL2Reticket,
45 derivedPoint.value,
46 inviteWallet.value,
47 ]);
49 useFadeIn();
51 useLifecycle(() => {
52 claimPoint();
53 });
55 const header = useMemo(() => {
56 return (
57 <ActivateHeader
58 content={
59 <>
60 <Text
61 display={'block'}
62 fontFamily={'Inter'}
63 fontStyle={'normal'}
64 fontWeight={'600'}
65 fontSize={'16px'}
66 lineHeight={'24px'}>
67 Congratulations
68 </Text>
69 <Text
70 fontFamily="Source Code Pro"
71 fontSize={'16px'}
72 fontWeight={600}>
73 {derivedPatp.value}
74 </Text>
75 &nbsp;
76 <Text
77 fontFamily={'Inter'}
78 fontStyle={'normal'}
79 fontWeight={'600'}
80 fontSize={'16px'}
81 lineHeight={'24px'}>
82 is now yours
83 </Text>
84 </>
85 }
86 />
87 );
88 }, [derivedPatp.value]);
90 const footer = useMemo(() => {
91 return (
92 <Box
93 display={'flex'}
94 flexDirection={'column'}
95 flexWrap={'nowrap'}
96 justifyContent={'space-between'}>
97 {error && <DangerBox>{error.toString()}</DangerBox>}
98 <DownloadPortButton error={error} />
99 <Anchor
100 href="https://urbit.org/getting-started/cli"
101 marginTop={'20px'}
102 marginBottom={'10px'}
103 underline={false}
104 fontFamily={'Inter'}
105 fontSize={'14px'}
106 fontWeight={'500'}
107 lineHeight={'16px'}
108 textAlign={'center'}
109 target={'_blank'}
110 rel={'nofollow noopener'}>
111 or setup via command line
112 </Anchor>
113 </Box>
114 );
115 }, [error]);
117 return (
118 <View centered={true}>
119 <ActivateView header={header} footer={footer}>
120 <Box
121 alignItems={'center'}
122 display={'flex'}
123 flexDirection={'column'}
124 flexWrap={'nowrap'}
125 height={'100%'}
126 justifyContent={'center'}>
127 <PointPresenter
128 patp={derivedPatp.value}
129 showLabel={false}
130 success={true}
131 />
132 </Box>
133 </ActivateView>
134 </View>
135 );
136};
138export default MasterKeyTransfer;