git.iko.soy/bridge
on master help sign in
activate-ux: skip fade in when going back in flow
e07ab57tomholford
src/views/Activate/MasterKeyConfirm.tsx+1−1
compare with master
unifiedsplit
@@ -69,7 +69,7 @@ const MasterKeyConfirm = () => {
69 const goBack = useCallback(async () => {
69 const goBack = useCallback(async () => {
70 setIsIn(false);
70 setIsIn(false);
71 await timeout(DEFAULT_FADE_TIMEOUT); // Pause for UI fade animation
71 await timeout(DEFAULT_FADE_TIMEOUT); // Pause for UI fade animation
72− push(names.DOWNLOAD);
72+ push(names.DOWNLOAD, { skipAnimationDelay: true });
73 }, [names.DOWNLOAD, push, setIsIn]);
73 }, [names.DOWNLOAD, push, setIsIn]);
74
74
75 const header = useMemo(() => {
75 const header = useMemo(() => {
src/views/Activate/MasterKeyDownload.tsx+19−7
@@ -29,7 +29,7 @@ const MasterKeyDownload = () => {
29 setGenerated,
29 setGenerated,
30 setIsIn,
30 setIsIn,
31 } = useActivateFlow();
31 } = useActivateFlow();
32− const { push, names } = useLocalRouter();
32+ const { data, push, names } = useLocalRouter();
33 const point = need.point(derivedPoint);
33 const point = need.point(derivedPoint);
34 const wallet = need.wallet(derivedWallet);
34 const wallet = need.wallet(derivedWallet);
35 const ticket = wallet.ticket;
35 const ticket = wallet.ticket;
@@ -37,6 +37,10 @@ const MasterKeyDownload = () => {
37 const [paper, setPaper] = useState(Nothing());
37 const [paper, setPaper] = useState(Nothing());
38 const [triggerAnimation, setTriggerAnimation] = useState<boolean>(false);
38 const [triggerAnimation, setTriggerAnimation] = useState<boolean>(false);
39
39
40+ const skipAnimationDelay = useMemo(() => {
41+ return data?.skipAnimationDelay ? true : false;
42+ }, [data]);
43+
40 const pointAsString = derivedPoint.matchWith({
44 const pointAsString = derivedPoint.matchWith({
41 Nothing: () => '',
45 Nothing: () => '',
42 Just: p => p.value.toFixed(),
46 Just: p => p.value.toFixed(),
@@ -89,20 +93,28 @@ const MasterKeyDownload = () => {
89 );
93 );
90 }, [onDownloadClick]);
94 }, [onDownloadClick]);
91
95
96+ const fadeIn = useCallback(() => {
97+ setTriggerAnimation(true);
98+ setIsIn(true);
99+ }, [setIsIn]);
100+
92− const delayedReveal = useCallback(async () => {
101+ const delayedFadeIn = useCallback(async () => {
93 setTimeout(() => {
102 setTimeout(() => {
94− setTriggerAnimation(true);
103+ fadeIn();
95− setIsIn(true);
96 }, MASTER_KEY_DURATION);
104 }, MASTER_KEY_DURATION);
97− }, [setIsIn]);
105+ }, [fadeIn]);
98
106
99 useEffect(() => {
107 useEffect(() => {
100− delayedReveal();
108+ if (skipAnimationDelay) {
109+ fadeIn();
110+ } else {
111+ delayedFadeIn();
112+ }
101
113
102 return () => {
114 return () => {
103 setIsIn(false);
115 setIsIn(false);
104 };
116 };
105− }, [delayedReveal, setIsIn]);
117+ }, [delayedFadeIn, fadeIn, setIsIn, skipAnimationDelay]);
106
118
107 return (
119 return (
108 <View centered={true}>
120 <View centered={true}>