50e5e4f · bridge · git.iko.soy

git.iko.soy/bridge

WIP: Master Key animation

commit50e5e4f30363bcb90f033c1ea6f29e37b90237ea authortomholford <tomholford@users.noreply.github.com> dateFri 3 Sep 2021, 14:34 (5 years ago) parentdc733d5

4 files changed+232−17

compare with master

unifiedsplit

src/style/views/activate.scss+65−4 src/views/Activate/ActivateCode.tsx+29−6 src/views/Activate/MasterKey.tsx+120 src/views/Activate/PointPresenter.tsx+18−7

src/style/views/activate.scss+65−4

@@ -5,11 +5,72 @@ div.activate-view {

55 min-width: 600px;

66 min-height: 500px;

8− div.activate-view-inner {

9− height: 100%;

8+ @keyframes opacity-fill {

9+ 0% {

10+ fill-opacity: 0.2;

11+ }

12+ 100% {

13+ fill-opacity: 1.0;

14+ }

1015 }

1116

12− .mono {

13− font-family: 'Source Code Pro';

17+ svg.master-key {

18+ .first-one {

19+ animation: opacity-fill 200ms linear forwards infinite;

20+ animation-delay: 100ms;

21+ }

22+

23+ .first-two {

24+ animation: opacity-fill 200ms linear forwards infinite;

25+ animation-delay: 200ms;

26+ }

27+

28+ .first-three {

29+ animation: opacity-fill 200ms linear forwards infinite;

30+ animation-delay: 300ms;

31+

32+ }

33+

34+ .second-one {

35+ animation: opacity-fill 200ms linear forwards infinite;

36+ animation-delay: 400ms;

37+ }

38+ .second-two {

39+ animation: opacity-fill 200ms linear forwards infinite;

40+ animation-delay: 500ms;

41+ }

42+

43+ .second-three {

44+ animation: opacity-fill 200ms linear forwards infinite;

45+ animation-delay: 600ms;

46+ }

47+

48+ .third-one {

49+ animation: opacity-fill 200ms linear forwards infinite;

50+ animation-delay: 700ms;

51+ }

52+ .third-two {

53+ animation: opacity-fill 200ms linear forwards infinite;

54+ animation-delay: 800ms;

55+ }

56+ .third-three {

57+ animation: opacity-fill 200ms linear forwards infinite;

58+ animation-delay: 900ms;

59+ }

60+

61+ .fourth-one {

62+ animation: opacity-fill 200ms linear forwards infinite;

63+ animation-delay: 1s;

64+ }

65+

66+ .fourth-two {

67+ animation: opacity-fill 200ms linear forwards infinite;

68+ animation-delay: 1.1s;

69+ }

70+

71+ .fourth-three {

72+ animation: opacity-fill 200ms linear forwards infinite;

73+ animation-delay: 1.2s;

74+ }

1475 }

1576}

src/views/Activate/ActivateCode.tsx+29−6

@@ -1,7 +1,7 @@

1−import { useCallback, useEffect, useMemo, useRef } from 'react';

1+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';

22import { Just } from 'folktale/maybe';

33import * as azimuth from 'azimuth-js';

4−import { Grid, H4, P, CheckboxInput } from 'indigo-react';

4+import { Grid, CheckboxInput } from 'indigo-react';

55import { FORM_ERROR } from 'final-form';

77import View from 'components/View';

@@ -44,6 +44,7 @@ import useRoller from 'lib/useRoller';

4444import { Ship } from '@urbit/roller-api';

4545import { Box, Text } from '@tlon/indigo-react';

4646import ActivateHeader from './ActivateHeader';

47+import { MasterKey } from './MasterKey';

4748

4849export default function ActivateCode() {

4950 const history = useHistory();

@@ -57,6 +58,7 @@ export default function ActivateCode() {

5758 const [hasDisclaimed] = useHasDisclaimed();

5859 const didWarn = useRef(false);

5960 const { api, getPoints } = useRoller();

61+ const [isGenerating, setIsGenerating] = useState<boolean>(false);

6062

6163 const {

6264 setDerivedPoint,

@@ -128,6 +130,7 @@ export default function ActivateCode() {

128130 // derive and set our state on submission

129131 const onSubmit = useCallback(

130132 async values => {

133+ setIsGenerating(true);

131134 await timeout(16); // allow the ui changes to flush before we lag it out

132135

133136 // Derive wallet

@@ -152,6 +155,7 @@ export default function ActivateCode() {

152155 if (incoming.length > 0) {

153156 if (incoming.length > 1 && !didWarn.current) {

154157 didWarn.current = true;

158+ setIsGenerating(false);

155159

156160 return {

157161 [WARNING]:

@@ -162,11 +166,12 @@ export default function ActivateCode() {

162166 }

163167

164168 const point = convertToInt(incoming[0], 10);

165− console.log('submitting point', point);

166169

167170 setDerivedPoint(Just(point));

168171 setDerivedWallet(Just(await generateWallet(point, true)));

169172 } else {

173+ setIsGenerating(false);

174+

170175 return {

171176 [FORM_ERROR]:

172177 'Invite code has no claimable point.\n' +

@@ -209,6 +214,7 @@ export default function ActivateCode() {

209214 display="flex"

210215 flexDirection="column"

211216 flexWrap="nowrap"

217+ height={'100%'}

212218 justifyContent="flex-end">

213219 <Grid>

214220 <BridgeForm

@@ -279,8 +285,12 @@ export default function ActivateCode() {

279285 return (

280286 <View inset>

281287 <ActivateView

282− header={<ActivateHeader copy={'Welcome. This is your Urbit.'} />}

283− footer={footer}>

288+ header={

289+ !isGenerating && (

290+ <ActivateHeader copy={'Welcome. This is your Urbit.'} />

291+ )

292+ }

293+ footer={!isGenerating && footer}>

284294 <Box

285295 alignItems={'center'}

286296 display={'flex'}

@@ -291,7 +301,20 @@ export default function ActivateCode() {

291301 {!impliedTicket && (

292302 <Text className="mb2">Enter your activation code to continue.</Text>

293303 )}

294− {impliedPatp && <PointPresenter patp={impliedPatp} />}

304+ {!isGenerating && impliedPatp && (

305+ <PointPresenter patp={impliedPatp} />

306+ )}

307+ {isGenerating && (

308+ <Box

309+ display={'flex'}

310+ flexDirection={'row'}

311+ flexWrap={'nowrap'}

312+ width={'80%'}

313+ height={'min-content'}

314+ justifyContent={'center'}>

315+ <MasterKey />

316+ </Box>

317+ )}

295318 </Box>

296319 </ActivateView>

297320

src/views/Activate/MasterKey.tsxnew file+120

@@ -0,0 +1,120 @@

1+export const MasterKey = () => {

2+ return (

3+ <svg className="master-key" viewBox="0 0 300 32">

4+ <g>

5+ <path

6+ className="first-one"

7+ fillRule="evenodd"

8+ clipRule="evenodd"

9+ d="M2 0a2 2 0 00-2 2v12a2 2 0 002 2h41a2 2 0 002-2V2a2 2 0 00-2-2H2zm41 2H2v12h41V2z"

10+ />

11+ <path

12+ className="first-two"

13+ fillRule="evenodd"

14+ clipRule="evenodd"

15+ d="M48 17C48 14.7909 49.7909 13 52 13H57C59.2091 13 61 14.7909 61 17V28C61 30.2091 59.2091 32 57 32H4C1.79086 32 0 30.2091 0 28V24C0 21.7909 1.79086 20 4 20H46C47.1046 20 48 19.1046 48 18V17ZM52 15C50.8954 15 50 15.8954 50 17V18C50 20.2091 48.2091 22 46 22H4C2.89543 22 2 22.8954 2 24V28C2 29.1046 2.89543 30 4 30H57C58.1046 30 59 29.1046 59 28V17C59 15.8954 58.1046 15 57 15H52Z"

16+ />

17+ <path

18+ className="first-three"

19+ fillRule="evenodd"

20+ clipRule="evenodd"

21+ d="M48 2C48 0.89543 48.8954 0 50 0H59C60.1046 0 61 0.895431 61 2V7C61 8.10457 60.1046 9 59 9H50C48.8954 9 48 8.10457 48 7V2ZM50 2H59V7H50V2Z"

22+ />

23+ </g>

24+ <g>

25+ <path

26+ className="second-one"

27+ fillRule="evenodd"

28+ clipRule="evenodd"

29+ d="M77 2C77 0.89543 77.8954 0 79 0H88C89.1046 0 90 0.895431 90 2V22C90 23.1046 89.1046 24 88 24H79C77.8954 24 77 23.1046 77 22V2ZM79 2H88V22H79V2Z"

30+ />

31+ <g className="second-two">

32+ <path

33+ fillRule="evenodd"

34+ clipRule="evenodd"

35+ d="M77 28C77 26.8954 77.8954 26 79 26H109C110.105 26 111 26.8954 111 28V30C111 31.1046 110.105 32 109 32H79C77.8954 32 77 31.1046 77 30V28ZM109 28V30H79V28H109Z"

36+ />

37+ <path

38+ fillRule="evenodd"

39+ clipRule="evenodd"

40+ d="M94 2C94 0.89543 94.8954 0 96 0H115C116.105 0 117 0.895431 117 2V14C117 15.1046 117.895 16 119 16H129C130.105 16 131 16.8954 131 18V30C131 31.1046 130.105 32 129 32H114.951C113.847 32 112.951 31.1046 112.951 30V26C112.951 24.8954 112.056 24 110.951 24H96C94.8954 24 94 23.1046 94 22V2ZM96 2V22H110.951C113.16 22 114.951 23.7909 114.951 26V30H129V18H119C116.791 18 115 16.2091 115 14V2H96Z"

41+ />

42+ <path

43+ fillRule="evenodd"

44+ clipRule="evenodd"

45+ d="M131 6C131 9.31371 128.314 12 125 12C121.686 12 119 9.31371 119 6C119 2.68629 121.686 0 125 0C128.314 0 131 2.68629 131 6ZM129 6C129 8.20914 127.209 10 125 10C122.791 10 121 8.20914 121 6C121 3.79086 122.791 2 125 2C127.209 2 129 3.79086 129 6Z"

46+ />

47+ </g>

48+ <g className="second-three">

49+ <path

50+ fillRule="evenodd"

51+ clipRule="evenodd"

52+ d="M135 1C133.895 1 133 1.89543 133 3V18C133 19.1046 133.895 20 135 20H143C144.105 20 145 19.1046 145 18V3C145 1.89543 144.105 1 143 1H135ZM143 3H135V18H143V3Z"

53+ />

54+ <path

55+ fillRule="evenodd"

56+ clipRule="evenodd"

57+ d="M133 25C133 23.8954 133.895 23 135 23H143C144.105 23 145 23.8954 145 25V30C145 31.1046 144.105 32 143 32H135C133.895 32 133 31.1046 133 30V25ZM135 25H143V30H135V25Z"

58+ />

59+ </g>

60+ </g>

61+ <g>

62+ <g className="third-one">

63+ <path

64+ fillRule="evenodd"

65+ clipRule="evenodd"

66+ d="M163 0C161.895 0 161 0.895431 161 2V6C161 7.10457 161.895 8 163 8H167C168.105 8 169 7.10457 169 6V2C169 0.895431 168.105 0 167 0H163ZM167 2H163V6H167V2Z"

67+ />

68+ <path

69+ fillRule="evenodd"

70+ clipRule="evenodd"

71+ d="M161 12C161 10.8954 161.895 10 163 10H167C168.105 10 169 10.8954 169 12V16C169 17.1046 168.105 18 167 18H163C161.895 18 161 17.1046 161 16V12ZM163 12H167V16H163V12Z"

72+ />

73+ <path

74+ fillRule="evenodd"

75+ clipRule="evenodd"

76+ d="M171 2C171 0.89543 171.895 0 173 0H181C182.105 0 183 0.895431 183 2V17C183 18.1046 182.105 19 181 19H173C171.895 19 171 18.1046 171 17V2ZM173 2H181V17H173V2Z"

77+ />

78+ </g>

79+ <path

80+ className="third-two"

81+ fillRule="evenodd"

82+ clipRule="evenodd"

83+ d="M185 2C185 0.89543 185.895 0 187 0H215C216.105 0 217 0.895432 217 2V9C217 10.1046 216.105 11 215 11H199C197.895 11 197 11.8954 197 13V17C197 18.1046 196.105 19 195 19H187C185.895 19 185 18.1046 185 17V2ZM187 2V17H195V13C195 10.7909 196.791 9 199 9H215V2H187Z"

84+ />

85+ <path

86+ className="third-three"

87+ fillRule="evenodd"

88+ clipRule="evenodd"

89+ d="M161 30C161 31.1046 161.895 32 163 32H215C216.105 32 217 31.1046 217 30V15C217 13.8954 216.105 13 215 13H201C199.895 13 199 13.8954 199 15V20C199 21.1046 198.105 22 197 22H163C161.895 22 161 22.8954 161 24V30ZM163 30V24H197C199.209 24 201 22.2091 201 20V15H215V30H163Z"

90+ />

91+ </g>

92+ <g>

93+ <path

94+ className="fourth-one"

95+ fillRule="evenodd"

96+ clipRule="evenodd"

97+ d="M235 0C233.895 0 233 0.89543 233 2V4C233 5.10457 233.895 6 235 6H267C268.105 6 269 5.10457 269 4V2C269 0.895431 268.105 0 267 0H235ZM267 2H235V4H267V2Z"

98+ />

99+ <path

100+ className="fourth-two"

101+ fillRule="evenodd"

102+ clipRule="evenodd"

103+ d="M233 11C233 9.89543 233.895 9 235 9H257C258.105 9 259 9.89543 259 11V13C259 14.1046 259.895 15 261 15H269C270.105 15 271 15.8954 271 17V20C271 21.1046 271.895 22 273 22H282C283.105 22 284 22.8954 284 24V30C284 31.1046 283.105 32 282 32H235C233.895 32 233 31.1046 233 30V11ZM235 11H257V13C257 15.2091 258.791 17 261 17H269V20C269 22.2091 270.791 24 273 24H282V30H235V11Z"

104+ />

105+ <g className="fourth-three">

106+ <path

107+ fillRule="evenodd"

108+ clipRule="evenodd"

109+ d="M271 2C271 0.89543 271.895 0 273 0H298C299.105 0 300 0.895431 300 2V17C300 18.1046 299.105 19 298 19H281.588C280.478 19 279.418 18.5386 278.661 17.7261L272.073 10.652C271.383 9.91162 271 8.93752 271 7.92585V2ZM273 2H298V17H281.588C281.033 17 280.503 16.7693 280.125 16.3631L273.536 9.2889C273.192 8.91873 273 8.43168 273 7.92585V2Z"

110+ />

111+ <path

112+ fillRule="evenodd"

113+ clipRule="evenodd"

114+ d="M287 24C287 22.8954 287.895 22 289 22H298C299.105 22 300 22.8954 300 24V30C300 31.1046 299.105 32 298 32H289C287.895 32 287 31.1046 287 30V24ZM289 24H298V30H289V24Z"

115+ />

116+ </g>

117+ </g>

118+ </svg>

119+ );

120+};

src/views/Activate/PointPresenter.tsx+18−7

@@ -10,17 +10,22 @@ const PointPresenter = ({ patp, className }: PointPresenterArgs) => {

1010 return patp ? (

1111 <>

1212 <Box

13− width={128}

14− height={128}

13+ width={256}

14+ height={256}

1515 display="flex"

1616 flexDirection="column"

1717 flexWrap="nowrap"

1818 justifyContent="center"

1919 alignItems="center"

2020 background="white"

21− padding={32}

2221 className={className}>

23− <Box background="black" borderRadius={5} padding={32}>

22+ <Box

23+ background="black"

24+ borderRadius={5}

25+ padding={32}

26+ mb={3}

27+ width={64}

28+ height={64}>

2429 <Sigil

2530 patp={patp}

2631 size={64}

@@ -31,9 +36,15 @@ const PointPresenter = ({ patp, className }: PointPresenterArgs) => {

3136 borderRadius={5}

3237 />

3338 </Box>

34− <Text display="block" className={'mono'}>

35− {patp}

36− </Text>

39+ <Box>

40+ <Text

41+ display="block"

42+ fontFamily={'Source Code Pro'}

43+ fontSize={'18px'}

44+ textAlign={'center'}>

45+ {patp}

46+ </Text>

47+ </Box>

3748 </Box>

3849 </>

3950 ) : null;