Merge pull request #29 from thisyahlen-deriv/thisyahlen/tradershub_pa…

…ge_base_layout

Thisyahlen/chore: add some hooks and base tradershub title for the homepage

package.json

@@ -13,7 +13,7 @@
         "prepare": "husky install"
     },
     "dependencies": {
-        "@deriv-com/api-hooks": "^0.0.4",
+        "@deriv-com/api-hooks": "^0.0.8",
         "@deriv-com/ui": "latest",
         "@deriv-com/utils": "latest",
         "@deriv/quill-icons": "latest",

src/components/AppContainer/AppContainer.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+type TAppContainerProps = {
+    children: ReactNode;
+    className?: string;
+};
+
+/**
+ *  `AppContainer` is a component that wraps the entire application with some base styles.
+ * @param {React.ReactNode} children - The children to be rendered within the `AppContainer`.
+ * @returns {React.ElementType} The `AppContainer` component.
+ */
+
+export const AppContainer = ({ children, className }: TAppContainerProps) => (
+    <div className={twMerge('font-sans max-w-[600px] lg:max-w-[1280px] mx-auto', className)}>{children}</div>
+);

src/components/AppContainer/index.ts

@@ -0,0 +1 @@
+export { AppContainer } from './AppContainer';

src/components/TradersHubHeader/TradersHubHeader.tsx

@@ -0,0 +1,9 @@
+import { Text } from '@deriv-com/ui';
+
+export const TradersHubHeader = () => {
+    return (
+        <div className='flex flex-col gap-4 lg:flex-row w-1/2 lg:w-auto'>
+            <Text weight='bold'>Trader&apos;s Hub</Text>
+        </div>
+    );
+};

src/components/TradersHubHeader/index.ts

@@ -0,0 +1 @@
+export { TradersHubHeader } from './TradersHubHeader';

src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './AppContainer';
+export * from './TradersHubHeader';

src/hooks/__tests__/useQueryParams.spec.ts

@@ -2,7 +2,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 
 import { renderHook, waitFor } from '@testing-library/react';
 
-import useQueryParams from '../useQueryParams';
+import { useQueryParams } from '../useQueryParams';
 
 jest.mock('react-router-dom', () => ({
     ...jest.requireActual('react-router-dom'),

src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useDerivTradingAccountsList } from './useDerivTradingAccountsList';
+export { useActiveDerivTradingAccount } from './useActiveDerivTradingAccount';
+export { useQueryParams } from './useQueryParams';

src/hooks/useActiveDerivTradingAccount.ts

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+
+import { useDerivTradingAccountsList } from './useDerivTradingAccountsList';
+
+/**
+ * Custom hook to get the active trading account
+ * @returns {Object} activeTradingAccount - The active trading account
+ * @returns {Object} rest - The rest of the props from useDerivTradingAccountsList
+ *
+ */
+export const useActiveDerivTradingAccount = () => {
+    const { data, ...rest } = useDerivTradingAccountsList();
+
+    const activeTradingAccount = useMemo(() => {
+        return data?.find(trading => trading.isActive);
+    }, [data]);
+
+    return { data: activeTradingAccount, ...rest };
+};

src/hooks/useDerivTradingAccountsList.ts

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+
+import { useAccountList, useAppData } from '@deriv-com/api-hooks';
+
+/**
+ * Custom hook to get a list of trading accounts
+ * @returns {Object} tradingAccounts - List of trading accounts
+ * @returns {Object} rest - The rest of the props from useAccountList
+ */
+export const useDerivTradingAccountsList = () => {
+    const { data, ...rest } = useAccountList();
+    const { activeLoginid } = useAppData();
+
+    const modifiedAccounts = useMemo(() => {
+        return data?.map(account => {
+            return {
+                ...account,
+                isActive: account.loginid === activeLoginid,
+            };
+        });
+    }, [data, activeLoginid]);
+
+    return { data: modifiedAccounts, ...rest };
+};

src/hooks/useQueryParams.ts

@@ -33,7 +33,7 @@ type ModalId =
  * openModal('GetADerivAccountDialog');
  * closeModal();
  */
-const useQueryParams = () => {
+export const useQueryParams = () => {
     const { search } = useLocation();
     const navigate = useNavigate();
 
@@ -76,5 +76,3 @@ const useQueryParams = () => {
         queryParams,
     };
 };
-
-export default useQueryParams;

src/pages/homepage/homepage.tsx

@@ -1,18 +1,9 @@
-import { Link } from 'react-router-dom';
+import { AppContainer, TradersHubHeader } from '../../components';
 
-import derivLogo from '../../static/deriv-logo.svg';
-
-export function Homepage() {
+export const Homepage = () => {
     return (
-        <div className='flex flex-col items-center justify-center gap-10'>
-            <a href='https://deriv.com' target='_blank' rel='noreferrer'>
-                <img src={derivLogo} className='h-[100px] w-[100px]' alt='Deriv logo' />
-            </a>
-            <h1 className='text-5xl font-bold'>Deriv V2</h1>
-            <Link to='signup'>Click me 💅</Link>
-            <p>
-                Edit <code>src/App.tsx</code> and save to test HMR
-            </p>
-        </div>
+        <AppContainer>
+            <TradersHubHeader />
+        </AppContainer>
     );
-}
+};