on master help sign in
Merge branch 'po/handle-activate-links-for-expired-planets'
commit85fe9b8d2512ccc182b855fa957936caaa565af5 authorHunter Miller <hunter@hmiller.dev> dateMon 7 Mar 2022, 11:51 (5 years ago) parent671e7a1cc8a4f2
5 files changed+146−50
src/lib/expiredPlanetsWithInviteCodes.json+13 src/lib/useIsExpiredInvite.ts+23 src/views/Activate/ActivateCode.tsx+58−50 src/views/Activate/CodeExpired.scss+3 src/views/Activate/CodeExpired.tsx+49
src/lib/expiredPlanetsWithInviteCodes.jsonnew file+13
@@ -0,0 +1,13 @@
1+{
2+ "rostug-dilsed-passyt-wandys-tambur-raptep": true,
3+ "davmun-watdus-bonwep-pasryc-hadres-rapsub": true,
4+ "sogtec-nomnyt-bactem-sarpes-tapbec-sapnut": true,
5+ "lacsyl-lonwer-paclep-binpen-sabtyr-datdel": true,
6+ "lomhep-roptux-pagtus-fogsed-pittyv-rivmeb": true,
7+ "racdys-botmyl-digmer-molryc-nopdyr-noslec": true,
8+ "lachus-bartep-navsum-rinten-podtug-davtyl": true,
9+ "rapdur-ponteg-nopweg-pardyt-hocdec-hosdev": true,
10+ "ponryc-firfur-livdyn-boslyt-taswyn-montex": true,
11+ "hilpet-tabryc-novnet-nilmur-rosrus-tollyr": true,
12+ "bidfyr-satlyn-pictec-walsug-picrys-tardet": true
13+}
src/lib/useIsExpiredInvite.tsnew file+23
@@ -0,0 +1,23 @@
1+import { stripSigPrefix } from 'form/formatters';
2+import expiredPlanetsWithInviteCodes from './expiredPlanetsWithInviteCodes.json';
3+
4+export default function useIsExpiredInvite(
5+ patp: string | null,
6+ ticket: string | null
7+) {
8+ let isExpired = false;
9+
10+ if (patp !== null && ticket !== null) {
11+ const ticketPatp = stripSigPrefix(ticket).concat('-', stripSigPrefix(patp));
12+
13+ const expired = Object.keys(expiredPlanetsWithInviteCodes).includes(
14+ ticketPatp
15+ );
16+
17+ isExpired = expired;
18+ }
19+
20+ return {
21+ isExpired,
22+ };
23+}
src/views/Activate/ActivateCode.tsx+58−50
@@ -2,10 +2,12 @@ import { useCallback, useMemo } from 'react';
22
33import View from 'components/View';
44import ActivateView from './ActivateView';
5+import CodeExpired from './CodeExpired';
56
67import { useLocalRouter } from 'lib/LocalRouter';
78import useImpliedTicket from 'lib/useImpliedTicket';
89import useHasDisclaimed from 'lib/useHasDisclaimed';
10+import useIsExpiredInvite from 'lib/useIsExpiredInvite';
911
1012import { ReactComponent as PlaceholderSigil } from 'assets/blank-planet-sigil.svg';
1113import { FadeablePointPresenter as PointPresenter } from './PointPresenter';
@@ -35,58 +37,64 @@ export default function ActivateCode() {
3537 [impliedTicket, impliedPatp]
3638 );
3739
40+ const { isExpired } = useIsExpiredInvite(impliedPatp, impliedTicket);
41+
3842 return (
3943 <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>
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+ )}
9098 </View>
9199 );
92100}
src/views/Activate/CodeExpired.scssnew file+3
@@ -0,0 +1,3 @@
1+.expired-view {
2+ min-height: 200px;
3+}
src/views/Activate/CodeExpired.tsxnew file+49
@@ -0,0 +1,49 @@
1+import View from 'components/View';
2+
3+import { Box, Button } from '@tlon/indigo-react';
4+import { FadeableActivateHeader as ActivateHeader } from './ActivateHeader';
5+import useFadeIn from './useFadeIn';
6+import Window from 'components/L2/Window/Window';
7+
8+import './CodeExpired.scss';
9+
10+export default function CodeExpired() {
11+ // Fade in on load
12+ useFadeIn();
13+
14+ return (
15+ <Window className="expired-view mt10">
16+ <Box className="w-full">
17+ <ActivateHeader content="This invite link has expired." />
18+ </Box>
19+ <Box className="flex-col align-center justify-center w-full h-full">
20+ <Box>
21+ <p
22+ className="mb2 sans gray5"
23+ style={{
24+ fontSize: 14,
25+ textAlign: 'center',
26+ maxWidth: '38ch',
27+ marginLeft: 'auto',
28+ }}>
29+ Please contact the entity you received it from.
30+ </p>
31+ </Box>
32+ <a className="flex-col m4 w-full" href="https://twitter.com/urbit">
33+ <Button
34+ className="m2"
35+ backgroundColor={'black'}
36+ color={'white'}
37+ padding={'16px'}
38+ fontFamily="Inter"
39+ height={'40px'}
40+ fontWeight={'400'}
41+ fontSize={'14px'}
42+ borderRadius={'4px'}>
43+ Learn more
44+ </Button>
45+ </a>
46+ </Box>
47+ </Window>
48+ );
49+}