@procivis/one-react-native-components 0.1.63 → 0.3.22

package/lib/typescript/utils/index.d.ts

@@ -1,8 +1,17 @@
 import ContrastingStatusBar from './contrasting-status-bar';
-import { formatDate, formatDateTime, formatTime } from './date';
-import { useBlockOSBackNavigation } from './navigation';
-import { useForwardedRef } from './ref';
 import { concatTestID } from './testID';
-import { useMemoAsync } from './useMemoAsync';
-export { concatTestID, ContrastingStatusBar, formatDate, formatDateTime, formatTime, useBlockOSBackNavigation, useForwardedRef, useMemoAsync, };
+export { concatTestID, ContrastingStatusBar };
+export * from './array';
+export * from './backup';
+export * from './color';
+export * from './date';
+export * from './filtering';
+export * from './history';
 export * from './hooks';
+export * from './navigation';
+export * from './parsers';
+export * from './ref';
+export * from './reporting';
+export * from './string';
+export * from './useMemoAsync';
+export * from './uuid';

package/lib/typescript/utils/parsers/credential-images.d.ts

@@ -0,0 +1,3 @@
+import { Claim, CredentialSchemaLayoutProperties } from '@procivis/react-native-one-core';
+import { CarouselImage } from '../../ui-components/credential';
+export declare const getCarouselImagesFromClaims: (claims: Claim[], layoutProperties?: CredentialSchemaLayoutProperties, testID?: string) => CarouselImage[];

package/lib/typescript/utils/parsers/credential-sharing.d.ts

@@ -0,0 +1,16 @@
+import { Claim, Config, CredentialDetail, PresentationDefinitionField, PresentationDefinitionRequestedCredential } from '@procivis/react-native-one-core';
+import { CredentialAttribute, CredentialCardProps, CredentialDetailsCardProps } from '../../ui-components/credential';
+import { CredentialCardNotice } from '../../ui-components/credential/card/credential-card';
+import { CardLabels } from './credential';
+export declare const validityCheckedCardFromCredential: (credential: CredentialDetail, invalidLVVC: boolean, expanded: boolean, multipleCredentialsAvailable: boolean, config: Config, notice: CredentialCardNotice | undefined, testID: string, labels: ShareCredentialCardLabels) => Omit<CredentialCardProps, 'onHeaderPress' | 'style' | 'testID'>;
+export declare const missingCredentialCardFromRequest: (request: PresentationDefinitionRequestedCredential, notice: CredentialCardNotice | undefined, testID: string, labels: ShareCredentialCardLabels) => Omit<CredentialCardProps, 'onHeaderPress' | 'style'>;
+export declare const shareCredentialCardAttributeFromClaim: (id: string, config: Config, testID: string, labels: ShareCredentialCardLabels, claim?: Claim, field?: PresentationDefinitionField) => CredentialAttribute;
+export type ShareCredentialCardLabels = CardLabels & {
+    selectiveDisclosureNotice: string;
+    missingAttribute: string;
+    missingCredential: string;
+    multipleCredentials: string;
+};
+export declare const shareCredentialCardFromCredential: (credential: CredentialDetail | undefined, invalidLVVC: boolean, expanded: boolean, multipleCredentialsAvailable: boolean, request: PresentationDefinitionRequestedCredential, selectedFields: string[] | undefined, config: Config, testID: string, labels: ShareCredentialCardLabels) => Omit<CredentialDetailsCardProps, 'expanded'>;
+export declare const selectCredentialCardAttributeFromClaim: (id: string, config: Config, testID: string, labels: ShareCredentialCardLabels, claim?: Claim, field?: PresentationDefinitionField) => CredentialAttribute;
+export declare const selectCredentialCardFromCredential: (credential: CredentialDetail, selected: boolean, request: PresentationDefinitionRequestedCredential, config: Config, testID: string, labels: ShareCredentialCardLabels) => Omit<CredentialDetailsCardProps, 'expanded'>;

package/lib/typescript/utils/parsers/credential.d.ts

