3509775 · bridge · git.iko.soy

git.iko.soy/bridge

WIP: MasterKey reveal, presentation

- starting on download view

commit350977531c237c157cd7e8eb2c1ad36be98fdf18 authortomholford <tomholford@users.noreply.github.com> dateTue 7 Sep 2021, 09:48 (5 years ago) parentbe3db25

6 files changed+194−31

compare with master

unifiedsplit

src/form/formatters.js+10 src/views/Activate/ActivateCode.tsx+2−1 src/views/Activate/ActivateMasterKey.tsx+18−24 src/views/Activate/MasterKeyDownload.tsx+89 src/views/Activate/MasterKeyPresenter.tsx+51 src/views/Activate/MasterKeyReveal.tsx+24−6

src/form/formatters.js+10

@@ -86,3 +86,13 @@ export const ensureSigPrefix = s => {

8686

8787 return s.indexOf(SIG_PREFIX) !== 0 ? `${SIG_PREFIX}${s}` : s;

8888};

89+

90+export const stripSigPrefix = s => {

91+ if (!s) {

92+ return s;

93+ }

94+

95+ return s.toLowerCase().indexOf(SIG_PREFIX) === 0

96+ ? s.slice(SIG_PREFIX.length)

97+ : s;

98+};

src/views/Activate/ActivateCode.tsx+2−1

@@ -134,7 +134,7 @@ export default function ActivateCode() {

134134 async values => {

135135 setIsGenerating(true);

136136 setIsFaded(true);

137− await timeout(1400); // Allow the Master Key animation to run for one cycle

137+ await timeout(1900); // Allow the Master Key animation to run for one cycle

138138

139139 // Derive wallet

140140 // TODO: fallback logic to first use implied values if present, otherwise form values?

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

191191 setDerivedPoint,

192192 setDerivedWallet,

193193 setInviteWallet,

194+ setIsFaded,

194195 ]

195196 );

196197

src/views/Activate/ActivateMasterKey.tsx+18−24

@@ -1,17 +1,13 @@

11import React, { useMemo } from 'react';

2−import cn from 'classnames';

3−import { Grid } from 'indigo-react';

53import { LocalRouterProvider, useLocalRouter } from 'lib/LocalRouter';

75import View from 'components/View';

8−import Passport from 'components/Passport';

107import { useActivateFlow } from './ActivateFlow';

11−import useBreakpoints from 'lib/useBreakpoints';

128import useRouter from 'lib/useRouter';

139

14−import PassportDownload from './PassportDownload';

10+import MasterKeyDownload from './MasterKeyDownload';

1511import PassportVerify from './PassportVerify';

1612import PassportTransfer from './PassportTransfer';

1713import { walletFromMnemonic } from 'lib/wallet';

