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