fix: error fixes

.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'],

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",

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 = () => {

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;

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<TAdvertiserStats> }) => {
@@ -23,9 +19,9 @@ const AdvertiserName = ({ advertiserStats }: { advertiserStats: DeepPartial<TAdv
     const name = advertiserStats?.name || email;
 
     return (
-        <div className='p2p-advertiser-name' data-testid='dt_advertiser_name'>
+        <div className='advertiser-name' data-testid='dt_advertiser_name'>
             <UserAvatar nickname={name!} size={isDesktop ? 64 : 42} textSize='lg' />
-            <div className='p2p-advertiser-name__details'>
+            <div className='advertiser-name__details'>
                 <div className='flex items-center gap-3'>
                     <Text size='md' weight='bold'>
                         {name}

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;

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 (
-        <div className='p2p-advertiser-name-badges' data-testid='dt_advertiser_name_badges'>
+        <div className='advertiser-name-badges' data-testid='dt_advertiser_name_badges'>
             {(totalOrders || 0) >= 100 && <Badge label='100+' status='trades' variant='warning' />}
             <Badge
                 label='ID'

src/components/AdvertiserName/AdvertiserNameStats.scss

@@ -1,4 +1,4 @@
-.p2p-advertiser-name-stats {
+.advertiser-name-stats {
     display: flex;
     align-items: center;
 

src/components/AdvertiserName/AdvertiserNameStats.tsx

@@ -1,14 +1,10 @@
 import clsx from 'clsx';
-import { TAdvertiserStats } from 'types';
-
-import { Text, useDevice } from '@deriv-com/ui';
-
+import { DeepPartial, TAdvertiserStats } from 'types';
 import { OnlineStatusIcon, OnlineStatusLabel, StarRating } from '@/components';
 import { getCurrentRoute } from '@/utils';
-
+import { Text, useDevice } from '@deriv-com/ui';
 import ThumbUpIcon from '../../public/ic-thumb-up.svg';
 import BlockedUserOutlineIcon from '../../public/ic-user-blocked-outline.svg';
-
 import './AdvertiserNameStats.scss';
 
 /**
@@ -34,7 +30,7 @@ const AdvertiserNameStats = ({ advertiserStats }: { advertiserStats: DeepPartial
 
     return (
         <div
-            className={clsx('p2p-advertiser-name-stats', {
+            className={clsx('advertiser-name-stats', {
                 'gap-2': !isMyProfile && isMobile,
             })}
             data-testid='dt_advertiser_name_stats'
@@ -63,7 +59,7 @@ const AdvertiserNameStats = ({ advertiserStats }: { advertiserStats: DeepPartial
             {ratingAverage && (
                 <>
                     <div>
-                        <div className='p2p-advertiser-name-stats__rating'>
+                        <div className='advertiser-name-stats__rating'>
                             {isMobile && (
                                 <Text color='less-prominent' size='sm'>
                                     ({ratingAverage})

src/components/AdvertiserName/AdvertiserNameToggle.scss

@@ -1,4 +1,4 @@
-.p2p-advertiser-name-toggle {
+.advertiser-name-toggle {
     display: flex;
     gap: 0.8rem;