[TRAH/WIP] Aizad/traders hub package pt.2

.github/workflows/test.yml

@@ -31,8 +31,12 @@ jobs:
       run: npx tsc --project packages/stores/tsconfig.json -noEmit
     - name: Check TypeScript for @deriv/wallets
       run: npx tsc --project packages/wallets/tsconfig.json -noEmit
+    - name: Check TypeScript for @deriv/tradershub
+      run: npx tsc --project packages/tradershub/tsconfig.json -noEmit
     - name: Check ESLint for @deriv/wallets
       run: npx eslint --fix --ignore-path packages/wallets/.eslintignore --config packages/wallets/.eslintrc.js packages/wallets
+    - name: Check ESLint for @deriv/tradershub
+      run: npx eslint --fix --ignore-path packages/tradershub/.eslintignore --config packages/tradershub/.eslintrc.js packages/tradershub
     - name: Check Stylelint for @deriv/wallets
       run: npx stylelint packages/wallets/**/*.scss
     - name: Check tests for @deriv/hooks

packages/core/build/config.js

@@ -95,6 +95,10 @@ const copyConfig = base => {
             from: path.resolve(__dirname, '../node_modules/@deriv/wallets/dist/wallets'),
             to: 'wallets',
         },
+        {
+            from: path.resolve(__dirname, '../node_modules/@deriv/tradershub/dist/tradershub'),
+            to: 'tradershub',
+        },
         { from: path.resolve(__dirname, '../scripts/CNAME'), to: 'CNAME', toType: 'file', noErrorOnMissing: true },
         {
             from: path.resolve(__dirname, '../src/public/.well-known/apple-app-site-association'),

packages/core/package.json

@@ -93,6 +93,7 @@
         "@deriv/api": "^1.0.0",
         "@deriv/appstore": "^0.0.4",
         "@deriv/wallets": "^1.0.0",
+        "@deriv/tradershub": "^1.0.0",
         "@deriv/bot-web-ui": "^1.0.0",
         "@deriv/cashier": "^1.0.0",
         "@deriv/cfd": "^1.0.0",

packages/core/src/App/Constants/routes-config.js

@@ -64,6 +64,13 @@ const Wallets = React.lazy(() =>
     })
 );
 