@@ -0,0 +1,76 @@
+import { Claim, Config, CredentialDetail, CredentialListItem, CredentialSchema, DataTypeEnum } from '@procivis/react-native-one-core';
+import { CredentialAttribute, CredentialCardProps, CredentialDetailsCardProps, CredentialHeaderProps } from '../../ui-components/credential';
+import { CredentialCardNotice } from '../../ui-components/credential/card/credential-card';
+export declare enum ValidityState {
+    Revoked = "revoked",
+    Suspended = "suspended",
+    Valid = "valid"
+}
+export declare const getValidityState: (credential: CredentialListItem | undefined) => ValidityState;
+export declare const supportsSelectiveDisclosure: (credential: CredentialListItem | undefined, config: Config | undefined) => boolean | undefined;
+export declare const findClaimByPath: (path: string | undefined, claims: Claim[] | undefined) => ({
+    dataType: DataTypeEnum.Object;
+    value: Claim[];
+    array: false;
+} & {
+    id: string;
+    key: string;
+}) | ({
+    dataType: string;
+    value: string | number | boolean;
+    array: false;
+} & {
+    id: string;
+    key: string;
+}) | ({
+    dataType: string;
+    value: Claim[];
+    array: true;
+} & {
+    id: string;
+    key: string;
+}) | undefined;
+export declare const hasMsoValidityIssues: (credential: CredentialDetail) => boolean;
+export type CardHeaderLabels = {
+    validityIssues: string;
+    revoked: string;
+    suspended: string;
+    suspendedUntil: (date: string) => string;
+};
+export declare const cardHeaderFromCredential: (credential: CredentialDetail, claims: Claim[] | undefined, config: Config, testID: string, labels: CardHeaderLabels) => Omit<CredentialHeaderProps, 'style'>;
+export type CardLabels = CardHeaderLabels & {
+    validityIssuesNotice: string;
+};
+export declare const getCredentialCardPropsFromCredential: (credential: CredentialDetail, claims: Claim[] | undefined, config: Config, notice: CredentialCardNotice | undefined, testID: string, labels: CardLabels) => Omit<CredentialCardProps, 'onHeaderPress' | 'style'>;
+export declare const detailsCardAttributeFromClaim: (claim: Claim, config: Config, testID: string) => CredentialAttribute;
+export declare const detailsCardFromCredential: (credential: CredentialDetail, config: Config, testID: string, labels: CardLabels) => Omit<CredentialDetailsCardProps, 'expanded'>;
+export declare const detailsCardFromCredentialWithClaims: (credential: CredentialDetail, claims: Claim[], config: Config, testID: string, labels: CardLabels) => Omit<CredentialDetailsCardProps, 'expanded'>;
+export declare const nestAttributes: (attributes: CredentialAttribute[]) => CredentialAttribute[];
+export declare function getCredentialSchemaWithoutImages(credentialSchema: CredentialSchema): {
+    layoutProperties: {
+        background: {
+            image: string;
+            color?: string | undefined;
+        };
+        logo: {
+            image: string;
+            fontColor?: string | undefined;
+            backgroundColor?: string | undefined;
+        };
+        primaryAttribute?: string | undefined;
+        secondaryAttribute?: string | undefined;
+        pictureAttribute?: string | undefined;
+        code?: import("@procivis/react-native-one-core").CredentialSchemaCodeProperties | undefined;
+    };
+    id: string;
+    createdDate: string;
+    lastModified: string;
+    name: string;
+    format: string;
+    revocationMethod: string;
+    walletStorageType?: import("@procivis/react-native-one-core").WalletStorageType | undefined;
+    schemaId: string;
+    importedSourceUrl: string;
+    schemaType: string;
+    layoutType?: import("@procivis/react-native-one-core").LayoutType | undefined;
+};

package/lib/typescript/utils/parsers/index.d.ts

@@ -0,0 +1,5 @@
+export * from './credential';
+export * from './credential-images';
+export * from './credential-sharing';
+export * from './query';
+export * from './universal-links';

package/lib/typescript/utils/parsers/query.d.ts

