d2d22cf · bridge · git.iko.soy

src/style/bridge.scss+7

compare with master

unifiedsplit

@@ -28,3 +28,10 @@ div.copy-button-wide {

28 font-size: 0.75rem;

29 }

30}

31+

32+// Animations for Activate Flow

33+div.danger-box, div.mk-copy {

34+ &.hidden {

35+ opacity: 0;

36+ }

37+}

src/views/Activate/ActivateParagraph.tsx−2

@@ -20,8 +20,6 @@ const ActivateParagraph = ({ copy }: ActivateParagraphProps) => {

20 fontSize={2}

21 lineHeight={'20px'}

22 color={'rgba(0,0,0,0.6)'}

23− mx={3}

24− my={3}

25 textAlign="center"

23 textAlign="center"

26 width={'80%'}>

24 width={'80%'}>

27 {copy}

25 {copy}

src/views/Activate/DangerBox.tsx+4−1

@@ -1,17 +1,20 @@

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

2import React from 'react';

3+import cn from 'classnames';

3import withFadeable from './withFadeable';

4import withFadeable from './withFadeable';

4

5

5interface DangerBoxProps {

6interface DangerBoxProps {

6 children: React.ReactNode | string;

7 children: React.ReactNode | string;

8+ className?: string;

7}

9}

8

10

9−const DangerBox = ({ children }: DangerBoxProps) => {

11+const DangerBox = ({ children, className }: DangerBoxProps) => {

10 return (

12 return (

11 <Box

13 <Box

12 background={'rgb(246,200,196)'}

14 background={'rgb(246,200,196)'}

13 border={'solid 1px rgb(236,81,66)'}

15 border={'solid 1px rgb(236,81,66)'}

14 padding={'15px 45px'}

16 padding={'15px 45px'}

17+ className={cn(['danger-box', className])}

15 borderRadius={'5px'}>

18 borderRadius={'5px'}>

16 <Text color={'black'} fontSize={'16px'} fontFamily="Inter">

19 <Text color={'black'} fontSize={'16px'} fontFamily="Inter">

17 {children}

20 {children}

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

@@ -90,8 +90,7 @@ const MasterKeyConfirm = () => {

90 return (

91 <View centered={true}>

92 <NavHeader>

93− <Box

94− marginBottom={'10px'}>

93+ <Box marginBottom={'10px'}>

95 <MiniBackButton

94 <MiniBackButton

96 hpadding={true}

95 hpadding={true}

97 vpadding={true}

96 vpadding={true}

src/views/Activate/MasterKeyCopy.tsx+4−2

@@ -1,19 +1,21 @@

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

2+import cn from 'classnames';

2import useCopiable from '../../lib/useCopiable';

3import useCopiable from '../../lib/useCopiable';

3import withFadeable from './withFadeable';

4import withFadeable from './withFadeable';

4

5

5interface MasterKeyCopyProps {

6interface MasterKeyCopyProps {

6 text: string;

7 text: string;

8+ className?: string;

7}

9}

8

10

9−const MasterKeyCopy = ({ text }: MasterKeyCopyProps) => {

11+const MasterKeyCopy = ({ text, className }: MasterKeyCopyProps) => {

10 const [doCopy, didCopy] = useCopiable(text);

12 const [doCopy, didCopy] = useCopiable(text);

11 const { color, label, icon } = didCopy

13 const { color, label, icon } = didCopy

12 ? { color: 'rgb(70,156,106)', label: 'Copied', icon: 'Checkmark' }

14 ? { color: 'rgb(70,156,106)', label: 'Copied', icon: 'Checkmark' }

13 : { color: 'rgb(89,167,248)', label: 'Copy', icon: 'Copy' };

15 : { color: 'rgb(89,167,248)', label: 'Copy', icon: 'Copy' };

14

16

15 return (

17 return (

16− <Box onClick={() => doCopy()}>

18+ <Box className={cn(['mk-copy', className])} onClick={() => doCopy()}>

17 <Box

19 <Box

18 display={'flex'}

20 display={'flex'}

19 flexDirection={'row'}

21 flexDirection={'row'}

src/views/Activate/MasterKeyDownload.tsx+11−4

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

25 const {

26 derivedPoint,

27 derivedWallet,

28+ isIn,

28 setGenerated,

29 setGenerated,

29 setIsIn,

30 setIsIn,

30 } = useActivateFlow();

31 } = useActivateFlow();

@@ -115,13 +116,19 @@ const MasterKeyDownload = () => {

115 flexWrap={'nowrap'}

116 flexWrap={'nowrap'}

116 height={'100%'}

117 height={'100%'}

117 justifyContent={'space-evenly'}>

118 justifyContent={'space-evenly'}>

119+ <DangerBox

118− {triggerAnimation && (

120+ overrideFadeIn={triggerAnimation && isIn}

121+ className={!isIn ? 'hidden' : ''}>

119− <DangerBox>Do not share this with anyone else!</DangerBox>

122+ Do not share this with anyone else!

120− )}

123+ </DangerBox>

121 {ticket && (

124 {ticket && (

122 <MasterKeyPresenter ticket={ticket} overrideFadeIn={true} />

125 <MasterKeyPresenter ticket={ticket} overrideFadeIn={true} />

123 )}

126 )}

124− {triggerAnimation && <MasterKeyCopy text={ticket} />}

127+ <MasterKeyCopy

128+ text={ticket}

129+ overrideFadeIn={triggerAnimation && isIn}

130+ className={!isIn ? 'hidden' : ''}

131+ />

125 </Box>

132 </Box>

126 </ActivateView>

133 </ActivateView>

127 <ActivateSteps currentStep={1} totalSteps={4} />

134 <ActivateSteps currentStep={1} totalSteps={4} />