Merge pull request #208 from farrah-deriv/FEQ-1305/fix-issues

farrah/fix: buy/sell and order page issues

Author: farrah-deriv

package-lock.json

@@ -17,11 +17,11 @@
         "@babel/preset-env": "^7.24.5",
         "@chakra-ui/react": "^2.8.2",
         "@deriv-com/analytics": "^1.10.1",
-        "@deriv-com/api-hooks": "^1.3.7",
+        "@deriv-com/api-hooks": "^1.4.5",
         "@deriv-com/translations": "^1.2.4",
         "@deriv-com/ui": "^1.29.0",
         "@deriv-com/utils": "^0.0.28",
-        "@deriv/quill-icons": "^1.22.10",
+        "@deriv/quill-icons": "^1.23.5",
         "@sendbird/chat": "^4.11.3",
         "@svgr/rollup": "^8.1.0",
         "@tanstack/react-query": "^5.28.14",
@@ -108,4 +108,4 @@
         "vite-plugin-html-config": "^1.0.11",
         "vite-plugin-sass": "^0.1.0"
     }
-}
+}

package.json

@@ -1,5 +1,5 @@
+import { lazy } from 'react';
 import { useActiveAccount } from '@/hooks/api/account';
-import { CurrencyUsdIcon } from '@deriv/quill-icons';
 import { AccountSwitcher as UIAccountSwitcher } from '@deriv-com/ui';
 import { FormatUtils } from '@deriv-com/utils';
 
@@ -8,12 +8,14 @@ type TAccountSwitcherProps = {
     account: TActiveAccount;
 };
 
+const CurrencyIcon = lazy(() => import('../CurrencyIcon').then(module => ({ default: module.CurrencyIcon })));
+
 const AccountSwitcher = ({ account }: TAccountSwitcherProps) => {
     const activeAccount = {
         balance: FormatUtils.formatMoney(account?.balance ?? 0),
         currency: account?.currency || 'USD',
         currencyLabel: account?.currency || 'US Dollar',
-        icon: <CurrencyUsdIcon iconSize='sm' />,
+        icon: <CurrencyIcon currency={account?.currency} isVirtual={Boolean(account?.is_virtual)} />,
         isActive: true,
         isVirtual: Boolean(account?.is_virtual),
         loginid: account?.loginid || '',

src/assets/find-ad.svg

@@ -0,0 +1,28 @@
+import { ReactElement, Suspense, useEffect, useState } from 'react';
+
+type CurrencyIconProps = {
+    currency: string;
+    isVirtual: boolean;
+};
+
+const CurrencyIcon = ({ currency, isVirtual }: CurrencyIconProps) => {
+    const [currencyIconComponent, setCurrencyIconComponent] = useState<ReactElement | null>(null);
+
+    useEffect(() => {
+        const currencyName = currency.charAt(0).toUpperCase() + currency.slice(1).toLowerCase();
+        const currencyIconName = isVirtual ? 'CurrencyDemoIcon' : `Currency${currencyName}Icon`;
+        const getIconComponent = async () => {
+            const module = await import('@deriv/quill-icons');
+            /* eslint-disable  @typescript-eslint/no-explicit-any */
+            const IconComponent = (module as any)[currencyIconName];
+
+            setCurrencyIconComponent(<IconComponent iconSize='sm' />);
+        };
+
+        getIconComponent();
+    }, []);
+
+    return <Suspense fallback={<div />}>{currencyIconComponent}</Suspense>;
+};
+
+export default CurrencyIcon;

src/assets/pay-user.svg

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

src/assets/receive-payment.svg

@@ -4,7 +4,7 @@ import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
 import { useActiveAccount } from '@/hooks/api/account';
 import { useAuthData } from '@deriv-com/api-hooks';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import AppHeader from '../AppHeader';
 
@@ -116,6 +116,7 @@ describe('<AppHeader/>', () => {
         mockUseAuthData.mockReturnValue({ activeLoginid: '12345', logout: jest.fn() });
         mockUseActiveAccountValues.data = {
             currency: 'USD',
+            is_virtual: 0,
         } as ReturnType<typeof useActiveAccount>['data'];
 
         Object.defineProperty(window, 'matchMedia', {
@@ -139,9 +140,9 @@ describe('<AppHeader/>', () => {
                 </QueryParamProvider>
             </BrowserRouter>
         );
-        const logoutButton = screen.getByRole('button', { name: 'Logout' });
+        const logoutButton = await screen.findByRole('button', { name: 'Logout' });
         const { logout } = mockUseAuthData();
-        expect(logoutButton).toBeInTheDocument();
+        await waitFor(() => expect(logoutButton).toBeInTheDocument());
 
         await userEvent.click(logoutButton);
         expect(logout).toHaveBeenCalled();

src/assets/received-fund.svg

@@ -61,13 +61,13 @@ const BlockedScenarios = ({ type }: { type: string }) => {
             ),
             description: (
                 <Text align='center'>
-                    <Localize i18n_default_text='Please switch to your USD account to access the Deriv P2P marketplace.' />
+                    <Localize i18n_default_text='To use Deriv P2P, switch to your real USD account.' />
                 </Text>
             ),
             icon: <P2pUnavailable />,
             title: (
                 <Text weight='bold'>
-                    <Localize i18n_default_text='Crypto is not supported for Deriv P2P!' />
+                    <Localize i18n_default_text='Cryptocurrencies not supported' />
                 </Text>
             ),
         },

src/assets/release-fund.svg

@@ -33,7 +33,7 @@ describe('BlockedScenarios', () => {
 
     it('should render the correct message for crypto account', async () => {
         render(<BlockedScenarios type='crypto' />);
-        expect(screen.getByText('Crypto is not supported for Deriv P2P!')).toBeInTheDocument();
+        expect(screen.getByText('Cryptocurrencies not supported')).toBeInTheDocument();
         const button = screen.getByRole('button', { name: 'Switch to real USD account' });
         await userEvent.click(button);
         expect(window.open).toHaveBeenCalledWith('https://app.deriv.com', '_blank');