Merge pull request #7 from nada-deriv/migration

feat: src and hooks from v2

package.json

@@ -25,6 +25,7 @@
     "clsx": "^2.1.0",
     "downshift": "^9.0.0",
     "html2canvas": "^1.4.1",
+    "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
@@ -60,8 +61,11 @@
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
+    "@types/lodash": "^4.17.0",
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
+    "@types/react-router-dom": "^5.3.3",
+    "@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",

src/App.tsx

@@ -1,4 +1,13 @@
+import { QueryParamProvider } from 'use-query-params';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
+
+import AppContent from './routes/AppContent';
+
 const App = () => {
-    return <div>Deriv P2P</div>;
+    return (
+        <QueryParamProvider adapter={ReactRouter5Adapter}>
+            <AppContent />
+        </QueryParamProvider>
+    );
 };
 export default App;

src/components/AdvertiserName/AdvertiserName.scss

@@ -0,0 +1,16 @@
+.p2p-advertiser-name {
+    display: grid;
+    grid-gap: 1.6rem;
+    grid-template-columns: min-content auto max-content;
+
+    @include mobile {
+        grid-template-columns: min-content auto;
+    }
+
+    &__details {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 0.4rem;
+    }
+}

src/components/AdvertiserName/AdvertiserName.tsx

@@ -0,0 +1,49 @@
+import { TAdvertiserStats } from 'types';
+
+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> }) => {
+    const {
+        data: { email },
+    } = useSettings();
+    const { isDesktop } = useDevice();
+    const isMyProfile = getCurrentRoute() === 'my-profile';
+
+    const name = advertiserStats?.name || email;
+
+    return (
+        <div className='p2p-advertiser-name' data-testid='dt_advertiser_name'>
+            <UserAvatar nickname={name!} size={isDesktop ? 64 : 42} textSize='lg' />
+            <div className='p2p-advertiser-name__details'>
+                <div className='flex items-center gap-3'>
+                    <Text size='md' weight='bold'>
+                        {name}
+                    </Text>
+                    {(advertiserStats?.should_show_name || !isMyProfile) && (
+                        <Text color='less-prominent' size='sm'>
+                            ({advertiserStats?.fullName})
+                        </Text>
+                    )}
+                </div>
+                <AdvertiserNameStats advertiserStats={advertiserStats} />
+                <AdvertiserNameBadges advertiserStats={advertiserStats} />
+            </div>
+            {isDesktop && isMyProfile && <AdvertiserNameToggle advertiserInfo={advertiserStats} />}
+            {isDesktop && !isMyProfile && <LabelPairedEllipsisVerticalLgRegularIcon className='cursor-pointer' />}
+        </div>
+    );
+};
+AdvertiserName.displayName = 'AdvertiserName';
+
+export default AdvertiserName;

src/components/AdvertiserName/AdvertiserNameBadges.scss

@@ -0,0 +1,5 @@
+.p2p-advertiser-name-badges {
+    display: flex;
+    gap: 0.4rem;
+    padding: 0.4rem 0;
+}

src/components/AdvertiserName/AdvertiserNameBadges.tsx

@@ -0,0 +1,34 @@
+import { TAdvertiserStats } from 'types';
+
+import { Badge } from '@/components';
+
+import './AdvertiserNameBadges.scss';
+
+/**
+ * This component is used to show an advertiser's badge, for instance:
+ * +100 Trades, ID verified, Address not verified, etc
+ *
+ * Use cases are usually in My Profile page and Advertiser page used under the advertiser's name
+ */
+const AdvertiserNameBadges = ({ advertiserStats }: { advertiserStats: DeepPartial<TAdvertiserStats> }) => {
+    const { isAddressVerified, isIdentityVerified, totalOrders } = advertiserStats || {};
+
+    return (
+        <div className='p2p-advertiser-name-badges' data-testid='dt_advertiser_name_badges'>
+            {(totalOrders || 0) >= 100 && <Badge label='100+' status='trades' variant='warning' />}
+            <Badge
+                label='ID'
+                status={isIdentityVerified ? 'verified' : 'not verified'}
+                variant={isIdentityVerified ? 'success' : 'general'}
+            />
+            <Badge
+                label='Address'
+                status={isAddressVerified ? 'verified' : 'not verified'}
+                variant={isAddressVerified ? 'success' : 'general'}
+            />
+        </div>
+    );
+};
+AdvertiserNameBadges.displayName = 'AdvertiserNameBadges';
+
+export default AdvertiserNameBadges;

src/components/AdvertiserName/AdvertiserNameStats.scss

@@ -0,0 +1,35 @@
+.p2p-advertiser-name-stats {
+    display: flex;
+    align-items: center;
+
+    @include mobile {
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        gap: 2rem;
+    }
+
+    & div {
+        display: flex;
+        align-items: center;
+        gap: 0.8rem;
+        padding: 0 0.8rem;
+        border-left: 1px solid #f2f3f4;
+
+        @include mobile {
+            border-left: none;
+            padding: 0;
+        }
+
+        &:first-child {
+            padding-left: 0;
+            padding-right: 0.8rem;
+            border-left: none;
+        }
+    }
+
+    &__rating {
+        display: flex;
+        gap: 0.5rem;
+    }
+}