@@ -28,12 +24,12 @@ const NAMES = {

2824

2925const VIEWS = {

3026 [NAMES.REVEAL]: MasterKeyReveal,

31− [NAMES.DOWNLOAD]: PassportDownload,

27+ [NAMES.DOWNLOAD]: MasterKeyDownload,

3228 [NAMES.VERIFY]: PassportVerify,

3329 [NAMES.TRANSFER]: PassportTransfer,

3430};

3531

36−export default function ActivatePassport() {

32+export default function ActivateMasterKey() {

3733 const { derivedPoint, generated, derivedWallet } = useActivateFlow();

3834 // pull the reset function out of the 'activate' router

3935 const { reset: resetActivateRouter } = useLocalRouter();

@@ -43,24 +39,22 @@ export default function ActivatePassport() {

4339 initialRoutes: [{ key: NAMES.REVEAL }],

4440 });

4541

46− const gap = useBreakpoints([4, 4, 7]);

47− const marginTop = useBreakpoints([false, false, 8]);

48−

42+ // TODO

4943 // addresses are not derived until we set[Urbit]Wallet(), so do that inline

50− const address = useMemo(

51− () =>

52− derivedWallet

53− .chain(wallet =>

54− walletFromMnemonic(

55− wallet.ownership.seed,

56− DEFAULT_HD_PATH,

57− wallet.meta.passphrase

58− )

59− )

60− .map(wallet => publicToAddress(wallet.publicKey)),

61− [derivedWallet]

62− );

63− //~hobbyn-mismur-fonrux-datber

44+ // const address = useMemo(

45+ // () =>

46+ // derivedWallet

47+ // .chain(wallet =>

48+ // walletFromMnemonic(

49+ // wallet.ownership.seed,

50+ // DEFAULT_HD_PATH,

51+ // wallet.meta.passphrase

52+ // )

53+ // )

54+ // .map(wallet => publicToAddress(wallet.publicKey)),

55+ // [derivedWallet]

56+ // );

57+

6458 return (

6559 <View inset>

6660 <LocalRouterProvider value={router}>

src/views/Activate/MasterKeyDownload.tsxnew file+89

@@ -0,0 +1,89 @@

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

3+import ActivateView from './ActivateView';

4+import ActivateHeader from './ActivateHeader';

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

6+import { Box, Button, Icon } from '@tlon/indigo-react';

7+import ActivateParagraph from './ActivateParagraph';

8+import { ActivateSteps } from './ActivateSteps';

9+import { useActivateFlow } from './ActivateFlow';

10+import { timeout } from 'lib/timeout';

11+import MasterKeyPresenter from './MasterKeyPresenter';

12+

13+const MasterKeyDownload = () => {

14+ const { isFaded, setIsFaded } = useActivateFlow();

15+

16+ const header = useMemo(() => {

17+ return (

18+ <Box className={isFaded ? 'faded-in' : 'faded-out'}>

19+ <ActivateHeader copy={'Backup your Master Key.'} />

20+ <ActivateParagraph

21+ copy={

22+ 'Download your backup and store it somewhere safe, e.g. your security deposit box or password manager.'

23+ }

24+ />

25+ </Box>

26+ );

27+ }, [isFaded]);

28+

29+ const footer = useMemo(() => {

30+ return (

31+ <Box

32+ display="flex"

33+ flexDirection="column"

34+ flexWrap="nowrap"

35+ height={'100%'}

36+ className={isFaded ? 'faded-in' : 'faded-out'}

37+ justifyContent="flex-end">

38+ <Button

39+ onClick={() => console.log('reveal')}

40+ backgroundColor="black"

41+ color={'white'}

42+ padding={'16px'}

43+ fontFamily="Inter"

44+ height={'50px'}

45+ fontWeight={'400'}

46+ fontSize={'18px'}>

47+ Download Backup

48+ </Button>

49+ </Box>

50+ );

51+ }, [isFaded]);

52+

53+ const onViewTransition = useCallback(async () => {

54+ setIsFaded(true);

55+ await timeout(500); // Pause for UI fade animation

56+ }, [setIsFaded]);

57+

58+ useEffect(() => {

59+ // Fade in content

60+ onViewTransition();

61+ }, [onViewTransition]);

62+

63+ return (

64+ <>

65+ <ActivateView header={header} footer={footer}>

66+ <Box

67+ alignItems={'center'}

68+ display={'flex'}

69+ flexDirection={'column'}

70+ flexWrap={'nowrap'}

71+ height={'100%'}

72+ justifyContent={'center'}>

73+ <Box

74+ display={'flex'}

75+ flexDirection={'row'}

76+ flexWrap={'nowrap'}

77+ width={'80%'}

78+ height={'min-content'}

79+ justifyContent={'center'}>

80+ <MasterKeyPresenter />

81+ </Box>

82+ </Box>

83+ </ActivateView>

84+ <ActivateSteps currentStep={1} totalSteps={4} />

85+ </>

86+ );

87+};

88+

89+export default MasterKeyDownload;

src/views/Activate/MasterKeyPresenter.tsxnew file+51

@@ -0,0 +1,51 @@

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

2+import { stripSigPrefix } from 'form/formatters';

3+import useImpliedTicket from 'lib/useImpliedTicket';

4+import { useMemo } from 'react';

6+type MasterKeyPresenterArgs = {

7+ className?: string;

8+};

10+const MasterKeyPresenter = ({ className }: MasterKeyPresenterArgs) => {

11+ // TODO: use actual MK ticket :)

12+ const { impliedTicket } = useImpliedTicket();

13+

14+ const ticketSegments = useMemo(() => {

15+ return impliedTicket ? stripSigPrefix(impliedTicket).split('-') : null;

16+ }, [impliedTicket]);

17+

18+ return (

19+ <Box

20+ display={'flex'}

21+ flexDirection={'row'}

22+ flexWrap={'nowrap'}

23+ width={'80%'}

24+ height={'min-content'}

25+ justifyContent={'space-evenly'}

26+ className={className}>

27+ {ticketSegments &&

28+ ticketSegments.map((segment: string, i: number) => {

29+ return (

30+ <>

31+ <Box

32+ background={'rgba(0,0,0,0.05)'}

33+ padding={'12px 10px'}

34+ fontFamily={'Source Code Pro'}

35+ borderRadius={'5px'}

36+ border={'solid 1px gray'}>

37+ {segment}

38+ </Box>

39+ {i < ticketSegments.length - 1 ? (

40+ <Text alignSelf="center" color="gray" mx={1}>

41+ —

42+ </Text>

43+ ) : null}

44+ </>

45+ );

46+ })}

47+ </Box>

48+ );

49+};

50+

51+export default MasterKeyPresenter;

src/views/Activate/MasterKeyReveal.tsx+24−6

@@ -1,4 +1,4 @@

1−import React, { useEffect, useMemo, useState } from 'react';

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

33import ActivateView from './ActivateView';

44import ActivateHeader from './ActivateHeader';

@@ -7,9 +7,22 @@ import { Box, Button, Icon } from '@tlon/indigo-react';

77import ActivateParagraph from './ActivateParagraph';

88import { ActivateSteps } from './ActivateSteps';

99import { useActivateFlow } from './ActivateFlow';

10+import { timeout } from 'lib/timeout';

11+import { useLocalRouter } from 'lib/LocalRouter';

1012

1113const MasterKeyReveal = () => {

1214 const { isFaded, setIsFaded } = useActivateFlow();

15+ const { push, names } = useLocalRouter();

16+

17+ const goToDownload = useCallback(() => {

18+ push(names.DOWNLOAD);

19+ }, [names.DOWNLOAD, push]);

20+

21+ const onRevealClick = useCallback(async () => {

22+ setIsFaded(false);

23+ await timeout(500); // Pause for UI fade animation

24+ goToDownload();

25+ }, [goToDownload, setIsFaded]);

1326

1427 const header = useMemo(() => {

1528 return (

@@ -34,7 +47,7 @@ const MasterKeyReveal = () => {

3447 className={isFaded ? 'faded-in' : 'faded-out'}

3548 justifyContent="flex-end">

3649 <Button

37− onClick={() => console.log('reveal')}

50+ onClick={onRevealClick}

3851 backgroundColor="black"

3952 color={'white'}

4053 padding={'16px'}

@@ -52,13 +65,18 @@ const MasterKeyReveal = () => {

5265 </Button>

5366 </Box>

5467 );

55− }, [isFaded]);

68+ }, [isFaded, onRevealClick]);

69+

70+ const onViewTransition = useCallback(async () => {

71+ await timeout(500); // Pause for UI fade animation

72+ setIsFaded(true);

73+ await timeout(500); // Pause for UI fade animation

74+ }, [setIsFaded]);

5675

5776 useEffect(() => {

5877 // Fade in content

59− setIsFaded(true);

60− // eslint-disable-next-line react-hooks/exhaustive-deps

61− }, []);

78+ onViewTransition();

79+ }, [onViewTransition]);

6280

6381 return (

6482 <>