git.iko.soy/bridge
on d2ca91e help sign in
bridge/src/views/Activate/MasterKeyTransfer.tsx
145 lines 3.9 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 inviteMasterTicketWallet,
23 sendWallet,
24 }: any = useActivateFlow();
25 const [error, setError] = useState<any>();
27 const claimPoint = useCallback(async () => {
28 setError(undefined);
30 try {
31 await performL2Reticket({
32 point: derivedPoint.value,
33 to: inviteMasterTicketWallet.value.ownership.keys.address,
34 manager: inviteMasterTicketWallet.value.management.keys.address,
35 toWallet: inviteMasterTicketWallet.value,
36 fromWallet: sendWallet.value,
37 });
38 } catch (e) {
39 console.error(e);
40 setError(e);
41 }
42 }, [
43 inviteMasterTicketWallet,
44 performL2Reticket,
45 derivedPoint.value,
46 sendWallet.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 <p
114 className="mb2 sans gray5"
115 style={{ fontSize: 14, textAlign: 'center' }}>
116 You need your bootkey to boot your Urbit ID. You can find your bootkey
117 inside the Passport you downloaded. A computer running on the Urbit
118 network is called a ship.
119 </p>
120 </Box>
121 );
122 }, [error]);
124 return (
125 <View inset hideBack>
126 <ActivateView hideBack header={header} footer={footer}>
127 <Box
128 alignItems={'center'}
129 display={'flex'}
130 flexDirection={'column'}
131 flexWrap={'nowrap'}
132 height={'100%'}
133 justifyContent={'center'}>
134 <PointPresenter
135 patp={derivedPatp.value}
136 showLabel={false}
137 success={true}
138 />
139 </Box>
140 </ActivateView>
141 </View>
142 );
143};
145export default MasterKeyTransfer;