From 9536d734545d563a831895d00704ee5dcf923c6c Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Thu, 17 Mar 2022 17:07:15 +0330
Subject: [PATCH 01/64] add initial config of reports monorepo

---
 packages/reports/.eslintignore                |    5 +
 packages/reports/.eslintrc.ts                 |   16 +
 packages/reports/README.md                    |   97 ++
 packages/reports/build/config.js              |   59 +
 packages/reports/build/constants.js           |  149 ++
 packages/reports/build/helpers.js             |   33 +
 packages/reports/build/loaders-config.js      |  115 ++
 packages/reports/build/postcss.config.js      |    6 +
 packages/reports/build/webpack.config-test.js |   33 +
 packages/reports/build/webpack.config.js      |   58 +
 packages/reports/jest.config.js               |   19 +
 packages/reports/package.json                 |  128 ++
 .../src/Components/Errors/error-component.jsx |   46 +
 .../reports/src/Components/Errors/index.js    |    1 +
 .../__tests__/route-with-sub-routes.spec.js   |   32 +
 .../src/Components/Routes/binary-link.jsx     |   32 +
 .../src/Components/Routes/binary-routes.jsx   |   30 +
 .../reports/src/Components/Routes/helpers.js  |   37 +
 .../reports/src/Components/Routes/index.js    |    4 +
 .../Routes/route-with-sub-routes.jsx          |   50 +
 .../src/Components/account-statistics.jsx     |   70 +
 .../reports/src/Components/amount-cell.jsx    |   15 +
 .../src/Components/currency-wrapper.jsx       |   17 +
 .../Components/empty-portfolio-message.jsx    |   24 +
 .../empty-trade-history-message.jsx           |   28 +
 .../src/Components/filter-component.jsx       |   79 +
 .../src/Components/indicative-cell.jsx        |   53 +
 .../src/Components/market-symbol-icon-row.jsx |   93 +
 .../src/Components/placeholder-component.jsx  |   29 +
 .../src/Components/profit_loss_cell.jsx       |   15 +
 .../reports/src/Components/reports-meta.jsx   |   19 +
 .../src/Constants/data-table-constants.js     |  404 +++++
 .../reports/src/Constants/routes-config.js    |   57 +
 .../__tests__/open-positions.spec.js          |   31 +
 packages/reports/src/Containers/index.js      |   11 +
 .../reports/src/Containers/open-positions.jsx |  441 +++++
 .../reports/src/Containers/profit-table.jsx   |  224 +++
 packages/reports/src/Containers/reports.jsx   |  131 ++
 packages/reports/src/Containers/routes.jsx    |   39 +
 packages/reports/src/Containers/statement.jsx |  282 +++
 .../reports/src/Helpers/market-underlying.js  |   44 +
 packages/reports/src/Helpers/profit-loss.js   |    1 +
 .../Modules/Page404/Components/Page404.jsx    |   21 +
 packages/reports/src/Modules/Page404/index.js |    1 +
 .../Stores/Modules/CFD/Helpers/cfd-config.ts  |  108 ++
 .../src/Stores/Modules/CFD/cfd-store.js       |  514 ++++++
 packages/reports/src/Stores/Modules/index.js  |    7 +
 packages/reports/src/Stores/base-store.js     |  537 ++++++
 packages/reports/src/Stores/connect.js        |   31 +
 packages/reports/src/Stores/index.js          |   14 +
 .../reports/src/_common/__tests__/utility.js  |   16 +
 .../reports/src/_common/base/server_time.js   |   25 +
 packages/reports/src/_common/utility.js       |   52 +
 packages/reports/src/app.jsx                  |   26 +
 packages/reports/src/index.jsx                |   14 +
 packages/reports/src/init-store.js            |   20 +
 packages/reports/src/sass/app.scss            |   38 +
 .../app/_common/components/allow-equals.scss  |   19 +
 .../sass/app/_common/components/amount.scss   |    8 +
 .../app/_common/components/card-list.scss     |   20 +
 .../components/composite-calendar.scss        |  183 ++
 .../_common/components/contract-audit.scss    |  101 ++
 .../_common/components/contract-replay.scss   |   24 +
 .../components/contract-type-dialog.scss      |  101 ++
 .../components/contract-type-info.scss        |  110 ++
 .../components/contract-type-list.scss        |   94 +
 .../components/contract-type-no-result.scss   |   24 +
 .../components/contract-type-widget.scss      |  107 ++
 .../components/market-is-closed-overlay.scss  |   54 +
 .../components/market-symbol-icon.scss        |   38 +
 .../app/_common/components/message-box.scss   |  103 ++
 .../_common/components/number-selector.scss   |   56 +
 .../app/_common/components/popconfirm.scss    |  201 +++
 .../_common/components/positions-toggle.scss  |  115 ++
 .../_common/components/purchase-button.scss   |  327 ++++
 .../app/_common/components/range-slider.scss  |  183 ++
 .../app/_common/components/toggle-button.scss |   28 +
 .../app/_common/drawer/contract-drawer.scss   |  131 ++
 .../app/_common/drawer/positions-drawer.scss  |  124 ++
 .../_common/drawer/positions-modal-card.scss  |  259 +++
 .../sass/app/_common/form/time-picker.scss    |   93 +
 .../app/_common/layout/trader-layouts.scss    |  797 +++++++++
 .../src/sass/app/_common/mobile-widget.scss   |  159 ++
 .../src/sass/app/modules/contract.scss        |  165 ++
 .../app/modules/contract/bottom-widgets.scss  |   10 +
 .../src/sass/app/modules/contract/digits.scss |  464 +++++
 .../sass/app/modules/mt5/cfd-dashboard.scss   | 1539 +++++++++++++++++
 .../reports/src/sass/app/modules/mt5/cfd.scss |  394 +++++
 .../src/sass/app/modules/portfolio.scss       |   87 +
 .../reports/src/sass/app/modules/reports.scss |  983 +++++++++++
 .../src/sass/app/modules/smart-chart.scss     |  247 +++
 .../src/sass/app/modules/trading-mobile.scss  |  409 +++++
 .../reports/src/sass/app/modules/trading.scss |  675 ++++++++
 93 files changed, 12913 insertions(+)
 create mode 100644 packages/reports/.eslintignore
 create mode 100644 packages/reports/.eslintrc.ts
 create mode 100644 packages/reports/README.md
 create mode 100644 packages/reports/build/config.js
 create mode 100644 packages/reports/build/constants.js
 create mode 100644 packages/reports/build/helpers.js
 create mode 100644 packages/reports/build/loaders-config.js
 create mode 100644 packages/reports/build/postcss.config.js
 create mode 100644 packages/reports/build/webpack.config-test.js
 create mode 100644 packages/reports/build/webpack.config.js
 create mode 100644 packages/reports/jest.config.js
 create mode 100644 packages/reports/package.json
 create mode 100644 packages/reports/src/Components/Errors/error-component.jsx
 create mode 100644 packages/reports/src/Components/Errors/index.js
 create mode 100644 packages/reports/src/Components/Routes/__tests__/route-with-sub-routes.spec.js
 create mode 100644 packages/reports/src/Components/Routes/binary-link.jsx
 create mode 100644 packages/reports/src/Components/Routes/binary-routes.jsx
 create mode 100644 packages/reports/src/Components/Routes/helpers.js
 create mode 100644 packages/reports/src/Components/Routes/index.js
 create mode 100644 packages/reports/src/Components/Routes/route-with-sub-routes.jsx
 create mode 100644 packages/reports/src/Components/account-statistics.jsx
 create mode 100644 packages/reports/src/Components/amount-cell.jsx
 create mode 100644 packages/reports/src/Components/currency-wrapper.jsx
 create mode 100644 packages/reports/src/Components/empty-portfolio-message.jsx
 create mode 100644 packages/reports/src/Components/empty-trade-history-message.jsx
 create mode 100644 packages/reports/src/Components/filter-component.jsx
 create mode 100644 packages/reports/src/Components/indicative-cell.jsx
 create mode 100644 packages/reports/src/Components/market-symbol-icon-row.jsx
 create mode 100644 packages/reports/src/Components/placeholder-component.jsx
 create mode 100644 packages/reports/src/Components/profit_loss_cell.jsx
 create mode 100644 packages/reports/src/Components/reports-meta.jsx
 create mode 100644 packages/reports/src/Constants/data-table-constants.js
 create mode 100644 packages/reports/src/Constants/routes-config.js
 create mode 100644 packages/reports/src/Containers/__tests__/open-positions.spec.js
 create mode 100644 packages/reports/src/Containers/index.js
 create mode 100644 packages/reports/src/Containers/open-positions.jsx
 create mode 100644 packages/reports/src/Containers/profit-table.jsx
 create mode 100644 packages/reports/src/Containers/reports.jsx
 create mode 100644 packages/reports/src/Containers/routes.jsx
 create mode 100644 packages/reports/src/Containers/statement.jsx
 create mode 100644 packages/reports/src/Helpers/market-underlying.js
 create mode 100644 packages/reports/src/Helpers/profit-loss.js
 create mode 100644 packages/reports/src/Modules/Page404/Components/Page404.jsx
 create mode 100644 packages/reports/src/Modules/Page404/index.js
 create mode 100644 packages/reports/src/Stores/Modules/CFD/Helpers/cfd-config.ts
 create mode 100644 packages/reports/src/Stores/Modules/CFD/cfd-store.js
 create mode 100644 packages/reports/src/Stores/Modules/index.js
 create mode 100644 packages/reports/src/Stores/base-store.js
 create mode 100644 packages/reports/src/Stores/connect.js
 create mode 100644 packages/reports/src/Stores/index.js
 create mode 100644 packages/reports/src/_common/__tests__/utility.js
 create mode 100644 packages/reports/src/_common/base/server_time.js
 create mode 100644 packages/reports/src/_common/utility.js
 create mode 100644 packages/reports/src/app.jsx
 create mode 100644 packages/reports/src/index.jsx
 create mode 100644 packages/reports/src/init-store.js
 create mode 100644 packages/reports/src/sass/app.scss
 create mode 100644 packages/reports/src/sass/app/_common/components/allow-equals.scss
 create mode 100644 packages/reports/src/sass/app/_common/components/amount.scss
 create mode 100644 packages/reports/src/sass/app/_common/components/card-list.scss
 create mode 100644 packages/reports/src/sass/app/_common/components/composite-calendar.scss
 create mode 100644 packages/reports/src/sass/app/_common/components/contract-audit.scss
 create mode 100644 packages/reports/src/sass/app/_common/components/contract-replay.scss
 create mode 100644 packages/reports/src/sass/app/_common/components/contract-type-dialog.scss
 create mode 100644 packages/reports/src/sass/app/_common/components/contract-type-info.scss
 create mode 100644 packages/reports/src/sass/app/_common/components/contract-type-list.scss
 create mode 100644 packages/reports/src/sass/app/_common/components/contract-type-no-result.scss
 create mode 100644 packages/reports/src/sass/app/_common/components/contract-type-widget.scss
 create mode 100644 packages/reports/src/sass/app/_common/components/market-is-closed-overlay.scss
 create mode 100644 packages/reports/src/sass/app/_common/components/market-symbol-icon.scss
 create mode 100644 packages/reports/src/sass/app/_common/components/message-box.scss
 create mode 100644 packages/reports/src/sass/app/_common/components/number-selector.scss
 create mode 100644 packages/reports/src/sass/app/_common/components/popconfirm.scss
 create mode 100644 packages/reports/src/sass/app/_common/components/positions-toggle.scss
 create mode 100644 packages/reports/src/sass/app/_common/components/purchase-button.scss
 create mode 100644 packages/reports/src/sass/app/_common/components/range-slider.scss
 create mode 100644 packages/reports/src/sass/app/_common/components/toggle-button.scss
 create mode 100644 packages/reports/src/sass/app/_common/drawer/contract-drawer.scss
 create mode 100644 packages/reports/src/sass/app/_common/drawer/positions-drawer.scss
 create mode 100644 packages/reports/src/sass/app/_common/drawer/positions-modal-card.scss
 create mode 100644 packages/reports/src/sass/app/_common/form/time-picker.scss
 create mode 100644 packages/reports/src/sass/app/_common/layout/trader-layouts.scss
 create mode 100644 packages/reports/src/sass/app/_common/mobile-widget.scss
 create mode 100644 packages/reports/src/sass/app/modules/contract.scss
 create mode 100644 packages/reports/src/sass/app/modules/contract/bottom-widgets.scss
 create mode 100644 packages/reports/src/sass/app/modules/contract/digits.scss
 create mode 100644 packages/reports/src/sass/app/modules/mt5/cfd-dashboard.scss
 create mode 100644 packages/reports/src/sass/app/modules/mt5/cfd.scss
 create mode 100644 packages/reports/src/sass/app/modules/portfolio.scss
 create mode 100644 packages/reports/src/sass/app/modules/reports.scss
 create mode 100644 packages/reports/src/sass/app/modules/smart-chart.scss
 create mode 100644 packages/reports/src/sass/app/modules/trading-mobile.scss
 create mode 100644 packages/reports/src/sass/app/modules/trading.scss

diff --git a/packages/reports/.eslintignore b/packages/reports/.eslintignore
new file mode 100644
index 000000000000..669c57635d27
--- /dev/null
+++ b/packages/reports/.eslintignore
@@ -0,0 +1,5 @@
+build/*.js
+src/**/__tests__/*.js
+src/_common/lib/**/*.js
+.eslintrc.js
+.stylelintrc.js
\ No newline at end of file
diff --git a/packages/reports/.eslintrc.ts b/packages/reports/.eslintrc.ts
new file mode 100644
index 000000000000..8f5eba9b0529
--- /dev/null
+++ b/packages/reports/.eslintrc.ts
@@ -0,0 +1,16 @@
+const webpackConfig = require('./build/webpack.config-test.js');
+
+module.exports = {
+    extends: [
+        '../../.eslintrc.js',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:@typescript-eslint/eslint-recommended',
+    ],
+    parser: '@typescript-eslint/parser',
+    plugins: ['@typescript-eslint'],
+    settings: {
+        'import/resolver': {
+            webpack: { config: webpackConfig({}) },
+        },
+    },
+};
\ No newline at end of file
diff --git a/packages/reports/README.md b/packages/reports/README.md
new file mode 100644
index 000000000000..321f3a03fac1
--- /dev/null
+++ b/packages/reports/README.md
@@ -0,0 +1,97 @@
+# Deriv App
+
+This repository contains the static HTML, Javascript, CSS, and images content of the [Deriv](http://app.deriv.com) website.
+
+**In this document**
+
+-   [Other documents](#other-documents)
+-   [Installation](#installation)
+-   [How to work with this project](#how-to-work-with-this-project)
+    -   [Deploy to your gh-pages for the first time](#deploy-to-your-gh-pages-for-the-first-time)
+    -   [Deploy to the root of the gh-pages](#deploy-to-the-root-of-the-gh-pages)
+    -   [Clean root and deploy to it](#clean-root-and-deploy-to-it)
+    -   [Deploy to test folder](#deploy-to-test-folder)
+    -   [Preview on your local machine](#preview-on-your-local-machine)
+-   [Miscellaneous](#Miscellaneous)
+-   [Selenium tests](#selenium-tests)
+
+## Other documents
+
+-   [Modules docs](docs/Modules/README.md) - Contains implementation guides (i.e., scaffolding, code usage)
+
+## Installation
+
+In order to work on your own version of the Deriv Javascript and CSS, please **fork this project**.
+
+You will also need to install the following on your development machine:
+
+-   Node.js (10.14.2 or higher is recommended) and NPM (see <https://nodejs.org/en/download/package-manager/>)
+-   Go to project root, then run `npm install`
+
+### Use a custom domain
+
+In order to use your custom domain, please put it in a file named `CNAME` inside `scripts` folder of your local clone of deriv-app.
+
+## How to work with this project
+
+### Deploy to your gh-pages for the first time
+
+1.  Register your application [here](https://developers.binary.com/applications/). This will give you the ability to redirect back to your github pages after login.
+    Use `https://YOUR_GITHUB_USERNAME.github.io/deriv-app/` for the Redirect URL and `https://YOUR_GITHUB_USERNAME.github.io/deriv-app/en/redirect` for the Verification URL.
+
+        If you're using a custom domain, replace the github URLs above with your domain and remove the `deriv-app` base path.
+
+2.  In `src/config.js`: Insert the `Application ID` of your registered application in `user_app_id`.
+
+    -   **NOTE:** In order to avoid accidentally committing personal changes to this file, use `git update-index --assume-unchanged src/config.js`
+
+3.  Set `NODE_ENV` to `development` with `export NODE_ENV=development`
+
+4.  Run `npm run deploy:clean`
+
+### Deploy to the root of the gh-pages
+
+This will overwrite modified files and only clear the content of `js` folder before pushing changes. It will leave other folders as they are.
+
+```sh
+npm run deploy
+```
+
+### Clean root and deploy to it
+
+This removes all files and folders and deploys your `dist` folder to the root.
+
+```sh
+npm run deploy:clean
+```
+
+### Deploy to test folder
+
+This will add all your changes to the test folder specified.
+Please ensure it is prefixed with `br_`.
+
+```sh
+npm run deploy:folder "br_my_test_folder"
+```
+
+### Preview on your local machine
+
+-   Edit your `/etc/hosts` file to include this domain:
+
+```
+127.0.0.1   localhost.binary.sx
+```
+
+-   To preview your changes locally for the first time, run `sudo npm start`:
+    -   It will run all tests, compile all CSS, and JS/JSX as well as watch for further js/jsx/css changes and rebuild on every change you make.
+-   To preview your changes locally without any tests, run `npm run serve`
+    -   It will watch for JS/JSX/CSS changes and rebuild on every change you make.
+-   To run all tests, run `npm run test`
+
+## Miscellaneous
+
+-   In Webstorm, right-click on `src`, hover over `Mark directory as`, and click `Resource root` to enable import alias resolution.
+
+## Selenium tests
+
+Elements for selenium test purposes should have `id` attributes, with the value of `dt_[element_name]_[unique_name|id]_[element_type]`. (e.g. `dt_settings_dark_button`)
diff --git a/packages/reports/build/config.js b/packages/reports/build/config.js
new file mode 100644
index 000000000000..3e8e4a47414f
--- /dev/null
+++ b/packages/reports/build/config.js
@@ -0,0 +1,59 @@
+const path = require('path');
+const stylelintFormatter = require('stylelint-formatter-pretty');
+const { IS_RELEASE } = require('./constants');
+// const { transformContentUrlBase } = require('./helpers');
+
+const generateSWConfig = () => ({
+    importWorkboxFrom: 'local',
+    cleanupOutdatedCaches: true,
+    exclude: [/CNAME$/, /index\.html$/, /404\.html$/],
+    skipWaiting: true,
+    clientsClaim: true,
+});
+
+const htmlOutputConfig = () => ({
+    template: 'index.html',
+    filename: 'index.html',
+    minify: !IS_RELEASE
+        ? false
+        : {
+              collapseWhitespace: true,
+              removeComments: true,
+              removeRedundantAttributes: true,
+              useShortDoctype: true,
+          },
+});
+
+const htmlInjectConfig = () => ({
+    links: [
+        {
+            path: 'public/images/favicons',
+            glob: '*',
+            globPath: path.resolve(__dirname, '../src/public/images/favicons'),
+            attributes: {
+                rel: 'icon',
+            },
+        },
+    ],
+    append: false,
+});
+
+const cssConfig = () => ({
+    filename: 'reports/css/reports.main.[contenthash].css',
+    chunkFilename: 'reports/css/reports.[name].[contenthash].css',
+});
+
+const stylelintConfig = () => ({
+    configFile: path.resolve(__dirname, '../.stylelintrc.js'),
+    formatter: stylelintFormatter,
+    files: 'sass/**/*.s?(a|c)ss',
+    failOnError: false, // Even though it's false, it will fail on error, and we need this to be false to display trace
+});
+
+module.exports = {
+    htmlOutputConfig,
+    htmlInjectConfig,
+    cssConfig,
+    stylelintConfig,
+    generateSWConfig,
+};
diff --git a/packages/reports/build/constants.js b/packages/reports/build/constants.js
new file mode 100644
index 000000000000..898a8794ae56
--- /dev/null
+++ b/packages/reports/build/constants.js
@@ -0,0 +1,149 @@
+const CircularDependencyPlugin = require('circular-dependency-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+// const HtmlWebPackPlugin = require('html-webpack-plugin');
+// const HtmlWebpackTagsPlugin = require('html-webpack-tags-plugin');
+const IgnorePlugin = require('webpack').IgnorePlugin;
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const path = require('path');
+const StylelintPlugin = require('stylelint-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+const {
+    copyConfig,
+    cssConfig,
+    // htmlInjectConfig,
+    // htmlOutputConfig,
+    stylelintConfig,
+} = require('./config');
+const {
+    css_loaders,
+    file_loaders,
+    html_loaders,
+    js_loaders,
+    svg_file_loaders,
+    svg_loaders,
+} = require('./loaders-config');
+
+const IS_RELEASE = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'staging';
+
+const ALIASES = {
+    _common: path.resolve(__dirname, '../src/_common'),
+    Constants: path.resolve(__dirname, '../src/Constants'),
+    Components: path.resolve(__dirname, '../src/Components'),
+    Containers: path.resolve(__dirname, '../src/Containers'),
+    Modules: path.resolve(__dirname, '../src/Modules'),
+    Sass: path.resolve(__dirname, '../src/sass'),
+    Stores: path.resolve(__dirname, '../src/Stores'),
+};
+
+const rules = (is_test_env = false, is_mocha_only = false) => [
+    ...(is_test_env && !is_mocha_only
+        ? [
+              {
+                  test: /\.(js|jsx)$/,
+                  exclude: /node_modules|__tests__|(build\/.*\.js$)|(_common\/lib)/,
+                  include: /src/,
+                  loader: 'eslint-loader',
+                  enforce: 'pre',
+                  options: {
+                      formatter: require('eslint-formatter-pretty'),
+                      configFile: path.resolve(__dirname, '../.eslintrc.js'),
+                      ignorePath: path.resolve(__dirname, '../.eslintignore'),
+                  },
+              },
+              {
+                  test: /\.(ts|tsx)$/,
+                  exclude: /node_modules|__tests__|(build\/.*\.js$)|(_common\/lib)/,
+                  include: /src/,
+                  loader: 'eslint-loader',
+                  enforce: 'pre',
+                  options: {
+                      formatter: require('eslint-formatter-pretty'),
+                      configFile: path.resolve(__dirname, '../.eslintrc.ts'),
+                      ignorePath: path.resolve(__dirname, '../.eslintignore'),
+                  },
+              },
+          ]
+        : []),
+    {
+        test: /\.(js|jsx|ts|tsx)$/,
+        exclude: is_test_env ? /node_modules/ : /node_modules|__tests__/,
+        include: is_test_env ? /__tests__|src/ : /src/,
+        use: js_loaders,
+    },
+    {
+        test: /\.html$/,
+        exclude: /node_modules/,
+        use: html_loaders,
+    },
+    {
+        test: /\.(png|jpg|gif|woff|woff2|eot|ttf|otf)$/,
+        exclude: /node_modules/,
+        use: file_loaders,
+    },
+    {
+        test: /\.svg$/,
+        exclude: /node_modules/,
+        include: /public\//,
+        use: svg_file_loaders,
+    },
+    {
+        test: /\.svg$/,
+        exclude: /node_modules|public\//,
+        use: svg_loaders,
+    },
+    is_test_env
+        ? {
+              test: /\.(sc|sa|c)ss$/,
+              loaders: 'null-loader',
+          }
+        : {
+              test: /\.(sc|sa|c)ss$/,
+              use: css_loaders,
+          },
+];
+
+const MINIMIZERS = !IS_RELEASE
+    ? []
+    : [
+          new TerserPlugin({
+              test: /\.js$/,
+              exclude: /(smartcharts)/,
+              parallel: 2,
+          }),
+          new CssMinimizerPlugin(),
+      ];
+
+const plugins = (base, is_test_env, is_mocha_only) => [
+    new CleanWebpackPlugin(),
+    new IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/ }),
+    new MiniCssExtractPlugin(cssConfig()),
+    new CircularDependencyPlugin({ exclude: /node_modules/, failOnError: true }),
+    new ForkTsCheckerWebpackPlugin(),
+    ...(IS_RELEASE
+        ? []
+        : [
+              new WebpackManifestPlugin({
+                  fileName: 'reports/asset-manifest.json',
+                  filter: file => file.name !== 'CNAME',
+              }),
+          ]),
+    ...(is_test_env && !is_mocha_only
+        ? [new StylelintPlugin(stylelintConfig())]
+        : [
+              // ...(!IS_RELEASE ? [ new BundleAnalyzerPlugin({ analyzerMode: 'static' }) ] : []),
+          ]),
+];
+
+module.exports = {
+    IS_RELEASE,
+    ALIASES,
+    plugins,
+    rules,
+    MINIMIZERS,
+};
diff --git a/packages/reports/build/helpers.js b/packages/reports/build/helpers.js
new file mode 100644
index 000000000000..ff63efbbbfae
--- /dev/null
+++ b/packages/reports/build/helpers.js
@@ -0,0 +1,33 @@
+/**
+ * @param {Buffer} content
+ * @param {string} path
+ * @param {string|RegExp} base
+ * */
+const transformContentUrlBase = (content, path, base) => {
+    return content.toString().replace(/{root_url}|{start_url_base}/g, base);
+};
+
+/**
+ * @returns {string} Chrome browser string
+ * */
+const openChromeBasedOnPlatform = platform => {
+    switch (platform) {
+        case 'win32': {
+            return 'chrome';
+        }
+        case 'linux': {
+            return 'google-chrome';
+        }
+        case 'darwin': {
+            return 'Google Chrome';
+        }
+        default: {
+            return 'Google Chrome';
+        }
+    }
+};
+
+module.exports = {
+    transformContentUrlBase,
+    openChromeBasedOnPlatform,
+};
diff --git a/packages/reports/build/loaders-config.js b/packages/reports/build/loaders-config.js
new file mode 100644
index 000000000000..244d0aa2d1b8
--- /dev/null
+++ b/packages/reports/build/loaders-config.js
@@ -0,0 +1,115 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
+
+const js_loaders = [
+    {
+        loader: '@deriv/shared/src/loaders/react-import-loader.js',
+    },
+    {
+        loader: '@deriv/shared/src/loaders/deriv-account-loader.js',
+    },
+    {
+        loader: 'babel-loader',
+        options: {
+            cacheDirectory: true,
+            rootMode: 'upward',
+        },
+    },
+];
+
+const html_loaders = [
+    {
+        loader: 'html-loader',
+    },
+];
+
+const file_loaders = [
+    {
+        loader: 'file-loader',
+        options: {
+            name: '[path][name].[ext]',
+        },
+    },
+];
+
+const svg_file_loaders = [
+    {
+        loader: 'file-loader',
+        options: {
+            name: '[path][name].[ext]',
+        },
+    },
+];
+
+const svg_loaders = [
+    {
+        loader: 'babel-loader',
+        options: {
+            cacheDirectory: true,
+            rootMode: 'upward',
+        },
+    },
+    {
+        loader: 'react-svg-loader',
+        options: {
+            jsx: true,
+            svgo: {
+                plugins: [
+                    { removeTitle: false },
+                    { removeUselessStrokeAndFill: false },
+                    { removeUknownsAndDefaults: false },
+                ],
+                floatPrecision: 2,
+            },
+        },
+    },
+];
+
+const css_loaders = [
+    {
+        loader: MiniCssExtractPlugin.loader,
+    },
+    {
+        loader: 'css-loader',
+        options: {
+            sourceMap: true,
+        },
+    },
+    {
+        loader: 'postcss-loader',
+        options: {
+            sourceMap: true,
+            postcssOptions: {
+                config: path.resolve(__dirname),
+            },
+        },
+    },
+    {
+        loader: 'resolve-url-loader',
+        options: {
+            sourceMap: true,
+            keepQuery: true,
+        },
+    },
+    {
+        loader: 'sass-loader',
+        options: {
+            sourceMap: true,
+        },
+    },
+    {
+        loader: 'sass-resources-loader',
+        options: {
+            resources: require('@deriv/shared/src/styles/index.js'),
+        },
+    },
+];
+
+module.exports = {
+    js_loaders,
+    html_loaders,
+    file_loaders,
+    svg_loaders,
+    svg_file_loaders,
+    css_loaders,
+};
diff --git a/packages/reports/build/postcss.config.js b/packages/reports/build/postcss.config.js
new file mode 100644
index 000000000000..ce1fe7ec00d9
--- /dev/null
+++ b/packages/reports/build/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+    parser: 'postcss-scss',
+    plugins: {
+        'postcss-preset-env': {},
+    },
+};
diff --git a/packages/reports/build/webpack.config-test.js b/packages/reports/build/webpack.config-test.js
new file mode 100644
index 000000000000..3fb503cb753c
--- /dev/null
+++ b/packages/reports/build/webpack.config-test.js
@@ -0,0 +1,33 @@
+const { ALIASES, IS_RELEASE, MINIMIZERS, plugins, rules } = require('./constants');
+const path = require('path');
+const nodeExternals = require('webpack-node-externals');
+
+module.exports = function (env) {
+    const base = env && env.base && env.base !== true ? `/${env.base}/` : '/';
+
+    return {
+        context: path.resolve(__dirname, '../src'),
+        devtool: IS_RELEASE ? undefined : 'eval-cheap-module-source-map',
+        entry: './index.js',
+        externals: [nodeExternals()],
+        mode: IS_RELEASE ? 'development' : 'production',
+        module: {
+            rules: rules(true, env && env.mocha_only),
+        },
+        optimization: {
+            chunkIds: 'named',
+            minimize: true,
+            minimizer: MINIMIZERS,
+        },
+        output: {
+            filename: 'js/[name].[hash].js',
+            publicPath: '/',
+        },
+        plugins: plugins(base, true, env && env.mocha_only),
+        resolve: {
+            alias: ALIASES,
+            extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        },
+        target: 'node',
+    };
+};
diff --git a/packages/reports/build/webpack.config.js b/packages/reports/build/webpack.config.js
new file mode 100644
index 000000000000..08ee9a20df71
--- /dev/null
+++ b/packages/reports/build/webpack.config.js
@@ -0,0 +1,58 @@
+const path = require('path');
+const { ALIASES, IS_RELEASE, MINIMIZERS, plugins, rules } = require('./constants');
+
+module.exports = function (env) {
+    const base = env && env.base && env.base !== true ? `/${env.base}/` : '/';
+
+    return {
+        context: path.resolve(__dirname, '../'),
+        devtool: IS_RELEASE ? undefined : 'eval-cheap-module-source-map',
+        entry: {
+            reports: path.resolve(__dirname, '../src', 'index.jsx'),
+        },
+        mode: IS_RELEASE ? 'production' : 'development',
+        module: {
+            rules: rules(),
+        },
+        resolve: {
+            alias: ALIASES,
+            extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        },
+        optimization: {
+            chunkIds: 'named',
+            moduleIds: 'named',
+            minimize: IS_RELEASE,
+            minimizer: MINIMIZERS,
+        },
+        output: {
+            filename: 'reports/js/[name].js',
+            publicPath: base,
+            path: path.resolve(__dirname, '../dist'),
+            chunkFilename: 'reports/js/reports.[name].[contenthash].js',
+            libraryExport: 'default',
+            library: '@deriv/reports',
+            libraryTarget: 'umd',
+        },
+        externals: [
+            {
+                react: 'react',
+                'react-dom': 'react-dom',
+                'react-router-dom': 'react-router-dom',
+                'react-router': 'react-router',
+                mobx: 'mobx',
+                'mobx-react': 'mobx-react',
+                '@deriv/shared': '@deriv/shared',
+                '@deriv/components': '@deriv/components',
+                '@deriv/translations': '@deriv/translations',
+                '@deriv/deriv-charts': '@deriv/deriv-charts',
+                '@deriv/account': '@deriv/account',
+            },
+            /^@deriv\/shared\/.+$/,
+            /^@deriv\/components\/.+$/,
+            /^@deriv\/translations\/.+$/,
+            /^@deriv\/account\/.+$/,
+        ],
+        target: 'web',
+        plugins: plugins(base, false),
+    };
+};
diff --git a/packages/reports/jest.config.js b/packages/reports/jest.config.js
new file mode 100644
index 000000000000..4319119f4329
--- /dev/null
+++ b/packages/reports/jest.config.js
@@ -0,0 +1,19 @@
+const baseConfigForPackages = require('../../jest.config.base');
+
+module.exports = {
+    ...baseConfigForPackages,
+    moduleNameMapper: {
+        "\\.s(c|a)ss$": "<rootDir>/../../__mocks__/styleMock.js",
+        "^.+\\.svg$": "<rootDir>/../../__mocks__/styleMock.js",
+        '^_common\/(.*)$': "<rootDir>/src/_common/$1",
+        '^App\/(.*)$': "<rootDir>/src/App/$1",
+        '^Assets\/(.*)$': "<rootDir>/src/Assets/$1",
+        '^Constants\/(.*)$': "<rootDir>/src/Constants/$1",
+        '^Constants$': "<rootDir>/src/Constants/index.js",
+        '^Documents\/(.*)$': "<rootDir>/src/Documents/$1",
+        '^Modules\/(.*)$': "<rootDir>/src/Modules/$1",
+        '^Utils\/(.*)$': "<rootDir>/src/Utils/$1",
+        '^Services\/(.*)$': "<rootDir>/src/Services/$1",
+        '^Stores\/(.*)$': "<rootDir>/src/Stores/$1",
+    },
+};
\ No newline at end of file
diff --git a/packages/reports/package.json b/packages/reports/package.json
new file mode 100644
index 000000000000..8ebfa110df83
--- /dev/null
+++ b/packages/reports/package.json
@@ -0,0 +1,128 @@
+{
+    "name": "@deriv/reports",
+    "version": "1.0.0",
+    "description": "Deriv content",
+    "main": "dist/reports/js/reports.js",
+    "private": true,
+    "scripts": {
+      "start": "npm run test && npm run serve",
+      "serve": "echo \"Serving...\" && webpack --progress --watch --config \"./build/webpack.config.js\"",
+      "build": "f () { webpack --config \"./build/webpack.config.js\" --env base=$1;}; f",
+      "build:travis": "echo \"No build:travis specified\"",
+      "test": "echo \"No mocha:test specified\"",
+      "test:eslint": "eslint \"./src/**/*.?(js|jsx)\"",
+      "test:mocha": "mochapack -r babel-polyfill -r jsdom-global/register -r mock-local-storage --webpack-config \"./build/webpack.config-test.js\" \"src/**/__tests__/*.js\" --webpack-env.mocha_only --require ignore-styles",
+      "deploy": "echo \"No deploy specified\"",
+      "deploy:clean": "echo \"No deploy:clean specified\"",
+      "deploy:folder": "echo \"No deploy:folder specified\"",
+      "deploy:staging": "echo \"No deploy:staging specified\"",
+      "deploy:production": "echo \"No deploy:production specified\""
+    },
+    "engines": {
+      "node": "^14.17.1"
+    },
+    "repository": {
+      "type": "git",
+      "url": "https://github.com/binary-com/deriv-app.git"
+    },
+    "keywords": [
+      "deriv"
+    ],
+    "author": "Deriv",
+    "license": "Apache-2.0",
+    "bugs": {
+      "url": "https://github.com/binary-com/deriv-app/issues"
+    },
+    "homepage": "https://github.com/binary-com/deriv-app",
+    "devDependencies": {
+      "babel-eslint": "^10.1.0",
+      "babel-loader": "^8.1.0",
+      "chai": "^4.2.0",
+      "circular-dependency-plugin": "^5.2.2",
+      "clean-webpack-plugin": "^3.0.0",
+      "copy-webpack-plugin": "^9.0.1",
+      "css-loader": "^5.0.1",
+      "css-minimizer-webpack-plugin": "^3.0.1",
+      "enzyme": "^3.10.0",
+      "enzyme-adapter-react-16": "^1.14.0",
+      "eslint-config-airbnb-base": "^14.2.1",
+      "eslint-config-binary": "^1.0.2",
+      "eslint-config-prettier": "^7.2.0",
+      "eslint-plugin-import": "^2.23.4",
+      "eslint-plugin-prettier": "^3.3.1",
+      "eslint-plugin-react": "^7.22.0",
+      "eslint-plugin-react-hooks": "^4.2.0",
+      "file-loader": "^6.2.0",
+      "fork-ts-checker-webpack-plugin": "^6.5.0",
+      "html-loader": "^1.3.2",
+      "html-webpack-plugin": "^5.0.0-beta.5",
+      "html-webpack-tags-plugin": "^2.0.17",
+      "ignore-styles": "^5.0.1",
+      "jsdom": "^16.2.1",
+      "jsdom-global": "^2.1.1",
+      "mini-css-extract-plugin": "^1.3.4",
+      "mocha": "^7.1.1",
+      "mochapack": "^2.1.2",
+      "mock-local-storage": "^1.1.8",
+      "node-sass": "^4.12.0",
+      "postcss-loader": "^6.1.1",
+      "postcss-preset-env": "^6.7.0",
+      "postcss-scss": "^4.0.0",
+      "react-svg-loader": "^3.0.3",
+      "resolve-url-loader": "^3.1.2",
+      "sass-loader": "^10.1.1",
+      "sass-resources-loader": "^2.1.1",
+      "sinon": "^7.3.2",
+      "stylelint-formatter-pretty": "^2.1.1",
+      "svgo": "^1.3.2",
+      "terser-webpack-plugin": "^5.1.1",
+      "webpack": "^5.46.0",
+      "webpack-bundle-analyzer": "^4.3.0",
+      "webpack-cli": "^4.7.2",
+      "webpack-manifest-plugin": "^4.0.2",
+      "webpack-node-externals": "^2.5.2"
+    },
+    "dependencies": {
+      "@deriv/account": "^1.0.0",
+      "@deriv/api-types": "1.0.48",
+      "@deriv/components": "^1.0.0",
+      "@deriv/deriv-api": "^1.0.8",
+      "@deriv/shared": "^1.0.0",
+      "@deriv/translations": "^1.0.0",
+      "@types/classnames": "^2.2.11",
+      "@types/react": "^16.14.21",
+      "@types/react-dom": "^16.9.14",
+      "@types/react-loadable": "^5.5.6",
+      "acorn": "^6.1.1",
+      "babel-polyfill": "^6.26.0",
+      "canvas-toBlob": "^1.0.0",
+      "classnames": "^2.2.6",
+      "crc-32": "^1.2.0",
+      "event-source-polyfill": "^1.0.5",
+      "extend": "^3.0.2",
+      "formik": "^2.1.4",
+      "i18next": "^20.3.2",
+      "js-cookie": "^2.2.1",
+      "lodash.debounce": "^4.0.8",
+      "lodash.throttle": "^4.1.1",
+      "mobx": "^5.15.7",
+      "mobx-react": "6.3.1",
+      "mobx-utils": "^5.5.5",
+      "moment": "^2.24.0",
+      "null-loader": "^4.0.1",
+      "object.fromentries": "^2.0.0",
+      "promise-polyfill": "^8.1.3",
+      "prop-types": "^15.7.2",
+      "react": "^16.14.0",
+      "react-content-loader": "^4.3.2",
+      "react-dom": "^16.14.0",
+      "react-i18next": "^11.11.0",
+      "react-loadable": "^5.5.0",
+      "react-pose": "^4.0.10",
+      "react-router": "^5.2.0",
+      "react-router-dom": "^5.2.0",
+      "react-transition-group": "^4.3.0",
+      "typescript": "^4.5.4",
+      "workbox-webpack-plugin": "^6.0.2"
+    }
+  }
\ No newline at end of file
diff --git a/packages/reports/src/Components/Errors/error-component.jsx b/packages/reports/src/Components/Errors/error-component.jsx
new file mode 100644
index 000000000000..868959ab38b8
--- /dev/null
+++ b/packages/reports/src/Components/Errors/error-component.jsx
@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { PageError, Dialog } from '@deriv/components';
+import { routes } from '@deriv/shared';
+import { localize } from '@deriv/translations';
+
+const ErrorComponent = ({
+    header,
+    message,
+    is_dialog,
+    redirect_label,
+    redirectOnClick,
+    should_show_refresh = true,
+}) => {
+    const refresh_message = should_show_refresh ? localize('Please refresh this page to continue.') : '';
+
+    return is_dialog ? (
+        <Dialog
+            title={header || localize('There was an error')}
+            is_visible
+            confirm_button_text={redirect_label || localize('Ok')}
+            onConfirm={redirectOnClick || (() => location.reload())}
+        >
+            {message || localize('Sorry, an error occured while processing your request.')}
+        </Dialog>
+    ) : (
+        <PageError
+            header={header || localize('Something’s not right')}
+            messages={
+                message
+                    ? [message, refresh_message]
+                    : [localize('Sorry, an error occured while processing your request.'), refresh_message]
+            }
+            redirect_urls={[routes.trade]}
+            redirect_labels={[redirect_label || localize('Refresh')]}
+            buttonOnClick={redirectOnClick || (() => location.reload())}
+        />
+    );
+};
+
+ErrorComponent.propTypes = {
+    message: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object]),
+    type: PropTypes.string,
+};
+
+export default ErrorComponent;
diff --git a/packages/reports/src/Components/Errors/index.js b/packages/reports/src/Components/Errors/index.js
new file mode 100644
index 000000000000..dc12ba08a1e7
--- /dev/null
+++ b/packages/reports/src/Components/Errors/index.js
@@ -0,0 +1 @@
+export default from './error-component.jsx';
diff --git a/packages/reports/src/Components/Routes/__tests__/route-with-sub-routes.spec.js b/packages/reports/src/Components/Routes/__tests__/route-with-sub-routes.spec.js
new file mode 100644
index 000000000000..9e9946f2265f
--- /dev/null
+++ b/packages/reports/src/Components/Routes/__tests__/route-with-sub-routes.spec.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { expect } from 'chai';
+import { configure, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { RouteWithSubRoutesRender } from '../route-with-sub-routes.jsx';
+import { Redirect } from 'react-router-dom';
+import { PlatformContext } from '@deriv/shared';
+
+configure({ adapter: new Adapter() });
+
+describe('<RouteWithSubRoutes />', () => {
+    it('should render one <RouteWithSubRoutesRender /> component', () => {
+        const comp = (
+            <PlatformContext.Provider>
+                <RouteWithSubRoutesRender />
+            </PlatformContext.Provider>
+        );
+        const wrapper = shallow(comp);
+        expect(wrapper).to.have.length(1);
+    });
+    it('should have props as passed as route', () => {
+        const route = { path: '/', component: Redirect, title: '', exact: true, to: '/root' };
+        const comp = (
+            <PlatformContext.Provider>
+                <RouteWithSubRoutesRender {...route} />
+            </PlatformContext.Provider>
+        );
+        const wrapper = shallow(comp);
+        expect(wrapper.prop('exact')).to.equal(true);
+        expect(wrapper.prop('path')).to.equal('/');
+    });
+});
diff --git a/packages/reports/src/Components/Routes/binary-link.jsx b/packages/reports/src/Components/Routes/binary-link.jsx
new file mode 100644
index 000000000000..c92428bdea66
--- /dev/null
+++ b/packages/reports/src/Components/Routes/binary-link.jsx
@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { PlatformContext } from '@deriv/shared';
+import getRoutesConfig from '../../Constants/routes-config';
+import { findRouteByPath, normalizePath } from './helpers';
+
+const BinaryLink = ({ active_class, to, children, ...props }) => {
+    const { is_dashboard } = React.useContext(PlatformContext);
+    const path = normalizePath(to);
+    const route = findRouteByPath(path, getRoutesConfig({ is_dashboard }));
+
+    if (!route) {
+        throw new Error(`Route not found: ${to}`);
+    }
+
+    return to ? (
+        <NavLink to={path} activeClassName={active_class || 'active'} exact={route.exact} {...props}>
+            {children}
+        </NavLink>
+    ) : (
+        <a {...props}>{children}</a>
+    );
+};
+
+BinaryLink.propTypes = {
+    active_class: PropTypes.string,
+    children: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string]),
+    to: PropTypes.string,
+};
+
+export default BinaryLink;
diff --git a/packages/reports/src/Components/Routes/binary-routes.jsx b/packages/reports/src/Components/Routes/binary-routes.jsx
new file mode 100644
index 000000000000..98f67846902a
--- /dev/null
+++ b/packages/reports/src/Components/Routes/binary-routes.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Switch } from 'react-router-dom';
+import { PlatformContext } from '@deriv/shared';
+import { Localize } from '@deriv/translations';
+import getRoutesConfig from '../../Constants/routes-config';
+import RouteWithSubRoutes from './route-with-sub-routes.jsx';
+
+const BinaryRoutes = props => {
+    const { is_dashboard } = React.useContext(PlatformContext);
+
+    return (
+        <React.Suspense
+            fallback={() => {
+                return (
+                    <div>
+                        <Localize i18n_default_text='Loading...' />
+                    </div>
+                );
+            }}
+        >
+            <Switch>
+                {getRoutesConfig({ is_dashboard }).map(route => (
+                    <RouteWithSubRoutes key={route.path.toString()} {...route} {...props} />
+                ))}
+            </Switch>
+        </React.Suspense>
+    );
+};
+
+export default BinaryRoutes;
diff --git a/packages/reports/src/Components/Routes/helpers.js b/packages/reports/src/Components/Routes/helpers.js
new file mode 100644
index 000000000000..8d8bcc421c1d
--- /dev/null
+++ b/packages/reports/src/Components/Routes/helpers.js
@@ -0,0 +1,37 @@
+import { matchPath } from 'react-router';
+import { routes } from '@deriv/shared';
+
+export const normalizePath = path => (/^\//.test(path) ? path : `/${path || ''}`); // Default to '/'
+
+export const findRouteByPath = (path, routes_config) => {
+    let result;
+
+    routes_config.some(route_info => {
+        let match_path;
+        try {
+            match_path = matchPath(path, route_info);
+        } catch (e) {
+            if (/undefined/.test(e.message)) {
+                return undefined;
+            }
+        }
+
+        if (match_path) {
+            result = route_info;
+            return true;
+        } else if (route_info.routes) {
+            result = findRouteByPath(path, route_info.routes);
+            return result;
+        }
+        return false;
+    });
+
+    return result;
+};
+
+export const isRouteVisible = (route, is_logged_in) => !(route && route.is_authenticated && !is_logged_in);
+
+export const getPath = (route_path, params = {}) =>
+    Object.keys(params).reduce((p, name) => p.replace(`:${name}`, params[name]), route_path);
+
+export const getContractPath = contract_id => getPath(routes.contract, { contract_id });
diff --git a/packages/reports/src/Components/Routes/index.js b/packages/reports/src/Components/Routes/index.js
new file mode 100644
index 000000000000..061bdf961719
--- /dev/null
+++ b/packages/reports/src/Components/Routes/index.js
@@ -0,0 +1,4 @@
+export BinaryLink from './binary-link.jsx';
+export default from './binary-routes.jsx';
+export * from './helpers';
+export RouteWithSubRoutes from './route-with-sub-routes.jsx';
diff --git a/packages/reports/src/Components/Routes/route-with-sub-routes.jsx b/packages/reports/src/Components/Routes/route-with-sub-routes.jsx
new file mode 100644
index 000000000000..5b4d7ad1ec08
--- /dev/null
+++ b/packages/reports/src/Components/Routes/route-with-sub-routes.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Redirect, Route } from 'react-router-dom';
+import { redirectToLogin, isEmptyObject, routes, removeBranchName, default_title } from '@deriv/shared';
+import { getLanguage } from '@deriv/translations';
+
+const RouteWithSubRoutes = route => {
+    const renderFactory = props => {
+        let result = null;
+
+        if (route.component === Redirect) {
+            let to = route.to;
+
+            // This if clause has been added just to remove '/index' from url in localhost env.
+            if (route.path === routes.index) {
+                const { location } = props;
+                to = location.pathname.toLowerCase().replace(route.path, '');
+            }
+            result = <Redirect to={to} />;
+        } else if (route.is_authenticated && !route.is_logged_in && !route.is_logging_in) {
+            redirectToLogin(route.is_logged_in, getLanguage());
+        } else {
+            const default_subroute = (route.routes ?? []).reduce(
+                (acc, cur) => ({
+                    ...acc,
+                    ...cur.subroutes.find(subroute => subroute.default),
+                }),
+                {}
+            );
+            const has_default_subroute = !isEmptyObject(default_subroute);
+            const pathname = removeBranchName(location.pathname);
+
+            result = (
+                <React.Fragment>
+                    {has_default_subroute && pathname === route.path && <Redirect to={default_subroute.path} />}
+                    <route.component {...props} routes={route.routes} />
+                </React.Fragment>
+            );
+        }
+
+        const title = route.getTitle?.() || '';
+        document.title = `${title} | ${default_title}`;
+        return result;
+    };
+
+    return <Route exact={route.exact} path={route.path} render={renderFactory} />;
+};
+
+export { RouteWithSubRoutes as RouteWithSubRoutesRender }; // For tests
+
+export default RouteWithSubRoutes;
diff --git a/packages/reports/src/Components/account-statistics.jsx b/packages/reports/src/Components/account-statistics.jsx
new file mode 100644
index 000000000000..2e2c3e3c5863
--- /dev/null
+++ b/packages/reports/src/Components/account-statistics.jsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MobileWrapper, Money, Text } from '@deriv/components';
+import { localize } from '@deriv/translations';
+import { connect } from 'Stores/connect';
+
+const AccountStatistics = ({ account_statistics, currency }) => {
+    return (
+        <div className='statement__account-statistics'>
+            <div className='statement__account-statistics-item'>
+                <div className='statement__account-statistics--is-rectangle'>
+                    <Text color='less-prominent' className='statement__account-statistics-title'>
+                        {localize('Total deposits')} <MobileWrapper> ({currency}) </MobileWrapper>
+                    </Text>
+                    <Text
+                        color='prominent'
+                        weight='bold'
+                        align='center'
+                        className='statement__account-statistics-amount'
+                    >
+                        <Money amount={account_statistics.total_deposits} currency={currency} />
+                    </Text>
+                </div>
+            </div>
+            <div className='statement__account-statistics-item statement__account-statistics-total-withdrawal'>
+                <div className='statement__account-statistics--is-rectangle'>
+                    <Text color='less-prominent' className='statement__account-statistics-title'>
+                        {localize('Total withdrawals')} <MobileWrapper> ({currency}) </MobileWrapper>
+                    </Text>
+                    <Text
+                        color='prominent'
+                        weight='bold'
+                        align='center'
+                        className='statement__account-statistics-amount'
+                    >
+                        <Money amount={account_statistics.total_withdrawals} currency={currency} />
+                    </Text>
+                </div>
+            </div>
+            <div className='statement__account-statistics-item'>
+                <div className='statement__account-statistics--is-rectangle'>
+                    <Text color='less-prominent' className='statement__account-statistics-title'>
+                        {localize('Net deposits')} <MobileWrapper> ({currency}) </MobileWrapper>
+                    </Text>
+                    <Text
+                        color='prominent'
+                        weight='bold'
+                        align='center'
+                        className='statement__account-statistics-amount'
+                    >
+                        <Money
+                            amount={account_statistics.total_deposits - account_statistics.total_withdrawals}
+                            currency={currency}
+                        />
+                    </Text>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+AccountStatistics.propTypes = {
+    account_statistics: PropTypes.object,
+    currency: PropTypes.string,
+};
+
+export default connect(({ modules, client }) => ({
+    account_statistics: modules.statement.account_statistics,
+    currency: client.currency,
+}))(AccountStatistics);
diff --git a/packages/reports/src/Components/amount-cell.jsx b/packages/reports/src/Components/amount-cell.jsx
new file mode 100644
index 000000000000..74342892adb0
--- /dev/null
+++ b/packages/reports/src/Components/amount-cell.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getProfitOrLoss } from 'Modules/Reports/Helpers/profit-loss';
+
+const AmountCell = ({ value }) => {
+    const status = getProfitOrLoss(value);
+
+    return <span className={`amount--${status}`}>{value}</span>;
+};
+
+AmountCell.propTypes = {
+    value: PropTypes.string,
+};
+
+export default AmountCell;
diff --git a/packages/reports/src/Components/currency-wrapper.jsx b/packages/reports/src/Components/currency-wrapper.jsx
new file mode 100644
index 000000000000..bb4273052781
--- /dev/null
+++ b/packages/reports/src/Components/currency-wrapper.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text } from '@deriv/components';
+
+const CurrencyWrapper = ({ currency }) => (
+    <div className='currency__wrapper'>
+        <Text color='colored-background' weight='bold' size='xxxs'>
+            {currency}
+        </Text>
+    </div>
+);
+
+CurrencyWrapper.propTypes = {
+    currency: PropTypes.string,
+};
+
+export default CurrencyWrapper;
diff --git a/packages/reports/src/Components/empty-portfolio-message.jsx b/packages/reports/src/Components/empty-portfolio-message.jsx
new file mode 100644
index 000000000000..c2066318b49d
--- /dev/null
+++ b/packages/reports/src/Components/empty-portfolio-message.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Icon, Text } from '@deriv/components';
+import { localize } from '@deriv/translations';
+
+const EmptyPortfolioMessage = ({ error }) => (
+    <div className='portfolio-empty'>
+        <div className='portfolio-empty__wrapper'>
+            {error ? (
+                <Text color='disabled' size='xs'>
+                    {error}
+                </Text>
+            ) : (
+                <React.Fragment>
+                    <Icon icon='IcPortfolio' className='portfolio-empty__icon' size={96} color='disabled' />
+                    <Text color='disabled' size='xs'>
+                        {localize('No open positions')}
+                    </Text>
+                </React.Fragment>
+            )}
+        </div>
+    </div>
+);
+
+export default EmptyPortfolioMessage;
diff --git a/packages/reports/src/Components/empty-trade-history-message.jsx b/packages/reports/src/Components/empty-trade-history-message.jsx
new file mode 100644
index 000000000000..8f1ec53e4fe3
--- /dev/null
+++ b/packages/reports/src/Components/empty-trade-history-message.jsx
@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Icon, Text } from '@deriv/components';
+
+const EmptyTradeHistoryMessage = ({
+    has_selected_date,
+    component_icon,
+    localized_message,
+    localized_period_message,
+}) => (
+    <React.Fragment>
+        <div className='empty-trade-history'>
+            <Icon icon={component_icon} className='empty-trade-history__icon' color='disabled' size={96} />
+            <Text size='xs' align='center' color='disabled' className='empty-trade-history__text'>
+                {!has_selected_date ? localized_message : localized_period_message}
+            </Text>
+        </div>
+    </React.Fragment>
+);
+
+EmptyTradeHistoryMessage.propTypes = {
+    component_icon: PropTypes.string,
+    has_selected_date: PropTypes.bool,
+    localized_message: PropTypes.string,
+    localized_period_message: PropTypes.string,
+};
+
+export default EmptyTradeHistoryMessage;
diff --git a/packages/reports/src/Components/filter-component.jsx b/packages/reports/src/Components/filter-component.jsx
new file mode 100644
index 000000000000..9f9588b6a130
--- /dev/null
+++ b/packages/reports/src/Components/filter-component.jsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FilterDropdown } from '@deriv/components';
+import { localize } from '@deriv/translations';
+import { connect } from 'Stores/connect';
+import CompositeCalendar from 'App/Components/Form/CompositeCalendar/composite-calendar.jsx';
+
+const FilterComponent = ({
+    action_type,
+    date_from,
+    date_to,
+    handleFilterChange,
+    handleDateChange,
+    filtered_date_range,
+}) => {
+    const filter_list = [
+        {
+            text: localize('All transactions'),
+            value: 'all',
+        },
+        {
+            text: localize('Buy'),
+            value: 'buy',
+        },
+        {
+            text: localize('Sell'),
+            value: 'sell',
+        },
+        {
+            text: localize('Deposit'),
+            value: 'deposit',
+        },
+        {
+            text: localize('Withdrawal'),
+            value: 'withdrawal',
+        },
+        {
+            text: localize('Transfer'),
+            value: 'transfer',
+        },
+    ];
+
+    return (
+        <React.Fragment>
+            <CompositeCalendar
+                input_date_range={filtered_date_range}
+                onChange={handleDateChange}
+                from={date_from}
+                to={date_to}
+            />
+            <FilterDropdown
+                dropdown_display_className='dc-dropdown__display--has-suffix-icon'
+                filter_list={filter_list}
+                handleFilterChange={handleFilterChange}
+                initial_selected_filter={action_type}
+            />
+        </React.Fragment>
+    );
+};
+
+FilterComponent.propTypes = {
+    action_type: PropTypes.string,
+    date_from: PropTypes.number,
+    date_to: PropTypes.number,
+    filtered_date_range: PropTypes.object,
+    handleDateChange: PropTypes.func,
+    handleFilterChange: PropTypes.func,
+    suffix_icon: PropTypes.string,
+};
+
+export default connect(({ modules }) => ({
+    action_type: modules.statement.action_type,
+    data: modules.statement.data,
+    date_from: modules.statement.date_from,
+    date_to: modules.statement.date_to,
+    filtered_date_range: modules.statement.filtered_date_range,
+    handleDateChange: modules.statement.handleDateChange,
+    handleFilterChange: modules.statement.handleFilterChange,
+}))(FilterComponent);
diff --git a/packages/reports/src/Components/indicative-cell.jsx b/packages/reports/src/Components/indicative-cell.jsx
new file mode 100644
index 000000000000..af1b3521a4f6
--- /dev/null
+++ b/packages/reports/src/Components/indicative-cell.jsx
@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Icon, Money, DesktopWrapper, ContractCard } from '@deriv/components';
+import { getCardLabels } from 'Constants/contract';
+import { connect } from 'Stores/connect';
+
+const IndicativeCell = ({ amount, currency, contract_info, is_footer, onClickSell, is_sell_requested }) => {
+    const [movement, setMovement] = React.useState(null);
+    const [amount_state, setAmountState] = React.useState(0);
+
+    React.useEffect(() => {
+        setMovement(() => {
+            return amount >= amount_state ? 'profit' : 'loss';
+        });
+        setAmountState(amount);
+    }, [amount, amount_state]);
+
+    return (
+        <div className='open-positions__indicative'>
+            <div className='open-positions__indicative--amount'>
+                <Money amount={Math.abs(amount)} currency={currency} />
+                {status !== 'no-resale' && amount !== 0 && (
+                    <React.Fragment>
+                        {movement === 'profit' && <Icon icon='IcProfit' />}
+                        {movement === 'loss' && <Icon icon='IcLoss' />}
+                    </React.Fragment>
+                )}
+            </div>
+            <DesktopWrapper>
+                {!is_footer && (
+                    <ContractCard.Sell
+                        contract_info={contract_info}
+                        is_sell_requested={is_sell_requested}
+                        getCardLabels={getCardLabels}
+                        onClickSell={onClickSell}
+                    />
+                )}
+            </DesktopWrapper>
+        </div>
+    );
+};
+
+IndicativeCell.propTypes = {
+    amount: PropTypes.number,
+    currency: PropTypes.string,
+    status: PropTypes.string,
+    is_footer: PropTypes.bool,
+    onClickSell: PropTypes.func,
+};
+
+export default connect(({ modules }) => ({
+    onClickSell: modules.portfolio.onClickSell,
+}))(IndicativeCell);
diff --git a/packages/reports/src/Components/market-symbol-icon-row.jsx b/packages/reports/src/Components/market-symbol-icon-row.jsx
new file mode 100644
index 000000000000..5ada1db081e5
--- /dev/null
+++ b/packages/reports/src/Components/market-symbol-icon-row.jsx
@@ -0,0 +1,93 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { extractInfoFromShortcode, isHighLow } from '@deriv/shared';
+import { Icon, Popover, IconTradeTypes } from '@deriv/components';
+import { getMarketName, getTradeTypeName } from '../Helpers/market-underlying';
+
+const MarketSymbolIconRow = ({ icon, payload, show_description, should_show_multiplier = true }) => {
+    const should_show_category_icon = typeof payload.shortcode === 'string';
+    const info_from_shortcode = extractInfoFromShortcode(payload.shortcode);
+
+    if (should_show_category_icon && info_from_shortcode) {
+        return (
+            <div className='market-symbol-icon'>
+                <div className='market-symbol-icon-name'>
+                    <Popover
+                        classNameTarget='market-symbol-icon__popover'
+                        classNameBubble='market-symbol-icon__popover-bubble'
+                        alignment='top'
+                        message={getMarketName(info_from_shortcode.underlying)}
+                        is_bubble_hover_enabled
+                        disable_target_icon
+                    >
+                        <Icon
+                            icon={
+                                info_from_shortcode.underlying
+                                    ? `IcUnderlying${info_from_shortcode.underlying}`
+                                    : 'IcUnknown'
+                            }
+                            size={32}
+                        />
+                    </Popover>
+                    {show_description && payload.display_name}
+                </div>
+
+                <div className='market-symbol-icon-category'>
+                    <Popover
+                        classNameTarget='category-type-icon__popover'
+                        classNameBubble='category-type-icon__popover-bubble'
+                        alignment='top'
+                        message={getTradeTypeName(info_from_shortcode.category)}
+                        is_bubble_hover_enabled
+                        disable_target_icon
+                    >
+                        <IconTradeTypes
+                            type={
+                                isHighLow({ shortcode_info: info_from_shortcode })
+                                    ? `${info_from_shortcode.category.toLowerCase()}_barrier`
+                                    : info_from_shortcode.category.toLowerCase()
+                            }
+                            color='brand'
+                        />
+                    </Popover>
+                    {show_description && info_from_shortcode.category}
+                </div>
+                {should_show_multiplier && info_from_shortcode.multiplier && (
+                    <div className='market-symbol-icon__multiplier'>x{info_from_shortcode.multiplier}</div>
+                )}
+            </div>
+        );
+    } else if (['deposit', 'hold', 'release', 'withdrawal', 'transfer'].includes(payload.action_type)) {
+        return (
+            <div className='market-symbol-icon'>
+                {payload.action_type === 'deposit' && <Icon icon={icon || 'IcCashierDeposit'} size={32} />}
+                {payload.action_type === 'withdrawal' && <Icon icon='IcCashierWithdrawal' size={32} />}
+                {payload.action_type === 'transfer' && <Icon icon='IcAccountTransferColored' size={32} />}
+                {(payload.action_type === 'hold' || payload.action_type === 'release') && (
+                    <Icon icon='IcCashierDp2p' size={32} />
+                )}
+            </div>
+        );
+    } else if (['adjustment'].includes(payload.action_type)) {
+        return (
+            <div className='market-symbol-icon'>
+                <Icon icon='IcAdjustment' size={32} />
+            </div>
+        );
+    }
+
+    return (
+        <svg width='32' height='32' className='unknown-icon'>
+            <rect width='32' height='32' />
+        </svg>
+    );
+};
+
+MarketSymbolIconRow.propTypes = {
+    action: PropTypes.string,
+    payload: PropTypes.object,
+    show_description: PropTypes.bool,
+    should_show_multiplier: PropTypes.bool,
+};
+
+export default MarketSymbolIconRow;
diff --git a/packages/reports/src/Components/placeholder-component.jsx b/packages/reports/src/Components/placeholder-component.jsx
new file mode 100644
index 000000000000..54d43f05c528
--- /dev/null
+++ b/packages/reports/src/Components/placeholder-component.jsx
@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Loading from '../../../templates/_common/components/loading';
+
+const PlaceholderComponent = props => {
+    const EmptyMessageComponent = props.empty_message_component;
+    return (
+        <React.Fragment>
+            {props.is_empty && (
+                <EmptyMessageComponent
+                    component_icon={props.component_icon}
+                    has_selected_date={props.has_selected_date}
+                    localized_message={props.localized_message}
+                    localized_period_message={props.localized_period_message}
+                />
+            )}
+            {props.is_loading && <Loading />}
+        </React.Fragment>
+    );
+};
+
+PlaceholderComponent.propTypes = {
+    component_icon: PropTypes.string,
+    empty_message_component: PropTypes.func,
+    has_selected_date: PropTypes.bool,
+    localized_message: PropTypes.string,
+};
+
+export default PlaceholderComponent;
diff --git a/packages/reports/src/Components/profit_loss_cell.jsx b/packages/reports/src/Components/profit_loss_cell.jsx
new file mode 100644
index 000000000000..b968cb81d03f
--- /dev/null
+++ b/packages/reports/src/Components/profit_loss_cell.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getProfitOrLoss } from 'Modules/Reports/Helpers/profit-loss';
+
+const ProfitLossCell = ({ value, children }) => {
+    const status = getProfitOrLoss(value);
+
+    return <span className={`amount--${status}`}>{children}</span>;
+};
+
+ProfitLossCell.propTypes = {
+    value: PropTypes.string,
+};
+
+export default ProfitLossCell;
diff --git a/packages/reports/src/Components/reports-meta.jsx b/packages/reports/src/Components/reports-meta.jsx
new file mode 100644
index 000000000000..aec529493d5e
--- /dev/null
+++ b/packages/reports/src/Components/reports-meta.jsx
@@ -0,0 +1,19 @@
+import classNames from 'classnames';
+import React from 'react';
+
+const ReportsMeta = ({ filter_component, className, optional_component, is_statement }) => (
+    <div className={classNames('reports__meta', className)}>
+        {optional_component}
+        {filter_component && (
+            <div
+                className={classNames('reports__meta-filter', {
+                    'reports__meta-filter--statement': is_statement,
+                })}
+            >
+                {filter_component}
+            </div>
+        )}
+    </div>
+);
+
+export { ReportsMeta };
diff --git a/packages/reports/src/Constants/data-table-constants.js b/packages/reports/src/Constants/data-table-constants.js
new file mode 100644
index 000000000000..75d0bb5dc178
--- /dev/null
+++ b/packages/reports/src/Constants/data-table-constants.js
@@ -0,0 +1,404 @@
+import classNames from 'classnames';
+import React from 'react';
+import { Icon, Label, Money, ContractCard } from '@deriv/components';
+import { isMobile, getCurrencyDisplayCode, getTotalProfit, shouldShowCancellation } from '@deriv/shared';
+import { localize, Localize } from '@deriv/translations';
+import ProgressSliderStream from 'App/Containers/ProgressSliderStream';
+import { getCardLabels } from 'Constants/contract';
+import { getProfitOrLoss } from 'Modules/Reports/Helpers/profit-loss';
+import IndicativeCell from '../Components/indicative-cell.jsx';
+import MarketSymbolIconRow from '../Components/market-symbol-icon-row.jsx';
+import ProfitLossCell from '../Components/profit_loss_cell.jsx';
+import CurrencyWrapper from '../Components/currency-wrapper.jsx';
+
+const getModeFromValue = key => {
+    const map = {
+        buy: 'success',
+        deposit: 'success',
+        hold: 'warn',
+        release: 'success',
+        sell: 'danger',
+        withdrawal: 'info',
+        default: 'default',
+        adjustment: 'adjustment',
+        transfer: 'transfer',
+    };
+
+    if (Object.keys(map).find(x => x === key)) {
+        return map[key];
+    }
+
+    return map.default;
+};
+
+/* eslint-disable react/display-name, react/prop-types */
+export const getStatementTableColumnsTemplate = currency => [
+    {
+        key: 'icon',
+        title: isMobile() ? '' : localize('Type'),
+        col_index: 'icon',
+        renderCellContent: ({ cell_value, passthrough, row_obj }) => {
+            const icon = passthrough.isTopUp(row_obj) ? 'icCashierTopUp' : null;
+            return (
+                <MarketSymbolIconRow action={cell_value} icon={icon} key={row_obj.transaction_id} payload={row_obj} />
+            );
+        },
+    },
+    {
+        title: localize('Ref. ID'),
+        col_index: 'refid',
+    },
+    {
+        title: localize('Currency'),
+        col_index: 'currency',
+        renderCellContent: () => <CurrencyWrapper currency={getCurrencyDisplayCode(currency)} />,
+    },
+    {
+        title: localize('Transaction time'),
+        col_index: 'date',
+        renderCellContent: ({ cell_value }) => {
+            return <span>{cell_value} GMT</span>;
+        },
+    },
+    {
+        key: 'mode',
+        title: localize('Transaction'),
+        col_index: 'action_type',
+        renderCellContent: ({ cell_value, passthrough, row_obj }) => (
+            <Label mode={getModeFromValue(cell_value)}>
+                {(passthrough.isTopUp(row_obj) && localize('Top up')) || row_obj.action}
+            </Label>
+        ),
+    },
+    {
+        title: localize('Credit/Debit'),
+        col_index: 'amount',
+        renderCellContent: ({ cell_value }) => (
+            <div className={`amount--${getProfitOrLoss(cell_value)}`}>
+                <Money has_sign amount={cell_value.replace(/[,]+/g, '')} currency={currency} />
+            </div>
+        ),
+    },
+    {
+        title: localize('Balance'),
+        col_index: 'balance',
+        renderCellContent: ({ cell_value }) => <Money amount={cell_value.replace(/[,]+/g, '')} currency={currency} />,
+    },
+];
+export const getProfitTableColumnsTemplate = (currency, items_count) => [
+    {
+        key: 'icon',
+        title: isMobile() ? '' : localize('Type'),
+        col_index: 'action_type',
+        renderCellContent: ({ cell_value, row_obj, is_footer }) => {
+            if (is_footer) {
+                return localize('Profit/loss on the last {{item_count}} contracts', { item_count: items_count });
+            }
+            return <MarketSymbolIconRow action={cell_value} key={row_obj.transaction_id} payload={row_obj} />;
+        },
+    },
+    {
+        title: localize('Ref. ID'),
+        col_index: 'transaction_id',
+    },
+    {
+        title: localize('Currency'),
+        col_index: 'currency',
+        renderCellContent: ({ is_footer }) =>
+            is_footer ? '' : <CurrencyWrapper currency={getCurrencyDisplayCode(currency)} />,
+    },
+    {
+        title: localize('Buy time'),
+        col_index: 'purchase_time',
+        renderCellContent: ({ cell_value, is_footer }) => {
+            if (is_footer) return '';
+            return <span>{cell_value} GMT</span>;
+        },
+    },
+    {
+        title: localize('Buy price'),
+        col_index: 'buy_price',
+        renderCellContent: ({ cell_value, is_footer }) => {
+            if (is_footer) return '';
+
+            return <Money amount={cell_value} currency={currency} />;
+        },
+    },
+    {
+        title: localize('Sell time'),
+        col_index: 'sell_time',
+        renderHeader: ({ title }) => <span>{title}</span>,
+        renderCellContent: ({ cell_value, is_footer }) => {
+            if (is_footer) return '';
+            return <span>{cell_value} GMT</span>;
+        },
+    },
+    {
+        title: localize('Sell price'),
+        col_index: 'sell_price',
+        renderCellContent: ({ cell_value, is_footer }) => {
+            if (is_footer) return '';
+
+            return <Money amount={cell_value} currency={currency} />;
+        },
+    },
+    {
+        title: localize('Profit / Loss'),
+        col_index: 'profit_loss',
+        renderCellContent: ({ cell_value }) => (
+            <ProfitLossCell value={cell_value}>
+                <Money has_sign amount={cell_value.replace(/[,]+/g, '')} currency={currency} />
+            </ProfitLossCell>
+        ),
+    },
+];
+export const getOpenPositionsColumnsTemplate = currency => [
+    {
+        title: isMobile() ? '' : localize('Type'),
+        col_index: 'type',
+        renderCellContent: ({ cell_value, row_obj, is_footer }) => {
+            if (is_footer) return localize('Total');
+
+            return <MarketSymbolIconRow action={cell_value} key={row_obj.id} payload={row_obj.contract_info} />;
+        },
+    },
+    {
+        title: localize('Ref. ID'),
+        col_index: 'reference',
+    },
+    {
+        title: localize('Currency'),
+        col_index: 'currency',
+        renderCellContent: ({ row_obj }) => (
+            <CurrencyWrapper currency={getCurrencyDisplayCode(row_obj.contract_info?.currency)} />
+        ),
+    },
+    {
+        title: localize('Buy price'),
+        col_index: 'purchase',
+        renderCellContent: ({ cell_value }) => <Money amount={cell_value} currency={currency} />,
+    },
+    {
+        title: localize('Payout limit'),
+        col_index: 'payout',
+        renderCellContent: ({ cell_value }) =>
+            cell_value ? <Money amount={cell_value} currency={currency} /> : <span>-</span>,
+    },
+    {
+        title: localize('Indicative profit/loss'),
+        col_index: 'profit',
+        renderCellContent: ({ row_obj }) => {
+            if (!row_obj.profit_loss && (!row_obj.contract_info || !row_obj.contract_info.profit)) return;
+            const profit = row_obj.profit_loss || row_obj.contract_info.profit;
+            // eslint-disable-next-line consistent-return
+            return (
+                <div
+                    className={classNames('open-positions__profit-loss', {
+                        'open-positions__profit-loss--negative': profit < 0,
+                        'open-positions__profit-loss--positive': profit > 0,
+                    })}
+                >
+                    <Money amount={Math.abs(profit)} currency={currency} />
+                    <div className='open-positions__profit-loss--movement'>
+                        {profit > 0 ? <Icon icon='IcProfit' /> : <Icon icon='IcLoss' />}
+                    </div>
+                </div>
+            );
+        },
+    },
+    {
+        title: localize('Indicative price'),
+        col_index: 'indicative',
+        renderCellContent: ({ cell_value, row_obj, is_footer }) => (
+            <IndicativeCell
+                amount={+cell_value}
+                currency={currency}
+                contract_info={row_obj.contract_info}
+                is_sell_requested={row_obj.is_sell_requested}
+                is_footer={is_footer}
+            />
+        ),
+    },
+    {
+        title: localize('Remaining time'),
+        col_index: 'id',
+        renderCellContent: ({ row_obj }) => <ProgressSliderStream contract_info={row_obj.contract_info} />,
+    },
+];
+
+export const getMultiplierOpenPositionsColumnsTemplate = ({
+    currency,
+    onClickCancel,
+    onClickSell,
+    getPositionById,
+    server_time,
+}) => [
+    {
+        title: isMobile() ? '' : localize('Type'),
+        col_index: 'type',
+        renderCellContent: ({ cell_value, row_obj, is_footer }) => {
+            if (is_footer) return localize('Total');
+
+            return (
+                <MarketSymbolIconRow
+                    action={cell_value}
+                    key={row_obj.id}
+                    payload={row_obj.contract_info}
+                    should_show_multiplier={false}
+                />
+            );
+        },
+    },
+    {
+        title: localize('Multiplier'),
+        col_index: 'multiplier',
+        renderCellContent: ({ row_obj }) =>
+            row_obj.contract_info && row_obj.contract_info.multiplier ? `x${row_obj.contract_info.multiplier}` : '',
+    },
+    {
+        title: localize('Currency'),
+        col_index: 'currency',
+        renderCellContent: ({ row_obj }) => (
+            <CurrencyWrapper currency={getCurrencyDisplayCode(row_obj.contract_info?.currency)} />
+        ),
+    },
+    {
+        title: localize('Stake'),
+        col_index: 'buy_price',
+        renderCellContent: ({ row_obj }) => {
+            if (row_obj.contract_info) {
+                const { ask_price: cancellation_price = 0 } = row_obj.contract_info.cancellation || {};
+                return <Money amount={row_obj.contract_info.buy_price - cancellation_price} currency={currency} />;
+            }
+            return '';
+        },
+    },
+    {
+        title: localize('Deal cancel. fee'),
+        col_index: 'cancellation',
+        renderCellContent: ({ row_obj }) => {
+            if (!row_obj.contract_info || !row_obj.contract_info.underlying) return '-';
+
+            if (!shouldShowCancellation(row_obj.contract_info.underlying)) return localize('N/A');
+
+            if (row_obj.contract_info.cancellation) {
+                return <Money amount={row_obj.contract_info.cancellation.ask_price} currency={currency} />;
+            }
+            return '-';
+        },
+    },
+    {
+        title: isMobile() ? (
+            <Localize i18n_default_text='Total buy price' />
+        ) : (
+            <Localize i18n_default_text='Buy price' />
+        ),
+        col_index: 'purchase',
+        renderCellContent: ({ cell_value }) => <Money amount={cell_value} currency={currency} />,
+    },
+    {
+        title: <Localize i18n_default_text='Take profit<0 />Stop loss' components={[<br key={0} />]} />,
+        col_index: 'limit_order',
+        renderCellContent: ({ row_obj, is_footer }) => {
+            if (is_footer) {
+                return '';
+            }
+
+            const { take_profit, stop_loss } = row_obj.contract_info?.limit_order || {};
+            return (
+                <React.Fragment>
+                    <div>
+                        {take_profit?.order_amount ? (
+                            <Money has_sign amount={take_profit.order_amount} currency={currency} />
+                        ) : (
+                            '-'
+                        )}
+                    </div>
+                    <div>
+                        {stop_loss?.order_amount ? (
+                            <Money has_sign amount={stop_loss.order_amount} currency={currency} />
+                        ) : (
+                            '-'
+                        )}
+                    </div>
+                </React.Fragment>
+            );
+        },
+    },
+    {
+        title: localize('Current stake'),
+        col_index: 'bid_price',
+        renderCellContent: ({ row_obj, is_footer }) => {
+            if (is_footer) {
+                return '';
+            }
+
+            if (!row_obj.contract_info || !row_obj.contract_info.bid_price) return '-';
+
+            const total_profit = getTotalProfit(row_obj.contract_info);
+            return (
+                <div
+                    className={classNames('open-positions__bid_price', {
+                        'open-positions__bid_price--negative': total_profit < 0,
+                        'open-positions__bid_price--positive': total_profit > 0,
+                    })}
+                >
+                    <Money amount={row_obj.contract_info.bid_price} currency={currency} />
+                </div>
+            );
+        },
+    },
+    {
+        title: isMobile() ? (
+            <Localize i18n_default_text='Total profit/loss' />
+        ) : (
+            <Localize i18n_default_text='Total<0 />profit/loss' components={[<br key={0} />]} />
+        ),
+        col_index: 'profit',
+        renderCellContent: ({ row_obj }) => {
+            if (!row_obj.contract_info || !row_obj.contract_info.profit) return null;
+            const total_profit = getTotalProfit(row_obj.contract_info);
+            // eslint-disable-next-line consistent-return
+            return (
+                <div
+                    className={classNames('open-positions__profit-loss', {
+                        'open-positions__profit-loss--negative': total_profit < 0,
+                        'open-positions__profit-loss--positive': total_profit > 0,
+                    })}
+                >
+                    <Money amount={Math.abs(total_profit)} currency={currency} />
+                    <div className='open-positions__profit-loss--movement'>
+                        {total_profit > 0 ? <Icon icon='IcProfit' /> : <Icon icon='IcLoss' />}
+                    </div>
+                </div>
+            );
+        },
+    },
+    {
+        title: localize('Action'),
+        col_index: 'action',
+        renderCellContent: ({ row_obj, is_footer }) => {
+            if (is_footer) {
+                return <div className='open-positions__row-action' />;
+            }
+
+            const { contract_info } = row_obj;
+            const position = getPositionById(contract_info.contract_id);
+            const { is_sell_requested } = position || {};
+
+            return (
+                <div className='open-positions__row-action'>
+                    <ContractCard.MultiplierCloseActions
+                        contract_info={contract_info}
+                        getCardLabels={getCardLabels}
+                        is_sell_requested={is_sell_requested}
+                        onClickCancel={onClickCancel}
+                        onClickSell={onClickSell}
+                        server_time={server_time}
+                    />
+                </div>
+            );
+        },
+    },
+];
+/* eslint-enable react/display-name, react/prop-types */
diff --git a/packages/reports/src/Constants/routes-config.js b/packages/reports/src/Constants/routes-config.js
new file mode 100644
index 000000000000..0dc86e5778b6
--- /dev/null
+++ b/packages/reports/src/Constants/routes-config.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import { routes } from '@deriv/shared';
+import { localize } from '@deriv/translations';
+import { OpenPositions, ProfitTable, Statement, Reports } from '../Containers';
+
+
+// Error Routes
+const Page404 = React.lazy(() => import(/* webpackChunkName: "404" */ '../Modules/Page404'));
+
+// Order matters
+const initRoutesConfig = () => {
+    return [
+        {
+            path: routes.reports,
+            component: <Reports />,
+            is_authenticated: true,
+            getTitle: () => localize('Reports'),
+            icon_component: 'IcReports',
+            routes: [
+                {
+                    path: routes.positions,
+                    component: <OpenPositions />,
+                    getTitle: () => localize('Open positions'),
+                    icon_component: 'IcOpenPositions',
+                    default: true,
+                },
+                {
+                    path: routes.profit,
+                    component: <ProfitTable />,
+                    getTitle: () => localize('Profit table'),
+                    icon_component: 'IcProfitTable',
+                },
+                {
+                    path: routes.statement,
+                    component: <Statement />,
+                    getTitle: () => localize('Statement'),
+                    icon_component: 'IcStatement',
+                },
+            ],
+        },
+    ];
+};
+
+let routesConfig;
+
+// For default page route if page/path is not found, must be kept at the end of routes_config array
+const route_default = { component: Page404, getTitle: () => localize('Error 404') };
+
+const getRoutesConfig = () => {
+    if (!routesConfig) {
+        routesConfig = initRoutesConfig();
+        routesConfig.push(route_default);
+    }
+    return routesConfig;
+};
+
+export default getRoutesConfig;
diff --git a/packages/reports/src/Containers/__tests__/open-positions.spec.js b/packages/reports/src/Containers/__tests__/open-positions.spec.js
new file mode 100644
index 000000000000..cae4c669d486
--- /dev/null
+++ b/packages/reports/src/Containers/__tests__/open-positions.spec.js
@@ -0,0 +1,31 @@
+import { expect } from 'chai';
+import { configure, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { OpenPositionsTable } from '../open-positions';
+
+configure({ adapter: new Adapter() });
+
+describe('OpenPositions', () => {
+    jest.mock(
+        '../open-positions.jsx',
+        () =>
+            jest.fn().mockReturnValue({
+                OpenPositions: props => <div {...props}></div>,
+            }),
+        jest.fn().mockReturnValue({
+            OpenPositionsTable: props => <div {...props}></div>,
+        })
+    );
+
+    it('should render one <OpenPositions /> component', async () => {
+        const OpenPositions = (await import('../../index')).default.OpenPositions;
+        const wrapper = shallow(<OpenPositions />);
+        expect(wrapper).to.have.length(1);
+    });
+
+    it('should render one <OpenPositionsTable /> component', () => {
+        const wrapper = shallow(<OpenPositionsTable />);
+        expect(wrapper).to.have.length(1);
+    });
+});
diff --git a/packages/reports/src/Containers/index.js b/packages/reports/src/Containers/index.js
new file mode 100644
index 000000000000..0523dc131e09
--- /dev/null
+++ b/packages/reports/src/Containers/index.js
@@ -0,0 +1,11 @@
+import OpenPositions from './open-positions.jsx';
+import ProfitTable from './profit-table.jsx';
+import Statement from './statement.jsx';
+import Reports from './reports.jsx';
+
+export default {
+    OpenPositions,
+    ProfitTable,
+    Statement,
+    Reports,
+};
diff --git a/packages/reports/src/Containers/open-positions.jsx b/packages/reports/src/Containers/open-positions.jsx
new file mode 100644
index 000000000000..7368f5318571
--- /dev/null
+++ b/packages/reports/src/Containers/open-positions.jsx
@@ -0,0 +1,441 @@
+import { PropTypes as MobxPropTypes } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import {
+    DesktopWrapper,
+    MobileWrapper,
+    ProgressBar,
+    Tabs,
+    DataList,
+    DataTable,
+    ContractCard,
+    usePrevious,
+} from '@deriv/components';
+import { urlFor, isMobile, isMultiplierContract, getTimePercentage, website_name, getTotalProfit } from '@deriv/shared';
+import { localize, Localize } from '@deriv/translations';
+import { ReportsTableRowLoader } from 'App/Components/Elements/ContentLoader';
+import { getContractPath } from 'App/Components/Routes/helpers';
+import { getContractDurationType } from 'Modules/Reports/Helpers/market-underlying';
+import EmptyTradeHistoryMessage from 'Modules/Reports/Components/empty-trade-history-message.jsx';
+import {
+    getOpenPositionsColumnsTemplate,
+    getMultiplierOpenPositionsColumnsTemplate,
+} from 'Modules/Reports/Constants/data-table-constants';
+import PositionsCard from 'App/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx';
+import PlaceholderComponent from 'Modules/Reports/Components/placeholder-component.jsx';
+import { getCardLabels } from 'Constants/contract';
+import { connect } from 'Stores/connect';
+
+const EmptyPlaceholderWrapper = props => (
+    <React.Fragment>
+        {props.is_empty ? (
+            <PlaceholderComponent
+                is_empty={props.is_empty}
+                empty_message_component={EmptyTradeHistoryMessage}
+                component_icon={props.component_icon}
+                localized_message={localize('You have no open positions yet.')}
+            />
+        ) : (
+            props.children
+        )}
+    </React.Fragment>
+);
+
+const MobileRowRenderer = ({ row, is_footer, columns_map, server_time, onClickCancel, onClickSell, measure }) => {
+    React.useEffect(() => {
+        if (!is_footer) {
+            measure();
+        }
+    }, [row.contract_info?.underlying, measure, is_footer]);
+
+    if (is_footer) {
+        return (
+            <>
+                <div className='open-positions__data-list-footer--content'>
+                    <div>
+                        <DataList.Cell row={row} column={columns_map.purchase} />
+                        <DataList.Cell row={row} column={columns_map.payout} />
+                    </div>
+                    <div>
+                        <DataList.Cell
+                            className='data-list__row-cell--amount'
+                            row={row}
+                            column={columns_map.indicative}
+                        />
+                        <DataList.Cell className='data-list__row-cell--amount' row={row} column={columns_map.profit} />
+                    </div>
+                </div>
+            </>
+        );
+    }
+
+    const { contract_info, contract_update, type, is_sell_requested } = row;
+    const { currency, status, date_expiry, date_start } = contract_info;
+    const duration_type = getContractDurationType(contract_info.longcode);
+    const progress_value = getTimePercentage(server_time, date_start, date_expiry) / 100;
+
+    if (isMultiplierContract(type)) {
+        return (
+            <PositionsCard
+                contract_info={contract_info}
+                contract_update={contract_update}
+                currency={currency}
+                is_multiplier
+                is_link_disabled
+                onClickCancel={onClickCancel}
+                onClickSell={onClickSell}
+                server_time={server_time}
+                status={status}
+            />
+        );
+    }
+
+    return (
+        <>
+            <div className='data-list__row'>
+                <DataList.Cell row={row} column={columns_map.type} />
+                <ProgressBar label={duration_type} value={progress_value} />
+            </div>
+            <div className='data-list__row'>
+                <DataList.Cell row={row} column={columns_map.reference} />
+                <DataList.Cell className='data-list__row-cell--amount' row={row} column={columns_map.currency} />
+            </div>
+            <div className='data-list__row'>
+                <DataList.Cell row={row} column={columns_map.purchase} />
+                <DataList.Cell className='data-list__row-cell--amount' row={row} column={columns_map.indicative} />
+            </div>
+            <div className='data-list__row'>
+                <DataList.Cell row={row} column={columns_map.payout} />
+                <DataList.Cell className='data-list__row-cell--amount' row={row} column={columns_map.profit} />
+            </div>
+            <div className='data-list__row-divider' />
+            <div className='data-list__row'>
+                <ContractCard.Sell
+                    contract_info={contract_info}
+                    is_sell_requested={is_sell_requested}
+                    getCardLabels={getCardLabels}
+                    onClickSell={onClickSell}
+                />
+            </div>
+        </>
+    );
+};
+
+export const OpenPositionsTable = ({
+    className,
+    columns,
+    component_icon,
+    currency,
+    active_positions,
+    is_loading,
+    getRowAction,
+    mobileRowRenderer,
+    preloaderCheck,
+    row_size,
+    totals,
+}) => (
+    <React.Fragment>
+        {is_loading ? (
+            <PlaceholderComponent
+                is_loading={is_loading}
+                empty_message_component={EmptyTradeHistoryMessage}
+                component_icon={component_icon}
+                localized_message={localize('You have no open positions yet.')}
+            />
+        ) : (
+            currency && (
+                <div className='reports__content'>
+                    <DesktopWrapper>
+                        <EmptyPlaceholderWrapper
+                            component_icon={component_icon}
+                            is_empty={active_positions.length === 0}
+                        >
+                            <DataTable
+                                className={className}
+                                columns={columns}
+                                preloaderCheck={preloaderCheck}
+                                footer={totals}
+                                data_source={active_positions}
+                                getRowAction={getRowAction}
+                                getRowSize={() => row_size}
+                                content_loader={ReportsTableRowLoader}
+                            >
+                                <PlaceholderComponent is_loading={is_loading} />
+                            </DataTable>
+                        </EmptyPlaceholderWrapper>
+                    </DesktopWrapper>
+                    <MobileWrapper>
+                        <EmptyPlaceholderWrapper
+                            component_icon={component_icon}
+                            is_empty={active_positions.length === 0}
+                        >
+                            <DataList
+                                className={className}
+                                data_source={active_positions}
+                                footer={totals}
+                                rowRenderer={mobileRowRenderer}
+                                getRowAction={getRowAction}
+                                row_gap={8}
+                            >
+                                <PlaceholderComponent is_loading={is_loading} />
+                            </DataList>
+                        </EmptyPlaceholderWrapper>
+                    </MobileWrapper>
+                </div>
+            )
+        )}
+    </React.Fragment>
+);
+
+const getRowAction = row_obj =>
+    row_obj.is_unsupported
+        ? {
+              component: (
+                  <Localize
+                      i18n_default_text='This trade type is currently not supported on {{website_name}}. Please go to <0>Binary.com</0> for details.'
+                      values={{
+                          website_name,
+                      }}
+                      components={[
+                          <a
+                              key={0}
+                              className='link link--orange'
+                              rel='noopener noreferrer'
+                              target='_blank'
+                              href={urlFor('user/portfoliows', { legacy: true })}
+                          />,
+                      ]}
+                  />
+              ),
+          }
+        : getContractPath(row_obj.id);
+
+/*
+ * After refactoring transactionHandler for creating positions,
+ * purchase property in contract positions object is somehow NaN or undefined in the first few responses.
+ * So we set it to true in these cases to show a preloader for the data-table-row until the correct value is set.
+ */
+const isPurchaseReceived = item => isNaN(item.purchase) || !item.purchase;
+
+const getOpenPositionsTotals = (active_positions_filtered, is_multiplier_selected) => {
+    let totals;
+
+    if (is_multiplier_selected) {
+        let ask_price = 0;
+        let profit = 0;
+        let buy_price = 0;
+        let bid_price = 0;
+        let purchase = 0;
+
+        active_positions_filtered.forEach(portfolio_pos => {
+            buy_price += +portfolio_pos.contract_info.buy_price;
+            bid_price += +portfolio_pos.contract_info.bid_price;
+            purchase += +portfolio_pos.purchase;
+            if (portfolio_pos.contract_info) {
+                profit += getTotalProfit(portfolio_pos.contract_info);
+
+                if (portfolio_pos.contract_info.cancellation) {
+                    ask_price += portfolio_pos.contract_info.cancellation.ask_price || 0;
+                }
+            }
+        });
+        totals = {
+            contract_info: {
+                profit,
+                buy_price,
+                bid_price,
+            },
+            purchase,
+        };
+
+        if (ask_price > 0) {
+            totals.contract_info.cancellation = {
+                ask_price,
+            };
+        }
+    } else {
+        let indicative = 0;
+        let purchase = 0;
+        let profit_loss = 0;
+        let payout = 0;
+
+        active_positions_filtered?.forEach(portfolio_pos => {
+            indicative += +portfolio_pos.indicative;
+            purchase += +portfolio_pos.purchase;
+            profit_loss += portfolio_pos.profit_loss;
+            payout += portfolio_pos.payout;
+        });
+        totals = {
+            indicative,
+            purchase,
+            profit_loss,
+            payout,
+        };
+    }
+    return totals;
+};
+
+const OpenPositions = ({
+    active_positions,
+    component_icon,
+    currency,
+    error,
+    getPositionById,
+    is_loading,
+    is_multiplier,
+    NotificationMessages,
+    onClickCancel,
+    onClickSell,
+    onMount,
+    server_time,
+}) => {
+    const [active_index, setActiveIndex] = React.useState(is_multiplier ? 1 : 0);
+    // Tabs should be visible only when there is at least one active multiplier contract
+    const [has_multiplier_contract, setMultiplierContract] = React.useState(false);
+    const previous_active_positions = usePrevious(active_positions);
+
+    React.useEffect(() => {
+        /*
+         * For mobile, we show portfolio stepper in header even for reports pages.
+         * `onMount` in portfolio store will be invoked from portfolio stepper component in `trade-header-extensions.jsx`
+         */
+        if (!isMobile()) onMount();
+
+        checkForMultiplierContract();
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    React.useEffect(() => {
+        checkForMultiplierContract(previous_active_positions);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [previous_active_positions]);
+
+    const checkForMultiplierContract = (prev_active_positions = []) => {
+        if (!has_multiplier_contract && active_positions !== prev_active_positions) {
+            setMultiplierContract(active_positions.some(p => isMultiplierContract(p.contract_info?.contract_type)));
+        }
+    };
+
+    const setActiveTabIndex = index => setActiveIndex(index);
+
+    if (error) return <p>{error}</p>;
+
+    const is_multiplier_selected = has_multiplier_contract && active_index === 1;
+    const active_positions_filtered = active_positions?.filter(p => {
+        if (p.contract_info) {
+            return is_multiplier_selected
+                ? isMultiplierContract(p.contract_info.contract_type)
+                : !isMultiplierContract(p.contract_info.contract_type);
+        }
+        return true;
+    });
+
+    const active_positions_filtered_totals = getOpenPositionsTotals(active_positions_filtered, is_multiplier_selected);
+
+    const columns = is_multiplier_selected
+        ? getMultiplierOpenPositionsColumnsTemplate({
+              currency,
+              onClickCancel,
+              onClickSell,
+              getPositionById,
+              server_time,
+          })
+        : getOpenPositionsColumnsTemplate(currency);
+
+    const columns_map = columns.reduce((map, item) => {
+        map[item.col_index] = item;
+        return map;
+    }, {});
+
+    const mobileRowRenderer = props => (
+        <MobileRowRenderer
+            {...props}
+            columns_map={columns_map}
+            server_time={server_time}
+            onClickCancel={onClickCancel}
+            onClickSell={onClickSell}
+        />
+    );
+
+    const shared_props = {
+        active_positions: active_positions_filtered,
+        component_icon,
+        currency,
+        is_loading,
+        mobileRowRenderer,
+        getRowAction,
+        preloaderCheck: isPurchaseReceived,
+        totals: active_positions_filtered_totals,
+    };
+
+    return (
+        <React.Fragment>
+            <NotificationMessages />
+            {has_multiplier_contract ? (
+                <Tabs
+                    active_index={active_index}
+                    className='open-positions'
+                    onTabItemClick={setActiveTabIndex}
+                    top
+                    header_fit_content={!isMobile()}
+                >
+                    <div label={localize('Options')}>
+                        <OpenPositionsTable
+                            className='open-positions'
+                            columns={columns}
+                            {...shared_props}
+                            row_size={isMobile() ? 5 : 63}
+                        />
+                    </div>
+                    <div label={localize('Multipliers')}>
+                        <OpenPositionsTable
+                            className='open-positions-multiplier open-positions'
+                            is_multiplier_tab
+                            columns={columns}
+                            row_size={isMobile() ? 3 : 68}
+                            {...shared_props}
+                        />
+                    </div>
+                </Tabs>
+            ) : (
+                <OpenPositionsTable
+                    className='open-positions'
+                    columns={columns}
+                    {...shared_props}
+                    row_size={isMobile() ? 5 : 63}
+                />
+            )}
+        </React.Fragment>
+    );
+};
+
+OpenPositions.propTypes = {
+    active_positions: MobxPropTypes.arrayOrObservableArray,
+    component_icon: PropTypes.string,
+    currency: PropTypes.string,
+    error: PropTypes.string,
+    getPositionById: PropTypes.func,
+    is_loading: PropTypes.bool,
+    is_multiplier: PropTypes.bool,
+    NotificationMessages: PropTypes.func,
+    onClickCancel: PropTypes.func,
+    onClickSell: PropTypes.func,
+    onMount: PropTypes.func,
+    server_time: PropTypes.object,
+};
+
+export default connect(({ modules, client, common, ui }) => ({
+    active_positions: modules.portfolio.active_positions,
+    currency: client.currency,
+    error: modules.portfolio.error,
+    getPositionById: modules.portfolio.getPositionById,
+    is_loading: modules.portfolio.is_loading,
+    is_multiplier: modules.trade.is_multiplier,
+    NotificationMessages: ui.notification_messages_ui,
+    onClickCancel: modules.portfolio.onClickCancel,
+    onClickSell: modules.portfolio.onClickSell,
+    onMount: modules.portfolio.onMount,
+    server_time: common.server_time,
+}))(withRouter(OpenPositions));
diff --git a/packages/reports/src/Containers/profit-table.jsx b/packages/reports/src/Containers/profit-table.jsx
new file mode 100644
index 000000000000..9469288002ca
--- /dev/null
+++ b/packages/reports/src/Containers/profit-table.jsx
@@ -0,0 +1,224 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { PropTypes as MobxPropTypes } from 'mobx-react';
+import React from 'react';
+import { withRouter } from 'react-router';
+import { DesktopWrapper, MobileWrapper, DataList, DataTable } from '@deriv/components';
+import { extractInfoFromShortcode, isForwardStarting, urlFor, website_name } from '@deriv/shared';
+import { localize, Localize } from '@deriv/translations';
+import { ReportsTableRowLoader } from 'App/Components/Elements/ContentLoader';
+import CompositeCalendar from 'App/Components/Form/CompositeCalendar';
+import { getContractPath } from 'App/Components/Routes/helpers';
+import { getSupportedContracts } from 'Constants';
+import { connect } from 'Stores/connect';
+import EmptyTradeHistoryMessage from '../Components/empty-trade-history-message.jsx';
+import PlaceholderComponent from '../Components/placeholder-component.jsx';
+import { ReportsMeta } from '../Components/reports-meta.jsx';
+import { getProfitTableColumnsTemplate } from '../Constants/data-table-constants';
+
+const getRowAction = row_obj =>
+    getSupportedContracts()[extractInfoFromShortcode(row_obj.shortcode).category.toUpperCase()] &&
+    !isForwardStarting(row_obj.shortcode, row_obj.purchase_time_unix)
+        ? getContractPath(row_obj.contract_id)
+        : {
+              component: (
+                  <Localize
+                      i18n_default_text='This trade type is currently not supported on {{website_name}}. Please go to <0>Binary.com</0> for details.'
+                      values={{
+                          website_name,
+                      }}
+                      components={[
+                          <a
+                              key={0}
+                              className='link link--orange'
+                              rel='noopener noreferrer'
+                              target='_blank'
+                              href={urlFor('user/profit_tablews', { legacy: true })}
+                          />,
+                      ]}
+                  />
+              ),
+          };
+
+const ProfitTable = ({
+    component_icon,
+    currency,
+    data,
+    date_from,
+    date_to,
+    error,
+    filtered_date_range,
+    is_empty,
+    is_loading,
+    is_switching,
+    handleDateChange,
+    handleScroll,
+    has_selected_date,
+    onMount,
+    onUnmount,
+    totals,
+}) => {
+    React.useEffect(() => {
+        onMount();
+        return () => {
+            onUnmount();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    if (error) return <p>{error}</p>;
+
+    const filter_component = (
+        <CompositeCalendar
+            input_date_range={filtered_date_range}
+            onChange={handleDateChange}
+            from={date_from}
+            to={date_to}
+        />
+    );
+
+    const columns = getProfitTableColumnsTemplate(currency, data.length);
+    const columns_map = columns.reduce((map, item) => {
+        map[item.col_index] = item;
+        return map;
+    }, {});
+
+    const mobileRowRenderer = ({ row, is_footer }) => {
+        const duration_type = /^MULTUP|MULTDOWN/.test(row.shortcode) ? '' : row.duration_type;
+        const duration_classname = duration_type ? `duration-type__${duration_type.toLowerCase()}` : '';
+
+        if (is_footer) {
+            return (
+                <div className='data-list__row'>
+                    <DataList.Cell row={row} column={columns_map.action_type} is_footer={is_footer} />
+                    <DataList.Cell
+                        className='data-list__row-cell--amount'
+                        row={row}
+                        column={columns_map.profit_loss}
+                        is_footer={is_footer}
+                    />
+                </div>
+            );
+        }
+
+        return (
+            <>
+                <div className='data-list__row'>
+                    <DataList.Cell row={row} column={columns_map.action_type} />
+                    <div className={classNames('duration-type', duration_classname)}>
+                        <div className={classNames('duration-type__background', `${duration_classname}__background`)} />
+                        <span className={`${duration_classname}__label`}>{localize(duration_type)}</span>
+                    </div>
+                </div>
+                <div className='data-list__row'>
+                    <DataList.Cell row={row} column={columns_map.transaction_id} />
+                    <DataList.Cell className='data-list__row-cell--amount' row={row} column={columns_map.currency} />
+                </div>
+                <div className='data-list__row'>
+                    <DataList.Cell row={row} column={columns_map.purchase_time} />
+                    <DataList.Cell className='data-list__row-cell--amount' row={row} column={columns_map.buy_price} />
+                </div>
+                <div className='data-list__row'>
+                    <DataList.Cell row={row} column={columns_map.sell_time} />
+                    <DataList.Cell className='data-list__row-cell--amount' row={row} column={columns_map.sell_price} />
+                </div>
+                <div className='data-list__row'>
+                    <DataList.Cell row={row} column={columns_map.profit_loss} />
+                </div>
+            </>
+        );
+    };
+
+    return (
+        <React.Fragment>
+            <ReportsMeta filter_component={filter_component} className='profit-table__filter' />
+            {is_switching ? (
+                <PlaceholderComponent is_loading />
+            ) : (
+                <React.Fragment>
+                    {data.length === 0 || is_empty ? (
+                        <PlaceholderComponent
+                            is_loading={is_loading}
+                            has_selected_date={has_selected_date}
+                            is_empty={is_empty}
+                            empty_message_component={EmptyTradeHistoryMessage}
+                            component_icon={component_icon}
+                            localized_message={localize('You have no trading activity yet.')}
+                            localized_period_message={localize(
+                                "You've made no transactions of this type during this period."
+                            )}
+                        />
+                    ) : (
+                        <div className='reports__content'>
+                            <DesktopWrapper>
+                                <DataTable
+                                    className='profit-table'
+                                    data_source={data}
+                                    columns={columns}
+                                    onScroll={handleScroll}
+                                    footer={totals}
+                                    is_empty={is_empty}
+                                    getRowAction={getRowAction}
+                                    getRowSize={() => 63}
+                                    content_loader={ReportsTableRowLoader}
+                                >
+                                    <PlaceholderComponent is_loading={is_loading} />
+                                </DataTable>
+                            </DesktopWrapper>
+                            <MobileWrapper>
+                                <DataList
+                                    className='profit-table'
+                                    data_source={data}
+                                    rowRenderer={mobileRowRenderer}
+                                    getRowAction={getRowAction}
+                                    onScroll={handleScroll}
+                                    footer={totals}
+                                    row_gap={8}
+                                >
+                                    <PlaceholderComponent is_loading={is_loading} />
+                                </DataList>
+                            </MobileWrapper>
+                        </div>
+                    )}
+                </React.Fragment>
+            )}
+        </React.Fragment>
+    );
+};
+
+ProfitTable.propTypes = {
+    component_icon: PropTypes.string,
+    currency: PropTypes.string,
+    data: MobxPropTypes.arrayOrObservableArray,
+    date_from: PropTypes.number,
+    date_to: PropTypes.number,
+    error: PropTypes.string,
+    filtered_date_range: PropTypes.object,
+    is_empty: PropTypes.bool,
+    is_loading: PropTypes.bool,
+    is_switching: PropTypes.bool,
+    handleDateChange: PropTypes.func,
+    handleScroll: PropTypes.func,
+    has_selected_date: PropTypes.bool,
+    onMount: PropTypes.func,
+    onUnmount: PropTypes.func,
+    totals: PropTypes.object,
+};
+
+export default connect(({ modules, client }) => ({
+    currency: client.currency,
+    data: modules.profit_table.data,
+    date_from: modules.profit_table.date_from,
+    date_to: modules.profit_table.date_to,
+    error: modules.profit_table.error,
+    filtered_date_range: modules.profit_table.filtered_date_range,
+    is_empty: modules.profit_table.is_empty,
+    is_loading: modules.profit_table.is_loading,
+    is_switching: client.is_switching,
+    handleDateChange: modules.profit_table.handleDateChange,
+    handleScroll: modules.profit_table.handleScroll,
+    has_selected_date: modules.profit_table.has_selected_date,
+    onMount: modules.profit_table.onMount,
+    onUnmount: modules.profit_table.onUnmount,
+    totals: modules.profit_table.totals,
+}))(withRouter(ProfitTable));
diff --git a/packages/reports/src/Containers/reports.jsx b/packages/reports/src/Containers/reports.jsx
new file mode 100644
index 000000000000..871bb6307a27
--- /dev/null
+++ b/packages/reports/src/Containers/reports.jsx
@@ -0,0 +1,131 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import {
+    Div100vhContainer,
+    VerticalTab,
+    DesktopWrapper,
+    MobileWrapper,
+    FadeWrapper,
+    PageOverlay,
+    SelectNative,
+    Loading,
+} from '@deriv/components';
+import { getSelectedRoute } from '@deriv/shared';
+import { localize } from '@deriv/translations';
+import { connect } from 'Stores/connect';
+import 'Sass/app/modules/reports.scss';
+
+const Reports = ({
+    history,
+    is_logged_in,
+    is_logging_in,
+    is_visible,
+    location,
+    routeBackInApp,
+    routes,
+    setTabIndex,
+    setVisibilityRealityCheck,
+    tab_index,
+    toggleReports,
+}) => {
+    React.useEffect(() => {
+        toggleReports(true);
+
+        return () => {
+            setVisibilityRealityCheck(1);
+            toggleReports(false);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const onClickClose = () => routeBackInApp(history);
+
+    const handleRouteChange = e => history.push(e.target.value);
+
+    const menu_options = () => {
+        const options = [];
+
+        routes.forEach(route => {
+            options.push({
+                default: route.default,
+                icon: route.icon_component,
+                label: route.getTitle(),
+                value: route.component,
+                path: route.path,
+            });
+        });
+
+        return options;
+    };
+
+    const selected_route = getSelectedRoute({ routes, pathname: location.pathname });
+
+    if (!is_logged_in && is_logging_in) {
+        return <Loading is_fullscreen />;
+    }
+    return (
+        <FadeWrapper is_visible={is_visible} className='reports-page-wrapper' keyname='reports-page-wrapper'>
+            <div className='reports'>
+                <PageOverlay header={localize('Reports')} onClickClose={onClickClose}>
+                    <DesktopWrapper>
+                        <VerticalTab
+                            alignment='center'
+                            id='report'
+                            is_floating
+                            classNameHeader='reports__tab-header'
+                            current_path={location.pathname}
+                            is_routed
+                            is_full_width
+                            setVerticalTabIndex={setTabIndex}
+                            vertical_tab_index={selected_route.default ? 0 : tab_index}
+                            list={menu_options()}
+                        />
+                    </DesktopWrapper>
+                    <MobileWrapper>
+                        <Div100vhContainer className='reports__mobile-wrapper' height_offset='80px'>
+                            <SelectNative
+                                className='reports__route-selection'
+                                list_items={menu_options().map(option => ({
+                                    text: option.label,
+                                    value: option.path,
+                                }))}
+                                value={selected_route.path}
+                                should_show_empty_option={false}
+                                onChange={handleRouteChange}
+                            />
+                            {selected_route && (
+                                <selected_route.component component_icon={selected_route.icon_component} />
+                            )}
+                        </Div100vhContainer>
+                    </MobileWrapper>
+                </PageOverlay>
+            </div>
+        </FadeWrapper>
+    );
+};
+
+Reports.propTypes = {
+    history: PropTypes.object,
+    is_logged_in: PropTypes.bool,
+    is_logging_in: PropTypes.bool,
+    is_visible: PropTypes.bool,
+    location: PropTypes.object,
+    routeBackInApp: PropTypes.func,
+    routes: PropTypes.arrayOf(PropTypes.object),
+    setTabIndex: PropTypes.func,
+    setVisibilityRealityCheck: PropTypes.func,
+    tab_index: PropTypes.number,
+    toggleReports: PropTypes.func,
+};
+
+export default connect(({ client, common, ui }) => ({
+    is_logged_in: client.is_logged_in,
+    is_logging_in: client.is_logging_in,
+    is_visible: ui.is_reports_visible,
+    routeBackInApp: common.routeBackInApp,
+    setVisibilityRealityCheck: client.setVisibilityRealityCheck,
+    setTabIndex: ui.setReportsTabIndex,
+    tab_index: ui.reports_route_tab_index,
+    toggleReports: ui.toggleReports,
+}))(withRouter(Reports));
diff --git a/packages/reports/src/Containers/routes.jsx b/packages/reports/src/Containers/routes.jsx
new file mode 100644
index 000000000000..5bc21076f20d
--- /dev/null
+++ b/packages/reports/src/Containers/routes.jsx
@@ -0,0 +1,39 @@
+import { PropTypes as MobxPropTypes } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { withRouter } from 'react-router';
+import BinaryRoutes from '../Components/Routes';
+import { connect } from '../Stores/connect';
+import ErrorComponent from '../Components/Errors';
+
+const Routes = props => {
+    if (props.has_error) {
+        return <ErrorComponent {...props.error} />;
+    }
+
+    return (
+        <BinaryRoutes
+            is_logged_in={props.is_logged_in}
+            is_logging_in={props.is_logging_in}
+            passthrough={props.passthrough}
+        />
+    );
+};
+
+Routes.propTypes = {
+    error: MobxPropTypes.objectOrObservableObject,
+    has_error: PropTypes.bool,
+    is_logged_in: PropTypes.bool,
+    is_virtual: PropTypes.bool,
+};
+
+// need to wrap withRouter around connect
+// to prevent updates on <BinaryRoutes /> from being blocked
+export default withRouter(
+    connect(({ client, common }) => ({
+        is_logged_in: client.is_logged_in,
+        is_logging_in: client.is_logging_in,
+        error: common.error,
+        has_error: common.has_error,
+    }))(Routes)
+);
diff --git a/packages/reports/src/Containers/statement.jsx b/packages/reports/src/Containers/statement.jsx
new file mode 100644
index 000000000000..1d5b36935b9d
--- /dev/null
+++ b/packages/reports/src/Containers/statement.jsx
@@ -0,0 +1,282 @@
+import { PropTypes as MobxPropTypes } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import { DesktopWrapper, MobileWrapper, DataList, DataTable, Text, Clipboard } from '@deriv/components';
+import { extractInfoFromShortcode, isForwardStarting, urlFor, website_name } from '@deriv/shared';
+import { localize, Localize } from '@deriv/translations';
+import { ReportsTableRowLoader } from 'App/Components/Elements/ContentLoader';
+import { getContractPath } from 'App/Components/Routes/helpers';
+import { getSupportedContracts } from 'Constants';
+import { connect } from 'Stores/connect';
+import { getStatementTableColumnsTemplate } from '../Constants/data-table-constants';
+import PlaceholderComponent from '../Components/placeholder-component.jsx';
+import AccountStatistics from '../Components/account-statistics.jsx';
+import FilterComponent from '../Components/filter-component.jsx';
+import { ReportsMeta } from '../Components/reports-meta.jsx';
+import EmptyTradeHistoryMessage from '../Components/empty-trade-history-message.jsx';
+
+const DetailsComponent = ({ message = '', action_type = '' }) => {
+    const address_hash_match = /:\s([0-9a-zA-Z]+.{25,28})/gm.exec(message.split(/,\s/)[0]);
+    const address_hash = address_hash_match?.[1];
+    const blockchain_hash_match = /:\s([0-9a-zA-Z]+.{25,34})/gm.exec(message.split(/,\s/)[1]);
+    const blockchain_hash = blockchain_hash_match?.[1];
+
+    let messages = [message];
+
+    if (address_hash || blockchain_hash) {
+        const lines = message.split(/,\s/);
+        messages = lines.map((text, index) => {
+            if (index !== lines.length - 1) {
+                return `${text}, `;
+            }
+            return text;
+        });
+    }
+
+    return (
+        <Text as='div' size='xs' className='statement__row--detail-text' align='center'>
+            {messages.map((text, index) => {
+                return (
+                    <div key={text}>
+                        {text}
+                        {blockchain_hash && index === messages.length - 1 && (
+                            <Clipboard text_copy={blockchain_hash} popoverAlignment='top' />
+                        )}
+                        {address_hash && action_type === 'withdrawal' && index === messages.length - 1 && (
+                            <Clipboard text_copy={address_hash} popoverAlignment='top' />
+                        )}
+                    </div>
+                );
+            })}
+        </Text>
+    );
+};
+
+const getRowAction = row_obj => {
+    let action;
+    if (row_obj.id && ['buy', 'sell'].includes(row_obj.action_type)) {
+        action =
+            getSupportedContracts()[extractInfoFromShortcode(row_obj.shortcode).category.toUpperCase()] &&
+            !isForwardStarting(row_obj.shortcode, row_obj.purchase_time || row_obj.transaction_time)
+                ? getContractPath(row_obj.id)
+                : {
+                      component: (
+                          <Localize
+                              i18n_default_text='This trade type is currently not supported on {{website_name}}. Please go to <0>Binary.com</0> for details.'
+                              values={{
+                                  website_name,
+                              }}
+                              components={[
+                                  <a
+                                      key={0}
+                                      className='link link--orange'
+                                      rel='noopener noreferrer'
+                                      target='_blank'
+                                      href={urlFor('user/statementws', { legacy: true })}
+                                  />,
+                              ]}
+                          />
+                      ),
+                  };
+    } else if (row_obj.action_type === 'withdrawal') {
+        if (row_obj.withdrawal_details && row_obj.longcode) {
+            action = {
+                message: `${row_obj.withdrawal_details} ${row_obj.longcode}`,
+            };
+        } else {
+            action = {
+                message: row_obj.desc,
+            };
+        }
+    } else if (row_obj.desc && ['deposit', 'transfer', 'adjustment', 'hold', 'release'].includes(row_obj.action_type)) {
+        action = {
+            message: row_obj.desc,
+        };
+    }
+
+    if (action?.message) {
+        action.component = <DetailsComponent message={action.message} action_type={row_obj.action_type} />;
+    }
+
+    return action;
+};
+
+const Statement = ({
+    account_statistics,
+    action_type,
+    component_icon,
+    currency,
+    data,
+    date_from,
+    date_to,
+    error,
+    filtered_date_range,
+    handleDateChange,
+    handleFilterChange,
+    handleScroll,
+    has_selected_date,
+    is_empty,
+    is_loading,
+    is_mx_mlt,
+    is_switching,
+    is_virtual,
+    onMount,
+    onUnmount,
+}) => {
+    React.useEffect(() => {
+        onMount();
+        return () => {
+            onUnmount();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    if (error) return <p>{error}</p>;
+
+    const columns = getStatementTableColumnsTemplate(currency);
+    const columns_map = columns.reduce((map, item) => {
+        map[item.col_index] = item;
+        return map;
+    }, {});
+
+    const mobileRowRenderer = ({ row, passthrough }) => (
+        <React.Fragment>
+            <div className='data-list__row'>
+                <DataList.Cell row={row} column={columns_map.icon} passthrough={passthrough} />
+                <DataList.Cell row={row} column={columns_map.action_type} passthrough={passthrough} />
+            </div>
+            <div className='data-list__row'>
+                <DataList.Cell row={row} column={columns_map.refid} />
+                <DataList.Cell className='data-list__row-cell--amount' row={row} column={columns_map.currency} />
+            </div>
+            <div className='data-list__row'>
+                <DataList.Cell row={row} column={columns_map.date} />
+                <DataList.Cell className='data-list__row-cell--amount' row={row} column={columns_map.amount} />
+            </div>
+            <div className='data-list__row'>
+                <DataList.Cell row={row} column={columns_map.balance} />
+            </div>
+        </React.Fragment>
+    );
+
+    return (
+        <React.Fragment>
+            <ReportsMeta
+                className={is_mx_mlt ? undefined : 'reports__meta--statement'}
+                filter_component={
+                    <FilterComponent
+                        action_type={action_type}
+                        date_from={date_from}
+                        date_to={date_to}
+                        handleDateChange={handleDateChange}
+                        handleFilterChange={handleFilterChange}
+                        filtered_date_range={filtered_date_range}
+                    />
+                }
+                is_statement
+                optional_component={
+                    !is_switching &&
+                    is_mx_mlt && <AccountStatistics account_statistics={account_statistics} currency={currency} />
+                }
+            />
+            {is_switching ? (
+                <PlaceholderComponent is_loading />
+            ) : (
+                <React.Fragment>
+                    {data.length === 0 || is_empty ? (
+                        <PlaceholderComponent
+                            is_loading={is_loading}
+                            has_selected_date={has_selected_date}
+                            is_empty={is_empty}
+                            empty_message_component={EmptyTradeHistoryMessage}
+                            component_icon={component_icon}
+                            localized_message={localize('You have no transactions yet.')}
+                            localized_period_message={localize(
+                                "You've made no transactions of this type during this period."
+                            )}
+                        />
+                    ) : (
+                        <div className='reports__content'>
+                            <DesktopWrapper>
+                                <DataTable
+                                    className='statement'
+                                    columns={columns}
+                                    content_loader={ReportsTableRowLoader}
+                                    data_source={data}
+                                    getRowAction={row => getRowAction(row)}
+                                    onScroll={handleScroll}
+                                    passthrough={{
+                                        isTopUp: item => is_virtual && item.action === 'Deposit',
+                                    }}
+                                >
+                                    <PlaceholderComponent is_loading={is_loading} />
+                                </DataTable>
+                            </DesktopWrapper>
+                            <MobileWrapper>
+                                <DataList
+                                    className='statement'
+                                    data_source={data}
+                                    getRowAction={getRowAction}
+                                    onScroll={handleScroll}
+                                    rowRenderer={mobileRowRenderer}
+                                    row_gap={8}
+                                    passthrough={{
+                                        isTopUp: item => is_virtual && item.action === 'Deposit',
+                                    }}
+                                >
+                                    <PlaceholderComponent is_loading={is_loading} />
+                                </DataList>
+                            </MobileWrapper>
+                        </div>
+                    )}
+                </React.Fragment>
+            )}
+        </React.Fragment>
+    );
+};
+
+Statement.propTypes = {
+    action_type: PropTypes.string,
+    account_statistics: PropTypes.object,
+    component_icon: PropTypes.string,
+    currency: PropTypes.string,
+    data: MobxPropTypes.arrayOrObservableArray,
+    date_from: PropTypes.number,
+    date_to: PropTypes.number,
+    error: PropTypes.string,
+    filtered_date_range: PropTypes.object,
+    handleDateChange: PropTypes.func,
+    handleFilterChange: PropTypes.func,
+    handleScroll: PropTypes.func,
+    has_selected_date: PropTypes.bool,
+    is_empty: PropTypes.bool,
+    is_loading: PropTypes.bool,
+    is_mx_mlt: PropTypes.bool,
+    is_switching: PropTypes.bool,
+    is_virtual: PropTypes.bool,
+    onMount: PropTypes.func,
+    onUnmount: PropTypes.func,
+};
+
+export default connect(({ modules, client }) => ({
+    action_type: modules.statement.action_type,
+    account_statistics: modules.statement.account_statistics,
+    currency: client.currency,
+    data: modules.statement.data,
+    date_from: modules.statement.date_from,
+    date_to: modules.statement.date_to,
+    error: modules.statement.error,
+    filtered_date_range: modules.statement.filtered_date_range,
+    handleDateChange: modules.statement.handleDateChange,
+    handleFilterChange: modules.statement.handleFilterChange,
+    handleScroll: modules.statement.handleScroll,
+    has_selected_date: modules.statement.has_selected_date,
+    is_empty: modules.statement.is_empty,
+    is_loading: modules.statement.is_loading,
+    is_mx_mlt: client.standpoint.iom || client.standpoint.malta,
+    is_switching: client.is_switching,
+    is_virtual: client.is_virtual,
+    onMount: modules.statement.onMount,
+    onUnmount: modules.statement.onUnmount,
+}))(withRouter(Statement));
diff --git a/packages/reports/src/Helpers/market-underlying.js b/packages/reports/src/Helpers/market-underlying.js
new file mode 100644
index 000000000000..82363678b752
--- /dev/null
+++ b/packages/reports/src/Helpers/market-underlying.js
@@ -0,0 +1,44 @@
+import { getMarketNamesMap, getContractConfig } from 'Constants';
+import { localize } from '@deriv/translations';
+
+/**
+ * Fetch market information from shortcode
+ * @param shortcode: string
+ * @returns {{underlying: string, category: string}}
+ */
+
+// TODO: Combine with  extractInfoFromShortcode function in shared, both are currently used
+export const getMarketInformation = shortcode => {
+    const market_info = {
+        category: '',
+        underlying: '',
+    };
+
+    const pattern = new RegExp(
+        '^([A-Z]+)_((1HZ[0-9-V]+)|((CRASH|BOOM)[0-9\\d]+[A-Z]?)|(OTC_[A-Z0-9]+)|R_[\\d]{2,3}|[A-Z]+)'
+    );
+    const extracted = pattern.exec(shortcode);
+    if (extracted !== null) {
+        market_info.category = extracted[1].toLowerCase();
+        market_info.underlying = extracted[2];
+    }
+
+    return market_info;
+};
+
+export const getMarketName = underlying => (underlying ? getMarketNamesMap()[underlying.toUpperCase()] : null);
+
+export const getTradeTypeName = category => (category ? getContractConfig()[category.toUpperCase()].name : null);
+
+export const getContractDurationType = (longcode, shortcode) => {
+    if (/^MULTUP|MULTDOWN/.test(shortcode)) return '';
+
+    const duration_pattern = new RegExp('ticks|tick|seconds|minutes|minute|hour|hours');
+    const extracted = duration_pattern.exec(longcode);
+    if (extracted !== null) {
+        const duration_type = extracted[0];
+        const duration_text = duration_type[0].toUpperCase() + duration_type.slice(1);
+        return duration_text.endsWith('s') ? duration_text : `${duration_text}s`;
+    }
+    return localize('Days');
+};
diff --git a/packages/reports/src/Helpers/profit-loss.js b/packages/reports/src/Helpers/profit-loss.js
new file mode 100644
index 000000000000..095262006b56
--- /dev/null
+++ b/packages/reports/src/Helpers/profit-loss.js
@@ -0,0 +1 @@
+export const getProfitOrLoss = value => (+value.replace(/,/g, '') >= 0 ? 'profit' : 'loss');
diff --git a/packages/reports/src/Modules/Page404/Components/Page404.jsx b/packages/reports/src/Modules/Page404/Components/Page404.jsx
new file mode 100644
index 000000000000..981431ce85c8
--- /dev/null
+++ b/packages/reports/src/Modules/Page404/Components/Page404.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { PageError } from '@deriv/components';
+import { routes, getUrlBase } from '@deriv/shared';
+
+import { localize } from '@deriv/translations';
+
+const Page404 = () => (
+    <PageError
+        header={localize('We couldn’t find that page')}
+        messages={[
+            localize('You may have followed a broken link, or the page has moved to a new address.'),
+            localize('Error code: {{error_code}} page not found', { error_code: 404 }),
+        ]}
+        redirect_urls={[routes.trade]}
+        redirect_labels={[localize('Return to trade')]}
+        classNameImage='page-404__image'
+        image_url={getUrlBase('/public/images/common/404.png')}
+    />
+);
+
+export default Page404;
diff --git a/packages/reports/src/Modules/Page404/index.js b/packages/reports/src/Modules/Page404/index.js
new file mode 100644
index 000000000000..ccb77a533cf4
--- /dev/null
+++ b/packages/reports/src/Modules/Page404/index.js
@@ -0,0 +1 @@
+export default from './Components/Page404.jsx';
diff --git a/packages/reports/src/Stores/Modules/CFD/Helpers/cfd-config.ts b/packages/reports/src/Stores/Modules/CFD/Helpers/cfd-config.ts
new file mode 100644
index 000000000000..b037d6c92d05
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/CFD/Helpers/cfd-config.ts
@@ -0,0 +1,108 @@
+import { localize } from '@deriv/translations';
+
+export type TDxCompanies = ReturnType<typeof getDxCompanies>;
+export type TMtCompanies = ReturnType<typeof getMtCompanies>;
+
+export const getDxCompanies = () => {
+    const synthetic_config = {
+        account_type: '',
+        leverage: 500,
+        short_title: localize('Synthetic'),
+    };
+    const financial_config = {
+        account_type: 'financial',
+        leverage: 1000,
+        short_title: localize('Financial'),
+    };
+    return {
+        demo: {
+            synthetic: {
+                dxtrade_account_type: synthetic_config.account_type,
+                leverage: synthetic_config.leverage,
+                title: localize('Demo Synthetic'),
+                short_title: synthetic_config.short_title,
+            },
+            financial: {
+                dxtrade_account_type: financial_config.account_type,
+                leverage: financial_config.leverage,
+                title: localize('Demo Financial'),
+                short_title: financial_config.short_title,
+            },
+        },
+        real: {
+            synthetic: {
+                dxtrade_account_type: synthetic_config.account_type,
+                leverage: synthetic_config.leverage,
+                title: localize('Synthetic'),
+                short_title: synthetic_config.short_title,
+            },
+            financial: {
+                dxtrade_account_type: financial_config.account_type,
+                leverage: financial_config.leverage,
+                title: localize('Financial'),
+                short_title: financial_config.short_title,
+            },
+        },
+    };
+};
+
+export const getMtCompanies = (is_eu: boolean) => {
+    const synthetic_config = {
+        account_type: '',
+        leverage: 500,
+        short_title: localize('Synthetic'),
+    };
+    const financial_config = {
+        account_type: 'financial',
+        leverage: 1000,
+        short_title: is_eu ? localize('CFDs') : localize('Financial'),
+    };
+    const financial_stp_config = {
+        account_type: 'financial_stp',
+        leverage: 100,
+        short_title: localize('Financial STP'),
+    };
+
+    return {
+        demo: {
+            synthetic: {
+                mt5_account_type: synthetic_config.account_type,
+                leverage: synthetic_config.leverage,
+                title: localize('Demo Synthetic'),
+                short_title: synthetic_config.short_title,
+            },
+            financial: {
+                mt5_account_type: financial_config.account_type,
+                leverage: financial_config.leverage,
+                title: is_eu ? localize('Demo CFDs') : localize('Demo Financial'),
+                short_title: financial_config.short_title,
+            },
+            financial_stp: {
+                mt5_account_type: financial_stp_config.account_type,
+                leverage: financial_stp_config.leverage,
+                title: localize('Demo Financial STP'),
+                short_title: financial_stp_config.short_title,
+            },
+        },
+        real: {
+            synthetic: {
+                mt5_account_type: synthetic_config.account_type,
+                leverage: synthetic_config.leverage,
+                title: localize('Synthetic'),
+                short_title: synthetic_config.short_title,
+            },
+            financial: {
+                mt5_account_type: financial_config.account_type,
+                leverage: financial_config.leverage,
+                title: is_eu ? localize('CFDs') : localize('Financial'),
+                short_title: financial_config.short_title,
+            },
+            financial_stp: {
+                mt5_account_type: financial_stp_config.account_type,
+                leverage: financial_stp_config.leverage,
+                title: localize('Financial STP'),
+                short_title: financial_stp_config.short_title,
+            },
+        },
+    };
+};
diff --git a/packages/reports/src/Stores/Modules/CFD/cfd-store.js b/packages/reports/src/Stores/Modules/CFD/cfd-store.js
new file mode 100644
index 000000000000..ff125ca64f61
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/CFD/cfd-store.js
@@ -0,0 +1,514 @@
+import { action, computed, observable, runInAction } from 'mobx';
+import { getAccountListKey, getAccountTypeFields, CFD_PLATFORMS, WS } from '@deriv/shared';
+import BaseStore from 'Stores/base-store';
+import { getDxCompanies, getMtCompanies } from './Helpers/cfd-config';
+
+export default class CFDStore extends BaseStore {
+    @observable is_compare_accounts_visible = false;
+    @observable account_type = {
+        category: undefined,
+        type: undefined,
+    };
+
+    @observable new_account_response = {};
+    @observable map_type = {};
+    @observable has_cfd_error = false;
+    @observable error_message = '';
+
+    @observable is_cfd_success_dialog_enabled = false;
+    @observable is_mt5_financial_stp_modal_open = false;
+    @observable is_cfd_password_modal_enabled = false;
+    @observable is_cfd_reset_password_modal_enabled = false;
+
+    @observable is_cfd_pending_dialog_open = false;
+
+    @observable current_account = undefined; // this is a tmp value, don't rely on it, unless you set it first.
+
+    @observable error_type = undefined;
+
+    constructor({ root_store }) {
+        super({ root_store });
+    }
+
+    @computed
+    get has_cfd_account() {
+        return this.current_list.length > 0;
+    }
+
+    @computed
+    get account_title() {
+        return this.account_type.category
+            ? getMtCompanies(this.root_store.client.is_eu)[this.account_type.category][this.account_type.type].title
+            : '';
+    }
+
+    @computed
+    get current_list() {
+        const list = [];
+
+        this.root_store.client.mt5_login_list.forEach(account => {
+            // e.g. mt5.real.financial_stp
+            list[getAccountListKey(account, CFD_PLATFORMS.MT5)] = {
+                ...account,
+            };
+        });
+
+        this.root_store.client.dxtrade_accounts_list.forEach(account => {
+            // e.g. dxtrade.real.financial_stp
+            list[getAccountListKey(account, CFD_PLATFORMS.DXTRADE)] = {
+                ...account,
+            };
+        });
+
+        return list;
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    get mt5_companies() {
+        return getMtCompanies(this.root_store.client.is_eu);
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    get dxtrade_companies() {
+        return getDxCompanies();
+    }
+
+    @action.bound
+    onMount() {
+        this.checkShouldOpenAccount();
+        this.onRealAccountSignupEnd(this.realAccountSignupEndListener);
+        this.root_store.ui.is_cfd_page = true;
+    }
+
+    @action.bound
+    onUnmount() {
+        this.disposeRealAccountSignupEnd();
+        this.root_store.ui.is_cfd_page = false;
+    }
+
+    // other platforms can redirect to here using account switcher's `Add` account button
+    // so in that case we should open the corresponding account opening modal on load/component update
+    @action.bound
+    checkShouldOpenAccount() {
+        const account_type = sessionStorage.getItem('open_cfd_account_type');
+        if (account_type) {
+            const [category, type, set_password] = account_type.split('.');
+            this.createCFDAccount({ category, type, set_password });
+            sessionStorage.removeItem('open_cfd_account_type');
+        }
+    }
+
+    @action.bound
+    realAccountSignupEndListener() {
+        const post_signup = JSON.parse(sessionStorage.getItem('post_real_account_signup'));
+        if (post_signup && post_signup.category && post_signup.type) {
+            sessionStorage.removeItem('post_real_account_signup');
+            this.enableCFDPasswordModal();
+        }
+        return Promise.resolve();
+    }
+
+    @action.bound
+    resetFormErrors() {
+        this.error_message = '';
+        this.error_type = undefined;
+        this.has_cfd_error = false;
+    }
+
+    @action.bound
+    clearCFDError() {
+        this.resetFormErrors();
+        this.is_cfd_password_modal_enabled = false;
+    }
+
+    @action.bound
+    createCFDAccount({ category, type, set_password }) {
+        this.clearCFDError();
+        this.setAccountType({
+            category,
+            type,
+        });
+
+        if (category === 'real') {
+            this.realCFDSignup(set_password);
+        } else {
+            this.demoCFDSignup();
+        }
+    }
+
+    demoCFDSignup() {
+        this.enableCFDPasswordModal();
+    }
+
+    @action.bound
+    disableCFDPasswordModal() {
+        this.is_cfd_password_modal_enabled = false;
+    }
+
+    @action.bound
+    enableCFDPasswordModal() {
+        this.is_cfd_password_modal_enabled = true;
+    }
+
+    @action.bound
+    getName() {
+        const { first_name } = this.root_store.client.account_settings && this.root_store.client.account_settings;
+        const title = this.mt5_companies[this.account_type.category][this.account_type.type].title;
+
+        // First name is not set when user has no real account
+        return first_name ? [first_name, title].join(' ') : title;
+    }
+
+    @action.bound
+    openMT5Account(values) {
+        const name = this.getName();
+        const leverage = this.mt5_companies[this.account_type.category][this.account_type.type].leverage;
+        const type_request = getAccountTypeFields(this.account_type);
+
+        return WS.mt5NewAccount({
+            mainPassword: values.password,
+            email: this.root_store.client.email_address,
+            leverage,
+            name,
+            ...(values.server ? { server: values.server } : {}),
+            ...type_request,
+        });
+    }
+
+    @action.bound
+    openCFDAccount(values) {
+        return WS.tradingPlatformNewAccount({
+            password: values.password,
+            platform: values.platform,
+            account_type: this.account_type.category,
+            market_type: this.account_type.type,
+        });
+    }
+
+    @action.bound
+    beginRealSignupForMt5() {
+        sessionStorage.setItem('post_real_account_signup', JSON.stringify(this.account_type));
+        this.root_store.ui.openRealAccountSignup();
+    }
+
+    realCFDSignup(set_password) {
+        switch (this.account_type.type) {
+            case 'financial':
+                this.enableCFDPasswordModal();
+                break;
+            case 'financial_stp':
+                this.root_store.client.fetchResidenceList();
+                this.root_store.client.fetchStatesList();
+                this.root_store.client.fetchAccountSettings();
+                if (set_password) this.enableCFDPasswordModal();
+                else this.enableMt5FinancialStpModal();
+                break;
+            case 'synthetic':
+                this.enableCFDPasswordModal();
+                break;
+            default:
+                throw new Error('Cannot determine mt5 account signup.');
+        }
+    }
+
+    @action.bound
+    enableMt5FinancialStpModal() {
+        if (this.account_type.category === 'real' && this.account_type.type === 'financial_stp') {
+            this.is_mt5_financial_stp_modal_open = true;
+        }
+    }
+
+    @action.bound
+    setAccountType(account_type) {
+        this.account_type = account_type;
+    }
+
+    @action.bound
+    setCurrentAccount(data, meta) {
+        this.current_account = {
+            ...meta,
+            ...data,
+        };
+    }
+
+    @action.bound
+    setError(state, obj) {
+        this.has_cfd_error = state;
+        this.error_message = obj ? obj.message : '';
+        this.error_type = obj?.code ?? undefined;
+    }
+
+    @action.bound
+    setCFDNewAccount(cfd_new_account) {
+        this.new_account_response = cfd_new_account;
+    }
+
+    @action.bound
+    setCFDSuccessDialog(value) {
+        this.is_cfd_success_dialog_enabled = !!value;
+    }
+
+    @action.bound
+    storeProofOfAddress(file_uploader_ref, values, { setStatus }) {
+        return new Promise((resolve, reject) => {
+            setStatus({ msg: '' });
+            this.setState({ is_btn_loading: true });
+
+            WS.setSettings(values).then(data => {
+                if (data.error) {
+                    setStatus({ msg: data.error.message });
+                    reject(data);
+                } else {
+                    this.root_store.fetchAccountSettings();
+                    // force request to update settings cache since settings have been updated
+                    file_uploader_ref.current.upload().then(api_response => {
+                        if (api_response.warning) {
+                            setStatus({ msg: api_response.message });
+                            reject(api_response);
+                        } else {
+                            WS.authorized.storage.getAccountStatus().then(({ error, get_account_status }) => {
+                                if (error) {
+                                    reject(error);
+                                }
+                                const { identity } = get_account_status.authentication;
+                                const has_poi = !(identity && identity.status === 'none');
+                                resolve({
+                                    identity,
+                                    has_poi,
+                                });
+                            });
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    @action.bound
+    async getAccountStatus(platform) {
+        const should_load_account_status =
+            (platform === CFD_PLATFORMS.MT5 && this.root_store.client.is_mt5_password_not_set) ||
+            (platform === CFD_PLATFORMS.DXTRADE && this.root_store.client.is_dxtrade_password_not_set);
+
+        if (should_load_account_status) {
+            await WS.getAccountStatus();
+        }
+    }
+
+    @action.bound
+    async creatMT5Password(values, actions) {
+        const response = await WS.tradingPlatformPasswordChange({
+            new_password: values.password,
+            platform: CFD_PLATFORMS.MT5,
+        });
+        if (response.error) {
+            this.setError(true, response.error);
+            actions.resetForm({});
+            actions.setSubmitting(false);
+            actions.setStatus({ success: false });
+            return true;
+        }
+        return false;
+    }
+
+    @action.bound
+    async submitMt5Password(values, actions) {
+        if (this.root_store.client.is_mt5_password_not_set) {
+            const has_error = await this.creatMT5Password(values, actions);
+            if (has_error) return;
+        }
+
+        this.resetFormErrors();
+        const response = await this.openMT5Account(values);
+        if (!response.error) {
+            actions.setStatus({ success: true });
+            actions.setSubmitting(false);
+            this.setError(false);
+            this.setCFDSuccessDialog(true);
+            await this.getAccountStatus(CFD_PLATFORMS.MT5);
+
+            const mt5_login_list_response = await WS.authorized.mt5LoginList();
+            this.root_store.client.responseMt5LoginList(mt5_login_list_response);
+
+            WS.transferBetweenAccounts(); // get the list of updated accounts for transfer in cashier
+            this.root_store.client.responseMT5TradingServers(await WS.tradingServers(CFD_PLATFORMS.MT5));
+            this.setCFDNewAccount(response.mt5_new_account);
+        } else {
+            await this.getAccountStatus(CFD_PLATFORMS.MT5);
+            this.setError(true, response.error);
+            actions.resetForm({});
+            actions.setSubmitting(false);
+            actions.setStatus({ success: false });
+        }
+    }
+
+    @action.bound
+    async createCFDPassword(values, actions) {
+        const response = await WS.tradingPlatformPasswordChange({
+            new_password: values.password,
+            platform: CFD_PLATFORMS.DXTRADE,
+        });
+        if (response.error) {
+            this.setError(true, response.error);
+            actions.resetForm({});
+            actions.setSubmitting(false);
+            actions.setStatus({ success: false });
+            return true;
+        }
+
+        return false;
+    }
+
+    @action.bound
+    async submitCFDPassword(values, actions) {
+        if (this.root_store.client.is_dxtrade_password_not_set) {
+            const has_error = await this.createCFDPassword(values, actions);
+            if (has_error) return;
+        }
+
+        const response = await this.openCFDAccount(values);
+        if (!response.error) {
+            actions.setStatus({ success: true });
+            actions.setSubmitting(false);
+            this.setError(false);
+            this.setCFDSuccessDialog(true);
+            await this.getAccountStatus(CFD_PLATFORMS.DXTRADE);
+
+            const trading_platform_accounts_list_response = await WS.tradingPlatformAccountsList(values.platform);
+            this.root_store.client.responseTradingPlatformAccountsList(trading_platform_accounts_list_response);
+
+            WS.transferBetweenAccounts(); // get the list of updated accounts for transfer in cashier
+            this.setCFDNewAccount(response.trading_platform_new_account);
+        } else {
+            await this.getAccountStatus(CFD_PLATFORMS.DXTRADE);
+            this.setError(true, response.error);
+            actions.resetForm({});
+            actions.setSubmitting(false);
+            actions.setStatus({ success: false });
+        }
+    }
+
+    @action.bound
+    toggleCompareAccountsModal() {
+        this.is_compare_accounts_visible = !this.is_compare_accounts_visible;
+    }
+
+    @action.bound
+    disableMt5FinancialStpModal() {
+        this.is_mt5_financial_stp_modal_open = false;
+    }
+
+    @action.bound
+    async topUpVirtual(platform) {
+        this.root_store.ui.setTopUpInProgress(true);
+        let response;
+
+        switch (platform) {
+            case CFD_PLATFORMS.DXTRADE: {
+                response = await WS.authorized.send({
+                    trading_platform_deposit: 1,
+                    platform: CFD_PLATFORMS.DXTRADE,
+                    to_account: this.current_account.account_id,
+                });
+                break;
+            }
+            case CFD_PLATFORMS.MT5: {
+                response = await WS.authorized.mt5Deposit({
+                    to_mt5: this.current_account.login,
+                });
+                break;
+            }
+            default: {
+                response.error = 'Invalid platform';
+                break;
+            }
+        }
+
+        if (!response.error) {
+            let new_balance;
+            switch (platform) {
+                case CFD_PLATFORMS.DXTRADE: {
+                    await WS.authorized
+                        .tradingPlatformAccountsList(CFD_PLATFORMS.DXTRADE)
+                        .then(this.root_store.client.responseTradingPlatformAccountsList);
+                    new_balance = this.root_store.client.dxtrade_accounts_list.find(
+                        item => item.account_id === this.current_account.account_id
+                    )?.balance;
+                    break;
+                }
+                case CFD_PLATFORMS.MT5: {
+                    await WS.authorized.mt5LoginList().then(this.root_store.client.responseMt5LoginList);
+
+                    new_balance = this.root_store.client.mt5_login_list.find(
+                        item => item.login === this.current_account.login
+                    )?.balance;
+                    break;
+                }
+                default: {
+                    break;
+                }
+            }
+            runInAction(() => {
+                // Get new current account
+                this.root_store.ui.is_top_up_virtual_open = false;
+                this.current_account.balance = new_balance;
+            });
+            setTimeout(() => {
+                runInAction(() => {
+                    this.root_store.ui.is_top_up_virtual_success = true;
+                });
+            }, 250);
+        } else {
+            // eslint-disable-next-line no-console
+            console.error(response);
+        }
+        this.root_store.ui.setTopUpInProgress(false);
+    }
+
+    @action.bound
+    closeCFDPendingDialog() {
+        this.is_cfd_pending_dialog_open = false;
+    }
+
+    @action.bound
+    openPendingDialog() {
+        setTimeout(
+            runInAction(() => {
+                this.is_cfd_pending_dialog_open = true;
+            }),
+            300
+        );
+    }
+
+    @action.bound
+    sendVerifyEmail() {
+        return WS.verifyEmail(this.root_store.client.email, 'trading_platform_investor_password_reset');
+    }
+
+    @action.bound
+    setCFDPasswordResetModal(val) {
+        this.is_cfd_reset_password_modal_enabled = !!val;
+    }
+
+    static async changePassword({ login, old_password, new_password, password_type }) {
+        let response;
+
+        if (password_type === 'investor') {
+            response = await WS.authorized.tradingPlatformInvestorPasswordChange({
+                account_id: login,
+                old_password,
+                new_password,
+                platform: CFD_PLATFORMS.MT5,
+            });
+        } else {
+            response = await WS.authorized.tradingPlatformPasswordChange({
+                account_id: login,
+                old_password,
+                new_password,
+                platform: CFD_PLATFORMS.MT5,
+            });
+        }
+
+        return response?.error?.message;
+    }
+}
diff --git a/packages/reports/src/Stores/Modules/index.js b/packages/reports/src/Stores/Modules/index.js
new file mode 100644
index 000000000000..616d37bb7796
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/index.js
@@ -0,0 +1,7 @@
+import CFDStore from './CFD/cfd-store';
+
+export default class ModulesStore {
+    constructor(root_store) {
+        this.cfd = new CFDStore({ root_store });
+    }
+}
diff --git a/packages/reports/src/Stores/base-store.js b/packages/reports/src/Stores/base-store.js
new file mode 100644
index 000000000000..3a803f0c2a40
--- /dev/null
+++ b/packages/reports/src/Stores/base-store.js
@@ -0,0 +1,537 @@
+import { action, intercept, observable, reaction, toJS, when } from 'mobx';
+import { isProduction, isEmptyObject } from '@deriv/shared';
+
+import Validator from '../Utils/Validator';
+
+/**
+ * BaseStore class is the base class for all defined stores in the application. It handles some stuff such as:
+ *  1. Creating snapshot object from the store.
+ *  2. Saving the store's snapshot in local/session storage and keeping them in sync.
+ */
+export default class BaseStore {
+    /**
+     * An enum object to define LOCAL_STORAGE and SESSION_STORAGE
+     */
+    static STORAGES = Object.freeze({
+        LOCAL_STORAGE: Symbol('LOCAL_STORAGE'),
+        SESSION_STORAGE: Symbol('SESSION_STORAGE'),
+    });
+
+    @observable
+    validation_errors = {};
+
+    @observable
+    validation_rules = {};
+
+    preSwitchAccountDisposer = null;
+    pre_switch_account_listener = null;
+
+    switchAccountDisposer = null;
+    switch_account_listener = null;
+
+    logoutDisposer = null;
+    logout_listener = null;
+
+    clientInitDisposer = null;
+    client_init_listener = null;
+
+    networkStatusChangeDisposer = null;
+    network_status_change_listener = null;
+
+    themeChangeDisposer = null;
+    theme_change_listener = null;
+
+    realAccountSignupEndedDisposer = null;
+    real_account_signup_ended_listener = null;
+
+    @observable partial_fetch_time = 0;
+
+    /**
+     * Constructor of the base class that gets properties' name of child which should be saved in storages
+     *
+     * @param {Object} options - An object that contains the following properties:
+     *     @property {Object}   root_store - An object that contains the root store of the app.
+     *     @property {String[]} local_storage_properties - A list of properties' names that should be kept in localStorage.
+     *     @property {String[]} session_storage_properties - A list of properties' names that should be kept in sessionStorage.
+     *     @property {Object}   validation_rules - An object that contains the validation rules for each property of the store.
+     *     @property {String}   store_name - Explicit store name for browser application storage (to bypass minification)
+     */
+    constructor(options = {}) {
+        const { root_store, local_storage_properties, session_storage_properties, validation_rules, store_name } =
+            options;
+
+        Object.defineProperty(this, 'root_store', {
+            enumerable: false,
+            writable: true,
+        });
+        Object.defineProperty(this, 'local_storage_properties', {
+            enumerable: false,
+            writable: true,
+        });
+        Object.defineProperty(this, 'session_storage_properties', {
+            enumerable: false,
+            writable: true,
+        });
+
+        const has_local_or_session_storage =
+            (local_storage_properties && local_storage_properties.length) ||
+            (session_storage_properties && session_storage_properties.length);
+
+        if (has_local_or_session_storage) {
+            if (!store_name) {
+                throw new Error('store_name is required for local/session storage');
+            }
+
+            Object.defineProperty(this, 'store_name', {
+                value: store_name,
+                enumerable: false,
+                writable: false,
+            });
+        }
+
+        this.root_store = root_store;
+        this.local_storage_properties = local_storage_properties || [];
+        this.session_storage_properties = session_storage_properties || [];
+        this.setValidationRules(validation_rules);
+
+        this.setupReactionForLocalStorage();
+        this.setupReactionForSessionStorage();
+        this.retrieveFromStorage();
+    }
+
+    /**
+     * Returns an snapshot of the current store
+     *
+     * @param {String[]} properties - A list of properties' names that should be in the snapshot.
+     *
+     * @return {Object} Returns a cloned object of the store.
+     */
+    getSnapshot(properties) {
+        let snapshot = toJS(this);
+
+        if (!isEmptyObject(this.root_store)) {
+            snapshot.root_store = this.root_store;
+        }
+
+        if (properties && properties.length) {
+            snapshot = properties.reduce((result, p) => Object.assign(result, { [p]: snapshot[p] }), {});
+        }
+
+        return snapshot;
+    }
+
+    /**
+     * Sets up a reaction on properties which are mentioned in `local_storage_properties`
+     *  and invokes `saveToStorage` when there are any changes on them.
+     *
+     */
+    setupReactionForLocalStorage() {
+        if (this.local_storage_properties.length) {
+            reaction(
+                () => this.local_storage_properties.map(i => this[i]),
+                () => this.saveToStorage(this.local_storage_properties, BaseStore.STORAGES.LOCAL_STORAGE)
+            );
+        }
+    }
+
+    /**
+     * Sets up a reaction on properties which are mentioned in `session_storage_properties`
+     *  and invokes `saveToStorage` when there are any changes on them.
+     *
+     */
+    setupReactionForSessionStorage() {
+        if (this.session_storage_properties.length) {
+            reaction(
+                () => this.session_storage_properties.map(i => this[i]),
+                () => this.saveToStorage(this.session_storage_properties, BaseStore.STORAGES.SESSION_STORAGE)
+            );
+        }
+    }
+
+    /**
+     * Removes properties that are not passed from the snapshot of the store and saves it to the passed storage
+     *
+     * @param {String[]} properties - A list of the store's properties' names which should be saved in the storage.
+     * @param {Symbol}   storage    - A symbol object that defines the storage which the snapshot should be stored in it.
+     *
+     */
+    saveToStorage(properties, storage) {
+        const snapshot = JSON.stringify(this.getSnapshot(properties), (key, value) => {
+            if (value !== null) return value;
+            return undefined;
+        });
+
+        if (storage === BaseStore.STORAGES.LOCAL_STORAGE) {
+            localStorage.setItem(this.store_name, snapshot);
+        } else if (storage === BaseStore.STORAGES.SESSION_STORAGE) {
+            sessionStorage.setItem(this.store_name, snapshot);
+        }
+    }
+
+    /**
+     * Retrieves saved snapshot of the store and assigns to the current instance.
+     *
+     */
+    @action
+    retrieveFromStorage() {
+        const local_storage_snapshot = JSON.parse(localStorage.getItem(this.store_name, {}));
+        const session_storage_snapshot = JSON.parse(sessionStorage.getItem(this.store_name, {}));
+
+        const snapshot = { ...local_storage_snapshot, ...session_storage_snapshot };
+
+        Object.keys(snapshot).forEach(k => (this[k] = snapshot[k]));
+    }
+
+    /**
+     * Sets validation error messages for an observable property of the store
+     *
+     * @param {String} propertyName - The observable property's name
+     * @param [{String}] messages - An array of strings that contains validation error messages for the particular property.
+     *
+     */
+    @action
+    setValidationErrorMessages(propertyName, messages) {
+        const is_different = () =>
+            !!this.validation_errors[propertyName]
+                .filter(x => !messages.includes(x))
+                .concat(messages.filter(x => !this.validation_errors[propertyName].includes(x))).length;
+        if (!this.validation_errors[propertyName] || is_different()) {
+            this.validation_errors[propertyName] = messages;
+        }
+    }
+
+    /**
+     * Sets validation rules
+     *
+     * @param {object} rules
+     *
+     */
+    @action
+    setValidationRules(rules = {}) {
+        Object.keys(rules).forEach(key => {
+            this.addRule(key, rules[key]);
+        });
+    }
+
+    /**
+     * Adds rules to the particular property
+     *
+     * @param {String} property
+     * @param {String} rules
+     *
+     */
+    @action
+    addRule(property, rules) {
+        this.validation_rules[property] = rules;
+
+        intercept(this, property, change => {
+            this.validateProperty(property, change.newValue);
+            return change;
+        });
+    }
+
+    /**
+     * Validates a particular property of the store
+     *
+     * @param {String} property - The name of the property in the store
+     * @param {object} value    - The value of the property, it can be undefined.
+     *
+     */
+    @action
+    validateProperty(property, value) {
+        const trigger = this.validation_rules[property].trigger;
+        const inputs = { [property]: value !== undefined ? value : this[property] };
+        const validation_rules = { [property]: this.validation_rules[property].rules || [] };
+
+        if (!!trigger && Object.hasOwnProperty.call(this, trigger)) {
+            inputs[trigger] = this[trigger];
+            validation_rules[trigger] = this.validation_rules[trigger].rules || [];
+        }
+
+        const validator = new Validator(inputs, validation_rules, this);
+
+        validator.isPassed();
+
+        Object.keys(inputs).forEach(key => {
+            this.setValidationErrorMessages(key, validator.errors.get(key));
+        });
+    }
+
+    /**
+     * Validates all properties which validation rule has been set for.
+     *
+     */
+    @action
+    validateAllProperties() {
+        const validation_rules = Object.keys(this.validation_rules);
+        const validation_errors = Object.keys(this.validation_errors);
+
+        validation_rules.forEach(p => {
+            this.validateProperty(p, this[p]);
+        });
+
+        // Remove keys that are present in error, but not in rules:
+        validation_errors.forEach(error => {
+            if (!validation_rules.includes(error)) {
+                delete this.validation_errors[error];
+            }
+        });
+    }
+
+    @action.bound
+    onSwitchAccount(listener) {
+        if (listener) {
+            this.switch_account_listener = listener;
+
+            this.switchAccountDisposer = when(
+                () => this.root_store.client.switch_broadcast,
+                () => {
+                    try {
+                        const result = this.switch_account_listener();
+                        if (result && result.then && typeof result.then === 'function') {
+                            result.then(() => {
+                                this.root_store.client.switchEndSignal();
+                                this.onSwitchAccount(this.switch_account_listener);
+                            });
+                        } else {
+                            throw new Error('Switching account listeners are required to return a promise.');
+                        }
+                    } catch (error) {
+                        // there is no listener currently active. so we can just ignore the error raised from treating
+                        // a null object as a function. Although, in development mode, we throw a console error.
+                        if (!isProduction()) {
+                            console.error(error); // eslint-disable-line
+                        }
+                    }
+                }
+            );
+        }
+    }
+
+    @action.bound
+    onPreSwitchAccount(listener) {
+        if (listener) {
+            this.pre_switch_account_listener = listener;
+            this.preSwitchAccountDisposer = when(
+                () => this.root_store.client.pre_switch_broadcast,
+                () => {
+                    try {
+                        const result = this.pre_switch_account_listener();
+                        if (result && result.then && typeof result.then === 'function') {
+                            result.then(() => {
+                                this.root_store.client.setPreSwitchAccount(false);
+                                this.onPreSwitchAccount(this.pre_switch_account_listener);
+                            });
+                        } else {
+                            throw new Error('Pre-switch account listeners are required to return a promise.');
+                        }
+                    } catch (error) {
+                        // there is no listener currently active. so we can just ignore the error raised from treating
+                        // a null object as a function. Although, in development mode, we throw a console error.
+                        if (!isProduction()) {
+                            console.error(error); // eslint-disable-line
+                        }
+                    }
+                }
+            );
+        }
+    }
+
+    @action.bound
+    onLogout(listener) {
+        this.logoutDisposer = when(
+            () => this.root_store.client.has_logged_out,
+            async () => {
+                try {
+                    const result = this.logout_listener();
+                    if (result && result.then && typeof result.then === 'function') {
+                        result.then(() => {
+                            this.root_store.client.setLogout(false);
+                            this.onLogout(this.logout_listener);
+                        });
+                    } else {
+                        throw new Error('Logout listeners are required to return a promise.');
+                    }
+                } catch (error) {
+                    // there is no listener currently active. so we can just ignore the error raised from treating
+                    // a null object as a function. Although, in development mode, we throw a console error.
+                    if (!isProduction()) {
+                        console.error(error); // eslint-disable-line
+                    }
+                }
+            }
+        );
+        this.logout_listener = listener;
+    }
+
+    @action.bound
+    onClientInit(listener) {
+        this.clientInitDisposer = when(
+            () => this.root_store.client.initialized_broadcast,
+            async () => {
+                try {
+                    const result = this.client_init_listener();
+                    if (result && result.then && typeof result.then === 'function') {
+                        result.then(() => {
+                            this.root_store.client.setInitialized(false);
+                            this.onClientInit(this.client_init_listener);
+                        });
+                    } else {
+                        throw new Error('Client init listeners are required to return a promise.');
+                    }
+                } catch (error) {
+                    // there is no listener currently active. so we can just ignore the error raised from treating
+                    // a null object as a function. Although, in development mode, we throw a console error.
+                    if (!isProduction()) {
+                        console.error(error); // eslint-disable-line
+                    }
+                }
+            }
+        );
+        this.client_init_listener = listener;
+    }
+
+    @action.bound
+    onNetworkStatusChange(listener) {
+        this.networkStatusChangeDisposer = reaction(
+            () => this.root_store.common.is_network_online,
+            is_online => {
+                try {
+                    this.network_status_change_listener(is_online);
+                } catch (error) {
+                    // there is no listener currently active. so we can just ignore the error raised from treating
+                    // a null object as a function. Although, in development mode, we throw a console error.
+                    if (!isProduction()) {
+                        console.error(error); // eslint-disable-line
+                    }
+                }
+            }
+        );
+
+        this.network_status_change_listener = listener;
+    }
+
+    @action.bound
+    onThemeChange(listener) {
+        this.themeChangeDisposer = reaction(
+            () => this.root_store.ui.is_dark_mode_on,
+            is_dark_mode_on => {
+                try {
+                    this.theme_change_listener(is_dark_mode_on);
+                } catch (error) {
+                    // there is no listener currently active. so we can just ignore the error raised from treating
+                    // a null object as a function. Although, in development mode, we throw a console error.
+                    if (!isProduction()) {
+                        console.error(error); // eslint-disable-line
+                    }
+                }
+            }
+        );
+
+        this.theme_change_listener = listener;
+    }
+
+    @action.bound
+    onRealAccountSignupEnd(listener) {
+        this.realAccountSignupEndedDisposer = when(
+            () => this.root_store.ui.has_real_account_signup_ended,
+            () => {
+                try {
+                    const result = this.real_account_signup_ended_listener();
+                    if (result && result.then && typeof result.then === 'function') {
+                        result.then(() => {
+                            this.root_store.ui.setRealAccountSignupEnd(false);
+                            this.onRealAccountSignupEnd(this.real_account_signup_ended_listener);
+                        });
+                    } else {
+                        throw new Error('Real account signup listeners are required to return a promise.');
+                    }
+                } catch (error) {
+                    // there is no listener currently active. so we can just ignore the error raised from treating
+                    // a null object as a function. Although, in development mode, we throw a console error.
+                    if (!isProduction()) {
+                        console.error(error); // eslint-disable-line
+                    }
+                }
+            }
+        );
+
+        this.real_account_signup_ended_listener = listener;
+    }
+
+    @action.bound
+    disposePreSwitchAccount() {
+        if (typeof this.preSwitchAccountDisposer === 'function') {
+            this.preSwitchAccountDisposer();
+        }
+        this.pre_switch_account_listener = null;
+    }
+
+    @action.bound
+    disposeSwitchAccount() {
+        if (typeof this.switchAccountDisposer === 'function') {
+            this.switchAccountDisposer();
+        }
+        this.switch_account_listener = null;
+    }
+
+    @action.bound
+    disposeLogout() {
+        if (typeof this.logoutDisposer === 'function') {
+            this.logoutDisposer();
+        }
+        this.logout_listener = null;
+    }
+
+    @action.bound
+    disposeClientInit() {
+        if (typeof this.clientInitDisposer === 'function') {
+            this.clientInitDisposer();
+        }
+        this.client_init_listener = null;
+    }
+
+    @action.bound
+    disposeNetworkStatusChange() {
+        if (typeof this.networkStatusChangeDisposer === 'function') {
+            this.networkStatusChangeDisposer();
+        }
+        this.network_status_change_listener = null;
+    }
+
+    @action.bound
+    disposeThemeChange() {
+        if (typeof this.themeChangeDisposer === 'function') {
+            this.themeChangeDisposer();
+        }
+        this.theme_change_listener = null;
+    }
+
+    @action.bound
+    disposeRealAccountSignupEnd() {
+        if (typeof this.realAccountSignupEndedDisposer === 'function') {
+            this.realAccountSignupEndedDisposer();
+        }
+        this.real_account_signup_ended_listener = null;
+    }
+
+    @action.bound
+    onUnmount() {
+        this.disposePreSwitchAccount();
+        this.disposeSwitchAccount();
+        this.disposeLogout();
+        this.disposeClientInit();
+        this.disposeNetworkStatusChange();
+        this.disposeThemeChange();
+        this.disposeRealAccountSignupEnd();
+    }
+
+    @action.bound
+    assertHasValidCache(loginid, ...reactions) {
+        // account was changed when this was unmounted.
+        if (this.root_store.client.loginid !== loginid) {
+            reactions.forEach(act => act());
+            this.partial_fetch_time = false;
+        }
+    }
+}
diff --git a/packages/reports/src/Stores/connect.js b/packages/reports/src/Stores/connect.js
new file mode 100644
index 000000000000..4ef42c8d18b6
--- /dev/null
+++ b/packages/reports/src/Stores/connect.js
@@ -0,0 +1,31 @@
+import { useObserver } from 'mobx-react';
+import React from 'react';
+
+const isClassComponent = Component =>
+    !!(typeof Component === 'function' && Component.prototype && Component.prototype.isReactComponent);
+
+export const MobxContent = React.createContext(null);
+
+function injectStorePropsToComponent(propsToSelectFn, BaseComponent) {
+    const Component = own_props => {
+        const store = React.useContext(MobxContent);
+
+        let ObservedComponent = BaseComponent;
+
+        if (isClassComponent(BaseComponent)) {
+            const FunctionalWrapperComponent = props => <BaseComponent {...props} />;
+            ObservedComponent = FunctionalWrapperComponent;
+        }
+
+        return useObserver(() => ObservedComponent({ ...own_props, ...propsToSelectFn(store, own_props) }));
+    };
+
+    Component.displayName = BaseComponent.name;
+    return Component;
+}
+
+export const MobxContentProvider = ({ store, children }) => {
+    return <MobxContent.Provider value={{ ...store, mobxStores: store }}>{children}</MobxContent.Provider>;
+};
+
+export const connect = propsToSelectFn => Component => injectStorePropsToComponent(propsToSelectFn, Component);
diff --git a/packages/reports/src/Stores/index.js b/packages/reports/src/Stores/index.js
new file mode 100644
index 000000000000..fef448cd42cb
--- /dev/null
+++ b/packages/reports/src/Stores/index.js
@@ -0,0 +1,14 @@
+import ModulesStore from './Modules';
+
+export default class RootStore {
+    constructor(core_store) {
+        this.client = core_store.client;
+        this.common = core_store.common;
+        this.modules = new ModulesStore(this, core_store);
+        this.ui = core_store.ui;
+        this.gtm = core_store.gtm;
+        this.rudderstack = core_store.rudderstack;
+        this.pushwoosh = core_store.pushwoosh;
+        this.notifications = core_store.notifications;
+    }
+}
diff --git a/packages/reports/src/_common/__tests__/utility.js b/packages/reports/src/_common/__tests__/utility.js
new file mode 100644
index 000000000000..f138acbc03e1
--- /dev/null
+++ b/packages/reports/src/_common/__tests__/utility.js
@@ -0,0 +1,16 @@
+const expect = require('chai').expect;
+const Utility = require('../utility');
+
+describe('Utility', () => {
+    describe('.template()', () => {
+        it('works as expected', () => {
+            expect(Utility.template('abc [_1] abc', ['2'])).to.eq('abc 2 abc');
+            expect(Utility.template('[_1] [_2]', ['1', '2'])).to.eq('1 2');
+            expect(Utility.template('[_1] [_1]', ['1'])).to.eq('1 1');
+        });
+
+        it('does not replace twice', () => {
+            expect(Utility.template('[_1] [_2]', ['[_2]', 'abc'])).to.eq('[_2] abc');
+        });
+    });
+});
diff --git a/packages/reports/src/_common/base/server_time.js b/packages/reports/src/_common/base/server_time.js
new file mode 100644
index 000000000000..b639380b27a5
--- /dev/null
+++ b/packages/reports/src/_common/base/server_time.js
@@ -0,0 +1,25 @@
+const PromiseClass = require('../utility').PromiseClass;
+
+const ServerTime = (() => {
+    let clock_started = false;
+    const pending = new PromiseClass();
+    let common_store;
+
+    const init = store => {
+        if (!clock_started) {
+            common_store = store;
+            pending.resolve(common_store.server_time);
+            clock_started = true;
+        }
+    };
+
+    const get = () => (clock_started && common_store.server_time ? common_store.server_time.clone() : undefined);
+
+    return {
+        init,
+        get,
+        timePromise: () => (clock_started ? Promise.resolve(common_store.server_time) : pending.promise),
+    };
+})();
+
+module.exports = ServerTime;
diff --git a/packages/reports/src/_common/utility.js b/packages/reports/src/_common/utility.js
new file mode 100644
index 000000000000..5c20dc5c33e0
--- /dev/null
+++ b/packages/reports/src/_common/utility.js
@@ -0,0 +1,52 @@
+const template = (string, content) => {
+    let to_replace = content;
+    if (content && !Array.isArray(content)) {
+        to_replace = [content];
+    }
+    return string.replace(/\[_(\d+)]/g, (s, index) => to_replace[+index - 1]);
+};
+
+/**
+ * Creates a DOM element and adds any attributes to it.
+ *
+ * @param {String} tag_name: the tag to create, e.g. 'div', 'a', etc
+ * @param {Object} attributes: all the attributes to assign, e.g. { id: '...', class: '...', html: '...', ... }
+ * @return the created DOM element
+ */
+const createElement = (tag_name, attributes = {}) => {
+    const el = document.createElement(tag_name);
+    Object.keys(attributes).forEach(attr => {
+        const value = attributes[attr];
+        if (attr === 'text') {
+            el.textContent = value;
+        } else if (attr === 'html') {
+            el.html(value);
+        } else {
+            el.setAttribute(attr, value);
+        }
+    });
+    return el;
+};
+
+let static_hash;
+const getStaticHash = () => {
+    static_hash =
+        static_hash || (document.querySelector('script[src*="main"]').getAttribute('src') || '').split('.')[1];
+    return static_hash;
+};
+
+class PromiseClass {
+    constructor() {
+        this.promise = new Promise((resolve, reject) => {
+            this.reject = reject;
+            this.resolve = resolve;
+        });
+    }
+}
+
+module.exports = {
+    template,
+    createElement,
+    getStaticHash,
+    PromiseClass,
+};
diff --git a/packages/reports/src/app.jsx b/packages/reports/src/app.jsx
new file mode 100644
index 000000000000..1c4be2c3999c
--- /dev/null
+++ b/packages/reports/src/app.jsx
@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Routes from './Containers/routes.jsx';
+import { MobxContentProvider } from './Stores/connect';
+import initStore from './init-store'; // eslint-disable-line import/extensions
+
+const App = ({ passthrough }) => {
+    const [root_store] = React.useState(initStore(passthrough.root_store, passthrough.WS));
+
+    return (
+        <MobxContentProvider store={root_store}>
+            <React.Fragment>
+                <Routes />
+            </React.Fragment>
+        </MobxContentProvider>
+    );
+};
+
+App.propTypes = {
+    passthrough: PropTypes.shape({
+        root_store: PropTypes.object,
+        WS: PropTypes.object,
+    }),
+};
+
+export default App;
diff --git a/packages/reports/src/index.jsx b/packages/reports/src/index.jsx
new file mode 100644
index 000000000000..c5c2db91b385
--- /dev/null
+++ b/packages/reports/src/index.jsx
@@ -0,0 +1,14 @@
+import 'promise-polyfill';
+
+import 'event-source-polyfill';
+
+import React from 'react';
+import { makeLazyLoader } from '@deriv/shared';
+import { Loading } from '@deriv/components';
+
+const App = makeLazyLoader(
+    () => import(/* webpackChunkName: "reports-app", webpackPreload: true */ './app.jsx'),
+    () => <Loading />
+)();
+
+export default App;
diff --git a/packages/reports/src/init-store.js b/packages/reports/src/init-store.js
new file mode 100644
index 000000000000..71149f32bcd8
--- /dev/null
+++ b/packages/reports/src/init-store.js
@@ -0,0 +1,20 @@
+import { configure } from 'mobx';
+import RootStore from './Stores';
+import { setWebsocket } from '@deriv/shared';
+import ServerTime from '_common/base/server_time';
+
+configure({ enforceActions: 'observed' });
+
+let root_store;
+
+const initStore = (core_store, websocket) => {
+    if (root_store) return root_store;
+
+    ServerTime.init(core_store.common);
+    setWebsocket(websocket);
+    root_store = new RootStore(core_store);
+
+    return root_store;
+};
+
+export default initStore;
diff --git a/packages/reports/src/sass/app.scss b/packages/reports/src/sass/app.scss
new file mode 100644
index 000000000000..841cbe4696ac
--- /dev/null
+++ b/packages/reports/src/sass/app.scss
@@ -0,0 +1,38 @@
+// Layout
+@import 'app/_common/layout/trader-layouts';
+
+// Drawers
+@import 'app/_common/drawer/contract-drawer';
+@import 'app/_common/drawer/positions-drawer';
+@import 'app/_common/drawer/positions-modal-card';
+
+// Form
+@import 'app/_common/form/time-picker';
+
+// Components
+@import 'app/_common/components/amount';
+@import 'app/_common/components/allow-equals';
+//@import 'app/_common/components/calendar'; // TODO: [move-to-components] Calendar component should be moved
+@import 'app/_common/components/card-list';
+@import 'app/_common/components/contract-audit';
+@import 'app/_common/components/contract-replay';
+@import 'app/_common/components/contract-type-dialog';
+@import 'app/_common/components/contract-type-widget';
+@import 'app/_common/components/contract-type-list';
+@import 'app/_common/components/contract-type-info';
+@import 'app/_common/components/contract-type-no-result';
+//@import 'app/_common/components/date-picker'; // TODO: [move-to-components] Datepicker component should be moved
+@import 'app/_common/components/market-is-closed-overlay';
+@import 'app/_common/components/market-symbol-icon';
+@import 'app/_common/components/number-selector';
+@import 'app/_common/components/popconfirm';
+@import 'app/_common/components/purchase-button';
+@import 'app/_common/components/range-slider';
+@import 'app/_common/components/toggle-button';
+
+// Modules
+@import 'app/modules/contract';
+@import 'app/modules/contract/bottom-widgets';
+@import 'app/modules/portfolio';
+@import 'app/modules/smart-chart';
+@import 'app/modules/trading';
diff --git a/packages/reports/src/sass/app/_common/components/allow-equals.scss b/packages/reports/src/sass/app/_common/components/allow-equals.scss
new file mode 100644
index 000000000000..ea3d2b81384c
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/components/allow-equals.scss
@@ -0,0 +1,19 @@
+/** @define allow-equals */
+.allow-equals {
+    display: flex;
+    align-items: center;
+    position: relative;
+    margin-top: 0.6em;
+
+    &__label {
+        @include typeface(--paragraph-left-normal-black, none);
+        @include toEm(padding, 0 8px, 1.2em);
+        color: var(--text-general);
+        cursor: pointer;
+    }
+    @include mobile {
+        &__subtitle {
+            color: var(--text-less-prominent);
+        }
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/components/amount.scss b/packages/reports/src/sass/app/_common/components/amount.scss
new file mode 100644
index 000000000000..ab4916398f02
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/components/amount.scss
@@ -0,0 +1,8 @@
+.amount {
+    &--profit {
+        color: var(--text-profit-success);
+    }
+    &--loss {
+        color: var(--text-loss-danger);
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/components/card-list.scss b/packages/reports/src/sass/app/_common/components/card-list.scss
new file mode 100644
index 000000000000..9d4017837c29
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/components/card-list.scss
@@ -0,0 +1,20 @@
+/** @define card-list */
+.card-list {
+    overflow: auto; // fixes margin collapse
+
+    & &__card {
+        // keep & for higher specificity
+        display: block;
+        text-decoration: none;
+        max-width: 450px;
+        margin: 0.6em auto;
+        border-radius: 4px;
+        background-color: var(--general-main-2);
+        border: 1px solid var(--general-main-2);
+        color: var(--text-prominent);
+
+        &-link {
+            cursor: pointer;
+        }
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/components/composite-calendar.scss b/packages/reports/src/sass/app/_common/components/composite-calendar.scss
new file mode 100644
index 000000000000..e05ee710e3a6
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/components/composite-calendar.scss
@@ -0,0 +1,183 @@
+/* @define .composite-calendar; weak; */
+.composite-calendar {
+    display: grid;
+    grid-template-columns: 128px minmax(min-content, 280px) minmax(min-content, 280px);
+    position: absolute;
+    top: 36px;
+    right: 0;
+    z-index: 99;
+    border-radius: $BORDER_RADIUS;
+    background-color: var(--general-main-2);
+    box-shadow: 0 2px 16px 8px var(--shadow-menu);
+
+    .composite-wrapper {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background-color: var(--general-main-1);
+        z-index: 98;
+    }
+    &__input-fields {
+        display: flex;
+        border-radius: $BORDER_RADIUS;
+        width: 100%;
+
+        &--fill {
+            width: 100%;
+
+            & > .dc-input-field {
+                width: 100%;
+            }
+        }
+        & > .dc-input-field {
+            margin: 0;
+            width: 100%;
+
+            @include desktop {
+                max-width: 17.6rem;
+            }
+
+            @include mobile {
+                .inline-icon {
+                    top: 1.2rem;
+                }
+            }
+
+            @include colorIcon(var(--text-prominent));
+
+            & .input {
+                height: 3.2rem;
+                background-color: var(--fill-normal);
+                border: 1px solid var(--border-normal);
+                appearance: none;
+
+                @include mobile {
+                    height: 4rem;
+                    text-align: left;
+                    padding-left: 3rem;
+                }
+
+                &:hover {
+                    border-color: var(--border-hover);
+                }
+                &:focus,
+                &:active {
+                    border-color: var(--border-active);
+                }
+                &::placeholder {
+                    color: var(--text-general);
+                }
+            }
+        }
+        & > .dc-input-field:not(:first-child) {
+            margin-left: 8px;
+        }
+    }
+    & > .first-month,
+    & > .second-month {
+        .dc-calendar__body {
+            border-bottom: none;
+        }
+    }
+    &__prepopulated-list {
+        padding-top: 50px;
+        @include typeface(--paragraph-center-normal-black);
+        color: var(--text-prominent);
+        background: var(--state-normal);
+
+        &--is-active {
+            color: var(--text-prominent);
+            background-color: var(--state-active);
+            font-weight: bold;
+        }
+        & li {
+            cursor: pointer;
+            padding: 6px 6px 6px 16px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+
+            &:hover:not(.composite-calendar__prepopulated-list--is-active) {
+                background: var(--state-hover);
+            }
+        }
+    }
+}
+
+/* @define composite-calendar-modal; weak; */
+.composite-calendar-modal {
+    @include mobile {
+        &__actions {
+            display: flex;
+            padding: 16px;
+            border-top: 2px solid var(--border-disabled);
+
+            > * {
+                flex: 1;
+                margin: 8px;
+            }
+            &-today {
+                width: 100%;
+            }
+        }
+        &__radio-group {
+            padding: 16px 16px 24px;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            border-bottom: 2px solid var(--border-disabled);
+        }
+        &__radio {
+            display: flex;
+            align-items: center;
+            padding: 7px 8px;
+            border: 1px solid;
+            border-color: var(--border-normal);
+            border-radius: 4px;
+            margin: 8px;
+            font-size: 1.4rem;
+
+            &-input {
+                display: none;
+            }
+            &-circle {
+                border: 2px solid var(--text-general);
+                border-radius: 50%;
+                box-shadow: 0 0 1px 0 var(--shadow-menu);
+                width: 16px;
+                height: 16px;
+                transition: all 0.3s ease-in-out;
+                margin-right: 8px;
+                align-self: center;
+
+                &--selected {
+                    border-width: 4px;
+                    border-color: var(--brand-red-coral);
+                    background: $color-white;
+                }
+            }
+            &--selected {
+                border-color: var(--brand-secondary);
+                font-weight: bold;
+            }
+        }
+        &__custom {
+            padding: 16px;
+
+            &-radio {
+                display: inline-flex;
+            }
+            &-date-range {
+                margin: 8px;
+                display: flex;
+                flex-direction: column;
+
+                &-start-date {
+                    margin: 16px 0px;
+                }
+                &-end-date {
+                    margin-bottom: 8px;
+                }
+            }
+        }
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/components/contract-audit.scss b/packages/reports/src/sass/app/_common/components/contract-audit.scss
new file mode 100644
index 000000000000..c2499691fbb3
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/components/contract-audit.scss
@@ -0,0 +1,101 @@
+/** @define contract-audit; */
+$HEIGHT: calc(100vh - 34em);
+
+.contract-audit {
+    &__wrapper {
+        border-radius: $BORDER_RADIUS;
+        opacity: 1;
+        flex: 1;
+        overflow: hidden;
+        background-color: var(--general-main-1);
+        color: var(--text-prominent);
+        display: flex;
+        margin-bottom: 0.8rem;
+
+        /* postcss-bem-linter: ignore */
+        .dc-tabs {
+            height: 100%;
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            /* postcss-bem-linter: ignore */
+            &__content {
+                display: flex;
+                height: calc(100% - 4rem);
+                /* postcss-bem-linter: ignore */
+                .dc-themed-scrollbars {
+                    flex: 1;
+                }
+            }
+        }
+        /* postcss-bem-linter: ignore */
+        .dc-themed-scrollbars {
+            width: 100%;
+        }
+    }
+    &__grid {
+        display: flex;
+        padding: 0.8rem 0;
+
+        &:not(:first-child) {
+            border-top: 1px solid var(--general-section-2);
+        }
+    }
+    &__icon {
+        display: flex;
+        align-items: flex-start;
+        margin-right: 8px;
+    }
+    &__item {
+        display: flex;
+        flex-direction: column;
+        margin: 0 4px;
+    }
+    &__label {
+        white-space: nowrap;
+        max-width: 90px;
+    }
+    &__value-wrapper {
+        display: flex;
+        flex-direction: column;
+    }
+    &__value,
+    &__value2 {
+        padding-top: 2px;
+    }
+    &__timestamp {
+        align-self: center;
+        margin-left: auto;
+
+        &-value {
+            display: block;
+        }
+    }
+    &__empty {
+        display: flex;
+        height: 100%;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        padding: 16px;
+
+        &-header {
+            font-size: 1.4rem;
+            font-weight: bold;
+            text-align: center;
+            color: var(--text-less-prominent);
+            padding: 8px;
+        }
+    }
+    &__tabs {
+        &-content {
+            padding: 0.8rem 1.6rem;
+            flex: 1;
+
+            @include mobile {
+                overflow-y: auto;
+            }
+        }
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/components/contract-replay.scss b/packages/reports/src/sass/app/_common/components/contract-replay.scss
new file mode 100644
index 000000000000..1680947557a9
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/components/contract-replay.scss
@@ -0,0 +1,24 @@
+.dc-vertical-tab {
+    &__action-bar {
+        width: 100%;
+        display: flex;
+        flex-flow: row-reverse nowrap;
+        justify-content: space-between;
+        align-items: center;
+        padding: 16px;
+
+        &--icon {
+            @include colorIcon(var(--text-general));
+        }
+        &-wrapper {
+            cursor: pointer;
+            padding: 4px 4px 2px;
+            border-radius: $BORDER_RADIUS;
+            margin-left: auto;
+
+            &:hover {
+                background: var(--general-hover);
+            }
+        }
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/components/contract-type-dialog.scss b/packages/reports/src/sass/app/_common/components/contract-type-dialog.scss
new file mode 100644
index 000000000000..2215f46d3289
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/components/contract-type-dialog.scss
@@ -0,0 +1,101 @@
+/** @define contract-type-dialog; */
+.contract-type-dialog {
+    right: 0.4em;
+    width: 100%;
+    pointer-events: none;
+    position: absolute;
+    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.3s;
+    user-select: none;
+    opacity: 0;
+    height: 0;
+    z-index: 999;
+
+    &__wrapper {
+        position: absolute;
+        width: 290px;
+        right: calc(100% + 10px);
+        top: -66px;
+        display: grid;
+        grid-auto-columns: 1fr;
+        z-index: 2;
+        border-radius: 4px;
+        background: var(--general-main-2);
+        box-shadow: 0 2px 8px 0 var(--shadow-menu);
+        min-width: 560px;
+        height: 680px;
+        max-height: calc(100vh - 100px);
+        overflow: hidden;
+
+        /* postcss-bem-linter: ignore */
+        .dc-vertical-tab {
+            max-height: 680px;
+        }
+        /* postcss-bem-linter: ignore */
+        .dc-vertical-tab__action-bar {
+            flex-flow: row;
+            border-bottom: 2px solid var(--general-section-1);
+            height: 56px;
+            width: 320px;
+
+            /* postcss-bem-linter: ignore */
+            .dc-input {
+                margin-bottom: 0;
+
+                /* postcss-bem-linter: ignore */
+                &__field {
+                    padding: 0.8rem 1.2rem 0.8rem 3.6rem;
+                    height: 3.2rem;
+
+                    /* postcss-bem-linter: ignore */
+                    &::-moz-placeholder {
+                        line-height: 16px;
+                    }
+                }
+                /* postcss-bem-linter: ignore */
+                &__leading-icon {
+                    top: 0.8rem;
+                }
+                /* postcss-bem-linter: ignore */
+                &__trailing-icon {
+                    cursor: pointer;
+                }
+            }
+        }
+        /* postcss-bem-linter: ignore */
+        .dc-vertical-tab__content {
+            padding: 0 !important;
+
+            /* postcss-bem-linter: ignore */
+            &-container {
+                max-height: calc(100% - 56px);
+                height: calc(100% - 56px);
+            }
+        }
+        /* postcss-bem-linter: ignore */
+        .dc-vertical-tab__tab {
+            min-width: 240px;
+
+            /* postcss-bem-linter: ignore */
+            .dc-vertical-tab__header-title {
+                height: 56px;
+            }
+        }
+        /* postcss-bem-linter: ignore */
+        .contract-type-info__wrapper {
+            height: calc(100% - 2.4rem - 18px);
+        }
+    }
+    &--enter,
+    &--exit {
+        transform: translate3d(20%, 0, 0);
+        pointer-events: none;
+        opacity: 0;
+        height: 0;
+    }
+    &--enterDone {
+        transform: translate3d(0, 0, 0);
+        max-height: 100%;
+        opacity: 1;
+        pointer-events: auto;
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/components/contract-type-info.scss b/packages/reports/src/sass/app/_common/components/contract-type-info.scss
new file mode 100644
index 000000000000..ed853e69740a
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/components/contract-type-info.scss
@@ -0,0 +1,110 @@
+/** @define contract-type-info; */
+.contract-type-info {
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    & .dc-carousel {
+        width: 100%;
+    }
+    &__card {
+        min-height: calc(100vh - 210px);
+        max-height: calc(100vh - 268px);
+        display: flex;
+        flex-direction: column;
+        padding: 0.4rem 1rem;
+        @media screen and (min-height: 768px) and (max-height: 820px) {
+            min-height: calc(100vh - 288px);
+        }
+        @media screen and (min-height: 821px) {
+            min-height: 535px;
+        }
+    }
+    &__content {
+        overflow: hidden;
+
+        /* postcss-bem-linter: ignore */
+        h2 {
+            @include typeface(--paragraph-left-bold-black, none);
+            margin-bottom: 0.8rem;
+            color: var(--text-prominent);
+        }
+        /* postcss-bem-linter: ignore */
+        p,
+        ul li {
+            @include typeface(--paragraph-left-normal-black, none);
+            margin-bottom: 1.6rem;
+            color: var(--text-general);
+        }
+        /* postcss-bem-linter: ignore */
+        ul {
+            margin-left: 1.6rem;
+            list-style: disc;
+
+            /* postcss-bem-linter: ignore */
+            li {
+                margin-bottom: 0.8rem;
+            }
+        }
+    }
+    &__gif {
+        width: 100%;
+        height: 148px;
+        border-radius: 4px;
+    }
+    &__action-bar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+    }
+    &__title {
+        margin: auto;
+        cursor: default;
+    }
+    &__nav {
+        display: flex;
+        align-items: center;
+        width: 320px;
+        padding: 0 2.4rem;
+        overflow: hidden;
+        margin-bottom: 2.4rem;
+
+        &-list {
+            display: inline-block;
+            text-align: center;
+            margin: 0 auto;
+            position: relative;
+        }
+        &-item {
+            width: 0.8rem;
+            height: 0.8rem;
+            border-radius: 50%;
+            display: inline-block;
+            margin: 0 0.8rem;
+            cursor: pointer;
+            background-color: var(--text-disabled);
+
+            &--active {
+                position: absolute;
+                top: 0;
+                left: 0;
+                cursor: initial;
+                transition: transform 0.3s linear;
+                background-color: var(--brand-red-coral);
+            }
+        }
+    }
+    &__icon {
+        cursor: pointer;
+    }
+    &__scrollbars {
+        margin-top: 2.4rem;
+        margin-bottom: auto;
+    }
+    &__button {
+        margin-top: 2.4rem;
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/components/contract-type-list.scss b/packages/reports/src/sass/app/_common/components/contract-type-list.scss
new file mode 100644
index 000000000000..d31350ae6c0b
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/components/contract-type-list.scss
@@ -0,0 +1,94 @@
+/** @define contract-type-list; */
+.contract-type-list {
+    padding: 1.6rem;
+
+    &__label {
+        @include typeface(--paragraph-left-bold-black);
+        color: var(--text-prominent);
+        margin-bottom: 0.8rem;
+        margin-left: 1.6rem;
+    }
+    &:last-child {
+        border-bottom: none;
+    }
+    &__contracts-wrapper {
+        margin-bottom: 1.4rem;
+    }
+    @include mobile {
+        border-bottom: 4px solid var(--border-disabled);
+    }
+}
+
+/** @define contract-type-item */
+.contract-type-item {
+    width: 100%;
+    cursor: pointer;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.8rem 1.6rem;
+    box-sizing: border-box;
+    transition: transform 0.3s opacity 0.3s;
+    color: var(--text-general);
+    border-radius: 4px;
+
+    &:hover {
+        background-color: var(--state-hover);
+
+        .contract-type-item__icon {
+            display: block;
+        }
+    }
+    &__title {
+        padding-left: 1.6rem;
+    }
+    &__icon {
+        display: none;
+        margin-left: auto;
+
+        /* postcss-bem-linter: ignore */
+        .dc-icon {
+            pointer-events: none;
+        }
+        &:hover {
+            /* postcss-bem-linter: ignore */
+            .dc-icon {
+                pointer-events: none;
+            }
+        }
+    }
+    &--selected {
+        background: var(--state-active);
+        color: var(--text-prominent);
+
+        &:hover {
+            background: var(--state-active);
+        }
+        .contract-type-item__title {
+            font-weight: bold;
+            color: var(--text-prominent);
+        }
+        .contract-type-item__icon {
+            /* postcss-bem-linter: ignore */
+            .dc-icon {
+                pointer-events: none;
+            }
+            &:hover {
+                /* postcss-bem-linter: ignore */
+                .dc-icon {
+                    pointer-events: none;
+                }
+            }
+        }
+    }
+    &__icon-wrapper {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        /* postcss-bem-linter: ignore */
+        .category-wrapper + .category-wrapper {
+            margin-left: 0.4rem;
+        }
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/components/contract-type-no-result.scss b/packages/reports/src/sass/app/_common/components/contract-type-no-result.scss
new file mode 100644
index 000000000000..111e4fa1d1b6
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/components/contract-type-no-result.scss
@@ -0,0 +1,24 @@
+/** @define no-results-found; weak */
+.no-results-found {
+    display: flex;
+    flex-direction: column;
+    padding: 2.4rem 0.8rem;
+    justify-content: center;
+    align-content: center;
+    text-align: center;
+
+    &__title {
+        font-size: var(--text-size-xs);
+        font-weight: normal;
+        font-style: normal;
+        line-height: 1.43;
+        letter-spacing: normal;
+        text-align: center;
+        margin-bottom: 0.8rem;
+        color: var(--text-general);
+    }
+    &__subtitle {
+        letter-spacing: normal;
+        margin: 0;
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/components/contract-type-widget.scss b/packages/reports/src/sass/app/_common/components/contract-type-widget.scss
new file mode 100644
index 000000000000..71fcea8eed8c
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/components/contract-type-widget.scss
@@ -0,0 +1,107 @@
+/** @define contract-type-widget; weak */
+.contract-type-widget {
+    position: relative;
+    z-index: 2;
+    border-radius: 4px;
+    transition: transform 0.3s, opacity 0.3s;
+    color: var(--text-prominent);
+    background: var(--fill-normal);
+    border: 1px solid var(--fill-normal);
+
+    &__display {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        flex-direction: row;
+        padding: 1.6rem;
+
+        /* postcss-bem-linter: ignore */
+        span[name='contract_type'] {
+            @include typeface(--paragraph-left-normal-black);
+            color: var(--text-prominent);
+            font-weight: bold;
+            vertical-align: middle;
+            padding-left: 0.4em;
+        }
+        &:hover,
+        &:focus {
+            border-color: var(--border-hover);
+            outline: none;
+        }
+        &--clicked {
+            border-color: var(--border-active);
+
+            .contract-type-widget__select-arrow {
+                transform: rotate(-90deg);
+            }
+        }
+    }
+    &__select-arrow {
+        display: inline-block;
+        font-style: normal;
+        vertical-align: baseline;
+        text-align: center;
+        text-transform: none;
+        text-rendering: optimizeLegibility;
+        position: absolute;
+        pointer-events: none;
+        top: 37%;
+        left: 0.6em;
+        line-height: 1;
+        transition: transform 0.25s ease;
+        transform: rotate(90deg);
+        transform-origin: 45% 45;
+        color: var(--text-prominent);
+        @extend %inline-icon;
+    }
+    &__icon-wrapper {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding-left: 1.2em;
+
+        /* postcss-bem-linter: ignore */
+        .category-wrapper {
+            margin: 0 0.2em;
+            background-color: var(--general-section-1);
+
+            /* postcss-bem-linter: ignore */
+            .category-type {
+                /* postcss-bem-linter: ignore */
+                .transparent {
+                    fill: var(--general-section-1);
+                }
+                /* postcss-bem-linter: ignore */
+                .color1-fill {
+                    fill: var(--brand-red-coral);
+                }
+                /* postcss-bem-linter: ignore */
+                .color2-fill {
+                    fill: var(--brand-secondary);
+                }
+            }
+        }
+    }
+    &:hover {
+        border-color: var(--border-hover);
+    }
+    &:active,
+    &:focus,
+    &--show {
+        outline: none;
+        border-radius: 4px;
+        border-color: var(--border-active);
+    }
+    @include mobile {
+        margin-bottom: 0.8rem;
+        height: 4rem;
+
+        &--multiplier {
+            margin-bottom: 0.6rem;
+        }
+        .contract-type-widget__display {
+            padding: 0.8rem;
+        }
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/components/market-is-closed-overlay.scss b/packages/reports/src/sass/app/_common/components/market-is-closed-overlay.scss
new file mode 100644
index 000000000000..64a68ba5ea8d
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/components/market-is-closed-overlay.scss
@@ -0,0 +1,54 @@
+/** @define .market-is-closed-overlay */
+.market-is-closed-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    padding: 0;
+    background-color: var(--overlay-inside-dialog);
+    z-index: 1000;
+
+    &--loading {
+        display: none;
+    }
+    &__main-heading {
+        margin-bottom: 2rem;
+    }
+    &__open-date,
+    &__main-message {
+        margin-bottom: 2rem;
+    }
+    &__open-at,
+    &__come-back {
+        &--main-page {
+            margin-bottom: 1rem;
+        }
+    }
+    &__separator {
+        margin-top: 1rem;
+        border: 2px solid var(--general-section-1);
+        width: 19.2rem;
+        margin-bottom: 2rem;
+    }
+    &__button {
+        height: 40px;
+        margin-top: 1rem;
+    }
+
+    @include mobile {
+        position: unset;
+        top: unset;
+        left: unset;
+        overflow-y: scroll;
+        padding-top: 16rem;
+
+        &__button {
+            min-height: 4rem;
+        }
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/components/market-symbol-icon.scss b/packages/reports/src/sass/app/_common/components/market-symbol-icon.scss
new file mode 100644
index 000000000000..c1b39d42b87b
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/components/market-symbol-icon.scss
@@ -0,0 +1,38 @@
+/** @define .market-symbol-icon; weak */
+.market-symbol-icon {
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+
+    .color1-fill {
+        fill: var(--brand-red-coral);
+    }
+    .color2-fill {
+        fill: var(--brand-secondary);
+    }
+    &-name,
+    &-category {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        @include typeface(--paragraph-left-bold-active);
+        color: var(--text-prominent);
+    }
+    &-name {
+        width: 3.2rem;
+        margin-right: 0.8rem;
+    }
+    &-category {
+        svg {
+            width: 2.4rem;
+            height: 2.4rem;
+        }
+    }
+    &__multiplier {
+        color: var(--text-less-prominent);
+        font-size: 1rem;
+        display: flex;
+        align-items: flex-end;
+        margin: 0 0 0.4rem 0.4rem;
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/components/message-box.scss b/packages/reports/src/sass/app/_common/components/message-box.scss
new file mode 100644
index 000000000000..fc66f8215952
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/components/message-box.scss
@@ -0,0 +1,103 @@
+/** @define message-box */
+.message-box {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 2;
+    border-radius: $BORDER_RADIUS;
+    display: flex;
+    align-items: center;
+    background-color: var(--general-main-2);
+    color: var(--text-prominent);
+
+    &__close-btn {
+        position: absolute;
+        cursor: pointer;
+        right: 2px;
+        top: 2px;
+
+        &-ic {
+            width: 24px;
+            height: 24px;
+        }
+    }
+    &__result {
+        padding: 16px;
+        line-height: 1.5;
+        font-size: 0.8em;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        max-height: 187px;
+        height: 100%;
+        width: 100%;
+        color: var(--text-prominent);
+
+        &-header {
+            margin-bottom: 0.5rem;
+            font-size: 12px;
+        }
+        &-label {
+            margin-right: 4px;
+            font-size: 10px;
+            color: var(--text-prominent);
+        }
+        &-currency {
+            position: relative;
+            display: inline-flex;
+        }
+    }
+    &__login {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        width: 100%;
+        color: var(--text-prominent);
+
+        &-btn {
+            margin: 0 auto;
+
+            &-span {
+                font-size: 0.8em;
+            }
+        }
+        &-info {
+            font-weight: 300;
+            font-size: 1.2em;
+        }
+        &-prompt {
+            line-height: 100%;
+            margin-bottom: 0;
+            font-size: 0.8em;
+            font-weight: 300;
+        }
+        &-link {
+            text-decoration: none;
+            color: var(--text-prominent);
+
+            &-info {
+                padding: 5px 10px 10px;
+                font-weight: 500;
+                color: var(--status-info);
+            }
+            &:hover,
+            &:focus,
+            &:active {
+                text-decoration: underline;
+                color: var(--text-prominent);
+            }
+        }
+    }
+    &__info {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.5rem 1.5rem;
+        text-align: center;
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/components/number-selector.scss b/packages/reports/src/sass/app/_common/components/number-selector.scss
new file mode 100644
index 000000000000..82a220fbf76f
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/components/number-selector.scss
@@ -0,0 +1,56 @@
+/** @define number-selector */
+.number-selector {
+    margin-top: 1.2em;
+    text-align: center;
+
+    &__row:first-child {
+        margin-bottom: 0.8em;
+    }
+    &__selection {
+        width: calc(20% - 4px);
+        height: 24px;
+        border-radius: $BORDER_RADIUS;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        @include typeface(--paragraph-left-normal-black);
+        background-color: var(--state-normal);
+        color: var(--text-general);
+
+        &:not(:first-child) {
+            margin-left: 5px;
+        }
+        &--selected {
+            @include typeface(--paragraph-left-bold-active);
+            background-color: var(--state-active);
+            color: var(--text-prominent);
+        }
+        &:hover:not(&--selected) {
+            cursor: pointer;
+            background-color: var(--state-hover);
+        }
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+    @include mobile {
+        margin-top: 0;
+        padding: 0.8rem;
+        border-radius: $BORDER_RADIUS;
+        background-color: var(--fill-normal);
+
+        &__selection {
+            width: calc(20% - 7px);
+            height: 32px;
+            font-size: 1.6rem;
+            background-color: var(--general-section-1);
+
+            &--selected {
+                background-color: var(--state-active);
+            }
+            &:not(:first-child) {
+                margin-left: 0.8rem;
+            }
+        }
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/components/popconfirm.scss b/packages/reports/src/sass/app/_common/components/popconfirm.scss
new file mode 100644
index 000000000000..fd43c5da1218
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/components/popconfirm.scss
@@ -0,0 +1,201 @@
+/** @define popconfirm */
+//.popconfirm {
+//    position: absolute;
+//    left: 50%;
+//    bottom: 4em;
+//    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.14);
+//    width: 348px;
+//    min-height: 9em;
+//    font-weight: 500;
+//    border-radius: 4px;
+//    transform: scale(0, 0) translate(-50%, 0);
+//    opacity: 0;
+//    transform-origin: left bottom;
+//    transition: all 0.2s;
+//    z-index: 3;
+//    @include themify($themes) {
+//        background: themed('container_secondary_color');
+//    }
+//
+//    &--open {
+//        transform: scale(1, 1) translate(-50%, 0);
+//        opacity: 1;
+//    }
+//    &__button {
+//        margin: 0 0.8em;
+//        box-shadow: none;
+//        text-decoration: none;
+//        display: flex;
+//        align-items: center;
+//        justify-content: center;
+//        transition: background 0.2s, color 0.2s;
+//        @include themify($themes) {
+//            background: themed('container_secondary_color');
+//        }
+//
+//        &-wrapper {
+//            display: flex;
+//            justify-content: flex-end;
+//        }
+//        &-text {
+//            @include themify($themes) {
+//                color: themed('text_primary_color');
+//            }
+//            font-size: 1.2em;
+//            font-weight: bold;
+//        }
+//        &:hover {
+//            @include themify($themes) {
+//                background: themed('tab_hover_color');
+//
+//                .popconfirm__button-text {
+//                    color: themed('text_color');
+//                }
+//            }
+//        }
+//    }
+//    &__title {
+//        margin: 0.8em;
+//        padding: 0.8em;
+//        display: flex;
+//        flex-direction: row;
+//        align-items: center;
+//
+//    }
+//    &__icon_exclamation {
+//        margin-right: 0.8em;
+//    }
+//    &__header {
+//        font-size: 1.2em;
+//        font-weight: 300;
+//        text-transform: none;
+//        padding: 0;
+//        margin: 0;
+//        line-height: 100%;
+//        @include themify($themes) {
+//            color: themed('text_color');
+//        }
+//    }
+//    &:after {
+//        // arrow pointing down
+//        position: absolute;
+//        content: '';
+//        bottom: -0.3em;
+//        left: 50%;
+//        margin-left: -0.5em;
+//        border-width: 5px;
+//        border-style: solid;
+//        transform: rotate(45deg);
+//        box-shadow: rgba(0, 0, 0, 0.05) 2px 2px 2px;
+//        @include themify($themes) {
+//            border-color: themed('container_secondary_color');
+//        }
+//    }
+//    // Alignments
+//    &--bottom {
+//        top: 4em;
+//        bottom: unset;
+//        transform-origin: left top;
+//
+//        &:after {
+//            top: -0.3em;
+//            bottom: unset;
+//            transform: rotate(-135deg);
+//        }
+//    }
+//    &--right {
+//        bottom: 50%;
+//        left: unset;
+//        right: -2em;
+//        transform-origin: right bottom;
+//        transform: scale(0, 0) translate(100%, 50%);
+//
+//        &--open {
+//            transform: scale(1, 1) translate(100%, 50%);
+//        }
+//        &:after {
+//            left: 0;
+//            bottom: 50%;
+//            transform: rotate(135deg);
+//        }
+//    }
+//    &--left {
+//        bottom: 50%;
+//        left: -2em;
+//        transform-origin: left bottom;
+//        transform: scale(0, 0) translate(-100%, 50%);
+//
+//        &--open {
+//            transform: scale(1, 1) translate(-100%, 50%);
+//        }
+//        &:after {
+//            left: unset;
+//            right: -0.3em;
+//            bottom: 45%;
+//            transform: rotate(-45deg);
+//        }
+//    }
+//    &--top-right {
+//        transform-origin: right bottom;
+//        transform: scale(0, 0) translate(0, 0);
+//        left: unset;
+//        right: 0;
+//
+//        &--open {
+//            transform: scale(1, 1) translate(0, 0);
+//        }
+//        &:after {
+//            left: unset;
+//            right: 5%;
+//        }
+//    }
+//    &--top-left {
+//        transform-origin: left bottom;
+//        transform: scale(0, 0) translate(0, 0);
+//        left: 0;
+//
+//        &--open {
+//            transform: scale(1, 1) translate(0, 0);
+//        }
+//        &:after {
+//            left: 8%;
+//        }
+//    }
+//    &--bottom-right {
+//        top: 4em;
+//        bottom: unset;
+//        transform-origin: right top;
+//        transform: scale(0, 0) translate(0, 0);
+//        left: unset;
+//        right: 0;
+//
+//        &--open {
+//            transform: scale(1, 1) translate(0, 0);
+//        }
+//        &:after {
+//            top: -0.3em;
+//            bottom: unset;
+//            left: unset;
+//            right: 5%;
+//            transform: rotate(-135deg);
+//
+//        }
+//    }
+//    &--bottom-left {
+//        top: 4em;
+//        bottom: unset;
+//        transform-origin: left top;
+//        transform: scale(0, 0) translate(0, 0);
+//        left: 0;
+//
+//        &--open {
+//            transform: scale(1, 1) translate(0, 0);
+//        }
+//        &:after {
+//            top: -0.3em;
+//            left: 8%;
+//            bottom: unset;
+//            transform: rotate(-135deg);
+//        }
+//    }
+//}
diff --git a/packages/reports/src/sass/app/_common/components/positions-toggle.scss b/packages/reports/src/sass/app/_common/components/positions-toggle.scss
new file mode 100644
index 000000000000..e82b9ef9c3c9
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/components/positions-toggle.scss
@@ -0,0 +1,115 @@
+/** @define positions-toggle; weak */
+.positions-toggle {
+    position: relative;
+    text-decoration: none;
+    height: 100%;
+    display: inline-flex;
+    align-items: center;
+    padding: 0 0.8rem;
+
+    &__icon {
+        margin-bottom: 0.5em;
+        height: 1.6rem;
+        width: 1.6rem;
+    }
+    &:before {
+        content: '';
+        width: 0.2rem;
+        height: 0.2rem;
+        border-radius: 50%;
+        position: absolute;
+        bottom: 0.8rem;
+        right: 1.5rem;
+        display: block;
+        transition: transform 0.25s ease;
+        transform: translate3d(0, 0, 0);
+        background-color: var(--text-prominent);
+    }
+    &--active {
+        background: none !important;
+
+        &:before {
+            transform: translate3d(0, 50px, 0);
+        }
+        .positions-toggle__icon {
+            margin-bottom: 0;
+        }
+        @include desktop {
+            &:after {
+                transform: translate3d(0, 4px, 0);
+            }
+        }
+    }
+    &--has-count:after {
+        content: attr(data-count);
+        width: 14px;
+        height: 14px;
+        font-size: 0.9rem;
+        border-radius: 50%;
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        top: 2px;
+        right: 0;
+        background-color: var(--brand-red-coral);
+        color: $color-white;
+    }
+    @include mobile {
+        padding: 0 1.2rem;
+        height: inherit;
+
+        &--has-count:after {
+            top: -4px;
+            right: 4px;
+        }
+        .positions-toggle__icon {
+            margin: 0;
+        }
+        &:before {
+            display: none;
+        }
+    }
+}
+
+/** @define positions-modal; weak */
+.positions-modal {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    &__body {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+    &__header {
+        display: flex;
+        justify-content: space-between;
+        padding: 1.6rem;
+        height: 50px;
+    }
+    &__title {
+        display: flex;
+        align-items: center;
+        font-size: 1rem;
+        color: var(--text-general);
+        line-height: 1.5;
+
+        &-icon {
+            width: 1.2rem;
+            height: 1.2rem;
+            margin-right: 0.4rem;
+        }
+    }
+    &__footer {
+        height: 72px;
+        width: 100%;
+
+        &-btn {
+            margin: 1.6rem 0.8rem;
+            width: calc(100% - 1.6rem);
+        }
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/components/purchase-button.scss b/packages/reports/src/sass/app/_common/components/purchase-button.scss
new file mode 100644
index 000000000000..177b2ae04363
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/components/purchase-button.scss
@@ -0,0 +1,327 @@
+/** @define btn-purchase */
+.btn-purchase {
+    position: relative;
+    background-color: var(--purchase-section-1);
+    overflow: hidden;
+    height: 56px;
+    width: 100%;
+    margin: 5px 0 0;
+    padding: 0;
+    text-align: left;
+    transition: transform 0.25s ease;
+    display: flex;
+    z-index: 1;
+    touch-action: manipulation;
+    cursor: pointer;
+    white-space: nowrap;
+    border: 0;
+    border-radius: $BORDER_RADIUS;
+    outline: 0;
+    font-size: 1rem;
+
+    @include mobile {
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        margin: initial;
+        height: 70px;
+
+        &__top,
+        &__bottom {
+            height: 50%;
+            flex: 1 1 auto;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+            align-items: center;
+        }
+        &__top {
+            width: 50%;
+        }
+        &__bottom {
+            width: 40vw; // TODO remove this when find a solution for fill-width inside flex.
+        }
+        &:hover {
+            transform: none !important;
+        }
+        &--disabled,
+        &[disabled] {
+            opacity: 0.32;
+        }
+        &--swoosh {
+            transform: none !important;
+        }
+        &__error {
+            position: absolute;
+            padding: 0.8rem;
+            width: 100%;
+            height: 100%;
+            color: var(--text-colored-background);
+            background-color: var(--status-danger);
+            justify-content: center;
+            align-items: center;
+            line-height: 1.4;
+            z-index: 2;
+            border-radius: $BORDER_RADIUS;
+            max-height: 90px;
+            overflow: hidden;
+            font-weight: bold;
+        }
+    }
+
+    &__icon_wrapper {
+        @extend %inline-icon.white;
+        /* postcss-bem-linter: ignore */
+        .color1-fill {
+            fill: var(--text-colored-background);
+        }
+        /* postcss-bem-linter: ignore */
+        .color2-fill {
+            fill: var(--text-colored-background);
+        }
+        @include mobile {
+            margin-right: 0.5rem;
+        }
+    }
+    &__info {
+        color: var(--text-colored-background);
+        text-align: left;
+        position: relative;
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+        padding-left: 10px;
+        height: 56px;
+    }
+    &__info--left {
+        background-color: var(--purchase-main-1);
+        width: 40%;
+        transition: transform linear 0.25s;
+        z-index: 2;
+
+        .btn-purchase__text_wrapper {
+            margin-left: 24px;
+            position: absolute;
+        }
+    }
+    &__info--right {
+        width: 45%;
+        padding-right: 1rem;
+        background-color: transparent;
+        display: flex;
+        justify-content: flex-end;
+
+        .btn-purchase__text {
+            opacity: 1;
+            transition: 0.3s;
+        }
+    }
+    &__effect-detail {
+        position: absolute;
+        background-color: var(--purchase-main-1);
+        transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+        width: 116px;
+        height: 100%;
+        z-index: 1;
+    }
+    &__effect-detail--arrow {
+        content: '';
+        width: 55px;
+        transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+        transform: rotate(45deg);
+        height: 100%;
+        background: var(--purchase-main-1);
+        left: 80px;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        display: inline-block;
+    }
+    &[disabled]:hover {
+        cursor: initial;
+        transform: none;
+    }
+    &:hover:not(&--disabled):not([disabled]) {
+        transform: translate3d(0, -4px, 0);
+    }
+    &__type-wrapper {
+        display: flex;
+        align-items: center;
+        transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+        transform: none;
+    }
+    &__shadow-wrapper {
+        position: relative;
+
+        .btn-purchase__box-shadow {
+            position: absolute;
+            width: 100%;
+            bottom: 14px;
+            height: 50%;
+            z-index: 0;
+            opacity: 0.9;
+            box-shadow: 0 16px 14px 0 var(--shadow-menu);
+            transition: opacity 0.25s linear;
+            pointer-events: none;
+        }
+        &--disabled {
+            pointer-events: none;
+
+            &:hover {
+                transform: none;
+            }
+        }
+    }
+    &:active:not(&--disabled):not([disabled]),
+    &:focus:not(&--disabled):not([disabled]) {
+        transform: translate3d(0, -4px, 0);
+    }
+    &--swoosh {
+        transform: translate3d(0, -4px, 0);
+
+        .btn-purchase__type-wrapper {
+            transform: translate3d(55px, 0, 0);
+        }
+        .btn-purchase__effect-detail {
+            transform: scale3d(3, 1, 1);
+
+            &--arrow {
+                transform: translate3d(120px, 0, 0) rotate(45deg);
+            }
+        }
+    }
+    &--1 {
+        background-color: var(--purchase-section-1);
+
+        .btn-purchase__info--left {
+            background-color: var(--purchase-main-1);
+        }
+        .btn-purchase__effect-detail {
+            background: var(--purchase-main-1);
+
+            &--arrow {
+                background: var(--purchase-main-1);
+            }
+        }
+
+        @include mobile {
+            background: var(--purchase-section-1);
+            background: linear-gradient(
+                0deg,
+                var(--purchase-section-1) 0%,
+                var(--purchase-section-1) 50%,
+                var(--purchase-main-1) 50%,
+                var(--purchase-main-1) 100%
+            );
+        }
+    }
+    &--2 {
+        background-color: var(--purchase-section-2);
+
+        .btn-purchase__info--left {
+            background-color: var(--purchase-main-2);
+        }
+        .btn-purchase__effect-detail {
+            background: var(--purchase-main-2);
+
+            &--arrow {
+                background: var(--purchase-main-2);
+            }
+        }
+        @include mobile {
+            background: var(--purchase-section-2);
+            background: linear-gradient(
+                0deg,
+                var(--purchase-section-2) 0%,
+                var(--purchase-section-2) 50%,
+                var(--purchase-main-2) 50%,
+                var(--purchase-main-2) 100%
+            );
+        }
+    }
+    &--disabled,
+    &[disabled] {
+        cursor: default;
+
+        &:after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(255, 255, 255, 0.32);
+            z-index: 4;
+            pointer-events: none;
+        }
+    }
+    &--animated--slide {
+        .btn-purchase__icon_wrapper,
+        .btn-purchase__text_wrapper {
+            @extend .loader;
+        }
+        .btn-purchase__icon,
+        .btn-purchase__text {
+            @extend .loader--loading;
+        }
+        .btn-purchase__icon_wrapper {
+            width: 16px;
+            height: 16px;
+        }
+        .btn-purchase__text_wrapper {
+            width: 56px;
+            height: 8px;
+
+            .btn-purchase__text {
+                display: block;
+            }
+        }
+    }
+    &--animated--fade &__info--right &__text {
+        opacity: 0;
+    }
+    &__shadow-wrapper:hover:after {
+        opacity: 0;
+    }
+    &--multiplier {
+        .btn-purchase__info--left {
+            width: 35%;
+            flex: none;
+        }
+        .btn-purchase__effect-detail--arrow {
+            left: 40px;
+        }
+        &.btn-purchase--swoosh {
+            .btn-purchase {
+                &__effect-detail {
+                    transform: scale3d(5, 1, 1);
+
+                    &--arrow {
+                        transform: translate3d(160px, 0, 0) rotate(45deg);
+                    }
+                }
+                &__type-wrapper {
+                    transform: translate3d(70px, 0, 0);
+                }
+            }
+        }
+        .btn-purchase__effect-detail {
+            width: 72px;
+        }
+        .btn-purchase__top {
+            @include mobile {
+                justify-content: center;
+            }
+        }
+        .trade-container__price-info {
+            @include mobile {
+                justify-content: center;
+            }
+        }
+        @include mobile {
+            &-deal-cancel {
+                height: 64px;
+            }
+        }
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/components/range-slider.scss b/packages/reports/src/sass/app/_common/components/range-slider.scss
new file mode 100644
index 000000000000..6c1cff37e173
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/components/range-slider.scss
@@ -0,0 +1,183 @@
+// Range Slider
+/** @define range-slider */
+.range-slider {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    padding: 0 4px;
+    box-sizing: border-box;
+
+    &__label {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 16px;
+        margin-bottom: 4px;
+    }
+    /* overriding firefox shadow pseudo element */
+    &__track[type='range']::-moz-focus-outer {
+        border: 0;
+    }
+    // TODO: remove once we have proper styling for input slider validation error
+    &__error {
+        .range-slider {
+            &__track[type='range'] {
+                // Range Handle Thumb - Chrome / Webkit based browsers
+                &::-webkit-slider-thumb {
+                    background: var(--text-loss-danger);
+                }
+                // Range Handle Thumb - Firefox / Gecko based browsers
+                &::-moz-range-thumb {
+                    background: var(--text-loss-danger);
+                }
+            }
+            &__line {
+                background: var(--text-loss-danger) !important;
+            }
+            &__ticks-step--marked {
+                background: var(--text-loss-danger) !important;
+                border-color: var(--text-loss-danger) !important;
+            }
+        }
+    }
+    &__track[type='range'] {
+        position: relative;
+        // removal of !important is pending refactor in main trading sass file that overrides rules for input els
+        appearance: none !important;
+        width: 100% !important;
+        height: 2px; // !important had to be removed to fix disappearing thumb on MS Edge
+        border-radius: 5px;
+        outline: none;
+        padding: 0;
+        margin: 0;
+        cursor: pointer;
+        background: var(--state-normal);
+        border: none;
+
+        // Handles Track - MS Edge and IE
+        @supports (-ms-ime-align: auto) {
+            height: 14px;
+            position: relative;
+            top: -6px;
+        }
+        // Range Handle Thumb - Chrome / Webkit based browsers
+        &::-webkit-slider-thumb {
+            @include thumbStyle();
+            background: var(--state-active);
+        }
+        // Range Handle Thumb - Firefox / Gecko based browsers
+        &::-moz-range-thumb {
+            @include thumbStyle();
+            background: var(--state-active);
+        }
+        // Range Handle Thumb - Microsoft Edge
+        &::-ms-thumb {
+            @include thumbStyle();
+            background: var(--state-active);
+        }
+        &:hover,
+        &:focus,
+        &:active {
+            border: 0;
+            outline: none;
+        }
+        &:active,
+        &:focus {
+            box-shadow: none !important;
+        }
+        &::-ms-tooltip {
+            display: none;
+        }
+        &[type='range']::-ms-track {
+            /*example */
+            width: 100%;
+            height: 2px;
+            border-width: 6px 0;
+            background: var(--state-active);
+            border-color: var(--general-section-1);
+            color: var(--state-active);
+        }
+        &[type='range']::-ms-fill-upper {
+            height: 2px;
+            background: var(--state-active);
+        }
+        &[type='range']::-ms-fill-lower {
+            height: 2px;
+            background: var(--state-active);
+        }
+    }
+    &__ticks {
+        width: 100%;
+        position: absolute;
+        display: flex;
+        justify-content: space-between;
+        left: 0;
+        top: -3px;
+        height: 0;
+
+        &-step {
+            height: 8px;
+            width: 8px;
+            border-radius: 50%;
+            transition: box-shadow 0.2s;
+            cursor: pointer;
+            border: 4px solid var(--state-normal);
+            background: var(--state-normal);
+
+            &--active,
+            &--marked {
+                background: var(--state-active);
+                border-color: var(--state-active);
+            }
+            &--marked-hover {
+                background: var(--state-hover);
+                border-color: var(--state-hover);
+            }
+            &--marked:hover:not(&--active) {
+                border-color: var(--state-active) !important;
+            }
+            &--active {
+                visibility: hidden;
+                pointer-events: none;
+
+                &:after {
+                    content: '';
+                    width: 1em;
+                    height: 1em;
+                    position: absolute;
+                    display: block;
+                    top: 0;
+                    border-radius: 50%;
+                    background: var(--state-active);
+                }
+            }
+            &:hover:not(&--active) {
+                background: var(--state-hover);
+                border-color: var(--state-hover);
+                box-shadow: 0 0 0 5px var(--shadow-menu);
+            }
+            &:first-child {
+                margin-left: 0;
+            }
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+    &__line {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 2px;
+        pointer-events: none;
+        background: var(--state-active);
+
+        &--fill {
+            background: var(--state-hover);
+        }
+    }
+    &__caption {
+        text-align: center;
+        padding-top: 8px;
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/components/toggle-button.scss b/packages/reports/src/sass/app/_common/components/toggle-button.scss
new file mode 100644
index 000000000000..85dbaf9b6f40
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/components/toggle-button.scss
@@ -0,0 +1,28 @@
+/** @define toggle-button */
+.toggle-button {
+    border-radius: 4px;
+    background-color: var(--state-normal);
+    color: var(--text-general);
+    height: 3.2em;
+    margin: 0;
+    margin-top: 0.8em;
+
+    &:not(:first-child) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+    &:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    &--selected {
+        background-color: var(--state-active);
+        color: var(--text-prominent);
+    }
+}
+
+/** @define toggle-button-group */
+.toggle-button-group {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(4.4em, 1fr));
+}
diff --git a/packages/reports/src/sass/app/_common/drawer/contract-drawer.scss b/packages/reports/src/sass/app/_common/drawer/contract-drawer.scss
new file mode 100644
index 000000000000..2d93785b3cef
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/drawer/contract-drawer.scss
@@ -0,0 +1,131 @@
+$header-height: 4em;
+
+.contract-drawer {
+    width: $POSITIONS_DRAWER_WIDTH;
+    // removing 2px below for borders
+    height: calc(100vh - #{$HEADER_HEIGHT} - #{$FOOTER_HEIGHT} - 2px - (#{$POSITIONS_DRAWER_MARGIN} * 4));
+    z-index: 2;
+    padding: 0 0.8rem;
+    box-sizing: border-box;
+    will-change: transform, opacity;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    border-radius: $BORDER_RADIUS;
+    border: 1px solid var(--general-section-1);
+    background: var(--general-section-1);
+    color: var(--text-prominent);
+
+    svg {
+        @extend %inline-icon;
+    }
+    h2 {
+        margin-left: 8px;
+        text-transform: none;
+        color: var(--text-prominent);
+    }
+    .currency-badge {
+        margin-bottom: 5px;
+    }
+    &--contract-mode {
+        &:before {
+            background: var(--general-section-1);
+            content: '';
+            position: absolute;
+            top: 38px;
+            left: -3px;
+            width: calc(100% + 6px);
+            height: calc(100% - 32px);
+            filter: blur(3px);
+        }
+    }
+    &__heading {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        padding: 0.5em;
+        margin-left: -8px;
+        @include typeface(--title-left-bold-black);
+        color: var(--text-general);
+
+        &-btn {
+            padding: 4px 8px 0;
+            margin-bottom: -4px;
+            cursor: pointer;
+            border-radius: $BORDER_RADIUS;
+            background: var(--general-section-1);
+
+            &:hover {
+                background: var(--general-hover);
+            }
+        }
+    }
+    &__icon {
+        margin-right: 16px;
+    }
+    &__body {
+        display: flex;
+        flex-direction: column;
+
+        @include desktop {
+            height: 100%;
+        }
+    }
+}
+
+/** @define .contract-card; weak */
+.contract-card {
+    &__market-closed {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        padding: 0;
+        background-image: var(--contract-gradient-danger);
+        z-index: 1000;
+
+        &__title {
+            margin-bottom: 1rem;
+        }
+        &--loading {
+            display: none;
+        }
+        &--disabled {
+            cursor: not-allowed;
+        }
+        &--hidden {
+            opacity: 0;
+        }
+    }
+    &__footer {
+        margin-bottom: 0.5rem;
+        padding: 0 0.4rem;
+
+        &-wrapper {
+            @include typeface(--small-center-normal-black);
+            color: var(--text-prominent);
+            padding: 0.8rem 0.8rem 0;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+        }
+    }
+    &__sell-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: transform 0.25s ease, opacity 0.25s linear;
+        border-top: 1px solid var(--general-section-1);
+
+        .dc-btn--sell,
+        .dc-btn--cancel {
+            height: 2.4rem;
+
+            @include mobile {
+                height: 3.2rem;
+            }
+        }
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/drawer/positions-drawer.scss b/packages/reports/src/sass/app/_common/drawer/positions-drawer.scss
new file mode 100644
index 000000000000..eedc16f387e0
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/drawer/positions-drawer.scss
@@ -0,0 +1,124 @@
+$header-height: 3.6em;
+
+// Trade page animation performance fix #perfmatters
+.trade-container + .positions-drawer {
+    transition: opacity 0.4s ease;
+}
+
+.positions-drawer {
+    $MARGIN_TOP: #{$POSITIONS_DRAWER_MARGIN * 2};
+    $MARGIN_BOTTOM: #{$POSITIONS_DRAWER_MARGIN * 2};
+
+    width: $POSITIONS_DRAWER_WIDTH;
+    height: calc(100vh - #{$HEADER_HEIGHT} - #{$FOOTER_HEIGHT} - #{$MARGIN_TOP} - #{$MARGIN_BOTTOM});
+    margin-top: #{$MARGIN_TOP};
+    position: fixed;
+    z-index: 2;
+    top: #{$HEADER_HEIGHT};
+    left: 4px;
+    box-sizing: border-box;
+    opacity: 0;
+    transform: translateX(-100%);
+    will-change: transform, opacity;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    border-radius: $BORDER_RADIUS;
+    border: 1px solid var(--general-section-1);
+    background-color: var(--general-section-1);
+    color: var(--text-prominent);
+
+    &__bg {
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        width: 260px;
+        height: 100%;
+        background: var(--general-main-1);
+        // box-shadow: 10px 0 5px -2px var(--general-main-1);
+        transition: opacity 0.25s linear;
+        opacity: 0;
+        pointer-events: none;
+
+        &--open {
+            opacity: 1;
+        }
+    }
+    &--open {
+        transform: translateX(#{$POSITIONS_DRAWER_MARGIN});
+        opacity: 1;
+    }
+    &__header {
+        height: $header-height;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 0 1em;
+
+        &:after {
+            content: '';
+            position: absolute;
+            height: 8px;
+            width: calc(100% - 18px);
+            left: 9px;
+            top: 39px;
+            z-index: 1;
+            box-shadow: 0 8px 2px -2px var(--general-section-1) inset;
+        }
+    }
+    &__body {
+        height: calc(100% - #{$header-height * 2.7});
+        padding: 0.8em 0 0;
+        box-sizing: border-box;
+        overflow: hidden;
+        align-self: center;
+        color: var(--text-general);
+
+        & .dc-themed-scrollbars {
+            height: 100%;
+        }
+        & .dc-contract-card {
+            &__stop-loss {
+                & .dc-contract-card-item {
+                    &__header {
+                        padding-top: 0.8rem;
+                    }
+                }
+            }
+        }
+    }
+    &__footer {
+        position: relative;
+        height: 6em;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &:before {
+            content: '';
+            position: absolute;
+            height: 8px;
+            width: calc(100% - 18px);
+            left: 9px;
+            top: -6px;
+            box-shadow: 0 8px 2px -2px var(--general-section-1) inset;
+        }
+        .dc-btn {
+            width: 100%;
+            margin: 8px;
+            height: 40px;
+        }
+    }
+    &__icon-main {
+        margin-right: 0.8em;
+    }
+    &__icon-close {
+        display: inline-block;
+        margin-left: auto;
+        cursor: pointer;
+        svg {
+            @extend %inline-icon;
+            height: 1.6em;
+            width: 1.6em;
+        }
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/drawer/positions-modal-card.scss b/packages/reports/src/sass/app/_common/drawer/positions-modal-card.scss
new file mode 100644
index 000000000000..9c750117da33
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/drawer/positions-modal-card.scss
@@ -0,0 +1,259 @@
+/** @define positions-modal-card; weak */
+
+.positions-modal-card {
+    $positions-modal-card: &;
+
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    text-decoration: none;
+    position: relative;
+    padding: 0.8rem;
+    color: var(--text-general);
+    user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-tap-highlight-color: transparent;
+
+    &__result {
+        &--enter,
+        &--exit {
+            opacity: 0;
+        }
+        &--enter-done {
+            opacity: 1;
+        }
+    }
+    &__caption {
+        font-size: 1.6em;
+        font-weight: bold;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: opacity 0.25s ease;
+        cursor: pointer;
+        width: 100%;
+
+        &--won {
+            color: var(--text-profit-success);
+        }
+        &--lost {
+            color: var(--text-loss-danger);
+        }
+        &-wrapper {
+            cursor: pointer;
+            width: 100%;
+            grid-row: 1 / -1;
+            align-self: center;
+            justify-self: center;
+            text-decoration: none;
+        }
+    }
+    &__icon {
+        margin-left: 4px;
+    }
+    &__wrapper {
+        margin: 0.8rem;
+        border-radius: $BORDER_RADIUS;
+        transition: transform 0.25s ease, opacity 0.25s linear;
+        position: relative;
+        background: var(--general-main-1);
+        border: 1px solid var(--border-disabled);
+    }
+    &__grid {
+        display: grid;
+
+        &-header {
+            border-bottom: 1px solid var(--general-section-1);
+            grid-template-columns: 1fr 1fr 1fr;
+            padding-bottom: 1rem;
+            margin-bottom: 0.8rem;
+        }
+        &-body {
+            grid-template-columns: 2fr 1fr;
+            grid-template-rows: auto auto;
+            display: grid;
+        }
+        &-underlying-trade {
+            grid-template-columns: 1fr 1fr 1fr;
+        }
+        &-profit-payout {
+            grid-template-columns: 1fr 1fr;
+            display: grid;
+            grid-row: 1 / 2;
+            grid-column: 1 / 2;
+            padding: 8px 0;
+            border-radius: $BORDER_RADIUS;
+        }
+        &-price-payout {
+            display: grid;
+            grid-row: 2 / 3;
+            grid-column: 1 / 2;
+            grid-template-columns: 1fr 1fr;
+        }
+    }
+    &__progress {
+        justify-self: end;
+        align-self: center;
+        grid-row: 1 / 3;
+        grid-column: 2 / 3;
+    }
+    &__sell-button {
+        justify-self: end;
+        align-self: center;
+
+        .dc-btn--sell {
+            height: 3.2rem !important;
+        }
+    }
+    &__purchase,
+    &__payout {
+        &-label {
+            text-transform: none;
+            white-space: nowrap;
+            max-width: 90px;
+        }
+        &-value {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            padding: 4px 0 8px;
+        }
+        &-price {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+    &__type {
+        font-size: 1.2rem;
+        display: flex;
+        justify-content: flex-start;
+        font-weight: bold;
+
+        /* postcss-bem-linter: ignore */
+        .category-type {
+            .color1-fill {
+                fill: var(--brand-red-coral);
+            }
+            .color2-fill {
+                fill: var(--brand-secondary);
+            }
+        }
+    }
+    &__symbol {
+        margin-left: 0.5rem;
+        /* iPhone SE screen height fixes due to UI space restrictions */
+        @media only screen and (max-height: 480px) {
+            font-size: 0.9rem;
+        }
+    }
+    &__indicative {
+        font-size: 1.2rem;
+        font-weight: bold;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        color: var(--text-general);
+
+        &-label {
+            font-size: 0.8rem;
+            font-weight: normal;
+            margin-bottom: 4px;
+            white-space: nowrap;
+            max-width: 90px;
+            color: var(--text-general);
+        }
+        &--movement {
+            margin-left: 2px;
+            width: 16px;
+            height: 16px;
+
+            &-complete,
+            &-complete:after {
+                display: none;
+            }
+            &:after {
+                content: '';
+                width: 16px;
+            }
+        }
+    }
+    &__remaining-time {
+        font-size: 1.2em;
+        color: var(--text-general);
+    }
+    &__timer {
+        margin: 0.2rem auto;
+    }
+    &__profit-loss {
+        font-size: 1.2rem;
+        text-align: center;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        font-weight: bold;
+
+        &-label {
+            font-size: 0.8rem;
+            margin-bottom: 4px;
+            font-weight: normal;
+            white-space: nowrap;
+            max-width: 90px;
+            color: var(--text-general);
+            /* iPhone SE screen height fixes due to UI space restrictions */
+            @media only screen and (max-height: 480px) {
+                font-size: 0.8rem;
+            }
+        }
+        &--is-crypto {
+            margin-left: -6px;
+        }
+        &--negative {
+            color: var(--text-loss-danger);
+
+            &:before {
+                content: '-';
+                color: inherit;
+            }
+        }
+        &--positive {
+            color: var(--text-profit-success);
+
+            &:before {
+                content: '+';
+                color: inherit;
+            }
+        }
+    }
+    &__underlying-name {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        font-weight: bold;
+        font-size: 1.2em;
+    }
+    &--multiplier {
+        .dc-contract-card {
+            &__grid-items {
+                grid-template-columns: 1fr 1fr 1fr;
+                padding: 1.2rem 0rem;
+            }
+            &__deal-cancel-fee,
+            &__buy-price,
+            &__stop-loss {
+                order: 1;
+            }
+        }
+        .dc-contract-card__sell-button {
+            border-top: 0rem;
+        }
+    }
+}
+
+/** @define dc-remaining-time; weak */
+.dc-remaining-time {
+    display: inline;
+
+    @include mobile {
+        font-size: 0.9rem;
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/form/time-picker.scss b/packages/reports/src/sass/app/_common/form/time-picker.scss
new file mode 100644
index 000000000000..240329b5c2b6
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/form/time-picker.scss
@@ -0,0 +1,93 @@
+/** @define time-picker */
+.time-picker {
+    position: relative;
+    margin-top: 0.8em;
+
+    &--padding {
+        padding: 1.6em;
+    }
+    &__icon {
+        @extend %inline-icon;
+        position: absolute;
+        bottom: 0;
+        top: 0.8em;
+        left: 5%;
+        z-index: 1;
+        margin: unset;
+        /* postcss-bem-linter: ignore */
+        g {
+            stroke: var(--text-general);
+        }
+    }
+    &__dialog {
+        box-shadow: 0 2px 4px 0 var(--shadow-menu);
+        border-radius: 4px;
+        padding-top: 10px;
+        position: absolute;
+        top: 0;
+        transform-origin: right;
+        transform: scale(1, 0) translate3d(0, 0, 0);
+        transition: transform 0.25s ease, opacity 0.25s linear;
+        width: 231px;
+        z-index: 2;
+        background-color: var(--general-main-2);
+
+        &--enter,
+        &--exit {
+            opacity: 0;
+            transform: scale(1, 1) translate3d(-225px, 0, 0);
+        }
+        &--enter-done {
+            opacity: 1;
+            transform: translate3d(-245px, 0, 0);
+        }
+    }
+    &__selector {
+        height: inherit;
+
+        &--hours {
+            border-right: 1px solid var(--general-section-1);
+            border-radius: 0 0 0 4px;
+            width: 150px;
+        }
+        &--minutes {
+            width: 80px;
+            border-radius: 0 5px 5px 0;
+        }
+        &--hours,
+        &--minutes {
+            display: inline-block;
+            height: 228px;
+            overflow: hidden;
+            text-align: center;
+            border-color: var(--general-section-1);
+            color: var(--text-prominent);
+        }
+        &-list-title {
+            @include typeface(--small-center-bold-black);
+            color: var(--text-prominent);
+        }
+        &-list-item {
+            @include typeface(--small-left-normal-black);
+            cursor: pointer;
+            border-radius: 4px;
+            display: inline-block;
+            margin: 3px;
+            padding: 7px;
+            color: var(--text-general);
+
+            &:hover:not(&--disabled):not(&--selected) {
+                background: var(--state-hover);
+                color: var(--text-general);
+            }
+            &--selected {
+                background: var(--state-active);
+                color: var(--text-prominent) !important;
+            }
+            &--disabled {
+                color: var(--text-disabled);
+                cursor: default;
+            }
+        }
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/layout/trader-layouts.scss b/packages/reports/src/sass/app/_common/layout/trader-layouts.scss
new file mode 100644
index 000000000000..4e86770dac1c
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/layout/trader-layouts.scss
@@ -0,0 +1,797 @@
+/** @define app-contents; weak */
+.app-contents {
+    &--show-positions-drawer:not(&--is-mobile) {
+        .trade-container {
+            .chart-container {
+                width: 100%;
+
+                .sc-navigation-widget,
+                .cq-top-ui-widgets,
+                .sc-toolbar-widget,
+                .stx-panel-control {
+                    transform: translate3d(248px, 0, 0);
+                }
+                .cq-chart-controls {
+                    transform: translate3d(130px, 0, 0) !important;
+                }
+                .cq-bottom-ui-widgets {
+                    .digits__container {
+                        transform: translate3d(130px, 0, 0) !important;
+                    }
+                }
+                .cq-chart-control-left {
+                    .cq-chart-controls {
+                        transform: translate3d(248px, 0, 0) !important;
+                    }
+                    .cq-bottom-ui-widgets {
+                        .digits__container {
+                            transform: translate3d(170px, 40px, 0) !important;
+                        }
+                    }
+                }
+                &__loader {
+                    .barspinner {
+                        transform: translate3d(130px, 0, 0) !important;
+                    }
+                }
+            }
+        }
+    }
+    &--is-mobile {
+        .top-widgets-portal {
+            position: absolute;
+            top: 0px;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            z-index: 1;
+
+            .recent-trade-info {
+                min-width: 8rem;
+                line-height: 2.4rem;
+                margin-left: 0.8rem;
+            }
+        }
+        .cq-chart-title {
+            > .cq-menu-btn {
+                padding: 0.4rem;
+                user-select: none;
+                -webkit-touch-callout: none;
+                -webkit-tap-highlight-color: transparent;
+            }
+        }
+        & .contract-details-wrapper + .smartcharts-undefined {
+            & .cq-symbols-display {
+                display: none;
+            }
+        }
+    }
+}
+
+$FLOATING_HEADER_HEIGHT: 41px;
+/** @define trade-container; weak */
+.trade-container {
+    position: relative;
+    padding: 0.8em 1.2em;
+    display: flex;
+    min-height: calc(100vh - 84px);
+    overflow: hidden;
+
+    &__replay {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        height: calc(100vh - 108px - #{$FLOATING_HEADER_HEIGHT + 12px});
+        padding-bottom: 2.4rem;
+
+        .contract-drawer {
+            /* prettier-ignore */
+            height: calc(100% + 2.4rem);
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+            z-index: 1;
+            overflow: hidden;
+            min-width: 240px;
+
+            &-wrapper {
+                z-index: 4;
+            }
+
+            .dc-contract-card {
+                margin: 0.8rem 0;
+                &__sell-button {
+                    &--exit {
+                        display: none;
+                    }
+                }
+            }
+
+            @include mobile {
+                z-index: 4;
+                height: auto;
+                border-bottom-right-radius: $BORDER_RADIUS;
+                border-top-right-radius: $BORDER_RADIUS;
+                width: calc(100% - 1.6rem);
+                margin-left: 0.8rem;
+                transition: none;
+
+                &__mobile-wrapper {
+                    position: relative;
+                }
+                &--with-collapsible-btn {
+                    overflow: visible;
+                    position: relative;
+                    height: 100%;
+                    display: flex;
+                    flex-direction: column;
+
+                    & .dc-contract-card {
+                        margin-top: 0;
+                    }
+                }
+                &__transition {
+                    &-enter,
+                    &-exit {
+                        transition: transform 0.25s linear;
+                    }
+                }
+                & .dc-contract-card {
+                    &__grid-underlying-trade {
+                        grid-template-columns: 2fr 1fr !important;
+                    }
+                    &__underlying-name {
+                        max-width: none;
+                    }
+                }
+                &--is-multiplier {
+                    & .dc-contract-card {
+                        &__body-wrapper {
+                            flex-direction: column;
+                            padding-top: 0.4rem;
+                        }
+                        &-items-wrapper {
+                            grid-template-columns: 1fr 1fr 1fr;
+                            grid-gap: 0.4rem;
+                            padding-bottom: 0.4rem;
+                            border-bottom: 1px solid var(--general-section-1);
+                            min-height: 80px;
+
+                            @media (max-width: 320px) and (max-height: 480px) {
+                                min-height: unset;
+                            }
+                        }
+                        &-item {
+                            &__total-profit-loss {
+                                flex-direction: row;
+                                margin: 0 auto;
+
+                                & .contract-card-item__header {
+                                    font-size: 1.2rem !important;
+
+                                    @media (max-width: 320px) and (max-height: 480px) {
+                                        font-size: 1rem !important;
+                                    }
+                                }
+                            }
+                            &__header,
+                            &__body {
+                                font-size: 1.2rem;
+                            }
+                            &__body--loss {
+                                padding-left: 0.4rem;
+                            }
+                            &:nth-child(1) {
+                                order: 0;
+                            }
+                            &:nth-child(3),
+                            &:nth-child(5) {
+                                order: 2;
+                            }
+                            &:nth-child(6) {
+                                order: 6;
+                            }
+                            @media only screen and (max-width: 320px) {
+                                &__header {
+                                    font-size: 1rem;
+                                }
+                            }
+                            @media (max-width: 320px) and (max-height: 480px) {
+                                &__body {
+                                    font-size: 1rem;
+                                }
+                            }
+                        }
+                        @media (max-width: 320px) and (max-height: 480px) {
+                            &__symbol,
+                            &__type {
+                                font-size: 1rem;
+                            }
+                            &__sell-button {
+                                padding-top: 0.4rem;
+
+                                & .dc-btn {
+                                    height: 2.6rem;
+
+                                    &__text {
+                                        font-size: 1rem;
+                                    }
+                                }
+                            }
+                            &__footer {
+                                margin-bottom: 0;
+                            }
+                        }
+
+                        &__sell-button {
+                            &--has-cancel-btn {
+                                display: grid;
+                                grid-template-columns: 1fr 1fr;
+                            }
+                            @media (max-width: 320px) and (max-height: 480px) {
+                                & .dc-btn--cancel {
+                                    & .dc-btn__text {
+                                        align-items: center;
+                                    }
+                                    & .dc-remaining-time {
+                                        font-size: 1rem;
+                                        padding-top: 0;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    &.contract-drawer--with-collapsible-btn {
+                        & .dc-contract-card {
+                            &__indicative--movement {
+                                margin-top: 2px;
+                            }
+                        }
+                    }
+                    & .dc-contract-card__grid-underlying-trade,
+                    & .dc-contract-card__footer-wrapper {
+                        grid-template-columns: 1fr 1fr 0.7fr;
+
+                        @media only screen and (max-height: 480px) {
+                            grid-template-columns: 1fr 1fr;
+                        }
+                    }
+                    @media only screen and (max-height: 480px) {
+                        & .dc-contract-card__body-wrapper {
+                            padding-top: 0.2rem;
+                        }
+                    }
+
+                    &-sold {
+                        &.contract-drawer--with-collapsible-btn {
+                            & .dc-contract-card-item {
+                                &__total-profit-loss {
+                                    flex-direction: column;
+                                }
+                                &__body--profit {
+                                    font-size: 1.6rem;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .replay-chart__container {
+            width: 100%;
+            position: relative;
+            margin-left: 24px;
+
+            .smartcharts {
+                left: 0;
+                border-radius: $BORDER_RADIUS;
+
+                .ciq-chart {
+                    .cq-top-ui-widgets,
+                    & .info-box {
+                        transition: transform 0.25s ease;
+
+                        .cq-symbols-display {
+                            z-index: 1;
+
+                            &.ciq-disabled {
+                                display: none;
+                            }
+                        }
+                        .info-box-container {
+                            transform: none;
+                            opacity: 1;
+                            left: 1px;
+
+                            .chart-close-btn {
+                                display: none;
+                            }
+                        }
+                    }
+                    .sc-toolbar-widget,
+                    .stx-panel-control,
+                    .sc-navigation-widget {
+                        transition: transform 0.25s ease;
+                    }
+                    .ciq-asset-information {
+                        top: 75px;
+                    }
+                    .stx_jump_today.home > svg {
+                        top: 10px;
+                        left: 8px;
+                        padding: 0;
+                        position: absolute;
+                    }
+                    .cq-bottom-ui-widgets {
+                        bottom: 30px !important;
+
+                        .digits {
+                            margin-right: 0;
+
+                            &__container {
+                                transition: transform 0.25s ease;
+                            }
+                        }
+                    }
+                }
+
+                /* postcss-bem-linter: ignore */
+                &-mobile {
+                    /* TODO: Remove this override once the issue is fixed in smartcharts */
+                    .stx-holder.stx-panel-chart {
+                        z-index: 14;
+
+                        .cq-inchart-holder {
+                            z-index: 107;
+                            position: relative;
+                        }
+                    }
+
+                    .cq-context {
+                        height: 100%;
+                    }
+                }
+            }
+
+            &-swipeable-wrapper {
+                .dc-swipeable__item {
+                    margin-left: 0.8rem;
+                    width: calc(100vw - 1.6rem);
+                }
+            }
+
+            @include mobile {
+                height: 100%;
+                width: calc(100% - 1.6rem);
+                margin-left: 0.8rem;
+            }
+        }
+        @include mobile {
+            display: flex;
+            flex-direction: column-reverse;
+            height: 100%;
+            padding-bottom: 0;
+            position: relative;
+
+            #dt_contract_drawer_audit {
+                flex: 1;
+                overflow: auto;
+            }
+
+            & .contract-audit-card {
+                height: calc(100% - 1rem);
+                &__container {
+                    height: 100%;
+                }
+            }
+        }
+    }
+    @include mobile {
+        flex-direction: column;
+        min-height: calc(100vh - 48px);
+        padding: 0;
+    }
+}
+
+/** @define mobile-wrapper; weak */
+.mobile-wrapper {
+    padding: 0 0.8rem;
+    display: flex;
+    flex-direction: column;
+    height: 212px;
+    position: relative;
+
+    &__content-loader {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        left: 0;
+        bottom: -0.8rem;
+
+        svg {
+            height: 100%;
+            width: 100%;
+        }
+    }
+}
+
+/** @define chart-container; weak */
+.chart-container {
+    width: 100%;
+    position: relative;
+
+    &__wrapper {
+        position: fixed;
+        top: calc(#{$HEADER_HEIGHT} + 2px);
+        // charts width is 100% - sidebar width - sidebar margin - .trade-container padding
+        width: calc(100% - 240px - 1.6rem - 2.4rem);
+        height: calc(100vh - #{$HEADER_HEIGHT} - #{$FOOTER_HEIGHT});
+    }
+    &__loader {
+        position: absolute;
+        height: calc(100% - 68px);
+        width: calc(100% - 12px);
+        top: 54px;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: $BORDER_RADIUS;
+        background-color: var(--general-main-1);
+
+        .initial-loader {
+            pointer-events: none;
+        }
+        .barspinner {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 0;
+            width: 100%;
+            height: 18px;
+        }
+        & + .smartcharts {
+            visibility: hidden;
+            pointer-events: none;
+
+            .chart-marker-line__wrapper,
+            .cq-chart-controls,
+            .cq-symbols-display,
+            .cq-bottom-ui-widgets,
+            .cq-inchart-subholder {
+                display: none;
+            }
+        }
+    }
+    // smartchart library style fixes
+    .smartcharts-mobile {
+        .sc-categorical-display {
+            height: calc(100% - 8px) !important;
+        }
+        .ciq-chart {
+            padding: 0 0.8rem;
+        }
+    }
+    .cq-context {
+        top: 0;
+        left: 0;
+        z-index: 0;
+
+        div.ciq-chart {
+            height: 100%;
+            box-shadow: none;
+
+            div.cq-last-digits {
+                bottom: 15px;
+                left: calc(45% - 150px);
+            }
+            .info-box div.cq-chart-controls {
+                box-shadow: none;
+            }
+            // TODO: enable asset information
+            // div.ciq-asset-information {
+            //     z-index: 0;
+            //     top: 0;
+            //     left: 0;
+            // }
+            div.stx_jump_today.home > svg {
+                top: 10px;
+                left: 8px;
+                padding: 0;
+                position: absolute;
+            }
+            div.stx-marker {
+                z-index: 2;
+
+                &:not(.chart-marker-line) {
+                    animation: fadeIn 0.2s;
+                }
+            }
+        }
+        div.cq-chart-control-left {
+            .cq-top-ui-widgets {
+                width: calc(100% - 9em);
+            }
+        }
+    }
+    div.debug-text {
+        display: none;
+    }
+    .cq-chart-control-left {
+        .cq-chart-controls,
+        .sc-toolbar-widget,
+        .stx-panel-control,
+        .sc-navigation-widget {
+            transform: translate3d(0, 0, 0);
+            transition: transform 0.25s ease;
+        }
+        .cq-top-ui-widgets {
+            left: 9em;
+
+            .info-box {
+                transform: translate3d(0, 0, 0);
+            }
+        }
+    }
+    .ciq-chart {
+        .cq-top-ui-widgets,
+        & .info-box {
+            transition: transform 0.25s ease;
+
+            .cq-symbols-display {
+                z-index: 1;
+
+                &.ciq-disabled {
+                    display: none;
+                }
+                @include mobile {
+                    top: 0.8rem;
+                    left: 0.8rem;
+                    min-width: 170px;
+                    max-width: 260px;
+                    width: auto;
+
+                    .cq-menu-btn {
+                        padding: 0.2rem;
+                    }
+                    .cq-symbol-select-btn {
+                        padding: 0.3rem 0.9rem;
+
+                        .cq-symbol-dropdown {
+                            transform: scale(1);
+                            margin-left: auto;
+                        }
+                        .cq-symbol {
+                            font-size: 1.2rem;
+                        }
+                        .cq-chart-price {
+                            display: none;
+                        }
+                    }
+                }
+            }
+        }
+        .cq-chart-controls {
+            transition: max-width 0.25s ease, transform 0.25s ease;
+        }
+        .sc-navigation-widget,
+        .stx-panel-control {
+            transition: transform 0.25s ease;
+        }
+        .sc-toolbar-widget {
+            transition: transform 0.25s ease;
+
+            @include mobile {
+                background: transparent;
+                border-width: 0;
+                bottom: 2.8rem;
+
+                /* postcss-bem-linter: ignore */
+                .sc-chart-mode,
+                .sc-studies {
+                    background: var(--general-section-1);
+                    padding: 0.4rem 0.2rem;
+                    width: 4rem;
+                    height: 4rem;
+                    display: flex;
+                    border-radius: 50%;
+                    justify-content: center;
+                    align-items: center;
+                    margin: 0.8rem;
+                    opacity: 0.75;
+
+                    &__menu {
+                        &__timeperiod {
+                            top: 0.8rem;
+                            left: 0.8rem;
+                        }
+                        & > .ic-icon {
+                            top: 0.6rem;
+                        }
+                    }
+                }
+            }
+        }
+        &--screenshot {
+            .sc-toolbar-widget,
+            .stx-panel-control,
+            .sc-navigation-widget,
+            .cq-top-ui-widgets {
+                transform: translate3d(0, 0, 0) !important;
+            }
+        }
+    }
+    .chartContainer {
+        background: transparent;
+        min-height: 100%;
+    }
+}
+
+/** @define sidebar; weak; */
+.sidebar {
+    &__container {
+        position: relative;
+        margin: 0.8rem 0 0.8rem 1.6rem;
+        width: $SIDEBAR_WIDTH;
+        z-index: 5;
+    }
+    &__items {
+        opacity: 1;
+        transform: none;
+        position: relative;
+        min-height: 460px;
+        width: $SIDEBAR_WIDTH;
+
+        &:after {
+            transition: opacity 0.25s cubic-bezier(0.25, 0.1, 0.1, 0.25);
+            opacity: 0;
+            position: absolute;
+            pointer-events: none;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 999;
+            content: '';
+            background-color: var(--overlay-outside-dialog);
+        }
+        &--market-closed {
+            & .dc-tooltip--with-label {
+                display: none;
+            }
+            & .dc-tooltip--with-label:before,
+            .dc-tooltip--with-label:after {
+                display: none;
+            }
+        }
+    }
+}
+
+// TODO: improve handling of rendering markets dropdown via portals from smartcharts library
+/** @define smartcharts-portal; weak */
+.smartcharts-portal {
+    @include mobile {
+        &--open {
+            .smartcharts {
+                z-index: 9999;
+            }
+        }
+    }
+}
+
+/** @define contract; weak */
+.contract {
+    // TODO: Remove below if redundant
+    &-update {
+        /* postcss-bem-linter: ignore */
+        &__wrapper {
+            display: flex;
+            flex-direction: column;
+
+            /* postcss-bem-linter: ignore */
+            & .dc-tooltip:before,
+            & .dc-tooltip:after {
+                display: none;
+            }
+            /* postcss-bem-linter: ignore */
+            & .dc-contract-card-dialog__button {
+                display: flex;
+                align-items: flex-end;
+            }
+        }
+    }
+    &--enter {
+        transform: translate3d(calc(100% + 1.6em), 0, 0);
+        opacity: 0;
+    }
+    &--exit {
+        transform: translate3d(calc(100% + 1.6em), 0, 0);
+        opacity: 0;
+        pointer-events: none;
+    }
+}
+
+/** @define smartcharts; weak */
+/* postcss-bem-linter: ignore */
+.smartcharts {
+    &-dark,
+    &-light {
+        @include mobile {
+            /* postcss-bem-linter: ignore */
+            .cq-menu-dropdown-enter-done {
+                margin-top: 0;
+
+                /* postcss-bem-linter: ignore */
+                .icon-close-menu {
+                    opacity: 1;
+                    pointer-events: auto;
+                    top: 8px;
+                }
+            }
+            .cq-dialog-portal {
+                /* postcss-bem-linter: ignore */
+                .cq-dialog {
+                    max-width: calc(100% - 36px);
+                }
+            }
+            /** @define ciq-chart-type; weak */
+            .sc-chart-type {
+                &__item {
+                    /* postcss-bem-linter: ignore */
+                    .sc-tooltip,
+                    .dc-tooltip {
+                        display: none;
+                    }
+                }
+            }
+            /** @define ciq-chart-mode; weak */
+            .sc-chart-mode {
+                /* postcss-bem-linter: ignore */
+                &__section__item {
+                    /* postcss-bem-linter: ignore */
+                    .sc-interval {
+                        display: grid;
+                        padding: 1.6rem;
+                        grid-template-columns: 1fr;
+
+                        /* postcss-bem-linter: ignore */
+                        &__content {
+                            display: grid;
+                            grid-template-columns: 1fr 1fr 1fr;
+                            padding-top: 16px;
+                        }
+                        /* postcss-bem-linter: ignore */
+                        &__item {
+                            width: 100% !important;
+                            margin: 0;
+
+                            /* postcss-bem-linter: ignore */
+                            .sc-tooltip,
+                            .dc-tooltip {
+                                display: none;
+                            }
+                        }
+                        /* postcss-bem-linter: ignore */
+                        &__info {
+                            margin-top: 0.4rem;
+                            padding-left: 0.2rem;
+                        }
+                    }
+                }
+            }
+            /** @define cq-top-ui-widgets; weak */
+            .cq-top-ui-widgets {
+                z-index: 15 !important;
+            }
+        }
+    }
+    /* TODO: Remove this override once the issue is fixed in smartcharts */
+    /* postcss-bem-linter: ignore */
+    @at-root body.theme--light & .chart-line.horizontal .title-wrapper {
+        background-image: linear-gradient(
+            rgba(255, 255, 255, 0.001) 30%,
+            var(--general-main-1) 50%,
+            rgba(255, 255, 255, 0.001) 75%
+        );
+    }
+}
diff --git a/packages/reports/src/sass/app/_common/mobile-widget.scss b/packages/reports/src/sass/app/_common/mobile-widget.scss
new file mode 100644
index 000000000000..b9896a97cd8a
--- /dev/null
+++ b/packages/reports/src/sass/app/_common/mobile-widget.scss
@@ -0,0 +1,159 @@
+/** @define mobile-widget */
+.mobile-widget {
+    border-radius: 4px;
+    padding: 1rem 0.8rem;
+    height: 4rem;
+    background-color: var(--general-main-1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 0 0.8rem;
+    flex: 1;
+
+    &__amount {
+        @include typeface(--paragraph-center-bold-black);
+        color: var(--text-prominent);
+    }
+    &__duration {
+        @include typeface(--paragraph-center-normal-black);
+        color: var(--text-prominent);
+    }
+    &__type {
+        @include typeface(--paragraph-center-normal-black);
+        color: var(--text-less-prominent);
+    }
+    &__item {
+        color: var(--text-prominent);
+        line-height: 1.4rem;
+
+        &-value {
+            font-weight: bold;
+            font-size: 1.2rem;
+        }
+    }
+    &__multiplier {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 0;
+
+        &-amount {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 0.4rem 0.8rem 0;
+
+            .mobile-widget__item-label {
+                margin-right: 0.4rem;
+            }
+        }
+        &-expiration {
+            min-width: 7.2rem;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        &-options {
+            flex: none;
+            flex-direction: column;
+            padding: 0.6rem 0.8rem;
+            margin-bottom: 0.6rem;
+            margin-left: 0.8rem;
+            justify-content: center;
+            min-width: 8.8rem;
+
+            .mobile-widget__item-label {
+                color: var(--text-general);
+            }
+        }
+        &-risk-management {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: stretch;
+            margin-bottom: 0.6rem;
+            color: var(--text-general);
+            padding: 0.4rem 0.8rem;
+
+            .mobile-widget__item {
+                flex: 1;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+            .mobile-widget__item-label {
+                color: var(--text-general);
+            }
+            .mobile-widget__item-label,
+            .mobile-widget__item-value {
+                font-size: 1.4rem;
+                line-height: 1.8rem;
+            }
+        }
+        &-trade-info {
+            display: flex;
+            justify-content: space-evenly;
+            background: var(--general-main-1);
+            flex: 2;
+            margin-left: 0.8rem;
+
+            &--no-stop-out {
+                justify-content: flex-end;
+                margin-right: 1.6rem;
+            }
+            &-tooltip-text {
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+
+                span:before {
+                    content: ': ';
+                }
+                &:first-child {
+                    margin-right: 0.8rem;
+                }
+                @media only screen and (max-width: 340px) {
+                    font-size: 0.8rem;
+                }
+            }
+        }
+    }
+    &__wrapper {
+        display: flex;
+
+        .mobile-widget:last-child:not(:only-child) {
+            margin-left: 0.8rem;
+            flex: unset;
+        }
+    }
+}
+
+/** @define fieldset-minimized */
+.fieldset-minimized {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.5em;
+    white-space: pre-line;
+
+    &__amount {
+        grid-area: c;
+    }
+    &__barrier1 {
+        grid-area: b;
+    }
+    &__barrier2 {
+        grid-area: d;
+    }
+    &__currency:before {
+        margin-right: 0.1em;
+        position: static;
+        display: inline;
+        font-size: 1em;
+    }
+    &__basis {
+        font-weight: bold;
+        color: var(--text-prominent);
+    }
+}
diff --git a/packages/reports/src/sass/app/modules/contract.scss b/packages/reports/src/sass/app/modules/contract.scss
new file mode 100644
index 000000000000..c67dfeb6a995
--- /dev/null
+++ b/packages/reports/src/sass/app/modules/contract.scss
@@ -0,0 +1,165 @@
+$CONTRACT_INFO_BOX_PADDING: 1.6em;
+
+.info-box-container {
+    position: absolute;
+    z-index: 3;
+    top: 1em;
+    right: 1em;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+
+    &-button:hover {
+        cursor: pointer;
+    }
+    &-icon {
+        width: 32px;
+        height: 32px;
+    }
+    .info-box {
+        position: relative;
+        border-radius: $BORDER_RADIUS;
+        padding: $CONTRACT_INFO_BOX_PADDING;
+        background: var(--general-section-1);
+        font-weight: 300;
+
+        &-longcode {
+            display: flex;
+
+            &-icon {
+                @extend %inline-icon;
+                margin-right: 1.6rem;
+                padding: 0.4rem;
+
+                @include mobile {
+                    margin-right: 0.8rem;
+                }
+            }
+            &-text {
+                max-width: 360px;
+
+                @include mobile {
+                    max-width: 175px;
+                    line-height: 1.4;
+                    letter-spacing: normal;
+                    font-size: 1rem;
+                    /* iPhone SE screen height fixes due to UI space restrictions */
+                    @media only screen and (max-height: 480px) {
+                        font-size: 0.8rem;
+                    }
+                }
+            }
+        }
+        .expired {
+            display: flex;
+            align-items: center;
+
+            svg {
+                width: 2.4em;
+                height: 2.4em;
+                margin-right: 1em;
+
+                .color1-fill {
+                    fill: var(--status-success);
+                }
+            }
+            .pl-value {
+                color: var(--text-profit-success);
+                font-weight: bold;
+                font-size: 1.6em;
+                line-height: 1.5em;
+
+                .percentage {
+                    display: inline-block;
+                    margin-left: 0.7em;
+                }
+            }
+            &.lost {
+                .pl-value {
+                    color: var(--text-loss-danger);
+                }
+                svg .color1-fill {
+                    fill: var(--status-danger);
+                }
+            }
+            .sell-info {
+                margin-right: 2em;
+                text-align: center;
+                line-height: 1.2em;
+            }
+        }
+        .general {
+            display: flex;
+            align-items: center;
+            line-height: 1.4em;
+
+            .values {
+                margin-left: 1em;
+                margin-right: 2em;
+                text-align: right;
+                font-weight: bold;
+
+                .profit {
+                    color: var(--text-profit-success);
+                }
+                .loss {
+                    color: var(--text-loss-danger);
+                }
+            }
+            .sell {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                text-align: center;
+                margin: -$CONTRACT_INFO_BOX_PADDING;
+                margin-left: $CONTRACT_INFO_BOX_PADDING;
+                padding: $CONTRACT_INFO_BOX_PADDING;
+
+                .dc-tooltip {
+                    position: absolute;
+                    bottom: 0.5em;
+                    right: 0.5em;
+                    line-height: 0;
+
+                    &:before {
+                        width: 350px;
+                        white-space: normal;
+                    }
+                }
+            }
+        }
+        @include mobile {
+            padding: 0.8rem;
+            margin-left: 0.8rem;
+        }
+    }
+    .message {
+        margin-top: 0.5em;
+        border: 1px solid var(--brand-red-coral);
+        border-radius: $BORDER_RADIUS;
+        padding: 1em;
+        background-color: transparentize($color-black, 0.84);
+        display: flex;
+        align-items: center;
+
+        .message-icon {
+            margin-right: 1em;
+        }
+        .message-text {
+            flex-grow: 1;
+        }
+        .message-close {
+            cursor: pointer;
+        }
+    }
+    .chart-close-btn {
+        position: absolute;
+        cursor: pointer;
+        z-index: 11;
+        right: 0;
+        top: 0;
+    }
+    @include mobile {
+        left: 0;
+    }
+}
diff --git a/packages/reports/src/sass/app/modules/contract/bottom-widgets.scss b/packages/reports/src/sass/app/modules/contract/bottom-widgets.scss
new file mode 100644
index 000000000000..9dd994c8370a
--- /dev/null
+++ b/packages/reports/src/sass/app/modules/contract/bottom-widgets.scss
@@ -0,0 +1,10 @@
+/** @define bottom-widgets */
+.bottom-widgets {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    bottom: 2em;
+}
diff --git a/packages/reports/src/sass/app/modules/contract/digits.scss b/packages/reports/src/sass/app/modules/contract/digits.scss
new file mode 100644
index 000000000000..76dc2ae097d4
--- /dev/null
+++ b/packages/reports/src/sass/app/modules/contract/digits.scss
@@ -0,0 +1,464 @@
+/** @define cq-bottom-ui-widgets; weak */
+.cq-bottom-ui-widgets {
+    z-index: 4;
+    overflow: visible;
+    height: 0;
+    top: unset !important;
+    bottom: 80px;
+
+    .bottom-widgets {
+        left: -3.5em;
+    }
+}
+
+/** @define digits; weak */
+.digits {
+    $self: &;
+    display: flex;
+    align-items: center;
+    position: relative;
+    margin: 0 2.5em 0 1em;
+
+    &__container {
+        position: relative;
+
+        /* Screen height fixes due to UI space restrictions */
+        @media only screen and (max-height: 520px) {
+            transform: scale(0.85);
+            transform-origin: bottom;
+            padding: 0 0.8rem !important;
+        }
+        @media only screen and (max-height: 480px) {
+            transform: scale(0.75);
+        }
+    }
+    &__tooltip-container {
+        position: absolute;
+        z-index: 2;
+        top: -10px;
+        right: 10px;
+    }
+    &__digit {
+        pointer-events: none;
+        margin: 0 0.6em;
+        text-align: center;
+        position: relative;
+        transition: transform 0.25s linear;
+
+        &--latest {
+            z-index: 1;
+            transform: scale(1.2);
+
+            .digits__digit-spot {
+                font-size: 0.9em;
+            }
+        }
+        &--win {
+            z-index: 1;
+            transform: scale(1.25);
+
+            .digits__pie-container:before {
+                box-shadow: 0px 1px 18px var(--text-profit-success);
+            }
+        }
+        &--loss {
+            z-index: 1;
+            transform: scale(1.25);
+
+            .digits__pie-container:before {
+                top: -2px;
+                left: -2px;
+                box-shadow: 0px 1px 18px var(--text-loss-danger);
+                border: 3px solid var(--text-loss-danger);
+
+                @include mobile {
+                    top: -1px;
+                    left: -3px;
+                }
+            }
+        }
+        &--is-selected {
+            .digits__digit-display {
+                &-value,
+                &-percentage {
+                    color: $color-white;
+                }
+            }
+            .progress__bg {
+                fill: $color-blue-2;
+            }
+        }
+        &--is-selectable {
+            pointer-events: auto;
+
+            &:focus,
+            &:active,
+            &:hover {
+                .digits__digit-display {
+                    &-value,
+                    &-percentage {
+                        color: $color-white;
+                    }
+                }
+                .progress__bg {
+                    fill: $color-blue-2;
+                }
+            }
+        }
+        &-display-value {
+            transition: transform 0.25s linear;
+            position: absolute;
+            transform: scale(0.9);
+            top: 4px;
+            color: var(--text-prominent);
+
+            &--no-stats {
+                transform: scale(1) translateY(5px);
+            }
+
+            @include mobile {
+                top: 10px;
+                transform: none;
+                font-size: 1.4rem;
+                line-height: 1.43;
+
+                &--no-stats {
+                    top: 15px;
+                }
+            }
+        }
+        &-display-percentage {
+            top: 20px;
+            position: absolute;
+            font-size: 0.65em;
+            font-weight: 400;
+            color: var(--text-general);
+
+            @include mobile {
+                top: 25px;
+                transform: none;
+                font-size: 1rem;
+                line-height: 1.4;
+            }
+        }
+        &-value {
+            @include typeface(--paragraph-center-bold-black);
+            width: 40px;
+            height: 40px;
+            background-color: var(--general-main-1);
+            color: var(--text-prominent);
+            margin-bottom: 0.5em;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transition: background-color 0.2s ease-out, transform 0.1s ease-out;
+
+            &--selected {
+                background-color: var(--general-main-2);
+            }
+            &--win {
+                background-color: var(--text-profit-success);
+                color: var(--text-prominent);
+
+                .digits__digit-display-value,
+                .digits__digit-display-percentage {
+                    color: $color-white;
+                }
+            }
+            &--blink {
+                animation-duration: 500ms;
+                animation-iteration-count: 4;
+                animation-timing-function: step-end;
+                animation-name: blinking;
+            }
+            &--loss {
+                border: none !important;
+                background-color: var(--text-loss-danger);
+                color: var(--text-prominent);
+
+                .digits__digit-display-value,
+                .digits__digit-display-percentage {
+                    color: $color-white;
+                }
+            }
+            @include mobile {
+                height: 48px;
+                width: 48px;
+                margin: 0;
+            }
+        }
+        &-spot {
+            position: absolute;
+            top: -25px;
+            left: -50%;
+            right: -50%;
+            width: auto;
+            white-space: nowrap;
+
+            &-value {
+                transform: scale(0.95);
+                display: inline-block;
+            }
+            &-last {
+                @include typeface(--paragraph-center-bold-black);
+                padding: 0 4px;
+                margin-left: 1px;
+                border-radius: 50%;
+                border: 1px solid $color-blue;
+                color: var(--text-prominent);
+                background: var(--general-main-2);
+
+                &--selected-win {
+                    color: var(--text-profit-success);
+                }
+                &--win {
+                    color: var(--text-colored-background);
+                    border-color: var(--text-profit-success);
+                    background: var(--text-profit-success);
+                }
+                &--loss {
+                    color: var(--text-colored-background);
+                    border-color: var(--text-loss-danger);
+                    background: var(--text-loss-danger);
+                }
+            }
+            @include mobile {
+                display: flex;
+                justify-content: center;
+                top: 1.6rem;
+                left: 0;
+                right: 0;
+                margin-top: 4.8rem;
+                pointer-events: none;
+
+                &-value,
+                &-last {
+                    font-size: 2rem;
+                }
+                &-last {
+                    padding: 0 8px;
+                }
+                &:not(&--is-trading) {
+                    position: relative;
+                    top: 0.8rem;
+                }
+                /* iPhone 8 screen height fixes due to UI space restrictions */
+                @media only screen and (max-height: 580px) {
+                    &--is-trading {
+                        &-value,
+                        &-last {
+                            font-size: 1.4rem;
+                        }
+                        &-last {
+                            padding: 0 7px;
+                        }
+                    }
+                }
+                @media only screen and (max-height: 580px) {
+                    position: relative;
+
+                    &:not(&--is-trading) {
+                        top: 1.4rem;
+                    }
+                }
+                @media only screen and (max-height: 520px) {
+                    position: relative;
+                    top: 0;
+                    margin-top: 1.6rem;
+
+                    &--is-trading {
+                        margin-top: auto;
+                    }
+                }
+            }
+        }
+    }
+    &__pie-container {
+        position: absolute;
+        top: -1px;
+        left: -1px;
+
+        &:before {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            top: 1px;
+            left: 1px;
+            content: '';
+
+            @include mobile {
+                top: -4px;
+                left: -2px;
+                width: 48px;
+                height: 48px;
+            }
+        }
+        &--selected:before {
+            top: -2px;
+            left: -2px;
+            width: 42px;
+            height: 42px;
+            border: 2px solid var(--text-profit-success);
+
+            @include mobile {
+                top: 0;
+                left: -2px;
+                width: 48px;
+                height: 48px;
+            }
+        }
+    }
+    &__pie-progress {
+        transform: rotate(-90deg);
+        width: 42px;
+        height: 42px;
+
+        /* postcss-bem-linter: ignore */
+        .progress__bg {
+            stroke: var(--general-disabled);
+        }
+        /* postcss-bem-linter: ignore */
+        .progress__value {
+            stroke: var(--text-less-prominent);
+
+            /* postcss-bem-linter: ignore */
+            &--is-max {
+                stroke: var(--text-profit-success);
+            }
+            /* postcss-bem-linter: ignore */
+            &--is-min {
+                stroke: var(--text-loss-danger);
+            }
+        }
+        @include mobile {
+            width: 48px;
+            height: 48px;
+            margin-top: 0.2rem;
+        }
+    }
+    &__pointer {
+        position: absolute;
+        bottom: -12px;
+        padding: 0 12px;
+        transition: transform 0.25s ease;
+
+        @include mobile {
+            left: -2px;
+        }
+    }
+    &__particles {
+        position: absolute;
+        padding: 0 20px;
+        top: 8px;
+        transform: rotate(45deg);
+        opacity: 0;
+
+        &-particle {
+            background: var(--brand-secondary);
+            opacity: 0.7;
+            border-radius: 50%;
+            display: block;
+            width: 5px;
+            height: 5px;
+            position: absolute;
+            transition: transform 0.5s ease, opacity 0.5s linear 0.5s;
+        }
+        &--explode {
+            opacity: 1;
+
+            .digits__particles-particle {
+                opacity: 0;
+
+                &:nth-child(1) {
+                    transform: translate(45px, 45px);
+                }
+                &:nth-child(2) {
+                    transform: translate(45px, 0px);
+                }
+                &:nth-child(3) {
+                    transform: translate(0px, 45px);
+                }
+                &:nth-child(4) {
+                    transform: translate(-45px, 45px);
+                }
+                &:nth-child(5) {
+                    transform: translate(-45px, -45px);
+                }
+                &:nth-child(6) {
+                    transform: translate(-45px, 0px);
+                }
+                &:nth-child(7) {
+                    transform: translate(0px, -45px);
+                }
+                &:nth-child(8) {
+                    transform: translate(45px, -45px);
+                }
+            }
+        }
+    }
+    &__icon {
+        &-color {
+            fill: var(--brand-orange);
+        }
+        &--win .digits__icon-color {
+            fill: var(--text-profit-success);
+        }
+        &--loss .digits__icon-color {
+            fill: var(--text-loss-danger);
+        }
+    }
+    @include mobile {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        grid-gap: 2.4rem 1.6rem;
+        align-items: center;
+        margin: 1.6rem 0;
+
+        &--trade {
+            grid-gap: 2rem 1.6rem;
+            margin: auto 0;
+            transform: scale(1.1);
+            transform-origin: bottom;
+
+            @media only screen and (max-height: 580px) {
+                transform: unset;
+                transform-origin: unset;
+            }
+            @media only screen and (max-height: 480px) {
+                margin: auto 0 4.8rem;
+            }
+        }
+        &__container {
+            width: 100%;
+            margin: 0;
+            padding: 0.8rem;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+        &__tooltip-text {
+            font-size: 1.2rem;
+            color: var(--text-general);
+            line-height: 18px;
+            text-align: center;
+        }
+        &__digit {
+            margin: auto;
+        }
+    }
+    @include mobile {
+        @at-root .popup-root #{$self}__toast-info {
+            top: 10.5rem;
+        }
+    }
+}
+
+@keyframes blinking {
+    50% {
+        background-color: var(--general-main-1);
+        color: var(--text-general);
+    }
+}
diff --git a/packages/reports/src/sass/app/modules/mt5/cfd-dashboard.scss b/packages/reports/src/sass/app/modules/mt5/cfd-dashboard.scss
new file mode 100644
index 000000000000..c4289961409a
--- /dev/null
+++ b/packages/reports/src/sass/app/modules/mt5/cfd-dashboard.scss
@@ -0,0 +1,1539 @@
+/*
+*  [Work In Progress]
+*  This file is a WIP and will be broken down into different files for different components before the module is enabled
+*  Class names might change, properties and values will definitely change
+* */
+
+/* stylelint-disable */
+/** @define cfd-dashboard; */
+.cfd-dashboard {
+    padding: 4.8em 0;
+    max-width: fit-content;
+    margin: 0 auto;
+
+    &__dxtrade-download {
+        background: $color-black-7;
+        border-radius: $BORDER_RADIUS;
+        text-decoration: none;
+        display: grid;
+        grid-template-columns: 32px 1fr;
+        grid-gap: 0.8rem;
+        width: 12.7rem;
+        align-items: center;
+        height: 4rem;
+        border: 1px solid #a6a6a6;
+
+        &-text {
+            display: flex;
+            flex-direction: column;
+            padding: 0.4rem 0rem 0.4rem 0.2rem;
+        }
+        &--icon {
+            margin-left: 0.6rem;
+        }
+    }
+    &--hint {
+        @include typeface(--xsmall-left-normal-black, none);
+    }
+    &__container {
+        position: relative;
+        overflow-y: auto;
+
+        .notification-messages {
+            position: fixed;
+            right: 16px;
+            top: 64px;
+        }
+    }
+    &__info {
+        background: var(--fill-disabled);
+        margin-top: 5rem;
+        font-size: 1.4rem;
+        color: var(--text-general);
+        display: grid;
+        grid-template-columns: 0.85fr 1fr 1fr;
+        height: 56px;
+        border-radius: $BORDER_RADIUS;
+
+        &-description,
+        &-copy {
+            display: flex;
+            align-items: center;
+        }
+        &-description {
+            justify-content: flex-start;
+            padding-left: 3.2rem;
+        }
+        &-copy {
+            justify-content: center;
+            font-size: 1.6rem;
+            font-weight: bold;
+            color: var(--text-prominent);
+        }
+        &-display {
+            padding-right: 0.8rem;
+        }
+        &-label {
+            padding-right: 0.4rem;
+        }
+        @include mobile {
+            display: flex;
+            height: 100%;
+            padding: 1.6rem;
+            flex-direction: column;
+            align-items: flex-start;
+
+            &-copy {
+                margin: 0 0 0.8rem;
+                font-size: 1.4rem;
+            }
+            &-description {
+                margin: 0.8rem 0 1.6rem;
+            }
+        }
+    }
+    &__welcome-message {
+        margin-bottom: 2.4rem;
+
+        &--heading {
+            @include typeface(--title-center-bold-black, none);
+            color: var(--text-general);
+        }
+    }
+    &__missing-real {
+        align-items: center;
+        background-color: var(--general-section-1);
+        display: flex;
+        justify-content: space-between;
+        margin: 2.4em 0 0;
+        max-width: 960px;
+        padding: 1.6rem;
+
+        &--heading {
+            color: var(--text-prominent);
+            line-height: 1.5;
+            margin-right: 1rem;
+
+            @include desktop {
+                white-space: nowrap;
+            }
+            @include typeface(--title-left-bold-black, none);
+            @include mobile {
+                font-size: 1.2rem;
+            }
+        }
+        &--button {
+            height: 4rem;
+        }
+        @include mobile {
+            flex-direction: column;
+            padding: 0.8rem;
+            width: calc(100vw - 3.2rem);
+
+            &--heading {
+                margin-bottom: 0.8rem;
+                margin-right: 0;
+            }
+            &--button {
+                width: 27rem;
+            }
+        }
+    }
+    &__download-center {
+        border-top: 2px solid var(--general-section-1);
+        padding-top: 2rem;
+        padding-bottom: 5.8rem;
+
+        &-options {
+            display: flex;
+            justify-content: center;
+
+            &--desktop {
+                display: block;
+                align-items: baseline;
+                flex-flow: column nowrap;
+
+                &-links {
+                    display: flex;
+                    flex-direction: column;
+                }
+                &-row {
+                    display: flex;
+                    align-items: baseline;
+                    justify-content: center;
+                    margin-bottom: 3.1rem;
+
+                    > svg:first-child {
+                        margin-bottom: 0.4rem;
+                        margin-right: 0.8rem;
+                    }
+                    a > svg {
+                        margin-top: 0.8rem;
+                        margin-right: 0.8rem;
+                    }
+                }
+                &-download {
+                    display: grid;
+                    grid-auto-flow: column;
+                    grid-gap: 0.8rem;
+                    justify-content: center;
+
+                    a {
+                        margin-top: 0.4rem;
+                    }
+                }
+            }
+            &--mobile {
+                align-items: center;
+                display: flex;
+                flex-flow: column nowrap;
+                margin-left: 4.7rem;
+
+                &-devices {
+                    margin-bottom: 1.6em;
+                    svg:first-child {
+                        margin-right: 0.8em;
+                    }
+                }
+                &-link:not(:first-child) {
+                    margin-left: 1.6rem;
+                }
+                @include mobile {
+                    margin-left: unset;
+                    margin-right: unset;
+                }
+            }
+        }
+        &--heading {
+            @include typeface(--title-center-bold-black, none);
+            color: var(--text-general);
+            line-height: 1.5;
+            margin-left: 2.1rem;
+            margin-bottom: 4.2rem;
+            @include desktop {
+                margin-left: 0;
+                text-align: center;
+            }
+        }
+        &--hint {
+            margin-top: 1.6rem;
+        }
+        @include mobile {
+            margin-bottom: 1.6rem;
+        }
+    }
+    &__maintenance {
+        @include typeface(--small-center-normal-black, none);
+        display: flex;
+        justify-content: center;
+        margin: 2.4rem 0;
+
+        &-icon {
+            margin-right: 0.8rem;
+            margin-top: 0.2rem;
+
+            @include mobile {
+                margin-top: -0.2rem;
+            }
+        }
+        &-text {
+            text-align: left;
+            line-height: 1.67;
+        }
+    }
+    &__real-accounts-wrapper {
+        display: flex;
+        flex-direction: column;
+    }
+    .notification-messages {
+        top: calc(-4.8rem + 16px);
+    }
+    @include mobile {
+        margin-top: 2.4rem;
+        padding: 0 1.6rem;
+    }
+}
+
+.cfd-attribute-describer {
+    .counter {
+        color: var(--brand-red-coral);
+        vertical-align: top;
+    }
+    @include mobile {
+        font-size: 1.2rem;
+    }
+}
+
+.cfd-compare-accounts {
+    display: flex;
+    flex-flow: column nowrap;
+    flex-grow: 1;
+    background: inherit;
+    height: 100%;
+    position: relative;
+
+    &__table {
+        @include mobile {
+            overflow-x: auto;
+        }
+    }
+
+    &__table-row {
+        grid-template-columns: var(--cfd-compare-accounts-template-columns);
+        box-shadow: inset 0 -1px 0 0 var(--general-section-1);
+    }
+    &__table-row-eu {
+        grid-template-columns: 1.5fr 2fr 2fr;
+        box-shadow: inset 0 -1px 0 0 var(--general-section-1);
+    }
+    &__star {
+        color: var(--brand-red-coral);
+    }
+    &__bullet {
+        flex: none;
+
+        &--circle {
+            background-color: var(--text-general);
+            border-radius: 100%;
+            margin-right: 1.2rem;
+            margin-left: 0.2rem;
+            margin-top: 0.8rem;
+            width: 0.4rem;
+            height: 0.4rem;
+        }
+        &--star {
+            margin-right: 1rem;
+        }
+        &-wrapper {
+            display: flex;
+            margin-bottom: 0.8rem;
+            line-height: 1.5;
+        }
+    }
+    &__footnote {
+        &-title {
+            padding-bottom: 0.8rem;
+        }
+    }
+
+    .dc-table {
+        padding: 0 30px;
+
+        &__header {
+            border-bottom: none;
+            height: 50px;
+            position: sticky;
+            top: 0;
+            background: var(--general-main-2);
+            z-index: 10;
+        }
+        &__cell,
+        &__head {
+            padding: 0.8rem;
+
+            &--fixed {
+                padding-left: 1.6rem;
+
+                @include mobile {
+                    background-color: var(--general-section-2);
+                }
+            }
+        }
+        &__cell {
+            border-bottom: none;
+            align-items: normal;
+            padding: 1rem 0.8rem;
+        }
+        &--scrollbar {
+            display: block; // Safari needs this to work properly!
+        }
+        @include desktop {
+            &__header {
+                background-color: var(--general-main-2);
+            }
+        }
+    }
+    &-modal {
+        &__wrapper {
+            display: flex;
+            justify-content: center;
+            margin-top: 2.4rem;
+        }
+    }
+    @include mobile {
+        background: var(--general-main-1);
+        height: 100%;
+        font-size: 1.2rem;
+
+        .dc-table {
+            padding: 0;
+            height: inherit;
+
+            &__cell {
+                font-size: 1.2rem;
+            }
+            &__row {
+                padding: 0;
+            }
+            &__head {
+                font-size: 1.2rem;
+                border-bottom: 2px solid var(--border-disabled);
+                background-color: var(--general-main-1);
+                margin-top: -1px;
+            }
+            &__header,
+            &__row {
+                width: 150vw;
+                grid-template-columns: 1fr 1fr 1fr 1fr;
+            }
+        }
+    }
+}
+
+.cfd-compare-account--hint {
+    color: var(--text-less-prominent);
+    font-size: 12px;
+    line-height: 1.5em;
+    width: 100%;
+    padding: 1.6rem 2.4rem 0.8rem 2.4rem;
+
+    @include mobile {
+        padding: 1.6rem;
+        border-top: 2px solid var(--border-disabled);
+    }
+}
+
+.cfd-dashboard__accounts-error {
+    background-color: var(--status-warning-transparent);
+    margin: 1.2rem 0;
+
+    &-message {
+        padding: 0.8rem 2.4rem;
+    }
+}
+
+.cfd-real-accounts-display,
+.cfd-demo-accounts-display {
+    display: grid;
+    grid-auto-flow: column;
+    grid-gap: 2.4rem;
+    justify-content: center;
+    padding-top: 2.4em;
+    height: 100%;
+
+    @include mobile {
+        display: flex;
+        gap: 0;
+        overflow-x: hidden;
+        flex-direction: column;
+        height: unset;
+    }
+}
+
+.cfd-demo-accounts-display .cfd-account-card__wrapper {
+    @include desktop {
+        height: auto;
+    }
+}
+
+.cfd-real-accounts-display {
+    transition: margin-bottom 0.3s ease-in-out;
+    margin-bottom: var(--cfd-real-acc-margin-bottom);
+
+    .dc-carousel__card,
+    .dc-carousel__wrapper {
+        padding: 0;
+    }
+
+    &--has-trade-servers {
+        .cfd-account-card__wrapper {
+            @include desktop {
+                grid-template-rows: 1fr 4rem;
+            }
+        }
+    }
+}
+
+.cfd-account-card {
+    border: solid 1px var(--border-normal);
+    border-radius: 4px;
+    display: flex;
+    flex-flow: column nowrap;
+    min-height: 37rem;
+    width: 30.4em;
+    position: relative;
+    @include desktop {
+        height: 100%;
+    }
+
+    &__wrapper {
+        display: grid;
+        grid-template-rows: 1fr;
+        height: 100%;
+        justify-content: center;
+
+        @include mobile {
+            grid-template-rows: 1fr;
+            height: fit-content;
+
+            &:not(:last-child) {
+                margin-bottom: 2.4rem;
+            }
+        }
+
+        @include desktop {
+            height: 100%;
+        }
+    }
+
+    &__logged-out {
+        min-height: 29rem;
+    }
+
+    &__add-server {
+        font-size: 1.4rem;
+        cursor: pointer;
+        display: grid;
+        grid-auto-flow: column;
+        grid-gap: 0.4rem;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 4rem;
+        color: var(--text-prominent);
+
+        @include mobile {
+            height: 4rem;
+            align-content: start;
+        }
+
+        &--disabled {
+            cursor: not-allowed;
+            color: var(--text-disabled);
+
+            .cfd-account-card__add-server--icon {
+                background-color: var(--border-disabled);
+                color: var(--text-disabled);
+            }
+        }
+        &-exit,
+        &-enter-done {
+            transition: all 0.3s ease-in-out;
+            opacity: 1;
+        }
+        &-enter,
+        &-exit-done {
+            transition: all 0.3s ease-in-out;
+            opacity: 0;
+        }
+        &--icon {
+            color: var(--status-colored-background);
+            background-color: var(--brand-red-coral);
+            border-radius: 100%;
+            width: 2.4rem;
+            height: 2.4rem;
+            font-size: 1.8rem;
+            display: block;
+            text-align: center;
+            padding: 0.2rem;
+        }
+    }
+
+    &__server {
+        font-size: 1.4rem;
+        text-align: left;
+        width: 27.2rem;
+        &--value {
+            font-weight: bold;
+        }
+    }
+
+    &:hover {
+        box-shadow: 0 2px 8px 0 var(--shadow-menu);
+    }
+    &--heading {
+        @include typeface(--title-left-bold-black, none);
+        color: var(--text-general);
+        line-height: 1.5;
+    }
+    &--paragraph {
+        @include typeface(--paragraph-left-normal-black, none);
+        color: var(--text-general);
+        line-height: 1.45;
+    }
+    &--balance {
+        @include typeface(--title-left-bold-black);
+        color: var(--text-profit-success);
+    }
+    &__banner {
+        position: absolute;
+        transform: rotate(45deg);
+        border-bottom: 2.3rem solid var(--brand-red-coral);
+        border-left: 2.3rem solid transparent;
+        border-right: 2.3rem solid transparent;
+        height: 0;
+        width: 13.7rem;
+        left: 19.4rem;
+        top: 2.8rem;
+        color: var(--text-colored-background);
+        font-weight: bold;
+        line-height: 24px;
+        white-space: nowrap;
+        text-align: center;
+
+        &--demo {
+            border-bottom-color: var(--brand-secondary);
+        }
+        &--server {
+            // TODO: Add a CSS variable
+            border-bottom-color: $color-blue-2;
+        }
+        @include mobile {
+            left: calc(100vw - 14.2rem);
+        }
+    }
+    &__type {
+        display: flex;
+        padding: 1.5rem 1.6rem 1.6rem; // -1 for border
+
+        &--description {
+            display: flex;
+            margin-left: 1.6rem;
+            max-width: 19.2rem;
+            flex-direction: column;
+
+            .cfd-account-card--paragraph {
+                width: 18.3rem;
+                padding-top: 0.8rem;
+            }
+        }
+        &--has-banner {
+            .cfd-account-card--paragraph {
+                width: 15rem;
+            }
+        }
+    }
+    &__display {
+        display: flex;
+        flex-wrap: wrap;
+        width: min-content;
+        justify-content: center;
+        height: fit-content;
+
+        &-text {
+            @include typeface(--title-center-bold-black);
+            color: var(--brand-red-coral);
+            line-height: 1.5;
+            margin-top: 0.4rem;
+
+            &--top-right {
+                position: relative;
+                left: 22.2rem;
+                bottom: 7.2rem;
+                margin: 0;
+            }
+        }
+        &--fixed-height {
+            height: 64px; // don't leave space for the demo text that is moved to the top right
+        }
+    }
+    &__cta {
+        display: flex;
+        flex-direction: column;
+        margin-top: auto;
+
+        &-wrapper {
+            align-items: center;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+        }
+    }
+    &__specs {
+        padding: 1.6rem;
+        width: 100%;
+
+        &-table {
+            width: 100%;
+
+            &-attribute .cfd-account-card--paragraph {
+                color: var(--text-general);
+                margin-right: 2.4rem;
+            }
+            &-data {
+                .cfd-account-card--paragraph {
+                    @include typeface(--paragraph-left-bold-black, none);
+                    line-height: 1.45;
+                }
+            }
+        }
+    }
+    &__login-specs {
+        margin: 0.8rem 0;
+        width: 100%;
+        padding: 0 1.8rem;
+
+        &-table {
+            width: 100%;
+            table-layout: fixed;
+            border-collapse: separate;
+            border-spacing: 0 0.8rem;
+
+            &-attribute {
+                width: 35%;
+                vertical-align: middle;
+                .cfd-account-card--paragraph {
+                    color: var(--text-general);
+                }
+            }
+            &-data {
+                width: 65%;
+                vertical-align: middle;
+                .cfd-account-card--paragraph {
+                    @include typeface(--paragraph-left-normal-black, none);
+                    line-height: 1.45;
+                }
+            }
+            &-row {
+                &--account-id {
+                    height: 3.6rem;
+                }
+            }
+        }
+    }
+    &__spec-box {
+        display: grid;
+        grid-template-columns: 1fr 2.4rem;
+        border: 1px solid var(--border-normal);
+        border-radius: $BORDER_RADIUS;
+    }
+    &__spec-text {
+        padding: 0.4rem;
+        font-family: Courier, monospace;
+        overflow: hidden;
+    }
+    &__spec-copy {
+        display: grid;
+        justify-content: center;
+        align-content: center;
+        border-left: 1px solid var(--border-normal);
+    }
+    &__password {
+        &-box {
+            display: grid;
+            grid-template-columns: 1fr 2.4rem;
+            border: 1px solid var(--border-normal);
+            border-radius: $BORDER_RADIUS;
+        }
+        &-text {
+            padding: 0.4rem;
+            overflow: hidden;
+        }
+        &-action {
+            display: grid;
+            justify-content: center;
+            align-content: center;
+            border-left: 1px solid var(--border-normal);
+            border-radius: 0;
+            padding: 0 0 0 0.5rem;
+            overflow: hidden;
+        }
+        &-tooltip {
+            width: 20rem;
+        }
+    }
+    &__account-selection {
+        align-items: center;
+        display: flex;
+        height: 4rem;
+        justify-content: center;
+        margin: 0 1.6rem 1.5rem; // -1 for border
+        padding: 0;
+        text-decoration: none;
+        width: calc(100% - 3.2rem);
+        @include typeface(--paragraph-center-bold-black, none);
+
+        &--primary {
+            background-color: var(--brand-red-coral);
+            color: var(--text-colored-background);
+        }
+        &--secondary {
+            background-color: transparent;
+            border: 2px solid var(--button-secondary-default);
+            color: var(--text-prominent);
+
+            &:hover {
+                background-color: var(--button-secondary-hover);
+            }
+        }
+        &--disabled {
+            background-color: var(--brand-red-coral);
+            cursor: initial;
+            opacity: 0.32;
+        }
+    }
+    &__login {
+        @include typeface(--title-center-normal-black);
+        align-items: center;
+        background-color: var(--general-section-1);
+        border-radius: 4px;
+        color: var(--text-general);
+        display: flex;
+        padding: 0.8rem;
+        justify-content: center;
+        margin: 1rem 0 1.6rem;
+        width: 272px;
+
+        strong {
+            font-weight: bold;
+        }
+        span,
+        strong {
+            margin-right: 0.8rem;
+        }
+    }
+    &__manage {
+        display: flex;
+        width: calc(100% - 3.2rem);
+
+        .dc-btn {
+            width: 100%;
+            margin-bottom: 1.6rem;
+            height: 4rem;
+
+            &:not(:last-child) {
+                margin-right: 1.6rem;
+            }
+        }
+    }
+    &__action-wrapper {
+        margin: 0 auto 1.3rem;
+        padding-top: 1rem;
+        width: 75%;
+        text-align: center;
+
+        &__link {
+            font-size: var(--text-size-xxs);
+
+            &--disabled {
+                pointer-events: none;
+            }
+        }
+    }
+    &__divider {
+        width: calc(100% - 3.2rem);
+        margin-left: 1.6rem;
+        border-top: 1px solid var(--general-section-1);
+        margin-top: 1rem;
+    }
+    @include mobile {
+        width: calc(100vw - 3.2rem);
+        height: fit-content;
+
+        &:not(:last-child) {
+            margin-bottom: 2.4rem;
+            margin-right: 0;
+        }
+    }
+}
+
+.cfd-password-manager {
+    margin: 5.6rem auto 3.2rem;
+    width: 100%;
+    height: 100%;
+
+    @media only screen and (max-height: 645px) {
+        margin-top: 1.5rem;
+        overflow: auto;
+    }
+
+    &--paragraph {
+        margin-bottom: 3.2rem;
+    }
+    &--error-message {
+        margin-bottom: 1em;
+    }
+    &__investor-wrapper {
+        margin: 3.2rem 0.5rem 0;
+
+        & .dc-input__label {
+            top: 0.9rem;
+        }
+        @include mobile {
+            padding-bottom: 12rem;
+        }
+    }
+    .dc-password-meter__container,
+    .dc-password-input {
+        width: 30rem;
+        margin: auto;
+    }
+    &__investor-wrapper {
+        .cfd-password-manager--paragraph:first-child {
+            margin-bottom: 0.8rem;
+        }
+    }
+    &__investor-form {
+        width: 100%;
+        max-width: 300px;
+        margin: 2.4em auto 0;
+
+        @include mobile {
+            max-width: unset;
+        }
+    }
+    &__new-password {
+        margin-bottom: 8.6rem;
+    }
+    &__actions {
+        align-items: center;
+        display: flex;
+        flex-flow: column nowrap;
+    }
+    &--button {
+        margin-top: 1.6rem;
+
+        @include mobile {
+            width: 100%;
+            margin-top: 0.8rem;
+            max-width: 30rem;
+            white-space: normal;
+        }
+    }
+    &__success {
+        text-align: center;
+        margin-top: 3.2rem;
+
+        &-header {
+            @include typeface(--paragraph-center-bold-black);
+            margin: 1.6rem 0 0.8rem;
+        }
+        &-btn {
+            margin-top: 3.2rem;
+            width: 6.4rem;
+
+            @include mobile {
+                width: 100%;
+                max-width: 30rem;
+            }
+        }
+    }
+    .multi-step__header {
+        margin: 0 0 2.4rem 0;
+    }
+    .multi-step__component {
+        text-align: center;
+    }
+    @include desktop {
+        max-width: calc(450px + 1rem); // needs extra padding for the scrollbar, otherwise it will cover the words
+    }
+    @include mobile {
+        padding: 0 1.6rem;
+        margin-top: 2.4rem;
+
+        &__scroll-wrapper {
+            overflow-y: auto;
+            overflow-x: hidden;
+        }
+        /* iPhone SE screen width fixes due to UI space restrictions */
+        @media only screen and (max-width: 320px) {
+            padding: 0;
+        }
+    }
+}
+
+.cfd-financial-stp-modal {
+    display: grid;
+    grid-template-rows: 13rem minmax(10rem, 1fr);
+    height: 100%;
+    position: relative;
+    width: 100%;
+
+    .dc-modal-footer {
+        position: fixed;
+        padding: unset;
+        bottom: 1.6rem;
+        right: 1.6rem;
+    }
+
+    &__form {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        .details-form {
+            flex: 1;
+        }
+    }
+    @include desktop {
+        overflow: hidden;
+
+        & .details-form__description {
+            width: 100%;
+        }
+    }
+    @include mobile {
+        overflow: hidden;
+        grid-template-rows: 7rem minmax(10rem, 1fr);
+        &__heading {
+            padding: unset;
+        }
+        &__header {
+            &-steps {
+                padding-bottom: 0.8rem;
+                width: 100%;
+                &-title {
+                    color: var(--brand-red-coral);
+                    font-size: 1.4rem;
+                    font-weight: bold;
+                    line-height: 20px;
+                    padding: 1.6rem 2.4rem 0.8rem;
+                }
+                &-subtitle {
+                    color: var(--text-prominent);
+                    line-height: 18px;
+                    font-size: 1.2rem;
+                    font-weight: bold;
+                    padding: 0 2.4rem;
+                }
+            }
+        }
+        .dc-form-submit-button {
+            background-color: var(--color-white);
+        }
+    }
+    .dc-autocomplete {
+        margin-bottom: 2.4rem;
+    }
+    .account-management {
+        &__message-icon {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        &__message-content {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            align-items: center;
+            height: auto;
+            padding: 0 3rem;
+            padding-bottom: 7rem;
+            @include mobile {
+                overflow-y: auto;
+            }
+        }
+        &__message {
+            @include typeface(--title-center-bold-black);
+            color: var(--text-prominent);
+            margin-bottom: 1rem;
+        }
+        &__text {
+            @include typeface(--paragraph-center-normal-black);
+            color: var(--text-prominent);
+        }
+        &__continue {
+            margin-top: 3rem;
+        }
+        &__list {
+            &-message {
+                display: flex;
+            }
+            &-icon {
+                margin-right: 1.2rem;
+            }
+        }
+    }
+}
+
+.dc-modal {
+    &__container {
+        min-width: initial;
+        &_cfd-password-modal {
+            &__description {
+                @include typeface(--xsmall-left-normal-black);
+                line-height: 1.5;
+                max-width: calc(min(100vw, 349px));
+                margin: -2.7rem 0 2.4rem;
+                color: var(--text-less-prominent);
+            }
+            &__account-title {
+                margin-bottom: 1.6rem;
+            }
+        }
+        &_cfd-dashboard__compare-accounts {
+            width: 904px;
+        }
+        &_cfd-password-manager__modal {
+            height: 100% !important;
+            min-height: calc(100vh - 22rem);
+            width: 904px;
+            max-height: calc(100vh - 48px - 36px) !important;
+        }
+    }
+}
+
+.account-poa {
+    &__upload {
+        &-remove-btn {
+            position: absolute;
+            width: 16px;
+            height: 16px;
+            top: 8px;
+            right: 8px;
+            cursor: pointer;
+            transition: transform 0.25s linear;
+
+            &:hover {
+                transform: scale(1.25, 1.25);
+            }
+            &--error {
+                circle {
+                    fill: var(--status-danger);
+                }
+            }
+            &-container {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+}
+
+.cfd-proof-of-address {
+    height: 100%;
+    & .details-form {
+        display: grid;
+        grid-template-rows: minmax(10rem, 1fr) 7.2rem;
+        height: 100%;
+    }
+    &__file-upload {
+        padding-top: 0.8rem;
+        position: relative;
+
+        .account-poa {
+            &__upload {
+                &-section {
+                    margin-top: 0;
+                    display: flex;
+                }
+                &-file {
+                    width: 100%;
+                    flex: 1;
+                    height: 24rem;
+                    position: relative;
+                    margin: 0;
+
+                    .dc-file-dropzone {
+                        border: 1px dashed var(--border-normal);
+                        max-width: 40rem;
+
+                        &__message-subtitle {
+                            font-size: unset;
+                            font-weight: unset;
+                        }
+                    }
+                    @include mobile {
+                        flex: unset;
+                    }
+                }
+                &-list {
+                    display: unset;
+
+                    .account-poa__upload-box {
+                        display: flex;
+                        flex-direction: unset;
+                        flex: unset;
+                        align-items: center;
+                        justify-content: flex-start;
+                        margin: 0 1.6rem 0.8rem 0;
+                        border: none;
+                        border-radius: 0;
+                        padding: 0;
+                        text-align: unset;
+                    }
+                }
+                &-icon {
+                    width: 2.5rem;
+                    margin-bottom: 0;
+                }
+                &-item {
+                    min-width: 23.8rem;
+                    width: 100%;
+                    margin-left: 1rem;
+                    font-size: var(--text-size-xxs);
+                    line-height: 1.5;
+                    color: var(--text-prominent);
+                    padding: 0;
+                }
+            }
+        }
+    }
+    &__field-area {
+        max-width: 556px;
+        margin: 0 auto;
+
+        & .dc-dropdown__display-placeholder-text,
+        & .dc-input__label,
+        & .dc-dropdown__display {
+            background: var(--general-main-2);
+        }
+        @include mobile {
+            overflow: auto;
+        }
+    }
+    &__inline-fields {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-gap: 1rem;
+
+        .dc-dropdown-container {
+            margin-top: 0;
+        }
+    }
+    @include mobile {
+        .dc-input__label {
+            background: var(--general-section-2);
+        }
+        &__field-area {
+            padding: 0 1.6rem 3.2rem;
+            max-height: calc(100% - 0.8rem);
+        }
+        &__inline-fields {
+            display: flex;
+            flex-direction: column;
+
+            .dc-select-native {
+                margin-bottom: 3.2rem;
+            }
+        }
+        &__file-upload {
+            .dc-field--error {
+                top: 50%;
+                left: 0;
+                right: unset;
+            }
+            .account-poa__upload-section {
+                flex-direction: column;
+            }
+        }
+    }
+}
+
+.cfd-proof-of-identity {
+    height: 100%;
+    overflow: auto;
+
+    &__fields {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        height: 100%;
+
+        @include mobile {
+            display: unset;
+            position: relative;
+        }
+
+        .proof-of-identity {
+            &:is(span) {
+                width: unset;
+                height: unset;
+            }
+
+            &__footer {
+                width: 45%;
+                display: inline-flex;
+                justify-content: flex-end;
+                height: unset;
+                position: unset;
+                bottom: unset;
+                left: unset;
+                padding: unset;
+                z-index: unset;
+                border-radius: unset;
+                border-top: unset;
+                background-color: unset;
+                align-items: unset;
+                flex-direction: unset;
+
+                @include mobile {
+                    width: 95%;
+                    margin-top: 8px;
+                }
+
+                &-alert {
+                    margin-right: unset;
+                }
+            }
+
+            &__container {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                width: 45%;
+                justify-content: unset;
+
+                @include mobile {
+                    width: 100%;
+                    padding: 0 1.2rem;
+                    overflow-y: unset;
+                    justify-content: unset;
+                }
+
+                .icon {
+                    width: 12.8rem;
+                    height: 12.8rem;
+                    margin: 1.6rem 0 2.4rem 0;
+                }
+                .dc-input__bottom-label {
+                    margin: unset;
+                }
+                .btm-spacer {
+                    margin-bottom: 1.6rem;
+                }
+                .top-spacer {
+                    margin-top: 1.6rem;
+                }
+
+                .proof-of-identity__footer {
+                    // for cases when __footer is a child of proof-of-identity__container:
+                    width: 100%;
+                    margin-bottom: 8.6em;
+
+                    span.dc-text.dc-btn__text {
+                        display: inline-flex;
+                        align-items: center;
+                    }
+                    .back-btn {
+                        margin-right: unset;
+
+                        &-icon {
+                            margin-right: 0.8rem;
+                        }
+                    }
+                }
+            }
+
+            &__header {
+                margin: 0 0 1.6rem;
+            }
+            &__country-text {
+                text-align: center;
+                margin-bottom: 1.6rem;
+            }
+            &__inner-container {
+                display: unset;
+                flex-direction: unset;
+                justify-content: unset;
+                align-items: unset;
+                width: 100%;
+            }
+            &__image {
+                width: 100%;
+                max-width: unset;
+                border-radius: unset;
+                object-fit: unset;
+
+                &-container {
+                    width: unset;
+                    height: unset;
+                    padding: unset;
+                    border-radius: unset;
+                    background-color: unset;
+                }
+            }
+            &__fieldset {
+                width: 100%;
+
+                @include mobile {
+                    margin: 0 0 1.8rem;
+                }
+
+                &-container {
+                    display: unset;
+                    flex-direction: unset;
+                    justify-content: unset;
+                    align-items: unset;
+                }
+                &-input {
+                    width: unset;
+                }
+            }
+            &__sample-container {
+                margin-top: 2.4rem;
+                margin-left: unset;
+                width: unset;
+            }
+
+            &__submit-button {
+                margin-left: 0.8rem;
+                @include mobile {
+                    margin-right: unset;
+                }
+            }
+        }
+        .dc-themed-scrollbars {
+            height: 100%;
+        }
+    }
+    & .details-form {
+        display: grid;
+        grid-template-rows: minmax(10rem, 1fr) 8.2rem;
+        height: 100%;
+        position: relative;
+
+        @include mobile {
+            max-height: calc(100% - 1rem);
+        }
+    }
+    @include mobile {
+        overflow: hidden;
+    }
+}
+
+.cfd-change-password {
+    &__description {
+        margin-bottom: 2.4rem;
+    }
+
+    &__icon {
+        margin-left: 2.3rem;
+        margin-bottom: 1.4rem;
+        flex: none;
+    }
+
+    &-confirmation {
+        &__description {
+            margin-top: 0.8rem;
+            margin-bottom: 2.4rem;
+        }
+    }
+}
+
+.cfd-trading-password {
+    margin-top: 3.2rem;
+}
+
+.dc-modal__container_cfd-financial-stp-signup-modal {
+    max-height: calc(100vh - 102px) !important;
+    @include desktop {
+        display: grid;
+        grid-template-rows: 6rem minmax(20rem, 1fr);
+    }
+}
+.dc-modal__container_cfd-password-modal {
+    .dc-form-submit-button {
+        background-color: unset;
+        padding-bottom: 1.2rem;
+
+        @include mobile {
+            border-top: none;
+            bottom: 0;
+        }
+        .dc-btn:first-child {
+            margin-left: 0;
+        }
+    }
+    .dc-input {
+        &__label {
+            top: 0.9rem;
+        }
+        &__hint {
+            top: 4.8rem;
+        }
+    }
+}
+.dc-modal__container_cfd-pending-dialog,
+.dc-modal__container_cfd-success-dialog {
+    .dc-modal-header__title--cfd-pending-dialog {
+        text-align: center;
+        margin: auto;
+        padding: 2.4rem;
+        width: fit-content;
+    }
+    .dc-modal-body {
+        text-align: center;
+    }
+    .dc-modal-footer {
+        justify-content: center;
+        padding: 0.8rem 2rem 2.4rem;
+
+        .dc-btn {
+            min-width: 90px;
+
+            &:only-child {
+                margin: 0;
+            }
+            &:first-child {
+                margin-left: 0;
+            }
+        }
+        @include mobile {
+            padding: 0.8rem 1.6rem 1.6rem;
+            display: flex;
+            grid-gap: 0.6rem;
+
+            & .dc-btn {
+                &:only-child {
+                    max-width: 14rem;
+                    width: auto;
+                    min-width: 9rem;
+                }
+            }
+        }
+    }
+}
+.dc-modal__container_cfd-success-dialog {
+    .success-change__icon-area {
+        width: 128px;
+        margin: 0 auto;
+        position: relative;
+
+        &--large .bottom-right-overlay {
+            position: absolute;
+            left: 76px;
+            top: 76px;
+
+            @include mobile {
+                left: 78px;
+                top: 58px;
+            }
+        }
+        &--xlarge .bottom-right-overlay {
+            position: absolute;
+            bottom: 0.8rem;
+            right: -2.8rem;
+            height: 5.2rem;
+            width: 5.2rem;
+        }
+    }
+    .dc-modal-body {
+        .dc-modal-header__title {
+            text-align: center;
+            margin: auto;
+            padding: 1.6rem 0 0.8rem;
+            width: fit-content;
+        }
+        @include mobile {
+            font-size: 1.4rem;
+        }
+    }
+    .cfd-account__platform {
+        font-style: italic;
+        white-space: nowrap;
+    }
+}
+.cfd-personal-details-form-error {
+    @include typeface(--paragraph-left-normal-red);
+    @include desktop {
+        white-space: nowrap;
+        display: flex;
+        align-items: flex-end;
+    }
+}
+
+/* stylelint-enable */
diff --git a/packages/reports/src/sass/app/modules/mt5/cfd.scss b/packages/reports/src/sass/app/modules/mt5/cfd.scss
new file mode 100644
index 000000000000..23b3e5ef71da
--- /dev/null
+++ b/packages/reports/src/sass/app/modules/mt5/cfd.scss
@@ -0,0 +1,394 @@
+.dc-modal__container_cfd-password-modal,
+.dc-mobile-dialog__cfd-password-modal {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    max-width: 424px;
+
+    form {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: space-between;
+        padding: 0 2.4rem 1.2rem;
+
+        @include mobile {
+            padding: 0;
+        }
+    }
+    &__description {
+        @include typeface(--small-center-normal-black);
+        color: var(--text-prominent);
+        text-transform: none;
+        margin-top: 1rem;
+        top: 2rem;
+        position: relative;
+        padding: 1.3rem;
+    }
+    &__hint {
+        max-width: 40rem;
+    }
+    &__body {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+    }
+    .dc-input {
+        &__label {
+            top: 1.2rem;
+            @include mobile {
+                top: 0.9rem;
+                background-color: var(--fill-normal);
+            }
+        }
+    }
+    .dc-password-meter {
+        &__bg {
+            background: var(--general-section-2);
+            @include mobile {
+                background: var(--fill-disabled);
+            }
+        }
+    }
+    .status-dialog {
+        margin-top: 3em;
+    }
+    .cfd-password-reset {
+        @include mobile {
+            flex: 1;
+        }
+    }
+    & .dc-password-meter__container {
+        flex-grow: 1;
+        margin: auto;
+
+        @include mobile {
+            width: calc(100vw - 4.8rem);
+            max-width: 30rem;
+        }
+    }
+    & .mt5-password-field {
+        margin-bottom: 1em;
+        width: 80%;
+    }
+    .input-element {
+        width: 100%;
+    }
+    @include mobile {
+        .cfd-password-modal__content {
+            overflow-y: auto;
+            overflow-x: hidden;
+            height: 100%;
+            max-height: calc(100% - 6.4rem);
+            padding: 1rem;
+        }
+    }
+    @include tablet-up {
+        .cfd-password-modal__content {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            margin-bottom: 2rem;
+
+            &--password-reset {
+                padding: 0 2.5rem;
+            }
+        }
+    }
+}
+.dc-mobile-dialog__mt5-email-sent {
+    padding-bottom: 1rem;
+}
+
+.cfd-password-modal {
+    &__warning {
+        padding: 2.5rem;
+        max-width: 50rem;
+        align-self: center;
+        &-text {
+            border-radius: 0.8rem;
+            padding: 0.8rem;
+            background-color: var(--status-warning);
+        }
+    }
+    &__message {
+        max-width: 32rem;
+        margin: auto;
+        line-height: 1.43;
+    }
+    &__radio {
+        &.dc-radio-group {
+            display: grid;
+            grid-gap: 2rem;
+            margin-top: 0;
+            padding-bottom: 2.4rem;
+        }
+        &.dc-radio-group__item {
+            display: flex;
+            flex-direction: row;
+        }
+    }
+    &__create-password {
+        padding: 0 1.2rem;
+
+        &-content {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            align-items: center;
+            margin-top: -2.5rem;
+
+            .dc-icon {
+                margin-left: 1.1rem;
+                flex: none;
+            }
+        }
+        &-title {
+            margin-top: 2.4rem;
+            margin-bottom: 0.8rem;
+        }
+        &-description {
+            max-width: 30rem;
+            margin-bottom: 1.6rem;
+        }
+    }
+    &__change-password-confirmation {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        max-width: 30rem;
+
+        @include desktop {
+            margin-top: -2.5rem;
+        }
+
+        &-wrapper {
+            display: flex;
+            justify-content: center;
+            width: 100%;
+        }
+        .dc-form-submit-button {
+            margin-bottom: 2.2rem;
+        }
+    }
+}
+
+.dc-modal__container_top-up-virtual {
+    width: 384px;
+    min-height: 367px;
+    display: flex;
+    flex-direction: column;
+
+    &__body {
+        display: flex;
+        flex-direction: column;
+        padding: 4.8rem 4.2rem;
+        flex-grow: 1;
+        justify-content: space-around;
+        align-items: center;
+    }
+    &__description {
+        text-transform: none;
+    }
+    &--h4 {
+        @include typeface(--small-center-bold-black);
+        text-transform: none;
+        color: var(--text-prominent);
+    }
+    &--balance {
+        @include typeface(--title-center-bold-black);
+        line-height: 1.5;
+        color: var(--text-profit-success);
+    }
+}
+
+.cfd-success-topup {
+    &__heading {
+        @include typeface(--paragraph-center-bold-black);
+        margin: 1.6rem 1.8rem;
+    }
+    &__description {
+        p {
+            @include typeface(--small-center-normal-black);
+            color: var(--text-general);
+            text-transform: none;
+        }
+    }
+}
+
+.cfd-dashboard {
+    &__container {
+        & .dc-popover__target {
+            display: flex;
+        }
+    }
+}
+
+.cfd-verification-email-sent {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    &__title {
+        @include typeface(--title-center-bold-black);
+        margin: 0.8rem 0;
+
+        &--sub {
+            margin-bottom: 0.8rem;
+            margin-top: 3rem;
+        }
+    }
+    &__resend-button {
+        display: block;
+        @include typeface(--paragraph-center-bold-black);
+        color: var(--brand-red-coral);
+        text-decoration: none;
+        margin: 3.2rem 0 0;
+    }
+    & .countdown {
+        margin: 0 0.4rem;
+    }
+}
+
+.cfd-reset-password {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    @include typeface(--paragraph-left-normal-black);
+    color: var(--text-prominent);
+
+    &__container {
+        display: grid;
+        grid-template-rows: 12rem 7rem;
+        height: 100%;
+        width: 100%;
+        justify-items: center;
+        flex-grow: 1;
+
+        @include mobile {
+            min-height: 24rem;
+            width: calc(100vw - 3.2rem);
+        }
+    }
+    &__heading {
+        @include typeface(--paragraph-center-bold-black);
+        margin: 1.6rem 0 0;
+    }
+    &__hint {
+        @include typeface(--small-left-normal-black);
+        color: var(--text-less-prominent);
+        margin-left: 1.2rem;
+    }
+    &__password-field {
+        margin-bottom: 0.5rem;
+
+        & .dc-input__label {
+            top: 0.9rem;
+        }
+    }
+    &__password-area {
+        @include desktop {
+            width: calc(min(33rem, 100vw));
+            padding: 2.4rem;
+        }
+        @include mobile {
+            width: 100%;
+            max-width: calc(100% - 2.4rem);
+        }
+    }
+    &__error {
+        display: flex;
+        max-width: 38.4rem;
+        min-height: 28.4rem;
+        flex-direction: column;
+        align-items: center;
+        padding-top: 2rem;
+        margin: 0 auto;
+    }
+    &__description {
+        @include typeface(--paragraph-left-normal-black);
+        color: var(--text-prominent);
+        margin-bottom: 2.4rem;
+
+        &--is-centered {
+            margin-bottom: 2.4rem;
+            max-width: 70%;
+        }
+    }
+    &__confirm-button {
+        margin-top: 2.4rem;
+    }
+    &__success {
+        width: 38.4rem;
+        height: 28.4rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        padding: 2.4rem 0 2rem;
+
+        @include mobile {
+            width: calc(100vw - 3.2rem);
+            height: 100%;
+        }
+    }
+    @include mobile {
+        & .dc-form-submit-button {
+            all: unset;
+        }
+    }
+}
+
+/** @define poi-icon-row; weak */
+.poi-icon-row {
+    display: flex;
+    margin-bottom: 16px;
+
+    &__icon-container {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        color: var(--text-less-prominent);
+
+        &:not(:first-child):not(:last-child) {
+            margin: 0 40px;
+        }
+        p {
+            font-size: var(--text-size-xxs);
+        }
+        p:first-of-type {
+            line-height: 1.5;
+            margin-top: 8px;
+            font-weight: bold;
+        }
+        @include mobile {
+            &:not(:first-child):not(:last-child) {
+                margin: 0;
+            }
+            & .dc-icon {
+                width: 8.8rem;
+                height: auto;
+
+                /* iPhone SE screen width fixes due to UI space restrictions */
+                @media only screen and (max-width: 340px) {
+                    width: 7rem;
+                }
+            }
+            p {
+                line-height: 20px;
+            }
+        }
+    }
+    @include mobile {
+        display: grid;
+        grid-gap: 2.4rem;
+        grid-template-columns: 1fr 1fr 1fr;
+        margin-top: 4rem;
+    }
+}
diff --git a/packages/reports/src/sass/app/modules/portfolio.scss b/packages/reports/src/sass/app/modules/portfolio.scss
new file mode 100644
index 000000000000..e95e64667de9
--- /dev/null
+++ b/packages/reports/src/sass/app/modules/portfolio.scss
@@ -0,0 +1,87 @@
+// TODO: Combine whatever selector / rule that's still needed from this and merge into positions_drawer
+/** @define portfolio; weak */
+.portfolio {
+    padding: 1.5em 1.2em;
+    height: 100%;
+
+    &--card-view {
+        background: var(--general-main-2);
+    }
+    &__table {
+        height: 100%;
+    }
+    &__row {
+        grid-template-columns: 6.5em 7em 1fr 6em 9em 6em 5em;
+    }
+    /* postcss-bem-linter: ignore */
+    .payout,
+    .indicative,
+    .purchase,
+    .remaining_time {
+        justify-content: flex-end;
+    }
+    .container {
+        background: var(--general-section-1);
+    }
+    .contract-type {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+
+        .type-wrapper {
+            width: 2em;
+            height: 2em;
+            padding: 0.5em;
+            margin-bottom: 0.3em;
+            border-radius: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: var(--state-normal);
+        }
+    }
+    .reference a {
+        color: $COLOR_SKY_BLUE;
+        text-decoration: none;
+    }
+    .table__body .indicative {
+        font-weight: bold;
+    }
+    .indicative {
+        text-align: right;
+
+        &--price-moved-up {
+            color: var(--text-profit-success);
+        }
+        &--price-moved-down {
+            color: var(--text-loss-danger);
+        }
+        &--no-resale {
+            color: var(--text-general);
+        }
+    }
+}
+
+// empty portfolio message
+/** @define portfolio-empty */
+.portfolio-empty {
+    height: calc(100vh - 240px);
+    display: flex;
+
+    &__wrapper {
+        display: flex;
+        flex-direction: column;
+        align-self: center;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+    }
+    &__icon {
+        @extend %inline-icon.disabled;
+        height: 4.8em;
+        width: 4.8em;
+        margin-bottom: 1.6em;
+    }
+}
diff --git a/packages/reports/src/sass/app/modules/reports.scss b/packages/reports/src/sass/app/modules/reports.scss
new file mode 100644
index 000000000000..2745e324883a
--- /dev/null
+++ b/packages/reports/src/sass/app/modules/reports.scss
@@ -0,0 +1,983 @@
+@import '../_common/components/composite-calendar';
+
+$side-padding: 1.2em;
+
+/** @define reports; weak */
+.reports {
+    height: 100%;
+
+    &__meta {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 2.4rem 1.6rem 0;
+
+        @include mobile {
+            padding: 0 1.6rem 1.6rem;
+        }
+
+        flex-direction: column-reverse;
+        padding-bottom: 0;
+
+        &-filter {
+            position: relative;
+            display: flex;
+            width: 100%;
+            @include desktop {
+                max-width: 36rem;
+                margin-left: auto;
+            }
+            &--statement {
+                @include desktop {
+                    max-width: 50rem;
+                }
+            }
+        }
+
+        @include desktop {
+            align-items: center;
+        }
+
+        @include mobile {
+            flex-direction: column;
+            padding-bottom: 0;
+
+            &-filter {
+                padding: 0 0 1.6rem;
+            }
+            #dt_calendar_input {
+                text-align: left;
+                padding-left: 3rem;
+            }
+        }
+    }
+    &__mobile-wrapper {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
+    &__route-selection {
+        padding: 1.6rem;
+    }
+    &__content {
+        width: 100%;
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        @media only screen and (min-width: 1280px) {
+            overflow: visible;
+        }
+    }
+    .unknown-icon {
+        margin-left: 8px;
+        fill: var(--text-general);
+        border-radius: $BORDER_RADIUS;
+    }
+    /* postcss-bem-linter: ignore */
+    .dc-tabs--open-positions {
+        flex: 1;
+        grid-template-rows: 36px calc(100% - 36px);
+        grid-template-columns: 100%;
+
+        .dc-tabs__content {
+            display: flex;
+            height: 100%;
+        }
+    }
+    /* postcss-bem-linter: ignore */
+    .statement__row--detail {
+        overflow: hidden;
+        min-height: 63px;
+        display: flex;
+        align-items: center;
+        padding: 0;
+        justify-content: center;
+        background-color: var(--general-section-1);
+
+        /* postcss-bem-linter: ignore */
+        &-text {
+            padding: 1.12em;
+            word-break: break-all;
+
+            .dc-popover__wrapper {
+                display: inline-block;
+                margin-left: 1rem;
+            }
+        }
+    }
+    .dc-vertical-tab__content--floating {
+        margin-right: 0;
+    }
+    .table__head {
+        height: auto;
+        .table__cell {
+            @include tablet-up {
+                white-space: break-spaces;
+            }
+        }
+    }
+}
+
+/** @define reports-page-wrapper; weak */
+.reports-page-wrapper {
+    height: 100%;
+}
+
+/** @define statement; weak */
+.statement {
+    .table__head {
+        font-weight: bold;
+        align-items: flex-start;
+        height: auto;
+
+        .table__cell {
+            height: auto;
+        }
+        @include desktop {
+            white-space: normal;
+        }
+    }
+
+    @include desktop {
+        height: 100%;
+    }
+    @include mobile {
+        flex: 1;
+
+        &__data-list-body {
+            height: 100%;
+
+            .action_type {
+                display: flex;
+                flex: none;
+                align-items: center;
+
+                &__row-title {
+                    display: none;
+                }
+            }
+            .balance {
+                display: flex;
+
+                &__row-title {
+                    flex: 50%;
+                }
+            }
+        }
+    }
+
+    &__content {
+        width: 100%;
+        max-height: 100%;
+    }
+    /*
+        TABLE STYLES
+    */
+    &__table {
+        height: calc(100% - 42px);
+        flex: 1;
+        min-width: 85rem;
+    }
+    &__row {
+        /* icon refId currency tr_time transaction cred/debt balance */
+        /* stylelint-disable-next-line declaration-colon-space-after */
+        grid-template-columns:
+            minmax(120px, 0.8fr) minmax(85px, 1.4fr) minmax(110px, 1.2fr) minmax(85px, 1.2fr) minmax(85px, 1fr)
+            minmax(85px, 1.2fr) minmax(85px, 1fr);
+
+        .date {
+            text-align: left;
+        }
+    }
+    .amount,
+    .balance {
+        justify-content: flex-end;
+    }
+    .amount {
+        font-weight: bold;
+
+        &--profit {
+            color: var(--text-profit-success);
+        }
+        &--loss {
+            color: var(--text-loss-danger);
+        }
+    }
+    .market-symbol-icon {
+        @include mobile {
+            width: 80px;
+        }
+    }
+    /*
+        MOBILE CARDS
+    */
+    &--card-view {
+        background: var(--general-main-2);
+        overflow: hidden;
+
+        .statement__filter {
+            padding: 0 $side-padding;
+            border-bottom: 1px solid var(--general-section-1);
+
+            &-content {
+                padding: 0;
+                margin: 0 auto;
+                max-width: 450px;
+                display: grid;
+                grid-template-columns: 1fr 3em 1fr;
+                text-align: center;
+
+                .datepicker__input-field {
+                    width: 100%;
+                }
+            }
+            &-label {
+                display: none;
+            }
+        }
+        .statement__content {
+            padding: 0;
+        }
+        .statement__card-list {
+            padding: 0 $side-padding;
+            height: 100%;
+        }
+    }
+    &__statement-header {
+        justify-content: flex-end;
+    }
+    &__account-statistics {
+        background-color: var(--general-section-1);
+        @include desktop {
+            margin: 1.6rem 0;
+            width: 100%;
+        }
+        @include mobile {
+            margin: 0.8rem 0 1.6rem;
+            order: 1;
+        }
+        height: 4.8rem;
+        display: flex;
+        flex-direction: row;
+        text-align: left;
+
+        &-item {
+            flex: 1;
+            display: flex;
+
+            &:last-child {
+                border-right: unset;
+            }
+            &:first-child {
+                .statement__account-statistics--is-rectangle {
+                    padding-left: 0;
+                }
+            }
+            &:not(:first-child) {
+                justify-content: center;
+            }
+        }
+        &-total-withdrawal {
+            @include desktop {
+                min-width: 19rem;
+            }
+            @include mobile {
+                min-width: 12.3rem;
+            }
+        }
+        &--is-rectangle {
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            margin: auto;
+
+            @include desktop {
+                padding: 0.4rem 1.6rem;
+            }
+            @include mobile {
+                flex-direction: column;
+            }
+        }
+        &-title {
+            margin: auto;
+
+            @include mobile {
+                font-size: 1rem;
+                margin-bottom: 0;
+            }
+        }
+        &-amount {
+            margin: auto;
+
+            @include desktop {
+                margin-left: 1rem;
+            }
+            @include mobile {
+                font-size: 1.4rem;
+                margin-top: 1rem;
+            }
+        }
+    }
+}
+
+/** @define statement-card */
+.statement-card {
+    &__header {
+        font-size: 1em;
+        padding: 0.5em;
+        border-bottom: 1px solid var(--general-section-1);
+        display: flex;
+        justify-content: space-between;
+    }
+    /* postcss-bem-linter: ignore */
+    &__refid a {
+        color: $COLOR_SKY_BLUE;
+        text-decoration: none;
+    }
+    &__body {
+        padding: 0.5em;
+        font-size: 1.2em;
+    }
+    &__desc {
+        margin-bottom: 0.7em;
+    }
+    &__row {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        font-weight: bold;
+    }
+    &__cell-text {
+        vertical-align: middle;
+    }
+    &__amount {
+        &--sell,
+        &--deposit {
+            color: var(--text-profit-success);
+        }
+        &--buy,
+        &--withdrawal {
+            color: var(--text-loss-danger);
+        }
+    }
+    &__icon {
+        display: inline-block;
+        height: 1.6em;
+        width: 1.6em;
+        background-size: 1.6em 1.6em;
+        vertical-align: middle;
+        margin-right: 0.5em;
+    }
+}
+
+/** @define statement-empty */
+.statement-empty {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    &__icon {
+        height: 6.4em;
+        width: 6.4em;
+        margin-bottom: 1.4em;
+    }
+    &__text {
+        font-size: 1.4em;
+    }
+}
+
+/** @define profit-table; weak */
+.profit-table {
+    .table__head,
+    .table__foot {
+        font-weight: bold;
+    }
+    .table__head {
+        white-space: normal;
+        .table__cell {
+            align-items: flex-start;
+        }
+    }
+
+    @include desktop {
+        height: 100%;
+    }
+
+    @include mobile {
+        flex: 1;
+
+        &__data-list-body {
+            height: calc(100% - 50px);
+
+            .sell_time__row-title {
+                display: flex;
+                align-items: center;
+
+                .dc-icon {
+                    margin-left: 4px;
+                }
+            }
+        }
+        &__data-list-footer {
+            height: 50px;
+            min-height: 50px;
+            font-weight: bold;
+
+            .data-list__row__content {
+                font-size: 1.2rem;
+                color: var(--text-prominent);
+            }
+            .data-list__row {
+                padding: 0;
+            }
+        }
+    }
+
+    &__content {
+        width: 100%;
+        max-height: 100%;
+    }
+    /*
+        TABLE STYLES
+    */
+    &__table {
+        height: calc(100% - 42px);
+        flex: 1;
+        min-width: 90rem;
+    }
+    &__row {
+        /* icon refId currency buy_time buy_price sell_time sell_price profit/loss */
+        /* stylelint-disable-next-line declaration-colon-space-after */
+        grid-template-columns:
+            minmax(120px, 0.6fr) minmax(130px, 1fr) minmax(85px, 1fr) minmax(85px, 1.2fr) minmax(85px, 1fr)
+            minmax(85px, 1.2fr) minmax(95px, 1fr) minmax(130px, 1fr);
+    }
+    .buy_price,
+    .sell_price,
+    .profit_loss {
+        @include desktop {
+            justify-content: flex-end;
+            text-align: right;
+        }
+        @include mobile {
+            justify-content: center;
+        }
+    }
+    .sell_time,
+    .purchase_time {
+        text-align: left;
+        min-width: 120px;
+    }
+    .profit_loss {
+        font-weight: bold;
+        @include tablet-up {
+            word-break: break-word;
+        }
+        @include mobile {
+            display: flex;
+
+            &__row-title {
+                flex: 50%;
+            }
+        }
+    }
+    .market-symbol-icon {
+        @include mobile {
+            width: 80px;
+        }
+    }
+    .duration-type {
+        flex: none;
+        position: relative;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0px 16px;
+        font-size: 1.4rem;
+        font-weight: bold;
+
+        &__background {
+            position: absolute;
+            height: 100%;
+            width: 100%;
+            opacity: 0.16;
+            border-radius: 16px;
+        }
+        &__ticks {
+            color: $color-yellow;
+
+            &__background {
+                background: $color-yellow;
+            }
+        }
+        &__seconds {
+            color: $color-green-1;
+
+            &__background {
+                background: $color-green-1;
+            }
+        }
+        &__minutes {
+            color: $color-blue-1;
+
+            &__background {
+                background: $color-blue-1;
+            }
+        }
+        &__hours {
+            color: $COLOR_BLUE;
+
+            &__background {
+                background: $COLOR_BLUE;
+            }
+        }
+        &__days {
+            color: $color-purple;
+
+            &__background {
+                background: $color-purple;
+            }
+        }
+    }
+}
+
+/** @define open-positions; weak */
+.open-positions {
+    height: 100%;
+
+    @include mobile {
+        flex: 1;
+        padding-top: 0.8rem;
+
+        &-multiplier {
+            /* postcss-bem-linter: ignore */
+            & .data-list__item {
+                background-color: var(--general-section-1);
+                border-radius: $BORDER_RADIUS;
+                border: 1px solid var(--border-disabled);
+                padding: 0;
+
+                /* postcss-bem-linter: ignore */
+                & .dc-progress-slider--completed {
+                    display: none;
+                }
+                /* postcss-bem-linter: ignore */
+                & .dc-contract-card {
+                    background-color: var(--general-main-2);
+                    /* postcss-bem-linter: ignore */
+                    &__wrapper {
+                        background-color: var(--general-main-2);
+                        max-width: unset;
+                        margin: 0;
+                    }
+                    /* postcss-bem-linter: ignore */
+                    &-item__footer {
+                        background-color: var(--general-main-2);
+                        border-radius: $BORDER_RADIUS;
+                    }
+                    /* postcss-bem-linter: ignore */
+                    &__grid-underlying-trade {
+                        border-bottom: 1px solid var(--border-disabled);
+                        margin-bottom: 5px;
+                    }
+                    /* postcss-bem-linter: ignore */
+                    &__grid-items {
+                        grid-template-columns: 1fr 1fr 1fr;
+                        margin-top: 0.4rem;
+                        margin-bottom: 0.4rem;
+                    }
+                    /* postcss-bem-linter: ignore */
+                    &__sell-button {
+                        border-top: 1px solid var(--border-disabled);
+                    }
+                    /* postcss-bem-linter: ignore */
+                    &-item {
+                        /* postcss-bem-linter: ignore */
+                        &__total-profit-loss {
+                            border-color: var(--border-disabled);
+                        }
+                        /* postcss-bem-linter: ignore */
+                        &:nth-child(1) {
+                            order: 0;
+                        }
+                        /* postcss-bem-linter: ignore */
+                        &:nth-child(3),
+                        &:nth-child(5) {
+                            order: 2;
+                        }
+                        /* postcss-bem-linter: ignore */
+                        &:nth-child(6) {
+                            order: 6;
+                        }
+                    }
+                }
+                /* postcss-bem-linter: ignore */
+                & .dc-contract-card-dialog-toggle {
+                    border-color: var(--border-disabled);
+                }
+            }
+            /* postcss-bem-linter: ignore */
+            & .open-positions__data-list-body {
+                padding: 0;
+                height: calc(100% - 48px);
+            }
+            /* postcss-bem-linter: ignore */
+            & .open-positions__data-list-footer {
+                height: 48px;
+                min-height: 48px;
+                font-weight: bold;
+                align-items: center;
+                padding: 0;
+
+                /* postcss-bem-linter: ignore */
+                &--content {
+                    padding: 0 1.6rem;
+                    display: grid;
+                    grid-template-columns: 0.7fr 1fr;
+
+                    /* postcss-bem-linter: ignore */
+                    .profit {
+                        align-items: flex-start;
+                    }
+                }
+            }
+        }
+        &__data-list {
+            margin-top: 0.8rem;
+        }
+        &__data-list-body {
+            height: calc(100% - 95px);
+
+            .dc-progress-bar__container {
+                max-width: 120px;
+                align-self: center;
+            }
+        }
+        &__data-list-footer {
+            height: 95px;
+            min-height: 95px;
+            font-weight: bold;
+            align-items: flex-start;
+            padding: 0.8rem 4rem 0 1rem;
+
+            &--title {
+                font-size: 1.4rem;
+                font-weight: bold;
+                color: var(--text-prominent);
+            }
+            &--content {
+                flex: 1;
+                padding: 0.8rem 1.6rem 0;
+                display: flex;
+                justify-content: space-between;
+
+                .purchase,
+                .indicative {
+                    padding-bottom: 8px;
+                }
+            }
+            .data-list__row-title {
+                font-size: 1rem;
+                line-height: 1.4rem;
+            }
+            .data-list__row-content {
+                font-size: 1rem;
+                line-height: 1.4rem;
+                color: var(--text-prominent);
+            }
+        }
+        .dc-contract-card__no-resale-msg {
+            display: flex;
+            font-size: 1.4rem;
+            color: var(--text-general);
+            justify-content: center;
+            padding: 0.8rem 0rem;
+        }
+    }
+
+    &__content {
+        width: fit-content;
+        max-height: 100%;
+    }
+    &__indicative {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        width: 100%;
+
+        &--amount {
+            display: flex;
+            align-items: center;
+            @include desktop {
+                line-height: 2;
+            }
+        }
+        .dc-btn--sell {
+            height: 2.4rem;
+        }
+        &-no-resale-msg {
+            clear: both;
+            text-align: center;
+            font-size: smaller;
+        }
+    }
+    &__profit-loss {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-weight: bold;
+
+        &--movement {
+            width: 16px;
+            height: 16px;
+
+            &-complete,
+            &-complete:after {
+                display: none;
+            }
+            &:after {
+                content: '';
+                width: 16px;
+            }
+        }
+        &--negative {
+            color: var(--text-loss-danger);
+
+            &:before {
+                content: '-';
+                color: inherit;
+            }
+        }
+        &--positive {
+            color: var(--text-profit-success);
+
+            &:before {
+                content: '+';
+                color: inherit;
+            }
+        }
+    }
+    /*
+        TABLE STYLES
+    */
+    &__table {
+        height: calc(100% - 24px);
+        flex: 1;
+        margin-top: 20px;
+
+        .table__head {
+            height: auto;
+            white-space: normal;
+            @include tablet-up {
+                .profit,
+                .indicative {
+                    white-space: break-spaces;
+                }
+            }
+
+            .table__cell {
+                font-weight: bold;
+                align-items: flex-start;
+            }
+        }
+        .table__body {
+            .open-positions__row_wrapper {
+                border-bottom: 1px solid var(--general-section-1);
+            }
+        }
+        .table__foot {
+            font-weight: bold;
+            white-space: normal;
+        }
+    }
+    &__row {
+        /* type refId currency buy_price payout_limit indicative_profit/loss indicative_price rem_time */
+        /* stylelint-disable-next-line declaration-colon-space-after */
+        grid-template-columns:
+            minmax(110px, 0.7fr) minmax(130px, 0.8fr) minmax(100px, 1.1fr) minmax(90px, 1.1fr) minmax(90px, 1.1fr)
+            minmax(120px, 1.1fr) minmax(120px, 1.1fr) minmax(85px, 1.1fr);
+        width: 100%;
+        grid-auto-rows: 100%;
+
+        &_wrapper {
+            display: flex;
+            flex-direction: row;
+            height: 100%;
+        }
+    }
+    &__reports-meta {
+        @include mobile {
+            padding-bottom: 0px;
+        }
+    }
+    .buy_price,
+    .payout,
+    .indicative,
+    .purchase,
+    .multiplier,
+    .currency,
+    .profit {
+        @include desktop {
+            justify-content: center;
+        }
+    }
+    .type {
+        padding-right: 0;
+    }
+    .dc-progress-slider {
+        border: none;
+        margin: 0;
+
+        &__ticks {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            &-step {
+                background: var(--state-hover);
+            }
+            &-wrapper {
+                margin-top: 6px;
+            }
+            &-caption {
+                padding: 0;
+                margin-right: 8px;
+                white-space: nowrap;
+            }
+        }
+    }
+    .market-symbol-icon {
+        @include mobile {
+            width: 80px;
+        }
+    }
+}
+
+/** @define open-positions-multiplier; weak */
+.open-positions-multiplier {
+    .open-positions {
+        &__row {
+            /* icon multiplier currency stake cancellation buy_price limit_order current_stake total_profit_loss action */
+            /* stylelint-disable-next-line declaration-colon-space-after */
+            grid-template-columns:
+                minmax(85px, 1fr) minmax(125px, 1fr) minmax(65px, 1fr) minmax(105px, 1fr) minmax(100px, 1fr)
+                minmax(105px, 1fr) minmax(105px, 1fr) minmax(105px, 1fr) minmax(125px, 1fr) minmax(90px, 1fr);
+
+            &-action {
+                display: flex;
+                flex-direction: column;
+                flex: 1;
+
+                .dc-remaining-time {
+                    margin-left: 0.4rem;
+                    font-size: inherit;
+                }
+                .dc-btn {
+                    height: 2.4rem;
+                    padding: 0 0.8rem;
+                    min-width: 93px;
+
+                    .dc-btn__text {
+                        font-size: 1.2rem;
+                    }
+                    &:first-child {
+                        margin-bottom: 0.4rem;
+                    }
+                }
+            }
+            .limit_order,
+            .cancellation,
+            .bid_price {
+                @include desktop {
+                    justify-content: center;
+                    text-align: center;
+                    width: 100%;
+                    white-space: break-spaces;
+                }
+            }
+            .limit_order {
+                flex-direction: column;
+                align-items: flex-end;
+                text-align: right;
+                justify-content: flex-start;
+            }
+            .action {
+                padding-bottom: 0;
+                justify-content: center;
+            }
+        }
+        &__bid_price {
+            font-weight: bold;
+
+            &--negative {
+                color: var(--text-loss-danger);
+            }
+            &--positive {
+                color: var(--text-profit-success);
+            }
+        }
+    }
+}
+
+.open-positions,
+.statement,
+.profit-table {
+    /* postcss-bem-linter: ignore */
+    .data-list__body,
+    .data-list__footer {
+        padding: 0 1.6rem;
+    }
+    /* postcss-bem-linter: ignore */
+    .data-list__item {
+        background-color: var(--general-section-1);
+    }
+    .currency {
+        &__wrapper {
+            background: var(--border-active);
+            border-radius: $BORDER_RADIUS;
+            padding: 0 0.4rem;
+        }
+    }
+}
+
+/** @define empty-trade-history; weak*/
+.empty-trade-history {
+    position: absolute;
+    top: 20%;
+    left: 10%;
+    width: 50%;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+
+    @media only screen and (max-width: 769px) {
+        position: static;
+        width: 50%;
+    }
+
+    &__icon {
+        width: 96px;
+        height: 96px;
+        margin-bottom: 16px;
+        @include colorIcon(var(--text-disabled));
+    }
+    &__text {
+        line-height: 20px;
+    }
+    .dc-btn {
+        width: 100%;
+        height: 40px;
+        border: 1px solid var(--button-secondary-default);
+        color: var(--text-general);
+        background: transparent;
+
+        &:hover {
+            background: var(--button-secondary-hover);
+        }
+    }
+}
diff --git a/packages/reports/src/sass/app/modules/smart-chart.scss b/packages/reports/src/sass/app/modules/smart-chart.scss
new file mode 100644
index 000000000000..3ae7a4689178
--- /dev/null
+++ b/packages/reports/src/sass/app/modules/smart-chart.scss
@@ -0,0 +1,247 @@
+/** @define chart-spot */
+.chart-spot {
+    display: flex;
+    flex-direction: column;
+
+    &__spot {
+        position: absolute;
+        bottom: -11px;
+        margin-left: -11.5px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-weight: bold;
+        color: var(--text-prominent);
+        background-color: var(--general-main-1);
+        border: 2px solid var(--text-less-prominent);
+
+        &--lost {
+            border-color: var(--text-loss-danger);
+            background: var(--text-loss-danger);
+        }
+        &--won {
+            background-color: var(--text-profit-success);
+            border-color: var(--text-profit-success);
+        }
+        &--won,
+        &--lost {
+            color: $COLOR_WHITE;
+        }
+        @include mobile {
+            bottom: -9.5px;
+            margin-left: -8px;
+            font-size: 0.8rem;
+        }
+    }
+    &__entry {
+        left: -12px;
+        top: -12px;
+        position: relative;
+        border: 6px solid var(--brand-red-coral);
+        background-color: var(--general-main-2);
+
+        @include mobile {
+            border-width: 3px;
+            left: -9px;
+            top: -9px;
+        }
+    }
+    &__spot,
+    &__entry {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+
+        @include mobile {
+            width: 16px;
+            height: 16px;
+        }
+    }
+    &__sell {
+        border-radius: 50%;
+        width: 2px;
+        height: 2px;
+        margin-left: -2px;
+        margin-top: -2px;
+        background-color: var(--text-prominent);
+        border: 2px solid var(--text-prominent);
+    }
+}
+
+/** @define chart-spot-label */
+.chart-spot-label {
+    &__info-container {
+        width: 100%;
+        position: relative;
+    }
+    &__time-value-container {
+        position: absolute;
+        transform: translateX(-50%);
+        display: flex;
+        flex-direction: column;
+
+        &--top {
+            bottom: 21px;
+
+            .chart-spot-label__time-container {
+                margin-bottom: 2px;
+            }
+            @include mobile {
+                bottom: 9.5px;
+            }
+        }
+        &--bottom {
+            top: 18px;
+            flex-direction: column-reverse;
+
+            .chart-spot-label__time-container {
+                margin-top: 2px;
+            }
+            @include mobile {
+                top: 7.5px;
+            }
+        }
+    }
+    &__time-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0px 8px;
+
+        /* postcss-bem-linter: ignore */
+        svg {
+            /* postcss-bem-linter: ignore */
+            g {
+                stroke: var(--text-prominent);
+            }
+        }
+    }
+    &__time-icon {
+        margin-right: 2px;
+    }
+    &__value-container {
+        background: var(--text-less-prominent);
+        font-size: 1.4rem;
+        padding: 4px 8px;
+        border-radius: 11px;
+
+        /* postcss-bem-linter: ignore */
+        p {
+            font-weight: bold;
+            color: $color-white;
+            margin-top: 2px;
+        }
+        &--lost {
+            background-color: var(--text-loss-danger);
+        }
+        &--won {
+            background-color: var(--text-profit-success);
+        }
+        &--won,
+        &--lost {
+            color: var(--text-colored-background);
+        }
+        @include mobile {
+            font-size: 1rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 0.2rem;
+        }
+    }
+}
+
+/** @define chart-marker-line */
+.chart-marker-line {
+    height: 94.5%;
+    margin-bottom: 0.8em;
+    z-index: 0 !important;
+    bottom: -100%;
+    transition: none;
+
+    &__wrapper {
+        border-left-width: 2px;
+        padding-left: 0.5em;
+        height: 100%;
+        border-color: var(--text-less-prominent);
+
+        &:after {
+            background: linear-gradient(to bottom, var(--general-main-1) 3%, transparent 10%);
+            position: absolute;
+            content: ' ';
+            top: 0px;
+            left: -1px;
+            height: 100%;
+            width: 3px;
+        }
+    }
+    &__icon {
+        position: absolute;
+        bottom: -23px;
+        left: -11px;
+        white-space: nowrap;
+
+        &--time {
+            /* postcss-bem-linter: ignore */
+            path {
+                fill: var(--text-less-prominent);
+            }
+        }
+        &--won {
+            /* postcss-bem-linter: ignore */
+            circle {
+                fill: var(--text-profit-success);
+            }
+        }
+        &--lost {
+            /* postcss-bem-linter: ignore */
+            circle {
+                fill: var(--text-loss-danger);
+            }
+        }
+        @include mobile {
+            bottom: -15px;
+            left: -7px;
+            width: 16px;
+            height: 16px;
+        }
+    }
+    &--solid {
+        border-left-style: solid;
+    }
+    &--dash {
+        border-left-style: dashed;
+    }
+}
+
+/** @define sc-toolbar-widget; weak */
+.sc-toolbar-widget {
+    &--bottom {
+        .ciq-menu {
+            margin: 0px;
+        }
+    }
+}
+
+/** @define smartcharts-mobile; weak */
+.smartcharts-mobile {
+    .cq-modal-dropdown {
+        left: 0px;
+        top: 0px;
+    }
+    .sc-chart-type,
+    .sc-interval {
+        .sc-tooltip__inner {
+            display: none;
+        }
+    }
+    .cq-chart-title .sc-dialog__body {
+        height: 100% !important;
+    }
+    .sc-categorical-display {
+        height: calc(100% - 38px) !important;
+    }
+    .cq-menu-dropdown .title .title-text {
+        display: inline;
+    }
+}
diff --git a/packages/reports/src/sass/app/modules/trading-mobile.scss b/packages/reports/src/sass/app/modules/trading-mobile.scss
new file mode 100644
index 000000000000..cc78321b8dfa
--- /dev/null
+++ b/packages/reports/src/sass/app/modules/trading-mobile.scss
@@ -0,0 +1,409 @@
+@include mobile {
+    /** @define dc-collapsible; weak */
+    .dc-collapsible {
+        &:before {
+            content: '';
+            position: absolute;
+            pointer-events: none;
+            opacity: 1;
+            z-index: -1;
+            border-radius: $BORDER_RADIUS;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            transition: opacity 0.25s;
+            background: var(--general-section-1);
+        }
+        &--is-expanded {
+            background: transparent;
+
+            &:before {
+                opacity: 0.75;
+            }
+        }
+    }
+    /** @define barrier; weak */
+    .barrier {
+        .draggable {
+            pointer-events: none;
+
+            & .price {
+                padding-left: 0;
+
+                &:after {
+                    content: none;
+                }
+            }
+        }
+        &__widget {
+            display: grid;
+            grid-template-columns: 3.5fr 1fr;
+            height: 4rem;
+            margin: 0 0 0.8rem;
+            background: var(--general-main-1);
+            border-radius: $BORDER_RADIUS;
+
+            &-title {
+                font-size: 1.4rem;
+                font-weight: 400;
+                text-transform: none;
+                color: var(--text-less-prominent);
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+                padding-right: 0.8rem;
+            }
+        }
+        &__fields {
+            width: 100%;
+
+            &-input {
+                width: 100%;
+                padding: 0;
+                font-weight: bold;
+                border: none;
+
+                &--is-offset {
+                    pointer-events: none;
+                }
+                &:focus,
+                &:active,
+                &:hover {
+                    border: none;
+                }
+            }
+            &-single {
+                margin: 0;
+                height: 100%;
+                display: flex;
+                align-items: center;
+            }
+            & .dc-tooltip {
+                width: 100%;
+            }
+            & .dc-input-wrapper {
+                &__input {
+                    outline: 0;
+                    border: none;
+                }
+                &__button {
+                    transform: scale(1.4);
+                    stroke: var(--text-general);
+
+                    &:hover,
+                    &:active {
+                        background: none;
+                    }
+                }
+            }
+        }
+    }
+    /** @define allow-equals; weak */
+    .allow-equals {
+        .dc-checkbox__label {
+            font-weight: bold;
+            color: var(--text-prominent);
+            margin-right: 0.8rem;
+        }
+    }
+    /** @define dc-modal; weak */
+    .dc-modal {
+        &__container_trade-params {
+            border-radius: 2px;
+            box-shadow: 0 16px 16px 0 var(--shadow-menu-2), 0 0 16px 0 var(--shadow-menu-2);
+            overflow-y: scroll;
+
+            /* postcss-bem-linter: ignore */
+            .dc-relative-datepicker {
+                margin-top: -0.8rem;
+                max-width: 110px;
+                margin-left: auto;
+                margin-right: auto;
+
+                /* iPhone SE screen height fixes due to UI space restrictions */
+                @media only screen and (max-height: 480px) {
+                    margin-top: -4.6rem;
+                }
+            }
+            /* iPhone SE screen height fixes due to UI space restrictions */
+            @media only screen and (max-height: 480px) {
+                top: 0.4rem;
+            }
+        }
+        &-header {
+            /* postcss-bem-linter: ignore */
+            &--trade-params {
+                line-height: 1.4;
+                border-bottom-width: 1px;
+
+                /* postcss-bem-linter: ignore */
+                .dc-modal-header__close {
+                    padding: 0.8rem 0.8rem 0;
+                    margin: 0.4rem 0.4rem 0.2rem;
+                }
+            }
+        }
+    }
+    /** @define dc-tabs; weak */
+    .dc-tabs {
+        /* postcss-bem-linter: ignore */
+        &--trade-params__multiplier-tabs {
+            /* postcss-bem-linter: ignore */
+            .dc-tabs__content {
+                display: flex;
+                flex-direction: column;
+                min-height: 400px;
+
+                @media only screen and (max-height: 480px) {
+                    min-height: 360px;
+                }
+            }
+        }
+    }
+    /** @define trade-params; weak */
+    .trade-params {
+        &__error-popup {
+            top: 12rem !important;
+            opacity: 0.8;
+            z-index: 2 !important;
+
+            &--has-numpad {
+                z-index: 9999 !important;
+                top: 0.8rem !important;
+            }
+        }
+        &__duration {
+            &-tickpicker {
+                height: 328px;
+
+                .dc-tick-picker {
+                    max-width: 100%;
+                    height: 100%;
+                    align-items: center;
+                    justify-content: center;
+                }
+            }
+        }
+        &__amount {
+            &-keypad {
+                width: 100%;
+                padding: 1.6rem;
+                height: auto;
+                margin-top: 0.8rem;
+                margin-bottom: 0.8rem;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .dc-numpad--is-currency,
+                .dc-numpad--is-regular {
+                    max-width: 100%;
+                    grid-template-columns: repeat(4, 1fr);
+                    grid-gap: 16px;
+                }
+                .dc-numpad__increment,
+                .dc-numpad__decrement {
+                    height: 48px !important;
+
+                    .dc-btn__text {
+                        font-size: 3rem;
+                        font-weight: normal;
+                    }
+                    &[disabled] {
+                        .dc-btn__text {
+                            color: var(--text-disabled);
+                        }
+                    }
+                }
+                .dc-numpad__number {
+                    border-radius: 2.4rem;
+                    background-color: var(--general-section-2);
+                    width: 48px;
+                    height: 48px !important;
+                    font-weight: 700;
+                    text-transform: none;
+                    line-height: 1.75;
+                    color: var(--text-prominent);
+                    text-align: left !important;
+
+                    &--is-left-aligned {
+                        padding: 0 0 0 0.2rem;
+                    }
+                }
+                .dc-numpad__bkspace,
+                .dc-numpad__ok {
+                    .dc-numpad__number {
+                        height: 100% !important;
+                    }
+                }
+                .dc-numpad__bkspace {
+                    .dc-numpad__number {
+                        &[disabled] {
+                            background-color: var(--general-disabled);
+                        }
+                        .dc-text {
+                            font-size: 1.8rem;
+                            /* -webkit-touch-callout only is supported on iOS webkit engine, thus it should apply iOS only styles */
+                            @supports (-webkit-touch-callout: none) {
+                                @media only screen and (min-width: 360px) {
+                                    font-size: 3rem;
+                                }
+                            }
+                        }
+                    }
+                }
+                /* iPhone SE screen height fixes due to UI space restrictions */
+                @media only screen and (max-height: 480px) {
+                    transform: scale(1, 0.92);
+                    transform-origin: top;
+                    margin-top: -0.4rem;
+                }
+            }
+        }
+        &__header {
+            @include mobile {
+                padding: 0.5rem 0;
+
+                &-label {
+                    line-height: 2rem;
+                }
+                &-value {
+                    line-height: 1.8rem;
+                    font-size: 1.2rem;
+
+                    &--has-error {
+                        color: var(--status-danger);
+                        font-weight: bold;
+                    }
+                }
+            }
+        }
+        &__contract-type-container {
+            display: flex;
+
+            .contract-type-widget {
+                flex: 1;
+            }
+        }
+        &__multiplier {
+            &-radio-group {
+                flex-direction: column;
+                align-items: flex-start;
+                padding: 1.6rem;
+                margin-top: 0rem;
+                flex: 1;
+
+                &--empty {
+                    display: none;
+                }
+                .dc-radio-group__item {
+                    min-height: 4.8rem;
+                    max-height: 4.8rem;
+                    width: 100%;
+                    align-items: center;
+                    margin-bottom: 0.8rem;
+                    padding: 0.8rem;
+                    border-radius: $BORDER_RADIUS;
+                    border: 1px solid var(--border-normal);
+                    font-size: 1.4rem;
+                    flex-direction: row;
+
+                    &--selected {
+                        border: 1px solid var(--brand-secondary);
+                    }
+                }
+            }
+            &-amount-text {
+                padding: 1.6rem 4rem 0;
+                line-height: 1.4rem;
+                text-align: center;
+                color: var(--text-general);
+            }
+            &-risk-management-dialog {
+                display: grid;
+                grid-template-rows: auto auto auto 1fr;
+
+                &--no-cancel {
+                    grid-template-rows: auto auto 1fr;
+                }
+                &-bottom-separator {
+                    border-bottom: 1px solid var(--border-disabled);
+                    height: calc(100% - 1.6rem);
+                }
+                &-apply-button {
+                    display: flex;
+                    align-items: flex-end;
+                    margin: 0 1.6rem;
+
+                    .dc-btn {
+                        flex: 1;
+                        height: 4rem;
+                    }
+                }
+                .trade-container__fieldset {
+                    padding: 1rem 1.6rem;
+                    margin-bottom: 0;
+                    border-bottom: 1px solid var(--border-disabled);
+                    border-radius: 0;
+
+                    .dc-input-field {
+                        z-index: 0;
+                    }
+                    .dc-popover {
+                        padding: 0.6rem 1rem;
+                    }
+                }
+                .dc-checkbox__box {
+                    margin-left: 0rem;
+                }
+                .dc-radio-group {
+                    padding: 1.6rem 0rem;
+                }
+            }
+            &-ic-info-wrapper {
+                display: flex;
+                justify-content: flex-start;
+                position: absolute;
+                top: 0.6rem;
+                left: 0.2rem;
+                z-index: 2;
+
+                .dc-popover {
+                    padding: 0.5rem 1rem;
+                }
+            }
+            &-deal-cancellation-dialog {
+                .dc-checkbox {
+                    margin-top: 2.6rem;
+
+                    .dc-checkbox__box {
+                        margin-left: 0;
+                    }
+                }
+            }
+            &-trade-info {
+                display: flex;
+                flex-direction: column;
+                padding-bottom: 1.6rem;
+                align-items: center;
+
+                div:nth-child(2) {
+                    padding-top: 1.6rem;
+                }
+
+                &-tooltip-text {
+                    text-align: right;
+                    border-bottom: 1px dotted var(--text-general);
+                    display: flex;
+
+                    *:first-child {
+                        &:before {
+                            content: ': ';
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/packages/reports/src/sass/app/modules/trading.scss b/packages/reports/src/sass/app/modules/trading.scss
new file mode 100644
index 000000000000..241efc5fef0d
--- /dev/null
+++ b/packages/reports/src/sass/app/modules/trading.scss
@@ -0,0 +1,675 @@
+@keyframes slide {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(100%);
+    }
+}
+
+.loader {
+    overflow: hidden;
+    background-color: rgba(var(--general-main-1), 0.16);
+
+    &--loading {
+        width: inherit;
+        height: inherit;
+        animation: slide 1s cubic-bezier(1, 0, 0.5, 0) infinite;
+        background-image: linear-gradient(to left, rgba(255, 255, 255, 0), $color-white 10%, rgba(255, 255, 255, 0));
+        opacity: 0.32;
+    }
+}
+
+.app-contents {
+    &--contract-mode,
+    &--is-disabled {
+        .trade-container {
+            .popover {
+                display: none;
+            }
+            .dc-tooltip:before,
+            .dc-tooltip:after {
+                display: none;
+            }
+        }
+    }
+    .sidebar__items--blur {
+        .popover {
+            display: none;
+        }
+        .dc-tooltip:before,
+        .dc-tooltip:after {
+            display: none;
+        }
+    }
+}
+
+/** @define modal-dialog; weak */
+.dc-mobile-dialog {
+    &__contracts-modal-list {
+        /* postcss-bem-linter: ignore */
+        .category-wrapper {
+            background-color: var(--general-main-1) !important;
+        }
+    }
+    .dc-select-native__placeholder:not(.dc-select-native__placeholder--has-value) {
+        background: initial;
+    }
+}
+
+/** @define trade-container; weak */
+.trade-container {
+    background: var(--general-main-1);
+
+    &__fieldset {
+        border-radius: $BORDER_RADIUS;
+        padding: 0.8rem;
+        margin-bottom: 0.4rem;
+        background-color: var(--general-section-1);
+        border-color: var(--general-section-1);
+        color: var(--text-general);
+        @include mobile {
+            padding: 0;
+            margin-bottom: 0.8rem;
+            background-color: transparent;
+        }
+
+        /* postcss-bem-linter: ignore */
+        > div:first-child {
+            margin-top: 0;
+        }
+        &-header {
+            position: relative;
+
+            &--inline {
+                display: flex;
+                justify-content: flex-end;
+            }
+        }
+        &-info {
+            @include typeface(--paragraph-left-normal-black);
+            color: var(--text-general);
+            margin: auto;
+
+            &--left {
+                transform: translateX(5px);
+            }
+        }
+        &-wrapper {
+            &--disabled {
+                .btn-purchase__box-shadow {
+                    opacity: 0;
+                }
+            }
+        }
+        .dc-datepicker {
+            .dc-input {
+                border: 1px solid var(--fill-normal);
+                background-color: var(--general-main-1);
+                margin-bottom: 0;
+
+                &__field {
+                    height: 3.2rem;
+                }
+            }
+        }
+    }
+    &__input {
+        align-self: center;
+        appearance: none;
+        box-sizing: border-box;
+        border-radius: $BORDER_RADIUS;
+        background: var(--fill-normal);
+        color: var(--text-general);
+        border: 1px solid var(--fill-normal);
+
+        &:hover {
+            border-color: var(--border-hover);
+        }
+        &:active,
+        &:focus {
+            border-color: var(--border-active);
+        }
+    }
+    &__error {
+        justify-content: center;
+        align-items: center;
+        display: flex;
+
+        &-info {
+            @include typeface(--small-left-light-black, none);
+            @include toEm(padding, 5px 5px 5px 8px, 1.2em);
+            @include toEm(margin-bottom, 10px, 1.2em);
+            color: var(--text-general);
+            background-color: rgba($color-red, 0.16);
+            display: block;
+            border: 1px solid var(--brand-red-coral);
+            border-radius: $BORDER_RADIUS;
+        }
+    }
+    &__currency {
+        position: absolute;
+        height: 3.2rem;
+        right: 4rem;
+        align-items: center;
+        justify-content: center;
+        display: flex;
+        background: transparent;
+        border-color: transparent;
+        z-index: 2;
+        color: inherit;
+
+        &--symbol {
+            font-size: 1.4rem;
+            line-height: 1.5;
+            padding-bottom: 0.2rem;
+        }
+        &:before {
+            @include typeface(--paragraph-center-normal-black);
+            color: inherit;
+        }
+        & ~ .trade-container__input {
+            padding: 0 30px;
+        }
+    }
+    &__price,
+    &__order-input {
+        line-height: 0.9rem;
+        border: 0;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        position: relative;
+        color: var(--text-prominent);
+
+        &-info {
+            display: flex;
+            justify-self: left;
+            align-items: center;
+
+            @include mobile {
+                color: var(--text-colored-background);
+                width: 100%;
+                justify-content: space-between;
+                align-items: center;
+
+                &-wrapper {
+                    display: flex;
+                    justify-content: flex-end;
+                    align-items: center;
+                }
+            }
+            @include desktop {
+                min-height: 2.1rem;
+            }
+
+            &--disabled {
+                opacity: 0.32;
+            }
+            &--slide {
+                width: 92px;
+                height: 8px;
+                margin: 6.5px 0;
+                @extend .loader;
+
+                .trade-container__price-info-basis {
+                    @extend .loader--loading;
+                }
+            }
+            &--fade &-value {
+                opacity: 0;
+            }
+            &--fade {
+                .trade-container__price-info-movement {
+                    opacity: 0;
+                }
+            }
+            &-value {
+                font-size: 1.4rem;
+                font-weight: 700;
+                text-align: left;
+                line-height: 1.25;
+                margin-left: 0.1rem;
+                color: var(--text-prominent);
+                opacity: 1;
+                transition: 0.3s;
+
+                @include mobile {
+                    color: var(--text-colored-background);
+                }
+            }
+            &-basis {
+                margin-left: 0;
+                font-weight: normal;
+                @include typeface(--paragraph-left-normal-black);
+                color: var(--text-less-prominent);
+                @include mobile {
+                    @include typeface(--xsmall-left-normal-black);
+                    color: var(--text-colored-background);
+                }
+            }
+            &-currency {
+                margin-left: 4px;
+                margin-right: 1px;
+                display: inline-block;
+                position: relative;
+                font-weight: bold;
+            }
+            &-movement {
+                margin-left: 4px;
+                width: 16px;
+                height: 16px;
+                bottom: 1px;
+                position: relative;
+            }
+        }
+    }
+    &__price-info-currency {
+        @include mobile {
+            font-size: 0.9rem;
+        }
+    }
+    &__barriers {
+        display: flex;
+        flex-direction: column;
+
+        &:first-child {
+            padding-right: 8px;
+        }
+        &-input {
+            padding-left: 3px;
+        }
+        &-single {
+            width: 100%;
+        }
+        &-multiple {
+            &-input {
+                padding-left: 25px;
+                padding-right: 9px;
+                text-align: center;
+            }
+            &:first-of-type {
+                padding-right: 8px;
+            }
+        }
+        &--up,
+        &--down {
+            position: absolute;
+            margin-top: 15px;
+        }
+        &--up {
+            right: 86.5%;
+        }
+        &--down {
+            right: 39%;
+        }
+    }
+    &__allow-equals {
+        /* postcss-bem-linter: ignore */
+        &__label {
+            color: var(--text-general);
+        }
+    }
+    &__currency-options {
+        // fix for Safari:
+        // display: inline-block causes input cursor to seemingly appears duplicated
+        display: grid;
+        grid-template-columns: 3fr 1.5fr;
+        grid-gap: 0.4rem;
+
+        .dc-dropdown-container {
+            /* postcss-bem-linter: ignore */
+            &__currency {
+                margin-top: 0.8em;
+                min-width: unset;
+
+                /* postcss-bem-linter: ignore */
+                .dc-dropdown__select-arrow {
+                    top: 9px;
+                }
+                /* postcss-bem-linter: ignore */
+                .dc-dropdown__display {
+                    border-radius: $BORDER_RADIUS;
+
+                    /* postcss-bem-linter: ignore */
+                    .symbols {
+                        font-size: 1.4em;
+                    }
+                }
+            }
+        }
+    }
+    &__amount {
+        &--multipliers {
+            & .trade-container__input {
+                left: 3.6rem;
+            }
+        }
+        & .dc-tooltip--error {
+            & .dc-input-wrapper {
+                border: 1px solid var(--status-danger);
+
+                &:hover {
+                    border-color: var(--status-danger);
+                }
+            }
+        }
+        & .dc-input-wrapper {
+            border-radius: $BORDER_RADIUS;
+            background: var(--fill-normal);
+            border: 1px solid var(--fill-normal);
+            height: 3.2rem;
+            box-sizing: border-box;
+
+            &__button {
+                top: 1px;
+
+                &--increment {
+                    right: 1px;
+                }
+                &--decrement {
+                    left: 1px;
+                }
+            }
+            &:hover {
+                border-color: var(--border-hover);
+            }
+            &:active,
+            &:focus {
+                border-color: var(--border-active);
+            }
+        }
+        & .trade-container__input {
+            font-size: 1.4rem;
+            max-width: calc(100% - 7.2rem);
+            border-radius: 0 $BORDER_RADIUS $BORDER_RADIUS 0;
+            background: none;
+            border: none;
+            padding: 0 0 0.2rem;
+
+            &.input--error {
+                border: none !important;
+            }
+        }
+    }
+    &__multiplier {
+        display: flex;
+        flex-direction: column;
+
+        &-dropdown {
+            /* postcss-bem-linter: ignore */
+            .dc-dropdown__display-text {
+                padding-right: unset;
+                padding-left: 1em;
+            }
+            /* postcss-bem-linter: ignore */
+            .dc-dropdown__display-text,
+            .dc-list__item-text {
+                text-transform: unset;
+            }
+        }
+        /* postcss-bem-linter: ignore */
+        .dc-popover {
+            align-self: flex-end;
+        }
+    }
+    &__deal-cancellation-popover {
+        width: 28rem;
+    }
+    &__cancel-deal-info {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+
+        &--row-layout {
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: flex-start;
+
+            .trade-container__price-info-currency {
+                margin-left: -0.1rem;
+            }
+            @include mobile {
+                padding: 0.4rem 0 0 !important;
+                margin-bottom: -0.5rem;
+
+                .trade-container__price-info-currency {
+                    font-size: 0.9rem !important;
+                }
+                .trade-container__price-info-basis {
+                    font-size: 0.8rem;
+                }
+            }
+        }
+        .trade-container__price-info-currency {
+            font-size: 1.2rem;
+        }
+        @include mobile {
+            padding: 0 0.4rem;
+            min-height: 1.4rem;
+
+            .trade-container__price-info-basis {
+                color: var(--text-general);
+            }
+            .trade-container__price-info-value {
+                color: var(--text-prominent);
+                font-size: 1rem;
+            }
+            .trade-container__price-info-currency {
+                font-size: 0.9rem;
+            }
+        }
+    }
+    &__multipliers-trade-info {
+        display: flex;
+        justify-content: space-around;
+        gap: 2.8rem;
+
+        &-tooltip-text {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding-top: 0.8rem;
+            text-align: right;
+
+            span {
+                border-bottom: 1px dotted var(--text-general);
+            }
+        }
+    }
+    &__popover {
+        /* postcss-bem-linter: ignore */
+        .dc-checkbox {
+            margin-top: 0.8rem;
+
+            /* postcss-bem-linter: ignore */
+            &__label {
+                font-size: inherit;
+            }
+        }
+    }
+    /* postcss-bem-linter: ignore */
+    .symbols.disabled {
+        color: var(--text-disabled);
+    }
+    .dc-dropdown--left {
+        .dc-dropdown__display-text {
+            padding-left: 15px;
+            padding-right: unset;
+        }
+        .dc-dropdown__select-arrow {
+            left: 0.3rem;
+        }
+    }
+}
+
+/** @define dc-input-field; weak */
+.dc-input-field {
+    .dc-input-wrapper__icon {
+        top: 6px;
+    }
+    &--has-error {
+        .dc-input {
+            border: 1px solid $COLOR_RED !important;
+        }
+    }
+}
+
+/** @define purchase-container; weak */
+.purchase-container {
+    position: relative;
+
+    &__option {
+        padding-top: 8px;
+        padding-bottom: 8px;
+
+        &:not(:only-child) {
+            &:nth-last-child(2) {
+                border-bottom-width: 0;
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+                margin-bottom: 0 !important;
+            }
+            &:nth-last-child(1) {
+                border-top-width: 0;
+                border-top-left-radius: 0;
+                border-top-right-radius: 0;
+                margin-bottom: 0 !important;
+
+                .trade-container__price {
+                    margin-top: -4px;
+                }
+            }
+        }
+        @include mobile {
+            padding: initial;
+            position: relative;
+
+            &:not(&--has-cancellation) {
+                .btn-purchase--multiplier {
+                    height: 86px;
+                }
+            }
+        }
+    }
+    &__loading {
+        background: rgba(255, 255, 255, 0.6);
+        border-radius: $BORDER_RADIUS;
+        width: calc(100% + 2px);
+        height: calc(100% + 2px);
+        left: -2px;
+    }
+    @include mobile {
+        display: grid;
+        grid-template-areas: 'a b';
+        grid-column-gap: 0.5rem;
+    }
+    //&__lock {
+    //    position: absolute;
+    //    display: flex;
+    //    justify-content: center;
+    //    align-items: center;
+    //    background: $COLOR_LIGHT_BLACK_4_SOLID;
+    //    opacity: 0.95;
+    //    min-height: 202px;
+    //    width: calc(100% - 6px);
+    //    height: calc(100% - 2px);
+    //    z-index: 3;
+    //    top: 0;
+    //    left: 2px;
+    //    right: 0;
+    //    flex-direction: column;
+    //    bottom: 0;
+    //    border-radius: $BORDER_RADIUS;
+    //    @include themify($themes) {
+    //        background: themed('background_container_color');
+    //    }
+    //
+    //    &-icon {
+    //        width: 64px;
+    //        height: 64px;
+    //        @extend %inline-icon.white;
+    //    }
+    //    &-button {
+    //        height: 32px;
+    //        margin: 0 1rem 1.5rem;
+    //        width: 90px;
+    //        line-height: 100%;
+    //        background: transparent;
+    //    }
+    //    &-header {
+    //        margin: 2px 8px 8px;
+    //        padding: 0;
+    //        @include themify($themes) {
+    //            color: themed('text_color');
+    //        }
+    //    }
+    //    &-message {
+    //        text-align: center;
+    //        padding: 8px;
+    //        margin: 1rem 1rem 0;
+    //        border-radius: $BORDER_RADIUS;
+    //        font-size: 10px;
+    //        @include themify($themes) {
+    //            background: themed('background_cover');
+    //            color: themed('text_primary_color');
+    //        }
+    //    }
+    //}
+}
+
+/** @define duration-container */
+.duration-container {
+    /* postcss-bem-linter: ignore */
+    .dropdown-container {
+        margin-top: 0.8em;
+    }
+}
+
+/** @define dc-collapsible */
+@include mobile {
+    .dc-collapsible {
+        position: absolute;
+        bottom: 0;
+        z-index: 999;
+        margin: 0 auto;
+        left: 0;
+        width: calc(100vw - 1.6rem);
+        transform: translate(0.8rem, 0);
+    }
+}
+
+/** @define market-unavailable-modal */
+@include mobile {
+    .market-unavailable-modal {
+        @media only screen and (max-height: 600px) {
+            align-items: flex-start;
+            padding-top: 10rem;
+
+            .dc-dialog__dialog {
+                margin-top: 0;
+            }
+        }
+
+        /* postcss-bem-linter: ignore */
+        .dc-dialog__footer {
+            flex-direction: column;
+            align-items: center;
+            width: auto;
+
+            .dc-btn {
+                margin: 0;
+                width: 100%;
+
+                &--primary {
+                    order: 1;
+                    margin-bottom: 1rem;
+                }
+                &--secondary {
+                    order: 2;
+                }
+            }
+        }
+    }
+}

From 3fc26e062f1dbb581d91cc59dda69c4ffe817380 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Sun, 27 Mar 2022 15:19:40 +0430
Subject: [PATCH 02/64] add config to core

---
 .circleci/config.yml                          |  1 +
 .github/CODEOWNERS                            |  4 ++
 packages/core/build/config.js                 |  5 ++
 .../core/src/App/Constants/routes-config.js   | 61 ++++++++++---------
 packages/reports/src/init-store.js            |  2 +-
 5 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index babd2e81b14c..646385fac36d 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -64,6 +64,7 @@ commands:
             - "packages/bot-skeleton/node_modules"
             - "packages/bot-web-ui/node_modules"
             - "packages/cashier/node_modules"
+            - "packages/reports/node_modules"
             - "packages/components/node_modules"
             - "packages/core/node_modules"
             - "packages/indicators/node_modules"
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 7bc8c901a133..2a3e964280a4 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -113,6 +113,10 @@
 
 /packages/trader/**/*                                           @matin-binary @balakrishna-binary @akmal-binary 
 
+#  deriv-app/reports
+# ==============================================================
+
+/packages/reports/**/*                                           @matin-binary @balakrishna-binary
 
 
 # ==============================================================
diff --git a/packages/core/build/config.js b/packages/core/build/config.js
index d81b7dac6846..97710a82a8a2 100644
--- a/packages/core/build/config.js
+++ b/packages/core/build/config.js
@@ -49,6 +49,10 @@ const copyConfig = base => {
             from: path.resolve(__dirname, '../node_modules/@deriv/trader/dist/trader'),
             to: 'trader',
         },
+        {
+            from: path.resolve(__dirname, '../node_modules/@deriv/reports/dist/reports'),
+            to: 'reports',
+        },
         {
             from: path.resolve(__dirname, '../node_modules/@deriv/appstore/dist/appstore'),
             to: 'appstore',
@@ -140,6 +144,7 @@ const generateSWConfig = is_release => ({
         /^bot\//,
         /^media\//,
         /^trader\//,
+        /^reports\//,
         /^cashier\//,
         /^js\/core\.[a-z_]*-json\./,
     ],
diff --git a/packages/core/src/App/Constants/routes-config.js b/packages/core/src/App/Constants/routes-config.js
index 2f6573ca440a..a576a9089c4b 100644
--- a/packages/core/src/App/Constants/routes-config.js
+++ b/packages/core/src/App/Constants/routes-config.js
@@ -14,6 +14,11 @@ const Trader = React.lazy(() => {
     return import(/* webpackChunkName: "trader" */ '@deriv/trader');
 });
 
+const Reports = React.lazy(() => {
+    // eslint-disable-next-line import/no-unresolved
+    return import(/* webpackChunkName: "reports" */ '@deriv/reports');
+});
+
 const Account = React.lazy(() => {
     // eslint-disable-next-line import/no-unresolved
     return import(/* webpackChunkName: "account" */ '@deriv/account');
@@ -42,6 +47,34 @@ const getModules = ({ is_appstore }) => {
             // Don't use `Localize` component since native html tag like `option` cannot render them
             getTitle: () => localize('Bot'),
         },
+        {
+            path: routes.reports,
+            component: Reports,
+            getTitle: () => localize('Reports'),
+            icon_component: 'IcReports',
+            is_authenticated: true,
+            routes: [
+                {
+                    path: routes.positions,
+                    component: Reports,
+                    getTitle: () => localize('Open positions'),
+                    icon_component: 'IcOpenPositions',
+                    default: true,
+                },
+                {
+                    path: routes.profit,
+                    component: Reports,
+                    getTitle: () => localize('Profit table'),
+                    icon_component: 'IcProfitTable',
+                },
+                {
+                    path: routes.statement,
+                    component: Reports,
+                    getTitle: () => localize('Statement'),
+                    icon_component: 'IcStatement',
+                },
+            ],
+        },
         {
             path: routes.account_deactivated,
             component: Account,
@@ -219,34 +252,6 @@ const getModules = ({ is_appstore }) => {
                     getTitle: () => localize('MT5'),
                     is_authenticated: false,
                 },
-                {
-                    path: routes.reports,
-                    component: Trader,
-                    getTitle: () => localize('Reports'),
-                    icon_component: 'IcReports',
-                    is_authenticated: true,
-                    routes: [
-                        {
-                            path: routes.positions,
-                            component: Trader,
-                            getTitle: () => localize('Open positions'),
-                            icon_component: 'IcOpenPositions',
-                            default: true,
-                        },
-                        {
-                            path: routes.profit,
-                            component: Trader,
-                            getTitle: () => localize('Profit table'),
-                            icon_component: 'IcProfitTable',
-                        },
-                        {
-                            path: routes.statement,
-                            component: Trader,
-                            getTitle: () => localize('Statement'),
-                            icon_component: 'IcStatement',
-                        },
-                    ],
-                },
                 {
                     path: routes.contract,
                     component: Trader,
diff --git a/packages/reports/src/init-store.js b/packages/reports/src/init-store.js
index 71149f32bcd8..145e9fd5796f 100644
--- a/packages/reports/src/init-store.js
+++ b/packages/reports/src/init-store.js
@@ -1,7 +1,7 @@
 import { configure } from 'mobx';
 import RootStore from './Stores';
 import { setWebsocket } from '@deriv/shared';
-import ServerTime from '_common/base/server_time';
+import ServerTime from './_common/base/server_time';
 
 configure({ enforceActions: 'observed' });
 

From 8ba0a559f389248260ce6fe6316762ee5ae9dfd2 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Sun, 27 Mar 2022 16:17:40 +0430
Subject: [PATCH 03/64] fix event-source-polyfil version

---
 packages/reports/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/reports/package.json b/packages/reports/package.json
index 8ebfa110df83..8a6dd05209ed 100644
--- a/packages/reports/package.json
+++ b/packages/reports/package.json
@@ -98,7 +98,7 @@
       "canvas-toBlob": "^1.0.0",
       "classnames": "^2.2.6",
       "crc-32": "^1.2.0",
-      "event-source-polyfill": "^1.0.5",
+      "event-source-polyfill": "1.0.25",
       "extend": "^3.0.2",
       "formik": "^2.1.4",
       "i18next": "^20.3.2",

From da8c6c98671158f6a788301874d9844cb57f6ad9 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Sun, 10 Apr 2022 16:05:14 +0430
Subject: [PATCH 04/64] resolve build errors

---
 packages/core/package.json                    |   1 +
 packages/reports/build/constants.js           |   4 +-
 .../Elements/ContentLoader/index.js           |   3 +
 .../Elements/ContentLoader/positions-card.jsx |  35 ++
 .../ContentLoader/reports-table-row.jsx       |  28 ++
 .../Elements/ContentLoader/trade-params.jsx   |  44 +++
 .../PositionsDrawerCard/index.js              |   1 +
 .../positions-drawer-card.jsx                 | 230 ++++++++++++
 .../__tests__/result-mobile.spec.js           |  20 +
 .../helpers/__tests__/positions-helper.js     |  28 ++
 .../Elements/PositionsDrawer/helpers/index.js |   1 +
 .../helpers/positions-helper.js               |  49 +++
 .../Elements/PositionsDrawer/index.js         |   1 +
 .../PositionsDrawer/positions-drawer.jsx      | 159 ++++++++
 .../PositionsDrawer/positions-modal-card.jsx  | 341 ++++++++++++++++++
 .../PositionsDrawer/result-mobile.jsx         |  52 +++
 .../Form/CompositeCalendar/calendar-icon.jsx  |  11 +
 .../composite-calendar-mobile.jsx             | 250 +++++++++++++
 .../CompositeCalendar/composite-calendar.jsx  | 191 ++++++++++
 .../Form/CompositeCalendar/index.js           |   1 +
 .../Form/CompositeCalendar/list-item.jsx      |  22 ++
 .../Form/CompositeCalendar/side-list.jsx      |  27 ++
 .../CompositeCalendar/two-month-picker.jsx    | 116 ++++++
 .../__tests__/range-slider.spec.js            |  25 ++
 .../RangeSlider/__tests__/tick-steps.spec.js  |  13 +
 .../App/Components/Form/RangeSlider/index.js  |   1 +
 .../Form/RangeSlider/range-slider.jsx         | 119 ++++++
 .../Form/RangeSlider/tick-steps.jsx           |  45 +++
 .../App/Components/Form/TimePicker/dialog.jsx | 128 +++++++
 .../App/Components/Form/TimePicker/index.js   |   1 +
 .../Form/TimePicker/time-picker.jsx           | 128 +++++++
 .../src/App/Components/Form/fieldset.jsx      |  51 +++
 .../App/Components/Form/number-selector.jsx   |  45 +++
 .../Routes/__tests__/binary-link.spec.js      |  50 +++
 .../Routes/__tests__/helpers.spec.js          |  87 +++++
 .../__tests__/route-with-sub-routes.spec.js   |  32 ++
 .../src/App/Components/Routes/binary-link.jsx |  33 ++
 .../App/Components/Routes/binary-routes.jsx   |  16 +
 .../src/App/Components/Routes/helpers.js      |  37 ++
 .../src/App/Components/Routes/index.js        |   4 +
 .../Routes/route-with-sub-routes.jsx          |  57 +++
 .../Containers/ProgressSliderStream/index.js  |   1 +
 .../progress-slider-stream.jsx                |  36 ++
 .../reports/src/Components/amount-cell.jsx    |   2 +-
 .../src/Components/filter-component.jsx       |   2 +-
 .../src/Components/indicative-cell.jsx        |   2 +-
 .../src/Components/market-symbol-icon-row.jsx |   2 +-
 .../src/Components/placeholder-component.jsx  |   2 +-
 .../src/Components/profit_loss_cell.jsx       |   2 +-
 .../src/Constants/data-table-constants.js     |  13 +-
 .../reports/src/Constants/routes-config.js    |   2 +-
 .../reports/src/Containers/open-positions.jsx |  11 +-
 .../reports/src/Containers/profit-table.jsx   |  13 +-
 packages/reports/src/Containers/statement.jsx |  12 +-
 packages/reports/src/Helpers/contract-type.js | 112 ++++++
 packages/reports/src/Helpers/digits.js        |   5 +
 .../reports/src/Helpers/market-underlying.js  |   2 +-
 .../Stores/Modules/Contract/Constants/ui.js   |   9 +
 .../Contract/Constants/validation-rules.js    |  68 ++++
 .../Contract/Helpers/__tests__/logic.js       | 125 +++++++
 .../Contract/Helpers/chart-marker-helpers.js  | 116 ++++++
 .../Modules/Contract/Helpers/chart-markers.js |  89 +++++
 .../Contract/Helpers/chart-notifications.js   |   9 +
 .../Modules/Contract/Helpers/contract-type.js |   2 +
 .../Modules/Contract/Helpers/limit-orders.js  | 100 +++++
 .../Stores/Modules/Contract/Helpers/logic.js  | 111 ++++++
 .../Modules/Contract/Helpers/multiplier.js    |  40 ++
 .../Modules/Contract/contract-replay-store.js | 291 +++++++++++++++
 .../Stores/Modules/Contract/contract-store.js | 311 ++++++++++++++++
 .../Modules/Contract/contract-trade-store.js  | 195 ++++++++++
 .../Portfolio/Helpers/format-response.js      |   5 +-
 .../Modules/Profit/Helpers/format-response.js |   4 +-
 .../Modules/SmartChart/Constants/barriers.js  |  36 ++
 .../Modules/SmartChart/Constants/markers.js   |  59 +++
 .../SmartChart/Helpers/__tests__/barriers.js  |  59 +++
 .../Modules/SmartChart/Helpers/barriers.js    |  28 ++
 .../Modules/SmartChart/chart-barrier-store.js |  80 ++++
 .../Modules/SmartChart/chart-marker-store.js  |  11 +
 .../Statement/Helpers/format-response.js      |   2 +-
 .../src/Stores/Modules/Trading/trade-store.js |   4 +-
 packages/reports/src/Stores/base-store.js     |   2 +-
 .../src/Validator/__tests__/error.spec.js     |  53 +++
 packages/reports/src/Validator/errors.js      |  40 ++
 packages/reports/src/Validator/index.js       |   1 +
 packages/reports/src/Validator/validator.js   | 112 ++++++
 .../src/_common/components/loading.jsx        |  15 +
 packages/reports/src/_common/contract.js      | 272 ++++++++++++++
 .../templates/_common/components/loading.jsx  |  15 +
 .../_common/components/loading.tsx            |   0
 .../src/templates/app/components/loading.jsx  |  44 ---
 90 files changed, 4930 insertions(+), 84 deletions(-)
 create mode 100644 packages/reports/src/App/Components/Elements/ContentLoader/index.js
 create mode 100644 packages/reports/src/App/Components/Elements/ContentLoader/positions-card.jsx
 create mode 100644 packages/reports/src/App/Components/Elements/ContentLoader/reports-table-row.jsx
 create mode 100644 packages/reports/src/App/Components/Elements/ContentLoader/trade-params.jsx
 create mode 100644 packages/reports/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/index.js
 create mode 100644 packages/reports/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx
 create mode 100644 packages/reports/src/App/Components/Elements/PositionsDrawer/__tests__/result-mobile.spec.js
 create mode 100644 packages/reports/src/App/Components/Elements/PositionsDrawer/helpers/__tests__/positions-helper.js
 create mode 100644 packages/reports/src/App/Components/Elements/PositionsDrawer/helpers/index.js
 create mode 100644 packages/reports/src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.js
 create mode 100644 packages/reports/src/App/Components/Elements/PositionsDrawer/index.js
 create mode 100644 packages/reports/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
 create mode 100644 packages/reports/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx
 create mode 100644 packages/reports/src/App/Components/Elements/PositionsDrawer/result-mobile.jsx
 create mode 100644 packages/reports/src/App/Components/Form/CompositeCalendar/calendar-icon.jsx
 create mode 100644 packages/reports/src/App/Components/Form/CompositeCalendar/composite-calendar-mobile.jsx
 create mode 100644 packages/reports/src/App/Components/Form/CompositeCalendar/composite-calendar.jsx
 create mode 100644 packages/reports/src/App/Components/Form/CompositeCalendar/index.js
 create mode 100644 packages/reports/src/App/Components/Form/CompositeCalendar/list-item.jsx
 create mode 100644 packages/reports/src/App/Components/Form/CompositeCalendar/side-list.jsx
 create mode 100644 packages/reports/src/App/Components/Form/CompositeCalendar/two-month-picker.jsx
 create mode 100644 packages/reports/src/App/Components/Form/RangeSlider/__tests__/range-slider.spec.js
 create mode 100644 packages/reports/src/App/Components/Form/RangeSlider/__tests__/tick-steps.spec.js
 create mode 100644 packages/reports/src/App/Components/Form/RangeSlider/index.js
 create mode 100644 packages/reports/src/App/Components/Form/RangeSlider/range-slider.jsx
 create mode 100644 packages/reports/src/App/Components/Form/RangeSlider/tick-steps.jsx
 create mode 100644 packages/reports/src/App/Components/Form/TimePicker/dialog.jsx
 create mode 100644 packages/reports/src/App/Components/Form/TimePicker/index.js
 create mode 100644 packages/reports/src/App/Components/Form/TimePicker/time-picker.jsx
 create mode 100644 packages/reports/src/App/Components/Form/fieldset.jsx
 create mode 100644 packages/reports/src/App/Components/Form/number-selector.jsx
 create mode 100644 packages/reports/src/App/Components/Routes/__tests__/binary-link.spec.js
 create mode 100644 packages/reports/src/App/Components/Routes/__tests__/helpers.spec.js
 create mode 100644 packages/reports/src/App/Components/Routes/__tests__/route-with-sub-routes.spec.js
 create mode 100644 packages/reports/src/App/Components/Routes/binary-link.jsx
 create mode 100644 packages/reports/src/App/Components/Routes/binary-routes.jsx
 create mode 100644 packages/reports/src/App/Components/Routes/helpers.js
 create mode 100644 packages/reports/src/App/Components/Routes/index.js
 create mode 100644 packages/reports/src/App/Components/Routes/route-with-sub-routes.jsx
 create mode 100644 packages/reports/src/App/Containers/ProgressSliderStream/index.js
 create mode 100644 packages/reports/src/App/Containers/ProgressSliderStream/progress-slider-stream.jsx
 create mode 100644 packages/reports/src/Helpers/contract-type.js
 create mode 100644 packages/reports/src/Helpers/digits.js
 create mode 100644 packages/reports/src/Stores/Modules/Contract/Constants/ui.js
 create mode 100644 packages/reports/src/Stores/Modules/Contract/Constants/validation-rules.js
 create mode 100644 packages/reports/src/Stores/Modules/Contract/Helpers/__tests__/logic.js
 create mode 100644 packages/reports/src/Stores/Modules/Contract/Helpers/chart-marker-helpers.js
 create mode 100644 packages/reports/src/Stores/Modules/Contract/Helpers/chart-markers.js
 create mode 100644 packages/reports/src/Stores/Modules/Contract/Helpers/chart-notifications.js
 create mode 100644 packages/reports/src/Stores/Modules/Contract/Helpers/contract-type.js
 create mode 100644 packages/reports/src/Stores/Modules/Contract/Helpers/limit-orders.js
 create mode 100644 packages/reports/src/Stores/Modules/Contract/Helpers/logic.js
 create mode 100644 packages/reports/src/Stores/Modules/Contract/Helpers/multiplier.js
 create mode 100644 packages/reports/src/Stores/Modules/Contract/contract-replay-store.js
 create mode 100644 packages/reports/src/Stores/Modules/Contract/contract-store.js
 create mode 100644 packages/reports/src/Stores/Modules/Contract/contract-trade-store.js
 create mode 100644 packages/reports/src/Stores/Modules/SmartChart/Constants/barriers.js
 create mode 100644 packages/reports/src/Stores/Modules/SmartChart/Constants/markers.js
 create mode 100644 packages/reports/src/Stores/Modules/SmartChart/Helpers/__tests__/barriers.js
 create mode 100644 packages/reports/src/Stores/Modules/SmartChart/Helpers/barriers.js
 create mode 100644 packages/reports/src/Stores/Modules/SmartChart/chart-barrier-store.js
 create mode 100644 packages/reports/src/Stores/Modules/SmartChart/chart-marker-store.js
 create mode 100644 packages/reports/src/Validator/__tests__/error.spec.js
 create mode 100644 packages/reports/src/Validator/errors.js
 create mode 100644 packages/reports/src/Validator/index.js
 create mode 100644 packages/reports/src/Validator/validator.js
 create mode 100644 packages/reports/src/_common/components/loading.jsx
 create mode 100644 packages/reports/src/_common/contract.js
 create mode 100644 packages/reports/src/templates/_common/components/loading.jsx
 rename packages/trader/src/{templates => }/_common/components/loading.tsx (100%)
 delete mode 100644 packages/trader/src/templates/app/components/loading.jsx

diff --git a/packages/core/package.json b/packages/core/package.json
index 85e40e7bb9de..b053b322d736 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -99,6 +99,7 @@
         "@deriv/deriv-api": "^1.0.8",
         "@deriv/deriv-charts": "^0.5.1",
         "@deriv/p2p": "^0.7.3",
+        "@deriv/reports": "^1.0.0",
         "@deriv/shared": "^1.0.0",
         "@deriv/trader": "^3.8.0",
         "@deriv/translations": "^1.0.0",
diff --git a/packages/reports/build/constants.js b/packages/reports/build/constants.js
index 898a8794ae56..22a9b9e45ad3 100644
--- a/packages/reports/build/constants.js
+++ b/packages/reports/build/constants.js
@@ -11,7 +11,6 @@ const StylelintPlugin = require('stylelint-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 const {
     copyConfig,
@@ -39,6 +38,8 @@ const ALIASES = {
     Modules: path.resolve(__dirname, '../src/Modules'),
     Sass: path.resolve(__dirname, '../src/sass'),
     Stores: path.resolve(__dirname, '../src/Stores'),
+    App: path.resolve(__dirname, '../src/App'),
+    Helpers: path.resolve(__dirname, '../src/Helpers'),
 };
 
 const rules = (is_test_env = false, is_mocha_only = false) => [
@@ -124,7 +125,6 @@ const plugins = (base, is_test_env, is_mocha_only) => [
     new IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/ }),
     new MiniCssExtractPlugin(cssConfig()),
     new CircularDependencyPlugin({ exclude: /node_modules/, failOnError: true }),
-    new ForkTsCheckerWebpackPlugin(),
     ...(IS_RELEASE
         ? []
         : [
diff --git a/packages/reports/src/App/Components/Elements/ContentLoader/index.js b/packages/reports/src/App/Components/Elements/ContentLoader/index.js
new file mode 100644
index 000000000000..90c86e01a015
--- /dev/null
+++ b/packages/reports/src/App/Components/Elements/ContentLoader/index.js
@@ -0,0 +1,3 @@
+export * from './positions-card.jsx';
+export * from './reports-table-row.jsx';
+export * from './trade-params.jsx';
diff --git a/packages/reports/src/App/Components/Elements/ContentLoader/positions-card.jsx b/packages/reports/src/App/Components/Elements/ContentLoader/positions-card.jsx
new file mode 100644
index 000000000000..3e2708bc34b4
--- /dev/null
+++ b/packages/reports/src/App/Components/Elements/ContentLoader/positions-card.jsx
@@ -0,0 +1,35 @@
+import ContentLoader from 'react-content-loader';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const PositionsCardLoader = ({ speed }) => (
+    <ContentLoader
+        height={173}
+        width={218}
+        speed={speed}
+        primaryColor={'var(--general-section-1)'}
+        secondaryColor={'var(--general-hover)'}
+    >
+        <rect x='43' y='19' rx='0' ry='0' width='56' height='8' />
+        <rect x='147' y='19' rx='0' ry='0' width='56' height='8' />
+        <rect x='12' y='50' rx='0' ry='0' width='44' height='8' />
+        <rect x='13' y='68' rx='0' ry='0' width='192' height='8' />
+        <rect x='5' y='89' rx='0' ry='0' width='208' height='1' />
+        <rect x='12' y='104' rx='0' ry='0' width='44' height='8' />
+        <rect x='12' y='9' rx='0' ry='0' width='24' height='24' />
+        <rect x='116' y='11' rx='0' ry='0' width='24' height='24' />
+        <rect x='12' y='118' rx='0' ry='0' width='88' height='8' />
+        <rect x='116' y='104' rx='0' ry='0' width='44' height='8' />
+        <rect x='116' y='118' rx='0' ry='0' width='88' height='8' />
+        <rect x='12' y='139' rx='0' ry='0' width='44' height='8' />
+        <rect x='12' y='153' rx='0' ry='0' width='88' height='8' />
+        <rect x='116' y='139' rx='0' ry='0' width='44' height='8' />
+        <rect x='116' y='153' rx='0' ry='0' width='88' height='8' />
+    </ContentLoader>
+);
+
+PositionsCardLoader.propTypes = {
+    speed: PropTypes.number,
+};
+
+export { PositionsCardLoader };
diff --git a/packages/reports/src/App/Components/Elements/ContentLoader/reports-table-row.jsx b/packages/reports/src/App/Components/Elements/ContentLoader/reports-table-row.jsx
new file mode 100644
index 000000000000..328ea93c733f
--- /dev/null
+++ b/packages/reports/src/App/Components/Elements/ContentLoader/reports-table-row.jsx
@@ -0,0 +1,28 @@
+import ContentLoader from 'react-content-loader';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ReportsTableRowLoader = ({ speed }) => (
+    <ContentLoader
+        height={64}
+        width={992}
+        speed={speed}
+        primaryColor={'var(--general-hover)'}
+        secondaryColor={'var(--general-active)'}
+    >
+        <rect x='16' y='16' rx='4' ry='4' width='32' height='32' />
+        <rect x='52' y='16' rx='4' ry='4' width='32' height='32' />
+        <rect x='132' y='28' rx='4' ry='4' width='101' height='8' />
+        <rect x='273' y='28' rx='4' ry='4' width='120' height='8' />
+        <rect x='460' y='28' rx='4' ry='4' width='46' height='8' />
+        <rect x='593' y='28' rx='4' ry='4' width='46' height='8' />
+        <rect x='726' y='28' rx='4' ry='4' width='64' height='8' />
+        <rect x='906' y='28' rx='4' ry='4' width='64' height='8' />
+    </ContentLoader>
+);
+
+ReportsTableRowLoader.propTypes = {
+    speed: PropTypes.number,
+};
+
+export { ReportsTableRowLoader };
diff --git a/packages/reports/src/App/Components/Elements/ContentLoader/trade-params.jsx b/packages/reports/src/App/Components/Elements/ContentLoader/trade-params.jsx
new file mode 100644
index 000000000000..5b1588d8f0ca
--- /dev/null
+++ b/packages/reports/src/App/Components/Elements/ContentLoader/trade-params.jsx
@@ -0,0 +1,44 @@
+import ContentLoader from 'react-content-loader';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DesktopWrapper, MobileWrapper } from '@deriv/components';
+
+const TradeParamsLoader = ({ speed }) => (
+    <>
+        <MobileWrapper>
+            <ContentLoader
+                height={214}
+                width={344}
+                speed={speed}
+                primaryColor={'var(--general-section-1)'}
+                secondaryColor={'var(--general-hover)'}
+            >
+                <rect x='148' y='24' rx='3' ry='3' width='40' height='4' />
+                <rect x='8' y='40' rx='4' ry='4' width='328' height='40' />
+                <rect x='8' y='88' rx='4' ry='4' width='328' height='40' />
+                <rect x='8' y='136' rx='4' ry='4' width='160' height='70' />
+                <rect x='176' y='136' rx='4' ry='4' width='160' height='70' />
+            </ContentLoader>
+        </MobileWrapper>
+        <DesktopWrapper>
+            <ContentLoader
+                height={548}
+                width={240}
+                speed={speed}
+                primaryColor={'var(--general-section-1)'}
+                secondaryColor={'var(--general-hover)'}
+            >
+                <rect x='0' y='0' rx='4' ry='4' width='240' height='76' />
+                <rect x='0' y='84' rx='4' ry='4' width='240' height='132' />
+                <rect x='0' y='224' rx='4' ry='4' width='240' height='120' />
+                <rect x='0' y='352' rx='4' ry='4' width='240' height='194' />
+            </ContentLoader>
+        </DesktopWrapper>
+    </>
+);
+
+TradeParamsLoader.propTypes = {
+    speed: PropTypes.number,
+};
+
+export { TradeParamsLoader };
diff --git a/packages/reports/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/index.js b/packages/reports/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/index.js
new file mode 100644
index 000000000000..0097ff7902b7
--- /dev/null
+++ b/packages/reports/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/index.js
@@ -0,0 +1 @@
+export default from './positions-drawer-card.jsx';
diff --git a/packages/reports/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx b/packages/reports/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx
new file mode 100644
index 000000000000..9b454cf9e45e
--- /dev/null
+++ b/packages/reports/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx
@@ -0,0 +1,230 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { ContractCard } from '@deriv/components';
+import { getContractPath, isCryptoContract, isMultiplierContract } from '@deriv/shared';
+import { getCardLabels, getContractTypeDisplay } from '_common/contract';
+import { connect } from 'Stores/connect';
+import { connectWithContractUpdate } from 'Stores/Modules/Contract/Helpers/multiplier';
+
+import { getEndTime } from 'Stores/Modules/Contract/Helpers/logic';
+
+const PositionsDrawerCard = ({
+    addToast,
+    className,
+    display_name,
+    contract_info,
+    contract_update,
+    currency,
+    current_focus,
+    getContractById,
+    is_mobile,
+    is_sell_requested,
+    is_unsupported,
+    is_link_disabled,
+    profit_loss,
+    onClickCancel,
+    onClickSell,
+    onClickRemove,
+    onFooterEntered,
+    onMouseEnter,
+    onMouseLeave,
+    removeToast,
+    result,
+    setCurrentFocus,
+    server_time,
+    should_show_transition,
+    should_show_cancellation_warning,
+    status,
+    toggleCancellationWarning,
+    toggleUnsupportedContractModal,
+}) => {
+    const is_multiplier = isMultiplierContract(contract_info.contract_type);
+    const is_crypto = isCryptoContract(contract_info.underlying);
+    const has_progress_slider = !is_multiplier || (is_crypto && is_multiplier);
+    const has_ended = !!getEndTime(contract_info);
+
+    const loader_el = (
+        <div className='dc-contract-card__content-loader'>
+            <ContractCard.Loader speed={2} />
+        </div>
+    );
+
+    const card_header = (
+        <ContractCard.Header
+            contract_info={contract_info}
+            display_name={display_name}
+            getCardLabels={getCardLabels}
+            getContractTypeDisplay={getContractTypeDisplay}
+            has_progress_slider={!is_mobile && has_progress_slider}
+            is_mobile={is_mobile}
+            is_positions={true}
+            is_sell_requested={is_sell_requested}
+            onClickSell={onClickSell}
+            server_time={server_time}
+        />
+    );
+
+    const card_body = (
+        <ContractCard.Body
+            addToast={addToast}
+            connectWithContractUpdate={connectWithContractUpdate}
+            contract_info={contract_info}
+            contract_update={contract_update}
+            currency={currency}
+            current_focus={current_focus}
+            getCardLabels={getCardLabels}
+            getContractById={getContractById}
+            onMouseLeave={() => {
+                if (typeof onMouseLeave === 'function') onMouseLeave();
+            }}
+            is_mobile={is_mobile}
+            is_multiplier={is_multiplier}
+            is_sold={has_ended}
+            has_progress_slider={is_mobile && has_progress_slider}
+            removeToast={removeToast}
+            server_time={server_time}
+            setCurrentFocus={setCurrentFocus}
+            should_show_cancellation_warning={should_show_cancellation_warning}
+            status={status}
+            toggleCancellationWarning={toggleCancellationWarning}
+        />
+    );
+
+    const card_footer = (
+        <ContractCard.Footer
+            contract_info={contract_info}
+            getCardLabels={getCardLabels}
+            is_multiplier={is_multiplier}
+            is_positions={true}
+            is_sell_requested={is_sell_requested}
+            onClickCancel={onClickCancel}
+            onClickSell={onClickSell}
+            onFooterEntered={onFooterEntered}
+            server_time={server_time}
+            should_show_transition={should_show_transition}
+        />
+    );
+
+    const contract_el = (
+        <React.Fragment>
+            {card_header}
+            {card_body}
+        </React.Fragment>
+    );
+
+    const supported_contract_card = (
+        <div
+            className={classNames('dc-contract-card', {
+                'dc-contract-card--green': !is_multiplier && profit_loss > 0 && !result,
+                'dc-contract-card--red': !is_multiplier && profit_loss < 0 && !result,
+            })}
+            onClick={() => toggleUnsupportedContractModal(true)}
+        >
+            {contract_info.underlying ? contract_el : loader_el}
+        </div>
+    );
+
+    const unsupported_contract_card = is_link_disabled ? (
+        <div
+            className={classNames('dc-contract-card', {
+                'dc-contract-card--green': !is_multiplier && profit_loss > 0 && !result,
+                'dc-contract-card--red': !is_multiplier && profit_loss < 0 && !result,
+            })}
+        >
+            {contract_info.underlying ? contract_el : loader_el}
+        </div>
+    ) : (
+        <NavLink
+            className={classNames('dc-contract-card', {
+                'dc-contract-card--green': !is_multiplier && profit_loss > 0 && !result,
+                'dc-contract-card--red': !is_multiplier && profit_loss < 0 && !result,
+            })}
+            to={{
+                pathname: `/contract/${contract_info.contract_id}`,
+            }}
+        >
+            {contract_info.underlying ? contract_el : loader_el}
+        </NavLink>
+    );
+
+    return (
+        <ContractCard
+            contract_info={contract_info}
+            getCardLabels={getCardLabels}
+            getContractPath={getContractPath}
+            is_multiplier={is_multiplier}
+            is_positions={true}
+            is_unsupported={is_unsupported}
+            onClickRemove={onClickRemove}
+            profit_loss={profit_loss}
+            result={result}
+            should_show_result_overlay={true}
+            toggleUnsupportedContractModal={toggleUnsupportedContractModal}
+        >
+            <div
+                id={`dc_contract_card_${contract_info.contract_id}`}
+                className={className}
+                onMouseEnter={() => {
+                    if (typeof onMouseEnter === 'function') onMouseEnter();
+                }}
+                onMouseLeave={() => {
+                    if (typeof onMouseLeave === 'function') onMouseLeave();
+                }}
+                onClick={() => {
+                    if (typeof onMouseLeave === 'function') onMouseLeave();
+                }}
+            >
+                {is_unsupported ? supported_contract_card : unsupported_contract_card}
+                {card_footer}
+            </div>
+        </ContractCard>
+    );
+};
+
+PositionsDrawerCard.propTypes = {
+    addToast: PropTypes.func,
+    className: PropTypes.string,
+    contract_info: PropTypes.object,
+    currency: PropTypes.string,
+    current_focus: PropTypes.string,
+    current_tick: PropTypes.number,
+    duration: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    duration_unit: PropTypes.string,
+    exit_spot: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    id: PropTypes.number,
+    indicative: PropTypes.number,
+    is_loading: PropTypes.bool,
+    is_mobile: PropTypes.bool,
+    is_sell_requested: PropTypes.bool,
+    is_unsupported: PropTypes.bool,
+    is_valid_to_sell: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
+    onClickRemove: PropTypes.func,
+    onClickSell: PropTypes.func,
+    onClickCancel: PropTypes.func,
+    profit_loss: PropTypes.number,
+    result: PropTypes.string,
+    sell_time: PropTypes.number,
+    setCurrentFocus: PropTypes.func,
+    status: PropTypes.string,
+    toggleUnsupportedContractModal: PropTypes.func,
+    type: PropTypes.string,
+};
+
+export default connect(({ modules, ui, client, common }) => ({
+    currency: client.currency,
+    server_time: common.server_time,
+    addToast: ui.addToast,
+    current_focus: ui.current_focus,
+    onClickCancel: modules.portfolio.onClickCancel,
+    onClickSell: modules.portfolio.onClickSell,
+    onClickRemove: modules.portfolio.removePositionById,
+    getContractById: modules.contract_trade.getContractById,
+    is_mobile: ui.is_mobile,
+    removeToast: ui.removeToast,
+    setCurrentFocus: ui.setCurrentFocus,
+    should_show_cancellation_warning: ui.should_show_cancellation_warning,
+    toggleCancellationWarning: ui.toggleCancellationWarning,
+    toggleUnsupportedContractModal: ui.toggleUnsupportedContractModal,
+}))(PositionsDrawerCard);
diff --git a/packages/reports/src/App/Components/Elements/PositionsDrawer/__tests__/result-mobile.spec.js b/packages/reports/src/App/Components/Elements/PositionsDrawer/__tests__/result-mobile.spec.js
new file mode 100644
index 000000000000..a37c521b4405
--- /dev/null
+++ b/packages/reports/src/App/Components/Elements/PositionsDrawer/__tests__/result-mobile.spec.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ResultMobile from '../result-mobile';
+
+describe('ResultMobile', () => {
+    it('should ResultMobile be in the DOM', () => {
+        const wrapper = render(<ResultMobile is_visible={true} />);
+        expect(wrapper.getByTestId('result_mobile')).toBeInTheDocument();
+    });
+
+    it('should ResultMobile render LOST if result is won ', () => {
+        const wrapper = render(<ResultMobile is_visible={true} result='won' />);
+        expect(wrapper.getByText('Won')).toBeInTheDocument(true);
+    });
+
+    it('should ResultMobile render LOST if result is not won ', () => {
+        const wrapper = render(<ResultMobile is_visible={true} result='lost' />);
+        expect(wrapper.getByText('Lost')).toBeInTheDocument(true);
+    });
+});
diff --git a/packages/reports/src/App/Components/Elements/PositionsDrawer/helpers/__tests__/positions-helper.js b/packages/reports/src/App/Components/Elements/PositionsDrawer/helpers/__tests__/positions-helper.js
new file mode 100644
index 000000000000..a05ee3e3f125
--- /dev/null
+++ b/packages/reports/src/App/Components/Elements/PositionsDrawer/helpers/__tests__/positions-helper.js
@@ -0,0 +1,28 @@
+import { expect } from 'chai';
+import * as PositionsHelper from '../positions-helper';
+
+describe('positions-helper', () => {
+    describe('addCommaToNumber', () => {
+        it('should work as expected with number steps of thousands leading to a comma separated string', () => {
+            const number = 1224500.3153;
+            expect(PositionsHelper.addCommaToNumber(number)).to.eql('1,224,500.3153');
+        });
+    });
+    describe('getBarrierLabel', () => {
+        it('should return Target label if contract has a digit contract type', () => {
+            const contract_info = {
+                contract_type: 'DIGITDIFF',
+            };
+            expect(PositionsHelper.getBarrierLabel(contract_info)).to.eql('Target');
+        });
+    });
+    describe('getBarrierValue', () => {
+        it('should return correct target value according to digit type mapping if contract type is digit', () => {
+            const contract_info = {
+                contract_type: 'DIGITDIFF',
+                barrier: '1',
+            };
+            expect(PositionsHelper.getBarrierValue(contract_info)).to.eql('Not 1');
+        });
+    });
+});
diff --git a/packages/reports/src/App/Components/Elements/PositionsDrawer/helpers/index.js b/packages/reports/src/App/Components/Elements/PositionsDrawer/helpers/index.js
new file mode 100644
index 000000000000..9233600ea4f4
--- /dev/null
+++ b/packages/reports/src/App/Components/Elements/PositionsDrawer/helpers/index.js
@@ -0,0 +1 @@
+export * from './positions-helper';
diff --git a/packages/reports/src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.js b/packages/reports/src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.js
new file mode 100644
index 000000000000..96803078b143
--- /dev/null
+++ b/packages/reports/src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.js
@@ -0,0 +1,49 @@
+import { localize } from '@deriv/translations';
+import { isHighLow } from '@deriv/shared';
+import { getContractTypesConfig } from 'Stores/Modules/Trading/Constants/contract';
+import { isCallPut } from 'Stores/Modules/Contract/Helpers/contract-type';
+
+export const addCommaToNumber = (num, decimal_places) => {
+    if (!num || isNaN(num)) {
+        return num;
+    }
+    const n = String(decimal_places ? (+num).toFixed(decimal_places) : num);
+    const p = n.indexOf('.');
+    return n.replace(/\d(?=(?:\d{3})+(?:\.|$))/g, (m, i) => (p <= 0 || i < p ? `${m},` : m));
+};
+
+export const getBarrierLabel = contract_info => {
+    if (isDigitType(contract_info.contract_type)) {
+        return localize('Target');
+    }
+    return localize('Barrier');
+};
+
+export const getBarrierValue = contract_info => {
+    if (isDigitType(contract_info.contract_type)) {
+        return digitTypeMap(contract_info)[contract_info.contract_type];
+    }
+    return addCommaToNumber(contract_info.barrier);
+};
+
+export const isDigitType = contract_type => /digit/.test(contract_type.toLowerCase());
+
+const digitTypeMap = contract_info => ({
+    DIGITDIFF: localize('Not {{barrier}}', { barrier: contract_info.barrier }),
+    DIGITEVEN: localize('Even'),
+    DIGITMATCH: localize('Equals {{barrier}}', { barrier: contract_info.barrier }),
+    DIGITODD: localize('Odd'),
+    DIGITOVER: localize('Over {{barrier}}', { barrier: contract_info.barrier }),
+    DIGITUNDER: localize('Under {{barrier}}', { barrier: contract_info.barrier }),
+});
+
+export const filterByContractType = ({ contract_type, shortcode }, trade_contract_type) => {
+    const is_call_put = isCallPut(trade_contract_type);
+    const is_high_low = isHighLow({ shortcode });
+    const trade_types = is_call_put
+        ? ['CALL', 'CALLE', 'PUT', 'PUTE']
+        : getContractTypesConfig()[trade_contract_type]?.trade_types;
+    const match = trade_types?.includes(contract_type);
+    if (trade_contract_type === 'high_low') return is_high_low;
+    return match && !is_high_low;
+};
diff --git a/packages/reports/src/App/Components/Elements/PositionsDrawer/index.js b/packages/reports/src/App/Components/Elements/PositionsDrawer/index.js
new file mode 100644
index 000000000000..5107a3e8c1c5
--- /dev/null
+++ b/packages/reports/src/App/Components/Elements/PositionsDrawer/index.js
@@ -0,0 +1 @@
+export default from './positions-drawer.jsx';
diff --git a/packages/reports/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx b/packages/reports/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
new file mode 100644
index 000000000000..b23586f187a2
--- /dev/null
+++ b/packages/reports/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
@@ -0,0 +1,159 @@
+import classNames from 'classnames';
+import { PropTypes as MobxPropTypes } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { CSSTransition } from 'react-transition-group';
+import { Icon, DataList, Text } from '@deriv/components';
+import { routes, useNewRowTransition } from '@deriv/shared';
+import { localize } from '@deriv/translations';
+import EmptyPortfolioMessage from 'Components/empty-portfolio-message.jsx';
+import { connect } from 'Stores/connect';
+import PositionsDrawerCard from './PositionsDrawerCard';
+import { filterByContractType } from './helpers';
+
+const PositionsDrawerCardItem = ({ row: portfolio_position, measure, onHoverPosition, is_new_row }) => {
+    const { in_prop } = useNewRowTransition(is_new_row);
+
+    React.useEffect(() => {
+        measure();
+    }, [portfolio_position.contract_info.is_sold, measure]);
+
+    return (
+        <CSSTransition
+            in={in_prop}
+            timeout={150}
+            classNames={{
+                appear: 'dc-contract-card__wrapper--enter',
+                enter: 'dc-contract-card__wrapper--enter',
+                enterDone: 'dc-contract-card__wrapper--enter-done',
+                exit: 'dc-contract-card__wrapper--exit',
+            }}
+            onEntered={measure}
+            unmountOnExit
+        >
+            <div className='dc-contract-card__wrapper'>
+                <PositionsDrawerCard
+                    {...portfolio_position}
+                    onMouseEnter={() => {
+                        onHoverPosition(true, portfolio_position);
+                    }}
+                    onMouseLeave={() => {
+                        onHoverPosition(false, portfolio_position);
+                    }}
+                    onFooterEntered={measure}
+                    should_show_transition={is_new_row}
+                />
+            </div>
+        </CSSTransition>
+    );
+};
+
+const PositionsDrawer = ({
+    all_positions,
+    error,
+    is_positions_drawer_on,
+    onHoverPosition,
+    symbol,
+    toggleDrawer,
+    trade_contract_type,
+    onMount,
+}) => {
+    const drawer_ref = React.useRef(null);
+    const list_ref = React.useRef(null);
+    const scrollbar_ref = React.useRef(null);
+
+    React.useEffect(() => {
+        onMount();
+    }, [onMount]);
+
+    React.useEffect(() => {
+        list_ref?.current?.scrollTo(0);
+        scrollbar_ref?.current?.scrollToTop();
+    }, [symbol, trade_contract_type]);
+
+    const positions = all_positions.filter(
+        p =>
+            p.contract_info &&
+            symbol === p.contract_info.underlying &&
+            filterByContractType(p.contract_info, trade_contract_type)
+    );
+
+    const body_content = (
+        <DataList
+            data_source={positions}
+            rowRenderer={args => <PositionsDrawerCardItem onHoverPosition={onHoverPosition} {...args} />}
+            keyMapper={row => row.id}
+            row_gap={8}
+        />
+    );
+
+    return (
+        <React.Fragment>
+            <div
+                className={classNames('positions-drawer__bg', {
+                    'positions-drawer__bg--open': is_positions_drawer_on,
+                })}
+            />
+            <div
+                id='dt_positions_drawer'
+                className={classNames('positions-drawer', {
+                    'positions-drawer--open': is_positions_drawer_on,
+                })}
+            >
+                <div className='positions-drawer__header'>
+                    <Text color='prominent' weight='bold' size='xs'>
+                        {localize('Recent positions')}
+                    </Text>
+                    <div
+                        id='dt_positions_drawer_close_icon'
+                        className='positions-drawer__icon-close'
+                        onClick={toggleDrawer}
+                    >
+                        <Icon icon='IcMinusBold' />
+                    </div>
+                </div>
+                <div className='positions-drawer__body' ref={drawer_ref}>
+                    {positions.length === 0 || error ? <EmptyPortfolioMessage error={error} /> : body_content}
+                </div>
+                <div className='positions-drawer__footer'>
+                    <NavLink
+                        id='dt_positions_drawer_report_button'
+                        className='dc-btn dc-btn--secondary dc-btn__large'
+                        to={routes.reports}
+                    >
+                        <Text size='xs' weight='bold'>
+                            {localize('Go to Reports')}
+                        </Text>
+                    </NavLink>
+                </div>
+            </div>
+        </React.Fragment>
+    );
+    // }
+};
+
+PositionsDrawer.propTypes = {
+    all_positions: MobxPropTypes.arrayOrObservableArray,
+    children: PropTypes.any,
+    error: PropTypes.string,
+    is_mobile: PropTypes.bool,
+    is_positions_drawer_on: PropTypes.bool,
+    onChangeContractUpdate: PropTypes.func,
+    onClickContractUpdate: PropTypes.func,
+    onMount: PropTypes.func,
+    symbol: PropTypes.string,
+    toggleDrawer: PropTypes.func,
+};
+
+export default connect(({ modules, ui }) => ({
+    all_positions: modules.portfolio.all_positions,
+    error: modules.portfolio.error,
+    onHoverPosition: modules.portfolio.onHoverPosition,
+    onMount: modules.portfolio.onMount,
+    symbol: modules.trade.symbol,
+    trade_contract_type: modules.trade.contract_type,
+    is_mobile: ui.is_mobile,
+    is_positions_drawer_on: ui.is_positions_drawer_on,
+    toggleDrawer: ui.togglePositionsDrawer,
+}))(PositionsDrawer);
diff --git a/packages/reports/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx b/packages/reports/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx
new file mode 100644
index 000000000000..7ff6c183e58c
--- /dev/null
+++ b/packages/reports/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx
@@ -0,0 +1,341 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { ContractCard, CurrencyBadge, Icon, Money, ProgressSliderMobile, Text } from '@deriv/components';
+import {
+    getContractPath,
+    isCryptoContract,
+    isMultiplierContract,
+    isHighLow,
+    isCryptocurrency,
+    hasContractEntered,
+    isOpen,
+} from '@deriv/shared';
+import { localize } from '@deriv/translations';
+import { BinaryLink } from 'App/Components/Routes';
+import { connect } from 'Stores/connect';
+import { getSymbolDisplayName } from 'Stores/Modules/Trading/Helpers/active-symbols';
+
+import { connectWithContractUpdate } from 'Stores/Modules/Contract/Helpers/multiplier';
+import { getEndTime } from 'Stores/Modules/Contract/Helpers/logic';
+import { PositionsCardLoader } from '../ContentLoader';
+
+import { getContractTypeDisplay, getCardLabels } from '_common/contract';
+import { getMarketInformation } from 'Helpers/market-underlying';
+import ResultMobile from './result-mobile.jsx';
+
+const PositionsModalCard = ({
+    active_symbols,
+    addToast,
+    className,
+    contract_info,
+    contract_update,
+    currency,
+    current_focus,
+    current_tick,
+    getContractById,
+    id,
+    indicative,
+    is_loading,
+    is_mobile,
+    is_sell_requested,
+    is_unsupported,
+    onClickSell,
+    profit_loss,
+    onClickCancel,
+    removeToast,
+    result,
+    sell_price,
+    server_time,
+    setCurrentFocus,
+    should_show_cancellation_warning,
+    status,
+    toggleCancellationWarning,
+    togglePositions,
+    toggleUnsupportedContractModal,
+    type,
+}) => {
+    const loader_el = (
+        <div className='positions-modal-card__content-loader'>
+            <PositionsCardLoader speed={2} />
+        </div>
+    );
+    const is_multiplier = isMultiplierContract(contract_info.contract_type);
+    const is_crypto = isCryptoContract(contract_info.underlying);
+    const has_progress_slider = !is_multiplier || (is_crypto && is_multiplier);
+    const has_ended = !!getEndTime(contract_info);
+    const fallback_result = profit_loss >= 0 ? 'won' : 'lost';
+
+    const should_show_sell = hasContractEntered(contract_info) && isOpen(contract_info);
+    const display_name = getSymbolDisplayName(active_symbols, getMarketInformation(contract_info.shortcode).underlying);
+
+    const contract_options_el = (
+        <React.Fragment>
+            <div className={classNames('positions-modal-card__grid', 'positions-modal-card__grid-header')}>
+                <div className='positions-modal-card__underlying-name'>
+                    <Icon
+                        icon={contract_info.underlying ? `IcUnderlying${contract_info.underlying}` : 'IcUnknown'}
+                        size={34}
+                    />
+                    <Text size='xxs' className='positions-modal-card__symbol' weight='bold'>
+                        {contract_info.display_name}
+                    </Text>
+                </div>
+                <div className='positions-modal-card__type'>
+                    <ContractCard.ContractTypeCell
+                        getContractTypeDisplay={getContractTypeDisplay}
+                        is_high_low={isHighLow({ shortcode: contract_info.shortcode })}
+                        multiplier={contract_info.multiplier}
+                        type={type}
+                    />
+                </div>
+                <CSSTransition
+                    in={should_show_sell}
+                    timeout={250}
+                    classNames={{
+                        enter: 'positions-modal-card__sell-button--enter',
+                        enterDone: 'positions-modal-card__sell-button--enter-done',
+                        exit: 'positions-modal-card__sell-button--exit',
+                    }}
+                    unmountOnExit
+                >
+                    <div className='positions-modal-card__sell-button'>
+                        <ContractCard.Sell
+                            contract_info={contract_info}
+                            is_sell_requested={is_sell_requested}
+                            getCardLabels={getCardLabels}
+                            onClickSell={onClickSell}
+                        />
+                    </div>
+                </CSSTransition>
+            </div>
+            <CurrencyBadge currency={contract_info?.currency ?? ''} />
+            <div className={classNames('positions-modal-card__grid', 'positions-modal-card__grid-body')}>
+                <div className={classNames('positions-modal-card__grid-profit-payout')}>
+                    <div
+                        className={classNames(
+                            'positions-modal-card__profit-loss',
+                            'positions-modal-card__profit-loss-label'
+                        )}
+                    >
+                        {result ? localize('Profit/Loss:') : localize('Potential profit/loss:')}
+                    </div>
+                    <div
+                        className={classNames(
+                            'positions-modal-card__indicative',
+                            'positions-modal-card__indicative-label'
+                        )}
+                    >
+                        {!result ? localize('Indicative price:') : localize('Payout:')}
+                    </div>
+                    <div
+                        className={classNames('positions-modal-card__profit-loss', {
+                            'positions-modal-card__profit-loss--is-crypto': isCryptocurrency(currency),
+                            'positions-modal-card__profit-loss--negative': profit_loss < 0,
+                            'positions-modal-card__profit-loss--positive': profit_loss > 0,
+                        })}
+                    >
+                        <Money amount={Math.abs(profit_loss)} currency={currency} />
+                        <div
+                            className={classNames('positions-modal-card__indicative--movement', {
+                                'positions-modal-card__indicative--movement-complete': !!result,
+                            })}
+                        >
+                            {status === 'profit' && <Icon icon='IcProfit' />}
+                            {status === 'loss' && <Icon icon='IcLoss' />}
+                        </div>
+                    </div>
+                    <div className='positions-modal-card__indicative'>
+                        <Money amount={sell_price || indicative} currency={currency} />
+                        <div
+                            className={classNames('positions-modal-card__indicative--movement', {
+                                'positions-modal-card__indicative--movement-complete': !!result,
+                            })}
+                        >
+                            {status === 'profit' && <Icon icon='IcProfit' />}
+                            {status === 'loss' && <Icon icon='IcLoss' />}
+                        </div>
+                    </div>
+                </div>
+                <div className={classNames('positions-modal-card__grid-price-payout')}>
+                    <div className='positions-modal-card__purchase-price'>
+                        <Text size='xxxs' className='positions-modal-card__purchase-label'>
+                            {localize('Purchase price:')}
+                        </Text>
+                        <Text weight='bold' size='xxs' className='positions-modal-card__purchase-value'>
+                            <Money amount={contract_info.buy_price} currency={currency} />
+                        </Text>
+                    </div>
+                    <div className='positions-modal-card__payout-price'>
+                        <Text size='xxxs' className='positions-modal-card__payout-label'>
+                            {localize('Potential payout:')}
+                        </Text>
+                        <Text weight='bold' size='xxs' className='positions-modal-card__payout-value'>
+                            {contract_info.payout ? (
+                                <Money amount={contract_info.payout} currency={currency} />
+                            ) : (
+                                <strong>-i</strong>
+                            )}
+                        </Text>
+                    </div>
+                </div>
+
+                {result || !!contract_info.is_sold ? (
+                    <ResultMobile
+                        contract_id={id}
+                        is_visible={!!contract_info.is_sold}
+                        result={result || fallback_result}
+                    />
+                ) : (
+                    <ProgressSliderMobile
+                        className='positions-modal-card__progress'
+                        current_tick={current_tick}
+                        getCardLabels={getCardLabels}
+                        is_loading={is_loading}
+                        start_time={contract_info.date_start}
+                        expiry_time={contract_info.date_expiry}
+                        server_time={server_time}
+                        ticks_count={contract_info.tick_count}
+                    />
+                )}
+            </div>
+        </React.Fragment>
+    );
+
+    const card_multiplier_header = (
+        <ContractCard.Header
+            contract_info={contract_info}
+            display_name={display_name}
+            getCardLabels={getCardLabels}
+            getContractTypeDisplay={getContractTypeDisplay}
+            has_progress_slider={!is_mobile && has_progress_slider}
+            is_mobile={is_mobile}
+            is_sell_requested={is_sell_requested}
+            onClickSell={onClickSell}
+            server_time={server_time}
+        />
+    );
+
+    const card_multiplier_body = (
+        <ContractCard.Body
+            addToast={addToast}
+            connectWithContractUpdate={connectWithContractUpdate}
+            contract_info={contract_info}
+            contract_update={contract_update}
+            currency={currency}
+            current_focus={current_focus}
+            getCardLabels={getCardLabels}
+            getContractById={getContractById}
+            is_mobile={is_mobile}
+            is_multiplier={is_multiplier}
+            has_progress_slider={is_mobile && has_progress_slider && !has_ended}
+            removeToast={removeToast}
+            server_time={server_time}
+            setCurrentFocus={setCurrentFocus}
+            should_show_cancellation_warning={should_show_cancellation_warning}
+            status={status}
+            toggleCancellationWarning={toggleCancellationWarning}
+        />
+    );
+
+    const card_multiplier_footer = (
+        <ContractCard.Footer
+            contract_info={contract_info}
+            getCardLabels={getCardLabels}
+            is_multiplier={is_multiplier}
+            is_sell_requested={is_sell_requested}
+            onClickCancel={onClickCancel}
+            onClickSell={onClickSell}
+            server_time={server_time}
+            status={status}
+        />
+    );
+
+    const contract_multiplier_el = (
+        <React.Fragment>
+            <ContractCard
+                contract_info={contract_info}
+                getCardLabels={getCardLabels}
+                is_multiplier={is_multiplier}
+                profit_loss={profit_loss}
+                should_show_result_overlay={false}
+            >
+                {card_multiplier_header}
+                {card_multiplier_body}
+                {card_multiplier_footer}
+            </ContractCard>
+        </React.Fragment>
+    );
+
+    const contract_el = is_multiplier ? contract_multiplier_el : contract_options_el;
+
+    return (
+        <div id={`dt_drawer_card_${id}`} className={classNames('positions-modal-card__wrapper', className)}>
+            {is_unsupported ? (
+                <div
+                    className={classNames('positions-modal-card')}
+                    onClick={() => toggleUnsupportedContractModal(true)}
+                >
+                    {contract_info.underlying ? contract_el : loader_el}
+                </div>
+            ) : (
+                <React.Fragment>
+                    <BinaryLink
+                        onClick={togglePositions}
+                        className={classNames('positions-modal-card', {
+                            'positions-modal-card--multiplier': is_multiplier,
+                        })}
+                        to={getContractPath(id)}
+                    >
+                        {contract_info.underlying ? contract_el : loader_el}
+                    </BinaryLink>
+                </React.Fragment>
+            )}
+        </div>
+    );
+};
+
+PositionsModalCard.propTypes = {
+    className: PropTypes.string,
+    contract_info: PropTypes.object,
+    currency: PropTypes.string,
+    current_focus: PropTypes.string,
+    current_tick: PropTypes.number,
+    duration: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    duration_unit: PropTypes.string,
+    exit_spot: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    id: PropTypes.number,
+    indicative: PropTypes.number,
+    is_loading: PropTypes.bool,
+    is_mobile: PropTypes.bool,
+    is_sell_requested: PropTypes.bool,
+    is_unsupported: PropTypes.bool,
+    is_valid_to_sell: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
+    onClickRemove: PropTypes.func,
+    onClickSell: PropTypes.func,
+    onClickCancel: PropTypes.func,
+    profit_loss: PropTypes.number,
+    result: PropTypes.string,
+    sell_time: PropTypes.number,
+    server_time: PropTypes.object,
+    setCurrentFocus: PropTypes.func,
+    status: PropTypes.string,
+    togglePositions: PropTypes.func,
+    toggleUnsupportedContractModal: PropTypes.func,
+    type: PropTypes.string,
+};
+
+export default connect(({ common, ui, modules }) => ({
+    active_symbols: modules.trade.active_symbols,
+    addToast: ui.addToast,
+    current_focus: ui.current_focus,
+    getContractById: modules.contract_trade.getContractById,
+    is_mobile: ui.is_mobile,
+    removeToast: ui.removeToast,
+    server_time: common.server_time,
+    setCurrentFocus: ui.setCurrentFocus,
+    should_show_cancellation_warning: ui.should_show_cancellation_warning,
+    toggleCancellationWarning: ui.toggleCancellationWarning,
+    updateLimitOrder: modules.contract_trade.updateLimitOrder,
+}))(PositionsModalCard);
diff --git a/packages/reports/src/App/Components/Elements/PositionsDrawer/result-mobile.jsx b/packages/reports/src/App/Components/Elements/PositionsDrawer/result-mobile.jsx
new file mode 100644
index 000000000000..a1578df1b511
--- /dev/null
+++ b/packages/reports/src/App/Components/Elements/PositionsDrawer/result-mobile.jsx
@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { Icon } from '@deriv/components';
+import { localize } from '@deriv/translations';
+
+const ResultMobile = ({ is_visible, result }) => {
+    const is_contract_won = result === 'won';
+    return (
+        <React.Fragment>
+            <CSSTransition
+                in={is_visible}
+                timeout={250}
+                classNames={{
+                    enter: 'positions-modal-card__result--enter',
+                    enterDone: 'positions-modal-card__result--enter-done',
+                    exit: 'positions-modal-card__result--exit',
+                }}
+                unmountOnExit
+            >
+                <div className='positions-modal-card__caption-wrapper' data-testid='result_mobile'>
+                    <span
+                        className={classNames('positions-modal-card__caption', {
+                            'positions-modal-card__caption--won': is_contract_won,
+                            'positions-modal-card__caption--lost': !is_contract_won,
+                        })}
+                    >
+                        {is_contract_won ? (
+                            <React.Fragment>
+                                {localize('Won')}
+                                <Icon icon='IcCheckmarkCircle' className='positions-modal-card__icon' color='green' />
+                            </React.Fragment>
+                        ) : (
+                            <React.Fragment>
+                                {localize('Lost')}
+                                <Icon icon='IcCrossCircle' className='positions-modal-card__icon' color='red' />
+                            </React.Fragment>
+                        )}
+                    </span>
+                </div>
+            </CSSTransition>
+        </React.Fragment>
+    );
+};
+
+ResultMobile.propTypes = {
+    is_visible: PropTypes.bool,
+    result: PropTypes.string,
+};
+
+export default ResultMobile;
diff --git a/packages/reports/src/App/Components/Form/CompositeCalendar/calendar-icon.jsx b/packages/reports/src/App/Components/Form/CompositeCalendar/calendar-icon.jsx
new file mode 100644
index 000000000000..ddae60f2e40e
--- /dev/null
+++ b/packages/reports/src/App/Components/Form/CompositeCalendar/calendar-icon.jsx
@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Icon } from '@deriv/components';
+
+const CalendarIcon = ({ onClick }) => <Icon onClick={onClick} icon='IcCalendarDatefrom' className='inline-icon' />;
+
+CalendarIcon.propTypes = {
+    onClick: PropTypes.func,
+};
+
+export default CalendarIcon;
diff --git a/packages/reports/src/App/Components/Form/CompositeCalendar/composite-calendar-mobile.jsx b/packages/reports/src/App/Components/Form/CompositeCalendar/composite-calendar-mobile.jsx
new file mode 100644
index 000000000000..c9e736552155
--- /dev/null
+++ b/packages/reports/src/App/Components/Form/CompositeCalendar/composite-calendar-mobile.jsx
@@ -0,0 +1,250 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, DatePicker, Icon, InputField, MobileDialog, Text } from '@deriv/components';
+import { localize } from '@deriv/translations';
+import { toMoment } from '@deriv/shared';
+
+export const RadioButton = ({ id, className, selected_value, value, label, onChange }) => {
+    return (
+        <label
+            htmlFor={id}
+            className={classNames('composite-calendar-modal__radio', className, {
+                'composite-calendar-modal__radio--selected': selected_value === value,
+            })}
+            onClick={() => onChange({ label, value })}
+        >
+            <input className='composite-calendar-modal__radio-input' id={id} type='radio' value={value} />
+            <span
+                className={classNames('composite-calendar-modal__radio-circle', {
+                    'composite-calendar-modal__radio-circle--selected': selected_value === value,
+                })}
+            />
+            <Text
+                as='p'
+                color='prominent'
+                size='xs'
+                line_height='unset'
+                weight={selected_value === value ? 'bold' : 'normal'}
+            >
+                {label}
+            </Text>
+        </label>
+    );
+};
+const CUSTOM_KEY = 'custom';
+
+const CompositeCalendarMobile = React.memo(
+    ({ input_date_range, current_focus, duration_list, onChange, setCurrentFocus }) => {
+        const date_range = input_date_range || duration_list.find(range => range.value === 'all_time');
+
+        const [from, setFrom] = React.useState(from && toMoment(from).format('DD MMM YYYY'));
+        const [to, setTo] = React.useState(to && toMoment(to).format('DD MMM YYYY'));
+        const [is_open, setIsOpen] = React.useState(false);
+
+        const [applied_date_range, setAppliedDateRange] = React.useState(date_range);
+        const [selected_date_range, setSelectedDateRange] = React.useState(date_range);
+
+        const selectDateRange = (_selected_date_range, is_today) => {
+            const new_from = _selected_date_range.duration;
+            onChange(
+                {
+                    from:
+                        is_today || new_from
+                            ? toMoment().startOf('day').subtract(new_from, 'day').add(1, 's').unix()
+                            : null,
+                    to: toMoment().endOf('day').unix(),
+                    is_batch: true,
+                },
+                {
+                    date_range: _selected_date_range,
+                }
+            );
+        };
+
+        const selectCustomDateRange = () => {
+            const today = toMoment().format('DD MMM YYYY');
+
+            const new_from = from || to || today;
+            const new_to = to || today;
+
+            const new_date_range = Object.assign(selected_date_range, {
+                label: `${new_from} - ${new_to}`,
+            });
+
+            onChange(
+                {
+                    from: toMoment(new_from, 'DD MMM YYYY').startOf('day').add(1, 's').unix(),
+                    to: toMoment(new_to, 'DD MMM YYYY').endOf('day').unix(),
+                    is_batch: true,
+                },
+                {
+                    date_range: new_date_range,
+                }
+            );
+        };
+
+        const applyDateRange = () => {
+            if (selected_date_range.onClick) {
+                selectDateRange(selected_date_range);
+            } else if (selected_date_range.value === CUSTOM_KEY) {
+                selectCustomDateRange();
+            }
+            setAppliedDateRange(selected_date_range);
+            setIsOpen(false);
+        };
+
+        const selectToday = () => {
+            const new_date_range = {
+                duration: 0,
+                label: localize('Today'),
+            };
+            selectDateRange(new_date_range, true);
+            setAppliedDateRange(new_date_range);
+            setSelectedDateRange(new_date_range);
+            setIsOpen(false);
+        };
+
+        const selectDate = (e, key) => {
+            setSelectedDateRange({ value: CUSTOM_KEY });
+
+            const value = e.target?.value ? toMoment(e.target.value).format('DD MMM YYYY') : '';
+
+            if (key === 'from') {
+                setFrom(value);
+            }
+
+            if (key === 'to') {
+                setTo(value);
+            }
+        };
+
+        const getMobileFooter = () => {
+            return (
+                <div className='composite-calendar-modal__actions'>
+                    <Button
+                        className='composite-calendar-modal__actions__cancel'
+                        text={localize('Cancel')}
+                        onClick={() => setIsOpen(false)}
+                        has_effect
+                        secondary
+                        large
+                    />
+                    <Button
+                        className='composite-calendar-modal__actions__ok'
+                        text={localize('OK')}
+                        onClick={applyDateRange}
+                        has_effect
+                        primary
+                        large
+                    />
+                </div>
+            );
+        };
+
+        const onDateRangeChange = _date_range => {
+            setSelectedDateRange(
+                duration_list.find(range => _date_range && range.value === _date_range.value) || _date_range
+            );
+        };
+
+        const openDialog = () => {
+            setSelectedDateRange(applied_date_range);
+            setIsOpen(true);
+        };
+
+        const today = toMoment().format('YYYY-MM-DD');
+        const max_date = to ? toMoment(to, 'DD MMM YYYY').format('YYYY-MM-DD') : today;
+        const min_date = from && toMoment(from, 'DD MMM YYYY').format('YYYY-MM-DD');
+
+        return (
+            <React.Fragment>
+                <div className='composite-calendar__input-fields composite-calendar__input-fields--fill'>
+                    <InputField
+                        id='dt_calendar_input'
+                        current_focus={current_focus}
+                        is_read_only={true}
+                        icon={() => <Icon icon='IcCalendarDatefrom' className='inline-icon' />}
+                        onClick={openDialog}
+                        setCurrentFocus={setCurrentFocus}
+                        value={applied_date_range.label}
+                    />
+                </div>
+                <MobileDialog
+                    portal_element_id='modal_root'
+                    title={localize('Please select duration')}
+                    visible={is_open}
+                    has_content_scroll
+                    onClose={() => setIsOpen(false)}
+                    content_height_offset='94px'
+                    footer={getMobileFooter()}
+                >
+                    <div className='composite-calendar-modal'>
+                        <div className='composite-calendar-modal__radio-group'>
+                            {duration_list.map(duration => (
+                                <RadioButton
+                                    id={`composite-calendar-modal__radio__${duration.value}`}
+                                    key={duration.value}
+                                    value={duration.value}
+                                    label={duration.label}
+                                    selected_value={selected_date_range.value}
+                                    onChange={onDateRangeChange}
+                                />
+                            ))}
+                        </div>
+                        <div className='composite-calendar-modal__custom'>
+                            <RadioButton
+                                id={'composite-calendar-modal__custom-radio'}
+                                className='composite-calendar-modal__custom-radio'
+                                value={CUSTOM_KEY}
+                                label={localize('Custom')}
+                                selected_value={selected_date_range.value}
+                                onChange={onDateRangeChange}
+                            />
+
+                            <div className='composite-calendar-modal__custom-date-range'>
+                                <DatePicker
+                                    className='composite-calendar-modal__custom-date-range-start-date'
+                                    is_nativepicker={true}
+                                    placeholder={localize('Start date')}
+                                    value={from}
+                                    max_date={max_date}
+                                    onChange={e => selectDate(e, 'from')}
+                                />
+                                <DatePicker
+                                    className='composite-calendar-modal__custom-date-range-end-date'
+                                    is_nativepicker={true}
+                                    placeholder={localize('End date')}
+                                    value={to}
+                                    max_date={today}
+                                    min_date={min_date}
+                                    onChange={e => selectDate(e, 'to')}
+                                />
+                            </div>
+                        </div>
+                        <Button
+                            className='composite-calendar-modal__actions-today'
+                            text={localize('Back to today')}
+                            onClick={selectToday}
+                            has_effect
+                            tertiary
+                            large
+                        />
+                    </div>
+                </MobileDialog>
+            </React.Fragment>
+        );
+    }
+);
+
+CompositeCalendarMobile.displayName = 'CompositeCalendarMobile';
+
+CompositeCalendarMobile.propTypes = {
+    current_focus: PropTypes.string,
+    duration_list: PropTypes.array,
+    from: PropTypes.number,
+    onChange: PropTypes.func,
+    setCurrentFocus: PropTypes.func,
+    to: PropTypes.number,
+};
+export default CompositeCalendarMobile;
diff --git a/packages/reports/src/App/Components/Form/CompositeCalendar/composite-calendar.jsx b/packages/reports/src/App/Components/Form/CompositeCalendar/composite-calendar.jsx
new file mode 100644
index 000000000000..875fb85cfe0b
--- /dev/null
+++ b/packages/reports/src/App/Components/Form/CompositeCalendar/composite-calendar.jsx
@@ -0,0 +1,191 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Loadable from 'react-loadable';
+import { DesktopWrapper, InputField, MobileWrapper, useOnClickOutside } from '@deriv/components';
+import { localize } from '@deriv/translations';
+import { daysFromTodayTo, epochToMoment, toMoment } from '@deriv/shared';
+import { connect } from 'Stores/connect';
+import CompositeCalendarMobile from './composite-calendar-mobile.jsx';
+import SideList from './side-list.jsx';
+import CalendarIcon from './calendar-icon.jsx';
+
+const TwoMonthPicker = Loadable({
+    loader: () => import(/* webpackChunkName: "two-month-picker" */ './two-month-picker.jsx'),
+    loading: () => null,
+    render(loaded, props) {
+        const Component = loaded.default;
+        return <Component {...props} />;
+    },
+});
+
+const CompositeCalendar = props => {
+    const { current_focus, onChange, setCurrentFocus, to, from } = props;
+
+    const [show_to, setShowTo] = React.useState(false);
+    const [show_from, setShowFrom] = React.useState(false);
+    const [list] = React.useState([
+        {
+            value: 'all_time',
+            label: localize('All time'),
+            onClick: () => selectDateRange(),
+            duration: 0,
+        },
+        {
+            value: 'last_7_days',
+            label: localize('Last 7 days'),
+            onClick: () => selectDateRange(7),
+            duration: 7,
+        },
+        {
+            value: 'last_30_days',
+            label: localize('Last 30 days'),
+            onClick: () => selectDateRange(30),
+            duration: 30,
+        },
+        {
+            value: 'last_60_days',
+            label: localize('Last 60 days'),
+            onClick: () => selectDateRange(60),
+            duration: 60,
+        },
+        {
+            value: 'last_quarter',
+            label: localize('Last quarter'),
+            onClick: () => selectDateRange(90),
+            duration: 90,
+        },
+    ]);
+
+    const wrapper_ref = React.useRef();
+
+    useOnClickOutside(wrapper_ref, event => {
+        event.stopPropagation();
+        event.preventDefault();
+        hideCalendar();
+    });
+
+    const selectDateRange = new_from => {
+        hideCalendar();
+        applyBatch({
+            from: new_from ? toMoment().startOf('day').subtract(new_from, 'day').add(1, 's').unix() : null,
+            to: toMoment().endOf('day').unix(),
+            is_batch: true,
+        });
+    };
+
+    const getToDateLabel = () => {
+        const date = epochToMoment(to);
+        return daysFromTodayTo(date) === 0 ? localize('Today') : date.format('MMM, DD YYYY');
+    };
+
+    const getFromDateLabel = () => {
+        const date = epochToMoment(from);
+        return from ? date.format('MMM, DD YYYY') : '';
+    };
+
+    const hideCalendar = () => {
+        setShowFrom(false);
+        setShowTo(false);
+    };
+
+    const showCalendar = e => {
+        if (e === 'from') {
+            setShowFrom(true);
+        }
+        if (e === 'to') {
+            setShowTo(true);
+        }
+    };
+
+    const setToDate = date => {
+        updateState('to', epochToMoment(date).endOf('day').unix());
+    };
+
+    const setFromDate = date => {
+        updateState('from', date);
+        hideCalendar();
+    };
+
+    const updateState = (key, value) => {
+        apply(key, value);
+        hideCalendar();
+    };
+
+    const applyBatch = values => {
+        onChange(values);
+    };
+
+    const apply = (key, value) => {
+        applyBatch({
+            [key]: value,
+        });
+    };
+
+    const isPeriodDisabledTo = date => {
+        return date + 1 <= from || date > toMoment().endOf('day').unix();
+    };
+
+    const isPeriodDisabledFrom = date => {
+        return date - 1 >= to;
+    };
+
+    return (
+        <React.Fragment>
+            <DesktopWrapper>
+                <div id='dt_composite_calendar_inputs' className='composite-calendar__input-fields'>
+                    <InputField
+                        id='dt_calendar_input_from'
+                        current_focus={current_focus}
+                        is_read_only
+                        placeholder={localize('Date from')}
+                        icon={CalendarIcon}
+                        onClick={() => showCalendar('from')}
+                        setCurrentFocus={setCurrentFocus}
+                        value={getFromDateLabel()}
+                    />
+                    <InputField
+                        id='dt_calendar_input_to'
+                        current_focus={current_focus}
+                        is_read_only
+                        placeholder={localize('Date to')}
+                        icon={CalendarIcon}
+                        onClick={() => showCalendar('to')}
+                        setCurrentFocus={setCurrentFocus}
+                        value={getToDateLabel()}
+                    />
+                </div>
+                {show_to && (
+                    <div className='composite-calendar' ref={wrapper_ref}>
+                        <SideList from={from} to={to} items={list} />
+                        <TwoMonthPicker value={to} onChange={setToDate} isPeriodDisabled={isPeriodDisabledTo} />
+                    </div>
+                )}
+                {show_from && (
+                    <div className='composite-calendar' ref={wrapper_ref}>
+                        <SideList from={from} to={to} items={list} />
+                        <TwoMonthPicker value={from} onChange={setFromDate} isPeriodDisabled={isPeriodDisabledFrom} />
+                    </div>
+                )}
+            </DesktopWrapper>
+            <MobileWrapper>
+                <CompositeCalendarMobile duration_list={list} {...props} />
+            </MobileWrapper>
+        </React.Fragment>
+    );
+};
+
+CompositeCalendar.displayName = 'CompositeCalendar';
+
+CompositeCalendar.propTypes = {
+    current_focus: PropTypes.string,
+    from: PropTypes.number,
+    onChange: PropTypes.func,
+    setCurrentFocus: PropTypes.func,
+    to: PropTypes.number,
+};
+export default React.memo(
+    connect(({ ui }) => ({
+        current_focus: ui.current_focus,
+        setCurrentFocus: ui.setCurrentFocus,
+    }))(CompositeCalendar)
+);
diff --git a/packages/reports/src/App/Components/Form/CompositeCalendar/index.js b/packages/reports/src/App/Components/Form/CompositeCalendar/index.js
new file mode 100644
index 000000000000..d8d748d8a924
--- /dev/null
+++ b/packages/reports/src/App/Components/Form/CompositeCalendar/index.js
@@ -0,0 +1 @@
+export default from './composite-calendar.jsx';
diff --git a/packages/reports/src/App/Components/Form/CompositeCalendar/list-item.jsx b/packages/reports/src/App/Components/Form/CompositeCalendar/list-item.jsx
new file mode 100644
index 000000000000..98b3f9e551f6
--- /dev/null
+++ b/packages/reports/src/App/Components/Form/CompositeCalendar/list-item.jsx
@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import React from 'react';
+
+const ListItem = ({ onClick, is_active, label }) => (
+    <li
+        className={classNames({
+            'composite-calendar__prepopulated-list--is-active': is_active,
+        })}
+        onClick={onClick}
+    >
+        {label}
+    </li>
+);
+
+ListItem.propTypes = {
+    label: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.array]),
+    is_active: PropTypes.bool,
+    onClick: PropTypes.func,
+};
+
+export default ListItem;
diff --git a/packages/reports/src/App/Components/Form/CompositeCalendar/side-list.jsx b/packages/reports/src/App/Components/Form/CompositeCalendar/side-list.jsx
new file mode 100644
index 000000000000..69102262d646
--- /dev/null
+++ b/packages/reports/src/App/Components/Form/CompositeCalendar/side-list.jsx
@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { toMoment } from '@deriv/shared';
+import ListItem from './list-item.jsx';
+
+const isActive = (from, to, flag) => {
+    if (flag === 0) {
+        return toMoment().endOf('day').unix() === to && from === null;
+    }
+    return Math.ceil(to / 86400) - Math.ceil(from / 86400) === flag;
+};
+
+const SideList = ({ items, from, to }) => (
+    <ul className='composite-calendar__prepopulated-list'>
+        {items.map(item => {
+            const { duration, ...rest_of_props } = item;
+            const is_active = isActive(from, to, duration);
+            return <ListItem key={duration} is_active={is_active} {...rest_of_props} />;
+        })}
+    </ul>
+);
+
+SideList.propTypes = {
+    items: PropTypes.array,
+};
+
+export default SideList;
diff --git a/packages/reports/src/App/Components/Form/CompositeCalendar/two-month-picker.jsx b/packages/reports/src/App/Components/Form/CompositeCalendar/two-month-picker.jsx
new file mode 100644
index 000000000000..d671140e0529
--- /dev/null
+++ b/packages/reports/src/App/Components/Form/CompositeCalendar/two-month-picker.jsx
@@ -0,0 +1,116 @@
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import React from 'react';
+import { Calendar } from '@deriv/components';
+import { addMonths, diffInMonths, epochToMoment, subMonths, toMoment } from '@deriv/shared';
+
+const TwoMonthPicker = React.memo(({ onChange, isPeriodDisabled, value }) => {
+    const [left_pane_date, setLeftPaneDate] = React.useState(subMonths(value, 1).unix());
+    const [right_pane_date, setRightPaneDate] = React.useState(value);
+
+    const navigateFrom = e => {
+        setLeftPaneDate(e.unix());
+        setRightPaneDate(addMonths(e, 1).unix());
+    };
+
+    /**
+     * Only allow previous months to be available to navigate. Disable other periods
+     *
+     * @param date
+     * @param range
+     * @returns {boolean}
+     */
+    const validateFromArrows = (date, range) => {
+        return range === 'year' || diffInMonths(epochToMoment(left_pane_date), date) !== -1;
+    };
+
+    /**
+     * Validate values to be date_from < date_to
+     */
+    const shouldDisableDate = date => {
+        return isPeriodDisabled(date.unix());
+    };
+
+    /**
+     * Only allow next month to be available to navigate (unless next month is in the future).
+     * Disable other periods
+     *
+     * @param date
+     * @param range
+     * @returns {boolean}
+     */
+    const validateToArrows = (date, range) => {
+        if (range === 'year') return true; // disallow year arrows
+        const r_date = epochToMoment(right_pane_date).startOf('month');
+        if (diffInMonths(toMoment().startOf('month'), r_date) === 0) return true; // future months are disallowed
+        return diffInMonths(r_date, date) !== 1;
+    };
+
+    const jumpToCurrentMonth = () => {
+        const current_month = toMoment().endOf('month').unix();
+        setLeftPaneDate(epochToMoment(current_month).endOf('month').subtract(1, 'month').unix());
+        setRightPaneDate(current_month);
+    };
+
+    const navigateTo = e => {
+        setLeftPaneDate(subMonths(e, 1).unix());
+        setRightPaneDate(toMoment(e).unix());
+    };
+
+    const updateSelectedDate = e => {
+        onChange(moment.utc(e.currentTarget.dataset.date, 'YYYY-MM-DD').unix());
+    };
+
+    return (
+        <React.Fragment>
+            <div className='first-month'>
+                <Calendar.Header
+                    calendar_date={left_pane_date}
+                    calendar_view='date'
+                    navigateTo={navigateFrom}
+                    isPeriodDisabled={validateFromArrows}
+                    hide_disabled_periods={true}
+                    switchView={() => ({})}
+                />
+                <Calendar.Body
+                    calendar_view='date'
+                    calendar_date={left_pane_date}
+                    selected_date={value}
+                    date_format='YYYY-MM-DD'
+                    isPeriodDisabled={shouldDisableDate}
+                    hide_others={true}
+                    updateSelected={updateSelectedDate}
+                />
+            </div>
+            <div className='second-month'>
+                <Calendar.Header
+                    calendar_date={right_pane_date}
+                    calendar_view='date'
+                    isPeriodDisabled={validateToArrows}
+                    navigateTo={navigateTo}
+                    hide_disabled_periods
+                    switchView={() => ({})}
+                />
+                <Calendar.Body
+                    calendar_view='date'
+                    calendar_date={right_pane_date}
+                    selected_date={value}
+                    date_format='YYYY-MM-DD'
+                    isPeriodDisabled={shouldDisableDate}
+                    hide_others
+                    updateSelected={updateSelectedDate}
+                />
+                <Calendar.Footer use_icon='IcCalendarForwardToday' has_today_btn={true} onClick={jumpToCurrentMonth} />
+            </div>
+        </React.Fragment>
+    );
+});
+
+TwoMonthPicker.displayName = 'TwoMonthPicker';
+
+TwoMonthPicker.propTypes = {
+    isPeriodDisabled: PropTypes.func,
+    onChange: PropTypes.func,
+    value: PropTypes.number,
+};
+export default TwoMonthPicker;
diff --git a/packages/reports/src/App/Components/Form/RangeSlider/__tests__/range-slider.spec.js b/packages/reports/src/App/Components/Form/RangeSlider/__tests__/range-slider.spec.js
new file mode 100644
index 000000000000..fb4c8f47e682
--- /dev/null
+++ b/packages/reports/src/App/Components/Form/RangeSlider/__tests__/range-slider.spec.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import RangeSlider from '../range-slider';
+
+describe('RangeSlider', () => {
+    it('should show  1 Tick if the value is 1', () => {
+        const value = 1;
+        const wrapper = render(<RangeSlider value={value} />);
+        expect(wrapper.getAllByText('1 Tick')).toHaveLength(1);
+    });
+
+    it('should show 2 Ticks if the value is 2', () => {
+        const value = 2;
+        const wrapper = render(<RangeSlider value={value} />);
+        expect(wrapper.getAllByText('2 Ticks')).toHaveLength(1);
+    });
+
+    it('should change the input with onchange target value', () => {
+        const ChangeMock = jest.fn();
+        const wrapper = render(<RangeSlider onChange={ChangeMock} />);
+        const input = wrapper.getByLabelText('range-input');
+        fireEvent.change(input, { target: { value: 5 } });
+        expect(input.value).toBe('5');
+    });
+});
diff --git a/packages/reports/src/App/Components/Form/RangeSlider/__tests__/tick-steps.spec.js b/packages/reports/src/App/Components/Form/RangeSlider/__tests__/tick-steps.spec.js
new file mode 100644
index 000000000000..095ffe7a42c7
--- /dev/null
+++ b/packages/reports/src/App/Components/Form/RangeSlider/__tests__/tick-steps.spec.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import TickSteps from '../tick-steps.jsx';
+
+describe('TickSteps', () => {
+    const min_value = 1;
+    const max_value = 10;
+    const arr_ticks = [...Array(max_value - min_value + 1).keys()];
+    it.each(arr_ticks)('should render 10 tick steps', item => {
+        const wrapper = render(<TickSteps min_value={min_value} max_value={max_value} />);
+        expect(wrapper.getAllByTestId(`tick_step_${item + min_value}`)).toHaveLength(1);
+    });
+});
diff --git a/packages/reports/src/App/Components/Form/RangeSlider/index.js b/packages/reports/src/App/Components/Form/RangeSlider/index.js
new file mode 100644
index 000000000000..6bb5b03cf31d
--- /dev/null
+++ b/packages/reports/src/App/Components/Form/RangeSlider/index.js
@@ -0,0 +1 @@
+export default from './range-slider.jsx';
diff --git a/packages/reports/src/App/Components/Form/RangeSlider/range-slider.jsx b/packages/reports/src/App/Components/Form/RangeSlider/range-slider.jsx
new file mode 100644
index 000000000000..9330f508c71e
--- /dev/null
+++ b/packages/reports/src/App/Components/Form/RangeSlider/range-slider.jsx
@@ -0,0 +1,119 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { localize } from '@deriv/translations';
+import { Text } from '@deriv/components';
+import TickSteps from './tick-steps.jsx';
+
+const RangeSlider = ({ className, name, value, min_value, max_value, onChange }) => {
+    const [hover_value, setHoverValue] = React.useState(0);
+    const range_slider_ref = React.useRef();
+
+    const handleChange = e => {
+        const target_value = +e.target.value;
+        if (target_value !== value) {
+            resetOnHover();
+            onChange({ target: { name, value: target_value } });
+        }
+    };
+
+    const handleClick = index => {
+        if (index !== value) {
+            resetOnHover();
+            onChange({ target: { name, value: index } });
+        }
+    };
+
+    const onMouseEnter = index => {
+        if (index) {
+            setHoverValue(index);
+            range_slider_ref.current.style.width = getRangeSliderTrackWidth(index, true);
+        }
+    };
+
+    const onMouseLeave = e => {
+        const { offsetX, offsetY } = e.nativeEvent;
+        if (offsetY <= -3 || offsetY >= 3 || offsetX < -3 || offsetX > 3) {
+            resetOnHover();
+        }
+    };
+
+    const getRangeSliderTrackWidth = (slider_value, is_hover) => {
+        const width = (slider_value - min_value) * (10 / (max_value - min_value));
+        return `${width * 2 + (is_hover ? 0.8 : 1.4)}em`;
+    };
+
+    const resetOnHover = () => {
+        if (hover_value) {
+            setHoverValue(0);
+            range_slider_ref.current.style.width = 0;
+        }
+    };
+
+    const display_value = hover_value || value;
+    const steps = !isNaN(max_value - min_value) ? max_value - min_value : 10;
+    return (
+        <div
+            className={classNames('range-slider', className, {
+                'range-slider__error': value < min_value || value > max_value,
+            })}
+        >
+            <label className='range-slider__label' htmlFor='range'>
+                <input
+                    className='input trade-container__input range-slider__track'
+                    id='dt_duration_range_input'
+                    max={max_value}
+                    max_value={max_value}
+                    min={min_value}
+                    min_value={min_value}
+                    name={name}
+                    onChange={handleChange}
+                    tabIndex='0'
+                    type='range'
+                    steps={steps}
+                    value={value}
+                    aria-label='range-input'
+                />
+                {/* this element to be placed before <TickSteps /> to prevent overlapping colors */}
+                <span
+                    ref={range_slider_ref}
+                    className='range-slider__line range-slider__line--fill'
+                    onMouseLeave={onMouseLeave}
+                />
+                <div className='range-slider__ticks'>
+                    <TickSteps
+                        hover_value={hover_value}
+                        max_value={max_value}
+                        min_value={min_value}
+                        onClick={handleClick}
+                        onMouseLeave={onMouseLeave}
+                        onMouseEnter={onMouseEnter}
+                        value={value}
+                    />
+                </div>
+                {/* Calculate line width based on active value and size of range thumb */}
+                <div className='range-slider__line' style={{ width: `${getRangeSliderTrackWidth(value)}` }} />
+            </label>
+            <div className='range-slider__caption'>
+                {!!display_value && (
+                    <Text align='center' weight='bold' size='xs' color='prominent' id='dt_range_slider_label'>
+                        {display_value === 1 && localize('{{display_value}} Tick', { display_value })}
+                        {display_value > 1 && localize('{{display_value}} Ticks', { display_value })}
+                    </Text>
+                )}
+            </div>
+        </div>
+    );
+};
+// Keypress events do not trigger on Safari due to the way it handles input type='range' elements, using focus on the input element also doesn't work for Safari.
+
+RangeSlider.propTypes = {
+    className: PropTypes.string,
+    max_value: PropTypes.number,
+    min_value: PropTypes.number,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    value: PropTypes.number,
+};
+
+export default RangeSlider;
diff --git a/packages/reports/src/App/Components/Form/RangeSlider/tick-steps.jsx b/packages/reports/src/App/Components/Form/RangeSlider/tick-steps.jsx
new file mode 100644
index 000000000000..8f664185d5cd
--- /dev/null
+++ b/packages/reports/src/App/Components/Form/RangeSlider/tick-steps.jsx
@@ -0,0 +1,45 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const TickSteps = ({ hover_value, max_value, min_value, onClick, onMouseEnter, onMouseLeave, value }) => {
+    if (!max_value || !min_value) return null;
+
+    const arr_ticks = [...Array(max_value - min_value + 1).keys()];
+
+    const isActive = idx => idx + min_value === value;
+    const isMarked = idx => idx + min_value < value;
+    const isMarkedOnHover = idx => (isMarked(idx) ? false : idx + min_value <= hover_value);
+
+    return (
+        <React.Fragment>
+            {arr_ticks.map(idx => (
+                <span
+                    data-testid={`tick_step_${idx + min_value}`}
+                    key={idx}
+                    data-value={idx + min_value}
+                    className={classNames('range-slider__ticks-step', {
+                        'range-slider__ticks-step--active': isActive(idx),
+                        'range-slider__ticks-step--marked': isMarked(idx),
+                        'range-slider__ticks-step--marked-hover': isMarkedOnHover(idx),
+                    })}
+                    onClick={() => onClick(idx + min_value)}
+                    onMouseEnter={() => onMouseEnter(idx + min_value)}
+                    onMouseLeave={onMouseLeave}
+                />
+            ))}
+        </React.Fragment>
+    );
+};
+
+TickSteps.propTypes = {
+    hover_value: PropTypes.number,
+    max_value: PropTypes.number,
+    min_value: PropTypes.number,
+    onClick: PropTypes.func,
+    onMouseEnter: PropTypes.func,
+    onMouseLeave: PropTypes.func,
+    value: PropTypes.number,
+};
+
+export default TickSteps;
diff --git a/packages/reports/src/App/Components/Form/TimePicker/dialog.jsx b/packages/reports/src/App/Components/Form/TimePicker/dialog.jsx
new file mode 100644
index 000000000000..5c55bdac55df
--- /dev/null
+++ b/packages/reports/src/App/Components/Form/TimePicker/dialog.jsx
@@ -0,0 +1,128 @@
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import React from 'react';
+import { localize } from '@deriv/translations';
+import { toMoment } from '@deriv/shared';
+
+function isBetween(to_compare_moment, start_times_moment, end_times_moment, duration) {
+    for (let i = 0; i < start_times_moment.length; i++) {
+        if (to_compare_moment.isBetween(start_times_moment[i], end_times_moment[i], duration)) {
+            return true;
+        }
+    }
+    return false;
+}
+
+const Dialog = ({ preClass, selected_time, end_times, start_times, onChange, className }) => {
+    const start_times_moment = start_times ? start_times.map(start_time => toMoment(start_time)) : [toMoment()];
+    const end_times_moment = end_times
+        ? end_times.map(end_time => toMoment(end_time))
+        : [toMoment().hour('23').minute('59').seconds('59').milliseconds('999')];
+    const to_compare_moment = toMoment();
+    const [hour, minute] = selected_time.split(':');
+    const hours = [...Array(24).keys()].map(a => `0${a}`.slice(-2));
+    const minutes = [...Array(12).keys()].map(a => `0${a * 5}`.slice(-2));
+
+    const selectOption = (type, current_value, prev_value, is_enabled = true) => {
+        if (is_enabled && prev_value) {
+            const [prev_hour, prev_minute] = prev_value.split(':');
+            if ((type === 'h' && current_value !== prev_hour) || (type === 'm' && current_value !== prev_minute)) {
+                onChange(`${type === 'h' ? current_value : prev_hour}:${type === 'm' ? current_value : prev_minute}`);
+            }
+        }
+    };
+
+    return (
+        <div className={classNames(`${preClass}__dialog`, `${className}`)}>
+            <div className={`${preClass}__selector`}>
+                <div className={`${preClass}__selector--hours`}>
+                    <div className={classNames(`${preClass}__selector-list-title`, 'center-text')}>
+                        <strong>{localize('Hour')}</strong>
+                    </div>
+                    <div>
+                        {hours.map((h, key) => {
+                            to_compare_moment.hour(h);
+                            const start_times_reset_minute = start_times_moment.map(start_time =>
+                                start_time.clone().minute(0)
+                            );
+                            const is_hour_enabled = isBetween(
+                                to_compare_moment,
+                                start_times_reset_minute,
+                                end_times_moment
+                            );
+                            const is_minute_enabled = isBetween(
+                                to_compare_moment,
+                                start_times_moment,
+                                end_times_moment,
+                                'minute'
+                            );
+                            // The minute number after which the last block/interval of `Minutes` selection will be disabled
+                            const last_interval_of_hour = 52;
+                            const is_enabled =
+                                to_compare_moment.minutes() > last_interval_of_hour
+                                    ? is_hour_enabled && is_minute_enabled
+                                    : is_hour_enabled;
+                            return (
+                                <div
+                                    className={classNames(
+                                        `${preClass}__selector-list-item`,
+                                        { [`${preClass}__selector-list-item--selected`]: hour === h },
+                                        { [`${preClass}__selector-list-item--disabled`]: !is_enabled }
+                                    )}
+                                    key={key}
+                                    onClick={() => {
+                                        selectOption('h', h, selected_time, is_enabled);
+                                    }}
+                                >
+                                    {h}
+                                </div>
+                            );
+                        })}
+                    </div>
+                </div>
+                <div className={`${preClass}__selector--minutes`}>
+                    <div className={classNames(`${preClass}__selector-list-title`, 'center-text')}>
+                        <strong>{localize('Minute')}</strong>
+                    </div>
+                    <div>
+                        {minutes.map((mm, key) => {
+                            to_compare_moment.hour(hour).minute(mm);
+                            const is_enabled = isBetween(
+                                to_compare_moment,
+                                start_times_moment,
+                                end_times_moment,
+                                'minute'
+                            );
+                            return (
+                                <div
+                                    className={classNames(
+                                        `${preClass}__selector-list-item`,
+                                        { [`${preClass}__selector-list-item--selected`]: minute === mm },
+                                        { [`${preClass}__selector-list-item--disabled`]: !is_enabled }
+                                    )}
+                                    key={key}
+                                    onClick={() => {
+                                        selectOption('m', mm, selected_time, is_enabled);
+                                    }}
+                                >
+                                    {mm}
+                                </div>
+                            );
+                        })}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+Dialog.propTypes = {
+    className: PropTypes.string,
+    end_time: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]),
+    onChange: PropTypes.func,
+    preClass: PropTypes.string,
+    selected_time: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]),
+    start_time: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]),
+};
+
+export default Dialog;
diff --git a/packages/reports/src/App/Components/Form/TimePicker/index.js b/packages/reports/src/App/Components/Form/TimePicker/index.js
new file mode 100644
index 000000000000..72851feced8b
--- /dev/null
+++ b/packages/reports/src/App/Components/Form/TimePicker/index.js
@@ -0,0 +1 @@
+export default from './time-picker.jsx';
diff --git a/packages/reports/src/App/Components/Form/TimePicker/time-picker.jsx b/packages/reports/src/App/Components/Form/TimePicker/time-picker.jsx
new file mode 100644
index 000000000000..301df882505b
--- /dev/null
+++ b/packages/reports/src/App/Components/Form/TimePicker/time-picker.jsx
@@ -0,0 +1,128 @@
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { Icon, InputField } from '@deriv/components';
+import { connect } from 'Stores/connect';
+import Dialog from './dialog.jsx';
+
+const class_prefix = 'time-picker';
+
+const TimePicker = ({
+    current_focus,
+    end_times,
+    is_nativepicker,
+    name,
+    onChange,
+    padding,
+    placeholder,
+    selected_time,
+    setCurrentFocus,
+    start_times,
+    validation_errors,
+}) => {
+    const [is_open, setIsOpen] = React.useState(false);
+    const [wrapper_ref, setWrapperRef] = React.useState(null);
+
+    React.useEffect(() => {
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    });
+
+    const toggleDropDown = () => {
+        setIsOpen(!is_open);
+    };
+
+    const handleChange = arg => {
+        // To handle nativepicker;
+        const value = typeof arg === 'object' ? arg.target.selected_time : arg;
+
+        if (value !== selected_time) {
+            onChange({ target: { name, value } });
+        }
+    };
+
+    const saveRef = node => {
+        if (!node) return;
+        setWrapperRef(node);
+    };
+
+    const handleClickOutside = event => {
+        if (!wrapper_ref?.contains(event.target) && is_open) {
+            setIsOpen(false);
+        }
+    };
+
+    return (
+        <div ref={saveRef} className={classNames(class_prefix, { [`${class_prefix}--padding`]: padding })}>
+            {is_nativepicker ? (
+                <input
+                    type='time'
+                    id={`dt_${name}_input`}
+                    value={selected_time}
+                    onChange={handleChange}
+                    name={name}
+                    min={start_times[0]}
+                    max={end_times[end_times.length - 1]}
+                />
+            ) : (
+                <React.Fragment>
+                    <InputField
+                        error_messages={validation_errors}
+                        type='text'
+                        is_hj_whitelisted
+                        is_read_only
+                        id={`dt_${name}_input`}
+                        className={classNames(`${class_prefix}-input`)}
+                        current_focus={current_focus}
+                        value={`${selected_time} GMT`}
+                        onClick={toggleDropDown}
+                        name={name}
+                        placeholder={placeholder}
+                        setCurrentFocus={setCurrentFocus}
+                    />
+                    <Icon icon='IcClockOutline' className={`${class_prefix}__icon`} />
+                    <CSSTransition
+                        in={is_open}
+                        classNames={{
+                            enter: 'time-picker__dialog--enter',
+                            enterDone: 'time-picker__dialog--enter-done',
+                            exit: 'time-picker__dialog--exit',
+                        }}
+                        timeout={100}
+                        unmountOnExit
+                    >
+                        <Dialog
+                            end_times={end_times}
+                            start_times={start_times}
+                            className={'from-left'}
+                            onChange={handleChange}
+                            preClass={class_prefix}
+                            selected_time={selected_time}
+                        />
+                    </CSSTransition>
+                </React.Fragment>
+            )}
+        </div>
+    );
+};
+
+TimePicker.propTypes = {
+    end_time: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]),
+    is_clearable: PropTypes.bool,
+    is_nativepicker: PropTypes.bool,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    padding: PropTypes.string,
+    placeholder: PropTypes.string,
+    selected_time: PropTypes.string,
+    start_time: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]),
+};
+
+export default observer(
+    connect(({ ui }) => ({
+        current_focus: ui.current_focus,
+        setCurrentFocus: ui.setCurrentFocus,
+    }))(TimePicker)
+);
diff --git a/packages/reports/src/App/Components/Form/fieldset.jsx b/packages/reports/src/App/Components/Form/fieldset.jsx
new file mode 100644
index 000000000000..1cfb08d4cfd5
--- /dev/null
+++ b/packages/reports/src/App/Components/Form/fieldset.jsx
@@ -0,0 +1,51 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Popover } from '@deriv/components';
+
+const Fieldset = ({ children, className, header, header_tooltip, is_center, onMouseEnter, onMouseLeave }) => {
+    const fieldset_header_class = classNames('trade-container__fieldset-header', {
+        'center-text': is_center,
+        'trade-container__fieldset-header--inline': header_tooltip,
+    });
+    const fieldset_info_class = classNames(
+        'trade-container__fieldset-info',
+        !is_center && 'trade-container__fieldset-info--left'
+    );
+
+    return (
+        <fieldset className={className} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+            {!!header && (
+                <div className={fieldset_header_class}>
+                    <span className={fieldset_info_class}>{header}</span>
+                    {header_tooltip && (
+                        <Popover
+                            alignment='left'
+                            icon='info'
+                            is_bubble_hover_enabled
+                            message={header_tooltip}
+                            margin={216}
+                            relative_render
+                        />
+                    )}
+                </div>
+            )}
+            {children}
+        </fieldset>
+    );
+};
+
+// ToDo:
+// - Refactor Last Digit to keep the children as array type.
+//   Currently last_digit.jsx returns object (React-Element) as 'children'
+//   props type.
+Fieldset.propTypes = {
+    children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+    className: PropTypes.string,
+    header: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    header_tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    onMouseEnter: PropTypes.func,
+    onMouseLeave: PropTypes.func,
+};
+
+export default Fieldset;
diff --git a/packages/reports/src/App/Components/Form/number-selector.jsx b/packages/reports/src/App/Components/Form/number-selector.jsx
new file mode 100644
index 000000000000..0ca791d7d173
--- /dev/null
+++ b/packages/reports/src/App/Components/Form/number-selector.jsx
@@ -0,0 +1,45 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+// arr_arr_numbers is an array of arrays where each nested array indicates one row
+// for example [[1, 2, 3]] will be a single row of these three numbers
+// but [[1, 2, 3], [4, 5, 6]] will be two rows:
+// first row with the first three numbers and second row with the last three numbers
+const NumberSelector = ({ arr_arr_numbers, name, onChange, selected_number }) => {
+    const handleSelect = item => {
+        if (+item.target.getAttribute('data-value') !== selected_number) {
+            onChange({ target: { name, value: +item.target.getAttribute('data-value') } });
+        }
+    };
+
+    return (
+        <div className='number-selector'>
+            {arr_arr_numbers.map((arr_numbers, idx) => (
+                <div className='number-selector__row' key={idx}>
+                    {arr_numbers.map(i => (
+                        <span
+                            key={i}
+                            className={classNames('number-selector__selection', {
+                                'number-selector__selection--selected': selected_number === i,
+                            })}
+                            data-value={i}
+                            onClick={handleSelect}
+                        >
+                            {i}
+                        </span>
+                    ))}
+                </div>
+            ))}
+        </div>
+    );
+};
+
+NumberSelector.propTypes = {
+    arr_arr_numbers: PropTypes.arrayOf(PropTypes.array),
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    selected_number: PropTypes.number,
+};
+
+export default NumberSelector;
diff --git a/packages/reports/src/App/Components/Routes/__tests__/binary-link.spec.js b/packages/reports/src/App/Components/Routes/__tests__/binary-link.spec.js
new file mode 100644
index 000000000000..75fbb6c87c0f
--- /dev/null
+++ b/packages/reports/src/App/Components/Routes/__tests__/binary-link.spec.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import { expect } from 'chai';
+import { configure, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { NavLink } from 'react-router-dom';
+import { routes } from '@deriv/shared';
+import { BinaryLink } from '../index';
+
+configure({ adapter: new Adapter() });
+
+describe('<BinaryLink />', () => {
+    it('should render one <BinaryLink /> component', () => {
+        const wrapper = shallow(<BinaryLink />);
+        expect(wrapper).to.have.length(1);
+    });
+    it('should render children when passed in', () => {
+        const child_div = <div className='sweet-child-of-mine' />;
+        const wrapper = shallow(<BinaryLink>{child_div}</BinaryLink>);
+        expect(wrapper.contains(child_div)).to.equal(true);
+    });
+    it("should render one <Navlink /> when property 'to' is passed", () => {
+        const wrapper = shallow(<BinaryLink to='/' />);
+        expect(wrapper.find(NavLink)).to.have.length(1);
+    });
+    it("should not render <Navlink /> when property 'to' is not passed", () => {
+        const wrapper = shallow(<BinaryLink />);
+        expect(wrapper.find(NavLink)).to.have.length(0);
+    });
+    it("should render <a /> when property 'to' is not passed", () => {
+        const wrapper = shallow(<BinaryLink />);
+        expect(wrapper.contains(<a />)).to.equal(true);
+    });
+    it("should not render <a> when property 'to' is passed", () => {
+        const wrapper = shallow(<BinaryLink to={routes.trade} />);
+        expect(wrapper.contains(<a />)).to.equal(false);
+    });
+    it('should render component with props if any given', () => {
+        const wrapper = shallow(<BinaryLink className='a-cool-classname' />);
+        expect(wrapper.find('.a-cool-classname').exists());
+    });
+    it('should throw error if the route given is not a valid route', () => {
+        let error;
+        try {
+            shallow(<BinaryLink to='/wrongRoute' />);
+        } catch (e) {
+            error = e;
+        }
+        expect(error).to.be.instanceOf(Error);
+    });
+});
diff --git a/packages/reports/src/App/Components/Routes/__tests__/helpers.spec.js b/packages/reports/src/App/Components/Routes/__tests__/helpers.spec.js
new file mode 100644
index 000000000000..6061cb4ed44e
--- /dev/null
+++ b/packages/reports/src/App/Components/Routes/__tests__/helpers.spec.js
@@ -0,0 +1,87 @@
+import React from 'react';
+import { expect } from 'chai';
+import * as Helpers from '../helpers';
+import { routes } from '@deriv/shared';
+import getRoutesConfig from 'Constants/routes-config';
+import Trade from 'Modules/Trading';
+
+describe('Helpers', () => {
+    describe('normalizePath', () => {
+        it('should return / as if path is empty', () => {
+            expect(Helpers.normalizePath('')).to.equal('/');
+        });
+        it('should return / + path as if path does not have /', () => {
+            expect(Helpers.normalizePath('trade')).to.equal('/trade');
+        });
+        it('should return / + path as if path does have /', () => {
+            expect(Helpers.normalizePath('/trade')).to.equal('/trade');
+        });
+    });
+
+    describe('findRouteByPath', () => {
+        it('should return undefined when path is not in routes_config', () => {
+            expect(Helpers.findRouteByPath('invalidRoute', getRoutesConfig())).to.be.undefined;
+        });
+        it('should return route_info when path is in routes_config and is not nested', () => {
+            const result = Helpers.findRouteByPath(routes.trade, getRoutesConfig());
+            expect(result.path).to.equal(routes.trade);
+            expect(result.exact).to.equal(true);
+            expect(result.component).to.equal(Trade);
+        });
+        it('should return route_info of parent route when path is in routes_config child level and is nested', () => {
+            const reports_routes_length = getRoutesConfig().find(r => r.path === routes.reports).routes.length;
+            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig())).to.have.all.keys(
+                'path',
+                'component',
+                'is_authenticated',
+                'routes',
+                'icon_component',
+                'getTitle'
+            );
+            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig()).routes).to.be.instanceof(Array);
+            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig()).routes).to.have.length(
+                reports_routes_length
+            );
+            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig()).is_authenticated).to.be.equal(true);
+            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig()).path).to.be.equal(routes.reports);
+        });
+    });
+
+    describe('isRouteVisible', () => {
+        it('should return true if route needs user to be authenticated and user is logged in', () => {
+            expect(Helpers.isRouteVisible({ path: '/contract', is_authenticated: true }, true)).to.equal(true);
+        });
+        it('should return false if route needs user to be authenticated and user is not logged in', () => {
+            expect(Helpers.isRouteVisible({ path: '/contract', is_authenticated: true }, false)).to.equal(false);
+        });
+        it('should return true if route does not need user to be authenticated and user is not logged in', () => {
+            expect(Helpers.isRouteVisible({ path: '/contract', is_authenticated: false }, false)).to.equal(true);
+        });
+        it('should return true if route does not need user to be authenticated and user is logged in', () => {
+            expect(Helpers.isRouteVisible({ path: '/contract', is_authenticated: false }, true)).to.equal(true);
+        });
+    });
+
+    describe('getPath', () => {
+        it('should return param values in params as a part of path', () => {
+            expect(Helpers.getPath('/contract/:contract_id', { contract_id: 37511105068 })).to.equal(
+                '/contract/37511105068'
+            );
+            expect(
+                Helpers.getPath('/something_made_up/:something_made_up_param1/:something_made_up_param2', {
+                    something_made_up_param1: '789',
+                    something_made_up_param2: '123456',
+                })
+            ).to.equal('/something_made_up/789/123456');
+        });
+        it('should return path as before if there is no params', () => {
+            expect(Helpers.getPath('/contract')).to.equal('/contract');
+        });
+    });
+
+    describe('getContractPath', () => {
+        it('should return the path of contract with contract_id passed', () => {
+            expect(Helpers.getContractPath(1234)).to.equal('/contract/1234');
+        });
+    });
+});
diff --git a/packages/reports/src/App/Components/Routes/__tests__/route-with-sub-routes.spec.js b/packages/reports/src/App/Components/Routes/__tests__/route-with-sub-routes.spec.js
new file mode 100644
index 000000000000..9e9946f2265f
--- /dev/null
+++ b/packages/reports/src/App/Components/Routes/__tests__/route-with-sub-routes.spec.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { expect } from 'chai';
+import { configure, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { RouteWithSubRoutesRender } from '../route-with-sub-routes.jsx';
+import { Redirect } from 'react-router-dom';
+import { PlatformContext } from '@deriv/shared';
+
+configure({ adapter: new Adapter() });
+
+describe('<RouteWithSubRoutes />', () => {
+    it('should render one <RouteWithSubRoutesRender /> component', () => {
+        const comp = (
+            <PlatformContext.Provider>
+                <RouteWithSubRoutesRender />
+            </PlatformContext.Provider>
+        );
+        const wrapper = shallow(comp);
+        expect(wrapper).to.have.length(1);
+    });
+    it('should have props as passed as route', () => {
+        const route = { path: '/', component: Redirect, title: '', exact: true, to: '/root' };
+        const comp = (
+            <PlatformContext.Provider>
+                <RouteWithSubRoutesRender {...route} />
+            </PlatformContext.Provider>
+        );
+        const wrapper = shallow(comp);
+        expect(wrapper.prop('exact')).to.equal(true);
+        expect(wrapper.prop('path')).to.equal('/');
+    });
+});
diff --git a/packages/reports/src/App/Components/Routes/binary-link.jsx b/packages/reports/src/App/Components/Routes/binary-link.jsx
new file mode 100644
index 000000000000..28b6322314e8
--- /dev/null
+++ b/packages/reports/src/App/Components/Routes/binary-link.jsx
@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { findRouteByPath, normalizePath } from './helpers';
+import getRoutesConfig from 'Constants/routes-config';
+
+// TODO: solve circular dependency problem
+// when binary link is imported into components present in routes config
+// or into their descendants
+const BinaryLink = ({ active_class, to, children, ...props }) => {
+    const path = normalizePath(to);
+    const route = findRouteByPath(path, getRoutesConfig());
+
+    if (!route) {
+        throw new Error(`Route not found: ${to}`);
+    }
+
+    return to ? (
+        <NavLink to={path} activeClassName={active_class || 'active'} exact={route.exact} {...props}>
+            {children}
+        </NavLink>
+    ) : (
+        <a {...props}>{children}</a>
+    );
+};
+
+BinaryLink.propTypes = {
+    active_class: PropTypes.string,
+    children: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string]),
+    to: PropTypes.string,
+};
+
+export default BinaryLink;
diff --git a/packages/reports/src/App/Components/Routes/binary-routes.jsx b/packages/reports/src/App/Components/Routes/binary-routes.jsx
new file mode 100644
index 000000000000..0bce70a4cc0d
--- /dev/null
+++ b/packages/reports/src/App/Components/Routes/binary-routes.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Switch } from 'react-router-dom';
+import getRoutesConfig from 'App/Constants/routes-config';
+import RouteWithSubRoutes from './route-with-sub-routes.jsx';
+
+const BinaryRoutes = props => (
+    <React.Suspense fallback={<div />}>
+        <Switch>
+            {getRoutesConfig().map((route, idx) => (
+                <RouteWithSubRoutes key={idx} {...route} {...props} />
+            ))}
+        </Switch>
+    </React.Suspense>
+);
+
+export default BinaryRoutes;
diff --git a/packages/reports/src/App/Components/Routes/helpers.js b/packages/reports/src/App/Components/Routes/helpers.js
new file mode 100644
index 000000000000..8d8bcc421c1d
--- /dev/null
+++ b/packages/reports/src/App/Components/Routes/helpers.js
@@ -0,0 +1,37 @@
+import { matchPath } from 'react-router';
+import { routes } from '@deriv/shared';
+
+export const normalizePath = path => (/^\//.test(path) ? path : `/${path || ''}`); // Default to '/'
+
+export const findRouteByPath = (path, routes_config) => {
+    let result;
+
+    routes_config.some(route_info => {
+        let match_path;
+        try {
+            match_path = matchPath(path, route_info);
+        } catch (e) {
+            if (/undefined/.test(e.message)) {
+                return undefined;
+            }
+        }
+
+        if (match_path) {
+            result = route_info;
+            return true;
+        } else if (route_info.routes) {
+            result = findRouteByPath(path, route_info.routes);
+            return result;
+        }
+        return false;
+    });
+
+    return result;
+};
+
+export const isRouteVisible = (route, is_logged_in) => !(route && route.is_authenticated && !is_logged_in);
+
+export const getPath = (route_path, params = {}) =>
+    Object.keys(params).reduce((p, name) => p.replace(`:${name}`, params[name]), route_path);
+
+export const getContractPath = contract_id => getPath(routes.contract, { contract_id });
diff --git a/packages/reports/src/App/Components/Routes/index.js b/packages/reports/src/App/Components/Routes/index.js
new file mode 100644
index 000000000000..061bdf961719
--- /dev/null
+++ b/packages/reports/src/App/Components/Routes/index.js
@@ -0,0 +1,4 @@
+export BinaryLink from './binary-link.jsx';
+export default from './binary-routes.jsx';
+export * from './helpers';
+export RouteWithSubRoutes from './route-with-sub-routes.jsx';
diff --git a/packages/reports/src/App/Components/Routes/route-with-sub-routes.jsx b/packages/reports/src/App/Components/Routes/route-with-sub-routes.jsx
new file mode 100644
index 000000000000..8ecd36d64067
--- /dev/null
+++ b/packages/reports/src/App/Components/Routes/route-with-sub-routes.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { Redirect, Route } from 'react-router-dom';
+import { redirectToLogin, removeBranchName, routes, isEmptyObject, default_title } from '@deriv/shared';
+import { getLanguage } from '@deriv/translations';
+import Page404 from 'Modules/Page404';
+
+const RouteWithSubRoutes = route => {
+    const validateRoute = pathname => {
+        if (pathname === '') return true;
+        if (route.path?.includes(':')) {
+            const static_pathname = pathname.substring(0, pathname.lastIndexOf('/') + 1);
+            return static_pathname === route.path.substring(0, route.path.indexOf(':'));
+        }
+        return route.path === pathname || !!(route.routes && route.routes.find(r => pathname === r.path));
+    };
+
+    const renderFactory = props => {
+        let result = null;
+
+        const pathname = removeBranchName(location.pathname).replace(/\/$/, '');
+        const is_valid_route = validateRoute(pathname);
+
+        if (route.component === Redirect) {
+            let to = route.to;
+
+            // This if clause has been added just to remove '/index' from url in localhost env.
+            if (route.path === routes.index) {
+                const { location } = props;
+                to = location.pathname.toLowerCase().replace(route.path, '');
+            }
+            result = <Redirect to={to} />;
+        } else if (is_valid_route && route.is_authenticated && !route.is_logging_in && !route.is_logged_in) {
+            redirectToLogin(route.is_logged_in, getLanguage());
+        } else {
+            const default_subroute = route.routes ? route.routes.find(r => r.default) : {};
+            const has_default_subroute = !isEmptyObject(default_subroute);
+
+            result = (
+                <React.Fragment>
+                    {has_default_subroute && pathname === route.path && <Redirect to={default_subroute.path} />}
+                    {is_valid_route ? <route.component {...props} routes={route.routes} /> : <Page404 />}
+                </React.Fragment>
+            );
+        }
+
+        // eslint-disable-next-line no-nested-ternary
+        const title = route.getTitle?.() || '';
+        document.title = `${title} | ${default_title}`;
+        return result;
+    };
+
+    return <Route exact={route.exact} path={route.path} render={renderFactory} />;
+};
+
+export { RouteWithSubRoutes as RouteWithSubRoutesRender }; // For tests
+
+export default RouteWithSubRoutes;
diff --git a/packages/reports/src/App/Containers/ProgressSliderStream/index.js b/packages/reports/src/App/Containers/ProgressSliderStream/index.js
new file mode 100644
index 000000000000..657c6ba7065a
--- /dev/null
+++ b/packages/reports/src/App/Containers/ProgressSliderStream/index.js
@@ -0,0 +1 @@
+export default from './progress-slider-stream.jsx';
diff --git a/packages/reports/src/App/Containers/ProgressSliderStream/progress-slider-stream.jsx b/packages/reports/src/App/Containers/ProgressSliderStream/progress-slider-stream.jsx
new file mode 100644
index 000000000000..23e628dc4204
--- /dev/null
+++ b/packages/reports/src/App/Containers/ProgressSliderStream/progress-slider-stream.jsx
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ProgressSlider } from '@deriv/components';
+import { getCurrentTick } from '@deriv/shared';
+import { connect } from 'Stores/connect';
+import { getCardLabels } from '_common/contract';
+
+const ProgressSliderStream = ({ contract_info, is_loading, server_time }) => {
+    if (!contract_info) {
+        return <div />;
+    }
+    const current_tick = contract_info.tick_count && getCurrentTick(contract_info);
+
+    return (
+        <ProgressSlider
+            current_tick={current_tick}
+            expiry_time={contract_info.date_expiry}
+            getCardLabels={getCardLabels}
+            is_loading={is_loading}
+            server_time={server_time}
+            start_time={contract_info.date_start}
+            ticks_count={contract_info.tick_count}
+        />
+    );
+};
+
+ProgressSliderStream.propTypes = {
+    contract_info: PropTypes.object,
+    is_loading: PropTypes.bool,
+    server_time: PropTypes.object,
+};
+
+export default connect(({ common, modules }) => ({
+    is_loading: modules.portfolio.is_loading,
+    server_time: common.server_time,
+}))(ProgressSliderStream);
diff --git a/packages/reports/src/Components/amount-cell.jsx b/packages/reports/src/Components/amount-cell.jsx
index 74342892adb0..d52a57c7562b 100644
--- a/packages/reports/src/Components/amount-cell.jsx
+++ b/packages/reports/src/Components/amount-cell.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getProfitOrLoss } from 'Modules/Reports/Helpers/profit-loss';
+import { getProfitOrLoss } from 'Helpers/profit-loss';
 
 const AmountCell = ({ value }) => {
     const status = getProfitOrLoss(value);
diff --git a/packages/reports/src/Components/filter-component.jsx b/packages/reports/src/Components/filter-component.jsx
index 9f9588b6a130..4e5af940187a 100644
--- a/packages/reports/src/Components/filter-component.jsx
+++ b/packages/reports/src/Components/filter-component.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { FilterDropdown } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
-import CompositeCalendar from 'App/Components/Form/CompositeCalendar/composite-calendar.jsx';
+import CompositeCalendar from 'App/Components/Form/CompositeCalendar';
 
 const FilterComponent = ({
     action_type,
diff --git a/packages/reports/src/Components/indicative-cell.jsx b/packages/reports/src/Components/indicative-cell.jsx
index af1b3521a4f6..a6f768897885 100644
--- a/packages/reports/src/Components/indicative-cell.jsx
+++ b/packages/reports/src/Components/indicative-cell.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Icon, Money, DesktopWrapper, ContractCard } from '@deriv/components';
-import { getCardLabels } from 'Constants/contract';
+import { getCardLabels } from '_common/contract';
 import { connect } from 'Stores/connect';
 
 const IndicativeCell = ({ amount, currency, contract_info, is_footer, onClickSell, is_sell_requested }) => {
diff --git a/packages/reports/src/Components/market-symbol-icon-row.jsx b/packages/reports/src/Components/market-symbol-icon-row.jsx
index 5ada1db081e5..ff595da87d7a 100644
--- a/packages/reports/src/Components/market-symbol-icon-row.jsx
+++ b/packages/reports/src/Components/market-symbol-icon-row.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { extractInfoFromShortcode, isHighLow } from '@deriv/shared';
 import { Icon, Popover, IconTradeTypes } from '@deriv/components';
-import { getMarketName, getTradeTypeName } from '../Helpers/market-underlying';
+import { getMarketName, getTradeTypeName } from 'Helpers/market-underlying';
 
 const MarketSymbolIconRow = ({ icon, payload, show_description, should_show_multiplier = true }) => {
     const should_show_category_icon = typeof payload.shortcode === 'string';
diff --git a/packages/reports/src/Components/placeholder-component.jsx b/packages/reports/src/Components/placeholder-component.jsx
index 54d43f05c528..b8d9717abc41 100644
--- a/packages/reports/src/Components/placeholder-component.jsx
+++ b/packages/reports/src/Components/placeholder-component.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Loading from '../../../templates/_common/components/loading';
+import Loading from '_common/components/loading.jsx';
 
 const PlaceholderComponent = props => {
     const EmptyMessageComponent = props.empty_message_component;
diff --git a/packages/reports/src/Components/profit_loss_cell.jsx b/packages/reports/src/Components/profit_loss_cell.jsx
index b968cb81d03f..ab323352670d 100644
--- a/packages/reports/src/Components/profit_loss_cell.jsx
+++ b/packages/reports/src/Components/profit_loss_cell.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getProfitOrLoss } from 'Modules/Reports/Helpers/profit-loss';
+import { getProfitOrLoss } from 'Helpers/profit-loss';
 
 const ProfitLossCell = ({ value, children }) => {
     const status = getProfitOrLoss(value);
diff --git a/packages/reports/src/Constants/data-table-constants.js b/packages/reports/src/Constants/data-table-constants.js
index 75d0bb5dc178..a9b6afe9796c 100644
--- a/packages/reports/src/Constants/data-table-constants.js
+++ b/packages/reports/src/Constants/data-table-constants.js
@@ -4,12 +4,13 @@ import { Icon, Label, Money, ContractCard } from '@deriv/components';
 import { isMobile, getCurrencyDisplayCode, getTotalProfit, shouldShowCancellation } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import ProgressSliderStream from 'App/Containers/ProgressSliderStream';
-import { getCardLabels } from 'Constants/contract';
-import { getProfitOrLoss } from 'Modules/Reports/Helpers/profit-loss';
-import IndicativeCell from '../Components/indicative-cell.jsx';
-import MarketSymbolIconRow from '../Components/market-symbol-icon-row.jsx';
-import ProfitLossCell from '../Components/profit_loss_cell.jsx';
-import CurrencyWrapper from '../Components/currency-wrapper.jsx';
+
+import { getCardLabels } from '_common/contract';
+import { getProfitOrLoss } from 'Helpers/profit-loss';
+import IndicativeCell from 'Components/indicative-cell.jsx';
+import MarketSymbolIconRow from 'Components/market-symbol-icon-row.jsx';
+import ProfitLossCell from 'Components/profit_loss_cell.jsx';
+import CurrencyWrapper from 'Components/currency-wrapper.jsx';
 
 const getModeFromValue = key => {
     const map = {
diff --git a/packages/reports/src/Constants/routes-config.js b/packages/reports/src/Constants/routes-config.js
index 5f9a4d6da026..ad5146df1803 100644
--- a/packages/reports/src/Constants/routes-config.js
+++ b/packages/reports/src/Constants/routes-config.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import { OpenPositions, ProfitTable, Statement, Reports } from '../Containers';
+import { OpenPositions, ProfitTable, Statement, Reports } from 'Containers';
 
 // Error Routes
 const Page404 = React.lazy(() => import(/* webpackChunkName: "404" */ '../Modules/Page404'));
diff --git a/packages/reports/src/Containers/open-positions.jsx b/packages/reports/src/Containers/open-positions.jsx
index 7368f5318571..1ae489167bcc 100644
--- a/packages/reports/src/Containers/open-positions.jsx
+++ b/packages/reports/src/Containers/open-positions.jsx
@@ -16,15 +16,16 @@ import { urlFor, isMobile, isMultiplierContract, getTimePercentage, website_name
 import { localize, Localize } from '@deriv/translations';
 import { ReportsTableRowLoader } from 'App/Components/Elements/ContentLoader';
 import { getContractPath } from 'App/Components/Routes/helpers';
-import { getContractDurationType } from 'Modules/Reports/Helpers/market-underlying';
-import EmptyTradeHistoryMessage from 'Modules/Reports/Components/empty-trade-history-message.jsx';
+import { getContractDurationType } from 'Helpers/market-underlying';
+
+import EmptyTradeHistoryMessage from 'Components/empty-trade-history-message.jsx';
 import {
     getOpenPositionsColumnsTemplate,
     getMultiplierOpenPositionsColumnsTemplate,
-} from 'Modules/Reports/Constants/data-table-constants';
+} from 'Constants/data-table-constants';
 import PositionsCard from 'App/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx';
-import PlaceholderComponent from 'Modules/Reports/Components/placeholder-component.jsx';
-import { getCardLabels } from 'Constants/contract';
+import PlaceholderComponent from 'Components/placeholder-component.jsx';
+import { getCardLabels } from '_common/contract';
 import { connect } from 'Stores/connect';
 
 const EmptyPlaceholderWrapper = props => (
diff --git a/packages/reports/src/Containers/profit-table.jsx b/packages/reports/src/Containers/profit-table.jsx
index 9469288002ca..4d873da76afe 100644
--- a/packages/reports/src/Containers/profit-table.jsx
+++ b/packages/reports/src/Containers/profit-table.jsx
@@ -8,12 +8,13 @@ import { extractInfoFromShortcode, isForwardStarting, urlFor, website_name } fro
 import { localize, Localize } from '@deriv/translations';
 import { ReportsTableRowLoader } from 'App/Components/Elements/ContentLoader';
 import CompositeCalendar from 'App/Components/Form/CompositeCalendar';
-import { getContractPath } from 'App/Components/Routes/helpers';
-import { getSupportedContracts } from 'Constants';
-import { connect } from 'Stores/connect';
-import EmptyTradeHistoryMessage from '../Components/empty-trade-history-message.jsx';
-import PlaceholderComponent from '../Components/placeholder-component.jsx';
-import { ReportsMeta } from '../Components/reports-meta.jsx';
+import { getContractPath } from 'Components/Routes/helpers';
+import { getSupportedContracts } from '_common/contract';
+
+import { connect } from '../Stores/connect';
+import EmptyTradeHistoryMessage from 'Components/empty-trade-history-message.jsx';
+import PlaceholderComponent from 'Components/placeholder-component.jsx';
+import { ReportsMeta } from 'Components/reports-meta.jsx';
 import { getProfitTableColumnsTemplate } from '../Constants/data-table-constants';
 
 const getRowAction = row_obj =>
diff --git a/packages/reports/src/Containers/statement.jsx b/packages/reports/src/Containers/statement.jsx
index 1d5b36935b9d..548c27c4f816 100644
--- a/packages/reports/src/Containers/statement.jsx
+++ b/packages/reports/src/Containers/statement.jsx
@@ -7,14 +7,14 @@ import { extractInfoFromShortcode, isForwardStarting, urlFor, website_name } fro
 import { localize, Localize } from '@deriv/translations';
 import { ReportsTableRowLoader } from 'App/Components/Elements/ContentLoader';
 import { getContractPath } from 'App/Components/Routes/helpers';
-import { getSupportedContracts } from 'Constants';
+import { getSupportedContracts } from '_common/contract';
 import { connect } from 'Stores/connect';
 import { getStatementTableColumnsTemplate } from '../Constants/data-table-constants';
-import PlaceholderComponent from '../Components/placeholder-component.jsx';
-import AccountStatistics from '../Components/account-statistics.jsx';
-import FilterComponent from '../Components/filter-component.jsx';
-import { ReportsMeta } from '../Components/reports-meta.jsx';
-import EmptyTradeHistoryMessage from '../Components/empty-trade-history-message.jsx';
+import PlaceholderComponent from 'Components/placeholder-component.jsx';
+import AccountStatistics from 'Components/account-statistics.jsx';
+import FilterComponent from 'Components/filter-component.jsx';
+import { ReportsMeta } from 'Components/reports-meta.jsx';
+import EmptyTradeHistoryMessage from 'Components/empty-trade-history-message.jsx';
 
 const DetailsComponent = ({ message = '', action_type = '' }) => {
     const address_hash_match = /:\s([0-9a-zA-Z]+.{25,28})/gm.exec(message.split(/,\s/)[0]);
diff --git a/packages/reports/src/Helpers/contract-type.js b/packages/reports/src/Helpers/contract-type.js
new file mode 100644
index 000000000000..2c9063d321c3
--- /dev/null
+++ b/packages/reports/src/Helpers/contract-type.js
@@ -0,0 +1,112 @@
+import React from 'react';
+import { localize } from '@deriv/translations';
+
+export const contract_category_icon = {
+    [localize('Ups & Downs')]: 'IcUpsDowns',
+    [localize('Highs & Lows')]: 'IcHighsLows',
+    [localize('Ins & Outs')]: 'IcInsOuts',
+    [localize('Look Backs')]: 'IcLookbacks',
+    [localize('Digits')]: 'IcDigits',
+    [localize('Multipliers')]: 'IcMultiplier',
+};
+
+export const getContractTypeCategoryIcons = () => ({
+    All: 'IcCatAll',
+    Options: 'IcCatOptions',
+    Multipliers: 'IcCatMultiplier',
+});
+
+/**
+ * Returns a list of contracts in the following format:
+ * {
+ *      label: '', // contract category label
+ *      contract_types: [], // list of contract types
+ *      icon: '', // contract categoty icon
+ * }
+ * @param {object} contract_types_list  - list of all contracts
+ * @param {array}  unsupported_list - list of unsupported contract types
+ */
+export const getAvailableContractTypes = (contract_types_list, unsupported_list) => {
+    return Object.keys(contract_types_list)
+        .map(key => {
+            const contract_types = contract_types_list[key];
+            const available_contract_types = contract_types.filter(type =>
+                type.value &&
+                // TODO: remove this check once all contract types are supported
+                !unsupported_list.includes(type.value)
+                    ? type
+                    : undefined
+            );
+
+            if (available_contract_types.length) {
+                return {
+                    key,
+                    label: key,
+                    contract_types: available_contract_types,
+                    icon: contract_category_icon[key],
+                    component:
+                        key === localize('Multipliers') ? (
+                            <span className='dc-vertical-tab__header--new'>{localize('NEW!')}</span>
+                        ) : null,
+                };
+            }
+            return undefined;
+        })
+        .filter(Boolean);
+};
+
+/**
+ * Returns a filtered list
+ * @param {object} contract_types_list  - list of all contracts
+ * @param {array}  filtered_items_array - list of filtered contract category names and/or contract types names
+ */
+export const getFilteredList = (contract_types_list, filtered_items_array) => {
+    return Object.keys(contract_types_list)
+        .map(key => {
+            const { label, contract_types, icon } = contract_types_list[key];
+
+            const filtered_by_contract_types = contract_types.filter(c =>
+                filtered_items_array.includes(c.text.toLowerCase())
+            );
+
+            const filtered_by_contract_category = filtered_items_array.includes(label.toLowerCase());
+
+            if (filtered_by_contract_types.length) {
+                return {
+                    label,
+                    contract_types: filtered_by_contract_types,
+                    icon,
+                };
+            } else if (filtered_by_contract_category) {
+                return {
+                    label,
+                    contract_types,
+                    icon,
+                };
+            }
+            return undefined;
+        })
+        .filter(Boolean);
+};
+
+const flatten = arr => [].concat(...arr);
+/**
+ * Flatten list object into an array of contract category label and contract types names
+ * @param {object} list
+ */
+export const getContractsList = list =>
+    flatten(
+        Object.keys(list).map(
+            k => [
+                list[k].label.toLowerCase(), // contract category names
+                ...list[k].contract_types.map(c => c.text.toLowerCase()),
+            ] // contract types names
+        )
+    );
+
+export const findContractCategory = (list, item) =>
+    list.find(list_item => list_item.contract_types.some(i => i.value === item.value)) || {};
+
+export const getContractCategoryKey = (list, item) => findContractCategory(list, item).key;
+
+export const getContractTypes = (list, item) => findContractCategory(list, item).contract_types;
diff --git a/packages/reports/src/Helpers/digits.js b/packages/reports/src/Helpers/digits.js
new file mode 100644
index 000000000000..6ad31ce7e17c
--- /dev/null
+++ b/packages/reports/src/Helpers/digits.js
@@ -0,0 +1,5 @@
+const digitCategoriesMap = ['even_odd', 'match_diff', 'over_under'];
+const digitTypesMap = ['DIGITDIFF', 'DIGITMATCH', 'DIGITOVER', 'DIGITUNDER', 'DIGITEVEN', 'DIGITODD'];
+
+export const isDigitTradeType = trade_type => digitCategoriesMap.includes(trade_type);
+export const isDigitContractType = contract_type => digitTypesMap.includes(contract_type);
diff --git a/packages/reports/src/Helpers/market-underlying.js b/packages/reports/src/Helpers/market-underlying.js
index 82363678b752..e40f15c4dc0f 100644
--- a/packages/reports/src/Helpers/market-underlying.js
+++ b/packages/reports/src/Helpers/market-underlying.js
@@ -1,4 +1,4 @@
-import { getMarketNamesMap, getContractConfig } from 'Constants';
+import { getMarketNamesMap, getContractConfig } from '_common/contract';
 import { localize } from '@deriv/translations';
 
 /**
diff --git a/packages/reports/src/Stores/Modules/Contract/Constants/ui.js b/packages/reports/src/Stores/Modules/Contract/Constants/ui.js
new file mode 100644
index 000000000000..74e8e69ce7ea
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Contract/Constants/ui.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Icon } from '@deriv/components';
+import { localize } from '@deriv/translations';
+
+export const getHeaderConfig = () => ({
+    purchased: { title: localize('Contract Purchased'), icon: <Icon icon='IcTick' /> },
+    won: { title: localize('Contract Won'), icon: <Icon icon='IcContractFlag' /> },
+    lost: { title: localize('Contract Lost'), icon: <Icon icon='IcContractFlag' /> },
+});
diff --git a/packages/reports/src/Stores/Modules/Contract/Constants/validation-rules.js b/packages/reports/src/Stores/Modules/Contract/Constants/validation-rules.js
new file mode 100644
index 000000000000..fc370ac0b083
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Contract/Constants/validation-rules.js
@@ -0,0 +1,68 @@
+import { localize } from '@deriv/translations';
+import { getTotalProfit } from '@deriv/shared';
+import { getBuyPrice } from 'Stores/Modules/Contract/Helpers/logic';
+
+const getValidationRules = () => ({
+    has_contract_update_stop_loss: {
+        trigger: 'contract_update_stop_loss',
+    },
+    contract_update_stop_loss: {
+        rules: [
+            [
+                'req',
+                {
+                    condition: contract_store => !contract_store.contract_update_stop_loss,
+                    message: localize('Please enter a stop loss amount.'),
+                },
+            ],
+            [
+                'custom',
+                {
+                    func: (value, options, contract_store) => {
+                        const profit = getTotalProfit(contract_store.contract_info);
+                        return !(profit < 0 && -value > profit);
+                    },
+                    message: localize("Please enter a stop loss amount that's higher than the current potential loss."),
+                },
+            ],
+            [
+                'custom',
+                {
+                    func: (value, options, contract_store) => {
+                        const stake = getBuyPrice(contract_store);
+                        return value < stake + 1;
+                    },
+                    message: localize('Invalid stop loss. Stop loss cannot be more than stake.'),
+                },
+            ],
+        ],
+    },
+    has_contract_update_take_profit: {
+        trigger: 'contract_update_take_profit',
+    },
+    contract_update_take_profit: {
+        rules: [
+            [
+                'req',
+                {
+                    condition: contract_store => !contract_store.contract_update_take_profit,
+                    message: localize('Please enter a take profit amount.'),
+                },
+            ],
+            [
+                'custom',
+                {
+                    func: (value, options, contract_store) => {
+                        const profit = getTotalProfit(contract_store.contract_info);
+                        return !(profit > 0 && +value < profit);
+                    },
+                    message: localize(
+                        "Please enter a take profit amount that's higher than the current potential profit."
+                    ),
+                },
+            ],
+        ],
+    },
+});
+
+export default getValidationRules;
diff --git a/packages/reports/src/Stores/Modules/Contract/Helpers/__tests__/logic.js b/packages/reports/src/Stores/Modules/Contract/Helpers/__tests__/logic.js
new file mode 100644
index 000000000000..25ceec86f83e
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Contract/Helpers/__tests__/logic.js
@@ -0,0 +1,125 @@
+import { expect } from 'chai';
+import React from 'react';
+import * as Logic from '../logic';
+
+describe('logic', () => {
+    describe('isSoldBeforeStart', () => {
+        it('should return true when sell_time is before date_start', () => {
+            const contract_info = {
+                sell_time: 1000000,
+                date_start: 1000001,
+            };
+            expect(Logic.isSoldBeforeStart(contract_info)).to.eql(true);
+        });
+        it('should return true when sell_time is after date_start', () => {
+            const contract_info = {
+                sell_time: 1000000,
+                date_start: 99999,
+            };
+            expect(Logic.isSoldBeforeStart(contract_info)).to.eql(false);
+        });
+    });
+
+    describe('isStarted', () => {
+        it('should return true if contract is not forward_starting and current_spot_time is after start_time', () => {
+            const contract_info = {
+                is_forward_starting: false,
+                current_spot_time: 1000000,
+                date_start: 99999,
+            };
+            expect(Logic.isStarted(contract_info)).to.eql(true);
+        });
+        it('should return true if contract is not forward_starting and current_spot_time is before start_time', () => {
+            const contract_info = {
+                is_forward_starting: false,
+                current_spot_time: 99999,
+                date_start: 1000000,
+            };
+            expect(Logic.isStarted(contract_info)).to.eql(true);
+        });
+        it('should return true if contract is forward_starting and current_spot_time is after start_time', () => {
+            const contract_info = {
+                is_forward_starting: true,
+                current_spot_time: 1000000,
+                date_start: 99999,
+            };
+            expect(Logic.isStarted(contract_info)).to.eql(true);
+        });
+        it('should return false if contract is forward_starting and current_spot_time is before start_time', () => {
+            const contract_info = {
+                is_forward_starting: true,
+                current_spot_time: 99999,
+                date_start: 1000000,
+            };
+            expect(Logic.isStarted(contract_info)).to.eql(false);
+        });
+    });
+
+    describe('getEndTime', () => {
+        it('Should return exit tick time for tick contracts', () => {
+            const contract_info = {
+                tick_count: 5,
+                exit_tick_time: 9999999,
+                sell_time: 1000000,
+                is_expired: 1,
+                date_expiry: 8888888,
+            };
+            expect(Logic.getEndTime(contract_info)).to.eql(9999999);
+        });
+        it('Should return date expiry if sell time is after date expiry for non-tick contracts', () => {
+            const contract_info = {
+                exit_tick_time: 9999999,
+                sell_time: 8888888,
+                is_expired: 1,
+                date_expiry: 7777777,
+            };
+            expect(Logic.getEndTime(contract_info)).to.eql(7777777);
+        });
+        it('Should return exit tick time if sell time is before date expiry for non-tick contracts', () => {
+            const contract_info = {
+                exit_tick_time: 9999999,
+                sell_time: 7777777,
+                is_expired: 1,
+                date_expiry: 8888888,
+            };
+            expect(Logic.getEndTime(contract_info)).to.eql(9999999);
+        });
+        it('Should return date_expiry time for user sold contracts if sell_time is after date_expiry', () => {
+            const contract_info = {
+                date_expiry: 8888888,
+                exit_tick_time: 8888887,
+                sell_time: 8888889,
+                status: 'sold',
+            };
+            expect(Logic.getEndTime(contract_info)).to.eql(8888888);
+        });
+        it('Should return sell_time time for user sold contracts if sell_time is before date_expiry', () => {
+            const contract_info = {
+                date_expiry: 8888889,
+                exit_tick_time: 8888887,
+                sell_time: 8888888,
+                status: 'sold',
+            };
+            expect(Logic.getEndTime(contract_info)).to.eql(8888888);
+        });
+        it('Should return undefined if not sold for all contracts', () => {
+            const contract_info = {
+                exit_tick_time: 9999999,
+                sell_time: 1000000,
+                is_expired: 0,
+                date_expiry: 888888,
+            };
+            expect(Logic.getEndTime(contract_info)).to.eql(undefined);
+        });
+        it('Should return exit_tick_time if contract is_path_dependent', () => {
+            const contract_info = {
+                exit_tick_time: 9999999,
+                sell_time: 1000000,
+                is_expired: 0,
+                is_path_dependent: '1',
+                date_expiry: 888888,
+            };
+            expect(Logic.getEndTime(contract_info)).to.eql(undefined);
+        });
+    });
+});
diff --git a/packages/reports/src/Stores/Modules/Contract/Helpers/chart-marker-helpers.js b/packages/reports/src/Stores/Modules/Contract/Helpers/chart-marker-helpers.js
new file mode 100644
index 000000000000..5c358708f5a8
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Contract/Helpers/chart-marker-helpers.js
@@ -0,0 +1,116 @@
+import extend from 'extend';
+import { isMobile, isUserSold, isMultiplierContract, isDigitContract } from '@deriv/shared';
+import { getEndTime } from 'Stores/Modules/Contract/Helpers/logic';
+import { MARKER_TYPES_CONFIG } from '../../SmartChart/Constants/markers';
+
+const createMarkerConfig = (marker_type, x, y, content_config) =>
+    extend(true, {}, MARKER_TYPES_CONFIG[marker_type], {
+        marker_config: {
+            x: +x,
+            y,
+        },
+        content_config,
+    });
+
+export const getSpotCount = (contract_info, spot_count) =>
+    isDigitContract(contract_info.contract_type) ? spot_count + 1 : spot_count;
+
+// -------------------- Lines --------------------
+export const createMarkerEndTime = contract_info => {
+    const end_time = getEndTime(contract_info);
+    if (!end_time) return false;
+
+    return createMarkerConfig(MARKER_TYPES_CONFIG.LINE_END.type, +end_time, null, {
+        status: `${contract_info.profit >= 0 ? 'won' : 'lost'}`,
+        marker_config: MARKER_TYPES_CONFIG,
+    });
+};
+
+export const createMarkerPurchaseTime = contract_info => {
+    if (
+        !contract_info.purchase_time ||
+        !contract_info.date_start ||
+        +contract_info.purchase_time === +contract_info.date_start
+    )
+        return false;
+
+    return createMarkerConfig(MARKER_TYPES_CONFIG.LINE_PURCHASE.type, +contract_info.purchase_time);
+};
+
+export const createMarkerStartTime = contract_info => {
+    if (!contract_info.date_start) return false;
+
+    return createMarkerConfig(MARKER_TYPES_CONFIG.LINE_START.type, +contract_info.date_start, null, {
+        marker_config: MARKER_TYPES_CONFIG,
+    });
+};
+
+// -------------------- Spots --------------------
+export const createMarkerSpotEntry = contract_info => {
+    if (!contract_info.entry_tick_time) return false;
+
+    let marker_type = MARKER_TYPES_CONFIG.SPOT_ENTRY.type;
+    let component_props = {};
+
+    const entry_tick = contract_info.entry_tick_display_value;
+
+    const spot_has_label = isDigitContract(contract_info.contract_type);
+    if (spot_has_label) {
+        marker_type = MARKER_TYPES_CONFIG.SPOT_MIDDLE.type;
+
+        component_props = {
+            spot_value: `${entry_tick}`,
+            spot_epoch: `${contract_info.entry_tick_time}`,
+            spot_count: 1,
+        };
+    }
+
+    return createMarkerConfig(marker_type, contract_info.entry_tick_time, entry_tick, component_props);
+};
+
+export const createMarkerSpotExit = (contract_info, tick, idx) => {
+    if (!contract_info.exit_tick_time) return false;
+    const is_user_sold = isUserSold(contract_info);
+
+    let spot_count, align_label;
+    if (tick) {
+        spot_count = getSpotCount(contract_info, idx);
+        align_label = tick.align_label;
+    }
+
+    const exit_tick = contract_info.exit_tick_display_value;
+
+    const should_show_spot_exit = !is_user_sold || isMultiplierContract(contract_info.contract_type);
+
+    const marker_spot_type = should_show_spot_exit
+        ? MARKER_TYPES_CONFIG.SPOT_EXIT.type
+        : MARKER_TYPES_CONFIG.SPOT_SELL.type;
+
+    const component_props = should_show_spot_exit
+        ? {
+              spot_value: `${exit_tick}`,
+              spot_epoch: `${contract_info.exit_tick_time}`,
+              status: `${+contract_info.profit >= 0 ? 'won' : 'lost'}`,
+              align_label,
+              spot_count,
+          }
+        : {};
+
+    return createMarkerConfig(marker_spot_type, +contract_info.exit_tick_time, +exit_tick, component_props);
+};
+
+export const createMarkerSpotMiddle = (contract_info, tick, idx) => {
+    const spot_count = getSpotCount(contract_info, idx);
+    const spot = tick.tick_display_value;
+
+    const marker_config = createMarkerConfig(MARKER_TYPES_CONFIG.SPOT_MIDDLE.type, +tick.epoch, +spot, {
+        spot_value: `${spot}`,
+        spot_epoch: `${tick.epoch}`,
+        align_label: tick.align_label,
+        spot_count,
+    });
+    marker_config.type = `${marker_config.type}_${idx}`;
+
+    if (isMobile() && spot_count > 1) return null;
+    return marker_config;
+};
diff --git a/packages/reports/src/Stores/Modules/Contract/Helpers/chart-markers.js b/packages/reports/src/Stores/Modules/Contract/Helpers/chart-markers.js
new file mode 100644
index 000000000000..d1681b471b68
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Contract/Helpers/chart-markers.js
@@ -0,0 +1,89 @@
+import { unique } from '@deriv/shared';
+import {
+    createMarkerEndTime,
+    createMarkerPurchaseTime,
+    createMarkerSpotEntry,
+    createMarkerSpotExit,
+    createMarkerStartTime,
+    createMarkerSpotMiddle,
+    getSpotCount,
+} from './chart-marker-helpers';
+import { getChartType, getEndTime } from './logic';
+import { MARKER_TYPES_CONFIG } from '../../SmartChart/Constants/markers';
+
+export const createChartMarkers = contract_info => {
+    let markers = [];
+    if (contract_info) {
+        const end_time = getEndTime(contract_info);
+        const chart_type = getChartType(contract_info.date_start, end_time);
+
+        if (contract_info.tick_count) {
+            const tick_markers = createTickMarkers(contract_info);
+            markers.push(...tick_markers);
+        } else if (chart_type !== 'candle') {
+            const spot_markers = Object.keys(marker_spots).map(type => marker_spots[type](contract_info));
+            markers.push(...spot_markers);
+        }
+        const line_markers = Object.keys(marker_lines).map(type => marker_lines[type](contract_info));
+        markers.push(...line_markers);
+
+        markers = markers.filter(m => !!m);
+    }
+    markers.forEach(marker => {
+        const contract_id = contract_info.contract_id;
+        marker.react_key = `${contract_id}-${marker.type}`;
+    });
+
+    return markers;
+};
+
+const marker_spots = {
+    [MARKER_TYPES_CONFIG.SPOT_ENTRY.type]: createMarkerSpotEntry,
+    [MARKER_TYPES_CONFIG.SPOT_EXIT.type]: createMarkerSpotExit,
+};
+
+const marker_lines = {
+    [MARKER_TYPES_CONFIG.LINE_START.type]: createMarkerStartTime,
+    [MARKER_TYPES_CONFIG.LINE_END.type]: createMarkerEndTime,
+    [MARKER_TYPES_CONFIG.LINE_PURCHASE.type]: createMarkerPurchaseTime,
+};
+
+const addLabelAlignment = (tick, idx, arr) => {
+    if (idx > 0 && arr.length) {
+        const prev_tick = arr[idx - 1];
+
+        if (+tick > +prev_tick.tick) tick.align_label = 'top';
+        if (+tick.tick < +prev_tick.tick) tick.align_label = 'bottom';
+        if (+tick.tick === +prev_tick.tick) tick.align_label = prev_tick.align_label;
+    }
+
+    return tick;
+};
+
+const createTickMarkers = contract_info => {
+    const tick_stream = unique(contract_info.tick_stream, 'epoch').map(addLabelAlignment);
+    const result = [];
+
+    tick_stream.forEach((tick, idx) => {
+        const is_entry_spot = idx === 0 && +tick.epoch !== contract_info.exit_tick_time;
+        const is_middle_spot = idx > 0 && +tick.epoch !== +contract_info.exit_tick_time;
+        const is_exit_spot =
+            +tick.epoch === +contract_info.exit_tick_time ||
+            getSpotCount(contract_info, idx) === contract_info.tick_count;
+
+        let marker_config;
+        if (is_entry_spot) {
+            marker_config = createMarkerSpotEntry(contract_info);
+        } else if (is_middle_spot) {
+            marker_config = createMarkerSpotMiddle(contract_info, tick, idx);
+        } else if (is_exit_spot) {
+            tick.align_label = 'top'; // force exit spot label to be 'top' to avoid overlapping
+            marker_config = createMarkerSpotExit(contract_info, tick, idx);
+        }
+
+        if (marker_config) {
+            result.push(marker_config);
+        }
+    });
+    return result;
+};
diff --git a/packages/reports/src/Stores/Modules/Contract/Helpers/chart-notifications.js b/packages/reports/src/Stores/Modules/Contract/Helpers/chart-notifications.js
new file mode 100644
index 000000000000..c346362b7bf4
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Contract/Helpers/chart-notifications.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { localize, Localize } from '@deriv/translations';
+
+export const switch_to_tick_chart = {
+    key: 'switch_to_tick_chart',
+    header: localize('This chart display is not ideal for tick contracts'),
+    message: <Localize i18n_default_text='Please change the chart duration to tick for a better trading experience.' />,
+    type: 'info',
+};
diff --git a/packages/reports/src/Stores/Modules/Contract/Helpers/contract-type.js b/packages/reports/src/Stores/Modules/Contract/Helpers/contract-type.js
new file mode 100644
index 000000000000..ffd73b0a7112
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Contract/Helpers/contract-type.js
@@ -0,0 +1,2 @@
+export const isCallPut = trade_type =>
+    trade_type === 'rise_fall' || trade_type === 'rise_fall_equal' || trade_type === 'high_low';
diff --git a/packages/reports/src/Stores/Modules/Contract/Helpers/limit-orders.js b/packages/reports/src/Stores/Modules/Contract/Helpers/limit-orders.js
new file mode 100644
index 000000000000..069a7607b69e
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Contract/Helpers/limit-orders.js
@@ -0,0 +1,100 @@
+import { isMultiplierContract } from '@deriv/shared';
+import { BARRIER_COLORS, BARRIER_LINE_STYLES } from '../../SmartChart/Constants/barriers';
+import { ChartBarrierStore } from '../../SmartChart/chart-barrier-store';
+import { removeBarrier } from '../../SmartChart/Helpers/barriers';
+
+const isLimitOrderBarrierSupported = (contract_type, contract_info) =>
+    isMultiplierContract(contract_type) && contract_info.limit_order;
+
+export const LIMIT_ORDER_TYPES = {
+    STOP_OUT: 'stop_out',
+    TAKE_PROFIT: 'take_profit',
+    STOP_LOSS: 'stop_loss',
+};
+
+export const setLimitOrderBarriers = ({ barriers, contract_type, contract_info = {}, is_over }) => {
+    if (is_over && isLimitOrderBarrierSupported(contract_type, contract_info)) {
+        const limit_orders = Object.values(LIMIT_ORDER_TYPES);
+        const has_stop_loss = Object.keys(contract_info.limit_order).some(
+            k => k === LIMIT_ORDER_TYPES.STOP_LOSS && contract_info.limit_order[k].value
+        );
+
+        limit_orders.forEach(key => {
+            const obj_limit_order = contract_info.limit_order[key];
+
+            if (!obj_limit_order || !obj_limit_order.value) {
+                removeBarrier(barriers, key);
+                return;
+            }
+
+            let barrier = barriers.find(b => b.key === key);
+
+            if (barrier) {
+                if (barrier.high === +obj_limit_order.value) {
+                    return;
+                }
+
+                barrier.onChange({
+                    high: obj_limit_order.value,
+                });
+            } else {
+                const obj_barrier = {
+                    key,
+                    title: `${obj_limit_order.display_name}`,
+                    color: key === LIMIT_ORDER_TYPES.TAKE_PROFIT ? BARRIER_COLORS.GREEN : BARRIER_COLORS.ORANGE,
+                    draggable: false,
+                    lineStyle:
+                        key === LIMIT_ORDER_TYPES.STOP_OUT ? BARRIER_LINE_STYLES.DOTTED : BARRIER_LINE_STYLES.SOLID,
+                    hidePriceLines: has_stop_loss && key === LIMIT_ORDER_TYPES.STOP_OUT,
+                    hideOffscreenLine: true,
+                    showOffscreenArrows: true,
+                    isSingleBarrier: true,
+                    opacityOnOverlap: key === LIMIT_ORDER_TYPES.STOP_OUT && 0.15,
+                };
+                barrier = new ChartBarrierStore(obj_limit_order.value);
+
+                Object.assign(barrier, obj_barrier);
+                barriers.push(barrier);
+            }
+        });
+    } else {
+        const limit_orders = Object.values(LIMIT_ORDER_TYPES);
+        limit_orders.forEach(l => removeBarrier(barriers, l));
+    }
+};
+
+/**
+ * Get limit_order for contract_update API
+ * @param {object} contract_update - contract_update input & checkbox values
+ */
+export const getLimitOrder = contract_update => {
+    const {
+        has_contract_update_stop_loss,
+        has_contract_update_take_profit,
+        contract_update_stop_loss,
+        contract_update_take_profit,
+        contract_info,
+    } = contract_update;
+
+    const limit_order = {};
+
+    const new_take_profit = has_contract_update_take_profit ? +contract_update_take_profit : null;
+    const has_take_profit_changed =
+        Math.abs(contract_info.limit_order?.take_profit?.order_amount) !== Math.abs(new_take_profit);
+
+    if (has_take_profit_changed) {
+        // send positive take_profit to update or null cancel
+        limit_order.take_profit = new_take_profit;
+    }
+
+    const new_stop_loss = has_contract_update_stop_loss ? +contract_update_stop_loss : null;
+    const has_stop_loss_changed =
+        Math.abs(contract_info.limit_order?.stop_loss?.order_amount) !== Math.abs(new_stop_loss);
+
+    if (has_stop_loss_changed) {
+        // send positive stop_loss to update or null to cancel
+        limit_order.stop_loss = new_stop_loss;
+    }
+
+    return limit_order;
+};
diff --git a/packages/reports/src/Stores/Modules/Contract/Helpers/logic.js b/packages/reports/src/Stores/Modules/Contract/Helpers/logic.js
new file mode 100644
index 000000000000..4255dc37ec48
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Contract/Helpers/logic.js
@@ -0,0 +1,111 @@
+import moment from 'moment';
+import { isEmptyObject, isUserSold, getLimitOrderAmount } from '@deriv/shared';
+import ServerTime from '_common/base/server_time';
+
+export const getChartConfig = contract_info => {
+    if (isEmptyObject(contract_info)) return null;
+    const start = contract_info.date_start;
+    const end = getEndTime(contract_info);
+    const granularity = getChartGranularity(start, end || null);
+    const chart_type = getChartType(start, end || null);
+
+    return {
+        chart_type: contract_info.tick_count ? 'mountain' : chart_type,
+        granularity: contract_info.tick_count ? 0 : granularity,
+        end_epoch: end,
+        start_epoch: start,
+        scroll_to_epoch: contract_info.purchase_time,
+    };
+};
+
+const hour_to_granularity_map = [
+    [1, 0],
+    [2, 120],
+    [6, 600],
+    [24, 900],
+    [5 * 24, 3600],
+    [30 * 24, 14400],
+];
+
+const getExpiryTime = time => time || ServerTime.get().unix();
+
+export const getChartType = (start_time, expiry_time) => {
+    const duration = moment.duration(moment.unix(getExpiryTime(expiry_time)).diff(moment.unix(start_time))).asHours();
+    // use line chart if duration is equal or less than 1 hour
+    return duration <= 1 ? 'mountain' : 'candle';
+};
+
+export const getChartGranularity = (start_time, expiry_time) =>
+    calculateGranularity(getExpiryTime(expiry_time) - start_time);
+
+export const calculateGranularity = duration =>
+    (hour_to_granularity_map.find(m => duration <= m[0] * 3600) || [null, 86400])[1];
+
+export const isContractElapsed = (contract_info, tick) => {
+    if (isEmptyObject(tick) || isEmptyObject(contract_info)) return false;
+    const end_time = getEndTime(contract_info);
+    if (end_time && tick.epoch) {
+        const seconds = moment.duration(moment.unix(tick.epoch).diff(moment.unix(end_time))).asSeconds();
+        return seconds >= 2;
+    }
+    return false;
+};
+
+export const isEndedBeforeCancellationExpired = contract_info =>
+    !!(contract_info.cancellation && getEndTime(contract_info) < contract_info.cancellation.date_expiry);
+
+export const isSoldBeforeStart = contract_info =>
+    contract_info.sell_time && +contract_info.sell_time < +contract_info.date_start;
+
+export const isStarted = contract_info =>
+    !contract_info.is_forward_starting || contract_info.current_spot_time > contract_info.date_start;
+
+export const isUserCancelled = contract_info => contract_info.status === 'cancelled';
+
+export const isCancellationExpired = contract_info =>
+    !!(contract_info.cancellation.date_expiry < ServerTime.get().unix());
+
+export const getEndTime = contract_info => {
+    const {
+        exit_tick_time,
+        date_expiry,
+        is_expired,
+        is_path_dependent,
+        sell_time,
+        status,
+        tick_count: is_tick_contract,
+    } = contract_info;
+
+    const is_finished = is_expired && status !== 'open';
+
+    if (!is_finished && !isUserSold(contract_info) && !isUserCancelled(contract_info)) return undefined;
+
+    if (isUserSold(contract_info)) {
+        return sell_time > date_expiry ? date_expiry : sell_time;
+    } else if (!is_tick_contract && sell_time > date_expiry) {
+        return date_expiry;
+    }
+
+    return date_expiry > exit_tick_time && !+is_path_dependent ? date_expiry : exit_tick_time;
+};
+
+export const getBuyPrice = contract_store => {
+    return contract_store.contract_info.buy_price;
+};
+
+/**
+ * Set contract update form initial values
+ * @param {object} contract_update - contract_update response
+ * @param {object} limit_order - proposal_open_contract.limit_order response
+ */
+export const getContractUpdateConfig = ({ contract_update, limit_order }) => {
+    const { stop_loss, take_profit } = getLimitOrderAmount(limit_order || contract_update);
+
+    return {
+        // convert stop_loss, take_profit value to string for validation to work
+        contract_update_stop_loss: stop_loss ? Math.abs(stop_loss).toString() : '',
+        contract_update_take_profit: take_profit ? take_profit.toString() : '',
+        has_contract_update_stop_loss: !!stop_loss,
+        has_contract_update_take_profit: !!take_profit,
+    };
+};
diff --git a/packages/reports/src/Stores/Modules/Contract/Helpers/multiplier.js b/packages/reports/src/Stores/Modules/Contract/Helpers/multiplier.js
new file mode 100644
index 000000000000..21b2a8269991
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Contract/Helpers/multiplier.js
@@ -0,0 +1,40 @@
+import { connect } from 'Stores/connect';
+
+export const onToggleCancellation = ({ has_cancellation, onChangeMultiple }) => {
+    // e.target.checked is not reliable, we have to toggle its previous value
+    const new_val = !has_cancellation;
+    onChangeMultiple({
+        has_cancellation: new_val,
+        ...(!new_val
+            ? {
+                  // reset deal cancellation price
+                  cancellation_price: undefined,
+              }
+            : {
+                  // unchecked Stop loss
+                  has_stop_loss: false,
+                  has_take_profit: false,
+              }),
+    });
+};
+
+export const onChangeCancellationDuration = ({ event, onChangeMultiple }) => {
+    const { value } = event.target;
+    onChangeMultiple({
+        has_cancellation: true,
+        has_take_profit: false,
+        has_stop_loss: false,
+        cancellation_duration: value,
+    });
+};
+
+// eslint-disable-next-line no-empty-pattern
+export const connectWithContractUpdate = connect(({}, { contract = {} }) => {
+    return {
+        validation_errors: contract.validation_errors,
+        contract_update_take_profit: contract.contract_update_take_profit,
+        contract_update_stop_loss: contract.contract_update_stop_loss,
+        has_contract_update_take_profit: contract.has_contract_update_take_profit,
+        has_contract_update_stop_loss: contract.has_contract_update_stop_loss,
+    };
+});
diff --git a/packages/reports/src/Stores/Modules/Contract/contract-replay-store.js b/packages/reports/src/Stores/Modules/Contract/contract-replay-store.js
new file mode 100644
index 000000000000..a3150859cf5f
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Contract/contract-replay-store.js
@@ -0,0 +1,291 @@
+import { action, observable } from 'mobx';
+import { routes, isEmptyObject, isForwardStarting, WS } from '@deriv/shared';
+import { localize } from '@deriv/translations';
+import ContractStore from './contract-store';
+import { contractCancelled, contractSold } from '../Portfolio/Helpers/portfolio-notifications';
+import BaseStore from '../../base-store';
+
+export default class ContractReplayStore extends BaseStore {
+    @observable chart_state = '';
+    @observable contract_store = { contract_info: {} };
+    // --- Observable properties ---
+    @observable is_market_closed = false;
+    @observable is_sell_requested = false;
+    @observable has_error = false;
+    @observable error_message = '';
+    @observable error_code = '';
+    @observable is_chart_loading = true;
+    @observable is_chart_scaling = false;
+    @observable is_forward_starting = false;
+    // ---- chart props
+    @observable margin;
+
+    // ---- Replay Contract Config ----
+    @observable contract_id;
+    @observable indicative_status;
+    @observable.ref contract_info = observable.object({});
+    @observable is_static_chart = false;
+
+    // ---- Normal properties ---
+    is_ongoing_contract = false;
+    prev_indicative = 0;
+
+    @observable.ref contract_update = observable.object({});
+    // TODO: you view a contract and then share that link with another person,
+    // when the person opens, try to switch account they get the error
+    // Forget old proposal_open_contract stream on account switch from ErrorComponent
+    should_forget_first = false;
+
+    // -------------------
+    // ----- Actions -----
+    // -------------------
+    handleSubscribeProposalOpenContract = async (contract_id, cb) => {
+        // expired contracts are cached and we can get the poc response from local storage
+        const is_cached = await WS.storage.has({ proposal_open_contract: 1, contract_id });
+        if (is_cached) {
+            WS.storage.proposalOpenContract({ contract_id }).then(cb);
+            return;
+        }
+
+        if (this.should_forget_first) {
+            // TODO; don't forget all ever
+            await WS.forgetAll('proposal_open_contract');
+            this.should_forget_first = false;
+        }
+
+        this.subscriber = WS.subscribeProposalOpenContract(contract_id, cb);
+    };
+
+    subscribeProposalOpenContract = () => {
+        WS.wait('authorize').then(() => {
+            this.handleSubscribeProposalOpenContract(this.contract_id, this.populateConfig);
+        });
+    };
+
+    @action.bound
+    onMount(contract_id) {
+        if (contract_id) {
+            this.contract_id = contract_id;
+            this.contract_store = new ContractStore(this.root_store, { contract_id });
+            this.subscribeProposalOpenContract();
+            WS.storage.activeSymbols('brief');
+            WS.setOnReconnect(() => {
+                if (!this.root_store.client.is_switching) {
+                    this.subscribeProposalOpenContract();
+                }
+            });
+        }
+    }
+
+    @action.bound
+    onUnmount() {
+        this.forgetProposalOpenContract(this.contract_id, this.populateConfig);
+        this.contract_id = null;
+        this.is_ongoing_contract = false;
+        this.is_static_chart = false;
+        this.is_chart_loading = true;
+        this.contract_info = {};
+        this.indicative_status = null;
+        this.prev_indicative = 0;
+        this.chart_state = '';
+        this.root_store.ui.toggleHistoryTab(false);
+        WS.removeOnReconnect();
+    }
+
+    @action.bound
+    populateConfig(response) {
+        if (!this.switch_account_listener) return;
+
+        if ('error' in response) {
+            const { code, message } = response.error;
+            this.has_error = true;
+            this.is_chart_loading = false;
+            this.error_message = message;
+            this.error_code = code;
+            return;
+        }
+        if (isEmptyObject(response.proposal_open_contract)) {
+            this.has_error = true;
+            this.error_message = localize(
+                "Sorry, you can't view this contract because it doesn't belong to this account."
+            );
+            this.should_forget_first = true;
+            this.is_chart_loading = false;
+            return;
+        }
+        if (+response.proposal_open_contract.contract_id !== this.contract_id) return;
+
+        this.contract_info = response.proposal_open_contract;
+        this.contract_update = response.proposal_open_contract.limit_order;
+
+        // Add indicative status for contract
+        const prev_indicative = this.prev_indicative;
+        const new_indicative = +this.contract_info.bid_price;
+        if (new_indicative > prev_indicative) {
+            this.indicative_status = 'profit';
+        } else if (new_indicative < prev_indicative) {
+            this.indicative_status = 'loss';
+        } else {
+            this.indicative_status = null;
+        }
+        this.prev_indicative = new_indicative;
+
+        const is_forward_starting =
+            !!this.contract_info.is_forward_starting ||
+            isForwardStarting(this.contract_info.shortcode, this.contract_info.purchase_time);
+
+        this.is_forward_starting = is_forward_starting;
+
+        // update the contract_store here passing contract_info
+        this.contract_store.populateConfig(this.contract_info);
+
+        const end_time = this.contract_store.end_time;
+
+        this.updateMargin((end_time || this.contract_info.date_expiry) - this.contract_info.date_start);
+
+        if (!end_time) this.is_ongoing_contract = true;
+
+        // finish contracts if end_time exists
+        if (end_time) {
+            if (!this.is_ongoing_contract) {
+                this.is_static_chart = true;
+            } else {
+                this.is_static_chart = false;
+            }
+        }
+
+        if (this.contract_info.is_sold) {
+            this.contract_store.cacheProposalOpenContractResponse(response);
+        }
+    }
+
+    @action.bound
+    updateMargin(duration) {
+        const granularity = this.contract_store.contract_config.granularity;
+
+        this.margin = Math.floor(!granularity ? Math.max(300, (30 * duration) / (60 * 60) || 0) : 3 * granularity);
+    }
+
+    @action.bound
+    chartStateChange(state, option) {
+        this.chart_state = state;
+        const market_close_prop = 'isClosed';
+
+        // SmartChart has a weird interaction for getting scale 1:1,
+        // the process of loading an expired contract should follow this,
+        // show loading, first load the chart, then add the endEpoch then request for
+        // scale 1:1 and then wait till chart perform the scale 1:1 then
+        // hide the loading.
+        switch (state) {
+            case 'INITIAL':
+                this.is_chart_scaling = false;
+                // this is for deriv resizing from desktop to mobile,
+                // that show the loading till the chart reflect complete
+                if (!this.is_chart_loading) this.is_chart_loading = true;
+                break;
+            case 'READY':
+                setTimeout(
+                    action(() => (this.is_chart_scaling = true)),
+                    10
+                );
+                break;
+            case 'SCROLL_TO_LEFT':
+                // this Delay is for when the chart try to sacle 1:1 and we want to hide
+                // scale 1:1 jumping from the user
+                setTimeout(
+                    action(() => {
+                        this.is_chart_loading = false;
+                    }),
+                    20
+                );
+                break;
+            case 'MARKET_STATE_CHANGE':
+                if (option && market_close_prop in option) {
+                    this.is_market_closed = option[market_close_prop];
+                }
+                break;
+            default:
+        }
+    }
+
+    @action.bound
+    onClickCancel(contract_id) {
+        if (contract_id) {
+            WS.cancelContract(contract_id).then(response => {
+                if (response.error) {
+                    this.root_store.common.setServicesError({
+                        type: response.msg_type,
+                        ...response.error,
+                    });
+                } else {
+                    this.root_store.notifications.addNotificationMessage(contractCancelled());
+                }
+            });
+        }
+    }
+
+    @action.bound
+    onClickSell(contract_id) {
+        const { bid_price } = this.contract_info;
+        if (contract_id && bid_price) {
+            this.is_sell_requested = true;
+            WS.sell(contract_id, bid_price).then(this.handleSell);
+        }
+    }
+
+    @action.bound
+    handleSell(response) {
+        if (response.error) {
+            // If unable to sell due to error, give error via pop up if not in contract mode
+            this.is_sell_requested = false;
+            this.root_store.common.setServicesError({
+                type: response.msg_type,
+                ...response.error,
+            });
+        } else if (!response.error && response.sell) {
+            this.is_sell_requested = false;
+            // update contract store sell info after sell
+            this.sell_info = {
+                sell_price: response.sell.sold_for,
+                transaction_id: response.sell.transaction_id,
+            };
+            this.root_store.notifications.addNotificationMessage(
+                contractSold(this.root_store.client.currency, response.sell.sold_for)
+            );
+        }
+    }
+
+    forgetProposalOpenContract = () => {
+        if (this.subscriber) {
+            this.subscriber.unsubscribe();
+            delete this.subscriber;
+        }
+    };
+
+    @action.bound
+    removeErrorMessage() {
+        this.error_message = '';
+        this.has_error = false;
+    }
+
+    setAccountSwitcherListener = (contract_id, history) => {
+        this.onSwitchAccount(() => this.accountSwitcherListener(contract_id, history));
+    };
+
+    accountSwitcherListener = (contract_id, history) => {
+        // if contract had an error on the previous account
+        // try fetching it again for the new account
+        // in case it belongs to this account
+        if (this.has_error) {
+            this.removeErrorMessage();
+            this.onMount(contract_id);
+        } else {
+            history.push(routes.reports);
+        }
+        return Promise.resolve();
+    };
+
+    removeAccountSwitcherListener = () => {
+        this.disposeSwitchAccount();
+    };
+}
diff --git a/packages/reports/src/Stores/Modules/Contract/contract-store.js b/packages/reports/src/Stores/Modules/Contract/contract-store.js
new file mode 100644
index 000000000000..94f5bfe8457a
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Contract/contract-store.js
@@ -0,0 +1,311 @@
+import { action, extendObservable, observable, toJS } from 'mobx';
+import {
+    isEnded,
+    isEqualObject,
+    isMultiplierContract,
+    isDigitContract,
+    getDigitInfo,
+    getDisplayStatus,
+    WS,
+} from '@deriv/shared';
+import { createChartMarkers } from './Helpers/chart-markers';
+import { setLimitOrderBarriers, getLimitOrder } from './Helpers/limit-orders';
+import { getChartConfig, getContractUpdateConfig, getEndTime } from './Helpers/logic';
+import getValidationRules from './Constants/validation-rules';
+import BaseStore from '../../base-store';
+import { BARRIER_COLORS, BARRIER_LINE_STYLES } from '../SmartChart/Constants/barriers';
+import { isBarrierSupported } from '../SmartChart/Helpers/barriers';
+import { ChartBarrierStore } from '../SmartChart/chart-barrier-store';
+
+export default class ContractStore extends BaseStore {
+    constructor(root_store, { contract_id }) {
+        super({
+            root_store,
+            validation_rules: getValidationRules(),
+        });
+
+        this.root_store = root_store;
+        this.contract_id = contract_id;
+    }
+
+    // --- Observable properties ---
+    @observable digits_info = observable.object({});
+    @observable sell_info = observable.object({});
+
+    @observable.ref contract_config = {};
+    @observable display_status = 'purchased';
+    @observable is_ended = false;
+    @observable is_digit_contract = false;
+
+    // TODO: see how to handle errors.
+    @observable error_message = '';
+
+    @observable.ref contract_info = observable.object({});
+
+    @observable is_static_chart = false;
+    @observable end_time = null;
+
+    // Multiplier contract update config
+    @observable contract_update_take_profit = '';
+    @observable contract_update_stop_loss = '';
+    @observable has_contract_update_take_profit = false;
+    @observable has_contract_update_stop_loss = false;
+    @observable.ref contract_update_history = [];
+    contract_update_config = {};
+
+    // ---- chart props
+    @observable margin;
+    @observable.shallow barriers_array = [];
+    @observable.shallow markers_array = [];
+    @observable.ref marker = null;
+
+    // ---- Normal properties ---
+    is_ongoing_contract = false;
+
+    @action.bound
+    populateConfig(contract_info) {
+        const prev_contract_info = this.contract_info;
+        this.contract_info = contract_info;
+        this.end_time = getEndTime(this.contract_info);
+
+        // TODO: don't update the barriers & markers if they are not changed
+        this.updateBarriersArray(contract_info, this.root_store.ui.is_dark_mode_on);
+        this.markers_array = createChartMarkers(this.contract_info);
+        this.marker = calculate_marker(this.contract_info);
+
+        this.contract_config = getChartConfig(this.contract_info);
+        this.display_status = getDisplayStatus(this.contract_info);
+        this.is_ended = isEnded(this.contract_info);
+        this.is_digit_contract = isDigitContract(this.contract_info.contract_type);
+        // API doesn't return barrier for digit contracts (sometimes), remove this check once resolved
+        if (!this.contract_info.barrier && prev_contract_info.barrier && this.is_digit_contract) {
+            this.contract_info.barrier = prev_contract_info.barrier;
+        }
+
+        if (this.is_digit_contract) {
+            extendObservable(this.digits_info, getDigitInfo(this.digits_info, this.contract_info));
+        }
+
+        // force to sell the expired contract, in order to remove from portfolio
+        if (+contract_info.is_settleable === 1 && !contract_info.is_sold) {
+            WS.send({ sell_expired: 1 });
+        }
+
+        const is_multiplier = isMultiplierContract(this.contract_info.contract_type);
+
+        if (is_multiplier && contract_info.contract_id && contract_info.limit_order) {
+            this.populateContractUpdateConfig(this.contract_info);
+        }
+    }
+
+    cacheProposalOpenContractResponse = response => {
+        const { contract_id } = response.proposal_open_contract;
+        WS.storage.set({ proposal_open_contract: 1, contract_id }, response);
+    };
+
+    @action.bound
+    populateContractUpdateConfig(response) {
+        const contract_update_config = getContractUpdateConfig(response);
+        if (!isEqualObject(this.contract_update_config, contract_update_config)) {
+            Object.assign(this, contract_update_config);
+            this.contract_update_config = contract_update_config;
+
+            const { contract_update, error } = response;
+            if (contract_update && !error) {
+                this.contract_info.limit_order = Object.assign(this.contract_info.limit_order || {}, contract_update);
+            }
+        }
+    }
+
+    @action.bound
+    populateContractUpdateHistory({ contract_update_history }) {
+        this.root_store.modules.contract_replay.contract_store.contract_update_history = contract_update_history.sort(
+            (a, b) => b.order_date - a.order_date
+        );
+    }
+
+    updateBarriersArray(contract_info, is_dark_mode) {
+        if (!this.barriers_array.length) {
+            this.barriers_array = this.createBarriersArray(contract_info, is_dark_mode);
+            return;
+        }
+
+        const main_barrier = this.barriers_array[0];
+        if (contract_info) {
+            const { contract_type, barrier, high_barrier, low_barrier } = contract_info;
+
+            if (isBarrierSupported(contract_type) && (barrier || high_barrier)) {
+                main_barrier.updateBarriers(barrier || high_barrier, low_barrier);
+                main_barrier.updateBarrierColor(is_dark_mode);
+            }
+            if (
+                contract_info.contract_id &&
+                contract_info.contract_id === this.root_store.modules.contract_replay.contract_id
+            ) {
+                setLimitOrderBarriers({
+                    barriers: this.barriers_array,
+                    contract_info,
+                    contract_type,
+                    is_over: true,
+                });
+            }
+        }
+    }
+
+    createBarriersArray = (contract_info, is_dark_mode) => {
+        let barriers = [];
+        if (contract_info) {
+            const { contract_type, barrier, entry_spot, high_barrier, low_barrier } = contract_info;
+
+            if (isBarrierSupported(contract_type) && (barrier || high_barrier || entry_spot)) {
+                // create barrier only when it's available in response
+                const main_barrier = new ChartBarrierStore(barrier || high_barrier || entry_spot, low_barrier, null, {
+                    color: is_dark_mode ? BARRIER_COLORS.DARK_GRAY : BARRIER_COLORS.GRAY,
+                    line_style: BARRIER_LINE_STYLES.SOLID,
+                    not_draggable: true,
+                });
+
+                main_barrier.updateBarrierShade(true, contract_type);
+                barriers = [main_barrier];
+            }
+        }
+        return barriers;
+    };
+
+    @action.bound
+    clearContractUpdateConfigValues() {
+        Object.assign(this, getContractUpdateConfig(this.contract_info));
+        this.validation_errors.contract_update_stop_loss = [];
+        this.validation_errors.contract_update_take_profit = [];
+    }
+
+    @action.bound
+    onChange({ name, value }) {
+        this[name] = value;
+        this.validateProperty(name, this[name]);
+    }
+
+    @action.bound
+    updateLimitOrder() {
+        const limit_order = getLimitOrder(this);
+
+        WS.contractUpdate(this.contract_id, limit_order).then(response => {
+            if (response.error) {
+                this.root_store.common.setServicesError({
+                    type: response.msg_type,
+                    ...response.error,
+                });
+                return;
+            }
+
+            // Update contract store
+            this.populateContractUpdateConfig(response);
+            if (this.root_store.ui.is_history_tab_active) {
+                WS.contractUpdateHistory(this.contract_id).then(this.populateContractUpdateHistory);
+            }
+
+            // Update portfolio store
+            this.root_store.modules.portfolio.populateContractUpdate(response, this.contract_id);
+        });
+    }
+}
+
+function calculate_marker(contract_info) {
+    if (!contract_info || isMultiplierContract(contract_info.contract_type)) {
+        return null;
+    }
+    const {
+        transaction_ids,
+        tick_stream,
+        contract_id,
+        date_start,
+        date_expiry,
+        entry_tick,
+        exit_tick,
+        entry_tick_time,
+        exit_tick_time,
+        contract_type,
+        tick_count,
+        barrier_count,
+        barrier,
+        high_barrier,
+        low_barrier,
+    } = contract_info;
+    const ticks_epoch_array = tick_stream ? tick_stream.map(t => t.epoch) : [];
+    const is_digit_contract = isDigitContract(contract_type);
+
+    // window.ci = toJS(contract_info);
+
+    let price_array = [];
+    if (is_digit_contract) {
+        price_array = [];
+    } else if (+barrier_count === 1 && barrier) {
+        price_array = [+barrier];
+    } else if (+barrier_count === 2 && high_barrier && low_barrier) {
+        price_array = [+low_barrier, +high_barrier];
+    }
+
+    if (entry_tick) {
+        price_array.push(entry_tick);
+    }
+    if (exit_tick) {
+        price_array.push(exit_tick);
+    }
+
+    if (!date_start) {
+        return null;
+    }
+    // if we have not yet received the first POC response
+    if (!transaction_ids) {
+        const type = is_digit_contract ? 'DigitContract' : 'TickContract';
+        return {
+            type,
+            contract_info: toJS(contract_info),
+            key: `${contract_id}-date_start`,
+            epoch_array: [date_start],
+            price_array,
+        };
+    }
+
+    if (tick_count >= 1) {
+        if (!isDigitContract(contract_type)) {
+            // TickContract
+            return {
+                contract_info: toJS(contract_info),
+                type: 'TickContract',
+                key: `${contract_id}-date_start`,
+                epoch_array: [date_start, ...ticks_epoch_array],
+                price_array,
+            };
+        }
+        // DigitContract
+        return {
+            contract_info: toJS(contract_info),
+            type: 'DigitContract',
+            key: `${contract_id}-date_start`,
+            epoch_array: [date_start, ...ticks_epoch_array],
+            price_array,
+        };
+    }
+    // NonTickContract
+    if (!tick_count) {
+        // getEndTime returns undefined when contract is running.
+        const end_time = getEndTime(contract_info) || date_expiry;
+        // the order of items in epoch_array matches the NonTickContract params.
+        const epoch_array = [date_start, end_time];
+        if (entry_tick_time) {
+            epoch_array.push(entry_tick_time);
+        }
+        if (exit_tick_time) {
+            epoch_array.push(exit_tick_time);
+        }
+        return {
+            contract_info: toJS(contract_info),
+            type: 'NonTickContract',
+            key: `${contract_id}-date_start`,
+            epoch_array,
+            price_array,
+        };
+    }
+    return null;
+}
diff --git a/packages/reports/src/Stores/Modules/Contract/contract-trade-store.js b/packages/reports/src/Stores/Modules/Contract/contract-trade-store.js
new file mode 100644
index 000000000000..a859122f4519
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Contract/contract-trade-store.js
@@ -0,0 +1,195 @@
+import { action, computed, observable, toJS } from 'mobx';
+import { isDesktop, isEnded, isMultiplierContract, LocalStore } from '@deriv/shared';
+import { switch_to_tick_chart } from './Helpers/chart-notifications';
+import ContractStore from './contract-store';
+import { isCallPut } from './Helpers/contract-type';
+import { getContractTypesConfig } from '../Trading/Constants/contract';
+import BaseStore from '../../base-store';
+
+export default class ContractTradeStore extends BaseStore {
+    // --- Observable properties ---
+    @observable.shallow contracts = [];
+    contracts_map = {};
+    @observable has_error = false;
+    @observable error_message = '';
+
+    // Chart specific observables
+    @observable granularity = +LocalStore.get('contract_trade.granularity') || 0;
+    @observable chart_type = LocalStore.get('contract_trade.chart_type') || 'mountain';
+
+    constructor({ root_store }) {
+        super({
+            root_store,
+        });
+
+        this.onSwitchAccount(this.accountSwitchListener);
+    }
+
+    // -------------------
+    // ----- Actions -----
+    // -------------------
+
+    @action.bound
+    updateChartType(type) {
+        LocalStore.set('contract_trade.chart_type', type);
+        this.chart_type = type;
+    }
+
+    @action.bound
+    updateGranularity(granularity) {
+        const tick_chart_types = ['mountain', 'line', 'colored_line', 'spline', 'baseline'];
+        if (granularity === 0 && tick_chart_types.indexOf(this.chart_type) === -1) {
+            this.chart_type = 'mountain';
+        }
+        LocalStore.set('contract_trade.granularity', granularity);
+        this.granularity = granularity;
+        if (this.granularity === 0) {
+            this.root_store.notifications.removeNotificationMessage(switch_to_tick_chart);
+        }
+    }
+
+    applicable_contracts = () => {
+        const { symbol: underlying, contract_type: trade_type } = this.root_store.modules.trade;
+        if (!trade_type || !underlying) {
+            return [];
+        }
+        let { trade_types } = getContractTypesConfig()[trade_type];
+        const is_call_put = isCallPut(trade_type);
+        if (is_call_put) {
+            // treat CALLE/PUTE and CALL/PUT the same
+            trade_types = ['CALLE', 'PUTE', 'CALL', 'PUT'];
+        }
+        return this.contracts
+            .filter(c => c.contract_info.underlying === underlying)
+            .filter(c => {
+                const info = c.contract_info;
+                const has_multiplier_contract_ended =
+                    isMultiplierContract(info.contract_type) && isEnded(c.contract_info);
+                // filter multiplier contract which has ended
+                return !has_multiplier_contract_ended;
+            })
+            .filter(c => {
+                const info = c.contract_info;
+
+                const trade_type_is_supported = trade_types.indexOf(info.contract_type) !== -1;
+                // both high_low & rise_fall have the same contract_types in POC response
+                // entry_spot=barrier means it is rise_fall contract (blame the api)
+                if (trade_type_is_supported && info.barrier && info.entry_tick && is_call_put) {
+                    if (`${+info.entry_tick}` === `${+info.barrier}`) {
+                        return trade_type === 'rise_fall' || trade_type === 'rise_fall_equal';
+                    }
+                    return trade_type === 'high_low';
+                }
+                return trade_type_is_supported;
+            });
+    };
+
+    @computed
+    get markers_array() {
+        const markers = this.applicable_contracts()
+            .map(c => c.marker)
+            .filter(m => m)
+            .map(m => toJS(m));
+        if (markers.length) {
+            markers[markers.length - 1].is_last_contract = true;
+        }
+        return markers;
+    }
+
+    @action.bound
+    addContract({
+        barrier,
+        contract_id,
+        contract_type,
+        start_time,
+        longcode,
+        underlying,
+        is_tick_contract,
+        limit_order = {},
+    }) {
+        const contract_exists = this.contracts_map[contract_id];
+        if (contract_exists) {
+            return;
+        }
+
+        const contract = new ContractStore(this.root_store, { contract_id });
+        contract.populateConfig({
+            date_start: start_time,
+            barrier,
+            contract_type,
+            longcode,
+            underlying,
+            limit_order,
+        });
+
+        this.contracts.push(contract);
+        this.contracts_map[contract_id] = contract;
+
+        if (is_tick_contract && !this.root_store.modules.trade.is_multiplier && this.granularity !== 0 && isDesktop()) {
+            this.root_store.notifications.addNotificationMessage(switch_to_tick_chart);
+        }
+    }
+
+    @action.bound
+    removeContract({ contract_id }) {
+        this.contracts = this.contracts.filter(c => c.contract_id !== contract_id);
+        delete this.contracts_map[contract_id];
+    }
+
+    @action.bound
+    accountSwitchListener() {
+        if (this.has_error) {
+            this.clearError();
+        }
+
+        return Promise.resolve();
+    }
+
+    @action.bound
+    onUnmount() {
+        this.disposeSwitchAccount();
+        // TODO: don't forget the tick history when switching to contract-replay-store
+    }
+
+    // Called from portfolio
+    @action.bound
+    updateProposal(response) {
+        if ('error' in response) {
+            this.has_error = true;
+            this.error_message = response.error.message;
+            return;
+        }
+        // Update the contract-store corresponding to this POC
+        if (response.proposal_open_contract) {
+            const contract_id = +response.proposal_open_contract.contract_id;
+            const contract = this.contracts_map[contract_id];
+            contract.populateConfig(response.proposal_open_contract);
+            if (response.proposal_open_contract.is_sold) {
+                this.root_store.notifications.removeNotificationMessage(switch_to_tick_chart);
+                contract.cacheProposalOpenContractResponse(response);
+            }
+        }
+    }
+
+    @computed
+    get last_contract() {
+        const applicable_contracts = this.applicable_contracts();
+        const length = applicable_contracts.length;
+        return length > 0 ? applicable_contracts[length - 1] : {};
+    }
+
+    @action.bound
+    clearError() {
+        this.error_message = '';
+        this.has_error = false;
+    }
+
+    @action.bound
+    getContractById(contract_id) {
+        return (
+            this.contracts_map[contract_id] ||
+            // or get contract from contract_replay store when user is on the contract details page
+            this.root_store.modules.contract_replay.contract_store
+        );
+    }
+}
diff --git a/packages/reports/src/Stores/Modules/Portfolio/Helpers/format-response.js b/packages/reports/src/Stores/Modules/Portfolio/Helpers/format-response.js
index 7bc0836efa20..5128b9e61cb0 100644
--- a/packages/reports/src/Stores/Modules/Portfolio/Helpers/format-response.js
+++ b/packages/reports/src/Stores/Modules/Portfolio/Helpers/format-response.js
@@ -1,6 +1,7 @@
-import { getUnsupportedContracts } from 'Constants';
+import { getUnsupportedContracts } from '../../../../_common/contract';
 import { getSymbolDisplayName } from 'Stores/Modules/Trading/Helpers/active-symbols';
-import { getMarketInformation } from 'Modules/Reports/Helpers/market-underlying';
+
+import { getMarketInformation } from 'Helpers/market-underlying';
 
 const isUnSupportedContract = portfolio_pos =>
     !!getUnsupportedContracts()[portfolio_pos.contract_type] || // check unsupported contract type
diff --git a/packages/reports/src/Stores/Modules/Profit/Helpers/format-response.js b/packages/reports/src/Stores/Modules/Profit/Helpers/format-response.js
index db7e776c2249..92a550f0877e 100644
--- a/packages/reports/src/Stores/Modules/Profit/Helpers/format-response.js
+++ b/packages/reports/src/Stores/Modules/Profit/Helpers/format-response.js
@@ -1,7 +1,7 @@
 import { formatMoney, toMoment } from '@deriv/shared';
 
-import { getMarketInformation } from '../../../../Modules/Reports/Helpers/market-underlying';
-import { getSymbolDisplayName } from '../../Trading/Helpers/active-symbols';
+import { getMarketInformation } from 'Helpers/market-underlying';
+import { getSymbolDisplayName } from 'Stores/Modules/Trading/Helpers/active-symbols';
 
 export const formatProfitTableTransactions = (transaction, currency, active_symbols = []) => {
     const format_string = 'DD MMM YYYY HH:mm:ss';
diff --git a/packages/reports/src/Stores/Modules/SmartChart/Constants/barriers.js b/packages/reports/src/Stores/Modules/SmartChart/Constants/barriers.js
new file mode 100644
index 000000000000..353ef635b148
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/SmartChart/Constants/barriers.js
@@ -0,0 +1,36 @@
+export const CONTRACT_SHADES = {
+    CALL: 'ABOVE',
+    PUT: 'BELOW',
+    CALLE: 'ABOVE',
+    PUTE: 'BELOW',
+    EXPIRYRANGE: 'BETWEEN',
+    EXPIRYMISS: 'OUTSIDE',
+    RANGE: 'BETWEEN',
+    UPORDOWN: 'OUTSIDE',
+    ONETOUCH: 'NONE_SINGLE', // no shade
+    NOTOUCH: 'NONE_SINGLE', // no shade
+    ASIANU: 'ABOVE',
+    ASIAND: 'BELOW',
+    MULTUP: 'ABOVE',
+    MULTDOWN: 'BELOW',
+};
+
+// Default non-shade according to number of barriers
+export const DEFAULT_SHADES = {
+    1: 'NONE_SINGLE',
+    2: 'NONE_DOUBLE',
+};
+
+export const BARRIER_COLORS = {
+    GREEN: '#4bb4b3',
+    RED: '#ec3f3f',
+    ORANGE: '#ff6444',
+    GRAY: '#999999',
+    DARK_GRAY: '#6E6E6E',
+};
+
+export const BARRIER_LINE_STYLES = {
+    DASHED: 'dashed',
+    DOTTED: 'dotted',
+    SOLID: 'solid',
+};
diff --git a/packages/reports/src/Stores/Modules/SmartChart/Constants/markers.js b/packages/reports/src/Stores/Modules/SmartChart/Constants/markers.js
new file mode 100644
index 000000000000..987f95e37c48
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/SmartChart/Constants/markers.js
@@ -0,0 +1,59 @@
+import { localize } from '@deriv/translations';
+import MarkerLine from 'Modules/SmartChart/Components/Markers/marker-line.jsx';
+import MarkerSpotLabel from 'Modules/SmartChart/Components/Markers/marker-spot-label.jsx';
+import MarkerSpot from 'Modules/SmartChart/Components/Markers/marker-spot.jsx';
+
+export const MARKER_TYPES_CONFIG = {
+    LINE_END: {
+        type: 'LINE_END',
+        marker_config: {
+            ContentComponent: MarkerLine,
+            className: 'chart-marker-line',
+        },
+        content_config: { line_style: 'dash', label: localize('End Time') },
+    },
+    LINE_PURCHASE: {
+        type: 'LINE_PURCHASE',
+        marker_config: {
+            ContentComponent: MarkerLine,
+            className: 'chart-marker-line',
+        },
+        content_config: { line_style: 'solid', label: localize('Purchase Time') },
+    },
+    LINE_START: {
+        type: 'LINE_START',
+        marker_config: {
+            ContentComponent: MarkerLine,
+            className: 'chart-marker-line',
+        },
+        content_config: { line_style: 'solid', label: localize('Start Time') },
+    },
+    SPOT_ENTRY: {
+        type: 'SPOT_ENTRY',
+        marker_config: {
+            ContentComponent: MarkerSpot,
+        },
+        content_config: { className: 'chart-spot__entry' },
+    },
+    SPOT_SELL: {
+        type: 'SPOT_SELL',
+        marker_config: {
+            ContentComponent: MarkerSpot,
+        },
+        content_config: { className: 'chart-spot__sell' },
+    },
+    SPOT_EXIT: {
+        type: 'SPOT_EXIT',
+        marker_config: {
+            ContentComponent: MarkerSpotLabel,
+        },
+        content_config: { spot_className: 'chart-spot__spot' },
+    },
+    SPOT_MIDDLE: {
+        type: 'SPOT_MIDDLE',
+        marker_config: {
+            ContentComponent: MarkerSpotLabel,
+        },
+        content_config: { spot_className: 'chart-spot__spot' },
+    },
+};
diff --git a/packages/reports/src/Stores/Modules/SmartChart/Helpers/__tests__/barriers.js b/packages/reports/src/Stores/Modules/SmartChart/Helpers/__tests__/barriers.js
new file mode 100644
index 000000000000..4ba4566132aa
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/SmartChart/Helpers/__tests__/barriers.js
@@ -0,0 +1,59 @@
+import { expect } from 'chai';
+import React from 'react';
+import * as Barriers from '../barriers';
+
+describe('Barriers', () => {
+    describe('isBarrierSupported', () => {
+        it('should return false when barrier is not in CONTRACT_SHADES', () => {
+            expect(Barriers.isBarrierSupported('SomeThinMadeUp')).to.eql(false);
+        });
+        it('should return true when barrier is in CONTRACT_SHADES', () => {
+            expect(Barriers.isBarrierSupported('CALL')).to.eql(true);
+        });
+    });
+
+    describe('barriersToString', () => {
+        it('should convert non-zero barriers which do not have +/- to string consisting of them without +/- while is_relative is false', () => {
+            expect(Barriers.barriersToString(false, 10, 15)).to.deep.eql(['10', '15']);
+        });
+        it('should convert values without +/- and zero to string consisting of them without +/- while is_relative is false', () => {
+            expect(Barriers.barriersToString(false, 0, 15)).to.deep.eql(['0', '15']);
+        });
+        it('should convert barriers which have +/- to string consisting of them without +/- while is_relative is false', () => {
+            expect(Barriers.barriersToString(false, +11, 15)).to.deep.eql(['11', '15']);
+        });
+        it('should convert barriers which have +/- to string consisting of them with +/- while is_relative is true', () => {
+            expect(Barriers.barriersToString(true, +11, +15)).to.deep.eql(['+11', '+15']);
+        });
+    });
+
+    describe('barriersObjectToArray', () => {
+        const main = {
+            color: 'green',
+            draggable: false,
+        };
+        it('should return an array from values in barriers object', () => {
+            const barriers = {
+                main,
+            };
+            expect(Barriers.barriersObjectToArray(barriers, [])).to.deep.eql([
+                {
+                    color: 'green',
+                    draggable: false,
+                },
+            ]);
+        });
+        it('should return an array from values in barriers object (empty values should be filtered out)', () => {
+            const barriers = {
+                main,
+                somethingEmpty: {},
+            };
+            expect(Barriers.barriersObjectToArray(barriers, [])).to.deep.eql([
+                {
+                    color: 'green',
+                    draggable: false,
+                },
+            ]);
+        });
+    });
+});
diff --git a/packages/reports/src/Stores/Modules/SmartChart/Helpers/barriers.js b/packages/reports/src/Stores/Modules/SmartChart/Helpers/barriers.js
new file mode 100644
index 000000000000..f26a39e3146f
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/SmartChart/Helpers/barriers.js
@@ -0,0 +1,28 @@
+import { toJS } from 'mobx';
+import { isEmptyObject } from '@deriv/shared';
+import { CONTRACT_SHADES } from '../Constants/barriers';
+
+export const isBarrierSupported = contract_type => contract_type in CONTRACT_SHADES;
+
+export const barriersToString = (is_relative, ...barriers_list) =>
+    barriers_list
+        .filter(barrier => barrier !== undefined && barrier !== null)
+        .map(barrier => `${is_relative && !/^[+-]/.test(barrier) ? '+' : ''}${barrier}`);
+
+export const barriersObjectToArray = (barriers, reference_array) => {
+    Object.keys(barriers).forEach(barrier => {
+        const js_object = toJS(barriers[barrier]);
+        if (!isEmptyObject(js_object)) {
+            reference_array.push(js_object);
+        }
+    });
+
+    return reference_array;
+};
+
+export const removeBarrier = (barriers, key) => {
+    const index = barriers.findIndex(b => b.key === key);
+    if (index > -1) {
+        barriers.splice(index, 1);
+    }
+};
diff --git a/packages/reports/src/Stores/Modules/SmartChart/chart-barrier-store.js b/packages/reports/src/Stores/Modules/SmartChart/chart-barrier-store.js
new file mode 100644
index 000000000000..6f57838f9593
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/SmartChart/chart-barrier-store.js
@@ -0,0 +1,80 @@
+import { action, computed, observable } from 'mobx';
+import { BARRIER_COLORS, BARRIER_LINE_STYLES, CONTRACT_SHADES, DEFAULT_SHADES } from './Constants/barriers';
+import { barriersToString } from './Helpers/barriers';
+
+export class ChartBarrierStore {
+    @observable color;
+    @observable lineStyle;
+    @observable shade;
+    @observable shadeColor;
+
+    @observable high;
+    @observable low;
+
+    @observable relative;
+    @observable draggable;
+
+    @observable hidePriceLines;
+    @observable hideBarrierLine;
+    @observable hideOffscreenLine;
+    @observable title;
+
+    onChartBarrierChange;
+
+    constructor(high_barrier, low_barrier, onChartBarrierChange = null, { color, line_style, not_draggable } = {}) {
+        this.color = color;
+        this.lineStyle = line_style || BARRIER_LINE_STYLES.SOLID;
+        this.onChange = this.onBarrierChange;
+
+        // trade_store's action to process new barriers on dragged
+        this.onChartBarrierChange =
+            typeof onChartBarrierChange === 'function' ? onChartBarrierChange.bind(this) : () => {};
+
+        this.high = +high_barrier || 0; // 0 to follow the price
+        if (low_barrier) {
+            this.low = +low_barrier;
+        }
+
+        this.shade = this.default_shade;
+
+        const has_barrier = !!high_barrier;
+        this.relative = !has_barrier || /^[+-]/.test(high_barrier);
+        this.draggable = !not_draggable && has_barrier;
+        this.hidePriceLines = !has_barrier;
+    }
+
+    @action.bound
+    updateBarriers(high, low, isFromChart = false) {
+        if (!isFromChart) {
+            this.relative = /^[+-]/.test(high);
+        }
+        this.high = +high || undefined;
+        this.low = +low || undefined;
+    }
+
+    @action.bound
+    updateBarrierShade(should_display, contract_type) {
+        this.shade = (should_display && CONTRACT_SHADES[contract_type]) || this.default_shade;
+    }
+
+    @action.bound
+    onBarrierChange({ high, low }) {
+        this.updateBarriers(high, low, true);
+        this.onChartBarrierChange(...barriersToString(this.relative, high, low));
+    }
+
+    @action.bound
+    updateBarrierColor(is_dark_mode) {
+        this.color = is_dark_mode ? BARRIER_COLORS.DARK_GRAY : BARRIER_COLORS.GRAY;
+    }
+
+    @computed
+    get barrier_count() {
+        return (typeof this.high !== 'undefined') + (typeof this.low !== 'undefined');
+    }
+
+    @computed
+    get default_shade() {
+        return DEFAULT_SHADES[this.barrier_count];
+    }
+}
diff --git a/packages/reports/src/Stores/Modules/SmartChart/chart-marker-store.js b/packages/reports/src/Stores/Modules/SmartChart/chart-marker-store.js
new file mode 100644
index 000000000000..3248a1b09f8a
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/SmartChart/chart-marker-store.js
@@ -0,0 +1,11 @@
+import { observable } from 'mobx';
+
+export class ChartMarkerStore {
+    @observable marker_config = observable.object({});
+    @observable content_config = observable.object({});
+
+    constructor(marker_config, content_config) {
+        this.marker_config = marker_config;
+        this.content_config = content_config;
+    }
+}
diff --git a/packages/reports/src/Stores/Modules/Statement/Helpers/format-response.js b/packages/reports/src/Stores/Modules/Statement/Helpers/format-response.js
index 39992f536a7b..7c6704a94eab 100644
--- a/packages/reports/src/Stores/Modules/Statement/Helpers/format-response.js
+++ b/packages/reports/src/Stores/Modules/Statement/Helpers/format-response.js
@@ -1,7 +1,7 @@
 import { formatMoney, toTitleCase, toMoment } from '@deriv/shared';
 
 import { localize } from '@deriv/translations';
-import { getMarketInformation } from 'Modules/Reports/Helpers/market-underlying';
+import { getMarketInformation } from 'Helpers/market-underlying';
 
 import { getSymbolDisplayName } from '../../Trading/Helpers/active-symbols';
 
diff --git a/packages/reports/src/Stores/Modules/Trading/trade-store.js b/packages/reports/src/Stores/Modules/Trading/trade-store.js
index e77eae4bc7b2..29f78eca542a 100644
--- a/packages/reports/src/Stores/Modules/Trading/trade-store.js
+++ b/packages/reports/src/Stores/Modules/Trading/trade-store.js
@@ -13,8 +13,10 @@ import {
     WS,
 } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import { isDigitContractType, isDigitTradeType } from 'Modules/Trading/Helpers/digits';
+import { isDigitContractType, isDigitTradeType } from 'Helpers/digits';
+
 import ServerTime from '_common/base/server_time';
+
 import { processPurchase } from './Actions/purchase';
 import * as Symbol from './Actions/symbol';
 import getValidationRules, { getMultiplierValidationRules } from './Constants/validation-rules';
diff --git a/packages/reports/src/Stores/base-store.js b/packages/reports/src/Stores/base-store.js
index 3a803f0c2a40..61386ac746d7 100644
--- a/packages/reports/src/Stores/base-store.js
+++ b/packages/reports/src/Stores/base-store.js
@@ -1,7 +1,7 @@
 import { action, intercept, observable, reaction, toJS, when } from 'mobx';
 import { isProduction, isEmptyObject } from '@deriv/shared';
 
-import Validator from '../Utils/Validator';
+import Validator from '../Validator';
 
 /**
  * BaseStore class is the base class for all defined stores in the application. It handles some stuff such as:
diff --git a/packages/reports/src/Validator/__tests__/error.spec.js b/packages/reports/src/Validator/__tests__/error.spec.js
new file mode 100644
index 000000000000..d99897f955be
--- /dev/null
+++ b/packages/reports/src/Validator/__tests__/error.spec.js
@@ -0,0 +1,53 @@
+import { expect } from 'chai';
+import Errors from '../errors';
+
+describe('Error', () => {
+    let errors;
+    beforeEach(() => {
+        errors = new Errors();
+        errors.add('Error', 100);
+    });
+
+    describe('.add', () => {
+        it('should add error to errors', () => {
+            errors.add('Error', 101);
+            expect(errors.errors).to.have.property('Error').with.length(2);
+        });
+        it('should not add error if already existed', () => {
+            errors.add('Error', 100);
+            expect(errors.errors).to.have.property('Error').with.length(1);
+        });
+    });
+
+    describe('.all', () => {
+        it('should return all errors', () => {
+            expect(errors.all()).to.be.eql({
+                Error: [100],
+            });
+        });
+    });
+
+    describe('.first', () => {
+        it('should return first error if attribute exists', () => {
+            expect(errors.first('Error')).to.eql(100);
+        });
+    });
+
+    describe('.get', () => {
+        it('should return data if attribute exists', () => {
+            expect(errors.get('Error')).to.eql([100]);
+        });
+        it('should return [] if attribute does not exist', () => {
+            expect(errors.get('')).to.eql([]);
+        });
+    });
+
+    describe('.has', () => {
+        it('should return true if attribute exists', () => {
+            expect(errors.has('Error')).to.be.true;
+        });
+        it('should return false if attribute does not exists', () => {
+            expect(errors.has('')).to.be.false;
+        });
+    });
+});
diff --git a/packages/reports/src/Validator/errors.js b/packages/reports/src/Validator/errors.js
new file mode 100644
index 000000000000..8c3307765b64
--- /dev/null
+++ b/packages/reports/src/Validator/errors.js
@@ -0,0 +1,40 @@
+class Errors {
+    constructor() {
+        this.errors = {};
+    }
+
+    add(attribute, message) {
+        if (!this.has(attribute)) {
+            this.errors[attribute] = [];
+        }
+
+        if (this.errors[attribute].indexOf(message) === -1) {
+            this.errors[attribute].push(message);
+        }
+    }
+
+    all() {
+        return this.errors;
+    }
+
+    first(attribute) {
+        if (this.has(attribute)) {
+            return this.errors[attribute][0];
+        }
+        return null;
+    }
+
+    get(attribute) {
+        if (this.has(attribute)) {
+            return this.errors[attribute];
+        }
+
+        return [];
+    }
+
+    has(attribute) {
+        return Object.prototype.hasOwnProperty.call(this.errors, attribute);
+    }
+}
+
+export default Errors;
diff --git a/packages/reports/src/Validator/index.js b/packages/reports/src/Validator/index.js
new file mode 100644
index 000000000000..1b7f5cfa8611
--- /dev/null
+++ b/packages/reports/src/Validator/index.js
@@ -0,0 +1 @@
+export default from './validator';
diff --git a/packages/reports/src/Validator/validator.js b/packages/reports/src/Validator/validator.js
new file mode 100644
index 000000000000..c8aa2ce59dff
--- /dev/null
+++ b/packages/reports/src/Validator/validator.js
@@ -0,0 +1,112 @@
+import { template } from '_common/utility';
+import { getPreBuildDVRs } from '@deriv/shared';
+import Error from './errors';
+
+class Validator {
+    constructor(input, rules, store = null) {
+        this.input = input;
+        this.rules = rules;
+        this.store = store;
+        this.errors = new Error();
+
+        this.error_count = 0;
+    }
+
+    /**
+     * Add failure and error message for given rule
+     *
+     * @param {string} attribute
+     * @param {object} rule
+     */
+    addFailure(attribute, rule, error_message) {
+        let message = error_message || rule.options.message || getPreBuildDVRs()[rule.name].message();
+        if (rule.name === 'length') {
+            message = template(message, [
+                rule.options.min === rule.options.max ? rule.options.min : `${rule.options.min}-${rule.options.max}`,
+            ]);
+        } else if (rule.name === 'min') {
+            message = template(message, [rule.options.min]);
+        } else if (rule.name === 'not_equal') {
+            message = template(message, [rule.options.name1, rule.options.name2]);
+        }
+        this.errors.add(attribute, message);
+        this.error_count++;
+    }
+
+    /**
+     * Runs validator
+     *
+     * @return {boolean} Whether it passes; true = passes, false = fails
+     */
+    check() {
+        Object.keys(this.input).forEach(attribute => {
+            if (!Object.prototype.hasOwnProperty.call(this.rules, attribute)) {
+                return;
+            }
+
+            this.rules[attribute].forEach(rule => {
+                const ruleObject = Validator.getRuleObject(rule);
+
+                if (!ruleObject.validator && typeof ruleObject.validator !== 'function') {
+                    return;
+                }
+
+                if (ruleObject.options.condition && !ruleObject.options.condition(this.store)) {
+                    return;
+                }
+
+                if (this.input[attribute] === '' && ruleObject.name !== 'req') {
+                    return;
+                }
+
+                let is_valid, error_message;
+                if (ruleObject.name === 'number') {
+                    const { is_ok, message } = ruleObject.validator(
+                        this.input[attribute],
+                        ruleObject.options,
+                        this.store,
+                        this.input
+                    );
+                    is_valid = is_ok;
+                    error_message = message;
+                } else {
+                    is_valid = ruleObject.validator(this.input[attribute], ruleObject.options, this.store, this.input);
+                }
+
+                if (!is_valid) {
+                    this.addFailure(attribute, ruleObject, error_message);
+                }
+            });
+        });
+        return !this.error_count;
+    }
+
+    /**
+     * Determine if validation passes
+     *
+     * @return {boolean}
+     */
+    isPassed() {
+        return this.check();
+    }
+
+    /**
+     * Converts the rule array to an object
+     *
+     * @param {array} rule
+     * @return {object}
+     */
+    static getRuleObject(rule) {
+        const is_rule_string = typeof rule === 'string';
+        const rule_object = {
+            name: is_rule_string ? rule : rule[0],
+            options: is_rule_string ? {} : rule[1] || {},
+        };
+
+        rule_object.validator = rule_object.name === 'custom' ? rule[1].func : getPreBuildDVRs()[rule_object.name].func;
+
+        return rule_object;
+    }
+}
+
+export default Validator;
diff --git a/packages/reports/src/_common/components/loading.jsx b/packages/reports/src/_common/components/loading.jsx
new file mode 100644
index 000000000000..1e1379209e36
--- /dev/null
+++ b/packages/reports/src/_common/components/loading.jsx
@@ -0,0 +1,15 @@
+import classNames from 'classnames';
+import React from 'react';
+
+const Loading = ({ className, is_invisible, theme, id }) => (
+    <div
+        id={id}
+        className={classNames('barspinner', `barspinner--${theme || 'dark'}`, { invisible: is_invisible }, className)}
+    >
+        {Array.from(new Array(5)).map((x, inx) => (
+            <div key={inx} className={`barspinner__rect barspinner__rect--${inx + 1} rect${inx + 1}`} />
+        ))}
+    </div>
+);
+
+export default Loading;
diff --git a/packages/reports/src/_common/contract.js b/packages/reports/src/_common/contract.js
new file mode 100644
index 000000000000..b1797962c68d
--- /dev/null
+++ b/packages/reports/src/_common/contract.js
@@ -0,0 +1,272 @@
+import React from 'react';
+import { localize, Localize } from '@deriv/translations';
+
+export const getCardLabels = () => ({
+    APPLY: localize('Apply'),
+    STAKE: localize('Stake:'),
+    CLOSE: localize('Close'),
+    CANCEL: localize('Cancel'),
+    CURRENT_STAKE: localize('Current stake:'),
+    DEAL_CANCEL_FEE: localize('Deal cancel. fee:'),
+    TAKE_PROFIT: localize('Take profit:'),
+    BUY_PRICE: localize('Buy price:'),
+    STOP_LOSS: localize('Stop loss:'),
+    TOTAL_PROFIT_LOSS: localize('Total profit/loss:'),
+    PROFIT_LOSS: localize('Profit/Loss:'),
+    POTENTIAL_PROFIT_LOSS: localize('Potential profit/loss:'),
+    INDICATIVE_PRICE: localize('Indicative price:'),
+    PAYOUT: localize('Sell price:'),
+    PURCHASE_PRICE: localize('Buy price:'),
+    POTENTIAL_PAYOUT: localize('Payout limit:'),
+    TICK: localize('Tick '),
+    WON: localize('Won'),
+    LOST: localize('Lost'),
+    DAYS: localize('days'),
+    DAY: localize('day'),
+    SELL: localize('Sell'),
+    INCREMENT_VALUE: localize('Increment value'),
+    DECREMENT_VALUE: localize('Decrement value'),
+    TAKE_PROFIT_LOSS_NOT_AVAILABLE: localize(
+        'Take profit and/or stop loss are not available while deal cancellation is active.'
+    ),
+    DONT_SHOW_THIS_AGAIN: localize("Don't show this again"),
+    RESALE_NOT_OFFERED: localize('Resale not offered'),
+    NOT_AVAILABLE: localize('N/A'),
+});
+
+export const getMarketNamesMap = () => ({
+    FRXAUDCAD: localize('AUD/CAD'),
+    FRXAUDCHF: localize('AUD/CHF'),
+    FRXAUDJPY: localize('AUD/JPY'),
+    FRXAUDNZD: localize('AUD/NZD'),
+    FRXAUDPLN: localize('AUD/PLN'),
+    FRXAUDUSD: localize('AUD/USD'),
+    FRXBROUSD: localize('Oil/USD'),
+    FRXEURAUD: localize('EUR/AUD'),
+    FRXEURCAD: localize('EUR/CAD'),
+    FRXEURCHF: localize('EUR/CHF'),
+    FRXEURGBP: localize('EUR/GBP'),
+    FRXEURJPY: localize('EUR/JPY'),
+    FRXEURNZD: localize('EUR/NZD'),
+    FRXEURUSD: localize('EUR/USD'),
+    FRXGBPAUD: localize('GBP/AUD'),
+    FRXGBPCAD: localize('GBP/CAD'),
+    FRXGBPCHF: localize('GBP/CHF'),
+    FRXGBPJPY: localize('GBP/JPY'),
+    FRXGBPNOK: localize('GBP/NOK'),
+    FRXGBPUSD: localize('GBP/USD'),
+    FRXNZDJPY: localize('NZD/JPY'),
+    FRXNZDUSD: localize('NZD/USD'),
+    FRXUSDCAD: localize('USD/CAD'),
+    FRXUSDCHF: localize('USD/CHF'),
+    FRXUSDJPY: localize('USD/JPY'),
+    FRXUSDNOK: localize('USD/NOK'),
+    FRXUSDPLN: localize('USD/PLN'),
+    FRXUSDSEK: localize('USD/SEK'),
+    FRXXAGUSD: localize('Silver/USD'),
+    FRXXAUUSD: localize('Gold/USD'),
+    FRXXPDUSD: localize('Palladium/USD'),
+    FRXXPTUSD: localize('Platinum/USD'),
+    OTC_AEX: localize('Dutch Index'),
+    OTC_AS51: localize('Australian Index'),
+    OTC_DJI: localize('Wall Street Index'),
+    OTC_FCHI: localize('French Index'),
+    OTC_FTSE: localize('UK Index'),
+    OTC_GDAXI: localize('German Index'),
+    OTC_HSI: localize('Hong Kong Index'),
+    OTC_IBEX35: localize('Spanish Index'),
+    OTC_N225: localize('Japanese Index'),
+    OTC_NDX: localize('US Tech Index'),
+    OTC_SPC: localize('US Index'),
+    OTC_SSMI: localize('Swiss Index'),
+    OTC_SX5E: localize('Euro 50 Index'),
+    R_10: localize('Volatility 10 Index'),
+    R_25: localize('Volatility 25 Index'),
+    R_50: localize('Volatility 50 Index'),
+    R_75: localize('Volatility 75 Index'),
+    R_100: localize('Volatility 100 Index'),
+    BOOM300N: localize('Boom 300 Index'),
+    BOOM500: localize('Boom 500 Index'),
+    BOOM1000: localize('Boom 1000 Index'),
+    CRASH300N: localize('Crash 300 Index'),
+    CRASH500: localize('Crash 500 Index'),
+    CRASH1000: localize('Crash 1000 Index'),
+    RDBEAR: localize('Bear Market Index'),
+    RDBULL: localize('Bull Market Index'),
+    STPRNG: localize('Step Index'),
+    WLDAUD: localize('AUD Index'),
+    WLDEUR: localize('EUR Index'),
+    WLDGBP: localize('GBP Index'),
+    WLDXAU: localize('Gold Index'),
+    WLDUSD: localize('USD Index'),
+    '1HZ10V': localize('Volatility 10 (1s) Index'),
+    '1HZ100V': localize('Volatility 100 (1s) Index'),
+    '1HZ200V': localize('Volatility 200 (1s) Index'),
+    '1HZ300V': localize('Volatility 300 (1s) Index'),
+    JD10: localize('Jump 10 Index'),
+    JD25: localize('Jump 25 Index'),
+    JD50: localize('Jump 50 Index'),
+    JD75: localize('Jump 75 Index'),
+    JD100: localize('Jump 100 Index'),
+    JD150: localize('Jump 150 Index'),
+    JD200: localize('Jump 200 Index'),
+    CRYBCHUSD: localize('BCH/USD'),
+    CRYBNBUSD: localize('BNB/USD'),
+    CRYBTCLTC: localize('BTC/LTC'),
+    CRYIOTUSD: localize('IOT/USD'),
+    CRYNEOUSD: localize('NEO/USD'),
+    CRYOMGUSD: localize('OMG/USD'),
+    CRYTRXUSD: localize('TRX/USD'),
+    CRYBTCETH: localize('BTC/ETH'),
+    CRYZECUSD: localize('ZEC/USD'),
+    CRYXMRUSD: localize('ZMR/USD'),
+    CRYXMLUSD: localize('XLM/USD'),
+    CRYXRPUSD: localize('XRP/USD'),
+    CRYBTCUSD: localize('BTC/USD'),
+    CRYDSHUSD: localize('DSH/USD'),
+    CRYETHUSD: localize('ETH/USD'),
+    CRYEOSUSD: localize('EOS/USD'),
+    CRYLTCUSD: localize('LTC/USD'),
+});
+
+export const getUnsupportedContracts = () => ({
+    EXPIRYMISS: {
+        name: <Localize i18n_default_text='Ends Outside' />,
+        position: 'top',
+    },
+    EXPIRYRANGE: {
+        name: <Localize i18n_default_text='Ends Between' />,
+        position: 'bottom',
+    },
+    RANGE: {
+        name: <Localize i18n_default_text='Stays Between' />,
+        position: 'top',
+    },
+    UPORDOWN: {
+        name: <Localize i18n_default_text='Goes Outside' />,
+        position: 'bottom',
+    },
+    RESETCALL: {
+        name: <Localize i18n_default_text='Reset Call' />,
+        position: 'top',
+    },
+    RESETPUT: {
+        name: <Localize i18n_default_text='Reset Put' />,
+        position: 'bottom',
+    },
+    TICKHIGH: {
+        name: <Localize i18n_default_text='High Tick' />,
+        position: 'top',
+    },
+    TICKLOW: {
+        name: <Localize i18n_default_text='Low Tick' />,
+        position: 'bottom',
+    },
+    ASIANU: {
+        name: <Localize i18n_default_text='Asian Up' />,
+        position: 'top',
+    },
+    ASIAND: {
+        name: <Localize i18n_default_text='Asian Down' />,
+        position: 'bottom',
+    },
+    LBFLOATCALL: {
+        name: <Localize i18n_default_text='Close-to-Low' />,
+        position: 'top',
+    },
+    LBFLOATPUT: {
+        name: <Localize i18n_default_text='High-to-Close' />,
+        position: 'top',
+    },
+    LBHIGHLOW: {
+        name: <Localize i18n_default_text='High-to-Low' />,
+        position: 'top',
+    },
+    CALLSPREAD: {
+        name: <Localize i18n_default_text='Spread Up' />,
+        position: 'top',
+    },
+    PUTSPREAD: {
+        name: <Localize i18n_default_text='Spread Down' />,
+        position: 'bottom',
+    },
+    RUNHIGH: {
+        name: <Localize i18n_default_text='Only Ups' />,
+        position: 'top',
+    },
+    RUNLOW: {
+        name: <Localize i18n_default_text='Only Downs' />,
+        position: 'bottom',
+    },
+});
+
+export const getSupportedContracts = is_high_low => ({
+    CALL: {
+        name: is_high_low ? <Localize i18n_default_text='Higher' /> : <Localize i18n_default_text='Rise' />,
+        position: 'top',
+    },
+    PUT: {
+        name: is_high_low ? <Localize i18n_default_text='Lower' /> : <Localize i18n_default_text='Fall' />,
+        position: 'bottom',
+    },
+    CALLE: {
+        name: <Localize i18n_default_text='Rise' />,
+        position: 'top',
+    },
+    PUTE: {
+        name: <Localize i18n_default_text='Fall' />,
+        position: 'bottom',
+    },
+    DIGITMATCH: {
+        name: <Localize i18n_default_text='Matches' />,
+        position: 'top',
+    },
+    DIGITDIFF: {
+        name: <Localize i18n_default_text='Differs' />,
+        position: 'bottom',
+    },
+    DIGITEVEN: {
+        name: <Localize i18n_default_text='Even' />,
+        position: 'top',
+    },
+    DIGITODD: {
+        name: <Localize i18n_default_text='Odd' />,
+        position: 'bottom',
+    },
+    DIGITOVER: {
+        name: <Localize i18n_default_text='Over' />,
+        position: 'top',
+    },
+    DIGITUNDER: {
+        name: <Localize i18n_default_text='Under' />,
+        position: 'bottom',
+    },
+    ONETOUCH: {
+        name: <Localize i18n_default_text='Touch' />,
+        position: 'top',
+    },
+    NOTOUCH: {
+        name: <Localize i18n_default_text='No Touch' />,
+        position: 'bottom',
+    },
+    MULTUP: {
+        name: <Localize i18n_default_text='Up' />,
+        position: 'top',
+    },
+    MULTDOWN: {
+        name: <Localize i18n_default_text='Down' />,
+        position: 'bottom',
+    },
+});
+
+export const getContractConfig = is_high_low => ({
+    ...getSupportedContracts(is_high_low),
+    ...getUnsupportedContracts(),
+});
+
+export const getContractTypeDisplay = (type, is_high_low = false) => {
+    return getContractConfig(is_high_low)[type] ? getContractConfig(is_high_low)[type.toUpperCase()].name : '';
+};
+
+export const getContractTypePosition = (type, is_high_low = false) =>
+    getContractConfig(is_high_low)[type] ? getContractConfig(is_high_low)[type.toUpperCase()].position : 'top';
diff --git a/packages/reports/src/templates/_common/components/loading.jsx b/packages/reports/src/templates/_common/components/loading.jsx
new file mode 100644
index 000000000000..1e1379209e36
--- /dev/null
+++ b/packages/reports/src/templates/_common/components/loading.jsx
@@ -0,0 +1,15 @@
+import classNames from 'classnames';
+import React from 'react';
+
+const Loading = ({ className, is_invisible, theme, id }) => (
+    <div
+        id={id}
+        className={classNames('barspinner', `barspinner--${theme || 'dark'}`, { invisible: is_invisible }, className)}
+    >
+        {Array.from(new Array(5)).map((x, inx) => (
+            <div key={inx} className={`barspinner__rect barspinner__rect--${inx + 1} rect${inx + 1}`} />
+        ))}
+    </div>
+);
+
+export default Loading;
diff --git a/packages/trader/src/templates/_common/components/loading.tsx b/packages/trader/src/_common/components/loading.tsx
similarity index 100%
rename from packages/trader/src/templates/_common/components/loading.tsx
rename to packages/trader/src/_common/components/loading.tsx
diff --git a/packages/trader/src/templates/app/components/loading.jsx b/packages/trader/src/templates/app/components/loading.jsx
deleted file mode 100644
index 8bda86ee71c5..000000000000
--- a/packages/trader/src/templates/app/components/loading.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Text } from '@deriv/components';
-
-const Loading = ({ className, id, is_fullscreen = true, is_slow_loading, status, theme }) => {
-    const theme_class = theme ? `barspinner-${theme}` : 'barspinner-light';
-    return (
-        <div
-            className={classNames(
-                'initial-loader',
-                {
-                    'initial-loader--fullscreen': is_fullscreen,
-                },
-                className
-            )}
-        >
-            <div id={id} className={classNames('initial-loader__barspinner', 'barspinner', theme_class)}>
-                {Array.from(new Array(5)).map((x, inx) => (
-                    <div
-                        key={inx}
-                        className={`initial-loader__barspinner--rect barspinner__rect barspinner__rect--${
-                            inx + 1
-                        } rect${inx + 1}`}
-                    />
-                ))}
-            </div>
-            {is_slow_loading &&
-                status.map((text, inx) => (
-                    <Text as='h3' color='prominent' size='xs' align='center' key={inx}>
-                        {text}
-                    </Text>
-                ))}
-        </div>
-    );
-};
-
-Loading.propTypes = {
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    is_slow_loading: PropTypes.bool,
-    status: PropTypes.array,
-    theme: PropTypes.string,
-};
-export default Loading;

From a25be27046ed80f7fbbe9f763e1e262ec73c9b7e Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Mon, 11 Apr 2022 12:50:13 +0430
Subject: [PATCH 05/64] move validator to utils

---
 packages/reports/src/Stores/base-store.js                       | 2 +-
 .../reports/src/{ => Utils}/Validator/__tests__/error.spec.js   | 0
 packages/reports/src/{ => Utils}/Validator/errors.js            | 0
 packages/reports/src/{ => Utils}/Validator/index.js             | 0
 packages/reports/src/{ => Utils}/Validator/validator.js         | 0
 5 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/reports/src/{ => Utils}/Validator/__tests__/error.spec.js (100%)
 rename packages/reports/src/{ => Utils}/Validator/errors.js (100%)
 rename packages/reports/src/{ => Utils}/Validator/index.js (100%)
 rename packages/reports/src/{ => Utils}/Validator/validator.js (100%)

diff --git a/packages/reports/src/Stores/base-store.js b/packages/reports/src/Stores/base-store.js
index 61386ac746d7..3a803f0c2a40 100644
--- a/packages/reports/src/Stores/base-store.js
+++ b/packages/reports/src/Stores/base-store.js
@@ -1,7 +1,7 @@
 import { action, intercept, observable, reaction, toJS, when } from 'mobx';
 import { isProduction, isEmptyObject } from '@deriv/shared';
 
-import Validator from '../Validator';
+import Validator from '../Utils/Validator';
 
 /**
  * BaseStore class is the base class for all defined stores in the application. It handles some stuff such as:
diff --git a/packages/reports/src/Validator/__tests__/error.spec.js b/packages/reports/src/Utils/Validator/__tests__/error.spec.js
similarity index 100%
rename from packages/reports/src/Validator/__tests__/error.spec.js
rename to packages/reports/src/Utils/Validator/__tests__/error.spec.js
diff --git a/packages/reports/src/Validator/errors.js b/packages/reports/src/Utils/Validator/errors.js
similarity index 100%
rename from packages/reports/src/Validator/errors.js
rename to packages/reports/src/Utils/Validator/errors.js
diff --git a/packages/reports/src/Validator/index.js b/packages/reports/src/Utils/Validator/index.js
similarity index 100%
rename from packages/reports/src/Validator/index.js
rename to packages/reports/src/Utils/Validator/index.js
diff --git a/packages/reports/src/Validator/validator.js b/packages/reports/src/Utils/Validator/validator.js
similarity index 100%
rename from packages/reports/src/Validator/validator.js
rename to packages/reports/src/Utils/Validator/validator.js

From 06895decde2b1b77faf6c95a931c52e38cce7afe Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Mon, 11 Apr 2022 14:53:29 +0430
Subject: [PATCH 06/64] fix trader files

---
 packages/trader/src/App/Components/Elements/chart-loader.jsx    | 2 +-
 .../src/Modules/CFD/Components/cfd-demo-account-display.tsx     | 2 +-
 .../Modules/CFD/Containers/loading-cfd-real-account-display.tsx | 2 +-
 .../src/Modules/Reports/Components/placeholder-component.jsx    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/trader/src/App/Components/Elements/chart-loader.jsx b/packages/trader/src/App/Components/Elements/chart-loader.jsx
index a456a82bc382..db52cf92d5e7 100644
--- a/packages/trader/src/App/Components/Elements/chart-loader.jsx
+++ b/packages/trader/src/App/Components/Elements/chart-loader.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Loading from '../../../templates/app/components/loading';
+import Loading from '_common/components/loading';
 
 const ChartLoader = ({ is_dark, is_visible }) =>
     is_visible ? (
diff --git a/packages/trader/src/Modules/CFD/Components/cfd-demo-account-display.tsx b/packages/trader/src/Modules/CFD/Components/cfd-demo-account-display.tsx
index 4a5a7bb62216..8767d7424945 100644
--- a/packages/trader/src/Modules/CFD/Components/cfd-demo-account-display.tsx
+++ b/packages/trader/src/Modules/CFD/Components/cfd-demo-account-display.tsx
@@ -3,7 +3,7 @@ import { localize } from '@deriv/translations';
 import specifications from 'Modules/CFD/Constants/cfd-specifications';
 import { CFDAccountCard } from './cfd-account-card';
 import { general_messages } from '../Constants/cfd-shared-strings';
-import Loading from '../../../templates/_common/components/loading';
+import Loading from '_common/components/loading';
 import { DetailsOfEachMT5Loginid, LandingCompany } from '@deriv/api-types';
 import { TSpecifications } from '../Constants/cfd-specifications';
 import { TTradingPlatformAccounts } from './props.types';
diff --git a/packages/trader/src/Modules/CFD/Containers/loading-cfd-real-account-display.tsx b/packages/trader/src/Modules/CFD/Containers/loading-cfd-real-account-display.tsx
index 1e9f35d8a624..6c5ee980e49e 100644
--- a/packages/trader/src/Modules/CFD/Containers/loading-cfd-real-account-display.tsx
+++ b/packages/trader/src/Modules/CFD/Containers/loading-cfd-real-account-display.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Loading from '../../../templates/_common/components/loading';
+import Loading from '_common/components/loading';
 
 const LoadingCFDRealAccountDisplay = () => (
     <div className='cfd-real-accounts-display'>
diff --git a/packages/trader/src/Modules/Reports/Components/placeholder-component.jsx b/packages/trader/src/Modules/Reports/Components/placeholder-component.jsx
index 54d43f05c528..5b8cbc865bed 100644
--- a/packages/trader/src/Modules/Reports/Components/placeholder-component.jsx
+++ b/packages/trader/src/Modules/Reports/Components/placeholder-component.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Loading from '../../../templates/_common/components/loading';
+import Loading from '_common/components/loading';
 
 const PlaceholderComponent = props => {
     const EmptyMessageComponent = props.empty_message_component;

From e8280295205ff025c35601c45d9bfa82d8a8e0f0 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Tue, 12 Apr 2022 13:38:01 +0430
Subject: [PATCH 07/64] delete reports, change imports

---
 packages/reports/build/constants.js           |   1 -
 packages/reports/jest.config.js               |   2 +-
 .../positions-drawer-card.jsx                 |   8 +-
 .../helpers/positions-helper.js               |   4 +-
 .../PositionsDrawer/positions-drawer.jsx      |   4 +-
 .../PositionsDrawer/positions-modal-card.jsx  |  15 +-
 .../CompositeCalendar/composite-calendar.jsx  |   2 +-
 .../Form/TimePicker/time-picker.jsx           |   2 +-
 .../src/Components/account-statistics.jsx     |   2 +-
 .../Components/empty-portfolio-message.jsx    |   4 +-
 .../src/Components/filter-component.jsx       |   4 +-
 packages/reports/src/Components/index.js      |   3 +
 .../src/Components/indicative-cell.jsx        |   4 +-
 .../reports/src/Constants/routes-config.js    |   6 +-
 .../reports/src/Containers/open-positions.jsx |  18 +-
 .../reports/src/Containers/profit-table.jsx   |  14 +-
 .../src/Containers/progress-slider-stream.jsx |   4 +-
 packages/reports/src/Containers/reports.jsx   |   4 +-
 packages/reports/src/Containers/routes.jsx    |   6 +-
 packages/reports/src/Containers/statement.jsx |  18 +-
 .../__tests__/marker-spot-label.spec.js       |  52 ++
 .../Markers/__tests__/marker-spot.spec.js     |  20 +
 .../SmartChart/Components/Markers/index.js    |   1 +
 .../Components/Markers/marker-line.jsx        |  38 ++
 .../Components/Markers/marker-spot-label.jsx  |  82 +++
 .../Components/Markers/marker-spot.jsx        |  15 +
 .../SmartChart/Components/Markers/marker.jsx  |  41 ++
 .../SmartChart/Components/all-markers.jsx     | 608 ++++++++++++++++++
 .../SmartChart/Components/bottom-widgets.jsx  |  10 +
 .../SmartChart/Components/control-widgets.jsx |  27 +
 .../Modules/SmartChart/Components/icons.js    |  61 ++
 .../SmartChart/Components/toolbar-widgets.jsx |  22 +
 .../SmartChart/Components/top-widgets.jsx     |  85 +++
 .../src/Modules/SmartChart/Helpers/symbol.js  |  10 +
 .../reports/src/Modules/SmartChart/index.js   |  29 +
 .../Contract/Constants/validation-rules.js    |   2 +-
 .../Contract/Helpers/chart-marker-helpers.js  |   3 +-
 .../Modules/Contract/Helpers/multiplier.js    |   2 +-
 .../Modules/Profit/Helpers/format-response.js |   4 +-
 .../Trading/Constants/validation-rules.js     |   2 +-
 .../Modules/Trading/Helpers/contract-type.js  |   4 +-
 packages/reports/src/Stores/Modules/index.js  |   4 +
 packages/reports/src/app.jsx                  |   1 +
 packages/trader/package.json                  |   1 +
 .../ContractDrawer/contract-drawer-card.jsx   |   2 +-
 .../PositionsDrawer/positions-drawer.jsx      |   2 +-
 .../PositionsDrawer/positions-modal-card.jsx  |   2 +-
 .../toggle-positions-mobile.jsx               |   2 +-
 .../trader/src/App/Constants/routes-config.js |  36 +-
 .../Reports/Components/account-statistics.jsx |  70 --
 .../Reports/Components/amount-cell.jsx        |  15 -
 .../Reports/Components/currency-wrapper.jsx   |  17 -
 .../Components/empty-portfolio-message.jsx    |  24 -
 .../empty-trade-history-message.jsx           |  28 -
 .../Reports/Components/filter-component.jsx   |  79 ---
 .../Reports/Components/indicative-cell.jsx    |  53 --
 .../Components/market-symbol-icon-row.jsx     |  93 ---
 .../Components/placeholder-component.jsx      |  29 -
 .../Reports/Components/profit_loss_cell.jsx   |  15 -
 .../Reports/Components/reports-meta.jsx       |  19 -
 .../Reports/Constants/data-table-constants.js | 404 ------------
 .../__tests__/open-positions.spec.js          |  31 -
 .../Reports/Containers/open-positions.jsx     | 441 -------------
 .../Reports/Containers/profit-table.jsx       | 224 -------
 .../Modules/Reports/Containers/reports.jsx    | 131 ----
 .../Modules/Reports/Containers/statement.jsx  | 282 --------
 .../Modules/Reports/Helpers/profit-loss.js    |   1 -
 packages/trader/src/Modules/Reports/index.js  |  11 -
 .../Portfolio/Helpers/format-response.js      |   2 +-
 .../Modules/Profit/Helpers/format-response.js |   2 +-
 .../Statement/Helpers/format-response.js      |   2 +-
 .../Helpers/market-underlying.js              |   2 +-
 72 files changed, 1190 insertions(+), 2078 deletions(-)
 create mode 100644 packages/reports/src/Components/index.js
 create mode 100644 packages/reports/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot-label.spec.js
 create mode 100644 packages/reports/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot.spec.js
 create mode 100644 packages/reports/src/Modules/SmartChart/Components/Markers/index.js
 create mode 100644 packages/reports/src/Modules/SmartChart/Components/Markers/marker-line.jsx
 create mode 100644 packages/reports/src/Modules/SmartChart/Components/Markers/marker-spot-label.jsx
 create mode 100644 packages/reports/src/Modules/SmartChart/Components/Markers/marker-spot.jsx
 create mode 100644 packages/reports/src/Modules/SmartChart/Components/Markers/marker.jsx
 create mode 100644 packages/reports/src/Modules/SmartChart/Components/all-markers.jsx
 create mode 100644 packages/reports/src/Modules/SmartChart/Components/bottom-widgets.jsx
 create mode 100644 packages/reports/src/Modules/SmartChart/Components/control-widgets.jsx
 create mode 100644 packages/reports/src/Modules/SmartChart/Components/icons.js
 create mode 100644 packages/reports/src/Modules/SmartChart/Components/toolbar-widgets.jsx
 create mode 100644 packages/reports/src/Modules/SmartChart/Components/top-widgets.jsx
 create mode 100644 packages/reports/src/Modules/SmartChart/Helpers/symbol.js
 create mode 100644 packages/reports/src/Modules/SmartChart/index.js
 delete mode 100644 packages/trader/src/Modules/Reports/Components/account-statistics.jsx
 delete mode 100644 packages/trader/src/Modules/Reports/Components/amount-cell.jsx
 delete mode 100644 packages/trader/src/Modules/Reports/Components/currency-wrapper.jsx
 delete mode 100644 packages/trader/src/Modules/Reports/Components/empty-portfolio-message.jsx
 delete mode 100644 packages/trader/src/Modules/Reports/Components/empty-trade-history-message.jsx
 delete mode 100644 packages/trader/src/Modules/Reports/Components/filter-component.jsx
 delete mode 100644 packages/trader/src/Modules/Reports/Components/indicative-cell.jsx
 delete mode 100644 packages/trader/src/Modules/Reports/Components/market-symbol-icon-row.jsx
 delete mode 100644 packages/trader/src/Modules/Reports/Components/placeholder-component.jsx
 delete mode 100644 packages/trader/src/Modules/Reports/Components/profit_loss_cell.jsx
 delete mode 100644 packages/trader/src/Modules/Reports/Components/reports-meta.jsx
 delete mode 100644 packages/trader/src/Modules/Reports/Constants/data-table-constants.js
 delete mode 100644 packages/trader/src/Modules/Reports/Containers/__tests__/open-positions.spec.js
 delete mode 100644 packages/trader/src/Modules/Reports/Containers/open-positions.jsx
 delete mode 100644 packages/trader/src/Modules/Reports/Containers/profit-table.jsx
 delete mode 100644 packages/trader/src/Modules/Reports/Containers/reports.jsx
 delete mode 100644 packages/trader/src/Modules/Reports/Containers/statement.jsx
 delete mode 100644 packages/trader/src/Modules/Reports/Helpers/profit-loss.js
 delete mode 100644 packages/trader/src/Modules/Reports/index.js
 rename packages/trader/src/{Modules/Reports => Utils}/Helpers/market-underlying.js (95%)

diff --git a/packages/reports/build/constants.js b/packages/reports/build/constants.js
index 22a9b9e45ad3..c2e073823791 100644
--- a/packages/reports/build/constants.js
+++ b/packages/reports/build/constants.js
@@ -38,7 +38,6 @@ const ALIASES = {
     Modules: path.resolve(__dirname, '../src/Modules'),
     Sass: path.resolve(__dirname, '../src/sass'),
     Stores: path.resolve(__dirname, '../src/Stores'),
-    App: path.resolve(__dirname, '../src/App'),
     Helpers: path.resolve(__dirname, '../src/Helpers'),
 };
 
diff --git a/packages/reports/jest.config.js b/packages/reports/jest.config.js
index 4319119f4329..d252ad18aadd 100644
--- a/packages/reports/jest.config.js
+++ b/packages/reports/jest.config.js
@@ -16,4 +16,4 @@ module.exports = {
         '^Services\/(.*)$': "<rootDir>/src/Services/$1",
         '^Stores\/(.*)$': "<rootDir>/src/Stores/$1",
     },
-};
\ No newline at end of file
+};
diff --git a/packages/reports/src/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx b/packages/reports/src/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx
index 9b454cf9e45e..51f05c554afd 100644
--- a/packages/reports/src/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx
+++ b/packages/reports/src/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx
@@ -4,11 +4,11 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 import { ContractCard } from '@deriv/components';
 import { getContractPath, isCryptoContract, isMultiplierContract } from '@deriv/shared';
-import { getCardLabels, getContractTypeDisplay } from '_common/contract';
-import { connect } from 'Stores/connect';
-import { connectWithContractUpdate } from 'Stores/Modules/Contract/Helpers/multiplier';
+import { getCardLabels, getContractTypeDisplay } from '../../../../_common/contract';
+import { connect } from '../../../../Stores/connect';
+import { connectWithContractUpdate } from '../../../../Stores/Modules/Contract/Helpers/multiplier';
 
-import { getEndTime } from 'Stores/Modules/Contract/Helpers/logic';
+import { getEndTime } from '../../../../Stores/Modules/Contract/Helpers/logic';
 
 const PositionsDrawerCard = ({
     addToast,
diff --git a/packages/reports/src/Components/Elements/PositionsDrawer/helpers/positions-helper.js b/packages/reports/src/Components/Elements/PositionsDrawer/helpers/positions-helper.js
index 96803078b143..e17a406a9e72 100644
--- a/packages/reports/src/Components/Elements/PositionsDrawer/helpers/positions-helper.js
+++ b/packages/reports/src/Components/Elements/PositionsDrawer/helpers/positions-helper.js
@@ -1,7 +1,7 @@
 import { localize } from '@deriv/translations';
 import { isHighLow } from '@deriv/shared';
-import { getContractTypesConfig } from 'Stores/Modules/Trading/Constants/contract';
-import { isCallPut } from 'Stores/Modules/Contract/Helpers/contract-type';
+import { getContractTypesConfig } from '../../../../Stores/Modules/Trading/Constants/contract';
+import { isCallPut } from '../../../../Stores/Modules/Contract/Helpers/contract-type';
 
 export const addCommaToNumber = (num, decimal_places) => {
     if (!num || isNaN(num)) {
diff --git a/packages/reports/src/Components/Elements/PositionsDrawer/positions-drawer.jsx b/packages/reports/src/Components/Elements/PositionsDrawer/positions-drawer.jsx
index b23586f187a2..6107eab707c4 100644
--- a/packages/reports/src/Components/Elements/PositionsDrawer/positions-drawer.jsx
+++ b/packages/reports/src/Components/Elements/PositionsDrawer/positions-drawer.jsx
@@ -7,8 +7,8 @@ import { CSSTransition } from 'react-transition-group';
 import { Icon, DataList, Text } from '@deriv/components';
 import { routes, useNewRowTransition } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import EmptyPortfolioMessage from 'Components/empty-portfolio-message.jsx';
-import { connect } from 'Stores/connect';
+import EmptyPortfolioMessage from '../../empty-portfolio-message.jsx';
+import { connect } from '../../../Stores/connect';
 import PositionsDrawerCard from './PositionsDrawerCard';
 import { filterByContractType } from './helpers';
 
diff --git a/packages/reports/src/Components/Elements/PositionsDrawer/positions-modal-card.jsx b/packages/reports/src/Components/Elements/PositionsDrawer/positions-modal-card.jsx
index c664ac65a418..72500d2212d7 100644
--- a/packages/reports/src/Components/Elements/PositionsDrawer/positions-modal-card.jsx
+++ b/packages/reports/src/Components/Elements/PositionsDrawer/positions-modal-card.jsx
@@ -13,16 +13,17 @@ import {
     isOpen,
 } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import { BinaryLink } from 'Components/Routes';
-import { connect } from 'Stores/connect';
-import { getSymbolDisplayName } from 'Stores/Modules/Trading/Helpers/active-symbols';
+import { BinaryLink } from '../../Routes';
 
-import { connectWithContractUpdate } from 'Stores/Modules/Contract/Helpers/multiplier';
-import { getEndTime } from 'Stores/Modules/Contract/Helpers/logic';
+import { connect } from '../../../Stores/connect';
+import { getSymbolDisplayName } from '../../../Stores/Modules/Trading/Helpers/active-symbols';
+
+import { connectWithContractUpdate } from '../../../Stores/Modules/Contract/Helpers/multiplier';
+import { getEndTime } from '../../../Stores/Modules/Contract/Helpers/logic';
 import { PositionsCardLoader } from '../ContentLoader';
 
-import { getContractTypeDisplay, getCardLabels } from '_common/contract';
-import { getMarketInformation } from 'Helpers/market-underlying';
+import { getContractTypeDisplay, getCardLabels } from '../../../_common/contract';
+import { getMarketInformation } from '../../../Helpers/market-underlying';
 import ResultMobile from './result-mobile.jsx';
 
 const PositionsModalCard = ({
diff --git a/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx b/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx
index 875fb85cfe0b..4a68fdb1dc14 100644
--- a/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx
+++ b/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx
@@ -4,7 +4,7 @@ import Loadable from 'react-loadable';
 import { DesktopWrapper, InputField, MobileWrapper, useOnClickOutside } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import { daysFromTodayTo, epochToMoment, toMoment } from '@deriv/shared';
-import { connect } from 'Stores/connect';
+import { connect } from '../../../Stores/connect';
 import CompositeCalendarMobile from './composite-calendar-mobile.jsx';
 import SideList from './side-list.jsx';
 import CalendarIcon from './calendar-icon.jsx';
diff --git a/packages/reports/src/Components/Form/TimePicker/time-picker.jsx b/packages/reports/src/Components/Form/TimePicker/time-picker.jsx
index 301df882505b..438ecbb042fe 100644
--- a/packages/reports/src/Components/Form/TimePicker/time-picker.jsx
+++ b/packages/reports/src/Components/Form/TimePicker/time-picker.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { Icon, InputField } from '@deriv/components';
-import { connect } from 'Stores/connect';
+import { connect } from '../../../Stores/connect';
 import Dialog from './dialog.jsx';
 
 const class_prefix = 'time-picker';
diff --git a/packages/reports/src/Components/account-statistics.jsx b/packages/reports/src/Components/account-statistics.jsx
index 2e2c3e3c5863..d62ad260bdd4 100644
--- a/packages/reports/src/Components/account-statistics.jsx
+++ b/packages/reports/src/Components/account-statistics.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { MobileWrapper, Money, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
-import { connect } from 'Stores/connect';
+import { connect } from '../Stores/connect';
 
 const AccountStatistics = ({ account_statistics, currency }) => {
     return (
diff --git a/packages/reports/src/Components/empty-portfolio-message.jsx b/packages/reports/src/Components/empty-portfolio-message.jsx
index c2066318b49d..cd6eb1d2a44d 100644
--- a/packages/reports/src/Components/empty-portfolio-message.jsx
+++ b/packages/reports/src/Components/empty-portfolio-message.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Icon, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 
-const EmptyPortfolioMessage = ({ error }) => (
+export const EmptyPortfolioMessage = ({ error }) => (
     <div className='portfolio-empty'>
         <div className='portfolio-empty__wrapper'>
             {error ? (
@@ -20,5 +20,3 @@ const EmptyPortfolioMessage = ({ error }) => (
         </div>
     </div>
 );
-
-export default EmptyPortfolioMessage;
diff --git a/packages/reports/src/Components/filter-component.jsx b/packages/reports/src/Components/filter-component.jsx
index 2a65faa80995..a3c771365215 100644
--- a/packages/reports/src/Components/filter-component.jsx
+++ b/packages/reports/src/Components/filter-component.jsx
@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FilterDropdown } from '@deriv/components';
 import { localize } from '@deriv/translations';
-import { connect } from 'Stores/connect';
-import CompositeCalendar from 'Components/Form/CompositeCalendar';
+import { connect } from '../Stores/connect';
+import CompositeCalendar from './Form/CompositeCalendar';
 
 const FilterComponent = ({
     action_type,
diff --git a/packages/reports/src/Components/index.js b/packages/reports/src/Components/index.js
new file mode 100644
index 000000000000..f6aad7b8b061
--- /dev/null
+++ b/packages/reports/src/Components/index.js
@@ -0,0 +1,3 @@
+import EmptyPortfolioMessage from './empty-portfolio-message';
+
+export default EmptyPortfolioMessage;
diff --git a/packages/reports/src/Components/indicative-cell.jsx b/packages/reports/src/Components/indicative-cell.jsx
index a6f768897885..b49d64b44b22 100644
--- a/packages/reports/src/Components/indicative-cell.jsx
+++ b/packages/reports/src/Components/indicative-cell.jsx
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Icon, Money, DesktopWrapper, ContractCard } from '@deriv/components';
-import { getCardLabels } from '_common/contract';
-import { connect } from 'Stores/connect';
+import { getCardLabels } from '../_common/contract';
+import { connect } from '../Stores/connect';
 
 const IndicativeCell = ({ amount, currency, contract_info, is_footer, onClickSell, is_sell_requested }) => {
     const [movement, setMovement] = React.useState(null);
diff --git a/packages/reports/src/Constants/routes-config.js b/packages/reports/src/Constants/routes-config.js
index ad5146df1803..e0b8654ae712 100644
--- a/packages/reports/src/Constants/routes-config.js
+++ b/packages/reports/src/Constants/routes-config.js
@@ -1,7 +1,11 @@
 import React from 'react';
 import { routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import { OpenPositions, ProfitTable, Statement, Reports } from 'Containers';
+// import { OpenPositions, ProfitTable, Statement, Reports } from '../Containers/index';
+import OpenPositions from '../Containers/open-positions.jsx';
+import ProfitTable from '../Containers/profit-table.jsx';
+import Statement from '../Containers/statement.jsx';
+import Reports from '../Containers/reports.jsx';
 
 // Error Routes
 const Page404 = React.lazy(() => import(/* webpackChunkName: "404" */ '../Modules/Page404'));
diff --git a/packages/reports/src/Containers/open-positions.jsx b/packages/reports/src/Containers/open-positions.jsx
index 032abb0f8c58..2cfafdc2822d 100644
--- a/packages/reports/src/Containers/open-positions.jsx
+++ b/packages/reports/src/Containers/open-positions.jsx
@@ -14,19 +14,19 @@ import {
 } from '@deriv/components';
 import { urlFor, isMobile, isMultiplierContract, getTimePercentage, website_name, getTotalProfit } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
-import { ReportsTableRowLoader } from 'Components/Elements/ContentLoader';
-import { getContractPath } from 'Components/Routes/helpers';
-import { getContractDurationType } from 'Helpers/market-underlying';
+import { ReportsTableRowLoader } from '../Components/Elements/ContentLoader';
+import { getContractPath } from '../Components/Routes/helpers';
+import { getContractDurationType } from '../Helpers/market-underlying';
 
-import EmptyTradeHistoryMessage from 'Components/empty-trade-history-message.jsx';
+import EmptyTradeHistoryMessage from '../Components/empty-trade-history-message.jsx';
 import {
     getOpenPositionsColumnsTemplate,
     getMultiplierOpenPositionsColumnsTemplate,
-} from 'Constants/data-table-constants';
-import PositionsCard from 'Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx';
-import PlaceholderComponent from 'Components/placeholder-component.jsx';
-import { getCardLabels } from '_common/contract';
-import { connect } from 'Stores/connect';
+} from '../Constants/data-table-constants';
+import PositionsCard from '../Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx';
+import PlaceholderComponent from '../Components/placeholder-component.jsx';
+import { getCardLabels } from '../_common/contract';
+import { connect } from '../Stores/connect';
 
 const EmptyPlaceholderWrapper = props => (
     <React.Fragment>
diff --git a/packages/reports/src/Containers/profit-table.jsx b/packages/reports/src/Containers/profit-table.jsx
index 528752cdb18a..5ea255e96245 100644
--- a/packages/reports/src/Containers/profit-table.jsx
+++ b/packages/reports/src/Containers/profit-table.jsx
@@ -6,15 +6,15 @@ import { withRouter } from 'react-router';
 import { DesktopWrapper, MobileWrapper, DataList, DataTable } from '@deriv/components';
 import { extractInfoFromShortcode, isForwardStarting, urlFor, website_name } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
-import { ReportsTableRowLoader } from 'Components/Elements/ContentLoader';
-import CompositeCalendar from 'Components/Form/CompositeCalendar';
-import { getContractPath } from 'Components/Routes/helpers';
-import { getSupportedContracts } from '_common/contract';
+import { ReportsTableRowLoader } from '../Components/Elements/ContentLoader';
+import CompositeCalendar from '../Components/Form/CompositeCalendar';
+import { getContractPath } from '../Components/Routes/helpers';
+import { getSupportedContracts } from '../_common/contract';
 
 import { connect } from '../Stores/connect';
-import EmptyTradeHistoryMessage from 'Components/empty-trade-history-message.jsx';
-import PlaceholderComponent from 'Components/placeholder-component.jsx';
-import { ReportsMeta } from 'Components/reports-meta.jsx';
+import EmptyTradeHistoryMessage from '../Components/empty-trade-history-message.jsx';
+import PlaceholderComponent from '../Components/placeholder-component.jsx';
+import { ReportsMeta } from '../Components/reports-meta.jsx';
 import { getProfitTableColumnsTemplate } from '../Constants/data-table-constants';
 
 const getRowAction = row_obj =>
diff --git a/packages/reports/src/Containers/progress-slider-stream.jsx b/packages/reports/src/Containers/progress-slider-stream.jsx
index 23e628dc4204..1f2bceb78424 100644
--- a/packages/reports/src/Containers/progress-slider-stream.jsx
+++ b/packages/reports/src/Containers/progress-slider-stream.jsx
@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { ProgressSlider } from '@deriv/components';
 import { getCurrentTick } from '@deriv/shared';
-import { connect } from 'Stores/connect';
-import { getCardLabels } from '_common/contract';
+import { connect } from '../Stores/connect';
+import { getCardLabels } from '../_common/contract';
 
 const ProgressSliderStream = ({ contract_info, is_loading, server_time }) => {
     if (!contract_info) {
diff --git a/packages/reports/src/Containers/reports.jsx b/packages/reports/src/Containers/reports.jsx
index 871bb6307a27..229b3b33a147 100644
--- a/packages/reports/src/Containers/reports.jsx
+++ b/packages/reports/src/Containers/reports.jsx
@@ -13,8 +13,8 @@ import {
 } from '@deriv/components';
 import { getSelectedRoute } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import { connect } from 'Stores/connect';
-import 'Sass/app/modules/reports.scss';
+import { connect } from '../Stores/connect';
+import '../sass/app/modules/reports.scss';
 
 const Reports = ({
     history,
diff --git a/packages/reports/src/Containers/routes.jsx b/packages/reports/src/Containers/routes.jsx
index 585ad7a9d3f8..5bc21076f20d 100644
--- a/packages/reports/src/Containers/routes.jsx
+++ b/packages/reports/src/Containers/routes.jsx
@@ -2,9 +2,9 @@ import { PropTypes as MobxPropTypes } from 'mobx-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withRouter } from 'react-router';
-import BinaryRoutes from 'Components/Routes';
-import { connect } from 'Stores/connect';
-import ErrorComponent from 'Components/Errors';
+import BinaryRoutes from '../Components/Routes';
+import { connect } from '../Stores/connect';
+import ErrorComponent from '../Components/Errors';
 
 const Routes = props => {
     if (props.has_error) {
diff --git a/packages/reports/src/Containers/statement.jsx b/packages/reports/src/Containers/statement.jsx
index 73d45d830c31..3aea4e200c13 100644
--- a/packages/reports/src/Containers/statement.jsx
+++ b/packages/reports/src/Containers/statement.jsx
@@ -5,16 +5,16 @@ import { withRouter } from 'react-router-dom';
 import { DesktopWrapper, MobileWrapper, DataList, DataTable, Text, Clipboard } from '@deriv/components';
 import { extractInfoFromShortcode, isForwardStarting, urlFor, website_name } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
-import { ReportsTableRowLoader } from 'Components/Elements/ContentLoader';
-import { getContractPath } from 'Components/Routes/helpers';
-import { getSupportedContracts } from '_common/contract';
-import { connect } from 'Stores/connect';
+import { ReportsTableRowLoader } from '../Components/Elements/ContentLoader';
+import { getContractPath } from '../Components/Routes/helpers';
+import { getSupportedContracts } from '../_common/contract';
+import { connect } from '../Stores/connect';
 import { getStatementTableColumnsTemplate } from '../Constants/data-table-constants';
-import PlaceholderComponent from 'Components/placeholder-component.jsx';
-import AccountStatistics from 'Components/account-statistics.jsx';
-import FilterComponent from 'Components/filter-component.jsx';
-import { ReportsMeta } from 'Components/reports-meta.jsx';
-import EmptyTradeHistoryMessage from 'Components/empty-trade-history-message.jsx';
+import PlaceholderComponent from '../Components/placeholder-component.jsx';
+import AccountStatistics from '../Components/account-statistics.jsx';
+import FilterComponent from '../Components/filter-component.jsx';
+import { ReportsMeta } from '../Components/reports-meta.jsx';
+import EmptyTradeHistoryMessage from '../Components/empty-trade-history-message.jsx';
 
 const DetailsComponent = ({ message = '', action_type = '' }) => {
     const address_hash_match = /:\s([0-9a-zA-Z]+.{25,28})/gm.exec(message.split(/,\s/)[0]);
diff --git a/packages/reports/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot-label.spec.js b/packages/reports/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot-label.spec.js
new file mode 100644
index 000000000000..26403c0342da
--- /dev/null
+++ b/packages/reports/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot-label.spec.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import { expect } from 'chai';
+import { configure, shallow, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import MarkerSpotLabel from '../marker-spot-label.jsx';
+
+configure({ adapter: new Adapter() });
+
+describe('MarkerSpotLabel', () => {
+    it('should render one <MarkerSpotLabel /> component', () => {
+        const wrapper = shallow(<MarkerSpotLabel />);
+        expect(wrapper).to.have.length(1);
+    });
+    it('should have class .chart-spot-label__time-value-container--top if align_label top is passed in props', () => {
+        const wrapper = shallow(<MarkerSpotLabel align_label={'top'} />);
+        expect(wrapper.find('.chart-spot-label__time-value-container--top').exists()).to.be.true;
+    });
+    it('should have class .chart-spot-label__time-value-container--bottom if align_label bottom is passed in props', () => {
+        const wrapper = shallow(<MarkerSpotLabel align_label={'bottom'} />);
+        expect(wrapper.find('.chart-spot-label__time-value-container--bottom').exists()).to.be.true;
+    });
+    it('should have class .chart-spot-label__time-value-container--top if no align_label is passed in props', () => {
+        const wrapper = shallow(<MarkerSpotLabel />);
+        expect(wrapper.find('.chart-spot-label__time-value-container--top').exists()).to.be.true;
+        expect(wrapper.find('.chart-spot-label__time-value-container--bottom').exists()).to.be.false;
+    });
+    it('should toggle label on hover if has_hover_toggle is passed in props', async () => {
+        const wrapper = mount(<MarkerSpotLabel has_hover_toggle={true} />);
+        expect(wrapper.find('.chart-spot-label__info-container').exists()).to.be.false;
+
+        wrapper.find('.marker-hover-container').simulate('mouseenter');
+        wrapper.update();
+        expect(wrapper.find('.chart-spot-label__info-container').exists()).to.be.true;
+
+        wrapper.find('.marker-hover-container').simulate('mouseleave');
+        wrapper.update();
+        expect(wrapper.find('.chart-spot-label__info-container').exists()).to.be.false;
+    });
+    it('should not toggle label on hover if has_label_toggle is not passed in props', () => {
+        const wrapper = shallow(<MarkerSpotLabel />);
+        expect(wrapper.find('.chart-spot-label__info-container').exists()).to.be.true;
+        expect(wrapper.find('.marker-hover-container').exists()).to.equal(false);
+    });
+    it('should have class .chart-spot-label__value-container--won if status won is passed in props', () => {
+        const wrapper = shallow(<MarkerSpotLabel status={'won'} />);
+        expect(wrapper.find('.chart-spot-label__value-container--won').exists()).to.be.true;
+    });
+    it('should have class .chart-spot-label__value-container--lost if status lost is passed in props', () => {
+        const wrapper = shallow(<MarkerSpotLabel status={'lost'} />);
+        expect(wrapper.find('.chart-spot-label__value-container--lost').exists()).to.be.true;
+    });
+});
diff --git a/packages/reports/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot.spec.js b/packages/reports/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot.spec.js
new file mode 100644
index 000000000000..4327cb046a54
--- /dev/null
+++ b/packages/reports/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot.spec.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { expect } from 'chai';
+import { configure, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import MarkerSpot from '../marker-spot.jsx';
+
+configure({ adapter: new Adapter() });
+
+describe('MarkerSpot', () => {
+    it('should render one <MarkerSpot /> component', () => {
+        const wrapper = shallow(<MarkerSpot />);
+        expect(wrapper).to.have.length(1);
+    });
+    it('should not have class .chart-spot__spot--lost or .chart-spot__spot--won if no status is passed in props', () => {
+        const wrapper = shallow(<MarkerSpot />);
+        expect(wrapper.find('.chart-spot__spot--lost').exists()).to.be.false;
+        expect(wrapper.find('.chart-spot__spot--lost').exists()).to.be.false;
+        expect(wrapper.find('.chart-spot').exists()).to.be.true;
+    });
+});
diff --git a/packages/reports/src/Modules/SmartChart/Components/Markers/index.js b/packages/reports/src/Modules/SmartChart/Components/Markers/index.js
new file mode 100644
index 000000000000..3fea22c76b32
--- /dev/null
+++ b/packages/reports/src/Modules/SmartChart/Components/Markers/index.js
@@ -0,0 +1 @@
+export default from './marker.jsx';
diff --git a/packages/reports/src/Modules/SmartChart/Components/Markers/marker-line.jsx b/packages/reports/src/Modules/SmartChart/Components/Markers/marker-line.jsx
new file mode 100644
index 000000000000..c4a5c7083a7e
--- /dev/null
+++ b/packages/reports/src/Modules/SmartChart/Components/Markers/marker-line.jsx
@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Icon } from '@deriv/components';
+
+const MarkerLine = ({ label, line_style, marker_config, status }) => {
+    // TODO: Find a more elegant solution
+    if (!marker_config) return <div />;
+    return (
+        <div className={classNames('chart-marker-line__wrapper', `chart-marker-line--${line_style}`)}>
+            {label === marker_config.LINE_END.content_config.label && (
+                <Icon
+                    icon='IcContractExitTimeCircle'
+                    className='chart-marker-line__icon'
+                    color={status === 'lost' ? 'red' : 'green'}
+                    size={24}
+                />
+            )}
+            {label === marker_config.LINE_START.content_config.label && (
+                <Icon
+                    icon='IcContractStartTimeCircle'
+                    className='chart-marker-line__icon chart-marker-line__icon--time'
+                    color='secondary'
+                    size={24}
+                />
+            )}
+        </div>
+    );
+};
+
+MarkerLine.propTypes = {
+    label: PropTypes.string,
+    line_style: PropTypes.string,
+    marker_config: PropTypes.object,
+    status: PropTypes.oneOf(['won', 'lost']),
+};
+export default observer(MarkerLine);
diff --git a/packages/reports/src/Modules/SmartChart/Components/Markers/marker-spot-label.jsx b/packages/reports/src/Modules/SmartChart/Components/Markers/marker-spot-label.jsx
new file mode 100644
index 000000000000..bfcb77a258f9
--- /dev/null
+++ b/packages/reports/src/Modules/SmartChart/Components/Markers/marker-spot-label.jsx
@@ -0,0 +1,82 @@
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Icon, Text } from '@deriv/components';
+import { addComma, toMoment } from '@deriv/shared';
+
+import MarkerSpot from './marker-spot.jsx';
+
+const MarkerSpotLabel = ({
+    align_label,
+    has_hover_toggle,
+    spot_className,
+    spot_count,
+    spot_epoch,
+    spot_value,
+    status,
+}) => {
+    const [show_label, setShowLabel] = React.useState(!has_hover_toggle);
+
+    const handleHoverToggle = () => {
+        setShowLabel(!show_label);
+    };
+
+    let marker_spot = <MarkerSpot className={spot_className} spot_count={spot_count} />;
+
+    if (has_hover_toggle) {
+        marker_spot = (
+            <div className='marker-hover-container' onMouseEnter={handleHoverToggle} onMouseLeave={handleHoverToggle}>
+                {marker_spot}
+            </div>
+        );
+    }
+
+    return (
+        <div className={'chart-spot-label'}>
+            {show_label && (
+                <div className='chart-spot-label__info-container'>
+                    <div
+                        className={`chart-spot-label__time-value-container chart-spot-label__time-value-container--${align_label}`}
+                    >
+                        <div className='chart-spot-label__time-container'>
+                            <Icon
+                                icon='IcClockOutline'
+                                height={10}
+                                width={10}
+                                className='chart-spot-label__time-icon'
+                            />
+                            <Text as='p' color='prominent' size='xxxs'>
+                                {toMoment(+spot_epoch).format('HH:mm:ss')}
+                            </Text>
+                        </div>
+                        <div
+                            className={classNames('chart-spot-label__value-container', {
+                                'chart-spot-label__value-container--won': status === 'won',
+                                'chart-spot-label__value-container--lost': status === 'lost',
+                            })}
+                        >
+                            <p>{addComma(spot_value)}</p>
+                        </div>
+                    </div>
+                </div>
+            )}
+            {marker_spot}
+        </div>
+    );
+};
+
+MarkerSpotLabel.defaultProps = {
+    align_label: 'top',
+};
+
+MarkerSpotLabel.propTypes = {
+    align_label: PropTypes.oneOf(['top', 'bottom']),
+    has_hover_toggle: PropTypes.bool,
+    spot_className: PropTypes.string,
+    spot_count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    spot_epoch: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    spot_value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    status: PropTypes.oneOf(['won', 'lost']),
+};
+export default observer(MarkerSpotLabel);
diff --git a/packages/reports/src/Modules/SmartChart/Components/Markers/marker-spot.jsx b/packages/reports/src/Modules/SmartChart/Components/Markers/marker-spot.jsx
new file mode 100644
index 000000000000..a242334713b6
--- /dev/null
+++ b/packages/reports/src/Modules/SmartChart/Components/Markers/marker-spot.jsx
@@ -0,0 +1,15 @@
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const MarkerSpot = ({ className, spot_count }) => (
+    <div className={classNames('chart-spot', className)}>{spot_count}</div>
+);
+
+MarkerSpot.propTypes = {
+    className: PropTypes.string,
+    spot_count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
+
+export default observer(MarkerSpot);
diff --git a/packages/reports/src/Modules/SmartChart/Components/Markers/marker.jsx b/packages/reports/src/Modules/SmartChart/Components/Markers/marker.jsx
new file mode 100644
index 000000000000..c5f2cef75b2b
--- /dev/null
+++ b/packages/reports/src/Modules/SmartChart/Components/Markers/marker.jsx
@@ -0,0 +1,41 @@
+import { toJS } from 'mobx';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { FastMarker } from 'Modules/SmartChart';
+
+const ChartMarker = ({ marker_config, marker_content_props, is_bottom_widget_visible }) => {
+    const { ContentComponent, ...marker_props } = marker_config;
+
+    // TODO:
+    //  - rename x to epoch
+    //  - rename y to price
+    const onRef = ref => {
+        if (ref) {
+            // NOTE: null price means vertical line.
+            if (!marker_props.y) {
+                const margin = (is_bottom_widget_visible ? 115 : 0) + 24; // digit contracts have a widget at the bottom // height of line marker icon
+
+                ref.div.style.height = `calc(100% - ${margin}px)`;
+                ref.div.style.zIndex = '-1';
+            }
+            ref.setPosition({
+                epoch: +marker_props.x,
+                price: +marker_props.y,
+            });
+        }
+    };
+
+    // memoizing the marker components data:
+    const getMemoizedComponent = React.useCallback(() => {
+        return <ContentComponent {...toJS(marker_content_props)} />;
+    }, [marker_content_props]);
+
+    return <FastMarker markerRef={onRef}>{getMemoizedComponent()}</FastMarker>;
+};
+
+ChartMarker.propTypes = {
+    marker_config: PropTypes.object,
+    marker_content_props: PropTypes.object,
+};
+
+export default ChartMarker;
diff --git a/packages/reports/src/Modules/SmartChart/Components/all-markers.jsx b/packages/reports/src/Modules/SmartChart/Components/all-markers.jsx
new file mode 100644
index 000000000000..8ea050df9cbd
--- /dev/null
+++ b/packages/reports/src/Modules/SmartChart/Components/all-markers.jsx
@@ -0,0 +1,608 @@
+// Things to do before touching this file :P
+// 1- Please read https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
+// 2- Please read RawMarker.jsx in https://github.com/binary-com/SmartCharts
+// 3- Please read contract-store.js & trade.jsx carefully
+import React from 'react';
+import { getDecimalPlaces } from '@deriv/shared';
+import { RawMarker } from 'Modules/SmartChart';
+import * as ICONS from './icons';
+
+const is_firefox = navigator.userAgent.search('Firefox') > 0;
+
+const RawMarkerMaker = draw_callback => {
+    const Marker = ({ epoch_array, price_array, ...rest }) => (
+        <RawMarker
+            epoch_array={epoch_array}
+            price_array={price_array}
+            draw_callback={args => draw_callback({ ...args, ...rest })}
+        />
+    );
+    return Marker;
+};
+
+function get_color({ status, profit, is_dark_theme }) {
+    const colors = is_dark_theme
+        ? {
+              open: '#377cfc',
+              won: '#00a79e',
+              lost: '#cc2e3d',
+              sold: '#ffad3a',
+              fg: '#ffffff',
+              bg: '#0e0e0e',
+          }
+        : {
+              open: '#377cfc',
+              won: '#4bb4b3',
+              lost: '#ec3f3f',
+              sold: '#ffad3a',
+              fg: '#333333',
+              bg: '#ffffff',
+          };
+    let color = colors[status || 'open'];
+    if (status === 'open' && profit) {
+        color = colors[profit > 0 ? 'won' : 'lost'];
+    }
+    return color;
+}
+
+const calc_scale = zoom => {
+    return zoom ? Math.max(Math.min(Math.sqrt(zoom / 18), 1.2), 0.8) : 1;
+};
+
+const hex_map = [];
+const calc_opacity = (from, to) => {
+    if (hex_map.length === 0) {
+        for (let i = 255; i >= 0; --i) {
+            hex_map[i] = (i < 16 ? '0' : '') + i.toString(16);
+        }
+    }
+    const opacity = Math.floor(Math.min(Math.max(to - from - 10, 0) / 6, 1) * 255);
+    return hex_map[opacity];
+};
+
+/** @param {CanvasRenderingContext2D} ctx */
+const draw_path = (ctx, { zoom, top, left, icon }) => {
+    ctx.save();
+    const scale = calc_scale(zoom);
+
+    ctx.translate(left - (icon.width * scale) / 2, top - (icon.height * scale) / 2);
+
+    ctx.scale(scale, scale);
+
+    icon.paths.forEach(({ points, fill, stroke }) => {
+        if (fill) {
+            ctx.fillStyle = fill;
+        }
+        if (stroke) {
+            ctx.strokeStyle = stroke;
+        }
+        ctx.beginPath();
+        let prev_x, prev_y;
+        for (let idx = 0; idx < points.length; idx++) {
+            let x, y, cx1, cx2, cy1, cy2, r;
+            if (points[idx] === 'M') {
+                x = points[++idx];
+                y = points[++idx];
+                ctx.moveTo(x, y);
+            } else if (points[idx] === 'L') {
+                x = points[++idx];
+                y = points[++idx];
+                ctx.lineTo(x, y);
+            } else if (points[idx] === 'V') {
+                y = points[++idx];
+                ctx.lineTo(prev_x, y);
+            } else if (points[idx] === 'H') {
+                x = points[++idx];
+                ctx.lineTo(x, prev_y);
+            } else if (points[idx] === 'Q') {
+                cx1 = points[++idx];
+                cy1 = points[++idx];
+                x = points[++idx];
+                y = points[++idx];
+                ctx.quadraticCurveTo(cx1, cy1, x, y);
+            } else if (points[idx] === 'C') {
+                cx1 = points[++idx];
+                cy1 = points[++idx];
+                cx2 = points[++idx];
+                cy2 = points[++idx];
+                x = points[++idx];
+                y = points[++idx];
+                ctx.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);
+            } else if (points[idx] === 'A') {
+                x = points[++idx];
+                y = points[++idx];
+                r = points[++idx];
+                const start_a = points[++idx];
+                const end_a = points[++idx];
+                ctx.arc(x, y, r, start_a, end_a);
+            }
+            prev_x = x;
+            prev_y = y;
+        }
+        ctx.closePath();
+        if (fill) {
+            ctx.fill();
+        }
+        if (stroke) {
+            ctx.stroke();
+        }
+    });
+    ctx.scale(1, 1);
+    ctx.restore();
+};
+
+const render_label = ({ ctx, text, tick: { zoom, left, top } }) => {
+    const scale = calc_scale(zoom);
+    const size = Math.floor(scale * 3 + 7);
+    ctx.font = `${size}px Roboto`;
+    text.split(/\n/).forEach((line, idx) => {
+        const w = Math.ceil(ctx.measureText(line).width);
+        ctx.fillText(line, left - 5 - w, top + idx * size + 1);
+    });
+};
+
+const shadowed_text = ({ ctx, is_dark_theme, text, left, top, scale }) => {
+    ctx.textAlign = 'center';
+    const size = Math.floor(scale * 12);
+    ctx.font = `bold ${size}px BinarySymbols, Roboto`;
+    if (!is_firefox) {
+        ctx.shadowColor = is_dark_theme ? 'rgba(16,19,31,1)' : 'rgba(255,255,255,1)';
+        ctx.shadowBlur = 12;
+    }
+    // fillText once in firefox due to disabling of text shadows, for default cases where its enabled, set to 5 (to add blur intensity)
+    for (let i = 0; i < (is_firefox ? 1 : 5); ++i) {
+        ctx.fillText(text, left, top);
+    }
+};
+
+const TickContract = RawMarkerMaker(
+    ({
+        ctx: context,
+        canvas_height: canvas_fixed_height,
+        points: [start, ...ticks],
+        prices: [barrier], // TODO: support two barrier contracts
+        is_last_contract,
+        is_dark_theme,
+        granularity,
+        contract_info: {
+            // contract_type,
+            // exit_tick_time,
+            status,
+            profit,
+            is_sold,
+            is_expired,
+            // tick_stream,
+            tick_count,
+        },
+    }) => {
+        /** @type {CanvasRenderingContext2D} */
+        const ctx = context;
+
+        const color = get_color({
+            is_dark_theme,
+            status,
+            profit: is_sold ? profit : null,
+        });
+
+        ctx.save();
+        ctx.strokeStyle = color;
+        ctx.fillStyle = color;
+
+        const draw_start_line = is_last_contract && start.visible && !is_sold;
+        const scale = calc_scale(start.zoom);
+
+        const canvas_height = canvas_fixed_height / window.devicePixelRatio;
+        if (barrier) {
+            barrier = Math.min(Math.max(barrier, 2), canvas_height - 32); // eslint-disable-line
+        }
+
+        if (draw_start_line) {
+            render_label({
+                ctx,
+                text: 'Start\nTime',
+                tick: { zom: start.zoom, left: start.left - 1 * scale, top: canvas_height - 50 },
+            });
+            ctx.beginPath();
+            ctx.setLineDash([3, 3]);
+            ctx.moveTo(start.left - 1 * scale, 0);
+            if (ticks.length && barrier) {
+                ctx.lineTo(start.left - 1 * scale, barrier - 34 * scale);
+                ctx.moveTo(start.left - 1 * scale, barrier + 4 * scale);
+            }
+            ctx.lineTo(start.left - 1 * scale, canvas_fixed_height);
+            ctx.stroke();
+        }
+
+        if (!ticks.length || !barrier) {
+            ctx.restore();
+            return;
+        }
+        const entry = ticks[0];
+        const exit = ticks[ticks.length - 1];
+
+        // barrier line
+        const opacity = is_sold ? calc_opacity(start.left, exit.left) : '';
+        if (start.visible || entry.visible || exit.visible) {
+            ctx.strokeStyle = color + opacity;
+            ctx.beginPath();
+            ctx.setLineDash([1, 1]);
+            ctx.moveTo(start.left, barrier);
+            ctx.lineTo(entry.left, barrier);
+            ctx.stroke();
+
+            ctx.beginPath();
+            ctx.setLineDash([]);
+            ctx.moveTo(entry.left, barrier);
+            ctx.lineTo(exit.left, barrier);
+            ctx.stroke();
+            ctx.strokeStyle = color;
+        }
+        // ticks for last contract
+        if (is_last_contract && granularity === 0 && !is_sold) {
+            ticks
+                .filter(tick => tick.visible)
+                .forEach(tick => {
+                    const clr = tick === exit ? color : get_color({ status: 'fg', is_dark_theme });
+                    ctx.fillStyle = clr + opacity;
+                    ctx.beginPath();
+                    ctx.arc(tick.left - 1 * scale, tick.top, 1.5 * scale, 0, Math.PI * 2);
+                    ctx.fill();
+                });
+            ctx.fillStyle = color;
+        }
+        // entry & expiry markers
+        if (granularity === 0) {
+            [entry, is_expired ? exit : null].forEach(tick => {
+                if (tick && tick.visible) {
+                    ctx.strokeStyle = color + opacity;
+                    ctx.setLineDash([2, 2]);
+                    ctx.beginPath();
+                    ctx.moveTo(tick.left - 1 * scale, tick.top);
+                    ctx.lineTo(tick.left - 1 * scale, barrier);
+                    ctx.stroke();
+
+                    ctx.fillStyle = color + opacity;
+                    ctx.beginPath();
+                    ctx.arc(tick.left - 1 * scale, tick.top, 3 * scale, 0, Math.PI * 2);
+                    ctx.fill();
+
+                    if (tick === entry) {
+                        ctx.beginPath();
+                        ctx.fillStyle = get_color({ status: 'bg', is_dark_theme }) + opacity;
+                        ctx.arc(tick.left - 1 * scale, tick.top, 2 * scale, 0, Math.PI * 2);
+                        ctx.fill();
+                    }
+                }
+            });
+            ctx.strokeStyle = color;
+            ctx.fillStyle = color;
+        }
+        // count down
+        if (start.visible && !is_sold) {
+            shadowed_text({
+                ctx,
+                scale,
+                is_dark_theme,
+                text: `${ticks.length - 1}/${tick_count}`,
+                left: start.left,
+                top: barrier - 27 * scale,
+            });
+        }
+        // start-time marker
+        if (start.visible) {
+            draw_path(ctx, {
+                top: barrier - 9 * scale,
+                left: start.left - 1 * scale,
+                zoom: start.zoom,
+                icon: ICONS.START.with_color(
+                    color + (is_sold ? opacity : ''),
+                    get_color({ status: 'bg', is_dark_theme }) + (is_sold ? opacity : '')
+                ),
+            });
+        }
+        // status marker
+        if (exit.visible && is_sold) {
+            draw_path(ctx, {
+                top: barrier - 9 * scale,
+                left: exit.left + 8 * scale,
+                zoom: exit.zoom,
+                icon: ICONS.END.with_color(color, get_color({ status: 'bg', is_dark_theme })),
+            });
+        }
+        ctx.restore();
+    }
+);
+
+const currency_symbols = {
+    AUD: '\u0041\u0024',
+    EUR: '\u20AC',
+    GBP: '\u00A3',
+    JPY: '\u00A5',
+    USD: '\u0024',
+    BTC: '\u20bf',
+    BCH: '\ue901',
+    ETH: '\u0045',
+    ETC: '\ue900',
+    LTC: '\u0141',
+    UST: '\u20ae',
+};
+
+const NonTickContract = RawMarkerMaker(
+    ({
+        ctx: context,
+        canvas_height: canvas_fixed_height,
+        points: [start, expiry, entry, exit],
+        is_last_contract,
+        prices: [barrier, entry_tick_top, exit_tick_top], // TODO: support two barrier contracts
+        is_dark_theme,
+        granularity,
+        currency,
+        contract_info: {
+            // contract_type,
+            // exit_tick_time,
+            // is_expired,
+            is_sold,
+            status,
+            profit,
+        },
+    }) => {
+        /** @type {CanvasRenderingContext2D} */
+        const ctx = context;
+
+        // the y value reported for candles is not accurate
+        if (granularity !== 0) {
+            if (entry) {
+                entry.top = entry_tick_top;
+            }
+            if (exit) {
+                exit.top = exit_tick_top;
+            }
+        }
+
+        const color = get_color({ status, profit, is_dark_theme });
+
+        ctx.save();
+        ctx.strokeStyle = color;
+        ctx.fillStyle = color;
+
+        const draw_start_line = is_last_contract && start.visible && !is_sold;
+        const show_profit = is_last_contract && !is_sold && profit && start.visible && barrier;
+        const scale = calc_scale(start.zoom);
+        const opacity = is_sold ? calc_opacity(start.left, expiry.left) : '';
+
+        const canvas_height = canvas_fixed_height / window.devicePixelRatio;
+        if (barrier) {
+            barrier = Math.min(Math.max(barrier, 2), canvas_height - 32); // eslint-disable-line
+        }
+
+        if (draw_start_line) {
+            render_label({
+                ctx,
+                text: 'Start\nTime',
+                tick: {
+                    zom: start.zoom,
+                    left: start.left - 1 * scale,
+                    top: canvas_height - 50,
+                },
+            });
+            ctx.beginPath();
+            ctx.setLineDash([3, 3]);
+            ctx.moveTo(start.left - 1 * scale, 0);
+            if (barrier) {
+                ctx.lineTo(start.left - 1 * scale, barrier - (show_profit ? 38 : 20) * scale);
+                ctx.moveTo(start.left - 1 * scale, barrier + 4 * scale);
+            }
+            ctx.lineTo(start.left - 1 * scale, canvas_fixed_height);
+            ctx.stroke();
+        }
+        // barrier line
+        if (barrier && entry && (start.visible || expiry.visible || Math.sign(start.left) !== Math.sign(expiry.left))) {
+            ctx.strokeStyle = color + opacity;
+            ctx.beginPath();
+            ctx.setLineDash([1, 1]);
+            ctx.moveTo(start.left, barrier);
+            ctx.lineTo(entry.left, barrier);
+            ctx.stroke();
+
+            ctx.beginPath();
+            ctx.setLineDash([]);
+            ctx.moveTo(entry.left, barrier);
+            ctx.lineTo(expiry.left, barrier);
+            ctx.stroke();
+            ctx.strokeStyle = color;
+        }
+
+        // entry & expiry tick markers
+        [entry, exit].forEach(tick => {
+            if (tick && tick.visible) {
+                ctx.strokeStyle = color + opacity;
+                ctx.setLineDash([2, 2]);
+                ctx.beginPath();
+                ctx.moveTo(tick.left - 1 * scale, tick.top);
+                ctx.lineTo(tick.left - 1 * scale, barrier);
+                ctx.stroke();
+
+                ctx.fillStyle = color + opacity;
+                ctx.beginPath();
+                ctx.arc(tick.left - 1 * scale, tick.top, 3 * scale, 0, Math.PI * 2);
+                ctx.fill();
+
+                if (tick === entry) {
+                    ctx.beginPath();
+                    ctx.fillStyle = get_color({ status: 'bg', is_dark_theme }) + opacity;
+                    ctx.arc(tick.left - 1 * scale, tick.top, 2 * scale, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+                ctx.fillStyle = color;
+                ctx.strokeStyle = color;
+            }
+        });
+
+        // start-time marker
+        if (start && start.visible && barrier) {
+            draw_path(ctx, {
+                top: barrier - 9 * scale,
+                left: start.left - 1 * scale,
+                zoom: start.zoom,
+                icon: ICONS.START.with_color(color + opacity),
+            });
+        }
+        // show the profit
+        if (show_profit) {
+            const symbol = currency_symbols[currency] || '';
+            const decimal_places = getDecimalPlaces(currency);
+            const sign = profit < 0 ? '-' : profit > 0 ? '+' : ' '; // eslint-disable-line
+            const text = `${sign}${symbol}${Math.abs(profit).toFixed(decimal_places)}`;
+            shadowed_text({
+                ctx,
+                scale,
+                text,
+                is_dark_theme,
+                left: start.left,
+                top: barrier - 28 * scale,
+            });
+        }
+        // status marker
+        if (expiry.visible) {
+            draw_path(ctx, {
+                top: barrier - 9 * scale,
+                left: expiry.left + 8 * scale,
+                zoom: expiry.zoom,
+                icon: ICONS.END.with_color(color, get_color({ status: 'bg', is_dark_theme })),
+            });
+        }
+        ctx.restore();
+    }
+);
+
+const DigitContract = RawMarkerMaker(
+    ({
+        ctx: context,
+        points: [start, ...ticks],
+        prices: [entry_tick_top, exit_tick_top],
+        is_last_contract,
+        is_dark_theme,
+        granularity,
+        contract_info: {
+            // contract_type,
+            status,
+            profit,
+            is_sold,
+            // barrier,
+            tick_stream,
+            tick_count,
+        },
+    }) => {
+        /** @type {CanvasRenderingContext2D} */
+        const ctx = context;
+
+        const color = get_color({
+            is_dark_theme,
+            status,
+            profit: is_sold ? profit : null,
+        });
+
+        ctx.save();
+        ctx.strokeStyle = color;
+        ctx.fillStyle = color;
+
+        const draw_start_line = is_last_contract && start.visible && !is_sold;
+        const scale = calc_scale(start.zoom);
+
+        if (granularity !== 0 && start && entry_tick_top) {
+            start.top = entry_tick_top;
+        }
+        if (draw_start_line) {
+            ctx.beginPath();
+            ctx.setLineDash([3, 3]);
+            ctx.moveTo(start.left - 1 * scale, 0);
+            if (ticks.length) {
+                ctx.lineTo(start.left - 1 * scale, start.top - 34 * scale);
+                ctx.moveTo(start.left - 1 * scale, start.top + 4 * scale);
+            }
+            ctx.lineTo(start.left - 1 * scale, ctx.canvas.height);
+            ctx.stroke();
+        }
+
+        if (!ticks.length) {
+            ctx.restore();
+            return;
+        }
+        const expiry = ticks[ticks.length - 1];
+        const opacity = is_sold ? calc_opacity(start.left, expiry.left) : '';
+        if (granularity !== 0 && expiry && exit_tick_top) {
+            expiry.top = exit_tick_top;
+        }
+
+        // count down
+        if (start.visible && start.top && !is_sold) {
+            shadowed_text({
+                ctx,
+                scale,
+                is_dark_theme,
+                text: `${ticks.length}/${tick_count}`,
+                left: start.left - 1 * scale,
+                top: start.top - 27 * scale,
+            });
+        }
+        // start-time marker
+        if (start.visible && (granularity === 0 || !is_sold)) {
+            draw_path(ctx, {
+                top: start.top - 9 * scale,
+                left: start.left - 1 * scale,
+                zoom: start.zoom,
+                icon: ICONS.START.with_color(color + opacity, get_color({ status: 'bg', is_dark_theme }) + opacity),
+            });
+        }
+        // remaining ticks
+        ticks.forEach((tick, idx) => {
+            if (tick !== expiry) {
+                return;
+            }
+            if (!tick.visible) {
+                return;
+            }
+            if (granularity !== 0 && tick !== expiry) {
+                return;
+            }
+            if (granularity !== 0 && tick === expiry && !is_sold) {
+                return;
+            }
+            const clr = tick !== expiry ? get_color({ status: 'fg', is_dark_theme }) : color;
+            ctx.beginPath();
+            ctx.fillStyle = clr;
+            ctx.arc(tick.left, tick.top, 7 * scale, 0, Math.PI * 2);
+            ctx.fill();
+
+            ctx.beginPath();
+            ctx.fillStyle = is_sold ? color : get_color({ status: 'bg', is_dark_theme });
+            ctx.arc(tick.left, tick.top, 6 * scale, 0, Math.PI * 2);
+            ctx.fill();
+
+            const last_tick = tick_stream[idx];
+            const last_digit = last_tick.tick_display_value.slice(-1);
+            ctx.fillStyle = is_sold ? 'white' : clr;
+            ctx.textAlign = 'center';
+            ctx.shadowBlur = 0;
+            ctx.font = `bold ${12 * scale}px BinarySymbols, Roboto`;
+            ctx.fillText(last_digit, tick.left, tick.top);
+        });
+        // status marker
+        if (expiry.visible && is_sold) {
+            ctx.fillStyle = color;
+            draw_path(ctx, {
+                top: expiry.top - 16 * scale,
+                left: expiry.left + 8 * scale,
+                zoom: expiry.zoom,
+                icon: ICONS.END.with_color(color, get_color({ status: 'bg', is_dark_theme })),
+            });
+        }
+        ctx.restore();
+    }
+);
+
+export default {
+    TickContract,
+    NonTickContract,
+    DigitContract,
+};
diff --git a/packages/reports/src/Modules/SmartChart/Components/bottom-widgets.jsx b/packages/reports/src/Modules/SmartChart/Components/bottom-widgets.jsx
new file mode 100644
index 000000000000..a3c845fe6c8e
--- /dev/null
+++ b/packages/reports/src/Modules/SmartChart/Components/bottom-widgets.jsx
@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const BottomWidgets = ({ Digits }) => <div className='bottom-widgets'>{Digits}</div>;
+
+BottomWidgets.propTypes = {
+    Digits: PropTypes.node,
+};
+
+export default BottomWidgets;
diff --git a/packages/reports/src/Modules/SmartChart/Components/control-widgets.jsx b/packages/reports/src/Modules/SmartChart/Components/control-widgets.jsx
new file mode 100644
index 000000000000..182d8d7384df
--- /dev/null
+++ b/packages/reports/src/Modules/SmartChart/Components/control-widgets.jsx
@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { DesktopWrapper } from '@deriv/components';
+import { ChartMode, DrawTools, Share, StudyLegend, Views } from 'Modules/SmartChart';
+
+const ControlWidgets = ({ updateChartType, updateGranularity }) => (
+    <React.Fragment>
+        <DesktopWrapper>
+            <ChartMode
+                portalNodeId='modal_root'
+                onChartType={type => updateChartType(type)}
+                onGranularity={granularity => updateGranularity(granularity)}
+            />
+            <StudyLegend portalNodeId='modal_root' searchInputClassName='data-hj-whitelist' />
+            <DrawTools portalNodeId='modal_root' />
+            <Views portalNodeId='modal_root' searchInputClassName='data-hj-whitelist' />
+            <Share portalNodeId='modal_root' />
+        </DesktopWrapper>
+    </React.Fragment>
+);
+
+ControlWidgets.propTypes = {
+    updateChartType: PropTypes.func,
+    updateGranularity: PropTypes.func,
+};
+
+export default ControlWidgets;
diff --git a/packages/reports/src/Modules/SmartChart/Components/icons.js b/packages/reports/src/Modules/SmartChart/Components/icons.js
new file mode 100644
index 000000000000..8555cf7eb8a1
--- /dev/null
+++ b/packages/reports/src/Modules/SmartChart/Components/icons.js
@@ -0,0 +1,61 @@
+// THIS FILE CONTAINS THE ICONS RENDERED IN CANVAS2D CONTEXT.
+
+// All path commands *MUST* be absolute (MCLVQZ).
+// Use figma.com which by default exports paths as absolute.
+// Only <path /> tags is supported.
+const parse_svg = markup => {
+    // make tests pass
+    if (!window.DOMParser) {
+        return null;
+    }
+
+    const parser = new window.DOMParser();
+    const svg = parser.parseFromString(markup, 'image/svg+xml').children[0];
+    let { width, height } = svg.attributes;
+    width = width.value * 1;
+    height = height.value * 1;
+
+    const paths = [];
+    [].forEach.call(svg.children, p => {
+        const { d, fill, stroke } = p.attributes;
+        paths.push({
+            points: d.value
+                .match(/M|C|H|A|L|V|-?\d*(\.\d+)?/g)
+                .filter(e => e)
+                .map(e => ('MCHALV'.indexOf(e) === -1 ? e * 1 : e)),
+            fill: fill && fill.value,
+            stroke: stroke && stroke.value,
+        });
+    });
+    function with_color(color, bg_color = 'white') {
+        return {
+            width,
+            height,
+            paths: paths.map(({ points, fill, stroke }) => ({
+                points,
+                stroke,
+                fill: fill !== 'white' ? color : bg_color,
+            })),
+        };
+    }
+
+    return {
+        width,
+        height,
+        paths,
+        with_color,
+    };
+};
+
+export const START = parse_svg(`
+<svg width="15" height="20" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7,20 C11.2,14.4 14,10.8659932 14,7 C14,3.13400675 10.8659932,0 7,0 C3.13400675,0 0,3.13400675 0,7 C0,10.8659932 2.8,14.4 7,20 Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="A7 7 4.2 0 6.283185307179586" fill="white" />
+</svg>`);
+
+export const END = parse_svg(`
+<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2L18 2L18 12L2 12Z" fill="white" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2,0 L2,1 L19,1 L19,12 L2,12 L2,20 L1,20 L1,0 L2,0 Z M18,8 L15,8 L15,11 L18,11 L18,8 Z M12,8 L9,8 L9,11 L12,11 L12,8 Z M6,8 L3,8 L3,11 L6,11 L6,8 Z M15,5 L12,5 L12,8 L15,8 L15,5 Z M9,5 L6,5 L6,8 L9,8 L9,5 Z M6,2 L3,2 L3,5 L6,5 L6,2 Z M18,2 L15,2 L15,5 L18,5 L18,2 Z M12,2 L9,2 L9,5 L12,5 L12,2 Z" fill="#333333"/>
+</svg>
+`);
diff --git a/packages/reports/src/Modules/SmartChart/Components/toolbar-widgets.jsx b/packages/reports/src/Modules/SmartChart/Components/toolbar-widgets.jsx
new file mode 100644
index 000000000000..f98fa5684f6d
--- /dev/null
+++ b/packages/reports/src/Modules/SmartChart/Components/toolbar-widgets.jsx
@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { isDesktop, isMobile } from '@deriv/shared';
+import { ChartMode, DrawTools, Share, StudyLegend, Views, ToolbarWidget } from 'Modules/SmartChart';
+
+const ToolbarWidgets = ({ position, updateChartType, updateGranularity }) => (
+    <ToolbarWidget position={position || isMobile() ? 'bottom' : null}>
+        <ChartMode portalNodeId='modal_root' onChartType={updateChartType} onGranularity={updateGranularity} />
+        {isDesktop() && <StudyLegend portalNodeId='modal_root' searchInputClassName='data-hj-whitelist' />}
+        {isDesktop() && <Views portalNodeId='modal_root' searchInputClassName='data-hj-whitelist' />}
+        {isDesktop() && <DrawTools portalNodeId='modal_root' />}
+        {isDesktop() && <Share portalNodeId='modal_root' />}
+    </ToolbarWidget>
+);
+
+ToolbarWidgets.propTypes = {
+    position: PropTypes.string,
+    updateChartType: PropTypes.func,
+    updateGranularity: PropTypes.func,
+};
+
+export default React.memo(ToolbarWidgets);
diff --git a/packages/reports/src/Modules/SmartChart/Components/top-widgets.jsx b/packages/reports/src/Modules/SmartChart/Components/top-widgets.jsx
new file mode 100644
index 000000000000..467358061d04
--- /dev/null
+++ b/packages/reports/src/Modules/SmartChart/Components/top-widgets.jsx
@@ -0,0 +1,85 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { DesktopWrapper, MobileWrapper, Text } from '@deriv/components';
+import { localize } from '@deriv/translations';
+import { isEnded, isDigitContract } from '@deriv/shared';
+import { connect } from '../../../Stores/connect';
+import { ChartTitle } from '../index';
+
+const TradeInfo = ({ markers_array, granularity }) => {
+    const latest_tick_contract = markers_array[markers_array.length - 1];
+    if (!latest_tick_contract || !latest_tick_contract.contract_info.tick_stream) return null;
+
+    const is_ended = isEnded(latest_tick_contract.contract_info);
+    if (is_ended || granularity !== 0) return null;
+
+    const { contract_type, tick_stream, tick_count } = latest_tick_contract.contract_info;
+    const current_tick = isDigitContract(contract_type) ? tick_stream.length : Math.max(tick_stream.length - 1, 0);
+    return (
+        <Text weight='bold' className='recent-trade-info'>
+            {localize('Tick')} {current_tick}/{tick_count}
+        </Text>
+    );
+};
+
+const RecentTradeInfo = connect(({ modules }) => ({
+    granularity: modules.contract_trade.granularity,
+    markers_array: modules.contract_trade.markers_array,
+}))(TradeInfo);
+
+const TopWidgets = ({
+    InfoBox,
+    is_mobile,
+    is_title_enabled = true,
+    onSymbolChange,
+    y_axis_width,
+    theme,
+    open_market,
+    open,
+    is_digits_widget_active,
+}) => {
+    const ChartTitleLocal = (
+        <ChartTitle
+            open_market={open_market}
+            open={open}
+            enabled={is_title_enabled}
+            onChange={onSymbolChange}
+            searchInputClassName='data-hj-whitelist'
+            isNestedList={is_mobile}
+            portalNodeId={is_mobile ? 'deriv_app' : undefined}
+        />
+    );
+
+    const portal = ReactDOM.createPortal(
+        <div className={`smartcharts-${theme}`}>
+            <div
+                className='top-widgets-portal'
+                style={{
+                    width: `calc(100% - ${y_axis_width ? y_axis_width + 5 : 0}px)`,
+                }}
+            >
+                {ChartTitleLocal}
+                {!is_digits_widget_active && <RecentTradeInfo />}
+            </div>
+        </div>,
+        document.getElementById('app_contents')
+    );
+
+    return (
+        <React.Fragment>
+            {InfoBox}
+            <MobileWrapper>{portal}</MobileWrapper>
+            <DesktopWrapper>{ChartTitleLocal}</DesktopWrapper>
+        </React.Fragment>
+    );
+};
+
+TopWidgets.propTypes = {
+    InfoBox: PropTypes.node,
+    is_mobile: PropTypes.bool,
+    is_title_enabled: PropTypes.bool,
+    onSymbolChange: PropTypes.func,
+};
+
+export default TopWidgets;
diff --git a/packages/reports/src/Modules/SmartChart/Helpers/symbol.js b/packages/reports/src/Modules/SmartChart/Helpers/symbol.js
new file mode 100644
index 000000000000..00d2fadba0c6
--- /dev/null
+++ b/packages/reports/src/Modules/SmartChart/Helpers/symbol.js
@@ -0,0 +1,10 @@
+export const symbolChange = onSymbolChange =>
+    onSymbolChange &&
+    (symbol => {
+        onSymbolChange({
+            target: {
+                name: 'symbol',
+                value: symbol,
+            },
+        });
+    });
diff --git a/packages/reports/src/Modules/SmartChart/index.js b/packages/reports/src/Modules/SmartChart/index.js
new file mode 100644
index 000000000000..7ece48fba58a
--- /dev/null
+++ b/packages/reports/src/Modules/SmartChart/index.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { getUrlBase } from '@deriv/shared';
+
+const Module = import(/* webpackChunkName: "smart_chart", webpackPreload: true */ '@deriv/deriv-charts');
+
+Module.then(({ setSmartChartsPublicPath }) => {
+    setSmartChartsPublicPath(getUrlBase('/js/smartcharts/'));
+});
+
+// React.Lazy expects a default export for the component
+// SmartChart library exports many components
+const load = component_name => () =>
+    Module.then(module => {
+        return { default: module[component_name] };
+    });
+
+export const SmartChart = React.lazy(load('SmartChart'));
+export const ChartTitle = React.lazy(load('ChartTitle'));
+
+export const ChartSize = React.lazy(load('ChartSize'));
+export const ChartMode = React.lazy(load('ChartMode'));
+export const DrawTools = React.lazy(load('DrawTools'));
+export const Share = React.lazy(load('Share'));
+export const StudyLegend = React.lazy(load('StudyLegend'));
+export const Views = React.lazy(load('Views'));
+export const ToolbarWidget = React.lazy(load('ToolbarWidget'));
+
+export const FastMarker = React.lazy(load('FastMarker'));
+export const RawMarker = React.lazy(load('RawMarker'));
diff --git a/packages/reports/src/Stores/Modules/Contract/Constants/validation-rules.js b/packages/reports/src/Stores/Modules/Contract/Constants/validation-rules.js
index fc370ac0b083..334a548bbf8a 100644
--- a/packages/reports/src/Stores/Modules/Contract/Constants/validation-rules.js
+++ b/packages/reports/src/Stores/Modules/Contract/Constants/validation-rules.js
@@ -1,6 +1,6 @@
 import { localize } from '@deriv/translations';
 import { getTotalProfit } from '@deriv/shared';
-import { getBuyPrice } from 'Stores/Modules/Contract/Helpers/logic';
+import { getBuyPrice } from '../Helpers/logic';
 
 const getValidationRules = () => ({
     has_contract_update_stop_loss: {
diff --git a/packages/reports/src/Stores/Modules/Contract/Helpers/chart-marker-helpers.js b/packages/reports/src/Stores/Modules/Contract/Helpers/chart-marker-helpers.js
index 5c358708f5a8..d94ed3b3a360 100644
--- a/packages/reports/src/Stores/Modules/Contract/Helpers/chart-marker-helpers.js
+++ b/packages/reports/src/Stores/Modules/Contract/Helpers/chart-marker-helpers.js
@@ -1,6 +1,7 @@
 import extend from 'extend';
 import { isMobile, isUserSold, isMultiplierContract, isDigitContract } from '@deriv/shared';
-import { getEndTime } from 'Stores/Modules/Contract/Helpers/logic';
+import { getEndTime } from './logic';
+
 import { MARKER_TYPES_CONFIG } from '../../SmartChart/Constants/markers';
 
 const createMarkerConfig = (marker_type, x, y, content_config) =>
diff --git a/packages/reports/src/Stores/Modules/Contract/Helpers/multiplier.js b/packages/reports/src/Stores/Modules/Contract/Helpers/multiplier.js
index 21b2a8269991..5ed46fda25ac 100644
--- a/packages/reports/src/Stores/Modules/Contract/Helpers/multiplier.js
+++ b/packages/reports/src/Stores/Modules/Contract/Helpers/multiplier.js
@@ -1,4 +1,4 @@
-import { connect } from 'Stores/connect';
+import { connect } from '../../../connect';
 
 export const onToggleCancellation = ({ has_cancellation, onChangeMultiple }) => {
     // e.target.checked is not reliable, we have to toggle its previous value
diff --git a/packages/reports/src/Stores/Modules/Profit/Helpers/format-response.js b/packages/reports/src/Stores/Modules/Profit/Helpers/format-response.js
index 92a550f0877e..0b7ba3d5afb5 100644
--- a/packages/reports/src/Stores/Modules/Profit/Helpers/format-response.js
+++ b/packages/reports/src/Stores/Modules/Profit/Helpers/format-response.js
@@ -1,7 +1,7 @@
 import { formatMoney, toMoment } from '@deriv/shared';
 
-import { getMarketInformation } from 'Helpers/market-underlying';
-import { getSymbolDisplayName } from 'Stores/Modules/Trading/Helpers/active-symbols';
+import { getMarketInformation } from '../../../../Helpers/market-underlying';
+import { getSymbolDisplayName } from '../../Trading/Helpers/active-symbols';
 
 export const formatProfitTableTransactions = (transaction, currency, active_symbols = []) => {
     const format_string = 'DD MMM YYYY HH:mm:ss';
diff --git a/packages/reports/src/Stores/Modules/Trading/Constants/validation-rules.js b/packages/reports/src/Stores/Modules/Trading/Constants/validation-rules.js
index f3eb0fcdc70b..d8abc9345fcc 100644
--- a/packages/reports/src/Stores/Modules/Trading/Constants/validation-rules.js
+++ b/packages/reports/src/Stores/Modules/Trading/Constants/validation-rules.js
@@ -1,5 +1,5 @@
 import { localize } from '@deriv/translations';
-import { isSessionAvailable } from 'Stores/Modules/Trading/Helpers/start-date';
+import { isSessionAvailable } from '../Helpers/start-date';
 import { isHourValid, isMinuteValid, isTimeValid, toMoment } from '@deriv/shared';
 
 const getValidationRules = () => ({
diff --git a/packages/reports/src/Stores/Modules/Trading/Helpers/contract-type.js b/packages/reports/src/Stores/Modules/Trading/Helpers/contract-type.js
index 2dfeadecf51e..6f8f4a524918 100644
--- a/packages/reports/src/Stores/Modules/Trading/Helpers/contract-type.js
+++ b/packages/reports/src/Stores/Modules/Trading/Helpers/contract-type.js
@@ -7,10 +7,10 @@ import {
     shouldShowCancellation,
     WS,
 } from '@deriv/shared';
-import ServerTime from '_common/base/server_time';
+import ServerTime from '../../../../_common/base/server_time';
 import { localize } from '@deriv/translations';
 
-import { getUnitMap } from 'Stores/Modules/Portfolio/Helpers/details';
+import { getUnitMap } from '../../Portfolio/Helpers/details';
 import { buildBarriersConfig } from './barrier';
 import { buildDurationConfig, hasIntradayDurationUnit } from './duration';
 import { buildForwardStartingConfig, isSessionAvailable } from './start-date';
diff --git a/packages/reports/src/Stores/Modules/index.js b/packages/reports/src/Stores/Modules/index.js
index 0a4aa06d7d36..76496ff00bb2 100644
--- a/packages/reports/src/Stores/Modules/index.js
+++ b/packages/reports/src/Stores/Modules/index.js
@@ -1,3 +1,5 @@
+import ContractReplayStore from './Contract/contract-replay-store';
+import ContractTradeStore from './Contract/contract-trade-store';
 import PortfolioStore from './Portfolio/portfolio-store';
 import ProfitTableStore from './Profit/profit-store';
 import StatementStore from './Statement/statement-store';
@@ -5,6 +7,8 @@ import TradeStore from './Trading/trade-store';
 
 export default class ModulesStore {
     constructor(root_store) {
+        this.contract_replay = new ContractReplayStore({ root_store });
+        this.contract_trade = new ContractTradeStore({ root_store });
         this.portfolio = new PortfolioStore({ root_store });
         this.profit_table = new ProfitTableStore({ root_store });
         this.statement = new StatementStore({ root_store });
diff --git a/packages/reports/src/app.jsx b/packages/reports/src/app.jsx
index 1c4be2c3999c..57c52a7e135a 100644
--- a/packages/reports/src/app.jsx
+++ b/packages/reports/src/app.jsx
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Routes from './Containers/routes.jsx';
 import { MobxContentProvider } from './Stores/connect';
+
 import initStore from './init-store'; // eslint-disable-line import/extensions
 
 const App = ({ passthrough }) => {
diff --git a/packages/trader/package.json b/packages/trader/package.json
index 531bf83a7933..b80b1e11f116 100644
--- a/packages/trader/package.json
+++ b/packages/trader/package.json
@@ -89,6 +89,7 @@
         "@deriv/deriv-api": "^1.0.8",
         "@deriv/deriv-charts": "^0.5.1",
         "@deriv/shared": "^1.0.0",
+        "@deriv/reports": "^1.0.0",
         "@deriv/translations": "^1.0.0",
         "@types/classnames": "^2.2.11",
         "@types/react": "^16.14.21",
diff --git a/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx b/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx
index 468dfae040c8..c5bb5aff6b8b 100644
--- a/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx
+++ b/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx
@@ -8,7 +8,7 @@ import { getEndTime } from 'Stores/Modules/Contract/Helpers/logic';
 import { connect } from 'Stores/connect';
 import { getSymbolDisplayName } from 'Stores/Modules/Trading/Helpers/active-symbols';
 import { connectWithContractUpdate } from 'Stores/Modules/Contract/Helpers/multiplier';
-import { getMarketInformation } from 'Modules/Reports/Helpers/market-underlying';
+import { getMarketInformation } from 'Utils/Helpers/market-underlying';
 import { SwipeableContractDrawer } from './swipeable-components.jsx';
 import MarketClosedContractOverlay from './market-closed-contract-overlay.jsx';
 
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
index 10548aa88abc..e55634b32549 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
@@ -7,7 +7,7 @@ import { CSSTransition } from 'react-transition-group';
 import { Icon, DataList, Text } from '@deriv/components';
 import { routes, useNewRowTransition } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import EmptyPortfolioMessage from 'Modules/Reports/Components/empty-portfolio-message.jsx';
+import EmptyPortfolioMessage from '@deriv/reports';
 import { connect } from 'Stores/connect';
 import PositionsDrawerCard from './PositionsDrawerCard';
 import { filterByContractType } from './helpers';
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx
index 8b28f99770d0..8de266809b17 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx
@@ -20,7 +20,7 @@ import { connectWithContractUpdate } from 'Stores/Modules/Contract/Helpers/multi
 import { getEndTime } from 'Stores/Modules/Contract/Helpers/logic';
 import { PositionsCardLoader } from 'App/Components/Elements/ContentLoader';
 import { getContractTypeDisplay, getCardLabels } from 'Constants/contract';
-import { getMarketInformation } from 'Modules/Reports/Helpers/market-underlying';
+import { getMarketInformation } from 'Utils/Helpers/market-underlying';
 import ResultMobile from './result-mobile.jsx';
 
 const PositionsModalCard = ({
diff --git a/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx b/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx
index ede157507766..441b48fbe737 100644
--- a/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx
+++ b/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx
@@ -4,7 +4,7 @@ import { Icon, Div100vhContainer, Modal, Text } from '@deriv/components';
 import { routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { BinaryLink } from 'App/Components/Routes';
-import EmptyPortfolioMessage from 'Modules/Reports/Components/empty-portfolio-message.jsx';
+import EmptyPortfolioMessage from '@deriv/reports';
 import PositionsModalCard from 'App/Components/Elements/PositionsDrawer/positions-modal-card.jsx';
 import { filterByContractType } from 'App/Components/Elements/PositionsDrawer/helpers';
 import { connect } from 'Stores/connect';
diff --git a/packages/trader/src/App/Constants/routes-config.js b/packages/trader/src/App/Constants/routes-config.js
index 4f4879526882..fe1455c28b7a 100644
--- a/packages/trader/src/App/Constants/routes-config.js
+++ b/packages/trader/src/App/Constants/routes-config.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import { routes, makeLazyLoader } from '@deriv/shared';
-import { Loading } from '@deriv/components';
+import { routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import Trade from 'Modules/Trading';
 
@@ -12,11 +11,6 @@ const CFD = React.lazy(() => import(/* webpackChunkName: "cfd", webpackPrefetch:
 // Error Routes
 const Page404 = React.lazy(() => import(/* webpackChunkName: "404" */ 'Modules/Page404'));
 
-const lazyLoadReportComponent = makeLazyLoader(
-    () => import(/* webpackChunkName: "reports" */ 'Modules/Reports'),
-    () => <Loading />
-);
-
 // Order matters
 const initRoutesConfig = () => {
     return [
@@ -41,34 +35,6 @@ const initRoutesConfig = () => {
             getTitle: () => localize('MT5'),
             is_authenticated: false,
         },
-        {
-            path: routes.reports,
-            component: lazyLoadReportComponent('Reports'),
-            is_authenticated: true,
-            getTitle: () => localize('Reports'),
-            icon_component: 'IcReports',
-            routes: [
-                {
-                    path: routes.positions,
-                    component: lazyLoadReportComponent('OpenPositions'),
-                    getTitle: () => localize('Open positions'),
-                    icon_component: 'IcOpenPositions',
-                    default: true,
-                },
-                {
-                    path: routes.profit,
-                    component: lazyLoadReportComponent('ProfitTable'),
-                    getTitle: () => localize('Profit table'),
-                    icon_component: 'IcProfitTable',
-                },
-                {
-                    path: routes.statement,
-                    component: lazyLoadReportComponent('Statement'),
-                    getTitle: () => localize('Statement'),
-                    icon_component: 'IcStatement',
-                },
-            ],
-        },
         { path: routes.trade, component: Trade, getTitle: () => localize('Trader'), exact: true },
     ];
 };
diff --git a/packages/trader/src/Modules/Reports/Components/account-statistics.jsx b/packages/trader/src/Modules/Reports/Components/account-statistics.jsx
deleted file mode 100644
index 2e2c3e3c5863..000000000000
--- a/packages/trader/src/Modules/Reports/Components/account-statistics.jsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { MobileWrapper, Money, Text } from '@deriv/components';
-import { localize } from '@deriv/translations';
-import { connect } from 'Stores/connect';
-
-const AccountStatistics = ({ account_statistics, currency }) => {
-    return (
-        <div className='statement__account-statistics'>
-            <div className='statement__account-statistics-item'>
-                <div className='statement__account-statistics--is-rectangle'>
-                    <Text color='less-prominent' className='statement__account-statistics-title'>
-                        {localize('Total deposits')} <MobileWrapper> ({currency}) </MobileWrapper>
-                    </Text>
-                    <Text
-                        color='prominent'
-                        weight='bold'
-                        align='center'
-                        className='statement__account-statistics-amount'
-                    >
-                        <Money amount={account_statistics.total_deposits} currency={currency} />
-                    </Text>
-                </div>
-            </div>
-            <div className='statement__account-statistics-item statement__account-statistics-total-withdrawal'>
-                <div className='statement__account-statistics--is-rectangle'>
-                    <Text color='less-prominent' className='statement__account-statistics-title'>
-                        {localize('Total withdrawals')} <MobileWrapper> ({currency}) </MobileWrapper>
-                    </Text>
-                    <Text
-                        color='prominent'
-                        weight='bold'
-                        align='center'
-                        className='statement__account-statistics-amount'
-                    >
-                        <Money amount={account_statistics.total_withdrawals} currency={currency} />
-                    </Text>
-                </div>
-            </div>
-            <div className='statement__account-statistics-item'>
-                <div className='statement__account-statistics--is-rectangle'>
-                    <Text color='less-prominent' className='statement__account-statistics-title'>
-                        {localize('Net deposits')} <MobileWrapper> ({currency}) </MobileWrapper>
-                    </Text>
-                    <Text
-                        color='prominent'
-                        weight='bold'
-                        align='center'
-                        className='statement__account-statistics-amount'
-                    >
-                        <Money
-                            amount={account_statistics.total_deposits - account_statistics.total_withdrawals}
-                            currency={currency}
-                        />
-                    </Text>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-AccountStatistics.propTypes = {
-    account_statistics: PropTypes.object,
-    currency: PropTypes.string,
-};
-
-export default connect(({ modules, client }) => ({
-    account_statistics: modules.statement.account_statistics,
-    currency: client.currency,
-}))(AccountStatistics);
diff --git a/packages/trader/src/Modules/Reports/Components/amount-cell.jsx b/packages/trader/src/Modules/Reports/Components/amount-cell.jsx
deleted file mode 100644
index 74342892adb0..000000000000
--- a/packages/trader/src/Modules/Reports/Components/amount-cell.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { getProfitOrLoss } from 'Modules/Reports/Helpers/profit-loss';
-
-const AmountCell = ({ value }) => {
-    const status = getProfitOrLoss(value);
-
-    return <span className={`amount--${status}`}>{value}</span>;
-};
-
-AmountCell.propTypes = {
-    value: PropTypes.string,
-};
-
-export default AmountCell;
diff --git a/packages/trader/src/Modules/Reports/Components/currency-wrapper.jsx b/packages/trader/src/Modules/Reports/Components/currency-wrapper.jsx
deleted file mode 100644
index bb4273052781..000000000000
--- a/packages/trader/src/Modules/Reports/Components/currency-wrapper.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Text } from '@deriv/components';
-
-const CurrencyWrapper = ({ currency }) => (
-    <div className='currency__wrapper'>
-        <Text color='colored-background' weight='bold' size='xxxs'>
-            {currency}
-        </Text>
-    </div>
-);
-
-CurrencyWrapper.propTypes = {
-    currency: PropTypes.string,
-};
-
-export default CurrencyWrapper;
diff --git a/packages/trader/src/Modules/Reports/Components/empty-portfolio-message.jsx b/packages/trader/src/Modules/Reports/Components/empty-portfolio-message.jsx
deleted file mode 100644
index c2066318b49d..000000000000
--- a/packages/trader/src/Modules/Reports/Components/empty-portfolio-message.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { Icon, Text } from '@deriv/components';
-import { localize } from '@deriv/translations';
-
-const EmptyPortfolioMessage = ({ error }) => (
-    <div className='portfolio-empty'>
-        <div className='portfolio-empty__wrapper'>
-            {error ? (
-                <Text color='disabled' size='xs'>
-                    {error}
-                </Text>
-            ) : (
-                <React.Fragment>
-                    <Icon icon='IcPortfolio' className='portfolio-empty__icon' size={96} color='disabled' />
-                    <Text color='disabled' size='xs'>
-                        {localize('No open positions')}
-                    </Text>
-                </React.Fragment>
-            )}
-        </div>
-    </div>
-);
-
-export default EmptyPortfolioMessage;
diff --git a/packages/trader/src/Modules/Reports/Components/empty-trade-history-message.jsx b/packages/trader/src/Modules/Reports/Components/empty-trade-history-message.jsx
deleted file mode 100644
index 8f1ec53e4fe3..000000000000
--- a/packages/trader/src/Modules/Reports/Components/empty-trade-history-message.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Icon, Text } from '@deriv/components';
-
-const EmptyTradeHistoryMessage = ({
-    has_selected_date,
-    component_icon,
-    localized_message,
-    localized_period_message,
-}) => (
-    <React.Fragment>
-        <div className='empty-trade-history'>
-            <Icon icon={component_icon} className='empty-trade-history__icon' color='disabled' size={96} />
-            <Text size='xs' align='center' color='disabled' className='empty-trade-history__text'>
-                {!has_selected_date ? localized_message : localized_period_message}
-            </Text>
-        </div>
-    </React.Fragment>
-);
-
-EmptyTradeHistoryMessage.propTypes = {
-    component_icon: PropTypes.string,
-    has_selected_date: PropTypes.bool,
-    localized_message: PropTypes.string,
-    localized_period_message: PropTypes.string,
-};
-
-export default EmptyTradeHistoryMessage;
diff --git a/packages/trader/src/Modules/Reports/Components/filter-component.jsx b/packages/trader/src/Modules/Reports/Components/filter-component.jsx
deleted file mode 100644
index 9f9588b6a130..000000000000
--- a/packages/trader/src/Modules/Reports/Components/filter-component.jsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FilterDropdown } from '@deriv/components';
-import { localize } from '@deriv/translations';
-import { connect } from 'Stores/connect';
-import CompositeCalendar from 'App/Components/Form/CompositeCalendar/composite-calendar.jsx';
-
-const FilterComponent = ({
-    action_type,
-    date_from,
-    date_to,
-    handleFilterChange,
-    handleDateChange,
-    filtered_date_range,
-}) => {
-    const filter_list = [
-        {
-            text: localize('All transactions'),
-            value: 'all',
-        },
-        {
-            text: localize('Buy'),
-            value: 'buy',
-        },
-        {
-            text: localize('Sell'),
-            value: 'sell',
-        },
-        {
-            text: localize('Deposit'),
-            value: 'deposit',
-        },
-        {
-            text: localize('Withdrawal'),
-            value: 'withdrawal',
-        },
-        {
-            text: localize('Transfer'),
-            value: 'transfer',
-        },
-    ];
-
-    return (
-        <React.Fragment>
-            <CompositeCalendar
-                input_date_range={filtered_date_range}
-                onChange={handleDateChange}
-                from={date_from}
-                to={date_to}
-            />
-            <FilterDropdown
-                dropdown_display_className='dc-dropdown__display--has-suffix-icon'
-                filter_list={filter_list}
-                handleFilterChange={handleFilterChange}
-                initial_selected_filter={action_type}
-            />
-        </React.Fragment>
-    );
-};
-
-FilterComponent.propTypes = {
-    action_type: PropTypes.string,
-    date_from: PropTypes.number,
-    date_to: PropTypes.number,
-    filtered_date_range: PropTypes.object,
-    handleDateChange: PropTypes.func,
-    handleFilterChange: PropTypes.func,
-    suffix_icon: PropTypes.string,
-};
-
-export default connect(({ modules }) => ({
-    action_type: modules.statement.action_type,
-    data: modules.statement.data,
-    date_from: modules.statement.date_from,
-    date_to: modules.statement.date_to,
-    filtered_date_range: modules.statement.filtered_date_range,
-    handleDateChange: modules.statement.handleDateChange,
-    handleFilterChange: modules.statement.handleFilterChange,
-}))(FilterComponent);
diff --git a/packages/trader/src/Modules/Reports/Components/indicative-cell.jsx b/packages/trader/src/Modules/Reports/Components/indicative-cell.jsx
deleted file mode 100644
index af1b3521a4f6..000000000000
--- a/packages/trader/src/Modules/Reports/Components/indicative-cell.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Icon, Money, DesktopWrapper, ContractCard } from '@deriv/components';
-import { getCardLabels } from 'Constants/contract';
-import { connect } from 'Stores/connect';
-
-const IndicativeCell = ({ amount, currency, contract_info, is_footer, onClickSell, is_sell_requested }) => {
-    const [movement, setMovement] = React.useState(null);
-    const [amount_state, setAmountState] = React.useState(0);
-
-    React.useEffect(() => {
-        setMovement(() => {
-            return amount >= amount_state ? 'profit' : 'loss';
-        });
-        setAmountState(amount);
-    }, [amount, amount_state]);
-
-    return (
-        <div className='open-positions__indicative'>
-            <div className='open-positions__indicative--amount'>
-                <Money amount={Math.abs(amount)} currency={currency} />
-                {status !== 'no-resale' && amount !== 0 && (
-                    <React.Fragment>
-                        {movement === 'profit' && <Icon icon='IcProfit' />}
-                        {movement === 'loss' && <Icon icon='IcLoss' />}
-                    </React.Fragment>
-                )}
-            </div>
-            <DesktopWrapper>
-                {!is_footer && (
-                    <ContractCard.Sell
-                        contract_info={contract_info}
-                        is_sell_requested={is_sell_requested}
-                        getCardLabels={getCardLabels}
-                        onClickSell={onClickSell}
-                    />
-                )}
-            </DesktopWrapper>
-        </div>
-    );
-};
-
-IndicativeCell.propTypes = {
-    amount: PropTypes.number,
-    currency: PropTypes.string,
-    status: PropTypes.string,
-    is_footer: PropTypes.bool,
-    onClickSell: PropTypes.func,
-};
-
-export default connect(({ modules }) => ({
-    onClickSell: modules.portfolio.onClickSell,
-}))(IndicativeCell);
diff --git a/packages/trader/src/Modules/Reports/Components/market-symbol-icon-row.jsx b/packages/trader/src/Modules/Reports/Components/market-symbol-icon-row.jsx
deleted file mode 100644
index 5ada1db081e5..000000000000
--- a/packages/trader/src/Modules/Reports/Components/market-symbol-icon-row.jsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { extractInfoFromShortcode, isHighLow } from '@deriv/shared';
-import { Icon, Popover, IconTradeTypes } from '@deriv/components';
-import { getMarketName, getTradeTypeName } from '../Helpers/market-underlying';
-
-const MarketSymbolIconRow = ({ icon, payload, show_description, should_show_multiplier = true }) => {
-    const should_show_category_icon = typeof payload.shortcode === 'string';
-    const info_from_shortcode = extractInfoFromShortcode(payload.shortcode);
-
-    if (should_show_category_icon && info_from_shortcode) {
-        return (
-            <div className='market-symbol-icon'>
-                <div className='market-symbol-icon-name'>
-                    <Popover
-                        classNameTarget='market-symbol-icon__popover'
-                        classNameBubble='market-symbol-icon__popover-bubble'
-                        alignment='top'
-                        message={getMarketName(info_from_shortcode.underlying)}
-                        is_bubble_hover_enabled
-                        disable_target_icon
-                    >
-                        <Icon
-                            icon={
-                                info_from_shortcode.underlying
-                                    ? `IcUnderlying${info_from_shortcode.underlying}`
-                                    : 'IcUnknown'
-                            }
-                            size={32}
-                        />
-                    </Popover>
-                    {show_description && payload.display_name}
-                </div>
-
-                <div className='market-symbol-icon-category'>
-                    <Popover
-                        classNameTarget='category-type-icon__popover'
-                        classNameBubble='category-type-icon__popover-bubble'
-                        alignment='top'
-                        message={getTradeTypeName(info_from_shortcode.category)}
-                        is_bubble_hover_enabled
-                        disable_target_icon
-                    >
-                        <IconTradeTypes
-                            type={
-                                isHighLow({ shortcode_info: info_from_shortcode })
-                                    ? `${info_from_shortcode.category.toLowerCase()}_barrier`
-                                    : info_from_shortcode.category.toLowerCase()
-                            }
-                            color='brand'
-                        />
-                    </Popover>
-                    {show_description && info_from_shortcode.category}
-                </div>
-                {should_show_multiplier && info_from_shortcode.multiplier && (
-                    <div className='market-symbol-icon__multiplier'>x{info_from_shortcode.multiplier}</div>
-                )}
-            </div>
-        );
-    } else if (['deposit', 'hold', 'release', 'withdrawal', 'transfer'].includes(payload.action_type)) {
-        return (
-            <div className='market-symbol-icon'>
-                {payload.action_type === 'deposit' && <Icon icon={icon || 'IcCashierDeposit'} size={32} />}
-                {payload.action_type === 'withdrawal' && <Icon icon='IcCashierWithdrawal' size={32} />}
-                {payload.action_type === 'transfer' && <Icon icon='IcAccountTransferColored' size={32} />}
-                {(payload.action_type === 'hold' || payload.action_type === 'release') && (
-                    <Icon icon='IcCashierDp2p' size={32} />
-                )}
-            </div>
-        );
-    } else if (['adjustment'].includes(payload.action_type)) {
-        return (
-            <div className='market-symbol-icon'>
-                <Icon icon='IcAdjustment' size={32} />
-            </div>
-        );
-    }
-
-    return (
-        <svg width='32' height='32' className='unknown-icon'>
-            <rect width='32' height='32' />
-        </svg>
-    );
-};
-
-MarketSymbolIconRow.propTypes = {
-    action: PropTypes.string,
-    payload: PropTypes.object,
-    show_description: PropTypes.bool,
-    should_show_multiplier: PropTypes.bool,
-};
-
-export default MarketSymbolIconRow;
diff --git a/packages/trader/src/Modules/Reports/Components/placeholder-component.jsx b/packages/trader/src/Modules/Reports/Components/placeholder-component.jsx
deleted file mode 100644
index 5b8cbc865bed..000000000000
--- a/packages/trader/src/Modules/Reports/Components/placeholder-component.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Loading from '_common/components/loading';
-
-const PlaceholderComponent = props => {
-    const EmptyMessageComponent = props.empty_message_component;
-    return (
-        <React.Fragment>
-            {props.is_empty && (
-                <EmptyMessageComponent
-                    component_icon={props.component_icon}
-                    has_selected_date={props.has_selected_date}
-                    localized_message={props.localized_message}
-                    localized_period_message={props.localized_period_message}
-                />
-            )}
-            {props.is_loading && <Loading />}
-        </React.Fragment>
-    );
-};
-
-PlaceholderComponent.propTypes = {
-    component_icon: PropTypes.string,
-    empty_message_component: PropTypes.func,
-    has_selected_date: PropTypes.bool,
-    localized_message: PropTypes.string,
-};
-
-export default PlaceholderComponent;
diff --git a/packages/trader/src/Modules/Reports/Components/profit_loss_cell.jsx b/packages/trader/src/Modules/Reports/Components/profit_loss_cell.jsx
deleted file mode 100644
index b968cb81d03f..000000000000
--- a/packages/trader/src/Modules/Reports/Components/profit_loss_cell.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { getProfitOrLoss } from 'Modules/Reports/Helpers/profit-loss';
-
-const ProfitLossCell = ({ value, children }) => {
-    const status = getProfitOrLoss(value);
-
-    return <span className={`amount--${status}`}>{children}</span>;
-};
-
-ProfitLossCell.propTypes = {
-    value: PropTypes.string,
-};
-
-export default ProfitLossCell;
diff --git a/packages/trader/src/Modules/Reports/Components/reports-meta.jsx b/packages/trader/src/Modules/Reports/Components/reports-meta.jsx
deleted file mode 100644
index aec529493d5e..000000000000
--- a/packages/trader/src/Modules/Reports/Components/reports-meta.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-
-const ReportsMeta = ({ filter_component, className, optional_component, is_statement }) => (
-    <div className={classNames('reports__meta', className)}>
-        {optional_component}
-        {filter_component && (
-            <div
-                className={classNames('reports__meta-filter', {
-                    'reports__meta-filter--statement': is_statement,
-                })}
-            >
-                {filter_component}
-            </div>
-        )}
-    </div>
-);
-
-export { ReportsMeta };
diff --git a/packages/trader/src/Modules/Reports/Constants/data-table-constants.js b/packages/trader/src/Modules/Reports/Constants/data-table-constants.js
deleted file mode 100644
index 75d0bb5dc178..000000000000
--- a/packages/trader/src/Modules/Reports/Constants/data-table-constants.js
+++ /dev/null
@@ -1,404 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import { Icon, Label, Money, ContractCard } from '@deriv/components';
-import { isMobile, getCurrencyDisplayCode, getTotalProfit, shouldShowCancellation } from '@deriv/shared';
-import { localize, Localize } from '@deriv/translations';
-import ProgressSliderStream from 'App/Containers/ProgressSliderStream';
-import { getCardLabels } from 'Constants/contract';
-import { getProfitOrLoss } from 'Modules/Reports/Helpers/profit-loss';
-import IndicativeCell from '../Components/indicative-cell.jsx';
-import MarketSymbolIconRow from '../Components/market-symbol-icon-row.jsx';
-import ProfitLossCell from '../Components/profit_loss_cell.jsx';
-import CurrencyWrapper from '../Components/currency-wrapper.jsx';
-
-const getModeFromValue = key => {
-    const map = {
-        buy: 'success',
-        deposit: 'success',
-        hold: 'warn',
-        release: 'success',
-        sell: 'danger',
-        withdrawal: 'info',
-        default: 'default',
-        adjustment: 'adjustment',
-        transfer: 'transfer',
-    };
-
-    if (Object.keys(map).find(x => x === key)) {
-        return map[key];
-    }
-
-    return map.default;
-};
-
-/* eslint-disable react/display-name, react/prop-types */
-export const getStatementTableColumnsTemplate = currency => [
-    {
-        key: 'icon',
-        title: isMobile() ? '' : localize('Type'),
-        col_index: 'icon',
-        renderCellContent: ({ cell_value, passthrough, row_obj }) => {
-            const icon = passthrough.isTopUp(row_obj) ? 'icCashierTopUp' : null;
-            return (
-                <MarketSymbolIconRow action={cell_value} icon={icon} key={row_obj.transaction_id} payload={row_obj} />
-            );
-        },
-    },
-    {
-        title: localize('Ref. ID'),
-        col_index: 'refid',
-    },
-    {
-        title: localize('Currency'),
-        col_index: 'currency',
-        renderCellContent: () => <CurrencyWrapper currency={getCurrencyDisplayCode(currency)} />,
-    },
-    {
-        title: localize('Transaction time'),
-        col_index: 'date',
-        renderCellContent: ({ cell_value }) => {
-            return <span>{cell_value} GMT</span>;
-        },
-    },
-    {
-        key: 'mode',
-        title: localize('Transaction'),
-        col_index: 'action_type',
-        renderCellContent: ({ cell_value, passthrough, row_obj }) => (
-            <Label mode={getModeFromValue(cell_value)}>
-                {(passthrough.isTopUp(row_obj) && localize('Top up')) || row_obj.action}
-            </Label>
-        ),
-    },
-    {
-        title: localize('Credit/Debit'),
-        col_index: 'amount',
-        renderCellContent: ({ cell_value }) => (
-            <div className={`amount--${getProfitOrLoss(cell_value)}`}>
-                <Money has_sign amount={cell_value.replace(/[,]+/g, '')} currency={currency} />
-            </div>
-        ),
-    },
-    {
-        title: localize('Balance'),
-        col_index: 'balance',
-        renderCellContent: ({ cell_value }) => <Money amount={cell_value.replace(/[,]+/g, '')} currency={currency} />,
-    },
-];
-export const getProfitTableColumnsTemplate = (currency, items_count) => [
-    {
-        key: 'icon',
-        title: isMobile() ? '' : localize('Type'),
-        col_index: 'action_type',
-        renderCellContent: ({ cell_value, row_obj, is_footer }) => {
-            if (is_footer) {
-                return localize('Profit/loss on the last {{item_count}} contracts', { item_count: items_count });
-            }
-            return <MarketSymbolIconRow action={cell_value} key={row_obj.transaction_id} payload={row_obj} />;
-        },
-    },
-    {
-        title: localize('Ref. ID'),
-        col_index: 'transaction_id',
-    },
-    {
-        title: localize('Currency'),
-        col_index: 'currency',
-        renderCellContent: ({ is_footer }) =>
-            is_footer ? '' : <CurrencyWrapper currency={getCurrencyDisplayCode(currency)} />,
-    },
-    {
-        title: localize('Buy time'),
-        col_index: 'purchase_time',
-        renderCellContent: ({ cell_value, is_footer }) => {
-            if (is_footer) return '';
-            return <span>{cell_value} GMT</span>;
-        },
-    },
-    {
-        title: localize('Buy price'),
-        col_index: 'buy_price',
-        renderCellContent: ({ cell_value, is_footer }) => {
-            if (is_footer) return '';
-
-            return <Money amount={cell_value} currency={currency} />;
-        },
-    },
-    {
-        title: localize('Sell time'),
-        col_index: 'sell_time',
-        renderHeader: ({ title }) => <span>{title}</span>,
-        renderCellContent: ({ cell_value, is_footer }) => {
-            if (is_footer) return '';
-            return <span>{cell_value} GMT</span>;
-        },
-    },
-    {
-        title: localize('Sell price'),
-        col_index: 'sell_price',
-        renderCellContent: ({ cell_value, is_footer }) => {
-            if (is_footer) return '';
-
-            return <Money amount={cell_value} currency={currency} />;
-        },
-    },
-    {
-        title: localize('Profit / Loss'),
-        col_index: 'profit_loss',
-        renderCellContent: ({ cell_value }) => (
-            <ProfitLossCell value={cell_value}>
-                <Money has_sign amount={cell_value.replace(/[,]+/g, '')} currency={currency} />
-            </ProfitLossCell>
-        ),
-    },
-];
-export const getOpenPositionsColumnsTemplate = currency => [
-    {
-        title: isMobile() ? '' : localize('Type'),
-        col_index: 'type',
-        renderCellContent: ({ cell_value, row_obj, is_footer }) => {
-            if (is_footer) return localize('Total');
-
-            return <MarketSymbolIconRow action={cell_value} key={row_obj.id} payload={row_obj.contract_info} />;
-        },
-    },
-    {
-        title: localize('Ref. ID'),
-        col_index: 'reference',
-    },
-    {
-        title: localize('Currency'),
-        col_index: 'currency',
-        renderCellContent: ({ row_obj }) => (
-            <CurrencyWrapper currency={getCurrencyDisplayCode(row_obj.contract_info?.currency)} />
-        ),
-    },
-    {
-        title: localize('Buy price'),
-        col_index: 'purchase',
-        renderCellContent: ({ cell_value }) => <Money amount={cell_value} currency={currency} />,
-    },
-    {
-        title: localize('Payout limit'),
-        col_index: 'payout',
-        renderCellContent: ({ cell_value }) =>
-            cell_value ? <Money amount={cell_value} currency={currency} /> : <span>-</span>,
-    },
-    {
-        title: localize('Indicative profit/loss'),
-        col_index: 'profit',
-        renderCellContent: ({ row_obj }) => {
-            if (!row_obj.profit_loss && (!row_obj.contract_info || !row_obj.contract_info.profit)) return;
-            const profit = row_obj.profit_loss || row_obj.contract_info.profit;
-            // eslint-disable-next-line consistent-return
-            return (
-                <div
-                    className={classNames('open-positions__profit-loss', {
-                        'open-positions__profit-loss--negative': profit < 0,
-                        'open-positions__profit-loss--positive': profit > 0,
-                    })}
-                >
-                    <Money amount={Math.abs(profit)} currency={currency} />
-                    <div className='open-positions__profit-loss--movement'>
-                        {profit > 0 ? <Icon icon='IcProfit' /> : <Icon icon='IcLoss' />}
-                    </div>
-                </div>
-            );
-        },
-    },
-    {
-        title: localize('Indicative price'),
-        col_index: 'indicative',
-        renderCellContent: ({ cell_value, row_obj, is_footer }) => (
-            <IndicativeCell
-                amount={+cell_value}
-                currency={currency}
-                contract_info={row_obj.contract_info}
-                is_sell_requested={row_obj.is_sell_requested}
-                is_footer={is_footer}
-            />
-        ),
-    },
-    {
-        title: localize('Remaining time'),
-        col_index: 'id',
-        renderCellContent: ({ row_obj }) => <ProgressSliderStream contract_info={row_obj.contract_info} />,
-    },
-];
-
-export const getMultiplierOpenPositionsColumnsTemplate = ({
-    currency,
-    onClickCancel,
-    onClickSell,
-    getPositionById,
-    server_time,
-}) => [
-    {
-        title: isMobile() ? '' : localize('Type'),
-        col_index: 'type',
-        renderCellContent: ({ cell_value, row_obj, is_footer }) => {
-            if (is_footer) return localize('Total');
-
-            return (
-                <MarketSymbolIconRow
-                    action={cell_value}
-                    key={row_obj.id}
-                    payload={row_obj.contract_info}
-                    should_show_multiplier={false}
-                />
-            );
-        },
-    },
-    {
-        title: localize('Multiplier'),
-        col_index: 'multiplier',
-        renderCellContent: ({ row_obj }) =>
-            row_obj.contract_info && row_obj.contract_info.multiplier ? `x${row_obj.contract_info.multiplier}` : '',
-    },
-    {
-        title: localize('Currency'),
-        col_index: 'currency',
-        renderCellContent: ({ row_obj }) => (
-            <CurrencyWrapper currency={getCurrencyDisplayCode(row_obj.contract_info?.currency)} />
-        ),
-    },
-    {
-        title: localize('Stake'),
-        col_index: 'buy_price',
-        renderCellContent: ({ row_obj }) => {
-            if (row_obj.contract_info) {
-                const { ask_price: cancellation_price = 0 } = row_obj.contract_info.cancellation || {};
-                return <Money amount={row_obj.contract_info.buy_price - cancellation_price} currency={currency} />;
-            }
-            return '';
-        },
-    },
-    {
-        title: localize('Deal cancel. fee'),
-        col_index: 'cancellation',
-        renderCellContent: ({ row_obj }) => {
-            if (!row_obj.contract_info || !row_obj.contract_info.underlying) return '-';
-
-            if (!shouldShowCancellation(row_obj.contract_info.underlying)) return localize('N/A');
-
-            if (row_obj.contract_info.cancellation) {
-                return <Money amount={row_obj.contract_info.cancellation.ask_price} currency={currency} />;
-            }
-            return '-';
-        },
-    },
-    {
-        title: isMobile() ? (
-            <Localize i18n_default_text='Total buy price' />
-        ) : (
-            <Localize i18n_default_text='Buy price' />
-        ),
-        col_index: 'purchase',
-        renderCellContent: ({ cell_value }) => <Money amount={cell_value} currency={currency} />,
-    },
-    {
-        title: <Localize i18n_default_text='Take profit<0 />Stop loss' components={[<br key={0} />]} />,
-        col_index: 'limit_order',
-        renderCellContent: ({ row_obj, is_footer }) => {
-            if (is_footer) {
-                return '';
-            }
-
-            const { take_profit, stop_loss } = row_obj.contract_info?.limit_order || {};
-            return (
-                <React.Fragment>
-                    <div>
-                        {take_profit?.order_amount ? (
-                            <Money has_sign amount={take_profit.order_amount} currency={currency} />
-                        ) : (
-                            '-'
-                        )}
-                    </div>
-                    <div>
-                        {stop_loss?.order_amount ? (
-                            <Money has_sign amount={stop_loss.order_amount} currency={currency} />
-                        ) : (
-                            '-'
-                        )}
-                    </div>
-                </React.Fragment>
-            );
-        },
-    },
-    {
-        title: localize('Current stake'),
-        col_index: 'bid_price',
-        renderCellContent: ({ row_obj, is_footer }) => {
-            if (is_footer) {
-                return '';
-            }
-
-            if (!row_obj.contract_info || !row_obj.contract_info.bid_price) return '-';
-
-            const total_profit = getTotalProfit(row_obj.contract_info);
-            return (
-                <div
-                    className={classNames('open-positions__bid_price', {
-                        'open-positions__bid_price--negative': total_profit < 0,
-                        'open-positions__bid_price--positive': total_profit > 0,
-                    })}
-                >
-                    <Money amount={row_obj.contract_info.bid_price} currency={currency} />
-                </div>
-            );
-        },
-    },
-    {
-        title: isMobile() ? (
-            <Localize i18n_default_text='Total profit/loss' />
-        ) : (
-            <Localize i18n_default_text='Total<0 />profit/loss' components={[<br key={0} />]} />
-        ),
-        col_index: 'profit',
-        renderCellContent: ({ row_obj }) => {
-            if (!row_obj.contract_info || !row_obj.contract_info.profit) return null;
-            const total_profit = getTotalProfit(row_obj.contract_info);
-            // eslint-disable-next-line consistent-return
-            return (
-                <div
-                    className={classNames('open-positions__profit-loss', {
-                        'open-positions__profit-loss--negative': total_profit < 0,
-                        'open-positions__profit-loss--positive': total_profit > 0,
-                    })}
-                >
-                    <Money amount={Math.abs(total_profit)} currency={currency} />
-                    <div className='open-positions__profit-loss--movement'>
-                        {total_profit > 0 ? <Icon icon='IcProfit' /> : <Icon icon='IcLoss' />}
-                    </div>
-                </div>
-            );
-        },
-    },
-    {
-        title: localize('Action'),
-        col_index: 'action',
-        renderCellContent: ({ row_obj, is_footer }) => {
-            if (is_footer) {
-                return <div className='open-positions__row-action' />;
-            }
-
-            const { contract_info } = row_obj;
-            const position = getPositionById(contract_info.contract_id);
-            const { is_sell_requested } = position || {};
-
-            return (
-                <div className='open-positions__row-action'>
-                    <ContractCard.MultiplierCloseActions
-                        contract_info={contract_info}
-                        getCardLabels={getCardLabels}
-                        is_sell_requested={is_sell_requested}
-                        onClickCancel={onClickCancel}
-                        onClickSell={onClickSell}
-                        server_time={server_time}
-                    />
-                </div>
-            );
-        },
-    },
-];
-/* eslint-enable react/display-name, react/prop-types */
diff --git a/packages/trader/src/Modules/Reports/Containers/__tests__/open-positions.spec.js b/packages/trader/src/Modules/Reports/Containers/__tests__/open-positions.spec.js
deleted file mode 100644
index cae4c669d486..000000000000
--- a/packages/trader/src/Modules/Reports/Containers/__tests__/open-positions.spec.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { expect } from 'chai';
-import { configure, shallow } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import React from 'react';
-import { OpenPositionsTable } from '../open-positions';
-
-configure({ adapter: new Adapter() });
-
-describe('OpenPositions', () => {
-    jest.mock(
-        '../open-positions.jsx',
-        () =>
-            jest.fn().mockReturnValue({
-                OpenPositions: props => <div {...props}></div>,
-            }),
-        jest.fn().mockReturnValue({
-            OpenPositionsTable: props => <div {...props}></div>,
-        })
-    );
-
-    it('should render one <OpenPositions /> component', async () => {
-        const OpenPositions = (await import('../../index')).default.OpenPositions;
-        const wrapper = shallow(<OpenPositions />);
-        expect(wrapper).to.have.length(1);
-    });
-
-    it('should render one <OpenPositionsTable /> component', () => {
-        const wrapper = shallow(<OpenPositionsTable />);
-        expect(wrapper).to.have.length(1);
-    });
-});
diff --git a/packages/trader/src/Modules/Reports/Containers/open-positions.jsx b/packages/trader/src/Modules/Reports/Containers/open-positions.jsx
deleted file mode 100644
index 7368f5318571..000000000000
--- a/packages/trader/src/Modules/Reports/Containers/open-positions.jsx
+++ /dev/null
@@ -1,441 +0,0 @@
-import { PropTypes as MobxPropTypes } from 'mobx-react';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withRouter } from 'react-router-dom';
-import {
-    DesktopWrapper,
-    MobileWrapper,
-    ProgressBar,
-    Tabs,
-    DataList,
-    DataTable,
-    ContractCard,
-    usePrevious,
-} from '@deriv/components';
-import { urlFor, isMobile, isMultiplierContract, getTimePercentage, website_name, getTotalProfit } from '@deriv/shared';
-import { localize, Localize } from '@deriv/translations';
-import { ReportsTableRowLoader } from 'App/Components/Elements/ContentLoader';
-import { getContractPath } from 'App/Components/Routes/helpers';
-import { getContractDurationType } from 'Modules/Reports/Helpers/market-underlying';
-import EmptyTradeHistoryMessage from 'Modules/Reports/Components/empty-trade-history-message.jsx';
-import {
-    getOpenPositionsColumnsTemplate,
-    getMultiplierOpenPositionsColumnsTemplate,
-} from 'Modules/Reports/Constants/data-table-constants';
-import PositionsCard from 'App/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx';
-import PlaceholderComponent from 'Modules/Reports/Components/placeholder-component.jsx';
-import { getCardLabels } from 'Constants/contract';
-import { connect } from 'Stores/connect';
-
-const EmptyPlaceholderWrapper = props => (
-    <React.Fragment>
-        {props.is_empty ? (
-            <PlaceholderComponent
-                is_empty={props.is_empty}
-                empty_message_component={EmptyTradeHistoryMessage}
-                component_icon={props.component_icon}
-                localized_message={localize('You have no open positions yet.')}
-            />
-        ) : (
-            props.children
-        )}
-    </React.Fragment>
-);
-
-const MobileRowRenderer = ({ row, is_footer, columns_map, server_time, onClickCancel, onClickSell, measure }) => {
-    React.useEffect(() => {
-        if (!is_footer) {
-            measure();
-        }
-    }, [row.contract_info?.underlying, measure, is_footer]);
-
-    if (is_footer) {
-        return (
-            <>
-                <div className='open-positions__data-list-footer--content'>
-                    <div>
-                        <DataList.Cell row={row} column={columns_map.purchase} />
-                        <DataList.Cell row={row} column={columns_map.payout} />
-                    </div>
-                    <div>
-                        <DataList.Cell
-                            className='data-list__row-cell--amount'
-                            row={row}
-                            column={columns_map.indicative}
-                        />
-                        <DataList.Cell className='data-list__row-cell--amount' row={row} column={columns_map.profit} />
-                    </div>
-                </div>
-            </>
-        );
-    }
-
-    const { contract_info, contract_update, type, is_sell_requested } = row;
-    const { currency, status, date_expiry, date_start } = contract_info;
-    const duration_type = getContractDurationType(contract_info.longcode);
-    const progress_value = getTimePercentage(server_time, date_start, date_expiry) / 100;
-
-    if (isMultiplierContract(type)) {
-        return (
-            <PositionsCard
-                contract_info={contract_info}
-                contract_update={contract_update}
-                currency={currency}
-                is_multiplier
-                is_link_disabled
-                onClickCancel={onClickCancel}
-                onClickSell={onClickSell}
-                server_time={server_time}
-                status={status}
-            />
-        );
-    }
-
-    return (
-        <>
-            <div className='data-list__row'>
-                <DataList.Cell row={row} column={columns_map.type} />
-                <ProgressBar label={duration_type} value={progress_value} />
-            </div>
-            <div className='data-list__row'>
-                <DataList.Cell row={row} column={columns_map.reference} />
-                <DataList.Cell className='data-list__row-cell--amount' row={row} column={columns_map.currency} />
-            </div>
-            <div className='data-list__row'>
-                <DataList.Cell row={row} column={columns_map.purchase} />
-                <DataList.Cell className='data-list__row-cell--amount' row={row} column={columns_map.indicative} />
-            </div>
-            <div className='data-list__row'>
-                <DataList.Cell row={row} column={columns_map.payout} />
-                <DataList.Cell className='data-list__row-cell--amount' row={row} column={columns_map.profit} />
-            </div>
-            <div className='data-list__row-divider' />
-            <div className='data-list__row'>
-                <ContractCard.Sell
-                    contract_info={contract_info}
-                    is_sell_requested={is_sell_requested}
-                    getCardLabels={getCardLabels}
-                    onClickSell={onClickSell}
-                />
-            </div>
-        </>
-    );
-};
-
-export const OpenPositionsTable = ({
-    className,
-    columns,
-    component_icon,
-    currency,
-    active_positions,
-    is_loading,
-    getRowAction,
-    mobileRowRenderer,
-    preloaderCheck,
-    row_size,
-    totals,
-}) => (
-    <React.Fragment>
-        {is_loading ? (
-            <PlaceholderComponent
-                is_loading={is_loading}
-                empty_message_component={EmptyTradeHistoryMessage}
-                component_icon={component_icon}
-                localized_message={localize('You have no open positions yet.')}
-            />
-        ) : (
-            currency && (
-                <div className='reports__content'>
-                    <DesktopWrapper>
-                        <EmptyPlaceholderWrapper
-                            component_icon={component_icon}
-                            is_empty={active_positions.length === 0}
-                        >
-                            <DataTable
-                                className={className}
-                                columns={columns}
-                                preloaderCheck={preloaderCheck}
-                                footer={totals}
-                                data_source={active_positions}
-                                getRowAction={getRowAction}
-                                getRowSize={() => row_size}
-                                content_loader={ReportsTableRowLoader}
-                            >
-                                <PlaceholderComponent is_loading={is_loading} />
-                            </DataTable>
-                        </EmptyPlaceholderWrapper>
-                    </DesktopWrapper>
-                    <MobileWrapper>
-                        <EmptyPlaceholderWrapper
-                            component_icon={component_icon}
-                            is_empty={active_positions.length === 0}
-                        >
-                            <DataList
-                                className={className}
-                                data_source={active_positions}
-                                footer={totals}
-                                rowRenderer={mobileRowRenderer}
-                                getRowAction={getRowAction}
-                                row_gap={8}
-                            >
-                                <PlaceholderComponent is_loading={is_loading} />
-                            </DataList>
-                        </EmptyPlaceholderWrapper>
-                    </MobileWrapper>
-                </div>
-            )
-        )}
-    </React.Fragment>
-);
-
-const getRowAction = row_obj =>
-    row_obj.is_unsupported
-        ? {
-              component: (
-                  <Localize
-                      i18n_default_text='This trade type is currently not supported on {{website_name}}. Please go to <0>Binary.com</0> for details.'
-                      values={{
-                          website_name,
-                      }}
-                      components={[
-                          <a
-                              key={0}
-                              className='link link--orange'
-                              rel='noopener noreferrer'
-                              target='_blank'
-                              href={urlFor('user/portfoliows', { legacy: true })}
-                          />,
-                      ]}
-                  />
-              ),
-          }
-        : getContractPath(row_obj.id);
-
-/*
- * After refactoring transactionHandler for creating positions,
- * purchase property in contract positions object is somehow NaN or undefined in the first few responses.
- * So we set it to true in these cases to show a preloader for the data-table-row until the correct value is set.
- */
-const isPurchaseReceived = item => isNaN(item.purchase) || !item.purchase;
-
-const getOpenPositionsTotals = (active_positions_filtered, is_multiplier_selected) => {
-    let totals;
-
-    if (is_multiplier_selected) {
-        let ask_price = 0;
-        let profit = 0;
-        let buy_price = 0;
-        let bid_price = 0;
-        let purchase = 0;
-
-        active_positions_filtered.forEach(portfolio_pos => {
-            buy_price += +portfolio_pos.contract_info.buy_price;
-            bid_price += +portfolio_pos.contract_info.bid_price;
-            purchase += +portfolio_pos.purchase;
-            if (portfolio_pos.contract_info) {
-                profit += getTotalProfit(portfolio_pos.contract_info);
-
-                if (portfolio_pos.contract_info.cancellation) {
-                    ask_price += portfolio_pos.contract_info.cancellation.ask_price || 0;
-                }
-            }
-        });
-        totals = {
-            contract_info: {
-                profit,
-                buy_price,
-                bid_price,
-            },
-            purchase,
-        };
-
-        if (ask_price > 0) {
-            totals.contract_info.cancellation = {
-                ask_price,
-            };
-        }
-    } else {
-        let indicative = 0;
-        let purchase = 0;
-        let profit_loss = 0;
-        let payout = 0;
-
-        active_positions_filtered?.forEach(portfolio_pos => {
-            indicative += +portfolio_pos.indicative;
-            purchase += +portfolio_pos.purchase;
-            profit_loss += portfolio_pos.profit_loss;
-            payout += portfolio_pos.payout;
-        });
-        totals = {
-            indicative,
-            purchase,
-            profit_loss,
-            payout,
-        };
-    }
-    return totals;
-};
-
-const OpenPositions = ({
-    active_positions,
-    component_icon,
-    currency,
-    error,
-    getPositionById,
-    is_loading,
-    is_multiplier,
-    NotificationMessages,
-    onClickCancel,
-    onClickSell,
-    onMount,
-    server_time,
-}) => {
-    const [active_index, setActiveIndex] = React.useState(is_multiplier ? 1 : 0);
-    // Tabs should be visible only when there is at least one active multiplier contract
-    const [has_multiplier_contract, setMultiplierContract] = React.useState(false);
-    const previous_active_positions = usePrevious(active_positions);
-
-    React.useEffect(() => {
-        /*
-         * For mobile, we show portfolio stepper in header even for reports pages.
-         * `onMount` in portfolio store will be invoked from portfolio stepper component in `trade-header-extensions.jsx`
-         */
-        if (!isMobile()) onMount();
-
-        checkForMultiplierContract();
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    React.useEffect(() => {
-        checkForMultiplierContract(previous_active_positions);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [previous_active_positions]);
-
-    const checkForMultiplierContract = (prev_active_positions = []) => {
-        if (!has_multiplier_contract && active_positions !== prev_active_positions) {
-            setMultiplierContract(active_positions.some(p => isMultiplierContract(p.contract_info?.contract_type)));
-        }
-    };
-
-    const setActiveTabIndex = index => setActiveIndex(index);
-
-    if (error) return <p>{error}</p>;
-
-    const is_multiplier_selected = has_multiplier_contract && active_index === 1;
-    const active_positions_filtered = active_positions?.filter(p => {
-        if (p.contract_info) {
-            return is_multiplier_selected
-                ? isMultiplierContract(p.contract_info.contract_type)
-                : !isMultiplierContract(p.contract_info.contract_type);
-        }
-        return true;
-    });
-
-    const active_positions_filtered_totals = getOpenPositionsTotals(active_positions_filtered, is_multiplier_selected);
-
-    const columns = is_multiplier_selected
-        ? getMultiplierOpenPositionsColumnsTemplate({
-              currency,
-              onClickCancel,
-              onClickSell,
-              getPositionById,
-              server_time,
-          })
-        : getOpenPositionsColumnsTemplate(currency);
-
-    const columns_map = columns.reduce((map, item) => {
-        map[item.col_index] = item;
-        return map;
-    }, {});
-
-    const mobileRowRenderer = props => (
-        <MobileRowRenderer
-            {...props}
-            columns_map={columns_map}
-            server_time={server_time}
-            onClickCancel={onClickCancel}
-            onClickSell={onClickSell}
-        />
-    );
-
-    const shared_props = {
-        active_positions: active_positions_filtered,
-        component_icon,
-        currency,
-        is_loading,
-        mobileRowRenderer,
-        getRowAction,
-        preloaderCheck: isPurchaseReceived,
-        totals: active_positions_filtered_totals,
-    };
-
-    return (
-        <React.Fragment>
-            <NotificationMessages />
-            {has_multiplier_contract ? (
-                <Tabs
-                    active_index={active_index}
-                    className='open-positions'
-                    onTabItemClick={setActiveTabIndex}
-                    top
-                    header_fit_content={!isMobile()}
-                >
-                    <div label={localize('Options')}>
-                        <OpenPositionsTable
-                            className='open-positions'
-                            columns={columns}
-                            {...shared_props}
-                            row_size={isMobile() ? 5 : 63}
-                        />
-                    </div>
-                    <div label={localize('Multipliers')}>
-                        <OpenPositionsTable
-                            className='open-positions-multiplier open-positions'
-                            is_multiplier_tab
-                            columns={columns}
-                            row_size={isMobile() ? 3 : 68}
-                            {...shared_props}
-                        />
-                    </div>
-                </Tabs>
-            ) : (
-                <OpenPositionsTable
-                    className='open-positions'
-                    columns={columns}
-                    {...shared_props}
-                    row_size={isMobile() ? 5 : 63}
-                />
-            )}
-        </React.Fragment>
-    );
-};
-
-OpenPositions.propTypes = {
-    active_positions: MobxPropTypes.arrayOrObservableArray,
-    component_icon: PropTypes.string,
-    currency: PropTypes.string,
-    error: PropTypes.string,
-    getPositionById: PropTypes.func,
-    is_loading: PropTypes.bool,
-    is_multiplier: PropTypes.bool,
-    NotificationMessages: PropTypes.func,
-    onClickCancel: PropTypes.func,
-    onClickSell: PropTypes.func,
-    onMount: PropTypes.func,
-    server_time: PropTypes.object,
-};
-
-export default connect(({ modules, client, common, ui }) => ({
-    active_positions: modules.portfolio.active_positions,
-    currency: client.currency,
-    error: modules.portfolio.error,
-    getPositionById: modules.portfolio.getPositionById,
-    is_loading: modules.portfolio.is_loading,
-    is_multiplier: modules.trade.is_multiplier,
-    NotificationMessages: ui.notification_messages_ui,
-    onClickCancel: modules.portfolio.onClickCancel,
-    onClickSell: modules.portfolio.onClickSell,
-    onMount: modules.portfolio.onMount,
-    server_time: common.server_time,
-}))(withRouter(OpenPositions));
diff --git a/packages/trader/src/Modules/Reports/Containers/profit-table.jsx b/packages/trader/src/Modules/Reports/Containers/profit-table.jsx
deleted file mode 100644
index 9469288002ca..000000000000
--- a/packages/trader/src/Modules/Reports/Containers/profit-table.jsx
+++ /dev/null
@@ -1,224 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { PropTypes as MobxPropTypes } from 'mobx-react';
-import React from 'react';
-import { withRouter } from 'react-router';
-import { DesktopWrapper, MobileWrapper, DataList, DataTable } from '@deriv/components';
-import { extractInfoFromShortcode, isForwardStarting, urlFor, website_name } from '@deriv/shared';
-import { localize, Localize } from '@deriv/translations';
-import { ReportsTableRowLoader } from 'App/Components/Elements/ContentLoader';
-import CompositeCalendar from 'App/Components/Form/CompositeCalendar';
-import { getContractPath } from 'App/Components/Routes/helpers';
-import { getSupportedContracts } from 'Constants';
-import { connect } from 'Stores/connect';
-import EmptyTradeHistoryMessage from '../Components/empty-trade-history-message.jsx';
-import PlaceholderComponent from '../Components/placeholder-component.jsx';
-import { ReportsMeta } from '../Components/reports-meta.jsx';
-import { getProfitTableColumnsTemplate } from '../Constants/data-table-constants';
-
-const getRowAction = row_obj =>
-    getSupportedContracts()[extractInfoFromShortcode(row_obj.shortcode).category.toUpperCase()] &&
-    !isForwardStarting(row_obj.shortcode, row_obj.purchase_time_unix)
-        ? getContractPath(row_obj.contract_id)
-        : {
-              component: (
-                  <Localize
-                      i18n_default_text='This trade type is currently not supported on {{website_name}}. Please go to <0>Binary.com</0> for details.'
-                      values={{
-                          website_name,
-                      }}
-                      components={[
-                          <a
-                              key={0}
-                              className='link link--orange'
-                              rel='noopener noreferrer'
-                              target='_blank'
-                              href={urlFor('user/profit_tablews', { legacy: true })}
-                          />,
-                      ]}
-                  />
-              ),
-          };
-
-const ProfitTable = ({
-    component_icon,
-    currency,
-    data,
-    date_from,
-    date_to,
-    error,
-    filtered_date_range,
-    is_empty,
-    is_loading,
-    is_switching,
-    handleDateChange,
-    handleScroll,
-    has_selected_date,
-    onMount,
-    onUnmount,
-    totals,
-}) => {
-    React.useEffect(() => {
-        onMount();
-        return () => {
-            onUnmount();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    if (error) return <p>{error}</p>;
-
-    const filter_component = (
-        <CompositeCalendar
-            input_date_range={filtered_date_range}
-            onChange={handleDateChange}
-            from={date_from}
-            to={date_to}
-        />
-    );
-
-    const columns = getProfitTableColumnsTemplate(currency, data.length);
-    const columns_map = columns.reduce((map, item) => {
-        map[item.col_index] = item;
-        return map;
-    }, {});
-
-    const mobileRowRenderer = ({ row, is_footer }) => {
-        const duration_type = /^MULTUP|MULTDOWN/.test(row.shortcode) ? '' : row.duration_type;
-        const duration_classname = duration_type ? `duration-type__${duration_type.toLowerCase()}` : '';
-
-        if (is_footer) {
-            return (
-                <div className='data-list__row'>
-                    <DataList.Cell row={row} column={columns_map.action_type} is_footer={is_footer} />
-                    <DataList.Cell
-                        className='data-list__row-cell--amount'
-                        row={row}
-                        column={columns_map.profit_loss}
-                        is_footer={is_footer}
-                    />
-                </div>
-            );
-        }
-
-        return (
-            <>
-                <div className='data-list__row'>
-                    <DataList.Cell row={row} column={columns_map.action_type} />
-                    <div className={classNames('duration-type', duration_classname)}>
-                        <div className={classNames('duration-type__background', `${duration_classname}__background`)} />
-                        <span className={`${duration_classname}__label`}>{localize(duration_type)}</span>
-                    </div>
-                </div>
-                <div className='data-list__row'>
-                    <DataList.Cell row={row} column={columns_map.transaction_id} />
-                    <DataList.Cell className='data-list__row-cell--amount' row={row} column={columns_map.currency} />
-                </div>
-                <div className='data-list__row'>
-                    <DataList.Cell row={row} column={columns_map.purchase_time} />
-                    <DataList.Cell className='data-list__row-cell--amount' row={row} column={columns_map.buy_price} />
-                </div>
-                <div className='data-list__row'>
-                    <DataList.Cell row={row} column={columns_map.sell_time} />
-                    <DataList.Cell className='data-list__row-cell--amount' row={row} column={columns_map.sell_price} />
-                </div>
-                <div className='data-list__row'>
-                    <DataList.Cell row={row} column={columns_map.profit_loss} />
-                </div>
-            </>
-        );
-    };
-
-    return (
-        <React.Fragment>
-            <ReportsMeta filter_component={filter_component} className='profit-table__filter' />
-            {is_switching ? (
-                <PlaceholderComponent is_loading />
-            ) : (
-                <React.Fragment>
-                    {data.length === 0 || is_empty ? (
-                        <PlaceholderComponent
-                            is_loading={is_loading}
-                            has_selected_date={has_selected_date}
-                            is_empty={is_empty}
-                            empty_message_component={EmptyTradeHistoryMessage}
-                            component_icon={component_icon}
-                            localized_message={localize('You have no trading activity yet.')}
-                            localized_period_message={localize(
-                                "You've made no transactions of this type during this period."
-                            )}
-                        />
-                    ) : (
-                        <div className='reports__content'>
-                            <DesktopWrapper>
-                                <DataTable
-                                    className='profit-table'
-                                    data_source={data}
-                                    columns={columns}
-                                    onScroll={handleScroll}
-                                    footer={totals}
-                                    is_empty={is_empty}
-                                    getRowAction={getRowAction}
-                                    getRowSize={() => 63}
-                                    content_loader={ReportsTableRowLoader}
-                                >
-                                    <PlaceholderComponent is_loading={is_loading} />
-                                </DataTable>
-                            </DesktopWrapper>
-                            <MobileWrapper>
-                                <DataList
-                                    className='profit-table'
-                                    data_source={data}
-                                    rowRenderer={mobileRowRenderer}
-                                    getRowAction={getRowAction}
-                                    onScroll={handleScroll}
-                                    footer={totals}
-                                    row_gap={8}
-                                >
-                                    <PlaceholderComponent is_loading={is_loading} />
-                                </DataList>
-                            </MobileWrapper>
-                        </div>
-                    )}
-                </React.Fragment>
-            )}
-        </React.Fragment>
-    );
-};
-
-ProfitTable.propTypes = {
-    component_icon: PropTypes.string,
-    currency: PropTypes.string,
-    data: MobxPropTypes.arrayOrObservableArray,
-    date_from: PropTypes.number,
-    date_to: PropTypes.number,
-    error: PropTypes.string,
-    filtered_date_range: PropTypes.object,
-    is_empty: PropTypes.bool,
-    is_loading: PropTypes.bool,
-    is_switching: PropTypes.bool,
-    handleDateChange: PropTypes.func,
-    handleScroll: PropTypes.func,
-    has_selected_date: PropTypes.bool,
-    onMount: PropTypes.func,
-    onUnmount: PropTypes.func,
-    totals: PropTypes.object,
-};
-
-export default connect(({ modules, client }) => ({
-    currency: client.currency,
-    data: modules.profit_table.data,
-    date_from: modules.profit_table.date_from,
-    date_to: modules.profit_table.date_to,
-    error: modules.profit_table.error,
-    filtered_date_range: modules.profit_table.filtered_date_range,
-    is_empty: modules.profit_table.is_empty,
-    is_loading: modules.profit_table.is_loading,
-    is_switching: client.is_switching,
-    handleDateChange: modules.profit_table.handleDateChange,
-    handleScroll: modules.profit_table.handleScroll,
-    has_selected_date: modules.profit_table.has_selected_date,
-    onMount: modules.profit_table.onMount,
-    onUnmount: modules.profit_table.onUnmount,
-    totals: modules.profit_table.totals,
-}))(withRouter(ProfitTable));
diff --git a/packages/trader/src/Modules/Reports/Containers/reports.jsx b/packages/trader/src/Modules/Reports/Containers/reports.jsx
deleted file mode 100644
index 871bb6307a27..000000000000
--- a/packages/trader/src/Modules/Reports/Containers/reports.jsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withRouter } from 'react-router-dom';
-import {
-    Div100vhContainer,
-    VerticalTab,
-    DesktopWrapper,
-    MobileWrapper,
-    FadeWrapper,
-    PageOverlay,
-    SelectNative,
-    Loading,
-} from '@deriv/components';
-import { getSelectedRoute } from '@deriv/shared';
-import { localize } from '@deriv/translations';
-import { connect } from 'Stores/connect';
-import 'Sass/app/modules/reports.scss';
-
-const Reports = ({
-    history,
-    is_logged_in,
-    is_logging_in,
-    is_visible,
-    location,
-    routeBackInApp,
-    routes,
-    setTabIndex,
-    setVisibilityRealityCheck,
-    tab_index,
-    toggleReports,
-}) => {
-    React.useEffect(() => {
-        toggleReports(true);
-
-        return () => {
-            setVisibilityRealityCheck(1);
-            toggleReports(false);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    const onClickClose = () => routeBackInApp(history);
-
-    const handleRouteChange = e => history.push(e.target.value);
-
-    const menu_options = () => {
-        const options = [];
-
-        routes.forEach(route => {
-            options.push({
-                default: route.default,
-                icon: route.icon_component,
-                label: route.getTitle(),
-                value: route.component,
-                path: route.path,
-            });
-        });
-
-        return options;
-    };
-
-    const selected_route = getSelectedRoute({ routes, pathname: location.pathname });
-
-    if (!is_logged_in && is_logging_in) {
-        return <Loading is_fullscreen />;
-    }
-    return (
-        <FadeWrapper is_visible={is_visible} className='reports-page-wrapper' keyname='reports-page-wrapper'>
-            <div className='reports'>
-                <PageOverlay header={localize('Reports')} onClickClose={onClickClose}>
-                    <DesktopWrapper>
-                        <VerticalTab
-                            alignment='center'
-                            id='report'
-                            is_floating
-                            classNameHeader='reports__tab-header'
-                            current_path={location.pathname}
-                            is_routed
-                            is_full_width
-                            setVerticalTabIndex={setTabIndex}
-                            vertical_tab_index={selected_route.default ? 0 : tab_index}
-                            list={menu_options()}
-                        />
-                    </DesktopWrapper>
-                    <MobileWrapper>
-                        <Div100vhContainer className='reports__mobile-wrapper' height_offset='80px'>
-                            <SelectNative
-                                className='reports__route-selection'
-                                list_items={menu_options().map(option => ({
-                                    text: option.label,
-                                    value: option.path,
-                                }))}
-                                value={selected_route.path}
-                                should_show_empty_option={false}
-                                onChange={handleRouteChange}
-                            />
-                            {selected_route && (
-                                <selected_route.component component_icon={selected_route.icon_component} />
-                            )}
-                        </Div100vhContainer>
-                    </MobileWrapper>
-                </PageOverlay>
-            </div>
-        </FadeWrapper>
-    );
-};
-
-Reports.propTypes = {
-    history: PropTypes.object,
-    is_logged_in: PropTypes.bool,
-    is_logging_in: PropTypes.bool,
-    is_visible: PropTypes.bool,
-    location: PropTypes.object,
-    routeBackInApp: PropTypes.func,
-    routes: PropTypes.arrayOf(PropTypes.object),
-    setTabIndex: PropTypes.func,
-    setVisibilityRealityCheck: PropTypes.func,
-    tab_index: PropTypes.number,
-    toggleReports: PropTypes.func,
-};
-
-export default connect(({ client, common, ui }) => ({
-    is_logged_in: client.is_logged_in,
-    is_logging_in: client.is_logging_in,
-    is_visible: ui.is_reports_visible,
-    routeBackInApp: common.routeBackInApp,
-    setVisibilityRealityCheck: client.setVisibilityRealityCheck,
-    setTabIndex: ui.setReportsTabIndex,
-    tab_index: ui.reports_route_tab_index,
-    toggleReports: ui.toggleReports,
-}))(withRouter(Reports));
diff --git a/packages/trader/src/Modules/Reports/Containers/statement.jsx b/packages/trader/src/Modules/Reports/Containers/statement.jsx
deleted file mode 100644
index 1d5b36935b9d..000000000000
--- a/packages/trader/src/Modules/Reports/Containers/statement.jsx
+++ /dev/null
@@ -1,282 +0,0 @@
-import { PropTypes as MobxPropTypes } from 'mobx-react';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withRouter } from 'react-router-dom';
-import { DesktopWrapper, MobileWrapper, DataList, DataTable, Text, Clipboard } from '@deriv/components';
-import { extractInfoFromShortcode, isForwardStarting, urlFor, website_name } from '@deriv/shared';
-import { localize, Localize } from '@deriv/translations';
-import { ReportsTableRowLoader } from 'App/Components/Elements/ContentLoader';
-import { getContractPath } from 'App/Components/Routes/helpers';
-import { getSupportedContracts } from 'Constants';
-import { connect } from 'Stores/connect';
-import { getStatementTableColumnsTemplate } from '../Constants/data-table-constants';
-import PlaceholderComponent from '../Components/placeholder-component.jsx';
-import AccountStatistics from '../Components/account-statistics.jsx';
-import FilterComponent from '../Components/filter-component.jsx';
-import { ReportsMeta } from '../Components/reports-meta.jsx';
-import EmptyTradeHistoryMessage from '../Components/empty-trade-history-message.jsx';
-
-const DetailsComponent = ({ message = '', action_type = '' }) => {
-    const address_hash_match = /:\s([0-9a-zA-Z]+.{25,28})/gm.exec(message.split(/,\s/)[0]);
-    const address_hash = address_hash_match?.[1];
-    const blockchain_hash_match = /:\s([0-9a-zA-Z]+.{25,34})/gm.exec(message.split(/,\s/)[1]);
-    const blockchain_hash = blockchain_hash_match?.[1];
-
-    let messages = [message];
-
-    if (address_hash || blockchain_hash) {
-        const lines = message.split(/,\s/);
-        messages = lines.map((text, index) => {
-            if (index !== lines.length - 1) {
-                return `${text}, `;
-            }
-            return text;
-        });
-    }
-
-    return (
-        <Text as='div' size='xs' className='statement__row--detail-text' align='center'>
-            {messages.map((text, index) => {
-                return (
-                    <div key={text}>
-                        {text}
-                        {blockchain_hash && index === messages.length - 1 && (
-                            <Clipboard text_copy={blockchain_hash} popoverAlignment='top' />
-                        )}
-                        {address_hash && action_type === 'withdrawal' && index === messages.length - 1 && (
-                            <Clipboard text_copy={address_hash} popoverAlignment='top' />
-                        )}
-                    </div>
-                );
-            })}
-        </Text>
-    );
-};
-
-const getRowAction = row_obj => {
-    let action;
-    if (row_obj.id && ['buy', 'sell'].includes(row_obj.action_type)) {
-        action =
-            getSupportedContracts()[extractInfoFromShortcode(row_obj.shortcode).category.toUpperCase()] &&
-            !isForwardStarting(row_obj.shortcode, row_obj.purchase_time || row_obj.transaction_time)
-                ? getContractPath(row_obj.id)
-                : {
-                      component: (
-                          <Localize
-                              i18n_default_text='This trade type is currently not supported on {{website_name}}. Please go to <0>Binary.com</0> for details.'
-                              values={{
-                                  website_name,
-                              }}
-                              components={[
-                                  <a
-                                      key={0}
-                                      className='link link--orange'
-                                      rel='noopener noreferrer'
-                                      target='_blank'
-                                      href={urlFor('user/statementws', { legacy: true })}
-                                  />,
-                              ]}
-                          />
-                      ),
-                  };
-    } else if (row_obj.action_type === 'withdrawal') {
-        if (row_obj.withdrawal_details && row_obj.longcode) {
-            action = {
-                message: `${row_obj.withdrawal_details} ${row_obj.longcode}`,
-            };
-        } else {
-            action = {
-                message: row_obj.desc,
-            };
-        }
-    } else if (row_obj.desc && ['deposit', 'transfer', 'adjustment', 'hold', 'release'].includes(row_obj.action_type)) {
-        action = {
-            message: row_obj.desc,
-        };
-    }
-
-    if (action?.message) {
-        action.component = <DetailsComponent message={action.message} action_type={row_obj.action_type} />;
-    }
-
-    return action;
-};
-
-const Statement = ({
-    account_statistics,
-    action_type,
-    component_icon,
-    currency,
-    data,
-    date_from,
-    date_to,
-    error,
-    filtered_date_range,
-    handleDateChange,
-    handleFilterChange,
-    handleScroll,
-    has_selected_date,
-    is_empty,
-    is_loading,
-    is_mx_mlt,
-    is_switching,
-    is_virtual,
-    onMount,
-    onUnmount,
-}) => {
-    React.useEffect(() => {
-        onMount();
-        return () => {
-            onUnmount();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    if (error) return <p>{error}</p>;
-
-    const columns = getStatementTableColumnsTemplate(currency);
-    const columns_map = columns.reduce((map, item) => {
-        map[item.col_index] = item;
-        return map;
-    }, {});
-
-    const mobileRowRenderer = ({ row, passthrough }) => (
-        <React.Fragment>
-            <div className='data-list__row'>
-                <DataList.Cell row={row} column={columns_map.icon} passthrough={passthrough} />
-                <DataList.Cell row={row} column={columns_map.action_type} passthrough={passthrough} />
-            </div>
-            <div className='data-list__row'>
-                <DataList.Cell row={row} column={columns_map.refid} />
-                <DataList.Cell className='data-list__row-cell--amount' row={row} column={columns_map.currency} />
-            </div>
-            <div className='data-list__row'>
-                <DataList.Cell row={row} column={columns_map.date} />
-                <DataList.Cell className='data-list__row-cell--amount' row={row} column={columns_map.amount} />
-            </div>
-            <div className='data-list__row'>
-                <DataList.Cell row={row} column={columns_map.balance} />
-            </div>
-        </React.Fragment>
-    );
-
-    return (
-        <React.Fragment>
-            <ReportsMeta
-                className={is_mx_mlt ? undefined : 'reports__meta--statement'}
-                filter_component={
-                    <FilterComponent
-                        action_type={action_type}
-                        date_from={date_from}
-                        date_to={date_to}
-                        handleDateChange={handleDateChange}
-                        handleFilterChange={handleFilterChange}
-                        filtered_date_range={filtered_date_range}
-                    />
-                }
-                is_statement
-                optional_component={
-                    !is_switching &&
-                    is_mx_mlt && <AccountStatistics account_statistics={account_statistics} currency={currency} />
-                }
-            />
-            {is_switching ? (
-                <PlaceholderComponent is_loading />
-            ) : (
-                <React.Fragment>
-                    {data.length === 0 || is_empty ? (
-                        <PlaceholderComponent
-                            is_loading={is_loading}
-                            has_selected_date={has_selected_date}
-                            is_empty={is_empty}
-                            empty_message_component={EmptyTradeHistoryMessage}
-                            component_icon={component_icon}
-                            localized_message={localize('You have no transactions yet.')}
-                            localized_period_message={localize(
-                                "You've made no transactions of this type during this period."
-                            )}
-                        />
-                    ) : (
-                        <div className='reports__content'>
-                            <DesktopWrapper>
-                                <DataTable
-                                    className='statement'
-                                    columns={columns}
-                                    content_loader={ReportsTableRowLoader}
-                                    data_source={data}
-                                    getRowAction={row => getRowAction(row)}
-                                    onScroll={handleScroll}
-                                    passthrough={{
-                                        isTopUp: item => is_virtual && item.action === 'Deposit',
-                                    }}
-                                >
-                                    <PlaceholderComponent is_loading={is_loading} />
-                                </DataTable>
-                            </DesktopWrapper>
-                            <MobileWrapper>
-                                <DataList
-                                    className='statement'
-                                    data_source={data}
-                                    getRowAction={getRowAction}
-                                    onScroll={handleScroll}
-                                    rowRenderer={mobileRowRenderer}
-                                    row_gap={8}
-                                    passthrough={{
-                                        isTopUp: item => is_virtual && item.action === 'Deposit',
-                                    }}
-                                >
-                                    <PlaceholderComponent is_loading={is_loading} />
-                                </DataList>
-                            </MobileWrapper>
-                        </div>
-                    )}
-                </React.Fragment>
-            )}
-        </React.Fragment>
-    );
-};
-
-Statement.propTypes = {
-    action_type: PropTypes.string,
-    account_statistics: PropTypes.object,
-    component_icon: PropTypes.string,
-    currency: PropTypes.string,
-    data: MobxPropTypes.arrayOrObservableArray,
-    date_from: PropTypes.number,
-    date_to: PropTypes.number,
-    error: PropTypes.string,
-    filtered_date_range: PropTypes.object,
-    handleDateChange: PropTypes.func,
-    handleFilterChange: PropTypes.func,
-    handleScroll: PropTypes.func,
-    has_selected_date: PropTypes.bool,
-    is_empty: PropTypes.bool,
-    is_loading: PropTypes.bool,
-    is_mx_mlt: PropTypes.bool,
-    is_switching: PropTypes.bool,
-    is_virtual: PropTypes.bool,
-    onMount: PropTypes.func,
-    onUnmount: PropTypes.func,
-};
-
-export default connect(({ modules, client }) => ({
-    action_type: modules.statement.action_type,
-    account_statistics: modules.statement.account_statistics,
-    currency: client.currency,
-    data: modules.statement.data,
-    date_from: modules.statement.date_from,
-    date_to: modules.statement.date_to,
-    error: modules.statement.error,
-    filtered_date_range: modules.statement.filtered_date_range,
-    handleDateChange: modules.statement.handleDateChange,
-    handleFilterChange: modules.statement.handleFilterChange,
-    handleScroll: modules.statement.handleScroll,
-    has_selected_date: modules.statement.has_selected_date,
-    is_empty: modules.statement.is_empty,
-    is_loading: modules.statement.is_loading,
-    is_mx_mlt: client.standpoint.iom || client.standpoint.malta,
-    is_switching: client.is_switching,
-    is_virtual: client.is_virtual,
-    onMount: modules.statement.onMount,
-    onUnmount: modules.statement.onUnmount,
-}))(withRouter(Statement));
diff --git a/packages/trader/src/Modules/Reports/Helpers/profit-loss.js b/packages/trader/src/Modules/Reports/Helpers/profit-loss.js
deleted file mode 100644
index 095262006b56..000000000000
--- a/packages/trader/src/Modules/Reports/Helpers/profit-loss.js
+++ /dev/null
@@ -1 +0,0 @@
-export const getProfitOrLoss = value => (+value.replace(/,/g, '') >= 0 ? 'profit' : 'loss');
diff --git a/packages/trader/src/Modules/Reports/index.js b/packages/trader/src/Modules/Reports/index.js
deleted file mode 100644
index aac566b021bf..000000000000
--- a/packages/trader/src/Modules/Reports/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import OpenPositions from './Containers/open-positions.jsx';
-import ProfitTable from './Containers/profit-table.jsx';
-import Statement from './Containers/statement.jsx';
-import Reports from './Containers/reports.jsx';
-
-export default {
-    OpenPositions,
-    ProfitTable,
-    Statement,
-    Reports,
-};
diff --git a/packages/trader/src/Stores/Modules/Portfolio/Helpers/format-response.js b/packages/trader/src/Stores/Modules/Portfolio/Helpers/format-response.js
index 7bc0836efa20..3ffbf2a4c600 100644
--- a/packages/trader/src/Stores/Modules/Portfolio/Helpers/format-response.js
+++ b/packages/trader/src/Stores/Modules/Portfolio/Helpers/format-response.js
@@ -1,6 +1,6 @@
 import { getUnsupportedContracts } from 'Constants';
 import { getSymbolDisplayName } from 'Stores/Modules/Trading/Helpers/active-symbols';
-import { getMarketInformation } from 'Modules/Reports/Helpers/market-underlying';
+import { getMarketInformation } from 'Utils/Helpers/market-underlying';
 
 const isUnSupportedContract = portfolio_pos =>
     !!getUnsupportedContracts()[portfolio_pos.contract_type] || // check unsupported contract type
diff --git a/packages/trader/src/Stores/Modules/Profit/Helpers/format-response.js b/packages/trader/src/Stores/Modules/Profit/Helpers/format-response.js
index db7e776c2249..645ba1795f39 100644
--- a/packages/trader/src/Stores/Modules/Profit/Helpers/format-response.js
+++ b/packages/trader/src/Stores/Modules/Profit/Helpers/format-response.js
@@ -1,6 +1,6 @@
 import { formatMoney, toMoment } from '@deriv/shared';
 
-import { getMarketInformation } from '../../../../Modules/Reports/Helpers/market-underlying';
+import { getMarketInformation } from 'Utils/Helpers/market-underlying';
 import { getSymbolDisplayName } from '../../Trading/Helpers/active-symbols';
 
 export const formatProfitTableTransactions = (transaction, currency, active_symbols = []) => {
diff --git a/packages/trader/src/Stores/Modules/Statement/Helpers/format-response.js b/packages/trader/src/Stores/Modules/Statement/Helpers/format-response.js
index 39992f536a7b..93864acfda6d 100644
--- a/packages/trader/src/Stores/Modules/Statement/Helpers/format-response.js
+++ b/packages/trader/src/Stores/Modules/Statement/Helpers/format-response.js
@@ -1,7 +1,7 @@
 import { formatMoney, toTitleCase, toMoment } from '@deriv/shared';
 
 import { localize } from '@deriv/translations';
-import { getMarketInformation } from 'Modules/Reports/Helpers/market-underlying';
+import { getMarketInformation } from 'Utils/Helpers/market-underlying';
 
 import { getSymbolDisplayName } from '../../Trading/Helpers/active-symbols';
 
diff --git a/packages/trader/src/Modules/Reports/Helpers/market-underlying.js b/packages/trader/src/Utils/Helpers/market-underlying.js
similarity index 95%
rename from packages/trader/src/Modules/Reports/Helpers/market-underlying.js
rename to packages/trader/src/Utils/Helpers/market-underlying.js
index 82363678b752..2c5d3edde22d 100644
--- a/packages/trader/src/Modules/Reports/Helpers/market-underlying.js
+++ b/packages/trader/src/Utils/Helpers/market-underlying.js
@@ -1,4 +1,4 @@
-import { getMarketNamesMap, getContractConfig } from 'Constants';
+import { getMarketNamesMap, getContractConfig } from 'Constants/contract';
 import { localize } from '@deriv/translations';
 
 /**

From f1d4db79017fb85c7484933bdb43350de08a8720 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Tue, 12 Apr 2022 19:24:11 +0430
Subject: [PATCH 08/64] fix root_store error

---
 .../reports/src/Constants/routes-config.js    | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/reports/src/Constants/routes-config.js b/packages/reports/src/Constants/routes-config.js
index e0b8654ae712..6fbbf5afb5fa 100644
--- a/packages/reports/src/Constants/routes-config.js
+++ b/packages/reports/src/Constants/routes-config.js
@@ -1,41 +1,41 @@
 import React from 'react';
-import { routes } from '@deriv/shared';
+import { routes, makeLazyLoader } from '@deriv/shared';
+import { Loading } from '@deriv/components';
 import { localize } from '@deriv/translations';
-// import { OpenPositions, ProfitTable, Statement, Reports } from '../Containers/index';
-import OpenPositions from '../Containers/open-positions.jsx';
-import ProfitTable from '../Containers/profit-table.jsx';
-import Statement from '../Containers/statement.jsx';
-import Reports from '../Containers/reports.jsx';
 
-// Error Routes
 const Page404 = React.lazy(() => import(/* webpackChunkName: "404" */ '../Modules/Page404'));
 
+const lazyLoadReportComponent = makeLazyLoader(
+    () => import(/* webpackChunkName: "reports" */ '../Containers'),
+    () => <Loading />
+);
+
 // Order matters
 const initRoutesConfig = () => {
     return [
         {
             path: routes.reports,
-            component: <Reports />,
+            component: lazyLoadReportComponent('Reports'),
             is_authenticated: true,
             getTitle: () => localize('Reports'),
             icon_component: 'IcReports',
             routes: [
                 {
                     path: routes.positions,
-                    component: <OpenPositions />,
+                    component: lazyLoadReportComponent('OpenPositions'),
                     getTitle: () => localize('Open positions'),
                     icon_component: 'IcOpenPositions',
                     default: true,
                 },
                 {
                     path: routes.profit,
-                    component: <ProfitTable />,
+                    component: lazyLoadReportComponent('ProfitTable'),
                     getTitle: () => localize('Profit table'),
                     icon_component: 'IcProfitTable',
                 },
                 {
                     path: routes.statement,
-                    component: <Statement />,
+                    component: lazyLoadReportComponent('Statement'),
                     getTitle: () => localize('Statement'),
                     icon_component: 'IcStatement',
                 },

From af9c182826ef15ca8eec9ec4fd2ce35c7f25c54e Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Wed, 13 Apr 2022 15:07:05 +0430
Subject: [PATCH 09/64] fix chunkName

---
 packages/reports/src/Constants/routes-config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/reports/src/Constants/routes-config.js b/packages/reports/src/Constants/routes-config.js
index 6fbbf5afb5fa..75361c9b6ccd 100644
--- a/packages/reports/src/Constants/routes-config.js
+++ b/packages/reports/src/Constants/routes-config.js
@@ -6,7 +6,7 @@ import { localize } from '@deriv/translations';
 const Page404 = React.lazy(() => import(/* webpackChunkName: "404" */ '../Modules/Page404'));
 
 const lazyLoadReportComponent = makeLazyLoader(
-    () => import(/* webpackChunkName: "reports" */ '../Containers'),
+    () => import(/* webpackChunkName: "reports-routes" */ '../Containers'),
     () => <Loading />
 );
 

From fa298247e7ce88d7b93ab86fefdb954249ea7406 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Wed, 13 Apr 2022 15:45:06 +0430
Subject: [PATCH 10/64] fix direcory path

---
 packages/reports/package.json                 |   1 +
 .../reports/src/Components/amount-cell.jsx    |   2 +-
 packages/reports/src/Components/index.js      |   2 +-
 .../src/Components/market-symbol-icon-row.jsx |   2 +-
 .../src/Components/placeholder-component.jsx  |   2 +-
 .../src/Components/profit_loss_cell.jsx       |   2 +-
 .../src/Constants/data-table-constants.js     |  14 +-
 .../reports/src/Helpers/market-underlying.js  |   2 +-
 .../SmartChart/Components/Markers/marker.jsx  |   2 +-
 .../SmartChart/Components/all-markers.jsx     |   3 +-
 .../SmartChart/Components/control-widgets.jsx |   2 +-
 .../SmartChart/Components/toolbar-widgets.jsx |   2 +-
 .../Stores/Modules/Contract/Helpers/logic.js  |   2 +-
 .../Portfolio/Helpers/format-response.js      |   4 +-
 .../Modules/SmartChart/Constants/markers.js   |   6 +-
 .../Statement/Helpers/format-response.js      |   2 +-
 .../Components/Duration/advanced-duration.jsx | 157 ++++++++
 .../Components/Duration/duration-mobile.jsx   | 353 ++++++++++++++++++
 .../Components/Duration/duration-toggle.jsx   |  38 ++
 .../Components/Duration/duration-wrapper.jsx  | 211 +++++++++++
 .../Trading/Components/Duration/duration.jsx  | 224 +++++++++++
 .../Trading/Components/Duration/index.js      |   1 +
 .../Components/Duration/simple-duration.jsx   |  86 +++++
 .../Modules/Trading/Components/amount.jsx     | 220 +++++++++++
 .../Modules/Trading/Components/barrier.jsx    | 194 ++++++++++
 .../Modules/Trading/Components/last-digit.jsx |  39 ++
 .../Stores/Modules/Trading/Constants/ui.js    |   8 +-
 .../Modules/Trading/Helpers/start-date.js     |   2 +-
 .../src/Stores/Modules/Trading/trade-store.js |   4 +-
 .../reports/src/Utils/Validator/validator.js  |   2 +-
 .../Stores/Modules/Trading/Constants/ui.js    |   8 +-
 .../trader/src/Utils/Validator/validator.js   |   2 +-
 32 files changed, 1562 insertions(+), 37 deletions(-)
 create mode 100644 packages/reports/src/Stores/Modules/Trading/Components/Duration/advanced-duration.jsx
 create mode 100644 packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-mobile.jsx
 create mode 100644 packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-toggle.jsx
 create mode 100644 packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-wrapper.jsx
 create mode 100644 packages/reports/src/Stores/Modules/Trading/Components/Duration/duration.jsx
 create mode 100644 packages/reports/src/Stores/Modules/Trading/Components/Duration/index.js
 create mode 100644 packages/reports/src/Stores/Modules/Trading/Components/Duration/simple-duration.jsx
 create mode 100644 packages/reports/src/Stores/Modules/Trading/Components/amount.jsx
 create mode 100644 packages/reports/src/Stores/Modules/Trading/Components/barrier.jsx
 create mode 100644 packages/reports/src/Stores/Modules/Trading/Components/last-digit.jsx

diff --git a/packages/reports/package.json b/packages/reports/package.json
index 8a6dd05209ed..038538d2845e 100644
--- a/packages/reports/package.json
+++ b/packages/reports/package.json
@@ -87,6 +87,7 @@
       "@deriv/api-types": "1.0.48",
       "@deriv/components": "^1.0.0",
       "@deriv/deriv-api": "^1.0.8",
+      "@deriv/deriv-charts": "^0.5.1",
       "@deriv/shared": "^1.0.0",
       "@deriv/translations": "^1.0.0",
       "@types/classnames": "^2.2.11",
diff --git a/packages/reports/src/Components/amount-cell.jsx b/packages/reports/src/Components/amount-cell.jsx
index d52a57c7562b..b2d3d7a74068 100644
--- a/packages/reports/src/Components/amount-cell.jsx
+++ b/packages/reports/src/Components/amount-cell.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getProfitOrLoss } from 'Helpers/profit-loss';
+import { getProfitOrLoss } from '../Helpers/profit-loss';
 
 const AmountCell = ({ value }) => {
     const status = getProfitOrLoss(value);
diff --git a/packages/reports/src/Components/index.js b/packages/reports/src/Components/index.js
index f6aad7b8b061..d498bb957778 100644
--- a/packages/reports/src/Components/index.js
+++ b/packages/reports/src/Components/index.js
@@ -1,3 +1,3 @@
-import EmptyPortfolioMessage from './empty-portfolio-message';
+import EmptyPortfolioMessage from './empty-portfolio-message.jsx';
 
 export default EmptyPortfolioMessage;
diff --git a/packages/reports/src/Components/market-symbol-icon-row.jsx b/packages/reports/src/Components/market-symbol-icon-row.jsx
index ff595da87d7a..5ada1db081e5 100644
--- a/packages/reports/src/Components/market-symbol-icon-row.jsx
+++ b/packages/reports/src/Components/market-symbol-icon-row.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { extractInfoFromShortcode, isHighLow } from '@deriv/shared';
 import { Icon, Popover, IconTradeTypes } from '@deriv/components';
-import { getMarketName, getTradeTypeName } from 'Helpers/market-underlying';
+import { getMarketName, getTradeTypeName } from '../Helpers/market-underlying';
 
 const MarketSymbolIconRow = ({ icon, payload, show_description, should_show_multiplier = true }) => {
     const should_show_category_icon = typeof payload.shortcode === 'string';
diff --git a/packages/reports/src/Components/placeholder-component.jsx b/packages/reports/src/Components/placeholder-component.jsx
index b8d9717abc41..82ce003ce224 100644
--- a/packages/reports/src/Components/placeholder-component.jsx
+++ b/packages/reports/src/Components/placeholder-component.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Loading from '_common/components/loading.jsx';
+import Loading from '../_common/components/loading.jsx';
 
 const PlaceholderComponent = props => {
     const EmptyMessageComponent = props.empty_message_component;
diff --git a/packages/reports/src/Components/profit_loss_cell.jsx b/packages/reports/src/Components/profit_loss_cell.jsx
index ab323352670d..bc454d179b2b 100644
--- a/packages/reports/src/Components/profit_loss_cell.jsx
+++ b/packages/reports/src/Components/profit_loss_cell.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getProfitOrLoss } from 'Helpers/profit-loss';
+import { getProfitOrLoss } from '../Helpers/profit-loss';
 
 const ProfitLossCell = ({ value, children }) => {
     const status = getProfitOrLoss(value);
diff --git a/packages/reports/src/Constants/data-table-constants.js b/packages/reports/src/Constants/data-table-constants.js
index 87378010a6f0..4ce033488d07 100644
--- a/packages/reports/src/Constants/data-table-constants.js
+++ b/packages/reports/src/Constants/data-table-constants.js
@@ -3,14 +3,14 @@ import React from 'react';
 import { Icon, Label, Money, ContractCard } from '@deriv/components';
 import { isMobile, getCurrencyDisplayCode, getTotalProfit, shouldShowCancellation } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
-import ProgressSliderStream from 'Containers/progress-slider-stream.jsx';
+import ProgressSliderStream from '../Containers/progress-slider-stream.jsx';
 
-import { getCardLabels } from '_common/contract';
-import { getProfitOrLoss } from 'Helpers/profit-loss';
-import IndicativeCell from 'Components/indicative-cell.jsx';
-import MarketSymbolIconRow from 'Components/market-symbol-icon-row.jsx';
-import ProfitLossCell from 'Components/profit_loss_cell.jsx';
-import CurrencyWrapper from 'Components/currency-wrapper.jsx';
+import { getCardLabels } from '../_common/contract';
+import { getProfitOrLoss } from '../Helpers/profit-loss';
+import IndicativeCell from '../Components/indicative-cell.jsx';
+import MarketSymbolIconRow from '../Components/market-symbol-icon-row.jsx';
+import ProfitLossCell from '../Components/profit_loss_cell.jsx';
+import CurrencyWrapper from '../Components/currency-wrapper.jsx';
 
 const getModeFromValue = key => {
     const map = {
diff --git a/packages/reports/src/Helpers/market-underlying.js b/packages/reports/src/Helpers/market-underlying.js
index e40f15c4dc0f..c1b3fc568a4b 100644
--- a/packages/reports/src/Helpers/market-underlying.js
+++ b/packages/reports/src/Helpers/market-underlying.js
@@ -1,4 +1,4 @@
-import { getMarketNamesMap, getContractConfig } from '_common/contract';
+import { getMarketNamesMap, getContractConfig } from '../_common/contract';
 import { localize } from '@deriv/translations';
 
 /**
diff --git a/packages/reports/src/Modules/SmartChart/Components/Markers/marker.jsx b/packages/reports/src/Modules/SmartChart/Components/Markers/marker.jsx
index c5f2cef75b2b..84a5d2b69042 100644
--- a/packages/reports/src/Modules/SmartChart/Components/Markers/marker.jsx
+++ b/packages/reports/src/Modules/SmartChart/Components/Markers/marker.jsx
@@ -1,7 +1,7 @@
 import { toJS } from 'mobx';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { FastMarker } from 'Modules/SmartChart';
+import { FastMarker } from '../../index';
 
 const ChartMarker = ({ marker_config, marker_content_props, is_bottom_widget_visible }) => {
     const { ContentComponent, ...marker_props } = marker_config;
diff --git a/packages/reports/src/Modules/SmartChart/Components/all-markers.jsx b/packages/reports/src/Modules/SmartChart/Components/all-markers.jsx
index 8ea050df9cbd..8641332bc533 100644
--- a/packages/reports/src/Modules/SmartChart/Components/all-markers.jsx
+++ b/packages/reports/src/Modules/SmartChart/Components/all-markers.jsx
@@ -4,7 +4,8 @@
 // 3- Please read contract-store.js & trade.jsx carefully
 import React from 'react';
 import { getDecimalPlaces } from '@deriv/shared';
-import { RawMarker } from 'Modules/SmartChart';
+import { RawMarker } from '../index';
+
 import * as ICONS from './icons';
 
 const is_firefox = navigator.userAgent.search('Firefox') > 0;
diff --git a/packages/reports/src/Modules/SmartChart/Components/control-widgets.jsx b/packages/reports/src/Modules/SmartChart/Components/control-widgets.jsx
index 182d8d7384df..c0218d11fb5e 100644
--- a/packages/reports/src/Modules/SmartChart/Components/control-widgets.jsx
+++ b/packages/reports/src/Modules/SmartChart/Components/control-widgets.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { DesktopWrapper } from '@deriv/components';
-import { ChartMode, DrawTools, Share, StudyLegend, Views } from 'Modules/SmartChart';
+import { ChartMode, DrawTools, Share, StudyLegend, Views } from '../index';
 
 const ControlWidgets = ({ updateChartType, updateGranularity }) => (
     <React.Fragment>
diff --git a/packages/reports/src/Modules/SmartChart/Components/toolbar-widgets.jsx b/packages/reports/src/Modules/SmartChart/Components/toolbar-widgets.jsx
index f98fa5684f6d..8b8a1b750423 100644
--- a/packages/reports/src/Modules/SmartChart/Components/toolbar-widgets.jsx
+++ b/packages/reports/src/Modules/SmartChart/Components/toolbar-widgets.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { isDesktop, isMobile } from '@deriv/shared';
-import { ChartMode, DrawTools, Share, StudyLegend, Views, ToolbarWidget } from 'Modules/SmartChart';
+import { ChartMode, DrawTools, Share, StudyLegend, Views, ToolbarWidget } from '../index';
 
 const ToolbarWidgets = ({ position, updateChartType, updateGranularity }) => (
     <ToolbarWidget position={position || isMobile() ? 'bottom' : null}>
diff --git a/packages/reports/src/Stores/Modules/Contract/Helpers/logic.js b/packages/reports/src/Stores/Modules/Contract/Helpers/logic.js
index 4255dc37ec48..16834103170e 100644
--- a/packages/reports/src/Stores/Modules/Contract/Helpers/logic.js
+++ b/packages/reports/src/Stores/Modules/Contract/Helpers/logic.js
@@ -1,6 +1,6 @@
 import moment from 'moment';
 import { isEmptyObject, isUserSold, getLimitOrderAmount } from '@deriv/shared';
-import ServerTime from '_common/base/server_time';
+import ServerTime from '../../../../_common/base/server_time';
 
 export const getChartConfig = contract_info => {
     if (isEmptyObject(contract_info)) return null;
diff --git a/packages/reports/src/Stores/Modules/Portfolio/Helpers/format-response.js b/packages/reports/src/Stores/Modules/Portfolio/Helpers/format-response.js
index 5128b9e61cb0..0a014702e74b 100644
--- a/packages/reports/src/Stores/Modules/Portfolio/Helpers/format-response.js
+++ b/packages/reports/src/Stores/Modules/Portfolio/Helpers/format-response.js
@@ -1,7 +1,7 @@
 import { getUnsupportedContracts } from '../../../../_common/contract';
-import { getSymbolDisplayName } from 'Stores/Modules/Trading/Helpers/active-symbols';
+import { getSymbolDisplayName } from '../../Trading/Helpers/active-symbols';
 
-import { getMarketInformation } from 'Helpers/market-underlying';
+import { getMarketInformation } from '../../../../Helpers/market-underlying';
 
 const isUnSupportedContract = portfolio_pos =>
     !!getUnsupportedContracts()[portfolio_pos.contract_type] || // check unsupported contract type
diff --git a/packages/reports/src/Stores/Modules/SmartChart/Constants/markers.js b/packages/reports/src/Stores/Modules/SmartChart/Constants/markers.js
index 987f95e37c48..a5b4b837e776 100644
--- a/packages/reports/src/Stores/Modules/SmartChart/Constants/markers.js
+++ b/packages/reports/src/Stores/Modules/SmartChart/Constants/markers.js
@@ -1,7 +1,7 @@
 import { localize } from '@deriv/translations';
-import MarkerLine from 'Modules/SmartChart/Components/Markers/marker-line.jsx';
-import MarkerSpotLabel from 'Modules/SmartChart/Components/Markers/marker-spot-label.jsx';
-import MarkerSpot from 'Modules/SmartChart/Components/Markers/marker-spot.jsx';
+import MarkerLine from '../../../../Modules/SmartChart/Components/Markers/marker-line.jsx';
+import MarkerSpotLabel from '../../../../Modules/SmartChart/Components/Markers/marker-spot-label.jsx';
+import MarkerSpot from '../../../../Modules/SmartChart/Components/Markers/marker-spot.jsx';
 
 export const MARKER_TYPES_CONFIG = {
     LINE_END: {
diff --git a/packages/reports/src/Stores/Modules/Statement/Helpers/format-response.js b/packages/reports/src/Stores/Modules/Statement/Helpers/format-response.js
index 7c6704a94eab..5dfb85cb7099 100644
--- a/packages/reports/src/Stores/Modules/Statement/Helpers/format-response.js
+++ b/packages/reports/src/Stores/Modules/Statement/Helpers/format-response.js
@@ -1,7 +1,7 @@
 import { formatMoney, toTitleCase, toMoment } from '@deriv/shared';
 
 import { localize } from '@deriv/translations';
-import { getMarketInformation } from 'Helpers/market-underlying';
+import { getMarketInformation } from '../../../../Helpers/market-underlying';
 
 import { getSymbolDisplayName } from '../../Trading/Helpers/active-symbols';
 
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/Duration/advanced-duration.jsx b/packages/reports/src/Stores/Modules/Trading/Components/Duration/advanced-duration.jsx
new file mode 100644
index 000000000000..7193ec00d66f
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Trading/Components/Duration/advanced-duration.jsx
@@ -0,0 +1,157 @@
+import classNames from 'classnames';
+import { PropTypes as MobxPropTypes } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Dropdown, ButtonToggle, InputField } from '@deriv/components';
+import { toMoment } from '@deriv/shared';
+import RangeSlider from 'App/Components/Form/RangeSlider';
+import { connect } from 'Stores/connect';
+import { hasIntradayDurationUnit } from 'Stores/Modules/Trading/Helpers/duration';
+import TradingDatePicker from '../../DatePicker';
+import TradingTimePicker from '../../TimePicker';
+
+const AdvancedDuration = ({
+    advanced_duration_unit,
+    advanced_expiry_type,
+    duration_units_list,
+    duration_t,
+    contract_expiry_type,
+    changeDurationUnit,
+    current_focus,
+    getDurationFromUnit,
+    expiry_date,
+    expiry_list,
+    expiry_type,
+    number_input_props,
+    onChange,
+    onChangeUiStore,
+    server_time,
+    setCurrentFocus,
+    shared_input_props,
+    start_date,
+    validation_errors,
+}) => {
+    let is_24_hours_contract = false;
+
+    if (expiry_type === 'endtime') {
+        const has_intraday_duration_unit = hasIntradayDurationUnit(duration_units_list);
+        is_24_hours_contract =
+            (!!start_date || toMoment(expiry_date || server_time).isSame(toMoment(server_time), 'day')) &&
+            has_intraday_duration_unit;
+    }
+
+    const endtime_container_class = classNames('endtime-container', {
+        'has-time': is_24_hours_contract,
+    });
+
+    const changeExpiry = ({ target }) => {
+        const { name, value } = target;
+
+        onChange({ target: { name: 'expiry_type', value } });
+        onChangeUiStore({ name, value });
+    };
+
+    return (
+        <>
+            {expiry_list.length > 1 && (
+                <ButtonToggle
+                    id='dt_advanced_duration_toggle'
+                    buttons_arr={expiry_list}
+                    name='advanced_expiry_type'
+                    is_animated={true}
+                    onChange={changeExpiry}
+                    value={advanced_expiry_type}
+                />
+            )}
+            {expiry_type === 'duration' ? (
+                <>
+                    <div className='duration-container'>
+                        {duration_units_list.length >= 1 && (
+                            <Dropdown
+                                classNameDisplay='dc-dropdown__display--duration'
+                                disabled={false}
+                                id='duration'
+                                is_alignment_left
+                                is_nativepicker={false}
+                                list={duration_units_list}
+                                name='advanced_duration_unit'
+                                no_border={true}
+                                onChange={changeDurationUnit}
+                                value={advanced_duration_unit}
+                            />
+                        )}
+                        {advanced_duration_unit === 't' && contract_expiry_type === 'tick' && (
+                            <RangeSlider name='duration' ticks={10} value={duration_t} {...shared_input_props} />
+                        )}
+                        {advanced_duration_unit === 'd' && (
+                            <TradingDatePicker
+                                id='dt_advanced_duration_datepicker'
+                                mode='duration'
+                                name='duration'
+                                is_24_hours_contract={is_24_hours_contract}
+                            />
+                        )}
+                        {advanced_duration_unit !== 't' && advanced_duration_unit !== 'd' && (
+                            <InputField
+                                id='dt_advanced_duration_input'
+                                classNameInput='trade-container__input'
+                                current_focus={current_focus}
+                                error_messages={validation_errors.duration}
+                                label={duration_units_list.length === 1 ? duration_units_list[0].text : null}
+                                name='duration'
+                                setCurrentFocus={setCurrentFocus}
+                                value={getDurationFromUnit(advanced_duration_unit)}
+                                {...number_input_props}
+                                {...shared_input_props}
+                            />
+                        )}
+                    </div>
+                </>
+            ) : (
+                <>
+                    <div className={endtime_container_class}>
+                        <TradingDatePicker
+                            id='dt_advanced_duration_datepicker'
+                            name='expiry_date'
+                            is_24_hours_contract={is_24_hours_contract}
+                            value={expiry_date}
+                        />
+                        {
+                            is_24_hours_contract && <TradingTimePicker />
+                            // validation_errors={validation_errors.end_time} TODO: add validation_errors for end time
+                        }
+                    </div>
+                </>
+            )}
+        </>
+    );
+};
+
+AdvancedDuration.propTypes = {
+    advanced_duration_unit: PropTypes.string,
+    advanced_expiry_type: PropTypes.string,
+    changeDurationUnit: PropTypes.func,
+    contract_expiry_type: PropTypes.string,
+    current_focus: PropTypes.string,
+    duration_t: PropTypes.number,
+    duration_units_list: MobxPropTypes.arrayOrObservableArray,
+    expiry_date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    expiry_list: PropTypes.array,
+    expiry_type: PropTypes.string,
+    getDurationFromUnit: PropTypes.func,
+    number_input_props: PropTypes.object,
+    onChange: PropTypes.func,
+    onChangeUiStore: PropTypes.func,
+    server_time: PropTypes.object,
+    setCurrentFocus: PropTypes.func,
+    shared_input_props: PropTypes.object,
+    start_date: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    validation_errors: PropTypes.object,
+};
+
+export default connect(({ modules, ui }) => ({
+    contract_expiry_type: modules.trade.contract_expiry_type,
+    current_focus: ui.current_focus,
+    setCurrentFocus: ui.setCurrentFocus,
+    validation_errors: modules.trade.validation_errors,
+}))(AdvancedDuration);
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-mobile.jsx b/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-mobile.jsx
new file mode 100644
index 000000000000..586fa476c22b
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-mobile.jsx
@@ -0,0 +1,353 @@
+import React from 'react';
+import { Tabs, TickPicker, Numpad, RelativeDatepicker } from '@deriv/components';
+import { isEmptyObject, addComma } from '@deriv/shared';
+import { Localize, localize } from '@deriv/translations';
+
+import { connect } from 'Stores/connect';
+import { getDurationMinMaxValues } from 'Stores/Modules/Trading/Helpers/duration';
+
+const submit_label = localize('OK');
+
+const updateAmountChanges = (obj, stake_value, payout_value, basis, trade_basis, trade_amount) => {
+    // TODO: Move onChangeMultiple outside of duration and amount
+    //  and unify all trade parameter components to use same onMultipleChange func onSubmit
+    // Checks if Amount tab was changed to stake and stake value was updated
+    if (basis === 'stake' && stake_value !== trade_amount) {
+        obj.basis = 'stake';
+        obj.amount = stake_value;
+        // Checks if Amount tab was changed to payout and payout value was updated
+    } else if (basis === 'payout' && payout_value !== trade_amount) {
+        obj.basis = 'payout';
+        obj.amount = payout_value;
+        // Checks if Amount tab was changed but payout or stake value was not updated
+    } else if (trade_basis !== basis) {
+        obj.basis = basis;
+        obj.amount = trade_amount;
+    }
+};
+
+const Ticks = ({
+    setDurationError,
+    basis_option,
+    toggleModal,
+    onChangeMultiple,
+    duration_min_max,
+    has_amount_error,
+    trade_duration,
+    trade_basis,
+    trade_amount,
+    trade_duration_unit,
+    payout_value,
+    stake_value,
+    selected_duration,
+    setSelectedDuration,
+}) => {
+    React.useEffect(() => {
+        setDurationError(false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const [min_tick, max_tick] = getDurationMinMaxValues(duration_min_max, 'tick', 't');
+
+    const setTickDuration = value => {
+        const { value: duration } = value.target;
+        const on_change_obj = {};
+
+        // check for any amount changes from Amount trade params tab before submitting onChange object
+        if (!has_amount_error)
+            updateAmountChanges(on_change_obj, stake_value, payout_value, basis_option, trade_basis, trade_amount);
+
+        if (trade_duration !== duration || trade_duration_unit !== 't') {
+            on_change_obj.duration_unit = 't';
+            on_change_obj.duration = duration;
+        }
+
+        if (!isEmptyObject(on_change_obj)) onChangeMultiple(on_change_obj);
+        toggleModal();
+    };
+
+    const onTickChange = tick => setSelectedDuration('t', tick);
+    const tick_duration = trade_duration < min_tick && selected_duration < min_tick ? min_tick : selected_duration;
+    return (
+        <div className='trade-params__duration-tickpicker'>
+            <TickPicker
+                default_value={tick_duration}
+                submit_label={submit_label}
+                max_value={max_tick}
+                min_value={min_tick}
+                onSubmit={setTickDuration}
+                onValueChange={onTickChange}
+                singular_label={localize('Tick')}
+                plural_label={localize('Ticks')}
+            />
+        </div>
+    );
+};
+
+const TicksWrapper = connect(({ modules }) => ({
+    duration_min_max: modules.trade.duration_min_max,
+    onChangeMultiple: modules.trade.onChangeMultiple,
+    trade_basis: modules.trade.basis,
+    trade_amount: modules.trade.amount,
+    trade_duration: modules.trade.duration,
+    trade_duration_unit: modules.trade.duration_unit,
+}))(Ticks);
+
+const Numbers = ({
+    addToast,
+    setDurationError,
+    basis_option,
+    toggleModal,
+    onChangeMultiple,
+    duration_min_max,
+    duration_unit_option,
+    has_amount_error,
+    contract_expiry = 'intraday',
+    payout_value,
+    stake_value,
+    trade_amount,
+    trade_basis,
+    trade_duration_unit,
+    trade_duration,
+    selected_duration,
+    setSelectedDuration,
+}) => {
+    const { value: duration_unit } = duration_unit_option;
+    const [min, max] = getDurationMinMaxValues(duration_min_max, contract_expiry, duration_unit);
+
+    const validateDuration = value => {
+        const localized_message = (
+            <Localize
+                i18n_default_text='Should be between {{min}} and {{max}}'
+                values={{
+                    min,
+                    max: addComma(max, 0, false),
+                }}
+            />
+        );
+        if (parseInt(value) < min || parseInt(selected_duration) > max) {
+            addToast({ key: 'duration_error', content: localized_message, type: 'error', timeout: 2000 });
+            setDurationError(true);
+            return 'error';
+        } else if (parseInt(value) > max) {
+            addToast({ key: 'duration_error', content: localized_message, type: 'error', timeout: 2000 });
+            return 'error';
+        } else if (value.toString().length < 1) {
+            addToast({ key: 'duration_error', content: localized_message, type: 'error', timeout: 2000 });
+            setDurationError(true);
+            return false;
+        }
+
+        setDurationError(false);
+        return true;
+    };
+
+    const setDuration = duration => {
+        const on_change_obj = {};
+
+        // check for any amount changes from Amount trade params tab before submitting onChange object
+        if (!has_amount_error)
+            updateAmountChanges(on_change_obj, stake_value, payout_value, basis_option, trade_basis, trade_amount);
+
+        if (trade_duration !== duration || trade_duration_unit !== duration_unit) {
+            on_change_obj.duration_unit = duration_unit;
+            on_change_obj.duration = duration;
+            on_change_obj.expiry_type = 'duration';
+        }
+
+        if (!isEmptyObject(on_change_obj)) onChangeMultiple(on_change_obj);
+        toggleModal();
+    };
+
+    const onNumberChange = num => {
+        setSelectedDuration(duration_unit, num);
+        validateDuration(num);
+    };
+
+    return (
+        <div className='trade-params__amount-keypad'>
+            <Numpad
+                value={selected_duration}
+                onSubmit={setDuration}
+                render={({ value: v, className }) => {
+                    return <div className={className}>{v}</div>;
+                }}
+                pip_size={0}
+                submit_label={submit_label}
+                min={min}
+                max={max}
+                reset_press_interval={350}
+                reset_value=''
+                onValidate={validateDuration}
+                onValueChange={onNumberChange}
+            />
+        </div>
+    );
+};
+
+const NumpadWrapper = connect(({ modules, ui }) => ({
+    duration_min_max: modules.trade.duration_min_max,
+    trade_duration: modules.trade.duration,
+    trade_duration_unit: modules.trade.duration_unit,
+    trade_basis: modules.trade.basis,
+    trade_amount: modules.trade.amount,
+    onChangeMultiple: modules.trade.onChangeMultiple,
+    addToast: ui.addToast,
+}))(Numbers);
+
+const Duration = ({
+    amount_tab_idx,
+    toggleModal,
+    duration_units_list,
+    duration_unit,
+    duration_tab_idx,
+    duration_min_max,
+    has_amount_error,
+    setDurationTabIdx,
+    setDurationError,
+    t_duration,
+    s_duration,
+    m_duration,
+    h_duration,
+    d_duration,
+    setSelectedDuration,
+    trade_basis,
+    stake_value,
+    payout_value,
+}) => {
+    const duration_values = {
+        t_duration,
+        s_duration,
+        m_duration,
+        h_duration,
+        d_duration,
+    };
+    const has_selected_tab_idx = typeof duration_tab_idx !== 'undefined';
+    const active_index = has_selected_tab_idx
+        ? duration_tab_idx
+        : duration_units_list.findIndex(d => d.value === duration_unit);
+    const [min, max] = getDurationMinMaxValues(duration_min_max, 'daily', 'd');
+    const handleRelativeChange = date => {
+        setSelectedDuration('d', date);
+    };
+    const selected_basis_option = () => {
+        if (amount_tab_idx === 0) {
+            return 'stake';
+        } else if (amount_tab_idx === 1) {
+            return 'payout';
+        }
+        return trade_basis;
+    };
+
+    const onTabChange = index => {
+        setDurationTabIdx(index);
+        const { value: unit } = duration_units_list[index];
+        setSelectedDuration(unit, duration_values[`${unit}_duration`]);
+    };
+
+    return (
+        <div>
+            <Tabs active_index={active_index} onTabItemClick={num => onTabChange(num)} single_tab_has_no_label top>
+                {duration_units_list.map(duration_unit_option => {
+                    switch (duration_unit_option.value) {
+                        case 't':
+                            return (
+                                <div label={duration_unit_option.text} key={duration_unit_option.value}>
+                                    <TicksWrapper
+                                        basis_option={selected_basis_option()}
+                                        has_amount_error={has_amount_error}
+                                        toggleModal={toggleModal}
+                                        selected_duration={t_duration}
+                                        setDurationError={setDurationError}
+                                        setSelectedDuration={setSelectedDuration}
+                                        stake_value={stake_value}
+                                        payout_value={payout_value}
+                                    />
+                                </div>
+                            );
+                        case 's':
+                            return (
+                                <div label={duration_unit_option.text} key={duration_unit_option.value}>
+                                    <NumpadWrapper
+                                        basis_option={selected_basis_option()}
+                                        has_amount_error={has_amount_error}
+                                        toggleModal={toggleModal}
+                                        duration_unit_option={duration_unit_option}
+                                        selected_duration={s_duration}
+                                        setDurationError={setDurationError}
+                                        setSelectedDuration={setSelectedDuration}
+                                        stake_value={stake_value}
+                                        payout_value={payout_value}
+                                    />
+                                </div>
+                            );
+                        case 'm':
+                            return (
+                                <div label={duration_unit_option.text} key={duration_unit_option.value}>
+                                    <NumpadWrapper
+                                        basis_option={selected_basis_option()}
+                                        has_amount_error={has_amount_error}
+                                        toggleModal={toggleModal}
+                                        duration_unit_option={duration_unit_option}
+                                        selected_duration={m_duration}
+                                        setDurationError={setDurationError}
+                                        setSelectedDuration={setSelectedDuration}
+                                        stake_value={stake_value}
+                                        payout_value={payout_value}
+                                    />
+                                </div>
+                            );
+                        case 'h':
+                            return (
+                                <div label={duration_unit_option.text} key={duration_unit_option.value}>
+                                    <NumpadWrapper
+                                        basis_option={selected_basis_option()}
+                                        has_amount_error={has_amount_error}
+                                        toggleModal={toggleModal}
+                                        duration_unit_option={duration_unit_option}
+                                        selected_duration={h_duration}
+                                        setDurationError={setDurationError}
+                                        setSelectedDuration={setSelectedDuration}
+                                        stake_value={stake_value}
+                                        payout_value={payout_value}
+                                    />
+                                </div>
+                            );
+                        case 'd':
+                            return (
+                                <div label={duration_unit_option.text} key={duration_unit_option.value}>
+                                    <NumpadWrapper
+                                        basis_option={selected_basis_option()}
+                                        has_amount_error={has_amount_error}
+                                        toggleModal={toggleModal}
+                                        duration_unit_option={duration_unit_option}
+                                        contract_expiry='daily'
+                                        selected_duration={d_duration}
+                                        setDurationError={setDurationError}
+                                        setSelectedDuration={setSelectedDuration}
+                                        stake_value={stake_value}
+                                        payout_value={payout_value}
+                                    />
+                                    <RelativeDatepicker
+                                        onChange={handleRelativeChange}
+                                        min={min}
+                                        max={max}
+                                        title={localize('Pick an end date')}
+                                    />
+                                </div>
+                            );
+                        default:
+                            return null;
+                    }
+                })}
+            </Tabs>
+        </div>
+    );
+};
+
+export default connect(({ modules }) => ({
+    duration_units_list: modules.trade.duration_units_list,
+    duration_min_max: modules.trade.duration_min_max,
+    duration_unit: modules.trade.duration_unit,
+    trade_basis: modules.trade.basis,
+}))(Duration);
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-toggle.jsx b/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-toggle.jsx
new file mode 100644
index 000000000000..427f59362c9d
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-toggle.jsx
@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Icon } from '@deriv/components';
+import { localize } from '@deriv/translations';
+
+const DurationToggle = ({ name, onChange, value }) => {
+    const toggle = () => {
+        onChange({ target: { value: !value, name } });
+    };
+    const icon_className = classNames('advanced-simple-toggle__icon', 'select-arrow', {
+        'advanced-simple-toggle__icon--active': value,
+    });
+    return (
+        <>
+            <button
+                id={value ? 'dt_advanced_toggle' : 'dt_simple_toggle'}
+                className='advanced-simple-toggle'
+                onClick={toggle}
+                aria-label={localize('Toggle between advanced and simple duration settings')}
+            >
+                <Icon
+                    icon='IcChevronDown'
+                    className={icon_className}
+                    classNamePath={'advanced-simple-toggle__icon-path'}
+                />
+            </button>
+        </>
+    );
+};
+
+DurationToggle.propTypes = {
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    value: PropTypes.bool,
+};
+
+export default DurationToggle;
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-wrapper.jsx b/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-wrapper.jsx
new file mode 100644
index 000000000000..a32555503d9e
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-wrapper.jsx
@@ -0,0 +1,211 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { PropTypes as MobxPropTypes } from 'mobx-react';
+import { connect } from 'Stores/connect';
+import { getDurationMinMaxValues } from 'Stores/Modules/Trading/Helpers/duration';
+import Duration from './duration.jsx';
+
+const DurationWrapper = props => {
+    const {
+        advanced_duration_unit,
+        advanced_expiry_type,
+        duration,
+        duration_unit,
+        expiry_type,
+        getDurationFromUnit,
+        is_advanced_duration,
+        onChange,
+        onChangeUiStore,
+        simple_duration_unit,
+        contract_expiry_type,
+        duration_min_max,
+        duration_units_list,
+        onChangeMultiple,
+    } = props;
+
+    const hasDurationUnit = (duration_type, is_advanced) => {
+        let duration_list = [...duration_units_list];
+
+        if (duration_list.length > 1 && !is_advanced) {
+            duration_list = duration_list.filter(du => du.value === 'm' || du.value === 't');
+        }
+
+        return duration_list.some(du => du.value === duration_type);
+    };
+
+    const setDurationUnit = () => {
+        if (duration_units_list?.length > 0) {
+            const new_duration_unit = duration_units_list[0].value;
+            const new_duration_value = getDurationFromUnit(new_duration_unit);
+
+            onChangeUiStore({
+                name: `${is_advanced_duration ? 'advanced' : 'simple'}_duration_unit`,
+                value: new_duration_unit,
+            });
+            onChangeMultiple({
+                duration_unit: new_duration_unit,
+                duration: +new_duration_value,
+            });
+        }
+    };
+
+    const handleEndTime = () => {
+        const symbol_has_endtime = duration_units_list.length > 1 || is_advanced_duration;
+
+        if (symbol_has_endtime) {
+            // simple duration does not have endtime
+            if (!is_advanced_duration) onChangeUiStore({ name: 'is_advanced_duration', value: true });
+
+            onChangeUiStore({ name: 'advanced_expiry_type', value: 'endtime' });
+        } else {
+            // If query string contains endtime but contract type does not e.g. digits (only ticks contracts)
+            onChange({ target: { name: 'expiry_type', value: 'duration' } });
+        }
+    };
+
+    const assertDurationIsWithinBoundary = React.useCallback(
+        current_duration => {
+            const [min_value, max_value] = getDurationMinMaxValues(
+                duration_min_max,
+                contract_expiry_type,
+                duration_unit
+            );
+            if (contract_expiry_type === 'tick' && current_duration < min_value) {
+                onChangeUiStore({ name: `duration_${duration_unit}`, value: min_value });
+                onChange({ target: { name: 'duration', value: min_value } });
+            }
+
+            if (!(current_duration < min_value) && current_duration > max_value && duration_unit !== 'd') {
+                onChangeUiStore({ name: `duration_${duration_unit}`, value: max_value });
+                onChange({ target: { name: 'duration', value: max_value } });
+            }
+        },
+        [contract_expiry_type, duration_unit, duration_min_max, onChange, onChangeUiStore]
+    );
+
+    React.useEffect(() => {
+        if (duration_unit === 'd') {
+            onChangeUiStore({
+                name: 'is_advanced_duration',
+                value: true,
+            });
+        }
+    }, [duration_unit, onChangeUiStore]);
+
+    React.useEffect(() => {
+        const current_unit = is_advanced_duration ? advanced_duration_unit : simple_duration_unit;
+        const current_duration = getDurationFromUnit(current_unit);
+
+        if (duration_unit !== current_unit) {
+            onChangeUiStore({
+                name: `${is_advanced_duration ? 'advanced' : 'simple'}_duration_unit`,
+                value: duration_unit,
+            });
+        }
+
+        if (+duration !== +current_duration) {
+            onChangeUiStore({ name: `duration_${duration_unit}`, value: duration });
+        }
+
+        if (expiry_type === 'endtime') handleEndTime();
+
+        assertDurationIsWithinBoundary(current_duration);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    React.useEffect(() => {
+        if (is_advanced_duration && expiry_type !== advanced_expiry_type) {
+            onChange({ target: { name: 'expiry_type', value: advanced_expiry_type } });
+        }
+    }, [is_advanced_duration, expiry_type, advanced_expiry_type, onChange]);
+
+    // intercept changes to contract duration and check that trade_store and ui_store are aligned.
+    React.useEffect(() => {
+        const current_duration = getDurationFromUnit(duration_unit);
+        const simple_is_not_type_duration = !is_advanced_duration && expiry_type !== 'duration';
+
+        // simple only has expiry type duration
+        if (simple_is_not_type_duration) {
+            onChange({ target: { name: 'expiry_type', value: 'duration' } });
+        }
+
+        if (duration !== current_duration) {
+            onChangeUiStore({ name: `duration_${duration_unit}`, value: duration });
+        }
+
+        assertDurationIsWithinBoundary(current_duration);
+    }, [
+        duration_unit,
+        is_advanced_duration,
+        expiry_type,
+        duration,
+        assertDurationIsWithinBoundary,
+        onChange,
+        onChangeUiStore,
+        getDurationFromUnit,
+    ]);
+
+    const current_duration_unit = is_advanced_duration ? advanced_duration_unit : simple_duration_unit;
+    const has_missing_duration_unit = !hasDurationUnit(current_duration_unit, is_advanced_duration);
+    const simple_is_missing_duration_unit =
+        !is_advanced_duration && simple_duration_unit === 'd' && duration_units_list.length === 4;
+    const [min_value, max_value] = getDurationMinMaxValues(duration_min_max, contract_expiry_type, duration_unit);
+
+    if (has_missing_duration_unit || simple_is_missing_duration_unit) {
+        setDurationUnit();
+    }
+
+    return <Duration hasDurationUnit={hasDurationUnit} max_value={max_value} min_value={min_value} {...props} />;
+};
+
+DurationWrapper.propTypes = {
+    advanced_duration_unit: PropTypes.string,
+    advanced_expiry_type: PropTypes.string,
+    contract_expiry_type: PropTypes.string,
+    duration: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    duration_d: PropTypes.number,
+    duration_h: PropTypes.number,
+    duration_m: PropTypes.number,
+    duration_min_max: PropTypes.object,
+    duration_s: PropTypes.number,
+    duration_t: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    duration_unit: PropTypes.string,
+    duration_units_list: MobxPropTypes.arrayOrObservableArray,
+    expiry_date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    expiry_time: PropTypes.string,
+    expiry_type: PropTypes.string,
+    getDurationFromUnit: PropTypes.func,
+    is_advanced_duration: PropTypes.bool,
+    is_minimized: PropTypes.bool,
+    market_open_times: PropTypes.array,
+    onChange: PropTypes.func,
+    onChangeMultiple: PropTypes.func,
+    onChangeUiStore: PropTypes.func,
+    sessions: MobxPropTypes.arrayOrObservableArray,
+    simple_duration_unit: PropTypes.string,
+    start_date: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    start_time: PropTypes.string,
+    symbol: PropTypes.string,
+};
+
+export default connect(({ modules, ui }) => ({
+    advanced_duration_unit: ui.advanced_duration_unit,
+    advanced_expiry_type: ui.advanced_expiry_type,
+    contract_expiry_type: modules.trade.contract_expiry_type,
+    duration: modules.trade.duration,
+    duration_unit: modules.trade.duration_unit,
+    duration_units_list: modules.trade.duration_units_list,
+    duration_min_max: modules.trade.duration_min_max,
+    duration_t: ui.duration_t,
+    expiry_date: modules.trade.expiry_date,
+    expiry_time: modules.trade.expiry_time,
+    expiry_type: modules.trade.expiry_type,
+    getDurationFromUnit: ui.getDurationFromUnit,
+    is_advanced_duration: ui.is_advanced_duration,
+    onChange: modules.trade.onChange,
+    onChangeUiStore: ui.onChangeUiStore,
+    onChangeMultiple: modules.trade.onChangeMultiple,
+    simple_duration_unit: ui.simple_duration_unit,
+    start_date: modules.trade.start_date,
+    market_open_times: modules.trade.market_open_times,
+}))(DurationWrapper);
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration.jsx b/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration.jsx
new file mode 100644
index 000000000000..7f925175c20d
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration.jsx
@@ -0,0 +1,224 @@
+import classNames from 'classnames';
+import { PropTypes as MobxPropTypes } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { localize } from '@deriv/translations';
+import Fieldset from 'App/Components/Form/fieldset.jsx';
+import RangeSlider from 'App/Components/Form/RangeSlider';
+import { Dropdown } from '@deriv/components';
+import { toMoment } from '@deriv/shared';
+import DurationToggle from './duration-toggle.jsx';
+import AdvancedDuration from './advanced-duration.jsx';
+import SimpleDuration from './simple-duration.jsx';
+
+const Duration = ({
+    advanced_duration_unit,
+    advanced_expiry_type,
+    duration,
+    duration_unit,
+    duration_units_list,
+    duration_t,
+    expiry_date,
+    expiry_time,
+    expiry_type,
+    getDurationFromUnit,
+    hasDurationUnit,
+    is_advanced_duration,
+    is_minimized,
+    min_value,
+    max_value,
+    onChange,
+    onChangeUiStore,
+    onChangeMultiple,
+    simple_duration_unit,
+    server_time,
+    start_date,
+    market_open_times,
+}) => {
+    const expiry_list = [{ text: localize('Duration'), value: 'duration' }];
+
+    const has_end_time = expiry_list.find(expiry => expiry.value === 'endtime');
+    if (duration_units_list.length === 1 && duration_unit === 't') {
+        if (has_end_time) {
+            expiry_list.pop(); // remove end time for contracts with only tick duration
+        }
+    } else if (!has_end_time) {
+        expiry_list.push({ text: localize('End time'), value: 'endtime' });
+    }
+
+    if (is_minimized) {
+        const moment_expiry = toMoment(expiry_date);
+        const duration_unit_text = (duration_units_list.find(o => o.value === duration_unit) || {}).text;
+        return (
+            <div className='fieldset-minimized fieldset-minimized__duration'>
+                {expiry_type === 'duration'
+                    ? `${duration} ${duration_unit_text}`
+                    : `${moment_expiry.format('ddd - DD MMM, YYYY')}\n${expiry_time}`}
+            </div>
+        );
+    }
+
+    const changeDurationUnit = ({ target }) => {
+        const { name, value } = target;
+        const duration_value = getDurationFromUnit(value);
+
+        onChangeUiStore({ name, value });
+        onChangeMultiple({
+            duration_unit: value,
+            duration: duration_value,
+        });
+    };
+
+    const changeDurationValue = ({ target }) => {
+        const { name, value } = target;
+        const duration_name = `duration_${is_advanced_duration ? advanced_duration_unit : simple_duration_unit}`;
+
+        // e.target.value returns string, we need to convert them to number
+        onChangeUiStore({ name: duration_name, value: +value });
+        onChange({ target: { name, value: +value } });
+    };
+
+    const onToggleDurationType = ({ target }) => {
+        const { name, value: is_advanced } = target;
+        onChangeUiStore({ name, value: is_advanced });
+
+        // replace selected duration unit and duration if the contract doesn't have that duration unit
+        let current_duration_unit = is_advanced ? advanced_duration_unit : simple_duration_unit;
+        const duration_value = getDurationFromUnit(current_duration_unit);
+        if (!hasDurationUnit(current_duration_unit, is_advanced)) {
+            current_duration_unit = duration_units_list[0].value;
+            onChangeUiStore({
+                name: `${is_advanced ? 'advanced' : 'simple'}_duration_unit`,
+                value: current_duration_unit,
+            });
+        }
+
+        const new_trade_store_values = {};
+
+        // simple only has expiry type of duration
+        if (!is_advanced && expiry_type !== 'duration') {
+            new_trade_store_values.expiry_type = 'duration';
+        }
+        if (is_advanced && expiry_type !== advanced_expiry_type) {
+            new_trade_store_values.expiry_type = advanced_expiry_type;
+        }
+
+        const has_same_duration = current_duration_unit === duration_unit && duration_value === duration;
+        if (!has_same_duration) {
+            new_trade_store_values.duration_unit = current_duration_unit;
+            new_trade_store_values.duration = duration_value;
+        }
+
+        const should_update_trade_store = Object.keys(new_trade_store_values).length;
+        if (should_update_trade_store) {
+            onChangeMultiple({ ...new_trade_store_values });
+        }
+    };
+
+    const props = {
+        shared_input: {
+            is_hj_whitelisted: true,
+            onChange: changeDurationValue,
+            max_value,
+            min_value,
+        },
+        number_input: {
+            type: 'number',
+            is_incrementable: true,
+        },
+    };
+
+    // e.g. digit contracts only has range slider - does not have toggle between advanced / simple
+    const has_toggle = expiry_list.length > 1 || duration_units_list.length > 1;
+
+    return (
+        <Fieldset
+            className={classNames('trade-container__fieldset', {
+                'trade-container__fieldset--advanced': is_advanced_duration,
+            })}
+        >
+            {duration_units_list.length === 1 && !is_advanced_duration && (
+                <Dropdown
+                    classNameDisplay='dc-dropdown__display--duration'
+                    disabled={false}
+                    id='duration'
+                    is_alignment_left
+                    is_nativepicker={false}
+                    list={duration_units_list}
+                    name='advanced_duration_unit'
+                    no_border={true}
+                    onChange={changeDurationUnit}
+                    value={advanced_duration_unit}
+                />
+            )}
+            {!has_toggle && <RangeSlider name='duration' value={duration_t} {...props.shared_input} />}
+            {has_toggle && (
+                <>
+                    {is_advanced_duration && (
+                        <AdvancedDuration
+                            advanced_expiry_type={advanced_expiry_type}
+                            advanced_duration_unit={advanced_duration_unit}
+                            changeDurationUnit={changeDurationUnit}
+                            duration_t={duration_t}
+                            duration_units_list={duration_units_list}
+                            expiry_date={expiry_date}
+                            expiry_list={expiry_list}
+                            expiry_type={expiry_type}
+                            getDurationFromUnit={getDurationFromUnit}
+                            market_open_times={market_open_times}
+                            number_input_props={props.number_input}
+                            onChange={onChange}
+                            onChangeUiStore={onChangeUiStore}
+                            server_time={server_time}
+                            shared_input_props={props.shared_input}
+                            start_date={start_date}
+                        />
+                    )}
+                    {!is_advanced_duration && (
+                        <SimpleDuration
+                            getDurationFromUnit={getDurationFromUnit}
+                            changeDurationUnit={changeDurationUnit}
+                            duration_t={duration_t}
+                            duration_units_list={duration_units_list}
+                            number_input_props={props.number_input}
+                            shared_input_props={props.shared_input}
+                            simple_duration_unit={simple_duration_unit}
+                        />
+                    )}
+                    <DurationToggle
+                        name={'is_advanced_duration'}
+                        onChange={onToggleDurationType}
+                        value={is_advanced_duration}
+                    />
+                </>
+            )}
+        </Fieldset>
+    );
+};
+
+Duration.propTypes = {
+    advanced_duration_unit: PropTypes.string,
+    advanced_expiry_type: PropTypes.string,
+    duration: PropTypes.number,
+    duration_t: PropTypes.number,
+    duration_unit: PropTypes.string,
+    duration_units_list: MobxPropTypes.arrayOrObservableArray,
+    expiry_date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    expiry_time: PropTypes.string,
+    expiry_type: PropTypes.string,
+    getDurationFromUnit: PropTypes.func,
+    hasDurationUnit: PropTypes.func,
+    is_advanced_duration: PropTypes.bool,
+    is_minimized: PropTypes.bool,
+    market_open_times: PropTypes.array,
+    max_value: PropTypes.number,
+    min_value: PropTypes.number,
+    onChange: PropTypes.func,
+    onChangeUiStore: PropTypes.func,
+    server_time: PropTypes.object,
+    simple_duration_unit: PropTypes.string,
+    start_date: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    validation_errors: PropTypes.object,
+};
+
+export default Duration;
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/Duration/index.js b/packages/reports/src/Stores/Modules/Trading/Components/Duration/index.js
new file mode 100644
index 000000000000..16229437c883
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Trading/Components/Duration/index.js
@@ -0,0 +1 @@
+export default from './duration-wrapper.jsx';
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/Duration/simple-duration.jsx b/packages/reports/src/Stores/Modules/Trading/Components/Duration/simple-duration.jsx
new file mode 100644
index 000000000000..4c1827ecf0ad
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Trading/Components/Duration/simple-duration.jsx
@@ -0,0 +1,86 @@
+import { PropTypes as MobxPropTypes } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ButtonToggle, InputField } from '@deriv/components';
+import RangeSlider from 'App/Components/Form/RangeSlider';
+import { connect } from 'Stores/connect';
+import TradingDatePicker from '../../DatePicker';
+
+const SimpleDuration = ({
+    contract_expiry_type,
+    changeDurationUnit,
+    current_focus,
+    duration_t,
+    duration_units_list,
+    getDurationFromUnit,
+    number_input_props,
+    shared_input_props,
+    simple_duration_unit,
+    validation_errors,
+    setCurrentFocus,
+}) => {
+    const filterMinutesAndTicks = arr => {
+        const filtered_arr = arr.filter(du => du.value === 't' || du.value === 'm');
+        if (filtered_arr.length <= 1) return [];
+
+        return filtered_arr;
+    };
+    const has_label = !duration_units_list.some(du => du.value === 't');
+
+    return (
+        <>
+            {duration_units_list.length > 1 && (
+                <ButtonToggle
+                    id='dt_simple_duration_toggle'
+                    buttons_arr={filterMinutesAndTicks(duration_units_list)}
+                    is_animated={true}
+                    name='simple_duration_unit'
+                    onChange={changeDurationUnit}
+                    value={simple_duration_unit}
+                />
+            )}
+            {simple_duration_unit === 't' && contract_expiry_type === 'tick' && (
+                <RangeSlider name='duration' value={duration_t} ticks={10} {...shared_input_props} />
+            )}
+            {simple_duration_unit === 'd' && (
+                <TradingDatePicker id='dt_simple_duration_datepicker' mode='duration' name='duration' />
+            )}
+            {simple_duration_unit !== 't' && simple_duration_unit !== 'd' && (
+                <InputField
+                    id='dt_simple_duration_input'
+                    classNameInput='trade-container__input'
+                    current_focus={current_focus}
+                    error_messages={validation_errors.duration}
+                    name='duration'
+                    label={has_label ? duration_units_list[0]?.text : null}
+                    setCurrentFocus={setCurrentFocus}
+                    value={getDurationFromUnit(simple_duration_unit)}
+                    {...number_input_props}
+                    {...shared_input_props}
+                />
+            )}
+        </>
+    );
+};
+
+SimpleDuration.propTypes = {
+    changeDurationUnit: PropTypes.func,
+    contract_expiry_type: PropTypes.string,
+    current_focus: PropTypes.string,
+    duration_t: PropTypes.number,
+    duration_units_list: MobxPropTypes.arrayOrObservableArray,
+    getDurationFromUnit: PropTypes.func,
+    number_input_props: PropTypes.object,
+    setCurrentFocus: PropTypes.func,
+    shared_input_props: PropTypes.object,
+    simple_duration_unit: PropTypes.string,
+    validation_errors: PropTypes.object,
+};
+
+export default connect(({ modules, ui }) => ({
+    contract_expiry_type: modules.trade.contract_expiry_type,
+    current_focus: ui.current_focus,
+    setCurrentFocus: ui.setCurrentFocus,
+    simple_duration_unit: ui.simple_duration_unit,
+    validation_errors: modules.trade.validation_errors,
+}))(SimpleDuration);
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/amount.jsx b/packages/reports/src/Stores/Modules/Trading/Components/amount.jsx
new file mode 100644
index 000000000000..aaa1bcd25844
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Trading/Components/amount.jsx
@@ -0,0 +1,220 @@
+import classNames from 'classnames';
+import { PropTypes as MobxPropTypes } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ButtonToggle, Dropdown, InputField } from '@deriv/components';
+import { AMOUNT_MAX_LENGTH, getDecimalPlaces, addComma } from '@deriv/shared';
+import Fieldset from 'App/Components/Form/fieldset.jsx';
+import { connect } from 'Stores/connect';
+import { Localize, localize } from '@deriv/translations';
+import AllowEquals from './allow-equals.jsx';
+import MultipliersInfo from './Multiplier/info.jsx';
+import Multiplier from './Multiplier/multiplier.jsx';
+
+const Input = ({
+    amount,
+    currency,
+    current_focus,
+    error_messages,
+    is_nativepicker,
+    is_single_currency,
+    onChange,
+    setCurrentFocus,
+}) => (
+    <InputField
+        className='trade-container__amount'
+        classNameInlinePrefix='trade-container__currency'
+        classNameInput='trade-container__input'
+        currency={currency}
+        current_focus={current_focus}
+        error_messages={error_messages}
+        fractional_digits={getDecimalPlaces(currency)}
+        id='dt_amount_input'
+        inline_prefix={is_single_currency ? currency : null}
+        is_autocomplete_disabled
+        is_float
+        is_hj_whitelisted
+        is_incrementable
+        is_nativepicker={is_nativepicker}
+        is_negative_disabled
+        max_length={AMOUNT_MAX_LENGTH}
+        name='amount'
+        onChange={onChange}
+        type='tel'
+        value={amount}
+        ariaLabel={localize('Amount')}
+        setCurrentFocus={setCurrentFocus}
+    />
+);
+
+const Amount = ({
+    amount,
+    basis,
+    basis_list,
+    contract_start_type,
+    contract_type,
+    contract_types_list,
+    currencies_list,
+    currency,
+    current_focus,
+    duration_unit,
+    expiry_type,
+    is_equal,
+    is_minimized,
+    is_multiplier,
+    is_nativepicker,
+    is_single_currency,
+    has_equals_only,
+    onChange,
+    setCurrentFocus,
+    validation_errors,
+}) => {
+    if (is_minimized) {
+        return (
+            <div className='fieldset-minimized fieldset-minimized__amount'>
+                <span className='fieldset-minimized__basis'>
+                    {(basis_list.find(o => o.value === basis) || {}).text}
+                </span>
+                &nbsp;
+                <i>
+                    <span
+                        className={classNames('fieldset-minimized__currency', 'symbols', {
+                            [`symbols--${(currency || '').toLowerCase()}`]: currency,
+                        })}
+                    />
+                </i>
+                {addComma(amount, 2)}
+            </div>
+        );
+    }
+
+    const error_messages = validation_errors.amount;
+
+    const getBasisList = () => basis_list.map(item => ({ text: item.text, value: item.value }));
+
+    return (
+        <Fieldset
+            className='trade-container__fieldset center-text'
+            header={is_multiplier ? localize('Stake') : undefined}
+            header_tooltip={
+                is_multiplier ? (
+                    <Localize i18n_default_text='Your gross profit is the percentage change in market price times your stake and the multiplier chosen here.' />
+                ) : undefined
+            }
+        >
+            {basis_list.length > 1 && (
+                <ButtonToggle
+                    id='dt_amount_toggle'
+                    buttons_arr={getBasisList()}
+                    className='dropdown--no-margin'
+                    is_animated
+                    name='basis'
+                    onChange={onChange}
+                    value={basis}
+                />
+            )}
+            {!is_single_currency ? (
+                <div className='trade-container__currency-options'>
+                    <Input
+                        amount={amount}
+                        currency={currency}
+                        current_focus={current_focus}
+                        error_messages={error_messages}
+                        is_single_currency={is_single_currency}
+                        is_nativepicker={is_nativepicker}
+                        onChange={onChange}
+                        setCurrentFocus={setCurrentFocus}
+                    />
+                    <Dropdown
+                        id='amount'
+                        className={classNames({ 'dc-dropdown-container__currency': !is_single_currency })}
+                        is_alignment_left
+                        is_nativepicker={false}
+                        list={currencies_list}
+                        name='currency'
+                        initial_offset={256}
+                        no_border={true}
+                        value={currency}
+                        onChange={onChange}
+                    />
+                </div>
+            ) : (
+                <Input
+                    amount={amount}
+                    currency={currency}
+                    current_focus={current_focus}
+                    error_messages={error_messages}
+                    is_single_currency={is_single_currency}
+                    is_nativepicker={is_nativepicker}
+                    onChange={onChange}
+                    setCurrentFocus={setCurrentFocus}
+                />
+            )}
+            <AllowEquals
+                contract_start_type={contract_start_type}
+                contract_type={contract_type}
+                contract_types_list={contract_types_list}
+                duration_unit={duration_unit}
+                expiry_type={expiry_type}
+                onChange={onChange}
+                value={parseInt(is_equal)}
+                has_equals_only={has_equals_only}
+            />
+            {is_multiplier && (
+                <React.Fragment>
+                    <Multiplier />
+                    <MultipliersInfo
+                        className='trade-container__multipliers-trade-info'
+                        should_show_tooltip
+                        is_tooltip_relative
+                    />
+                </React.Fragment>
+            )}
+        </Fieldset>
+    );
+};
+
+Amount.propTypes = {
+    amount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    basis: PropTypes.string,
+    basis_list: MobxPropTypes.arrayOrObservableArray,
+    contract_start_type: PropTypes.string,
+    contract_type: PropTypes.string,
+    contract_types_list: MobxPropTypes.observableObject,
+    currencies_list: MobxPropTypes.observableObject,
+    currency: PropTypes.string,
+    current_focus: PropTypes.string,
+    duration_unit: PropTypes.string,
+    expiry_type: PropTypes.string,
+    is_equal: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    is_minimized: PropTypes.bool,
+    is_multiplier: PropTypes.bool,
+    is_nativepicker: PropTypes.bool,
+    is_single_currency: PropTypes.bool,
+    has_equals_only: PropTypes.bool,
+    setCurrentFocus: PropTypes.func,
+    onChange: PropTypes.func,
+    validation_errors: PropTypes.object,
+};
+
+export default connect(({ modules, client, ui }) => ({
+    amount: modules.trade.amount,
+    basis: modules.trade.basis,
+    basis_list: modules.trade.basis_list,
+    contract_start_type: modules.trade.contract_start_type,
+    contract_type: modules.trade.contract_type,
+    contract_types_list: modules.trade.contract_types_list,
+    currencies_list: client.currencies_list,
+    currency: modules.trade.currency,
+    current_focus: ui.current_focus,
+    duration_unit: modules.trade.duration_unit,
+    expiry_type: modules.trade.expiry_type,
+    is_equal: modules.trade.is_equal,
+    is_single_currency: client.is_single_currency,
+    is_multiplier: modules.trade.is_multiplier,
+    has_equals_only: modules.trade.has_equals_only,
+    stop_out: modules.trade.stop_out,
+    onChange: modules.trade.onChange,
+    setCurrentFocus: ui.setCurrentFocus,
+    validation_errors: modules.trade.validation_errors,
+}))(Amount);
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/barrier.jsx b/packages/reports/src/Stores/Modules/Trading/Components/barrier.jsx
new file mode 100644
index 000000000000..686005c3af05
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Trading/Components/barrier.jsx
@@ -0,0 +1,194 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { DesktopWrapper, Icon, InputField, MobileWrapper } from '@deriv/components';
+import Fieldset from 'App/Components/Form/fieldset.jsx';
+import { connect } from 'Stores/connect';
+import { localize } from '@deriv/translations';
+
+const Barrier = ({
+    barrier_1,
+    barrier_2,
+    barrier_count,
+    barrier_pipsize,
+    current_focus,
+    duration_unit,
+    is_minimized,
+    is_absolute_only,
+    onChange,
+    setCurrentFocus,
+    validation_errors,
+}) => {
+    const barrier_title = barrier_count === 1 ? localize('Barrier') : localize('Barriers');
+
+    if (is_minimized) {
+        return barrier_count !== 2 ? (
+            <div className='fieldset-minimized fieldset-minimized__barrier1'>{barrier_1}</div>
+        ) : (
+            <React.Fragment>
+                <div className='fieldset-minimized fieldset-minimized__barrier1'>{barrier_1}</div>
+                <div className='fieldset-minimized fieldset-minimized__barrier2'>{barrier_2}</div>
+            </React.Fragment>
+        );
+    }
+
+    const input_class = barrier_count === 2 ? 'multiple' : 'single';
+    const is_day_duration = duration_unit === 'd';
+    // TODO: Some contracts yet to be implemented in app.deriv.com allow only absolute barrier, hence the prop
+    const is_absolute_barrier = is_day_duration || is_absolute_only;
+
+    const format = value => {
+        const float_value = parseFloat(value);
+        let final_value;
+        if (Math.sign(float_value) === -1) {
+            final_value = float_value.toFixed(barrier_pipsize).toString();
+        } else {
+            final_value = `+${float_value.toFixed(barrier_pipsize)}`;
+        }
+        return final_value;
+    };
+
+    return (
+        <React.Fragment>
+            <DesktopWrapper>
+                <Fieldset
+                    className='trade-container__fieldset trade-container__barriers'
+                    header={barrier_title}
+                    is_center
+                >
+                    <div>
+                        <InputField
+                            id='dt_barrier_1_input'
+                            type='number'
+                            name='barrier_1'
+                            value={barrier_1}
+                            className={`trade-container__barriers-${input_class}`}
+                            classNameInput={classNames(
+                                'trade-container__input',
+                                'trade-container__barriers-input',
+                                `trade-container__barriers-${input_class}-input`
+                            )}
+                            current_focus={current_focus}
+                            onChange={onChange}
+                            error_messages={validation_errors.barrier_1 || []}
+                            is_float
+                            is_signed
+                            setCurrentFocus={setCurrentFocus}
+                        />
+
+                        {barrier_count === 2 && (
+                            <React.Fragment>
+                                <InputField
+                                    id='dt_barrier_2_input'
+                                    type='number'
+                                    name='barrier_2'
+                                    value={barrier_2}
+                                    className='multiple'
+                                    classNameInput='trade-container__input'
+                                    current_focus={current_focus}
+                                    onChange={onChange}
+                                    error_messages={validation_errors.barrier_2}
+                                    is_float
+                                    is_signed
+                                    setCurrentFocus={setCurrentFocus}
+                                />
+                                <Icon icon='IcArrowUp' className='trade-container__barriers--up' />
+                                <Icon icon='IcArrowDown' className='trade-container__barriers--down' />
+                            </React.Fragment>
+                        )}
+                    </div>
+                </Fieldset>
+            </DesktopWrapper>
+            <MobileWrapper>
+                <div className='barrier__widget'>
+                    <Fieldset className='barrier__fields'>
+                        <InputField
+                            id='dt_barrier_1_input'
+                            type='number'
+                            name='barrier_1'
+                            value={barrier_1}
+                            is_incrementable={!is_absolute_barrier}
+                            is_incrementable_on_long_press={!is_absolute_barrier}
+                            is_negative_disabled={is_absolute_barrier}
+                            className={`barrier__fields-${input_class}`}
+                            classNameInput={classNames(
+                                'barrier__fields-input',
+                                'barrier__fields-barriers-input',
+                                `barrier__fields-barriers-${input_class}-input`,
+                                {
+                                    'barrier__fields-input--is-offset': !is_absolute_barrier,
+                                }
+                            )}
+                            current_focus={current_focus}
+                            format={format}
+                            onChange={onChange}
+                            is_float
+                            is_signed
+                            setCurrentFocus={setCurrentFocus}
+                        />
+                    </Fieldset>
+                    <h2 className='barrier__widget-title'>
+                        {barrier_count === 2 ? localize('Barrier 1') : localize('Barrier')}
+                    </h2>
+                </div>
+                {barrier_count === 2 && (
+                    <div className='barrier__widget'>
+                        <Fieldset className='barrier__fields'>
+                            <InputField
+                                id='dt_barrier_2_input'
+                                type='number'
+                                name='barrier_2'
+                                value={barrier_2}
+                                is_incrementable={!is_absolute_barrier}
+                                is_incrementable_on_long_press={!is_absolute_barrier}
+                                is_negative_disabled={is_absolute_barrier}
+                                className={`barrier__fields-${input_class}`}
+                                classNameInput={classNames(
+                                    'barrier__fields-input',
+                                    'barrier__fields-barriers-input',
+                                    `barrier__fields-barriers-${input_class}-input`,
+                                    {
+                                        'barrier__fields-input--is-offset': !is_absolute_barrier,
+                                    }
+                                )}
+                                current_focus={current_focus}
+                                format={format}
+                                onChange={onChange}
+                                is_float
+                                is_signed
+                                setCurrentFocus={setCurrentFocus}
+                            />
+                        </Fieldset>
+                        <h2 className='barrier__widget-title'>{localize('Barrier 2')}</h2>
+                    </div>
+                )}
+            </MobileWrapper>
+        </React.Fragment>
+    );
+};
+
+Barrier.propTypes = {
+    barrier_1: PropTypes.string,
+    barrier_2: PropTypes.string,
+    barrier_count: PropTypes.number,
+    barrier_pipsize: PropTypes.number,
+    current_focus: PropTypes.string,
+    duration_unit: PropTypes.string,
+    is_absolute_only: PropTypes.bool,
+    is_minimized: PropTypes.bool,
+    onChange: PropTypes.func,
+    setCurrentFocus: PropTypes.func,
+    validation_errors: PropTypes.object,
+};
+
+export default connect(({ modules, ui }) => ({
+    barrier_1: modules.trade.barrier_1,
+    barrier_2: modules.trade.barrier_2,
+    barrier_pipsize: modules.trade.barrier_pipsize,
+    barrier_count: modules.trade.barrier_count,
+    current_focus: ui.current_focus,
+    duration_unit: modules.trade.duration_unit,
+    onChange: modules.trade.onChange,
+    setCurrentFocus: ui.setCurrentFocus,
+    validation_errors: modules.trade.validation_errors,
+}))(Barrier);
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/last-digit.jsx b/packages/reports/src/Stores/Modules/Trading/Components/last-digit.jsx
new file mode 100644
index 000000000000..ee60e5e55d80
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Trading/Components/last-digit.jsx
@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { isDesktop } from '@deriv/shared';
+import { localize } from '@deriv/translations';
+import NumberSelector from 'App/Components/Form/number-selector.jsx';
+import Fieldset from 'App/Components/Form/fieldset.jsx';
+import { connect } from 'Stores/connect';
+
+const LastDigit = ({ is_minimized, last_digit, onChange }) => {
+    if (is_minimized) {
+        return <div className='fieldset-minimized'>{`${localize('Last Digit')}: ${last_digit}`}</div>;
+    }
+    const arr_five = [...Array(5).keys()];
+    return (
+        <Fieldset
+            className='trade-container__fieldset'
+            header={isDesktop() ? localize('Last Digit Prediction') : null}
+            is_center
+        >
+            <NumberSelector
+                arr_arr_numbers={[arr_five, arr_five.map(i => i + 5)]}
+                name='last_digit'
+                onChange={onChange}
+                selected_number={+last_digit}
+            />
+        </Fieldset>
+    );
+};
+
+LastDigit.propTypes = {
+    is_minimized: PropTypes.bool,
+    last_digit: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    onChange: PropTypes.func,
+};
+
+export default connect(({ modules }) => ({
+    last_digit: modules.trade.last_digit,
+    onChange: modules.trade.onChange,
+}))(LastDigit);
diff --git a/packages/reports/src/Stores/Modules/Trading/Constants/ui.js b/packages/reports/src/Stores/Modules/Trading/Constants/ui.js
index 325fcda6e315..39a016ae48e7 100644
--- a/packages/reports/src/Stores/Modules/Trading/Constants/ui.js
+++ b/packages/reports/src/Stores/Modules/Trading/Constants/ui.js
@@ -1,7 +1,7 @@
-import Amount from 'Modules/Trading/Components/Form/TradeParams/amount.jsx';
-import Barrier from 'Modules/Trading/Components/Form/TradeParams/barrier.jsx';
-import Duration from 'Modules/Trading/Components/Form/TradeParams/Duration';
-import LastDigit from 'Modules/Trading/Components/Form/TradeParams/last-digit.jsx';
+import Amount from '../Components/amount.jsx';
+import Barrier from '../Components/barrier.jsx';
+import Duration from '../Components/Duration';
+import LastDigit from '../Components/last-digit.jsx';
 
 export const form_components = [
     { name: 'duration', Component: Duration },
diff --git a/packages/reports/src/Stores/Modules/Trading/Helpers/start-date.js b/packages/reports/src/Stores/Modules/Trading/Helpers/start-date.js
index 010e86ae6daf..fab43b8fea50 100644
--- a/packages/reports/src/Stores/Modules/Trading/Helpers/start-date.js
+++ b/packages/reports/src/Stores/Modules/Trading/Helpers/start-date.js
@@ -1,4 +1,4 @@
-import ServerTime from '_common/base/server_time';
+import ServerTime from '../../../../_common/base/server_time';
 import { toMoment } from '@deriv/shared';
 
 export const buildForwardStartingConfig = (contract, forward_starting_dates) => {
diff --git a/packages/reports/src/Stores/Modules/Trading/trade-store.js b/packages/reports/src/Stores/Modules/Trading/trade-store.js
index 29f78eca542a..273b801567ba 100644
--- a/packages/reports/src/Stores/Modules/Trading/trade-store.js
+++ b/packages/reports/src/Stores/Modules/Trading/trade-store.js
@@ -13,9 +13,9 @@ import {
     WS,
 } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import { isDigitContractType, isDigitTradeType } from 'Helpers/digits';
+import { isDigitContractType, isDigitTradeType } from '../../../Helpers/digits';
 
-import ServerTime from '_common/base/server_time';
+import ServerTime from '../../../_common/base/server_time';
 
 import { processPurchase } from './Actions/purchase';
 import * as Symbol from './Actions/symbol';
diff --git a/packages/reports/src/Utils/Validator/validator.js b/packages/reports/src/Utils/Validator/validator.js
index c8aa2ce59dff..f6249ab21610 100644
--- a/packages/reports/src/Utils/Validator/validator.js
+++ b/packages/reports/src/Utils/Validator/validator.js
@@ -1,4 +1,4 @@
-import { template } from '_common/utility';
+import { template } from '../../_common/utility';
 import { getPreBuildDVRs } from '@deriv/shared';
 import Error from './errors';
 
diff --git a/packages/trader/src/Stores/Modules/Trading/Constants/ui.js b/packages/trader/src/Stores/Modules/Trading/Constants/ui.js
index 325fcda6e315..276ad104b8a5 100644
--- a/packages/trader/src/Stores/Modules/Trading/Constants/ui.js
+++ b/packages/trader/src/Stores/Modules/Trading/Constants/ui.js
@@ -1,7 +1,7 @@
-import Amount from 'Modules/Trading/Components/Form/TradeParams/amount.jsx';
-import Barrier from 'Modules/Trading/Components/Form/TradeParams/barrier.jsx';
-import Duration from 'Modules/Trading/Components/Form/TradeParams/Duration';
-import LastDigit from 'Modules/Trading/Components/Form/TradeParams/last-digit.jsx';
+import Amount from '../../../../Modules/Trading/Components/Form/TradeParams/amount.jsx';
+import Barrier from '../../../../Modules/Trading/Components/Form/TradeParams/barrier.jsx';
+import Duration from '../../../../Modules/Trading/Components/Form/TradeParams/Duration';
+import LastDigit from '../../../../Modules/Trading/Components/Form/TradeParams/last-digit.jsx';
 
 export const form_components = [
     { name: 'duration', Component: Duration },
diff --git a/packages/trader/src/Utils/Validator/validator.js b/packages/trader/src/Utils/Validator/validator.js
index c8aa2ce59dff..f6249ab21610 100644
--- a/packages/trader/src/Utils/Validator/validator.js
+++ b/packages/trader/src/Utils/Validator/validator.js
@@ -1,4 +1,4 @@
-import { template } from '_common/utility';
+import { template } from '../../_common/utility';
 import { getPreBuildDVRs } from '@deriv/shared';
 import Error from './errors';
 

From 2dede3bb5082fad056b6f19e54b6a6a5f3e99dfa Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Thu, 14 Apr 2022 11:52:37 +0430
Subject: [PATCH 11/64] fix jest errors

---
 .../Routes/__tests__/helpers.spec.js          | 72 +++++++++++++++++++
 .../__tests__/open-positions.spec.js          |  2 +-
 .../Routes/__tests__/helpers.spec.js          | 17 -----
 3 files changed, 73 insertions(+), 18 deletions(-)
 create mode 100644 packages/reports/src/Components/Routes/__tests__/helpers.spec.js

diff --git a/packages/reports/src/Components/Routes/__tests__/helpers.spec.js b/packages/reports/src/Components/Routes/__tests__/helpers.spec.js
new file mode 100644
index 000000000000..98c4157f7a55
--- /dev/null
+++ b/packages/reports/src/Components/Routes/__tests__/helpers.spec.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import { expect } from 'chai';
+import * as Helpers from '../helpers';
+import { routes } from '@deriv/shared';
+import getRoutesConfig from '../../../Constants/routes-config';
+
+describe('Helpers', () => {
+    describe('findRouteByPath', () => {
+        it('should return undefined when path is not in routes_config', () => {
+            expect(Helpers.findRouteByPath('invalidRoute', getRoutesConfig())).to.be.undefined;
+        });
+        it('should return route_info when path is in routes_config and is not nested', () => {
+            const result = Helpers.findRouteByPath(routes.reports, getRoutesConfig());
+            expect(result.path).to.equal(routes.reports);
+        });
+        it('should return route_info of parent route when path is in routes_config child level and is nested', () => {
+            const reports_routes_length = getRoutesConfig().find(r => r.path === routes.reports).routes.length;
+            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig())).to.have.all.keys(
+                'path',
+                'component',
+                'is_authenticated',
+                'routes',
+                'icon_component',
+                'getTitle'
+            );
+            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig()).routes).to.be.instanceof(Array);
+            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig()).routes).to.have.length(
+                reports_routes_length
+            );
+            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig()).is_authenticated).to.be.equal(true);
+            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig()).path).to.be.equal(routes.reports);
+        });
+    });
+
+    describe('isRouteVisible', () => {
+        it('should return true if route needs user to be authenticated and user is logged in', () => {
+            expect(Helpers.isRouteVisible({ path: '/contract', is_authenticated: true }, true)).to.equal(true);
+        });
+        it('should return false if route needs user to be authenticated and user is not logged in', () => {
+            expect(Helpers.isRouteVisible({ path: '/contract', is_authenticated: true }, false)).to.equal(false);
+        });
+        it('should return true if route does not need user to be authenticated and user is not logged in', () => {
+            expect(Helpers.isRouteVisible({ path: '/contract', is_authenticated: false }, false)).to.equal(true);
+        });
+        it('should return true if route does not need user to be authenticated and user is logged in', () => {
+            expect(Helpers.isRouteVisible({ path: '/contract', is_authenticated: false }, true)).to.equal(true);
+        });
+    });
+
+    describe('getPath', () => {
+        it('should return param values in params as a part of path', () => {
+            expect(Helpers.getPath('/contract/:contract_id', { contract_id: 37511105068 })).to.equal(
+                '/contract/37511105068'
+            );
+            expect(
+                Helpers.getPath('/something_made_up/:something_made_up_param1/:something_made_up_param2', {
+                    something_made_up_param1: '789',
+                    something_made_up_param2: '123456',
+                })
+            ).to.equal('/something_made_up/789/123456');
+        });
+        it('should return path as before if there is no params', () => {
+            expect(Helpers.getPath('/contract')).to.equal('/contract');
+        });
+    });
+
+    describe('getContractPath', () => {
+        it('should return the path of contract with contract_id passed', () => {
+            expect(Helpers.getContractPath(1234)).to.equal('/contract/1234');
+        });
+    });
+});
diff --git a/packages/reports/src/Containers/__tests__/open-positions.spec.js b/packages/reports/src/Containers/__tests__/open-positions.spec.js
index cae4c669d486..a1c2eed51a47 100644
--- a/packages/reports/src/Containers/__tests__/open-positions.spec.js
+++ b/packages/reports/src/Containers/__tests__/open-positions.spec.js
@@ -19,7 +19,7 @@ describe('OpenPositions', () => {
     );
 
     it('should render one <OpenPositions /> component', async () => {
-        const OpenPositions = (await import('../../index')).default.OpenPositions;
+        const OpenPositions = (await import('../index')).default.OpenPositions;
         const wrapper = shallow(<OpenPositions />);
         expect(wrapper).to.have.length(1);
     });
diff --git a/packages/trader/src/App/Components/Routes/__tests__/helpers.spec.js b/packages/trader/src/App/Components/Routes/__tests__/helpers.spec.js
index 9b2be737be77..e41bb20685bd 100644
--- a/packages/trader/src/App/Components/Routes/__tests__/helpers.spec.js
+++ b/packages/trader/src/App/Components/Routes/__tests__/helpers.spec.js
@@ -28,23 +28,6 @@ describe('Helpers', () => {
             expect(result.exact).to.equal(true);
             expect(result.component).to.equal(Trade);
         });
-        it('should return route_info of parent route when path is in routes_config child level and is nested', () => {
-            const reports_routes_length = getRoutesConfig().find(r => r.path === routes.reports).routes.length;
-            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig())).to.have.all.keys(
-                'path',
-                'component',
-                'is_authenticated',
-                'routes',
-                'icon_component',
-                'getTitle'
-            );
-            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig()).routes).to.be.instanceof(Array);
-            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig()).routes).to.have.length(
-                reports_routes_length
-            );
-            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig()).is_authenticated).to.be.equal(true);
-            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig()).path).to.be.equal(routes.reports);
-        });
     });
 
     describe('isRouteVisible', () => {

From efde5cc83156096049beb2789a6ff15a88afa060 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Thu, 14 Apr 2022 12:47:25 +0430
Subject: [PATCH 12/64] fix directory

---
 .../src/Components/Form/DatePicker/index.js   |   1 +
 .../Form/DatePicker/trading-date-picker.jsx   | 205 ++++++++++++++++++
 .../Components/Duration/advanced-duration.jsx |  10 +-
 .../Components/Duration/duration-mobile.jsx   |   4 +-
 .../Components/Duration/duration-wrapper.jsx  |   4 +-
 .../Trading/Components/Duration/duration.jsx  |   4 +-
 .../Components/Duration/simple-duration.jsx   |   6 +-
 .../Trading/Components/allow-equals.jsx       |  71 ++++++
 .../Modules/Trading/Components/amount.jsx     |   8 +-
 .../Modules/Trading/Components/barrier.jsx    |   4 +-
 .../Modules/Trading/Components/info.jsx       | 130 +++++++++++
 .../Modules/Trading/Components/last-digit.jsx |   6 +-
 .../Modules/Trading/Components/multiplier.jsx |  33 +++
 13 files changed, 463 insertions(+), 23 deletions(-)
 create mode 100644 packages/reports/src/Components/Form/DatePicker/index.js
 create mode 100644 packages/reports/src/Components/Form/DatePicker/trading-date-picker.jsx
 create mode 100644 packages/reports/src/Stores/Modules/Trading/Components/allow-equals.jsx
 create mode 100644 packages/reports/src/Stores/Modules/Trading/Components/info.jsx
 create mode 100644 packages/reports/src/Stores/Modules/Trading/Components/multiplier.jsx

diff --git a/packages/reports/src/Components/Form/DatePicker/index.js b/packages/reports/src/Components/Form/DatePicker/index.js
new file mode 100644
index 000000000000..9d7e06f93f85
--- /dev/null
+++ b/packages/reports/src/Components/Form/DatePicker/index.js
@@ -0,0 +1 @@
+export default from './trading-date-picker.jsx';
diff --git a/packages/reports/src/Components/Form/DatePicker/trading-date-picker.jsx b/packages/reports/src/Components/Form/DatePicker/trading-date-picker.jsx
new file mode 100644
index 000000000000..054b26baf62c
--- /dev/null
+++ b/packages/reports/src/Components/Form/DatePicker/trading-date-picker.jsx
@@ -0,0 +1,205 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { PropTypes as MobxPropTypes } from 'mobx-react';
+import React from 'react';
+import { DatePicker, Tooltip } from '@deriv/components';
+import { isTimeValid, setTime, toMoment, useIsMounted } from '@deriv/shared';
+import { localize } from '@deriv/translations';
+import { connect } from '../../../Stores/connect';
+import ContractType from '../../../Stores/Modules/Trading/Helpers/contract-type';
+import { hasIntradayDurationUnit } from '../../../Stores/Modules/Trading/Helpers/duration';
+
+const TradingDatePicker = ({
+    duration: current_duration,
+    duration_min_max,
+    duration_units_list,
+    expiry_type,
+    id,
+    is_24_hours_contract,
+    mode,
+    name,
+    onChange,
+    server_time,
+    start_date,
+    start_time,
+    symbol,
+    validation_errors,
+}) => {
+    const isMounted = useIsMounted();
+
+    const [disabled_days, setDisabledDays] = React.useState([]);
+    const [market_events, setMarketEvents] = React.useState([]);
+    const [duration, setDuration] = React.useState(current_duration);
+    const [selected_date, setSelectedDate] = React.useState();
+
+    React.useEffect(() => {
+        onChangeCalendarMonth();
+    }, [onChangeCalendarMonth]);
+
+    React.useEffect(() => {
+        if (duration !== current_duration) {
+            setDuration(current_duration);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [current_duration]);
+
+    const getMinDuration = () => {
+        return hasIntradayDurationUnit(duration_units_list)
+            ? toMoment(server_time).clone()
+            : toMoment(server_time).clone().add(duration_min_max.daily.min, 'second');
+    };
+
+    const getMomentContractStartDateTime = () => {
+        return setTime(
+            toMoment(getMinDuration()),
+            isTimeValid(start_time) ? start_time : server_time.format('HH:mm:ss')
+        );
+    };
+
+    const getMaxDailyDuration = () => {
+        return duration_min_max.daily ? duration_min_max.daily.max : 365 * 24 * 3600;
+    };
+
+    const getMinDateExpiry = () => {
+        const is_duration_contract = expiry_type === 'duration';
+        const min_date = getMomentContractStartDateTime().clone().startOf('day');
+
+        return is_duration_contract && hasIntradayDurationUnit(duration_units_list) ? min_date.add(1, 'day') : min_date;
+    };
+
+    const getMaxDateDuration = () => {
+        return is_24_hours_contract
+            ? getMomentContractStartDateTime()
+                  .clone()
+                  .add(start_date ? 24 * 3600 : getMaxDailyDuration(), 'second')
+            : getMomentContractStartDateTime().clone().add(getMaxDailyDuration(), 'second');
+    };
+
+    const hasRangeSelection = () => mode === 'duration';
+
+    const getFooter = () => {
+        if (!hasRangeSelection()) return null;
+
+        if (!duration) return localize('Minimum duration is 1 day');
+        if (+duration === 1) return localize('Duration: {{duration}} day', { duration });
+        return localize('Duration: {{duration}} days', { duration });
+    };
+
+    const getDatepickerValue = () => {
+        return hasRangeSelection()
+            ? toMoment().add(duration, 'days').format('YYYY-MM-DD')
+            : selected_date || getMinDateExpiry();
+    };
+
+    const onChangeDate = e => {
+        if (isMounted()) {
+            if (hasRangeSelection()) {
+                setDuration(e.duration);
+            } else if (e.target.value) {
+                setSelectedDate(toMoment(e.target.value));
+            }
+        }
+
+        if (typeof onChange === 'function' && e.target) {
+            onChange({
+                target: {
+                    name: e.target.name,
+                    value: hasRangeSelection() ? e.target.value : toMoment(e.target.value).format('YYYY-MM-DD'),
+                },
+            });
+        }
+    };
+
+    const onChangeCalendarMonth = React.useCallback(
+        async (e = toMoment().format('YYYY-MM-DD')) => {
+            const new_market_events = [];
+            let new_disabled_days = [];
+
+            const events = await ContractType.getTradingEvents(e, symbol);
+            events.forEach(evt => {
+                const dates = evt.dates.split(', '); // convert dates str into array
+                const idx = dates.indexOf('Fridays');
+                if (idx !== -1) {
+                    new_disabled_days = [6, 0]; // Sat, Sun
+                }
+                new_market_events.push({
+                    dates,
+                    descrip: evt.descrip,
+                });
+            });
+
+            if (isMounted()) {
+                setDisabledDays(new_disabled_days);
+                setMarketEvents(new_market_events);
+            }
+        },
+        [isMounted, symbol]
+    );
+
+    const has_error = !!validation_errors[name].length;
+
+    return (
+        <div
+            className={classNames('dc-input-field', {
+                'dc-input-field--has-error': has_error,
+            })}
+        >
+            <Tooltip
+                className='trade-container__tooltip'
+                alignment='left'
+                message={has_error ? validation_errors[name][0] : undefined}
+                has_error={has_error}
+            >
+                <DatePicker
+                    id={id}
+                    alignment='left'
+                    display_format='DD MMM YYYY'
+                    show_leading_icon
+                    error={validation_errors[name].length ? '' : undefined}
+                    mode={mode}
+                    max_date={getMaxDateDuration()}
+                    min_date={getMinDateExpiry()}
+                    name={name}
+                    onChange={onChangeDate}
+                    onChangeCalendarMonth={onChangeCalendarMonth}
+                    has_range_selection={hasRangeSelection()}
+                    has_today_btn={!hasRangeSelection()}
+                    footer={getFooter()}
+                    events={market_events}
+                    disabled_days={disabled_days}
+                    keep_open
+                    readOnly={!hasRangeSelection()}
+                    value={getDatepickerValue()}
+                />
+            </Tooltip>
+        </div>
+    );
+};
+
+TradingDatePicker.propTypes = {
+    duration: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    duration_min_max: PropTypes.object,
+    duration_units_list: MobxPropTypes.arrayOrObservableArray,
+    expiry_type: PropTypes.string,
+    is_24_hours_contract: PropTypes.bool,
+    mode: PropTypes.string,
+    onChange: PropTypes.func,
+    server_time: PropTypes.object,
+    start_date: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    start_time: PropTypes.string,
+    symbol: PropTypes.string,
+    validation_errors: PropTypes.object,
+};
+
+export default connect(({ modules, common }) => ({
+    duration: modules.trade.duration,
+    duration_min_max: modules.trade.duration_min_max,
+    duration_units_list: modules.trade.duration_units_list,
+    expiry_type: modules.trade.expiry_type,
+    onChange: modules.trade.onChange,
+    server_time: common.server_time,
+    start_date: modules.trade.start_date,
+    start_time: modules.trade.start_time,
+    symbol: modules.trade.symbol,
+    validation_errors: modules.trade.validation_errors,
+}))(TradingDatePicker);
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/Duration/advanced-duration.jsx b/packages/reports/src/Stores/Modules/Trading/Components/Duration/advanced-duration.jsx
index 7193ec00d66f..0b248bcf208c 100644
--- a/packages/reports/src/Stores/Modules/Trading/Components/Duration/advanced-duration.jsx
+++ b/packages/reports/src/Stores/Modules/Trading/Components/Duration/advanced-duration.jsx
@@ -4,11 +4,11 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Dropdown, ButtonToggle, InputField } from '@deriv/components';
 import { toMoment } from '@deriv/shared';
-import RangeSlider from 'App/Components/Form/RangeSlider';
-import { connect } from 'Stores/connect';
-import { hasIntradayDurationUnit } from 'Stores/Modules/Trading/Helpers/duration';
-import TradingDatePicker from '../../DatePicker';
-import TradingTimePicker from '../../TimePicker';
+import RangeSlider from '../../../../../Components/Form/RangeSlider';
+import { connect } from '../../../../connect';
+import { hasIntradayDurationUnit } from '../../Helpers/duration';
+import TradingDatePicker from '../../../../../Components/Form/DatePicker';
+import TradingTimePicker from '../../../../../Components/Form/TimePicker';
 
 const AdvancedDuration = ({
     advanced_duration_unit,
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-mobile.jsx b/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-mobile.jsx
index 586fa476c22b..47737bbf7c33 100644
--- a/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-mobile.jsx
+++ b/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-mobile.jsx
@@ -3,8 +3,8 @@ import { Tabs, TickPicker, Numpad, RelativeDatepicker } from '@deriv/components'
 import { isEmptyObject, addComma } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
 
-import { connect } from 'Stores/connect';
-import { getDurationMinMaxValues } from 'Stores/Modules/Trading/Helpers/duration';
+import { connect } from '../../../../connect';
+import { getDurationMinMaxValues } from '../../Helpers/duration';
 
 const submit_label = localize('OK');
 
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-wrapper.jsx b/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-wrapper.jsx
index a32555503d9e..7f6b9b5e9bc2 100644
--- a/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-wrapper.jsx
+++ b/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-wrapper.jsx
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { PropTypes as MobxPropTypes } from 'mobx-react';
-import { connect } from 'Stores/connect';
-import { getDurationMinMaxValues } from 'Stores/Modules/Trading/Helpers/duration';
+import { connect } from '../../../../connect';
+import { getDurationMinMaxValues } from '../../Helpers/duration';
 import Duration from './duration.jsx';
 
 const DurationWrapper = props => {
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration.jsx b/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration.jsx
index 7f925175c20d..4fbbcaccd74a 100644
--- a/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration.jsx
+++ b/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration.jsx
@@ -3,8 +3,8 @@ import { PropTypes as MobxPropTypes } from 'mobx-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { localize } from '@deriv/translations';
-import Fieldset from 'App/Components/Form/fieldset.jsx';
-import RangeSlider from 'App/Components/Form/RangeSlider';
+import Fieldset from '../../../../../Components/Form/fieldset.jsx';
+import RangeSlider from '../../../../../Components/Form/RangeSlider';
 import { Dropdown } from '@deriv/components';
 import { toMoment } from '@deriv/shared';
 import DurationToggle from './duration-toggle.jsx';
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/Duration/simple-duration.jsx b/packages/reports/src/Stores/Modules/Trading/Components/Duration/simple-duration.jsx
index 4c1827ecf0ad..553792b5da61 100644
--- a/packages/reports/src/Stores/Modules/Trading/Components/Duration/simple-duration.jsx
+++ b/packages/reports/src/Stores/Modules/Trading/Components/Duration/simple-duration.jsx
@@ -2,9 +2,9 @@ import { PropTypes as MobxPropTypes } from 'mobx-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { ButtonToggle, InputField } from '@deriv/components';
-import RangeSlider from 'App/Components/Form/RangeSlider';
-import { connect } from 'Stores/connect';
-import TradingDatePicker from '../../DatePicker';
+import RangeSlider from '../../../../../Components/Form/RangeSlider';
+import { connect } from '../../../../connect';
+import TradingDatePicker from '../../../../../Components/Form/DatePicker';
 
 const SimpleDuration = ({
     contract_expiry_type,
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/allow-equals.jsx b/packages/reports/src/Stores/Modules/Trading/Components/allow-equals.jsx
new file mode 100644
index 000000000000..95ec96b84710
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Trading/Components/allow-equals.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Popover, Checkbox } from '@deriv/components';
+import { localize } from '@deriv/translations';
+import { hasCallPutEqual, hasDurationForCallPutEqual, isRiseFallEqual } from '../Helpers/allow-equals';
+
+const AllowEquals = ({
+    contract_start_type,
+    contract_type,
+    contract_types_list,
+    duration_unit,
+    expiry_type,
+    onChange,
+    value,
+    has_equals_only,
+}) => {
+    const has_callputequal_duration = hasDurationForCallPutEqual(
+        contract_types_list,
+        duration_unit,
+        contract_start_type
+    );
+    const has_callputequal = hasCallPutEqual(contract_types_list);
+
+    const has_allow_equals =
+        isRiseFallEqual(contract_type) && (has_callputequal_duration || expiry_type === 'endtime') && has_callputequal;
+
+    const changeValue = e => {
+        e.persist();
+        const { name, checked } = e.target;
+        onChange({ target: { name, value: Number(checked) } });
+    };
+
+    return (
+        has_allow_equals && (
+            <div className='allow-equals'>
+                <Checkbox
+                    className='allow-equals__input-field'
+                    id='dt_allow_equals_input'
+                    onChange={changeValue}
+                    defaultChecked={!!value}
+                    name='is_equal'
+                    label={localize('Allow equals')}
+                    classNameLabel='allow-equals__label'
+                    disabled={has_equals_only}
+                />
+                <Popover
+                    alignment='left'
+                    classNameTarget='allow-equals__tooltip'
+                    icon='info'
+                    id='dt_allow_equals_info'
+                    message={localize('Win payout if exit spot is also equal to entry spot.')}
+                    margin={130}
+                    relative_render
+                />
+            </div>
+        )
+    );
+};
+
+AllowEquals.propTypes = {
+    contract_start_type: PropTypes.string,
+    contract_type: PropTypes.string,
+    contract_types_list: PropTypes.object,
+    duration_unit: PropTypes.string,
+    expiry_type: PropTypes.string,
+    has_equals_only: PropTypes.bool,
+    onChange: PropTypes.func,
+    value: PropTypes.number,
+};
+
+export default AllowEquals;
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/amount.jsx b/packages/reports/src/Stores/Modules/Trading/Components/amount.jsx
index aaa1bcd25844..24715b47ac55 100644
--- a/packages/reports/src/Stores/Modules/Trading/Components/amount.jsx
+++ b/packages/reports/src/Stores/Modules/Trading/Components/amount.jsx
@@ -4,12 +4,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { ButtonToggle, Dropdown, InputField } from '@deriv/components';
 import { AMOUNT_MAX_LENGTH, getDecimalPlaces, addComma } from '@deriv/shared';
-import Fieldset from 'App/Components/Form/fieldset.jsx';
-import { connect } from 'Stores/connect';
+import Fieldset from '../../../../Components/Form/fieldset.jsx';
+import { connect } from '../../../connect';
 import { Localize, localize } from '@deriv/translations';
 import AllowEquals from './allow-equals.jsx';
-import MultipliersInfo from './Multiplier/info.jsx';
-import Multiplier from './Multiplier/multiplier.jsx';
+import MultipliersInfo from './info.jsx';
+import Multiplier from './multiplier.jsx';
 
 const Input = ({
     amount,
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/barrier.jsx b/packages/reports/src/Stores/Modules/Trading/Components/barrier.jsx
index 686005c3af05..85492e3f7e15 100644
--- a/packages/reports/src/Stores/Modules/Trading/Components/barrier.jsx
+++ b/packages/reports/src/Stores/Modules/Trading/Components/barrier.jsx
@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { DesktopWrapper, Icon, InputField, MobileWrapper } from '@deriv/components';
-import Fieldset from 'App/Components/Form/fieldset.jsx';
-import { connect } from 'Stores/connect';
+import Fieldset from '../../../../Components/Form/fieldset.jsx';
+import { connect } from '../../../connect';
 import { localize } from '@deriv/translations';
 
 const Barrier = ({
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/info.jsx b/packages/reports/src/Stores/Modules/Trading/Components/info.jsx
new file mode 100644
index 000000000000..3081230c1f71
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Trading/Components/info.jsx
@@ -0,0 +1,130 @@
+import classNames from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Popover, Money, Text } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+import { connect } from '../../../connect';
+
+const commission_tooltip_margin = 30;
+const stop_out_tooltip_margin = 160;
+
+const MultipliersInfo = ({
+    amount = 0,
+    commission = 0,
+    className,
+    commission_text_size,
+    stop_out_text_size,
+    currency,
+    multiplier = 0,
+    has_stop_loss,
+    is_tooltip_relative,
+    should_show_tooltip,
+    stop_out = 0,
+}) => {
+    const commission_text = (
+        <Text
+            as='p'
+            line_height='s'
+            size={commission_text_size || 'xxxs'}
+            className={classNames({
+                [`${className}-tooltip-text`]: className,
+            })}
+        >
+            <Localize
+                i18n_default_text='Commission <0/>'
+                components={[<Money key={0} amount={commission} currency={currency} show_currency />]}
+            />
+        </Text>
+    );
+
+    const stop_out_text = (
+        <Text
+            as='p'
+            line_height='s'
+            size={stop_out_text_size || 'xxxs'}
+            className={classNames({
+                [`${className}-tooltip-text`]: className,
+            })}
+        >
+            <Localize
+                i18n_default_text='Stop out <0/>'
+                components={[<Money key={0} amount={stop_out} currency={currency} show_currency />]}
+            />
+        </Text>
+    );
+
+    const commission_tooltip = (
+        <Localize
+            i18n_default_text='<0>{{commission_percentage}}%</0> of (<1/> * {{multiplier}})'
+            values={{
+                commission_percentage: Number((commission * 100) / (multiplier * amount)).toFixed(4),
+                multiplier,
+            }}
+            components={[
+                <Text size='xxs' weight='bold' key={0} />,
+                <Money key={1} amount={amount} currency={currency} />,
+            ]}
+        />
+    );
+
+    const stop_out_tooltip = (
+        <Localize
+            i18n_default_text='When your current loss equals or exceeds {{stop_out_percentage}}% of your stake, your contract will be closed at the nearest available asset price.'
+            values={{
+                stop_out_percentage: Math.floor(Math.abs(Number((stop_out * 100) / amount))),
+            }}
+        />
+    );
+
+    const getInfo = ({ text, message, margin }) => {
+        return should_show_tooltip ? (
+            <Popover
+                message={message}
+                {...(is_tooltip_relative
+                    ? { alignment: 'left', relative_render: true, margin }
+                    : { alignment: 'top', zIndex: 9999 })}
+            >
+                {text}
+            </Popover>
+        ) : (
+            text
+        );
+    };
+
+    return (
+        <div
+            className={classNames('multipliers-trade-info', className, {
+                'mobile-widget__multiplier-trade-info--no-stop-out': has_stop_loss,
+            })}
+        >
+            {getInfo({
+                text: commission_text,
+                message: commission_tooltip,
+                margin: commission_tooltip_margin,
+            })}
+            {!has_stop_loss &&
+                getInfo({
+                    text: stop_out_text,
+                    message: stop_out_tooltip,
+                    margin: stop_out_tooltip_margin,
+                })}
+        </div>
+    );
+};
+
+MultipliersInfo.propTypes = {
+    className: PropTypes.string,
+    commission_text_size: PropTypes.string,
+    is_tooltip_relative: PropTypes.bool,
+    should_show_tooltip: PropTypes.bool,
+    stop_out_text_size: PropTypes.string,
+};
+
+export default connect(({ modules }, props) => ({
+    amount: props.amount ?? modules.trade.amount,
+    commission: props.commission ?? modules.trade.commission,
+    currency: modules.trade.currency,
+    has_stop_loss: modules.trade.has_stop_loss,
+    multiplier: modules.trade.multiplier,
+    stop_out: props.stop_out ?? modules.trade.stop_out,
+}))(MultipliersInfo);
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/last-digit.jsx b/packages/reports/src/Stores/Modules/Trading/Components/last-digit.jsx
index ee60e5e55d80..315e969842b8 100644
--- a/packages/reports/src/Stores/Modules/Trading/Components/last-digit.jsx
+++ b/packages/reports/src/Stores/Modules/Trading/Components/last-digit.jsx
@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { isDesktop } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import NumberSelector from 'App/Components/Form/number-selector.jsx';
-import Fieldset from 'App/Components/Form/fieldset.jsx';
-import { connect } from 'Stores/connect';
+import NumberSelector from '../../../../Components/Form/number-selector.jsx';
+import Fieldset from '../../../../Components/Form/fieldset.jsx';
+import { connect } from '../../../connect';
 
 const LastDigit = ({ is_minimized, last_digit, onChange }) => {
     if (is_minimized) {
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/multiplier.jsx b/packages/reports/src/Stores/Modules/Trading/Components/multiplier.jsx
new file mode 100644
index 000000000000..66a76458b281
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/Trading/Components/multiplier.jsx
@@ -0,0 +1,33 @@
+import { PropTypes as MobxPropTypes } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Dropdown } from '@deriv/components';
+import { connect } from '../../../connect';
+
+const Multiplier = ({ multiplier, multiplier_range_list, onChange }) => {
+    return (
+        <Dropdown
+            id='multiplier'
+            className='trade-container__multiplier-dropdown'
+            is_alignment_left
+            is_nativepicker={false}
+            list={multiplier_range_list}
+            name='multiplier'
+            no_border={true}
+            value={multiplier}
+            onChange={onChange}
+        />
+    );
+};
+
+Multiplier.propTypes = {
+    multiplier: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    multiplier_range_list: MobxPropTypes.arrayOrObservableArray,
+    onChange: PropTypes.func,
+};
+
+export default connect(({ modules }) => ({
+    multiplier: modules.trade.multiplier,
+    multiplier_range_list: modules.trade.multiplier_range_list,
+    onChange: modules.trade.onChange,
+}))(Multiplier);

From 40fc00b469f1ba1bcbac365948e5700ada86035e Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Sun, 24 Apr 2022 15:54:24 +0430
Subject: [PATCH 13/64] make separate emptyPrtfolioMessage in trader

---
 .../components/src/components/icon/icons.js   |  1 +
 packages/components/stories/icon/icons.js     |  1 +
 .../empty-portfolio-message.jsx               | 24 +++++++++++++++++++
 .../Elements/EmptyPortfolioMessage/index.js   |  3 +++
 .../PositionsDrawer/positions-drawer.jsx      |  2 +-
 .../toggle-positions-mobile.jsx               |  2 +-
 6 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 packages/trader/src/App/Components/Elements/EmptyPortfolioMessage/empty-portfolio-message.jsx
 create mode 100644 packages/trader/src/App/Components/Elements/EmptyPortfolioMessage/index.js

diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js
index f8901c5c8a21..e178230a26ba 100644
--- a/packages/components/src/components/icon/icons.js
+++ b/packages/components/src/components/icon/icons.js
@@ -235,6 +235,7 @@ import './common/ic-email-sent-dashboard.svg';
 import './common/ic-email-sent.svg';
 import './common/ic-email-spam.svg';
 import './common/ic-email-typo.svg';
+import './common/ic-email-verified.svg';
 import './common/ic-email.svg';
 import './common/ic-empty-folder.svg';
 import './common/ic-eye.svg';
diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js
index 2a02587f3f46..5cec13cf1b2c 100644
--- a/packages/components/stories/icon/icons.js
+++ b/packages/components/stories/icon/icons.js
@@ -242,6 +242,7 @@ export const icons =
         'IcEmailSent',
         'IcEmailSpam',
         'IcEmailTypo',
+        'IcEmailVerified',
         'IcEmail',
         'IcEmptyFolder',
         'IcEye',
diff --git a/packages/trader/src/App/Components/Elements/EmptyPortfolioMessage/empty-portfolio-message.jsx b/packages/trader/src/App/Components/Elements/EmptyPortfolioMessage/empty-portfolio-message.jsx
new file mode 100644
index 000000000000..c2066318b49d
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/EmptyPortfolioMessage/empty-portfolio-message.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Icon, Text } from '@deriv/components';
+import { localize } from '@deriv/translations';
+
+const EmptyPortfolioMessage = ({ error }) => (
+    <div className='portfolio-empty'>
+        <div className='portfolio-empty__wrapper'>
+            {error ? (
+                <Text color='disabled' size='xs'>
+                    {error}
+                </Text>
+            ) : (
+                <React.Fragment>
+                    <Icon icon='IcPortfolio' className='portfolio-empty__icon' size={96} color='disabled' />
+                    <Text color='disabled' size='xs'>
+                        {localize('No open positions')}
+                    </Text>
+                </React.Fragment>
+            )}
+        </div>
+    </div>
+);
+
+export default EmptyPortfolioMessage;
diff --git a/packages/trader/src/App/Components/Elements/EmptyPortfolioMessage/index.js b/packages/trader/src/App/Components/Elements/EmptyPortfolioMessage/index.js
new file mode 100644
index 000000000000..d498bb957778
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/EmptyPortfolioMessage/index.js
@@ -0,0 +1,3 @@
+import EmptyPortfolioMessage from './empty-portfolio-message.jsx';
+
+export default EmptyPortfolioMessage;
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
index e55634b32549..08b25da8955a 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
@@ -7,7 +7,7 @@ import { CSSTransition } from 'react-transition-group';
 import { Icon, DataList, Text } from '@deriv/components';
 import { routes, useNewRowTransition } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import EmptyPortfolioMessage from '@deriv/reports';
+import EmptyPortfolioMessage from '../EmptyPortfolioMessage';
 import { connect } from 'Stores/connect';
 import PositionsDrawerCard from './PositionsDrawerCard';
 import { filterByContractType } from './helpers';
diff --git a/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx b/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx
index 441b48fbe737..66e3dd30e1a0 100644
--- a/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx
+++ b/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx
@@ -4,7 +4,7 @@ import { Icon, Div100vhContainer, Modal, Text } from '@deriv/components';
 import { routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { BinaryLink } from 'App/Components/Routes';
-import EmptyPortfolioMessage from '@deriv/reports';
+import EmptyPortfolioMessage from '../EmptyPortfolioMessage';
 import PositionsModalCard from 'App/Components/Elements/PositionsDrawer/positions-modal-card.jsx';
 import { filterByContractType } from 'App/Components/Elements/PositionsDrawer/helpers';
 import { connect } from 'Stores/connect';

From 83cf14431840060416a19899749477dac327d78d Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Mon, 25 Apr 2022 12:43:35 +0430
Subject: [PATCH 14/64] fix aliases

---
 packages/components/src/components/icon/icons.js       |  1 -
 packages/components/stories/icon/icons.js              |  1 -
 packages/reports/.eslintignore                         |  2 +-
 packages/reports/.eslintrc.js                          | 10 ++++++++++
 packages/reports/.eslintrc.ts                          |  2 +-
 packages/reports/build/constants.js                    |  1 -
 .../PositionsDrawerCard/positions-drawer-card.jsx      |  8 ++++----
 .../PositionsDrawer/helpers/positions-helper.js        |  4 ++--
 .../Elements/PositionsDrawer/positions-drawer.jsx      |  2 +-
 .../Elements/PositionsDrawer/positions-modal-card.jsx  | 10 +++++-----
 .../Form/CompositeCalendar/composite-calendar.jsx      |  2 +-
 .../Components/Form/DatePicker/trading-date-picker.jsx |  6 +++---
 .../src/Components/Form/TimePicker/time-picker.jsx     |  2 +-
 .../src/Components/Routes/__tests__/helpers.spec.js    |  2 +-
 packages/reports/src/Components/Routes/binary-link.jsx |  2 +-
 packages/reports/src/Components/account-statistics.jsx |  2 +-
 packages/reports/src/Components/filter-component.jsx   |  2 +-
 packages/reports/src/Components/indicative-cell.jsx    |  4 ++--
 .../reports/src/Components/placeholder-component.jsx   |  2 +-
 packages/reports/src/Constants/data-table-constants.js |  2 +-
 packages/reports/src/Constants/routes-config.js        |  4 ++--
 packages/reports/src/Containers/open-positions.jsx     |  6 +++---
 packages/reports/src/Containers/profit-table.jsx       |  6 +++---
 .../reports/src/Containers/progress-slider-stream.jsx  |  4 ++--
 packages/reports/src/Containers/reports.jsx            |  4 ++--
 packages/reports/src/Containers/routes.jsx             |  6 +++---
 packages/reports/src/Containers/statement.jsx          |  4 ++--
 packages/reports/src/Helpers/market-underlying.js      |  2 +-
 .../src/Modules/SmartChart/Components/top-widgets.jsx  |  2 +-
 .../src/Stores/Modules/Contract/Helpers/logic.js       |  2 +-
 .../Modules/Portfolio/Helpers/format-response.js       |  2 +-
 .../src/Stores/Modules/SmartChart/Constants/markers.js |  6 +++---
 .../Modules/Trading/Components/Duration/duration.jsx   |  4 ++--
 .../src/Stores/Modules/Trading/Components/amount.jsx   |  4 ++--
 .../Stores/Modules/Trading/Components/last-digit.jsx   |  6 +++---
 .../Stores/Modules/Trading/Helpers/contract-type.js    |  2 +-
 .../src/Stores/Modules/Trading/Helpers/start-date.js   |  2 +-
 .../reports/src/Stores/Modules/Trading/trade-store.js  |  4 ++--
 packages/reports/src/Utils/Validator/validator.js      |  2 +-
 packages/reports/src/app.jsx                           |  4 ++--
 packages/reports/src/init-store.js                     |  4 ++--
 41 files changed, 77 insertions(+), 70 deletions(-)
 create mode 100644 packages/reports/.eslintrc.js

diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js
index e178230a26ba..f8901c5c8a21 100644
--- a/packages/components/src/components/icon/icons.js
+++ b/packages/components/src/components/icon/icons.js
@@ -235,7 +235,6 @@ import './common/ic-email-sent-dashboard.svg';
 import './common/ic-email-sent.svg';
 import './common/ic-email-spam.svg';
 import './common/ic-email-typo.svg';
-import './common/ic-email-verified.svg';
 import './common/ic-email.svg';
 import './common/ic-empty-folder.svg';
 import './common/ic-eye.svg';
diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js
index 5cec13cf1b2c..2a02587f3f46 100644
--- a/packages/components/stories/icon/icons.js
+++ b/packages/components/stories/icon/icons.js
@@ -242,7 +242,6 @@ export const icons =
         'IcEmailSent',
         'IcEmailSpam',
         'IcEmailTypo',
-        'IcEmailVerified',
         'IcEmail',
         'IcEmptyFolder',
         'IcEye',
diff --git a/packages/reports/.eslintignore b/packages/reports/.eslintignore
index 669c57635d27..d33f07c6df7b 100644
--- a/packages/reports/.eslintignore
+++ b/packages/reports/.eslintignore
@@ -2,4 +2,4 @@ build/*.js
 src/**/__tests__/*.js
 src/_common/lib/**/*.js
 .eslintrc.js
-.stylelintrc.js
\ No newline at end of file
+.stylelintrc.js
diff --git a/packages/reports/.eslintrc.js b/packages/reports/.eslintrc.js
new file mode 100644
index 000000000000..6718b8cddc2d
--- /dev/null
+++ b/packages/reports/.eslintrc.js
@@ -0,0 +1,10 @@
+const webpackConfig = require('./build/webpack.config-test.js');
+
+module.exports = {
+    extends: '../../.eslintrc.js',
+    settings: {
+        'import/resolver': {
+            webpack: { config: webpackConfig({}) },
+        },
+    },
+};
diff --git a/packages/reports/.eslintrc.ts b/packages/reports/.eslintrc.ts
index 8f5eba9b0529..c56c88f54e6e 100644
--- a/packages/reports/.eslintrc.ts
+++ b/packages/reports/.eslintrc.ts
@@ -13,4 +13,4 @@ module.exports = {
             webpack: { config: webpackConfig({}) },
         },
     },
-};
\ No newline at end of file
+};
diff --git a/packages/reports/build/constants.js b/packages/reports/build/constants.js
index c2e073823791..71d9f7451684 100644
--- a/packages/reports/build/constants.js
+++ b/packages/reports/build/constants.js
@@ -38,7 +38,6 @@ const ALIASES = {
     Modules: path.resolve(__dirname, '../src/Modules'),
     Sass: path.resolve(__dirname, '../src/sass'),
     Stores: path.resolve(__dirname, '../src/Stores'),
-    Helpers: path.resolve(__dirname, '../src/Helpers'),
 };
 
 const rules = (is_test_env = false, is_mocha_only = false) => [
diff --git a/packages/reports/src/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx b/packages/reports/src/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx
index 51f05c554afd..9b454cf9e45e 100644
--- a/packages/reports/src/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx
+++ b/packages/reports/src/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx
@@ -4,11 +4,11 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 import { ContractCard } from '@deriv/components';
 import { getContractPath, isCryptoContract, isMultiplierContract } from '@deriv/shared';
-import { getCardLabels, getContractTypeDisplay } from '../../../../_common/contract';
-import { connect } from '../../../../Stores/connect';
-import { connectWithContractUpdate } from '../../../../Stores/Modules/Contract/Helpers/multiplier';
+import { getCardLabels, getContractTypeDisplay } from '_common/contract';
+import { connect } from 'Stores/connect';
+import { connectWithContractUpdate } from 'Stores/Modules/Contract/Helpers/multiplier';
 
-import { getEndTime } from '../../../../Stores/Modules/Contract/Helpers/logic';
+import { getEndTime } from 'Stores/Modules/Contract/Helpers/logic';
 
 const PositionsDrawerCard = ({
     addToast,
diff --git a/packages/reports/src/Components/Elements/PositionsDrawer/helpers/positions-helper.js b/packages/reports/src/Components/Elements/PositionsDrawer/helpers/positions-helper.js
index e17a406a9e72..96803078b143 100644
--- a/packages/reports/src/Components/Elements/PositionsDrawer/helpers/positions-helper.js
+++ b/packages/reports/src/Components/Elements/PositionsDrawer/helpers/positions-helper.js
@@ -1,7 +1,7 @@
 import { localize } from '@deriv/translations';
 import { isHighLow } from '@deriv/shared';
-import { getContractTypesConfig } from '../../../../Stores/Modules/Trading/Constants/contract';
-import { isCallPut } from '../../../../Stores/Modules/Contract/Helpers/contract-type';
+import { getContractTypesConfig } from 'Stores/Modules/Trading/Constants/contract';
+import { isCallPut } from 'Stores/Modules/Contract/Helpers/contract-type';
 
 export const addCommaToNumber = (num, decimal_places) => {
     if (!num || isNaN(num)) {
diff --git a/packages/reports/src/Components/Elements/PositionsDrawer/positions-drawer.jsx b/packages/reports/src/Components/Elements/PositionsDrawer/positions-drawer.jsx
index 6107eab707c4..2d7d45cc7312 100644
--- a/packages/reports/src/Components/Elements/PositionsDrawer/positions-drawer.jsx
+++ b/packages/reports/src/Components/Elements/PositionsDrawer/positions-drawer.jsx
@@ -8,7 +8,7 @@ import { Icon, DataList, Text } from '@deriv/components';
 import { routes, useNewRowTransition } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import EmptyPortfolioMessage from '../../empty-portfolio-message.jsx';
-import { connect } from '../../../Stores/connect';
+import { connect } from 'Stores/connect';
 import PositionsDrawerCard from './PositionsDrawerCard';
 import { filterByContractType } from './helpers';
 
diff --git a/packages/reports/src/Components/Elements/PositionsDrawer/positions-modal-card.jsx b/packages/reports/src/Components/Elements/PositionsDrawer/positions-modal-card.jsx
index 72500d2212d7..af4e30cfe7ce 100644
--- a/packages/reports/src/Components/Elements/PositionsDrawer/positions-modal-card.jsx
+++ b/packages/reports/src/Components/Elements/PositionsDrawer/positions-modal-card.jsx
@@ -15,14 +15,14 @@ import {
 import { localize } from '@deriv/translations';
 import { BinaryLink } from '../../Routes';
 
-import { connect } from '../../../Stores/connect';
-import { getSymbolDisplayName } from '../../../Stores/Modules/Trading/Helpers/active-symbols';
+import { connect } from 'Stores/connect';
+import { getSymbolDisplayName } from 'Stores/Modules/Trading/Helpers/active-symbols';
 
-import { connectWithContractUpdate } from '../../../Stores/Modules/Contract/Helpers/multiplier';
-import { getEndTime } from '../../../Stores/Modules/Contract/Helpers/logic';
+import { connectWithContractUpdate } from 'Stores/Modules/Contract/Helpers/multiplier';
+import { getEndTime } from 'Stores/Modules/Contract/Helpers/logic';
 import { PositionsCardLoader } from '../ContentLoader';
 
-import { getContractTypeDisplay, getCardLabels } from '../../../_common/contract';
+import { getContractTypeDisplay, getCardLabels } from '_common/contract';
 import { getMarketInformation } from '../../../Helpers/market-underlying';
 import ResultMobile from './result-mobile.jsx';
 
diff --git a/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx b/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx
index 4a68fdb1dc14..875fb85cfe0b 100644
--- a/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx
+++ b/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx
@@ -4,7 +4,7 @@ import Loadable from 'react-loadable';
 import { DesktopWrapper, InputField, MobileWrapper, useOnClickOutside } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import { daysFromTodayTo, epochToMoment, toMoment } from '@deriv/shared';
-import { connect } from '../../../Stores/connect';
+import { connect } from 'Stores/connect';
 import CompositeCalendarMobile from './composite-calendar-mobile.jsx';
 import SideList from './side-list.jsx';
 import CalendarIcon from './calendar-icon.jsx';
diff --git a/packages/reports/src/Components/Form/DatePicker/trading-date-picker.jsx b/packages/reports/src/Components/Form/DatePicker/trading-date-picker.jsx
index 054b26baf62c..471eef3c29d3 100644
--- a/packages/reports/src/Components/Form/DatePicker/trading-date-picker.jsx
+++ b/packages/reports/src/Components/Form/DatePicker/trading-date-picker.jsx
@@ -5,9 +5,9 @@ import React from 'react';
 import { DatePicker, Tooltip } from '@deriv/components';
 import { isTimeValid, setTime, toMoment, useIsMounted } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import { connect } from '../../../Stores/connect';
-import ContractType from '../../../Stores/Modules/Trading/Helpers/contract-type';
-import { hasIntradayDurationUnit } from '../../../Stores/Modules/Trading/Helpers/duration';
+import { connect } from 'Stores/connect';
+import ContractType from 'Stores/Modules/Trading/Helpers/contract-type';
+import { hasIntradayDurationUnit } from 'Stores/Modules/Trading/Helpers/duration';
 
 const TradingDatePicker = ({
     duration: current_duration,
diff --git a/packages/reports/src/Components/Form/TimePicker/time-picker.jsx b/packages/reports/src/Components/Form/TimePicker/time-picker.jsx
index 438ecbb042fe..301df882505b 100644
--- a/packages/reports/src/Components/Form/TimePicker/time-picker.jsx
+++ b/packages/reports/src/Components/Form/TimePicker/time-picker.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { Icon, InputField } from '@deriv/components';
-import { connect } from '../../../Stores/connect';
+import { connect } from 'Stores/connect';
 import Dialog from './dialog.jsx';
 
 const class_prefix = 'time-picker';
diff --git a/packages/reports/src/Components/Routes/__tests__/helpers.spec.js b/packages/reports/src/Components/Routes/__tests__/helpers.spec.js
index 98c4157f7a55..40ccab231af2 100644
--- a/packages/reports/src/Components/Routes/__tests__/helpers.spec.js
+++ b/packages/reports/src/Components/Routes/__tests__/helpers.spec.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { expect } from 'chai';
 import * as Helpers from '../helpers';
 import { routes } from '@deriv/shared';
-import getRoutesConfig from '../../../Constants/routes-config';
+import getRoutesConfig from 'Constants/routes-config';
 
 describe('Helpers', () => {
     describe('findRouteByPath', () => {
diff --git a/packages/reports/src/Components/Routes/binary-link.jsx b/packages/reports/src/Components/Routes/binary-link.jsx
index c92428bdea66..be396321f25f 100644
--- a/packages/reports/src/Components/Routes/binary-link.jsx
+++ b/packages/reports/src/Components/Routes/binary-link.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import { PlatformContext } from '@deriv/shared';
-import getRoutesConfig from '../../Constants/routes-config';
+import getRoutesConfig from 'Constants/routes-config';
 import { findRouteByPath, normalizePath } from './helpers';
 
 const BinaryLink = ({ active_class, to, children, ...props }) => {
diff --git a/packages/reports/src/Components/account-statistics.jsx b/packages/reports/src/Components/account-statistics.jsx
index d62ad260bdd4..2e2c3e3c5863 100644
--- a/packages/reports/src/Components/account-statistics.jsx
+++ b/packages/reports/src/Components/account-statistics.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { MobileWrapper, Money, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
-import { connect } from '../Stores/connect';
+import { connect } from 'Stores/connect';
 
 const AccountStatistics = ({ account_statistics, currency }) => {
     return (
diff --git a/packages/reports/src/Components/filter-component.jsx b/packages/reports/src/Components/filter-component.jsx
index a3c771365215..316995b171ff 100644
--- a/packages/reports/src/Components/filter-component.jsx
+++ b/packages/reports/src/Components/filter-component.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FilterDropdown } from '@deriv/components';
 import { localize } from '@deriv/translations';
-import { connect } from '../Stores/connect';
+import { connect } from 'Stores/connect';
 import CompositeCalendar from './Form/CompositeCalendar';
 
 const FilterComponent = ({
diff --git a/packages/reports/src/Components/indicative-cell.jsx b/packages/reports/src/Components/indicative-cell.jsx
index b49d64b44b22..a6f768897885 100644
--- a/packages/reports/src/Components/indicative-cell.jsx
+++ b/packages/reports/src/Components/indicative-cell.jsx
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Icon, Money, DesktopWrapper, ContractCard } from '@deriv/components';
-import { getCardLabels } from '../_common/contract';
-import { connect } from '../Stores/connect';
+import { getCardLabels } from '_common/contract';
+import { connect } from 'Stores/connect';
 
 const IndicativeCell = ({ amount, currency, contract_info, is_footer, onClickSell, is_sell_requested }) => {
     const [movement, setMovement] = React.useState(null);
diff --git a/packages/reports/src/Components/placeholder-component.jsx b/packages/reports/src/Components/placeholder-component.jsx
index 82ce003ce224..b8d9717abc41 100644
--- a/packages/reports/src/Components/placeholder-component.jsx
+++ b/packages/reports/src/Components/placeholder-component.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Loading from '../_common/components/loading.jsx';
+import Loading from '_common/components/loading.jsx';
 
 const PlaceholderComponent = props => {
     const EmptyMessageComponent = props.empty_message_component;
diff --git a/packages/reports/src/Constants/data-table-constants.js b/packages/reports/src/Constants/data-table-constants.js
index 4ce033488d07..a6cf33b3daff 100644
--- a/packages/reports/src/Constants/data-table-constants.js
+++ b/packages/reports/src/Constants/data-table-constants.js
@@ -5,7 +5,7 @@ import { isMobile, getCurrencyDisplayCode, getTotalProfit, shouldShowCancellatio
 import { localize, Localize } from '@deriv/translations';
 import ProgressSliderStream from '../Containers/progress-slider-stream.jsx';
 
-import { getCardLabels } from '../_common/contract';
+import { getCardLabels } from '_common/contract';
 import { getProfitOrLoss } from '../Helpers/profit-loss';
 import IndicativeCell from '../Components/indicative-cell.jsx';
 import MarketSymbolIconRow from '../Components/market-symbol-icon-row.jsx';
diff --git a/packages/reports/src/Constants/routes-config.js b/packages/reports/src/Constants/routes-config.js
index 75361c9b6ccd..aeb10a966fa4 100644
--- a/packages/reports/src/Constants/routes-config.js
+++ b/packages/reports/src/Constants/routes-config.js
@@ -3,10 +3,10 @@ import { routes, makeLazyLoader } from '@deriv/shared';
 import { Loading } from '@deriv/components';
 import { localize } from '@deriv/translations';
 
-const Page404 = React.lazy(() => import(/* webpackChunkName: "404" */ '../Modules/Page404'));
+const Page404 = React.lazy(() => import(/* webpackChunkName: "404" */ 'Modules/Page404'));
 
 const lazyLoadReportComponent = makeLazyLoader(
-    () => import(/* webpackChunkName: "reports-routes" */ '../Containers'),
+    () => import(/* webpackChunkName: "reports-routes" */ 'Containers'),
     () => <Loading />
 );
 
diff --git a/packages/reports/src/Containers/open-positions.jsx b/packages/reports/src/Containers/open-positions.jsx
index 2cfafdc2822d..99261f50381e 100644
--- a/packages/reports/src/Containers/open-positions.jsx
+++ b/packages/reports/src/Containers/open-positions.jsx
@@ -22,11 +22,11 @@ import EmptyTradeHistoryMessage from '../Components/empty-trade-history-message.
 import {
     getOpenPositionsColumnsTemplate,
     getMultiplierOpenPositionsColumnsTemplate,
-} from '../Constants/data-table-constants';
+} from 'Constants/data-table-constants';
 import PositionsCard from '../Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx';
 import PlaceholderComponent from '../Components/placeholder-component.jsx';
-import { getCardLabels } from '../_common/contract';
-import { connect } from '../Stores/connect';
+import { getCardLabels } from '_common/contract';
+import { connect } from 'Stores/connect';
 
 const EmptyPlaceholderWrapper = props => (
     <React.Fragment>
diff --git a/packages/reports/src/Containers/profit-table.jsx b/packages/reports/src/Containers/profit-table.jsx
index 5ea255e96245..3bbd6fe12d57 100644
--- a/packages/reports/src/Containers/profit-table.jsx
+++ b/packages/reports/src/Containers/profit-table.jsx
@@ -9,13 +9,13 @@ import { localize, Localize } from '@deriv/translations';
 import { ReportsTableRowLoader } from '../Components/Elements/ContentLoader';
 import CompositeCalendar from '../Components/Form/CompositeCalendar';
 import { getContractPath } from '../Components/Routes/helpers';
-import { getSupportedContracts } from '../_common/contract';
+import { getSupportedContracts } from '_common/contract';
 
-import { connect } from '../Stores/connect';
+import { connect } from 'Stores/connect';
 import EmptyTradeHistoryMessage from '../Components/empty-trade-history-message.jsx';
 import PlaceholderComponent from '../Components/placeholder-component.jsx';
 import { ReportsMeta } from '../Components/reports-meta.jsx';
-import { getProfitTableColumnsTemplate } from '../Constants/data-table-constants';
+import { getProfitTableColumnsTemplate } from 'Constants/data-table-constants';
 
 const getRowAction = row_obj =>
     getSupportedContracts()[extractInfoFromShortcode(row_obj.shortcode).category.toUpperCase()] &&
diff --git a/packages/reports/src/Containers/progress-slider-stream.jsx b/packages/reports/src/Containers/progress-slider-stream.jsx
index 1f2bceb78424..23e628dc4204 100644
--- a/packages/reports/src/Containers/progress-slider-stream.jsx
+++ b/packages/reports/src/Containers/progress-slider-stream.jsx
@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { ProgressSlider } from '@deriv/components';
 import { getCurrentTick } from '@deriv/shared';
-import { connect } from '../Stores/connect';
-import { getCardLabels } from '../_common/contract';
+import { connect } from 'Stores/connect';
+import { getCardLabels } from '_common/contract';
 
 const ProgressSliderStream = ({ contract_info, is_loading, server_time }) => {
     if (!contract_info) {
diff --git a/packages/reports/src/Containers/reports.jsx b/packages/reports/src/Containers/reports.jsx
index ac6189f0a7f7..33b0e8a509a2 100644
--- a/packages/reports/src/Containers/reports.jsx
+++ b/packages/reports/src/Containers/reports.jsx
@@ -13,8 +13,8 @@ import {
 } from '@deriv/components';
 import { getSelectedRoute } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import { connect } from '../Stores/connect';
-import '../sass/app/modules/reports.scss';
+import { connect } from 'Stores/connect';
+import 'Sass/app/modules/reports.scss';
 
 const Reports = ({
     history,
diff --git a/packages/reports/src/Containers/routes.jsx b/packages/reports/src/Containers/routes.jsx
index 5bc21076f20d..585ad7a9d3f8 100644
--- a/packages/reports/src/Containers/routes.jsx
+++ b/packages/reports/src/Containers/routes.jsx
@@ -2,9 +2,9 @@ import { PropTypes as MobxPropTypes } from 'mobx-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withRouter } from 'react-router';
-import BinaryRoutes from '../Components/Routes';
-import { connect } from '../Stores/connect';
-import ErrorComponent from '../Components/Errors';
+import BinaryRoutes from 'Components/Routes';
+import { connect } from 'Stores/connect';
+import ErrorComponent from 'Components/Errors';
 
 const Routes = props => {
     if (props.has_error) {
diff --git a/packages/reports/src/Containers/statement.jsx b/packages/reports/src/Containers/statement.jsx
index 3aea4e200c13..1908343ab117 100644
--- a/packages/reports/src/Containers/statement.jsx
+++ b/packages/reports/src/Containers/statement.jsx
@@ -7,8 +7,8 @@ import { extractInfoFromShortcode, isForwardStarting, urlFor, website_name } fro
 import { localize, Localize } from '@deriv/translations';
 import { ReportsTableRowLoader } from '../Components/Elements/ContentLoader';
 import { getContractPath } from '../Components/Routes/helpers';
-import { getSupportedContracts } from '../_common/contract';
-import { connect } from '../Stores/connect';
+import { getSupportedContracts } from '_common/contract';
+import { connect } from 'Stores/connect';
 import { getStatementTableColumnsTemplate } from '../Constants/data-table-constants';
 import PlaceholderComponent from '../Components/placeholder-component.jsx';
 import AccountStatistics from '../Components/account-statistics.jsx';
diff --git a/packages/reports/src/Helpers/market-underlying.js b/packages/reports/src/Helpers/market-underlying.js
index c1b3fc568a4b..e40f15c4dc0f 100644
--- a/packages/reports/src/Helpers/market-underlying.js
+++ b/packages/reports/src/Helpers/market-underlying.js
@@ -1,4 +1,4 @@
-import { getMarketNamesMap, getContractConfig } from '../_common/contract';
+import { getMarketNamesMap, getContractConfig } from '_common/contract';
 import { localize } from '@deriv/translations';
 
 /**
diff --git a/packages/reports/src/Modules/SmartChart/Components/top-widgets.jsx b/packages/reports/src/Modules/SmartChart/Components/top-widgets.jsx
index 467358061d04..7531dbd7cd0e 100644
--- a/packages/reports/src/Modules/SmartChart/Components/top-widgets.jsx
+++ b/packages/reports/src/Modules/SmartChart/Components/top-widgets.jsx
@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 import { DesktopWrapper, MobileWrapper, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import { isEnded, isDigitContract } from '@deriv/shared';
-import { connect } from '../../../Stores/connect';
+import { connect } from 'Stores/connect';
 import { ChartTitle } from '../index';
 
 const TradeInfo = ({ markers_array, granularity }) => {
diff --git a/packages/reports/src/Stores/Modules/Contract/Helpers/logic.js b/packages/reports/src/Stores/Modules/Contract/Helpers/logic.js
index 16834103170e..4255dc37ec48 100644
--- a/packages/reports/src/Stores/Modules/Contract/Helpers/logic.js
+++ b/packages/reports/src/Stores/Modules/Contract/Helpers/logic.js
@@ -1,6 +1,6 @@
 import moment from 'moment';
 import { isEmptyObject, isUserSold, getLimitOrderAmount } from '@deriv/shared';
-import ServerTime from '../../../../_common/base/server_time';
+import ServerTime from '_common/base/server_time';
 
 export const getChartConfig = contract_info => {
     if (isEmptyObject(contract_info)) return null;
diff --git a/packages/reports/src/Stores/Modules/Portfolio/Helpers/format-response.js b/packages/reports/src/Stores/Modules/Portfolio/Helpers/format-response.js
index 0a014702e74b..9bb05c5bfe9c 100644
--- a/packages/reports/src/Stores/Modules/Portfolio/Helpers/format-response.js
+++ b/packages/reports/src/Stores/Modules/Portfolio/Helpers/format-response.js
@@ -1,4 +1,4 @@
-import { getUnsupportedContracts } from '../../../../_common/contract';
+import { getUnsupportedContracts } from '_common/contract';
 import { getSymbolDisplayName } from '../../Trading/Helpers/active-symbols';
 
 import { getMarketInformation } from '../../../../Helpers/market-underlying';
diff --git a/packages/reports/src/Stores/Modules/SmartChart/Constants/markers.js b/packages/reports/src/Stores/Modules/SmartChart/Constants/markers.js
index a5b4b837e776..987f95e37c48 100644
--- a/packages/reports/src/Stores/Modules/SmartChart/Constants/markers.js
+++ b/packages/reports/src/Stores/Modules/SmartChart/Constants/markers.js
@@ -1,7 +1,7 @@
 import { localize } from '@deriv/translations';
-import MarkerLine from '../../../../Modules/SmartChart/Components/Markers/marker-line.jsx';
-import MarkerSpotLabel from '../../../../Modules/SmartChart/Components/Markers/marker-spot-label.jsx';
-import MarkerSpot from '../../../../Modules/SmartChart/Components/Markers/marker-spot.jsx';
+import MarkerLine from 'Modules/SmartChart/Components/Markers/marker-line.jsx';
+import MarkerSpotLabel from 'Modules/SmartChart/Components/Markers/marker-spot-label.jsx';
+import MarkerSpot from 'Modules/SmartChart/Components/Markers/marker-spot.jsx';
 
 export const MARKER_TYPES_CONFIG = {
     LINE_END: {
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration.jsx b/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration.jsx
index 4fbbcaccd74a..6b7a6609915f 100644
--- a/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration.jsx
+++ b/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration.jsx
@@ -3,8 +3,8 @@ import { PropTypes as MobxPropTypes } from 'mobx-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { localize } from '@deriv/translations';
-import Fieldset from '../../../../../Components/Form/fieldset.jsx';
-import RangeSlider from '../../../../../Components/Form/RangeSlider';
+import Fieldset from 'Components/Form/fieldset.jsx';
+import RangeSlider from 'Components/Form/RangeSlider';
 import { Dropdown } from '@deriv/components';
 import { toMoment } from '@deriv/shared';
 import DurationToggle from './duration-toggle.jsx';
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/amount.jsx b/packages/reports/src/Stores/Modules/Trading/Components/amount.jsx
index 24715b47ac55..25a39eb2a386 100644
--- a/packages/reports/src/Stores/Modules/Trading/Components/amount.jsx
+++ b/packages/reports/src/Stores/Modules/Trading/Components/amount.jsx
@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { ButtonToggle, Dropdown, InputField } from '@deriv/components';
 import { AMOUNT_MAX_LENGTH, getDecimalPlaces, addComma } from '@deriv/shared';
-import Fieldset from '../../../../Components/Form/fieldset.jsx';
-import { connect } from '../../../connect';
+import Fieldset from 'Components/Form/fieldset.jsx';
+import { connect } from 'Stores/connect';
 import { Localize, localize } from '@deriv/translations';
 import AllowEquals from './allow-equals.jsx';
 import MultipliersInfo from './info.jsx';
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/last-digit.jsx b/packages/reports/src/Stores/Modules/Trading/Components/last-digit.jsx
index 315e969842b8..caa5f251a8c7 100644
--- a/packages/reports/src/Stores/Modules/Trading/Components/last-digit.jsx
+++ b/packages/reports/src/Stores/Modules/Trading/Components/last-digit.jsx
@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { isDesktop } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import NumberSelector from '../../../../Components/Form/number-selector.jsx';
-import Fieldset from '../../../../Components/Form/fieldset.jsx';
-import { connect } from '../../../connect';
+import NumberSelector from 'Components/Form/number-selector.jsx';
+import Fieldset from 'Components/Form/fieldset.jsx';
+import { connect } from 'Stores/connect';
 
 const LastDigit = ({ is_minimized, last_digit, onChange }) => {
     if (is_minimized) {
diff --git a/packages/reports/src/Stores/Modules/Trading/Helpers/contract-type.js b/packages/reports/src/Stores/Modules/Trading/Helpers/contract-type.js
index 6f8f4a524918..cefe35e9ae3c 100644
--- a/packages/reports/src/Stores/Modules/Trading/Helpers/contract-type.js
+++ b/packages/reports/src/Stores/Modules/Trading/Helpers/contract-type.js
@@ -7,7 +7,7 @@ import {
     shouldShowCancellation,
     WS,
 } from '@deriv/shared';
-import ServerTime from '../../../../_common/base/server_time';
+import ServerTime from '_common/base/server_time';
 import { localize } from '@deriv/translations';
 
 import { getUnitMap } from '../../Portfolio/Helpers/details';
diff --git a/packages/reports/src/Stores/Modules/Trading/Helpers/start-date.js b/packages/reports/src/Stores/Modules/Trading/Helpers/start-date.js
index fab43b8fea50..010e86ae6daf 100644
--- a/packages/reports/src/Stores/Modules/Trading/Helpers/start-date.js
+++ b/packages/reports/src/Stores/Modules/Trading/Helpers/start-date.js
@@ -1,4 +1,4 @@
-import ServerTime from '../../../../_common/base/server_time';
+import ServerTime from '_common/base/server_time';
 import { toMoment } from '@deriv/shared';
 
 export const buildForwardStartingConfig = (contract, forward_starting_dates) => {
diff --git a/packages/reports/src/Stores/Modules/Trading/trade-store.js b/packages/reports/src/Stores/Modules/Trading/trade-store.js
index 273b801567ba..19a6c51d2237 100644
--- a/packages/reports/src/Stores/Modules/Trading/trade-store.js
+++ b/packages/reports/src/Stores/Modules/Trading/trade-store.js
@@ -15,7 +15,7 @@ import {
 import { localize } from '@deriv/translations';
 import { isDigitContractType, isDigitTradeType } from '../../../Helpers/digits';
 
-import ServerTime from '../../../_common/base/server_time';
+import ServerTime from '_common/base/server_time';
 
 import { processPurchase } from './Actions/purchase';
 import * as Symbol from './Actions/symbol';
@@ -36,7 +36,7 @@ import { setLimitOrderBarriers } from '../Contract/Helpers/limit-orders';
 import { ChartBarrierStore } from '../SmartChart/chart-barrier-store';
 import { BARRIER_COLORS } from '../SmartChart/Constants/barriers';
 import { isBarrierSupported, removeBarrier } from '../SmartChart/Helpers/barriers';
-import BaseStore from '../../base-store';
+import BaseStore from 'Stores/base-store';
 
 const store_name = 'trade_store';
 const g_subscribers_map = {}; // blame amin.m
diff --git a/packages/reports/src/Utils/Validator/validator.js b/packages/reports/src/Utils/Validator/validator.js
index f6249ab21610..c8aa2ce59dff 100644
--- a/packages/reports/src/Utils/Validator/validator.js
+++ b/packages/reports/src/Utils/Validator/validator.js
@@ -1,4 +1,4 @@
-import { template } from '../../_common/utility';
+import { template } from '_common/utility';
 import { getPreBuildDVRs } from '@deriv/shared';
 import Error from './errors';
 
diff --git a/packages/reports/src/app.jsx b/packages/reports/src/app.jsx
index 57c52a7e135a..52db330e336e 100644
--- a/packages/reports/src/app.jsx
+++ b/packages/reports/src/app.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Routes from './Containers/routes.jsx';
-import { MobxContentProvider } from './Stores/connect';
+import Routes from 'Containers/routes.jsx';
+import { MobxContentProvider } from 'Stores/connect';
 
 import initStore from './init-store'; // eslint-disable-line import/extensions
 
diff --git a/packages/reports/src/init-store.js b/packages/reports/src/init-store.js
index 145e9fd5796f..f6ad9f411595 100644
--- a/packages/reports/src/init-store.js
+++ b/packages/reports/src/init-store.js
@@ -1,7 +1,7 @@
 import { configure } from 'mobx';
-import RootStore from './Stores';
+import RootStore from 'Stores';
 import { setWebsocket } from '@deriv/shared';
-import ServerTime from './_common/base/server_time';
+import ServerTime from '_common/base/server_time';
 
 configure({ enforceActions: 'observed' });
 

From 58528e8638e28fd3e6203f8ea15e2d8ab9a8bd59 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Mon, 25 Apr 2022 14:25:36 +0430
Subject: [PATCH 15/64] add translation

---
 packages/translations/scripts/extract-string.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/translations/scripts/extract-string.js b/packages/translations/scripts/extract-string.js
index 7d57b4b21421..a1d1a20bddb1 100644
--- a/packages/translations/scripts/extract-string.js
+++ b/packages/translations/scripts/extract-string.js
@@ -43,6 +43,7 @@ const getTranslatableFiles = () => {
         'cfd',
         'trader',
         'bot-skeleton',
+        'reports',
     ];
     const globs = ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx', '**/xml/*.xml'];
     const file_paths = [];

From d77b06d65426520cccef4274a40db533ccb0c856 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Mon, 25 Apr 2022 15:21:24 +0430
Subject: [PATCH 16/64] fix code smell

---
 packages/trader/src/_common/components/loading.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/trader/src/_common/components/loading.tsx b/packages/trader/src/_common/components/loading.tsx
index 431514fd7330..fcd1fb275174 100644
--- a/packages/trader/src/_common/components/loading.tsx
+++ b/packages/trader/src/_common/components/loading.tsx
@@ -13,7 +13,7 @@ const Loading = ({ className, is_invisible, theme, id }: LoadingProps) => (
         id={id}
         className={classNames('barspinner', `barspinner--${theme || 'dark'}`, { invisible: is_invisible }, className)}
     >
-        {Array.from(new Array(5)).map((x, inx) => (
+        {Array.from(new Array(5)).map((_x, inx) => (
             <div key={inx} className={`barspinner__rect barspinner__rect--${inx + 1} rect${inx + 1}`} />
         ))}
     </div>

From ccde6123882ee2d8fad8a8727ead7846d77c5369 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Mon, 25 Apr 2022 15:31:19 +0430
Subject: [PATCH 17/64] reload tests


From abc153d8900f76a868813df9a2d6ee57d7fea4ba Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Tue, 26 Apr 2022 09:22:19 +0430
Subject: [PATCH 18/64] fix empty-portfolio-message conflicts

---
 packages/reports/src/Components/empty-portfolio-message.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/reports/src/Components/empty-portfolio-message.jsx b/packages/reports/src/Components/empty-portfolio-message.jsx
index cd6eb1d2a44d..461a098159d2 100644
--- a/packages/reports/src/Components/empty-portfolio-message.jsx
+++ b/packages/reports/src/Components/empty-portfolio-message.jsx
@@ -12,8 +12,10 @@ export const EmptyPortfolioMessage = ({ error }) => (
             ) : (
                 <React.Fragment>
                     <Icon icon='IcPortfolio' className='portfolio-empty__icon' size={96} color='disabled' />
-                    <Text color='disabled' size='xs'>
-                        {localize('No open positions')}
+                    <Text align='center' className='portfolio-empty__text' color='disabled' size='xs'>
+                        {localize(
+                            'You have no open positions for this asset. To view other open positions, click Go to Reports'
+                        )}
                     </Text>
                 </React.Fragment>
             )}

From 02d50edaf30c68a100f93404f2ebe41871d8adee Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Thu, 5 May 2022 09:54:48 +0430
Subject: [PATCH 19/64] remove unnecessary css files and functions

---
 .circleci/config.yml                          |    2 +-
 .github/CODEOWNERS                            |    2 +-
 .../core/src/App/Constants/routes-config.js   |   12 -
 packages/reports/build/config.js              |   15 -
 packages/reports/build/constants.js           |   10 +-
 packages/reports/build/webpack.config.js      |    1 -
 packages/reports/package.json                 |    2 -
 .../src/Components/Routes/binary-link.jsx     |    5 +-
 .../src/Components/Routes/binary-routes.jsx   |    4 +-
 packages/reports/src/sass/app.scss            |   14 -
 .../_common/components/contract-audit.scss    |  101 --
 .../_common/components/contract-replay.scss   |   24 -
 .../components/contract-type-dialog.scss      |  101 --
 .../components/contract-type-info.scss        |  110 --
 .../components/contract-type-list.scss        |   94 -
 .../components/contract-type-no-result.scss   |   24 -
 .../components/contract-type-widget.scss      |  107 --
 .../components/market-is-closed-overlay.scss  |   54 -
 .../app/_common/components/popconfirm.scss    |  201 ---
 .../_common/components/purchase-button.scss   |  327 ----
 .../app/_common/drawer/contract-drawer.scss   |  131 --
 .../sass/app/modules/mt5/cfd-dashboard.scss   | 1539 -----------------
 .../reports/src/sass/app/modules/mt5/cfd.scss |  394 -----
 .../reports/src/sass/app/modules/trading.scss |  675 --------
 .../Stores/Modules/Trading/Constants/ui.js    |    8 +-
 .../trader/src/Utils/Validator/validator.js   |    2 +-
 26 files changed, 14 insertions(+), 3945 deletions(-)
 delete mode 100644 packages/reports/src/sass/app/_common/components/contract-audit.scss
 delete mode 100644 packages/reports/src/sass/app/_common/components/contract-replay.scss
 delete mode 100644 packages/reports/src/sass/app/_common/components/contract-type-dialog.scss
 delete mode 100644 packages/reports/src/sass/app/_common/components/contract-type-info.scss
 delete mode 100644 packages/reports/src/sass/app/_common/components/contract-type-list.scss
 delete mode 100644 packages/reports/src/sass/app/_common/components/contract-type-no-result.scss
 delete mode 100644 packages/reports/src/sass/app/_common/components/contract-type-widget.scss
 delete mode 100644 packages/reports/src/sass/app/_common/components/market-is-closed-overlay.scss
 delete mode 100644 packages/reports/src/sass/app/_common/components/popconfirm.scss
 delete mode 100644 packages/reports/src/sass/app/_common/components/purchase-button.scss
 delete mode 100644 packages/reports/src/sass/app/_common/drawer/contract-drawer.scss
 delete mode 100644 packages/reports/src/sass/app/modules/mt5/cfd-dashboard.scss
 delete mode 100644 packages/reports/src/sass/app/modules/mt5/cfd.scss
 delete mode 100644 packages/reports/src/sass/app/modules/trading.scss

diff --git a/.circleci/config.yml b/.circleci/config.yml
index a479426cc927..e189f51555de 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -64,12 +64,12 @@ commands:
             - "packages/bot-skeleton/node_modules"
             - "packages/bot-web-ui/node_modules"
             - "packages/cashier/node_modules"
-            - "packages/reports/node_modules"
             - "packages/components/node_modules"
             - "packages/core/node_modules"
             - "packages/cfd/node_modules"
             - "packages/indicators/node_modules"
             - "packages/p2p/node_modules"
+            - "packages/reports/node_modules"
             - "packages/shared/node_modules"
             - "packages/trader/node_modules"
             - "packages/translations/node_modules"
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index be02f18def1e..755e13cfd5e6 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -119,12 +119,12 @@
 
 /packages/trader/**/*                                           @matin-binary @balakrishna-binary @akmal-binary 
 
+# ==============================================================
 #  deriv-app/reports
 # ==============================================================
 
 /packages/reports/**/*                                           @matin-binary @balakrishna-binary
 
-
 # ==============================================================
 #  deriv-app/publisher
 # ==============================================================
diff --git a/packages/core/src/App/Constants/routes-config.js b/packages/core/src/App/Constants/routes-config.js
index a12bf554fc93..fb3ee1acd4fc 100644
--- a/packages/core/src/App/Constants/routes-config.js
+++ b/packages/core/src/App/Constants/routes-config.js
@@ -256,18 +256,6 @@ const getModules = ({ is_appstore }, is_social_signup) => {
             component: Trader,
             getTitle: () => localize('Trader'),
             routes: [
-                {
-                    path: routes.dxtrade,
-                    component: Trader,
-                    getTitle: () => localize('Deriv X'),
-                    is_authenticated: false,
-                },
-                {
-                    path: routes.mt5,
-                    component: Trader,
-                    getTitle: () => localize('MT5'),
-                    is_authenticated: false,
-                },
                 {
                     path: routes.contract,
                     component: Trader,
diff --git a/packages/reports/build/config.js b/packages/reports/build/config.js
index 3e8e4a47414f..b224aab06cec 100644
--- a/packages/reports/build/config.js
+++ b/packages/reports/build/config.js
@@ -24,20 +24,6 @@ const htmlOutputConfig = () => ({
           },
 });
 
-const htmlInjectConfig = () => ({
-    links: [
-        {
-            path: 'public/images/favicons',
-            glob: '*',
-            globPath: path.resolve(__dirname, '../src/public/images/favicons'),
-            attributes: {
-                rel: 'icon',
-            },
-        },
-    ],
-    append: false,
-});
-
 const cssConfig = () => ({
     filename: 'reports/css/reports.main.[contenthash].css',
     chunkFilename: 'reports/css/reports.[name].[contenthash].css',
@@ -52,7 +38,6 @@ const stylelintConfig = () => ({
 
 module.exports = {
     htmlOutputConfig,
-    htmlInjectConfig,
     cssConfig,
     stylelintConfig,
     generateSWConfig,
diff --git a/packages/reports/build/constants.js b/packages/reports/build/constants.js
index 71d9f7451684..aeb4f319b524 100644
--- a/packages/reports/build/constants.js
+++ b/packages/reports/build/constants.js
@@ -1,6 +1,6 @@
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const CopyPlugin = require('copy-webpack-plugin');
+// const CopyPlugin = require('copy-webpack-plugin');
 // const HtmlWebPackPlugin = require('html-webpack-plugin');
 // const HtmlWebpackTagsPlugin = require('html-webpack-tags-plugin');
 const IgnorePlugin = require('webpack').IgnorePlugin;
@@ -12,13 +12,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 
-const {
-    copyConfig,
-    cssConfig,
-    // htmlInjectConfig,
-    // htmlOutputConfig,
-    stylelintConfig,
-} = require('./config');
+const { cssConfig, stylelintConfig } = require('./config');
 const {
     css_loaders,
     file_loaders,
diff --git a/packages/reports/build/webpack.config.js b/packages/reports/build/webpack.config.js
index 08ee9a20df71..c436373ec902 100644
--- a/packages/reports/build/webpack.config.js
+++ b/packages/reports/build/webpack.config.js
@@ -45,7 +45,6 @@ module.exports = function (env) {
                 '@deriv/components': '@deriv/components',
                 '@deriv/translations': '@deriv/translations',
                 '@deriv/deriv-charts': '@deriv/deriv-charts',
-                '@deriv/account': '@deriv/account',
             },
             /^@deriv\/shared\/.+$/,
             /^@deriv\/components\/.+$/,
diff --git a/packages/reports/package.json b/packages/reports/package.json
index 979971f0c5f1..fa59399f59ea 100644
--- a/packages/reports/package.json
+++ b/packages/reports/package.json
@@ -83,11 +83,9 @@
       "webpack-node-externals": "^2.5.2"
     },
     "dependencies": {
-      "@deriv/account": "^1.0.0",
       "@deriv/api-types": "1.0.48",
       "@deriv/components": "^1.0.0",
       "@deriv/deriv-api": "^1.0.8",
-      "@deriv/deriv-charts": "^0.5.1",
       "@deriv/shared": "^1.0.0",
       "@deriv/translations": "^1.0.0",
       "@types/classnames": "^2.2.11",
diff --git a/packages/reports/src/Components/Routes/binary-link.jsx b/packages/reports/src/Components/Routes/binary-link.jsx
index be396321f25f..55f99c6324b8 100644
--- a/packages/reports/src/Components/Routes/binary-link.jsx
+++ b/packages/reports/src/Components/Routes/binary-link.jsx
@@ -6,9 +6,10 @@ import getRoutesConfig from 'Constants/routes-config';
 import { findRouteByPath, normalizePath } from './helpers';
 
 const BinaryLink = ({ active_class, to, children, ...props }) => {
-    const { is_dashboard } = React.useContext(PlatformContext);
+    const { is_appstore } = React.useContext(PlatformContext);
+
     const path = normalizePath(to);
-    const route = findRouteByPath(path, getRoutesConfig({ is_dashboard }));
+    const route = findRouteByPath(path, getRoutesConfig({ is_appstore }));
 
     if (!route) {
         throw new Error(`Route not found: ${to}`);
diff --git a/packages/reports/src/Components/Routes/binary-routes.jsx b/packages/reports/src/Components/Routes/binary-routes.jsx
index a75cc6de0f81..5a1f542af729 100644
--- a/packages/reports/src/Components/Routes/binary-routes.jsx
+++ b/packages/reports/src/Components/Routes/binary-routes.jsx
@@ -6,7 +6,7 @@ import getRoutesConfig from '../../Constants/routes-config';
 import RouteWithSubRoutes from './route-with-sub-routes.jsx';
 
 const BinaryRoutes = props => {
-    const { is_dashboard } = React.useContext(PlatformContext);
+    const { is_appstore } = React.useContext(PlatformContext);
 
     return (
         <React.Suspense
@@ -19,7 +19,7 @@ const BinaryRoutes = props => {
             }}
         >
             <Switch>
-                {getRoutesConfig({ is_dashboard }).map(route => (
+                {getRoutesConfig({ is_appstore }).map(route => (
                     <RouteWithSubRoutes key={route.path} {...route} {...props} />
                 ))}
             </Switch>
diff --git a/packages/reports/src/sass/app.scss b/packages/reports/src/sass/app.scss
index 841cbe4696ac..1c16b5aa6396 100644
--- a/packages/reports/src/sass/app.scss
+++ b/packages/reports/src/sass/app.scss
@@ -2,7 +2,6 @@
 @import 'app/_common/layout/trader-layouts';
 
 // Drawers
-@import 'app/_common/drawer/contract-drawer';
 @import 'app/_common/drawer/positions-drawer';
 @import 'app/_common/drawer/positions-modal-card';
 
@@ -14,25 +13,12 @@
 @import 'app/_common/components/allow-equals';
 //@import 'app/_common/components/calendar'; // TODO: [move-to-components] Calendar component should be moved
 @import 'app/_common/components/card-list';
-@import 'app/_common/components/contract-audit';
-@import 'app/_common/components/contract-replay';
-@import 'app/_common/components/contract-type-dialog';
-@import 'app/_common/components/contract-type-widget';
-@import 'app/_common/components/contract-type-list';
-@import 'app/_common/components/contract-type-info';
-@import 'app/_common/components/contract-type-no-result';
 //@import 'app/_common/components/date-picker'; // TODO: [move-to-components] Datepicker component should be moved
-@import 'app/_common/components/market-is-closed-overlay';
 @import 'app/_common/components/market-symbol-icon';
 @import 'app/_common/components/number-selector';
-@import 'app/_common/components/popconfirm';
-@import 'app/_common/components/purchase-button';
 @import 'app/_common/components/range-slider';
-@import 'app/_common/components/toggle-button';
 
 // Modules
-@import 'app/modules/contract';
 @import 'app/modules/contract/bottom-widgets';
 @import 'app/modules/portfolio';
 @import 'app/modules/smart-chart';
-@import 'app/modules/trading';
diff --git a/packages/reports/src/sass/app/_common/components/contract-audit.scss b/packages/reports/src/sass/app/_common/components/contract-audit.scss
deleted file mode 100644
index c2499691fbb3..000000000000
--- a/packages/reports/src/sass/app/_common/components/contract-audit.scss
+++ /dev/null
@@ -1,101 +0,0 @@
-/** @define contract-audit; */
-$HEIGHT: calc(100vh - 34em);
-
-.contract-audit {
-    &__wrapper {
-        border-radius: $BORDER_RADIUS;
-        opacity: 1;
-        flex: 1;
-        overflow: hidden;
-        background-color: var(--general-main-1);
-        color: var(--text-prominent);
-        display: flex;
-        margin-bottom: 0.8rem;
-
-        /* postcss-bem-linter: ignore */
-        .dc-tabs {
-            height: 100%;
-            width: 100%;
-            display: flex;
-            flex-direction: column;
-            /* postcss-bem-linter: ignore */
-            &__content {
-                display: flex;
-                height: calc(100% - 4rem);
-                /* postcss-bem-linter: ignore */
-                .dc-themed-scrollbars {
-                    flex: 1;
-                }
-            }
-        }
-        /* postcss-bem-linter: ignore */
-        .dc-themed-scrollbars {
-            width: 100%;
-        }
-    }
-    &__grid {
-        display: flex;
-        padding: 0.8rem 0;
-
-        &:not(:first-child) {
-            border-top: 1px solid var(--general-section-2);
-        }
-    }
-    &__icon {
-        display: flex;
-        align-items: flex-start;
-        margin-right: 8px;
-    }
-    &__item {
-        display: flex;
-        flex-direction: column;
-        margin: 0 4px;
-    }
-    &__label {
-        white-space: nowrap;
-        max-width: 90px;
-    }
-    &__value-wrapper {
-        display: flex;
-        flex-direction: column;
-    }
-    &__value,
-    &__value2 {
-        padding-top: 2px;
-    }
-    &__timestamp {
-        align-self: center;
-        margin-left: auto;
-
-        &-value {
-            display: block;
-        }
-    }
-    &__empty {
-        display: flex;
-        height: 100%;
-        width: 100%;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        padding: 16px;
-
-        &-header {
-            font-size: 1.4rem;
-            font-weight: bold;
-            text-align: center;
-            color: var(--text-less-prominent);
-            padding: 8px;
-        }
-    }
-    &__tabs {
-        &-content {
-            padding: 0.8rem 1.6rem;
-            flex: 1;
-
-            @include mobile {
-                overflow-y: auto;
-            }
-        }
-    }
-}
diff --git a/packages/reports/src/sass/app/_common/components/contract-replay.scss b/packages/reports/src/sass/app/_common/components/contract-replay.scss
deleted file mode 100644
index 1680947557a9..000000000000
--- a/packages/reports/src/sass/app/_common/components/contract-replay.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.dc-vertical-tab {
-    &__action-bar {
-        width: 100%;
-        display: flex;
-        flex-flow: row-reverse nowrap;
-        justify-content: space-between;
-        align-items: center;
-        padding: 16px;
-
-        &--icon {
-            @include colorIcon(var(--text-general));
-        }
-        &-wrapper {
-            cursor: pointer;
-            padding: 4px 4px 2px;
-            border-radius: $BORDER_RADIUS;
-            margin-left: auto;
-
-            &:hover {
-                background: var(--general-hover);
-            }
-        }
-    }
-}
diff --git a/packages/reports/src/sass/app/_common/components/contract-type-dialog.scss b/packages/reports/src/sass/app/_common/components/contract-type-dialog.scss
deleted file mode 100644
index 2215f46d3289..000000000000
--- a/packages/reports/src/sass/app/_common/components/contract-type-dialog.scss
+++ /dev/null
@@ -1,101 +0,0 @@
-/** @define contract-type-dialog; */
-.contract-type-dialog {
-    right: 0.4em;
-    width: 100%;
-    pointer-events: none;
-    position: absolute;
-    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.3s;
-    user-select: none;
-    opacity: 0;
-    height: 0;
-    z-index: 999;
-
-    &__wrapper {
-        position: absolute;
-        width: 290px;
-        right: calc(100% + 10px);
-        top: -66px;
-        display: grid;
-        grid-auto-columns: 1fr;
-        z-index: 2;
-        border-radius: 4px;
-        background: var(--general-main-2);
-        box-shadow: 0 2px 8px 0 var(--shadow-menu);
-        min-width: 560px;
-        height: 680px;
-        max-height: calc(100vh - 100px);
-        overflow: hidden;
-
-        /* postcss-bem-linter: ignore */
-        .dc-vertical-tab {
-            max-height: 680px;
-        }
-        /* postcss-bem-linter: ignore */
-        .dc-vertical-tab__action-bar {
-            flex-flow: row;
-            border-bottom: 2px solid var(--general-section-1);
-            height: 56px;
-            width: 320px;
-
-            /* postcss-bem-linter: ignore */
-            .dc-input {
-                margin-bottom: 0;
-
-                /* postcss-bem-linter: ignore */
-                &__field {
-                    padding: 0.8rem 1.2rem 0.8rem 3.6rem;
-                    height: 3.2rem;
-
-                    /* postcss-bem-linter: ignore */
-                    &::-moz-placeholder {
-                        line-height: 16px;
-                    }
-                }
-                /* postcss-bem-linter: ignore */
-                &__leading-icon {
-                    top: 0.8rem;
-                }
-                /* postcss-bem-linter: ignore */
-                &__trailing-icon {
-                    cursor: pointer;
-                }
-            }
-        }
-        /* postcss-bem-linter: ignore */
-        .dc-vertical-tab__content {
-            padding: 0 !important;
-
-            /* postcss-bem-linter: ignore */
-            &-container {
-                max-height: calc(100% - 56px);
-                height: calc(100% - 56px);
-            }
-        }
-        /* postcss-bem-linter: ignore */
-        .dc-vertical-tab__tab {
-            min-width: 240px;
-
-            /* postcss-bem-linter: ignore */
-            .dc-vertical-tab__header-title {
-                height: 56px;
-            }
-        }
-        /* postcss-bem-linter: ignore */
-        .contract-type-info__wrapper {
-            height: calc(100% - 2.4rem - 18px);
-        }
-    }
-    &--enter,
-    &--exit {
-        transform: translate3d(20%, 0, 0);
-        pointer-events: none;
-        opacity: 0;
-        height: 0;
-    }
-    &--enterDone {
-        transform: translate3d(0, 0, 0);
-        max-height: 100%;
-        opacity: 1;
-        pointer-events: auto;
-    }
-}
diff --git a/packages/reports/src/sass/app/_common/components/contract-type-info.scss b/packages/reports/src/sass/app/_common/components/contract-type-info.scss
deleted file mode 100644
index ed853e69740a..000000000000
--- a/packages/reports/src/sass/app/_common/components/contract-type-info.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-/** @define contract-type-info; */
-.contract-type-info {
-    overflow: hidden;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-
-    & .dc-carousel {
-        width: 100%;
-    }
-    &__card {
-        min-height: calc(100vh - 210px);
-        max-height: calc(100vh - 268px);
-        display: flex;
-        flex-direction: column;
-        padding: 0.4rem 1rem;
-        @media screen and (min-height: 768px) and (max-height: 820px) {
-            min-height: calc(100vh - 288px);
-        }
-        @media screen and (min-height: 821px) {
-            min-height: 535px;
-        }
-    }
-    &__content {
-        overflow: hidden;
-
-        /* postcss-bem-linter: ignore */
-        h2 {
-            @include typeface(--paragraph-left-bold-black, none);
-            margin-bottom: 0.8rem;
-            color: var(--text-prominent);
-        }
-        /* postcss-bem-linter: ignore */
-        p,
-        ul li {
-            @include typeface(--paragraph-left-normal-black, none);
-            margin-bottom: 1.6rem;
-            color: var(--text-general);
-        }
-        /* postcss-bem-linter: ignore */
-        ul {
-            margin-left: 1.6rem;
-            list-style: disc;
-
-            /* postcss-bem-linter: ignore */
-            li {
-                margin-bottom: 0.8rem;
-            }
-        }
-    }
-    &__gif {
-        width: 100%;
-        height: 148px;
-        border-radius: 4px;
-    }
-    &__action-bar {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-    }
-    &__title {
-        margin: auto;
-        cursor: default;
-    }
-    &__nav {
-        display: flex;
-        align-items: center;
-        width: 320px;
-        padding: 0 2.4rem;
-        overflow: hidden;
-        margin-bottom: 2.4rem;
-
-        &-list {
-            display: inline-block;
-            text-align: center;
-            margin: 0 auto;
-            position: relative;
-        }
-        &-item {
-            width: 0.8rem;
-            height: 0.8rem;
-            border-radius: 50%;
-            display: inline-block;
-            margin: 0 0.8rem;
-            cursor: pointer;
-            background-color: var(--text-disabled);
-
-            &--active {
-                position: absolute;
-                top: 0;
-                left: 0;
-                cursor: initial;
-                transition: transform 0.3s linear;
-                background-color: var(--brand-red-coral);
-            }
-        }
-    }
-    &__icon {
-        cursor: pointer;
-    }
-    &__scrollbars {
-        margin-top: 2.4rem;
-        margin-bottom: auto;
-    }
-    &__button {
-        margin-top: 2.4rem;
-    }
-}
diff --git a/packages/reports/src/sass/app/_common/components/contract-type-list.scss b/packages/reports/src/sass/app/_common/components/contract-type-list.scss
deleted file mode 100644
index d31350ae6c0b..000000000000
--- a/packages/reports/src/sass/app/_common/components/contract-type-list.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-/** @define contract-type-list; */
-.contract-type-list {
-    padding: 1.6rem;
-
-    &__label {
-        @include typeface(--paragraph-left-bold-black);
-        color: var(--text-prominent);
-        margin-bottom: 0.8rem;
-        margin-left: 1.6rem;
-    }
-    &:last-child {
-        border-bottom: none;
-    }
-    &__contracts-wrapper {
-        margin-bottom: 1.4rem;
-    }
-    @include mobile {
-        border-bottom: 4px solid var(--border-disabled);
-    }
-}
-
-/** @define contract-type-item */
-.contract-type-item {
-    width: 100%;
-    cursor: pointer;
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 0.8rem 1.6rem;
-    box-sizing: border-box;
-    transition: transform 0.3s opacity 0.3s;
-    color: var(--text-general);
-    border-radius: 4px;
-
-    &:hover {
-        background-color: var(--state-hover);
-
-        .contract-type-item__icon {
-            display: block;
-        }
-    }
-    &__title {
-        padding-left: 1.6rem;
-    }
-    &__icon {
-        display: none;
-        margin-left: auto;
-
-        /* postcss-bem-linter: ignore */
-        .dc-icon {
-            pointer-events: none;
-        }
-        &:hover {
-            /* postcss-bem-linter: ignore */
-            .dc-icon {
-                pointer-events: none;
-            }
-        }
-    }
-    &--selected {
-        background: var(--state-active);
-        color: var(--text-prominent);
-
-        &:hover {
-            background: var(--state-active);
-        }
-        .contract-type-item__title {
-            font-weight: bold;
-            color: var(--text-prominent);
-        }
-        .contract-type-item__icon {
-            /* postcss-bem-linter: ignore */
-            .dc-icon {
-                pointer-events: none;
-            }
-            &:hover {
-                /* postcss-bem-linter: ignore */
-                .dc-icon {
-                    pointer-events: none;
-                }
-            }
-        }
-    }
-    &__icon-wrapper {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-
-        /* postcss-bem-linter: ignore */
-        .category-wrapper + .category-wrapper {
-            margin-left: 0.4rem;
-        }
-    }
-}
diff --git a/packages/reports/src/sass/app/_common/components/contract-type-no-result.scss b/packages/reports/src/sass/app/_common/components/contract-type-no-result.scss
deleted file mode 100644
index 111e4fa1d1b6..000000000000
--- a/packages/reports/src/sass/app/_common/components/contract-type-no-result.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-/** @define no-results-found; weak */
-.no-results-found {
-    display: flex;
-    flex-direction: column;
-    padding: 2.4rem 0.8rem;
-    justify-content: center;
-    align-content: center;
-    text-align: center;
-
-    &__title {
-        font-size: var(--text-size-xs);
-        font-weight: normal;
-        font-style: normal;
-        line-height: 1.43;
-        letter-spacing: normal;
-        text-align: center;
-        margin-bottom: 0.8rem;
-        color: var(--text-general);
-    }
-    &__subtitle {
-        letter-spacing: normal;
-        margin: 0;
-    }
-}
diff --git a/packages/reports/src/sass/app/_common/components/contract-type-widget.scss b/packages/reports/src/sass/app/_common/components/contract-type-widget.scss
deleted file mode 100644
index 71fcea8eed8c..000000000000
--- a/packages/reports/src/sass/app/_common/components/contract-type-widget.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-/** @define contract-type-widget; weak */
-.contract-type-widget {
-    position: relative;
-    z-index: 2;
-    border-radius: 4px;
-    transition: transform 0.3s, opacity 0.3s;
-    color: var(--text-prominent);
-    background: var(--fill-normal);
-    border: 1px solid var(--fill-normal);
-
-    &__display {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        flex-direction: row;
-        padding: 1.6rem;
-
-        /* postcss-bem-linter: ignore */
-        span[name='contract_type'] {
-            @include typeface(--paragraph-left-normal-black);
-            color: var(--text-prominent);
-            font-weight: bold;
-            vertical-align: middle;
-            padding-left: 0.4em;
-        }
-        &:hover,
-        &:focus {
-            border-color: var(--border-hover);
-            outline: none;
-        }
-        &--clicked {
-            border-color: var(--border-active);
-
-            .contract-type-widget__select-arrow {
-                transform: rotate(-90deg);
-            }
-        }
-    }
-    &__select-arrow {
-        display: inline-block;
-        font-style: normal;
-        vertical-align: baseline;
-        text-align: center;
-        text-transform: none;
-        text-rendering: optimizeLegibility;
-        position: absolute;
-        pointer-events: none;
-        top: 37%;
-        left: 0.6em;
-        line-height: 1;
-        transition: transform 0.25s ease;
-        transform: rotate(90deg);
-        transform-origin: 45% 45;
-        color: var(--text-prominent);
-        @extend %inline-icon;
-    }
-    &__icon-wrapper {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        padding-left: 1.2em;
-
-        /* postcss-bem-linter: ignore */
-        .category-wrapper {
-            margin: 0 0.2em;
-            background-color: var(--general-section-1);
-
-            /* postcss-bem-linter: ignore */
-            .category-type {
-                /* postcss-bem-linter: ignore */
-                .transparent {
-                    fill: var(--general-section-1);
-                }
-                /* postcss-bem-linter: ignore */
-                .color1-fill {
-                    fill: var(--brand-red-coral);
-                }
-                /* postcss-bem-linter: ignore */
-                .color2-fill {
-                    fill: var(--brand-secondary);
-                }
-            }
-        }
-    }
-    &:hover {
-        border-color: var(--border-hover);
-    }
-    &:active,
-    &:focus,
-    &--show {
-        outline: none;
-        border-radius: 4px;
-        border-color: var(--border-active);
-    }
-    @include mobile {
-        margin-bottom: 0.8rem;
-        height: 4rem;
-
-        &--multiplier {
-            margin-bottom: 0.6rem;
-        }
-        .contract-type-widget__display {
-            padding: 0.8rem;
-        }
-    }
-}
diff --git a/packages/reports/src/sass/app/_common/components/market-is-closed-overlay.scss b/packages/reports/src/sass/app/_common/components/market-is-closed-overlay.scss
deleted file mode 100644
index 64a68ba5ea8d..000000000000
--- a/packages/reports/src/sass/app/_common/components/market-is-closed-overlay.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-/** @define .market-is-closed-overlay */
-.market-is-closed-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    padding: 0;
-    background-color: var(--overlay-inside-dialog);
-    z-index: 1000;
-
-    &--loading {
-        display: none;
-    }
-    &__main-heading {
-        margin-bottom: 2rem;
-    }
-    &__open-date,
-    &__main-message {
-        margin-bottom: 2rem;
-    }
-    &__open-at,
-    &__come-back {
-        &--main-page {
-            margin-bottom: 1rem;
-        }
-    }
-    &__separator {
-        margin-top: 1rem;
-        border: 2px solid var(--general-section-1);
-        width: 19.2rem;
-        margin-bottom: 2rem;
-    }
-    &__button {
-        height: 40px;
-        margin-top: 1rem;
-    }
-
-    @include mobile {
-        position: unset;
-        top: unset;
-        left: unset;
-        overflow-y: scroll;
-        padding-top: 16rem;
-
-        &__button {
-            min-height: 4rem;
-        }
-    }
-}
diff --git a/packages/reports/src/sass/app/_common/components/popconfirm.scss b/packages/reports/src/sass/app/_common/components/popconfirm.scss
deleted file mode 100644
index fd43c5da1218..000000000000
--- a/packages/reports/src/sass/app/_common/components/popconfirm.scss
+++ /dev/null
@@ -1,201 +0,0 @@
-/** @define popconfirm */
-//.popconfirm {
-//    position: absolute;
-//    left: 50%;
-//    bottom: 4em;
-//    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.14);
-//    width: 348px;
-//    min-height: 9em;
-//    font-weight: 500;
-//    border-radius: 4px;
-//    transform: scale(0, 0) translate(-50%, 0);
-//    opacity: 0;
-//    transform-origin: left bottom;
-//    transition: all 0.2s;
-//    z-index: 3;
-//    @include themify($themes) {
-//        background: themed('container_secondary_color');
-//    }
-//
-//    &--open {
-//        transform: scale(1, 1) translate(-50%, 0);
-//        opacity: 1;
-//    }
-//    &__button {
-//        margin: 0 0.8em;
-//        box-shadow: none;
-//        text-decoration: none;
-//        display: flex;
-//        align-items: center;
-//        justify-content: center;
-//        transition: background 0.2s, color 0.2s;
-//        @include themify($themes) {
-//            background: themed('container_secondary_color');
-//        }
-//
-//        &-wrapper {
-//            display: flex;
-//            justify-content: flex-end;
-//        }
-//        &-text {
-//            @include themify($themes) {
-//                color: themed('text_primary_color');
-//            }
-//            font-size: 1.2em;
-//            font-weight: bold;
-//        }
-//        &:hover {
-//            @include themify($themes) {
-//                background: themed('tab_hover_color');
-//
-//                .popconfirm__button-text {
-//                    color: themed('text_color');
-//                }
-//            }
-//        }
-//    }
-//    &__title {
-//        margin: 0.8em;
-//        padding: 0.8em;
-//        display: flex;
-//        flex-direction: row;
-//        align-items: center;
-//
-//    }
-//    &__icon_exclamation {
-//        margin-right: 0.8em;
-//    }
-//    &__header {
-//        font-size: 1.2em;
-//        font-weight: 300;
-//        text-transform: none;
-//        padding: 0;
-//        margin: 0;
-//        line-height: 100%;
-//        @include themify($themes) {
-//            color: themed('text_color');
-//        }
-//    }
-//    &:after {
-//        // arrow pointing down
-//        position: absolute;
-//        content: '';
-//        bottom: -0.3em;
-//        left: 50%;
-//        margin-left: -0.5em;
-//        border-width: 5px;
-//        border-style: solid;
-//        transform: rotate(45deg);
-//        box-shadow: rgba(0, 0, 0, 0.05) 2px 2px 2px;
-//        @include themify($themes) {
-//            border-color: themed('container_secondary_color');
-//        }
-//    }
-//    // Alignments
-//    &--bottom {
-//        top: 4em;
-//        bottom: unset;
-//        transform-origin: left top;
-//
-//        &:after {
-//            top: -0.3em;
-//            bottom: unset;
-//            transform: rotate(-135deg);
-//        }
-//    }
-//    &--right {
-//        bottom: 50%;
-//        left: unset;
-//        right: -2em;
-//        transform-origin: right bottom;
-//        transform: scale(0, 0) translate(100%, 50%);
-//
-//        &--open {
-//            transform: scale(1, 1) translate(100%, 50%);
-//        }
-//        &:after {
-//            left: 0;
-//            bottom: 50%;
-//            transform: rotate(135deg);
-//        }
-//    }
-//    &--left {
-//        bottom: 50%;
-//        left: -2em;
-//        transform-origin: left bottom;
-//        transform: scale(0, 0) translate(-100%, 50%);
-//
-//        &--open {
-//            transform: scale(1, 1) translate(-100%, 50%);
-//        }
-//        &:after {
-//            left: unset;
-//            right: -0.3em;
-//            bottom: 45%;
-//            transform: rotate(-45deg);
-//        }
-//    }
-//    &--top-right {
-//        transform-origin: right bottom;
-//        transform: scale(0, 0) translate(0, 0);
-//        left: unset;
-//        right: 0;
-//
-//        &--open {
-//            transform: scale(1, 1) translate(0, 0);
-//        }
-//        &:after {
-//            left: unset;
-//            right: 5%;
-//        }
-//    }
-//    &--top-left {
-//        transform-origin: left bottom;
-//        transform: scale(0, 0) translate(0, 0);
-//        left: 0;
-//
-//        &--open {
-//            transform: scale(1, 1) translate(0, 0);
-//        }
-//        &:after {
-//            left: 8%;
-//        }
-//    }
-//    &--bottom-right {
-//        top: 4em;
-//        bottom: unset;
-//        transform-origin: right top;
-//        transform: scale(0, 0) translate(0, 0);
-//        left: unset;
-//        right: 0;
-//
-//        &--open {
-//            transform: scale(1, 1) translate(0, 0);
-//        }
-//        &:after {
-//            top: -0.3em;
-//            bottom: unset;
-//            left: unset;
-//            right: 5%;
-//            transform: rotate(-135deg);
-//
-//        }
-//    }
-//    &--bottom-left {
-//        top: 4em;
-//        bottom: unset;
-//        transform-origin: left top;
-//        transform: scale(0, 0) translate(0, 0);
-//        left: 0;
-//
-//        &--open {
-//            transform: scale(1, 1) translate(0, 0);
-//        }
-//        &:after {
-//            top: -0.3em;
-//            left: 8%;
-//            bottom: unset;
-//            transform: rotate(-135deg);
-//        }
-//    }
-//}
diff --git a/packages/reports/src/sass/app/_common/components/purchase-button.scss b/packages/reports/src/sass/app/_common/components/purchase-button.scss
deleted file mode 100644
index 177b2ae04363..000000000000
--- a/packages/reports/src/sass/app/_common/components/purchase-button.scss
+++ /dev/null
@@ -1,327 +0,0 @@
-/** @define btn-purchase */
-.btn-purchase {
-    position: relative;
-    background-color: var(--purchase-section-1);
-    overflow: hidden;
-    height: 56px;
-    width: 100%;
-    margin: 5px 0 0;
-    padding: 0;
-    text-align: left;
-    transition: transform 0.25s ease;
-    display: flex;
-    z-index: 1;
-    touch-action: manipulation;
-    cursor: pointer;
-    white-space: nowrap;
-    border: 0;
-    border-radius: $BORDER_RADIUS;
-    outline: 0;
-    font-size: 1rem;
-
-    @include mobile {
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: center;
-        margin: initial;
-        height: 70px;
-
-        &__top,
-        &__bottom {
-            height: 50%;
-            flex: 1 1 auto;
-            display: flex;
-            flex-direction: row;
-            justify-content: space-around;
-            align-items: center;
-        }
-        &__top {
-            width: 50%;
-        }
-        &__bottom {
-            width: 40vw; // TODO remove this when find a solution for fill-width inside flex.
-        }
-        &:hover {
-            transform: none !important;
-        }
-        &--disabled,
-        &[disabled] {
-            opacity: 0.32;
-        }
-        &--swoosh {
-            transform: none !important;
-        }
-        &__error {
-            position: absolute;
-            padding: 0.8rem;
-            width: 100%;
-            height: 100%;
-            color: var(--text-colored-background);
-            background-color: var(--status-danger);
-            justify-content: center;
-            align-items: center;
-            line-height: 1.4;
-            z-index: 2;
-            border-radius: $BORDER_RADIUS;
-            max-height: 90px;
-            overflow: hidden;
-            font-weight: bold;
-        }
-    }
-
-    &__icon_wrapper {
-        @extend %inline-icon.white;
-        /* postcss-bem-linter: ignore */
-        .color1-fill {
-            fill: var(--text-colored-background);
-        }
-        /* postcss-bem-linter: ignore */
-        .color2-fill {
-            fill: var(--text-colored-background);
-        }
-        @include mobile {
-            margin-right: 0.5rem;
-        }
-    }
-    &__info {
-        color: var(--text-colored-background);
-        text-align: left;
-        position: relative;
-        display: flex;
-        flex-grow: 1;
-        align-items: center;
-        padding-left: 10px;
-        height: 56px;
-    }
-    &__info--left {
-        background-color: var(--purchase-main-1);
-        width: 40%;
-        transition: transform linear 0.25s;
-        z-index: 2;
-
-        .btn-purchase__text_wrapper {
-            margin-left: 24px;
-            position: absolute;
-        }
-    }
-    &__info--right {
-        width: 45%;
-        padding-right: 1rem;
-        background-color: transparent;
-        display: flex;
-        justify-content: flex-end;
-
-        .btn-purchase__text {
-            opacity: 1;
-            transition: 0.3s;
-        }
-    }
-    &__effect-detail {
-        position: absolute;
-        background-color: var(--purchase-main-1);
-        transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
-        width: 116px;
-        height: 100%;
-        z-index: 1;
-    }
-    &__effect-detail--arrow {
-        content: '';
-        width: 55px;
-        transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
-        transform: rotate(45deg);
-        height: 100%;
-        background: var(--purchase-main-1);
-        left: 80px;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        display: inline-block;
-    }
-    &[disabled]:hover {
-        cursor: initial;
-        transform: none;
-    }
-    &:hover:not(&--disabled):not([disabled]) {
-        transform: translate3d(0, -4px, 0);
-    }
-    &__type-wrapper {
-        display: flex;
-        align-items: center;
-        transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
-        transform: none;
-    }
-    &__shadow-wrapper {
-        position: relative;
-
-        .btn-purchase__box-shadow {
-            position: absolute;
-            width: 100%;
-            bottom: 14px;
-            height: 50%;
-            z-index: 0;
-            opacity: 0.9;
-            box-shadow: 0 16px 14px 0 var(--shadow-menu);
-            transition: opacity 0.25s linear;
-            pointer-events: none;
-        }
-        &--disabled {
-            pointer-events: none;
-
-            &:hover {
-                transform: none;
-            }
-        }
-    }
-    &:active:not(&--disabled):not([disabled]),
-    &:focus:not(&--disabled):not([disabled]) {
-        transform: translate3d(0, -4px, 0);
-    }
-    &--swoosh {
-        transform: translate3d(0, -4px, 0);
-
-        .btn-purchase__type-wrapper {
-            transform: translate3d(55px, 0, 0);
-        }
-        .btn-purchase__effect-detail {
-            transform: scale3d(3, 1, 1);
-
-            &--arrow {
-                transform: translate3d(120px, 0, 0) rotate(45deg);
-            }
-        }
-    }
-    &--1 {
-        background-color: var(--purchase-section-1);
-
-        .btn-purchase__info--left {
-            background-color: var(--purchase-main-1);
-        }
-        .btn-purchase__effect-detail {
-            background: var(--purchase-main-1);
-
-            &--arrow {
-                background: var(--purchase-main-1);
-            }
-        }
-
-        @include mobile {
-            background: var(--purchase-section-1);
-            background: linear-gradient(
-                0deg,
-                var(--purchase-section-1) 0%,
-                var(--purchase-section-1) 50%,
-                var(--purchase-main-1) 50%,
-                var(--purchase-main-1) 100%
-            );
-        }
-    }
-    &--2 {
-        background-color: var(--purchase-section-2);
-
-        .btn-purchase__info--left {
-            background-color: var(--purchase-main-2);
-        }
-        .btn-purchase__effect-detail {
-            background: var(--purchase-main-2);
-
-            &--arrow {
-                background: var(--purchase-main-2);
-            }
-        }
-        @include mobile {
-            background: var(--purchase-section-2);
-            background: linear-gradient(
-                0deg,
-                var(--purchase-section-2) 0%,
-                var(--purchase-section-2) 50%,
-                var(--purchase-main-2) 50%,
-                var(--purchase-main-2) 100%
-            );
-        }
-    }
-    &--disabled,
-    &[disabled] {
-        cursor: default;
-
-        &:after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(255, 255, 255, 0.32);
-            z-index: 4;
-            pointer-events: none;
-        }
-    }
-    &--animated--slide {
-        .btn-purchase__icon_wrapper,
-        .btn-purchase__text_wrapper {
-            @extend .loader;
-        }
-        .btn-purchase__icon,
-        .btn-purchase__text {
-            @extend .loader--loading;
-        }
-        .btn-purchase__icon_wrapper {
-            width: 16px;
-            height: 16px;
-        }
-        .btn-purchase__text_wrapper {
-            width: 56px;
-            height: 8px;
-
-            .btn-purchase__text {
-                display: block;
-            }
-        }
-    }
-    &--animated--fade &__info--right &__text {
-        opacity: 0;
-    }
-    &__shadow-wrapper:hover:after {
-        opacity: 0;
-    }
-    &--multiplier {
-        .btn-purchase__info--left {
-            width: 35%;
-            flex: none;
-        }
-        .btn-purchase__effect-detail--arrow {
-            left: 40px;
-        }
-        &.btn-purchase--swoosh {
-            .btn-purchase {
-                &__effect-detail {
-                    transform: scale3d(5, 1, 1);
-
-                    &--arrow {
-                        transform: translate3d(160px, 0, 0) rotate(45deg);
-                    }
-                }
-                &__type-wrapper {
-                    transform: translate3d(70px, 0, 0);
-                }
-            }
-        }
-        .btn-purchase__effect-detail {
-            width: 72px;
-        }
-        .btn-purchase__top {
-            @include mobile {
-                justify-content: center;
-            }
-        }
-        .trade-container__price-info {
-            @include mobile {
-                justify-content: center;
-            }
-        }
-        @include mobile {
-            &-deal-cancel {
-                height: 64px;
-            }
-        }
-    }
-}
diff --git a/packages/reports/src/sass/app/_common/drawer/contract-drawer.scss b/packages/reports/src/sass/app/_common/drawer/contract-drawer.scss
deleted file mode 100644
index 2d93785b3cef..000000000000
--- a/packages/reports/src/sass/app/_common/drawer/contract-drawer.scss
+++ /dev/null
@@ -1,131 +0,0 @@
-$header-height: 4em;
-
-.contract-drawer {
-    width: $POSITIONS_DRAWER_WIDTH;
-    // removing 2px below for borders
-    height: calc(100vh - #{$HEADER_HEIGHT} - #{$FOOTER_HEIGHT} - 2px - (#{$POSITIONS_DRAWER_MARGIN} * 4));
-    z-index: 2;
-    padding: 0 0.8rem;
-    box-sizing: border-box;
-    will-change: transform, opacity;
-    transition: opacity 0.3s ease, transform 0.3s ease;
-    border-radius: $BORDER_RADIUS;
-    border: 1px solid var(--general-section-1);
-    background: var(--general-section-1);
-    color: var(--text-prominent);
-
-    svg {
-        @extend %inline-icon;
-    }
-    h2 {
-        margin-left: 8px;
-        text-transform: none;
-        color: var(--text-prominent);
-    }
-    .currency-badge {
-        margin-bottom: 5px;
-    }
-    &--contract-mode {
-        &:before {
-            background: var(--general-section-1);
-            content: '';
-            position: absolute;
-            top: 38px;
-            left: -3px;
-            width: calc(100% + 6px);
-            height: calc(100% - 32px);
-            filter: blur(3px);
-        }
-    }
-    &__heading {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        padding: 0.5em;
-        margin-left: -8px;
-        @include typeface(--title-left-bold-black);
-        color: var(--text-general);
-
-        &-btn {
-            padding: 4px 8px 0;
-            margin-bottom: -4px;
-            cursor: pointer;
-            border-radius: $BORDER_RADIUS;
-            background: var(--general-section-1);
-
-            &:hover {
-                background: var(--general-hover);
-            }
-        }
-    }
-    &__icon {
-        margin-right: 16px;
-    }
-    &__body {
-        display: flex;
-        flex-direction: column;
-
-        @include desktop {
-            height: 100%;
-        }
-    }
-}
-
-/** @define .contract-card; weak */
-.contract-card {
-    &__market-closed {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        padding: 0;
-        background-image: var(--contract-gradient-danger);
-        z-index: 1000;
-
-        &__title {
-            margin-bottom: 1rem;
-        }
-        &--loading {
-            display: none;
-        }
-        &--disabled {
-            cursor: not-allowed;
-        }
-        &--hidden {
-            opacity: 0;
-        }
-    }
-    &__footer {
-        margin-bottom: 0.5rem;
-        padding: 0 0.4rem;
-
-        &-wrapper {
-            @include typeface(--small-center-normal-black);
-            color: var(--text-prominent);
-            padding: 0.8rem 0.8rem 0;
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-        }
-    }
-    &__sell-button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: transform 0.25s ease, opacity 0.25s linear;
-        border-top: 1px solid var(--general-section-1);
-
-        .dc-btn--sell,
-        .dc-btn--cancel {
-            height: 2.4rem;
-
-            @include mobile {
-                height: 3.2rem;
-            }
-        }
-    }
-}
diff --git a/packages/reports/src/sass/app/modules/mt5/cfd-dashboard.scss b/packages/reports/src/sass/app/modules/mt5/cfd-dashboard.scss
deleted file mode 100644
index c4289961409a..000000000000
--- a/packages/reports/src/sass/app/modules/mt5/cfd-dashboard.scss
+++ /dev/null
@@ -1,1539 +0,0 @@
-/*
-*  [Work In Progress]
-*  This file is a WIP and will be broken down into different files for different components before the module is enabled
-*  Class names might change, properties and values will definitely change
-* */
-
-/* stylelint-disable */
-/** @define cfd-dashboard; */
-.cfd-dashboard {
-    padding: 4.8em 0;
-    max-width: fit-content;
-    margin: 0 auto;
-
-    &__dxtrade-download {
-        background: $color-black-7;
-        border-radius: $BORDER_RADIUS;
-        text-decoration: none;
-        display: grid;
-        grid-template-columns: 32px 1fr;
-        grid-gap: 0.8rem;
-        width: 12.7rem;
-        align-items: center;
-        height: 4rem;
-        border: 1px solid #a6a6a6;
-
-        &-text {
-            display: flex;
-            flex-direction: column;
-            padding: 0.4rem 0rem 0.4rem 0.2rem;
-        }
-        &--icon {
-            margin-left: 0.6rem;
-        }
-    }
-    &--hint {
-        @include typeface(--xsmall-left-normal-black, none);
-    }
-    &__container {
-        position: relative;
-        overflow-y: auto;
-
-        .notification-messages {
-            position: fixed;
-            right: 16px;
-            top: 64px;
-        }
-    }
-    &__info {
-        background: var(--fill-disabled);
-        margin-top: 5rem;
-        font-size: 1.4rem;
-        color: var(--text-general);
-        display: grid;
-        grid-template-columns: 0.85fr 1fr 1fr;
-        height: 56px;
-        border-radius: $BORDER_RADIUS;
-
-        &-description,
-        &-copy {
-            display: flex;
-            align-items: center;
-        }
-        &-description {
-            justify-content: flex-start;
-            padding-left: 3.2rem;
-        }
-        &-copy {
-            justify-content: center;
-            font-size: 1.6rem;
-            font-weight: bold;
-            color: var(--text-prominent);
-        }
-        &-display {
-            padding-right: 0.8rem;
-        }
-        &-label {
-            padding-right: 0.4rem;
-        }
-        @include mobile {
-            display: flex;
-            height: 100%;
-            padding: 1.6rem;
-            flex-direction: column;
-            align-items: flex-start;
-
-            &-copy {
-                margin: 0 0 0.8rem;
-                font-size: 1.4rem;
-            }
-            &-description {
-                margin: 0.8rem 0 1.6rem;
-            }
-        }
-    }
-    &__welcome-message {
-        margin-bottom: 2.4rem;
-
-        &--heading {
-            @include typeface(--title-center-bold-black, none);
-            color: var(--text-general);
-        }
-    }
-    &__missing-real {
-        align-items: center;
-        background-color: var(--general-section-1);
-        display: flex;
-        justify-content: space-between;
-        margin: 2.4em 0 0;
-        max-width: 960px;
-        padding: 1.6rem;
-
-        &--heading {
-            color: var(--text-prominent);
-            line-height: 1.5;
-            margin-right: 1rem;
-
-            @include desktop {
-                white-space: nowrap;
-            }
-            @include typeface(--title-left-bold-black, none);
-            @include mobile {
-                font-size: 1.2rem;
-            }
-        }
-        &--button {
-            height: 4rem;
-        }
-        @include mobile {
-            flex-direction: column;
-            padding: 0.8rem;
-            width: calc(100vw - 3.2rem);
-
-            &--heading {
-                margin-bottom: 0.8rem;
-                margin-right: 0;
-            }
-            &--button {
-                width: 27rem;
-            }
-        }
-    }
-    &__download-center {
-        border-top: 2px solid var(--general-section-1);
-        padding-top: 2rem;
-        padding-bottom: 5.8rem;
-
-        &-options {
-            display: flex;
-            justify-content: center;
-
-            &--desktop {
-                display: block;
-                align-items: baseline;
-                flex-flow: column nowrap;
-
-                &-links {
-                    display: flex;
-                    flex-direction: column;
-                }
-                &-row {
-                    display: flex;
-                    align-items: baseline;
-                    justify-content: center;
-                    margin-bottom: 3.1rem;
-
-                    > svg:first-child {
-                        margin-bottom: 0.4rem;
-                        margin-right: 0.8rem;
-                    }
-                    a > svg {
-                        margin-top: 0.8rem;
-                        margin-right: 0.8rem;
-                    }
-                }
-                &-download {
-                    display: grid;
-                    grid-auto-flow: column;
-                    grid-gap: 0.8rem;
-                    justify-content: center;
-
-                    a {
-                        margin-top: 0.4rem;
-                    }
-                }
-            }
-            &--mobile {
-                align-items: center;
-                display: flex;
-                flex-flow: column nowrap;
-                margin-left: 4.7rem;
-
-                &-devices {
-                    margin-bottom: 1.6em;
-                    svg:first-child {
-                        margin-right: 0.8em;
-                    }
-                }
-                &-link:not(:first-child) {
-                    margin-left: 1.6rem;
-                }
-                @include mobile {
-                    margin-left: unset;
-                    margin-right: unset;
-                }
-            }
-        }
-        &--heading {
-            @include typeface(--title-center-bold-black, none);
-            color: var(--text-general);
-            line-height: 1.5;
-            margin-left: 2.1rem;
-            margin-bottom: 4.2rem;
-            @include desktop {
-                margin-left: 0;
-                text-align: center;
-            }
-        }
-        &--hint {
-            margin-top: 1.6rem;
-        }
-        @include mobile {
-            margin-bottom: 1.6rem;
-        }
-    }
-    &__maintenance {
-        @include typeface(--small-center-normal-black, none);
-        display: flex;
-        justify-content: center;
-        margin: 2.4rem 0;
-
-        &-icon {
-            margin-right: 0.8rem;
-            margin-top: 0.2rem;
-
-            @include mobile {
-                margin-top: -0.2rem;
-            }
-        }
-        &-text {
-            text-align: left;
-            line-height: 1.67;
-        }
-    }
-    &__real-accounts-wrapper {
-        display: flex;
-        flex-direction: column;
-    }
-    .notification-messages {
-        top: calc(-4.8rem + 16px);
-    }
-    @include mobile {
-        margin-top: 2.4rem;
-        padding: 0 1.6rem;
-    }
-}
-
-.cfd-attribute-describer {
-    .counter {
-        color: var(--brand-red-coral);
-        vertical-align: top;
-    }
-    @include mobile {
-        font-size: 1.2rem;
-    }
-}
-
-.cfd-compare-accounts {
-    display: flex;
-    flex-flow: column nowrap;
-    flex-grow: 1;
-    background: inherit;
-    height: 100%;
-    position: relative;
-
-    &__table {
-        @include mobile {
-            overflow-x: auto;
-        }
-    }
-
-    &__table-row {
-        grid-template-columns: var(--cfd-compare-accounts-template-columns);
-        box-shadow: inset 0 -1px 0 0 var(--general-section-1);
-    }
-    &__table-row-eu {
-        grid-template-columns: 1.5fr 2fr 2fr;
-        box-shadow: inset 0 -1px 0 0 var(--general-section-1);
-    }
-    &__star {
-        color: var(--brand-red-coral);
-    }
-    &__bullet {
-        flex: none;
-
-        &--circle {
-            background-color: var(--text-general);
-            border-radius: 100%;
-            margin-right: 1.2rem;
-            margin-left: 0.2rem;
-            margin-top: 0.8rem;
-            width: 0.4rem;
-            height: 0.4rem;
-        }
-        &--star {
-            margin-right: 1rem;
-        }
-        &-wrapper {
-            display: flex;
-            margin-bottom: 0.8rem;
-            line-height: 1.5;
-        }
-    }
-    &__footnote {
-        &-title {
-            padding-bottom: 0.8rem;
-        }
-    }
-
-    .dc-table {
-        padding: 0 30px;
-
-        &__header {
-            border-bottom: none;
-            height: 50px;
-            position: sticky;
-            top: 0;
-            background: var(--general-main-2);
-            z-index: 10;
-        }
-        &__cell,
-        &__head {
-            padding: 0.8rem;
-
-            &--fixed {
-                padding-left: 1.6rem;
-
-                @include mobile {
-                    background-color: var(--general-section-2);
-                }
-            }
-        }
-        &__cell {
-            border-bottom: none;
-            align-items: normal;
-            padding: 1rem 0.8rem;
-        }
-        &--scrollbar {
-            display: block; // Safari needs this to work properly!
-        }
-        @include desktop {
-            &__header {
-                background-color: var(--general-main-2);
-            }
-        }
-    }
-    &-modal {
-        &__wrapper {
-            display: flex;
-            justify-content: center;
-            margin-top: 2.4rem;
-        }
-    }
-    @include mobile {
-        background: var(--general-main-1);
-        height: 100%;
-        font-size: 1.2rem;
-
-        .dc-table {
-            padding: 0;
-            height: inherit;
-
-            &__cell {
-                font-size: 1.2rem;
-            }
-            &__row {
-                padding: 0;
-            }
-            &__head {
-                font-size: 1.2rem;
-                border-bottom: 2px solid var(--border-disabled);
-                background-color: var(--general-main-1);
-                margin-top: -1px;
-            }
-            &__header,
-            &__row {
-                width: 150vw;
-                grid-template-columns: 1fr 1fr 1fr 1fr;
-            }
-        }
-    }
-}
-
-.cfd-compare-account--hint {
-    color: var(--text-less-prominent);
-    font-size: 12px;
-    line-height: 1.5em;
-    width: 100%;
-    padding: 1.6rem 2.4rem 0.8rem 2.4rem;
-
-    @include mobile {
-        padding: 1.6rem;
-        border-top: 2px solid var(--border-disabled);
-    }
-}
-
-.cfd-dashboard__accounts-error {
-    background-color: var(--status-warning-transparent);
-    margin: 1.2rem 0;
-
-    &-message {
-        padding: 0.8rem 2.4rem;
-    }
-}
-
-.cfd-real-accounts-display,
-.cfd-demo-accounts-display {
-    display: grid;
-    grid-auto-flow: column;
-    grid-gap: 2.4rem;
-    justify-content: center;
-    padding-top: 2.4em;
-    height: 100%;
-
-    @include mobile {
-        display: flex;
-        gap: 0;
-        overflow-x: hidden;
-        flex-direction: column;
-        height: unset;
-    }
-}
-
-.cfd-demo-accounts-display .cfd-account-card__wrapper {
-    @include desktop {
-        height: auto;
-    }
-}
-
-.cfd-real-accounts-display {
-    transition: margin-bottom 0.3s ease-in-out;
-    margin-bottom: var(--cfd-real-acc-margin-bottom);
-
-    .dc-carousel__card,
-    .dc-carousel__wrapper {
-        padding: 0;
-    }
-
-    &--has-trade-servers {
-        .cfd-account-card__wrapper {
-            @include desktop {
-                grid-template-rows: 1fr 4rem;
-            }
-        }
-    }
-}
-
-.cfd-account-card {
-    border: solid 1px var(--border-normal);
-    border-radius: 4px;
-    display: flex;
-    flex-flow: column nowrap;
-    min-height: 37rem;
-    width: 30.4em;
-    position: relative;
-    @include desktop {
-        height: 100%;
-    }
-
-    &__wrapper {
-        display: grid;
-        grid-template-rows: 1fr;
-        height: 100%;
-        justify-content: center;
-
-        @include mobile {
-            grid-template-rows: 1fr;
-            height: fit-content;
-
-            &:not(:last-child) {
-                margin-bottom: 2.4rem;
-            }
-        }
-
-        @include desktop {
-            height: 100%;
-        }
-    }
-
-    &__logged-out {
-        min-height: 29rem;
-    }
-
-    &__add-server {
-        font-size: 1.4rem;
-        cursor: pointer;
-        display: grid;
-        grid-auto-flow: column;
-        grid-gap: 0.4rem;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        height: 4rem;
-        color: var(--text-prominent);
-
-        @include mobile {
-            height: 4rem;
-            align-content: start;
-        }
-
-        &--disabled {
-            cursor: not-allowed;
-            color: var(--text-disabled);
-
-            .cfd-account-card__add-server--icon {
-                background-color: var(--border-disabled);
-                color: var(--text-disabled);
-            }
-        }
-        &-exit,
-        &-enter-done {
-            transition: all 0.3s ease-in-out;
-            opacity: 1;
-        }
-        &-enter,
-        &-exit-done {
-            transition: all 0.3s ease-in-out;
-            opacity: 0;
-        }
-        &--icon {
-            color: var(--status-colored-background);
-            background-color: var(--brand-red-coral);
-            border-radius: 100%;
-            width: 2.4rem;
-            height: 2.4rem;
-            font-size: 1.8rem;
-            display: block;
-            text-align: center;
-            padding: 0.2rem;
-        }
-    }
-
-    &__server {
-        font-size: 1.4rem;
-        text-align: left;
-        width: 27.2rem;
-        &--value {
-            font-weight: bold;
-        }
-    }
-
-    &:hover {
-        box-shadow: 0 2px 8px 0 var(--shadow-menu);
-    }
-    &--heading {
-        @include typeface(--title-left-bold-black, none);
-        color: var(--text-general);
-        line-height: 1.5;
-    }
-    &--paragraph {
-        @include typeface(--paragraph-left-normal-black, none);
-        color: var(--text-general);
-        line-height: 1.45;
-    }
-    &--balance {
-        @include typeface(--title-left-bold-black);
-        color: var(--text-profit-success);
-    }
-    &__banner {
-        position: absolute;
-        transform: rotate(45deg);
-        border-bottom: 2.3rem solid var(--brand-red-coral);
-        border-left: 2.3rem solid transparent;
-        border-right: 2.3rem solid transparent;
-        height: 0;
-        width: 13.7rem;
-        left: 19.4rem;
-        top: 2.8rem;
-        color: var(--text-colored-background);
-        font-weight: bold;
-        line-height: 24px;
-        white-space: nowrap;
-        text-align: center;
-
-        &--demo {
-            border-bottom-color: var(--brand-secondary);
-        }
-        &--server {
-            // TODO: Add a CSS variable
-            border-bottom-color: $color-blue-2;
-        }
-        @include mobile {
-            left: calc(100vw - 14.2rem);
-        }
-    }
-    &__type {
-        display: flex;
-        padding: 1.5rem 1.6rem 1.6rem; // -1 for border
-
-        &--description {
-            display: flex;
-            margin-left: 1.6rem;
-            max-width: 19.2rem;
-            flex-direction: column;
-
-            .cfd-account-card--paragraph {
-                width: 18.3rem;
-                padding-top: 0.8rem;
-            }
-        }
-        &--has-banner {
-            .cfd-account-card--paragraph {
-                width: 15rem;
-            }
-        }
-    }
-    &__display {
-        display: flex;
-        flex-wrap: wrap;
-        width: min-content;
-        justify-content: center;
-        height: fit-content;
-
-        &-text {
-            @include typeface(--title-center-bold-black);
-            color: var(--brand-red-coral);
-            line-height: 1.5;
-            margin-top: 0.4rem;
-
-            &--top-right {
-                position: relative;
-                left: 22.2rem;
-                bottom: 7.2rem;
-                margin: 0;
-            }
-        }
-        &--fixed-height {
-            height: 64px; // don't leave space for the demo text that is moved to the top right
-        }
-    }
-    &__cta {
-        display: flex;
-        flex-direction: column;
-        margin-top: auto;
-
-        &-wrapper {
-            align-items: center;
-            display: flex;
-            flex-direction: column;
-            position: relative;
-        }
-    }
-    &__specs {
-        padding: 1.6rem;
-        width: 100%;
-
-        &-table {
-            width: 100%;
-
-            &-attribute .cfd-account-card--paragraph {
-                color: var(--text-general);
-                margin-right: 2.4rem;
-            }
-            &-data {
-                .cfd-account-card--paragraph {
-                    @include typeface(--paragraph-left-bold-black, none);
-                    line-height: 1.45;
-                }
-            }
-        }
-    }
-    &__login-specs {
-        margin: 0.8rem 0;
-        width: 100%;
-        padding: 0 1.8rem;
-
-        &-table {
-            width: 100%;
-            table-layout: fixed;
-            border-collapse: separate;
-            border-spacing: 0 0.8rem;
-
-            &-attribute {
-                width: 35%;
-                vertical-align: middle;
-                .cfd-account-card--paragraph {
-                    color: var(--text-general);
-                }
-            }
-            &-data {
-                width: 65%;
-                vertical-align: middle;
-                .cfd-account-card--paragraph {
-                    @include typeface(--paragraph-left-normal-black, none);
-                    line-height: 1.45;
-                }
-            }
-            &-row {
-                &--account-id {
-                    height: 3.6rem;
-                }
-            }
-        }
-    }
-    &__spec-box {
-        display: grid;
-        grid-template-columns: 1fr 2.4rem;
-        border: 1px solid var(--border-normal);
-        border-radius: $BORDER_RADIUS;
-    }
-    &__spec-text {
-        padding: 0.4rem;
-        font-family: Courier, monospace;
-        overflow: hidden;
-    }
-    &__spec-copy {
-        display: grid;
-        justify-content: center;
-        align-content: center;
-        border-left: 1px solid var(--border-normal);
-    }
-    &__password {
-        &-box {
-            display: grid;
-            grid-template-columns: 1fr 2.4rem;
-            border: 1px solid var(--border-normal);
-            border-radius: $BORDER_RADIUS;
-        }
-        &-text {
-            padding: 0.4rem;
-            overflow: hidden;
-        }
-        &-action {
-            display: grid;
-            justify-content: center;
-            align-content: center;
-            border-left: 1px solid var(--border-normal);
-            border-radius: 0;
-            padding: 0 0 0 0.5rem;
-            overflow: hidden;
-        }
-        &-tooltip {
-            width: 20rem;
-        }
-    }
-    &__account-selection {
-        align-items: center;
-        display: flex;
-        height: 4rem;
-        justify-content: center;
-        margin: 0 1.6rem 1.5rem; // -1 for border
-        padding: 0;
-        text-decoration: none;
-        width: calc(100% - 3.2rem);
-        @include typeface(--paragraph-center-bold-black, none);
-
-        &--primary {
-            background-color: var(--brand-red-coral);
-            color: var(--text-colored-background);
-        }
-        &--secondary {
-            background-color: transparent;
-            border: 2px solid var(--button-secondary-default);
-            color: var(--text-prominent);
-
-            &:hover {
-                background-color: var(--button-secondary-hover);
-            }
-        }
-        &--disabled {
-            background-color: var(--brand-red-coral);
-            cursor: initial;
-            opacity: 0.32;
-        }
-    }
-    &__login {
-        @include typeface(--title-center-normal-black);
-        align-items: center;
-        background-color: var(--general-section-1);
-        border-radius: 4px;
-        color: var(--text-general);
-        display: flex;
-        padding: 0.8rem;
-        justify-content: center;
-        margin: 1rem 0 1.6rem;
-        width: 272px;
-
-        strong {
-            font-weight: bold;
-        }
-        span,
-        strong {
-            margin-right: 0.8rem;
-        }
-    }
-    &__manage {
-        display: flex;
-        width: calc(100% - 3.2rem);
-
-        .dc-btn {
-            width: 100%;
-            margin-bottom: 1.6rem;
-            height: 4rem;
-
-            &:not(:last-child) {
-                margin-right: 1.6rem;
-            }
-        }
-    }
-    &__action-wrapper {
-        margin: 0 auto 1.3rem;
-        padding-top: 1rem;
-        width: 75%;
-        text-align: center;
-
-        &__link {
-            font-size: var(--text-size-xxs);
-
-            &--disabled {
-                pointer-events: none;
-            }
-        }
-    }
-    &__divider {
-        width: calc(100% - 3.2rem);
-        margin-left: 1.6rem;
-        border-top: 1px solid var(--general-section-1);
-        margin-top: 1rem;
-    }
-    @include mobile {
-        width: calc(100vw - 3.2rem);
-        height: fit-content;
-
-        &:not(:last-child) {
-            margin-bottom: 2.4rem;
-            margin-right: 0;
-        }
-    }
-}
-
-.cfd-password-manager {
-    margin: 5.6rem auto 3.2rem;
-    width: 100%;
-    height: 100%;
-
-    @media only screen and (max-height: 645px) {
-        margin-top: 1.5rem;
-        overflow: auto;
-    }
-
-    &--paragraph {
-        margin-bottom: 3.2rem;
-    }
-    &--error-message {
-        margin-bottom: 1em;
-    }
-    &__investor-wrapper {
-        margin: 3.2rem 0.5rem 0;
-
-        & .dc-input__label {
-            top: 0.9rem;
-        }
-        @include mobile {
-            padding-bottom: 12rem;
-        }
-    }
-    .dc-password-meter__container,
-    .dc-password-input {
-        width: 30rem;
-        margin: auto;
-    }
-    &__investor-wrapper {
-        .cfd-password-manager--paragraph:first-child {
-            margin-bottom: 0.8rem;
-        }
-    }
-    &__investor-form {
-        width: 100%;
-        max-width: 300px;
-        margin: 2.4em auto 0;
-
-        @include mobile {
-            max-width: unset;
-        }
-    }
-    &__new-password {
-        margin-bottom: 8.6rem;
-    }
-    &__actions {
-        align-items: center;
-        display: flex;
-        flex-flow: column nowrap;
-    }
-    &--button {
-        margin-top: 1.6rem;
-
-        @include mobile {
-            width: 100%;
-            margin-top: 0.8rem;
-            max-width: 30rem;
-            white-space: normal;
-        }
-    }
-    &__success {
-        text-align: center;
-        margin-top: 3.2rem;
-
-        &-header {
-            @include typeface(--paragraph-center-bold-black);
-            margin: 1.6rem 0 0.8rem;
-        }
-        &-btn {
-            margin-top: 3.2rem;
-            width: 6.4rem;
-
-            @include mobile {
-                width: 100%;
-                max-width: 30rem;
-            }
-        }
-    }
-    .multi-step__header {
-        margin: 0 0 2.4rem 0;
-    }
-    .multi-step__component {
-        text-align: center;
-    }
-    @include desktop {
-        max-width: calc(450px + 1rem); // needs extra padding for the scrollbar, otherwise it will cover the words
-    }
-    @include mobile {
-        padding: 0 1.6rem;
-        margin-top: 2.4rem;
-
-        &__scroll-wrapper {
-            overflow-y: auto;
-            overflow-x: hidden;
-        }
-        /* iPhone SE screen width fixes due to UI space restrictions */
-        @media only screen and (max-width: 320px) {
-            padding: 0;
-        }
-    }
-}
-
-.cfd-financial-stp-modal {
-    display: grid;
-    grid-template-rows: 13rem minmax(10rem, 1fr);
-    height: 100%;
-    position: relative;
-    width: 100%;
-
-    .dc-modal-footer {
-        position: fixed;
-        padding: unset;
-        bottom: 1.6rem;
-        right: 1.6rem;
-    }
-
-    &__form {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-
-        .details-form {
-            flex: 1;
-        }
-    }
-    @include desktop {
-        overflow: hidden;
-
-        & .details-form__description {
-            width: 100%;
-        }
-    }
-    @include mobile {
-        overflow: hidden;
-        grid-template-rows: 7rem minmax(10rem, 1fr);
-        &__heading {
-            padding: unset;
-        }
-        &__header {
-            &-steps {
-                padding-bottom: 0.8rem;
-                width: 100%;
-                &-title {
-                    color: var(--brand-red-coral);
-                    font-size: 1.4rem;
-                    font-weight: bold;
-                    line-height: 20px;
-                    padding: 1.6rem 2.4rem 0.8rem;
-                }
-                &-subtitle {
-                    color: var(--text-prominent);
-                    line-height: 18px;
-                    font-size: 1.2rem;
-                    font-weight: bold;
-                    padding: 0 2.4rem;
-                }
-            }
-        }
-        .dc-form-submit-button {
-            background-color: var(--color-white);
-        }
-    }
-    .dc-autocomplete {
-        margin-bottom: 2.4rem;
-    }
-    .account-management {
-        &__message-icon {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-        &__message-content {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-            align-items: center;
-            height: auto;
-            padding: 0 3rem;
-            padding-bottom: 7rem;
-            @include mobile {
-                overflow-y: auto;
-            }
-        }
-        &__message {
-            @include typeface(--title-center-bold-black);
-            color: var(--text-prominent);
-            margin-bottom: 1rem;
-        }
-        &__text {
-            @include typeface(--paragraph-center-normal-black);
-            color: var(--text-prominent);
-        }
-        &__continue {
-            margin-top: 3rem;
-        }
-        &__list {
-            &-message {
-                display: flex;
-            }
-            &-icon {
-                margin-right: 1.2rem;
-            }
-        }
-    }
-}
-
-.dc-modal {
-    &__container {
-        min-width: initial;
-        &_cfd-password-modal {
-            &__description {
-                @include typeface(--xsmall-left-normal-black);
-                line-height: 1.5;
-                max-width: calc(min(100vw, 349px));
-                margin: -2.7rem 0 2.4rem;
-                color: var(--text-less-prominent);
-            }
-            &__account-title {
-                margin-bottom: 1.6rem;
-            }
-        }
-        &_cfd-dashboard__compare-accounts {
-            width: 904px;
-        }
-        &_cfd-password-manager__modal {
-            height: 100% !important;
-            min-height: calc(100vh - 22rem);
-            width: 904px;
-            max-height: calc(100vh - 48px - 36px) !important;
-        }
-    }
-}
-
-.account-poa {
-    &__upload {
-        &-remove-btn {
-            position: absolute;
-            width: 16px;
-            height: 16px;
-            top: 8px;
-            right: 8px;
-            cursor: pointer;
-            transition: transform 0.25s linear;
-
-            &:hover {
-                transform: scale(1.25, 1.25);
-            }
-            &--error {
-                circle {
-                    fill: var(--status-danger);
-                }
-            }
-            &-container {
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-            }
-        }
-    }
-}
-
-.cfd-proof-of-address {
-    height: 100%;
-    & .details-form {
-        display: grid;
-        grid-template-rows: minmax(10rem, 1fr) 7.2rem;
-        height: 100%;
-    }
-    &__file-upload {
-        padding-top: 0.8rem;
-        position: relative;
-
-        .account-poa {
-            &__upload {
-                &-section {
-                    margin-top: 0;
-                    display: flex;
-                }
-                &-file {
-                    width: 100%;
-                    flex: 1;
-                    height: 24rem;
-                    position: relative;
-                    margin: 0;
-
-                    .dc-file-dropzone {
-                        border: 1px dashed var(--border-normal);
-                        max-width: 40rem;
-
-                        &__message-subtitle {
-                            font-size: unset;
-                            font-weight: unset;
-                        }
-                    }
-                    @include mobile {
-                        flex: unset;
-                    }
-                }
-                &-list {
-                    display: unset;
-
-                    .account-poa__upload-box {
-                        display: flex;
-                        flex-direction: unset;
-                        flex: unset;
-                        align-items: center;
-                        justify-content: flex-start;
-                        margin: 0 1.6rem 0.8rem 0;
-                        border: none;
-                        border-radius: 0;
-                        padding: 0;
-                        text-align: unset;
-                    }
-                }
-                &-icon {
-                    width: 2.5rem;
-                    margin-bottom: 0;
-                }
-                &-item {
-                    min-width: 23.8rem;
-                    width: 100%;
-                    margin-left: 1rem;
-                    font-size: var(--text-size-xxs);
-                    line-height: 1.5;
-                    color: var(--text-prominent);
-                    padding: 0;
-                }
-            }
-        }
-    }
-    &__field-area {
-        max-width: 556px;
-        margin: 0 auto;
-
-        & .dc-dropdown__display-placeholder-text,
-        & .dc-input__label,
-        & .dc-dropdown__display {
-            background: var(--general-main-2);
-        }
-        @include mobile {
-            overflow: auto;
-        }
-    }
-    &__inline-fields {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-        grid-gap: 1rem;
-
-        .dc-dropdown-container {
-            margin-top: 0;
-        }
-    }
-    @include mobile {
-        .dc-input__label {
-            background: var(--general-section-2);
-        }
-        &__field-area {
-            padding: 0 1.6rem 3.2rem;
-            max-height: calc(100% - 0.8rem);
-        }
-        &__inline-fields {
-            display: flex;
-            flex-direction: column;
-
-            .dc-select-native {
-                margin-bottom: 3.2rem;
-            }
-        }
-        &__file-upload {
-            .dc-field--error {
-                top: 50%;
-                left: 0;
-                right: unset;
-            }
-            .account-poa__upload-section {
-                flex-direction: column;
-            }
-        }
-    }
-}
-
-.cfd-proof-of-identity {
-    height: 100%;
-    overflow: auto;
-
-    &__fields {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        height: 100%;
-
-        @include mobile {
-            display: unset;
-            position: relative;
-        }
-
-        .proof-of-identity {
-            &:is(span) {
-                width: unset;
-                height: unset;
-            }
-
-            &__footer {
-                width: 45%;
-                display: inline-flex;
-                justify-content: flex-end;
-                height: unset;
-                position: unset;
-                bottom: unset;
-                left: unset;
-                padding: unset;
-                z-index: unset;
-                border-radius: unset;
-                border-top: unset;
-                background-color: unset;
-                align-items: unset;
-                flex-direction: unset;
-
-                @include mobile {
-                    width: 95%;
-                    margin-top: 8px;
-                }
-
-                &-alert {
-                    margin-right: unset;
-                }
-            }
-
-            &__container {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                width: 45%;
-                justify-content: unset;
-
-                @include mobile {
-                    width: 100%;
-                    padding: 0 1.2rem;
-                    overflow-y: unset;
-                    justify-content: unset;
-                }
-
-                .icon {
-                    width: 12.8rem;
-                    height: 12.8rem;
-                    margin: 1.6rem 0 2.4rem 0;
-                }
-                .dc-input__bottom-label {
-                    margin: unset;
-                }
-                .btm-spacer {
-                    margin-bottom: 1.6rem;
-                }
-                .top-spacer {
-                    margin-top: 1.6rem;
-                }
-
-                .proof-of-identity__footer {
-                    // for cases when __footer is a child of proof-of-identity__container:
-                    width: 100%;
-                    margin-bottom: 8.6em;
-
-                    span.dc-text.dc-btn__text {
-                        display: inline-flex;
-                        align-items: center;
-                    }
-                    .back-btn {
-                        margin-right: unset;
-
-                        &-icon {
-                            margin-right: 0.8rem;
-                        }
-                    }
-                }
-            }
-
-            &__header {
-                margin: 0 0 1.6rem;
-            }
-            &__country-text {
-                text-align: center;
-                margin-bottom: 1.6rem;
-            }
-            &__inner-container {
-                display: unset;
-                flex-direction: unset;
-                justify-content: unset;
-                align-items: unset;
-                width: 100%;
-            }
-            &__image {
-                width: 100%;
-                max-width: unset;
-                border-radius: unset;
-                object-fit: unset;
-
-                &-container {
-                    width: unset;
-                    height: unset;
-                    padding: unset;
-                    border-radius: unset;
-                    background-color: unset;
-                }
-            }
-            &__fieldset {
-                width: 100%;
-
-                @include mobile {
-                    margin: 0 0 1.8rem;
-                }
-
-                &-container {
-                    display: unset;
-                    flex-direction: unset;
-                    justify-content: unset;
-                    align-items: unset;
-                }
-                &-input {
-                    width: unset;
-                }
-            }
-            &__sample-container {
-                margin-top: 2.4rem;
-                margin-left: unset;
-                width: unset;
-            }
-
-            &__submit-button {
-                margin-left: 0.8rem;
-                @include mobile {
-                    margin-right: unset;
-                }
-            }
-        }
-        .dc-themed-scrollbars {
-            height: 100%;
-        }
-    }
-    & .details-form {
-        display: grid;
-        grid-template-rows: minmax(10rem, 1fr) 8.2rem;
-        height: 100%;
-        position: relative;
-
-        @include mobile {
-            max-height: calc(100% - 1rem);
-        }
-    }
-    @include mobile {
-        overflow: hidden;
-    }
-}
-
-.cfd-change-password {
-    &__description {
-        margin-bottom: 2.4rem;
-    }
-
-    &__icon {
-        margin-left: 2.3rem;
-        margin-bottom: 1.4rem;
-        flex: none;
-    }
-
-    &-confirmation {
-        &__description {
-            margin-top: 0.8rem;
-            margin-bottom: 2.4rem;
-        }
-    }
-}
-
-.cfd-trading-password {
-    margin-top: 3.2rem;
-}
-
-.dc-modal__container_cfd-financial-stp-signup-modal {
-    max-height: calc(100vh - 102px) !important;
-    @include desktop {
-        display: grid;
-        grid-template-rows: 6rem minmax(20rem, 1fr);
-    }
-}
-.dc-modal__container_cfd-password-modal {
-    .dc-form-submit-button {
-        background-color: unset;
-        padding-bottom: 1.2rem;
-
-        @include mobile {
-            border-top: none;
-            bottom: 0;
-        }
-        .dc-btn:first-child {
-            margin-left: 0;
-        }
-    }
-    .dc-input {
-        &__label {
-            top: 0.9rem;
-        }
-        &__hint {
-            top: 4.8rem;
-        }
-    }
-}
-.dc-modal__container_cfd-pending-dialog,
-.dc-modal__container_cfd-success-dialog {
-    .dc-modal-header__title--cfd-pending-dialog {
-        text-align: center;
-        margin: auto;
-        padding: 2.4rem;
-        width: fit-content;
-    }
-    .dc-modal-body {
-        text-align: center;
-    }
-    .dc-modal-footer {
-        justify-content: center;
-        padding: 0.8rem 2rem 2.4rem;
-
-        .dc-btn {
-            min-width: 90px;
-
-            &:only-child {
-                margin: 0;
-            }
-            &:first-child {
-                margin-left: 0;
-            }
-        }
-        @include mobile {
-            padding: 0.8rem 1.6rem 1.6rem;
-            display: flex;
-            grid-gap: 0.6rem;
-
-            & .dc-btn {
-                &:only-child {
-                    max-width: 14rem;
-                    width: auto;
-                    min-width: 9rem;
-                }
-            }
-        }
-    }
-}
-.dc-modal__container_cfd-success-dialog {
-    .success-change__icon-area {
-        width: 128px;
-        margin: 0 auto;
-        position: relative;
-
-        &--large .bottom-right-overlay {
-            position: absolute;
-            left: 76px;
-            top: 76px;
-
-            @include mobile {
-                left: 78px;
-                top: 58px;
-            }
-        }
-        &--xlarge .bottom-right-overlay {
-            position: absolute;
-            bottom: 0.8rem;
-            right: -2.8rem;
-            height: 5.2rem;
-            width: 5.2rem;
-        }
-    }
-    .dc-modal-body {
-        .dc-modal-header__title {
-            text-align: center;
-            margin: auto;
-            padding: 1.6rem 0 0.8rem;
-            width: fit-content;
-        }
-        @include mobile {
-            font-size: 1.4rem;
-        }
-    }
-    .cfd-account__platform {
-        font-style: italic;
-        white-space: nowrap;
-    }
-}
-.cfd-personal-details-form-error {
-    @include typeface(--paragraph-left-normal-red);
-    @include desktop {
-        white-space: nowrap;
-        display: flex;
-        align-items: flex-end;
-    }
-}
-
-/* stylelint-enable */
diff --git a/packages/reports/src/sass/app/modules/mt5/cfd.scss b/packages/reports/src/sass/app/modules/mt5/cfd.scss
deleted file mode 100644
index 23b3e5ef71da..000000000000
--- a/packages/reports/src/sass/app/modules/mt5/cfd.scss
+++ /dev/null
@@ -1,394 +0,0 @@
-.dc-modal__container_cfd-password-modal,
-.dc-mobile-dialog__cfd-password-modal {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    max-width: 424px;
-
-    form {
-        flex-grow: 1;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: space-between;
-        padding: 0 2.4rem 1.2rem;
-
-        @include mobile {
-            padding: 0;
-        }
-    }
-    &__description {
-        @include typeface(--small-center-normal-black);
-        color: var(--text-prominent);
-        text-transform: none;
-        margin-top: 1rem;
-        top: 2rem;
-        position: relative;
-        padding: 1.3rem;
-    }
-    &__hint {
-        max-width: 40rem;
-    }
-    &__body {
-        flex-grow: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        align-items: flex-start;
-    }
-    .dc-input {
-        &__label {
-            top: 1.2rem;
-            @include mobile {
-                top: 0.9rem;
-                background-color: var(--fill-normal);
-            }
-        }
-    }
-    .dc-password-meter {
-        &__bg {
-            background: var(--general-section-2);
-            @include mobile {
-                background: var(--fill-disabled);
-            }
-        }
-    }
-    .status-dialog {
-        margin-top: 3em;
-    }
-    .cfd-password-reset {
-        @include mobile {
-            flex: 1;
-        }
-    }
-    & .dc-password-meter__container {
-        flex-grow: 1;
-        margin: auto;
-
-        @include mobile {
-            width: calc(100vw - 4.8rem);
-            max-width: 30rem;
-        }
-    }
-    & .mt5-password-field {
-        margin-bottom: 1em;
-        width: 80%;
-    }
-    .input-element {
-        width: 100%;
-    }
-    @include mobile {
-        .cfd-password-modal__content {
-            overflow-y: auto;
-            overflow-x: hidden;
-            height: 100%;
-            max-height: calc(100% - 6.4rem);
-            padding: 1rem;
-        }
-    }
-    @include tablet-up {
-        .cfd-password-modal__content {
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            margin-bottom: 2rem;
-
-            &--password-reset {
-                padding: 0 2.5rem;
-            }
-        }
-    }
-}
-.dc-mobile-dialog__mt5-email-sent {
-    padding-bottom: 1rem;
-}
-
-.cfd-password-modal {
-    &__warning {
-        padding: 2.5rem;
-        max-width: 50rem;
-        align-self: center;
-        &-text {
-            border-radius: 0.8rem;
-            padding: 0.8rem;
-            background-color: var(--status-warning);
-        }
-    }
-    &__message {
-        max-width: 32rem;
-        margin: auto;
-        line-height: 1.43;
-    }
-    &__radio {
-        &.dc-radio-group {
-            display: grid;
-            grid-gap: 2rem;
-            margin-top: 0;
-            padding-bottom: 2.4rem;
-        }
-        &.dc-radio-group__item {
-            display: flex;
-            flex-direction: row;
-        }
-    }
-    &__create-password {
-        padding: 0 1.2rem;
-
-        &-content {
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            align-items: center;
-            margin-top: -2.5rem;
-
-            .dc-icon {
-                margin-left: 1.1rem;
-                flex: none;
-            }
-        }
-        &-title {
-            margin-top: 2.4rem;
-            margin-bottom: 0.8rem;
-        }
-        &-description {
-            max-width: 30rem;
-            margin-bottom: 1.6rem;
-        }
-    }
-    &__change-password-confirmation {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-        max-width: 30rem;
-
-        @include desktop {
-            margin-top: -2.5rem;
-        }
-
-        &-wrapper {
-            display: flex;
-            justify-content: center;
-            width: 100%;
-        }
-        .dc-form-submit-button {
-            margin-bottom: 2.2rem;
-        }
-    }
-}
-
-.dc-modal__container_top-up-virtual {
-    width: 384px;
-    min-height: 367px;
-    display: flex;
-    flex-direction: column;
-
-    &__body {
-        display: flex;
-        flex-direction: column;
-        padding: 4.8rem 4.2rem;
-        flex-grow: 1;
-        justify-content: space-around;
-        align-items: center;
-    }
-    &__description {
-        text-transform: none;
-    }
-    &--h4 {
-        @include typeface(--small-center-bold-black);
-        text-transform: none;
-        color: var(--text-prominent);
-    }
-    &--balance {
-        @include typeface(--title-center-bold-black);
-        line-height: 1.5;
-        color: var(--text-profit-success);
-    }
-}
-
-.cfd-success-topup {
-    &__heading {
-        @include typeface(--paragraph-center-bold-black);
-        margin: 1.6rem 1.8rem;
-    }
-    &__description {
-        p {
-            @include typeface(--small-center-normal-black);
-            color: var(--text-general);
-            text-transform: none;
-        }
-    }
-}
-
-.cfd-dashboard {
-    &__container {
-        & .dc-popover__target {
-            display: flex;
-        }
-    }
-}
-
-.cfd-verification-email-sent {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    &__title {
-        @include typeface(--title-center-bold-black);
-        margin: 0.8rem 0;
-
-        &--sub {
-            margin-bottom: 0.8rem;
-            margin-top: 3rem;
-        }
-    }
-    &__resend-button {
-        display: block;
-        @include typeface(--paragraph-center-bold-black);
-        color: var(--brand-red-coral);
-        text-decoration: none;
-        margin: 3.2rem 0 0;
-    }
-    & .countdown {
-        margin: 0 0.4rem;
-    }
-}
-
-.cfd-reset-password {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    @include typeface(--paragraph-left-normal-black);
-    color: var(--text-prominent);
-
-    &__container {
-        display: grid;
-        grid-template-rows: 12rem 7rem;
-        height: 100%;
-        width: 100%;
-        justify-items: center;
-        flex-grow: 1;
-
-        @include mobile {
-            min-height: 24rem;
-            width: calc(100vw - 3.2rem);
-        }
-    }
-    &__heading {
-        @include typeface(--paragraph-center-bold-black);
-        margin: 1.6rem 0 0;
-    }
-    &__hint {
-        @include typeface(--small-left-normal-black);
-        color: var(--text-less-prominent);
-        margin-left: 1.2rem;
-    }
-    &__password-field {
-        margin-bottom: 0.5rem;
-
-        & .dc-input__label {
-            top: 0.9rem;
-        }
-    }
-    &__password-area {
-        @include desktop {
-            width: calc(min(33rem, 100vw));
-            padding: 2.4rem;
-        }
-        @include mobile {
-            width: 100%;
-            max-width: calc(100% - 2.4rem);
-        }
-    }
-    &__error {
-        display: flex;
-        max-width: 38.4rem;
-        min-height: 28.4rem;
-        flex-direction: column;
-        align-items: center;
-        padding-top: 2rem;
-        margin: 0 auto;
-    }
-    &__description {
-        @include typeface(--paragraph-left-normal-black);
-        color: var(--text-prominent);
-        margin-bottom: 2.4rem;
-
-        &--is-centered {
-            margin-bottom: 2.4rem;
-            max-width: 70%;
-        }
-    }
-    &__confirm-button {
-        margin-top: 2.4rem;
-    }
-    &__success {
-        width: 38.4rem;
-        height: 28.4rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-around;
-        padding: 2.4rem 0 2rem;
-
-        @include mobile {
-            width: calc(100vw - 3.2rem);
-            height: 100%;
-        }
-    }
-    @include mobile {
-        & .dc-form-submit-button {
-            all: unset;
-        }
-    }
-}
-
-/** @define poi-icon-row; weak */
-.poi-icon-row {
-    display: flex;
-    margin-bottom: 16px;
-
-    &__icon-container {
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        color: var(--text-less-prominent);
-
-        &:not(:first-child):not(:last-child) {
-            margin: 0 40px;
-        }
-        p {
-            font-size: var(--text-size-xxs);
-        }
-        p:first-of-type {
-            line-height: 1.5;
-            margin-top: 8px;
-            font-weight: bold;
-        }
-        @include mobile {
-            &:not(:first-child):not(:last-child) {
-                margin: 0;
-            }
-            & .dc-icon {
-                width: 8.8rem;
-                height: auto;
-
-                /* iPhone SE screen width fixes due to UI space restrictions */
-                @media only screen and (max-width: 340px) {
-                    width: 7rem;
-                }
-            }
-            p {
-                line-height: 20px;
-            }
-        }
-    }
-    @include mobile {
-        display: grid;
-        grid-gap: 2.4rem;
-        grid-template-columns: 1fr 1fr 1fr;
-        margin-top: 4rem;
-    }
-}
diff --git a/packages/reports/src/sass/app/modules/trading.scss b/packages/reports/src/sass/app/modules/trading.scss
deleted file mode 100644
index 241efc5fef0d..000000000000
--- a/packages/reports/src/sass/app/modules/trading.scss
+++ /dev/null
@@ -1,675 +0,0 @@
-@keyframes slide {
-    0% {
-        transform: translateX(-100%);
-    }
-    100% {
-        transform: translateX(100%);
-    }
-}
-
-.loader {
-    overflow: hidden;
-    background-color: rgba(var(--general-main-1), 0.16);
-
-    &--loading {
-        width: inherit;
-        height: inherit;
-        animation: slide 1s cubic-bezier(1, 0, 0.5, 0) infinite;
-        background-image: linear-gradient(to left, rgba(255, 255, 255, 0), $color-white 10%, rgba(255, 255, 255, 0));
-        opacity: 0.32;
-    }
-}
-
-.app-contents {
-    &--contract-mode,
-    &--is-disabled {
-        .trade-container {
-            .popover {
-                display: none;
-            }
-            .dc-tooltip:before,
-            .dc-tooltip:after {
-                display: none;
-            }
-        }
-    }
-    .sidebar__items--blur {
-        .popover {
-            display: none;
-        }
-        .dc-tooltip:before,
-        .dc-tooltip:after {
-            display: none;
-        }
-    }
-}
-
-/** @define modal-dialog; weak */
-.dc-mobile-dialog {
-    &__contracts-modal-list {
-        /* postcss-bem-linter: ignore */
-        .category-wrapper {
-            background-color: var(--general-main-1) !important;
-        }
-    }
-    .dc-select-native__placeholder:not(.dc-select-native__placeholder--has-value) {
-        background: initial;
-    }
-}
-
-/** @define trade-container; weak */
-.trade-container {
-    background: var(--general-main-1);
-
-    &__fieldset {
-        border-radius: $BORDER_RADIUS;
-        padding: 0.8rem;
-        margin-bottom: 0.4rem;
-        background-color: var(--general-section-1);
-        border-color: var(--general-section-1);
-        color: var(--text-general);
-        @include mobile {
-            padding: 0;
-            margin-bottom: 0.8rem;
-            background-color: transparent;
-        }
-
-        /* postcss-bem-linter: ignore */
-        > div:first-child {
-            margin-top: 0;
-        }
-        &-header {
-            position: relative;
-
-            &--inline {
-                display: flex;
-                justify-content: flex-end;
-            }
-        }
-        &-info {
-            @include typeface(--paragraph-left-normal-black);
-            color: var(--text-general);
-            margin: auto;
-
-            &--left {
-                transform: translateX(5px);
-            }
-        }
-        &-wrapper {
-            &--disabled {
-                .btn-purchase__box-shadow {
-                    opacity: 0;
-                }
-            }
-        }
-        .dc-datepicker {
-            .dc-input {
-                border: 1px solid var(--fill-normal);
-                background-color: var(--general-main-1);
-                margin-bottom: 0;
-
-                &__field {
-                    height: 3.2rem;
-                }
-            }
-        }
-    }
-    &__input {
-        align-self: center;
-        appearance: none;
-        box-sizing: border-box;
-        border-radius: $BORDER_RADIUS;
-        background: var(--fill-normal);
-        color: var(--text-general);
-        border: 1px solid var(--fill-normal);
-
-        &:hover {
-            border-color: var(--border-hover);
-        }
-        &:active,
-        &:focus {
-            border-color: var(--border-active);
-        }
-    }
-    &__error {
-        justify-content: center;
-        align-items: center;
-        display: flex;
-
-        &-info {
-            @include typeface(--small-left-light-black, none);
-            @include toEm(padding, 5px 5px 5px 8px, 1.2em);
-            @include toEm(margin-bottom, 10px, 1.2em);
-            color: var(--text-general);
-            background-color: rgba($color-red, 0.16);
-            display: block;
-            border: 1px solid var(--brand-red-coral);
-            border-radius: $BORDER_RADIUS;
-        }
-    }
-    &__currency {
-        position: absolute;
-        height: 3.2rem;
-        right: 4rem;
-        align-items: center;
-        justify-content: center;
-        display: flex;
-        background: transparent;
-        border-color: transparent;
-        z-index: 2;
-        color: inherit;
-
-        &--symbol {
-            font-size: 1.4rem;
-            line-height: 1.5;
-            padding-bottom: 0.2rem;
-        }
-        &:before {
-            @include typeface(--paragraph-center-normal-black);
-            color: inherit;
-        }
-        & ~ .trade-container__input {
-            padding: 0 30px;
-        }
-    }
-    &__price,
-    &__order-input {
-        line-height: 0.9rem;
-        border: 0;
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        position: relative;
-        color: var(--text-prominent);
-
-        &-info {
-            display: flex;
-            justify-self: left;
-            align-items: center;
-
-            @include mobile {
-                color: var(--text-colored-background);
-                width: 100%;
-                justify-content: space-between;
-                align-items: center;
-
-                &-wrapper {
-                    display: flex;
-                    justify-content: flex-end;
-                    align-items: center;
-                }
-            }
-            @include desktop {
-                min-height: 2.1rem;
-            }
-
-            &--disabled {
-                opacity: 0.32;
-            }
-            &--slide {
-                width: 92px;
-                height: 8px;
-                margin: 6.5px 0;
-                @extend .loader;
-
-                .trade-container__price-info-basis {
-                    @extend .loader--loading;
-                }
-            }
-            &--fade &-value {
-                opacity: 0;
-            }
-            &--fade {
-                .trade-container__price-info-movement {
-                    opacity: 0;
-                }
-            }
-            &-value {
-                font-size: 1.4rem;
-                font-weight: 700;
-                text-align: left;
-                line-height: 1.25;
-                margin-left: 0.1rem;
-                color: var(--text-prominent);
-                opacity: 1;
-                transition: 0.3s;
-
-                @include mobile {
-                    color: var(--text-colored-background);
-                }
-            }
-            &-basis {
-                margin-left: 0;
-                font-weight: normal;
-                @include typeface(--paragraph-left-normal-black);
-                color: var(--text-less-prominent);
-                @include mobile {
-                    @include typeface(--xsmall-left-normal-black);
-                    color: var(--text-colored-background);
-                }
-            }
-            &-currency {
-                margin-left: 4px;
-                margin-right: 1px;
-                display: inline-block;
-                position: relative;
-                font-weight: bold;
-            }
-            &-movement {
-                margin-left: 4px;
-                width: 16px;
-                height: 16px;
-                bottom: 1px;
-                position: relative;
-            }
-        }
-    }
-    &__price-info-currency {
-        @include mobile {
-            font-size: 0.9rem;
-        }
-    }
-    &__barriers {
-        display: flex;
-        flex-direction: column;
-
-        &:first-child {
-            padding-right: 8px;
-        }
-        &-input {
-            padding-left: 3px;
-        }
-        &-single {
-            width: 100%;
-        }
-        &-multiple {
-            &-input {
-                padding-left: 25px;
-                padding-right: 9px;
-                text-align: center;
-            }
-            &:first-of-type {
-                padding-right: 8px;
-            }
-        }
-        &--up,
-        &--down {
-            position: absolute;
-            margin-top: 15px;
-        }
-        &--up {
-            right: 86.5%;
-        }
-        &--down {
-            right: 39%;
-        }
-    }
-    &__allow-equals {
-        /* postcss-bem-linter: ignore */
-        &__label {
-            color: var(--text-general);
-        }
-    }
-    &__currency-options {
-        // fix for Safari:
-        // display: inline-block causes input cursor to seemingly appears duplicated
-        display: grid;
-        grid-template-columns: 3fr 1.5fr;
-        grid-gap: 0.4rem;
-
-        .dc-dropdown-container {
-            /* postcss-bem-linter: ignore */
-            &__currency {
-                margin-top: 0.8em;
-                min-width: unset;
-
-                /* postcss-bem-linter: ignore */
-                .dc-dropdown__select-arrow {
-                    top: 9px;
-                }
-                /* postcss-bem-linter: ignore */
-                .dc-dropdown__display {
-                    border-radius: $BORDER_RADIUS;
-
-                    /* postcss-bem-linter: ignore */
-                    .symbols {
-                        font-size: 1.4em;
-                    }
-                }
-            }
-        }
-    }
-    &__amount {
-        &--multipliers {
-            & .trade-container__input {
-                left: 3.6rem;
-            }
-        }
-        & .dc-tooltip--error {
-            & .dc-input-wrapper {
-                border: 1px solid var(--status-danger);
-
-                &:hover {
-                    border-color: var(--status-danger);
-                }
-            }
-        }
-        & .dc-input-wrapper {
-            border-radius: $BORDER_RADIUS;
-            background: var(--fill-normal);
-            border: 1px solid var(--fill-normal);
-            height: 3.2rem;
-            box-sizing: border-box;
-
-            &__button {
-                top: 1px;
-
-                &--increment {
-                    right: 1px;
-                }
-                &--decrement {
-                    left: 1px;
-                }
-            }
-            &:hover {
-                border-color: var(--border-hover);
-            }
-            &:active,
-            &:focus {
-                border-color: var(--border-active);
-            }
-        }
-        & .trade-container__input {
-            font-size: 1.4rem;
-            max-width: calc(100% - 7.2rem);
-            border-radius: 0 $BORDER_RADIUS $BORDER_RADIUS 0;
-            background: none;
-            border: none;
-            padding: 0 0 0.2rem;
-
-            &.input--error {
-                border: none !important;
-            }
-        }
-    }
-    &__multiplier {
-        display: flex;
-        flex-direction: column;
-
-        &-dropdown {
-            /* postcss-bem-linter: ignore */
-            .dc-dropdown__display-text {
-                padding-right: unset;
-                padding-left: 1em;
-            }
-            /* postcss-bem-linter: ignore */
-            .dc-dropdown__display-text,
-            .dc-list__item-text {
-                text-transform: unset;
-            }
-        }
-        /* postcss-bem-linter: ignore */
-        .dc-popover {
-            align-self: flex-end;
-        }
-    }
-    &__deal-cancellation-popover {
-        width: 28rem;
-    }
-    &__cancel-deal-info {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-
-        &--row-layout {
-            flex-direction: column;
-            align-items: flex-start;
-            justify-content: flex-start;
-
-            .trade-container__price-info-currency {
-                margin-left: -0.1rem;
-            }
-            @include mobile {
-                padding: 0.4rem 0 0 !important;
-                margin-bottom: -0.5rem;
-
-                .trade-container__price-info-currency {
-                    font-size: 0.9rem !important;
-                }
-                .trade-container__price-info-basis {
-                    font-size: 0.8rem;
-                }
-            }
-        }
-        .trade-container__price-info-currency {
-            font-size: 1.2rem;
-        }
-        @include mobile {
-            padding: 0 0.4rem;
-            min-height: 1.4rem;
-
-            .trade-container__price-info-basis {
-                color: var(--text-general);
-            }
-            .trade-container__price-info-value {
-                color: var(--text-prominent);
-                font-size: 1rem;
-            }
-            .trade-container__price-info-currency {
-                font-size: 0.9rem;
-            }
-        }
-    }
-    &__multipliers-trade-info {
-        display: flex;
-        justify-content: space-around;
-        gap: 2.8rem;
-
-        &-tooltip-text {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding-top: 0.8rem;
-            text-align: right;
-
-            span {
-                border-bottom: 1px dotted var(--text-general);
-            }
-        }
-    }
-    &__popover {
-        /* postcss-bem-linter: ignore */
-        .dc-checkbox {
-            margin-top: 0.8rem;
-
-            /* postcss-bem-linter: ignore */
-            &__label {
-                font-size: inherit;
-            }
-        }
-    }
-    /* postcss-bem-linter: ignore */
-    .symbols.disabled {
-        color: var(--text-disabled);
-    }
-    .dc-dropdown--left {
-        .dc-dropdown__display-text {
-            padding-left: 15px;
-            padding-right: unset;
-        }
-        .dc-dropdown__select-arrow {
-            left: 0.3rem;
-        }
-    }
-}
-
-/** @define dc-input-field; weak */
-.dc-input-field {
-    .dc-input-wrapper__icon {
-        top: 6px;
-    }
-    &--has-error {
-        .dc-input {
-            border: 1px solid $COLOR_RED !important;
-        }
-    }
-}
-
-/** @define purchase-container; weak */
-.purchase-container {
-    position: relative;
-
-    &__option {
-        padding-top: 8px;
-        padding-bottom: 8px;
-
-        &:not(:only-child) {
-            &:nth-last-child(2) {
-                border-bottom-width: 0;
-                border-bottom-left-radius: 0;
-                border-bottom-right-radius: 0;
-                margin-bottom: 0 !important;
-            }
-            &:nth-last-child(1) {
-                border-top-width: 0;
-                border-top-left-radius: 0;
-                border-top-right-radius: 0;
-                margin-bottom: 0 !important;
-
-                .trade-container__price {
-                    margin-top: -4px;
-                }
-            }
-        }
-        @include mobile {
-            padding: initial;
-            position: relative;
-
-            &:not(&--has-cancellation) {
-                .btn-purchase--multiplier {
-                    height: 86px;
-                }
-            }
-        }
-    }
-    &__loading {
-        background: rgba(255, 255, 255, 0.6);
-        border-radius: $BORDER_RADIUS;
-        width: calc(100% + 2px);
-        height: calc(100% + 2px);
-        left: -2px;
-    }
-    @include mobile {
-        display: grid;
-        grid-template-areas: 'a b';
-        grid-column-gap: 0.5rem;
-    }
-    //&__lock {
-    //    position: absolute;
-    //    display: flex;
-    //    justify-content: center;
-    //    align-items: center;
-    //    background: $COLOR_LIGHT_BLACK_4_SOLID;
-    //    opacity: 0.95;
-    //    min-height: 202px;
-    //    width: calc(100% - 6px);
-    //    height: calc(100% - 2px);
-    //    z-index: 3;
-    //    top: 0;
-    //    left: 2px;
-    //    right: 0;
-    //    flex-direction: column;
-    //    bottom: 0;
-    //    border-radius: $BORDER_RADIUS;
-    //    @include themify($themes) {
-    //        background: themed('background_container_color');
-    //    }
-    //
-    //    &-icon {
-    //        width: 64px;
-    //        height: 64px;
-    //        @extend %inline-icon.white;
-    //    }
-    //    &-button {
-    //        height: 32px;
-    //        margin: 0 1rem 1.5rem;
-    //        width: 90px;
-    //        line-height: 100%;
-    //        background: transparent;
-    //    }
-    //    &-header {
-    //        margin: 2px 8px 8px;
-    //        padding: 0;
-    //        @include themify($themes) {
-    //            color: themed('text_color');
-    //        }
-    //    }
-    //    &-message {
-    //        text-align: center;
-    //        padding: 8px;
-    //        margin: 1rem 1rem 0;
-    //        border-radius: $BORDER_RADIUS;
-    //        font-size: 10px;
-    //        @include themify($themes) {
-    //            background: themed('background_cover');
-    //            color: themed('text_primary_color');
-    //        }
-    //    }
-    //}
-}
-
-/** @define duration-container */
-.duration-container {
-    /* postcss-bem-linter: ignore */
-    .dropdown-container {
-        margin-top: 0.8em;
-    }
-}
-
-/** @define dc-collapsible */
-@include mobile {
-    .dc-collapsible {
-        position: absolute;
-        bottom: 0;
-        z-index: 999;
-        margin: 0 auto;
-        left: 0;
-        width: calc(100vw - 1.6rem);
-        transform: translate(0.8rem, 0);
-    }
-}
-
-/** @define market-unavailable-modal */
-@include mobile {
-    .market-unavailable-modal {
-        @media only screen and (max-height: 600px) {
-            align-items: flex-start;
-            padding-top: 10rem;
-
-            .dc-dialog__dialog {
-                margin-top: 0;
-            }
-        }
-
-        /* postcss-bem-linter: ignore */
-        .dc-dialog__footer {
-            flex-direction: column;
-            align-items: center;
-            width: auto;
-
-            .dc-btn {
-                margin: 0;
-                width: 100%;
-
-                &--primary {
-                    order: 1;
-                    margin-bottom: 1rem;
-                }
-                &--secondary {
-                    order: 2;
-                }
-            }
-        }
-    }
-}
diff --git a/packages/trader/src/Stores/Modules/Trading/Constants/ui.js b/packages/trader/src/Stores/Modules/Trading/Constants/ui.js
index 276ad104b8a5..325fcda6e315 100644
--- a/packages/trader/src/Stores/Modules/Trading/Constants/ui.js
+++ b/packages/trader/src/Stores/Modules/Trading/Constants/ui.js
@@ -1,7 +1,7 @@
-import Amount from '../../../../Modules/Trading/Components/Form/TradeParams/amount.jsx';
-import Barrier from '../../../../Modules/Trading/Components/Form/TradeParams/barrier.jsx';
-import Duration from '../../../../Modules/Trading/Components/Form/TradeParams/Duration';
-import LastDigit from '../../../../Modules/Trading/Components/Form/TradeParams/last-digit.jsx';
+import Amount from 'Modules/Trading/Components/Form/TradeParams/amount.jsx';
+import Barrier from 'Modules/Trading/Components/Form/TradeParams/barrier.jsx';
+import Duration from 'Modules/Trading/Components/Form/TradeParams/Duration';
+import LastDigit from 'Modules/Trading/Components/Form/TradeParams/last-digit.jsx';
 
 export const form_components = [
     { name: 'duration', Component: Duration },
diff --git a/packages/trader/src/Utils/Validator/validator.js b/packages/trader/src/Utils/Validator/validator.js
index f6249ab21610..c8aa2ce59dff 100644
--- a/packages/trader/src/Utils/Validator/validator.js
+++ b/packages/trader/src/Utils/Validator/validator.js
@@ -1,4 +1,4 @@
-import { template } from '../../_common/utility';
+import { template } from '_common/utility';
 import { getPreBuildDVRs } from '@deriv/shared';
 import Error from './errors';
 

From 2ab5b59f6052ed13084695458bb7c8000586d267 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Thu, 5 May 2022 12:02:13 +0430
Subject: [PATCH 20/64] remove deriv-charts package and unnecessary related
 files

---
 .../SmartChart/Components/Markers/index.js    |   1 -
 .../SmartChart/Components/Markers/marker.jsx  |  41 --
 .../SmartChart/Components/all-markers.jsx     | 609 ------------------
 .../SmartChart/Components/control-widgets.jsx |  27 -
 .../SmartChart/Components/toolbar-widgets.jsx |  22 -
 .../SmartChart/Components/top-widgets.jsx     |  85 ---
 .../reports/src/Modules/SmartChart/index.js   |  29 -
 7 files changed, 814 deletions(-)
 delete mode 100644 packages/reports/src/Modules/SmartChart/Components/Markers/index.js
 delete mode 100644 packages/reports/src/Modules/SmartChart/Components/Markers/marker.jsx
 delete mode 100644 packages/reports/src/Modules/SmartChart/Components/all-markers.jsx
 delete mode 100644 packages/reports/src/Modules/SmartChart/Components/control-widgets.jsx
 delete mode 100644 packages/reports/src/Modules/SmartChart/Components/toolbar-widgets.jsx
 delete mode 100644 packages/reports/src/Modules/SmartChart/Components/top-widgets.jsx
 delete mode 100644 packages/reports/src/Modules/SmartChart/index.js

diff --git a/packages/reports/src/Modules/SmartChart/Components/Markers/index.js b/packages/reports/src/Modules/SmartChart/Components/Markers/index.js
deleted file mode 100644
index 3fea22c76b32..000000000000
--- a/packages/reports/src/Modules/SmartChart/Components/Markers/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default from './marker.jsx';
diff --git a/packages/reports/src/Modules/SmartChart/Components/Markers/marker.jsx b/packages/reports/src/Modules/SmartChart/Components/Markers/marker.jsx
deleted file mode 100644
index 84a5d2b69042..000000000000
--- a/packages/reports/src/Modules/SmartChart/Components/Markers/marker.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { toJS } from 'mobx';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { FastMarker } from '../../index';
-
-const ChartMarker = ({ marker_config, marker_content_props, is_bottom_widget_visible }) => {
-    const { ContentComponent, ...marker_props } = marker_config;
-
-    // TODO:
-    //  - rename x to epoch
-    //  - rename y to price
-    const onRef = ref => {
-        if (ref) {
-            // NOTE: null price means vertical line.
-            if (!marker_props.y) {
-                const margin = (is_bottom_widget_visible ? 115 : 0) + 24; // digit contracts have a widget at the bottom // height of line marker icon
-
-                ref.div.style.height = `calc(100% - ${margin}px)`;
-                ref.div.style.zIndex = '-1';
-            }
-            ref.setPosition({
-                epoch: +marker_props.x,
-                price: +marker_props.y,
-            });
-        }
-    };
-
-    // memoizing the marker components data:
-    const getMemoizedComponent = React.useCallback(() => {
-        return <ContentComponent {...toJS(marker_content_props)} />;
-    }, [marker_content_props]);
-
-    return <FastMarker markerRef={onRef}>{getMemoizedComponent()}</FastMarker>;
-};
-
-ChartMarker.propTypes = {
-    marker_config: PropTypes.object,
-    marker_content_props: PropTypes.object,
-};
-
-export default ChartMarker;
diff --git a/packages/reports/src/Modules/SmartChart/Components/all-markers.jsx b/packages/reports/src/Modules/SmartChart/Components/all-markers.jsx
deleted file mode 100644
index 8641332bc533..000000000000
--- a/packages/reports/src/Modules/SmartChart/Components/all-markers.jsx
+++ /dev/null
@@ -1,609 +0,0 @@
-// Things to do before touching this file :P
-// 1- Please read https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
-// 2- Please read RawMarker.jsx in https://github.com/binary-com/SmartCharts
-// 3- Please read contract-store.js & trade.jsx carefully
-import React from 'react';
-import { getDecimalPlaces } from '@deriv/shared';
-import { RawMarker } from '../index';
-
-import * as ICONS from './icons';
-
-const is_firefox = navigator.userAgent.search('Firefox') > 0;
-
-const RawMarkerMaker = draw_callback => {
-    const Marker = ({ epoch_array, price_array, ...rest }) => (
-        <RawMarker
-            epoch_array={epoch_array}
-            price_array={price_array}
-            draw_callback={args => draw_callback({ ...args, ...rest })}
-        />
-    );
-    return Marker;
-};
-
-function get_color({ status, profit, is_dark_theme }) {
-    const colors = is_dark_theme
-        ? {
-              open: '#377cfc',
-              won: '#00a79e',
-              lost: '#cc2e3d',
-              sold: '#ffad3a',
-              fg: '#ffffff',
-              bg: '#0e0e0e',
-          }
-        : {
-              open: '#377cfc',
-              won: '#4bb4b3',
-              lost: '#ec3f3f',
-              sold: '#ffad3a',
-              fg: '#333333',
-              bg: '#ffffff',
-          };
-    let color = colors[status || 'open'];
-    if (status === 'open' && profit) {
-        color = colors[profit > 0 ? 'won' : 'lost'];
-    }
-    return color;
-}
-
-const calc_scale = zoom => {
-    return zoom ? Math.max(Math.min(Math.sqrt(zoom / 18), 1.2), 0.8) : 1;
-};
-
-const hex_map = [];
-const calc_opacity = (from, to) => {
-    if (hex_map.length === 0) {
-        for (let i = 255; i >= 0; --i) {
-            hex_map[i] = (i < 16 ? '0' : '') + i.toString(16);
-        }
-    }
-    const opacity = Math.floor(Math.min(Math.max(to - from - 10, 0) / 6, 1) * 255);
-    return hex_map[opacity];
-};
-
-/** @param {CanvasRenderingContext2D} ctx */
-const draw_path = (ctx, { zoom, top, left, icon }) => {
-    ctx.save();
-    const scale = calc_scale(zoom);
-
-    ctx.translate(left - (icon.width * scale) / 2, top - (icon.height * scale) / 2);
-
-    ctx.scale(scale, scale);
-
-    icon.paths.forEach(({ points, fill, stroke }) => {
-        if (fill) {
-            ctx.fillStyle = fill;
-        }
-        if (stroke) {
-            ctx.strokeStyle = stroke;
-        }
-        ctx.beginPath();
-        let prev_x, prev_y;
-        for (let idx = 0; idx < points.length; idx++) {
-            let x, y, cx1, cx2, cy1, cy2, r;
-            if (points[idx] === 'M') {
-                x = points[++idx];
-                y = points[++idx];
-                ctx.moveTo(x, y);
-            } else if (points[idx] === 'L') {
-                x = points[++idx];
-                y = points[++idx];
-                ctx.lineTo(x, y);
-            } else if (points[idx] === 'V') {
-                y = points[++idx];
-                ctx.lineTo(prev_x, y);
-            } else if (points[idx] === 'H') {
-                x = points[++idx];
-                ctx.lineTo(x, prev_y);
-            } else if (points[idx] === 'Q') {
-                cx1 = points[++idx];
-                cy1 = points[++idx];
-                x = points[++idx];
-                y = points[++idx];
-                ctx.quadraticCurveTo(cx1, cy1, x, y);
-            } else if (points[idx] === 'C') {
-                cx1 = points[++idx];
-                cy1 = points[++idx];
-                cx2 = points[++idx];
-                cy2 = points[++idx];
-                x = points[++idx];
-                y = points[++idx];
-                ctx.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);
-            } else if (points[idx] === 'A') {
-                x = points[++idx];
-                y = points[++idx];
-                r = points[++idx];
-                const start_a = points[++idx];
-                const end_a = points[++idx];
-                ctx.arc(x, y, r, start_a, end_a);
-            }
-            prev_x = x;
-            prev_y = y;
-        }
-        ctx.closePath();
-        if (fill) {
-            ctx.fill();
-        }
-        if (stroke) {
-            ctx.stroke();
-        }
-    });
-    ctx.scale(1, 1);
-    ctx.restore();
-};
-
-const render_label = ({ ctx, text, tick: { zoom, left, top } }) => {
-    const scale = calc_scale(zoom);
-    const size = Math.floor(scale * 3 + 7);
-    ctx.font = `${size}px Roboto`;
-    text.split(/\n/).forEach((line, idx) => {
-        const w = Math.ceil(ctx.measureText(line).width);
-        ctx.fillText(line, left - 5 - w, top + idx * size + 1);
-    });
-};
-
-const shadowed_text = ({ ctx, is_dark_theme, text, left, top, scale }) => {
-    ctx.textAlign = 'center';
-    const size = Math.floor(scale * 12);
-    ctx.font = `bold ${size}px BinarySymbols, Roboto`;
-    if (!is_firefox) {
-        ctx.shadowColor = is_dark_theme ? 'rgba(16,19,31,1)' : 'rgba(255,255,255,1)';
-        ctx.shadowBlur = 12;
-    }
-    // fillText once in firefox due to disabling of text shadows, for default cases where its enabled, set to 5 (to add blur intensity)
-    for (let i = 0; i < (is_firefox ? 1 : 5); ++i) {
-        ctx.fillText(text, left, top);
-    }
-};
-
-const TickContract = RawMarkerMaker(
-    ({
-        ctx: context,
-        canvas_height: canvas_fixed_height,
-        points: [start, ...ticks],
-        prices: [barrier], // TODO: support two barrier contracts
-        is_last_contract,
-        is_dark_theme,
-        granularity,
-        contract_info: {
-            // contract_type,
-            // exit_tick_time,
-            status,
-            profit,
-            is_sold,
-            is_expired,
-            // tick_stream,
-            tick_count,
-        },
-    }) => {
-        /** @type {CanvasRenderingContext2D} */
-        const ctx = context;
-
-        const color = get_color({
-            is_dark_theme,
-            status,
-            profit: is_sold ? profit : null,
-        });
-
-        ctx.save();
-        ctx.strokeStyle = color;
-        ctx.fillStyle = color;
-
-        const draw_start_line = is_last_contract && start.visible && !is_sold;
-        const scale = calc_scale(start.zoom);
-
-        const canvas_height = canvas_fixed_height / window.devicePixelRatio;
-        if (barrier) {
-            barrier = Math.min(Math.max(barrier, 2), canvas_height - 32); // eslint-disable-line
-        }
-
-        if (draw_start_line) {
-            render_label({
-                ctx,
-                text: 'Start\nTime',
-                tick: { zom: start.zoom, left: start.left - 1 * scale, top: canvas_height - 50 },
-            });
-            ctx.beginPath();
-            ctx.setLineDash([3, 3]);
-            ctx.moveTo(start.left - 1 * scale, 0);
-            if (ticks.length && barrier) {
-                ctx.lineTo(start.left - 1 * scale, barrier - 34 * scale);
-                ctx.moveTo(start.left - 1 * scale, barrier + 4 * scale);
-            }
-            ctx.lineTo(start.left - 1 * scale, canvas_fixed_height);
-            ctx.stroke();
-        }
-
-        if (!ticks.length || !barrier) {
-            ctx.restore();
-            return;
-        }
-        const entry = ticks[0];
-        const exit = ticks[ticks.length - 1];
-
-        // barrier line
-        const opacity = is_sold ? calc_opacity(start.left, exit.left) : '';
-        if (start.visible || entry.visible || exit.visible) {
-            ctx.strokeStyle = color + opacity;
-            ctx.beginPath();
-            ctx.setLineDash([1, 1]);
-            ctx.moveTo(start.left, barrier);
-            ctx.lineTo(entry.left, barrier);
-            ctx.stroke();
-
-            ctx.beginPath();
-            ctx.setLineDash([]);
-            ctx.moveTo(entry.left, barrier);
-            ctx.lineTo(exit.left, barrier);
-            ctx.stroke();
-            ctx.strokeStyle = color;
-        }
-        // ticks for last contract
-        if (is_last_contract && granularity === 0 && !is_sold) {
-            ticks
-                .filter(tick => tick.visible)
-                .forEach(tick => {
-                    const clr = tick === exit ? color : get_color({ status: 'fg', is_dark_theme });
-                    ctx.fillStyle = clr + opacity;
-                    ctx.beginPath();
-                    ctx.arc(tick.left - 1 * scale, tick.top, 1.5 * scale, 0, Math.PI * 2);
-                    ctx.fill();
-                });
-            ctx.fillStyle = color;
-        }
-        // entry & expiry markers
-        if (granularity === 0) {
-            [entry, is_expired ? exit : null].forEach(tick => {
-                if (tick && tick.visible) {
-                    ctx.strokeStyle = color + opacity;
-                    ctx.setLineDash([2, 2]);
-                    ctx.beginPath();
-                    ctx.moveTo(tick.left - 1 * scale, tick.top);
-                    ctx.lineTo(tick.left - 1 * scale, barrier);
-                    ctx.stroke();
-
-                    ctx.fillStyle = color + opacity;
-                    ctx.beginPath();
-                    ctx.arc(tick.left - 1 * scale, tick.top, 3 * scale, 0, Math.PI * 2);
-                    ctx.fill();
-
-                    if (tick === entry) {
-                        ctx.beginPath();
-                        ctx.fillStyle = get_color({ status: 'bg', is_dark_theme }) + opacity;
-                        ctx.arc(tick.left - 1 * scale, tick.top, 2 * scale, 0, Math.PI * 2);
-                        ctx.fill();
-                    }
-                }
-            });
-            ctx.strokeStyle = color;
-            ctx.fillStyle = color;
-        }
-        // count down
-        if (start.visible && !is_sold) {
-            shadowed_text({
-                ctx,
-                scale,
-                is_dark_theme,
-                text: `${ticks.length - 1}/${tick_count}`,
-                left: start.left,
-                top: barrier - 27 * scale,
-            });
-        }
-        // start-time marker
-        if (start.visible) {
-            draw_path(ctx, {
-                top: barrier - 9 * scale,
-                left: start.left - 1 * scale,
-                zoom: start.zoom,
-                icon: ICONS.START.with_color(
-                    color + (is_sold ? opacity : ''),
-                    get_color({ status: 'bg', is_dark_theme }) + (is_sold ? opacity : '')
-                ),
-            });
-        }
-        // status marker
-        if (exit.visible && is_sold) {
-            draw_path(ctx, {
-                top: barrier - 9 * scale,
-                left: exit.left + 8 * scale,
-                zoom: exit.zoom,
-                icon: ICONS.END.with_color(color, get_color({ status: 'bg', is_dark_theme })),
-            });
-        }
-        ctx.restore();
-    }
-);
-
-const currency_symbols = {
-    AUD: '\u0041\u0024',
-    EUR: '\u20AC',
-    GBP: '\u00A3',
-    JPY: '\u00A5',
-    USD: '\u0024',
-    BTC: '\u20bf',
-    BCH: '\ue901',
-    ETH: '\u0045',
-    ETC: '\ue900',
-    LTC: '\u0141',
-    UST: '\u20ae',
-};
-
-const NonTickContract = RawMarkerMaker(
-    ({
-        ctx: context,
-        canvas_height: canvas_fixed_height,
-        points: [start, expiry, entry, exit],
-        is_last_contract,
-        prices: [barrier, entry_tick_top, exit_tick_top], // TODO: support two barrier contracts
-        is_dark_theme,
-        granularity,
-        currency,
-        contract_info: {
-            // contract_type,
-            // exit_tick_time,
-            // is_expired,
-            is_sold,
-            status,
-            profit,
-        },
-    }) => {
-        /** @type {CanvasRenderingContext2D} */
-        const ctx = context;
-
-        // the y value reported for candles is not accurate
-        if (granularity !== 0) {
-            if (entry) {
-                entry.top = entry_tick_top;
-            }
-            if (exit) {
-                exit.top = exit_tick_top;
-            }
-        }
-
-        const color = get_color({ status, profit, is_dark_theme });
-
-        ctx.save();
-        ctx.strokeStyle = color;
-        ctx.fillStyle = color;
-
-        const draw_start_line = is_last_contract && start.visible && !is_sold;
-        const show_profit = is_last_contract && !is_sold && profit && start.visible && barrier;
-        const scale = calc_scale(start.zoom);
-        const opacity = is_sold ? calc_opacity(start.left, expiry.left) : '';
-
-        const canvas_height = canvas_fixed_height / window.devicePixelRatio;
-        if (barrier) {
-            barrier = Math.min(Math.max(barrier, 2), canvas_height - 32); // eslint-disable-line
-        }
-
-        if (draw_start_line) {
-            render_label({
-                ctx,
-                text: 'Start\nTime',
-                tick: {
-                    zom: start.zoom,
-                    left: start.left - 1 * scale,
-                    top: canvas_height - 50,
-                },
-            });
-            ctx.beginPath();
-            ctx.setLineDash([3, 3]);
-            ctx.moveTo(start.left - 1 * scale, 0);
-            if (barrier) {
-                ctx.lineTo(start.left - 1 * scale, barrier - (show_profit ? 38 : 20) * scale);
-                ctx.moveTo(start.left - 1 * scale, barrier + 4 * scale);
-            }
-            ctx.lineTo(start.left - 1 * scale, canvas_fixed_height);
-            ctx.stroke();
-        }
-        // barrier line
-        if (barrier && entry && (start.visible || expiry.visible || Math.sign(start.left) !== Math.sign(expiry.left))) {
-            ctx.strokeStyle = color + opacity;
-            ctx.beginPath();
-            ctx.setLineDash([1, 1]);
-            ctx.moveTo(start.left, barrier);
-            ctx.lineTo(entry.left, barrier);
-            ctx.stroke();
-
-            ctx.beginPath();
-            ctx.setLineDash([]);
-            ctx.moveTo(entry.left, barrier);
-            ctx.lineTo(expiry.left, barrier);
-            ctx.stroke();
-            ctx.strokeStyle = color;
-        }
-
-        // entry & expiry tick markers
-        [entry, exit].forEach(tick => {
-            if (tick && tick.visible) {
-                ctx.strokeStyle = color + opacity;
-                ctx.setLineDash([2, 2]);
-                ctx.beginPath();
-                ctx.moveTo(tick.left - 1 * scale, tick.top);
-                ctx.lineTo(tick.left - 1 * scale, barrier);
-                ctx.stroke();
-
-                ctx.fillStyle = color + opacity;
-                ctx.beginPath();
-                ctx.arc(tick.left - 1 * scale, tick.top, 3 * scale, 0, Math.PI * 2);
-                ctx.fill();
-
-                if (tick === entry) {
-                    ctx.beginPath();
-                    ctx.fillStyle = get_color({ status: 'bg', is_dark_theme }) + opacity;
-                    ctx.arc(tick.left - 1 * scale, tick.top, 2 * scale, 0, Math.PI * 2);
-                    ctx.fill();
-                }
-                ctx.fillStyle = color;
-                ctx.strokeStyle = color;
-            }
-        });
-
-        // start-time marker
-        if (start && start.visible && barrier) {
-            draw_path(ctx, {
-                top: barrier - 9 * scale,
-                left: start.left - 1 * scale,
-                zoom: start.zoom,
-                icon: ICONS.START.with_color(color + opacity),
-            });
-        }
-        // show the profit
-        if (show_profit) {
-            const symbol = currency_symbols[currency] || '';
-            const decimal_places = getDecimalPlaces(currency);
-            const sign = profit < 0 ? '-' : profit > 0 ? '+' : ' '; // eslint-disable-line
-            const text = `${sign}${symbol}${Math.abs(profit).toFixed(decimal_places)}`;
-            shadowed_text({
-                ctx,
-                scale,
-                text,
-                is_dark_theme,
-                left: start.left,
-                top: barrier - 28 * scale,
-            });
-        }
-        // status marker
-        if (expiry.visible) {
-            draw_path(ctx, {
-                top: barrier - 9 * scale,
-                left: expiry.left + 8 * scale,
-                zoom: expiry.zoom,
-                icon: ICONS.END.with_color(color, get_color({ status: 'bg', is_dark_theme })),
-            });
-        }
-        ctx.restore();
-    }
-);
-
-const DigitContract = RawMarkerMaker(
-    ({
-        ctx: context,
-        points: [start, ...ticks],
-        prices: [entry_tick_top, exit_tick_top],
-        is_last_contract,
-        is_dark_theme,
-        granularity,
-        contract_info: {
-            // contract_type,
-            status,
-            profit,
-            is_sold,
-            // barrier,
-            tick_stream,
-            tick_count,
-        },
-    }) => {
-        /** @type {CanvasRenderingContext2D} */
-        const ctx = context;
-
-        const color = get_color({
-            is_dark_theme,
-            status,
-            profit: is_sold ? profit : null,
-        });
-
-        ctx.save();
-        ctx.strokeStyle = color;
-        ctx.fillStyle = color;
-
-        const draw_start_line = is_last_contract && start.visible && !is_sold;
-        const scale = calc_scale(start.zoom);
-
-        if (granularity !== 0 && start && entry_tick_top) {
-            start.top = entry_tick_top;
-        }
-        if (draw_start_line) {
-            ctx.beginPath();
-            ctx.setLineDash([3, 3]);
-            ctx.moveTo(start.left - 1 * scale, 0);
-            if (ticks.length) {
-                ctx.lineTo(start.left - 1 * scale, start.top - 34 * scale);
-                ctx.moveTo(start.left - 1 * scale, start.top + 4 * scale);
-            }
-            ctx.lineTo(start.left - 1 * scale, ctx.canvas.height);
-            ctx.stroke();
-        }
-
-        if (!ticks.length) {
-            ctx.restore();
-            return;
-        }
-        const expiry = ticks[ticks.length - 1];
-        const opacity = is_sold ? calc_opacity(start.left, expiry.left) : '';
-        if (granularity !== 0 && expiry && exit_tick_top) {
-            expiry.top = exit_tick_top;
-        }
-
-        // count down
-        if (start.visible && start.top && !is_sold) {
-            shadowed_text({
-                ctx,
-                scale,
-                is_dark_theme,
-                text: `${ticks.length}/${tick_count}`,
-                left: start.left - 1 * scale,
-                top: start.top - 27 * scale,
-            });
-        }
-        // start-time marker
-        if (start.visible && (granularity === 0 || !is_sold)) {
-            draw_path(ctx, {
-                top: start.top - 9 * scale,
-                left: start.left - 1 * scale,
-                zoom: start.zoom,
-                icon: ICONS.START.with_color(color + opacity, get_color({ status: 'bg', is_dark_theme }) + opacity),
-            });
-        }
-        // remaining ticks
-        ticks.forEach((tick, idx) => {
-            if (tick !== expiry) {
-                return;
-            }
-            if (!tick.visible) {
-                return;
-            }
-            if (granularity !== 0 && tick !== expiry) {
-                return;
-            }
-            if (granularity !== 0 && tick === expiry && !is_sold) {
-                return;
-            }
-            const clr = tick !== expiry ? get_color({ status: 'fg', is_dark_theme }) : color;
-            ctx.beginPath();
-            ctx.fillStyle = clr;
-            ctx.arc(tick.left, tick.top, 7 * scale, 0, Math.PI * 2);
-            ctx.fill();
-
-            ctx.beginPath();
-            ctx.fillStyle = is_sold ? color : get_color({ status: 'bg', is_dark_theme });
-            ctx.arc(tick.left, tick.top, 6 * scale, 0, Math.PI * 2);
-            ctx.fill();
-
-            const last_tick = tick_stream[idx];
-            const last_digit = last_tick.tick_display_value.slice(-1);
-            ctx.fillStyle = is_sold ? 'white' : clr;
-            ctx.textAlign = 'center';
-            ctx.shadowBlur = 0;
-            ctx.font = `bold ${12 * scale}px BinarySymbols, Roboto`;
-            ctx.fillText(last_digit, tick.left, tick.top);
-        });
-        // status marker
-        if (expiry.visible && is_sold) {
-            ctx.fillStyle = color;
-            draw_path(ctx, {
-                top: expiry.top - 16 * scale,
-                left: expiry.left + 8 * scale,
-                zoom: expiry.zoom,
-                icon: ICONS.END.with_color(color, get_color({ status: 'bg', is_dark_theme })),
-            });
-        }
-        ctx.restore();
-    }
-);
-
-export default {
-    TickContract,
-    NonTickContract,
-    DigitContract,
-};
diff --git a/packages/reports/src/Modules/SmartChart/Components/control-widgets.jsx b/packages/reports/src/Modules/SmartChart/Components/control-widgets.jsx
deleted file mode 100644
index c0218d11fb5e..000000000000
--- a/packages/reports/src/Modules/SmartChart/Components/control-widgets.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { DesktopWrapper } from '@deriv/components';
-import { ChartMode, DrawTools, Share, StudyLegend, Views } from '../index';
-
-const ControlWidgets = ({ updateChartType, updateGranularity }) => (
-    <React.Fragment>
-        <DesktopWrapper>
-            <ChartMode
-                portalNodeId='modal_root'
-                onChartType={type => updateChartType(type)}
-                onGranularity={granularity => updateGranularity(granularity)}
-            />
-            <StudyLegend portalNodeId='modal_root' searchInputClassName='data-hj-whitelist' />
-            <DrawTools portalNodeId='modal_root' />
-            <Views portalNodeId='modal_root' searchInputClassName='data-hj-whitelist' />
-            <Share portalNodeId='modal_root' />
-        </DesktopWrapper>
-    </React.Fragment>
-);
-
-ControlWidgets.propTypes = {
-    updateChartType: PropTypes.func,
-    updateGranularity: PropTypes.func,
-};
-
-export default ControlWidgets;
diff --git a/packages/reports/src/Modules/SmartChart/Components/toolbar-widgets.jsx b/packages/reports/src/Modules/SmartChart/Components/toolbar-widgets.jsx
deleted file mode 100644
index 8b8a1b750423..000000000000
--- a/packages/reports/src/Modules/SmartChart/Components/toolbar-widgets.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { isDesktop, isMobile } from '@deriv/shared';
-import { ChartMode, DrawTools, Share, StudyLegend, Views, ToolbarWidget } from '../index';
-
-const ToolbarWidgets = ({ position, updateChartType, updateGranularity }) => (
-    <ToolbarWidget position={position || isMobile() ? 'bottom' : null}>
-        <ChartMode portalNodeId='modal_root' onChartType={updateChartType} onGranularity={updateGranularity} />
-        {isDesktop() && <StudyLegend portalNodeId='modal_root' searchInputClassName='data-hj-whitelist' />}
-        {isDesktop() && <Views portalNodeId='modal_root' searchInputClassName='data-hj-whitelist' />}
-        {isDesktop() && <DrawTools portalNodeId='modal_root' />}
-        {isDesktop() && <Share portalNodeId='modal_root' />}
-    </ToolbarWidget>
-);
-
-ToolbarWidgets.propTypes = {
-    position: PropTypes.string,
-    updateChartType: PropTypes.func,
-    updateGranularity: PropTypes.func,
-};
-
-export default React.memo(ToolbarWidgets);
diff --git a/packages/reports/src/Modules/SmartChart/Components/top-widgets.jsx b/packages/reports/src/Modules/SmartChart/Components/top-widgets.jsx
deleted file mode 100644
index 7531dbd7cd0e..000000000000
--- a/packages/reports/src/Modules/SmartChart/Components/top-widgets.jsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { DesktopWrapper, MobileWrapper, Text } from '@deriv/components';
-import { localize } from '@deriv/translations';
-import { isEnded, isDigitContract } from '@deriv/shared';
-import { connect } from 'Stores/connect';
-import { ChartTitle } from '../index';
-
-const TradeInfo = ({ markers_array, granularity }) => {
-    const latest_tick_contract = markers_array[markers_array.length - 1];
-    if (!latest_tick_contract || !latest_tick_contract.contract_info.tick_stream) return null;
-
-    const is_ended = isEnded(latest_tick_contract.contract_info);
-    if (is_ended || granularity !== 0) return null;
-
-    const { contract_type, tick_stream, tick_count } = latest_tick_contract.contract_info;
-    const current_tick = isDigitContract(contract_type) ? tick_stream.length : Math.max(tick_stream.length - 1, 0);
-    return (
-        <Text weight='bold' className='recent-trade-info'>
-            {localize('Tick')} {current_tick}/{tick_count}
-        </Text>
-    );
-};
-
-const RecentTradeInfo = connect(({ modules }) => ({
-    granularity: modules.contract_trade.granularity,
-    markers_array: modules.contract_trade.markers_array,
-}))(TradeInfo);
-
-const TopWidgets = ({
-    InfoBox,
-    is_mobile,
-    is_title_enabled = true,
-    onSymbolChange,
-    y_axis_width,
-    theme,
-    open_market,
-    open,
-    is_digits_widget_active,
-}) => {
-    const ChartTitleLocal = (
-        <ChartTitle
-            open_market={open_market}
-            open={open}
-            enabled={is_title_enabled}
-            onChange={onSymbolChange}
-            searchInputClassName='data-hj-whitelist'
-            isNestedList={is_mobile}
-            portalNodeId={is_mobile ? 'deriv_app' : undefined}
-        />
-    );
-
-    const portal = ReactDOM.createPortal(
-        <div className={`smartcharts-${theme}`}>
-            <div
-                className='top-widgets-portal'
-                style={{
-                    width: `calc(100% - ${y_axis_width ? y_axis_width + 5 : 0}px)`,
-                }}
-            >
-                {ChartTitleLocal}
-                {!is_digits_widget_active && <RecentTradeInfo />}
-            </div>
-        </div>,
-        document.getElementById('app_contents')
-    );
-
-    return (
-        <React.Fragment>
-            {InfoBox}
-            <MobileWrapper>{portal}</MobileWrapper>
-            <DesktopWrapper>{ChartTitleLocal}</DesktopWrapper>
-        </React.Fragment>
-    );
-};
-
-TopWidgets.propTypes = {
-    InfoBox: PropTypes.node,
-    is_mobile: PropTypes.bool,
-    is_title_enabled: PropTypes.bool,
-    onSymbolChange: PropTypes.func,
-};
-
-export default TopWidgets;
diff --git a/packages/reports/src/Modules/SmartChart/index.js b/packages/reports/src/Modules/SmartChart/index.js
deleted file mode 100644
index 7ece48fba58a..000000000000
--- a/packages/reports/src/Modules/SmartChart/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import { getUrlBase } from '@deriv/shared';
-
-const Module = import(/* webpackChunkName: "smart_chart", webpackPreload: true */ '@deriv/deriv-charts');
-
-Module.then(({ setSmartChartsPublicPath }) => {
-    setSmartChartsPublicPath(getUrlBase('/js/smartcharts/'));
-});
-
-// React.Lazy expects a default export for the component
-// SmartChart library exports many components
-const load = component_name => () =>
-    Module.then(module => {
-        return { default: module[component_name] };
-    });
-
-export const SmartChart = React.lazy(load('SmartChart'));
-export const ChartTitle = React.lazy(load('ChartTitle'));
-
-export const ChartSize = React.lazy(load('ChartSize'));
-export const ChartMode = React.lazy(load('ChartMode'));
-export const DrawTools = React.lazy(load('DrawTools'));
-export const Share = React.lazy(load('Share'));
-export const StudyLegend = React.lazy(load('StudyLegend'));
-export const Views = React.lazy(load('Views'));
-export const ToolbarWidget = React.lazy(load('ToolbarWidget'));
-
-export const FastMarker = React.lazy(load('FastMarker'));
-export const RawMarker = React.lazy(load('RawMarker'));

From d24e1f8b74de5629f7a8892a9257e094d126108d Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Thu, 19 May 2022 11:39:29 +0430
Subject: [PATCH 21/64] fix import from trader in reports

---
 packages/core/build/config.js                 |   8 +-
 packages/reports/build/webpack.config.js      |   2 +
 packages/reports/package.json                 |   1 +
 .../Elements/ContentLoader/index.js           |   2 -
 .../Elements/ContentLoader/trade-params.jsx   |  44 ---
 .../PositionsDrawerCard/index.js              |   1 -
 .../positions-drawer-card.jsx                 | 230 ------------
 .../__tests__/result-mobile.spec.js           |  20 -
 .../helpers/__tests__/positions-helper.js     |  28 --
 .../Elements/PositionsDrawer/helpers/index.js |   1 -
 .../helpers/positions-helper.js               |  49 ---
 .../Elements/PositionsDrawer/index.js         |   1 -
 .../PositionsDrawer/positions-drawer.jsx      | 159 --------
 .../PositionsDrawer/positions-modal-card.jsx  | 342 ------------------
 .../PositionsDrawer/result-mobile.jsx         |  52 ---
 .../Routes/__tests__/helpers.spec.js          |   6 -
 .../reports/src/Components/Routes/helpers.js  |   2 -
 .../reports/src/Containers/open-positions.jsx |  47 ++-
 .../reports/src/Containers/profit-table.jsx   |   3 +-
 packages/reports/src/Containers/statement.jsx |   3 +-
 packages/trader/build/webpack.config.js       |   3 +
 .../Elements/ContentLoader/index.js           |   1 -
 .../ContentLoader/reports-table-row.jsx       |  28 --
 .../positions-drawer-card.jsx                 |  34 +-
 .../PositionsDrawer/positions-drawer.jsx      |  38 +-
 .../toggle-positions-mobile.jsx               |   2 +-
 .../Form/CompositeCalendar/calendar-icon.jsx  |  11 -
 .../composite-calendar-mobile.jsx             | 250 -------------
 .../CompositeCalendar/composite-calendar.jsx  | 191 ----------
 .../Form/CompositeCalendar/index.js           |   1 -
 .../Form/CompositeCalendar/list-item.jsx      |  22 --
 .../Form/CompositeCalendar/side-list.jsx      |  27 --
 .../CompositeCalendar/two-month-picker.jsx    | 116 ------
 .../src/Utils/Helpers/market-underlying.js    |  13 -
 34 files changed, 106 insertions(+), 1632 deletions(-)
 delete mode 100644 packages/reports/src/Components/Elements/ContentLoader/trade-params.jsx
 delete mode 100644 packages/reports/src/Components/Elements/PositionsDrawer/PositionsDrawerCard/index.js
 delete mode 100644 packages/reports/src/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx
 delete mode 100644 packages/reports/src/Components/Elements/PositionsDrawer/__tests__/result-mobile.spec.js
 delete mode 100644 packages/reports/src/Components/Elements/PositionsDrawer/helpers/__tests__/positions-helper.js
 delete mode 100644 packages/reports/src/Components/Elements/PositionsDrawer/helpers/index.js
 delete mode 100644 packages/reports/src/Components/Elements/PositionsDrawer/helpers/positions-helper.js
 delete mode 100644 packages/reports/src/Components/Elements/PositionsDrawer/index.js
 delete mode 100644 packages/reports/src/Components/Elements/PositionsDrawer/positions-drawer.jsx
 delete mode 100644 packages/reports/src/Components/Elements/PositionsDrawer/positions-modal-card.jsx
 delete mode 100644 packages/reports/src/Components/Elements/PositionsDrawer/result-mobile.jsx
 delete mode 100644 packages/trader/src/App/Components/Elements/ContentLoader/reports-table-row.jsx
 delete mode 100644 packages/trader/src/App/Components/Form/CompositeCalendar/calendar-icon.jsx
 delete mode 100644 packages/trader/src/App/Components/Form/CompositeCalendar/composite-calendar-mobile.jsx
 delete mode 100644 packages/trader/src/App/Components/Form/CompositeCalendar/composite-calendar.jsx
 delete mode 100644 packages/trader/src/App/Components/Form/CompositeCalendar/index.js
 delete mode 100644 packages/trader/src/App/Components/Form/CompositeCalendar/list-item.jsx
 delete mode 100644 packages/trader/src/App/Components/Form/CompositeCalendar/side-list.jsx
 delete mode 100644 packages/trader/src/App/Components/Form/CompositeCalendar/two-month-picker.jsx

diff --git a/packages/core/build/config.js b/packages/core/build/config.js
index 8d874d7f09eb..9250dbe65b29 100644
--- a/packages/core/build/config.js
+++ b/packages/core/build/config.js
@@ -50,8 +50,12 @@ const copyConfig = base => {
             to: 'trader',
         },
         {
-            from: path.resolve(__dirname, '../node_modules/@deriv/reports/dist/reports'),
-            to: 'reports',
+            from: path.resolve(__dirname, '../node_modules/@deriv/reports/dist/reports/js/'),
+            to: 'reports/js',
+        },
+        {
+            from: path.resolve(__dirname, '../node_modules/@deriv/reports/dist/reports/css/'),
+            to: 'reports/css',
         },
         {
             from: path.resolve(__dirname, '../node_modules/@deriv/cfd/dist/cfd'),
diff --git a/packages/reports/build/webpack.config.js b/packages/reports/build/webpack.config.js
index c436373ec902..d7f47ac38b5c 100644
--- a/packages/reports/build/webpack.config.js
+++ b/packages/reports/build/webpack.config.js
@@ -45,11 +45,13 @@ module.exports = function (env) {
                 '@deriv/components': '@deriv/components',
                 '@deriv/translations': '@deriv/translations',
                 '@deriv/deriv-charts': '@deriv/deriv-charts',
+                '@deriv/trader': '@deriv/trader',
             },
             /^@deriv\/shared\/.+$/,
             /^@deriv\/components\/.+$/,
             /^@deriv\/translations\/.+$/,
             /^@deriv\/account\/.+$/,
+            /^@deriv\/trader\/.+$/,
         ],
         target: 'web',
         plugins: plugins(base, false),
diff --git a/packages/reports/package.json b/packages/reports/package.json
index fa59399f59ea..ef33ca51863f 100644
--- a/packages/reports/package.json
+++ b/packages/reports/package.json
@@ -86,6 +86,7 @@
       "@deriv/api-types": "1.0.48",
       "@deriv/components": "^1.0.0",
       "@deriv/deriv-api": "^1.0.8",
+      "@deriv/trader": "^3.8.0",
       "@deriv/shared": "^1.0.0",
       "@deriv/translations": "^1.0.0",
       "@types/classnames": "^2.2.11",
diff --git a/packages/reports/src/Components/Elements/ContentLoader/index.js b/packages/reports/src/Components/Elements/ContentLoader/index.js
index 90c86e01a015..9e70635b68c6 100644
--- a/packages/reports/src/Components/Elements/ContentLoader/index.js
+++ b/packages/reports/src/Components/Elements/ContentLoader/index.js
@@ -1,3 +1 @@
-export * from './positions-card.jsx';
 export * from './reports-table-row.jsx';
-export * from './trade-params.jsx';
diff --git a/packages/reports/src/Components/Elements/ContentLoader/trade-params.jsx b/packages/reports/src/Components/Elements/ContentLoader/trade-params.jsx
deleted file mode 100644
index 5b1588d8f0ca..000000000000
--- a/packages/reports/src/Components/Elements/ContentLoader/trade-params.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import ContentLoader from 'react-content-loader';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { DesktopWrapper, MobileWrapper } from '@deriv/components';
-
-const TradeParamsLoader = ({ speed }) => (
-    <>
-        <MobileWrapper>
-            <ContentLoader
-                height={214}
-                width={344}
-                speed={speed}
-                primaryColor={'var(--general-section-1)'}
-                secondaryColor={'var(--general-hover)'}
-            >
-                <rect x='148' y='24' rx='3' ry='3' width='40' height='4' />
-                <rect x='8' y='40' rx='4' ry='4' width='328' height='40' />
-                <rect x='8' y='88' rx='4' ry='4' width='328' height='40' />
-                <rect x='8' y='136' rx='4' ry='4' width='160' height='70' />
-                <rect x='176' y='136' rx='4' ry='4' width='160' height='70' />
-            </ContentLoader>
-        </MobileWrapper>
-        <DesktopWrapper>
-            <ContentLoader
-                height={548}
-                width={240}
-                speed={speed}
-                primaryColor={'var(--general-section-1)'}
-                secondaryColor={'var(--general-hover)'}
-            >
-                <rect x='0' y='0' rx='4' ry='4' width='240' height='76' />
-                <rect x='0' y='84' rx='4' ry='4' width='240' height='132' />
-                <rect x='0' y='224' rx='4' ry='4' width='240' height='120' />
-                <rect x='0' y='352' rx='4' ry='4' width='240' height='194' />
-            </ContentLoader>
-        </DesktopWrapper>
-    </>
-);
-
-TradeParamsLoader.propTypes = {
-    speed: PropTypes.number,
-};
-
-export { TradeParamsLoader };
diff --git a/packages/reports/src/Components/Elements/PositionsDrawer/PositionsDrawerCard/index.js b/packages/reports/src/Components/Elements/PositionsDrawer/PositionsDrawerCard/index.js
deleted file mode 100644
index 0097ff7902b7..000000000000
--- a/packages/reports/src/Components/Elements/PositionsDrawer/PositionsDrawerCard/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default from './positions-drawer-card.jsx';
diff --git a/packages/reports/src/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx b/packages/reports/src/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx
deleted file mode 100644
index 9b454cf9e45e..000000000000
--- a/packages/reports/src/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx
+++ /dev/null
@@ -1,230 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { NavLink } from 'react-router-dom';
-import { ContractCard } from '@deriv/components';
-import { getContractPath, isCryptoContract, isMultiplierContract } from '@deriv/shared';
-import { getCardLabels, getContractTypeDisplay } from '_common/contract';
-import { connect } from 'Stores/connect';
-import { connectWithContractUpdate } from 'Stores/Modules/Contract/Helpers/multiplier';
-
-import { getEndTime } from 'Stores/Modules/Contract/Helpers/logic';
-
-const PositionsDrawerCard = ({
-    addToast,
-    className,
-    display_name,
-    contract_info,
-    contract_update,
-    currency,
-    current_focus,
-    getContractById,
-    is_mobile,
-    is_sell_requested,
-    is_unsupported,
-    is_link_disabled,
-    profit_loss,
-    onClickCancel,
-    onClickSell,
-    onClickRemove,
-    onFooterEntered,
-    onMouseEnter,
-    onMouseLeave,
-    removeToast,
-    result,
-    setCurrentFocus,
-    server_time,
-    should_show_transition,
-    should_show_cancellation_warning,
-    status,
-    toggleCancellationWarning,
-    toggleUnsupportedContractModal,
-}) => {
-    const is_multiplier = isMultiplierContract(contract_info.contract_type);
-    const is_crypto = isCryptoContract(contract_info.underlying);
-    const has_progress_slider = !is_multiplier || (is_crypto && is_multiplier);
-    const has_ended = !!getEndTime(contract_info);
-
-    const loader_el = (
-        <div className='dc-contract-card__content-loader'>
-            <ContractCard.Loader speed={2} />
-        </div>
-    );
-
-    const card_header = (
-        <ContractCard.Header
-            contract_info={contract_info}
-            display_name={display_name}
-            getCardLabels={getCardLabels}
-            getContractTypeDisplay={getContractTypeDisplay}
-            has_progress_slider={!is_mobile && has_progress_slider}
-            is_mobile={is_mobile}
-            is_positions={true}
-            is_sell_requested={is_sell_requested}
-            onClickSell={onClickSell}
-            server_time={server_time}
-        />
-    );
-
-    const card_body = (
-        <ContractCard.Body
-            addToast={addToast}
-            connectWithContractUpdate={connectWithContractUpdate}
-            contract_info={contract_info}
-            contract_update={contract_update}
-            currency={currency}
-            current_focus={current_focus}
-            getCardLabels={getCardLabels}
-            getContractById={getContractById}
-            onMouseLeave={() => {
-                if (typeof onMouseLeave === 'function') onMouseLeave();
-            }}
-            is_mobile={is_mobile}
-            is_multiplier={is_multiplier}
-            is_sold={has_ended}
-            has_progress_slider={is_mobile && has_progress_slider}
-            removeToast={removeToast}
-            server_time={server_time}
-            setCurrentFocus={setCurrentFocus}
-            should_show_cancellation_warning={should_show_cancellation_warning}
-            status={status}
-            toggleCancellationWarning={toggleCancellationWarning}
-        />
-    );
-
-    const card_footer = (
-        <ContractCard.Footer
-            contract_info={contract_info}
-            getCardLabels={getCardLabels}
-            is_multiplier={is_multiplier}
-            is_positions={true}
-            is_sell_requested={is_sell_requested}
-            onClickCancel={onClickCancel}
-            onClickSell={onClickSell}
-            onFooterEntered={onFooterEntered}
-            server_time={server_time}
-            should_show_transition={should_show_transition}
-        />
-    );
-
-    const contract_el = (
-        <React.Fragment>
-            {card_header}
-            {card_body}
-        </React.Fragment>
-    );
-
-    const supported_contract_card = (
-        <div
-            className={classNames('dc-contract-card', {
-                'dc-contract-card--green': !is_multiplier && profit_loss > 0 && !result,
-                'dc-contract-card--red': !is_multiplier && profit_loss < 0 && !result,
-            })}
-            onClick={() => toggleUnsupportedContractModal(true)}
-        >
-            {contract_info.underlying ? contract_el : loader_el}
-        </div>
-    );
-
-    const unsupported_contract_card = is_link_disabled ? (
-        <div
-            className={classNames('dc-contract-card', {
-                'dc-contract-card--green': !is_multiplier && profit_loss > 0 && !result,
-                'dc-contract-card--red': !is_multiplier && profit_loss < 0 && !result,
-            })}
-        >
-            {contract_info.underlying ? contract_el : loader_el}
-        </div>
-    ) : (
-        <NavLink
-            className={classNames('dc-contract-card', {
-                'dc-contract-card--green': !is_multiplier && profit_loss > 0 && !result,
-                'dc-contract-card--red': !is_multiplier && profit_loss < 0 && !result,
-            })}
-            to={{
-                pathname: `/contract/${contract_info.contract_id}`,
-            }}
-        >
-            {contract_info.underlying ? contract_el : loader_el}
-        </NavLink>
-    );
-
-    return (
-        <ContractCard
-            contract_info={contract_info}
-            getCardLabels={getCardLabels}
-            getContractPath={getContractPath}
-            is_multiplier={is_multiplier}
-            is_positions={true}
-            is_unsupported={is_unsupported}
-            onClickRemove={onClickRemove}
-            profit_loss={profit_loss}
-            result={result}
-            should_show_result_overlay={true}
-            toggleUnsupportedContractModal={toggleUnsupportedContractModal}
-        >
-            <div
-                id={`dc_contract_card_${contract_info.contract_id}`}
-                className={className}
-                onMouseEnter={() => {
-                    if (typeof onMouseEnter === 'function') onMouseEnter();
-                }}
-                onMouseLeave={() => {
-                    if (typeof onMouseLeave === 'function') onMouseLeave();
-                }}
-                onClick={() => {
-                    if (typeof onMouseLeave === 'function') onMouseLeave();
-                }}
-            >
-                {is_unsupported ? supported_contract_card : unsupported_contract_card}
-                {card_footer}
-            </div>
-        </ContractCard>
-    );
-};
-
-PositionsDrawerCard.propTypes = {
-    addToast: PropTypes.func,
-    className: PropTypes.string,
-    contract_info: PropTypes.object,
-    currency: PropTypes.string,
-    current_focus: PropTypes.string,
-    current_tick: PropTypes.number,
-    duration: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    duration_unit: PropTypes.string,
-    exit_spot: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    id: PropTypes.number,
-    indicative: PropTypes.number,
-    is_loading: PropTypes.bool,
-    is_mobile: PropTypes.bool,
-    is_sell_requested: PropTypes.bool,
-    is_unsupported: PropTypes.bool,
-    is_valid_to_sell: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
-    onClickRemove: PropTypes.func,
-    onClickSell: PropTypes.func,
-    onClickCancel: PropTypes.func,
-    profit_loss: PropTypes.number,
-    result: PropTypes.string,
-    sell_time: PropTypes.number,
-    setCurrentFocus: PropTypes.func,
-    status: PropTypes.string,
-    toggleUnsupportedContractModal: PropTypes.func,
-    type: PropTypes.string,
-};
-
-export default connect(({ modules, ui, client, common }) => ({
-    currency: client.currency,
-    server_time: common.server_time,
-    addToast: ui.addToast,
-    current_focus: ui.current_focus,
-    onClickCancel: modules.portfolio.onClickCancel,
-    onClickSell: modules.portfolio.onClickSell,
-    onClickRemove: modules.portfolio.removePositionById,
-    getContractById: modules.contract_trade.getContractById,
-    is_mobile: ui.is_mobile,
-    removeToast: ui.removeToast,
-    setCurrentFocus: ui.setCurrentFocus,
-    should_show_cancellation_warning: ui.should_show_cancellation_warning,
-    toggleCancellationWarning: ui.toggleCancellationWarning,
-    toggleUnsupportedContractModal: ui.toggleUnsupportedContractModal,
-}))(PositionsDrawerCard);
diff --git a/packages/reports/src/Components/Elements/PositionsDrawer/__tests__/result-mobile.spec.js b/packages/reports/src/Components/Elements/PositionsDrawer/__tests__/result-mobile.spec.js
deleted file mode 100644
index a37c521b4405..000000000000
--- a/packages/reports/src/Components/Elements/PositionsDrawer/__tests__/result-mobile.spec.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import ResultMobile from '../result-mobile';
-
-describe('ResultMobile', () => {
-    it('should ResultMobile be in the DOM', () => {
-        const wrapper = render(<ResultMobile is_visible={true} />);
-        expect(wrapper.getByTestId('result_mobile')).toBeInTheDocument();
-    });
-
-    it('should ResultMobile render LOST if result is won ', () => {
-        const wrapper = render(<ResultMobile is_visible={true} result='won' />);
-        expect(wrapper.getByText('Won')).toBeInTheDocument(true);
-    });
-
-    it('should ResultMobile render LOST if result is not won ', () => {
-        const wrapper = render(<ResultMobile is_visible={true} result='lost' />);
-        expect(wrapper.getByText('Lost')).toBeInTheDocument(true);
-    });
-});
diff --git a/packages/reports/src/Components/Elements/PositionsDrawer/helpers/__tests__/positions-helper.js b/packages/reports/src/Components/Elements/PositionsDrawer/helpers/__tests__/positions-helper.js
deleted file mode 100644
index a05ee3e3f125..000000000000
--- a/packages/reports/src/Components/Elements/PositionsDrawer/helpers/__tests__/positions-helper.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { expect } from 'chai';
-import * as PositionsHelper from '../positions-helper';
-
-describe('positions-helper', () => {
-    describe('addCommaToNumber', () => {
-        it('should work as expected with number steps of thousands leading to a comma separated string', () => {
-            const number = 1224500.3153;
-            expect(PositionsHelper.addCommaToNumber(number)).to.eql('1,224,500.3153');
-        });
-    });
-    describe('getBarrierLabel', () => {
-        it('should return Target label if contract has a digit contract type', () => {
-            const contract_info = {
-                contract_type: 'DIGITDIFF',
-            };
-            expect(PositionsHelper.getBarrierLabel(contract_info)).to.eql('Target');
-        });
-    });
-    describe('getBarrierValue', () => {
-        it('should return correct target value according to digit type mapping if contract type is digit', () => {
-            const contract_info = {
-                contract_type: 'DIGITDIFF',
-                barrier: '1',
-            };
-            expect(PositionsHelper.getBarrierValue(contract_info)).to.eql('Not 1');
-        });
-    });
-});
diff --git a/packages/reports/src/Components/Elements/PositionsDrawer/helpers/index.js b/packages/reports/src/Components/Elements/PositionsDrawer/helpers/index.js
deleted file mode 100644
index 9233600ea4f4..000000000000
--- a/packages/reports/src/Components/Elements/PositionsDrawer/helpers/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './positions-helper';
diff --git a/packages/reports/src/Components/Elements/PositionsDrawer/helpers/positions-helper.js b/packages/reports/src/Components/Elements/PositionsDrawer/helpers/positions-helper.js
deleted file mode 100644
index 96803078b143..000000000000
--- a/packages/reports/src/Components/Elements/PositionsDrawer/helpers/positions-helper.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { localize } from '@deriv/translations';
-import { isHighLow } from '@deriv/shared';
-import { getContractTypesConfig } from 'Stores/Modules/Trading/Constants/contract';
-import { isCallPut } from 'Stores/Modules/Contract/Helpers/contract-type';
-
-export const addCommaToNumber = (num, decimal_places) => {
-    if (!num || isNaN(num)) {
-        return num;
-    }
-    const n = String(decimal_places ? (+num).toFixed(decimal_places) : num);
-    const p = n.indexOf('.');
-    return n.replace(/\d(?=(?:\d{3})+(?:\.|$))/g, (m, i) => (p <= 0 || i < p ? `${m},` : m));
-};
-
-export const getBarrierLabel = contract_info => {
-    if (isDigitType(contract_info.contract_type)) {
-        return localize('Target');
-    }
-    return localize('Barrier');
-};
-
-export const getBarrierValue = contract_info => {
-    if (isDigitType(contract_info.contract_type)) {
-        return digitTypeMap(contract_info)[contract_info.contract_type];
-    }
-    return addCommaToNumber(contract_info.barrier);
-};
-
-export const isDigitType = contract_type => /digit/.test(contract_type.toLowerCase());
-
-const digitTypeMap = contract_info => ({
-    DIGITDIFF: localize('Not {{barrier}}', { barrier: contract_info.barrier }),
-    DIGITEVEN: localize('Even'),
-    DIGITMATCH: localize('Equals {{barrier}}', { barrier: contract_info.barrier }),
-    DIGITODD: localize('Odd'),
-    DIGITOVER: localize('Over {{barrier}}', { barrier: contract_info.barrier }),
-    DIGITUNDER: localize('Under {{barrier}}', { barrier: contract_info.barrier }),
-});
-
-export const filterByContractType = ({ contract_type, shortcode }, trade_contract_type) => {
-    const is_call_put = isCallPut(trade_contract_type);
-    const is_high_low = isHighLow({ shortcode });
-    const trade_types = is_call_put
-        ? ['CALL', 'CALLE', 'PUT', 'PUTE']
-        : getContractTypesConfig()[trade_contract_type]?.trade_types;
-    const match = trade_types?.includes(contract_type);
-    if (trade_contract_type === 'high_low') return is_high_low;
-    return match && !is_high_low;
-};
diff --git a/packages/reports/src/Components/Elements/PositionsDrawer/index.js b/packages/reports/src/Components/Elements/PositionsDrawer/index.js
deleted file mode 100644
index 5107a3e8c1c5..000000000000
--- a/packages/reports/src/Components/Elements/PositionsDrawer/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default from './positions-drawer.jsx';
diff --git a/packages/reports/src/Components/Elements/PositionsDrawer/positions-drawer.jsx b/packages/reports/src/Components/Elements/PositionsDrawer/positions-drawer.jsx
deleted file mode 100644
index 2d7d45cc7312..000000000000
--- a/packages/reports/src/Components/Elements/PositionsDrawer/positions-drawer.jsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import classNames from 'classnames';
-import { PropTypes as MobxPropTypes } from 'mobx-react';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { NavLink } from 'react-router-dom';
-import { CSSTransition } from 'react-transition-group';
-import { Icon, DataList, Text } from '@deriv/components';
-import { routes, useNewRowTransition } from '@deriv/shared';
-import { localize } from '@deriv/translations';
-import EmptyPortfolioMessage from '../../empty-portfolio-message.jsx';
-import { connect } from 'Stores/connect';
-import PositionsDrawerCard from './PositionsDrawerCard';
-import { filterByContractType } from './helpers';
-
-const PositionsDrawerCardItem = ({ row: portfolio_position, measure, onHoverPosition, is_new_row }) => {
-    const { in_prop } = useNewRowTransition(is_new_row);
-
-    React.useEffect(() => {
-        measure();
-    }, [portfolio_position.contract_info.is_sold, measure]);
-
-    return (
-        <CSSTransition
-            in={in_prop}
-            timeout={150}
-            classNames={{
-                appear: 'dc-contract-card__wrapper--enter',
-                enter: 'dc-contract-card__wrapper--enter',
-                enterDone: 'dc-contract-card__wrapper--enter-done',
-                exit: 'dc-contract-card__wrapper--exit',
-            }}
-            onEntered={measure}
-            unmountOnExit
-        >
-            <div className='dc-contract-card__wrapper'>
-                <PositionsDrawerCard
-                    {...portfolio_position}
-                    onMouseEnter={() => {
-                        onHoverPosition(true, portfolio_position);
-                    }}
-                    onMouseLeave={() => {
-                        onHoverPosition(false, portfolio_position);
-                    }}
-                    onFooterEntered={measure}
-                    should_show_transition={is_new_row}
-                />
-            </div>
-        </CSSTransition>
-    );
-};
-
-const PositionsDrawer = ({
-    all_positions,
-    error,
-    is_positions_drawer_on,
-    onHoverPosition,
-    symbol,
-    toggleDrawer,
-    trade_contract_type,
-    onMount,
-}) => {
-    const drawer_ref = React.useRef(null);
-    const list_ref = React.useRef(null);
-    const scrollbar_ref = React.useRef(null);
-
-    React.useEffect(() => {
-        onMount();
-    }, [onMount]);
-
-    React.useEffect(() => {
-        list_ref?.current?.scrollTo(0);
-        scrollbar_ref?.current?.scrollToTop();
-    }, [symbol, trade_contract_type]);
-
-    const positions = all_positions.filter(
-        p =>
-            p.contract_info &&
-            symbol === p.contract_info.underlying &&
-            filterByContractType(p.contract_info, trade_contract_type)
-    );
-
-    const body_content = (
-        <DataList
-            data_source={positions}
-            rowRenderer={args => <PositionsDrawerCardItem onHoverPosition={onHoverPosition} {...args} />}
-            keyMapper={row => row.id}
-            row_gap={8}
-        />
-    );
-
-    return (
-        <React.Fragment>
-            <div
-                className={classNames('positions-drawer__bg', {
-                    'positions-drawer__bg--open': is_positions_drawer_on,
-                })}
-            />
-            <div
-                id='dt_positions_drawer'
-                className={classNames('positions-drawer', {
-                    'positions-drawer--open': is_positions_drawer_on,
-                })}
-            >
-                <div className='positions-drawer__header'>
-                    <Text color='prominent' weight='bold' size='xs'>
-                        {localize('Recent positions')}
-                    </Text>
-                    <div
-                        id='dt_positions_drawer_close_icon'
-                        className='positions-drawer__icon-close'
-                        onClick={toggleDrawer}
-                    >
-                        <Icon icon='IcMinusBold' />
-                    </div>
-                </div>
-                <div className='positions-drawer__body' ref={drawer_ref}>
-                    {positions.length === 0 || error ? <EmptyPortfolioMessage error={error} /> : body_content}
-                </div>
-                <div className='positions-drawer__footer'>
-                    <NavLink
-                        id='dt_positions_drawer_report_button'
-                        className='dc-btn dc-btn--secondary dc-btn__large'
-                        to={routes.reports}
-                    >
-                        <Text size='xs' weight='bold'>
-                            {localize('Go to Reports')}
-                        </Text>
-                    </NavLink>
-                </div>
-            </div>
-        </React.Fragment>
-    );
-    // }
-};
-
-PositionsDrawer.propTypes = {
-    all_positions: MobxPropTypes.arrayOrObservableArray,
-    children: PropTypes.any,
-    error: PropTypes.string,
-    is_mobile: PropTypes.bool,
-    is_positions_drawer_on: PropTypes.bool,
-    onChangeContractUpdate: PropTypes.func,
-    onClickContractUpdate: PropTypes.func,
-    onMount: PropTypes.func,
-    symbol: PropTypes.string,
-    toggleDrawer: PropTypes.func,
-};
-
-export default connect(({ modules, ui }) => ({
-    all_positions: modules.portfolio.all_positions,
-    error: modules.portfolio.error,
-    onHoverPosition: modules.portfolio.onHoverPosition,
-    onMount: modules.portfolio.onMount,
-    symbol: modules.trade.symbol,
-    trade_contract_type: modules.trade.contract_type,
-    is_mobile: ui.is_mobile,
-    is_positions_drawer_on: ui.is_positions_drawer_on,
-    toggleDrawer: ui.togglePositionsDrawer,
-}))(PositionsDrawer);
diff --git a/packages/reports/src/Components/Elements/PositionsDrawer/positions-modal-card.jsx b/packages/reports/src/Components/Elements/PositionsDrawer/positions-modal-card.jsx
deleted file mode 100644
index af4e30cfe7ce..000000000000
--- a/packages/reports/src/Components/Elements/PositionsDrawer/positions-modal-card.jsx
+++ /dev/null
@@ -1,342 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { CSSTransition } from 'react-transition-group';
-import { ContractCard, CurrencyBadge, Icon, Money, ProgressSliderMobile, Text } from '@deriv/components';
-import {
-    getContractPath,
-    isCryptoContract,
-    isMultiplierContract,
-    isHighLow,
-    isCryptocurrency,
-    hasContractEntered,
-    isOpen,
-} from '@deriv/shared';
-import { localize } from '@deriv/translations';
-import { BinaryLink } from '../../Routes';
-
-import { connect } from 'Stores/connect';
-import { getSymbolDisplayName } from 'Stores/Modules/Trading/Helpers/active-symbols';
-
-import { connectWithContractUpdate } from 'Stores/Modules/Contract/Helpers/multiplier';
-import { getEndTime } from 'Stores/Modules/Contract/Helpers/logic';
-import { PositionsCardLoader } from '../ContentLoader';
-
-import { getContractTypeDisplay, getCardLabels } from '_common/contract';
-import { getMarketInformation } from '../../../Helpers/market-underlying';
-import ResultMobile from './result-mobile.jsx';
-
-const PositionsModalCard = ({
-    active_symbols,
-    addToast,
-    className,
-    contract_info,
-    contract_update,
-    currency,
-    current_focus,
-    current_tick,
-    getContractById,
-    id,
-    indicative,
-    is_loading,
-    is_mobile,
-    is_sell_requested,
-    is_unsupported,
-    onClickSell,
-    profit_loss,
-    onClickCancel,
-    removeToast,
-    result,
-    sell_price,
-    server_time,
-    setCurrentFocus,
-    should_show_cancellation_warning,
-    status,
-    toggleCancellationWarning,
-    togglePositions,
-    toggleUnsupportedContractModal,
-    type,
-}) => {
-    const loader_el = (
-        <div className='positions-modal-card__content-loader'>
-            <PositionsCardLoader speed={2} />
-        </div>
-    );
-    const is_multiplier = isMultiplierContract(contract_info.contract_type);
-    const is_crypto = isCryptoContract(contract_info.underlying);
-    const has_progress_slider = !is_multiplier || (is_crypto && is_multiplier);
-    const has_ended = !!getEndTime(contract_info);
-    const fallback_result = profit_loss >= 0 ? 'won' : 'lost';
-
-    const should_show_sell = hasContractEntered(contract_info) && isOpen(contract_info);
-    const display_name = getSymbolDisplayName(active_symbols, getMarketInformation(contract_info.shortcode).underlying);
-
-    const contract_options_el = (
-        <React.Fragment>
-            <div className={classNames('positions-modal-card__grid', 'positions-modal-card__grid-header')}>
-                <div className='positions-modal-card__underlying-name'>
-                    <Icon
-                        icon={contract_info.underlying ? `IcUnderlying${contract_info.underlying}` : 'IcUnknown'}
-                        size={34}
-                    />
-                    <Text size='xxs' className='positions-modal-card__symbol' weight='bold'>
-                        {contract_info.display_name}
-                    </Text>
-                </div>
-                <div className='positions-modal-card__type'>
-                    <ContractCard.ContractTypeCell
-                        getContractTypeDisplay={getContractTypeDisplay}
-                        is_high_low={isHighLow({ shortcode: contract_info.shortcode })}
-                        multiplier={contract_info.multiplier}
-                        type={type}
-                    />
-                </div>
-                <CSSTransition
-                    in={should_show_sell}
-                    timeout={250}
-                    classNames={{
-                        enter: 'positions-modal-card__sell-button--enter',
-                        enterDone: 'positions-modal-card__sell-button--enter-done',
-                        exit: 'positions-modal-card__sell-button--exit',
-                    }}
-                    unmountOnExit
-                >
-                    <div className='positions-modal-card__sell-button'>
-                        <ContractCard.Sell
-                            contract_info={contract_info}
-                            is_sell_requested={is_sell_requested}
-                            getCardLabels={getCardLabels}
-                            onClickSell={onClickSell}
-                        />
-                    </div>
-                </CSSTransition>
-            </div>
-            <CurrencyBadge currency={contract_info?.currency ?? ''} />
-            <div className={classNames('positions-modal-card__grid', 'positions-modal-card__grid-body')}>
-                <div className={classNames('positions-modal-card__grid-profit-payout')}>
-                    <div
-                        className={classNames(
-                            'positions-modal-card__profit-loss',
-                            'positions-modal-card__profit-loss-label'
-                        )}
-                    >
-                        {result ? localize('Profit/Loss:') : localize('Potential profit/loss:')}
-                    </div>
-                    <div
-                        className={classNames(
-                            'positions-modal-card__indicative',
-                            'positions-modal-card__indicative-label'
-                        )}
-                    >
-                        {!result ? localize('Indicative price:') : localize('Payout:')}
-                    </div>
-                    <div
-                        className={classNames('positions-modal-card__profit-loss', {
-                            'positions-modal-card__profit-loss--is-crypto': isCryptocurrency(currency),
-                            'positions-modal-card__profit-loss--negative': profit_loss < 0,
-                            'positions-modal-card__profit-loss--positive': profit_loss > 0,
-                        })}
-                    >
-                        <Money amount={Math.abs(profit_loss)} currency={currency} />
-                        <div
-                            className={classNames('positions-modal-card__indicative--movement', {
-                                'positions-modal-card__indicative--movement-complete': !!result,
-                            })}
-                        >
-                            {status === 'profit' && <Icon icon='IcProfit' />}
-                            {status === 'loss' && <Icon icon='IcLoss' />}
-                        </div>
-                    </div>
-                    <div className='positions-modal-card__indicative'>
-                        <Money amount={sell_price || indicative} currency={currency} />
-                        <div
-                            className={classNames('positions-modal-card__indicative--movement', {
-                                'positions-modal-card__indicative--movement-complete': !!result,
-                            })}
-                        >
-                            {status === 'profit' && <Icon icon='IcProfit' />}
-                            {status === 'loss' && <Icon icon='IcLoss' />}
-                        </div>
-                    </div>
-                </div>
-                <div className={classNames('positions-modal-card__grid-price-payout')}>
-                    <div className='positions-modal-card__purchase-price'>
-                        <Text size='xxxs' className='positions-modal-card__purchase-label'>
-                            {localize('Purchase price:')}
-                        </Text>
-                        <Text weight='bold' size='xxs' className='positions-modal-card__purchase-value'>
-                            <Money amount={contract_info.buy_price} currency={currency} />
-                        </Text>
-                    </div>
-                    <div className='positions-modal-card__payout-price'>
-                        <Text size='xxxs' className='positions-modal-card__payout-label'>
-                            {localize('Potential payout:')}
-                        </Text>
-                        <Text weight='bold' size='xxs' className='positions-modal-card__payout-value'>
-                            {contract_info.payout ? (
-                                <Money amount={contract_info.payout} currency={currency} />
-                            ) : (
-                                <strong>-i</strong>
-                            )}
-                        </Text>
-                    </div>
-                </div>
-
-                {result || !!contract_info.is_sold ? (
-                    <ResultMobile
-                        contract_id={id}
-                        is_visible={!!contract_info.is_sold}
-                        result={result || fallback_result}
-                    />
-                ) : (
-                    <ProgressSliderMobile
-                        className='positions-modal-card__progress'
-                        current_tick={current_tick}
-                        getCardLabels={getCardLabels}
-                        is_loading={is_loading}
-                        start_time={contract_info.date_start}
-                        expiry_time={contract_info.date_expiry}
-                        server_time={server_time}
-                        ticks_count={contract_info.tick_count}
-                    />
-                )}
-            </div>
-        </React.Fragment>
-    );
-
-    const card_multiplier_header = (
-        <ContractCard.Header
-            contract_info={contract_info}
-            display_name={display_name}
-            getCardLabels={getCardLabels}
-            getContractTypeDisplay={getContractTypeDisplay}
-            has_progress_slider={!is_mobile && has_progress_slider}
-            is_mobile={is_mobile}
-            is_sell_requested={is_sell_requested}
-            onClickSell={onClickSell}
-            server_time={server_time}
-        />
-    );
-
-    const card_multiplier_body = (
-        <ContractCard.Body
-            addToast={addToast}
-            connectWithContractUpdate={connectWithContractUpdate}
-            contract_info={contract_info}
-            contract_update={contract_update}
-            currency={currency}
-            current_focus={current_focus}
-            getCardLabels={getCardLabels}
-            getContractById={getContractById}
-            is_mobile={is_mobile}
-            is_multiplier={is_multiplier}
-            has_progress_slider={is_mobile && has_progress_slider && !has_ended}
-            removeToast={removeToast}
-            server_time={server_time}
-            setCurrentFocus={setCurrentFocus}
-            should_show_cancellation_warning={should_show_cancellation_warning}
-            status={status}
-            toggleCancellationWarning={toggleCancellationWarning}
-        />
-    );
-
-    const card_multiplier_footer = (
-        <ContractCard.Footer
-            contract_info={contract_info}
-            getCardLabels={getCardLabels}
-            is_multiplier={is_multiplier}
-            is_sell_requested={is_sell_requested}
-            onClickCancel={onClickCancel}
-            onClickSell={onClickSell}
-            server_time={server_time}
-            status={status}
-        />
-    );
-
-    const contract_multiplier_el = (
-        <React.Fragment>
-            <ContractCard
-                contract_info={contract_info}
-                getCardLabels={getCardLabels}
-                is_multiplier={is_multiplier}
-                profit_loss={profit_loss}
-                should_show_result_overlay={false}
-            >
-                {card_multiplier_header}
-                {card_multiplier_body}
-                {card_multiplier_footer}
-            </ContractCard>
-        </React.Fragment>
-    );
-
-    const contract_el = is_multiplier ? contract_multiplier_el : contract_options_el;
-
-    return (
-        <div id={`dt_drawer_card_${id}`} className={classNames('positions-modal-card__wrapper', className)}>
-            {is_unsupported ? (
-                <div
-                    className={classNames('positions-modal-card')}
-                    onClick={() => toggleUnsupportedContractModal(true)}
-                >
-                    {contract_info.underlying ? contract_el : loader_el}
-                </div>
-            ) : (
-                <React.Fragment>
-                    <BinaryLink
-                        onClick={togglePositions}
-                        className={classNames('positions-modal-card', {
-                            'positions-modal-card--multiplier': is_multiplier,
-                        })}
-                        to={getContractPath(id)}
-                    >
-                        {contract_info.underlying ? contract_el : loader_el}
-                    </BinaryLink>
-                </React.Fragment>
-            )}
-        </div>
-    );
-};
-
-PositionsModalCard.propTypes = {
-    className: PropTypes.string,
-    contract_info: PropTypes.object,
-    currency: PropTypes.string,
-    current_focus: PropTypes.string,
-    current_tick: PropTypes.number,
-    duration: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    duration_unit: PropTypes.string,
-    exit_spot: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    id: PropTypes.number,
-    indicative: PropTypes.number,
-    is_loading: PropTypes.bool,
-    is_mobile: PropTypes.bool,
-    is_sell_requested: PropTypes.bool,
-    is_unsupported: PropTypes.bool,
-    is_valid_to_sell: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
-    onClickRemove: PropTypes.func,
-    onClickSell: PropTypes.func,
-    onClickCancel: PropTypes.func,
-    profit_loss: PropTypes.number,
-    result: PropTypes.string,
-    sell_time: PropTypes.number,
-    server_time: PropTypes.object,
-    setCurrentFocus: PropTypes.func,
-    status: PropTypes.string,
-    togglePositions: PropTypes.func,
-    toggleUnsupportedContractModal: PropTypes.func,
-    type: PropTypes.string,
-};
-
-export default connect(({ common, ui, modules }) => ({
-    active_symbols: modules.trade.active_symbols,
-    addToast: ui.addToast,
-    current_focus: ui.current_focus,
-    getContractById: modules.contract_trade.getContractById,
-    is_mobile: ui.is_mobile,
-    removeToast: ui.removeToast,
-    server_time: common.server_time,
-    setCurrentFocus: ui.setCurrentFocus,
-    should_show_cancellation_warning: ui.should_show_cancellation_warning,
-    toggleCancellationWarning: ui.toggleCancellationWarning,
-    updateLimitOrder: modules.contract_trade.updateLimitOrder,
-}))(PositionsModalCard);
diff --git a/packages/reports/src/Components/Elements/PositionsDrawer/result-mobile.jsx b/packages/reports/src/Components/Elements/PositionsDrawer/result-mobile.jsx
deleted file mode 100644
index a1578df1b511..000000000000
--- a/packages/reports/src/Components/Elements/PositionsDrawer/result-mobile.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { CSSTransition } from 'react-transition-group';
-import { Icon } from '@deriv/components';
-import { localize } from '@deriv/translations';
-
-const ResultMobile = ({ is_visible, result }) => {
-    const is_contract_won = result === 'won';
-    return (
-        <React.Fragment>
-            <CSSTransition
-                in={is_visible}
-                timeout={250}
-                classNames={{
-                    enter: 'positions-modal-card__result--enter',
-                    enterDone: 'positions-modal-card__result--enter-done',
-                    exit: 'positions-modal-card__result--exit',
-                }}
-                unmountOnExit
-            >
-                <div className='positions-modal-card__caption-wrapper' data-testid='result_mobile'>
-                    <span
-                        className={classNames('positions-modal-card__caption', {
-                            'positions-modal-card__caption--won': is_contract_won,
-                            'positions-modal-card__caption--lost': !is_contract_won,
-                        })}
-                    >
-                        {is_contract_won ? (
-                            <React.Fragment>
-                                {localize('Won')}
-                                <Icon icon='IcCheckmarkCircle' className='positions-modal-card__icon' color='green' />
-                            </React.Fragment>
-                        ) : (
-                            <React.Fragment>
-                                {localize('Lost')}
-                                <Icon icon='IcCrossCircle' className='positions-modal-card__icon' color='red' />
-                            </React.Fragment>
-                        )}
-                    </span>
-                </div>
-            </CSSTransition>
-        </React.Fragment>
-    );
-};
-
-ResultMobile.propTypes = {
-    is_visible: PropTypes.bool,
-    result: PropTypes.string,
-};
-
-export default ResultMobile;
diff --git a/packages/reports/src/Components/Routes/__tests__/helpers.spec.js b/packages/reports/src/Components/Routes/__tests__/helpers.spec.js
index 40ccab231af2..324d5d33967a 100644
--- a/packages/reports/src/Components/Routes/__tests__/helpers.spec.js
+++ b/packages/reports/src/Components/Routes/__tests__/helpers.spec.js
@@ -63,10 +63,4 @@ describe('Helpers', () => {
             expect(Helpers.getPath('/contract')).to.equal('/contract');
         });
     });
-
-    describe('getContractPath', () => {
-        it('should return the path of contract with contract_id passed', () => {
-            expect(Helpers.getContractPath(1234)).to.equal('/contract/1234');
-        });
-    });
 });
diff --git a/packages/reports/src/Components/Routes/helpers.js b/packages/reports/src/Components/Routes/helpers.js
index 8d8bcc421c1d..dd61f156b970 100644
--- a/packages/reports/src/Components/Routes/helpers.js
+++ b/packages/reports/src/Components/Routes/helpers.js
@@ -33,5 +33,3 @@ export const isRouteVisible = (route, is_logged_in) => !(route && route.is_authe
 
 export const getPath = (route_path, params = {}) =>
     Object.keys(params).reduce((p, name) => p.replace(`:${name}`, params[name]), route_path);
-
-export const getContractPath = contract_id => getPath(routes.contract, { contract_id });
diff --git a/packages/reports/src/Containers/open-positions.jsx b/packages/reports/src/Containers/open-positions.jsx
index 99261f50381e..5207aa14a457 100644
--- a/packages/reports/src/Containers/open-positions.jsx
+++ b/packages/reports/src/Containers/open-positions.jsx
@@ -12,10 +12,17 @@ import {
     ContractCard,
     usePrevious,
 } from '@deriv/components';
-import { urlFor, isMobile, isMultiplierContract, getTimePercentage, website_name, getTotalProfit } from '@deriv/shared';
+import {
+    urlFor,
+    isMobile,
+    isMultiplierContract,
+    getTimePercentage,
+    website_name,
+    getTotalProfit,
+    getContractPath,
+} from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { ReportsTableRowLoader } from '../Components/Elements/ContentLoader';
-import { getContractPath } from '../Components/Routes/helpers';
 import { getContractDurationType } from '../Helpers/market-underlying';
 
 import EmptyTradeHistoryMessage from '../Components/empty-trade-history-message.jsx';
@@ -23,7 +30,7 @@ import {
     getOpenPositionsColumnsTemplate,
     getMultiplierOpenPositionsColumnsTemplate,
 } from 'Constants/data-table-constants';
-import PositionsCard from '../Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx';
+import PositionsDrawerCard from '@deriv/trader/dist/trader/js/positions-drawer-card';
 import PlaceholderComponent from '../Components/placeholder-component.jsx';
 import { getCardLabels } from '_common/contract';
 import { connect } from 'Stores/connect';
@@ -43,7 +50,16 @@ const EmptyPlaceholderWrapper = props => (
     </React.Fragment>
 );
 
-const MobileRowRenderer = ({ row, is_footer, columns_map, server_time, onClickCancel, onClickSell, measure }) => {
+const MobileRowRenderer = ({
+    row,
+    is_footer,
+    columns_map,
+    server_time,
+    onClickCancel,
+    onClickSell,
+    measure,
+    ...props
+}) => {
     React.useEffect(() => {
         if (!is_footer) {
             measure();
@@ -78,7 +94,7 @@ const MobileRowRenderer = ({ row, is_footer, columns_map, server_time, onClickCa
 
     if (isMultiplierContract(type)) {
         return (
-            <PositionsCard
+            <PositionsDrawerCard
                 contract_info={contract_info}
                 contract_update={contract_update}
                 currency={currency}
@@ -88,6 +104,7 @@ const MobileRowRenderer = ({ row, is_footer, columns_map, server_time, onClickCa
                 onClickSell={onClickSell}
                 server_time={server_time}
                 status={status}
+                {...props}
             />
         );
     }
@@ -290,6 +307,7 @@ const OpenPositions = ({
     onClickSell,
     onMount,
     server_time,
+    ...props
 }) => {
     const [active_index, setActiveIndex] = React.useState(is_multiplier ? 1 : 0);
     // Tabs should be visible only when there is at least one active multiplier contract
@@ -301,8 +319,9 @@ const OpenPositions = ({
          * For mobile, we show portfolio stepper in header even for reports pages.
          * `onMount` in portfolio store will be invoked from portfolio stepper component in `trade-header-extensions.jsx`
          */
-        if (!isMobile()) onMount();
+        // if (!isMobile()) onMount();
 
+        onMount();
         checkForMultiplierContract();
 
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -350,13 +369,14 @@ const OpenPositions = ({
         return map;
     }, {});
 
-    const mobileRowRenderer = props => (
+    const mobileRowRenderer = args => (
         <MobileRowRenderer
-            {...props}
+            {...args}
             columns_map={columns_map}
             server_time={server_time}
             onClickCancel={onClickCancel}
             onClickSell={onClickSell}
+            {...props}
         />
     );
 
@@ -439,4 +459,15 @@ export default connect(({ modules, client, common, ui }) => ({
     onClickSell: modules.portfolio.onClickSell,
     onMount: modules.portfolio.onMount,
     server_time: common.server_time,
+
+    addToast: ui.addToast,
+    current_focus: ui.current_focus,
+    onClickRemove: modules.portfolio.removePositionById,
+    getContractById: modules.contract_trade.getContractById,
+    is_mobile: ui.is_mobile,
+    removeToast: ui.removeToast,
+    setCurrentFocus: ui.setCurrentFocus,
+    should_show_cancellation_warning: ui.should_show_cancellation_warning,
+    toggleCancellationWarning: ui.toggleCancellationWarning,
+    toggleUnsupportedContractModal: ui.toggleUnsupportedContractModal,
 }))(withRouter(OpenPositions));
diff --git a/packages/reports/src/Containers/profit-table.jsx b/packages/reports/src/Containers/profit-table.jsx
index 3bbd6fe12d57..e5368fbf6054 100644
--- a/packages/reports/src/Containers/profit-table.jsx
+++ b/packages/reports/src/Containers/profit-table.jsx
@@ -4,11 +4,10 @@ import { PropTypes as MobxPropTypes } from 'mobx-react';
 import React from 'react';
 import { withRouter } from 'react-router';
 import { DesktopWrapper, MobileWrapper, DataList, DataTable } from '@deriv/components';
-import { extractInfoFromShortcode, isForwardStarting, urlFor, website_name } from '@deriv/shared';
+import { extractInfoFromShortcode, isForwardStarting, urlFor, website_name, getContractPath } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { ReportsTableRowLoader } from '../Components/Elements/ContentLoader';
 import CompositeCalendar from '../Components/Form/CompositeCalendar';
-import { getContractPath } from '../Components/Routes/helpers';
 import { getSupportedContracts } from '_common/contract';
 
 import { connect } from 'Stores/connect';
diff --git a/packages/reports/src/Containers/statement.jsx b/packages/reports/src/Containers/statement.jsx
index 1908343ab117..71ab00441f6e 100644
--- a/packages/reports/src/Containers/statement.jsx
+++ b/packages/reports/src/Containers/statement.jsx
@@ -3,10 +3,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withRouter } from 'react-router-dom';
 import { DesktopWrapper, MobileWrapper, DataList, DataTable, Text, Clipboard } from '@deriv/components';
-import { extractInfoFromShortcode, isForwardStarting, urlFor, website_name } from '@deriv/shared';
+import { extractInfoFromShortcode, isForwardStarting, urlFor, website_name, getContractPath } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { ReportsTableRowLoader } from '../Components/Elements/ContentLoader';
-import { getContractPath } from '../Components/Routes/helpers';
 import { getSupportedContracts } from '_common/contract';
 import { connect } from 'Stores/connect';
 import { getStatementTableColumnsTemplate } from '../Constants/data-table-constants';
diff --git a/packages/trader/build/webpack.config.js b/packages/trader/build/webpack.config.js
index 209bbb561081..1b84173e4dcf 100644
--- a/packages/trader/build/webpack.config.js
+++ b/packages/trader/build/webpack.config.js
@@ -9,6 +9,7 @@ module.exports = function (env) {
         devtool: IS_RELEASE ? undefined : 'eval-cheap-module-source-map',
         entry: {
             trader: path.resolve(__dirname, '../src', 'index.tsx'),
+            'positions-drawer-card': 'App/Components/Elements/PositionsDrawer/PositionsDrawerCard',
         },
         mode: IS_RELEASE ? 'production' : 'development',
         module: {
@@ -46,11 +47,13 @@ module.exports = function (env) {
                 '@deriv/translations': '@deriv/translations',
                 '@deriv/deriv-charts': '@deriv/deriv-charts',
                 '@deriv/account': '@deriv/account',
+                '@deriv/reports': '@deriv/reports',
             },
             /^@deriv\/shared\/.+$/,
             /^@deriv\/components\/.+$/,
             /^@deriv\/translations\/.+$/,
             /^@deriv\/account\/.+$/,
+            /^@deriv\/reports\/.+$/,
         ],
         target: 'web',
         plugins: plugins(base, false),
diff --git a/packages/trader/src/App/Components/Elements/ContentLoader/index.js b/packages/trader/src/App/Components/Elements/ContentLoader/index.js
index 90c86e01a015..40d98f31d6ec 100644
--- a/packages/trader/src/App/Components/Elements/ContentLoader/index.js
+++ b/packages/trader/src/App/Components/Elements/ContentLoader/index.js
@@ -1,3 +1,2 @@
 export * from './positions-card.jsx';
-export * from './reports-table-row.jsx';
 export * from './trade-params.jsx';
diff --git a/packages/trader/src/App/Components/Elements/ContentLoader/reports-table-row.jsx b/packages/trader/src/App/Components/Elements/ContentLoader/reports-table-row.jsx
deleted file mode 100644
index 328ea93c733f..000000000000
--- a/packages/trader/src/App/Components/Elements/ContentLoader/reports-table-row.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import ContentLoader from 'react-content-loader';
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const ReportsTableRowLoader = ({ speed }) => (
-    <ContentLoader
-        height={64}
-        width={992}
-        speed={speed}
-        primaryColor={'var(--general-hover)'}
-        secondaryColor={'var(--general-active)'}
-    >
-        <rect x='16' y='16' rx='4' ry='4' width='32' height='32' />
-        <rect x='52' y='16' rx='4' ry='4' width='32' height='32' />
-        <rect x='132' y='28' rx='4' ry='4' width='101' height='8' />
-        <rect x='273' y='28' rx='4' ry='4' width='120' height='8' />
-        <rect x='460' y='28' rx='4' ry='4' width='46' height='8' />
-        <rect x='593' y='28' rx='4' ry='4' width='46' height='8' />
-        <rect x='726' y='28' rx='4' ry='4' width='64' height='8' />
-        <rect x='906' y='28' rx='4' ry='4' width='64' height='8' />
-    </ContentLoader>
-);
-
-ReportsTableRowLoader.propTypes = {
-    speed: PropTypes.number,
-};
-
-export { ReportsTableRowLoader };
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx
index 9b5d4e791d80..18ab4bb042f6 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx
@@ -211,19 +211,21 @@ PositionsDrawerCard.propTypes = {
     type: PropTypes.string,
 };
 
-export default connect(({ modules, ui, client, common }) => ({
-    currency: client.currency,
-    server_time: common.server_time,
-    addToast: ui.addToast,
-    current_focus: ui.current_focus,
-    onClickCancel: modules.portfolio.onClickCancel,
-    onClickSell: modules.portfolio.onClickSell,
-    onClickRemove: modules.portfolio.removePositionById,
-    getContractById: modules.contract_trade.getContractById,
-    is_mobile: ui.is_mobile,
-    removeToast: ui.removeToast,
-    setCurrentFocus: ui.setCurrentFocus,
-    should_show_cancellation_warning: ui.should_show_cancellation_warning,
-    toggleCancellationWarning: ui.toggleCancellationWarning,
-    toggleUnsupportedContractModal: ui.toggleUnsupportedContractModal,
-}))(PositionsDrawerCard);
+// export default connect(({ modules, ui, client, common }) => ({
+//     currency: client.currency,
+//     server_time: common.server_time,
+//     addToast: ui.addToast,
+//     current_focus: ui.current_focus,
+//     onClickCancel: modules.portfolio.onClickCancel,
+//     onClickSell: modules.portfolio.onClickSell,
+//     onClickRemove: modules.portfolio.removePositionById,
+//     getContractById: modules.contract_trade.getContractById,
+//     is_mobile: ui.is_mobile,
+//     removeToast: ui.removeToast,
+//     setCurrentFocus: ui.setCurrentFocus,
+//     should_show_cancellation_warning: ui.should_show_cancellation_warning,
+//     toggleCancellationWarning: ui.toggleCancellationWarning,
+//     toggleUnsupportedContractModal: ui.toggleUnsupportedContractModal,
+// }))(PositionsDrawerCard);
+
+export default PositionsDrawerCard;
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
index 08b25da8955a..dfe2af6ec3d3 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
@@ -12,7 +12,7 @@ import { connect } from 'Stores/connect';
 import PositionsDrawerCard from './PositionsDrawerCard';
 import { filterByContractType } from './helpers';
 
-const PositionsDrawerCardItem = ({ row: portfolio_position, measure, onHoverPosition, is_new_row }) => {
+const PositionsDrawerCardItem = ({ row: portfolio_position, measure, onHoverPosition, is_new_row, ...props }) => {
     const { in_prop } = useNewRowTransition(is_new_row);
 
     React.useEffect(() => {
@@ -43,6 +43,7 @@ const PositionsDrawerCardItem = ({ row: portfolio_position, measure, onHoverPosi
                     }}
                     onFooterEntered={measure}
                     should_show_transition={is_new_row}
+                    {...props}
                 />
             </div>
         </CSSTransition>
@@ -58,6 +59,7 @@ const PositionsDrawer = ({
     toggleDrawer,
     trade_contract_type,
     onMount,
+    ...props
 }) => {
     const drawer_ref = React.useRef(null);
     const list_ref = React.useRef(null);
@@ -82,7 +84,7 @@ const PositionsDrawer = ({
     const body_content = (
         <DataList
             data_source={positions}
-            rowRenderer={args => <PositionsDrawerCardItem onHoverPosition={onHoverPosition} {...args} />}
+            rowRenderer={args => <PositionsDrawerCardItem onHoverPosition={onHoverPosition} {...args} {...props} />}
             keyMapper={row => row.id}
             row_gap={8}
         />
@@ -130,7 +132,6 @@ const PositionsDrawer = ({
             </div>
         </React.Fragment>
     );
-    // }
 };
 
 PositionsDrawer.propTypes = {
@@ -144,9 +145,23 @@ PositionsDrawer.propTypes = {
     onMount: PropTypes.func,
     symbol: PropTypes.string,
     toggleDrawer: PropTypes.func,
+
+    currency: PropTypes.string,
+    server_time: PropTypes.object,
+    addToast: PropTypes.func,
+    current_focus: PropTypes.string,
+    onClickCancel: PropTypes.func,
+    onClickSell: PropTypes.func,
+    onClickRemove: PropTypes.func,
+    getContractById: PropTypes.func,
+    removeToast: PropTypes.func,
+    setCurrentFocus: PropTypes.func,
+    should_show_cancellation_warning: PropTypes.bool,
+    toggleCancellationWarning: PropTypes.func,
+    toggleUnsupportedContractModal: PropTypes.func,
 };
 
-export default connect(({ modules, ui }) => ({
+export default connect(({ modules, ui, client, common }) => ({
     all_positions: modules.portfolio.all_positions,
     error: modules.portfolio.error,
     onHoverPosition: modules.portfolio.onHoverPosition,
@@ -156,4 +171,19 @@ export default connect(({ modules, ui }) => ({
     is_mobile: ui.is_mobile,
     is_positions_drawer_on: ui.is_positions_drawer_on,
     toggleDrawer: ui.togglePositionsDrawer,
+
+    currency: client.currency,
+    server_time: common.server_time,
+    addToast: ui.addToast,
+    current_focus: ui.current_focus,
+    onClickCancel: modules.portfolio.onClickCancel,
+    onClickSell: modules.portfolio.onClickSell,
+    onClickRemove: modules.portfolio.removePositionById,
+    getContractById: modules.contract_trade.getContractById,
+    is_mobile: ui.is_mobile,
+    removeToast: ui.removeToast,
+    setCurrentFocus: ui.setCurrentFocus,
+    should_show_cancellation_warning: ui.should_show_cancellation_warning,
+    toggleCancellationWarning: ui.toggleCancellationWarning,
+    toggleUnsupportedContractModal: ui.toggleUnsupportedContractModal,
 }))(PositionsDrawer);
diff --git a/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx b/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx
index 66e3dd30e1a0..84904f7a3fbf 100644
--- a/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx
+++ b/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx
@@ -114,7 +114,7 @@ const TogglePositionsMobile = ({
                         <BinaryLink
                             onClick={closeModal}
                             className='dc-btn dc-btn--secondary dc-btn__large positions-modal__footer-btn'
-                            to={routes.positions}
+                            // to={routes.positions}
                         >
                             <span className='dc-btn__text'>{localize('Go to Reports')}</span>
                         </BinaryLink>
diff --git a/packages/trader/src/App/Components/Form/CompositeCalendar/calendar-icon.jsx b/packages/trader/src/App/Components/Form/CompositeCalendar/calendar-icon.jsx
deleted file mode 100644
index ddae60f2e40e..000000000000
--- a/packages/trader/src/App/Components/Form/CompositeCalendar/calendar-icon.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Icon } from '@deriv/components';
-
-const CalendarIcon = ({ onClick }) => <Icon onClick={onClick} icon='IcCalendarDatefrom' className='inline-icon' />;
-
-CalendarIcon.propTypes = {
-    onClick: PropTypes.func,
-};
-
-export default CalendarIcon;
diff --git a/packages/trader/src/App/Components/Form/CompositeCalendar/composite-calendar-mobile.jsx b/packages/trader/src/App/Components/Form/CompositeCalendar/composite-calendar-mobile.jsx
deleted file mode 100644
index c9e736552155..000000000000
--- a/packages/trader/src/App/Components/Form/CompositeCalendar/composite-calendar-mobile.jsx
+++ /dev/null
@@ -1,250 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Button, DatePicker, Icon, InputField, MobileDialog, Text } from '@deriv/components';
-import { localize } from '@deriv/translations';
-import { toMoment } from '@deriv/shared';
-
-export const RadioButton = ({ id, className, selected_value, value, label, onChange }) => {
-    return (
-        <label
-            htmlFor={id}
-            className={classNames('composite-calendar-modal__radio', className, {
-                'composite-calendar-modal__radio--selected': selected_value === value,
-            })}
-            onClick={() => onChange({ label, value })}
-        >
-            <input className='composite-calendar-modal__radio-input' id={id} type='radio' value={value} />
-            <span
-                className={classNames('composite-calendar-modal__radio-circle', {
-                    'composite-calendar-modal__radio-circle--selected': selected_value === value,
-                })}
-            />
-            <Text
-                as='p'
-                color='prominent'
-                size='xs'
-                line_height='unset'
-                weight={selected_value === value ? 'bold' : 'normal'}
-            >
-                {label}
-            </Text>
-        </label>
-    );
-};
-const CUSTOM_KEY = 'custom';
-
-const CompositeCalendarMobile = React.memo(
-    ({ input_date_range, current_focus, duration_list, onChange, setCurrentFocus }) => {
-        const date_range = input_date_range || duration_list.find(range => range.value === 'all_time');
-
-        const [from, setFrom] = React.useState(from && toMoment(from).format('DD MMM YYYY'));
-        const [to, setTo] = React.useState(to && toMoment(to).format('DD MMM YYYY'));
-        const [is_open, setIsOpen] = React.useState(false);
-
-        const [applied_date_range, setAppliedDateRange] = React.useState(date_range);
-        const [selected_date_range, setSelectedDateRange] = React.useState(date_range);
-
-        const selectDateRange = (_selected_date_range, is_today) => {
-            const new_from = _selected_date_range.duration;
-            onChange(
-                {
-                    from:
-                        is_today || new_from
-                            ? toMoment().startOf('day').subtract(new_from, 'day').add(1, 's').unix()
-                            : null,
-                    to: toMoment().endOf('day').unix(),
-                    is_batch: true,
-                },
-                {
-                    date_range: _selected_date_range,
-                }
-            );
-        };
-
-        const selectCustomDateRange = () => {
-            const today = toMoment().format('DD MMM YYYY');
-
-            const new_from = from || to || today;
-            const new_to = to || today;
-
-            const new_date_range = Object.assign(selected_date_range, {
-                label: `${new_from} - ${new_to}`,
-            });
-
-            onChange(
-                {
-                    from: toMoment(new_from, 'DD MMM YYYY').startOf('day').add(1, 's').unix(),
-                    to: toMoment(new_to, 'DD MMM YYYY').endOf('day').unix(),
-                    is_batch: true,
-                },
-                {
-                    date_range: new_date_range,
-                }
-            );
-        };
-
-        const applyDateRange = () => {
-            if (selected_date_range.onClick) {
-                selectDateRange(selected_date_range);
-            } else if (selected_date_range.value === CUSTOM_KEY) {
-                selectCustomDateRange();
-            }
-            setAppliedDateRange(selected_date_range);
-            setIsOpen(false);
-        };
-
-        const selectToday = () => {
-            const new_date_range = {
-                duration: 0,
-                label: localize('Today'),
-            };
-            selectDateRange(new_date_range, true);
-            setAppliedDateRange(new_date_range);
-            setSelectedDateRange(new_date_range);
-            setIsOpen(false);
-        };
-
-        const selectDate = (e, key) => {
-            setSelectedDateRange({ value: CUSTOM_KEY });
-
-            const value = e.target?.value ? toMoment(e.target.value).format('DD MMM YYYY') : '';
-
-            if (key === 'from') {
-                setFrom(value);
-            }
-
-            if (key === 'to') {
-                setTo(value);
-            }
-        };
-
-        const getMobileFooter = () => {
-            return (
-                <div className='composite-calendar-modal__actions'>
-                    <Button
-                        className='composite-calendar-modal__actions__cancel'
-                        text={localize('Cancel')}
-                        onClick={() => setIsOpen(false)}
-                        has_effect
-                        secondary
-                        large
-                    />
-                    <Button
-                        className='composite-calendar-modal__actions__ok'
-                        text={localize('OK')}
-                        onClick={applyDateRange}
-                        has_effect
-                        primary
-                        large
-                    />
-                </div>
-            );
-        };
-
-        const onDateRangeChange = _date_range => {
-            setSelectedDateRange(
-                duration_list.find(range => _date_range && range.value === _date_range.value) || _date_range
-            );
-        };
-
-        const openDialog = () => {
-            setSelectedDateRange(applied_date_range);
-            setIsOpen(true);
-        };
-
-        const today = toMoment().format('YYYY-MM-DD');
-        const max_date = to ? toMoment(to, 'DD MMM YYYY').format('YYYY-MM-DD') : today;
-        const min_date = from && toMoment(from, 'DD MMM YYYY').format('YYYY-MM-DD');
-
-        return (
-            <React.Fragment>
-                <div className='composite-calendar__input-fields composite-calendar__input-fields--fill'>
-                    <InputField
-                        id='dt_calendar_input'
-                        current_focus={current_focus}
-                        is_read_only={true}
-                        icon={() => <Icon icon='IcCalendarDatefrom' className='inline-icon' />}
-                        onClick={openDialog}
-                        setCurrentFocus={setCurrentFocus}
-                        value={applied_date_range.label}
-                    />
-                </div>
-                <MobileDialog
-                    portal_element_id='modal_root'
-                    title={localize('Please select duration')}
-                    visible={is_open}
-                    has_content_scroll
-                    onClose={() => setIsOpen(false)}
-                    content_height_offset='94px'
-                    footer={getMobileFooter()}
-                >
-                    <div className='composite-calendar-modal'>
-                        <div className='composite-calendar-modal__radio-group'>
-                            {duration_list.map(duration => (
-                                <RadioButton
-                                    id={`composite-calendar-modal__radio__${duration.value}`}
-                                    key={duration.value}
-                                    value={duration.value}
-                                    label={duration.label}
-                                    selected_value={selected_date_range.value}
-                                    onChange={onDateRangeChange}
-                                />
-                            ))}
-                        </div>
-                        <div className='composite-calendar-modal__custom'>
-                            <RadioButton
-                                id={'composite-calendar-modal__custom-radio'}
-                                className='composite-calendar-modal__custom-radio'
-                                value={CUSTOM_KEY}
-                                label={localize('Custom')}
-                                selected_value={selected_date_range.value}
-                                onChange={onDateRangeChange}
-                            />
-
-                            <div className='composite-calendar-modal__custom-date-range'>
-                                <DatePicker
-                                    className='composite-calendar-modal__custom-date-range-start-date'
-                                    is_nativepicker={true}
-                                    placeholder={localize('Start date')}
-                                    value={from}
-                                    max_date={max_date}
-                                    onChange={e => selectDate(e, 'from')}
-                                />
-                                <DatePicker
-                                    className='composite-calendar-modal__custom-date-range-end-date'
-                                    is_nativepicker={true}
-                                    placeholder={localize('End date')}
-                                    value={to}
-                                    max_date={today}
-                                    min_date={min_date}
-                                    onChange={e => selectDate(e, 'to')}
-                                />
-                            </div>
-                        </div>
-                        <Button
-                            className='composite-calendar-modal__actions-today'
-                            text={localize('Back to today')}
-                            onClick={selectToday}
-                            has_effect
-                            tertiary
-                            large
-                        />
-                    </div>
-                </MobileDialog>
-            </React.Fragment>
-        );
-    }
-);
-
-CompositeCalendarMobile.displayName = 'CompositeCalendarMobile';
-
-CompositeCalendarMobile.propTypes = {
-    current_focus: PropTypes.string,
-    duration_list: PropTypes.array,
-    from: PropTypes.number,
-    onChange: PropTypes.func,
-    setCurrentFocus: PropTypes.func,
-    to: PropTypes.number,
-};
-export default CompositeCalendarMobile;
diff --git a/packages/trader/src/App/Components/Form/CompositeCalendar/composite-calendar.jsx b/packages/trader/src/App/Components/Form/CompositeCalendar/composite-calendar.jsx
deleted file mode 100644
index 875fb85cfe0b..000000000000
--- a/packages/trader/src/App/Components/Form/CompositeCalendar/composite-calendar.jsx
+++ /dev/null
@@ -1,191 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Loadable from 'react-loadable';
-import { DesktopWrapper, InputField, MobileWrapper, useOnClickOutside } from '@deriv/components';
-import { localize } from '@deriv/translations';
-import { daysFromTodayTo, epochToMoment, toMoment } from '@deriv/shared';
-import { connect } from 'Stores/connect';
-import CompositeCalendarMobile from './composite-calendar-mobile.jsx';
-import SideList from './side-list.jsx';
-import CalendarIcon from './calendar-icon.jsx';
-
-const TwoMonthPicker = Loadable({
-    loader: () => import(/* webpackChunkName: "two-month-picker" */ './two-month-picker.jsx'),
-    loading: () => null,
-    render(loaded, props) {
-        const Component = loaded.default;
-        return <Component {...props} />;
-    },
-});
-
-const CompositeCalendar = props => {
-    const { current_focus, onChange, setCurrentFocus, to, from } = props;
-
-    const [show_to, setShowTo] = React.useState(false);
-    const [show_from, setShowFrom] = React.useState(false);
-    const [list] = React.useState([
-        {
-            value: 'all_time',
-            label: localize('All time'),
-            onClick: () => selectDateRange(),
-            duration: 0,
-        },
-        {
-            value: 'last_7_days',
-            label: localize('Last 7 days'),
-            onClick: () => selectDateRange(7),
-            duration: 7,
-        },
-        {
-            value: 'last_30_days',
-            label: localize('Last 30 days'),
-            onClick: () => selectDateRange(30),
-            duration: 30,
-        },
-        {
-            value: 'last_60_days',
-            label: localize('Last 60 days'),
-            onClick: () => selectDateRange(60),
-            duration: 60,
-        },
-        {
-            value: 'last_quarter',
-            label: localize('Last quarter'),
-            onClick: () => selectDateRange(90),
-            duration: 90,
-        },
-    ]);
-
-    const wrapper_ref = React.useRef();
-
-    useOnClickOutside(wrapper_ref, event => {
-        event.stopPropagation();
-        event.preventDefault();
-        hideCalendar();
-    });
-
-    const selectDateRange = new_from => {
-        hideCalendar();
-        applyBatch({
-            from: new_from ? toMoment().startOf('day').subtract(new_from, 'day').add(1, 's').unix() : null,
-            to: toMoment().endOf('day').unix(),
-            is_batch: true,
-        });
-    };
-
-    const getToDateLabel = () => {
-        const date = epochToMoment(to);
-        return daysFromTodayTo(date) === 0 ? localize('Today') : date.format('MMM, DD YYYY');
-    };
-
-    const getFromDateLabel = () => {
-        const date = epochToMoment(from);
-        return from ? date.format('MMM, DD YYYY') : '';
-    };
-
-    const hideCalendar = () => {
-        setShowFrom(false);
-        setShowTo(false);
-    };
-
-    const showCalendar = e => {
-        if (e === 'from') {
-            setShowFrom(true);
-        }
-        if (e === 'to') {
-            setShowTo(true);
-        }
-    };
-
-    const setToDate = date => {
-        updateState('to', epochToMoment(date).endOf('day').unix());
-    };
-
-    const setFromDate = date => {
-        updateState('from', date);
-        hideCalendar();
-    };
-
-    const updateState = (key, value) => {
-        apply(key, value);
-        hideCalendar();
-    };
-
-    const applyBatch = values => {
-        onChange(values);
-    };
-
-    const apply = (key, value) => {
-        applyBatch({
-            [key]: value,
-        });
-    };
-
-    const isPeriodDisabledTo = date => {
-        return date + 1 <= from || date > toMoment().endOf('day').unix();
-    };
-
-    const isPeriodDisabledFrom = date => {
-        return date - 1 >= to;
-    };
-
-    return (
-        <React.Fragment>
-            <DesktopWrapper>
-                <div id='dt_composite_calendar_inputs' className='composite-calendar__input-fields'>
-                    <InputField
-                        id='dt_calendar_input_from'
-                        current_focus={current_focus}
-                        is_read_only
-                        placeholder={localize('Date from')}
-                        icon={CalendarIcon}
-                        onClick={() => showCalendar('from')}
-                        setCurrentFocus={setCurrentFocus}
-                        value={getFromDateLabel()}
-                    />
-                    <InputField
-                        id='dt_calendar_input_to'
-                        current_focus={current_focus}
-                        is_read_only
-                        placeholder={localize('Date to')}
-                        icon={CalendarIcon}
-                        onClick={() => showCalendar('to')}
-                        setCurrentFocus={setCurrentFocus}
-                        value={getToDateLabel()}
-                    />
-                </div>
-                {show_to && (
-                    <div className='composite-calendar' ref={wrapper_ref}>
-                        <SideList from={from} to={to} items={list} />
-                        <TwoMonthPicker value={to} onChange={setToDate} isPeriodDisabled={isPeriodDisabledTo} />
-                    </div>
-                )}
-                {show_from && (
-                    <div className='composite-calendar' ref={wrapper_ref}>
-                        <SideList from={from} to={to} items={list} />
-                        <TwoMonthPicker value={from} onChange={setFromDate} isPeriodDisabled={isPeriodDisabledFrom} />
-                    </div>
-                )}
-            </DesktopWrapper>
-            <MobileWrapper>
-                <CompositeCalendarMobile duration_list={list} {...props} />
-            </MobileWrapper>
-        </React.Fragment>
-    );
-};
-
-CompositeCalendar.displayName = 'CompositeCalendar';
-
-CompositeCalendar.propTypes = {
-    current_focus: PropTypes.string,
-    from: PropTypes.number,
-    onChange: PropTypes.func,
-    setCurrentFocus: PropTypes.func,
-    to: PropTypes.number,
-};
-export default React.memo(
-    connect(({ ui }) => ({
-        current_focus: ui.current_focus,
-        setCurrentFocus: ui.setCurrentFocus,
-    }))(CompositeCalendar)
-);
diff --git a/packages/trader/src/App/Components/Form/CompositeCalendar/index.js b/packages/trader/src/App/Components/Form/CompositeCalendar/index.js
deleted file mode 100644
index d8d748d8a924..000000000000
--- a/packages/trader/src/App/Components/Form/CompositeCalendar/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default from './composite-calendar.jsx';
diff --git a/packages/trader/src/App/Components/Form/CompositeCalendar/list-item.jsx b/packages/trader/src/App/Components/Form/CompositeCalendar/list-item.jsx
deleted file mode 100644
index 98b3f9e551f6..000000000000
--- a/packages/trader/src/App/Components/Form/CompositeCalendar/list-item.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import React from 'react';
-
-const ListItem = ({ onClick, is_active, label }) => (
-    <li
-        className={classNames({
-            'composite-calendar__prepopulated-list--is-active': is_active,
-        })}
-        onClick={onClick}
-    >
-        {label}
-    </li>
-);
-
-ListItem.propTypes = {
-    label: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.array]),
-    is_active: PropTypes.bool,
-    onClick: PropTypes.func,
-};
-
-export default ListItem;
diff --git a/packages/trader/src/App/Components/Form/CompositeCalendar/side-list.jsx b/packages/trader/src/App/Components/Form/CompositeCalendar/side-list.jsx
deleted file mode 100644
index 69102262d646..000000000000
--- a/packages/trader/src/App/Components/Form/CompositeCalendar/side-list.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { toMoment } from '@deriv/shared';
-import ListItem from './list-item.jsx';
-
-const isActive = (from, to, flag) => {
-    if (flag === 0) {
-        return toMoment().endOf('day').unix() === to && from === null;
-    }
-    return Math.ceil(to / 86400) - Math.ceil(from / 86400) === flag;
-};
-
-const SideList = ({ items, from, to }) => (
-    <ul className='composite-calendar__prepopulated-list'>
-        {items.map(item => {
-            const { duration, ...rest_of_props } = item;
-            const is_active = isActive(from, to, duration);
-            return <ListItem key={duration} is_active={is_active} {...rest_of_props} />;
-        })}
-    </ul>
-);
-
-SideList.propTypes = {
-    items: PropTypes.array,
-};
-
-export default SideList;
diff --git a/packages/trader/src/App/Components/Form/CompositeCalendar/two-month-picker.jsx b/packages/trader/src/App/Components/Form/CompositeCalendar/two-month-picker.jsx
deleted file mode 100644
index d671140e0529..000000000000
--- a/packages/trader/src/App/Components/Form/CompositeCalendar/two-month-picker.jsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import PropTypes from 'prop-types';
-import moment from 'moment';
-import React from 'react';
-import { Calendar } from '@deriv/components';
-import { addMonths, diffInMonths, epochToMoment, subMonths, toMoment } from '@deriv/shared';
-
-const TwoMonthPicker = React.memo(({ onChange, isPeriodDisabled, value }) => {
-    const [left_pane_date, setLeftPaneDate] = React.useState(subMonths(value, 1).unix());
-    const [right_pane_date, setRightPaneDate] = React.useState(value);
-
-    const navigateFrom = e => {
-        setLeftPaneDate(e.unix());
-        setRightPaneDate(addMonths(e, 1).unix());
-    };
-
-    /**
-     * Only allow previous months to be available to navigate. Disable other periods
-     *
-     * @param date
-     * @param range
-     * @returns {boolean}
-     */
-    const validateFromArrows = (date, range) => {
-        return range === 'year' || diffInMonths(epochToMoment(left_pane_date), date) !== -1;
-    };
-
-    /**
-     * Validate values to be date_from < date_to
-     */
-    const shouldDisableDate = date => {
-        return isPeriodDisabled(date.unix());
-    };
-
-    /**
-     * Only allow next month to be available to navigate (unless next month is in the future).
-     * Disable other periods
-     *
-     * @param date
-     * @param range
-     * @returns {boolean}
-     */
-    const validateToArrows = (date, range) => {
-        if (range === 'year') return true; // disallow year arrows
-        const r_date = epochToMoment(right_pane_date).startOf('month');
-        if (diffInMonths(toMoment().startOf('month'), r_date) === 0) return true; // future months are disallowed
-        return diffInMonths(r_date, date) !== 1;
-    };
-
-    const jumpToCurrentMonth = () => {
-        const current_month = toMoment().endOf('month').unix();
-        setLeftPaneDate(epochToMoment(current_month).endOf('month').subtract(1, 'month').unix());
-        setRightPaneDate(current_month);
-    };
-
-    const navigateTo = e => {
-        setLeftPaneDate(subMonths(e, 1).unix());
-        setRightPaneDate(toMoment(e).unix());
-    };
-
-    const updateSelectedDate = e => {
-        onChange(moment.utc(e.currentTarget.dataset.date, 'YYYY-MM-DD').unix());
-    };
-
-    return (
-        <React.Fragment>
-            <div className='first-month'>
-                <Calendar.Header
-                    calendar_date={left_pane_date}
-                    calendar_view='date'
-                    navigateTo={navigateFrom}
-                    isPeriodDisabled={validateFromArrows}
-                    hide_disabled_periods={true}
-                    switchView={() => ({})}
-                />
-                <Calendar.Body
-                    calendar_view='date'
-                    calendar_date={left_pane_date}
-                    selected_date={value}
-                    date_format='YYYY-MM-DD'
-                    isPeriodDisabled={shouldDisableDate}
-                    hide_others={true}
-                    updateSelected={updateSelectedDate}
-                />
-            </div>
-            <div className='second-month'>
-                <Calendar.Header
-                    calendar_date={right_pane_date}
-                    calendar_view='date'
-                    isPeriodDisabled={validateToArrows}
-                    navigateTo={navigateTo}
-                    hide_disabled_periods
-                    switchView={() => ({})}
-                />
-                <Calendar.Body
-                    calendar_view='date'
-                    calendar_date={right_pane_date}
-                    selected_date={value}
-                    date_format='YYYY-MM-DD'
-                    isPeriodDisabled={shouldDisableDate}
-                    hide_others
-                    updateSelected={updateSelectedDate}
-                />
-                <Calendar.Footer use_icon='IcCalendarForwardToday' has_today_btn={true} onClick={jumpToCurrentMonth} />
-            </div>
-        </React.Fragment>
-    );
-});
-
-TwoMonthPicker.displayName = 'TwoMonthPicker';
-
-TwoMonthPicker.propTypes = {
-    isPeriodDisabled: PropTypes.func,
-    onChange: PropTypes.func,
-    value: PropTypes.number,
-};
-export default TwoMonthPicker;
diff --git a/packages/trader/src/Utils/Helpers/market-underlying.js b/packages/trader/src/Utils/Helpers/market-underlying.js
index 2c5d3edde22d..90f5633c545a 100644
--- a/packages/trader/src/Utils/Helpers/market-underlying.js
+++ b/packages/trader/src/Utils/Helpers/market-underlying.js
@@ -29,16 +29,3 @@ export const getMarketInformation = shortcode => {
 export const getMarketName = underlying => (underlying ? getMarketNamesMap()[underlying.toUpperCase()] : null);
 
 export const getTradeTypeName = category => (category ? getContractConfig()[category.toUpperCase()].name : null);
-
-export const getContractDurationType = (longcode, shortcode) => {
-    if (/^MULTUP|MULTDOWN/.test(shortcode)) return '';
-
-    const duration_pattern = new RegExp('ticks|tick|seconds|minutes|minute|hour|hours');
-    const extracted = duration_pattern.exec(longcode);
-    if (extracted !== null) {
-        const duration_type = extracted[0];
-        const duration_text = duration_type[0].toUpperCase() + duration_type.slice(1);
-        return duration_text.endsWith('s') ? duration_text : `${duration_text}s`;
-    }
-    return localize('Days');
-};

From d65b3fc69511260d208ffe64be07caeb20e5e2fa Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Sun, 22 May 2022 12:54:37 +0430
Subject: [PATCH 22/64] remove duplicated files

---
 .../src/Components/Form/DatePicker/index.js   |   1 -
 .../Form/DatePicker/trading-date-picker.jsx   | 205 ----------
 .../__tests__/range-slider.spec.js            |  25 --
 .../RangeSlider/__tests__/tick-steps.spec.js  |  13 -
 .../src/Components/Form/RangeSlider/index.js  |   1 -
 .../Form/RangeSlider/range-slider.jsx         | 119 ------
 .../Form/RangeSlider/tick-steps.jsx           |  45 ---
 .../src/Components/Form/TimePicker/dialog.jsx | 128 -------
 .../src/Components/Form/TimePicker/index.js   |   1 -
 .../Form/TimePicker/time-picker.jsx           | 128 -------
 .../reports/src/Components/Form/fieldset.jsx  |  51 ---
 .../src/Components/Form/number-selector.jsx   |  45 ---
 packages/reports/src/Helpers/contract-type.js | 112 ------
 .../Stores/Modules/Trading/Actions/barrier.js |   4 -
 .../Components/Duration/advanced-duration.jsx | 157 --------
 .../Components/Duration/duration-mobile.jsx   | 353 ------------------
 .../Components/Duration/duration-toggle.jsx   |  38 --
 .../Components/Duration/duration-wrapper.jsx  | 211 -----------
 .../Trading/Components/Duration/duration.jsx  | 224 -----------
 .../Trading/Components/Duration/index.js      |   1 -
 .../Components/Duration/simple-duration.jsx   |  86 -----
 .../Trading/Components/allow-equals.jsx       |  71 ----
 .../Modules/Trading/Components/amount.jsx     | 220 -----------
 .../Modules/Trading/Components/barrier.jsx    | 194 ----------
 .../Modules/Trading/Components/last-digit.jsx |  39 --
 .../Stores/Modules/Trading/Constants/ui.js    |  11 -
 26 files changed, 2483 deletions(-)
 delete mode 100644 packages/reports/src/Components/Form/DatePicker/index.js
 delete mode 100644 packages/reports/src/Components/Form/DatePicker/trading-date-picker.jsx
 delete mode 100644 packages/reports/src/Components/Form/RangeSlider/__tests__/range-slider.spec.js
 delete mode 100644 packages/reports/src/Components/Form/RangeSlider/__tests__/tick-steps.spec.js
 delete mode 100644 packages/reports/src/Components/Form/RangeSlider/index.js
 delete mode 100644 packages/reports/src/Components/Form/RangeSlider/range-slider.jsx
 delete mode 100644 packages/reports/src/Components/Form/RangeSlider/tick-steps.jsx
 delete mode 100644 packages/reports/src/Components/Form/TimePicker/dialog.jsx
 delete mode 100644 packages/reports/src/Components/Form/TimePicker/index.js
 delete mode 100644 packages/reports/src/Components/Form/TimePicker/time-picker.jsx
 delete mode 100644 packages/reports/src/Components/Form/fieldset.jsx
 delete mode 100644 packages/reports/src/Components/Form/number-selector.jsx
 delete mode 100644 packages/reports/src/Helpers/contract-type.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Actions/barrier.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Components/Duration/advanced-duration.jsx
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-mobile.jsx
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-toggle.jsx
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-wrapper.jsx
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Components/Duration/duration.jsx
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Components/Duration/index.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Components/Duration/simple-duration.jsx
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Components/allow-equals.jsx
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Components/amount.jsx
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Components/barrier.jsx
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Components/last-digit.jsx
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Constants/ui.js

diff --git a/packages/reports/src/Components/Form/DatePicker/index.js b/packages/reports/src/Components/Form/DatePicker/index.js
deleted file mode 100644
index 9d7e06f93f85..000000000000
--- a/packages/reports/src/Components/Form/DatePicker/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default from './trading-date-picker.jsx';
diff --git a/packages/reports/src/Components/Form/DatePicker/trading-date-picker.jsx b/packages/reports/src/Components/Form/DatePicker/trading-date-picker.jsx
deleted file mode 100644
index 471eef3c29d3..000000000000
--- a/packages/reports/src/Components/Form/DatePicker/trading-date-picker.jsx
+++ /dev/null
@@ -1,205 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { PropTypes as MobxPropTypes } from 'mobx-react';
-import React from 'react';
-import { DatePicker, Tooltip } from '@deriv/components';
-import { isTimeValid, setTime, toMoment, useIsMounted } from '@deriv/shared';
-import { localize } from '@deriv/translations';
-import { connect } from 'Stores/connect';
-import ContractType from 'Stores/Modules/Trading/Helpers/contract-type';
-import { hasIntradayDurationUnit } from 'Stores/Modules/Trading/Helpers/duration';
-
-const TradingDatePicker = ({
-    duration: current_duration,
-    duration_min_max,
-    duration_units_list,
-    expiry_type,
-    id,
-    is_24_hours_contract,
-    mode,
-    name,
-    onChange,
-    server_time,
-    start_date,
-    start_time,
-    symbol,
-    validation_errors,
-}) => {
-    const isMounted = useIsMounted();
-
-    const [disabled_days, setDisabledDays] = React.useState([]);
-    const [market_events, setMarketEvents] = React.useState([]);
-    const [duration, setDuration] = React.useState(current_duration);
-    const [selected_date, setSelectedDate] = React.useState();
-
-    React.useEffect(() => {
-        onChangeCalendarMonth();
-    }, [onChangeCalendarMonth]);
-
-    React.useEffect(() => {
-        if (duration !== current_duration) {
-            setDuration(current_duration);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [current_duration]);
-
-    const getMinDuration = () => {
-        return hasIntradayDurationUnit(duration_units_list)
-            ? toMoment(server_time).clone()
-            : toMoment(server_time).clone().add(duration_min_max.daily.min, 'second');
-    };
-
-    const getMomentContractStartDateTime = () => {
-        return setTime(
-            toMoment(getMinDuration()),
-            isTimeValid(start_time) ? start_time : server_time.format('HH:mm:ss')
-        );
-    };
-
-    const getMaxDailyDuration = () => {
-        return duration_min_max.daily ? duration_min_max.daily.max : 365 * 24 * 3600;
-    };
-
-    const getMinDateExpiry = () => {
-        const is_duration_contract = expiry_type === 'duration';
-        const min_date = getMomentContractStartDateTime().clone().startOf('day');
-
-        return is_duration_contract && hasIntradayDurationUnit(duration_units_list) ? min_date.add(1, 'day') : min_date;
-    };
-
-    const getMaxDateDuration = () => {
-        return is_24_hours_contract
-            ? getMomentContractStartDateTime()
-                  .clone()
-                  .add(start_date ? 24 * 3600 : getMaxDailyDuration(), 'second')
-            : getMomentContractStartDateTime().clone().add(getMaxDailyDuration(), 'second');
-    };
-
-    const hasRangeSelection = () => mode === 'duration';
-
-    const getFooter = () => {
-        if (!hasRangeSelection()) return null;
-
-        if (!duration) return localize('Minimum duration is 1 day');
-        if (+duration === 1) return localize('Duration: {{duration}} day', { duration });
-        return localize('Duration: {{duration}} days', { duration });
-    };
-
-    const getDatepickerValue = () => {
-        return hasRangeSelection()
-            ? toMoment().add(duration, 'days').format('YYYY-MM-DD')
-            : selected_date || getMinDateExpiry();
-    };
-
-    const onChangeDate = e => {
-        if (isMounted()) {
-            if (hasRangeSelection()) {
-                setDuration(e.duration);
-            } else if (e.target.value) {
-                setSelectedDate(toMoment(e.target.value));
-            }
-        }
-
-        if (typeof onChange === 'function' && e.target) {
-            onChange({
-                target: {
-                    name: e.target.name,
-                    value: hasRangeSelection() ? e.target.value : toMoment(e.target.value).format('YYYY-MM-DD'),
-                },
-            });
-        }
-    };
-
-    const onChangeCalendarMonth = React.useCallback(
-        async (e = toMoment().format('YYYY-MM-DD')) => {
-            const new_market_events = [];
-            let new_disabled_days = [];
-
-            const events = await ContractType.getTradingEvents(e, symbol);
-            events.forEach(evt => {
-                const dates = evt.dates.split(', '); // convert dates str into array
-                const idx = dates.indexOf('Fridays');
-                if (idx !== -1) {
-                    new_disabled_days = [6, 0]; // Sat, Sun
-                }
-                new_market_events.push({
-                    dates,
-                    descrip: evt.descrip,
-                });
-            });
-
-            if (isMounted()) {
-                setDisabledDays(new_disabled_days);
-                setMarketEvents(new_market_events);
-            }
-        },
-        [isMounted, symbol]
-    );
-
-    const has_error = !!validation_errors[name].length;
-
-    return (
-        <div
-            className={classNames('dc-input-field', {
-                'dc-input-field--has-error': has_error,
-            })}
-        >
-            <Tooltip
-                className='trade-container__tooltip'
-                alignment='left'
-                message={has_error ? validation_errors[name][0] : undefined}
-                has_error={has_error}
-            >
-                <DatePicker
-                    id={id}
-                    alignment='left'
-                    display_format='DD MMM YYYY'
-                    show_leading_icon
-                    error={validation_errors[name].length ? '' : undefined}
-                    mode={mode}
-                    max_date={getMaxDateDuration()}
-                    min_date={getMinDateExpiry()}
-                    name={name}
-                    onChange={onChangeDate}
-                    onChangeCalendarMonth={onChangeCalendarMonth}
-                    has_range_selection={hasRangeSelection()}
-                    has_today_btn={!hasRangeSelection()}
-                    footer={getFooter()}
-                    events={market_events}
-                    disabled_days={disabled_days}
-                    keep_open
-                    readOnly={!hasRangeSelection()}
-                    value={getDatepickerValue()}
-                />
-            </Tooltip>
-        </div>
-    );
-};
-
-TradingDatePicker.propTypes = {
-    duration: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    duration_min_max: PropTypes.object,
-    duration_units_list: MobxPropTypes.arrayOrObservableArray,
-    expiry_type: PropTypes.string,
-    is_24_hours_contract: PropTypes.bool,
-    mode: PropTypes.string,
-    onChange: PropTypes.func,
-    server_time: PropTypes.object,
-    start_date: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    start_time: PropTypes.string,
-    symbol: PropTypes.string,
-    validation_errors: PropTypes.object,
-};
-
-export default connect(({ modules, common }) => ({
-    duration: modules.trade.duration,
-    duration_min_max: modules.trade.duration_min_max,
-    duration_units_list: modules.trade.duration_units_list,
-    expiry_type: modules.trade.expiry_type,
-    onChange: modules.trade.onChange,
-    server_time: common.server_time,
-    start_date: modules.trade.start_date,
-    start_time: modules.trade.start_time,
-    symbol: modules.trade.symbol,
-    validation_errors: modules.trade.validation_errors,
-}))(TradingDatePicker);
diff --git a/packages/reports/src/Components/Form/RangeSlider/__tests__/range-slider.spec.js b/packages/reports/src/Components/Form/RangeSlider/__tests__/range-slider.spec.js
deleted file mode 100644
index fb4c8f47e682..000000000000
--- a/packages/reports/src/Components/Form/RangeSlider/__tests__/range-slider.spec.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import RangeSlider from '../range-slider';
-
-describe('RangeSlider', () => {
-    it('should show  1 Tick if the value is 1', () => {
-        const value = 1;
-        const wrapper = render(<RangeSlider value={value} />);
-        expect(wrapper.getAllByText('1 Tick')).toHaveLength(1);
-    });
-
-    it('should show 2 Ticks if the value is 2', () => {
-        const value = 2;
-        const wrapper = render(<RangeSlider value={value} />);
-        expect(wrapper.getAllByText('2 Ticks')).toHaveLength(1);
-    });
-
-    it('should change the input with onchange target value', () => {
-        const ChangeMock = jest.fn();
-        const wrapper = render(<RangeSlider onChange={ChangeMock} />);
-        const input = wrapper.getByLabelText('range-input');
-        fireEvent.change(input, { target: { value: 5 } });
-        expect(input.value).toBe('5');
-    });
-});
diff --git a/packages/reports/src/Components/Form/RangeSlider/__tests__/tick-steps.spec.js b/packages/reports/src/Components/Form/RangeSlider/__tests__/tick-steps.spec.js
deleted file mode 100644
index 095ffe7a42c7..000000000000
--- a/packages/reports/src/Components/Form/RangeSlider/__tests__/tick-steps.spec.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import TickSteps from '../tick-steps.jsx';
-
-describe('TickSteps', () => {
-    const min_value = 1;
-    const max_value = 10;
-    const arr_ticks = [...Array(max_value - min_value + 1).keys()];
-    it.each(arr_ticks)('should render 10 tick steps', item => {
-        const wrapper = render(<TickSteps min_value={min_value} max_value={max_value} />);
-        expect(wrapper.getAllByTestId(`tick_step_${item + min_value}`)).toHaveLength(1);
-    });
-});
diff --git a/packages/reports/src/Components/Form/RangeSlider/index.js b/packages/reports/src/Components/Form/RangeSlider/index.js
deleted file mode 100644
index 6bb5b03cf31d..000000000000
--- a/packages/reports/src/Components/Form/RangeSlider/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default from './range-slider.jsx';
diff --git a/packages/reports/src/Components/Form/RangeSlider/range-slider.jsx b/packages/reports/src/Components/Form/RangeSlider/range-slider.jsx
deleted file mode 100644
index 9330f508c71e..000000000000
--- a/packages/reports/src/Components/Form/RangeSlider/range-slider.jsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { localize } from '@deriv/translations';
-import { Text } from '@deriv/components';
-import TickSteps from './tick-steps.jsx';
-
-const RangeSlider = ({ className, name, value, min_value, max_value, onChange }) => {
-    const [hover_value, setHoverValue] = React.useState(0);
-    const range_slider_ref = React.useRef();
-
-    const handleChange = e => {
-        const target_value = +e.target.value;
-        if (target_value !== value) {
-            resetOnHover();
-            onChange({ target: { name, value: target_value } });
-        }
-    };
-
-    const handleClick = index => {
-        if (index !== value) {
-            resetOnHover();
-            onChange({ target: { name, value: index } });
-        }
-    };
-
-    const onMouseEnter = index => {
-        if (index) {
-            setHoverValue(index);
-            range_slider_ref.current.style.width = getRangeSliderTrackWidth(index, true);
-        }
-    };
-
-    const onMouseLeave = e => {
-        const { offsetX, offsetY } = e.nativeEvent;
-        if (offsetY <= -3 || offsetY >= 3 || offsetX < -3 || offsetX > 3) {
-            resetOnHover();
-        }
-    };
-
-    const getRangeSliderTrackWidth = (slider_value, is_hover) => {
-        const width = (slider_value - min_value) * (10 / (max_value - min_value));
-        return `${width * 2 + (is_hover ? 0.8 : 1.4)}em`;
-    };
-
-    const resetOnHover = () => {
-        if (hover_value) {
-            setHoverValue(0);
-            range_slider_ref.current.style.width = 0;
-        }
-    };
-
-    const display_value = hover_value || value;
-    const steps = !isNaN(max_value - min_value) ? max_value - min_value : 10;
-    return (
-        <div
-            className={classNames('range-slider', className, {
-                'range-slider__error': value < min_value || value > max_value,
-            })}
-        >
-            <label className='range-slider__label' htmlFor='range'>
-                <input
-                    className='input trade-container__input range-slider__track'
-                    id='dt_duration_range_input'
-                    max={max_value}
-                    max_value={max_value}
-                    min={min_value}
-                    min_value={min_value}
-                    name={name}
-                    onChange={handleChange}
-                    tabIndex='0'
-                    type='range'
-                    steps={steps}
-                    value={value}
-                    aria-label='range-input'
-                />
-                {/* this element to be placed before <TickSteps /> to prevent overlapping colors */}
-                <span
-                    ref={range_slider_ref}
-                    className='range-slider__line range-slider__line--fill'
-                    onMouseLeave={onMouseLeave}
-                />
-                <div className='range-slider__ticks'>
-                    <TickSteps
-                        hover_value={hover_value}
-                        max_value={max_value}
-                        min_value={min_value}
-                        onClick={handleClick}
-                        onMouseLeave={onMouseLeave}
-                        onMouseEnter={onMouseEnter}
-                        value={value}
-                    />
-                </div>
-                {/* Calculate line width based on active value and size of range thumb */}
-                <div className='range-slider__line' style={{ width: `${getRangeSliderTrackWidth(value)}` }} />
-            </label>
-            <div className='range-slider__caption'>
-                {!!display_value && (
-                    <Text align='center' weight='bold' size='xs' color='prominent' id='dt_range_slider_label'>
-                        {display_value === 1 && localize('{{display_value}} Tick', { display_value })}
-                        {display_value > 1 && localize('{{display_value}} Ticks', { display_value })}
-                    </Text>
-                )}
-            </div>
-        </div>
-    );
-};
-// Keypress events do not trigger on Safari due to the way it handles input type='range' elements, using focus on the input element also doesn't work for Safari.
-
-RangeSlider.propTypes = {
-    className: PropTypes.string,
-    max_value: PropTypes.number,
-    min_value: PropTypes.number,
-    name: PropTypes.string,
-    onChange: PropTypes.func,
-    value: PropTypes.number,
-};
-
-export default RangeSlider;
diff --git a/packages/reports/src/Components/Form/RangeSlider/tick-steps.jsx b/packages/reports/src/Components/Form/RangeSlider/tick-steps.jsx
deleted file mode 100644
index 8f664185d5cd..000000000000
--- a/packages/reports/src/Components/Form/RangeSlider/tick-steps.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const TickSteps = ({ hover_value, max_value, min_value, onClick, onMouseEnter, onMouseLeave, value }) => {
-    if (!max_value || !min_value) return null;
-
-    const arr_ticks = [...Array(max_value - min_value + 1).keys()];
-
-    const isActive = idx => idx + min_value === value;
-    const isMarked = idx => idx + min_value < value;
-    const isMarkedOnHover = idx => (isMarked(idx) ? false : idx + min_value <= hover_value);
-
-    return (
-        <React.Fragment>
-            {arr_ticks.map(idx => (
-                <span
-                    data-testid={`tick_step_${idx + min_value}`}
-                    key={idx}
-                    data-value={idx + min_value}
-                    className={classNames('range-slider__ticks-step', {
-                        'range-slider__ticks-step--active': isActive(idx),
-                        'range-slider__ticks-step--marked': isMarked(idx),
-                        'range-slider__ticks-step--marked-hover': isMarkedOnHover(idx),
-                    })}
-                    onClick={() => onClick(idx + min_value)}
-                    onMouseEnter={() => onMouseEnter(idx + min_value)}
-                    onMouseLeave={onMouseLeave}
-                />
-            ))}
-        </React.Fragment>
-    );
-};
-
-TickSteps.propTypes = {
-    hover_value: PropTypes.number,
-    max_value: PropTypes.number,
-    min_value: PropTypes.number,
-    onClick: PropTypes.func,
-    onMouseEnter: PropTypes.func,
-    onMouseLeave: PropTypes.func,
-    value: PropTypes.number,
-};
-
-export default TickSteps;
diff --git a/packages/reports/src/Components/Form/TimePicker/dialog.jsx b/packages/reports/src/Components/Form/TimePicker/dialog.jsx
deleted file mode 100644
index 5c55bdac55df..000000000000
--- a/packages/reports/src/Components/Form/TimePicker/dialog.jsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import React from 'react';
-import { localize } from '@deriv/translations';
-import { toMoment } from '@deriv/shared';
-
-function isBetween(to_compare_moment, start_times_moment, end_times_moment, duration) {
-    for (let i = 0; i < start_times_moment.length; i++) {
-        if (to_compare_moment.isBetween(start_times_moment[i], end_times_moment[i], duration)) {
-            return true;
-        }
-    }
-    return false;
-}
-
-const Dialog = ({ preClass, selected_time, end_times, start_times, onChange, className }) => {
-    const start_times_moment = start_times ? start_times.map(start_time => toMoment(start_time)) : [toMoment()];
-    const end_times_moment = end_times
-        ? end_times.map(end_time => toMoment(end_time))
-        : [toMoment().hour('23').minute('59').seconds('59').milliseconds('999')];
-    const to_compare_moment = toMoment();
-    const [hour, minute] = selected_time.split(':');
-    const hours = [...Array(24).keys()].map(a => `0${a}`.slice(-2));
-    const minutes = [...Array(12).keys()].map(a => `0${a * 5}`.slice(-2));
-
-    const selectOption = (type, current_value, prev_value, is_enabled = true) => {
-        if (is_enabled && prev_value) {
-            const [prev_hour, prev_minute] = prev_value.split(':');
-            if ((type === 'h' && current_value !== prev_hour) || (type === 'm' && current_value !== prev_minute)) {
-                onChange(`${type === 'h' ? current_value : prev_hour}:${type === 'm' ? current_value : prev_minute}`);
-            }
-        }
-    };
-
-    return (
-        <div className={classNames(`${preClass}__dialog`, `${className}`)}>
-            <div className={`${preClass}__selector`}>
-                <div className={`${preClass}__selector--hours`}>
-                    <div className={classNames(`${preClass}__selector-list-title`, 'center-text')}>
-                        <strong>{localize('Hour')}</strong>
-                    </div>
-                    <div>
-                        {hours.map((h, key) => {
-                            to_compare_moment.hour(h);
-                            const start_times_reset_minute = start_times_moment.map(start_time =>
-                                start_time.clone().minute(0)
-                            );
-                            const is_hour_enabled = isBetween(
-                                to_compare_moment,
-                                start_times_reset_minute,
-                                end_times_moment
-                            );
-                            const is_minute_enabled = isBetween(
-                                to_compare_moment,
-                                start_times_moment,
-                                end_times_moment,
-                                'minute'
-                            );
-                            // The minute number after which the last block/interval of `Minutes` selection will be disabled
-                            const last_interval_of_hour = 52;
-                            const is_enabled =
-                                to_compare_moment.minutes() > last_interval_of_hour
-                                    ? is_hour_enabled && is_minute_enabled
-                                    : is_hour_enabled;
-                            return (
-                                <div
-                                    className={classNames(
-                                        `${preClass}__selector-list-item`,
-                                        { [`${preClass}__selector-list-item--selected`]: hour === h },
-                                        { [`${preClass}__selector-list-item--disabled`]: !is_enabled }
-                                    )}
-                                    key={key}
-                                    onClick={() => {
-                                        selectOption('h', h, selected_time, is_enabled);
-                                    }}
-                                >
-                                    {h}
-                                </div>
-                            );
-                        })}
-                    </div>
-                </div>
-                <div className={`${preClass}__selector--minutes`}>
-                    <div className={classNames(`${preClass}__selector-list-title`, 'center-text')}>
-                        <strong>{localize('Minute')}</strong>
-                    </div>
-                    <div>
-                        {minutes.map((mm, key) => {
-                            to_compare_moment.hour(hour).minute(mm);
-                            const is_enabled = isBetween(
-                                to_compare_moment,
-                                start_times_moment,
-                                end_times_moment,
-                                'minute'
-                            );
-                            return (
-                                <div
-                                    className={classNames(
-                                        `${preClass}__selector-list-item`,
-                                        { [`${preClass}__selector-list-item--selected`]: minute === mm },
-                                        { [`${preClass}__selector-list-item--disabled`]: !is_enabled }
-                                    )}
-                                    key={key}
-                                    onClick={() => {
-                                        selectOption('m', mm, selected_time, is_enabled);
-                                    }}
-                                >
-                                    {mm}
-                                </div>
-                            );
-                        })}
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-Dialog.propTypes = {
-    className: PropTypes.string,
-    end_time: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]),
-    onChange: PropTypes.func,
-    preClass: PropTypes.string,
-    selected_time: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]),
-    start_time: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]),
-};
-
-export default Dialog;
diff --git a/packages/reports/src/Components/Form/TimePicker/index.js b/packages/reports/src/Components/Form/TimePicker/index.js
deleted file mode 100644
index 72851feced8b..000000000000
--- a/packages/reports/src/Components/Form/TimePicker/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default from './time-picker.jsx';
diff --git a/packages/reports/src/Components/Form/TimePicker/time-picker.jsx b/packages/reports/src/Components/Form/TimePicker/time-picker.jsx
deleted file mode 100644
index 301df882505b..000000000000
--- a/packages/reports/src/Components/Form/TimePicker/time-picker.jsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import classNames from 'classnames';
-import { observer } from 'mobx-react';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { CSSTransition } from 'react-transition-group';
-import { Icon, InputField } from '@deriv/components';
-import { connect } from 'Stores/connect';
-import Dialog from './dialog.jsx';
-
-const class_prefix = 'time-picker';
-
-const TimePicker = ({
-    current_focus,
-    end_times,
-    is_nativepicker,
-    name,
-    onChange,
-    padding,
-    placeholder,
-    selected_time,
-    setCurrentFocus,
-    start_times,
-    validation_errors,
-}) => {
-    const [is_open, setIsOpen] = React.useState(false);
-    const [wrapper_ref, setWrapperRef] = React.useState(null);
-
-    React.useEffect(() => {
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
-    });
-
-    const toggleDropDown = () => {
-        setIsOpen(!is_open);
-    };
-
-    const handleChange = arg => {
-        // To handle nativepicker;
-        const value = typeof arg === 'object' ? arg.target.selected_time : arg;
-
-        if (value !== selected_time) {
-            onChange({ target: { name, value } });
-        }
-    };
-
-    const saveRef = node => {
-        if (!node) return;
-        setWrapperRef(node);
-    };
-
-    const handleClickOutside = event => {
-        if (!wrapper_ref?.contains(event.target) && is_open) {
-            setIsOpen(false);
-        }
-    };
-
-    return (
-        <div ref={saveRef} className={classNames(class_prefix, { [`${class_prefix}--padding`]: padding })}>
-            {is_nativepicker ? (
-                <input
-                    type='time'
-                    id={`dt_${name}_input`}
-                    value={selected_time}
-                    onChange={handleChange}
-                    name={name}
-                    min={start_times[0]}
-                    max={end_times[end_times.length - 1]}
-                />
-            ) : (
-                <React.Fragment>
-                    <InputField
-                        error_messages={validation_errors}
-                        type='text'
-                        is_hj_whitelisted
-                        is_read_only
-                        id={`dt_${name}_input`}
-                        className={classNames(`${class_prefix}-input`)}
-                        current_focus={current_focus}
-                        value={`${selected_time} GMT`}
-                        onClick={toggleDropDown}
-                        name={name}
-                        placeholder={placeholder}
-                        setCurrentFocus={setCurrentFocus}
-                    />
-                    <Icon icon='IcClockOutline' className={`${class_prefix}__icon`} />
-                    <CSSTransition
-                        in={is_open}
-                        classNames={{
-                            enter: 'time-picker__dialog--enter',
-                            enterDone: 'time-picker__dialog--enter-done',
-                            exit: 'time-picker__dialog--exit',
-                        }}
-                        timeout={100}
-                        unmountOnExit
-                    >
-                        <Dialog
-                            end_times={end_times}
-                            start_times={start_times}
-                            className={'from-left'}
-                            onChange={handleChange}
-                            preClass={class_prefix}
-                            selected_time={selected_time}
-                        />
-                    </CSSTransition>
-                </React.Fragment>
-            )}
-        </div>
-    );
-};
-
-TimePicker.propTypes = {
-    end_time: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]),
-    is_clearable: PropTypes.bool,
-    is_nativepicker: PropTypes.bool,
-    name: PropTypes.string,
-    onChange: PropTypes.func,
-    padding: PropTypes.string,
-    placeholder: PropTypes.string,
-    selected_time: PropTypes.string,
-    start_time: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]),
-};
-
-export default observer(
-    connect(({ ui }) => ({
-        current_focus: ui.current_focus,
-        setCurrentFocus: ui.setCurrentFocus,
-    }))(TimePicker)
-);
diff --git a/packages/reports/src/Components/Form/fieldset.jsx b/packages/reports/src/Components/Form/fieldset.jsx
deleted file mode 100644
index 1cfb08d4cfd5..000000000000
--- a/packages/reports/src/Components/Form/fieldset.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Popover } from '@deriv/components';
-
-const Fieldset = ({ children, className, header, header_tooltip, is_center, onMouseEnter, onMouseLeave }) => {
-    const fieldset_header_class = classNames('trade-container__fieldset-header', {
-        'center-text': is_center,
-        'trade-container__fieldset-header--inline': header_tooltip,
-    });
-    const fieldset_info_class = classNames(
-        'trade-container__fieldset-info',
-        !is_center && 'trade-container__fieldset-info--left'
-    );
-
-    return (
-        <fieldset className={className} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-            {!!header && (
-                <div className={fieldset_header_class}>
-                    <span className={fieldset_info_class}>{header}</span>
-                    {header_tooltip && (
-                        <Popover
-                            alignment='left'
-                            icon='info'
-                            is_bubble_hover_enabled
-                            message={header_tooltip}
-                            margin={216}
-                            relative_render
-                        />
-                    )}
-                </div>
-            )}
-            {children}
-        </fieldset>
-    );
-};
-
-// ToDo:
-// - Refactor Last Digit to keep the children as array type.
-//   Currently last_digit.jsx returns object (React-Element) as 'children'
-//   props type.
-Fieldset.propTypes = {
-    children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-    className: PropTypes.string,
-    header: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    header_tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    onMouseEnter: PropTypes.func,
-    onMouseLeave: PropTypes.func,
-};
-
-export default Fieldset;
diff --git a/packages/reports/src/Components/Form/number-selector.jsx b/packages/reports/src/Components/Form/number-selector.jsx
deleted file mode 100644
index 0ca791d7d173..000000000000
--- a/packages/reports/src/Components/Form/number-selector.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-// arr_arr_numbers is an array of arrays where each nested array indicates one row
-// for example [[1, 2, 3]] will be a single row of these three numbers
-// but [[1, 2, 3], [4, 5, 6]] will be two rows:
-// first row with the first three numbers and second row with the last three numbers
-const NumberSelector = ({ arr_arr_numbers, name, onChange, selected_number }) => {
-    const handleSelect = item => {
-        if (+item.target.getAttribute('data-value') !== selected_number) {
-            onChange({ target: { name, value: +item.target.getAttribute('data-value') } });
-        }
-    };
-
-    return (
-        <div className='number-selector'>
-            {arr_arr_numbers.map((arr_numbers, idx) => (
-                <div className='number-selector__row' key={idx}>
-                    {arr_numbers.map(i => (
-                        <span
-                            key={i}
-                            className={classNames('number-selector__selection', {
-                                'number-selector__selection--selected': selected_number === i,
-                            })}
-                            data-value={i}
-                            onClick={handleSelect}
-                        >
-                            {i}
-                        </span>
-                    ))}
-                </div>
-            ))}
-        </div>
-    );
-};
-
-NumberSelector.propTypes = {
-    arr_arr_numbers: PropTypes.arrayOf(PropTypes.array),
-    name: PropTypes.string,
-    onChange: PropTypes.func,
-    selected_number: PropTypes.number,
-};
-
-export default NumberSelector;
diff --git a/packages/reports/src/Helpers/contract-type.js b/packages/reports/src/Helpers/contract-type.js
deleted file mode 100644
index 2c9063d321c3..000000000000
--- a/packages/reports/src/Helpers/contract-type.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import React from 'react';
-import { localize } from '@deriv/translations';
-
-export const contract_category_icon = {
-    [localize('Ups & Downs')]: 'IcUpsDowns',
-    [localize('Highs & Lows')]: 'IcHighsLows',
-    [localize('Ins & Outs')]: 'IcInsOuts',
-    [localize('Look Backs')]: 'IcLookbacks',
-    [localize('Digits')]: 'IcDigits',
-    [localize('Multipliers')]: 'IcMultiplier',
-};
-
-export const getContractTypeCategoryIcons = () => ({
-    All: 'IcCatAll',
-    Options: 'IcCatOptions',
-    Multipliers: 'IcCatMultiplier',
-});
-
-/**
- * Returns a list of contracts in the following format:
- * {
- *      label: '', // contract category label
- *      contract_types: [], // list of contract types
- *      icon: '', // contract categoty icon
- * }
- * @param {object} contract_types_list  - list of all contracts
- * @param {array}  unsupported_list - list of unsupported contract types
- */
-export const getAvailableContractTypes = (contract_types_list, unsupported_list) => {
-    return Object.keys(contract_types_list)
-        .map(key => {
-            const contract_types = contract_types_list[key];
-            const available_contract_types = contract_types.filter(type =>
-                type.value &&
-                // TODO: remove this check once all contract types are supported
-                !unsupported_list.includes(type.value)
-                    ? type
-                    : undefined
-            );
-
-            if (available_contract_types.length) {
-                return {
-                    key,
-                    label: key,
-                    contract_types: available_contract_types,
-                    icon: contract_category_icon[key],
-                    component:
-                        key === localize('Multipliers') ? (
-                            <span className='dc-vertical-tab__header--new'>{localize('NEW!')}</span>
-                        ) : null,
-                };
-            }
-            return undefined;
-        })
-        .filter(Boolean);
-};
-
-/**
- * Returns a filtered list
- * @param {object} contract_types_list  - list of all contracts
- * @param {array}  filtered_items_array - list of filtered contract category names and/or contract types names
- */
-export const getFilteredList = (contract_types_list, filtered_items_array) => {
-    return Object.keys(contract_types_list)
-        .map(key => {
-            const { label, contract_types, icon } = contract_types_list[key];
-
-            const filtered_by_contract_types = contract_types.filter(c =>
-                filtered_items_array.includes(c.text.toLowerCase())
-            );
-
-            const filtered_by_contract_category = filtered_items_array.includes(label.toLowerCase());
-
-            if (filtered_by_contract_types.length) {
-                return {
-                    label,
-                    contract_types: filtered_by_contract_types,
-                    icon,
-                };
-            } else if (filtered_by_contract_category) {
-                return {
-                    label,
-                    contract_types,
-                    icon,
-                };
-            }
-            return undefined;
-        })
-        .filter(Boolean);
-};
-
-const flatten = arr => [].concat(...arr);
-/**
- * Flatten list object into an array of contract category label and contract types names
- * @param {object} list
- */
-export const getContractsList = list =>
-    flatten(
-        Object.keys(list).map(
-            k => [
-                list[k].label.toLowerCase(), // contract category names
-                ...list[k].contract_types.map(c => c.text.toLowerCase()),
-            ] // contract types names
-        )
-    );
-
-export const findContractCategory = (list, item) =>
-    list.find(list_item => list_item.contract_types.some(i => i.value === item.value)) || {};
-
-export const getContractCategoryKey = (list, item) => findContractCategory(list, item).key;
-
-export const getContractTypes = (list, item) => findContractCategory(list, item).contract_types;
diff --git a/packages/reports/src/Stores/Modules/Trading/Actions/barrier.js b/packages/reports/src/Stores/Modules/Trading/Actions/barrier.js
deleted file mode 100644
index 16f4d3b9d165..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Actions/barrier.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export const getBarrierValues = ({ barrier_values = {} }) => ({
-    barrier_1: barrier_values.barrier || barrier_values.high_barrier || '',
-    barrier_2: barrier_values.low_barrier || '',
-});
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/Duration/advanced-duration.jsx b/packages/reports/src/Stores/Modules/Trading/Components/Duration/advanced-duration.jsx
deleted file mode 100644
index 0b248bcf208c..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Components/Duration/advanced-duration.jsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import classNames from 'classnames';
-import { PropTypes as MobxPropTypes } from 'mobx-react';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Dropdown, ButtonToggle, InputField } from '@deriv/components';
-import { toMoment } from '@deriv/shared';
-import RangeSlider from '../../../../../Components/Form/RangeSlider';
-import { connect } from '../../../../connect';
-import { hasIntradayDurationUnit } from '../../Helpers/duration';
-import TradingDatePicker from '../../../../../Components/Form/DatePicker';
-import TradingTimePicker from '../../../../../Components/Form/TimePicker';
-
-const AdvancedDuration = ({
-    advanced_duration_unit,
-    advanced_expiry_type,
-    duration_units_list,
-    duration_t,
-    contract_expiry_type,
-    changeDurationUnit,
-    current_focus,
-    getDurationFromUnit,
-    expiry_date,
-    expiry_list,
-    expiry_type,
-    number_input_props,
-    onChange,
-    onChangeUiStore,
-    server_time,
-    setCurrentFocus,
-    shared_input_props,
-    start_date,
-    validation_errors,
-}) => {
-    let is_24_hours_contract = false;
-
-    if (expiry_type === 'endtime') {
-        const has_intraday_duration_unit = hasIntradayDurationUnit(duration_units_list);
-        is_24_hours_contract =
-            (!!start_date || toMoment(expiry_date || server_time).isSame(toMoment(server_time), 'day')) &&
-            has_intraday_duration_unit;
-    }
-
-    const endtime_container_class = classNames('endtime-container', {
-        'has-time': is_24_hours_contract,
-    });
-
-    const changeExpiry = ({ target }) => {
-        const { name, value } = target;
-
-        onChange({ target: { name: 'expiry_type', value } });
-        onChangeUiStore({ name, value });
-    };
-
-    return (
-        <>
-            {expiry_list.length > 1 && (
-                <ButtonToggle
-                    id='dt_advanced_duration_toggle'
-                    buttons_arr={expiry_list}
-                    name='advanced_expiry_type'
-                    is_animated={true}
-                    onChange={changeExpiry}
-                    value={advanced_expiry_type}
-                />
-            )}
-            {expiry_type === 'duration' ? (
-                <>
-                    <div className='duration-container'>
-                        {duration_units_list.length >= 1 && (
-                            <Dropdown
-                                classNameDisplay='dc-dropdown__display--duration'
-                                disabled={false}
-                                id='duration'
-                                is_alignment_left
-                                is_nativepicker={false}
-                                list={duration_units_list}
-                                name='advanced_duration_unit'
-                                no_border={true}
-                                onChange={changeDurationUnit}
-                                value={advanced_duration_unit}
-                            />
-                        )}
-                        {advanced_duration_unit === 't' && contract_expiry_type === 'tick' && (
-                            <RangeSlider name='duration' ticks={10} value={duration_t} {...shared_input_props} />
-                        )}
-                        {advanced_duration_unit === 'd' && (
-                            <TradingDatePicker
-                                id='dt_advanced_duration_datepicker'
-                                mode='duration'
-                                name='duration'
-                                is_24_hours_contract={is_24_hours_contract}
-                            />
-                        )}
-                        {advanced_duration_unit !== 't' && advanced_duration_unit !== 'd' && (
-                            <InputField
-                                id='dt_advanced_duration_input'
-                                classNameInput='trade-container__input'
-                                current_focus={current_focus}
-                                error_messages={validation_errors.duration}
-                                label={duration_units_list.length === 1 ? duration_units_list[0].text : null}
-                                name='duration'
-                                setCurrentFocus={setCurrentFocus}
-                                value={getDurationFromUnit(advanced_duration_unit)}
-                                {...number_input_props}
-                                {...shared_input_props}
-                            />
-                        )}
-                    </div>
-                </>
-            ) : (
-                <>
-                    <div className={endtime_container_class}>
-                        <TradingDatePicker
-                            id='dt_advanced_duration_datepicker'
-                            name='expiry_date'
-                            is_24_hours_contract={is_24_hours_contract}
-                            value={expiry_date}
-                        />
-                        {
-                            is_24_hours_contract && <TradingTimePicker />
-                            // validation_errors={validation_errors.end_time} TODO: add validation_errors for end time
-                        }
-                    </div>
-                </>
-            )}
-        </>
-    );
-};
-
-AdvancedDuration.propTypes = {
-    advanced_duration_unit: PropTypes.string,
-    advanced_expiry_type: PropTypes.string,
-    changeDurationUnit: PropTypes.func,
-    contract_expiry_type: PropTypes.string,
-    current_focus: PropTypes.string,
-    duration_t: PropTypes.number,
-    duration_units_list: MobxPropTypes.arrayOrObservableArray,
-    expiry_date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    expiry_list: PropTypes.array,
-    expiry_type: PropTypes.string,
-    getDurationFromUnit: PropTypes.func,
-    number_input_props: PropTypes.object,
-    onChange: PropTypes.func,
-    onChangeUiStore: PropTypes.func,
-    server_time: PropTypes.object,
-    setCurrentFocus: PropTypes.func,
-    shared_input_props: PropTypes.object,
-    start_date: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    validation_errors: PropTypes.object,
-};
-
-export default connect(({ modules, ui }) => ({
-    contract_expiry_type: modules.trade.contract_expiry_type,
-    current_focus: ui.current_focus,
-    setCurrentFocus: ui.setCurrentFocus,
-    validation_errors: modules.trade.validation_errors,
-}))(AdvancedDuration);
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-mobile.jsx b/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-mobile.jsx
deleted file mode 100644
index 47737bbf7c33..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-mobile.jsx
+++ /dev/null
@@ -1,353 +0,0 @@
-import React from 'react';
-import { Tabs, TickPicker, Numpad, RelativeDatepicker } from '@deriv/components';
-import { isEmptyObject, addComma } from '@deriv/shared';
-import { Localize, localize } from '@deriv/translations';
-
-import { connect } from '../../../../connect';
-import { getDurationMinMaxValues } from '../../Helpers/duration';
-
-const submit_label = localize('OK');
-
-const updateAmountChanges = (obj, stake_value, payout_value, basis, trade_basis, trade_amount) => {
-    // TODO: Move onChangeMultiple outside of duration and amount
-    //  and unify all trade parameter components to use same onMultipleChange func onSubmit
-    // Checks if Amount tab was changed to stake and stake value was updated
-    if (basis === 'stake' && stake_value !== trade_amount) {
-        obj.basis = 'stake';
-        obj.amount = stake_value;
-        // Checks if Amount tab was changed to payout and payout value was updated
-    } else if (basis === 'payout' && payout_value !== trade_amount) {
-        obj.basis = 'payout';
-        obj.amount = payout_value;
-        // Checks if Amount tab was changed but payout or stake value was not updated
-    } else if (trade_basis !== basis) {
-        obj.basis = basis;
-        obj.amount = trade_amount;
-    }
-};
-
-const Ticks = ({
-    setDurationError,
-    basis_option,
-    toggleModal,
-    onChangeMultiple,
-    duration_min_max,
-    has_amount_error,
-    trade_duration,
-    trade_basis,
-    trade_amount,
-    trade_duration_unit,
-    payout_value,
-    stake_value,
-    selected_duration,
-    setSelectedDuration,
-}) => {
-    React.useEffect(() => {
-        setDurationError(false);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    const [min_tick, max_tick] = getDurationMinMaxValues(duration_min_max, 'tick', 't');
-
-    const setTickDuration = value => {
-        const { value: duration } = value.target;
-        const on_change_obj = {};
-
-        // check for any amount changes from Amount trade params tab before submitting onChange object
-        if (!has_amount_error)
-            updateAmountChanges(on_change_obj, stake_value, payout_value, basis_option, trade_basis, trade_amount);
-
-        if (trade_duration !== duration || trade_duration_unit !== 't') {
-            on_change_obj.duration_unit = 't';
-            on_change_obj.duration = duration;
-        }
-
-        if (!isEmptyObject(on_change_obj)) onChangeMultiple(on_change_obj);
-        toggleModal();
-    };
-
-    const onTickChange = tick => setSelectedDuration('t', tick);
-    const tick_duration = trade_duration < min_tick && selected_duration < min_tick ? min_tick : selected_duration;
-    return (
-        <div className='trade-params__duration-tickpicker'>
-            <TickPicker
-                default_value={tick_duration}
-                submit_label={submit_label}
-                max_value={max_tick}
-                min_value={min_tick}
-                onSubmit={setTickDuration}
-                onValueChange={onTickChange}
-                singular_label={localize('Tick')}
-                plural_label={localize('Ticks')}
-            />
-        </div>
-    );
-};
-
-const TicksWrapper = connect(({ modules }) => ({
-    duration_min_max: modules.trade.duration_min_max,
-    onChangeMultiple: modules.trade.onChangeMultiple,
-    trade_basis: modules.trade.basis,
-    trade_amount: modules.trade.amount,
-    trade_duration: modules.trade.duration,
-    trade_duration_unit: modules.trade.duration_unit,
-}))(Ticks);
-
-const Numbers = ({
-    addToast,
-    setDurationError,
-    basis_option,
-    toggleModal,
-    onChangeMultiple,
-    duration_min_max,
-    duration_unit_option,
-    has_amount_error,
-    contract_expiry = 'intraday',
-    payout_value,
-    stake_value,
-    trade_amount,
-    trade_basis,
-    trade_duration_unit,
-    trade_duration,
-    selected_duration,
-    setSelectedDuration,
-}) => {
-    const { value: duration_unit } = duration_unit_option;
-    const [min, max] = getDurationMinMaxValues(duration_min_max, contract_expiry, duration_unit);
-
-    const validateDuration = value => {
-        const localized_message = (
-            <Localize
-                i18n_default_text='Should be between {{min}} and {{max}}'
-                values={{
-                    min,
-                    max: addComma(max, 0, false),
-                }}
-            />
-        );
-        if (parseInt(value) < min || parseInt(selected_duration) > max) {
-            addToast({ key: 'duration_error', content: localized_message, type: 'error', timeout: 2000 });
-            setDurationError(true);
-            return 'error';
-        } else if (parseInt(value) > max) {
-            addToast({ key: 'duration_error', content: localized_message, type: 'error', timeout: 2000 });
-            return 'error';
-        } else if (value.toString().length < 1) {
-            addToast({ key: 'duration_error', content: localized_message, type: 'error', timeout: 2000 });
-            setDurationError(true);
-            return false;
-        }
-
-        setDurationError(false);
-        return true;
-    };
-
-    const setDuration = duration => {
-        const on_change_obj = {};
-
-        // check for any amount changes from Amount trade params tab before submitting onChange object
-        if (!has_amount_error)
-            updateAmountChanges(on_change_obj, stake_value, payout_value, basis_option, trade_basis, trade_amount);
-
-        if (trade_duration !== duration || trade_duration_unit !== duration_unit) {
-            on_change_obj.duration_unit = duration_unit;
-            on_change_obj.duration = duration;
-            on_change_obj.expiry_type = 'duration';
-        }
-
-        if (!isEmptyObject(on_change_obj)) onChangeMultiple(on_change_obj);
-        toggleModal();
-    };
-
-    const onNumberChange = num => {
-        setSelectedDuration(duration_unit, num);
-        validateDuration(num);
-    };
-
-    return (
-        <div className='trade-params__amount-keypad'>
-            <Numpad
-                value={selected_duration}
-                onSubmit={setDuration}
-                render={({ value: v, className }) => {
-                    return <div className={className}>{v}</div>;
-                }}
-                pip_size={0}
-                submit_label={submit_label}
-                min={min}
-                max={max}
-                reset_press_interval={350}
-                reset_value=''
-                onValidate={validateDuration}
-                onValueChange={onNumberChange}
-            />
-        </div>
-    );
-};
-
-const NumpadWrapper = connect(({ modules, ui }) => ({
-    duration_min_max: modules.trade.duration_min_max,
-    trade_duration: modules.trade.duration,
-    trade_duration_unit: modules.trade.duration_unit,
-    trade_basis: modules.trade.basis,
-    trade_amount: modules.trade.amount,
-    onChangeMultiple: modules.trade.onChangeMultiple,
-    addToast: ui.addToast,
-}))(Numbers);
-
-const Duration = ({
-    amount_tab_idx,
-    toggleModal,
-    duration_units_list,
-    duration_unit,
-    duration_tab_idx,
-    duration_min_max,
-    has_amount_error,
-    setDurationTabIdx,
-    setDurationError,
-    t_duration,
-    s_duration,
-    m_duration,
-    h_duration,
-    d_duration,
-    setSelectedDuration,
-    trade_basis,
-    stake_value,
-    payout_value,
-}) => {
-    const duration_values = {
-        t_duration,
-        s_duration,
-        m_duration,
-        h_duration,
-        d_duration,
-    };
-    const has_selected_tab_idx = typeof duration_tab_idx !== 'undefined';
-    const active_index = has_selected_tab_idx
-        ? duration_tab_idx
-        : duration_units_list.findIndex(d => d.value === duration_unit);
-    const [min, max] = getDurationMinMaxValues(duration_min_max, 'daily', 'd');
-    const handleRelativeChange = date => {
-        setSelectedDuration('d', date);
-    };
-    const selected_basis_option = () => {
-        if (amount_tab_idx === 0) {
-            return 'stake';
-        } else if (amount_tab_idx === 1) {
-            return 'payout';
-        }
-        return trade_basis;
-    };
-
-    const onTabChange = index => {
-        setDurationTabIdx(index);
-        const { value: unit } = duration_units_list[index];
-        setSelectedDuration(unit, duration_values[`${unit}_duration`]);
-    };
-
-    return (
-        <div>
-            <Tabs active_index={active_index} onTabItemClick={num => onTabChange(num)} single_tab_has_no_label top>
-                {duration_units_list.map(duration_unit_option => {
-                    switch (duration_unit_option.value) {
-                        case 't':
-                            return (
-                                <div label={duration_unit_option.text} key={duration_unit_option.value}>
-                                    <TicksWrapper
-                                        basis_option={selected_basis_option()}
-                                        has_amount_error={has_amount_error}
-                                        toggleModal={toggleModal}
-                                        selected_duration={t_duration}
-                                        setDurationError={setDurationError}
-                                        setSelectedDuration={setSelectedDuration}
-                                        stake_value={stake_value}
-                                        payout_value={payout_value}
-                                    />
-                                </div>
-                            );
-                        case 's':
-                            return (
-                                <div label={duration_unit_option.text} key={duration_unit_option.value}>
-                                    <NumpadWrapper
-                                        basis_option={selected_basis_option()}
-                                        has_amount_error={has_amount_error}
-                                        toggleModal={toggleModal}
-                                        duration_unit_option={duration_unit_option}
-                                        selected_duration={s_duration}
-                                        setDurationError={setDurationError}
-                                        setSelectedDuration={setSelectedDuration}
-                                        stake_value={stake_value}
-                                        payout_value={payout_value}
-                                    />
-                                </div>
-                            );
-                        case 'm':
-                            return (
-                                <div label={duration_unit_option.text} key={duration_unit_option.value}>
-                                    <NumpadWrapper
-                                        basis_option={selected_basis_option()}
-                                        has_amount_error={has_amount_error}
-                                        toggleModal={toggleModal}
-                                        duration_unit_option={duration_unit_option}
-                                        selected_duration={m_duration}
-                                        setDurationError={setDurationError}
-                                        setSelectedDuration={setSelectedDuration}
-                                        stake_value={stake_value}
-                                        payout_value={payout_value}
-                                    />
-                                </div>
-                            );
-                        case 'h':
-                            return (
-                                <div label={duration_unit_option.text} key={duration_unit_option.value}>
-                                    <NumpadWrapper
-                                        basis_option={selected_basis_option()}
-                                        has_amount_error={has_amount_error}
-                                        toggleModal={toggleModal}
-                                        duration_unit_option={duration_unit_option}
-                                        selected_duration={h_duration}
-                                        setDurationError={setDurationError}
-                                        setSelectedDuration={setSelectedDuration}
-                                        stake_value={stake_value}
-                                        payout_value={payout_value}
-                                    />
-                                </div>
-                            );
-                        case 'd':
-                            return (
-                                <div label={duration_unit_option.text} key={duration_unit_option.value}>
-                                    <NumpadWrapper
-                                        basis_option={selected_basis_option()}
-                                        has_amount_error={has_amount_error}
-                                        toggleModal={toggleModal}
-                                        duration_unit_option={duration_unit_option}
-                                        contract_expiry='daily'
-                                        selected_duration={d_duration}
-                                        setDurationError={setDurationError}
-                                        setSelectedDuration={setSelectedDuration}
-                                        stake_value={stake_value}
-                                        payout_value={payout_value}
-                                    />
-                                    <RelativeDatepicker
-                                        onChange={handleRelativeChange}
-                                        min={min}
-                                        max={max}
-                                        title={localize('Pick an end date')}
-                                    />
-                                </div>
-                            );
-                        default:
-                            return null;
-                    }
-                })}
-            </Tabs>
-        </div>
-    );
-};
-
-export default connect(({ modules }) => ({
-    duration_units_list: modules.trade.duration_units_list,
-    duration_min_max: modules.trade.duration_min_max,
-    duration_unit: modules.trade.duration_unit,
-    trade_basis: modules.trade.basis,
-}))(Duration);
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-toggle.jsx b/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-toggle.jsx
deleted file mode 100644
index 427f59362c9d..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-toggle.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Icon } from '@deriv/components';
-import { localize } from '@deriv/translations';
-
-const DurationToggle = ({ name, onChange, value }) => {
-    const toggle = () => {
-        onChange({ target: { value: !value, name } });
-    };
-    const icon_className = classNames('advanced-simple-toggle__icon', 'select-arrow', {
-        'advanced-simple-toggle__icon--active': value,
-    });
-    return (
-        <>
-            <button
-                id={value ? 'dt_advanced_toggle' : 'dt_simple_toggle'}
-                className='advanced-simple-toggle'
-                onClick={toggle}
-                aria-label={localize('Toggle between advanced and simple duration settings')}
-            >
-                <Icon
-                    icon='IcChevronDown'
-                    className={icon_className}
-                    classNamePath={'advanced-simple-toggle__icon-path'}
-                />
-            </button>
-        </>
-    );
-};
-
-DurationToggle.propTypes = {
-    name: PropTypes.string,
-    onChange: PropTypes.func,
-    value: PropTypes.bool,
-};
-
-export default DurationToggle;
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-wrapper.jsx b/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-wrapper.jsx
deleted file mode 100644
index 7f6b9b5e9bc2..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration-wrapper.jsx
+++ /dev/null
@@ -1,211 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { PropTypes as MobxPropTypes } from 'mobx-react';
-import { connect } from '../../../../connect';
-import { getDurationMinMaxValues } from '../../Helpers/duration';
-import Duration from './duration.jsx';
-
-const DurationWrapper = props => {
-    const {
-        advanced_duration_unit,
-        advanced_expiry_type,
-        duration,
-        duration_unit,
-        expiry_type,
-        getDurationFromUnit,
-        is_advanced_duration,
-        onChange,
-        onChangeUiStore,
-        simple_duration_unit,
-        contract_expiry_type,
-        duration_min_max,
-        duration_units_list,
-        onChangeMultiple,
-    } = props;
-
-    const hasDurationUnit = (duration_type, is_advanced) => {
-        let duration_list = [...duration_units_list];
-
-        if (duration_list.length > 1 && !is_advanced) {
-            duration_list = duration_list.filter(du => du.value === 'm' || du.value === 't');
-        }
-
-        return duration_list.some(du => du.value === duration_type);
-    };
-
-    const setDurationUnit = () => {
-        if (duration_units_list?.length > 0) {
-            const new_duration_unit = duration_units_list[0].value;
-            const new_duration_value = getDurationFromUnit(new_duration_unit);
-
-            onChangeUiStore({
-                name: `${is_advanced_duration ? 'advanced' : 'simple'}_duration_unit`,
-                value: new_duration_unit,
-            });
-            onChangeMultiple({
-                duration_unit: new_duration_unit,
-                duration: +new_duration_value,
-            });
-        }
-    };
-
-    const handleEndTime = () => {
-        const symbol_has_endtime = duration_units_list.length > 1 || is_advanced_duration;
-
-        if (symbol_has_endtime) {
-            // simple duration does not have endtime
-            if (!is_advanced_duration) onChangeUiStore({ name: 'is_advanced_duration', value: true });
-
-            onChangeUiStore({ name: 'advanced_expiry_type', value: 'endtime' });
-        } else {
-            // If query string contains endtime but contract type does not e.g. digits (only ticks contracts)
-            onChange({ target: { name: 'expiry_type', value: 'duration' } });
-        }
-    };
-
-    const assertDurationIsWithinBoundary = React.useCallback(
-        current_duration => {
-            const [min_value, max_value] = getDurationMinMaxValues(
-                duration_min_max,
-                contract_expiry_type,
-                duration_unit
-            );
-            if (contract_expiry_type === 'tick' && current_duration < min_value) {
-                onChangeUiStore({ name: `duration_${duration_unit}`, value: min_value });
-                onChange({ target: { name: 'duration', value: min_value } });
-            }
-
-            if (!(current_duration < min_value) && current_duration > max_value && duration_unit !== 'd') {
-                onChangeUiStore({ name: `duration_${duration_unit}`, value: max_value });
-                onChange({ target: { name: 'duration', value: max_value } });
-            }
-        },
-        [contract_expiry_type, duration_unit, duration_min_max, onChange, onChangeUiStore]
-    );
-
-    React.useEffect(() => {
-        if (duration_unit === 'd') {
-            onChangeUiStore({
-                name: 'is_advanced_duration',
-                value: true,
-            });
-        }
-    }, [duration_unit, onChangeUiStore]);
-
-    React.useEffect(() => {
-        const current_unit = is_advanced_duration ? advanced_duration_unit : simple_duration_unit;
-        const current_duration = getDurationFromUnit(current_unit);
-
-        if (duration_unit !== current_unit) {
-            onChangeUiStore({
-                name: `${is_advanced_duration ? 'advanced' : 'simple'}_duration_unit`,
-                value: duration_unit,
-            });
-        }
-
-        if (+duration !== +current_duration) {
-            onChangeUiStore({ name: `duration_${duration_unit}`, value: duration });
-        }
-
-        if (expiry_type === 'endtime') handleEndTime();
-
-        assertDurationIsWithinBoundary(current_duration);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    React.useEffect(() => {
-        if (is_advanced_duration && expiry_type !== advanced_expiry_type) {
-            onChange({ target: { name: 'expiry_type', value: advanced_expiry_type } });
-        }
-    }, [is_advanced_duration, expiry_type, advanced_expiry_type, onChange]);
-
-    // intercept changes to contract duration and check that trade_store and ui_store are aligned.
-    React.useEffect(() => {
-        const current_duration = getDurationFromUnit(duration_unit);
-        const simple_is_not_type_duration = !is_advanced_duration && expiry_type !== 'duration';
-
-        // simple only has expiry type duration
-        if (simple_is_not_type_duration) {
-            onChange({ target: { name: 'expiry_type', value: 'duration' } });
-        }
-
-        if (duration !== current_duration) {
-            onChangeUiStore({ name: `duration_${duration_unit}`, value: duration });
-        }
-
-        assertDurationIsWithinBoundary(current_duration);
-    }, [
-        duration_unit,
-        is_advanced_duration,
-        expiry_type,
-        duration,
-        assertDurationIsWithinBoundary,
-        onChange,
-        onChangeUiStore,
-        getDurationFromUnit,
-    ]);
-
-    const current_duration_unit = is_advanced_duration ? advanced_duration_unit : simple_duration_unit;
-    const has_missing_duration_unit = !hasDurationUnit(current_duration_unit, is_advanced_duration);
-    const simple_is_missing_duration_unit =
-        !is_advanced_duration && simple_duration_unit === 'd' && duration_units_list.length === 4;
-    const [min_value, max_value] = getDurationMinMaxValues(duration_min_max, contract_expiry_type, duration_unit);
-
-    if (has_missing_duration_unit || simple_is_missing_duration_unit) {
-        setDurationUnit();
-    }
-
-    return <Duration hasDurationUnit={hasDurationUnit} max_value={max_value} min_value={min_value} {...props} />;
-};
-
-DurationWrapper.propTypes = {
-    advanced_duration_unit: PropTypes.string,
-    advanced_expiry_type: PropTypes.string,
-    contract_expiry_type: PropTypes.string,
-    duration: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    duration_d: PropTypes.number,
-    duration_h: PropTypes.number,
-    duration_m: PropTypes.number,
-    duration_min_max: PropTypes.object,
-    duration_s: PropTypes.number,
-    duration_t: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    duration_unit: PropTypes.string,
-    duration_units_list: MobxPropTypes.arrayOrObservableArray,
-    expiry_date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    expiry_time: PropTypes.string,
-    expiry_type: PropTypes.string,
-    getDurationFromUnit: PropTypes.func,
-    is_advanced_duration: PropTypes.bool,
-    is_minimized: PropTypes.bool,
-    market_open_times: PropTypes.array,
-    onChange: PropTypes.func,
-    onChangeMultiple: PropTypes.func,
-    onChangeUiStore: PropTypes.func,
-    sessions: MobxPropTypes.arrayOrObservableArray,
-    simple_duration_unit: PropTypes.string,
-    start_date: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    start_time: PropTypes.string,
-    symbol: PropTypes.string,
-};
-
-export default connect(({ modules, ui }) => ({
-    advanced_duration_unit: ui.advanced_duration_unit,
-    advanced_expiry_type: ui.advanced_expiry_type,
-    contract_expiry_type: modules.trade.contract_expiry_type,
-    duration: modules.trade.duration,
-    duration_unit: modules.trade.duration_unit,
-    duration_units_list: modules.trade.duration_units_list,
-    duration_min_max: modules.trade.duration_min_max,
-    duration_t: ui.duration_t,
-    expiry_date: modules.trade.expiry_date,
-    expiry_time: modules.trade.expiry_time,
-    expiry_type: modules.trade.expiry_type,
-    getDurationFromUnit: ui.getDurationFromUnit,
-    is_advanced_duration: ui.is_advanced_duration,
-    onChange: modules.trade.onChange,
-    onChangeUiStore: ui.onChangeUiStore,
-    onChangeMultiple: modules.trade.onChangeMultiple,
-    simple_duration_unit: ui.simple_duration_unit,
-    start_date: modules.trade.start_date,
-    market_open_times: modules.trade.market_open_times,
-}))(DurationWrapper);
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration.jsx b/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration.jsx
deleted file mode 100644
index 6b7a6609915f..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Components/Duration/duration.jsx
+++ /dev/null
@@ -1,224 +0,0 @@
-import classNames from 'classnames';
-import { PropTypes as MobxPropTypes } from 'mobx-react';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { localize } from '@deriv/translations';
-import Fieldset from 'Components/Form/fieldset.jsx';
-import RangeSlider from 'Components/Form/RangeSlider';
-import { Dropdown } from '@deriv/components';
-import { toMoment } from '@deriv/shared';
-import DurationToggle from './duration-toggle.jsx';
-import AdvancedDuration from './advanced-duration.jsx';
-import SimpleDuration from './simple-duration.jsx';
-
-const Duration = ({
-    advanced_duration_unit,
-    advanced_expiry_type,
-    duration,
-    duration_unit,
-    duration_units_list,
-    duration_t,
-    expiry_date,
-    expiry_time,
-    expiry_type,
-    getDurationFromUnit,
-    hasDurationUnit,
-    is_advanced_duration,
-    is_minimized,
-    min_value,
-    max_value,
-    onChange,
-    onChangeUiStore,
-    onChangeMultiple,
-    simple_duration_unit,
-    server_time,
-    start_date,
-    market_open_times,
-}) => {
-    const expiry_list = [{ text: localize('Duration'), value: 'duration' }];
-
-    const has_end_time = expiry_list.find(expiry => expiry.value === 'endtime');
-    if (duration_units_list.length === 1 && duration_unit === 't') {
-        if (has_end_time) {
-            expiry_list.pop(); // remove end time for contracts with only tick duration
-        }
-    } else if (!has_end_time) {
-        expiry_list.push({ text: localize('End time'), value: 'endtime' });
-    }
-
-    if (is_minimized) {
-        const moment_expiry = toMoment(expiry_date);
-        const duration_unit_text = (duration_units_list.find(o => o.value === duration_unit) || {}).text;
-        return (
-            <div className='fieldset-minimized fieldset-minimized__duration'>
-                {expiry_type === 'duration'
-                    ? `${duration} ${duration_unit_text}`
-                    : `${moment_expiry.format('ddd - DD MMM, YYYY')}\n${expiry_time}`}
-            </div>
-        );
-    }
-
-    const changeDurationUnit = ({ target }) => {
-        const { name, value } = target;
-        const duration_value = getDurationFromUnit(value);
-
-        onChangeUiStore({ name, value });
-        onChangeMultiple({
-            duration_unit: value,
-            duration: duration_value,
-        });
-    };
-
-    const changeDurationValue = ({ target }) => {
-        const { name, value } = target;
-        const duration_name = `duration_${is_advanced_duration ? advanced_duration_unit : simple_duration_unit}`;
-
-        // e.target.value returns string, we need to convert them to number
-        onChangeUiStore({ name: duration_name, value: +value });
-        onChange({ target: { name, value: +value } });
-    };
-
-    const onToggleDurationType = ({ target }) => {
-        const { name, value: is_advanced } = target;
-        onChangeUiStore({ name, value: is_advanced });
-
-        // replace selected duration unit and duration if the contract doesn't have that duration unit
-        let current_duration_unit = is_advanced ? advanced_duration_unit : simple_duration_unit;
-        const duration_value = getDurationFromUnit(current_duration_unit);
-        if (!hasDurationUnit(current_duration_unit, is_advanced)) {
-            current_duration_unit = duration_units_list[0].value;
-            onChangeUiStore({
-                name: `${is_advanced ? 'advanced' : 'simple'}_duration_unit`,
-                value: current_duration_unit,
-            });
-        }
-
-        const new_trade_store_values = {};
-
-        // simple only has expiry type of duration
-        if (!is_advanced && expiry_type !== 'duration') {
-            new_trade_store_values.expiry_type = 'duration';
-        }
-        if (is_advanced && expiry_type !== advanced_expiry_type) {
-            new_trade_store_values.expiry_type = advanced_expiry_type;
-        }
-
-        const has_same_duration = current_duration_unit === duration_unit && duration_value === duration;
-        if (!has_same_duration) {
-            new_trade_store_values.duration_unit = current_duration_unit;
-            new_trade_store_values.duration = duration_value;
-        }
-
-        const should_update_trade_store = Object.keys(new_trade_store_values).length;
-        if (should_update_trade_store) {
-            onChangeMultiple({ ...new_trade_store_values });
-        }
-    };
-
-    const props = {
-        shared_input: {
-            is_hj_whitelisted: true,
-            onChange: changeDurationValue,
-            max_value,
-            min_value,
-        },
-        number_input: {
-            type: 'number',
-            is_incrementable: true,
-        },
-    };
-
-    // e.g. digit contracts only has range slider - does not have toggle between advanced / simple
-    const has_toggle = expiry_list.length > 1 || duration_units_list.length > 1;
-
-    return (
-        <Fieldset
-            className={classNames('trade-container__fieldset', {
-                'trade-container__fieldset--advanced': is_advanced_duration,
-            })}
-        >
-            {duration_units_list.length === 1 && !is_advanced_duration && (
-                <Dropdown
-                    classNameDisplay='dc-dropdown__display--duration'
-                    disabled={false}
-                    id='duration'
-                    is_alignment_left
-                    is_nativepicker={false}
-                    list={duration_units_list}
-                    name='advanced_duration_unit'
-                    no_border={true}
-                    onChange={changeDurationUnit}
-                    value={advanced_duration_unit}
-                />
-            )}
-            {!has_toggle && <RangeSlider name='duration' value={duration_t} {...props.shared_input} />}
-            {has_toggle && (
-                <>
-                    {is_advanced_duration && (
-                        <AdvancedDuration
-                            advanced_expiry_type={advanced_expiry_type}
-                            advanced_duration_unit={advanced_duration_unit}
-                            changeDurationUnit={changeDurationUnit}
-                            duration_t={duration_t}
-                            duration_units_list={duration_units_list}
-                            expiry_date={expiry_date}
-                            expiry_list={expiry_list}
-                            expiry_type={expiry_type}
-                            getDurationFromUnit={getDurationFromUnit}
-                            market_open_times={market_open_times}
-                            number_input_props={props.number_input}
-                            onChange={onChange}
-                            onChangeUiStore={onChangeUiStore}
-                            server_time={server_time}
-                            shared_input_props={props.shared_input}
-                            start_date={start_date}
-                        />
-                    )}
-                    {!is_advanced_duration && (
-                        <SimpleDuration
-                            getDurationFromUnit={getDurationFromUnit}
-                            changeDurationUnit={changeDurationUnit}
-                            duration_t={duration_t}
-                            duration_units_list={duration_units_list}
-                            number_input_props={props.number_input}
-                            shared_input_props={props.shared_input}
-                            simple_duration_unit={simple_duration_unit}
-                        />
-                    )}
-                    <DurationToggle
-                        name={'is_advanced_duration'}
-                        onChange={onToggleDurationType}
-                        value={is_advanced_duration}
-                    />
-                </>
-            )}
-        </Fieldset>
-    );
-};
-
-Duration.propTypes = {
-    advanced_duration_unit: PropTypes.string,
-    advanced_expiry_type: PropTypes.string,
-    duration: PropTypes.number,
-    duration_t: PropTypes.number,
-    duration_unit: PropTypes.string,
-    duration_units_list: MobxPropTypes.arrayOrObservableArray,
-    expiry_date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    expiry_time: PropTypes.string,
-    expiry_type: PropTypes.string,
-    getDurationFromUnit: PropTypes.func,
-    hasDurationUnit: PropTypes.func,
-    is_advanced_duration: PropTypes.bool,
-    is_minimized: PropTypes.bool,
-    market_open_times: PropTypes.array,
-    max_value: PropTypes.number,
-    min_value: PropTypes.number,
-    onChange: PropTypes.func,
-    onChangeUiStore: PropTypes.func,
-    server_time: PropTypes.object,
-    simple_duration_unit: PropTypes.string,
-    start_date: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    validation_errors: PropTypes.object,
-};
-
-export default Duration;
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/Duration/index.js b/packages/reports/src/Stores/Modules/Trading/Components/Duration/index.js
deleted file mode 100644
index 16229437c883..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Components/Duration/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default from './duration-wrapper.jsx';
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/Duration/simple-duration.jsx b/packages/reports/src/Stores/Modules/Trading/Components/Duration/simple-duration.jsx
deleted file mode 100644
index 553792b5da61..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Components/Duration/simple-duration.jsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { PropTypes as MobxPropTypes } from 'mobx-react';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { ButtonToggle, InputField } from '@deriv/components';
-import RangeSlider from '../../../../../Components/Form/RangeSlider';
-import { connect } from '../../../../connect';
-import TradingDatePicker from '../../../../../Components/Form/DatePicker';
-
-const SimpleDuration = ({
-    contract_expiry_type,
-    changeDurationUnit,
-    current_focus,
-    duration_t,
-    duration_units_list,
-    getDurationFromUnit,
-    number_input_props,
-    shared_input_props,
-    simple_duration_unit,
-    validation_errors,
-    setCurrentFocus,
-}) => {
-    const filterMinutesAndTicks = arr => {
-        const filtered_arr = arr.filter(du => du.value === 't' || du.value === 'm');
-        if (filtered_arr.length <= 1) return [];
-
-        return filtered_arr;
-    };
-    const has_label = !duration_units_list.some(du => du.value === 't');
-
-    return (
-        <>
-            {duration_units_list.length > 1 && (
-                <ButtonToggle
-                    id='dt_simple_duration_toggle'
-                    buttons_arr={filterMinutesAndTicks(duration_units_list)}
-                    is_animated={true}
-                    name='simple_duration_unit'
-                    onChange={changeDurationUnit}
-                    value={simple_duration_unit}
-                />
-            )}
-            {simple_duration_unit === 't' && contract_expiry_type === 'tick' && (
-                <RangeSlider name='duration' value={duration_t} ticks={10} {...shared_input_props} />
-            )}
-            {simple_duration_unit === 'd' && (
-                <TradingDatePicker id='dt_simple_duration_datepicker' mode='duration' name='duration' />
-            )}
-            {simple_duration_unit !== 't' && simple_duration_unit !== 'd' && (
-                <InputField
-                    id='dt_simple_duration_input'
-                    classNameInput='trade-container__input'
-                    current_focus={current_focus}
-                    error_messages={validation_errors.duration}
-                    name='duration'
-                    label={has_label ? duration_units_list[0]?.text : null}
-                    setCurrentFocus={setCurrentFocus}
-                    value={getDurationFromUnit(simple_duration_unit)}
-                    {...number_input_props}
-                    {...shared_input_props}
-                />
-            )}
-        </>
-    );
-};
-
-SimpleDuration.propTypes = {
-    changeDurationUnit: PropTypes.func,
-    contract_expiry_type: PropTypes.string,
-    current_focus: PropTypes.string,
-    duration_t: PropTypes.number,
-    duration_units_list: MobxPropTypes.arrayOrObservableArray,
-    getDurationFromUnit: PropTypes.func,
-    number_input_props: PropTypes.object,
-    setCurrentFocus: PropTypes.func,
-    shared_input_props: PropTypes.object,
-    simple_duration_unit: PropTypes.string,
-    validation_errors: PropTypes.object,
-};
-
-export default connect(({ modules, ui }) => ({
-    contract_expiry_type: modules.trade.contract_expiry_type,
-    current_focus: ui.current_focus,
-    setCurrentFocus: ui.setCurrentFocus,
-    simple_duration_unit: ui.simple_duration_unit,
-    validation_errors: modules.trade.validation_errors,
-}))(SimpleDuration);
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/allow-equals.jsx b/packages/reports/src/Stores/Modules/Trading/Components/allow-equals.jsx
deleted file mode 100644
index 95ec96b84710..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Components/allow-equals.jsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Popover, Checkbox } from '@deriv/components';
-import { localize } from '@deriv/translations';
-import { hasCallPutEqual, hasDurationForCallPutEqual, isRiseFallEqual } from '../Helpers/allow-equals';
-
-const AllowEquals = ({
-    contract_start_type,
-    contract_type,
-    contract_types_list,
-    duration_unit,
-    expiry_type,
-    onChange,
-    value,
-    has_equals_only,
-}) => {
-    const has_callputequal_duration = hasDurationForCallPutEqual(
-        contract_types_list,
-        duration_unit,
-        contract_start_type
-    );
-    const has_callputequal = hasCallPutEqual(contract_types_list);
-
-    const has_allow_equals =
-        isRiseFallEqual(contract_type) && (has_callputequal_duration || expiry_type === 'endtime') && has_callputequal;
-
-    const changeValue = e => {
-        e.persist();
-        const { name, checked } = e.target;
-        onChange({ target: { name, value: Number(checked) } });
-    };
-
-    return (
-        has_allow_equals && (
-            <div className='allow-equals'>
-                <Checkbox
-                    className='allow-equals__input-field'
-                    id='dt_allow_equals_input'
-                    onChange={changeValue}
-                    defaultChecked={!!value}
-                    name='is_equal'
-                    label={localize('Allow equals')}
-                    classNameLabel='allow-equals__label'
-                    disabled={has_equals_only}
-                />
-                <Popover
-                    alignment='left'
-                    classNameTarget='allow-equals__tooltip'
-                    icon='info'
-                    id='dt_allow_equals_info'
-                    message={localize('Win payout if exit spot is also equal to entry spot.')}
-                    margin={130}
-                    relative_render
-                />
-            </div>
-        )
-    );
-};
-
-AllowEquals.propTypes = {
-    contract_start_type: PropTypes.string,
-    contract_type: PropTypes.string,
-    contract_types_list: PropTypes.object,
-    duration_unit: PropTypes.string,
-    expiry_type: PropTypes.string,
-    has_equals_only: PropTypes.bool,
-    onChange: PropTypes.func,
-    value: PropTypes.number,
-};
-
-export default AllowEquals;
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/amount.jsx b/packages/reports/src/Stores/Modules/Trading/Components/amount.jsx
deleted file mode 100644
index 25a39eb2a386..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Components/amount.jsx
+++ /dev/null
@@ -1,220 +0,0 @@
-import classNames from 'classnames';
-import { PropTypes as MobxPropTypes } from 'mobx-react';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { ButtonToggle, Dropdown, InputField } from '@deriv/components';
-import { AMOUNT_MAX_LENGTH, getDecimalPlaces, addComma } from '@deriv/shared';
-import Fieldset from 'Components/Form/fieldset.jsx';
-import { connect } from 'Stores/connect';
-import { Localize, localize } from '@deriv/translations';
-import AllowEquals from './allow-equals.jsx';
-import MultipliersInfo from './info.jsx';
-import Multiplier from './multiplier.jsx';
-
-const Input = ({
-    amount,
-    currency,
-    current_focus,
-    error_messages,
-    is_nativepicker,
-    is_single_currency,
-    onChange,
-    setCurrentFocus,
-}) => (
-    <InputField
-        className='trade-container__amount'
-        classNameInlinePrefix='trade-container__currency'
-        classNameInput='trade-container__input'
-        currency={currency}
-        current_focus={current_focus}
-        error_messages={error_messages}
-        fractional_digits={getDecimalPlaces(currency)}
-        id='dt_amount_input'
-        inline_prefix={is_single_currency ? currency : null}
-        is_autocomplete_disabled
-        is_float
-        is_hj_whitelisted
-        is_incrementable
-        is_nativepicker={is_nativepicker}
-        is_negative_disabled
-        max_length={AMOUNT_MAX_LENGTH}
-        name='amount'
-        onChange={onChange}
-        type='tel'
-        value={amount}
-        ariaLabel={localize('Amount')}
-        setCurrentFocus={setCurrentFocus}
-    />
-);
-
-const Amount = ({
-    amount,
-    basis,
-    basis_list,
-    contract_start_type,
-    contract_type,
-    contract_types_list,
-    currencies_list,
-    currency,
-    current_focus,
-    duration_unit,
-    expiry_type,
-    is_equal,
-    is_minimized,
-    is_multiplier,
-    is_nativepicker,
-    is_single_currency,
-    has_equals_only,
-    onChange,
-    setCurrentFocus,
-    validation_errors,
-}) => {
-    if (is_minimized) {
-        return (
-            <div className='fieldset-minimized fieldset-minimized__amount'>
-                <span className='fieldset-minimized__basis'>
-                    {(basis_list.find(o => o.value === basis) || {}).text}
-                </span>
-                &nbsp;
-                <i>
-                    <span
-                        className={classNames('fieldset-minimized__currency', 'symbols', {
-                            [`symbols--${(currency || '').toLowerCase()}`]: currency,
-                        })}
-                    />
-                </i>
-                {addComma(amount, 2)}
-            </div>
-        );
-    }
-
-    const error_messages = validation_errors.amount;
-
-    const getBasisList = () => basis_list.map(item => ({ text: item.text, value: item.value }));
-
-    return (
-        <Fieldset
-            className='trade-container__fieldset center-text'
-            header={is_multiplier ? localize('Stake') : undefined}
-            header_tooltip={
-                is_multiplier ? (
-                    <Localize i18n_default_text='Your gross profit is the percentage change in market price times your stake and the multiplier chosen here.' />
-                ) : undefined
-            }
-        >
-            {basis_list.length > 1 && (
-                <ButtonToggle
-                    id='dt_amount_toggle'
-                    buttons_arr={getBasisList()}
-                    className='dropdown--no-margin'
-                    is_animated
-                    name='basis'
-                    onChange={onChange}
-                    value={basis}
-                />
-            )}
-            {!is_single_currency ? (
-                <div className='trade-container__currency-options'>
-                    <Input
-                        amount={amount}
-                        currency={currency}
-                        current_focus={current_focus}
-                        error_messages={error_messages}
-                        is_single_currency={is_single_currency}
-                        is_nativepicker={is_nativepicker}
-                        onChange={onChange}
-                        setCurrentFocus={setCurrentFocus}
-                    />
-                    <Dropdown
-                        id='amount'
-                        className={classNames({ 'dc-dropdown-container__currency': !is_single_currency })}
-                        is_alignment_left
-                        is_nativepicker={false}
-                        list={currencies_list}
-                        name='currency'
-                        initial_offset={256}
-                        no_border={true}
-                        value={currency}
-                        onChange={onChange}
-                    />
-                </div>
-            ) : (
-                <Input
-                    amount={amount}
-                    currency={currency}
-                    current_focus={current_focus}
-                    error_messages={error_messages}
-                    is_single_currency={is_single_currency}
-                    is_nativepicker={is_nativepicker}
-                    onChange={onChange}
-                    setCurrentFocus={setCurrentFocus}
-                />
-            )}
-            <AllowEquals
-                contract_start_type={contract_start_type}
-                contract_type={contract_type}
-                contract_types_list={contract_types_list}
-                duration_unit={duration_unit}
-                expiry_type={expiry_type}
-                onChange={onChange}
-                value={parseInt(is_equal)}
-                has_equals_only={has_equals_only}
-            />
-            {is_multiplier && (
-                <React.Fragment>
-                    <Multiplier />
-                    <MultipliersInfo
-                        className='trade-container__multipliers-trade-info'
-                        should_show_tooltip
-                        is_tooltip_relative
-                    />
-                </React.Fragment>
-            )}
-        </Fieldset>
-    );
-};
-
-Amount.propTypes = {
-    amount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    basis: PropTypes.string,
-    basis_list: MobxPropTypes.arrayOrObservableArray,
-    contract_start_type: PropTypes.string,
-    contract_type: PropTypes.string,
-    contract_types_list: MobxPropTypes.observableObject,
-    currencies_list: MobxPropTypes.observableObject,
-    currency: PropTypes.string,
-    current_focus: PropTypes.string,
-    duration_unit: PropTypes.string,
-    expiry_type: PropTypes.string,
-    is_equal: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    is_minimized: PropTypes.bool,
-    is_multiplier: PropTypes.bool,
-    is_nativepicker: PropTypes.bool,
-    is_single_currency: PropTypes.bool,
-    has_equals_only: PropTypes.bool,
-    setCurrentFocus: PropTypes.func,
-    onChange: PropTypes.func,
-    validation_errors: PropTypes.object,
-};
-
-export default connect(({ modules, client, ui }) => ({
-    amount: modules.trade.amount,
-    basis: modules.trade.basis,
-    basis_list: modules.trade.basis_list,
-    contract_start_type: modules.trade.contract_start_type,
-    contract_type: modules.trade.contract_type,
-    contract_types_list: modules.trade.contract_types_list,
-    currencies_list: client.currencies_list,
-    currency: modules.trade.currency,
-    current_focus: ui.current_focus,
-    duration_unit: modules.trade.duration_unit,
-    expiry_type: modules.trade.expiry_type,
-    is_equal: modules.trade.is_equal,
-    is_single_currency: client.is_single_currency,
-    is_multiplier: modules.trade.is_multiplier,
-    has_equals_only: modules.trade.has_equals_only,
-    stop_out: modules.trade.stop_out,
-    onChange: modules.trade.onChange,
-    setCurrentFocus: ui.setCurrentFocus,
-    validation_errors: modules.trade.validation_errors,
-}))(Amount);
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/barrier.jsx b/packages/reports/src/Stores/Modules/Trading/Components/barrier.jsx
deleted file mode 100644
index 85492e3f7e15..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Components/barrier.jsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { DesktopWrapper, Icon, InputField, MobileWrapper } from '@deriv/components';
-import Fieldset from '../../../../Components/Form/fieldset.jsx';
-import { connect } from '../../../connect';
-import { localize } from '@deriv/translations';
-
-const Barrier = ({
-    barrier_1,
-    barrier_2,
-    barrier_count,
-    barrier_pipsize,
-    current_focus,
-    duration_unit,
-    is_minimized,
-    is_absolute_only,
-    onChange,
-    setCurrentFocus,
-    validation_errors,
-}) => {
-    const barrier_title = barrier_count === 1 ? localize('Barrier') : localize('Barriers');
-
-    if (is_minimized) {
-        return barrier_count !== 2 ? (
-            <div className='fieldset-minimized fieldset-minimized__barrier1'>{barrier_1}</div>
-        ) : (
-            <React.Fragment>
-                <div className='fieldset-minimized fieldset-minimized__barrier1'>{barrier_1}</div>
-                <div className='fieldset-minimized fieldset-minimized__barrier2'>{barrier_2}</div>
-            </React.Fragment>
-        );
-    }
-
-    const input_class = barrier_count === 2 ? 'multiple' : 'single';
-    const is_day_duration = duration_unit === 'd';
-    // TODO: Some contracts yet to be implemented in app.deriv.com allow only absolute barrier, hence the prop
-    const is_absolute_barrier = is_day_duration || is_absolute_only;
-
-    const format = value => {
-        const float_value = parseFloat(value);
-        let final_value;
-        if (Math.sign(float_value) === -1) {
-            final_value = float_value.toFixed(barrier_pipsize).toString();
-        } else {
-            final_value = `+${float_value.toFixed(barrier_pipsize)}`;
-        }
-        return final_value;
-    };
-
-    return (
-        <React.Fragment>
-            <DesktopWrapper>
-                <Fieldset
-                    className='trade-container__fieldset trade-container__barriers'
-                    header={barrier_title}
-                    is_center
-                >
-                    <div>
-                        <InputField
-                            id='dt_barrier_1_input'
-                            type='number'
-                            name='barrier_1'
-                            value={barrier_1}
-                            className={`trade-container__barriers-${input_class}`}
-                            classNameInput={classNames(
-                                'trade-container__input',
-                                'trade-container__barriers-input',
-                                `trade-container__barriers-${input_class}-input`
-                            )}
-                            current_focus={current_focus}
-                            onChange={onChange}
-                            error_messages={validation_errors.barrier_1 || []}
-                            is_float
-                            is_signed
-                            setCurrentFocus={setCurrentFocus}
-                        />
-
-                        {barrier_count === 2 && (
-                            <React.Fragment>
-                                <InputField
-                                    id='dt_barrier_2_input'
-                                    type='number'
-                                    name='barrier_2'
-                                    value={barrier_2}
-                                    className='multiple'
-                                    classNameInput='trade-container__input'
-                                    current_focus={current_focus}
-                                    onChange={onChange}
-                                    error_messages={validation_errors.barrier_2}
-                                    is_float
-                                    is_signed
-                                    setCurrentFocus={setCurrentFocus}
-                                />
-                                <Icon icon='IcArrowUp' className='trade-container__barriers--up' />
-                                <Icon icon='IcArrowDown' className='trade-container__barriers--down' />
-                            </React.Fragment>
-                        )}
-                    </div>
-                </Fieldset>
-            </DesktopWrapper>
-            <MobileWrapper>
-                <div className='barrier__widget'>
-                    <Fieldset className='barrier__fields'>
-                        <InputField
-                            id='dt_barrier_1_input'
-                            type='number'
-                            name='barrier_1'
-                            value={barrier_1}
-                            is_incrementable={!is_absolute_barrier}
-                            is_incrementable_on_long_press={!is_absolute_barrier}
-                            is_negative_disabled={is_absolute_barrier}
-                            className={`barrier__fields-${input_class}`}
-                            classNameInput={classNames(
-                                'barrier__fields-input',
-                                'barrier__fields-barriers-input',
-                                `barrier__fields-barriers-${input_class}-input`,
-                                {
-                                    'barrier__fields-input--is-offset': !is_absolute_barrier,
-                                }
-                            )}
-                            current_focus={current_focus}
-                            format={format}
-                            onChange={onChange}
-                            is_float
-                            is_signed
-                            setCurrentFocus={setCurrentFocus}
-                        />
-                    </Fieldset>
-                    <h2 className='barrier__widget-title'>
-                        {barrier_count === 2 ? localize('Barrier 1') : localize('Barrier')}
-                    </h2>
-                </div>
-                {barrier_count === 2 && (
-                    <div className='barrier__widget'>
-                        <Fieldset className='barrier__fields'>
-                            <InputField
-                                id='dt_barrier_2_input'
-                                type='number'
-                                name='barrier_2'
-                                value={barrier_2}
-                                is_incrementable={!is_absolute_barrier}
-                                is_incrementable_on_long_press={!is_absolute_barrier}
-                                is_negative_disabled={is_absolute_barrier}
-                                className={`barrier__fields-${input_class}`}
-                                classNameInput={classNames(
-                                    'barrier__fields-input',
-                                    'barrier__fields-barriers-input',
-                                    `barrier__fields-barriers-${input_class}-input`,
-                                    {
-                                        'barrier__fields-input--is-offset': !is_absolute_barrier,
-                                    }
-                                )}
-                                current_focus={current_focus}
-                                format={format}
-                                onChange={onChange}
-                                is_float
-                                is_signed
-                                setCurrentFocus={setCurrentFocus}
-                            />
-                        </Fieldset>
-                        <h2 className='barrier__widget-title'>{localize('Barrier 2')}</h2>
-                    </div>
-                )}
-            </MobileWrapper>
-        </React.Fragment>
-    );
-};
-
-Barrier.propTypes = {
-    barrier_1: PropTypes.string,
-    barrier_2: PropTypes.string,
-    barrier_count: PropTypes.number,
-    barrier_pipsize: PropTypes.number,
-    current_focus: PropTypes.string,
-    duration_unit: PropTypes.string,
-    is_absolute_only: PropTypes.bool,
-    is_minimized: PropTypes.bool,
-    onChange: PropTypes.func,
-    setCurrentFocus: PropTypes.func,
-    validation_errors: PropTypes.object,
-};
-
-export default connect(({ modules, ui }) => ({
-    barrier_1: modules.trade.barrier_1,
-    barrier_2: modules.trade.barrier_2,
-    barrier_pipsize: modules.trade.barrier_pipsize,
-    barrier_count: modules.trade.barrier_count,
-    current_focus: ui.current_focus,
-    duration_unit: modules.trade.duration_unit,
-    onChange: modules.trade.onChange,
-    setCurrentFocus: ui.setCurrentFocus,
-    validation_errors: modules.trade.validation_errors,
-}))(Barrier);
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/last-digit.jsx b/packages/reports/src/Stores/Modules/Trading/Components/last-digit.jsx
deleted file mode 100644
index caa5f251a8c7..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Components/last-digit.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { isDesktop } from '@deriv/shared';
-import { localize } from '@deriv/translations';
-import NumberSelector from 'Components/Form/number-selector.jsx';
-import Fieldset from 'Components/Form/fieldset.jsx';
-import { connect } from 'Stores/connect';
-
-const LastDigit = ({ is_minimized, last_digit, onChange }) => {
-    if (is_minimized) {
-        return <div className='fieldset-minimized'>{`${localize('Last Digit')}: ${last_digit}`}</div>;
-    }
-    const arr_five = [...Array(5).keys()];
-    return (
-        <Fieldset
-            className='trade-container__fieldset'
-            header={isDesktop() ? localize('Last Digit Prediction') : null}
-            is_center
-        >
-            <NumberSelector
-                arr_arr_numbers={[arr_five, arr_five.map(i => i + 5)]}
-                name='last_digit'
-                onChange={onChange}
-                selected_number={+last_digit}
-            />
-        </Fieldset>
-    );
-};
-
-LastDigit.propTypes = {
-    is_minimized: PropTypes.bool,
-    last_digit: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    onChange: PropTypes.func,
-};
-
-export default connect(({ modules }) => ({
-    last_digit: modules.trade.last_digit,
-    onChange: modules.trade.onChange,
-}))(LastDigit);
diff --git a/packages/reports/src/Stores/Modules/Trading/Constants/ui.js b/packages/reports/src/Stores/Modules/Trading/Constants/ui.js
deleted file mode 100644
index 39a016ae48e7..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Constants/ui.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Amount from '../Components/amount.jsx';
-import Barrier from '../Components/barrier.jsx';
-import Duration from '../Components/Duration';
-import LastDigit from '../Components/last-digit.jsx';
-
-export const form_components = [
-    { name: 'duration', Component: Duration },
-    { name: 'barrier', Component: Barrier },
-    { name: 'last_digit', Component: LastDigit },
-    { name: 'amount', Component: Amount },
-];

From cbd8cc554c526c8e69644faa3707aaca58bd2a0d Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Sun, 22 May 2022 14:19:51 +0430
Subject: [PATCH 23/64] change BinaryLink to NavLink

---
 .../Elements/TogglePositions/toggle-positions-mobile.jsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx b/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx
index 84904f7a3fbf..37f1662cc187 100644
--- a/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx
+++ b/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx
@@ -3,7 +3,7 @@ import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { Icon, Div100vhContainer, Modal, Text } from '@deriv/components';
 import { routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import { BinaryLink } from 'App/Components/Routes';
+import { NavLink } from 'react-router-dom';
 import EmptyPortfolioMessage from '../EmptyPortfolioMessage';
 import PositionsModalCard from 'App/Components/Elements/PositionsDrawer/positions-modal-card.jsx';
 import { filterByContractType } from 'App/Components/Elements/PositionsDrawer/helpers';
@@ -111,13 +111,13 @@ const TogglePositionsMobile = ({
                         {is_empty || error ? <EmptyPortfolioMessage error={error} /> : body_content}
                     </div>
                     <div className='positions-modal__footer'>
-                        <BinaryLink
+                        <NavLink
                             onClick={closeModal}
                             className='dc-btn dc-btn--secondary dc-btn__large positions-modal__footer-btn'
-                            // to={routes.positions}
+                            to={routes.positions}
                         >
                             <span className='dc-btn__text'>{localize('Go to Reports')}</span>
-                        </BinaryLink>
+                        </NavLink>
                     </div>
                 </Div100vhContainer>
             </Modal>

From 43ad0c2ed8874dcb536fa48a0696f70687aec00e Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Sun, 22 May 2022 14:23:30 +0430
Subject: [PATCH 24/64] rerun tests


From bb145ccf00eee85c0831f8db96924e955cb050d7 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Sun, 22 May 2022 15:09:48 +0430
Subject: [PATCH 25/64] fix circular dependency

---
 packages/reports/build/webpack.config.js      |   3 +-
 packages/reports/package.json                 |   1 -
 .../Elements/PositionsDrawerCard/index.js     |   1 +
 .../positions-drawer-card.jsx                 | 230 ++++++++++++++++++
 .../reports/src/Containers/open-positions.jsx |   2 +-
 packages/trader/build/webpack.config.js       |   1 -
 .../PositionsDrawer/positions-drawer.jsx      |   2 +-
 7 files changed, 234 insertions(+), 6 deletions(-)
 create mode 100644 packages/reports/src/Components/Elements/PositionsDrawerCard/index.js
 create mode 100644 packages/reports/src/Components/Elements/PositionsDrawerCard/positions-drawer-card.jsx

diff --git a/packages/reports/build/webpack.config.js b/packages/reports/build/webpack.config.js
index d7f47ac38b5c..2f69814b2796 100644
--- a/packages/reports/build/webpack.config.js
+++ b/packages/reports/build/webpack.config.js
@@ -9,6 +9,7 @@ module.exports = function (env) {
         devtool: IS_RELEASE ? undefined : 'eval-cheap-module-source-map',
         entry: {
             reports: path.resolve(__dirname, '../src', 'index.jsx'),
+            'positions-drawer-card': 'Components/Elements/PositionsDrawerCard',
         },
         mode: IS_RELEASE ? 'production' : 'development',
         module: {
@@ -45,13 +46,11 @@ module.exports = function (env) {
                 '@deriv/components': '@deriv/components',
                 '@deriv/translations': '@deriv/translations',
                 '@deriv/deriv-charts': '@deriv/deriv-charts',
-                '@deriv/trader': '@deriv/trader',
             },
             /^@deriv\/shared\/.+$/,
             /^@deriv\/components\/.+$/,
             /^@deriv\/translations\/.+$/,
             /^@deriv\/account\/.+$/,
-            /^@deriv\/trader\/.+$/,
         ],
         target: 'web',
         plugins: plugins(base, false),
diff --git a/packages/reports/package.json b/packages/reports/package.json
index ef33ca51863f..fa59399f59ea 100644
--- a/packages/reports/package.json
+++ b/packages/reports/package.json
@@ -86,7 +86,6 @@
       "@deriv/api-types": "1.0.48",
       "@deriv/components": "^1.0.0",
       "@deriv/deriv-api": "^1.0.8",
-      "@deriv/trader": "^3.8.0",
       "@deriv/shared": "^1.0.0",
       "@deriv/translations": "^1.0.0",
       "@types/classnames": "^2.2.11",
diff --git a/packages/reports/src/Components/Elements/PositionsDrawerCard/index.js b/packages/reports/src/Components/Elements/PositionsDrawerCard/index.js
new file mode 100644
index 000000000000..0097ff7902b7
--- /dev/null
+++ b/packages/reports/src/Components/Elements/PositionsDrawerCard/index.js
@@ -0,0 +1 @@
+export default from './positions-drawer-card.jsx';
diff --git a/packages/reports/src/Components/Elements/PositionsDrawerCard/positions-drawer-card.jsx b/packages/reports/src/Components/Elements/PositionsDrawerCard/positions-drawer-card.jsx
new file mode 100644
index 000000000000..0c0ae0a4e17d
--- /dev/null
+++ b/packages/reports/src/Components/Elements/PositionsDrawerCard/positions-drawer-card.jsx
@@ -0,0 +1,230 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { ContractCard } from '@deriv/components';
+import { getContractPath, isCryptoContract, isMultiplierContract } from '@deriv/shared';
+import { getCardLabels, getContractTypeDisplay } from '_common/contract';
+import { connectWithContractUpdate } from 'Stores/Modules/Contract/Helpers/multiplier';
+import { getEndTime } from 'Stores/Modules/Contract/Helpers/logic';
+
+const PositionsDrawerCard = ({
+    addToast,
+    className,
+    display_name,
+    contract_info,
+    contract_update,
+    currency,
+    current_focus,
+    getContractById,
+    is_mobile,
+    is_sell_requested,
+    is_unsupported,
+    is_link_disabled,
+    profit_loss,
+    onClickCancel,
+    onClickSell,
+    onClickRemove,
+    onFooterEntered,
+    onMouseEnter,
+    onMouseLeave,
+    removeToast,
+    result,
+    setCurrentFocus,
+    server_time,
+    should_show_transition,
+    should_show_cancellation_warning,
+    status,
+    toggleCancellationWarning,
+    toggleUnsupportedContractModal,
+}) => {
+    const is_multiplier = isMultiplierContract(contract_info.contract_type);
+    const is_crypto = isCryptoContract(contract_info.underlying);
+    const has_progress_slider = !is_multiplier || (is_crypto && is_multiplier);
+    const has_ended = !!getEndTime(contract_info);
+
+    const loader_el = (
+        <div className='dc-contract-card__content-loader'>
+            <ContractCard.Loader speed={2} />
+        </div>
+    );
+
+    const card_header = (
+        <ContractCard.Header
+            contract_info={contract_info}
+            display_name={display_name}
+            getCardLabels={getCardLabels}
+            getContractTypeDisplay={getContractTypeDisplay}
+            has_progress_slider={!is_mobile && has_progress_slider}
+            is_mobile={is_mobile}
+            is_positions={true}
+            is_sell_requested={is_sell_requested}
+            onClickSell={onClickSell}
+            server_time={server_time}
+        />
+    );
+
+    const card_body = (
+        <ContractCard.Body
+            addToast={addToast}
+            connectWithContractUpdate={connectWithContractUpdate}
+            contract_info={contract_info}
+            contract_update={contract_update}
+            currency={currency}
+            current_focus={current_focus}
+            getCardLabels={getCardLabels}
+            getContractById={getContractById}
+            onMouseLeave={() => {
+                if (typeof onMouseLeave === 'function') onMouseLeave();
+            }}
+            is_mobile={is_mobile}
+            is_multiplier={is_multiplier}
+            is_sold={has_ended}
+            has_progress_slider={is_mobile && has_progress_slider}
+            removeToast={removeToast}
+            server_time={server_time}
+            setCurrentFocus={setCurrentFocus}
+            should_show_cancellation_warning={should_show_cancellation_warning}
+            status={status}
+            toggleCancellationWarning={toggleCancellationWarning}
+        />
+    );
+
+    const card_footer = (
+        <ContractCard.Footer
+            contract_info={contract_info}
+            getCardLabels={getCardLabels}
+            is_multiplier={is_multiplier}
+            is_positions={true}
+            is_sell_requested={is_sell_requested}
+            onClickCancel={onClickCancel}
+            onClickSell={onClickSell}
+            onFooterEntered={onFooterEntered}
+            server_time={server_time}
+            should_show_transition={should_show_transition}
+        />
+    );
+
+    const contract_el = (
+        <React.Fragment>
+            {card_header}
+            {card_body}
+        </React.Fragment>
+    );
+
+    const supported_contract_card = (
+        <div
+            className={classNames('dc-contract-card', {
+                'dc-contract-card--green': !is_multiplier && profit_loss > 0 && !result,
+                'dc-contract-card--red': !is_multiplier && profit_loss < 0 && !result,
+            })}
+            onClick={() => toggleUnsupportedContractModal(true)}
+        >
+            {contract_info.underlying ? contract_el : loader_el}
+        </div>
+    );
+
+    const unsupported_contract_card = is_link_disabled ? (
+        <div
+            className={classNames('dc-contract-card', {
+                'dc-contract-card--green': !is_multiplier && profit_loss > 0 && !result,
+                'dc-contract-card--red': !is_multiplier && profit_loss < 0 && !result,
+            })}
+        >
+            {contract_info.underlying ? contract_el : loader_el}
+        </div>
+    ) : (
+        <NavLink
+            className={classNames('dc-contract-card', {
+                'dc-contract-card--green': !is_multiplier && profit_loss > 0 && !result,
+                'dc-contract-card--red': !is_multiplier && profit_loss < 0 && !result,
+            })}
+            to={{
+                pathname: `/contract/${contract_info.contract_id}`,
+            }}
+        >
+            {contract_info.underlying ? contract_el : loader_el}
+        </NavLink>
+    );
+
+    return (
+        <ContractCard
+            contract_info={contract_info}
+            getCardLabels={getCardLabels}
+            getContractPath={getContractPath}
+            is_multiplier={is_multiplier}
+            is_positions={true}
+            is_unsupported={is_unsupported}
+            onClickRemove={onClickRemove}
+            profit_loss={profit_loss}
+            result={result}
+            should_show_result_overlay={true}
+            toggleUnsupportedContractModal={toggleUnsupportedContractModal}
+        >
+            <div
+                id={`dc_contract_card_${contract_info.contract_id}`}
+                className={className}
+                onMouseEnter={() => {
+                    if (typeof onMouseEnter === 'function') onMouseEnter();
+                }}
+                onMouseLeave={() => {
+                    if (typeof onMouseLeave === 'function') onMouseLeave();
+                }}
+                onClick={() => {
+                    if (typeof onMouseLeave === 'function') onMouseLeave();
+                }}
+            >
+                {is_unsupported ? supported_contract_card : unsupported_contract_card}
+                {card_footer}
+            </div>
+        </ContractCard>
+    );
+};
+
+PositionsDrawerCard.propTypes = {
+    addToast: PropTypes.func,
+    className: PropTypes.string,
+    contract_info: PropTypes.object,
+    currency: PropTypes.string,
+    current_focus: PropTypes.string,
+    current_tick: PropTypes.number,
+    duration: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    duration_unit: PropTypes.string,
+    exit_spot: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    id: PropTypes.number,
+    indicative: PropTypes.number,
+    is_loading: PropTypes.bool,
+    is_mobile: PropTypes.bool,
+    is_sell_requested: PropTypes.bool,
+    is_unsupported: PropTypes.bool,
+    is_valid_to_sell: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
+    onClickRemove: PropTypes.func,
+    onClickSell: PropTypes.func,
+    onClickCancel: PropTypes.func,
+    profit_loss: PropTypes.number,
+    result: PropTypes.string,
+    sell_time: PropTypes.number,
+    setCurrentFocus: PropTypes.func,
+    status: PropTypes.string,
+    toggleUnsupportedContractModal: PropTypes.func,
+    type: PropTypes.string,
+};
+
+// export default connect(({ modules, ui, client, common }) => ({
+//     currency: client.currency,
+//     server_time: common.server_time,
+//     addToast: ui.addToast,
+//     current_focus: ui.current_focus,
+//     onClickCancel: modules.portfolio.onClickCancel,
+//     onClickSell: modules.portfolio.onClickSell,
+//     onClickRemove: modules.portfolio.removePositionById,
+//     getContractById: modules.contract_trade.getContractById,
+//     is_mobile: ui.is_mobile,
+//     removeToast: ui.removeToast,
+//     setCurrentFocus: ui.setCurrentFocus,
+//     should_show_cancellation_warning: ui.should_show_cancellation_warning,
+//     toggleCancellationWarning: ui.toggleCancellationWarning,
+//     toggleUnsupportedContractModal: ui.toggleUnsupportedContractModal,
+// }))(PositionsDrawerCard);
+
+export default PositionsDrawerCard;
diff --git a/packages/reports/src/Containers/open-positions.jsx b/packages/reports/src/Containers/open-positions.jsx
index 5207aa14a457..80c9a0c08d10 100644
--- a/packages/reports/src/Containers/open-positions.jsx
+++ b/packages/reports/src/Containers/open-positions.jsx
@@ -30,7 +30,7 @@ import {
     getOpenPositionsColumnsTemplate,
     getMultiplierOpenPositionsColumnsTemplate,
 } from 'Constants/data-table-constants';
-import PositionsDrawerCard from '@deriv/trader/dist/trader/js/positions-drawer-card';
+import PositionsDrawerCard from '../Components/Elements/PositionsDrawerCard';
 import PlaceholderComponent from '../Components/placeholder-component.jsx';
 import { getCardLabels } from '_common/contract';
 import { connect } from 'Stores/connect';
diff --git a/packages/trader/build/webpack.config.js b/packages/trader/build/webpack.config.js
index 1b84173e4dcf..35829b550a53 100644
--- a/packages/trader/build/webpack.config.js
+++ b/packages/trader/build/webpack.config.js
@@ -9,7 +9,6 @@ module.exports = function (env) {
         devtool: IS_RELEASE ? undefined : 'eval-cheap-module-source-map',
         entry: {
             trader: path.resolve(__dirname, '../src', 'index.tsx'),
-            'positions-drawer-card': 'App/Components/Elements/PositionsDrawer/PositionsDrawerCard',
         },
         mode: IS_RELEASE ? 'production' : 'development',
         module: {
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
index dfe2af6ec3d3..8a225cdbffef 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
@@ -9,7 +9,7 @@ import { routes, useNewRowTransition } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import EmptyPortfolioMessage from '../EmptyPortfolioMessage';
 import { connect } from 'Stores/connect';
-import PositionsDrawerCard from './PositionsDrawerCard';
+import PositionsDrawerCard from '@deriv/reports/dist/reports/js/positions-drawer-card';
 import { filterByContractType } from './helpers';
 
 const PositionsDrawerCardItem = ({ row: portfolio_position, measure, onHoverPosition, is_new_row, ...props }) => {

From 9fe32488ccb6889cc16223312dee3386a94d4569 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Sun, 22 May 2022 15:28:47 +0430
Subject: [PATCH 26/64] fix  EHOIST_PKG_VERSION error

---
 packages/reports/package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/reports/package.json b/packages/reports/package.json
index fa59399f59ea..2e306248e1a6 100644
--- a/packages/reports/package.json
+++ b/packages/reports/package.json
@@ -89,8 +89,8 @@
       "@deriv/shared": "^1.0.0",
       "@deriv/translations": "^1.0.0",
       "@types/classnames": "^2.2.11",
-      "@types/react": "^16.14.21",
-      "@types/react-dom": "^16.9.14",
+      "@types/react": "^18.0.7",
+      "@types/react-dom": "^18.0.0",
       "@types/react-loadable": "^5.5.6",
       "acorn": "^6.1.1",
       "babel-polyfill": "^6.26.0",
@@ -121,7 +121,7 @@
       "react-router": "^5.2.0",
       "react-router-dom": "^5.2.0",
       "react-transition-group": "^4.3.0",
-      "typescript": "^4.5.4",
+      "typescript": "^4.6.3",
       "workbox-webpack-plugin": "^6.0.2"
     }
   }
\ No newline at end of file

From c0f172620437dae955e48ceb6bfbe89514f406f3 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Sun, 22 May 2022 15:40:28 +0430
Subject: [PATCH 27/64] fix test

---
 .../reports/src/Components/Routes/helpers.js   |  1 -
 .../src/Components/empty-portfolio-message.jsx |  4 +++-
 .../positions-drawer-card.jsx                  | 18 ------------------
 .../PositionsDrawer/positions-drawer.jsx       |  1 -
 .../src/Utils/Helpers/market-underlying.js     |  1 -
 5 files changed, 3 insertions(+), 22 deletions(-)

diff --git a/packages/reports/src/Components/Routes/helpers.js b/packages/reports/src/Components/Routes/helpers.js
index dd61f156b970..6a16bfb56965 100644
--- a/packages/reports/src/Components/Routes/helpers.js
+++ b/packages/reports/src/Components/Routes/helpers.js
@@ -1,5 +1,4 @@
 import { matchPath } from 'react-router';
-import { routes } from '@deriv/shared';
 
 export const normalizePath = path => (/^\//.test(path) ? path : `/${path || ''}`); // Default to '/'
 
diff --git a/packages/reports/src/Components/empty-portfolio-message.jsx b/packages/reports/src/Components/empty-portfolio-message.jsx
index 461a098159d2..5f26070b2c88 100644
--- a/packages/reports/src/Components/empty-portfolio-message.jsx
+++ b/packages/reports/src/Components/empty-portfolio-message.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Icon, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 
-export const EmptyPortfolioMessage = ({ error }) => (
+const EmptyPortfolioMessage = ({ error }) => (
     <div className='portfolio-empty'>
         <div className='portfolio-empty__wrapper'>
             {error ? (
@@ -22,3 +22,5 @@ export const EmptyPortfolioMessage = ({ error }) => (
         </div>
     </div>
 );
+
+export default EmptyPortfolioMessage;
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx
index 18ab4bb042f6..c3999bd853f9 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx
@@ -5,7 +5,6 @@ import { NavLink } from 'react-router-dom';
 import { ContractCard } from '@deriv/components';
 import { getContractPath, isCryptoContract, isMultiplierContract } from '@deriv/shared';
 import { getCardLabels, getContractTypeDisplay } from 'Constants/contract';
-import { connect } from 'Stores/connect';
 import { connectWithContractUpdate } from 'Stores/Modules/Contract/Helpers/multiplier';
 import { getEndTime } from 'Stores/Modules/Contract/Helpers/logic';
 
@@ -211,21 +210,4 @@ PositionsDrawerCard.propTypes = {
     type: PropTypes.string,
 };
 
-// export default connect(({ modules, ui, client, common }) => ({
-//     currency: client.currency,
-//     server_time: common.server_time,
-//     addToast: ui.addToast,
-//     current_focus: ui.current_focus,
-//     onClickCancel: modules.portfolio.onClickCancel,
-//     onClickSell: modules.portfolio.onClickSell,
-//     onClickRemove: modules.portfolio.removePositionById,
-//     getContractById: modules.contract_trade.getContractById,
-//     is_mobile: ui.is_mobile,
-//     removeToast: ui.removeToast,
-//     setCurrentFocus: ui.setCurrentFocus,
-//     should_show_cancellation_warning: ui.should_show_cancellation_warning,
-//     toggleCancellationWarning: ui.toggleCancellationWarning,
-//     toggleUnsupportedContractModal: ui.toggleUnsupportedContractModal,
-// }))(PositionsDrawerCard);
-
 export default PositionsDrawerCard;
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
index 8a225cdbffef..c4d518373d54 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
@@ -180,7 +180,6 @@ export default connect(({ modules, ui, client, common }) => ({
     onClickSell: modules.portfolio.onClickSell,
     onClickRemove: modules.portfolio.removePositionById,
     getContractById: modules.contract_trade.getContractById,
-    is_mobile: ui.is_mobile,
     removeToast: ui.removeToast,
     setCurrentFocus: ui.setCurrentFocus,
     should_show_cancellation_warning: ui.should_show_cancellation_warning,
diff --git a/packages/trader/src/Utils/Helpers/market-underlying.js b/packages/trader/src/Utils/Helpers/market-underlying.js
index 90f5633c545a..7885f6fd09e7 100644
--- a/packages/trader/src/Utils/Helpers/market-underlying.js
+++ b/packages/trader/src/Utils/Helpers/market-underlying.js
@@ -1,5 +1,4 @@
 import { getMarketNamesMap, getContractConfig } from 'Constants/contract';
-import { localize } from '@deriv/translations';
 
 /**
  * Fetch market information from shortcode

From 9b23ed611a4cf74d3b34ae7474866b3084a2032e Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Sun, 22 May 2022 16:51:53 +0430
Subject: [PATCH 28/64] remove position-drawer-card from trader

---
 .../PositionsDrawerCard/index.js              |   1 -
 .../positions-drawer-card.jsx                 | 213 ------------------
 2 files changed, 214 deletions(-)
 delete mode 100644 packages/trader/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/index.js
 delete mode 100644 packages/trader/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx

diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/index.js b/packages/trader/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/index.js
deleted file mode 100644
index 0097ff7902b7..000000000000
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default from './positions-drawer-card.jsx';
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx
deleted file mode 100644
index c3999bd853f9..000000000000
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx
+++ /dev/null
@@ -1,213 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { NavLink } from 'react-router-dom';
-import { ContractCard } from '@deriv/components';
-import { getContractPath, isCryptoContract, isMultiplierContract } from '@deriv/shared';
-import { getCardLabels, getContractTypeDisplay } from 'Constants/contract';
-import { connectWithContractUpdate } from 'Stores/Modules/Contract/Helpers/multiplier';
-import { getEndTime } from 'Stores/Modules/Contract/Helpers/logic';
-
-const PositionsDrawerCard = ({
-    addToast,
-    className,
-    display_name,
-    contract_info,
-    contract_update,
-    currency,
-    current_focus,
-    getContractById,
-    is_mobile,
-    is_sell_requested,
-    is_unsupported,
-    is_link_disabled,
-    profit_loss,
-    onClickCancel,
-    onClickSell,
-    onClickRemove,
-    onFooterEntered,
-    onMouseEnter,
-    onMouseLeave,
-    removeToast,
-    result,
-    setCurrentFocus,
-    server_time,
-    should_show_transition,
-    should_show_cancellation_warning,
-    status,
-    toggleCancellationWarning,
-    toggleUnsupportedContractModal,
-}) => {
-    const is_multiplier = isMultiplierContract(contract_info.contract_type);
-    const is_crypto = isCryptoContract(contract_info.underlying);
-    const has_progress_slider = !is_multiplier || (is_crypto && is_multiplier);
-    const has_ended = !!getEndTime(contract_info);
-
-    const loader_el = (
-        <div className='dc-contract-card__content-loader'>
-            <ContractCard.Loader speed={2} />
-        </div>
-    );
-
-    const card_header = (
-        <ContractCard.Header
-            contract_info={contract_info}
-            display_name={display_name}
-            getCardLabels={getCardLabels}
-            getContractTypeDisplay={getContractTypeDisplay}
-            has_progress_slider={!is_mobile && has_progress_slider}
-            is_mobile={is_mobile}
-            is_positions={true}
-            is_sell_requested={is_sell_requested}
-            onClickSell={onClickSell}
-            server_time={server_time}
-        />
-    );
-
-    const card_body = (
-        <ContractCard.Body
-            addToast={addToast}
-            connectWithContractUpdate={connectWithContractUpdate}
-            contract_info={contract_info}
-            contract_update={contract_update}
-            currency={currency}
-            current_focus={current_focus}
-            getCardLabels={getCardLabels}
-            getContractById={getContractById}
-            onMouseLeave={() => {
-                if (typeof onMouseLeave === 'function') onMouseLeave();
-            }}
-            is_mobile={is_mobile}
-            is_multiplier={is_multiplier}
-            is_sold={has_ended}
-            has_progress_slider={is_mobile && has_progress_slider}
-            removeToast={removeToast}
-            server_time={server_time}
-            setCurrentFocus={setCurrentFocus}
-            should_show_cancellation_warning={should_show_cancellation_warning}
-            status={status}
-            toggleCancellationWarning={toggleCancellationWarning}
-        />
-    );
-
-    const card_footer = (
-        <ContractCard.Footer
-            contract_info={contract_info}
-            getCardLabels={getCardLabels}
-            is_multiplier={is_multiplier}
-            is_positions={true}
-            is_sell_requested={is_sell_requested}
-            onClickCancel={onClickCancel}
-            onClickSell={onClickSell}
-            onFooterEntered={onFooterEntered}
-            server_time={server_time}
-            should_show_transition={should_show_transition}
-        />
-    );
-
-    const contract_el = (
-        <React.Fragment>
-            {card_header}
-            {card_body}
-        </React.Fragment>
-    );
-
-    const supported_contract_card = (
-        <div
-            className={classNames('dc-contract-card', {
-                'dc-contract-card--green': !is_multiplier && profit_loss > 0 && !result,
-                'dc-contract-card--red': !is_multiplier && profit_loss < 0 && !result,
-            })}
-            onClick={() => toggleUnsupportedContractModal(true)}
-        >
-            {contract_info.underlying ? contract_el : loader_el}
-        </div>
-    );
-
-    const unsupported_contract_card = is_link_disabled ? (
-        <div
-            className={classNames('dc-contract-card', {
-                'dc-contract-card--green': !is_multiplier && profit_loss > 0 && !result,
-                'dc-contract-card--red': !is_multiplier && profit_loss < 0 && !result,
-            })}
-        >
-            {contract_info.underlying ? contract_el : loader_el}
-        </div>
-    ) : (
-        <NavLink
-            className={classNames('dc-contract-card', {
-                'dc-contract-card--green': !is_multiplier && profit_loss > 0 && !result,
-                'dc-contract-card--red': !is_multiplier && profit_loss < 0 && !result,
-            })}
-            to={{
-                pathname: `/contract/${contract_info.contract_id}`,
-            }}
-        >
-            {contract_info.underlying ? contract_el : loader_el}
-        </NavLink>
-    );
-
-    return (
-        <ContractCard
-            contract_info={contract_info}
-            getCardLabels={getCardLabels}
-            getContractPath={getContractPath}
-            is_multiplier={is_multiplier}
-            is_positions={true}
-            is_unsupported={is_unsupported}
-            onClickRemove={onClickRemove}
-            profit_loss={profit_loss}
-            result={result}
-            should_show_result_overlay={true}
-            toggleUnsupportedContractModal={toggleUnsupportedContractModal}
-        >
-            <div
-                id={`dc_contract_card_${contract_info.contract_id}`}
-                className={className}
-                onMouseEnter={() => {
-                    if (typeof onMouseEnter === 'function') onMouseEnter();
-                }}
-                onMouseLeave={() => {
-                    if (typeof onMouseLeave === 'function') onMouseLeave();
-                }}
-                onClick={() => {
-                    if (typeof onMouseLeave === 'function') onMouseLeave();
-                }}
-            >
-                {is_unsupported ? supported_contract_card : unsupported_contract_card}
-                {card_footer}
-            </div>
-        </ContractCard>
-    );
-};
-
-PositionsDrawerCard.propTypes = {
-    addToast: PropTypes.func,
-    className: PropTypes.string,
-    contract_info: PropTypes.object,
-    currency: PropTypes.string,
-    current_focus: PropTypes.string,
-    current_tick: PropTypes.number,
-    duration: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    duration_unit: PropTypes.string,
-    exit_spot: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    id: PropTypes.number,
-    indicative: PropTypes.number,
-    is_loading: PropTypes.bool,
-    is_mobile: PropTypes.bool,
-    is_sell_requested: PropTypes.bool,
-    is_unsupported: PropTypes.bool,
-    is_valid_to_sell: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
-    onClickRemove: PropTypes.func,
-    onClickSell: PropTypes.func,
-    onClickCancel: PropTypes.func,
-    profit_loss: PropTypes.number,
-    result: PropTypes.string,
-    sell_time: PropTypes.number,
-    setCurrentFocus: PropTypes.func,
-    status: PropTypes.string,
-    toggleUnsupportedContractModal: PropTypes.func,
-    type: PropTypes.string,
-};
-
-export default PositionsDrawerCard;

From 711b64bb2050ad5f22b40ee955f48f4c32bcdf0b Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Sun, 22 May 2022 17:18:01 +0430
Subject: [PATCH 29/64] remove duplicated scss

---
 packages/reports/src/sass/app.scss            |   6 -
 .../_common/components/number-selector.scss   |  56 ----
 .../_common/components/positions-toggle.scss  | 115 --------
 .../app/_common/components/range-slider.scss  | 183 -------------
 .../app/_common/components/toggle-button.scss |  28 --
 .../_common/drawer/positions-modal-card.scss  | 259 ------------------
 .../sass/app/_common/form/time-picker.scss    |  93 -------
 7 files changed, 740 deletions(-)
 delete mode 100644 packages/reports/src/sass/app/_common/components/number-selector.scss
 delete mode 100644 packages/reports/src/sass/app/_common/components/positions-toggle.scss
 delete mode 100644 packages/reports/src/sass/app/_common/components/range-slider.scss
 delete mode 100644 packages/reports/src/sass/app/_common/components/toggle-button.scss
 delete mode 100644 packages/reports/src/sass/app/_common/drawer/positions-modal-card.scss
 delete mode 100644 packages/reports/src/sass/app/_common/form/time-picker.scss

diff --git a/packages/reports/src/sass/app.scss b/packages/reports/src/sass/app.scss
index 1c16b5aa6396..54d649bdee48 100644
--- a/packages/reports/src/sass/app.scss
+++ b/packages/reports/src/sass/app.scss
@@ -3,10 +3,6 @@
 
 // Drawers
 @import 'app/_common/drawer/positions-drawer';
-@import 'app/_common/drawer/positions-modal-card';
-
-// Form
-@import 'app/_common/form/time-picker';
 
 // Components
 @import 'app/_common/components/amount';
@@ -15,8 +11,6 @@
 @import 'app/_common/components/card-list';
 //@import 'app/_common/components/date-picker'; // TODO: [move-to-components] Datepicker component should be moved
 @import 'app/_common/components/market-symbol-icon';
-@import 'app/_common/components/number-selector';
-@import 'app/_common/components/range-slider';
 
 // Modules
 @import 'app/modules/contract/bottom-widgets';
diff --git a/packages/reports/src/sass/app/_common/components/number-selector.scss b/packages/reports/src/sass/app/_common/components/number-selector.scss
deleted file mode 100644
index 82a220fbf76f..000000000000
--- a/packages/reports/src/sass/app/_common/components/number-selector.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-/** @define number-selector */
-.number-selector {
-    margin-top: 1.2em;
-    text-align: center;
-
-    &__row:first-child {
-        margin-bottom: 0.8em;
-    }
-    &__selection {
-        width: calc(20% - 4px);
-        height: 24px;
-        border-radius: $BORDER_RADIUS;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        @include typeface(--paragraph-left-normal-black);
-        background-color: var(--state-normal);
-        color: var(--text-general);
-
-        &:not(:first-child) {
-            margin-left: 5px;
-        }
-        &--selected {
-            @include typeface(--paragraph-left-bold-active);
-            background-color: var(--state-active);
-            color: var(--text-prominent);
-        }
-        &:hover:not(&--selected) {
-            cursor: pointer;
-            background-color: var(--state-hover);
-        }
-        &:last-child {
-            margin-right: 0;
-        }
-    }
-    @include mobile {
-        margin-top: 0;
-        padding: 0.8rem;
-        border-radius: $BORDER_RADIUS;
-        background-color: var(--fill-normal);
-
-        &__selection {
-            width: calc(20% - 7px);
-            height: 32px;
-            font-size: 1.6rem;
-            background-color: var(--general-section-1);
-
-            &--selected {
-                background-color: var(--state-active);
-            }
-            &:not(:first-child) {
-                margin-left: 0.8rem;
-            }
-        }
-    }
-}
diff --git a/packages/reports/src/sass/app/_common/components/positions-toggle.scss b/packages/reports/src/sass/app/_common/components/positions-toggle.scss
deleted file mode 100644
index e82b9ef9c3c9..000000000000
--- a/packages/reports/src/sass/app/_common/components/positions-toggle.scss
+++ /dev/null
@@ -1,115 +0,0 @@
-/** @define positions-toggle; weak */
-.positions-toggle {
-    position: relative;
-    text-decoration: none;
-    height: 100%;
-    display: inline-flex;
-    align-items: center;
-    padding: 0 0.8rem;
-
-    &__icon {
-        margin-bottom: 0.5em;
-        height: 1.6rem;
-        width: 1.6rem;
-    }
-    &:before {
-        content: '';
-        width: 0.2rem;
-        height: 0.2rem;
-        border-radius: 50%;
-        position: absolute;
-        bottom: 0.8rem;
-        right: 1.5rem;
-        display: block;
-        transition: transform 0.25s ease;
-        transform: translate3d(0, 0, 0);
-        background-color: var(--text-prominent);
-    }
-    &--active {
-        background: none !important;
-
-        &:before {
-            transform: translate3d(0, 50px, 0);
-        }
-        .positions-toggle__icon {
-            margin-bottom: 0;
-        }
-        @include desktop {
-            &:after {
-                transform: translate3d(0, 4px, 0);
-            }
-        }
-    }
-    &--has-count:after {
-        content: attr(data-count);
-        width: 14px;
-        height: 14px;
-        font-size: 0.9rem;
-        border-radius: 50%;
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        top: 2px;
-        right: 0;
-        background-color: var(--brand-red-coral);
-        color: $color-white;
-    }
-    @include mobile {
-        padding: 0 1.2rem;
-        height: inherit;
-
-        &--has-count:after {
-            top: -4px;
-            right: 4px;
-        }
-        .positions-toggle__icon {
-            margin: 0;
-        }
-        &:before {
-            display: none;
-        }
-    }
-}
-
-/** @define positions-modal; weak */
-.positions-modal {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-
-    &__body {
-        flex: 1;
-        overflow-y: auto;
-        overflow-x: hidden;
-    }
-    &__header {
-        display: flex;
-        justify-content: space-between;
-        padding: 1.6rem;
-        height: 50px;
-    }
-    &__title {
-        display: flex;
-        align-items: center;
-        font-size: 1rem;
-        color: var(--text-general);
-        line-height: 1.5;
-
-        &-icon {
-            width: 1.2rem;
-            height: 1.2rem;
-            margin-right: 0.4rem;
-        }
-    }
-    &__footer {
-        height: 72px;
-        width: 100%;
-
-        &-btn {
-            margin: 1.6rem 0.8rem;
-            width: calc(100% - 1.6rem);
-        }
-    }
-}
diff --git a/packages/reports/src/sass/app/_common/components/range-slider.scss b/packages/reports/src/sass/app/_common/components/range-slider.scss
deleted file mode 100644
index 6c1cff37e173..000000000000
--- a/packages/reports/src/sass/app/_common/components/range-slider.scss
+++ /dev/null
@@ -1,183 +0,0 @@
-// Range Slider
-/** @define range-slider */
-.range-slider {
-    margin-top: 8px;
-    margin-bottom: 8px;
-    padding: 0 4px;
-    box-sizing: border-box;
-
-    &__label {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-top: 16px;
-        margin-bottom: 4px;
-    }
-    /* overriding firefox shadow pseudo element */
-    &__track[type='range']::-moz-focus-outer {
-        border: 0;
-    }
-    // TODO: remove once we have proper styling for input slider validation error
-    &__error {
-        .range-slider {
-            &__track[type='range'] {
-                // Range Handle Thumb - Chrome / Webkit based browsers
-                &::-webkit-slider-thumb {
-                    background: var(--text-loss-danger);
-                }
-                // Range Handle Thumb - Firefox / Gecko based browsers
-                &::-moz-range-thumb {
-                    background: var(--text-loss-danger);
-                }
-            }
-            &__line {
-                background: var(--text-loss-danger) !important;
-            }
-            &__ticks-step--marked {
-                background: var(--text-loss-danger) !important;
-                border-color: var(--text-loss-danger) !important;
-            }
-        }
-    }
-    &__track[type='range'] {
-        position: relative;
-        // removal of !important is pending refactor in main trading sass file that overrides rules for input els
-        appearance: none !important;
-        width: 100% !important;
-        height: 2px; // !important had to be removed to fix disappearing thumb on MS Edge
-        border-radius: 5px;
-        outline: none;
-        padding: 0;
-        margin: 0;
-        cursor: pointer;
-        background: var(--state-normal);
-        border: none;
-
-        // Handles Track - MS Edge and IE
-        @supports (-ms-ime-align: auto) {
-            height: 14px;
-            position: relative;
-            top: -6px;
-        }
-        // Range Handle Thumb - Chrome / Webkit based browsers
-        &::-webkit-slider-thumb {
-            @include thumbStyle();
-            background: var(--state-active);
-        }
-        // Range Handle Thumb - Firefox / Gecko based browsers
-        &::-moz-range-thumb {
-            @include thumbStyle();
-            background: var(--state-active);
-        }
-        // Range Handle Thumb - Microsoft Edge
-        &::-ms-thumb {
-            @include thumbStyle();
-            background: var(--state-active);
-        }
-        &:hover,
-        &:focus,
-        &:active {
-            border: 0;
-            outline: none;
-        }
-        &:active,
-        &:focus {
-            box-shadow: none !important;
-        }
-        &::-ms-tooltip {
-            display: none;
-        }
-        &[type='range']::-ms-track {
-            /*example */
-            width: 100%;
-            height: 2px;
-            border-width: 6px 0;
-            background: var(--state-active);
-            border-color: var(--general-section-1);
-            color: var(--state-active);
-        }
-        &[type='range']::-ms-fill-upper {
-            height: 2px;
-            background: var(--state-active);
-        }
-        &[type='range']::-ms-fill-lower {
-            height: 2px;
-            background: var(--state-active);
-        }
-    }
-    &__ticks {
-        width: 100%;
-        position: absolute;
-        display: flex;
-        justify-content: space-between;
-        left: 0;
-        top: -3px;
-        height: 0;
-
-        &-step {
-            height: 8px;
-            width: 8px;
-            border-radius: 50%;
-            transition: box-shadow 0.2s;
-            cursor: pointer;
-            border: 4px solid var(--state-normal);
-            background: var(--state-normal);
-
-            &--active,
-            &--marked {
-                background: var(--state-active);
-                border-color: var(--state-active);
-            }
-            &--marked-hover {
-                background: var(--state-hover);
-                border-color: var(--state-hover);
-            }
-            &--marked:hover:not(&--active) {
-                border-color: var(--state-active) !important;
-            }
-            &--active {
-                visibility: hidden;
-                pointer-events: none;
-
-                &:after {
-                    content: '';
-                    width: 1em;
-                    height: 1em;
-                    position: absolute;
-                    display: block;
-                    top: 0;
-                    border-radius: 50%;
-                    background: var(--state-active);
-                }
-            }
-            &:hover:not(&--active) {
-                background: var(--state-hover);
-                border-color: var(--state-hover);
-                box-shadow: 0 0 0 5px var(--shadow-menu);
-            }
-            &:first-child {
-                margin-left: 0;
-            }
-            &:last-child {
-                margin-right: 0;
-            }
-        }
-    }
-    &__line {
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 2px;
-        pointer-events: none;
-        background: var(--state-active);
-
-        &--fill {
-            background: var(--state-hover);
-        }
-    }
-    &__caption {
-        text-align: center;
-        padding-top: 8px;
-    }
-}
diff --git a/packages/reports/src/sass/app/_common/components/toggle-button.scss b/packages/reports/src/sass/app/_common/components/toggle-button.scss
deleted file mode 100644
index 85dbaf9b6f40..000000000000
--- a/packages/reports/src/sass/app/_common/components/toggle-button.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-/** @define toggle-button */
-.toggle-button {
-    border-radius: 4px;
-    background-color: var(--state-normal);
-    color: var(--text-general);
-    height: 3.2em;
-    margin: 0;
-    margin-top: 0.8em;
-
-    &:not(:first-child) {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-    &:not(:last-child) {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-    &--selected {
-        background-color: var(--state-active);
-        color: var(--text-prominent);
-    }
-}
-
-/** @define toggle-button-group */
-.toggle-button-group {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(4.4em, 1fr));
-}
diff --git a/packages/reports/src/sass/app/_common/drawer/positions-modal-card.scss b/packages/reports/src/sass/app/_common/drawer/positions-modal-card.scss
deleted file mode 100644
index 9c750117da33..000000000000
--- a/packages/reports/src/sass/app/_common/drawer/positions-modal-card.scss
+++ /dev/null
@@ -1,259 +0,0 @@
-/** @define positions-modal-card; weak */
-
-.positions-modal-card {
-    $positions-modal-card: &;
-
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    text-decoration: none;
-    position: relative;
-    padding: 0.8rem;
-    color: var(--text-general);
-    user-select: none;
-    -webkit-touch-callout: none;
-    -webkit-tap-highlight-color: transparent;
-
-    &__result {
-        &--enter,
-        &--exit {
-            opacity: 0;
-        }
-        &--enter-done {
-            opacity: 1;
-        }
-    }
-    &__caption {
-        font-size: 1.6em;
-        font-weight: bold;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        transition: opacity 0.25s ease;
-        cursor: pointer;
-        width: 100%;
-
-        &--won {
-            color: var(--text-profit-success);
-        }
-        &--lost {
-            color: var(--text-loss-danger);
-        }
-        &-wrapper {
-            cursor: pointer;
-            width: 100%;
-            grid-row: 1 / -1;
-            align-self: center;
-            justify-self: center;
-            text-decoration: none;
-        }
-    }
-    &__icon {
-        margin-left: 4px;
-    }
-    &__wrapper {
-        margin: 0.8rem;
-        border-radius: $BORDER_RADIUS;
-        transition: transform 0.25s ease, opacity 0.25s linear;
-        position: relative;
-        background: var(--general-main-1);
-        border: 1px solid var(--border-disabled);
-    }
-    &__grid {
-        display: grid;
-
-        &-header {
-            border-bottom: 1px solid var(--general-section-1);
-            grid-template-columns: 1fr 1fr 1fr;
-            padding-bottom: 1rem;
-            margin-bottom: 0.8rem;
-        }
-        &-body {
-            grid-template-columns: 2fr 1fr;
-            grid-template-rows: auto auto;
-            display: grid;
-        }
-        &-underlying-trade {
-            grid-template-columns: 1fr 1fr 1fr;
-        }
-        &-profit-payout {
-            grid-template-columns: 1fr 1fr;
-            display: grid;
-            grid-row: 1 / 2;
-            grid-column: 1 / 2;
-            padding: 8px 0;
-            border-radius: $BORDER_RADIUS;
-        }
-        &-price-payout {
-            display: grid;
-            grid-row: 2 / 3;
-            grid-column: 1 / 2;
-            grid-template-columns: 1fr 1fr;
-        }
-    }
-    &__progress {
-        justify-self: end;
-        align-self: center;
-        grid-row: 1 / 3;
-        grid-column: 2 / 3;
-    }
-    &__sell-button {
-        justify-self: end;
-        align-self: center;
-
-        .dc-btn--sell {
-            height: 3.2rem !important;
-        }
-    }
-    &__purchase,
-    &__payout {
-        &-label {
-            text-transform: none;
-            white-space: nowrap;
-            max-width: 90px;
-        }
-        &-value {
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-            padding: 4px 0 8px;
-        }
-        &-price {
-            display: flex;
-            flex-direction: column;
-        }
-    }
-    &__type {
-        font-size: 1.2rem;
-        display: flex;
-        justify-content: flex-start;
-        font-weight: bold;
-
-        /* postcss-bem-linter: ignore */
-        .category-type {
-            .color1-fill {
-                fill: var(--brand-red-coral);
-            }
-            .color2-fill {
-                fill: var(--brand-secondary);
-            }
-        }
-    }
-    &__symbol {
-        margin-left: 0.5rem;
-        /* iPhone SE screen height fixes due to UI space restrictions */
-        @media only screen and (max-height: 480px) {
-            font-size: 0.9rem;
-        }
-    }
-    &__indicative {
-        font-size: 1.2rem;
-        font-weight: bold;
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        color: var(--text-general);
-
-        &-label {
-            font-size: 0.8rem;
-            font-weight: normal;
-            margin-bottom: 4px;
-            white-space: nowrap;
-            max-width: 90px;
-            color: var(--text-general);
-        }
-        &--movement {
-            margin-left: 2px;
-            width: 16px;
-            height: 16px;
-
-            &-complete,
-            &-complete:after {
-                display: none;
-            }
-            &:after {
-                content: '';
-                width: 16px;
-            }
-        }
-    }
-    &__remaining-time {
-        font-size: 1.2em;
-        color: var(--text-general);
-    }
-    &__timer {
-        margin: 0.2rem auto;
-    }
-    &__profit-loss {
-        font-size: 1.2rem;
-        text-align: center;
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        font-weight: bold;
-
-        &-label {
-            font-size: 0.8rem;
-            margin-bottom: 4px;
-            font-weight: normal;
-            white-space: nowrap;
-            max-width: 90px;
-            color: var(--text-general);
-            /* iPhone SE screen height fixes due to UI space restrictions */
-            @media only screen and (max-height: 480px) {
-                font-size: 0.8rem;
-            }
-        }
-        &--is-crypto {
-            margin-left: -6px;
-        }
-        &--negative {
-            color: var(--text-loss-danger);
-
-            &:before {
-                content: '-';
-                color: inherit;
-            }
-        }
-        &--positive {
-            color: var(--text-profit-success);
-
-            &:before {
-                content: '+';
-                color: inherit;
-            }
-        }
-    }
-    &__underlying-name {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        font-weight: bold;
-        font-size: 1.2em;
-    }
-    &--multiplier {
-        .dc-contract-card {
-            &__grid-items {
-                grid-template-columns: 1fr 1fr 1fr;
-                padding: 1.2rem 0rem;
-            }
-            &__deal-cancel-fee,
-            &__buy-price,
-            &__stop-loss {
-                order: 1;
-            }
-        }
-        .dc-contract-card__sell-button {
-            border-top: 0rem;
-        }
-    }
-}
-
-/** @define dc-remaining-time; weak */
-.dc-remaining-time {
-    display: inline;
-
-    @include mobile {
-        font-size: 0.9rem;
-    }
-}
diff --git a/packages/reports/src/sass/app/_common/form/time-picker.scss b/packages/reports/src/sass/app/_common/form/time-picker.scss
deleted file mode 100644
index 240329b5c2b6..000000000000
--- a/packages/reports/src/sass/app/_common/form/time-picker.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-/** @define time-picker */
-.time-picker {
-    position: relative;
-    margin-top: 0.8em;
-
-    &--padding {
-        padding: 1.6em;
-    }
-    &__icon {
-        @extend %inline-icon;
-        position: absolute;
-        bottom: 0;
-        top: 0.8em;
-        left: 5%;
-        z-index: 1;
-        margin: unset;
-        /* postcss-bem-linter: ignore */
-        g {
-            stroke: var(--text-general);
-        }
-    }
-    &__dialog {
-        box-shadow: 0 2px 4px 0 var(--shadow-menu);
-        border-radius: 4px;
-        padding-top: 10px;
-        position: absolute;
-        top: 0;
-        transform-origin: right;
-        transform: scale(1, 0) translate3d(0, 0, 0);
-        transition: transform 0.25s ease, opacity 0.25s linear;
-        width: 231px;
-        z-index: 2;
-        background-color: var(--general-main-2);
-
-        &--enter,
-        &--exit {
-            opacity: 0;
-            transform: scale(1, 1) translate3d(-225px, 0, 0);
-        }
-        &--enter-done {
-            opacity: 1;
-            transform: translate3d(-245px, 0, 0);
-        }
-    }
-    &__selector {
-        height: inherit;
-
-        &--hours {
-            border-right: 1px solid var(--general-section-1);
-            border-radius: 0 0 0 4px;
-            width: 150px;
-        }
-        &--minutes {
-            width: 80px;
-            border-radius: 0 5px 5px 0;
-        }
-        &--hours,
-        &--minutes {
-            display: inline-block;
-            height: 228px;
-            overflow: hidden;
-            text-align: center;
-            border-color: var(--general-section-1);
-            color: var(--text-prominent);
-        }
-        &-list-title {
-            @include typeface(--small-center-bold-black);
-            color: var(--text-prominent);
-        }
-        &-list-item {
-            @include typeface(--small-left-normal-black);
-            cursor: pointer;
-            border-radius: 4px;
-            display: inline-block;
-            margin: 3px;
-            padding: 7px;
-            color: var(--text-general);
-
-            &:hover:not(&--disabled):not(&--selected) {
-                background: var(--state-hover);
-                color: var(--text-general);
-            }
-            &--selected {
-                background: var(--state-active);
-                color: var(--text-prominent) !important;
-            }
-            &--disabled {
-                color: var(--text-disabled);
-                cursor: default;
-            }
-        }
-    }
-}

From 178c564a5b5b9744b041f231d671e63fa43dd4a6 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Sun, 22 May 2022 17:53:11 +0430
Subject: [PATCH 30/64] remove bottom-widget

---
 .../SmartChart/Components/bottom-widgets.jsx  | 10 ---
 .../Modules/SmartChart/Components/icons.js    | 61 -------------------
 packages/reports/src/sass/app.scss            |  1 -
 .../app/modules/contract/bottom-widgets.scss  | 10 ---
 4 files changed, 82 deletions(-)
 delete mode 100644 packages/reports/src/Modules/SmartChart/Components/bottom-widgets.jsx
 delete mode 100644 packages/reports/src/Modules/SmartChart/Components/icons.js
 delete mode 100644 packages/reports/src/sass/app/modules/contract/bottom-widgets.scss

diff --git a/packages/reports/src/Modules/SmartChart/Components/bottom-widgets.jsx b/packages/reports/src/Modules/SmartChart/Components/bottom-widgets.jsx
deleted file mode 100644
index a3c845fe6c8e..000000000000
--- a/packages/reports/src/Modules/SmartChart/Components/bottom-widgets.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const BottomWidgets = ({ Digits }) => <div className='bottom-widgets'>{Digits}</div>;
-
-BottomWidgets.propTypes = {
-    Digits: PropTypes.node,
-};
-
-export default BottomWidgets;
diff --git a/packages/reports/src/Modules/SmartChart/Components/icons.js b/packages/reports/src/Modules/SmartChart/Components/icons.js
deleted file mode 100644
index 8555cf7eb8a1..000000000000
--- a/packages/reports/src/Modules/SmartChart/Components/icons.js
+++ /dev/null
@@ -1,61 +0,0 @@
-// THIS FILE CONTAINS THE ICONS RENDERED IN CANVAS2D CONTEXT.
-
-// All path commands *MUST* be absolute (MCLVQZ).
-// Use figma.com which by default exports paths as absolute.
-// Only <path /> tags is supported.
-const parse_svg = markup => {
-    // make tests pass
-    if (!window.DOMParser) {
-        return null;
-    }
-
-    const parser = new window.DOMParser();
-    const svg = parser.parseFromString(markup, 'image/svg+xml').children[0];
-    let { width, height } = svg.attributes;
-    width = width.value * 1;
-    height = height.value * 1;
-
-    const paths = [];
-    [].forEach.call(svg.children, p => {
-        const { d, fill, stroke } = p.attributes;
-        paths.push({
-            points: d.value
-                .match(/M|C|H|A|L|V|-?\d*(\.\d+)?/g)
-                .filter(e => e)
-                .map(e => ('MCHALV'.indexOf(e) === -1 ? e * 1 : e)),
-            fill: fill && fill.value,
-            stroke: stroke && stroke.value,
-        });
-    });
-    function with_color(color, bg_color = 'white') {
-        return {
-            width,
-            height,
-            paths: paths.map(({ points, fill, stroke }) => ({
-                points,
-                stroke,
-                fill: fill !== 'white' ? color : bg_color,
-            })),
-        };
-    }
-
-    return {
-        width,
-        height,
-        paths,
-        with_color,
-    };
-};
-
-export const START = parse_svg(`
-<svg width="15" height="20" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7,20 C11.2,14.4 14,10.8659932 14,7 C14,3.13400675 10.8659932,0 7,0 C3.13400675,0 0,3.13400675 0,7 C0,10.8659932 2.8,14.4 7,20 Z" fill="#333333"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="A7 7 4.2 0 6.283185307179586" fill="white" />
-</svg>`);
-
-export const END = parse_svg(`
-<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2L18 2L18 12L2 12Z" fill="white" />
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2,0 L2,1 L19,1 L19,12 L2,12 L2,20 L1,20 L1,0 L2,0 Z M18,8 L15,8 L15,11 L18,11 L18,8 Z M12,8 L9,8 L9,11 L12,11 L12,8 Z M6,8 L3,8 L3,11 L6,11 L6,8 Z M15,5 L12,5 L12,8 L15,8 L15,5 Z M9,5 L6,5 L6,8 L9,8 L9,5 Z M6,2 L3,2 L3,5 L6,5 L6,2 Z M18,2 L15,2 L15,5 L18,5 L18,2 Z M12,2 L9,2 L9,5 L12,5 L12,2 Z" fill="#333333"/>
-</svg>
-`);
diff --git a/packages/reports/src/sass/app.scss b/packages/reports/src/sass/app.scss
index 54d649bdee48..f32a3ebdf759 100644
--- a/packages/reports/src/sass/app.scss
+++ b/packages/reports/src/sass/app.scss
@@ -13,6 +13,5 @@
 @import 'app/_common/components/market-symbol-icon';
 
 // Modules
-@import 'app/modules/contract/bottom-widgets';
 @import 'app/modules/portfolio';
 @import 'app/modules/smart-chart';
diff --git a/packages/reports/src/sass/app/modules/contract/bottom-widgets.scss b/packages/reports/src/sass/app/modules/contract/bottom-widgets.scss
deleted file mode 100644
index 9dd994c8370a..000000000000
--- a/packages/reports/src/sass/app/modules/contract/bottom-widgets.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/** @define bottom-widgets */
-.bottom-widgets {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
-    bottom: 2em;
-}

From 8b567a1d06b487b569e072989a1a343e8ba5c33d Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Wed, 25 May 2022 14:18:57 +0430
Subject: [PATCH 31/64] fix reports loader

---
 .../src/loaders/deriv-reports-loader.js       | 47 +++++++++++++++++++
 packages/trader/build/loaders-config.js       |  3 ++
 .../PositionsDrawer/positions-drawer.jsx      |  2 +-
 3 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 packages/shared/src/loaders/deriv-reports-loader.js

diff --git a/packages/shared/src/loaders/deriv-reports-loader.js b/packages/shared/src/loaders/deriv-reports-loader.js
new file mode 100644
index 000000000000..ba5aaa36cb5f
--- /dev/null
+++ b/packages/shared/src/loaders/deriv-reports-loader.js
@@ -0,0 +1,47 @@
+const resolve = require('path').resolve;
+const existsSync = require('fs').existsSync;
+/* Using this loader you can import components from @deriv/components without having to manually
+import the corresponding stylesheet. The deriv-reports-loader will automatically import
+stylesheets.
+
+    import { PoaExpired } from '@deriv/reports';
+    ↓ ↓ ↓
+    import PoaExpired from '@deriv/reports/dist/js/poa-expired';
+*/
+
+function getKebabCase(str) {
+    return str
+        .split(/(?=[A-Z])/)
+        .join('-')
+        .toLowerCase();
+}
+
+function checkExists(component) {
+    return existsSync(resolve(__dirname, '../../../reports/src/Components/', component, `${component}.scss`));
+}
+
+module.exports = function (source, map) {
+    const lines = source.split(/\n/);
+    const mapped_lines = lines.map(line => {
+        const matches = /\s*import\s+\{(.*)\}\s*from\s+\'@deriv\/reports/.exec(line); // eslint-disable-line no-useless-escape
+        if (!matches || !matches[1]) {
+            return line; // do nothing;
+        }
+        const components = matches[1]
+            .replace(/\sas\s\w+/, '') // Remove aliasing from imports.
+            .replace(/\s+/g, '')
+            .split(',');
+        const replace = components
+            .map(
+                c => `
+import ${c} from '@deriv/reports/dist/reports/js/${getKebabCase(c)}';
+${checkExists(getKebabCase(c)) ? `import '@deriv/reports/dist/reports/css/${getKebabCase(c)}.css';` : ''}
+        `
+            )
+            .join('\n');
+
+        return replace;
+    });
+
+    return this.callback(null, mapped_lines.join('\n'), map);
+};
diff --git a/packages/trader/build/loaders-config.js b/packages/trader/build/loaders-config.js
index 244d0aa2d1b8..7d65dfcd1806 100644
--- a/packages/trader/build/loaders-config.js
+++ b/packages/trader/build/loaders-config.js
@@ -8,6 +8,9 @@ const js_loaders = [
     {
         loader: '@deriv/shared/src/loaders/deriv-account-loader.js',
     },
+    {
+        loader: '@deriv/shared/src/loaders/deriv-reports-loader.js',
+    },
     {
         loader: 'babel-loader',
         options: {
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
index c4d518373d54..2242427f1591 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
@@ -9,7 +9,7 @@ import { routes, useNewRowTransition } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import EmptyPortfolioMessage from '../EmptyPortfolioMessage';
 import { connect } from 'Stores/connect';
-import PositionsDrawerCard from '@deriv/reports/dist/reports/js/positions-drawer-card';
+import { PositionsDrawerCard } from '@deriv/reports';
 import { filterByContractType } from './helpers';
 
 const PositionsDrawerCardItem = ({ row: portfolio_position, measure, onHoverPosition, is_new_row, ...props }) => {

From 66c843228745a0f3819d56a6fe47d73fbc3a8dd6 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Thu, 2 Jun 2022 16:26:00 +0430
Subject: [PATCH 32/64] add contract, portfolio and chartbarrier stores to the
 core

---
 packages/core/package.json                    |   1 +
 .../core/src/Stores/Helpers/limit-orders.js   | 101 +++
 .../core/src/Stores/active-symbols-store.js   |  16 +
 .../core/src/Stores/chart-barrier-store.js    |  80 +++
 .../core/src/Stores/contract-replay-store.js  | 293 +++++++++
 packages/core/src/Stores/contract-store.js    | 323 ++++++++++
 .../core/src/Stores/contract-trade-store.js   | 203 ++++++
 packages/core/src/Stores/index.js             |  10 +
 packages/core/src/Stores/portfolio.js         | 501 +++++++++++++++
 .../src/Stores/Modules/Trading/trade-store.js |  10 +-
 packages/reports/src/Stores/Modules/index.js  |  12 +-
 packages/reports/src/Stores/index.js          |   4 +
 packages/shared/package.json                  |   2 +
 packages/shared/src/index.js                  |   2 +
 packages/shared/src/services/server-time.js   |  32 +
 .../shared/src/utils/constants/barriers.js    |  36 ++
 .../shared/src/utils/constants/contract.js    | 415 ++++++++++++
 packages/shared/src/utils/constants/index.js  |   4 +
 .../shared/src/utils/constants/markers.js     |  72 +++
 .../src/utils/constants/validation-rules.js   | 183 ++++++
 .../src/utils/helpers/__tests__/barrier.js    |  80 +++
 .../src/utils/helpers/__tests__/barriers.js   |  58 ++
 .../helpers/__tests__/format-response.js      |  32 +
 .../src/utils/helpers/__tests__/start-date.js |  93 +++
 .../src/utils/helpers/active-symbols.js       | 145 +++++
 packages/shared/src/utils/helpers/barrier.js  |  20 +
 packages/shared/src/utils/helpers/barriers.js |  28 +
 .../src/utils/helpers/chart-marker-helpers.js | 119 ++++
 .../shared/src/utils/helpers/chart-markers.js |  89 +++
 .../src/utils/helpers/chart-notifications.js  |   9 +
 .../shared/src/utils/helpers/contract-type.js | 599 ++++++++++++++++++
 packages/shared/src/utils/helpers/details.js  |  72 +++
 packages/shared/src/utils/helpers/duration.js | 132 ++++
 .../src/utils/helpers/format-response.js      |  30 +
 packages/shared/src/utils/helpers/index.js    |  13 +
 packages/shared/src/utils/helpers/logic.js    | 102 +++
 .../src/utils/helpers/market-underlying.js    |  30 +
 .../utils/helpers/portfolio-notifications.js  |  33 +
 .../shared/src/utils/helpers/start-date.js    |  46 ++
 .../Helpers/portfolio-notifications.js        |   4 +-
 .../src/Stores/Modules/Trading/trade-store.js |  16 +-
 packages/trader/src/Stores/Modules/index.js   |  12 +-
 packages/trader/src/Stores/index.js           |   4 +
 packages/trader/tsconfig.tsbuildinfo          |   1 +
 44 files changed, 4042 insertions(+), 25 deletions(-)
 create mode 100644 packages/core/src/Stores/Helpers/limit-orders.js
 create mode 100644 packages/core/src/Stores/active-symbols-store.js
 create mode 100644 packages/core/src/Stores/chart-barrier-store.js
 create mode 100644 packages/core/src/Stores/contract-replay-store.js
 create mode 100644 packages/core/src/Stores/contract-store.js
 create mode 100644 packages/core/src/Stores/contract-trade-store.js
 create mode 100644 packages/core/src/Stores/portfolio.js
 create mode 100644 packages/shared/src/services/server-time.js
 create mode 100644 packages/shared/src/utils/constants/barriers.js
 create mode 100644 packages/shared/src/utils/constants/contract.js
 create mode 100644 packages/shared/src/utils/constants/index.js
 create mode 100644 packages/shared/src/utils/constants/markers.js
 create mode 100644 packages/shared/src/utils/constants/validation-rules.js
 create mode 100644 packages/shared/src/utils/helpers/__tests__/barrier.js
 create mode 100644 packages/shared/src/utils/helpers/__tests__/barriers.js
 create mode 100644 packages/shared/src/utils/helpers/__tests__/format-response.js
 create mode 100644 packages/shared/src/utils/helpers/__tests__/start-date.js
 create mode 100644 packages/shared/src/utils/helpers/active-symbols.js
 create mode 100644 packages/shared/src/utils/helpers/barrier.js
 create mode 100644 packages/shared/src/utils/helpers/barriers.js
 create mode 100644 packages/shared/src/utils/helpers/chart-marker-helpers.js
 create mode 100644 packages/shared/src/utils/helpers/chart-markers.js
 create mode 100644 packages/shared/src/utils/helpers/chart-notifications.js
 create mode 100644 packages/shared/src/utils/helpers/contract-type.js
 create mode 100644 packages/shared/src/utils/helpers/details.js
 create mode 100644 packages/shared/src/utils/helpers/duration.js
 create mode 100644 packages/shared/src/utils/helpers/format-response.js
 create mode 100644 packages/shared/src/utils/helpers/index.js
 create mode 100644 packages/shared/src/utils/helpers/logic.js
 create mode 100644 packages/shared/src/utils/helpers/market-underlying.js
 create mode 100644 packages/shared/src/utils/helpers/portfolio-notifications.js
 create mode 100644 packages/shared/src/utils/helpers/start-date.js
 create mode 100644 packages/trader/tsconfig.tsbuildinfo

diff --git a/packages/core/package.json b/packages/core/package.json
index 7e42b300ebda..9b3d842fa917 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -118,6 +118,7 @@
         "js-cookie": "^2.2.1",
         "loadjs": "^4.2.0",
         "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1",
         "mobx": "^5.15.7",
         "mobx-react": "6.3.1",
         "mobx-utils": "^5.5.5",
diff --git a/packages/core/src/Stores/Helpers/limit-orders.js b/packages/core/src/Stores/Helpers/limit-orders.js
new file mode 100644
index 000000000000..fc598f75e3b9
--- /dev/null
+++ b/packages/core/src/Stores/Helpers/limit-orders.js
@@ -0,0 +1,101 @@
+// import { isMultiplierContract } from '../contract';
+// import { BARRIER_COLORS, BARRIER_LINE_STYLES } from '../constants';
+import { ChartBarrierStore } from '../chart-barrier-store';
+// import { removeBarrier } from './barriers';
+import { isMultiplierContract, BARRIER_COLORS, BARRIER_LINE_STYLES, removeBarrier } from '@deriv/shared';
+
+const isLimitOrderBarrierSupported = (contract_type, contract_info) =>
+    isMultiplierContract(contract_type) && contract_info.limit_order;
+
+export const LIMIT_ORDER_TYPES = {
+    STOP_OUT: 'stop_out',
+    TAKE_PROFIT: 'take_profit',
+    STOP_LOSS: 'stop_loss',
+};
+
+export const setLimitOrderBarriers = ({ barriers, contract_type, contract_info = {}, is_over }) => {
+    if (is_over && isLimitOrderBarrierSupported(contract_type, contract_info)) {
+        const limit_orders = Object.values(LIMIT_ORDER_TYPES);
+        const has_stop_loss = Object.keys(contract_info.limit_order).some(
+            k => k === LIMIT_ORDER_TYPES.STOP_LOSS && contract_info.limit_order[k].value
+        );
+
+        limit_orders.forEach(key => {
+            const obj_limit_order = contract_info.limit_order[key];
+
+            if (!obj_limit_order || !obj_limit_order.value) {
+                removeBarrier(barriers, key);
+                return;
+            }
+
+            let barrier = barriers.find(b => b.key === key);
+
+            if (barrier) {
+                if (barrier.high === +obj_limit_order.value) {
+                    return;
+                }
+
+                barrier.onChange({
+                    high: obj_limit_order.value,
+                });
+            } else {
+                const obj_barrier = {
+                    key,
+                    title: `${obj_limit_order.display_name}`,
+                    color: key === LIMIT_ORDER_TYPES.TAKE_PROFIT ? BARRIER_COLORS.GREEN : BARRIER_COLORS.ORANGE,
+                    draggable: false,
+                    lineStyle:
+                        key === LIMIT_ORDER_TYPES.STOP_OUT ? BARRIER_LINE_STYLES.DOTTED : BARRIER_LINE_STYLES.SOLID,
+                    hidePriceLines: has_stop_loss && key === LIMIT_ORDER_TYPES.STOP_OUT,
+                    hideOffscreenLine: true,
+                    showOffscreenArrows: true,
+                    isSingleBarrier: true,
+                    opacityOnOverlap: key === LIMIT_ORDER_TYPES.STOP_OUT && 0.15,
+                };
+                barrier = new ChartBarrierStore(obj_limit_order.value);
+
+                Object.assign(barrier, obj_barrier);
+                barriers.push(barrier);
+            }
+        });
+    } else {
+        const limit_orders = Object.values(LIMIT_ORDER_TYPES);
+        limit_orders.forEach(l => removeBarrier(barriers, l));
+    }
+};
+
+/**
+ * Get limit_order for contract_update API
+ * @param {object} contract_update - contract_update input & checkbox values
+ */
+export const getLimitOrder = contract_update => {
+    const {
+        has_contract_update_stop_loss,
+        has_contract_update_take_profit,
+        contract_update_stop_loss,
+        contract_update_take_profit,
+        contract_info,
+    } = contract_update;
+
+    const limit_order = {};
+
+    const new_take_profit = has_contract_update_take_profit ? +contract_update_take_profit : null;
+    const has_take_profit_changed =
+        Math.abs(contract_info.limit_order?.take_profit?.order_amount) !== Math.abs(new_take_profit);
+
+    if (has_take_profit_changed) {
+        // send positive take_profit to update or null cancel
+        limit_order.take_profit = new_take_profit;
+    }
+
+    const new_stop_loss = has_contract_update_stop_loss ? +contract_update_stop_loss : null;
+    const has_stop_loss_changed =
+        Math.abs(contract_info.limit_order?.stop_loss?.order_amount) !== Math.abs(new_stop_loss);
+
+    if (has_stop_loss_changed) {
+        // send positive stop_loss to update or null to cancel
+        limit_order.stop_loss = new_stop_loss;
+    }
+
+    return limit_order;
+};
diff --git a/packages/core/src/Stores/active-symbols-store.js b/packages/core/src/Stores/active-symbols-store.js
new file mode 100644
index 000000000000..a274aa01f71d
--- /dev/null
+++ b/packages/core/src/Stores/active-symbols-store.js
@@ -0,0 +1,16 @@
+import { WS } from '@deriv/shared';
+import { observable } from 'mobx';
+import BaseStore from './base-store';
+
+export default class ActiveSymbolsStore extends BaseStore {
+    @observable active_symbols = [];
+
+    async setActiveSymbols() {
+        const { active_symbols } = await WS.authorized.activeSymbols();
+        if (active_symbols.lenght) {
+            this.active_symbols = [];
+            return;
+        }
+        this.active_symbols = active_symbols;
+    }
+}
diff --git a/packages/core/src/Stores/chart-barrier-store.js b/packages/core/src/Stores/chart-barrier-store.js
new file mode 100644
index 000000000000..38d4a34025ad
--- /dev/null
+++ b/packages/core/src/Stores/chart-barrier-store.js
@@ -0,0 +1,80 @@
+import { action, computed, observable } from 'mobx';
+import { BARRIER_COLORS, BARRIER_LINE_STYLES, CONTRACT_SHADES, DEFAULT_SHADES, barriersToString } from '@deriv/shared';
+// import { barriersToString } from './Helpers/barriers';
+
+export class ChartBarrierStore {
+    @observable color;
+    @observable lineStyle;
+    @observable shade;
+    @observable shadeColor;
+
+    @observable high;
+    @observable low;
+
+    @observable relative;
+    @observable draggable;
+
+    @observable hidePriceLines;
+    @observable hideBarrierLine;
+    @observable hideOffscreenLine;
+    @observable title;
+
+    onChartBarrierChange;
+
+    constructor(high_barrier, low_barrier, onChartBarrierChange = null, { color, line_style, not_draggable } = {}) {
+        this.color = color;
+        this.lineStyle = line_style || BARRIER_LINE_STYLES.SOLID;
+        this.onChange = this.onBarrierChange;
+
+        // trade_store's action to process new barriers on dragged
+        this.onChartBarrierChange =
+            typeof onChartBarrierChange === 'function' ? onChartBarrierChange.bind(this) : () => {};
+
+        this.high = +high_barrier || 0; // 0 to follow the price
+        if (low_barrier) {
+            this.low = +low_barrier;
+        }
+
+        this.shade = this.default_shade;
+
+        const has_barrier = !!high_barrier;
+        this.relative = !has_barrier || /^[+-]/.test(high_barrier);
+        this.draggable = !not_draggable && has_barrier;
+        this.hidePriceLines = !has_barrier;
+    }
+
+    @action.bound
+    updateBarriers(high, low, isFromChart = false) {
+        if (!isFromChart) {
+            this.relative = /^[+-]/.test(high);
+        }
+        this.high = +high || undefined;
+        this.low = +low || undefined;
+    }
+
+    @action.bound
+    updateBarrierShade(should_display, contract_type) {
+        this.shade = (should_display && CONTRACT_SHADES[contract_type]) || this.default_shade;
+    }
+
+    @action.bound
+    onBarrierChange({ high, low }) {
+        this.updateBarriers(high, low, true);
+        this.onChartBarrierChange(...barriersToString(this.relative, high, low));
+    }
+
+    @action.bound
+    updateBarrierColor(is_dark_mode) {
+        this.color = is_dark_mode ? BARRIER_COLORS.DARK_GRAY : BARRIER_COLORS.GRAY;
+    }
+
+    @computed
+    get barrier_count() {
+        return (typeof this.high !== 'undefined') + (typeof this.low !== 'undefined');
+    }
+
+    @computed
+    get default_shade() {
+        return DEFAULT_SHADES[this.barrier_count];
+    }
+}
diff --git a/packages/core/src/Stores/contract-replay-store.js b/packages/core/src/Stores/contract-replay-store.js
new file mode 100644
index 000000000000..cf5e474b21ec
--- /dev/null
+++ b/packages/core/src/Stores/contract-replay-store.js
@@ -0,0 +1,293 @@
+import React from 'react';
+import { action, observable } from 'mobx';
+import { routes, isEmptyObject, isForwardStarting, WS, contractCancelled, contractSold } from '@deriv/shared';
+import { Money } from '@deriv/components';
+import { localize } from '@deriv/translations';
+import ContractStore from './contract-store';
+// import { contractCancelled, contractSold } from './Helpers/portfolio-notifications';
+import BaseStore from './base-store';
+
+export default class ContractReplayStore extends BaseStore {
+    @observable chart_state = '';
+    @observable contract_store = { contract_info: {} };
+    // --- Observable properties ---
+    @observable is_market_closed = false;
+    @observable is_sell_requested = false;
+    @observable has_error = false;
+    @observable error_message = '';
+    @observable error_code = '';
+    @observable is_chart_loading = true;
+    @observable is_chart_scaling = false;
+    @observable is_forward_starting = false;
+    // ---- chart props
+    @observable margin;
+
+    // ---- Replay Contract Config ----
+    @observable contract_id;
+    @observable indicative_status;
+    @observable.ref contract_info = observable.object({});
+    @observable is_static_chart = false;
+
+    // ---- Normal properties ---
+    is_ongoing_contract = false;
+    prev_indicative = 0;
+
+    @observable.ref contract_update = observable.object({});
+    // TODO: you view a contract and then share that link with another person,
+    // when the person opens, try to switch account they get the error
+    // Forget old proposal_open_contract stream on account switch from ErrorComponent
+    should_forget_first = false;
+
+    // -------------------
+    // ----- Actions -----
+    // -------------------
+    handleSubscribeProposalOpenContract = async (contract_id, cb) => {
+        // expired contracts are cached and we can get the poc response from local storage
+        const is_cached = await WS.storage.has({ proposal_open_contract: 1, contract_id });
+        if (is_cached) {
+            WS.storage.proposalOpenContract({ contract_id }).then(cb);
+            return;
+        }
+
+        if (this.should_forget_first) {
+            // TODO; don't forget all ever
+            await WS.forgetAll('proposal_open_contract');
+            this.should_forget_first = false;
+        }
+
+        this.subscriber = WS.subscribeProposalOpenContract(contract_id, cb);
+    };
+
+    subscribeProposalOpenContract = () => {
+        WS.wait('authorize').then(() => {
+            this.handleSubscribeProposalOpenContract(this.contract_id, this.populateConfig);
+        });
+    };
+
+    @action.bound
+    onMount(contract_id) {
+        if (contract_id) {
+            this.contract_id = contract_id;
+            this.contract_store = new ContractStore(this.root_store, { contract_id });
+            this.subscribeProposalOpenContract();
+            WS.storage.activeSymbols('brief');
+            WS.setOnReconnect(() => {
+                if (!this.root_store.client.is_switching) {
+                    this.subscribeProposalOpenContract();
+                }
+            });
+        }
+    }
+
+    @action.bound
+    onUnmount() {
+        this.forgetProposalOpenContract(this.contract_id, this.populateConfig);
+        this.contract_id = null;
+        this.is_ongoing_contract = false;
+        this.is_static_chart = false;
+        this.is_chart_loading = true;
+        this.contract_info = {};
+        this.indicative_status = null;
+        this.prev_indicative = 0;
+        this.chart_state = '';
+        this.root_store.ui.toggleHistoryTab(false);
+        WS.removeOnReconnect();
+    }
+
+    @action.bound
+    populateConfig(response) {
+        if (!this.switch_account_listener) return;
+
+        if ('error' in response) {
+            const { code, message } = response.error;
+            this.has_error = true;
+            this.is_chart_loading = false;
+            this.error_message = message;
+            this.error_code = code;
+            return;
+        }
+        if (isEmptyObject(response.proposal_open_contract)) {
+            this.has_error = true;
+            this.error_message = localize(
+                "Sorry, you can't view this contract because it doesn't belong to this account."
+            );
+            this.should_forget_first = true;
+            this.is_chart_loading = false;
+            return;
+        }
+        if (+response.proposal_open_contract.contract_id !== this.contract_id) return;
+
+        this.contract_info = response.proposal_open_contract;
+        this.contract_update = response.proposal_open_contract.limit_order;
+
+        // Add indicative status for contract
+        const prev_indicative = this.prev_indicative;
+        const new_indicative = +this.contract_info.bid_price;
+        if (new_indicative > prev_indicative) {
+            this.indicative_status = 'profit';
+        } else if (new_indicative < prev_indicative) {
+            this.indicative_status = 'loss';
+        } else {
+            this.indicative_status = null;
+        }
+        this.prev_indicative = new_indicative;
+
+        const is_forward_starting =
+            !!this.contract_info.is_forward_starting ||
+            isForwardStarting(this.contract_info.shortcode, this.contract_info.purchase_time);
+
+        this.is_forward_starting = is_forward_starting;
+
+        // update the contract_store here passing contract_info
+        this.contract_store.populateConfig(this.contract_info);
+
+        const end_time = this.contract_store.end_time;
+
+        this.updateMargin((end_time || this.contract_info.date_expiry) - this.contract_info.date_start);
+
+        if (!end_time) this.is_ongoing_contract = true;
+
+        // finish contracts if end_time exists
+        if (end_time) {
+            if (!this.is_ongoing_contract) {
+                this.is_static_chart = true;
+            } else {
+                this.is_static_chart = false;
+            }
+        }
+
+        if (this.contract_info.is_sold) {
+            this.contract_store.cacheProposalOpenContractResponse(response);
+        }
+    }
+
+    @action.bound
+    updateMargin(duration) {
+        const granularity = this.contract_store.contract_config.granularity;
+
+        this.margin = Math.floor(!granularity ? Math.max(300, (30 * duration) / (60 * 60) || 0) : 3 * granularity);
+    }
+
+    @action.bound
+    chartStateChange(state, option) {
+        this.chart_state = state;
+        const market_close_prop = 'isClosed';
+
+        // SmartChart has a weird interaction for getting scale 1:1,
+        // the process of loading an expired contract should follow this,
+        // show loading, first load the chart, then add the endEpoch then request for
+        // scale 1:1 and then wait till chart perform the scale 1:1 then
+        // hide the loading.
+        switch (state) {
+            case 'INITIAL':
+                this.is_chart_scaling = false;
+                // this is for deriv resizing from desktop to mobile,
+                // that show the loading till the chart reflect complete
+                if (!this.is_chart_loading) this.is_chart_loading = true;
+                break;
+            case 'READY':
+                setTimeout(
+                    action(() => (this.is_chart_scaling = true)),
+                    10
+                );
+                break;
+            case 'SCROLL_TO_LEFT':
+                // this Delay is for when the chart try to sacle 1:1 and we want to hide
+                // scale 1:1 jumping from the user
+                setTimeout(
+                    action(() => {
+                        this.is_chart_loading = false;
+                    }),
+                    20
+                );
+                break;
+            case 'MARKET_STATE_CHANGE':
+                if (option && market_close_prop in option) {
+                    this.is_market_closed = option[market_close_prop];
+                }
+                break;
+            default:
+        }
+    }
+
+    @action.bound
+    onClickCancel(contract_id) {
+        if (contract_id) {
+            WS.cancelContract(contract_id).then(response => {
+                if (response.error) {
+                    this.root_store.common.setServicesError({
+                        type: response.msg_type,
+                        ...response.error,
+                    });
+                } else {
+                    this.root_store.notifications.addNotificationMessage(contractCancelled());
+                }
+            });
+        }
+    }
+
+    @action.bound
+    onClickSell(contract_id) {
+        const { bid_price } = this.contract_info;
+        if (contract_id && bid_price) {
+            this.is_sell_requested = true;
+            WS.sell(contract_id, bid_price).then(this.handleSell);
+        }
+    }
+
+    @action.bound
+    handleSell(response) {
+        if (response.error) {
+            // If unable to sell due to error, give error via pop up if not in contract mode
+            this.is_sell_requested = false;
+            this.root_store.common.setServicesError({
+                type: response.msg_type,
+                ...response.error,
+            });
+        } else if (!response.error && response.sell) {
+            this.is_sell_requested = false;
+            // update contract store sell info after sell
+            this.sell_info = {
+                sell_price: response.sell.sold_for,
+                transaction_id: response.sell.transaction_id,
+            };
+            this.root_store.notifications.addNotificationMessage(
+                contractSold(this.root_store.client.currency, response.sell.sold_for, <Money />)
+            );
+        }
+    }
+
+    forgetProposalOpenContract = () => {
+        if (this.subscriber) {
+            this.subscriber.unsubscribe();
+            delete this.subscriber;
+        }
+    };
+
+    @action.bound
+    removeErrorMessage() {
+        this.error_message = '';
+        this.has_error = false;
+    }
+
+    setAccountSwitcherListener = (contract_id, history) => {
+        this.onSwitchAccount(() => this.accountSwitcherListener(contract_id, history));
+    };
+
+    accountSwitcherListener = (contract_id, history) => {
+        // if contract had an error on the previous account
+        // try fetching it again for the new account
+        // in case it belongs to this account
+        if (this.has_error) {
+            this.removeErrorMessage();
+            this.onMount(contract_id);
+        } else {
+            history.push(routes.reports);
+        }
+        return Promise.resolve();
+    };
+
+    removeAccountSwitcherListener = () => {
+        this.disposeSwitchAccount();
+    };
+}
diff --git a/packages/core/src/Stores/contract-store.js b/packages/core/src/Stores/contract-store.js
new file mode 100644
index 000000000000..faabadf4e63f
--- /dev/null
+++ b/packages/core/src/Stores/contract-store.js
@@ -0,0 +1,323 @@
+import { action, extendObservable, observable, toJS } from 'mobx';
+import {
+    isEnded,
+    isEqualObject,
+    isMultiplierContract,
+    isDigitContract,
+    getDigitInfo,
+    getDisplayStatus,
+    WS,
+    createChartMarkers,
+    getChartConfig,
+    getContractUpdateConfig,
+    getEndTime,
+    getValidationRules,
+    BARRIER_COLORS,
+    BARRIER_LINE_STYLES,
+    isBarrierSupported,
+} from '@deriv/shared';
+
+import { setLimitOrderBarriers, getLimitOrder } from './Helpers/limit-orders';
+import { ChartBarrierStore } from './chart-barrier-store';
+
+// import { createChartMarkers } from '@deriv/shared/src/utils/helpers/chart-markers';
+// import { setLimitOrderBarriers, getLimitOrder } from './Helpers/limit-orders';
+// import { getChartConfig, getContractUpdateConfig, getEndTime } from '@deriv/shared/src/utils/helpers/logic';
+// import getValidationRules from './Constants/validation-rules';
+// import { BARRIER_COLORS, BARRIER_LINE_STYLES } from '../SmartChart/Constants/barriers';
+// import { isBarrierSupported } from '../SmartChart/Helpers/barriers';
+// import { ChartBarrierStore } from '../SmartChart/chart-barrier-store';
+import BaseStore from './base-store';
+
+export default class ContractStore extends BaseStore {
+    constructor(root_store, { contract_id }) {
+        super({
+            root_store,
+            validation_rules: getValidationRules(),
+        });
+
+        this.root_store = root_store;
+        this.contract_id = contract_id;
+    }
+
+    // --- Observable properties ---
+    @observable digits_info = observable.object({});
+    @observable sell_info = observable.object({});
+
+    @observable.ref contract_config = {};
+    @observable display_status = 'purchased';
+    @observable is_ended = false;
+    @observable is_digit_contract = false;
+
+    // TODO: see how to handle errors.
+    @observable error_message = '';
+
+    @observable.ref contract_info = observable.object({});
+
+    @observable is_static_chart = false;
+    @observable end_time = null;
+
+    // Multiplier contract update config
+    @observable contract_update_take_profit = '';
+    @observable contract_update_stop_loss = '';
+    @observable has_contract_update_take_profit = false;
+    @observable has_contract_update_stop_loss = false;
+    @observable.ref contract_update_history = [];
+    contract_update_config = {};
+
+    // ---- chart props
+    @observable margin;
+    @observable.shallow barriers_array = [];
+    @observable.shallow markers_array = [];
+    @observable.ref marker = null;
+
+    // ---- Normal properties ---
+    is_ongoing_contract = false;
+
+    @action.bound
+    populateConfig(contract_info) {
+        const prev_contract_info = this.contract_info;
+        this.contract_info = contract_info;
+        this.end_time = getEndTime(this.contract_info);
+
+        // TODO: don't update the barriers & markers if they are not changed
+        this.updateBarriersArray(contract_info, this.root_store.ui.is_dark_mode_on);
+        this.markers_array = createChartMarkers(this.contract_info);
+        this.marker = calculate_marker(this.contract_info);
+
+        this.contract_config = getChartConfig(this.contract_info);
+        this.display_status = getDisplayStatus(this.contract_info);
+        this.is_ended = isEnded(this.contract_info);
+        this.is_digit_contract = isDigitContract(this.contract_info.contract_type);
+        // API doesn't return barrier for digit contracts (sometimes), remove this check once resolved
+        if (!this.contract_info.barrier && prev_contract_info.barrier && this.is_digit_contract) {
+            this.contract_info.barrier = prev_contract_info.barrier;
+        }
+
+        if (this.is_digit_contract) {
+            extendObservable(this.digits_info, getDigitInfo(this.digits_info, this.contract_info));
+        }
+
+        // force to sell the expired contract, in order to remove from portfolio
+        if (+contract_info.is_settleable === 1 && !contract_info.is_sold) {
+            WS.send({ sell_expired: 1 });
+        }
+
+        const is_multiplier = isMultiplierContract(this.contract_info.contract_type);
+
+        if (is_multiplier && contract_info.contract_id && contract_info.limit_order) {
+            this.populateContractUpdateConfig(this.contract_info);
+        }
+    }
+
+    cacheProposalOpenContractResponse = response => {
+        const { contract_id } = response.proposal_open_contract;
+        WS.storage.set({ proposal_open_contract: 1, contract_id }, response);
+    };
+
+    @action.bound
+    populateContractUpdateConfig(response) {
+        const contract_update_config = getContractUpdateConfig(response);
+        if (!isEqualObject(this.contract_update_config, contract_update_config)) {
+            Object.assign(this, contract_update_config);
+            this.contract_update_config = contract_update_config;
+
+            const { contract_update, error } = response;
+            if (contract_update && !error) {
+                this.contract_info.limit_order = Object.assign(this.contract_info.limit_order || {}, contract_update);
+            }
+        }
+    }
+
+    @action.bound
+    populateContractUpdateHistory({ contract_update_history }) {
+        this.root_store.contract_replay.contract_store.contract_update_history = contract_update_history.sort(
+            (a, b) => b.order_date - a.order_date
+        );
+    }
+
+    updateBarriersArray(contract_info, is_dark_mode) {
+        if (!this.barriers_array.length) {
+            this.barriers_array = this.createBarriersArray(contract_info, is_dark_mode);
+            return;
+        }
+
+        const main_barrier = this.barriers_array[0];
+        if (contract_info) {
+            const { contract_type, barrier, high_barrier, low_barrier } = contract_info;
+
+            if (isBarrierSupported(contract_type) && (barrier || high_barrier)) {
+                main_barrier.updateBarriers(barrier || high_barrier, low_barrier);
+                main_barrier.updateBarrierColor(is_dark_mode);
+            }
+            if (
+                contract_info.contract_id &&
+                contract_info.contract_id === this.root_store.contract_replay.contract_id
+            ) {
+                setLimitOrderBarriers({
+                    barriers: this.barriers_array,
+                    contract_info,
+                    contract_type,
+                    is_over: true,
+                });
+            }
+        }
+    }
+
+    createBarriersArray = (contract_info, is_dark_mode) => {
+        let barriers = [];
+        if (contract_info) {
+            const { contract_type, barrier, entry_spot, high_barrier, low_barrier } = contract_info;
+
+            if (isBarrierSupported(contract_type) && (barrier || high_barrier || entry_spot)) {
+                // create barrier only when it's available in response
+                const main_barrier = new ChartBarrierStore(barrier || high_barrier || entry_spot, low_barrier, null, {
+                    color: is_dark_mode ? BARRIER_COLORS.DARK_GRAY : BARRIER_COLORS.GRAY,
+                    line_style: BARRIER_LINE_STYLES.SOLID,
+                    not_draggable: true,
+                });
+
+                main_barrier.updateBarrierShade(true, contract_type);
+                barriers = [main_barrier];
+            }
+        }
+        return barriers;
+    };
+
+    @action.bound
+    clearContractUpdateConfigValues() {
+        Object.assign(this, getContractUpdateConfig(this.contract_info));
+        this.validation_errors.contract_update_stop_loss = [];
+        this.validation_errors.contract_update_take_profit = [];
+    }
+
+    @action.bound
+    onChange({ name, value }) {
+        this[name] = value;
+        this.validateProperty(name, this[name]);
+    }
+
+    @action.bound
+    updateLimitOrder() {
+        const limit_order = getLimitOrder(this);
+
+        WS.contractUpdate(this.contract_id, limit_order).then(response => {
+            if (response.error) {
+                this.root_store.common.setServicesError({
+                    type: response.msg_type,
+                    ...response.error,
+                });
+                return;
+            }
+
+            // Update contract store
+            this.populateContractUpdateConfig(response);
+            if (this.root_store.ui.is_history_tab_active) {
+                WS.contractUpdateHistory(this.contract_id).then(this.populateContractUpdateHistory);
+            }
+
+            // Update portfolio store
+            this.root_store.portfolio.populateContractUpdate(response, this.contract_id);
+        });
+    }
+}
+
+function calculate_marker(contract_info) {
+    if (!contract_info || isMultiplierContract(contract_info.contract_type)) {
+        return null;
+    }
+    const {
+        transaction_ids,
+        tick_stream,
+        contract_id,
+        date_start,
+        date_expiry,
+        entry_tick,
+        exit_tick,
+        entry_tick_time,
+        exit_tick_time,
+        contract_type,
+        tick_count,
+        barrier_count,
+        barrier,
+        high_barrier,
+        low_barrier,
+    } = contract_info;
+    const ticks_epoch_array = tick_stream ? tick_stream.map(t => t.epoch) : [];
+    const is_digit_contract = isDigitContract(contract_type);
+
+    // window.ci = toJS(contract_info);
+
+    let price_array = [];
+    if (is_digit_contract) {
+        price_array = [];
+    } else if (+barrier_count === 1 && barrier) {
+        price_array = [+barrier];
+    } else if (+barrier_count === 2 && high_barrier && low_barrier) {
+        price_array = [+low_barrier, +high_barrier];
+    }
+
+    if (entry_tick) {
+        price_array.push(entry_tick);
+    }
+    if (exit_tick) {
+        price_array.push(exit_tick);
+    }
+
+    if (!date_start) {
+        return null;
+    }
+    // if we have not yet received the first POC response
+    if (!transaction_ids) {
+        const type = is_digit_contract ? 'DigitContract' : 'TickContract';
+        return {
+            type,
+            contract_info: toJS(contract_info),
+            key: `${contract_id}-date_start`,
+            epoch_array: [date_start],
+            price_array,
+        };
+    }
+
+    if (tick_count >= 1) {
+        if (!isDigitContract(contract_type)) {
+            // TickContract
+            return {
+                contract_info: toJS(contract_info),
+                type: 'TickContract',
+                key: `${contract_id}-date_start`,
+                epoch_array: [date_start, ...ticks_epoch_array],
+                price_array,
+            };
+        }
+        // DigitContract
+        return {
+            contract_info: toJS(contract_info),
+            type: 'DigitContract',
+            key: `${contract_id}-date_start`,
+            epoch_array: [date_start, ...ticks_epoch_array],
+            price_array,
+        };
+    }
+    // NonTickContract
+    if (!tick_count) {
+        // getEndTime returns undefined when contract is running.
+        const end_time = getEndTime(contract_info) || date_expiry;
+        // the order of items in epoch_array matches the NonTickContract params.
+        const epoch_array = [date_start, end_time];
+        if (entry_tick_time) {
+            epoch_array.push(entry_tick_time);
+        }
+        if (exit_tick_time) {
+            epoch_array.push(exit_tick_time);
+        }
+        return {
+            contract_info: toJS(contract_info),
+            type: 'NonTickContract',
+            key: `${contract_id}-date_start`,
+            epoch_array,
+            price_array,
+        };
+    }
+    return null;
+}
diff --git a/packages/core/src/Stores/contract-trade-store.js b/packages/core/src/Stores/contract-trade-store.js
new file mode 100644
index 000000000000..6ca241ab26f9
--- /dev/null
+++ b/packages/core/src/Stores/contract-trade-store.js
@@ -0,0 +1,203 @@
+import { action, computed, observable, toJS } from 'mobx';
+import {
+    isDesktop,
+    isEnded,
+    isMultiplierContract,
+    LocalStore,
+    switch_to_tick_chart,
+    isCallPut,
+    getContractTypesConfig,
+} from '@deriv/shared';
+// import { switch_to_tick_chart } from './Helpers/chart-notifications';
+import ContractStore from './contract-store';
+// import { isCallPut } from './Helpers/contract-type';
+// import { getContractTypesConfig } from '../Trading/Constants/contract';
+import BaseStore from './base-store';
+
+export default class ContractTradeStore extends BaseStore {
+    // --- Observable properties ---
+    @observable.shallow contracts = [];
+    contracts_map = {};
+    @observable has_error = false;
+    @observable error_message = '';
+
+    // Chart specific observables
+    @observable granularity = +LocalStore.get('contract_trade.granularity') || 0;
+    @observable chart_type = LocalStore.get('contract_trade.chart_type') || 'mountain';
+
+    constructor({ root_store }) {
+        super({
+            root_store,
+        });
+
+        this.onSwitchAccount(this.accountSwitchListener);
+    }
+
+    // -------------------
+    // ----- Actions -----
+    // -------------------
+
+    @action.bound
+    updateChartType(type) {
+        LocalStore.set('contract_trade.chart_type', type);
+        this.chart_type = type;
+    }
+
+    @action.bound
+    updateGranularity(granularity) {
+        const tick_chart_types = ['mountain', 'line', 'colored_line', 'spline', 'baseline'];
+        if (granularity === 0 && tick_chart_types.indexOf(this.chart_type) === -1) {
+            this.chart_type = 'mountain';
+        }
+        LocalStore.set('contract_trade.granularity', granularity);
+        this.granularity = granularity;
+        if (this.granularity === 0) {
+            this.root_store.notifications.removeNotificationMessage(switch_to_tick_chart);
+        }
+    }
+
+    applicable_contracts = () => {
+        const { symbol: underlying, contract_type: trade_type } = this.root_store.modules.trade;
+        if (!trade_type || !underlying) {
+            return [];
+        }
+        let { trade_types } = getContractTypesConfig()[trade_type];
+        const is_call_put = isCallPut(trade_type);
+        if (is_call_put) {
+            // treat CALLE/PUTE and CALL/PUT the same
+            trade_types = ['CALLE', 'PUTE', 'CALL', 'PUT'];
+        }
+        return this.contracts
+            .filter(c => c.contract_info.underlying === underlying)
+            .filter(c => {
+                const info = c.contract_info;
+                const has_multiplier_contract_ended =
+                    isMultiplierContract(info.contract_type) && isEnded(c.contract_info);
+                // filter multiplier contract which has ended
+                return !has_multiplier_contract_ended;
+            })
+            .filter(c => {
+                const info = c.contract_info;
+
+                const trade_type_is_supported = trade_types.indexOf(info.contract_type) !== -1;
+                // both high_low & rise_fall have the same contract_types in POC response
+                // entry_spot=barrier means it is rise_fall contract (blame the api)
+                if (trade_type_is_supported && info.barrier && info.entry_tick && is_call_put) {
+                    if (`${+info.entry_tick}` === `${+info.barrier}`) {
+                        return trade_type === 'rise_fall' || trade_type === 'rise_fall_equal';
+                    }
+                    return trade_type === 'high_low';
+                }
+                return trade_type_is_supported;
+            });
+    };
+
+    @computed
+    get markers_array() {
+        const markers = this.applicable_contracts()
+            .map(c => c.marker)
+            .filter(m => m)
+            .map(m => toJS(m));
+        if (markers.length) {
+            markers[markers.length - 1].is_last_contract = true;
+        }
+        return markers;
+    }
+
+    @action.bound
+    addContract({
+        barrier,
+        contract_id,
+        contract_type,
+        start_time,
+        longcode,
+        underlying,
+        is_tick_contract,
+        limit_order = {},
+    }) {
+        const contract_exists = this.contracts_map[contract_id];
+        if (contract_exists) {
+            return;
+        }
+
+        const contract = new ContractStore(this.root_store, { contract_id });
+        contract.populateConfig({
+            date_start: start_time,
+            barrier,
+            contract_type,
+            longcode,
+            underlying,
+            limit_order,
+        });
+
+        this.contracts.push(contract);
+        this.contracts_map[contract_id] = contract;
+
+        if (is_tick_contract && !this.root_store.modules.trade.is_multiplier && this.granularity !== 0 && isDesktop()) {
+            this.root_store.notifications.addNotificationMessage(switch_to_tick_chart);
+        }
+    }
+
+    @action.bound
+    removeContract({ contract_id }) {
+        this.contracts = this.contracts.filter(c => c.contract_id !== contract_id);
+        delete this.contracts_map[contract_id];
+    }
+
+    @action.bound
+    accountSwitchListener() {
+        if (this.has_error) {
+            this.clearError();
+        }
+
+        return Promise.resolve();
+    }
+
+    @action.bound
+    onUnmount() {
+        this.disposeSwitchAccount();
+        // TODO: don't forget the tick history when switching to contract-replay-store
+    }
+
+    // Called from portfolio
+    @action.bound
+    updateProposal(response) {
+        if ('error' in response) {
+            this.has_error = true;
+            this.error_message = response.error.message;
+            return;
+        }
+        // Update the contract-store corresponding to this POC
+        if (response.proposal_open_contract) {
+            const contract_id = +response.proposal_open_contract.contract_id;
+            const contract = this.contracts_map[contract_id];
+            contract.populateConfig(response.proposal_open_contract);
+            if (response.proposal_open_contract.is_sold) {
+                this.root_store.notifications.removeNotificationMessage(switch_to_tick_chart);
+                contract.cacheProposalOpenContractResponse(response);
+            }
+        }
+    }
+
+    @computed
+    get last_contract() {
+        const applicable_contracts = this.applicable_contracts();
+        const length = applicable_contracts.length;
+        return length > 0 ? applicable_contracts[length - 1] : {};
+    }
+
+    @action.bound
+    clearError() {
+        this.error_message = '';
+        this.has_error = false;
+    }
+
+    @action.bound
+    getContractById(contract_id) {
+        return (
+            this.contracts_map[contract_id] ||
+            // or get contract from contract_replay store when user is on the contract details page
+            this.root_store.contract_replay.contract_store
+        );
+    }
+}
diff --git a/packages/core/src/Stores/index.js b/packages/core/src/Stores/index.js
index 6c9cb40281a6..d10c01f10fae 100644
--- a/packages/core/src/Stores/index.js
+++ b/packages/core/src/Stores/index.js
@@ -7,6 +7,11 @@ import ModulesStore from './Modules';
 import MenuStore from './menu-store';
 import NotificationStore from './notification-store';
 import UIStore from './ui-store';
+import ActiveSymbolsStore from './active-symbols-store';
+import PortfolioStore from './portfolio';
+import ContractReplayStore from './contract-replay-store';
+import ContractTradeStore from './contract-trade-store';
+import { ChartBarrierStore } from './chart-barrier-store';
 
 export default class RootStore {
     constructor() {
@@ -19,5 +24,10 @@ export default class RootStore {
         this.menu = new MenuStore(this);
         this.pushwoosh = new PushWooshStore(this);
         this.notifications = new NotificationStore(this);
+        this.active_symbols = new ActiveSymbolsStore(this);
+        this.portfolio = new PortfolioStore(this);
+        this.contract_replay = new ContractReplayStore(this);
+        this.contract_trade = new ContractTradeStore(this);
+        this.chart_barrier_store = new ChartBarrierStore(this);
     }
 }
diff --git a/packages/core/src/Stores/portfolio.js b/packages/core/src/Stores/portfolio.js
new file mode 100644
index 000000000000..b695c92466c2
--- /dev/null
+++ b/packages/core/src/Stores/portfolio.js
@@ -0,0 +1,501 @@
+import React from 'react';
+import throttle from 'lodash.throttle';
+import { action, computed, observable, reaction } from 'mobx';
+import { createTransformer } from 'mobx-utils';
+import {
+    isEmptyObject,
+    isEnded,
+    isUserSold,
+    isValidToSell,
+    isMultiplierContract,
+    getCurrentTick,
+    getDisplayStatus,
+    WS,
+    formatPortfolioPosition,
+    contractCancelled,
+    contractSold,
+    getDurationPeriod,
+    getDurationTime,
+    getDurationUnitText,
+    getEndTime,
+} from '@deriv/shared';
+import { Money } from '@deriv/components';
+
+// import { formatPortfolioPosition } from './Helpers/format-response';
+// import { contractCancelled, contractSold } from './Helpers/portfolio-notifications';
+// import { getDurationPeriod, getDurationTime, getDurationUnitText } from './Helpers/details';
+// import { getEndTime } from '../Contract/Helpers/logic';
+
+import BaseStore from './base-store';
+
+export default class PortfolioStore extends BaseStore {
+    @observable.shallow positions = [];
+    @observable.shallow all_positions = [];
+    positions_map = {};
+    @observable is_loading = false;
+    @observable error = '';
+    getPositionById = createTransformer(id => this.positions.find(position => +position.id === +id));
+
+    responseQueue = [];
+
+    @observable.shallow active_positions = [];
+
+    @action.bound
+    async initializePortfolio() {
+        if (this.has_subscribed_to_poc_and_transaction) {
+            this.clearTable();
+        }
+        this.is_loading = true;
+        await WS.wait('authorize');
+        WS.portfolio().then(this.portfolioHandler);
+        WS.subscribeProposalOpenContract(null, this.proposalOpenContractQueueHandler);
+        WS.subscribeTransaction(this.transactionHandler);
+        this.has_subscribed_to_poc_and_transaction = true;
+    }
+
+    @action.bound
+    clearTable() {
+        this.positions = [];
+        this.positions_map = {};
+        this.is_loading = false;
+        this.error = '';
+        this.updatePositions();
+        if (this.has_subscribed_to_poc_and_transaction) {
+            WS.forgetAll('proposal_open_contract', 'transaction');
+        }
+        this.has_subscribed_to_poc_and_transaction = false;
+    }
+
+    @action.bound
+    portfolioHandler(response) {
+        this.is_loading = false;
+        if ('error' in response) {
+            this.error = response.error.message;
+            return;
+        }
+        this.error = '';
+        if (response.portfolio.contracts) {
+            this.positions = response.portfolio.contracts
+                .map(pos => formatPortfolioPosition(pos, this.root_store.active_symbols.active_symbols))
+                .sort((pos1, pos2) => pos2.reference - pos1.reference); // new contracts first
+
+            this.positions.forEach(p => {
+                this.positions_map[p.id] = p;
+            });
+            this.updatePositions();
+        }
+    }
+
+    @action.bound
+    onBuyResponse({ contract_id, longcode, contract_type }) {
+        const new_pos = {
+            contract_id,
+            longcode,
+            contract_type,
+        };
+        this.pushNewPosition(new_pos);
+    }
+
+    @action.bound
+    async transactionHandler(response) {
+        if ('error' in response) {
+            this.error = response.error.message;
+        }
+        if (!response.transaction) return;
+        const { contract_id, action: act, longcode } = response.transaction;
+
+        if (act === 'buy') {
+            this.onBuyResponse({
+                contract_id,
+                longcode,
+                contract_type: '', // TODO: figure out the icon not showing
+            });
+        } else if (act === 'sell') {
+            const i = this.getPositionIndexById(contract_id);
+
+            if (!this.positions[i]) {
+                // On a page refresh, portfolio call has returend empty,
+                // even though we we get a transaction.sell response.
+                return;
+            }
+            this.positions[i].is_loading = true;
+
+            // Sometimes when we sell a contract, we don't get `proposal_open_contract` message with exit information and status as `sold`.
+            // This is to make sure that we get `proposal_open_contract` message with exit information and status as `sold`.
+            const subscriber = WS.subscribeProposalOpenContract(contract_id, poc => {
+                if (poc.error) {
+                    // Settles the contract based on transaction response when POC response is throwing error.
+                    this.populateResultDetailsFromTransaction(response);
+                } else {
+                    this.updateContractTradeStore(poc);
+                    this.updateContractReplayStore(poc);
+                    this.populateResultDetails(poc);
+                }
+                subscriber.unsubscribe();
+            });
+        }
+    }
+
+    deepClone = obj => JSON.parse(JSON.stringify(obj));
+    updateContractTradeStore(response) {
+        const contract_trade = this.root_store.contract_trade;
+        const has_poc = !isEmptyObject(response.proposal_open_contract);
+        const has_error = !!response.error;
+        if (!has_poc && !has_error) return;
+        if (has_poc) {
+            contract_trade.addContract(this.deepClone(response.proposal_open_contract));
+            contract_trade.updateProposal(this.deepClone(response));
+        }
+    }
+
+    updateContractReplayStore(response) {
+        const contract_replay = this.root_store.contract_replay;
+        if (contract_replay.contract_id === response.proposal_open_contract?.contract_id) {
+            contract_replay.populateConfig(response);
+        }
+    }
+
+    updateTradeStore(is_over, portfolio_position, is_limit_order_update) {
+        const trade = this.root_store.modules.trade;
+        if (!is_limit_order_update) {
+            trade.setPurchaseSpotBarrier(is_over, portfolio_position);
+        }
+        trade.updateLimitOrderBarriers(is_over, portfolio_position);
+    }
+
+    proposalOpenContractQueueHandler = response => {
+        this.responseQueue.push(response);
+        this.throttledUpdatePositions();
+    };
+
+    @action.bound
+    proposalOpenContractHandler(response) {
+        if ('error' in response) {
+            this.updateContractTradeStore(response);
+            this.updateContractReplayStore(response);
+            return;
+        }
+
+        const proposal = response.proposal_open_contract;
+        const portfolio_position = this.positions_map[proposal.contract_id];
+
+        if (!portfolio_position) return;
+        this.updateContractTradeStore(response);
+        this.updateContractReplayStore(response);
+
+        const formatted_position = formatPortfolioPosition(
+            proposal,
+            this.root_store.active_symbols.active_symbols,
+            portfolio_position.indicative
+        );
+        Object.assign(portfolio_position, formatted_position);
+
+        const prev_indicative = portfolio_position.indicative;
+        const new_indicative = +proposal.bid_price;
+        const profit_loss = +proposal.profit;
+
+        // fix for missing barrier and entry_spot in proposal_open_contract API response, only re-assign if valid
+        if (proposal.barrier) portfolio_position.barrier = +proposal.barrier;
+        if (proposal.entry_spot) portfolio_position.entry_spot = +proposal.entry_spot;
+
+        // store contract proposal details that require modifiers
+        portfolio_position.indicative = new_indicative;
+        portfolio_position.profit_loss = profit_loss;
+        portfolio_position.is_valid_to_sell = isValidToSell(proposal);
+
+        // store contract proposal details that do not require modifiers
+        portfolio_position.contract_info = proposal;
+
+        // for tick contracts
+        if (proposal.tick_count) {
+            const current_tick =
+                portfolio_position.current_tick > getCurrentTick(proposal)
+                    ? portfolio_position.current_tick
+                    : getCurrentTick(proposal);
+            portfolio_position.current_tick = current_tick;
+        }
+
+        if (new_indicative > prev_indicative) {
+            portfolio_position.status = 'profit';
+        } else if (new_indicative < prev_indicative) {
+            portfolio_position.status = 'loss';
+        } else {
+            portfolio_position.status = null;
+        }
+
+        if (this.hovered_position_id === portfolio_position.id) {
+            if (portfolio_position.contract_info.is_sold === 1) {
+                this.updateTradeStore(false, portfolio_position);
+            } else {
+                this.updateTradeStore(true, portfolio_position, true);
+            }
+        }
+
+        if (portfolio_position.contract_info.is_sold === 1) {
+            this.populateResultDetails(response);
+        }
+    }
+
+    @action.bound
+    onClickCancel(contract_id) {
+        const i = this.getPositionIndexById(contract_id);
+        if (this.positions[i].is_sell_requested) return;
+
+        this.positions[i].is_sell_requested = true;
+        if (contract_id) {
+            WS.cancelContract(contract_id).then(response => {
+                if (response.error) {
+                    this.root_store.common.setServicesError({
+                        type: response.msg_type,
+                        ...response.error,
+                    });
+                } else {
+                    this.root_store.notifications.addNotificationMessage(contractCancelled());
+                }
+            });
+        }
+    }
+
+    @action.bound
+    onClickSell(contract_id) {
+        const i = this.getPositionIndexById(contract_id);
+        if (this.positions[i].is_sell_requested) return;
+
+        const { bid_price } = this.positions[i].contract_info;
+        this.positions[i].is_sell_requested = true;
+        if (contract_id && typeof bid_price === 'number') {
+            WS.sell(contract_id, bid_price).then(this.handleSell);
+        }
+    }
+
+    @action.bound
+    handleSell(response) {
+        if (response.error) {
+            // If unable to sell due to error, give error via pop up if not in contract mode
+            const i = this.getPositionIndexById(response.echo_req.sell);
+            this.positions[i].is_sell_requested = false;
+
+            // invalidToken error will handle in socket-general.js
+            if (response.error.code !== 'InvalidToken') {
+                this.root_store.common.setServicesError({
+                    type: response.msg_type,
+                    ...response.error,
+                });
+            }
+        } else if (!response.error && response.sell) {
+            // update contract store sell info after sell
+            this.root_store.contract_trade.sell_info = {
+                sell_price: response.sell.sold_for,
+                transaction_id: response.sell.transaction_id,
+            };
+            this.root_store.notifications.addNotificationMessage(
+                contractSold(this.root_store.client.currency, response.sell.sold_for, <Money />)
+            );
+        }
+    }
+
+    @action.bound
+    populateResultDetailsFromTransaction = response => {
+        const transaction_response = response.transaction;
+        const { contract_id, amount } = transaction_response;
+        const i = this.getPositionIndexById(contract_id);
+        const position = this.positions[i];
+
+        if (!position) {
+            return;
+        }
+        const contract_info = { ...position.contract_info, is_sold: 1, is_expired: 1, status: 'complete' };
+
+        position.contract_info = contract_info;
+        position.is_valid_to_sell = false;
+        position.result = amount > contract_info.buy_price ? 'won' : 'lost';
+        position.status = 'complete';
+        position.is_sold = 1;
+        position.is_loading = false;
+
+        contract_info.exit_tick_time = contract_info.date_expiry;
+        contract_info.sell_price = String(amount);
+        contract_info.profit = amount - contract_info.buy_price;
+
+        this.updatePositions();
+    };
+
+    @action.bound
+    populateResultDetails = response => {
+        const contract_response = response.proposal_open_contract;
+        const i = this.getPositionIndexById(contract_response.contract_id);
+
+        if (!this.positions[i]) {
+            return;
+        }
+
+        this.positions[i].contract_info = contract_response;
+        this.positions[i].duration = getDurationTime(contract_response);
+        this.positions[i].duration_unit = getDurationUnitText(getDurationPeriod(contract_response));
+        this.positions[i].exit_spot = contract_response.exit_tick || contract_response.current_spot; // workaround if no exit_tick in proposal_open_contract, use latest spot
+        this.positions[i].is_valid_to_sell = isValidToSell(contract_response);
+        this.positions[i].result = getDisplayStatus(contract_response);
+        this.positions[i].profit_loss = +contract_response.profit;
+        this.positions[i].sell_time = getEndTime(contract_response) || contract_response.current_spot_time; // same as exit_spot, use latest spot time if no exit_tick_time
+        this.positions[i].sell_price = contract_response.sell_price;
+        this.positions[i].status = 'complete';
+
+        // fix for missing barrier and entry_spot
+        if (!this.positions[i].contract_info.barrier || !this.positions[i].contract_info.entry_spot) {
+            this.positions[i].contract_info.barrier = this.positions[i].barrier;
+            this.positions[i].contract_info.entry_spot = this.positions[i].entry_spot;
+        }
+
+        // remove exit_spot for manually sold contracts
+        if (isUserSold(contract_response)) this.positions[i].exit_spot = '-';
+
+        this.positions[i].is_loading = false;
+    };
+
+    @action.bound
+    populateContractUpdate({ contract_update }, contract_id) {
+        const position = this.getPositionById(contract_id);
+        if (position) {
+            Object.assign(position.contract_update || {}, contract_update);
+            this.updatePositions();
+        }
+    }
+
+    @action.bound
+    pushNewPosition(new_pos) {
+        const position = formatPortfolioPosition(new_pos, this.root_store.active_symbols.active_symbols);
+        if (this.positions_map[position.id]) return;
+
+        this.positions.unshift(position);
+        this.positions_map[position.id] = position;
+        this.updatePositions();
+    }
+
+    @action.bound
+    removePositionById(contract_id) {
+        const contract_idx = this.getPositionIndexById(contract_id);
+
+        this.positions.splice(contract_idx, 1);
+        delete this.positions_map[contract_id];
+        this.updatePositions();
+        this.root_store.contract_trade.removeContract({ contract_id });
+    }
+
+    async accountSwitcherListener() {
+        await this.initializePortfolio();
+        return Promise.resolve();
+    }
+
+    @action.bound
+    onHoverPosition(is_over, position) {
+        const { symbol: underlying } = this.root_store.active_symbols;
+        if (
+            position.contract_info.underlying !== underlying ||
+            isEnded(position.contract_info) ||
+            !isMultiplierContract(position.type)
+        ) {
+            return;
+        }
+
+        this.hovered_position_id = is_over ? position.id : null;
+        this.updateTradeStore(is_over, position);
+    }
+
+    preSwitchAccountListener() {
+        this.clearTable();
+        return Promise.resolve();
+    }
+
+    @action.bound
+    logoutListener() {
+        this.clearTable();
+        return Promise.resolve();
+    }
+
+    @action.bound
+    networkStatusChangeListener(is_online) {
+        this.is_loading = !is_online;
+    }
+
+    @action.bound
+    onMount() {
+        this.onPreSwitchAccount(this.preSwitchAccountListener);
+        this.onSwitchAccount(this.accountSwitcherListener);
+        this.onNetworkStatusChange(this.networkStatusChangeListener);
+        this.onLogout(this.logoutListener);
+        if (this.positions.length === 0 && !this.has_subscribed_to_poc_and_transaction) {
+            // TODO: Optimise the way is_logged_in changes are detected for "logging in" and "already logged on" states
+            if (this.root_store.client.is_logged_in) {
+                this.initializePortfolio();
+            } else {
+                reaction(
+                    () => this.root_store.client.is_logged_in,
+                    () => {
+                        if (this.root_store.client.is_logged_in) {
+                            this.initializePortfolio();
+                        }
+                    }
+                );
+            }
+        }
+    }
+
+    @action.bound
+    onUnmount() {
+        this.disposePreSwitchAccount();
+        this.disposeSwitchAccount();
+        this.disposeLogout();
+        this.clearTable();
+    }
+
+    getPositionIndexById(contract_id) {
+        return this.positions.findIndex(pos => +pos.id === +contract_id);
+    }
+
+    @computed
+    get totals() {
+        let indicative = 0;
+        let payout = 0;
+        let purchase = 0;
+
+        this.positions.forEach(portfolio_pos => {
+            indicative += +portfolio_pos.indicative;
+            payout += +portfolio_pos.payout;
+            purchase += +portfolio_pos.purchase;
+        });
+        return {
+            indicative,
+            payout,
+            purchase,
+        };
+    }
+
+    @action.bound
+    setActivePositions() {
+        this.active_positions = this.positions.filter(portfolio_pos => !getEndTime(portfolio_pos.contract_info));
+        this.all_positions = [...this.positions];
+    }
+
+    updatePositions = () => {
+        this.responseQueue.forEach(res => this.proposalOpenContractHandler(res));
+        this.responseQueue = [];
+        this.setActivePositions();
+    };
+
+    throttledUpdatePositions = throttle(this.updatePositions, 500);
+
+    @computed
+    get is_active_empty() {
+        return !this.is_loading && this.active_positions.length === 0;
+    }
+
+    @computed
+    get active_positions_count() {
+        return this.active_positions.length || 0;
+    }
+
+    @computed
+    get is_empty() {
+        return !this.is_loading && this.all_positions.length === 0;
+    }
+}
diff --git a/packages/reports/src/Stores/Modules/Trading/trade-store.js b/packages/reports/src/Stores/Modules/Trading/trade-store.js
index 19a6c51d2237..91f105b5295f 100644
--- a/packages/reports/src/Stores/Modules/Trading/trade-store.js
+++ b/packages/reports/src/Stores/Modules/Trading/trade-store.js
@@ -33,7 +33,7 @@ import { processTradeParams } from './Helpers/process';
 import { createProposalRequests, getProposalErrorField, getProposalInfo } from './Helpers/proposal';
 import { getBarrierPipSize } from './Helpers/barrier';
 import { setLimitOrderBarriers } from '../Contract/Helpers/limit-orders';
-import { ChartBarrierStore } from '../SmartChart/chart-barrier-store';
+// import { ChartBarrierStore } from '../SmartChart/chart-barrier-store';
 import { BARRIER_COLORS } from '../SmartChart/Constants/barriers';
 import { isBarrierSupported, removeBarrier } from '../SmartChart/Helpers/barriers';
 import BaseStore from 'Stores/base-store';
@@ -261,7 +261,7 @@ export default class TradeStore extends BaseStore {
 
     @action.bound
     clearContracts = () => {
-        this.root_store.modules.contract_trade.contracts = [];
+        this.root_store.contract_trade.contracts = [];
     };
 
     @action.bound
@@ -514,6 +514,7 @@ export default class TradeStore extends BaseStore {
                 });
             }
         } else {
+            const ChartBarrierStore = this.root_store.chart_barrier_store;
             purchase_spot_barrier = new ChartBarrierStore(position.contract_info.entry_spot);
             purchase_spot_barrier.key = key;
             purchase_spot_barrier.draggable = false;
@@ -571,6 +572,7 @@ export default class TradeStore extends BaseStore {
         if (isBarrierSupported(contract_type)) {
             const color = this.root_store.ui.is_dark_mode_on ? BARRIER_COLORS.DARK_GRAY : BARRIER_COLORS.GRAY;
             // create barrier only when it's available in response
+            const ChartBarrierStore = this.root_store.chart_barrier_store;
             this.main_barrier = new ChartBarrierStore(barrier || high_barrier, low_barrier, this.onChartBarrierChange, {
                 color,
             });
@@ -634,7 +636,7 @@ export default class TradeStore extends BaseStore {
                             const { category, underlying } = extractInfoFromShortcode(shortcode);
                             const is_digit_contract = isDigitContractType(category.toUpperCase());
                             const contract_type = category.toUpperCase();
-                            this.root_store.modules.contract_trade.addContract({
+                            this.root_store.contract_trade.addContract({
                                 contract_id,
                                 start_time,
                                 longcode,
@@ -643,7 +645,7 @@ export default class TradeStore extends BaseStore {
                                 contract_type,
                                 is_tick_contract,
                             });
-                            this.root_store.modules.portfolio.onBuyResponse({
+                            this.root_store.portfolio.onBuyResponse({
                                 contract_id,
                                 longcode,
                                 contract_type,
diff --git a/packages/reports/src/Stores/Modules/index.js b/packages/reports/src/Stores/Modules/index.js
index 76496ff00bb2..e9b90ac4c840 100644
--- a/packages/reports/src/Stores/Modules/index.js
+++ b/packages/reports/src/Stores/Modules/index.js
@@ -1,15 +1,15 @@
-import ContractReplayStore from './Contract/contract-replay-store';
-import ContractTradeStore from './Contract/contract-trade-store';
-import PortfolioStore from './Portfolio/portfolio-store';
+// import ContractReplayStore from './Contract/contract-replay-store';
+// import ContractTradeStore from './Contract/contract-trade-store';
+// import PortfolioStore from './Portfolio/portfolio-store';
 import ProfitTableStore from './Profit/profit-store';
 import StatementStore from './Statement/statement-store';
 import TradeStore from './Trading/trade-store';
 
 export default class ModulesStore {
     constructor(root_store) {
-        this.contract_replay = new ContractReplayStore({ root_store });
-        this.contract_trade = new ContractTradeStore({ root_store });
-        this.portfolio = new PortfolioStore({ root_store });
+        // this.contract_replay = new ContractReplayStore({ root_store });
+        // this.contract_trade = new ContractTradeStore({ root_store });
+        // this.portfolio = new PortfolioStore({ root_store });
         this.profit_table = new ProfitTableStore({ root_store });
         this.statement = new StatementStore({ root_store });
         this.trade = new TradeStore({ root_store });
diff --git a/packages/reports/src/Stores/index.js b/packages/reports/src/Stores/index.js
index fef448cd42cb..c58801e8021c 100644
--- a/packages/reports/src/Stores/index.js
+++ b/packages/reports/src/Stores/index.js
@@ -10,5 +10,9 @@ export default class RootStore {
         this.rudderstack = core_store.rudderstack;
         this.pushwoosh = core_store.pushwoosh;
         this.notifications = core_store.notifications;
+        this.contract_replay = core_store.contract_replay;
+        this.contract_trade = core_store.contract_trade;
+        this.portfolio = core_store.portfolio;
+        this.chart_barrier_store = core_store.chart_barrier_store;
     }
 }
diff --git a/packages/shared/package.json b/packages/shared/package.json
index a6629244c835..414b9f68240a 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -37,9 +37,11 @@
     "moment": "^2.24.0"
   },
   "dependencies": {
+    "@deriv/translations": "^1.0.0",
     "canvas-toBlob": "^1.0.0",
     "extend": "^3.0.2",
     "js-cookie": "^2.2.1",
+    "mobx": "^5.15.7",
     "moment": "^2.24.0",
     "object.fromentries": "^2.0.0",
     "react": "^16.14.0",
diff --git a/packages/shared/src/index.js b/packages/shared/src/index.js
index 2798fec98f18..26da6f9de8c4 100644
--- a/packages/shared/src/index.js
+++ b/packages/shared/src/index.js
@@ -24,3 +24,5 @@ export * from './utils/string';
 export * from './utils/url';
 export * from './utils/validation';
 export * from './services';
+export * from './utils/helpers';
+export * from './utils/constants';
diff --git a/packages/shared/src/services/server-time.js b/packages/shared/src/services/server-time.js
new file mode 100644
index 000000000000..0b6987e55e0d
--- /dev/null
+++ b/packages/shared/src/services/server-time.js
@@ -0,0 +1,32 @@
+class PromiseClass {
+    constructor() {
+        this.promise = new Promise((resolve, reject) => {
+            this.reject = reject;
+            this.resolve = resolve;
+        });
+    }
+}
+
+const ServerTime = (() => {
+    let clock_started = false;
+    const pending = new PromiseClass();
+    let common_store;
+
+    const init = store => {
+        if (!clock_started) {
+            common_store = store;
+            pending.resolve(common_store.server_time);
+            clock_started = true;
+        }
+    };
+
+    const get = () => (clock_started && common_store.server_time ? common_store.server_time.clone() : undefined);
+
+    return {
+        init,
+        get,
+        timePromise: () => (clock_started ? Promise.resolve(common_store.server_time) : pending.promise),
+    };
+})();
+
+module.exports = ServerTime;
diff --git a/packages/shared/src/utils/constants/barriers.js b/packages/shared/src/utils/constants/barriers.js
new file mode 100644
index 000000000000..353ef635b148
--- /dev/null
+++ b/packages/shared/src/utils/constants/barriers.js
@@ -0,0 +1,36 @@
+export const CONTRACT_SHADES = {
+    CALL: 'ABOVE',
+    PUT: 'BELOW',
+    CALLE: 'ABOVE',
+    PUTE: 'BELOW',
+    EXPIRYRANGE: 'BETWEEN',
+    EXPIRYMISS: 'OUTSIDE',
+    RANGE: 'BETWEEN',
+    UPORDOWN: 'OUTSIDE',
+    ONETOUCH: 'NONE_SINGLE', // no shade
+    NOTOUCH: 'NONE_SINGLE', // no shade
+    ASIANU: 'ABOVE',
+    ASIAND: 'BELOW',
+    MULTUP: 'ABOVE',
+    MULTDOWN: 'BELOW',
+};
+
+// Default non-shade according to number of barriers
+export const DEFAULT_SHADES = {
+    1: 'NONE_SINGLE',
+    2: 'NONE_DOUBLE',
+};
+
+export const BARRIER_COLORS = {
+    GREEN: '#4bb4b3',
+    RED: '#ec3f3f',
+    ORANGE: '#ff6444',
+    GRAY: '#999999',
+    DARK_GRAY: '#6E6E6E',
+};
+
+export const BARRIER_LINE_STYLES = {
+    DASHED: 'dashed',
+    DOTTED: 'dotted',
+    SOLID: 'solid',
+};
diff --git a/packages/shared/src/utils/constants/contract.js b/packages/shared/src/utils/constants/contract.js
new file mode 100644
index 000000000000..f18312c7ac30
--- /dev/null
+++ b/packages/shared/src/utils/constants/contract.js
@@ -0,0 +1,415 @@
+import React from 'react';
+import { localize, Localize } from '@deriv/translations';
+import { shouldShowCancellation, shouldShowExpiration } from '../contract';
+
+export const getLocalizedBasis = () => ({
+    payout: localize('Payout'),
+    stake: localize('Stake'),
+    multiplier: localize('Multiplier'),
+});
+
+/**
+ * components can be undef or an array containing any of: 'start_date', 'barrier', 'last_digit'
+ *     ['duration', 'amount'] are omitted, as they're available in all contract types
+ */
+export const getContractTypesConfig = symbol => ({
+    rise_fall: {
+        title: localize('Rise/Fall'),
+        trade_types: ['CALL', 'PUT'],
+        basis: ['stake', 'payout'],
+        components: ['start_date'],
+        barrier_count: 0,
+    },
+    rise_fall_equal: {
+        title: localize('Rise/Fall'),
+        trade_types: ['CALLE', 'PUTE'],
+        basis: ['stake', 'payout'],
+        components: ['start_date'],
+        barrier_count: 0,
+    },
+    high_low: {
+        title: localize('Higher/Lower'),
+        trade_types: ['CALL', 'PUT'],
+        basis: ['stake', 'payout'],
+        components: ['barrier'],
+        barrier_count: 1,
+    },
+    touch: {
+        title: localize('Touch/No Touch'),
+        trade_types: ['ONETOUCH', 'NOTOUCH'],
+        basis: ['stake', 'payout'],
+        components: ['barrier'],
+    },
+    end: {
+        title: localize('Ends In/Ends Out'),
+        trade_types: ['EXPIRYMISS', 'EXPIRYRANGE'],
+        basis: ['stake', 'payout'],
+        components: ['barrier'],
+    },
+    stay: {
+        title: localize('Stays In/Goes Out'),
+        trade_types: ['RANGE', 'UPORDOWN'],
+        basis: ['stake', 'payout'],
+        components: ['barrier'],
+    },
+    asian: {
+        title: localize('Asian Up/Asian Down'),
+        trade_types: ['ASIANU', 'ASIAND'],
+        basis: ['stake', 'payout'],
+        components: [],
+    },
+    match_diff: {
+        title: localize('Matches/Differs'),
+        trade_types: ['DIGITMATCH', 'DIGITDIFF'],
+        basis: ['stake', 'payout'],
+        components: ['last_digit'],
+    },
+    even_odd: {
+        title: localize('Even/Odd'),
+        trade_types: ['DIGITODD', 'DIGITEVEN'],
+        basis: ['stake', 'payout'],
+        components: [],
+    },
+    over_under: {
+        title: localize('Over/Under'),
+        trade_types: ['DIGITOVER', 'DIGITUNDER'],
+        basis: ['stake', 'payout'],
+        components: ['last_digit'],
+    },
+    // TODO: update the rest of these contracts config
+    lb_call: { title: localize('Close-to-Low'), trade_types: ['LBFLOATCALL'], basis: ['multiplier'], components: [] },
+    lb_put: { title: localize('High-to-Close'), trade_types: ['LBFLOATPUT'], basis: ['multiplier'], components: [] },
+    lb_high_low: { title: localize('High-to-Low'), trade_types: ['LBHIGHLOW'], basis: ['multiplier'], components: [] },
+    tick_high_low: {
+        title: localize('High Tick/Low Tick'),
+        trade_types: ['TICKHIGH', 'TICKLOW'],
+        basis: [],
+        components: [],
+    },
+    run_high_low: {
+        title: localize('Only Ups/Only Downs'),
+        trade_types: ['RUNHIGH', 'RUNLOW'],
+        basis: [],
+        components: [],
+    },
+    reset: {
+        title: localize('Reset Up/Reset Down'),
+        trade_types: ['RESETCALL', 'RESETPUT'],
+        basis: [],
+        components: [],
+    },
+    callputspread: {
+        title: localize('Spread Up/Spread Down'),
+        trade_types: ['CALLSPREAD', 'PUTSPREAD'],
+        basis: [],
+        components: [],
+    },
+    multiplier: {
+        title: localize('Multipliers'),
+        trade_types: ['MULTUP', 'MULTDOWN'],
+        basis: ['stake'],
+        components: [
+            'take_profit',
+            'stop_loss',
+            ...(shouldShowCancellation(symbol) ? ['cancellation'] : []),
+            ...(shouldShowExpiration(symbol) ? ['expiration'] : []),
+        ],
+        config: { hide_duration: true },
+    }, // hide Duration for Multiplier contracts for now
+});
+
+export const getContractCategoriesConfig = () => ({
+    [localize('Multipliers')]: ['multiplier'],
+    [localize('Ups & Downs')]: ['rise_fall', 'rise_fall_equal', 'run_high_low', 'reset', 'asian', 'callputspread'],
+    [localize('Highs & Lows')]: ['high_low', 'touch', 'tick_high_low'],
+    [localize('Ins & Outs')]: ['end', 'stay'],
+    [localize('Look Backs')]: ['lb_high_low', 'lb_put', 'lb_call'],
+    [localize('Digits')]: ['match_diff', 'even_odd', 'over_under'],
+});
+
+export const unsupported_contract_types_list = [
+    // TODO: remove these once all contract types are supported
+    'callputspread',
+    'run_high_low',
+    'reset',
+    'asian',
+    'tick_high_low',
+    'end',
+    'stay',
+    'lb_call',
+    'lb_put',
+    'lb_high_low',
+];
+
+export const getCardLabels = () => ({
+    APPLY: localize('Apply'),
+    STAKE: localize('Stake:'),
+    CLOSE: localize('Close'),
+    CANCEL: localize('Cancel'),
+    CURRENT_STAKE: localize('Current stake:'),
+    DEAL_CANCEL_FEE: localize('Deal cancel. fee:'),
+    TAKE_PROFIT: localize('Take profit:'),
+    BUY_PRICE: localize('Buy price:'),
+    STOP_LOSS: localize('Stop loss:'),
+    TOTAL_PROFIT_LOSS: localize('Total profit/loss:'),
+    PROFIT_LOSS: localize('Profit/Loss:'),
+    POTENTIAL_PROFIT_LOSS: localize('Potential profit/loss:'),
+    INDICATIVE_PRICE: localize('Indicative price:'),
+    PAYOUT: localize('Sell price:'),
+    PURCHASE_PRICE: localize('Buy price:'),
+    POTENTIAL_PAYOUT: localize('Payout limit:'),
+    TICK: localize('Tick '),
+    WON: localize('Won'),
+    LOST: localize('Lost'),
+    DAYS: localize('days'),
+    DAY: localize('day'),
+    SELL: localize('Sell'),
+    INCREMENT_VALUE: localize('Increment value'),
+    DECREMENT_VALUE: localize('Decrement value'),
+    TAKE_PROFIT_LOSS_NOT_AVAILABLE: localize(
+        'Take profit and/or stop loss are not available while deal cancellation is active.'
+    ),
+    DONT_SHOW_THIS_AGAIN: localize("Don't show this again"),
+    RESALE_NOT_OFFERED: localize('Resale not offered'),
+    NOT_AVAILABLE: localize('N/A'),
+});
+
+export const getMarketNamesMap = () => ({
+    FRXAUDCAD: localize('AUD/CAD'),
+    FRXAUDCHF: localize('AUD/CHF'),
+    FRXAUDJPY: localize('AUD/JPY'),
+    FRXAUDNZD: localize('AUD/NZD'),
+    FRXAUDPLN: localize('AUD/PLN'),
+    FRXAUDUSD: localize('AUD/USD'),
+    FRXBROUSD: localize('Oil/USD'),
+    FRXEURAUD: localize('EUR/AUD'),
+    FRXEURCAD: localize('EUR/CAD'),
+    FRXEURCHF: localize('EUR/CHF'),
+    FRXEURGBP: localize('EUR/GBP'),
+    FRXEURJPY: localize('EUR/JPY'),
+    FRXEURNZD: localize('EUR/NZD'),
+    FRXEURUSD: localize('EUR/USD'),
+    FRXGBPAUD: localize('GBP/AUD'),
+    FRXGBPCAD: localize('GBP/CAD'),
+    FRXGBPCHF: localize('GBP/CHF'),
+    FRXGBPJPY: localize('GBP/JPY'),
+    FRXGBPNOK: localize('GBP/NOK'),
+    FRXGBPUSD: localize('GBP/USD'),
+    FRXNZDJPY: localize('NZD/JPY'),
+    FRXNZDUSD: localize('NZD/USD'),
+    FRXUSDCAD: localize('USD/CAD'),
+    FRXUSDCHF: localize('USD/CHF'),
+    FRXUSDJPY: localize('USD/JPY'),
+    FRXUSDNOK: localize('USD/NOK'),
+    FRXUSDPLN: localize('USD/PLN'),
+    FRXUSDSEK: localize('USD/SEK'),
+    FRXXAGUSD: localize('Silver/USD'),
+    FRXXAUUSD: localize('Gold/USD'),
+    FRXXPDUSD: localize('Palladium/USD'),
+    FRXXPTUSD: localize('Platinum/USD'),
+    OTC_AEX: localize('Dutch Index'),
+    OTC_AS51: localize('Australian Index'),
+    OTC_DJI: localize('Wall Street Index'),
+    OTC_FCHI: localize('French Index'),
+    OTC_FTSE: localize('UK Index'),
+    OTC_GDAXI: localize('German Index'),
+    OTC_HSI: localize('Hong Kong Index'),
+    OTC_IBEX35: localize('Spanish Index'),
+    OTC_N225: localize('Japanese Index'),
+    OTC_NDX: localize('US Tech Index'),
+    OTC_SPC: localize('US Index'),
+    OTC_SSMI: localize('Swiss Index'),
+    OTC_SX5E: localize('Euro 50 Index'),
+    R_10: localize('Volatility 10 Index'),
+    R_25: localize('Volatility 25 Index'),
+    R_50: localize('Volatility 50 Index'),
+    R_75: localize('Volatility 75 Index'),
+    R_100: localize('Volatility 100 Index'),
+    BOOM300N: localize('Boom 300 Index'),
+    BOOM500: localize('Boom 500 Index'),
+    BOOM1000: localize('Boom 1000 Index'),
+    CRASH300N: localize('Crash 300 Index'),
+    CRASH500: localize('Crash 500 Index'),
+    CRASH1000: localize('Crash 1000 Index'),
+    RDBEAR: localize('Bear Market Index'),
+    RDBULL: localize('Bull Market Index'),
+    STPRNG: localize('Step Index'),
+    WLDAUD: localize('AUD Basket'),
+    WLDEUR: localize('EUR Basket'),
+    WLDGBP: localize('GBP Basket'),
+    WLDXAU: localize('Gold Basket'),
+    WLDUSD: localize('USD Basket'),
+    '1HZ10V': localize('Volatility 10 (1s) Index'),
+    '1HZ100V': localize('Volatility 100 (1s) Index'),
+    '1HZ200V': localize('Volatility 200 (1s) Index'),
+    '1HZ300V': localize('Volatility 300 (1s) Index'),
+    JD10: localize('Jump 10 Index'),
+    JD25: localize('Jump 25 Index'),
+    JD50: localize('Jump 50 Index'),
+    JD75: localize('Jump 75 Index'),
+    JD100: localize('Jump 100 Index'),
+    JD150: localize('Jump 150 Index'),
+    JD200: localize('Jump 200 Index'),
+    CRYBCHUSD: localize('BCH/USD'),
+    CRYBNBUSD: localize('BNB/USD'),
+    CRYBTCLTC: localize('BTC/LTC'),
+    CRYIOTUSD: localize('IOT/USD'),
+    CRYNEOUSD: localize('NEO/USD'),
+    CRYOMGUSD: localize('OMG/USD'),
+    CRYTRXUSD: localize('TRX/USD'),
+    CRYBTCETH: localize('BTC/ETH'),
+    CRYZECUSD: localize('ZEC/USD'),
+    CRYXMRUSD: localize('ZMR/USD'),
+    CRYXMLUSD: localize('XLM/USD'),
+    CRYXRPUSD: localize('XRP/USD'),
+    CRYBTCUSD: localize('BTC/USD'),
+    CRYDSHUSD: localize('DSH/USD'),
+    CRYETHUSD: localize('ETH/USD'),
+    CRYEOSUSD: localize('EOS/USD'),
+    CRYLTCUSD: localize('LTC/USD'),
+});
+
+export const getUnsupportedContracts = () => ({
+    EXPIRYMISS: {
+        name: <Localize i18n_default_text='Ends Outside' />,
+        position: 'top',
+    },
+    EXPIRYRANGE: {
+        name: <Localize i18n_default_text='Ends Between' />,
+        position: 'bottom',
+    },
+    RANGE: {
+        name: <Localize i18n_default_text='Stays Between' />,
+        position: 'top',
+    },
+    UPORDOWN: {
+        name: <Localize i18n_default_text='Goes Outside' />,
+        position: 'bottom',
+    },
+    RESETCALL: {
+        name: <Localize i18n_default_text='Reset Call' />,
+        position: 'top',
+    },
+    RESETPUT: {
+        name: <Localize i18n_default_text='Reset Put' />,
+        position: 'bottom',
+    },
+    TICKHIGH: {
+        name: <Localize i18n_default_text='High Tick' />,
+        position: 'top',
+    },
+    TICKLOW: {
+        name: <Localize i18n_default_text='Low Tick' />,
+        position: 'bottom',
+    },
+    ASIANU: {
+        name: <Localize i18n_default_text='Asian Up' />,
+        position: 'top',
+    },
+    ASIAND: {
+        name: <Localize i18n_default_text='Asian Down' />,
+        position: 'bottom',
+    },
+    LBFLOATCALL: {
+        name: <Localize i18n_default_text='Close-to-Low' />,
+        position: 'top',
+    },
+    LBFLOATPUT: {
+        name: <Localize i18n_default_text='High-to-Close' />,
+        position: 'top',
+    },
+    LBHIGHLOW: {
+        name: <Localize i18n_default_text='High-to-Low' />,
+        position: 'top',
+    },
+    CALLSPREAD: {
+        name: <Localize i18n_default_text='Spread Up' />,
+        position: 'top',
+    },
+    PUTSPREAD: {
+        name: <Localize i18n_default_text='Spread Down' />,
+        position: 'bottom',
+    },
+    RUNHIGH: {
+        name: <Localize i18n_default_text='Only Ups' />,
+        position: 'top',
+    },
+    RUNLOW: {
+        name: <Localize i18n_default_text='Only Downs' />,
+        position: 'bottom',
+    },
+});
+
+export const getSupportedContracts = is_high_low => ({
+    CALL: {
+        name: is_high_low ? <Localize i18n_default_text='Higher' /> : <Localize i18n_default_text='Rise' />,
+        position: 'top',
+    },
+    PUT: {
+        name: is_high_low ? <Localize i18n_default_text='Lower' /> : <Localize i18n_default_text='Fall' />,
+        position: 'bottom',
+    },
+    CALLE: {
+        name: <Localize i18n_default_text='Rise' />,
+        position: 'top',
+    },
+    PUTE: {
+        name: <Localize i18n_default_text='Fall' />,
+        position: 'bottom',
+    },
+    DIGITMATCH: {
+        name: <Localize i18n_default_text='Matches' />,
+        position: 'top',
+    },
+    DIGITDIFF: {
+        name: <Localize i18n_default_text='Differs' />,
+        position: 'bottom',
+    },
+    DIGITEVEN: {
+        name: <Localize i18n_default_text='Even' />,
+        position: 'top',
+    },
+    DIGITODD: {
+        name: <Localize i18n_default_text='Odd' />,
+        position: 'bottom',
+    },
+    DIGITOVER: {
+        name: <Localize i18n_default_text='Over' />,
+        position: 'top',
+    },
+    DIGITUNDER: {
+        name: <Localize i18n_default_text='Under' />,
+        position: 'bottom',
+    },
+    ONETOUCH: {
+        name: <Localize i18n_default_text='Touch' />,
+        position: 'top',
+    },
+    NOTOUCH: {
+        name: <Localize i18n_default_text='No Touch' />,
+        position: 'bottom',
+    },
+    MULTUP: {
+        name: <Localize i18n_default_text='Up' />,
+        position: 'top',
+    },
+    MULTDOWN: {
+        name: <Localize i18n_default_text='Down' />,
+        position: 'bottom',
+    },
+});
+
+export const getContractConfig = is_high_low => ({
+    ...getSupportedContracts(is_high_low),
+    ...getUnsupportedContracts(),
+});
+
+export const getContractTypeDisplay = (type, is_high_low = false) => {
+    return getContractConfig(is_high_low)[type] ? getContractConfig(is_high_low)[type.toUpperCase()].name : '';
+};
+
+export const getContractTypePosition = (type, is_high_low = false) =>
+    getContractConfig(is_high_low)[type] ? getContractConfig(is_high_low)[type.toUpperCase()].position : 'top';
+
+export const isCallPut = trade_type =>
+    trade_type === 'rise_fall' || trade_type === 'rise_fall_equal' || trade_type === 'high_low';
diff --git a/packages/shared/src/utils/constants/index.js b/packages/shared/src/utils/constants/index.js
new file mode 100644
index 000000000000..3ba10cd544eb
--- /dev/null
+++ b/packages/shared/src/utils/constants/index.js
@@ -0,0 +1,4 @@
+export * from './barriers';
+export * from './contract';
+export * from './markers';
+export * from './validation-rules';
diff --git a/packages/shared/src/utils/constants/markers.js b/packages/shared/src/utils/constants/markers.js
new file mode 100644
index 000000000000..1747225e6224
--- /dev/null
+++ b/packages/shared/src/utils/constants/markers.js
@@ -0,0 +1,72 @@
+import { localize } from '@deriv/translations';
+// import MarkerLine from 'Modules/SmartChart/Components/Markers/marker-line.jsx';
+// import MarkerSpotLabel from 'Modules/SmartChart/Components/Markers/marker-spot-label.jsx';
+// import MarkerSpot from 'Modules/SmartChart/Components/Markers/marker-spot.jsx';
+
+// will be removed
+import React from 'react';
+
+export const MARKER_TYPES_CONFIG = {
+    LINE_END: {
+        type: 'LINE_END',
+        marker_config: {
+            // ContentComponent: MarkerLine,
+            ContentComponent: <div>123</div>,
+
+            className: 'chart-marker-line',
+        },
+        content_config: { line_style: 'dash', label: localize('End Time') },
+    },
+    LINE_PURCHASE: {
+        type: 'LINE_PURCHASE',
+        marker_config: {
+            // ContentComponent: MarkerLine,
+            ContentComponent: <div>123</div>,
+
+            className: 'chart-marker-line',
+        },
+        content_config: { line_style: 'solid', label: localize('Purchase Time') },
+    },
+    LINE_START: {
+        type: 'LINE_START',
+        marker_config: {
+            // ContentComponent: MarkerLine,
+            ContentComponent: <div>123</div>,
+
+            className: 'chart-marker-line',
+        },
+        content_config: { line_style: 'solid', label: localize('Start Time') },
+    },
+    SPOT_ENTRY: {
+        type: 'SPOT_ENTRY',
+        marker_config: {
+            // ContentComponent: MarkerSpot,
+            ContentComponent: <div>123</div>,
+        },
+        content_config: { className: 'chart-spot__entry' },
+    },
+    SPOT_SELL: {
+        type: 'SPOT_SELL',
+        marker_config: {
+            // ContentComponent: MarkerSpot,
+            ContentComponent: <div>123</div>,
+        },
+        content_config: { className: 'chart-spot__sell' },
+    },
+    SPOT_EXIT: {
+        type: 'SPOT_EXIT',
+        marker_config: {
+            // ContentComponent: MarkerSpotLabel,
+            ContentComponent: <div>123</div>,
+        },
+        content_config: { spot_className: 'chart-spot__spot' },
+    },
+    SPOT_MIDDLE: {
+        type: 'SPOT_MIDDLE',
+        marker_config: {
+            // ContentComponent: MarkerSpotLabel,
+            ContentComponent: <div>123</div>,
+        },
+        content_config: { spot_className: 'chart-spot__spot' },
+    },
+};
diff --git a/packages/shared/src/utils/constants/validation-rules.js b/packages/shared/src/utils/constants/validation-rules.js
new file mode 100644
index 000000000000..9930434db88d
--- /dev/null
+++ b/packages/shared/src/utils/constants/validation-rules.js
@@ -0,0 +1,183 @@
+import { localize } from '@deriv/translations';
+import { isSessionAvailable } from '../helpers/start-date';
+import { isHourValid, isMinuteValid, isTimeValid, toMoment } from '../date';
+
+export const getValidationRules = () => ({
+    amount: {
+        rules: [
+            ['req', { message: localize('Amount is a required field.') }],
+            ['number', { min: 0, type: 'float' }],
+        ],
+    },
+    barrier_1: {
+        rules: [
+            [
+                'req',
+                {
+                    condition: store => store.barrier_count && store.form_components.indexOf('barrier') > -1,
+                    message: localize('Barrier is a required field.'),
+                },
+            ],
+            ['barrier', { condition: store => store.barrier_count }],
+            [
+                'custom',
+                {
+                    func: (value, options, store, inputs) =>
+                        store.barrier_count > 1 ? +value > +inputs.barrier_2 : true,
+                    message: localize('Higher barrier must be higher than lower barrier.'),
+                },
+            ],
+            [
+                'custom',
+                {
+                    func: (value, options, store, inputs) =>
+                        /^[+-]/.test(inputs.barrier_1) ? +inputs.barrier_1 !== 0 : true,
+                    message: localize('Barrier cannot be zero.'),
+                },
+            ],
+        ],
+        trigger: 'barrier_2',
+    },
+    barrier_2: {
+        rules: [
+            [
+                'req',
+                {
+                    condition: store => store.barrier_count > 1 && store.form_components.indexOf('barrier') > -1,
+                    message: localize('Barrier is a required field.'),
+                },
+            ],
+            ['barrier', { condition: store => store.barrier_count }],
+            [
+                'custom',
+                {
+                    func: (value, options, store, inputs) =>
+                        (/^[+-]/g.test(inputs.barrier_1) && /^[+-]/g.test(value)) ||
+                        (/^(?![+-])/g.test(inputs.barrier_1) && /^(?![+-])/g.test(value)),
+                    message: localize('Both barriers should be relative or absolute'),
+                },
+            ],
+            [
+                'custom',
+                {
+                    func: (value, options, store, inputs) => +inputs.barrier_1 > +value,
+                    message: localize('Lower barrier must be lower than higher barrier.'),
+                },
+            ],
+        ],
+        trigger: 'barrier_1',
+    },
+    duration: {
+        rules: [['req', { message: localize('Duration is a required field.') }]],
+    },
+    start_date: {
+        trigger: 'start_time',
+    },
+    expiry_date: {
+        trigger: 'expiry_time',
+    },
+    start_time: {
+        rules: [
+            [
+                'custom',
+                {
+                    func: (value, options, store) => store.contract_start_type === 'spot' || isTimeValid(value),
+                    message: localize('Please enter the start time in the format "HH:MM".'),
+                },
+            ],
+            [
+                'custom',
+                {
+                    func: (value, options, store) => store.contract_start_type === 'spot' || isHourValid(value),
+                    message: localize('Hour must be between 0 and 23.'),
+                },
+            ],
+            [
+                'custom',
+                {
+                    func: (value, options, store) => store.contract_start_type === 'spot' || isMinuteValid(value),
+                    message: localize('Minute must be between 0 and 59.'),
+                },
+            ],
+            [
+                'custom',
+                {
+                    func: (value, options, store) => {
+                        if (store.contract_start_type === 'spot') return true;
+                        if (!isTimeValid(value)) return false;
+                        const start_moment = toMoment(store.start_date);
+                        const start_moment_clone = start_moment.clone();
+                        const [h, m] = value.split(':');
+                        return isSessionAvailable(store.sessions, start_moment_clone.hour(h).minute(m), start_moment);
+                    },
+                    message: localize('Start time cannot be in the past.'),
+                },
+            ],
+        ],
+    },
+    expiry_time: {
+        rules: [
+            [
+                'custom',
+                {
+                    func: (value, options, store) => store.contract_start_type === 'spot' || isTimeValid(value),
+                    message: localize('Please enter the start time in the format "HH:MM".'),
+                },
+            ],
+            [
+                'custom',
+                {
+                    func: (value, options, store) => store.contract_start_type === 'spot' || isHourValid(value),
+                    message: localize('Hour must be between 0 and 23.'),
+                },
+            ],
+            [
+                'custom',
+                {
+                    func: (value, options, store) => store.contract_start_type === 'spot' || isMinuteValid(value),
+                    message: localize('Minute must be between 0 and 59.'),
+                },
+            ],
+            [
+                'custom',
+                {
+                    func: (value, options, store) => {
+                        if (store.contract_start_type === 'spot') return true;
+                        if (!isTimeValid(value)) return false;
+                        const start_moment = toMoment(store.start_date);
+                        const start_moment_clone = start_moment.clone();
+                        const [h, m] = value.split(':');
+                        return isSessionAvailable(store.sessions, start_moment_clone.hour(h).minute(m), start_moment);
+                    },
+                    message: localize('Expiry time cannot be in the past.'),
+                },
+            ],
+        ],
+    },
+    ...getMultiplierValidationRules(),
+});
+
+export const getMultiplierValidationRules = () => ({
+    stop_loss: {
+        rules: [
+            [
+                'req',
+                {
+                    condition: store => store.has_stop_loss && !store.stop_loss,
+                    message: localize('Please enter a stop loss amount.'),
+                },
+            ],
+        ],
+    },
+    take_profit: {
+        rules: [
+            [
+                'req',
+                {
+                    condition: store => store.has_take_profit && !store.take_profit,
+                    message: localize('Please enter a take profit amount.'),
+                },
+            ],
+        ],
+    },
+});
diff --git a/packages/shared/src/utils/helpers/__tests__/barrier.js b/packages/shared/src/utils/helpers/__tests__/barrier.js
new file mode 100644
index 000000000000..bdc7e2b23098
--- /dev/null
+++ b/packages/shared/src/utils/helpers/__tests__/barrier.js
@@ -0,0 +1,80 @@
+import { expect } from 'chai';
+import { buildBarriersConfig } from '../barrier';
+
+describe('buildBarriersConfig', () => {
+    const contract_obj = {
+        barrier_category: 'euro_atm',
+        contract_category: 'callput',
+        contract_category_display: 'Up/Down',
+        contract_display: 'Higher',
+        contract_type: 'CALL',
+        exchange_name: 'FOREX',
+        expiry_type: 'daily',
+        market: 'forex',
+        max_contract_duration: '365d',
+        min_contract_duration: '1d',
+        sentiment: 'up',
+        start_type: 'spot',
+        submarket: 'major_pairs',
+        underlying_symbol: 'frxAUDJPY',
+    };
+    it('Returns Undefined if contract has no barriers', () => {
+        const contract = {
+            ...contract_obj,
+        };
+        expect(buildBarriersConfig(contract)).to.eql(undefined);
+    });
+
+    it('Returns barriers with added values when contract has barrier but equals to zero', () => {
+        const contract = {
+            ...contract_obj,
+            barriers: 0,
+        };
+        expect(buildBarriersConfig(contract)).to.eql(undefined);
+    });
+
+    it('Returns barriers with including empty object when contract has barriers but not values', () => {
+        const contract = {
+            ...contract_obj,
+            barriers: 1,
+        };
+        expect(buildBarriersConfig(contract)).to.eql({
+            count: 1,
+            daily: {},
+        });
+    });
+
+    it('Returns barriers with added values when contract has barriers', () => {
+        const contract = {
+            ...contract_obj,
+            barriers: 1,
+            low_barrier: 22,
+            barrier: 33,
+            high_barrier: 44,
+        };
+        expect(buildBarriersConfig(contract)).to.eql({
+            count: 1,
+            daily: {
+                low_barrier: 22,
+                barrier: 33,
+                high_barrier: 44,
+            },
+        });
+    });
+
+    it('Returns barriers with some of the values when contract has barriers and some of the values', () => {
+        const contract = {
+            ...contract_obj,
+            barriers: 1,
+            low_barrier: 22,
+            barrier: 33,
+        };
+        expect(buildBarriersConfig(contract)).to.eql({
+            count: 1,
+            daily: {
+                low_barrier: 22,
+                barrier: 33,
+            },
+        });
+    });
+});
diff --git a/packages/shared/src/utils/helpers/__tests__/barriers.js b/packages/shared/src/utils/helpers/__tests__/barriers.js
new file mode 100644
index 000000000000..af2b46b7ec0f
--- /dev/null
+++ b/packages/shared/src/utils/helpers/__tests__/barriers.js
@@ -0,0 +1,58 @@
+import { expect } from 'chai';
+import * as Barriers from '../barriers';
+
+describe('Barriers', () => {
+    describe('isBarrierSupported', () => {
+        it('should return false when barrier is not in CONTRACT_SHADES', () => {
+            expect(Barriers.isBarrierSupported('SomeThinMadeUp')).to.eql(false);
+        });
+        it('should return true when barrier is in CONTRACT_SHADES', () => {
+            expect(Barriers.isBarrierSupported('CALL')).to.eql(true);
+        });
+    });
+
+    describe('barriersToString', () => {
+        it('should convert non-zero barriers which do not have +/- to string consisting of them without +/- while is_relative is false', () => {
+            expect(Barriers.barriersToString(false, 10, 15)).to.deep.eql(['10', '15']);
+        });
+        it('should convert values without +/- and zero to string consisting of them without +/- while is_relative is false', () => {
+            expect(Barriers.barriersToString(false, 0, 15)).to.deep.eql(['0', '15']);
+        });
+        it('should convert barriers which have +/- to string consisting of them without +/- while is_relative is false', () => {
+            expect(Barriers.barriersToString(false, +11, 15)).to.deep.eql(['11', '15']);
+        });
+        it('should convert barriers which have +/- to string consisting of them with +/- while is_relative is true', () => {
+            expect(Barriers.barriersToString(true, +11, +15)).to.deep.eql(['+11', '+15']);
+        });
+    });
+
+    describe('barriersObjectToArray', () => {
+        const main = {
+            color: 'green',
+            draggable: false,
+        };
+        it('should return an array from values in barriers object', () => {
+            const barriers = {
+                main,
+            };
+            expect(Barriers.barriersObjectToArray(barriers, [])).to.deep.eql([
+                {
+                    color: 'green',
+                    draggable: false,
+                },
+            ]);
+        });
+        it('should return an array from values in barriers object (empty values should be filtered out)', () => {
+            const barriers = {
+                main,
+                somethingEmpty: {},
+            };
+            expect(Barriers.barriersObjectToArray(barriers, [])).to.deep.eql([
+                {
+                    color: 'green',
+                    draggable: false,
+                },
+            ]);
+        });
+    });
+});
diff --git a/packages/shared/src/utils/helpers/__tests__/format-response.js b/packages/shared/src/utils/helpers/__tests__/format-response.js
new file mode 100644
index 000000000000..2a02b7dc8084
--- /dev/null
+++ b/packages/shared/src/utils/helpers/__tests__/format-response.js
@@ -0,0 +1,32 @@
+import { expect } from 'chai';
+import { formatPortfolioPosition } from '../format-response';
+
+describe('formatPortfolioPosition', () => {
+    const mock_active_symbols = [{ display_name: 'Volatility 25 Index', symbol: 'R_25' }];
+    const portfolio_pos = {
+        buy_price: 2500.5,
+        contract_id: 1234,
+        contract_type: 'ASIANU',
+        longcode: 'test \n test \n test',
+        payout: 3500.1,
+        symbol: 'R_25',
+        shortcode: 'ASIANU_R_25_',
+        transaction_id: 5678,
+    };
+
+    it('should return an object with values in object passed as argument', () => {
+        expect(formatPortfolioPosition(portfolio_pos, mock_active_symbols)).to.eql({
+            details: 'test <br /> test <br /> test',
+            display_name: 'Volatility 25 Index',
+            id: 1234,
+            indicative: 0,
+            is_unsupported: true,
+            payout: 3500.1,
+            contract_update: undefined,
+            purchase: 2500.5,
+            reference: +5678,
+            type: 'ASIANU',
+            contract_info: portfolio_pos,
+        });
+    });
+});
diff --git a/packages/shared/src/utils/helpers/__tests__/start-date.js b/packages/shared/src/utils/helpers/__tests__/start-date.js
new file mode 100644
index 000000000000..68a13a16aa67
--- /dev/null
+++ b/packages/shared/src/utils/helpers/__tests__/start-date.js
@@ -0,0 +1,93 @@
+import { expect } from 'chai';
+import moment from 'moment';
+import { buildForwardStartingConfig, isSessionAvailable } from '../start-date';
+
+describe('start_date', () => {
+    describe('buildForwardStartingConfig', () => {
+        it('Returns empty object when forward_starting_options and forward_starting_dates are both empties', () => {
+            const contract = {
+                barrier_category: 'euro_atm',
+                barriers: 0,
+                contract_category: 'callput',
+                contract_category_display: 'Up/Down',
+                contract_display: 'Higher',
+                contract_type: 'CALL',
+                exchange_name: 'FOREX',
+                expiry_type: 'daily',
+                market: 'forex',
+                max_contract_duration: '365d',
+                min_contract_duration: '1d',
+                sentiment: 'up',
+                start_type: 'spot',
+                submarket: 'major_pairs',
+                underlying_symbol: 'frxAUDJPY',
+            };
+            expect(buildForwardStartingConfig(contract, {})).to.be.empty;
+        });
+    });
+
+    describe('isSessionAvailable', () => {
+        it('should return true with default values', () => {
+            expect(isSessionAvailable()).to.eql(true);
+        });
+        it('should return true when should_only_check_hour is false and there is a session which opens before now and closes after now', () => {
+            const sessions = [
+                {
+                    open: moment.utc(new Date().getTime() - 100000),
+                    close: moment.utc(new Date().getTime() + 100000),
+                },
+                {
+                    open: moment.utc(new Date().getTime() + 300000),
+                    close: moment.utc(new Date().getTime() + 400000),
+                },
+            ];
+            expect(isSessionAvailable(sessions)).to.eql(true);
+        });
+        it('should return false when should_only_check_hour is false and there is not a session which opens before now and closes after now and compare_moment is before start_moment', () => {
+            const sessions = [
+                {
+                    open: moment.utc(new Date().getTime() + 400000),
+                    close: moment.utc(new Date().getTime() + 500000),
+                },
+                {
+                    open: moment.utc(new Date().getTime() + 300000),
+                    close: moment.utc(new Date().getTime() + 400000),
+                },
+            ];
+            const compare_moment = moment.utc(new Date().getTime() - 1000);
+
+            expect(isSessionAvailable(sessions, compare_moment)).to.eql(false);
+        });
+        it('should return false when should_only_check_hour is false and there is not a session which opens before now and closes after now and compare_moment is before start_moment', () => {
+            const sessions = [
+                {
+                    open: moment.utc(new Date().getTime() + 400000),
+                    close: moment.utc(new Date().getTime() + 500000),
+                },
+                {
+                    open: moment.utc(new Date().getTime() + 300000),
+                    close: moment.utc(new Date().getTime() + 400000),
+                },
+            ];
+            expect(isSessionAvailable(sessions, moment.utc(), moment.utc(), false)).to.eql(false);
+        });
+        it('should return false when should_only_check_hour is true and there is not a session which opens before now and closes after now', () => {
+            const sessions = [
+                {
+                    open: moment.utc(new Date().getTime() + 3600000),
+                    close: moment.utc(new Date().getTime() + 3600001),
+                },
+            ];
+            expect(isSessionAvailable(sessions, moment.utc(), moment.utc(), true)).to.eql(false);
+        });
+        it('should return true when should_only_check_hour is true and there is a session which opens before now and closes after now', () => {
+            const sessions = [
+                {
+                    open: moment.utc(new Date().getTime() - 1000),
+                    close: moment.utc(new Date().getTime() + 1000),
+                },
+            ];
+            expect(isSessionAvailable(sessions, moment.utc(), moment.utc(), true)).to.eql(true);
+        });
+    });
+});
diff --git a/packages/shared/src/utils/helpers/active-symbols.js b/packages/shared/src/utils/helpers/active-symbols.js
new file mode 100644
index 000000000000..647632944e67
--- /dev/null
+++ b/packages/shared/src/utils/helpers/active-symbols.js
@@ -0,0 +1,145 @@
+import { flow } from 'mobx';
+import { LocalStore } from '../storage';
+import { redirectToLogin } from '../login';
+import { WS } from '../../services';
+
+import { getLanguage, localize } from '@deriv/translations';
+
+export const showUnavailableLocationError = flow(function* (showError, is_logged_in) {
+    const website_status = yield WS.wait('website_status');
+    const residence_list = yield WS.residenceList();
+
+    const clients_country_code = website_status.website_status.clients_country;
+    const clients_country_text = (
+        residence_list.residence_list.find(obj_country => obj_country.value === clients_country_code) || {}
+    ).text;
+
+    const header = clients_country_text
+        ? localize('Sorry, this app is unavailable in {{clients_country}}.', {
+              clients_country: clients_country_text,
+          })
+        : localize('Sorry, this app is unavailable in your current location.');
+
+    showError({
+        message: localize('If you have an account, log in to continue.'),
+        header,
+        redirect_label: localize('Log in'),
+        redirectOnClick: () => redirectToLogin(is_logged_in, getLanguage()),
+        should_show_refresh: false,
+    });
+});
+
+export const showMxMltUnavailableError = flow(function* (showError, can_have_mlt_account, can_have_mx_account) {
+    const get_settings = yield WS.wait('get_settings');
+    const residence_list = yield WS.residenceList();
+
+    const clients_country_code = get_settings.get_settings.country_code;
+    const clients_country_text = (
+        residence_list.residence_list.find(obj_country => obj_country.value === clients_country_code) || {}
+    ).text;
+
+    let header;
+
+    if (can_have_mlt_account) {
+        header = localize("Unfortunately, trading options isn't possible in your country");
+    } else if (clients_country_text || can_have_mx_account) {
+        header = localize('Sorry, trading is unavailable in {{clients_country}}.', {
+            clients_country: clients_country_text,
+        });
+    } else {
+        header = localize('Sorry, trading is unavailable in your current location.');
+    }
+
+    showError({
+        message: ' ',
+        header,
+        redirect_label: null,
+        redirectOnClick: () => ({}),
+        should_show_refresh: false,
+    });
+});
+
+export const isMarketClosed = (active_symbols = [], symbol) => {
+    if (!active_symbols.length) return false;
+    return active_symbols.filter(x => x.symbol === symbol)[0]
+        ? !active_symbols.filter(symbol_info => symbol_info.symbol === symbol)[0].exchange_is_open
+        : false;
+};
+
+export const pickDefaultSymbol = async (active_symbols = []) => {
+    if (!active_symbols.length) return '';
+    const fav_open_symbol = await getFavoriteOpenSymbol(active_symbols);
+    if (fav_open_symbol) return fav_open_symbol;
+    const default_open_symbol = await getDefaultOpenSymbol(active_symbols);
+    return default_open_symbol;
+};
+
+const getFavoriteOpenSymbol = async active_symbols => {
+    try {
+        const chart_favorites = LocalStore.get('cq-favorites');
+        if (!chart_favorites) return undefined;
+        const client_favorite_markets = JSON.parse(chart_favorites)['chartTitle&Comparison'];
+
+        const client_favorite_list = client_favorite_markets.map(client_fav_symbol =>
+            active_symbols.find(symbol_info => symbol_info.symbol === client_fav_symbol)
+        );
+        if (client_favorite_list) {
+            const client_first_open_symbol = client_favorite_list.filter(symbol => symbol).find(isSymbolOpen);
+            if (client_first_open_symbol) {
+                const is_symbol_offered = await isSymbolOffered(client_first_open_symbol);
+                if (is_symbol_offered) return client_first_open_symbol.symbol;
+            }
+        }
+        return undefined;
+    } catch (error) {
+        return undefined;
+    }
+};
+
+const getDefaultOpenSymbol = async active_symbols => {
+    const default_open_symbol =
+        (await findSymbol(active_symbols, '1HZ100V')) ||
+        (await findFirstSymbol(active_symbols, /random_index/)) ||
+        (await findFirstSymbol(active_symbols, /major_pairs/));
+    if (default_open_symbol) return default_open_symbol.symbol;
+    return active_symbols.find(symbol_info => symbol_info.submarket === 'major_pairs').symbol;
+};
+
+const findSymbol = async (active_symbols, symbol) => {
+    const first_symbol = active_symbols.find(symbol_info => symbol_info.symbol === symbol && isSymbolOpen(symbol_info));
+    const is_symbol_offered = await isSymbolOffered(first_symbol);
+    if (is_symbol_offered) return first_symbol;
+    return undefined;
+};
+
+const findFirstSymbol = async (active_symbols, pattern) => {
+    const first_symbol = active_symbols.find(
+        symbol_info => pattern.test(symbol_info.submarket) && isSymbolOpen(symbol_info)
+    );
+    const is_symbol_offered = await isSymbolOffered(first_symbol);
+    if (is_symbol_offered) return first_symbol;
+    return undefined;
+};
+
+export const findFirstOpenMarket = async (active_symbols, markets) => {
+    const market = markets.shift();
+    const first_symbol = active_symbols.find(symbol_info => market === symbol_info.market && isSymbolOpen(symbol_info));
+    const is_symbol_offered = await isSymbolOffered(first_symbol);
+    if (is_symbol_offered) return { category: first_symbol.market, subcategory: first_symbol.submarket };
+    else if (markets.length > 0) return findFirstOpenMarket(active_symbols, markets);
+    return undefined;
+};
+
+const isSymbolOpen = symbol => symbol.exchange_is_open === 1;
+
+const isSymbolOffered = async symbol_info => {
+    const r = await WS.storage.contractsFor(symbol_info?.symbol);
+    return !['InvalidSymbol', 'InputValidationFailed'].includes(r.error?.code);
+};
+
+export const getSymbolDisplayName = (active_symbols = [], symbol) =>
+    (
+        active_symbols.find(symbol_info => symbol_info.symbol.toUpperCase() === symbol.toUpperCase()) || {
+            display_name: '',
+        }
+    ).display_name;
diff --git a/packages/shared/src/utils/helpers/barrier.js b/packages/shared/src/utils/helpers/barrier.js
new file mode 100644
index 000000000000..2dff13e7393f
--- /dev/null
+++ b/packages/shared/src/utils/helpers/barrier.js
@@ -0,0 +1,20 @@
+export const buildBarriersConfig = (contract, barriers = { count: contract.barriers }) => {
+    if (!contract.barriers) {
+        return undefined;
+    }
+
+    const obj_barrier = {};
+
+    ['barrier', 'low_barrier', 'high_barrier'].forEach(field => {
+        if (field in contract) obj_barrier[field] = contract[field];
+    });
+
+    return Object.assign(barriers || {}, {
+        [contract.expiry_type]: obj_barrier,
+    });
+};
+
+export const getBarrierPipSize = barrier => {
+    if (Math.floor(barrier) === barrier || barrier.length < 1 || barrier % 1 === 0 || isNaN(barrier)) return 0;
+    return barrier.toString().split('.')[1].length || 0;
+};
diff --git a/packages/shared/src/utils/helpers/barriers.js b/packages/shared/src/utils/helpers/barriers.js
new file mode 100644
index 000000000000..47eec5896432
--- /dev/null
+++ b/packages/shared/src/utils/helpers/barriers.js
@@ -0,0 +1,28 @@
+import { toJS } from 'mobx';
+import { isEmptyObject } from '../object';
+import { CONTRACT_SHADES } from '../constants';
+
+export const isBarrierSupported = contract_type => contract_type in CONTRACT_SHADES;
+
+export const barriersToString = (is_relative, ...barriers_list) =>
+    barriers_list
+        .filter(barrier => barrier !== undefined && barrier !== null)
+        .map(barrier => `${is_relative && !/^[+-]/.test(barrier) ? '+' : ''}${barrier}`);
+
+export const barriersObjectToArray = (barriers, reference_array) => {
+    Object.keys(barriers).forEach(barrier => {
+        const js_object = toJS(barriers[barrier]);
+        if (!isEmptyObject(js_object)) {
+            reference_array.push(js_object);
+        }
+    });
+
+    return reference_array;
+};
+
+export const removeBarrier = (barriers, key) => {
+    const index = barriers.findIndex(b => b.key === key);
+    if (index > -1) {
+        barriers.splice(index, 1);
+    }
+};
diff --git a/packages/shared/src/utils/helpers/chart-marker-helpers.js b/packages/shared/src/utils/helpers/chart-marker-helpers.js
new file mode 100644
index 000000000000..c364e650530e
--- /dev/null
+++ b/packages/shared/src/utils/helpers/chart-marker-helpers.js
@@ -0,0 +1,119 @@
+import extend from 'extend';
+import { isMobile } from '../screen';
+import { isUserSold, isMultiplierContract, isDigitContract } from '../contract';
+
+import { getEndTime } from './logic';
+
+import { MARKER_TYPES_CONFIG } from '../constants/markers';
+
+const createMarkerConfig = (marker_type, x, y, content_config) =>
+    extend(true, {}, MARKER_TYPES_CONFIG[marker_type], {
+        marker_config: {
+            x: +x,
+            y,
+        },
+        content_config,
+    });
+
+export const getSpotCount = (contract_info, spot_count) =>
+    isDigitContract(contract_info.contract_type) ? spot_count + 1 : spot_count;
+
+// -------------------- Lines --------------------
+export const createMarkerEndTime = contract_info => {
+    const end_time = getEndTime(contract_info);
+    if (!end_time) return false;
+
+    return createMarkerConfig(MARKER_TYPES_CONFIG.LINE_END.type, +end_time, null, {
+        status: `${contract_info.profit >= 0 ? 'won' : 'lost'}`,
+        marker_config: MARKER_TYPES_CONFIG,
+    });
+};
+
+export const createMarkerPurchaseTime = contract_info => {
+    if (
+        !contract_info.purchase_time ||
+        !contract_info.date_start ||
+        +contract_info.purchase_time === +contract_info.date_start
+    )
+        return false;
+
+    return createMarkerConfig(MARKER_TYPES_CONFIG.LINE_PURCHASE.type, +contract_info.purchase_time);
+};
+
+export const createMarkerStartTime = contract_info => {
+    if (!contract_info.date_start) return false;
+
+    return createMarkerConfig(MARKER_TYPES_CONFIG.LINE_START.type, +contract_info.date_start, null, {
+        marker_config: MARKER_TYPES_CONFIG,
+    });
+};
+
+// -------------------- Spots --------------------
+export const createMarkerSpotEntry = contract_info => {
+    if (!contract_info.entry_tick_time) return false;
+
+    let marker_type = MARKER_TYPES_CONFIG.SPOT_ENTRY.type;
+    let component_props = {};
+
+    const entry_tick = contract_info.entry_tick_display_value;
+
+    const spot_has_label = isDigitContract(contract_info.contract_type);
+    if (spot_has_label) {
+        marker_type = MARKER_TYPES_CONFIG.SPOT_MIDDLE.type;
+
+        component_props = {
+            spot_value: `${entry_tick}`,
+            spot_epoch: `${contract_info.entry_tick_time}`,
+            spot_count: 1,
+        };
+    }
+
+    return createMarkerConfig(marker_type, contract_info.entry_tick_time, entry_tick, component_props);
+};
+
+export const createMarkerSpotExit = (contract_info, tick, idx) => {
+    if (!contract_info.exit_tick_time) return false;
+    const is_user_sold = isUserSold(contract_info);
+
+    let spot_count, align_label;
+    if (tick) {
+        spot_count = getSpotCount(contract_info, idx);
+        align_label = tick.align_label;
+    }
+
+    const exit_tick = contract_info.exit_tick_display_value;
+
+    const should_show_spot_exit = !is_user_sold || isMultiplierContract(contract_info.contract_type);
+
+    const marker_spot_type = should_show_spot_exit
+        ? MARKER_TYPES_CONFIG.SPOT_EXIT.type
+        : MARKER_TYPES_CONFIG.SPOT_SELL.type;
+
+    const component_props = should_show_spot_exit
+        ? {
+              spot_value: `${exit_tick}`,
+              spot_epoch: `${contract_info.exit_tick_time}`,
+              status: `${+contract_info.profit >= 0 ? 'won' : 'lost'}`,
+              align_label,
+              spot_count,
+          }
+        : {};
+
+    return createMarkerConfig(marker_spot_type, +contract_info.exit_tick_time, +exit_tick, component_props);
+};
+
+export const createMarkerSpotMiddle = (contract_info, tick, idx) => {
+    const spot_count = getSpotCount(contract_info, idx);
+    const spot = tick.tick_display_value;
+
+    const marker_config = createMarkerConfig(MARKER_TYPES_CONFIG.SPOT_MIDDLE.type, +tick.epoch, +spot, {
+        spot_value: `${spot}`,
+        spot_epoch: `${tick.epoch}`,
+        align_label: tick.align_label,
+        spot_count,
+    });
+    marker_config.type = `${marker_config.type}_${idx}`;
+
+    if (isMobile() && spot_count > 1) return null;
+    return marker_config;
+};
diff --git a/packages/shared/src/utils/helpers/chart-markers.js b/packages/shared/src/utils/helpers/chart-markers.js
new file mode 100644
index 000000000000..daa5f20f8558
--- /dev/null
+++ b/packages/shared/src/utils/helpers/chart-markers.js
@@ -0,0 +1,89 @@
+import { unique } from '../object';
+import {
+    createMarkerEndTime,
+    createMarkerPurchaseTime,
+    createMarkerSpotEntry,
+    createMarkerSpotExit,
+    createMarkerStartTime,
+    createMarkerSpotMiddle,
+    getSpotCount,
+} from './chart-marker-helpers';
+import { getChartType, getEndTime } from './logic';
+import { MARKER_TYPES_CONFIG } from '../constants/markers';
+
+export const createChartMarkers = contract_info => {
+    let markers = [];
+    if (contract_info) {
+        const end_time = getEndTime(contract_info);
+        const chart_type = getChartType(contract_info.date_start, end_time);
+
+        if (contract_info.tick_count) {
+            const tick_markers = createTickMarkers(contract_info);
+            markers.push(...tick_markers);
+        } else if (chart_type !== 'candle') {
+            const spot_markers = Object.keys(marker_spots).map(type => marker_spots[type](contract_info));
+            markers.push(...spot_markers);
+        }
+        const line_markers = Object.keys(marker_lines).map(type => marker_lines[type](contract_info));
+        markers.push(...line_markers);
+
+        markers = markers.filter(m => !!m);
+    }
+    markers.forEach(marker => {
+        const contract_id = contract_info.contract_id;
+        marker.react_key = `${contract_id}-${marker.type}`;
+    });
+
+    return markers;
+};
+
+const marker_spots = {
+    [MARKER_TYPES_CONFIG.SPOT_ENTRY.type]: createMarkerSpotEntry,
+    [MARKER_TYPES_CONFIG.SPOT_EXIT.type]: createMarkerSpotExit,
+};
+
+const marker_lines = {
+    [MARKER_TYPES_CONFIG.LINE_START.type]: createMarkerStartTime,
+    [MARKER_TYPES_CONFIG.LINE_END.type]: createMarkerEndTime,
+    [MARKER_TYPES_CONFIG.LINE_PURCHASE.type]: createMarkerPurchaseTime,
+};
+
+const addLabelAlignment = (tick, idx, arr) => {
+    if (idx > 0 && arr.length) {
+        const prev_tick = arr[idx - 1];
+
+        if (+tick > +prev_tick.tick) tick.align_label = 'top';
+        if (+tick.tick < +prev_tick.tick) tick.align_label = 'bottom';
+        if (+tick.tick === +prev_tick.tick) tick.align_label = prev_tick.align_label;
+    }
+
+    return tick;
+};
+
+const createTickMarkers = contract_info => {
+    const tick_stream = unique(contract_info.tick_stream, 'epoch').map(addLabelAlignment);
+    const result = [];
+
+    tick_stream.forEach((tick, idx) => {
+        const is_entry_spot = idx === 0 && +tick.epoch !== contract_info.exit_tick_time;
+        const is_middle_spot = idx > 0 && +tick.epoch !== +contract_info.exit_tick_time;
+        const is_exit_spot =
+            +tick.epoch === +contract_info.exit_tick_time ||
+            getSpotCount(contract_info, idx) === contract_info.tick_count;
+
+        let marker_config;
+        if (is_entry_spot) {
+            marker_config = createMarkerSpotEntry(contract_info);
+        } else if (is_middle_spot) {
+            marker_config = createMarkerSpotMiddle(contract_info, tick, idx);
+        } else if (is_exit_spot) {
+            tick.align_label = 'top'; // force exit spot label to be 'top' to avoid overlapping
+            marker_config = createMarkerSpotExit(contract_info, tick, idx);
+        }
+
+        if (marker_config) {
+            result.push(marker_config);
+        }
+    });
+    return result;
+};
diff --git a/packages/shared/src/utils/helpers/chart-notifications.js b/packages/shared/src/utils/helpers/chart-notifications.js
new file mode 100644
index 000000000000..c346362b7bf4
--- /dev/null
+++ b/packages/shared/src/utils/helpers/chart-notifications.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { localize, Localize } from '@deriv/translations';
+
+export const switch_to_tick_chart = {
+    key: 'switch_to_tick_chart',
+    header: localize('This chart display is not ideal for tick contracts'),
+    message: <Localize i18n_default_text='Please change the chart duration to tick for a better trading experience.' />,
+    type: 'info',
+};
diff --git a/packages/shared/src/utils/helpers/contract-type.js b/packages/shared/src/utils/helpers/contract-type.js
new file mode 100644
index 000000000000..d41d9439da07
--- /dev/null
+++ b/packages/shared/src/utils/helpers/contract-type.js
@@ -0,0 +1,599 @@
+import { WS } from '../../services';
+import { getPropertyValue, cloneObject } from '../object';
+import { isTimeValid, minDate, toMoment } from '../date';
+import { shouldShowCancellation } from '../contract';
+
+import ServerTime from '../../services/server-time';
+import { localize } from '@deriv/translations';
+
+import { getUnitMap } from './details';
+import { buildBarriersConfig } from './barrier';
+import { buildDurationConfig, hasIntradayDurationUnit } from './duration';
+import { buildForwardStartingConfig, isSessionAvailable } from './start-date';
+import {
+    unsupported_contract_types_list,
+    getContractCategoriesConfig,
+    getContractTypesConfig,
+    getLocalizedBasis,
+} from '../constants/contract';
+
+const ContractType = (() => {
+    let available_contract_types = {};
+    let available_categories = {};
+    let contract_types;
+    const trading_events = {};
+    const trading_times = {};
+    let has_only_forward_starting_contracts = false;
+
+    const buildContractTypesConfig = symbol =>
+        WS.storage.contractsFor(symbol).then(r => {
+            const has_contracts = getPropertyValue(r, ['contracts_for']);
+            has_only_forward_starting_contracts =
+                has_contracts && !r.contracts_for.available.find(contract => contract.start_type !== 'forward');
+            if (!has_contracts || has_only_forward_starting_contracts) return;
+            const contract_categories = getContractCategoriesConfig();
+            contract_types = getContractTypesConfig(symbol);
+
+            available_contract_types = {};
+            available_categories = cloneObject(contract_categories); // To preserve the order (will clean the extra items later in this function)
+
+            r.contracts_for.available.forEach(contract => {
+                const type = Object.keys(contract_types).find(
+                    key =>
+                        contract_types[key].trade_types.indexOf(contract.contract_type) !== -1 &&
+                        (typeof contract_types[key].barrier_count === 'undefined' ||
+                            +contract_types[key].barrier_count === contract.barriers) // To distinguish betweeen Rise/Fall & Higher/Lower
+                );
+
+                if (!type) return; // ignore unsupported contract types
+
+                /*
+            add to this config if a value you are looking for does not exist yet
+            accordingly create a function to retrieve the value
+            config: {
+                has_spot: 1,
+                durations: {
+                    min_max: {
+                        spot: {
+                            tick    : { min: 5,     max: 10 },    // value in ticks, as cannot convert to seconds
+                            intraday: { min: 18000, max: 86400 }, // all values converted to seconds
+                            daily   : { min: 86400, max: 432000 },
+                        },
+                        forward: {
+                            intraday: { min: 18000, max: 86400 },
+                        },
+                    },
+                    units_display: {
+                        spot: [
+                            { text: 'ticks',   value: 't' },
+                            { text: 'seconds', value: 's' },
+                            { text: 'minutes', value: 'm' },
+                            { text: 'hours',   value: 'h' },
+                            { text: 'days',    value: 'd' },
+                        ],
+                        forward: [
+                            { text: 'days',    value: 'd' },
+                        ],
+                    },
+                },
+                forward_starting_dates: [
+                    { text: 'Mon - 19 Mar, 2018', value: 1517356800, sessions: [{ open: obj_moment, close: obj_moment }] },
+                    { text: 'Tue - 20 Mar, 2018', value: 1517443200, sessions: [{ open: obj_moment, close: obj_moment }] },
+                    { text: 'Wed - 21 Mar, 2018', value: 1517529600, sessions: [{ open: obj_moment, close: obj_moment }] },
+                ],
+                trade_types: {
+                    'CALL': 'Higher',
+                    'PUT' : 'Lower',
+                },
+                barriers: {
+                    count   : 2,
+                    tick    : { high_barrier: '+1.12', low_barrier : '-1.12' },
+                    intraday: { high_barrier: '+2.12', low_barrier : '-2.12' },
+                    daily   : { high_barrier: 1111,    low_barrier : 1093 },
+                },
+            }
+            */
+
+                if (!available_contract_types[type]) {
+                    // extend contract_categories to include what is needed to create the contract list
+                    const sub_cats =
+                        available_categories[
+                            Object.keys(available_categories).find(
+                                key => available_categories[key].indexOf(type) !== -1
+                            )
+                        ];
+
+                    if (!sub_cats) return;
+
+                    sub_cats[sub_cats.indexOf(type)] = { value: type, text: contract_types[type].title };
+
+                    // populate available contract types
+                    available_contract_types[type] = cloneObject(contract_types[type]);
+                }
+                const config = available_contract_types[type].config || {};
+
+                // set config values
+                config.has_spot = config.has_spot || contract.start_type === 'spot';
+                config.durations = !config.hide_duration && buildDurationConfig(contract, config.durations);
+                config.trade_types = buildTradeTypesConfig(contract, config.trade_types);
+                config.barriers = buildBarriersConfig(contract, config.barriers);
+                config.forward_starting_dates = buildForwardStartingConfig(contract, config.forward_starting_dates);
+                config.multiplier_range = contract.multiplier_range;
+                config.cancellation_range = contract.cancellation_range;
+
+                available_contract_types[type].config = config;
+            });
+
+            // cleanup categories
+            Object.keys(available_categories).forEach(key => {
+                available_categories[key] = available_categories[key].filter(item => typeof item === 'object');
+                if (available_categories[key].length === 0) {
+                    delete available_categories[key];
+                }
+            });
+        });
+
+    const buildTradeTypesConfig = (contract, trade_types = {}) => {
+        trade_types[contract.contract_type] = contract.contract_display;
+        return trade_types;
+    };
+
+    const getArrayDefaultValue = (arr_new_values, value) =>
+        arr_new_values.indexOf(value) !== -1 ? value : arr_new_values[0];
+
+    const getContractValues = store => {
+        const {
+            contract_expiry_type,
+            contract_type,
+            basis,
+            duration_unit,
+            expiry_type,
+            multiplier,
+            start_date,
+            cancellation_duration,
+            symbol,
+        } = store;
+
+        if (!contract_type) return {};
+
+        const form_components = getComponents(contract_type);
+        const obj_basis = getBasis(contract_type, basis);
+        const obj_trade_types = getTradeTypes(contract_type);
+        const obj_start_dates = getStartDates(contract_type, start_date);
+        const obj_start_type = getStartType(obj_start_dates.start_date);
+        const obj_barrier = getBarriers(contract_type, contract_expiry_type);
+        const obj_duration_unit = getDurationUnit(duration_unit, contract_type, obj_start_type.contract_start_type);
+
+        const obj_duration_units_list = getDurationUnitsList(contract_type, obj_start_type.contract_start_type);
+        const obj_duration_units_min_max = getDurationMinMax(contract_type, obj_start_type.contract_start_type);
+
+        const obj_multiplier_range_list = getMultiplierRange(contract_type, multiplier);
+        const obj_cancellation = getCancellation(contract_type, cancellation_duration, symbol);
+        const obj_expiry_type = getExpiryType(obj_duration_units_list, expiry_type);
+        const obj_equal = getEqualProps(contract_type);
+
+        return {
+            ...form_components,
+            ...obj_basis,
+            ...obj_trade_types,
+            ...obj_start_dates,
+            ...obj_start_type,
+            ...obj_barrier,
+            ...obj_duration_unit,
+            ...obj_duration_units_list,
+            ...obj_duration_units_min_max,
+            ...obj_expiry_type,
+            ...obj_multiplier_range_list,
+            ...obj_cancellation,
+            ...obj_equal,
+        };
+    };
+
+    const getContractType = (list, contract_type) => {
+        const arr_list = Object.keys(list || {})
+            .reduce((k, l) => [...k, ...list[l].map(ct => ct.value)], [])
+            .filter(type => unsupported_contract_types_list.indexOf(type) === -1)
+            .sort((a, b) => (a === 'multiplier' || b === 'multiplier' ? -1 : 0));
+
+        return {
+            contract_type: getArrayDefaultValue(arr_list, contract_type),
+        };
+    };
+
+    const getComponents = c_type => {
+        return (
+            contract_types && {
+                form_components: ['duration', 'amount', ...contract_types[c_type].components].filter(
+                    component =>
+                        !(
+                            component === 'duration' &&
+                            contract_types[c_type].config &&
+                            contract_types[c_type].config.hide_duration
+                        )
+                ),
+            }
+        );
+    };
+
+    const getDurationUnitsList = (contract_type, contract_start_type) => ({
+        duration_units_list:
+            getPropertyValue(available_contract_types, [
+                contract_type,
+                'config',
+                'durations',
+                'units_display',
+                contract_start_type,
+            ]) || [],
+    });
+
+    const getDurationUnit = (duration_unit, contract_type, contract_start_type) => {
+        const duration_units =
+            getPropertyValue(available_contract_types, [
+                contract_type,
+                'config',
+                'durations',
+                'units_display',
+                contract_start_type,
+            ]) || [];
+        const arr_units = [];
+        duration_units.forEach(obj => {
+            arr_units.push(obj.value);
+        });
+
+        return {
+            duration_unit: getArrayDefaultValue(arr_units, duration_unit),
+        };
+    };
+
+    const getDurationMinMax = (contract_type, contract_start_type, contract_expiry_type) => {
+        let duration_min_max =
+            getPropertyValue(available_contract_types, [
+                contract_type,
+                'config',
+                'durations',
+                'min_max',
+                contract_start_type,
+            ]) || {};
+
+        if (contract_expiry_type) {
+            duration_min_max = duration_min_max[contract_expiry_type] || {};
+        }
+
+        return { duration_min_max };
+    };
+
+    const getFullContractTypes = () => available_contract_types;
+
+    const getStartType = start_date => ({
+        // Number(0) refers to 'now'
+        contract_start_type: start_date === Number(0) ? 'spot' : 'forward',
+    });
+
+    const getStartDates = (contract_type, current_start_date) => {
+        const config = getPropertyValue(available_contract_types, [contract_type, 'config']);
+        const start_dates_list = [];
+
+        if (config?.has_spot) {
+            // Number(0) refers to 'now'
+            start_dates_list.push({ text: localize('Now'), value: Number(0) });
+        }
+        if (config?.forward_starting_dates) {
+            start_dates_list.push(...config.forward_starting_dates);
+        }
+
+        const start_date = start_dates_list.find(item => item.value === current_start_date)
+            ? current_start_date
+            : start_dates_list[0]?.value;
+
+        return { start_date, start_dates_list };
+    };
+
+    const getSessions = (contract_type, start_date) => {
+        const config = getPropertyValue(available_contract_types, [contract_type, 'config']) || {};
+        const sessions = ((config.forward_starting_dates || []).find(option => option.value === start_date) || {})
+            .sessions;
+        return { sessions };
+    };
+
+    const hours = [...Array(24).keys()].map(a => `0${a}`.slice(-2));
+    const minutes = [...Array(12).keys()].map(a => `0${a * 5}`.slice(-2));
+
+    const getValidTime = (sessions, compare_moment, start_moment) => {
+        if (sessions && !isSessionAvailable(sessions, compare_moment)) {
+            // first see if changing the minute brings it to the right session
+            compare_moment.minute(
+                minutes.find(m => isSessionAvailable(sessions, compare_moment.minute(m))) || compare_moment.format('mm')
+            );
+            // if not, also change the hour
+            if (!isSessionAvailable(sessions, compare_moment)) {
+                compare_moment.minute(0);
+                compare_moment.hour(
+                    hours.find(h => isSessionAvailable(sessions, compare_moment.hour(h), start_moment, true)) ||
+                        compare_moment.format('HH')
+                );
+                compare_moment.minute(
+                    minutes.find(m => isSessionAvailable(sessions, compare_moment.minute(m))) ||
+                        compare_moment.format('mm')
+                );
+            }
+        }
+        return compare_moment.format('HH:mm');
+    };
+
+    const buildMoment = (date, time) => {
+        const [hour, minute] = isTimeValid(time) ? time.split(':') : [0, 0];
+        return toMoment(date || ServerTime.get())
+            .hour(hour)
+            .minute(minute);
+    };
+
+    const getStartTime = (sessions, start_date, start_time) => ({
+        start_time: start_date ? getValidTime(sessions, buildMoment(start_date, start_time)) : null,
+    });
+
+    const getTradingEvents = async (date, underlying = null) => {
+        if (!date) {
+            return [];
+        }
+        if (!(date in trading_events)) {
+            const trading_times_response = await WS.tradingTimes(date);
+
+            if (getPropertyValue(trading_times_response, ['trading_times', 'markets'])) {
+                for (let i = 0; i < trading_times_response.trading_times.markets.length; i++) {
+                    const submarkets = trading_times_response.trading_times.markets[i].submarkets;
+                    if (submarkets) {
+                        for (let j = 0; j < submarkets.length; j++) {
+                            const symbols = submarkets[j].symbols;
+                            if (symbols) {
+                                for (let k = 0; k < symbols.length; k++) {
+                                    const symbol = symbols[k];
+                                    if (!trading_events[trading_times_response.echo_req.trading_times]) {
+                                        trading_events[trading_times_response.echo_req.trading_times] = {};
+                                    }
+                                    trading_events[trading_times_response.echo_req.trading_times][symbol.symbol] =
+                                        symbol.events;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        return trading_events[date][underlying];
+    };
+
+    const getTradingTimes = async (date, underlying = null) => {
+        if (!date) {
+            return [];
+        }
+
+        if (!(date in trading_times)) {
+            const trading_times_response = await WS.tradingTimes(date);
+
+            if (getPropertyValue(trading_times_response, ['trading_times', 'markets'])) {
+                for (let i = 0; i < trading_times_response.trading_times.markets.length; i++) {
+                    const submarkets = trading_times_response.trading_times.markets[i].submarkets;
+                    if (submarkets) {
+                        for (let j = 0; j < submarkets.length; j++) {
+                            const symbols = submarkets[j].symbols;
+                            if (symbols) {
+                                for (let k = 0; k < symbols.length; k++) {
+                                    const symbol = symbols[k];
+                                    if (!trading_times[trading_times_response.echo_req.trading_times]) {
+                                        trading_times[trading_times_response.echo_req.trading_times] = {};
+                                    }
+                                    trading_times[trading_times_response.echo_req.trading_times][symbol.symbol] = {
+                                        open: symbol.times.open,
+                                        close: symbol.times.close,
+                                    };
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        return underlying ? trading_times[date][underlying] : trading_times[date];
+    };
+
+    const getExpiryType = (duration_units_list, expiry_type) => {
+        if (duration_units_list) {
+            if (
+                (!expiry_type && duration_units_list.length > 0) ||
+                (duration_units_list.length === 1 && duration_units_list[0].value === 't')
+            ) {
+                return { expiry_type: 'duration' };
+            }
+            if (duration_units_list.length === 0) {
+                return {
+                    expiry_type: null,
+                };
+            }
+        }
+
+        return { expiry_type };
+    };
+
+    const getExpiryDate = (duration_units_list, expiry_date, expiry_type, start_date) => {
+        let proper_expiry_date = null;
+
+        if (expiry_type === 'endtime') {
+            const moment_start = toMoment(start_date);
+            const moment_expiry = toMoment(expiry_date);
+
+            if (!hasIntradayDurationUnit(duration_units_list)) {
+                const is_invalid = moment_expiry.isSameOrBefore(moment_start, 'day');
+                proper_expiry_date = (is_invalid ? moment_start.clone().add(1, 'day') : moment_expiry).format(
+                    'YYYY-MM-DD'
+                );
+            } else {
+                // forward starting contracts should only show today and tomorrow as expiry date
+                const is_invalid =
+                    moment_expiry.isBefore(moment_start, 'day') ||
+                    (start_date && moment_expiry.isAfter(moment_start.clone().add(1, 'day')));
+                proper_expiry_date = (is_invalid ? moment_start : moment_expiry).format('YYYY-MM-DD');
+            }
+        }
+
+        return { expiry_date: proper_expiry_date };
+    };
+
+    // It has to follow the correct order of checks:
+    // first check if end time is within available sessions
+    // then confirm that end time is at least 5 minute after start time
+    const getExpiryTime = (
+        expiry_date,
+        expiry_time,
+        expiry_type,
+        market_close_times,
+        sessions,
+        start_date,
+        start_time
+    ) => {
+        let end_time = null;
+
+        if (expiry_type === 'endtime') {
+            let market_close_time = '23:59:59';
+
+            if (market_close_times && market_close_times.length && market_close_times[0] !== '--') {
+                // Some of underlyings (e.g. Australian Index) have two close time during a day so we always select the further one as the end time of the contract.
+                market_close_time = market_close_times.slice(-1)[0];
+            }
+
+            // For contracts with a duration of more that 24 hours must set the expiry_time to the market's close time on the expiry date.
+            if (!start_date && ServerTime.get().isBefore(buildMoment(expiry_date), 'day')) {
+                end_time = market_close_time;
+            } else {
+                const start_moment = start_date ? buildMoment(start_date, start_time) : ServerTime.get();
+                const end_moment = buildMoment(expiry_date, expiry_time);
+
+                end_time = end_moment.format('HH:mm');
+                // When the contract is forwarding, and the duration is endtime, users can purchase the contract within 24 hours.
+                const expiry_sessions = [
+                    {
+                        open: start_moment.clone().add(5, 'minute'), // expiry time should be at least 5 minute after start_time
+                        close: minDate(
+                            start_moment.clone().add(24, 'hour'),
+                            buildMoment(expiry_date, market_close_time)
+                        ),
+                    },
+                ];
+
+                if (!isSessionAvailable(expiry_sessions, end_moment)) {
+                    end_time = getValidTime(expiry_sessions, end_moment.clone(), start_moment.clone());
+                }
+                if (end_moment.isSameOrBefore(start_moment) || end_moment.diff(start_moment, 'minute') < 5) {
+                    const is_end_of_day = start_moment.get('hours') === 23 && start_moment.get('minute') >= 55;
+                    const is_end_of_session =
+                        sessions && !isSessionAvailable(sessions, start_moment.clone().add(5, 'minutes'));
+                    end_time = start_moment.clone().add(is_end_of_day || is_end_of_session ? 0 : 5, 'minutes');
+                    // Set the end_time to be multiple of 5 to be equal as the SELECTED_TIME that shown to the client.
+                    end_time = setMinuteMultipleByFive(end_time).format('HH:mm');
+                }
+                // Set the expiry_time to 5 minute less than start_time for forwading contracts when the expiry_time is null and the expiry_date is tomorrow.
+                if (end_time === '00:00' && start_moment.isBefore(end_moment, 'day')) {
+                    end_time = start_moment.clone().subtract(5, 'minute').format('HH:mm');
+                }
+            }
+        }
+        return { expiry_time: end_time };
+    };
+
+    const setMinuteMultipleByFive = moment_obj => moment_obj.minute(Math.ceil(moment_obj.minute() / 5) * 5);
+
+    const getTradeTypes = contract_type => ({
+        trade_types: getPropertyValue(available_contract_types, [contract_type, 'config', 'trade_types']),
+    });
+
+    const getBarriers = (contract_type, expiry_type) => {
+        const barriers = getPropertyValue(available_contract_types, [contract_type, 'config', 'barriers']) || {};
+        const barrier_values = barriers[expiry_type] || {};
+        const barrier_1 = barrier_values.barrier || barrier_values.high_barrier || '';
+        const barrier_2 = barrier_values.low_barrier || '';
+        return {
+            barrier_count: barriers.count || 0,
+            barrier_1: barrier_1.toString(),
+            barrier_2: barrier_2.toString(),
+        };
+    };
+
+    const getBasis = (contract_type, basis) => {
+        const arr_basis = getPropertyValue(available_contract_types, [contract_type, 'basis']) || [];
+        const localized_basis = getLocalizedBasis();
+        const basis_list = arr_basis.reduce((cur, bas) => [...cur, { text: localized_basis[bas], value: bas }], []);
+
+        return {
+            basis_list,
+            basis: getArrayDefaultValue(arr_basis, basis),
+        };
+    };
+
+    const getMultiplierRange = (contract_type, multiplier) => {
+        const arr_multiplier =
+            getPropertyValue(available_contract_types, [contract_type, 'config', 'multiplier_range']) || [];
+
+        return {
+            multiplier_range_list: arr_multiplier.map(m => ({ text: `x${m}`, value: m })),
+            multiplier: getArrayDefaultValue(arr_multiplier, multiplier),
+        };
+    };
+
+    const getCancellation = (contract_type, cancellation_duration, symbol) => {
+        const arr_cancellation_range =
+            getPropertyValue(available_contract_types, [contract_type, 'config', 'cancellation_range']) || [];
+
+        const regex = new RegExp('^([0-9]+)|([a-zA-Z]+)$', 'g');
+        const getText = str => {
+            const [duration, unit] = str.match(regex);
+            const unit_map = getUnitMap();
+            return `${duration} ${unit_map[unit].name_plural}`;
+        };
+
+        const should_show_cancellation = shouldShowCancellation(symbol);
+
+        return {
+            cancellation_duration: getArrayDefaultValue(arr_cancellation_range, cancellation_duration),
+            cancellation_range_list: arr_cancellation_range.map(d => ({ text: `${getText(d)}`, value: d })),
+            ...(should_show_cancellation ? {} : { has_cancellation: false }),
+        };
+    };
+
+    const getEqualProps = contract_type => {
+        const base_contract_type = /^(.*)_equal$/.exec(contract_type)?.[1];
+
+        if (base_contract_type && !available_contract_types[base_contract_type]) {
+            return {
+                is_equal: 1,
+                has_equals_only: true,
+            };
+        }
+        return {};
+    };
+
+    return {
+        buildContractTypesConfig,
+        getBarriers,
+        getContractType,
+        getContractValues,
+        getDurationMinMax,
+        getDurationUnit,
+        getDurationUnitsList,
+        getFullContractTypes,
+        getExpiryDate,
+        getExpiryTime,
+        getExpiryType,
+        getSessions,
+        getStartTime,
+        getStartType,
+        getTradingEvents,
+        getTradingTimes,
+        getContractCategories: () => ({
+            contract_types_list: available_categories,
+            has_only_forward_starting_contracts,
+        }),
+    };
+})();
+
+export default ContractType;
diff --git a/packages/shared/src/utils/helpers/details.js b/packages/shared/src/utils/helpers/details.js
new file mode 100644
index 000000000000..cf1a585acaaf
--- /dev/null
+++ b/packages/shared/src/utils/helpers/details.js
@@ -0,0 +1,72 @@
+import { epochToMoment, formatMilliseconds, getDiffDuration } from '../date';
+import { localize } from '@deriv/translations';
+
+export const getDurationUnitValue = obj_duration => {
+    const duration_ms = obj_duration.asMilliseconds() / 1000;
+    // Check with isEndTime to find out if value of duration has decimals
+    // for days we do not require precision for End Time value since users cannot select with timepicker if not in same day
+    // Seconds is the smallest End Time duration displayed thus we can keep the same formatting as normal Duration
+
+    if (duration_ms >= 86400000) {
+        const duration = duration_ms / (1000 * 60 * 60 * 24);
+        return Math.floor(duration);
+    } else if (duration_ms >= 3600000 && duration_ms < 86400000) {
+        const duration = duration_ms / (1000 * 60 * 60);
+        const is_end_time = isEndTime(duration);
+        const has_seconds = isEndTime(duration_ms / (1000 * 60));
+        const string_format = has_seconds ? 'HH[h] mm[m] ss[s]' : 'HH[h] mm[m]';
+
+        return is_end_time
+            ? formatMilliseconds(duration_ms, string_format)
+            : Math.floor(duration_ms / (1000 * 60 * 60));
+    } else if (duration_ms >= 60000 && duration_ms < 3600000) {
+        const duration = duration_ms / (1000 * 60);
+        const is_end_time = isEndTime(duration);
+        return is_end_time ? formatMilliseconds(duration_ms, 'mm[m] ss[s]') : Math.floor(duration_ms / (1000 * 60));
+    } else if (duration_ms >= 1000 && duration_ms < 60000) {
+        return Math.floor(duration_ms / 1000);
+    }
+    return Math.floor(duration_ms / 1000);
+};
+
+export const isEndTime = duration => duration % 1 !== 0;
+
+export const getUnitMap = () => {
+    return {
+        d: { name_plural: localize('days'), name_singular: localize('day') },
+        h: { name_plural: localize('hours'), name_singular: localize('hour') },
+        m: { name_plural: localize('minutes'), name_singular: localize('minute') },
+        s: { name: localize('seconds') },
+    };
+};
+
+export const getDurationUnitText = obj_duration => {
+    const unit_map = getUnitMap();
+    const duration_ms = obj_duration.asMilliseconds() / 1000;
+    // return empty suffix string if duration is End Time set except for days and seconds, refer to L18 and L19
+
+    if (duration_ms) {
+        if (duration_ms >= 86400000) {
+            const days_value = duration_ms / 86400000;
+            return days_value <= 2 ? unit_map.d.name_singular : unit_map.d.name_plural;
+        } else if (duration_ms >= 3600000 && duration_ms < 86400000) {
+            if (isEndTime(duration_ms / (1000 * 60 * 60))) return '';
+            return duration_ms === 3600000 ? unit_map.h.name_singular : unit_map.h.name_plural;
+        } else if (duration_ms >= 60000 && duration_ms < 3600000) {
+            if (isEndTime(duration_ms / (1000 * 60))) return '';
+            return duration_ms === 60000 ? unit_map.m.name_singular : unit_map.m.name_plural;
+        } else if (duration_ms >= 1000 && duration_ms < 60000) {
+            return unit_map.s.name;
+        }
+    }
+    return unit_map.s.name;
+};
+
+export const getDurationPeriod = contract_info =>
+    getDiffDuration(
+        epochToMoment(contract_info.date_start || contract_info.purchase_time),
+        epochToMoment(contract_info.date_expiry)
+    );
+
+export const getDurationTime = contract_info =>
+    contract_info.tick_count ? contract_info.tick_count : getDurationUnitValue(getDurationPeriod(contract_info));
diff --git a/packages/shared/src/utils/helpers/duration.js b/packages/shared/src/utils/helpers/duration.js
new file mode 100644
index 000000000000..6cabf969565d
--- /dev/null
+++ b/packages/shared/src/utils/helpers/duration.js
@@ -0,0 +1,132 @@
+import { localize } from '@deriv/translations';
+import { toMoment } from '../date';
+
+const getDurationMaps = () => ({
+    t: { display: localize('Ticks'), order: 1 },
+    s: { display: localize('Seconds'), order: 2, to_second: 1 },
+    m: { display: localize('Minutes'), order: 3, to_second: 60 },
+    h: { display: localize('Hours'), order: 4, to_second: 60 * 60 },
+    d: { display: localize('Days'), order: 5, to_second: 60 * 60 * 24 },
+});
+
+export const buildDurationConfig = (contract, durations = { min_max: {}, units_display: {} }) => {
+    durations.min_max[contract.start_type] = durations.min_max[contract.start_type] || {};
+    durations.units_display[contract.start_type] = durations.units_display[contract.start_type] || [];
+
+    const obj_min = getDurationFromString(contract.min_contract_duration);
+    const obj_max = getDurationFromString(contract.max_contract_duration);
+
+    durations.min_max[contract.start_type][contract.expiry_type] = {
+        min: convertDurationUnit(obj_min.duration, obj_min.unit, 's'),
+        max: convertDurationUnit(obj_max.duration, obj_max.unit, 's'),
+    };
+
+    const arr_units = [];
+    durations.units_display[contract.start_type].forEach(obj => {
+        arr_units.push(obj.value);
+    });
+
+    const duration_maps = getDurationMaps();
+
+    if (/^tick|daily$/.test(contract.expiry_type)) {
+        if (arr_units.indexOf(obj_min.unit) === -1) {
+            arr_units.push(obj_min.unit);
+        }
+    } else {
+        Object.keys(duration_maps).forEach(u => {
+            if (
+                u !== 'd' && // when the expiray_type is intraday, the supported units are seconds, minutes and hours.
+                arr_units.indexOf(u) === -1 &&
+                duration_maps[u].order >= duration_maps[obj_min.unit].order &&
+                duration_maps[u].order <= duration_maps[obj_max.unit].order
+            ) {
+                arr_units.push(u);
+            }
+        });
+    }
+
+    durations.units_display[contract.start_type] = arr_units
+        .sort((a, b) => (duration_maps[a].order > duration_maps[b].order ? 1 : -1))
+        .reduce((o, c) => [...o, { text: duration_maps[c].display, value: c }], []);
+
+    return durations;
+};
+
+export const convertDurationUnit = (value, from_unit, to_unit) => {
+    if (!value || !from_unit || !to_unit || isNaN(parseInt(value))) {
+        return null;
+    }
+
+    const duration_maps = getDurationMaps();
+
+    if (from_unit === to_unit || !('to_second' in duration_maps[from_unit])) {
+        return value;
+    }
+
+    return (value * duration_maps[from_unit].to_second) / duration_maps[to_unit].to_second;
+};
+
+const getDurationFromString = duration_string => {
+    const duration = duration_string.toString().match(/[a-zA-Z]+|[0-9]+/g);
+    return {
+        duration: +duration[0], // converts string to numbers
+        unit: duration[1],
+    };
+};
+
+export const getExpiryType = store => {
+    const { duration_unit, expiry_date, expiry_type, duration_units_list } = store;
+    const server_time = store.root_store.common.server_time;
+
+    const duration_is_day = expiry_type === 'duration' && duration_unit === 'd';
+    const expiry_is_after_today =
+        expiry_type === 'endtime' &&
+        (toMoment(expiry_date).isAfter(toMoment(server_time), 'day') || !hasIntradayDurationUnit(duration_units_list));
+
+    let contract_expiry_type = 'daily';
+    if (!duration_is_day && !expiry_is_after_today) {
+        contract_expiry_type = duration_unit === 't' ? 'tick' : 'intraday';
+    }
+
+    return contract_expiry_type;
+};
+
+export const convertDurationLimit = (value, unit) => {
+    if (!(value >= 0) || !unit || !Number.isInteger(value)) {
+        return null;
+    }
+
+    if (unit === 'm') {
+        const minute = value / 60;
+        return minute >= 1 ? Math.floor(minute) : 1;
+    } else if (unit === 'h') {
+        const hour = value / (60 * 60);
+        return hour >= 1 ? Math.floor(hour) : 1;
+    } else if (unit === 'd') {
+        const day = value / (60 * 60 * 24);
+        return day >= 1 ? Math.floor(day) : 1;
+    }
+
+    return value;
+};
+
+export const hasIntradayDurationUnit = duration_units_list =>
+    duration_units_list.some(unit => ['m', 'h'].indexOf(unit.value) !== -1);
+
+/**
+ * On switching symbols, end_time value of volatility indices should be set to today
+ *
+ * @param {String} symbol
+ * @param {String} expiry_type
+ * @returns {*}
+ */
+export const resetEndTimeOnVolatilityIndices = (symbol, expiry_type) =>
+    /^R_/.test(symbol) && expiry_type === 'endtime' ? toMoment(null).format('DD MMM YYYY') : null;
+
+export const getDurationMinMaxValues = (duration_min_max, contract_expiry_type, duration_unit) => {
+    if (!duration_min_max[contract_expiry_type]) return [];
+    const max_value = convertDurationLimit(+duration_min_max[contract_expiry_type].max, duration_unit);
+    const min_value = convertDurationLimit(+duration_min_max[contract_expiry_type].min, duration_unit);
+
+    return [min_value, max_value];
+};
diff --git a/packages/shared/src/utils/helpers/format-response.js b/packages/shared/src/utils/helpers/format-response.js
new file mode 100644
index 000000000000..300a58656955
--- /dev/null
+++ b/packages/shared/src/utils/helpers/format-response.js
@@ -0,0 +1,30 @@
+import { getUnsupportedContracts } from '../constants';
+import { getSymbolDisplayName } from './active-symbols';
+
+import { getMarketInformation } from './market-underlying';
+
+const isUnSupportedContract = portfolio_pos =>
+    !!getUnsupportedContracts()[portfolio_pos.contract_type] || // check unsupported contract type
+    !!portfolio_pos.is_forward_starting; // for forward start contracts
+
+export const formatPortfolioPosition = (portfolio_pos, active_symbols = [], indicative) => {
+    const purchase = parseFloat(portfolio_pos.buy_price);
+    const payout = parseFloat(portfolio_pos.payout);
+    const display_name = getSymbolDisplayName(active_symbols, getMarketInformation(portfolio_pos.shortcode).underlying);
+    const transaction_id =
+        portfolio_pos.transaction_id || (portfolio_pos.transaction_ids && portfolio_pos.transaction_ids.buy);
+
+    return {
+        contract_info: portfolio_pos,
+        details: portfolio_pos.longcode.replace(/\n/g, '<br />'),
+        display_name,
+        id: portfolio_pos.contract_id,
+        indicative: isNaN(indicative) || !indicative ? 0 : indicative,
+        payout,
+        purchase,
+        reference: +transaction_id,
+        type: portfolio_pos.contract_type,
+        is_unsupported: isUnSupportedContract(portfolio_pos),
+        contract_update: portfolio_pos.limit_order,
+    };
+};
diff --git a/packages/shared/src/utils/helpers/index.js b/packages/shared/src/utils/helpers/index.js
new file mode 100644
index 000000000000..1cf5560cae27
--- /dev/null
+++ b/packages/shared/src/utils/helpers/index.js
@@ -0,0 +1,13 @@
+export * from './active-symbols';
+export * from './barrier';
+export * from './barriers';
+export * from './chart-marker-helpers';
+export * from './chart-markers';
+export * from './chart-notifications';
+export * from './details';
+export * from './duration';
+export * from './format-response';
+export * from './logic';
+export * from './market-underlying';
+export * from './portfolio-notifications';
+export * from './start-date';
diff --git a/packages/shared/src/utils/helpers/logic.js b/packages/shared/src/utils/helpers/logic.js
new file mode 100644
index 000000000000..59343b6d40d8
--- /dev/null
+++ b/packages/shared/src/utils/helpers/logic.js
@@ -0,0 +1,102 @@
+import moment from 'moment';
+import { isEmptyObject } from '../object';
+import { isUserSold } from '../contract';
+
+import ServerTime from '../../services/server-time';
+
+export const getChartConfig = contract_info => {
+    if (isEmptyObject(contract_info)) return null;
+    const start = contract_info.date_start;
+    const end = getEndTime(contract_info);
+    const granularity = getChartGranularity(start, end || null);
+    const chart_type = getChartType(start, end || null);
+
+    return {
+        chart_type: contract_info.tick_count ? 'mountain' : chart_type,
+        granularity: contract_info.tick_count ? 0 : granularity,
+        end_epoch: end,
+        start_epoch: start,
+        scroll_to_epoch: contract_info.purchase_time,
+    };
+};
+
+const hour_to_granularity_map = [
+    [1, 0],
+    [2, 120],
+    [6, 600],
+    [24, 900],
+    [5 * 24, 3600],
+    [30 * 24, 14400],
+];
+
+const getExpiryTime = time => time || ServerTime.get().unix();
+
+export const getChartType = (start_time, expiry_time) => {
+    const duration = moment.duration(moment.unix(getExpiryTime(expiry_time)).diff(moment.unix(start_time))).asHours();
+    // use line chart if duration is equal or less than 1 hour
+    return duration <= 1 ? 'mountain' : 'candle';
+};
+
+export const getChartGranularity = (start_time, expiry_time) =>
+    calculateGranularity(getExpiryTime(expiry_time) - start_time);
+
+export const calculateGranularity = duration =>
+    (hour_to_granularity_map.find(m => duration <= m[0] * 3600) || [null, 86400])[1];
+
+export const isContractElapsed = (contract_info, tick) => {
+    if (isEmptyObject(tick) || isEmptyObject(contract_info)) return false;
+    const end_time = getEndTime(contract_info);
+    if (end_time && tick.epoch) {
+        const seconds = moment.duration(moment.unix(tick.epoch).diff(moment.unix(end_time))).asSeconds();
+        return seconds >= 2;
+    }
+    return false;
+};
+
+export const isEndedBeforeCancellationExpired = contract_info =>
+    !!(contract_info.cancellation && getEndTime(contract_info) < contract_info.cancellation.date_expiry);
+
+export const isSoldBeforeStart = contract_info =>
+    contract_info.sell_time && +contract_info.sell_time < +contract_info.date_start;
+
+export const isStarted = contract_info =>
+    !contract_info.is_forward_starting || contract_info.current_spot_time > contract_info.date_start;
+
+export const isUserCancelled = contract_info => contract_info.status === 'cancelled';
+
+export const isCancellationExpired = contract_info =>
+    !!(contract_info.cancellation.date_expiry < ServerTime.get().unix());
+
+export const getEndTime = contract_info => {
+    const {
+        exit_tick_time,
+        date_expiry,
+        is_expired,
+        is_path_dependent,
+        sell_time,
+        status,
+        tick_count: is_tick_contract,
+    } = contract_info;
+
+    const is_finished = is_expired && status !== 'open';
+
+    if (!is_finished && !isUserSold(contract_info) && !isUserCancelled(contract_info)) return undefined;
+
+    if (isUserSold(contract_info)) {
+        return sell_time > date_expiry ? date_expiry : sell_time;
+    } else if (!is_tick_contract && sell_time > date_expiry) {
+        return date_expiry;
+    }
+
+    return date_expiry > exit_tick_time && !+is_path_dependent ? date_expiry : exit_tick_time;
+};
+
+export const getBuyPrice = contract_store => {
+    return contract_store.contract_info.buy_price;
+};
+
+/**
+ * Set contract update form initial values
+ * @param {object} contract_update - contract_update response
+ * @param {object} limit_order - proposal_open_contract.limit_order response
+ */
diff --git a/packages/shared/src/utils/helpers/market-underlying.js b/packages/shared/src/utils/helpers/market-underlying.js
new file mode 100644
index 000000000000..7915a889d04e
--- /dev/null
+++ b/packages/shared/src/utils/helpers/market-underlying.js
@@ -0,0 +1,30 @@
+import { getMarketNamesMap, getContractConfig } from '../constants/contract';
+
+/**
+ * Fetch market information from shortcode
+ * @param shortcode: string
+ * @returns {{underlying: string, category: string}}
+ */
+
+// TODO: Combine with  extractInfoFromShortcode function in shared, both are currently used
+export const getMarketInformation = shortcode => {
+    const market_info = {
+        category: '',
+        underlying: '',
+    };
+
+    const pattern = new RegExp(
+        '^([A-Z]+)_((1HZ[0-9-V]+)|((CRASH|BOOM)[0-9\\d]+[A-Z]?)|(OTC_[A-Z0-9]+)|R_[\\d]{2,3}|[A-Z]+)'
+    );
+    const extracted = pattern.exec(shortcode);
+    if (extracted !== null) {
+        market_info.category = extracted[1].toLowerCase();
+        market_info.underlying = extracted[2];
+    }
+
+    return market_info;
+};
+
+export const getMarketName = underlying => (underlying ? getMarketNamesMap()[underlying.toUpperCase()] : null);
+
+export const getTradeTypeName = category => (category ? getContractConfig()[category.toUpperCase()].name : null);
diff --git a/packages/shared/src/utils/helpers/portfolio-notifications.js b/packages/shared/src/utils/helpers/portfolio-notifications.js
new file mode 100644
index 000000000000..1d15a30fd7d9
--- /dev/null
+++ b/packages/shared/src/utils/helpers/portfolio-notifications.js
@@ -0,0 +1,33 @@
+import React from 'react';
+// import { Money } from '@deriv/components';
+import { localize, Localize } from '@deriv/translations';
+
+export const contractSold = (currency, sold_for, Money) => ({
+    key: 'contract_sold',
+    header: localize('Contract sold'),
+    message: (
+        <Localize
+            i18n_default_text='Contract was sold for <0 />.'
+            components={[<Money key={sold_for} amount={sold_for} currency={currency} show_currency />]}
+        />
+    ),
+    type: 'contract_sold',
+    size: 'small',
+    should_hide_close_btn: true,
+    is_auto_close: true,
+});
+
+export const contractCancelled = () => ({
+    key: 'contract_sold',
+    header: localize('Contract cancelled'),
+    message: (
+        <Localize
+            i18n_default_text='Contract was cancelled.'
+            // components={[ <Money key={sold_for} amount={sold_for} currency={currency} /> ]}
+        />
+    ),
+    type: 'contract_sold',
+    size: 'small',
+    should_hide_close_btn: true,
+    is_auto_close: true,
+});
diff --git a/packages/shared/src/utils/helpers/start-date.js b/packages/shared/src/utils/helpers/start-date.js
new file mode 100644
index 000000000000..ff319a0fc849
--- /dev/null
+++ b/packages/shared/src/utils/helpers/start-date.js
@@ -0,0 +1,46 @@
+import ServerTime from '../../services/server-time';
+import { toMoment } from '../date';
+
+export const buildForwardStartingConfig = (contract, forward_starting_dates) => {
+    const forward_starting_config = [];
+
+    if ((contract.forward_starting_options || []).length) {
+        contract.forward_starting_options.forEach(option => {
+            const duplicated_option = forward_starting_config.find(opt => opt.value === parseInt(option.date));
+            const current_session = { open: toMoment(option.open), close: toMoment(option.close) };
+            if (duplicated_option) {
+                duplicated_option.sessions.push(current_session);
+            } else {
+                forward_starting_config.push({
+                    text: toMoment(option.date).format('ddd - DD MMM, YYYY'),
+                    value: parseInt(option.date),
+                    sessions: [current_session],
+                });
+            }
+        });
+    }
+
+    return forward_starting_config.length ? forward_starting_config : forward_starting_dates;
+};
+
+// returns false if same as now
+const isBeforeDate = (compare_moment, start_moment, should_only_check_hour) => {
+    const now_moment = toMoment(start_moment);
+    if (should_only_check_hour) {
+        now_moment.minute(0).second(0);
+    }
+    return compare_moment.isBefore(now_moment) && now_moment.unix() !== compare_moment.unix();
+};
+
+export const isSessionAvailable = (
+    sessions = [],
+    compare_moment = toMoment(ServerTime.get()),
+    start_moment = toMoment(ServerTime.get()),
+    should_only_check_hour = false
+) =>
+    !isBeforeDate(compare_moment, ServerTime.get(), should_only_check_hour) &&
+    !isBeforeDate(compare_moment, start_moment, should_only_check_hour) &&
+    (!sessions.length ||
+        !!sessions.find(session =>
+            compare_moment.isBetween(session.open, session.close, should_only_check_hour ? 'hour' : null, '[]')
+        ));
diff --git a/packages/trader/src/Stores/Modules/Portfolio/Helpers/portfolio-notifications.js b/packages/trader/src/Stores/Modules/Portfolio/Helpers/portfolio-notifications.js
index 2f32588530ac..1d15a30fd7d9 100644
--- a/packages/trader/src/Stores/Modules/Portfolio/Helpers/portfolio-notifications.js
+++ b/packages/trader/src/Stores/Modules/Portfolio/Helpers/portfolio-notifications.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import { Money } from '@deriv/components';
+// import { Money } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 
-export const contractSold = (currency, sold_for) => ({
+export const contractSold = (currency, sold_for, Money) => ({
     key: 'contract_sold',
     header: localize('Contract sold'),
     message: (
diff --git a/packages/trader/src/Stores/Modules/Trading/trade-store.js b/packages/trader/src/Stores/Modules/Trading/trade-store.js
index e77eae4bc7b2..771110ff43e6 100644
--- a/packages/trader/src/Stores/Modules/Trading/trade-store.js
+++ b/packages/trader/src/Stores/Modules/Trading/trade-store.js
@@ -31,7 +31,7 @@ import { processTradeParams } from './Helpers/process';
 import { createProposalRequests, getProposalErrorField, getProposalInfo } from './Helpers/proposal';
 import { getBarrierPipSize } from './Helpers/barrier';
 import { setLimitOrderBarriers } from '../Contract/Helpers/limit-orders';
-import { ChartBarrierStore } from '../SmartChart/chart-barrier-store';
+// import { ChartBarrierStore } from '../SmartChart/chart-barrier-store';
 import { BARRIER_COLORS } from '../SmartChart/Constants/barriers';
 import { isBarrierSupported, removeBarrier } from '../SmartChart/Helpers/barriers';
 import BaseStore from '../../base-store';
@@ -259,7 +259,7 @@ export default class TradeStore extends BaseStore {
 
     @action.bound
     clearContracts = () => {
-        this.root_store.modules.contract_trade.contracts = [];
+        this.root_store.contract_trade.contracts = [];
     };
 
     @action.bound
@@ -512,6 +512,7 @@ export default class TradeStore extends BaseStore {
                 });
             }
         } else {
+            const ChartBarrierStore = this.root_store.chart_barrier_store;
             purchase_spot_barrier = new ChartBarrierStore(position.contract_info.entry_spot);
             purchase_spot_barrier.key = key;
             purchase_spot_barrier.draggable = false;
@@ -569,6 +570,7 @@ export default class TradeStore extends BaseStore {
         if (isBarrierSupported(contract_type)) {
             const color = this.root_store.ui.is_dark_mode_on ? BARRIER_COLORS.DARK_GRAY : BARRIER_COLORS.GRAY;
             // create barrier only when it's available in response
+            const ChartBarrierStore = this.root_store.chart_barrier_store;
             this.main_barrier = new ChartBarrierStore(barrier || high_barrier, low_barrier, this.onChartBarrierChange, {
                 color,
             });
@@ -632,7 +634,7 @@ export default class TradeStore extends BaseStore {
                             const { category, underlying } = extractInfoFromShortcode(shortcode);
                             const is_digit_contract = isDigitContractType(category.toUpperCase());
                             const contract_type = category.toUpperCase();
-                            this.root_store.modules.contract_trade.addContract({
+                            this.root_store.contract_trade.addContract({
                                 contract_id,
                                 start_time,
                                 longcode,
@@ -641,7 +643,7 @@ export default class TradeStore extends BaseStore {
                                 contract_type,
                                 is_tick_contract,
                             });
-                            this.root_store.modules.portfolio.onBuyResponse({
+                            this.root_store.portfolio.onBuyResponse({
                                 contract_id,
                                 longcode,
                                 contract_type,
@@ -859,8 +861,8 @@ export default class TradeStore extends BaseStore {
                 chart: {
                     toolbar_position: this.root_store.ui.is_chart_layout_default ? 'bottom' : 'left',
                     chart_asset_info: this.root_store.ui.is_chart_asset_info_visible ? 'visible' : 'hidden',
-                    chart_type: this.root_store.modules.contract_trade.chart_type,
-                    granularity: this.root_store.modules.contract_trade.granularity,
+                    chart_type: this.root_store.contract_trade.chart_type,
+                    granularity: this.root_store.contract_trade.granularity,
                 },
             },
         };
@@ -1163,7 +1165,7 @@ export default class TradeStore extends BaseStore {
         this.disposeThemeChange();
         this.is_trade_component_mounted = false;
         // TODO: Find a more elegant solution to unmount contract-trade-store
-        this.root_store.modules.contract_trade.onUnmount();
+        this.root_store.contract_trade.onUnmount();
         this.refresh();
         this.resetErrorServices();
         if (this.root_store.notifications.is_notifications_visible) {
diff --git a/packages/trader/src/Stores/Modules/index.js b/packages/trader/src/Stores/Modules/index.js
index 61c3a8e725dd..c31d1e488a07 100644
--- a/packages/trader/src/Stores/Modules/index.js
+++ b/packages/trader/src/Stores/Modules/index.js
@@ -1,6 +1,6 @@
-import ContractReplayStore from './Contract/contract-replay-store';
-import ContractTradeStore from './Contract/contract-trade-store';
-import PortfolioStore from './Portfolio/portfolio-store';
+// import ContractReplayStore from './Contract/contract-replay-store';
+// import ContractTradeStore from './Contract/contract-trade-store';
+// import PortfolioStore from './Portfolio/portfolio-store';
 import ProfitTableStore from './Profit/profit-store';
 import StatementStore from './Statement/statement-store';
 import TradeStore from './Trading/trade-store';
@@ -8,9 +8,9 @@ import TradeStore from './Trading/trade-store';
 export default class ModulesStore {
     constructor(root_store, core_store) {
         this.cashier = core_store.modules.cashier;
-        this.contract_replay = new ContractReplayStore({ root_store });
-        this.contract_trade = new ContractTradeStore({ root_store });
-        this.portfolio = new PortfolioStore({ root_store });
+        // this.contract_replay = new ContractReplayStore({ root_store });
+        // this.contract_trade = new ContractTradeStore({ root_store });
+        // this.portfolio = new PortfolioStore({ root_store });
         this.profit_table = new ProfitTableStore({ root_store });
         this.statement = new StatementStore({ root_store });
         this.trade = new TradeStore({ root_store });
diff --git a/packages/trader/src/Stores/index.js b/packages/trader/src/Stores/index.js
index fef448cd42cb..c58801e8021c 100644
--- a/packages/trader/src/Stores/index.js
+++ b/packages/trader/src/Stores/index.js
@@ -10,5 +10,9 @@ export default class RootStore {
         this.rudderstack = core_store.rudderstack;
         this.pushwoosh = core_store.pushwoosh;
         this.notifications = core_store.notifications;
+        this.contract_replay = core_store.contract_replay;
+        this.contract_trade = core_store.contract_trade;
+        this.portfolio = core_store.portfolio;
+        this.chart_barrier_store = core_store.chart_barrier_store;
     }
 }
diff --git a/packages/trader/tsconfig.tsbuildinfo b/packages/trader/tsconfig.tsbuildinfo
new file mode 100644
index 000000000000..2ed5b03ce2e2
--- /dev/null
+++ b/packages/trader/tsconfig.tsbuildinfo
@@ -0,0 +1 @@
+{"program":{"fileNames":["../../node_modules/typescript/lib/lib.es5.d.ts","../../node_modules/typescript/lib/lib.es2015.d.ts","../../node_modules/typescript/lib/lib.es2016.d.ts","../../node_modules/typescript/lib/lib.es2017.d.ts","../../node_modules/typescript/lib/lib.es2018.d.ts","../../node_modules/typescript/lib/lib.es2019.d.ts","../../node_modules/typescript/lib/lib.es2020.d.ts","../../node_modules/typescript/lib/lib.es2021.d.ts","../../node_modules/typescript/lib/lib.es2022.d.ts","../../node_modules/typescript/lib/lib.esnext.d.ts","../../node_modules/typescript/lib/lib.dom.d.ts","../../node_modules/typescript/lib/lib.dom.iterable.d.ts","../../node_modules/typescript/lib/lib.es2015.core.d.ts","../../node_modules/typescript/lib/lib.es2015.collection.d.ts","../../node_modules/typescript/lib/lib.es2015.generator.d.ts","../../node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../node_modules/typescript/lib/lib.es2015.promise.d.ts","../../node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../node_modules/typescript/lib/lib.es2017.object.d.ts","../../node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2017.string.d.ts","../../node_modules/typescript/lib/lib.es2017.intl.d.ts","../../node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../node_modules/typescript/lib/lib.es2018.intl.d.ts","../../node_modules/typescript/lib/lib.es2018.promise.d.ts","../../node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../node_modules/typescript/lib/lib.es2019.array.d.ts","../../node_modules/typescript/lib/lib.es2019.object.d.ts","../../node_modules/typescript/lib/lib.es2019.string.d.ts","../../node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../node_modules/typescript/lib/lib.es2020.promise.d.ts","../../node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2020.string.d.ts","../../node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2020.intl.d.ts","../../node_modules/typescript/lib/lib.es2021.promise.d.ts","../../node_modules/typescript/lib/lib.es2021.string.d.ts","../../node_modules/typescript/lib/lib.es2021.weakref.d.ts","../../node_modules/typescript/lib/lib.es2021.intl.d.ts","../../node_modules/typescript/lib/lib.es2022.array.d.ts","../../node_modules/typescript/lib/lib.es2022.error.d.ts","../../node_modules/typescript/lib/lib.es2022.object.d.ts","../../node_modules/typescript/lib/lib.es2022.string.d.ts","../../node_modules/typescript/lib/lib.esnext.intl.d.ts","../../node_modules/@types/react/global.d.ts","../../node_modules/csstype/index.d.ts","../../node_modules/@types/prop-types/index.d.ts","../../node_modules/@types/scheduler/tracing.d.ts","../../node_modules/@types/react/index.d.ts","../../node_modules/@types/react-loadable/index.d.ts","../../node_modules/mobx-react-lite/dist/assertEnvironment.d.ts","../../node_modules/mobx-react-lite/dist/staticRendering.d.ts","../../node_modules/mobx-react-lite/dist/observer.d.ts","../../node_modules/mobx-react-lite/dist/useObserver.d.ts","../../node_modules/mobx-react-lite/dist/ObserverComponent.d.ts","../../node_modules/mobx-react-lite/dist/utils.d.ts","../../node_modules/mobx-react-lite/dist/useAsObservableSource.d.ts","../../node_modules/mobx-react-lite/dist/useLocalStore.d.ts","../../node_modules/mobx-react-lite/dist/useQueuedForceUpdate.d.ts","../../node_modules/mobx-react-lite/dist/observerBatching.d.ts","../../node_modules/mobx-react-lite/dist/index.d.ts","../../node_modules/mobx-react/dist/types/IReactComponent.d.ts","../../node_modules/mobx-react/dist/observer.d.ts","../../node_modules/mobx-react/dist/types/IValueMap.d.ts","../../node_modules/mobx-react/dist/Provider.d.ts","../../node_modules/mobx-react/dist/types/IWrappedComponent.d.ts","../../node_modules/mobx-react/dist/types/IStoresToProps.d.ts","../../node_modules/mobx-react/dist/inject.d.ts","../../node_modules/mobx-react/dist/disposeOnUnmount.d.ts","../../node_modules/mobx-react/dist/propTypes.d.ts","../../node_modules/mobx-react/dist/index.d.ts","../../node_modules/history/index.d.ts","../../node_modules/@types/react-router/index.d.ts","./src/App/Components/Routes/helpers.js","./src/App/Components/Routes/index.js","./src/Modules/Trading/index.js","./src/Modules/Contract/index.js","./src/Modules/Page404/index.js","./src/App/Constants/routes-config.js","./src/Stores/connect.js","./src/App/Components/Elements/Errors/index.js","./src/App/Containers/Routes/routes.jsx","../../node_modules/mobx/lib/utils/utils.d.ts","../../node_modules/mobx/lib/core/atom.d.ts","../../node_modules/mobx/lib/utils/comparer.d.ts","../../node_modules/mobx/lib/utils/decorators.d.ts","../../node_modules/mobx/lib/types/modifiers.d.ts","../../node_modules/mobx/lib/api/observabledecorator.d.ts","../../node_modules/mobx/lib/api/observable.d.ts","../../node_modules/mobx/lib/api/computed.d.ts","../../node_modules/mobx/lib/core/action.d.ts","../../node_modules/mobx/lib/types/observablevalue.d.ts","../../node_modules/mobx/lib/core/computedvalue.d.ts","../../node_modules/mobx/lib/core/derivation.d.ts","../../node_modules/mobx/lib/core/globalstate.d.ts","../../node_modules/mobx/lib/core/observable.d.ts","../../node_modules/mobx/lib/core/reaction.d.ts","../../node_modules/mobx/lib/core/spy.d.ts","../../node_modules/mobx/lib/api/actiondecorator.d.ts","../../node_modules/mobx/lib/api/action.d.ts","../../node_modules/mobx/lib/api/autorun.d.ts","../../node_modules/mobx/lib/api/become-observed.d.ts","../../node_modules/mobx/lib/api/configure.d.ts","../../node_modules/mobx/lib/api/decorate.d.ts","../../node_modules/mobx/lib/api/extendobservable.d.ts","../../node_modules/mobx/lib/api/extras.d.ts","../../node_modules/mobx/lib/api/flow.d.ts","../../node_modules/mobx/lib/api/intercept-read.d.ts","../../node_modules/mobx/lib/api/intercept.d.ts","../../node_modules/mobx/lib/api/iscomputed.d.ts","../../node_modules/mobx/lib/api/isobservable.d.ts","../../node_modules/mobx/lib/api/object-api.d.ts","../../node_modules/mobx/lib/api/observe.d.ts","../../node_modules/mobx/lib/api/tojs.d.ts","../../node_modules/mobx/lib/api/trace.d.ts","../../node_modules/mobx/lib/api/transaction.d.ts","../../node_modules/mobx/lib/api/when.d.ts","../../node_modules/mobx/lib/types/dynamicobject.d.ts","../../node_modules/mobx/lib/types/intercept-utils.d.ts","../../node_modules/mobx/lib/types/listen-utils.d.ts","../../node_modules/mobx/lib/types/observablearray.d.ts","../../node_modules/mobx/lib/types/observablemap.d.ts","../../node_modules/mobx/lib/types/observableset.d.ts","../../node_modules/mobx/lib/types/observableobject.d.ts","../../node_modules/mobx/lib/types/type-utils.d.ts","../../node_modules/mobx/lib/utils/eq.d.ts","../../node_modules/mobx/lib/utils/iterable.d.ts","../../node_modules/mobx/lib/internal.d.ts","../../node_modules/mobx/lib/mobx.d.ts","../../node_modules/@types/react-transition-group/Transition.d.ts","../../node_modules/@types/react-transition-group/CSSTransition.d.ts","../../node_modules/@types/react-transition-group/TransitionGroup.d.ts","../../node_modules/@types/react-transition-group/SwitchTransition.d.ts","../../node_modules/@types/react-transition-group/config.d.ts","../../node_modules/@types/react-transition-group/index.d.ts","../../node_modules/@types/react-router-dom/index.d.ts","./src/App/Components/Elements/EmptyPortfolioMessage/empty-portfolio-message.jsx","./src/App/Components/Elements/EmptyPortfolioMessage/index.js","../../node_modules/classnames/index.d.ts","./src/Stores/Modules/Trading/Helpers/active-symbols.js","./src/Stores/Modules/Contract/Helpers/multiplier.js","../../node_modules/moment/ts3.1-typings/moment.d.ts","./src/_common/utility.js","./src/_common/base/server_time.js","./src/Stores/Modules/Contract/Helpers/logic.js","../../node_modules/react-content-loader/dist/Holder.d.ts","../../node_modules/react-content-loader/dist/stylized/FacebookStyle.d.ts","../../node_modules/react-content-loader/dist/stylized/InstagramStyle.d.ts","../../node_modules/react-content-loader/dist/stylized/CodeStyle.d.ts","../../node_modules/react-content-loader/dist/stylized/ListStyle.d.ts","../../node_modules/react-content-loader/dist/stylized/BulletListStyle.d.ts","../../node_modules/react-content-loader/dist/index.d.ts","./src/App/Components/Elements/ContentLoader/positions-card.jsx","./src/App/Components/Elements/ContentLoader/trade-params.jsx","./src/App/Components/Elements/ContentLoader/index.js","./src/Constants/contract.js","./src/Utils/Helpers/market-underlying.js","./src/App/Components/Elements/PositionsDrawer/result-mobile.jsx","./src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx","./src/Stores/Modules/Trading/Constants/contract.js","./src/Stores/Modules/Contract/Helpers/contract-type.js","./src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.js","./src/App/Components/Elements/PositionsDrawer/helpers/index.js","./src/App/Components/Elements/TogglePositions/toggle-positions.jsx","./src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx","./src/App/Containers/trade-header-extensions.jsx","./src/App/Components/Elements/TogglePositions/index.js","./src/App/Containers/trade-footer-extensions.jsx","./src/App/Components/Elements/Media/media-description.jsx","./src/App/Components/Elements/Media/media-heading.jsx","./src/App/Components/Elements/Media/media-icon.jsx","./src/App/Components/Elements/Media/index.js","./src/App/Containers/SettingsModal/settings-chart.jsx","./src/App/Containers/trade-settings-extensions.jsx","../../node_modules/@types/react-dom/index.d.ts","./src/Modules/Trading/Containers/toast-popup.jsx","./src/App/init-store.js","./src/App/Containers/Modals/index.js","./src/App/app.tsx","./src/App/index.tsx","./src/index.tsx","./src/_common/components/loading.tsx","./globals.d.ts","../../node_modules/@types/aria-query/index.d.ts","../../node_modules/@babel/types/lib/index.d.ts","../../node_modules/@types/babel__generator/index.d.ts","../../node_modules/@babel/parser/typings/babel-parser.d.ts","../../node_modules/@types/babel__template/index.d.ts","../../node_modules/@types/babel__traverse/index.d.ts","../../node_modules/@types/babel__core/index.d.ts","../../node_modules/@types/eslint/helpers.d.ts","../../node_modules/@types/eslint/lib/rules/index.d.ts","../../node_modules/@types/json-schema/index.d.ts","../../node_modules/@types/estree/index.d.ts","../../node_modules/@types/eslint/index.d.ts","../../node_modules/@types/eslint-scope/index.d.ts","../../node_modules/@types/node/assert.d.ts","../../node_modules/@types/node/assert/strict.d.ts","../../node_modules/@types/node/globals.d.ts","../../node_modules/@types/node/async_hooks.d.ts","../../node_modules/@types/node/buffer.d.ts","../../node_modules/@types/node/child_process.d.ts","../../node_modules/@types/node/cluster.d.ts","../../node_modules/@types/node/console.d.ts","../../node_modules/@types/node/constants.d.ts","../../node_modules/@types/node/crypto.d.ts","../../node_modules/@types/node/dgram.d.ts","../../node_modules/@types/node/diagnostics_channel.d.ts","../../node_modules/@types/node/dns.d.ts","../../node_modules/@types/node/dns/promises.d.ts","../../node_modules/@types/node/domain.d.ts","../../node_modules/@types/node/events.d.ts","../../node_modules/@types/node/fs.d.ts","../../node_modules/@types/node/fs/promises.d.ts","../../node_modules/@types/node/http.d.ts","../../node_modules/@types/node/http2.d.ts","../../node_modules/@types/node/https.d.ts","../../node_modules/@types/node/inspector.d.ts","../../node_modules/@types/node/module.d.ts","../../node_modules/@types/node/net.d.ts","../../node_modules/@types/node/os.d.ts","../../node_modules/@types/node/path.d.ts","../../node_modules/@types/node/perf_hooks.d.ts","../../node_modules/@types/node/process.d.ts","../../node_modules/@types/node/punycode.d.ts","../../node_modules/@types/node/querystring.d.ts","../../node_modules/@types/node/readline.d.ts","../../node_modules/@types/node/repl.d.ts","../../node_modules/@types/node/stream.d.ts","../../node_modules/@types/node/stream/promises.d.ts","../../node_modules/@types/node/stream/consumers.d.ts","../../node_modules/@types/node/stream/web.d.ts","../../node_modules/@types/node/string_decoder.d.ts","../../node_modules/@types/node/timers.d.ts","../../node_modules/@types/node/timers/promises.d.ts","../../node_modules/@types/node/tls.d.ts","../../node_modules/@types/node/trace_events.d.ts","../../node_modules/@types/node/tty.d.ts","../../node_modules/@types/node/url.d.ts","../../node_modules/@types/node/util.d.ts","../../node_modules/@types/node/v8.d.ts","../../node_modules/@types/node/vm.d.ts","../../node_modules/@types/node/wasi.d.ts","../../node_modules/@types/node/worker_threads.d.ts","../../node_modules/@types/node/zlib.d.ts","../../node_modules/@types/node/globals.global.d.ts","../../node_modules/@types/node/index.d.ts","../../node_modules/@types/minimatch/index.d.ts","../../node_modules/@types/glob/index.d.ts","../../node_modules/@types/graceful-fs/index.d.ts","../../node_modules/@types/history/DOMUtils.d.ts","../../node_modules/@types/history/createBrowserHistory.d.ts","../../node_modules/@types/history/createHashHistory.d.ts","../../node_modules/@types/history/createMemoryHistory.d.ts","../../node_modules/@types/history/LocationUtils.d.ts","../../node_modules/@types/history/PathUtils.d.ts","../../node_modules/@types/history/index.d.ts","../../node_modules/@types/html-minifier-terser/index.d.ts","../../node_modules/@types/invariant/index.d.ts","../../node_modules/@types/is-function/index.d.ts","../../node_modules/@types/istanbul-lib-coverage/index.d.ts","../../node_modules/@types/istanbul-lib-report/index.d.ts","../../node_modules/@types/istanbul-reports/index.d.ts","../../node_modules/@types/jest/node_modules/chalk/index.d.ts","../../node_modules/jest-diff/build/cleanupSemantic.d.ts","../../node_modules/pretty-format/build/types.d.ts","../../node_modules/pretty-format/build/index.d.ts","../../node_modules/jest-diff/build/types.d.ts","../../node_modules/jest-diff/build/diffLines.d.ts","../../node_modules/jest-diff/build/printDiffs.d.ts","../../node_modules/jest-diff/build/index.d.ts","../../node_modules/@types/jest/node_modules/jest-matcher-utils/build/index.d.ts","../../node_modules/@types/jest/index.d.ts","../../node_modules/@types/json5/index.d.ts","../../node_modules/@types/unist/index.d.ts","../../node_modules/@types/mdast/index.d.ts","../../node_modules/@types/minimist/index.d.ts","../../node_modules/@types/normalize-package-data/index.d.ts","../../node_modules/@types/npmlog/index.d.ts","../../node_modules/@types/object.fromentries/index.d.ts","../../node_modules/@types/parse-json/index.d.ts","../../node_modules/@types/prettier/index.d.ts","../../node_modules/@types/q/index.d.ts","../../node_modules/@types/reach__router/index.d.ts","../../node_modules/@types/reactcss/index.d.ts","../../node_modules/@types/react-color/lib/components/alpha/Alpha.d.ts","../../node_modules/@types/react-color/lib/components/block/Block.d.ts","../../node_modules/@types/react-color/lib/components/common/Checkboard.d.ts","../../node_modules/@types/react-color/lib/components/chrome/Chrome.d.ts","../../node_modules/@types/react-color/lib/components/circle/Circle.d.ts","../../node_modules/@types/react-color/lib/components/compact/Compact.d.ts","../../node_modules/@types/react-color/lib/components/github/Github.d.ts","../../node_modules/@types/react-color/lib/components/hue/Hue.d.ts","../../node_modules/@types/react-color/lib/components/material/Material.d.ts","../../node_modules/@types/react-color/lib/components/photoshop/Photoshop.d.ts","../../node_modules/@types/react-color/lib/components/sketch/Sketch.d.ts","../../node_modules/@types/react-color/lib/components/slider/Slider.d.ts","../../node_modules/@types/react-color/lib/components/swatches/Swatches.d.ts","../../node_modules/@types/react-color/lib/components/twitter/Twitter.d.ts","../../node_modules/@types/react-color/lib/components/common/ColorWrap.d.ts","../../node_modules/@types/react-color/index.d.ts","../../node_modules/@types/react-syntax-highlighter/index.d.ts","../../node_modules/@types/react-textarea-autosize/index.d.ts","../../node_modules/@types/resolve/index.d.ts","../../node_modules/@types/scheduler/index.d.ts","../../node_modules/@types/sockjs-client/index.d.ts","../../node_modules/@types/source-list-map/index.d.ts","../../node_modules/@types/stack-utils/index.d.ts","../../node_modules/@types/tapable/index.d.ts","../../node_modules/@types/testing-library__jest-dom/index.d.ts","../../node_modules/@types/trusted-types/lib/index.d.ts","../../node_modules/@types/trusted-types/index.d.ts","../../node_modules/@types/uglify-js/node_modules/source-map/source-map.d.ts","../../node_modules/@types/uglify-js/index.d.ts","../../node_modules/anymatch/index.d.ts","../../node_modules/@types/webpack/node_modules/source-map/source-map.d.ts","../../node_modules/@types/webpack-sources/node_modules/source-map/source-map.d.ts","../../node_modules/@types/webpack-sources/lib/Source.d.ts","../../node_modules/@types/webpack-sources/lib/CompatSource.d.ts","../../node_modules/@types/webpack-sources/lib/ConcatSource.d.ts","../../node_modules/@types/webpack-sources/lib/OriginalSource.d.ts","../../node_modules/@types/webpack-sources/lib/PrefixSource.d.ts","../../node_modules/@types/webpack-sources/lib/RawSource.d.ts","../../node_modules/@types/webpack-sources/lib/ReplaceSource.d.ts","../../node_modules/@types/webpack-sources/lib/SizeOnlySource.d.ts","../../node_modules/@types/webpack-sources/lib/SourceMapSource.d.ts","../../node_modules/@types/webpack-sources/lib/index.d.ts","../../node_modules/@types/webpack-sources/lib/CachedSource.d.ts","../../node_modules/@types/webpack-sources/index.d.ts","../../node_modules/@types/webpack/index.d.ts","../../node_modules/@types/webpack-env/index.d.ts","../../node_modules/@types/yargs-parser/index.d.ts","../../node_modules/@types/yargs/index.d.ts"],"fileInfos":[{"version":"3ac1b83264055b28c0165688fda6dfcc39001e9e7828f649299101c23ad0a0c3","affectsGlobalScope":true},"dc47c4fa66b9b9890cf076304de2a9c5201e94b740cffdf09f87296d877d71f6","7a387c58583dfca701b6c85e0adaf43fb17d590fb16d5b2dc0a2fbd89f35c467","8a12173c586e95f4433e0c6dc446bc88346be73ffe9ca6eec7aa63c8f3dca7f9","5f4e733ced4e129482ae2186aae29fde948ab7182844c3a5a51dd346182c7b06","e6b724280c694a9f588847f754198fb96c43d805f065c3a5b28bbc9594541c84","e21c071ca3e1b4a815d5f04a7475adcaeea5d64367e840dd0154096d705c3940","746d62152361558ea6d6115cf0da4dd10ede041d14882ede3568bce5dc4b4f1f","2f93dda35dafec68ec217c9ce67f0f4fbbbb030c055ac312641565ad60dd7e26","aea179452def8a6152f98f63b191b84e7cbd69b0e248c91e61fb2e52328abe8c",{"version":"72704b10d97777e15f1a581b73f88273037ef752d2e50b72287bd0a90af64fe6","affectsGlobalScope":true},{"version":"dbb73d4d99be496175cb432c74c2615f78c76f4272f1d83cba11ee0ed6dbddf0","affectsGlobalScope":true},{"version":"d8996609230d17e90484a2dd58f22668f9a05a3bfe00bfb1d6271171e54a31fb","affectsGlobalScope":true},{"version":"43fb1d932e4966a39a41b464a12a81899d9ae5f2c829063f5571b6b87e6d2f9c","affectsGlobalScope":true},{"version":"cdccba9a388c2ee3fd6ad4018c640a471a6c060e96f1232062223063b0a5ac6a","affectsGlobalScope":true},{"version":"c5c05907c02476e4bde6b7e76a79ffcd948aedd14b6a8f56e4674221b0417398","affectsGlobalScope":true},{"version":"0d5f52b3174bee6edb81260ebcd792692c32c81fd55499d69531496f3f2b25e7","affectsGlobalScope":true},{"version":"810627a82ac06fb5166da5ada4159c4ec11978dfbb0805fe804c86406dab8357","affectsGlobalScope":true},{"version":"62d80405c46c3f4c527ee657ae9d43fda65a0bf582292429aea1e69144a522a6","affectsGlobalScope":true},{"version":"3013574108c36fd3aaca79764002b3717da09725a36a6fc02eac386593110f93","affectsGlobalScope":true},{"version":"75ec0bdd727d887f1b79ed6619412ea72ba3c81d92d0787ccb64bab18d261f14","affectsGlobalScope":true},{"version":"3be5a1453daa63e031d266bf342f3943603873d890ab8b9ada95e22389389006","affectsGlobalScope":true},{"version":"17bb1fc99591b00515502d264fa55dc8370c45c5298f4a5c2083557dccba5a2a","affectsGlobalScope":true},{"version":"7ce9f0bde3307ca1f944119f6365f2d776d281a393b576a18a2f2893a2d75c98","affectsGlobalScope":true},{"version":"6a6b173e739a6a99629a8594bfb294cc7329bfb7b227f12e1f7c11bc163b8577","affectsGlobalScope":true},{"version":"12a310447c5d23c7d0d5ca2af606e3bd08afda69100166730ab92c62999ebb9d","affectsGlobalScope":true},{"version":"b0124885ef82641903d232172577f2ceb5d3e60aed4da1153bab4221e1f6dd4e","affectsGlobalScope":true},{"version":"0eb85d6c590b0d577919a79e0084fa1744c1beba6fd0d4e951432fa1ede5510a","affectsGlobalScope":true},{"version":"da233fc1c8a377ba9e0bed690a73c290d843c2c3d23a7bd7ec5cd3d7d73ba1e0","affectsGlobalScope":true},{"version":"d154ea5bb7f7f9001ed9153e876b2d5b8f5c2bb9ec02b3ae0d239ec769f1f2ae","affectsGlobalScope":true},{"version":"bb2d3fb05a1d2ffbca947cc7cbc95d23e1d053d6595391bd325deb265a18d36c","affectsGlobalScope":true},{"version":"c80df75850fea5caa2afe43b9949338ce4e2de086f91713e9af1a06f973872b8","affectsGlobalScope":true},{"version":"9d57b2b5d15838ed094aa9ff1299eecef40b190722eb619bac4616657a05f951","affectsGlobalScope":true},{"version":"6c51b5dd26a2c31dbf37f00cfc32b2aa6a92e19c995aefb5b97a3a64f1ac99de","affectsGlobalScope":true},{"version":"6e7997ef61de3132e4d4b2250e75343f487903ddf5370e7ce33cf1b9db9a63ed","affectsGlobalScope":true},{"version":"2ad234885a4240522efccd77de6c7d99eecf9b4de0914adb9a35c0c22433f993","affectsGlobalScope":true},{"version":"1b3fe904465430e030c93239a348f05e1be80640d91f2f004c3512c2c2c89f34","affectsGlobalScope":true},{"version":"3787b83e297de7c315d55d4a7c546ae28e5f6c0a361b7a1dcec1f1f50a54ef11","affectsGlobalScope":true},{"version":"e7e8e1d368290e9295ef18ca23f405cf40d5456fa9f20db6373a61ca45f75f40","affectsGlobalScope":true},{"version":"faf0221ae0465363c842ce6aa8a0cbda5d9296940a8e26c86e04cc4081eea21e","affectsGlobalScope":true},{"version":"06393d13ea207a1bfe08ec8d7be562549c5e2da8983f2ee074e00002629d1871","affectsGlobalScope":true},{"version":"5075b36ab861c8c0c45377cb8c96270d7c65f0eeaf105d53fac6850da61f1027","affectsGlobalScope":true},{"version":"6c55633c733c8378db65ac3da7a767c3cf2cf3057f0565a9124a16a3a2019e87","affectsGlobalScope":true},{"version":"fb4416144c1bf0323ccbc9afb0ab289c07312214e8820ad17d709498c865a3fe","affectsGlobalScope":true},{"version":"5b0ca94ec819d68d33da516306c15297acec88efeb0ae9e2b39f71dbd9685ef7","affectsGlobalScope":true},{"version":"e8c9f4e445a489991ca1a4232667de3ac36b07ba75ea335971fbeacf2d26fe67","affectsGlobalScope":true},{"version":"34478567f8a80171f88f2f30808beb7da15eac0538ae91282dd33dce928d98ed","affectsGlobalScope":true},{"version":"6ea9ab679ea030cf46c16a711a316078e9e02619ebaf07a7fcd16964aba88f2d","affectsGlobalScope":true},{"version":"aedb8de1abb2ff1095c153854a6df7deae4a5709c37297f9d6e9948b6806fa66","affectsGlobalScope":true},{"version":"11ffe3c281f375fff9ffdde8bbec7669b4dd671905509079f866f2354a788064","affectsGlobalScope":true},{"version":"10bbdc1981b8d9310ee75bfac28ee0477bb2353e8529da8cff7cb26c409cb5e8","affectsGlobalScope":true},{"version":"bbdf156fea2fabed31a569445835aeedcc33643d404fcbaa54541f06c109df3f","affectsGlobalScope":true},"381899b8d1d4c1be716f18cb5242ba39f66f4b1e31d45af62a32a99f8edcb39d","f7b46d22a307739c145e5fddf537818038fdfffd580d79ed717f4d4d37249380","f5a8b384f182b3851cec3596ccc96cb7464f8d3469f48c74bf2befb782a19de5",{"version":"4c4229a7fe27b87aba0b8bab7f7338bc63e74b814156ba6925b552f9bec83154","affectsGlobalScope":true},{"version":"527840e23d438abab6cac9bdd4672c888cbaf5abc54e7da1ee0915aaba06dda6","affectsGlobalScope":true},"f761c91419d0a89422a0004ef1a92929dd4d2d5e5c16758654d8b0467d1998c6","f0cf46afbdff530923e8eaa10ae909d0fc4894d3beeab71be5972660d0f94657","20423b338529dc6c08091a31dfd4c8eb59c43618add12be380bc5c2c1defdefa","322aa16c6c143f1d818c5971d3f7641ab15cd726daed0c3bc4e344fa3377ef6b","32a6a915cfd763b55a3fdd52a1be4c33d0d6ff2b8b4e31477e522f983c168c32","5c5975a57f974dea93b814baaa9e001f0bc4a832d9f3d75a8193c2e12331171b","7f9b0d5e3fa15ab156fdc7967b7cde90bc655199c9f27bfd529dc8936f0ed5d0","c1fc7bc6a2c8ed40e9d17abba1c515923a7d860916611171b1f78019e4c75ec5","7a736da957c9a1d576a5a4dd4ce145b782944bc8e9470b8ad2ac3c4a349fb666","960e9a6f3844831c0b827ad4c116c1d5ae2eb4ee6a364f55650ecf0f4b358254","53825c0d7205506faa91825612373dacb25f70fc05776c69c998f4081cc67da7","bfdcbaa21d9ceeb25394c1d67836a3355660a9cc38dd790fb138c801ecfc10a6","3dda11e0c7b1da55fb3576a8c863d1e8067004060d844b6e3ab9cbb2522ee6d4","be6b8e95eaad887b3e26da22215f188ac01ec13d8e6fe89c57d671a04f241e09","a0772a49c68c8ad09fd9b41f73fe542e52535e14f7825db9d605c3c99166c377","9e7a6963251629b917820b5c2ed4e3d78a20e9918efe2b6615fd484fa0cb6523","55447554cf27022611a95091556b48ba78e962b8e2a5ef0572f3dbaef1c9ec8d","ed1d1e789510fb8a6956f82b0160c069846c35e23ee3bb65f3cdbfcda319742d","26851ae9962b794c44cb4d3c7ac2abf88e7c09104011c0158613358fcc6949e6","6d13ddfedb26a0ebe0ab867e22db3064640b350edd7f29e4736475ec273c21eb","a825fab8128556b9f2cfca1de0e65bef960a4cd8123ead23f5f735dac1bf28bf","50001cd4550147fb62c68902f6e0c1856d42c575f0f5f43efe8639f931838a50","6c362c5d50652957065cf52f282a2bf0a456ed3713738d0ee1a9089dbb5b5fe7","34e6e6023540f032a37a1f41d664bba68f1af87a65ccb5d26268915ab3b0056b","2f55247c9210f1c685b13f1e59d620efd4c1a25bcbaf93ae70b0e511cce0bee2","93489a2de0143ba6815b2661596fbd95849ea1711a212c693a095096d9e9a345","d7548fb8d55f2ead4cbdf7fdfdec288f1acb27100757b9a1eb4a22e76d6a4a40","6825bcecede84cbe30a7d0f86153af683cb4d806509a16951654ca30f815fad1","204cd5bda15f03237bc373bdd500aeed89599f67a838599732a7550ba715665b","ba483d59f0d37c03f2cddd7bce3d1db4c2aaa9dd2636997f5c4374c66d3b0e9c","758c8ad93b78d02fa88f0d84c988a377264b9370e668b1ffd64e257c90e1ff63","0c4260b545f6f06477087e358ef74ea5326b2e1ff7020b3388adca8f4fbcc545","63ddff320a89f6871034933fec3d04e68bfb428e9c78c543ea13c510b363bc42","19d56d852739d209835dc7c64f6d508310d4018376cf8bb9c8febda362ca8f78","33c337de15324843b658d00995db674f9c618fe9ad6ad6b43f0fe6835984fa0b","835eac23d8469562ee8b6cb46a875c694a29a196dbf3d075d850972ecc834620","98d0a7a057191ce8f111a5b8ecc7107ff9ab45d63ead4ce29a07296d31b5e91c","4041620e27e40e45b2245c7b4a8c71f61ca3fa3c4a13ee90d09cc63ca77869a8","b85b721978ea4bb7624ac8e7e6cb512a5cb290a85cf44e524f242fba25d476fa","e73468f0faf1cc6da95dcffc4533896c0cf91c4a8e4b3f9f65f87fab36d7e174","3b5d72a128afa26b8636e191b082947ea1e1ccd799543e3ce7a57adc35697eb8","efa8f798ccfc988c480922f64a92968a862a8ea200bfe88982edf46dad94bc28","79e715a58ae3ee0470cb55d55653c4dc89f7d8ef4f5a7b5720b7be08a998f649","6a2b74f0ec5c05b43dcea9d05433739900b7052a483f0dba4c515cdd29734942","4609c547e1956bee7974fc845dea2eb9be4292a943bf3cc9964ba2b041759b4b","740bacc689be6f431d28f32ff98278810840de1869b4f03dc47b8c92a6d860fa","78dc572c57915fa4a3172b59a3cf590a86b4e7e65dff5c27d2438f578b5d9ffc","501485ac42f4a9298ee77c4ba6c3eaa818041e63066003ef88b87a7ac3f62beb","228f1b1845cf8eab22806df7fdfd57803cb4161d190ce930491fe80d8a2b6e98","5b0b345017f6b471b620f1c8fbdbf0e04c3721375d3e800c52618dabfeef1f07","ce662439cb897a60ae7657ac19cfa47dfeb558e13ecb30ee84a3112d0fd466fa","470a0fb853080bdd226587e7b4bd403c21b3dc7ff41b598622518e0308934b87","4655c6622f6d0bb3182ee903b35013605425b421c24b17d3e826782c773dd75f","c6e88565b597b47d3d2a304af8b99f2b2b818e2136815ff473cd9e371899fbf7","ff51bf727325b7ae84d7296a0f6f701b9db4c1950c83ef389ac3b7dcdcb5efd7","bfca9c2cc975dd04310c02d200c61baac194b8ebb52d26ea83c50092ae005f88","0f2fc3b17287c4bbf75b2acc39ab504b794ea332972d914c17ec7f1dd95efe25","05e9a6cc3630bb41f3bd0a2cd86627fd19afe4837f34062e24ec799f1748def9","292404c1008d69cb301e9cdc821fdecd347a574da87cf5041c166041a7b1a2e9","6d4f8e81b0c78a3282862d631b067c8857feb438ffb804ab16ec6787a984f07e","8558b13817b7ff64d16f004ec1f8503baf48b0257428de64ce67646da6dd2142","aa0a1c26b1f6ae3d55a9942ea119b301e2a455a601ca868a1bc84372c1d3f045","5ad10a0a2db50586db554af700cb48fe317f80d881428d5473807a9ebbf3d738","44074878bfdc747b948feef53cd672bca37675bb885127bc6c2669d5baf57902","f2ecf41bea9d32be3e27c71b7d1d9e3f58083b45fd36bd25980899a1168ee109","0adcb5db0aa0de1425495b135dacaf6f2240e3ad48b905cd8139f730fedaa4ca","ad0a9f226ccbba7ea6b2b991a0bec5d95f0b1e8104f12d691c1a407710a7a832","2f96180e51009103c6f383ddd03c1452229f514b585c2ad1a4dc25ac7ec7ab7a","70f1bfeb39734149e329e52e51f28b88f3f83ff25c6e3a43c1441981ac318126","05129db68d57fbb85476b7e6e164e8b292efe68d5fdc544b70ee3a32233b2487","5d3838dbbcfda003fbc39f2716a106f2b514a54dd2def9ea08ab04c8e7db4835","b86b288947dd561b5cb2d62c7ec02a83a00858e6673719699f960f48121116b0","b5c3e2baa5d632f3489ecb4f6d9ad8e2c914cda3f11a98570c7100d6ac52615b","ff2ece145bb888655363773f3c781ea9f6a06bdc0f35f125f159dfd4ecfb37df","f14823adf03c5cd507c4d7a8cbb242e02c6e2835424e1183e729464bdf4f3f73","118d80f9540cfa2b110c2835648059d35660b02250e6ac64b7d81791ccb5a5e1","99b6d4c09e9743dc5b57ed14d1cb75434539838ba5f53de259693de8f5027d8d","5577f642fe5b71710a4fe4b8a3d5f1bdcb9760d7b6162f0184d97267f31dd6e3","fb8e8e664c26078702764fa8efe1ba1a3125f1c32995821800a94f01a3273fa1","30688eab034d1aa3bbe4d8f2c7f462ddaec9f30f1a38a306a4728a9a06a58b11","e03334588c63840b7054accd0b90f29c5890db6a6555ac0869a78a23297f1396","c3052485f32a96bfde75a2976c1238995522584ba464f04ff16a8a40af5e50d1","c220410b8e956fa157ce4e5e6ac871f0f433aa120c334d906ff1f5e2c7369e95","960a68ced7820108787135bdae5265d2cc4b511b7dcfd5b8f213432a8483daf1","ed3b711f533ddb3a5451f4c4bb0df3a0b95e9d0433b3b7834644dd1718d06d31","8017277c3843df85296d8730f9edf097d68d7d5f9bc9d8124fcacf17ecfd487e","851f84ba1267d76ed2fbef6b5a93d4003ddea1ce74ca28ef3224b0d16519f206","655c16b2b52f15a8f0127b2389a964b04e4f7d18a13cce103c45c13feddc700b","d153cbce75b7e1621eda0a4148748f44edd71ff44cc5351bac1c7787da4d5b05","bdf984fad8c9f40cb44a30e77dd74a8dffb809bace5f77bb583178e644d23c8e","dbca3f0d088b4d9fdb40834c0e8565c59aaf742658687982f2df4c5e67ca08ca","4051f6311deb0ce6052329eeb1cd4b1b104378fe52f882f483130bea75f92197","b538f0cb004c937386eaa17e9869199140d64ebccc1f6835a52f99741c6e8ae8","1c154ae2ad6c088f4bba542fc1784e645292d439702a8f17dc67cd3e57a8c983","0e92fbd3a900f8ab92c25961e2ff715236f2467936881afb11bfece1524b6836","519c39ac8b701108782582cfcf18c01c79c2f19d3be83103e7dc0a7cc1398882","9fe8d6ef10a152849e904912921399a7f9c660175366d4d71667e8edfe24d476","34cd05a2c1b766682caf0c4d8ee4c46bab84e5972a66c4fa88992144dc882ced","0d26218e57dd54543a6238172cd734221a489cc07972a34a223b4f98abb0bf4b","f28e40453762b99f36fe62d5e64a7eb1c2d3f55ebdf4489d90c94021b0cbee4f","5b32f4925c4da4dcf12bb697edea3eedb126791374c510f1689d2bbb6dd0c461","12505b223c10c41961c5f305579b46daf1cba925ddc608db8b69a134b970e0bb","89475e496c6f3aa92a708243717f0cc5680f4cff78a8062d7bd02704fae60cf7","8d958f249874c29caa13aba8d3bf3c2cc0c0da82df76bf1ef56443f665f19e98","97d959fd6238178fa821453f4e460ee8221dbd57326883a8d0e229be105ec533","aef543ba958ef62d52670bc6facf7c485306ab92f013f99ef8891212dae326ca","517944cae0f574526a1e5f938594260258991125d056fbfc77e7f9a4cac8a95a","208f13edebd5a2b76d5c9413582126b46d70d3d127a8bacdbddd1414e03a9b0b","a2d6a62ab667a3e9a557751509ce68bcbf430382173ac16aa8f4d6aa9b157c88","f2beef566553d7b62d725f10fc8de67955e43dfd292dda361ce14921d1cdfcb6","b0d0cb376549ceddfa15719df98840f376ab1e4a29f6ecb266b4208b7acaed10","006b61fd876e7f034b6b66afd48db957b2c91751b7f68d7ef86e21bea510d81d","4672dda74dfa858e3600969e8374e267d2db539f0ead6468f72b49b9789a6338","ab496193cd26a1a6aab36122609b08170755d4f26aabb15a5c3e6740f626e8bc","6ccf4d7a253696b79338860c385c697fedf84b0ac321d6ee3597eaa8d083a777","44d53618d2420c2cd19d0c73a4e0a1355af8b7f4a0ed6d6f559944e31da266d7","fe8532a0acbf3c65d2759313abf862869327dc8c0a4f7cf80bc7942491ec7b3d","8da843f072ee2b41f335a7d29a0f69f00573986457d3c711c7ee8ed0c3a8a705","bb678fd2aeb80991c70f4f346cdf8c1997e7cdfed6d50612feb91c38d22ac5e4","425371cbc336a6f5b606bc6a988ccbedd16093e7bd541e3f779f85439f20b288","bf79e50d245025909a029fc965491480d0e12070d9485ce18b0d394fa343b943","239190c6ab3a924a3644c37186f2e01f7ee4888ae048f055658ba2c0f352be7e","d7fe9a4c8865d044ca1f68a8358f31b82cc58869ec1bf4043053e0e8ea64bac0","cb2261bb45151df72d01afb97a96c43126d7830715312e517cfb30af69ebb5f7","ca579f66ab81fbb94022268fcb98f8eab6ad5ba3b283ef65eba4bbd7df16e9e0","08dc5f08569f0859f28a37169d40f4add27b378793968a2d3fbbbaffbf7c083b","f7dc4f72e0e93f3d33d13201de0cbd90323030d7eb8897d4ba48b2fb74ebebd1","d2052ba5eeb9043db80b93ca89a0e1fa44ca2c85f2c46fdf2e5ab16d94f035fc","1d24d13acffb41d85c8be53040666cd27141a54745b475fd13f29d7d05cb7e35","11de3bbbd260a837f5680368f9a3b1e84ee0cc3d7a346a4a2d84b9bf418c8b63","9ee4a449aa5e989f3a577fbbb5620875c4b3da4945618ff2f3a8d9d48875d8fc","e44a7b6fd14dcd438ffed723ed7fbd5015edb67204a339897a23dbece0da8ad3","45220eedba59cc5e3e4f9c3c8e10b75067c1b09f545e6492ceb6e08ae174a15a","5024433f8da3a7968f6d12cffd32f2cefae4442a9ad1c965fa2d23342338b700","2ff9995137f3e5d68971388ec58af0c79721626323884513f9f5e2e996ac1fdd","cc957354aa3c94c9961ebf46282cfde1e81d107fc5785a61f62c67f1dd3ac2eb","29afd3970c68fdcbf3168de0f855d7cd84135c436050793b0584e1a904affe2d","93de1c6dab503f053efe8d304cb522bb3a89feab8c98f307a674a4fae04773e9","3b043cf9a81854a72963fdb57d1884fc4da1cf5be69b5e0a4c5b751e58cb6d88","dd5647a9ccccb2b074dca8a02b00948ac293091ebe73fdf2e6e98f718819f669",{"version":"64d4b35c5456adf258d2cf56c341e203a073253f229ef3208fc0d5020253b241","affectsGlobalScope":true},"0133ebdd17a823ae56861948870cde4dac18dd8818ab641039c85bbb720429e0","0359682c54e487c4cab2b53b2b4d35cc8dea4d9914bc6abcdb5701f8b8e745a4","a1c79f857f5c7754e14c93949dad8cfefcd7df2ecc0dc9dd79a30fd493e28449","874d84ca5699231d5af2868fef01fc63f948bd83be928881479db48508f92ca0","dc33ce27fbeaf0ea3da556c80a6cc8af9d13eb443088c8f25cdc39fca8e756f6","0cba3a5d7b81356222594442753cf90dd2892e5ccfe1d262aaca6896ba6c1380","a69c09dbea52352f479d3e7ac949fde3d17b195abe90b045d619f747b38d6d1a",{"version":"77f0b5c6a193a699c9f7d7fb0578e64e562d271afa740783665d2a827104a873","affectsGlobalScope":true},"e5979905796fe2740d85fbaf4f11f42b7ee1851421afe750823220813421b1af",{"version":"fcdcb42da18dd98dc286b1876dd425791772036012ae61263c011a76b13a190f","affectsGlobalScope":true},"1dab5ab6bcf11de47ab9db295df8c4f1d92ffa750e8f095e88c71ce4c3299628","f71f46ccd5a90566f0a37b25b23bc4684381ab2180bdf6733f4e6624474e1894",{"version":"54e65985a3ee3cec182e6a555e20974ea936fc8b8d1738c14e8ed8a42bd921d4","affectsGlobalScope":true},"82408ed3e959ddc60d3e9904481b5a8dc16469928257af22a3f7d1a3bc7fd8c4","5b30f550565fd0a7524282c81c27fe8534099e2cd26170ca80852308f07ae68d","34e5de87d983bc6aefef8b17658556e3157003e8d9555d3cb098c6bef0b5fbc8","d97cd8a4a42f557fc62271369ed0461c8e50d47b7f9c8ad0b5462f53306f6060","f27371653aded82b2b160f7a7033fb4a5b1534b6f6081ef7be1468f0f15327d3","c762cd6754b13a461c54b59d0ae0ab7aeef3c292c6cf889873f786ee4d8e75c9","f4ea7d5df644785bd9fbf419930cbaec118f0d8b4160037d2339b8e23c059e79",{"version":"bfea28e6162ed21a0aeed181b623dcf250aa79abf49e24a6b7e012655af36d81","affectsGlobalScope":true},"b8aca9d0c81abb02bec9b7621983ae65bde71da6727580070602bd2500a9ce2a","ae97e20f2e10dbeec193d6a2f9cd9a367a1e293e7d6b33b68bacea166afd7792","10d4796a130577d57003a77b95d8723530bbec84718e364aa2129fa8ffba0378","063f53ff674228c190efa19dd9448bcbd540acdbb48a928f4cf3a1b9f9478e43","bf73c576885408d4a176f44a9035d798827cc5020d58284cb18d7573430d9022","7ae078ca42a670445ae0c6a97c029cb83d143d62abd1730efb33f68f0b2c0e82",{"version":"e8b18c6385ff784228a6f369694fcf1a6b475355ba89090a88de13587a9391d5","affectsGlobalScope":true},"287b21dc1d1b9701c92e15e7dd673dfe6044b15812956377adffb6f08825b1bc","12eea70b5e11e924bb0543aea5eadc16ced318aa26001b453b0d561c2fd0bd1e","08777cd9318d294646b121838574e1dd7acbb22c21a03df84e1f2c87b1ad47f2","08a90bcdc717df3d50a2ce178d966a8c353fd23e5c392fd3594a6e39d9bb6304",{"version":"4cd4cff679c9b3d9239fd7bf70293ca4594583767526916af8e5d5a47d0219c7","affectsGlobalScope":true},"2a12d2da5ac4c4979401a3f6eaafa874747a37c365e4bc18aa2b171ae134d21b","002b837927b53f3714308ecd96f72ee8a053b8aeb28213d8ec6de23ed1608b66","1dc9c847473bb47279e398b22c740c83ea37a5c88bf66629666e3cf4c5b9f99c","a9e4a5a24bf2c44de4c98274975a1a705a0abbaad04df3557c2d3cd8b1727949","00fa7ce8bc8acc560dc341bbfdf37840a8c59e6a67c9bfa3fa5f36254df35db2","1b952304137851e45bc009785de89ada562d9376177c97e37702e39e60c2f1ff",{"version":"806ef4cac3b3d9fa4a48d849c8e084d7c72fcd7b16d76e06049a9ed742ff79c0","affectsGlobalScope":true},"44b8b584a338b190a59f4f6929d072431950c7bd92ec2694821c11bce180c8a5","5f0ed51db151c2cdc4fa3bb0f44ce6066912ad001b607a34e65a96c52eb76248",{"version":"af9771b066ec35ffa1c7db391b018d2469d55e51b98ae95e62b6cbef1b0169ca","affectsGlobalScope":true},"664d8f2d59164f2e08c543981453893bc7e003e4dfd29651ce09db13e9457980","103d70bfbeb3cd3a3f26d1705bf986322d8738c2c143f38ebb743b1e228d7444","f52fbf64c7e480271a9096763c4882d356b05cab05bf56a64e68a95313cd2ce2","59bdb65f28d7ce52ccfc906e9aaf422f8b8534b2d21c32a27d7819be5ad81df7",{"version":"3a2da34079a2567161c1359316a32e712404b56566c45332ac9dcee015ecce9f","affectsGlobalScope":true},"28a2e7383fd898c386ffdcacedf0ec0845e5d1a86b5a43f25b86bc315f556b79","3aff9c8c36192e46a84afe7b926136d520487155154ab9ba982a8b544ea8fc95","a880cf8d85af2e4189c709b0fea613741649c0e40fffb4360ec70762563d5de0","85bbf436a15bbeda4db888be3062d47f99c66fd05d7c50f0f6473a9151b6a070","9f9c49c95ecd25e0cb2587751925976cf64fd184714cb11e213749c80cf0f927","f0c75c08a71f9212c93a719a25fb0320d53f2e50ca89a812640e08f8ad8c408c",{"version":"ab9b9a36e5284fd8d3bf2f7d5fcbc60052f25f27e4d20954782099282c60d23e","affectsGlobalScope":true},"9cafe917bf667f1027b2bb62e2de454ecd2119c80873ad76fc41d941089753b8","8841e2aa774b89bd23302dede20663306dc1b9902431ac64b24be8b8d0e3f649","fd326577c62145816fe1acc306c734c2396487f76719d3785d4e825b34540b33","3ebae8c00411116a66fca65b08228ea0cf0b72724701f9b854442100aab55aba",{"version":"271cde49dfd9b398ccc91bb3aaa43854cf76f4d14e10fed91cbac649aa6cbc63","affectsGlobalScope":true},"2bcecd31f1b4281710c666843fc55133a0ee25b143e59f35f49c62e168123f4b","a6273756fa05f794b64fe1aff45f4371d444f51ed0257f9364a8b25f3501915d","9c4e644fe9bf08d93c93bd892705842189fe345163f8896849d5964d21b56b78","25d91fb9ed77a828cc6c7a863236fb712dafcd52f816eec481bd0c1f589f4404","4cd14cea22eed1bfb0dc76183e56989f897ac5b14c0e2a819e5162eafdcfe243","8d32432f68ca4ce93ad717823976f2db2add94c70c19602bf87ee67fe51df48b","ee65fe452abe1309389c5f50710f24114e08a302d40708101c4aa950a2a7d044","6acf8a984c2728906edeba2098c5c51f44a4520bc4a48c65b973bd785537178f","de1d6e224048139baf7494237a9231be6bab9e990fb239c7825bfd38b06d8c90","8b06ac3faeacb8484d84ddb44571d8f410697f98d7bfa86c0fda60373a9f5215","7eb06594824ada538b1d8b48c3925a83e7db792f47a081a62cf3e5c4e23cf0ee","f5638f7c2f12a9a1a57b5c41b3c1ea7db3876c003bab68e6a57afd6bcc169af0","0d14fa22c41fdc7277e6f71473b20ebc07f40f00e38875142335d5b63cdfc9d2","d8aab31ba8e618cc3eea10b0945de81cb93b7e8150a013a482332263b9305322","462bccdf75fcafc1ae8c30400c9425e1a4681db5d605d1a0edb4f990a54d8094","5923d8facbac6ecf7c84739a5c701a57af94a6f6648d6229a6c768cf28f0f8cb","7adecb2c3238794c378d336a8182d4c3dd2c4fa6fa1785e2797a3db550edea62","dc12dc0e5aa06f4e1a7692149b78f89116af823b9e1f1e4eae140cd3e0e674e6","1bfc6565b90c8771615cd8cfcf9b36efc0275e5e83ac7d9181307e96eb495161","8a8a96898906f065f296665e411f51010b51372fa260d5373bf9f64356703190","7f82ef88bdb67d9a850dd1c7cd2d690f33e0f0acd208e3c9eba086f3670d4f73",{"version":"3ca3179dd4772b596ed81df8bb9c541e1416d86343c582a105013b20925de051","affectsGlobalScope":true},"c5a14bdeb170e0e67fb4200c54e0e02fd0ec94aca894c212c9d43c2916891542","cddf5c26907c0b8378bc05543161c11637b830da9fadf59e02a11e675d11e180","2a2e2c6463bcf3c59f31bc9ab4b6ef963bbf7dffb049cd017e2c1834e3adca63","209e814e8e71aec74f69686a9506dd7610b97ab59dcee9446266446f72a76d05","6fa0008bf91a4cc9c8963bace4bba0bd6865cbfa29c3e3ccc461155660fb113a","df38da6685578ac3d0e4ce2d20f3d59462ee53959b8263d2532ec9cec48ae098","4b8ab3f9f820a112eb90213dc4b1381034f531f00bfb73cc60088cf9c9fa8ff5","2b8264b2fefd7367e0f20e2c04eed5d3038831fe00f5efbc110ff0131aab899b","6209c901f30cc321f4b86800d11fad3d67e73a3308f19946b1bc642af0280298","62b931417104c7cb35d0725e1869f51d52d7b18462fd58f32f846a314a42ba10","b344467763f90fe9ab9a1cd435b7401b19f5a6be2d6beded79d25266002dcbc9","ebe77545478bf39a23059a3b0ea03d2c0e502d9c8e1122015e19213cd0815097","ad8c69f4a471cafdf093acdcdf3b444ae56b227b92024ae45f8c9c9c8be8afcc","71a6149f67a64b55baeddb83e5254e9e017c80c15a260d6f6b3a12deb3a575ed","6c881abb4a0e7579a9d5b63a7e4da3d98b094adf0f1d1fa75bbe433b9f3d7c27","66d6844502d7764a8e02b632228c4c5a95f7cac7bce1a0db07f0dcc377d3755b","2e1be3fee9ccef82555b2f039e8e100e0a176ee2d18b0de95e7da6a61e1e360a","5c48fc6096e361e639c1d0a9f7f066242bf757ace84843582d29c6813563055a","bebac54845e03ea36044fab99b5a51266cec2492fcd8a95bde6d5527a3174732","ef141fd0ac854fc92cbc9a13cd25a0ac87b3961f70d516f191bb3e29d3b183fe","a90c6f5554bd74f63aaf03751e6b79d01a457b59339b03d308c16af8f266cf47","7d5d42c18c62ef137b8830b7de8432b466c8f4d93fa8476ac36d2f69114fad1e","484faf958ae025f8d1ce6cb9c75e12c2148190efc22151299d14d10e3601cbba","66ddf54cc3d66cdab1b69e6879af9876bbc30030f85e51ba8a73223339e65b85","734166f6ae00b52512304c153644963fd93cd152620231ea7a0560802c968d28","15ce0cfa537ada25e07633617a993a8e02827939c2128d39c010739f28a0379c","a3868158152cc946c27c5e7b7803537c14cada9bb442c96c759c66b0d01f9eca","00ee901c4135af0d5688bee246d1e42ef7421cec93c32587e4814f744b95e2e8",{"version":"83800fe6ed3ecb114e0ddb6f82f9ac621e2847fa6f77f9f04a56c0c51d13a162","affectsGlobalScope":true},"2f9dbca98c7797139e1a723a03a2c53840ba42bfea249f3af87b73fa95e92091","8a19491eba2108d5c333c249699f40aff05ad312c04a17504573b27d91f0aede","74b0245c42990ed8a849df955db3f4362c81b13f799ebc981b7bec2d5b414a57","060c5f256fce980694fbab25c3806fe0efd26fb2f36194241288bc200ce7e3b4","67fc055eb86a0632e2e072838f889ffe1754083cb13c8c80a06a7d895d877aae","b0d10e46cfe3f6c476b69af02eaa38e4ccc7430221ce3109ae84bb9fb8282298","3833c70307dc3d2b46cb6f2a8b6a90e4d7e7367a21ab18c481d7de0909a43e67",{"version":"dd4d769260a2b8cf19f0d2457f3142b24f083237932b0d1edb5fd728a989c8bd","affectsGlobalScope":true},"2fcd2d22b1f30555e785105597cd8f57ed50300e213c4f1bbca6ae149f782c38",{"version":"bb4248c7f953233ac52332088fac897d62b82be07244e551d87c5049600b6cf7","affectsGlobalScope":true},"2887592574fcdfd087647c539dcb0fbe5af2521270dad4a37f9d17c16190d579","c6c1427ba1efa270964d61564a3d99b59c0865a51dd55e4beb9f50e5c9aa8b51","4fb0b7d532aa6fb850b6cd2f1ee4f00802d877b5c66a51903bc1fb0624126349","2887592574fcdfd087647c539dcb0fbe5af2521270dad4a37f9d17c16190d579","b90c59ac4682368a01c83881b814738eb151de8a58f52eb7edadea2bcffb11b9","8560a87b2e9f8e2c3808c8f6172c9b7eb6c9b08cb9f937db71c285ecf292c81d","ffe3931ff864f28d80ae2f33bd11123ad3d7bad9896b910a1e61504cc093e1f5","083c1bd82f8dc3a1ed6fc9e8eaddf141f7c05df418eca386598821e045253af9","274ebe605bd7f71ce161f9f5328febc7d547a2929f803f04b44ec4a7d8729517","6ca0207e70d985a24396583f55836b10dc181063ab6069733561bfde404d1bad","5908142efeaab38ffdf43927ee0af681ae77e0d7672b956dfb8b6c705dbfe106","f772b188b943549b5c5eb803133314b8aa7689eced80eed0b70e2f30ca07ab9c","0026b816ef05cfbf290e8585820eef0f13250438669107dfc44482bac007b14f","05d64cc1118031b29786632a9a0f6d7cf1dcacb303f27023a466cf3cdc860538","e0fff9119e1a5d2fdd46345734126cd6cb99c2d98a9debf0257047fe3937cc3f","d84398556ba4595ee6be554671da142cfe964cbdebb2f0c517a10f76f2b016c0","e275297155ec3251200abbb334c7f5641fecc68b2a9573e40eed50dff7584762","b2f006ee835f315d01c43c0f5d9e9ad78a5870b380899877b32a33078d065dbd",{"version":"3a6de361cea25e21054d8f8a8e35c5c0df730982f9b9fb613a6e9029e54071e5","affectsGlobalScope":true},"f7e133b20ee2669b6c0e5d7f0cd510868c57cd64b283e68c7f598e30ce9d76d2","09c4b2e2d3070239d563fc690f0cc5db04a2d9b66a23e61aef8b5274e3e9910c"],"options":{"allowSyntheticDefaultImports":true,"declaration":true,"declarationMap":false,"esModuleInterop":true,"inlineSourceMap":false,"jsx":2,"module":7,"noFallthroughCasesInSwitch":true,"noUnusedLocals":false,"noUnusedParameters":false,"outDir":"./dist","removeComments":true,"rootDir":"./src","skipDefaultLibCheck":true,"skipLibCheck":true,"sourceMap":false,"strict":true,"target":1},"fileIdsList":[[192,247],[247],[192,193,194,195,196,247],[192,194,247],[201,202,247],[198,199,200,201,247],[202,247],[219,220,247,254,255],[220,247,254],[247,264],[247,258,264],[247,259,260,261,262,263],[247,268],[247,269],[247,274,279],[247,271,278],[247,282],[204,247],[207,247],[208,213,247],[209,219,220,227,236,246,247],[209,210,219,227,247],[211,247],[212,213,220,228,247],[213,236,243,247],[214,216,219,227,247],[215,247],[216,217,247],[218,219,247],[219,247],[219,220,221,236,246,247],[219,220,221,236,247],[247,251],[222,227,236,246,247],[219,220,222,223,227,236,243,246,247],[222,224,236,243,246,247],[204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253],[219,225,247],[226,246,247],[216,219,227,236,247],[228,247],[229,247],[207,230,247],[231,245,247,251],[232,247],[233,247],[219,234,247],[234,235,247,249],[219,236,237,238,247],[236,238,247],[236,237,247],[239,247],[240,247],[219,241,242,247],[241,242,247],[213,227,236,243,247],[244,247],[227,245,247],[208,222,233,246,247],[213,247],[236,247,248],[247,249],[247,250],[208,213,219,221,230,236,246,247,249,251],[236,247,252],[56,247],[56,247,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307],[56,247,292,308],[56,247,308],[56,79,80,247],[56,79,247],[56,247,309],[56,137,247],[137,138,139,140,141,247],[52,53,54,55,247],[247,254],[247,280],[247,318],[247,320],[247,254,325,326,327,328,329,330,331,332,333,334,335],[247,324,325,334],[247,325,334],[247,314,324,325,334],[247,325],[213,247,324,334],[247,324,325,326,327,328,329,330,331,332,333,335],[213,247,254,316,320,321,322,336],[247,339],[247,272,275],[247,272,275,276,277],[247,274],[58,59,60,61,62,63,64,65,66,67,247],[56,71,247],[68,70,72,73,75,76,77,247],[69,73,74,247],[69,247],[71,247],[135,247],[95,135,247],[90,135,247],[90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,247],[247,273],[56,159,247],[56,153,154,155,156,157,158,247],[160,161,247],[54,56,159,247],[54,56,159,190,247],[56,190,247],[144,247],[176,177,178,247],[54,56,247],[169,247],[167,168,190,247],[54,56,82,87,142,146,147,148,152,162,163,164,165,190,247],[54,56,142,146,190,247],[56,87,142,143,145,166,170,171,190,247],[54,56,146,190,247],[80,190,247],[81,247],[56,83,84,85,190,247],[54,56,57,78,80,82,86,87,88,190,247],[54,56,87,179,190,247],[54,56,87,143,174,190,247],[54,56,87,136,170,172,190,247],[54,56,57,87,180,190,247],[54,56,57,87,89,173,175,181,183,184,185,247],[186,247],[136,151,190,247],[54,56,87,146,182,190,247],[149,151,190,247],[87,247],[190,247],[136,190,247],[56,78,247],[163,247],[150,247],[56,146,247],[56,187,190,247]],"referencedMap":[[194,1],[192,2],[191,2],[197,3],[193,1],[195,4],[196,1],[203,5],[198,2],[202,6],[199,7],[201,2],[256,8],[257,9],[258,2],[262,10],[263,10],[259,11],[260,11],[261,11],[264,12],[265,2],[266,2],[267,2],[268,2],[269,13],[270,14],[280,15],[271,2],[279,16],[200,2],[281,2],[283,17],[255,2],[284,2],[204,18],[205,18],[207,19],[208,20],[209,21],[210,22],[211,23],[212,24],[213,25],[214,26],[215,27],[216,28],[217,28],[218,29],[219,30],[220,31],[221,32],[206,33],[253,2],[222,34],[223,35],[224,36],[254,37],[225,38],[226,39],[227,40],[228,41],[229,42],[230,43],[231,44],[232,45],[233,46],[234,47],[235,48],[236,49],[238,50],[237,51],[239,52],[240,53],[241,54],[242,55],[243,56],[244,57],[245,58],[246,59],[247,60],[248,61],[249,62],[250,63],[251,64],[252,65],[285,2],[286,30],[287,2],[288,2],[289,2],[54,2],[290,2],[291,66],[308,67],[293,68],[294,68],[296,68],[297,68],[295,66],[307,69],[298,68],[299,68],[300,68],[301,68],[302,68],[303,68],[304,68],[305,68],[306,68],[182,66],[57,66],[143,70],[80,71],[309,72],[310,66],[138,73],[140,66],[137,66],[139,73],[141,2],[142,74],[52,2],[56,75],[292,66],[311,76],[312,2],[55,2],[313,2],[314,2],[315,2],[316,2],[317,77],[319,78],[318,2],[321,79],[320,2],[282,2],[338,2],[336,80],[335,81],[326,82],[327,83],[328,83],[329,82],[330,82],[331,82],[332,84],[325,85],[333,81],[334,86],[324,2],[337,87],[323,2],[339,2],[340,88],[322,2],[146,2],[53,2],[79,2],[272,2],[276,89],[278,90],[277,89],[275,91],[62,66],[58,2],[68,92],[60,66],[67,2],[59,2],[64,2],[65,2],[61,2],[66,2],[63,2],[72,93],[76,66],[78,94],[75,95],[70,96],[77,66],[69,66],[74,97],[71,2],[73,96],[107,98],[106,98],[108,98],[109,98],[97,98],[110,2],[111,2],[112,99],[113,2],[114,2],[115,98],[116,98],[117,2],[118,2],[119,98],[96,98],[95,98],[120,98],[121,2],[122,2],[123,2],[124,98],[98,98],[91,100],[100,98],[101,98],[102,98],[103,98],[104,98],[105,98],[135,101],[136,98],[125,2],[126,98],[127,98],[94,2],[128,98],[129,98],[131,98],[130,98],[99,98],[132,98],[92,2],[93,2],[133,2],[134,2],[90,98],[149,2],[274,102],[273,2],[153,103],[159,104],[158,103],[156,103],[154,103],[155,103],[157,103],[11,2],[12,2],[14,2],[13,2],[2,2],[15,2],[16,2],[17,2],[18,2],[19,2],[20,2],[21,2],[22,2],[3,2],[4,2],[26,2],[23,2],[24,2],[25,2],[27,2],[28,2],[29,2],[5,2],[30,2],[31,2],[32,2],[33,2],[6,2],[34,2],[35,2],[36,2],[37,2],[7,2],[42,2],[38,2],[39,2],[40,2],[41,2],[8,2],[46,2],[43,2],[44,2],[45,2],[47,2],[9,2],[48,2],[49,2],[50,2],[1,2],[10,2],[51,2],[190,2],[162,105],[160,106],[161,107],[144,108],[145,109],[88,2],[179,110],[176,66],[177,66],[178,111],[170,112],[169,113],[166,114],[165,115],[174,2],[172,116],[171,117],[81,118],[82,119],[86,120],[185,2],[89,121],[180,122],[175,123],[173,124],[181,125],[186,126],[187,127],[184,128],[163,108],[84,2],[85,2],[183,129],[83,2],[168,2],[152,130],[148,131],[167,132],[147,133],[87,134],[164,135],[151,136],[189,137],[150,2],[188,138]],"exportedModulesMap":[[194,1],[192,2],[191,2],[197,3],[193,1],[195,4],[196,1],[203,5],[198,2],[202,6],[199,7],[201,2],[256,8],[257,9],[258,2],[262,10],[263,10],[259,11],[260,11],[261,11],[264,12],[265,2],[266,2],[267,2],[268,2],[269,13],[270,14],[280,15],[271,2],[279,16],[200,2],[281,2],[283,17],[255,2],[284,2],[204,18],[205,18],[207,19],[208,20],[209,21],[210,22],[211,23],[212,24],[213,25],[214,26],[215,27],[216,28],[217,28],[218,29],[219,30],[220,31],[221,32],[206,33],[253,2],[222,34],[223,35],[224,36],[254,37],[225,38],[226,39],[227,40],[228,41],[229,42],[230,43],[231,44],[232,45],[233,46],[234,47],[235,48],[236,49],[238,50],[237,51],[239,52],[240,53],[241,54],[242,55],[243,56],[244,57],[245,58],[246,59],[247,60],[248,61],[249,62],[250,63],[251,64],[252,65],[285,2],[286,30],[287,2],[288,2],[289,2],[54,2],[290,2],[291,66],[308,67],[293,68],[294,68],[296,68],[297,68],[295,66],[307,69],[298,68],[299,68],[300,68],[301,68],[302,68],[303,68],[304,68],[305,68],[306,68],[182,66],[57,66],[143,70],[80,71],[309,72],[310,66],[138,73],[140,66],[137,66],[139,73],[141,2],[142,74],[52,2],[56,75],[292,66],[311,76],[312,2],[55,2],[313,2],[314,2],[315,2],[316,2],[317,77],[319,78],[318,2],[321,79],[320,2],[282,2],[338,2],[336,80],[335,81],[326,82],[327,83],[328,83],[329,82],[330,82],[331,82],[332,84],[325,85],[333,81],[334,86],[324,2],[337,87],[323,2],[339,2],[340,88],[322,2],[146,2],[53,2],[79,2],[272,2],[276,89],[278,90],[277,89],[275,91],[62,66],[58,2],[68,92],[60,66],[67,2],[59,2],[64,2],[65,2],[61,2],[66,2],[63,2],[72,93],[76,66],[78,94],[75,95],[70,96],[77,66],[69,66],[74,97],[71,2],[73,96],[107,98],[106,98],[108,98],[109,98],[97,98],[110,2],[111,2],[112,99],[113,2],[114,2],[115,98],[116,98],[117,2],[118,2],[119,98],[96,98],[95,98],[120,98],[121,2],[122,2],[123,2],[124,98],[98,98],[91,100],[100,98],[101,98],[102,98],[103,98],[104,98],[105,98],[135,101],[136,98],[125,2],[126,98],[127,98],[94,2],[128,98],[129,98],[131,98],[130,98],[99,98],[132,98],[92,2],[93,2],[133,2],[134,2],[90,98],[149,2],[274,102],[273,2],[153,103],[159,104],[158,103],[156,103],[154,103],[155,103],[157,103],[11,2],[12,2],[14,2],[13,2],[2,2],[15,2],[16,2],[17,2],[18,2],[19,2],[20,2],[21,2],[22,2],[3,2],[4,2],[26,2],[23,2],[24,2],[25,2],[27,2],[28,2],[29,2],[5,2],[30,2],[31,2],[32,2],[33,2],[6,2],[34,2],[35,2],[36,2],[37,2],[7,2],[42,2],[38,2],[39,2],[40,2],[41,2],[8,2],[46,2],[43,2],[44,2],[45,2],[47,2],[9,2],[48,2],[49,2],[50,2],[1,2],[10,2],[51,2],[190,2],[162,105],[160,106],[161,107],[144,108],[145,109],[88,2],[179,110],[176,66],[177,66],[178,111],[170,112],[169,113],[166,114],[165,115],[174,2],[172,116],[171,117],[81,118],[82,119],[86,120],[185,2],[89,121],[180,122],[175,123],[173,124],[181,125],[186,126],[187,127],[184,128],[163,108],[84,2],[85,2],[183,129],[83,2],[168,2],[152,130],[148,131],[167,132],[147,133],[87,134],[164,135],[151,136],[189,137],[150,2],[188,138]],"semanticDiagnosticsPerFile":[194,192,191,197,193,195,196,203,198,202,199,201,256,257,258,262,263,259,260,261,264,265,266,267,268,269,270,280,271,279,200,281,283,255,284,204,205,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,206,253,222,223,224,254,225,226,227,228,229,230,231,232,233,234,235,236,238,237,239,240,241,242,243,244,245,246,247,248,249,250,251,252,285,286,287,288,289,54,290,291,308,293,294,296,297,295,307,298,299,300,301,302,303,304,305,306,182,57,143,80,309,310,138,140,137,139,141,142,52,56,292,311,312,55,313,314,315,316,317,319,318,321,320,282,338,336,335,326,327,328,329,330,331,332,325,333,334,324,337,323,339,340,322,146,53,79,272,276,278,277,275,62,58,68,60,67,59,64,65,61,66,63,72,76,78,75,70,77,69,74,71,73,107,106,108,109,97,110,111,112,113,114,115,116,117,118,119,96,95,120,121,122,123,124,98,91,100,101,102,103,104,105,135,136,125,126,127,94,128,129,131,130,99,132,92,93,133,134,90,149,274,273,153,159,158,156,154,155,157,11,12,14,13,2,15,16,17,18,19,20,21,22,3,4,26,23,24,25,27,28,29,5,30,31,32,33,6,34,35,36,37,7,42,38,39,40,41,8,46,43,44,45,47,9,48,49,50,1,10,51,190,162,160,161,144,145,88,179,176,177,178,170,169,166,165,174,172,171,81,82,86,185,89,180,175,173,181,186,187,184,163,84,85,183,83,168,152,148,167,147,87,164,151,189,150,188],"affectedFilesPendingEmit":[[194,1],[192,1],[191,1],[197,1],[193,1],[195,1],[196,1],[203,1],[198,1],[202,1],[199,1],[201,1],[256,1],[257,1],[258,1],[262,1],[263,1],[259,1],[260,1],[261,1],[264,1],[265,1],[266,1],[267,1],[268,1],[269,1],[270,1],[280,1],[271,1],[279,1],[200,1],[281,1],[283,1],[255,1],[284,1],[204,1],[205,1],[207,1],[208,1],[209,1],[210,1],[211,1],[212,1],[213,1],[214,1],[215,1],[216,1],[217,1],[218,1],[219,1],[220,1],[221,1],[206,1],[253,1],[222,1],[223,1],[224,1],[254,1],[225,1],[226,1],[227,1],[228,1],[229,1],[230,1],[231,1],[232,1],[233,1],[234,1],[235,1],[236,1],[238,1],[237,1],[239,1],[240,1],[241,1],[242,1],[243,1],[244,1],[245,1],[246,1],[247,1],[248,1],[249,1],[250,1],[251,1],[252,1],[285,1],[286,1],[287,1],[288,1],[289,1],[54,1],[290,1],[291,1],[308,1],[293,1],[294,1],[296,1],[297,1],[295,1],[307,1],[298,1],[299,1],[300,1],[301,1],[302,1],[303,1],[304,1],[305,1],[306,1],[182,1],[57,1],[143,1],[80,1],[309,1],[310,1],[138,1],[140,1],[137,1],[139,1],[141,1],[142,1],[52,1],[56,1],[292,1],[311,1],[312,1],[55,1],[313,1],[314,1],[315,1],[316,1],[317,1],[319,1],[318,1],[321,1],[320,1],[282,1],[338,1],[336,1],[335,1],[326,1],[327,1],[328,1],[329,1],[330,1],[331,1],[332,1],[325,1],[333,1],[334,1],[324,1],[337,1],[323,1],[339,1],[340,1],[322,1],[146,1],[53,1],[79,1],[272,1],[276,1],[278,1],[277,1],[275,1],[62,1],[58,1],[68,1],[60,1],[67,1],[59,1],[64,1],[65,1],[61,1],[66,1],[63,1],[72,1],[76,1],[78,1],[75,1],[70,1],[77,1],[69,1],[74,1],[71,1],[73,1],[107,1],[106,1],[108,1],[109,1],[97,1],[110,1],[111,1],[112,1],[113,1],[114,1],[115,1],[116,1],[117,1],[118,1],[119,1],[96,1],[95,1],[120,1],[121,1],[122,1],[123,1],[124,1],[98,1],[91,1],[100,1],[101,1],[102,1],[103,1],[104,1],[105,1],[135,1],[136,1],[125,1],[126,1],[127,1],[94,1],[128,1],[129,1],[131,1],[130,1],[99,1],[132,1],[92,1],[93,1],[133,1],[134,1],[90,1],[149,1],[274,1],[273,1],[153,1],[159,1],[158,1],[156,1],[154,1],[155,1],[157,1],[2,1],[3,1],[4,1],[5,1],[6,1],[7,1],[8,1],[9,1],[10,1],[190,1],[162,1],[160,1],[161,1],[144,1],[145,1],[88,1],[179,1],[176,1],[177,1],[178,1],[170,1],[169,1],[166,1],[165,1],[174,1],[172,1],[171,1],[81,1],[82,1],[86,1],[185,1],[89,1],[180,1],[175,1],[173,1],[181,1],[186,1],[187,1],[184,1],[163,1],[84,1],[85,1],[183,1],[83,1],[168,1],[152,1],[148,1],[167,1],[147,1],[87,1],[164,1],[151,1],[189,1],[150,1],[188,1]]},"version":"4.6.4"}
\ No newline at end of file

From c62bfb440ecae57d188a5f63557fa4e64a07a0c9 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Mon, 6 Jun 2022 11:52:53 +0430
Subject: [PATCH 33/64] use core portfolio and contract store in trader and
 reports

---
 .../core/src/Stores/active-symbols-store.js   |  5 ++--
 packages/core/src/Stores/base-store.js        | 26 ++++++++--------
 .../core/src/Stores/contract-trade-store.js   |  4 ++-
 packages/core/src/Stores/portfolio.js         |  6 ++--
 .../src/Components/indicative-cell.jsx        |  4 +--
 .../reports/src/Containers/open-positions.jsx | 20 ++++++-------
 .../src/Containers/progress-slider-stream.jsx |  4 +--
 .../Stores/Modules/Contract/contract-store.js |  6 ++--
 .../src/Stores/Modules/Trading/trade-store.js | 13 ++++----
 packages/reports/src/Stores/index.js          |  1 +
 .../shared/src/utils/constants/markers.js     | 26 +++++++---------
 .../ContractDrawer/contract-drawer-card.jsx   |  4 +--
 .../PositionsDrawer/positions-drawer.jsx      | 18 +++++------
 .../PositionsDrawer/positions-modal-card.jsx  |  6 ++--
 .../toggle-positions-mobile.jsx               |  4 +--
 .../progress-slider-stream.jsx                |  4 +--
 .../src/App/Containers/Routes/routes.jsx      |  4 +--
 .../Containers/trade-footer-extensions.jsx    |  4 +--
 .../Containers/trade-header-extensions.jsx    | 16 +++++-----
 .../Containers/contract-replay-widget.jsx     | 20 ++++++-------
 .../Contract/Containers/contract-replay.jsx   | 30 +++++++++----------
 .../Modules/Contract/Containers/contract.jsx  | 16 +++++-----
 .../SmartChart/Components/top-widgets.jsx     |  6 ++--
 .../Trading/Containers/chart-widgets.jsx      | 18 +++++------
 .../src/Modules/Trading/Containers/test.jsx   |  4 +--
 .../src/Modules/Trading/Containers/trade.jsx  | 22 +++++++-------
 .../src/Stores/Modules/Trading/trade-store.js |  5 ++--
 packages/trader/src/Stores/index.js           |  1 +
 28 files changed, 148 insertions(+), 149 deletions(-)

diff --git a/packages/core/src/Stores/active-symbols-store.js b/packages/core/src/Stores/active-symbols-store.js
index a274aa01f71d..8e20789d30d0 100644
--- a/packages/core/src/Stores/active-symbols-store.js
+++ b/packages/core/src/Stores/active-symbols-store.js
@@ -1,13 +1,14 @@
 import { WS } from '@deriv/shared';
-import { observable } from 'mobx';
+import { observable, action } from 'mobx';
 import BaseStore from './base-store';
 
 export default class ActiveSymbolsStore extends BaseStore {
     @observable active_symbols = [];
 
+    @action.bound
     async setActiveSymbols() {
         const { active_symbols } = await WS.authorized.activeSymbols();
-        if (active_symbols.lenght) {
+        if (!active_symbols.lenght) {
             this.active_symbols = [];
             return;
         }
diff --git a/packages/core/src/Stores/base-store.js b/packages/core/src/Stores/base-store.js
index 66eb8f8ad1c4..e82dce0947c6 100644
--- a/packages/core/src/Stores/base-store.js
+++ b/packages/core/src/Stores/base-store.js
@@ -284,13 +284,13 @@ export default class BaseStore {
             this.switch_account_listener = listener;
 
             this.switchAccountDisposer = when(
-                () => this.root_store.client.switch_broadcast,
+                () => this.root_store?.client.switch_broadcast,
                 async () => {
                     try {
                         const result = this.switch_account_listener();
                         if (result && result.then && typeof result.then === 'function') {
                             result.then(() => {
-                                this.root_store.client.switchEndSignal();
+                                this.root_store?.client.switchEndSignal();
                                 this.onSwitchAccount(this.switch_account_listener);
                             });
                         } else {
@@ -314,13 +314,13 @@ export default class BaseStore {
             this.pre_switch_account_listener = listener;
 
             this.preSwitchAccountDisposer = when(
-                () => this.root_store.client.pre_switch_broadcast,
+                () => this.root_store?.client.pre_switch_broadcast,
                 async () => {
                     try {
                         const result = this.pre_switch_account_listener();
                         if (result && result.then && typeof result.then === 'function') {
                             result.then(() => {
-                                this.root_store.client.setPreSwitchAccount(false);
+                                this.root_store?.client.setPreSwitchAccount(false);
                                 this.onPreSwitchAccount(this.pre_switch_account_listener);
                             });
                         } else {
@@ -341,13 +341,13 @@ export default class BaseStore {
     @action.bound
     onLogout(listener) {
         this.logoutDisposer = when(
-            () => this.root_store.client.has_logged_out,
+            () => this.root_store?.client.has_logged_out,
             async () => {
                 try {
                     const result = this.logout_listener();
                     if (result && result.then && typeof result.then === 'function') {
                         result.then(() => {
-                            this.root_store.client.setLogout(false);
+                            this.root_store?.client.setLogout(false);
                             this.onLogout(this.logout_listener);
                         });
                     } else {
@@ -368,13 +368,13 @@ export default class BaseStore {
     @action.bound
     onClientInit(listener) {
         this.clientInitDisposer = when(
-            () => this.root_store.client.initialized_broadcast,
+            () => this.root_store?.client.initialized_broadcast,
             async () => {
                 try {
                     const result = this.client_init_listener();
                     if (result && result.then && typeof result.then === 'function') {
                         result.then(() => {
-                            this.root_store.client.setInitialized(false);
+                            this.root_store?.client.setInitialized(false);
                             this.onClientInit(this.client_init_listener);
                         });
                     } else {
@@ -395,7 +395,7 @@ export default class BaseStore {
     @action.bound
     onNetworkStatusChange(listener) {
         this.networkStatusChangeDisposer = reaction(
-            () => this.root_store.common.is_network_online,
+            () => this.root_store?.common.is_network_online,
             is_online => {
                 try {
                     this.network_status_change_listener(is_online);
@@ -415,7 +415,7 @@ export default class BaseStore {
     @action.bound
     onThemeChange(listener) {
         this.themeChangeDisposer = reaction(
-            () => this.root_store.ui.is_dark_mode_on,
+            () => this.root_store?.ui.is_dark_mode_on,
             is_dark_mode_on => {
                 try {
                     this.theme_change_listener(is_dark_mode_on);
@@ -435,13 +435,13 @@ export default class BaseStore {
     @action.bound
     onRealAccountSignupEnd(listener) {
         this.realAccountSignupEndedDisposer = when(
-            () => this.root_store.ui.has_real_account_signup_ended,
+            () => this.root_store?.ui.has_real_account_signup_ended,
             () => {
                 try {
                     const result = this.real_account_signup_ended_listener();
                     if (result && result.then && typeof result.then === 'function') {
                         result.then(() => {
-                            this.root_store.ui.setRealAccountSignupEnd(false);
+                            this.root_store?.ui.setRealAccountSignupEnd(false);
                             this.onRealAccountSignupEnd(this.real_account_signup_ended_listener);
                         });
                     } else {
@@ -530,7 +530,7 @@ export default class BaseStore {
     @action.bound
     assertHasValidCache(loginid, ...reactions) {
         // account was changed when this was unmounted.
-        if (this.root_store.client.loginid !== loginid) {
+        if (this.root_store?.client.loginid !== loginid) {
             reactions.forEach(act => act());
             this.partial_fetch_time = false;
         }
diff --git a/packages/core/src/Stores/contract-trade-store.js b/packages/core/src/Stores/contract-trade-store.js
index 6ca241ab26f9..7890bdd66b33 100644
--- a/packages/core/src/Stores/contract-trade-store.js
+++ b/packages/core/src/Stores/contract-trade-store.js
@@ -57,7 +57,9 @@ export default class ContractTradeStore extends BaseStore {
     }
 
     applicable_contracts = () => {
-        const { symbol: underlying, contract_type: trade_type } = this.root_store.modules.trade;
+        // const { symbol: underlying, contract_type: trade_type } = this.root_store.modules.trade;
+        const trade_type = 'multiplier';
+        const underlying = 'frxAUDJPY';
         if (!trade_type || !underlying) {
             return [];
         }
diff --git a/packages/core/src/Stores/portfolio.js b/packages/core/src/Stores/portfolio.js
index b695c92466c2..2536637d5236 100644
--- a/packages/core/src/Stores/portfolio.js
+++ b/packages/core/src/Stores/portfolio.js
@@ -425,13 +425,13 @@ export default class PortfolioStore extends BaseStore {
         this.onLogout(this.logoutListener);
         if (this.positions.length === 0 && !this.has_subscribed_to_poc_and_transaction) {
             // TODO: Optimise the way is_logged_in changes are detected for "logging in" and "already logged on" states
-            if (this.root_store.client.is_logged_in) {
+            if (this.root_store?.client.is_logged_in) {
                 this.initializePortfolio();
             } else {
                 reaction(
-                    () => this.root_store.client.is_logged_in,
+                    () => this.root_store?.client.is_logged_in,
                     () => {
-                        if (this.root_store.client.is_logged_in) {
+                        if (this.root_store?.client.is_logged_in) {
                             this.initializePortfolio();
                         }
                     }
diff --git a/packages/reports/src/Components/indicative-cell.jsx b/packages/reports/src/Components/indicative-cell.jsx
index a6f768897885..0bf9029340e1 100644
--- a/packages/reports/src/Components/indicative-cell.jsx
+++ b/packages/reports/src/Components/indicative-cell.jsx
@@ -48,6 +48,6 @@ IndicativeCell.propTypes = {
     onClickSell: PropTypes.func,
 };
 
-export default connect(({ modules }) => ({
-    onClickSell: modules.portfolio.onClickSell,
+export default connect(({ portfolio }) => ({
+    onClickSell: portfolio.onClickSell,
 }))(IndicativeCell);
diff --git a/packages/reports/src/Containers/open-positions.jsx b/packages/reports/src/Containers/open-positions.jsx
index 80c9a0c08d10..bcbdb471b031 100644
--- a/packages/reports/src/Containers/open-positions.jsx
+++ b/packages/reports/src/Containers/open-positions.jsx
@@ -447,23 +447,23 @@ OpenPositions.propTypes = {
     server_time: PropTypes.object,
 };
 
-export default connect(({ modules, client, common, ui }) => ({
-    active_positions: modules.portfolio.active_positions,
+export default connect(({ modules, client, common, ui, portfolio, contract_trade }) => ({
+    active_positions: portfolio.active_positions,
     currency: client.currency,
-    error: modules.portfolio.error,
-    getPositionById: modules.portfolio.getPositionById,
-    is_loading: modules.portfolio.is_loading,
+    error: portfolio.error,
+    getPositionById: portfolio.getPositionById,
+    is_loading: portfolio.is_loading,
     is_multiplier: modules.trade.is_multiplier,
     NotificationMessages: ui.notification_messages_ui,
-    onClickCancel: modules.portfolio.onClickCancel,
-    onClickSell: modules.portfolio.onClickSell,
-    onMount: modules.portfolio.onMount,
+    onClickCancel: portfolio.onClickCancel,
+    onClickSell: portfolio.onClickSell,
+    onMount: portfolio.onMount,
     server_time: common.server_time,
 
     addToast: ui.addToast,
     current_focus: ui.current_focus,
-    onClickRemove: modules.portfolio.removePositionById,
-    getContractById: modules.contract_trade.getContractById,
+    onClickRemove: portfolio.removePositionById,
+    getContractById: contract_trade.getContractById,
     is_mobile: ui.is_mobile,
     removeToast: ui.removeToast,
     setCurrentFocus: ui.setCurrentFocus,
diff --git a/packages/reports/src/Containers/progress-slider-stream.jsx b/packages/reports/src/Containers/progress-slider-stream.jsx
index 23e628dc4204..024822c3d65c 100644
--- a/packages/reports/src/Containers/progress-slider-stream.jsx
+++ b/packages/reports/src/Containers/progress-slider-stream.jsx
@@ -30,7 +30,7 @@ ProgressSliderStream.propTypes = {
     server_time: PropTypes.object,
 };
 
-export default connect(({ common, modules }) => ({
-    is_loading: modules.portfolio.is_loading,
+export default connect(({ common, portfolio }) => ({
+    is_loading: portfolio.is_loading,
     server_time: common.server_time,
 }))(ProgressSliderStream);
diff --git a/packages/reports/src/Stores/Modules/Contract/contract-store.js b/packages/reports/src/Stores/Modules/Contract/contract-store.js
index 94f5bfe8457a..9c0d6276d4c8 100644
--- a/packages/reports/src/Stores/Modules/Contract/contract-store.js
+++ b/packages/reports/src/Stores/Modules/Contract/contract-store.js
@@ -119,7 +119,7 @@ export default class ContractStore extends BaseStore {
 
     @action.bound
     populateContractUpdateHistory({ contract_update_history }) {
-        this.root_store.modules.contract_replay.contract_store.contract_update_history = contract_update_history.sort(
+        this.root_store.contract_replay.contract_store.contract_update_history = contract_update_history.sort(
             (a, b) => b.order_date - a.order_date
         );
     }
@@ -140,7 +140,7 @@ export default class ContractStore extends BaseStore {
             }
             if (
                 contract_info.contract_id &&
-                contract_info.contract_id === this.root_store.modules.contract_replay.contract_id
+                contract_info.contract_id === this.root_store.contract_replay.contract_id
             ) {
                 setLimitOrderBarriers({
                     barriers: this.barriers_array,
@@ -205,7 +205,7 @@ export default class ContractStore extends BaseStore {
             }
 
             // Update portfolio store
-            this.root_store.modules.portfolio.populateContractUpdate(response, this.contract_id);
+            this.root_store.portfolio.populateContractUpdate(response, this.contract_id);
         });
     }
 }
diff --git a/packages/reports/src/Stores/Modules/Trading/trade-store.js b/packages/reports/src/Stores/Modules/Trading/trade-store.js
index 91f105b5295f..74875429d1a8 100644
--- a/packages/reports/src/Stores/Modules/Trading/trade-store.js
+++ b/packages/reports/src/Stores/Modules/Trading/trade-store.js
@@ -33,7 +33,7 @@ import { processTradeParams } from './Helpers/process';
 import { createProposalRequests, getProposalErrorField, getProposalInfo } from './Helpers/proposal';
 import { getBarrierPipSize } from './Helpers/barrier';
 import { setLimitOrderBarriers } from '../Contract/Helpers/limit-orders';
-// import { ChartBarrierStore } from '../SmartChart/chart-barrier-store';
+import { ChartBarrierStore } from '../SmartChart/chart-barrier-store';
 import { BARRIER_COLORS } from '../SmartChart/Constants/barriers';
 import { isBarrierSupported, removeBarrier } from '../SmartChart/Helpers/barriers';
 import BaseStore from 'Stores/base-store';
@@ -269,6 +269,7 @@ export default class TradeStore extends BaseStore {
         this.should_show_active_symbols_loading = should_show_loading;
 
         await this.setActiveSymbols();
+        await this.root_store.active_symbols.setActiveSymbols();
         if (should_set_default_symbol) await this.setDefaultSymbol();
 
         const r = await WS.storage.contractsFor(this.symbol);
@@ -514,7 +515,7 @@ export default class TradeStore extends BaseStore {
                 });
             }
         } else {
-            const ChartBarrierStore = this.root_store.chart_barrier_store;
+            // const ChartBarrierStore = this.root_store.chart_barrier_store;
             purchase_spot_barrier = new ChartBarrierStore(position.contract_info.entry_spot);
             purchase_spot_barrier.key = key;
             purchase_spot_barrier.draggable = false;
@@ -572,7 +573,7 @@ export default class TradeStore extends BaseStore {
         if (isBarrierSupported(contract_type)) {
             const color = this.root_store.ui.is_dark_mode_on ? BARRIER_COLORS.DARK_GRAY : BARRIER_COLORS.GRAY;
             // create barrier only when it's available in response
-            const ChartBarrierStore = this.root_store.chart_barrier_store;
+            // const ChartBarrierStore = this.root_store.chart_barrier_store;
             this.main_barrier = new ChartBarrierStore(barrier || high_barrier, low_barrier, this.onChartBarrierChange, {
                 color,
             });
@@ -863,8 +864,8 @@ export default class TradeStore extends BaseStore {
                 chart: {
                     toolbar_position: this.root_store.ui.is_chart_layout_default ? 'bottom' : 'left',
                     chart_asset_info: this.root_store.ui.is_chart_asset_info_visible ? 'visible' : 'hidden',
-                    chart_type: this.root_store.modules.contract_trade.chart_type,
-                    granularity: this.root_store.modules.contract_trade.granularity,
+                    chart_type: this.root_store.contract_trade.chart_type,
+                    granularity: this.root_store.contract_trade.granularity,
                 },
             },
         };
@@ -1167,7 +1168,7 @@ export default class TradeStore extends BaseStore {
         this.disposeThemeChange();
         this.is_trade_component_mounted = false;
         // TODO: Find a more elegant solution to unmount contract-trade-store
-        this.root_store.modules.contract_trade.onUnmount();
+        this.root_store.contract_trade.onUnmount();
         this.refresh();
         this.resetErrorServices();
         if (this.root_store.notifications.is_notifications_visible) {
diff --git a/packages/reports/src/Stores/index.js b/packages/reports/src/Stores/index.js
index c58801e8021c..f0495d2fb985 100644
--- a/packages/reports/src/Stores/index.js
+++ b/packages/reports/src/Stores/index.js
@@ -14,5 +14,6 @@ export default class RootStore {
         this.contract_trade = core_store.contract_trade;
         this.portfolio = core_store.portfolio;
         this.chart_barrier_store = core_store.chart_barrier_store;
+        this.active_symbols = core_store.active_symbols;
     }
 }
diff --git a/packages/shared/src/utils/constants/markers.js b/packages/shared/src/utils/constants/markers.js
index 1747225e6224..acd76a6cf7a2 100644
--- a/packages/shared/src/utils/constants/markers.js
+++ b/packages/shared/src/utils/constants/markers.js
@@ -1,18 +1,14 @@
 import { localize } from '@deriv/translations';
-// import MarkerLine from 'Modules/SmartChart/Components/Markers/marker-line.jsx';
-// import MarkerSpotLabel from 'Modules/SmartChart/Components/Markers/marker-spot-label.jsx';
-// import MarkerSpot from 'Modules/SmartChart/Components/Markers/marker-spot.jsx';
-
-// will be removed
-import React from 'react';
+// import MarkerLine from '../../components/markers/marker-line.jsx';
+// import MarkerSpotLabel from '../../components/markers/marker-spot-label.jsx';
+// import MarkerSpot from '../../components/markers/marker-spot.jsx';
 
 export const MARKER_TYPES_CONFIG = {
     LINE_END: {
         type: 'LINE_END',
         marker_config: {
             // ContentComponent: MarkerLine,
-            ContentComponent: <div>123</div>,
-
+            ContentComponent: null,
             className: 'chart-marker-line',
         },
         content_config: { line_style: 'dash', label: localize('End Time') },
@@ -21,8 +17,7 @@ export const MARKER_TYPES_CONFIG = {
         type: 'LINE_PURCHASE',
         marker_config: {
             // ContentComponent: MarkerLine,
-            ContentComponent: <div>123</div>,
-
+            ContentComponent: null,
             className: 'chart-marker-line',
         },
         content_config: { line_style: 'solid', label: localize('Purchase Time') },
@@ -31,8 +26,7 @@ export const MARKER_TYPES_CONFIG = {
         type: 'LINE_START',
         marker_config: {
             // ContentComponent: MarkerLine,
-            ContentComponent: <div>123</div>,
-
+            ContentComponent: null,
             className: 'chart-marker-line',
         },
         content_config: { line_style: 'solid', label: localize('Start Time') },
@@ -41,7 +35,7 @@ export const MARKER_TYPES_CONFIG = {
         type: 'SPOT_ENTRY',
         marker_config: {
             // ContentComponent: MarkerSpot,
-            ContentComponent: <div>123</div>,
+            ContentComponent: null,
         },
         content_config: { className: 'chart-spot__entry' },
     },
@@ -49,7 +43,7 @@ export const MARKER_TYPES_CONFIG = {
         type: 'SPOT_SELL',
         marker_config: {
             // ContentComponent: MarkerSpot,
-            ContentComponent: <div>123</div>,
+            ContentComponent: null,
         },
         content_config: { className: 'chart-spot__sell' },
     },
@@ -57,7 +51,7 @@ export const MARKER_TYPES_CONFIG = {
         type: 'SPOT_EXIT',
         marker_config: {
             // ContentComponent: MarkerSpotLabel,
-            ContentComponent: <div>123</div>,
+            ContentComponent: null,
         },
         content_config: { spot_className: 'chart-spot__spot' },
     },
@@ -65,7 +59,7 @@ export const MARKER_TYPES_CONFIG = {
         type: 'SPOT_MIDDLE',
         marker_config: {
             // ContentComponent: MarkerSpotLabel,
-            ContentComponent: <div>123</div>,
+            ContentComponent: null,
         },
         content_config: { spot_className: 'chart-spot__spot' },
     },
diff --git a/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx b/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx
index c5bb5aff6b8b..52d5108fb04f 100644
--- a/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx
+++ b/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx
@@ -165,11 +165,11 @@ ContractDrawerCard.propTypes = {
     status: PropTypes.string,
 };
 
-export default connect(({ modules, ui }) => ({
+export default connect(({ modules, ui, contract_trade }) => ({
     active_symbols: modules.trade.active_symbols,
     addToast: ui.addToast,
     current_focus: ui.current_focus,
-    getContractById: modules.contract_trade.getContractById,
+    getContractById: contract_trade.getContractById,
     removeToast: ui.removeToast,
     should_show_cancellation_warning: ui.should_show_cancellation_warning,
     setCurrentFocus: ui.setCurrentFocus,
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
index 2242427f1591..83d9ed456aff 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
@@ -161,11 +161,11 @@ PositionsDrawer.propTypes = {
     toggleUnsupportedContractModal: PropTypes.func,
 };
 
-export default connect(({ modules, ui, client, common }) => ({
-    all_positions: modules.portfolio.all_positions,
-    error: modules.portfolio.error,
-    onHoverPosition: modules.portfolio.onHoverPosition,
-    onMount: modules.portfolio.onMount,
+export default connect(({ modules, ui, client, common, portfolio, contract_trade }) => ({
+    all_positions: portfolio.all_positions,
+    error: portfolio.error,
+    onHoverPosition: portfolio.onHoverPosition,
+    onMount: portfolio.onMount,
     symbol: modules.trade.symbol,
     trade_contract_type: modules.trade.contract_type,
     is_mobile: ui.is_mobile,
@@ -176,10 +176,10 @@ export default connect(({ modules, ui, client, common }) => ({
     server_time: common.server_time,
     addToast: ui.addToast,
     current_focus: ui.current_focus,
-    onClickCancel: modules.portfolio.onClickCancel,
-    onClickSell: modules.portfolio.onClickSell,
-    onClickRemove: modules.portfolio.removePositionById,
-    getContractById: modules.contract_trade.getContractById,
+    onClickCancel: portfolio.onClickCancel,
+    onClickSell: portfolio.onClickSell,
+    onClickRemove: portfolio.removePositionById,
+    getContractById: contract_trade.getContractById,
     removeToast: ui.removeToast,
     setCurrentFocus: ui.setCurrentFocus,
     should_show_cancellation_warning: ui.should_show_cancellation_warning,
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx
index 8de266809b17..7cddaee82104 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx
@@ -324,16 +324,16 @@ PositionsModalCard.propTypes = {
     type: PropTypes.string,
 };
 
-export default connect(({ common, ui, modules }) => ({
+export default connect(({ common, ui, contract_trade, modules }) => ({
     active_symbols: modules.trade.active_symbols,
     addToast: ui.addToast,
     current_focus: ui.current_focus,
-    getContractById: modules.contract_trade.getContractById,
+    getContractById: contract_trade.getContractById,
     is_mobile: ui.is_mobile,
     removeToast: ui.removeToast,
     server_time: common.server_time,
     setCurrentFocus: ui.setCurrentFocus,
     should_show_cancellation_warning: ui.should_show_cancellation_warning,
     toggleCancellationWarning: ui.toggleCancellationWarning,
-    updateLimitOrder: modules.contract_trade.updateLimitOrder,
+    updateLimitOrder: contract_trade.updateLimitOrder,
 }))(PositionsModalCard);
diff --git a/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx b/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx
index 37f1662cc187..48f45da766f4 100644
--- a/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx
+++ b/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx
@@ -126,10 +126,10 @@ const TogglePositionsMobile = ({
 };
 // TODO: Needs to be connected to store due to issue with trade-header-extensions not updating all_positions prop
 // Fixes issue with positions not updated in positions modal
-export default connect(({ modules, ui }) => ({
+export default connect(({ modules, ui, portfolio }) => ({
     symbol: modules.trade.symbol,
     trade_contract_type: modules.trade.contract_type,
-    onClickRemove: modules.portfolio.removePositionById,
+    onClickRemove: portfolio.removePositionById,
     togglePositionsDrawer: ui.togglePositionsDrawer,
     is_positions_drawer_on: ui.is_positions_drawer_on,
 }))(TogglePositionsMobile);
diff --git a/packages/trader/src/App/Containers/ProgressSliderStream/progress-slider-stream.jsx b/packages/trader/src/App/Containers/ProgressSliderStream/progress-slider-stream.jsx
index a548e6ed54fb..ad46df3b3359 100644
--- a/packages/trader/src/App/Containers/ProgressSliderStream/progress-slider-stream.jsx
+++ b/packages/trader/src/App/Containers/ProgressSliderStream/progress-slider-stream.jsx
@@ -30,7 +30,7 @@ ProgressSliderStream.propTypes = {
     server_time: PropTypes.object,
 };
 
-export default connect(({ common, modules }) => ({
-    is_loading: modules.portfolio.is_loading,
+export default connect(({ common, portfolio }) => ({
+    is_loading: portfolio.is_loading,
     server_time: common.server_time,
 }))(ProgressSliderStream);
diff --git a/packages/trader/src/App/Containers/Routes/routes.jsx b/packages/trader/src/App/Containers/Routes/routes.jsx
index 55f20c8d0afe..4512ca0c4c19 100644
--- a/packages/trader/src/App/Containers/Routes/routes.jsx
+++ b/packages/trader/src/App/Containers/Routes/routes.jsx
@@ -117,8 +117,8 @@ Routes.propTypes = {
 // need to wrap withRouter around connect
 // to prevent updates on <BinaryRoutes /> from being blocked
 export default withRouter(
-    connect(({ client, common, modules, ui }) => ({
-        onUnmountPortfolio: modules.portfolio.onUnmount,
+    connect(({ client, common, modules, ui, portfolio }) => ({
+        onUnmountPortfolio: portfolio.onUnmount,
         error: common.error,
         has_error: common.has_error,
         is_logged_in: client.is_logged_in,
diff --git a/packages/trader/src/App/Containers/trade-footer-extensions.jsx b/packages/trader/src/App/Containers/trade-footer-extensions.jsx
index a02bd59d96ef..cf3ace658170 100644
--- a/packages/trader/src/App/Containers/trade-footer-extensions.jsx
+++ b/packages/trader/src/App/Containers/trade-footer-extensions.jsx
@@ -52,8 +52,8 @@ TradeFooterExtensions.propTypes = {
     togglePositionsDrawer: PropTypes.func,
 };
 
-export default connect(({ client, modules, ui }) => ({
-    active_positions_count: modules.portfolio.active_positions_count,
+export default connect(({ client, ui, portfolio }) => ({
+    active_positions_count: portfolio.active_positions_count,
     is_logged_in: client.is_logged_in,
     is_positions_drawer_on: ui.is_positions_drawer_on,
     populateFooterExtensions: ui.populateFooterExtensions,
diff --git a/packages/trader/src/App/Containers/trade-header-extensions.jsx b/packages/trader/src/App/Containers/trade-header-extensions.jsx
index b8793b387ab2..866d9ed466b7 100644
--- a/packages/trader/src/App/Containers/trade-header-extensions.jsx
+++ b/packages/trader/src/App/Containers/trade-header-extensions.jsx
@@ -118,17 +118,17 @@ TradeHeaderExtensions.propTypes = {
     populateHeaderExtensions: PropTypes.func,
 };
 
-export default connect(({ client, modules, ui }) => ({
+export default connect(({ client, modules, ui, portfolio }) => ({
     positions_currency: client.currency,
     is_logged_in: client.is_logged_in,
-    positions: modules.portfolio.all_positions,
-    onPositionsSell: modules.portfolio.onClickSell,
-    positions_error: modules.portfolio.error,
-    onPositionsRemove: modules.portfolio.removePositionById,
-    onPositionsCancel: modules.portfolio.onClickCancel,
+    positions: portfolio.all_positions,
+    onPositionsSell: portfolio.onClickSell,
+    positions_error: portfolio.error,
+    onPositionsRemove: portfolio.removePositionById,
+    onPositionsCancel: portfolio.onClickCancel,
     onMountCashier: modules.cashier.general_store.onMountCommon,
-    onMountPositions: modules.portfolio.onMount,
-    active_positions_count: modules.portfolio.active_positions_count,
+    onMountPositions: portfolio.onMount,
+    active_positions_count: portfolio.active_positions_count,
     trade_contract_type: modules.trade.contract_type,
     symbol: modules.trade.symbol,
     disableApp: ui.disableApp,
diff --git a/packages/trader/src/Modules/Contract/Containers/contract-replay-widget.jsx b/packages/trader/src/Modules/Contract/Containers/contract-replay-widget.jsx
index 844dc926cb55..989c525ce7cf 100644
--- a/packages/trader/src/Modules/Contract/Containers/contract-replay-widget.jsx
+++ b/packages/trader/src/Modules/Contract/Containers/contract-replay-widget.jsx
@@ -5,12 +5,12 @@ import { connect } from 'Stores/connect';
 import BottomWidgets from '../../SmartChart/Components/bottom-widgets.jsx';
 import TopWidgets from '../../SmartChart/Components/top-widgets.jsx';
 
-export const DigitsWidget = connect(({ modules }) => ({
-    contract_info: modules.contract_replay.contract_store.contract_info,
-    digits_info: modules.contract_replay.contract_store.digits_info,
-    display_status: modules.contract_replay.contract_store.display_status,
-    is_digit_contract: modules.contract_replay.contract_store.is_digit_contract,
-    is_ended: modules.contract_replay.contract_store.is_ended,
+export const DigitsWidget = connect(({ contract_replay }) => ({
+    contract_info: contract_replay.contract_store.contract_info,
+    digits_info: contract_replay.contract_store.digits_info,
+    display_status: contract_replay.contract_store.display_status,
+    is_digit_contract: contract_replay.contract_store.is_digit_contract,
+    is_ended: contract_replay.contract_store.is_ended,
 }))(({ is_digit_contract, is_ended, contract_info, digits_info, display_status }) => (
     <Digits
         is_digit_contract={is_digit_contract}
@@ -21,10 +21,10 @@ export const DigitsWidget = connect(({ modules }) => ({
     />
 ));
 
-export const InfoBoxWidget = connect(({ modules }) => ({
-    contract_info: modules.contract_replay.contract_store.contract_info,
-    error_message: modules.contract_replay.error_message,
-    removeError: modules.contract_replay.removeErrorMessage,
+export const InfoBoxWidget = connect(({ contract_replay }) => ({
+    contract_info: contract_replay.contract_store.contract_info,
+    error_message: contract_replay.error_message,
+    removeError: contract_replay.removeErrorMessage,
 }))(({ contract_info, error_message, removeError }) => (
     <InfoBox contract_info={contract_info} error_message={error_message} removeError={removeError} />
 ));
diff --git a/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx b/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx
index fefd8dd35169..dea95298c34b 100644
--- a/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx
+++ b/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx
@@ -169,25 +169,25 @@ ContractReplay.propTypes = {
     routes: PropTypes.arrayOf(PropTypes.object),
 };
 
-export default connect(({ common, modules, ui }) => {
-    const contract_replay = modules.contract_replay;
-    const contract_store = contract_replay.contract_store;
+export default connect(({ common, contract_replay, ui }) => {
+    const local_contract_replay = contract_replay;
+    const contract_store = local_contract_replay.contract_store;
     return {
         routeBackInApp: common.routeBackInApp,
         contract_info: contract_store.contract_info,
         contract_update: contract_store.contract_update,
         contract_update_history: contract_store.contract_update_history,
         is_digit_contract: contract_store.is_digit_contract,
-        is_market_closed: contract_replay.is_market_closed,
-        is_sell_requested: contract_replay.is_sell_requested,
-        is_valid_to_cancel: contract_replay.is_valid_to_cancel,
-        onClickCancel: contract_replay.onClickCancel,
-        onClickSell: contract_replay.onClickSell,
-        onMount: contract_replay.onMount,
-        onUnmount: contract_replay.onUnmount,
-        indicative_status: contract_replay.indicative_status,
-        is_chart_loading: contract_replay.is_chart_loading,
-        is_forward_starting: contract_replay.is_forward_starting,
+        is_market_closed: local_contract_replay.is_market_closed,
+        is_sell_requested: local_contract_replay.is_sell_requested,
+        is_valid_to_cancel: local_contract_replay.is_valid_to_cancel,
+        onClickCancel: local_contract_replay.onClickCancel,
+        onClickSell: local_contract_replay.onClickSell,
+        onMount: local_contract_replay.onMount,
+        onUnmount: local_contract_replay.onUnmount,
+        indicative_status: local_contract_replay.indicative_status,
+        is_chart_loading: local_contract_replay.is_chart_loading,
+        is_forward_starting: local_contract_replay.is_forward_starting,
         is_dark_theme: ui.is_dark_mode_on,
         NotificationMessages: ui.notification_messages_ui,
         toggleHistoryTab: ui.toggleHistoryTab,
@@ -285,9 +285,9 @@ Chart.propTypes = {
     shouldFetchTickHistory: PropTypes.bool,
 };
 
-const ReplayChart = connect(({ modules, ui, common }) => {
+const ReplayChart = connect(({ modules, ui, common, contract_replay }) => {
     const trade = modules.trade;
-    const contract_replay = modules.contract_replay;
+    // const contract_replay = modules.contract_replay;
     const contract_store = contract_replay.contract_store;
     const contract_config = contract_store.contract_config;
     const allow_scroll_to_epoch =
diff --git a/packages/trader/src/Modules/Contract/Containers/contract.jsx b/packages/trader/src/Modules/Contract/Containers/contract.jsx
index e845ab45d54a..45c096f8c110 100644
--- a/packages/trader/src/Modules/Contract/Containers/contract.jsx
+++ b/packages/trader/src/Modules/Contract/Containers/contract.jsx
@@ -68,14 +68,14 @@ Contract.propTypes = {
 };
 
 export default withRouter(
-    connect(({ modules, ui }) => ({
-        error_message: modules.contract_replay.error_message,
-        error_code: modules.contract_replay.error_code,
-        has_error: modules.contract_replay.has_error,
-        onMount: modules.contract_replay.setAccountSwitcherListener,
-        onUnmount: modules.contract_replay.removeAccountSwitcherListener,
-        removeErrorMessage: modules.contract_replay.removeErrorMessage,
-        symbol: modules.contract_replay.contract_info.underlying,
+    connect(({ ui, contract_replay }) => ({
+        error_message: contract_replay.error_message,
+        error_code: contract_replay.error_code,
+        has_error: contract_replay.has_error,
+        onMount: contract_replay.setAccountSwitcherListener,
+        onUnmount: contract_replay.removeAccountSwitcherListener,
+        removeErrorMessage: contract_replay.removeErrorMessage,
+        symbol: contract_replay.contract_info.underlying,
         is_mobile: ui.is_mobile,
     }))(Contract)
 );
diff --git a/packages/trader/src/Modules/SmartChart/Components/top-widgets.jsx b/packages/trader/src/Modules/SmartChart/Components/top-widgets.jsx
index 8aa5de06de2c..c20092927e16 100644
--- a/packages/trader/src/Modules/SmartChart/Components/top-widgets.jsx
+++ b/packages/trader/src/Modules/SmartChart/Components/top-widgets.jsx
@@ -23,9 +23,9 @@ const TradeInfo = ({ markers_array, granularity }) => {
     );
 };
 
-const RecentTradeInfo = connect(({ modules }) => ({
-    granularity: modules.contract_trade.granularity,
-    markers_array: modules.contract_trade.markers_array,
+const RecentTradeInfo = connect(({ contract_trade }) => ({
+    granularity: contract_trade.granularity,
+    markers_array: contract_trade.markers_array,
 }))(TradeInfo);
 
 const TopWidgets = ({
diff --git a/packages/trader/src/Modules/Trading/Containers/chart-widgets.jsx b/packages/trader/src/Modules/Trading/Containers/chart-widgets.jsx
index 0ec651ca40ef..3b7bfa3a0f10 100644
--- a/packages/trader/src/Modules/Trading/Containers/chart-widgets.jsx
+++ b/packages/trader/src/Modules/Trading/Containers/chart-widgets.jsx
@@ -7,12 +7,12 @@ import ControlWidgets from '../../SmartChart/Components/control-widgets.jsx';
 import TopWidgets from '../../SmartChart/Components/top-widgets.jsx';
 import { symbolChange } from '../../SmartChart/Helpers/symbol';
 
-export const DigitsWidget = connect(({ modules }) => ({
-    contract_info: modules.contract_trade.last_contract.contract_info || {},
-    digits_info: modules.contract_trade.last_contract.digits_info || {},
-    display_status: modules.contract_trade.last_contract.display_status,
-    is_digit_contract: modules.contract_trade.last_contract.is_digit_contract,
-    is_ended: modules.contract_trade.last_contract.is_ended,
+export const DigitsWidget = connect(({ modules, contract_trade }) => ({
+    contract_info: contract_trade.last_contract.contract_info || {},
+    digits_info: contract_trade.last_contract.digits_info || {},
+    display_status: contract_trade.last_contract.display_status,
+    is_digit_contract: contract_trade.last_contract.is_digit_contract,
+    is_ended: contract_trade.last_contract.is_ended,
     selected_digit: modules.trade.last_digit,
     onDigitChange: modules.trade.onChange,
     underlying: modules.trade.symbol,
@@ -74,9 +74,9 @@ export const ChartBottomWidgets = ({ digits, tick }) => (
     <BottomWidgets Digits={<DigitsWidget digits={digits} tick={tick} />} />
 );
 
-export const ChartControlWidgets = connect(({ modules }) => ({
-    updateChartType: modules.contract_trade.updateChartType,
-    updateGranularity: modules.contract_trade.updateGranularity,
+export const ChartControlWidgets = connect(({ contract_trade }) => ({
+    updateChartType: contract_trade.updateChartType,
+    updateGranularity: contract_trade.updateGranularity,
 }))(({ updateChartType, updateGranularity }) => (
     <ControlWidgets updateChartType={updateChartType} updateGranularity={updateGranularity} />
 ));
diff --git a/packages/trader/src/Modules/Trading/Containers/test.jsx b/packages/trader/src/Modules/Trading/Containers/test.jsx
index e05e910f6a48..5e6fb7368a55 100644
--- a/packages/trader/src/Modules/Trading/Containers/test.jsx
+++ b/packages/trader/src/Modules/Trading/Containers/test.jsx
@@ -82,9 +82,9 @@ Test.propTypes = {
     entries: PropTypes.array,
 };
 
-export default connect(({ modules, client, ui }) => ({
+export default connect(({ modules, client, ui, portfolio }) => ({
     trade: Object.entries(modules.trade),
     client: Object.entries(client),
     ui: Object.entries(ui),
-    portfolio: Object.entries(modules.portfolio),
+    portfolio: Object.entries(portfolio),
 }))(Test);
diff --git a/packages/trader/src/Modules/Trading/Containers/trade.jsx b/packages/trader/src/Modules/Trading/Containers/trade.jsx
index 9ea083a7bf63..a826b0b5ba58 100644
--- a/packages/trader/src/Modules/Trading/Containers/trade.jsx
+++ b/packages/trader/src/Modules/Trading/Containers/trade.jsx
@@ -259,10 +259,10 @@ const Markers = ({ markers_array, is_dark_theme, granularity, currency, config }
         );
     });
 
-const ChartMarkers = connect(({ modules, ui, client }) => ({
-    markers_array: modules.contract_trade.markers_array,
-    is_digit_contract: modules.contract_trade.is_digit_contract,
-    granularity: modules.contract_trade.granularity,
+const ChartMarkers = connect(({ ui, client, contract_trade }) => ({
+    markers_array: contract_trade.markers_array,
+    is_digit_contract: contract_trade.is_digit_contract,
+    granularity: contract_trade.granularity,
     is_dark_theme: ui.is_dark_mode_on,
     currency: client.currency,
 }))(Markers);
@@ -427,13 +427,13 @@ Chart.propTypes = {
     wsSubscribe: PropTypes.func,
 };
 
-const ChartTrade = connect(({ modules, ui, common }) => ({
+const ChartTrade = connect(({ modules, ui, common, contract_trade }) => ({
     is_socket_opened: common.is_socket_opened,
-    granularity: modules.contract_trade.granularity,
-    chart_type: modules.contract_trade.chart_type,
+    granularity: contract_trade.granularity,
+    chart_type: contract_trade.chart_type,
     chartStateChange: modules.trade.chartStateChange,
-    updateChartType: modules.contract_trade.updateChartType,
-    updateGranularity: modules.contract_trade.updateGranularity,
+    updateChartType: contract_trade.updateChartType,
+    updateGranularity: contract_trade.updateGranularity,
     settings: {
         assetInformation: false, // ui.is_chart_asset_info_visible,
         countdown: ui.is_chart_countdown_visible,
@@ -443,8 +443,8 @@ const ChartTrade = connect(({ modules, ui, common }) => ({
         theme: ui.is_dark_mode_on ? 'dark' : 'light',
     },
     last_contract: {
-        is_digit_contract: modules.contract_trade.last_contract.is_digit_contract,
-        is_ended: modules.contract_trade.last_contract.is_ended,
+        is_digit_contract: contract_trade.last_contract.is_digit_contract,
+        is_ended: contract_trade.last_contract.is_ended,
     },
     is_trade_enabled: modules.trade.is_trade_enabled,
     main_barrier: modules.trade.main_barrier_flattened,
diff --git a/packages/trader/src/Stores/Modules/Trading/trade-store.js b/packages/trader/src/Stores/Modules/Trading/trade-store.js
index ce38e540d834..3cb8ba5737ec 100644
--- a/packages/trader/src/Stores/Modules/Trading/trade-store.js
+++ b/packages/trader/src/Stores/Modules/Trading/trade-store.js
@@ -32,7 +32,7 @@ import { processTradeParams } from './Helpers/process';
 import { createProposalRequests, getProposalErrorField, getProposalInfo } from './Helpers/proposal';
 import { getBarrierPipSize } from './Helpers/barrier';
 import { setLimitOrderBarriers } from '../Contract/Helpers/limit-orders';
-// import { ChartBarrierStore } from '../SmartChart/chart-barrier-store';
+import { ChartBarrierStore } from '../SmartChart/chart-barrier-store';
 import { BARRIER_COLORS } from '../SmartChart/Constants/barriers';
 import { isBarrierSupported, removeBarrier } from '../SmartChart/Helpers/barriers';
 import BaseStore from '../../base-store';
@@ -268,6 +268,7 @@ export default class TradeStore extends BaseStore {
         this.should_show_active_symbols_loading = should_show_loading;
 
         await this.setActiveSymbols();
+        await this.root_store.active_symbols.setActiveSymbols();
         if (should_set_default_symbol) await this.setDefaultSymbol();
 
         const r = await WS.storage.contractsFor(this.symbol);
@@ -517,7 +518,6 @@ export default class TradeStore extends BaseStore {
                 });
             }
         } else {
-            const ChartBarrierStore = this.root_store.chart_barrier_store;
             purchase_spot_barrier = new ChartBarrierStore(position.contract_info.entry_spot);
             purchase_spot_barrier.key = key;
             purchase_spot_barrier.draggable = false;
@@ -575,7 +575,6 @@ export default class TradeStore extends BaseStore {
         if (isBarrierSupported(contract_type)) {
             const color = this.root_store.ui.is_dark_mode_on ? BARRIER_COLORS.DARK_GRAY : BARRIER_COLORS.GRAY;
             // create barrier only when it's available in response
-            const ChartBarrierStore = this.root_store.chart_barrier_store;
             this.main_barrier = new ChartBarrierStore(barrier || high_barrier, low_barrier, this.onChartBarrierChange, {
                 color,
             });
diff --git a/packages/trader/src/Stores/index.js b/packages/trader/src/Stores/index.js
index c58801e8021c..f0495d2fb985 100644
--- a/packages/trader/src/Stores/index.js
+++ b/packages/trader/src/Stores/index.js
@@ -14,5 +14,6 @@ export default class RootStore {
         this.contract_trade = core_store.contract_trade;
         this.portfolio = core_store.portfolio;
         this.chart_barrier_store = core_store.chart_barrier_store;
+        this.active_symbols = core_store.active_symbols;
     }
 }

From 73ff78d333f9e48144a15d29f7c27e61bd09dd67 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Mon, 6 Jun 2022 12:18:18 +0430
Subject: [PATCH 34/64] move markers component, helpers and constants to the
 core

---
 .../__tests__/marker-spot-label.spec.js       | 52 ++++++++++++
 .../markers/__tests__/marker-spot.spec.js     | 20 +++++
 .../src/Components/markers/marker-line.jsx    | 38 +++++++++
 .../Components/markers/marker-spot-label.jsx  | 82 +++++++++++++++++++
 .../src/Components/markers/marker-spot.jsx    | 15 ++++
 .../src/Stores/Constants}/markers.js          | 27 +++---
 .../Stores/Helpers}/chart-marker-helpers.js   |  8 +-
 .../src/Stores/Helpers}/chart-markers.js      |  7 +-
 packages/core/src/Stores/contract-store.js    |  3 +-
 packages/shared/src/utils/constants/index.js  |  1 -
 packages/shared/src/utils/helpers/index.js    |  2 -
 11 files changed, 226 insertions(+), 29 deletions(-)
 create mode 100644 packages/core/src/Components/markers/__tests__/marker-spot-label.spec.js
 create mode 100644 packages/core/src/Components/markers/__tests__/marker-spot.spec.js
 create mode 100644 packages/core/src/Components/markers/marker-line.jsx
 create mode 100644 packages/core/src/Components/markers/marker-spot-label.jsx
 create mode 100644 packages/core/src/Components/markers/marker-spot.jsx
 rename packages/{shared/src/utils/constants => core/src/Stores/Constants}/markers.js (62%)
 rename packages/{shared/src/utils/helpers => core/src/Stores/Helpers}/chart-marker-helpers.js (93%)
 rename packages/{shared/src/utils/helpers => core/src/Stores/Helpers}/chart-markers.js (93%)

diff --git a/packages/core/src/Components/markers/__tests__/marker-spot-label.spec.js b/packages/core/src/Components/markers/__tests__/marker-spot-label.spec.js
new file mode 100644
index 000000000000..26403c0342da
--- /dev/null
+++ b/packages/core/src/Components/markers/__tests__/marker-spot-label.spec.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import { expect } from 'chai';
+import { configure, shallow, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import MarkerSpotLabel from '../marker-spot-label.jsx';
+
+configure({ adapter: new Adapter() });
+
+describe('MarkerSpotLabel', () => {
+    it('should render one <MarkerSpotLabel /> component', () => {
+        const wrapper = shallow(<MarkerSpotLabel />);
+        expect(wrapper).to.have.length(1);
+    });
+    it('should have class .chart-spot-label__time-value-container--top if align_label top is passed in props', () => {
+        const wrapper = shallow(<MarkerSpotLabel align_label={'top'} />);
+        expect(wrapper.find('.chart-spot-label__time-value-container--top').exists()).to.be.true;
+    });
+    it('should have class .chart-spot-label__time-value-container--bottom if align_label bottom is passed in props', () => {
+        const wrapper = shallow(<MarkerSpotLabel align_label={'bottom'} />);
+        expect(wrapper.find('.chart-spot-label__time-value-container--bottom').exists()).to.be.true;
+    });
+    it('should have class .chart-spot-label__time-value-container--top if no align_label is passed in props', () => {
+        const wrapper = shallow(<MarkerSpotLabel />);
+        expect(wrapper.find('.chart-spot-label__time-value-container--top').exists()).to.be.true;
+        expect(wrapper.find('.chart-spot-label__time-value-container--bottom').exists()).to.be.false;
+    });
+    it('should toggle label on hover if has_hover_toggle is passed in props', async () => {
+        const wrapper = mount(<MarkerSpotLabel has_hover_toggle={true} />);
+        expect(wrapper.find('.chart-spot-label__info-container').exists()).to.be.false;
+
+        wrapper.find('.marker-hover-container').simulate('mouseenter');
+        wrapper.update();
+        expect(wrapper.find('.chart-spot-label__info-container').exists()).to.be.true;
+
+        wrapper.find('.marker-hover-container').simulate('mouseleave');
+        wrapper.update();
+        expect(wrapper.find('.chart-spot-label__info-container').exists()).to.be.false;
+    });
+    it('should not toggle label on hover if has_label_toggle is not passed in props', () => {
+        const wrapper = shallow(<MarkerSpotLabel />);
+        expect(wrapper.find('.chart-spot-label__info-container').exists()).to.be.true;
+        expect(wrapper.find('.marker-hover-container').exists()).to.equal(false);
+    });
+    it('should have class .chart-spot-label__value-container--won if status won is passed in props', () => {
+        const wrapper = shallow(<MarkerSpotLabel status={'won'} />);
+        expect(wrapper.find('.chart-spot-label__value-container--won').exists()).to.be.true;
+    });
+    it('should have class .chart-spot-label__value-container--lost if status lost is passed in props', () => {
+        const wrapper = shallow(<MarkerSpotLabel status={'lost'} />);
+        expect(wrapper.find('.chart-spot-label__value-container--lost').exists()).to.be.true;
+    });
+});
diff --git a/packages/core/src/Components/markers/__tests__/marker-spot.spec.js b/packages/core/src/Components/markers/__tests__/marker-spot.spec.js
new file mode 100644
index 000000000000..4327cb046a54
--- /dev/null
+++ b/packages/core/src/Components/markers/__tests__/marker-spot.spec.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { expect } from 'chai';
+import { configure, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import MarkerSpot from '../marker-spot.jsx';
+
+configure({ adapter: new Adapter() });
+
+describe('MarkerSpot', () => {
+    it('should render one <MarkerSpot /> component', () => {
+        const wrapper = shallow(<MarkerSpot />);
+        expect(wrapper).to.have.length(1);
+    });
+    it('should not have class .chart-spot__spot--lost or .chart-spot__spot--won if no status is passed in props', () => {
+        const wrapper = shallow(<MarkerSpot />);
+        expect(wrapper.find('.chart-spot__spot--lost').exists()).to.be.false;
+        expect(wrapper.find('.chart-spot__spot--lost').exists()).to.be.false;
+        expect(wrapper.find('.chart-spot').exists()).to.be.true;
+    });
+});
diff --git a/packages/core/src/Components/markers/marker-line.jsx b/packages/core/src/Components/markers/marker-line.jsx
new file mode 100644
index 000000000000..c4a5c7083a7e
--- /dev/null
+++ b/packages/core/src/Components/markers/marker-line.jsx
@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Icon } from '@deriv/components';
+
+const MarkerLine = ({ label, line_style, marker_config, status }) => {
+    // TODO: Find a more elegant solution
+    if (!marker_config) return <div />;
+    return (
+        <div className={classNames('chart-marker-line__wrapper', `chart-marker-line--${line_style}`)}>
+            {label === marker_config.LINE_END.content_config.label && (
+                <Icon
+                    icon='IcContractExitTimeCircle'
+                    className='chart-marker-line__icon'
+                    color={status === 'lost' ? 'red' : 'green'}
+                    size={24}
+                />
+            )}
+            {label === marker_config.LINE_START.content_config.label && (
+                <Icon
+                    icon='IcContractStartTimeCircle'
+                    className='chart-marker-line__icon chart-marker-line__icon--time'
+                    color='secondary'
+                    size={24}
+                />
+            )}
+        </div>
+    );
+};
+
+MarkerLine.propTypes = {
+    label: PropTypes.string,
+    line_style: PropTypes.string,
+    marker_config: PropTypes.object,
+    status: PropTypes.oneOf(['won', 'lost']),
+};
+export default observer(MarkerLine);
diff --git a/packages/core/src/Components/markers/marker-spot-label.jsx b/packages/core/src/Components/markers/marker-spot-label.jsx
new file mode 100644
index 000000000000..bfcb77a258f9
--- /dev/null
+++ b/packages/core/src/Components/markers/marker-spot-label.jsx
@@ -0,0 +1,82 @@
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Icon, Text } from '@deriv/components';
+import { addComma, toMoment } from '@deriv/shared';
+
+import MarkerSpot from './marker-spot.jsx';
+
+const MarkerSpotLabel = ({
+    align_label,
+    has_hover_toggle,
+    spot_className,
+    spot_count,
+    spot_epoch,
+    spot_value,
+    status,
+}) => {
+    const [show_label, setShowLabel] = React.useState(!has_hover_toggle);
+
+    const handleHoverToggle = () => {
+        setShowLabel(!show_label);
+    };
+
+    let marker_spot = <MarkerSpot className={spot_className} spot_count={spot_count} />;
+
+    if (has_hover_toggle) {
+        marker_spot = (
+            <div className='marker-hover-container' onMouseEnter={handleHoverToggle} onMouseLeave={handleHoverToggle}>
+                {marker_spot}
+            </div>
+        );
+    }
+
+    return (
+        <div className={'chart-spot-label'}>
+            {show_label && (
+                <div className='chart-spot-label__info-container'>
+                    <div
+                        className={`chart-spot-label__time-value-container chart-spot-label__time-value-container--${align_label}`}
+                    >
+                        <div className='chart-spot-label__time-container'>
+                            <Icon
+                                icon='IcClockOutline'
+                                height={10}
+                                width={10}
+                                className='chart-spot-label__time-icon'
+                            />
+                            <Text as='p' color='prominent' size='xxxs'>
+                                {toMoment(+spot_epoch).format('HH:mm:ss')}
+                            </Text>
+                        </div>
+                        <div
+                            className={classNames('chart-spot-label__value-container', {
+                                'chart-spot-label__value-container--won': status === 'won',
+                                'chart-spot-label__value-container--lost': status === 'lost',
+                            })}
+                        >
+                            <p>{addComma(spot_value)}</p>
+                        </div>
+                    </div>
+                </div>
+            )}
+            {marker_spot}
+        </div>
+    );
+};
+
+MarkerSpotLabel.defaultProps = {
+    align_label: 'top',
+};
+
+MarkerSpotLabel.propTypes = {
+    align_label: PropTypes.oneOf(['top', 'bottom']),
+    has_hover_toggle: PropTypes.bool,
+    spot_className: PropTypes.string,
+    spot_count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    spot_epoch: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    spot_value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    status: PropTypes.oneOf(['won', 'lost']),
+};
+export default observer(MarkerSpotLabel);
diff --git a/packages/core/src/Components/markers/marker-spot.jsx b/packages/core/src/Components/markers/marker-spot.jsx
new file mode 100644
index 000000000000..a242334713b6
--- /dev/null
+++ b/packages/core/src/Components/markers/marker-spot.jsx
@@ -0,0 +1,15 @@
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const MarkerSpot = ({ className, spot_count }) => (
+    <div className={classNames('chart-spot', className)}>{spot_count}</div>
+);
+
+MarkerSpot.propTypes = {
+    className: PropTypes.string,
+    spot_count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
+
+export default observer(MarkerSpot);
diff --git a/packages/shared/src/utils/constants/markers.js b/packages/core/src/Stores/Constants/markers.js
similarity index 62%
rename from packages/shared/src/utils/constants/markers.js
rename to packages/core/src/Stores/Constants/markers.js
index acd76a6cf7a2..8441b64d016d 100644
--- a/packages/shared/src/utils/constants/markers.js
+++ b/packages/core/src/Stores/Constants/markers.js
@@ -1,14 +1,13 @@
 import { localize } from '@deriv/translations';
-// import MarkerLine from '../../components/markers/marker-line.jsx';
-// import MarkerSpotLabel from '../../components/markers/marker-spot-label.jsx';
-// import MarkerSpot from '../../components/markers/marker-spot.jsx';
+import MarkerLine from '../../Components/markers/marker-line';
+import MarkerSpotLabel from '../../Components/markers/marker-spot-label';
+import MarkerSpot from '../../Components/markers/marker-spot';
 
 export const MARKER_TYPES_CONFIG = {
     LINE_END: {
         type: 'LINE_END',
         marker_config: {
-            // ContentComponent: MarkerLine,
-            ContentComponent: null,
+            ContentComponent: MarkerLine,
             className: 'chart-marker-line',
         },
         content_config: { line_style: 'dash', label: localize('End Time') },
@@ -16,8 +15,7 @@ export const MARKER_TYPES_CONFIG = {
     LINE_PURCHASE: {
         type: 'LINE_PURCHASE',
         marker_config: {
-            // ContentComponent: MarkerLine,
-            ContentComponent: null,
+            ContentComponent: MarkerLine,
             className: 'chart-marker-line',
         },
         content_config: { line_style: 'solid', label: localize('Purchase Time') },
@@ -25,8 +23,7 @@ export const MARKER_TYPES_CONFIG = {
     LINE_START: {
         type: 'LINE_START',
         marker_config: {
-            // ContentComponent: MarkerLine,
-            ContentComponent: null,
+            ContentComponent: MarkerLine,
             className: 'chart-marker-line',
         },
         content_config: { line_style: 'solid', label: localize('Start Time') },
@@ -34,32 +31,28 @@ export const MARKER_TYPES_CONFIG = {
     SPOT_ENTRY: {
         type: 'SPOT_ENTRY',
         marker_config: {
-            // ContentComponent: MarkerSpot,
-            ContentComponent: null,
+            ContentComponent: MarkerSpot,
         },
         content_config: { className: 'chart-spot__entry' },
     },
     SPOT_SELL: {
         type: 'SPOT_SELL',
         marker_config: {
-            // ContentComponent: MarkerSpot,
-            ContentComponent: null,
+            ContentComponent: MarkerSpot,
         },
         content_config: { className: 'chart-spot__sell' },
     },
     SPOT_EXIT: {
         type: 'SPOT_EXIT',
         marker_config: {
-            // ContentComponent: MarkerSpotLabel,
-            ContentComponent: null,
+            ContentComponent: MarkerSpotLabel,
         },
         content_config: { spot_className: 'chart-spot__spot' },
     },
     SPOT_MIDDLE: {
         type: 'SPOT_MIDDLE',
         marker_config: {
-            // ContentComponent: MarkerSpotLabel,
-            ContentComponent: null,
+            ContentComponent: MarkerSpotLabel,
         },
         content_config: { spot_className: 'chart-spot__spot' },
     },
diff --git a/packages/shared/src/utils/helpers/chart-marker-helpers.js b/packages/core/src/Stores/Helpers/chart-marker-helpers.js
similarity index 93%
rename from packages/shared/src/utils/helpers/chart-marker-helpers.js
rename to packages/core/src/Stores/Helpers/chart-marker-helpers.js
index c364e650530e..367f94b74aa2 100644
--- a/packages/shared/src/utils/helpers/chart-marker-helpers.js
+++ b/packages/core/src/Stores/Helpers/chart-marker-helpers.js
@@ -1,10 +1,10 @@
 import extend from 'extend';
-import { isMobile } from '../screen';
-import { isUserSold, isMultiplierContract, isDigitContract } from '../contract';
+import { isUserSold, isMultiplierContract, isDigitContract, getEndTime, isMobile } from '@deriv/shared';
 
-import { getEndTime } from './logic';
+// import { isMobile } from '../screen';
+// import { getEndTime } from './logic';
 
-import { MARKER_TYPES_CONFIG } from '../constants/markers';
+import { MARKER_TYPES_CONFIG } from '../Constants/markers';
 
 const createMarkerConfig = (marker_type, x, y, content_config) =>
     extend(true, {}, MARKER_TYPES_CONFIG[marker_type], {
diff --git a/packages/shared/src/utils/helpers/chart-markers.js b/packages/core/src/Stores/Helpers/chart-markers.js
similarity index 93%
rename from packages/shared/src/utils/helpers/chart-markers.js
rename to packages/core/src/Stores/Helpers/chart-markers.js
index daa5f20f8558..eec289052c73 100644
--- a/packages/shared/src/utils/helpers/chart-markers.js
+++ b/packages/core/src/Stores/Helpers/chart-markers.js
@@ -1,4 +1,3 @@
-import { unique } from '../object';
 import {
     createMarkerEndTime,
     createMarkerPurchaseTime,
@@ -8,8 +7,10 @@ import {
     createMarkerSpotMiddle,
     getSpotCount,
 } from './chart-marker-helpers';
-import { getChartType, getEndTime } from './logic';
-import { MARKER_TYPES_CONFIG } from '../constants/markers';
+// import { unique } from '../object';
+// import { getChartType, getEndTime } from './logic';
+import { getChartType, getEndTime, unique } from '@deriv/shared';
+import { MARKER_TYPES_CONFIG } from '../Constants/markers';
 
 export const createChartMarkers = contract_info => {
     let markers = [];
diff --git a/packages/core/src/Stores/contract-store.js b/packages/core/src/Stores/contract-store.js
index faabadf4e63f..0748957ac86d 100644
--- a/packages/core/src/Stores/contract-store.js
+++ b/packages/core/src/Stores/contract-store.js
@@ -7,7 +7,6 @@ import {
     getDigitInfo,
     getDisplayStatus,
     WS,
-    createChartMarkers,
     getChartConfig,
     getContractUpdateConfig,
     getEndTime,
@@ -20,7 +19,7 @@ import {
 import { setLimitOrderBarriers, getLimitOrder } from './Helpers/limit-orders';
 import { ChartBarrierStore } from './chart-barrier-store';
 
-// import { createChartMarkers } from '@deriv/shared/src/utils/helpers/chart-markers';
+import { createChartMarkers } from './Helpers/chart-markers';
 // import { setLimitOrderBarriers, getLimitOrder } from './Helpers/limit-orders';
 // import { getChartConfig, getContractUpdateConfig, getEndTime } from '@deriv/shared/src/utils/helpers/logic';
 // import getValidationRules from './Constants/validation-rules';
diff --git a/packages/shared/src/utils/constants/index.js b/packages/shared/src/utils/constants/index.js
index 3ba10cd544eb..9be92dd65459 100644
--- a/packages/shared/src/utils/constants/index.js
+++ b/packages/shared/src/utils/constants/index.js
@@ -1,4 +1,3 @@
 export * from './barriers';
 export * from './contract';
-export * from './markers';
 export * from './validation-rules';
diff --git a/packages/shared/src/utils/helpers/index.js b/packages/shared/src/utils/helpers/index.js
index 1cf5560cae27..c11c2531bbf8 100644
--- a/packages/shared/src/utils/helpers/index.js
+++ b/packages/shared/src/utils/helpers/index.js
@@ -1,8 +1,6 @@
 export * from './active-symbols';
 export * from './barrier';
 export * from './barriers';
-export * from './chart-marker-helpers';
-export * from './chart-markers';
 export * from './chart-notifications';
 export * from './details';
 export * from './duration';

From 52dfcea2a7e5ee369d6bc54f5cb3dd6c597a41b5 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Mon, 6 Jun 2022 17:42:43 +0430
Subject: [PATCH 35/64] remove all duplicated files from trader and reports

---
 .../core/src/Stores/contract-trade-store.js   |    5 +-
 packages/core/src/Stores/index.js             |    2 +
 packages/core/src/Stores/portfolio.js         |   69 +-
 .../positions-drawer-card.jsx                 |   13 +-
 .../reports/src/Containers/open-positions.jsx |    4 +-
 .../src}/Helpers/multiplier.js                |    0
 .../Stores/Modules/Contract/Constants/ui.js   |    9 -
 .../Contract/Constants/validation-rules.js    |   68 -
 .../Contract/Helpers/__tests__/logic.js       |  125 --
 .../Contract/Helpers/chart-marker-helpers.js  |  117 --
 .../Modules/Contract/Helpers/chart-markers.js |   89 --
 .../Contract/Helpers/chart-notifications.js   |    9 -
 .../Modules/Contract/Helpers/contract-type.js |    2 -
 .../Stores/Modules/Contract/Helpers/logic.js  |  111 --
 .../Modules/Contract/contract-replay-store.js |  291 ----
 .../Stores/Modules/Contract/contract-store.js |  311 ----
 .../Modules/Contract/contract-trade-store.js  |  195 ---
 .../Helpers/__tests__/format-response.js      |   33 -
 .../Modules/Portfolio/Helpers/details.js      |   72 -
 .../Portfolio/Helpers/format-response.js      |   30 -
 .../Helpers/portfolio-notifications.js        |   33 -
 .../Modules/Portfolio/portfolio-store.js      |  491 -------
 .../Modules/Profit/Helpers/format-response.js |    6 +-
 .../Modules/SmartChart/Constants/barriers.js  |   36 -
 .../SmartChart/Helpers/__tests__/barriers.js  |   59 -
 .../Modules/SmartChart/Helpers/barriers.js    |   28 -
 .../Modules/SmartChart/chart-barrier-store.js |   80 -
 .../Modules/SmartChart/chart-marker-store.js  |   11 -
 .../Statement/Helpers/format-response.js      |    6 +-
 .../Modules/Statement/statement-store.js      |    2 +-
 .../Modules/Trading/Actions/contract-type.js  |    6 -
 .../Modules/Trading/Actions/currency.js       |   14 -
 .../Modules/Trading/Actions/duration.js       |   40 -
 .../Modules/Trading/Actions/purchase.js       |    8 -
 .../Modules/Trading/Actions/start-date.js     |   63 -
 .../Stores/Modules/Trading/Actions/symbol.js  |    5 -
 .../Stores/Modules/Trading/Actions/test.js    |   20 -
 .../Modules/Trading/Components/info.jsx       |  130 --
 .../Modules/Trading/Components/multiplier.jsx |   33 -
 .../Modules/Trading/Constants/contract.js     |  141 --
 .../Trading/Constants/validation-rules.js     |  185 ---
 .../Trading/Helpers/__tests__/barrier.js      |   81 --
 .../Trading/Helpers/__tests__/currency.js     |   60 -
 .../Trading/Helpers/__tests__/durations.js    |  160 --
 .../Trading/Helpers/__tests__/proposal.js     |  212 ---
 .../Trading/Helpers/__tests__/start-date.js   |   94 --
 .../Modules/Trading/Helpers/active-symbols.js |  142 --
 .../Modules/Trading/Helpers/allow-equals.js   |   42 -
 .../Stores/Modules/Trading/Helpers/barrier.js |   20 -
 .../Stores/Modules/Trading/Helpers/chart.js   |    4 -
 .../Modules/Trading/Helpers/contract-type.js  |  603 --------
 .../Modules/Trading/Helpers/currency.js       |   28 -
 .../Modules/Trading/Helpers/duration.js       |  132 --
 .../Modules/Trading/Helpers/end-time.js       |   30 -
 .../Trading/Helpers/preview-proposal.js       |   31 -
 .../Stores/Modules/Trading/Helpers/process.js |   44 -
 .../Modules/Trading/Helpers/proposal.js       |  124 --
 .../Modules/Trading/Helpers/start-date.js     |   46 -
 .../src/Stores/Modules/Trading/trade-store.js | 1289 -----------------
 packages/reports/src/Stores/Modules/index.js  |    2 -
 packages/reports/src/Stores/index.js          |    1 +
 .../src/utils/constants}/markers.js           |   27 +-
 .../shared/src/utils/helpers/contract-type.js |    4 +-
 packages/shared/src/utils/helpers/index.js    |    1 +
 .../ContractAudit/contract-details.jsx        |    8 +-
 .../ContractDrawer/contract-drawer-card.jsx   |   11 +-
 .../ContractDrawer/contract-drawer.jsx        |   11 +-
 .../helpers/positions-helper.js               |    4 +-
 .../PositionsDrawer/positions-modal-card.jsx  |    6 +-
 .../Elements/market-countdown-timer.jsx       |    3 +-
 .../Contract/Components/Digits/digits.jsx     |    3 +-
 .../Contract/Containers/contract-replay.jsx   |   12 +-
 .../Multiplier/cancel-deal-mobile.jsx         |    2 +-
 .../Components/Elements/mobile-widget.jsx     |    3 +-
 .../Form/DatePicker/trading-date-picker.jsx   |    4 +-
 .../Form/Purchase/contract-info.jsx           |    3 +-
 .../Duration/advanced-duration.jsx            |    3 +-
 .../TradeParams/Duration/duration-mobile.jsx  |    3 +-
 .../TradeParams/Duration/duration-wrapper.jsx |    2 +-
 .../TradeParams/Multiplier/cancel-deal.jsx    |    2 +-
 .../Trading/Containers/contract-type.jsx      |    4 +-
 .../Stores/Modules/Contract/Constants/ui.js   |    9 -
 .../Contract/Constants/validation-rules.js    |   68 -
 .../Contract/Helpers/__tests__/logic.js       |  125 --
 .../Contract/Helpers/chart-marker-helpers.js  |  116 --
 .../Modules/Contract/Helpers/chart-markers.js |   89 --
 .../Contract/Helpers/chart-notifications.js   |    9 -
 .../Modules/Contract/Helpers/contract-type.js |    2 -
 .../Modules/Contract/Helpers/limit-orders.js  |  100 --
 .../Stores/Modules/Contract/Helpers/logic.js  |  111 --
 .../Modules/Contract/contract-replay-store.js |  291 ----
 .../Stores/Modules/Contract/contract-store.js |  311 ----
 .../Modules/Contract/contract-trade-store.js  |  195 ---
 .../Helpers/__tests__/format-response.js      |   33 -
 .../Modules/Portfolio/Helpers/details.js      |   72 -
 .../Portfolio/Helpers/format-response.js      |   29 -
 .../Helpers/portfolio-notifications.js        |   33 -
 .../Modules/Portfolio/portfolio-store.js      |  491 -------
 .../Modules/Profit/Helpers/format-request.js  |   37 -
 .../Modules/Profit/Helpers/format-response.js |   30 -
 .../src/Stores/Modules/Profit/profit-store.js |  168 ---
 .../Helpers/__tests__/format-response.spec.js |   58 -
 .../Statement/Helpers/format-response.js      |   40 -
 .../Modules/Statement/statement-store.js      |  196 ---
 .../Modules/Trading/Actions/contract-type.js  |    2 +-
 .../Modules/Trading/Actions/duration.js       |    3 +-
 .../Modules/Trading/Actions/start-date.js     |    2 +-
 .../Stores/Modules/Trading/Actions/symbol.js  |    2 +-
 .../Modules/Trading/Constants/contract.js     |  141 --
 .../Trading/Constants/validation-rules.js     |  185 ---
 .../Trading/Helpers/__tests__/barrier.js      |   81 --
 .../Trading/Helpers/__tests__/start-date.js   |   94 --
 .../Modules/Trading/Helpers/active-symbols.js |  142 --
 .../Modules/Trading/Helpers/allow-equals.js   |    3 +-
 .../Stores/Modules/Trading/Helpers/barrier.js |   20 -
 .../Modules/Trading/Helpers/contract-type.js  |  603 --------
 .../Modules/Trading/Helpers/duration.js       |  132 --
 .../Modules/Trading}/Helpers/limit-orders.js  |    0
 .../Modules/Trading}/Helpers/multiplier.js    |    2 +-
 .../Stores/Modules/Trading/Helpers/process.js |    2 +-
 .../Modules/Trading/Helpers/start-date.js     |   46 -
 .../src/Stores/Modules/Trading/trade-store.js |   28 +-
 packages/trader/src/Stores/Modules/index.js   |   10 +-
 packages/trader/src/Stores/index.js           |    1 +
 124 files changed, 179 insertions(+), 10146 deletions(-)
 rename packages/{trader/src/Stores/Modules/Contract => reports/src}/Helpers/multiplier.js (100%)
 delete mode 100644 packages/reports/src/Stores/Modules/Contract/Constants/ui.js
 delete mode 100644 packages/reports/src/Stores/Modules/Contract/Constants/validation-rules.js
 delete mode 100644 packages/reports/src/Stores/Modules/Contract/Helpers/__tests__/logic.js
 delete mode 100644 packages/reports/src/Stores/Modules/Contract/Helpers/chart-marker-helpers.js
 delete mode 100644 packages/reports/src/Stores/Modules/Contract/Helpers/chart-markers.js
 delete mode 100644 packages/reports/src/Stores/Modules/Contract/Helpers/chart-notifications.js
 delete mode 100644 packages/reports/src/Stores/Modules/Contract/Helpers/contract-type.js
 delete mode 100644 packages/reports/src/Stores/Modules/Contract/Helpers/logic.js
 delete mode 100644 packages/reports/src/Stores/Modules/Contract/contract-replay-store.js
 delete mode 100644 packages/reports/src/Stores/Modules/Contract/contract-store.js
 delete mode 100644 packages/reports/src/Stores/Modules/Contract/contract-trade-store.js
 delete mode 100644 packages/reports/src/Stores/Modules/Portfolio/Helpers/__tests__/format-response.js
 delete mode 100644 packages/reports/src/Stores/Modules/Portfolio/Helpers/details.js
 delete mode 100644 packages/reports/src/Stores/Modules/Portfolio/Helpers/format-response.js
 delete mode 100644 packages/reports/src/Stores/Modules/Portfolio/Helpers/portfolio-notifications.js
 delete mode 100644 packages/reports/src/Stores/Modules/Portfolio/portfolio-store.js
 delete mode 100644 packages/reports/src/Stores/Modules/SmartChart/Constants/barriers.js
 delete mode 100644 packages/reports/src/Stores/Modules/SmartChart/Helpers/__tests__/barriers.js
 delete mode 100644 packages/reports/src/Stores/Modules/SmartChart/Helpers/barriers.js
 delete mode 100644 packages/reports/src/Stores/Modules/SmartChart/chart-barrier-store.js
 delete mode 100644 packages/reports/src/Stores/Modules/SmartChart/chart-marker-store.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Actions/contract-type.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Actions/currency.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Actions/duration.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Actions/purchase.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Actions/start-date.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Actions/symbol.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Actions/test.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Components/info.jsx
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Components/multiplier.jsx
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Constants/contract.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Constants/validation-rules.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Helpers/__tests__/barrier.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Helpers/__tests__/currency.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Helpers/__tests__/durations.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Helpers/__tests__/proposal.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Helpers/__tests__/start-date.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Helpers/active-symbols.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Helpers/allow-equals.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Helpers/barrier.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Helpers/chart.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Helpers/contract-type.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Helpers/currency.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Helpers/duration.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Helpers/end-time.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Helpers/preview-proposal.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Helpers/process.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Helpers/proposal.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/Helpers/start-date.js
 delete mode 100644 packages/reports/src/Stores/Modules/Trading/trade-store.js
 rename packages/{reports/src/Stores/Modules/SmartChart/Constants => shared/src/utils/constants}/markers.js (62%)
 delete mode 100644 packages/trader/src/Stores/Modules/Contract/Constants/ui.js
 delete mode 100644 packages/trader/src/Stores/Modules/Contract/Constants/validation-rules.js
 delete mode 100644 packages/trader/src/Stores/Modules/Contract/Helpers/__tests__/logic.js
 delete mode 100644 packages/trader/src/Stores/Modules/Contract/Helpers/chart-marker-helpers.js
 delete mode 100644 packages/trader/src/Stores/Modules/Contract/Helpers/chart-markers.js
 delete mode 100644 packages/trader/src/Stores/Modules/Contract/Helpers/chart-notifications.js
 delete mode 100644 packages/trader/src/Stores/Modules/Contract/Helpers/contract-type.js
 delete mode 100644 packages/trader/src/Stores/Modules/Contract/Helpers/limit-orders.js
 delete mode 100644 packages/trader/src/Stores/Modules/Contract/Helpers/logic.js
 delete mode 100644 packages/trader/src/Stores/Modules/Contract/contract-replay-store.js
 delete mode 100644 packages/trader/src/Stores/Modules/Contract/contract-store.js
 delete mode 100644 packages/trader/src/Stores/Modules/Contract/contract-trade-store.js
 delete mode 100644 packages/trader/src/Stores/Modules/Portfolio/Helpers/__tests__/format-response.js
 delete mode 100644 packages/trader/src/Stores/Modules/Portfolio/Helpers/details.js
 delete mode 100644 packages/trader/src/Stores/Modules/Portfolio/Helpers/format-response.js
 delete mode 100644 packages/trader/src/Stores/Modules/Portfolio/Helpers/portfolio-notifications.js
 delete mode 100644 packages/trader/src/Stores/Modules/Portfolio/portfolio-store.js
 delete mode 100644 packages/trader/src/Stores/Modules/Profit/Helpers/format-request.js
 delete mode 100644 packages/trader/src/Stores/Modules/Profit/Helpers/format-response.js
 delete mode 100644 packages/trader/src/Stores/Modules/Profit/profit-store.js
 delete mode 100644 packages/trader/src/Stores/Modules/Statement/Helpers/__tests__/format-response.spec.js
 delete mode 100644 packages/trader/src/Stores/Modules/Statement/Helpers/format-response.js
 delete mode 100644 packages/trader/src/Stores/Modules/Statement/statement-store.js
 delete mode 100644 packages/trader/src/Stores/Modules/Trading/Constants/contract.js
 delete mode 100644 packages/trader/src/Stores/Modules/Trading/Constants/validation-rules.js
 delete mode 100644 packages/trader/src/Stores/Modules/Trading/Helpers/__tests__/barrier.js
 delete mode 100644 packages/trader/src/Stores/Modules/Trading/Helpers/__tests__/start-date.js
 delete mode 100644 packages/trader/src/Stores/Modules/Trading/Helpers/active-symbols.js
 delete mode 100644 packages/trader/src/Stores/Modules/Trading/Helpers/barrier.js
 delete mode 100644 packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.js
 delete mode 100644 packages/trader/src/Stores/Modules/Trading/Helpers/duration.js
 rename packages/{reports/src/Stores/Modules/Contract => trader/src/Stores/Modules/Trading}/Helpers/limit-orders.js (100%)
 rename packages/{reports/src/Stores/Modules/Contract => trader/src/Stores/Modules/Trading}/Helpers/multiplier.js (96%)
 delete mode 100644 packages/trader/src/Stores/Modules/Trading/Helpers/start-date.js

diff --git a/packages/core/src/Stores/contract-trade-store.js b/packages/core/src/Stores/contract-trade-store.js
index 7890bdd66b33..cb5ee47034ed 100644
--- a/packages/core/src/Stores/contract-trade-store.js
+++ b/packages/core/src/Stores/contract-trade-store.js
@@ -57,9 +57,8 @@ export default class ContractTradeStore extends BaseStore {
     }
 
     applicable_contracts = () => {
-        // const { symbol: underlying, contract_type: trade_type } = this.root_store.modules.trade;
-        const trade_type = 'multiplier';
-        const underlying = 'frxAUDJPY';
+        const { symbol: underlying, contract_type: trade_type } = JSON.parse(localStorage.getItem('trade_store'));
+
         if (!trade_type || !underlying) {
             return [];
         }
diff --git a/packages/core/src/Stores/index.js b/packages/core/src/Stores/index.js
index d10c01f10fae..1d7549a1f78f 100644
--- a/packages/core/src/Stores/index.js
+++ b/packages/core/src/Stores/index.js
@@ -9,6 +9,7 @@ import NotificationStore from './notification-store';
 import UIStore from './ui-store';
 import ActiveSymbolsStore from './active-symbols-store';
 import PortfolioStore from './portfolio';
+import ContractStore from './contract-store';
 import ContractReplayStore from './contract-replay-store';
 import ContractTradeStore from './contract-trade-store';
 import { ChartBarrierStore } from './chart-barrier-store';
@@ -26,6 +27,7 @@ export default class RootStore {
         this.notifications = new NotificationStore(this);
         this.active_symbols = new ActiveSymbolsStore(this);
         this.portfolio = new PortfolioStore(this);
+        this.contract = new ContractStore(this)
         this.contract_replay = new ContractReplayStore(this);
         this.contract_trade = new ContractTradeStore(this);
         this.chart_barrier_store = new ChartBarrierStore(this);
diff --git a/packages/core/src/Stores/portfolio.js b/packages/core/src/Stores/portfolio.js
index 2536637d5236..bfdc2b71c32f 100644
--- a/packages/core/src/Stores/portfolio.js
+++ b/packages/core/src/Stores/portfolio.js
@@ -18,9 +18,11 @@ import {
     getDurationTime,
     getDurationUnitText,
     getEndTime,
+    removeBarrier,
 } from '@deriv/shared';
 import { Money } from '@deriv/components';
-
+import { ChartBarrierStore } from './chart-barrier-store';
+import { setLimitOrderBarriers } from './Helpers/limit-orders';
 // import { formatPortfolioPosition } from './Helpers/format-response';
 // import { contractCancelled, contractSold } from './Helpers/portfolio-notifications';
 // import { getDurationPeriod, getDurationTime, getDurationUnitText } from './Helpers/details';
@@ -34,6 +36,12 @@ export default class PortfolioStore extends BaseStore {
     positions_map = {};
     @observable is_loading = false;
     @observable error = '';
+
+    // barriers
+    @observable barriers = [];
+    @observable main_barrier = null;
+    @observable is_multiplier = false;
+    
     getPositionById = createTransformer(id => this.positions.find(position => +position.id === +id));
 
     responseQueue = [];
@@ -156,11 +164,11 @@ export default class PortfolioStore extends BaseStore {
     }
 
     updateTradeStore(is_over, portfolio_position, is_limit_order_update) {
-        const trade = this.root_store.modules.trade;
+        // const trade = this.root_store.modules.trade;
         if (!is_limit_order_update) {
-            trade.setPurchaseSpotBarrier(is_over, portfolio_position);
+            this.setPurchaseSpotBarrier(is_over, portfolio_position);
         }
-        trade.updateLimitOrderBarriers(is_over, portfolio_position);
+        this.updateLimitOrderBarriers(is_over, portfolio_position);
     }
 
     proposalOpenContractQueueHandler = response => {
@@ -498,4 +506,57 @@ export default class PortfolioStore extends BaseStore {
     get is_empty() {
         return !this.is_loading && this.all_positions.length === 0;
     }
+
+// from trade store
+    @action.bound
+    setPurchaseSpotBarrier(is_over, position) {
+        const key = 'PURCHASE_SPOT_BARRIER';
+        if (!is_over) {
+            removeBarrier(this.barriers, key);
+            return;
+        }
+
+        let purchase_spot_barrier = this.barriers.find(b => b.key === key);
+        if (purchase_spot_barrier) {
+            if (purchase_spot_barrier.high !== +position.contract_info.entry_spot) {
+                purchase_spot_barrier.onChange({
+                    high: position.contract_info.entry_spot,
+                });
+            }
+        } else {
+            purchase_spot_barrier = new ChartBarrierStore(position.contract_info.entry_spot);
+            purchase_spot_barrier.key = key;
+            purchase_spot_barrier.draggable = false;
+            purchase_spot_barrier.hideOffscreenBarrier = true;
+            purchase_spot_barrier.isSingleBarrier = true;
+            purchase_spot_barrier.updateBarrierColor(this.root_store.ui.is_dark_mode_on);
+            this.barriers.push(purchase_spot_barrier);
+        }
+    }
+
+    @action.bound
+    updateBarrierColor(is_dark_mode) {
+        const { main_barrier } = JSON.parse(localStorage.getItem('trade_store'));
+        if (main_barrier) {
+            main_barrier.updateBarrierColor(is_dark_mode);
+        }
+    }
+
+    @action.bound
+    updateLimitOrderBarriers(is_over, position) {
+        const contract_info = position.contract_info;
+        const { barriers } = this;
+        setLimitOrderBarriers({
+            barriers,
+            contract_info,
+            contract_type: contract_info.contract_type,
+            is_over,
+        });
+    }
+
+    @computed
+    get is_multiplier() {
+        const { contract_type }  = JSON.parse(localStorage.getItem('trade_store'));
+        return contract_type === 'multiplier';
+    }
 }
diff --git a/packages/reports/src/Components/Elements/PositionsDrawerCard/positions-drawer-card.jsx b/packages/reports/src/Components/Elements/PositionsDrawerCard/positions-drawer-card.jsx
index 0c0ae0a4e17d..cbd468010d75 100644
--- a/packages/reports/src/Components/Elements/PositionsDrawerCard/positions-drawer-card.jsx
+++ b/packages/reports/src/Components/Elements/PositionsDrawerCard/positions-drawer-card.jsx
@@ -3,10 +3,15 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import { ContractCard } from '@deriv/components';
-import { getContractPath, isCryptoContract, isMultiplierContract } from '@deriv/shared';
-import { getCardLabels, getContractTypeDisplay } from '_common/contract';
-import { connectWithContractUpdate } from 'Stores/Modules/Contract/Helpers/multiplier';
-import { getEndTime } from 'Stores/Modules/Contract/Helpers/logic';
+import {
+    getContractPath,
+    isCryptoContract,
+    isMultiplierContract,
+    getCardLabels,
+    getContractTypeDisplay,
+    getEndTime,
+} from '@deriv/shared';
+import { connectWithContractUpdate } from '../../../Helpers/multiplier';
 
 const PositionsDrawerCard = ({
     addToast,
diff --git a/packages/reports/src/Containers/open-positions.jsx b/packages/reports/src/Containers/open-positions.jsx
index bcbdb471b031..e42f1fe28687 100644
--- a/packages/reports/src/Containers/open-positions.jsx
+++ b/packages/reports/src/Containers/open-positions.jsx
@@ -447,13 +447,13 @@ OpenPositions.propTypes = {
     server_time: PropTypes.object,
 };
 
-export default connect(({ modules, client, common, ui, portfolio, contract_trade }) => ({
+export default connect(({ client, common, ui, portfolio, contract_trade }) => ({
     active_positions: portfolio.active_positions,
     currency: client.currency,
     error: portfolio.error,
     getPositionById: portfolio.getPositionById,
     is_loading: portfolio.is_loading,
-    is_multiplier: modules.trade.is_multiplier,
+    is_multiplier: portfolio.is_multiplier,
     NotificationMessages: ui.notification_messages_ui,
     onClickCancel: portfolio.onClickCancel,
     onClickSell: portfolio.onClickSell,
diff --git a/packages/trader/src/Stores/Modules/Contract/Helpers/multiplier.js b/packages/reports/src/Helpers/multiplier.js
similarity index 100%
rename from packages/trader/src/Stores/Modules/Contract/Helpers/multiplier.js
rename to packages/reports/src/Helpers/multiplier.js
diff --git a/packages/reports/src/Stores/Modules/Contract/Constants/ui.js b/packages/reports/src/Stores/Modules/Contract/Constants/ui.js
deleted file mode 100644
index 74e8e69ce7ea..000000000000
--- a/packages/reports/src/Stores/Modules/Contract/Constants/ui.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { Icon } from '@deriv/components';
-import { localize } from '@deriv/translations';
-
-export const getHeaderConfig = () => ({
-    purchased: { title: localize('Contract Purchased'), icon: <Icon icon='IcTick' /> },
-    won: { title: localize('Contract Won'), icon: <Icon icon='IcContractFlag' /> },
-    lost: { title: localize('Contract Lost'), icon: <Icon icon='IcContractFlag' /> },
-});
diff --git a/packages/reports/src/Stores/Modules/Contract/Constants/validation-rules.js b/packages/reports/src/Stores/Modules/Contract/Constants/validation-rules.js
deleted file mode 100644
index 334a548bbf8a..000000000000
--- a/packages/reports/src/Stores/Modules/Contract/Constants/validation-rules.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import { localize } from '@deriv/translations';
-import { getTotalProfit } from '@deriv/shared';
-import { getBuyPrice } from '../Helpers/logic';
-
-const getValidationRules = () => ({
-    has_contract_update_stop_loss: {
-        trigger: 'contract_update_stop_loss',
-    },
-    contract_update_stop_loss: {
-        rules: [
-            [
-                'req',
-                {
-                    condition: contract_store => !contract_store.contract_update_stop_loss,
-                    message: localize('Please enter a stop loss amount.'),
-                },
-            ],
-            [
-                'custom',
-                {
-                    func: (value, options, contract_store) => {
-                        const profit = getTotalProfit(contract_store.contract_info);
-                        return !(profit < 0 && -value > profit);
-                    },
-                    message: localize("Please enter a stop loss amount that's higher than the current potential loss."),
-                },
-            ],
-            [
-                'custom',
-                {
-                    func: (value, options, contract_store) => {
-                        const stake = getBuyPrice(contract_store);
-                        return value < stake + 1;
-                    },
-                    message: localize('Invalid stop loss. Stop loss cannot be more than stake.'),
-                },
-            ],
-        ],
-    },
-    has_contract_update_take_profit: {
-        trigger: 'contract_update_take_profit',
-    },
-    contract_update_take_profit: {
-        rules: [
-            [
-                'req',
-                {
-                    condition: contract_store => !contract_store.contract_update_take_profit,
-                    message: localize('Please enter a take profit amount.'),
-                },
-            ],
-            [
-                'custom',
-                {
-                    func: (value, options, contract_store) => {
-                        const profit = getTotalProfit(contract_store.contract_info);
-                        return !(profit > 0 && +value < profit);
-                    },
-                    message: localize(
-                        "Please enter a take profit amount that's higher than the current potential profit."
-                    ),
-                },
-            ],
-        ],
-    },
-});
-
-export default getValidationRules;
diff --git a/packages/reports/src/Stores/Modules/Contract/Helpers/__tests__/logic.js b/packages/reports/src/Stores/Modules/Contract/Helpers/__tests__/logic.js
deleted file mode 100644
index 25ceec86f83e..000000000000
--- a/packages/reports/src/Stores/Modules/Contract/Helpers/__tests__/logic.js
+++ /dev/null
@@ -1,125 +0,0 @@
-import { expect } from 'chai';
-import React from 'react';
-import * as Logic from '../logic';
-
-describe('logic', () => {
-    describe('isSoldBeforeStart', () => {
-        it('should return true when sell_time is before date_start', () => {
-            const contract_info = {
-                sell_time: 1000000,
-                date_start: 1000001,
-            };
-            expect(Logic.isSoldBeforeStart(contract_info)).to.eql(true);
-        });
-        it('should return true when sell_time is after date_start', () => {
-            const contract_info = {
-                sell_time: 1000000,
-                date_start: 99999,
-            };
-            expect(Logic.isSoldBeforeStart(contract_info)).to.eql(false);
-        });
-    });
-
-    describe('isStarted', () => {
-        it('should return true if contract is not forward_starting and current_spot_time is after start_time', () => {
-            const contract_info = {
-                is_forward_starting: false,
-                current_spot_time: 1000000,
-                date_start: 99999,
-            };
-            expect(Logic.isStarted(contract_info)).to.eql(true);
-        });
-        it('should return true if contract is not forward_starting and current_spot_time is before start_time', () => {
-            const contract_info = {
-                is_forward_starting: false,
-                current_spot_time: 99999,
-                date_start: 1000000,
-            };
-            expect(Logic.isStarted(contract_info)).to.eql(true);
-        });
-        it('should return true if contract is forward_starting and current_spot_time is after start_time', () => {
-            const contract_info = {
-                is_forward_starting: true,
-                current_spot_time: 1000000,
-                date_start: 99999,
-            };
-            expect(Logic.isStarted(contract_info)).to.eql(true);
-        });
-        it('should return false if contract is forward_starting and current_spot_time is before start_time', () => {
-            const contract_info = {
-                is_forward_starting: true,
-                current_spot_time: 99999,
-                date_start: 1000000,
-            };
-            expect(Logic.isStarted(contract_info)).to.eql(false);
-        });
-    });
-
-    describe('getEndTime', () => {
-        it('Should return exit tick time for tick contracts', () => {
-            const contract_info = {
-                tick_count: 5,
-                exit_tick_time: 9999999,
-                sell_time: 1000000,
-                is_expired: 1,
-                date_expiry: 8888888,
-            };
-            expect(Logic.getEndTime(contract_info)).to.eql(9999999);
-        });
-        it('Should return date expiry if sell time is after date expiry for non-tick contracts', () => {
-            const contract_info = {
-                exit_tick_time: 9999999,
-                sell_time: 8888888,
-                is_expired: 1,
-                date_expiry: 7777777,
-            };
-            expect(Logic.getEndTime(contract_info)).to.eql(7777777);
-        });
-        it('Should return exit tick time if sell time is before date expiry for non-tick contracts', () => {
-            const contract_info = {
-                exit_tick_time: 9999999,
-                sell_time: 7777777,
-                is_expired: 1,
-                date_expiry: 8888888,
-            };
-            expect(Logic.getEndTime(contract_info)).to.eql(9999999);
-        });
-        it('Should return date_expiry time for user sold contracts if sell_time is after date_expiry', () => {
-            const contract_info = {
-                date_expiry: 8888888,
-                exit_tick_time: 8888887,
-                sell_time: 8888889,
-                status: 'sold',
-            };
-            expect(Logic.getEndTime(contract_info)).to.eql(8888888);
-        });
-        it('Should return sell_time time for user sold contracts if sell_time is before date_expiry', () => {
-            const contract_info = {
-                date_expiry: 8888889,
-                exit_tick_time: 8888887,
-                sell_time: 8888888,
-                status: 'sold',
-            };
-            expect(Logic.getEndTime(contract_info)).to.eql(8888888);
-        });
-        it('Should return undefined if not sold for all contracts', () => {
-            const contract_info = {
-                exit_tick_time: 9999999,
-                sell_time: 1000000,
-                is_expired: 0,
-                date_expiry: 888888,
-            };
-            expect(Logic.getEndTime(contract_info)).to.eql(undefined);
-        });
-        it('Should return exit_tick_time if contract is_path_dependent', () => {
-            const contract_info = {
-                exit_tick_time: 9999999,
-                sell_time: 1000000,
-                is_expired: 0,
-                is_path_dependent: '1',
-                date_expiry: 888888,
-            };
-            expect(Logic.getEndTime(contract_info)).to.eql(undefined);
-        });
-    });
-});
diff --git a/packages/reports/src/Stores/Modules/Contract/Helpers/chart-marker-helpers.js b/packages/reports/src/Stores/Modules/Contract/Helpers/chart-marker-helpers.js
deleted file mode 100644
index d94ed3b3a360..000000000000
--- a/packages/reports/src/Stores/Modules/Contract/Helpers/chart-marker-helpers.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import extend from 'extend';
-import { isMobile, isUserSold, isMultiplierContract, isDigitContract } from '@deriv/shared';
-import { getEndTime } from './logic';
-
-import { MARKER_TYPES_CONFIG } from '../../SmartChart/Constants/markers';
-
-const createMarkerConfig = (marker_type, x, y, content_config) =>
-    extend(true, {}, MARKER_TYPES_CONFIG[marker_type], {
-        marker_config: {
-            x: +x,
-            y,
-        },
-        content_config,
-    });
-
-export const getSpotCount = (contract_info, spot_count) =>
-    isDigitContract(contract_info.contract_type) ? spot_count + 1 : spot_count;
-
-// -------------------- Lines --------------------
-export const createMarkerEndTime = contract_info => {
-    const end_time = getEndTime(contract_info);
-    if (!end_time) return false;
-
-    return createMarkerConfig(MARKER_TYPES_CONFIG.LINE_END.type, +end_time, null, {
-        status: `${contract_info.profit >= 0 ? 'won' : 'lost'}`,
-        marker_config: MARKER_TYPES_CONFIG,
-    });
-};
-
-export const createMarkerPurchaseTime = contract_info => {
-    if (
-        !contract_info.purchase_time ||
-        !contract_info.date_start ||
-        +contract_info.purchase_time === +contract_info.date_start
-    )
-        return false;
-
-    return createMarkerConfig(MARKER_TYPES_CONFIG.LINE_PURCHASE.type, +contract_info.purchase_time);
-};
-
-export const createMarkerStartTime = contract_info => {
-    if (!contract_info.date_start) return false;
-
-    return createMarkerConfig(MARKER_TYPES_CONFIG.LINE_START.type, +contract_info.date_start, null, {
-        marker_config: MARKER_TYPES_CONFIG,
-    });
-};
-
-// -------------------- Spots --------------------
-export const createMarkerSpotEntry = contract_info => {
-    if (!contract_info.entry_tick_time) return false;
-
-    let marker_type = MARKER_TYPES_CONFIG.SPOT_ENTRY.type;
-    let component_props = {};
-
-    const entry_tick = contract_info.entry_tick_display_value;
-
-    const spot_has_label = isDigitContract(contract_info.contract_type);
-    if (spot_has_label) {
-        marker_type = MARKER_TYPES_CONFIG.SPOT_MIDDLE.type;
-
-        component_props = {
-            spot_value: `${entry_tick}`,
-            spot_epoch: `${contract_info.entry_tick_time}`,
-            spot_count: 1,
-        };
-    }
-
-    return createMarkerConfig(marker_type, contract_info.entry_tick_time, entry_tick, component_props);
-};
-
-export const createMarkerSpotExit = (contract_info, tick, idx) => {
-    if (!contract_info.exit_tick_time) return false;
-    const is_user_sold = isUserSold(contract_info);
-
-    let spot_count, align_label;
-    if (tick) {
-        spot_count = getSpotCount(contract_info, idx);
-        align_label = tick.align_label;
-    }
-
-    const exit_tick = contract_info.exit_tick_display_value;
-
-    const should_show_spot_exit = !is_user_sold || isMultiplierContract(contract_info.contract_type);
-
-    const marker_spot_type = should_show_spot_exit
-        ? MARKER_TYPES_CONFIG.SPOT_EXIT.type
-        : MARKER_TYPES_CONFIG.SPOT_SELL.type;
-
-    const component_props = should_show_spot_exit
-        ? {
-              spot_value: `${exit_tick}`,
-              spot_epoch: `${contract_info.exit_tick_time}`,
-              status: `${+contract_info.profit >= 0 ? 'won' : 'lost'}`,
-              align_label,
-              spot_count,
-          }
-        : {};
-
-    return createMarkerConfig(marker_spot_type, +contract_info.exit_tick_time, +exit_tick, component_props);
-};
-
-export const createMarkerSpotMiddle = (contract_info, tick, idx) => {
-    const spot_count = getSpotCount(contract_info, idx);
-    const spot = tick.tick_display_value;
-
-    const marker_config = createMarkerConfig(MARKER_TYPES_CONFIG.SPOT_MIDDLE.type, +tick.epoch, +spot, {
-        spot_value: `${spot}`,
-        spot_epoch: `${tick.epoch}`,
-        align_label: tick.align_label,
-        spot_count,
-    });
-    marker_config.type = `${marker_config.type}_${idx}`;
-
-    if (isMobile() && spot_count > 1) return null;
-    return marker_config;
-};
diff --git a/packages/reports/src/Stores/Modules/Contract/Helpers/chart-markers.js b/packages/reports/src/Stores/Modules/Contract/Helpers/chart-markers.js
deleted file mode 100644
index d1681b471b68..000000000000
--- a/packages/reports/src/Stores/Modules/Contract/Helpers/chart-markers.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import { unique } from '@deriv/shared';
-import {
-    createMarkerEndTime,
-    createMarkerPurchaseTime,
-    createMarkerSpotEntry,
-    createMarkerSpotExit,
-    createMarkerStartTime,
-    createMarkerSpotMiddle,
-    getSpotCount,
-} from './chart-marker-helpers';
-import { getChartType, getEndTime } from './logic';
-import { MARKER_TYPES_CONFIG } from '../../SmartChart/Constants/markers';
-
-export const createChartMarkers = contract_info => {
-    let markers = [];
-    if (contract_info) {
-        const end_time = getEndTime(contract_info);
-        const chart_type = getChartType(contract_info.date_start, end_time);
-
-        if (contract_info.tick_count) {
-            const tick_markers = createTickMarkers(contract_info);
-            markers.push(...tick_markers);
-        } else if (chart_type !== 'candle') {
-            const spot_markers = Object.keys(marker_spots).map(type => marker_spots[type](contract_info));
-            markers.push(...spot_markers);
-        }
-        const line_markers = Object.keys(marker_lines).map(type => marker_lines[type](contract_info));
-        markers.push(...line_markers);
-
-        markers = markers.filter(m => !!m);
-    }
-    markers.forEach(marker => {
-        const contract_id = contract_info.contract_id;
-        marker.react_key = `${contract_id}-${marker.type}`;
-    });
-
-    return markers;
-};
-
-const marker_spots = {
-    [MARKER_TYPES_CONFIG.SPOT_ENTRY.type]: createMarkerSpotEntry,
-    [MARKER_TYPES_CONFIG.SPOT_EXIT.type]: createMarkerSpotExit,
-};
-
-const marker_lines = {
-    [MARKER_TYPES_CONFIG.LINE_START.type]: createMarkerStartTime,
-    [MARKER_TYPES_CONFIG.LINE_END.type]: createMarkerEndTime,
-    [MARKER_TYPES_CONFIG.LINE_PURCHASE.type]: createMarkerPurchaseTime,
-};
-
-const addLabelAlignment = (tick, idx, arr) => {
-    if (idx > 0 && arr.length) {
-        const prev_tick = arr[idx - 1];
-
-        if (+tick > +prev_tick.tick) tick.align_label = 'top';
-        if (+tick.tick < +prev_tick.tick) tick.align_label = 'bottom';
-        if (+tick.tick === +prev_tick.tick) tick.align_label = prev_tick.align_label;
-    }
-
-    return tick;
-};
-
-const createTickMarkers = contract_info => {
-    const tick_stream = unique(contract_info.tick_stream, 'epoch').map(addLabelAlignment);
-    const result = [];
-
-    tick_stream.forEach((tick, idx) => {
-        const is_entry_spot = idx === 0 && +tick.epoch !== contract_info.exit_tick_time;
-        const is_middle_spot = idx > 0 && +tick.epoch !== +contract_info.exit_tick_time;
-        const is_exit_spot =
-            +tick.epoch === +contract_info.exit_tick_time ||
-            getSpotCount(contract_info, idx) === contract_info.tick_count;
-
-        let marker_config;
-        if (is_entry_spot) {
-            marker_config = createMarkerSpotEntry(contract_info);
-        } else if (is_middle_spot) {
-            marker_config = createMarkerSpotMiddle(contract_info, tick, idx);
-        } else if (is_exit_spot) {
-            tick.align_label = 'top'; // force exit spot label to be 'top' to avoid overlapping
-            marker_config = createMarkerSpotExit(contract_info, tick, idx);
-        }
-
-        if (marker_config) {
-            result.push(marker_config);
-        }
-    });
-    return result;
-};
diff --git a/packages/reports/src/Stores/Modules/Contract/Helpers/chart-notifications.js b/packages/reports/src/Stores/Modules/Contract/Helpers/chart-notifications.js
deleted file mode 100644
index c346362b7bf4..000000000000
--- a/packages/reports/src/Stores/Modules/Contract/Helpers/chart-notifications.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { localize, Localize } from '@deriv/translations';
-
-export const switch_to_tick_chart = {
-    key: 'switch_to_tick_chart',
-    header: localize('This chart display is not ideal for tick contracts'),
-    message: <Localize i18n_default_text='Please change the chart duration to tick for a better trading experience.' />,
-    type: 'info',
-};
diff --git a/packages/reports/src/Stores/Modules/Contract/Helpers/contract-type.js b/packages/reports/src/Stores/Modules/Contract/Helpers/contract-type.js
deleted file mode 100644
index ffd73b0a7112..000000000000
--- a/packages/reports/src/Stores/Modules/Contract/Helpers/contract-type.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export const isCallPut = trade_type =>
-    trade_type === 'rise_fall' || trade_type === 'rise_fall_equal' || trade_type === 'high_low';
diff --git a/packages/reports/src/Stores/Modules/Contract/Helpers/logic.js b/packages/reports/src/Stores/Modules/Contract/Helpers/logic.js
deleted file mode 100644
index 4255dc37ec48..000000000000
--- a/packages/reports/src/Stores/Modules/Contract/Helpers/logic.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import moment from 'moment';
-import { isEmptyObject, isUserSold, getLimitOrderAmount } from '@deriv/shared';
-import ServerTime from '_common/base/server_time';
-
-export const getChartConfig = contract_info => {
-    if (isEmptyObject(contract_info)) return null;
-    const start = contract_info.date_start;
-    const end = getEndTime(contract_info);
-    const granularity = getChartGranularity(start, end || null);
-    const chart_type = getChartType(start, end || null);
-
-    return {
-        chart_type: contract_info.tick_count ? 'mountain' : chart_type,
-        granularity: contract_info.tick_count ? 0 : granularity,
-        end_epoch: end,
-        start_epoch: start,
-        scroll_to_epoch: contract_info.purchase_time,
-    };
-};
-
-const hour_to_granularity_map = [
-    [1, 0],
-    [2, 120],
-    [6, 600],
-    [24, 900],
-    [5 * 24, 3600],
-    [30 * 24, 14400],
-];
-
-const getExpiryTime = time => time || ServerTime.get().unix();
-
-export const getChartType = (start_time, expiry_time) => {
-    const duration = moment.duration(moment.unix(getExpiryTime(expiry_time)).diff(moment.unix(start_time))).asHours();
-    // use line chart if duration is equal or less than 1 hour
-    return duration <= 1 ? 'mountain' : 'candle';
-};
-
-export const getChartGranularity = (start_time, expiry_time) =>
-    calculateGranularity(getExpiryTime(expiry_time) - start_time);
-
-export const calculateGranularity = duration =>
-    (hour_to_granularity_map.find(m => duration <= m[0] * 3600) || [null, 86400])[1];
-
-export const isContractElapsed = (contract_info, tick) => {
-    if (isEmptyObject(tick) || isEmptyObject(contract_info)) return false;
-    const end_time = getEndTime(contract_info);
-    if (end_time && tick.epoch) {
-        const seconds = moment.duration(moment.unix(tick.epoch).diff(moment.unix(end_time))).asSeconds();
-        return seconds >= 2;
-    }
-    return false;
-};
-
-export const isEndedBeforeCancellationExpired = contract_info =>
-    !!(contract_info.cancellation && getEndTime(contract_info) < contract_info.cancellation.date_expiry);
-
-export const isSoldBeforeStart = contract_info =>
-    contract_info.sell_time && +contract_info.sell_time < +contract_info.date_start;
-
-export const isStarted = contract_info =>
-    !contract_info.is_forward_starting || contract_info.current_spot_time > contract_info.date_start;
-
-export const isUserCancelled = contract_info => contract_info.status === 'cancelled';
-
-export const isCancellationExpired = contract_info =>
-    !!(contract_info.cancellation.date_expiry < ServerTime.get().unix());
-
-export const getEndTime = contract_info => {
-    const {
-        exit_tick_time,
-        date_expiry,
-        is_expired,
-        is_path_dependent,
-        sell_time,
-        status,
-        tick_count: is_tick_contract,
-    } = contract_info;
-
-    const is_finished = is_expired && status !== 'open';
-
-    if (!is_finished && !isUserSold(contract_info) && !isUserCancelled(contract_info)) return undefined;
-
-    if (isUserSold(contract_info)) {
-        return sell_time > date_expiry ? date_expiry : sell_time;
-    } else if (!is_tick_contract && sell_time > date_expiry) {
-        return date_expiry;
-    }
-
-    return date_expiry > exit_tick_time && !+is_path_dependent ? date_expiry : exit_tick_time;
-};
-
-export const getBuyPrice = contract_store => {
-    return contract_store.contract_info.buy_price;
-};
-
-/**
- * Set contract update form initial values
- * @param {object} contract_update - contract_update response
- * @param {object} limit_order - proposal_open_contract.limit_order response
- */
-export const getContractUpdateConfig = ({ contract_update, limit_order }) => {
-    const { stop_loss, take_profit } = getLimitOrderAmount(limit_order || contract_update);
-
-    return {
-        // convert stop_loss, take_profit value to string for validation to work
-        contract_update_stop_loss: stop_loss ? Math.abs(stop_loss).toString() : '',
-        contract_update_take_profit: take_profit ? take_profit.toString() : '',
-        has_contract_update_stop_loss: !!stop_loss,
-        has_contract_update_take_profit: !!take_profit,
-    };
-};
diff --git a/packages/reports/src/Stores/Modules/Contract/contract-replay-store.js b/packages/reports/src/Stores/Modules/Contract/contract-replay-store.js
deleted file mode 100644
index a3150859cf5f..000000000000
--- a/packages/reports/src/Stores/Modules/Contract/contract-replay-store.js
+++ /dev/null
@@ -1,291 +0,0 @@
-import { action, observable } from 'mobx';
-import { routes, isEmptyObject, isForwardStarting, WS } from '@deriv/shared';
-import { localize } from '@deriv/translations';
-import ContractStore from './contract-store';
-import { contractCancelled, contractSold } from '../Portfolio/Helpers/portfolio-notifications';
-import BaseStore from '../../base-store';
-
-export default class ContractReplayStore extends BaseStore {
-    @observable chart_state = '';
-    @observable contract_store = { contract_info: {} };
-    // --- Observable properties ---
-    @observable is_market_closed = false;
-    @observable is_sell_requested = false;
-    @observable has_error = false;
-    @observable error_message = '';
-    @observable error_code = '';
-    @observable is_chart_loading = true;
-    @observable is_chart_scaling = false;
-    @observable is_forward_starting = false;
-    // ---- chart props
-    @observable margin;
-
-    // ---- Replay Contract Config ----
-    @observable contract_id;
-    @observable indicative_status;
-    @observable.ref contract_info = observable.object({});
-    @observable is_static_chart = false;
-
-    // ---- Normal properties ---
-    is_ongoing_contract = false;
-    prev_indicative = 0;
-
-    @observable.ref contract_update = observable.object({});
-    // TODO: you view a contract and then share that link with another person,
-    // when the person opens, try to switch account they get the error
-    // Forget old proposal_open_contract stream on account switch from ErrorComponent
-    should_forget_first = false;
-
-    // -------------------
-    // ----- Actions -----
-    // -------------------
-    handleSubscribeProposalOpenContract = async (contract_id, cb) => {
-        // expired contracts are cached and we can get the poc response from local storage
-        const is_cached = await WS.storage.has({ proposal_open_contract: 1, contract_id });
-        if (is_cached) {
-            WS.storage.proposalOpenContract({ contract_id }).then(cb);
-            return;
-        }
-
-        if (this.should_forget_first) {
-            // TODO; don't forget all ever
-            await WS.forgetAll('proposal_open_contract');
-            this.should_forget_first = false;
-        }
-
-        this.subscriber = WS.subscribeProposalOpenContract(contract_id, cb);
-    };
-
-    subscribeProposalOpenContract = () => {
-        WS.wait('authorize').then(() => {
-            this.handleSubscribeProposalOpenContract(this.contract_id, this.populateConfig);
-        });
-    };
-
-    @action.bound
-    onMount(contract_id) {
-        if (contract_id) {
-            this.contract_id = contract_id;
-            this.contract_store = new ContractStore(this.root_store, { contract_id });
-            this.subscribeProposalOpenContract();
-            WS.storage.activeSymbols('brief');
-            WS.setOnReconnect(() => {
-                if (!this.root_store.client.is_switching) {
-                    this.subscribeProposalOpenContract();
-                }
-            });
-        }
-    }
-
-    @action.bound
-    onUnmount() {
-        this.forgetProposalOpenContract(this.contract_id, this.populateConfig);
-        this.contract_id = null;
-        this.is_ongoing_contract = false;
-        this.is_static_chart = false;
-        this.is_chart_loading = true;
-        this.contract_info = {};
-        this.indicative_status = null;
-        this.prev_indicative = 0;
-        this.chart_state = '';
-        this.root_store.ui.toggleHistoryTab(false);
-        WS.removeOnReconnect();
-    }
-
-    @action.bound
-    populateConfig(response) {
-        if (!this.switch_account_listener) return;
-
-        if ('error' in response) {
-            const { code, message } = response.error;
-            this.has_error = true;
-            this.is_chart_loading = false;
-            this.error_message = message;
-            this.error_code = code;
-            return;
-        }
-        if (isEmptyObject(response.proposal_open_contract)) {
-            this.has_error = true;
-            this.error_message = localize(
-                "Sorry, you can't view this contract because it doesn't belong to this account."
-            );
-            this.should_forget_first = true;
-            this.is_chart_loading = false;
-            return;
-        }
-        if (+response.proposal_open_contract.contract_id !== this.contract_id) return;
-
-        this.contract_info = response.proposal_open_contract;
-        this.contract_update = response.proposal_open_contract.limit_order;
-
-        // Add indicative status for contract
-        const prev_indicative = this.prev_indicative;
-        const new_indicative = +this.contract_info.bid_price;
-        if (new_indicative > prev_indicative) {
-            this.indicative_status = 'profit';
-        } else if (new_indicative < prev_indicative) {
-            this.indicative_status = 'loss';
-        } else {
-            this.indicative_status = null;
-        }
-        this.prev_indicative = new_indicative;
-
-        const is_forward_starting =
-            !!this.contract_info.is_forward_starting ||
-            isForwardStarting(this.contract_info.shortcode, this.contract_info.purchase_time);
-
-        this.is_forward_starting = is_forward_starting;
-
-        // update the contract_store here passing contract_info
-        this.contract_store.populateConfig(this.contract_info);
-
-        const end_time = this.contract_store.end_time;
-
-        this.updateMargin((end_time || this.contract_info.date_expiry) - this.contract_info.date_start);
-
-        if (!end_time) this.is_ongoing_contract = true;
-
-        // finish contracts if end_time exists
-        if (end_time) {
-            if (!this.is_ongoing_contract) {
-                this.is_static_chart = true;
-            } else {
-                this.is_static_chart = false;
-            }
-        }
-
-        if (this.contract_info.is_sold) {
-            this.contract_store.cacheProposalOpenContractResponse(response);
-        }
-    }
-
-    @action.bound
-    updateMargin(duration) {
-        const granularity = this.contract_store.contract_config.granularity;
-
-        this.margin = Math.floor(!granularity ? Math.max(300, (30 * duration) / (60 * 60) || 0) : 3 * granularity);
-    }
-
-    @action.bound
-    chartStateChange(state, option) {
-        this.chart_state = state;
-        const market_close_prop = 'isClosed';
-
-        // SmartChart has a weird interaction for getting scale 1:1,
-        // the process of loading an expired contract should follow this,
-        // show loading, first load the chart, then add the endEpoch then request for
-        // scale 1:1 and then wait till chart perform the scale 1:1 then
-        // hide the loading.
-        switch (state) {
-            case 'INITIAL':
-                this.is_chart_scaling = false;
-                // this is for deriv resizing from desktop to mobile,
-                // that show the loading till the chart reflect complete
-                if (!this.is_chart_loading) this.is_chart_loading = true;
-                break;
-            case 'READY':
-                setTimeout(
-                    action(() => (this.is_chart_scaling = true)),
-                    10
-                );
-                break;
-            case 'SCROLL_TO_LEFT':
-                // this Delay is for when the chart try to sacle 1:1 and we want to hide
-                // scale 1:1 jumping from the user
-                setTimeout(
-                    action(() => {
-                        this.is_chart_loading = false;
-                    }),
-                    20
-                );
-                break;
-            case 'MARKET_STATE_CHANGE':
-                if (option && market_close_prop in option) {
-                    this.is_market_closed = option[market_close_prop];
-                }
-                break;
-            default:
-        }
-    }
-
-    @action.bound
-    onClickCancel(contract_id) {
-        if (contract_id) {
-            WS.cancelContract(contract_id).then(response => {
-                if (response.error) {
-                    this.root_store.common.setServicesError({
-                        type: response.msg_type,
-                        ...response.error,
-                    });
-                } else {
-                    this.root_store.notifications.addNotificationMessage(contractCancelled());
-                }
-            });
-        }
-    }
-
-    @action.bound
-    onClickSell(contract_id) {
-        const { bid_price } = this.contract_info;
-        if (contract_id && bid_price) {
-            this.is_sell_requested = true;
-            WS.sell(contract_id, bid_price).then(this.handleSell);
-        }
-    }
-
-    @action.bound
-    handleSell(response) {
-        if (response.error) {
-            // If unable to sell due to error, give error via pop up if not in contract mode
-            this.is_sell_requested = false;
-            this.root_store.common.setServicesError({
-                type: response.msg_type,
-                ...response.error,
-            });
-        } else if (!response.error && response.sell) {
-            this.is_sell_requested = false;
-            // update contract store sell info after sell
-            this.sell_info = {
-                sell_price: response.sell.sold_for,
-                transaction_id: response.sell.transaction_id,
-            };
-            this.root_store.notifications.addNotificationMessage(
-                contractSold(this.root_store.client.currency, response.sell.sold_for)
-            );
-        }
-    }
-
-    forgetProposalOpenContract = () => {
-        if (this.subscriber) {
-            this.subscriber.unsubscribe();
-            delete this.subscriber;
-        }
-    };
-
-    @action.bound
-    removeErrorMessage() {
-        this.error_message = '';
-        this.has_error = false;
-    }
-
-    setAccountSwitcherListener = (contract_id, history) => {
-        this.onSwitchAccount(() => this.accountSwitcherListener(contract_id, history));
-    };
-
-    accountSwitcherListener = (contract_id, history) => {
-        // if contract had an error on the previous account
-        // try fetching it again for the new account
-        // in case it belongs to this account
-        if (this.has_error) {
-            this.removeErrorMessage();
-            this.onMount(contract_id);
-        } else {
-            history.push(routes.reports);
-        }
-        return Promise.resolve();
-    };
-
-    removeAccountSwitcherListener = () => {
-        this.disposeSwitchAccount();
-    };
-}
diff --git a/packages/reports/src/Stores/Modules/Contract/contract-store.js b/packages/reports/src/Stores/Modules/Contract/contract-store.js
deleted file mode 100644
index 9c0d6276d4c8..000000000000
--- a/packages/reports/src/Stores/Modules/Contract/contract-store.js
+++ /dev/null
@@ -1,311 +0,0 @@
-import { action, extendObservable, observable, toJS } from 'mobx';
-import {
-    isEnded,
-    isEqualObject,
-    isMultiplierContract,
-    isDigitContract,
-    getDigitInfo,
-    getDisplayStatus,
-    WS,
-} from '@deriv/shared';
-import { createChartMarkers } from './Helpers/chart-markers';
-import { setLimitOrderBarriers, getLimitOrder } from './Helpers/limit-orders';
-import { getChartConfig, getContractUpdateConfig, getEndTime } from './Helpers/logic';
-import getValidationRules from './Constants/validation-rules';
-import BaseStore from '../../base-store';
-import { BARRIER_COLORS, BARRIER_LINE_STYLES } from '../SmartChart/Constants/barriers';
-import { isBarrierSupported } from '../SmartChart/Helpers/barriers';
-import { ChartBarrierStore } from '../SmartChart/chart-barrier-store';
-
-export default class ContractStore extends BaseStore {
-    constructor(root_store, { contract_id }) {
-        super({
-            root_store,
-            validation_rules: getValidationRules(),
-        });
-
-        this.root_store = root_store;
-        this.contract_id = contract_id;
-    }
-
-    // --- Observable properties ---
-    @observable digits_info = observable.object({});
-    @observable sell_info = observable.object({});
-
-    @observable.ref contract_config = {};
-    @observable display_status = 'purchased';
-    @observable is_ended = false;
-    @observable is_digit_contract = false;
-
-    // TODO: see how to handle errors.
-    @observable error_message = '';
-
-    @observable.ref contract_info = observable.object({});
-
-    @observable is_static_chart = false;
-    @observable end_time = null;
-
-    // Multiplier contract update config
-    @observable contract_update_take_profit = '';
-    @observable contract_update_stop_loss = '';
-    @observable has_contract_update_take_profit = false;
-    @observable has_contract_update_stop_loss = false;
-    @observable.ref contract_update_history = [];
-    contract_update_config = {};
-
-    // ---- chart props
-    @observable margin;
-    @observable.shallow barriers_array = [];
-    @observable.shallow markers_array = [];
-    @observable.ref marker = null;
-
-    // ---- Normal properties ---
-    is_ongoing_contract = false;
-
-    @action.bound
-    populateConfig(contract_info) {
-        const prev_contract_info = this.contract_info;
-        this.contract_info = contract_info;
-        this.end_time = getEndTime(this.contract_info);
-
-        // TODO: don't update the barriers & markers if they are not changed
-        this.updateBarriersArray(contract_info, this.root_store.ui.is_dark_mode_on);
-        this.markers_array = createChartMarkers(this.contract_info);
-        this.marker = calculate_marker(this.contract_info);
-
-        this.contract_config = getChartConfig(this.contract_info);
-        this.display_status = getDisplayStatus(this.contract_info);
-        this.is_ended = isEnded(this.contract_info);
-        this.is_digit_contract = isDigitContract(this.contract_info.contract_type);
-        // API doesn't return barrier for digit contracts (sometimes), remove this check once resolved
-        if (!this.contract_info.barrier && prev_contract_info.barrier && this.is_digit_contract) {
-            this.contract_info.barrier = prev_contract_info.barrier;
-        }
-
-        if (this.is_digit_contract) {
-            extendObservable(this.digits_info, getDigitInfo(this.digits_info, this.contract_info));
-        }
-
-        // force to sell the expired contract, in order to remove from portfolio
-        if (+contract_info.is_settleable === 1 && !contract_info.is_sold) {
-            WS.send({ sell_expired: 1 });
-        }
-
-        const is_multiplier = isMultiplierContract(this.contract_info.contract_type);
-
-        if (is_multiplier && contract_info.contract_id && contract_info.limit_order) {
-            this.populateContractUpdateConfig(this.contract_info);
-        }
-    }
-
-    cacheProposalOpenContractResponse = response => {
-        const { contract_id } = response.proposal_open_contract;
-        WS.storage.set({ proposal_open_contract: 1, contract_id }, response);
-    };
-
-    @action.bound
-    populateContractUpdateConfig(response) {
-        const contract_update_config = getContractUpdateConfig(response);
-        if (!isEqualObject(this.contract_update_config, contract_update_config)) {
-            Object.assign(this, contract_update_config);
-            this.contract_update_config = contract_update_config;
-
-            const { contract_update, error } = response;
-            if (contract_update && !error) {
-                this.contract_info.limit_order = Object.assign(this.contract_info.limit_order || {}, contract_update);
-            }
-        }
-    }
-
-    @action.bound
-    populateContractUpdateHistory({ contract_update_history }) {
-        this.root_store.contract_replay.contract_store.contract_update_history = contract_update_history.sort(
-            (a, b) => b.order_date - a.order_date
-        );
-    }
-
-    updateBarriersArray(contract_info, is_dark_mode) {
-        if (!this.barriers_array.length) {
-            this.barriers_array = this.createBarriersArray(contract_info, is_dark_mode);
-            return;
-        }
-
-        const main_barrier = this.barriers_array[0];
-        if (contract_info) {
-            const { contract_type, barrier, high_barrier, low_barrier } = contract_info;
-
-            if (isBarrierSupported(contract_type) && (barrier || high_barrier)) {
-                main_barrier.updateBarriers(barrier || high_barrier, low_barrier);
-                main_barrier.updateBarrierColor(is_dark_mode);
-            }
-            if (
-                contract_info.contract_id &&
-                contract_info.contract_id === this.root_store.contract_replay.contract_id
-            ) {
-                setLimitOrderBarriers({
-                    barriers: this.barriers_array,
-                    contract_info,
-                    contract_type,
-                    is_over: true,
-                });
-            }
-        }
-    }
-
-    createBarriersArray = (contract_info, is_dark_mode) => {
-        let barriers = [];
-        if (contract_info) {
-            const { contract_type, barrier, entry_spot, high_barrier, low_barrier } = contract_info;
-
-            if (isBarrierSupported(contract_type) && (barrier || high_barrier || entry_spot)) {
-                // create barrier only when it's available in response
-                const main_barrier = new ChartBarrierStore(barrier || high_barrier || entry_spot, low_barrier, null, {
-                    color: is_dark_mode ? BARRIER_COLORS.DARK_GRAY : BARRIER_COLORS.GRAY,
-                    line_style: BARRIER_LINE_STYLES.SOLID,
-                    not_draggable: true,
-                });
-
-                main_barrier.updateBarrierShade(true, contract_type);
-                barriers = [main_barrier];
-            }
-        }
-        return barriers;
-    };
-
-    @action.bound
-    clearContractUpdateConfigValues() {
-        Object.assign(this, getContractUpdateConfig(this.contract_info));
-        this.validation_errors.contract_update_stop_loss = [];
-        this.validation_errors.contract_update_take_profit = [];
-    }
-
-    @action.bound
-    onChange({ name, value }) {
-        this[name] = value;
-        this.validateProperty(name, this[name]);
-    }
-
-    @action.bound
-    updateLimitOrder() {
-        const limit_order = getLimitOrder(this);
-
-        WS.contractUpdate(this.contract_id, limit_order).then(response => {
-            if (response.error) {
-                this.root_store.common.setServicesError({
-                    type: response.msg_type,
-                    ...response.error,
-                });
-                return;
-            }
-
-            // Update contract store
-            this.populateContractUpdateConfig(response);
-            if (this.root_store.ui.is_history_tab_active) {
-                WS.contractUpdateHistory(this.contract_id).then(this.populateContractUpdateHistory);
-            }
-
-            // Update portfolio store
-            this.root_store.portfolio.populateContractUpdate(response, this.contract_id);
-        });
-    }
-}
-
-function calculate_marker(contract_info) {
-    if (!contract_info || isMultiplierContract(contract_info.contract_type)) {
-        return null;
-    }
-    const {
-        transaction_ids,
-        tick_stream,
-        contract_id,
-        date_start,
-        date_expiry,
-        entry_tick,
-        exit_tick,
-        entry_tick_time,
-        exit_tick_time,
-        contract_type,
-        tick_count,
-        barrier_count,
-        barrier,
-        high_barrier,
-        low_barrier,
-    } = contract_info;
-    const ticks_epoch_array = tick_stream ? tick_stream.map(t => t.epoch) : [];
-    const is_digit_contract = isDigitContract(contract_type);
-
-    // window.ci = toJS(contract_info);
-
-    let price_array = [];
-    if (is_digit_contract) {
-        price_array = [];
-    } else if (+barrier_count === 1 && barrier) {
-        price_array = [+barrier];
-    } else if (+barrier_count === 2 && high_barrier && low_barrier) {
-        price_array = [+low_barrier, +high_barrier];
-    }
-
-    if (entry_tick) {
-        price_array.push(entry_tick);
-    }
-    if (exit_tick) {
-        price_array.push(exit_tick);
-    }
-
-    if (!date_start) {
-        return null;
-    }
-    // if we have not yet received the first POC response
-    if (!transaction_ids) {
-        const type = is_digit_contract ? 'DigitContract' : 'TickContract';
-        return {
-            type,
-            contract_info: toJS(contract_info),
-            key: `${contract_id}-date_start`,
-            epoch_array: [date_start],
-            price_array,
-        };
-    }
-
-    if (tick_count >= 1) {
-        if (!isDigitContract(contract_type)) {
-            // TickContract
-            return {
-                contract_info: toJS(contract_info),
-                type: 'TickContract',
-                key: `${contract_id}-date_start`,
-                epoch_array: [date_start, ...ticks_epoch_array],
-                price_array,
-            };
-        }
-        // DigitContract
-        return {
-            contract_info: toJS(contract_info),
-            type: 'DigitContract',
-            key: `${contract_id}-date_start`,
-            epoch_array: [date_start, ...ticks_epoch_array],
-            price_array,
-        };
-    }
-    // NonTickContract
-    if (!tick_count) {
-        // getEndTime returns undefined when contract is running.
-        const end_time = getEndTime(contract_info) || date_expiry;
-        // the order of items in epoch_array matches the NonTickContract params.
-        const epoch_array = [date_start, end_time];
-        if (entry_tick_time) {
-            epoch_array.push(entry_tick_time);
-        }
-        if (exit_tick_time) {
-            epoch_array.push(exit_tick_time);
-        }
-        return {
-            contract_info: toJS(contract_info),
-            type: 'NonTickContract',
-            key: `${contract_id}-date_start`,
-            epoch_array,
-            price_array,
-        };
-    }
-    return null;
-}
diff --git a/packages/reports/src/Stores/Modules/Contract/contract-trade-store.js b/packages/reports/src/Stores/Modules/Contract/contract-trade-store.js
deleted file mode 100644
index a859122f4519..000000000000
--- a/packages/reports/src/Stores/Modules/Contract/contract-trade-store.js
+++ /dev/null
@@ -1,195 +0,0 @@
-import { action, computed, observable, toJS } from 'mobx';
-import { isDesktop, isEnded, isMultiplierContract, LocalStore } from '@deriv/shared';
-import { switch_to_tick_chart } from './Helpers/chart-notifications';
-import ContractStore from './contract-store';
-import { isCallPut } from './Helpers/contract-type';
-import { getContractTypesConfig } from '../Trading/Constants/contract';
-import BaseStore from '../../base-store';
-
-export default class ContractTradeStore extends BaseStore {
-    // --- Observable properties ---
-    @observable.shallow contracts = [];
-    contracts_map = {};
-    @observable has_error = false;
-    @observable error_message = '';
-
-    // Chart specific observables
-    @observable granularity = +LocalStore.get('contract_trade.granularity') || 0;
-    @observable chart_type = LocalStore.get('contract_trade.chart_type') || 'mountain';
-
-    constructor({ root_store }) {
-        super({
-            root_store,
-        });
-
-        this.onSwitchAccount(this.accountSwitchListener);
-    }
-
-    // -------------------
-    // ----- Actions -----
-    // -------------------
-
-    @action.bound
-    updateChartType(type) {
-        LocalStore.set('contract_trade.chart_type', type);
-        this.chart_type = type;
-    }
-
-    @action.bound
-    updateGranularity(granularity) {
-        const tick_chart_types = ['mountain', 'line', 'colored_line', 'spline', 'baseline'];
-        if (granularity === 0 && tick_chart_types.indexOf(this.chart_type) === -1) {
-            this.chart_type = 'mountain';
-        }
-        LocalStore.set('contract_trade.granularity', granularity);
-        this.granularity = granularity;
-        if (this.granularity === 0) {
-            this.root_store.notifications.removeNotificationMessage(switch_to_tick_chart);
-        }
-    }
-
-    applicable_contracts = () => {
-        const { symbol: underlying, contract_type: trade_type } = this.root_store.modules.trade;
-        if (!trade_type || !underlying) {
-            return [];
-        }
-        let { trade_types } = getContractTypesConfig()[trade_type];
-        const is_call_put = isCallPut(trade_type);
-        if (is_call_put) {
-            // treat CALLE/PUTE and CALL/PUT the same
-            trade_types = ['CALLE', 'PUTE', 'CALL', 'PUT'];
-        }
-        return this.contracts
-            .filter(c => c.contract_info.underlying === underlying)
-            .filter(c => {
-                const info = c.contract_info;
-                const has_multiplier_contract_ended =
-                    isMultiplierContract(info.contract_type) && isEnded(c.contract_info);
-                // filter multiplier contract which has ended
-                return !has_multiplier_contract_ended;
-            })
-            .filter(c => {
-                const info = c.contract_info;
-
-                const trade_type_is_supported = trade_types.indexOf(info.contract_type) !== -1;
-                // both high_low & rise_fall have the same contract_types in POC response
-                // entry_spot=barrier means it is rise_fall contract (blame the api)
-                if (trade_type_is_supported && info.barrier && info.entry_tick && is_call_put) {
-                    if (`${+info.entry_tick}` === `${+info.barrier}`) {
-                        return trade_type === 'rise_fall' || trade_type === 'rise_fall_equal';
-                    }
-                    return trade_type === 'high_low';
-                }
-                return trade_type_is_supported;
-            });
-    };
-
-    @computed
-    get markers_array() {
-        const markers = this.applicable_contracts()
-            .map(c => c.marker)
-            .filter(m => m)
-            .map(m => toJS(m));
-        if (markers.length) {
-            markers[markers.length - 1].is_last_contract = true;
-        }
-        return markers;
-    }
-
-    @action.bound
-    addContract({
-        barrier,
-        contract_id,
-        contract_type,
-        start_time,
-        longcode,
-        underlying,
-        is_tick_contract,
-        limit_order = {},
-    }) {
-        const contract_exists = this.contracts_map[contract_id];
-        if (contract_exists) {
-            return;
-        }
-
-        const contract = new ContractStore(this.root_store, { contract_id });
-        contract.populateConfig({
-            date_start: start_time,
-            barrier,
-            contract_type,
-            longcode,
-            underlying,
-            limit_order,
-        });
-
-        this.contracts.push(contract);
-        this.contracts_map[contract_id] = contract;
-
-        if (is_tick_contract && !this.root_store.modules.trade.is_multiplier && this.granularity !== 0 && isDesktop()) {
-            this.root_store.notifications.addNotificationMessage(switch_to_tick_chart);
-        }
-    }
-
-    @action.bound
-    removeContract({ contract_id }) {
-        this.contracts = this.contracts.filter(c => c.contract_id !== contract_id);
-        delete this.contracts_map[contract_id];
-    }
-
-    @action.bound
-    accountSwitchListener() {
-        if (this.has_error) {
-            this.clearError();
-        }
-
-        return Promise.resolve();
-    }
-
-    @action.bound
-    onUnmount() {
-        this.disposeSwitchAccount();
-        // TODO: don't forget the tick history when switching to contract-replay-store
-    }
-
-    // Called from portfolio
-    @action.bound
-    updateProposal(response) {
-        if ('error' in response) {
-            this.has_error = true;
-            this.error_message = response.error.message;
-            return;
-        }
-        // Update the contract-store corresponding to this POC
-        if (response.proposal_open_contract) {
-            const contract_id = +response.proposal_open_contract.contract_id;
-            const contract = this.contracts_map[contract_id];
-            contract.populateConfig(response.proposal_open_contract);
-            if (response.proposal_open_contract.is_sold) {
-                this.root_store.notifications.removeNotificationMessage(switch_to_tick_chart);
-                contract.cacheProposalOpenContractResponse(response);
-            }
-        }
-    }
-
-    @computed
-    get last_contract() {
-        const applicable_contracts = this.applicable_contracts();
-        const length = applicable_contracts.length;
-        return length > 0 ? applicable_contracts[length - 1] : {};
-    }
-
-    @action.bound
-    clearError() {
-        this.error_message = '';
-        this.has_error = false;
-    }
-
-    @action.bound
-    getContractById(contract_id) {
-        return (
-            this.contracts_map[contract_id] ||
-            // or get contract from contract_replay store when user is on the contract details page
-            this.root_store.modules.contract_replay.contract_store
-        );
-    }
-}
diff --git a/packages/reports/src/Stores/Modules/Portfolio/Helpers/__tests__/format-response.js b/packages/reports/src/Stores/Modules/Portfolio/Helpers/__tests__/format-response.js
deleted file mode 100644
index fb859c4946d1..000000000000
--- a/packages/reports/src/Stores/Modules/Portfolio/Helpers/__tests__/format-response.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { expect } from 'chai';
-import React from 'react';
-import { formatPortfolioPosition } from '../format-response';
-
-describe('formatPortfolioPosition', () => {
-    const mock_active_symbols = [{ display_name: 'Volatility 25 Index', symbol: 'R_25' }];
-    const portfolio_pos = {
-        buy_price: 2500.5,
-        contract_id: 1234,
-        contract_type: 'ASIANU',
-        longcode: 'test \n test \n test',
-        payout: 3500.1,
-        symbol: 'R_25',
-        shortcode: 'ASIANU_R_25_',
-        transaction_id: 5678,
-    };
-
-    it('should return an object with values in object passed as argument', () => {
-        expect(formatPortfolioPosition(portfolio_pos, mock_active_symbols)).to.eql({
-            details: 'test <br /> test <br /> test',
-            display_name: 'Volatility 25 Index',
-            id: 1234,
-            indicative: 0,
-            is_unsupported: true,
-            payout: 3500.1,
-            contract_update: undefined,
-            purchase: 2500.5,
-            reference: +5678,
-            type: 'ASIANU',
-            contract_info: portfolio_pos,
-        });
-    });
-});
diff --git a/packages/reports/src/Stores/Modules/Portfolio/Helpers/details.js b/packages/reports/src/Stores/Modules/Portfolio/Helpers/details.js
deleted file mode 100644
index 481af3abb10b..000000000000
--- a/packages/reports/src/Stores/Modules/Portfolio/Helpers/details.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import { epochToMoment, formatMilliseconds, getDiffDuration } from '@deriv/shared';
-import { localize } from '@deriv/translations';
-
-export const getDurationUnitValue = obj_duration => {
-    const duration_ms = obj_duration.asMilliseconds() / 1000;
-    // Check with isEndTime to find out if value of duration has decimals
-    // for days we do not require precision for End Time value since users cannot select with timepicker if not in same day
-    // Seconds is the smallest End Time duration displayed thus we can keep the same formatting as normal Duration
-
-    if (duration_ms >= 86400000) {
-        const duration = duration_ms / (1000 * 60 * 60 * 24);
-        return Math.floor(duration);
-    } else if (duration_ms >= 3600000 && duration_ms < 86400000) {
-        const duration = duration_ms / (1000 * 60 * 60);
-        const is_end_time = isEndTime(duration);
-        const has_seconds = isEndTime(duration_ms / (1000 * 60));
-        const string_format = has_seconds ? 'HH[h] mm[m] ss[s]' : 'HH[h] mm[m]';
-
-        return is_end_time
-            ? formatMilliseconds(duration_ms, string_format)
-            : Math.floor(duration_ms / (1000 * 60 * 60));
-    } else if (duration_ms >= 60000 && duration_ms < 3600000) {
-        const duration = duration_ms / (1000 * 60);
-        const is_end_time = isEndTime(duration);
-        return is_end_time ? formatMilliseconds(duration_ms, 'mm[m] ss[s]') : Math.floor(duration_ms / (1000 * 60));
-    } else if (duration_ms >= 1000 && duration_ms < 60000) {
-        return Math.floor(duration_ms / 1000);
-    }
-    return Math.floor(duration_ms / 1000);
-};
-
-export const isEndTime = duration => duration % 1 !== 0;
-
-export const getUnitMap = () => {
-    return {
-        d: { name_plural: localize('days'), name_singular: localize('day') },
-        h: { name_plural: localize('hours'), name_singular: localize('hour') },
-        m: { name_plural: localize('minutes'), name_singular: localize('minute') },
-        s: { name: localize('seconds') },
-    };
-};
-
-export const getDurationUnitText = obj_duration => {
-    const unit_map = getUnitMap();
-    const duration_ms = obj_duration.asMilliseconds() / 1000;
-    // return empty suffix string if duration is End Time set except for days and seconds, refer to L18 and L19
-
-    if (duration_ms) {
-        if (duration_ms >= 86400000) {
-            const days_value = duration_ms / 86400000;
-            return days_value <= 2 ? unit_map.d.name_singular : unit_map.d.name_plural;
-        } else if (duration_ms >= 3600000 && duration_ms < 86400000) {
-            if (isEndTime(duration_ms / (1000 * 60 * 60))) return '';
-            return duration_ms === 3600000 ? unit_map.h.name_singular : unit_map.h.name_plural;
-        } else if (duration_ms >= 60000 && duration_ms < 3600000) {
-            if (isEndTime(duration_ms / (1000 * 60))) return '';
-            return duration_ms === 60000 ? unit_map.m.name_singular : unit_map.m.name_plural;
-        } else if (duration_ms >= 1000 && duration_ms < 60000) {
-            return unit_map.s.name;
-        }
-    }
-    return unit_map.s.name;
-};
-
-export const getDurationPeriod = contract_info =>
-    getDiffDuration(
-        epochToMoment(contract_info.date_start || contract_info.purchase_time),
-        epochToMoment(contract_info.date_expiry)
-    );
-
-export const getDurationTime = contract_info =>
-    contract_info.tick_count ? contract_info.tick_count : getDurationUnitValue(getDurationPeriod(contract_info));
diff --git a/packages/reports/src/Stores/Modules/Portfolio/Helpers/format-response.js b/packages/reports/src/Stores/Modules/Portfolio/Helpers/format-response.js
deleted file mode 100644
index 9bb05c5bfe9c..000000000000
--- a/packages/reports/src/Stores/Modules/Portfolio/Helpers/format-response.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { getUnsupportedContracts } from '_common/contract';
-import { getSymbolDisplayName } from '../../Trading/Helpers/active-symbols';
-
-import { getMarketInformation } from '../../../../Helpers/market-underlying';
-
-const isUnSupportedContract = portfolio_pos =>
-    !!getUnsupportedContracts()[portfolio_pos.contract_type] || // check unsupported contract type
-    !!portfolio_pos.is_forward_starting; // for forward start contracts
-
-export const formatPortfolioPosition = (portfolio_pos, active_symbols = [], indicative) => {
-    const purchase = parseFloat(portfolio_pos.buy_price);
-    const payout = parseFloat(portfolio_pos.payout);
-    const display_name = getSymbolDisplayName(active_symbols, getMarketInformation(portfolio_pos.shortcode).underlying);
-    const transaction_id =
-        portfolio_pos.transaction_id || (portfolio_pos.transaction_ids && portfolio_pos.transaction_ids.buy);
-
-    return {
-        contract_info: portfolio_pos,
-        details: portfolio_pos.longcode.replace(/\n/g, '<br />'),
-        display_name,
-        id: portfolio_pos.contract_id,
-        indicative: isNaN(indicative) || !indicative ? 0 : indicative,
-        payout,
-        purchase,
-        reference: +transaction_id,
-        type: portfolio_pos.contract_type,
-        is_unsupported: isUnSupportedContract(portfolio_pos),
-        contract_update: portfolio_pos.limit_order,
-    };
-};
diff --git a/packages/reports/src/Stores/Modules/Portfolio/Helpers/portfolio-notifications.js b/packages/reports/src/Stores/Modules/Portfolio/Helpers/portfolio-notifications.js
deleted file mode 100644
index 2f32588530ac..000000000000
--- a/packages/reports/src/Stores/Modules/Portfolio/Helpers/portfolio-notifications.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { Money } from '@deriv/components';
-import { localize, Localize } from '@deriv/translations';
-
-export const contractSold = (currency, sold_for) => ({
-    key: 'contract_sold',
-    header: localize('Contract sold'),
-    message: (
-        <Localize
-            i18n_default_text='Contract was sold for <0 />.'
-            components={[<Money key={sold_for} amount={sold_for} currency={currency} show_currency />]}
-        />
-    ),
-    type: 'contract_sold',
-    size: 'small',
-    should_hide_close_btn: true,
-    is_auto_close: true,
-});
-
-export const contractCancelled = () => ({
-    key: 'contract_sold',
-    header: localize('Contract cancelled'),
-    message: (
-        <Localize
-            i18n_default_text='Contract was cancelled.'
-            // components={[ <Money key={sold_for} amount={sold_for} currency={currency} /> ]}
-        />
-    ),
-    type: 'contract_sold',
-    size: 'small',
-    should_hide_close_btn: true,
-    is_auto_close: true,
-});
diff --git a/packages/reports/src/Stores/Modules/Portfolio/portfolio-store.js b/packages/reports/src/Stores/Modules/Portfolio/portfolio-store.js
deleted file mode 100644
index 14b3269ecd34..000000000000
--- a/packages/reports/src/Stores/Modules/Portfolio/portfolio-store.js
+++ /dev/null
@@ -1,491 +0,0 @@
-import throttle from 'lodash.throttle';
-import { action, computed, observable, reaction } from 'mobx';
-import { createTransformer } from 'mobx-utils';
-import {
-    isEmptyObject,
-    isEnded,
-    isUserSold,
-    isValidToSell,
-    isMultiplierContract,
-    getCurrentTick,
-    getDisplayStatus,
-    WS,
-} from '@deriv/shared';
-import { formatPortfolioPosition } from './Helpers/format-response';
-import { contractCancelled, contractSold } from './Helpers/portfolio-notifications';
-import { getDurationPeriod, getDurationTime, getDurationUnitText } from './Helpers/details';
-import { getEndTime } from '../Contract/Helpers/logic';
-
-import BaseStore from '../../base-store';
-
-export default class PortfolioStore extends BaseStore {
-    @observable.shallow positions = [];
-    @observable.shallow all_positions = [];
-    positions_map = {};
-    @observable is_loading = false;
-    @observable error = '';
-    getPositionById = createTransformer(id => this.positions.find(position => +position.id === +id));
-
-    responseQueue = [];
-
-    @observable.shallow active_positions = [];
-
-    @action.bound
-    async initializePortfolio() {
-        if (this.has_subscribed_to_poc_and_transaction) {
-            this.clearTable();
-        }
-        this.is_loading = true;
-        await WS.wait('authorize');
-        WS.portfolio().then(this.portfolioHandler);
-        WS.subscribeProposalOpenContract(null, this.proposalOpenContractQueueHandler);
-        WS.subscribeTransaction(this.transactionHandler);
-        this.has_subscribed_to_poc_and_transaction = true;
-    }
-
-    @action.bound
-    clearTable() {
-        this.positions = [];
-        this.positions_map = {};
-        this.is_loading = false;
-        this.error = '';
-        this.updatePositions();
-        if (this.has_subscribed_to_poc_and_transaction) {
-            WS.forgetAll('proposal_open_contract', 'transaction');
-        }
-        this.has_subscribed_to_poc_and_transaction = false;
-    }
-
-    @action.bound
-    portfolioHandler(response) {
-        this.is_loading = false;
-        if ('error' in response) {
-            this.error = response.error.message;
-            return;
-        }
-        this.error = '';
-        if (response.portfolio.contracts) {
-            this.positions = response.portfolio.contracts
-                .map(pos => formatPortfolioPosition(pos, this.root_store.modules.trade.active_symbols))
-                .sort((pos1, pos2) => pos2.reference - pos1.reference); // new contracts first
-
-            this.positions.forEach(p => {
-                this.positions_map[p.id] = p;
-            });
-            this.updatePositions();
-        }
-    }
-
-    @action.bound
-    onBuyResponse({ contract_id, longcode, contract_type }) {
-        const new_pos = {
-            contract_id,
-            longcode,
-            contract_type,
-        };
-        this.pushNewPosition(new_pos);
-    }
-
-    @action.bound
-    async transactionHandler(response) {
-        if ('error' in response) {
-            this.error = response.error.message;
-        }
-        if (!response.transaction) return;
-        const { contract_id, action: act, longcode } = response.transaction;
-
-        if (act === 'buy') {
-            this.onBuyResponse({
-                contract_id,
-                longcode,
-                contract_type: '', // TODO: figure out the icon not showing
-            });
-        } else if (act === 'sell') {
-            const i = this.getPositionIndexById(contract_id);
-
-            if (!this.positions[i]) {
-                // On a page refresh, portfolio call has returend empty,
-                // even though we we get a transaction.sell response.
-                return;
-            }
-            this.positions[i].is_loading = true;
-
-            // Sometimes when we sell a contract, we don't get `proposal_open_contract` message with exit information and status as `sold`.
-            // This is to make sure that we get `proposal_open_contract` message with exit information and status as `sold`.
-            const subscriber = WS.subscribeProposalOpenContract(contract_id, poc => {
-                if (poc.error) {
-                    // Settles the contract based on transaction response when POC response is throwing error.
-                    this.populateResultDetailsFromTransaction(response);
-                } else {
-                    this.updateContractTradeStore(poc);
-                    this.updateContractReplayStore(poc);
-                    this.populateResultDetails(poc);
-                }
-                subscriber.unsubscribe();
-            });
-        }
-    }
-
-    deepClone = obj => JSON.parse(JSON.stringify(obj));
-    updateContractTradeStore(response) {
-        const contract_trade = this.root_store.modules.contract_trade;
-        const has_poc = !isEmptyObject(response.proposal_open_contract);
-        const has_error = !!response.error;
-        if (!has_poc && !has_error) return;
-        if (has_poc) {
-            contract_trade.addContract(this.deepClone(response.proposal_open_contract));
-            contract_trade.updateProposal(this.deepClone(response));
-        }
-    }
-
-    updateContractReplayStore(response) {
-        const contract_replay = this.root_store.modules.contract_replay;
-        if (contract_replay.contract_id === response.proposal_open_contract?.contract_id) {
-            contract_replay.populateConfig(response);
-        }
-    }
-
-    updateTradeStore(is_over, portfolio_position, is_limit_order_update) {
-        const trade = this.root_store.modules.trade;
-        if (!is_limit_order_update) {
-            trade.setPurchaseSpotBarrier(is_over, portfolio_position);
-        }
-        trade.updateLimitOrderBarriers(is_over, portfolio_position);
-    }
-
-    proposalOpenContractQueueHandler = response => {
-        this.responseQueue.push(response);
-        this.throttledUpdatePositions();
-    };
-
-    @action.bound
-    proposalOpenContractHandler(response) {
-        if ('error' in response) {
-            this.updateContractTradeStore(response);
-            this.updateContractReplayStore(response);
-            return;
-        }
-
-        const proposal = response.proposal_open_contract;
-        const portfolio_position = this.positions_map[proposal.contract_id];
-
-        if (!portfolio_position) return;
-        this.updateContractTradeStore(response);
-        this.updateContractReplayStore(response);
-
-        const formatted_position = formatPortfolioPosition(
-            proposal,
-            this.root_store.modules.trade.active_symbols,
-            portfolio_position.indicative
-        );
-        Object.assign(portfolio_position, formatted_position);
-
-        const prev_indicative = portfolio_position.indicative;
-        const new_indicative = +proposal.bid_price;
-        const profit_loss = +proposal.profit;
-
-        // fix for missing barrier and entry_spot in proposal_open_contract API response, only re-assign if valid
-        if (proposal.barrier) portfolio_position.barrier = +proposal.barrier;
-        if (proposal.entry_spot) portfolio_position.entry_spot = +proposal.entry_spot;
-
-        // store contract proposal details that require modifiers
-        portfolio_position.indicative = new_indicative;
-        portfolio_position.profit_loss = profit_loss;
-        portfolio_position.is_valid_to_sell = isValidToSell(proposal);
-
-        // store contract proposal details that do not require modifiers
-        portfolio_position.contract_info = proposal;
-
-        // for tick contracts
-        if (proposal.tick_count) {
-            const current_tick =
-                portfolio_position.current_tick > getCurrentTick(proposal)
-                    ? portfolio_position.current_tick
-                    : getCurrentTick(proposal);
-            portfolio_position.current_tick = current_tick;
-        }
-
-        if (new_indicative > prev_indicative) {
-            portfolio_position.status = 'profit';
-        } else if (new_indicative < prev_indicative) {
-            portfolio_position.status = 'loss';
-        } else {
-            portfolio_position.status = null;
-        }
-
-        if (this.hovered_position_id === portfolio_position.id) {
-            if (portfolio_position.contract_info.is_sold === 1) {
-                this.updateTradeStore(false, portfolio_position);
-            } else {
-                this.updateTradeStore(true, portfolio_position, true);
-            }
-        }
-
-        if (portfolio_position.contract_info.is_sold === 1) {
-            this.populateResultDetails(response);
-        }
-    }
-
-    @action.bound
-    onClickCancel(contract_id) {
-        const i = this.getPositionIndexById(contract_id);
-        if (this.positions[i].is_sell_requested) return;
-
-        this.positions[i].is_sell_requested = true;
-        if (contract_id) {
-            WS.cancelContract(contract_id).then(response => {
-                if (response.error) {
-                    this.root_store.common.setServicesError({
-                        type: response.msg_type,
-                        ...response.error,
-                    });
-                } else {
-                    this.root_store.notifications.addNotificationMessage(contractCancelled());
-                }
-            });
-        }
-    }
-
-    @action.bound
-    onClickSell(contract_id) {
-        const i = this.getPositionIndexById(contract_id);
-        if (this.positions[i].is_sell_requested) return;
-
-        const { bid_price } = this.positions[i].contract_info;
-        this.positions[i].is_sell_requested = true;
-        if (contract_id && typeof bid_price === 'number') {
-            WS.sell(contract_id, bid_price).then(this.handleSell);
-        }
-    }
-
-    @action.bound
-    handleSell(response) {
-        if (response.error) {
-            // If unable to sell due to error, give error via pop up if not in contract mode
-            const i = this.getPositionIndexById(response.echo_req.sell);
-            this.positions[i].is_sell_requested = false;
-
-            // invalidToken error will handle in socket-general.js
-            if (response.error.code !== 'InvalidToken') {
-                this.root_store.common.setServicesError({
-                    type: response.msg_type,
-                    ...response.error,
-                });
-            }
-        } else if (!response.error && response.sell) {
-            // update contract store sell info after sell
-            this.root_store.modules.contract_trade.sell_info = {
-                sell_price: response.sell.sold_for,
-                transaction_id: response.sell.transaction_id,
-            };
-            this.root_store.notifications.addNotificationMessage(
-                contractSold(this.root_store.client.currency, response.sell.sold_for)
-            );
-        }
-    }
-
-    @action.bound
-    populateResultDetailsFromTransaction = response => {
-        const transaction_response = response.transaction;
-        const { contract_id, amount } = transaction_response;
-        const i = this.getPositionIndexById(contract_id);
-        const position = this.positions[i];
-
-        if (!position) {
-            return;
-        }
-        const contract_info = { ...position.contract_info, is_sold: 1, is_expired: 1, status: 'complete' };
-
-        position.contract_info = contract_info;
-        position.is_valid_to_sell = false;
-        position.result = amount > contract_info.buy_price ? 'won' : 'lost';
-        position.status = 'complete';
-        position.is_sold = 1;
-        position.is_loading = false;
-
-        contract_info.exit_tick_time = contract_info.date_expiry;
-        contract_info.sell_price = String(amount);
-        contract_info.profit = amount - contract_info.buy_price;
-
-        this.updatePositions();
-    };
-
-    @action.bound
-    populateResultDetails = response => {
-        const contract_response = response.proposal_open_contract;
-        const i = this.getPositionIndexById(contract_response.contract_id);
-
-        if (!this.positions[i]) {
-            return;
-        }
-
-        this.positions[i].contract_info = contract_response;
-        this.positions[i].duration = getDurationTime(contract_response);
-        this.positions[i].duration_unit = getDurationUnitText(getDurationPeriod(contract_response));
-        this.positions[i].exit_spot = contract_response.exit_tick || contract_response.current_spot; // workaround if no exit_tick in proposal_open_contract, use latest spot
-        this.positions[i].is_valid_to_sell = isValidToSell(contract_response);
-        this.positions[i].result = getDisplayStatus(contract_response);
-        this.positions[i].profit_loss = +contract_response.profit;
-        this.positions[i].sell_time = getEndTime(contract_response) || contract_response.current_spot_time; // same as exit_spot, use latest spot time if no exit_tick_time
-        this.positions[i].sell_price = contract_response.sell_price;
-        this.positions[i].status = 'complete';
-
-        // fix for missing barrier and entry_spot
-        if (!this.positions[i].contract_info.barrier || !this.positions[i].contract_info.entry_spot) {
-            this.positions[i].contract_info.barrier = this.positions[i].barrier;
-            this.positions[i].contract_info.entry_spot = this.positions[i].entry_spot;
-        }
-
-        // remove exit_spot for manually sold contracts
-        if (isUserSold(contract_response)) this.positions[i].exit_spot = '-';
-
-        this.positions[i].is_loading = false;
-    };
-
-    @action.bound
-    populateContractUpdate({ contract_update }, contract_id) {
-        const position = this.getPositionById(contract_id);
-        if (position) {
-            Object.assign(position.contract_update || {}, contract_update);
-            this.updatePositions();
-        }
-    }
-
-    @action.bound
-    pushNewPosition(new_pos) {
-        const position = formatPortfolioPosition(new_pos, this.root_store.modules.trade.active_symbols);
-        if (this.positions_map[position.id]) return;
-
-        this.positions.unshift(position);
-        this.positions_map[position.id] = position;
-        this.updatePositions();
-    }
-
-    @action.bound
-    removePositionById(contract_id) {
-        const contract_idx = this.getPositionIndexById(contract_id);
-
-        this.positions.splice(contract_idx, 1);
-        delete this.positions_map[contract_id];
-        this.updatePositions();
-        this.root_store.modules.contract_trade.removeContract({ contract_id });
-    }
-
-    async accountSwitcherListener() {
-        await this.initializePortfolio();
-        return Promise.resolve();
-    }
-
-    @action.bound
-    onHoverPosition(is_over, position) {
-        const { symbol: underlying } = this.root_store.modules.trade;
-        if (
-            position.contract_info.underlying !== underlying ||
-            isEnded(position.contract_info) ||
-            !isMultiplierContract(position.type)
-        ) {
-            return;
-        }
-
-        this.hovered_position_id = is_over ? position.id : null;
-        this.updateTradeStore(is_over, position);
-    }
-
-    preSwitchAccountListener() {
-        this.clearTable();
-        return Promise.resolve();
-    }
-
-    @action.bound
-    logoutListener() {
-        this.clearTable();
-        return Promise.resolve();
-    }
-
-    @action.bound
-    networkStatusChangeListener(is_online) {
-        this.is_loading = !is_online;
-    }
-
-    @action.bound
-    onMount() {
-        this.onPreSwitchAccount(this.preSwitchAccountListener);
-        this.onSwitchAccount(this.accountSwitcherListener);
-        this.onNetworkStatusChange(this.networkStatusChangeListener);
-        this.onLogout(this.logoutListener);
-        if (this.positions.length === 0 && !this.has_subscribed_to_poc_and_transaction) {
-            // TODO: Optimise the way is_logged_in changes are detected for "logging in" and "already logged on" states
-            if (this.root_store.client.is_logged_in) {
-                this.initializePortfolio();
-            } else {
-                reaction(
-                    () => this.root_store.client.is_logged_in,
-                    () => {
-                        if (this.root_store.client.is_logged_in) {
-                            this.initializePortfolio();
-                        }
-                    }
-                );
-            }
-        }
-    }
-
-    @action.bound
-    onUnmount() {
-        this.disposePreSwitchAccount();
-        this.disposeSwitchAccount();
-        this.disposeLogout();
-        this.clearTable();
-    }
-
-    getPositionIndexById(contract_id) {
-        return this.positions.findIndex(pos => +pos.id === +contract_id);
-    }
-
-    @computed
-    get totals() {
-        let indicative = 0;
-        let payout = 0;
-        let purchase = 0;
-
-        this.positions.forEach(portfolio_pos => {
-            indicative += +portfolio_pos.indicative;
-            payout += +portfolio_pos.payout;
-            purchase += +portfolio_pos.purchase;
-        });
-        return {
-            indicative,
-            payout,
-            purchase,
-        };
-    }
-
-    @action.bound
-    setActivePositions() {
-        this.active_positions = this.positions.filter(portfolio_pos => !getEndTime(portfolio_pos.contract_info));
-        this.all_positions = [...this.positions];
-    }
-
-    updatePositions = () => {
-        this.responseQueue.forEach(res => this.proposalOpenContractHandler(res));
-        this.responseQueue = [];
-        this.setActivePositions();
-    };
-
-    throttledUpdatePositions = throttle(this.updatePositions, 500);
-
-    @computed
-    get is_active_empty() {
-        return !this.is_loading && this.active_positions.length === 0;
-    }
-
-    @computed
-    get active_positions_count() {
-        return this.active_positions.length || 0;
-    }
-
-    @computed
-    get is_empty() {
-        return !this.is_loading && this.all_positions.length === 0;
-    }
-}
diff --git a/packages/reports/src/Stores/Modules/Profit/Helpers/format-response.js b/packages/reports/src/Stores/Modules/Profit/Helpers/format-response.js
index 0b7ba3d5afb5..d46a9efaed68 100644
--- a/packages/reports/src/Stores/Modules/Profit/Helpers/format-response.js
+++ b/packages/reports/src/Stores/Modules/Profit/Helpers/format-response.js
@@ -1,7 +1,7 @@
-import { formatMoney, toMoment } from '@deriv/shared';
+import { formatMoney, toMoment, getSymbolDisplayName, getMarketInformation } from '@deriv/shared';
 
-import { getMarketInformation } from '../../../../Helpers/market-underlying';
-import { getSymbolDisplayName } from '../../Trading/Helpers/active-symbols';
+// import { getMarketInformation } from '../../../../Helpers/market-underlying';
+// import { getSymbolDisplayName } from '../../Trading/Helpers/active-symbols';
 
 export const formatProfitTableTransactions = (transaction, currency, active_symbols = []) => {
     const format_string = 'DD MMM YYYY HH:mm:ss';
diff --git a/packages/reports/src/Stores/Modules/SmartChart/Constants/barriers.js b/packages/reports/src/Stores/Modules/SmartChart/Constants/barriers.js
deleted file mode 100644
index 353ef635b148..000000000000
--- a/packages/reports/src/Stores/Modules/SmartChart/Constants/barriers.js
+++ /dev/null
@@ -1,36 +0,0 @@
-export const CONTRACT_SHADES = {
-    CALL: 'ABOVE',
-    PUT: 'BELOW',
-    CALLE: 'ABOVE',
-    PUTE: 'BELOW',
-    EXPIRYRANGE: 'BETWEEN',
-    EXPIRYMISS: 'OUTSIDE',
-    RANGE: 'BETWEEN',
-    UPORDOWN: 'OUTSIDE',
-    ONETOUCH: 'NONE_SINGLE', // no shade
-    NOTOUCH: 'NONE_SINGLE', // no shade
-    ASIANU: 'ABOVE',
-    ASIAND: 'BELOW',
-    MULTUP: 'ABOVE',
-    MULTDOWN: 'BELOW',
-};
-
-// Default non-shade according to number of barriers
-export const DEFAULT_SHADES = {
-    1: 'NONE_SINGLE',
-    2: 'NONE_DOUBLE',
-};
-
-export const BARRIER_COLORS = {
-    GREEN: '#4bb4b3',
-    RED: '#ec3f3f',
-    ORANGE: '#ff6444',
-    GRAY: '#999999',
-    DARK_GRAY: '#6E6E6E',
-};
-
-export const BARRIER_LINE_STYLES = {
-    DASHED: 'dashed',
-    DOTTED: 'dotted',
-    SOLID: 'solid',
-};
diff --git a/packages/reports/src/Stores/Modules/SmartChart/Helpers/__tests__/barriers.js b/packages/reports/src/Stores/Modules/SmartChart/Helpers/__tests__/barriers.js
deleted file mode 100644
index 4ba4566132aa..000000000000
--- a/packages/reports/src/Stores/Modules/SmartChart/Helpers/__tests__/barriers.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import { expect } from 'chai';
-import React from 'react';
-import * as Barriers from '../barriers';
-
-describe('Barriers', () => {
-    describe('isBarrierSupported', () => {
-        it('should return false when barrier is not in CONTRACT_SHADES', () => {
-            expect(Barriers.isBarrierSupported('SomeThinMadeUp')).to.eql(false);
-        });
-        it('should return true when barrier is in CONTRACT_SHADES', () => {
-            expect(Barriers.isBarrierSupported('CALL')).to.eql(true);
-        });
-    });
-
-    describe('barriersToString', () => {
-        it('should convert non-zero barriers which do not have +/- to string consisting of them without +/- while is_relative is false', () => {
-            expect(Barriers.barriersToString(false, 10, 15)).to.deep.eql(['10', '15']);
-        });
-        it('should convert values without +/- and zero to string consisting of them without +/- while is_relative is false', () => {
-            expect(Barriers.barriersToString(false, 0, 15)).to.deep.eql(['0', '15']);
-        });
-        it('should convert barriers which have +/- to string consisting of them without +/- while is_relative is false', () => {
-            expect(Barriers.barriersToString(false, +11, 15)).to.deep.eql(['11', '15']);
-        });
-        it('should convert barriers which have +/- to string consisting of them with +/- while is_relative is true', () => {
-            expect(Barriers.barriersToString(true, +11, +15)).to.deep.eql(['+11', '+15']);
-        });
-    });
-
-    describe('barriersObjectToArray', () => {
-        const main = {
-            color: 'green',
-            draggable: false,
-        };
-        it('should return an array from values in barriers object', () => {
-            const barriers = {
-                main,
-            };
-            expect(Barriers.barriersObjectToArray(barriers, [])).to.deep.eql([
-                {
-                    color: 'green',
-                    draggable: false,
-                },
-            ]);
-        });
-        it('should return an array from values in barriers object (empty values should be filtered out)', () => {
-            const barriers = {
-                main,
-                somethingEmpty: {},
-            };
-            expect(Barriers.barriersObjectToArray(barriers, [])).to.deep.eql([
-                {
-                    color: 'green',
-                    draggable: false,
-                },
-            ]);
-        });
-    });
-});
diff --git a/packages/reports/src/Stores/Modules/SmartChart/Helpers/barriers.js b/packages/reports/src/Stores/Modules/SmartChart/Helpers/barriers.js
deleted file mode 100644
index f26a39e3146f..000000000000
--- a/packages/reports/src/Stores/Modules/SmartChart/Helpers/barriers.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { toJS } from 'mobx';
-import { isEmptyObject } from '@deriv/shared';
-import { CONTRACT_SHADES } from '../Constants/barriers';
-
-export const isBarrierSupported = contract_type => contract_type in CONTRACT_SHADES;
-
-export const barriersToString = (is_relative, ...barriers_list) =>
-    barriers_list
-        .filter(barrier => barrier !== undefined && barrier !== null)
-        .map(barrier => `${is_relative && !/^[+-]/.test(barrier) ? '+' : ''}${barrier}`);
-
-export const barriersObjectToArray = (barriers, reference_array) => {
-    Object.keys(barriers).forEach(barrier => {
-        const js_object = toJS(barriers[barrier]);
-        if (!isEmptyObject(js_object)) {
-            reference_array.push(js_object);
-        }
-    });
-
-    return reference_array;
-};
-
-export const removeBarrier = (barriers, key) => {
-    const index = barriers.findIndex(b => b.key === key);
-    if (index > -1) {
-        barriers.splice(index, 1);
-    }
-};
diff --git a/packages/reports/src/Stores/Modules/SmartChart/chart-barrier-store.js b/packages/reports/src/Stores/Modules/SmartChart/chart-barrier-store.js
deleted file mode 100644
index 6f57838f9593..000000000000
--- a/packages/reports/src/Stores/Modules/SmartChart/chart-barrier-store.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import { action, computed, observable } from 'mobx';
-import { BARRIER_COLORS, BARRIER_LINE_STYLES, CONTRACT_SHADES, DEFAULT_SHADES } from './Constants/barriers';
-import { barriersToString } from './Helpers/barriers';
-
-export class ChartBarrierStore {
-    @observable color;
-    @observable lineStyle;
-    @observable shade;
-    @observable shadeColor;
-
-    @observable high;
-    @observable low;
-
-    @observable relative;
-    @observable draggable;
-
-    @observable hidePriceLines;
-    @observable hideBarrierLine;
-    @observable hideOffscreenLine;
-    @observable title;
-
-    onChartBarrierChange;
-
-    constructor(high_barrier, low_barrier, onChartBarrierChange = null, { color, line_style, not_draggable } = {}) {
-        this.color = color;
-        this.lineStyle = line_style || BARRIER_LINE_STYLES.SOLID;
-        this.onChange = this.onBarrierChange;
-
-        // trade_store's action to process new barriers on dragged
-        this.onChartBarrierChange =
-            typeof onChartBarrierChange === 'function' ? onChartBarrierChange.bind(this) : () => {};
-
-        this.high = +high_barrier || 0; // 0 to follow the price
-        if (low_barrier) {
-            this.low = +low_barrier;
-        }
-
-        this.shade = this.default_shade;
-
-        const has_barrier = !!high_barrier;
-        this.relative = !has_barrier || /^[+-]/.test(high_barrier);
-        this.draggable = !not_draggable && has_barrier;
-        this.hidePriceLines = !has_barrier;
-    }
-
-    @action.bound
-    updateBarriers(high, low, isFromChart = false) {
-        if (!isFromChart) {
-            this.relative = /^[+-]/.test(high);
-        }
-        this.high = +high || undefined;
-        this.low = +low || undefined;
-    }
-
-    @action.bound
-    updateBarrierShade(should_display, contract_type) {
-        this.shade = (should_display && CONTRACT_SHADES[contract_type]) || this.default_shade;
-    }
-
-    @action.bound
-    onBarrierChange({ high, low }) {
-        this.updateBarriers(high, low, true);
-        this.onChartBarrierChange(...barriersToString(this.relative, high, low));
-    }
-
-    @action.bound
-    updateBarrierColor(is_dark_mode) {
-        this.color = is_dark_mode ? BARRIER_COLORS.DARK_GRAY : BARRIER_COLORS.GRAY;
-    }
-
-    @computed
-    get barrier_count() {
-        return (typeof this.high !== 'undefined') + (typeof this.low !== 'undefined');
-    }
-
-    @computed
-    get default_shade() {
-        return DEFAULT_SHADES[this.barrier_count];
-    }
-}
diff --git a/packages/reports/src/Stores/Modules/SmartChart/chart-marker-store.js b/packages/reports/src/Stores/Modules/SmartChart/chart-marker-store.js
deleted file mode 100644
index 3248a1b09f8a..000000000000
--- a/packages/reports/src/Stores/Modules/SmartChart/chart-marker-store.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { observable } from 'mobx';
-
-export class ChartMarkerStore {
-    @observable marker_config = observable.object({});
-    @observable content_config = observable.object({});
-
-    constructor(marker_config, content_config) {
-        this.marker_config = marker_config;
-        this.content_config = content_config;
-    }
-}
diff --git a/packages/reports/src/Stores/Modules/Statement/Helpers/format-response.js b/packages/reports/src/Stores/Modules/Statement/Helpers/format-response.js
index 5dfb85cb7099..e5a02e553310 100644
--- a/packages/reports/src/Stores/Modules/Statement/Helpers/format-response.js
+++ b/packages/reports/src/Stores/Modules/Statement/Helpers/format-response.js
@@ -1,9 +1,9 @@
-import { formatMoney, toTitleCase, toMoment } from '@deriv/shared';
+import { formatMoney, toTitleCase, toMoment, getMarketInformation,getSymbolDisplayName } from '@deriv/shared';
 
 import { localize } from '@deriv/translations';
-import { getMarketInformation } from '../../../../Helpers/market-underlying';
+// import { getMarketInformation } from '../../../../Helpers/market-underlying';
 
-import { getSymbolDisplayName } from '../../Trading/Helpers/active-symbols';
+// import { getSymbolDisplayName } from '../../Trading/Helpers/active-symbols';
 
 export const formatStatementTransaction = (transaction, currency, active_symbols = []) => {
     const format_string = 'DD MMM YYYY HH:mm:ss';
diff --git a/packages/reports/src/Stores/Modules/Statement/statement-store.js b/packages/reports/src/Stores/Modules/Statement/statement-store.js
index c7b70a83c6ed..fe03f89b329b 100644
--- a/packages/reports/src/Stores/Modules/Statement/statement-store.js
+++ b/packages/reports/src/Stores/Modules/Statement/statement-store.js
@@ -91,7 +91,7 @@ export default class StatementStore extends BaseStore {
             formatStatementTransaction(
                 transaction,
                 this.root_store.client.currency,
-                this.root_store.modules.trade.active_symbols
+                this.root_store.active_symbols.active_symbols
             )
         );
 
diff --git a/packages/reports/src/Stores/Modules/Trading/Actions/contract-type.js b/packages/reports/src/Stores/Modules/Trading/Actions/contract-type.js
deleted file mode 100644
index 844e16e7b0d7..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Actions/contract-type.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import ContractType from '../Helpers/contract-type';
-
-export const onChangeContractTypeList = ({ contract_types_list, contract_type }) =>
-    ContractType.getContractType(contract_types_list, contract_type);
-
-export const onChangeContractType = store => ContractType.getContractValues(store);
diff --git a/packages/reports/src/Stores/Modules/Trading/Actions/currency.js b/packages/reports/src/Stores/Modules/Trading/Actions/currency.js
deleted file mode 100644
index 59ada36b6a3a..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Actions/currency.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { WS } from '@deriv/shared';
-import { buildCurrenciesList, getDefaultCurrency } from '../Helpers/currency';
-
-export const getCurrenciesAsync = async currency => {
-    const response = await WS.authorized.storage.payoutCurrencies();
-
-    const currencies_list = buildCurrenciesList(response.payout_currencies);
-    const default_currency = getDefaultCurrency(currencies_list, currency);
-
-    return {
-        currencies_list,
-        ...default_currency,
-    };
-};
diff --git a/packages/reports/src/Stores/Modules/Trading/Actions/duration.js b/packages/reports/src/Stores/Modules/Trading/Actions/duration.js
deleted file mode 100644
index e60912493fd0..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Actions/duration.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import ContractType from '../Helpers/contract-type';
-import { getExpiryType, getDurationMinMaxValues } from '../Helpers/duration';
-
-export const onChangeExpiry = store => {
-    const contract_expiry_type = getExpiryType(store);
-
-    // TODO: there will be no barrier available if contract is only daily but client chooses intraday endtime. we should find a way to handle this.
-    const obj_barriers =
-        store.contract_expiry_type !== contract_expiry_type && // barrier value changes for tick/intraday/daily
-        ContractType.getBarriers(store.contract_type, contract_expiry_type);
-
-    return {
-        contract_expiry_type,
-        ...obj_barriers,
-    };
-};
-
-export const onChangeContractType = store => {
-    const contract_expiry_type = getExpiryType(store);
-
-    const { duration, duration_min_max, duration_unit } = store;
-
-    const obj_duration = assertDuration({ contract_expiry_type, duration, duration_min_max, duration_unit });
-
-    return {
-        ...obj_duration,
-    };
-};
-
-const assertDuration = ({ contract_expiry_type, duration, duration_min_max, duration_unit } = {}) => {
-    const [min, max] = getDurationMinMaxValues(duration_min_max, contract_expiry_type, duration_unit);
-
-    if (duration < min) {
-        return { duration: min };
-    }
-    if (duration > max) {
-        return { duration: max };
-    }
-    return {};
-};
diff --git a/packages/reports/src/Stores/Modules/Trading/Actions/purchase.js b/packages/reports/src/Stores/Modules/Trading/Actions/purchase.js
deleted file mode 100644
index 3f3cee01270a..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Actions/purchase.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { WS } from '@deriv/shared';
-
-export const processPurchase = async (proposal_id, price, passthrough) =>
-    WS.buy({
-        proposal_id,
-        price,
-        ...(passthrough && { passthrough }),
-    });
diff --git a/packages/reports/src/Stores/Modules/Trading/Actions/start-date.js b/packages/reports/src/Stores/Modules/Trading/Actions/start-date.js
deleted file mode 100644
index dda9da7604fb..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Actions/start-date.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import ContractType from '../Helpers/contract-type';
-
-export const onChangeStartDate = async store => {
-    const { contract_type, duration_unit, start_date } = store;
-    const server_time = store.root_store.common.server_time;
-    let { start_time, expiry_date, expiry_type } = store;
-
-    start_time = start_time || server_time.clone().add(6, 'minute').format('HH:mm'); // when there is not a default value for start_time, it should be set more than 5 min after server_time
-
-    const obj_contract_start_type = ContractType.getStartType(start_date);
-    const contract_start_type = obj_contract_start_type.contract_start_type;
-    const obj_sessions = ContractType.getSessions(contract_type, start_date);
-    const sessions = obj_sessions.sessions;
-    const obj_start_time = ContractType.getStartTime(sessions, start_date, start_time);
-    start_time = obj_start_time.start_time;
-
-    const obj_duration_units_list = ContractType.getDurationUnitsList(contract_type, contract_start_type);
-    const duration_units_list = obj_duration_units_list.duration_units_list;
-    const obj_duration_unit = ContractType.getDurationUnit(duration_unit, contract_type, contract_start_type);
-
-    const obj_expiry_type = ContractType.getExpiryType(duration_units_list, expiry_type);
-    expiry_type = obj_expiry_type.expiry_type;
-    const obj_expiry_date = ContractType.getExpiryDate(duration_units_list, expiry_date, expiry_type, start_date);
-    expiry_date = obj_expiry_date.expiry_date;
-
-    const obj_duration_min_max = ContractType.getDurationMinMax(contract_type, contract_start_type);
-
-    return {
-        ...obj_contract_start_type,
-        ...obj_duration_units_list,
-        ...obj_duration_min_max,
-        ...obj_duration_unit,
-        ...obj_sessions,
-        ...obj_start_time,
-        ...obj_expiry_date,
-        ...obj_expiry_type,
-    };
-};
-
-export const onChangeExpiry = async store => {
-    const { start_time, expiry_date, expiry_type, expiry_time, start_date, symbol, sessions } = store;
-
-    const trading_times = await ContractType.getTradingTimes(expiry_date, symbol);
-    const obj_market_open_times = { market_open_times: trading_times.open };
-    const obj_market_close_times = { market_close_times: trading_times.close };
-
-    const market_close_times = obj_market_close_times.market_close_times;
-    const obj_expiry_time = ContractType.getExpiryTime(
-        expiry_date,
-        expiry_time,
-        expiry_type,
-        market_close_times,
-        sessions,
-        start_date,
-        start_time
-    );
-
-    return {
-        ...obj_expiry_time,
-        ...obj_market_open_times,
-        ...obj_market_close_times,
-    };
-};
diff --git a/packages/reports/src/Stores/Modules/Trading/Actions/symbol.js b/packages/reports/src/Stores/Modules/Trading/Actions/symbol.js
deleted file mode 100644
index 34597c0beb4a..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Actions/symbol.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import ContractType from '../Helpers/contract-type';
-
-export const onChangeSymbolAsync = async symbol => {
-    await ContractType.buildContractTypesConfig(symbol);
-};
diff --git a/packages/reports/src/Stores/Modules/Trading/Actions/test.js b/packages/reports/src/Stores/Modules/Trading/Actions/test.js
deleted file mode 100644
index 6726e3bf70cc..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Actions/test.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { WS } from '@deriv/shared';
-
-/* This action does not modify state directlly.
- * The payload will be the callback that get's called for each tick
- */
-let cb;
-const ticksCallback = response => {
-    const data = response.error
-        ? response.error.message
-        : `${new Date(response.tick.epoch * 1000).toUTCString()}: ${response.tick.quote}`;
-    cb(data);
-};
-
-export const getTicks = function ({ symbol }, callback) {
-    cb = callback;
-    WS.forgetAll('ticks').then(() => {
-        WS.subscribeTicks(symbol, ticksCallback);
-    });
-    return {};
-};
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/info.jsx b/packages/reports/src/Stores/Modules/Trading/Components/info.jsx
deleted file mode 100644
index 3081230c1f71..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Components/info.jsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Popover, Money, Text } from '@deriv/components';
-import { Localize } from '@deriv/translations';
-import { connect } from '../../../connect';
-
-const commission_tooltip_margin = 30;
-const stop_out_tooltip_margin = 160;
-
-const MultipliersInfo = ({
-    amount = 0,
-    commission = 0,
-    className,
-    commission_text_size,
-    stop_out_text_size,
-    currency,
-    multiplier = 0,
-    has_stop_loss,
-    is_tooltip_relative,
-    should_show_tooltip,
-    stop_out = 0,
-}) => {
-    const commission_text = (
-        <Text
-            as='p'
-            line_height='s'
-            size={commission_text_size || 'xxxs'}
-            className={classNames({
-                [`${className}-tooltip-text`]: className,
-            })}
-        >
-            <Localize
-                i18n_default_text='Commission <0/>'
-                components={[<Money key={0} amount={commission} currency={currency} show_currency />]}
-            />
-        </Text>
-    );
-
-    const stop_out_text = (
-        <Text
-            as='p'
-            line_height='s'
-            size={stop_out_text_size || 'xxxs'}
-            className={classNames({
-                [`${className}-tooltip-text`]: className,
-            })}
-        >
-            <Localize
-                i18n_default_text='Stop out <0/>'
-                components={[<Money key={0} amount={stop_out} currency={currency} show_currency />]}
-            />
-        </Text>
-    );
-
-    const commission_tooltip = (
-        <Localize
-            i18n_default_text='<0>{{commission_percentage}}%</0> of (<1/> * {{multiplier}})'
-            values={{
-                commission_percentage: Number((commission * 100) / (multiplier * amount)).toFixed(4),
-                multiplier,
-            }}
-            components={[
-                <Text size='xxs' weight='bold' key={0} />,
-                <Money key={1} amount={amount} currency={currency} />,
-            ]}
-        />
-    );
-
-    const stop_out_tooltip = (
-        <Localize
-            i18n_default_text='When your current loss equals or exceeds {{stop_out_percentage}}% of your stake, your contract will be closed at the nearest available asset price.'
-            values={{
-                stop_out_percentage: Math.floor(Math.abs(Number((stop_out * 100) / amount))),
-            }}
-        />
-    );
-
-    const getInfo = ({ text, message, margin }) => {
-        return should_show_tooltip ? (
-            <Popover
-                message={message}
-                {...(is_tooltip_relative
-                    ? { alignment: 'left', relative_render: true, margin }
-                    : { alignment: 'top', zIndex: 9999 })}
-            >
-                {text}
-            </Popover>
-        ) : (
-            text
-        );
-    };
-
-    return (
-        <div
-            className={classNames('multipliers-trade-info', className, {
-                'mobile-widget__multiplier-trade-info--no-stop-out': has_stop_loss,
-            })}
-        >
-            {getInfo({
-                text: commission_text,
-                message: commission_tooltip,
-                margin: commission_tooltip_margin,
-            })}
-            {!has_stop_loss &&
-                getInfo({
-                    text: stop_out_text,
-                    message: stop_out_tooltip,
-                    margin: stop_out_tooltip_margin,
-                })}
-        </div>
-    );
-};
-
-MultipliersInfo.propTypes = {
-    className: PropTypes.string,
-    commission_text_size: PropTypes.string,
-    is_tooltip_relative: PropTypes.bool,
-    should_show_tooltip: PropTypes.bool,
-    stop_out_text_size: PropTypes.string,
-};
-
-export default connect(({ modules }, props) => ({
-    amount: props.amount ?? modules.trade.amount,
-    commission: props.commission ?? modules.trade.commission,
-    currency: modules.trade.currency,
-    has_stop_loss: modules.trade.has_stop_loss,
-    multiplier: modules.trade.multiplier,
-    stop_out: props.stop_out ?? modules.trade.stop_out,
-}))(MultipliersInfo);
diff --git a/packages/reports/src/Stores/Modules/Trading/Components/multiplier.jsx b/packages/reports/src/Stores/Modules/Trading/Components/multiplier.jsx
deleted file mode 100644
index 66a76458b281..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Components/multiplier.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { PropTypes as MobxPropTypes } from 'mobx-react';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Dropdown } from '@deriv/components';
-import { connect } from '../../../connect';
-
-const Multiplier = ({ multiplier, multiplier_range_list, onChange }) => {
-    return (
-        <Dropdown
-            id='multiplier'
-            className='trade-container__multiplier-dropdown'
-            is_alignment_left
-            is_nativepicker={false}
-            list={multiplier_range_list}
-            name='multiplier'
-            no_border={true}
-            value={multiplier}
-            onChange={onChange}
-        />
-    );
-};
-
-Multiplier.propTypes = {
-    multiplier: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    multiplier_range_list: MobxPropTypes.arrayOrObservableArray,
-    onChange: PropTypes.func,
-};
-
-export default connect(({ modules }) => ({
-    multiplier: modules.trade.multiplier,
-    multiplier_range_list: modules.trade.multiplier_range_list,
-    onChange: modules.trade.onChange,
-}))(Multiplier);
diff --git a/packages/reports/src/Stores/Modules/Trading/Constants/contract.js b/packages/reports/src/Stores/Modules/Trading/Constants/contract.js
deleted file mode 100644
index 938bd50dc811..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Constants/contract.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import { localize } from '@deriv/translations';
-import { shouldShowCancellation, shouldShowExpiration } from '@deriv/shared';
-
-export const getLocalizedBasis = () => ({
-    payout: localize('Payout'),
-    stake: localize('Stake'),
-    multiplier: localize('Multiplier'),
-});
-
-/**
- * components can be undef or an array containing any of: 'start_date', 'barrier', 'last_digit'
- *     ['duration', 'amount'] are omitted, as they're available in all contract types
- */
-export const getContractTypesConfig = symbol => ({
-    rise_fall: {
-        title: localize('Rise/Fall'),
-        trade_types: ['CALL', 'PUT'],
-        basis: ['stake', 'payout'],
-        components: ['start_date'],
-        barrier_count: 0,
-    },
-    rise_fall_equal: {
-        title: localize('Rise/Fall'),
-        trade_types: ['CALLE', 'PUTE'],
-        basis: ['stake', 'payout'],
-        components: ['start_date'],
-        barrier_count: 0,
-    },
-    high_low: {
-        title: localize('Higher/Lower'),
-        trade_types: ['CALL', 'PUT'],
-        basis: ['stake', 'payout'],
-        components: ['barrier'],
-        barrier_count: 1,
-    },
-    touch: {
-        title: localize('Touch/No Touch'),
-        trade_types: ['ONETOUCH', 'NOTOUCH'],
-        basis: ['stake', 'payout'],
-        components: ['barrier'],
-    },
-    end: {
-        title: localize('Ends In/Ends Out'),
-        trade_types: ['EXPIRYMISS', 'EXPIRYRANGE'],
-        basis: ['stake', 'payout'],
-        components: ['barrier'],
-    },
-    stay: {
-        title: localize('Stays In/Goes Out'),
-        trade_types: ['RANGE', 'UPORDOWN'],
-        basis: ['stake', 'payout'],
-        components: ['barrier'],
-    },
-    asian: {
-        title: localize('Asian Up/Asian Down'),
-        trade_types: ['ASIANU', 'ASIAND'],
-        basis: ['stake', 'payout'],
-        components: [],
-    },
-    match_diff: {
-        title: localize('Matches/Differs'),
-        trade_types: ['DIGITMATCH', 'DIGITDIFF'],
-        basis: ['stake', 'payout'],
-        components: ['last_digit'],
-    },
-    even_odd: {
-        title: localize('Even/Odd'),
-        trade_types: ['DIGITODD', 'DIGITEVEN'],
-        basis: ['stake', 'payout'],
-        components: [],
-    },
-    over_under: {
-        title: localize('Over/Under'),
-        trade_types: ['DIGITOVER', 'DIGITUNDER'],
-        basis: ['stake', 'payout'],
-        components: ['last_digit'],
-    },
-    // TODO: update the rest of these contracts config
-    lb_call: { title: localize('Close-to-Low'), trade_types: ['LBFLOATCALL'], basis: ['multiplier'], components: [] },
-    lb_put: { title: localize('High-to-Close'), trade_types: ['LBFLOATPUT'], basis: ['multiplier'], components: [] },
-    lb_high_low: { title: localize('High-to-Low'), trade_types: ['LBHIGHLOW'], basis: ['multiplier'], components: [] },
-    tick_high_low: {
-        title: localize('High Tick/Low Tick'),
-        trade_types: ['TICKHIGH', 'TICKLOW'],
-        basis: [],
-        components: [],
-    },
-    run_high_low: {
-        title: localize('Only Ups/Only Downs'),
-        trade_types: ['RUNHIGH', 'RUNLOW'],
-        basis: [],
-        components: [],
-    },
-    reset: {
-        title: localize('Reset Up/Reset Down'),
-        trade_types: ['RESETCALL', 'RESETPUT'],
-        basis: [],
-        components: [],
-    },
-    callputspread: {
-        title: localize('Spread Up/Spread Down'),
-        trade_types: ['CALLSPREAD', 'PUTSPREAD'],
-        basis: [],
-        components: [],
-    },
-    multiplier: {
-        title: localize('Multipliers'),
-        trade_types: ['MULTUP', 'MULTDOWN'],
-        basis: ['stake'],
-        components: [
-            'take_profit',
-            'stop_loss',
-            ...(shouldShowCancellation(symbol) ? ['cancellation'] : []),
-            ...(shouldShowExpiration(symbol) ? ['expiration'] : []),
-        ],
-        config: { hide_duration: true },
-    }, // hide Duration for Multiplier contracts for now
-});
-
-export const getContractCategoriesConfig = () => ({
-    [localize('Multipliers')]: ['multiplier'],
-    [localize('Ups & Downs')]: ['rise_fall', 'rise_fall_equal', 'run_high_low', 'reset', 'asian', 'callputspread'],
-    [localize('Highs & Lows')]: ['high_low', 'touch', 'tick_high_low'],
-    [localize('Ins & Outs')]: ['end', 'stay'],
-    [localize('Look Backs')]: ['lb_high_low', 'lb_put', 'lb_call'],
-    [localize('Digits')]: ['match_diff', 'even_odd', 'over_under'],
-});
-
-export const unsupported_contract_types_list = [
-    // TODO: remove these once all contract types are supported
-    'callputspread',
-    'run_high_low',
-    'reset',
-    'asian',
-    'tick_high_low',
-    'end',
-    'stay',
-    'lb_call',
-    'lb_put',
-    'lb_high_low',
-];
diff --git a/packages/reports/src/Stores/Modules/Trading/Constants/validation-rules.js b/packages/reports/src/Stores/Modules/Trading/Constants/validation-rules.js
deleted file mode 100644
index d8abc9345fcc..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Constants/validation-rules.js
+++ /dev/null
@@ -1,185 +0,0 @@
-import { localize } from '@deriv/translations';
-import { isSessionAvailable } from '../Helpers/start-date';
-import { isHourValid, isMinuteValid, isTimeValid, toMoment } from '@deriv/shared';
-
-const getValidationRules = () => ({
-    amount: {
-        rules: [
-            ['req', { message: localize('Amount is a required field.') }],
-            ['number', { min: 0, type: 'float' }],
-        ],
-    },
-    barrier_1: {
-        rules: [
-            [
-                'req',
-                {
-                    condition: store => store.barrier_count && store.form_components.indexOf('barrier') > -1,
-                    message: localize('Barrier is a required field.'),
-                },
-            ],
-            ['barrier', { condition: store => store.barrier_count }],
-            [
-                'custom',
-                {
-                    func: (value, options, store, inputs) =>
-                        store.barrier_count > 1 ? +value > +inputs.barrier_2 : true,
-                    message: localize('Higher barrier must be higher than lower barrier.'),
-                },
-            ],
-            [
-                'custom',
-                {
-                    func: (value, options, store, inputs) =>
-                        /^[+-]/.test(inputs.barrier_1) ? +inputs.barrier_1 !== 0 : true,
-                    message: localize('Barrier cannot be zero.'),
-                },
-            ],
-        ],
-        trigger: 'barrier_2',
-    },
-    barrier_2: {
-        rules: [
-            [
-                'req',
-                {
-                    condition: store => store.barrier_count > 1 && store.form_components.indexOf('barrier') > -1,
-                    message: localize('Barrier is a required field.'),
-                },
-            ],
-            ['barrier', { condition: store => store.barrier_count }],
-            [
-                'custom',
-                {
-                    func: (value, options, store, inputs) =>
-                        (/^[+-]/g.test(inputs.barrier_1) && /^[+-]/g.test(value)) ||
-                        (/^(?![+-])/g.test(inputs.barrier_1) && /^(?![+-])/g.test(value)),
-                    message: localize('Both barriers should be relative or absolute'),
-                },
-            ],
-            [
-                'custom',
-                {
-                    func: (value, options, store, inputs) => +inputs.barrier_1 > +value,
-                    message: localize('Lower barrier must be lower than higher barrier.'),
-                },
-            ],
-        ],
-        trigger: 'barrier_1',
-    },
-    duration: {
-        rules: [['req', { message: localize('Duration is a required field.') }]],
-    },
-    start_date: {
-        trigger: 'start_time',
-    },
-    expiry_date: {
-        trigger: 'expiry_time',
-    },
-    start_time: {
-        rules: [
-            [
-                'custom',
-                {
-                    func: (value, options, store) => store.contract_start_type === 'spot' || isTimeValid(value),
-                    message: localize('Please enter the start time in the format "HH:MM".'),
-                },
-            ],
-            [
-                'custom',
-                {
-                    func: (value, options, store) => store.contract_start_type === 'spot' || isHourValid(value),
-                    message: localize('Hour must be between 0 and 23.'),
-                },
-            ],
-            [
-                'custom',
-                {
-                    func: (value, options, store) => store.contract_start_type === 'spot' || isMinuteValid(value),
-                    message: localize('Minute must be between 0 and 59.'),
-                },
-            ],
-            [
-                'custom',
-                {
-                    func: (value, options, store) => {
-                        if (store.contract_start_type === 'spot') return true;
-                        if (!isTimeValid(value)) return false;
-                        const start_moment = toMoment(store.start_date);
-                        const start_moment_clone = start_moment.clone();
-                        const [h, m] = value.split(':');
-                        return isSessionAvailable(store.sessions, start_moment_clone.hour(h).minute(m), start_moment);
-                    },
-                    message: localize('Start time cannot be in the past.'),
-                },
-            ],
-        ],
-    },
-    expiry_time: {
-        rules: [
-            [
-                'custom',
-                {
-                    func: (value, options, store) => store.contract_start_type === 'spot' || isTimeValid(value),
-                    message: localize('Please enter the start time in the format "HH:MM".'),
-                },
-            ],
-            [
-                'custom',
-                {
-                    func: (value, options, store) => store.contract_start_type === 'spot' || isHourValid(value),
-                    message: localize('Hour must be between 0 and 23.'),
-                },
-            ],
-            [
-                'custom',
-                {
-                    func: (value, options, store) => store.contract_start_type === 'spot' || isMinuteValid(value),
-                    message: localize('Minute must be between 0 and 59.'),
-                },
-            ],
-            [
-                'custom',
-                {
-                    func: (value, options, store) => {
-                        if (store.contract_start_type === 'spot') return true;
-                        if (!isTimeValid(value)) return false;
-                        const start_moment = toMoment(store.start_date);
-                        const start_moment_clone = start_moment.clone();
-                        const [h, m] = value.split(':');
-                        return isSessionAvailable(store.sessions, start_moment_clone.hour(h).minute(m), start_moment);
-                    },
-                    message: localize('Expiry time cannot be in the past.'),
-                },
-            ],
-        ],
-    },
-    ...getMultiplierValidationRules(),
-});
-
-export const getMultiplierValidationRules = () => ({
-    stop_loss: {
-        rules: [
-            [
-                'req',
-                {
-                    condition: store => store.has_stop_loss && !store.stop_loss,
-                    message: localize('Please enter a stop loss amount.'),
-                },
-            ],
-        ],
-    },
-    take_profit: {
-        rules: [
-            [
-                'req',
-                {
-                    condition: store => store.has_take_profit && !store.take_profit,
-                    message: localize('Please enter a take profit amount.'),
-                },
-            ],
-        ],
-    },
-});
-
-export default getValidationRules;
diff --git a/packages/reports/src/Stores/Modules/Trading/Helpers/__tests__/barrier.js b/packages/reports/src/Stores/Modules/Trading/Helpers/__tests__/barrier.js
deleted file mode 100644
index 8b00dec5dbdd..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Helpers/__tests__/barrier.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import { expect } from 'chai';
-import React from 'react';
-import { buildBarriersConfig } from '../barrier';
-
-describe('buildBarriersConfig', () => {
-    const contract_obj = {
-        barrier_category: 'euro_atm',
-        contract_category: 'callput',
-        contract_category_display: 'Up/Down',
-        contract_display: 'Higher',
-        contract_type: 'CALL',
-        exchange_name: 'FOREX',
-        expiry_type: 'daily',
-        market: 'forex',
-        max_contract_duration: '365d',
-        min_contract_duration: '1d',
-        sentiment: 'up',
-        start_type: 'spot',
-        submarket: 'major_pairs',
-        underlying_symbol: 'frxAUDJPY',
-    };
-    it('Returns Undefined if contract has no barriers', () => {
-        const contract = {
-            ...contract_obj,
-        };
-        expect(buildBarriersConfig(contract)).to.eql(undefined);
-    });
-
-    it('Returns barriers with added values when contract has barrier but equals to zero', () => {
-        const contract = {
-            ...contract_obj,
-            barriers: 0,
-        };
-        expect(buildBarriersConfig(contract)).to.eql(undefined);
-    });
-
-    it('Returns barriers with including empty object when contract has barriers but not values', () => {
-        const contract = {
-            ...contract_obj,
-            barriers: 1,
-        };
-        expect(buildBarriersConfig(contract)).to.eql({
-            count: 1,
-            daily: {},
-        });
-    });
-
-    it('Returns barriers with added values when contract has barriers', () => {
-        const contract = {
-            ...contract_obj,
-            barriers: 1,
-            low_barrier: 22,
-            barrier: 33,
-            high_barrier: 44,
-        };
-        expect(buildBarriersConfig(contract)).to.eql({
-            count: 1,
-            daily: {
-                low_barrier: 22,
-                barrier: 33,
-                high_barrier: 44,
-            },
-        });
-    });
-
-    it('Returns barriers with some of the values when contract has barriers and some of the values', () => {
-        const contract = {
-            ...contract_obj,
-            barriers: 1,
-            low_barrier: 22,
-            barrier: 33,
-        };
-        expect(buildBarriersConfig(contract)).to.eql({
-            count: 1,
-            daily: {
-                low_barrier: 22,
-                barrier: 33,
-            },
-        });
-    });
-});
diff --git a/packages/reports/src/Stores/Modules/Trading/Helpers/__tests__/currency.js b/packages/reports/src/Stores/Modules/Trading/Helpers/__tests__/currency.js
deleted file mode 100644
index 7deb0c283c3a..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Helpers/__tests__/currency.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import { expect } from 'chai';
-import React from 'react';
-import { buildCurrenciesList, getDefaultCurrency } from '../currency';
-
-describe('buildCurrenciesList', () => {
-    const payout_currencies = ['AUD', 'BTC', 'ETH', 'EUR', 'LTC', 'USD'];
-
-    it('It Returns the desired currencies', () => {
-        expect(buildCurrenciesList(payout_currencies)).to.eql({
-            Fiat: [
-                {
-                    has_tooltip: false,
-                    text: 'AUD',
-                    value: 'AUD',
-                },
-                {
-                    has_tooltip: false,
-                    text: 'EUR',
-                    value: 'EUR',
-                },
-                {
-                    has_tooltip: false,
-                    text: 'USD',
-                    value: 'USD',
-                },
-            ],
-            Crypto: [
-                {
-                    has_tooltip: true,
-                    text: 'BTC',
-                    value: 'BTC',
-                },
-                {
-                    has_tooltip: true,
-                    text: 'ETH',
-                    value: 'ETH',
-                },
-                {
-                    has_tooltip: true,
-                    text: 'LTC',
-                    value: 'LTC',
-                },
-            ],
-        });
-    });
-
-    it('Returns correct default currency when currency is passed', () => {
-        const currencies_list = buildCurrenciesList(payout_currencies);
-        expect(getDefaultCurrency(currencies_list, 'EUR')).to.eql({
-            currency: 'EUR',
-        });
-    });
-
-    it('Returns first currency in currencies list when currency is not passed', () => {
-        const currencies_list = buildCurrenciesList(payout_currencies);
-        expect(getDefaultCurrency(currencies_list)).to.eql({
-            currency: 'AUD',
-        });
-    });
-});
diff --git a/packages/reports/src/Stores/Modules/Trading/Helpers/__tests__/durations.js b/packages/reports/src/Stores/Modules/Trading/Helpers/__tests__/durations.js
deleted file mode 100644
index dd02339bb848..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Helpers/__tests__/durations.js
+++ /dev/null
@@ -1,160 +0,0 @@
-import { expect } from 'chai';
-import * as Duration from '../duration.js';
-import moment from 'moment';
-
-describe('buildDurationConfig', () => {
-    const contract = {
-        barrier_category: 'euro_atm',
-        barriers: 0,
-        contract_category: 'callput',
-        contract_category_display: 'Up/Down',
-        contract_display: 'Higher',
-        contract_type: 'CALL',
-        exchange_name: 'FOREX',
-        expiry_type: 'daily',
-        market: 'forex',
-        max_contract_duration: '365d',
-        min_contract_duration: '1d',
-        sentiment: 'up',
-        start_type: 'spot',
-        submarket: 'major_pairs',
-        underlying_symbol: 'frxAUDJPY',
-    };
-
-    const durations = {
-        min_max: {
-            spot: {
-                daily: {
-                    min: 86400,
-                    max: 31536000,
-                },
-            },
-        },
-        units_display: {
-            spot: [
-                {
-                    text: 'Days',
-                    value: 'd',
-                },
-            ],
-        },
-    };
-
-    it('Returns correct value when durations is not passed', () => {
-        expect(Duration.buildDurationConfig(contract)).to.eql(durations);
-    });
-
-    it('Returns correct value when durations passed', () => {
-        expect(Duration.buildDurationConfig(contract, durations)).to.eql(durations);
-    });
-});
-
-describe('convertDurationUnit', () => {
-    it('Returns null if the arguments are empty value', () => {
-        expect(Duration.convertDurationUnit('', '', '')).to.be.null;
-    });
-
-    it('Returns null if the arguments are invalid value', () => {
-        expect(Duration.convertDurationUnit('sdf', 'd', 'm')).to.be.null;
-    });
-
-    it('Returns null if there is no arguments', () => {
-        expect(Duration.convertDurationUnit()).to.be.null;
-    });
-
-    it('Returns correct value convert day to second', () => {
-        expect(Duration.convertDurationUnit('365', 'd', 's')).to.eql(31536000);
-    });
-
-    it('Returns correct value convert minute to second', () => {
-        expect(Duration.convertDurationUnit('5', 'm', 's')).to.eql(300);
-    });
-
-    it('Returns correct value convert day to minute', () => {
-        expect(Duration.convertDurationUnit('1', 'd', 'm')).to.eql(1440);
-    });
-
-    it('Returns correct value convert second to minute', () => {
-        expect(Duration.convertDurationUnit('180', 's', 'm')).to.eql(3);
-    });
-
-    it('Returns correct value convert minute to day', () => {
-        expect(Duration.convertDurationUnit('2880', 'm', 'd')).to.eql(2);
-    });
-
-    it('Returns correct value convert second to day', () => {
-        expect(Duration.convertDurationUnit('86400', 's', 'd')).to.eql(1);
-    });
-});
-
-describe('getExpiryType', () => {
-    const store = {
-        root_store: {
-            common: {
-                server_time: '2018-12-25 23:59:59',
-            },
-        },
-        duration_units_list: [
-            { text: 'ticks', value: 't' },
-            { text: 'minutes', value: 'm' },
-            { text: 'hours', value: 'h' },
-            { text: 'days', value: 'd' },
-        ],
-    };
-
-    it('Return intraday if expiry date is today', () => {
-        store.expiry_date = '2018-12-25';
-        store.expiry_type = 'endtime';
-        expect(Duration.getExpiryType(store)).to.eql('intraday');
-    });
-
-    it('Return daily if expiry date is tomorrow', () => {
-        store.expiry_date = moment().utc().add(1, 'days');
-        store.expiry_type = 'endtime';
-        expect(Duration.getExpiryType(store)).to.eql('daily');
-    });
-
-    it('Return tick if duration unit is t', () => {
-        store.duration_unit = 't';
-        store.expiry_type = 'duration';
-        expect(Duration.getExpiryType(store)).to.eql('tick');
-    });
-
-    it('Return intraday if duration unit is m', () => {
-        store.duration_unit = 'm';
-        store.expiry_type = 'duration';
-        expect(Duration.getExpiryType(store)).to.eql('intraday');
-    });
-
-    it('Return daily if duration unit is d', () => {
-        store.duration_unit = 'd';
-        store.expiry_type = 'duration';
-        expect(Duration.getExpiryType(store)).to.eql('daily');
-    });
-});
-
-describe('convertDurationLimit', () => {
-    it('Returns null when there are no arguments', () => {
-        expect(Duration.convertDurationLimit('', '')).to.be.null;
-    });
-
-    it('Returns null for invalid value', () => {
-        expect(Duration.convertDurationLimit('sdf', 't')).to.be.null;
-    });
-
-    it('Returns correct value for ticks unit', () => {
-        expect(Duration.convertDurationLimit(5, 't')).to.eql(5);
-    });
-
-    it('Returns correct value for minutes unit', () => {
-        expect(Duration.convertDurationLimit(180, 'm')).to.eql(3);
-    });
-
-    it('Returns correct value for hour unit', () => {
-        expect(Duration.convertDurationLimit(7200, 'h')).to.eql(2);
-    });
-
-    it('Returns correct value for day unit', () => {
-        expect(Duration.convertDurationLimit(86400, 'd')).to.eql(1);
-    });
-});
diff --git a/packages/reports/src/Stores/Modules/Trading/Helpers/__tests__/proposal.js b/packages/reports/src/Stores/Modules/Trading/Helpers/__tests__/proposal.js
deleted file mode 100644
index ca8d47fab74e..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Helpers/__tests__/proposal.js
+++ /dev/null
@@ -1,212 +0,0 @@
-import { expect } from 'chai';
-import React from 'react';
-import * as Proposal from '../proposal';
-
-describe('Proposal', () => {
-    describe('getProposalInfo', () => {
-        const store = {
-            currency: 'EUR',
-            basis_list: [
-                {
-                    text: 'Payout',
-                    value: 'payout',
-                },
-                {
-                    text: 'Stake',
-                    value: 'stake',
-                },
-            ],
-            basis: 'payout',
-        };
-        it('should return 0 as profit when proposal has error', () => {
-            const obj_prev_contract_basis = {
-                text: 'Payout',
-                value: 1234,
-            };
-            const response = {
-                error: {
-                    message: 'This is error',
-                },
-            };
-            expect(Proposal.getProposalInfo(store, response, obj_prev_contract_basis)).to.deep.eql({
-                profit: '0.00',
-                returns: '0.00%',
-                stake: undefined,
-                payout: undefined,
-                cancellation: undefined,
-                commission: undefined,
-                error_code: undefined,
-                error_field: undefined,
-                limit_order: undefined,
-                id: '',
-                message: 'This is error',
-                has_error: true,
-                has_error_details: false,
-                has_increased: false,
-                obj_contract_basis: {
-                    text: 'Stake',
-                    value: '',
-                },
-            });
-        });
-        it('should return profit and return calculated if proposal has no error', () => {
-            const response = {
-                proposal: {
-                    proposal: 1,
-                    ask_price: 50,
-                    display_value: 200,
-                    payout: 300,
-                    id: 'id1',
-                    longcode: 'This is a longcode',
-                },
-            };
-            const obj_prev_contract_basis = {
-                text: 'payout',
-                value: 1234,
-            };
-            expect(Proposal.getProposalInfo(store, response, obj_prev_contract_basis)).to.deep.eql({
-                cancellation: undefined,
-                commission: undefined,
-                error_code: undefined,
-                error_field: undefined,
-                limit_order: undefined,
-                profit: '250.00',
-                returns: '500.00%',
-                stake: 200,
-                payout: 300,
-                id: 'id1',
-                message: 'This is a longcode',
-                has_error: false,
-                has_error_details: false,
-                has_increased: false,
-                obj_contract_basis: {
-                    text: 'Stake',
-                    value: 200,
-                },
-            });
-        });
-    });
-
-    describe('createProposalRequests', () => {
-        it('should return request containing trade type which is not already in request', () => {
-            const store = {
-                amount: '10',
-                basis: 'payout',
-                currency: 'USD',
-                symbol: 'frxAUDJPY',
-                start_time: '12:30',
-                duration: '5',
-                duration_unit: 't',
-                trade_types: {
-                    CALL: 'Higher',
-                    PUT: 'Lower',
-                },
-                expiry_type: 'duration',
-                form_components: ['duration', 'amount', 'start_date'],
-                root_store: {
-                    client: {
-                        currency: 'USD',
-                    },
-                },
-                proposal_requests: {
-                    CALL: {
-                        amount: 10,
-                        basis: 'payout',
-                        contract_type: 'CALL',
-                        currency: 'USD',
-                        duration: 5,
-                        duration_unit: 't',
-                        proposal: 1,
-                        req_id: 7,
-                        subscribe: 1,
-                        symbol: 'frxAUDJPY',
-                    },
-                },
-            };
-
-            expect(Proposal.createProposalRequests(store)).to.deep.eql({
-                CALL: {
-                    amount: 10,
-                    basis: 'payout',
-                    contract_type: 'CALL',
-                    currency: 'USD',
-                    duration: 5,
-                    duration_unit: 't',
-                    proposal: 1,
-                    subscribe: 1,
-                    symbol: 'frxAUDJPY',
-                },
-                PUT: {
-                    proposal: 1,
-                    subscribe: 1,
-                    amount: 10,
-                    basis: 'payout',
-                    contract_type: 'PUT',
-                    currency: 'USD',
-                    symbol: 'frxAUDJPY',
-                    duration: 5,
-                    duration_unit: 't',
-                },
-            });
-        });
-
-        it('should return request as before if all trade types already exist in request', () => {
-            const store = {
-                amount: '10',
-                basis: 'payout',
-                currency: 'USD',
-                symbol: 'frxAUDJPY',
-                start_time: '12:30',
-                duration: '5',
-                duration_unit: 't',
-                trade_types: {
-                    CALL: 'Higher',
-                },
-                expiry_type: 'duration',
-                form_components: ['duration', 'amount', 'start_date'],
-                root_store: {
-                    client: {
-                        currency: 'USD',
-                    },
-                },
-                proposal_requests: {
-                    CALL: {
-                        amount: 10,
-                        basis: 'payout',
-                        contract_type: 'CALL',
-                        currency: 'USD',
-                        duration: 5,
-                        duration_unit: 't',
-                        proposal: 1,
-                        req_id: 7,
-                        subscribe: 1,
-                        symbol: 'frxAUDJPY',
-                    },
-                },
-            };
-
-            expect(Proposal.createProposalRequests(store)).to.deep.eql({
-                CALL: {
-                    amount: 10,
-                    basis: 'payout',
-                    contract_type: 'CALL',
-                    currency: 'USD',
-                    duration: 5,
-                    duration_unit: 't',
-                    proposal: 1,
-                    subscribe: 1,
-                    symbol: 'frxAUDJPY',
-                },
-            });
-        });
-
-        it('should return empty if there is no trade type', () => {
-            const store = {
-                trade_types: {},
-                proposal_requests: {},
-            };
-
-            expect(Proposal.createProposalRequests(store)).to.be.empty;
-        });
-    });
-});
diff --git a/packages/reports/src/Stores/Modules/Trading/Helpers/__tests__/start-date.js b/packages/reports/src/Stores/Modules/Trading/Helpers/__tests__/start-date.js
deleted file mode 100644
index 1efefc9f2097..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Helpers/__tests__/start-date.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import { expect } from 'chai';
-import moment from 'moment';
-import React from 'react';
-import { buildForwardStartingConfig, isSessionAvailable } from '../start-date';
-
-describe('start_date', () => {
-    describe('buildForwardStartingConfig', () => {
-        it('Returns empty object when forward_starting_options and forward_starting_dates are both empties', () => {
-            const contract = {
-                barrier_category: 'euro_atm',
-                barriers: 0,
-                contract_category: 'callput',
-                contract_category_display: 'Up/Down',
-                contract_display: 'Higher',
-                contract_type: 'CALL',
-                exchange_name: 'FOREX',
-                expiry_type: 'daily',
-                market: 'forex',
-                max_contract_duration: '365d',
-                min_contract_duration: '1d',
-                sentiment: 'up',
-                start_type: 'spot',
-                submarket: 'major_pairs',
-                underlying_symbol: 'frxAUDJPY',
-            };
-            expect(buildForwardStartingConfig(contract, {})).to.be.empty;
-        });
-    });
-
-    describe('isSessionAvailable', () => {
-        it('should return true with default values', () => {
-            expect(isSessionAvailable()).to.eql(true);
-        });
-        it('should return true when should_only_check_hour is false and there is a session which opens before now and closes after now', () => {
-            const sessions = [
-                {
-                    open: moment.utc(new Date().getTime() - 100000),
-                    close: moment.utc(new Date().getTime() + 100000),
-                },
-                {
-                    open: moment.utc(new Date().getTime() + 300000),
-                    close: moment.utc(new Date().getTime() + 400000),
-                },
-            ];
-            expect(isSessionAvailable(sessions)).to.eql(true);
-        });
-        it('should return false when should_only_check_hour is false and there is not a session which opens before now and closes after now and compare_moment is before start_moment', () => {
-            const sessions = [
-                {
-                    open: moment.utc(new Date().getTime() + 400000),
-                    close: moment.utc(new Date().getTime() + 500000),
-                },
-                {
-                    open: moment.utc(new Date().getTime() + 300000),
-                    close: moment.utc(new Date().getTime() + 400000),
-                },
-            ];
-            const compare_moment = moment.utc(new Date().getTime() - 1000);
-
-            expect(isSessionAvailable(sessions, compare_moment)).to.eql(false);
-        });
-        it('should return false when should_only_check_hour is false and there is not a session which opens before now and closes after now and compare_moment is before start_moment', () => {
-            const sessions = [
-                {
-                    open: moment.utc(new Date().getTime() + 400000),
-                    close: moment.utc(new Date().getTime() + 500000),
-                },
-                {
-                    open: moment.utc(new Date().getTime() + 300000),
-                    close: moment.utc(new Date().getTime() + 400000),
-                },
-            ];
-            expect(isSessionAvailable(sessions, moment.utc(), moment.utc(), false)).to.eql(false);
-        });
-        it('should return false when should_only_check_hour is true and there is not a session which opens before now and closes after now', () => {
-            const sessions = [
-                {
-                    open: moment.utc(new Date().getTime() + 3600000),
-                    close: moment.utc(new Date().getTime() + 3600001),
-                },
-            ];
-            expect(isSessionAvailable(sessions, moment.utc(), moment.utc(), true)).to.eql(false);
-        });
-        it('should return true when should_only_check_hour is true and there is a session which opens before now and closes after now', () => {
-            const sessions = [
-                {
-                    open: moment.utc(new Date().getTime() - 1000),
-                    close: moment.utc(new Date().getTime() + 1000),
-                },
-            ];
-            expect(isSessionAvailable(sessions, moment.utc(), moment.utc(), true)).to.eql(true);
-        });
-    });
-});
diff --git a/packages/reports/src/Stores/Modules/Trading/Helpers/active-symbols.js b/packages/reports/src/Stores/Modules/Trading/Helpers/active-symbols.js
deleted file mode 100644
index cae4884246c1..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Helpers/active-symbols.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import { flow } from 'mobx';
-import { LocalStore, redirectToLogin, WS } from '@deriv/shared';
-import { getLanguage, localize } from '@deriv/translations';
-
-export const showUnavailableLocationError = flow(function* (showError, is_logged_in) {
-    const website_status = yield WS.wait('website_status');
-    const residence_list = yield WS.residenceList();
-
-    const clients_country_code = website_status.website_status.clients_country;
-    const clients_country_text = (
-        residence_list.residence_list.find(obj_country => obj_country.value === clients_country_code) || {}
-    ).text;
-
-    const header = clients_country_text
-        ? localize('Sorry, this app is unavailable in {{clients_country}}.', {
-              clients_country: clients_country_text,
-          })
-        : localize('Sorry, this app is unavailable in your current location.');
-
-    showError({
-        message: localize('If you have an account, log in to continue.'),
-        header,
-        redirect_label: localize('Log in'),
-        redirectOnClick: () => redirectToLogin(is_logged_in, getLanguage()),
-        should_show_refresh: false,
-    });
-});
-
-export const showMxMltUnavailableError = flow(function* (showError, can_have_mlt_account, can_have_mx_account) {
-    const get_settings = yield WS.wait('get_settings');
-    const residence_list = yield WS.residenceList();
-
-    const clients_country_code = get_settings.get_settings.country_code;
-    const clients_country_text = (
-        residence_list.residence_list.find(obj_country => obj_country.value === clients_country_code) || {}
-    ).text;
-
-    let header;
-
-    if (can_have_mlt_account) {
-        header = localize("Unfortunately, trading options isn't possible in your country");
-    } else if (clients_country_text || can_have_mx_account) {
-        header = localize('Sorry, trading is unavailable in {{clients_country}}.', {
-            clients_country: clients_country_text,
-        });
-    } else {
-        header = localize('Sorry, trading is unavailable in your current location.');
-    }
-
-    showError({
-        message: ' ',
-        header,
-        redirect_label: null,
-        redirectOnClick: () => ({}),
-        should_show_refresh: false,
-    });
-});
-
-export const isMarketClosed = (active_symbols = [], symbol) => {
-    if (!active_symbols.length) return false;
-    return active_symbols.filter(x => x.symbol === symbol)[0]
-        ? !active_symbols.filter(symbol_info => symbol_info.symbol === symbol)[0].exchange_is_open
-        : false;
-};
-
-export const pickDefaultSymbol = async (active_symbols = []) => {
-    if (!active_symbols.length) return '';
-    const fav_open_symbol = await getFavoriteOpenSymbol(active_symbols);
-    if (fav_open_symbol) return fav_open_symbol;
-    const default_open_symbol = await getDefaultOpenSymbol(active_symbols);
-    return default_open_symbol;
-};
-
-const getFavoriteOpenSymbol = async active_symbols => {
-    try {
-        const chart_favorites = LocalStore.get('cq-favorites');
-        if (!chart_favorites) return undefined;
-        const client_favorite_markets = JSON.parse(chart_favorites)['chartTitle&Comparison'];
-
-        const client_favorite_list = client_favorite_markets.map(client_fav_symbol =>
-            active_symbols.find(symbol_info => symbol_info.symbol === client_fav_symbol)
-        );
-        if (client_favorite_list) {
-            const client_first_open_symbol = client_favorite_list.filter(symbol => symbol).find(isSymbolOpen);
-            if (client_first_open_symbol) {
-                const is_symbol_offered = await isSymbolOffered(client_first_open_symbol);
-                if (is_symbol_offered) return client_first_open_symbol.symbol;
-            }
-        }
-        return undefined;
-    } catch (error) {
-        return undefined;
-    }
-};
-
-const getDefaultOpenSymbol = async active_symbols => {
-    const default_open_symbol =
-        (await findSymbol(active_symbols, '1HZ100V')) ||
-        (await findFirstSymbol(active_symbols, /random_index/)) ||
-        (await findFirstSymbol(active_symbols, /major_pairs/));
-    if (default_open_symbol) return default_open_symbol.symbol;
-    return active_symbols.find(symbol_info => symbol_info.submarket === 'major_pairs').symbol;
-};
-
-const findSymbol = async (active_symbols, symbol) => {
-    const first_symbol = active_symbols.find(symbol_info => symbol_info.symbol === symbol && isSymbolOpen(symbol_info));
-    const is_symbol_offered = await isSymbolOffered(first_symbol);
-    if (is_symbol_offered) return first_symbol;
-    return undefined;
-};
-
-const findFirstSymbol = async (active_symbols, pattern) => {
-    const first_symbol = active_symbols.find(
-        symbol_info => pattern.test(symbol_info.submarket) && isSymbolOpen(symbol_info)
-    );
-    const is_symbol_offered = await isSymbolOffered(first_symbol);
-    if (is_symbol_offered) return first_symbol;
-    return undefined;
-};
-
-export const findFirstOpenMarket = async (active_symbols, markets) => {
-    const market = markets.shift();
-    const first_symbol = active_symbols.find(symbol_info => market === symbol_info.market && isSymbolOpen(symbol_info));
-    const is_symbol_offered = await isSymbolOffered(first_symbol);
-    if (is_symbol_offered) return { category: first_symbol.market, subcategory: first_symbol.submarket };
-    else if (markets.length > 0) return findFirstOpenMarket(active_symbols, markets);
-    return undefined;
-};
-
-const isSymbolOpen = symbol => symbol.exchange_is_open === 1;
-
-const isSymbolOffered = async symbol_info => {
-    const r = await WS.storage.contractsFor(symbol_info?.symbol);
-    return !['InvalidSymbol', 'InputValidationFailed'].includes(r.error?.code);
-};
-
-export const getSymbolDisplayName = (active_symbols = [], symbol) =>
-    (
-        active_symbols.find(symbol_info => symbol_info.symbol.toUpperCase() === symbol.toUpperCase()) || {
-            display_name: '',
-        }
-    ).display_name;
diff --git a/packages/reports/src/Stores/Modules/Trading/Helpers/allow-equals.js b/packages/reports/src/Stores/Modules/Trading/Helpers/allow-equals.js
deleted file mode 100644
index 952def5c31dd..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Helpers/allow-equals.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { localize } from '@deriv/translations';
-import { isEmptyObject, getPropertyValue } from '@deriv/shared';
-import ContractType from './contract-type';
-
-export const hasCallPutEqual = contract_type_list => {
-    if (isEmptyObject(contract_type_list)) return false;
-
-    return (getPropertyValue(contract_type_list, localize('Ups & Downs')) || []).some(
-        contract => contract.value === 'rise_fall_equal'
-    );
-};
-
-export const hasDurationForCallPutEqual = (contract_type_list, duration_unit, contract_start_type) => {
-    if (!contract_type_list || !duration_unit || !contract_start_type) return false;
-
-    const contract_list = Object.keys(contract_type_list || {}).reduce(
-        (key, list) => [...key, ...contract_type_list[list].map(contract => contract.value)],
-        []
-    );
-
-    const contract_duration_list = contract_list.map(list => ({
-        [list]: getPropertyValue(ContractType.getFullContractTypes(), [
-            list,
-            'config',
-            'durations',
-            'units_display',
-            contract_start_type,
-        ]),
-    }));
-
-    // Check whether rise fall equal is exists and has the current store duration unit
-    if (hasCallPutEqual(contract_type_list)) {
-        const found = contract_duration_list.filter(contract => contract && contract.rise_fall_equal);
-        if (found.length > 0) {
-            return found[0].rise_fall_equal.some(duration => duration.value === duration_unit);
-        }
-    }
-
-    return false;
-};
-
-export const isRiseFallEqual = contract_type => /^(rise_fall|rise_fall_equal)$/.test(contract_type);
diff --git a/packages/reports/src/Stores/Modules/Trading/Helpers/barrier.js b/packages/reports/src/Stores/Modules/Trading/Helpers/barrier.js
deleted file mode 100644
index 2dff13e7393f..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Helpers/barrier.js
+++ /dev/null
@@ -1,20 +0,0 @@
-export const buildBarriersConfig = (contract, barriers = { count: contract.barriers }) => {
-    if (!contract.barriers) {
-        return undefined;
-    }
-
-    const obj_barrier = {};
-
-    ['barrier', 'low_barrier', 'high_barrier'].forEach(field => {
-        if (field in contract) obj_barrier[field] = contract[field];
-    });
-
-    return Object.assign(barriers || {}, {
-        [contract.expiry_type]: obj_barrier,
-    });
-};
-
-export const getBarrierPipSize = barrier => {
-    if (Math.floor(barrier) === barrier || barrier.length < 1 || barrier % 1 === 0 || isNaN(barrier)) return 0;
-    return barrier.toString().split('.')[1].length || 0;
-};
diff --git a/packages/reports/src/Stores/Modules/Trading/Helpers/chart.js b/packages/reports/src/Stores/Modules/Trading/Helpers/chart.js
deleted file mode 100644
index 0fa3aa4272d2..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Helpers/chart.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export const setChartBarrier = (SmartChartStore, proposal_response, onBarrierChange, barrier_config) => {
-    const { barrier, barrier2, contract_type } = proposal_response.echo_req;
-    SmartChartStore.createBarriers(contract_type, barrier, barrier2, onBarrierChange, barrier_config);
-};
diff --git a/packages/reports/src/Stores/Modules/Trading/Helpers/contract-type.js b/packages/reports/src/Stores/Modules/Trading/Helpers/contract-type.js
deleted file mode 100644
index cefe35e9ae3c..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Helpers/contract-type.js
+++ /dev/null
@@ -1,603 +0,0 @@
-import {
-    getPropertyValue,
-    cloneObject,
-    isTimeValid,
-    minDate,
-    toMoment,
-    shouldShowCancellation,
-    WS,
-} from '@deriv/shared';
-import ServerTime from '_common/base/server_time';
-import { localize } from '@deriv/translations';
-
-import { getUnitMap } from '../../Portfolio/Helpers/details';
-import { buildBarriersConfig } from './barrier';
-import { buildDurationConfig, hasIntradayDurationUnit } from './duration';
-import { buildForwardStartingConfig, isSessionAvailable } from './start-date';
-import {
-    unsupported_contract_types_list,
-    getContractCategoriesConfig,
-    getContractTypesConfig,
-    getLocalizedBasis,
-} from '../Constants/contract';
-
-const ContractType = (() => {
-    let available_contract_types = {};
-    let available_categories = {};
-    let contract_types;
-    const trading_events = {};
-    const trading_times = {};
-    let has_only_forward_starting_contracts = false;
-
-    const buildContractTypesConfig = symbol =>
-        WS.storage.contractsFor(symbol).then(r => {
-            const has_contracts = getPropertyValue(r, ['contracts_for']);
-            has_only_forward_starting_contracts =
-                has_contracts && !r.contracts_for.available.find(contract => contract.start_type !== 'forward');
-            if (!has_contracts || has_only_forward_starting_contracts) return;
-            const contract_categories = getContractCategoriesConfig();
-            contract_types = getContractTypesConfig(symbol);
-
-            available_contract_types = {};
-            available_categories = cloneObject(contract_categories); // To preserve the order (will clean the extra items later in this function)
-
-            r.contracts_for.available.forEach(contract => {
-                const type = Object.keys(contract_types).find(
-                    key =>
-                        contract_types[key].trade_types.indexOf(contract.contract_type) !== -1 &&
-                        (typeof contract_types[key].barrier_count === 'undefined' ||
-                            +contract_types[key].barrier_count === contract.barriers) // To distinguish betweeen Rise/Fall & Higher/Lower
-                );
-
-                if (!type) return; // ignore unsupported contract types
-
-                /*
-            add to this config if a value you are looking for does not exist yet
-            accordingly create a function to retrieve the value
-            config: {
-                has_spot: 1,
-                durations: {
-                    min_max: {
-                        spot: {
-                            tick    : { min: 5,     max: 10 },    // value in ticks, as cannot convert to seconds
-                            intraday: { min: 18000, max: 86400 }, // all values converted to seconds
-                            daily   : { min: 86400, max: 432000 },
-                        },
-                        forward: {
-                            intraday: { min: 18000, max: 86400 },
-                        },
-                    },
-                    units_display: {
-                        spot: [
-                            { text: 'ticks',   value: 't' },
-                            { text: 'seconds', value: 's' },
-                            { text: 'minutes', value: 'm' },
-                            { text: 'hours',   value: 'h' },
-                            { text: 'days',    value: 'd' },
-                        ],
-                        forward: [
-                            { text: 'days',    value: 'd' },
-                        ],
-                    },
-                },
-                forward_starting_dates: [
-                    { text: 'Mon - 19 Mar, 2018', value: 1517356800, sessions: [{ open: obj_moment, close: obj_moment }] },
-                    { text: 'Tue - 20 Mar, 2018', value: 1517443200, sessions: [{ open: obj_moment, close: obj_moment }] },
-                    { text: 'Wed - 21 Mar, 2018', value: 1517529600, sessions: [{ open: obj_moment, close: obj_moment }] },
-                ],
-                trade_types: {
-                    'CALL': 'Higher',
-                    'PUT' : 'Lower',
-                },
-                barriers: {
-                    count   : 2,
-                    tick    : { high_barrier: '+1.12', low_barrier : '-1.12' },
-                    intraday: { high_barrier: '+2.12', low_barrier : '-2.12' },
-                    daily   : { high_barrier: 1111,    low_barrier : 1093 },
-                },
-            }
-            */
-
-                if (!available_contract_types[type]) {
-                    // extend contract_categories to include what is needed to create the contract list
-                    const sub_cats =
-                        available_categories[
-                            Object.keys(available_categories).find(
-                                key => available_categories[key].indexOf(type) !== -1
-                            )
-                        ];
-
-                    if (!sub_cats) return;
-
-                    sub_cats[sub_cats.indexOf(type)] = { value: type, text: contract_types[type].title };
-
-                    // populate available contract types
-                    available_contract_types[type] = cloneObject(contract_types[type]);
-                }
-                const config = available_contract_types[type].config || {};
-
-                // set config values
-                config.has_spot = config.has_spot || contract.start_type === 'spot';
-                config.durations = !config.hide_duration && buildDurationConfig(contract, config.durations);
-                config.trade_types = buildTradeTypesConfig(contract, config.trade_types);
-                config.barriers = buildBarriersConfig(contract, config.barriers);
-                config.forward_starting_dates = buildForwardStartingConfig(contract, config.forward_starting_dates);
-                config.multiplier_range = contract.multiplier_range;
-                config.cancellation_range = contract.cancellation_range;
-
-                available_contract_types[type].config = config;
-            });
-
-            // cleanup categories
-            Object.keys(available_categories).forEach(key => {
-                available_categories[key] = available_categories[key].filter(item => typeof item === 'object');
-                if (available_categories[key].length === 0) {
-                    delete available_categories[key];
-                }
-            });
-        });
-
-    const buildTradeTypesConfig = (contract, trade_types = {}) => {
-        trade_types[contract.contract_type] = contract.contract_display;
-        return trade_types;
-    };
-
-    const getArrayDefaultValue = (arr_new_values, value) =>
-        arr_new_values.indexOf(value) !== -1 ? value : arr_new_values[0];
-
-    const getContractValues = store => {
-        const {
-            contract_expiry_type,
-            contract_type,
-            basis,
-            duration_unit,
-            expiry_type,
-            multiplier,
-            start_date,
-            cancellation_duration,
-            symbol,
-        } = store;
-
-        if (!contract_type) return {};
-
-        const form_components = getComponents(contract_type);
-        const obj_basis = getBasis(contract_type, basis);
-        const obj_trade_types = getTradeTypes(contract_type);
-        const obj_start_dates = getStartDates(contract_type, start_date);
-        const obj_start_type = getStartType(obj_start_dates.start_date);
-        const obj_barrier = getBarriers(contract_type, contract_expiry_type);
-        const obj_duration_unit = getDurationUnit(duration_unit, contract_type, obj_start_type.contract_start_type);
-
-        const obj_duration_units_list = getDurationUnitsList(contract_type, obj_start_type.contract_start_type);
-        const obj_duration_units_min_max = getDurationMinMax(contract_type, obj_start_type.contract_start_type);
-
-        const obj_multiplier_range_list = getMultiplierRange(contract_type, multiplier);
-        const obj_cancellation = getCancellation(contract_type, cancellation_duration, symbol);
-        const obj_expiry_type = getExpiryType(obj_duration_units_list, expiry_type);
-        const obj_equal = getEqualProps(contract_type);
-
-        return {
-            ...form_components,
-            ...obj_basis,
-            ...obj_trade_types,
-            ...obj_start_dates,
-            ...obj_start_type,
-            ...obj_barrier,
-            ...obj_duration_unit,
-            ...obj_duration_units_list,
-            ...obj_duration_units_min_max,
-            ...obj_expiry_type,
-            ...obj_multiplier_range_list,
-            ...obj_cancellation,
-            ...obj_equal,
-        };
-    };
-
-    const getContractType = (list, contract_type) => {
-        const arr_list = Object.keys(list || {})
-            .reduce((k, l) => [...k, ...list[l].map(ct => ct.value)], [])
-            .filter(type => unsupported_contract_types_list.indexOf(type) === -1)
-            .sort((a, b) => (a === 'multiplier' || b === 'multiplier' ? -1 : 0));
-
-        return {
-            contract_type: getArrayDefaultValue(arr_list, contract_type),
-        };
-    };
-
-    const getComponents = c_type => {
-        return (
-            contract_types && {
-                form_components: ['duration', 'amount', ...contract_types[c_type].components].filter(
-                    component =>
-                        !(
-                            component === 'duration' &&
-                            contract_types[c_type].config &&
-                            contract_types[c_type].config.hide_duration
-                        )
-                ),
-            }
-        );
-    };
-
-    const getDurationUnitsList = (contract_type, contract_start_type) => ({
-        duration_units_list:
-            getPropertyValue(available_contract_types, [
-                contract_type,
-                'config',
-                'durations',
-                'units_display',
-                contract_start_type,
-            ]) || [],
-    });
-
-    const getDurationUnit = (duration_unit, contract_type, contract_start_type) => {
-        const duration_units =
-            getPropertyValue(available_contract_types, [
-                contract_type,
-                'config',
-                'durations',
-                'units_display',
-                contract_start_type,
-            ]) || [];
-        const arr_units = [];
-        duration_units.forEach(obj => {
-            arr_units.push(obj.value);
-        });
-
-        return {
-            duration_unit: getArrayDefaultValue(arr_units, duration_unit),
-        };
-    };
-
-    const getDurationMinMax = (contract_type, contract_start_type, contract_expiry_type) => {
-        let duration_min_max =
-            getPropertyValue(available_contract_types, [
-                contract_type,
-                'config',
-                'durations',
-                'min_max',
-                contract_start_type,
-            ]) || {};
-
-        if (contract_expiry_type) {
-            duration_min_max = duration_min_max[contract_expiry_type] || {};
-        }
-
-        return { duration_min_max };
-    };
-
-    const getFullContractTypes = () => available_contract_types;
-
-    const getStartType = start_date => ({
-        // Number(0) refers to 'now'
-        contract_start_type: start_date === Number(0) ? 'spot' : 'forward',
-    });
-
-    const getStartDates = (contract_type, current_start_date) => {
-        const config = getPropertyValue(available_contract_types, [contract_type, 'config']);
-        const start_dates_list = [];
-
-        if (config?.has_spot) {
-            // Number(0) refers to 'now'
-            start_dates_list.push({ text: localize('Now'), value: Number(0) });
-        }
-        if (config?.forward_starting_dates) {
-            start_dates_list.push(...config.forward_starting_dates);
-        }
-
-        const start_date = start_dates_list.find(item => item.value === current_start_date)
-            ? current_start_date
-            : start_dates_list[0]?.value;
-
-        return { start_date, start_dates_list };
-    };
-
-    const getSessions = (contract_type, start_date) => {
-        const config = getPropertyValue(available_contract_types, [contract_type, 'config']) || {};
-        const sessions = ((config.forward_starting_dates || []).find(option => option.value === start_date) || {})
-            .sessions;
-        return { sessions };
-    };
-
-    const hours = [...Array(24).keys()].map(a => `0${a}`.slice(-2));
-    const minutes = [...Array(12).keys()].map(a => `0${a * 5}`.slice(-2));
-
-    const getValidTime = (sessions, compare_moment, start_moment) => {
-        if (sessions && !isSessionAvailable(sessions, compare_moment)) {
-            // first see if changing the minute brings it to the right session
-            compare_moment.minute(
-                minutes.find(m => isSessionAvailable(sessions, compare_moment.minute(m))) || compare_moment.format('mm')
-            );
-            // if not, also change the hour
-            if (!isSessionAvailable(sessions, compare_moment)) {
-                compare_moment.minute(0);
-                compare_moment.hour(
-                    hours.find(h => isSessionAvailable(sessions, compare_moment.hour(h), start_moment, true)) ||
-                        compare_moment.format('HH')
-                );
-                compare_moment.minute(
-                    minutes.find(m => isSessionAvailable(sessions, compare_moment.minute(m))) ||
-                        compare_moment.format('mm')
-                );
-            }
-        }
-        return compare_moment.format('HH:mm');
-    };
-
-    const buildMoment = (date, time) => {
-        const [hour, minute] = isTimeValid(time) ? time.split(':') : [0, 0];
-        return toMoment(date || ServerTime.get())
-            .hour(hour)
-            .minute(minute);
-    };
-
-    const getStartTime = (sessions, start_date, start_time) => ({
-        start_time: start_date ? getValidTime(sessions, buildMoment(start_date, start_time)) : null,
-    });
-
-    const getTradingEvents = async (date, underlying = null) => {
-        if (!date) {
-            return [];
-        }
-        if (!(date in trading_events)) {
-            const trading_times_response = await WS.tradingTimes(date);
-
-            if (getPropertyValue(trading_times_response, ['trading_times', 'markets'])) {
-                for (let i = 0; i < trading_times_response.trading_times.markets.length; i++) {
-                    const submarkets = trading_times_response.trading_times.markets[i].submarkets;
-                    if (submarkets) {
-                        for (let j = 0; j < submarkets.length; j++) {
-                            const symbols = submarkets[j].symbols;
-                            if (symbols) {
-                                for (let k = 0; k < symbols.length; k++) {
-                                    const symbol = symbols[k];
-                                    if (!trading_events[trading_times_response.echo_req.trading_times]) {
-                                        trading_events[trading_times_response.echo_req.trading_times] = {};
-                                    }
-                                    trading_events[trading_times_response.echo_req.trading_times][symbol.symbol] =
-                                        symbol.events;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        return trading_events[date][underlying];
-    };
-
-    const getTradingTimes = async (date, underlying = null) => {
-        if (!date) {
-            return [];
-        }
-
-        if (!(date in trading_times)) {
-            const trading_times_response = await WS.tradingTimes(date);
-
-            if (getPropertyValue(trading_times_response, ['trading_times', 'markets'])) {
-                for (let i = 0; i < trading_times_response.trading_times.markets.length; i++) {
-                    const submarkets = trading_times_response.trading_times.markets[i].submarkets;
-                    if (submarkets) {
-                        for (let j = 0; j < submarkets.length; j++) {
-                            const symbols = submarkets[j].symbols;
-                            if (symbols) {
-                                for (let k = 0; k < symbols.length; k++) {
-                                    const symbol = symbols[k];
-                                    if (!trading_times[trading_times_response.echo_req.trading_times]) {
-                                        trading_times[trading_times_response.echo_req.trading_times] = {};
-                                    }
-                                    trading_times[trading_times_response.echo_req.trading_times][symbol.symbol] = {
-                                        open: symbol.times.open,
-                                        close: symbol.times.close,
-                                    };
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        return underlying ? trading_times[date][underlying] : trading_times[date];
-    };
-
-    const getExpiryType = (duration_units_list, expiry_type) => {
-        if (duration_units_list) {
-            if (
-                (!expiry_type && duration_units_list.length > 0) ||
-                (duration_units_list.length === 1 && duration_units_list[0].value === 't')
-            ) {
-                return { expiry_type: 'duration' };
-            }
-            if (duration_units_list.length === 0) {
-                return {
-                    expiry_type: null,
-                };
-            }
-        }
-
-        return { expiry_type };
-    };
-
-    const getExpiryDate = (duration_units_list, expiry_date, expiry_type, start_date) => {
-        let proper_expiry_date = null;
-
-        if (expiry_type === 'endtime') {
-            const moment_start = toMoment(start_date);
-            const moment_expiry = toMoment(expiry_date);
-
-            if (!hasIntradayDurationUnit(duration_units_list)) {
-                const is_invalid = moment_expiry.isSameOrBefore(moment_start, 'day');
-                proper_expiry_date = (is_invalid ? moment_start.clone().add(1, 'day') : moment_expiry).format(
-                    'YYYY-MM-DD'
-                );
-            } else {
-                // forward starting contracts should only show today and tomorrow as expiry date
-                const is_invalid =
-                    moment_expiry.isBefore(moment_start, 'day') ||
-                    (start_date && moment_expiry.isAfter(moment_start.clone().add(1, 'day')));
-                proper_expiry_date = (is_invalid ? moment_start : moment_expiry).format('YYYY-MM-DD');
-            }
-        }
-
-        return { expiry_date: proper_expiry_date };
-    };
-
-    // It has to follow the correct order of checks:
-    // first check if end time is within available sessions
-    // then confirm that end time is at least 5 minute after start time
-    const getExpiryTime = (
-        expiry_date,
-        expiry_time,
-        expiry_type,
-        market_close_times,
-        sessions,
-        start_date,
-        start_time
-    ) => {
-        let end_time = null;
-
-        if (expiry_type === 'endtime') {
-            let market_close_time = '23:59:59';
-
-            if (market_close_times && market_close_times.length && market_close_times[0] !== '--') {
-                // Some of underlyings (e.g. Australian Index) have two close time during a day so we always select the further one as the end time of the contract.
-                market_close_time = market_close_times.slice(-1)[0];
-            }
-
-            // For contracts with a duration of more that 24 hours must set the expiry_time to the market's close time on the expiry date.
-            if (!start_date && ServerTime.get().isBefore(buildMoment(expiry_date), 'day')) {
-                end_time = market_close_time;
-            } else {
-                const start_moment = start_date ? buildMoment(start_date, start_time) : ServerTime.get();
-                const end_moment = buildMoment(expiry_date, expiry_time);
-
-                end_time = end_moment.format('HH:mm');
-                // When the contract is forwarding, and the duration is endtime, users can purchase the contract within 24 hours.
-                const expiry_sessions = [
-                    {
-                        open: start_moment.clone().add(5, 'minute'), // expiry time should be at least 5 minute after start_time
-                        close: minDate(
-                            start_moment.clone().add(24, 'hour'),
-                            buildMoment(expiry_date, market_close_time)
-                        ),
-                    },
-                ];
-
-                if (!isSessionAvailable(expiry_sessions, end_moment)) {
-                    end_time = getValidTime(expiry_sessions, end_moment.clone(), start_moment.clone());
-                }
-                if (end_moment.isSameOrBefore(start_moment) || end_moment.diff(start_moment, 'minute') < 5) {
-                    const is_end_of_day = start_moment.get('hours') === 23 && start_moment.get('minute') >= 55;
-                    const is_end_of_session =
-                        sessions && !isSessionAvailable(sessions, start_moment.clone().add(5, 'minutes'));
-                    end_time = start_moment.clone().add(is_end_of_day || is_end_of_session ? 0 : 5, 'minutes');
-                    // Set the end_time to be multiple of 5 to be equal as the SELECTED_TIME that shown to the client.
-                    end_time = setMinuteMultipleByFive(end_time).format('HH:mm');
-                }
-                // Set the expiry_time to 5 minute less than start_time for forwading contracts when the expiry_time is null and the expiry_date is tomorrow.
-                if (end_time === '00:00' && start_moment.isBefore(end_moment, 'day')) {
-                    end_time = start_moment.clone().subtract(5, 'minute').format('HH:mm');
-                }
-            }
-        }
-        return { expiry_time: end_time };
-    };
-
-    const setMinuteMultipleByFive = moment_obj => moment_obj.minute(Math.ceil(moment_obj.minute() / 5) * 5);
-
-    const getTradeTypes = contract_type => ({
-        trade_types: getPropertyValue(available_contract_types, [contract_type, 'config', 'trade_types']),
-    });
-
-    const getBarriers = (contract_type, expiry_type) => {
-        const barriers = getPropertyValue(available_contract_types, [contract_type, 'config', 'barriers']) || {};
-        const barrier_values = barriers[expiry_type] || {};
-        const barrier_1 = barrier_values.barrier || barrier_values.high_barrier || '';
-        const barrier_2 = barrier_values.low_barrier || '';
-        return {
-            barrier_count: barriers.count || 0,
-            barrier_1: barrier_1.toString(),
-            barrier_2: barrier_2.toString(),
-        };
-    };
-
-    const getBasis = (contract_type, basis) => {
-        const arr_basis = getPropertyValue(available_contract_types, [contract_type, 'basis']) || [];
-        const localized_basis = getLocalizedBasis();
-        const basis_list = arr_basis.reduce((cur, bas) => [...cur, { text: localized_basis[bas], value: bas }], []);
-
-        return {
-            basis_list,
-            basis: getArrayDefaultValue(arr_basis, basis),
-        };
-    };
-
-    const getMultiplierRange = (contract_type, multiplier) => {
-        const arr_multiplier =
-            getPropertyValue(available_contract_types, [contract_type, 'config', 'multiplier_range']) || [];
-
-        return {
-            multiplier_range_list: arr_multiplier.map(m => ({ text: `x${m}`, value: m })),
-            multiplier: getArrayDefaultValue(arr_multiplier, multiplier),
-        };
-    };
-
-    const getCancellation = (contract_type, cancellation_duration, symbol) => {
-        const arr_cancellation_range =
-            getPropertyValue(available_contract_types, [contract_type, 'config', 'cancellation_range']) || [];
-
-        const regex = new RegExp('^([0-9]+)|([a-zA-Z]+)$', 'g');
-        const getText = str => {
-            const [duration, unit] = str.match(regex);
-            const unit_map = getUnitMap();
-            return `${duration} ${unit_map[unit].name_plural}`;
-        };
-
-        const should_show_cancellation = shouldShowCancellation(symbol);
-
-        return {
-            cancellation_duration: getArrayDefaultValue(arr_cancellation_range, cancellation_duration),
-            cancellation_range_list: arr_cancellation_range.map(d => ({ text: `${getText(d)}`, value: d })),
-            ...(should_show_cancellation ? {} : { has_cancellation: false }),
-        };
-    };
-
-    const getEqualProps = contract_type => {
-        const base_contract_type = /^(.*)_equal$/.exec(contract_type)?.[1];
-
-        if (base_contract_type && !available_contract_types[base_contract_type]) {
-            return {
-                is_equal: 1,
-                has_equals_only: true,
-            };
-        }
-        return {};
-    };
-
-    return {
-        buildContractTypesConfig,
-        getBarriers,
-        getContractType,
-        getContractValues,
-        getDurationMinMax,
-        getDurationUnit,
-        getDurationUnitsList,
-        getFullContractTypes,
-        getExpiryDate,
-        getExpiryTime,
-        getExpiryType,
-        getSessions,
-        getStartTime,
-        getStartType,
-        getTradingEvents,
-        getTradingTimes,
-        getContractCategories: () => ({
-            contract_types_list: available_categories,
-            has_only_forward_starting_contracts,
-        }),
-    };
-})();
-
-export default ContractType;
diff --git a/packages/reports/src/Stores/Modules/Trading/Helpers/currency.js b/packages/reports/src/Stores/Modules/Trading/Helpers/currency.js
deleted file mode 100644
index a964df5c3b06..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Helpers/currency.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { isCryptocurrency } from '@deriv/shared';
-import { localize } from '@deriv/translations';
-
-export const buildCurrenciesList = payout_currencies => {
-    const fiat = [];
-    const crypto = [];
-
-    payout_currencies.forEach(cur => {
-        const isCrypto = isCryptocurrency(cur);
-        (isCrypto ? crypto : fiat).push({ text: cur, value: cur, has_tooltip: isCrypto });
-    });
-
-    return {
-        [localize('Fiat')]: fiat,
-        [localize('Crypto')]: crypto,
-    };
-};
-
-export const getDefaultCurrency = (currencies_list, currency = '') => {
-    const supported_currencies = Object.values(currencies_list).reduce((a, b) => [...a, ...b]);
-    const default_currency = supported_currencies.find(c => c.value === currency)
-        ? currency
-        : supported_currencies[0].value;
-
-    return {
-        currency: default_currency,
-    };
-};
diff --git a/packages/reports/src/Stores/Modules/Trading/Helpers/duration.js b/packages/reports/src/Stores/Modules/Trading/Helpers/duration.js
deleted file mode 100644
index 6d99dd31c6eb..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Helpers/duration.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import { localize } from '@deriv/translations';
-import { toMoment } from '@deriv/shared';
-
-const getDurationMaps = () => ({
-    t: { display: localize('Ticks'), order: 1 },
-    s: { display: localize('Seconds'), order: 2, to_second: 1 },
-    m: { display: localize('Minutes'), order: 3, to_second: 60 },
-    h: { display: localize('Hours'), order: 4, to_second: 60 * 60 },
-    d: { display: localize('Days'), order: 5, to_second: 60 * 60 * 24 },
-});
-
-export const buildDurationConfig = (contract, durations = { min_max: {}, units_display: {} }) => {
-    durations.min_max[contract.start_type] = durations.min_max[contract.start_type] || {};
-    durations.units_display[contract.start_type] = durations.units_display[contract.start_type] || [];
-
-    const obj_min = getDurationFromString(contract.min_contract_duration);
-    const obj_max = getDurationFromString(contract.max_contract_duration);
-
-    durations.min_max[contract.start_type][contract.expiry_type] = {
-        min: convertDurationUnit(obj_min.duration, obj_min.unit, 's'),
-        max: convertDurationUnit(obj_max.duration, obj_max.unit, 's'),
-    };
-
-    const arr_units = [];
-    durations.units_display[contract.start_type].forEach(obj => {
-        arr_units.push(obj.value);
-    });
-
-    const duration_maps = getDurationMaps();
-
-    if (/^tick|daily$/.test(contract.expiry_type)) {
-        if (arr_units.indexOf(obj_min.unit) === -1) {
-            arr_units.push(obj_min.unit);
-        }
-    } else {
-        Object.keys(duration_maps).forEach(u => {
-            if (
-                u !== 'd' && // when the expiray_type is intraday, the supported units are seconds, minutes and hours.
-                arr_units.indexOf(u) === -1 &&
-                duration_maps[u].order >= duration_maps[obj_min.unit].order &&
-                duration_maps[u].order <= duration_maps[obj_max.unit].order
-            ) {
-                arr_units.push(u);
-            }
-        });
-    }
-
-    durations.units_display[contract.start_type] = arr_units
-        .sort((a, b) => (duration_maps[a].order > duration_maps[b].order ? 1 : -1))
-        .reduce((o, c) => [...o, { text: duration_maps[c].display, value: c }], []);
-
-    return durations;
-};
-
-export const convertDurationUnit = (value, from_unit, to_unit) => {
-    if (!value || !from_unit || !to_unit || isNaN(parseInt(value))) {
-        return null;
-    }
-
-    const duration_maps = getDurationMaps();
-
-    if (from_unit === to_unit || !('to_second' in duration_maps[from_unit])) {
-        return value;
-    }
-
-    return (value * duration_maps[from_unit].to_second) / duration_maps[to_unit].to_second;
-};
-
-const getDurationFromString = duration_string => {
-    const duration = duration_string.toString().match(/[a-zA-Z]+|[0-9]+/g);
-    return {
-        duration: +duration[0], // converts string to numbers
-        unit: duration[1],
-    };
-};
-
-export const getExpiryType = store => {
-    const { duration_unit, expiry_date, expiry_type, duration_units_list } = store;
-    const server_time = store.root_store.common.server_time;
-
-    const duration_is_day = expiry_type === 'duration' && duration_unit === 'd';
-    const expiry_is_after_today =
-        expiry_type === 'endtime' &&
-        (toMoment(expiry_date).isAfter(toMoment(server_time), 'day') || !hasIntradayDurationUnit(duration_units_list));
-
-    let contract_expiry_type = 'daily';
-    if (!duration_is_day && !expiry_is_after_today) {
-        contract_expiry_type = duration_unit === 't' ? 'tick' : 'intraday';
-    }
-
-    return contract_expiry_type;
-};
-
-export const convertDurationLimit = (value, unit) => {
-    if (!(value >= 0) || !unit || !Number.isInteger(value)) {
-        return null;
-    }
-
-    if (unit === 'm') {
-        const minute = value / 60;
-        return minute >= 1 ? Math.floor(minute) : 1;
-    } else if (unit === 'h') {
-        const hour = value / (60 * 60);
-        return hour >= 1 ? Math.floor(hour) : 1;
-    } else if (unit === 'd') {
-        const day = value / (60 * 60 * 24);
-        return day >= 1 ? Math.floor(day) : 1;
-    }
-
-    return value;
-};
-
-export const hasIntradayDurationUnit = duration_units_list =>
-    duration_units_list.some(unit => ['m', 'h'].indexOf(unit.value) !== -1);
-
-/**
- * On switching symbols, end_time value of volatility indices should be set to today
- *
- * @param {String} symbol
- * @param {String} expiry_type
- * @returns {*}
- */
-export const resetEndTimeOnVolatilityIndices = (symbol, expiry_type) =>
-    /^R_/.test(symbol) && expiry_type === 'endtime' ? toMoment(null).format('DD MMM YYYY') : null;
-
-export const getDurationMinMaxValues = (duration_min_max, contract_expiry_type, duration_unit) => {
-    if (!duration_min_max[contract_expiry_type]) return [];
-    const max_value = convertDurationLimit(+duration_min_max[contract_expiry_type].max, duration_unit);
-    const min_value = convertDurationLimit(+duration_min_max[contract_expiry_type].min, duration_unit);
-
-    return [min_value, max_value];
-};
diff --git a/packages/reports/src/Stores/Modules/Trading/Helpers/end-time.js b/packages/reports/src/Stores/Modules/Trading/Helpers/end-time.js
deleted file mode 100644
index 9f64b6419bfc..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Helpers/end-time.js
+++ /dev/null
@@ -1,30 +0,0 @@
-const getClosestTime = (time, interval) => time.minute(Math.ceil(time.minute() / interval) * interval);
-
-export const getSelectedTime = (server_time, selected_time, market_open_times, market_close_times) => {
-    for (let i = 0; i < market_open_times.length; i++) {
-        if (selected_time.isAfter(market_open_times[i]) && selected_time.isBefore(market_close_times[i])) {
-            return getClosestTime(selected_time, 5).format('HH:mm');
-        }
-    }
-
-    for (let i = 0; i < market_open_times.length; i++) {
-        if (market_open_times[i].isAfter(server_time)) {
-            return getClosestTime(market_open_times[i], 5).format('HH:mm');
-        }
-    }
-
-    return getClosestTime(server_time, 5).format('HH:mm');
-};
-
-export const getBoundaries = (server_time, market_open_times, market_close_times) => {
-    const boundaries = {
-        start: market_open_times.map(open_time => (server_time.isBefore(open_time) ? open_time.clone() : server_time)),
-        end: market_close_times,
-    };
-
-    if (boundaries.start.length > 0) {
-        boundaries.start[0] = getClosestTime(boundaries.start[0], 5);
-    }
-
-    return boundaries;
-};
diff --git a/packages/reports/src/Stores/Modules/Trading/Helpers/preview-proposal.js b/packages/reports/src/Stores/Modules/Trading/Helpers/preview-proposal.js
deleted file mode 100644
index 3e70008aa87b..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Helpers/preview-proposal.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import debounce from 'lodash.debounce';
-import { isEmptyObject, WS } from '@deriv/shared';
-import { createProposalRequests } from './proposal';
-
-export const requestPreviewProposal = debounce((store, override = {}, onProposalResponse) => {
-    const new_store = { ...store, ...override };
-    const requests = createProposalRequests(new_store);
-    const subscription_map = {};
-
-    const onResponse = response => {
-        if (response.error) return;
-
-        subscription_map[response.subscription.id] = true;
-        onProposalResponse(response);
-    };
-
-    if (!isEmptyObject(requests)) {
-        const proposal_requests = requests;
-
-        Object.keys(proposal_requests).forEach(type => {
-            WS.subscribeProposal(proposal_requests[type], onResponse);
-        });
-    }
-
-    return () => {
-        Object.keys(subscription_map).forEach(id => {
-            WS.forget(id);
-            delete subscription_map[id];
-        });
-    };
-}, 700);
diff --git a/packages/reports/src/Stores/Modules/Trading/Helpers/process.js b/packages/reports/src/Stores/Modules/Trading/Helpers/process.js
deleted file mode 100644
index ed49abd2d559..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Helpers/process.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import ContractTypeHelper from './contract-type';
-import * as ContractType from '../Actions/contract-type';
-import * as Duration from '../Actions/duration';
-import * as StartDate from '../Actions/start-date';
-
-const processInSequence = async (store, functions) => {
-    const snapshot = store.getSnapshot();
-    // To make sure that every function is invoked and affects the snapshot respectively, we have to use for instead of forEach
-    for (let i = 0; i < functions.length; i++) {
-        // Shallow copy with Object.assign is good enough to extend the snapshot with new state
-        // we don't need deep extension here, since each function in functions array composes a property of the store completely
-        Object.assign(snapshot, await functions[i](snapshot)); // eslint-disable-line no-await-in-loop
-    }
-    store.updateStore({
-        ...snapshot,
-    });
-};
-
-export const processTradeParams = async (store, new_state) => {
-    const functions = getMethodsList(store, new_state);
-    await processInSequence(store, functions);
-
-    const duration_functions = getExpiryMethodsList();
-    await processInSequence(store, duration_functions);
-
-    store.updateStore({
-        is_trade_enabled: true,
-    });
-};
-
-const getMethodsList = (store, new_state) => [
-    ContractTypeHelper.getContractCategories,
-    ContractType.onChangeContractTypeList,
-    ...(/\b(symbol|contract_type)\b/.test(Object.keys(new_state)) || !store.contract_type // symbol/contract_type changed or contract_type not set yet
-        ? [ContractType.onChangeContractType]
-        : []),
-    StartDate.onChangeStartDate,
-    Duration.onChangeExpiry, // it should be always after StartDate.onChangeStartDate
-    ...(/\b(symbol|contract_type)\b/.test(Object.keys(new_state)) || !store.contract_type // symbol/contract_type changed or contract_type not set yet
-        ? [Duration.onChangeContractType]
-        : []),
-];
-
-const getExpiryMethodsList = () => [StartDate.onChangeExpiry];
diff --git a/packages/reports/src/Stores/Modules/Trading/Helpers/proposal.js b/packages/reports/src/Stores/Modules/Trading/Helpers/proposal.js
deleted file mode 100644
index 76cb73419eef..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Helpers/proposal.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import { getDecimalPlaces, getPropertyValue, convertToUnix, toMoment } from '@deriv/shared';
-
-const isVisible = elem => !(!elem || (elem.offsetWidth === 0 && elem.offsetHeight === 0));
-
-const map_error_field = {
-    barrier: 'barrier_1',
-    barrier2: 'barrier_2',
-    date_expiry: 'expiry_date',
-};
-
-export const getProposalErrorField = response => {
-    const error_field = getPropertyValue(response, ['error', 'details', 'field']);
-    if (!error_field) {
-        return null;
-    }
-    const error_id = map_error_field[error_field] || error_field;
-    const el_error = document.getElementsByName(error_id)[0];
-    return el_error && isVisible(el_error) ? error_id : null;
-};
-
-export const getProposalInfo = (store, response, obj_prev_contract_basis) => {
-    const proposal = response.proposal || {};
-    const profit = proposal.payout - proposal.ask_price || 0;
-    const returns = (profit * 100) / (proposal.ask_price || 1);
-    const stake = proposal.display_value;
-    const basis_list = store.basis_list;
-
-    const contract_basis = basis_list.find(o => o.value !== store.basis) || {};
-    const is_stake = contract_basis.text === 'Stake';
-    const price = is_stake ? stake : proposal[contract_basis.value];
-    let has_increased = price > obj_prev_contract_basis.value;
-
-    if (!obj_prev_contract_basis.value || price === obj_prev_contract_basis.value) {
-        has_increased = null;
-    }
-
-    const obj_contract_basis = {
-        text: contract_basis.text || '',
-        value: price || '',
-    };
-
-    const commission = proposal.commission;
-    const cancellation = proposal.cancellation;
-
-    return {
-        commission,
-        cancellation,
-        id: proposal.id || '',
-        has_error: !!response.error,
-        has_error_details: !!getProposalErrorField(response),
-        error_code: response?.error?.code,
-        error_field: response?.error?.details?.field,
-        has_increased,
-        limit_order: proposal.limit_order,
-        message: proposal.longcode || response.error.message,
-        obj_contract_basis,
-        payout: proposal.payout,
-        profit: profit.toFixed(getDecimalPlaces(store.currency)),
-        returns: `${returns.toFixed(2)}%`,
-        stake,
-    };
-};
-
-export const createProposalRequests = store => {
-    const requests = {};
-
-    Object.keys(store.trade_types).forEach(type => {
-        const new_req = createProposalRequestForContract(store, type);
-        requests[type] = new_req;
-    });
-
-    return requests;
-};
-
-const setProposalMultiplier = (store, obj_multiplier) => {
-    obj_multiplier.multiplier = store.multiplier;
-    obj_multiplier.cancellation = store.has_cancellation ? store.cancellation_duration : undefined;
-
-    obj_multiplier.limit_order = store.has_take_profit || store.has_stop_loss ? {} : undefined;
-
-    if (store.has_take_profit && store.take_profit) {
-        obj_multiplier.limit_order.take_profit = +store.take_profit || 0; // send positive take_profit to API
-    }
-
-    if (store.has_stop_loss && store.stop_loss) {
-        obj_multiplier.limit_order.stop_loss = +store.stop_loss || 0; // send positive stop_loss to API
-    }
-};
-
-const createProposalRequestForContract = (store, type_of_contract) => {
-    const obj_expiry = {};
-    const obj_multiplier = {};
-
-    if (store.expiry_type === 'endtime') {
-        const expiry_date = toMoment(store.expiry_date);
-        obj_expiry.date_expiry = convertToUnix(expiry_date.unix(), store.expiry_time);
-    }
-
-    if (store.contract_type === 'multiplier') {
-        setProposalMultiplier(store, obj_multiplier);
-    }
-
-    return {
-        proposal: 1,
-        subscribe: 1,
-        amount: parseFloat(store.amount) || 0,
-        basis: store.basis,
-        contract_type: type_of_contract,
-        currency: store.currency,
-        symbol: store.symbol,
-        ...(store.start_date && { date_start: convertToUnix(store.start_date, store.start_time) }),
-        ...(store.expiry_type === 'duration'
-            ? {
-                  duration: parseInt(store.duration),
-                  duration_unit: store.duration_unit,
-              }
-            : obj_expiry),
-        ...((store.barrier_count > 0 || store.form_components.indexOf('last_digit') !== -1) && {
-            barrier: store.barrier_1 || store.last_digit,
-        }),
-        ...(store.barrier_count === 2 && { barrier2: store.barrier_2 }),
-        ...obj_multiplier,
-    };
-};
diff --git a/packages/reports/src/Stores/Modules/Trading/Helpers/start-date.js b/packages/reports/src/Stores/Modules/Trading/Helpers/start-date.js
deleted file mode 100644
index 010e86ae6daf..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/Helpers/start-date.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import ServerTime from '_common/base/server_time';
-import { toMoment } from '@deriv/shared';
-
-export const buildForwardStartingConfig = (contract, forward_starting_dates) => {
-    const forward_starting_config = [];
-
-    if ((contract.forward_starting_options || []).length) {
-        contract.forward_starting_options.forEach(option => {
-            const duplicated_option = forward_starting_config.find(opt => opt.value === parseInt(option.date));
-            const current_session = { open: toMoment(option.open), close: toMoment(option.close) };
-            if (duplicated_option) {
-                duplicated_option.sessions.push(current_session);
-            } else {
-                forward_starting_config.push({
-                    text: toMoment(option.date).format('ddd - DD MMM, YYYY'),
-                    value: parseInt(option.date),
-                    sessions: [current_session],
-                });
-            }
-        });
-    }
-
-    return forward_starting_config.length ? forward_starting_config : forward_starting_dates;
-};
-
-// returns false if same as now
-const isBeforeDate = (compare_moment, start_moment, should_only_check_hour) => {
-    const now_moment = toMoment(start_moment);
-    if (should_only_check_hour) {
-        now_moment.minute(0).second(0);
-    }
-    return compare_moment.isBefore(now_moment) && now_moment.unix() !== compare_moment.unix();
-};
-
-export const isSessionAvailable = (
-    sessions = [],
-    compare_moment = toMoment(ServerTime.get()),
-    start_moment = toMoment(ServerTime.get()),
-    should_only_check_hour = false
-) =>
-    !isBeforeDate(compare_moment, ServerTime.get(), should_only_check_hour) &&
-    !isBeforeDate(compare_moment, start_moment, should_only_check_hour) &&
-    (!sessions.length ||
-        !!sessions.find(session =>
-            compare_moment.isBetween(session.open, session.close, should_only_check_hour ? 'hour' : null, '[]')
-        ));
diff --git a/packages/reports/src/Stores/Modules/Trading/trade-store.js b/packages/reports/src/Stores/Modules/Trading/trade-store.js
deleted file mode 100644
index 74875429d1a8..000000000000
--- a/packages/reports/src/Stores/Modules/Trading/trade-store.js
+++ /dev/null
@@ -1,1289 +0,0 @@
-import debounce from 'lodash.debounce';
-import { action, computed, observable, reaction, runInAction, toJS, when } from 'mobx';
-import {
-    cloneObject,
-    extractInfoFromShortcode,
-    getMinPayout,
-    getPropertyValue,
-    isCryptocurrency,
-    isDesktop,
-    isEmptyObject,
-    isMobile,
-    showDigitalOptionsUnavailableError,
-    WS,
-} from '@deriv/shared';
-import { localize } from '@deriv/translations';
-import { isDigitContractType, isDigitTradeType } from '../../../Helpers/digits';
-
-import ServerTime from '_common/base/server_time';
-
-import { processPurchase } from './Actions/purchase';
-import * as Symbol from './Actions/symbol';
-import getValidationRules, { getMultiplierValidationRules } from './Constants/validation-rules';
-import {
-    pickDefaultSymbol,
-    showUnavailableLocationError,
-    isMarketClosed,
-    findFirstOpenMarket,
-    showMxMltUnavailableError,
-} from './Helpers/active-symbols';
-import ContractType from './Helpers/contract-type';
-import { convertDurationLimit, resetEndTimeOnVolatilityIndices } from './Helpers/duration';
-import { processTradeParams } from './Helpers/process';
-import { createProposalRequests, getProposalErrorField, getProposalInfo } from './Helpers/proposal';
-import { getBarrierPipSize } from './Helpers/barrier';
-import { setLimitOrderBarriers } from '../Contract/Helpers/limit-orders';
-import { ChartBarrierStore } from '../SmartChart/chart-barrier-store';
-import { BARRIER_COLORS } from '../SmartChart/Constants/barriers';
-import { isBarrierSupported, removeBarrier } from '../SmartChart/Helpers/barriers';
-import BaseStore from 'Stores/base-store';
-
-const store_name = 'trade_store';
-const g_subscribers_map = {}; // blame amin.m
-
-export default class TradeStore extends BaseStore {
-    // Control values
-    @observable is_trade_component_mounted = false;
-    @observable is_purchase_enabled = false;
-    @observable is_trade_enabled = false;
-    @observable is_equal = 0;
-    @observable has_equals_only = false;
-
-    // Underlying
-    @observable symbol;
-    @observable is_market_closed = false;
-    @observable previous_symbol = '';
-    @observable active_symbols = [];
-
-    @observable form_components = [];
-
-    // Contract Type
-    @observable contract_expiry_type = '';
-    @observable contract_start_type = '';
-    @observable contract_type = '';
-    @observable contract_types_list = {};
-    @observable trade_types = {};
-
-    // Amount
-    @observable amount = 10;
-    @observable basis = '';
-    @observable basis_list = [];
-    @observable currency = '';
-
-    // Duration
-    @observable duration = 5;
-    @observable duration_unit = '';
-    @observable duration_units_list = [];
-    @observable duration_min_max = {};
-    @observable expiry_date = '';
-    @observable expiry_time = '';
-    @observable expiry_type = 'duration';
-
-    // Barrier
-    @observable barrier_1 = '';
-    @observable barrier_2 = '';
-    @observable barrier_count = 0;
-    @observable main_barrier = null;
-    @observable barriers = [];
-
-    // Start Time
-    @observable start_date = Number(0); // Number(0) refers to 'now'
-    @observable start_dates_list = [];
-    @observable start_time = null;
-    @observable sessions = [];
-
-    @observable market_open_times = [];
-    // End Date Time
-    /**
-     * An array that contains market closing time.
-     *
-     * e.g. ["04:00:00", "08:00:00"]
-     *
-     */
-    @observable market_close_times = [];
-
-    // Last Digit
-    @observable last_digit = 5;
-    @observable is_mobile_digit_view_selected = false;
-
-    // Purchase
-    @observable.ref proposal_info = {};
-    @observable.ref purchase_info = {};
-
-    // Chart loader observables
-    @observable is_chart_loading;
-    @observable should_show_active_symbols_loading = false;
-
-    // Multiplier trade params
-    @observable multiplier;
-    @observable multiplier_range_list = [];
-    @observable stop_loss;
-    @observable take_profit;
-    @observable has_stop_loss = false;
-    @observable has_take_profit = false;
-    @observable has_cancellation = false;
-    @observable commission;
-    @observable cancellation_price;
-    @observable stop_out;
-    @observable expiration;
-    @observable hovered_contract_type;
-    @observable cancellation_duration = '60m';
-    @observable cancellation_range_list = [];
-
-    // Mobile
-    @observable is_trade_params_expanded = true;
-
-    addTickByProposal = () => null;
-    debouncedProposal = debounce(this.requestProposal, 500);
-    proposal_requests = {};
-    is_purchasing_contract = false;
-
-    initial_barriers;
-    is_initial_barrier_applied = false;
-
-    @observable should_skip_prepost_lifecycle = false;
-
-    constructor({ root_store }) {
-        const local_storage_properties = [
-            'amount',
-            'currency',
-            'barrier_1',
-            'barrier_2',
-            'basis',
-            'contract_start_type',
-            'contract_type',
-            'duration',
-            'duration_unit',
-            'expiry_date',
-            'expiry_type',
-            'has_take_profit',
-            'has_stop_loss',
-            'has_cancellation',
-            'is_equal',
-            'last_digit',
-            'multiplier',
-            'start_date',
-            'start_time',
-            'symbol',
-            'stop_loss',
-            'take_profit',
-            'is_trade_params_expanded',
-        ];
-        super({
-            root_store,
-            local_storage_properties,
-            store_name,
-            validation_rules: getValidationRules(),
-        });
-
-        // Adds intercept to change min_max value of duration validation
-        reaction(
-            () => [this.contract_expiry_type, this.duration_min_max, this.duration_unit, this.expiry_type],
-            () => {
-                this.changeDurationValidationRules();
-            }
-        );
-        reaction(
-            () => this.is_equal,
-            () => {
-                this.onAllowEqualsChange();
-            }
-        );
-        reaction(
-            () => this.symbol,
-            () => {
-                const date = resetEndTimeOnVolatilityIndices(this.symbol, this.expiry_type);
-                if (date) {
-                    this.expiry_date = date;
-                }
-            }
-        );
-        reaction(
-            () => this.duration_unit,
-            () => {
-                this.contract_expiry_type = this.duration_unit === 't' ? 'tick' : 'intraday';
-            }
-        );
-        reaction(
-            () => [this.has_stop_loss, this.has_take_profit],
-            () => {
-                if (!this.has_stop_loss) {
-                    this.validation_errors.stop_loss = [];
-                }
-                if (!this.has_take_profit) {
-                    this.validation_errors.take_profit = [];
-                }
-            }
-        );
-        reaction(
-            () => [this.contract_type],
-            () => {
-                if (this.contract_type === 'multiplier') {
-                    // when switching back to Multiplier contract, re-apply Stop loss / Take profit validation rules
-                    Object.assign(this.validation_rules, getMultiplierValidationRules());
-                } else {
-                    // we need to remove these two validation rules on contract_type change
-                    // to be able to remove any existing Stop loss / Take profit validation errors
-                    delete this.validation_rules.stop_loss;
-                    delete this.validation_rules.take_profit;
-                }
-            }
-        );
-    }
-
-    @computed
-    get is_symbol_in_active_symbols() {
-        return this.active_symbols.some(
-            symbol_info => symbol_info.symbol === this.symbol && symbol_info.exchange_is_open === 1
-        );
-    }
-
-    @action.bound
-    setSkipPrePostLifecycle(should_skip) {
-        if (!!should_skip !== !!this.should_skip_prepost_lifecycle) {
-            // to skip assignment if no change is made
-            this.should_skip_prepost_lifecycle = should_skip;
-        }
-    }
-
-    @action.bound
-    setTradeStatus(status) {
-        this.is_trade_enabled = status;
-    }
-
-    @action.bound
-    refresh() {
-        this.forgetAllProposal();
-        this.proposal_info = {};
-        this.purchase_info = {};
-        this.proposal_requests = {};
-    }
-
-    @action.bound
-    clearContracts = () => {
-        this.root_store.contract_trade.contracts = [];
-    };
-
-    @action.bound
-    async loadActiveSymbols(should_set_default_symbol = true, should_show_loading = true) {
-        this.should_show_active_symbols_loading = should_show_loading;
-
-        await this.setActiveSymbols();
-        await this.root_store.active_symbols.setActiveSymbols();
-        if (should_set_default_symbol) await this.setDefaultSymbol();
-
-        const r = await WS.storage.contractsFor(this.symbol);
-        if (['InvalidSymbol', 'InputValidationFailed'].includes(r.error?.code)) {
-            const symbol_to_update = await pickDefaultSymbol(this.active_symbols);
-            await this.processNewValuesAsync({ symbol: symbol_to_update });
-        }
-
-        runInAction(() => {
-            this.should_show_active_symbols_loading = false;
-        });
-    }
-
-    @action.bound
-    async setDefaultSymbol() {
-        if (!this.is_symbol_in_active_symbols) {
-            this.is_trade_enabled = false;
-
-            const symbol = await pickDefaultSymbol(this.active_symbols);
-            await this.processNewValuesAsync({ symbol });
-        }
-    }
-
-    @action.bound
-    async setActiveSymbols() {
-        const is_on_mf_account = this.root_store.client.landing_company_shortcode === 'maltainvest';
-        const hide_close_mx_mlt_storage_flag = !!parseInt(
-            localStorage.getItem('hide_close_mx_mlt_account_notification')
-        );
-        const is_logged_in = this.root_store.client.is_logged_in;
-        const clients_country = this.root_store.client.clients_country;
-        const showError = this.root_store.common.showError;
-        const setError = this.root_store.common.setError;
-
-        // To resolve infinite load for Belgium and Isle of man logout IPs
-        if (['be', 'im'].includes(clients_country) && !is_logged_in) {
-            showUnavailableLocationError(showError, is_logged_in);
-        }
-
-        const { active_symbols, error } = await WS.authorized.activeSymbols();
-
-        if (error) {
-            showError({ message: localize('Trading is unavailable at this time.') });
-            return;
-        }
-
-        if (!active_symbols || !active_symbols.length) {
-            await WS.wait('get_settings');
-            /*
-             * This logic is related to EU country checks
-             * Avoid moving this upward in the scope since mobx will lose reactivity
-             */
-            const can_have_mx_account = this.root_store.client.can_have_mx_account;
-            const can_have_mlt_account = this.root_store.client.can_have_mlt_account;
-            const can_have_mlt_or_mx_account = can_have_mlt_account || can_have_mx_account;
-
-            if (can_have_mlt_or_mx_account && is_logged_in && !hide_close_mx_mlt_storage_flag) {
-                setError(true, {
-                    type: 'mx_mlt_removal',
-                });
-            } else if (is_logged_in && hide_close_mx_mlt_storage_flag) {
-                showMxMltUnavailableError(showError, can_have_mlt_account, can_have_mx_account);
-            } else if (!is_on_mf_account) {
-                if (!hide_close_mx_mlt_storage_flag) {
-                    setError(true, {
-                        type: 'mx_mlt_removal',
-                    });
-                } else {
-                    showUnavailableLocationError(showError, is_logged_in);
-                }
-                return;
-            } else if (is_on_mf_account) {
-                showDigitalOptionsUnavailableError(showError, {
-                    text: localize(
-                        'We’re working to have this available for you soon. If you have another account, switch to that account to continue trading. You may add a DMT5 Financial.'
-                    ),
-                    title: localize('DTrader is not available for this account'),
-                    link: localize('Go to DMT5 dashboard'),
-                });
-                return;
-            }
-        }
-        await this.processNewValuesAsync({ active_symbols });
-    }
-
-    @action.bound
-    async setContractTypes() {
-        if (this.symbol && this.is_symbol_in_active_symbols) {
-            await Symbol.onChangeSymbolAsync(this.symbol);
-            runInAction(() => {
-                const contract_categories = ContractType.getContractCategories();
-                this.processNewValuesAsync({
-                    ...contract_categories,
-                    ...ContractType.getContractType(contract_categories.contract_types_list, this.contract_type),
-                });
-                this.processNewValuesAsync(ContractType.getContractValues(this));
-            });
-        }
-        this.root_store.common.setSelectedContractType(this.contract_type);
-    }
-
-    @action.bound
-    async prepareTradeStore(should_set_default_symbol = true) {
-        this.initial_barriers = { barrier_1: this.barrier_1, barrier_2: this.barrier_2 };
-        await when(() => !this.root_store.client.is_populating_account_list);
-
-        // waits for `website_status` in order to set `stake_default` for the selected currency
-        await WS.wait('website_status');
-        await runInAction(async () => {
-            await this.processNewValuesAsync(
-                {
-                    // fallback to default currency if current logged-in client hasn't selected a currency yet
-                    currency: this.root_store.client.currency || this.root_store.client.default_currency,
-                },
-                true,
-                null,
-                false
-            );
-        });
-
-        await this.loadActiveSymbols(should_set_default_symbol);
-        await this.setContractTypes();
-        await this.processNewValuesAsync(
-            {
-                is_market_closed: isMarketClosed(this.active_symbols, this.symbol),
-            },
-            true,
-            null,
-            false
-        );
-    }
-
-    @action.bound
-    async onChangeMultiple(values) {
-        Object.keys(values).forEach(name => {
-            if (!(name in this)) {
-                throw new Error(`Invalid Argument: ${name}`);
-            }
-        });
-
-        await this.processNewValuesAsync({ ...values }, true); // wait for store to be updated
-        this.validateAllProperties(); // then run validation before sending proposal
-    }
-
-    @action.bound
-    async onChange(e) {
-        const { name, value } = e.target;
-
-        if (name === 'symbol' && value) {
-            // set trade params skeleton and chart loader to true until processNewValuesAsync resolves
-            this.setChartStatus(true);
-            // reset market close status
-            this.setMarketStatus(false);
-            this.is_trade_enabled = false;
-            // this.root_store.modules.contract_trade.contracts = [];
-            // TODO: Clear the contracts in contract-trade-store
-        } else if (name === 'currency') {
-            // Only allow the currency dropdown change if client is not logged in
-            if (!this.root_store.client.is_logged_in) {
-                this.root_store.client.selectCurrency(value);
-            }
-        } else if (name === 'expiry_date') {
-            this.expiry_time = null;
-        } else if (!(name in this)) {
-            throw new Error(`Invalid Argument: ${name}`);
-        }
-
-        await this.processNewValuesAsync(
-            { [name]: value },
-            true,
-            name === 'contract_type' ? { contract_type: this.contract_type } : {}, // refer to [Multiplier validation rules] below
-            true
-        ); // wait for store to be updated
-        this.validateAllProperties(); // then run validation before sending proposal
-        this.root_store.common.setSelectedContractType(this.contract_type);
-    }
-
-    @action.bound
-    setPreviousSymbol(symbol) {
-        if (this.previous_symbol !== symbol) this.previous_symbol = symbol;
-    }
-
-    @action.bound
-    setAllowEqual(is_equal) {
-        this.is_equal = is_equal;
-    }
-
-    @action.bound
-    setIsTradeParamsExpanded(value) {
-        this.is_trade_params_expanded = value;
-    }
-
-    @action.bound
-    async resetPreviousSymbol() {
-        this.setMarketStatus(isMarketClosed(this.active_symbols, this.previous_symbol));
-
-        await Symbol.onChangeSymbolAsync(this.previous_symbol);
-        await this.updateSymbol(this.symbol);
-
-        this.setChartStatus(false);
-        runInAction(() => {
-            this.previous_symbol = ''; // reset the symbol to default
-        });
-    }
-
-    @action.bound
-    updateBarrierColor(is_dark_mode) {
-        if (this.main_barrier) {
-            this.main_barrier.updateBarrierColor(is_dark_mode);
-        }
-    }
-
-    @action.bound
-    onHoverPurchase(is_over, contract_type) {
-        if (this.is_purchase_enabled && this.main_barrier && !this.is_multiplier) {
-            this.main_barrier.updateBarrierShade(is_over, contract_type);
-        } else if (!is_over && this.main_barrier && !this.is_multiplier) {
-            this.main_barrier.updateBarrierShade(false, contract_type);
-        }
-
-        this.hovered_contract_type = is_over ? contract_type : null;
-        setLimitOrderBarriers({
-            barriers: this.barriers,
-            is_over,
-            contract_type,
-            contract_info: this.proposal_info[contract_type],
-        });
-    }
-
-    @action.bound
-    setPurchaseSpotBarrier(is_over, position) {
-        const key = 'PURCHASE_SPOT_BARRIER';
-        if (!is_over) {
-            removeBarrier(this.barriers, key);
-            return;
-        }
-
-        let purchase_spot_barrier = this.barriers.find(b => b.key === key);
-        if (purchase_spot_barrier) {
-            if (purchase_spot_barrier.high !== +position.contract_info.entry_spot) {
-                purchase_spot_barrier.onChange({
-                    high: position.contract_info.entry_spot,
-                });
-            }
-        } else {
-            // const ChartBarrierStore = this.root_store.chart_barrier_store;
-            purchase_spot_barrier = new ChartBarrierStore(position.contract_info.entry_spot);
-            purchase_spot_barrier.key = key;
-            purchase_spot_barrier.draggable = false;
-            purchase_spot_barrier.hideOffscreenBarrier = true;
-            purchase_spot_barrier.isSingleBarrier = true;
-            purchase_spot_barrier.updateBarrierColor(this.root_store.ui.is_dark_mode_on);
-            this.barriers.push(purchase_spot_barrier);
-        }
-    }
-
-    @action.bound
-    updateLimitOrderBarriers(is_over, position) {
-        const contract_info = position.contract_info;
-        const { barriers } = this;
-        setLimitOrderBarriers({
-            barriers,
-            contract_info,
-            contract_type: contract_info.contract_type,
-            is_over,
-        });
-    }
-
-    @action.bound
-    clearLimitOrderBarriers() {
-        this.hovered_contract_type = null;
-        const { barriers } = this;
-        setLimitOrderBarriers({
-            barriers,
-            is_over: false,
-        });
-    }
-
-    @computed
-    get barrier_pipsize() {
-        return getBarrierPipSize(this.barrier_1);
-    }
-
-    @computed
-    get main_barrier_flattened() {
-        const is_digit_trade_type = isDigitTradeType(this.contract_type);
-        return is_digit_trade_type ? null : toJS(this.main_barrier);
-    }
-
-    @computed
-    get barriers_flattened() {
-        return this.barriers && toJS(this.barriers);
-    }
-
-    setMainBarrier = proposal_info => {
-        if (!proposal_info) {
-            return;
-        }
-        const { contract_type, barrier, high_barrier, low_barrier } = proposal_info;
-
-        if (isBarrierSupported(contract_type)) {
-            const color = this.root_store.ui.is_dark_mode_on ? BARRIER_COLORS.DARK_GRAY : BARRIER_COLORS.GRAY;
-            // create barrier only when it's available in response
-            // const ChartBarrierStore = this.root_store.chart_barrier_store;
-            this.main_barrier = new ChartBarrierStore(barrier || high_barrier, low_barrier, this.onChartBarrierChange, {
-                color,
-            });
-            // this.main_barrier.updateBarrierShade(true, contract_type);
-        } else {
-            this.main_barrier = null;
-        }
-    };
-
-    @action.bound
-    onPurchase = debounce(this.processPurchase, 300);
-
-    @action.bound
-    processPurchase(proposal_id, price, type) {
-        if (!this.is_purchase_enabled) return;
-        if (proposal_id) {
-            this.is_purchase_enabled = false;
-            this.is_purchasing_contract = true;
-            const is_tick_contract = this.duration_unit === 't';
-            processPurchase(proposal_id, price).then(
-                action(response => {
-                    if (!this.is_trade_component_mounted) {
-                        this.enablePurchase();
-                        this.is_purchasing_contract = false;
-                        return;
-                    }
-
-                    const last_digit = +this.last_digit;
-                    if (response.error) {
-                        // using javascript to disable purchase-buttons manually to compensate for mobx lag
-                        this.disablePurchaseButtons();
-                        // invalidToken error will handle in socket-general.js
-                        if (response.error.code !== 'InvalidToken') {
-                            this.root_store.common.setServicesError({
-                                type: response.msg_type,
-                                ...response.error,
-                            });
-
-                            // Clear purchase info on mobile after toast box error disappears (mobile_toast_timeout = 3500)
-                            if (isMobile() && this.root_store.common?.services_error?.type === 'buy') {
-                                setTimeout(() => {
-                                    this.clearPurchaseInfo();
-                                    this.requestProposal();
-                                }, 3500);
-                            }
-                        }
-                    } else if (response.buy) {
-                        if (this.proposal_info[type] && this.proposal_info[type].id !== proposal_id) {
-                            throw new Error('Proposal ID does not match.');
-                        }
-                        const contract_data = {
-                            ...this.proposal_requests[type],
-                            ...this.proposal_info[type],
-                            buy_price: response.buy.buy_price,
-                        };
-                        const { contract_id, longcode, start_time } = response.buy;
-
-                        // toggle smartcharts to contract mode
-                        if (contract_id) {
-                            const shortcode = response.buy.shortcode;
-                            const { category, underlying } = extractInfoFromShortcode(shortcode);
-                            const is_digit_contract = isDigitContractType(category.toUpperCase());
-                            const contract_type = category.toUpperCase();
-                            this.root_store.contract_trade.addContract({
-                                contract_id,
-                                start_time,
-                                longcode,
-                                underlying,
-                                barrier: is_digit_contract ? last_digit : null,
-                                contract_type,
-                                is_tick_contract,
-                            });
-                            this.root_store.portfolio.onBuyResponse({
-                                contract_id,
-                                longcode,
-                                contract_type,
-                            });
-                            // NOTE: changing chart granularity and chart_type has to be done in a different render cycle
-                            // so we have to set chart granularity to zero, and change the chart_type to 'mountain' first,
-                            // and then set the chart view to the start_time
-                            // draw the start time line and show longcode then mount contract
-                            // this.root_store.modules.contract_trade.drawContractStartTime(start_time, longcode, contract_id);
-                            if (isDesktop()) {
-                                this.root_store.ui.openPositionsDrawer();
-                            } else if (isMobile()) {
-                                // TODO: Remove this when markers for multipliers are enabled
-                                if (this.is_multiplier) {
-                                    this.root_store.ui.openPositionsDrawer();
-                                }
-                            }
-                            this.proposal_info = {};
-                            this.forgetAllProposal();
-                            this.purchase_info = response;
-                            this.proposal_requests = {};
-                            this.debouncedProposal();
-                            this.clearLimitOrderBarriers();
-                            this.pushPurchaseDataToGtm(contract_data);
-                            this.is_purchasing_contract = false;
-                            return;
-                        }
-                    }
-                    this.forgetAllProposal();
-                    this.purchase_info = response;
-                    this.enablePurchase();
-                    this.is_purchasing_contract = false;
-                })
-            );
-        }
-    }
-
-    @action.bound
-    enablePurchase() {
-        if (!this.root_store.client.is_unwelcome) {
-            this.is_purchase_enabled = true;
-        }
-    }
-
-    disablePurchaseButtons = () => {
-        const el_purchase_value = document.getElementsByClassName('trade-container__price-info');
-        const el_purchase_buttons = document.getElementsByClassName('btn-purchase');
-        [].forEach.bind(el_purchase_buttons, el => {
-            el.classList.add('btn-purchase--disabled');
-        })();
-        [].forEach.bind(el_purchase_value, el => {
-            el.classList.add('trade-container__price-info--fade');
-        })();
-    };
-
-    /**
-     * Updates the store with new values
-     * @param  {Object} new_state - new values to update the store with
-     * @return {Object} returns the object having only those values that are updated
-     */
-    @action.bound
-    updateStore(new_state) {
-        Object.keys(cloneObject(new_state) || {}).forEach(key => {
-            if (key === 'root_store' || ['validation_rules', 'validation_errors', 'currency'].indexOf(key) > -1) return;
-            if (JSON.stringify(this[key]) === JSON.stringify(new_state[key])) {
-                delete new_state[key];
-            } else {
-                if (key === 'symbol') {
-                    this.is_purchase_enabled = false;
-                    this.is_trade_enabled = false;
-                }
-
-                if (new_state.start_date && typeof new_state.start_date === 'string') {
-                    new_state.start_date = parseInt(new_state.start_date);
-                }
-
-                this[key] = new_state[key];
-
-                // validation is done in mobx intercept (base_store.js)
-                // when barrier_1 is set, it is compared with store.barrier_2 (which is not updated yet)
-                if (key === 'barrier_2' && new_state.barrier_1) {
-                    this.barrier_1 = new_state.barrier_1; // set it again, after barrier_2 is updated in store
-                }
-            }
-        });
-        return new_state;
-    }
-
-    async processNewValuesAsync(
-        obj_new_values = {},
-        is_changed_by_user = false,
-        obj_old_values = {},
-        should_forget_first = true
-    ) {
-        // To switch to rise_fall_equal contract type when allow equal is checked on first page refresh or
-        // when switch back to Rise/Fall from another contract type i.e.
-        if (obj_new_values.contract_type && obj_new_values.contract_type === 'rise_fall' && !!this.is_equal) {
-            obj_new_values.contract_type = 'rise_fall_equal';
-        }
-
-        if (/\bduration\b/.test(Object.keys(obj_new_values))) {
-            // TODO: fix this in input-field.jsx
-            if (typeof obj_new_values.duration === 'string') {
-                obj_new_values.duration = +obj_new_values.duration;
-            }
-        }
-        // Sets the default value to Amount when Currency has changed from Fiat to Crypto and vice versa.
-        // The source of default values is the website_status response.
-        if (should_forget_first) {
-            this.forgetAllProposal();
-            this.proposal_requests = {};
-        }
-        if (is_changed_by_user && /\bcurrency\b/.test(Object.keys(obj_new_values))) {
-            const prev_currency = obj_old_values?.currency || this.currency;
-            const has_currency_changed = obj_new_values.currency !== prev_currency;
-
-            const should_reset_stake =
-                isCryptocurrency(obj_new_values.currency) ||
-                // For switch between fiat and crypto and vice versa
-                isCryptocurrency(obj_new_values.currency) !== isCryptocurrency(prev_currency);
-
-            if (has_currency_changed && should_reset_stake) {
-                obj_new_values.amount = obj_new_values.amount || getMinPayout(obj_new_values.currency);
-            }
-            this.currency = obj_new_values.currency;
-        }
-
-        let has_only_forward_starting_contracts;
-
-        if (Object.keys(obj_new_values).includes('symbol')) {
-            this.setPreviousSymbol(this.symbol);
-            await Symbol.onChangeSymbolAsync(obj_new_values.symbol);
-            this.setMarketStatus(isMarketClosed(this.active_symbols, obj_new_values.symbol));
-            has_only_forward_starting_contracts =
-                ContractType.getContractCategories().has_only_forward_starting_contracts;
-        }
-        // TODO: remove all traces of setHasOnlyForwardingContracts and has_only_forward_starting_contracts in app
-        //  once future contracts are implemented
-        this.root_store.ui.setHasOnlyForwardingContracts(has_only_forward_starting_contracts);
-        if (has_only_forward_starting_contracts) return;
-
-        const new_state = this.updateStore(cloneObject(obj_new_values));
-
-        if (is_changed_by_user || /\b(symbol|contract_types_list)\b/.test(Object.keys(new_state))) {
-            this.updateStore({
-                // disable purchase button(s), clear contract info
-                is_purchase_enabled: false,
-                proposal_info: {},
-            });
-
-            // To prevent infinite loop when changing from advanced end_time to digit type contract
-            if (obj_new_values.contract_type && this.root_store.ui.is_advanced_duration) {
-                if (isDigitTradeType(obj_new_values.contract_type)) {
-                    this.barrier_1 = '';
-                    this.barrier_2 = '';
-                    this.expiry_type = 'duration';
-                    this.root_store.ui.is_advanced_duration = false;
-                }
-            }
-
-            // TODO: handle barrier updates on proposal api
-            // const is_barrier_changed = 'barrier_1' in new_state || 'barrier_2' in new_state;
-            await processTradeParams(this, new_state);
-
-            this.updateStore({
-                ...(!this.is_initial_barrier_applied ? this.initial_barriers : {}),
-            });
-            this.is_initial_barrier_applied = true;
-
-            if (/\bcontract_type\b/.test(Object.keys(new_state))) {
-                this.validateAllProperties();
-            }
-            this.debouncedProposal();
-        }
-    }
-
-    @computed
-    get is_synthetics_available() {
-        return !!this.active_symbols?.find(item => item.market === 'synthetic_index');
-    }
-
-    @computed
-    get show_digits_stats() {
-        return isDigitTradeType(this.contract_type);
-    }
-
-    @action.bound
-    setMobileDigitView(bool) {
-        this.is_mobile_digit_view_selected = bool;
-    }
-
-    @action.bound
-    pushPurchaseDataToGtm(contract_data) {
-        const data = {
-            event: 'buy_contract',
-            bom_ui: 'new',
-            contract: {
-                amount: contract_data.amount,
-                barrier1: contract_data.barrier,
-                barrier2: contract_data.barrier2,
-                basis: contract_data.basis,
-                buy_price: contract_data.buy_price,
-                contract_type: contract_data.contract_type,
-                currency: contract_data.currency,
-                date_expiry: contract_data.date_expiry,
-                date_start: contract_data.date_start,
-                duration: contract_data.duration,
-                duration_unit: contract_data.duration_unit,
-                payout: contract_data.payout,
-                symbol: contract_data.symbol,
-            },
-            settings: {
-                theme: this.root_store.ui.is_dark_mode_on ? 'dark' : 'light',
-                positions_drawer: this.root_store.ui.is_positions_drawer_on ? 'open' : 'closed',
-                chart: {
-                    toolbar_position: this.root_store.ui.is_chart_layout_default ? 'bottom' : 'left',
-                    chart_asset_info: this.root_store.ui.is_chart_asset_info_visible ? 'visible' : 'hidden',
-                    chart_type: this.root_store.contract_trade.chart_type,
-                    granularity: this.root_store.contract_trade.granularity,
-                },
-            },
-        };
-        this.root_store.gtm.pushDataLayer(data);
-    }
-
-    @action.bound
-    clearPurchaseInfo() {
-        this.purchase_info = {};
-        this.proposal_requests = {};
-        this.proposal_info = {};
-    }
-
-    @action.bound
-    requestProposal() {
-        const requests = createProposalRequests(this);
-
-        if (Object.values(this.validation_errors).some(e => e.length)) {
-            this.proposal_info = {};
-            this.purchase_info = {};
-            this.forgetAllProposal();
-            return;
-        }
-
-        if (!isEmptyObject(requests)) {
-            this.proposal_requests = requests;
-            this.purchase_info = {};
-
-            Object.keys(this.proposal_requests).forEach(type => {
-                WS.subscribeProposal(this.proposal_requests[type], this.onProposalResponse);
-            });
-        }
-        this.root_store.ui.resetPurchaseStates();
-    }
-
-    @action.bound
-    forgetAllProposal() {
-        const length = Object.keys(this.proposal_requests).length;
-        if (length > 0) WS.forgetAll('proposal');
-    }
-
-    @action.bound
-    setMarketStatus(status) {
-        this.is_market_closed = status;
-    }
-
-    @action.bound
-    onProposalResponse(response) {
-        const contract_type = response.echo_req.contract_type;
-        const prev_proposal_info = getPropertyValue(this.proposal_info, contract_type) || {};
-        const obj_prev_contract_basis = getPropertyValue(prev_proposal_info, 'obj_contract_basis') || {};
-
-        // add/update expiration or date_expiry for crypto indices from proposal
-        const date_expiry = response.proposal?.date_expiry;
-
-        if (!response.error && !!date_expiry && this.is_crypto_multiplier) {
-            this.expiration = date_expiry;
-        }
-
-        this.proposal_info = {
-            ...this.proposal_info,
-            [contract_type]: getProposalInfo(this, response, obj_prev_contract_basis),
-        };
-
-        if (this.is_multiplier && this.proposal_info && this.proposal_info.MULTUP) {
-            const { commission, cancellation, limit_order } = this.proposal_info.MULTUP;
-            // commission and cancellation.ask_price is the same for MULTUP/MULTDOWN
-            if (commission) {
-                this.commission = commission;
-            }
-            if (cancellation) {
-                this.cancellation_price = cancellation.ask_price;
-            }
-            this.stop_out = limit_order?.stop_out?.order_amount;
-        }
-
-        if (!this.main_barrier || !(this.main_barrier.shade !== 'NONE_SINGLE')) {
-            this.setMainBarrier(response.echo_req);
-        }
-
-        if (this.hovered_contract_type === contract_type) {
-            this.addTickByProposal(response);
-            setLimitOrderBarriers({
-                barriers: this.barriers,
-                contract_info: this.proposal_info[this.hovered_contract_type],
-                contract_type,
-                is_over: true,
-            });
-        }
-
-        if (response.error) {
-            const error_id = getProposalErrorField(response);
-            if (error_id) {
-                this.setValidationErrorMessages(error_id, [response.error.message]);
-            }
-            // Commission for multipliers is normally set from proposal response.
-            // But when we change the multiplier and if it is invalid, we don't get the proposal response to set the commission. We only get error message.
-            // This is a work around to set the commission from error message.
-            if (this.is_multiplier) {
-                const { message, details } = response.error;
-                const commission_match = (message || '').match(/\((\d+\.*\d*)\)/);
-                if (details?.field === 'stop_loss' && commission_match?.[1]) {
-                    this.commission = commission_match[1];
-                }
-            }
-
-            // Sometimes when we navigate fast, `forget_all` proposal is called immediately after proposal subscription calls.
-            // But, in the BE, `forget_all` proposal call is processed before the proposal subscriptions are registered. In this case, `forget_all` proposal doesn't forget the new subscriptions.
-            // So when we send new proposal subscription requests, we get `AlreadySubscribed` error.
-            // If we get an error message with code `AlreadySubscribed`, `forget_all` proposal will be called and all the existing subscriptions will be marked as complete in `deriv-api` and will subscribe to new proposals
-            if (response.error.code === 'AlreadySubscribed') {
-                this.refresh();
-
-                if (this.is_trade_component_mounted) {
-                    this.debouncedProposal();
-                }
-                return;
-            }
-        } else {
-            this.validateAllProperties();
-        }
-
-        if (!this.is_purchasing_contract) {
-            this.enablePurchase();
-        }
-    }
-
-    @action.bound
-    onChartBarrierChange(barrier_1, barrier_2) {
-        this.processNewValuesAsync({ barrier_1, barrier_2 }, true);
-    }
-
-    @action.bound
-    onAllowEqualsChange() {
-        this.processNewValuesAsync({ contract_type: parseInt(this.is_equal) ? 'rise_fall_equal' : 'rise_fall' }, true);
-    }
-
-    @action.bound
-    updateSymbol(underlying) {
-        if (!underlying) return;
-        this.onChange({
-            target: {
-                name: 'symbol',
-                value: underlying,
-            },
-        });
-    }
-
-    @action.bound
-    changeDurationValidationRules() {
-        if (this.expiry_type === 'endtime') {
-            this.validation_errors.duration = [];
-            return;
-        }
-
-        if (!this.validation_rules.duration) return;
-
-        const index = this.validation_rules.duration.rules.findIndex(item => item[0] === 'number');
-        const limits = this.duration_min_max[this.contract_expiry_type] || false;
-
-        if (limits) {
-            const duration_options = {
-                min: convertDurationLimit(+limits.min, this.duration_unit),
-                max: convertDurationLimit(+limits.max, this.duration_unit),
-            };
-
-            if (index > -1) {
-                this.validation_rules.duration.rules[index][1] = duration_options;
-            } else {
-                this.validation_rules.duration.rules.push(['number', duration_options]);
-            }
-            this.validateProperty('duration', this.duration);
-        }
-    }
-
-    @action.bound
-    async accountSwitcherListener() {
-        await this.loadActiveSymbols(true, false);
-
-        this.resetErrorServices();
-        await this.setContractTypes();
-        runInAction(async () => {
-            this.processNewValuesAsync(
-                { currency: this.root_store.client.currency || this.root_store.client.default_currency },
-                true,
-                { currency: this.currency },
-                false
-            );
-        });
-        return Promise.resolve();
-    }
-
-    @action.bound
-    preSwitchAccountListener() {
-        this.clearContracts();
-        this.is_trade_enabled = false;
-        return Promise.resolve();
-    }
-
-    @action.bound
-    async logoutListener() {
-        this.clearContracts();
-        this.refresh();
-        this.resetErrorServices();
-        await this.loadActiveSymbols();
-        await this.setContractTypes();
-        this.debouncedProposal();
-    }
-
-    @action.bound
-    clientInitListener() {
-        this.initAccountCurrency(this.root_store.client.currency || this.root_store.client.default_currency);
-        return Promise.resolve();
-    }
-
-    @action.bound
-    networkStatusChangeListener(is_online) {
-        this.setTradeStatus(is_online);
-    }
-
-    @action.bound
-    themeChangeListener(is_dark_mode_on) {
-        this.updateBarrierColor(is_dark_mode_on);
-    }
-
-    @action.bound
-    resetErrorServices() {
-        this.root_store.ui.toggleServicesErrorModal(false);
-    }
-
-    @action.bound
-    onMount() {
-        if (this.is_trade_component_mounted && this.should_skip_prepost_lifecycle) {
-            return;
-        }
-        this.root_store.notifications.setShouldShowPopups(false);
-        this.onPreSwitchAccount(this.preSwitchAccountListener);
-        this.onSwitchAccount(this.accountSwitcherListener);
-        this.onLogout(this.logoutListener);
-        this.onClientInit(this.clientInitListener);
-        this.onNetworkStatusChange(this.networkStatusChangeListener);
-        this.onThemeChange(this.themeChangeListener);
-        this.setChartStatus(true);
-        runInAction(async () => {
-            this.is_trade_component_mounted = true;
-            await this.prepareTradeStore();
-            this.root_store.notifications.setShouldShowPopups(true);
-        });
-        // TODO: remove this function when the closure of MX and MLT accounts is completed.
-        this.manageMxMltRemovalNotification();
-    }
-
-    @action.bound
-    manageMxMltRemovalNotification() {
-        const { addNotificationMessage, client_notifications, notification_messages, unmarkNotificationMessage } =
-            this.root_store.notifications;
-        const get_notification_messages = JSON.parse(localStorage.getItem('notification_messages'));
-        const { has_iom_account, has_malta_account, is_logged_in } = this.root_store.client;
-        unmarkNotificationMessage({ key: 'close_mx_mlt_account' });
-        if (get_notification_messages !== null && is_logged_in && (has_iom_account || has_malta_account)) {
-            when(
-                () => is_logged_in && notification_messages.length === 0,
-                () => {
-                    const hidden_close_account_notification =
-                        parseInt(localStorage.getItem('hide_close_mx_mlt_account_notification')) === 1;
-                    const should_retain_notification =
-                        (has_iom_account || has_malta_account) && !hidden_close_account_notification;
-                    if (should_retain_notification) {
-                        addNotificationMessage(client_notifications.close_mx_mlt_account);
-                    }
-                }
-            );
-        }
-    }
-
-    @action.bound
-    setChartStatus(status) {
-        this.is_chart_loading = status;
-    }
-
-    @action.bound
-    async initAccountCurrency(new_currency) {
-        if (this.currency === new_currency) return;
-
-        await this.processNewValuesAsync({ currency: new_currency }, true, { currency: this.currency }, false);
-        this.refresh();
-        this.debouncedProposal();
-    }
-
-    @action.bound
-    onUnmount() {
-        if (this.should_skip_prepost_lifecycle) {
-            return;
-        }
-        this.disposePreSwitchAccount();
-        this.disposeSwitchAccount();
-        this.disposeLogout();
-        this.disposeClientInit();
-        this.disposeNetworkStatusChange();
-        this.disposeThemeChange();
-        this.is_trade_component_mounted = false;
-        // TODO: Find a more elegant solution to unmount contract-trade-store
-        this.root_store.contract_trade.onUnmount();
-        this.refresh();
-        this.resetErrorServices();
-        if (this.root_store.notifications.is_notifications_visible) {
-            this.root_store.notifications.toggleNotificationsModal();
-        }
-        if (this.prev_chart_layout) {
-            this.prev_chart_layout.is_used = false;
-        }
-    }
-
-    prev_chart_layout = null;
-
-    get chart_layout() {
-        let layout = null;
-        if (this.prev_chart_layout && this.prev_chart_layout.is_used === false) {
-            layout = this.prev_chart_layout;
-        }
-        return layout;
-    }
-
-    get is_crypto_multiplier() {
-        return this.contract_type === 'multiplier' && /^cry/.test(this.symbol);
-    }
-
-    @action.bound
-    exportLayout(layout) {
-        delete layout.previousMaxTicks; // TODO: fix it in smartcharts
-        this.prev_chart_layout = layout;
-        this.prev_chart_layout.isDone = () => {
-            this.prev_chart_layout.is_used = true;
-            this.setChartStatus(false);
-        };
-    }
-
-    // ---------- WS ----------
-    wsSubscribe = (req, callback) => {
-        if (req.subscribe === 1) {
-            const key = JSON.stringify(req);
-            const subscriber = WS.subscribeTicksHistory(req, callback);
-            g_subscribers_map[key] = subscriber;
-        }
-    };
-
-    wsForget = req => {
-        const key = JSON.stringify(req);
-        if (g_subscribers_map[key]) {
-            g_subscribers_map[key].unsubscribe();
-            delete g_subscribers_map[key];
-        }
-        // WS.forget('ticks_history', callback, match);
-    };
-
-    wsForgetStream = stream_id => {
-        WS.forgetStream(stream_id);
-    };
-
-    wsSendRequest = req => {
-        if (req.time) {
-            return ServerTime.timePromise().then(server_time => {
-                if (server_time) {
-                    return {
-                        msg_type: 'time',
-                        time: server_time.unix(),
-                    };
-                }
-                return WS.time();
-            });
-        }
-        if (req.active_symbols) {
-            return WS.activeSymbols('brief');
-        }
-        if (req.trading_times) {
-            return WS.tradingTimes(req.trading_times);
-        }
-        return WS.storage.send(req);
-    };
-
-    @action.bound
-    chartStateChange(state, option) {
-        const market_close_prop = 'isClosed';
-        switch (state) {
-            case 'MARKET_STATE_CHANGE':
-                if (option && market_close_prop in option) {
-                    if (this.is_trade_component_mounted && option[market_close_prop] !== this.is_market_closed)
-                        this.prepareTradeStore(false);
-                }
-                break;
-            default:
-        }
-    }
-
-    refToAddTick = ref => {
-        this.addTickByProposal = ref;
-    };
-
-    @computed
-    get has_alternative_source() {
-        return this.is_multiplier && !!this.hovered_contract_type;
-    }
-
-    @computed
-    get is_multiplier() {
-        return this.contract_type === 'multiplier';
-    }
-
-    @action.bound
-    async getFirstOpenMarket(markets_to_search) {
-        if (this.active_symbols?.length) {
-            return findFirstOpenMarket(this.active_symbols, markets_to_search);
-        }
-        const { active_symbols, error } = await WS.authorized.activeSymbols();
-        if (error) {
-            this.root_store.common.showError({ message: localize('Trading is unavailable at this time.') });
-            return undefined;
-        }
-        return findFirstOpenMarket(active_symbols, markets_to_search);
-    }
-}
diff --git a/packages/reports/src/Stores/Modules/index.js b/packages/reports/src/Stores/Modules/index.js
index e9b90ac4c840..91c9e0561f6a 100644
--- a/packages/reports/src/Stores/Modules/index.js
+++ b/packages/reports/src/Stores/Modules/index.js
@@ -3,7 +3,6 @@
 // import PortfolioStore from './Portfolio/portfolio-store';
 import ProfitTableStore from './Profit/profit-store';
 import StatementStore from './Statement/statement-store';
-import TradeStore from './Trading/trade-store';
 
 export default class ModulesStore {
     constructor(root_store) {
@@ -12,6 +11,5 @@ export default class ModulesStore {
         // this.portfolio = new PortfolioStore({ root_store });
         this.profit_table = new ProfitTableStore({ root_store });
         this.statement = new StatementStore({ root_store });
-        this.trade = new TradeStore({ root_store });
     }
 }
diff --git a/packages/reports/src/Stores/index.js b/packages/reports/src/Stores/index.js
index f0495d2fb985..7e95a9fe0e14 100644
--- a/packages/reports/src/Stores/index.js
+++ b/packages/reports/src/Stores/index.js
@@ -10,6 +10,7 @@ export default class RootStore {
         this.rudderstack = core_store.rudderstack;
         this.pushwoosh = core_store.pushwoosh;
         this.notifications = core_store.notifications;
+        this.contract = core_store.contract;
         this.contract_replay = core_store.contract_replay;
         this.contract_trade = core_store.contract_trade;
         this.portfolio = core_store.portfolio;
diff --git a/packages/reports/src/Stores/Modules/SmartChart/Constants/markers.js b/packages/shared/src/utils/constants/markers.js
similarity index 62%
rename from packages/reports/src/Stores/Modules/SmartChart/Constants/markers.js
rename to packages/shared/src/utils/constants/markers.js
index 987f95e37c48..acd76a6cf7a2 100644
--- a/packages/reports/src/Stores/Modules/SmartChart/Constants/markers.js
+++ b/packages/shared/src/utils/constants/markers.js
@@ -1,13 +1,14 @@
 import { localize } from '@deriv/translations';
-import MarkerLine from 'Modules/SmartChart/Components/Markers/marker-line.jsx';
-import MarkerSpotLabel from 'Modules/SmartChart/Components/Markers/marker-spot-label.jsx';
-import MarkerSpot from 'Modules/SmartChart/Components/Markers/marker-spot.jsx';
+// import MarkerLine from '../../components/markers/marker-line.jsx';
+// import MarkerSpotLabel from '../../components/markers/marker-spot-label.jsx';
+// import MarkerSpot from '../../components/markers/marker-spot.jsx';
 
 export const MARKER_TYPES_CONFIG = {
     LINE_END: {
         type: 'LINE_END',
         marker_config: {
-            ContentComponent: MarkerLine,
+            // ContentComponent: MarkerLine,
+            ContentComponent: null,
             className: 'chart-marker-line',
         },
         content_config: { line_style: 'dash', label: localize('End Time') },
@@ -15,7 +16,8 @@ export const MARKER_TYPES_CONFIG = {
     LINE_PURCHASE: {
         type: 'LINE_PURCHASE',
         marker_config: {
-            ContentComponent: MarkerLine,
+            // ContentComponent: MarkerLine,
+            ContentComponent: null,
             className: 'chart-marker-line',
         },
         content_config: { line_style: 'solid', label: localize('Purchase Time') },
@@ -23,7 +25,8 @@ export const MARKER_TYPES_CONFIG = {
     LINE_START: {
         type: 'LINE_START',
         marker_config: {
-            ContentComponent: MarkerLine,
+            // ContentComponent: MarkerLine,
+            ContentComponent: null,
             className: 'chart-marker-line',
         },
         content_config: { line_style: 'solid', label: localize('Start Time') },
@@ -31,28 +34,32 @@ export const MARKER_TYPES_CONFIG = {
     SPOT_ENTRY: {
         type: 'SPOT_ENTRY',
         marker_config: {
-            ContentComponent: MarkerSpot,
+            // ContentComponent: MarkerSpot,
+            ContentComponent: null,
         },
         content_config: { className: 'chart-spot__entry' },
     },
     SPOT_SELL: {
         type: 'SPOT_SELL',
         marker_config: {
-            ContentComponent: MarkerSpot,
+            // ContentComponent: MarkerSpot,
+            ContentComponent: null,
         },
         content_config: { className: 'chart-spot__sell' },
     },
     SPOT_EXIT: {
         type: 'SPOT_EXIT',
         marker_config: {
-            ContentComponent: MarkerSpotLabel,
+            // ContentComponent: MarkerSpotLabel,
+            ContentComponent: null,
         },
         content_config: { spot_className: 'chart-spot__spot' },
     },
     SPOT_MIDDLE: {
         type: 'SPOT_MIDDLE',
         marker_config: {
-            ContentComponent: MarkerSpotLabel,
+            // ContentComponent: MarkerSpotLabel,
+            ContentComponent: null,
         },
         content_config: { spot_className: 'chart-spot__spot' },
     },
diff --git a/packages/shared/src/utils/helpers/contract-type.js b/packages/shared/src/utils/helpers/contract-type.js
index d41d9439da07..17fde7b445c5 100644
--- a/packages/shared/src/utils/helpers/contract-type.js
+++ b/packages/shared/src/utils/helpers/contract-type.js
@@ -17,7 +17,7 @@ import {
     getLocalizedBasis,
 } from '../constants/contract';
 
-const ContractType = (() => {
+export const ContractType = (() => {
     let available_contract_types = {};
     let available_categories = {};
     let contract_types;
@@ -595,5 +595,3 @@ const ContractType = (() => {
         }),
     };
 })();
-
-export default ContractType;
diff --git a/packages/shared/src/utils/helpers/index.js b/packages/shared/src/utils/helpers/index.js
index c11c2531bbf8..aeff7235465a 100644
--- a/packages/shared/src/utils/helpers/index.js
+++ b/packages/shared/src/utils/helpers/index.js
@@ -2,6 +2,7 @@ export * from './active-symbols';
 export * from './barrier';
 export * from './barriers';
 export * from './chart-notifications';
+export * from './contract-type';
 export * from './details';
 export * from './duration';
 export * from './format-response';
diff --git a/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.jsx b/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.jsx
index ae061690b99f..45bf4f644075 100644
--- a/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.jsx
+++ b/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.jsx
@@ -9,6 +9,9 @@ import {
     isMobile,
     isMultiplierContract,
     isUserSold,
+    isCancellationExpired,
+    isEndedBeforeCancellationExpired,
+    isUserCancelled,
 } from '@deriv/shared';
 import {
     addCommaToNumber,
@@ -16,11 +19,6 @@ import {
     getBarrierValue,
     isDigitType,
 } from 'App/Components/Elements/PositionsDrawer/helpers';
-import {
-    isCancellationExpired,
-    isEndedBeforeCancellationExpired,
-    isUserCancelled,
-} from 'Stores/Modules/Contract/Helpers/logic';
 import ContractAuditItem from './contract-audit-item.jsx';
 
 const ContractDetails = ({ contract_end_time, contract_info, duration, duration_unit, exit_spot }) => {
diff --git a/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx b/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx
index 52d5108fb04f..8e0ef54e4e56 100644
--- a/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx
+++ b/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx
@@ -2,15 +2,18 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { DesktopWrapper, MobileWrapper, Collapsible, ContractCard, useHover } from '@deriv/components';
-import { isCryptoContract, isDesktop } from '@deriv/shared';
+import {
+    isCryptoContract,
+    isDesktop,
+    getEndTime,
+    getSymbolDisplayName,
+} from '@deriv/shared';
 import { getCardLabels, getContractTypeDisplay } from 'Constants/contract';
-import { getEndTime } from 'Stores/Modules/Contract/Helpers/logic';
 import { connect } from 'Stores/connect';
-import { getSymbolDisplayName } from 'Stores/Modules/Trading/Helpers/active-symbols';
-import { connectWithContractUpdate } from 'Stores/Modules/Contract/Helpers/multiplier';
 import { getMarketInformation } from 'Utils/Helpers/market-underlying';
 import { SwipeableContractDrawer } from './swipeable-components.jsx';
 import MarketClosedContractOverlay from './market-closed-contract-overlay.jsx';
+import { connectWithContractUpdate } from 'Stores/Modules/Trading/Helpers/multiplier';
 
 const ContractDrawerCard = ({
     active_symbols,
diff --git a/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer.jsx b/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer.jsx
index aeefad93ab42..0830fb67cc78 100644
--- a/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer.jsx
+++ b/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer.jsx
@@ -4,12 +4,17 @@ import React from 'react';
 import { withRouter } from 'react-router';
 import { CSSTransition } from 'react-transition-group';
 import { DesktopWrapper, MobileWrapper, Div100vhContainer } from '@deriv/components';
-import { isUserSold, isMobile } from '@deriv/shared';
+import {
+    isUserSold,
+    isMobile,
+    getDurationPeriod,
+    getDurationTime,
+    getDurationUnitText,
+    getEndTime,
+} from '@deriv/shared';
 import ContractAudit from 'App/Components/Elements/ContractAudit';
 import { PositionsCardLoader } from 'App/Components/Elements/ContentLoader';
 import { connect } from 'Stores/connect';
-import { getDurationPeriod, getDurationTime, getDurationUnitText } from 'Stores/Modules/Portfolio/Helpers/details';
-import { getEndTime } from 'Stores/Modules/Contract/Helpers/logic';
 import ContractDrawerCard from './contract-drawer-card.jsx';
 import { SwipeableContractAudit } from './swipeable-components.jsx';
 
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.js b/packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.js
index 96803078b143..b01b4ce5d0ff 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.js
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.js
@@ -1,7 +1,5 @@
 import { localize } from '@deriv/translations';
-import { isHighLow } from '@deriv/shared';
-import { getContractTypesConfig } from 'Stores/Modules/Trading/Constants/contract';
-import { isCallPut } from 'Stores/Modules/Contract/Helpers/contract-type';
+import { isHighLow, getContractTypesConfig, isCallPut } from '@deriv/shared';
 
 export const addCommaToNumber = (num, decimal_places) => {
     if (!num || isNaN(num)) {
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx
index 7cddaee82104..f50a65f7f6c3 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx
@@ -11,13 +11,13 @@ import {
     isCryptocurrency,
     hasContractEntered,
     isOpen,
+    getSymbolDisplayName,
+    getEndTime,
 } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { BinaryLink } from 'App/Components/Routes';
 import { connect } from 'Stores/connect';
-import { getSymbolDisplayName } from 'Stores/Modules/Trading/Helpers/active-symbols';
-import { connectWithContractUpdate } from 'Stores/Modules/Contract/Helpers/multiplier';
-import { getEndTime } from 'Stores/Modules/Contract/Helpers/logic';
+import { connectWithContractUpdate } from 'Stores/Modules/Trading/Helpers/multiplier';
 import { PositionsCardLoader } from 'App/Components/Elements/ContentLoader';
 import { getContractTypeDisplay, getCardLabels } from 'Constants/contract';
 import { getMarketInformation } from 'Utils/Helpers/market-underlying';
diff --git a/packages/trader/src/App/Components/Elements/market-countdown-timer.jsx b/packages/trader/src/App/Components/Elements/market-countdown-timer.jsx
index a3880327154e..f9d16678b475 100644
--- a/packages/trader/src/App/Components/Elements/market-countdown-timer.jsx
+++ b/packages/trader/src/App/Components/Elements/market-countdown-timer.jsx
@@ -3,10 +3,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Text } from '@deriv/components';
-import { useIsMounted, WS, convertTimeFormat } from '@deriv/shared';
+import { useIsMounted, WS, convertTimeFormat, isMarketClosed } from '@deriv/shared';
 import { Localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
-import { isMarketClosed } from 'Stores/Modules/Trading/Helpers/active-symbols';
 
 // check market in coming 7 days
 const days_to_check_before_exit = 7;
diff --git a/packages/trader/src/Modules/Contract/Components/Digits/digits.jsx b/packages/trader/src/Modules/Contract/Components/Digits/digits.jsx
index 90e29c728a6b..288882bbafb7 100644
--- a/packages/trader/src/Modules/Contract/Components/Digits/digits.jsx
+++ b/packages/trader/src/Modules/Contract/Components/Digits/digits.jsx
@@ -3,9 +3,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { toJS } from 'mobx';
 import { DesktopWrapper, MobileWrapper, Popover, Text } from '@deriv/components';
-import { isMobile, useIsMounted } from '@deriv/shared';
+import { isMobile, useIsMounted, isContractElapsed } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
-import { isContractElapsed } from 'Stores/Modules/Contract/Helpers/logic';
 import { Bounce, SlideIn } from 'App/Components/Animations';
 import { getMarketNamesMap } from '../../../../Constants';
 import { DigitSpot, LastDigitPrediction } from '../LastDigitPrediction';
diff --git a/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx b/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx
index dea95298c34b..8855fa6838c6 100644
--- a/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx
+++ b/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx
@@ -10,7 +10,16 @@ import {
     SwipeableWrapper,
     FadeWrapper,
 } from '@deriv/components';
-import { isDesktop, isMobile, isMultiplierContract, isEmptyObject, getPlatformRedirect, urlFor } from '@deriv/shared';
+import {
+    isDesktop,
+    isMobile,
+    isMultiplierContract,
+    isEmptyObject,
+    getPlatformRedirect,
+    urlFor,
+    getDurationPeriod,
+    getDurationUnitText,
+} from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import ChartLoader from 'App/Components/Elements/chart-loader.jsx';
 import ContractDrawer from 'App/Components/Elements/ContractDrawer';
@@ -19,7 +28,6 @@ import { SmartChart } from 'Modules/SmartChart';
 import { connect } from 'Stores/connect';
 import { ChartBottomWidgets, ChartTopWidgets, DigitsWidget, InfoBoxWidget } from './contract-replay-widget.jsx';
 import ChartMarker from '../../SmartChart/Components/Markers/marker.jsx';
-import { getDurationPeriod, getDurationUnitText } from 'Stores/Modules/Portfolio/Helpers/details';
 
 const ContractReplay = ({
     contract_id,
diff --git a/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile.jsx b/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile.jsx
index 11e1a565cb60..aec1e6044a68 100644
--- a/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Checkbox, RadioGroup, Dialog, Popover, Text } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
-import { onToggleCancellation, onChangeCancellationDuration } from 'Stores/Modules/Contract/Helpers/multiplier';
+import { onToggleCancellation, onChangeCancellationDuration } from 'Stores/Modules/Trading/Helpers/multiplier';
 import Fieldset from 'App/Components/Form/fieldset.jsx';
 
 const DealCancellationWarning = ({
diff --git a/packages/trader/src/Modules/Trading/Components/Elements/mobile-widget.jsx b/packages/trader/src/Modules/Trading/Components/Elements/mobile-widget.jsx
index c9549e59cb0c..e681154c7e5c 100644
--- a/packages/trader/src/Modules/Trading/Components/Elements/mobile-widget.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Elements/mobile-widget.jsx
@@ -2,8 +2,7 @@ import React from 'react';
 import { Money } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
-import { getExpiryType, getDurationMinMaxValues } from 'Stores/Modules/Trading/Helpers/duration';
-import { getLocalizedBasis } from 'Stores/Modules/Trading/Constants/contract';
+import { getExpiryType, getDurationMinMaxValues, getLocalizedBasis } from '@deriv/shared';
 import { MultiplierAmountWidget } from 'Modules/Trading/Components/Form/TradeParams/Multiplier/widgets.jsx';
 import TradeParamsModal from '../../Containers/trade-params-mobile.jsx';
 
diff --git a/packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.jsx b/packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.jsx
index 471eef3c29d3..70e7912ba3d0 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.jsx
@@ -3,11 +3,9 @@ import PropTypes from 'prop-types';
 import { PropTypes as MobxPropTypes } from 'mobx-react';
 import React from 'react';
 import { DatePicker, Tooltip } from '@deriv/components';
-import { isTimeValid, setTime, toMoment, useIsMounted } from '@deriv/shared';
+import { isTimeValid, setTime, toMoment, useIsMounted,ContractType, hasIntradayDurationUnit } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
-import ContractType from 'Stores/Modules/Trading/Helpers/contract-type';
-import { hasIntradayDurationUnit } from 'Stores/Modules/Trading/Helpers/duration';
 
 const TradingDatePicker = ({
     duration: current_duration,
diff --git a/packages/trader/src/Modules/Trading/Components/Form/Purchase/contract-info.jsx b/packages/trader/src/Modules/Trading/Components/Form/Purchase/contract-info.jsx
index 359b77c236fa..78d5df7ad90b 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/Purchase/contract-info.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/Purchase/contract-info.jsx
@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Icon, DesktopWrapper, Money, MobileWrapper, Popover, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
-import { getCurrencyDisplayCode } from '@deriv/shared';
-import { getLocalizedBasis } from 'Stores/Modules/Trading/Constants/contract';
+import { getCurrencyDisplayCode, getLocalizedBasis } from '@deriv/shared';
 import CancelDealInfo from './cancel-deal-info.jsx';
 
 const ValueMovement = ({ has_error_or_not_loaded, proposal_info, currency, has_increased }) => (
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.jsx
index 7193ec00d66f..a747b4b501d5 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.jsx
@@ -3,10 +3,9 @@ import { PropTypes as MobxPropTypes } from 'mobx-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Dropdown, ButtonToggle, InputField } from '@deriv/components';
-import { toMoment } from '@deriv/shared';
+import { toMoment, hasIntradayDurationUnit } from '@deriv/shared';
 import RangeSlider from 'App/Components/Form/RangeSlider';
 import { connect } from 'Stores/connect';
-import { hasIntradayDurationUnit } from 'Stores/Modules/Trading/Helpers/duration';
 import TradingDatePicker from '../../DatePicker';
 import TradingTimePicker from '../../TimePicker';
 
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-mobile.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-mobile.jsx
index 586fa476c22b..915b1b361bce 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-mobile.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-mobile.jsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import { Tabs, TickPicker, Numpad, RelativeDatepicker } from '@deriv/components';
-import { isEmptyObject, addComma } from '@deriv/shared';
+import { isEmptyObject, addComma, getDurationMinMaxValues } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
 
 import { connect } from 'Stores/connect';
-import { getDurationMinMaxValues } from 'Stores/Modules/Trading/Helpers/duration';
 
 const submit_label = localize('OK');
 
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-wrapper.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-wrapper.jsx
index a32555503d9e..e927df3cf8f3 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-wrapper.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-wrapper.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { PropTypes as MobxPropTypes } from 'mobx-react';
 import { connect } from 'Stores/connect';
-import { getDurationMinMaxValues } from 'Stores/Modules/Trading/Helpers/duration';
+import { getDurationMinMaxValues } from '@deriv/shared';
 import Duration from './duration.jsx';
 
 const DurationWrapper = props => {
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/cancel-deal.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/cancel-deal.jsx
index 0b6a826e6eba..a9d32d7821c3 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/cancel-deal.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/cancel-deal.jsx
@@ -4,7 +4,7 @@ import { Checkbox, Dropdown, Popover, PopoverMessageCheckbox } from '@deriv/comp
 import { localize } from '@deriv/translations';
 import Fieldset from 'App/Components/Form/fieldset.jsx';
 import { connect } from 'Stores/connect';
-import { onToggleCancellation, onChangeCancellationDuration } from 'Stores/Modules/Contract/Helpers/multiplier';
+import { onToggleCancellation, onChangeCancellationDuration } from 'Stores/Modules/Trading/Helpers/multiplier';
 
 const CancelDeal = ({
     cancellation_range_list,
diff --git a/packages/trader/src/Modules/Trading/Containers/contract-type.jsx b/packages/trader/src/Modules/Trading/Containers/contract-type.jsx
index 8b0bf72e9fcb..1e8d3d5b59d2 100644
--- a/packages/trader/src/Modules/Trading/Containers/contract-type.jsx
+++ b/packages/trader/src/Modules/Trading/Containers/contract-type.jsx
@@ -1,14 +1,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { MobileWrapper, usePrevious } from '@deriv/components';
-import { connect } from 'Stores/connect';
+import { unsupported_contract_types_list } from '@deriv/shared';
 import { isDigitTradeType } from 'Modules/Trading/Helpers/digits';
 import { localize } from '@deriv/translations';
-import { unsupported_contract_types_list } from 'Stores/Modules/Trading/Constants/contract';
 import { ToastPopup } from 'Modules/Trading/Containers/toast-popup.jsx';
 import { getMarketNamesMap } from '../../../Constants';
 import ContractTypeWidget from '../Components/Form/ContractType';
 import { getAvailableContractTypes } from '../Helpers/contract-type';
+import { connect } from 'Stores/connect';
 
 const Contract = ({
     contract_type,
diff --git a/packages/trader/src/Stores/Modules/Contract/Constants/ui.js b/packages/trader/src/Stores/Modules/Contract/Constants/ui.js
deleted file mode 100644
index 74e8e69ce7ea..000000000000
--- a/packages/trader/src/Stores/Modules/Contract/Constants/ui.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { Icon } from '@deriv/components';
-import { localize } from '@deriv/translations';
-
-export const getHeaderConfig = () => ({
-    purchased: { title: localize('Contract Purchased'), icon: <Icon icon='IcTick' /> },
-    won: { title: localize('Contract Won'), icon: <Icon icon='IcContractFlag' /> },
-    lost: { title: localize('Contract Lost'), icon: <Icon icon='IcContractFlag' /> },
-});
diff --git a/packages/trader/src/Stores/Modules/Contract/Constants/validation-rules.js b/packages/trader/src/Stores/Modules/Contract/Constants/validation-rules.js
deleted file mode 100644
index fc370ac0b083..000000000000
--- a/packages/trader/src/Stores/Modules/Contract/Constants/validation-rules.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import { localize } from '@deriv/translations';
-import { getTotalProfit } from '@deriv/shared';
-import { getBuyPrice } from 'Stores/Modules/Contract/Helpers/logic';
-
-const getValidationRules = () => ({
-    has_contract_update_stop_loss: {
-        trigger: 'contract_update_stop_loss',
-    },
-    contract_update_stop_loss: {
-        rules: [
-            [
-                'req',
-                {
-                    condition: contract_store => !contract_store.contract_update_stop_loss,
-                    message: localize('Please enter a stop loss amount.'),
-                },
-            ],
-            [
-                'custom',
-                {
-                    func: (value, options, contract_store) => {
-                        const profit = getTotalProfit(contract_store.contract_info);
-                        return !(profit < 0 && -value > profit);
-                    },
-                    message: localize("Please enter a stop loss amount that's higher than the current potential loss."),
-                },
-            ],
-            [
-                'custom',
-                {
-                    func: (value, options, contract_store) => {
-                        const stake = getBuyPrice(contract_store);
-                        return value < stake + 1;
-                    },
-                    message: localize('Invalid stop loss. Stop loss cannot be more than stake.'),
-                },
-            ],
-        ],
-    },
-    has_contract_update_take_profit: {
-        trigger: 'contract_update_take_profit',
-    },
-    contract_update_take_profit: {
-        rules: [
-            [
-                'req',
-                {
-                    condition: contract_store => !contract_store.contract_update_take_profit,
-                    message: localize('Please enter a take profit amount.'),
-                },
-            ],
-            [
-                'custom',
-                {
-                    func: (value, options, contract_store) => {
-                        const profit = getTotalProfit(contract_store.contract_info);
-                        return !(profit > 0 && +value < profit);
-                    },
-                    message: localize(
-                        "Please enter a take profit amount that's higher than the current potential profit."
-                    ),
-                },
-            ],
-        ],
-    },
-});
-
-export default getValidationRules;
diff --git a/packages/trader/src/Stores/Modules/Contract/Helpers/__tests__/logic.js b/packages/trader/src/Stores/Modules/Contract/Helpers/__tests__/logic.js
deleted file mode 100644
index 25ceec86f83e..000000000000
--- a/packages/trader/src/Stores/Modules/Contract/Helpers/__tests__/logic.js
+++ /dev/null
@@ -1,125 +0,0 @@
-import { expect } from 'chai';
-import React from 'react';
-import * as Logic from '../logic';
-
-describe('logic', () => {
-    describe('isSoldBeforeStart', () => {
-        it('should return true when sell_time is before date_start', () => {
-            const contract_info = {
-                sell_time: 1000000,
-                date_start: 1000001,
-            };
-            expect(Logic.isSoldBeforeStart(contract_info)).to.eql(true);
-        });
-        it('should return true when sell_time is after date_start', () => {
-            const contract_info = {
-                sell_time: 1000000,
-                date_start: 99999,
-            };
-            expect(Logic.isSoldBeforeStart(contract_info)).to.eql(false);
-        });
-    });
-
-    describe('isStarted', () => {
-        it('should return true if contract is not forward_starting and current_spot_time is after start_time', () => {
-            const contract_info = {
-                is_forward_starting: false,
-                current_spot_time: 1000000,
-                date_start: 99999,
-            };
-            expect(Logic.isStarted(contract_info)).to.eql(true);
-        });
-        it('should return true if contract is not forward_starting and current_spot_time is before start_time', () => {
-            const contract_info = {
-                is_forward_starting: false,
-                current_spot_time: 99999,
-                date_start: 1000000,
-            };
-            expect(Logic.isStarted(contract_info)).to.eql(true);
-        });
-        it('should return true if contract is forward_starting and current_spot_time is after start_time', () => {
-            const contract_info = {
-                is_forward_starting: true,
-                current_spot_time: 1000000,
-                date_start: 99999,
-            };
-            expect(Logic.isStarted(contract_info)).to.eql(true);
-        });
-        it('should return false if contract is forward_starting and current_spot_time is before start_time', () => {
-            const contract_info = {
-                is_forward_starting: true,
-                current_spot_time: 99999,
-                date_start: 1000000,
-            };
-            expect(Logic.isStarted(contract_info)).to.eql(false);
-        });
-    });
-
-    describe('getEndTime', () => {
-        it('Should return exit tick time for tick contracts', () => {
-            const contract_info = {
-                tick_count: 5,
-                exit_tick_time: 9999999,
-                sell_time: 1000000,
-                is_expired: 1,
-                date_expiry: 8888888,
-            };
-            expect(Logic.getEndTime(contract_info)).to.eql(9999999);
-        });
-        it('Should return date expiry if sell time is after date expiry for non-tick contracts', () => {
-            const contract_info = {
-                exit_tick_time: 9999999,
-                sell_time: 8888888,
-                is_expired: 1,
-                date_expiry: 7777777,
-            };
-            expect(Logic.getEndTime(contract_info)).to.eql(7777777);
-        });
-        it('Should return exit tick time if sell time is before date expiry for non-tick contracts', () => {
-            const contract_info = {
-                exit_tick_time: 9999999,
-                sell_time: 7777777,
-                is_expired: 1,
-                date_expiry: 8888888,
-            };
-            expect(Logic.getEndTime(contract_info)).to.eql(9999999);
-        });
-        it('Should return date_expiry time for user sold contracts if sell_time is after date_expiry', () => {
-            const contract_info = {
-                date_expiry: 8888888,
-                exit_tick_time: 8888887,
-                sell_time: 8888889,
-                status: 'sold',
-            };
-            expect(Logic.getEndTime(contract_info)).to.eql(8888888);
-        });
-        it('Should return sell_time time for user sold contracts if sell_time is before date_expiry', () => {
-            const contract_info = {
-                date_expiry: 8888889,
-                exit_tick_time: 8888887,
-                sell_time: 8888888,
-                status: 'sold',
-            };
-            expect(Logic.getEndTime(contract_info)).to.eql(8888888);
-        });
-        it('Should return undefined if not sold for all contracts', () => {
-            const contract_info = {
-                exit_tick_time: 9999999,
-                sell_time: 1000000,
-                is_expired: 0,
-                date_expiry: 888888,
-            };
-            expect(Logic.getEndTime(contract_info)).to.eql(undefined);
-        });
-        it('Should return exit_tick_time if contract is_path_dependent', () => {
-            const contract_info = {
-                exit_tick_time: 9999999,
-                sell_time: 1000000,
-                is_expired: 0,
-                is_path_dependent: '1',
-                date_expiry: 888888,
-            };
-            expect(Logic.getEndTime(contract_info)).to.eql(undefined);
-        });
-    });
-});
diff --git a/packages/trader/src/Stores/Modules/Contract/Helpers/chart-marker-helpers.js b/packages/trader/src/Stores/Modules/Contract/Helpers/chart-marker-helpers.js
deleted file mode 100644
index 5c358708f5a8..000000000000
--- a/packages/trader/src/Stores/Modules/Contract/Helpers/chart-marker-helpers.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import extend from 'extend';
-import { isMobile, isUserSold, isMultiplierContract, isDigitContract } from '@deriv/shared';
-import { getEndTime } from 'Stores/Modules/Contract/Helpers/logic';
-import { MARKER_TYPES_CONFIG } from '../../SmartChart/Constants/markers';
-
-const createMarkerConfig = (marker_type, x, y, content_config) =>
-    extend(true, {}, MARKER_TYPES_CONFIG[marker_type], {
-        marker_config: {
-            x: +x,
-            y,
-        },
-        content_config,
-    });
-
-export const getSpotCount = (contract_info, spot_count) =>
-    isDigitContract(contract_info.contract_type) ? spot_count + 1 : spot_count;
-
-// -------------------- Lines --------------------
-export const createMarkerEndTime = contract_info => {
-    const end_time = getEndTime(contract_info);
-    if (!end_time) return false;
-
-    return createMarkerConfig(MARKER_TYPES_CONFIG.LINE_END.type, +end_time, null, {
-        status: `${contract_info.profit >= 0 ? 'won' : 'lost'}`,
-        marker_config: MARKER_TYPES_CONFIG,
-    });
-};
-
-export const createMarkerPurchaseTime = contract_info => {
-    if (
-        !contract_info.purchase_time ||
-        !contract_info.date_start ||
-        +contract_info.purchase_time === +contract_info.date_start
-    )
-        return false;
-
-    return createMarkerConfig(MARKER_TYPES_CONFIG.LINE_PURCHASE.type, +contract_info.purchase_time);
-};
-
-export const createMarkerStartTime = contract_info => {
-    if (!contract_info.date_start) return false;
-
-    return createMarkerConfig(MARKER_TYPES_CONFIG.LINE_START.type, +contract_info.date_start, null, {
-        marker_config: MARKER_TYPES_CONFIG,
-    });
-};
-
-// -------------------- Spots --------------------
-export const createMarkerSpotEntry = contract_info => {
-    if (!contract_info.entry_tick_time) return false;
-
-    let marker_type = MARKER_TYPES_CONFIG.SPOT_ENTRY.type;
-    let component_props = {};
-
-    const entry_tick = contract_info.entry_tick_display_value;
-
-    const spot_has_label = isDigitContract(contract_info.contract_type);
-    if (spot_has_label) {
-        marker_type = MARKER_TYPES_CONFIG.SPOT_MIDDLE.type;
-
-        component_props = {
-            spot_value: `${entry_tick}`,
-            spot_epoch: `${contract_info.entry_tick_time}`,
-            spot_count: 1,
-        };
-    }
-
-    return createMarkerConfig(marker_type, contract_info.entry_tick_time, entry_tick, component_props);
-};
-
-export const createMarkerSpotExit = (contract_info, tick, idx) => {
-    if (!contract_info.exit_tick_time) return false;
-    const is_user_sold = isUserSold(contract_info);
-
-    let spot_count, align_label;
-    if (tick) {
-        spot_count = getSpotCount(contract_info, idx);
-        align_label = tick.align_label;
-    }
-
-    const exit_tick = contract_info.exit_tick_display_value;
-
-    const should_show_spot_exit = !is_user_sold || isMultiplierContract(contract_info.contract_type);
-
-    const marker_spot_type = should_show_spot_exit
-        ? MARKER_TYPES_CONFIG.SPOT_EXIT.type
-        : MARKER_TYPES_CONFIG.SPOT_SELL.type;
-
-    const component_props = should_show_spot_exit
-        ? {
-              spot_value: `${exit_tick}`,
-              spot_epoch: `${contract_info.exit_tick_time}`,
-              status: `${+contract_info.profit >= 0 ? 'won' : 'lost'}`,
-              align_label,
-              spot_count,
-          }
-        : {};
-
-    return createMarkerConfig(marker_spot_type, +contract_info.exit_tick_time, +exit_tick, component_props);
-};
-
-export const createMarkerSpotMiddle = (contract_info, tick, idx) => {
-    const spot_count = getSpotCount(contract_info, idx);
-    const spot = tick.tick_display_value;
-
-    const marker_config = createMarkerConfig(MARKER_TYPES_CONFIG.SPOT_MIDDLE.type, +tick.epoch, +spot, {
-        spot_value: `${spot}`,
-        spot_epoch: `${tick.epoch}`,
-        align_label: tick.align_label,
-        spot_count,
-    });
-    marker_config.type = `${marker_config.type}_${idx}`;
-
-    if (isMobile() && spot_count > 1) return null;
-    return marker_config;
-};
diff --git a/packages/trader/src/Stores/Modules/Contract/Helpers/chart-markers.js b/packages/trader/src/Stores/Modules/Contract/Helpers/chart-markers.js
deleted file mode 100644
index d1681b471b68..000000000000
--- a/packages/trader/src/Stores/Modules/Contract/Helpers/chart-markers.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import { unique } from '@deriv/shared';
-import {
-    createMarkerEndTime,
-    createMarkerPurchaseTime,
-    createMarkerSpotEntry,
-    createMarkerSpotExit,
-    createMarkerStartTime,
-    createMarkerSpotMiddle,
-    getSpotCount,
-} from './chart-marker-helpers';
-import { getChartType, getEndTime } from './logic';
-import { MARKER_TYPES_CONFIG } from '../../SmartChart/Constants/markers';
-
-export const createChartMarkers = contract_info => {
-    let markers = [];
-    if (contract_info) {
-        const end_time = getEndTime(contract_info);
-        const chart_type = getChartType(contract_info.date_start, end_time);
-
-        if (contract_info.tick_count) {
-            const tick_markers = createTickMarkers(contract_info);
-            markers.push(...tick_markers);
-        } else if (chart_type !== 'candle') {
-            const spot_markers = Object.keys(marker_spots).map(type => marker_spots[type](contract_info));
-            markers.push(...spot_markers);
-        }
-        const line_markers = Object.keys(marker_lines).map(type => marker_lines[type](contract_info));
-        markers.push(...line_markers);
-
-        markers = markers.filter(m => !!m);
-    }
-    markers.forEach(marker => {
-        const contract_id = contract_info.contract_id;
-        marker.react_key = `${contract_id}-${marker.type}`;
-    });
-
-    return markers;
-};
-
-const marker_spots = {
-    [MARKER_TYPES_CONFIG.SPOT_ENTRY.type]: createMarkerSpotEntry,
-    [MARKER_TYPES_CONFIG.SPOT_EXIT.type]: createMarkerSpotExit,
-};
-
-const marker_lines = {
-    [MARKER_TYPES_CONFIG.LINE_START.type]: createMarkerStartTime,
-    [MARKER_TYPES_CONFIG.LINE_END.type]: createMarkerEndTime,
-    [MARKER_TYPES_CONFIG.LINE_PURCHASE.type]: createMarkerPurchaseTime,
-};
-
-const addLabelAlignment = (tick, idx, arr) => {
-    if (idx > 0 && arr.length) {
-        const prev_tick = arr[idx - 1];
-
-        if (+tick > +prev_tick.tick) tick.align_label = 'top';
-        if (+tick.tick < +prev_tick.tick) tick.align_label = 'bottom';
-        if (+tick.tick === +prev_tick.tick) tick.align_label = prev_tick.align_label;
-    }
-
-    return tick;
-};
-
-const createTickMarkers = contract_info => {
-    const tick_stream = unique(contract_info.tick_stream, 'epoch').map(addLabelAlignment);
-    const result = [];
-
-    tick_stream.forEach((tick, idx) => {
-        const is_entry_spot = idx === 0 && +tick.epoch !== contract_info.exit_tick_time;
-        const is_middle_spot = idx > 0 && +tick.epoch !== +contract_info.exit_tick_time;
-        const is_exit_spot =
-            +tick.epoch === +contract_info.exit_tick_time ||
-            getSpotCount(contract_info, idx) === contract_info.tick_count;
-
-        let marker_config;
-        if (is_entry_spot) {
-            marker_config = createMarkerSpotEntry(contract_info);
-        } else if (is_middle_spot) {
-            marker_config = createMarkerSpotMiddle(contract_info, tick, idx);
-        } else if (is_exit_spot) {
-            tick.align_label = 'top'; // force exit spot label to be 'top' to avoid overlapping
-            marker_config = createMarkerSpotExit(contract_info, tick, idx);
-        }
-
-        if (marker_config) {
-            result.push(marker_config);
-        }
-    });
-    return result;
-};
diff --git a/packages/trader/src/Stores/Modules/Contract/Helpers/chart-notifications.js b/packages/trader/src/Stores/Modules/Contract/Helpers/chart-notifications.js
deleted file mode 100644
index c346362b7bf4..000000000000
--- a/packages/trader/src/Stores/Modules/Contract/Helpers/chart-notifications.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { localize, Localize } from '@deriv/translations';
-
-export const switch_to_tick_chart = {
-    key: 'switch_to_tick_chart',
-    header: localize('This chart display is not ideal for tick contracts'),
-    message: <Localize i18n_default_text='Please change the chart duration to tick for a better trading experience.' />,
-    type: 'info',
-};
diff --git a/packages/trader/src/Stores/Modules/Contract/Helpers/contract-type.js b/packages/trader/src/Stores/Modules/Contract/Helpers/contract-type.js
deleted file mode 100644
index ffd73b0a7112..000000000000
--- a/packages/trader/src/Stores/Modules/Contract/Helpers/contract-type.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export const isCallPut = trade_type =>
-    trade_type === 'rise_fall' || trade_type === 'rise_fall_equal' || trade_type === 'high_low';
diff --git a/packages/trader/src/Stores/Modules/Contract/Helpers/limit-orders.js b/packages/trader/src/Stores/Modules/Contract/Helpers/limit-orders.js
deleted file mode 100644
index 069a7607b69e..000000000000
--- a/packages/trader/src/Stores/Modules/Contract/Helpers/limit-orders.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import { isMultiplierContract } from '@deriv/shared';
-import { BARRIER_COLORS, BARRIER_LINE_STYLES } from '../../SmartChart/Constants/barriers';
-import { ChartBarrierStore } from '../../SmartChart/chart-barrier-store';
-import { removeBarrier } from '../../SmartChart/Helpers/barriers';
-
-const isLimitOrderBarrierSupported = (contract_type, contract_info) =>
-    isMultiplierContract(contract_type) && contract_info.limit_order;
-
-export const LIMIT_ORDER_TYPES = {
-    STOP_OUT: 'stop_out',
-    TAKE_PROFIT: 'take_profit',
-    STOP_LOSS: 'stop_loss',
-};
-
-export const setLimitOrderBarriers = ({ barriers, contract_type, contract_info = {}, is_over }) => {
-    if (is_over && isLimitOrderBarrierSupported(contract_type, contract_info)) {
-        const limit_orders = Object.values(LIMIT_ORDER_TYPES);
-        const has_stop_loss = Object.keys(contract_info.limit_order).some(
-            k => k === LIMIT_ORDER_TYPES.STOP_LOSS && contract_info.limit_order[k].value
-        );
-
-        limit_orders.forEach(key => {
-            const obj_limit_order = contract_info.limit_order[key];
-
-            if (!obj_limit_order || !obj_limit_order.value) {
-                removeBarrier(barriers, key);
-                return;
-            }
-
-            let barrier = barriers.find(b => b.key === key);
-
-            if (barrier) {
-                if (barrier.high === +obj_limit_order.value) {
-                    return;
-                }
-
-                barrier.onChange({
-                    high: obj_limit_order.value,
-                });
-            } else {
-                const obj_barrier = {
-                    key,
-                    title: `${obj_limit_order.display_name}`,
-                    color: key === LIMIT_ORDER_TYPES.TAKE_PROFIT ? BARRIER_COLORS.GREEN : BARRIER_COLORS.ORANGE,
-                    draggable: false,
-                    lineStyle:
-                        key === LIMIT_ORDER_TYPES.STOP_OUT ? BARRIER_LINE_STYLES.DOTTED : BARRIER_LINE_STYLES.SOLID,
-                    hidePriceLines: has_stop_loss && key === LIMIT_ORDER_TYPES.STOP_OUT,
-                    hideOffscreenLine: true,
-                    showOffscreenArrows: true,
-                    isSingleBarrier: true,
-                    opacityOnOverlap: key === LIMIT_ORDER_TYPES.STOP_OUT && 0.15,
-                };
-                barrier = new ChartBarrierStore(obj_limit_order.value);
-
-                Object.assign(barrier, obj_barrier);
-                barriers.push(barrier);
-            }
-        });
-    } else {
-        const limit_orders = Object.values(LIMIT_ORDER_TYPES);
-        limit_orders.forEach(l => removeBarrier(barriers, l));
-    }
-};
-
-/**
- * Get limit_order for contract_update API
- * @param {object} contract_update - contract_update input & checkbox values
- */
-export const getLimitOrder = contract_update => {
-    const {
-        has_contract_update_stop_loss,
-        has_contract_update_take_profit,
-        contract_update_stop_loss,
-        contract_update_take_profit,
-        contract_info,
-    } = contract_update;
-
-    const limit_order = {};
-
-    const new_take_profit = has_contract_update_take_profit ? +contract_update_take_profit : null;
-    const has_take_profit_changed =
-        Math.abs(contract_info.limit_order?.take_profit?.order_amount) !== Math.abs(new_take_profit);
-
-    if (has_take_profit_changed) {
-        // send positive take_profit to update or null cancel
-        limit_order.take_profit = new_take_profit;
-    }
-
-    const new_stop_loss = has_contract_update_stop_loss ? +contract_update_stop_loss : null;
-    const has_stop_loss_changed =
-        Math.abs(contract_info.limit_order?.stop_loss?.order_amount) !== Math.abs(new_stop_loss);
-
-    if (has_stop_loss_changed) {
-        // send positive stop_loss to update or null to cancel
-        limit_order.stop_loss = new_stop_loss;
-    }
-
-    return limit_order;
-};
diff --git a/packages/trader/src/Stores/Modules/Contract/Helpers/logic.js b/packages/trader/src/Stores/Modules/Contract/Helpers/logic.js
deleted file mode 100644
index 4255dc37ec48..000000000000
--- a/packages/trader/src/Stores/Modules/Contract/Helpers/logic.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import moment from 'moment';
-import { isEmptyObject, isUserSold, getLimitOrderAmount } from '@deriv/shared';
-import ServerTime from '_common/base/server_time';
-
-export const getChartConfig = contract_info => {
-    if (isEmptyObject(contract_info)) return null;
-    const start = contract_info.date_start;
-    const end = getEndTime(contract_info);
-    const granularity = getChartGranularity(start, end || null);
-    const chart_type = getChartType(start, end || null);
-
-    return {
-        chart_type: contract_info.tick_count ? 'mountain' : chart_type,
-        granularity: contract_info.tick_count ? 0 : granularity,
-        end_epoch: end,
-        start_epoch: start,
-        scroll_to_epoch: contract_info.purchase_time,
-    };
-};
-
-const hour_to_granularity_map = [
-    [1, 0],
-    [2, 120],
-    [6, 600],
-    [24, 900],
-    [5 * 24, 3600],
-    [30 * 24, 14400],
-];
-
-const getExpiryTime = time => time || ServerTime.get().unix();
-
-export const getChartType = (start_time, expiry_time) => {
-    const duration = moment.duration(moment.unix(getExpiryTime(expiry_time)).diff(moment.unix(start_time))).asHours();
-    // use line chart if duration is equal or less than 1 hour
-    return duration <= 1 ? 'mountain' : 'candle';
-};
-
-export const getChartGranularity = (start_time, expiry_time) =>
-    calculateGranularity(getExpiryTime(expiry_time) - start_time);
-
-export const calculateGranularity = duration =>
-    (hour_to_granularity_map.find(m => duration <= m[0] * 3600) || [null, 86400])[1];
-
-export const isContractElapsed = (contract_info, tick) => {
-    if (isEmptyObject(tick) || isEmptyObject(contract_info)) return false;
-    const end_time = getEndTime(contract_info);
-    if (end_time && tick.epoch) {
-        const seconds = moment.duration(moment.unix(tick.epoch).diff(moment.unix(end_time))).asSeconds();
-        return seconds >= 2;
-    }
-    return false;
-};
-
-export const isEndedBeforeCancellationExpired = contract_info =>
-    !!(contract_info.cancellation && getEndTime(contract_info) < contract_info.cancellation.date_expiry);
-
-export const isSoldBeforeStart = contract_info =>
-    contract_info.sell_time && +contract_info.sell_time < +contract_info.date_start;
-
-export const isStarted = contract_info =>
-    !contract_info.is_forward_starting || contract_info.current_spot_time > contract_info.date_start;
-
-export const isUserCancelled = contract_info => contract_info.status === 'cancelled';
-
-export const isCancellationExpired = contract_info =>
-    !!(contract_info.cancellation.date_expiry < ServerTime.get().unix());
-
-export const getEndTime = contract_info => {
-    const {
-        exit_tick_time,
-        date_expiry,
-        is_expired,
-        is_path_dependent,
-        sell_time,
-        status,
-        tick_count: is_tick_contract,
-    } = contract_info;
-
-    const is_finished = is_expired && status !== 'open';
-
-    if (!is_finished && !isUserSold(contract_info) && !isUserCancelled(contract_info)) return undefined;
-
-    if (isUserSold(contract_info)) {
-        return sell_time > date_expiry ? date_expiry : sell_time;
-    } else if (!is_tick_contract && sell_time > date_expiry) {
-        return date_expiry;
-    }
-
-    return date_expiry > exit_tick_time && !+is_path_dependent ? date_expiry : exit_tick_time;
-};
-
-export const getBuyPrice = contract_store => {
-    return contract_store.contract_info.buy_price;
-};
-
-/**
- * Set contract update form initial values
- * @param {object} contract_update - contract_update response
- * @param {object} limit_order - proposal_open_contract.limit_order response
- */
-export const getContractUpdateConfig = ({ contract_update, limit_order }) => {
-    const { stop_loss, take_profit } = getLimitOrderAmount(limit_order || contract_update);
-
-    return {
-        // convert stop_loss, take_profit value to string for validation to work
-        contract_update_stop_loss: stop_loss ? Math.abs(stop_loss).toString() : '',
-        contract_update_take_profit: take_profit ? take_profit.toString() : '',
-        has_contract_update_stop_loss: !!stop_loss,
-        has_contract_update_take_profit: !!take_profit,
-    };
-};
diff --git a/packages/trader/src/Stores/Modules/Contract/contract-replay-store.js b/packages/trader/src/Stores/Modules/Contract/contract-replay-store.js
deleted file mode 100644
index a3150859cf5f..000000000000
--- a/packages/trader/src/Stores/Modules/Contract/contract-replay-store.js
+++ /dev/null
@@ -1,291 +0,0 @@
-import { action, observable } from 'mobx';
-import { routes, isEmptyObject, isForwardStarting, WS } from '@deriv/shared';
-import { localize } from '@deriv/translations';
-import ContractStore from './contract-store';
-import { contractCancelled, contractSold } from '../Portfolio/Helpers/portfolio-notifications';
-import BaseStore from '../../base-store';
-
-export default class ContractReplayStore extends BaseStore {
-    @observable chart_state = '';
-    @observable contract_store = { contract_info: {} };
-    // --- Observable properties ---
-    @observable is_market_closed = false;
-    @observable is_sell_requested = false;
-    @observable has_error = false;
-    @observable error_message = '';
-    @observable error_code = '';
-    @observable is_chart_loading = true;
-    @observable is_chart_scaling = false;
-    @observable is_forward_starting = false;
-    // ---- chart props
-    @observable margin;
-
-    // ---- Replay Contract Config ----
-    @observable contract_id;
-    @observable indicative_status;
-    @observable.ref contract_info = observable.object({});
-    @observable is_static_chart = false;
-
-    // ---- Normal properties ---
-    is_ongoing_contract = false;
-    prev_indicative = 0;
-
-    @observable.ref contract_update = observable.object({});
-    // TODO: you view a contract and then share that link with another person,
-    // when the person opens, try to switch account they get the error
-    // Forget old proposal_open_contract stream on account switch from ErrorComponent
-    should_forget_first = false;
-
-    // -------------------
-    // ----- Actions -----
-    // -------------------
-    handleSubscribeProposalOpenContract = async (contract_id, cb) => {
-        // expired contracts are cached and we can get the poc response from local storage
-        const is_cached = await WS.storage.has({ proposal_open_contract: 1, contract_id });
-        if (is_cached) {
-            WS.storage.proposalOpenContract({ contract_id }).then(cb);
-            return;
-        }
-
-        if (this.should_forget_first) {
-            // TODO; don't forget all ever
-            await WS.forgetAll('proposal_open_contract');
-            this.should_forget_first = false;
-        }
-
-        this.subscriber = WS.subscribeProposalOpenContract(contract_id, cb);
-    };
-
-    subscribeProposalOpenContract = () => {
-        WS.wait('authorize').then(() => {
-            this.handleSubscribeProposalOpenContract(this.contract_id, this.populateConfig);
-        });
-    };
-
-    @action.bound
-    onMount(contract_id) {
-        if (contract_id) {
-            this.contract_id = contract_id;
-            this.contract_store = new ContractStore(this.root_store, { contract_id });
-            this.subscribeProposalOpenContract();
-            WS.storage.activeSymbols('brief');
-            WS.setOnReconnect(() => {
-                if (!this.root_store.client.is_switching) {
-                    this.subscribeProposalOpenContract();
-                }
-            });
-        }
-    }
-
-    @action.bound
-    onUnmount() {
-        this.forgetProposalOpenContract(this.contract_id, this.populateConfig);
-        this.contract_id = null;
-        this.is_ongoing_contract = false;
-        this.is_static_chart = false;
-        this.is_chart_loading = true;
-        this.contract_info = {};
-        this.indicative_status = null;
-        this.prev_indicative = 0;
-        this.chart_state = '';
-        this.root_store.ui.toggleHistoryTab(false);
-        WS.removeOnReconnect();
-    }
-
-    @action.bound
-    populateConfig(response) {
-        if (!this.switch_account_listener) return;
-
-        if ('error' in response) {
-            const { code, message } = response.error;
-            this.has_error = true;
-            this.is_chart_loading = false;
-            this.error_message = message;
-            this.error_code = code;
-            return;
-        }
-        if (isEmptyObject(response.proposal_open_contract)) {
-            this.has_error = true;
-            this.error_message = localize(
-                "Sorry, you can't view this contract because it doesn't belong to this account."
-            );
-            this.should_forget_first = true;
-            this.is_chart_loading = false;
-            return;
-        }
-        if (+response.proposal_open_contract.contract_id !== this.contract_id) return;
-
-        this.contract_info = response.proposal_open_contract;
-        this.contract_update = response.proposal_open_contract.limit_order;
-
-        // Add indicative status for contract
-        const prev_indicative = this.prev_indicative;
-        const new_indicative = +this.contract_info.bid_price;
-        if (new_indicative > prev_indicative) {
-            this.indicative_status = 'profit';
-        } else if (new_indicative < prev_indicative) {
-            this.indicative_status = 'loss';
-        } else {
-            this.indicative_status = null;
-        }
-        this.prev_indicative = new_indicative;
-
-        const is_forward_starting =
-            !!this.contract_info.is_forward_starting ||
-            isForwardStarting(this.contract_info.shortcode, this.contract_info.purchase_time);
-
-        this.is_forward_starting = is_forward_starting;
-
-        // update the contract_store here passing contract_info
-        this.contract_store.populateConfig(this.contract_info);
-
-        const end_time = this.contract_store.end_time;
-
-        this.updateMargin((end_time || this.contract_info.date_expiry) - this.contract_info.date_start);
-
-        if (!end_time) this.is_ongoing_contract = true;
-
-        // finish contracts if end_time exists
-        if (end_time) {
-            if (!this.is_ongoing_contract) {
-                this.is_static_chart = true;
-            } else {
-                this.is_static_chart = false;
-            }
-        }
-
-        if (this.contract_info.is_sold) {
-            this.contract_store.cacheProposalOpenContractResponse(response);
-        }
-    }
-
-    @action.bound
-    updateMargin(duration) {
-        const granularity = this.contract_store.contract_config.granularity;
-
-        this.margin = Math.floor(!granularity ? Math.max(300, (30 * duration) / (60 * 60) || 0) : 3 * granularity);
-    }
-
-    @action.bound
-    chartStateChange(state, option) {
-        this.chart_state = state;
-        const market_close_prop = 'isClosed';
-
-        // SmartChart has a weird interaction for getting scale 1:1,
-        // the process of loading an expired contract should follow this,
-        // show loading, first load the chart, then add the endEpoch then request for
-        // scale 1:1 and then wait till chart perform the scale 1:1 then
-        // hide the loading.
-        switch (state) {
-            case 'INITIAL':
-                this.is_chart_scaling = false;
-                // this is for deriv resizing from desktop to mobile,
-                // that show the loading till the chart reflect complete
-                if (!this.is_chart_loading) this.is_chart_loading = true;
-                break;
-            case 'READY':
-                setTimeout(
-                    action(() => (this.is_chart_scaling = true)),
-                    10
-                );
-                break;
-            case 'SCROLL_TO_LEFT':
-                // this Delay is for when the chart try to sacle 1:1 and we want to hide
-                // scale 1:1 jumping from the user
-                setTimeout(
-                    action(() => {
-                        this.is_chart_loading = false;
-                    }),
-                    20
-                );
-                break;
-            case 'MARKET_STATE_CHANGE':
-                if (option && market_close_prop in option) {
-                    this.is_market_closed = option[market_close_prop];
-                }
-                break;
-            default:
-        }
-    }
-
-    @action.bound
-    onClickCancel(contract_id) {
-        if (contract_id) {
-            WS.cancelContract(contract_id).then(response => {
-                if (response.error) {
-                    this.root_store.common.setServicesError({
-                        type: response.msg_type,
-                        ...response.error,
-                    });
-                } else {
-                    this.root_store.notifications.addNotificationMessage(contractCancelled());
-                }
-            });
-        }
-    }
-
-    @action.bound
-    onClickSell(contract_id) {
-        const { bid_price } = this.contract_info;
-        if (contract_id && bid_price) {
-            this.is_sell_requested = true;
-            WS.sell(contract_id, bid_price).then(this.handleSell);
-        }
-    }
-
-    @action.bound
-    handleSell(response) {
-        if (response.error) {
-            // If unable to sell due to error, give error via pop up if not in contract mode
-            this.is_sell_requested = false;
-            this.root_store.common.setServicesError({
-                type: response.msg_type,
-                ...response.error,
-            });
-        } else if (!response.error && response.sell) {
-            this.is_sell_requested = false;
-            // update contract store sell info after sell
-            this.sell_info = {
-                sell_price: response.sell.sold_for,
-                transaction_id: response.sell.transaction_id,
-            };
-            this.root_store.notifications.addNotificationMessage(
-                contractSold(this.root_store.client.currency, response.sell.sold_for)
-            );
-        }
-    }
-
-    forgetProposalOpenContract = () => {
-        if (this.subscriber) {
-            this.subscriber.unsubscribe();
-            delete this.subscriber;
-        }
-    };
-
-    @action.bound
-    removeErrorMessage() {
-        this.error_message = '';
-        this.has_error = false;
-    }
-
-    setAccountSwitcherListener = (contract_id, history) => {
-        this.onSwitchAccount(() => this.accountSwitcherListener(contract_id, history));
-    };
-
-    accountSwitcherListener = (contract_id, history) => {
-        // if contract had an error on the previous account
-        // try fetching it again for the new account
-        // in case it belongs to this account
-        if (this.has_error) {
-            this.removeErrorMessage();
-            this.onMount(contract_id);
-        } else {
-            history.push(routes.reports);
-        }
-        return Promise.resolve();
-    };
-
-    removeAccountSwitcherListener = () => {
-        this.disposeSwitchAccount();
-    };
-}
diff --git a/packages/trader/src/Stores/Modules/Contract/contract-store.js b/packages/trader/src/Stores/Modules/Contract/contract-store.js
deleted file mode 100644
index 94f5bfe8457a..000000000000
--- a/packages/trader/src/Stores/Modules/Contract/contract-store.js
+++ /dev/null
@@ -1,311 +0,0 @@
-import { action, extendObservable, observable, toJS } from 'mobx';
-import {
-    isEnded,
-    isEqualObject,
-    isMultiplierContract,
-    isDigitContract,
-    getDigitInfo,
-    getDisplayStatus,
-    WS,
-} from '@deriv/shared';
-import { createChartMarkers } from './Helpers/chart-markers';
-import { setLimitOrderBarriers, getLimitOrder } from './Helpers/limit-orders';
-import { getChartConfig, getContractUpdateConfig, getEndTime } from './Helpers/logic';
-import getValidationRules from './Constants/validation-rules';
-import BaseStore from '../../base-store';
-import { BARRIER_COLORS, BARRIER_LINE_STYLES } from '../SmartChart/Constants/barriers';
-import { isBarrierSupported } from '../SmartChart/Helpers/barriers';
-import { ChartBarrierStore } from '../SmartChart/chart-barrier-store';
-
-export default class ContractStore extends BaseStore {
-    constructor(root_store, { contract_id }) {
-        super({
-            root_store,
-            validation_rules: getValidationRules(),
-        });
-
-        this.root_store = root_store;
-        this.contract_id = contract_id;
-    }
-
-    // --- Observable properties ---
-    @observable digits_info = observable.object({});
-    @observable sell_info = observable.object({});
-
-    @observable.ref contract_config = {};
-    @observable display_status = 'purchased';
-    @observable is_ended = false;
-    @observable is_digit_contract = false;
-
-    // TODO: see how to handle errors.
-    @observable error_message = '';
-
-    @observable.ref contract_info = observable.object({});
-
-    @observable is_static_chart = false;
-    @observable end_time = null;
-
-    // Multiplier contract update config
-    @observable contract_update_take_profit = '';
-    @observable contract_update_stop_loss = '';
-    @observable has_contract_update_take_profit = false;
-    @observable has_contract_update_stop_loss = false;
-    @observable.ref contract_update_history = [];
-    contract_update_config = {};
-
-    // ---- chart props
-    @observable margin;
-    @observable.shallow barriers_array = [];
-    @observable.shallow markers_array = [];
-    @observable.ref marker = null;
-
-    // ---- Normal properties ---
-    is_ongoing_contract = false;
-
-    @action.bound
-    populateConfig(contract_info) {
-        const prev_contract_info = this.contract_info;
-        this.contract_info = contract_info;
-        this.end_time = getEndTime(this.contract_info);
-
-        // TODO: don't update the barriers & markers if they are not changed
-        this.updateBarriersArray(contract_info, this.root_store.ui.is_dark_mode_on);
-        this.markers_array = createChartMarkers(this.contract_info);
-        this.marker = calculate_marker(this.contract_info);
-
-        this.contract_config = getChartConfig(this.contract_info);
-        this.display_status = getDisplayStatus(this.contract_info);
-        this.is_ended = isEnded(this.contract_info);
-        this.is_digit_contract = isDigitContract(this.contract_info.contract_type);
-        // API doesn't return barrier for digit contracts (sometimes), remove this check once resolved
-        if (!this.contract_info.barrier && prev_contract_info.barrier && this.is_digit_contract) {
-            this.contract_info.barrier = prev_contract_info.barrier;
-        }
-
-        if (this.is_digit_contract) {
-            extendObservable(this.digits_info, getDigitInfo(this.digits_info, this.contract_info));
-        }
-
-        // force to sell the expired contract, in order to remove from portfolio
-        if (+contract_info.is_settleable === 1 && !contract_info.is_sold) {
-            WS.send({ sell_expired: 1 });
-        }
-
-        const is_multiplier = isMultiplierContract(this.contract_info.contract_type);
-
-        if (is_multiplier && contract_info.contract_id && contract_info.limit_order) {
-            this.populateContractUpdateConfig(this.contract_info);
-        }
-    }
-
-    cacheProposalOpenContractResponse = response => {
-        const { contract_id } = response.proposal_open_contract;
-        WS.storage.set({ proposal_open_contract: 1, contract_id }, response);
-    };
-
-    @action.bound
-    populateContractUpdateConfig(response) {
-        const contract_update_config = getContractUpdateConfig(response);
-        if (!isEqualObject(this.contract_update_config, contract_update_config)) {
-            Object.assign(this, contract_update_config);
-            this.contract_update_config = contract_update_config;
-
-            const { contract_update, error } = response;
-            if (contract_update && !error) {
-                this.contract_info.limit_order = Object.assign(this.contract_info.limit_order || {}, contract_update);
-            }
-        }
-    }
-
-    @action.bound
-    populateContractUpdateHistory({ contract_update_history }) {
-        this.root_store.modules.contract_replay.contract_store.contract_update_history = contract_update_history.sort(
-            (a, b) => b.order_date - a.order_date
-        );
-    }
-
-    updateBarriersArray(contract_info, is_dark_mode) {
-        if (!this.barriers_array.length) {
-            this.barriers_array = this.createBarriersArray(contract_info, is_dark_mode);
-            return;
-        }
-
-        const main_barrier = this.barriers_array[0];
-        if (contract_info) {
-            const { contract_type, barrier, high_barrier, low_barrier } = contract_info;
-
-            if (isBarrierSupported(contract_type) && (barrier || high_barrier)) {
-                main_barrier.updateBarriers(barrier || high_barrier, low_barrier);
-                main_barrier.updateBarrierColor(is_dark_mode);
-            }
-            if (
-                contract_info.contract_id &&
-                contract_info.contract_id === this.root_store.modules.contract_replay.contract_id
-            ) {
-                setLimitOrderBarriers({
-                    barriers: this.barriers_array,
-                    contract_info,
-                    contract_type,
-                    is_over: true,
-                });
-            }
-        }
-    }
-
-    createBarriersArray = (contract_info, is_dark_mode) => {
-        let barriers = [];
-        if (contract_info) {
-            const { contract_type, barrier, entry_spot, high_barrier, low_barrier } = contract_info;
-
-            if (isBarrierSupported(contract_type) && (barrier || high_barrier || entry_spot)) {
-                // create barrier only when it's available in response
-                const main_barrier = new ChartBarrierStore(barrier || high_barrier || entry_spot, low_barrier, null, {
-                    color: is_dark_mode ? BARRIER_COLORS.DARK_GRAY : BARRIER_COLORS.GRAY,
-                    line_style: BARRIER_LINE_STYLES.SOLID,
-                    not_draggable: true,
-                });
-
-                main_barrier.updateBarrierShade(true, contract_type);
-                barriers = [main_barrier];
-            }
-        }
-        return barriers;
-    };
-
-    @action.bound
-    clearContractUpdateConfigValues() {
-        Object.assign(this, getContractUpdateConfig(this.contract_info));
-        this.validation_errors.contract_update_stop_loss = [];
-        this.validation_errors.contract_update_take_profit = [];
-    }
-
-    @action.bound
-    onChange({ name, value }) {
-        this[name] = value;
-        this.validateProperty(name, this[name]);
-    }
-
-    @action.bound
-    updateLimitOrder() {
-        const limit_order = getLimitOrder(this);
-
-        WS.contractUpdate(this.contract_id, limit_order).then(response => {
-            if (response.error) {
-                this.root_store.common.setServicesError({
-                    type: response.msg_type,
-                    ...response.error,
-                });
-                return;
-            }
-
-            // Update contract store
-            this.populateContractUpdateConfig(response);
-            if (this.root_store.ui.is_history_tab_active) {
-                WS.contractUpdateHistory(this.contract_id).then(this.populateContractUpdateHistory);
-            }
-
-            // Update portfolio store
-            this.root_store.modules.portfolio.populateContractUpdate(response, this.contract_id);
-        });
-    }
-}
-
-function calculate_marker(contract_info) {
-    if (!contract_info || isMultiplierContract(contract_info.contract_type)) {
-        return null;
-    }
-    const {
-        transaction_ids,
-        tick_stream,
-        contract_id,
-        date_start,
-        date_expiry,
-        entry_tick,
-        exit_tick,
-        entry_tick_time,
-        exit_tick_time,
-        contract_type,
-        tick_count,
-        barrier_count,
-        barrier,
-        high_barrier,
-        low_barrier,
-    } = contract_info;
-    const ticks_epoch_array = tick_stream ? tick_stream.map(t => t.epoch) : [];
-    const is_digit_contract = isDigitContract(contract_type);
-
-    // window.ci = toJS(contract_info);
-
-    let price_array = [];
-    if (is_digit_contract) {
-        price_array = [];
-    } else if (+barrier_count === 1 && barrier) {
-        price_array = [+barrier];
-    } else if (+barrier_count === 2 && high_barrier && low_barrier) {
-        price_array = [+low_barrier, +high_barrier];
-    }
-
-    if (entry_tick) {
-        price_array.push(entry_tick);
-    }
-    if (exit_tick) {
-        price_array.push(exit_tick);
-    }
-
-    if (!date_start) {
-        return null;
-    }
-    // if we have not yet received the first POC response
-    if (!transaction_ids) {
-        const type = is_digit_contract ? 'DigitContract' : 'TickContract';
-        return {
-            type,
-            contract_info: toJS(contract_info),
-            key: `${contract_id}-date_start`,
-            epoch_array: [date_start],
-            price_array,
-        };
-    }
-
-    if (tick_count >= 1) {
-        if (!isDigitContract(contract_type)) {
-            // TickContract
-            return {
-                contract_info: toJS(contract_info),
-                type: 'TickContract',
-                key: `${contract_id}-date_start`,
-                epoch_array: [date_start, ...ticks_epoch_array],
-                price_array,
-            };
-        }
-        // DigitContract
-        return {
-            contract_info: toJS(contract_info),
-            type: 'DigitContract',
-            key: `${contract_id}-date_start`,
-            epoch_array: [date_start, ...ticks_epoch_array],
-            price_array,
-        };
-    }
-    // NonTickContract
-    if (!tick_count) {
-        // getEndTime returns undefined when contract is running.
-        const end_time = getEndTime(contract_info) || date_expiry;
-        // the order of items in epoch_array matches the NonTickContract params.
-        const epoch_array = [date_start, end_time];
-        if (entry_tick_time) {
-            epoch_array.push(entry_tick_time);
-        }
-        if (exit_tick_time) {
-            epoch_array.push(exit_tick_time);
-        }
-        return {
-            contract_info: toJS(contract_info),
-            type: 'NonTickContract',
-            key: `${contract_id}-date_start`,
-            epoch_array,
-            price_array,
-        };
-    }
-    return null;
-}
diff --git a/packages/trader/src/Stores/Modules/Contract/contract-trade-store.js b/packages/trader/src/Stores/Modules/Contract/contract-trade-store.js
deleted file mode 100644
index a859122f4519..000000000000
--- a/packages/trader/src/Stores/Modules/Contract/contract-trade-store.js
+++ /dev/null
@@ -1,195 +0,0 @@
-import { action, computed, observable, toJS } from 'mobx';
-import { isDesktop, isEnded, isMultiplierContract, LocalStore } from '@deriv/shared';
-import { switch_to_tick_chart } from './Helpers/chart-notifications';
-import ContractStore from './contract-store';
-import { isCallPut } from './Helpers/contract-type';
-import { getContractTypesConfig } from '../Trading/Constants/contract';
-import BaseStore from '../../base-store';
-
-export default class ContractTradeStore extends BaseStore {
-    // --- Observable properties ---
-    @observable.shallow contracts = [];
-    contracts_map = {};
-    @observable has_error = false;
-    @observable error_message = '';
-
-    // Chart specific observables
-    @observable granularity = +LocalStore.get('contract_trade.granularity') || 0;
-    @observable chart_type = LocalStore.get('contract_trade.chart_type') || 'mountain';
-
-    constructor({ root_store }) {
-        super({
-            root_store,
-        });
-
-        this.onSwitchAccount(this.accountSwitchListener);
-    }
-
-    // -------------------
-    // ----- Actions -----
-    // -------------------
-
-    @action.bound
-    updateChartType(type) {
-        LocalStore.set('contract_trade.chart_type', type);
-        this.chart_type = type;
-    }
-
-    @action.bound
-    updateGranularity(granularity) {
-        const tick_chart_types = ['mountain', 'line', 'colored_line', 'spline', 'baseline'];
-        if (granularity === 0 && tick_chart_types.indexOf(this.chart_type) === -1) {
-            this.chart_type = 'mountain';
-        }
-        LocalStore.set('contract_trade.granularity', granularity);
-        this.granularity = granularity;
-        if (this.granularity === 0) {
-            this.root_store.notifications.removeNotificationMessage(switch_to_tick_chart);
-        }
-    }
-
-    applicable_contracts = () => {
-        const { symbol: underlying, contract_type: trade_type } = this.root_store.modules.trade;
-        if (!trade_type || !underlying) {
-            return [];
-        }
-        let { trade_types } = getContractTypesConfig()[trade_type];
-        const is_call_put = isCallPut(trade_type);
-        if (is_call_put) {
-            // treat CALLE/PUTE and CALL/PUT the same
-            trade_types = ['CALLE', 'PUTE', 'CALL', 'PUT'];
-        }
-        return this.contracts
-            .filter(c => c.contract_info.underlying === underlying)
-            .filter(c => {
-                const info = c.contract_info;
-                const has_multiplier_contract_ended =
-                    isMultiplierContract(info.contract_type) && isEnded(c.contract_info);
-                // filter multiplier contract which has ended
-                return !has_multiplier_contract_ended;
-            })
-            .filter(c => {
-                const info = c.contract_info;
-
-                const trade_type_is_supported = trade_types.indexOf(info.contract_type) !== -1;
-                // both high_low & rise_fall have the same contract_types in POC response
-                // entry_spot=barrier means it is rise_fall contract (blame the api)
-                if (trade_type_is_supported && info.barrier && info.entry_tick && is_call_put) {
-                    if (`${+info.entry_tick}` === `${+info.barrier}`) {
-                        return trade_type === 'rise_fall' || trade_type === 'rise_fall_equal';
-                    }
-                    return trade_type === 'high_low';
-                }
-                return trade_type_is_supported;
-            });
-    };
-
-    @computed
-    get markers_array() {
-        const markers = this.applicable_contracts()
-            .map(c => c.marker)
-            .filter(m => m)
-            .map(m => toJS(m));
-        if (markers.length) {
-            markers[markers.length - 1].is_last_contract = true;
-        }
-        return markers;
-    }
-
-    @action.bound
-    addContract({
-        barrier,
-        contract_id,
-        contract_type,
-        start_time,
-        longcode,
-        underlying,
-        is_tick_contract,
-        limit_order = {},
-    }) {
-        const contract_exists = this.contracts_map[contract_id];
-        if (contract_exists) {
-            return;
-        }
-
-        const contract = new ContractStore(this.root_store, { contract_id });
-        contract.populateConfig({
-            date_start: start_time,
-            barrier,
-            contract_type,
-            longcode,
-            underlying,
-            limit_order,
-        });
-
-        this.contracts.push(contract);
-        this.contracts_map[contract_id] = contract;
-
-        if (is_tick_contract && !this.root_store.modules.trade.is_multiplier && this.granularity !== 0 && isDesktop()) {
-            this.root_store.notifications.addNotificationMessage(switch_to_tick_chart);
-        }
-    }
-
-    @action.bound
-    removeContract({ contract_id }) {
-        this.contracts = this.contracts.filter(c => c.contract_id !== contract_id);
-        delete this.contracts_map[contract_id];
-    }
-
-    @action.bound
-    accountSwitchListener() {
-        if (this.has_error) {
-            this.clearError();
-        }
-
-        return Promise.resolve();
-    }
-
-    @action.bound
-    onUnmount() {
-        this.disposeSwitchAccount();
-        // TODO: don't forget the tick history when switching to contract-replay-store
-    }
-
-    // Called from portfolio
-    @action.bound
-    updateProposal(response) {
-        if ('error' in response) {
-            this.has_error = true;
-            this.error_message = response.error.message;
-            return;
-        }
-        // Update the contract-store corresponding to this POC
-        if (response.proposal_open_contract) {
-            const contract_id = +response.proposal_open_contract.contract_id;
-            const contract = this.contracts_map[contract_id];
-            contract.populateConfig(response.proposal_open_contract);
-            if (response.proposal_open_contract.is_sold) {
-                this.root_store.notifications.removeNotificationMessage(switch_to_tick_chart);
-                contract.cacheProposalOpenContractResponse(response);
-            }
-        }
-    }
-
-    @computed
-    get last_contract() {
-        const applicable_contracts = this.applicable_contracts();
-        const length = applicable_contracts.length;
-        return length > 0 ? applicable_contracts[length - 1] : {};
-    }
-
-    @action.bound
-    clearError() {
-        this.error_message = '';
-        this.has_error = false;
-    }
-
-    @action.bound
-    getContractById(contract_id) {
-        return (
-            this.contracts_map[contract_id] ||
-            // or get contract from contract_replay store when user is on the contract details page
-            this.root_store.modules.contract_replay.contract_store
-        );
-    }
-}
diff --git a/packages/trader/src/Stores/Modules/Portfolio/Helpers/__tests__/format-response.js b/packages/trader/src/Stores/Modules/Portfolio/Helpers/__tests__/format-response.js
deleted file mode 100644
index fb859c4946d1..000000000000
--- a/packages/trader/src/Stores/Modules/Portfolio/Helpers/__tests__/format-response.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { expect } from 'chai';
-import React from 'react';
-import { formatPortfolioPosition } from '../format-response';
-
-describe('formatPortfolioPosition', () => {
-    const mock_active_symbols = [{ display_name: 'Volatility 25 Index', symbol: 'R_25' }];
-    const portfolio_pos = {
-        buy_price: 2500.5,
-        contract_id: 1234,
-        contract_type: 'ASIANU',
-        longcode: 'test \n test \n test',
-        payout: 3500.1,
-        symbol: 'R_25',
-        shortcode: 'ASIANU_R_25_',
-        transaction_id: 5678,
-    };
-
-    it('should return an object with values in object passed as argument', () => {
-        expect(formatPortfolioPosition(portfolio_pos, mock_active_symbols)).to.eql({
-            details: 'test <br /> test <br /> test',
-            display_name: 'Volatility 25 Index',
-            id: 1234,
-            indicative: 0,
-            is_unsupported: true,
-            payout: 3500.1,
-            contract_update: undefined,
-            purchase: 2500.5,
-            reference: +5678,
-            type: 'ASIANU',
-            contract_info: portfolio_pos,
-        });
-    });
-});
diff --git a/packages/trader/src/Stores/Modules/Portfolio/Helpers/details.js b/packages/trader/src/Stores/Modules/Portfolio/Helpers/details.js
deleted file mode 100644
index 481af3abb10b..000000000000
--- a/packages/trader/src/Stores/Modules/Portfolio/Helpers/details.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import { epochToMoment, formatMilliseconds, getDiffDuration } from '@deriv/shared';
-import { localize } from '@deriv/translations';
-
-export const getDurationUnitValue = obj_duration => {
-    const duration_ms = obj_duration.asMilliseconds() / 1000;
-    // Check with isEndTime to find out if value of duration has decimals
-    // for days we do not require precision for End Time value since users cannot select with timepicker if not in same day
-    // Seconds is the smallest End Time duration displayed thus we can keep the same formatting as normal Duration
-
-    if (duration_ms >= 86400000) {
-        const duration = duration_ms / (1000 * 60 * 60 * 24);
-        return Math.floor(duration);
-    } else if (duration_ms >= 3600000 && duration_ms < 86400000) {
-        const duration = duration_ms / (1000 * 60 * 60);
-        const is_end_time = isEndTime(duration);
-        const has_seconds = isEndTime(duration_ms / (1000 * 60));
-        const string_format = has_seconds ? 'HH[h] mm[m] ss[s]' : 'HH[h] mm[m]';
-
-        return is_end_time
-            ? formatMilliseconds(duration_ms, string_format)
-            : Math.floor(duration_ms / (1000 * 60 * 60));
-    } else if (duration_ms >= 60000 && duration_ms < 3600000) {
-        const duration = duration_ms / (1000 * 60);
-        const is_end_time = isEndTime(duration);
-        return is_end_time ? formatMilliseconds(duration_ms, 'mm[m] ss[s]') : Math.floor(duration_ms / (1000 * 60));
-    } else if (duration_ms >= 1000 && duration_ms < 60000) {
-        return Math.floor(duration_ms / 1000);
-    }
-    return Math.floor(duration_ms / 1000);
-};
-
-export const isEndTime = duration => duration % 1 !== 0;
-
-export const getUnitMap = () => {
-    return {
-        d: { name_plural: localize('days'), name_singular: localize('day') },
-        h: { name_plural: localize('hours'), name_singular: localize('hour') },
-        m: { name_plural: localize('minutes'), name_singular: localize('minute') },
-        s: { name: localize('seconds') },
-    };
-};
-
-export const getDurationUnitText = obj_duration => {
-    const unit_map = getUnitMap();
-    const duration_ms = obj_duration.asMilliseconds() / 1000;
-    // return empty suffix string if duration is End Time set except for days and seconds, refer to L18 and L19
-
-    if (duration_ms) {
-        if (duration_ms >= 86400000) {
-            const days_value = duration_ms / 86400000;
-            return days_value <= 2 ? unit_map.d.name_singular : unit_map.d.name_plural;
-        } else if (duration_ms >= 3600000 && duration_ms < 86400000) {
-            if (isEndTime(duration_ms / (1000 * 60 * 60))) return '';
-            return duration_ms === 3600000 ? unit_map.h.name_singular : unit_map.h.name_plural;
-        } else if (duration_ms >= 60000 && duration_ms < 3600000) {
-            if (isEndTime(duration_ms / (1000 * 60))) return '';
-            return duration_ms === 60000 ? unit_map.m.name_singular : unit_map.m.name_plural;
-        } else if (duration_ms >= 1000 && duration_ms < 60000) {
-            return unit_map.s.name;
-        }
-    }
-    return unit_map.s.name;
-};
-
-export const getDurationPeriod = contract_info =>
-    getDiffDuration(
-        epochToMoment(contract_info.date_start || contract_info.purchase_time),
-        epochToMoment(contract_info.date_expiry)
-    );
-
-export const getDurationTime = contract_info =>
-    contract_info.tick_count ? contract_info.tick_count : getDurationUnitValue(getDurationPeriod(contract_info));
diff --git a/packages/trader/src/Stores/Modules/Portfolio/Helpers/format-response.js b/packages/trader/src/Stores/Modules/Portfolio/Helpers/format-response.js
deleted file mode 100644
index 3ffbf2a4c600..000000000000
--- a/packages/trader/src/Stores/Modules/Portfolio/Helpers/format-response.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { getUnsupportedContracts } from 'Constants';
-import { getSymbolDisplayName } from 'Stores/Modules/Trading/Helpers/active-symbols';
-import { getMarketInformation } from 'Utils/Helpers/market-underlying';
-
-const isUnSupportedContract = portfolio_pos =>
-    !!getUnsupportedContracts()[portfolio_pos.contract_type] || // check unsupported contract type
-    !!portfolio_pos.is_forward_starting; // for forward start contracts
-
-export const formatPortfolioPosition = (portfolio_pos, active_symbols = [], indicative) => {
-    const purchase = parseFloat(portfolio_pos.buy_price);
-    const payout = parseFloat(portfolio_pos.payout);
-    const display_name = getSymbolDisplayName(active_symbols, getMarketInformation(portfolio_pos.shortcode).underlying);
-    const transaction_id =
-        portfolio_pos.transaction_id || (portfolio_pos.transaction_ids && portfolio_pos.transaction_ids.buy);
-
-    return {
-        contract_info: portfolio_pos,
-        details: portfolio_pos.longcode.replace(/\n/g, '<br />'),
-        display_name,
-        id: portfolio_pos.contract_id,
-        indicative: isNaN(indicative) || !indicative ? 0 : indicative,
-        payout,
-        purchase,
-        reference: +transaction_id,
-        type: portfolio_pos.contract_type,
-        is_unsupported: isUnSupportedContract(portfolio_pos),
-        contract_update: portfolio_pos.limit_order,
-    };
-};
diff --git a/packages/trader/src/Stores/Modules/Portfolio/Helpers/portfolio-notifications.js b/packages/trader/src/Stores/Modules/Portfolio/Helpers/portfolio-notifications.js
deleted file mode 100644
index 1d15a30fd7d9..000000000000
--- a/packages/trader/src/Stores/Modules/Portfolio/Helpers/portfolio-notifications.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-// import { Money } from '@deriv/components';
-import { localize, Localize } from '@deriv/translations';
-
-export const contractSold = (currency, sold_for, Money) => ({
-    key: 'contract_sold',
-    header: localize('Contract sold'),
-    message: (
-        <Localize
-            i18n_default_text='Contract was sold for <0 />.'
-            components={[<Money key={sold_for} amount={sold_for} currency={currency} show_currency />]}
-        />
-    ),
-    type: 'contract_sold',
-    size: 'small',
-    should_hide_close_btn: true,
-    is_auto_close: true,
-});
-
-export const contractCancelled = () => ({
-    key: 'contract_sold',
-    header: localize('Contract cancelled'),
-    message: (
-        <Localize
-            i18n_default_text='Contract was cancelled.'
-            // components={[ <Money key={sold_for} amount={sold_for} currency={currency} /> ]}
-        />
-    ),
-    type: 'contract_sold',
-    size: 'small',
-    should_hide_close_btn: true,
-    is_auto_close: true,
-});
diff --git a/packages/trader/src/Stores/Modules/Portfolio/portfolio-store.js b/packages/trader/src/Stores/Modules/Portfolio/portfolio-store.js
deleted file mode 100644
index 14b3269ecd34..000000000000
--- a/packages/trader/src/Stores/Modules/Portfolio/portfolio-store.js
+++ /dev/null
@@ -1,491 +0,0 @@
-import throttle from 'lodash.throttle';
-import { action, computed, observable, reaction } from 'mobx';
-import { createTransformer } from 'mobx-utils';
-import {
-    isEmptyObject,
-    isEnded,
-    isUserSold,
-    isValidToSell,
-    isMultiplierContract,
-    getCurrentTick,
-    getDisplayStatus,
-    WS,
-} from '@deriv/shared';
-import { formatPortfolioPosition } from './Helpers/format-response';
-import { contractCancelled, contractSold } from './Helpers/portfolio-notifications';
-import { getDurationPeriod, getDurationTime, getDurationUnitText } from './Helpers/details';
-import { getEndTime } from '../Contract/Helpers/logic';
-
-import BaseStore from '../../base-store';
-
-export default class PortfolioStore extends BaseStore {
-    @observable.shallow positions = [];
-    @observable.shallow all_positions = [];
-    positions_map = {};
-    @observable is_loading = false;
-    @observable error = '';
-    getPositionById = createTransformer(id => this.positions.find(position => +position.id === +id));
-
-    responseQueue = [];
-
-    @observable.shallow active_positions = [];
-
-    @action.bound
-    async initializePortfolio() {
-        if (this.has_subscribed_to_poc_and_transaction) {
-            this.clearTable();
-        }
-        this.is_loading = true;
-        await WS.wait('authorize');
-        WS.portfolio().then(this.portfolioHandler);
-        WS.subscribeProposalOpenContract(null, this.proposalOpenContractQueueHandler);
-        WS.subscribeTransaction(this.transactionHandler);
-        this.has_subscribed_to_poc_and_transaction = true;
-    }
-
-    @action.bound
-    clearTable() {
-        this.positions = [];
-        this.positions_map = {};
-        this.is_loading = false;
-        this.error = '';
-        this.updatePositions();
-        if (this.has_subscribed_to_poc_and_transaction) {
-            WS.forgetAll('proposal_open_contract', 'transaction');
-        }
-        this.has_subscribed_to_poc_and_transaction = false;
-    }
-
-    @action.bound
-    portfolioHandler(response) {
-        this.is_loading = false;
-        if ('error' in response) {
-            this.error = response.error.message;
-            return;
-        }
-        this.error = '';
-        if (response.portfolio.contracts) {
-            this.positions = response.portfolio.contracts
-                .map(pos => formatPortfolioPosition(pos, this.root_store.modules.trade.active_symbols))
-                .sort((pos1, pos2) => pos2.reference - pos1.reference); // new contracts first
-
-            this.positions.forEach(p => {
-                this.positions_map[p.id] = p;
-            });
-            this.updatePositions();
-        }
-    }
-
-    @action.bound
-    onBuyResponse({ contract_id, longcode, contract_type }) {
-        const new_pos = {
-            contract_id,
-            longcode,
-            contract_type,
-        };
-        this.pushNewPosition(new_pos);
-    }
-
-    @action.bound
-    async transactionHandler(response) {
-        if ('error' in response) {
-            this.error = response.error.message;
-        }
-        if (!response.transaction) return;
-        const { contract_id, action: act, longcode } = response.transaction;
-
-        if (act === 'buy') {
-            this.onBuyResponse({
-                contract_id,
-                longcode,
-                contract_type: '', // TODO: figure out the icon not showing
-            });
-        } else if (act === 'sell') {
-            const i = this.getPositionIndexById(contract_id);
-
-            if (!this.positions[i]) {
-                // On a page refresh, portfolio call has returend empty,
-                // even though we we get a transaction.sell response.
-                return;
-            }
-            this.positions[i].is_loading = true;
-
-            // Sometimes when we sell a contract, we don't get `proposal_open_contract` message with exit information and status as `sold`.
-            // This is to make sure that we get `proposal_open_contract` message with exit information and status as `sold`.
-            const subscriber = WS.subscribeProposalOpenContract(contract_id, poc => {
-                if (poc.error) {
-                    // Settles the contract based on transaction response when POC response is throwing error.
-                    this.populateResultDetailsFromTransaction(response);
-                } else {
-                    this.updateContractTradeStore(poc);
-                    this.updateContractReplayStore(poc);
-                    this.populateResultDetails(poc);
-                }
-                subscriber.unsubscribe();
-            });
-        }
-    }
-
-    deepClone = obj => JSON.parse(JSON.stringify(obj));
-    updateContractTradeStore(response) {
-        const contract_trade = this.root_store.modules.contract_trade;
-        const has_poc = !isEmptyObject(response.proposal_open_contract);
-        const has_error = !!response.error;
-        if (!has_poc && !has_error) return;
-        if (has_poc) {
-            contract_trade.addContract(this.deepClone(response.proposal_open_contract));
-            contract_trade.updateProposal(this.deepClone(response));
-        }
-    }
-
-    updateContractReplayStore(response) {
-        const contract_replay = this.root_store.modules.contract_replay;
-        if (contract_replay.contract_id === response.proposal_open_contract?.contract_id) {
-            contract_replay.populateConfig(response);
-        }
-    }
-
-    updateTradeStore(is_over, portfolio_position, is_limit_order_update) {
-        const trade = this.root_store.modules.trade;
-        if (!is_limit_order_update) {
-            trade.setPurchaseSpotBarrier(is_over, portfolio_position);
-        }
-        trade.updateLimitOrderBarriers(is_over, portfolio_position);
-    }
-
-    proposalOpenContractQueueHandler = response => {
-        this.responseQueue.push(response);
-        this.throttledUpdatePositions();
-    };
-
-    @action.bound
-    proposalOpenContractHandler(response) {
-        if ('error' in response) {
-            this.updateContractTradeStore(response);
-            this.updateContractReplayStore(response);
-            return;
-        }
-
-        const proposal = response.proposal_open_contract;
-        const portfolio_position = this.positions_map[proposal.contract_id];
-
-        if (!portfolio_position) return;
-        this.updateContractTradeStore(response);
-        this.updateContractReplayStore(response);
-
-        const formatted_position = formatPortfolioPosition(
-            proposal,
-            this.root_store.modules.trade.active_symbols,
-            portfolio_position.indicative
-        );
-        Object.assign(portfolio_position, formatted_position);
-
-        const prev_indicative = portfolio_position.indicative;
-        const new_indicative = +proposal.bid_price;
-        const profit_loss = +proposal.profit;
-
-        // fix for missing barrier and entry_spot in proposal_open_contract API response, only re-assign if valid
-        if (proposal.barrier) portfolio_position.barrier = +proposal.barrier;
-        if (proposal.entry_spot) portfolio_position.entry_spot = +proposal.entry_spot;
-
-        // store contract proposal details that require modifiers
-        portfolio_position.indicative = new_indicative;
-        portfolio_position.profit_loss = profit_loss;
-        portfolio_position.is_valid_to_sell = isValidToSell(proposal);
-
-        // store contract proposal details that do not require modifiers
-        portfolio_position.contract_info = proposal;
-
-        // for tick contracts
-        if (proposal.tick_count) {
-            const current_tick =
-                portfolio_position.current_tick > getCurrentTick(proposal)
-                    ? portfolio_position.current_tick
-                    : getCurrentTick(proposal);
-            portfolio_position.current_tick = current_tick;
-        }
-
-        if (new_indicative > prev_indicative) {
-            portfolio_position.status = 'profit';
-        } else if (new_indicative < prev_indicative) {
-            portfolio_position.status = 'loss';
-        } else {
-            portfolio_position.status = null;
-        }
-
-        if (this.hovered_position_id === portfolio_position.id) {
-            if (portfolio_position.contract_info.is_sold === 1) {
-                this.updateTradeStore(false, portfolio_position);
-            } else {
-                this.updateTradeStore(true, portfolio_position, true);
-            }
-        }
-
-        if (portfolio_position.contract_info.is_sold === 1) {
-            this.populateResultDetails(response);
-        }
-    }
-
-    @action.bound
-    onClickCancel(contract_id) {
-        const i = this.getPositionIndexById(contract_id);
-        if (this.positions[i].is_sell_requested) return;
-
-        this.positions[i].is_sell_requested = true;
-        if (contract_id) {
-            WS.cancelContract(contract_id).then(response => {
-                if (response.error) {
-                    this.root_store.common.setServicesError({
-                        type: response.msg_type,
-                        ...response.error,
-                    });
-                } else {
-                    this.root_store.notifications.addNotificationMessage(contractCancelled());
-                }
-            });
-        }
-    }
-
-    @action.bound
-    onClickSell(contract_id) {
-        const i = this.getPositionIndexById(contract_id);
-        if (this.positions[i].is_sell_requested) return;
-
-        const { bid_price } = this.positions[i].contract_info;
-        this.positions[i].is_sell_requested = true;
-        if (contract_id && typeof bid_price === 'number') {
-            WS.sell(contract_id, bid_price).then(this.handleSell);
-        }
-    }
-
-    @action.bound
-    handleSell(response) {
-        if (response.error) {
-            // If unable to sell due to error, give error via pop up if not in contract mode
-            const i = this.getPositionIndexById(response.echo_req.sell);
-            this.positions[i].is_sell_requested = false;
-
-            // invalidToken error will handle in socket-general.js
-            if (response.error.code !== 'InvalidToken') {
-                this.root_store.common.setServicesError({
-                    type: response.msg_type,
-                    ...response.error,
-                });
-            }
-        } else if (!response.error && response.sell) {
-            // update contract store sell info after sell
-            this.root_store.modules.contract_trade.sell_info = {
-                sell_price: response.sell.sold_for,
-                transaction_id: response.sell.transaction_id,
-            };
-            this.root_store.notifications.addNotificationMessage(
-                contractSold(this.root_store.client.currency, response.sell.sold_for)
-            );
-        }
-    }
-
-    @action.bound
-    populateResultDetailsFromTransaction = response => {
-        const transaction_response = response.transaction;
-        const { contract_id, amount } = transaction_response;
-        const i = this.getPositionIndexById(contract_id);
-        const position = this.positions[i];
-
-        if (!position) {
-            return;
-        }
-        const contract_info = { ...position.contract_info, is_sold: 1, is_expired: 1, status: 'complete' };
-
-        position.contract_info = contract_info;
-        position.is_valid_to_sell = false;
-        position.result = amount > contract_info.buy_price ? 'won' : 'lost';
-        position.status = 'complete';
-        position.is_sold = 1;
-        position.is_loading = false;
-
-        contract_info.exit_tick_time = contract_info.date_expiry;
-        contract_info.sell_price = String(amount);
-        contract_info.profit = amount - contract_info.buy_price;
-
-        this.updatePositions();
-    };
-
-    @action.bound
-    populateResultDetails = response => {
-        const contract_response = response.proposal_open_contract;
-        const i = this.getPositionIndexById(contract_response.contract_id);
-
-        if (!this.positions[i]) {
-            return;
-        }
-
-        this.positions[i].contract_info = contract_response;
-        this.positions[i].duration = getDurationTime(contract_response);
-        this.positions[i].duration_unit = getDurationUnitText(getDurationPeriod(contract_response));
-        this.positions[i].exit_spot = contract_response.exit_tick || contract_response.current_spot; // workaround if no exit_tick in proposal_open_contract, use latest spot
-        this.positions[i].is_valid_to_sell = isValidToSell(contract_response);
-        this.positions[i].result = getDisplayStatus(contract_response);
-        this.positions[i].profit_loss = +contract_response.profit;
-        this.positions[i].sell_time = getEndTime(contract_response) || contract_response.current_spot_time; // same as exit_spot, use latest spot time if no exit_tick_time
-        this.positions[i].sell_price = contract_response.sell_price;
-        this.positions[i].status = 'complete';
-
-        // fix for missing barrier and entry_spot
-        if (!this.positions[i].contract_info.barrier || !this.positions[i].contract_info.entry_spot) {
-            this.positions[i].contract_info.barrier = this.positions[i].barrier;
-            this.positions[i].contract_info.entry_spot = this.positions[i].entry_spot;
-        }
-
-        // remove exit_spot for manually sold contracts
-        if (isUserSold(contract_response)) this.positions[i].exit_spot = '-';
-
-        this.positions[i].is_loading = false;
-    };
-
-    @action.bound
-    populateContractUpdate({ contract_update }, contract_id) {
-        const position = this.getPositionById(contract_id);
-        if (position) {
-            Object.assign(position.contract_update || {}, contract_update);
-            this.updatePositions();
-        }
-    }
-
-    @action.bound
-    pushNewPosition(new_pos) {
-        const position = formatPortfolioPosition(new_pos, this.root_store.modules.trade.active_symbols);
-        if (this.positions_map[position.id]) return;
-
-        this.positions.unshift(position);
-        this.positions_map[position.id] = position;
-        this.updatePositions();
-    }
-
-    @action.bound
-    removePositionById(contract_id) {
-        const contract_idx = this.getPositionIndexById(contract_id);
-
-        this.positions.splice(contract_idx, 1);
-        delete this.positions_map[contract_id];
-        this.updatePositions();
-        this.root_store.modules.contract_trade.removeContract({ contract_id });
-    }
-
-    async accountSwitcherListener() {
-        await this.initializePortfolio();
-        return Promise.resolve();
-    }
-
-    @action.bound
-    onHoverPosition(is_over, position) {
-        const { symbol: underlying } = this.root_store.modules.trade;
-        if (
-            position.contract_info.underlying !== underlying ||
-            isEnded(position.contract_info) ||
-            !isMultiplierContract(position.type)
-        ) {
-            return;
-        }
-
-        this.hovered_position_id = is_over ? position.id : null;
-        this.updateTradeStore(is_over, position);
-    }
-
-    preSwitchAccountListener() {
-        this.clearTable();
-        return Promise.resolve();
-    }
-
-    @action.bound
-    logoutListener() {
-        this.clearTable();
-        return Promise.resolve();
-    }
-
-    @action.bound
-    networkStatusChangeListener(is_online) {
-        this.is_loading = !is_online;
-    }
-
-    @action.bound
-    onMount() {
-        this.onPreSwitchAccount(this.preSwitchAccountListener);
-        this.onSwitchAccount(this.accountSwitcherListener);
-        this.onNetworkStatusChange(this.networkStatusChangeListener);
-        this.onLogout(this.logoutListener);
-        if (this.positions.length === 0 && !this.has_subscribed_to_poc_and_transaction) {
-            // TODO: Optimise the way is_logged_in changes are detected for "logging in" and "already logged on" states
-            if (this.root_store.client.is_logged_in) {
-                this.initializePortfolio();
-            } else {
-                reaction(
-                    () => this.root_store.client.is_logged_in,
-                    () => {
-                        if (this.root_store.client.is_logged_in) {
-                            this.initializePortfolio();
-                        }
-                    }
-                );
-            }
-        }
-    }
-
-    @action.bound
-    onUnmount() {
-        this.disposePreSwitchAccount();
-        this.disposeSwitchAccount();
-        this.disposeLogout();
-        this.clearTable();
-    }
-
-    getPositionIndexById(contract_id) {
-        return this.positions.findIndex(pos => +pos.id === +contract_id);
-    }
-
-    @computed
-    get totals() {
-        let indicative = 0;
-        let payout = 0;
-        let purchase = 0;
-
-        this.positions.forEach(portfolio_pos => {
-            indicative += +portfolio_pos.indicative;
-            payout += +portfolio_pos.payout;
-            purchase += +portfolio_pos.purchase;
-        });
-        return {
-            indicative,
-            payout,
-            purchase,
-        };
-    }
-
-    @action.bound
-    setActivePositions() {
-        this.active_positions = this.positions.filter(portfolio_pos => !getEndTime(portfolio_pos.contract_info));
-        this.all_positions = [...this.positions];
-    }
-
-    updatePositions = () => {
-        this.responseQueue.forEach(res => this.proposalOpenContractHandler(res));
-        this.responseQueue = [];
-        this.setActivePositions();
-    };
-
-    throttledUpdatePositions = throttle(this.updatePositions, 500);
-
-    @computed
-    get is_active_empty() {
-        return !this.is_loading && this.active_positions.length === 0;
-    }
-
-    @computed
-    get active_positions_count() {
-        return this.active_positions.length || 0;
-    }
-
-    @computed
-    get is_empty() {
-        return !this.is_loading && this.all_positions.length === 0;
-    }
-}
diff --git a/packages/trader/src/Stores/Modules/Profit/Helpers/format-request.js b/packages/trader/src/Stores/Modules/Profit/Helpers/format-request.js
deleted file mode 100644
index 16b0da92fba9..000000000000
--- a/packages/trader/src/Stores/Modules/Profit/Helpers/format-request.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { epochToMoment, toMoment } from '@deriv/shared';
-
-const getDateTo = (partial_fetch_time, date_to) => {
-    const today = toMoment().startOf('day').unix();
-    if (date_to && today > date_to) {
-        return date_to;
-    } else if (partial_fetch_time) {
-        return epochToMoment(today).add(1, 'd').subtract(1, 's').unix();
-    }
-    return epochToMoment(today).add(1, 'd').subtract(1, 's').unix();
-};
-
-const getDateFrom = (should_load_partially, partial_fetch_time, date_from, date_to) => {
-    const today = toMoment().startOf('day').unix();
-    if (today > date_to) {
-        return date_from;
-    }
-    return should_load_partially && partial_fetch_time ? partial_fetch_time : date_from;
-};
-
-const shouldSendDateFrom = (date_from, should_load_partially, partial_fetch_time, date_to) => {
-    const today = toMoment().startOf('day').unix();
-    if (today > date_to) {
-        return !!date_from || should_load_partially;
-    }
-    return should_load_partially ? partial_fetch_time || date_from : !!date_from || false;
-};
-
-const getDateBoundaries = (date_from, date_to, partial_fetch_time, should_load_partially = false) => ({
-    // eslint-disable-next-line max-len
-    ...(shouldSendDateFrom(date_from, should_load_partially, partial_fetch_time, date_to) && {
-        date_from: getDateFrom(should_load_partially, partial_fetch_time, date_from, date_to),
-    }),
-    ...((date_to || should_load_partially) && { date_to: getDateTo(partial_fetch_time, date_to) }),
-});
-
-export default getDateBoundaries;
diff --git a/packages/trader/src/Stores/Modules/Profit/Helpers/format-response.js b/packages/trader/src/Stores/Modules/Profit/Helpers/format-response.js
deleted file mode 100644
index 645ba1795f39..000000000000
--- a/packages/trader/src/Stores/Modules/Profit/Helpers/format-response.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { formatMoney, toMoment } from '@deriv/shared';
-
-import { getMarketInformation } from 'Utils/Helpers/market-underlying';
-import { getSymbolDisplayName } from '../../Trading/Helpers/active-symbols';
-
-export const formatProfitTableTransactions = (transaction, currency, active_symbols = []) => {
-    const format_string = 'DD MMM YYYY HH:mm:ss';
-    const purchase_time = `${toMoment(+transaction.purchase_time).format(format_string)}`;
-    const purchase_time_unix = transaction.purchase_time;
-    const sell_time = `${toMoment(+transaction.sell_time).format(format_string)}`;
-    const payout = parseFloat(transaction.payout);
-    const sell_price = parseFloat(transaction.sell_price);
-    const buy_price = parseFloat(transaction.buy_price);
-    const profit_loss = formatMoney(currency, Number(sell_price - buy_price), true);
-    const display_name = getSymbolDisplayName(active_symbols, getMarketInformation(transaction.shortcode).underlying);
-
-    return {
-        ...transaction,
-        ...{
-            payout,
-            sell_price,
-            buy_price,
-            profit_loss,
-            sell_time,
-            purchase_time,
-            display_name,
-            purchase_time_unix,
-        },
-    };
-};
diff --git a/packages/trader/src/Stores/Modules/Profit/profit-store.js b/packages/trader/src/Stores/Modules/Profit/profit-store.js
deleted file mode 100644
index 00c4c07e137c..000000000000
--- a/packages/trader/src/Stores/Modules/Profit/profit-store.js
+++ /dev/null
@@ -1,168 +0,0 @@
-import debounce from 'lodash.debounce';
-import { action, computed, observable } from 'mobx';
-import { toMoment, WS } from '@deriv/shared';
-
-import getDateBoundaries from './Helpers/format-request';
-import { formatProfitTableTransactions } from './Helpers/format-response';
-import BaseStore from '../../base-store';
-
-const batch_size = 50;
-const delay_on_scroll_time = 150;
-
-export default class ProfitTableStore extends BaseStore {
-    @observable data = [];
-    @observable date_from = null;
-    @observable date_to = toMoment().startOf('day').add(1, 'd').subtract(1, 's').unix();
-    @observable error = '';
-    @observable has_loaded_all = false;
-    @observable is_loading = false;
-    @observable filtered_date_range;
-
-    // `client_loginid` is only used to detect if this is in sync with the client-store, don't rely on
-    // this for calculations. Use the client.currency instead.
-    @observable client_loginid = '';
-
-    @computed
-    get total_profit() {
-        return this.data.reduce((previous, current) => {
-            const buy_price = Number(parseFloat(current.buy_price));
-            const sell_price = Number(parseFloat(current.sell_price));
-            const pl = sell_price - buy_price;
-            return previous + pl;
-        }, 0);
-    }
-
-    @computed
-    get is_empty() {
-        return !this.is_loading && this.data.length === 0;
-    }
-
-    @computed
-    get has_selected_date() {
-        return !!(this.date_from || this.date_to);
-    }
-
-    shouldFetchNextBatch() {
-        if (this.has_loaded_all || this.is_loading) return false;
-        return true;
-    }
-
-    @action.bound
-    async fetchNextBatch() {
-        if (!this.shouldFetchNextBatch()) return;
-        this.is_loading = true;
-
-        const response = await WS.profitTable(
-            batch_size,
-            this.data.length,
-            getDateBoundaries(this.date_from, this.date_to, 0, false)
-        );
-
-        this.profitTableResponseHandler(response);
-    }
-
-    @action.bound
-    profitTableResponseHandler(response) {
-        if ('error' in response) {
-            this.error = response.error.message;
-            return;
-        }
-
-        const formatted_transactions = response.profit_table.transactions.map(transaction =>
-            formatProfitTableTransactions(
-                transaction,
-                this.root_store.client.currency,
-                this.root_store.modules.trade.active_symbols
-            )
-        );
-
-        this.data = [...this.data, ...formatted_transactions];
-        this.has_loaded_all = formatted_transactions.length < batch_size;
-        this.is_loading = false;
-    }
-
-    fetchOnScroll = debounce(left => {
-        if (left < 1500) {
-            this.fetchNextBatch();
-        }
-    }, delay_on_scroll_time);
-
-    @action.bound
-    handleScroll(event) {
-        const { scrollTop, scrollHeight, clientHeight } = event.target;
-        const left_to_scroll = scrollHeight - (scrollTop + clientHeight);
-        this.fetchOnScroll(left_to_scroll);
-    }
-
-    @action.bound
-    networkStatusChangeListener(is_online) {
-        this.is_loading = !is_online;
-    }
-
-    @action.bound
-    async onMount() {
-        this.assertHasValidCache(this.client_loginid, this.clearDateFilter, WS.forgetAll.bind(null, 'proposal'));
-        this.client_loginid = this.root_store.client.loginid;
-        this.onSwitchAccount(this.accountSwitcherListener);
-        this.onNetworkStatusChange(this.networkStatusChangeListener);
-        await WS.wait('authorize');
-
-        /* Caching won't work for profit_table because date filtering happens based on `buy_time` of a contract.
-        If we already have a cache for a period and if we sell a contract that was purchased in that period
-        then the sold contract won't be there in profit_table when visited again unless we fetch it again.
-        Caching will only work if the date filtering happens based on `sell_time` of a contract in BE. */
-        this.clearTable();
-        this.fetchNextBatch();
-    }
-
-    /* DO NOT call clearDateFilter() upon unmounting the component, date filters should stay
-    as we change tab or click on any contract for later references as discussed with UI/UX and QA */
-    @action.bound
-    onUnmount() {
-        this.disposeSwitchAccount();
-        WS.forgetAll('proposal');
-    }
-
-    @computed
-    get totals() {
-        let profit_loss = 0;
-
-        this.data.forEach(transaction => {
-            profit_loss += parseFloat(transaction.profit_loss.replace(/,/g, ''));
-        });
-        return {
-            profit_loss: profit_loss.toString(),
-        };
-    }
-
-    @action.bound
-    accountSwitcherListener() {
-        return new Promise(resolve => {
-            this.clearTable();
-            this.clearDateFilter();
-            return resolve(this.fetchNextBatch());
-        });
-    }
-
-    @action.bound
-    clearTable() {
-        this.data = [];
-        this.has_loaded_all = false;
-        this.is_loading = false;
-    }
-
-    @action.bound
-    clearDateFilter() {
-        this.date_from = null;
-        this.date_to = toMoment().startOf('day').add(1, 'd').subtract(1, 's').unix();
-    }
-
-    @action.bound
-    handleDateChange(date_values, { date_range } = {}) {
-        this.filtered_date_range = date_range;
-        this.date_from = date_values?.from ?? (date_values.is_batch ? null : this.date_from);
-        this.date_to = date_values?.to ?? this.date_to;
-        this.clearTable();
-        this.fetchNextBatch();
-    }
-}
diff --git a/packages/trader/src/Stores/Modules/Statement/Helpers/__tests__/format-response.spec.js b/packages/trader/src/Stores/Modules/Statement/Helpers/__tests__/format-response.spec.js
deleted file mode 100644
index 3f2d1fb29333..000000000000
--- a/packages/trader/src/Stores/Modules/Statement/Helpers/__tests__/format-response.spec.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { expect } from 'chai';
-import { formatStatementTransaction } from '../format-response';
-import { toTitleCase } from '@deriv/shared';
-
-describe('formatStatementTransaction', () => {
-    const constant = {
-        id: 1234,
-        action_type: 'buy',
-    };
-
-    const currency = 'USD';
-    let transaction = {
-        action_type: constant.action_type,
-        transaction_time: 123456789,
-        transaction_id: constant.id,
-        payout: 1000,
-        amount: 2000,
-        balance_after: 3000,
-        longcode: 'test \n test \n test',
-        contract_id: constant.id,
-        app_id: constant.id,
-        shortcode: 'shortcode',
-        purchase_time: 123456789,
-    };
-
-    let expected_result = {
-        action: toTitleCase(constant.action_type),
-        action_type: constant.action_type,
-        date: '29 Nov 1973 21:33:09',
-        display_name: '',
-        refid: constant.id,
-        payout: '1,000.00',
-        amount: '2,000.00',
-        balance: '3,000.00',
-        desc: 'test <br /> test <br /> test',
-        id: constant.id,
-        app_id: constant.id,
-        shortcode: 'shortcode',
-        purchase_time: 123456789,
-        transaction_time: 123456789,
-    };
-
-    it('should return an object with values of object passed as argument', () => {
-        expect(formatStatementTransaction(transaction, currency)).to.eql(expected_result);
-    });
-
-    it('should return payout, amount and balance as -', () => {
-        transaction.payout = NaN;
-        transaction.amount = NaN;
-        transaction.balance_after = NaN;
-
-        expected_result.payout = '-';
-        expected_result.amount = '-';
-        expected_result.balance = '-';
-
-        expect(formatStatementTransaction(transaction, currency)).to.eql(expected_result);
-    });
-});
diff --git a/packages/trader/src/Stores/Modules/Statement/Helpers/format-response.js b/packages/trader/src/Stores/Modules/Statement/Helpers/format-response.js
deleted file mode 100644
index 93864acfda6d..000000000000
--- a/packages/trader/src/Stores/Modules/Statement/Helpers/format-response.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { formatMoney, toTitleCase, toMoment } from '@deriv/shared';
-
-import { localize } from '@deriv/translations';
-import { getMarketInformation } from 'Utils/Helpers/market-underlying';
-
-import { getSymbolDisplayName } from '../../Trading/Helpers/active-symbols';
-
-export const formatStatementTransaction = (transaction, currency, active_symbols = []) => {
-    const format_string = 'DD MMM YYYY HH:mm:ss';
-    const transaction_time = toMoment(transaction.transaction_time).format(format_string);
-    const payout = parseFloat(transaction.payout);
-    const amount = parseFloat(transaction.amount);
-    const balance = parseFloat(transaction.balance_after);
-    const should_exclude_currency = true;
-    const shortcode = ['buy', 'sell'].includes(transaction.action_type) ? transaction.shortcode : null;
-    const display_name = shortcode
-        ? getSymbolDisplayName(active_symbols, getMarketInformation(shortcode).underlying)
-        : '';
-
-    return {
-        action: localize(toTitleCase(transaction.action_type) /* localize-ignore */), // handled in static_strings_app.js: 'Buy', 'Sell', 'Deposit', 'Withdrawal'
-        date: transaction_time,
-        display_name,
-        refid: transaction.transaction_id,
-        payout: isNaN(payout) ? '-' : formatMoney(currency, payout, should_exclude_currency),
-        amount: isNaN(amount) ? '-' : formatMoney(currency, amount, should_exclude_currency),
-        balance: isNaN(balance) ? '-' : formatMoney(currency, balance, should_exclude_currency),
-        desc: transaction.longcode.replace(/\n/g, '<br />'),
-        id: transaction.contract_id,
-        app_id: transaction.app_id,
-        shortcode,
-        action_type: transaction.action_type,
-        purchase_time: transaction.purchase_time,
-        transaction_time: transaction.transaction_time,
-        ...(transaction.withdrawal_details && {
-            withdrawal_details: transaction.withdrawal_details,
-            longcode: transaction.longcode,
-        }),
-    };
-};
diff --git a/packages/trader/src/Stores/Modules/Statement/statement-store.js b/packages/trader/src/Stores/Modules/Statement/statement-store.js
deleted file mode 100644
index c7b70a83c6ed..000000000000
--- a/packages/trader/src/Stores/Modules/Statement/statement-store.js
+++ /dev/null
@@ -1,196 +0,0 @@
-import debounce from 'lodash.debounce';
-import { action, computed, observable, runInAction } from 'mobx';
-import { toMoment, WS } from '@deriv/shared';
-
-import { formatStatementTransaction } from './Helpers/format-response';
-import getDateBoundaries from '../Profit/Helpers/format-request';
-import BaseStore from '../../base-store';
-
-const batch_size = 100; // request response limit
-const delay_on_scroll_time = 150; // fetch debounce delay on scroll
-
-export default class StatementStore extends BaseStore {
-    @observable data = [];
-    @observable is_loading = false;
-    @observable has_loaded_all = false;
-    @observable date_from = null;
-    @observable date_to = toMoment().startOf('day').add(1, 'd').subtract(1, 's').unix();
-    @observable error = '';
-    @observable action_type = 'all';
-    @observable filtered_date_range;
-
-    // `client_loginid` is only used to detect if this is in sync with the client-store, don't rely on
-    // this for calculations. Use the client.currency instead.
-    @observable client_loginid = '';
-
-    @observable account_statistics = {};
-
-    @computed
-    get is_empty() {
-        return !this.is_loading && this.data.length === 0;
-    }
-
-    @computed
-    get has_selected_date() {
-        return !!(this.date_from || this.date_to);
-    }
-
-    @action.bound
-    clearTable() {
-        this.data = [];
-        this.has_loaded_all = false;
-        this.is_loading = false;
-    }
-
-    @action.bound
-    clearDateFilter() {
-        this.date_from = null;
-        this.date_to = toMoment().startOf('day').add(1, 'd').subtract(1, 's').unix();
-        this.partial_fetch_time = 0;
-    }
-
-    shouldFetchNextBatch(should_load_partially) {
-        if (!should_load_partially && (this.has_loaded_all || this.is_loading)) return false;
-        const today = toMoment().startOf('day').add(1, 'd').subtract(1, 's').unix();
-        if (this.date_to < today) return !should_load_partially && this.partial_fetch_time;
-        return true;
-    }
-
-    @action.bound
-    async fetchNextBatch(should_load_partially = false) {
-        if (!this.shouldFetchNextBatch(should_load_partially)) return;
-        this.is_loading = true;
-
-        const optional_arguments = getDateBoundaries(
-            this.date_from,
-            this.date_to,
-            this.partial_fetch_time,
-            should_load_partially
-        );
-
-        if (this.action_type !== 'all') {
-            optional_arguments.action_type = this.action_type;
-        }
-
-        const response = await WS.statement(
-            batch_size,
-            !should_load_partially ? this.data.length : undefined,
-            optional_arguments
-        );
-        this.statementHandler(response, should_load_partially);
-    }
-
-    @action.bound
-    statementHandler(response, should_load_partially) {
-        if ('error' in response) {
-            this.error = response.error.message;
-            return;
-        }
-
-        const formatted_transactions = response.statement.transactions.map(transaction =>
-            formatStatementTransaction(
-                transaction,
-                this.root_store.client.currency,
-                this.root_store.modules.trade.active_symbols
-            )
-        );
-
-        if (should_load_partially) {
-            this.data = [...formatted_transactions, ...this.data];
-        } else {
-            this.data = [...this.data, ...formatted_transactions];
-        }
-        this.has_loaded_all = !should_load_partially && formatted_transactions.length < batch_size;
-        this.is_loading = false;
-        if (formatted_transactions.length > 0) {
-            this.partial_fetch_time = toMoment().unix();
-        }
-    }
-
-    @action.bound
-    handleDateChange(date_values, { date_range } = {}) {
-        this.filtered_date_range = date_range;
-        this.date_from = date_values?.from ?? (date_values.is_batch ? null : this.date_from);
-        this.date_to = date_values?.to ?? this.date_to;
-        this.clearTable();
-        this.fetchNextBatch();
-    }
-
-    @action.bound
-    handleFilterChange(filterValue = {}) {
-        this.action_type = filterValue;
-        this.clearTable();
-        this.fetchNextBatch();
-    }
-
-    fetchOnScroll = debounce(left => {
-        if (left < 1500) {
-            this.fetchNextBatch();
-        }
-    }, delay_on_scroll_time);
-
-    @action.bound
-    handleScroll(event) {
-        const { scrollTop, scrollHeight, clientHeight } = event.target;
-        const left_to_scroll = scrollHeight - (scrollTop + clientHeight);
-
-        this.fetchOnScroll(left_to_scroll);
-    }
-
-    @action.bound
-    async loadAccountStatistics() {
-        this.account_statistics = {};
-        const { client } = this.root_store;
-        const is_mx_mlt = client.standpoint.iom || client.standpoint.malta;
-        if (is_mx_mlt) {
-            const response_account_statistics = await WS.accountStatistics();
-            runInAction(() => {
-                if (response_account_statistics.error) {
-                    this.account_statistics = {};
-                    return;
-                }
-
-                this.account_statistics = response_account_statistics.account_statistics;
-            });
-        }
-    }
-
-    @action.bound
-    accountSwitcherListener() {
-        return new Promise(resolve => {
-            this.clearTable();
-            this.clearDateFilter();
-            this.loadAccountStatistics();
-            return resolve(this.fetchNextBatch());
-        });
-    }
-
-    @action.bound
-    networkStatusChangeListener(is_online) {
-        this.is_loading = !is_online;
-    }
-
-    @action.bound
-    async onMount() {
-        this.assertHasValidCache(
-            this.client_loginid,
-            this.clearDateFilter,
-            this.clearTable,
-            WS.forgetAll.bind(null, 'proposal')
-        );
-        this.client_loginid = this.root_store.client.loginid;
-        this.onSwitchAccount(this.accountSwitcherListener);
-        this.onNetworkStatusChange(this.networkStatusChangeListener);
-        await WS.wait('authorize');
-        this.fetchNextBatch(true);
-        this.loadAccountStatistics();
-    }
-
-    /* DO NOT call clearDateFilter() upon unmounting the component, date filters should stay
-    as we change tab or click on any contract for later references as discussed with UI/UX and QA */
-    @action.bound
-    onUnmount() {
-        this.disposeSwitchAccount();
-        WS.forgetAll('proposal');
-    }
-}
diff --git a/packages/trader/src/Stores/Modules/Trading/Actions/contract-type.js b/packages/trader/src/Stores/Modules/Trading/Actions/contract-type.js
index 844e16e7b0d7..acc3f65c628d 100644
--- a/packages/trader/src/Stores/Modules/Trading/Actions/contract-type.js
+++ b/packages/trader/src/Stores/Modules/Trading/Actions/contract-type.js
@@ -1,4 +1,4 @@
-import ContractType from '../Helpers/contract-type';
+import { ContractType } from '@deriv/shared';
 
 export const onChangeContractTypeList = ({ contract_types_list, contract_type }) =>
     ContractType.getContractType(contract_types_list, contract_type);
diff --git a/packages/trader/src/Stores/Modules/Trading/Actions/duration.js b/packages/trader/src/Stores/Modules/Trading/Actions/duration.js
index e60912493fd0..98622f15926b 100644
--- a/packages/trader/src/Stores/Modules/Trading/Actions/duration.js
+++ b/packages/trader/src/Stores/Modules/Trading/Actions/duration.js
@@ -1,5 +1,4 @@
-import ContractType from '../Helpers/contract-type';
-import { getExpiryType, getDurationMinMaxValues } from '../Helpers/duration';
+import { ContractType, getExpiryType, getDurationMinMaxValues} from '@deriv/shared';
 
 export const onChangeExpiry = store => {
     const contract_expiry_type = getExpiryType(store);
diff --git a/packages/trader/src/Stores/Modules/Trading/Actions/start-date.js b/packages/trader/src/Stores/Modules/Trading/Actions/start-date.js
index dda9da7604fb..b46f5438110b 100644
--- a/packages/trader/src/Stores/Modules/Trading/Actions/start-date.js
+++ b/packages/trader/src/Stores/Modules/Trading/Actions/start-date.js
@@ -1,4 +1,4 @@
-import ContractType from '../Helpers/contract-type';
+import { ContractType } from '@deriv/shared';
 
 export const onChangeStartDate = async store => {
     const { contract_type, duration_unit, start_date } = store;
diff --git a/packages/trader/src/Stores/Modules/Trading/Actions/symbol.js b/packages/trader/src/Stores/Modules/Trading/Actions/symbol.js
index 34597c0beb4a..bcf043aa0c14 100644
--- a/packages/trader/src/Stores/Modules/Trading/Actions/symbol.js
+++ b/packages/trader/src/Stores/Modules/Trading/Actions/symbol.js
@@ -1,4 +1,4 @@
-import ContractType from '../Helpers/contract-type';
+import { ContractType } from '@deriv/shared';
 
 export const onChangeSymbolAsync = async symbol => {
     await ContractType.buildContractTypesConfig(symbol);
diff --git a/packages/trader/src/Stores/Modules/Trading/Constants/contract.js b/packages/trader/src/Stores/Modules/Trading/Constants/contract.js
deleted file mode 100644
index 938bd50dc811..000000000000
--- a/packages/trader/src/Stores/Modules/Trading/Constants/contract.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import { localize } from '@deriv/translations';
-import { shouldShowCancellation, shouldShowExpiration } from '@deriv/shared';
-
-export const getLocalizedBasis = () => ({
-    payout: localize('Payout'),
-    stake: localize('Stake'),
-    multiplier: localize('Multiplier'),
-});
-
-/**
- * components can be undef or an array containing any of: 'start_date', 'barrier', 'last_digit'
- *     ['duration', 'amount'] are omitted, as they're available in all contract types
- */
-export const getContractTypesConfig = symbol => ({
-    rise_fall: {
-        title: localize('Rise/Fall'),
-        trade_types: ['CALL', 'PUT'],
-        basis: ['stake', 'payout'],
-        components: ['start_date'],
-        barrier_count: 0,
-    },
-    rise_fall_equal: {
-        title: localize('Rise/Fall'),
-        trade_types: ['CALLE', 'PUTE'],
-        basis: ['stake', 'payout'],
-        components: ['start_date'],
-        barrier_count: 0,
-    },
-    high_low: {
-        title: localize('Higher/Lower'),
-        trade_types: ['CALL', 'PUT'],
-        basis: ['stake', 'payout'],
-        components: ['barrier'],
-        barrier_count: 1,
-    },
-    touch: {
-        title: localize('Touch/No Touch'),
-        trade_types: ['ONETOUCH', 'NOTOUCH'],
-        basis: ['stake', 'payout'],
-        components: ['barrier'],
-    },
-    end: {
-        title: localize('Ends In/Ends Out'),
-        trade_types: ['EXPIRYMISS', 'EXPIRYRANGE'],
-        basis: ['stake', 'payout'],
-        components: ['barrier'],
-    },
-    stay: {
-        title: localize('Stays In/Goes Out'),
-        trade_types: ['RANGE', 'UPORDOWN'],
-        basis: ['stake', 'payout'],
-        components: ['barrier'],
-    },
-    asian: {
-        title: localize('Asian Up/Asian Down'),
-        trade_types: ['ASIANU', 'ASIAND'],
-        basis: ['stake', 'payout'],
-        components: [],
-    },
-    match_diff: {
-        title: localize('Matches/Differs'),
-        trade_types: ['DIGITMATCH', 'DIGITDIFF'],
-        basis: ['stake', 'payout'],
-        components: ['last_digit'],
-    },
-    even_odd: {
-        title: localize('Even/Odd'),
-        trade_types: ['DIGITODD', 'DIGITEVEN'],
-        basis: ['stake', 'payout'],
-        components: [],
-    },
-    over_under: {
-        title: localize('Over/Under'),
-        trade_types: ['DIGITOVER', 'DIGITUNDER'],
-        basis: ['stake', 'payout'],
-        components: ['last_digit'],
-    },
-    // TODO: update the rest of these contracts config
-    lb_call: { title: localize('Close-to-Low'), trade_types: ['LBFLOATCALL'], basis: ['multiplier'], components: [] },
-    lb_put: { title: localize('High-to-Close'), trade_types: ['LBFLOATPUT'], basis: ['multiplier'], components: [] },
-    lb_high_low: { title: localize('High-to-Low'), trade_types: ['LBHIGHLOW'], basis: ['multiplier'], components: [] },
-    tick_high_low: {
-        title: localize('High Tick/Low Tick'),
-        trade_types: ['TICKHIGH', 'TICKLOW'],
-        basis: [],
-        components: [],
-    },
-    run_high_low: {
-        title: localize('Only Ups/Only Downs'),
-        trade_types: ['RUNHIGH', 'RUNLOW'],
-        basis: [],
-        components: [],
-    },
-    reset: {
-        title: localize('Reset Up/Reset Down'),
-        trade_types: ['RESETCALL', 'RESETPUT'],
-        basis: [],
-        components: [],
-    },
-    callputspread: {
-        title: localize('Spread Up/Spread Down'),
-        trade_types: ['CALLSPREAD', 'PUTSPREAD'],
-        basis: [],
-        components: [],
-    },
-    multiplier: {
-        title: localize('Multipliers'),
-        trade_types: ['MULTUP', 'MULTDOWN'],
-        basis: ['stake'],
-        components: [
-            'take_profit',
-            'stop_loss',
-            ...(shouldShowCancellation(symbol) ? ['cancellation'] : []),
-            ...(shouldShowExpiration(symbol) ? ['expiration'] : []),
-        ],
-        config: { hide_duration: true },
-    }, // hide Duration for Multiplier contracts for now
-});
-
-export const getContractCategoriesConfig = () => ({
-    [localize('Multipliers')]: ['multiplier'],
-    [localize('Ups & Downs')]: ['rise_fall', 'rise_fall_equal', 'run_high_low', 'reset', 'asian', 'callputspread'],
-    [localize('Highs & Lows')]: ['high_low', 'touch', 'tick_high_low'],
-    [localize('Ins & Outs')]: ['end', 'stay'],
-    [localize('Look Backs')]: ['lb_high_low', 'lb_put', 'lb_call'],
-    [localize('Digits')]: ['match_diff', 'even_odd', 'over_under'],
-});
-
-export const unsupported_contract_types_list = [
-    // TODO: remove these once all contract types are supported
-    'callputspread',
-    'run_high_low',
-    'reset',
-    'asian',
-    'tick_high_low',
-    'end',
-    'stay',
-    'lb_call',
-    'lb_put',
-    'lb_high_low',
-];
diff --git a/packages/trader/src/Stores/Modules/Trading/Constants/validation-rules.js b/packages/trader/src/Stores/Modules/Trading/Constants/validation-rules.js
deleted file mode 100644
index f3eb0fcdc70b..000000000000
--- a/packages/trader/src/Stores/Modules/Trading/Constants/validation-rules.js
+++ /dev/null
@@ -1,185 +0,0 @@
-import { localize } from '@deriv/translations';
-import { isSessionAvailable } from 'Stores/Modules/Trading/Helpers/start-date';
-import { isHourValid, isMinuteValid, isTimeValid, toMoment } from '@deriv/shared';
-
-const getValidationRules = () => ({
-    amount: {
-        rules: [
-            ['req', { message: localize('Amount is a required field.') }],
-            ['number', { min: 0, type: 'float' }],
-        ],
-    },
-    barrier_1: {
-        rules: [
-            [
-                'req',
-                {
-                    condition: store => store.barrier_count && store.form_components.indexOf('barrier') > -1,
-                    message: localize('Barrier is a required field.'),
-                },
-            ],
-            ['barrier', { condition: store => store.barrier_count }],
-            [
-                'custom',
-                {
-                    func: (value, options, store, inputs) =>
-                        store.barrier_count > 1 ? +value > +inputs.barrier_2 : true,
-                    message: localize('Higher barrier must be higher than lower barrier.'),
-                },
-            ],
-            [
-                'custom',
-                {
-                    func: (value, options, store, inputs) =>
-                        /^[+-]/.test(inputs.barrier_1) ? +inputs.barrier_1 !== 0 : true,
-                    message: localize('Barrier cannot be zero.'),
-                },
-            ],
-        ],
-        trigger: 'barrier_2',
-    },
-    barrier_2: {
-        rules: [
-            [
-                'req',
-                {
-                    condition: store => store.barrier_count > 1 && store.form_components.indexOf('barrier') > -1,
-                    message: localize('Barrier is a required field.'),
-                },
-            ],
-            ['barrier', { condition: store => store.barrier_count }],
-            [
-                'custom',
-                {
-                    func: (value, options, store, inputs) =>
-                        (/^[+-]/g.test(inputs.barrier_1) && /^[+-]/g.test(value)) ||
-                        (/^(?![+-])/g.test(inputs.barrier_1) && /^(?![+-])/g.test(value)),
-                    message: localize('Both barriers should be relative or absolute'),
-                },
-            ],
-            [
-                'custom',
-                {
-                    func: (value, options, store, inputs) => +inputs.barrier_1 > +value,
-                    message: localize('Lower barrier must be lower than higher barrier.'),
-                },
-            ],
-        ],
-        trigger: 'barrier_1',
-    },
-    duration: {
-        rules: [['req', { message: localize('Duration is a required field.') }]],
-    },
-    start_date: {
-        trigger: 'start_time',
-    },
-    expiry_date: {
-        trigger: 'expiry_time',
-    },
-    start_time: {
-        rules: [
-            [
-                'custom',
-                {
-                    func: (value, options, store) => store.contract_start_type === 'spot' || isTimeValid(value),
-                    message: localize('Please enter the start time in the format "HH:MM".'),
-                },
-            ],
-            [
-                'custom',
-                {
-                    func: (value, options, store) => store.contract_start_type === 'spot' || isHourValid(value),
-                    message: localize('Hour must be between 0 and 23.'),
-                },
-            ],
-            [
-                'custom',
-                {
-                    func: (value, options, store) => store.contract_start_type === 'spot' || isMinuteValid(value),
-                    message: localize('Minute must be between 0 and 59.'),
-                },
-            ],
-            [
-                'custom',
-                {
-                    func: (value, options, store) => {
-                        if (store.contract_start_type === 'spot') return true;
-                        if (!isTimeValid(value)) return false;
-                        const start_moment = toMoment(store.start_date);
-                        const start_moment_clone = start_moment.clone();
-                        const [h, m] = value.split(':');
-                        return isSessionAvailable(store.sessions, start_moment_clone.hour(h).minute(m), start_moment);
-                    },
-                    message: localize('Start time cannot be in the past.'),
-                },
-            ],
-        ],
-    },
-    expiry_time: {
-        rules: [
-            [
-                'custom',
-                {
-                    func: (value, options, store) => store.contract_start_type === 'spot' || isTimeValid(value),
-                    message: localize('Please enter the start time in the format "HH:MM".'),
-                },
-            ],
-            [
-                'custom',
-                {
-                    func: (value, options, store) => store.contract_start_type === 'spot' || isHourValid(value),
-                    message: localize('Hour must be between 0 and 23.'),
-                },
-            ],
-            [
-                'custom',
-                {
-                    func: (value, options, store) => store.contract_start_type === 'spot' || isMinuteValid(value),
-                    message: localize('Minute must be between 0 and 59.'),
-                },
-            ],
-            [
-                'custom',
-                {
-                    func: (value, options, store) => {
-                        if (store.contract_start_type === 'spot') return true;
-                        if (!isTimeValid(value)) return false;
-                        const start_moment = toMoment(store.start_date);
-                        const start_moment_clone = start_moment.clone();
-                        const [h, m] = value.split(':');
-                        return isSessionAvailable(store.sessions, start_moment_clone.hour(h).minute(m), start_moment);
-                    },
-                    message: localize('Expiry time cannot be in the past.'),
-                },
-            ],
-        ],
-    },
-    ...getMultiplierValidationRules(),
-});
-
-export const getMultiplierValidationRules = () => ({
-    stop_loss: {
-        rules: [
-            [
-                'req',
-                {
-                    condition: store => store.has_stop_loss && !store.stop_loss,
-                    message: localize('Please enter a stop loss amount.'),
-                },
-            ],
-        ],
-    },
-    take_profit: {
-        rules: [
-            [
-                'req',
-                {
-                    condition: store => store.has_take_profit && !store.take_profit,
-                    message: localize('Please enter a take profit amount.'),
-                },
-            ],
-        ],
-    },
-});
-
-export default getValidationRules;
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/__tests__/barrier.js b/packages/trader/src/Stores/Modules/Trading/Helpers/__tests__/barrier.js
deleted file mode 100644
index 8b00dec5dbdd..000000000000
--- a/packages/trader/src/Stores/Modules/Trading/Helpers/__tests__/barrier.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import { expect } from 'chai';
-import React from 'react';
-import { buildBarriersConfig } from '../barrier';
-
-describe('buildBarriersConfig', () => {
-    const contract_obj = {
-        barrier_category: 'euro_atm',
-        contract_category: 'callput',
-        contract_category_display: 'Up/Down',
-        contract_display: 'Higher',
-        contract_type: 'CALL',
-        exchange_name: 'FOREX',
-        expiry_type: 'daily',
-        market: 'forex',
-        max_contract_duration: '365d',
-        min_contract_duration: '1d',
-        sentiment: 'up',
-        start_type: 'spot',
-        submarket: 'major_pairs',
-        underlying_symbol: 'frxAUDJPY',
-    };
-    it('Returns Undefined if contract has no barriers', () => {
-        const contract = {
-            ...contract_obj,
-        };
-        expect(buildBarriersConfig(contract)).to.eql(undefined);
-    });
-
-    it('Returns barriers with added values when contract has barrier but equals to zero', () => {
-        const contract = {
-            ...contract_obj,
-            barriers: 0,
-        };
-        expect(buildBarriersConfig(contract)).to.eql(undefined);
-    });
-
-    it('Returns barriers with including empty object when contract has barriers but not values', () => {
-        const contract = {
-            ...contract_obj,
-            barriers: 1,
-        };
-        expect(buildBarriersConfig(contract)).to.eql({
-            count: 1,
-            daily: {},
-        });
-    });
-
-    it('Returns barriers with added values when contract has barriers', () => {
-        const contract = {
-            ...contract_obj,
-            barriers: 1,
-            low_barrier: 22,
-            barrier: 33,
-            high_barrier: 44,
-        };
-        expect(buildBarriersConfig(contract)).to.eql({
-            count: 1,
-            daily: {
-                low_barrier: 22,
-                barrier: 33,
-                high_barrier: 44,
-            },
-        });
-    });
-
-    it('Returns barriers with some of the values when contract has barriers and some of the values', () => {
-        const contract = {
-            ...contract_obj,
-            barriers: 1,
-            low_barrier: 22,
-            barrier: 33,
-        };
-        expect(buildBarriersConfig(contract)).to.eql({
-            count: 1,
-            daily: {
-                low_barrier: 22,
-                barrier: 33,
-            },
-        });
-    });
-});
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/__tests__/start-date.js b/packages/trader/src/Stores/Modules/Trading/Helpers/__tests__/start-date.js
deleted file mode 100644
index 1efefc9f2097..000000000000
--- a/packages/trader/src/Stores/Modules/Trading/Helpers/__tests__/start-date.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import { expect } from 'chai';
-import moment from 'moment';
-import React from 'react';
-import { buildForwardStartingConfig, isSessionAvailable } from '../start-date';
-
-describe('start_date', () => {
-    describe('buildForwardStartingConfig', () => {
-        it('Returns empty object when forward_starting_options and forward_starting_dates are both empties', () => {
-            const contract = {
-                barrier_category: 'euro_atm',
-                barriers: 0,
-                contract_category: 'callput',
-                contract_category_display: 'Up/Down',
-                contract_display: 'Higher',
-                contract_type: 'CALL',
-                exchange_name: 'FOREX',
-                expiry_type: 'daily',
-                market: 'forex',
-                max_contract_duration: '365d',
-                min_contract_duration: '1d',
-                sentiment: 'up',
-                start_type: 'spot',
-                submarket: 'major_pairs',
-                underlying_symbol: 'frxAUDJPY',
-            };
-            expect(buildForwardStartingConfig(contract, {})).to.be.empty;
-        });
-    });
-
-    describe('isSessionAvailable', () => {
-        it('should return true with default values', () => {
-            expect(isSessionAvailable()).to.eql(true);
-        });
-        it('should return true when should_only_check_hour is false and there is a session which opens before now and closes after now', () => {
-            const sessions = [
-                {
-                    open: moment.utc(new Date().getTime() - 100000),
-                    close: moment.utc(new Date().getTime() + 100000),
-                },
-                {
-                    open: moment.utc(new Date().getTime() + 300000),
-                    close: moment.utc(new Date().getTime() + 400000),
-                },
-            ];
-            expect(isSessionAvailable(sessions)).to.eql(true);
-        });
-        it('should return false when should_only_check_hour is false and there is not a session which opens before now and closes after now and compare_moment is before start_moment', () => {
-            const sessions = [
-                {
-                    open: moment.utc(new Date().getTime() + 400000),
-                    close: moment.utc(new Date().getTime() + 500000),
-                },
-                {
-                    open: moment.utc(new Date().getTime() + 300000),
-                    close: moment.utc(new Date().getTime() + 400000),
-                },
-            ];
-            const compare_moment = moment.utc(new Date().getTime() - 1000);
-
-            expect(isSessionAvailable(sessions, compare_moment)).to.eql(false);
-        });
-        it('should return false when should_only_check_hour is false and there is not a session which opens before now and closes after now and compare_moment is before start_moment', () => {
-            const sessions = [
-                {
-                    open: moment.utc(new Date().getTime() + 400000),
-                    close: moment.utc(new Date().getTime() + 500000),
-                },
-                {
-                    open: moment.utc(new Date().getTime() + 300000),
-                    close: moment.utc(new Date().getTime() + 400000),
-                },
-            ];
-            expect(isSessionAvailable(sessions, moment.utc(), moment.utc(), false)).to.eql(false);
-        });
-        it('should return false when should_only_check_hour is true and there is not a session which opens before now and closes after now', () => {
-            const sessions = [
-                {
-                    open: moment.utc(new Date().getTime() + 3600000),
-                    close: moment.utc(new Date().getTime() + 3600001),
-                },
-            ];
-            expect(isSessionAvailable(sessions, moment.utc(), moment.utc(), true)).to.eql(false);
-        });
-        it('should return true when should_only_check_hour is true and there is a session which opens before now and closes after now', () => {
-            const sessions = [
-                {
-                    open: moment.utc(new Date().getTime() - 1000),
-                    close: moment.utc(new Date().getTime() + 1000),
-                },
-            ];
-            expect(isSessionAvailable(sessions, moment.utc(), moment.utc(), true)).to.eql(true);
-        });
-    });
-});
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/active-symbols.js b/packages/trader/src/Stores/Modules/Trading/Helpers/active-symbols.js
deleted file mode 100644
index cae4884246c1..000000000000
--- a/packages/trader/src/Stores/Modules/Trading/Helpers/active-symbols.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import { flow } from 'mobx';
-import { LocalStore, redirectToLogin, WS } from '@deriv/shared';
-import { getLanguage, localize } from '@deriv/translations';
-
-export const showUnavailableLocationError = flow(function* (showError, is_logged_in) {
-    const website_status = yield WS.wait('website_status');
-    const residence_list = yield WS.residenceList();
-
-    const clients_country_code = website_status.website_status.clients_country;
-    const clients_country_text = (
-        residence_list.residence_list.find(obj_country => obj_country.value === clients_country_code) || {}
-    ).text;
-
-    const header = clients_country_text
-        ? localize('Sorry, this app is unavailable in {{clients_country}}.', {
-              clients_country: clients_country_text,
-          })
-        : localize('Sorry, this app is unavailable in your current location.');
-
-    showError({
-        message: localize('If you have an account, log in to continue.'),
-        header,
-        redirect_label: localize('Log in'),
-        redirectOnClick: () => redirectToLogin(is_logged_in, getLanguage()),
-        should_show_refresh: false,
-    });
-});
-
-export const showMxMltUnavailableError = flow(function* (showError, can_have_mlt_account, can_have_mx_account) {
-    const get_settings = yield WS.wait('get_settings');
-    const residence_list = yield WS.residenceList();
-
-    const clients_country_code = get_settings.get_settings.country_code;
-    const clients_country_text = (
-        residence_list.residence_list.find(obj_country => obj_country.value === clients_country_code) || {}
-    ).text;
-
-    let header;
-
-    if (can_have_mlt_account) {
-        header = localize("Unfortunately, trading options isn't possible in your country");
-    } else if (clients_country_text || can_have_mx_account) {
-        header = localize('Sorry, trading is unavailable in {{clients_country}}.', {
-            clients_country: clients_country_text,
-        });
-    } else {
-        header = localize('Sorry, trading is unavailable in your current location.');
-    }
-
-    showError({
-        message: ' ',
-        header,
-        redirect_label: null,
-        redirectOnClick: () => ({}),
-        should_show_refresh: false,
-    });
-});
-
-export const isMarketClosed = (active_symbols = [], symbol) => {
-    if (!active_symbols.length) return false;
-    return active_symbols.filter(x => x.symbol === symbol)[0]
-        ? !active_symbols.filter(symbol_info => symbol_info.symbol === symbol)[0].exchange_is_open
-        : false;
-};
-
-export const pickDefaultSymbol = async (active_symbols = []) => {
-    if (!active_symbols.length) return '';
-    const fav_open_symbol = await getFavoriteOpenSymbol(active_symbols);
-    if (fav_open_symbol) return fav_open_symbol;
-    const default_open_symbol = await getDefaultOpenSymbol(active_symbols);
-    return default_open_symbol;
-};
-
-const getFavoriteOpenSymbol = async active_symbols => {
-    try {
-        const chart_favorites = LocalStore.get('cq-favorites');
-        if (!chart_favorites) return undefined;
-        const client_favorite_markets = JSON.parse(chart_favorites)['chartTitle&Comparison'];
-
-        const client_favorite_list = client_favorite_markets.map(client_fav_symbol =>
-            active_symbols.find(symbol_info => symbol_info.symbol === client_fav_symbol)
-        );
-        if (client_favorite_list) {
-            const client_first_open_symbol = client_favorite_list.filter(symbol => symbol).find(isSymbolOpen);
-            if (client_first_open_symbol) {
-                const is_symbol_offered = await isSymbolOffered(client_first_open_symbol);
-                if (is_symbol_offered) return client_first_open_symbol.symbol;
-            }
-        }
-        return undefined;
-    } catch (error) {
-        return undefined;
-    }
-};
-
-const getDefaultOpenSymbol = async active_symbols => {
-    const default_open_symbol =
-        (await findSymbol(active_symbols, '1HZ100V')) ||
-        (await findFirstSymbol(active_symbols, /random_index/)) ||
-        (await findFirstSymbol(active_symbols, /major_pairs/));
-    if (default_open_symbol) return default_open_symbol.symbol;
-    return active_symbols.find(symbol_info => symbol_info.submarket === 'major_pairs').symbol;
-};
-
-const findSymbol = async (active_symbols, symbol) => {
-    const first_symbol = active_symbols.find(symbol_info => symbol_info.symbol === symbol && isSymbolOpen(symbol_info));
-    const is_symbol_offered = await isSymbolOffered(first_symbol);
-    if (is_symbol_offered) return first_symbol;
-    return undefined;
-};
-
-const findFirstSymbol = async (active_symbols, pattern) => {
-    const first_symbol = active_symbols.find(
-        symbol_info => pattern.test(symbol_info.submarket) && isSymbolOpen(symbol_info)
-    );
-    const is_symbol_offered = await isSymbolOffered(first_symbol);
-    if (is_symbol_offered) return first_symbol;
-    return undefined;
-};
-
-export const findFirstOpenMarket = async (active_symbols, markets) => {
-    const market = markets.shift();
-    const first_symbol = active_symbols.find(symbol_info => market === symbol_info.market && isSymbolOpen(symbol_info));
-    const is_symbol_offered = await isSymbolOffered(first_symbol);
-    if (is_symbol_offered) return { category: first_symbol.market, subcategory: first_symbol.submarket };
-    else if (markets.length > 0) return findFirstOpenMarket(active_symbols, markets);
-    return undefined;
-};
-
-const isSymbolOpen = symbol => symbol.exchange_is_open === 1;
-
-const isSymbolOffered = async symbol_info => {
-    const r = await WS.storage.contractsFor(symbol_info?.symbol);
-    return !['InvalidSymbol', 'InputValidationFailed'].includes(r.error?.code);
-};
-
-export const getSymbolDisplayName = (active_symbols = [], symbol) =>
-    (
-        active_symbols.find(symbol_info => symbol_info.symbol.toUpperCase() === symbol.toUpperCase()) || {
-            display_name: '',
-        }
-    ).display_name;
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/allow-equals.js b/packages/trader/src/Stores/Modules/Trading/Helpers/allow-equals.js
index 952def5c31dd..d187be1116be 100644
--- a/packages/trader/src/Stores/Modules/Trading/Helpers/allow-equals.js
+++ b/packages/trader/src/Stores/Modules/Trading/Helpers/allow-equals.js
@@ -1,6 +1,5 @@
 import { localize } from '@deriv/translations';
-import { isEmptyObject, getPropertyValue } from '@deriv/shared';
-import ContractType from './contract-type';
+import { isEmptyObject, getPropertyValue, ContractType } from '@deriv/shared';
 
 export const hasCallPutEqual = contract_type_list => {
     if (isEmptyObject(contract_type_list)) return false;
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/barrier.js b/packages/trader/src/Stores/Modules/Trading/Helpers/barrier.js
deleted file mode 100644
index 2dff13e7393f..000000000000
--- a/packages/trader/src/Stores/Modules/Trading/Helpers/barrier.js
+++ /dev/null
@@ -1,20 +0,0 @@
-export const buildBarriersConfig = (contract, barriers = { count: contract.barriers }) => {
-    if (!contract.barriers) {
-        return undefined;
-    }
-
-    const obj_barrier = {};
-
-    ['barrier', 'low_barrier', 'high_barrier'].forEach(field => {
-        if (field in contract) obj_barrier[field] = contract[field];
-    });
-
-    return Object.assign(barriers || {}, {
-        [contract.expiry_type]: obj_barrier,
-    });
-};
-
-export const getBarrierPipSize = barrier => {
-    if (Math.floor(barrier) === barrier || barrier.length < 1 || barrier % 1 === 0 || isNaN(barrier)) return 0;
-    return barrier.toString().split('.')[1].length || 0;
-};
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.js b/packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.js
deleted file mode 100644
index 2dfeadecf51e..000000000000
--- a/packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.js
+++ /dev/null
@@ -1,603 +0,0 @@
-import {
-    getPropertyValue,
-    cloneObject,
-    isTimeValid,
-    minDate,
-    toMoment,
-    shouldShowCancellation,
-    WS,
-} from '@deriv/shared';
-import ServerTime from '_common/base/server_time';
-import { localize } from '@deriv/translations';
-
-import { getUnitMap } from 'Stores/Modules/Portfolio/Helpers/details';
-import { buildBarriersConfig } from './barrier';
-import { buildDurationConfig, hasIntradayDurationUnit } from './duration';
-import { buildForwardStartingConfig, isSessionAvailable } from './start-date';
-import {
-    unsupported_contract_types_list,
-    getContractCategoriesConfig,
-    getContractTypesConfig,
-    getLocalizedBasis,
-} from '../Constants/contract';
-
-const ContractType = (() => {
-    let available_contract_types = {};
-    let available_categories = {};
-    let contract_types;
-    const trading_events = {};
-    const trading_times = {};
-    let has_only_forward_starting_contracts = false;
-
-    const buildContractTypesConfig = symbol =>
-        WS.storage.contractsFor(symbol).then(r => {
-            const has_contracts = getPropertyValue(r, ['contracts_for']);
-            has_only_forward_starting_contracts =
-                has_contracts && !r.contracts_for.available.find(contract => contract.start_type !== 'forward');
-            if (!has_contracts || has_only_forward_starting_contracts) return;
-            const contract_categories = getContractCategoriesConfig();
-            contract_types = getContractTypesConfig(symbol);
-
-            available_contract_types = {};
-            available_categories = cloneObject(contract_categories); // To preserve the order (will clean the extra items later in this function)
-
-            r.contracts_for.available.forEach(contract => {
-                const type = Object.keys(contract_types).find(
-                    key =>
-                        contract_types[key].trade_types.indexOf(contract.contract_type) !== -1 &&
-                        (typeof contract_types[key].barrier_count === 'undefined' ||
-                            +contract_types[key].barrier_count === contract.barriers) // To distinguish betweeen Rise/Fall & Higher/Lower
-                );
-
-                if (!type) return; // ignore unsupported contract types
-
-                /*
-            add to this config if a value you are looking for does not exist yet
-            accordingly create a function to retrieve the value
-            config: {
-                has_spot: 1,
-                durations: {
-                    min_max: {
-                        spot: {
-                            tick    : { min: 5,     max: 10 },    // value in ticks, as cannot convert to seconds
-                            intraday: { min: 18000, max: 86400 }, // all values converted to seconds
-                            daily   : { min: 86400, max: 432000 },
-                        },
-                        forward: {
-                            intraday: { min: 18000, max: 86400 },
-                        },
-                    },
-                    units_display: {
-                        spot: [
-                            { text: 'ticks',   value: 't' },
-                            { text: 'seconds', value: 's' },
-                            { text: 'minutes', value: 'm' },
-                            { text: 'hours',   value: 'h' },
-                            { text: 'days',    value: 'd' },
-                        ],
-                        forward: [
-                            { text: 'days',    value: 'd' },
-                        ],
-                    },
-                },
-                forward_starting_dates: [
-                    { text: 'Mon - 19 Mar, 2018', value: 1517356800, sessions: [{ open: obj_moment, close: obj_moment }] },
-                    { text: 'Tue - 20 Mar, 2018', value: 1517443200, sessions: [{ open: obj_moment, close: obj_moment }] },
-                    { text: 'Wed - 21 Mar, 2018', value: 1517529600, sessions: [{ open: obj_moment, close: obj_moment }] },
-                ],
-                trade_types: {
-                    'CALL': 'Higher',
-                    'PUT' : 'Lower',
-                },
-                barriers: {
-                    count   : 2,
-                    tick    : { high_barrier: '+1.12', low_barrier : '-1.12' },
-                    intraday: { high_barrier: '+2.12', low_barrier : '-2.12' },
-                    daily   : { high_barrier: 1111,    low_barrier : 1093 },
-                },
-            }
-            */
-
-                if (!available_contract_types[type]) {
-                    // extend contract_categories to include what is needed to create the contract list
-                    const sub_cats =
-                        available_categories[
-                            Object.keys(available_categories).find(
-                                key => available_categories[key].indexOf(type) !== -1
-                            )
-                        ];
-
-                    if (!sub_cats) return;
-
-                    sub_cats[sub_cats.indexOf(type)] = { value: type, text: contract_types[type].title };
-
-                    // populate available contract types
-                    available_contract_types[type] = cloneObject(contract_types[type]);
-                }
-                const config = available_contract_types[type].config || {};
-
-                // set config values
-                config.has_spot = config.has_spot || contract.start_type === 'spot';
-                config.durations = !config.hide_duration && buildDurationConfig(contract, config.durations);
-                config.trade_types = buildTradeTypesConfig(contract, config.trade_types);
-                config.barriers = buildBarriersConfig(contract, config.barriers);
-                config.forward_starting_dates = buildForwardStartingConfig(contract, config.forward_starting_dates);
-                config.multiplier_range = contract.multiplier_range;
-                config.cancellation_range = contract.cancellation_range;
-
-                available_contract_types[type].config = config;
-            });
-
-            // cleanup categories
-            Object.keys(available_categories).forEach(key => {
-                available_categories[key] = available_categories[key].filter(item => typeof item === 'object');
-                if (available_categories[key].length === 0) {
-                    delete available_categories[key];
-                }
-            });
-        });
-
-    const buildTradeTypesConfig = (contract, trade_types = {}) => {
-        trade_types[contract.contract_type] = contract.contract_display;
-        return trade_types;
-    };
-
-    const getArrayDefaultValue = (arr_new_values, value) =>
-        arr_new_values.indexOf(value) !== -1 ? value : arr_new_values[0];
-
-    const getContractValues = store => {
-        const {
-            contract_expiry_type,
-            contract_type,
-            basis,
-            duration_unit,
-            expiry_type,
-            multiplier,
-            start_date,
-            cancellation_duration,
-            symbol,
-        } = store;
-
-        if (!contract_type) return {};
-
-        const form_components = getComponents(contract_type);
-        const obj_basis = getBasis(contract_type, basis);
-        const obj_trade_types = getTradeTypes(contract_type);
-        const obj_start_dates = getStartDates(contract_type, start_date);
-        const obj_start_type = getStartType(obj_start_dates.start_date);
-        const obj_barrier = getBarriers(contract_type, contract_expiry_type);
-        const obj_duration_unit = getDurationUnit(duration_unit, contract_type, obj_start_type.contract_start_type);
-
-        const obj_duration_units_list = getDurationUnitsList(contract_type, obj_start_type.contract_start_type);
-        const obj_duration_units_min_max = getDurationMinMax(contract_type, obj_start_type.contract_start_type);
-
-        const obj_multiplier_range_list = getMultiplierRange(contract_type, multiplier);
-        const obj_cancellation = getCancellation(contract_type, cancellation_duration, symbol);
-        const obj_expiry_type = getExpiryType(obj_duration_units_list, expiry_type);
-        const obj_equal = getEqualProps(contract_type);
-
-        return {
-            ...form_components,
-            ...obj_basis,
-            ...obj_trade_types,
-            ...obj_start_dates,
-            ...obj_start_type,
-            ...obj_barrier,
-            ...obj_duration_unit,
-            ...obj_duration_units_list,
-            ...obj_duration_units_min_max,
-            ...obj_expiry_type,
-            ...obj_multiplier_range_list,
-            ...obj_cancellation,
-            ...obj_equal,
-        };
-    };
-
-    const getContractType = (list, contract_type) => {
-        const arr_list = Object.keys(list || {})
-            .reduce((k, l) => [...k, ...list[l].map(ct => ct.value)], [])
-            .filter(type => unsupported_contract_types_list.indexOf(type) === -1)
-            .sort((a, b) => (a === 'multiplier' || b === 'multiplier' ? -1 : 0));
-
-        return {
-            contract_type: getArrayDefaultValue(arr_list, contract_type),
-        };
-    };
-
-    const getComponents = c_type => {
-        return (
-            contract_types && {
-                form_components: ['duration', 'amount', ...contract_types[c_type].components].filter(
-                    component =>
-                        !(
-                            component === 'duration' &&
-                            contract_types[c_type].config &&
-                            contract_types[c_type].config.hide_duration
-                        )
-                ),
-            }
-        );
-    };
-
-    const getDurationUnitsList = (contract_type, contract_start_type) => ({
-        duration_units_list:
-            getPropertyValue(available_contract_types, [
-                contract_type,
-                'config',
-                'durations',
-                'units_display',
-                contract_start_type,
-            ]) || [],
-    });
-
-    const getDurationUnit = (duration_unit, contract_type, contract_start_type) => {
-        const duration_units =
-            getPropertyValue(available_contract_types, [
-                contract_type,
-                'config',
-                'durations',
-                'units_display',
-                contract_start_type,
-            ]) || [];
-        const arr_units = [];
-        duration_units.forEach(obj => {
-            arr_units.push(obj.value);
-        });
-
-        return {
-            duration_unit: getArrayDefaultValue(arr_units, duration_unit),
-        };
-    };
-
-    const getDurationMinMax = (contract_type, contract_start_type, contract_expiry_type) => {
-        let duration_min_max =
-            getPropertyValue(available_contract_types, [
-                contract_type,
-                'config',
-                'durations',
-                'min_max',
-                contract_start_type,
-            ]) || {};
-
-        if (contract_expiry_type) {
-            duration_min_max = duration_min_max[contract_expiry_type] || {};
-        }
-
-        return { duration_min_max };
-    };
-
-    const getFullContractTypes = () => available_contract_types;
-
-    const getStartType = start_date => ({
-        // Number(0) refers to 'now'
-        contract_start_type: start_date === Number(0) ? 'spot' : 'forward',
-    });
-
-    const getStartDates = (contract_type, current_start_date) => {
-        const config = getPropertyValue(available_contract_types, [contract_type, 'config']);
-        const start_dates_list = [];
-
-        if (config?.has_spot) {
-            // Number(0) refers to 'now'
-            start_dates_list.push({ text: localize('Now'), value: Number(0) });
-        }
-        if (config?.forward_starting_dates) {
-            start_dates_list.push(...config.forward_starting_dates);
-        }
-
-        const start_date = start_dates_list.find(item => item.value === current_start_date)
-            ? current_start_date
-            : start_dates_list[0]?.value;
-
-        return { start_date, start_dates_list };
-    };
-
-    const getSessions = (contract_type, start_date) => {
-        const config = getPropertyValue(available_contract_types, [contract_type, 'config']) || {};
-        const sessions = ((config.forward_starting_dates || []).find(option => option.value === start_date) || {})
-            .sessions;
-        return { sessions };
-    };
-
-    const hours = [...Array(24).keys()].map(a => `0${a}`.slice(-2));
-    const minutes = [...Array(12).keys()].map(a => `0${a * 5}`.slice(-2));
-
-    const getValidTime = (sessions, compare_moment, start_moment) => {
-        if (sessions && !isSessionAvailable(sessions, compare_moment)) {
-            // first see if changing the minute brings it to the right session
-            compare_moment.minute(
-                minutes.find(m => isSessionAvailable(sessions, compare_moment.minute(m))) || compare_moment.format('mm')
-            );
-            // if not, also change the hour
-            if (!isSessionAvailable(sessions, compare_moment)) {
-                compare_moment.minute(0);
-                compare_moment.hour(
-                    hours.find(h => isSessionAvailable(sessions, compare_moment.hour(h), start_moment, true)) ||
-                        compare_moment.format('HH')
-                );
-                compare_moment.minute(
-                    minutes.find(m => isSessionAvailable(sessions, compare_moment.minute(m))) ||
-                        compare_moment.format('mm')
-                );
-            }
-        }
-        return compare_moment.format('HH:mm');
-    };
-
-    const buildMoment = (date, time) => {
-        const [hour, minute] = isTimeValid(time) ? time.split(':') : [0, 0];
-        return toMoment(date || ServerTime.get())
-            .hour(hour)
-            .minute(minute);
-    };
-
-    const getStartTime = (sessions, start_date, start_time) => ({
-        start_time: start_date ? getValidTime(sessions, buildMoment(start_date, start_time)) : null,
-    });
-
-    const getTradingEvents = async (date, underlying = null) => {
-        if (!date) {
-            return [];
-        }
-        if (!(date in trading_events)) {
-            const trading_times_response = await WS.tradingTimes(date);
-
-            if (getPropertyValue(trading_times_response, ['trading_times', 'markets'])) {
-                for (let i = 0; i < trading_times_response.trading_times.markets.length; i++) {
-                    const submarkets = trading_times_response.trading_times.markets[i].submarkets;
-                    if (submarkets) {
-                        for (let j = 0; j < submarkets.length; j++) {
-                            const symbols = submarkets[j].symbols;
-                            if (symbols) {
-                                for (let k = 0; k < symbols.length; k++) {
-                                    const symbol = symbols[k];
-                                    if (!trading_events[trading_times_response.echo_req.trading_times]) {
-                                        trading_events[trading_times_response.echo_req.trading_times] = {};
-                                    }
-                                    trading_events[trading_times_response.echo_req.trading_times][symbol.symbol] =
-                                        symbol.events;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        return trading_events[date][underlying];
-    };
-
-    const getTradingTimes = async (date, underlying = null) => {
-        if (!date) {
-            return [];
-        }
-
-        if (!(date in trading_times)) {
-            const trading_times_response = await WS.tradingTimes(date);
-
-            if (getPropertyValue(trading_times_response, ['trading_times', 'markets'])) {
-                for (let i = 0; i < trading_times_response.trading_times.markets.length; i++) {
-                    const submarkets = trading_times_response.trading_times.markets[i].submarkets;
-                    if (submarkets) {
-                        for (let j = 0; j < submarkets.length; j++) {
-                            const symbols = submarkets[j].symbols;
-                            if (symbols) {
-                                for (let k = 0; k < symbols.length; k++) {
-                                    const symbol = symbols[k];
-                                    if (!trading_times[trading_times_response.echo_req.trading_times]) {
-                                        trading_times[trading_times_response.echo_req.trading_times] = {};
-                                    }
-                                    trading_times[trading_times_response.echo_req.trading_times][symbol.symbol] = {
-                                        open: symbol.times.open,
-                                        close: symbol.times.close,
-                                    };
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        return underlying ? trading_times[date][underlying] : trading_times[date];
-    };
-
-    const getExpiryType = (duration_units_list, expiry_type) => {
-        if (duration_units_list) {
-            if (
-                (!expiry_type && duration_units_list.length > 0) ||
-                (duration_units_list.length === 1 && duration_units_list[0].value === 't')
-            ) {
-                return { expiry_type: 'duration' };
-            }
-            if (duration_units_list.length === 0) {
-                return {
-                    expiry_type: null,
-                };
-            }
-        }
-
-        return { expiry_type };
-    };
-
-    const getExpiryDate = (duration_units_list, expiry_date, expiry_type, start_date) => {
-        let proper_expiry_date = null;
-
-        if (expiry_type === 'endtime') {
-            const moment_start = toMoment(start_date);
-            const moment_expiry = toMoment(expiry_date);
-
-            if (!hasIntradayDurationUnit(duration_units_list)) {
-                const is_invalid = moment_expiry.isSameOrBefore(moment_start, 'day');
-                proper_expiry_date = (is_invalid ? moment_start.clone().add(1, 'day') : moment_expiry).format(
-                    'YYYY-MM-DD'
-                );
-            } else {
-                // forward starting contracts should only show today and tomorrow as expiry date
-                const is_invalid =
-                    moment_expiry.isBefore(moment_start, 'day') ||
-                    (start_date && moment_expiry.isAfter(moment_start.clone().add(1, 'day')));
-                proper_expiry_date = (is_invalid ? moment_start : moment_expiry).format('YYYY-MM-DD');
-            }
-        }
-
-        return { expiry_date: proper_expiry_date };
-    };
-
-    // It has to follow the correct order of checks:
-    // first check if end time is within available sessions
-    // then confirm that end time is at least 5 minute after start time
-    const getExpiryTime = (
-        expiry_date,
-        expiry_time,
-        expiry_type,
-        market_close_times,
-        sessions,
-        start_date,
-        start_time
-    ) => {
-        let end_time = null;
-
-        if (expiry_type === 'endtime') {
-            let market_close_time = '23:59:59';
-
-            if (market_close_times && market_close_times.length && market_close_times[0] !== '--') {
-                // Some of underlyings (e.g. Australian Index) have two close time during a day so we always select the further one as the end time of the contract.
-                market_close_time = market_close_times.slice(-1)[0];
-            }
-
-            // For contracts with a duration of more that 24 hours must set the expiry_time to the market's close time on the expiry date.
-            if (!start_date && ServerTime.get().isBefore(buildMoment(expiry_date), 'day')) {
-                end_time = market_close_time;
-            } else {
-                const start_moment = start_date ? buildMoment(start_date, start_time) : ServerTime.get();
-                const end_moment = buildMoment(expiry_date, expiry_time);
-
-                end_time = end_moment.format('HH:mm');
-                // When the contract is forwarding, and the duration is endtime, users can purchase the contract within 24 hours.
-                const expiry_sessions = [
-                    {
-                        open: start_moment.clone().add(5, 'minute'), // expiry time should be at least 5 minute after start_time
-                        close: minDate(
-                            start_moment.clone().add(24, 'hour'),
-                            buildMoment(expiry_date, market_close_time)
-                        ),
-                    },
-                ];
-
-                if (!isSessionAvailable(expiry_sessions, end_moment)) {
-                    end_time = getValidTime(expiry_sessions, end_moment.clone(), start_moment.clone());
-                }
-                if (end_moment.isSameOrBefore(start_moment) || end_moment.diff(start_moment, 'minute') < 5) {
-                    const is_end_of_day = start_moment.get('hours') === 23 && start_moment.get('minute') >= 55;
-                    const is_end_of_session =
-                        sessions && !isSessionAvailable(sessions, start_moment.clone().add(5, 'minutes'));
-                    end_time = start_moment.clone().add(is_end_of_day || is_end_of_session ? 0 : 5, 'minutes');
-                    // Set the end_time to be multiple of 5 to be equal as the SELECTED_TIME that shown to the client.
-                    end_time = setMinuteMultipleByFive(end_time).format('HH:mm');
-                }
-                // Set the expiry_time to 5 minute less than start_time for forwading contracts when the expiry_time is null and the expiry_date is tomorrow.
-                if (end_time === '00:00' && start_moment.isBefore(end_moment, 'day')) {
-                    end_time = start_moment.clone().subtract(5, 'minute').format('HH:mm');
-                }
-            }
-        }
-        return { expiry_time: end_time };
-    };
-
-    const setMinuteMultipleByFive = moment_obj => moment_obj.minute(Math.ceil(moment_obj.minute() / 5) * 5);
-
-    const getTradeTypes = contract_type => ({
-        trade_types: getPropertyValue(available_contract_types, [contract_type, 'config', 'trade_types']),
-    });
-
-    const getBarriers = (contract_type, expiry_type) => {
-        const barriers = getPropertyValue(available_contract_types, [contract_type, 'config', 'barriers']) || {};
-        const barrier_values = barriers[expiry_type] || {};
-        const barrier_1 = barrier_values.barrier || barrier_values.high_barrier || '';
-        const barrier_2 = barrier_values.low_barrier || '';
-        return {
-            barrier_count: barriers.count || 0,
-            barrier_1: barrier_1.toString(),
-            barrier_2: barrier_2.toString(),
-        };
-    };
-
-    const getBasis = (contract_type, basis) => {
-        const arr_basis = getPropertyValue(available_contract_types, [contract_type, 'basis']) || [];
-        const localized_basis = getLocalizedBasis();
-        const basis_list = arr_basis.reduce((cur, bas) => [...cur, { text: localized_basis[bas], value: bas }], []);
-
-        return {
-            basis_list,
-            basis: getArrayDefaultValue(arr_basis, basis),
-        };
-    };
-
-    const getMultiplierRange = (contract_type, multiplier) => {
-        const arr_multiplier =
-            getPropertyValue(available_contract_types, [contract_type, 'config', 'multiplier_range']) || [];
-
-        return {
-            multiplier_range_list: arr_multiplier.map(m => ({ text: `x${m}`, value: m })),
-            multiplier: getArrayDefaultValue(arr_multiplier, multiplier),
-        };
-    };
-
-    const getCancellation = (contract_type, cancellation_duration, symbol) => {
-        const arr_cancellation_range =
-            getPropertyValue(available_contract_types, [contract_type, 'config', 'cancellation_range']) || [];
-
-        const regex = new RegExp('^([0-9]+)|([a-zA-Z]+)$', 'g');
-        const getText = str => {
-            const [duration, unit] = str.match(regex);
-            const unit_map = getUnitMap();
-            return `${duration} ${unit_map[unit].name_plural}`;
-        };
-
-        const should_show_cancellation = shouldShowCancellation(symbol);
-
-        return {
-            cancellation_duration: getArrayDefaultValue(arr_cancellation_range, cancellation_duration),
-            cancellation_range_list: arr_cancellation_range.map(d => ({ text: `${getText(d)}`, value: d })),
-            ...(should_show_cancellation ? {} : { has_cancellation: false }),
-        };
-    };
-
-    const getEqualProps = contract_type => {
-        const base_contract_type = /^(.*)_equal$/.exec(contract_type)?.[1];
-
-        if (base_contract_type && !available_contract_types[base_contract_type]) {
-            return {
-                is_equal: 1,
-                has_equals_only: true,
-            };
-        }
-        return {};
-    };
-
-    return {
-        buildContractTypesConfig,
-        getBarriers,
-        getContractType,
-        getContractValues,
-        getDurationMinMax,
-        getDurationUnit,
-        getDurationUnitsList,
-        getFullContractTypes,
-        getExpiryDate,
-        getExpiryTime,
-        getExpiryType,
-        getSessions,
-        getStartTime,
-        getStartType,
-        getTradingEvents,
-        getTradingTimes,
-        getContractCategories: () => ({
-            contract_types_list: available_categories,
-            has_only_forward_starting_contracts,
-        }),
-    };
-})();
-
-export default ContractType;
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/duration.js b/packages/trader/src/Stores/Modules/Trading/Helpers/duration.js
deleted file mode 100644
index 6d99dd31c6eb..000000000000
--- a/packages/trader/src/Stores/Modules/Trading/Helpers/duration.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import { localize } from '@deriv/translations';
-import { toMoment } from '@deriv/shared';
-
-const getDurationMaps = () => ({
-    t: { display: localize('Ticks'), order: 1 },
-    s: { display: localize('Seconds'), order: 2, to_second: 1 },
-    m: { display: localize('Minutes'), order: 3, to_second: 60 },
-    h: { display: localize('Hours'), order: 4, to_second: 60 * 60 },
-    d: { display: localize('Days'), order: 5, to_second: 60 * 60 * 24 },
-});
-
-export const buildDurationConfig = (contract, durations = { min_max: {}, units_display: {} }) => {
-    durations.min_max[contract.start_type] = durations.min_max[contract.start_type] || {};
-    durations.units_display[contract.start_type] = durations.units_display[contract.start_type] || [];
-
-    const obj_min = getDurationFromString(contract.min_contract_duration);
-    const obj_max = getDurationFromString(contract.max_contract_duration);
-
-    durations.min_max[contract.start_type][contract.expiry_type] = {
-        min: convertDurationUnit(obj_min.duration, obj_min.unit, 's'),
-        max: convertDurationUnit(obj_max.duration, obj_max.unit, 's'),
-    };
-
-    const arr_units = [];
-    durations.units_display[contract.start_type].forEach(obj => {
-        arr_units.push(obj.value);
-    });
-
-    const duration_maps = getDurationMaps();
-
-    if (/^tick|daily$/.test(contract.expiry_type)) {
-        if (arr_units.indexOf(obj_min.unit) === -1) {
-            arr_units.push(obj_min.unit);
-        }
-    } else {
-        Object.keys(duration_maps).forEach(u => {
-            if (
-                u !== 'd' && // when the expiray_type is intraday, the supported units are seconds, minutes and hours.
-                arr_units.indexOf(u) === -1 &&
-                duration_maps[u].order >= duration_maps[obj_min.unit].order &&
-                duration_maps[u].order <= duration_maps[obj_max.unit].order
-            ) {
-                arr_units.push(u);
-            }
-        });
-    }
-
-    durations.units_display[contract.start_type] = arr_units
-        .sort((a, b) => (duration_maps[a].order > duration_maps[b].order ? 1 : -1))
-        .reduce((o, c) => [...o, { text: duration_maps[c].display, value: c }], []);
-
-    return durations;
-};
-
-export const convertDurationUnit = (value, from_unit, to_unit) => {
-    if (!value || !from_unit || !to_unit || isNaN(parseInt(value))) {
-        return null;
-    }
-
-    const duration_maps = getDurationMaps();
-
-    if (from_unit === to_unit || !('to_second' in duration_maps[from_unit])) {
-        return value;
-    }
-
-    return (value * duration_maps[from_unit].to_second) / duration_maps[to_unit].to_second;
-};
-
-const getDurationFromString = duration_string => {
-    const duration = duration_string.toString().match(/[a-zA-Z]+|[0-9]+/g);
-    return {
-        duration: +duration[0], // converts string to numbers
-        unit: duration[1],
-    };
-};
-
-export const getExpiryType = store => {
-    const { duration_unit, expiry_date, expiry_type, duration_units_list } = store;
-    const server_time = store.root_store.common.server_time;
-
-    const duration_is_day = expiry_type === 'duration' && duration_unit === 'd';
-    const expiry_is_after_today =
-        expiry_type === 'endtime' &&
-        (toMoment(expiry_date).isAfter(toMoment(server_time), 'day') || !hasIntradayDurationUnit(duration_units_list));
-
-    let contract_expiry_type = 'daily';
-    if (!duration_is_day && !expiry_is_after_today) {
-        contract_expiry_type = duration_unit === 't' ? 'tick' : 'intraday';
-    }
-
-    return contract_expiry_type;
-};
-
-export const convertDurationLimit = (value, unit) => {
-    if (!(value >= 0) || !unit || !Number.isInteger(value)) {
-        return null;
-    }
-
-    if (unit === 'm') {
-        const minute = value / 60;
-        return minute >= 1 ? Math.floor(minute) : 1;
-    } else if (unit === 'h') {
-        const hour = value / (60 * 60);
-        return hour >= 1 ? Math.floor(hour) : 1;
-    } else if (unit === 'd') {
-        const day = value / (60 * 60 * 24);
-        return day >= 1 ? Math.floor(day) : 1;
-    }
-
-    return value;
-};
-
-export const hasIntradayDurationUnit = duration_units_list =>
-    duration_units_list.some(unit => ['m', 'h'].indexOf(unit.value) !== -1);
-
-/**
- * On switching symbols, end_time value of volatility indices should be set to today
- *
- * @param {String} symbol
- * @param {String} expiry_type
- * @returns {*}
- */
-export const resetEndTimeOnVolatilityIndices = (symbol, expiry_type) =>
-    /^R_/.test(symbol) && expiry_type === 'endtime' ? toMoment(null).format('DD MMM YYYY') : null;
-
-export const getDurationMinMaxValues = (duration_min_max, contract_expiry_type, duration_unit) => {
-    if (!duration_min_max[contract_expiry_type]) return [];
-    const max_value = convertDurationLimit(+duration_min_max[contract_expiry_type].max, duration_unit);
-    const min_value = convertDurationLimit(+duration_min_max[contract_expiry_type].min, duration_unit);
-
-    return [min_value, max_value];
-};
diff --git a/packages/reports/src/Stores/Modules/Contract/Helpers/limit-orders.js b/packages/trader/src/Stores/Modules/Trading/Helpers/limit-orders.js
similarity index 100%
rename from packages/reports/src/Stores/Modules/Contract/Helpers/limit-orders.js
rename to packages/trader/src/Stores/Modules/Trading/Helpers/limit-orders.js
diff --git a/packages/reports/src/Stores/Modules/Contract/Helpers/multiplier.js b/packages/trader/src/Stores/Modules/Trading/Helpers/multiplier.js
similarity index 96%
rename from packages/reports/src/Stores/Modules/Contract/Helpers/multiplier.js
rename to packages/trader/src/Stores/Modules/Trading/Helpers/multiplier.js
index 5ed46fda25ac..21b2a8269991 100644
--- a/packages/reports/src/Stores/Modules/Contract/Helpers/multiplier.js
+++ b/packages/trader/src/Stores/Modules/Trading/Helpers/multiplier.js
@@ -1,4 +1,4 @@
-import { connect } from '../../../connect';
+import { connect } from 'Stores/connect';
 
 export const onToggleCancellation = ({ has_cancellation, onChangeMultiple }) => {
     // e.target.checked is not reliable, we have to toggle its previous value
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/process.js b/packages/trader/src/Stores/Modules/Trading/Helpers/process.js
index 574dd124951a..c37267540a51 100644
--- a/packages/trader/src/Stores/Modules/Trading/Helpers/process.js
+++ b/packages/trader/src/Stores/Modules/Trading/Helpers/process.js
@@ -1,4 +1,4 @@
-import ContractTypeHelper from './contract-type';
+import { ContractType as ContractTypeHelper} from '@deriv/shared';
 import * as ContractType from '../Actions/contract-type';
 import * as Duration from '../Actions/duration';
 import * as StartDate from '../Actions/start-date';
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/start-date.js b/packages/trader/src/Stores/Modules/Trading/Helpers/start-date.js
deleted file mode 100644
index 010e86ae6daf..000000000000
--- a/packages/trader/src/Stores/Modules/Trading/Helpers/start-date.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import ServerTime from '_common/base/server_time';
-import { toMoment } from '@deriv/shared';
-
-export const buildForwardStartingConfig = (contract, forward_starting_dates) => {
-    const forward_starting_config = [];
-
-    if ((contract.forward_starting_options || []).length) {
-        contract.forward_starting_options.forEach(option => {
-            const duplicated_option = forward_starting_config.find(opt => opt.value === parseInt(option.date));
-            const current_session = { open: toMoment(option.open), close: toMoment(option.close) };
-            if (duplicated_option) {
-                duplicated_option.sessions.push(current_session);
-            } else {
-                forward_starting_config.push({
-                    text: toMoment(option.date).format('ddd - DD MMM, YYYY'),
-                    value: parseInt(option.date),
-                    sessions: [current_session],
-                });
-            }
-        });
-    }
-
-    return forward_starting_config.length ? forward_starting_config : forward_starting_dates;
-};
-
-// returns false if same as now
-const isBeforeDate = (compare_moment, start_moment, should_only_check_hour) => {
-    const now_moment = toMoment(start_moment);
-    if (should_only_check_hour) {
-        now_moment.minute(0).second(0);
-    }
-    return compare_moment.isBefore(now_moment) && now_moment.unix() !== compare_moment.unix();
-};
-
-export const isSessionAvailable = (
-    sessions = [],
-    compare_moment = toMoment(ServerTime.get()),
-    start_moment = toMoment(ServerTime.get()),
-    should_only_check_hour = false
-) =>
-    !isBeforeDate(compare_moment, ServerTime.get(), should_only_check_hour) &&
-    !isBeforeDate(compare_moment, start_moment, should_only_check_hour) &&
-    (!sessions.length ||
-        !!sessions.find(session =>
-            compare_moment.isBetween(session.open, session.close, should_only_check_hour ? 'hour' : null, '[]')
-        ));
diff --git a/packages/trader/src/Stores/Modules/Trading/trade-store.js b/packages/trader/src/Stores/Modules/Trading/trade-store.js
index 3cb8ba5737ec..5b0874634c4f 100644
--- a/packages/trader/src/Stores/Modules/Trading/trade-store.js
+++ b/packages/trader/src/Stores/Modules/Trading/trade-store.js
@@ -12,29 +12,31 @@ import {
     isMobile,
     showDigitalOptionsUnavailableError,
     WS,
+    getValidationRules,
+    getMultiplierValidationRules,
+    pickDefaultSymbol,
+    showUnavailableLocationError,
+    isMarketClosed,
+    findFirstOpenMarket,
+    showMxMltUnavailableError,
+    ContractType,
+    convertDurationLimit,
+    resetEndTimeOnVolatilityIndices,
+    getBarrierPipSize,
+    isBarrierSupported,
+    removeBarrier,
 } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { isDigitContractType, isDigitTradeType } from 'Modules/Trading/Helpers/digits';
 import ServerTime from '_common/base/server_time';
 import { processPurchase } from './Actions/purchase';
 import * as Symbol from './Actions/symbol';
-import getValidationRules, { getMultiplierValidationRules } from './Constants/validation-rules';
-import {
-    pickDefaultSymbol,
-    showUnavailableLocationError,
-    isMarketClosed,
-    findFirstOpenMarket,
-    showMxMltUnavailableError,
-} from './Helpers/active-symbols';
-import ContractType from './Helpers/contract-type';
-import { convertDurationLimit, resetEndTimeOnVolatilityIndices } from './Helpers/duration';
+
 import { processTradeParams } from './Helpers/process';
 import { createProposalRequests, getProposalErrorField, getProposalInfo } from './Helpers/proposal';
-import { getBarrierPipSize } from './Helpers/barrier';
-import { setLimitOrderBarriers } from '../Contract/Helpers/limit-orders';
+import { setLimitOrderBarriers } from './Helpers/limit-orders';
 import { ChartBarrierStore } from '../SmartChart/chart-barrier-store';
 import { BARRIER_COLORS } from '../SmartChart/Constants/barriers';
-import { isBarrierSupported, removeBarrier } from '../SmartChart/Helpers/barriers';
 import BaseStore from '../../base-store';
 
 const store_name = 'trade_store';
diff --git a/packages/trader/src/Stores/Modules/index.js b/packages/trader/src/Stores/Modules/index.js
index c31d1e488a07..4364812060ca 100644
--- a/packages/trader/src/Stores/Modules/index.js
+++ b/packages/trader/src/Stores/Modules/index.js
@@ -1,9 +1,9 @@
 // import ContractReplayStore from './Contract/contract-replay-store';
 // import ContractTradeStore from './Contract/contract-trade-store';
 // import PortfolioStore from './Portfolio/portfolio-store';
-import ProfitTableStore from './Profit/profit-store';
-import StatementStore from './Statement/statement-store';
-import TradeStore from './Trading/trade-store';
+// import ProfitTableStore from './Profit/profit-store';
+// import StatementStore from './Statement/statement-store';
+import TradeStore from "./Trading/trade-store";
 
 export default class ModulesStore {
     constructor(root_store, core_store) {
@@ -11,8 +11,8 @@ export default class ModulesStore {
         // this.contract_replay = new ContractReplayStore({ root_store });
         // this.contract_trade = new ContractTradeStore({ root_store });
         // this.portfolio = new PortfolioStore({ root_store });
-        this.profit_table = new ProfitTableStore({ root_store });
-        this.statement = new StatementStore({ root_store });
+        // this.profit_table = new ProfitTableStore({ root_store });
+        // this.statement = new StatementStore({ root_store });
         this.trade = new TradeStore({ root_store });
     }
 }
diff --git a/packages/trader/src/Stores/index.js b/packages/trader/src/Stores/index.js
index f0495d2fb985..7e95a9fe0e14 100644
--- a/packages/trader/src/Stores/index.js
+++ b/packages/trader/src/Stores/index.js
@@ -10,6 +10,7 @@ export default class RootStore {
         this.rudderstack = core_store.rudderstack;
         this.pushwoosh = core_store.pushwoosh;
         this.notifications = core_store.notifications;
+        this.contract = core_store.contract;
         this.contract_replay = core_store.contract_replay;
         this.contract_trade = core_store.contract_trade;
         this.portfolio = core_store.portfolio;

From 916f741574db7e29e9767edc5eb5b999147c86f8 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Tue, 7 Jun 2022 07:56:38 +0430
Subject: [PATCH 36/64] remove contract store from core exports

---
 packages/core/src/Stores/index.js    | 2 --
 packages/reports/src/Stores/index.js | 1 -
 packages/trader/src/Stores/index.js  | 1 -
 3 files changed, 4 deletions(-)

diff --git a/packages/core/src/Stores/index.js b/packages/core/src/Stores/index.js
index 1d7549a1f78f..d10c01f10fae 100644
--- a/packages/core/src/Stores/index.js
+++ b/packages/core/src/Stores/index.js
@@ -9,7 +9,6 @@ import NotificationStore from './notification-store';
 import UIStore from './ui-store';
 import ActiveSymbolsStore from './active-symbols-store';
 import PortfolioStore from './portfolio';
-import ContractStore from './contract-store';
 import ContractReplayStore from './contract-replay-store';
 import ContractTradeStore from './contract-trade-store';
 import { ChartBarrierStore } from './chart-barrier-store';
@@ -27,7 +26,6 @@ export default class RootStore {
         this.notifications = new NotificationStore(this);
         this.active_symbols = new ActiveSymbolsStore(this);
         this.portfolio = new PortfolioStore(this);
-        this.contract = new ContractStore(this)
         this.contract_replay = new ContractReplayStore(this);
         this.contract_trade = new ContractTradeStore(this);
         this.chart_barrier_store = new ChartBarrierStore(this);
diff --git a/packages/reports/src/Stores/index.js b/packages/reports/src/Stores/index.js
index 7e95a9fe0e14..f0495d2fb985 100644
--- a/packages/reports/src/Stores/index.js
+++ b/packages/reports/src/Stores/index.js
@@ -10,7 +10,6 @@ export default class RootStore {
         this.rudderstack = core_store.rudderstack;
         this.pushwoosh = core_store.pushwoosh;
         this.notifications = core_store.notifications;
-        this.contract = core_store.contract;
         this.contract_replay = core_store.contract_replay;
         this.contract_trade = core_store.contract_trade;
         this.portfolio = core_store.portfolio;
diff --git a/packages/trader/src/Stores/index.js b/packages/trader/src/Stores/index.js
index 7e95a9fe0e14..f0495d2fb985 100644
--- a/packages/trader/src/Stores/index.js
+++ b/packages/trader/src/Stores/index.js
@@ -10,7 +10,6 @@ export default class RootStore {
         this.rudderstack = core_store.rudderstack;
         this.pushwoosh = core_store.pushwoosh;
         this.notifications = core_store.notifications;
-        this.contract = core_store.contract;
         this.contract_replay = core_store.contract_replay;
         this.contract_trade = core_store.contract_trade;
         this.portfolio = core_store.portfolio;

From 07f48a5c195195ee3c576986e761be71c093e0d4 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Tue, 7 Jun 2022 08:24:15 +0430
Subject: [PATCH 37/64] update reports packages version

---
 packages/reports/package.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/reports/package.json b/packages/reports/package.json
index 2e306248e1a6..2102253cd215 100644
--- a/packages/reports/package.json
+++ b/packages/reports/package.json
@@ -64,17 +64,17 @@
       "mocha": "^7.1.1",
       "mochapack": "^2.1.2",
       "mock-local-storage": "^1.1.8",
-      "node-sass": "^4.12.0",
+      "node-sass": "^7.0.1",
       "postcss-loader": "^6.2.1",
       "postcss-preset-env": "^7.4.3",
       "postcss-scss": "^4.0.3",
       "react-svg-loader": "^3.0.3",
       "resolve-url-loader": "^3.1.2",
-      "sass-loader": "^10.1.1",
+      "sass-loader": "^12.6.0",
       "sass-resources-loader": "^2.1.1",
       "sinon": "^7.3.2",
       "stylelint-formatter-pretty": "^2.1.1",
-      "svgo": "^1.3.2",
+      "svgo": "^2.8.0",
       "terser-webpack-plugin": "^5.1.1",
       "webpack": "^5.46.0",
       "webpack-bundle-analyzer": "^4.3.0",
@@ -107,7 +107,7 @@
       "mobx": "^5.15.7",
       "mobx-react": "6.3.1",
       "mobx-utils": "^5.5.5",
-      "moment": "^2.24.0",
+      "moment": "^2.29.2",
       "null-loader": "^4.0.1",
       "object.fromentries": "^2.0.0",
       "promise-polyfill": "^8.1.3",

From 54a2d40790a32c8263d5178e5fbc8ba0605b81b6 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Tue, 7 Jun 2022 09:26:32 +0430
Subject: [PATCH 38/64] remove commented imports

---
 .../Stores/Helpers/chart-marker-helpers.js    |  3 -
 .../core/src/Stores/Helpers/chart-markers.js  |  2 -
 .../core/src/Stores/Helpers/limit-orders.js   |  3 -
 .../core/src/Stores/chart-barrier-store.js    |  1 -
 .../core/src/Stores/contract-replay-store.js  |  1 -
 packages/core/src/Stores/contract-store.js    |  8 ---
 .../core/src/Stores/contract-trade-store.js   |  4 +-
 .../shared/src/utils/constants/markers.js     | 66 -------------------
 .../src/utils/helpers/format-response.js      |  1 -
 .../utils/helpers/portfolio-notifications.js  |  1 -
 10 files changed, 1 insertion(+), 89 deletions(-)
 delete mode 100644 packages/shared/src/utils/constants/markers.js

diff --git a/packages/core/src/Stores/Helpers/chart-marker-helpers.js b/packages/core/src/Stores/Helpers/chart-marker-helpers.js
index a856e5da06e1..c4bca3611d39 100644
--- a/packages/core/src/Stores/Helpers/chart-marker-helpers.js
+++ b/packages/core/src/Stores/Helpers/chart-marker-helpers.js
@@ -1,9 +1,6 @@
 import extend from 'extend';
 import { isUserSold, isMultiplierContract, isDigitContract, getEndTime, isMobile } from '@deriv/shared';
 
-// import { isMobile } from '../screen';
-// import { getEndTime } from './logic';
-
 import { MARKER_TYPES_CONFIG } from '../Constants/markers';
 
 const createMarkerConfig = (marker_type, x, y, content_config) =>
diff --git a/packages/core/src/Stores/Helpers/chart-markers.js b/packages/core/src/Stores/Helpers/chart-markers.js
index eec289052c73..58db00d9d498 100644
--- a/packages/core/src/Stores/Helpers/chart-markers.js
+++ b/packages/core/src/Stores/Helpers/chart-markers.js
@@ -7,8 +7,6 @@ import {
     createMarkerSpotMiddle,
     getSpotCount,
 } from './chart-marker-helpers';
-// import { unique } from '../object';
-// import { getChartType, getEndTime } from './logic';
 import { getChartType, getEndTime, unique } from '@deriv/shared';
 import { MARKER_TYPES_CONFIG } from '../Constants/markers';
 
diff --git a/packages/core/src/Stores/Helpers/limit-orders.js b/packages/core/src/Stores/Helpers/limit-orders.js
index fc598f75e3b9..aaa5044ae27c 100644
--- a/packages/core/src/Stores/Helpers/limit-orders.js
+++ b/packages/core/src/Stores/Helpers/limit-orders.js
@@ -1,7 +1,4 @@
-// import { isMultiplierContract } from '../contract';
-// import { BARRIER_COLORS, BARRIER_LINE_STYLES } from '../constants';
 import { ChartBarrierStore } from '../chart-barrier-store';
-// import { removeBarrier } from './barriers';
 import { isMultiplierContract, BARRIER_COLORS, BARRIER_LINE_STYLES, removeBarrier } from '@deriv/shared';
 
 const isLimitOrderBarrierSupported = (contract_type, contract_info) =>
diff --git a/packages/core/src/Stores/chart-barrier-store.js b/packages/core/src/Stores/chart-barrier-store.js
index 38d4a34025ad..1912722c65a6 100644
--- a/packages/core/src/Stores/chart-barrier-store.js
+++ b/packages/core/src/Stores/chart-barrier-store.js
@@ -1,6 +1,5 @@
 import { action, computed, observable } from 'mobx';
 import { BARRIER_COLORS, BARRIER_LINE_STYLES, CONTRACT_SHADES, DEFAULT_SHADES, barriersToString } from '@deriv/shared';
-// import { barriersToString } from './Helpers/barriers';
 
 export class ChartBarrierStore {
     @observable color;
diff --git a/packages/core/src/Stores/contract-replay-store.js b/packages/core/src/Stores/contract-replay-store.js
index cf5e474b21ec..e729a9fe8508 100644
--- a/packages/core/src/Stores/contract-replay-store.js
+++ b/packages/core/src/Stores/contract-replay-store.js
@@ -4,7 +4,6 @@ import { routes, isEmptyObject, isForwardStarting, WS, contractCancelled, contra
 import { Money } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import ContractStore from './contract-store';
-// import { contractCancelled, contractSold } from './Helpers/portfolio-notifications';
 import BaseStore from './base-store';
 
 export default class ContractReplayStore extends BaseStore {
diff --git a/packages/core/src/Stores/contract-store.js b/packages/core/src/Stores/contract-store.js
index 0748957ac86d..b1dbad1fd5cc 100644
--- a/packages/core/src/Stores/contract-store.js
+++ b/packages/core/src/Stores/contract-store.js
@@ -15,17 +15,9 @@ import {
     BARRIER_LINE_STYLES,
     isBarrierSupported,
 } from '@deriv/shared';
-
 import { setLimitOrderBarriers, getLimitOrder } from './Helpers/limit-orders';
 import { ChartBarrierStore } from './chart-barrier-store';
-
 import { createChartMarkers } from './Helpers/chart-markers';
-// import { setLimitOrderBarriers, getLimitOrder } from './Helpers/limit-orders';
-// import { getChartConfig, getContractUpdateConfig, getEndTime } from '@deriv/shared/src/utils/helpers/logic';
-// import getValidationRules from './Constants/validation-rules';
-// import { BARRIER_COLORS, BARRIER_LINE_STYLES } from '../SmartChart/Constants/barriers';
-// import { isBarrierSupported } from '../SmartChart/Helpers/barriers';
-// import { ChartBarrierStore } from '../SmartChart/chart-barrier-store';
 import BaseStore from './base-store';
 
 export default class ContractStore extends BaseStore {
diff --git a/packages/core/src/Stores/contract-trade-store.js b/packages/core/src/Stores/contract-trade-store.js
index cb5ee47034ed..7db64e92de62 100644
--- a/packages/core/src/Stores/contract-trade-store.js
+++ b/packages/core/src/Stores/contract-trade-store.js
@@ -8,10 +8,8 @@ import {
     isCallPut,
     getContractTypesConfig,
 } from '@deriv/shared';
-// import { switch_to_tick_chart } from './Helpers/chart-notifications';
 import ContractStore from './contract-store';
-// import { isCallPut } from './Helpers/contract-type';
-// import { getContractTypesConfig } from '../Trading/Constants/contract';
+
 import BaseStore from './base-store';
 
 export default class ContractTradeStore extends BaseStore {
diff --git a/packages/shared/src/utils/constants/markers.js b/packages/shared/src/utils/constants/markers.js
deleted file mode 100644
index acd76a6cf7a2..000000000000
--- a/packages/shared/src/utils/constants/markers.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import { localize } from '@deriv/translations';
-// import MarkerLine from '../../components/markers/marker-line.jsx';
-// import MarkerSpotLabel from '../../components/markers/marker-spot-label.jsx';
-// import MarkerSpot from '../../components/markers/marker-spot.jsx';
-
-export const MARKER_TYPES_CONFIG = {
-    LINE_END: {
-        type: 'LINE_END',
-        marker_config: {
-            // ContentComponent: MarkerLine,
-            ContentComponent: null,
-            className: 'chart-marker-line',
-        },
-        content_config: { line_style: 'dash', label: localize('End Time') },
-    },
-    LINE_PURCHASE: {
-        type: 'LINE_PURCHASE',
-        marker_config: {
-            // ContentComponent: MarkerLine,
-            ContentComponent: null,
-            className: 'chart-marker-line',
-        },
-        content_config: { line_style: 'solid', label: localize('Purchase Time') },
-    },
-    LINE_START: {
-        type: 'LINE_START',
-        marker_config: {
-            // ContentComponent: MarkerLine,
-            ContentComponent: null,
-            className: 'chart-marker-line',
-        },
-        content_config: { line_style: 'solid', label: localize('Start Time') },
-    },
-    SPOT_ENTRY: {
-        type: 'SPOT_ENTRY',
-        marker_config: {
-            // ContentComponent: MarkerSpot,
-            ContentComponent: null,
-        },
-        content_config: { className: 'chart-spot__entry' },
-    },
-    SPOT_SELL: {
-        type: 'SPOT_SELL',
-        marker_config: {
-            // ContentComponent: MarkerSpot,
-            ContentComponent: null,
-        },
-        content_config: { className: 'chart-spot__sell' },
-    },
-    SPOT_EXIT: {
-        type: 'SPOT_EXIT',
-        marker_config: {
-            // ContentComponent: MarkerSpotLabel,
-            ContentComponent: null,
-        },
-        content_config: { spot_className: 'chart-spot__spot' },
-    },
-    SPOT_MIDDLE: {
-        type: 'SPOT_MIDDLE',
-        marker_config: {
-            // ContentComponent: MarkerSpotLabel,
-            ContentComponent: null,
-        },
-        content_config: { spot_className: 'chart-spot__spot' },
-    },
-};
diff --git a/packages/shared/src/utils/helpers/format-response.js b/packages/shared/src/utils/helpers/format-response.js
index 300a58656955..da9671ded31d 100644
--- a/packages/shared/src/utils/helpers/format-response.js
+++ b/packages/shared/src/utils/helpers/format-response.js
@@ -1,6 +1,5 @@
 import { getUnsupportedContracts } from '../constants';
 import { getSymbolDisplayName } from './active-symbols';
-
 import { getMarketInformation } from './market-underlying';
 
 const isUnSupportedContract = portfolio_pos =>
diff --git a/packages/shared/src/utils/helpers/portfolio-notifications.js b/packages/shared/src/utils/helpers/portfolio-notifications.js
index 1d15a30fd7d9..60d23a5a6394 100644
--- a/packages/shared/src/utils/helpers/portfolio-notifications.js
+++ b/packages/shared/src/utils/helpers/portfolio-notifications.js
@@ -1,5 +1,4 @@
 import React from 'react';
-// import { Money } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 
 export const contractSold = (currency, sold_for, Money) => ({

From 945c82f043affb5794a35fcfa07c003b2c5c99c3 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Tue, 7 Jun 2022 11:32:52 +0430
Subject: [PATCH 39/64] add getContactValidationRules to contact core

---
 packages/core/src/Stores/contract-store.js    |  4 +-
 packages/core/src/Stores/portfolio.js         | 20 +++---
 packages/shared/src/utils/helpers/index.js    |  1 +
 .../src/utils/helpers/validation-rules.js     | 66 +++++++++++++++++++
 4 files changed, 78 insertions(+), 13 deletions(-)
 create mode 100644 packages/shared/src/utils/helpers/validation-rules.js

diff --git a/packages/core/src/Stores/contract-store.js b/packages/core/src/Stores/contract-store.js
index b1dbad1fd5cc..9809aa6677bb 100644
--- a/packages/core/src/Stores/contract-store.js
+++ b/packages/core/src/Stores/contract-store.js
@@ -10,7 +10,7 @@ import {
     getChartConfig,
     getContractUpdateConfig,
     getEndTime,
-    getValidationRules,
+    getContractValidationRules,
     BARRIER_COLORS,
     BARRIER_LINE_STYLES,
     isBarrierSupported,
@@ -24,7 +24,7 @@ export default class ContractStore extends BaseStore {
     constructor(root_store, { contract_id }) {
         super({
             root_store,
-            validation_rules: getValidationRules(),
+            validation_rules: getContractValidationRules(),
         });
 
         this.root_store = root_store;
diff --git a/packages/core/src/Stores/portfolio.js b/packages/core/src/Stores/portfolio.js
index bfdc2b71c32f..751290041cb5 100644
--- a/packages/core/src/Stores/portfolio.js
+++ b/packages/core/src/Stores/portfolio.js
@@ -23,10 +23,6 @@ import {
 import { Money } from '@deriv/components';
 import { ChartBarrierStore } from './chart-barrier-store';
 import { setLimitOrderBarriers } from './Helpers/limit-orders';
-// import { formatPortfolioPosition } from './Helpers/format-response';
-// import { contractCancelled, contractSold } from './Helpers/portfolio-notifications';
-// import { getDurationPeriod, getDurationTime, getDurationUnitText } from './Helpers/details';
-// import { getEndTime } from '../Contract/Helpers/logic';
 
 import BaseStore from './base-store';
 
@@ -40,8 +36,8 @@ export default class PortfolioStore extends BaseStore {
     // barriers
     @observable barriers = [];
     @observable main_barrier = null;
-    @observable is_multiplier = false;
-    
+    @observable contract_type = '';
+
     getPositionById = createTransformer(id => this.positions.find(position => +position.id === +id));
 
     responseQueue = [];
@@ -507,7 +503,7 @@ export default class PortfolioStore extends BaseStore {
         return !this.is_loading && this.all_positions.length === 0;
     }
 
-// from trade store
+    // from trade store
     @action.bound
     setPurchaseSpotBarrier(is_over, position) {
         const key = 'PURCHASE_SPOT_BARRIER';
@@ -537,8 +533,9 @@ export default class PortfolioStore extends BaseStore {
     @action.bound
     updateBarrierColor(is_dark_mode) {
         const { main_barrier } = JSON.parse(localStorage.getItem('trade_store'));
-        if (main_barrier) {
-            main_barrier.updateBarrierColor(is_dark_mode);
+        this.main_barrier = main_barrier;
+        if (this.main_barrier) {
+            this.main_barrier.updateBarrierColor(is_dark_mode);
         }
     }
 
@@ -556,7 +553,8 @@ export default class PortfolioStore extends BaseStore {
 
     @computed
     get is_multiplier() {
-        const { contract_type }  = JSON.parse(localStorage.getItem('trade_store'));
-        return contract_type === 'multiplier';
+        const { contract_type } = JSON.parse(localStorage.getItem('trade_store'));
+        this.contract_type = contract_type;
+        return this.contract_type === 'multiplier';
     }
 }
diff --git a/packages/shared/src/utils/helpers/index.js b/packages/shared/src/utils/helpers/index.js
index aeff7235465a..6582a86ac6d1 100644
--- a/packages/shared/src/utils/helpers/index.js
+++ b/packages/shared/src/utils/helpers/index.js
@@ -10,3 +10,4 @@ export * from './logic';
 export * from './market-underlying';
 export * from './portfolio-notifications';
 export * from './start-date';
+export * from './validation-rules';
diff --git a/packages/shared/src/utils/helpers/validation-rules.js b/packages/shared/src/utils/helpers/validation-rules.js
new file mode 100644
index 000000000000..7f6d4ee56ec3
--- /dev/null
+++ b/packages/shared/src/utils/helpers/validation-rules.js
@@ -0,0 +1,66 @@
+import { localize } from '@deriv/translations';
+import { getTotalProfit } from '../contract';
+import { getBuyPrice } from "./logic";
+
+export const getContractValidationRules = () => ({
+    has_contract_update_stop_loss: {
+        trigger: 'contract_update_stop_loss',
+    },
+    contract_update_stop_loss: {
+        rules: [
+            [
+                'req',
+                {
+                    condition: contract_store => !contract_store.contract_update_stop_loss,
+                    message: localize('Please enter a stop loss amount.'),
+                },
+            ],
+            [
+                'custom',
+                {
+                    func: (value, options, contract_store) => {
+                        const profit = getTotalProfit(contract_store.contract_info);
+                        return !(profit < 0 && -value > profit);
+                    },
+                    message: localize("Please enter a stop loss amount that's higher than the current potential loss."),
+                },
+            ],
+            [
+                'custom',
+                {
+                    func: (value, options, contract_store) => {
+                        const stake = getBuyPrice(contract_store);
+                        return value < stake + 1;
+                    },
+                    message: localize('Invalid stop loss. Stop loss cannot be more than stake.'),
+                },
+            ],
+        ],
+    },
+    has_contract_update_take_profit: {
+        trigger: 'contract_update_take_profit',
+    },
+    contract_update_take_profit: {
+        rules: [
+            [
+                'req',
+                {
+                    condition: contract_store => !contract_store.contract_update_take_profit,
+                    message: localize('Please enter a take profit amount.'),
+                },
+            ],
+            [
+                'custom',
+                {
+                    func: (value, options, contract_store) => {
+                        const profit = getTotalProfit(contract_store.contract_info);
+                        return !(profit > 0 && +value < profit);
+                    },
+                    message: localize(
+                        "Please enter a take profit amount that's higher than the current potential profit."
+                    ),
+                },
+            ],
+        ],
+    },
+});

From d4e8c45ea2ecb1ba8058dc4414d5350f70838e5a Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Tue, 7 Jun 2022 11:57:32 +0430
Subject: [PATCH 40/64] move duration test to shared

---
 .../Helpers => shared/src/utils/helpers}/__tests__/durations.js   | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/{trader/src/Stores/Modules/Trading/Helpers => shared/src/utils/helpers}/__tests__/durations.js (100%)

diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/__tests__/durations.js b/packages/shared/src/utils/helpers/__tests__/durations.js
similarity index 100%
rename from packages/trader/src/Stores/Modules/Trading/Helpers/__tests__/durations.js
rename to packages/shared/src/utils/helpers/__tests__/durations.js

From bc24334192e3f84720b5f26306efb2c0ca50f050 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Wed, 8 Jun 2022 09:00:43 +0430
Subject: [PATCH 41/64] fix active_symbols store

---
 packages/core/src/Stores/active-symbols-store.js | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/Stores/active-symbols-store.js b/packages/core/src/Stores/active-symbols-store.js
index 8e20789d30d0..9ac0e9d7dc38 100644
--- a/packages/core/src/Stores/active-symbols-store.js
+++ b/packages/core/src/Stores/active-symbols-store.js
@@ -1,5 +1,5 @@
 import { WS } from '@deriv/shared';
-import { observable, action } from 'mobx';
+import { observable, action, runInAction } from 'mobx';
 import BaseStore from './base-store';
 
 export default class ActiveSymbolsStore extends BaseStore {
@@ -7,11 +7,13 @@ export default class ActiveSymbolsStore extends BaseStore {
 
     @action.bound
     async setActiveSymbols() {
-        const { active_symbols } = await WS.authorized.activeSymbols();
-        if (!active_symbols.lenght) {
-            this.active_symbols = [];
-            return;
-        }
-        this.active_symbols = active_symbols;
+        const { active_symbols, error } = await WS.authorized.activeSymbols();
+        runInAction(() => {
+            if (!active_symbols.length || error) {
+                this.active_symbols = [];
+                return;
+            }
+            this.active_symbols = active_symbols;
+        });
     }
 }

From 3c589bf312bc58bac33f6d76bd4813976e92b0f4 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Wed, 8 Jun 2022 19:09:37 +0430
Subject: [PATCH 42/64] fix moduleLoader in routes.config error

---
 packages/core/src/App/Constants/routes-config.js          | 8 ++++----
 .../reports/src/Stores/Modules/Profit/profit-store.js     | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/App/Constants/routes-config.js b/packages/core/src/App/Constants/routes-config.js
index 64e97ba92406..e8703a673800 100644
--- a/packages/core/src/App/Constants/routes-config.js
+++ b/packages/core/src/App/Constants/routes-config.js
@@ -17,10 +17,10 @@ const Trader = React.lazy(() =>
 );
 
 const Reports = React.lazy(() => {
-    moduleLoader(() => {
-        // eslint-disable-next-line import/no-unresolved
-        return import(/* webpackChunkName: "reports" */ '@deriv/reports');
-    })
+    // moduleLoader(() => {
+    // eslint-disable-next-line import/no-unresolved
+    return import(/* webpackChunkName: "reports" */ '@deriv/reports');
+    // })
 });
 
 const CFD = React.lazy(() =>
diff --git a/packages/reports/src/Stores/Modules/Profit/profit-store.js b/packages/reports/src/Stores/Modules/Profit/profit-store.js
index 00c4c07e137c..adc04536f095 100644
--- a/packages/reports/src/Stores/Modules/Profit/profit-store.js
+++ b/packages/reports/src/Stores/Modules/Profit/profit-store.js
@@ -72,7 +72,7 @@ export default class ProfitTableStore extends BaseStore {
             formatProfitTableTransactions(
                 transaction,
                 this.root_store.client.currency,
-                this.root_store.modules.trade.active_symbols
+                this.root_store.active_symbols.active_symbols
             )
         );
 

From 6e9556cff7d21dd40b7a941aa29a8646086a7b09 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Tue, 14 Jun 2022 09:36:34 +0800
Subject: [PATCH 43/64] fix stores constructor

---
 .../core/src/Stores/Helpers/chart-markers.js  |   4 +-
 packages/core/src/Stores/Helpers/logic.js     | 104 ++++++++++++++++++
 .../core/src/Stores/Helpers/start-date.js     |  48 ++++++++
 packages/core/src/Stores/base-store.js        |  26 ++---
 .../core/src/Stores/contract-replay-store.js  |  11 +-
 packages/core/src/Stores/contract-store.js    |  12 +-
 .../core/src/Stores/contract-trade-store.js   |   3 +-
 packages/core/src/Stores/portfolio.js         |  10 +-
 8 files changed, 194 insertions(+), 24 deletions(-)
 create mode 100644 packages/core/src/Stores/Helpers/logic.js
 create mode 100644 packages/core/src/Stores/Helpers/start-date.js

diff --git a/packages/core/src/Stores/Helpers/chart-markers.js b/packages/core/src/Stores/Helpers/chart-markers.js
index 58db00d9d498..d225077eaf9b 100644
--- a/packages/core/src/Stores/Helpers/chart-markers.js
+++ b/packages/core/src/Stores/Helpers/chart-markers.js
@@ -7,8 +7,10 @@ import {
     createMarkerSpotMiddle,
     getSpotCount,
 } from './chart-marker-helpers';
-import { getChartType, getEndTime, unique } from '@deriv/shared';
+// import { getChartType, getEndTime, unique } from '@deriv/shared';
+import { getEndTime, unique } from '@deriv/shared';
 import { MARKER_TYPES_CONFIG } from '../Constants/markers';
+import { getChartType } from "./logic";
 
 export const createChartMarkers = contract_info => {
     let markers = [];
diff --git a/packages/core/src/Stores/Helpers/logic.js b/packages/core/src/Stores/Helpers/logic.js
new file mode 100644
index 000000000000..83d7a51adc26
--- /dev/null
+++ b/packages/core/src/Stores/Helpers/logic.js
@@ -0,0 +1,104 @@
+import moment from 'moment';
+// import { isEmptyObject } from '../object';
+// import { isUserSold } from '../contract';
+// import ServerTime from '../../services/server-time';
+import { isEmptyObject, isUserSold } from '@deriv/shared';
+// import ServerTime from '../../_common/base/trader_server_time';
+import ServerTime from '../../_common/base/server_time';
+
+export const getChartConfig = contract_info => {
+    if (isEmptyObject(contract_info)) return null;
+    const start = contract_info.date_start;
+    const end = getEndTime(contract_info);
+    const granularity = getChartGranularity(start, end || null);
+    const chart_type = getChartType(start, end || null);
+
+    return {
+        chart_type: contract_info.tick_count ? 'mountain' : chart_type,
+        granularity: contract_info.tick_count ? 0 : granularity,
+        end_epoch: end,
+        start_epoch: start,
+        scroll_to_epoch: contract_info.purchase_time,
+    };
+};
+
+const hour_to_granularity_map = [
+    [1, 0],
+    [2, 120],
+    [6, 600],
+    [24, 900],
+    [5 * 24, 3600],
+    [30 * 24, 14400],
+];
+
+const getExpiryTime = time => time || ServerTime.get().unix();
+
+export const getChartType = (start_time, expiry_time) => {
+    const duration = moment.duration(moment.unix(getExpiryTime(expiry_time)).diff(moment.unix(start_time))).asHours();
+    // use line chart if duration is equal or less than 1 hour
+    return duration <= 1 ? 'mountain' : 'candle';
+};
+
+export const getChartGranularity = (start_time, expiry_time) =>
+    calculateGranularity(getExpiryTime(expiry_time) - start_time);
+
+export const calculateGranularity = duration =>
+    (hour_to_granularity_map.find(m => duration <= m[0] * 3600) || [null, 86400])[1];
+
+export const isContractElapsed = (contract_info, tick) => {
+    if (isEmptyObject(tick) || isEmptyObject(contract_info)) return false;
+    const end_time = getEndTime(contract_info);
+    if (end_time && tick.epoch) {
+        const seconds = moment.duration(moment.unix(tick.epoch).diff(moment.unix(end_time))).asSeconds();
+        return seconds >= 2;
+    }
+    return false;
+};
+
+export const isEndedBeforeCancellationExpired = contract_info =>
+    !!(contract_info.cancellation && getEndTime(contract_info) < contract_info.cancellation.date_expiry);
+
+export const isSoldBeforeStart = contract_info =>
+    contract_info.sell_time && +contract_info.sell_time < +contract_info.date_start;
+
+export const isStarted = contract_info =>
+    !contract_info.is_forward_starting || contract_info.current_spot_time > contract_info.date_start;
+
+export const isUserCancelled = contract_info => contract_info.status === 'cancelled';
+
+export const isCancellationExpired = contract_info =>
+    !!(contract_info.cancellation.date_expiry < ServerTime.get().unix());
+
+export const getEndTime = contract_info => {
+    const {
+        exit_tick_time,
+        date_expiry,
+        is_expired,
+        is_path_dependent,
+        sell_time,
+        status,
+        tick_count: is_tick_contract,
+    } = contract_info;
+
+    const is_finished = is_expired && status !== 'open';
+
+    if (!is_finished && !isUserSold(contract_info) && !isUserCancelled(contract_info)) return undefined;
+
+    if (isUserSold(contract_info)) {
+        return sell_time > date_expiry ? date_expiry : sell_time;
+    } else if (!is_tick_contract && sell_time > date_expiry) {
+        return date_expiry;
+    }
+
+    return date_expiry > exit_tick_time && !+is_path_dependent ? date_expiry : exit_tick_time;
+};
+
+export const getBuyPrice = contract_store => {
+    return contract_store.contract_info.buy_price;
+};
+
+/**
+ * Set contract update form initial values
+ * @param {object} contract_update - contract_update response
+ * @param {object} limit_order - proposal_open_contract.limit_order response
+ */
diff --git a/packages/core/src/Stores/Helpers/start-date.js b/packages/core/src/Stores/Helpers/start-date.js
new file mode 100644
index 000000000000..01ea6f8547df
--- /dev/null
+++ b/packages/core/src/Stores/Helpers/start-date.js
@@ -0,0 +1,48 @@
+// import ServerTime from '../../services/server-time';
+import ServerTime from '../../_common/base/server_time';
+// import { toMoment } from '../date';
+import { toMoment } from '@deriv/shared';
+
+export const buildForwardStartingConfig = (contract, forward_starting_dates) => {
+    const forward_starting_config = [];
+
+    if ((contract.forward_starting_options || []).length) {
+        contract.forward_starting_options.forEach(option => {
+            const duplicated_option = forward_starting_config.find(opt => opt.value === parseInt(option.date));
+            const current_session = { open: toMoment(option.open), close: toMoment(option.close) };
+            if (duplicated_option) {
+                duplicated_option.sessions.push(current_session);
+            } else {
+                forward_starting_config.push({
+                    text: toMoment(option.date).format('ddd - DD MMM, YYYY'),
+                    value: parseInt(option.date),
+                    sessions: [current_session],
+                });
+            }
+        });
+    }
+
+    return forward_starting_config.length ? forward_starting_config : forward_starting_dates;
+};
+
+// returns false if same as now
+const isBeforeDate = (compare_moment, start_moment, should_only_check_hour) => {
+    const now_moment = toMoment(start_moment);
+    if (should_only_check_hour) {
+        now_moment.minute(0).second(0);
+    }
+    return compare_moment.isBefore(now_moment) && now_moment.unix() !== compare_moment.unix();
+};
+
+export const isSessionAvailable = (
+    sessions = [],
+    compare_moment = toMoment(ServerTime.get()),
+    start_moment = toMoment(ServerTime.get()),
+    should_only_check_hour = false
+) =>
+    !isBeforeDate(compare_moment, ServerTime.get(), should_only_check_hour) &&
+    !isBeforeDate(compare_moment, start_moment, should_only_check_hour) &&
+    (!sessions.length ||
+        !!sessions.find(session =>
+            compare_moment.isBetween(session.open, session.close, should_only_check_hour ? 'hour' : null, '[]')
+        ));
diff --git a/packages/core/src/Stores/base-store.js b/packages/core/src/Stores/base-store.js
index e82dce0947c6..66eb8f8ad1c4 100644
--- a/packages/core/src/Stores/base-store.js
+++ b/packages/core/src/Stores/base-store.js
@@ -284,13 +284,13 @@ export default class BaseStore {
             this.switch_account_listener = listener;
 
             this.switchAccountDisposer = when(
-                () => this.root_store?.client.switch_broadcast,
+                () => this.root_store.client.switch_broadcast,
                 async () => {
                     try {
                         const result = this.switch_account_listener();
                         if (result && result.then && typeof result.then === 'function') {
                             result.then(() => {
-                                this.root_store?.client.switchEndSignal();
+                                this.root_store.client.switchEndSignal();
                                 this.onSwitchAccount(this.switch_account_listener);
                             });
                         } else {
@@ -314,13 +314,13 @@ export default class BaseStore {
             this.pre_switch_account_listener = listener;
 
             this.preSwitchAccountDisposer = when(
-                () => this.root_store?.client.pre_switch_broadcast,
+                () => this.root_store.client.pre_switch_broadcast,
                 async () => {
                     try {
                         const result = this.pre_switch_account_listener();
                         if (result && result.then && typeof result.then === 'function') {
                             result.then(() => {
-                                this.root_store?.client.setPreSwitchAccount(false);
+                                this.root_store.client.setPreSwitchAccount(false);
                                 this.onPreSwitchAccount(this.pre_switch_account_listener);
                             });
                         } else {
@@ -341,13 +341,13 @@ export default class BaseStore {
     @action.bound
     onLogout(listener) {
         this.logoutDisposer = when(
-            () => this.root_store?.client.has_logged_out,
+            () => this.root_store.client.has_logged_out,
             async () => {
                 try {
                     const result = this.logout_listener();
                     if (result && result.then && typeof result.then === 'function') {
                         result.then(() => {
-                            this.root_store?.client.setLogout(false);
+                            this.root_store.client.setLogout(false);
                             this.onLogout(this.logout_listener);
                         });
                     } else {
@@ -368,13 +368,13 @@ export default class BaseStore {
     @action.bound
     onClientInit(listener) {
         this.clientInitDisposer = when(
-            () => this.root_store?.client.initialized_broadcast,
+            () => this.root_store.client.initialized_broadcast,
             async () => {
                 try {
                     const result = this.client_init_listener();
                     if (result && result.then && typeof result.then === 'function') {
                         result.then(() => {
-                            this.root_store?.client.setInitialized(false);
+                            this.root_store.client.setInitialized(false);
                             this.onClientInit(this.client_init_listener);
                         });
                     } else {
@@ -395,7 +395,7 @@ export default class BaseStore {
     @action.bound
     onNetworkStatusChange(listener) {
         this.networkStatusChangeDisposer = reaction(
-            () => this.root_store?.common.is_network_online,
+            () => this.root_store.common.is_network_online,
             is_online => {
                 try {
                     this.network_status_change_listener(is_online);
@@ -415,7 +415,7 @@ export default class BaseStore {
     @action.bound
     onThemeChange(listener) {
         this.themeChangeDisposer = reaction(
-            () => this.root_store?.ui.is_dark_mode_on,
+            () => this.root_store.ui.is_dark_mode_on,
             is_dark_mode_on => {
                 try {
                     this.theme_change_listener(is_dark_mode_on);
@@ -435,13 +435,13 @@ export default class BaseStore {
     @action.bound
     onRealAccountSignupEnd(listener) {
         this.realAccountSignupEndedDisposer = when(
-            () => this.root_store?.ui.has_real_account_signup_ended,
+            () => this.root_store.ui.has_real_account_signup_ended,
             () => {
                 try {
                     const result = this.real_account_signup_ended_listener();
                     if (result && result.then && typeof result.then === 'function') {
                         result.then(() => {
-                            this.root_store?.ui.setRealAccountSignupEnd(false);
+                            this.root_store.ui.setRealAccountSignupEnd(false);
                             this.onRealAccountSignupEnd(this.real_account_signup_ended_listener);
                         });
                     } else {
@@ -530,7 +530,7 @@ export default class BaseStore {
     @action.bound
     assertHasValidCache(loginid, ...reactions) {
         // account was changed when this was unmounted.
-        if (this.root_store?.client.loginid !== loginid) {
+        if (this.root_store.client.loginid !== loginid) {
             reactions.forEach(act => act());
             this.partial_fetch_time = false;
         }
diff --git a/packages/core/src/Stores/contract-replay-store.js b/packages/core/src/Stores/contract-replay-store.js
index e729a9fe8508..aa403aed5364 100644
--- a/packages/core/src/Stores/contract-replay-store.js
+++ b/packages/core/src/Stores/contract-replay-store.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { action, observable } from 'mobx';
 import { routes, isEmptyObject, isForwardStarting, WS, contractCancelled, contractSold } from '@deriv/shared';
 import { Money } from '@deriv/components';
@@ -37,6 +36,14 @@ export default class ContractReplayStore extends BaseStore {
     // Forget old proposal_open_contract stream on account switch from ErrorComponent
     should_forget_first = false;
 
+    constructor(root_store) {
+        super({
+            root_store,
+        });
+
+        this.root_store = root_store;
+    }
+
     // -------------------
     // ----- Actions -----
     // -------------------
@@ -251,7 +258,7 @@ export default class ContractReplayStore extends BaseStore {
                 transaction_id: response.sell.transaction_id,
             };
             this.root_store.notifications.addNotificationMessage(
-                contractSold(this.root_store.client.currency, response.sell.sold_for, <Money />)
+                contractSold(this.root_store.client.currency, response.sell.sold_for, Money)
             );
         }
     }
diff --git a/packages/core/src/Stores/contract-store.js b/packages/core/src/Stores/contract-store.js
index 9809aa6677bb..765a50d03faf 100644
--- a/packages/core/src/Stores/contract-store.js
+++ b/packages/core/src/Stores/contract-store.js
@@ -7,14 +7,16 @@ import {
     getDigitInfo,
     getDisplayStatus,
     WS,
-    getChartConfig,
+    // getChartConfig,
     getContractUpdateConfig,
-    getEndTime,
+    // getEndTime,
     getContractValidationRules,
     BARRIER_COLORS,
     BARRIER_LINE_STYLES,
     isBarrierSupported,
 } from '@deriv/shared';
+// import { getEndTime } from './Helpers/logic';
+import { getChartConfig, getEndTime } from './Helpers/logic';
 import { setLimitOrderBarriers, getLimitOrder } from './Helpers/limit-orders';
 import { ChartBarrierStore } from './chart-barrier-store';
 import { createChartMarkers } from './Helpers/chart-markers';
@@ -71,8 +73,8 @@ export default class ContractStore extends BaseStore {
         this.contract_info = contract_info;
         this.end_time = getEndTime(this.contract_info);
 
-        // TODO: don't update the barriers & markers if they are not changed
-        this.updateBarriersArray(contract_info, this.root_store.ui.is_dark_mode_on);
+        // TODO: don't  the barriers & markers if they are not changed
+        this.updateBarriersArray(contract_info, this.root_store?.ui.is_dark_mode_on);
         this.markers_array = createChartMarkers(this.contract_info);
         this.marker = calculate_marker(this.contract_info);
 
@@ -143,7 +145,7 @@ export default class ContractStore extends BaseStore {
             }
             if (
                 contract_info.contract_id &&
-                contract_info.contract_id === this.root_store.contract_replay.contract_id
+                contract_info.contract_id === this.root_store?.contract_replay.contract_id
             ) {
                 setLimitOrderBarriers({
                     barriers: this.barriers_array,
diff --git a/packages/core/src/Stores/contract-trade-store.js b/packages/core/src/Stores/contract-trade-store.js
index 7db64e92de62..7cf3dff10a12 100644
--- a/packages/core/src/Stores/contract-trade-store.js
+++ b/packages/core/src/Stores/contract-trade-store.js
@@ -23,11 +23,12 @@ export default class ContractTradeStore extends BaseStore {
     @observable granularity = +LocalStore.get('contract_trade.granularity') || 0;
     @observable chart_type = LocalStore.get('contract_trade.chart_type') || 'mountain';
 
-    constructor({ root_store }) {
+    constructor(root_store) {
         super({
             root_store,
         });
 
+        this.root_store = root_store;
         this.onSwitchAccount(this.accountSwitchListener);
     }
 
diff --git a/packages/core/src/Stores/portfolio.js b/packages/core/src/Stores/portfolio.js
index 751290041cb5..c45449f254b0 100644
--- a/packages/core/src/Stores/portfolio.js
+++ b/packages/core/src/Stores/portfolio.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import throttle from 'lodash.throttle';
 import { action, computed, observable, reaction } from 'mobx';
 import { createTransformer } from 'mobx-utils';
@@ -44,6 +43,13 @@ export default class PortfolioStore extends BaseStore {
 
     @observable.shallow active_positions = [];
 
+    constructor(root_store) {
+        super({
+            root_store,
+        });
+
+        this.root_store = root_store;
+    }
     @action.bound
     async initializePortfolio() {
         if (this.has_subscribed_to_poc_and_transaction) {
@@ -293,7 +299,7 @@ export default class PortfolioStore extends BaseStore {
                 transaction_id: response.sell.transaction_id,
             };
             this.root_store.notifications.addNotificationMessage(
-                contractSold(this.root_store.client.currency, response.sell.sold_for, <Money />)
+                contractSold(this.root_store.client.currency, response.sell.sold_for, Money)
             );
         }
     }

From 6d5cf28cd1f4d90d32b273f9e27e6f5ff4d66927 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Tue, 14 Jun 2022 12:19:58 +0800
Subject: [PATCH 44/64] move contract-type file to trader

---
 packages/shared/src/utils/helpers/index.js    |  1 -
 .../Form/DatePicker/trading-date-picker.jsx   |  3 +-
 .../Modules/Trading/Actions/contract-type.js  |  2 +-
 .../Modules/Trading/Actions/duration.js       |  3 +-
 .../Modules/Trading/Actions/start-date.js     |  2 +-
 .../Stores/Modules/Trading/Actions/symbol.js  |  2 +-
 .../Modules/Trading/Helpers/allow-equals.js   |  3 +-
 .../Modules/Trading/Helpers}/contract-type.js | 29 ++++++++++---------
 .../Stores/Modules/Trading/Helpers/process.js |  2 +-
 .../src/Stores/Modules/Trading/trade-store.js |  2 +-
 10 files changed, 27 insertions(+), 22 deletions(-)
 rename packages/{shared/src/utils/helpers => trader/src/Stores/Modules/Trading/Helpers}/contract-type.js (97%)

diff --git a/packages/shared/src/utils/helpers/index.js b/packages/shared/src/utils/helpers/index.js
index 6582a86ac6d1..7b61328413af 100644
--- a/packages/shared/src/utils/helpers/index.js
+++ b/packages/shared/src/utils/helpers/index.js
@@ -2,7 +2,6 @@ export * from './active-symbols';
 export * from './barrier';
 export * from './barriers';
 export * from './chart-notifications';
-export * from './contract-type';
 export * from './details';
 export * from './duration';
 export * from './format-response';
diff --git a/packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.jsx b/packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.jsx
index 70e7912ba3d0..41b5ee368037 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.jsx
@@ -3,9 +3,10 @@ import PropTypes from 'prop-types';
 import { PropTypes as MobxPropTypes } from 'mobx-react';
 import React from 'react';
 import { DatePicker, Tooltip } from '@deriv/components';
-import { isTimeValid, setTime, toMoment, useIsMounted,ContractType, hasIntradayDurationUnit } from '@deriv/shared';
+import { isTimeValid, setTime, toMoment, useIsMounted, hasIntradayDurationUnit } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
+import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type.js';
 
 const TradingDatePicker = ({
     duration: current_duration,
diff --git a/packages/trader/src/Stores/Modules/Trading/Actions/contract-type.js b/packages/trader/src/Stores/Modules/Trading/Actions/contract-type.js
index acc3f65c628d..9d3824a46d77 100644
--- a/packages/trader/src/Stores/Modules/Trading/Actions/contract-type.js
+++ b/packages/trader/src/Stores/Modules/Trading/Actions/contract-type.js
@@ -1,4 +1,4 @@
-import { ContractType } from '@deriv/shared';
+import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type.js';
 
 export const onChangeContractTypeList = ({ contract_types_list, contract_type }) =>
     ContractType.getContractType(contract_types_list, contract_type);
diff --git a/packages/trader/src/Stores/Modules/Trading/Actions/duration.js b/packages/trader/src/Stores/Modules/Trading/Actions/duration.js
index 98622f15926b..47f6007394d4 100644
--- a/packages/trader/src/Stores/Modules/Trading/Actions/duration.js
+++ b/packages/trader/src/Stores/Modules/Trading/Actions/duration.js
@@ -1,4 +1,5 @@
-import { ContractType, getExpiryType, getDurationMinMaxValues} from '@deriv/shared';
+import { getExpiryType, getDurationMinMaxValues } from '@deriv/shared';
+import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type.js';
 
 export const onChangeExpiry = store => {
     const contract_expiry_type = getExpiryType(store);
diff --git a/packages/trader/src/Stores/Modules/Trading/Actions/start-date.js b/packages/trader/src/Stores/Modules/Trading/Actions/start-date.js
index b46f5438110b..58ad9496ec72 100644
--- a/packages/trader/src/Stores/Modules/Trading/Actions/start-date.js
+++ b/packages/trader/src/Stores/Modules/Trading/Actions/start-date.js
@@ -1,4 +1,4 @@
-import { ContractType } from '@deriv/shared';
+import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type.js';
 
 export const onChangeStartDate = async store => {
     const { contract_type, duration_unit, start_date } = store;
diff --git a/packages/trader/src/Stores/Modules/Trading/Actions/symbol.js b/packages/trader/src/Stores/Modules/Trading/Actions/symbol.js
index bcf043aa0c14..3f1aa51c8f49 100644
--- a/packages/trader/src/Stores/Modules/Trading/Actions/symbol.js
+++ b/packages/trader/src/Stores/Modules/Trading/Actions/symbol.js
@@ -1,4 +1,4 @@
-import { ContractType } from '@deriv/shared';
+import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type.js';
 
 export const onChangeSymbolAsync = async symbol => {
     await ContractType.buildContractTypesConfig(symbol);
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/allow-equals.js b/packages/trader/src/Stores/Modules/Trading/Helpers/allow-equals.js
index d187be1116be..21bd902967d2 100644
--- a/packages/trader/src/Stores/Modules/Trading/Helpers/allow-equals.js
+++ b/packages/trader/src/Stores/Modules/Trading/Helpers/allow-equals.js
@@ -1,5 +1,6 @@
 import { localize } from '@deriv/translations';
-import { isEmptyObject, getPropertyValue, ContractType } from '@deriv/shared';
+import { isEmptyObject, getPropertyValue } from '@deriv/shared';
+import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type.js';
 
 export const hasCallPutEqual = contract_type_list => {
     if (isEmptyObject(contract_type_list)) return false;
diff --git a/packages/shared/src/utils/helpers/contract-type.js b/packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.js
similarity index 97%
rename from packages/shared/src/utils/helpers/contract-type.js
rename to packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.js
index 17fde7b445c5..afea9c68167d 100644
--- a/packages/shared/src/utils/helpers/contract-type.js
+++ b/packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.js
@@ -1,21 +1,24 @@
-import { WS } from '../../services';
-import { getPropertyValue, cloneObject } from '../object';
-import { isTimeValid, minDate, toMoment } from '../date';
-import { shouldShowCancellation } from '../contract';
-
-import ServerTime from '../../services/server-time';
-import { localize } from '@deriv/translations';
-
-import { getUnitMap } from './details';
-import { buildBarriersConfig } from './barrier';
-import { buildDurationConfig, hasIntradayDurationUnit } from './duration';
-import { buildForwardStartingConfig, isSessionAvailable } from './start-date';
 import {
+    WS,
+    getPropertyValue,
+    cloneObject,
+    isTimeValid,
+    minDate,
+    toMoment,
+    shouldShowCancellation,
+    getUnitMap,
+    buildBarriersConfig,
+    buildDurationConfig,
+    hasIntradayDurationUnit,
+    buildForwardStartingConfig,
+    isSessionAvailable,
     unsupported_contract_types_list,
     getContractCategoriesConfig,
     getContractTypesConfig,
     getLocalizedBasis,
-} from '../constants/contract';
+} from '@deriv/shared';
+import ServerTime from '_common/base/server_time.js';
+import { localize } from '@deriv/translations';
 
 export const ContractType = (() => {
     let available_contract_types = {};
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/process.js b/packages/trader/src/Stores/Modules/Trading/Helpers/process.js
index c37267540a51..0dc7f4cad7a7 100644
--- a/packages/trader/src/Stores/Modules/Trading/Helpers/process.js
+++ b/packages/trader/src/Stores/Modules/Trading/Helpers/process.js
@@ -1,4 +1,4 @@
-import { ContractType as ContractTypeHelper} from '@deriv/shared';
+import { ContractType as ContractTypeHelper } from 'Stores/Modules/Trading/Helpers/contract-type.js';
 import * as ContractType from '../Actions/contract-type';
 import * as Duration from '../Actions/duration';
 import * as StartDate from '../Actions/start-date';
diff --git a/packages/trader/src/Stores/Modules/Trading/trade-store.js b/packages/trader/src/Stores/Modules/Trading/trade-store.js
index 5b0874634c4f..f81f9ff5aeee 100644
--- a/packages/trader/src/Stores/Modules/Trading/trade-store.js
+++ b/packages/trader/src/Stores/Modules/Trading/trade-store.js
@@ -19,7 +19,6 @@ import {
     isMarketClosed,
     findFirstOpenMarket,
     showMxMltUnavailableError,
-    ContractType,
     convertDurationLimit,
     resetEndTimeOnVolatilityIndices,
     getBarrierPipSize,
@@ -27,6 +26,7 @@ import {
     removeBarrier,
 } from '@deriv/shared';
 import { localize } from '@deriv/translations';
+import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type.js';
 import { isDigitContractType, isDigitTradeType } from 'Modules/Trading/Helpers/digits';
 import ServerTime from '_common/base/server_time';
 import { processPurchase } from './Actions/purchase';

From 103549d2f2193f1498de173d2104a6b40ce392b4 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Tue, 14 Jun 2022 13:40:48 +0800
Subject: [PATCH 45/64] move validation-rules to trading

---
 packages/shared/src/utils/constants/index.js                 | 1 -
 .../Stores/Modules/Trading/Constants}/validation-rules.js    | 3 +--
 packages/trader/src/Stores/Modules/Trading/trade-store.js    | 5 ++---
 3 files changed, 3 insertions(+), 6 deletions(-)
 rename packages/{shared/src/utils/constants => trader/src/Stores/Modules/Trading/Constants}/validation-rules.js (97%)

diff --git a/packages/shared/src/utils/constants/index.js b/packages/shared/src/utils/constants/index.js
index 9be92dd65459..b8a5f56939bb 100644
--- a/packages/shared/src/utils/constants/index.js
+++ b/packages/shared/src/utils/constants/index.js
@@ -1,3 +1,2 @@
 export * from './barriers';
 export * from './contract';
-export * from './validation-rules';
diff --git a/packages/shared/src/utils/constants/validation-rules.js b/packages/trader/src/Stores/Modules/Trading/Constants/validation-rules.js
similarity index 97%
rename from packages/shared/src/utils/constants/validation-rules.js
rename to packages/trader/src/Stores/Modules/Trading/Constants/validation-rules.js
index 9930434db88d..b972a9cbd999 100644
--- a/packages/shared/src/utils/constants/validation-rules.js
+++ b/packages/trader/src/Stores/Modules/Trading/Constants/validation-rules.js
@@ -1,6 +1,5 @@
 import { localize } from '@deriv/translations';
-import { isSessionAvailable } from '../helpers/start-date';
-import { isHourValid, isMinuteValid, isTimeValid, toMoment } from '../date';
+import { isHourValid, isMinuteValid, isTimeValid, toMoment, isSessionAvailable } from '@deriv/shared';
 
 export const getValidationRules = () => ({
     amount: {
diff --git a/packages/trader/src/Stores/Modules/Trading/trade-store.js b/packages/trader/src/Stores/Modules/Trading/trade-store.js
index f81f9ff5aeee..e2b303f45e49 100644
--- a/packages/trader/src/Stores/Modules/Trading/trade-store.js
+++ b/packages/trader/src/Stores/Modules/Trading/trade-store.js
@@ -12,8 +12,6 @@ import {
     isMobile,
     showDigitalOptionsUnavailableError,
     WS,
-    getValidationRules,
-    getMultiplierValidationRules,
     pickDefaultSymbol,
     showUnavailableLocationError,
     isMarketClosed,
@@ -26,7 +24,8 @@ import {
     removeBarrier,
 } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type.js';
+import { getValidationRules, getMultiplierValidationRules } from 'Stores/Modules/Trading/Constants/validation-rules';
+import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type';
 import { isDigitContractType, isDigitTradeType } from 'Modules/Trading/Helpers/digits';
 import ServerTime from '_common/base/server_time';
 import { processPurchase } from './Actions/purchase';

From 53e0f51db5409ced326c5733b0fdefdf8622d020 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Tue, 14 Jun 2022 17:26:14 +0800
Subject: [PATCH 46/64] remove serverTime from shared

---
 .../core/src/Stores/Helpers/chart-markers.js  |  3 +-
 packages/core/src/Stores/Helpers/logic.js     | 54 +--------------
 .../core/src/Stores/Helpers/start-date.js     | 48 -------------
 packages/core/src/Stores/contract-store.js    |  6 +-
 packages/shared/src/services/server-time.js   | 32 ---------
 .../src/utils/helpers/__tests__/start-date.js | 68 +------------------
 packages/shared/src/utils/helpers/logic.js    | 44 ------------
 .../shared/src/utils/helpers/start-date.js    | 23 -------
 .../ContractAudit/contract-details.jsx        |  2 +-
 .../Trading/Constants/validation-rules.js     |  3 +-
 .../Modules/Trading/Helpers/contract-type.js  |  4 +-
 .../Stores/Modules/Trading/Helpers/logic.js   |  4 ++
 .../Modules/Trading/Helpers/start-date.js     | 23 +++++++
 13 files changed, 37 insertions(+), 277 deletions(-)
 delete mode 100644 packages/core/src/Stores/Helpers/start-date.js
 delete mode 100644 packages/shared/src/services/server-time.js
 create mode 100644 packages/trader/src/Stores/Modules/Trading/Helpers/logic.js
 create mode 100644 packages/trader/src/Stores/Modules/Trading/Helpers/start-date.js

diff --git a/packages/core/src/Stores/Helpers/chart-markers.js b/packages/core/src/Stores/Helpers/chart-markers.js
index d225077eaf9b..02ebb3291ab4 100644
--- a/packages/core/src/Stores/Helpers/chart-markers.js
+++ b/packages/core/src/Stores/Helpers/chart-markers.js
@@ -7,10 +7,9 @@ import {
     createMarkerSpotMiddle,
     getSpotCount,
 } from './chart-marker-helpers';
-// import { getChartType, getEndTime, unique } from '@deriv/shared';
 import { getEndTime, unique } from '@deriv/shared';
 import { MARKER_TYPES_CONFIG } from '../Constants/markers';
-import { getChartType } from "./logic";
+import { getChartType } from './logic';
 
 export const createChartMarkers = contract_info => {
     let markers = [];
diff --git a/packages/core/src/Stores/Helpers/logic.js b/packages/core/src/Stores/Helpers/logic.js
index 83d7a51adc26..c6b563500fa9 100644
--- a/packages/core/src/Stores/Helpers/logic.js
+++ b/packages/core/src/Stores/Helpers/logic.js
@@ -1,9 +1,5 @@
 import moment from 'moment';
-// import { isEmptyObject } from '../object';
-// import { isUserSold } from '../contract';
-// import ServerTime from '../../services/server-time';
-import { isEmptyObject, isUserSold } from '@deriv/shared';
-// import ServerTime from '../../_common/base/trader_server_time';
+import { isEmptyObject, getEndTime } from '@deriv/shared';
 import ServerTime from '../../_common/base/server_time';
 
 export const getChartConfig = contract_info => {
@@ -45,54 +41,6 @@ export const getChartGranularity = (start_time, expiry_time) =>
 export const calculateGranularity = duration =>
     (hour_to_granularity_map.find(m => duration <= m[0] * 3600) || [null, 86400])[1];
 
-export const isContractElapsed = (contract_info, tick) => {
-    if (isEmptyObject(tick) || isEmptyObject(contract_info)) return false;
-    const end_time = getEndTime(contract_info);
-    if (end_time && tick.epoch) {
-        const seconds = moment.duration(moment.unix(tick.epoch).diff(moment.unix(end_time))).asSeconds();
-        return seconds >= 2;
-    }
-    return false;
-};
-
-export const isEndedBeforeCancellationExpired = contract_info =>
-    !!(contract_info.cancellation && getEndTime(contract_info) < contract_info.cancellation.date_expiry);
-
-export const isSoldBeforeStart = contract_info =>
-    contract_info.sell_time && +contract_info.sell_time < +contract_info.date_start;
-
-export const isStarted = contract_info =>
-    !contract_info.is_forward_starting || contract_info.current_spot_time > contract_info.date_start;
-
-export const isUserCancelled = contract_info => contract_info.status === 'cancelled';
-
-export const isCancellationExpired = contract_info =>
-    !!(contract_info.cancellation.date_expiry < ServerTime.get().unix());
-
-export const getEndTime = contract_info => {
-    const {
-        exit_tick_time,
-        date_expiry,
-        is_expired,
-        is_path_dependent,
-        sell_time,
-        status,
-        tick_count: is_tick_contract,
-    } = contract_info;
-
-    const is_finished = is_expired && status !== 'open';
-
-    if (!is_finished && !isUserSold(contract_info) && !isUserCancelled(contract_info)) return undefined;
-
-    if (isUserSold(contract_info)) {
-        return sell_time > date_expiry ? date_expiry : sell_time;
-    } else if (!is_tick_contract && sell_time > date_expiry) {
-        return date_expiry;
-    }
-
-    return date_expiry > exit_tick_time && !+is_path_dependent ? date_expiry : exit_tick_time;
-};
-
 export const getBuyPrice = contract_store => {
     return contract_store.contract_info.buy_price;
 };
diff --git a/packages/core/src/Stores/Helpers/start-date.js b/packages/core/src/Stores/Helpers/start-date.js
deleted file mode 100644
index 01ea6f8547df..000000000000
--- a/packages/core/src/Stores/Helpers/start-date.js
+++ /dev/null
@@ -1,48 +0,0 @@
-// import ServerTime from '../../services/server-time';
-import ServerTime from '../../_common/base/server_time';
-// import { toMoment } from '../date';
-import { toMoment } from '@deriv/shared';
-
-export const buildForwardStartingConfig = (contract, forward_starting_dates) => {
-    const forward_starting_config = [];
-
-    if ((contract.forward_starting_options || []).length) {
-        contract.forward_starting_options.forEach(option => {
-            const duplicated_option = forward_starting_config.find(opt => opt.value === parseInt(option.date));
-            const current_session = { open: toMoment(option.open), close: toMoment(option.close) };
-            if (duplicated_option) {
-                duplicated_option.sessions.push(current_session);
-            } else {
-                forward_starting_config.push({
-                    text: toMoment(option.date).format('ddd - DD MMM, YYYY'),
-                    value: parseInt(option.date),
-                    sessions: [current_session],
-                });
-            }
-        });
-    }
-
-    return forward_starting_config.length ? forward_starting_config : forward_starting_dates;
-};
-
-// returns false if same as now
-const isBeforeDate = (compare_moment, start_moment, should_only_check_hour) => {
-    const now_moment = toMoment(start_moment);
-    if (should_only_check_hour) {
-        now_moment.minute(0).second(0);
-    }
-    return compare_moment.isBefore(now_moment) && now_moment.unix() !== compare_moment.unix();
-};
-
-export const isSessionAvailable = (
-    sessions = [],
-    compare_moment = toMoment(ServerTime.get()),
-    start_moment = toMoment(ServerTime.get()),
-    should_only_check_hour = false
-) =>
-    !isBeforeDate(compare_moment, ServerTime.get(), should_only_check_hour) &&
-    !isBeforeDate(compare_moment, start_moment, should_only_check_hour) &&
-    (!sessions.length ||
-        !!sessions.find(session =>
-            compare_moment.isBetween(session.open, session.close, should_only_check_hour ? 'hour' : null, '[]')
-        ));
diff --git a/packages/core/src/Stores/contract-store.js b/packages/core/src/Stores/contract-store.js
index 765a50d03faf..968fda449f4c 100644
--- a/packages/core/src/Stores/contract-store.js
+++ b/packages/core/src/Stores/contract-store.js
@@ -7,16 +7,14 @@ import {
     getDigitInfo,
     getDisplayStatus,
     WS,
-    // getChartConfig,
     getContractUpdateConfig,
-    // getEndTime,
     getContractValidationRules,
     BARRIER_COLORS,
     BARRIER_LINE_STYLES,
     isBarrierSupported,
+    getEndTime,
 } from '@deriv/shared';
-// import { getEndTime } from './Helpers/logic';
-import { getChartConfig, getEndTime } from './Helpers/logic';
+import { getChartConfig } from './Helpers/logic';
 import { setLimitOrderBarriers, getLimitOrder } from './Helpers/limit-orders';
 import { ChartBarrierStore } from './chart-barrier-store';
 import { createChartMarkers } from './Helpers/chart-markers';
diff --git a/packages/shared/src/services/server-time.js b/packages/shared/src/services/server-time.js
deleted file mode 100644
index 0b6987e55e0d..000000000000
--- a/packages/shared/src/services/server-time.js
+++ /dev/null
@@ -1,32 +0,0 @@
-class PromiseClass {
-    constructor() {
-        this.promise = new Promise((resolve, reject) => {
-            this.reject = reject;
-            this.resolve = resolve;
-        });
-    }
-}
-
-const ServerTime = (() => {
-    let clock_started = false;
-    const pending = new PromiseClass();
-    let common_store;
-
-    const init = store => {
-        if (!clock_started) {
-            common_store = store;
-            pending.resolve(common_store.server_time);
-            clock_started = true;
-        }
-    };
-
-    const get = () => (clock_started && common_store.server_time ? common_store.server_time.clone() : undefined);
-
-    return {
-        init,
-        get,
-        timePromise: () => (clock_started ? Promise.resolve(common_store.server_time) : pending.promise),
-    };
-})();
-
-module.exports = ServerTime;
diff --git a/packages/shared/src/utils/helpers/__tests__/start-date.js b/packages/shared/src/utils/helpers/__tests__/start-date.js
index 68a13a16aa67..6c143d2eac87 100644
--- a/packages/shared/src/utils/helpers/__tests__/start-date.js
+++ b/packages/shared/src/utils/helpers/__tests__/start-date.js
@@ -1,6 +1,5 @@
 import { expect } from 'chai';
-import moment from 'moment';
-import { buildForwardStartingConfig, isSessionAvailable } from '../start-date';
+import { buildForwardStartingConfig } from '../start-date';
 
 describe('start_date', () => {
     describe('buildForwardStartingConfig', () => {
@@ -25,69 +24,4 @@ describe('start_date', () => {
             expect(buildForwardStartingConfig(contract, {})).to.be.empty;
         });
     });
-
-    describe('isSessionAvailable', () => {
-        it('should return true with default values', () => {
-            expect(isSessionAvailable()).to.eql(true);
-        });
-        it('should return true when should_only_check_hour is false and there is a session which opens before now and closes after now', () => {
-            const sessions = [
-                {
-                    open: moment.utc(new Date().getTime() - 100000),
-                    close: moment.utc(new Date().getTime() + 100000),
-                },
-                {
-                    open: moment.utc(new Date().getTime() + 300000),
-                    close: moment.utc(new Date().getTime() + 400000),
-                },
-            ];
-            expect(isSessionAvailable(sessions)).to.eql(true);
-        });
-        it('should return false when should_only_check_hour is false and there is not a session which opens before now and closes after now and compare_moment is before start_moment', () => {
-            const sessions = [
-                {
-                    open: moment.utc(new Date().getTime() + 400000),
-                    close: moment.utc(new Date().getTime() + 500000),
-                },
-                {
-                    open: moment.utc(new Date().getTime() + 300000),
-                    close: moment.utc(new Date().getTime() + 400000),
-                },
-            ];
-            const compare_moment = moment.utc(new Date().getTime() - 1000);
-
-            expect(isSessionAvailable(sessions, compare_moment)).to.eql(false);
-        });
-        it('should return false when should_only_check_hour is false and there is not a session which opens before now and closes after now and compare_moment is before start_moment', () => {
-            const sessions = [
-                {
-                    open: moment.utc(new Date().getTime() + 400000),
-                    close: moment.utc(new Date().getTime() + 500000),
-                },
-                {
-                    open: moment.utc(new Date().getTime() + 300000),
-                    close: moment.utc(new Date().getTime() + 400000),
-                },
-            ];
-            expect(isSessionAvailable(sessions, moment.utc(), moment.utc(), false)).to.eql(false);
-        });
-        it('should return false when should_only_check_hour is true and there is not a session which opens before now and closes after now', () => {
-            const sessions = [
-                {
-                    open: moment.utc(new Date().getTime() + 3600000),
-                    close: moment.utc(new Date().getTime() + 3600001),
-                },
-            ];
-            expect(isSessionAvailable(sessions, moment.utc(), moment.utc(), true)).to.eql(false);
-        });
-        it('should return true when should_only_check_hour is true and there is a session which opens before now and closes after now', () => {
-            const sessions = [
-                {
-                    open: moment.utc(new Date().getTime() - 1000),
-                    close: moment.utc(new Date().getTime() + 1000),
-                },
-            ];
-            expect(isSessionAvailable(sessions, moment.utc(), moment.utc(), true)).to.eql(true);
-        });
-    });
 });
diff --git a/packages/shared/src/utils/helpers/logic.js b/packages/shared/src/utils/helpers/logic.js
index 59343b6d40d8..709641fb105a 100644
--- a/packages/shared/src/utils/helpers/logic.js
+++ b/packages/shared/src/utils/helpers/logic.js
@@ -2,47 +2,6 @@ import moment from 'moment';
 import { isEmptyObject } from '../object';
 import { isUserSold } from '../contract';
 
-import ServerTime from '../../services/server-time';
-
-export const getChartConfig = contract_info => {
-    if (isEmptyObject(contract_info)) return null;
-    const start = contract_info.date_start;
-    const end = getEndTime(contract_info);
-    const granularity = getChartGranularity(start, end || null);
-    const chart_type = getChartType(start, end || null);
-
-    return {
-        chart_type: contract_info.tick_count ? 'mountain' : chart_type,
-        granularity: contract_info.tick_count ? 0 : granularity,
-        end_epoch: end,
-        start_epoch: start,
-        scroll_to_epoch: contract_info.purchase_time,
-    };
-};
-
-const hour_to_granularity_map = [
-    [1, 0],
-    [2, 120],
-    [6, 600],
-    [24, 900],
-    [5 * 24, 3600],
-    [30 * 24, 14400],
-];
-
-const getExpiryTime = time => time || ServerTime.get().unix();
-
-export const getChartType = (start_time, expiry_time) => {
-    const duration = moment.duration(moment.unix(getExpiryTime(expiry_time)).diff(moment.unix(start_time))).asHours();
-    // use line chart if duration is equal or less than 1 hour
-    return duration <= 1 ? 'mountain' : 'candle';
-};
-
-export const getChartGranularity = (start_time, expiry_time) =>
-    calculateGranularity(getExpiryTime(expiry_time) - start_time);
-
-export const calculateGranularity = duration =>
-    (hour_to_granularity_map.find(m => duration <= m[0] * 3600) || [null, 86400])[1];
-
 export const isContractElapsed = (contract_info, tick) => {
     if (isEmptyObject(tick) || isEmptyObject(contract_info)) return false;
     const end_time = getEndTime(contract_info);
@@ -64,9 +23,6 @@ export const isStarted = contract_info =>
 
 export const isUserCancelled = contract_info => contract_info.status === 'cancelled';
 
-export const isCancellationExpired = contract_info =>
-    !!(contract_info.cancellation.date_expiry < ServerTime.get().unix());
-
 export const getEndTime = contract_info => {
     const {
         exit_tick_time,
diff --git a/packages/shared/src/utils/helpers/start-date.js b/packages/shared/src/utils/helpers/start-date.js
index ff319a0fc849..b1b748ed3d11 100644
--- a/packages/shared/src/utils/helpers/start-date.js
+++ b/packages/shared/src/utils/helpers/start-date.js
@@ -1,4 +1,3 @@
-import ServerTime from '../../services/server-time';
 import { toMoment } from '../date';
 
 export const buildForwardStartingConfig = (contract, forward_starting_dates) => {
@@ -22,25 +21,3 @@ export const buildForwardStartingConfig = (contract, forward_starting_dates) =>
 
     return forward_starting_config.length ? forward_starting_config : forward_starting_dates;
 };
-
-// returns false if same as now
-const isBeforeDate = (compare_moment, start_moment, should_only_check_hour) => {
-    const now_moment = toMoment(start_moment);
-    if (should_only_check_hour) {
-        now_moment.minute(0).second(0);
-    }
-    return compare_moment.isBefore(now_moment) && now_moment.unix() !== compare_moment.unix();
-};
-
-export const isSessionAvailable = (
-    sessions = [],
-    compare_moment = toMoment(ServerTime.get()),
-    start_moment = toMoment(ServerTime.get()),
-    should_only_check_hour = false
-) =>
-    !isBeforeDate(compare_moment, ServerTime.get(), should_only_check_hour) &&
-    !isBeforeDate(compare_moment, start_moment, should_only_check_hour) &&
-    (!sessions.length ||
-        !!sessions.find(session =>
-            compare_moment.isBetween(session.open, session.close, should_only_check_hour ? 'hour' : null, '[]')
-        ));
diff --git a/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.jsx b/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.jsx
index d365ab04d250..74112d4115d8 100644
--- a/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.jsx
+++ b/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.jsx
@@ -9,7 +9,6 @@ import {
     isMobile,
     isMultiplierContract,
     isUserSold,
-    isCancellationExpired,
     isEndedBeforeCancellationExpired,
     isUserCancelled,
 } from '@deriv/shared';
@@ -20,6 +19,7 @@ import {
     isDigitType,
 } from 'App/Components/Elements/PositionsDrawer/helpers';
 import ContractAuditItem from './contract-audit-item.jsx';
+import { isCancellationExpired } from 'Stores/Modules/Trading/Helpers/logic';
 
 const ContractDetails = ({ contract_end_time, contract_info, duration, duration_unit, exit_spot }) => {
     const {
diff --git a/packages/trader/src/Stores/Modules/Trading/Constants/validation-rules.js b/packages/trader/src/Stores/Modules/Trading/Constants/validation-rules.js
index b972a9cbd999..ca9f29043833 100644
--- a/packages/trader/src/Stores/Modules/Trading/Constants/validation-rules.js
+++ b/packages/trader/src/Stores/Modules/Trading/Constants/validation-rules.js
@@ -1,5 +1,6 @@
 import { localize } from '@deriv/translations';
-import { isHourValid, isMinuteValid, isTimeValid, toMoment, isSessionAvailable } from '@deriv/shared';
+import { isHourValid, isMinuteValid, isTimeValid, toMoment } from '@deriv/shared';
+import { isSessionAvailable } from '../Helpers/start-date';
 
 export const getValidationRules = () => ({
     amount: {
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.js b/packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.js
index afea9c68167d..a76a6ba38a52 100644
--- a/packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.js
+++ b/packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.js
@@ -11,14 +11,14 @@ import {
     buildDurationConfig,
     hasIntradayDurationUnit,
     buildForwardStartingConfig,
-    isSessionAvailable,
     unsupported_contract_types_list,
     getContractCategoriesConfig,
     getContractTypesConfig,
     getLocalizedBasis,
 } from '@deriv/shared';
-import ServerTime from '_common/base/server_time.js';
+import ServerTime from '_common/base/server_time';
 import { localize } from '@deriv/translations';
+import { isSessionAvailable } from './start-date';
 
 export const ContractType = (() => {
     let available_contract_types = {};
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/logic.js b/packages/trader/src/Stores/Modules/Trading/Helpers/logic.js
new file mode 100644
index 000000000000..837683fe659f
--- /dev/null
+++ b/packages/trader/src/Stores/Modules/Trading/Helpers/logic.js
@@ -0,0 +1,4 @@
+import ServerTime from '_common/base/server_time';
+
+export const isCancellationExpired = contract_info =>
+    !!(contract_info.cancellation.date_expiry < ServerTime.get().unix());
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/start-date.js b/packages/trader/src/Stores/Modules/Trading/Helpers/start-date.js
new file mode 100644
index 000000000000..d380db266c55
--- /dev/null
+++ b/packages/trader/src/Stores/Modules/Trading/Helpers/start-date.js
@@ -0,0 +1,23 @@
+import ServerTime from '_common/base/server_time';
+import { toMoment } from '@deriv/shared';
+
+const isBeforeDate = (compare_moment, start_moment, should_only_check_hour) => {
+    const now_moment = toMoment(start_moment);
+    if (should_only_check_hour) {
+        now_moment.minute(0).second(0);
+    }
+    return compare_moment.isBefore(now_moment) && now_moment.unix() !== compare_moment.unix();
+};
+
+export const isSessionAvailable = (
+    sessions = [],
+    compare_moment = toMoment(ServerTime.get()),
+    start_moment = toMoment(ServerTime.get()),
+    should_only_check_hour = false
+) =>
+    !isBeforeDate(compare_moment, ServerTime.get(), should_only_check_hour) &&
+    !isBeforeDate(compare_moment, start_moment, should_only_check_hour) &&
+    (!sessions.length ||
+        !!sessions.find(session =>
+            compare_moment.isBetween(session.open, session.close, should_only_check_hour ? 'hour' : null, '[]')
+        ));

From ddfbeaf47986bd2fb1e3decd8946821a3795df6c Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Tue, 14 Jun 2022 17:45:05 +0800
Subject: [PATCH 47/64] remove .js from imports

---
 .../Trading/Components/Form/DatePicker/trading-date-picker.jsx  | 2 +-
 .../trader/src/Stores/Modules/Trading/Actions/contract-type.js  | 2 +-
 packages/trader/src/Stores/Modules/Trading/Actions/duration.js  | 2 +-
 .../trader/src/Stores/Modules/Trading/Actions/start-date.js     | 2 +-
 packages/trader/src/Stores/Modules/Trading/Actions/symbol.js    | 2 +-
 .../trader/src/Stores/Modules/Trading/Helpers/allow-equals.js   | 2 +-
 packages/trader/src/Stores/Modules/Trading/Helpers/process.js   | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.jsx b/packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.jsx
index 41b5ee368037..a898662da23f 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.jsx
@@ -6,7 +6,7 @@ import { DatePicker, Tooltip } from '@deriv/components';
 import { isTimeValid, setTime, toMoment, useIsMounted, hasIntradayDurationUnit } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
-import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type.js';
+import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type';
 
 const TradingDatePicker = ({
     duration: current_duration,
diff --git a/packages/trader/src/Stores/Modules/Trading/Actions/contract-type.js b/packages/trader/src/Stores/Modules/Trading/Actions/contract-type.js
index 9d3824a46d77..ee14a3eb1074 100644
--- a/packages/trader/src/Stores/Modules/Trading/Actions/contract-type.js
+++ b/packages/trader/src/Stores/Modules/Trading/Actions/contract-type.js
@@ -1,4 +1,4 @@
-import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type.js';
+import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type';
 
 export const onChangeContractTypeList = ({ contract_types_list, contract_type }) =>
     ContractType.getContractType(contract_types_list, contract_type);
diff --git a/packages/trader/src/Stores/Modules/Trading/Actions/duration.js b/packages/trader/src/Stores/Modules/Trading/Actions/duration.js
index 47f6007394d4..070d9d7c5555 100644
--- a/packages/trader/src/Stores/Modules/Trading/Actions/duration.js
+++ b/packages/trader/src/Stores/Modules/Trading/Actions/duration.js
@@ -1,5 +1,5 @@
 import { getExpiryType, getDurationMinMaxValues } from '@deriv/shared';
-import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type.js';
+import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type';
 
 export const onChangeExpiry = store => {
     const contract_expiry_type = getExpiryType(store);
diff --git a/packages/trader/src/Stores/Modules/Trading/Actions/start-date.js b/packages/trader/src/Stores/Modules/Trading/Actions/start-date.js
index 58ad9496ec72..4f4f0f8ff351 100644
--- a/packages/trader/src/Stores/Modules/Trading/Actions/start-date.js
+++ b/packages/trader/src/Stores/Modules/Trading/Actions/start-date.js
@@ -1,4 +1,4 @@
-import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type.js';
+import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type';
 
 export const onChangeStartDate = async store => {
     const { contract_type, duration_unit, start_date } = store;
diff --git a/packages/trader/src/Stores/Modules/Trading/Actions/symbol.js b/packages/trader/src/Stores/Modules/Trading/Actions/symbol.js
index 3f1aa51c8f49..95af64de0647 100644
--- a/packages/trader/src/Stores/Modules/Trading/Actions/symbol.js
+++ b/packages/trader/src/Stores/Modules/Trading/Actions/symbol.js
@@ -1,4 +1,4 @@
-import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type.js';
+import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type';
 
 export const onChangeSymbolAsync = async symbol => {
     await ContractType.buildContractTypesConfig(symbol);
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/allow-equals.js b/packages/trader/src/Stores/Modules/Trading/Helpers/allow-equals.js
index 21bd902967d2..57317967bc0e 100644
--- a/packages/trader/src/Stores/Modules/Trading/Helpers/allow-equals.js
+++ b/packages/trader/src/Stores/Modules/Trading/Helpers/allow-equals.js
@@ -1,6 +1,6 @@
 import { localize } from '@deriv/translations';
 import { isEmptyObject, getPropertyValue } from '@deriv/shared';
-import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type.js';
+import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type';
 
 export const hasCallPutEqual = contract_type_list => {
     if (isEmptyObject(contract_type_list)) return false;
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/process.js b/packages/trader/src/Stores/Modules/Trading/Helpers/process.js
index 0dc7f4cad7a7..b03c5545b74a 100644
--- a/packages/trader/src/Stores/Modules/Trading/Helpers/process.js
+++ b/packages/trader/src/Stores/Modules/Trading/Helpers/process.js
@@ -1,4 +1,4 @@
-import { ContractType as ContractTypeHelper } from 'Stores/Modules/Trading/Helpers/contract-type.js';
+import { ContractType as ContractTypeHelper } from 'Stores/Modules/Trading/Helpers/contract-type';
 import * as ContractType from '../Actions/contract-type';
 import * as Duration from '../Actions/duration';
 import * as StartDate from '../Actions/start-date';

From 4ae49ea5f0be3fc523d71b21013332f60763609a Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Tue, 14 Jun 2022 18:22:14 +0800
Subject: [PATCH 48/64] remove all commented lines

---
 packages/reports/build/constants.js             |  4 ----
 .../positions-drawer-card.jsx                   | 17 -----------------
 .../reports/src/Containers/open-positions.jsx   |  1 -
 .../Modules/Profit/Helpers/format-response.js   |  3 ---
 .../Statement/Helpers/format-response.js        |  6 +-----
 packages/reports/src/Stores/Modules/index.js    |  6 ------
 .../PositionsDrawer/positions-drawer.jsx        |  1 -
 packages/trader/src/Stores/Modules/index.js     | 12 +-----------
 packages/trader/tsconfig.tsbuildinfo            |  1 -
 9 files changed, 2 insertions(+), 49 deletions(-)
 delete mode 100644 packages/trader/tsconfig.tsbuildinfo

diff --git a/packages/reports/build/constants.js b/packages/reports/build/constants.js
index aeb4f319b524..dda0d55e4cd5 100644
--- a/packages/reports/build/constants.js
+++ b/packages/reports/build/constants.js
@@ -1,15 +1,11 @@
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-// const CopyPlugin = require('copy-webpack-plugin');
-// const HtmlWebPackPlugin = require('html-webpack-plugin');
-// const HtmlWebpackTagsPlugin = require('html-webpack-tags-plugin');
 const IgnorePlugin = require('webpack').IgnorePlugin;
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const path = require('path');
 const StylelintPlugin = require('stylelint-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
-// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 
 const { cssConfig, stylelintConfig } = require('./config');
diff --git a/packages/reports/src/Components/Elements/PositionsDrawerCard/positions-drawer-card.jsx b/packages/reports/src/Components/Elements/PositionsDrawerCard/positions-drawer-card.jsx
index cbd468010d75..67bbabaea610 100644
--- a/packages/reports/src/Components/Elements/PositionsDrawerCard/positions-drawer-card.jsx
+++ b/packages/reports/src/Components/Elements/PositionsDrawerCard/positions-drawer-card.jsx
@@ -215,21 +215,4 @@ PositionsDrawerCard.propTypes = {
     type: PropTypes.string,
 };
 
-// export default connect(({ modules, ui, client, common }) => ({
-//     currency: client.currency,
-//     server_time: common.server_time,
-//     addToast: ui.addToast,
-//     current_focus: ui.current_focus,
-//     onClickCancel: modules.portfolio.onClickCancel,
-//     onClickSell: modules.portfolio.onClickSell,
-//     onClickRemove: modules.portfolio.removePositionById,
-//     getContractById: modules.contract_trade.getContractById,
-//     is_mobile: ui.is_mobile,
-//     removeToast: ui.removeToast,
-//     setCurrentFocus: ui.setCurrentFocus,
-//     should_show_cancellation_warning: ui.should_show_cancellation_warning,
-//     toggleCancellationWarning: ui.toggleCancellationWarning,
-//     toggleUnsupportedContractModal: ui.toggleUnsupportedContractModal,
-// }))(PositionsDrawerCard);
-
 export default PositionsDrawerCard;
diff --git a/packages/reports/src/Containers/open-positions.jsx b/packages/reports/src/Containers/open-positions.jsx
index e42f1fe28687..486dda64e5d6 100644
--- a/packages/reports/src/Containers/open-positions.jsx
+++ b/packages/reports/src/Containers/open-positions.jsx
@@ -459,7 +459,6 @@ export default connect(({ client, common, ui, portfolio, contract_trade }) => ({
     onClickSell: portfolio.onClickSell,
     onMount: portfolio.onMount,
     server_time: common.server_time,
-
     addToast: ui.addToast,
     current_focus: ui.current_focus,
     onClickRemove: portfolio.removePositionById,
diff --git a/packages/reports/src/Stores/Modules/Profit/Helpers/format-response.js b/packages/reports/src/Stores/Modules/Profit/Helpers/format-response.js
index d46a9efaed68..f691a0a7b596 100644
--- a/packages/reports/src/Stores/Modules/Profit/Helpers/format-response.js
+++ b/packages/reports/src/Stores/Modules/Profit/Helpers/format-response.js
@@ -1,8 +1,5 @@
 import { formatMoney, toMoment, getSymbolDisplayName, getMarketInformation } from '@deriv/shared';
 
-// import { getMarketInformation } from '../../../../Helpers/market-underlying';
-// import { getSymbolDisplayName } from '../../Trading/Helpers/active-symbols';
-
 export const formatProfitTableTransactions = (transaction, currency, active_symbols = []) => {
     const format_string = 'DD MMM YYYY HH:mm:ss';
     const purchase_time = `${toMoment(+transaction.purchase_time).format(format_string)}`;
diff --git a/packages/reports/src/Stores/Modules/Statement/Helpers/format-response.js b/packages/reports/src/Stores/Modules/Statement/Helpers/format-response.js
index e5a02e553310..3111f2e37825 100644
--- a/packages/reports/src/Stores/Modules/Statement/Helpers/format-response.js
+++ b/packages/reports/src/Stores/Modules/Statement/Helpers/format-response.js
@@ -1,9 +1,5 @@
-import { formatMoney, toTitleCase, toMoment, getMarketInformation,getSymbolDisplayName } from '@deriv/shared';
-
+import { formatMoney, toTitleCase, toMoment, getMarketInformation, getSymbolDisplayName } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-// import { getMarketInformation } from '../../../../Helpers/market-underlying';
-
-// import { getSymbolDisplayName } from '../../Trading/Helpers/active-symbols';
 
 export const formatStatementTransaction = (transaction, currency, active_symbols = []) => {
     const format_string = 'DD MMM YYYY HH:mm:ss';
diff --git a/packages/reports/src/Stores/Modules/index.js b/packages/reports/src/Stores/Modules/index.js
index 91c9e0561f6a..4f8e6853040f 100644
--- a/packages/reports/src/Stores/Modules/index.js
+++ b/packages/reports/src/Stores/Modules/index.js
@@ -1,14 +1,8 @@
-// import ContractReplayStore from './Contract/contract-replay-store';
-// import ContractTradeStore from './Contract/contract-trade-store';
-// import PortfolioStore from './Portfolio/portfolio-store';
 import ProfitTableStore from './Profit/profit-store';
 import StatementStore from './Statement/statement-store';
 
 export default class ModulesStore {
     constructor(root_store) {
-        // this.contract_replay = new ContractReplayStore({ root_store });
-        // this.contract_trade = new ContractTradeStore({ root_store });
-        // this.portfolio = new PortfolioStore({ root_store });
         this.profit_table = new ProfitTableStore({ root_store });
         this.statement = new StatementStore({ root_store });
     }
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
index 83d9ed456aff..2d5c1935ed0c 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
@@ -171,7 +171,6 @@ export default connect(({ modules, ui, client, common, portfolio, contract_trade
     is_mobile: ui.is_mobile,
     is_positions_drawer_on: ui.is_positions_drawer_on,
     toggleDrawer: ui.togglePositionsDrawer,
-
     currency: client.currency,
     server_time: common.server_time,
     addToast: ui.addToast,
diff --git a/packages/trader/src/Stores/Modules/index.js b/packages/trader/src/Stores/Modules/index.js
index 4364812060ca..27463b9f10eb 100644
--- a/packages/trader/src/Stores/Modules/index.js
+++ b/packages/trader/src/Stores/Modules/index.js
@@ -1,18 +1,8 @@
-// import ContractReplayStore from './Contract/contract-replay-store';
-// import ContractTradeStore from './Contract/contract-trade-store';
-// import PortfolioStore from './Portfolio/portfolio-store';
-// import ProfitTableStore from './Profit/profit-store';
-// import StatementStore from './Statement/statement-store';
-import TradeStore from "./Trading/trade-store";
+import TradeStore from './Trading/trade-store';
 
 export default class ModulesStore {
     constructor(root_store, core_store) {
         this.cashier = core_store.modules.cashier;
-        // this.contract_replay = new ContractReplayStore({ root_store });
-        // this.contract_trade = new ContractTradeStore({ root_store });
-        // this.portfolio = new PortfolioStore({ root_store });
-        // this.profit_table = new ProfitTableStore({ root_store });
-        // this.statement = new StatementStore({ root_store });
         this.trade = new TradeStore({ root_store });
     }
 }
diff --git a/packages/trader/tsconfig.tsbuildinfo b/packages/trader/tsconfig.tsbuildinfo
deleted file mode 100644
index 2ed5b03ce2e2..000000000000
--- a/packages/trader/tsconfig.tsbuildinfo
+++ /dev/null
@@ -1 +0,0 @@
-{"program":{"fileNames":["../../node_modules/typescript/lib/lib.es5.d.ts","../../node_modules/typescript/lib/lib.es2015.d.ts","../../node_modules/typescript/lib/lib.es2016.d.ts","../../node_modules/typescript/lib/lib.es2017.d.ts","../../node_modules/typescript/lib/lib.es2018.d.ts","../../node_modules/typescript/lib/lib.es2019.d.ts","../../node_modules/typescript/lib/lib.es2020.d.ts","../../node_modules/typescript/lib/lib.es2021.d.ts","../../node_modules/typescript/lib/lib.es2022.d.ts","../../node_modules/typescript/lib/lib.esnext.d.ts","../../node_modules/typescript/lib/lib.dom.d.ts","../../node_modules/typescript/lib/lib.dom.iterable.d.ts","../../node_modules/typescript/lib/lib.es2015.core.d.ts","../../node_modules/typescript/lib/lib.es2015.collection.d.ts","../../node_modules/typescript/lib/lib.es2015.generator.d.ts","../../node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../node_modules/typescript/lib/lib.es2015.promise.d.ts","../../node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../node_modules/typescript/lib/lib.es2017.object.d.ts","../../node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2017.string.d.ts","../../node_modules/typescript/lib/lib.es2017.intl.d.ts","../../node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../node_modules/typescript/lib/lib.es2018.intl.d.ts","../../node_modules/typescript/lib/lib.es2018.promise.d.ts","../../node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../node_modules/typescript/lib/lib.es2019.array.d.ts","../../node_modules/typescript/lib/lib.es2019.object.d.ts","../../node_modules/typescript/lib/lib.es2019.string.d.ts","../../node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../node_modules/typescript/lib/lib.es2020.promise.d.ts","../../node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2020.string.d.ts","../../node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2020.intl.d.ts","../../node_modules/typescript/lib/lib.es2021.promise.d.ts","../../node_modules/typescript/lib/lib.es2021.string.d.ts","../../node_modules/typescript/lib/lib.es2021.weakref.d.ts","../../node_modules/typescript/lib/lib.es2021.intl.d.ts","../../node_modules/typescript/lib/lib.es2022.array.d.ts","../../node_modules/typescript/lib/lib.es2022.error.d.ts","../../node_modules/typescript/lib/lib.es2022.object.d.ts","../../node_modules/typescript/lib/lib.es2022.string.d.ts","../../node_modules/typescript/lib/lib.esnext.intl.d.ts","../../node_modules/@types/react/global.d.ts","../../node_modules/csstype/index.d.ts","../../node_modules/@types/prop-types/index.d.ts","../../node_modules/@types/scheduler/tracing.d.ts","../../node_modules/@types/react/index.d.ts","../../node_modules/@types/react-loadable/index.d.ts","../../node_modules/mobx-react-lite/dist/assertEnvironment.d.ts","../../node_modules/mobx-react-lite/dist/staticRendering.d.ts","../../node_modules/mobx-react-lite/dist/observer.d.ts","../../node_modules/mobx-react-lite/dist/useObserver.d.ts","../../node_modules/mobx-react-lite/dist/ObserverComponent.d.ts","../../node_modules/mobx-react-lite/dist/utils.d.ts","../../node_modules/mobx-react-lite/dist/useAsObservableSource.d.ts","../../node_modules/mobx-react-lite/dist/useLocalStore.d.ts","../../node_modules/mobx-react-lite/dist/useQueuedForceUpdate.d.ts","../../node_modules/mobx-react-lite/dist/observerBatching.d.ts","../../node_modules/mobx-react-lite/dist/index.d.ts","../../node_modules/mobx-react/dist/types/IReactComponent.d.ts","../../node_modules/mobx-react/dist/observer.d.ts","../../node_modules/mobx-react/dist/types/IValueMap.d.ts","../../node_modules/mobx-react/dist/Provider.d.ts","../../node_modules/mobx-react/dist/types/IWrappedComponent.d.ts","../../node_modules/mobx-react/dist/types/IStoresToProps.d.ts","../../node_modules/mobx-react/dist/inject.d.ts","../../node_modules/mobx-react/dist/disposeOnUnmount.d.ts","../../node_modules/mobx-react/dist/propTypes.d.ts","../../node_modules/mobx-react/dist/index.d.ts","../../node_modules/history/index.d.ts","../../node_modules/@types/react-router/index.d.ts","./src/App/Components/Routes/helpers.js","./src/App/Components/Routes/index.js","./src/Modules/Trading/index.js","./src/Modules/Contract/index.js","./src/Modules/Page404/index.js","./src/App/Constants/routes-config.js","./src/Stores/connect.js","./src/App/Components/Elements/Errors/index.js","./src/App/Containers/Routes/routes.jsx","../../node_modules/mobx/lib/utils/utils.d.ts","../../node_modules/mobx/lib/core/atom.d.ts","../../node_modules/mobx/lib/utils/comparer.d.ts","../../node_modules/mobx/lib/utils/decorators.d.ts","../../node_modules/mobx/lib/types/modifiers.d.ts","../../node_modules/mobx/lib/api/observabledecorator.d.ts","../../node_modules/mobx/lib/api/observable.d.ts","../../node_modules/mobx/lib/api/computed.d.ts","../../node_modules/mobx/lib/core/action.d.ts","../../node_modules/mobx/lib/types/observablevalue.d.ts","../../node_modules/mobx/lib/core/computedvalue.d.ts","../../node_modules/mobx/lib/core/derivation.d.ts","../../node_modules/mobx/lib/core/globalstate.d.ts","../../node_modules/mobx/lib/core/observable.d.ts","../../node_modules/mobx/lib/core/reaction.d.ts","../../node_modules/mobx/lib/core/spy.d.ts","../../node_modules/mobx/lib/api/actiondecorator.d.ts","../../node_modules/mobx/lib/api/action.d.ts","../../node_modules/mobx/lib/api/autorun.d.ts","../../node_modules/mobx/lib/api/become-observed.d.ts","../../node_modules/mobx/lib/api/configure.d.ts","../../node_modules/mobx/lib/api/decorate.d.ts","../../node_modules/mobx/lib/api/extendobservable.d.ts","../../node_modules/mobx/lib/api/extras.d.ts","../../node_modules/mobx/lib/api/flow.d.ts","../../node_modules/mobx/lib/api/intercept-read.d.ts","../../node_modules/mobx/lib/api/intercept.d.ts","../../node_modules/mobx/lib/api/iscomputed.d.ts","../../node_modules/mobx/lib/api/isobservable.d.ts","../../node_modules/mobx/lib/api/object-api.d.ts","../../node_modules/mobx/lib/api/observe.d.ts","../../node_modules/mobx/lib/api/tojs.d.ts","../../node_modules/mobx/lib/api/trace.d.ts","../../node_modules/mobx/lib/api/transaction.d.ts","../../node_modules/mobx/lib/api/when.d.ts","../../node_modules/mobx/lib/types/dynamicobject.d.ts","../../node_modules/mobx/lib/types/intercept-utils.d.ts","../../node_modules/mobx/lib/types/listen-utils.d.ts","../../node_modules/mobx/lib/types/observablearray.d.ts","../../node_modules/mobx/lib/types/observablemap.d.ts","../../node_modules/mobx/lib/types/observableset.d.ts","../../node_modules/mobx/lib/types/observableobject.d.ts","../../node_modules/mobx/lib/types/type-utils.d.ts","../../node_modules/mobx/lib/utils/eq.d.ts","../../node_modules/mobx/lib/utils/iterable.d.ts","../../node_modules/mobx/lib/internal.d.ts","../../node_modules/mobx/lib/mobx.d.ts","../../node_modules/@types/react-transition-group/Transition.d.ts","../../node_modules/@types/react-transition-group/CSSTransition.d.ts","../../node_modules/@types/react-transition-group/TransitionGroup.d.ts","../../node_modules/@types/react-transition-group/SwitchTransition.d.ts","../../node_modules/@types/react-transition-group/config.d.ts","../../node_modules/@types/react-transition-group/index.d.ts","../../node_modules/@types/react-router-dom/index.d.ts","./src/App/Components/Elements/EmptyPortfolioMessage/empty-portfolio-message.jsx","./src/App/Components/Elements/EmptyPortfolioMessage/index.js","../../node_modules/classnames/index.d.ts","./src/Stores/Modules/Trading/Helpers/active-symbols.js","./src/Stores/Modules/Contract/Helpers/multiplier.js","../../node_modules/moment/ts3.1-typings/moment.d.ts","./src/_common/utility.js","./src/_common/base/server_time.js","./src/Stores/Modules/Contract/Helpers/logic.js","../../node_modules/react-content-loader/dist/Holder.d.ts","../../node_modules/react-content-loader/dist/stylized/FacebookStyle.d.ts","../../node_modules/react-content-loader/dist/stylized/InstagramStyle.d.ts","../../node_modules/react-content-loader/dist/stylized/CodeStyle.d.ts","../../node_modules/react-content-loader/dist/stylized/ListStyle.d.ts","../../node_modules/react-content-loader/dist/stylized/BulletListStyle.d.ts","../../node_modules/react-content-loader/dist/index.d.ts","./src/App/Components/Elements/ContentLoader/positions-card.jsx","./src/App/Components/Elements/ContentLoader/trade-params.jsx","./src/App/Components/Elements/ContentLoader/index.js","./src/Constants/contract.js","./src/Utils/Helpers/market-underlying.js","./src/App/Components/Elements/PositionsDrawer/result-mobile.jsx","./src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx","./src/Stores/Modules/Trading/Constants/contract.js","./src/Stores/Modules/Contract/Helpers/contract-type.js","./src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.js","./src/App/Components/Elements/PositionsDrawer/helpers/index.js","./src/App/Components/Elements/TogglePositions/toggle-positions.jsx","./src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx","./src/App/Containers/trade-header-extensions.jsx","./src/App/Components/Elements/TogglePositions/index.js","./src/App/Containers/trade-footer-extensions.jsx","./src/App/Components/Elements/Media/media-description.jsx","./src/App/Components/Elements/Media/media-heading.jsx","./src/App/Components/Elements/Media/media-icon.jsx","./src/App/Components/Elements/Media/index.js","./src/App/Containers/SettingsModal/settings-chart.jsx","./src/App/Containers/trade-settings-extensions.jsx","../../node_modules/@types/react-dom/index.d.ts","./src/Modules/Trading/Containers/toast-popup.jsx","./src/App/init-store.js","./src/App/Containers/Modals/index.js","./src/App/app.tsx","./src/App/index.tsx","./src/index.tsx","./src/_common/components/loading.tsx","./globals.d.ts","../../node_modules/@types/aria-query/index.d.ts","../../node_modules/@babel/types/lib/index.d.ts","../../node_modules/@types/babel__generator/index.d.ts","../../node_modules/@babel/parser/typings/babel-parser.d.ts","../../node_modules/@types/babel__template/index.d.ts","../../node_modules/@types/babel__traverse/index.d.ts","../../node_modules/@types/babel__core/index.d.ts","../../node_modules/@types/eslint/helpers.d.ts","../../node_modules/@types/eslint/lib/rules/index.d.ts","../../node_modules/@types/json-schema/index.d.ts","../../node_modules/@types/estree/index.d.ts","../../node_modules/@types/eslint/index.d.ts","../../node_modules/@types/eslint-scope/index.d.ts","../../node_modules/@types/node/assert.d.ts","../../node_modules/@types/node/assert/strict.d.ts","../../node_modules/@types/node/globals.d.ts","../../node_modules/@types/node/async_hooks.d.ts","../../node_modules/@types/node/buffer.d.ts","../../node_modules/@types/node/child_process.d.ts","../../node_modules/@types/node/cluster.d.ts","../../node_modules/@types/node/console.d.ts","../../node_modules/@types/node/constants.d.ts","../../node_modules/@types/node/crypto.d.ts","../../node_modules/@types/node/dgram.d.ts","../../node_modules/@types/node/diagnostics_channel.d.ts","../../node_modules/@types/node/dns.d.ts","../../node_modules/@types/node/dns/promises.d.ts","../../node_modules/@types/node/domain.d.ts","../../node_modules/@types/node/events.d.ts","../../node_modules/@types/node/fs.d.ts","../../node_modules/@types/node/fs/promises.d.ts","../../node_modules/@types/node/http.d.ts","../../node_modules/@types/node/http2.d.ts","../../node_modules/@types/node/https.d.ts","../../node_modules/@types/node/inspector.d.ts","../../node_modules/@types/node/module.d.ts","../../node_modules/@types/node/net.d.ts","../../node_modules/@types/node/os.d.ts","../../node_modules/@types/node/path.d.ts","../../node_modules/@types/node/perf_hooks.d.ts","../../node_modules/@types/node/process.d.ts","../../node_modules/@types/node/punycode.d.ts","../../node_modules/@types/node/querystring.d.ts","../../node_modules/@types/node/readline.d.ts","../../node_modules/@types/node/repl.d.ts","../../node_modules/@types/node/stream.d.ts","../../node_modules/@types/node/stream/promises.d.ts","../../node_modules/@types/node/stream/consumers.d.ts","../../node_modules/@types/node/stream/web.d.ts","../../node_modules/@types/node/string_decoder.d.ts","../../node_modules/@types/node/timers.d.ts","../../node_modules/@types/node/timers/promises.d.ts","../../node_modules/@types/node/tls.d.ts","../../node_modules/@types/node/trace_events.d.ts","../../node_modules/@types/node/tty.d.ts","../../node_modules/@types/node/url.d.ts","../../node_modules/@types/node/util.d.ts","../../node_modules/@types/node/v8.d.ts","../../node_modules/@types/node/vm.d.ts","../../node_modules/@types/node/wasi.d.ts","../../node_modules/@types/node/worker_threads.d.ts","../../node_modules/@types/node/zlib.d.ts","../../node_modules/@types/node/globals.global.d.ts","../../node_modules/@types/node/index.d.ts","../../node_modules/@types/minimatch/index.d.ts","../../node_modules/@types/glob/index.d.ts","../../node_modules/@types/graceful-fs/index.d.ts","../../node_modules/@types/history/DOMUtils.d.ts","../../node_modules/@types/history/createBrowserHistory.d.ts","../../node_modules/@types/history/createHashHistory.d.ts","../../node_modules/@types/history/createMemoryHistory.d.ts","../../node_modules/@types/history/LocationUtils.d.ts","../../node_modules/@types/history/PathUtils.d.ts","../../node_modules/@types/history/index.d.ts","../../node_modules/@types/html-minifier-terser/index.d.ts","../../node_modules/@types/invariant/index.d.ts","../../node_modules/@types/is-function/index.d.ts","../../node_modules/@types/istanbul-lib-coverage/index.d.ts","../../node_modules/@types/istanbul-lib-report/index.d.ts","../../node_modules/@types/istanbul-reports/index.d.ts","../../node_modules/@types/jest/node_modules/chalk/index.d.ts","../../node_modules/jest-diff/build/cleanupSemantic.d.ts","../../node_modules/pretty-format/build/types.d.ts","../../node_modules/pretty-format/build/index.d.ts","../../node_modules/jest-diff/build/types.d.ts","../../node_modules/jest-diff/build/diffLines.d.ts","../../node_modules/jest-diff/build/printDiffs.d.ts","../../node_modules/jest-diff/build/index.d.ts","../../node_modules/@types/jest/node_modules/jest-matcher-utils/build/index.d.ts","../../node_modules/@types/jest/index.d.ts","../../node_modules/@types/json5/index.d.ts","../../node_modules/@types/unist/index.d.ts","../../node_modules/@types/mdast/index.d.ts","../../node_modules/@types/minimist/index.d.ts","../../node_modules/@types/normalize-package-data/index.d.ts","../../node_modules/@types/npmlog/index.d.ts","../../node_modules/@types/object.fromentries/index.d.ts","../../node_modules/@types/parse-json/index.d.ts","../../node_modules/@types/prettier/index.d.ts","../../node_modules/@types/q/index.d.ts","../../node_modules/@types/reach__router/index.d.ts","../../node_modules/@types/reactcss/index.d.ts","../../node_modules/@types/react-color/lib/components/alpha/Alpha.d.ts","../../node_modules/@types/react-color/lib/components/block/Block.d.ts","../../node_modules/@types/react-color/lib/components/common/Checkboard.d.ts","../../node_modules/@types/react-color/lib/components/chrome/Chrome.d.ts","../../node_modules/@types/react-color/lib/components/circle/Circle.d.ts","../../node_modules/@types/react-color/lib/components/compact/Compact.d.ts","../../node_modules/@types/react-color/lib/components/github/Github.d.ts","../../node_modules/@types/react-color/lib/components/hue/Hue.d.ts","../../node_modules/@types/react-color/lib/components/material/Material.d.ts","../../node_modules/@types/react-color/lib/components/photoshop/Photoshop.d.ts","../../node_modules/@types/react-color/lib/components/sketch/Sketch.d.ts","../../node_modules/@types/react-color/lib/components/slider/Slider.d.ts","../../node_modules/@types/react-color/lib/components/swatches/Swatches.d.ts","../../node_modules/@types/react-color/lib/components/twitter/Twitter.d.ts","../../node_modules/@types/react-color/lib/components/common/ColorWrap.d.ts","../../node_modules/@types/react-color/index.d.ts","../../node_modules/@types/react-syntax-highlighter/index.d.ts","../../node_modules/@types/react-textarea-autosize/index.d.ts","../../node_modules/@types/resolve/index.d.ts","../../node_modules/@types/scheduler/index.d.ts","../../node_modules/@types/sockjs-client/index.d.ts","../../node_modules/@types/source-list-map/index.d.ts","../../node_modules/@types/stack-utils/index.d.ts","../../node_modules/@types/tapable/index.d.ts","../../node_modules/@types/testing-library__jest-dom/index.d.ts","../../node_modules/@types/trusted-types/lib/index.d.ts","../../node_modules/@types/trusted-types/index.d.ts","../../node_modules/@types/uglify-js/node_modules/source-map/source-map.d.ts","../../node_modules/@types/uglify-js/index.d.ts","../../node_modules/anymatch/index.d.ts","../../node_modules/@types/webpack/node_modules/source-map/source-map.d.ts","../../node_modules/@types/webpack-sources/node_modules/source-map/source-map.d.ts","../../node_modules/@types/webpack-sources/lib/Source.d.ts","../../node_modules/@types/webpack-sources/lib/CompatSource.d.ts","../../node_modules/@types/webpack-sources/lib/ConcatSource.d.ts","../../node_modules/@types/webpack-sources/lib/OriginalSource.d.ts","../../node_modules/@types/webpack-sources/lib/PrefixSource.d.ts","../../node_modules/@types/webpack-sources/lib/RawSource.d.ts","../../node_modules/@types/webpack-sources/lib/ReplaceSource.d.ts","../../node_modules/@types/webpack-sources/lib/SizeOnlySource.d.ts","../../node_modules/@types/webpack-sources/lib/SourceMapSource.d.ts","../../node_modules/@types/webpack-sources/lib/index.d.ts","../../node_modules/@types/webpack-sources/lib/CachedSource.d.ts","../../node_modules/@types/webpack-sources/index.d.ts","../../node_modules/@types/webpack/index.d.ts","../../node_modules/@types/webpack-env/index.d.ts","../../node_modules/@types/yargs-parser/index.d.ts","../../node_modules/@types/yargs/index.d.ts"],"fileInfos":[{"version":"3ac1b83264055b28c0165688fda6dfcc39001e9e7828f649299101c23ad0a0c3","affectsGlobalScope":true},"dc47c4fa66b9b9890cf076304de2a9c5201e94b740cffdf09f87296d877d71f6","7a387c58583dfca701b6c85e0adaf43fb17d590fb16d5b2dc0a2fbd89f35c467","8a12173c586e95f4433e0c6dc446bc88346be73ffe9ca6eec7aa63c8f3dca7f9","5f4e733ced4e129482ae2186aae29fde948ab7182844c3a5a51dd346182c7b06","e6b724280c694a9f588847f754198fb96c43d805f065c3a5b28bbc9594541c84","e21c071ca3e1b4a815d5f04a7475adcaeea5d64367e840dd0154096d705c3940","746d62152361558ea6d6115cf0da4dd10ede041d14882ede3568bce5dc4b4f1f","2f93dda35dafec68ec217c9ce67f0f4fbbbb030c055ac312641565ad60dd7e26","aea179452def8a6152f98f63b191b84e7cbd69b0e248c91e61fb2e52328abe8c",{"version":"72704b10d97777e15f1a581b73f88273037ef752d2e50b72287bd0a90af64fe6","affectsGlobalScope":true},{"version":"dbb73d4d99be496175cb432c74c2615f78c76f4272f1d83cba11ee0ed6dbddf0","affectsGlobalScope":true},{"version":"d8996609230d17e90484a2dd58f22668f9a05a3bfe00bfb1d6271171e54a31fb","affectsGlobalScope":true},{"version":"43fb1d932e4966a39a41b464a12a81899d9ae5f2c829063f5571b6b87e6d2f9c","affectsGlobalScope":true},{"version":"cdccba9a388c2ee3fd6ad4018c640a471a6c060e96f1232062223063b0a5ac6a","affectsGlobalScope":true},{"version":"c5c05907c02476e4bde6b7e76a79ffcd948aedd14b6a8f56e4674221b0417398","affectsGlobalScope":true},{"version":"0d5f52b3174bee6edb81260ebcd792692c32c81fd55499d69531496f3f2b25e7","affectsGlobalScope":true},{"version":"810627a82ac06fb5166da5ada4159c4ec11978dfbb0805fe804c86406dab8357","affectsGlobalScope":true},{"version":"62d80405c46c3f4c527ee657ae9d43fda65a0bf582292429aea1e69144a522a6","affectsGlobalScope":true},{"version":"3013574108c36fd3aaca79764002b3717da09725a36a6fc02eac386593110f93","affectsGlobalScope":true},{"version":"75ec0bdd727d887f1b79ed6619412ea72ba3c81d92d0787ccb64bab18d261f14","affectsGlobalScope":true},{"version":"3be5a1453daa63e031d266bf342f3943603873d890ab8b9ada95e22389389006","affectsGlobalScope":true},{"version":"17bb1fc99591b00515502d264fa55dc8370c45c5298f4a5c2083557dccba5a2a","affectsGlobalScope":true},{"version":"7ce9f0bde3307ca1f944119f6365f2d776d281a393b576a18a2f2893a2d75c98","affectsGlobalScope":true},{"version":"6a6b173e739a6a99629a8594bfb294cc7329bfb7b227f12e1f7c11bc163b8577","affectsGlobalScope":true},{"version":"12a310447c5d23c7d0d5ca2af606e3bd08afda69100166730ab92c62999ebb9d","affectsGlobalScope":true},{"version":"b0124885ef82641903d232172577f2ceb5d3e60aed4da1153bab4221e1f6dd4e","affectsGlobalScope":true},{"version":"0eb85d6c590b0d577919a79e0084fa1744c1beba6fd0d4e951432fa1ede5510a","affectsGlobalScope":true},{"version":"da233fc1c8a377ba9e0bed690a73c290d843c2c3d23a7bd7ec5cd3d7d73ba1e0","affectsGlobalScope":true},{"version":"d154ea5bb7f7f9001ed9153e876b2d5b8f5c2bb9ec02b3ae0d239ec769f1f2ae","affectsGlobalScope":true},{"version":"bb2d3fb05a1d2ffbca947cc7cbc95d23e1d053d6595391bd325deb265a18d36c","affectsGlobalScope":true},{"version":"c80df75850fea5caa2afe43b9949338ce4e2de086f91713e9af1a06f973872b8","affectsGlobalScope":true},{"version":"9d57b2b5d15838ed094aa9ff1299eecef40b190722eb619bac4616657a05f951","affectsGlobalScope":true},{"version":"6c51b5dd26a2c31dbf37f00cfc32b2aa6a92e19c995aefb5b97a3a64f1ac99de","affectsGlobalScope":true},{"version":"6e7997ef61de3132e4d4b2250e75343f487903ddf5370e7ce33cf1b9db9a63ed","affectsGlobalScope":true},{"version":"2ad234885a4240522efccd77de6c7d99eecf9b4de0914adb9a35c0c22433f993","affectsGlobalScope":true},{"version":"1b3fe904465430e030c93239a348f05e1be80640d91f2f004c3512c2c2c89f34","affectsGlobalScope":true},{"version":"3787b83e297de7c315d55d4a7c546ae28e5f6c0a361b7a1dcec1f1f50a54ef11","affectsGlobalScope":true},{"version":"e7e8e1d368290e9295ef18ca23f405cf40d5456fa9f20db6373a61ca45f75f40","affectsGlobalScope":true},{"version":"faf0221ae0465363c842ce6aa8a0cbda5d9296940a8e26c86e04cc4081eea21e","affectsGlobalScope":true},{"version":"06393d13ea207a1bfe08ec8d7be562549c5e2da8983f2ee074e00002629d1871","affectsGlobalScope":true},{"version":"5075b36ab861c8c0c45377cb8c96270d7c65f0eeaf105d53fac6850da61f1027","affectsGlobalScope":true},{"version":"6c55633c733c8378db65ac3da7a767c3cf2cf3057f0565a9124a16a3a2019e87","affectsGlobalScope":true},{"version":"fb4416144c1bf0323ccbc9afb0ab289c07312214e8820ad17d709498c865a3fe","affectsGlobalScope":true},{"version":"5b0ca94ec819d68d33da516306c15297acec88efeb0ae9e2b39f71dbd9685ef7","affectsGlobalScope":true},{"version":"e8c9f4e445a489991ca1a4232667de3ac36b07ba75ea335971fbeacf2d26fe67","affectsGlobalScope":true},{"version":"34478567f8a80171f88f2f30808beb7da15eac0538ae91282dd33dce928d98ed","affectsGlobalScope":true},{"version":"6ea9ab679ea030cf46c16a711a316078e9e02619ebaf07a7fcd16964aba88f2d","affectsGlobalScope":true},{"version":"aedb8de1abb2ff1095c153854a6df7deae4a5709c37297f9d6e9948b6806fa66","affectsGlobalScope":true},{"version":"11ffe3c281f375fff9ffdde8bbec7669b4dd671905509079f866f2354a788064","affectsGlobalScope":true},{"version":"10bbdc1981b8d9310ee75bfac28ee0477bb2353e8529da8cff7cb26c409cb5e8","affectsGlobalScope":true},{"version":"bbdf156fea2fabed31a569445835aeedcc33643d404fcbaa54541f06c109df3f","affectsGlobalScope":true},"381899b8d1d4c1be716f18cb5242ba39f66f4b1e31d45af62a32a99f8edcb39d","f7b46d22a307739c145e5fddf537818038fdfffd580d79ed717f4d4d37249380","f5a8b384f182b3851cec3596ccc96cb7464f8d3469f48c74bf2befb782a19de5",{"version":"4c4229a7fe27b87aba0b8bab7f7338bc63e74b814156ba6925b552f9bec83154","affectsGlobalScope":true},{"version":"527840e23d438abab6cac9bdd4672c888cbaf5abc54e7da1ee0915aaba06dda6","affectsGlobalScope":true},"f761c91419d0a89422a0004ef1a92929dd4d2d5e5c16758654d8b0467d1998c6","f0cf46afbdff530923e8eaa10ae909d0fc4894d3beeab71be5972660d0f94657","20423b338529dc6c08091a31dfd4c8eb59c43618add12be380bc5c2c1defdefa","322aa16c6c143f1d818c5971d3f7641ab15cd726daed0c3bc4e344fa3377ef6b","32a6a915cfd763b55a3fdd52a1be4c33d0d6ff2b8b4e31477e522f983c168c32","5c5975a57f974dea93b814baaa9e001f0bc4a832d9f3d75a8193c2e12331171b","7f9b0d5e3fa15ab156fdc7967b7cde90bc655199c9f27bfd529dc8936f0ed5d0","c1fc7bc6a2c8ed40e9d17abba1c515923a7d860916611171b1f78019e4c75ec5","7a736da957c9a1d576a5a4dd4ce145b782944bc8e9470b8ad2ac3c4a349fb666","960e9a6f3844831c0b827ad4c116c1d5ae2eb4ee6a364f55650ecf0f4b358254","53825c0d7205506faa91825612373dacb25f70fc05776c69c998f4081cc67da7","bfdcbaa21d9ceeb25394c1d67836a3355660a9cc38dd790fb138c801ecfc10a6","3dda11e0c7b1da55fb3576a8c863d1e8067004060d844b6e3ab9cbb2522ee6d4","be6b8e95eaad887b3e26da22215f188ac01ec13d8e6fe89c57d671a04f241e09","a0772a49c68c8ad09fd9b41f73fe542e52535e14f7825db9d605c3c99166c377","9e7a6963251629b917820b5c2ed4e3d78a20e9918efe2b6615fd484fa0cb6523","55447554cf27022611a95091556b48ba78e962b8e2a5ef0572f3dbaef1c9ec8d","ed1d1e789510fb8a6956f82b0160c069846c35e23ee3bb65f3cdbfcda319742d","26851ae9962b794c44cb4d3c7ac2abf88e7c09104011c0158613358fcc6949e6","6d13ddfedb26a0ebe0ab867e22db3064640b350edd7f29e4736475ec273c21eb","a825fab8128556b9f2cfca1de0e65bef960a4cd8123ead23f5f735dac1bf28bf","50001cd4550147fb62c68902f6e0c1856d42c575f0f5f43efe8639f931838a50","6c362c5d50652957065cf52f282a2bf0a456ed3713738d0ee1a9089dbb5b5fe7","34e6e6023540f032a37a1f41d664bba68f1af87a65ccb5d26268915ab3b0056b","2f55247c9210f1c685b13f1e59d620efd4c1a25bcbaf93ae70b0e511cce0bee2","93489a2de0143ba6815b2661596fbd95849ea1711a212c693a095096d9e9a345","d7548fb8d55f2ead4cbdf7fdfdec288f1acb27100757b9a1eb4a22e76d6a4a40","6825bcecede84cbe30a7d0f86153af683cb4d806509a16951654ca30f815fad1","204cd5bda15f03237bc373bdd500aeed89599f67a838599732a7550ba715665b","ba483d59f0d37c03f2cddd7bce3d1db4c2aaa9dd2636997f5c4374c66d3b0e9c","758c8ad93b78d02fa88f0d84c988a377264b9370e668b1ffd64e257c90e1ff63","0c4260b545f6f06477087e358ef74ea5326b2e1ff7020b3388adca8f4fbcc545","63ddff320a89f6871034933fec3d04e68bfb428e9c78c543ea13c510b363bc42","19d56d852739d209835dc7c64f6d508310d4018376cf8bb9c8febda362ca8f78","33c337de15324843b658d00995db674f9c618fe9ad6ad6b43f0fe6835984fa0b","835eac23d8469562ee8b6cb46a875c694a29a196dbf3d075d850972ecc834620","98d0a7a057191ce8f111a5b8ecc7107ff9ab45d63ead4ce29a07296d31b5e91c","4041620e27e40e45b2245c7b4a8c71f61ca3fa3c4a13ee90d09cc63ca77869a8","b85b721978ea4bb7624ac8e7e6cb512a5cb290a85cf44e524f242fba25d476fa","e73468f0faf1cc6da95dcffc4533896c0cf91c4a8e4b3f9f65f87fab36d7e174","3b5d72a128afa26b8636e191b082947ea1e1ccd799543e3ce7a57adc35697eb8","efa8f798ccfc988c480922f64a92968a862a8ea200bfe88982edf46dad94bc28","79e715a58ae3ee0470cb55d55653c4dc89f7d8ef4f5a7b5720b7be08a998f649","6a2b74f0ec5c05b43dcea9d05433739900b7052a483f0dba4c515cdd29734942","4609c547e1956bee7974fc845dea2eb9be4292a943bf3cc9964ba2b041759b4b","740bacc689be6f431d28f32ff98278810840de1869b4f03dc47b8c92a6d860fa","78dc572c57915fa4a3172b59a3cf590a86b4e7e65dff5c27d2438f578b5d9ffc","501485ac42f4a9298ee77c4ba6c3eaa818041e63066003ef88b87a7ac3f62beb","228f1b1845cf8eab22806df7fdfd57803cb4161d190ce930491fe80d8a2b6e98","5b0b345017f6b471b620f1c8fbdbf0e04c3721375d3e800c52618dabfeef1f07","ce662439cb897a60ae7657ac19cfa47dfeb558e13ecb30ee84a3112d0fd466fa","470a0fb853080bdd226587e7b4bd403c21b3dc7ff41b598622518e0308934b87","4655c6622f6d0bb3182ee903b35013605425b421c24b17d3e826782c773dd75f","c6e88565b597b47d3d2a304af8b99f2b2b818e2136815ff473cd9e371899fbf7","ff51bf727325b7ae84d7296a0f6f701b9db4c1950c83ef389ac3b7dcdcb5efd7","bfca9c2cc975dd04310c02d200c61baac194b8ebb52d26ea83c50092ae005f88","0f2fc3b17287c4bbf75b2acc39ab504b794ea332972d914c17ec7f1dd95efe25","05e9a6cc3630bb41f3bd0a2cd86627fd19afe4837f34062e24ec799f1748def9","292404c1008d69cb301e9cdc821fdecd347a574da87cf5041c166041a7b1a2e9","6d4f8e81b0c78a3282862d631b067c8857feb438ffb804ab16ec6787a984f07e","8558b13817b7ff64d16f004ec1f8503baf48b0257428de64ce67646da6dd2142","aa0a1c26b1f6ae3d55a9942ea119b301e2a455a601ca868a1bc84372c1d3f045","5ad10a0a2db50586db554af700cb48fe317f80d881428d5473807a9ebbf3d738","44074878bfdc747b948feef53cd672bca37675bb885127bc6c2669d5baf57902","f2ecf41bea9d32be3e27c71b7d1d9e3f58083b45fd36bd25980899a1168ee109","0adcb5db0aa0de1425495b135dacaf6f2240e3ad48b905cd8139f730fedaa4ca","ad0a9f226ccbba7ea6b2b991a0bec5d95f0b1e8104f12d691c1a407710a7a832","2f96180e51009103c6f383ddd03c1452229f514b585c2ad1a4dc25ac7ec7ab7a","70f1bfeb39734149e329e52e51f28b88f3f83ff25c6e3a43c1441981ac318126","05129db68d57fbb85476b7e6e164e8b292efe68d5fdc544b70ee3a32233b2487","5d3838dbbcfda003fbc39f2716a106f2b514a54dd2def9ea08ab04c8e7db4835","b86b288947dd561b5cb2d62c7ec02a83a00858e6673719699f960f48121116b0","b5c3e2baa5d632f3489ecb4f6d9ad8e2c914cda3f11a98570c7100d6ac52615b","ff2ece145bb888655363773f3c781ea9f6a06bdc0f35f125f159dfd4ecfb37df","f14823adf03c5cd507c4d7a8cbb242e02c6e2835424e1183e729464bdf4f3f73","118d80f9540cfa2b110c2835648059d35660b02250e6ac64b7d81791ccb5a5e1","99b6d4c09e9743dc5b57ed14d1cb75434539838ba5f53de259693de8f5027d8d","5577f642fe5b71710a4fe4b8a3d5f1bdcb9760d7b6162f0184d97267f31dd6e3","fb8e8e664c26078702764fa8efe1ba1a3125f1c32995821800a94f01a3273fa1","30688eab034d1aa3bbe4d8f2c7f462ddaec9f30f1a38a306a4728a9a06a58b11","e03334588c63840b7054accd0b90f29c5890db6a6555ac0869a78a23297f1396","c3052485f32a96bfde75a2976c1238995522584ba464f04ff16a8a40af5e50d1","c220410b8e956fa157ce4e5e6ac871f0f433aa120c334d906ff1f5e2c7369e95","960a68ced7820108787135bdae5265d2cc4b511b7dcfd5b8f213432a8483daf1","ed3b711f533ddb3a5451f4c4bb0df3a0b95e9d0433b3b7834644dd1718d06d31","8017277c3843df85296d8730f9edf097d68d7d5f9bc9d8124fcacf17ecfd487e","851f84ba1267d76ed2fbef6b5a93d4003ddea1ce74ca28ef3224b0d16519f206","655c16b2b52f15a8f0127b2389a964b04e4f7d18a13cce103c45c13feddc700b","d153cbce75b7e1621eda0a4148748f44edd71ff44cc5351bac1c7787da4d5b05","bdf984fad8c9f40cb44a30e77dd74a8dffb809bace5f77bb583178e644d23c8e","dbca3f0d088b4d9fdb40834c0e8565c59aaf742658687982f2df4c5e67ca08ca","4051f6311deb0ce6052329eeb1cd4b1b104378fe52f882f483130bea75f92197","b538f0cb004c937386eaa17e9869199140d64ebccc1f6835a52f99741c6e8ae8","1c154ae2ad6c088f4bba542fc1784e645292d439702a8f17dc67cd3e57a8c983","0e92fbd3a900f8ab92c25961e2ff715236f2467936881afb11bfece1524b6836","519c39ac8b701108782582cfcf18c01c79c2f19d3be83103e7dc0a7cc1398882","9fe8d6ef10a152849e904912921399a7f9c660175366d4d71667e8edfe24d476","34cd05a2c1b766682caf0c4d8ee4c46bab84e5972a66c4fa88992144dc882ced","0d26218e57dd54543a6238172cd734221a489cc07972a34a223b4f98abb0bf4b","f28e40453762b99f36fe62d5e64a7eb1c2d3f55ebdf4489d90c94021b0cbee4f","5b32f4925c4da4dcf12bb697edea3eedb126791374c510f1689d2bbb6dd0c461","12505b223c10c41961c5f305579b46daf1cba925ddc608db8b69a134b970e0bb","89475e496c6f3aa92a708243717f0cc5680f4cff78a8062d7bd02704fae60cf7","8d958f249874c29caa13aba8d3bf3c2cc0c0da82df76bf1ef56443f665f19e98","97d959fd6238178fa821453f4e460ee8221dbd57326883a8d0e229be105ec533","aef543ba958ef62d52670bc6facf7c485306ab92f013f99ef8891212dae326ca","517944cae0f574526a1e5f938594260258991125d056fbfc77e7f9a4cac8a95a","208f13edebd5a2b76d5c9413582126b46d70d3d127a8bacdbddd1414e03a9b0b","a2d6a62ab667a3e9a557751509ce68bcbf430382173ac16aa8f4d6aa9b157c88","f2beef566553d7b62d725f10fc8de67955e43dfd292dda361ce14921d1cdfcb6","b0d0cb376549ceddfa15719df98840f376ab1e4a29f6ecb266b4208b7acaed10","006b61fd876e7f034b6b66afd48db957b2c91751b7f68d7ef86e21bea510d81d","4672dda74dfa858e3600969e8374e267d2db539f0ead6468f72b49b9789a6338","ab496193cd26a1a6aab36122609b08170755d4f26aabb15a5c3e6740f626e8bc","6ccf4d7a253696b79338860c385c697fedf84b0ac321d6ee3597eaa8d083a777","44d53618d2420c2cd19d0c73a4e0a1355af8b7f4a0ed6d6f559944e31da266d7","fe8532a0acbf3c65d2759313abf862869327dc8c0a4f7cf80bc7942491ec7b3d","8da843f072ee2b41f335a7d29a0f69f00573986457d3c711c7ee8ed0c3a8a705","bb678fd2aeb80991c70f4f346cdf8c1997e7cdfed6d50612feb91c38d22ac5e4","425371cbc336a6f5b606bc6a988ccbedd16093e7bd541e3f779f85439f20b288","bf79e50d245025909a029fc965491480d0e12070d9485ce18b0d394fa343b943","239190c6ab3a924a3644c37186f2e01f7ee4888ae048f055658ba2c0f352be7e","d7fe9a4c8865d044ca1f68a8358f31b82cc58869ec1bf4043053e0e8ea64bac0","cb2261bb45151df72d01afb97a96c43126d7830715312e517cfb30af69ebb5f7","ca579f66ab81fbb94022268fcb98f8eab6ad5ba3b283ef65eba4bbd7df16e9e0","08dc5f08569f0859f28a37169d40f4add27b378793968a2d3fbbbaffbf7c083b","f7dc4f72e0e93f3d33d13201de0cbd90323030d7eb8897d4ba48b2fb74ebebd1","d2052ba5eeb9043db80b93ca89a0e1fa44ca2c85f2c46fdf2e5ab16d94f035fc","1d24d13acffb41d85c8be53040666cd27141a54745b475fd13f29d7d05cb7e35","11de3bbbd260a837f5680368f9a3b1e84ee0cc3d7a346a4a2d84b9bf418c8b63","9ee4a449aa5e989f3a577fbbb5620875c4b3da4945618ff2f3a8d9d48875d8fc","e44a7b6fd14dcd438ffed723ed7fbd5015edb67204a339897a23dbece0da8ad3","45220eedba59cc5e3e4f9c3c8e10b75067c1b09f545e6492ceb6e08ae174a15a","5024433f8da3a7968f6d12cffd32f2cefae4442a9ad1c965fa2d23342338b700","2ff9995137f3e5d68971388ec58af0c79721626323884513f9f5e2e996ac1fdd","cc957354aa3c94c9961ebf46282cfde1e81d107fc5785a61f62c67f1dd3ac2eb","29afd3970c68fdcbf3168de0f855d7cd84135c436050793b0584e1a904affe2d","93de1c6dab503f053efe8d304cb522bb3a89feab8c98f307a674a4fae04773e9","3b043cf9a81854a72963fdb57d1884fc4da1cf5be69b5e0a4c5b751e58cb6d88","dd5647a9ccccb2b074dca8a02b00948ac293091ebe73fdf2e6e98f718819f669",{"version":"64d4b35c5456adf258d2cf56c341e203a073253f229ef3208fc0d5020253b241","affectsGlobalScope":true},"0133ebdd17a823ae56861948870cde4dac18dd8818ab641039c85bbb720429e0","0359682c54e487c4cab2b53b2b4d35cc8dea4d9914bc6abcdb5701f8b8e745a4","a1c79f857f5c7754e14c93949dad8cfefcd7df2ecc0dc9dd79a30fd493e28449","874d84ca5699231d5af2868fef01fc63f948bd83be928881479db48508f92ca0","dc33ce27fbeaf0ea3da556c80a6cc8af9d13eb443088c8f25cdc39fca8e756f6","0cba3a5d7b81356222594442753cf90dd2892e5ccfe1d262aaca6896ba6c1380","a69c09dbea52352f479d3e7ac949fde3d17b195abe90b045d619f747b38d6d1a",{"version":"77f0b5c6a193a699c9f7d7fb0578e64e562d271afa740783665d2a827104a873","affectsGlobalScope":true},"e5979905796fe2740d85fbaf4f11f42b7ee1851421afe750823220813421b1af",{"version":"fcdcb42da18dd98dc286b1876dd425791772036012ae61263c011a76b13a190f","affectsGlobalScope":true},"1dab5ab6bcf11de47ab9db295df8c4f1d92ffa750e8f095e88c71ce4c3299628","f71f46ccd5a90566f0a37b25b23bc4684381ab2180bdf6733f4e6624474e1894",{"version":"54e65985a3ee3cec182e6a555e20974ea936fc8b8d1738c14e8ed8a42bd921d4","affectsGlobalScope":true},"82408ed3e959ddc60d3e9904481b5a8dc16469928257af22a3f7d1a3bc7fd8c4","5b30f550565fd0a7524282c81c27fe8534099e2cd26170ca80852308f07ae68d","34e5de87d983bc6aefef8b17658556e3157003e8d9555d3cb098c6bef0b5fbc8","d97cd8a4a42f557fc62271369ed0461c8e50d47b7f9c8ad0b5462f53306f6060","f27371653aded82b2b160f7a7033fb4a5b1534b6f6081ef7be1468f0f15327d3","c762cd6754b13a461c54b59d0ae0ab7aeef3c292c6cf889873f786ee4d8e75c9","f4ea7d5df644785bd9fbf419930cbaec118f0d8b4160037d2339b8e23c059e79",{"version":"bfea28e6162ed21a0aeed181b623dcf250aa79abf49e24a6b7e012655af36d81","affectsGlobalScope":true},"b8aca9d0c81abb02bec9b7621983ae65bde71da6727580070602bd2500a9ce2a","ae97e20f2e10dbeec193d6a2f9cd9a367a1e293e7d6b33b68bacea166afd7792","10d4796a130577d57003a77b95d8723530bbec84718e364aa2129fa8ffba0378","063f53ff674228c190efa19dd9448bcbd540acdbb48a928f4cf3a1b9f9478e43","bf73c576885408d4a176f44a9035d798827cc5020d58284cb18d7573430d9022","7ae078ca42a670445ae0c6a97c029cb83d143d62abd1730efb33f68f0b2c0e82",{"version":"e8b18c6385ff784228a6f369694fcf1a6b475355ba89090a88de13587a9391d5","affectsGlobalScope":true},"287b21dc1d1b9701c92e15e7dd673dfe6044b15812956377adffb6f08825b1bc","12eea70b5e11e924bb0543aea5eadc16ced318aa26001b453b0d561c2fd0bd1e","08777cd9318d294646b121838574e1dd7acbb22c21a03df84e1f2c87b1ad47f2","08a90bcdc717df3d50a2ce178d966a8c353fd23e5c392fd3594a6e39d9bb6304",{"version":"4cd4cff679c9b3d9239fd7bf70293ca4594583767526916af8e5d5a47d0219c7","affectsGlobalScope":true},"2a12d2da5ac4c4979401a3f6eaafa874747a37c365e4bc18aa2b171ae134d21b","002b837927b53f3714308ecd96f72ee8a053b8aeb28213d8ec6de23ed1608b66","1dc9c847473bb47279e398b22c740c83ea37a5c88bf66629666e3cf4c5b9f99c","a9e4a5a24bf2c44de4c98274975a1a705a0abbaad04df3557c2d3cd8b1727949","00fa7ce8bc8acc560dc341bbfdf37840a8c59e6a67c9bfa3fa5f36254df35db2","1b952304137851e45bc009785de89ada562d9376177c97e37702e39e60c2f1ff",{"version":"806ef4cac3b3d9fa4a48d849c8e084d7c72fcd7b16d76e06049a9ed742ff79c0","affectsGlobalScope":true},"44b8b584a338b190a59f4f6929d072431950c7bd92ec2694821c11bce180c8a5","5f0ed51db151c2cdc4fa3bb0f44ce6066912ad001b607a34e65a96c52eb76248",{"version":"af9771b066ec35ffa1c7db391b018d2469d55e51b98ae95e62b6cbef1b0169ca","affectsGlobalScope":true},"664d8f2d59164f2e08c543981453893bc7e003e4dfd29651ce09db13e9457980","103d70bfbeb3cd3a3f26d1705bf986322d8738c2c143f38ebb743b1e228d7444","f52fbf64c7e480271a9096763c4882d356b05cab05bf56a64e68a95313cd2ce2","59bdb65f28d7ce52ccfc906e9aaf422f8b8534b2d21c32a27d7819be5ad81df7",{"version":"3a2da34079a2567161c1359316a32e712404b56566c45332ac9dcee015ecce9f","affectsGlobalScope":true},"28a2e7383fd898c386ffdcacedf0ec0845e5d1a86b5a43f25b86bc315f556b79","3aff9c8c36192e46a84afe7b926136d520487155154ab9ba982a8b544ea8fc95","a880cf8d85af2e4189c709b0fea613741649c0e40fffb4360ec70762563d5de0","85bbf436a15bbeda4db888be3062d47f99c66fd05d7c50f0f6473a9151b6a070","9f9c49c95ecd25e0cb2587751925976cf64fd184714cb11e213749c80cf0f927","f0c75c08a71f9212c93a719a25fb0320d53f2e50ca89a812640e08f8ad8c408c",{"version":"ab9b9a36e5284fd8d3bf2f7d5fcbc60052f25f27e4d20954782099282c60d23e","affectsGlobalScope":true},"9cafe917bf667f1027b2bb62e2de454ecd2119c80873ad76fc41d941089753b8","8841e2aa774b89bd23302dede20663306dc1b9902431ac64b24be8b8d0e3f649","fd326577c62145816fe1acc306c734c2396487f76719d3785d4e825b34540b33","3ebae8c00411116a66fca65b08228ea0cf0b72724701f9b854442100aab55aba",{"version":"271cde49dfd9b398ccc91bb3aaa43854cf76f4d14e10fed91cbac649aa6cbc63","affectsGlobalScope":true},"2bcecd31f1b4281710c666843fc55133a0ee25b143e59f35f49c62e168123f4b","a6273756fa05f794b64fe1aff45f4371d444f51ed0257f9364a8b25f3501915d","9c4e644fe9bf08d93c93bd892705842189fe345163f8896849d5964d21b56b78","25d91fb9ed77a828cc6c7a863236fb712dafcd52f816eec481bd0c1f589f4404","4cd14cea22eed1bfb0dc76183e56989f897ac5b14c0e2a819e5162eafdcfe243","8d32432f68ca4ce93ad717823976f2db2add94c70c19602bf87ee67fe51df48b","ee65fe452abe1309389c5f50710f24114e08a302d40708101c4aa950a2a7d044","6acf8a984c2728906edeba2098c5c51f44a4520bc4a48c65b973bd785537178f","de1d6e224048139baf7494237a9231be6bab9e990fb239c7825bfd38b06d8c90","8b06ac3faeacb8484d84ddb44571d8f410697f98d7bfa86c0fda60373a9f5215","7eb06594824ada538b1d8b48c3925a83e7db792f47a081a62cf3e5c4e23cf0ee","f5638f7c2f12a9a1a57b5c41b3c1ea7db3876c003bab68e6a57afd6bcc169af0","0d14fa22c41fdc7277e6f71473b20ebc07f40f00e38875142335d5b63cdfc9d2","d8aab31ba8e618cc3eea10b0945de81cb93b7e8150a013a482332263b9305322","462bccdf75fcafc1ae8c30400c9425e1a4681db5d605d1a0edb4f990a54d8094","5923d8facbac6ecf7c84739a5c701a57af94a6f6648d6229a6c768cf28f0f8cb","7adecb2c3238794c378d336a8182d4c3dd2c4fa6fa1785e2797a3db550edea62","dc12dc0e5aa06f4e1a7692149b78f89116af823b9e1f1e4eae140cd3e0e674e6","1bfc6565b90c8771615cd8cfcf9b36efc0275e5e83ac7d9181307e96eb495161","8a8a96898906f065f296665e411f51010b51372fa260d5373bf9f64356703190","7f82ef88bdb67d9a850dd1c7cd2d690f33e0f0acd208e3c9eba086f3670d4f73",{"version":"3ca3179dd4772b596ed81df8bb9c541e1416d86343c582a105013b20925de051","affectsGlobalScope":true},"c5a14bdeb170e0e67fb4200c54e0e02fd0ec94aca894c212c9d43c2916891542","cddf5c26907c0b8378bc05543161c11637b830da9fadf59e02a11e675d11e180","2a2e2c6463bcf3c59f31bc9ab4b6ef963bbf7dffb049cd017e2c1834e3adca63","209e814e8e71aec74f69686a9506dd7610b97ab59dcee9446266446f72a76d05","6fa0008bf91a4cc9c8963bace4bba0bd6865cbfa29c3e3ccc461155660fb113a","df38da6685578ac3d0e4ce2d20f3d59462ee53959b8263d2532ec9cec48ae098","4b8ab3f9f820a112eb90213dc4b1381034f531f00bfb73cc60088cf9c9fa8ff5","2b8264b2fefd7367e0f20e2c04eed5d3038831fe00f5efbc110ff0131aab899b","6209c901f30cc321f4b86800d11fad3d67e73a3308f19946b1bc642af0280298","62b931417104c7cb35d0725e1869f51d52d7b18462fd58f32f846a314a42ba10","b344467763f90fe9ab9a1cd435b7401b19f5a6be2d6beded79d25266002dcbc9","ebe77545478bf39a23059a3b0ea03d2c0e502d9c8e1122015e19213cd0815097","ad8c69f4a471cafdf093acdcdf3b444ae56b227b92024ae45f8c9c9c8be8afcc","71a6149f67a64b55baeddb83e5254e9e017c80c15a260d6f6b3a12deb3a575ed","6c881abb4a0e7579a9d5b63a7e4da3d98b094adf0f1d1fa75bbe433b9f3d7c27","66d6844502d7764a8e02b632228c4c5a95f7cac7bce1a0db07f0dcc377d3755b","2e1be3fee9ccef82555b2f039e8e100e0a176ee2d18b0de95e7da6a61e1e360a","5c48fc6096e361e639c1d0a9f7f066242bf757ace84843582d29c6813563055a","bebac54845e03ea36044fab99b5a51266cec2492fcd8a95bde6d5527a3174732","ef141fd0ac854fc92cbc9a13cd25a0ac87b3961f70d516f191bb3e29d3b183fe","a90c6f5554bd74f63aaf03751e6b79d01a457b59339b03d308c16af8f266cf47","7d5d42c18c62ef137b8830b7de8432b466c8f4d93fa8476ac36d2f69114fad1e","484faf958ae025f8d1ce6cb9c75e12c2148190efc22151299d14d10e3601cbba","66ddf54cc3d66cdab1b69e6879af9876bbc30030f85e51ba8a73223339e65b85","734166f6ae00b52512304c153644963fd93cd152620231ea7a0560802c968d28","15ce0cfa537ada25e07633617a993a8e02827939c2128d39c010739f28a0379c","a3868158152cc946c27c5e7b7803537c14cada9bb442c96c759c66b0d01f9eca","00ee901c4135af0d5688bee246d1e42ef7421cec93c32587e4814f744b95e2e8",{"version":"83800fe6ed3ecb114e0ddb6f82f9ac621e2847fa6f77f9f04a56c0c51d13a162","affectsGlobalScope":true},"2f9dbca98c7797139e1a723a03a2c53840ba42bfea249f3af87b73fa95e92091","8a19491eba2108d5c333c249699f40aff05ad312c04a17504573b27d91f0aede","74b0245c42990ed8a849df955db3f4362c81b13f799ebc981b7bec2d5b414a57","060c5f256fce980694fbab25c3806fe0efd26fb2f36194241288bc200ce7e3b4","67fc055eb86a0632e2e072838f889ffe1754083cb13c8c80a06a7d895d877aae","b0d10e46cfe3f6c476b69af02eaa38e4ccc7430221ce3109ae84bb9fb8282298","3833c70307dc3d2b46cb6f2a8b6a90e4d7e7367a21ab18c481d7de0909a43e67",{"version":"dd4d769260a2b8cf19f0d2457f3142b24f083237932b0d1edb5fd728a989c8bd","affectsGlobalScope":true},"2fcd2d22b1f30555e785105597cd8f57ed50300e213c4f1bbca6ae149f782c38",{"version":"bb4248c7f953233ac52332088fac897d62b82be07244e551d87c5049600b6cf7","affectsGlobalScope":true},"2887592574fcdfd087647c539dcb0fbe5af2521270dad4a37f9d17c16190d579","c6c1427ba1efa270964d61564a3d99b59c0865a51dd55e4beb9f50e5c9aa8b51","4fb0b7d532aa6fb850b6cd2f1ee4f00802d877b5c66a51903bc1fb0624126349","2887592574fcdfd087647c539dcb0fbe5af2521270dad4a37f9d17c16190d579","b90c59ac4682368a01c83881b814738eb151de8a58f52eb7edadea2bcffb11b9","8560a87b2e9f8e2c3808c8f6172c9b7eb6c9b08cb9f937db71c285ecf292c81d","ffe3931ff864f28d80ae2f33bd11123ad3d7bad9896b910a1e61504cc093e1f5","083c1bd82f8dc3a1ed6fc9e8eaddf141f7c05df418eca386598821e045253af9","274ebe605bd7f71ce161f9f5328febc7d547a2929f803f04b44ec4a7d8729517","6ca0207e70d985a24396583f55836b10dc181063ab6069733561bfde404d1bad","5908142efeaab38ffdf43927ee0af681ae77e0d7672b956dfb8b6c705dbfe106","f772b188b943549b5c5eb803133314b8aa7689eced80eed0b70e2f30ca07ab9c","0026b816ef05cfbf290e8585820eef0f13250438669107dfc44482bac007b14f","05d64cc1118031b29786632a9a0f6d7cf1dcacb303f27023a466cf3cdc860538","e0fff9119e1a5d2fdd46345734126cd6cb99c2d98a9debf0257047fe3937cc3f","d84398556ba4595ee6be554671da142cfe964cbdebb2f0c517a10f76f2b016c0","e275297155ec3251200abbb334c7f5641fecc68b2a9573e40eed50dff7584762","b2f006ee835f315d01c43c0f5d9e9ad78a5870b380899877b32a33078d065dbd",{"version":"3a6de361cea25e21054d8f8a8e35c5c0df730982f9b9fb613a6e9029e54071e5","affectsGlobalScope":true},"f7e133b20ee2669b6c0e5d7f0cd510868c57cd64b283e68c7f598e30ce9d76d2","09c4b2e2d3070239d563fc690f0cc5db04a2d9b66a23e61aef8b5274e3e9910c"],"options":{"allowSyntheticDefaultImports":true,"declaration":true,"declarationMap":false,"esModuleInterop":true,"inlineSourceMap":false,"jsx":2,"module":7,"noFallthroughCasesInSwitch":true,"noUnusedLocals":false,"noUnusedParameters":false,"outDir":"./dist","removeComments":true,"rootDir":"./src","skipDefaultLibCheck":true,"skipLibCheck":true,"sourceMap":false,"strict":true,"target":1},"fileIdsList":[[192,247],[247],[192,193,194,195,196,247],[192,194,247],[201,202,247],[198,199,200,201,247],[202,247],[219,220,247,254,255],[220,247,254],[247,264],[247,258,264],[247,259,260,261,262,263],[247,268],[247,269],[247,274,279],[247,271,278],[247,282],[204,247],[207,247],[208,213,247],[209,219,220,227,236,246,247],[209,210,219,227,247],[211,247],[212,213,220,228,247],[213,236,243,247],[214,216,219,227,247],[215,247],[216,217,247],[218,219,247],[219,247],[219,220,221,236,246,247],[219,220,221,236,247],[247,251],[222,227,236,246,247],[219,220,222,223,227,236,243,246,247],[222,224,236,243,246,247],[204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253],[219,225,247],[226,246,247],[216,219,227,236,247],[228,247],[229,247],[207,230,247],[231,245,247,251],[232,247],[233,247],[219,234,247],[234,235,247,249],[219,236,237,238,247],[236,238,247],[236,237,247],[239,247],[240,247],[219,241,242,247],[241,242,247],[213,227,236,243,247],[244,247],[227,245,247],[208,222,233,246,247],[213,247],[236,247,248],[247,249],[247,250],[208,213,219,221,230,236,246,247,249,251],[236,247,252],[56,247],[56,247,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307],[56,247,292,308],[56,247,308],[56,79,80,247],[56,79,247],[56,247,309],[56,137,247],[137,138,139,140,141,247],[52,53,54,55,247],[247,254],[247,280],[247,318],[247,320],[247,254,325,326,327,328,329,330,331,332,333,334,335],[247,324,325,334],[247,325,334],[247,314,324,325,334],[247,325],[213,247,324,334],[247,324,325,326,327,328,329,330,331,332,333,335],[213,247,254,316,320,321,322,336],[247,339],[247,272,275],[247,272,275,276,277],[247,274],[58,59,60,61,62,63,64,65,66,67,247],[56,71,247],[68,70,72,73,75,76,77,247],[69,73,74,247],[69,247],[71,247],[135,247],[95,135,247],[90,135,247],[90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,247],[247,273],[56,159,247],[56,153,154,155,156,157,158,247],[160,161,247],[54,56,159,247],[54,56,159,190,247],[56,190,247],[144,247],[176,177,178,247],[54,56,247],[169,247],[167,168,190,247],[54,56,82,87,142,146,147,148,152,162,163,164,165,190,247],[54,56,142,146,190,247],[56,87,142,143,145,166,170,171,190,247],[54,56,146,190,247],[80,190,247],[81,247],[56,83,84,85,190,247],[54,56,57,78,80,82,86,87,88,190,247],[54,56,87,179,190,247],[54,56,87,143,174,190,247],[54,56,87,136,170,172,190,247],[54,56,57,87,180,190,247],[54,56,57,87,89,173,175,181,183,184,185,247],[186,247],[136,151,190,247],[54,56,87,146,182,190,247],[149,151,190,247],[87,247],[190,247],[136,190,247],[56,78,247],[163,247],[150,247],[56,146,247],[56,187,190,247]],"referencedMap":[[194,1],[192,2],[191,2],[197,3],[193,1],[195,4],[196,1],[203,5],[198,2],[202,6],[199,7],[201,2],[256,8],[257,9],[258,2],[262,10],[263,10],[259,11],[260,11],[261,11],[264,12],[265,2],[266,2],[267,2],[268,2],[269,13],[270,14],[280,15],[271,2],[279,16],[200,2],[281,2],[283,17],[255,2],[284,2],[204,18],[205,18],[207,19],[208,20],[209,21],[210,22],[211,23],[212,24],[213,25],[214,26],[215,27],[216,28],[217,28],[218,29],[219,30],[220,31],[221,32],[206,33],[253,2],[222,34],[223,35],[224,36],[254,37],[225,38],[226,39],[227,40],[228,41],[229,42],[230,43],[231,44],[232,45],[233,46],[234,47],[235,48],[236,49],[238,50],[237,51],[239,52],[240,53],[241,54],[242,55],[243,56],[244,57],[245,58],[246,59],[247,60],[248,61],[249,62],[250,63],[251,64],[252,65],[285,2],[286,30],[287,2],[288,2],[289,2],[54,2],[290,2],[291,66],[308,67],[293,68],[294,68],[296,68],[297,68],[295,66],[307,69],[298,68],[299,68],[300,68],[301,68],[302,68],[303,68],[304,68],[305,68],[306,68],[182,66],[57,66],[143,70],[80,71],[309,72],[310,66],[138,73],[140,66],[137,66],[139,73],[141,2],[142,74],[52,2],[56,75],[292,66],[311,76],[312,2],[55,2],[313,2],[314,2],[315,2],[316,2],[317,77],[319,78],[318,2],[321,79],[320,2],[282,2],[338,2],[336,80],[335,81],[326,82],[327,83],[328,83],[329,82],[330,82],[331,82],[332,84],[325,85],[333,81],[334,86],[324,2],[337,87],[323,2],[339,2],[340,88],[322,2],[146,2],[53,2],[79,2],[272,2],[276,89],[278,90],[277,89],[275,91],[62,66],[58,2],[68,92],[60,66],[67,2],[59,2],[64,2],[65,2],[61,2],[66,2],[63,2],[72,93],[76,66],[78,94],[75,95],[70,96],[77,66],[69,66],[74,97],[71,2],[73,96],[107,98],[106,98],[108,98],[109,98],[97,98],[110,2],[111,2],[112,99],[113,2],[114,2],[115,98],[116,98],[117,2],[118,2],[119,98],[96,98],[95,98],[120,98],[121,2],[122,2],[123,2],[124,98],[98,98],[91,100],[100,98],[101,98],[102,98],[103,98],[104,98],[105,98],[135,101],[136,98],[125,2],[126,98],[127,98],[94,2],[128,98],[129,98],[131,98],[130,98],[99,98],[132,98],[92,2],[93,2],[133,2],[134,2],[90,98],[149,2],[274,102],[273,2],[153,103],[159,104],[158,103],[156,103],[154,103],[155,103],[157,103],[11,2],[12,2],[14,2],[13,2],[2,2],[15,2],[16,2],[17,2],[18,2],[19,2],[20,2],[21,2],[22,2],[3,2],[4,2],[26,2],[23,2],[24,2],[25,2],[27,2],[28,2],[29,2],[5,2],[30,2],[31,2],[32,2],[33,2],[6,2],[34,2],[35,2],[36,2],[37,2],[7,2],[42,2],[38,2],[39,2],[40,2],[41,2],[8,2],[46,2],[43,2],[44,2],[45,2],[47,2],[9,2],[48,2],[49,2],[50,2],[1,2],[10,2],[51,2],[190,2],[162,105],[160,106],[161,107],[144,108],[145,109],[88,2],[179,110],[176,66],[177,66],[178,111],[170,112],[169,113],[166,114],[165,115],[174,2],[172,116],[171,117],[81,118],[82,119],[86,120],[185,2],[89,121],[180,122],[175,123],[173,124],[181,125],[186,126],[187,127],[184,128],[163,108],[84,2],[85,2],[183,129],[83,2],[168,2],[152,130],[148,131],[167,132],[147,133],[87,134],[164,135],[151,136],[189,137],[150,2],[188,138]],"exportedModulesMap":[[194,1],[192,2],[191,2],[197,3],[193,1],[195,4],[196,1],[203,5],[198,2],[202,6],[199,7],[201,2],[256,8],[257,9],[258,2],[262,10],[263,10],[259,11],[260,11],[261,11],[264,12],[265,2],[266,2],[267,2],[268,2],[269,13],[270,14],[280,15],[271,2],[279,16],[200,2],[281,2],[283,17],[255,2],[284,2],[204,18],[205,18],[207,19],[208,20],[209,21],[210,22],[211,23],[212,24],[213,25],[214,26],[215,27],[216,28],[217,28],[218,29],[219,30],[220,31],[221,32],[206,33],[253,2],[222,34],[223,35],[224,36],[254,37],[225,38],[226,39],[227,40],[228,41],[229,42],[230,43],[231,44],[232,45],[233,46],[234,47],[235,48],[236,49],[238,50],[237,51],[239,52],[240,53],[241,54],[242,55],[243,56],[244,57],[245,58],[246,59],[247,60],[248,61],[249,62],[250,63],[251,64],[252,65],[285,2],[286,30],[287,2],[288,2],[289,2],[54,2],[290,2],[291,66],[308,67],[293,68],[294,68],[296,68],[297,68],[295,66],[307,69],[298,68],[299,68],[300,68],[301,68],[302,68],[303,68],[304,68],[305,68],[306,68],[182,66],[57,66],[143,70],[80,71],[309,72],[310,66],[138,73],[140,66],[137,66],[139,73],[141,2],[142,74],[52,2],[56,75],[292,66],[311,76],[312,2],[55,2],[313,2],[314,2],[315,2],[316,2],[317,77],[319,78],[318,2],[321,79],[320,2],[282,2],[338,2],[336,80],[335,81],[326,82],[327,83],[328,83],[329,82],[330,82],[331,82],[332,84],[325,85],[333,81],[334,86],[324,2],[337,87],[323,2],[339,2],[340,88],[322,2],[146,2],[53,2],[79,2],[272,2],[276,89],[278,90],[277,89],[275,91],[62,66],[58,2],[68,92],[60,66],[67,2],[59,2],[64,2],[65,2],[61,2],[66,2],[63,2],[72,93],[76,66],[78,94],[75,95],[70,96],[77,66],[69,66],[74,97],[71,2],[73,96],[107,98],[106,98],[108,98],[109,98],[97,98],[110,2],[111,2],[112,99],[113,2],[114,2],[115,98],[116,98],[117,2],[118,2],[119,98],[96,98],[95,98],[120,98],[121,2],[122,2],[123,2],[124,98],[98,98],[91,100],[100,98],[101,98],[102,98],[103,98],[104,98],[105,98],[135,101],[136,98],[125,2],[126,98],[127,98],[94,2],[128,98],[129,98],[131,98],[130,98],[99,98],[132,98],[92,2],[93,2],[133,2],[134,2],[90,98],[149,2],[274,102],[273,2],[153,103],[159,104],[158,103],[156,103],[154,103],[155,103],[157,103],[11,2],[12,2],[14,2],[13,2],[2,2],[15,2],[16,2],[17,2],[18,2],[19,2],[20,2],[21,2],[22,2],[3,2],[4,2],[26,2],[23,2],[24,2],[25,2],[27,2],[28,2],[29,2],[5,2],[30,2],[31,2],[32,2],[33,2],[6,2],[34,2],[35,2],[36,2],[37,2],[7,2],[42,2],[38,2],[39,2],[40,2],[41,2],[8,2],[46,2],[43,2],[44,2],[45,2],[47,2],[9,2],[48,2],[49,2],[50,2],[1,2],[10,2],[51,2],[190,2],[162,105],[160,106],[161,107],[144,108],[145,109],[88,2],[179,110],[176,66],[177,66],[178,111],[170,112],[169,113],[166,114],[165,115],[174,2],[172,116],[171,117],[81,118],[82,119],[86,120],[185,2],[89,121],[180,122],[175,123],[173,124],[181,125],[186,126],[187,127],[184,128],[163,108],[84,2],[85,2],[183,129],[83,2],[168,2],[152,130],[148,131],[167,132],[147,133],[87,134],[164,135],[151,136],[189,137],[150,2],[188,138]],"semanticDiagnosticsPerFile":[194,192,191,197,193,195,196,203,198,202,199,201,256,257,258,262,263,259,260,261,264,265,266,267,268,269,270,280,271,279,200,281,283,255,284,204,205,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,206,253,222,223,224,254,225,226,227,228,229,230,231,232,233,234,235,236,238,237,239,240,241,242,243,244,245,246,247,248,249,250,251,252,285,286,287,288,289,54,290,291,308,293,294,296,297,295,307,298,299,300,301,302,303,304,305,306,182,57,143,80,309,310,138,140,137,139,141,142,52,56,292,311,312,55,313,314,315,316,317,319,318,321,320,282,338,336,335,326,327,328,329,330,331,332,325,333,334,324,337,323,339,340,322,146,53,79,272,276,278,277,275,62,58,68,60,67,59,64,65,61,66,63,72,76,78,75,70,77,69,74,71,73,107,106,108,109,97,110,111,112,113,114,115,116,117,118,119,96,95,120,121,122,123,124,98,91,100,101,102,103,104,105,135,136,125,126,127,94,128,129,131,130,99,132,92,93,133,134,90,149,274,273,153,159,158,156,154,155,157,11,12,14,13,2,15,16,17,18,19,20,21,22,3,4,26,23,24,25,27,28,29,5,30,31,32,33,6,34,35,36,37,7,42,38,39,40,41,8,46,43,44,45,47,9,48,49,50,1,10,51,190,162,160,161,144,145,88,179,176,177,178,170,169,166,165,174,172,171,81,82,86,185,89,180,175,173,181,186,187,184,163,84,85,183,83,168,152,148,167,147,87,164,151,189,150,188],"affectedFilesPendingEmit":[[194,1],[192,1],[191,1],[197,1],[193,1],[195,1],[196,1],[203,1],[198,1],[202,1],[199,1],[201,1],[256,1],[257,1],[258,1],[262,1],[263,1],[259,1],[260,1],[261,1],[264,1],[265,1],[266,1],[267,1],[268,1],[269,1],[270,1],[280,1],[271,1],[279,1],[200,1],[281,1],[283,1],[255,1],[284,1],[204,1],[205,1],[207,1],[208,1],[209,1],[210,1],[211,1],[212,1],[213,1],[214,1],[215,1],[216,1],[217,1],[218,1],[219,1],[220,1],[221,1],[206,1],[253,1],[222,1],[223,1],[224,1],[254,1],[225,1],[226,1],[227,1],[228,1],[229,1],[230,1],[231,1],[232,1],[233,1],[234,1],[235,1],[236,1],[238,1],[237,1],[239,1],[240,1],[241,1],[242,1],[243,1],[244,1],[245,1],[246,1],[247,1],[248,1],[249,1],[250,1],[251,1],[252,1],[285,1],[286,1],[287,1],[288,1],[289,1],[54,1],[290,1],[291,1],[308,1],[293,1],[294,1],[296,1],[297,1],[295,1],[307,1],[298,1],[299,1],[300,1],[301,1],[302,1],[303,1],[304,1],[305,1],[306,1],[182,1],[57,1],[143,1],[80,1],[309,1],[310,1],[138,1],[140,1],[137,1],[139,1],[141,1],[142,1],[52,1],[56,1],[292,1],[311,1],[312,1],[55,1],[313,1],[314,1],[315,1],[316,1],[317,1],[319,1],[318,1],[321,1],[320,1],[282,1],[338,1],[336,1],[335,1],[326,1],[327,1],[328,1],[329,1],[330,1],[331,1],[332,1],[325,1],[333,1],[334,1],[324,1],[337,1],[323,1],[339,1],[340,1],[322,1],[146,1],[53,1],[79,1],[272,1],[276,1],[278,1],[277,1],[275,1],[62,1],[58,1],[68,1],[60,1],[67,1],[59,1],[64,1],[65,1],[61,1],[66,1],[63,1],[72,1],[76,1],[78,1],[75,1],[70,1],[77,1],[69,1],[74,1],[71,1],[73,1],[107,1],[106,1],[108,1],[109,1],[97,1],[110,1],[111,1],[112,1],[113,1],[114,1],[115,1],[116,1],[117,1],[118,1],[119,1],[96,1],[95,1],[120,1],[121,1],[122,1],[123,1],[124,1],[98,1],[91,1],[100,1],[101,1],[102,1],[103,1],[104,1],[105,1],[135,1],[136,1],[125,1],[126,1],[127,1],[94,1],[128,1],[129,1],[131,1],[130,1],[99,1],[132,1],[92,1],[93,1],[133,1],[134,1],[90,1],[149,1],[274,1],[273,1],[153,1],[159,1],[158,1],[156,1],[154,1],[155,1],[157,1],[2,1],[3,1],[4,1],[5,1],[6,1],[7,1],[8,1],[9,1],[10,1],[190,1],[162,1],[160,1],[161,1],[144,1],[145,1],[88,1],[179,1],[176,1],[177,1],[178,1],[170,1],[169,1],[166,1],[165,1],[174,1],[172,1],[171,1],[81,1],[82,1],[86,1],[185,1],[89,1],[180,1],[175,1],[173,1],[181,1],[186,1],[187,1],[184,1],[163,1],[84,1],[85,1],[183,1],[83,1],[168,1],[152,1],[148,1],[167,1],[147,1],[87,1],[164,1],[151,1],[189,1],[150,1],[188,1]]},"version":"4.6.4"}
\ No newline at end of file

From 8ee17e85cc624ceb383ee1b0c69279afb6f75f70 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Wed, 15 Jun 2022 09:58:00 +0800
Subject: [PATCH 49/64] fix error when the trade_store in localStorage in not
 existd yet

---
 packages/core/src/Stores/contract-trade-store.js | 2 +-
 packages/core/src/Stores/portfolio.js            | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/Stores/contract-trade-store.js b/packages/core/src/Stores/contract-trade-store.js
index 7cf3dff10a12..e70aa1f221bf 100644
--- a/packages/core/src/Stores/contract-trade-store.js
+++ b/packages/core/src/Stores/contract-trade-store.js
@@ -56,7 +56,7 @@ export default class ContractTradeStore extends BaseStore {
     }
 
     applicable_contracts = () => {
-        const { symbol: underlying, contract_type: trade_type } = JSON.parse(localStorage.getItem('trade_store'));
+        const { symbol: underlying, contract_type: trade_type } = JSON.parse(localStorage.getItem('trade_store')) || {};
 
         if (!trade_type || !underlying) {
             return [];
diff --git a/packages/core/src/Stores/portfolio.js b/packages/core/src/Stores/portfolio.js
index c45449f254b0..a2c9ff7cf2fa 100644
--- a/packages/core/src/Stores/portfolio.js
+++ b/packages/core/src/Stores/portfolio.js
@@ -538,7 +538,7 @@ export default class PortfolioStore extends BaseStore {
 
     @action.bound
     updateBarrierColor(is_dark_mode) {
-        const { main_barrier } = JSON.parse(localStorage.getItem('trade_store'));
+        const { main_barrier } = JSON.parse(localStorage.getItem('trade_store')) || {};
         this.main_barrier = main_barrier;
         if (this.main_barrier) {
             this.main_barrier.updateBarrierColor(is_dark_mode);
@@ -559,7 +559,7 @@ export default class PortfolioStore extends BaseStore {
 
     @computed
     get is_multiplier() {
-        const { contract_type } = JSON.parse(localStorage.getItem('trade_store'));
+        const { contract_type } = JSON.parse(localStorage.getItem('trade_store')) || {};
         this.contract_type = contract_type;
         return this.contract_type === 'multiplier';
     }

From 8baec779aff47b51071d8e29c200f570bec494c8 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Wed, 15 Jun 2022 15:57:56 +0800
Subject: [PATCH 50/64] clean the code

---
 packages/core/src/Stores/contract-store.js                  | 6 +++---
 packages/core/src/Stores/portfolio.js                       | 6 +++---
 packages/reports/build/config.js                            | 1 -
 .../Elements/PositionsDrawer/positions-drawer.jsx           | 1 -
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/Stores/contract-store.js b/packages/core/src/Stores/contract-store.js
index 968fda449f4c..541dcefd66e4 100644
--- a/packages/core/src/Stores/contract-store.js
+++ b/packages/core/src/Stores/contract-store.js
@@ -71,8 +71,8 @@ export default class ContractStore extends BaseStore {
         this.contract_info = contract_info;
         this.end_time = getEndTime(this.contract_info);
 
-        // TODO: don't  the barriers & markers if they are not changed
-        this.updateBarriersArray(contract_info, this.root_store?.ui.is_dark_mode_on);
+        // TODO: don't update the barriers & markers if they are not changed
+        this.updateBarriersArray(contract_info, this.root_store.ui.is_dark_mode_on);
         this.markers_array = createChartMarkers(this.contract_info);
         this.marker = calculate_marker(this.contract_info);
 
@@ -143,7 +143,7 @@ export default class ContractStore extends BaseStore {
             }
             if (
                 contract_info.contract_id &&
-                contract_info.contract_id === this.root_store?.contract_replay.contract_id
+                contract_info.contract_id === this.root_store.contract_replay.contract_id
             ) {
                 setLimitOrderBarriers({
                     barriers: this.barriers_array,
diff --git a/packages/core/src/Stores/portfolio.js b/packages/core/src/Stores/portfolio.js
index a2c9ff7cf2fa..2683426b699a 100644
--- a/packages/core/src/Stores/portfolio.js
+++ b/packages/core/src/Stores/portfolio.js
@@ -435,13 +435,13 @@ export default class PortfolioStore extends BaseStore {
         this.onLogout(this.logoutListener);
         if (this.positions.length === 0 && !this.has_subscribed_to_poc_and_transaction) {
             // TODO: Optimise the way is_logged_in changes are detected for "logging in" and "already logged on" states
-            if (this.root_store?.client.is_logged_in) {
+            if (this.root_store.client.is_logged_in) {
                 this.initializePortfolio();
             } else {
                 reaction(
-                    () => this.root_store?.client.is_logged_in,
+                    () => this.root_store.client.is_logged_in,
                     () => {
-                        if (this.root_store?.client.is_logged_in) {
+                        if (this.root_store.client.is_logged_in) {
                             this.initializePortfolio();
                         }
                     }
diff --git a/packages/reports/build/config.js b/packages/reports/build/config.js
index b224aab06cec..86801396ab25 100644
--- a/packages/reports/build/config.js
+++ b/packages/reports/build/config.js
@@ -1,7 +1,6 @@
 const path = require('path');
 const stylelintFormatter = require('stylelint-formatter-pretty');
 const { IS_RELEASE } = require('./constants');
-// const { transformContentUrlBase } = require('./helpers');
 
 const generateSWConfig = () => ({
     importWorkboxFrom: 'local',
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
index 2d5c1935ed0c..5c45a6a565da 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
@@ -145,7 +145,6 @@ PositionsDrawer.propTypes = {
     onMount: PropTypes.func,
     symbol: PropTypes.string,
     toggleDrawer: PropTypes.func,
-
     currency: PropTypes.string,
     server_time: PropTypes.object,
     addToast: PropTypes.func,

From 2e8e335b7844f0cf6a81a8b5d978f0ed80430473 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Wed, 15 Jun 2022 16:17:50 +0800
Subject: [PATCH 51/64] fix is_multiplier error issue using it from portfolio
 store

---
 packages/core/src/Stores/contract-trade-store.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/Stores/contract-trade-store.js b/packages/core/src/Stores/contract-trade-store.js
index e70aa1f221bf..7d97c491a46b 100644
--- a/packages/core/src/Stores/contract-trade-store.js
+++ b/packages/core/src/Stores/contract-trade-store.js
@@ -133,7 +133,7 @@ export default class ContractTradeStore extends BaseStore {
         this.contracts.push(contract);
         this.contracts_map[contract_id] = contract;
 
-        if (is_tick_contract && !this.root_store.modules.trade.is_multiplier && this.granularity !== 0 && isDesktop()) {
+        if (is_tick_contract && !this.root_store.portfolio.is_multiplier && this.granularity !== 0 && isDesktop()) {
             this.root_store.notifications.addNotificationMessage(switch_to_tick_chart);
         }
     }

From 310f3fbc970ab41ac1c3175da4b16fe56e70ed05 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Wed, 15 Jun 2022 17:05:29 +0800
Subject: [PATCH 52/64] add props type to open-positions and position-drawer

---
 packages/reports/src/Containers/open-positions.jsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/reports/src/Containers/open-positions.jsx b/packages/reports/src/Containers/open-positions.jsx
index 486dda64e5d6..bf9748fc7b7a 100644
--- a/packages/reports/src/Containers/open-positions.jsx
+++ b/packages/reports/src/Containers/open-positions.jsx
@@ -445,6 +445,16 @@ OpenPositions.propTypes = {
     onClickSell: PropTypes.func,
     onMount: PropTypes.func,
     server_time: PropTypes.object,
+    addToast: PropTypes.func,
+    current_focus: PropTypes.string,
+    onClickRemove: PropTypes.func,
+    getContractById: PropTypes.func,
+    is_mobile: PropTypes.bool,
+    removeToast: PropTypes.func,
+    setCurrentFocus: PropTypes.func,
+    should_show_cancellation_warning: PropTypes.bool,
+    toggleCancellationWarning: PropTypes.func,
+    toggleUnsupportedContractModal: PropTypes.func,
 };
 
 export default connect(({ client, common, ui, portfolio, contract_trade }) => ({

From bdb15dc0b63de81bbee059ee17ea6aea845a5e04 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Wed, 15 Jun 2022 17:13:58 +0800
Subject: [PATCH 53/64] change portfolio file name

---
 packages/core/src/Stores/index.js                             | 2 +-
 packages/core/src/Stores/{portfolio.js => portfolio-store.js} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/core/src/Stores/{portfolio.js => portfolio-store.js} (100%)

diff --git a/packages/core/src/Stores/index.js b/packages/core/src/Stores/index.js
index d10c01f10fae..8f627e04468f 100644
--- a/packages/core/src/Stores/index.js
+++ b/packages/core/src/Stores/index.js
@@ -8,7 +8,7 @@ import MenuStore from './menu-store';
 import NotificationStore from './notification-store';
 import UIStore from './ui-store';
 import ActiveSymbolsStore from './active-symbols-store';
-import PortfolioStore from './portfolio';
+import PortfolioStore from './portfolio-store';
 import ContractReplayStore from './contract-replay-store';
 import ContractTradeStore from './contract-trade-store';
 import { ChartBarrierStore } from './chart-barrier-store';
diff --git a/packages/core/src/Stores/portfolio.js b/packages/core/src/Stores/portfolio-store.js
similarity index 100%
rename from packages/core/src/Stores/portfolio.js
rename to packages/core/src/Stores/portfolio-store.js

From 1cce52822b3a5a907cabcad56e52a72b83bacc6e Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Thu, 16 Jun 2022 13:01:53 +0800
Subject: [PATCH 54/64] add action for updating contract_type observable in
 portfolio store

---
 packages/core/src/Stores/portfolio-store.js               | 7 +++++--
 packages/reports/src/Constants/routes-config.js           | 4 ++--
 packages/trader/src/Stores/Modules/Trading/trade-store.js | 1 +
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/Stores/portfolio-store.js b/packages/core/src/Stores/portfolio-store.js
index 2683426b699a..2c86aa810fa0 100644
--- a/packages/core/src/Stores/portfolio-store.js
+++ b/packages/core/src/Stores/portfolio-store.js
@@ -557,10 +557,13 @@ export default class PortfolioStore extends BaseStore {
         });
     }
 
+    @action.bound
+    setContractType(contract_type) {
+        this.contract_type = contract_type;
+    }
+
     @computed
     get is_multiplier() {
-        const { contract_type } = JSON.parse(localStorage.getItem('trade_store')) || {};
-        this.contract_type = contract_type;
         return this.contract_type === 'multiplier';
     }
 }
diff --git a/packages/reports/src/Constants/routes-config.js b/packages/reports/src/Constants/routes-config.js
index aeb10a966fa4..d767b7b05c2d 100644
--- a/packages/reports/src/Constants/routes-config.js
+++ b/packages/reports/src/Constants/routes-config.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import { routes, makeLazyLoader } from '@deriv/shared';
+import { routes, makeLazyLoader, moduleLoader } from '@deriv/shared';
 import { Loading } from '@deriv/components';
 import { localize } from '@deriv/translations';
 
 const Page404 = React.lazy(() => import(/* webpackChunkName: "404" */ 'Modules/Page404'));
 
 const lazyLoadReportComponent = makeLazyLoader(
-    () => import(/* webpackChunkName: "reports-routes" */ 'Containers'),
+    () => moduleLoader(() => import(/* webpackChunkName: "reports-routes" */ 'Containers')),
     () => <Loading />
 );
 
diff --git a/packages/trader/src/Stores/Modules/Trading/trade-store.js b/packages/trader/src/Stores/Modules/Trading/trade-store.js
index e2b303f45e49..fca6e69ca1dd 100644
--- a/packages/trader/src/Stores/Modules/Trading/trade-store.js
+++ b/packages/trader/src/Stores/Modules/Trading/trade-store.js
@@ -218,6 +218,7 @@ export default class TradeStore extends BaseStore {
         reaction(
             () => [this.contract_type],
             () => {
+                this.root_store.portfolio.setContractType(this.contract_type);
                 if (this.contract_type === 'multiplier') {
                     // when switching back to Multiplier contract, re-apply Stop loss / Take profit validation rules
                     Object.assign(this.validation_rules, getMultiplierValidationRules());

From c18ef5dcedcd957225f8a80a1a59ef14d8a4a350 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Thu, 16 Jun 2022 14:17:53 +0800
Subject: [PATCH 55/64] update with latest master


From c10232fdb6cc26e26aae473d75cbe9991e05cd94 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Thu, 16 Jun 2022 14:40:52 +0800
Subject: [PATCH 56/64] remove comments

---
 packages/core/src/App/Constants/routes-config.js   | 2 --
 packages/reports/src/Containers/open-positions.jsx | 1 -
 2 files changed, 3 deletions(-)

diff --git a/packages/core/src/App/Constants/routes-config.js b/packages/core/src/App/Constants/routes-config.js
index e8703a673800..42e1fd902bb5 100644
--- a/packages/core/src/App/Constants/routes-config.js
+++ b/packages/core/src/App/Constants/routes-config.js
@@ -17,10 +17,8 @@ const Trader = React.lazy(() =>
 );
 
 const Reports = React.lazy(() => {
-    // moduleLoader(() => {
     // eslint-disable-next-line import/no-unresolved
     return import(/* webpackChunkName: "reports" */ '@deriv/reports');
-    // })
 });
 
 const CFD = React.lazy(() =>
diff --git a/packages/reports/src/Containers/open-positions.jsx b/packages/reports/src/Containers/open-positions.jsx
index bf9748fc7b7a..1d109e55e0a7 100644
--- a/packages/reports/src/Containers/open-positions.jsx
+++ b/packages/reports/src/Containers/open-positions.jsx
@@ -319,7 +319,6 @@ const OpenPositions = ({
          * For mobile, we show portfolio stepper in header even for reports pages.
          * `onMount` in portfolio store will be invoked from portfolio stepper component in `trade-header-extensions.jsx`
          */
-        // if (!isMobile()) onMount();
 
         onMount();
         checkForMultiplierContract();

From 2ca9a5c16378dd3287e5b87b46480d4d132cad4d Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Mon, 20 Jun 2022 12:25:57 +0800
Subject: [PATCH 57/64] add shared to translation scripts/add deriv/reports to
 the build

---
 package.json                                    | 4 ++--
 packages/translations/scripts/extract-string.js | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 5cee846aebb0..9a91cef6e625 100644
--- a/package.json
+++ b/package.json
@@ -62,10 +62,10 @@
         "build": "f () { lerna exec --scope=@deriv/${1:-'*'} -- npm run build $2 ;}; f",
         "build:publish": "f () { lerna exec --scope=@deriv/${1:-'*'} -- npm run build:publish $2 ;}; f",
         "build:local": "f () { lerna exec --scope @deriv/trader --scope @deriv/bot-web-ui --parallel -- npm run build $1 ;}; f",
-        "build:travis": "lerna exec --scope @deriv/shared --scope @deriv/components --scope @deriv/translations  --scope @deriv/cashier --scope @deriv/account --scope @deriv/p2p --scope @deriv/cfd -- npm run build:travis",
+        "build:travis": "lerna exec --scope @deriv/shared --scope @deriv/components --scope @deriv/translations  --scope @deriv/cashier --scope @deriv/account --scope @deriv/p2p --scope @deriv/cfd --scope @deriv/reports -- npm run build:travis",
         "build:prod": "export NODE_ENV=staging && npm run build && export NODE_ENV=",
         "build:storybook": "cd packages/components && build-storybook --output-dir .out",
-        "build:gh-pages": "f () { lerna exec --scope @deriv/components --scope @deriv/p2p -- npm run build && lerna exec --scope @deriv/cashier --scope @deriv/account --scope @deriv/cfd -- npm run build $1 && npm run build:local $1 ;}; f",
+        "build:gh-pages": "f () { lerna exec --scope @deriv/components --scope @deriv/p2p -- npm run build && lerna exec --scope @deriv/cashier --scope @deriv/account --scope @deriv/cfd --scope @deriv/reports -- npm run build $1 && npm run build:local $1 ;}; f",
         "clean": "echo \"Remove $(git rev-parse --show-toplevel)/node_modules\" && lerna clean && rm -rf \"$(git rev-parse --show-toplevel)/node_modules\"",
         "deploy": "f () { npm run build:travis && npm run build:local && lerna exec --scope @deriv/core -- npm run deploy $@ ;}; f",
         "deploy:clean": "f () { npm run build:travis && npm run build:local && lerna exec --scope @deriv/core -- npm run deploy:clean $@ ;}; f",
diff --git a/packages/translations/scripts/extract-string.js b/packages/translations/scripts/extract-string.js
index a1d1a20bddb1..11afefde3ac0 100644
--- a/packages/translations/scripts/extract-string.js
+++ b/packages/translations/scripts/extract-string.js
@@ -44,6 +44,7 @@ const getTranslatableFiles = () => {
         'trader',
         'bot-skeleton',
         'reports',
+        'shared',
     ];
     const globs = ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx', '**/xml/*.xml'];
     const file_paths = [];

From dee7c9232fa9a4a822d8426d807b349e1f17ed4b Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Mon, 20 Jun 2022 14:06:31 +0800
Subject: [PATCH 58/64] remove redundant comment in contract-replay.jsx

---
 .../trader/src/Modules/Contract/Containers/contract-replay.jsx   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx b/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx
index 8855fa6838c6..f006d6b9a485 100644
--- a/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx
+++ b/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx
@@ -295,7 +295,6 @@ Chart.propTypes = {
 
 const ReplayChart = connect(({ modules, ui, common, contract_replay }) => {
     const trade = modules.trade;
-    // const contract_replay = modules.contract_replay;
     const contract_store = contract_replay.contract_store;
     const contract_config = contract_store.contract_config;
     const allow_scroll_to_epoch =

From 1c915854f379b9a02aca61c96a66b5fb51455d5d Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Tue, 28 Jun 2022 15:06:58 +0430
Subject: [PATCH 59/64] remove connectionWithContractUpdate from reports

---
 .../positions-drawer-card.jsx                 |  2 -
 packages/reports/src/Helpers/multiplier.js    | 40 -------------------
 2 files changed, 42 deletions(-)
 delete mode 100644 packages/reports/src/Helpers/multiplier.js

diff --git a/packages/reports/src/Components/Elements/PositionsDrawerCard/positions-drawer-card.jsx b/packages/reports/src/Components/Elements/PositionsDrawerCard/positions-drawer-card.jsx
index 67bbabaea610..8e9a4dd23eb7 100644
--- a/packages/reports/src/Components/Elements/PositionsDrawerCard/positions-drawer-card.jsx
+++ b/packages/reports/src/Components/Elements/PositionsDrawerCard/positions-drawer-card.jsx
@@ -11,7 +11,6 @@ import {
     getContractTypeDisplay,
     getEndTime,
 } from '@deriv/shared';
-import { connectWithContractUpdate } from '../../../Helpers/multiplier';
 
 const PositionsDrawerCard = ({
     addToast,
@@ -72,7 +71,6 @@ const PositionsDrawerCard = ({
     const card_body = (
         <ContractCard.Body
             addToast={addToast}
-            connectWithContractUpdate={connectWithContractUpdate}
             contract_info={contract_info}
             contract_update={contract_update}
             currency={currency}
diff --git a/packages/reports/src/Helpers/multiplier.js b/packages/reports/src/Helpers/multiplier.js
deleted file mode 100644
index 21b2a8269991..000000000000
--- a/packages/reports/src/Helpers/multiplier.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { connect } from 'Stores/connect';
-
-export const onToggleCancellation = ({ has_cancellation, onChangeMultiple }) => {
-    // e.target.checked is not reliable, we have to toggle its previous value
-    const new_val = !has_cancellation;
-    onChangeMultiple({
-        has_cancellation: new_val,
-        ...(!new_val
-            ? {
-                  // reset deal cancellation price
-                  cancellation_price: undefined,
-              }
-            : {
-                  // unchecked Stop loss
-                  has_stop_loss: false,
-                  has_take_profit: false,
-              }),
-    });
-};
-
-export const onChangeCancellationDuration = ({ event, onChangeMultiple }) => {
-    const { value } = event.target;
-    onChangeMultiple({
-        has_cancellation: true,
-        has_take_profit: false,
-        has_stop_loss: false,
-        cancellation_duration: value,
-    });
-};
-
-// eslint-disable-next-line no-empty-pattern
-export const connectWithContractUpdate = connect(({}, { contract = {} }) => {
-    return {
-        validation_errors: contract.validation_errors,
-        contract_update_take_profit: contract.contract_update_take_profit,
-        contract_update_stop_loss: contract.contract_update_stop_loss,
-        has_contract_update_take_profit: contract.has_contract_update_take_profit,
-        has_contract_update_stop_loss: contract.has_contract_update_stop_loss,
-    };
-});

From 3fcd64d94e81038f980dad5515e0083a3b502572 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Tue, 28 Jun 2022 18:03:29 +0430
Subject: [PATCH 60/64] fix openPositions default tab issue

---
 packages/trader/src/Stores/Modules/Trading/trade-store.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/trader/src/Stores/Modules/Trading/trade-store.js b/packages/trader/src/Stores/Modules/Trading/trade-store.js
index fca6e69ca1dd..4ff54091c0b5 100644
--- a/packages/trader/src/Stores/Modules/Trading/trade-store.js
+++ b/packages/trader/src/Stores/Modules/Trading/trade-store.js
@@ -374,6 +374,7 @@ export default class TradeStore extends BaseStore {
             });
         }
         this.root_store.common.setSelectedContractType(this.contract_type);
+        this.root_store.portfolio.setContractType(this.contract_type);
     }
 
     @action.bound

From c9a2c1df253429275c05c0a31e56dfaafe4a2ebc Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Wed, 29 Jun 2022 16:57:41 +0430
Subject: [PATCH 61/64] fix to not remove closed contracts when navigating from
 reporst to trader

---
 packages/core/src/Stores/ui-store.js                 |  8 ++++++++
 packages/reports/src/Containers/reports.jsx          |  4 +++-
 packages/trader/src/App/Containers/Routes/routes.jsx | 10 +++++++++-
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/Stores/ui-store.js b/packages/core/src/Stores/ui-store.js
index 16110ec1e3f3..3c54c122dda6 100644
--- a/packages/core/src/Stores/ui-store.js
+++ b/packages/core/src/Stores/ui-store.js
@@ -16,6 +16,9 @@ export default class UIStore extends BaseStore {
     // Take profit, Stop loss & Deal cancellation checkbox
     @observable should_show_cancellation_warning = true;
 
+    // Check previous url to don't unmount portfolio when navigate from reports to trader
+    @observable is_reports_url = false;
+
     // Extensions
     @observable footer_extensions = [];
     @observable header_extension = undefined;
@@ -193,6 +196,11 @@ export default class UIStore extends BaseStore {
         }
     };
 
+    @action.bound
+    setIsReportsUrl(is_reports_url) {
+        this.is_reports_url = is_reports_url;
+    }
+
     @action.bound
     init(notification_messages) {
         this.notification_messages_ui = notification_messages;
diff --git a/packages/reports/src/Containers/reports.jsx b/packages/reports/src/Containers/reports.jsx
index 33b0e8a509a2..00f47b3f4c78 100644
--- a/packages/reports/src/Containers/reports.jsx
+++ b/packages/reports/src/Containers/reports.jsx
@@ -29,10 +29,11 @@ const Reports = ({
     setVisibilityRealityCheck,
     tab_index,
     toggleReports,
+    setIsReportsUrl,
 }) => {
     React.useEffect(() => {
         toggleReports(true);
-
+        setIsReportsUrl(true);
         return () => {
             setVisibilityRealityCheck(1);
             toggleReports(false);
@@ -131,4 +132,5 @@ export default connect(({ client, common, ui }) => ({
     setTabIndex: ui.setReportsTabIndex,
     tab_index: ui.reports_route_tab_index,
     toggleReports: ui.toggleReports,
+    setIsReportsUrl: ui.setIsReportsUrl,
 }))(withRouter(Reports));
diff --git a/packages/trader/src/App/Containers/Routes/routes.jsx b/packages/trader/src/App/Containers/Routes/routes.jsx
index 4512ca0c4c19..645340308c89 100644
--- a/packages/trader/src/App/Containers/Routes/routes.jsx
+++ b/packages/trader/src/App/Containers/Routes/routes.jsx
@@ -46,6 +46,8 @@ const Routes = ({
     passthrough,
     setPromptHandler,
     setTradeMountingPolicy,
+    is_reports_url,
+    setIsReportsUrl,
 }) => {
     React.useEffect(() => {
         if (setPromptHandler) {
@@ -95,7 +97,11 @@ const Routes = ({
     }, []);
 
     React.useEffect(() => {
-        return () => onUnmountPortfolio();
+        if (is_reports_url) {
+            setIsReportsUrl(false);
+            return;
+        }
+        onUnmountPortfolio();
     }, [onUnmountPortfolio]);
 
     if (has_error) return <Error {...error} />;
@@ -125,5 +131,7 @@ export default withRouter(
         is_logging_in: client.is_logging_in,
         setPromptHandler: ui.setPromptHandler,
         setTradeMountingPolicy: modules.trade.setSkipPrePostLifecycle,
+        is_reports_url: ui.is_reports_url,
+        setIsReportsUrl: ui.setIsReportsUrl,
     }))(Routes)
 );

From bdc145e34e765fdd7e029ef6503a989607a0bddb Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Tue, 5 Jul 2022 11:46:28 +0430
Subject: [PATCH 62/64] prevent unmounting the portfolio component when
 redirecting to reports packge

---
 packages/core/src/Stores/portfolio-store.js          | 11 +++++++----
 packages/core/src/Stores/ui-store.js                 |  8 --------
 packages/reports/src/Containers/reports.jsx          |  3 ---
 packages/trader/src/App/Containers/Routes/routes.jsx | 10 +---------
 4 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/packages/core/src/Stores/portfolio-store.js b/packages/core/src/Stores/portfolio-store.js
index 2c86aa810fa0..a6d1abb0ca95 100644
--- a/packages/core/src/Stores/portfolio-store.js
+++ b/packages/core/src/Stores/portfolio-store.js
@@ -452,10 +452,13 @@ export default class PortfolioStore extends BaseStore {
 
     @action.bound
     onUnmount() {
-        this.disposePreSwitchAccount();
-        this.disposeSwitchAccount();
-        this.disposeLogout();
-        this.clearTable();
+        const is_reports_path = /^\/reports/.test(window.location.pathname);
+        if (!is_reports_path) {
+            this.clearTable();
+            this.disposePreSwitchAccount();
+            this.disposeSwitchAccount();
+            this.disposeLogout();
+        }
     }
 
     getPositionIndexById(contract_id) {
diff --git a/packages/core/src/Stores/ui-store.js b/packages/core/src/Stores/ui-store.js
index 3c54c122dda6..16110ec1e3f3 100644
--- a/packages/core/src/Stores/ui-store.js
+++ b/packages/core/src/Stores/ui-store.js
@@ -16,9 +16,6 @@ export default class UIStore extends BaseStore {
     // Take profit, Stop loss & Deal cancellation checkbox
     @observable should_show_cancellation_warning = true;
 
-    // Check previous url to don't unmount portfolio when navigate from reports to trader
-    @observable is_reports_url = false;
-
     // Extensions
     @observable footer_extensions = [];
     @observable header_extension = undefined;
@@ -196,11 +193,6 @@ export default class UIStore extends BaseStore {
         }
     };
 
-    @action.bound
-    setIsReportsUrl(is_reports_url) {
-        this.is_reports_url = is_reports_url;
-    }
-
     @action.bound
     init(notification_messages) {
         this.notification_messages_ui = notification_messages;
diff --git a/packages/reports/src/Containers/reports.jsx b/packages/reports/src/Containers/reports.jsx
index 00f47b3f4c78..6d55e1a02d8a 100644
--- a/packages/reports/src/Containers/reports.jsx
+++ b/packages/reports/src/Containers/reports.jsx
@@ -29,11 +29,9 @@ const Reports = ({
     setVisibilityRealityCheck,
     tab_index,
     toggleReports,
-    setIsReportsUrl,
 }) => {
     React.useEffect(() => {
         toggleReports(true);
-        setIsReportsUrl(true);
         return () => {
             setVisibilityRealityCheck(1);
             toggleReports(false);
@@ -132,5 +130,4 @@ export default connect(({ client, common, ui }) => ({
     setTabIndex: ui.setReportsTabIndex,
     tab_index: ui.reports_route_tab_index,
     toggleReports: ui.toggleReports,
-    setIsReportsUrl: ui.setIsReportsUrl,
 }))(withRouter(Reports));
diff --git a/packages/trader/src/App/Containers/Routes/routes.jsx b/packages/trader/src/App/Containers/Routes/routes.jsx
index 645340308c89..4512ca0c4c19 100644
--- a/packages/trader/src/App/Containers/Routes/routes.jsx
+++ b/packages/trader/src/App/Containers/Routes/routes.jsx
@@ -46,8 +46,6 @@ const Routes = ({
     passthrough,
     setPromptHandler,
     setTradeMountingPolicy,
-    is_reports_url,
-    setIsReportsUrl,
 }) => {
     React.useEffect(() => {
         if (setPromptHandler) {
@@ -97,11 +95,7 @@ const Routes = ({
     }, []);
 
     React.useEffect(() => {
-        if (is_reports_url) {
-            setIsReportsUrl(false);
-            return;
-        }
-        onUnmountPortfolio();
+        return () => onUnmountPortfolio();
     }, [onUnmountPortfolio]);
 
     if (has_error) return <Error {...error} />;
@@ -131,7 +125,5 @@ export default withRouter(
         is_logging_in: client.is_logging_in,
         setPromptHandler: ui.setPromptHandler,
         setTradeMountingPolicy: modules.trade.setSkipPrePostLifecycle,
-        is_reports_url: ui.is_reports_url,
-        setIsReportsUrl: ui.setIsReportsUrl,
     }))(Routes)
 );

From cac8faf113c234a2671bcc317ea3094d489863a5 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Wed, 6 Jul 2022 12:33:05 +0430
Subject: [PATCH 63/64] fix performance issue on profit_loss input

---
 .../contract-card-items/contract-update-form.jsx   | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-update-form.jsx b/packages/components/src/components/contract-card/contract-card-items/contract-update-form.jsx
index 3af32aa3a712..6bd9097f114a 100644
--- a/packages/components/src/components/contract-card/contract-card-items/contract-update-form.jsx
+++ b/packages/components/src/components/contract-card/contract-card-items/contract-update-form.jsx
@@ -44,6 +44,11 @@ const ContractUpdateForm = props => {
         validation_errors,
     } = contract;
 
+    const [contract_profit_or_loss, setContractProfitOrLoss] = React.useState({
+        contract_update_take_profit,
+        contract_update_stop_loss,
+    });
+
     const { buy_price, currency, is_valid_to_cancel, is_sold } = contract_info;
     const { stop_loss, take_profit } = getLimitOrderAmount(contract_info.limit_order);
     const { contract_update_stop_loss: stop_loss_error, contract_update_take_profit: take_profit_error } =
@@ -77,7 +82,10 @@ const ContractUpdateForm = props => {
 
     const onChange = e => {
         const { name, value } = e.target;
-
+        setContractProfitOrLoss({
+            ...contract_profit_or_loss,
+            [name]: value,
+        });
         if (typeof contract.onChange === 'function') {
             contract.onChange({
                 name,
@@ -107,7 +115,7 @@ const ContractUpdateForm = props => {
             name='contract_update_take_profit'
             onChange={onChange}
             error_message_alignment={error_message_alignment || 'right'}
-            value={contract_update_take_profit}
+            value={contract_profit_or_loss.contract_update_take_profit}
             is_disabled={!!is_valid_to_cancel}
             setCurrentFocus={setCurrentFocus}
         />
@@ -130,7 +138,7 @@ const ContractUpdateForm = props => {
             name='contract_update_stop_loss'
             onChange={onChange}
             error_message_alignment={error_message_alignment || 'right'}
-            value={contract_update_stop_loss}
+            value={contract_profit_or_loss.contract_update_stop_loss}
             is_disabled={!!is_valid_to_cancel}
             setCurrentFocus={setCurrentFocus}
         />

From 5fc26f2292a91d3f612c4bbaadf53e30ae29f366 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Wed, 6 Jul 2022 13:31:40 +0430
Subject: [PATCH 64/64] fix circular dependancy

---
 packages/core/src/App/app.jsx                 |  3 +-
 packages/shared/package.json                  |  1 +
 .../src/utils/config/platform-config.js       | 28 +++++++++++++++++++
 packages/translations/package.json            |  1 -
 packages/translations/src/i18next/i18next.js  | 28 +------------------
 5 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/packages/core/src/App/app.jsx b/packages/core/src/App/app.jsx
index 6d667a64761c..3dfc9d4b0375 100644
--- a/packages/core/src/App/app.jsx
+++ b/packages/core/src/App/app.jsx
@@ -14,8 +14,9 @@ import {
     initFormErrorMessages,
     mobileOSDetect,
     setSharedCFDText,
+    useOnLoadTranslation,
 } from '@deriv/shared';
-import { initializeTranslations, getLanguage, useOnLoadTranslation } from '@deriv/translations';
+import { initializeTranslations, getLanguage } from '@deriv/translations';
 import { CashierStore } from '@deriv/cashier';
 import WS from 'Services/ws-methods';
 import { MobxContentProvider } from 'Stores/connect';
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 1687529dc58f..5150d1cd25f8 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -43,6 +43,7 @@
         "@types/react-loadable": "^5.5.6",
         "canvas-toBlob": "^1.0.0",
         "extend": "^3.0.2",
+        "i18next": "^20.3.2",
         "js-cookie": "^2.2.1",
         "mobx": "^5.15.7",
         "moment": "^2.29.2",
diff --git a/packages/shared/src/utils/config/platform-config.js b/packages/shared/src/utils/config/platform-config.js
index b015c47c24f6..df52aab5e352 100644
--- a/packages/shared/src/utils/config/platform-config.js
+++ b/packages/shared/src/utils/config/platform-config.js
@@ -1,3 +1,7 @@
+import i18n from 'i18next';
+import React from 'react';
+import { getInitialLanguage } from '@deriv/translations';
+import { initMoment } from '../date';
 import { routes } from '../routes';
 
 // TODO: This should be moved to PlatformContext
@@ -17,3 +21,27 @@ export const platforms = {
         url: '',
     },
 };
+
+export const useOnLoadTranslation = () => {
+    const [is_loaded, setLoaded] = React.useState(false);
+
+    React.useEffect(() => {
+        if (!i18n.language) {
+            i18n.language = getInitialLanguage();
+        }
+        const is_english = i18n.language === 'EN';
+
+        if (is_english) {
+            setLoaded(true);
+        } else {
+            i18n.store.on('added', () => {
+                setLoaded(true);
+            });
+        }
+
+        return () => i18n.store.off('added');
+    }, []);
+
+    initMoment(i18n.language);
+    return [is_loaded, setLoaded];
+};
diff --git a/packages/translations/package.json b/packages/translations/package.json
index b7f683dffb7e..7c24a3ecce19 100644
--- a/packages/translations/package.json
+++ b/packages/translations/package.json
@@ -31,7 +31,6 @@
     "url": "https://github.com/binary-com/deriv-app/issues"
   },
   "dependencies": {
-    "@deriv/shared": "^1.0.0",
     "commander": "^3.0.2",
     "crc-32": "^1.2.0",
     "glob": "^7.1.5",
diff --git a/packages/translations/src/i18next/i18next.js b/packages/translations/src/i18next/i18next.js
index cd16c119ccfd..3d5fe70815cc 100644
--- a/packages/translations/src/i18next/i18next.js
+++ b/packages/translations/src/i18next/i18next.js
@@ -1,8 +1,6 @@
-import React from 'react';
 import { str as crc32 } from 'crc-32';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-import { initMoment } from '@deriv/shared';
 import { isProduction } from '../../../shared/src/utils/config/config';
 import withI18n from '../components';
 
@@ -57,7 +55,7 @@ const isLanguageAvailable = lang => {
 
 export const getAllLanguages = () => ALL_LANGUAGES;
 
-const getInitialLanguage = () => {
+export const getInitialLanguage = () => {
     const url_params = new URLSearchParams(window.location.search);
     const query_lang = url_params.get('lang');
     const local_storage_language = localStorage.getItem(LANGUAGE_KEY);
@@ -149,27 +147,3 @@ const loadIncontextTranslation = () => {
         document.head.appendChild(jipt);
     }
 };
-
-export const useOnLoadTranslation = () => {
-    const [is_loaded, setLoaded] = React.useState(false);
-
-    React.useEffect(() => {
-        if (!i18n.language) {
-            i18n.language = getInitialLanguage();
-        }
-        const is_english = i18n.language === 'EN';
-
-        if (is_english) {
-            setLoaded(true);
-        } else {
-            i18n.store.on('added', () => {
-                setLoaded(true);
-            });
-        }
-
-        return () => i18n.store.off('added');
-    }, []);
-
-    initMoment(i18n.language);
-    return [is_loaded, setLoaded];
-};