git.iko.soy/bridge
on 2d3487f help sign in
bridge/src/views/Activate/MasterKeyTransfer.tsx
141 lines 3.8 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 { FadeableActivateButton as ActivateButton } from './ActivateButton';
11import useFadeIn from './useFadeIn';
12import PointPresenter from './PointPresenter';
13import DangerBox from './DangerBox';
14import View from 'components/View';
16const MasterKeyTransfer = () => {
17 const { acceptInvite } = useRoller();
18 const {
19 derivedPatp,
20 derivedPoint,
21 derivedWallet,
22 inviteWallet,
23 } = useActivateFlow();
24 const [error, setError] = useState();
26 const claimPoint = useCallback(async () => {
27 setError(undefined);
29 try {
30 await acceptInvite({
31 point: derivedPoint.value,
32 to: derivedWallet.value.ownership.keys.address,
33 manager: derivedWallet.value.management.keys.address,
34 toWallet: derivedWallet.value,
35 fromWallet: inviteWallet.value,
36 });
37 } catch (error) {
38 console.error(error);
39 setError(error);
40 }
41 }, [derivedWallet, acceptInvite, derivedPoint.value, inviteWallet.value]);
43 useFadeIn();
45 useLifecycle(() => {
46 claimPoint();
47 });
49 const header = useMemo(() => {
50 return (
51 <ActivateHeader
52 content={
53 <>
54 <Text
55 display={'block'}
56 fontFamily={'Inter'}
57 fontStyle={'normal'}
58 fontWeight={'600'}
59 fontSize={'16px'}
60 lineHeight={'24px'}>
61 Congratulations
62 </Text>
63 <Text
64 fontFamily="Source Code Pro"
65 fontSize={'16px'}
66 fontWeight={600}>
67 {derivedPatp.value}
68 </Text>
69 &nbsp;
70 <Text
71 fontFamily={'Inter'}
72 fontStyle={'normal'}
73 fontWeight={'600'}
74 fontSize={'16px'}
75 lineHeight={'24px'}>
76 is now yours
77 </Text>
78 </>
79 }
80 />
81 );
82 }, [derivedPatp.value]);
84 const footer = useMemo(() => {
85 return (
86 <Box
87 display={'flex'}
88 flexDirection={'column'}
89 flexWrap={'nowrap'}
90 justifyContent={'space-between'}>
91 {error && <DangerBox>{error.toString()}</DangerBox>}
92 <ActivateButton
93 onClick={() =>
94 window.open(
95 'https://github.com/urbit/port/releases/latest/download/Port.dmg'
96 )
97 }
98 disabled={error}
99 success={true}>
100 Download the Client for Mac
101 </ActivateButton>
102 <Anchor
103 href="https://urbit.org/getting-started/cli"
104 marginTop={'20px'}
105 marginBottom={'10px'}
106 underline={false}
107 fontFamily={'Inter'}
108 fontSize={'14px'}
109 fontWeight={'500'}
110 lineHeight={'16px'}
111 textAlign={'center'}
112 target={'_blank'}
113 rel={'nofollow noopener'}>
114 or setup via command line
115 </Anchor>
116 </Box>
117 );
118 }, [error]);
120 return (
121 <View centered={true} inset>
122 <ActivateView header={header} footer={footer}>
123 <Box
124 alignItems={'center'}
125 display={'flex'}
126 flexDirection={'column'}
127 flexWrap={'nowrap'}
128 height={'100%'}
129 justifyContent={'center'}>
130 <PointPresenter
131 patp={derivedPatp.value}
132 showLabel={false}
133 success={true}
134 />
135 </Box>
136 </ActivateView>
137 </View>
138 );
139};
141export default MasterKeyTransfer;