Error fixes

package.json

@@ -24,6 +24,7 @@
     "@tanstack/react-query": "^5.28.14",
     "@tanstack/react-table": "^8.15.0",
     "@types/history": "^5.0.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "clsx": "^2.1.0",
     "downshift": "^9.0.0",
     "history": "^5.3.0",
@@ -44,6 +45,7 @@
     "sass-loader": "^14.2.1",
     "use-query-params": "^2.2.1",
     "usehooks-ts": "^2.16.0",
+    "vite": "^5.1.4",
     "vite-plugin-svgr": "^4.2.0"
   },
   "devDependencies": {
@@ -72,7 +74,6 @@
     "@types/react-transition-group": "^4.4.10",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.56.0",
     "eslint-plugin-prettier": "^5.0.0",
@@ -96,7 +97,6 @@
     "tailwindcss": "^3.3.5",
     "ts-jest": "^29.1.2",
     "typescript": "^5.2.2",
-    "vite": "^5.1.4",
     "vite-plugin-sass": "^0.1.0"
   }
 }

src/components/AdvertiserName/AdvertiserNameStats.tsx

@@ -65,7 +65,7 @@ const AdvertiserNameStats = ({ advertiserStats }: { advertiserStats: DeepPartial
                                     ({ratingAverage})
                                 </Text>
                             )}
-                            <StarRating allowHalfIcon isReadonly ratingValue={ratingAverage} />
+                            <StarRating allowFraction isReadonly ratingValue={ratingAverage} />
                             <Text color='less-prominent' size='sm'>
                                 ({ratingCount} ratings)
                             </Text>

src/components/AdvertsTableRow/AdvertsTableRow.tsx

@@ -107,7 +107,7 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
                                             {ratingAverageDecimal}
                                         </Text>
                                         <StarRating
-                                            allowHalfIcon
+                                            allowFraction
                                             isReadonly
                                             ratingValue={Number(ratingAverageDecimal)}
                                             starsScale={isMobile ? 0.7 : 0.9}

src/components/BuySellForm/BuySellForm.tsx

@@ -2,7 +2,7 @@
 import { useEffect, useState } from 'react';
 import { Control, Controller, FieldValues, useForm } from 'react-hook-form';
 import { useHistory } from 'react-router-dom';
