inji-wallet/components/ActivityLogText.tsx

import React from 'react';
import {formatDistanceToNow} from 'date-fns';
import {useTranslation} from 'react-i18next';

import * as DateFnsLocale from 'date-fns/locale';
import {TextItem} from './ui/TextItem';
import {ActivityLog, getActionText} from './ActivityLogEvent';
import {useHistoryTab} from '../screens/History/HistoryScreenController';

export const ActivityLogText: React.FC<{activity: ActivityLog}> = props => {
  const {t, i18n} = useTranslation('ActivityLogText');
  const historyController = useHistoryTab();
  const {activity} = props;

  return (
    <TextItem
      label={getActionLabel(activity, i18n.language)}
      text={getActionText(
        activity,
        t,
        historyController.getWellKnownIssuerMap(activity.issuer),
      )}
      divider
    />
  );
};

function getActionLabel(activity: ActivityLog, language: string) {
  return [
    activity.deviceName,
    formatDistanceToNow(activity.timestamp, {
      addSuffix: true,
      locale: DateFnsLocale[language],
    }),
  ]
    .filter(label => label?.trim() !== '')
    .join(' · ');
}