git.iko.soy/bridge
on df0c310 help sign in
bridge/src/views/Activate/MasterKeyPresenter.tsx
63 lines 1.8 kB history raw
1import { Box, Text } from '@tlon/indigo-react';
2import { stripSigPrefix } from 'form/formatters';
3import { useMemo } from 'react';
4import withFadeable from './withFadeable';
6type MasterKeyPresenterArgs = {
7 ticket: string;
8 className?: string;
9};
11const MasterKeyPresenter = ({ ticket, className }: MasterKeyPresenterArgs) => {
12 const ticketSegments = useMemo(() => {
13 return ticket ? stripSigPrefix(ticket).split('-') : null;
14 }, [ticket]);
16 return (
17 <Box
18 display={'flex'}
19 flexDirection={'row'}
20 flexWrap={'nowrap'}
21 width={'80%'}
22 height={'min-content'}
23 justifyContent={'center'}>
24 <Box
25 display={'flex'}
26 flexDirection={'row'}
27 flexWrap={'nowrap'}
28 width={'80%'}
29 height={'min-content'}
30 justifyContent={'space-evenly'}
31 className={className}>
32 {ticketSegments &&
33 ticketSegments.map((segment: string, i: number) => {
34 return (
35 <Box
36 key={i}
37 display={'flex'}
38 flexDirection={'row'}
39 flexWrap={'nowrap'}>
40 <Box
41 background={'rgba(0,0,0,0.05)'}
42 padding={'12px 10px'}
43 fontFamily={'Source Code Pro'}
44 borderRadius={'5px'}
45 border={'solid 1px gray'}>
46 {segment}
47 </Box>
48 {i < ticketSegments.length - 1 ? (
49 <Text key={i} alignSelf="center" color="gray" mx={1}>
50 —
51 </Text>
52 ) : null}
53 </Box>
54 );
55 })}
56 </Box>
57 </Box>
58 );
59};
61export default MasterKeyPresenter;
63export const FadeableMasterKeyPresenter = withFadeable(MasterKeyPresenter);