git.iko.soy/bridge
on df0c310 help sign in
bridge/src/views/Activate/MasterKeyTransfer.tsx
151 lines 4.2 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 './useActivateFlow';
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 ActivateButton from './ActivateButton';
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 <ActivateButton
99 onClick={() => window.open('https://urbit.org/getting-started/cloud-hosting')}
100 className='pointer-hover'
101 disabled={error}
102 success={true}>
103 To use it, set up a cloud instance for your urbit
104 </ActivateButton>
105 <Anchor
106 href="https://urbit.org/getting-started/cli"
107 marginTop={'20px'}
108 marginBottom={'10px'}
109 underline={false}
110 fontFamily={'Inter'}
111 fontSize={'14px'}
112 fontWeight={'500'}
113 lineHeight={'16px'}
114 textAlign={'center'}
115 target={'_blank'}
116 rel={'nofollow noopener'}>
117 or get started locally via command line
118 </Anchor>
119 <p
120 className="mb2 sans gray5"
121 style={{ fontSize: 14, textAlign: 'center' }}>
122 You need your Network Key to boot your Urbit ID. You can find your
123 Network Key file inside the Passport you downloaded. A computer
124 running on the Urbit network is called a ship.
125 </p>
126 </Box>
127 );
128 }, [error]);
130 return (
131 <View inset hideBack>
132 <ActivateView hideBack header={header} footer={footer}>
133 <Box
134 alignItems={'center'}
135 display={'flex'}
136 flexDirection={'column'}
137 flexWrap={'nowrap'}
138 height={'100%'}
139 justifyContent={'center'}>
140 <PointPresenter
141 patp={derivedPatp.value}
142 showLabel={false}
143 success={true}
144 />
145 </Box>
146 </ActivateView>
147 </View>
148 );
149};
151export default MasterKeyTransfer;