@procivis/one-react-native-components 0.2.54 → 0.3.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procivis/one-react-native-components",
-  "version": "0.2.54",
+  "version": "0.3.27",
   "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,37 +44,49 @@
     "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",
-    "@procivis/react-native-one-core": "1.33398.0",
+    "@gorhom/bottom-sheet": "^5.1.2",
+    "@procivis/react-native-one-core": "1.42873.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/netinfo": "^11.4.1",
-    "@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/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",
     "@sentry/react-native": "^5.24.1",
-    "@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",
+    "@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",
@@ -83,7 +94,7 @@
     "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",
@@ -94,37 +105,40 @@
     "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-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.5.1",
-    "react-native-web": "^0.18.9",
+    "react-native-vision-camera": "^4.6.1",
+    "react-native-web": "^0.19.13",
     "react-query": "^3.39.3",
     "release-it": "^14.2.2",
     "shx": "^0.3.4",
-    "storybook-addon-designs": "^6.3.1",
+    "storybook": "^8.6.7",
     "timeago.js": "^4.0.2",
-    "typescript": "5.0.4"
+    "typescript": "5.0.4",
+    "vite": "^6.2.2"
   },
   "peerDependencies": {
-    "@procivis/react-native-one-core": "^1.33398.0",
+    "@procivis/react-native-one-core": "^1.42873.0",
     "@procivis/react-native-picker": "*",
     "@react-native-community/blur": "*",
     "@react-native-community/netinfo": "^11.4.1",
@@ -132,7 +146,9 @@
     "@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": "*",
@@ -238,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": [
@@ -260,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/entity/entity-attributes.tsx

@@ -7,6 +7,7 @@ import { AttributesLabels, EntityType } from '../../ui-components/screens/nerd-m
 import { addElementIf } from '../../utils/array';
 
 interface EntityAttributesProps {
+  did?: string;
   trustEntity?: TrustEntity;
   trusted: boolean;
   labels: AttributesLabels;
@@ -15,14 +16,14 @@ interface EntityAttributesProps {
 }
 
 const EntityAttributes: FC<EntityAttributesProps> = ({
+  did,
   trustEntity,
   trusted,
   labels,
   entityType,
   onCopyToClipboard,
 }) => {
-  const didId = trustEntity?.did?.did || '';
-  const didSections = didId.split(':') ?? [];
+  const didSections = did?.split(':') ?? [];
   const identifier = didSections.pop();
   const didMethod = didSections.length ? didSections.join(':') + ':' : '';
 
@@ -32,8 +33,8 @@ const EntityAttributes: FC<EntityAttributesProps> = ({
       highlightedText: trustEntity?.trustAnchor.name,
       testID: 'trustRegistry',
     }),
-    ...addElementIf(Boolean(didId), {
-      attributeKey: entityType === EntityType.CredentialEntity ? labels.issuerDid : labels.entityDid,
+    ...addElementIf(Boolean(did), {
+      attributeKey: entityType === EntityType.CredentialEntity ? labels.issuerIdentifier : labels.entityIdentifier,
       attributeText: identifier,
       canBeCopied: true,
       highlightedText: didMethod,

package/src/components/entity/entity-details-with-buttons.tsx

@@ -1,12 +1,13 @@
-import { DidListItem, TrustEntityRoleEnum, TrustEntityStateEnum } from '@procivis/react-native-one-core';
+import { TrustEntityRoleEnum, TrustEntityStateEnum } from '@procivis/react-native-one-core';
+import { IdentifierListItem } from '@procivis/react-native-one-core/dist/src/identifier';
 import React, { FC, memo, useMemo } from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 
 import EntityCluster from '../../ui-components/entity/entity-cluster';
-import { EntityTrustedIcon } from '../../ui-components/icons';
+import { EntityNotTrustedIcon, EntityTrustedIcon } from '../../ui-components/icons';
 import { AttributesLabels, EntityLabels, EntityType } from '../../ui-components/screens/nerd-mode-screen';
 import { useAppColorScheme } from '../../ui-components/theme/color-scheme-context';
-import { concatTestID, replaceBreakingHyphens } from '../../utils';
+import { concatTestID, replaceBreakingHyphens, useIdentifierDetails } from '../../utils';
 import { useTrustEntity } from '../../utils/hooks/core/trust-entity';
 import EntityAttributes from './entity-attributes';
 import EntityButtons from './EntityButtons';
@@ -14,7 +15,7 @@ import EntityButtons from './EntityButtons';
 export type ContextRole = Exclude<TrustEntityRoleEnum, TrustEntityRoleEnum.BOTH>;
 
 interface EntityDetailsWithButtonsProps {
-  did?: DidListItem;
+  identifier?: IdentifierListItem;
   entityLabels: EntityLabels;
   attributesLabels: AttributesLabels;
   style?: StyleProp<ViewStyle>;
@@ -26,7 +27,7 @@ interface EntityDetailsWithButtonsProps {
 }
 
 const EntityDetailsWithButtons: FC<EntityDetailsWithButtonsProps> = ({
-  did,
+  identifier,
   entityLabels,
   attributesLabels,
   onCopyToClipboard,
@@ -35,35 +36,40 @@ const EntityDetailsWithButtons: FC<EntityDetailsWithButtonsProps> = ({
   testID,
   ...props
 }) => {
-  let { data } = useTrustEntity(did?.id);
+  let { data } = useTrustEntity(identifier?.id);
+  let { data: identifierDetail } = useIdentifierDetails(identifier?.id);
   const trustEntity = data ?? undefined;
 
   const colorScheme = useAppColorScheme();
 
   const trusted = Boolean(
     trustEntity &&
-      trustEntity.state === TrustEntityStateEnum.ACTIVE &&
-      (trustEntity.role === TrustEntityRoleEnum.BOTH || trustEntity.role === role),
+    trustEntity.state === TrustEntityStateEnum.ACTIVE &&
+    (trustEntity.role === TrustEntityRoleEnum.BOTH || trustEntity.role === role),
   );
 
   const trustEntityName = useMemo(() => {
     if (!trustEntity || !trusted) {
+      if (identifierDetail?.did) {
+        return replaceBreakingHyphens(identifierDetail.did.did);
+      }
+
       return role === TrustEntityRoleEnum.ISSUER ? entityLabels.unknownIssuer : entityLabels.unknownVerifier;
     }
     return trustEntity.name;
-  }, [entityLabels, role, trustEntity, trusted]);
+  }, [entityLabels, role, trustEntity, trusted, identifierDetail]);
 
   const trustEntitySubline = useMemo(() => {
     if (!trusted) {
-      return did?.did ? replaceBreakingHyphens(did.did) : undefined;
+      return undefined;
     }
 
     return `${entityLabels.trusted} • ${trustEntity?.trustAnchor.name}`;
-  }, [trustEntity, trusted, entityLabels.trusted, did]);
+  }, [trustEntity, trusted, entityLabels.trusted]);
 
   const trustEntityStatusIcon = useMemo(() => {
     if (!trusted) {
-      return undefined;
+      return <EntityNotTrustedIcon testID={concatTestID(testID, 'statusIcon', 'notTrusted')} />;
     }
     return <EntityTrustedIcon testID={concatTestID(testID, 'statusIcon', 'trusted')} />;
   }, [testID, trusted]);
@@ -73,7 +79,7 @@ const EntityDetailsWithButtons: FC<EntityDetailsWithButtonsProps> = ({
       <EntityCluster
         avatar={{
           avatar: trusted && trustEntity?.logo ? { imageSource: { uri: trustEntity.logo } } : undefined,
-          placeholderText: trustEntity?.name.substring(0, 1),
+          placeholderText: trusted ? trustEntity?.name.substring(0, 1) : "U",
           statusIcon: trustEntityStatusIcon,
           testID: concatTestID(testID, 'avatar'),
         }}
@@ -85,6 +91,7 @@ const EntityDetailsWithButtons: FC<EntityDetailsWithButtonsProps> = ({
       />
       {trusted && <EntityButtons entity={trustEntity} labels={entityLabels} testID={concatTestID(testID, 'links')} />}
       <EntityAttributes
+        did={trustEntity?.did?.did}
         trustEntity={trustEntity}
         trusted={trusted}
         labels={attributesLabels}

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

@@ -1,10 +1,11 @@
-import { DidListItem, TrustEntity, TrustEntityRoleEnum, TrustEntityStateEnum } from '@procivis/react-native-one-core';
+import { TrustEntity, TrustEntityRoleEnum, TrustEntityStateEnum } from '@procivis/react-native-one-core';
+import { IdentifierListItem } from '@procivis/react-native-one-core/dist/src/identifier';
 import React, { FC, ReactNode, useMemo } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 
 import EntityCluster from '../../ui-components/entity/entity-cluster';
-import { EntityTrustedIcon } from '../../ui-components/icons';
-import { concatTestID, replaceBreakingHyphens } from '../../utils';
+import { EntityNotTrustedIcon, EntityTrustedIcon } from '../../ui-components/icons';
+import { concatTestID, replaceBreakingHyphens, useIdentifierDetails } from '../../utils';
 import { useTrustEntity } from '../../utils/hooks/core/trust-entity';
 
 export type EntityDetailsLabels = {
@@ -18,17 +19,18 @@ export type EntityDetailsProps = {
   style?: StyleProp<ViewStyle>;
   testID?: string;
 } & (
-  | {
-      did?: DidListItem;
+    | {
+      identifier?: IdentifierListItem;
     }
-  | {
+    | {
       entity: TrustEntity;
     }
-);
+  );
 
 const EntityDetails: FC<EntityDetailsProps> = ({ labels, renderMore, role, style, testID, ...props }) => {
-  const { data } = useTrustEntity('did' in props ? props.did?.id : undefined);
+  const { data } = useTrustEntity('identifier' in props ? props.identifier?.id : undefined);
   const trustEntity: TrustEntity | undefined = 'entity' in props ? props.entity : data ?? undefined;
+  const { data: identifierDetail } = useIdentifierDetails('identifier' in props ? props.identifier?.id : undefined);
 
   const trusted =
     trustEntity &&
@@ -37,24 +39,17 @@ const EntityDetails: FC<EntityDetailsProps> = ({ labels, renderMore, role, style
 
   const trustEntityName = useMemo(() => {
     if (!trusted) {
+      if (identifierDetail?.did?.did) {
+        return replaceBreakingHyphens(identifierDetail.did.did);
+      }
       return labels.unknown;
     }
     return trustEntity.name;
-  }, [labels.unknown, trustEntity, trusted]);
-
-  const trustEntitySubline = useMemo(() => {
-    if (!trustEntity) {
-      return 'did' in props ? (props.did?.did ? replaceBreakingHyphens(props.did.did) : undefined) : undefined;
-    }
-    if (!trusted) {
-      return replaceBreakingHyphens(trustEntity.did.did);
-    }
-    return undefined;
-  }, [props, trustEntity, trusted]);
+  }, [labels.unknown, trustEntity, trusted, identifierDetail]);
 
   const trustEntityStatusIcon = useMemo(() => {
     if (!trusted) {
-      return undefined;
+      return <EntityNotTrustedIcon testID={concatTestID(testID, 'statusIcon', 'notTrusted')} />;
     }
     return <EntityTrustedIcon testID={concatTestID(testID, 'statusIcon', 'trusted')} />;
   }, [testID, trusted]);
@@ -65,16 +60,18 @@ const EntityDetails: FC<EntityDetailsProps> = ({ labels, renderMore, role, style
         avatar={
           trustEntity
             ? {
-                avatar: trusted && trustEntity.logo ? { imageSource: { uri: trustEntity.logo } } : undefined,
-                placeholderText: trustEntity.name.substring(0, 1),
-                statusIcon: trustEntityStatusIcon,
-                testID: concatTestID(testID, 'avatar'),
-              }
-            : undefined
+              avatar: trusted && trustEntity.logo ? { imageSource: { uri: trustEntity.logo } } : undefined,
+              placeholderText: trusted ? trustEntity.name.substring(0, 1) : "U",
+              statusIcon: trustEntityStatusIcon,
+              testID: concatTestID(testID, 'avatar'),
+            }
+            : {
+              statusIcon: trustEntityStatusIcon,
+              placeholderText: "U",
+            }
         }
         entityName={trustEntityName}
         style={style}
-        subline={trustEntitySubline}
         testID={testID}
       />
       {trustEntity && renderMore && renderMore(trustEntity)}

package/src/components/history/history-details-screen.tsx

@@ -0,0 +1,89 @@
+import {
+  HistoryActionEnum,
+  HistoryListItem,
+} from '@procivis/react-native-one-core';
+import React, { FC, ReactElement } from 'react';
+import { ImageSourcePropType } from 'react-native';
+
+import { ColorScheme, useAppColorScheme } from '../../ui-components';
+import {
+  HistoryDetailsLabels,
+  HistoryDetailsView,
+  HistoryDetailsViewProps,
+} from '../../ui-components/history/history-details';
+import { capitalizeFirstLetter, concatTestID, formatDateTimeLocalized } from '../../utils';
+import { HistoryListItemLabels } from './history-list-item';
+import { getHistoryItemActionIcon } from './history-list-item-icon';
+
+const getStatusTextColor = (action: HistoryActionEnum, colorScheme: Readonly<ColorScheme>) => {
+  switch (action) {
+    case HistoryActionEnum.CLAIMS_REMOVED:
+    case HistoryActionEnum.DEACTIVATED:
+    case HistoryActionEnum.DELETED:
+    case HistoryActionEnum.REJECTED:
+    case HistoryActionEnum.REVOKED:
+    case HistoryActionEnum.ERRORED:
+      return colorScheme.errorText;
+    case HistoryActionEnum.SUSPENDED:
+    case HistoryActionEnum.OFFERED:
+    case HistoryActionEnum.PENDING:
+    case HistoryActionEnum.REQUESTED:
+      return colorScheme.text;
+    default:
+      return colorScheme.successText;
+  }
+};
+
+export type HistoryDetailsScreenLabels = HistoryDetailsLabels & {
+  item: HistoryListItemLabels;
+};
+
+export type HistoryDetailsScreenProps = {
+  assets: HistoryDetailsViewProps['assets'];
+  dataHeader: HistoryDetailsViewProps['data']['header'];
+  headerButton?: ReactElement;
+  item: HistoryListItem;
+  labels: HistoryDetailsScreenLabels;
+  onBackPressed: () => void;
+  onInfoPressed?: () => void;
+  onImagePreview: (title: string, image: ImageSourcePropType) => void;
+  testID?: string;
+};
+
+export const HistoryDetailsScreen: FC<HistoryDetailsScreenProps> = ({
+  assets,
+  dataHeader,
+  headerButton,
+  item,
+  labels,
+  onBackPressed,
+  onInfoPressed,
+  onImagePreview,
+  testID = 'HistoryDetailScreen',
+}) => {
+  const colorScheme = useAppColorScheme();
+
+  const actionValueColor = getStatusTextColor(item.action, colorScheme);
+
+  return (
+    <HistoryDetailsView
+      assets={assets}
+      data={{
+        header: dataHeader,
+        date: formatDateTimeLocalized(new Date(item.createdDate)) ?? '',
+        action: {
+          icon: getHistoryItemActionIcon(item.action),
+          label: capitalizeFirstLetter(labels.item.actions[item.action]),
+          color: actionValueColor,
+          testID: concatTestID(testID, 'action', item.action),
+        },
+      }}
+      headerButton={headerButton}
+      labels={labels}
+      onBackPressed={onBackPressed}
+      onInfoPressed={onInfoPressed}
+      onImagePreview={onImagePreview}
+      testID={testID}
+    />
+  );
+};

package/src/components/history/history-list-item-icon.tsx

@@ -0,0 +1,113 @@
+import { HistoryActionEnum, HistoryEntityTypeEnum, HistoryListItem } from '@procivis/react-native-one-core';
+import React, { FC, useMemo } from 'react';
+import { SvgProps } from 'react-native-svg';
+
+import {
+  HistoryBackupCreatedIcon,
+  HistoryBackupRestoredIcon,
+  HistoryCertificateIcon,
+  HistoryCredentialIcon,
+  HistoryDidIcon,
+  HistoryIdentifierIcon,
+  HistoryIssueIcon,
+  HistoryItemIcon,
+  HistoryKeyIcon,
+  HistoryOrganisationIcon,
+  HistoryProofRequestIcon,
+  HistoryRevokeIcon,
+  HistorySchemaIcon,
+  HistoryStatusAcceptedIcon,
+  HistoryStatusDeleteIcon,
+  HistoryStatusErrorIcon,
+  HistoryStatusSuspendIcon,
+  HistorySuspendIcon,
+  HistoryTrustAnchorIcon,
+  HistoryTrustedEntityIcon,
+} from '../../ui-components';
+
+const defaultIcons: {
+  actions: { [key in keyof typeof HistoryActionEnum]: FC<SvgProps> };
+  entityTypes: { [key in keyof typeof HistoryEntityTypeEnum]: FC<SvgProps> };
+} = {
+  actions: {
+    ACCEPTED: HistoryStatusAcceptedIcon,
+    ACTIVATED: HistoryStatusAcceptedIcon,
+    CLAIMS_REMOVED: HistoryStatusDeleteIcon,
+    CREATED: HistoryStatusAcceptedIcon,
+    DEACTIVATED: HistoryStatusErrorIcon,
+    DELETED: HistoryStatusDeleteIcon,
+    ERRORED: HistoryStatusErrorIcon,
+    IMPORTED: HistoryStatusAcceptedIcon,
+    ISSUED: HistoryStatusAcceptedIcon,
+    OFFERED: HistoryStatusAcceptedIcon,
+    PENDING: HistoryStatusAcceptedIcon,
+    REJECTED: HistoryStatusErrorIcon,
+    REMOVED: HistoryStatusDeleteIcon,
+    REQUESTED: HistoryStatusAcceptedIcon,
+    RESTORED: HistoryStatusAcceptedIcon,
+    RETRACTED: HistoryStatusErrorIcon,
+    REVOKED: HistoryStatusErrorIcon,
+    SHARED: HistoryStatusAcceptedIcon,
+    SUSPENDED: HistoryStatusSuspendIcon,
+    UPDATED: HistoryStatusAcceptedIcon,
+    WITHDRAWN: HistoryStatusErrorIcon,
+    REACTIVATED: HistoryStatusAcceptedIcon,
+    CSR_GENERATED: HistoryStatusAcceptedIcon,
+    EXPIRED: HistoryStatusErrorIcon,
+  },
+  entityTypes: {
+    BACKUP: HistoryRevokeIcon,
+    CERTIFICATE: HistoryCertificateIcon,
+    CREDENTIAL: HistoryCredentialIcon,
+    CREDENTIAL_SCHEMA: HistorySchemaIcon,
+    DID: HistoryDidIcon,
+    IDENTIFIER: HistoryIdentifierIcon,
+    KEY: HistoryKeyIcon,
+    ORGANISATION: HistoryOrganisationIcon,
+    PROOF: HistoryProofRequestIcon,
+    PROOF_SCHEMA: HistorySchemaIcon,
+    TRUST_ANCHOR: HistoryTrustAnchorIcon,
+    TRUST_ENTITY: HistoryTrustedEntityIcon,
+  },
+};
+
+export const getHistoryItemActionIcon = (action: HistoryActionEnum) => {
+  return defaultIcons.actions[action] ?? HistoryStatusAcceptedIcon;
+};
+
+export type HistoryListItemIconProps = {
+  item: HistoryListItem;
+};
+
+export const HistoryListItemIcon: FC<HistoryListItemIconProps> = ({ item }) => {
+  const statusIcon = getHistoryItemActionIcon(item.action);
+  const typeIcon = useMemo(() => {
+    switch (item.entityType) {
+      case HistoryEntityTypeEnum.BACKUP:
+        switch (item.action) {
+          case HistoryActionEnum.CREATED:
+            return HistoryBackupCreatedIcon;
+          case HistoryActionEnum.RESTORED:
+            return HistoryBackupRestoredIcon;
+          default:
+            break;
+        }
+        break;
+      case HistoryEntityTypeEnum.CREDENTIAL:
+        switch (item.action) {
+          case HistoryActionEnum.REVOKED:
+            return HistoryRevokeIcon;
+          case HistoryActionEnum.SUSPENDED:
+            return HistorySuspendIcon;
+          default:
+            break;
+        }
+        break;
+      default:
+        break;
+    }
+
+    return defaultIcons.entityTypes[item.entityType] ?? HistoryIssueIcon;
+  }, [item.action, item.entityType]);
+  return <HistoryItemIcon StatusIcon={statusIcon} TypeIcon={typeIcon} />;
+};