farrah/fix: buy/sell and order page issues

package.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.0",
         "@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"
     }
-}
+}

src/components/AppHeader/AccountSwitcher/index.tsx

@@ -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 })));
+
 export 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/components/AppHeader/CurrencyIcon/CurrencyIcon.tsx

@@ -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/components/AppHeader/CurrencyIcon/index.ts

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

src/components/BlockedScenarios/BlockedScenarios.tsx

@@ -58,13 +58,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/components/BlockedScenarios/__tests__/BlockedScenarios.spec.tsx

@@ -30,7 +30,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');

src/components/BuySellForm/BuySellForm.scss

@@ -7,6 +7,10 @@
         width: 100vw;
         height: 100vh;
         box-shadow: none;
+
+        &__footer {
+            border-top: 2px solid #f2f3f4;
+        }
     }
 
     & .deriv-modal__body {
@@ -15,10 +19,12 @@
 
     &--is-buy {
         height: 64.9rem;
+
         & .deriv-modal__body {
             max-height: calc(100vh - 13rem);
             overflow: auto;
         }
+
         @include mobile-or-tablet-screen {
             height: unset;
             max-height: unset;
@@ -31,10 +37,6 @@
         left: 0;
         z-index: 1;
 
-        & .mobile-wrapper__body {
-            overflow: overlay;
-        }
-
         &--is-buy {
             top: -4rem;
         }