+const TradersHub = React.lazy(() =>
+    moduleLoader(() => {
+        // eslint-disable-next-line import/no-unresolved
+        return import(/* webpackChunkName: "tradershub" */ '@deriv/tradershub');
+    })
+);
+
 const P2P = React.lazy(() =>
     moduleLoader(() => {
         // eslint-disable-next-line import/no-unresolved
@@ -254,6 +261,12 @@ const getModules = () => {
             is_authenticated: true,
             getTitle: () => localize('Wallets'),
         },
+        {
+            path: routes.traders_hub_v2,
+            component: TradersHub,
+            is_authenticated: true,
+            getTitle: () => localize('Trader’s Hub V2'),
+        },
         {
             path: routes.onboarding,
             component: AppStore,

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

@@ -16,6 +16,7 @@ const Header = observer(() => {
     const traders_hub_routes =
         [
             routes.traders_hub,
+            routes.traders_hub_v2,
             routes.account,
             routes.cashier,
             routes.wallets,

packages/core/src/App/Containers/Layout/header/traders-hub-home-button.tsx

@@ -13,7 +13,17 @@ const TradersHubHomeButton = observer(() => {
     const history = useHistory();
     const location = useLocation();
     const { pathname } = location;
-    const { is_next_wallet_enabled } = useFeatureFlags();
+    const { is_next_wallet_enabled, is_next_tradershub_enabled } = useFeatureFlags();
+
+    const redirect_routes = () => {
+        if (is_next_wallet_enabled) {
+            return routes.wallets;
+        } else if (is_next_tradershub_enabled) {
+            return routes.traders_hub_v2;
+        }
+
+        return routes.traders_hub;
+    };
 
     return (
         <div
@@ -22,7 +32,7 @@ const TradersHubHomeButton = observer(() => {
                 'traders-hub-header__tradershub--active':
                     pathname === routes.traders_hub || pathname === routes.wallets,
             })}
-            onClick={() => history.push(is_next_wallet_enabled ? routes.wallets : routes.traders_hub)}
+            onClick={() => history.push(redirect_routes())}
         >
             <div className='traders-hub-header__tradershub--home-logo'>
                 <Icon

packages/shared/src/utils/routes/routes.ts

@@ -78,4 +78,7 @@ export const routes = {
     wallets: '/wallets',
     wallets_withdrawal: '/wallets/cashier/withdraw',
     wallets_compare_accounts: '/wallets/compare-accounts',
+
+    // Traders Hub
+    traders_hub_v2: '/traders-hub',
 };

packages/stores/src/stores/FeatureFlagsStore.ts

@@ -4,6 +4,7 @@ const FLAGS = {
     wallet: false,
     next_wallet: false,
     sharkfin: false,
+    next_tradershub: false,
 } satisfies Record<string, boolean>;
 
 export default class FeatureFlagsStore extends BaseStore<{ [k in keyof typeof FLAGS]: boolean }> {

packages/tradershub/.eslintignore

@@ -0,0 +1,2 @@
+dist/*.js
+webpack.config.js

packages/tradershub/.eslintrc.js

@@ -0,0 +1,67 @@
+module.exports = {
+    env: { es6: true },
+    extends: ['../../.eslintrc.js', 'eslint:recommended', 'plugin:react/recommended'],
+    overrides: [
+        {
+            files: ['*.ts', '*.mts', '*.cts', '*.tsx'],
+            rules: {
+                'no-undef': 'off',
+            },
+        },
+    ],
+    parserOptions: { sourceType: 'module' },
+    plugins: ['eslint-plugin-local-rules', 'simple-import-sort', 'sort-destructure-keys', 'typescript-sort-keys'],
+    root: true,
+    rules: {
+        '@typescript-eslint/array-type': 'error',
+        '@typescript-eslint/no-explicit-any': 'error',
+        '@typescript-eslint/no-unused-vars': 'error',
+        '@typescript-eslint/sort-type-constituents': 'error',
+        camelcase: 'error',
+        'import/first': 'error',
+        'import/newline-after-import': 'error',
+        'import/no-duplicates': 'error',
+        'import/no-extraneous-dependencies': ['off', { devDependencies: ['**/*.spec.*', '**/*.test.*', '**/*.d.ts*'] }],
+        'lines-around-comment': ['error', { allowObjectStart: true }],
+        'local-rules/no-react-namespace': 'error',
+        'no-unneeded-ternary': 'error',
+        'no-useless-return': 'error',
+        'object-shorthand': 'error',
+        'prefer-const': 'error',
+        'react/jsx-pascal-case': 'error',
+        'react/jsx-sort-props': 'error',
+        'simple-import-sort/exports': 'error',
+        'simple-import-sort/imports': [
+            'error',
+            {
+                groups: [
+                    [
+                        'public-path',
+                        // `react` first, then packages starting with a character
+                        '^react$',
+                        '^[a-z]',
+                        // Packages starting with `@`
+                        '^@',
+                        // Imports starting with `../`
+                        '^\\.\\.(?!/?$)',
+                        '^\\.\\./?$',
+                        // Imports starting with `./`
+                        '^\\./(?=.*/)(?!/?$)',
+                        '^\\.(?!/?$)',
+                        '^\\./?$',
+                        // Style imports
+                        '^.+\\.s?css$',
+                        // Side effect imports
+                        '^\\u0000',
+                        // Delete the empty line copied as the next line of the last import
+                        '\\s*',
+                    ],
+                ],
+            },
+        ],
+        'sort-destructure-keys/sort-destructure-keys': 'error',
+        'sort-keys': 'error',
+        'typescript-sort-keys/interface': 'error',
+        'typescript-sort-keys/string-enum': 'error',
+    },
+};

packages/tradershub/babel.config.json

@@ -0,0 +1,16 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+    "plugins": [
+        ["@babel/plugin-proposal-decorators", { "legacy": true }],
+        ["@babel/plugin-proposal-class-properties", { "loose": true }],
+        ["@babel/plugin-proposal-private-methods", { "loose": true }],
+        ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
+        "@babel/plugin-proposal-export-default-from",
+        "@babel/plugin-proposal-object-rest-spread",
+        "@babel/plugin-proposal-export-namespace-from",
+        "@babel/plugin-syntax-dynamic-import",
+        ["@babel/plugin-proposal-unicode-property-regex", { "useUnicodeFlag": false }],
+        "@babel/plugin-proposal-optional-chaining",
+        "@babel/plugin-proposal-nullish-coalescing-operator"
+    ]
+}

packages/tradershub/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+    const content: React.ComponentType<React.SVGAttributes<SVGElement>>;
+    export default content;
+}

packages/tradershub/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfigForPackages = require('../../jest.config.base');
+
+module.exports = {
+    ...baseConfigForPackages,
+    moduleNameMapper: {
+        '\\.s(c|a)ss$': '<rootDir>/../../__mocks__/styleMock.js',
+        '^.+\\.svg$': '<rootDir>/../../__mocks__/fileMock.js',
+    },
+};