[WALL] aum / WALL-[4916 / 4925] / wallets-implement-default-jurisdiction-flows

packages/account/package.json

@@ -33,7 +33,7 @@
         "@deriv-com/analytics": "1.14.0",
         "@deriv-com/translations": "1.3.9",
         "@deriv-com/utils": "^0.0.34",
-        "@deriv-com/ui": "1.35.0",
+        "@deriv-com/ui": "1.35.2",
         "@deriv/api": "^1.0.0",
         "@deriv-com/quill-ui": "1.16.18",
         "@deriv/components": "^1.0.0",

packages/api-v2/src/hooks/useSortedMT5Accounts.ts

@@ -28,79 +28,70 @@ const useSortedMT5Accounts = (regulation?: string) => {
                     : account.landing_company_short !== 'maltainvest')
         );
 
-        return filtered_available_accounts?.map(available_account => {
+        const combined_accounts = filtered_available_accounts?.map(available_account => {
             const created_account = filtered_mt5_accounts?.find(account => {
                 return (
-                    available_account.market_type === account.market_type &&
+                    available_account.product === account.product &&
                     available_account.shortcode === account.landing_company_short
                 );
             });
 
-            if (created_account)
-                return {
-                    ...created_account,
-                    /** Determine if the account is added or not */
-                    is_added: true,
-                } as const;
-
             return {
                 ...available_account,
+                ...created_account,
                 /** Determine if the account is added or not */
-                is_added: false,
-            } as const;
+                is_added: Boolean(created_account),
+            };
         });
-    }, [activeAccount?.is_virtual, all_available_mt5_accounts, isEU, mt5_accounts]);
 
-    // // Reduce out the added and non added accounts to make sure only one of each market_type is shown for not added
-    const filtered_data = useMemo(() => {
-        if (!modified_data) return;
-
-        const added_accounts = modified_data.filter(account => account.is_added);
-        const non_added_accounts = modified_data.filter(account => !account.is_added);
-
-        const filtered_non_added_accounts = non_added_accounts.reduce((acc, account) => {
-            const { market_type, product } = account;
-            const key = product === 'zero_spread' ? `${market_type}_${product}` : market_type;
-
-            const existing_account = acc.find(acc_account =>
-                acc_account.product === 'zero_spread'
-                    ? `${acc_account.market_type}_${acc_account.product}` === key
-                    : acc_account.market_type === key
-            );
-            const added_account = added_accounts.find(acc_account =>
-                acc_account.product === 'zero_spread'
-                    ? `${acc_account.market_type}_${acc_account.product}` === key
-                    : acc_account.market_type === key
-            );
-            if (existing_account || added_account) return acc;
-
-            return [...acc, account];
-        }, [] as typeof non_added_accounts);
-
-        return [...added_accounts, ...filtered_non_added_accounts];
-    }, [modified_data]);
+        return Array.from(
+            // filter out only one account per product type
+            combined_accounts
+                .reduce(
+                    (
+                        acc: Map<typeof combined_accounts[number]['product'], typeof combined_accounts[number]>,
+                        cur: typeof combined_accounts[number]
+                    ) => {
+                        const existingItem = acc.get(cur.product);
+
+                        // Note: 'stp' product type account is not available for creation but we still support existing 'stp' accounts
+                        // @ts-expect-error type for is_default_jurisdiction is unavailable in mt5_login_list and trading_platform_available_accounts
+                        if (!existingItem && cur.is_default_jurisdiction === 'true' && cur.product !== 'stp') {
+                            // No existing item for this product, add it directly
+                            acc.set(cur.product, cur);
+                        } else if (cur.is_added) {
+                            // If `is_added` is true, replace the older entry (prioritization)
+                            acc.set(cur.product, cur);
+                        }
+
+                        return acc;
+                    },
+                    new Map<typeof combined_accounts[number]['product'], typeof combined_accounts[number]>()
+                )
+                .values()
+        );
+    }, [activeAccount?.is_virtual, all_available_mt5_accounts, isEU, mt5_accounts]);
 
-    // Sort the data by market_type and product to make sure the order is 'synthetic', 'financial', 'swap_free' and 'zero_spread'
     const sorted_data = useMemo(() => {
         const sorting_order = ['synthetic', 'financial', 'swap_free', 'zero_spread'];
 
-        if (!filtered_data) return;
+        if (!modified_data) return;
 
         const sorted_data = sorting_order.reduce((acc, sort_order) => {
-            const accounts = filtered_data.filter(account => {
+            const accounts = modified_data.filter(account => {
                 if (account.market_type === 'all') {
                     return account.product === sort_order;
                 }
                 return account.market_type === sort_order;
             });
             if (!accounts.length) return acc;
             return [...acc, ...accounts];
-        }, [] as typeof filtered_data);
+        }, [] as typeof modified_data);
 
         return sorted_data;
-    }, [filtered_data]);
+    }, [modified_data]);
 
