All files / src/components/elements DidSearchOption.tsx

0% Statements 0/10
0% Branches 0/8
0% Functions 0/4
0% Lines 0/10

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 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119                                                                                                                                                                                                                                             
import styled from "styled-components";
import { CheckCircle, Warning } from "@rimble/icons";
import { Box, Flex, Text, Tooltip } from "rimble-ui";
import { baseColors, colors, fonts } from "../../themes";
import { SelectedDid } from "../../types";
import { H5 } from "../layouts";
import { DidMethodIcon, DomainImage } from "../elements";
import { DidTruncate } from "./DidTruncate";
 
const DidSearchOptionStyled = styled(Box)`
  cursor: pointer;
  overflow: hidden;
  &:hover {
    background-color: ${colors.primary.border};
    color: ${colors.primary.base};
  }
`;
 
export interface DidSearchOptionProps {
  alias?: string;
  didDocs: any;
  domain: string;
  imageUrl?: string;
  orgName?: string;
  onSelect(did: SelectedDid): void;
}
 
export const DidSearchOption: React.FunctionComponent<DidSearchOptionProps> = (props) => {
  const { alias, didDocs, domain, imageUrl, orgName, onSelect } = props;
  return (
    <Box borderTop={2}>
      <Box position="relative" pb={2} pl="50px" pr={3} pt={3}>
        {imageUrl ? (
          <img
            src={imageUrl}
            style={{ height: "24px", left: "16px", position: "absolute", top: "16px", width: "24px" }}
          />
        ) : (
          <Box height="16px" width="16px" position="absolute" left="18px" top="18px">
            <DomainImage domain={domain} />
          </Box>
        )}
        <H5 m={0}>{domain}</H5>
        <Text color={colors.midGray} fontSize={0}>
          {orgName}
        </Text>
      </Box>
      {didDocs?.length &&
        didDocs.map((didDoc: any, i: number) => {
          const parsedDidDoc = JSON.parse(didDoc);
          return (
            <DidSearchOptionDid
              alias={alias}
              did={{
                did: parsedDidDoc.id,
                messagingSupported: !!parsedDidDoc.service?.length,
              }}
              key={i}
              onSelect={onSelect}
            />
          );
        })}
    </Box>
  );
};
 
export interface DidSearchOptionDidProps {
  alias?: string;
  did: SelectedDid;
  onSelect(did: SelectedDid): void;
}
 
export const DidSearchOptionDid: React.FunctionComponent<DidSearchOptionDidProps> = (props) => {
  const { alias, did, onSelect } = props;
  return (
    <DidSearchOptionStyled pl="50px" onClick={() => onSelect(did)}>
      <Flex borderTop={2} justifyContent="space-between" maxWidth="100%">
        <Flex
          alignItems="center"
          fontFamily={fonts.sansSerif}
          maxWidth="calc(100% - 50px)"
          pl="26px"
          position="relative"
          py={3}
        >
          <Box left={0} position="absolute" top="21px">
            <DidMethodIcon did={did.did} size="16px" />
          </Box>
          {alias ? (
            <>
              <Text color={colors.midGray} fontSize={1} fontWeight={3} mr={2}>
                {alias}
              </Text>
              <Text color={colors.midGray} fontSize={0} maxWidth="calc(100% - 50px)" title={did}>
                <DidTruncate did={did.did} />
              </Text>
            </>
          ) : (
            <Text color={colors.midGray} fontSize={0} maxWidth="100%" title={did}>
              <DidTruncate did={did.did} />
            </Text>
          )}
        </Flex>
        <Flex alignItems="center" background={baseColors.white} borderLeft={2} justifyContent="center" width="40px">
          {did.messagingSupported ? (
            <Tooltip placement="top" message="This DID can receive secure messages and credentials.">
              <CheckCircle color={colors.success.base} />
            </Tooltip>
          ) : (
            <Tooltip placement="top" message="This DID does not receive messages and credentials.">
              <Warning color={colors.warning.base} />
            </Tooltip>
          )}
        </Flex>
      </Flex>
    </DidSearchOptionStyled>
  );
};