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 | import { useEffect, useState } from "react"; import { VC } from "vc-schema-tools"; // import { usePalette } from "react-palette"; // import { readableColor } from "polished"; import { truncateDid } from "../../../utils"; import { Box, Flex, Text } from "rimble-ui"; import { DomainImage, LockUnverified, LockVerified } from "../../elements"; import { H4 } from "../../layouts"; import { baseColors, colors, fonts } from "../../../themes"; import { validateVc } from "vc-schema-tools"; import { SchemaDataResponse } from "../Schemas/types"; export interface CredentialHeaderProps { issuer: string; issuerDomain?: string; vc: VC; vcSchema?: SchemaDataResponse; vcType: string; } export const CredentialHeader: React.FunctionComponent<CredentialHeaderProps> = (props) => { const { issuer, issuerDomain, vc, vcSchema, vcType } = props; const [isValid, setIsValid] = useState<boolean | undefined>(); // TODO add org profile data /*let logoUrl = "https://www.google.com/s2/favicons?sz=64&domain=" + issuerDomain; const googleProxyURL = "https://images1-focus-opensocial.googleusercontent.com/gadgets/proxy?container=focus&refresh=2592000&url="; logoUrl = googleProxyURL + encodeURIComponent(logoUrl); const { data, loading, error } = usePalette(logoUrl); const backgroundColor = loading ? "transparent" : error ? colors.primary.base : data.vibrant; const textColor = loading ? "transparent" : error ? baseColors.white : readableColor(data.vibrant);*/ const backgroundColor = colors.primary.base; const textColor = baseColors.white; useEffect(() => { return void (async function validate() { try { const { valid } = await validateVc(vc); if (valid) { setIsValid(true); } else { setIsValid(false); } } catch (error) { console.error("error verifying vc: ", error); setIsValid(false); } })(); }, [vc]); return ( <Box bg={backgroundColor} px={3} pb={3} pt={2}> <Flex alignItems="center" justifyContent="space-between" mb={3}> {issuerDomain ? ( <Flex alignItems="center"> <DomainImage background={true} domain={issuerDomain} /> <Text.span color={textColor} fontFamily={fonts.sansSerif} fontSize={1} mx={2} style={{ overflowX: "hidden", textOverflow: "ellipsis" }} > {issuerDomain} </Text.span> </Flex> ) : ( <Text.span color={textColor} fontFamily={fonts.sansSerif} fontSize={1} mr={2} style={{ overflowX: "hidden", textOverflow: "ellipsis" }} title={issuer} > {truncateDid(issuer)} </Text.span> )} {isValid ? <LockVerified /> : <LockUnverified />} </Flex> <Flex> {vcSchema?.icon && ( <Flex alignItems="center" bg={baseColors.white} border={2} borderRadius="50%" fontSize="24px" height="40px" justifyContent="center" mr={2} width="40px" > {vcSchema.icon} </Flex> )} <Box flexGrow="1"> <H4 color={textColor} fontFamily={fonts.sansSerif} my={0}> {vcSchema?.name || vc.credentialSubject.title || vcType} </H4> {vc.credentialSubject.id && ( <Text color={textColor} fontFamily={fonts.sansSerif} fontSize={1} fontWeight={3}> Subject: {truncateDid(vc.credentialSubject.id)} </Text> )} </Box> </Flex> </Box> ); }; |