From 8869ce19d898f3fa5aae5f38e10bd83057393f29 Mon Sep 17 00:00:00 2001
From: mahdiyeh-deriv <82078941+mahdiyeh-deriv@users.noreply.github.com>
Date: Wed, 17 May 2023 09:16:11 +0330
Subject: [PATCH] refactor: TS migration of Reports pakage (#7300)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: initial commit

* revert: revert changes

* chore: ts-migration for positions-card.tsx (#5)

* chore: reports-table-row to tsx (#10)

* chore: migrating error-components to tsx (#8)

* chore: migrating error-components to tsx

* fix: added partial to type

* chore: migrate calendar-icon to tsx (#11)

* chore: migrate calendar-icon to tsx

* fix: updated extensions

* chore: migrate list-item to tsx (#12)

* chore: migrate currency-wrapper to ts (#17)

* chore: migrate empty-portfolio-message to ts (#18)

* chore: migrating reports meta to tsx (#23)

* chore: migrate amount-cell to ts (#16)

* chore: migrate amount-cell to ts

* fix: delete component because it is unused

* chore: migrating EmptyTradeHistoryMessage to tsx (#19)

* chore: migrating EmptyTradeHistoryMessage to tsx

* fix: remove extension

* fix: migrated sidelist to tsx (#13)

* fix: migrated sidelist to tsx

* fix: circle-ci error

* fix: sidelist types

* chore: migrate composite calendar mobile to typescript (#26)

* chore: migrate composite calendar mobile to typescript

* fix: remove component extension from the name

* refactor: :recycle: removed unused component (#30)

* chore: migrate index file to typescript (#27)

* refactor: :recycle: migrate component to tsx (#29)

* chore: two-month-picker to tsx with one calendar component (#15)

* chore: migrate account statistics to ts (#14)

* chore: migrate account statistics to ts

* fix: typo in comment

* Akmal / chore: migrate routes config to typescript (#31)

* chore: migrate routes config to typescript

* fix: change type for component

* Akmal / chore: migrate data-table-constants to typescript (#33)

* chore: migrate data-table-constants to typescript

* fix: refactor types

* chore: migrate loading component to typescript (#36)

* Aizad/73988/msir ts (#21)

* chore: migrate market-symbol-icon-row to ts

* fix: remove commented lines

* fix: remove classname from IconTradeTypes

* fix: removed action prop

* Sergei / chore: migrate open-positions to tsx (#40)

* chore: convert open-positions to tsx

* fix: add React.PropsWithChildren to tabs.tsx

* fix: change Tabs type

* fix: add/change some types and fix some undefined values

* refactor: use Return Early pattern for contract-card-sell component

* chore: delete commented lines

* chore: add moment as dev dependency

* chore: commit to check circleCI

* fix: change back tabs.tsx

* fix: change React.Fragment to null

* Akmal / chore: convert helpers to typescript (#28)

* chore: convert elpers to typescript

* fix: types

* chore: migrate placeholder to tsx (#42)

* chore: migate placeholder to tsx

* fix: destructure props and remove React.propswithchildre

* Sergei / 73980 / chore: ts migration of route-with-sub-routes (#45)

* chore: ts migration of route-with-sub-routes

* refactor: add common types to separate files

* fix: get back composite-calendar

* refactor: change path from absolute to relative for Types

* Sergei / 73979 / chore: ts migration of binary-routes (#46)

* chore: ts migration of binary-routes.jsx

* chore: add TPassthrough type and add key as index when route.path is undefined

* chore: add export for TBinaryRoutes type

* refactor: use types from common types

* Aizad/73977/binary link ts (#41)

* chore: migrate routes folder to tsx

* fix: change type for component

* fix: migrated test cases to tsx

* chore: migrate binary-links to tsx

* fix: change back function names

* fix: resolved conflict issues

* fix: testcases

* chore: migrated filter component and fix some issues with composite-c… (#20)

* chore: migrated filter component and fix some issues with composite-calendar

* fix: change export to CalendarIcon on index.js and added RootStore type to filter-components

* fix: change TRootStore to RootStore

* fix: replace RootStore to TRootStore

* fix: expand object for filtered_date_range

* Sergei / chore: ts migration of routes (#38)

* chore: ts migration of routes

* chore: change RootStore type

* Aizad/73994/pss ts (#48)

* chore: migrate progress-slider-stream to tsx

* fix: imported TContractInfo inside deriv/shared/

* Sergei / chore: migrate statements to tsx (#39)

* chore: ts migration of statements

* chore: change RootStore type

* chore: change local TRootStore with module property

* fix: return class RootStore to Stores/index.ts

* chore: change core_store type

* chore: migrated indicative cell to tsx (#44)

* chore: migrated indicative cell to tsx

* fix: added types to usestate

* fix: change type

* fix: change function type to boolean

* fix: imported TContractInfo from shared file into indicative-cell

* fix: test

* fix: mockstore

* fix: format-response.ts

* fix: mockstore

* Aizad/73978/routes ts (#50)

* Merge branch 'Improvement/72232/Reports_TS_migration' of github.com:mahdiyeh-deriv/deriv-app into ts-migration

* chore: finalising routes folder migration for Reports package 📦

* Akmal / chore: migrate app.jsx to typescript (#37)

* chore: migrate app.jsx to typescript

* chore: utilize TRootStore type

* chore: replace type

* Akmal / chore: migrate composite calendar to typescript (#25)

* chore: migrate composite calendar to typescript

* chore: refactor composite calendar and related components to properly use moment

* chore: move out index changes

* feat: resolve conflicts

* feat: add deriv stores package

* Kate/73995/TS migration of Reports (#51)

* refactor: migrate reports component into ts

* refactor: add useStore hook

* refactor: delete extra react fragment

Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com>

---------

Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com>

* redeploy: rerun tests

* refactor: remove named import from react

* chore: migrate statement to tsx (#47)

* chore: migrate statement to tsx

* fix: use Statement props from api-types than declaring it in ts file

* fix: imported TAccountStatistics inside statement

* fix: made changes based on comments

* fix: refactor based on suggestions

* fix: types in packages/shared/src/utils/shortcode/shortcode.ts

* fix: regex to prevent sonarcloud bug

* chore: change index.js to index.ts

* Rostislav / 73993 / Task - TS migration of ProfitTable (#34)

* refactor: init pr

* refactor: profit_loss_cell tsx'd

* refactor: profit_loss_cell import problem resolved

* refactor: profit_loss_cell import another problem fix

* refactor: the migration is more or less finished

* refactor: a few extra changes

* refactor: prev commit accidental changes removed

* refactor: TProfitTable type changed a bit

* refactor: moved types to common-prop.type.ts

* refactor: getSupportedContracts and getUnsupportedContracts moved to shared

* refactor: contract.tsx completely replaced by imports from @deriv/shared

* refactor: added alias for Types

* refactor: applied suggested changes

* fix: regex for sonarcloud

* fix: remove props from the name of type declaration

* fix: resolve comments

* fix: fix comments v2

* fix: remove usestate

* fix: date-time test

* fix: comments v3

* thisyahlen/fix: trade table for mobile (#52)

* fix: trade table for mobile

* fix: trade table error

* fix: statement input validation error on date_from

* fix: setdate unix

* fix: responsive input validation error

* fix: remove unix from store

---------

Co-authored-by: aizad-deriv <103104395+aizad-deriv@users.noreply.github.com>
Co-authored-by: Akmal Djumakhodjaev <akmal@binary.com>
Co-authored-by: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com>
Co-authored-by: Sergei Baranovski <120570511+sergei-deriv@users.noreply.github.com>
Co-authored-by: kate-deriv <121025168+kate-deriv@users.noreply.github.com>
Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com>
Co-authored-by: Rostik Kayko <119863957+rostislav-deriv@users.noreply.github.com>
Co-authored-by: Thisyahlen Nair <thisyahlen@regentmarkets.com>
Co-authored-by: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com>
Co-authored-by: hirad-deriv <hirad@re-work.dev>
---
 .../components/src/components/label/label.tsx |   2 +-
 packages/reports/build/constants.js           |   1 +
 packages/reports/build/loaders-config.js      |   3 -
 packages/reports/build/webpack.config.js      |   2 +-
 packages/reports/jest.config.js               |   2 +
 packages/reports/package.json                 |   1 +
 .../Elements/ContentLoader/index.js           |   1 -
 .../Elements/ContentLoader/index.ts           |   1 +
 ...{positions-card.jsx => positions-card.tsx} |  11 +-
 ...ts-table-row.jsx => reports-table-row.tsx} |  11 +-
 ...rror-component.jsx => error-component.tsx} |  17 +-
 .../reports/src/Components/Errors/index.js    |   1 -
 .../reports/src/Components/Errors/index.ts    |   3 +
 .../Form/CompositeCalendar/calendar-icon.jsx  |  11 -
 .../Form/CompositeCalendar/calendar-icon.tsx  |  12 +
 ...bile.jsx => composite-calendar-mobile.tsx} |  78 +++--
 ...te-calendar.jsx => composite-calendar.tsx} |  99 +++---
 .../Form/CompositeCalendar/index.js           |   1 -
 .../Form/CompositeCalendar/index.ts           |   3 +
 .../{list-item.jsx => list-item.tsx}          |  15 +-
 .../{side-list.jsx => side-list.tsx}          |  30 +-
 ...-month-picker.jsx => two-month-picker.tsx} |  79 ++---
 .../{helpers.spec.js => helpers.spec.tsx}     |  23 +-
 .../{binary-link.jsx => binary-link.tsx}      |  19 +-
 .../src/Components/Routes/binary-routes.jsx   |  30 --
 .../src/Components/Routes/binary-routes.tsx   |  26 ++
 .../reports/src/Components/Routes/helpers.js  |  34 ---
 .../reports/src/Components/Routes/helpers.ts  |  36 +++
 .../reports/src/Components/Routes/index.js    |   4 -
 .../reports/src/Components/Routes/index.ts    |   7 +
 ...b-routes.jsx => route-with-sub-routes.tsx} |  17 +-
 ...-statistics.jsx => account-statistics.tsx} |  19 +-
 .../reports/src/Components/amount-cell.jsx    |  15 -
 ...rency-wrapper.jsx => currency-wrapper.tsx} |  11 +-
 ...essage.jsx => empty-portfolio-message.tsx} |   6 +-
 ...ge.jsx => empty-trade-history-message.tsx} |  17 +-
 ...ter-component.jsx => filter-component.tsx} |  31 +-
 packages/reports/src/Components/index.js      |   3 -
 packages/reports/src/Components/index.ts      |   3 +
 ...ndicative-cell.jsx => indicative-cell.tsx} |  37 ++-
 ...con-row.jsx => market-symbol-icon-row.tsx} |  43 +--
 .../src/Components/placeholder-component.tsx  |  39 +++
 ...fit_loss_cell.jsx => profit_loss_cell.tsx} |  13 +-
 .../reports/src/Components/reports-meta.jsx   |  19 --
 .../reports/src/Components/reports-meta.tsx   |  28 ++
 ...-constants.js => data-table-constants.tsx} | 149 ++++-----
 .../{routes-config.js => routes-config.tsx}   |  11 +-
 ....spec.js => open-positions-table.spec.tsx} |   0
 packages/reports/src/Containers/index.js      |  11 -
 packages/reports/src/Containers/index.ts      |  11 +
 ...{open-positions.jsx => open-positions.tsx} | 273 +++++++++++------
 .../{profit-table.jsx => profit-table.tsx}    |  91 +++---
 ...-stream.jsx => progress-slider-stream.tsx} |  22 +-
 .../Containers/{reports.jsx => reports.tsx}   |  98 +++---
 packages/reports/src/Containers/routes.jsx    |  41 ---
 packages/reports/src/Containers/routes.tsx    |  26 ++
 .../{statement.jsx => statement.tsx}          | 173 +++++++----
 packages/reports/src/Helpers/digits.js        |   5 -
 packages/reports/src/Helpers/digits.ts        |   8 +
 ...ket-underlying.js => market-underlying.ts} |  30 +-
 packages/reports/src/Helpers/profit-loss.js   |   1 -
 packages/reports/src/Helpers/profit-loss.ts   |   1 +
 .../Components/{Page404.jsx => Page404.tsx}   |   0
 packages/reports/src/Modules/Page404/index.js |   1 -
 packages/reports/src/Modules/Page404/index.ts |   3 +
 .../Markers/__tests__/marker-spot.spec.tsx    |  18 --
 .../Components/Markers/marker-line.jsx        |  38 ---
 .../Components/Markers/marker-spot.jsx        |  15 -
 .../src/Modules/SmartChart/Helpers/symbol.js  |  10 -
 .../src/Stores/Modules/Profit/profit-store.js |   4 +-
 packages/reports/src/Stores/index.js          |  19 --
 packages/reports/src/Stores/index.ts          |  43 +++
 .../reports/src/Types/common-prop.type.ts     | 103 +++++++
 packages/reports/src/Types/index.ts           |   1 +
 packages/reports/src/_common/contract.js      | 289 ------------------
 packages/reports/src/app.jsx                  |  27 --
 packages/reports/src/app.tsx                  |  28 ++
 packages/reports/src/{index.jsx => index.tsx} |   2 +-
 .../components/{loading.jsx => loading.tsx}   |   9 +-
 packages/reports/tsconfig.json                |   3 +-
 packages/shared/src/utils/contract/index.ts   |   1 +
 .../utils/date/__tests__/date-time.spec.ts    |   2 +-
 packages/shared/src/utils/date/date-time.ts   |   6 +-
 packages/shared/src/utils/route/route.ts      |   2 +-
 .../shared/src/utils/shortcode/shortcode.ts   |   2 +-
 packages/stores/package.json                  |   7 +-
 packages/stores/src/mockStore.ts              |  37 +++
 packages/stores/types.ts                      |  38 +++
 88 files changed, 1313 insertions(+), 1210 deletions(-)
 delete mode 100644 packages/reports/src/Components/Elements/ContentLoader/index.js
 create mode 100644 packages/reports/src/Components/Elements/ContentLoader/index.ts
 rename packages/reports/src/Components/Elements/ContentLoader/{positions-card.jsx => positions-card.tsx} (90%)
 rename packages/reports/src/Components/Elements/ContentLoader/{reports-table-row.jsx => reports-table-row.tsx} (85%)
 rename packages/reports/src/Components/Errors/{error-component.jsx => error-component.tsx} (72%)
 delete mode 100644 packages/reports/src/Components/Errors/index.js
 create mode 100644 packages/reports/src/Components/Errors/index.ts
 delete mode 100644 packages/reports/src/Components/Form/CompositeCalendar/calendar-icon.jsx
 create mode 100644 packages/reports/src/Components/Form/CompositeCalendar/calendar-icon.tsx
 rename packages/reports/src/Components/Form/CompositeCalendar/{composite-calendar-mobile.jsx => composite-calendar-mobile.tsx} (80%)
 rename packages/reports/src/Components/Form/CompositeCalendar/{composite-calendar.jsx => composite-calendar.tsx} (64%)
 delete mode 100644 packages/reports/src/Components/Form/CompositeCalendar/index.js
 create mode 100644 packages/reports/src/Components/Form/CompositeCalendar/index.ts
 rename packages/reports/src/Components/Form/CompositeCalendar/{list-item.jsx => list-item.tsx} (52%)
 rename packages/reports/src/Components/Form/CompositeCalendar/{side-list.jsx => side-list.tsx} (54%)
 rename packages/reports/src/Components/Form/CompositeCalendar/{two-month-picker.jsx => two-month-picker.tsx} (64%)
 rename packages/reports/src/Components/Routes/__tests__/{helpers.spec.js => helpers.spec.tsx} (85%)
 rename packages/reports/src/Components/Routes/{binary-link.jsx => binary-link.tsx} (50%)
 delete mode 100644 packages/reports/src/Components/Routes/binary-routes.jsx
 create mode 100644 packages/reports/src/Components/Routes/binary-routes.tsx
 delete mode 100644 packages/reports/src/Components/Routes/helpers.js
 create mode 100644 packages/reports/src/Components/Routes/helpers.ts
 delete mode 100644 packages/reports/src/Components/Routes/index.js
 create mode 100644 packages/reports/src/Components/Routes/index.ts
 rename packages/reports/src/Components/Routes/{route-with-sub-routes.jsx => route-with-sub-routes.tsx} (74%)
 rename packages/reports/src/Components/{account-statistics.jsx => account-statistics.tsx} (89%)
 delete mode 100644 packages/reports/src/Components/amount-cell.jsx
 rename packages/reports/src/Components/{currency-wrapper.jsx => currency-wrapper.tsx} (65%)
 rename packages/reports/src/Components/{empty-portfolio-message.jsx => empty-portfolio-message.tsx} (88%)
 rename packages/reports/src/Components/{empty-trade-history-message.jsx => empty-trade-history-message.tsx} (76%)
 rename packages/reports/src/Components/{filter-component.jsx => filter-component.tsx} (80%)
 delete mode 100644 packages/reports/src/Components/index.js
 create mode 100644 packages/reports/src/Components/index.ts
 rename packages/reports/src/Components/{indicative-cell.jsx => indicative-cell.tsx} (70%)
 rename packages/reports/src/Components/{market-symbol-icon-row.jsx => market-symbol-icon-row.tsx} (82%)
 create mode 100644 packages/reports/src/Components/placeholder-component.tsx
 rename packages/reports/src/Components/{profit_loss_cell.jsx => profit_loss_cell.tsx} (57%)
 delete mode 100644 packages/reports/src/Components/reports-meta.jsx
 create mode 100644 packages/reports/src/Components/reports-meta.tsx
 rename packages/reports/src/Constants/{data-table-constants.js => data-table-constants.tsx} (78%)
 rename packages/reports/src/Constants/{routes-config.js => routes-config.tsx} (85%)
 rename packages/reports/src/Containers/__tests__/{open-positions-table.spec.js => open-positions-table.spec.tsx} (100%)
 delete mode 100644 packages/reports/src/Containers/index.js
 create mode 100644 packages/reports/src/Containers/index.ts
 rename packages/reports/src/Containers/{open-positions.jsx => open-positions.tsx} (75%)
 rename packages/reports/src/Containers/{profit-table.jsx => profit-table.tsx} (79%)
 rename packages/reports/src/Containers/{progress-slider-stream.jsx => progress-slider-stream.tsx} (67%)
 rename packages/reports/src/Containers/{reports.jsx => reports.tsx} (57%)
 delete mode 100644 packages/reports/src/Containers/routes.jsx
 create mode 100644 packages/reports/src/Containers/routes.tsx
 rename packages/reports/src/Containers/{statement.jsx => statement.tsx} (67%)
 delete mode 100644 packages/reports/src/Helpers/digits.js
 create mode 100644 packages/reports/src/Helpers/digits.ts
 rename packages/reports/src/Helpers/{market-underlying.js => market-underlying.ts} (56%)
 delete mode 100644 packages/reports/src/Helpers/profit-loss.js
 create mode 100644 packages/reports/src/Helpers/profit-loss.ts
 rename packages/reports/src/Modules/Page404/Components/{Page404.jsx => Page404.tsx} (100%)
 delete mode 100644 packages/reports/src/Modules/Page404/index.js
 create mode 100644 packages/reports/src/Modules/Page404/index.ts
 delete mode 100644 packages/reports/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot.spec.tsx
 delete mode 100644 packages/reports/src/Modules/SmartChart/Components/Markers/marker-line.jsx
 delete mode 100644 packages/reports/src/Modules/SmartChart/Components/Markers/marker-spot.jsx
 delete mode 100644 packages/reports/src/Modules/SmartChart/Helpers/symbol.js
 delete mode 100644 packages/reports/src/Stores/index.js
 create mode 100644 packages/reports/src/Stores/index.ts
 create mode 100644 packages/reports/src/Types/common-prop.type.ts
 create mode 100644 packages/reports/src/Types/index.ts
 delete mode 100644 packages/reports/src/_common/contract.js
 delete mode 100644 packages/reports/src/app.jsx
 create mode 100644 packages/reports/src/app.tsx
 rename packages/reports/src/{index.jsx => index.tsx} (91%)
 rename packages/reports/src/templates/_common/components/{loading.jsx => loading.tsx} (69%)

diff --git a/packages/components/src/components/label/label.tsx b/packages/components/src/components/label/label.tsx
index 8bb0c5f953f8..922998e40da7 100644
--- a/packages/components/src/components/label/label.tsx
+++ b/packages/components/src/components/label/label.tsx
@@ -18,7 +18,7 @@ const available_sizes = ['regular', 'large'] as const;
 
 type TLabel = {
     mode: typeof available_modes[number];
-    size: typeof available_sizes[number];
+    size?: typeof available_sizes[number];
     className?: string;
 };
 
diff --git a/packages/reports/build/constants.js b/packages/reports/build/constants.js
index 45261133230f..9baedc23952b 100644
--- a/packages/reports/build/constants.js
+++ b/packages/reports/build/constants.js
@@ -28,6 +28,7 @@ const ALIASES = {
     Modules: path.resolve(__dirname, '../src/Modules'),
     Sass: path.resolve(__dirname, '../src/sass'),
     Stores: path.resolve(__dirname, '../src/Stores'),
+    Types: path.resolve(__dirname, '../src/Types'),
 };
 
 const rules = (is_test_env = false) => [
diff --git a/packages/reports/build/loaders-config.js b/packages/reports/build/loaders-config.js
index 244d0aa2d1b8..4024a6b51072 100644
--- a/packages/reports/build/loaders-config.js
+++ b/packages/reports/build/loaders-config.js
@@ -2,9 +2,6 @@ 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',
     },
diff --git a/packages/reports/build/webpack.config.js b/packages/reports/build/webpack.config.js
index c436373ec902..416461e592ae 100644
--- a/packages/reports/build/webpack.config.js
+++ b/packages/reports/build/webpack.config.js
@@ -8,7 +8,7 @@ module.exports = function (env) {
         context: path.resolve(__dirname, '../'),
         devtool: IS_RELEASE ? undefined : 'eval-cheap-module-source-map',
         entry: {
-            reports: path.resolve(__dirname, '../src', 'index.jsx'),
+            reports: path.resolve(__dirname, '../src', 'index'),
         },
         mode: IS_RELEASE ? 'production' : 'development',
         module: {
diff --git a/packages/reports/jest.config.js b/packages/reports/jest.config.js
index 97d0c11394ac..babd5fc48328 100644
--- a/packages/reports/jest.config.js
+++ b/packages/reports/jest.config.js
@@ -15,5 +15,7 @@ module.exports = {
         '^Utils/(.*)$': '<rootDir>/src/Utils/$1',
         '^Services/(.*)$': '<rootDir>/src/Services/$1',
         '^Stores/(.*)$': '<rootDir>/src/Stores/$1',
+        '^Types/(.*)$': '<rootDir>/src/Types/$1',
+        '^Types$': '<rootDir>/src/Types/index.ts',
     },
 };
diff --git a/packages/reports/package.json b/packages/reports/package.json
index 7af00948c925..c875375fccae 100644
--- a/packages/reports/package.json
+++ b/packages/reports/package.json
@@ -79,6 +79,7 @@
         "@deriv/components": "^1.0.0",
         "@deriv/deriv-api": "^1.0.11",
         "@deriv/shared": "^1.0.0",
+        "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",
         "@types/react": "^18.0.7",
         "@types/react-dom": "^18.0.0",
diff --git a/packages/reports/src/Components/Elements/ContentLoader/index.js b/packages/reports/src/Components/Elements/ContentLoader/index.js
deleted file mode 100644
index 9e70635b68c6..000000000000
--- a/packages/reports/src/Components/Elements/ContentLoader/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './reports-table-row.jsx';
diff --git a/packages/reports/src/Components/Elements/ContentLoader/index.ts b/packages/reports/src/Components/Elements/ContentLoader/index.ts
new file mode 100644
index 000000000000..1995095d0fa0
--- /dev/null
+++ b/packages/reports/src/Components/Elements/ContentLoader/index.ts
@@ -0,0 +1 @@
+export * from './reports-table-row';
diff --git a/packages/reports/src/Components/Elements/ContentLoader/positions-card.jsx b/packages/reports/src/Components/Elements/ContentLoader/positions-card.tsx
similarity index 90%
rename from packages/reports/src/Components/Elements/ContentLoader/positions-card.jsx
rename to packages/reports/src/Components/Elements/ContentLoader/positions-card.tsx
index d0fba00e5530..6df94a02173f 100644
--- a/packages/reports/src/Components/Elements/ContentLoader/positions-card.jsx
+++ b/packages/reports/src/Components/Elements/ContentLoader/positions-card.tsx
@@ -1,8 +1,11 @@
 import ContentLoader from 'react-content-loader';
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const PositionsCardLoader = ({ speed }) => (
+type TPositionCardLoader = {
+    speed?: number;
+};
+
+const PositionsCardLoader = ({ speed }: TPositionCardLoader) => (
     <ContentLoader
         height={173}
         width={218}
@@ -28,8 +31,4 @@ const PositionsCardLoader = ({ speed }) => (
     </ContentLoader>
 );
 
-PositionsCardLoader.propTypes = {
-    speed: PropTypes.number,
-};
-
 export { PositionsCardLoader };
diff --git a/packages/reports/src/Components/Elements/ContentLoader/reports-table-row.jsx b/packages/reports/src/Components/Elements/ContentLoader/reports-table-row.tsx
similarity index 85%
rename from packages/reports/src/Components/Elements/ContentLoader/reports-table-row.jsx
rename to packages/reports/src/Components/Elements/ContentLoader/reports-table-row.tsx
index fbb6606d9395..76a490aa4bc7 100644
--- a/packages/reports/src/Components/Elements/ContentLoader/reports-table-row.jsx
+++ b/packages/reports/src/Components/Elements/ContentLoader/reports-table-row.tsx
@@ -1,8 +1,11 @@
 import ContentLoader from 'react-content-loader';
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const ReportsTableRowLoader = ({ speed }) => (
+type TReportsTableRowLoader = {
+    speed?: number;
+};
+
+const ReportsTableRowLoader = ({ speed }: TReportsTableRowLoader) => (
     <ContentLoader
         height={64}
         width={992}
@@ -21,8 +24,4 @@ const ReportsTableRowLoader = ({ speed }) => (
     </ContentLoader>
 );
 
-ReportsTableRowLoader.propTypes = {
-    speed: PropTypes.number,
-};
-
 export { ReportsTableRowLoader };
diff --git a/packages/reports/src/Components/Errors/error-component.jsx b/packages/reports/src/Components/Errors/error-component.tsx
similarity index 72%
rename from packages/reports/src/Components/Errors/error-component.jsx
rename to packages/reports/src/Components/Errors/error-component.tsx
index ffcebae1b5fe..29358a696e5a 100644
--- a/packages/reports/src/Components/Errors/error-component.jsx
+++ b/packages/reports/src/Components/Errors/error-component.tsx
@@ -1,8 +1,8 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Dialog, PageErrorContainer } from '@deriv/components';
 import { routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
+import { TErrorComponent } from 'Types';
 
 const ErrorComponent = ({
     header,
@@ -11,7 +11,7 @@ const ErrorComponent = ({
     redirect_label,
     redirectOnClick,
     should_show_refresh = true,
-}) => {
+}: Partial<TErrorComponent>) => {
     const refresh_message = should_show_refresh ? localize('Please refresh this page to continue.') : '';
 
     if (is_dialog) {
@@ -21,6 +21,7 @@ const ErrorComponent = ({
                 is_visible
                 confirm_button_text={redirect_label || localize('Ok')}
                 onConfirm={redirectOnClick || (() => location.reload())}
+                has_close_icon={false}
             >
                 {message || localize('Sorry, an error occured while processing your request.')}
             </Dialog>
@@ -29,7 +30,7 @@ const ErrorComponent = ({
     return (
         <PageErrorContainer
             error_header={header ?? ''}
-            error_messages={message ? message[(message, refresh_message)] : []}
+            error_messages={message ? [message, refresh_message] : []}
             redirect_urls={[routes.trade]}
             redirect_labels={[redirect_label || localize('Refresh')]}
             buttonOnClick={redirectOnClick || (() => location.reload())}
@@ -37,14 +38,4 @@ const ErrorComponent = ({
     );
 };
 
-ErrorComponent.propTypes = {
-    header: PropTypes.string,
-    is_dialog: PropTypes.bool,
-    message: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object]),
-    redirect_label: PropTypes.string,
-    redirectOnClick: PropTypes.func,
-    should_show_refresh: PropTypes.bool,
-    type: PropTypes.string,
-};
-
 export default ErrorComponent;
diff --git a/packages/reports/src/Components/Errors/index.js b/packages/reports/src/Components/Errors/index.js
deleted file mode 100644
index dc12ba08a1e7..000000000000
--- a/packages/reports/src/Components/Errors/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default from './error-component.jsx';
diff --git a/packages/reports/src/Components/Errors/index.ts b/packages/reports/src/Components/Errors/index.ts
new file mode 100644
index 000000000000..8585809410a1
--- /dev/null
+++ b/packages/reports/src/Components/Errors/index.ts
@@ -0,0 +1,3 @@
+import ErrorComponent from './error-component';
+
+export default ErrorComponent;
diff --git a/packages/reports/src/Components/Form/CompositeCalendar/calendar-icon.jsx b/packages/reports/src/Components/Form/CompositeCalendar/calendar-icon.jsx
deleted file mode 100644
index ddae60f2e40e..000000000000
--- a/packages/reports/src/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/reports/src/Components/Form/CompositeCalendar/calendar-icon.tsx b/packages/reports/src/Components/Form/CompositeCalendar/calendar-icon.tsx
new file mode 100644
index 000000000000..5115ae575d28
--- /dev/null
+++ b/packages/reports/src/Components/Form/CompositeCalendar/calendar-icon.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Icon } from '@deriv/components';
+
+type TCalendarIcon = {
+    onClick: () => void;
+};
+
+const CalendarIcon = ({ onClick }: TCalendarIcon) => (
+    <Icon onClick={onClick} icon='IcCalendarDatefrom' className='inline-icon' />
+);
+
+export default CalendarIcon;
diff --git a/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar-mobile.jsx b/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar-mobile.tsx
similarity index 80%
rename from packages/reports/src/Components/Form/CompositeCalendar/composite-calendar-mobile.jsx
rename to packages/reports/src/Components/Form/CompositeCalendar/composite-calendar-mobile.tsx
index b866304bf1e8..d3fb19e714e4 100644
--- a/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar-mobile.jsx
+++ b/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar-mobile.tsx
@@ -1,11 +1,20 @@
 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';
+import { TInputDateRange } from 'Types';
 
-export const RadioButton = ({ id, className, selected_value, value, label, onChange }) => {
+type TRadioButton = {
+    id: string;
+    className?: string;
+    selected_value?: string;
+    value?: string;
+    label?: string;
+    onChange: (value: { label?: string; value?: string }) => void;
+};
+
+export const RadioButton = ({ id, className, selected_value, value, label, onChange }: TRadioButton) => {
     return (
         <label
             htmlFor={id}
@@ -34,18 +43,39 @@ export const RadioButton = ({ id, className, selected_value, value, label, onCha
 };
 const CUSTOM_KEY = 'custom';
 
+type TCompositeCalendarMobile = {
+    input_date_range: TInputDateRange;
+    current_focus: string;
+    duration_list: Array<TInputDateRange>;
+    onChange: (
+        value: { from: moment.Moment | number | null; to: moment.Moment; is_batch: boolean },
+        extra_data: { date_range: TInputDateRange }
+    ) => void;
+    setCurrentFocus: (focus: string) => void;
+    from: number;
+    to: number;
+};
+
 const CompositeCalendarMobile = React.memo(
-    ({ input_date_range, current_focus, duration_list, onChange, setCurrentFocus }) => {
+    ({
+        input_date_range,
+        current_focus,
+        duration_list,
+        onChange,
+        setCurrentFocus,
+        from,
+        to,
+    }: TCompositeCalendarMobile) => {
         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 [from_date, setFrom] = React.useState(from && toMoment(from).format('DD MMM YYYY'));
+        const [to_date, 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 selectDateRange = (_selected_date_range: TInputDateRange, is_today?: boolean) => {
             const new_from = _selected_date_range.duration;
             onChange(
                 {
@@ -53,7 +83,7 @@ const CompositeCalendarMobile = React.memo(
                         is_today || new_from
                             ? toMoment().startOf('day').subtract(new_from, 'day').add(1, 's').unix()
                             : null,
-                    to: toMoment().endOf('day').unix(),
+                    to: toMoment().endOf('day'),
                     is_batch: true,
                 },
                 {
@@ -65,8 +95,8 @@ const CompositeCalendarMobile = React.memo(
         const selectCustomDateRange = () => {
             const today = toMoment().format('DD MMM YYYY');
 
-            const new_from = from || to || today;
-            const new_to = to || today;
+            const new_from = from_date || to_date || today;
+            const new_to = to_date || today;
 
             const new_date_range = Object.assign(selected_date_range, {
                 label: `${new_from} - ${new_to}`,
@@ -74,8 +104,8 @@ const CompositeCalendarMobile = React.memo(
 
             onChange(
                 {
-                    from: toMoment(new_from, 'DD MMM YYYY').startOf('day').add(1, 's').unix(),
-                    to: toMoment(new_to, 'DD MMM YYYY').endOf('day').unix(),
+                    from: toMoment(new_from).startOf('day').add(1, 's').unix(),
+                    to: toMoment(new_to).endOf('day'),
                     is_batch: true,
                 },
                 {
@@ -105,7 +135,7 @@ const CompositeCalendarMobile = React.memo(
             setIsOpen(false);
         };
 
-        const selectDate = (e, key) => {
+        const selectDate = (e: React.ChangeEvent<HTMLInputElement>, key: string) => {
             setSelectedDateRange({ value: CUSTOM_KEY });
 
             const value = e.target?.value ? toMoment(e.target.value).format('DD MMM YYYY') : '';
@@ -142,7 +172,7 @@ const CompositeCalendarMobile = React.memo(
             );
         };
 
-        const onDateRangeChange = _date_range => {
+        const onDateRangeChange = (_date_range: TInputDateRange) => {
             setSelectedDateRange(
                 duration_list.find(range => _date_range && range.value === _date_range.value) || _date_range
             );
@@ -154,8 +184,8 @@ const CompositeCalendarMobile = React.memo(
         };
 
         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');
+        const max_date = to_date ? toMoment(to_date).format('YYYY-MM-DD') : today;
+        const min_date = from_date && toMoment(from_date).format('YYYY-MM-DD');
 
         return (
             <React.Fragment>
@@ -207,18 +237,18 @@ const CompositeCalendarMobile = React.memo(
                                     className='composite-calendar-modal__custom-date-range-start-date'
                                     is_nativepicker={true}
                                     placeholder={localize('Start date')}
-                                    value={from}
+                                    value={from_date}
                                     max_date={max_date}
-                                    onChange={e => selectDate(e, 'from')}
+                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => selectDate(e, 'from')}
                                 />
                                 <DatePicker
                                     className='composite-calendar-modal__custom-date-range-end-date'
                                     is_nativepicker={true}
                                     placeholder={localize('End date')}
-                                    value={to}
+                                    value={to_date}
                                     max_date={today}
                                     min_date={min_date}
-                                    onChange={e => selectDate(e, 'to')}
+                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => selectDate(e, 'to')}
                                 />
                             </div>
                         </div>
@@ -238,14 +268,4 @@ const CompositeCalendarMobile = React.memo(
 );
 
 CompositeCalendarMobile.displayName = 'CompositeCalendarMobile';
-
-CompositeCalendarMobile.propTypes = {
-    current_focus: PropTypes.string,
-    duration_list: PropTypes.array,
-    from: PropTypes.number,
-    input_date_range: PropTypes.object,
-    onChange: PropTypes.func,
-    setCurrentFocus: PropTypes.func,
-    to: PropTypes.number,
-};
 export default CompositeCalendarMobile;
diff --git a/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx b/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.tsx
similarity index 64%
rename from packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx
rename to packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.tsx
index 875fb85cfe0b..418f178a98c7 100644
--- a/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx
+++ b/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.tsx
@@ -1,16 +1,32 @@
-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 { daysFromTodayTo, 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';
+import type { TStores } from '@deriv/stores';
+import CompositeCalendarMobile from './composite-calendar-mobile';
+import SideList from './side-list';
+import CalendarIcon from './calendar-icon';
+import TwoMonthPicker from './two-month-picker';
+import moment from 'moment';
+
+type TCompositeCalendar = {
+    current_focus: string;
+    onChange: (values: { [key: string]: moment.Moment }) => void;
+    setCurrentFocus: () => void;
+    to: number;
+    from: number;
+};
+
+type TTwoMonthPickerLoadable = {
+    onChange: (date: moment.Moment) => void;
+    isPeriodDisabled: (date: moment.Moment) => boolean;
+    value: number;
+};
 
-const TwoMonthPicker = Loadable({
-    loader: () => import(/* webpackChunkName: "two-month-picker" */ './two-month-picker.jsx'),
+const TwoMonthPickerLoadable = Loadable<TTwoMonthPickerLoadable, typeof TwoMonthPicker>({
+    loader: () => import(/* webpackChunkName: "two-month-picker" */ './two-month-picker'),
     loading: () => null,
     render(loaded, props) {
         const Component = loaded.default;
@@ -18,7 +34,7 @@ const TwoMonthPicker = Loadable({
     },
 });
 
-const CompositeCalendar = props => {
+const CompositeCalendar: React.FC<TCompositeCalendar> = props => {
     const { current_focus, onChange, setCurrentFocus, to, from } = props;
 
     const [show_to, setShowTo] = React.useState(false);
@@ -56,30 +72,26 @@ const CompositeCalendar = props => {
         },
     ]);
 
-    const wrapper_ref = React.useRef();
+    const wrapper_ref = React.useRef<HTMLInputElement>(null);
 
-    useOnClickOutside(wrapper_ref, event => {
-        event.stopPropagation();
-        event.preventDefault();
-        hideCalendar();
-    });
+    const validateClickOutside = (event: MouseEvent) => !wrapper_ref.current?.contains(event.target as Node);
 
-    const selectDateRange = new_from => {
+    const selectDateRange = (new_from?: number) => {
         hideCalendar();
         applyBatch({
             from: new_from ? toMoment().startOf('day').subtract(new_from, 'day').add(1, 's').unix() : null,
-            to: toMoment().endOf('day').unix(),
+            to: toMoment().endOf('day'),
             is_batch: true,
         });
     };
 
     const getToDateLabel = () => {
-        const date = epochToMoment(to);
+        const date = toMoment(to);
         return daysFromTodayTo(date) === 0 ? localize('Today') : date.format('MMM, DD YYYY');
     };
 
     const getFromDateLabel = () => {
-        const date = epochToMoment(from);
+        const date = toMoment(from);
         return from ? date.format('MMM, DD YYYY') : '';
     };
 
@@ -88,7 +100,7 @@ const CompositeCalendar = props => {
         setShowTo(false);
     };
 
-    const showCalendar = e => {
+    const showCalendar = (e: string) => {
         if (e === 'from') {
             setShowFrom(true);
         }
@@ -97,36 +109,46 @@ const CompositeCalendar = props => {
         }
     };
 
-    const setToDate = date => {
-        updateState('to', epochToMoment(date).endOf('day').unix());
+    useOnClickOutside(
+        wrapper_ref,
+        event => {
+            event?.stopPropagation();
+            event?.preventDefault();
+            hideCalendar();
+        },
+        validateClickOutside
+    );
+
+    const setToDate = (date: moment.Moment) => {
+        updateState('to', toMoment(date).endOf('day'));
     };
 
-    const setFromDate = date => {
-        updateState('from', date);
+    const setFromDate = (date: moment.Moment) => {
+        updateState('from', date.unix());
         hideCalendar();
     };
 
-    const updateState = (key, value) => {
+    const updateState = (key: string, value: moment.Moment | number) => {
         apply(key, value);
         hideCalendar();
     };
 
-    const applyBatch = values => {
+    const applyBatch = (values: { [key: string]: any }) => {
         onChange(values);
     };
 
-    const apply = (key, value) => {
+    const apply = (key: string, value: any) => {
         applyBatch({
             [key]: value,
         });
     };
 
-    const isPeriodDisabledTo = date => {
-        return date + 1 <= from || date > toMoment().endOf('day').unix();
+    const isPeriodDisabledTo = (date: moment.Moment) => {
+        return date.clone().add(1, 'days').isSameOrBefore(from) || date.isAfter(toMoment().endOf('day'));
     };
 
-    const isPeriodDisabledFrom = date => {
-        return date - 1 >= to;
+    const isPeriodDisabledFrom = (date: moment.Moment) => {
+        return moment(date).subtract(1, 'days').isSameOrAfter(to);
     };
 
     return (
@@ -157,13 +179,17 @@ const CompositeCalendar = props => {
                 {show_to && (
                     <div className='composite-calendar' ref={wrapper_ref}>
                         <SideList from={from} to={to} items={list} />
-                        <TwoMonthPicker value={to} onChange={setToDate} isPeriodDisabled={isPeriodDisabledTo} />
+                        <TwoMonthPickerLoadable 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} />
+                        <TwoMonthPickerLoadable
+                            value={from}
+                            onChange={setFromDate}
+                            isPeriodDisabled={isPeriodDisabledFrom}
+                        />
                     </div>
                 )}
             </DesktopWrapper>
@@ -176,15 +202,8 @@ const CompositeCalendar = props => {
 
 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 }) => ({
+    connect(({ ui }: TStores) => ({
         current_focus: ui.current_focus,
         setCurrentFocus: ui.setCurrentFocus,
     }))(CompositeCalendar)
diff --git a/packages/reports/src/Components/Form/CompositeCalendar/index.js b/packages/reports/src/Components/Form/CompositeCalendar/index.js
deleted file mode 100644
index d8d748d8a924..000000000000
--- a/packages/reports/src/Components/Form/CompositeCalendar/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default from './composite-calendar.jsx';
diff --git a/packages/reports/src/Components/Form/CompositeCalendar/index.ts b/packages/reports/src/Components/Form/CompositeCalendar/index.ts
new file mode 100644
index 000000000000..fcd3d4d86079
--- /dev/null
+++ b/packages/reports/src/Components/Form/CompositeCalendar/index.ts
@@ -0,0 +1,3 @@
+import CompositeCalendar from './composite-calendar';
+
+export default CompositeCalendar;
diff --git a/packages/reports/src/Components/Form/CompositeCalendar/list-item.jsx b/packages/reports/src/Components/Form/CompositeCalendar/list-item.tsx
similarity index 52%
rename from packages/reports/src/Components/Form/CompositeCalendar/list-item.jsx
rename to packages/reports/src/Components/Form/CompositeCalendar/list-item.tsx
index 98b3f9e551f6..07b0c81c8a95 100644
--- a/packages/reports/src/Components/Form/CompositeCalendar/list-item.jsx
+++ b/packages/reports/src/Components/Form/CompositeCalendar/list-item.tsx
@@ -1,8 +1,13 @@
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import React from 'react';
 
-const ListItem = ({ onClick, is_active, label }) => (
+type TListItem = {
+    label: string | React.ReactElement | Array<string>;
+    is_active: boolean;
+    onClick: () => void;
+};
+
+const ListItem = ({ onClick, is_active, label }: TListItem) => (
     <li
         className={classNames({
             'composite-calendar__prepopulated-list--is-active': is_active,
@@ -13,10 +18,4 @@ const ListItem = ({ onClick, is_active, 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/Components/Form/CompositeCalendar/side-list.jsx b/packages/reports/src/Components/Form/CompositeCalendar/side-list.tsx
similarity index 54%
rename from packages/reports/src/Components/Form/CompositeCalendar/side-list.jsx
rename to packages/reports/src/Components/Form/CompositeCalendar/side-list.tsx
index 8425dcf81687..381451ac5281 100644
--- a/packages/reports/src/Components/Form/CompositeCalendar/side-list.jsx
+++ b/packages/reports/src/Components/Form/CompositeCalendar/side-list.tsx
@@ -1,29 +1,35 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { toMoment } from '@deriv/shared';
-import ListItem from './list-item.jsx';
+import ListItem from './list-item';
 
-const isActive = (from, to, flag) => {
+type TItem = {
+    value: string;
+    label: string;
+    onClick: () => void;
+    duration: number;
+};
+
+type TSideList = {
+    from: number;
+    items: Array<TItem>;
+    to: number;
+};
+
+const isActive = (from: number, to: number, flag: number) => {
     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 }) => (
+const SideList = ({ items, from, to }: TSideList) => (
     <ul className='composite-calendar__prepopulated-list'>
         {items.map(item => {
-            const { duration, ...rest_of_props } = item;
+            const { duration, label, onClick } = item;
             const is_active = isActive(from, to, duration);
-            return <ListItem key={duration} is_active={is_active} {...rest_of_props} />;
+            return <ListItem key={duration} is_active={is_active} label={label} onClick={onClick} />;
         })}
     </ul>
 );
 
-SideList.propTypes = {
-    from: PropTypes.number,
-    items: PropTypes.array,
-    to: PropTypes.number,
-};
-
 export default SideList;
diff --git a/packages/reports/src/Components/Form/CompositeCalendar/two-month-picker.jsx b/packages/reports/src/Components/Form/CompositeCalendar/two-month-picker.tsx
similarity index 64%
rename from packages/reports/src/Components/Form/CompositeCalendar/two-month-picker.jsx
rename to packages/reports/src/Components/Form/CompositeCalendar/two-month-picker.tsx
index d671140e0529..9bb520b216af 100644
--- a/packages/reports/src/Components/Form/CompositeCalendar/two-month-picker.jsx
+++ b/packages/reports/src/Components/Form/CompositeCalendar/two-month-picker.tsx
@@ -1,64 +1,76 @@
-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';
+import { addMonths, diffInMonths, subMonths, toMoment } from '@deriv/shared';
 
-const TwoMonthPicker = React.memo(({ onChange, isPeriodDisabled, value }) => {
-    const [left_pane_date, setLeftPaneDate] = React.useState(subMonths(value, 1).unix());
+type TTwoMonthPicker = {
+    onChange: (date: moment.MomentInput) => void;
+    isPeriodDisabled: (date: moment.Moment) => boolean;
+    value: moment.Moment;
+};
+
+const TwoMonthPicker = React.memo(({ onChange, isPeriodDisabled, value }: TTwoMonthPicker) => {
+    const [left_pane_date, setLeftPaneDate] = React.useState(toMoment(value).clone().subtract(1, 'month'));
     const [right_pane_date, setRightPaneDate] = React.useState(value);
 
-    const navigateFrom = e => {
-        setLeftPaneDate(e.unix());
-        setRightPaneDate(addMonths(e, 1).unix());
+    /**
+     * Navigate from date
+     *
+     * @param {moment.Moment} date
+     */
+    const navigateFrom = (date: moment.Moment) => {
+        setLeftPaneDate(date);
+        setRightPaneDate(addMonths(date.toISOString(), 1));
     };
 
     /**
-     * Only allow previous months to be available to navigate. Disable other periods
+     * Navigate to date
      *
-     * @param date
-     * @param range
-     * @returns {boolean}
+     * @param {moment.Moment} date
      */
-    const validateFromArrows = (date, range) => {
-        return range === 'year' || diffInMonths(epochToMoment(left_pane_date), date) !== -1;
+    const navigateTo = (date: moment.Moment) => {
+        setLeftPaneDate(subMonths(date.toISOString(), 1));
+        setRightPaneDate(toMoment(date));
     };
 
     /**
-     * Validate values to be date_from < date_to
+     * Only allow previous months to be available to navigate. Disable other periods
+     *
+     * @param {moment.Moment} date
      */
-    const shouldDisableDate = date => {
-        return isPeriodDisabled(date.unix());
+    const validateFromArrows = (date: moment.Moment) => {
+        return diffInMonths(toMoment(left_pane_date), date) !== -1;
     };
 
     /**
      * 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}
+     * @param {moment.Moment} date
      */
-    const validateToArrows = (date, range) => {
-        if (range === 'year') return true; // disallow year arrows
-        const r_date = epochToMoment(right_pane_date).startOf('month');
+    const validateToArrows = (date: moment.Moment) => {
+        const r_date = toMoment(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);
+    /**
+     * Validate values to be date_from < date_to
+     *
+     * @param {moment.Moment} date
+     */
+    const shouldDisableDate = (date: moment.Moment) => {
+        return isPeriodDisabled(date);
     };
 
-    const navigateTo = e => {
-        setLeftPaneDate(subMonths(e, 1).unix());
-        setRightPaneDate(toMoment(e).unix());
+    const jumpToCurrentMonth = () => {
+        const current_month = toMoment().endOf('month');
+        setLeftPaneDate(toMoment(current_month).endOf('month').subtract(1, 'month'));
+        setRightPaneDate(current_month);
     };
 
-    const updateSelectedDate = e => {
-        onChange(moment.utc(e.currentTarget.dataset.date, 'YYYY-MM-DD').unix());
+    const updateSelectedDate = (e: React.MouseEvent<HTMLElement>) => {
+        onChange(moment.utc(e.currentTarget.dataset.date, 'YYYY-MM-DD'));
     };
 
     return (
@@ -108,9 +120,4 @@ const TwoMonthPicker = React.memo(({ onChange, isPeriodDisabled, value }) => {
 
 TwoMonthPicker.displayName = 'TwoMonthPicker';
 
-TwoMonthPicker.propTypes = {
-    isPeriodDisabled: PropTypes.func,
-    onChange: PropTypes.func,
-    value: PropTypes.number,
-};
 export default TwoMonthPicker;
diff --git a/packages/reports/src/Components/Routes/__tests__/helpers.spec.js b/packages/reports/src/Components/Routes/__tests__/helpers.spec.tsx
similarity index 85%
rename from packages/reports/src/Components/Routes/__tests__/helpers.spec.js
rename to packages/reports/src/Components/Routes/__tests__/helpers.spec.tsx
index 228089ca5952..f3689561e8f0 100644
--- a/packages/reports/src/Components/Routes/__tests__/helpers.spec.js
+++ b/packages/reports/src/Components/Routes/__tests__/helpers.spec.tsx
@@ -1,20 +1,21 @@
-import React from 'react';
 import * as Helpers from '../helpers';
 import { routes } from '@deriv/shared';
 import getRoutesConfig from 'Constants/routes-config';
 
+const routesConfig = getRoutesConfig();
+
 describe('Helpers', () => {
     describe('findRouteByPath', () => {
         it('should return undefined when path is not in routes_config', () => {
-            expect(Helpers.findRouteByPath('invalidRoute', getRoutesConfig())).toBeUndefined();
+            expect(Helpers.findRouteByPath('invalidRoute', routesConfig)).toBeUndefined();
         });
         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).toBe(routes.reports);
+            const result = Helpers.findRouteByPath(routes.reports, routesConfig);
+            expect(result?.path).toBe(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(Object.keys(Helpers.findRouteByPath(routes.profit, getRoutesConfig()))).toEqual(
+            const reports_routes_length = getRoutesConfig().find(r => r.path === routes.reports)?.routes?.length;
+            expect(Object.keys(Helpers.findRouteByPath(routes.profit, getRoutesConfig()) || {})).toEqual(
                 expect.arrayContaining([
                     'path',
                     'component',
@@ -24,12 +25,12 @@ describe('Helpers', () => {
                     'getTitle',
                 ])
             );
-            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig()).routes).toBeInstanceOf(Array);
-            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig()).routes).toHaveLength(
+            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig())?.routes).toBeInstanceOf(Array);
+            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig())?.routes).toHaveLength(
                 reports_routes_length
             );
-            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig()).is_authenticated).toBe(true);
-            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig()).path).toBe(routes.reports);
+            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig())?.is_authenticated).toBe(true);
+            expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig())?.path).toBe(routes.reports);
         });
     });
 
@@ -50,7 +51,7 @@ describe('Helpers', () => {
 
     describe('getPath', () => {
         it('should return param values in params as a part of path', () => {
-            expect(Helpers.getPath('/contract/:contract_id', { contract_id: 37511105068 })).toBe(
+            expect(Helpers.getPath('/contract/:contract_id', { contract_id: '37511105068' })).toBe(
                 '/contract/37511105068'
             );
             expect(
diff --git a/packages/reports/src/Components/Routes/binary-link.jsx b/packages/reports/src/Components/Routes/binary-link.tsx
similarity index 50%
rename from packages/reports/src/Components/Routes/binary-link.jsx
rename to packages/reports/src/Components/Routes/binary-link.tsx
index 55f99c6324b8..c31ec9f34937 100644
--- a/packages/reports/src/Components/Routes/binary-link.jsx
+++ b/packages/reports/src/Components/Routes/binary-link.tsx
@@ -1,15 +1,16 @@
-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_appstore } = React.useContext(PlatformContext);
+type TBinaryLink = {
+    active_class: string;
+    to: string;
+};
 
-    const path = normalizePath(to);
-    const route = findRouteByPath(path, getRoutesConfig({ is_appstore }));
+const BinaryLink = ({ active_class, to, children, ...props }: React.PropsWithChildren<Partial<TBinaryLink>>) => {
+    const path = normalizePath(to!);
+    const route = findRouteByPath(path, getRoutesConfig());
 
     if (!route) {
         throw new Error(`Route not found: ${to}`);
@@ -24,10 +25,4 @@ const BinaryLink = ({ active_class, to, children, ...props }) => {
     );
 };
 
-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
deleted file mode 100644
index 5a1f542af729..000000000000
--- a/packages/reports/src/Components/Routes/binary-routes.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-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_appstore } = React.useContext(PlatformContext);
-
-    return (
-        <React.Suspense
-            fallback={() => {
-                return (
-                    <div>
-                        <Localize i18n_default_text='Loading...' />
-                    </div>
-                );
-            }}
-        >
-            <Switch>
-                {getRoutesConfig({ is_appstore }).map(route => (
-                    <RouteWithSubRoutes key={route.path} {...route} {...props} />
-                ))}
-            </Switch>
-        </React.Suspense>
-    );
-};
-
-export default BinaryRoutes;
diff --git a/packages/reports/src/Components/Routes/binary-routes.tsx b/packages/reports/src/Components/Routes/binary-routes.tsx
new file mode 100644
index 000000000000..cbe9c979ccb7
--- /dev/null
+++ b/packages/reports/src/Components/Routes/binary-routes.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Switch } from 'react-router-dom';
+import { Localize } from '@deriv/translations';
+import getRoutesConfig from '../../Constants/routes-config';
+import RouteWithSubRoutes from './route-with-sub-routes';
+import { TBinaryRoutes } from 'Types';
+
+const BinaryRoutes = (props: TBinaryRoutes) => {
+    return (
+        <React.Suspense
+            fallback={
+                <div>
+                    <Localize i18n_default_text='Loading...' />
+                </div>
+            }
+        >
+            <Switch>
+                {getRoutesConfig().map((route, idx) => (
+                    <RouteWithSubRoutes key={route.path ?? idx} {...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
deleted file mode 100644
index 6a16bfb56965..000000000000
--- a/packages/reports/src/Components/Routes/helpers.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { matchPath } from 'react-router';
-
-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);
diff --git a/packages/reports/src/Components/Routes/helpers.ts b/packages/reports/src/Components/Routes/helpers.ts
new file mode 100644
index 000000000000..e9040957d76a
--- /dev/null
+++ b/packages/reports/src/Components/Routes/helpers.ts
@@ -0,0 +1,36 @@
+import { match, matchPath, RouteProps } from 'react-router';
+import { TRouteConfig } from 'Types';
+
+export const normalizePath = (path: string) => (/^\//.test(path) ? path : `/${path || ''}`); // Default to '/'
+
+export const findRouteByPath = (path: string, routes_config?: TRouteConfig[]): RouteProps | undefined => {
+    let result: RouteProps | undefined;
+
+    routes_config?.some(route_info => {
+        let match_path: match | null = null;
+        try {
+            match_path = matchPath(path, route_info);
+        } catch (e: unknown) {
+            if (/undefined/.test((e as Error).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?: { path: string; is_authenticated: boolean }, is_logged_in?: boolean) =>
+    !(route && route.is_authenticated && !is_logged_in);
+
+export const getPath = (route_path: string, params: { [key: string]: string } = {}) =>
+    Object.keys(params).reduce((p, name) => p.replace(`:${name}`, params[name]), route_path);
diff --git a/packages/reports/src/Components/Routes/index.js b/packages/reports/src/Components/Routes/index.js
deleted file mode 100644
index 061bdf961719..000000000000
--- a/packages/reports/src/Components/Routes/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-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/index.ts b/packages/reports/src/Components/Routes/index.ts
new file mode 100644
index 000000000000..ecff56bd3670
--- /dev/null
+++ b/packages/reports/src/Components/Routes/index.ts
@@ -0,0 +1,7 @@
+import BinaryLink from './binary-link';
+import RouteWithSubRoutes from './route-with-sub-routes';
+import BinaryRoutes from './binary-routes';
+
+export * from './helpers';
+export { BinaryLink, RouteWithSubRoutes };
+export default BinaryRoutes;
diff --git a/packages/reports/src/Components/Routes/route-with-sub-routes.jsx b/packages/reports/src/Components/Routes/route-with-sub-routes.tsx
similarity index 74%
rename from packages/reports/src/Components/Routes/route-with-sub-routes.jsx
rename to packages/reports/src/Components/Routes/route-with-sub-routes.tsx
index bc0074e36977..6d13fa082740 100644
--- a/packages/reports/src/Components/Routes/route-with-sub-routes.jsx
+++ b/packages/reports/src/Components/Routes/route-with-sub-routes.tsx
@@ -1,10 +1,14 @@
 import React from 'react';
 import { Redirect, Route } from 'react-router-dom';
+import { RouteComponentProps } from 'react-router';
 import { redirectToLogin, isEmptyObject, routes, removeBranchName, default_title } from '@deriv/shared';
 import { getLanguage } from '@deriv/translations';
+import type { TBinaryRoutes, TRoute } from 'Types';
 
-const RouteWithSubRoutes = route => {
-    const renderFactory = props => {
+type TRouteWithSubRoutes = TRoute & TBinaryRoutes;
+
+const RouteWithSubRoutes = (route: TRouteWithSubRoutes) => {
+    const renderFactory = (props: RouteComponentProps) => {
         let result = null;
         if (route.component === Redirect) {
             let to = route.to;
@@ -18,13 +22,16 @@ const RouteWithSubRoutes = route => {
         } else if (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 default_subroute = route.routes ? route.routes.find(r => r.default) : { path: '' };
             const has_default_subroute = !isEmptyObject(default_subroute);
             const pathname = removeBranchName(location.pathname);
+
+            const RouteComponent = route.component as React.ElementType;
+
             result = (
                 <React.Fragment>
-                    {has_default_subroute && pathname === route.path && <Redirect to={default_subroute.path} />}
-                    <route.component {...props} routes={route.routes} />
+                    {has_default_subroute && pathname === route.path && <Redirect to={default_subroute?.path} />}
+                    <RouteComponent {...props} routes={route.routes} />
                 </React.Fragment>
             );
         }
diff --git a/packages/reports/src/Components/account-statistics.jsx b/packages/reports/src/Components/account-statistics.tsx
similarity index 89%
rename from packages/reports/src/Components/account-statistics.jsx
rename to packages/reports/src/Components/account-statistics.tsx
index 2e2c3e3c5863..2a1b605c4e51 100644
--- a/packages/reports/src/Components/account-statistics.jsx
+++ b/packages/reports/src/Components/account-statistics.tsx
@@ -1,10 +1,17 @@
 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 }) => {
+type TAccountStatistics = {
+    account_statistics: {
+        total_withdrawals: number;
+        total_deposits: number;
+    };
+    currency: string;
+};
+
+const AccountStatistics = ({ account_statistics, currency }: TAccountStatistics) => {
     return (
         <div className='statement__account-statistics'>
             <div className='statement__account-statistics-item'>
@@ -59,12 +66,8 @@ const AccountStatistics = ({ account_statistics, currency }) => {
     );
 };
 
-AccountStatistics.propTypes = {
-    account_statistics: PropTypes.object,
-    currency: PropTypes.string,
-};
-
-export default connect(({ modules, client }) => ({
+// TODO: implement reports store TRootStore in types.ts
+export default connect(({ modules, client }: any) => ({
     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
deleted file mode 100644
index b2d3d7a74068..000000000000
--- a/packages/reports/src/Components/amount-cell.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { getProfitOrLoss } from '../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.tsx
similarity index 65%
rename from packages/reports/src/Components/currency-wrapper.jsx
rename to packages/reports/src/Components/currency-wrapper.tsx
index bb4273052781..ba3d5ef745f2 100644
--- a/packages/reports/src/Components/currency-wrapper.jsx
+++ b/packages/reports/src/Components/currency-wrapper.tsx
@@ -1,8 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Text } from '@deriv/components';
 
-const CurrencyWrapper = ({ currency }) => (
+type TCurrencyWrapper = {
+    currency: string;
+};
+
+const CurrencyWrapper = ({ currency }: TCurrencyWrapper) => (
     <div className='currency__wrapper'>
         <Text color='colored-background' weight='bold' size='xxxs'>
             {currency}
@@ -10,8 +13,4 @@ const CurrencyWrapper = ({ currency }) => (
     </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.tsx
similarity index 88%
rename from packages/reports/src/Components/empty-portfolio-message.jsx
rename to packages/reports/src/Components/empty-portfolio-message.tsx
index 5f26070b2c88..9a36c46f6d14 100644
--- a/packages/reports/src/Components/empty-portfolio-message.jsx
+++ b/packages/reports/src/Components/empty-portfolio-message.tsx
@@ -2,7 +2,11 @@ import React from 'react';
 import { Icon, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 
-const EmptyPortfolioMessage = ({ error }) => (
+type TEmptyPortfolioMessage = {
+    error: string;
+};
+
+const EmptyPortfolioMessage = ({ error }: TEmptyPortfolioMessage) => (
     <div className='portfolio-empty'>
         <div className='portfolio-empty__wrapper'>
             {error ? (
diff --git a/packages/reports/src/Components/empty-trade-history-message.jsx b/packages/reports/src/Components/empty-trade-history-message.tsx
similarity index 76%
rename from packages/reports/src/Components/empty-trade-history-message.jsx
rename to packages/reports/src/Components/empty-trade-history-message.tsx
index c044b42ba981..ea40301311c4 100644
--- a/packages/reports/src/Components/empty-trade-history-message.jsx
+++ b/packages/reports/src/Components/empty-trade-history-message.tsx
@@ -1,13 +1,19 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Icon, Text } from '@deriv/components';
 
+type TEmptyTradeHistoryMessage = {
+    component_icon: string;
+    has_selected_date: boolean;
+    localized_message: string;
+    localized_period_message: string;
+};
+
 const EmptyTradeHistoryMessage = ({
     has_selected_date,
     component_icon,
     localized_message,
     localized_period_message,
-}) => (
+}: TEmptyTradeHistoryMessage) => (
     <React.Fragment>
         <div className='empty-trade-history'>
             <Icon
@@ -24,11 +30,4 @@ const EmptyTradeHistoryMessage = ({
     </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.tsx
similarity index 80%
rename from packages/reports/src/Components/filter-component.jsx
rename to packages/reports/src/Components/filter-component.tsx
index 316995b171ff..608c1e6de178 100644
--- a/packages/reports/src/Components/filter-component.jsx
+++ b/packages/reports/src/Components/filter-component.tsx
@@ -1,9 +1,24 @@
 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 './Form/CompositeCalendar';
+import { TRootStore } from 'Stores/index';
+
+type TFilterComponent = {
+    action_type: string;
+    date_from: number;
+    date_to: number;
+    filtered_date_range: {
+        duration: number;
+        label: string;
+        onClick?: () => void;
+        value?: string;
+    };
+    handleDateChange: () => void;
+    handleFilterChange: () => void;
+    suffix_icon: string;
+};
 
 const FilterComponent = ({
     action_type,
@@ -12,7 +27,7 @@ const FilterComponent = ({
     handleFilterChange,
     handleDateChange,
     filtered_date_range,
-}) => {
+}: TFilterComponent) => {
     const filter_list = [
         {
             text: localize('All transactions'),
@@ -58,17 +73,7 @@ const FilterComponent = ({
     );
 };
 
-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 }) => ({
+export default connect(({ modules }: TRootStore) => ({
     action_type: modules.statement.action_type,
     data: modules.statement.data,
     date_from: modules.statement.date_from,
diff --git a/packages/reports/src/Components/index.js b/packages/reports/src/Components/index.js
deleted file mode 100644
index d498bb957778..000000000000
--- a/packages/reports/src/Components/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import EmptyPortfolioMessage from './empty-portfolio-message.jsx';
-
-export default EmptyPortfolioMessage;
diff --git a/packages/reports/src/Components/index.ts b/packages/reports/src/Components/index.ts
new file mode 100644
index 000000000000..f6aad7b8b061
--- /dev/null
+++ b/packages/reports/src/Components/index.ts
@@ -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.tsx
similarity index 70%
rename from packages/reports/src/Components/indicative-cell.jsx
rename to packages/reports/src/Components/indicative-cell.tsx
index 622cab8bfc18..fcf20ab2ccdf 100644
--- a/packages/reports/src/Components/indicative-cell.jsx
+++ b/packages/reports/src/Components/indicative-cell.tsx
@@ -1,11 +1,28 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Icon, Money, DesktopWrapper, ContractCard } from '@deriv/components';
-import { getCardLabels } from '_common/contract';
+import { getCardLabels, TContractInfo } from '@deriv/shared';
 import { connect } from 'Stores/connect';
+import { TRootStore } from 'Stores/index';
 
-const IndicativeCell = ({ amount, currency, contract_info, is_footer, onClickSell, is_sell_requested }) => {
-    const [movement, setMovement] = React.useState(null);
+type TIndicativeCell = {
+    amount: number;
+    contract_info: TContractInfo;
+    currency: string;
+    status: string;
+    is_footer: boolean;
+    is_sell_requested: boolean;
+    onClickSell: () => void;
+};
+
+const IndicativeCell = ({
+    amount,
+    currency,
+    contract_info,
+    is_footer,
+    onClickSell,
+    is_sell_requested,
+}: TIndicativeCell) => {
+    const [movement, setMovement] = React.useState<string | null>(null);
     const [amount_state, setAmountState] = React.useState(0);
 
     React.useEffect(() => {
@@ -40,16 +57,6 @@ const IndicativeCell = ({ amount, currency, contract_info, is_footer, onClickSel
     );
 };
 
-IndicativeCell.propTypes = {
-    amount: PropTypes.number,
-    contract_info: PropTypes.object,
-    currency: PropTypes.string,
-    status: PropTypes.string,
-    is_footer: PropTypes.bool,
-    is_sell_requested: PropTypes.func,
-    onClickSell: PropTypes.func,
-};
-
-export default connect(({ portfolio }) => ({
+export default connect(({ portfolio }: TRootStore) => ({
     onClickSell: portfolio.onClickSell,
 }))(IndicativeCell);
diff --git a/packages/reports/src/Components/market-symbol-icon-row.jsx b/packages/reports/src/Components/market-symbol-icon-row.tsx
similarity index 82%
rename from packages/reports/src/Components/market-symbol-icon-row.jsx
rename to packages/reports/src/Components/market-symbol-icon-row.tsx
index 2a72cd29ac1f..4776b53ee7ac 100644
--- a/packages/reports/src/Components/market-symbol-icon-row.jsx
+++ b/packages/reports/src/Components/market-symbol-icon-row.tsx
@@ -1,9 +1,21 @@
-import classNames from 'classnames';
-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 classNames from 'classnames';
+
+type TMarketSymbolIconRow = {
+    icon?: string | null;
+    payload: {
+        shortcode: string;
+        display_name: string;
+        action_type: string;
+    };
+    show_description?: boolean;
+    should_show_multiplier?: boolean;
+    should_show_accumulator?: boolean;
+    is_vanilla?: boolean;
+};
 
 const MarketSymbolIconRow = ({
     icon,
@@ -12,15 +24,15 @@ const MarketSymbolIconRow = ({
     should_show_accumulator = true,
     should_show_multiplier = true,
     is_vanilla,
-}) => {
+}: TMarketSymbolIconRow) => {
     const should_show_category_icon = typeof payload.shortcode === 'string';
     const info_from_shortcode = extractInfoFromShortcode(payload.shortcode);
     const is_high_low = isHighLow({ shortcode_info: info_from_shortcode });
 
     // We need the condition to update the label for vanilla trade type since the label doesn't match with the trade type key unlike other contracts
     const category_label = is_vanilla
-        ? info_from_shortcode.category.replace('Vanillalong', '').charAt(0).toUpperCase() +
-          info_from_shortcode.category.replace('Vanillalong', '').slice(1)
+        ? (info_from_shortcode.category as string).replace('Vanillalong', '').charAt(0).toUpperCase() +
+          (info_from_shortcode.category as string).replace('Vanillalong', '').slice(1)
         : info_from_shortcode.category;
 
     if (should_show_category_icon && info_from_shortcode) {
@@ -31,7 +43,7 @@ const MarketSymbolIconRow = ({
                         classNameTarget='market-symbol-icon__popover'
                         classNameBubble='market-symbol-icon__popover-bubble'
                         alignment='top'
-                        message={getMarketName(info_from_shortcode.underlying)}
+                        message={getMarketName(info_from_shortcode.underlying as string)}
                         is_bubble_hover_enabled
                         disable_target_icon
                     >
@@ -52,15 +64,15 @@ const MarketSymbolIconRow = ({
                         classNameTarget='category-type-icon__popover'
                         classNameBubble='category-type-icon__popover-bubble'
                         alignment='top'
-                        message={getTradeTypeName(info_from_shortcode.category, is_high_low)}
+                        message={getTradeTypeName(info_from_shortcode.category as string, is_high_low)}
                         is_bubble_hover_enabled
                         disable_target_icon
                     >
                         <IconTradeTypes
                             type={
                                 is_high_low
-                                    ? `${info_from_shortcode.category.toLowerCase()}_barrier`
-                                    : info_from_shortcode.category.toLowerCase()
+                                    ? `${(info_from_shortcode.category as string).toLowerCase()}_barrier`
+                                    : (info_from_shortcode.category as string).toLowerCase()
                             }
                             color='brand'
                         />
@@ -71,7 +83,9 @@ const MarketSymbolIconRow = ({
                     <div className='market-symbol-icon__multiplier'>x{info_from_shortcode.multiplier}</div>
                 )}
                 {should_show_accumulator && info_from_shortcode.growth_rate && (
-                    <div className='market-symbol-icon__multiplier'>{info_from_shortcode.growth_rate * 100}%</div>
+                    <div className='market-symbol-icon__multiplier'>
+                        {(info_from_shortcode.growth_rate as number) * 100}%
+                    </div>
                 )}
             </div>
         );
@@ -101,13 +115,4 @@ const MarketSymbolIconRow = ({
     );
 };
 
-MarketSymbolIconRow.propTypes = {
-    icon: PropTypes.node,
-    is_vanilla: PropTypes.bool,
-    payload: PropTypes.object,
-    show_description: PropTypes.bool,
-    should_show_multiplier: PropTypes.bool,
-    should_show_accumulator: PropTypes.bool,
-};
-
 export default MarketSymbolIconRow;
diff --git a/packages/reports/src/Components/placeholder-component.tsx b/packages/reports/src/Components/placeholder-component.tsx
new file mode 100644
index 000000000000..a4190e35f6f7
--- /dev/null
+++ b/packages/reports/src/Components/placeholder-component.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import Loading from '_common/components/loading';
+
+type TPlaceholderComponent = {
+    component_icon?: string;
+    empty_message_component?: React.ElementType;
+    has_selected_date?: boolean;
+    is_empty?: boolean;
+    is_loading?: boolean;
+    localized_message?: string;
+    localized_period_message?: string;
+};
+
+const PlaceholderComponent = ({
+    component_icon,
+    empty_message_component,
+    has_selected_date,
+    is_empty,
+    is_loading,
+    localized_message,
+    localized_period_message,
+}: TPlaceholderComponent) => {
+    const EmptyMessageComponent = empty_message_component;
+    return (
+        <React.Fragment>
+            {is_empty && (
+                <EmptyMessageComponent
+                    component_icon={component_icon}
+                    has_selected_date={has_selected_date}
+                    localized_message={localized_message}
+                    localized_period_message={localized_period_message}
+                />
+            )}
+            {is_loading && <Loading />}
+        </React.Fragment>
+    );
+};
+
+export default PlaceholderComponent;
diff --git a/packages/reports/src/Components/profit_loss_cell.jsx b/packages/reports/src/Components/profit_loss_cell.tsx
similarity index 57%
rename from packages/reports/src/Components/profit_loss_cell.jsx
rename to packages/reports/src/Components/profit_loss_cell.tsx
index 798fa8eacf4d..4467be05f091 100644
--- a/packages/reports/src/Components/profit_loss_cell.jsx
+++ b/packages/reports/src/Components/profit_loss_cell.tsx
@@ -1,16 +1,15 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { getProfitOrLoss } from '../Helpers/profit-loss';
 
-const ProfitLossCell = ({ value, children }) => {
+type TProfitLossCell = {
+    value: string;
+    children: React.ReactNode;
+};
+
+const ProfitLossCell = ({ value, children }: TProfitLossCell) => {
     const status = getProfitOrLoss(value);
 
     return <span className={`amount--${status}`}>{children}</span>;
 };
 
-ProfitLossCell.propTypes = {
-    children: PropTypes.node,
-    value: PropTypes.string,
-};
-
 export default ProfitLossCell;
diff --git a/packages/reports/src/Components/reports-meta.jsx b/packages/reports/src/Components/reports-meta.jsx
deleted file mode 100644
index aec529493d5e..000000000000
--- a/packages/reports/src/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/reports/src/Components/reports-meta.tsx b/packages/reports/src/Components/reports-meta.tsx
new file mode 100644
index 000000000000..25f72d8353c5
--- /dev/null
+++ b/packages/reports/src/Components/reports-meta.tsx
@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+import React from 'react';
+
+type TReportsMeta = {
+    filter_component: React.ReactNode;
+    optional_component?: React.ReactNode;
+    className?: string;
+    is_statement?: boolean;
+};
+
+const ReportsMeta = ({ filter_component, className, optional_component, is_statement }: TReportsMeta) => {
+    return (
+        <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.tsx
similarity index 78%
rename from packages/reports/src/Constants/data-table-constants.js
rename to packages/reports/src/Constants/data-table-constants.tsx
index b99e76688e99..81dc94859060 100644
--- a/packages/reports/src/Constants/data-table-constants.js
+++ b/packages/reports/src/Constants/data-table-constants.tsx
@@ -7,44 +7,49 @@ import {
     getTotalProfit,
     shouldShowCancellation,
     getGrowthRatePercentage,
+    getCardLabels,
 } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
-import ProgressSliderStream from '../Containers/progress-slider-stream.jsx';
-
-import { getCardLabels } from '_common/contract';
+import ProgressSliderStream from '../Containers/progress-slider-stream';
+import { TCellContentProps, THeaderProps } from 'Types';
 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 IndicativeCell from '../Components/indicative-cell';
+import MarketSymbolIconRow from '../Components/market-symbol-icon-row';
+import ProfitLossCell from '../Components/profit_loss_cell';
+import CurrencyWrapper from '../Components/currency-wrapper';
+import { ITransformer } from 'mobx-utils';
+
+const map = {
+    buy: 'success',
+    deposit: 'success',
+    hold: 'warn',
+    release: 'success',
+    sell: 'danger',
+    withdrawal: 'info',
+    default: 'default',
+    adjustment: 'adjustment',
+    transfer: 'transfer',
+} as const;
 
-const getModeFromValue = key => {
-    const map = {
-        buy: 'success',
-        deposit: 'success',
-        hold: 'warn',
-        release: 'success',
-        sell: 'danger',
-        withdrawal: 'info',
-        default: 'default',
-        adjustment: 'adjustment',
-        transfer: 'transfer',
-    };
+export type TKeys = keyof typeof map;
 
-    if (Object.keys(map).find(x => x === key)) {
-        return map[key];
-    }
+const getModeFromValue = (key: TKeys) => map[key] || map.default;
 
-    return map.default;
+type TMultiplierOpenPositionstemplateProps = {
+    currency: string;
+    onClickCancel: () => void;
+    onClickSell: () => void;
+    getPositionById: (id: string) => ITransformer<any, any>;
+    server_time: moment.Moment;
 };
 
 /* eslint-disable react/display-name, react/prop-types */
-export const getStatementTableColumnsTemplate = currency => [
+export const getStatementTableColumnsTemplate = (currency: string) => [
     {
         key: 'icon',
         title: isMobile() ? '' : localize('Type'),
         col_index: 'icon',
-        renderCellContent: ({ passthrough, row_obj }) => {
+        renderCellContent: ({ passthrough, row_obj }: TCellContentProps) => {
             const icon = passthrough.isTopUp(row_obj) ? 'icCashierTopUp' : null;
             return <MarketSymbolIconRow icon={icon} key={row_obj.transaction_id} payload={row_obj} />;
         },
@@ -52,7 +57,7 @@ export const getStatementTableColumnsTemplate = currency => [
     {
         title: localize('Ref. ID'),
         col_index: 'refid',
-        renderCellContent: ({ cell_value, row_obj }) => {
+        renderCellContent: ({ cell_value, row_obj }: TCellContentProps) => {
             return (
                 <Popover
                     alignment={'top'}
@@ -71,7 +76,7 @@ export const getStatementTableColumnsTemplate = currency => [
     {
         title: localize('Transaction time'),
         col_index: 'date',
-        renderCellContent: ({ cell_value }) => {
+        renderCellContent: ({ cell_value }: TCellContentProps) => {
             return <span>{cell_value} GMT</span>;
         },
     },
@@ -79,7 +84,7 @@ export const getStatementTableColumnsTemplate = currency => [
         key: 'mode',
         title: localize('Transaction'),
         col_index: 'action_type',
-        renderCellContent: ({ cell_value, passthrough, row_obj }) => (
+        renderCellContent: ({ cell_value, passthrough, row_obj }: TCellContentProps) => (
             <Label mode={getModeFromValue(cell_value)}>
                 {(passthrough.isTopUp(row_obj) && localize('Top up')) || row_obj.action}
             </Label>
@@ -88,7 +93,7 @@ export const getStatementTableColumnsTemplate = currency => [
     {
         title: localize('Credit/Debit'),
         col_index: 'amount',
-        renderCellContent: ({ cell_value }) => (
+        renderCellContent: ({ cell_value }: TCellContentProps) => (
             <div className={`amount--${getProfitOrLoss(cell_value)}`}>
                 <Money has_sign amount={cell_value.replace(/[,]+/g, '')} currency={currency} />
             </div>
@@ -97,15 +102,17 @@ export const getStatementTableColumnsTemplate = currency => [
     {
         title: localize('Balance'),
         col_index: 'balance',
-        renderCellContent: ({ cell_value }) => <Money amount={cell_value.replace(/[,]+/g, '')} currency={currency} />,
+        renderCellContent: ({ cell_value }: TCellContentProps) => (
+            <Money amount={cell_value.replace(/[,]+/g, '')} currency={currency} />
+        ),
     },
 ];
-export const getProfitTableColumnsTemplate = (currency, items_count) => [
+export const getProfitTableColumnsTemplate = (currency: string, items_count: number) => [
     {
         key: 'icon',
         title: isMobile() ? '' : localize('Type'),
         col_index: 'action_type',
-        renderCellContent: ({ row_obj, is_footer }) => {
+        renderCellContent: ({ row_obj, is_footer }: TCellContentProps) => {
             if (is_footer) {
                 return localize('Profit/loss on the last {{item_count}} contracts', { item_count: items_count });
             }
@@ -119,13 +126,13 @@ export const getProfitTableColumnsTemplate = (currency, items_count) => [
     {
         title: localize('Currency'),
         col_index: 'currency',
-        renderCellContent: ({ is_footer }) =>
+        renderCellContent: ({ is_footer }: TCellContentProps) =>
             is_footer ? '' : <CurrencyWrapper currency={getCurrencyDisplayCode(currency)} />,
     },
     {
         title: localize('Buy time'),
         col_index: 'purchase_time',
-        renderCellContent: ({ cell_value, is_footer }) => {
+        renderCellContent: ({ cell_value, is_footer }: TCellContentProps) => {
             if (is_footer) return '';
             return <span>{cell_value} GMT</span>;
         },
@@ -133,7 +140,7 @@ export const getProfitTableColumnsTemplate = (currency, items_count) => [
     {
         title: localize('Buy price'),
         col_index: 'buy_price',
-        renderCellContent: ({ cell_value, is_footer }) => {
+        renderCellContent: ({ cell_value, is_footer }: TCellContentProps) => {
             if (is_footer) return '';
 
             return <Money amount={cell_value} currency={currency} />;
@@ -142,8 +149,8 @@ export const getProfitTableColumnsTemplate = (currency, items_count) => [
     {
         title: localize('Sell time'),
         col_index: 'sell_time',
-        renderHeader: ({ title }) => <span>{title}</span>,
-        renderCellContent: ({ cell_value, is_footer }) => {
+        renderHeader: ({ title }: THeaderProps) => <span>{title}</span>,
+        renderCellContent: ({ cell_value, is_footer }: TCellContentProps) => {
             if (is_footer) return '';
             return <span>{cell_value} GMT</span>;
         },
@@ -151,7 +158,7 @@ export const getProfitTableColumnsTemplate = (currency, items_count) => [
     {
         title: localize('Sell price'),
         col_index: 'sell_price',
-        renderCellContent: ({ cell_value, is_footer }) => {
+        renderCellContent: ({ cell_value, is_footer }: TCellContentProps) => {
             if (is_footer) return '';
 
             return <Money amount={cell_value} currency={currency} />;
@@ -160,19 +167,19 @@ export const getProfitTableColumnsTemplate = (currency, items_count) => [
     {
         title: localize('Profit / Loss'),
         col_index: 'profit_loss',
-        renderCellContent: ({ cell_value }) => (
+        renderCellContent: ({ cell_value }: TCellContentProps) => (
             <ProfitLossCell value={cell_value}>
                 <Money has_sign amount={cell_value.replace(/[,]+/g, '')} currency={currency} />
             </ProfitLossCell>
         ),
     },
 ];
-export const getOpenPositionsColumnsTemplate = currency => [
+export const getOpenPositionsColumnsTemplate = (currency: string) => [
     {
         key: 'icon',
         title: isMobile() ? '' : localize('Type'),
         col_index: 'type',
-        renderCellContent: ({ row_obj, is_footer, is_vanilla }) => {
+        renderCellContent: ({ row_obj, is_footer, is_vanilla }: TCellContentProps) => {
             if (is_footer) return localize('Total');
 
             return (
@@ -192,20 +199,20 @@ export const getOpenPositionsColumnsTemplate = currency => [
     {
         title: localize('Currency'),
         col_index: 'currency',
-        renderCellContent: ({ row_obj }) => (
+        renderCellContent: ({ row_obj }: TCellContentProps) => (
             <CurrencyWrapper currency={getCurrencyDisplayCode(row_obj.contract_info?.currency)} />
         ),
     },
     {
         title: localize('Buy price'),
         col_index: 'purchase',
-        renderCellContent: ({ cell_value }) => <Money amount={cell_value} currency={currency} />,
+        renderCellContent: ({ cell_value }: TCellContentProps) => <Money amount={cell_value} currency={currency} />,
     },
     {
         title: localize('Payout limit'),
         col_index: 'payout',
-        renderHeader: ({ title, is_vanilla }) => <span>{is_vanilla ? localize('Strike') : title}</span>,
-        renderCellContent: ({ cell_value, row_obj, is_vanilla }) => {
+        renderHeader: ({ title, is_vanilla }: THeaderProps) => <span>{is_vanilla ? localize('Strike') : title}</span>,
+        renderCellContent: ({ cell_value, row_obj, is_vanilla }: TCellContentProps) => {
             const non_vanilla_payout = cell_value ? <Money amount={cell_value} currency={currency} /> : <span>-</span>;
             return is_vanilla ? row_obj.barrier?.toFixed(2) : non_vanilla_payout;
         },
@@ -213,7 +220,7 @@ export const getOpenPositionsColumnsTemplate = currency => [
     {
         title: localize('Indicative profit/loss'),
         col_index: 'profit',
-        renderCellContent: ({ row_obj }) => {
+        renderCellContent: ({ row_obj }: TCellContentProps) => {
             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
@@ -235,7 +242,7 @@ export const getOpenPositionsColumnsTemplate = currency => [
     {
         title: localize('Indicative price'),
         col_index: 'indicative',
-        renderCellContent: ({ cell_value, row_obj, is_footer }) => (
+        renderCellContent: ({ cell_value, row_obj, is_footer }: TCellContentProps) => (
             <IndicativeCell
                 amount={+cell_value}
                 currency={currency}
@@ -248,7 +255,9 @@ export const getOpenPositionsColumnsTemplate = currency => [
     {
         title: localize('Remaining time'),
         col_index: 'id',
-        renderCellContent: ({ row_obj }) => <ProgressSliderStream contract_info={row_obj.contract_info} />,
+        renderCellContent: ({ row_obj }: TCellContentProps) => (
+            <ProgressSliderStream contract_info={row_obj.contract_info} />
+        ),
     },
 ];
 
@@ -258,11 +267,11 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({
     onClickSell,
     getPositionById,
     server_time,
-}) => [
+}: TMultiplierOpenPositionstemplateProps) => [
     {
         title: isMobile() ? '' : localize('Type'),
         col_index: 'type',
-        renderCellContent: ({ row_obj, is_footer }) => {
+        renderCellContent: ({ row_obj, is_footer }: TCellContentProps) => {
             if (is_footer) return localize('Total');
 
             return (
@@ -273,20 +282,20 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({
     {
         title: localize('Multiplier'),
         col_index: 'multiplier',
-        renderCellContent: ({ row_obj }) =>
+        renderCellContent: ({ row_obj }: TCellContentProps) =>
             row_obj.contract_info && row_obj.contract_info.multiplier ? `x${row_obj.contract_info.multiplier}` : '',
     },
     {
         title: localize('Currency'),
         col_index: 'currency',
-        renderCellContent: ({ row_obj }) => (
+        renderCellContent: ({ row_obj }: TCellContentProps) => (
             <CurrencyWrapper currency={getCurrencyDisplayCode(row_obj.contract_info?.currency)} />
         ),
     },
     {
         title: localize('Stake'),
         col_index: 'buy_price',
-        renderCellContent: ({ row_obj }) => {
+        renderCellContent: ({ row_obj }: TCellContentProps) => {
             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} />;
@@ -297,7 +306,7 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({
     {
         title: localize('Deal cancel. fee'),
         col_index: 'cancellation',
-        renderCellContent: ({ row_obj }) => {
+        renderCellContent: ({ row_obj }: TCellContentProps) => {
             if (!row_obj.contract_info || !row_obj.contract_info.underlying) return '-';
 
             if (!shouldShowCancellation(row_obj.contract_info.underlying)) return localize('N/A');
@@ -315,12 +324,12 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({
             <Localize i18n_default_text='Buy price' />
         ),
         col_index: 'purchase',
-        renderCellContent: ({ cell_value }) => <Money amount={cell_value} currency={currency} />,
+        renderCellContent: ({ cell_value }: TCellContentProps) => <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 }) => {
+        renderCellContent: ({ row_obj, is_footer }: TCellContentProps) => {
             if (is_footer) {
                 return '';
             }
@@ -349,7 +358,7 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({
     {
         title: localize('Current stake'),
         col_index: 'bid_price',
-        renderCellContent: ({ row_obj, is_footer }) => {
+        renderCellContent: ({ row_obj, is_footer }: TCellContentProps) => {
             if (is_footer) {
                 return '';
             }
@@ -376,7 +385,7 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({
             <Localize i18n_default_text='Total<0 />profit/loss' components={[<br key={0} />]} />
         ),
         col_index: 'profit',
-        renderCellContent: ({ row_obj }) => {
+        renderCellContent: ({ row_obj }: TCellContentProps) => {
             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
@@ -398,7 +407,7 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({
     {
         title: localize('Action'),
         col_index: 'action',
-        renderCellContent: ({ row_obj, is_footer }) => {
+        renderCellContent: ({ row_obj, is_footer }: TCellContentProps) => {
             if (is_footer) {
                 return <div className='open-positions__row-action' />;
             }
@@ -423,11 +432,15 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({
     },
 ];
 
-export const getAccumulatorOpenPositionsColumnsTemplate = ({ currency, onClickSell, getPositionById }) => [
+export const getAccumulatorOpenPositionsColumnsTemplate = ({
+    currency,
+    onClickSell,
+    getPositionById,
+}: TMultiplierOpenPositionstemplateProps) => [
     {
         title: isMobile() ? '' : localize('Type'),
         col_index: 'type',
-        renderCellContent: ({ row_obj, is_footer }) => {
+        renderCellContent: ({ row_obj, is_footer }: TCellContentProps) => {
             if (is_footer) return localize('Total');
 
             return (
@@ -443,7 +456,7 @@ export const getAccumulatorOpenPositionsColumnsTemplate = ({ currency, onClickSe
     {
         title: localize('Accumulate'),
         col_index: 'accumulator',
-        renderCellContent: ({ row_obj }) =>
+        renderCellContent: ({ row_obj }: TCellContentProps) =>
             row_obj.contract_info && row_obj.contract_info.growth_rate
                 ? `${getGrowthRatePercentage(row_obj.contract_info.growth_rate)}%`
                 : '',
@@ -451,14 +464,14 @@ export const getAccumulatorOpenPositionsColumnsTemplate = ({ currency, onClickSe
     {
         title: localize('Currency'),
         col_index: 'currency',
-        renderCellContent: ({ row_obj }) => (
+        renderCellContent: ({ row_obj }: TCellContentProps) => (
             <CurrencyWrapper currency={getCurrencyDisplayCode(row_obj.contract_info?.currency)} />
         ),
     },
     {
         title: isMobile() ? localize('Total stake') : localize('Stake'),
         col_index: isMobile() ? 'purchase' : 'buy_price',
-        renderCellContent: ({ row_obj }) => {
+        renderCellContent: ({ row_obj }: TCellContentProps) => {
             if (row_obj.contract_info) {
                 return <Money amount={row_obj.contract_info.buy_price} currency={currency} />;
             }
@@ -468,7 +481,7 @@ export const getAccumulatorOpenPositionsColumnsTemplate = ({ currency, onClickSe
     {
         title: localize('Take profit'),
         col_index: 'limit_order',
-        renderCellContent: ({ row_obj }) => {
+        renderCellContent: ({ row_obj }: TCellContentProps) => {
             const { take_profit } = row_obj.contract_info?.limit_order || {};
             return (
                 <div>
@@ -484,7 +497,7 @@ export const getAccumulatorOpenPositionsColumnsTemplate = ({ currency, onClickSe
     {
         title: localize('Current stake'),
         col_index: 'bid_price',
-        renderCellContent: ({ row_obj }) => {
+        renderCellContent: ({ row_obj }: TCellContentProps) => {
             if (!row_obj.contract_info || !row_obj.contract_info.bid_price) return '-';
 
             const total_profit = getTotalProfit(row_obj.contract_info);
@@ -503,7 +516,7 @@ export const getAccumulatorOpenPositionsColumnsTemplate = ({ currency, onClickSe
     {
         title: localize('Total profit/loss'),
         col_index: 'profit',
-        renderCellContent: ({ row_obj }) => {
+        renderCellContent: ({ row_obj }: TCellContentProps) => {
             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
@@ -525,7 +538,7 @@ export const getAccumulatorOpenPositionsColumnsTemplate = ({ currency, onClickSe
     {
         title: localize('Action'),
         col_index: 'action',
-        renderCellContent: ({ row_obj, is_footer }) => {
+        renderCellContent: ({ row_obj, is_footer }: TCellContentProps) => {
             if (is_footer) {
                 return <div className='open-positions__row-action' />;
             }
diff --git a/packages/reports/src/Constants/routes-config.js b/packages/reports/src/Constants/routes-config.tsx
similarity index 85%
rename from packages/reports/src/Constants/routes-config.js
rename to packages/reports/src/Constants/routes-config.tsx
index 16c33b35d64e..56b6bfc07c6a 100644
--- a/packages/reports/src/Constants/routes-config.js
+++ b/packages/reports/src/Constants/routes-config.tsx
@@ -2,16 +2,17 @@ import React from 'react';
 import { routes, makeLazyLoader, moduleLoader } from '@deriv/shared';
 import { Loading } from '@deriv/components';
 import { localize } from '@deriv/translations';
+import type { TRoute, TRouteConfig } from 'Types';
 
 const Page404 = React.lazy(() => import(/* webpackChunkName: "404" */ 'Modules/Page404'));
 
 const lazyLoadReportComponent = makeLazyLoader(
-    () => moduleLoader(() => import(/* webpackChunkName: "reports-routes" */ 'Containers')),
+    () => moduleLoader(() => import(/* webpackChunkName: "reports-routes" */ '../Containers')),
     () => <Loading />
 );
 
 // Order matters
-const initRoutesConfig = () => {
+const initRoutesConfig = (): TRouteConfig[] => {
     return [
         {
             path: routes.reports,
@@ -44,12 +45,12 @@ const initRoutesConfig = () => {
     ];
 };
 
-let routesConfig;
+let routesConfig: TRouteConfig[];
 
 // 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 route_default: TRoute = { component: Page404, getTitle: () => localize('Error 404') };
 
-const getRoutesConfig = () => {
+const getRoutesConfig = (): TRouteConfig[] => {
     if (!routesConfig) {
         routesConfig = initRoutesConfig();
         routesConfig.push(route_default);
diff --git a/packages/reports/src/Containers/__tests__/open-positions-table.spec.js b/packages/reports/src/Containers/__tests__/open-positions-table.spec.tsx
similarity index 100%
rename from packages/reports/src/Containers/__tests__/open-positions-table.spec.js
rename to packages/reports/src/Containers/__tests__/open-positions-table.spec.tsx
diff --git a/packages/reports/src/Containers/index.js b/packages/reports/src/Containers/index.js
deleted file mode 100644
index 0523dc131e09..000000000000
--- a/packages/reports/src/Containers/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-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/index.ts b/packages/reports/src/Containers/index.ts
new file mode 100644
index 000000000000..8489caed23b4
--- /dev/null
+++ b/packages/reports/src/Containers/index.ts
@@ -0,0 +1,11 @@
+import OpenPositions from './open-positions';
+import ProfitTable from './profit-table';
+import Statement from './statement';
+import Reports from './reports';
+
+export default {
+    OpenPositions,
+    ProfitTable,
+    Statement,
+    Reports,
+};
diff --git a/packages/reports/src/Containers/open-positions.jsx b/packages/reports/src/Containers/open-positions.tsx
similarity index 75%
rename from packages/reports/src/Containers/open-positions.jsx
rename to packages/reports/src/Containers/open-positions.tsx
index 310a5c73039e..bc75e55b0921 100644
--- a/packages/reports/src/Containers/open-positions.jsx
+++ b/packages/reports/src/Containers/open-positions.tsx
@@ -1,5 +1,3 @@
-import { PropTypes as MobxPropTypes } from 'mobx-react';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { withRouter } from 'react-router-dom';
 import {
@@ -12,8 +10,8 @@ import {
     ContractCard,
     usePrevious,
     PositionsDrawerCard,
-    Dropdown,
     SelectNative,
+    Dropdown,
 } from '@deriv/components';
 import {
     isAccumulatorContract,
@@ -24,38 +22,150 @@ import {
     getUnsupportedContracts,
     getTotalProfit,
     getContractPath,
+    formatPortfolioPosition,
+    TContractInfo,
     getCurrentTick,
     getGrowthRatePercentage,
+    getCardLabels,
 } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { ReportsTableRowLoader } from '../Components/Elements/ContentLoader';
 import { getContractDurationType } from '../Helpers/market-underlying';
 
-import EmptyTradeHistoryMessage from '../Components/empty-trade-history-message.jsx';
+import EmptyTradeHistoryMessage from '../Components/empty-trade-history-message';
 import {
     getOpenPositionsColumnsTemplate,
     getAccumulatorOpenPositionsColumnsTemplate,
     getMultiplierOpenPositionsColumnsTemplate,
 } from 'Constants/data-table-constants';
-import PlaceholderComponent from '../Components/placeholder-component.jsx';
-import { getCardLabels } from '_common/contract';
+import PlaceholderComponent from '../Components/placeholder-component';
 import { connect } from 'Stores/connect';
-
-const EmptyPlaceholderWrapper = props => (
+import type { TRootStore } from 'Stores/index';
+
+type TRangeFloatZeroToOne = React.ComponentProps<typeof ProgressBar>['value'];
+type TFormatPortfolioPosition = ReturnType<typeof formatPortfolioPosition>;
+type TGetMultiplierOpenPositionsColumnsTemplate = ReturnType<typeof getMultiplierOpenPositionsColumnsTemplate>;
+type TGetOpenPositionsColumnsTemplate = ReturnType<typeof getOpenPositionsColumnsTemplate>;
+type TColumnsMap = TGetMultiplierOpenPositionsColumnsTemplate | TGetOpenPositionsColumnsTemplate;
+type TColumnsMapElement = TColumnsMap[number];
+type TColIndex =
+    | 'type'
+    | 'reference'
+    | 'currency'
+    | 'purchase'
+    | 'payout'
+    | 'profit'
+    | 'indicative'
+    | 'id'
+    | 'multiplier'
+    | 'buy_price'
+    | 'cancellation'
+    | 'limit_order'
+    | 'bid_price'
+    | 'action';
+
+type TEmptyPlaceholderWrapper = React.PropsWithChildren<{
+    is_empty: boolean;
+    component_icon: string;
+}>;
+
+const EmptyPlaceholderWrapper = ({ is_empty, component_icon, children }: TEmptyPlaceholderWrapper) => (
     <React.Fragment>
-        {props.is_empty ? (
+        {is_empty ? (
             <PlaceholderComponent
-                is_empty={props.is_empty}
+                is_empty={is_empty}
                 empty_message_component={EmptyTradeHistoryMessage}
-                component_icon={props.component_icon}
+                component_icon={component_icon}
                 localized_message={localize('You have no open positions yet.')}
             />
         ) : (
-            props.children
+            children
         )}
     </React.Fragment>
 );
 
+type TMobileRowRenderer = {
+    row: TFormatPortfolioPosition & { is_sell_requested: boolean };
+    is_footer: boolean;
+    columns_map: Record<TColIndex, TColumnsMapElement>;
+    server_time: moment.Moment;
+    onClickCancel: () => void;
+    onClickSell: () => void;
+    measure: () => void;
+};
+
+type TOpenPositionsTable = {
+    className: string;
+    columns: Record<string, any>[];
+    component_icon: string;
+    currency: string;
+    active_positions: TFormatPortfolioPosition[];
+    is_loading: boolean;
+    getRowAction: (row_obj: TRowObj) =>
+        | string
+        | {
+              component: JSX.Element;
+          };
+    mobileRowRenderer: (args: TMobileRowRenderer) => JSX.Element;
+    preloaderCheck: (item: { purchase: number }) => boolean;
+    row_size: number;
+    totals: TTotals;
+    is_empty: boolean;
+};
+
+type TRowObj = {
+    is_unsupported: false;
+    id: number;
+};
+
+type TTotals = {
+    contract_info?: {
+        profit?: number;
+        buy_price?: number;
+        bid_price?: number;
+        cancellation?: {
+            ask_price?: number;
+        };
+    };
+    indicative?: number;
+    purchase?: number;
+    profit_loss?: number;
+    payout?: number;
+};
+
+type TAddToastProps = {
+    key: string;
+    content: string;
+    type: string;
+};
+
+type TOpenPositions = {
+    active_positions: TFormatPortfolioPosition[];
+    component_icon: string;
+    currency: string;
+    error: string;
+    getPositionById: (id: number) => TFormatPortfolioPosition;
+    is_loading: boolean;
+    is_multiplier: boolean;
+    is_accumulator: boolean;
+    is_vanilla: boolean;
+    NotificationMessages: () => JSX.Element;
+    onClickCancel: () => void;
+    onClickSell: () => void;
+    onMount: () => void;
+    server_time: moment.Moment;
+    addToast: (obj: TAddToastProps) => void;
+    current_focus: string;
+    onClickRemove: () => void;
+    getContractById: (id: number) => TContractInfo;
+    is_mobile: boolean;
+    removeToast: () => void;
+    setCurrentFocus: () => void;
+    should_show_cancellation_warning: boolean;
+    toggleCancellationWarning: () => void;
+    toggleUnsupportedContractModal: () => void;
+};
+
 const MobileRowRenderer = ({
     row,
     is_footer,
@@ -65,7 +175,7 @@ const MobileRowRenderer = ({
     onClickSell,
     measure,
     ...props
-}) => {
+}: TMobileRowRenderer) => {
     React.useEffect(() => {
         if (!is_footer) {
             measure();
@@ -97,15 +207,15 @@ const MobileRowRenderer = ({
     const { currency, status, date_expiry, date_start, tick_count, purchase_time } = contract_info;
     const current_tick = tick_count ? getCurrentTick(contract_info) : null;
     const duration_type = getContractDurationType(contract_info.longcode);
-    const progress_value = getTimePercentage(server_time, date_start, date_expiry) / 100;
+    const progress_value = (getTimePercentage(server_time, date_start ?? 0, date_expiry ?? 0) /
+        100) as TRangeFloatZeroToOne;
 
-    if (isMultiplierContract(type) || isAccumulatorContract(type)) {
+    if (isMultiplierContract(type ?? '') || isAccumulatorContract(type ?? '')) {
         return (
             <PositionsDrawerCard
                 contract_info={contract_info}
                 contract_update={contract_update}
                 currency={currency}
-                is_multiplier
                 is_link_disabled
                 onClickCancel={onClickCancel}
                 onClickSell={onClickSell}
@@ -121,7 +231,7 @@ const MobileRowRenderer = ({
         <>
             <div className='data-list__row'>
                 <DataList.Cell row={row} column={columns_map.type} />
-                {isVanillaContract(type) ? (
+                {isVanillaContract(type ?? '') ? (
                     <ProgressSliderMobile
                         current_tick={current_tick}
                         className='data-list__row--vanilla'
@@ -174,7 +284,7 @@ export const OpenPositionsTable = ({
     row_size,
     totals,
     is_empty,
-}) => (
+}: TOpenPositionsTable) => (
     <React.Fragment>
         {is_loading ? (
             <PlaceholderComponent
@@ -223,7 +333,7 @@ export const OpenPositionsTable = ({
     </React.Fragment>
 );
 
-const getRowAction = row_obj =>
+const getRowAction = (row_obj: TRowObj) =>
     row_obj.is_unsupported
         ? {
               component: (
@@ -242,10 +352,14 @@ const getRowAction = row_obj =>
  * 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 isPurchaseReceived = (item: { purchase: number }) => isNaN(item.purchase) || !item.purchase;
 
-const getOpenPositionsTotals = (active_positions_filtered, is_multiplier_selected, is_accumulator_selected) => {
-    let totals;
+const getOpenPositionsTotals = (
+    active_positions_filtered: TFormatPortfolioPosition[],
+    is_multiplier_selected: boolean,
+    is_accumulator_selected: boolean
+) => {
+    let totals: TTotals;
 
     if (is_multiplier_selected) {
         let ask_price = 0;
@@ -255,11 +369,15 @@ const getOpenPositionsTotals = (active_positions_filtered, is_multiplier_selecte
         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;
+            buy_price += Number(portfolio_pos.contract_info.buy_price);
+            bid_price += Number(portfolio_pos.contract_info.bid_price);
+            purchase += Number(portfolio_pos.purchase);
             if (portfolio_pos.contract_info) {
-                profit += getTotalProfit(portfolio_pos.contract_info);
+                const prices = {
+                    bid_price: portfolio_pos.contract_info.bid_price ?? 0,
+                    buy_price: portfolio_pos.contract_info.buy_price ?? 0,
+                };
+                profit += getTotalProfit(prices);
 
                 if (portfolio_pos.contract_info.cancellation) {
                     ask_price += portfolio_pos.contract_info.cancellation.ask_price || 0;
@@ -276,9 +394,10 @@ const getOpenPositionsTotals = (active_positions_filtered, is_multiplier_selecte
         };
 
         if (ask_price > 0) {
-            totals.contract_info.cancellation = {
-                ask_price,
-            };
+            if (totals.contract_info)
+                totals.contract_info.cancellation = {
+                    ask_price,
+                };
         }
     } else if (is_accumulator_selected) {
         let buy_price = 0;
@@ -315,9 +434,9 @@ const getOpenPositionsTotals = (active_positions_filtered, is_multiplier_selecte
 
         active_positions_filtered?.forEach(portfolio_pos => {
             indicative += +portfolio_pos.indicative;
-            purchase += +portfolio_pos.purchase;
-            profit_loss += portfolio_pos.profit_loss;
-            payout += portfolio_pos.payout;
+            purchase += Number(portfolio_pos.purchase);
+            profit_loss += Number(portfolio_pos.profit_loss);
+            payout += Number(portfolio_pos.payout);
         });
         totals = {
             indicative,
@@ -345,7 +464,7 @@ const OpenPositions = ({
     onMount,
     server_time,
     ...props
-}) => {
+}: TOpenPositions) => {
     const [has_accumulator_contract, setHasAccumulatorContract] = React.useState(false);
     const [has_multiplier_contract, setHasMultiplierContract] = React.useState(false);
     const previous_active_positions = usePrevious(active_positions);
@@ -401,7 +520,7 @@ const OpenPositions = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [previous_active_positions]);
 
-    const checkForAccuAndMultContracts = (prev_active_positions = []) => {
+    const checkForAccuAndMultContracts = (prev_active_positions: TFormatPortfolioPosition[] = []) => {
         if (active_positions === prev_active_positions) return;
         if (!has_accumulator_contract) {
             setHasAccumulatorContract(
@@ -439,12 +558,12 @@ const OpenPositions = ({
 
     const columns = getColumns();
 
-    const columns_map = columns.reduce((map, item) => {
-        map[item.col_index] = item;
-        return map;
-    }, {});
+    const columns_map = {} as Record<string, TColumnsMapElement>;
+    columns.forEach(e => {
+        columns_map[e.col_index] = e;
+    });
 
-    const mobileRowRenderer = args => (
+    const mobileRowRenderer = (args: TMobileRowRenderer) => (
         <MobileRowRenderer
             {...args}
             columns_map={columns_map}
@@ -557,54 +676,28 @@ const OpenPositions = ({
     );
 };
 
-OpenPositions.propTypes = {
-    active_positions: MobxPropTypes.arrayOrObservableArray,
-    component_icon: PropTypes.string,
-    currency: PropTypes.string,
-    error: PropTypes.string,
-    getPositionById: PropTypes.func,
-    is_accumulator: PropTypes.bool,
-    is_loading: PropTypes.bool,
-    is_multiplier: PropTypes.bool,
-    is_vanilla: PropTypes.bool,
-    NotificationMessages: PropTypes.func,
-    onClickCancel: PropTypes.func,
-    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 }) => ({
-    active_positions: portfolio.active_positions,
-    currency: client.currency,
-    error: portfolio.error,
-    getPositionById: portfolio.getPositionById,
-    is_accumulator: portfolio.is_accumulator,
-    is_loading: portfolio.is_loading,
-    is_multiplier: portfolio.is_multiplier,
-    NotificationMessages: ui.notification_messages_ui,
-    onClickCancel: portfolio.onClickCancel,
-    onClickSell: portfolio.onClickSell,
-    onMount: portfolio.onMount,
-    server_time: common.server_time,
-    addToast: ui.addToast,
-    current_focus: ui.current_focus,
-    onClickRemove: portfolio.removePositionById,
-    getContractById: 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));
+export default withRouter(
+    connect(({ client, common, ui, portfolio, contract_trade }: TRootStore) => ({
+        active_positions: portfolio.active_positions,
+        currency: client.currency,
+        error: portfolio.error,
+        getPositionById: portfolio.getPositionById,
+        is_loading: portfolio.is_loading,
+        is_multiplier: portfolio.is_multiplier,
+        NotificationMessages: ui.notification_messages_ui,
+        onClickCancel: portfolio.onClickCancel,
+        onClickSell: portfolio.onClickSell,
+        onMount: portfolio.onMount,
+        server_time: common.server_time,
+        addToast: ui.addToast,
+        current_focus: ui.current_focus,
+        onClickRemove: portfolio.removePositionById,
+        getContractById: 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,
+    }))(OpenPositions)
+);
diff --git a/packages/reports/src/Containers/profit-table.jsx b/packages/reports/src/Containers/profit-table.tsx
similarity index 79%
rename from packages/reports/src/Containers/profit-table.jsx
rename to packages/reports/src/Containers/profit-table.tsx
index d062f88de601..5e1d6a626160 100644
--- a/packages/reports/src/Containers/profit-table.jsx
+++ b/packages/reports/src/Containers/profit-table.tsx
@@ -1,31 +1,63 @@
 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, getUnsupportedContracts, getContractPath } from '@deriv/shared';
+import {
+    extractInfoFromShortcode,
+    isForwardStarting,
+    getContractPath,
+    getSupportedContracts,
+    getUnsupportedContracts,
+} from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { ReportsTableRowLoader } from '../Components/Elements/ContentLoader';
 import CompositeCalendar from '../Components/Form/CompositeCalendar';
-import { getSupportedContracts } from '_common/contract';
+import {
+    TInputDateRange,
+    TColIndex,
+    TColumnTemplateType,
+    TSupportedContractType,
+    TUnsupportedContractType,
+} from 'Types';
 
 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';
+import PlaceholderComponent from '../Components/placeholder-component';
+import { ReportsMeta } from '../Components/reports-meta';
 import { getProfitTableColumnsTemplate } from 'Constants/data-table-constants';
+import { TRootStore } from 'Stores/index';
+import moment from 'moment/moment';
 
-const getRowAction = row_obj => {
-    const contract_type = extractInfoFromShortcode(row_obj.shortcode).category.toUpperCase();
-    return getSupportedContracts()[contract_type] && !isForwardStarting(row_obj.shortcode, row_obj.purchase_time_unix)
-        ? getContractPath(row_obj.contract_id)
+type TProfitTable = {
+    component_icon: string;
+    currency: string;
+    data: Array<{ [key: string]: string }>;
+    date_from: number;
+    date_to: number;
+    error: string;
+    filtered_date_range: TInputDateRange;
+    is_empty: boolean;
+    is_loading: boolean;
+    is_switching: boolean;
+    handleDateChange: (values: { [key: string]: moment.Moment }) => void;
+    handleScroll: (ev: React.UIEvent<HTMLElement>) => void;
+    has_selected_date: boolean;
+    onMount: VoidFunction;
+    onUnmount: VoidFunction;
+    totals: React.ReactNode;
+};
+
+const getRowAction = (row_obj: { [key: string]: string }) => {
+    const contract_type = extractInfoFromShortcode(row_obj?.shortcode)?.category?.toString().toUpperCase();
+    return getSupportedContracts()[contract_type as TSupportedContractType] &&
+        !isForwardStarting(row_obj.shortcode, +row_obj.purchase_time_unix)
+        ? getContractPath(+row_obj.contract_id)
         : {
               component: (
                   <Localize
                       i18n_default_text="The {{trade_type_name}} contract details aren't currently available. We're working on making them available soon."
                       values={{
-                          trade_type_name: getUnsupportedContracts()[contract_type]?.name,
+                          trade_type_name: getUnsupportedContracts()[contract_type as TUnsupportedContractType]?.name,
                       }}
                   />
               ),
@@ -49,7 +81,7 @@ const ProfitTable = ({
     onMount,
     onUnmount,
     totals,
-}) => {
+}: TProfitTable) => {
     React.useEffect(() => {
         onMount();
         return () => {
@@ -70,13 +102,13 @@ const ProfitTable = ({
     );
 
     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 columns_map = Object.fromEntries(columns.map(column => [column.col_index, column])) as {
+        [key in TColIndex]: TColumnTemplateType;
+    };
+
+    const mobileRowRenderer = ({ row, is_footer }: { row: any; is_footer?: boolean }) => {
+        const duration_type = /^(MULTUP|MULTDOWN)/.test(row.shortcode) ? '' : row.duration_type;
         const duration_classname = duration_type ? `duration-type__${duration_type.toLowerCase()}` : '';
 
         if (is_footer) {
@@ -178,26 +210,7 @@ const ProfitTable = ({
     );
 };
 
-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 }) => ({
+export default connect(({ modules, client }: TRootStore) => ({
     currency: client.currency,
     data: modules.profit_table.data,
     date_from: modules.profit_table.date_from,
diff --git a/packages/reports/src/Containers/progress-slider-stream.jsx b/packages/reports/src/Containers/progress-slider-stream.tsx
similarity index 67%
rename from packages/reports/src/Containers/progress-slider-stream.jsx
rename to packages/reports/src/Containers/progress-slider-stream.tsx
index 024822c3d65c..226c30f5e5cf 100644
--- a/packages/reports/src/Containers/progress-slider-stream.jsx
+++ b/packages/reports/src/Containers/progress-slider-stream.tsx
@@ -1,11 +1,17 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { ProgressSlider } from '@deriv/components';
-import { getCurrentTick } from '@deriv/shared';
+import { getCurrentTick, TContractInfo, getCardLabels } from '@deriv/shared';
 import { connect } from 'Stores/connect';
-import { getCardLabels } from '_common/contract';
+import moment from 'moment';
+import { TRootStore } from 'Stores/index';
 
-const ProgressSliderStream = ({ contract_info, is_loading, server_time }) => {
+type TProgressSliderStream = {
+    contract_info: Required<TContractInfo>;
+    is_loading: boolean;
+    server_time: moment.Moment;
+};
+
+const ProgressSliderStream = ({ contract_info, is_loading, server_time }: TProgressSliderStream) => {
     if (!contract_info) {
         return <div />;
     }
@@ -24,13 +30,7 @@ const ProgressSliderStream = ({ contract_info, is_loading, server_time }) => {
     );
 };
 
-ProgressSliderStream.propTypes = {
-    contract_info: PropTypes.object,
-    is_loading: PropTypes.bool,
-    server_time: PropTypes.object,
-};
-
-export default connect(({ common, portfolio }) => ({
+export default connect(({ common, portfolio }: TRootStore) => ({
     is_loading: portfolio.is_loading,
     server_time: common.server_time,
 }))(ProgressSliderStream);
diff --git a/packages/reports/src/Containers/reports.jsx b/packages/reports/src/Containers/reports.tsx
similarity index 57%
rename from packages/reports/src/Containers/reports.jsx
rename to packages/reports/src/Containers/reports.tsx
index 87b8f1e76cc6..75532cf94096 100644
--- a/packages/reports/src/Containers/reports.jsx
+++ b/packages/reports/src/Containers/reports.tsx
@@ -1,35 +1,42 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import { withRouter } from 'react-router-dom';
+import { Redirect, RouteComponentProps } from 'react-router-dom';
 import {
-    Div100vhContainer,
-    VerticalTab,
     DesktopWrapper,
-    MobileWrapper,
+    Div100vhContainer,
     FadeWrapper,
+    Loading,
+    MobileWrapper,
     PageOverlay,
     SelectNative,
-    Loading,
+    VerticalTab,
 } from '@deriv/components';
 import { getSelectedRoute } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import { connect } from 'Stores/connect';
+import { observer, useStore } from '@deriv/stores';
+import { TRoute } from 'Types';
 import 'Sass/app/modules/reports.scss';
 
-const Reports = ({
-    history,
-    is_logged_in,
-    is_logging_in,
-    is_from_derivgo,
-    is_visible,
-    location,
-    routeBackInApp,
-    routes,
-    setTabIndex,
-    setVisibilityRealityCheck,
-    tab_index,
-    toggleReports,
-}) => {
+type TList = {
+    value: React.ComponentType | typeof Redirect;
+    default?: boolean;
+    label: string;
+    icon?: string;
+    path?: string;
+};
+
+type TReports = {
+    history: RouteComponentProps['history'];
+    location: RouteComponentProps['location'];
+    routes: TRoute[];
+};
+
+const Reports = observer(({ history, location, routes }: TReports) => {
+    const { client, common, ui } = useStore();
+
+    const { is_logged_in, is_logging_in, setVisibilityRealityCheck } = client;
+    const { is_from_derivgo, routeBackInApp } = common;
+    const { is_reports_visible, setReportsTabIndex, reports_route_tab_index, toggleReports } = ui;
+
     React.useEffect(() => {
         toggleReports(true);
         return () => {
@@ -41,10 +48,10 @@ const Reports = ({
 
     const onClickClose = () => routeBackInApp(history);
 
-    const handleRouteChange = e => history.push(e.target.value);
+    const handleRouteChange = (e: React.ChangeEvent<HTMLSelectElement>) => history.push(e.target.value);
 
     const menu_options = () => {
-        const options = [];
+        const options: TList[] = [];
 
         routes.forEach(route => {
             options.push({
@@ -65,7 +72,7 @@ const Reports = ({
         return <Loading is_fullscreen />;
     }
     return (
-        <FadeWrapper is_visible={is_visible} className='reports-page-wrapper' keyname='reports-page-wrapper'>
+        <FadeWrapper is_visible={is_reports_visible} className='reports-page-wrapper' keyname='reports-page-wrapper'>
             <div className='reports'>
                 <PageOverlay header={localize('Reports')} onClickClose={onClickClose} is_from_app={is_from_derivgo}>
                     <DesktopWrapper>
@@ -74,8 +81,8 @@ const Reports = ({
                             current_path={location.pathname}
                             is_routed
                             is_full_width
-                            setVerticalTabIndex={setTabIndex}
-                            vertical_tab_index={selected_route.default ? 0 : tab_index}
+                            setVerticalTabIndex={setReportsTabIndex}
+                            vertical_tab_index={selected_route.default ? 0 : reports_route_tab_index}
                             list={menu_options()}
                         />
                     </DesktopWrapper>
@@ -85,14 +92,16 @@ const Reports = ({
                                 className='reports__route-selection'
                                 list_items={menu_options().map(option => ({
                                     text: option.label,
-                                    value: option.path,
+                                    value: option.path ?? '',
                                 }))}
-                                value={selected_route.path}
+                                value={selected_route.path ?? ''}
                                 should_show_empty_option={false}
                                 onChange={handleRouteChange}
+                                label={''}
+                                hide_top_placeholder={false}
                             />
-                            {selected_route && (
-                                <selected_route.component component_icon={selected_route.icon_component} />
+                            {selected_route?.component && (
+                                <selected_route.component icon_component={selected_route.icon_component} />
                             )}
                         </Div100vhContainer>
                     </MobileWrapper>
@@ -100,31 +109,6 @@ const Reports = ({
             </div>
         </FadeWrapper>
     );
-};
-
-Reports.propTypes = {
-    history: PropTypes.object,
-    is_logged_in: PropTypes.bool,
-    is_logging_in: PropTypes.bool,
-    is_from_derivgo: 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_from_derivgo: common.is_from_derivgo,
-    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));
+export default Reports;
diff --git a/packages/reports/src/Containers/routes.jsx b/packages/reports/src/Containers/routes.jsx
deleted file mode 100644
index 0944b459b500..000000000000
--- a/packages/reports/src/Containers/routes.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-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_logging_in: PropTypes.bool,
-    is_virtual: PropTypes.bool,
-    passthrough: PropTypes.object,
-};
-
-// 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/routes.tsx b/packages/reports/src/Containers/routes.tsx
new file mode 100644
index 000000000000..ab4b8d04d70b
--- /dev/null
+++ b/packages/reports/src/Containers/routes.tsx
@@ -0,0 +1,26 @@
+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 { TRootStore } from 'Stores/index';
+import { TRoutes } from 'Types';
+
+const Routes = ({ error, has_error, is_logged_in, is_logging_in, passthrough }: TRoutes) => {
+    if (has_error) {
+        return <ErrorComponent {...error} />;
+    }
+
+    return <BinaryRoutes is_logged_in={is_logged_in} is_logging_in={is_logging_in} passthrough={passthrough} />;
+};
+
+// need to wrap withRouter around connect
+// to prevent updates on <BinaryRoutes /> from being blocked
+export default withRouter(
+    connect(({ client, common }: TRootStore) => ({
+        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.tsx
similarity index 67%
rename from packages/reports/src/Containers/statement.jsx
rename to packages/reports/src/Containers/statement.tsx
index 99107e86e3cd..5e0c2de1ed54 100644
--- a/packages/reports/src/Containers/statement.jsx
+++ b/packages/reports/src/Containers/statement.tsx
@@ -1,21 +1,82 @@
-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, getUnsupportedContracts, getContractPath } from '@deriv/shared';
+import {
+    extractInfoFromShortcode,
+    isForwardStarting,
+    getUnsupportedContracts,
+    getContractPath,
+    getSupportedContracts,
+} from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { ReportsTableRowLoader } from '../Components/Elements/ContentLoader';
-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';
+import AccountStatistics from '../Components/account-statistics';
+import FilterComponent from '../Components/filter-component';
+import { ReportsMeta } from '../Components/reports-meta';
+import EmptyTradeHistoryMessage from '../Components/empty-trade-history-message';
+import { TRootStore } from 'Stores/index';
 
-const DetailsComponent = ({ message = '', action_type = '' }) => {
+type TGetStatementTableColumnsTemplate = ReturnType<typeof getStatementTableColumnsTemplate>;
+type TColIndex = 'icon' | 'refid' | 'currency' | 'date' | 'action_type' | 'amount' | 'balance';
+
+type TFormatStatementTransaction = {
+    action: string;
+    date: string;
+    display_name: string;
+    refid: number;
+    payout: string;
+    amount: string;
+    balance: string;
+    desc: string;
+    id: number;
+    app_id: number;
+    shortcode: string;
+    action_type: string;
+    purchase_time: number;
+    transaction_time: number;
+    withdrawal_details: string;
+    longcode: string;
+};
+
+type TAction =
+    | {
+          message?: string;
+          component?: React.ReactElement;
+      }
+    | string;
+
+type TStatement = {
+    action_type: string;
+    account_statistics: React.ComponentProps<typeof AccountStatistics>['account_statistics'];
+    component_icon: string;
+    currency: string;
+    data: TFormatStatementTransaction[];
+    date_from: number | null;
+    date_to: number | null;
+    error: string;
+    filtered_date_range: React.ComponentProps<typeof FilterComponent>['filtered_date_range'];
+    handleDateChange: () => void;
+    handleFilterChange: () => void;
+    handleScroll: () => void;
+    has_selected_date: boolean;
+    is_empty: boolean;
+    is_loading: boolean;
+    is_mx_mlt: boolean;
+    is_switching: boolean;
+    is_virtual: boolean;
+    onMount: () => void;
+    onUnmount: () => void;
+};
+
+type TDetailsComponent = {
+    message: string;
+    action_type: string;
+};
+
+const DetailsComponent = ({ message = '', action_type = '' }: TDetailsComponent) => {
     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]);
@@ -52,8 +113,8 @@ const DetailsComponent = ({ message = '', action_type = '' }) => {
     );
 };
 
-const getRowAction = row_obj => {
-    let action;
+const getRowAction = (row_obj: TFormatStatementTransaction) => {
+    let action: TAction = {};
     if (row_obj.id && ['buy', 'sell'].includes(row_obj.action_type)) {
         const contract_type = extractInfoFromShortcode(row_obj.shortcode).category.toUpperCase();
         action =
@@ -61,6 +122,7 @@ const getRowAction = row_obj => {
             !isForwardStarting(row_obj.shortcode, row_obj.purchase_time || row_obj.transaction_time)
                 ? getContractPath(row_obj.id)
                 : {
+                      message: '',
                       component: (
                           <Localize
                               i18n_default_text="The {{trade_type_name}} contract details aren't currently available. We're working on making them available soon."
@@ -86,7 +148,8 @@ const getRowAction = row_obj => {
         };
     }
 
-    if (action?.message) {
+    // add typeof check because action can be object or string
+    if (typeof action === 'object' && action?.message) {
         action.component = <DetailsComponent message={action.message} action_type={row_obj.action_type} />;
     }
 
@@ -114,7 +177,7 @@ const Statement = ({
     is_virtual,
     onMount,
     onUnmount,
-}) => {
+}: TStatement) => {
     React.useEffect(() => {
         onMount();
         return () => {
@@ -125,13 +188,14 @@ const Statement = ({
 
     if (error) return <p>{error}</p>;
 
-    const columns = getStatementTableColumnsTemplate(currency);
+    const columns: TGetStatementTableColumnsTemplate = getStatementTableColumnsTemplate(currency);
     const columns_map = columns.reduce((map, item) => {
-        map[item.col_index] = item;
+        map[item.col_index as TColIndex] = item;
         return map;
-    }, {});
+    }, {} as Record<TColIndex, typeof columns[number]>);
 
-    const mobileRowRenderer = ({ row, passthrough }) => (
+    // TODO: Export type instead of any from 'DataList' component when it migrates to tsx
+    const mobileRowRenderer = ({ row, passthrough }: any) => (
         <React.Fragment>
             <div className='data-list__row'>
                 <DataList.Cell row={row} column={columns_map.icon} passthrough={passthrough} />
@@ -198,7 +262,8 @@ const Statement = ({
                                     getRowAction={row => getRowAction(row)}
                                     onScroll={handleScroll}
                                     passthrough={{
-                                        isTopUp: item => is_virtual && item.action === 'Deposit',
+                                        isTopUp: (item: TFormatStatementTransaction) =>
+                                            is_virtual && item.action === 'Deposit',
                                     }}
                                 >
                                     <PlaceholderComponent is_loading={is_loading} />
@@ -213,7 +278,8 @@ const Statement = ({
                                     rowRenderer={mobileRowRenderer}
                                     row_gap={8}
                                     passthrough={{
-                                        isTopUp: item => is_virtual && item.action === 'Deposit',
+                                        isTopUp: (item: TFormatStatementTransaction) =>
+                                            is_virtual && item.action === 'Deposit',
                                     }}
                                 >
                                     <PlaceholderComponent is_loading={is_loading} />
@@ -227,47 +293,26 @@ const Statement = ({
     );
 };
 
-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));
+export default withRouter(
+    connect(({ modules, client }: TRootStore) => ({
+        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,
+    }))(Statement)
+);
diff --git a/packages/reports/src/Helpers/digits.js b/packages/reports/src/Helpers/digits.js
deleted file mode 100644
index 6ad31ce7e17c..000000000000
--- a/packages/reports/src/Helpers/digits.js
+++ /dev/null
@@ -1,5 +0,0 @@
-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/digits.ts b/packages/reports/src/Helpers/digits.ts
new file mode 100644
index 000000000000..5eb73027ec3f
--- /dev/null
+++ b/packages/reports/src/Helpers/digits.ts
@@ -0,0 +1,8 @@
+const digitCategoriesMap = ['even_odd', 'match_diff', 'over_under'] as const;
+const digitTypesMap = ['DIGITDIFF', 'DIGITMATCH', 'DIGITOVER', 'DIGITUNDER', 'DIGITEVEN', 'DIGITODD'] as const;
+
+export const isDigitTradeType = (trade_type: string): boolean =>
+    digitCategoriesMap.find(item => item === trade_type) !== undefined;
+
+export const isDigitContractType = (contract_type: string): boolean =>
+    digitTypesMap.find(item => item === contract_type) !== undefined;
diff --git a/packages/reports/src/Helpers/market-underlying.js b/packages/reports/src/Helpers/market-underlying.ts
similarity index 56%
rename from packages/reports/src/Helpers/market-underlying.js
rename to packages/reports/src/Helpers/market-underlying.ts
index eff4051b88de..318adc5ad0ca 100644
--- a/packages/reports/src/Helpers/market-underlying.js
+++ b/packages/reports/src/Helpers/market-underlying.ts
@@ -1,6 +1,16 @@
-import { getMarketNamesMap, getContractConfig } from '_common/contract';
+import { getContractConfig, getMarketNamesMap } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 
+type TMarketInfo = {
+    category: string;
+    underlying: string;
+};
+
+type TTradeConfig = {
+    name: JSX.Element;
+    position: string;
+};
+
 /**
  * Fetch market information from shortcode
  * @param shortcode: string
@@ -8,8 +18,8 @@ import { localize } from '@deriv/translations';
  */
 
 // TODO: Combine with  extractInfoFromShortcode function in shared, both are currently used
-export const getMarketInformation = shortcode => {
-    const market_info = {
+export const getMarketInformation = (shortcode: string): TMarketInfo => {
+    const market_info: TMarketInfo = {
         category: '',
         underlying: '',
     };
@@ -26,13 +36,17 @@ export const getMarketInformation = shortcode => {
     return market_info;
 };
 
-export const getMarketName = underlying => (underlying ? getMarketNamesMap()[underlying.toUpperCase()] : null);
+export const getMarketName = (underlying: string) =>
+    underlying ? getMarketNamesMap()[underlying.toUpperCase() as keyof typeof getMarketNamesMap] : null;
 
-export const getTradeTypeName = (category, is_high_low = false) =>
-    category ? getContractConfig(is_high_low)[category.toUpperCase()].name : null;
+export const getTradeTypeName = (category: string, is_high_low = false) =>
+    category
+        ? (getContractConfig(is_high_low)[category.toUpperCase() as keyof typeof getContractConfig] as TTradeConfig)
+              .name
+        : null;
 
-export const getContractDurationType = (longcode, shortcode) => {
-    if (/^MULTUP|MULTDOWN/.test(shortcode)) return '';
+export const getContractDurationType = (longcode: string, shortcode: string): string => {
+    if (/^(MULTUP|MULTDOWN)/.test(shortcode)) return '';
 
     const duration_pattern = new RegExp('ticks|tick|seconds|minutes|minute|hour|hours');
     const extracted = duration_pattern.exec(longcode);
diff --git a/packages/reports/src/Helpers/profit-loss.js b/packages/reports/src/Helpers/profit-loss.js
deleted file mode 100644
index 095262006b56..000000000000
--- a/packages/reports/src/Helpers/profit-loss.js
+++ /dev/null
@@ -1 +0,0 @@
-export const getProfitOrLoss = value => (+value.replace(/,/g, '') >= 0 ? 'profit' : 'loss');
diff --git a/packages/reports/src/Helpers/profit-loss.ts b/packages/reports/src/Helpers/profit-loss.ts
new file mode 100644
index 000000000000..2e927b3cb5ed
--- /dev/null
+++ b/packages/reports/src/Helpers/profit-loss.ts
@@ -0,0 +1 @@
+export const getProfitOrLoss = (value: string) => (+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.tsx
similarity index 100%
rename from packages/reports/src/Modules/Page404/Components/Page404.jsx
rename to packages/reports/src/Modules/Page404/Components/Page404.tsx
diff --git a/packages/reports/src/Modules/Page404/index.js b/packages/reports/src/Modules/Page404/index.js
deleted file mode 100644
index ccb77a533cf4..000000000000
--- a/packages/reports/src/Modules/Page404/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default from './Components/Page404.jsx';
diff --git a/packages/reports/src/Modules/Page404/index.ts b/packages/reports/src/Modules/Page404/index.ts
new file mode 100644
index 000000000000..04dbb70feef6
--- /dev/null
+++ b/packages/reports/src/Modules/Page404/index.ts
@@ -0,0 +1,3 @@
+import Page404 from './Components/Page404';
+
+export default Page404;
diff --git a/packages/reports/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot.spec.tsx b/packages/reports/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot.spec.tsx
deleted file mode 100644
index b1a4d24685d2..000000000000
--- a/packages/reports/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot.spec.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import MarkerSpot from '../marker-spot.jsx';
-
-describe('MarkerSpot Component', () => {
-    it('should render MarkerSpot component', () => {
-        render(<MarkerSpot spot_count={3} />);
-        const text = screen.getByText(/3/i);
-        expect(text).toBeInTheDocument();
-    });
-
-    it('should not has class ".chart-spot__spot--lost" or ".chart-spot__spot--won" if no status is passed in props', () => {
-        render(<MarkerSpot spot_count={3} />);
-        const text = screen.getByText(/3/i);
-        expect(text).not.toHaveClass('.chart-spot__spot--lost');
-        expect(text).not.toHaveClass('.chart-spot__spot--won');
-    });
-});
diff --git a/packages/reports/src/Modules/SmartChart/Components/Markers/marker-line.jsx b/packages/reports/src/Modules/SmartChart/Components/Markers/marker-line.jsx
deleted file mode 100644
index c4a5c7083a7e..000000000000
--- a/packages/reports/src/Modules/SmartChart/Components/Markers/marker-line.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-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.jsx b/packages/reports/src/Modules/SmartChart/Components/Markers/marker-spot.jsx
deleted file mode 100644
index a242334713b6..000000000000
--- a/packages/reports/src/Modules/SmartChart/Components/Markers/marker-spot.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-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/Helpers/symbol.js b/packages/reports/src/Modules/SmartChart/Helpers/symbol.js
deleted file mode 100644
index 00d2fadba0c6..000000000000
--- a/packages/reports/src/Modules/SmartChart/Helpers/symbol.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export const symbolChange = onSymbolChange =>
-    onSymbolChange &&
-    (symbol => {
-        onSymbolChange({
-            target: {
-                name: 'symbol',
-                value: symbol,
-            },
-        });
-    });
diff --git a/packages/reports/src/Stores/Modules/Profit/profit-store.js b/packages/reports/src/Stores/Modules/Profit/profit-store.js
index e393e1b6db7e..562601a442f4 100644
--- a/packages/reports/src/Stores/Modules/Profit/profit-store.js
+++ b/packages/reports/src/Stores/Modules/Profit/profit-store.js
@@ -12,7 +12,7 @@ const delay_on_scroll_time = 150;
 export default class ProfitTableStore extends BaseStore {
     data = [];
     date_from = null;
-    date_to = toMoment().startOf('day').add(1, 'd').subtract(1, 's').unix();
+    date_to = toMoment().startOf('day').add(1, 'd').subtract(1, 's');
     error = '';
     has_loaded_all = false;
     is_loading = false;
@@ -171,7 +171,7 @@ export default class ProfitTableStore extends BaseStore {
 
     clearDateFilter() {
         this.date_from = null;
-        this.date_to = toMoment().startOf('day').add(1, 'd').subtract(1, 's').unix();
+        this.date_to = toMoment().startOf('day').add(1, 'd').subtract(1, 's');
     }
 
     handleDateChange(date_values, { date_range } = {}) {
diff --git a/packages/reports/src/Stores/index.js b/packages/reports/src/Stores/index.js
deleted file mode 100644
index f0495d2fb985..000000000000
--- a/packages/reports/src/Stores/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-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;
-        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;
-        this.active_symbols = core_store.active_symbols;
-    }
-}
diff --git a/packages/reports/src/Stores/index.ts b/packages/reports/src/Stores/index.ts
new file mode 100644
index 000000000000..a15bfb937cec
--- /dev/null
+++ b/packages/reports/src/Stores/index.ts
@@ -0,0 +1,43 @@
+import ModulesStore from './Modules';
+import ProfitTableStore from './Modules/Profit/profit-store';
+import StatementStore from './Modules/Statement/statement-store';
+import type { TCoreStores } from '@deriv/stores/types';
+
+export type TRootStore = TCoreStores & {
+    modules: {
+        profit_table: ProfitTableStore;
+        statement: StatementStore;
+    };
+};
+
+export default class RootStore {
+    client: TCoreStores['client'];
+    common: TCoreStores['common'];
+    modules: ModulesStore;
+    ui: TCoreStores['ui'];
+    gtm: unknown;
+    rudderstack: unknown;
+    pushwoosh: unknown;
+    notifications: TCoreStores['notifications'];
+    contract_replay: unknown;
+    contract_trade: TCoreStores['contract_trade'];
+    portfolio: TCoreStores['portfolio'];
+    chart_barrier_store: unknown;
+    active_symbols: unknown;
+
+    constructor(core_store: TCoreStores) {
+        this.client = core_store.client;
+        this.common = core_store.common;
+        this.modules = new ModulesStore(this);
+        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;
+        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;
+        this.active_symbols = core_store.active_symbols;
+    }
+}
diff --git a/packages/reports/src/Types/common-prop.type.ts b/packages/reports/src/Types/common-prop.type.ts
new file mode 100644
index 000000000000..766908846776
--- /dev/null
+++ b/packages/reports/src/Types/common-prop.type.ts
@@ -0,0 +1,103 @@
+import React from 'react';
+import { Redirect } from 'react-router-dom';
+import { TRootStore } from 'Stores/index';
+import {
+    getMultiplierOpenPositionsColumnsTemplate,
+    getOpenPositionsColumnsTemplate,
+    getProfitTableColumnsTemplate,
+    getStatementTableColumnsTemplate,
+    TKeys,
+} from 'Constants/data-table-constants';
+import { getSupportedContracts, getUnsupportedContracts } from '@deriv/shared';
+
+export type TPassthrough = {
+    root_store: TRootStore;
+    WS: Record<string, any>;
+};
+
+export type TBinaryRoutes = {
+    is_logged_in?: boolean;
+    is_logging_in?: boolean;
+    passthrough?: TPassthrough;
+};
+
+export type TRoute = {
+    path?: string;
+    component: React.ComponentType | typeof Redirect;
+    is_authenticated?: boolean;
+    getTitle: () => string;
+    icon_component?: string;
+    routes?: TRoute[];
+    default?: boolean;
+    to?: string;
+    exact?: boolean;
+};
+
+export type TErrorComponent = {
+    header: string;
+    is_dialog: boolean;
+    message: React.ReactElement | string;
+    redirect_label: string;
+    redirectOnClick: () => void;
+    should_show_refresh: boolean;
+    type: string;
+};
+
+export type TRoutes = {
+    error?: TErrorComponent;
+    has_error?: boolean;
+    is_logged_in?: boolean;
+    is_logging_in?: boolean;
+    is_virtual?: boolean;
+    passthrough?: TPassthrough;
+};
+
+export type TRouteConfig = TRoute & {
+    is_modal?: boolean;
+    is_authenticated?: boolean;
+    routes?: TRoute[];
+};
+
+export type TInputDateRange = {
+    value?: string;
+    label?: string;
+    duration?: number;
+    onClick?: () => void;
+};
+
+export type TColIndex =
+    | ReturnType<typeof getStatementTableColumnsTemplate>[number]['col_index']
+    | ReturnType<typeof getProfitTableColumnsTemplate>[number]['col_index']
+    | ReturnType<typeof getOpenPositionsColumnsTemplate>[number]['col_index']
+    | ReturnType<typeof getMultiplierOpenPositionsColumnsTemplate>[number]['col_index'];
+
+export type TCellContentProps = {
+    cell_value: TKeys;
+    passthrough: any;
+    row_obj: any;
+    is_footer: boolean;
+    is_vanilla: boolean;
+};
+
+export type THeaderProps = {
+    title: React.ReactNode;
+    is_vanilla: boolean;
+};
+
+export type TColumnTemplateType = {
+    key?: string;
+    title?: React.ReactNode;
+    col_index: TColIndex;
+    renderCellContent?: (props: TCellContentProps) => React.ReactNode;
+    renderHeader?: (props: THeaderProps) => React.ReactNode;
+    icon?: string;
+    action_type?: string;
+    refid?: string;
+    date?: string;
+    balance?: string;
+    item?: any;
+    map?: any;
+};
+
+export type TSupportedContractType = keyof ReturnType<typeof getSupportedContracts>;
+export type TUnsupportedContractType = keyof ReturnType<typeof getUnsupportedContracts>;
diff --git a/packages/reports/src/Types/index.ts b/packages/reports/src/Types/index.ts
new file mode 100644
index 000000000000..989319119dbe
--- /dev/null
+++ b/packages/reports/src/Types/index.ts
@@ -0,0 +1 @@
+export * from './common-prop.type';
diff --git a/packages/reports/src/_common/contract.js b/packages/reports/src/_common/contract.js
deleted file mode 100644
index 0ecc34bc9055..000000000000
--- a/packages/reports/src/_common/contract.js
+++ /dev/null
@@ -1,289 +0,0 @@
-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 '),
-    TICKS: localize('Ticks'),
-    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('Netherlands 25'),
-    OTC_AS51: localize('Australia 200'),
-    OTC_DJI: localize('Wall Street 30'),
-    OTC_FCHI: localize('France 40'),
-    OTC_FTSE: localize('UK 100'),
-    OTC_GDAXI: localize('Germany 40'),
-    OTC_HSI: localize('Hong Kong 50'),
-    OTC_IBEX35: localize('Spanish Index'),
-    OTC_N225: localize('Japan 225'),
-    OTC_NDX: localize('US Tech 100'),
-    OTC_SPC: localize('US 500'),
-    OTC_SSMI: localize('Swiss 20'),
-    OTC_SX5E: localize('Euro 50'),
-    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'),
-    '1HZ150V': localize('Volatility 150 (1s) Index'),
-    '1HZ200V': localize('Volatility 200 (1s) Index'),
-    '1HZ250V': localize('Volatility 250 (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 => ({
-    ACCU: {
-        button_name: <Localize i18n_default_text='Buy' />,
-        name: <Localize i18n_default_text='Accumulator' />,
-        position: 'top',
-    },
-    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',
-    },
-    VANILLALONGCALL: {
-        name: <Localize i18n_default_text='Call' />,
-        position: 'top',
-    },
-    VANILLALONGPUT: {
-        name: <Localize i18n_default_text='Put' />,
-        position: 'bottom',
-    },
-});
-
-export const getContractConfig = is_high_low => ({
-    ...getSupportedContracts(is_high_low),
-    ...getUnsupportedContracts(),
-});
-
-export const getContractTypeDisplay = (type, is_high_low = false, show_button_name = false) => {
-    const contract_config = getContractConfig(is_high_low)[type];
-    return (show_button_name && contract_config.button_name) || contract_config.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/app.jsx b/packages/reports/src/app.jsx
deleted file mode 100644
index 2e44f8f0cfa0..000000000000
--- a/packages/reports/src/app.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Routes from 'Containers/routes.jsx';
-import { MobxContentProvider } from 'Stores/connect';
-import 'Sass/app.scss';
-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/app.tsx b/packages/reports/src/app.tsx
new file mode 100644
index 000000000000..3d3298d62311
--- /dev/null
+++ b/packages/reports/src/app.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import Routes from 'Containers/routes';
+import { MobxContentProvider } from 'Stores/connect';
+import { StoreProvider } from '@deriv/stores';
+import 'Sass/app.scss';
+import initStore from './init-store';
+import type { TCoreStores } from '@deriv/stores/types';
+
+type TAppProps = {
+    passthrough: {
+        root_store: TCoreStores;
+        WS: unknown;
+    };
+};
+
+const App = ({ passthrough }: TAppProps) => {
+    const root_store = initStore(passthrough.root_store, passthrough.WS);
+
+    return (
+        <MobxContentProvider store={root_store}>
+            <StoreProvider store={passthrough.root_store}>
+                <Routes />
+            </StoreProvider>
+        </MobxContentProvider>
+    );
+};
+
+export default App;
diff --git a/packages/reports/src/index.jsx b/packages/reports/src/index.tsx
similarity index 91%
rename from packages/reports/src/index.jsx
rename to packages/reports/src/index.tsx
index 8b74c04082fd..7f081bc7fa23 100644
--- a/packages/reports/src/index.jsx
+++ b/packages/reports/src/index.tsx
@@ -4,7 +4,7 @@ import { Loading } from '@deriv/components';
 import 'promise-polyfill';
 
 const App = makeLazyLoader(
-    () => import(/* webpackChunkName: "reports-app", webpackPreload: true */ './app.jsx'),
+    () => import(/* webpackChunkName: "reports-app", webpackPreload: true */ './app'),
     () => <Loading />
 )();
 
diff --git a/packages/reports/src/templates/_common/components/loading.jsx b/packages/reports/src/templates/_common/components/loading.tsx
similarity index 69%
rename from packages/reports/src/templates/_common/components/loading.jsx
rename to packages/reports/src/templates/_common/components/loading.tsx
index 1e1379209e36..324e4487f11a 100644
--- a/packages/reports/src/templates/_common/components/loading.jsx
+++ b/packages/reports/src/templates/_common/components/loading.tsx
@@ -1,7 +1,14 @@
 import classNames from 'classnames';
 import React from 'react';
 
-const Loading = ({ className, is_invisible, theme, id }) => (
+type TLoading = {
+    className?: string;
+    is_invisible?: boolean;
+    theme?: string;
+    id?: string;
+};
+
+const Loading = ({ className, is_invisible, theme, id }: TLoading) => (
     <div
         id={id}
         className={classNames('barspinner', `barspinner--${theme || 'dark'}`, { invisible: is_invisible }, className)}
diff --git a/packages/reports/tsconfig.json b/packages/reports/tsconfig.json
index 2a3405134ede..1bb90efc82d4 100644
--- a/packages/reports/tsconfig.json
+++ b/packages/reports/tsconfig.json
@@ -11,10 +11,11 @@
             "Stores/*": ["./src/Stores/*"],
             "templates/*": ["./src/templates/*"],
             "Utils/*": ["./src/Utils/*"],
+            "Types": ["./src/Types"],
             "@deriv/*": ["../*/src"]
         },
         "outDir": "./dist",
         "baseUrl": "./"
     },
-    "include": ["src", "../../utils.d.ts"]
+    "include": ["src"]
 }
diff --git a/packages/shared/src/utils/contract/index.ts b/packages/shared/src/utils/contract/index.ts
index 394968d22612..a15e2673e86e 100644
--- a/packages/shared/src/utils/contract/index.ts
+++ b/packages/shared/src/utils/contract/index.ts
@@ -1 +1,2 @@
 export * from './contract';
+export * from './contract-types';
diff --git a/packages/shared/src/utils/date/__tests__/date-time.spec.ts b/packages/shared/src/utils/date/__tests__/date-time.spec.ts
index 8aaeba987872..0e8d5153ee74 100644
--- a/packages/shared/src/utils/date/__tests__/date-time.spec.ts
+++ b/packages/shared/src/utils/date/__tests__/date-time.spec.ts
@@ -9,8 +9,8 @@ describe('toMoment', () => {
         expect(DateTime.toMoment(epoch)).toEqual(moment.unix(epoch).utc());
     });
     it('return correct date when plain string date passed', () => {
-        const date = '12 Mar 2019';
         const format = 'DD MMM YYYY';
+        const date = moment().format(format);
 
         expect(DateTime.toMoment(date).format(format)).toBe(date);
     });
diff --git a/packages/shared/src/utils/date/date-time.ts b/packages/shared/src/utils/date/date-time.ts
index 1d1e58b730e6..d1f717b48e0f 100644
--- a/packages/shared/src/utils/date/date-time.ts
+++ b/packages/shared/src/utils/date/date-time.ts
@@ -35,7 +35,9 @@ export const toMoment = (value?: moment.MomentInput): moment.Moment => {
 
     if (/invalid/i.test(moment(value).toString())) {
         const today_moment = moment();
-        return value > today_moment.utc().daysInMonth()
+        const days_in_month = today_moment.utc().daysInMonth();
+        const value_as_number = moment.utc(value, 'DD MMM YYYY').valueOf() / (1000 * 60 * 60 * 24);
+        return value_as_number > days_in_month
             ? moment.utc(today_moment.add(value as string | number, 'd'), 'DD MMM YYYY')
             : moment.utc(value, 'DD MMM YYYY'); // returns target date
     }
@@ -81,7 +83,7 @@ export const formatTime = (epoch: number | string, time_format = 'HH:mm:ss [GMT]
  * @param  {String} date   the date to calculate number of days from today
  * @return {Number} an integer of the number of days
  */
-export const daysFromTodayTo = (date?: string) => {
+export const daysFromTodayTo = (date?: string | moment.Moment) => {
     const diff = toMoment(date).startOf('day').diff(toMoment().startOf('day'), 'days');
     return !date || diff < 0 ? '' : diff;
 };
diff --git a/packages/shared/src/utils/route/route.ts b/packages/shared/src/utils/route/route.ts
index 9ca0b7c9d09f..332271a9114b 100644
--- a/packages/shared/src/utils/route/route.ts
+++ b/packages/shared/src/utils/route/route.ts
@@ -2,7 +2,7 @@
 import React from 'react';
 // TODO: Add test cases for this
 type TRoute = {
-    component?: React.ElementType;
+    component?: React.ComponentType;
     default?: boolean;
     exact?: boolean;
     getTitle?: () => string;
diff --git a/packages/shared/src/utils/shortcode/shortcode.ts b/packages/shared/src/utils/shortcode/shortcode.ts
index 73ae1c99e7a9..9dc1eaa88539 100644
--- a/packages/shared/src/utils/shortcode/shortcode.ts
+++ b/packages/shared/src/utils/shortcode/shortcode.ts
@@ -92,6 +92,6 @@ export const isHighLow = ({ shortcode = '', shortcode_info }: TIsHighLow) => {
 export const isForwardStarting = (shortcode: string, purchase_time?: number) => {
     const shortcode_info = extractInfoFromShortcode(shortcode);
     if (shortcode_info?.multiplier) return false;
-    const start_time = shortcode_info?.start_time;
+    const start_time: string = shortcode_info?.start_time || '';
     return start_time && purchase_time && /f$/gi.test(start_time);
 };
diff --git a/packages/stores/package.json b/packages/stores/package.json
index b68108586974..1966e83ecf5a 100644
--- a/packages/stores/package.json
+++ b/packages/stores/package.json
@@ -14,9 +14,10 @@
     "devDependencies": {
         "@deriv/api-types": "^1.0.94",
         "@testing-library/react": "^12.0.0",
-        "@testing-library/react-hooks": "^7.0.2",
-        "@types/lodash.merge": "^4.6.7",
+        "typescript": "^4.6.3",
         "react-router": "^5.2.0",
-        "typescript": "^4.6.3"
+        "moment": "^2.29.2",
+        "@testing-library/react-hooks": "^7.0.2",
+        "@types/lodash.merge": "^4.6.7"
     }
 }
diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts
index 001c3c4e47f7..f25b41193cc8 100644
--- a/packages/stores/src/mockStore.ts
+++ b/packages/stores/src/mockStore.ts
@@ -147,6 +147,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             responseTradingPlatformAccountsList: jest.fn(),
             standpoint: {
                 iom: '',
+                malta: '',
             },
             switchAccount: jest.fn(),
             verification_code: {
@@ -177,6 +178,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             setBalanceOtherAccounts: jest.fn(),
             setInitialized: jest.fn(),
             setLogout: jest.fn(),
+            setVisibilityRealityCheck: jest.fn(),
             setP2pAdvertiserInfo: jest.fn(),
             setPreSwitchAccount: jest.fn(),
             switched: false,
@@ -215,6 +217,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             changeSelectedLanguage: jest.fn(),
             current_language: 'EN',
             is_network_online: false,
+            server_time: undefined,
             is_language_changing: false,
         },
         ui: {
@@ -227,12 +230,14 @@ const mock = (): TStores & { is_mock: boolean } => {
             is_dark_mode_on: false,
             is_language_settings_modal_on: false,
             is_mobile: false,
+            is_reports_visible: false,
             disableApp: jest.fn(),
             enableApp: jest.fn(),
             setCurrentFocus: jest.fn(),
             toggleAccountsDialog: jest.fn(),
             toggleCashier: jest.fn(),
             setDarkMode: jest.fn(),
+            setReportsTabIndex: jest.fn(),
             has_real_account_signup_ended: false,
             notification_messages_ui: null,
             openRealAccountSignup: jest.fn(),
@@ -241,6 +246,13 @@ const mock = (): TStores & { is_mock: boolean } => {
             shouldNavigateAfterChooseCrypto: jest.fn(),
             toggleLanguageSettingsModal: jest.fn(),
             toggleSetCurrencyModal: jest.fn(),
+            addToast: jest.fn(),
+            removeToast: jest.fn(),
+            reports_route_tab_index: 1,
+            should_show_cancellation_warning: false,
+            toggleCancellationWarning: jest.fn(),
+            toggleUnsupportedContractModal: jest.fn(),
+            toggleReports: jest.fn(),
             setSubSectionIndex: jest.fn(),
             sub_section_index: 0,
             toggleReadyToDepositModal: jest.fn(),
@@ -289,6 +301,31 @@ const mock = (): TStores & { is_mock: boolean } => {
             showAccountSwitchToRealNotification: jest.fn(),
             setP2PRedirectTo: jest.fn(),
         },
+        portfolio: {
+            active_positions: [],
+            error: {
+                header: '',
+                message: '',
+                type: '',
+                redirect_label: '',
+                redirect_to: '',
+                should_clear_error_on_click: false,
+                should_show_refresh: false,
+                redirectOnClick: jest.fn(),
+                setError: jest.fn(),
+                app_routing_history: [],
+            },
+            getPositionById: jest.fn(),
+            is_loading: false,
+            is_multiplier: false,
+            onClickCancel: jest.fn(),
+            onClickSell: jest.fn(),
+            onMount: jest.fn(),
+            removePositionById: jest.fn(),
+        },
+        contract_trade: {
+            getContractById: jest.fn(),
+        },
         modules: {},
         exchange_rates: {
             data: undefined,
diff --git a/packages/stores/types.ts b/packages/stores/types.ts
index 78b039d87088..692f83d26e46 100644
--- a/packages/stores/types.ts
+++ b/packages/stores/types.ts
@@ -1,9 +1,11 @@
+import type { Moment } from 'moment';
 import type {
     AccountLimitsResponse,
     Authorize,
     DetailsOfEachMT5Loginid,
     GetAccountStatus,
     GetLimits,
+    ProposalOpenContract,
     GetSettings,
     LogOutResponse,
 } from '@deriv/api-types';
@@ -60,6 +62,12 @@ type TMenuItem = {
     text: () => string;
 };
 
+type TAddToastProps = {
+    key: string;
+    content: string;
+    type: string;
+};
+
 type TButtonProps = {
     onClick: () => void;
     text: string;
@@ -158,11 +166,13 @@ type TClientStore = {
     }) => DetailsOfEachMT5Loginid[];
     standpoint: {
         iom: string;
+        malta: string;
     };
     setAccountStatus: (status?: GetAccountStatus) => void;
     setBalanceOtherAccounts: (balance: number) => void;
     setInitialized: (status?: boolean) => void;
     setLogout: (status?: boolean) => void;
+    setVisibilityRealityCheck: (value: boolean) => void;
     setP2pAdvertiserInfo: () => void;
     setPreSwitchAccount: (status?: boolean) => void;
     switchAccount: (value?: string) => Promise<void>;
@@ -220,6 +230,7 @@ type TCommonStore = {
     platform: string;
     routeBackInApp: (history: Pick<RouteComponentProps, 'history'>, additional_platform_path?: string[]) => void;
     routeTo: (pathname: string) => void;
+    server_time?: Moment;
     changeCurrentLanguage: (new_language: string) => void;
     changeSelectedLanguage: (key: string) => void;
     current_language: string;
@@ -227,6 +238,7 @@ type TCommonStore = {
 };
 
 type TUiStore = {
+    addToast: (toast_config: TAddToastProps) => void;
     app_contents_scroll_ref: React.MutableRefObject<null | HTMLDivElement>;
     current_focus: string | null;
     disableApp: () => void;
@@ -235,12 +247,14 @@ type TUiStore = {
     is_cashier_visible: boolean;
     is_closing_create_real_account_modal: boolean;
     is_dark_mode_on: boolean;
+    is_reports_visible: boolean;
     is_language_settings_modal_on: boolean;
     is_mobile: boolean;
     notification_messages_ui: JSX.Element | null;
     openRealAccountSignup: (value?: string) => void;
     setCurrentFocus: (value: string) => void;
     setDarkMode: (is_dark_mode_on: boolean) => boolean;
+    setReportsTabIndex: (value: number) => void;
     setIsClosingCreateRealAccountModal: (value: boolean) => void;
     setRealAccountSignupEnd: (status: boolean) => void;
     sub_section_index: number;
@@ -251,13 +265,35 @@ type TUiStore = {
     toggleLanguageSettingsModal: () => void;
     toggleReadyToDepositModal: () => void;
     toggleSetCurrencyModal: () => void;
+    removeToast: (key: string) => void;
     is_ready_to_deposit_modal_visible: boolean;
+    reports_route_tab_index: number;
+    should_show_cancellation_warning: boolean;
+    toggleCancellationWarning: (state_change: boolean) => void;
+    toggleUnsupportedContractModal: (state_change: boolean) => void;
+    toggleReports: (is_visible: boolean) => void;
     is_real_acc_signup_on: boolean;
     is_need_real_account_for_cashier_modal_visible: boolean;
     toggleNeedRealAccountForCashierModal: () => void;
     setShouldShowCooldownModal: (value: boolean) => void;
 };
 
+type TPortfolioStore = {
+    active_positions: ProposalOpenContract[];
+    error: TCommonStoreError;
+    getPositionById: (id: number) => ProposalOpenContract;
+    is_loading: boolean;
+    is_multiplier: boolean;
+    onClickCancel: (contract_id: number) => void;
+    onClickSell: (contract_id: number) => void;
+    onMount: () => void;
+    removePositionById: (id: number) => void;
+};
+
+type TContractStore = {
+    getContractById: (id: number) => ProposalOpenContract;
+};
+
 type TMenuStore = {
     attach: (item: TMenuItem) => void;
     update: (menu: TMenuItem, index: number) => void;
@@ -314,6 +350,8 @@ export type TCoreStores = {
     common: TCommonStore;
     menu: TMenuStore;
     ui: TUiStore;
+    portfolio: TPortfolioStore;
+    contract_trade: TContractStore;
     // This should be `any` as this property will be handled in each package.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     modules: Record<string, any>;