VereignLegalParticipant.tsx

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {ColorPallet, TextTheme} from 'src/theme/theme';

type LegalParticipantProps = {
  jsonld: any;
};

const VereignLegalParticipant: React.FC<LegalParticipantProps> = ({
  jsonld,
}) => {
  const subject = jsonld?.credentialSubject || {};

  const companyName = subject["vereign:companyName"];
  const taxID = subject["vereign:taxID"];
  const gleiCode = subject["vereign:gleiCode"];

  const address = subject["vereign:address"] || {};
  const street = address["vereign:street"];
  const building = address["vereign:building"];
  const city = address["vereign:city"];
  const country = address["vereign:country"];

  return (
    <View>
      <Text style={styles.header}>JSON-LD</Text>
      <View style={styles.prop}>
        <Text style={styles.propLabel}>CompanyName</Text>
        <Text style={styles.propValue}>{companyName}</Text>
      </View>
      <View style={styles.prop}>
        <Text style={styles.propLabel}>TaxID</Text>
        <Text style={styles.propValue}>{taxID}</Text>
      </View>
      <View style={styles.prop}>
        <Text style={styles.propLabel}>GleiCode</Text>
        <Text style={styles.propValue}>{gleiCode}</Text>
      </View>
      <View style={styles.prop}>
        <Text style={styles.propLabel}>Street</Text>
        <Text style={styles.propValue}>{street}</Text>
      </View>
      <View style={styles.prop}>
        <Text style={styles.propLabel}>Building</Text>
        <Text style={styles.propValue}>{building}</Text>
      </View>
      <View style={styles.prop}>
        <Text style={styles.propLabel}>City</Text>
        <Text style={styles.propValue}>{city}</Text>
      </View>
      <View style={styles.prop}>
        <Text style={styles.propLabel}>Country</Text>
        <Text style={styles.propValue}>{country}</Text>
      </View>
    </View>
  );
};

export default VereignLegalParticipant;

const styles = StyleSheet.create({
  header: {
    ...TextTheme.normal,
    color: ColorPallet.baseColors.black,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  prop: {
    flexDirection: 'row',
    paddingVertical: 4,
  },
  propLabel: {
    width: '40%',
    ...TextTheme.normal,
    color: ColorPallet.baseColors.black,
    fontWeight: 'bold',
  },
  propValue: {
    width: '60%',
    ...TextTheme.normal,
    color: ColorPallet.baseColors.black,
    textAlign: 'right',
  },
});