@@ -1,32 +1,35 @@
11import React, { useCallback, useEffect, useMemo, useState } from 'react';
22
33import ActivateView from './ActivateView';
4−import ActivateHeader from './ActivateHeader';
4+import { FadeableActivateHeader as ActivateHeader } from './ActivateHeader';
55import { MasterKey } from './MasterKey';
6−import { Box, Button, Icon } from '@tlon/indigo-react';
7−import ActivateParagraph from './ActivateParagraph';
8−import { ActivateSteps } from './ActivateSteps';
6+import { Box, Icon } from '@tlon/indigo-react';
7+import { FadeableActivateParagraph as ActivateParagraph } from './ActivateParagraph';
8+import { FadeableActivateSteps as ActivateSteps } from './ActivateSteps';
99import { useActivateFlow } from './ActivateFlow';
1010import { timeout } from 'lib/timeout';
1111import { useLocalRouter } from 'lib/LocalRouter';
12+import { FadeableActivateButton as ActivateButton } from './ActivateButton';
1213
1314const MasterKeyReveal = () => {
14− const { isFaded, setIsFaded } = useActivateFlow();
15+ const { isIn, setIsIn } = useActivateFlow();
1516 const { push, names } = useLocalRouter();
17+ const [showMasterKey, setShowMasterKey] = useState<boolean>(false);
18+ const [triggerAnimation, setTriggerAnimation] = useState<boolean>(false);
1619
1720 const goToDownload = useCallback(() => {
1821 push(names.DOWNLOAD);
1922 }, [names.DOWNLOAD, push]);
2023
2124 const onRevealClick = useCallback(async () => {
22− setIsFaded(false);
25+ setShowMasterKey(true);
2326 await timeout(500); // Pause for UI fade animation
2427 goToDownload();
25− }, [goToDownload, setIsFaded]);
28+ }, [goToDownload]);
2629
2730 const header = useMemo(() => {
28− return (
29− <Box className={isFaded ? 'faded-in' : 'faded-out'}>
31+ return triggerAnimation ? (
32+ <Box>
3033 <ActivateHeader copy={'Here is your Master Key.'} />
3134 <ActivateParagraph
3235 copy={
@@ -34,49 +37,37 @@ const MasterKeyReveal = () => {
3437 }
3538 />
3639 </Box>
37− );
38− }, [isFaded]);
40+ ) : null;
41+ }, [triggerAnimation]);
3942
4043 const footer = useMemo(() => {
41− return (
42− <Box
43− display="flex"
44− flexDirection="column"
45− flexWrap="nowrap"
46− height={'100%'}
47− className={isFaded ? 'faded-in' : 'faded-out'}
48− justifyContent="flex-end">
49− <Button
50− onClick={onRevealClick}
51− backgroundColor="black"
44+ return triggerAnimation ? (
45+ <ActivateButton onClick={onRevealClick}>
46+ <Icon
47+ display="inline-block"
48+ icon="Visible"
49+ size="18px"
5250 color={'white'}
53− padding={'16px'}
54− fontFamily="Inter"
55− height={'50px'}
56− fontWeight={'400'}
57− fontSize={'18px'}>
58− <Icon
59− display="inline-block"
60− icon="Visible"
61− size="18px"
62− color={'white'}
63− />
64− Reveal
65− </Button>
66− </Box>
67− );
68− }, [isFaded, onRevealClick]);
51+ />
52+ Reveal
53+ </ActivateButton>
54+ ) : null;
55+ }, [onRevealClick, triggerAnimation]);
6956
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]);
57+ const delayedFadeIn = useCallback(async () => {
58+ setTimeout(() => {
59+ setTriggerAnimation(true);
60+ setIsIn(true);
61+ }, 1200);
62+ }, [setIsIn]);
7563
7664 useEffect(() => {
77− // Fade in content
78− onViewTransition();
79− }, [onViewTransition]);
65+ delayedFadeIn();
66+
67+ return () => {
68+ setIsIn(false);
69+ };
70+ }, [delayedFadeIn, setIsIn]);
8071
8172 return (
8273 <>
@@ -95,15 +86,11 @@ const MasterKeyReveal = () => {
9586 width={'80%'}
9687 height={'min-content'}
9788 justifyContent={'center'}>
98− <MasterKey paused={true} />
89+ <MasterKey />
9990 </Box>
10091 </Box>
10192 </ActivateView>
102− <ActivateSteps
103− currentStep={0}
104− totalSteps={4}
105− className={isFaded ? 'faded-in' : 'faded-out'}
106− />
93+ {triggerAnimation && <ActivateSteps currentStep={0} totalSteps={4} />}
10794 </>
10895 );
10996};