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