@@ -0,0 +1,7 @@
+import { CredentialListQuery, CredentialSchemaListQuery, DidListQuery, HistoryListQuery, ProofListQuery, ProofSchemaListQuery } from '@procivis/react-native-one-core';
+export declare const getQueryKeyFromCredentialListQueryParams: (queryParams?: Partial<CredentialListQuery>) => (string | string[] | undefined)[];
+export declare const getQueryKeyFromHistoryListQueryParams: (queryParams?: Partial<HistoryListQuery>) => (string | import("@procivis/react-native-one-core").HistoryEntityTypeEnum[] | undefined)[];
+export declare const getQueryKeyFromCredentialSchemaListQueryParams: (queryParams?: Partial<CredentialSchemaListQuery>) => (string | string[] | undefined)[];
+export declare const getQueryKeyFromProofSchemaListQueryParams: (queryParams?: Partial<ProofSchemaListQuery>) => (string | string[] | undefined)[];
+export declare const getQueryKeyFromProofListQueryParams: (queryParams?: Partial<ProofListQuery>) => (string | string[] | undefined)[];
+export declare const getQueryKeyFromDidListQueryParams: (queryParams?: Partial<DidListQuery>) => (string | boolean | string[] | undefined)[];

package/lib/typescript/utils/parsers/universal-links.d.ts

@@ -0,0 +1 @@
+export declare const parseUniversalLink: (universalLink: string) => string | undefined;

package/lib/typescript/utils/parsers/universal-links.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/typescript/utils/ref.d.ts

@@ -8,4 +8,4 @@ import React from 'react';
  *    return <RefComponent ref={forwardedRef} {...props} />;
  * }
  */
-export declare const useForwardedRef: <Component extends React.ComponentClass<any, any> | React.Component<any, {}, any>>(passedRef?: React.Ref<Component> | undefined) => [React.Ref<Component>, React.RefObject<Component>];
+export declare const useForwardedRef: <Component extends unknown>(passedRef?: React.Ref<Component> | undefined) => [React.Ref<Component>, React.RefObject<Component>];

package/lib/typescript/utils/reporting.d.ts

@@ -0,0 +1,4 @@
+import * as Sentry from '@sentry/react-native';
+export declare function reportError(message: string): void;
+export declare function reportException(e: unknown, message?: string): void;
+export declare function reportTraceInfo(category: string, message?: string, data?: Sentry.Breadcrumb['data']): void;

package/lib/typescript/utils/string.d.ts

@@ -0,0 +1,4 @@
+export declare const capitalizeFirstLetter: (string: string) => string;
+export declare const capitalize: (str: string) => string;
+export declare const replaceBreakingHyphens: (str: string) => string;
+export declare const isASCII: (str: string) => boolean;

package/lib/typescript/utils/uuid.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Insecure identifier generator
+ * @returns {string} UUID v4
+ * @example `11edc52b-2918-4d71-9058-f7285e29d894`
+ */
+export declare const generateUUID: () => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procivis/one-react-native-components",
-  "version": "0.1.63",
+  "version": "0.3.22",
   "author": "Procivis AG (https://procivis.ch)",
   "license": "Apache-2.0",
   "description": "Common Procivis ONE UI components for react-native",
@@ -24,19 +24,18 @@
     "lint:eslint": "eslint \"**/*.{js,ts,tsx}\"",
     "lint:eslint:fix": "eslint \"**/*.{js,ts,tsx}\" --fix",
     "lint:ts": "tsc --noEmit",
-    "lint": "yarn lint:eslint",
-    "lint:fix": "yarn lint:eslint:fix",
+    "lint": "pnpm lint:eslint",
+    "lint:fix": "pnpm lint:eslint:fix",
     "prepare": "npx patch-package && bob build",
     "release": "release-it",
-    "bootstrap": "yarn",
     "android": "react-native run-android --appId=ch.procivis.storybook",
     "ios": "react-native run-ios",
     "start": "react-native start",
     "update-stories": "sb-rn-get-stories --config-path .ondevice",
-    "prestart": "yarn update-stories",
+    "prestart": "pnpm update-stories",
     "storybook-watcher": "sb-rn-watcher --config-path .ondevice",
