[DTRA] henry/dtra-1237/fix: dtrader-v2 setup

packages/core/src/App/Containers/Layout/header/dtrader-v2-header.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { observer, useStore } from '@deriv/stores';
+import { getCurrencyDisplayCode } from '@deriv/shared';
+import AccountInfoIcon from 'App/Components/Layout/Header/account-info-icon';
+
+const DTraderV2Header = observer(() => {
+    const { client } = useStore();
+    const { balance, currency, is_virtual, loginid } = client;
+
+    const currency_lower = currency?.toLowerCase();
+
+    return (
+        <header className='header header-v2'>
+            <React.Suspense fallback={<div />}>
+                <div className='header-v2__acc-info'>
+                    <div className='header-v2__acc-info--top'>
+                        <span className='header-v2__acc-info--logo'>
+                            {(is_virtual || currency) && (
+                                <AccountInfoIcon is_virtual={is_virtual} currency={currency_lower} />
+                            )}
+                        </span>
+
+                        {loginid}
+                    </div>
+                    <div className='header-v2__acc-info--bottom'>
+                        <span>{`${balance} ${getCurrencyDisplayCode(currency)}`}</span>
+                    </div>
+                </div>
+            </React.Suspense>
+        </header>
+    );
+});
+
+export default DTraderV2Header;

packages/core/src/App/Containers/Layout/header/header.tsx

@@ -4,6 +4,7 @@ import { useFeatureFlags, useStoreWalletAccountsList } from '@deriv/hooks';
 import { makeLazyLoader, moduleLoader, routes } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { useReadLocalStorage } from 'usehooks-ts';
+import { useDevice } from '@deriv/components';
 
 const HeaderFallback = () => <div className='header' />;
 
@@ -38,10 +39,16 @@ const TradersHubHeaderWallets = makeLazyLoader(
     () => <HeaderFallback />
 )();
 
