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