-    "storybook": "start-storybook -p 6006 -s ./.storybook/assets",
-    "build-storybook": "build-storybook -s ./.storybook/assets",
+    "storybook": "storybook dev -p 6006 -c .storybook-web",
+    "build-storybook": "storybook build -c .storybook-web",
     "pods": "npx pod-install"
   },
   "keywords": [
@@ -45,41 +44,57 @@
     "android"
   ],
   "devDependencies": {
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.25.2",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@babel/preset-env": "^7.20.0",
-    "@babel/runtime": "^7.20.0",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/runtime": "^7.25.0",
     "@commitlint/config-conventional": "^11.0.0",
+    "@gorhom/bottom-sheet": "^5.1.2",
+    "@procivis/react-native-one-core": "1.40461.0",
     "@procivis/react-native-picker": "5.0.3",
     "@react-native-async-storage/async-storage": "^1.17.3",
     "@react-native-community/blur": "^4.4.0",
+    "@react-native-community/cli": "15.0.1",
+    "@react-native-community/cli-platform-android": "15.0.1",
+    "@react-native-community/cli-platform-ios": "15.0.1",
     "@react-native-community/datetimepicker": "^8.2.0",
-    "@react-native-community/slider": "^4.5.2",
-    "@react-native/babel-preset": "0.73.21",
-    "@react-native/eslint-config": "0.73.2",
-    "@react-native/metro-config": "0.73.5",
+    "@react-native-community/netinfo": "^11.4.1",
+    "@react-native-community/slider": "^4.5.6",
+    "@react-native/babel-preset": "0.77.1",
+    "@react-native/codegen": "0.77.1",
+    "@react-native/eslint-config": "0.77.1",
+    "@react-native/gradle-plugin": "0.77.1",
+    "@react-native/metro-config": "0.77.1",
     "@react-native/normalize-color": "^2.0.0",
-    "@react-native/typescript-config": "0.73.1",
+    "@react-native/typescript-config": "0.77.1",
     "@react-navigation/native": "^6.0.6",
     "@release-it/conventional-changelog": "^2.0.0",
-    "@storybook/addon-actions": "6.5",
-    "@storybook/addon-controls": "6.5",
-    "@storybook/addon-essentials": "6.5",
-    "@storybook/addon-links": "6.5",
-    "@storybook/addon-ondevice-actions": "^6.0.1-beta.12",
-    "@storybook/addon-ondevice-backgrounds": "^6.0.1-beta.12",
-    "@storybook/addon-ondevice-controls": "^6.0.1-beta.12",
-    "@storybook/addon-react-native-web": "^0.0.19",
-    "@storybook/react": "6.5",
-    "@storybook/react-native": "^6.0.1-beta.12",
-    "@types/jest": "^29.2.1",
+    "@sentry/react-native": "^5.24.1",
+    "@storybook/addon-actions": "^8.6.7",
+    "@storybook/addon-controls": "^8.6.7",
+    "@storybook/addon-designs": "^8.2.1",
+    "@storybook/addon-essentials": "^8.6.7",
+    "@storybook/addon-links": "^8.6.7",
+    "@storybook/addon-ondevice-actions": "8.6.1",
+    "@storybook/addon-ondevice-backgrounds": "8.6.1",
+    "@storybook/addon-ondevice-controls": "8.6.1",
+    "@storybook/addon-ondevice-notes": "8.6.1",
+    "@storybook/addon-react-native-server": "^0.0.6",
+    "@storybook/react": "^8.6.7",
+    "@storybook/react-native": "8.6.1",
+    "@storybook/react-native-web-vite": "^8.6.7",
+    "@storybook/test": "^8.6.7",
+    "@types/jest": "^29.5.13",
+    "@types/lodash": "^4",
     "@types/qrcode-svg": "^1",
     "@types/react": "^18.2.6",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.17.0",
+    "apisauce": "2.0.0",
     "babel-jest": "^29.6.3",
     "babel-loader": "^8.2.4",
-    "babel-plugin-react-native-web": "^0.18.9",
+    "babel-plugin-react-native-web": "^0.19.13",
     "commitlint": "^11.0.0",
     "eslint": "^8.19.0",
     "eslint-config-prettier": "^7.0.0",
@@ -90,40 +105,64 @@
     "eslint-plugin-simple-import-sort": "^8.0.0",
     "husky": "^6.0.0",
     "jest": "^29.6.3",
+    "lodash": "^4.17.21",
+    "lottie-react-native": "^7.2.2",
     "metro-react-native-babel-preset": "0.73.10",
+    "moment": "^2.29.4",
+    "parse-url": "^9.2.0",
     "patch-package": "^6.4.7",
     "prettier": "2.8.8",
     "pure-svg-code": "1.0.6",
     "qrcode-svg": "1.1.0",
-    "react": "18.2.0",
-    "react-dom": "^18.2.0",
-    "react-native": "0.73.9",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.77.1",
+    "react-native-bluetooth-state-manager": "^1.3.5",
     "react-native-builder-bob": "^0.18.0",
-    "react-native-gesture-handler": "2.14.0",
-    "react-native-reanimated": "^3.15.0",
+    "react-native-gesture-handler": "2.24.0",
+    "react-native-reanimated": "^3.17.1",
     "react-native-reanimated-carousel": "^3.5.1",
-    "react-native-safe-area-context": "^3.3.2",
-    "react-native-screens": "^3.21.0",
-    "react-native-svg": "^15.1.0",
-    "react-native-vision-camera": "^4.5.1",
-    "react-native-web": "^0.18.9",
+    "react-native-safe-area-context": "^5.3.0",
+    "react-native-screens": "^4.9.0",
+    "react-native-svg": "^15.11.2",
+    "react-native-system-time": "git+https://github.com/procivis/react-native-system-time.git#f184f8a45a7d6974a34dffa47544424ac9d382c3",
+    "react-native-uuid": "^2.0.1",
+    "react-native-vision-camera": "^4.6.1",
+    "react-native-web": "^0.19.13",
+    "react-query": "^3.39.3",
     "release-it": "^14.2.2",
-    "storybook-addon-designs": "^6.3.1",
-    "typescript": "5.0.4"
+    "shx": "^0.3.4",
+    "storybook": "^8.6.7",
+    "timeago.js": "^4.0.2",
+    "typescript": "5.0.4",
+    "vite": "^6.2.2"
   },
   "peerDependencies": {
+    "@procivis/react-native-one-core": "^1.40461.0",
     "@procivis/react-native-picker": "*",
     "@react-native-community/blur": "*",
+    "@react-native-community/netinfo": "^11.4.1",
     "@react-native/normalize-color": "*",
     "@react-navigation/native": "*",
+    "@sentry/react-native": "^5.24.1",
+    "apisauce": "2.0.0",
+    "lodash": "^4.17.21",
+    "lottie-react-native": "^7.2.2",
+    "moment": "^2.29.4",
+    "parse-url": "^9.2.0",
     "pure-svg-code": "*",
     "qrcode-svg": "*",
     "react": "*",
     "react-native": "*",
+    "react-native-bluetooth-state-manager": "^1.3.5",
     "react-native-reanimated-carousel": "*",
     "react-native-safe-area-context": "*",
     "react-native-svg": "*",
-    "react-native-vision-camera": "^4"
+    "react-native-system-time": "*",
+    "react-native-uuid": "^2.0.1",
+    "react-native-vision-camera": "^4",
+    "react-query": "^3.39.3",
+    "timeago.js": "^4.0.2"
   },
   "jest": {
     "preset": "react-native",
@@ -167,7 +206,11 @@
       "simple-import-sort",
       "jest"
     ],
