diff --git a/package-lock.json b/package-lock.json index 8ee742973075..74bea07c6f10 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,7 @@ "@deriv-com/quill-ui": "1.16.20", "@deriv-com/translations": "1.3.9", "@deriv-com/ui": "1.36.2", - "@deriv-com/utils": "^0.0.34", + "@deriv-com/utils": "^0.0.36", "@deriv/api-types": "1.0.172", "@deriv/deriv-api": "^1.0.15", "@deriv/deriv-charts": "^2.5.1", diff --git a/packages/account/package.json b/packages/account/package.json index 8ae45fdc9e6e..1066eb18862f 100644 --- a/packages/account/package.json +++ b/packages/account/package.json @@ -32,7 +32,7 @@ "@binary-com/binary-document-uploader": "^2.4.8", "@deriv-com/analytics": "1.14.0", "@deriv-com/translations": "1.3.9", - "@deriv-com/utils": "^0.0.34", + "@deriv-com/utils": "^0.0.36", "@deriv-com/ui": "1.36.2", "@deriv/api": "^1.0.0", "@deriv-com/quill-ui": "1.16.20", diff --git a/packages/api-v2/package.json b/packages/api-v2/package.json index 1c502f9bcabb..a060ad184e88 100644 --- a/packages/api-v2/package.json +++ b/packages/api-v2/package.json @@ -4,7 +4,7 @@ "version": "1.0.0", "main": "src/index.ts", "dependencies": { - "@deriv-com/utils": "^0.0.34", + "@deriv-com/utils": "^0.0.36", "@deriv-com/translations": "1.3.9", "@deriv/deriv-api": "^1.0.15", "@deriv/shared": "^1.0.0", diff --git a/packages/api/package.json b/packages/api/package.json index 3e4ffc5306b4..138d6d36b827 100644 --- a/packages/api/package.json +++ b/packages/api/package.json @@ -5,7 +5,7 @@ "main": "src/index.ts", "sideEffects": false, "dependencies": { - "@deriv-com/utils": "^0.0.34", + "@deriv-com/utils": "^0.0.36", "@deriv/deriv-api": "^1.0.15", "@deriv/shared": "^1.0.0", "@deriv/utils": "^1.0.0", diff --git a/packages/cfd/package.json b/packages/cfd/package.json index c86b01893362..794347059b87 100644 --- a/packages/cfd/package.json +++ b/packages/cfd/package.json @@ -88,7 +88,7 @@ "@deriv-com/ui": "1.36.2", "@deriv-com/analytics": "1.14.0", "@deriv-com/translations": "1.3.9", - "@deriv-com/utils": "^0.0.34", + "@deriv-com/utils": "^0.0.36", "@deriv/account": "^1.0.0", "@deriv/api": "^1.0.0", "@deriv/api-types": "1.0.172", diff --git a/packages/core/package.json b/packages/core/package.json index 2f6f9d240ed1..dd3fcd73d8e5 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -101,7 +101,7 @@ "@deriv-com/quill-ui": "1.16.20", "@deriv-com/translations": "1.3.9", "@deriv-com/ui": "1.36.2", - "@deriv-com/utils": "^0.0.34", + "@deriv-com/utils": "^0.0.36", "@deriv/account": "^1.0.0", "@deriv/api": "^1.0.0", "@deriv/appstore": "^0.0.4", diff --git a/packages/p2p/package.json b/packages/p2p/package.json index 7c7b6da8138b..d962cbf10f60 100644 --- a/packages/p2p/package.json +++ b/packages/p2p/package.json @@ -34,7 +34,7 @@ "dependencies": { "@deriv-com/ui": "1.36.2", "@deriv-com/analytics": "1.14.0", - "@deriv-com/utils": "^0.0.34", + "@deriv-com/utils": "^0.0.36", "@deriv/api": "^1.0.0", "@deriv/api-types": "1.0.172", "@deriv/components": "^1.0.0", diff --git a/packages/shared/package.json b/packages/shared/package.json index 38c87b4db959..c488f57b3785 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -50,7 +50,7 @@ "@deriv/quill-icons": "1.23.3", "@deriv/api-types": "1.0.172", "@deriv/translations": "^1.0.0", - "@deriv-com/utils": "^0.0.34", + "@deriv-com/utils": "^0.0.36", "@types/js-cookie": "^2.2.1", "@types/react-loadable": "^5.5.6", "canvas-toBlob": "^1.0.0", diff --git a/packages/trader/package.json b/packages/trader/package.json index 5ffff819763d..abbff7031062 100644 --- a/packages/trader/package.json +++ b/packages/trader/package.json @@ -91,7 +91,7 @@ "@deriv-com/analytics": "1.14.0", "@deriv-com/quill-tokens": "2.0.4", "@deriv-com/quill-ui": "1.16.20", - "@deriv-com/utils": "^0.0.34", + "@deriv-com/utils": "^0.0.36", "@deriv-com/ui": "1.36.2", "@deriv/api-types": "1.0.172", "@deriv/components": "^1.0.0", diff --git a/packages/wallets/package.json b/packages/wallets/package.json index 9b41a57b19f8..8436ba8995fc 100644 --- a/packages/wallets/package.json +++ b/packages/wallets/package.json @@ -17,7 +17,7 @@ "@deriv-com/analytics": "1.14.0", "@deriv-com/translations": "1.3.9", "@deriv-com/ui": "1.36.2", - "@deriv-com/utils": "^0.0.34", + "@deriv-com/utils": "^0.0.36", "@deriv/api-v2": "^1.0.0", "@deriv/quill-icons": "1.23.3", "@deriv/utils": "^1.0.0", diff --git a/packages/wallets/src/components/DatePicker/DatePicker.tsx b/packages/wallets/src/components/DatePicker/DatePicker.tsx index c34450f221a6..5cedbb821dfc 100644 --- a/packages/wallets/src/components/DatePicker/DatePicker.tsx +++ b/packages/wallets/src/components/DatePicker/DatePicker.tsx @@ -3,7 +3,7 @@ import { Field, FieldProps } from 'formik'; import Calendar from 'react-calendar'; import { useOnClickOutside } from 'usehooks-ts'; import { LegacyCalendar1pxIcon } from '@deriv/quill-icons'; -import { getFormattedDateString } from '../../utils/utils'; +import { FormatUtils } from '@deriv-com/utils'; import { WalletTextField } from '../Base'; import type { TFormFieldProps } from '../FormField'; import customFormatShortWeekday from './utils'; @@ -11,7 +11,7 @@ import 'react-calendar/dist/Calendar.css'; import './DatePicker.scss'; interface TDatePickerProps extends TFormFieldProps { - displayFormat?: string; + displayFormat?: 'DD MMM YYYY' | 'DD-MM-YYYY' | 'MMM DD YYYY' | 'YYYY-MM-DD'; maxDate?: Date; minDate?: Date; mobileAlignment?: 'above' | 'below'; @@ -47,7 +47,11 @@ const DatePicker = ({
{isCalendarOpen && (
)} diff --git a/packages/wallets/src/components/DerivAppsSection/DerivAppsGetAccount.tsx b/packages/wallets/src/components/DerivAppsSection/DerivAppsGetAccount.tsx index f2be8b6a2a47..c9162dc7166c 100644 --- a/packages/wallets/src/components/DerivAppsSection/DerivAppsGetAccount.tsx +++ b/packages/wallets/src/components/DerivAppsSection/DerivAppsGetAccount.tsx @@ -9,10 +9,10 @@ import { import { displayMoney } from '@deriv/api-v2/src/utils'; import { Localize, useTranslations } from '@deriv-com/translations'; import { Button, Text, useDevice } from '@deriv-com/ui'; +import { FormatUtils } from '@deriv-com/utils'; import { CFDSuccess } from '../../features/cfd/screens/CFDSuccess'; import useAllBalanceSubscription from '../../hooks/useAllBalanceSubscription'; import useSyncLocalStorageClientAccounts from '../../hooks/useSyncLocalStorageClientAccounts'; -import { getFormattedDateString } from '../../utils/utils'; import { ModalStepWrapper } from '../Base'; import { useModal } from '../ModalProvider'; import { TradingAccountCard } from '../TradingAccountCard'; @@ -45,7 +45,10 @@ const DerivAppsGetAccount: React.FC = () => { const createAccountResponse = await createNewRealAccount({ payload: { currency: activeWallet?.currency_config?.display_code, - date_of_birth: getFormattedDateString(Number(dateOfBirth), {}, 'YYYY-MM-DD', true), + date_of_birth: FormatUtils.getFormattedDateString(Number(dateOfBirth), { + format: 'YYYY-MM-DD', + unix: true, + }), first_name: firstName, last_name: lastName, residence: countryCode || '', diff --git a/packages/wallets/src/components/WalletListCardDropdown/WalletListCardDropdown.tsx b/packages/wallets/src/components/WalletListCardDropdown/WalletListCardDropdown.tsx index a915cdbe0d6e..909b725f9acf 100644 --- a/packages/wallets/src/components/WalletListCardDropdown/WalletListCardDropdown.tsx +++ b/packages/wallets/src/components/WalletListCardDropdown/WalletListCardDropdown.tsx @@ -9,7 +9,6 @@ import { Text } from '@deriv-com/ui'; import useAllBalanceSubscription from '../../hooks/useAllBalanceSubscription'; import useWalletAccountSwitcher from '../../hooks/useWalletAccountSwitcher'; import { THooks } from '../../types'; -import reactNodeToString from '../../utils/react-node-to-string'; import { WalletTextField } from '../Base'; import { WalletCurrencyIcon } from '../WalletCurrencyIcon'; import './WalletListCardDropdown.scss'; @@ -18,7 +17,7 @@ type WalletList = { currency: THooks.WalletAccountsList['currency']; currencyConfig: THooks.WalletAccountsList['currency_config']; loginid: THooks.WalletAccountsList['loginid']; - text: React.ReactNode; + text: string; }[]; const WalletListCardDropdown = () => { @@ -120,7 +119,7 @@ const WalletListCardDropdown = () => { })} id={`wallets-listcard-dropdown__item-${index}`} key={wallet.loginid} - onClick={() => handleItemClick(wallet.loginid, reactNodeToString(wallet.text))} + onClick={() => handleItemClick(wallet.loginid, wallet.text)} >
diff --git a/packages/wallets/src/features/accounts/modules/DocumentService/components/VerifyPersonalDetails/VerifyPersonalDetails.tsx b/packages/wallets/src/features/accounts/modules/DocumentService/components/VerifyPersonalDetails/VerifyPersonalDetails.tsx index f27562b34a4d..56c6c77f2e82 100644 --- a/packages/wallets/src/features/accounts/modules/DocumentService/components/VerifyPersonalDetails/VerifyPersonalDetails.tsx +++ b/packages/wallets/src/features/accounts/modules/DocumentService/components/VerifyPersonalDetails/VerifyPersonalDetails.tsx @@ -5,8 +5,8 @@ import { TSocketError } from '@deriv/api-v2/types'; import { DerivLightNameDobPoiIcon } from '@deriv/quill-icons'; import { Localize, useTranslations } from '@deriv-com/translations'; import { InlineMessage, Text } from '@deriv-com/ui'; +import { FormatUtils } from '@deriv-com/utils'; import { DatePicker, FormField } from '../../../../../../components'; -import { getAdjustedDate } from '../../../../../../utils/utils'; import { VerifyPersonalDetailsErrorMessage } from './components'; import { TVerifyPersonalDetailsValues } from './types'; import { @@ -80,9 +80,9 @@ const VerifyPersonalDetails: React.FC = ({ error, o disabled={values.arePersonalDetailsVerified} displayFormat={dateDisplayFormat} label={localize('Date of birth*')} - maxDate={getAdjustedDate(18, 'years')} + maxDate={FormatUtils.getAdjustedDate(18, 'years', 'subtract')} message={localize('Your date of birth as in your identity document')} - minDate={getAdjustedDate(100, 'years')} + minDate={FormatUtils.getAdjustedDate(100, 'years', 'subtract')} mobileAlignment='above' name='dateOfBirth' showMessage diff --git a/packages/wallets/src/features/accounts/modules/DocumentService/components/VerifyPersonalDetails/hooks/useVerifyPersonalDetails.ts b/packages/wallets/src/features/accounts/modules/DocumentService/components/VerifyPersonalDetails/hooks/useVerifyPersonalDetails.ts index dd35cb70bc01..549657fabc50 100644 --- a/packages/wallets/src/features/accounts/modules/DocumentService/components/VerifyPersonalDetails/hooks/useVerifyPersonalDetails.ts +++ b/packages/wallets/src/features/accounts/modules/DocumentService/components/VerifyPersonalDetails/hooks/useVerifyPersonalDetails.ts @@ -2,7 +2,7 @@ import { useState } from 'react'; import { FormikValues } from 'formik'; import { useSettings } from '@deriv/api-v2'; import { TSocketError } from '@deriv/api-v2/types'; -import { getFormattedDateString } from '../../../../../../../utils/utils'; +import { FormatUtils } from '@deriv-com/utils'; import type { TVerifyPersonalDetailsValues } from '../types'; const useVerifyPersonalDetails = () => { @@ -11,7 +11,7 @@ const useVerifyPersonalDetails = () => { const [isSubmitted, setIsSubmitted] = useState(false); const [error, setError] = useState>(); - const formattedDateOfBirth = getFormattedDateString(new Date((settings.date_of_birth ?? 0) * 1000)); + const formattedDateOfBirth = FormatUtils.getFormattedDateString(new Date((settings.date_of_birth ?? 0) * 1000)); const initialValues = { dateOfBirth: formattedDateOfBirth, diff --git a/packages/wallets/src/features/accounts/modules/DocumentService/components/VerifyPersonalDetails/types/types.ts b/packages/wallets/src/features/accounts/modules/DocumentService/components/VerifyPersonalDetails/types/types.ts index a335c22ecc2d..8007c1f5de17 100644 --- a/packages/wallets/src/features/accounts/modules/DocumentService/components/VerifyPersonalDetails/types/types.ts +++ b/packages/wallets/src/features/accounts/modules/DocumentService/components/VerifyPersonalDetails/types/types.ts @@ -1,9 +1,9 @@ +import { FormatUtils } from '@deriv-com/utils'; import { THooks } from '../../../../../../../types'; -import { getFormattedDateString } from '../../../../../../../utils/utils'; export type TVerifyPersonalDetailsValues = { arePersonalDetailsVerified?: boolean; - dateOfBirth?: ReturnType; + dateOfBirth?: ReturnType; firstName: THooks.AccountSettings['first_name']; lastName: THooks.AccountSettings['last_name']; }; diff --git a/packages/wallets/src/features/accounts/modules/ManualService/components/DrivingLicenseUpload/DrivingLicenseUpload.tsx b/packages/wallets/src/features/accounts/modules/ManualService/components/DrivingLicenseUpload/DrivingLicenseUpload.tsx index 199229a65173..945396a9ea68 100644 --- a/packages/wallets/src/features/accounts/modules/ManualService/components/DrivingLicenseUpload/DrivingLicenseUpload.tsx +++ b/packages/wallets/src/features/accounts/modules/ManualService/components/DrivingLicenseUpload/DrivingLicenseUpload.tsx @@ -2,11 +2,11 @@ import React, { useState } from 'react'; import { Formik, FormikValues } from 'formik'; import { Localize, useTranslations } from '@deriv-com/translations'; import { Divider, Loader, Text } from '@deriv-com/ui'; +import { FormatUtils } from '@deriv-com/utils'; import { DatePicker, Dropzone, FormField, ModalStepWrapper } from '../../../../../../components'; import DrivingLicenseCardBack from '../../../../../../public/images/accounts/document-back.svg'; import DrivingLicenseCardFront from '../../../../../../public/images/accounts/driving-license-front.svg'; import { THooks } from '../../../../../../types'; -import { getAdjustedDate } from '../../../../../../utils/utils'; import { Footer } from '../../../components'; import { getGeneralDocumentRules, TManualDocumentComponent } from '../../utils'; import { DocumentRules } from '../DocumentRules'; @@ -106,7 +106,7 @@ const DrivingLicenseUpload: TManualDocumentComponent = ({ documentIssuingCountry />
diff --git a/packages/wallets/src/features/accounts/modules/ManualService/components/IdentityCardUpload/IdentityCardUpload.tsx b/packages/wallets/src/features/accounts/modules/ManualService/components/IdentityCardUpload/IdentityCardUpload.tsx index 2175b1282996..616f30ae37f4 100644 --- a/packages/wallets/src/features/accounts/modules/ManualService/components/IdentityCardUpload/IdentityCardUpload.tsx +++ b/packages/wallets/src/features/accounts/modules/ManualService/components/IdentityCardUpload/IdentityCardUpload.tsx @@ -2,11 +2,11 @@ import React, { useState } from 'react'; import { Formik, FormikValues } from 'formik'; import { Localize, useTranslations } from '@deriv-com/translations'; import { Divider, Loader, Text } from '@deriv-com/ui'; +import { FormatUtils } from '@deriv-com/utils'; import { DatePicker, Dropzone, FormField, ModalStepWrapper } from '../../../../../../components'; import IdentityCardBack from '../../../../../../public/images/accounts/document-back.svg'; import IdentityCardFront from '../../../../../../public/images/accounts/identity-card-front.svg'; import { THooks } from '../../../../../../types'; -import { getAdjustedDate } from '../../../../../../utils/utils'; import { Footer } from '../../../components'; import { getGeneralDocumentRules, TManualDocumentComponent } from '../../utils'; import { DocumentRules } from '../DocumentRules'; @@ -108,7 +108,7 @@ const IdentityCardUpload: TManualDocumentComponent = ({ documentIssuingCountryCo />
diff --git a/packages/wallets/src/features/accounts/modules/ManualService/components/PassportUpload/PassportUpload.tsx b/packages/wallets/src/features/accounts/modules/ManualService/components/PassportUpload/PassportUpload.tsx index 41ebd81bd41d..0e2aab3da490 100644 --- a/packages/wallets/src/features/accounts/modules/ManualService/components/PassportUpload/PassportUpload.tsx +++ b/packages/wallets/src/features/accounts/modules/ManualService/components/PassportUpload/PassportUpload.tsx @@ -2,10 +2,10 @@ import React, { useState } from 'react'; import { Formik, FormikValues } from 'formik'; import { Localize, useTranslations } from '@deriv-com/translations'; import { Divider, Loader, Text } from '@deriv-com/ui'; +import { FormatUtils } from '@deriv-com/utils'; import { DatePicker, Dropzone, FormField, ModalStepWrapper } from '../../../../../../components'; import PassportPlaceholder from '../../../../../../public/images/accounts/passport-placeholder.svg'; import { THooks } from '../../../../../../types'; -import { getAdjustedDate } from '../../../../../../utils/utils'; import { Footer } from '../../../components'; import { getGeneralDocumentRules, TManualDocumentComponent } from '../../utils'; import { DocumentRules } from '../DocumentRules'; @@ -98,7 +98,7 @@ const PassportUpload: TManualDocumentComponent = ({ documentIssuingCountryCode, diff --git a/packages/wallets/src/features/cashier/modules/TransactionStatus/components/CryptoTransaction/CryptoTransaction.tsx b/packages/wallets/src/features/cashier/modules/TransactionStatus/components/CryptoTransaction/CryptoTransaction.tsx index 9741d4c8d6d6..b2bbb6df8ffd 100644 --- a/packages/wallets/src/features/cashier/modules/TransactionStatus/components/CryptoTransaction/CryptoTransaction.tsx +++ b/packages/wallets/src/features/cashier/modules/TransactionStatus/components/CryptoTransaction/CryptoTransaction.tsx @@ -5,10 +5,10 @@ import { LegacyClose1pxIcon } from '@deriv/quill-icons'; import { getTruncatedString } from '@deriv/utils'; import { Localize, useTranslations } from '@deriv-com/translations'; import { Button, Text, useDevice } from '@deriv-com/ui'; +import { FormatUtils } from '@deriv-com/utils'; import { WalletMoney } from '../../../../../../components'; import { useModal } from '../../../../../../components/ModalProvider'; import { THooks } from '../../../../../../types'; -import { getFormattedDateString } from '../../../../../../utils/utils'; import { WalletActionModal } from '../../../../components/WalletActionModal'; import { getFormattedConfirmations, getStatusName } from '../../../../helpers/transaction-helpers'; import './CryptoTransaction.scss'; @@ -111,12 +111,10 @@ const CryptoTransaction: React.FC = ({ - {getFormattedDateString( - transaction.submit_date, - { day: 'numeric', month: 'short', year: 'numeric' }, - undefined, - true - )} + {FormatUtils.getFormattedDateString(transaction.submit_date, { + dateOptions: { day: 'numeric', month: 'short', year: 'numeric' }, + unix: true, + })} {transaction?.transaction_fee && ( diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/TransactionsCompleted.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/TransactionsCompleted.tsx index 1ce91df0d522..1810f76b728b 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/TransactionsCompleted.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/TransactionsCompleted.tsx @@ -2,7 +2,7 @@ import React, { useCallback, useEffect } from 'react'; import { useActiveWalletAccount, useAllAccountsList, useInfiniteTransactions } from '@deriv/api-v2'; import { TSocketRequestPayload } from '@deriv/api-v2/types'; import { Loader, Text } from '@deriv-com/ui'; -import { getFormattedDateString } from '../../../../../../utils/utils'; +import { FormatUtils } from '@deriv-com/utils'; import { useCashierScroll } from '../../../../context'; import { TransactionsCompletedRow } from '../TransactionsCompletedRow'; import { TransactionsNoDataState } from '../TransactionsNoDataState'; @@ -62,12 +62,11 @@ const TransactionsCompleted: React.FC = ({ filter }) => { { accessorFn: row => row.transaction_time && - getFormattedDateString( - row.transaction_time, - { day: '2-digit', month: 'short', year: 'numeric' }, - 'DD MMM YYYY', - true - ), + FormatUtils.getFormattedDateString(row.transaction_time, { + dateOptions: { day: '2-digit', month: 'short', year: 'numeric' }, + format: 'DD MMM YYYY', + unix: true, + }), accessorKey: 'date', header: 'Date', }, @@ -78,12 +77,11 @@ const TransactionsCompleted: React.FC = ({ filter }) => {
{transaction.transaction_time && - getFormattedDateString( - transaction.transaction_time, - { day: '2-digit', month: 'short', year: 'numeric' }, - 'DD MMM YYYY', - true - )} + FormatUtils.getFormattedDateString(transaction.transaction_time, { + dateOptions: { day: '2-digit', month: 'short', year: 'numeric' }, + format: 'DD MMM YYYY', + unix: true, + })}
)} diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedDemoResetBalance/TransactionsCompletedDemoResetBalance.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedDemoResetBalance/TransactionsCompletedDemoResetBalance.tsx index 889ad9f7ef5a..227af50ec6f6 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedDemoResetBalance/TransactionsCompletedDemoResetBalance.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedDemoResetBalance/TransactionsCompletedDemoResetBalance.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import { useActiveWalletAccount, useAllAccountsList, useTransactions } from '@deriv/api-v2'; import { Loader, Text } from '@deriv-com/ui'; -import { getFormattedDateString } from '../../../../../../utils/utils'; +import { FormatUtils } from '@deriv-com/utils'; import { TransactionsCompletedRow } from '../TransactionsCompletedRow'; import { TransactionsNoDataState } from '../TransactionsNoDataState'; import { TransactionsTable } from '../TransactionsTable'; @@ -43,12 +43,11 @@ const TransactionsCompletedDemoResetBalance: React.FC = () => { { accessorFn: row => row.transaction_time && - getFormattedDateString( - row.transaction_time, - { day: '2-digit', month: 'short', year: 'numeric' }, - 'DD MMM YYYY', - true - ), + FormatUtils.getFormattedDateString(row.transaction_time, { + dateOptions: { day: '2-digit', month: 'short', year: 'numeric' }, + format: 'DD MMM YYYY', + unix: true, + }), accessorKey: 'date', header: 'Date', }, @@ -59,12 +58,11 @@ const TransactionsCompletedDemoResetBalance: React.FC = () => {
{transaction.transaction_time && - getFormattedDateString( - transaction.transaction_time, - { day: '2-digit', month: 'short', year: 'numeric' }, - 'DD MMM YYYY', - true - )} + FormatUtils.getFormattedDateString(transaction.transaction_time, { + dateOptions: { day: '2-digit', month: 'short', year: 'numeric' }, + format: 'DD MMM YYYY', + unix: true, + })}
)} diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedRow/TransactionsCompletedRow.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedRow/TransactionsCompletedRow.tsx index 487be0b60f6d..815aa49096f0 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedRow/TransactionsCompletedRow.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedRow/TransactionsCompletedRow.tsx @@ -3,9 +3,9 @@ import classNames from 'classnames'; import { useDebounceCallback } from 'usehooks-ts'; import { Localize, useTranslations } from '@deriv-com/translations'; import { Divider, Text } from '@deriv-com/ui'; +import { FormatUtils } from '@deriv-com/utils'; import { WalletClipboard, WalletMoney } from '../../../../../../components'; import { THooks } from '../../../../../../types'; -import parseCryptoLongcode from '../../../../../../utils/parse-crypto-longcode'; import { getTransactionLabels } from '../../constants'; import { TransactionsCompletedRowAccountDetails, TransactionsCompletedRowTransferAccountDetails } from './components'; import './TransactionsCompletedRow.scss'; @@ -34,7 +34,7 @@ const TransactionsCompletedRowContent: React.FC { const { action_type: actionType, longcode = '', transaction_id: transactionId } = transaction; const { account_type: accountType = '', currency = 'USD', is_virtual: isVirtual } = wallet; - const { addressHash, blockchainHash, splitLongcode } = parseCryptoLongcode(longcode); + const { addressHash, blockchainHash, splitLongcode } = FormatUtils.parseCryptoLongcode(longcode); let descriptions = [longcode]; if (addressHash || blockchainHash) { diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/TransactionsPending.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/TransactionsPending.tsx index dbe3eede1aff..e53b39dd4c19 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/TransactionsPending.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/TransactionsPending.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import { useCryptoTransactions } from '@deriv/api-v2'; import { Loader, Text } from '@deriv-com/ui'; -import { getFormattedDateString } from '../../../../../../utils/utils'; +import { FormatUtils } from '@deriv-com/utils'; import { TransactionsNoDataState } from '../TransactionsNoDataState'; import { TransactionsPendingRow } from '../TransactionsPendingRow'; import { TransactionsTable } from '../TransactionsTable'; @@ -33,12 +33,11 @@ const TransactionsPending: React.FC = ({ filter = 'all' }) => { columns={[ { accessorFn: row => - getFormattedDateString( - row.submit_date, - { day: '2-digit', month: 'short', year: 'numeric' }, - 'DD MMM YYYY', - true - ), + FormatUtils.getFormattedDateString(row.submit_date, { + dateOptions: { day: '2-digit', month: 'short', year: 'numeric' }, + format: 'DD MMM YYYY', + unix: true, + }), accessorKey: 'date', header: 'Date', }, @@ -49,12 +48,11 @@ const TransactionsPending: React.FC = ({ filter = 'all' }) => {
{transaction.submit_date && - getFormattedDateString( - transaction.submit_date, - { day: '2-digit', month: 'short', year: 'numeric' }, - 'DD MMM YYYY', - true - )} + FormatUtils.getFormattedDateString(transaction.submit_date, { + dateOptions: { day: '2-digit', month: 'short', year: 'numeric' }, + format: 'DD MMM YYYY', + unix: true, + })}
)} diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx index 1fbc551d2422..60a8df4b0ad1 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx @@ -5,11 +5,11 @@ import { LegacyClose1pxIcon } from '@deriv/quill-icons'; import { getTruncatedString } from '@deriv/utils'; import { Localize, useTranslations } from '@deriv-com/translations'; import { Button, Divider, Text, Tooltip, useDevice } from '@deriv-com/ui'; +import { FormatUtils } from '@deriv-com/utils'; import { WalletCurrencyCard, WalletMoney } from '../../../../../../components'; import { useModal } from '../../../../../../components/ModalProvider'; import useIsRtl from '../../../../../../hooks/useIsRtl'; import { THooks } from '../../../../../../types'; -import { getFormattedDateString, getFormattedTimeString } from '../../../../../../utils/utils'; import { WalletActionModal } from '../../../../components/WalletActionModal'; import { getFormattedConfirmations, @@ -158,12 +158,10 @@ const TransactionsPendingRow: React.FC = ({ transaction }) => { /> = ({ transaction }) => { className={{ 'wallets-transactions-pending-row__transaction-time': isDesktop }} name={localize('Time')} value={`${ - isDesktop && `${getFormattedDateString(transaction.submit_date, {}, undefined, true)} ` - }${getFormattedTimeString(transaction.submit_date, true)}`} + isDesktop && + `${FormatUtils.getFormattedDateString(transaction.submit_date, { unix: true })} ` + }${FormatUtils.getFormattedTimeString(transaction.submit_date, true)}`} valueTextProps={{ color: 'general', size: isDesktop ? '2xs' : 'xs', diff --git a/packages/wallets/src/utils/__tests__/parse-crypto-longcode.spec.ts b/packages/wallets/src/utils/__tests__/parse-crypto-longcode.spec.ts deleted file mode 100644 index 92ea8b5ce228..000000000000 --- a/packages/wallets/src/utils/__tests__/parse-crypto-longcode.spec.ts +++ /dev/null @@ -1,62 +0,0 @@ -import parseCryptoLongcode from '../parse-crypto-longcode'; - -describe('parseCryptoLongcode', () => { - it('correctly parses a valid long code', () => { - const longCode = - 'address: abc123def456ghi789jkl012mno345pqr678stu9, transaction: xyz123abc456def789ghi012jkl345mno678pqr901'; - const result = parseCryptoLongcode(longCode); - - expect(result).toEqual({ - addressHash: 'abc123def456ghi789jkl012mno345pqr678stu9', - blockchainHash: 'xyz123abc456def789ghi012jkl345mno678pqr901', - splitLongcode: [ - 'address: abc123def456ghi789jkl012mno345pqr678stu9', - 'transaction: xyz123abc456def789ghi012jkl345mno678pqr901', - ], - }); - }); - - it('handles missing address hash gracefully', () => { - const longCode = 'address:, transaction: xyz123abc456def789ghi012jkl345mno678pqr901'; - const result = parseCryptoLongcode(longCode); - - expect(result).toEqual({ - addressHash: undefined, - blockchainHash: 'xyz123abc456def789ghi012jkl345mno678pqr901', - splitLongcode: ['address:', 'transaction: xyz123abc456def789ghi012jkl345mno678pqr901'], - }); - }); - - it('handles missing blockchain hash gracefully', () => { - const longCode = 'address: abc123def456ghi789jkl012mno345pqr678stu9, transaction:'; - const result = parseCryptoLongcode(longCode); - - expect(result).toEqual({ - addressHash: 'abc123def456ghi789jkl012mno345pqr678stu9', - blockchainHash: undefined, - splitLongcode: ['address: abc123def456ghi789jkl012mno345pqr678stu9', 'transaction:'], - }); - }); - - it('handles a completely malformed code gracefully', () => { - const longCode = 'malformed code without hashes'; - const result = parseCryptoLongcode(longCode); - - expect(result).toEqual({ - addressHash: undefined, - blockchainHash: undefined, - splitLongcode: ['malformed code without hashes'], - }); - }); - - it('works when an empty string is passed', () => { - const longCode = ''; - const result = parseCryptoLongcode(longCode); - - expect(result).toEqual({ - addressHash: undefined, - blockchainHash: undefined, - splitLongcode: [''], - }); - }); -}); diff --git a/packages/wallets/src/utils/__tests__/utils.spec.ts b/packages/wallets/src/utils/__tests__/utils.spec.ts index e51f81df0536..cdc089449afb 100644 --- a/packages/wallets/src/utils/__tests__/utils.spec.ts +++ b/packages/wallets/src/utils/__tests__/utils.spec.ts @@ -1,88 +1,7 @@ -import { - defineViewportHeight, - getAdjustedDate, - getFormattedDateString, - getFormattedTimeString, - isServerError, -} from '../utils'; +import { defineViewportHeight, isServerError } from '../utils'; import '@testing-library/jest-dom'; describe('Wallets Utils', () => { - describe('getFormattedDateString', () => { - test('converts current date to formatted string in default format', () => { - const currentDate = new Date('2023-05-15T12:00:00Z'); - const formattedDate = getFormattedDateString(currentDate); - expect(formattedDate).toBe('2023-05-15'); - }); - - test('formats date string in "DD MMM YYYY" format', () => { - const dateString = '2023-05-15T12:00:00Z'; - const formattedDate = getFormattedDateString(dateString, undefined, 'DD MMM YYYY'); - expect(formattedDate).toBe('15 May 2023'); - }); - - test('formats date string in "MMM DD YYYY" format', () => { - const dateString = '2023-05-15T12:00:00Z'; - const formattedDate = getFormattedDateString(dateString, undefined, 'MMM DD YYYY'); - expect(formattedDate).toBe('May 15 2023'); - }); - - test('handles Unix timestamp', () => { - const unixTimestamp = 1684152000; // 2023-05-15T12:00:00Z - const formattedDate = getFormattedDateString(unixTimestamp, undefined, 'YYYY-MM-DD', true); - expect(formattedDate).toBe('2023-05-15'); - }); - - test('throws error for invalid input', () => { - expect(() => getFormattedDateString({} as Date)).toThrow('Invalid date input'); - }); - }); - - describe('getFormattedTimeString', () => { - beforeAll(() => { - jest.useFakeTimers('modern'); - jest.setSystemTime(new Date('2024-09-01T12:30:45Z')); - }); - - afterAll(() => { - jest.useRealTimers(); - }); - - test('converts current date to formatted time string', () => { - const currentDate = new Date('2024-09-01T12:30:45Z'); - const formattedTime = getFormattedTimeString(currentDate); - expect(formattedTime).toBe('12:30:45 GMT'); - }); - - test('handles Unix timestamp', () => { - const date = new Date('2024-09-01T12:30:45Z'); - const unixTimestamp = Math.floor(date.getTime() / 1000); - - const formattedTime = getFormattedTimeString(unixTimestamp, true); - expect(formattedTime).toBe('12:30:45 GMT'); - }); - - test('throws error for invalid input', () => { - expect(() => getFormattedTimeString({} as Date)).toThrow('Invalid date input'); - }); - }); - - describe('getAdjustedDate', () => { - test('adjusts date by days', () => { - const adjustedDate = getAdjustedDate(5, 'days'); - const expectedDate = new Date(); - expectedDate.setDate(expectedDate.getDate() + 5); - expect(adjustedDate.toDateString()).toBe(expectedDate.toDateString()); - }); - - test('adjusts date by years', () => { - const adjustedDate = getAdjustedDate(2, 'years'); - const expectedDate = new Date(); - expectedDate.setFullYear(expectedDate.getFullYear() - 2); - expect(adjustedDate.toDateString()).toBe(expectedDate.toDateString()); - }); - }); - describe('isServerError', () => { test('returns true for valid server error object', () => { const error = { code: '123', message: 'Error message' }; diff --git a/packages/wallets/src/utils/parse-crypto-longcode.ts b/packages/wallets/src/utils/parse-crypto-longcode.ts deleted file mode 100644 index 4d09f26bc34a..000000000000 --- a/packages/wallets/src/utils/parse-crypto-longcode.ts +++ /dev/null @@ -1,11 +0,0 @@ -const parseCryptoLongcode = (longcode: string) => { - const splitLongcode = longcode.split(/,\s/); - const addressHashMatch = /:\s([0-9a-zA-Z]+.{25,28})/gm.exec(splitLongcode[0]); - const addressHash = addressHashMatch?.[1]; - const blockchainHashMatch = /:\s([0-9a-zA-Z]+.{25,34})/gm.exec(splitLongcode[1]); - const blockchainHash = blockchainHashMatch?.[1]; - - return { addressHash, blockchainHash, splitLongcode }; -}; - -export default parseCryptoLongcode; diff --git a/packages/wallets/src/utils/react-node-to-string.ts b/packages/wallets/src/utils/react-node-to-string.ts deleted file mode 100644 index 34b2a8aeef72..000000000000 --- a/packages/wallets/src/utils/react-node-to-string.ts +++ /dev/null @@ -1,19 +0,0 @@ -import React, { isValidElement } from 'react'; - -const reactNodeToString = function (reactNode: React.ReactNode): string { - let string = ''; - if (typeof reactNode === 'string') { - string = reactNode; - } else if (typeof reactNode === 'number') { - string = reactNode.toString(); - } else if (reactNode instanceof Array) { - reactNode.forEach(function (child) { - string += reactNodeToString(child); - }); - } else if (isValidElement(reactNode)) { - string += reactNodeToString(reactNode.props.children); - } - return string; -}; - -export default reactNodeToString; diff --git a/packages/wallets/src/utils/utils.ts b/packages/wallets/src/utils/utils.ts index 1f9bf1a0e706..35f3fb3654f8 100644 --- a/packages/wallets/src/utils/utils.ts +++ b/packages/wallets/src/utils/utils.ts @@ -1,89 +1,3 @@ -/** - * A utility function that returns a formatted date string after converting date objects/strings. - * @param dateInput - The date object, string, or Unix timestamp that needs to be converted/formatted. - * @param options - (Optional) Intl.DateTimeFormatOptions to specify the format of the returned date. Default format is 'YYYY-MM-DD' (ISO 8601). - * @param format - (Optional) The predefined format of the returned date. Available options: 'YYYY-MM-DD', 'DD MMM YYYY', 'MMM DD YYYY'. - * @param unix - (Optional) If true, treats the input as a Unix timestamp. - * @returns Formatted date string according to the specified format. - */ -export const getFormattedDateString = ( - dateInput: Date | number | string, - options: Intl.DateTimeFormatOptions = { day: '2-digit', month: '2-digit', year: 'numeric' }, - format = 'YYYY-MM-DD', - unix = false -): string => { - let dateObj: Date; - const dateOptions: Intl.DateTimeFormatOptions = { ...options }; - - if (typeof dateInput === 'number' && unix) { - dateObj = new Date(dateInput * 1000); - } else if (typeof dateInput === 'string' || dateInput instanceof Date) { - dateObj = new Date(dateInput); - } else { - throw new Error('Invalid date input'); - } - - // Custom handling for different input formats - switch (format) { - case 'DD MMM YYYY': - dateOptions.day = '2-digit'; - dateOptions.month = 'short'; - dateOptions.year = 'numeric'; - break; - case 'MMM DD YYYY': - dateOptions.day = '2-digit'; - dateOptions.month = 'short'; - dateOptions.year = 'numeric'; - return dateObj.toLocaleDateString('en-GB', dateOptions).replace(/(\d{2}) (\w{3}) (\d{4})/, '$2 $1 $3'); - default: - dateOptions.year = 'numeric'; - dateOptions.month = '2-digit'; - dateOptions.day = '2-digit'; - break; - } - - const formattedDate = dateObj - .toLocaleDateString('en-GB', dateOptions) - .replace(/(\d{2}) (\w{3,4}) (\d{4})/, (_, day, month, year) => `${day} ${month.slice(0, 3)} ${year}`); - return format === 'DD MMM YYYY' || format === 'MMM DD YYYY' - ? formattedDate - : formattedDate.replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$3-$2-$1'); -}; - -/** - * A utility function which returns a formatted time string. - * @param dateInput the date object or string which needs to be converted/formatted. - * @param unix (optional) if true, treats the input as a Unix timestamp. - * @returns formatted time string in 'HH:mm:ss GMT' format. - */ -export const getFormattedTimeString = (dateInput: Date | number | string, unix = false): string => { - let dateObj: Date; - - if (typeof dateInput === 'number' && unix) { - dateObj = new Date(dateInput * 1000); - } else if (typeof dateInput === 'string' || dateInput instanceof Date) { - dateObj = new Date(dateInput); - } else { - throw new Error('Invalid date input'); - } - - // Utilize UTC methods to return time in GMT regardless of local timezone - return `${dateObj.getUTCHours().toString().padStart(2, '0')}:${dateObj - .getUTCMinutes() - .toString() - .padStart(2, '0')}:${dateObj.getUTCSeconds().toString().padStart(2, '0')} GMT`; -}; - -export const getAdjustedDate = (amount: number, type: 'days' | 'years') => { - const date = new Date(); - if (type === 'years') { - date.setFullYear(date.getFullYear() - amount); - } else if (type === 'days') { - date.setDate(date.getDate() + amount); - } - return date; -}; - type TServerError = { code: string; details?: { [key: string]: string };