All files / src/components/elements DidView.tsx

0% Statements 0/6
0% Branches 0/14
0% Functions 0/1
0% Lines 0/6

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>
  );
};