+    "parserOptions": {
+      "project": true
+    },
     "rules": {
+      "@typescript-eslint/no-floating-promises": "warn",
       "no-restricted-imports": [
         "error",
         {
@@ -211,7 +254,8 @@
       "simple-import-sort/exports": "warn",
       "import/newline-after-import": "warn",
       "import/no-duplicates": "warn",
-      "import/no-absolute-path": "warn"
+      "import/no-absolute-path": "warn",
+      "no-console": "error"
     }
   },
   "eslintIgnore": [
@@ -233,8 +277,5 @@
       ]
     ]
   },
-  "resolutions": {
-    "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0"
-  },
-  "packageManager": "yarn@1.22.21+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
+  "packageManager": "pnpm@10.5.2"
 }

package/src/components/backup/index.ts

@@ -0,0 +1 @@
+export * from './preview-credentials';

package/src/components/backup/preview-credentials.tsx

@@ -0,0 +1,38 @@
+import { CredentialListItem } from '@procivis/react-native-one-core';
+import React, { FC } from 'react';
+import { ImageSourcePropType, View } from 'react-native';
+
+import { useCredentialListExpandedCard } from '../../utils/hooks/credential-card/credential-card-expanding';
+import { CardLabels } from '../../utils/parsers/credential';
+import { CredentialDetails } from '../credential/credential';
+
+interface PreviewCredentialsProps {
+  credentials: CredentialListItem[] | undefined;
+  labels: CardLabels;
+  onImagePreview: (title: string, image: ImageSourcePropType) => void;
+}
+
+export const PreviewCredentials: FC<PreviewCredentialsProps> = ({ credentials, labels, onImagePreview }) => {
+  const { expandedCredential, onHeaderPress } = useCredentialListExpandedCard();
+
+  if (!credentials || credentials.length === 0) {
+    return null;
+  }
+
+  return (
+    <View>
+      {credentials.map((credential, index, { length }) => (
+        <View key={credential.id}>
+          <CredentialDetails
+            credentialId={credential.id}
+            expanded={expandedCredential === credential.id}
+            labels={labels}
+            lastItem={index === length - 1}
+            onHeaderPress={onHeaderPress}
+            onImagePreview={onImagePreview}
+          />
+        </View>
+      ))}
+    </View>
+  );
+};

