refactor(packages): dropped moment.js (#2476)

apps/wallet-mobile/package.json

@@ -115,7 +115,6 @@
     "expo-camera": "^13.2.1",
     "jsc-android": "241213.1.0",
     "lodash": "^4.17.21",
-    "moment": "2.29.1",
     "react": "18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-intl": "^6.4.1",

apps/wallet-mobile/src/TxHistory/TxDetails/TxDetails.tsx

@@ -9,7 +9,7 @@ import {ScrollView} from 'react-native-gesture-handler'
 
 import {Banner, Boundary, Button, CopyButton, FadeIn, Icon, StatusBar, Text} from '../../components'
 import globalMessages from '../../i18n/global-messages'
-import {formatDateToSeconds, formatTokenWithSymbol} from '../../legacy/format'
+import {formatDateAndTime, formatTokenWithSymbol} from '../../legacy/format'
 import AddressModal from '../../Receive/AddressModal'
 import {useSelectedWallet} from '../../SelectedWallet'
 import {brand, COLORS} from '../../theme'
@@ -19,7 +19,7 @@ import {getNetworkConfigById} from '../../yoroi-wallets/cardano/networks'
 import {CardanoTypes, YoroiWallet} from '../../yoroi-wallets/cardano/types'
 import {useTipStatus, useTransactionInfos} from '../../yoroi-wallets/hooks'
 import {NetworkId, TransactionInfo} from '../../yoroi-wallets/types'
-import {asQuantity} from '../../yoroi-wallets/utils'
+import {asQuantity, isNonNullable} from '../../yoroi-wallets/utils'
 import {AssetList} from './AssetList'
 import assetListStyle from './AssetListTransaction.style'
 
@@ -37,7 +37,7 @@ export const TxDetails = () => {
   const transaction = transactions[id]
   const memo = !isEmptyString(transaction.memo) ? transaction.memo : '-'
 
-  useTitle(formatDateToSeconds(transaction.submittedAt))
+  useTitle(isNonNullable(transaction.submittedAt) ? formatDateAndTime(transaction.submittedAt, intl) : '')
 
   const {fromFiltered, toFiltered, cntOmittedTo} = getShownAddresses(
     intl,

apps/wallet-mobile/src/TxHistory/TxHistoryList/TxHistoryList.tsx

@@ -11,6 +11,7 @@ import {formatDateRelative} from '../../legacy/format'
 import {useSelectedWallet} from '../../SelectedWallet'
 import {useTransactionInfos} from '../../yoroi-wallets/hooks'
 import {TransactionInfo} from '../../yoroi-wallets/types'
+import {isString} from '../../yoroi-wallets/utils'
 import {ActionsBanner} from './ActionsBanner'
 import {EmptyHistory} from './EmptyHistory'
 import {TxHistoryListItem} from './TxHistoryListItem'
@@ -86,7 +87,7 @@ const DayHeader = ({ts}: DayHeaderProps) => {
 
   return (
     <View style={styles.dayHeaderRoot}>
-      <Text testID="dayHeaderText">{formatDateRelative(ts, intl)}</Text>
+      <Text testID="dayHeaderText">{isString(ts) ? formatDateRelative(ts, intl) : ''}</Text>
     </View>
   )
 }

apps/wallet-mobile/src/TxHistory/TxHistoryList/TxHistoryListItem.tsx

@@ -8,7 +8,7 @@ import {StyleSheet, TouchableOpacity, View, ViewProps} from 'react-native'
 
 import {Spacer, Text} from '../../components'
 import {Icon} from '../../components/Icon'
-import {formatTimeToSeconds, formatTokenFractional, formatTokenInteger} from '../../legacy/format'
+import {formatTime, formatTokenFractional, formatTokenInteger} from '../../legacy/format'
 import utfSymbols from '../../legacy/utfSymbols'
 import {TxHistoryRouteNavigation} from '../../navigation'
 import {useSelectedWallet} from '../../SelectedWallet'
@@ -17,7 +17,7 @@ import {isEmptyString} from '../../utils/utils'
 import {MultiToken} from '../../yoroi-wallets/cardano/MultiToken'
 import {YoroiWallet} from '../../yoroi-wallets/cardano/types'
 import {IOData, TransactionAssurance, TransactionDirection, TransactionInfo} from '../../yoroi-wallets/types'
-import {asQuantity} from '../../yoroi-wallets/utils'
+import {asQuantity, isNonNullable} from '../../yoroi-wallets/utils'
 
 type Props = {
   transaction: TransactionInfo
@@ -28,9 +28,10 @@ export const TxHistoryListItem = ({transaction}: Props) => {
   const navigation = useNavigation<TxHistoryRouteNavigation>()
 
   const wallet = useSelectedWallet()
+  const intl = useIntl()
 
   const showDetails = () => navigation.navigate('history-details', {id: transaction.id})
-  const submittedAt = formatTimeToSeconds(transaction.submittedAt)
+  const submittedAt = isNonNullable(transaction.submittedAt) ? formatTime(transaction.submittedAt, intl) : ''
 
   const isPending = transaction.assurance === 'PENDING'
   const isReceived = transaction.direction === 'RECEIVED'

apps/wallet-mobile/src/legacy/format.ts

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import AssetFingerprint from '@emurgo/cip14-js'
 import {BigNumber} from 'bignumber.js'
-import moment from 'moment'
 import type {IntlShape} from 'react-intl'
 import {defineMessages} from 'react-intl'
 
@@ -147,25 +146,60 @@ export const formatAdaWithText = (amount: Quantity, defaultAsset: DefaultAsset)
   return `${formatAda(amount, defaultAsset)}${utfSymbols.NBSP}${defaultAssetMeta.ticker}`
 }
 
-export const formatTimeToSeconds = (ts: string | any) => {
-  return moment(ts).format((moment(0) as any)._locale._format.timeToSeconds)
+export const formatTime = (timestamp: string, intl: IntlShape) => {
+  if (timestamp.length === 0) {
+    return ''
+  }
+  return intl.formatTime(new Date(timestamp), {
+    timeStyle: 'medium',
+  })
 }
 
-export const formatDateToSeconds = (ts: string | any) => {
-  return moment(ts).format((moment(0) as any)._locale._format.dateToSeconds)
+export const formatDateAndTime = (timestamp: string, intl: IntlShape) => {
+  if (timestamp.length === 0) {
+    return ''
+  }
+  return intl.formatDate(new Date(timestamp), {
+    dateStyle: 'long',
+    timeStyle: 'medium',
+  })
 }
 
-export const formatDateRelative = (ts: string | any, intl: IntlShape) => {
-  const config = {
-    sameDay: `[${intl.formatMessage(messages.today)}]`,
-    lastDay: `[${intl.formatMessage(messages.yesterday)}]`,
-    nextDay: 'L',
-    // we don't really have dates in future
-    lastWeek: 'L',
-    nextWeek: 'L',
-    sameElse: 'L',
+export const formatDateRelative = (timestamp: string, intl: IntlShape) => {
+  if (timestamp.length === 0) {
+    return ''
+  }
+  const inputDateString = getDateString(new Date(timestamp))
+  const today = getToday()
+  const yesterday = getYesterday()
+
+  if (inputDateString === today) {
+    return intl.formatMessage(messages.today)
+  }
+
+  if (inputDateString === yesterday) {
+    return intl.formatMessage(messages.yesterday)
   }
-  return moment(ts).calendar(null, config)
+
+  return intl.formatDate(new Date(timestamp), {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+  })
+}
+
+function getDateString(date: Date) {
+  return date.toISOString().split('T')[0]
+}
+
+function getYesterday() {
+  const date = new Date()
+  date.setDate(date.getDate() - 1)
+  return getDateString(date)
+}
+
+function getToday() {
+  return getDateString(new Date())
 }
 
 const messages = defineMessages({