-import { TAdvertType, THooks } from 'types';
+import { TAdvertType, TCurrency, THooks } from 'types';
 import { BUY_SELL, ORDERS_URL, RATE_TYPE, VALID_SYMBOLS_PATTERN } from '@/constants';
 import { api } from '@/hooks';
 import {
@@ -197,10 +197,10 @@ const BuySellForm = ({
                     accountCurrency={account_currency}
                     amount={initialAmount}
                     calculatedRate={calculatedRate}
-                    control={control as unknown as Control<FieldValues, unknown, FieldValues>}
+                    control={control as unknown as Control<FieldValues>}
                     isBuy={isBuy}
                     isDisabled={shouldDisableField}
-                    localCurrency={local_currency}
+                    localCurrency={local_currency as TCurrency}
                     maxLimit={getAdvertiserMaxLimit(
                         isBuy,
                         advertiserBuyLimit,

src/components/BuySellForm/__tests__/BuySellForm.spec.tsx

@@ -1,4 +1,3 @@
-import Modal from 'react-modal';
 import { floatingPointValidator } from '@/utils';
 import { useDevice } from '@deriv-com/ui';
 import { render, screen } from '@testing-library/react';
@@ -99,17 +98,8 @@ const mockProps = {
         },
     ],
 };
-let element: HTMLElement;
+
 describe('BuySellForm', () => {
-    beforeAll(() => {
-        element = document.createElement('div');
-        element.setAttribute('id', 'v2_modal_root');
-        document.body.appendChild(element);
-        Modal.setAppElement('#v2_modal_root');
-    });
-    afterAll(() => {
-        document.body.removeChild(element);
-    });
     it('should render the form as expected', () => {
         render(<BuySellForm {...mockProps} />);
         expect(screen.getByText('Buy USD')).toBeInTheDocument();

src/components/Dropdown/Dropdown.tsx

@@ -1,10 +1,11 @@
 import { FC, ReactNode, useCallback, useEffect, useState } from 'react';
 import clsx from 'clsx';
 import { useCombobox } from 'downshift';
-import { TextField, TextFieldProps } from '@/components';
+import { TextField } from '@/components';
 import { reactNodeToString } from '@/utils';
 import { LabelPairedChevronDownMdRegularIcon } from '@deriv/quill-icons';
 import { Text } from '@deriv-com/ui';
+import { TextFieldProps } from '../TextField/TextField';
 import './Dropdown.scss';
 
 type TGenericSizes = '2xl' | '2xs' | '3xl' | '3xs' | '4xl' | '5xl' | '6xl' | 'lg' | 'md' | 'sm' | 'xl' | 'xs';

src/components/FlyoutMenu/FlyoutMenu.tsx

@@ -6,7 +6,7 @@ import './FlyoutMenu.scss';
 
 type TFlyoutMenuProps = HTMLAttributes<HTMLDivElement> & {
     listItems?: ReactNode[];
-    renderIcon?: () => React.ReactNode;
+    renderIcon?: () => ReactNode;
 };
 
 const FlyoutMenu = ({ listItems, renderIcon, ...props }: TFlyoutMenuProps) => {

src/components/Header/__tests__/Header.spec.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { useAuthData } from '@deriv-com/api-hooks';
 import { URLUtils } from '@deriv-com/utils';
 import { render, screen } from '@testing-library/react';
@@ -11,7 +12,7 @@ jest.mock('@deriv-com/api-hooks', () => ({
 
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
-    Button: ({ children, onClick }: { children: React.ReactNode; onClick: () => void }) => (
+    Button: ({ children, onClick }: { children: ReactNode; onClick: () => void }) => (
         <button onClick={onClick}>{children}</button>
     ),
 }));

src/components/Modals/AdCreateEditErrorModal/AdCreateEditErrorModal.tsx

@@ -1,18 +1,17 @@
+import { TErrorCodes } from 'types';
 import { ERROR_CODES } from '@/constants';
 import { Button, Modal, Text, useDevice } from '@deriv-com/ui';
 import './AdCreateEditErrorModal.scss';
 
 type TAdCreateEditErrorModalProps = {
-    errorCode?: ErrorCodes;
+    errorCode?: TErrorCodes;
     errorMessage?: string;
     isModalOpen: boolean;
     onRequestClose: () => void;
 };
 
-type ErrorCodes = (typeof ERROR_CODES)[keyof typeof ERROR_CODES];
-
 type ErrorContent = {
-    [key in ErrorCodes]?: {
+    [key in TErrorCodes]?: {
         description: string;
         title: string;
     };

src/components/Modals/AdCreateEditErrorModal/__tests__/AdCreateEditErrorModal.spec.tsx

@@ -1,9 +1,10 @@
+import { TErrorCodes } from 'types';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import AdCreateEditErrorModal from '../AdCreateEditErrorModal';
 
 const mockProps = {
-    errorCode: 'AdvertSameLimits',
+    errorCode: 'AdvertSameLimits' as TErrorCodes,
     isModalOpen: true,
     onRequestClose: jest.fn(),
 };

src/components/Modals/AvailableP2PBalanceModal/__tests__/AvailableP2PBalanceModal.spec.tsx

@@ -7,7 +7,6 @@ const mockOnRequestClose = jest.fn();
 const MockApp = () => {
     return (
         <>
-            <div id='v2_modal_root' />
             <AvailableP2PBalanceModal isModalOpen={true} onRequestClose={mockOnRequestClose} />
         </>
     );

src/components/Modals/MyAdsDeleteModal/__tests__/MyAdsDeleteModal.spec.tsx

@@ -1,4 +1,3 @@
-import Modal from 'react-modal';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import MyAdsDeleteModal from '../MyAdsDeleteModal';
@@ -11,7 +10,6 @@ const mockProps = {
     onRequestClose: jest.fn(),
 };
 
-let element: HTMLElement;
 const mockUseGet = {
     data: {
         active_orders: 0,
@@ -33,15 +31,6 @@ jest.mock('@deriv/api-v2', () => ({
 }));
 
 describe('MyAdsDeleteModal', () => {
-    beforeAll(() => {
-        element = document.createElement('div');
-        element.setAttribute('id', 'v2_modal_root');
-        document.body.appendChild(element);
-        Modal.setAppElement('#v2_modal_root');
-    });
-    afterAll(() => {
-        document.body.removeChild(element);
-    });
     it('should render the component as expected', () => {
         render(<MyAdsDeleteModal {...mockProps} />);
         expect(screen.getByText('Do you want to delete this ad?')).toBeInTheDocument();