diff --git a/package-lock.json b/package-lock.json index aef249aa..2a010b5f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,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", @@ -38,6 +39,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": { @@ -66,7 +68,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", @@ -90,7 +91,6 @@ "tailwindcss": "^3.3.5", "ts-jest": "^29.1.2", "typescript": "^5.2.2", - "vite": "^5.1.4", "vite-plugin-sass": "^0.1.0" } }, @@ -370,7 +370,6 @@ "version": "7.24.0", "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz", "integrity": "sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==", - "dev": true, "engines": { "node": ">=6.9.0" } @@ -943,7 +942,6 @@ "version": "7.24.1", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.24.1.tgz", "integrity": "sha512-kDJgnPujTmAZ/9q2CN4m2/lRsUUPDvsG3+tSHWUJIzMGTt5U/b/fwWd3RO3n+5mjLrsBrVa5eKFRVSQbi3dF1w==", - "dev": true, "dependencies": { "@babel/helper-plugin-utils": "^7.24.0" }, @@ -958,7 +956,6 @@ "version": "7.24.1", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.24.1.tgz", "integrity": "sha512-1v202n7aUq4uXAieRTKcwPzNyphlCuqHHDcdSNc+vdhoTEZcFMh+L5yZuCmGaIO7bs1nJUNfHB89TZyoL48xNA==", - "dev": true, "dependencies": { "@babel/helper-plugin-utils": "^7.24.0" }, @@ -4117,7 +4114,6 @@ "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==", - "dev": true, "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", @@ -4130,7 +4126,6 @@ "version": "7.6.8", "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz", "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==", - "dev": true, "dependencies": { "@babel/types": "^7.0.0" } @@ -4139,7 +4134,6 @@ "version": "7.4.4", "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz", "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==", - "dev": true, "dependencies": { "@babel/parser": "^7.1.0", "@babel/types": "^7.0.0" @@ -4149,7 +4143,6 @@ "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.5.tgz", "integrity": "sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==", - "dev": true, "dependencies": { "@babel/types": "^7.20.7" } @@ -4774,7 +4767,6 @@ "version": "4.2.1", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz", "integrity": "sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==", - "dev": true, "dependencies": { "@babel/core": "^7.23.5", "@babel/plugin-transform-react-jsx-self": "^7.23.3", @@ -15192,7 +15184,6 @@ "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -19053,8 +19044,7 @@ "@babel/helper-plugin-utils": { "version": "7.24.0", "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz", - "integrity": "sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==", - "dev": true + "integrity": "sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==" }, "@babel/helper-replace-supers": { "version": "7.24.1", @@ -19435,7 +19425,6 @@ "version": "7.24.1", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.24.1.tgz", "integrity": "sha512-kDJgnPujTmAZ/9q2CN4m2/lRsUUPDvsG3+tSHWUJIzMGTt5U/b/fwWd3RO3n+5mjLrsBrVa5eKFRVSQbi3dF1w==", - "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.24.0" } @@ -19444,7 +19433,6 @@ "version": "7.24.1", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.24.1.tgz", "integrity": "sha512-1v202n7aUq4uXAieRTKcwPzNyphlCuqHHDcdSNc+vdhoTEZcFMh+L5yZuCmGaIO7bs1nJUNfHB89TZyoL48xNA==", - "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.24.0" } @@ -21543,7 +21531,6 @@ "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==", - "dev": true, "requires": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", @@ -21556,7 +21543,6 @@ "version": "7.6.8", "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz", "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==", - "dev": true, "requires": { "@babel/types": "^7.0.0" } @@ -21565,7 +21551,6 @@ "version": "7.4.4", "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz", "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==", - "dev": true, "requires": { "@babel/parser": "^7.1.0", "@babel/types": "^7.0.0" @@ -21575,7 +21560,6 @@ "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.5.tgz", "integrity": "sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==", - "dev": true, "requires": { "@babel/types": "^7.20.7" } @@ -22079,7 +22063,6 @@ "version": "4.2.1", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz", "integrity": "sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==", - "dev": true, "requires": { "@babel/core": "^7.23.5", "@babel/plugin-transform-react-jsx-self": "^7.23.3", @@ -29705,8 +29688,7 @@ "react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", - "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", - "dev": true + "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==" }, "react-router": { "version": "5.3.4", diff --git a/package.json b/package.json index ac5fce95..e9d46901 100644 --- a/package.json +++ b/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" } } diff --git a/src/components/AdvertiserName/AdvertiserNameStats.tsx b/src/components/AdvertiserName/AdvertiserNameStats.tsx index 5881fe00..d00a4d14 100644 --- a/src/components/AdvertiserName/AdvertiserNameStats.tsx +++ b/src/components/AdvertiserName/AdvertiserNameStats.tsx @@ -65,7 +65,7 @@ const AdvertiserNameStats = ({ advertiserStats }: { advertiserStats: DeepPartial ({ratingAverage}) )} - + ({ratingCount} ratings) diff --git a/src/components/AdvertsTableRow/AdvertsTableRow.tsx b/src/components/AdvertsTableRow/AdvertsTableRow.tsx index a06d2842..c7f5d1f5 100644 --- a/src/components/AdvertsTableRow/AdvertsTableRow.tsx +++ b/src/components/AdvertsTableRow/AdvertsTableRow.tsx @@ -107,7 +107,7 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => { {ratingAverageDecimal} } + control={control as unknown as Control} isBuy={isBuy} isDisabled={shouldDisableField} - localCurrency={local_currency} + localCurrency={local_currency as TCurrency} maxLimit={getAdvertiserMaxLimit( isBuy, advertiserBuyLimit, diff --git a/src/components/BuySellForm/__tests__/BuySellForm.spec.tsx b/src/components/BuySellForm/__tests__/BuySellForm.spec.tsx index 95bebafe..350eea54 100644 --- a/src/components/BuySellForm/__tests__/BuySellForm.spec.tsx +++ b/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(); expect(screen.getByText('Buy USD')).toBeInTheDocument(); diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index b2dc934d..42885b1b 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/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'; diff --git a/src/components/FlyoutMenu/FlyoutMenu.tsx b/src/components/FlyoutMenu/FlyoutMenu.tsx index 50cedd93..f0bfb1c8 100644 --- a/src/components/FlyoutMenu/FlyoutMenu.tsx +++ b/src/components/FlyoutMenu/FlyoutMenu.tsx @@ -6,7 +6,7 @@ import './FlyoutMenu.scss'; type TFlyoutMenuProps = HTMLAttributes & { listItems?: ReactNode[]; - renderIcon?: () => React.ReactNode; + renderIcon?: () => ReactNode; }; const FlyoutMenu = ({ listItems, renderIcon, ...props }: TFlyoutMenuProps) => { diff --git a/src/components/Header/__tests__/Header.spec.tsx b/src/components/Header/__tests__/Header.spec.tsx index bd5b243c..8fcf8b9a 100644 --- a/src/components/Header/__tests__/Header.spec.tsx +++ b/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 }) => ( ), })); diff --git a/src/components/Modals/AdCreateEditErrorModal/AdCreateEditErrorModal.tsx b/src/components/Modals/AdCreateEditErrorModal/AdCreateEditErrorModal.tsx index 46cadade..52552c6a 100644 --- a/src/components/Modals/AdCreateEditErrorModal/AdCreateEditErrorModal.tsx +++ b/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; }; diff --git a/src/components/Modals/AdCreateEditErrorModal/__tests__/AdCreateEditErrorModal.spec.tsx b/src/components/Modals/AdCreateEditErrorModal/__tests__/AdCreateEditErrorModal.spec.tsx index a9ccb5f7..97bed348 100644 --- a/src/components/Modals/AdCreateEditErrorModal/__tests__/AdCreateEditErrorModal.spec.tsx +++ b/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(), }; diff --git a/src/components/Modals/AvailableP2PBalanceModal/__tests__/AvailableP2PBalanceModal.spec.tsx b/src/components/Modals/AvailableP2PBalanceModal/__tests__/AvailableP2PBalanceModal.spec.tsx index 564b5593..c1cb4075 100644 --- a/src/components/Modals/AvailableP2PBalanceModal/__tests__/AvailableP2PBalanceModal.spec.tsx +++ b/src/components/Modals/AvailableP2PBalanceModal/__tests__/AvailableP2PBalanceModal.spec.tsx @@ -7,7 +7,6 @@ const mockOnRequestClose = jest.fn(); const MockApp = () => { return ( <> -
); diff --git a/src/components/Modals/MyAdsDeleteModal/__tests__/MyAdsDeleteModal.spec.tsx b/src/components/Modals/MyAdsDeleteModal/__tests__/MyAdsDeleteModal.spec.tsx index d3201de0..239d5542 100644 --- a/src/components/Modals/MyAdsDeleteModal/__tests__/MyAdsDeleteModal.spec.tsx +++ b/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(); expect(screen.getByText('Do you want to delete this ad?')).toBeInTheDocument(); diff --git a/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/__tests__/PaymentMethodErrorModal.spec.tsx b/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/__tests__/PaymentMethodErrorModal.spec.tsx index aa79bb68..9b5d0401 100644 --- a/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/__tests__/PaymentMethodErrorModal.spec.tsx +++ b/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/__tests__/PaymentMethodErrorModal.spec.tsx @@ -1,8 +1,6 @@ import { render, screen } from '@testing-library/react'; import PaymentMethodErrorModal from '../PaymentMethodErrorModal'; -const wrapper: React.FC = ({ children }) =>
{children}
; - jest.mock('@deriv-com/ui', () => ({ ...jest.requireActual('@deriv-com/ui'), useDevice: jest.fn(() => ({ isMobile: false })), @@ -16,7 +14,7 @@ describe('PaymentMethodErrorModal', () => { onConfirm: jest.fn(), title: 'title', }; - render(, { wrapper }); + render(); expect(screen.getByText('title')).toBeInTheDocument(); expect(screen.getByText('error message')).toBeInTheDocument(); }); diff --git a/src/components/Modals/PaymentMethods/PaymentMethodModal/__tests__/PaymentMethodModal.spec.tsx b/src/components/Modals/PaymentMethods/PaymentMethodModal/__tests__/PaymentMethodModal.spec.tsx index edb3a9cc..fa00f8b9 100644 --- a/src/components/Modals/PaymentMethods/PaymentMethodModal/__tests__/PaymentMethodModal.spec.tsx +++ b/src/components/Modals/PaymentMethods/PaymentMethodModal/__tests__/PaymentMethodModal.spec.tsx @@ -2,8 +2,6 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import PaymentMethodModal from '../PaymentMethodModal'; -const wrapper: React.FC = ({ children }) =>
{children}
; - jest.mock('@deriv-com/ui', () => ({ ...jest.requireActual('@deriv-com/ui'), useDevice: jest.fn(() => ({ isMobile: false })), @@ -20,8 +18,7 @@ describe('PaymentMethodModal', () => { primaryButtonLabel='Yes' secondaryButtonLabel='Yes, remove' title='Payment Method Modal' - />, - { wrapper } + /> ); expect(screen.getByText('Payment Method Modal')).toBeInTheDocument(); expect(screen.getByText('Payment Method Modal Description')).toBeInTheDocument(); @@ -37,8 +34,7 @@ describe('PaymentMethodModal', () => { primaryButtonLabel='Yes' secondaryButtonLabel='Yes, remove' title='Payment Method Modal' - />, - { wrapper } + /> ); const confirmButton = screen.getByText('Yes, remove'); await userEvent.click(confirmButton); @@ -55,8 +51,7 @@ describe('PaymentMethodModal', () => { primaryButtonLabel='Yes' secondaryButtonLabel='Yes, remove' title='Payment Method Modal' - />, - { wrapper } + /> ); const rejectButton = screen.getByText('Yes'); await userEvent.click(rejectButton); diff --git a/src/components/Modals/PreferredCountriesModal/PreferredCountriesDropdown/PreferredCountriesDropdown.tsx b/src/components/Modals/PreferredCountriesModal/PreferredCountriesDropdown/PreferredCountriesDropdown.tsx index 037e8951..07dc2656 100644 --- a/src/components/Modals/PreferredCountriesModal/PreferredCountriesDropdown/PreferredCountriesDropdown.tsx +++ b/src/components/Modals/PreferredCountriesModal/PreferredCountriesDropdown/PreferredCountriesDropdown.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { ChangeEvent, useState } from 'react'; import clsx from 'clsx'; import { Search } from '@/components'; import { Checkbox, Divider } from '@deriv-com/ui'; @@ -64,7 +64,7 @@ const PreferredCountriesDropdown = ({ checked={selectedCountries?.length === list?.length} label='All countries' name='all-countries' - onChange={(event: React.ChangeEvent) => { + onChange={(event: ChangeEvent) => { if (event.target.checked) { setSelectedCountries(list.map(item => item.value)); } else { @@ -82,7 +82,7 @@ const PreferredCountriesDropdown = ({ checked={selectedCountries?.includes(item.value)} label={item.text} name={item.value} - onChange={(event: React.ChangeEvent) => { + onChange={(event: ChangeEvent) => { if (event.target.checked) { setSelectedCountries([...selectedCountries, item.value]); } else { diff --git a/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx b/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx index 1f1d0c11..a46df0ab 100644 --- a/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx +++ b/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx @@ -10,8 +10,6 @@ const mockProps = { onRequestClose: jest.fn(), }; -let element: HTMLElement; - const mockUseGet = { data: { account_currency: 'USD', @@ -60,14 +58,6 @@ jest.mock('@/hooks', () => ({ const mockUseDevice = useDevice as jest.Mock; describe('ShareAdsModal', () => { - beforeAll(() => { - element = document.createElement('div'); - element.setAttribute('id', 'v2_modal_root'); - document.body.appendChild(element); - }); - afterAll(() => { - document.body.removeChild(element); - }); it('should render the modal as expected', () => { render(); expect(screen.getByText('Share this ad')).toBeInTheDocument(); diff --git a/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx b/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx index dd8c36f6..35eef0f8 100644 --- a/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx +++ b/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx @@ -64,7 +64,7 @@ const PaymentMethodCardHeader = ({ /> )} {isSelectable && ( -
+
{ type='bank' /> ); - expect(screen.getByTestId('p2p_v2_payment_method_card_header_checkbox')).toBeInTheDocument(); + expect(screen.getByTestId('dt_payment_method_card_header_checkbox')).toBeInTheDocument(); }); it('should render the correct icon when type is ewallet', () => { render( diff --git a/src/components/StarRating/StarRating.tsx b/src/components/StarRating/StarRating.tsx index 8797e18a..6962b5a3 100644 --- a/src/components/StarRating/StarRating.tsx +++ b/src/components/StarRating/StarRating.tsx @@ -4,9 +4,8 @@ import { LabelPairedStarLgFillIcon, LabelPairedStarLgRegularIcon } from '@deriv/ import './StarRating.scss'; type TStarRatingProps = { - allowHalfIcon?: boolean; + allowFraction?: boolean; allowHover?: boolean; - initialValue?: number; isReadonly?: boolean; onClick?: (rate: number) => void; ratingValue: number; @@ -14,29 +13,23 @@ type TStarRatingProps = { }; const StarRating = ({ - allowHalfIcon = false, + allowFraction = false, allowHover = false, - initialValue = 0, isReadonly = false, onClick, ratingValue, starsScale = 1, }: TStarRatingProps) => { - // Converts initial value to be in the form of x.0 or x.5 - // to show full and half stars only - const fractionalizedValue = Math.round(initialValue * 2) / 2; - return ( } - fullIcon={} + fillIcon={} iconsCount={5} initialValue={ratingValue} onClick={onClick} - ratingValue={fractionalizedValue} readonly={isReadonly} size={12} style={{ transform: `scale(${starsScale})`, transformOrigin: 'left' }} diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx index cec73eae..89c75860 100644 --- a/src/components/TextField/TextField.tsx +++ b/src/components/TextField/TextField.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, ComponentProps, forwardRef, Ref, useState } from 'react'; +import { ChangeEvent, ComponentProps, forwardRef, ReactNode, Ref, useState } from 'react'; import clsx from 'clsx'; import HelperMessage, { HelperMessageProps } from './HelperMessage'; import './TextField.scss'; @@ -9,8 +9,8 @@ export interface TextFieldProps extends ComponentProps<'input'>, HelperMessagePr errorMessage?: string[] | string; isInvalid?: boolean; label?: string; - renderLeftIcon?: () => React.ReactNode; - renderRightIcon?: () => React.ReactNode; + renderLeftIcon?: () => ReactNode; + renderRightIcon?: () => ReactNode; shouldShowWarningMessage?: boolean; showMessage?: boolean; } diff --git a/src/hooks/__tests__/useModalManager.spec.tsx b/src/hooks/__tests__/useModalManager.spec.tsx index 53f0bd75..6fd761b9 100644 --- a/src/hooks/__tests__/useModalManager.spec.tsx +++ b/src/hooks/__tests__/useModalManager.spec.tsx @@ -1,3 +1,4 @@ +import { FC, PropsWithChildren } from 'react'; import { createMemoryHistory } from 'history'; import { Router } from 'react-router-dom'; import { useDevice } from '@deriv-com/ui'; @@ -45,7 +46,7 @@ describe('useModalManager', () => { it('should render and show the correct modal states when showModal is called', async () => { const history = createMemoryHistory(); const originalLocation = window.location; - const wrapper: React.FC = ({ children }) => { + const wrapper: FC = ({ children }) => { return {children}; }; @@ -113,7 +114,7 @@ describe('useModalManager', () => { }); it('should hide the modals and show previous modal when current modal hidden', () => { const history = createMemoryHistory(); - const wrapper: React.FC = ({ children }) => { + const wrapper: FC = ({ children }) => { return {children}; }; @@ -193,7 +194,7 @@ describe('useModalManager', () => { }); it('should show the modals when URL is initialized with default modal states', () => { const history = createMemoryHistory(); - const wrapper: React.FC = ({ children }) => { + const wrapper: FC = ({ children }) => { return {children}; }; @@ -223,7 +224,7 @@ describe('useModalManager', () => { }); it('should should not show the modals on navigated back when shouldReinitializeModals is set to false', () => { const history = createMemoryHistory(); - const wrapper: React.FC = ({ children }) => { + const wrapper: FC = ({ children }) => { return {children}; }; @@ -255,7 +256,7 @@ describe('useModalManager', () => { }); it('should should show the modals on navigated back when shouldReinitializeModals is set to true', () => { const history = createMemoryHistory(); - const wrapper: React.FC = ({ children }) => { + const wrapper: FC = ({ children }) => { return {children}; }; @@ -291,7 +292,7 @@ describe('useModalManager', () => { }); it('should should stack the modals in mobile', () => { const history = createMemoryHistory(); - const wrapper: React.FC = ({ children }) => { + const wrapper: FC = ({ children }) => { return {children}; }; diff --git a/src/hooks/api/account/useServerTime.ts b/src/hooks/api/account/useServerTime.ts index 027e0042..097245ae 100644 --- a/src/hooks/api/account/useServerTime.ts +++ b/src/hooks/api/account/useServerTime.ts @@ -1,4 +1,4 @@ -import React from 'react'; +import { useMemo } from 'react'; import { toMoment } from '@/utils'; import { useTime } from '@deriv-com/api-hooks'; /** @@ -7,7 +7,7 @@ import { useTime } from '@deriv-com/api-hooks'; const useServerTime = () => { const { data, ...rest } = useTime(); - const modified_data = React.useMemo(() => { + const modified_data = useMemo(() => { if (!data) return; const server_time_moment = toMoment(data); diff --git a/src/hooks/api/advertiser/p2p-advertiser/useAdvertiserInfo.ts b/src/hooks/api/advertiser/p2p-advertiser/useAdvertiserInfo.ts index d077fa33..14e537bd 100644 --- a/src/hooks/api/advertiser/p2p-advertiser/useAdvertiserInfo.ts +++ b/src/hooks/api/advertiser/p2p-advertiser/useAdvertiserInfo.ts @@ -16,7 +16,11 @@ type TP2PAdvertiserInfo = ReturnType['data'] & { /** This custom hook returns information about the given advertiser ID */ const useAdvertiserInfo = (id?: string) => { - const { data, error, ...rest } = useP2PAdvertiserInfo(); + const { data, subscribe, error, ...rest } = useP2PAdvertiserInfo(); + + useEffect(() => { + subscribe({}); + }, [subscribe]); /** * Use different local storage key for each advertiser, one to keep the current user's info, the other to keep the advertiser's info @@ -24,7 +28,7 @@ const useAdvertiserInfo = (id?: string) => { * * Key removal is handled in useAdvertiserStats hook's useEffect. * */ - const local_storage_key = id ? `p2p_v2_p2p_advertiser_info_${id}` : 'p2p_v2_p2p_advertiser_info'; + const local_storage_key = id ? `p2p_advertiser_info_${id}` : 'p2p_advertiser_info'; const [p2p_advertiser_info, setP2PAdvertiserInfo] = useLocalStorage>( local_storage_key, {} diff --git a/src/hooks/custom-hooks/useAdvertiserStats.ts b/src/hooks/custom-hooks/useAdvertiserStats.ts index abb0ef76..32154752 100644 --- a/src/hooks/custom-hooks/useAdvertiserStats.ts +++ b/src/hooks/custom-hooks/useAdvertiserStats.ts @@ -34,7 +34,7 @@ const useAdvertiserStats = (advertiserId?: string) => { } return () => { - localStorage.removeItem(`p2p_v2_p2p_advertiser_info_${advertiserId}`); + localStorage.removeItem(`p2p_advertiser_info_${advertiserId}`); unsubscribe(); }; }, [advertiserId, isSuccess, subscribe, unsubscribe]); diff --git a/src/hooks/custom-hooks/useFetchMore.ts b/src/hooks/custom-hooks/useFetchMore.ts index 5ff4cdb5..9ab72260 100644 --- a/src/hooks/custom-hooks/useFetchMore.ts +++ b/src/hooks/custom-hooks/useFetchMore.ts @@ -1,9 +1,9 @@ -import { useCallback, useEffect } from 'react'; +import { RefObject, useCallback, useEffect } from 'react'; type TProps = { isFetching: boolean; loadMore: () => void; - ref: React.RefObject; + ref: RefObject; }; /** A custom hook to load more items in the table on scroll to bottom of the table */ diff --git a/src/pages/buy-sell/components/CurrencyDropdown/__tests__/CurrencyDropdown.spec.tsx b/src/pages/buy-sell/components/CurrencyDropdown/__tests__/CurrencyDropdown.spec.tsx index 42b8ef33..dfc53a93 100644 --- a/src/pages/buy-sell/components/CurrencyDropdown/__tests__/CurrencyDropdown.spec.tsx +++ b/src/pages/buy-sell/components/CurrencyDropdown/__tests__/CurrencyDropdown.spec.tsx @@ -1,8 +1,9 @@ +import { FC, PropsWithChildren } from 'react'; import { act, render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import CurrencyDropdown from '../CurrencyDropdown'; -const wrapper: React.FC = ({ children }) => ( +const wrapper: FC = ({ children }) => (
Click me
{children} diff --git a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx index 40e42ff8..5d70996c 100644 --- a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx +++ b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx @@ -39,16 +39,7 @@ jest.mock('@deriv/api-v2', () => ({ }, })); -const elModal = document.createElement('div'); describe('MyProfileCounterpartiesTableRow', () => { - beforeAll(() => { - elModal.setAttribute('id', 'v2_modal_root'); - document.body.appendChild(elModal); - }); - - afterAll(() => { - document.body.removeChild(elModal); - }); it('should render the component as expected', () => { render(); expect(screen.getByText('nickname')).toBeInTheDocument(); diff --git a/src/providers/OrderDetailsProvider/__tests__/OrderDetailsProvider.spec.tsx b/src/providers/OrderDetailsProvider/__tests__/OrderDetailsProvider.spec.tsx index 66b77b14..0960b769 100644 --- a/src/providers/OrderDetailsProvider/__tests__/OrderDetailsProvider.spec.tsx +++ b/src/providers/OrderDetailsProvider/__tests__/OrderDetailsProvider.spec.tsx @@ -1,3 +1,4 @@ +import { FC, PropsWithChildren } from 'react'; import { renderHook } from '@testing-library/react'; import { OrderDetailsProvider, useOrderDetails } from '../OrderDetailsProvider'; @@ -5,7 +6,7 @@ describe('useOrderDetails', () => { it('should return the orderDetails from context', () => { const mockValues = { isErrorOrderInfo: false, orderDetails: 'mockOrderDetails' }; - const wrapper: React.FC = ({ children }) => ( + const wrapper: FC = ({ children }) => ( {children} ); diff --git a/types.ts b/types.ts index d285fba5..81ed0f5b 100644 --- a/types.ts +++ b/types.ts @@ -1,4 +1,5 @@ /* eslint-disable @typescript-eslint/no-namespace */ +import { ERROR_CODES } from '@/constants'; import { api } from '@/hooks'; import { useAdvertiserStats } from '@/hooks/custom-hooks'; import { useExchangeRates } from '@deriv-com/api-hooks'; @@ -171,3 +172,5 @@ export type TCurrency = CurrencyConstants.Currency; export type TExchangeRate = ReturnType['exchangeRates']; export type MutableOption = { text?: React.ReactNode; value?: string | undefined }; + +export type TErrorCodes = (typeof ERROR_CODES)[keyof typeof ERROR_CODES];