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 | import { Box, Tooltip } from "rimble-ui"; import { Info } from "@rimble/icons"; import { JsonSchemaNode } from "vc-schema-tools"; import { hexEllipsis } from "../../../utils/helpers"; import { CredentialTDLeft, CredentialTDRight, CredentialTR } from "./CredentialComponents"; import { colors } from "../../../themes/colors"; export interface CredentialPropertyProps { keyName: string /** "key" prop name is reserved by React */; value: any; nestedLevel?: number; parentKey?: string; schema?: JsonSchemaNode; } export const CredentialProperty: React.FunctionComponent<CredentialPropertyProps> = (props) => { const { schema, keyName, value } = props; const nestedLevel = props.nestedLevel || 0; const parentKey = props.parentKey || ""; const keyDisplay = schema?.title || keyName; const keyDescription = schema?.description; let valueDisplay = ""; let valueTooltip = ""; if (value === "boolean" || Array.isArray(value)) { valueDisplay = JSON.stringify(value); } else if (typeof value === "string" && value.indexOf("0x") !== -1) { valueDisplay = hexEllipsis(value); valueTooltip = value; } else if (value && typeof value !== "object") { valueDisplay = value; } return ( <> <CredentialTR> <CredentialTDLeft> <Box pl={nestedLevel * 24}> {keyDisplay} {keyDescription && ( <Tooltip message={keyDescription} placement="top"> <Info size={16} color={colors.silver} ml={1} style={{ verticalAlign: "text-bottom" }} /> </Tooltip> )} </Box> </CredentialTDLeft> <CredentialTDRight> {valueTooltip ? ( <Tooltip message={valueTooltip} placement="top"> <Box>{valueDisplay}</Box> </Tooltip> ) : ( valueDisplay )} </CredentialTDRight> </CredentialTR> {value && typeof value === "object" && !Array.isArray(value) && Object.entries(value).map(([nestedKey, nestedValue]) => ( <CredentialProperty key={nestedKey} keyName={nestedKey} value={nestedValue} nestedLevel={nestedLevel + 1} parentKey={parentKey + keyName} schema={schema?.properties?.[nestedKey]} /> ))} </> ); }; |