diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 5f9201fc..d0e839b8 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,7 +1,37 @@ module.exports = { extends: ['@deriv-com/eslint-config-deriv'], + plugins: ['simple-import-sort'], rules: { 'global-require': 'off', + 'import/newline-after-import': 'error', + 'simple-import-sort/imports': [ + 'error', + { + groups: [ + [ + 'public-path', + // `react` first, then packages starting with a character + '^react$', + '^[a-z]', + // Packages starting with `@` + '^@', + // Imports starting with `../` + '^\\.\\.(?!/?$)', + '^\\.\\./?$', + // Imports starting with `./` + '^\\./(?=.*/)(?!/?$)', + '^\\.(?!/?$)', + '^\\./?$', + // Style imports + '^.+\\.s?css$', + // Side effect imports + '^\\u0000', + // Delete the empty line copied as the next line of the last import + '\\s*', + ], + ], + }, + ], }, overrides: [ { @@ -55,8 +85,7 @@ module.exports = { }, 'import/resolver': { typescript: { - // use an array - project: 'packages/**/tsconfig.json', + }, node: { extensions: ['.ts', '.tsx'], diff --git a/package-lock.json b/package-lock.json index f72381c6..e1be77dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,8 +17,10 @@ "@sendbird/chat": "^4.11.3", "@tanstack/react-query": "^5.28.14", "@tanstack/react-table": "^8.15.0", + "@types/history": "^5.0.0", "clsx": "^2.1.0", "downshift": "^9.0.0", + "history": "^5.3.0", "html2canvas": "^1.4.1", "lodash": "^4.17.21", "moment": "^2.30.1", @@ -4184,10 +4186,13 @@ } }, "node_modules/@types/history": { - "version": "4.7.11", - "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz", - "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==", - "dev": true + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@types/history/-/history-5.0.0.tgz", + "integrity": "sha512-hy8b7Y1J8OGe6LbAjj3xniQrj3v6lsivCcrmf4TzSgPzLkhIeKgc5IZnT7ReIqmEuodjfO8EYAuoFvIrHi/+jQ==", + "deprecated": "This is a stub types definition. history provides its own type definitions, so you do not need this installed.", + "dependencies": { + "history": "*" + } }, "node_modules/@types/istanbul-lib-coverage": { "version": "2.0.6", @@ -4375,6 +4380,18 @@ "@types/react-router": "*" } }, + "node_modules/@types/react-router-dom/node_modules/@types/history": { + "version": "4.7.11", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz", + "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==", + "dev": true + }, + "node_modules/@types/react-router/node_modules/@types/history": { + "version": "4.7.11", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz", + "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==", + "dev": true + }, "node_modules/@types/react-transition-group": { "version": "4.4.10", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz", @@ -9639,16 +9656,11 @@ } }, "node_modules/history": { - "version": "4.10.1", - "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", - "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", "dependencies": { - "@babel/runtime": "^7.1.2", - "loose-envify": "^1.2.0", - "resolve-pathname": "^3.0.0", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0", - "value-equal": "^1.0.1" + "@babel/runtime": "^7.7.6" } }, "node_modules/hoist-non-react-statics": { @@ -15218,6 +15230,32 @@ "react": ">=15" } }, + "node_modules/react-router-dom/node_modules/history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "dependencies": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, + "node_modules/react-router/node_modules/history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "dependencies": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "node_modules/react-router/node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -21530,10 +21568,12 @@ } }, "@types/history": { - "version": "4.7.11", - "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz", - "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==", - "dev": true + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@types/history/-/history-5.0.0.tgz", + "integrity": "sha512-hy8b7Y1J8OGe6LbAjj3xniQrj3v6lsivCcrmf4TzSgPzLkhIeKgc5IZnT7ReIqmEuodjfO8EYAuoFvIrHi/+jQ==", + "requires": { + "history": "*" + } }, "@types/istanbul-lib-coverage": { "version": "2.0.6", @@ -21701,6 +21741,14 @@ "requires": { "@types/history": "^4.7.11", "@types/react": "*" + }, + "dependencies": { + "@types/history": { + "version": "4.7.11", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz", + "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==", + "dev": true + } } }, "@types/react-router-dom": { @@ -21712,6 +21760,14 @@ "@types/history": "^4.7.11", "@types/react": "*", "@types/react-router": "*" + }, + "dependencies": { + "@types/history": { + "version": "4.7.11", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz", + "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==", + "dev": true + } } }, "@types/react-transition-group": { @@ -25607,16 +25663,11 @@ } }, "history": { - "version": "4.10.1", - "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", - "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", "requires": { - "@babel/runtime": "^7.1.2", - "loose-envify": "^1.2.0", - "resolve-pathname": "^3.0.0", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0", - "value-equal": "^1.0.1" + "@babel/runtime": "^7.7.6" } }, "hoist-non-react-statics": { @@ -29626,6 +29677,19 @@ "tiny-warning": "^1.0.0" }, "dependencies": { + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -29645,6 +29709,21 @@ "react-router": "5.3.4", "tiny-invariant": "^1.0.2", "tiny-warning": "^1.0.0" + }, + "dependencies": { + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + } } }, "react-share": { diff --git a/package.json b/package.json index d69b74bd..b45b0290 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "scripts": { "dev": "vite", "build": "tsc && vite build", + "fix": "eslint \"./src/**/*.?(js|jsx|ts|tsx)\" --fix", "preview": "vite preview", "test:lint": "prettier --log-level silent --write . && eslint \"./src/**/*.?(js|jsx|ts|tsx)\"", "test": "jest --passWithNoTests", @@ -22,8 +23,10 @@ "@sendbird/chat": "^4.11.3", "@tanstack/react-query": "^5.28.14", "@tanstack/react-table": "^8.15.0", + "@types/history": "^5.0.0", "clsx": "^2.1.0", "downshift": "^9.0.0", + "history": "^5.3.0", "html2canvas": "^1.4.1", "lodash": "^4.17.21", "moment": "^2.30.1", diff --git a/src/App.tsx b/src/App.tsx index db49e35e..4bb9ebf8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,5 @@ import { QueryParamProvider } from 'use-query-params'; import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5'; - import AppContent from './routes/AppContent'; const App = () => { diff --git a/src/components/AdvertiserName/AdvertiserName.scss b/src/components/AdvertiserName/AdvertiserName.scss index 8356229c..f156821f 100644 --- a/src/components/AdvertiserName/AdvertiserName.scss +++ b/src/components/AdvertiserName/AdvertiserName.scss @@ -1,4 +1,4 @@ -.p2p-advertiser-name { +.advertiser-name { display: grid; grid-gap: 1.6rem; grid-template-columns: min-content auto max-content; diff --git a/src/components/AdvertiserName/AdvertiserName.tsx b/src/components/AdvertiserName/AdvertiserName.tsx index abac9a8b..5eba2fbe 100644 --- a/src/components/AdvertiserName/AdvertiserName.tsx +++ b/src/components/AdvertiserName/AdvertiserName.tsx @@ -1,16 +1,12 @@ -import { TAdvertiserStats } from 'types'; - +import { DeepPartial, TAdvertiserStats } from 'types'; +import { UserAvatar } from '@/components'; +import { getCurrentRoute } from '@/utils'; import { useSettings } from '@deriv/api-v2'; import { LabelPairedEllipsisVerticalLgRegularIcon } from '@deriv/quill-icons'; import { Text, useDevice } from '@deriv-com/ui'; - -import { UserAvatar } from '@/components'; -import { getCurrentRoute } from '@/utils'; - import AdvertiserNameBadges from './AdvertiserNameBadges'; import AdvertiserNameStats from './AdvertiserNameStats'; import AdvertiserNameToggle from './AdvertiserNameToggle'; - import './AdvertiserName.scss'; const AdvertiserName = ({ advertiserStats }: { advertiserStats: DeepPartial }) => { @@ -23,9 +19,9 @@ const AdvertiserName = ({ advertiserStats }: { advertiserStats: DeepPartial +
-
+
{name} diff --git a/src/components/AdvertiserName/AdvertiserNameBadges.scss b/src/components/AdvertiserName/AdvertiserNameBadges.scss index f27263e8..ab064c0f 100644 --- a/src/components/AdvertiserName/AdvertiserNameBadges.scss +++ b/src/components/AdvertiserName/AdvertiserNameBadges.scss @@ -1,4 +1,4 @@ -.p2p-advertiser-name-badges { +.advertiser-name-badges { display: flex; gap: 0.4rem; padding: 0.4rem 0; diff --git a/src/components/AdvertiserName/AdvertiserNameBadges.tsx b/src/components/AdvertiserName/AdvertiserNameBadges.tsx index 65489753..3f85da5e 100644 --- a/src/components/AdvertiserName/AdvertiserNameBadges.tsx +++ b/src/components/AdvertiserName/AdvertiserNameBadges.tsx @@ -1,7 +1,5 @@ -import { TAdvertiserStats } from 'types'; - +import { DeepPartial, TAdvertiserStats } from 'types'; import { Badge } from '@/components'; - import './AdvertiserNameBadges.scss'; /** @@ -14,7 +12,7 @@ const AdvertiserNameBadges = ({ advertiserStats }: { advertiserStats: DeepPartia const { isAddressVerified, isIdentityVerified, totalOrders } = advertiserStats || {}; return ( -
+
{(totalOrders || 0) >= 100 && }
-
+
{isMobile && ( ({ratingAverage}) diff --git a/src/components/AdvertiserName/AdvertiserNameToggle.scss b/src/components/AdvertiserName/AdvertiserNameToggle.scss index 9b501886..4ffa6351 100644 --- a/src/components/AdvertiserName/AdvertiserNameToggle.scss +++ b/src/components/AdvertiserName/AdvertiserNameToggle.scss @@ -1,4 +1,4 @@ -.p2p-advertiser-name-toggle { +.advertiser-name-toggle { display: flex; gap: 0.8rem; diff --git a/src/components/AdvertiserName/AdvertiserNameToggle.tsx b/src/components/AdvertiserName/AdvertiserNameToggle.tsx index 410c5392..c677d4a4 100644 --- a/src/components/AdvertiserName/AdvertiserNameToggle.tsx +++ b/src/components/AdvertiserName/AdvertiserNameToggle.tsx @@ -1,10 +1,7 @@ import { memo, useEffect, useState } from 'react'; -import { TAdvertiserStats } from 'types'; - -import { Text, ToggleSwitch } from '@deriv-com/ui'; - +import { DeepPartial, TAdvertiserStats } from 'types'; import { api } from '@/hooks'; - +import { Text, ToggleSwitch } from '@deriv-com/ui'; import './AdvertiserNameToggle.scss'; type TAdvertiserNameToggle = { @@ -28,12 +25,12 @@ const AdvertiserNameToggle = memo(({ advertiserInfo, onToggle }: TAdvertiserName }; return ( -
-
+
+
Show my real name - + {advertiserInfo?.fullName}
diff --git a/src/components/AdvertiserName/__tests__/AdvertiserName.spec.tsx b/src/components/AdvertiserName/__tests__/AdvertiserName.spec.tsx index ad1334cb..cc6d5b8f 100644 --- a/src/components/AdvertiserName/__tests__/AdvertiserName.spec.tsx +++ b/src/components/AdvertiserName/__tests__/AdvertiserName.spec.tsx @@ -1,6 +1,5 @@ import { APIProvider, AuthProvider } from '@deriv/api-v2'; import { render, screen } from '@testing-library/react'; - import AdvertiserName from '../AdvertiserName'; const wrapper = ({ children }: { children: JSX.Element }) => ( @@ -25,6 +24,6 @@ jest.mock('@deriv-com/ui', () => ({ describe('AdvertiserName', () => { it('should render full name', () => { render(, { wrapper }); - expect(screen.queryByText(/Jane Doe/)).toBeInTheDocument(); + expect(screen.getByText(/Jane Doe/)).toBeInTheDocument(); }); }); diff --git a/src/components/AdvertiserName/__tests__/AdvertiserNameBadges.spec.tsx b/src/components/AdvertiserName/__tests__/AdvertiserNameBadges.spec.tsx index ccc9549f..2bc40617 100644 --- a/src/components/AdvertiserName/__tests__/AdvertiserNameBadges.spec.tsx +++ b/src/components/AdvertiserName/__tests__/AdvertiserNameBadges.spec.tsx @@ -1,6 +1,5 @@ import { APIProvider, AuthProvider } from '@deriv/api-v2'; import { render, screen } from '@testing-library/react'; - import AdvertiserNameBadges from '../AdvertiserNameBadges'; const wrapper = ({ children }: { children: JSX.Element }) => ( diff --git a/src/components/AdvertiserName/__tests__/AdvertiserNameStats.spec.tsx b/src/components/AdvertiserName/__tests__/AdvertiserNameStats.spec.tsx index 3187b9b5..d3b3f583 100644 --- a/src/components/AdvertiserName/__tests__/AdvertiserNameStats.spec.tsx +++ b/src/components/AdvertiserName/__tests__/AdvertiserNameStats.spec.tsx @@ -1,6 +1,5 @@ import { APIProvider, AuthProvider } from '@deriv/api-v2'; import { render, screen } from '@testing-library/react'; - import AdvertiserNameStats from '../AdvertiserNameStats'; const wrapper = ({ children }: { children: JSX.Element }) => ( @@ -26,8 +25,8 @@ describe('AdvertiserNameStats', () => { }, }; render(, { wrapper }); - expect(screen.queryByText('Joined 22d')).toBeInTheDocument(); - expect(screen.queryByText('(29 ratings)')).toBeInTheDocument(); + expect(screen.getByText('Joined 22d')).toBeInTheDocument(); + expect(screen.getByText('(29 ratings)')).toBeInTheDocument(); }); it('should render correct advertiser stats based on availability', () => { const mockUseAdvertiserStats = { @@ -38,6 +37,6 @@ describe('AdvertiserNameStats', () => { }, }; render(, { wrapper }); - expect(screen.queryByText('Not rated yet')).toBeInTheDocument(); + expect(screen.getByText('Not rated yet')).toBeInTheDocument(); }); }); diff --git a/src/components/AdvertiserName/__tests__/AdvertiserNameToggle.spec.tsx b/src/components/AdvertiserName/__tests__/AdvertiserNameToggle.spec.tsx index 3535b44f..2130d269 100644 --- a/src/components/AdvertiserName/__tests__/AdvertiserNameToggle.spec.tsx +++ b/src/components/AdvertiserName/__tests__/AdvertiserNameToggle.spec.tsx @@ -1,7 +1,6 @@ import { APIProvider, AuthProvider } from '@deriv/api-v2'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; - import AdvertiserNameToggle from '../AdvertiserNameToggle'; const wrapper = ({ children }: { children: JSX.Element }) => ( diff --git a/src/components/AdvertsTableRow/AdvertsTableRow.scss b/src/components/AdvertsTableRow/AdvertsTableRow.scss index 483225ed..318d3d24 100644 --- a/src/components/AdvertsTableRow/AdvertsTableRow.scss +++ b/src/components/AdvertsTableRow/AdvertsTableRow.scss @@ -1,4 +1,4 @@ -.p2p-adverts-table-row { +.adverts-table-row { width: 100%; display: grid; grid-template-columns: 2fr 1.4fr 1.4fr 2.4fr 0.8fr; diff --git a/src/components/AdvertsTableRow/AdvertsTableRow.tsx b/src/components/AdvertsTableRow/AdvertsTableRow.tsx index c043923c..d8684fb5 100644 --- a/src/components/AdvertsTableRow/AdvertsTableRow.tsx +++ b/src/components/AdvertsTableRow/AdvertsTableRow.tsx @@ -1,19 +1,16 @@ /* eslint-disable camelcase */ import { Fragment, memo, useEffect, useState } from 'react'; -import { useHistory } from 'react-router-dom'; import clsx from 'clsx'; +import { useHistory } from 'react-router-dom'; import { TAdvertsTableRowRenderer } from 'types'; - -import { useExchangeRateSubscription } from '@deriv/api-v2'; -import { LabelPairedChevronRightMdRegularIcon } from '@deriv/quill-icons'; -import { Button, Text, useDevice } from '@deriv-com/ui'; - import { Badge, BuySellForm, PaymentMethodLabel, StarRating, UserAvatar } from '@/components'; import { ADVERTISER_URL, BUY_SELL } from '@/constants'; import { api } from '@/hooks'; import { useIsAdvertiser } from '@/hooks/custom-hooks'; import { generateEffectiveRate, getCurrentRoute } from '@/utils'; - +import { useExchangeRateSubscription } from '@deriv/api-v2'; +import { LabelPairedChevronRightMdRegularIcon } from '@deriv/quill-icons'; +import { Button, Text, useDevice } from '@deriv-com/ui'; import './AdvertsTableRow.scss'; const BASE_CURRENCY = 'USD'; @@ -75,8 +72,8 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => { return (
diff --git a/src/components/Badge/Badge.scss b/src/components/Badge/Badge.scss index b8c6c7e1..87977fed 100644 --- a/src/components/Badge/Badge.scss +++ b/src/components/Badge/Badge.scss @@ -1,4 +1,4 @@ -.p2p-badge { +.badge { display: flex; justify-content: center; align-items: center; diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index 9fc84263..9aeb9ba1 100644 --- a/src/components/Badge/Badge.tsx +++ b/src/components/Badge/Badge.tsx @@ -1,8 +1,6 @@ import { memo } from 'react'; import clsx from 'clsx'; - import { Text } from '@deriv-com/ui'; - import './Badge.scss'; type TBadgeProps = { @@ -18,12 +16,12 @@ const Badge = ({ label, status, tradeCount, variant }: TBadgeProps) => { if (tradeCount) { return (
= 100 && tradeCount < 250, - 'p2p-badge--green': tradeCount >= 250, + className={clsx('badge', { + 'badge--gold': tradeCount >= 100 && tradeCount < 250, + 'badge--green': tradeCount >= 250, })} > - + {`${tradeCount >= 250 ? '250+' : '100+'}`}
@@ -31,16 +29,16 @@ const Badge = ({ label, status, tradeCount, variant }: TBadgeProps) => { } return (
- + {label} - + {status}
diff --git a/src/components/Badge/__tests__/Badge.spec.tsx b/src/components/Badge/__tests__/Badge.spec.tsx index 879ada83..53ed9e75 100644 --- a/src/components/Badge/__tests__/Badge.spec.tsx +++ b/src/components/Badge/__tests__/Badge.spec.tsx @@ -1,5 +1,4 @@ import { render, screen } from '@testing-library/react'; - import Badge from '../Badge'; describe('Badge', () => { diff --git a/src/components/BuySellForm/BuySellAmount/BuySellAmount.scss b/src/components/BuySellForm/BuySellAmount/BuySellAmount.scss index 597d2c9f..266f4ae9 100644 --- a/src/components/BuySellForm/BuySellAmount/BuySellAmount.scss +++ b/src/components/BuySellForm/BuySellAmount/BuySellAmount.scss @@ -1,4 +1,4 @@ -.p2p-buy-sell-amount { +.buy-sell-amount { &__input-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); diff --git a/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx b/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx index 2f284158..6c318d16 100644 --- a/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx +++ b/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx @@ -1,12 +1,9 @@ import { useEffect, useState } from 'react'; import { Controller, useForm } from 'react-hook-form'; - -import { Input, Text, useDevice } from '@deriv-com/ui'; -import { FormatUtils } from '@deriv-com/utils'; - import { LightDivider } from '@/components'; import { floatingPointValidator } from '@/utils'; - +import { Input, Text, useDevice } from '@deriv-com/ui'; +import { FormatUtils } from '@deriv-com/utils'; import './BuySellAmount.scss'; type TBuySellAmountProps = { @@ -49,7 +46,7 @@ const BuySellAmount = ({ {`Enter ${isBuy ? 'sell' : 'buy'} amount`} -
+
-
+
{isBuy ? 'Buyer' : 'Seller'} diff --git a/src/components/BuySellForm/BuySellForm.scss b/src/components/BuySellForm/BuySellForm.scss index f7a2821e..a0ffcbd2 100644 --- a/src/components/BuySellForm/BuySellForm.scss +++ b/src/components/BuySellForm/BuySellForm.scss @@ -1,4 +1,4 @@ -.p2p-buy-sell-form { +.buy-sell-form { width: 44rem; height: unset; border-radius: 8px; @@ -32,7 +32,7 @@ z-index: 1; height: calc(100vh - 8rem); - & .p2p-mobile-wrapper__body { + & .mobile-wrapper__body { overflow: auto; } } diff --git a/src/components/BuySellForm/BuySellForm.tsx b/src/components/BuySellForm/BuySellForm.tsx index edf3b03e..f1478011 100644 --- a/src/components/BuySellForm/BuySellForm.tsx +++ b/src/components/BuySellForm/BuySellForm.tsx @@ -3,9 +3,6 @@ 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 { InlineMessage, Text, TextArea, useDevice } from '@deriv-com/ui'; - import { BUY_SELL, ORDERS_URL, RATE_TYPE, VALID_SYMBOLS_PATTERN } from '@/constants'; import { api } from '@/hooks'; import { @@ -15,14 +12,12 @@ import { roundOffDecimal, setDecimalPlaces, } from '@/utils'; - +import { InlineMessage, Text, TextArea, useDevice } from '@deriv-com/ui'; import { LightDivider } from '../LightDivider'; - import { BuySellAmount } from './BuySellAmount'; import { BuySellData } from './BuySellData'; import BuySellFormDisplayWrapper from './BuySellFormDisplayWrapper'; import { BuySellPaymentSection } from './BuySellPaymentSection'; - import './BuySellForm.scss'; type TPayload = Omit['mutate']>[0], 'payment_method_ids'> & { diff --git a/src/components/BuySellForm/BuySellFormDisplayWrapper.tsx b/src/components/BuySellForm/BuySellFormDisplayWrapper.tsx index ce5535f6..6ba53a54 100644 --- a/src/components/BuySellForm/BuySellFormDisplayWrapper.tsx +++ b/src/components/BuySellForm/BuySellFormDisplayWrapper.tsx @@ -1,10 +1,7 @@ import { PropsWithChildren } from 'react'; import clsx from 'clsx'; - import { Modal, useDevice } from '@deriv-com/ui'; - import { FullPageMobileWrapper } from '../FullPageMobileWrapper'; - import { BuySellFormFooter } from './BuySellFormFooter'; import { BuySellFormHeader } from './BuySellFormHeader'; @@ -29,7 +26,7 @@ const BuySellFormDisplayWrapper = ({ if (isMobile) { return ( } renderHeader={() => } @@ -42,7 +39,7 @@ const BuySellFormDisplayWrapper = ({ return ( ({ useDevice: jest.fn(() => ({ isMobile: false })), })); -const mockPaymentMethodCard = PaymentMethodCard as jest.MockedFunction; - describe('BuySellPaymentSection', () => { it('should render the component as expected', () => { render(); diff --git a/src/components/BuySellForm/__tests__/BuySellForm.spec.tsx b/src/components/BuySellForm/__tests__/BuySellForm.spec.tsx index bbf1ba36..e89718dd 100644 --- a/src/components/BuySellForm/__tests__/BuySellForm.spec.tsx +++ b/src/components/BuySellForm/__tests__/BuySellForm.spec.tsx @@ -1,11 +1,8 @@ import Modal from 'react-modal'; - +import { floatingPointValidator } from '@/utils'; import { useDevice } from '@deriv-com/ui'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; - -import { floatingPointValidator } from '@/utils'; - import BuySellForm from '../BuySellForm'; const mockMutateFn = jest.fn(); diff --git a/src/components/Checklist/Checklist.scss b/src/components/Checklist/Checklist.scss index 3891243b..2aee7b89 100644 --- a/src/components/Checklist/Checklist.scss +++ b/src/components/Checklist/Checklist.scss @@ -6,7 +6,7 @@ height: 3.2rem; } -.p2p-checklist { +.checklist { display: flex; flex-direction: column; margin-top: 2.4rem; diff --git a/src/components/Checklist/Checklist.tsx b/src/components/Checklist/Checklist.tsx index 640ce700..b20c95ae 100644 --- a/src/components/Checklist/Checklist.tsx +++ b/src/components/Checklist/Checklist.tsx @@ -1,8 +1,6 @@ +import { useDevice } from '@/hooks/custom-hooks'; import { LabelPairedArrowRightLgBoldIcon, LabelPairedCheckMdBoldIcon } from '@deriv/quill-icons'; import { Button, Text } from '@deriv-com/ui'; - -import { useDevice } from '@/hooks/custom-hooks'; - import './Checklist.scss'; type TChecklistItem = { @@ -16,23 +14,23 @@ type TChecklistItem = { const Checklist = ({ items }: { items: TChecklistItem[] }) => { const { isMobile } = useDevice(); return ( -
+
{items.map(item => ( -
+
{item.text} {item.status === 'done' ? ( -
- +
+
) : ( diff --git a/src/components/CloseHeader/CloseHeader.scss b/src/components/CloseHeader/CloseHeader.scss index 55b51b08..cf845b4a 100644 --- a/src/components/CloseHeader/CloseHeader.scss +++ b/src/components/CloseHeader/CloseHeader.scss @@ -1,4 +1,4 @@ -.p2p-close-header { +.close-header { width: 100%; height: 4rem; display: flex; diff --git a/src/components/CloseHeader/CloseHeader.tsx b/src/components/CloseHeader/CloseHeader.tsx index f6d28e5b..69108c09 100644 --- a/src/components/CloseHeader/CloseHeader.tsx +++ b/src/components/CloseHeader/CloseHeader.tsx @@ -1,20 +1,18 @@ +import { useDevice } from '@/hooks/custom-hooks'; import { LabelPairedXmarkLgBoldIcon } from '@deriv/quill-icons'; import { Text } from '@deriv-com/ui'; - -import { useDevice } from '@/hooks/custom-hooks'; - import './CloseHeader.scss'; const CloseHeader = () => { const { isMobile } = useDevice(); return ( -
+
{isMobile ? 'Deriv P2P' : 'Cashier'} window.history.back()} /> diff --git a/src/components/CloseHeader/__tests__/CloseHeader.spec.tsx b/src/components/CloseHeader/__tests__/CloseHeader.spec.tsx index 1218d6d4..5e706cbf 100644 --- a/src/components/CloseHeader/__tests__/CloseHeader.spec.tsx +++ b/src/components/CloseHeader/__tests__/CloseHeader.spec.tsx @@ -1,6 +1,5 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; - import CloseHeader from '../CloseHeader'; const mockUseDevice = { @@ -23,11 +22,11 @@ describe('CloseHeader', () => { }); it('should render the correct header title on desktop', () => { render(); - expect(screen.queryByText('Cashier')).toBeInTheDocument(); + expect(screen.getByText('Cashier')).toBeInTheDocument(); }); it('should render the correct header title on mobile', () => { mockUseDevice.isMobile = true; render(); - expect(screen.queryByText('Deriv P2P')).toBeInTheDocument(); + expect(screen.getByText('Deriv P2P')).toBeInTheDocument(); }); }); diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss index 35ab3d0e..66f5c6f1 100644 --- a/src/components/Dropdown/Dropdown.scss +++ b/src/components/Dropdown/Dropdown.scss @@ -1,4 +1,4 @@ -.p2p-dropdown { +.dropdown { width: 100%; position: relative; cursor: pointer; @@ -29,7 +29,7 @@ display: flex; align-items: center; - .p2p-textfield__field { + .textfield__field { cursor: pointer; } } diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index 6cb599ee..b2dc934d 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/src/components/Dropdown/Dropdown.tsx @@ -1,13 +1,10 @@ -import React, { useCallback, useEffect, useState } from 'react'; +import { FC, ReactNode, useCallback, useEffect, useState } from 'react'; import clsx from 'clsx'; import { useCombobox } from 'downshift'; - -import { LabelPairedChevronDownMdRegularIcon } from '@deriv/quill-icons'; -import { Text } from '@deriv-com/ui'; - import { TextField, TextFieldProps } from '@/components'; import { reactNodeToString } from '@/utils'; - +import { LabelPairedChevronDownMdRegularIcon } from '@deriv/quill-icons'; +import { Text } from '@deriv-com/ui'; import './Dropdown.scss'; type TGenericSizes = '2xl' | '2xs' | '3xl' | '3xs' | '4xl' | '5xl' | '6xl' | 'lg' | 'md' | 'sm' | 'xl' | 'xs'; @@ -15,11 +12,11 @@ type TGenericSizes = '2xl' | '2xs' | '3xl' | '3xs' | '4xl' | '5xl' | '6xl' | 'lg type TProps = { disabled?: boolean; errorMessage?: TextFieldProps['errorMessage']; - icon?: React.ReactNode; + icon?: ReactNode; isRequired?: boolean; label?: TextFieldProps['label']; list: { - text?: React.ReactNode; + text?: ReactNode; value?: string; }[]; listHeight?: Extract; @@ -30,7 +27,7 @@ type TProps = { variant?: 'comboBox' | 'prompt'; }; -const Dropdown: React.FC = ({ +const Dropdown: FC = ({ disabled = false, errorMessage = '', icon = false, @@ -99,12 +96,12 @@ const Dropdown: React.FC = ({ return (
-
+
= ({ renderLeftIcon={icon ? () => icon : undefined} renderRightIcon={() => (
-
    +
      {isOpen && items.map((item, index) => (
    • {noText ? ( -
      {children}
      +
      {children}
      ) : ( diff --git a/src/components/FileDropzone/FileDropzone.scss b/src/components/FileDropzone/FileDropzone.scss index d6c72300..6e01ba67 100644 --- a/src/components/FileDropzone/FileDropzone.scss +++ b/src/components/FileDropzone/FileDropzone.scss @@ -12,7 +12,7 @@ } } -.p2p-file-dropzone { +.file-dropzone { border-radius: 4px; border: 1px dashed #d6dadb; cursor: pointer; diff --git a/src/components/FileDropzone/FileDropzone.tsx b/src/components/FileDropzone/FileDropzone.tsx index 3543480f..854f2b70 100644 --- a/src/components/FileDropzone/FileDropzone.tsx +++ b/src/components/FileDropzone/FileDropzone.tsx @@ -1,14 +1,10 @@ import { useCallback, useRef } from 'react'; -import Dropzone, { DropzoneRef } from 'react-dropzone'; import classNames from 'classnames'; - -import { Text } from '@deriv-com/ui'; - +import Dropzone, { DropzoneRef } from 'react-dropzone'; import { TFileDropzone, truncateFileName } from '@/utils'; - +import { Text } from '@deriv-com/ui'; import { FadeInMessage } from './FadeInMessage'; import { PreviewSingle } from './PreviewSingle'; - import './FileDropzone.scss'; const DROPZONE_TIMEOUT = 150; @@ -66,16 +62,16 @@ const FileDropzone = ({ className, noClick = false, ...props }: TFileDropzone) = {({ getInputProps, getRootProps, isDragAccept, isDragActive, isDragReject, open }) => (
      0, - 'p2p-file-dropzone--is-active': isDragActive, - 'p2p-file-dropzone--is-noclick': noClick, + className={classNames('file-dropzone', className, { + 'file-dropzone--has-error': (isDragReject || !!validationErrorMessage) && !isDragAccept, + 'file-dropzone--has-file': isDragActive || value.length > 0, + 'file-dropzone--is-active': isDragActive, + 'file-dropzone--is-noclick': noClick, })} ref={dropzoneRef} > -
      +
      ( { const { dropzoneRef, filenameLimit, previewSingle, value } = props; if (previewSingle) { - return
      {previewSingle}
      ; + return
      {previewSingle}
      ; } return ( @@ -23,7 +20,7 @@ const PreviewSingle = (props: TPreviewSingle) => { maxWidth: `calc(${dropzoneRef.current?.offsetWidth || 365}px - 3.2rem)`, }} > - + {filenameLimit ? truncateFileName(value[0], filenameLimit) : value[0].name}
      diff --git a/src/components/FileUploaderComponent/FileUploaderComponent.scss b/src/components/FileUploaderComponent/FileUploaderComponent.scss index b31af4cb..5e739261 100644 --- a/src/components/FileUploaderComponent/FileUploaderComponent.scss +++ b/src/components/FileUploaderComponent/FileUploaderComponent.scss @@ -1,4 +1,4 @@ -.p2p-file-uploader-component { +.file-uploader-component { position: relative; &__close-icon { diff --git a/src/components/FileUploaderComponent/FileUploaderComponent.tsx b/src/components/FileUploaderComponent/FileUploaderComponent.tsx index 5c66c298..57e9148a 100644 --- a/src/components/FileUploaderComponent/FileUploaderComponent.tsx +++ b/src/components/FileUploaderComponent/FileUploaderComponent.tsx @@ -1,10 +1,7 @@ import { memo, useCallback } from 'react'; - import { DerivLightIcCloudUploadIcon, StandaloneCircleXmarkBoldIcon } from '@deriv/quill-icons'; import { Text } from '@deriv-com/ui'; - import { FileDropzone } from '../FileDropzone'; - import './FileUploaderComponent.scss'; type TFileUploaderComponentProps = { @@ -44,7 +41,7 @@ const FileUploaderComponent = ({ }, [uploadedMessage]); return ( -
      +
      {(value.length > 0 || !!validationErrorMessage) && ( -
      - +
      +
      + at -
      - +
      + of the market rate - + 1 {fiatCurrency} ={' '} {removeTrailingZeros( FormatUtils.formatMoney(marketRate, { @@ -98,11 +94,11 @@ const FloatingRate = ({
      {errorMessages ? ( - + {errorMessages} ) : ( - + Your rate is ={' '} {removeTrailingZeros( FormatUtils.formatMoney(Number(roundOffDecimal(marketFeed, decimalPlace)), { diff --git a/src/components/FloatingRate/__tests__/FloatingRate.spec.tsx b/src/components/FloatingRate/__tests__/FloatingRate.spec.tsx index ab428ee0..e347a3bb 100644 --- a/src/components/FloatingRate/__tests__/FloatingRate.spec.tsx +++ b/src/components/FloatingRate/__tests__/FloatingRate.spec.tsx @@ -1,6 +1,5 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; - import FloatingRate from '../FloatingRate'; jest.mock('@deriv-com/ui', () => ({ diff --git a/src/components/FlyoutMenu/FlyoutMenu.scss b/src/components/FlyoutMenu/FlyoutMenu.scss index 32763098..2c1fff30 100644 --- a/src/components/FlyoutMenu/FlyoutMenu.scss +++ b/src/components/FlyoutMenu/FlyoutMenu.scss @@ -1,4 +1,4 @@ -.p2p-flyout-menu { +.flyout-menu { &__list { position: absolute; top: 4.8rem; diff --git a/src/components/FlyoutMenu/FlyoutMenu.tsx b/src/components/FlyoutMenu/FlyoutMenu.tsx index 2418a2ae..50cedd93 100644 --- a/src/components/FlyoutMenu/FlyoutMenu.tsx +++ b/src/components/FlyoutMenu/FlyoutMenu.tsx @@ -1,9 +1,7 @@ import { HTMLAttributes, ReactNode, useRef, useState } from 'react'; import { useOnClickOutside } from 'usehooks-ts'; - import FlyoutMenuList from './FlyoutMenuList'; import FlyoutMenuToggle from './FlyoutMenuToggle'; - import './FlyoutMenu.scss'; type TFlyoutMenuProps = HTMLAttributes & { diff --git a/src/components/FlyoutMenu/FlyoutMenuList.tsx b/src/components/FlyoutMenu/FlyoutMenuList.tsx index 3c79770a..0c47b57e 100644 --- a/src/components/FlyoutMenu/FlyoutMenuList.tsx +++ b/src/components/FlyoutMenu/FlyoutMenuList.tsx @@ -7,7 +7,7 @@ type TFlyoutListProps = { const FlyoutList = ({ isOpen = false, listItems }: TFlyoutListProps) => { return isOpen ? ( -
        +
          {listItems?.map(listItem => { return
        • {listItem}
          • ; })} diff --git a/src/components/FlyoutMenu/FlyoutMenuToggle.tsx b/src/components/FlyoutMenu/FlyoutMenuToggle.tsx index 558145fb..531be827 100644 --- a/src/components/FlyoutMenu/FlyoutMenuToggle.tsx +++ b/src/components/FlyoutMenu/FlyoutMenuToggle.tsx @@ -1,4 +1,4 @@ -import React, { HTMLAttributes, ReactNode } from 'react'; +import { HTMLAttributes, ReactNode } from 'react'; type TFlyoutToggleProps = HTMLAttributes & { renderIcon?: () => ReactNode; diff --git a/src/components/FlyoutMenu/__tests__/FlyoutList.spec.tsx b/src/components/FlyoutMenu/__tests__/FlyoutList.spec.tsx index d40af0c1..d38e7b02 100644 --- a/src/components/FlyoutMenu/__tests__/FlyoutList.spec.tsx +++ b/src/components/FlyoutMenu/__tests__/FlyoutList.spec.tsx @@ -1,5 +1,4 @@ import { render, screen } from '@testing-library/react'; - import FlyoutMenuList from '../FlyoutMenuList'; jest.mock('react', () => ({ diff --git a/src/components/FlyoutMenu/__tests__/FlyoutMenu.spec.tsx b/src/components/FlyoutMenu/__tests__/FlyoutMenu.spec.tsx index a7c88b88..b7ca467a 100644 --- a/src/components/FlyoutMenu/__tests__/FlyoutMenu.spec.tsx +++ b/src/components/FlyoutMenu/__tests__/FlyoutMenu.spec.tsx @@ -1,6 +1,5 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; - import FlyoutMenu from '../FlyoutMenu'; const flyoutItems = ['item1', 'item2', 'item3']; @@ -24,7 +23,7 @@ describe('FlyoutMenu', () => {
      ); await userEvent.click(screen.getByTestId('dt_flyout_toggle')); - expect(screen.queryByText(flyoutItems[0])).toBeInTheDocument(); + expect(screen.getByText(flyoutItems[0])).toBeInTheDocument(); await userEvent.click(screen.getByTestId('dt_flyout_parent')); expect(screen.queryByText(flyoutItems[0])).not.toBeInTheDocument(); }); diff --git a/src/components/FormProgress/FormProgress.scss b/src/components/FormProgress/FormProgress.scss index 57acd822..9377e460 100644 --- a/src/components/FormProgress/FormProgress.scss +++ b/src/components/FormProgress/FormProgress.scss @@ -1,4 +1,4 @@ -.p2p-form-progress { +.form-progress { width: 100%; position: relative; @@ -18,7 +18,7 @@ width: 16rem; z-index: 2; - & .p2p-identifier { + & .identifier { border-radius: 50%; display: flex; align-items: center; diff --git a/src/components/FormProgress/FormProgress.tsx b/src/components/FormProgress/FormProgress.tsx index 352e05c0..ba3f1b10 100644 --- a/src/components/FormProgress/FormProgress.tsx +++ b/src/components/FormProgress/FormProgress.tsx @@ -1,5 +1,5 @@ //TODO: Below component will be removed once deriv-com/ui form-progress is ready -import React, { memo, useEffect, useRef } from 'react'; +import { memo, useEffect, useRef } from 'react'; import clsx from 'clsx'; import { TStep } from 'types'; import { Text, useDevice } from '@deriv-com/ui'; @@ -21,7 +21,7 @@ const FormProgress = ({ currentStep, steps = [], subSectionIndex = 0 }: TFormPro const animateCompleteBar = () => { const subStepsCount = steps[currentStep]?.subStepCount || null; - const elFirstIdentifier = (document.querySelector('.p2p-identifier') as HTMLSpanElement) || { + const elFirstIdentifier = (document.querySelector('.identifier') as HTMLSpanElement) || { clientWidth: 1, offsetLeft: 0, }; @@ -40,11 +40,11 @@ const FormProgress = ({ currentStep, steps = [], subSectionIndex = 0 }: TFormPro return ( <> {isDesktop ? ( -
      -
      -
      +
      +
      +
      (
      {(active = idx === currentStep)} -
      +
      ))} -
      +
      ) : (
      -
      -
      +
      +
      )} diff --git a/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss b/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss index b13fef09..3a9238c2 100644 --- a/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss +++ b/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss @@ -1,4 +1,4 @@ -.p2p-mobile-wrapper { +.mobile-wrapper { @include mobile { height: calc(100vh - 4rem); width: 100vw; diff --git a/src/components/FullPageMobileWrapper/FullPageMobileWrapper.tsx b/src/components/FullPageMobileWrapper/FullPageMobileWrapper.tsx index 0133c7fa..dfe3fcb9 100644 --- a/src/components/FullPageMobileWrapper/FullPageMobileWrapper.tsx +++ b/src/components/FullPageMobileWrapper/FullPageMobileWrapper.tsx @@ -1,4 +1,4 @@ -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren, ReactNode } from 'react'; import clsx from 'clsx'; import { LabelPairedArrowLeftLgBoldIcon } from '@deriv/quill-icons'; import './FullPageMobileWrapper.scss'; @@ -6,8 +6,8 @@ import './FullPageMobileWrapper.scss'; type TFullPageMobileWrapperProps = { className?: string; onBack?: () => void; - renderFooter?: () => React.ReactNode; - renderHeader?: () => React.ReactNode; + renderFooter?: () => ReactNode; + renderHeader?: () => ReactNode; shouldFixedFooter?: boolean; shouldShowBackIcon?: boolean; }; @@ -23,27 +23,24 @@ const FullPageMobileWrapper = ({ }: PropsWithChildren) => { return (
      {renderHeader && ( -
      +
      {shouldShowBackIcon && ( - + )} {renderHeader()}
      )} -
      {children}
      - {renderFooter &&
      {renderFooter()}
      } +
      {children}
      + {renderFooter &&
      {renderFooter()}
      }
      ); }; diff --git a/src/components/FullPageMobileWrapper/__tests__/FullPageMobileWrapper.spec.tsx b/src/components/FullPageMobileWrapper/__tests__/FullPageMobileWrapper.spec.tsx index 38ac09e2..62c5c83a 100644 --- a/src/components/FullPageMobileWrapper/__tests__/FullPageMobileWrapper.spec.tsx +++ b/src/components/FullPageMobileWrapper/__tests__/FullPageMobileWrapper.spec.tsx @@ -1,6 +1,5 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; - import FullPageMobileWrapper from '../FullPageMobileWrapper'; const Header = () =>

      Header

      ; diff --git a/src/components/Input/Input.scss b/src/components/Input/Input.scss index e210602b..343f234f 100644 --- a/src/components/Input/Input.scss +++ b/src/components/Input/Input.scss @@ -1,4 +1,4 @@ -.p2p-input { +.input { display: flex; justify-content: center; margin: 0.5rem 0 3.6rem; diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx index 4783c72d..194c04b7 100644 --- a/src/components/Input/Input.tsx +++ b/src/components/Input/Input.tsx @@ -1,10 +1,7 @@ -import React, { forwardRef, ReactElement } from 'react'; +import { forwardRef, ReactElement } from 'react'; import clsx from 'clsx'; - -import { Text } from '@deriv-com/ui'; - import { useDevice } from '@/hooks/custom-hooks'; - +import { Text } from '@deriv-com/ui'; import './Input.scss'; type TInputProps = { @@ -19,15 +16,15 @@ type TInputProps = { }; const Input = forwardRef( - ({ errorMessage, hasError, leadingIcon, name, onBlur, onChange, placeholder, value, ...props }, ref) => { + ({ errorMessage, hasError, leadingIcon, onBlur, onChange, placeholder, value, ...props }, ref) => { const { isMobile } = useDevice(); return ( -
      - {leadingIcon &&
      {leadingIcon}
      } +
      + {leadingIcon &&
      {leadingIcon}
      } ( {...props} /> {hasError && ( - + {errorMessage} )} diff --git a/src/components/InputField/InputField.scss b/src/components/InputField/InputField.scss index 2efe4688..77f8eca7 100644 --- a/src/components/InputField/InputField.scss +++ b/src/components/InputField/InputField.scss @@ -1,4 +1,4 @@ -.p2p-input-field { +.input-field { width: 100%; position: relative; &__prefix { diff --git a/src/components/InputField/InputField.tsx b/src/components/InputField/InputField.tsx index a27e7208..4bb547f3 100644 --- a/src/components/InputField/InputField.tsx +++ b/src/components/InputField/InputField.tsx @@ -1,4 +1,4 @@ -import React, { ChangeEvent, FocusEventHandler, KeyboardEvent, MouseEvent, TouchEvent, useRef, useState } from 'react'; +import { ChangeEvent, FocusEventHandler, KeyboardEvent, MouseEvent, TouchEvent, useRef, useState } from 'react'; import { LabelPairedMinusSmBoldIcon, LabelPairedPlusSmBoldIcon } from '@deriv/quill-icons'; import { Button, Input, Text, useDevice } from '@deriv-com/ui'; import './InputField.scss'; @@ -160,8 +160,8 @@ const InputField = ({ decimalPointChange, isError, name = '', onBlur, onChange, }; return ( -
      -
      +
      +
      %
      ({ diff --git a/src/components/MobileTabs/MobileTabs.scss b/src/components/MobileTabs/MobileTabs.scss index c6ff47a9..3e56a3d5 100644 --- a/src/components/MobileTabs/MobileTabs.scss +++ b/src/components/MobileTabs/MobileTabs.scss @@ -1,4 +1,4 @@ -.p2p-mobile-tabs { +.mobile-tabs { display: flex; flex-direction: column; diff --git a/src/components/MobileTabs/MobileTabs.tsx b/src/components/MobileTabs/MobileTabs.tsx index 3de9aeeb..2e8f2dc5 100644 --- a/src/components/MobileTabs/MobileTabs.tsx +++ b/src/components/MobileTabs/MobileTabs.tsx @@ -1,6 +1,5 @@ import { LabelPairedChevronRightSmRegularIcon } from '@deriv/quill-icons'; import { Button, Text } from '@deriv-com/ui'; - import './MobileTabs.scss'; type TMobileTabsProps = { @@ -10,10 +9,10 @@ type TMobileTabsProps = { function MobileTabs({ onChangeTab, tabs }: TMobileTabsProps) { return ( -
      +
      {tabs.map((tab, i) => ( diff --git a/src/components/Modals/AdCreateEditErrorModal/__tests__/AdCreateEditErrorModal.spec.tsx b/src/components/Modals/AdCreateEditErrorModal/__tests__/AdCreateEditErrorModal.spec.tsx index 03d85780..a9ccb5f7 100644 --- a/src/components/Modals/AdCreateEditErrorModal/__tests__/AdCreateEditErrorModal.spec.tsx +++ b/src/components/Modals/AdCreateEditErrorModal/__tests__/AdCreateEditErrorModal.spec.tsx @@ -1,6 +1,5 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; - import AdCreateEditErrorModal from '../AdCreateEditErrorModal'; const mockProps = { diff --git a/src/components/Modals/AdCreateEditSuccessModal/AdCreateEditSuccessModal.scss b/src/components/Modals/AdCreateEditSuccessModal/AdCreateEditSuccessModal.scss index ff8ec932..6ede3918 100644 --- a/src/components/Modals/AdCreateEditSuccessModal/AdCreateEditSuccessModal.scss +++ b/src/components/Modals/AdCreateEditSuccessModal/AdCreateEditSuccessModal.scss @@ -1,4 +1,4 @@ -.p2p-ad-create-edit-success-modal { +.ad-create-edit-success-modal { height: fit-content; width: 44rem; border-radius: 8px; diff --git a/src/components/Modals/AdCreateEditSuccessModal/AdCreateEditSuccessModal.tsx b/src/components/Modals/AdCreateEditSuccessModal/AdCreateEditSuccessModal.tsx index f3cb9a7c..3ff936bd 100644 --- a/src/components/Modals/AdCreateEditSuccessModal/AdCreateEditSuccessModal.tsx +++ b/src/components/Modals/AdCreateEditSuccessModal/AdCreateEditSuccessModal.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState } from 'react'; +import { useCallback, useState } from 'react'; import { useHistory } from 'react-router-dom'; import { MY_ADS_URL } from '@/constants'; import { Button, Checkbox, Modal, Text, useDevice } from '@deriv-com/ui'; @@ -31,14 +31,14 @@ const AdCreateEditSuccessModal = ({ return ( You’ve created an ad - + {`If the ad doesn't receive an order for ${advertsArchivePeriod} days, it will be deactivated.`} diff --git a/src/components/Modals/AdCreateEditSuccessModal/__tests__/AdCreateEditSuccessModal.spec.tsx b/src/components/Modals/AdCreateEditSuccessModal/__tests__/AdCreateEditSuccessModal.spec.tsx index a2a00aec..5ff1579a 100644 --- a/src/components/Modals/AdCreateEditSuccessModal/__tests__/AdCreateEditSuccessModal.spec.tsx +++ b/src/components/Modals/AdCreateEditSuccessModal/__tests__/AdCreateEditSuccessModal.spec.tsx @@ -1,6 +1,5 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; - import AdCreateEditSuccessModal from '../AdCreateEditSuccessModal'; const mockProps = { diff --git a/src/components/Modals/AdErrorTooltipModal/AdErrorTooltipModal.scss b/src/components/Modals/AdErrorTooltipModal/AdErrorTooltipModal.scss index 38321dc4..bf1046ca 100644 --- a/src/components/Modals/AdErrorTooltipModal/AdErrorTooltipModal.scss +++ b/src/components/Modals/AdErrorTooltipModal/AdErrorTooltipModal.scss @@ -1,4 +1,4 @@ -.p2p-ad-error-tooltip-modal { +.ad-error-tooltip-modal { width: 44rem; padding: 2.4rem; height: fit-content; diff --git a/src/components/Modals/AdErrorTooltipModal/AdErrorTooltipModal.tsx b/src/components/Modals/AdErrorTooltipModal/AdErrorTooltipModal.tsx index 8ef4af65..3efecc52 100644 --- a/src/components/Modals/AdErrorTooltipModal/AdErrorTooltipModal.tsx +++ b/src/components/Modals/AdErrorTooltipModal/AdErrorTooltipModal.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { ADVERT_TYPE, ERROR_CODES } from '@/constants'; import { AdRateError } from '@/pages/my-ads/components'; import { Button, Modal, Text, useDevice } from '@deriv-com/ui'; @@ -74,12 +74,12 @@ const AdErrorTooltipModal = ({ return ( -
      +
      {visibilityStatus.length === 1 ? ( getAdErrorMessage( diff --git a/src/components/Modals/AdErrorTooltipModal/__tests__/AdErrorTooltipModal.spec.tsx b/src/components/Modals/AdErrorTooltipModal/__tests__/AdErrorTooltipModal.spec.tsx index 97b46229..266ca85f 100644 --- a/src/components/Modals/AdErrorTooltipModal/__tests__/AdErrorTooltipModal.spec.tsx +++ b/src/components/Modals/AdErrorTooltipModal/__tests__/AdErrorTooltipModal.spec.tsx @@ -1,5 +1,4 @@ import { render, screen } from '@testing-library/react'; - import AdErrorTooltipModal from '../AdErrorTooltipModal'; const mockProps = { diff --git a/src/components/Modals/AdRateSwitchModal/AdRateSwitchModal.scss b/src/components/Modals/AdRateSwitchModal/AdRateSwitchModal.scss index a162a139..731fc80d 100644 --- a/src/components/Modals/AdRateSwitchModal/AdRateSwitchModal.scss +++ b/src/components/Modals/AdRateSwitchModal/AdRateSwitchModal.scss @@ -1,4 +1,4 @@ -.p2p-ad-rate-switch-modal { +.ad-rate-switch-modal { width: 44rem; height: fit-content; border-radius: 8px; diff --git a/src/components/Modals/AdRateSwitchModal/AdRateSwitchModal.tsx b/src/components/Modals/AdRateSwitchModal/AdRateSwitchModal.tsx index 7b0c39c7..2c3b859d 100644 --- a/src/components/Modals/AdRateSwitchModal/AdRateSwitchModal.tsx +++ b/src/components/Modals/AdRateSwitchModal/AdRateSwitchModal.tsx @@ -1,7 +1,5 @@ -import { Button, Modal, Text, useDevice } from '@deriv-com/ui'; - import { RATE_TYPE } from '@/constants'; - +import { Button, Modal, Text, useDevice } from '@deriv-com/ui'; import './AdRateSwitchModal.scss'; type TAdRateSwitchModalProps = { @@ -24,14 +22,14 @@ const AdRateSwitchModal = ({ return ( - + {isFloat ? 'Set a floating rate for your ad.' : 'Set a fixed rate for your ad.'} - + diff --git a/src/components/Modals/AvailableP2PBalanceModal/__tests__/AvailableP2PBalanceModal.spec.tsx b/src/components/Modals/AvailableP2PBalanceModal/__tests__/AvailableP2PBalanceModal.spec.tsx index 3050425c..564b5593 100644 --- a/src/components/Modals/AvailableP2PBalanceModal/__tests__/AvailableP2PBalanceModal.spec.tsx +++ b/src/components/Modals/AvailableP2PBalanceModal/__tests__/AvailableP2PBalanceModal.spec.tsx @@ -1,4 +1,3 @@ -import React, { useState } from 'react'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import AvailableP2PBalanceModal from '../AvailableP2PBalanceModal'; @@ -19,12 +18,12 @@ describe('AvailableP2PBalanceModal', () => { render(); expect(screen.getByTestId('dt_available_p2p_balance_modal')).toBeInTheDocument(); }); - it('should perform callback to onRequestClose when Ok button is clicked', () => { + it('should perform callback to onRequestClose when Ok button is clicked', async () => { render(); const okBtn = screen.getByRole('button', { name: 'Ok', }); - userEvent.click(okBtn); + await userEvent.click(okBtn); expect(mockOnRequestClose).toBeCalled(); }); }); diff --git a/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.scss b/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.scss index 85e89247..6863b49a 100644 --- a/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.scss +++ b/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.scss @@ -1,4 +1,4 @@ -.p2p-block-unblock-user-modal { +.block-unblock-user-modal { position: absolute; top: 50%; left: 50%; diff --git a/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx b/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx index d95d1374..b24871fa 100644 --- a/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx +++ b/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx @@ -1,12 +1,8 @@ import { useEffect } from 'react'; import Modal from 'react-modal'; - -import { Button, Text } from '@deriv-com/ui'; - import { api } from '@/hooks'; - +import { Button, Text } from '@deriv-com/ui'; import { customStyles } from '../helpers'; - import './BlockUnblockUserModal.scss'; type TBlockUnblockUserModalProps = { @@ -50,7 +46,7 @@ const BlockUnblockUserModal = ({ return ( {getModalTitle()} - + {getModalContent()} -
      +
      @@ -50,10 +46,10 @@ const DailyLimitModal = ({ currency, isModalOpen, onRequestClose }: TDailyLimitM An internal error occured - + {`Sorry, we're unable to increase your limits right now. Please try again in a few minutes.`} -
      +
      @@ -66,10 +62,10 @@ const DailyLimitModal = ({ currency, isModalOpen, onRequestClose }: TDailyLimitM Are you sure? - + You won’t be able to change your buy and sell limits again after this. Do you want to continue? -
      +
      @@ -84,7 +80,7 @@ const DailyLimitModal = ({ currency, isModalOpen, onRequestClose }: TDailyLimitM return ( // TODO: below modal will be rewritten to use @deriv/ui modal ( diff --git a/src/components/Modals/EmailLinkVerifiedModal/EmailLinkVerifiedModal.scss b/src/components/Modals/EmailLinkVerifiedModal/EmailLinkVerifiedModal.scss index 80c47efe..ff78e4d2 100644 --- a/src/components/Modals/EmailLinkVerifiedModal/EmailLinkVerifiedModal.scss +++ b/src/components/Modals/EmailLinkVerifiedModal/EmailLinkVerifiedModal.scss @@ -1,4 +1,4 @@ -.p2p-email-link-verified-modal { +.email-link-verified-modal { height: auto; width: 44rem; border-radius: 8px; diff --git a/src/components/Modals/EmailLinkVerifiedModal/EmailLinkVerifiedModal.tsx b/src/components/Modals/EmailLinkVerifiedModal/EmailLinkVerifiedModal.tsx index 2a18a483..c7ac54cc 100644 --- a/src/components/Modals/EmailLinkVerifiedModal/EmailLinkVerifiedModal.tsx +++ b/src/components/Modals/EmailLinkVerifiedModal/EmailLinkVerifiedModal.tsx @@ -1,6 +1,5 @@ import { DerivLightIcEmailVerificationLinkValidIcon } from '@deriv/quill-icons'; import { Button, Modal, Text } from '@deriv-com/ui'; - import './EmailLinkVerifiedModal.scss'; type TEmailLinkVerifiedModal = { @@ -11,7 +10,7 @@ type TEmailLinkVerifiedModal = { // TODO: replace value, currency and username with actual values when implementing function const EmailLinkVerifiedModal = ({ isModalOpen, onRequestClose }: TEmailLinkVerifiedModal) => { return ( - + diff --git a/src/components/Modals/EmailLinkVerifiedModal/__tests__/EmailLinkVerifiedModal.spec.tsx b/src/components/Modals/EmailLinkVerifiedModal/__tests__/EmailLinkVerifiedModal.spec.tsx index c599572b..02b7bac7 100644 --- a/src/components/Modals/EmailLinkVerifiedModal/__tests__/EmailLinkVerifiedModal.spec.tsx +++ b/src/components/Modals/EmailLinkVerifiedModal/__tests__/EmailLinkVerifiedModal.spec.tsx @@ -1,5 +1,4 @@ import { render, screen } from '@testing-library/react'; - import EmailLinkVerifiedModal from '../EmailLinkVerifiedModal'; describe('', () => { diff --git a/src/components/Modals/EmailVerificationModal/EmailVerificationModal.scss b/src/components/Modals/EmailVerificationModal/EmailVerificationModal.scss index 6f106823..3b034e3b 100644 --- a/src/components/Modals/EmailVerificationModal/EmailVerificationModal.scss +++ b/src/components/Modals/EmailVerificationModal/EmailVerificationModal.scss @@ -1,4 +1,4 @@ -.p2p-email-verification-modal { +.email-verification-modal { height: auto; width: 44rem; border-radius: 8px; diff --git a/src/components/Modals/EmailVerificationModal/EmailVerificationModal.tsx b/src/components/Modals/EmailVerificationModal/EmailVerificationModal.tsx index 44e81389..c5a630bd 100644 --- a/src/components/Modals/EmailVerificationModal/EmailVerificationModal.tsx +++ b/src/components/Modals/EmailVerificationModal/EmailVerificationModal.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import { DerivLightIcEmailSentIcon, DerivLightIcFirewallEmailPasskeyIcon, @@ -42,7 +42,7 @@ const EmailVerificationModal = ({ isModalOpen, onRequestClose }: TEmailVerificat return ( @@ -57,7 +57,7 @@ const EmailVerificationModal = ({ isModalOpen, onRequestClose }: TEmailVerificat instructions within 10 minutes to release the funds. diff --git a/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/__tests__/PaymentMethodErrorModal.spec.tsx b/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/__tests__/PaymentMethodErrorModal.spec.tsx index 7ece6e21..bbd2ef68 100644 --- a/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/__tests__/PaymentMethodErrorModal.spec.tsx +++ b/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/__tests__/PaymentMethodErrorModal.spec.tsx @@ -1,4 +1,4 @@ -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { render, screen } from '@testing-library/react'; import PaymentMethodErrorModal from '../PaymentMethodErrorModal'; diff --git a/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.scss b/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.scss index 24028a3e..fb9b0dd3 100644 --- a/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.scss +++ b/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.scss @@ -1,4 +1,4 @@ -.p2p-payment-method-modal { +.payment-method-modal { height: auto; border-radius: 8px; width: 44rem; diff --git a/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.tsx b/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.tsx index cfec6f88..0cbe215f 100644 --- a/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.tsx +++ b/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.tsx @@ -1,5 +1,4 @@ import { Button, Modal, Text, useDevice } from '@deriv-com/ui'; - import './PaymentMethodModal.scss'; type TPaymentMethodModalProps = { @@ -28,18 +27,18 @@ const PaymentMethodModal = ({ return ( - + {title} - + {description} - + , ]; return ( -
      +
      { diff --git a/src/components/PaymentMethodCard/__tests__/PaymentMethodCardHeader.spec.tsx b/src/components/PaymentMethodCard/__tests__/PaymentMethodCardHeader.spec.tsx index 5ab538f2..48e2fcd5 100644 --- a/src/components/PaymentMethodCard/__tests__/PaymentMethodCardHeader.spec.tsx +++ b/src/components/PaymentMethodCard/__tests__/PaymentMethodCardHeader.spec.tsx @@ -1,5 +1,4 @@ import { render, screen } from '@testing-library/react'; - import { PaymentMethodCardHeader } from '../PaymentMethodCardHeader'; jest.mock('../../../public/ic-cashier-ewallet.svg', () => 'span'); diff --git a/src/components/PaymentMethodField/PaymentMethodField.tsx b/src/components/PaymentMethodField/PaymentMethodField.tsx index d1ee4652..b5d8e7da 100644 --- a/src/components/PaymentMethodField/PaymentMethodField.tsx +++ b/src/components/PaymentMethodField/PaymentMethodField.tsx @@ -1,9 +1,6 @@ import { Controller, useForm } from 'react-hook-form'; - -import { Input } from '@deriv-com/ui'; - import { VALID_SYMBOLS_PATTERN } from '@/constants'; - +import { Input } from '@deriv-com/ui'; import { TextArea } from '..'; type TPaymentMethodField = { @@ -27,7 +24,7 @@ type TPaymentMethodField = { * **/ const PaymentMethodField = ({ control, defaultValue, displayName, field, required }: TPaymentMethodField) => { return ( -
      +
      ({ diff --git a/src/components/PaymentMethodForm/PaymentMethodForm.scss b/src/components/PaymentMethodForm/PaymentMethodForm.scss index 2c81315b..eba8f4c2 100644 --- a/src/components/PaymentMethodForm/PaymentMethodForm.scss +++ b/src/components/PaymentMethodForm/PaymentMethodForm.scss @@ -1,4 +1,4 @@ -.p2p-payment-method-form { +.payment-method-form { max-width: 100%; min-width: 67.2rem; padding-bottom: 2.4rem; @@ -68,7 +68,7 @@ top: 0; } - .p2p-textfield__message-container { + .textfield__message-container { padding: 0; height: 0; } diff --git a/src/components/PaymentMethodForm/PaymentMethodForm.tsx b/src/components/PaymentMethodForm/PaymentMethodForm.tsx index 29caa48c..00714267 100644 --- a/src/components/PaymentMethodForm/PaymentMethodForm.tsx +++ b/src/components/PaymentMethodForm/PaymentMethodForm.tsx @@ -1,16 +1,12 @@ import { useEffect, useMemo, useState } from 'react'; import { useForm } from 'react-hook-form'; import { TSelectedPaymentMethod } from 'types'; - -import { useDevice } from '@deriv-com/ui'; - import { PageReturn, PaymentMethodField, PaymentMethodsFormFooter } from '@/components'; import { api } from '@/hooks'; import { TFormState } from '@/reducers/types'; - +import { useDevice } from '@deriv-com/ui'; import { PaymentMethodFormAutocomplete } from './PaymentMethodFormAutocomplete'; import { PaymentMethodFormModalRenderer } from './PaymentMethodFormModalRenderer'; - import './PaymentMethodForm.scss'; type TPaymentMethodFormProps = { @@ -68,7 +64,7 @@ const PaymentMethodForm = ({ onAdd, onResetFormState, ...rest }: TPaymentMethodF }; return ( -
      +
      { const hasData = Object.keys(data).length > 0; if (actionType === 'ADD' && hasData) { @@ -91,8 +87,8 @@ const PaymentMethodForm = ({ onAdd, onResetFormState, ...rest }: TPaymentMethodF } })} > -
      -
      +
      +