diff --git a/components/VCVerification.tsx b/components/VCVerification.tsx index c4766747..8ee4d765 100644 --- a/components/VCVerification.tsx +++ b/components/VCVerification.tsx @@ -1,20 +1,21 @@ import React from 'react'; -import {View} from 'react-native'; +import { View } from 'react-native'; import testIDProps from '../shared/commonUtil'; -import {Display} from './VC/common/VCUtils'; +import { Display } from './VC/common/VCUtils'; import VerifiedIcon from './VerifiedIcon'; import PendingIcon from './PendingIcon'; -import {Row, Text} from './ui'; -import {Theme} from './ui/styleUtils'; -import {useTranslation} from 'react-i18next'; -import {VCMetadata} from '../shared/VCMetadata'; +import { Row, Text } from './ui'; +import { Theme } from './ui/styleUtils'; +import { useTranslation } from 'react-i18next'; +import { VCMetadata } from '../shared/VCMetadata'; +import { formattedDate } from '../shared/openId4VCI/Utils'; export const VCVerification: React.FC = ({ vcMetadata, display, showLastChecked = true, }) => { - const {t} = useTranslation('VcDetails'); + const { t } = useTranslation('VcDetails'); let statusText: string; let statusIcon: JSX.Element; @@ -44,7 +45,7 @@ export const VCVerification: React.FC = ({ paddingVertical: 6, }}> {/* First Row: Status Icon + Text */} - + {statusIcon} = ({ {showLastChecked && vcMetadata.lastKnownStatusTimestamp && ( - + {t('lastChecked')} @@ -72,7 +73,7 @@ export const VCVerification: React.FC = ({ Theme.Styles.verificationStatus, {fontFamily: 'Montserrat_400Regular'}, ]}> - {new Date(vcMetadata.lastKnownStatusTimestamp).toLocaleString()} + {formattedDate(vcMetadata.lastKnownStatusTimestamp)} )} diff --git a/components/ui/Timestamp.tsx b/components/ui/Timestamp.tsx index 131b7968..68e97279 100644 --- a/components/ui/Timestamp.tsx +++ b/components/ui/Timestamp.tsx @@ -1,22 +1,9 @@ import React from 'react'; import {View} from 'react-native'; import {Text} from '../ui/Text'; +import { formattedDate } from '../../shared/openId4VCI/Utils'; export const Timestamp: React.FC = props => { - function formattedDate(): React.ReactNode { - const date = new Date(props.time); - const day = date.getDate(); - const month = date.toLocaleString('default', {month: 'long'}); - const year = date.getFullYear(); - const formattedHours = (date.getHours() % 12 || 12) - .toString() - .padStart(2, '0'); - const formattedMinutes = date.getMinutes().toString().padStart(2, '0'); - const period = date.getHours() >= 12 ? 'PM' : 'AM'; - - return `${day} ${month} ${year}, ${formattedHours}:${formattedMinutes} ${period}`; - } - return ( = props => { letterSpacing: 0, lineHeight: 17, }}> - {formattedDate()} + {formattedDate(props.time)} ); diff --git a/shared/openId4VCI/Utils.ts b/shared/openId4VCI/Utils.ts index eb1c8dab..2ea1bc96 100644 --- a/shared/openId4VCI/Utils.ts +++ b/shared/openId4VCI/Utils.ts @@ -488,3 +488,17 @@ function resolveEd25519Alg(proofSigningAlgosSupported: string[]) { ? KEY_TYPE_TO_JWT_ALG[KeyTypes.ED25519] : ED25519_PROOF_SIGNING_ALGO; } + +export function formattedDate(time: number|string): React.ReactNode { + const date = new Date(time); + const day = date.getDate(); + const month = date.toLocaleString('default', {month: 'long'}); + const year = date.getFullYear(); + const formattedHours = (date.getHours() % 12 || 12) + .toString() + .padStart(2, '0'); + const formattedMinutes = date.getMinutes().toString().padStart(2, '0'); + const period = date.getHours() >= 12 ? 'PM' : 'AM'; + + return `${day} ${month} ${year}, ${formattedHours}:${formattedMinutes} ${period}`; +}