Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | import { Box, Flex, Text } from "rimble-ui"; import { colors } from "../../themes"; import { CopyToClipboard } from "./CopyToClipboard"; import { DidMethodIcon } from "./DidMethodIcon"; import { DidTruncate } from "./DidTruncate"; import { H4 } from "../layouts"; export interface DidViewProps { copy?: boolean; did: string; maxCharCount?: number; size?: string; dontTruncate?: boolean; } export const DidView: React.FunctionComponent<DidViewProps> = (props) => { const { copy, did, size } = props; const iconSize = size === "large" ? "32px" : "24px"; const iconAlign = size === "large" ? "flex-start" : "center"; const copyIconSize = size === "large" ? "20px" : "16px"; return ( <Flex alignItems="center" pl="40px" position="relative" width="100%"> <Flex alignItems="center" justifyContent={iconAlign} left={0} position="absolute" width="40px"> <DidMethodIcon did={did} size={iconSize} /> </Flex> {size === "large" ? ( <H4 m={0} maxWidth={copy ? "calc(100% - 30px)" : "100%"} title={did}> <DidTruncate did={did} /> </H4> ) : ( <Text color={colors.midGray} fontSize={2} fontWeight={2} maxWidth={copy ? "calc(100% - 30px)" : "100%"} title={did} > <DidTruncate did={did} /> </Text> )} {copy && ( <Box ml={2}> <CopyToClipboard color={colors.primary.base} hoverTitle="Copy DID" size={copyIconSize} text={did} /> </Box> )} </Flex> ); }; |