All files / src/components/elements DidByDomain.tsx

0% Statements 0/5
0% Branches 0/8
0% Functions 0/2
0% Lines 0/5

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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67                                                                                                                                     
import { OpenInNew, Sms } from "@rimble/icons";
import { Box, Flex, Text, Tooltip } from "rimble-ui";
import { DidView, DomainImage } from "./";
import { H5 } from "../layouts";
import { colors } from "../../themes";
 
export interface DidByDomainProps {
  didDocs: any[];
  didCopy?: boolean;
  domain: string;
  externalLink?: boolean;
  linkDomain?: string;
  name?: string;
}
 
export const DidByDomain: React.FunctionComponent<DidByDomainProps> = (props) => {
  const { didDocs, didCopy, domain, externalLink, linkDomain, name } = props;
 
  return (
    <Box width="100%">
      <Box position="relative" pb={2} pl="50px" pr={3} pt={3}>
        <Box height="32px" width="32px" position="absolute" left="12px" top="10px">
          <DomainImage domain={domain} size="32px" />
        </Box>
        <Box>
          {linkDomain ? (
            <>
              {externalLink ? (
                <a href={linkDomain} style={{ textDecoration: "none" }} target="_blank" title="View on Serto Search">
                  <Flex alignItems="center">
                    <H5 color={colors.primary.base} m={0} mr={1}>
                      {domain}
                    </H5>
                    <OpenInNew color={colors.primary.base} size="16px" />
                  </Flex>
                </a>
              ) : (
                <a href={linkDomain} style={{ textDecoration: "none" }}>
                  <H5 color={colors.primary.base} m={0}>
                    {domain}
                  </H5>
                </a>
              )}
            </>
          ) : (
            <H5 m={0}>{domain}</H5>
          )}
          {name && <Text>{name}</Text>}
        </Box>
      </Box>
      {didDocs.map((didDoc, i) => {
        const parsedDidDoc = JSON.parse(didDoc);
        return (
          <Flex alignItems="center" borderTop={2} justifyContent="space-between" key={i} ml="50px" pr={3} py={3}>
            <DidView did={parsedDidDoc.id} copy={didCopy} dontTruncate={true} />
            {parsedDidDoc.service?.length > 0 && (
              <Tooltip message="You can send and receive secure messages with this DID." placement="top">
                <Sms color={colors.silver} size="18px" />
              </Tooltip>
            )}
          </Flex>
        );
      })}
    </Box>
  );
};