+const DTraderV2Header = makeLazyLoader(
+    () => moduleLoader(() => import(/* webpackChunkName: "dtrader-v2-header" */ './dtrader-v2-header')),
+    () => <HeaderFallback />
+)();
+
 const Header = observer(() => {
     const { client } = useStore();
     const { accounts, is_logged_in, setAccounts, loginid, switchAccount } = client;
     const { pathname } = useLocation();
+    const { is_mobile } = useDevice();
 
     const is_wallets_cashier_route = pathname.includes(routes.wallets_cashier);
 
@@ -60,7 +67,7 @@ const Header = observer(() => {
         is_wallets_cashier_route;
 
     const client_accounts = useReadLocalStorage('client.accounts');
-    const { is_next_wallet_enabled } = useFeatureFlags();
+    const { is_next_wallet_enabled, is_dtrader_v2_enabled } = useFeatureFlags();
     const { has_wallet } = useStoreWalletAccountsList();
     const should_show_wallets = is_next_wallet_enabled && has_wallet;
 
@@ -82,6 +89,8 @@ const Header = observer(() => {
             result = should_show_wallets ? <TradersHubHeaderWallets /> : <TradersHubHeader />;
         } else if (pathname === routes.onboarding) {
             result = null;
+        } else if (pathname === routes.trade && is_dtrader_v2_enabled && is_mobile) {
+            result = <DTraderV2Header />;
         } else {
             result = should_show_wallets ? <DTraderHeaderWallets /> : <DTraderHeader />;
         }

packages/core/src/sass/app/_common/layout/header.scss

@@ -382,3 +382,43 @@
         }
     }
 }
+
+.header-v2 {
+    display: flex;
+    justify-content: center;
+
+    &__acc-info {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        &--top {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.4rem;
+        }
+
+        &--logo {
+            height: 16px;
+            width: 16px;
+
+            svg {
+                width: 1.6rem;
+                height: 1.6rem;
+            }
+        }
+
+        &--bottom {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.2rem;
+
+            span {
+                font-weight: bold;
+            }
+        }
+    }
+}

packages/trader/build/constants.js

@@ -33,6 +33,7 @@ const {
 const ALIASES = {
     _common: path.resolve(__dirname, '../src/_common'),
     App: path.resolve(__dirname, '../src/App'),
+    AppV2: path.resolve(__dirname, '../src/AppV2'),
     Assets: path.resolve(__dirname, '../src/Assets'),
     Constants: path.resolve(__dirname, '../src/Constants'),
     Fonts: path.resolve(__dirname, '../src/public/fonts'),

packages/trader/jest.config.js

@@ -7,6 +7,7 @@ module.exports = {
         '^.+\\.svg$': '<rootDir>/../../__mocks__/styleMock.js',
         '^_common/(.*)$': '<rootDir>/src/_common/$1',
         '^App/(.*)$': '<rootDir>/src/App/$1',
+        '^AppV2/(.*)$': '<rootDir>/src/AppV2/$1',
         '^Assets/(.*)$': '<rootDir>/src/Assets/$1',
         '^Constants/(.*)$': '<rootDir>/src/Constants/$1',
         '^Constants$': '<rootDir>/src/Constants/index.js',

packages/trader/package.json

@@ -89,6 +89,7 @@
         "@cloudflare/stream-react": "^1.9.1",
         "@deriv-com/analytics": "1.4.13",
         "@deriv-com/utils": "^0.0.20",
+        "@deriv-com/quill-ui": "^1.9.17",
         "@deriv/api-types": "^1.0.172",
         "@deriv/components": "^1.0.0",
         "@deriv/deriv-api": "^1.0.15",
@@ -98,6 +99,7 @@
         "@deriv/shared": "^1.0.0",
         "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",
+        "@deriv/quill-icons": "^1.22.4",
         "@types/react-loadable": "^5.5.6",
         "classnames": "^2.2.6",
         "extend": "^3.0.2",

packages/trader/src/AppV2/Components/BottomNav/BottomNav.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Localize } from '@deriv/translations';
+import {
+    LegacyMarketBasketIndicesIcon,
+    LegacyMenuHamburger1pxIcon,
+    StandaloneChartCandlestickRegularIcon,
+    StandaloneClockThreeRegularIcon,
+} from '@deriv/quill-icons';
+import BottomNavItem from './BottomNavItem';
+import { Badge } from '@deriv-com/quill-ui';
+
+type BottomNavProps = {
+    className?: string;
+    children: React.ReactNode[];
+};
+
+const BottomNavItems = [
+    {
+        icon: <StandaloneChartCandlestickRegularIcon iconSize='sm' />,
+        label: <Localize i18n_default_text='Trade' />,
+    },
+    {
+        icon: <LegacyMarketBasketIndicesIcon iconSize='sm' />,
+        label: <Localize i18n_default_text='Markets' />,
+    },
+    {
+        icon: (
+            <Badge variant='notification' position='top-right' label='10' color='danger' size='sm' contentSize='sm'>
+                <StandaloneClockThreeRegularIcon iconSize='sm' />
+            </Badge>
+        ),
+        label: <Localize i18n_default_text='Positions' />,
+    },
+    {
+        icon: <LegacyMenuHamburger1pxIcon iconSize='sm' />,
+        label: <Localize i18n_default_text='Menu' />,
+    },
+];
+
+const BottomNav = ({ className, children }: BottomNavProps) => {
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    return (
+        <div className={className}>
+            <div className='bottom-nav-container'>
+                {BottomNavItems.map((item, index) => (
+                    <BottomNavItem
+                        key={index}
+                        index={index}
+                        icon={item.icon}
+                        selectedIndex={selectedIndex}
+                        label={item.label}
+                        setSelectedIndex={setSelectedIndex}
+                    />
+                ))}
+            </div>
+            {children[selectedIndex]}
+        </div>
+    );
+};
+
+export default BottomNav;

packages/trader/src/AppV2/Components/BottomNav/BottomNavItem.tsx

@@ -0,0 +1,29 @@
+import { CaptionText } from '@deriv-com/quill-ui';
+import classNames from 'classnames';
+import React from 'react';
+
+type BottomNavItemProps = {
+    icon: React.ReactNode;
+    selectedIndex: number;
+    label: React.ReactNode;
+    setSelectedIndex: (index: number) => void;
+    index: number;
+};
+
+const BottomNavItem = ({ icon, selectedIndex, label, index, setSelectedIndex }: BottomNavItemProps) => {
+    const isActive = index === selectedIndex;
+    return (
+        <button
+            className={classNames('bottom-nav-item', isActive ? 'bottom-nav-item--active' : '')}
+            onClick={() => setSelectedIndex(index)}
+        >
+            <span>{icon}</span>
+            {/* //waiting on quill-tokens */}
+            <CaptionText size='sm' color='var(--core-color-opacity-black-600)'>
+                {label}
+            </CaptionText>
+        </button>
+    );
+};
+
+export default BottomNavItem;

packages/trader/src/AppV2/Components/BottomNav/bottomNav.scss

@@ -0,0 +1,33 @@
+.bottom-nav {
+    &-container {
+        display: flex;
+        padding: 8px;
+        align-items: flex-start;
+        gap: 10px;
+        align-self: stretch;
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+        border-top: 1px solid var(--core-color-opacity-black-100); // waiting on quill tokens in deriv-app
+    }
+    &-items {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1 0 0;
+    }
+    &-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1 0 0;
+
+        &--active {
+            color: var(--core-color-opacity-coral-600);
+
+            svg {
+                fill: var(--core-color-opacity-coral-600);
+            }
+        }
+    }
+}

packages/trader/src/AppV2/Components/BottomNav/index.ts

@@ -0,0 +1,4 @@
+import BottomNav from './BottomNav';
+import './bottomNav.scss';
+
+export default BottomNav;

packages/trader/src/AppV2/Containers/Markets/index.ts

@@ -0,0 +1,4 @@
+import Markets from './markets';
+import './markets.scss';
+
+export default Markets;

packages/trader/src/AppV2/Containers/Markets/markets.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Markets = () => {
+    return <div>Markets</div>;
+};
+
+export default Markets;

packages/trader/src/AppV2/Containers/Menu/index.ts

@@ -0,0 +1,4 @@
+import Menu from './menu';
+import './menu.scss';
+
+export default Menu;

packages/trader/src/AppV2/Containers/Menu/menu.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Menu = () => {
+    return <div>Menu</div>;
+};
+
+export default Menu;

packages/trader/src/AppV2/Containers/Positions/index.ts

@@ -0,0 +1,4 @@
+import Positions from './positions';
+import './positions.scss';
+
+export default Positions;

packages/trader/src/AppV2/Containers/Positions/positions.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Positions = () => {
+    return <div>Positions</div>;
+};
+
+export default Positions;

packages/trader/src/AppV2/Containers/Trade/index.ts

@@ -0,0 +1,4 @@
+import Trade from './trade';
+import './trade.scss';
+
+export default Trade;

packages/trader/src/AppV2/Containers/Trade/trade.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Trade = () => {
+    return <div>Trade</div>;
+};
+
+export default Trade;

packages/trader/src/AppV2/app.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { TWebSocket } from 'Types';
+import initStore from 'App/init-store';
+import 'Sass/app.scss';
+import type { TCoreStores } from '@deriv/stores/types';
+import TraderProviders from '../trader-providers';
+import BottomNav from './Components/BottomNav';
+import Trade from './Containers/Trade';
+import Markets from './Containers/Markets';
+import Positions from './Containers/Positions';
+import Menu from './Containers/Menu';
+
+type Apptypes = {
+    passthrough: {
+        root_store: TCoreStores;
+        WS: TWebSocket;
+    };
+};
+
+const App = ({ passthrough }: Apptypes) => {
+    const root_store = initStore(passthrough.root_store, passthrough.WS);
+    React.useEffect(() => {
+        return () => root_store.ui.setPromptHandler(false);
+    }, [root_store]);
+
+    return (
+        <TraderProviders store={root_store}>
+            <BottomNav>
+                <Trade />
+                <Markets />
+                <Positions />
+                <Menu />
+            </BottomNav>
+        </TraderProviders>
+    );
+};
+
+export default App;

packages/trader/src/AppV2/index.tsx

@@ -0,0 +1,3 @@
+import App from './app';
+
+export default App;

packages/trader/src/index.tsx

@@ -3,7 +3,16 @@ import { makeLazyLoader, moduleLoader } from '@deriv/shared';
 import { Loading } from '@deriv/components';
 
 const App = makeLazyLoader(
-    () => moduleLoader(() => import(/* webpackChunkName: "trader-app", webpackPreload: true */ './App/index')),
+    () =>
+        moduleLoader(() => {
+            const is_dtrader_v2 = JSON.parse(localStorage.getItem('FeatureFlagsStore') ?? '').data.dtrader_v2;
+            const is_mobile = window.innerWidth < 600;
+
+            if (is_dtrader_v2 && is_mobile) {
+                return import(/* webpackChunkName: "trader-app-v2", webpackPreload: true */ './AppV2/index');
+            }
+            return import(/* webpackChunkName: "trader-app", webpackPreload: true */ './App/index');
+        }),
     () => <Loading />
 )();