package/src/components/credential/credential.tsx

@@ -0,0 +1,72 @@
+import { Claim } from '@procivis/react-native-one-core';
+import React, { FC } from 'react';
+import { ImageSourcePropType, StyleSheet } from 'react-native';
+
+import { CredentialDetailsCardListItem, CredentialHeaderProps } from '../../ui-components/credential/card';
+import { concatTestID } from '../../utils';
+import { useCoreConfig } from '../../utils/hooks/core/core-config';
+import { useCredentialDetail } from '../../utils/hooks/core/credentials';
+import { CardLabels, detailsCardFromCredentialWithClaims } from '../../utils/parsers/credential';
+
+export interface CredentialDetailsProps {
+  claims?: Claim[];
+  credentialId: string;
+  expanded?: boolean;
+  headerAccessory?: CredentialHeaderProps['accessory'];
+  labels: CardLabels;
+  lastItem?: boolean;
+  onHeaderPress?: (credentialId?: string) => void;
+  onImagePreview: (title: string, image: ImageSourcePropType) => void;
+}
+
+export const CredentialDetails: FC<CredentialDetailsProps> = ({
+  claims,
+  credentialId,
+  expanded = false,
+  labels,
+  lastItem,
+  onHeaderPress,
+  onImagePreview,
+  headerAccessory,
+}) => {
+  const { data: credential } = useCredentialDetail(credentialId);
+  const { data: config } = useCoreConfig();
+
+  if (!credential || !config) {
+    return null;
+  }
+  const testID = concatTestID('Credential.credential', credential.id);
+
+  const { card, attributes } = detailsCardFromCredentialWithClaims(
+    credential,
+    claims ?? credential.claims,
+    config,
+    testID,
+    labels,
+  );
+  if (headerAccessory) {
+    card.header.accessory = headerAccessory;
+  }
+
+  return (
+    <CredentialDetailsCardListItem
+      attributes={attributes}
+      card={{
+        ...card,
+        credentialId,
+        onHeaderPress,
+      }}
+      expanded={expanded}
+      lastItem={lastItem}
+      onImagePreview={onImagePreview}
+      style={styles.credential}
+      testID={testID}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  credential: {
+    marginBottom: 8,
+  },
+});

package/src/components/credential/index.ts

@@ -0,0 +1 @@
+export * from './credential';

package/src/components/entity/EntityButtons.tsx

