6015de2 · bridge · git.iko.soy

git.iko.soy/bridge

ux: Master Key Download animations

- also Copy button, warning informatoin

commit6015de2491764f0f37995572a350a45a7b369997 authortomholford <tomholford@users.noreply.github.com> dateThu 9 Sep 2021, 15:07 (5 years ago) parenteba9d63

8 files changed+114−44

compare with master

unifiedsplit

src/components/copiable/CopyButton.js+1−1 src/lib/useCopiable.js → src/lib/useCopiable.ts+5−5 src/views/Activate/ActivateHeader.tsx+1−1 src/views/Activate/ActivateParagraph.tsx+2 src/views/Activate/DangerBox.tsx+25 src/views/Activate/MasterKeyCopy.tsx+35 src/views/Activate/MasterKeyDownload.tsx+13−17 src/views/Activate/MasterKeyPresenter.tsx+32−20

src/components/copiable/CopyButton.js+1−1

@@ -10,7 +10,7 @@ export default function CopyButton({

1010 as: As = LinkButton,

1111 text,

1212 children = renderDefaultCopyText,

13− className,

13+ className = '',

1414 ...rest

1515}) {

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

src/lib/useCopiable.js → src/lib/useCopiable.tsrenamed+5−5

@@ -3,19 +3,19 @@ import copy from 'copy-to-clipboard';

44const COPY_DELAY = 2 * 1000; // ms

6−export default function useCopiable(text) {

7− const [didCopy, setDidCopy] = useState(false);

6+export default function useCopiable(text: string): [doCopy: VoidFunction, didCopy: boolean] {

7+ const [didCopy, setDidCopy] = useState<boolean>(false);

99 // what we really want here is a useDebouncedCallback from use-debounced

1010 // but that's a relatively large dep for a single simple usage so ¯\_(ツ)_/¯

11− const listener = useRef(); // <NodeJS.Listener>

12− useEffect(() => () => clearTimeout(listener.current), []);

11+ const listener = useRef<ReturnType<typeof window.setTimeout>>(); // <NodeJS.Listener>

12+ useEffect(() => () => clearTimeout(Number(listener.current)), []);

1313

1414 const doCopy = useCallback(() => {

1515 copy(text);

1616 setDidCopy(true);

1717

18− clearTimeout(listener.current);

18+ clearTimeout(Number(listener.current));

1919 listener.current = setTimeout(() => setDidCopy(false), COPY_DELAY);

2020 }, [text]);

2121

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

@@ -14,7 +14,7 @@ const ActivateHeader = ({ copy }: ActivateHeaderProps) => {

1414 display="block"

1515 fontFamily="Inter"

1616 fontSize={3}

17− fontWeight="medium"

17+ fontWeight={600}

1818 mx={3}

1919 my={3}

2020 textAlign="center">

src/views/Activate/ActivateParagraph.tsx+2

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

1818 display="block"

1919 fontFamily="Inter"

2020 fontSize={2}

21+ lineHeight={'20px'}

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

2123 mx={3}

2224 my={3}

2325 textAlign="center"

src/views/Activate/DangerBox.tsxnew file+25

@@ -0,0 +1,25 @@

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

2+import React from 'react';

3+import withFadeable from './withFadeable';

5+interface DangerBoxProps {

6+ children: React.ReactNode | string;

7+}

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

10+ return (

11+ <Box

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

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

14+ padding={'15px 45px'}

15+ borderRadius={'5px'}>

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

17+ {children}

18+ </Text>

19+ </Box>

20+ );

21+};

22+

23+export default DangerBox;

24+

25+export const FadeableDangerBox = withFadeable(DangerBox);

src/views/Activate/MasterKeyCopy.tsxnew file+35

@@ -0,0 +1,35 @@

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

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

3+import withFadeable from './withFadeable';

5+interface MasterKeyCopyProps {

6+ text: string;

7+}

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

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

11+ const { color, label, icon } = didCopy

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

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

14+

15+ return (

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

17+ <Box

18+ display={'flex'}

19+ flexDirection={'row'}

20+ flexWrap={'nowrap'}

21+ alignItems={'center'}

22+ cursor={'pointer'}

23+ padding={'10px 15px'}>

24+ <Icon color={color} icon={icon} size="18px" mx="2px" />

25+ <Text color={color} fontSize={'18px'} mx="2px" fontFamily={'Inter'}>

26+ {label}

27+ </Text>

28+ </Box>

29+ </Box>

30+ );

31+};

32+

33+export default MasterKeyCopy;

34+

35+export const FadeableMasterKeyCopy = withFadeable(MasterKeyCopy);

src/views/Activate/MasterKeyDownload.tsx+13−17

@@ -1,13 +1,15 @@

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

3−import ActivateView from './ActivateView';

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

5−import { Box } from '@tlon/indigo-react';

6−import ActivateParagraph from './ActivateParagraph';

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

8−import { FadeableMasterKeyPresenter as MasterKeyPresenter } from './MasterKeyPresenter';

4+import { Box } from '@tlon/indigo-react';

95import { FadeableActivateButton as ActivateButton } from './ActivateButton';

6+import { FadeableActivateHeader as ActivateHeader } from './ActivateHeader';

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

8+import { FadeableDangerBox as DangerBox } from './DangerBox';

9+import { FadeableMasterKeyCopy as MasterKeyCopy } from './MasterKeyCopy';

10+import { FadeableMasterKeyPresenter as MasterKeyPresenter } from './MasterKeyPresenter';

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

12+import ActivateView from './ActivateView';

1113

1214const MasterKeyDownload = () => {

1315 const { setIsIn } = useActivateFlow();

@@ -58,18 +60,12 @@ const MasterKeyDownload = () => {

5860 flexDirection={'column'}

5961 flexWrap={'nowrap'}

6062 height={'100%'}

61− justifyContent={'center'}>

62− {/* AlertBox */}

63− <Box

64− display={'flex'}

65− flexDirection={'row'}

66− flexWrap={'nowrap'}

67− width={'80%'}

68− height={'min-content'}

69− justifyContent={'center'}>

70− <MasterKeyPresenter fadeIn={true} />

71− </Box>

72− {/* <CopyButton text={'test'} /> */}

63+ justifyContent={'space-evenly'}>

64+ {triggerAnimation && (

65+ <DangerBox>Do not share this with anyone else!</DangerBox>

66+ )}

67+ <MasterKeyPresenter fadeIn={true} />

68+ {triggerAnimation && <MasterKeyCopy text={'test'} />}

7369 </Box>

7470 </ActivateView>

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

src/views/Activate/MasterKeyPresenter.tsx+32−20

@@ -23,28 +23,40 @@ const MasterKeyPresenter = ({ className }: MasterKeyPresenterArgs) => {

2323 flexWrap={'nowrap'}

2424 width={'80%'}

2525 height={'min-content'}

26− justifyContent={'space-evenly'}

27− className={className}>

28− {ticketSegments &&

29− ticketSegments.map((segment: string, i: number) => {

30− return (

31− <>

26+ justifyContent={'center'}>

27+ <Box

28+ display={'flex'}

29+ flexDirection={'row'}

30+ flexWrap={'nowrap'}

31+ width={'80%'}

32+ height={'min-content'}

33+ justifyContent={'space-evenly'}

34+ className={className}>

35+ {ticketSegments &&

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

37+ return (

3238 <Box

33− background={'rgba(0,0,0,0.05)'}

34− padding={'12px 10px'}

35− fontFamily={'Source Code Pro'}

36− borderRadius={'5px'}

37− border={'solid 1px gray'}>

38− {segment}

39+ key={i}

40+ display={'flex'}

41+ flexDirection={'row'}

42+ flexWrap={'nowrap'}>

43+ <Box

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

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

46+ fontFamily={'Source Code Pro'}

47+ borderRadius={'5px'}

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

49+ {segment}

50+ </Box>

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

52+ <Text key={i} alignSelf="center" color="gray" mx={1}>

53+ —

54+ </Text>

55+ ) : null}

3956 </Box>

40− {i < ticketSegments.length - 1 ? (

41− <Text key={i} alignSelf="center" color="gray" mx={1}>

42− —

43− </Text>

44− ) : null}

45− </>

46− );

47− })}

57+ );

58+ })}

59+ </Box>

4860 </Box>

4961 );

5062};