git.iko.soy/bridge
on 42e34eb help sign in
bridge/src/views/Activate/MasterKeyTransfer.tsx
133 lines 3.5 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 sendWallet,
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: sendWallet.value,
37 });
38 } catch (e) {
39 console.error(e);
40 setError(e);
41 }
42 }, [derivedWallet, performL2Reticket, derivedPoint.value, sendWallet.value]);
44 useFadeIn();
46 useLifecycle(() => {
47 claimPoint();
48 });
50 const header = useMemo(() => {
51 return (
52 <ActivateHeader
53 content={
54 <>
55 <Text
56 display={'block'}
57 fontFamily={'Inter'}
58 fontStyle={'normal'}
59 fontWeight={'600'}
60 fontSize={'16px'}
61 lineHeight={'24px'}>
62 Congratulations
63 </Text>
64 <Text
65 fontFamily="Source Code Pro"
66 fontSize={'16px'}
67 fontWeight={600}>
68 {derivedPatp.value}
69 </Text>
70 &nbsp;
71 <Text
72 fontFamily={'Inter'}
73 fontStyle={'normal'}
74 fontWeight={'600'}
75 fontSize={'16px'}
76 lineHeight={'24px'}>
77 is now yours
78 </Text>
79 </>
80 }
81 />
82 );
83 }, [derivedPatp.value]);
85 const footer = useMemo(() => {
86 return (
87 <Box
88 display={'flex'}
89 flexDirection={'column'}
90 flexWrap={'nowrap'}
91 justifyContent={'space-between'}>
92 {error && <DangerBox>{error.toString()}</DangerBox>}
93 <DownloadPortButton error={error} />
94 <Anchor
95 href="https://urbit.org/getting-started/cli"
96 marginTop={'20px'}
97 marginBottom={'10px'}
98 underline={false}
99 fontFamily={'Inter'}
100 fontSize={'14px'}
101 fontWeight={'500'}
102 lineHeight={'16px'}
103 textAlign={'center'}
104 target={'_blank'}
105 rel={'nofollow noopener'}>
106 or setup via command line
107 </Anchor>
108 </Box>
109 );
110 }, [error]);
112 return (
113 <View inset>
114 <ActivateView hideBack header={header} footer={footer}>
115 <Box
116 alignItems={'center'}
117 display={'flex'}
118 flexDirection={'column'}
119 flexWrap={'nowrap'}
120 height={'100%'}
121 justifyContent={'center'}>
122 <PointPresenter
123 patp={derivedPatp.value}
124 showLabel={false}
125 success={true}
126 />
127 </Box>
128 </ActivateView>
129 </View>
130 );
131};
133export default MasterKeyTransfer;