[WALL] Lubega / WALL-4911 / Migrate wallets utils to deriv-com/utils (d…

…eriv-com#17010) * chore: migrate utils to deriv-com/utils * fix: remove react-node-to-string * fix: update library version
heorhi-deriv · Oct 15, 2024 · 4528eab · 4528eab
1 parent 11256f0
commit 4528eab
Show file tree

Hide file tree

Showing 30 changed files with 95 additions and 351 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -3,15 +3,15 @@ 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';
 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 = ({
                     <div className='wallets-datepicker' ref={datePickerRef}>
                         <WalletTextField
                             autoComplete='off'
-                            defaultValue={field.value ? getFormattedDateString(field.value, {}, displayFormat) : ''}
+                            defaultValue={
+                                field.value
+                                    ? FormatUtils.getFormattedDateString(field.value, { format: displayFormat })
+                                    : ''
+                            }
                             disabled={disabled}
                             errorMessage={hasTouched && form.errors[name] ? form.errors[name] : undefined}
                             inputMode='none'
@@ -70,7 +74,11 @@ const DatePicker = ({
                             )}
                             showMessage
                             type='text'
-                            value={field.value ? getFormattedDateString(field.value, {}, displayFormat) : ''}
+                            value={
+                                field.value
+                                    ? FormatUtils.getFormattedDateString(field.value, { format: displayFormat })
+                                    : ''
+                            }
                         />
                         {isCalendarOpen && (
                             <div
@@ -87,10 +95,12 @@ const DatePicker = ({
                                         setIsCalendarOpen(false);
                                         form.setFieldValue(
                                             name,
-                                            getFormattedDateString(calendarSelectedDate as Date, {}, 'YYYY-MM-DD')
+                                            FormatUtils.getFormattedDateString(calendarSelectedDate as Date, {
+                                                format: 'YYYY-MM-DD',
+                                            })
                                         );
                                     }}
-                                    value={field.value ? getFormattedDateString(field.value) : ''}
+                                    value={field.value ? FormatUtils.getFormattedDateString(field.value) : ''}
                                 />
                             </div>
                         )}

diff --git 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
@@ -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)}
                                 >
                                     <div className='wallets-listcard-dropdown__list-item'>
                                         <WalletCurrencyIcon currency={wallet.currency ?? 'USD'} rounded />

diff --git a/...counts/modules/DocumentService/components/VerifyPersonalDetails/VerifyPersonalDetails.tsx b/...counts/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<TVerifyPersonalDetailsProps> = ({ 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/...odules/DocumentService/components/VerifyPersonalDetails/hooks/useVerifyPersonalDetails.ts b/...odules/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<TSocketError<'set_settings'>>();
 
-    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/...features/accounts/modules/DocumentService/components/VerifyPersonalDetails/types/types.ts b/...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<typeof getFormattedDateString>;
+    dateOfBirth?: ReturnType<typeof FormatUtils.getFormattedDateString>;
     firstName: THooks.AccountSettings['first_name'];
     lastName: THooks.AccountSettings['last_name'];
 };
diff --git a/...s/accounts/modules/ManualService/components/DrivingLicenseUpload/DrivingLicenseUpload.tsx b/...s/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
                                     />
                                     <DatePicker
                                         label={localize('Expiry date*')}
-                                        minDate={getAdjustedDate(2, 'days')}
+                                        minDate={FormatUtils.getAdjustedDate(2, 'days')}
                                         name='drivingLicenseExpiryDate'
                                     />
                                 </div>

diff --git a/...tures/accounts/modules/ManualService/components/IdentityCardUpload/IdentityCardUpload.tsx b/...tures/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
                                     />
                                     <DatePicker
                                         label={localize('Expiry date*')}
-                                        minDate={getAdjustedDate(2, 'days')}
+                                        minDate={FormatUtils.getAdjustedDate(2, 'days')}
                                         name='identityCardExpiryDate'
                                     />
                                 </div>

diff --git a/.../src/features/accounts/modules/ManualService/components/PassportUpload/PassportUpload.tsx b/.../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,
                                     <FormField label={localize('Passport number*')} name='passportNumber' />
                                     <DatePicker
                                         label={localize('Expiry date*')}
-                                        minDate={getAdjustedDate(2, 'days')}
+                                        minDate={FormatUtils.getAdjustedDate(2, 'days')}
                                         name='passportExpiryDate'
                                     />
                                 </div>

diff --git a/...ures/cashier/modules/TransactionStatus/components/CryptoTransaction/CryptoTransaction.tsx b/...ures/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<TCryptoTransaction> = ({
                     <WalletMoney amount={transaction.amount} currency={currency} />
                 </Text>
                 <Text align='start' color='less-prominent' size='2xs'>
-                    {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,
+                    })}
                 </Text>
             </div>
             {transaction?.transaction_fee && (