7c224bc · bridge · git.iko.soy

DEVELOPMENT.md+1−1

compare with master

unifiedsplit

@@ -166,5 +166,5 @@ npm run pilot-l2

166|start %roller-rpc

167

168# If having CORS issues with API requests, try this:

169−> |cors-approve ~~http~3a.~2f.~2f.localhost~3a.3000

169+|cors-approve ~~http~3a.~2f.~2f.localhost~3a.3000

170```

src/style/fadeable.scss−10

@@ -19,13 +19,3 @@

19 transition: opacity 300ms;

20 transition-timing-function: ease-in;

21}

22−

23−.fadeable-appear {

24− opacity: 0;

25−}

26−

27−.fadeable-appear-active {

28− opacity: 1;

29− transition: opacity 300ms;

30− transition-timing-function: ease-in;

31−}

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

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

30 useFadeIn();

31

32 return (

33− <View centered={true} inset>

33+ <View centered={true}>

34 <ActivateView

35 header={<ActivateHeader content={'Welcome. This is your Urbit.'} />}

36 footer={<ActivateCodeForm afterSubmit={goToMasterKey} />}>

src/views/Activate/MasterKey.tsx+3

@@ -1,5 +1,6 @@

1import cn from 'classnames';

2import 'style/master-key.scss';

3+import withFadeable from './withFadeable';

3

4

4export const MasterKey = ({ paused = false }) => {

5export const MasterKey = ({ paused = false }) => {

5 return (

6 return (

@@ -117,3 +118,5 @@ export const MasterKey = ({ paused = false }) => {

117 </svg>

118 </svg>

118 );

119 );

119};

120};

121+

122+export const FadeableMasterKey = withFadeable(MasterKey);

src/views/Activate/MasterKeyConfirm.tsx+20−1

@@ -20,6 +20,8 @@ import FormError from 'form/FormError';

20import useFadeIn from './useFadeIn';

21import { HiddenInput, TicketSegmentInput } from 'form/Inputs';

22import View from 'components/View';

23+import NavHeader from 'components/NavHeader';

24+import { MiniBackButton } from 'components/MiniBackButton';

23

25

24const MasterKeyConfirm = () => {

26const MasterKeyConfirm = () => {

25 const { derivedWallet, setIsIn } = useActivateFlow();

27 const { derivedWallet, setIsIn } = useActivateFlow();

@@ -64,6 +66,12 @@ const MasterKeyConfirm = () => {

64 push(names.TRANSFER);

66 push(names.TRANSFER);

65 }, [names.TRANSFER, push, setIsIn]);

67 }, [names.TRANSFER, push, setIsIn]);

66

68

69+ const goBack = useCallback(async () => {

70+ setIsIn(false);

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

72+ push(names.DOWNLOAD);

73+ }, [names.DOWNLOAD, push, setIsIn]);

74+

67 const header = useMemo(() => {

75 const header = useMemo(() => {

68 return (

76 return (

69 <Box>

77 <Box>

@@ -80,7 +88,18 @@ const MasterKeyConfirm = () => {

80 useFadeIn();

88 useFadeIn();

81

89

82 return (

90 return (

83− <View centered={true} inset>

91+ <View centered={true}>

92+ <NavHeader>

93+ <Box

94+ marginBottom={'10px'}>

95+ <MiniBackButton

96+ hpadding={true}

97+ vpadding={true}

98+ onClick={goBack}

99+ className=""

100+ />

101+ </Box>

102+ </NavHeader>

84 <ActivateView

103 <ActivateView

85 header={header}

104 header={header}

86 gridRows={'20% 80%'}

105 gridRows={'20% 80%'}

src/views/Activate/MasterKeyDownload.tsx+1−1

@@ -104,7 +104,7 @@ const MasterKeyDownload = () => {

104 }, [delayedReveal, setIsIn]);

105

106 return (

107− <View centered={true} inset>

107+ <View centered={true}>

108 <ActivateView

109 header={triggerAnimation && header}

110 footer={triggerAnimation && footer}>

src/views/Activate/MasterKeyReveal.tsx+5−3

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';

2

3import ActivateView from './ActivateView';

4import { FadeableActivateHeader as ActivateHeader } from './ActivateHeader';

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

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

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

7import { FadeableActivateParagraph as ActivateParagraph } from './ActivateParagraph';

8import { FadeableActivateSteps as ActivateSteps } from './ActivateSteps';

@@ -17,6 +17,7 @@ const MasterKeyReveal = () => {

17 const { setIsIn } = useActivateFlow();

18 const { push, names } = useLocalRouter();

19 const [triggerAnimation, setTriggerAnimation] = useState<boolean>(false);

20+ const [fadeOutKey, setFadeOutKey] = useState<boolean>(false);

20

21

21 const goToDownload = useCallback(() => {

22 const goToDownload = useCallback(() => {

22 push(names.DOWNLOAD);

23 push(names.DOWNLOAD);

@@ -25,6 +26,7 @@ const MasterKeyReveal = () => {

25 const onRevealClick = useCallback(async () => {

26 const onRevealClick = useCallback(async () => {

26 setTriggerAnimation(false);

27 setTriggerAnimation(false);

27 setIsIn(false);

28 setIsIn(false);

29+ setFadeOutKey(true);

28 await timeout(DEFAULT_FADE_TIMEOUT); // Pause for UI fade animation

30 await timeout(DEFAULT_FADE_TIMEOUT); // Pause for UI fade animation

29 goToDownload();

31 goToDownload();

30 }, [goToDownload, setIsIn]);

32 }, [goToDownload, setIsIn]);

@@ -72,7 +74,7 @@ const MasterKeyReveal = () => {

72 }, [delayedFadeIn, setIsIn]);

74 }, [delayedFadeIn, setIsIn]);

73

75

74 return (

76 return (

75− <View centered={true} inset>

77+ <View centered={true}>

76 <ActivateView

78 <ActivateView

77 header={triggerAnimation && header}

79 header={triggerAnimation && header}

78 footer={triggerAnimation && footer}>

80 footer={triggerAnimation && footer}>

@@ -90,7 +92,7 @@ const MasterKeyReveal = () => {

90 width={'80%'}

92 width={'80%'}

91 height={'min-content'}

93 height={'min-content'}

92 justifyContent={'center'}>

94 justifyContent={'center'}>

93− <MasterKey />

95+ <MasterKey overrideFadeIn={!fadeOutKey} />

94 </Box>

96 </Box>

95 </Box>

97 </Box>

96 </ActivateView>

98 </ActivateView>

src/views/Activate/MasterKeyTransfer.tsx+1−1

@@ -123,7 +123,7 @@ const MasterKeyTransfer = () => {

123 }, [error]);

124

125 return (

126− <View centered={true} inset>

126+ <View centered={true}>

127 <ActivateView header={header} footer={footer}>

128 <Box

129 alignItems={'center'}