git.iko.soy/bridge
on d2ca91e help sign in
bridge/src/views/Activate/ActivateCode.tsx
92 lines 3.0 kB history raw
1import { useCallback, useMemo } from 'react';
3import View from 'components/View';
4import ActivateView from './ActivateView';
6import { useLocalRouter } from 'lib/LocalRouter';
7import useImpliedTicket from 'lib/useImpliedTicket';
8import useHasDisclaimed from 'lib/useHasDisclaimed';
10import { ReactComponent as PlaceholderSigil } from 'assets/blank-planet-sigil.svg';
11import { FadeablePointPresenter as PointPresenter } from './PointPresenter';
12import { Box } from '@tlon/indigo-react';
13import { FadeableActivateHeader as ActivateHeader } from './ActivateHeader';
14import { FadeableActivateCodeForm as ActivateCodeForm } from './ActivateCodeForm';
15import useFadeIn from './useFadeIn';
17export default function ActivateCode() {
18 const { names, push }: any = useLocalRouter();
19 const { impliedPatp, impliedTicket } = useImpliedTicket();
20 const [hasDisclaimed] = useHasDisclaimed();
22 const goToMasterKey = useCallback(() => {
23 if (!hasDisclaimed) {
24 push(names.DISCLAIMER, { next: names.MASTER_KEY });
25 } else {
26 push(names.MASTER_KEY);
27 }
28 }, [hasDisclaimed, names.DISCLAIMER, names.MASTER_KEY, push]);
30 // Fade in on load
31 useFadeIn();
33 const hasInitialValues = useMemo(
34 () => Boolean(impliedTicket && impliedPatp),
35 [impliedTicket, impliedPatp]
36 );
38 return (
39 <View inset hideBack>
40 <ActivateView
41 hideBack={hasInitialValues}
42 header={
43 <ActivateHeader
44 content={
45 hasInitialValues
46 ? 'Welcome. This is your Urbit ID.'
47 : 'Activate a Planet'
48 }
49 />
50 }
51 footer={<ActivateCodeForm afterSubmit={goToMasterKey} />}>
52 <Box className="flex-col align-center justify-center w-full h-full">
53 {hasInitialValues ? (
54 <Box>
55 <p
56 className="mb2 sans gray5"
57 style={{
58 fontSize: 14,
59 textAlign: 'center',
60 maxWidth: '38ch',
61 marginLeft: 'auto',
62 }}>
63 An Urbit ID is your unique identity that you use to communicate
64 on Urbit. You own it forever.
65 </p>
66 <p
67 className="mb2 sans gray5"
68 style={{
69 fontSize: 14,
70 textAlign: 'center',
71 maxWidth: '38ch',
72 marginLeft: 'auto',
73 }}>
74 To activate your Urbit ID, begin by claiming it via the link
75 below.
76 </p>
77 </Box>
78 ) : (
79 <Box className="mb2 sans gray5" fontSize={14}>
80 Enter your planet activation code below.
81 </Box>
82 )}
83 {impliedPatp ? (
84 <PointPresenter patp={impliedPatp} className="mb6 mt7" />
85 ) : (
86 <PlaceholderSigil className="mv9" style={{ marginTop: 78 }} />
87 )}
88 </Box>
89 </ActivateView>
90 </View>
91 );