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