@@ -0,0 +1,79 @@
+import { TrustEntity } from '@procivis/react-native-one-core';
+import React, { FC, memo, useCallback, useMemo } from 'react';
+import { Linking, StyleSheet, View } from 'react-native';
+
+import { Button, ButtonType } from '../../ui-components/buttons';
+import { EntityLabels } from '../../ui-components/screens/nerd-mode-screen';
+import { concatTestID, reportException } from '../../utils';
+
+export interface EntityButton {
+  url: string;
+  label: string;
+}
+
+interface EntityButtonsProps {
+  entity?: TrustEntity;
+  labels: EntityLabels;
+  testID?: string;
+}
+
+const EntityButtons: FC<EntityButtonsProps> = ({ entity, labels, testID }) => {
+  const buttons = useMemo(
+    () =>
+      [
+        {
+          label: labels.visitWebsite,
+          url: entity?.website || '',
+          testID: 'website',
+        },
+        {
+          label: labels.termsAndServices,
+          url: entity?.termsUrl || '',
+          testID: 'termsOfService',
+        },
+        {
+          label: labels.privacyPolicy,
+          url: entity?.privacyUrl || '',
+          testID: 'privacyPolicy',
+        },
+      ].filter((btn) => Boolean(btn.url)),
+    [entity, labels],
+  );
+
+  const openURL = useCallback(
+    (url: string) => () => {
+      Linking.openURL(url).catch((e) => {
+        reportException(e, 'Error opening entity link');
+      });
+    },
+    [],
+  );
+  return (
+    <View style={[styles.buttons]} testID={testID}>
+      {buttons.map(({ label, url, testID: testIdSuffix }) => (
+        <Button
+          key={label}
+          title={label}
+          onPress={openURL(url)}
+          style={styles.urlButton}
+          testID={concatTestID(testID, testIdSuffix)}
+          type={ButtonType.SmallTech}
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  buttons: {
+    paddingBottom: 10,
+    paddingHorizontal: 12,
+  },
+  urlButton: {
+    borderRadius: 4,
+    borderWidth: 0,
+    marginTop: 4,
+  },
+});
+
+export default memo(EntityButtons);

package/src/components/entity/entity-attributes.tsx

@@ -0,0 +1,63 @@
+import { TrustEntity } from '@procivis/react-native-one-core';
+import React, { FC, memo } from 'react';
+import { View } from 'react-native';
+
+import { NerdModeItem } from '../../ui-components/nerd-view';
+import { AttributesLabels, EntityType } from '../../ui-components/screens/nerd-mode-screen';
+import { addElementIf } from '../../utils/array';
+
+interface EntityAttributesProps {
+  did?: string;
+  trustEntity?: TrustEntity;
+  trusted: boolean;
+  labels: AttributesLabels;
+  onCopyToClipboard: (value: string) => void;
+  entityType: EntityType;
+}
+
+const EntityAttributes: FC<EntityAttributesProps> = ({
+  did,
+  trustEntity,
+  trusted,
+  labels,
+  entityType,
+  onCopyToClipboard,
+}) => {
+  const didSections = did?.split(':') ?? [];
+  const identifier = didSections.pop();
+  const didMethod = didSections.length ? didSections.join(':') + ':' : '';
+
+  const attributes = [
+    ...addElementIf(trusted, {
+      attributeKey: labels.trustRegistry,
+      highlightedText: trustEntity?.trustAnchor.name,
+      testID: 'trustRegistry',
+    }),
+    ...addElementIf(Boolean(did), {
+      attributeKey: entityType === EntityType.CredentialEntity ? labels.issuerDid : labels.entityDid,
+      attributeText: identifier,
+      canBeCopied: true,
+      highlightedText: didMethod,
+      testID: 'issuerDID',
+    }),
+    ...addElementIf(trusted && Boolean(trustEntity?.role), {
+      attributeKey: labels.role,
+      highlightedText: trustEntity?.role,
+      testID: 'role',
+    }),
+  ];
+  return (
+    <View>
+      {attributes.map((attribute) => (
+        <NerdModeItem
+          key={attribute.attributeKey}
+          {...attribute}
+          labels={labels}
+          onCopyToClipboard={onCopyToClipboard}
+        />
+      ))}
+    </View>
+  );
+};
+
+export default memo(EntityAttributes);