All files / src/components/views/Credentials CredentialProperty.tsx

0% Statements 0/17
0% Branches 0/26
0% Functions 0/2
0% Lines 0/17

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