-    const areAllAccountsCreated = sorted_data?.length === all_available_mt5_accounts?.length;
+    const areAllAccountsCreated = modified_data?.length === all_available_mt5_accounts?.length;
 
     return {
         data: sorted_data,

packages/appstore/package.json

@@ -28,7 +28,7 @@
     "dependencies": {
         "@deriv-com/analytics": "1.14.0",
         "@deriv-com/translations": "1.3.9",
-        "@deriv-com/ui": "1.35.0",
+        "@deriv-com/ui": "1.35.2",
         "@deriv/account": "^1.0.0",
         "@deriv/cashier": "^1.0.0",
         "@deriv/cfd": "^1.0.0",

packages/bot-web-ui/package.json

@@ -71,7 +71,7 @@
         "webpack-cli": "^4.7.2"
     },
     "dependencies": {
-        "@deriv-com/ui": "1.35.0",
+        "@deriv-com/ui": "1.35.2",
         "@deriv/api": "^1.0.0",
         "@deriv/api-types": "1.0.172",
         "@deriv/bot-skeleton": "^1.0.0",

packages/cashier/package.json

@@ -37,7 +37,7 @@
         "url": "https://github.com/binary-com/deriv-app/issues"
     },
     "dependencies": {
-        "@deriv-com/ui": "1.35.0",
+        "@deriv-com/ui": "1.35.2",
         "@deriv-com/analytics": "1.14.0",
         "@deriv/api": "^1.0.0",
         "@deriv/api-types": "1.0.172",

packages/cfd/package.json

@@ -85,7 +85,7 @@
         "webpack-node-externals": "^2.5.2"
     },
     "dependencies": {
-        "@deriv-com/ui": "1.35.0",
+        "@deriv-com/ui": "1.35.2",
         "@deriv-com/analytics": "1.14.0",
         "@deriv-com/translations": "1.3.9",
         "@deriv-com/utils": "^0.0.34",

packages/components/package.json

@@ -74,7 +74,7 @@
     "dependencies": {
         "@cloudflare/stream-react": "^1.9.1",
         "@contentpass/zxcvbn": "^4.4.3",
-        "@deriv-com/ui": "1.35.0",
+        "@deriv-com/ui": "1.35.2",
         "@deriv/hooks": "^1.0.0",
         "@deriv/shared": "^1.0.0",
         "@deriv/stores": "^1.0.0",

packages/core/package.json

@@ -100,8 +100,8 @@
         "@deriv-com/quill-tokens": "^2.0.4",
         "@deriv-com/quill-ui": "1.16.18",
         "@deriv-com/translations": "1.3.9",
-        "@deriv-com/ui": "1.35.0",
         "@deriv-com/utils": "^0.0.34",
+        "@deriv-com/ui": "1.35.2",
         "@deriv/account": "^1.0.0",
         "@deriv/api": "^1.0.0",
         "@deriv/appstore": "^0.0.4",

packages/p2p/package.json

@@ -32,7 +32,7 @@
     "author": "",
     "license": "ISC",
     "dependencies": {
-        "@deriv-com/ui": "1.35.0",
+        "@deriv-com/ui": "1.35.2",
         "@deriv-com/analytics": "1.14.0",
         "@deriv-com/utils": "^0.0.34",
         "@deriv/api": "^1.0.0",

packages/reports/package.json

@@ -77,7 +77,7 @@
         "webpack-node-externals": "^2.5.2"
     },
     "dependencies": {
-        "@deriv-com/ui": "1.35.0",
+        "@deriv-com/ui": "1.35.2",
         "@deriv-com/analytics": "1.14.0",
         "@deriv/components": "^1.0.0",
         "@deriv/deriv-api": "^1.0.15",

packages/trader/package.json

@@ -92,7 +92,7 @@
         "@deriv-com/quill-tokens": "^2.0.4",
         "@deriv-com/quill-ui": "1.16.18",
         "@deriv-com/utils": "^0.0.34",
-        "@deriv-com/ui": "1.35.0",
+        "@deriv-com/ui": "1.35.2",
         "@deriv/api-types": "1.0.172",
         "@deriv/components": "^1.0.0",
         "@deriv/deriv-api": "^1.0.15",

packages/wallets/package.json

@@ -16,8 +16,8 @@
     "dependencies": {
         "@deriv-com/analytics": "1.14.0",
         "@deriv-com/translations": "1.3.9",
-        "@deriv-com/ui": "1.35.0",
         "@deriv-com/utils": "^0.0.34",
+        "@deriv-com/ui": "1.35.2",
         "@deriv/api-v2": "^1.0.0",
         "@deriv/quill-icons": "1.23.3",
         "@deriv/utils": "^1.0.0",

packages/wallets/src/features/cfd/components/ClientVerificationBadge/ClientVerificationStatusBadge.scss

@@ -0,0 +1,7 @@
+.wallets-client-verification-badge {
+    &__content {
+        &--underlined {
+            text-decoration: underline;
+        }
+    }
+}

packages/wallets/src/features/cfd/components/ClientVerificationBadge/ClientVerificationStatusBadge.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import classNames from 'classnames';
+import {
+    LabelPairedCircleCheckCaptionBoldIcon,
+    LabelPairedCircleExclamationCaptionBoldIcon,
+    LabelPairedClockThreeCaptionBoldIcon,
+    LabelPairedTriangleExclamationCaptionBoldIcon,
+} from '@deriv/quill-icons';
+import { useTranslations } from '@deriv-com/translations';
+import { Badge, Text, useDevice } from '@deriv-com/ui';
+import { TTranslations } from '../../../../types';
+import './ClientVerificationStatusBadge.scss';
+
+type TBadgeColor = React.ComponentProps<typeof Badge>['color'];
+
+const getBadgeVariations = (localize: TTranslations['localize']) => {
+    return {
+        failed: {
+            color: 'danger-secondary',
+            content: localize('Failed'),
+            icon: <LabelPairedTriangleExclamationCaptionBoldIcon fill='#C40000' />,
+        },
+        in_review: {
+            color: 'warning-secondary',
+            content: localize('In review'),
+            icon: <LabelPairedClockThreeCaptionBoldIcon fill='#C47D00' />,
+        },
+        needs_verification: {
+            color: 'blue-secondary',
+            content: localize('Needs verification'),
+            icon: <LabelPairedCircleExclamationCaptionBoldIcon fill='#0777C4' />,
+        },
+        verified: {
+            color: 'success-secondary',
+            content: localize('Verified'),
+            icon: <LabelPairedCircleCheckCaptionBoldIcon fill='#007A22' />,
+        },
+    };
+};
+
+type TClientVerificationBadgeProps = {
+    onClick?: VoidFunction;
+    variant: keyof ReturnType<typeof getBadgeVariations>;
+};
+
+const ClientVerificationStatusBadge: React.FC<TClientVerificationBadgeProps> = ({ onClick, variant }) => {
+    const { localize } = useTranslations();
+    const { isDesktop } = useDevice();
+    const { color, content, icon } = getBadgeVariations(localize)[variant];
+    return (
+        <Badge
+            badgeSize='sm'
+            className='wallets-client-verification-badge'
+            color={color as TBadgeColor}
+            leftIcon={icon}
+            onClick={onClick}
+        >
+            <Text
+                className={classNames('wallets-client-verification-badge__content', {
+                    'wallets-client-verification-badge__content--underlined': !!onClick,
+                })}
+                size={isDesktop ? 'xs' : 'sm'}
+                weight='bold'
+            >
+                {content}
+            </Text>
+        </Badge>
+    );
+};
+
+export default ClientVerificationStatusBadge;

packages/wallets/src/features/cfd/components/ClientVerificationBadge/index.ts

@@ -0,0 +1 @@
+export { default as ClientVerificationStatusBadge } from './ClientVerificationStatusBadge';

packages/wallets/src/features/cfd/components/PlatformStatusBadge/PlatformStatusBadge.tsx

@@ -11,7 +11,7 @@ type TProps = {
     badgeSize: ComponentProps<typeof Badge>['badgeSize'];
     cashierAccount?: TAccount;
     className?: ComponentProps<typeof Badge>['className'];
-    mt5Account?: THooks.MT5AccountsList;
+    mt5Account?: THooks.SortedMT5Accounts;
 };
 
 const PlatformStatusBadge: React.FC<TProps> = ({ badgeSize, cashierAccount, className, mt5Account }) => {

packages/wallets/src/features/cfd/components/index.ts

@@ -1,4 +1,5 @@
 export * from './CFDPlatformsListAccounts';
+export * from './ClientVerificationBadge';
 export * from './CompareAccountsCarousel';
 export * from './ModalTradeWrapper';
 export * from './PlatformStatusBadge';

packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx

@@ -26,7 +26,7 @@ import { MT5TradeModal, TradingPlatformStatusModal, VerificationFailedModal } fr
 import './AddedMT5AccountsList.scss';
 
 type TProps = {
-    account: THooks.MT5AccountsList;
+    account: THooks.SortedMT5Accounts;
 };
 
 const AddedMT5AccountsList: React.FC<TProps> = ({ account }) => {