diff --git a/__mocks__/globals.js b/__mocks__/globals.js
index 3085bcf192cf..c87fa63be2b6 100644
--- a/__mocks__/globals.js
+++ b/__mocks__/globals.js
@@ -2,3 +2,9 @@
 jest.mock('copy-anything', () => ({
     copy: jest.fn(),
 }));
+
+const mock_onfido = {
+    init: jest.fn().mockResolvedValue({}),
+};
+
+window.Onfido = mock_onfido;
diff --git a/package-lock.json b/package-lock.json
index ed3a3131d945..62851c73e1af 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -127,7 +127,6 @@
                 "moment": "^2.29.2",
                 "null-loader": "^4.0.1",
                 "object.fromentries": "^2.0.0",
-                "onfido-sdk-ui": "^11.0.0",
                 "pako": "^1.0.11",
                 "postcss-loader": "^6.2.1",
                 "postcss-preset-env": "^7.4.3",
@@ -6289,16 +6288,6 @@
                 "url": "https://opencollective.com/unified"
             }
         },
-        "node_modules/@mediapipe/face_detection": {
-            "version": "0.4.1646425229",
-            "resolved": "https://registry.npmjs.org/@mediapipe/face_detection/-/face_detection-0.4.1646425229.tgz",
-            "integrity": "sha512-aeCN+fRAojv9ch3NXorP6r5tcGVLR3/gC1HmtqB0WEZBRXrdP6/3W/sGR0dHr1iT6ueiK95G9PVjbzFosf/hrg=="
-        },
-        "node_modules/@mediapipe/face_mesh": {
-            "version": "0.4.1633559619",
-            "resolved": "https://registry.npmjs.org/@mediapipe/face_mesh/-/face_mesh-0.4.1633559619.tgz",
-            "integrity": "sha512-Vc8cdjxS5+O2gnjWH9KncYpUCVXT0h714KlWAsyqJvJbIgUJBqpppbIx8yWcAzBDxm/5cYSuBI5p5ySIPxzcEg=="
-        },
         "node_modules/@motionone/animation": {
             "version": "10.16.3",
             "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.16.3.tgz",
@@ -7090,157 +7079,6 @@
                 "@octokit/openapi-types": "^14.0.0"
             }
         },
-        "node_modules/@onfido/active-video-capture": {
-            "version": "0.22.2",
-            "resolved": "https://registry.npmjs.org/@onfido/active-video-capture/-/active-video-capture-0.22.2.tgz",
-            "integrity": "sha512-wM7PJUdB0rwCpIdKoOczynqALW9zXXr/x43RGDpaGBFMdY5imbXpQtI/JaaZjQsWK6cH8FKAkKLvrxRNYCsMmQ==",
-            "hasInstallScript": true,
-            "dependencies": {
-                "@mediapipe/face_detection": "^0.4.1646425229",
-                "@mediapipe/face_mesh": "^0.4.1633559619",
-                "@onfido/castor": "^2.2.2",
-                "@onfido/castor-icons": "^2.12.0",
-                "@tensorflow-models/face-detection": "^1.0.1",
-                "@tensorflow-models/face-landmarks-detection": "^1.0.2",
-                "@tensorflow/tfjs-backend-wasm": "^3.20.0",
-                "@tensorflow/tfjs-backend-webgl": "^3.20.0",
-                "@tensorflow/tfjs-converter": "^3.20.0",
-                "@tensorflow/tfjs-core": "^3.20.0",
-                "@typescript/lib-dom": "npm:@types/web",
-                "patch-package": "^6.4.7",
-                "postinstall-postinstall": "^2.1.0",
-                "preact": "^10.10.6",
-                "react-webcam": "^7.0.0"
-            },
-            "engines": {
-                "node": ">=16"
-            }
-        },
-        "node_modules/@onfido/active-video-capture/node_modules/@tensorflow-models/face-landmarks-detection": {
-            "version": "1.0.5",
-            "resolved": "https://registry.npmjs.org/@tensorflow-models/face-landmarks-detection/-/face-landmarks-detection-1.0.5.tgz",
-            "integrity": "sha512-54XJPi8g29/MknJ33ZBrLsEzr9kw/dJtrJMMD3xrCrnRlfFQPIKQ5PI2Wml55Fz2p4U2hemzBB0/H+S94JddIQ==",
-            "dependencies": {
-                "rimraf": "^3.0.2"
-            },
-            "peerDependencies": {
-                "@mediapipe/face_mesh": "~0.4.0",
-                "@tensorflow-models/face-detection": "~1.0.0",
-                "@tensorflow/tfjs-backend-webgl": "^3.12.0",
-                "@tensorflow/tfjs-converter": "^3.12.0",
-                "@tensorflow/tfjs-core": "^3.12.0"
-            }
-        },
-        "node_modules/@onfido/active-video-capture/node_modules/@tensorflow/tfjs-backend-cpu": {
-            "version": "3.21.0",
-            "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-cpu/-/tfjs-backend-cpu-3.21.0.tgz",
-            "integrity": "sha512-88S21UAdzyK0CsLUrH17GPTD+26E85OP9CqmLZslaWjWUmBkeTQ5Zqyp6iK+gELnLxPx6q7JsNEeFuPv4254lQ==",
-            "dependencies": {
-                "@types/seedrandom": "^2.4.28",
-                "seedrandom": "^3.0.5"
-            },
-            "engines": {
-                "yarn": ">= 1.3.2"
-            },
-            "peerDependencies": {
-                "@tensorflow/tfjs-core": "3.21.0"
-            }
-        },
-        "node_modules/@onfido/active-video-capture/node_modules/@tensorflow/tfjs-backend-wasm": {
-            "version": "3.21.0",
-            "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-wasm/-/tfjs-backend-wasm-3.21.0.tgz",
-            "integrity": "sha512-TVkJWrqukdxvIaQn9jZvtXR+7fmT7sti6NQH5OKVcBmFYIW7I3RiRRE66inVrHjEEvIVTUuW9yo9Ialn31EFIw==",
-            "dependencies": {
-                "@tensorflow/tfjs-backend-cpu": "3.21.0",
-                "@types/emscripten": "~0.0.34"
-            },
-            "peerDependencies": {
-                "@tensorflow/tfjs-core": "3.21.0"
-            }
-        },
-        "node_modules/@onfido/active-video-capture/node_modules/@tensorflow/tfjs-backend-webgl": {
-            "version": "3.21.0",
-            "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-webgl/-/tfjs-backend-webgl-3.21.0.tgz",
-            "integrity": "sha512-N4zitIAT9IX8B8oe489qM3f3VcESxGZIZvHmVP8varOQakTvTX859aaPo1s8hK1qCy4BjSGbweooZe4U8D4kTQ==",
-            "dependencies": {
-                "@tensorflow/tfjs-backend-cpu": "3.21.0",
-                "@types/offscreencanvas": "~2019.3.0",
-                "@types/seedrandom": "^2.4.28",
-                "@types/webgl-ext": "0.0.30",
-                "@types/webgl2": "0.0.6",
-                "seedrandom": "^3.0.5"
-            },
-            "engines": {
-                "yarn": ">= 1.3.2"
-            },
-            "peerDependencies": {
-                "@tensorflow/tfjs-core": "3.21.0"
-            }
-        },
-        "node_modules/@onfido/active-video-capture/node_modules/@tensorflow/tfjs-converter": {
-            "version": "3.21.0",
-            "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-converter/-/tfjs-converter-3.21.0.tgz",
-            "integrity": "sha512-12Y4zVDq3yW+wSjSDpSv4HnpL2sDZrNiGSg8XNiDE4HQBdjdA+a+Q3sZF/8NV9y2yoBhL5L7V4mMLDdbZBd9/Q==",
-            "peerDependencies": {
-                "@tensorflow/tfjs-core": "3.21.0"
-            }
-        },
-        "node_modules/@onfido/active-video-capture/node_modules/@tensorflow/tfjs-core": {
-            "version": "3.21.0",
-            "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-core/-/tfjs-core-3.21.0.tgz",
-            "integrity": "sha512-YSfsswOqWfd+M4bXIhT3hwtAb+IV8+ODwIxwdFR/7jTAPZP1wMVnSlpKnXHAN64HFOiP+Tm3HmKusEZ0+09A0w==",
-            "dependencies": {
-                "@types/long": "^4.0.1",
-                "@types/offscreencanvas": "~2019.3.0",
-                "@types/seedrandom": "^2.4.28",
-                "@types/webgl-ext": "0.0.30",
-                "@webgpu/types": "0.1.16",
-                "long": "4.0.0",
-                "node-fetch": "~2.6.1",
-                "seedrandom": "^3.0.5"
-            },
-            "engines": {
-                "yarn": ">= 1.3.2"
-            }
-        },
-        "node_modules/@onfido/active-video-capture/node_modules/@webgpu/types": {
-            "version": "0.1.16",
-            "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.16.tgz",
-            "integrity": "sha512-9E61voMP4+Rze02jlTXud++Htpjyyk8vw5Hyw9FGRrmhHQg2GqbuOfwf5Klrb8vTxc2XWI3EfO7RUHMpxTj26A=="
-        },
-        "node_modules/@onfido/castor": {
-            "version": "2.2.5",
-            "resolved": "https://registry.npmjs.org/@onfido/castor/-/castor-2.2.5.tgz",
-            "integrity": "sha512-Io3FTazT06FDFJGjHWNF9g0fsIKHw38L2apL//zp/vveyEV1Zce/U0fLzC8LcE5TuoMnoAYaRi6Jwogd8EN5TA==",
-            "dependencies": {
-                "@onfido/castor-tokens": "^1.0.0-beta.6",
-                "csstype": "^3.1.1"
-            },
-            "peerDependencies": {
-                "@onfido/castor-icons": ">=1.0.0"
-            }
-        },
-        "node_modules/@onfido/castor-icons": {
-            "version": "2.22.0",
-            "resolved": "https://registry.npmjs.org/@onfido/castor-icons/-/castor-icons-2.22.0.tgz",
-            "integrity": "sha512-7OnCvu5xqVWcBLqovZyb99NP0oHw7sjkVYXZhi438i0U6Pgecrhu/14Gc/IN/kvgDxWj9qmiYdd0qdjNaVckrQ==",
-            "peerDependencies": {
-                "react": ">=17 || ^16.14 || ^15.7 || ^0.14.10"
-            }
-        },
-        "node_modules/@onfido/castor-tokens": {
-            "version": "1.0.0-beta.6",
-            "resolved": "https://registry.npmjs.org/@onfido/castor-tokens/-/castor-tokens-1.0.0-beta.6.tgz",
-            "integrity": "sha512-MfwuSlNdM0Ay0cI3LLyqZGsHW0e1Y1R/0IdQKVU575PdWQx1Q/538aOZMo/a3/oSW0pMEgfOm+mNqPx057cvWA=="
-        },
-        "node_modules/@onfido/opencv": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/@onfido/opencv/-/opencv-1.0.2.tgz",
-            "integrity": "sha512-dgUj7NJ3tohlqU6WdYiey5NBTTjI0VYp2yyL8dz1g8c/nX5tM5toOgEgyaNz7fX2tlpJO877G/CT/n5yYSb+gg==",
-            "dependencies": {
-                "mirada": "^0.0.15"
-            }
-        },
         "node_modules/@parcel/watcher": {
             "version": "2.0.4",
             "dev": true,
@@ -8239,82 +8077,6 @@
                 }
             }
         },
-        "node_modules/@sentry-internal/tracing": {
-            "version": "7.70.0",
-            "resolved": "https://registry.npmjs.org/@sentry-internal/tracing/-/tracing-7.70.0.tgz",
-            "integrity": "sha512-SpbE6wZhs6QwG2ORWCt8r28o1T949qkWx/KeRTCdK4Ub95PQ3Y3DgnqD8Wz//3q50Wt6EZDEibmz4t067g6PPg==",
-            "dependencies": {
-                "@sentry/core": "7.70.0",
-                "@sentry/types": "7.70.0",
-                "@sentry/utils": "7.70.0",
-                "tslib": "^2.4.1 || ^1.9.3"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/@sentry/browser": {
-            "version": "7.70.0",
-            "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.70.0.tgz",
-            "integrity": "sha512-PB+IP49/TLcnDHCj9eJ5tcHE0pzXg23wBakmF3KGMSd5nxEbUvmOsaFPZcgUUlL9JlU3v1Y40We7HdPStrY6oA==",
-            "dependencies": {
-                "@sentry-internal/tracing": "7.70.0",
-                "@sentry/core": "7.70.0",
-                "@sentry/replay": "7.70.0",
-                "@sentry/types": "7.70.0",
-                "@sentry/utils": "7.70.0",
-                "tslib": "^2.4.1 || ^1.9.3"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/@sentry/core": {
-            "version": "7.70.0",
-            "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.70.0.tgz",
-            "integrity": "sha512-voUsGVM+jwRp99AQYFnRvr7sVd2tUhIMj1L6F42LtD3vp7t5ZnKp3NpXagtFW2vWzXESfyJUBhM0qI/bFvn7ZA==",
-            "dependencies": {
-                "@sentry/types": "7.70.0",
-                "@sentry/utils": "7.70.0",
-                "tslib": "^2.4.1 || ^1.9.3"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/@sentry/replay": {
-            "version": "7.70.0",
-            "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-7.70.0.tgz",
-            "integrity": "sha512-XjnyE6ORREz9kBWWHdXaIjS9P2Wo7uEw+y23vfLQwzV0Nx3xJ+FG4dwf8onyIoeCZDKbz7cqQIbugU1gkgUtZw==",
-            "dependencies": {
-                "@sentry/core": "7.70.0",
-                "@sentry/types": "7.70.0",
-                "@sentry/utils": "7.70.0"
-            },
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@sentry/types": {
-            "version": "7.70.0",
-            "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.70.0.tgz",
-            "integrity": "sha512-rY4DqpiDBtXSk4MDNBH3dwWqfPbNBI/9GA7Y5WJSIcObBtfBKp0fzYliHJZD0pgM7d4DPFrDn42K9Iiumgymkw==",
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/@sentry/utils": {
-            "version": "7.70.0",
-            "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.70.0.tgz",
-            "integrity": "sha512-0cChMH0lsGp+5I3D4wOHWwjFN19HVrGUs7iWTLTO5St3EaVbdeLbI1vFXHxMxvopbwgpeZafbreHw/loIdZKpw==",
-            "dependencies": {
-                "@sentry/types": "7.70.0",
-                "tslib": "^2.4.1 || ^1.9.3"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
         "node_modules/@sinonjs/commons": {
             "version": "1.8.6",
             "dev": true,
@@ -8357,11 +8119,6 @@
             "integrity": "sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ==",
             "peer": true
         },
-        "node_modules/@socket.io/component-emitter": {
-            "version": "3.1.0",
-            "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
-            "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
-        },
         "node_modules/@stitches/react": {
             "version": "1.2.8",
             "resolved": "https://registry.npmjs.org/@stitches/react/-/react-1.2.8.tgz",
@@ -15555,93 +15312,6 @@
                 "url": "https://github.com/sponsors/tannerlinsley"
             }
         },
-        "node_modules/@tensorflow-models/face-detection": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/@tensorflow-models/face-detection/-/face-detection-1.0.2.tgz",
-            "integrity": "sha512-anjSxy3MnZdTiVluOEQZeaFWM30IPswFM+SltX6wseXKja/AbrHYqamGNZKUylAs2JAyudq+xqTRPS+nA2ourg==",
-            "dependencies": {
-                "rimraf": "^3.0.2",
-                "tslib": "2.4.0"
-            },
-            "peerDependencies": {
-                "@mediapipe/face_detection": "~0.4.0",
-                "@tensorflow/tfjs-backend-webgl": "^4.4.0",
-                "@tensorflow/tfjs-converter": "^4.4.0",
-                "@tensorflow/tfjs-core": "^4.4.0"
-            }
-        },
-        "node_modules/@tensorflow-models/face-detection/node_modules/tslib": {
-            "version": "2.4.0",
-            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-            "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
-        },
-        "node_modules/@tensorflow/tfjs-backend-cpu": {
-            "version": "4.11.0",
-            "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-cpu/-/tfjs-backend-cpu-4.11.0.tgz",
-            "integrity": "sha512-2zmGX9MuR8AwscSGOybz4fBOFgQDnj+ZCWGkLxDzbKecy9GxuilukT46xB2zU0kSq7Mf3ncfE/9eUEy6a7ZDqQ==",
-            "peer": true,
-            "dependencies": {
-                "@types/seedrandom": "^2.4.28",
-                "seedrandom": "^3.0.5"
-            },
-            "engines": {
-                "yarn": ">= 1.3.2"
-            },
-            "peerDependencies": {
-                "@tensorflow/tfjs-core": "4.11.0"
-            }
-        },
-        "node_modules/@tensorflow/tfjs-backend-webgl": {
-            "version": "4.11.0",
-            "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-webgl/-/tfjs-backend-webgl-4.11.0.tgz",
-            "integrity": "sha512-sM/B65u+1T3U+Ctiq1fn5j6VmiLEZW7BpuSa3ZXDXtIS07MoZ2FTuO8BMudxEY4xGpTyoOzqTOGT9BaGO3qrWg==",
-            "peer": true,
-            "dependencies": {
-                "@tensorflow/tfjs-backend-cpu": "4.11.0",
-                "@types/offscreencanvas": "~2019.3.0",
-                "@types/seedrandom": "^2.4.28",
-                "seedrandom": "^3.0.5"
-            },
-            "engines": {
-                "yarn": ">= 1.3.2"
-            },
-            "peerDependencies": {
-                "@tensorflow/tfjs-core": "4.11.0"
-            }
-        },
-        "node_modules/@tensorflow/tfjs-converter": {
-            "version": "4.11.0",
-            "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-converter/-/tfjs-converter-4.11.0.tgz",
-            "integrity": "sha512-j2JEVwkqh+pyin+sxUiNUG7QOIU2S0+5SzN8LFXHlR90/bPvC2qiaaSPYdGG/BYidFc27QCHD3obBXrb1EE/ow==",
-            "peer": true,
-            "peerDependencies": {
-                "@tensorflow/tfjs-core": "4.11.0"
-            }
-        },
-        "node_modules/@tensorflow/tfjs-core": {
-            "version": "4.11.0",
-            "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-core/-/tfjs-core-4.11.0.tgz",
-            "integrity": "sha512-t0mCNIco8wg6aZdHWT1d6ZuKtbbdY5y871ELWLSUA1+grXDvvaroHYh5eeJexJYXeg+EQ0/hzB0G8nLsLjlyVQ==",
-            "peer": true,
-            "dependencies": {
-                "@types/long": "^4.0.1",
-                "@types/offscreencanvas": "~2019.7.0",
-                "@types/seedrandom": "^2.4.28",
-                "@webgpu/types": "0.1.30",
-                "long": "4.0.0",
-                "node-fetch": "~2.6.1",
-                "seedrandom": "^3.0.5"
-            },
-            "engines": {
-                "yarn": ">= 1.3.2"
-            }
-        },
-        "node_modules/@tensorflow/tfjs-core/node_modules/@types/offscreencanvas": {
-            "version": "2019.7.1",
-            "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.1.tgz",
-            "integrity": "sha512-+HSrJgjBW77ALieQdMJvXhRZUIRN1597L+BKvsyeiIlHHERnqjcuOLyodK3auJ3Y3zRezNKtKAhuQWYJfEgFHQ==",
-            "peer": true
-        },
         "node_modules/@testing-library/dom": {
             "version": "8.19.0",
             "license": "MIT",
@@ -15976,11 +15646,6 @@
                 "classnames": "*"
             }
         },
-        "node_modules/@types/emscripten": {
-            "version": "0.0.34",
-            "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-0.0.34.tgz",
-            "integrity": "sha512-QSb9ojDincskc+uKMI0KXp8e1NALFINCrMlp8VGKGcTSxeEyRTTKyjWw75NYrCZHUsVEEEpr1tYHpbtaC++/sQ=="
-        },
         "node_modules/@types/eslint": {
             "version": "7.29.0",
             "license": "MIT",
@@ -16149,11 +15814,6 @@
                 "@types/lodash": "*"
             }
         },
-        "node_modules/@types/long": {
-            "version": "4.0.2",
-            "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.2.tgz",
-            "integrity": "sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA=="
-        },
         "node_modules/@types/mdast": {
             "version": "3.0.10",
             "license": "MIT",
@@ -16210,11 +15870,6 @@
             "resolved": "https://registry.npmjs.org/@types/object.fromentries/-/object.fromentries-2.0.2.tgz",
             "integrity": "sha512-yUrBe89bzuR2AT0XJU26cmMylc15AOTeZzrnzbYcaMCd8fobYPsre+BJku5JJq5iauUdZkdkrujjzEz0l3MrLg=="
         },
-        "node_modules/@types/offscreencanvas": {
-            "version": "2019.3.0",
-            "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.3.0.tgz",
-            "integrity": "sha512-esIJx9bQg+QYF0ra8GnvfianIY8qWB0GBx54PK5Eps6m+xTj86KLavHv6qDhzKcu5UUOgNfJ2pWaIIV7TRUd9Q=="
-        },
         "node_modules/@types/parse-json": {
             "version": "4.0.0",
             "license": "MIT"
@@ -16372,11 +16027,6 @@
             "version": "0.16.2",
             "license": "MIT"
         },
-        "node_modules/@types/seedrandom": {
-            "version": "2.4.30",
-            "resolved": "https://registry.npmjs.org/@types/seedrandom/-/seedrandom-2.4.30.tgz",
-            "integrity": "sha512-AnxLHewubLVzoF/A4qdxBGHCKifw8cY32iro3DQX9TPcetE95zBeVt3jnsvtvAUf1vwzMfwzp4t/L2yqPlnjkQ=="
-        },
         "node_modules/@types/semver": {
             "version": "7.3.13",
             "license": "MIT"
@@ -16431,16 +16081,6 @@
             "version": "2.0.6",
             "license": "MIT"
         },
-        "node_modules/@types/webgl-ext": {
-            "version": "0.0.30",
-            "resolved": "https://registry.npmjs.org/@types/webgl-ext/-/webgl-ext-0.0.30.tgz",
-            "integrity": "sha512-LKVgNmBxN0BbljJrVUwkxwRYqzsAEPcZOe6S2T6ZaBDIrFp0qu4FNlpc5sM1tGbXUYFgdVQIoeLk1Y1UoblyEg=="
-        },
-        "node_modules/@types/webgl2": {
-            "version": "0.0.6",
-            "resolved": "https://registry.npmjs.org/@types/webgl2/-/webgl2-0.0.6.tgz",
-            "integrity": "sha512-50GQhDVTq/herLMiqSQkdtRu+d5q/cWHn4VvKJtrj4DJAjo1MNkWYa2MA41BaBO1q1HgsUjuQvEOk0QHvlnAaQ=="
-        },
         "node_modules/@types/webpack": {
             "version": "4.41.33",
             "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.33.tgz",
@@ -16868,12 +16508,6 @@
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
             }
         },
-        "node_modules/@typescript/lib-dom": {
-            "name": "@types/web",
-            "version": "0.0.115",
-            "resolved": "https://registry.npmjs.org/@types/web/-/web-0.0.115.tgz",
-            "integrity": "sha512-IBtUgtxnITC7WTCg4tv6kCnSP0T+fM+3PzQPIzLzJY1DDlhBFKM/9+uMURw14YweWPDiFNIZ94Gc1bJtwow97g=="
-        },
         "node_modules/@webassemblyjs/ast": {
             "version": "1.11.5",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.5.tgz",
@@ -17104,12 +16738,6 @@
                 "@xtuc/long": "4.2.2"
             }
         },
-        "node_modules/@webgpu/types": {
-            "version": "0.1.30",
-            "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.30.tgz",
-            "integrity": "sha512-9AXJSmL3MzY8ZL//JjudA//q+2kBRGhLBFpkdGksWIuxrMy81nFrCzj2Am+mbh8WoU6rXmv7cY5E3rdlyru2Qg==",
-            "peer": true
-        },
         "node_modules/@webpack-cli/configtest": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz",
@@ -17174,6 +16802,7 @@
         },
         "node_modules/@yarnpkg/lockfile": {
             "version": "1.1.0",
+            "dev": true,
             "license": "BSD-2-Clause"
         },
         "node_modules/@yarnpkg/parsers": {
@@ -19298,11 +18927,6 @@
             "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
             "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
         },
-        "node_modules/blueimp-load-image": {
-            "version": "2.29.0",
-            "resolved": "https://registry.npmjs.org/blueimp-load-image/-/blueimp-load-image-2.29.0.tgz",
-            "integrity": "sha512-psm81GlZ0ffKxVT0QN9dvhpzXMv1KxgXSg8ars0XGAcEGsTwFT2IPo59HDXlw4Lo2oImdPzwrwkliZSiLLUpIw=="
-        },
         "node_modules/bn.js": {
             "version": "5.2.1",
             "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.1.tgz",
@@ -19685,6 +19309,7 @@
         },
         "node_modules/buffer": {
             "version": "5.7.1",
+            "dev": true,
             "funding": [
                 {
                     "type": "github",
@@ -22062,14 +21687,6 @@
                 "which": "bin/which"
             }
         },
-        "node_modules/cross-fetch": {
-            "version": "3.1.8",
-            "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz",
-            "integrity": "sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==",
-            "dependencies": {
-                "node-fetch": "^2.6.12"
-            }
-        },
         "node_modules/cross-spawn": {
             "version": "7.0.3",
             "license": "MIT",
@@ -23753,11 +23370,6 @@
                 "domelementtype": "1"
             }
         },
-        "node_modules/dompurify": {
-            "version": "2.4.7",
-            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.7.tgz",
-            "integrity": "sha512-kxxKlPEDa6Nc5WJi+qRgPbOAbgTpSULL+vI3NUXsZMlkJxTqYI9wg5ZTay2sFrdZRWHPWNi+EdAhcJf81WtoMQ=="
-        },
         "node_modules/domready": {
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/domready/-/domready-1.0.8.tgz",
@@ -24069,46 +23681,6 @@
                 "objectorarray": "^1.0.5"
             }
         },
-        "node_modules/engine.io-client": {
-            "version": "6.5.2",
-            "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.2.tgz",
-            "integrity": "sha512-CQZqbrpEYnrpGqC07a9dJDz4gePZUgTPMU3NKJPSeQOyw27Tst4Pl3FemKoFGAlHzgZmKjoRmiJvbWfhCXUlIg==",
-            "dependencies": {
-                "@socket.io/component-emitter": "~3.1.0",
-                "debug": "~4.3.1",
-                "engine.io-parser": "~5.2.1",
-                "ws": "~8.11.0",
-                "xmlhttprequest-ssl": "~2.0.0"
-            }
-        },
-        "node_modules/engine.io-client/node_modules/ws": {
-            "version": "8.11.0",
-            "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
-            "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
-            "engines": {
-                "node": ">=10.0.0"
-            },
-            "peerDependencies": {
-                "bufferutil": "^4.0.1",
-                "utf-8-validate": "^5.0.2"
-            },
-            "peerDependenciesMeta": {
-                "bufferutil": {
-                    "optional": true
-                },
-                "utf-8-validate": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/engine.io-parser": {
-            "version": "5.2.1",
-            "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.1.tgz",
-            "integrity": "sha512-9JktcM3u18nU9N2Lz3bWeBgxVgOKpw7yhRaoxQA3FUDZzzw+9WlA6p4G4u0RixNkg14fH7EfEc/RhpurtiROTQ==",
-            "engines": {
-                "node": ">=10.0.0"
-            }
-        },
         "node_modules/enhanced-resolve": {
             "version": "0.9.1",
             "dependencies": {
@@ -24134,11 +23706,6 @@
             "version": "1.1.2",
             "license": "BSD-2-Clause"
         },
-        "node_modules/enumerate-devices": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/enumerate-devices/-/enumerate-devices-1.1.1.tgz",
-            "integrity": "sha512-8zDbrc7ocusTL1ZGmvgy0cTwdyCaM7sGZoYLRmnWJalLQzmftDtce+uDU91gafOTo9MCtgjSIxyMv/F4+Hcchw=="
-        },
         "node_modules/env-paths": {
             "version": "2.2.1",
             "dev": true,
@@ -25956,11 +25523,6 @@
             "resolved": "https://registry.npmjs.org/event-emitter-es6/-/event-emitter-es6-1.1.5.tgz",
             "integrity": "sha512-/n7qzkJBySdbe1W9/FBDdO7gzDIaewgj+Rj6Ayc2BdvVcaGP+p40DyViOFudCgV47UU8+cUFmcD3tJgjwY65qQ=="
         },
-        "node_modules/eventemitter2": {
-            "version": "2.2.2",
-            "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-2.2.2.tgz",
-            "integrity": "sha512-AmQ734LWUB9Iyk+2WIU3Z8iRhdL1XQihEE0iF/QC5Xp11zST0Z5tn5jRHa/PgIld2QIPSCys3CREqOQLUhNvkw=="
-        },
         "node_modules/eventemitter3": {
             "version": "4.0.7",
             "license": "MIT"
@@ -26718,14 +26280,6 @@
                 "ramda": "^0.28.0"
             }
         },
-        "node_modules/file-type": {
-            "version": "12.4.2",
-            "resolved": "https://registry.npmjs.org/file-type/-/file-type-12.4.2.tgz",
-            "integrity": "sha512-UssQP5ZgIOKelfsaB5CuGAL+Y+q7EmONuiwF3N5HAH0t27rvrttgi6Ra9k/+DVaY9UF6+ybxu5pOXLUdA8N7Vg==",
-            "engines": {
-                "node": ">=8"
-            }
-        },
         "node_modules/file-uri-to-path": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -26955,14 +26509,6 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/find-yarn-workspace-root": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz",
-            "integrity": "sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==",
-            "dependencies": {
-                "micromatch": "^4.0.2"
-            }
-        },
         "node_modules/flat": {
             "version": "5.0.2",
             "dev": true,
@@ -33761,14 +33307,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/klaw-sync": {
-            "version": "6.0.0",
-            "resolved": "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz",
-            "integrity": "sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==",
-            "dependencies": {
-                "graceful-fs": "^4.1.11"
-            }
-        },
         "node_modules/kleur": {
             "version": "3.0.3",
             "license": "MIT",
@@ -34626,11 +34164,6 @@
                 "url": "https://tidelift.com/funding/github/npm/loglevel"
             }
         },
-        "node_modules/long": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
-            "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
-        },
         "node_modules/longest-streak": {
             "version": "2.0.4",
             "dev": true,
@@ -35403,22 +34936,6 @@
                 "node": ">= 8"
             }
         },
-        "node_modules/mirada": {
-            "version": "0.0.15",
-            "resolved": "https://registry.npmjs.org/mirada/-/mirada-0.0.15.tgz",
-            "integrity": "sha512-mbm4c+wjBVcmUzHRLv/TfOAq+iy03D24KwGxx8H+NSXkD5EOZV9zFWbVxTvZCc9XwR0FIUhryU/kQm12SMSQ3g==",
-            "dependencies": {
-                "buffer": "^5.4.3",
-                "cross-fetch": "^3.0.4",
-                "file-type": "^12.3.0",
-                "misc-utils-of-mine-generic": "^0.2.31"
-            }
-        },
-        "node_modules/misc-utils-of-mine-generic": {
-            "version": "0.2.45",
-            "resolved": "https://registry.npmjs.org/misc-utils-of-mine-generic/-/misc-utils-of-mine-generic-0.2.45.tgz",
-            "integrity": "sha512-WsG2zYiui2cdEbHF2pXmJfnjHb4zL+cy+PaYcLgIpMju98hwX89VbjlvGIfamCfEodbQ0qjCEvD3ocgkCXfMOQ=="
-        },
         "node_modules/mississippi": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
@@ -37222,80 +36739,6 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/onfido-sdk-ui": {
-            "version": "11.0.1",
-            "resolved": "https://registry.npmjs.org/onfido-sdk-ui/-/onfido-sdk-ui-11.0.1.tgz",
-            "integrity": "sha512-S61h4njiuWQD3KNLRZaoobiaSjTvt1FjBOwqnsJmnkN7TD/knu8c1IyNlgztRe0Fg2CSE70rwEiO8tdlM3pqsg==",
-            "dependencies": {
-                "@onfido/active-video-capture": "^0.22.1",
-                "@onfido/opencv": "^1.0.0",
-                "@sentry/browser": "^7.2.0",
-                "blueimp-load-image": "~2.29.0",
-                "classnames": "~2.2.5",
-                "core-js": "^3.21.1",
-                "deepmerge": "^4.2.2",
-                "dompurify": "^2.2.6",
-                "enumerate-devices": "^1.1.1",
-                "eventemitter2": "~2.2.2",
-                "history": "~4.5.1",
-                "hoist-non-react-statics": "^3.3.2",
-                "js-cookie": "^3.0.1",
-                "pdfobject": "^2.2.7",
-                "preact": "^10.5.13",
-                "redux": "^4.0.5",
-                "socket.io-client": "^4.2.0",
-                "supports-webp": "~1.0.3",
-                "uuid": "^8.3.2",
-                "visibilityjs": "~1.2.4",
-                "xstate": "^4.33.6"
-            },
-            "bin": {
-                "migrate_locales": "scripts/migrate_locales.js"
-            }
-        },
-        "node_modules/onfido-sdk-ui/node_modules/classnames": {
-            "version": "2.2.6",
-            "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
-            "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
-        },
-        "node_modules/onfido-sdk-ui/node_modules/core-js": {
-            "version": "3.32.2",
-            "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.32.2.tgz",
-            "integrity": "sha512-pxXSw1mYZPDGvTQqEc5vgIb83jGQKFGYWY76z4a7weZXUolw3G+OvpZqSRcfYOoOVUQJYEPsWeQK8pKEnUtWxQ==",
-            "hasInstallScript": true,
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/core-js"
-            }
-        },
-        "node_modules/onfido-sdk-ui/node_modules/history": {
-            "version": "4.5.1",
-            "resolved": "https://registry.npmjs.org/history/-/history-4.5.1.tgz",
-            "integrity": "sha512-gfHeJeYeMzFtos61gdA1AloO0hGXPF2Yum+2FRdJvlylYQOz51OnT1zuwg9UYst1BRrONhcAh3Nmsg9iblgl6g==",
-            "dependencies": {
-                "invariant": "^2.2.1",
-                "loose-envify": "^1.2.0",
-                "resolve-pathname": "^2.0.0",
-                "value-equal": "^0.2.0",
-                "warning": "^3.0.0"
-            }
-        },
-        "node_modules/onfido-sdk-ui/node_modules/js-cookie": {
-            "version": "3.0.5",
-            "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
-            "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
-            "engines": {
-                "node": ">=14"
-            }
-        },
-        "node_modules/onfido-sdk-ui/node_modules/warning": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
-            "integrity": "sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==",
-            "dependencies": {
-                "loose-envify": "^1.0.0"
-            }
-        },
         "node_modules/open": {
             "version": "8.4.0",
             "license": "MIT",
@@ -37930,207 +37373,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/patch-package": {
-            "version": "6.5.1",
-            "resolved": "https://registry.npmjs.org/patch-package/-/patch-package-6.5.1.tgz",
-            "integrity": "sha512-I/4Zsalfhc6bphmJTlrLoOcAF87jcxko4q0qsv4bGcurbr8IskEOtdnt9iCmsQVGL1B+iUhSQqweyTLJfCF9rA==",
-            "dependencies": {
-                "@yarnpkg/lockfile": "^1.1.0",
-                "chalk": "^4.1.2",
-                "cross-spawn": "^6.0.5",
-                "find-yarn-workspace-root": "^2.0.0",
-                "fs-extra": "^9.0.0",
-                "is-ci": "^2.0.0",
-                "klaw-sync": "^6.0.0",
-                "minimist": "^1.2.6",
-                "open": "^7.4.2",
-                "rimraf": "^2.6.3",
-                "semver": "^5.6.0",
-                "slash": "^2.0.0",
-                "tmp": "^0.0.33",
-                "yaml": "^1.10.2"
-            },
-            "bin": {
-                "patch-package": "index.js"
-            },
-            "engines": {
-                "node": ">=10",
-                "npm": ">5"
-            }
-        },
-        "node_modules/patch-package/node_modules/ansi-styles": {
-            "version": "4.3.0",
-            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-            "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-            "dependencies": {
-                "color-convert": "^2.0.1"
-            },
-            "engines": {
-                "node": ">=8"
-            },
-            "funding": {
-                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-            }
-        },
-        "node_modules/patch-package/node_modules/chalk": {
-            "version": "4.1.2",
-            "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-            "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-            "dependencies": {
-                "ansi-styles": "^4.1.0",
-                "supports-color": "^7.1.0"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/chalk/chalk?sponsor=1"
-            }
-        },
-        "node_modules/patch-package/node_modules/color-convert": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-            "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-            "dependencies": {
-                "color-name": "~1.1.4"
-            },
-            "engines": {
-                "node": ">=7.0.0"
-            }
-        },
-        "node_modules/patch-package/node_modules/color-name": {
-            "version": "1.1.4",
-            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-        },
-        "node_modules/patch-package/node_modules/cross-spawn": {
-            "version": "6.0.5",
-            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-            "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
-            "dependencies": {
-                "nice-try": "^1.0.4",
-                "path-key": "^2.0.1",
-                "semver": "^5.5.0",
-                "shebang-command": "^1.2.0",
-                "which": "^1.2.9"
-            },
-            "engines": {
-                "node": ">=4.8"
-            }
-        },
-        "node_modules/patch-package/node_modules/fs-extra": {
-            "version": "9.1.0",
-            "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-            "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-            "dependencies": {
-                "at-least-node": "^1.0.0",
-                "graceful-fs": "^4.2.0",
-                "jsonfile": "^6.0.1",
-                "universalify": "^2.0.0"
-            },
-            "engines": {
-                "node": ">=10"
-            }
-        },
-        "node_modules/patch-package/node_modules/has-flag": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-            "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/patch-package/node_modules/open": {
-            "version": "7.4.2",
-            "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
-            "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
-            "dependencies": {
-                "is-docker": "^2.0.0",
-                "is-wsl": "^2.1.1"
-            },
-            "engines": {
-                "node": ">=8"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/patch-package/node_modules/path-key": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-            "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/patch-package/node_modules/rimraf": {
-            "version": "2.7.1",
-            "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-            "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-            "dependencies": {
-                "glob": "^7.1.3"
-            },
-            "bin": {
-                "rimraf": "bin.js"
-            }
-        },
-        "node_modules/patch-package/node_modules/semver": {
-            "version": "5.7.2",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-            "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-            "bin": {
-                "semver": "bin/semver"
-            }
-        },
-        "node_modules/patch-package/node_modules/shebang-command": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-            "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
-            "dependencies": {
-                "shebang-regex": "^1.0.0"
-            },
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/patch-package/node_modules/shebang-regex": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-            "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==",
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/patch-package/node_modules/slash": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-            "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/patch-package/node_modules/supports-color": {
-            "version": "7.2.0",
-            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-            "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-            "dependencies": {
-                "has-flag": "^4.0.0"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/patch-package/node_modules/which": {
-            "version": "1.3.1",
-            "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-            "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-            "dependencies": {
-                "isexe": "^2.0.0"
-            },
-            "bin": {
-                "which": "bin/which"
-            }
-        },
         "node_modules/path-browserify": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
@@ -38207,11 +37449,6 @@
                 "node": ">=0.12"
             }
         },
-        "node_modules/pdfobject": {
-            "version": "2.2.12",
-            "resolved": "https://registry.npmjs.org/pdfobject/-/pdfobject-2.2.12.tgz",
-            "integrity": "sha512-D0oyD/sj8j82AMaJhoyMaY1aD5TkbpU3FbJC6w9/cpJlZRpYHqAkutXw1Ca/FKjYPZmTAu58uGIfgOEaDlbY8A=="
-        },
         "node_modules/performance-now": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -39833,21 +39070,6 @@
                 "posthtml-render": "^1.0.6"
             }
         },
-        "node_modules/postinstall-postinstall": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/postinstall-postinstall/-/postinstall-postinstall-2.1.0.tgz",
-            "integrity": "sha512-7hQX6ZlZXIoRiWNrbMQaLzUUfH+sSx39u8EJ9HYuDc1kLo9IXKWjM5RSquZN1ad5GnH8CGFM78fsAAQi3OKEEQ==",
-            "hasInstallScript": true
-        },
-        "node_modules/preact": {
-            "version": "10.17.1",
-            "resolved": "https://registry.npmjs.org/preact/-/preact-10.17.1.tgz",
-            "integrity": "sha512-X9BODrvQ4Ekwv9GURm9AKAGaomqXmip7NQTZgY7gcNmr7XE83adOMJvd3N42id1tMFU7ojiynRsYnY6/BRFxLA==",
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/preact"
-            }
-        },
         "node_modules/preload-webpack-plugin": {
             "version": "3.0.0-beta.4",
             "resolved": "https://registry.npmjs.org/preload-webpack-plugin/-/preload-webpack-plugin-3.0.0-beta.4.tgz",
@@ -41394,15 +40616,6 @@
                 "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0"
             }
         },
-        "node_modules/react-webcam": {
-            "version": "7.1.1",
-            "resolved": "https://registry.npmjs.org/react-webcam/-/react-webcam-7.1.1.tgz",
-            "integrity": "sha512-2W5WN8wmEv8ZlxvyAlOxVuw6new8Bi7+KSPqoq5oa7z1KSKZ72ucaKqCFRtHSuFjZ5sh5ioS9lp4BGwnaZ6lDg==",
-            "peerDependencies": {
-                "react": ">=16.2.0",
-                "react-dom": ">=16.2.0"
-            }
-        },
         "node_modules/react-window": {
             "version": "1.8.9",
             "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.9.tgz",
@@ -42560,11 +41773,6 @@
                 "node": ">=8"
             }
         },
-        "node_modules/resolve-pathname": {
-            "version": "2.2.0",
-            "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
-            "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
-        },
         "node_modules/resolve-url": {
             "version": "0.2.1",
             "license": "MIT"
@@ -43454,11 +42662,6 @@
             "resolved": "https://registry.npmjs.org/scrollparent/-/scrollparent-2.1.0.tgz",
             "integrity": "sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA=="
         },
-        "node_modules/seedrandom": {
-            "version": "3.0.5",
-            "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
-            "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
-        },
         "node_modules/select": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
@@ -44156,32 +43359,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/socket.io-client": {
-            "version": "4.7.2",
-            "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.2.tgz",
-            "integrity": "sha512-vtA0uD4ibrYD793SOIAwlo8cj6haOeMHrGvwPxJsxH7CeIksqJ+3Zc06RvWTIFgiSqx4A3sOnTXpfAEE2Zyz6w==",
-            "dependencies": {
-                "@socket.io/component-emitter": "~3.1.0",
-                "debug": "~4.3.2",
-                "engine.io-client": "~6.5.2",
-                "socket.io-parser": "~4.2.4"
-            },
-            "engines": {
-                "node": ">=10.0.0"
-            }
-        },
-        "node_modules/socket.io-parser": {
-            "version": "4.2.4",
-            "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
-            "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
-            "dependencies": {
-                "@socket.io/component-emitter": "~3.1.0",
-                "debug": "~4.3.1"
-            },
-            "engines": {
-                "node": ">=10.0.0"
-            }
-        },
         "node_modules/sockjs": {
             "version": "0.3.24",
             "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
@@ -45612,11 +44789,6 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
-        "node_modules/supports-webp": {
-            "version": "1.0.7",
-            "resolved": "https://registry.npmjs.org/supports-webp/-/supports-webp-1.0.7.tgz",
-            "integrity": "sha512-ZlqT+sCgZKcykOLrk8DYR4t3Em+nyVSHpiV3q7uzOutLwKIYU23n88KibCLw3FzM4NCQeRorvZ55AV/77lQyOQ=="
-        },
         "node_modules/svg-baker": {
             "version": "1.7.0",
             "resolved": "https://registry.npmjs.org/svg-baker/-/svg-baker-1.7.0.tgz",
@@ -46352,6 +45524,7 @@
         },
         "node_modules/tmp": {
             "version": "0.0.33",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "os-tmpdir": "~1.0.2"
@@ -47591,11 +46764,6 @@
                 "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
             }
         },
-        "node_modules/value-equal": {
-            "version": "0.2.1",
-            "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.2.1.tgz",
-            "integrity": "sha512-yRL36Xb2K/HmFT5Fe3M86S7mu4+a12/3l7uytUh6eNPPjP77ldPBvsAvmnWff39sXn55naRMZN8LZWRO8PWaeQ=="
-        },
         "node_modules/vary": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -47673,11 +46841,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/visibilityjs": {
-            "version": "1.2.8",
-            "resolved": "https://registry.npmjs.org/visibilityjs/-/visibilityjs-1.2.8.tgz",
-            "integrity": "sha512-Y+aL3OUX88b+/VSmkmC2ApuLbf0grzbNLpCfIDSw3BzTU6PqcPsdgIOaw8b+eZoy+DdQqnVN3y/Evow9vQq9Ig=="
-        },
         "node_modules/vm-browserify": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -49924,23 +49087,6 @@
             "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
             "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
         },
-        "node_modules/xmlhttprequest-ssl": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
-            "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==",
-            "engines": {
-                "node": ">=0.4.0"
-            }
-        },
-        "node_modules/xstate": {
-            "version": "4.38.2",
-            "resolved": "https://registry.npmjs.org/xstate/-/xstate-4.38.2.tgz",
-            "integrity": "sha512-Fba/DwEPDLneHT3tbJ9F3zafbQXszOlyCJyQqqdzmtlY/cwE2th462KK48yaANf98jHlP6lJvxfNtN0LFKXPQg==",
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/xstate"
-            }
-        },
         "node_modules/xtend": {
             "version": "4.0.2",
             "license": "MIT",
@@ -54103,16 +53249,6 @@
             "resolved": "https://registry.npmjs.org/@mdx-js/util/-/util-1.6.22.tgz",
             "integrity": "sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA=="
         },
-        "@mediapipe/face_detection": {
-            "version": "0.4.1646425229",
-            "resolved": "https://registry.npmjs.org/@mediapipe/face_detection/-/face_detection-0.4.1646425229.tgz",
-            "integrity": "sha512-aeCN+fRAojv9ch3NXorP6r5tcGVLR3/gC1HmtqB0WEZBRXrdP6/3W/sGR0dHr1iT6ueiK95G9PVjbzFosf/hrg=="
-        },
-        "@mediapipe/face_mesh": {
-            "version": "0.4.1633559619",
-            "resolved": "https://registry.npmjs.org/@mediapipe/face_mesh/-/face_mesh-0.4.1633559619.tgz",
-            "integrity": "sha512-Vc8cdjxS5+O2gnjWH9KncYpUCVXT0h714KlWAsyqJvJbIgUJBqpppbIx8yWcAzBDxm/5cYSuBI5p5ySIPxzcEg=="
-        },
         "@motionone/animation": {
             "version": "10.16.3",
             "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.16.3.tgz",
@@ -54691,123 +53827,6 @@
                 "@octokit/openapi-types": "^14.0.0"
             }
         },
-        "@onfido/active-video-capture": {
-            "version": "0.22.2",
-            "resolved": "https://registry.npmjs.org/@onfido/active-video-capture/-/active-video-capture-0.22.2.tgz",
-            "integrity": "sha512-wM7PJUdB0rwCpIdKoOczynqALW9zXXr/x43RGDpaGBFMdY5imbXpQtI/JaaZjQsWK6cH8FKAkKLvrxRNYCsMmQ==",
-            "requires": {
-                "@mediapipe/face_detection": "^0.4.1646425229",
-                "@mediapipe/face_mesh": "^0.4.1633559619",
-                "@onfido/castor": "^2.2.2",
-                "@onfido/castor-icons": "^2.12.0",
-                "@tensorflow-models/face-detection": "^1.0.1",
-                "@tensorflow-models/face-landmarks-detection": "^1.0.2",
-                "@tensorflow/tfjs-backend-wasm": "^3.20.0",
-                "@tensorflow/tfjs-backend-webgl": "^3.20.0",
-                "@tensorflow/tfjs-converter": "^3.20.0",
-                "@tensorflow/tfjs-core": "^3.20.0",
-                "@typescript/lib-dom": "npm:@types/web",
-                "patch-package": "^6.4.7",
-                "postinstall-postinstall": "^2.1.0",
-                "preact": "^10.10.6",
-                "react-webcam": "^7.0.0"
-            },
-            "dependencies": {
-                "@tensorflow-models/face-landmarks-detection": {
-                    "version": "1.0.5",
-                    "resolved": "https://registry.npmjs.org/@tensorflow-models/face-landmarks-detection/-/face-landmarks-detection-1.0.5.tgz",
-                    "integrity": "sha512-54XJPi8g29/MknJ33ZBrLsEzr9kw/dJtrJMMD3xrCrnRlfFQPIKQ5PI2Wml55Fz2p4U2hemzBB0/H+S94JddIQ==",
-                    "requires": {
-                        "rimraf": "^3.0.2"
-                    }
-                },
-                "@tensorflow/tfjs-backend-cpu": {
-                    "version": "3.21.0",
-                    "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-cpu/-/tfjs-backend-cpu-3.21.0.tgz",
-                    "integrity": "sha512-88S21UAdzyK0CsLUrH17GPTD+26E85OP9CqmLZslaWjWUmBkeTQ5Zqyp6iK+gELnLxPx6q7JsNEeFuPv4254lQ==",
-                    "requires": {
-                        "@types/seedrandom": "^2.4.28",
-                        "seedrandom": "^3.0.5"
-                    }
-                },
-                "@tensorflow/tfjs-backend-wasm": {
-                    "version": "3.21.0",
-                    "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-wasm/-/tfjs-backend-wasm-3.21.0.tgz",
-                    "integrity": "sha512-TVkJWrqukdxvIaQn9jZvtXR+7fmT7sti6NQH5OKVcBmFYIW7I3RiRRE66inVrHjEEvIVTUuW9yo9Ialn31EFIw==",
-                    "requires": {
-                        "@tensorflow/tfjs-backend-cpu": "3.21.0",
-                        "@types/emscripten": "~0.0.34"
-                    }
-                },
-                "@tensorflow/tfjs-backend-webgl": {
-                    "version": "3.21.0",
-                    "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-webgl/-/tfjs-backend-webgl-3.21.0.tgz",
-                    "integrity": "sha512-N4zitIAT9IX8B8oe489qM3f3VcESxGZIZvHmVP8varOQakTvTX859aaPo1s8hK1qCy4BjSGbweooZe4U8D4kTQ==",
-                    "requires": {
-                        "@tensorflow/tfjs-backend-cpu": "3.21.0",
-                        "@types/offscreencanvas": "~2019.3.0",
-                        "@types/seedrandom": "^2.4.28",
-                        "@types/webgl-ext": "0.0.30",
-                        "@types/webgl2": "0.0.6",
-                        "seedrandom": "^3.0.5"
-                    }
-                },
-                "@tensorflow/tfjs-converter": {
-                    "version": "3.21.0",
-                    "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-converter/-/tfjs-converter-3.21.0.tgz",
-                    "integrity": "sha512-12Y4zVDq3yW+wSjSDpSv4HnpL2sDZrNiGSg8XNiDE4HQBdjdA+a+Q3sZF/8NV9y2yoBhL5L7V4mMLDdbZBd9/Q==",
-                    "requires": {}
-                },
-                "@tensorflow/tfjs-core": {
-                    "version": "3.21.0",
-                    "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-core/-/tfjs-core-3.21.0.tgz",
-                    "integrity": "sha512-YSfsswOqWfd+M4bXIhT3hwtAb+IV8+ODwIxwdFR/7jTAPZP1wMVnSlpKnXHAN64HFOiP+Tm3HmKusEZ0+09A0w==",
-                    "requires": {
-                        "@types/long": "^4.0.1",
-                        "@types/offscreencanvas": "~2019.3.0",
-                        "@types/seedrandom": "^2.4.28",
-                        "@types/webgl-ext": "0.0.30",
-                        "@webgpu/types": "0.1.16",
-                        "long": "4.0.0",
-                        "node-fetch": "~2.6.1",
-                        "seedrandom": "^3.0.5"
-                    }
-                },
-                "@webgpu/types": {
-                    "version": "0.1.16",
-                    "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.16.tgz",
-                    "integrity": "sha512-9E61voMP4+Rze02jlTXud++Htpjyyk8vw5Hyw9FGRrmhHQg2GqbuOfwf5Klrb8vTxc2XWI3EfO7RUHMpxTj26A=="
-                }
-            }
-        },
-        "@onfido/castor": {
-            "version": "2.2.5",
-            "resolved": "https://registry.npmjs.org/@onfido/castor/-/castor-2.2.5.tgz",
-            "integrity": "sha512-Io3FTazT06FDFJGjHWNF9g0fsIKHw38L2apL//zp/vveyEV1Zce/U0fLzC8LcE5TuoMnoAYaRi6Jwogd8EN5TA==",
-            "requires": {
-                "@onfido/castor-tokens": "^1.0.0-beta.6",
-                "csstype": "^3.1.1"
-            }
-        },
-        "@onfido/castor-icons": {
-            "version": "2.22.0",
-            "resolved": "https://registry.npmjs.org/@onfido/castor-icons/-/castor-icons-2.22.0.tgz",
-            "integrity": "sha512-7OnCvu5xqVWcBLqovZyb99NP0oHw7sjkVYXZhi438i0U6Pgecrhu/14Gc/IN/kvgDxWj9qmiYdd0qdjNaVckrQ==",
-            "requires": {}
-        },
-        "@onfido/castor-tokens": {
-            "version": "1.0.0-beta.6",
-            "resolved": "https://registry.npmjs.org/@onfido/castor-tokens/-/castor-tokens-1.0.0-beta.6.tgz",
-            "integrity": "sha512-MfwuSlNdM0Ay0cI3LLyqZGsHW0e1Y1R/0IdQKVU575PdWQx1Q/538aOZMo/a3/oSW0pMEgfOm+mNqPx057cvWA=="
-        },
-        "@onfido/opencv": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/@onfido/opencv/-/opencv-1.0.2.tgz",
-            "integrity": "sha512-dgUj7NJ3tohlqU6WdYiey5NBTTjI0VYp2yyL8dz1g8c/nX5tM5toOgEgyaNz7fX2tlpJO877G/CT/n5yYSb+gg==",
-            "requires": {
-                "mirada": "^0.0.15"
-            }
-        },
         "@parcel/watcher": {
             "version": "2.0.4",
             "dev": true,
@@ -55364,64 +54383,6 @@
             "integrity": "sha512-VNipPeJT7B6hD/OBDi6IjcGW+Y8fJHNkVUkvFk0BUkkZLY1eefUmtrv2CWWbJ0hxfGFWe+wRVEjsdWDXqLN/DA==",
             "requires": {}
         },
-        "@sentry-internal/tracing": {
-            "version": "7.70.0",
-            "resolved": "https://registry.npmjs.org/@sentry-internal/tracing/-/tracing-7.70.0.tgz",
-            "integrity": "sha512-SpbE6wZhs6QwG2ORWCt8r28o1T949qkWx/KeRTCdK4Ub95PQ3Y3DgnqD8Wz//3q50Wt6EZDEibmz4t067g6PPg==",
-            "requires": {
-                "@sentry/core": "7.70.0",
-                "@sentry/types": "7.70.0",
-                "@sentry/utils": "7.70.0",
-                "tslib": "^2.4.1 || ^1.9.3"
-            }
-        },
-        "@sentry/browser": {
-            "version": "7.70.0",
-            "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.70.0.tgz",
-            "integrity": "sha512-PB+IP49/TLcnDHCj9eJ5tcHE0pzXg23wBakmF3KGMSd5nxEbUvmOsaFPZcgUUlL9JlU3v1Y40We7HdPStrY6oA==",
-            "requires": {
-                "@sentry-internal/tracing": "7.70.0",
-                "@sentry/core": "7.70.0",
-                "@sentry/replay": "7.70.0",
-                "@sentry/types": "7.70.0",
-                "@sentry/utils": "7.70.0",
-                "tslib": "^2.4.1 || ^1.9.3"
-            }
-        },
-        "@sentry/core": {
-            "version": "7.70.0",
-            "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.70.0.tgz",
-            "integrity": "sha512-voUsGVM+jwRp99AQYFnRvr7sVd2tUhIMj1L6F42LtD3vp7t5ZnKp3NpXagtFW2vWzXESfyJUBhM0qI/bFvn7ZA==",
-            "requires": {
-                "@sentry/types": "7.70.0",
-                "@sentry/utils": "7.70.0",
-                "tslib": "^2.4.1 || ^1.9.3"
-            }
-        },
-        "@sentry/replay": {
-            "version": "7.70.0",
-            "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-7.70.0.tgz",
-            "integrity": "sha512-XjnyE6ORREz9kBWWHdXaIjS9P2Wo7uEw+y23vfLQwzV0Nx3xJ+FG4dwf8onyIoeCZDKbz7cqQIbugU1gkgUtZw==",
-            "requires": {
-                "@sentry/core": "7.70.0",
-                "@sentry/types": "7.70.0",
-                "@sentry/utils": "7.70.0"
-            }
-        },
-        "@sentry/types": {
-            "version": "7.70.0",
-            "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.70.0.tgz",
-            "integrity": "sha512-rY4DqpiDBtXSk4MDNBH3dwWqfPbNBI/9GA7Y5WJSIcObBtfBKp0fzYliHJZD0pgM7d4DPFrDn42K9Iiumgymkw=="
-        },
-        "@sentry/utils": {
-            "version": "7.70.0",
-            "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.70.0.tgz",
-            "integrity": "sha512-0cChMH0lsGp+5I3D4wOHWwjFN19HVrGUs7iWTLTO5St3EaVbdeLbI1vFXHxMxvopbwgpeZafbreHw/loIdZKpw==",
-            "requires": {
-                "@sentry/types": "7.70.0",
-                "tslib": "^2.4.1 || ^1.9.3"
-            }
-        },
         "@sinonjs/commons": {
             "version": "1.8.6",
             "dev": true,
@@ -55464,11 +54425,6 @@
             "integrity": "sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ==",
             "peer": true
         },
-        "@socket.io/component-emitter": {
-            "version": "3.1.0",
-            "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
-            "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
-        },
         "@stitches/react": {
             "version": "1.2.8",
             "resolved": "https://registry.npmjs.org/@stitches/react/-/react-1.2.8.tgz",
@@ -60887,74 +59843,6 @@
             "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.10.3.tgz",
             "integrity": "sha512-hJ55YfJlWbfzRROfcyA/kC1aZr/shsLA8XNAwN8jXylhYWGLnPmiJJISrUfj4dMMWRiFi0xBlnlC7MLH+zSrcw=="
         },
-        "@tensorflow-models/face-detection": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/@tensorflow-models/face-detection/-/face-detection-1.0.2.tgz",
-            "integrity": "sha512-anjSxy3MnZdTiVluOEQZeaFWM30IPswFM+SltX6wseXKja/AbrHYqamGNZKUylAs2JAyudq+xqTRPS+nA2ourg==",
-            "requires": {
-                "rimraf": "^3.0.2",
-                "tslib": "2.4.0"
-            },
-            "dependencies": {
-                "tslib": {
-                    "version": "2.4.0",
-                    "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-                    "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
-                }
-            }
-        },
-        "@tensorflow/tfjs-backend-cpu": {
-            "version": "4.11.0",
-            "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-cpu/-/tfjs-backend-cpu-4.11.0.tgz",
-            "integrity": "sha512-2zmGX9MuR8AwscSGOybz4fBOFgQDnj+ZCWGkLxDzbKecy9GxuilukT46xB2zU0kSq7Mf3ncfE/9eUEy6a7ZDqQ==",
-            "peer": true,
-            "requires": {
-                "@types/seedrandom": "^2.4.28",
-                "seedrandom": "^3.0.5"
-            }
-        },
-        "@tensorflow/tfjs-backend-webgl": {
-            "version": "4.11.0",
-            "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-webgl/-/tfjs-backend-webgl-4.11.0.tgz",
-            "integrity": "sha512-sM/B65u+1T3U+Ctiq1fn5j6VmiLEZW7BpuSa3ZXDXtIS07MoZ2FTuO8BMudxEY4xGpTyoOzqTOGT9BaGO3qrWg==",
-            "peer": true,
-            "requires": {
-                "@tensorflow/tfjs-backend-cpu": "4.11.0",
-                "@types/offscreencanvas": "~2019.3.0",
-                "@types/seedrandom": "^2.4.28",
-                "seedrandom": "^3.0.5"
-            }
-        },
-        "@tensorflow/tfjs-converter": {
-            "version": "4.11.0",
-            "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-converter/-/tfjs-converter-4.11.0.tgz",
-            "integrity": "sha512-j2JEVwkqh+pyin+sxUiNUG7QOIU2S0+5SzN8LFXHlR90/bPvC2qiaaSPYdGG/BYidFc27QCHD3obBXrb1EE/ow==",
-            "peer": true,
-            "requires": {}
-        },
-        "@tensorflow/tfjs-core": {
-            "version": "4.11.0",
-            "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-core/-/tfjs-core-4.11.0.tgz",
-            "integrity": "sha512-t0mCNIco8wg6aZdHWT1d6ZuKtbbdY5y871ELWLSUA1+grXDvvaroHYh5eeJexJYXeg+EQ0/hzB0G8nLsLjlyVQ==",
-            "peer": true,
-            "requires": {
-                "@types/long": "^4.0.1",
-                "@types/offscreencanvas": "~2019.7.0",
-                "@types/seedrandom": "^2.4.28",
-                "@webgpu/types": "0.1.30",
-                "long": "4.0.0",
-                "node-fetch": "~2.6.1",
-                "seedrandom": "^3.0.5"
-            },
-            "dependencies": {
-                "@types/offscreencanvas": {
-                    "version": "2019.7.1",
-                    "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.1.tgz",
-                    "integrity": "sha512-+HSrJgjBW77ALieQdMJvXhRZUIRN1597L+BKvsyeiIlHHERnqjcuOLyodK3auJ3Y3zRezNKtKAhuQWYJfEgFHQ==",
-                    "peer": true
-                }
-            }
-        },
         "@testing-library/dom": {
             "version": "8.19.0",
             "requires": {
@@ -61180,11 +60068,6 @@
                 "classnames": "*"
             }
         },
-        "@types/emscripten": {
-            "version": "0.0.34",
-            "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-0.0.34.tgz",
-            "integrity": "sha512-QSb9ojDincskc+uKMI0KXp8e1NALFINCrMlp8VGKGcTSxeEyRTTKyjWw75NYrCZHUsVEEEpr1tYHpbtaC++/sQ=="
-        },
         "@types/eslint": {
             "version": "7.29.0",
             "requires": {
@@ -61342,11 +60225,6 @@
                 "@types/lodash": "*"
             }
         },
-        "@types/long": {
-            "version": "4.0.2",
-            "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.2.tgz",
-            "integrity": "sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA=="
-        },
         "@types/mdast": {
             "version": "3.0.10",
             "requires": {
@@ -61397,11 +60275,6 @@
             "resolved": "https://registry.npmjs.org/@types/object.fromentries/-/object.fromentries-2.0.2.tgz",
             "integrity": "sha512-yUrBe89bzuR2AT0XJU26cmMylc15AOTeZzrnzbYcaMCd8fobYPsre+BJku5JJq5iauUdZkdkrujjzEz0l3MrLg=="
         },
-        "@types/offscreencanvas": {
-            "version": "2019.3.0",
-            "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.3.0.tgz",
-            "integrity": "sha512-esIJx9bQg+QYF0ra8GnvfianIY8qWB0GBx54PK5Eps6m+xTj86KLavHv6qDhzKcu5UUOgNfJ2pWaIIV7TRUd9Q=="
-        },
         "@types/parse-json": {
             "version": "4.0.0"
         },
@@ -61550,11 +60423,6 @@
         "@types/scheduler": {
             "version": "0.16.2"
         },
-        "@types/seedrandom": {
-            "version": "2.4.30",
-            "resolved": "https://registry.npmjs.org/@types/seedrandom/-/seedrandom-2.4.30.tgz",
-            "integrity": "sha512-AnxLHewubLVzoF/A4qdxBGHCKifw8cY32iro3DQX9TPcetE95zBeVt3jnsvtvAUf1vwzMfwzp4t/L2yqPlnjkQ=="
-        },
         "@types/semver": {
             "version": "7.3.13"
         },
@@ -61605,16 +60473,6 @@
         "@types/unist": {
             "version": "2.0.6"
         },
-        "@types/webgl-ext": {
-            "version": "0.0.30",
-            "resolved": "https://registry.npmjs.org/@types/webgl-ext/-/webgl-ext-0.0.30.tgz",
-            "integrity": "sha512-LKVgNmBxN0BbljJrVUwkxwRYqzsAEPcZOe6S2T6ZaBDIrFp0qu4FNlpc5sM1tGbXUYFgdVQIoeLk1Y1UoblyEg=="
-        },
-        "@types/webgl2": {
-            "version": "0.0.6",
-            "resolved": "https://registry.npmjs.org/@types/webgl2/-/webgl2-0.0.6.tgz",
-            "integrity": "sha512-50GQhDVTq/herLMiqSQkdtRu+d5q/cWHn4VvKJtrj4DJAjo1MNkWYa2MA41BaBO1q1HgsUjuQvEOk0QHvlnAaQ=="
-        },
         "@types/webpack": {
             "version": "4.41.33",
             "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.33.tgz",
@@ -61856,11 +60714,6 @@
                 }
             }
         },
-        "@typescript/lib-dom": {
-            "version": "npm:@types/web@0.0.115",
-            "resolved": "https://registry.npmjs.org/@types/web/-/web-0.0.115.tgz",
-            "integrity": "sha512-IBtUgtxnITC7WTCg4tv6kCnSP0T+fM+3PzQPIzLzJY1DDlhBFKM/9+uMURw14YweWPDiFNIZ94Gc1bJtwow97g=="
-        },
         "@webassemblyjs/ast": {
             "version": "1.11.5",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.5.tgz",
@@ -62097,12 +60950,6 @@
                 "@xtuc/long": "4.2.2"
             }
         },
-        "@webgpu/types": {
-            "version": "0.1.30",
-            "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.30.tgz",
-            "integrity": "sha512-9AXJSmL3MzY8ZL//JjudA//q+2kBRGhLBFpkdGksWIuxrMy81nFrCzj2Am+mbh8WoU6rXmv7cY5E3rdlyru2Qg==",
-            "peer": true
-        },
         "@webpack-cli/configtest": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz",
@@ -62147,7 +60994,8 @@
             "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
         },
         "@yarnpkg/lockfile": {
-            "version": "1.1.0"
+            "version": "1.1.0",
+            "dev": true
         },
         "@yarnpkg/parsers": {
             "version": "3.0.0-rc.32",
@@ -63723,11 +62571,6 @@
             "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
             "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
         },
-        "blueimp-load-image": {
-            "version": "2.29.0",
-            "resolved": "https://registry.npmjs.org/blueimp-load-image/-/blueimp-load-image-2.29.0.tgz",
-            "integrity": "sha512-psm81GlZ0ffKxVT0QN9dvhpzXMv1KxgXSg8ars0XGAcEGsTwFT2IPo59HDXlw4Lo2oImdPzwrwkliZSiLLUpIw=="
-        },
         "bn.js": {
             "version": "5.2.1",
             "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.1.tgz",
@@ -64028,6 +62871,7 @@
         },
         "buffer": {
             "version": "5.7.1",
+            "dev": true,
             "requires": {
                 "base64-js": "^1.3.1",
                 "ieee754": "^1.1.13"
@@ -65764,14 +64608,6 @@
                 }
             }
         },
-        "cross-fetch": {
-            "version": "3.1.8",
-            "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz",
-            "integrity": "sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==",
-            "requires": {
-                "node-fetch": "^2.6.12"
-            }
-        },
         "cross-spawn": {
             "version": "7.0.3",
             "requires": {
@@ -66984,11 +65820,6 @@
                 "domelementtype": "1"
             }
         },
-        "dompurify": {
-            "version": "2.4.7",
-            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.7.tgz",
-            "integrity": "sha512-kxxKlPEDa6Nc5WJi+qRgPbOAbgTpSULL+vI3NUXsZMlkJxTqYI9wg5ZTay2sFrdZRWHPWNi+EdAhcJf81WtoMQ=="
-        },
         "domready": {
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/domready/-/domready-1.0.8.tgz",
@@ -67252,31 +66083,6 @@
                 "objectorarray": "^1.0.5"
             }
         },
-        "engine.io-client": {
-            "version": "6.5.2",
-            "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.2.tgz",
-            "integrity": "sha512-CQZqbrpEYnrpGqC07a9dJDz4gePZUgTPMU3NKJPSeQOyw27Tst4Pl3FemKoFGAlHzgZmKjoRmiJvbWfhCXUlIg==",
-            "requires": {
-                "@socket.io/component-emitter": "~3.1.0",
-                "debug": "~4.3.1",
-                "engine.io-parser": "~5.2.1",
-                "ws": "~8.11.0",
-                "xmlhttprequest-ssl": "~2.0.0"
-            },
-            "dependencies": {
-                "ws": {
-                    "version": "8.11.0",
-                    "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
-                    "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
-                    "requires": {}
-                }
-            }
-        },
-        "engine.io-parser": {
-            "version": "5.2.1",
-            "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.1.tgz",
-            "integrity": "sha512-9JktcM3u18nU9N2Lz3bWeBgxVgOKpw7yhRaoxQA3FUDZzzw+9WlA6p4G4u0RixNkg14fH7EfEc/RhpurtiROTQ=="
-        },
         "enhanced-resolve": {
             "version": "0.9.1",
             "requires": {
@@ -67294,11 +66100,6 @@
         "entities": {
             "version": "1.1.2"
         },
-        "enumerate-devices": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/enumerate-devices/-/enumerate-devices-1.1.1.tgz",
-            "integrity": "sha512-8zDbrc7ocusTL1ZGmvgy0cTwdyCaM7sGZoYLRmnWJalLQzmftDtce+uDU91gafOTo9MCtgjSIxyMv/F4+Hcchw=="
-        },
         "env-paths": {
             "version": "2.2.1",
             "dev": true
@@ -68491,11 +67292,6 @@
             "resolved": "https://registry.npmjs.org/event-emitter-es6/-/event-emitter-es6-1.1.5.tgz",
             "integrity": "sha512-/n7qzkJBySdbe1W9/FBDdO7gzDIaewgj+Rj6Ayc2BdvVcaGP+p40DyViOFudCgV47UU8+cUFmcD3tJgjwY65qQ=="
         },
-        "eventemitter2": {
-            "version": "2.2.2",
-            "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-2.2.2.tgz",
-            "integrity": "sha512-AmQ734LWUB9Iyk+2WIU3Z8iRhdL1XQihEE0iF/QC5Xp11zST0Z5tn5jRHa/PgIld2QIPSCys3CREqOQLUhNvkw=="
-        },
         "eventemitter3": {
             "version": "4.0.7"
         },
@@ -69056,11 +67852,6 @@
                 "ramda": "^0.28.0"
             }
         },
-        "file-type": {
-            "version": "12.4.2",
-            "resolved": "https://registry.npmjs.org/file-type/-/file-type-12.4.2.tgz",
-            "integrity": "sha512-UssQP5ZgIOKelfsaB5CuGAL+Y+q7EmONuiwF3N5HAH0t27rvrttgi6Ra9k/+DVaY9UF6+ybxu5pOXLUdA8N7Vg=="
-        },
         "file-uri-to-path": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -69233,14 +68024,6 @@
                 "path-exists": "^4.0.0"
             }
         },
-        "find-yarn-workspace-root": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz",
-            "integrity": "sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==",
-            "requires": {
-                "micromatch": "^4.0.2"
-            }
-        },
         "flat": {
             "version": "5.0.2",
             "dev": true
@@ -73889,14 +72672,6 @@
         "kind-of": {
             "version": "6.0.3"
         },
-        "klaw-sync": {
-            "version": "6.0.0",
-            "resolved": "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz",
-            "integrity": "sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==",
-            "requires": {
-                "graceful-fs": "^4.1.11"
-            }
-        },
         "kleur": {
             "version": "3.0.3"
         },
@@ -74506,11 +73281,6 @@
             "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.8.1.tgz",
             "integrity": "sha512-tCRIJM51SHjAayKwC+QAg8hT8vg6z7GSgLJKGvzuPb1Wc+hLzqtuVLxp6/HzSPOozuK+8ErAhy7U/sVzw8Dgfg=="
         },
-        "long": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
-            "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
-        },
         "longest-streak": {
             "version": "2.0.4",
             "dev": true
@@ -75051,22 +73821,6 @@
                 "yallist": "^4.0.0"
             }
         },
-        "mirada": {
-            "version": "0.0.15",
-            "resolved": "https://registry.npmjs.org/mirada/-/mirada-0.0.15.tgz",
-            "integrity": "sha512-mbm4c+wjBVcmUzHRLv/TfOAq+iy03D24KwGxx8H+NSXkD5EOZV9zFWbVxTvZCc9XwR0FIUhryU/kQm12SMSQ3g==",
-            "requires": {
-                "buffer": "^5.4.3",
-                "cross-fetch": "^3.0.4",
-                "file-type": "^12.3.0",
-                "misc-utils-of-mine-generic": "^0.2.31"
-            }
-        },
-        "misc-utils-of-mine-generic": {
-            "version": "0.2.45",
-            "resolved": "https://registry.npmjs.org/misc-utils-of-mine-generic/-/misc-utils-of-mine-generic-0.2.45.tgz",
-            "integrity": "sha512-WsG2zYiui2cdEbHF2pXmJfnjHb4zL+cy+PaYcLgIpMju98hwX89VbjlvGIfamCfEodbQ0qjCEvD3ocgkCXfMOQ=="
-        },
         "mississippi": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
@@ -76355,71 +75109,6 @@
                 "mimic-fn": "^2.1.0"
             }
         },
-        "onfido-sdk-ui": {
-            "version": "11.0.1",
-            "resolved": "https://registry.npmjs.org/onfido-sdk-ui/-/onfido-sdk-ui-11.0.1.tgz",
-            "integrity": "sha512-S61h4njiuWQD3KNLRZaoobiaSjTvt1FjBOwqnsJmnkN7TD/knu8c1IyNlgztRe0Fg2CSE70rwEiO8tdlM3pqsg==",
-            "requires": {
-                "@onfido/active-video-capture": "^0.22.1",
-                "@onfido/opencv": "^1.0.0",
-                "@sentry/browser": "^7.2.0",
-                "blueimp-load-image": "~2.29.0",
-                "classnames": "~2.2.5",
-                "core-js": "^3.21.1",
-                "deepmerge": "^4.2.2",
-                "dompurify": "^2.2.6",
-                "enumerate-devices": "^1.1.1",
-                "eventemitter2": "~2.2.2",
-                "history": "~4.5.1",
-                "hoist-non-react-statics": "^3.3.2",
-                "js-cookie": "^3.0.1",
-                "pdfobject": "^2.2.7",
-                "preact": "^10.5.13",
-                "redux": "^4.0.5",
-                "socket.io-client": "^4.2.0",
-                "supports-webp": "~1.0.3",
-                "uuid": "^8.3.2",
-                "visibilityjs": "~1.2.4",
-                "xstate": "^4.33.6"
-            },
-            "dependencies": {
-                "classnames": {
-                    "version": "2.2.6",
-                    "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
-                    "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
-                },
-                "core-js": {
-                    "version": "3.32.2",
-                    "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.32.2.tgz",
-                    "integrity": "sha512-pxXSw1mYZPDGvTQqEc5vgIb83jGQKFGYWY76z4a7weZXUolw3G+OvpZqSRcfYOoOVUQJYEPsWeQK8pKEnUtWxQ=="
-                },
-                "history": {
-                    "version": "4.5.1",
-                    "resolved": "https://registry.npmjs.org/history/-/history-4.5.1.tgz",
-                    "integrity": "sha512-gfHeJeYeMzFtos61gdA1AloO0hGXPF2Yum+2FRdJvlylYQOz51OnT1zuwg9UYst1BRrONhcAh3Nmsg9iblgl6g==",
-                    "requires": {
-                        "invariant": "^2.2.1",
-                        "loose-envify": "^1.2.0",
-                        "resolve-pathname": "^2.0.0",
-                        "value-equal": "^0.2.0",
-                        "warning": "^3.0.0"
-                    }
-                },
-                "js-cookie": {
-                    "version": "3.0.5",
-                    "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
-                    "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw=="
-                },
-                "warning": {
-                    "version": "3.0.0",
-                    "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
-                    "integrity": "sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==",
-                    "requires": {
-                        "loose-envify": "^1.0.0"
-                    }
-                }
-            }
-        },
         "open": {
             "version": "8.4.0",
             "requires": {
@@ -76852,148 +75541,6 @@
         "pascalcase": {
             "version": "0.1.1"
         },
-        "patch-package": {
-            "version": "6.5.1",
-            "resolved": "https://registry.npmjs.org/patch-package/-/patch-package-6.5.1.tgz",
-            "integrity": "sha512-I/4Zsalfhc6bphmJTlrLoOcAF87jcxko4q0qsv4bGcurbr8IskEOtdnt9iCmsQVGL1B+iUhSQqweyTLJfCF9rA==",
-            "requires": {
-                "@yarnpkg/lockfile": "^1.1.0",
-                "chalk": "^4.1.2",
-                "cross-spawn": "^6.0.5",
-                "find-yarn-workspace-root": "^2.0.0",
-                "fs-extra": "^9.0.0",
-                "is-ci": "^2.0.0",
-                "klaw-sync": "^6.0.0",
-                "minimist": "^1.2.6",
-                "open": "^7.4.2",
-                "rimraf": "^2.6.3",
-                "semver": "^5.6.0",
-                "slash": "^2.0.0",
-                "tmp": "^0.0.33",
-                "yaml": "^1.10.2"
-            },
-            "dependencies": {
-                "ansi-styles": {
-                    "version": "4.3.0",
-                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-                    "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-                    "requires": {
-                        "color-convert": "^2.0.1"
-                    }
-                },
-                "chalk": {
-                    "version": "4.1.2",
-                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-                    "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-                    "requires": {
-                        "ansi-styles": "^4.1.0",
-                        "supports-color": "^7.1.0"
-                    }
-                },
-                "color-convert": {
-                    "version": "2.0.1",
-                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-                    "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-                    "requires": {
-                        "color-name": "~1.1.4"
-                    }
-                },
-                "color-name": {
-                    "version": "1.1.4",
-                    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-                    "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-                },
-                "cross-spawn": {
-                    "version": "6.0.5",
-                    "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-                    "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
-                    "requires": {
-                        "nice-try": "^1.0.4",
-                        "path-key": "^2.0.1",
-                        "semver": "^5.5.0",
-                        "shebang-command": "^1.2.0",
-                        "which": "^1.2.9"
-                    }
-                },
-                "fs-extra": {
-                    "version": "9.1.0",
-                    "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-                    "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-                    "requires": {
-                        "at-least-node": "^1.0.0",
-                        "graceful-fs": "^4.2.0",
-                        "jsonfile": "^6.0.1",
-                        "universalify": "^2.0.0"
-                    }
-                },
-                "has-flag": {
-                    "version": "4.0.0",
-                    "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-                    "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-                },
-                "open": {
-                    "version": "7.4.2",
-                    "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
-                    "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
-                    "requires": {
-                        "is-docker": "^2.0.0",
-                        "is-wsl": "^2.1.1"
-                    }
-                },
-                "path-key": {
-                    "version": "2.0.1",
-                    "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-                    "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw=="
-                },
-                "rimraf": {
-                    "version": "2.7.1",
-                    "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-                    "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-                    "requires": {
-                        "glob": "^7.1.3"
-                    }
-                },
-                "semver": {
-                    "version": "5.7.2",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-                    "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g=="
-                },
-                "shebang-command": {
-                    "version": "1.2.0",
-                    "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-                    "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
-                    "requires": {
-                        "shebang-regex": "^1.0.0"
-                    }
-                },
-                "shebang-regex": {
-                    "version": "1.0.0",
-                    "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-                    "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ=="
-                },
-                "slash": {
-                    "version": "2.0.0",
-                    "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-                    "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A=="
-                },
-                "supports-color": {
-                    "version": "7.2.0",
-                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-                    "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-                    "requires": {
-                        "has-flag": "^4.0.0"
-                    }
-                },
-                "which": {
-                    "version": "1.3.1",
-                    "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-                    "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-                    "requires": {
-                        "isexe": "^2.0.0"
-                    }
-                }
-            }
-        },
         "path-browserify": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
@@ -77047,11 +75594,6 @@
                 "sha.js": "^2.4.8"
             }
         },
-        "pdfobject": {
-            "version": "2.2.12",
-            "resolved": "https://registry.npmjs.org/pdfobject/-/pdfobject-2.2.12.tgz",
-            "integrity": "sha512-D0oyD/sj8j82AMaJhoyMaY1aD5TkbpU3FbJC6w9/cpJlZRpYHqAkutXw1Ca/FKjYPZmTAu58uGIfgOEaDlbY8A=="
-        },
         "performance-now": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -78026,16 +76568,6 @@
                 "posthtml-render": "^1.0.6"
             }
         },
-        "postinstall-postinstall": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/postinstall-postinstall/-/postinstall-postinstall-2.1.0.tgz",
-            "integrity": "sha512-7hQX6ZlZXIoRiWNrbMQaLzUUfH+sSx39u8EJ9HYuDc1kLo9IXKWjM5RSquZN1ad5GnH8CGFM78fsAAQi3OKEEQ=="
-        },
-        "preact": {
-            "version": "10.17.1",
-            "resolved": "https://registry.npmjs.org/preact/-/preact-10.17.1.tgz",
-            "integrity": "sha512-X9BODrvQ4Ekwv9GURm9AKAGaomqXmip7NQTZgY7gcNmr7XE83adOMJvd3N42id1tMFU7ojiynRsYnY6/BRFxLA=="
-        },
         "preload-webpack-plugin": {
             "version": "3.0.0-beta.4",
             "resolved": "https://registry.npmjs.org/preload-webpack-plugin/-/preload-webpack-plugin-3.0.0-beta.4.tgz",
@@ -79186,12 +77718,6 @@
                 "react-lifecycles-compat": "^3.0.4"
             }
         },
-        "react-webcam": {
-            "version": "7.1.1",
-            "resolved": "https://registry.npmjs.org/react-webcam/-/react-webcam-7.1.1.tgz",
-            "integrity": "sha512-2W5WN8wmEv8ZlxvyAlOxVuw6new8Bi7+KSPqoq5oa7z1KSKZ72ucaKqCFRtHSuFjZ5sh5ioS9lp4BGwnaZ6lDg==",
-            "requires": {}
-        },
         "react-window": {
             "version": "1.8.9",
             "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.9.tgz",
@@ -79998,11 +78524,6 @@
                 "global-dirs": "^0.1.1"
             }
         },
-        "resolve-pathname": {
-            "version": "2.2.0",
-            "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
-            "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
-        },
         "resolve-url": {
             "version": "0.2.1"
         },
@@ -80639,11 +79160,6 @@
             "resolved": "https://registry.npmjs.org/scrollparent/-/scrollparent-2.1.0.tgz",
             "integrity": "sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA=="
         },
-        "seedrandom": {
-            "version": "3.0.5",
-            "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
-            "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
-        },
         "select": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
@@ -81174,26 +79690,6 @@
                 }
             }
         },
-        "socket.io-client": {
-            "version": "4.7.2",
-            "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.2.tgz",
-            "integrity": "sha512-vtA0uD4ibrYD793SOIAwlo8cj6haOeMHrGvwPxJsxH7CeIksqJ+3Zc06RvWTIFgiSqx4A3sOnTXpfAEE2Zyz6w==",
-            "requires": {
-                "@socket.io/component-emitter": "~3.1.0",
-                "debug": "~4.3.2",
-                "engine.io-client": "~6.5.2",
-                "socket.io-parser": "~4.2.4"
-            }
-        },
-        "socket.io-parser": {
-            "version": "4.2.4",
-            "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
-            "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
-            "requires": {
-                "@socket.io/component-emitter": "~3.1.0",
-                "debug": "~4.3.1"
-            }
-        },
         "sockjs": {
             "version": "0.3.24",
             "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
@@ -82193,11 +80689,6 @@
         "supports-preserve-symlinks-flag": {
             "version": "1.0.0"
         },
-        "supports-webp": {
-            "version": "1.0.7",
-            "resolved": "https://registry.npmjs.org/supports-webp/-/supports-webp-1.0.7.tgz",
-            "integrity": "sha512-ZlqT+sCgZKcykOLrk8DYR4t3Em+nyVSHpiV3q7uzOutLwKIYU23n88KibCLw3FzM4NCQeRorvZ55AV/77lQyOQ=="
-        },
         "svg-baker": {
             "version": "1.7.0",
             "resolved": "https://registry.npmjs.org/svg-baker/-/svg-baker-1.7.0.tgz",
@@ -82740,6 +81231,7 @@
         },
         "tmp": {
             "version": "0.0.33",
+            "dev": true,
             "requires": {
                 "os-tmpdir": "~1.0.2"
             }
@@ -83536,11 +82028,6 @@
                 "builtins": "^5.0.0"
             }
         },
-        "value-equal": {
-            "version": "0.2.1",
-            "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.2.1.tgz",
-            "integrity": "sha512-yRL36Xb2K/HmFT5Fe3M86S7mu4+a12/3l7uytUh6eNPPjP77ldPBvsAvmnWff39sXn55naRMZN8LZWRO8PWaeQ=="
-        },
         "vary": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -83599,11 +82086,6 @@
                 }
             }
         },
-        "visibilityjs": {
-            "version": "1.2.8",
-            "resolved": "https://registry.npmjs.org/visibilityjs/-/visibilityjs-1.2.8.tgz",
-            "integrity": "sha512-Y+aL3OUX88b+/VSmkmC2ApuLbf0grzbNLpCfIDSw3BzTU6PqcPsdgIOaw8b+eZoy+DdQqnVN3y/Evow9vQq9Ig=="
-        },
         "vm-browserify": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -85338,16 +83820,6 @@
             "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
             "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
         },
-        "xmlhttprequest-ssl": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
-            "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A=="
-        },
-        "xstate": {
-            "version": "4.38.2",
-            "resolved": "https://registry.npmjs.org/xstate/-/xstate-4.38.2.tgz",
-            "integrity": "sha512-Fba/DwEPDLneHT3tbJ9F3zafbQXszOlyCJyQqqdzmtlY/cwE2th462KK48yaANf98jHlP6lJvxfNtN0LFKXPQg=="
-        },
         "xtend": {
             "version": "4.0.2"
         },
diff --git a/packages/account/package.json b/packages/account/package.json
index 2c0fa8befa1b..9d5c57f8320b 100644
--- a/packages/account/package.json
+++ b/packages/account/package.json
@@ -44,7 +44,6 @@
         "js-cookie": "^2.2.1",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.1",
-        "onfido-sdk-ui": "^11.0.0",
         "prop-types": "^15.7.2",
         "qrcode.react": "^1.0.0",
         "react": "^17.0.2",
diff --git a/packages/account/src/Components/additional-kyc-info-modal/__test__/additional-kyc-info-form.spec.tsx b/packages/account/src/Components/additional-kyc-info-modal/__test__/additional-kyc-info-form.spec.tsx
new file mode 100644
index 000000000000..0b1f9dc9affe
--- /dev/null
+++ b/packages/account/src/Components/additional-kyc-info-modal/__test__/additional-kyc-info-form.spec.tsx
@@ -0,0 +1,134 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import { AdditionalKycInfoForm } from '../additional-kyc-info-form';
+import userEvent from '@testing-library/user-event';
+import { useSettings } from '@deriv/api';
+
+jest.mock('@deriv/api', () => ({
+    ...jest.requireActual('@deriv/api'),
+    useSettings: jest.fn(),
+}));
+
+const mockedUseSettings = useSettings as jest.MockedFunction<typeof useSettings>;
+
+const mock_settings: ReturnType<typeof useSettings> = {
+    update: jest.fn(),
+    mutation: { isLoading: false, isSuccess: false, error: null, isError: false },
+    data: {
+        tax_identification_number: '',
+        tax_residence: '',
+        place_of_birth: '',
+        account_opening_reason: '',
+    },
+};
+
+jest.mock('@deriv/shared', () => ({
+    ...jest.requireActual('@deriv/shared'),
+    generateValidationFunction: jest.fn(),
+}));
+
+describe('AdditionalKycInfoForm', () => {
+    const setError = jest.fn();
+    const mock_store = mockStore({});
+
+    it('should render the form fields', () => {
+        mockedUseSettings.mockReturnValue(mock_settings);
+        render(
+            <StoreProvider store={mock_store}>
+                <AdditionalKycInfoForm setError={setError} />
+            </StoreProvider>
+        );
+
+        expect(screen.getByTestId('dt_place_of_birth')).toBeInTheDocument();
+        expect(screen.getByTestId('dt_tax_residence')).toBeInTheDocument();
+        expect(screen.getByTestId('dt_tax_identification_number')).toBeInTheDocument();
+        expect(screen.getByTestId('dt_account_opening_reason')).toBeInTheDocument();
+    });
+
+    it('should render loading state upon fetching data', () => {
+        mockedUseSettings.mockReturnValue({ ...mock_settings, isLoading: true });
+        render(
+            <StoreProvider store={mock_store}>
+                <AdditionalKycInfoForm setError={setError} />
+            </StoreProvider>
+        );
+
+        expect(screen.getByTestId('dt_initial_loader')).toBeInTheDocument();
+    });
+
+    it('should submit the form when all fields are valid', async () => {
+        mockedUseSettings.mockReturnValue(mock_settings);
+        render(
+            <StoreProvider store={mock_store}>
+                <AdditionalKycInfoForm setError={setError} />
+            </StoreProvider>
+        );
+
+        const submit_btn = screen.getByRole('button', { name: 'Submit' });
+
+        userEvent.type(screen.getByTestId('dt_place_of_birth'), 'Ghana');
+        userEvent.type(screen.getByTestId('dt_tax_residence'), 'Ghana');
+        userEvent.type(screen.getByTestId('dt_tax_identification_number'), 'GHA-000000000-0');
+        userEvent.type(screen.getByTestId('dt_account_opening_reason'), 'Speculative');
+
+        await waitFor(() => {
+            expect(submit_btn).toBeEnabled();
+        });
+        userEvent.click(screen.getByRole('button', { name: 'Submit' }));
+
+        expect(mockedUseSettings).toHaveBeenCalled();
+    });
+
+    it('should be able to submit the form without filling optional fields', async () => {
+        mockedUseSettings.mockReturnValue(mock_settings);
+        render(
+            <StoreProvider store={mock_store}>
+                <AdditionalKycInfoForm setError={setError} />
+            </StoreProvider>
+        );
+
+        const submit_btn = screen.getByRole('button', { name: 'Submit' });
+
+        userEvent.type(screen.getByTestId('dt_place_of_birth'), 'Ghana');
+        userEvent.type(screen.getByTestId('dt_account_opening_reason'), 'Speculative');
+
+        await waitFor(() => {
+            expect(submit_btn).toBeEnabled();
+        });
+        userEvent.click(screen.getByRole('button', { name: 'Submit' }));
+
+        expect(mockedUseSettings).toHaveBeenCalled();
+    });
+
+    it('should show an error message if form validation fails', async () => {
+        mockedUseSettings.mockReturnValue({
+            ...mock_settings,
+            mutation: {
+                ...mock_settings.mutation,
+                isError: true,
+                status: 'error',
+                error: {
+                    message: 'Invalid TIN format',
+                },
+            },
+        });
+        render(
+            <StoreProvider store={mock_store}>
+                <AdditionalKycInfoForm setError={setError} />
+            </StoreProvider>
+        );
+
+        const submit_btn = screen.getByRole('button', { name: 'Submit' });
+
+        userEvent.type(screen.getByTestId('dt_place_of_birth'), 'Ghana');
+        userEvent.type(screen.getByTestId('dt_tax_residence'), 'Ghana');
+        userEvent.type(screen.getByTestId('dt_tax_identification_number'), 'GHA-00000000');
+        userEvent.type(screen.getByTestId('dt_account_opening_reason'), 'Speculative');
+
+        userEvent.click(submit_btn);
+
+        expect(mockedUseSettings).toHaveBeenCalled();
+        expect(setError).toHaveBeenCalled();
+    });
+});
diff --git a/packages/account/src/Components/additional-kyc-info-modal/__test__/additional-kyc-info-modal.spec.tsx b/packages/account/src/Components/additional-kyc-info-modal/__test__/additional-kyc-info-modal.spec.tsx
new file mode 100644
index 000000000000..13decd303a3c
--- /dev/null
+++ b/packages/account/src/Components/additional-kyc-info-modal/__test__/additional-kyc-info-modal.spec.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import { AdditionalKycInfoModal } from '../additional-kyc-info-modal';
+
+jest.mock('../additional-kyc-info-form.tsx', () => jest.fn(() => <div>AdditionalKycInfoForm</div>));
+
+describe('AdditionalKycInfoModal', () => {
+    let modal_root_el: HTMLElement;
+    const mock_store = mockStore({
+        ui: {
+            is_additional_kyc_info_modal_open: true,
+            toggleAdditionalKycInfoModal: jest.fn(),
+        },
+    });
+
+    beforeAll(() => {
+        modal_root_el = document.createElement('div');
+        modal_root_el.setAttribute('id', 'modal_root');
+        document.body.appendChild(modal_root_el);
+    });
+
+    afterAll(() => {
+        document.body.removeChild(modal_root_el);
+    });
+
+    it('should render the modal when is_additional_kyc_info_modal_open is true', () => {
+        render(
+            <StoreProvider store={mock_store}>
+                <AdditionalKycInfoModal />
+            </StoreProvider>
+        );
+        expect(screen.getByText(/additional information required/i)).toBeInTheDocument();
+        expect(screen.getByText(/AdditionalKycInfoForm/i)).toBeInTheDocument();
+    });
+});
diff --git a/packages/account/src/Components/additional-kyc-info-modal/__test__/form-config.spec.tsx b/packages/account/src/Components/additional-kyc-info-modal/__test__/form-config.spec.tsx
new file mode 100644
index 000000000000..015cb169b86d
--- /dev/null
+++ b/packages/account/src/Components/additional-kyc-info-modal/__test__/form-config.spec.tsx
@@ -0,0 +1,67 @@
+import { GetSettings, ResidenceList } from '@deriv/api-types';
+import { getFormFieldsConfig, getFormConfig, TFields } from '../form-config';
+
+const mockAccountSettings: GetSettings = {
+    immutable_fields: ['place_of_birth'],
+    place_of_birth: 'UK',
+    tax_residence: 'UK',
+    tax_identification_number: '12345',
+    account_opening_reason: 'Hedging',
+};
+
+const mockResidenceList: ResidenceList = [
+    { value: 'UK', text: 'United Kingdom' },
+    { value: 'US', text: 'United States' },
+];
+
+describe('getFormFieldsConfig', () => {
+    it('should return the correct form fields configuration', () => {
+        const requiredFields: TFields[] = ['place_of_birth', 'tax_residence'];
+        const config = getFormFieldsConfig(mockAccountSettings, mockResidenceList, requiredFields);
+
+        expect(config.place_of_birth.type).toBe('select');
+        expect(config.place_of_birth.initial_value).toBe('United Kingdom');
+        expect(config.place_of_birth.disabled).toBe(true);
+        expect(config.place_of_birth.required).toBe(true);
+
+        expect(config.tax_residence.type).toBe('select');
+        expect(config.tax_residence.initial_value).toBe('United Kingdom');
+        expect(config.tax_residence.disabled).toBe(false);
+        expect(config.tax_residence.required).toBe(true);
+    });
+});
+
+describe('getFormConfig', () => {
+    it('should return the correct form configuration', () => {
+        const requiredFields: TFields[] = ['place_of_birth', 'tax_residence'];
+        const formConfig = getFormConfig({
+            account_settings: mockAccountSettings,
+            residence_list: mockResidenceList,
+            required_fields: requiredFields,
+        });
+
+        expect(formConfig.fields.place_of_birth.disabled).toBe(true);
+        expect(formConfig.fields.place_of_birth.required).toBe(true);
+
+        expect(formConfig.fields.tax_residence.disabled).toBe(false);
+        expect(formConfig.fields.tax_residence.required).toBe(true);
+    });
+
+    it('should return the correct form configuration with input types', () => {
+        const requiredFields: TFields[] = ['place_of_birth', 'tax_residence'];
+        const formConfig = getFormConfig({
+            account_settings: { ...mockAccountSettings, immutable_fields: ['place_of_birth', 'tax_residence'] },
+            residence_list: mockResidenceList,
+            required_fields: requiredFields,
+            with_input_types: true,
+        });
+
+        expect(formConfig.fields.place_of_birth.type).toBe('select');
+        expect(formConfig.fields.place_of_birth.disabled).toBe(true);
+        expect(formConfig.fields.place_of_birth.required).toBe(true);
+
+        expect(formConfig.fields.tax_residence.type).toBe('select');
+        expect(formConfig.fields.tax_residence.disabled).toBe(true);
+        expect(formConfig.fields.tax_residence.required).toBe(true);
+    });
+});
diff --git a/packages/account/src/Components/additional-kyc-info-modal/additional-kyc-info-form.tsx b/packages/account/src/Components/additional-kyc-info-modal/additional-kyc-info-form.tsx
new file mode 100644
index 000000000000..e0f4eef52830
--- /dev/null
+++ b/packages/account/src/Components/additional-kyc-info-modal/additional-kyc-info-form.tsx
@@ -0,0 +1,161 @@
+import { Button, Loading, Modal, Text } from '@deriv/components';
+import { isMobile } from '@deriv/shared';
+import { observer, useStore } from '@deriv/stores';
+import { Localize } from '@deriv/translations';
+import classNames from 'classnames';
+import { Form, Formik } from 'formik';
+import React from 'react';
+import { useSettings } from '@deriv/api';
+import { OECD_TIN_FORMAT_URL } from '../../Constants/external-urls';
+import FormFieldInfo from '../form-field-info';
+import { FormInputField } from '../forms/form-fields';
+import FormSelectField from '../forms/form-select-field';
+import { TListItem, getFormConfig } from './form-config';
+
+const FormTitle = () => (
+    <Text
+        as='p'
+        size='s'
+        line_height='xxl'
+        align={isMobile() ? 'left' : 'center'}
+        className='additional-kyc-info-modal__form--header'
+    >
+        <Localize i18n_default_text='Please take a moment to update your information now.' />
+    </Text>
+);
+
+type TAdditionalKycInfoFormProps = {
+    setError?: React.Dispatch<React.SetStateAction<unknown>>;
+};
+
+export const AdditionalKycInfoForm = observer(({ setError }: TAdditionalKycInfoFormProps) => {
+    const { client, ui, notifications } = useStore();
+    const { residence_list, updateAccountStatus } = client;
+    const {
+        update,
+        mutation: { isLoading, error, status },
+        data: account_settings,
+        isLoading: isAccountSettingsLoading,
+    } = useSettings();
+
+    const { fields, initialValues, validate } = getFormConfig({
+        account_settings,
+        residence_list,
+        required_fields: ['place_of_birth', 'account_opening_reason'],
+    });
+
+    const onSubmit = (values: typeof initialValues) => {
+        const place_of_birth = residence_list?.find(item => item.text === values.place_of_birth)?.value;
+
+        const payload: Record<string, string | undefined> = {
+            place_of_birth,
+            account_opening_reason: values.account_opening_reason,
+        };
+
+        if (values.tax_identification_number) {
+            payload.tax_identification_number = values.tax_identification_number;
+        }
+
+        if (values.tax_residence) {
+            const tax_residence = residence_list?.find(item => item.text === values.tax_residence)?.value;
+            payload.tax_residence = tax_residence;
+        }
+
+        update(payload);
+    };
+
+    React.useEffect(() => {
+        if (status === 'success') {
+            updateAccountStatus();
+            notifications.refreshNotifications();
+            ui.toggleAdditionalKycInfoModal();
+            ui.toggleKycInformationSubmittedModal();
+        } else if (status === 'error') {
+            setError?.(error);
+        }
+    }, [error, notifications, setError, status, ui, updateAccountStatus]);
+
+    if (isAccountSettingsLoading) {
+        return <Loading is_fullscreen={false} />;
+    }
+
+    return (
+        <Formik
+            validateOnMount
+            validateOnBlur
+            validateOnChange
+            initialValues={initialValues}
+            onSubmit={onSubmit}
+            validate={validate}
+        >
+            {({ isValid, setFieldValue }) => (
+                <Form className='additional-kyc-info-modal__form-layout'>
+                    {isLoading ? (
+                        <Loading is_fullscreen={false} />
+                    ) : (
+                        <section className='additional-kyc-info-modal__form-layout--fields'>
+                            <FormTitle />
+                            <fieldset className='additional-kyc-info-modal__form-field'>
+                                <FormSelectField {...fields.place_of_birth} />
+                            </fieldset>
+                            <fieldset
+                                className={classNames(
+                                    'additional-kyc-info-modal__form-field',
+                                    'additional-kyc-info-modal__form-field--info'
+                                )}
+                            >
+                                <FormSelectField {...fields.tax_residence} />
+                                <FormFieldInfo
+                                    message={
+                                        <Localize i18n_default_text='The country in which you meet the criteria for paying taxes. Usually the country in which you physically reside.' />
+                                    }
+                                />
+                            </fieldset>
+                            <fieldset className='additional-kyc-info-modal__form-field--info'>
+                                <FormInputField
+                                    {...fields.tax_identification_number}
+                                    data_testId='dt_tax_identification_number'
+                                />
+                                <FormFieldInfo
+                                    message={
+                                        <Localize
+                                            i18n_default_text="Don't know your tax identification number? <1 />Click <0>here</0> to learn more."
+                                            components={[
+                                                <a
+                                                    key={0}
+                                                    className='link'
+                                                    target='_blank'
+                                                    rel='noopener noreferrer'
+                                                    href={OECD_TIN_FORMAT_URL}
+                                                />,
+                                                <br key={1} />,
+                                            ]}
+                                        />
+                                    }
+                                />
+                            </fieldset>
+                            <fieldset className='additional-kyc-info-modal__form-field'>
+                                <FormSelectField
+                                    onItemSelection={({ value = '' }: TListItem) => {
+                                        setFieldValue('account_opening_reason', value, true);
+                                    }}
+                                    list_height='6rem'
+                                    {...fields.account_opening_reason}
+                                />
+                            </fieldset>
+                        </section>
+                    )}
+                    <Modal.Footer has_separator className='additional-kyc-info-modal__form-action'>
+                        <Button large primary type='submit' disabled={!isValid || isLoading}>
+                            <Localize i18n_default_text='Submit' />
+                        </Button>
+                    </Modal.Footer>
+                </Form>
+            )}
+        </Formik>
+    );
+});
+
+AdditionalKycInfoForm.displayName = 'AdditionalKycInfoForm';
+
+export default AdditionalKycInfoForm;
diff --git a/packages/account/src/Components/additional-kyc-info-modal/additional-kyc-info-modal.scss b/packages/account/src/Components/additional-kyc-info-modal/additional-kyc-info-modal.scss
new file mode 100644
index 000000000000..873a8703237f
--- /dev/null
+++ b/packages/account/src/Components/additional-kyc-info-modal/additional-kyc-info-modal.scss
@@ -0,0 +1,91 @@
+.dc-modal {
+    &__container {
+        &_additional-kyc-info {
+            &-header {
+                border-bottom: 2px solid var(--general-section-1);
+            }
+
+            &-footer {
+                padding: 1.6rem 0 0;
+                margin: unset;
+            }
+
+            .inline-message {
+                margin: 0.8rem 1.6rem;
+                width: calc(100% - 3.2rem);
+                justify-content: flex-start;
+            }
+        }
+    }
+}
+
+.additional-kyc-info-modal {
+    &__portal-header {
+        padding: 2.5rem 2rem;
+    }
+
+    &__form {
+        padding: unset;
+        height: 100%;
+        position: relative;
+
+        @include mobile {
+            width: 100%;
+        }
+
+        &--header {
+            margin: 1.6rem 0 2.4rem;
+
+            @include mobile {
+                padding: 0;
+            }
+        }
+
+        .dc-dropdown-list {
+            margin: 1rem 0;
+        }
+
+        &-layout {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+
+            &--fields {
+                display: flex;
+                flex-direction: column;
+                padding: 0 24.4rem;
+
+                @include mobile {
+                    padding: 0 1.6rem;
+                }
+            }
+        }
+
+        &-field {
+            margin-bottom: 3.2rem;
+
+            &--info {
+                display: flex;
+                align-items: baseline;
+                gap: 0.8rem;
+            }
+        }
+
+        &-action {
+            padding: 1.6rem 2.4rem;
+
+            @include mobile {
+                position: absolute;
+                bottom: 0;
+                width: 100%;
+                padding: 1.6rem;
+            }
+
+            .dc-btn {
+                @include mobile {
+                    width: 100%;
+                }
+            }
+        }
+    }
+}
diff --git a/packages/account/src/Components/additional-kyc-info-modal/additional-kyc-info-modal.tsx b/packages/account/src/Components/additional-kyc-info-modal/additional-kyc-info-modal.tsx
new file mode 100644
index 000000000000..5b3f86785759
--- /dev/null
+++ b/packages/account/src/Components/additional-kyc-info-modal/additional-kyc-info-modal.tsx
@@ -0,0 +1,107 @@
+import {
+    DesktopWrapper,
+    Div100vhContainer,
+    InlineMessage,
+    MobileWrapper,
+    Modal,
+    PageOverlay,
+    Text,
+    UILoader,
+} from '@deriv/components';
+import { getPlatformSettings } from '@deriv/shared';
+import { observer, useStore } from '@deriv/stores';
+import { Localize } from '@deriv/translations';
+import React from 'react';
+import AdditionalKycInfoForm from './additional-kyc-info-form';
+
+type TAdditionalKycInfoFormWithHintBox = {
+    error?: unknown;
+    setError?: React.Dispatch<React.SetStateAction<unknown>>;
+};
+
+const AdditionalKycInfoFormWithHintBox = ({ error, setError }: TAdditionalKycInfoFormWithHintBox) => {
+    return (
+        <React.Fragment>
+            {!!error && (
+                <InlineMessage
+                    size='sm'
+                    message={
+                        error &&
+                        typeof error === 'object' &&
+                        'message' in error &&
+                        typeof error.message === 'string' &&
+                        error.message
+                    }
+                    type='error'
+                />
+            )}
+            <AdditionalKycInfoForm setError={setError} />
+        </React.Fragment>
+    );
+};
+
+export const AdditionalKycInfoModal = observer(() => {
+    const {
+        ui: { is_additional_kyc_info_modal_open: is_open, toggleAdditionalKycInfoModal },
+    } = useStore();
+    const [error, setError] = React.useState<unknown>('');
+
+    const toggleModal = (e?: React.MouseEvent<HTMLElement, MouseEvent> | undefined) => {
+        // if e.target is anchor tag, don't close modal for link click within modal
+        const target = e?.target as HTMLElement;
+        if (target.tagName === 'A') e?.stopPropagation();
+        toggleAdditionalKycInfoModal();
+    };
+
+    const mt5_platform_settings = getPlatformSettings('mt5');
+
+    const ModalTitle = () => (
+        <Localize
+            i18n_default_text='Additional information required for {{platform}} account(s)'
+            values={{
+                platform: mt5_platform_settings.name,
+            }}
+        />
+    );
+
+    return (
+        <React.Suspense fallback={<UILoader />}>
+            <div className='additional-kyc-info-modal__container'>
+                <DesktopWrapper>
+                    <Modal
+                        has_close_icon
+                        is_open={is_open}
+                        title={<ModalTitle />}
+                        toggleModal={toggleModal}
+                        className='additional-kyc-info'
+                        width='90.4rem'
+                        height={error ? '54.4rem' : '49.6rem'}
+                    >
+                        <Modal.Body className='additional-kyc-info-modal__form'>
+                            <AdditionalKycInfoFormWithHintBox setError={setError} error={error} />
+                        </Modal.Body>
+                    </Modal>
+                </DesktopWrapper>
+                <MobileWrapper>
+                    <PageOverlay
+                        is_open
+                        portal_id='deriv_app'
+                        header={
+                            <Text as='p' size='xs' weight='bold'>
+                                <ModalTitle />
+                            </Text>
+                        }
+                        onClickClose={toggleAdditionalKycInfoModal}
+                        header_classname='additional-kyc-info-modal__portal-header'
+                    >
+                        <Div100vhContainer className='additional-kyc-info-modal__form' height_offset='100px'>
+                            <AdditionalKycInfoFormWithHintBox />
+                        </Div100vhContainer>
+                    </PageOverlay>
+                </MobileWrapper>
+            </div>
+        </React.Suspense>
+    );
+});
+
+AdditionalKycInfoModal.displayName = 'AdditionalKycInfoModal';
diff --git a/packages/account/src/Components/additional-kyc-info-modal/form-config.tsx b/packages/account/src/Components/additional-kyc-info-modal/form-config.tsx
new file mode 100644
index 000000000000..9b1bcd5a3c3b
--- /dev/null
+++ b/packages/account/src/Components/additional-kyc-info-modal/form-config.tsx
@@ -0,0 +1,259 @@
+import React from 'react';
+import { GetSettings, ResidenceList } from '@deriv/api-types';
+import { Localize, localize } from '@deriv/translations';
+import { generateValidationFunction } from '@deriv/shared';
+
+// Type for the list of items in a dropdown or select
+export type TListItem = {
+    /**
+     * The text of the item (e.g. 'United Kingdom', 'Germany', etc.)
+     */
+    text: string;
+    /**
+     * The value of the item
+     */
+    value: string;
+};
+
+export type TFields = 'place_of_birth' | 'tax_residence' | 'tax_identification_number' | 'account_opening_reason';
+
+type ReqRule = ['req', React.ReactNode];
+
+type LengthRule = ['length', React.ReactNode, { min: number; max: number }];
+
+type RegularRule = ['regular', React.ReactNode, { regex: RegExp }];
+
+type CustomValidator = (
+    value: string,
+    /**
+     * The options passed to the validation function
+     */
+    options: Record<string, unknown>,
+    /**
+     * The values of all fields in the form
+     */
+    values: Record<string, unknown>
+) => React.ReactNode;
+
+type CustomRule = [CustomValidator, React.ReactNode];
+
+type Rule = ReqRule | LengthRule | RegularRule | CustomRule;
+
+type TInputConfig = {
+    label: React.ReactNode;
+    /**
+     * The type of the input field (e.g. 'text', 'password', 'select', etc.)
+     */
+    type?: string;
+    initial_value: string;
+    required?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    /**
+     * The list of items for the dropdown or select
+     */
+    list_items?: TListItem[];
+    /**
+     * The validation rules for the input field (e.g. 'req', 'length', 'regular', etc.)
+     */
+    rules?: Array<Rule>;
+};
+
+export type TGetField = Omit<TInputConfig, 'initial_value'> & { name: string };
+
+export type TFormFieldsConfig = {
+    [key in TFields]: TInputConfig;
+};
+
+/**
+ *  The base config for form fields with validation rules
+ *  every field should have label, type, initial_value, disabled, required, placeholder, list_items, rules
+ *
+ *  `list_items` is used for dropdowns and select
+ * @returns TFormFieldsConfig
+ */
+export const getFormFieldsConfig = (
+    account_settings: GetSettings,
+    residence_list: ResidenceList,
+    required_fields: TFields[]
+) => {
+    /**
+     * Check if the field is disabled based on the immutable_fields from API
+     */
+    const isFieldDisabled = (field: string) => account_settings?.immutable_fields?.includes(field);
+
+    /**
+     * Check if the field is required based on the required_fields array passed
+     */
+    const isFieldRequired = (field: TFields) => required_fields.includes(field);
+
+    const config: TFormFieldsConfig = {
+        place_of_birth: {
+            label: (
+                <Localize
+                    i18n_default_text='Place of birth{{required}}'
+                    values={{ required: isFieldRequired('place_of_birth') ? '*' : '' }}
+                />
+            ),
+            type: 'select',
+            initial_value:
+                (account_settings.place_of_birth &&
+                    residence_list.find(item => item.value === account_settings.place_of_birth)?.text) ??
+                '',
+            disabled: isFieldDisabled('place_of_birth'),
+            required: isFieldRequired('place_of_birth'),
+            list_items: residence_list as TListItem[],
+            rules: [['req', <Localize key='place_of_birth' i18n_default_text='Place of birth is required.' />]],
+        },
+        tax_residence: {
+            label: (
+                <Localize
+                    i18n_default_text='Tax residence{{required}}'
+                    values={{ required: isFieldRequired('tax_residence') ? '*' : '' }}
+                />
+            ),
+            type: 'select',
+            initial_value:
+                (account_settings.tax_residence &&
+                    residence_list.find(item => item.value === account_settings.tax_residence)?.text) ??
+                '',
+            disabled: isFieldDisabled('tax_residence'),
+            required: isFieldRequired('tax_residence'),
+            list_items: residence_list as TListItem[],
+            rules: [],
+        },
+        tax_identification_number: {
+            label: (
+                <Localize
+                    i18n_default_text='Tax Identification number{{required}}'
+                    values={{ required: isFieldRequired('tax_identification_number') ? '*' : '' }}
+                />
+            ),
+            type: 'text',
+            initial_value: account_settings.tax_identification_number ?? '',
+            disabled: isFieldDisabled('tax_identification_number'),
+            required: isFieldRequired('tax_identification_number'),
+            rules: [
+                [
+                    'length',
+                    <Localize
+                        key='TIN'
+                        i18n_default_text="Tax Identification Number can't be longer than 25 characters."
+                    />,
+                    { min: 0, max: 25 },
+                ],
+                [
+                    // check if the TIN value is available, then perform the regex test
+                    // else return true (to pass the test)
+                    // this is to allow empty string to pass the test in case of optioal TIN field
+                    (value: string) => (value ? RegExp(/^(?!^$|\s+)[A-Za-z0-9./\s-]{0,25}$/).test(value) : true),
+                    localize('Letters, numbers, spaces, periods, hyphens and forward slashes only.'),
+                ],
+                [
+                    (value, options, { tax_residence }) => {
+                        return value ? !!tax_residence : true;
+                    },
+                    <Localize key='TIN' i18n_default_text='Please fill in tax residence.' />,
+                ],
+                [
+                    (value: string, options, { tax_residence }) => {
+                        const tin_format = residence_list.find(
+                            res => res.text === tax_residence && res.tin_format
+                        )?.tin_format;
+                        return value && tin_format
+                            ? tin_format.some(tax_regex => new RegExp(tax_regex).test(value))
+                            : true;
+                    },
+                    <Localize key='TIN' i18n_default_text='Tax Identification Number is invalid.' />,
+                ],
+            ],
+        },
+        account_opening_reason: {
+            label: (
+                <Localize
+                    i18n_default_text='Intended use of account{{required}}'
+                    values={{ required: isFieldRequired('account_opening_reason') ? '*' : '' }}
+                />
+            ),
+            type: 'select',
+            initial_value: account_settings.account_opening_reason ?? '',
+            disabled: isFieldDisabled('account_opening_reason'),
+            required: isFieldRequired('account_opening_reason'),
+            list_items: [
+                {
+                    text: localize('Hedging'),
+                    value: 'Hedging',
+                },
+                {
+                    text: localize('Income Earning'),
+                    value: 'Income Earning',
+                },
+                {
+                    text: localize('Speculative'),
+                    value: 'Speculative',
+                },
+            ],
+            rules: [
+                [
+                    'req',
+                    <Localize key='account_opening_reason' i18n_default_text='Intended use of account is required.' />,
+                ],
+            ],
+        },
+    };
+    return config;
+};
+
+/**
+ * Generate initial values for form fields
+ */
+const generateInitialValues = (fields: ReturnType<typeof getFormFieldsConfig>) => {
+    const initial_values: Record<TFields, string> = {} as Record<TFields, string>;
+    (Object.keys(fields) as TFields[]).forEach(field => {
+        initial_values[field] = fields[field].initial_value;
+    });
+    return initial_values;
+};
+
+/**
+ * This function is used to transform form fields config to the format that is used in Formik or Formik Field
+ */
+const getField = (fields: TFormFieldsConfig, name: TFields, with_input_types: boolean): TGetField => {
+    const { label, placeholder, required, disabled, type, list_items } = fields[name];
+
+    return {
+        name,
+        label,
+        required,
+        disabled,
+        ...(with_input_types ? { type } : {}),
+        ...(placeholder ? { placeholder } : {}),
+        ...(list_items ? { list_items } : {}),
+    };
+};
+
+/**
+ * Function to transform and return form config that can be used within the component that renders the form
+ */
+export const getFormConfig = (options: {
+    account_settings: GetSettings;
+    residence_list: ResidenceList;
+    required_fields: TFields[];
+    with_input_types?: boolean;
+}) => {
+    const { account_settings, residence_list, required_fields, with_input_types = false } = options;
+    const fields_config = getFormFieldsConfig(account_settings, residence_list, required_fields);
+    const inputs: Record<TFields, TGetField> = {} as Record<TFields, TGetField>;
+    Object.keys(fields_config).forEach(field_key => {
+        // @ts-expect-error `field_key` is always a key of `fields_config`, Hence can ignore the TS error.
+        inputs[field_key] = getField(fields_config, field_key, with_input_types);
+    });
+    return {
+        fields: inputs,
+        /** typing fields_config as any as this current config has different structure
+         * and generateValidationFunction should have generic types
+         * */
+        validate: generateValidationFunction('', fields_config as any),
+        initialValues: generateInitialValues(fields_config),
+    };
+};
diff --git a/packages/account/src/Components/additional-kyc-info-modal/index.ts b/packages/account/src/Components/additional-kyc-info-modal/index.ts
new file mode 100644
index 000000000000..8d987c7f7f09
--- /dev/null
+++ b/packages/account/src/Components/additional-kyc-info-modal/index.ts
@@ -0,0 +1,4 @@
+import { AdditionalKycInfoModal } from './additional-kyc-info-modal';
+import './additional-kyc-info-modal.scss';
+
+export default AdditionalKycInfoModal;
diff --git a/packages/account/src/Components/form-field-info/__tests__/form-field-info.spec.tsx b/packages/account/src/Components/form-field-info/__tests__/form-field-info.spec.tsx
new file mode 100644
index 000000000000..be0e29de1147
--- /dev/null
+++ b/packages/account/src/Components/form-field-info/__tests__/form-field-info.spec.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { FormFieldInfo } from '../form-field-info';
+import userEvent from '@testing-library/user-event';
+
+describe('FormFieldInfo', () => {
+    it('should render the component', () => {
+        render(<FormFieldInfo message='Info content' />);
+        const popover = screen.getByTestId('dt_form-field-info__popover');
+        expect(popover).toBeInTheDocument();
+    });
+
+    it('should toggle popover on click', () => {
+        render(<FormFieldInfo message='Info content' />);
+        expect(screen.queryByText('Info content')).not.toBeInTheDocument();
+        userEvent.click(screen.getByTestId('dt_form-field-info__popover'));
+        expect(screen.getByText('Info content')).toBeInTheDocument();
+    });
+
+    it('should close popover when clicking outside', () => {
+        render(<FormFieldInfo message='Info content' />);
+        expect(screen.queryByText('Info content')).not.toBeInTheDocument();
+        userEvent.click(screen.getByTestId('dt_form-field-info__popover'));
+
+        const content = screen.getByText('Info content');
+        expect(content).toBeInTheDocument();
+        userEvent.click(document.body);
+        expect(content).not.toBeVisible();
+    });
+});
diff --git a/packages/account/src/Components/form-field-info/form-field-info.tsx b/packages/account/src/Components/form-field-info/form-field-info.tsx
new file mode 100644
index 000000000000..10563cefac35
--- /dev/null
+++ b/packages/account/src/Components/form-field-info/form-field-info.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Popover, useOnClickOutside } from '@deriv/components';
+import { TPopoverProps } from '@deriv/components/src/components/types';
+import { isMobile } from '@deriv/shared';
+
+/**
+ * A component that renders a popover with an info icon.
+ *
+ * @param {TPopoverProps} props - Props for the popover component.
+ * @returns React.ReactElement - A React component.
+ */
+export const FormFieldInfo = (props: Omit<TPopoverProps, 'alignment'>) => {
+    const [is_open, setIsOpen] = React.useState(false);
+    const ref = React.useRef<HTMLDivElement>(null);
+    const validateClickOutside = (event: MouseEvent) => {
+        const target = event?.target as HTMLElement;
+        if (target.tagName === 'A') {
+            event?.stopPropagation();
+            return false;
+        }
+        return !ref.current?.contains(target);
+    };
+
+    useOnClickOutside(ref, () => setIsOpen(false), validateClickOutside);
+    return (
+        <div ref={ref}>
+            <Popover
+                {...props}
+                data_testid='dt_form-field-info__popover'
+                className='form-field-info__popover'
+                icon='info'
+                disable_message_icon
+                zIndex='9999'
+                is_open={is_open}
+                onClick={() => setIsOpen(prev_is_open => !prev_is_open)}
+                alignment={isMobile() ? 'left' : 'right'}
+            />
+        </div>
+    );
+};
diff --git a/packages/account/src/Components/form-field-info/index.ts b/packages/account/src/Components/form-field-info/index.ts
new file mode 100644
index 000000000000..9f25eecaab50
--- /dev/null
+++ b/packages/account/src/Components/form-field-info/index.ts
@@ -0,0 +1,3 @@
+import { FormFieldInfo } from './form-field-info';
+
+export default FormFieldInfo;
diff --git a/packages/account/src/Components/forms/__test__/form-select-field.spec.tsx b/packages/account/src/Components/forms/__test__/form-select-field.spec.tsx
new file mode 100644
index 000000000000..9e9e732bf950
--- /dev/null
+++ b/packages/account/src/Components/forms/__test__/form-select-field.spec.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import FormSelectField from '../form-select-field';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import { Formik } from 'formik';
+import userEvent from '@testing-library/user-event';
+
+describe('FormSelectField', () => {
+    const list_items = [
+        { value: '1', text: 'Option 1' },
+        { value: '2', text: 'Option 2' },
+        { value: '3', text: 'Option 3' },
+    ];
+    const mock_store = mockStore({});
+
+    it('should render label', () => {
+        render(
+            <StoreProvider store={mock_store}>
+                <Formik
+                    initialValues={{
+                        test_name: '',
+                    }}
+                    onSubmit={jest.fn()}
+                >
+                    <FormSelectField required label='Test Label' name='test_name' list_items={list_items} />
+                </Formik>
+            </StoreProvider>
+        );
+        expect(screen.getByLabelText('Test Label')).toBeInTheDocument();
+    });
+
+    it('should render and select an option', async () => {
+        render(
+            <StoreProvider store={mock_store}>
+                <Formik
+                    initialValues={{
+                        test_name: '',
+                    }}
+                    onSubmit={jest.fn()}
+                >
+                    <FormSelectField required label='Test Label' name='test_name' list_items={list_items} />
+                </Formik>
+            </StoreProvider>
+        );
+
+        const select_element = screen.getByLabelText('Test Label');
+        userEvent.type(select_element, '{arrowdown}{arrowdown}{enter}');
+
+        // Verify that Option 2 is selected
+        expect(select_element).toHaveValue('Option 2');
+    });
+
+    it('should render error message for invalid input', async () => {
+        render(
+            <StoreProvider store={mock_store}>
+                <Formik
+                    initialValues={{
+                        test_name: '',
+                    }}
+                    initialErrors={{
+                        test_name: 'This field is required',
+                    }}
+                    initialTouched={{
+                        test_name: true,
+                    }}
+                    onSubmit={jest.fn()}
+                >
+                    <FormSelectField required label='Test Label' name='test_name' list_items={list_items} />
+                </Formik>
+            </StoreProvider>
+        );
+
+        expect(screen.getByText('This field is required')).toBeInTheDocument();
+    });
+});
diff --git a/packages/account/src/Components/forms/form-select-field.tsx b/packages/account/src/Components/forms/form-select-field.tsx
new file mode 100644
index 000000000000..ca1da54afa7f
--- /dev/null
+++ b/packages/account/src/Components/forms/form-select-field.tsx
@@ -0,0 +1,79 @@
+import { Autocomplete, SelectNative } from '@deriv/components';
+import { useStore } from '@deriv/stores';
+import { Field, FieldProps, FormikErrors } from 'formik';
+import React from 'react';
+import { TGetField, TListItem } from '../additional-kyc-info-modal/form-config';
+
+type TFormSelectField = TGetField & {
+    onItemSelection?: (item: TListItem) => void;
+    list_height?: string;
+};
+
+type TSetFieldValue = (
+    field: string,
+    value: string,
+    shouldValidate?: boolean
+) => Promise<void | FormikErrors<Record<string, string>>>;
+
+const FormSelectField: React.FC<TFormSelectField> = ({
+    label,
+    name,
+    required = false,
+    disabled = false,
+    list_items,
+    onItemSelection,
+    placeholder,
+    list_height,
+}) => {
+    const { ui } = useStore();
+    const { is_mobile } = ui;
+
+    const onSelect =
+        (field: string, setFieldValue: TSetFieldValue) =>
+        ({ value, text }: TListItem) => {
+            setFieldValue(field, value ? text : '', true);
+        };
+    // TODO: remove the following ts-expect-error comments once the issue is fixed within the components
+    return (
+        <Field name={name}>
+            {({ field, meta: { touched, error }, form: { setFieldValue } }: FieldProps<string>) => (
+                <React.Fragment>
+                    {is_mobile ? (
+                        <SelectNative
+                            {...field}
+                            // @ts-expect-error This needs to fixed in SelectNative component
+                            list_items={list_items}
+                            // @ts-expect-error This needs to fixed in SelectNative component
+                            label={label}
+                            required={required}
+                            disabled={disabled}
+                            error={touched ? error : undefined}
+                            use_text
+                            data-testid={`dt_${field.name}`}
+                        />
+                    ) : (
+                        <Autocomplete
+                            {...field}
+                            disabled={disabled}
+                            label={label}
+                            // @ts-expect-error This needs to fixed in AutoComplete component
+                            list_items={list_items}
+                            placeholder={placeholder}
+                            required={required}
+                            data-lpignore='true'
+                            autoComplete='off' // prevent chrome autocomplete
+                            error={touched ? error : undefined}
+                            // @ts-expect-error This needs to fixed in AutoComplete component
+                            onItemSelection={onItemSelection ?? onSelect(field.name, setFieldValue)}
+                            data-testid={`dt_${field.name}`}
+                            // @ts-expect-error This needs to fixed in AutoComplete component
+                            list_height={list_height}
+                        />
+                    )}
+                </React.Fragment>
+            )}
+        </Field>
+    );
+};
+
+export default FormSelectField;
diff --git a/packages/account/src/Components/forms/idv-form.tsx b/packages/account/src/Components/forms/idv-form.tsx
index f81b083fb5a0..9febec547d50 100644
--- a/packages/account/src/Components/forms/idv-form.tsx
+++ b/packages/account/src/Components/forms/idv-form.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { Field, FieldProps } from 'formik';
 import { localize } from '@deriv/translations';
 import { formatInput, getIDVNotApplicableOption } from '@deriv/shared';
-import { Autocomplete, DesktopWrapper, Input, MobileWrapper, SelectNative, Text } from '@deriv/components';
+import { Autocomplete, DesktopWrapper, Input, MobileWrapper, SelectNative } from '@deriv/components';
 import {
     getDocumentData,
     preventEmptyClipboardPaste,
@@ -25,17 +25,15 @@ const IDVForm = ({
     can_skip_document_verification = false,
 }: TIDVForm) => {
     const [document_list, setDocumentList] = React.useState<TDocument[]>([]);
-    const [document_image, setDocumentImage] = React.useState<string | null>(null);
     const [selected_doc, setSelectedDoc] = React.useState('');
 
-    const { documents_supported: document_data, has_visual_sample } = selected_country?.identity?.services?.idv ?? {};
+    const { documents_supported: document_data } = selected_country?.identity?.services?.idv ?? {};
 
     const default_document = {
         id: '',
         text: '',
         value: '',
         example_format: '',
-        sample_image: '',
     };
 
     const IDV_NOT_APPLICABLE_OPTION = React.useMemo(() => getIDVNotApplicableOption(), []);
@@ -50,8 +48,10 @@ const IDVForm = ({
 
             const new_document_list = filtered_documents.map(key => {
                 const { display_name, format } = document_data[key];
-                const { new_display_name, example_format, sample_image, additional_document_example_format } =
-                    getDocumentData(selected_country.value ?? '', key);
+                const { new_display_name, example_format, additional_document_example_format } = getDocumentData(
+                    selected_country.value ?? '',
+                    key
+                );
                 const needs_additional_document = !!document_data[key].additional;
 
                 if (needs_additional_document) {
@@ -64,7 +64,6 @@ const IDVForm = ({
                             example_format: additional_document_example_format,
                         },
                         value: format,
-                        sample_image,
                         example_format,
                     };
                 }
@@ -72,7 +71,6 @@ const IDVForm = ({
                     id: key,
                     text: display_name ?? new_display_name, // Display document name from API if available, else use the one from the helper function
                     value: format,
-                    sample_image,
                     example_format,
                 };
             });
@@ -109,9 +107,6 @@ const IDVForm = ({
             setFieldValue('document_number', '', true);
             setFieldValue('document_additional', '', true);
         }
-        if (has_visual_sample) {
-            setDocumentImage(item.sample_image ?? '');
-        }
     };
 
     return (
@@ -124,11 +119,7 @@ const IDVForm = ({
                                 'proof-of-identity__container--idv': hide_hint,
                             })}
                         >
-                            <div
-                                className={classNames('proof-of-identity__inner-container', {
-                                    'proof-of-identity__inner-container--incl-image': document_image,
-                                })}
-                            >
+                            <div className={classNames('proof-of-identity__inner-container')}>
                                 <div className='proof-of-identity__fieldset-container'>
                                     <fieldset className={classNames({ 'proof-of-identity__fieldset': !hide_hint })}>
                                         <Field name='document_type'>
@@ -263,20 +254,6 @@ const IDVForm = ({
                                         </fieldset>
                                     )}
                                 </div>
-                                {document_image && (
-                                    <div className='proof-of-identity__sample-container'>
-                                        <Text size='xxs' weight='bold'>
-                                            {localize('Sample:')}
-                                        </Text>
-                                        <div className='proof-of-identity__image-container'>
-                                            <img
-                                                className='proof-of-identity__image'
-                                                src={document_image}
-                                                alt='document sample image'
-                                            />
-                                        </div>
-                                    </div>
-                                )}
                             </div>
                         </div>
                     </div>
diff --git a/packages/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.tsx b/packages/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.tsx
index 7599e31bd4c7..a4c01889c3fa 100644
--- a/packages/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.tsx
+++ b/packages/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.tsx
@@ -20,12 +20,10 @@ jest.mock('Helpers/utils', () => ({
                 document_1: {
                     new_display_name: '',
                     example_format: '5436454364243',
-                    sample_image: '',
                 },
                 document_2: {
                     new_display_name: '',
                     example_format: 'A-52431',
-                    sample_image: '',
                 },
             },
         };
diff --git a/packages/account/src/Components/poi/idv-document-submit/idv-document-submit.tsx b/packages/account/src/Components/poi/idv-document-submit/idv-document-submit.tsx
index 461078949cd7..026308a1b066 100644
--- a/packages/account/src/Components/poi/idv-document-submit/idv-document-submit.tsx
+++ b/packages/account/src/Components/poi/idv-document-submit/idv-document-submit.tsx
@@ -56,7 +56,6 @@ const IdvDocumentSubmit = observer(({ handleBack, handleViewComplete, selected_c
             text: '',
             value: '',
             example_format: '',
-            sample_image: '',
         },
         document_number: '',
         ...form_initial_values,
diff --git a/packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.tsx b/packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.tsx
index 5aba4d1a9360..4df0df924f3e 100644
--- a/packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.tsx
+++ b/packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.tsx
@@ -77,7 +77,6 @@ export const IdvDocSubmitOnSignup = ({
             text: '',
             value: '',
             example_format: '',
-            sample_image: '',
         },
         document_number: '',
         ...form_initial_values,
diff --git a/packages/account/src/Configs/personal-details-config.ts b/packages/account/src/Configs/personal-details-config.ts
index 27f134aa9e8a..1c404fb4f36d 100644
--- a/packages/account/src/Configs/personal-details-config.ts
+++ b/packages/account/src/Configs/personal-details-config.ts
@@ -176,7 +176,6 @@ export const personal_details_config = ({
                 text: '',
                 value: '',
                 example_format: '',
-                sample_image: '',
             },
             supported_in: ['svg'],
             rules: [],
diff --git a/packages/account/src/Constants/external-urls.ts b/packages/account/src/Constants/external-urls.ts
new file mode 100644
index 000000000000..3d3789cc86be
--- /dev/null
+++ b/packages/account/src/Constants/external-urls.ts
@@ -0,0 +1,2 @@
+export const OECD_TIN_FORMAT_URL =
+    'https://www.oecd.org/tax/automatic-exchange/crs-implementation-and-assistance/tax-identification-numbers/';
diff --git a/packages/account/src/Constants/idv-document-config.ts b/packages/account/src/Constants/idv-document-config.ts
index 59fdbc749838..c63b2dcdf1d0 100644
--- a/packages/account/src/Constants/idv-document-config.ts
+++ b/packages/account/src/Constants/idv-document-config.ts
@@ -1,8 +1,5 @@
-import { getUrlBase } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 
-const getImageLocation = (image_name: string) => getUrlBase(`/public/images/common/${image_name}`);
-
 // Note: Ensure that the object keys matches BE API's keys. This is simply a mapping for FE templates
 
 const getIDVDocumentConfig = () => ({
@@ -10,119 +7,98 @@ const getIDVDocumentConfig = () => ({
         alien_card: {
             new_display_name: '',
             example_format: '123456',
-            sample_image: getImageLocation('ke_alien_card.png'),
         },
         national_id: {
             new_display_name: '',
             example_format: '12345678',
-            sample_image: getImageLocation('ke_national_identity_card.png'),
         },
         passport: {
             new_display_name: '',
             example_format: 'A12345678',
-            sample_image: getImageLocation('ke_passport.png'),
         },
     },
     za: {
         national_id: {
             new_display_name: localize('National ID'),
             example_format: '1234567890123',
-            sample_image: getImageLocation('za_national_identity_card.png'),
         },
         national_id_no_photo: {
             new_display_name: localize('National ID (No Photo)'),
             example_format: '1234567890123',
-            sample_image: '',
         },
     },
     ng: {
         bvn: {
             new_display_name: localize('Bank Verification Number'),
             example_format: '12345678901',
-            sample_image: '',
         },
         cac: {
             new_display_name: localize('Corporate Affairs Commission'),
             example_format: '12345678',
-            sample_image: '',
         },
         drivers_license: {
             new_display_name: '',
             example_format: 'ABC123456789',
-            sample_image: getImageLocation('ng_drivers_license.png'),
         },
         nin: {
             new_display_name: localize('National Identity Number'),
             example_format: '12345678901',
-            sample_image: '',
         },
         nin_slip: {
             new_display_name: localize('National Identity Number Slip'),
             example_format: '12345678901',
-            sample_image: getImageLocation('ng_nin_slip.png'),
         },
         tin: {
             new_display_name: localize('Taxpayer identification number'),
             example_format: '12345678-1234',
-            sample_image: '',
         },
         voter_id: {
             new_display_name: localize('Voter ID'),
             example_format: '1234567890123456789',
-            sample_image: getImageLocation('ng_voter_id.png'),
         },
     },
     gh: {
         drivers_license: {
             new_display_name: '',
             example_format: 'B1234567',
-            sample_image: '',
         },
         national_id: {
             new_display_name: localize('National ID'),
             example_format: 'GHA-123456789-1',
-            sample_image: '',
         },
         passport: {
             new_display_name: localize('Passport'),
             example_format: 'G1234567',
-            sample_image: '',
         },
         ssnit: {
             new_display_name: localize('Social Security and National Insurance Trust'),
             example_format: 'C123456789012',
-            sample_image: '',
         },
         voter_id: {
             new_display_name: localize('Voter ID'),
             example_format: '01234567890',
-            sample_image: '',
         },
     },
     br: {
         cpf: {
             new_display_name: localize('CPF'),
             example_format: '123.456.789-12',
-            sample_image: '',
         },
     },
     ug: {
         national_id: {
             new_display_name: localize('National ID'),
             example_format: 'CM12345678PE1D',
-            sample_image: getImageLocation('ug_national_identity_card.png'),
         },
         national_id_no_photo: {
             new_display_name: localize('National ID (No Photo)'),
             example_format: 'CM12345678PE1D',
-            sample_image: '',
         },
     },
     zw: {
         national_id: {
             new_display_name: localize('National ID'),
             example_format: '081234567F53',
-            sample_image: getImageLocation('zw_national_identity_card.png'),
         },
     },
     cl: {
diff --git a/packages/account/src/Containers/__tests__/routes.spec.tsx b/packages/account/src/Containers/__tests__/routes.spec.tsx
index 6c06ae2b351c..5d2ad2c67afe 100644
--- a/packages/account/src/Containers/__tests__/routes.spec.tsx
+++ b/packages/account/src/Containers/__tests__/routes.spec.tsx
@@ -10,10 +10,6 @@ jest.mock('Components/Routes', () => ({
     BinaryRoutes: jest.fn(() => 'MockedBinaryRoutesComponent'),
 }));
 
-jest.mock('onfido-sdk-ui', () => ({
-    init: jest.fn().mockResolvedValue({}),
-}));
-
 jest.mock('@deriv/components', () => ({
     ...jest.requireActual('@deriv/components'),
     PageError: jest.fn(() => 'MockedPageErrorComponent'),
diff --git a/packages/account/src/Helpers/__tests__/utils.spec.tsx b/packages/account/src/Helpers/__tests__/utils.spec.tsx
index e3aeeb15070b..2589a55b4026 100644
--- a/packages/account/src/Helpers/__tests__/utils.spec.tsx
+++ b/packages/account/src/Helpers/__tests__/utils.spec.tsx
@@ -119,7 +119,6 @@ describe('getDocumentData', () => {
         expect(getDocumentData('zw', 'national_id')).toEqual({
             new_display_name: 'National ID',
             example_format: '081234567F53',
-            sample_image: '/public/images/common/zw_national_identity_card.png',
         });
     });
 });
diff --git a/packages/account/src/Helpers/utils.tsx b/packages/account/src/Helpers/utils.tsx
index 637724d9ef60..b9403a5b0411 100644
--- a/packages/account/src/Helpers/utils.tsx
+++ b/packages/account/src/Helpers/utils.tsx
@@ -59,7 +59,6 @@ export const getDocumentData = (country_code: string, document_type: string) =>
     const DEFAULT_CONFIG = {
         new_display_name: '',
         example_format: '',
-        sample_image: '',
     };
     const IDV_DOCUMENT_DATA: any = getIDVDocuments(country_code);
     return IDV_DOCUMENT_DATA[document_type] ?? DEFAULT_CONFIG;
diff --git a/packages/account/src/Sections/Verification/ProofOfIdentity/__tests__/proof-of-identity-container.spec.js b/packages/account/src/Sections/Verification/ProofOfIdentity/__tests__/proof-of-identity-container.spec.js
index eb2e0087aec4..8d998bffa19c 100644
--- a/packages/account/src/Sections/Verification/ProofOfIdentity/__tests__/proof-of-identity-container.spec.js
+++ b/packages/account/src/Sections/Verification/ProofOfIdentity/__tests__/proof-of-identity-container.spec.js
@@ -19,10 +19,6 @@ jest.mock('@deriv/components', () => ({
     Loading: jest.fn(() => 'mockedLoading'),
 }));
 
-jest.mock('onfido-sdk-ui', () => ({
-    init: jest.fn().mockResolvedValue({}),
-}));
-
 jest.mock('../../Helpers/verification.js', () => ({
     populateVerificationStatus: jest.fn().mockReturnValue({
         is_age_verified: false,
diff --git a/packages/account/src/Sections/Verification/ProofOfIdentity/onfido-sdk-view-container.tsx b/packages/account/src/Sections/Verification/ProofOfIdentity/onfido-sdk-view-container.tsx
index e395acc3ffa6..81229c563e4d 100644
--- a/packages/account/src/Sections/Verification/ProofOfIdentity/onfido-sdk-view-container.tsx
+++ b/packages/account/src/Sections/Verification/ProofOfIdentity/onfido-sdk-view-container.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback } from 'react';
 import countries from 'i18n-iso-countries';
-import { init, SdkHandle, SdkResponse, SupportedLanguages } from 'onfido-sdk-ui';
 import { CSSTransition } from 'react-transition-group';
 import { GetSettings, ResidenceList } from '@deriv/api-types';
 import { Loading, ThemedScrollbars } from '@deriv/components';
@@ -35,6 +34,11 @@ type TOnfidoSdkViewContainer = {
     is_default_enabled?: boolean;
 };
 
+// TODO: Update types for this later once bundle and CDN issue with Onfido is resolved
+type SdkHandle = any;
+type SupportedLanguages = any;
+type SdkResponse = any;
+
 const OnfidoSdkViewContainer = ({
     account_settings,
     country_code,
@@ -99,7 +103,7 @@ const OnfidoSdkViewContainer = ({
         async (service_token: string) => {
             if (!service_token) return;
             try {
-                onfido_init.current = await init({
+                onfido_init.current = await window.Onfido.init({
                     containerId: 'onfido',
                     language: {
                         locale: (getLanguage().toLowerCase() as SupportedLanguages) || 'en',
diff --git a/packages/account/src/Styles/account.scss b/packages/account/src/Styles/account.scss
index f1f5a9ec3a6b..8aa2b4ca0fae 100644
--- a/packages/account/src/Styles/account.scss
+++ b/packages/account/src/Styles/account.scss
@@ -2212,27 +2212,6 @@ $MIN_HEIGHT_FLOATING: calc(
         }
     }
 
-    &__sample-container {
-        margin-left: 1.6rem;
-
-        @include mobile {
-            margin-left: unset;
-            width: 94%;
-        }
-    }
-
-    &__sample-container-external {
-        margin-top: 2.8rem;
-    }
-
-    &__image-container {
-        width: fit-content;
-        height: fit-content;
-        padding: 8px;
-        border-radius: 4px;
-        background-color: $color-grey-2;
-    }
-
     &__image {
         max-width: 24.5rem;
         border-radius: 4px;
diff --git a/packages/account/src/Types/common.type.ts b/packages/account/src/Types/common.type.ts
index 484f07083825..746d62899935 100644
--- a/packages/account/src/Types/common.type.ts
+++ b/packages/account/src/Types/common.type.ts
@@ -160,7 +160,6 @@ export type TDocument = {
     id: string;
     text: string;
     value?: string;
-    sample_image?: string;
     example_format?: string;
     additional?: {
         display_name?: string;
diff --git a/packages/cfd/src/Containers/dmt5-trade-modal.tsx b/packages/cfd/src/Containers/dmt5-trade-modal.tsx
index af33377a23e8..76b215000699 100644
--- a/packages/cfd/src/Containers/dmt5-trade-modal.tsx
+++ b/packages/cfd/src/Containers/dmt5-trade-modal.tsx
@@ -12,17 +12,18 @@ import {
     isMobile,
 } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
-
-import TradingPlatformIcon from '../Assets/svgs/trading-platform';
+import { getPlatformMt5DownloadLink } from '../Helpers/constants';
+import SpecBox from '../Components/specbox';
 import PasswordBox from '../Components/passwordbox';
+import TradingPlatformIcon from '../Assets/svgs/trading-platform';
 import { TTradingPlatformAccounts } from '../Components/props.types';
-import SpecBox from '../Components/specbox';
-import { getMT5WebTerminalLink, getPlatformMt5DownloadLink } from '../Helpers/constants';
 
 import { TCFDPasswordReset } from './props.types';
 
 type TMT5TradeModalProps = {
-    mt5_trade_account: DetailsOfEachMT5Loginid;
+    mt5_trade_account: DetailsOfEachMT5Loginid & {
+        webtrader_url?: string;
+    };
     show_eu_related_content: boolean;
     onPasswordManager: (
         arg1: string | undefined,
@@ -154,11 +155,7 @@ const DMT5TradeModal = ({
                     <a
                         className='dc-btn cfd-trade-modal__download-center-app--option-link'
                         type='button'
-                        href={getMT5WebTerminalLink({
-                            category: mt5_trade_account.account_type,
-                            loginid: (mt5_trade_account as TTradingPlatformAccounts).display_login,
-                            server_name: (mt5_trade_account as DetailsOfEachMT5Loginid)?.server_info?.environment,
-                        })}
+                        href={mt5_trade_account.webtrader_url}
                         target='_blank'
                         rel='noopener noreferrer'
                     >
diff --git a/packages/cfd/src/Helpers/constants.ts b/packages/cfd/src/Helpers/constants.ts
index 34efa01099f2..fdc37e99ef76 100644
--- a/packages/cfd/src/Helpers/constants.ts
+++ b/packages/cfd/src/Helpers/constants.ts
@@ -37,9 +37,7 @@ const REAL_DXTRADE_URL = 'https://dx.deriv.com';
 const DEMO_DXTRADE_URL = 'https://dx-demo.deriv.com';
 
 const CTRADER_DESKTOP_DOWNLOAD = 'https://getctrader.com/deriv/ctrader-deriv-setup.exe';
-
 const CTRADER_DOWNLOAD_LINK = 'https://ctrader.com/download/';
-
 const CTRADER_URL = 'https://ct.deriv.com/';
 
 const DERIVEZ_URL = 'https://dqwsqxuu0r6t9.cloudfront.net/';
@@ -117,7 +115,7 @@ const getPlatformMt5DownloadLink = (platform: string | undefined = undefined) =>
         case 'android':
             return 'https://download.mql5.com/cdn/mobile/mt5/android?server=Deriv-Demo,Deriv-Server,Deriv-Server-02';
         default:
-            return getMT5WebTerminalLink({ category: 'real' }); // Web
+            return '';
     }
 };
 
@@ -145,22 +143,6 @@ const getDerivEzWebTerminalLink = (category: string, token?: string) => {
     return url;
 };
 
-const getMT5WebTerminalLink = ({
-    category,
-    loginid,
-    server_name = 'Deriv-Server',
-}: {
-    category?: string;
-    loginid?: string;
-    server_name?: string;
-}) => {
-    const is_demo = category === 'demo';
-    const server = is_demo ? 'Deriv-Demo' : server_name;
-    const login = loginid ?? '';
-
-    return `https://metatraderweb.app/trade?servers=${server}&trade_server=${server}${login && `&login=${login}`}`;
-};
-
 export {
     REAL_DXTRADE_URL,
     DEMO_DXTRADE_URL,
@@ -179,6 +161,5 @@ export {
     platformsIcons,
     getTitle,
     getDerivEzWebTerminalLink,
-    getMT5WebTerminalLink,
     getTopUpConfig,
 };
diff --git a/packages/components/src/components/calendar/calendar-body.tsx b/packages/components/src/components/calendar/calendar-body.tsx
index eb16d0a4ef1e..4b097cbdcbd9 100644
--- a/packages/components/src/components/calendar/calendar-body.tsx
+++ b/packages/components/src/components/calendar/calendar-body.tsx
@@ -5,13 +5,13 @@ import { CommonPropTypes } from './views/types';
 type TBodyProps = CommonPropTypes & {
     calendar_view: string;
     date_format: string;
-    disabled_days: number[];
+    disabled_days?: number[];
     start_date: string;
-    events: Array<{
+    events?: Array<{
         dates: string[];
         descrip: string;
     }>;
-    has_range_selection: boolean;
+    has_range_selection?: boolean;
     hovered_date: string | null;
     onMouseLeave?: React.MouseEventHandler<HTMLSpanElement>;
     onMouseOver?: React.MouseEventHandler<HTMLSpanElement>;
diff --git a/packages/components/src/components/calendar/calendar-footer.tsx b/packages/components/src/components/calendar/calendar-footer.tsx
index 9f1853dafa5b..e00a785bbbc9 100644
--- a/packages/components/src/components/calendar/calendar-footer.tsx
+++ b/packages/components/src/components/calendar/calendar-footer.tsx
@@ -6,7 +6,7 @@ type TFooterProps = {
     clear_text?: string;
     footer: string;
     has_clear_btn?: boolean;
-    has_today_btn: boolean;
+    has_today_btn?: boolean;
     onClick?: React.MouseEventHandler<HTMLSpanElement>;
     onClear?: React.MouseEventHandler<HTMLSpanElement>;
     use_icon?: string;
diff --git a/packages/components/src/components/calendar/calendar.tsx b/packages/components/src/components/calendar/calendar.tsx
index 288f9a16f031..bd898d3e5d59 100644
--- a/packages/components/src/components/calendar/calendar.tsx
+++ b/packages/components/src/components/calendar/calendar.tsx
@@ -7,30 +7,30 @@ import { getDate } from './helpers/constants';
 
 type TCalendarProps = {
     date_format?: string;
-    footer: string;
-    has_today_btn: boolean;
-    holidays: Array<{
+    footer?: string;
+    has_today_btn?: boolean;
+    holidays?: Array<{
         dates: string[];
         descrip: string;
     }>;
     max_date?: string;
     min_date?: string;
-    onChangeCalendarMonth: (start_of_month: string) => void;
+    onChangeCalendarMonth?: (start_of_month: string) => void;
     onSelect: (formatted_date: string, keep_open: boolean) => void;
-    start_date: string;
+    start_date?: string;
     value: string;
-    disable_days: number[];
+    disable_days?: number[];
     calendar_view?: string;
     calendar_el_ref: React.RefObject<HTMLDivElement>;
-    disabled_days: number[];
-    events: Array<{
+    disabled_days?: number[];
+    events?: Array<{
         dates: string[];
         descrip: string;
     }>;
-    has_range_selection: boolean;
-    keep_open: boolean;
+    has_range_selection?: boolean;
+    keep_open?: boolean;
     onHover?: (selected_date: moment.MomentInput | null) => void;
-    should_show_today: boolean;
+    should_show_today?: boolean;
 };
 
 type TCalendarRef = {
@@ -52,7 +52,7 @@ const Calendar: React.MemoExoticComponent<
                 date_format = 'YYYY-MM-DD',
                 disabled_days,
                 events,
-                footer,
+                footer = '',
                 has_today_btn,
                 has_range_selection,
                 keep_open,
@@ -61,7 +61,7 @@ const Calendar: React.MemoExoticComponent<
                 onChangeCalendarMonth,
                 onHover,
                 onSelect,
-                start_date,
+                start_date = '',
                 value,
                 should_show_today,
             },
@@ -137,7 +137,7 @@ const Calendar: React.MemoExoticComponent<
                 setSelectedDate(formatted_date);
 
                 if (onSelect) {
-                    onSelect(formatted_date, keep_open);
+                    onSelect(formatted_date, !!keep_open);
                 }
             };
 
@@ -211,7 +211,7 @@ const Calendar: React.MemoExoticComponent<
                         hovered_date={hovered_date}
                         onMouseOver={onMouseOver}
                         onMouseLeave={onMouseLeave}
-                        should_show_today={should_show_today}
+                        should_show_today={!!should_show_today}
                     />
                     <Footer footer={footer} has_today_btn={has_today_btn} onClick={setToday} />
                 </div>
diff --git a/packages/components/src/components/calendar/views/calendar-days.tsx b/packages/components/src/components/calendar/views/calendar-days.tsx
index 257f5c764f35..19c3d7727595 100644
--- a/packages/components/src/components/calendar/views/calendar-days.tsx
+++ b/packages/components/src/components/calendar/views/calendar-days.tsx
@@ -17,7 +17,7 @@ import Text from '../../text';
 
 type TDaysProps = CommonPropTypes & {
     date_format: string;
-    has_range_selection: boolean;
+    has_range_selection?: boolean;
     events?: Array<{
         dates: string[];
         descrip: string;
diff --git a/packages/components/src/components/contract-card/result-overlay/result-overlay.tsx b/packages/components/src/components/contract-card/result-overlay/result-overlay.tsx
index 5186ce2b47e9..6a3b63c094f6 100644
--- a/packages/components/src/components/contract-card/result-overlay/result-overlay.tsx
+++ b/packages/components/src/components/contract-card/result-overlay/result-overlay.tsx
@@ -88,7 +88,9 @@ const ResultOverlay = ({
                         <span
                             id={`dc_contract_card_${contract_id}_result_close_icon`}
                             className='dc-result__close-btn'
-                            onClick={() => onClickRemove?.(contract_id)}
+                            onClick={() => {
+                                if (contract_id) onClickRemove?.(contract_id);
+                            }}
                         />
                     )}
                     {getContractPath && (
diff --git a/packages/components/src/components/date-picker/date-picker-calendar.tsx b/packages/components/src/components/date-picker/date-picker-calendar.tsx
index 0b1c63c1cb72..fa72b7fcb1d6 100644
--- a/packages/components/src/components/date-picker/date-picker-calendar.tsx
+++ b/packages/components/src/components/date-picker/date-picker-calendar.tsx
@@ -11,29 +11,29 @@ type TDatePickerCalendarProps = {
     is_datepicker_visible: boolean;
     calendar_el_ref: React.RefObject<HTMLDivElement>;
     parent_ref: React.RefObject<HTMLElement>;
-    portal_id: string;
+    portal_id?: string;
     style: React.CSSProperties;
     placement: string;
     onSelect: (formatted_date: string, keep_open: boolean) => void;
     calendar_view?: 'date' | 'month' | 'year' | 'decade';
-    keep_open: boolean;
-    footer: string;
-    has_today_btn: boolean;
-    holidays: Array<{
+    keep_open?: boolean;
+    footer?: string;
+    has_today_btn?: boolean;
+    holidays?: Array<{
         dates: string[];
         descrip: string;
     }>;
-    onChangeCalendarMonth: (start_of_month: string) => void;
-    start_date: string;
-    disable_days: number[];
-    disabled_days: number[];
-    events: Array<{
+    onChangeCalendarMonth?: (start_of_month: string) => void;
+    start_date?: string;
+    disable_days?: number[];
+    disabled_days?: number[];
+    events?: Array<{
         dates: string[];
         descrip: string;
     }>;
-    has_range_selection: boolean;
+    has_range_selection?: boolean;
     onHover?: (selected_date: moment.MomentInput | null) => void;
-    should_show_today: boolean;
+    should_show_today?: boolean;
 };
 
 type TCalendarRef = {
diff --git a/packages/components/src/components/date-picker/date-picker-native.tsx b/packages/components/src/components/date-picker/date-picker-native.tsx
index 089c17a15ba0..3025a9fd4483 100644
--- a/packages/components/src/components/date-picker/date-picker-native.tsx
+++ b/packages/components/src/components/date-picker/date-picker-native.tsx
@@ -4,21 +4,21 @@ import { toMoment } from '@deriv/shared';
 import Icon from '../icon';
 import Text from '../text';
 
-type TDatePickerNativeProps = Omit<React.HTMLAttributes<HTMLInputElement>, 'onSelect'> & {
+type TDatePickerNativeProps = Omit<React.HTMLAttributes<HTMLInputElement>, 'onSelect' | 'onChange'> & {
     value: string | null;
-    label: string;
-    placeholder: string;
-    max_date: moment.Moment;
-    min_date: moment.Moment;
-    display_format: string;
-    data_testid: string;
-    name: string;
+    label?: string;
+    placeholder?: string;
+    max_date?: moment.Moment | string;
+    min_date?: moment.Moment | string;
+    display_format?: string;
+    data_testid?: string;
+    name?: string;
     error?: string;
-    disabled: boolean;
+    disabled?: boolean;
     hint?: string;
     onSelect: (selected_date: string) => void;
-    onBlur: React.FocusEventHandler<HTMLInputElement>;
-    onFocus: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
 };
 
 const Native = ({
diff --git a/packages/components/src/components/date-picker/date-picker.tsx b/packages/components/src/components/date-picker/date-picker.tsx
index 48f18e94678e..4b11b61e7961 100644
--- a/packages/components/src/components/date-picker/date-picker.tsx
+++ b/packages/components/src/components/date-picker/date-picker.tsx
@@ -6,20 +6,26 @@ import Native from './date-picker-native';
 import MobileWrapper from '../mobile-wrapper';
 import DesktopWrapper from '../desktop-wrapper';
 import { useOnClickOutside } from '../../hooks/use-onclickoutside';
-import { MomentInput } from 'moment';
+import moment, { MomentInput } from 'moment';
 import { TDatePickerOnChangeEvent } from '../types';
 
 type TDatePicker = Omit<
     React.ComponentProps<typeof Native> & React.ComponentProps<typeof Input> & React.ComponentProps<typeof Calendar>,
-    'value' | 'onSelect' | 'is_datepicker_visible' | 'placement' | 'style' | 'calendar_el_ref' | 'parent_ref'
+    | 'date_format'
+    | 'onSelect'
+    | 'is_datepicker_visible'
+    | 'is_placeholder_visible'
+    | 'placement'
+    | 'style'
+    | 'calendar_el_ref'
+    | 'parent_ref'
+    | 'onChange'
+    | 'onChangeInput'
 > & {
-    mode: string;
-    start_date: moment.Moment;
+    mode?: string;
     value: moment.Moment | string;
     onChange: (e: TDatePickerOnChangeEvent) => void;
-    footer: React.ReactElement;
-    date_format: string;
-    has_range_selection: boolean;
+    date_format?: string;
 };
 
 type TCalendarRef = {
@@ -42,7 +48,7 @@ const DatePicker = React.memo((props: TDatePicker) => {
         max_date,
         min_date,
         start_date,
-        name,
+        name = '',
         onBlur,
         onChange,
         onFocus,
diff --git a/packages/components/src/components/dialog/dialog.tsx b/packages/components/src/components/dialog/dialog.tsx
index e45ceba656d4..7bd402d56707 100644
--- a/packages/components/src/components/dialog/dialog.tsx
+++ b/packages/components/src/components/dialog/dialog.tsx
@@ -98,7 +98,7 @@ const Dialog = ({
         }
     };
 
-    const validateClickOutside = () => !!(dismissable || (has_close_icon && is_visible && is_closed_on_cancel));
+    const validateClickOutside = () => !!dismissable || !!(has_close_icon && is_visible && is_closed_on_cancel);
 
     useOnClickOutside(wrapper_ref, handleClose, validateClickOutside);
 
diff --git a/packages/components/src/components/input-field/input-field.tsx b/packages/components/src/components/input-field/input-field.tsx
index 4a9e5f2f91ea..0f70c30ca4bc 100644
--- a/packages/components/src/components/input-field/input-field.tsx
+++ b/packages/components/src/components/input-field/input-field.tsx
@@ -41,7 +41,7 @@ type TInputField = {
     is_autocomplete_disabled?: boolean;
     is_disabled?: boolean;
     is_error_tooltip_hidden?: boolean;
-    is_float: boolean;
+    is_float?: boolean;
     is_hj_whitelisted?: boolean;
     is_incrementable_on_long_press?: boolean;
     is_incrementable?: boolean;
@@ -53,16 +53,16 @@ type TInputField = {
     max_length?: number;
     max_value?: number;
     min_value?: number;
-    name: string;
+    name?: string;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
-    onChange: (e: TChangeEvent) => void;
+    onChange?: (e: TChangeEvent) => void;
     onClick?: React.MouseEventHandler<HTMLInputElement>;
     onClickInputWrapper?: React.MouseEventHandler<HTMLDivElement>;
     placeholder?: string;
     prefix?: string;
     required?: boolean;
     setCurrentFocus: (name: string | null) => void;
-    type: string;
+    type?: string;
     unit?: string;
     value: number | string;
 };
@@ -105,7 +105,7 @@ const InputField = ({
     max_length,
     max_value,
     min_value,
-    name,
+    name = '',
     format,
     onBlur,
     onChange,
@@ -115,7 +115,7 @@ const InputField = ({
     prefix,
     required,
     setCurrentFocus,
-    type,
+    type = '',
     unit,
     value,
     data_testid,
@@ -170,7 +170,7 @@ const InputField = ({
             }
         }
 
-        onChange(e);
+        onChange?.(e);
         if (callback) {
             callback(e);
         }
@@ -269,7 +269,7 @@ const InputField = ({
             if (is_signed && /^\d+/.test(formatted_value) && +formatted_value > 0) {
                 formatted_value = `+${formatted_value}`;
             }
-            onChange({ target: { value: formatted_value, name } });
+            onChange?.({ target: { value: formatted_value, name } });
         }
     };
 
diff --git a/packages/components/src/components/positions-drawer-card/positions-drawer-card.tsx b/packages/components/src/components/positions-drawer-card/positions-drawer-card.tsx
index 089a3e6123cc..7a1396fb1107 100644
--- a/packages/components/src/components/positions-drawer-card/positions-drawer-card.tsx
+++ b/packages/components/src/components/positions-drawer-card/positions-drawer-card.tsx
@@ -20,7 +20,7 @@ import { TToastConfig } from '../types/contract.types';
 type TPositionsDrawerCardProps = {
     addToast: (toast_config: TToastConfig) => void;
     className?: string;
-    contract_info: TContractInfo;
+    contract_info?: TContractInfo;
     contract_update?: TContractInfo['contract_update'];
     currency: string;
     current_focus: string | null;
@@ -29,7 +29,7 @@ type TPositionsDrawerCardProps = {
     is_mobile?: boolean;
     is_sell_requested?: boolean;
     is_unsupported?: boolean;
-    is_link_disabled: boolean;
+    is_link_disabled?: boolean;
     profit_loss?: number;
     onClickCancel: (contract_id?: number) => void;
     onClickSell: (contract_id?: number) => void;
@@ -40,10 +40,10 @@ type TPositionsDrawerCardProps = {
     removeToast: (key: string) => void;
     result?: string;
     setCurrentFocus: (value: string) => void;
-    server_time: moment.Moment;
+    server_time?: moment.Moment;
     should_show_transition?: boolean;
     should_show_cancellation_warning: boolean;
-    status: string;
+    status?: string;
     toggleCancellationWarning: () => void;
     toggleUnsupportedContractModal: (value: boolean) => void;
 };
@@ -77,13 +77,13 @@ const PositionsDrawerCard = ({
     toggleCancellationWarning,
     toggleUnsupportedContractModal,
 }: TPositionsDrawerCardProps) => {
-    const is_accumulator = isAccumulatorContract(contract_info.contract_type);
-    const is_multiplier = isMultiplierContract(contract_info.contract_type || '');
-    const is_turbos = isTurbosContract(contract_info.contract_type);
-    const is_vanilla = isVanillaContract(contract_info.contract_type);
-    const is_crypto = isCryptoContract(contract_info.underlying || '');
+    const is_accumulator = isAccumulatorContract(contract_info?.contract_type);
+    const is_multiplier = isMultiplierContract(contract_info?.contract_type || '');
+    const is_turbos = isTurbosContract(contract_info?.contract_type);
+    const is_vanilla = isVanillaContract(contract_info?.contract_type);
+    const is_crypto = isCryptoContract(contract_info?.underlying || '');
     const has_progress_slider = !is_multiplier || (is_crypto && is_multiplier);
-    const has_ended = !!getEndTime(contract_info);
+    const has_ended = !!getEndTime(contract_info as TContractInfo);
     const is_mobile = isMobile();
     const contract_card_classname = classNames('dc-contract-card', {
         'dc-contract-card--green': Number(profit_loss) > 0 && !result,
@@ -97,7 +97,7 @@ const PositionsDrawerCard = ({
     );
     const card_header = (
         <ContractCard.Header
-            contract_info={contract_info}
+            contract_info={contract_info as TContractInfo}
             display_name={display_name ?? ''}
             getCardLabels={getCardLabels}
             getContractTypeDisplay={getContractTypeDisplay}
@@ -105,14 +105,14 @@ const PositionsDrawerCard = ({
             is_mobile={is_mobile}
             is_sell_requested={!!is_sell_requested}
             onClickSell={onClickSell}
-            server_time={server_time}
+            server_time={server_time as moment.Moment}
         />
     );
 
     const card_body = (
         <ContractCard.Body
             addToast={addToast}
-            contract_info={contract_info}
+            contract_info={contract_info as TContractInfo}
             contract_update={contract_update ?? {}}
             currency={currency}
             current_focus={current_focus}
@@ -130,7 +130,7 @@ const PositionsDrawerCard = ({
             is_vanilla={is_vanilla}
             has_progress_slider={is_mobile && has_progress_slider}
             removeToast={removeToast}
-            server_time={server_time}
+            server_time={server_time as moment.Moment}
             setCurrentFocus={setCurrentFocus}
             should_show_cancellation_warning={should_show_cancellation_warning}
             status={status}
@@ -140,7 +140,7 @@ const PositionsDrawerCard = ({
 
     const card_footer = (
         <ContractCard.Footer
-            contract_info={contract_info}
+            contract_info={contract_info as TContractInfo}
             getCardLabels={getCardLabels}
             is_multiplier={is_multiplier}
             is_positions
@@ -148,7 +148,7 @@ const PositionsDrawerCard = ({
             onClickCancel={onClickCancel}
             onClickSell={onClickSell}
             onFooterEntered={onFooterEntered}
-            server_time={server_time}
+            server_time={server_time as moment.Moment}
             should_show_transition={!!should_show_transition}
         />
     );
@@ -162,26 +162,26 @@ const PositionsDrawerCard = ({
 
     const supported_contract_card = (
         <div className={contract_card_classname} onClick={() => toggleUnsupportedContractModal(true)}>
-            {contract_info.underlying ? contract_el : loader_el}
+            {contract_info?.underlying ? contract_el : loader_el}
         </div>
     );
 
     const unsupported_contract_card = is_link_disabled ? (
-        <div className={contract_card_classname}>{contract_info.underlying ? contract_el : loader_el}</div>
+        <div className={contract_card_classname}>{contract_info?.underlying ? contract_el : loader_el}</div>
     ) : (
         <NavLink
             className={contract_card_classname}
             to={{
-                pathname: `/contract/${contract_info.contract_id}`,
+                pathname: `/contract/${contract_info?.contract_id}`,
             }}
         >
-            {contract_info.underlying ? contract_el : loader_el}
+            {contract_info?.underlying ? contract_el : loader_el}
         </NavLink>
     );
 
     return (
         <ContractCard
-            contract_info={contract_info}
+            contract_info={contract_info as TContractInfo}
             getCardLabels={getCardLabels}
             getContractPath={getContractPath}
             is_multiplier={is_multiplier}
@@ -194,7 +194,7 @@ const PositionsDrawerCard = ({
             toggleUnsupportedContractModal={toggleUnsupportedContractModal}
         >
             <div
-                id={`dc_contract_card_${contract_info.contract_id}`}
+                id={`dc_contract_card_${contract_info?.contract_id}`}
                 className={className}
                 onMouseEnter={() => {
                     if (typeof onMouseEnter === 'function') onMouseEnter();
diff --git a/packages/components/src/components/progress-slider-mobile/progress-slider-mobile.tsx b/packages/components/src/components/progress-slider-mobile/progress-slider-mobile.tsx
index 02fce1d5f43a..44b74c15cd8b 100644
--- a/packages/components/src/components/progress-slider-mobile/progress-slider-mobile.tsx
+++ b/packages/components/src/components/progress-slider-mobile/progress-slider-mobile.tsx
@@ -9,9 +9,9 @@ import { TGetCardLables } from '../types';
 
 type TProgressSliderMobileProps = {
     className?: string;
-    current_tick: number | null;
+    current_tick?: number | null;
     expiry_time?: number;
-    is_loading: boolean;
+    is_loading?: boolean;
     server_time: moment.Moment;
     start_time?: number;
     ticks_count?: number;
diff --git a/packages/components/src/components/progress-slider-mobile/progress-ticks-mobile.tsx b/packages/components/src/components/progress-slider-mobile/progress-ticks-mobile.tsx
index 901810fc0316..6e09f313fb61 100644
--- a/packages/components/src/components/progress-slider-mobile/progress-ticks-mobile.tsx
+++ b/packages/components/src/components/progress-slider-mobile/progress-ticks-mobile.tsx
@@ -4,7 +4,7 @@ import Text from '../text';
 import { TGetCardLables } from '../types';
 
 type TProgressTicksMobileProps = {
-    current_tick: number | null;
+    current_tick?: number | null;
     ticks_count: number;
     getCardLabels: TGetCardLables;
 };
diff --git a/packages/core/src/App/Containers/Modals/app-modals.jsx b/packages/core/src/App/Containers/Modals/app-modals.jsx
index 4745f776648b..cf06ccb3cfca 100644
--- a/packages/core/src/App/Containers/Modals/app-modals.jsx
+++ b/packages/core/src/App/Containers/Modals/app-modals.jsx
@@ -51,6 +51,15 @@ const WarningCloseCreateRealAccountModal = React.lazy(() =>
     import(/* webpackChunkName: "warning-close-create-real-account" */ '../WarningCloseCreateRealAccountModal')
 );
 
+const AdditionalKycInfoModal = React.lazy(() =>
+    import(
+        /* webpackChunkName: "additional-kyc-info-modal" */ '@deriv/account/src/Components/additional-kyc-info-modal'
+    )
+);
+const InformationSubmittedModal = React.lazy(() =>
+    import(/* webpackChunkName: "information-submitted-modal" */ './information-submitted-modal')
+);
+
 const AppModals = ({
     is_account_needed_modal_on,
     is_closing_create_real_account_modal,
@@ -73,6 +82,8 @@ const AppModals = ({
     is_trading_experience_incomplete,
     should_show_risk_accept_modal,
     is_need_real_account_for_cashier_modal_visible,
+    is_additional_kyc_info_modal_open,
+    is_kyc_information_submitted_modal_open,
 }) => {
     const temp_session_signup_params = SessionStore.get('signup_query_param');
     const url_params = new URLSearchParams(useLocation().search || temp_session_signup_params);
@@ -159,6 +170,14 @@ const AppModals = ({
         ComponentToLoad = <NeedRealAccountForCashierModal />;
     }
 
+    if (is_additional_kyc_info_modal_open) {
+        ComponentToLoad = <AdditionalKycInfoModal />;
+    }
+
+    if (is_kyc_information_submitted_modal_open) {
+        ComponentToLoad = <InformationSubmittedModal />;
+    }
+
     return (
         <>
             <RedirectNoticeModal is_logged_in={is_logged_in} is_eu={is_eu_user} portal_id='popup_root' />
@@ -192,4 +211,6 @@ export default connect(({ client, ui, traders_hub }) => ({
     content_flag: traders_hub.content_flag,
     is_trading_experience_incomplete: client.is_trading_experience_incomplete,
     should_show_risk_accept_modal: ui.should_show_risk_accept_modal,
+    is_additional_kyc_info_modal_open: ui.is_additional_kyc_info_modal_open,
+    is_kyc_information_submitted_modal_open: ui.is_kyc_information_submitted_modal_open,
 }))(AppModals);
diff --git a/packages/core/src/App/Containers/Modals/information-submitted-modal/__test__/information-submitted-modal.spec.tsx b/packages/core/src/App/Containers/Modals/information-submitted-modal/__test__/information-submitted-modal.spec.tsx
new file mode 100644
index 000000000000..e7ba71eed40e
--- /dev/null
+++ b/packages/core/src/App/Containers/Modals/information-submitted-modal/__test__/information-submitted-modal.spec.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import InformationSubmittedModal from '../information-submitted-modal';
+
+describe('<InformationSubmittedModal/>', () => {
+    const mock_store = mockStore({
+        ui: {
+            is_kyc_information_submitted_modal_open: true,
+        },
+    });
+
+    it('should render InformationSubmittedModal component', () => {
+        render(
+            <StoreProvider store={mock_store}>
+                <InformationSubmittedModal />
+            </StoreProvider>
+        );
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+    });
+
+    it('should render InformationSubmittedModal component with title and content', () => {
+        render(
+            <StoreProvider store={mock_store}>
+                <InformationSubmittedModal />
+            </StoreProvider>
+        );
+        expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent(/information updated/i);
+        expect(screen.getByText(/thank you for submitting your information/i)).toBeInTheDocument();
+    });
+});
diff --git a/packages/core/src/App/Containers/Modals/information-submitted-modal/index.ts b/packages/core/src/App/Containers/Modals/information-submitted-modal/index.ts
new file mode 100644
index 000000000000..d217954c5266
--- /dev/null
+++ b/packages/core/src/App/Containers/Modals/information-submitted-modal/index.ts
@@ -0,0 +1,3 @@
+import InformationSubmittedModal from './information-submitted-modal';
+
+export default InformationSubmittedModal;
diff --git a/packages/core/src/App/Containers/Modals/information-submitted-modal/information-submitted-modal.tsx b/packages/core/src/App/Containers/Modals/information-submitted-modal/information-submitted-modal.tsx
new file mode 100644
index 000000000000..8ef61e79ccdc
--- /dev/null
+++ b/packages/core/src/App/Containers/Modals/information-submitted-modal/information-submitted-modal.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Dialog } from '@deriv/components';
+import { Localize, localize } from '@deriv/translations';
+import { useStore, observer } from '@deriv/stores';
+
+const InformationSubmittedModal = observer(() => {
+    const { ui } = useStore();
+    const { is_kyc_information_submitted_modal_open: is_open, toggleKycInformationSubmittedModal } = ui;
+
+    return (
+        <Dialog
+            className='information-submitted-modal'
+            title={localize('Information updated')}
+            confirm_button_text={localize('Close')}
+            onConfirm={toggleKycInformationSubmittedModal}
+            is_visible={is_open}
+            dismissable
+            has_close_icon
+            onEscapeButtonCancel={toggleKycInformationSubmittedModal}
+        >
+            <Localize i18n_default_text='Thank you for submitting your information.' />
+        </Dialog>
+    );
+});
+
+export default InformationSubmittedModal;
diff --git a/packages/core/src/App/Containers/app-notification-messages.jsx b/packages/core/src/App/Containers/app-notification-messages.jsx
index 15a39296e8ca..98dcceb5a2e7 100644
--- a/packages/core/src/App/Containers/app-notification-messages.jsx
+++ b/packages/core/src/App/Containers/app-notification-messages.jsx
@@ -117,6 +117,7 @@ const AppNotificationMessages = ({
                   'tnc',
                   'trustpilot',
                   'unwelcome',
+                  'additional_kyc_info',
               ].includes(message.key) || message.type === 'p2p_completed_order'
             : true;
 
diff --git a/packages/core/src/Stores/Helpers/client-notifications.js b/packages/core/src/Stores/Helpers/client-notifications.js
index 21af86dbb7b9..3cfbaba2763b 100644
--- a/packages/core/src/Stores/Helpers/client-notifications.js
+++ b/packages/core/src/Stores/Helpers/client-notifications.js
@@ -74,6 +74,7 @@ export const priority_toast_messages = [
     'wallets_migrated',
     'wallets_failed',
     'notify_financial_assessment',
+    'additional_kyc_info',
     'svg_needs_poi_poa',
     'svg_needs_poa',
     'svg_needs_poi',
diff --git a/packages/core/src/Stores/client-store.js b/packages/core/src/Stores/client-store.js
index 01343ee83792..3656e7599411 100644
--- a/packages/core/src/Stores/client-store.js
+++ b/packages/core/src/Stores/client-store.js
@@ -53,7 +53,6 @@ export default class ClientStore extends BaseStore {
     email;
     accounts = {};
     trading_platform_available_accounts = [];
-    ctrader_available_accounts = [];
     derivez_available_accounts = [];
     pre_switch_broadcast = false;
     switched = '';
@@ -167,7 +166,6 @@ export default class ClientStore extends BaseStore {
             email: observable,
             accounts: observable,
             trading_platform_available_accounts: observable,
-            ctrader_available_accounts: observable,
             derivez_available_accounts: observable,
             pre_switch_broadcast: observable,
             switched: observable,
@@ -384,7 +382,6 @@ export default class ClientStore extends BaseStore {
             responseTradingPlatformAvailableAccounts: action.bound,
             responseDerivezAvailableAccounts: action.bound,
             responseTradingPlatformAccountsList: action.bound,
-            responseCTraderAvailableAccounts: action.bound,
             responseStatement: action.bound,
             getChangeableFields: action.bound,
             syncWithLegacyPlatforms: action.bound,
@@ -1709,7 +1706,6 @@ export default class ClientStore extends BaseStore {
             WS.tradingPlatformAvailableAccounts(CFD_PLATFORMS.MT5).then(this.responseTradingPlatformAvailableAccounts);
             WS.tradingPlatformAccountsList(CFD_PLATFORMS.DXTRADE).then(this.responseTradingPlatformAccountsList);
             WS.tradingPlatformAccountsList(CFD_PLATFORMS.CTRADER).then(this.responseTradingPlatformAccountsList);
-            WS.tradingPlatformAvailableAccounts(CFD_PLATFORMS.CTRADER).then(this.responseCTraderAvailableAccounts);
             WS.tradingServers(CFD_PLATFORMS.DXTRADE).then(this.responseDxtradeTradingServers);
             WS.tradingPlatformAccountsList(CFD_PLATFORMS.DERIVEZ).then(this.responseTradingPlatformAccountsList);
             WS.tradingPlatformAccountsList(CFD_PLATFORMS.DERIVEZ).then(this.responseDerivezAvailableAccounts);
@@ -2539,12 +2535,6 @@ export default class ClientStore extends BaseStore {
         }
     }
 
-    responseCTraderAvailableAccounts(response) {
-        if (!response.error) {
-            this.ctrader_available_accounts = response.trading_platform_available_accounts;
-        }
-    }
-
     responseDerivezAvailableAccounts(response) {
         if (!response.error) {
             this.derivez_available_accounts = response.trading_platform_accounts;
diff --git a/packages/core/src/Stores/contract-trade-store.js b/packages/core/src/Stores/contract-trade-store.js
index b8259f94b554..e536c957879f 100644
--- a/packages/core/src/Stores/contract-trade-store.js
+++ b/packages/core/src/Stores/contract-trade-store.js
@@ -95,7 +95,7 @@ export default class ContractTradeStore extends BaseStore {
                         should_update_contract_barriers: true,
                         underlying,
                     });
-                } else if (is_sold) {
+                } else if (!isAccumulatorContractOpen(this.last_contract.contract_info)) {
                     this.clearAccumulatorBarriersData(true, false);
                 }
             }
@@ -134,15 +134,18 @@ export default class ContractTradeStore extends BaseStore {
         barrier_spot_distance,
         current_spot,
         current_spot_time,
+        prev_spot_time,
         should_update_contract_barriers,
         underlying,
     }) {
         if (current_spot) {
+            const ticks_history_prev_spot_time = prev_spot_time ?? this.accumulator_barriers_data.current_spot_time;
             // update current tick coming from ticks_history while skipping an update for duplicate data
-            if (current_spot_time === this.accumulator_barriers_data.current_spot_time) return;
+            if (current_spot_time === ticks_history_prev_spot_time) return;
             const current_spot_data = {
                 current_spot,
                 current_spot_time,
+                ticks_history_prev_spot_time,
                 tick_update_timestamp: Date.now(),
             };
             this.setNewAccumulatorBarriersData(current_spot_data, true);
@@ -154,7 +157,7 @@ export default class ContractTradeStore extends BaseStore {
             accumulators_low_barrier,
             barrier_spot_distance,
             should_update_contract_barriers,
-            previous_spot_time: current_spot_time,
+            proposal_prev_spot_time: current_spot_time,
         };
         if (
             (this.accumulator_barriers_data.current_spot_time &&
@@ -173,6 +176,11 @@ export default class ContractTradeStore extends BaseStore {
         const tick_update_timestamp = should_update_contract_barriers
             ? this.accumulator_contract_barriers_data.tick_update_timestamp
             : this.accumulator_barriers_data.tick_update_timestamp;
+        if (document.hidden) {
+            clearTimeout(this.accu_barriers_timeout_id);
+            this.setNewAccumulatorBarriersData(delayed_barriers_data, should_update_contract_barriers);
+            return;
+        }
         this.accu_barriers_timeout_id = setTimeout(
             () => {
                 runInAction(() => {
@@ -257,31 +265,36 @@ export default class ContractTradeStore extends BaseStore {
 
     get has_crossed_accu_barriers() {
         const { symbol } = JSON.parse(sessionStorage.getItem('trade_store')) || {};
+        const { current_spot: contract_current_spot, entry_spot, underlying } = this.last_contract.contract_info || {};
         const {
-            current_spot: contract_current_spot,
-            entry_spot,
-            underlying,
-        } = this.root_store.portfolio.active_positions.find(
-            ({ type, contract_info: _contract_info }) =>
-                isAccumulatorContract(type) && _contract_info.underlying === symbol
-        )?.contract_info || {};
-        const { accumulators_high_barrier, accumulators_low_barrier, current_spot } =
+            accumulators_high_barrier,
+            accumulators_low_barrier,
+            current_spot,
+            proposal_prev_spot_time,
+            ticks_history_prev_spot_time,
+        } =
             (isAccumulatorContractOpen(this.last_contract.contract_info)
                 ? this.accumulator_contract_barriers_data
                 : this.accumulator_barriers_data) || {};
-        return !!(
+        const is_knock_out =
             current_spot &&
             accumulators_high_barrier &&
             accumulators_low_barrier &&
-            (current_spot >= accumulators_high_barrier || current_spot <= accumulators_low_barrier) &&
-            (!isAccumulatorContractOpen(this.last_contract.contract_info) ||
-                (entry_spot && entry_spot !== contract_current_spot && underlying === symbol))
+            (current_spot >= accumulators_high_barrier || current_spot <= accumulators_low_barrier);
+        const is_relevant_barrier =
+            ticks_history_prev_spot_time && ticks_history_prev_spot_time === proposal_prev_spot_time;
+        const should_highlight_contract_barriers =
+            entry_spot && entry_spot !== contract_current_spot && underlying === symbol;
+        return !!(
+            is_knock_out &&
+            is_relevant_barrier &&
+            (!isAccumulatorContractOpen(this.last_contract.contract_info) || should_highlight_contract_barriers)
         );
     }
 
     get markers_array() {
         let markers = [];
-        const { contract_type: trade_type, symbol } = JSON.parse(sessionStorage.getItem('trade_store')) || {};
+        const { contract_type: trade_type } = JSON.parse(sessionStorage.getItem('trade_store')) || {};
         markers = this.applicable_contracts()
             .map(c => c.marker)
             .filter(m => m)
@@ -289,21 +302,18 @@ export default class ContractTradeStore extends BaseStore {
         if (markers.length) {
             markers[markers.length - 1].is_last_contract = true;
         }
-        const { current_spot_time, entry_tick_time, exit_tick_time } =
-            this.root_store.portfolio.active_positions.find(
-                ({ type, contract_info: _contract_info }) =>
-                    isAccumulatorContract(type) && _contract_info.underlying === symbol
-            )?.contract_info || {};
-        const { accumulators_high_barrier, accumulators_low_barrier, barrier_spot_distance, previous_spot_time } =
-            (((isAccumulatorContractOpen(this.last_contract.contract_info) &&
-                entry_tick_time &&
-                entry_tick_time !== current_spot_time) ||
-                (exit_tick_time && current_spot_time <= exit_tick_time)) &&
+        const { current_spot_time, entry_tick_time, exit_tick_time } = this.last_contract.contract_info || {};
+        const should_show_poc_barriers =
+            (entry_tick_time && entry_tick_time !== current_spot_time) ||
+            (exit_tick_time && current_spot_time <= exit_tick_time);
+        const { accumulators_high_barrier, accumulators_low_barrier, barrier_spot_distance, proposal_prev_spot_time } =
+            (isAccumulatorContractOpen(this.last_contract.contract_info) &&
+                should_show_poc_barriers &&
                 this.accumulator_contract_barriers_data?.accumulators_high_barrier &&
                 this.accumulator_contract_barriers_data) ||
             this.accumulator_barriers_data ||
             {};
-        if (trade_type === 'accumulator' && previous_spot_time && accumulators_high_barrier) {
+        if (trade_type === 'accumulator' && proposal_prev_spot_time && accumulators_high_barrier) {
             markers.push({
                 type: 'TickContract',
                 contract_info: {
@@ -318,7 +328,7 @@ export default class ContractTradeStore extends BaseStore {
                 },
                 key: 'dtrader_accumulator_barriers',
                 price_array: [accumulators_high_barrier, accumulators_low_barrier],
-                epoch_array: [previous_spot_time],
+                epoch_array: [proposal_prev_spot_time],
             });
         }
         return markers;
diff --git a/packages/core/src/Stores/notification-store.js b/packages/core/src/Stores/notification-store.js
index 6fb9386d30e0..38755d5378e3 100644
--- a/packages/core/src/Stores/notification-store.js
+++ b/packages/core/src/Stores/notification-store.js
@@ -319,6 +319,9 @@ export default class NotificationStore extends BaseStore {
 
             this.handlePOAAddressMismatchNotifications();
 
+            if (status?.includes('mt5_additional_kyc_required'))
+                this.addNotificationMessage(this.client_notifications.additional_kyc_info);
+
             if (!has_enabled_two_fa && obj_total_balance.amount_real > 0) {
                 this.addNotificationMessage(this.client_notifications.two_f_a);
             } else {
@@ -1437,6 +1440,23 @@ export default class NotificationStore extends BaseStore {
                 },
                 type: 'warning',
             },
+            additional_kyc_info: {
+                key: 'additional_kyc_info',
+                header: <Localize i18n_default_text='Pending action required' />,
+                message: (
+                    <Localize i18n_default_text='We require additional information for your Deriv MT5 account(s). Please take a moment to update your information now.' />
+                ),
+                should_show_again: true,
+                action: {
+                    text: localize('Update now'),
+                    onClick: () => {
+                        if (this.is_notifications_visible) this.toggleNotificationsModal();
+                        ui.toggleAdditionalKycInfoModal();
+                        this.markNotificationMessage({ key: 'additional_kyc_info' });
+                    },
+                },
+                type: 'warning',
+            },
         };
 
         this.client_notifications = notifications;
@@ -1450,7 +1470,6 @@ export default class NotificationStore extends BaseStore {
         this.p2p_redirect_to = p2p_redirect_to;
     }
 
-    //TODO (yauheni-kryzhyk): this method is not used. leaving this for the upcoming new pop-up notifications implementation
     setShouldShowPopups(should_show_popups) {
         this.should_show_popups = should_show_popups;
     }
diff --git a/packages/core/src/Stores/ui-store.js b/packages/core/src/Stores/ui-store.js
index 6a37df2affe7..cc161fbbe1e8 100644
--- a/packages/core/src/Stores/ui-store.js
+++ b/packages/core/src/Stores/ui-store.js
@@ -169,6 +169,9 @@ export default class UIStore extends BaseStore {
     is_cfd_reset_password_modal_enabled = false;
     sub_section_index = 0;
 
+    is_additional_kyc_info_modal_open = false;
+    is_kyc_information_submitted_modal_open = false;
+
     getDurationFromUnit = unit => this[`duration_${unit}`];
 
     constructor(root_store) {
@@ -198,6 +201,8 @@ export default class UIStore extends BaseStore {
         super({ root_store, local_storage_properties, store_name });
 
         makeObservable(this, {
+            is_additional_kyc_info_modal_open: observable,
+            is_kyc_information_submitted_modal_open: observable,
             account_needed_modal_props: observable,
             account_switcher_disabled_message: observable,
             has_only_forward_starting_contracts: observable,
@@ -392,6 +397,8 @@ export default class UIStore extends BaseStore {
             toggleLanguageSettingsModal: action.bound,
             toggleUnsupportedContractModal: action.bound,
             toggleUpdateEmailModal: action.bound,
+            toggleAdditionalKycInfoModal: action.bound,
+            toggleKycInformationSubmittedModal: action.bound,
         });
 
         window.addEventListener('resize', this.handleResize);
@@ -919,4 +926,12 @@ export default class UIStore extends BaseStore {
     setSubSectionIndex(index) {
         this.sub_section_index = index;
     }
+
+    toggleAdditionalKycInfoModal() {
+        this.is_additional_kyc_info_modal_open = !this.is_additional_kyc_info_modal_open;
+    }
+
+    toggleKycInformationSubmittedModal() {
+        this.is_kyc_information_submitted_modal_open = !this.is_kyc_information_submitted_modal_open;
+    }
 }
diff --git a/packages/core/src/Utils/Datadog/index.ts b/packages/core/src/Utils/Datadog/index.ts
index 52af8c6d7391..adff65f23f86 100644
--- a/packages/core/src/Utils/Datadog/index.ts
+++ b/packages/core/src/Utils/Datadog/index.ts
@@ -41,5 +41,6 @@ datadogRum.init({
     version: dataDogVersion,
     trackFrustrations: true,
     enableExperimentalFeatures: ['clickmap'],
+    excludedActivityUrls: [/^https:\/\/api.telegram.org.*$/],
 });
 datadogRum.startSessionReplayRecording();
diff --git a/packages/core/src/index.html b/packages/core/src/index.html
index b77e09c71272..73e34a0c2525 100644
--- a/packages/core/src/index.html
+++ b/packages/core/src/index.html
@@ -156,6 +156,10 @@
         </script>
         <!-- End URL Handler -->
 
+        <!--         TODO: Find alternative solution for Onfido dependency -->
+        <script src="https://assets.onfido.com/web-sdk-releases/latest/onfido.min.js"></script>
+        <link href="https://assets.onfido.com/web-sdk-releases/latest/style.css" rel="stylesheet" />
+
         <!-- Start Cookies script -->
         <script src="https://static.deriv.com/scripts/cookie.js" async></script>
         <!-- End Cookies script -->
diff --git a/packages/core/src/public/images/common/static_images/ke_alien_card.png b/packages/core/src/public/images/common/static_images/ke_alien_card.png
deleted file mode 100644
index 22e79adff3ba..000000000000
Binary files a/packages/core/src/public/images/common/static_images/ke_alien_card.png and /dev/null differ
diff --git a/packages/core/src/public/images/common/static_images/ke_national_identity_card.png b/packages/core/src/public/images/common/static_images/ke_national_identity_card.png
deleted file mode 100644
index 0f5c51781715..000000000000
Binary files a/packages/core/src/public/images/common/static_images/ke_national_identity_card.png and /dev/null differ
diff --git a/packages/core/src/public/images/common/static_images/ke_passport.png b/packages/core/src/public/images/common/static_images/ke_passport.png
deleted file mode 100644
index 7cab3bfc4bc0..000000000000
Binary files a/packages/core/src/public/images/common/static_images/ke_passport.png and /dev/null differ
diff --git a/packages/core/src/public/images/common/static_images/ng_drivers_license.png b/packages/core/src/public/images/common/static_images/ng_drivers_license.png
deleted file mode 100644
index 6fb3f95f6085..000000000000
Binary files a/packages/core/src/public/images/common/static_images/ng_drivers_license.png and /dev/null differ
diff --git a/packages/core/src/public/images/common/static_images/ng_nin_slip.png b/packages/core/src/public/images/common/static_images/ng_nin_slip.png
deleted file mode 100644
index 469b108c498d..000000000000
Binary files a/packages/core/src/public/images/common/static_images/ng_nin_slip.png and /dev/null differ
diff --git a/packages/core/src/public/images/common/static_images/ng_voter_id.png b/packages/core/src/public/images/common/static_images/ng_voter_id.png
deleted file mode 100644
index 6a0111ecd9b8..000000000000
Binary files a/packages/core/src/public/images/common/static_images/ng_voter_id.png and /dev/null differ
diff --git a/packages/core/src/public/images/common/static_images/ug_national_identity_card.png b/packages/core/src/public/images/common/static_images/ug_national_identity_card.png
deleted file mode 100644
index 1d645804746c..000000000000
Binary files a/packages/core/src/public/images/common/static_images/ug_national_identity_card.png and /dev/null differ
diff --git a/packages/core/src/public/images/common/static_images/za_national_identity_card.png b/packages/core/src/public/images/common/static_images/za_national_identity_card.png
deleted file mode 100644
index e3dc3f3d023e..000000000000
Binary files a/packages/core/src/public/images/common/static_images/za_national_identity_card.png and /dev/null differ
diff --git a/packages/core/src/public/images/common/static_images/zw_national_identity_card.png b/packages/core/src/public/images/common/static_images/zw_national_identity_card.png
deleted file mode 100644
index 9e79789d7021..000000000000
Binary files a/packages/core/src/public/images/common/static_images/zw_national_identity_card.png and /dev/null differ
diff --git a/packages/core/src/sass/app/_common/components/onfido-container.scss b/packages/core/src/sass/app/_common/components/onfido-container.scss
index 7c549ba2daf7..d97e2f85585e 100644
--- a/packages/core/src/sass/app/_common/components/onfido-container.scss
+++ b/packages/core/src/sass/app/_common/components/onfido-container.scss
@@ -263,16 +263,6 @@
             }
         }
     }
-    .proof-of-identity__inner-container {
-        @include desktop {
-            &--incl-image {
-                display: grid;
-                align-items: center;
-                column-gap: 1.5rem;
-                grid-template-columns: auto 0.5fr;
-            }
-        }
-    }
 
     .additional-field {
         margin-top: 1.6rem;
diff --git a/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar-mobile.tsx b/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar-mobile.tsx
index d059be4877e1..c4c6baf10125 100644
--- a/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar-mobile.tsx
+++ b/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar-mobile.tsx
@@ -5,6 +5,8 @@ import { localize } from '@deriv/translations';
 import { toMoment } from '@deriv/shared';
 import { TInputDateRange } from 'Types';
 
+type TDatePickerOnChangeParams = Parameters<React.ComponentProps<typeof DatePicker>['onChange']>[0];
+
 type TRadioButton = {
     id: string;
     className?: string;
@@ -51,7 +53,7 @@ type TCompositeCalendarMobile = {
         value: { from?: moment.Moment; to?: moment.Moment; is_batch?: boolean },
         extra_data?: { date_range: TInputDateRange }
     ) => void;
-    setCurrentFocus?: (focus: string) => void;
+    setCurrentFocus: (focus: string | null) => void;
     from: number;
     to: number;
 };
@@ -134,11 +136,11 @@ const CompositeCalendarMobile = React.memo(
             setIsOpen(false);
         };
 
-        const selectDate = (e: React.ChangeEvent<HTMLInputElement>, key: string) => {
+        const selectDate = (e: TDatePickerOnChangeParams, key: string) => {
             setSelectedDateRange({ value: CUSTOM_KEY });
 
-            if (key === 'from') setFrom(e.target?.value);
-            if (key === 'to') setTo(e.target?.value);
+            if (key === 'from') setFrom(e.target?.value as string);
+            if (key === 'to') setTo(e.target?.value as string);
         };
 
         const getMobileFooter = () => {
@@ -180,12 +182,12 @@ const CompositeCalendarMobile = React.memo(
                 <div className='composite-calendar__input-fields composite-calendar__input-fields--fill'>
                     <InputField
                         id='dt_calendar_input'
-                        current_focus={current_focus}
+                        current_focus={current_focus ?? ''}
                         is_read_only={true}
                         icon={() => <Icon icon='IcCalendarDatefrom' className='inline-icon' />}
                         onClick={openDialog}
                         setCurrentFocus={setCurrentFocus}
-                        value={applied_date_range?.label}
+                        value={applied_date_range?.label ?? ''}
                     />
                 </div>
                 <MobileDialog
@@ -223,20 +225,18 @@ const CompositeCalendarMobile = React.memo(
                             <div className='composite-calendar-modal__custom-date-range'>
                                 <DatePicker
                                     className='composite-calendar-modal__custom-date-range-start-date'
-                                    is_nativepicker={true}
                                     placeholder={localize('Start date')}
-                                    value={from_date}
+                                    value={from_date ?? ''}
                                     max_date={to_date || today}
-                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => selectDate(e, 'from')}
+                                    onChange={(e: TDatePickerOnChangeParams) => selectDate(e, 'from')}
                                 />
                                 <DatePicker
                                     className='composite-calendar-modal__custom-date-range-end-date'
-                                    is_nativepicker={true}
                                     placeholder={localize('End date')}
-                                    value={to_date}
+                                    value={to_date ?? ''}
                                     max_date={today}
                                     min_date={from_date}
-                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => selectDate(e, 'to')}
+                                    onChange={(e: TDatePickerOnChangeParams) => selectDate(e, 'to')}
                                 />
                             </div>
                         </div>
diff --git a/packages/shared/src/utils/cfd/cfd.ts b/packages/shared/src/utils/cfd/cfd.ts
index 049159e480b7..2c3f03474c41 100644
--- a/packages/shared/src/utils/cfd/cfd.ts
+++ b/packages/shared/src/utils/cfd/cfd.ts
@@ -39,7 +39,7 @@ export const getMT5Title = (account_type: string) => {
 
 type TPlatform = 'dxtrade' | 'mt5' | 'derivez' | 'ctrader';
 type TMarketType = 'financial' | 'synthetic' | 'gaming' | 'all' | undefined;
-type TShortcode = 'svg' | 'bvi' | 'labuan' | 'vanuatu';
+type TShortcode = 'svg' | 'bvi' | 'labuan' | 'vanuatu' | 'maltainvest';
 type TGetAccount = {
     market_type: TMarketType;
     sub_account_type?: TAccount['sub_account_type'];
@@ -105,6 +105,8 @@ export const getCFDAccountKey = ({ market_type, sub_account_type, platform, shor
                     return 'financial_fx';
                 case 'vanuatu':
                     return 'financial_v';
+                case 'maltainvest':
+                    return 'financial';
                 default:
                     return 'financial_demo';
             }
@@ -181,12 +183,17 @@ export const getCFDAccountDisplay = ({
     is_mt5_trade_modal,
     is_transfer_form = false,
 }: TGetCFDAccountDisplay) => {
-    let cfd_account_key = getCFDAccountKey({ market_type, sub_account_type, platform, shortcode });
+    const cfd_account_key = getCFDAccountKey({ market_type, sub_account_type, platform, shortcode });
     if (!cfd_account_key) return undefined;
 
-    if (cfd_account_key === 'financial_demo' && is_eu) {
-        if (is_mt5_trade_modal) cfd_account_key = 'mt5_cfds';
-        else cfd_account_key = 'cfd';
+    if (is_mt5_trade_modal && is_eu) {
+        switch (cfd_account_key) {
+            case 'financial':
+                return localize('CFDs');
+            case 'financial_demo':
+            default:
+                return localize('CFDs Demo');
+        }
     }
 
     const cfd_account_display = CFD_text_translated[cfd_account_key]();
diff --git a/packages/shared/src/utils/config/adapters.ts b/packages/shared/src/utils/config/adapters.ts
index 7ec4efc3e265..b984b7cd63a3 100644
--- a/packages/shared/src/utils/config/adapters.ts
+++ b/packages/shared/src/utils/config/adapters.ts
@@ -4,7 +4,6 @@ type TDocument = {
     id: string;
     text: string;
     value?: string;
-    sample_image?: string;
     example_format?: string;
     additional?: {
         display_name: string;
diff --git a/packages/shared/src/utils/constants/contract.ts b/packages/shared/src/utils/constants/contract.ts
index 4984193a4a8a..66ecb1feea26 100644
--- a/packages/shared/src/utils/constants/contract.ts
+++ b/packages/shared/src/utils/constants/contract.ts
@@ -27,7 +27,7 @@ type TContractTypesConfig = {
     config?: { hide_duration?: boolean };
 };
 
-type TGetContractTypesConfig = (symbol: string) => Record<string, TContractTypesConfig>;
+type TGetContractTypesConfig = (symbol?: string) => Record<string, TContractTypesConfig>;
 
 type TContractConfig = {
     button_name?: React.ReactNode;
diff --git a/packages/shared/src/utils/date/date-time.ts b/packages/shared/src/utils/date/date-time.ts
index ab1934c78ee3..f2660696ae34 100644
--- a/packages/shared/src/utils/date/date-time.ts
+++ b/packages/shared/src/utils/date/date-time.ts
@@ -51,7 +51,7 @@ export const toLocalFormat = (time: moment.MomentInput) => moment.utc(time).loca
  * @param  {String} time        24 hours format, may or may not include seconds
  * @return {moment} a new moment object of result
  */
-export const setTime = (moment_obj: moment.Moment, time: string) => {
+export const setTime = (moment_obj: moment.Moment, time: string | null) => {
     const [hour, minute, second] = time ? time.split(':') : [0, 0, 0];
     moment_obj
         .hour(+hour)
diff --git a/packages/shared/src/utils/validation/form-validations.ts b/packages/shared/src/utils/validation/form-validations.ts
index 9f14e551e8d3..9fff37b7c648 100644
--- a/packages/shared/src/utils/validation/form-validations.ts
+++ b/packages/shared/src/utils/validation/form-validations.ts
@@ -33,7 +33,7 @@ export const filterByLandingCompany = (landing_company: string, schema: TSchema
  * @return {function(*=): {}}
  */
 export const generateValidationFunction = (landing_company: string, schema: TSchema) => {
-    const rules_schema = filterByLandingCompany(landing_company, schema);
+    const rules_schema = landing_company ? filterByLandingCompany(landing_company, schema) : schema;
     const rules: { [key: string]: TConfig['rules'] } = {};
     Object.entries(rules_schema).forEach(([key, opts]) => {
         rules[key] = opts.rules;
diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts
index 0859c83a4bc2..22478e25d4e9 100644
--- a/packages/stores/src/mockStore.ts
+++ b/packages/stores/src/mockStore.ts
@@ -403,6 +403,10 @@ const mock = (): TStores & { is_mock: boolean } => {
             is_reset_trading_password_modal_visible: false,
             setResetTradingPasswordModalOpen: jest.fn(),
             vanilla_trade_type: 'VANILLALONGCALL',
+            is_additional_kyc_info_modal_open: false,
+            toggleAdditionalKycInfoModal: jest.fn(),
+            is_kyc_information_submitted_modal_open: false,
+            toggleKycInformationSubmittedModal: jest.fn(),
         },
         traders_hub: {
             getAccount: jest.fn(),
@@ -510,6 +514,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             is_accumulator: false,
             is_multiplier: false,
             is_turbos: false,
+            onHoverPosition: jest.fn(),
             onBuyResponse: jest.fn(),
             onClickCancel: jest.fn(),
             onClickSell: jest.fn(),
diff --git a/packages/stores/types.ts b/packages/stores/types.ts
index eda120484274..5dec341eaba5 100644
--- a/packages/stores/types.ts
+++ b/packages/stores/types.ts
@@ -520,6 +520,7 @@ type TCommonStoreError = {
     should_show_refresh?: boolean;
     type?: string;
 };
+
 type TCommonStoreServicesError = {
     code?: string;
     message?: string;
@@ -564,12 +565,14 @@ type TUiStore = {
     has_real_account_signup_ended: boolean;
     header_extension: JSX.Element | null;
     is_account_settings_visible: boolean;
+    is_additional_kyc_info_modal_open: boolean;
     is_advanced_duration: boolean;
     is_cashier_visible: boolean;
     is_wallet_modal_visible: boolean;
     is_chart_asset_info_visible?: boolean;
     is_chart_layout_default: boolean;
     is_closing_create_real_account_modal: boolean;
+    is_kyc_information_submitted_modal_open: boolean;
     is_dark_mode_on: boolean;
     is_loading: boolean;
     is_reports_visible: boolean;
@@ -657,6 +660,8 @@ type TUiStore = {
     purchase_states: boolean[];
     setShouldShowCooldownModal: (value: boolean) => void;
     vanilla_trade_type: 'VANILLALONGCALL' | 'VANILLALONGPUT';
+    toggleAdditionalKycInfoModal: () => void;
+    toggleKycInformationSubmittedModal: () => void;
 };
 
 type TPortfolioStore = {
@@ -671,12 +676,13 @@ type TPortfolioStore = {
     is_accumulator: boolean;
     is_turbos: boolean;
     onBuyResponse: (contract_info: { contract_id: number; longcode: string; contract_type: string }) => void;
+    onHoverPosition: (is_over: boolean, position: TPortfolioPosition, underlying: string) => void;
     onClickCancel: (contract_id?: number) => void;
     onClickSell: (contract_id?: number) => void;
     onMount: () => void;
     open_accu_contract: TPortfolioPosition | null;
     positions: TPortfolioPosition[];
-    removePositionById: (id: number) => void;
+    removePositionById: (contract_id?: number) => void;
     setContractType: (contract_type: string) => void;
 };
 
diff --git a/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.tsx b/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.tsx
index 236fd691cc62..d209c6a1a68f 100644
--- a/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.tsx
+++ b/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.tsx
@@ -180,7 +180,7 @@ const ContractDetails = ({
                         id='dt_entry_spot_label'
                         icon={<Icon icon='IcContractEntrySpot' size={24} />}
                         label={localize('Entry spot')}
-                        value={addCommaToNumber(entry_spot_display_value) || ' - '}
+                        value={addCommaToNumber(Number(entry_spot_display_value)) || ' - '}
                         value2={toGMTFormat(epochToMoment(Number(entry_tick_time))) || ' - '}
                     />
                 )}
@@ -189,7 +189,7 @@ const ContractDetails = ({
                         id='dt_exit_spot_label'
                         icon={<Icon icon='IcContractExitSpot' size={24} />}
                         label={localize('Exit spot')}
-                        value={addCommaToNumber(exit_spot) || ' - '}
+                        value={addCommaToNumber(Number(exit_spot)) || ' - '}
                         value2={toGMTFormat(epochToMoment(Number(exit_tick_time))) || ' - '}
                     />
                 )}
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-result-mobile.spec.tsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-result-mobile.spec.tsx
new file mode 100644
index 000000000000..357f5768a21a
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-result-mobile.spec.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import PositionsResultMobile from '../positions-result-mobile';
+
+describe('PositionsResultMobile', () => {
+    it('should PositionsResultMobile be in the DOM', () => {
+        render(<PositionsResultMobile is_visible={true} result='won' />);
+        expect(screen.getByTestId('result_mobile')).toBeInTheDocument();
+    });
+
+    it('should PositionsResultMobile render LOST if result is won ', () => {
+        render(<PositionsResultMobile is_visible={true} result='won' />);
+        expect(screen.getByText('Won')).toBeInTheDocument();
+    });
+
+    it('should PositionsResultMobile render LOST if result is not won ', () => {
+        render(<PositionsResultMobile is_visible={true} result='lost' />);
+        expect(screen.getByText('Lost')).toBeInTheDocument();
+    });
+});
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/result-mobile.spec.js b/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/result-mobile.spec.js
deleted file mode 100644
index a37c521b4405..000000000000
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/result-mobile.spec.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import ResultMobile from '../result-mobile';
-
-describe('ResultMobile', () => {
-    it('should ResultMobile be in the DOM', () => {
-        const wrapper = render(<ResultMobile is_visible={true} />);
-        expect(wrapper.getByTestId('result_mobile')).toBeInTheDocument();
-    });
-
-    it('should ResultMobile render LOST if result is won ', () => {
-        const wrapper = render(<ResultMobile is_visible={true} result='won' />);
-        expect(wrapper.getByText('Won')).toBeInTheDocument(true);
-    });
-
-    it('should ResultMobile render LOST if result is not won ', () => {
-        const wrapper = render(<ResultMobile is_visible={true} result='lost' />);
-        expect(wrapper.getByText('Lost')).toBeInTheDocument(true);
-    });
-});
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/__tests__/positions-helper.js b/packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/__tests__/positions-helper.ts
similarity index 100%
rename from packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/__tests__/positions-helper.js
rename to packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/__tests__/positions-helper.ts
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/index.js b/packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/index.ts
similarity index 100%
rename from packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/index.js
rename to packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/index.ts
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.js b/packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.ts
similarity index 61%
rename from packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.js
rename to packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.ts
index ddebcdaadec8..0ce849841ed0 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.js
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.ts
@@ -1,7 +1,10 @@
 import { localize } from '@deriv/translations';
-import { isHighLow, getContractTypesConfig, isCallPut, isVanillaContract } from '@deriv/shared';
+import { isHighLow, getContractTypesConfig, isCallPut, isVanillaContract, TContractInfo } from '@deriv/shared';
 
-export const addCommaToNumber = (num, decimal_places) => {
+export const addCommaToNumber = (
+    num: number | null | undefined,
+    decimal_places?: number | undefined
+): string | number | null | undefined => {
     if (!num || isNaN(num)) {
         return num;
     }
@@ -10,7 +13,7 @@ export const addCommaToNumber = (num, decimal_places) => {
     return n.replace(/\d(?=(?:\d{3})+(?:\.|$))/g, (m, i) => (p <= 0 || i < p ? `${m},` : m));
 };
 
-export const getBarrierLabel = contract_info => {
+export const getBarrierLabel = (contract_info: TContractInfo) => {
     if (isDigitType(contract_info.contract_type)) {
         return localize('Target');
     }
@@ -20,16 +23,17 @@ export const getBarrierLabel = contract_info => {
     return localize('Barrier');
 };
 
-export const getBarrierValue = contract_info => {
+export const getBarrierValue = (contract_info: TContractInfo) => {
     if (isDigitType(contract_info.contract_type)) {
-        return digitTypeMap(contract_info)[contract_info.contract_type];
+        return digitTypeMap(contract_info)[contract_info.contract_type as keyof ReturnType<typeof digitTypeMap>];
     }
-    return addCommaToNumber(contract_info.barrier);
+    return addCommaToNumber(Number(contract_info.barrier));
 };
 
-export const isDigitType = contract_type => /digit/.test(contract_type.toLowerCase());
+export const isDigitType = (contract_type: TContractInfo['contract_type']) =>
+    contract_type && /digit/.test(contract_type.toLowerCase());
 
-const digitTypeMap = contract_info => ({
+const digitTypeMap = (contract_info: TContractInfo) => ({
     DIGITDIFF: localize('Not {{barrier}}', { barrier: contract_info.barrier }),
     DIGITEVEN: localize('Even'),
     DIGITMATCH: localize('Equals {{barrier}}', { barrier: contract_info.barrier }),
@@ -38,14 +42,17 @@ const digitTypeMap = contract_info => ({
     DIGITUNDER: localize('Under {{barrier}}', { barrier: contract_info.barrier }),
 });
 
-export const filterByContractType = ({ contract_type, shortcode }, trade_contract_type) => {
-    const is_call_put = isCallPut(trade_contract_type);
+export const filterByContractType = (
+    { contract_type, shortcode }: { contract_type?: string; shortcode?: string },
+    trade_contract_type: string
+) => {
+    const is_call_put = isCallPut(trade_contract_type as Parameters<typeof isCallPut>[0]);
     const is_high_low = isHighLow({ shortcode });
     const is_vanilla = isVanillaContract(contract_type);
     const trade_types = is_call_put
         ? ['CALL', 'CALLE', 'PUT', 'PUTE']
         : getContractTypesConfig()[trade_contract_type]?.trade_types;
-    const match = trade_types?.includes(contract_type);
+    const match = trade_types?.includes(contract_type ?? '');
     if (trade_contract_type === 'high_low') return is_high_low;
     return match && (is_vanilla || !is_high_low);
 };
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/index.js b/packages/trader/src/App/Components/Elements/PositionsDrawer/index.js
deleted file mode 100644
index 602abedc6286..000000000000
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import PositionsDrawer from './positions-drawer.jsx';
-
-export default PositionsDrawer;
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/index.ts b/packages/trader/src/App/Components/Elements/PositionsDrawer/index.ts
new file mode 100644
index 000000000000..da86f493fa91
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/index.ts
@@ -0,0 +1,3 @@
+import PositionsDrawer from './positions-drawer';
+
+export default PositionsDrawer;
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.tsx
similarity index 80%
rename from packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
rename to packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.tsx
index 8c6a696feb6b..ac4100564306 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.tsx
@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import { CSSTransition } from 'react-transition-group';
@@ -11,6 +10,34 @@ import { filterByContractType } from './helpers';
 import { useTraderStore } from 'Stores/useTraderStores';
 import { observer, useStore } from '@deriv/stores';
 
+type TUiStore = Pick<
+    ReturnType<typeof useStore>['ui'],
+    | 'addToast'
+    | 'current_focus'
+    | 'is_mobile'
+    | 'removeToast'
+    | 'setCurrentFocus'
+    | 'should_show_cancellation_warning'
+    | 'toggleCancellationWarning'
+    | 'toggleUnsupportedContractModal'
+>;
+type TPortfolioStore = Pick<
+    ReturnType<typeof useStore>['portfolio'],
+    'onHoverPosition' | 'onClickCancel' | 'onClickSell'
+>;
+type TPositionDrawerCardItem = TPortfolioStore &
+    TUiStore & {
+        currency: ReturnType<typeof useStore>['client']['currency'];
+        getContractById: ReturnType<typeof useStore>['contract_trade']['getContractById'];
+        is_new_row?: boolean;
+        measure?: () => void;
+        onClickRemove: ReturnType<typeof useStore>['portfolio']['removePositionById'];
+        row?: TPortfolioPosition | { [key: string]: any };
+        server_time: ReturnType<typeof useStore>['common']['server_time'];
+        symbol: ReturnType<typeof useTraderStore>['symbol'];
+    };
+type TPortfolioPosition = ReturnType<typeof useStore>['portfolio']['active_positions'][0];
+
 const PositionsDrawerCardItem = ({
     row: portfolio_position,
     measure,
@@ -18,12 +45,12 @@ const PositionsDrawerCardItem = ({
     symbol,
     is_new_row,
     ...props
-}) => {
-    const { in_prop } = useNewRowTransition(is_new_row);
+}: TPositionDrawerCardItem) => {
+    const { in_prop } = useNewRowTransition(is_new_row as boolean);
 
     React.useEffect(() => {
-        measure();
-    }, [portfolio_position.contract_info.is_sold, measure]);
+        measure?.();
+    }, [portfolio_position?.contract_info.is_sold, measure]);
 
     return (
         <CSSTransition
@@ -43,10 +70,10 @@ const PositionsDrawerCardItem = ({
                     {...portfolio_position}
                     {...props}
                     onMouseEnter={() => {
-                        onHoverPosition(true, portfolio_position, symbol);
+                        onHoverPosition(true, portfolio_position as TPortfolioPosition, symbol);
                     }}
                     onMouseLeave={() => {
-                        onHoverPosition(false, portfolio_position, symbol);
+                        onHoverPosition(false, portfolio_position as TPortfolioPosition, symbol);
                     }}
                     onFooterEntered={measure}
                     should_show_transition={is_new_row}
@@ -84,16 +111,16 @@ const PositionsDrawer = observer(({ ...props }) => {
         toggleUnsupportedContractModal,
     } = ui;
     const drawer_ref = React.useRef(null);
-    const list_ref = React.useRef(null);
-    const scrollbar_ref = React.useRef(null);
+    const list_ref = React.useRef<HTMLDivElement>(null);
+    const scrollbar_ref = React.useRef<HTMLElement>(null);
 
     React.useEffect(() => {
         onMount();
     }, [onMount]);
 
     React.useEffect(() => {
-        list_ref?.current?.scrollTo(0);
-        scrollbar_ref?.current?.scrollToTop();
+        list_ref?.current?.scrollTo({ top: 0 });
+        if (scrollbar_ref.current) scrollbar_ref.current.scrollTop = 0;
     }, [symbol, trade_contract_type]);
 
     const positions = all_positions.filter(
@@ -185,10 +212,4 @@ const PositionsDrawer = observer(({ ...props }) => {
     );
 });
 
-PositionsDrawer.propTypes = {
-    children: PropTypes.node,
-    onChangeContractUpdate: PropTypes.func,
-    onClickContractUpdate: PropTypes.func,
-};
-
 export default PositionsDrawer;
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.tsx
similarity index 90%
rename from packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx
rename to packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.tsx
index 69a44e1b602d..6156593e8baf 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.tsx
@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import { CSSTransition } from 'react-transition-group';
@@ -25,10 +24,34 @@ import { localize } from '@deriv/translations';
 import { BinaryLink } from 'App/Components/Routes';
 import { PositionsCardLoader } from 'App/Components/Elements/ContentLoader';
 import { getMarketInformation } from 'Utils/Helpers/market-underlying';
-import ResultMobile from './result-mobile.jsx';
+import PositionsResultMobile from './positions-result-mobile';
 import { observer, useStore } from '@deriv/stores';
 import { useTraderStore } from 'Stores/useTraderStores';
 
+type TPortfolioStore = ReturnType<typeof useStore>['portfolio'];
+type TPortfolioPosition = Pick<
+    TPortfolioStore['active_positions'][0],
+    'contract_info' | 'id' | 'indicative' | 'is_sell_requested' | 'is_unsupported' | 'profit_loss'
+>;
+type TPickPortfolioStore = Pick<TPortfolioStore, 'onClickSell' | 'onClickCancel'>;
+type TUiStore = ReturnType<typeof useStore>['ui'];
+
+type TPositionsModalCard = TPickPortfolioStore &
+    TPortfolioPosition & {
+        className?: string;
+        contract_info: TPortfolioPosition['contract_info'];
+        contract_update: TPortfolioPosition['contract_info']['contract_update'];
+        currency: ReturnType<typeof useStore>['client']['currency'];
+        current_tick?: React.ComponentProps<typeof ProgressSliderMobile>['current_tick'];
+        is_loading?: boolean;
+        result?: React.ComponentProps<typeof PositionsResultMobile>['result'];
+        sell_price?: number;
+        status?: string;
+        togglePositions: TUiStore['togglePositionsDrawer'];
+        toggleUnsupportedContractModal: TUiStore['toggleUnsupportedContractModal'];
+        type?: string;
+    };
+
 const PositionsModalCard = observer(
     ({
         className,
@@ -50,7 +73,7 @@ const PositionsModalCard = observer(
         togglePositions,
         toggleUnsupportedContractModal,
         type,
-    }) => {
+    }: TPositionsModalCard) => {
         const { ui, common, contract_trade } = useStore();
         const { active_symbols } = useTraderStore();
         const { server_time } = common;
@@ -82,7 +105,7 @@ const PositionsModalCard = observer(
         const should_show_sell = hasContractEntered(contract_info) && isOpen(contract_info);
         const display_name = getSymbolDisplayName(
             active_symbols,
-            getMarketInformation(contract_info.shortcode).underlying
+            getMarketInformation(contract_info.shortcode || '').underlying
         );
 
         const contract_options_el = (
@@ -197,8 +220,7 @@ const PositionsModalCard = observer(
                     </div>
 
                     {result || !!contract_info.is_sold ? (
-                        <ResultMobile
-                            contract_id={id}
+                        <PositionsResultMobile
                             is_visible={!!contract_info.is_sold}
                             result={result || fallback_result}
                         />
@@ -210,7 +232,7 @@ const PositionsModalCard = observer(
                             is_loading={is_loading}
                             start_time={contract_info.date_start}
                             expiry_time={contract_info.date_expiry}
-                            server_time={server_time}
+                            server_time={server_time as moment.Moment}
                             ticks_count={contract_info.tick_count}
                         />
                     )}
@@ -238,7 +260,7 @@ const PositionsModalCard = observer(
                         is_mobile={is_mobile}
                         is_sell_requested={is_sell_requested}
                         onClickSell={onClickSell}
-                        server_time={server_time}
+                        server_time={server_time as moment.Moment}
                     />
                 </NavLink>
                 <CurrencyBadge currency={contract_info?.currency ?? ''} />
@@ -268,7 +290,7 @@ const PositionsModalCard = observer(
                                 {localize('Entry spot:')}
                             </Text>
                             <Text weight='bold' size='xxs' className='positions-modal-card__purchase-value'>
-                                <Money amount={contract_info.entry_spot} currency={currency} />
+                                <Money amount={Number(contract_info.entry_spot)} currency={currency} />
                             </Text>
                         </div>
                         <div className='positions-modal-card__payout-price'>
@@ -276,14 +298,13 @@ const PositionsModalCard = observer(
                                 {localize('Strike:')}
                             </Text>
                             <Text weight='bold' size='xxs' className='positions-modal-card__payout-value'>
-                                <Money amount={contract_info.barrier} currency={currency} />
+                                <Money amount={Number(contract_info.barrier)} currency={currency} />
                             </Text>
                         </div>
                     </div>
 
                     {result || !!contract_info.is_sold ? (
-                        <ResultMobile
-                            contract_id={id}
+                        <PositionsResultMobile
                             is_visible={!!contract_info.is_sold}
                             result={result || fallback_result}
                         />
@@ -295,7 +316,7 @@ const PositionsModalCard = observer(
                             is_loading={is_loading}
                             start_time={contract_info.date_start}
                             expiry_time={contract_info.date_expiry}
-                            server_time={server_time}
+                            server_time={server_time as moment.Moment}
                             ticks_count={contract_info.tick_count}
                         />
                     )}
@@ -327,8 +348,7 @@ const PositionsModalCard = observer(
                     is_sell_requested={is_sell_requested}
                     onClickCancel={onClickCancel}
                     onClickSell={onClickSell}
-                    server_time={server_time}
-                    status={status}
+                    server_time={server_time as moment.Moment}
                 />
             </React.Fragment>
         );
@@ -343,7 +363,7 @@ const PositionsModalCard = observer(
                 is_mobile={is_mobile}
                 is_sell_requested={is_sell_requested}
                 onClickSell={onClickSell}
-                server_time={server_time}
+                server_time={server_time as moment.Moment}
             />
         );
 
@@ -364,7 +384,7 @@ const PositionsModalCard = observer(
                 is_turbos={is_turbos}
                 has_progress_slider={is_mobile && has_progress_slider && !has_ended}
                 removeToast={removeToast}
-                server_time={server_time}
+                server_time={server_time as moment.Moment}
                 setCurrentFocus={setCurrentFocus}
                 should_show_cancellation_warning={should_show_cancellation_warning}
                 status={status}
@@ -380,8 +400,7 @@ const PositionsModalCard = observer(
                 is_sell_requested={is_sell_requested}
                 onClickCancel={onClickCancel}
                 onClickSell={onClickSell}
-                server_time={server_time}
-                status={status}
+                server_time={server_time as moment.Moment}
             />
         );
 
@@ -431,31 +450,4 @@ const PositionsModalCard = observer(
     }
 );
 
-PositionsModalCard.propTypes = {
-    className: PropTypes.string,
-    contract_info: PropTypes.object,
-    contract_update: PropTypes.object,
-    currency: PropTypes.string,
-    current_tick: PropTypes.number,
-    duration: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    duration_unit: PropTypes.string,
-    exit_spot: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    id: PropTypes.number,
-    indicative: PropTypes.number,
-    is_loading: PropTypes.bool,
-    is_sell_requested: PropTypes.bool,
-    is_unsupported: PropTypes.bool,
-    is_valid_to_sell: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
-    onClickSell: PropTypes.func,
-    onClickCancel: PropTypes.func,
-    profit_loss: PropTypes.number,
-    result: PropTypes.string,
-    sell_price: PropTypes.number,
-    sell_time: PropTypes.number,
-    status: PropTypes.string,
-    togglePositions: PropTypes.func,
-    toggleUnsupportedContractModal: PropTypes.func,
-    type: PropTypes.string,
-};
-
 export default PositionsModalCard;
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/result-mobile.jsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-result-mobile.tsx
similarity index 89%
rename from packages/trader/src/App/Components/Elements/PositionsDrawer/result-mobile.jsx
rename to packages/trader/src/App/Components/Elements/PositionsDrawer/positions-result-mobile.tsx
index a1578df1b511..f6ecf2403bba 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/result-mobile.jsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-result-mobile.tsx
@@ -1,11 +1,15 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { Icon } from '@deriv/components';
 import { localize } from '@deriv/translations';
 
-const ResultMobile = ({ is_visible, result }) => {
+type TPositionsResultMobile = {
+    is_visible: boolean;
+    result: 'won' | 'lost';
+};
+
+const PositionsResultMobile = ({ is_visible, result }: TPositionsResultMobile) => {
     const is_contract_won = result === 'won';
     return (
         <React.Fragment>
@@ -44,9 +48,4 @@ const ResultMobile = ({ is_visible, result }) => {
     );
 };
 
-ResultMobile.propTypes = {
-    is_visible: PropTypes.bool,
-    result: PropTypes.string,
-};
-
-export default ResultMobile;
+export default PositionsResultMobile;
diff --git a/packages/trader/src/App/Components/Elements/TogglePositions/__tests__/toggle-positions-mobile.spec.tsx b/packages/trader/src/App/Components/Elements/TogglePositions/__tests__/toggle-positions-mobile.spec.tsx
index 025a84d9b56a..8286a25344b1 100644
--- a/packages/trader/src/App/Components/Elements/TogglePositions/__tests__/toggle-positions-mobile.spec.tsx
+++ b/packages/trader/src/App/Components/Elements/TogglePositions/__tests__/toggle-positions-mobile.spec.tsx
@@ -58,7 +58,7 @@ const default_mock_store = {
     },
 };
 
-jest.mock('App/Components/Elements/PositionsDrawer/positions-modal-card.jsx', () =>
+jest.mock('App/Components/Elements/PositionsDrawer/positions-modal-card', () =>
     jest.fn(props => <div key={props.key}>PositionsModalCard</div>)
 );
 
diff --git a/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.tsx b/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.tsx
index eef96fdde3b9..210c358e5952 100644
--- a/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.tsx
+++ b/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.tsx
@@ -5,7 +5,7 @@ import { routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { NavLink } from 'react-router-dom';
 import EmptyPortfolioMessage from '../EmptyPortfolioMessage';
-import PositionsModalCard from 'App/Components/Elements/PositionsDrawer/positions-modal-card.jsx';
+import PositionsModalCard from 'App/Components/Elements/PositionsDrawer/positions-modal-card';
 import TogglePositions from './toggle-positions';
 import { observer, useStore } from '@deriv/stores';
 
@@ -45,7 +45,6 @@ const TogglePositionsMobile = observer(
             setHiddenPositionsIds([...new Set([...hidden_positions_ids, ...closed_positions_ids])]);
             togglePositionsDrawer();
         };
-
         // Show only 5 most recent open contracts
         const body_content = (
             <React.Fragment>
@@ -65,7 +64,6 @@ const TogglePositionsMobile = observer(
                             unmountOnExit
                         >
                             <PositionsModalCard
-                                //@ts-expect-error observer wrapped component needs to be ts migrated first
                                 onClickSell={onClickSell}
                                 onClickCancel={onClickCancel}
                                 key={portfolio_position.id}
diff --git a/packages/trader/src/App/Components/Form/TimePicker/dialog.jsx b/packages/trader/src/App/Components/Form/TimePicker/dialog.tsx
similarity index 78%
rename from packages/trader/src/App/Components/Form/TimePicker/dialog.jsx
rename to packages/trader/src/App/Components/Form/TimePicker/dialog.tsx
index ff1a62816947..8824e8bd245c 100644
--- a/packages/trader/src/App/Components/Form/TimePicker/dialog.jsx
+++ b/packages/trader/src/App/Components/Form/TimePicker/dialog.tsx
@@ -1,33 +1,54 @@
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import React from 'react';
 import { localize } from '@deriv/translations';
 import { toMoment } from '@deriv/shared';
 
-function isBetween(to_compare_moment, start_times_moment, end_times_moment, duration) {
+type TDialogProps = {
+    className: string;
+    end_times: moment.Moment[];
+    onChange: (arg: string | React.ChangeEvent<HTMLInputElement>) => void;
+    preClass: string;
+    selected_time: string;
+    start_times: moment.Moment[];
+};
+
+function isBetween(
+    to_compare_moment: moment.Moment,
+    start_times_moment: moment.Moment[],
+    end_times_moment: moment.Moment[],
+    duration?: string
+) {
     for (let i = 0; i < start_times_moment.length; i++) {
-        if (to_compare_moment.isBetween(start_times_moment[i], end_times_moment[i], duration)) {
+        if (
+            to_compare_moment.isBetween(
+                start_times_moment[i],
+                end_times_moment[i],
+                duration as moment.unitOfTime.StartOf
+            )
+        ) {
             return true;
         }
     }
     return false;
 }
 
-const Dialog = ({ preClass, selected_time, end_times, start_times, onChange, className }) => {
+const Dialog = ({ preClass, selected_time, end_times, start_times, onChange, className }: TDialogProps) => {
     const start_times_moment = start_times ? start_times.map(start_time => toMoment(start_time)) : [toMoment()];
     const end_times_moment = end_times
         ? end_times.map(end_time => toMoment(end_time))
-        : [toMoment().hour('23').minute('59').seconds('59').milliseconds('999')];
+        : [toMoment().hour(23).minute(59).seconds(59).milliseconds(999)];
     const to_compare_moment = toMoment();
     const [hour, minute] = selected_time.split(':');
     const hours = [...Array(24).keys()].map(a => `0${a}`.slice(-2));
     const minutes = [...Array(12).keys()].map(a => `0${a * 5}`.slice(-2));
 
-    const selectOption = (type, current_value, prev_value, is_enabled = true) => {
+    const selectOption = (type: string, current_value: string, prev_value: string, is_enabled = true) => {
         if (is_enabled && prev_value) {
             const [prev_hour, prev_minute] = prev_value.split(':');
             if ((type === 'h' && current_value !== prev_hour) || (type === 'm' && current_value !== prev_minute)) {
-                onChange(`${type === 'h' ? current_value : prev_hour}:${type === 'm' ? current_value : prev_minute}`);
+                const selected_hour = type === 'h' ? current_value : prev_hour;
+                const selected_minute = type === 'm' ? current_value : prev_minute;
+                onChange(`${selected_hour}:${selected_minute}`);
             }
         }
     };
@@ -40,8 +61,8 @@ const Dialog = ({ preClass, selected_time, end_times, start_times, onChange, cla
                         <strong>{localize('Hour')}</strong>
                     </div>
                     <div>
-                        {hours.map((h, key) => {
-                            to_compare_moment.hour(h);
+                        {hours.map(h => {
+                            to_compare_moment.hour(Number(h));
                             const start_times_reset_minute = start_times_moment.map(start_time =>
                                 start_time.clone().minute(0)
                             );
@@ -69,7 +90,7 @@ const Dialog = ({ preClass, selected_time, end_times, start_times, onChange, cla
                                         { [`${preClass}__selector-list-item--selected`]: hour === h },
                                         { [`${preClass}__selector-list-item--disabled`]: !is_enabled }
                                     )}
-                                    key={key}
+                                    key={h}
                                     onClick={() => {
                                         selectOption('h', h, selected_time, is_enabled);
                                     }}
@@ -85,8 +106,8 @@ const Dialog = ({ preClass, selected_time, end_times, start_times, onChange, cla
                         <strong>{localize('Minute')}</strong>
                     </div>
                     <div>
-                        {minutes.map((mm, key) => {
-                            to_compare_moment.hour(hour).minute(mm);
+                        {minutes.map(mm => {
+                            to_compare_moment.hour(Number(hour)).minute(Number(mm));
                             const is_enabled = isBetween(
                                 to_compare_moment,
                                 start_times_moment,
@@ -100,7 +121,7 @@ const Dialog = ({ preClass, selected_time, end_times, start_times, onChange, cla
                                         { [`${preClass}__selector-list-item--selected`]: minute === mm },
                                         { [`${preClass}__selector-list-item--disabled`]: !is_enabled }
                                     )}
-                                    key={key}
+                                    key={mm}
                                     onClick={() => {
                                         selectOption('m', mm, selected_time, is_enabled);
                                     }}
@@ -116,13 +137,4 @@ const Dialog = ({ preClass, selected_time, end_times, start_times, onChange, cla
     );
 };
 
-Dialog.propTypes = {
-    className: PropTypes.string,
-    end_times: PropTypes.array,
-    onChange: PropTypes.func,
-    preClass: PropTypes.string,
-    selected_time: PropTypes.array,
-    start_times: PropTypes.array,
-};
-
 export default Dialog;
diff --git a/packages/trader/src/App/Components/Form/TimePicker/index.js b/packages/trader/src/App/Components/Form/TimePicker/index.js
deleted file mode 100644
index 211fc0bce630..000000000000
--- a/packages/trader/src/App/Components/Form/TimePicker/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import TimePicker from './time-picker.jsx';
-
-export default TimePicker;
diff --git a/packages/trader/src/App/Components/Form/TimePicker/index.ts b/packages/trader/src/App/Components/Form/TimePicker/index.ts
new file mode 100644
index 000000000000..2185a96bb404
--- /dev/null
+++ b/packages/trader/src/App/Components/Form/TimePicker/index.ts
@@ -0,0 +1,3 @@
+import TimePicker from './time-picker';
+
+export default TimePicker;
diff --git a/packages/trader/src/App/Components/Form/TimePicker/time-picker.jsx b/packages/trader/src/App/Components/Form/TimePicker/time-picker.tsx
similarity index 77%
rename from packages/trader/src/App/Components/Form/TimePicker/time-picker.jsx
rename to packages/trader/src/App/Components/Form/TimePicker/time-picker.tsx
index 5e38be3e7836..fd5df901cc44 100644
--- a/packages/trader/src/App/Components/Form/TimePicker/time-picker.jsx
+++ b/packages/trader/src/App/Components/Form/TimePicker/time-picker.tsx
@@ -1,10 +1,22 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { Icon, InputField } from '@deriv/components';
-import Dialog from './dialog.jsx';
+import Dialog from './dialog';
 import { observer, useStore } from '@deriv/stores';
+import moment from 'moment';
+
+type TTimePickerProps = {
+    end_times: moment.Moment[];
+    is_nativepicker?: boolean;
+    name: string;
+    onChange: (e: { target: { name: string; value: string } }) => Promise<void>;
+    padding?: string;
+    placeholder: string;
+    selected_time: string;
+    start_times: moment.Moment[];
+    validation_errors?: string[];
+};
 
 const class_prefix = 'time-picker';
 
@@ -19,11 +31,11 @@ const TimePicker = observer(
         selected_time,
         start_times,
         validation_errors,
-    }) => {
+    }: TTimePickerProps) => {
         const { ui } = useStore();
         const { current_focus, setCurrentFocus } = ui;
         const [is_open, setIsOpen] = React.useState(false);
-        const [wrapper_ref, setWrapperRef] = React.useState(null);
+        const [wrapper_ref, setWrapperRef] = React.useState<HTMLDivElement | null>(null);
 
         React.useEffect(() => {
             document.addEventListener('mousedown', handleClickOutside);
@@ -34,22 +46,22 @@ const TimePicker = observer(
             setIsOpen(!is_open);
         };
 
-        const handleChange = arg => {
+        const handleChange = (arg: string | React.ChangeEvent<HTMLInputElement>) => {
             // To handle nativepicker;
-            const value = typeof arg === 'object' ? arg.target.selected_time : arg;
+            const value = typeof arg === 'object' ? arg.target.value : arg;
 
             if (value !== selected_time) {
                 onChange({ target: { name, value } });
             }
         };
 
-        const saveRef = node => {
+        const saveRef: React.RefCallback<HTMLDivElement> = node => {
             if (!node) return;
             setWrapperRef(node);
         };
 
-        const handleClickOutside = event => {
-            if (!wrapper_ref?.contains(event.target) && is_open) {
+        const handleClickOutside = (event: Event) => {
+            if (!wrapper_ref?.contains(event.target as Node) && is_open) {
                 setIsOpen(false);
             }
         };
@@ -63,8 +75,8 @@ const TimePicker = observer(
                         value={selected_time}
                         onChange={handleChange}
                         name={name}
-                        min={start_times[0]}
-                        max={end_times[end_times.length - 1]}
+                        min={start_times[0]?.format('HH:mm')}
+                        max={end_times[end_times.length - 1]?.format('HH:mm')}
                     />
                 ) : (
                     <React.Fragment>
@@ -109,17 +121,4 @@ const TimePicker = observer(
     }
 );
 
-TimePicker.propTypes = {
-    end_times: PropTypes.array,
-    is_clearable: PropTypes.bool,
-    is_nativepicker: PropTypes.bool,
-    name: PropTypes.string,
-    onChange: PropTypes.func,
-    padding: PropTypes.string,
-    placeholder: PropTypes.string,
-    selected_time: PropTypes.string,
-    start_times: PropTypes.array,
-    validation_errors: PropTypes.array,
-};
-
 export default TimePicker;
diff --git a/packages/trader/src/App/Components/Routes/binary-link.jsx b/packages/trader/src/App/Components/Routes/binary-link.jsx
index 43d66e6c5d4e..2a4434fd6300 100644
--- a/packages/trader/src/App/Components/Routes/binary-link.jsx
+++ b/packages/trader/src/App/Components/Routes/binary-link.jsx
@@ -7,7 +7,7 @@ import getRoutesConfig from '../../Constants/routes-config';
 // TODO: solve circular dependency problem
 // when binary link is imported into components present in routes config
 // or into their descendants
-const BinaryLink = ({ active_class, to, children, ...props }) => {
+const BinaryLink = ({ active_class = '', to, children, ...props }) => {
     const path = normalizePath(to);
     const route = findRouteByPath(path, getRoutesConfig());
 
diff --git a/packages/trader/src/App/Containers/populate-header.jsx b/packages/trader/src/App/Containers/populate-header.tsx
similarity index 100%
rename from packages/trader/src/App/Containers/populate-header.jsx
rename to packages/trader/src/App/Containers/populate-header.tsx
diff --git a/packages/trader/src/Modules/Contract/Components/Digits/digits.tsx b/packages/trader/src/Modules/Contract/Components/Digits/digits.tsx
index e963a30c2ee7..acf0cad7a96f 100644
--- a/packages/trader/src/Modules/Contract/Components/Digits/digits.tsx
+++ b/packages/trader/src/Modules/Contract/Components/Digits/digits.tsx
@@ -25,7 +25,6 @@ type TOnLastDigitSpot = {
     is_latest: boolean;
     is_won?: boolean;
 };
-
 type TDigitsWrapper = TDigits & {
     onChangeStatus?: (params: TOnChangeStatus) => void;
     onLastDigitSpot?: (params: TOnLastDigitSpot) => void;
diff --git a/packages/trader/src/Modules/SmartChart/Components/Markers/__tests__/accumulators-chart-elements.spec.tsx b/packages/trader/src/Modules/SmartChart/Components/Markers/__tests__/accumulators-chart-elements.spec.tsx
index 450d0b3d3652..517c9cf0dd4b 100644
--- a/packages/trader/src/Modules/SmartChart/Components/Markers/__tests__/accumulators-chart-elements.spec.tsx
+++ b/packages/trader/src/Modules/SmartChart/Components/Markers/__tests__/accumulators-chart-elements.spec.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import AccumulatorsChartElements from '../accumulators-chart-elements';
 
-jest.mock('App/Components/Elements/PositionsDrawer/helpers/positions-helper.js', () => ({
+jest.mock('App/Components/Elements/PositionsDrawer/helpers/positions-helper', () => ({
     filterByContractType: jest.fn(() => true),
 }));
 jest.mock('../accumulators-profit-loss-tooltip', () => jest.fn(() => <div>AccumulatorsProfitLossTooltip</div>));
diff --git a/packages/trader/src/Modules/SmartChart/Components/Markers/accumulators-chart-elements.tsx b/packages/trader/src/Modules/SmartChart/Components/Markers/accumulators-chart-elements.tsx
index 8ec25b78dd94..7b5ae0171dcd 100644
--- a/packages/trader/src/Modules/SmartChart/Components/Markers/accumulators-chart-elements.tsx
+++ b/packages/trader/src/Modules/SmartChart/Components/Markers/accumulators-chart-elements.tsx
@@ -1,4 +1,4 @@
-import { filterByContractType } from 'App/Components/Elements/PositionsDrawer/helpers/positions-helper.js';
+import { filterByContractType } from 'App/Components/Elements/PositionsDrawer/helpers/positions-helper';
 import React from 'react';
 import AccumulatorsProfitLossTooltip from './accumulators-profit-loss-tooltip';
 import { ProposalOpenContract } from '@deriv/api-types';
diff --git a/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile.jsx b/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile.tsx
similarity index 63%
rename from packages/trader/src/Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile.jsx
rename to packages/trader/src/Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile.tsx
index 40968d4136c5..e3e191c0e053 100644
--- a/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile.tsx
@@ -2,42 +2,71 @@ import React from 'react';
 import { Checkbox, RadioGroup, Dialog, Popover, Text } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 import { onToggleCancellation, onChangeCancellationDuration } from 'Stores/Modules/Trading/Helpers/multiplier';
-import Fieldset from 'App/Components/Form/fieldset.tsx';
+import Fieldset from 'App/Components/Form/fieldset';
 import { observer, useStore } from '@deriv/stores';
+import { TTradeStore } from 'Types';
 import { useTraderStore } from 'Stores/useTraderStores';
 
-const DealCancellationWarningDialog = observer(({ is_visible, onConfirm, onCancel }) => {
-    const { ui } = useStore();
-    const { disableApp, enableApp, should_show_cancellation_warning, toggleCancellationWarning } = ui;
-    return (
-        <Dialog
-            className='trade-params__multiplier-deal-cancellation-dialog'
-            title={localize('About deal cancellation')}
-            confirm_button_text={localize('Got it')}
-            cancel_button_text={localize('Cancel')}
-            onConfirm={onConfirm}
-            onCancel={onCancel}
-            is_mobile_full_width={false}
-            is_visible={is_visible}
-            disableApp={disableApp}
-            enableApp={enableApp}
-            portal_element_id='modal_root'
+type TDealCancellationWarningDialog = {
+    is_visible: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+};
+
+type TCancelDeal = {
+    has_cancellation: boolean;
+    has_take_profit: boolean;
+    has_stop_loss: boolean;
+    onChangeMultiple: (
+        props: Partial<
+            Pick<
+                TTradeStore,
+                | 'cancellation_duration'
+                | 'has_cancellation'
+                | 'has_stop_loss'
+                | 'has_take_profit'
+                | 'stop_loss'
+                | 'take_profit'
+            >
         >
-            <Text size='xxxs' color='general'>
-                <Localize i18n_default_text='Take profit and/or stop loss are not available while deal cancellation is active.' />
-            </Text>
-            <Checkbox
-                defaultChecked={!should_show_cancellation_warning}
-                onChange={() => toggleCancellationWarning()}
-                name={'should_show_cancellation_warning'}
-                label={localize("Don't show this again")}
-            />
-        </Dialog>
-    );
-});
+    ) => void;
+    cancellation_duration: string;
+};
+
+const DealCancellationWarningDialog = observer(
+    ({ is_visible, onConfirm, onCancel }: TDealCancellationWarningDialog) => {
+        const { ui } = useStore();
+        const { disableApp, enableApp, should_show_cancellation_warning, toggleCancellationWarning } = ui;
+        return (
+            <Dialog
+                className='trade-params__multiplier-deal-cancellation-dialog'
+                title={localize('About deal cancellation')}
+                confirm_button_text={localize('Got it')}
+                cancel_button_text={localize('Cancel')}
+                onConfirm={onConfirm}
+                onCancel={onCancel}
+                is_mobile_full_width={false}
+                is_visible={is_visible}
+                disableApp={disableApp}
+                enableApp={enableApp}
+                portal_element_id='modal_root'
+            >
+                <Text size='xxxs' color='general'>
+                    <Localize i18n_default_text='Take profit and/or stop loss are not available while deal cancellation is active.' />
+                </Text>
+                <Checkbox
+                    defaultChecked={!should_show_cancellation_warning}
+                    onChange={() => toggleCancellationWarning()}
+                    name='should_show_cancellation_warning'
+                    label={localize("Don't show this again")}
+                />
+            </Dialog>
+        );
+    }
+);
 
 const CancelDeal = observer(
-    ({ has_cancellation, has_take_profit, has_stop_loss, onChangeMultiple, cancellation_duration }) => {
+    ({ has_cancellation, has_take_profit, has_stop_loss, onChangeMultiple, cancellation_duration }: TCancelDeal) => {
         const { ui } = useStore();
         const { should_show_cancellation_warning } = ui;
         const { cancellation_range_list } = useTraderStore();
@@ -78,7 +107,7 @@ const CancelDeal = observer(
                             id='dt_multiplier-stake__tooltip'
                             is_bubble_hover_enabled
                             classNameBubble='trade-container__deal-cancellation-popover'
-                            zIndex={9999}
+                            zIndex='9999'
                             message={localize(
                                 'Cancel your trade anytime within a chosen time-frame. Triggered automatically if your trade reaches the stop out level within the chosen time-frame.'
                             )}
diff --git a/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/risk-management-info.jsx b/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/risk-management-info.tsx
similarity index 98%
rename from packages/trader/src/Modules/Trading/Components/Elements/Multiplier/risk-management-info.jsx
rename to packages/trader/src/Modules/Trading/Components/Elements/Multiplier/risk-management-info.tsx
index 08befd4c6659..d9e522fb057e 100644
--- a/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/risk-management-info.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/risk-management-info.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Money } from '@deriv/components';
 import { localize } from '@deriv/translations';
-import RiskManagementDialog from 'Modules/Trading/Containers/Multiplier/risk-management-dialog.jsx';
+import RiskManagementDialog from 'Modules/Trading/Containers/Multiplier/risk-management-dialog';
 import { observer } from '@deriv/stores';
 import { useTraderStore } from 'Stores/useTraderStores';
 
diff --git a/packages/trader/src/Modules/Trading/Components/Form/DatePicker/index.js b/packages/trader/src/Modules/Trading/Components/Form/DatePicker/index.js
deleted file mode 100644
index 9568f8361b3f..000000000000
--- a/packages/trader/src/Modules/Trading/Components/Form/DatePicker/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import TradingDatePicker from './trading-date-picker.jsx';
-
-export default TradingDatePicker;
diff --git a/packages/trader/src/Modules/Trading/Components/Form/DatePicker/index.ts b/packages/trader/src/Modules/Trading/Components/Form/DatePicker/index.ts
new file mode 100644
index 000000000000..96d6e375f1b7
--- /dev/null
+++ b/packages/trader/src/Modules/Trading/Components/Form/DatePicker/index.ts
@@ -0,0 +1,3 @@
+import TradingDatePicker from './trading-date-picker';
+
+export default TradingDatePicker;
diff --git a/packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.jsx b/packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.tsx
similarity index 77%
rename from packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.jsx
rename to packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.tsx
index 2d55815ca80b..45d50054710f 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
+import moment from 'moment';
 import React from 'react';
 import { DatePicker, Tooltip } from '@deriv/components';
 import { isTimeValid, setTime, toMoment, useIsMounted, hasIntradayDurationUnit } from '@deriv/shared';
@@ -8,7 +8,19 @@ import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type';
 import { observer, useStore } from '@deriv/stores';
 import { useTraderStore } from 'Stores/useTraderStores';
 
-const TradingDatePicker = observer(({ id, is_24_hours_contract, mode, name }) => {
+type TDatePickerOnChange = React.ComponentProps<typeof DatePicker>['onChange'];
+type TMarketEvent = {
+    dates: string[];
+    descrip: string;
+};
+type TTradingDatePickerProps = {
+    id: string;
+    is_24_hours_contract?: boolean;
+    mode?: string;
+    name: string;
+};
+
+const TradingDatePicker = observer(({ id, is_24_hours_contract, mode, name }: TTradingDatePickerProps) => {
     const { common } = useStore();
     const { server_time } = common;
     const {
@@ -25,14 +37,15 @@ const TradingDatePicker = observer(({ id, is_24_hours_contract, mode, name }) =>
 
     const isMounted = useIsMounted();
 
-    const [disabled_days, setDisabledDays] = React.useState([]);
-    const [market_events, setMarketEvents] = React.useState([]);
+    const [disabled_days, setDisabledDays] = React.useState<number[]>([]);
+    const [market_events, setMarketEvents] = React.useState<TMarketEvent[]>([]);
     const [duration, setDuration] = React.useState(current_duration);
-    const [selected_date, setSelectedDate] = React.useState();
+    const [selected_date, setSelectedDate] = React.useState<moment.Moment>();
 
     React.useEffect(() => {
         onChangeCalendarMonth();
-    }, [onChangeCalendarMonth]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
     React.useEffect(() => {
         if (duration !== current_duration) {
@@ -50,7 +63,7 @@ const TradingDatePicker = observer(({ id, is_24_hours_contract, mode, name }) =>
     const getMomentContractStartDateTime = () => {
         return setTime(
             toMoment(getMinDuration()),
-            isTimeValid(start_time) ? start_time : server_time.format('HH:mm:ss')
+            isTimeValid(start_time ?? '') ? start_time : server_time?.format('HH:mm:ss') ?? ''
         );
     };
 
@@ -66,17 +79,16 @@ const TradingDatePicker = observer(({ id, is_24_hours_contract, mode, name }) =>
     };
 
     const getMaxDateDuration = () => {
+        const max_daily_duration = start_date ? 24 * 3600 : getMaxDailyDuration();
         return is_24_hours_contract
-            ? getMomentContractStartDateTime()
-                  .clone()
-                  .add(start_date ? 24 * 3600 : getMaxDailyDuration(), 'second')
+            ? getMomentContractStartDateTime().clone().add(max_daily_duration, 'second')
             : getMomentContractStartDateTime().clone().add(getMaxDailyDuration(), 'second');
     };
 
     const hasRangeSelection = () => mode === 'duration';
 
     const getFooter = () => {
-        if (!hasRangeSelection()) return null;
+        if (!hasRangeSelection()) return '';
 
         if (!duration) return localize('Minimum duration is 1 day');
         if (+duration === 1) return localize('Duration: {{duration}} day', { duration });
@@ -89,19 +101,19 @@ const TradingDatePicker = observer(({ id, is_24_hours_contract, mode, name }) =>
             : selected_date || getMinDateExpiry();
     };
 
-    const onChangeDate = e => {
+    const onChangeDate: TDatePickerOnChange = e => {
         if (isMounted()) {
             if (hasRangeSelection()) {
-                setDuration(e.duration);
-            } else if (e.target.value) {
-                setSelectedDate(toMoment(e.target.value));
+                setDuration(Number(e.duration));
+            } else if (e.target?.value) {
+                setSelectedDate(toMoment(e.target?.value));
             }
         }
 
         if (typeof onChange === 'function' && e.target) {
             onChange({
                 target: {
-                    name: e.target.name,
+                    name: e.target.name || '',
                     value: hasRangeSelection() ? e.target.value : toMoment(e.target.value).format('YYYY-MM-DD'),
                 },
             });
@@ -109,11 +121,12 @@ const TradingDatePicker = observer(({ id, is_24_hours_contract, mode, name }) =>
     };
 
     const onChangeCalendarMonth = React.useCallback(
+        // Do not move this callback up. It will cause infinite loop.
         async (e = toMoment().format('YYYY-MM-DD')) => {
-            const new_market_events = [];
-            let new_disabled_days = [];
-
+            const new_market_events: TMarketEvent[] = [];
+            let new_disabled_days: number[] = [];
             const events = await ContractType.getTradingEvents(e, symbol);
+            // @ts-expect-error TODO: check if TS error is gone after contract-type is converted to TS
             events.forEach(evt => {
                 const dates = evt.dates.split(', '); // convert dates str into array
                 const idx = dates.indexOf('Fridays');
@@ -167,18 +180,11 @@ const TradingDatePicker = observer(({ id, is_24_hours_contract, mode, name }) =>
                     disabled_days={disabled_days}
                     keep_open
                     readOnly={!hasRangeSelection()}
-                    value={getDatepickerValue()}
+                    value={getDatepickerValue() as string}
                 />
             </Tooltip>
         </div>
     );
 });
 
-TradingDatePicker.propTypes = {
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    is_24_hours_contract: PropTypes.bool,
-    mode: PropTypes.string,
-    name: PropTypes.string,
-};
-
 export default TradingDatePicker;
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TimePicker/index.js b/packages/trader/src/Modules/Trading/Components/Form/TimePicker/index.js
deleted file mode 100644
index 47ae05b98d23..000000000000
--- a/packages/trader/src/Modules/Trading/Components/Form/TimePicker/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import TradingTimePicker from './trading-time-picker.jsx';
-
-export default TradingTimePicker;
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TimePicker/index.ts b/packages/trader/src/Modules/Trading/Components/Form/TimePicker/index.ts
new file mode 100644
index 000000000000..78ac285aad36
--- /dev/null
+++ b/packages/trader/src/Modules/Trading/Components/Form/TimePicker/index.ts
@@ -0,0 +1,3 @@
+import TradingTimePicker from './trading-time-picker';
+
+export default TradingTimePicker;
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TimePicker/trading-time-picker.jsx b/packages/trader/src/Modules/Trading/Components/Form/TimePicker/trading-time-picker.tsx
similarity index 100%
rename from packages/trader/src/Modules/Trading/Components/Form/TimePicker/trading-time-picker.jsx
rename to packages/trader/src/Modules/Trading/Components/Form/TimePicker/trading-time-picker.tsx
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/__tests__/duration-range-text.spec.tsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/__tests__/duration-range-text.spec.tsx
new file mode 100644
index 000000000000..13ea85a7c844
--- /dev/null
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/__tests__/duration-range-text.spec.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import DurationRangeText from '../duration-range-text';
+
+const mocked_props = {
+    min: '1',
+    max: '1440',
+    duration_unit_text: 'minutes',
+};
+
+describe('<DurationRangeText />', () => {
+    it('should render component with proper text', () => {
+        render(<DurationRangeText {...mocked_props} />);
+
+        expect(screen.getByText(/Range: 1 - 1,440 minutes/i)).toBeInTheDocument();
+    });
+});
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/__tests__/expiry-text.spec.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/__tests__/expiry-text.spec.jsx
new file mode 100644
index 000000000000..7b838a3df45b
--- /dev/null
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/__tests__/expiry-text.spec.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ExpiryText from '../expiry-text';
+
+const mocked_props = {
+    expiry_epoch: 1695427199,
+    has_error: false,
+};
+
+describe('<DurationRangeText />', () => {
+    it('should render component with proper formatted date if has_error === false and fixed_date was not passed', () => {
+        render(<ExpiryText {...mocked_props} />);
+
+        expect(screen.getByText(/Expiry: 22 Sep 2023/i)).toBeInTheDocument();
+    });
+
+    it('should not render date if has_error === true', () => {
+        render(<ExpiryText {...mocked_props} has_error />);
+
+        expect(screen.queryByText(/Expiry: 22 Sep 2023/i)).not.toBeInTheDocument();
+    });
+
+    it('should render fixed date if it was passed', () => {
+        render(<ExpiryText {...mocked_props} has_error fixed_date='20 September' />);
+
+        expect(screen.getByText(/Expiry: 20 September/i)).toBeInTheDocument();
+    });
+});
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.jsx
index 2c126fce7117..5dec629d54c9 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.jsx
@@ -3,11 +3,12 @@ import { PropTypes as MobxPropTypes } from 'mobx-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Dropdown, ButtonToggle, InputField } from '@deriv/components';
-import { toMoment, hasIntradayDurationUnit } from '@deriv/shared';
+import { getDurationMinMaxValues, getUnitMap, hasIntradayDurationUnit, toMoment } from '@deriv/shared';
 import RangeSlider from 'App/Components/Form/RangeSlider';
 import TradingDatePicker from '../../DatePicker';
 import TradingTimePicker from '../../TimePicker';
 import ExpiryText from './expiry-text.jsx';
+import DurationRangeText from './duration-range-text';
 import { observer, useStore } from '@deriv/stores';
 import { useTraderStore } from 'Stores/useTraderStores';
 
@@ -32,8 +33,9 @@ const AdvancedDuration = observer(
     }) => {
         const { ui } = useStore();
         const { current_focus, setCurrentFocus } = ui;
-        const { contract_expiry_type, validation_errors } = useTraderStore();
+        const { contract_expiry_type, duration_min_max, is_vanilla, validation_errors } = useTraderStore();
 
+        const [min, max] = getDurationMinMaxValues(duration_min_max, contract_expiry_type, advanced_duration_unit);
         let is_24_hours_contract = false;
 
         if (expiry_type === 'endtime') {
@@ -56,6 +58,9 @@ const AdvancedDuration = observer(
 
         const has_error = !!validation_errors?.duration?.length;
 
+        const { name_plural, name } = getUnitMap()[advanced_duration_unit];
+        const duration_unit_text = name_plural ?? name;
+
         return (
             <>
                 {expiry_list.length > 1 && (
@@ -96,9 +101,6 @@ const AdvancedDuration = observer(
                                     is_24_hours_contract={is_24_hours_contract}
                                 />
                             )}
-                            {advanced_duration_unit === 'd' && (
-                                <ExpiryText expiry_epoch={expiry_epoch} has_error={has_error} />
-                            )}
                             {advanced_duration_unit !== 't' && advanced_duration_unit !== 'd' && (
                                 <InputField
                                     id='dt_advanced_duration_input'
@@ -113,6 +115,12 @@ const AdvancedDuration = observer(
                                     {...shared_input_props}
                                 />
                             )}
+                            {is_vanilla && (
+                                <DurationRangeText min={min} max={max} duration_unit_text={duration_unit_text} />
+                            )}
+                            {advanced_duration_unit === 'd' && (
+                                <ExpiryText expiry_epoch={expiry_epoch} has_error={has_error} />
+                            )}
                         </div>
                     </>
                 ) : (
@@ -122,7 +130,6 @@ const AdvancedDuration = observer(
                                 id='dt_advanced_duration_datepicker'
                                 name='expiry_date'
                                 is_24_hours_contract={is_24_hours_contract}
-                                value={expiry_date}
                             />
                             {
                                 is_24_hours_contract && <TradingTimePicker />
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-mobile.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-mobile.jsx
index f7ae5abb1536..65d2405e5f06 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-mobile.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-mobile.jsx
@@ -1,7 +1,10 @@
 import React from 'react';
-import { Tabs, TickPicker, Numpad, RelativeDatepicker, Text } from '@deriv/components';
-import { isEmptyObject, addComma, getDurationMinMaxValues } from '@deriv/shared';
+import classNames from 'classnames';
+import { Tabs, TickPicker, Numpad, RelativeDatepicker } from '@deriv/components';
+import { isEmptyObject, addComma, getDurationMinMaxValues, getUnitMap } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
+import ExpiryText from './expiry-text.jsx';
+import DurationRangeText from './duration-range-text';
 import { observer, useStore } from '@deriv/stores';
 import { useTraderStore } from 'Stores/useTraderStores';
 import moment from 'moment';
@@ -112,6 +115,7 @@ const Numbers = observer(
             duration_unit: trade_duration_unit,
             basis: trade_basis,
             amount: trade_amount,
+            is_vanilla,
             onChangeMultiple,
         } = useTraderStore();
         const { value: duration_unit } = duration_unit_option;
@@ -187,18 +191,21 @@ const Numbers = observer(
             validateDuration(num);
         };
 
+        const fixed_date = !has_error ? setExpiryDate(expiry_epoch, duration_values?.d_duration) : '';
+
+        const { name_plural, name } = getUnitMap()[duration_unit];
+        const duration_unit_text = name_plural ?? name;
+
         return (
             <div className='trade-params__amount-keypad'>
-                {show_expiry && (
-                    <Text as='div' size='xxxs' line_height='s' className='expiry-text-container--mobile'>
-                        <Localize
-                            i18n_default_text='Expiry: {{date}}'
-                            values={{
-                                date: !has_error ? setExpiryDate(expiry_epoch, duration_values?.d_duration) : '',
-                            }}
-                        />
-                    </Text>
-                )}
+                <div
+                    className={classNames('text-container', {
+                        'text-container--vanilla': is_vanilla,
+                    })}
+                >
+                    {is_vanilla && <DurationRangeText min={min} max={max} duration_unit_text={duration_unit_text} />}
+                    {show_expiry && <ExpiryText fixed_date={fixed_date} />}
+                </div>
                 <Numpad
                     value={selected_duration}
                     onSubmit={setDuration}
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-range-text.tsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-range-text.tsx
new file mode 100644
index 000000000000..c94ad35b38fe
--- /dev/null
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-range-text.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Text } from '@deriv/components';
+import { addComma } from '@deriv/shared';
+import { Localize } from '@deriv/translations';
+
+type TDurationRangeText = {
+    min: string;
+    max: string;
+    duration_unit_text: string;
+};
+
+const DurationRangeText = ({ min, max, duration_unit_text }: TDurationRangeText) => (
+    <Text as='div' size='xxxs' line_height='s' className='range-text-container'>
+        <Localize
+            i18n_default_text='Range: {{min}} - {{max}} {{duration_unit_text}} '
+            values={{
+                min: addComma(min),
+                max: addComma(max),
+                duration_unit_text,
+            }}
+        />
+    </Text>
+);
+
+export default DurationRangeText;
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/expiry-text.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/expiry-text.jsx
index 82200999a6eb..ba94abb09533 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/expiry-text.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/expiry-text.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Text } from '@deriv/components';
 import { Localize } from '@deriv/translations';
 
-const ExpiryText = ({ expiry_epoch, has_error }) => {
+const ExpiryText = ({ expiry_epoch, has_error, fixed_date }) => {
     const formatted_date =
         expiry_epoch && !has_error
             ? new Date(expiry_epoch * 1000)
@@ -14,7 +14,7 @@ const ExpiryText = ({ expiry_epoch, has_error }) => {
 
     return (
         <Text as='div' size='xxxs' line_height='s' className='expiry-text-container'>
-            <Localize i18n_default_text='Expiry: {{date}}' values={{ date: formatted_date }} />
+            <Localize i18n_default_text='Expiry: {{date}}' values={{ date: fixed_date || formatted_date }} />
         </Text>
     );
 };
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/info.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/info.tsx
similarity index 71%
rename from packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/info.jsx
rename to packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/info.tsx
index 3042c960b29c..29a4a14dd5c6 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/info.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/info.tsx
@@ -1,6 +1,5 @@
 import classNames from 'classnames';
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Popover, Money, Text } from '@deriv/components';
 import { Localize } from '@deriv/translations';
 import { observer } from '@deriv/stores';
@@ -9,8 +8,31 @@ import { useTraderStore } from 'Stores/useTraderStores';
 const commission_tooltip_margin = 30;
 const stop_out_tooltip_margin = 160;
 
+type TMultipliersInfo = {
+    amount?: number | string;
+    className: string;
+    commission_text_size?: string;
+    commission?: number | null;
+    is_tooltip_relative?: boolean;
+    should_show_tooltip?: boolean;
+    stop_out_text_size?: string;
+    stop_out?: number | null;
+    multiplier?: number;
+};
+
+type TPopoverPosition = React.ComponentProps<typeof Popover>['alignment'];
+
+type TTooltip_params = { alignment: TPopoverPosition; relative_render?: boolean; margin?: number; zIndex?: string };
+
 const MultipliersInfo = observer(
-    ({ className, commission_text_size, stop_out_text_size, is_tooltip_relative, should_show_tooltip, ...props }) => {
+    ({
+        className,
+        commission_text_size,
+        stop_out_text_size,
+        is_tooltip_relative,
+        should_show_tooltip,
+        ...props
+    }: TMultipliersInfo) => {
         const trade = useTraderStore();
         const { currency, has_stop_loss } = trade;
         const multiplier = props.multiplier ?? (trade.multiplier || 0);
@@ -54,7 +76,7 @@ const MultipliersInfo = observer(
             <Localize
                 i18n_default_text='<0>{{commission_percentage}}%</0> of (<1/> * {{multiplier}})'
                 values={{
-                    commission_percentage: Number((commission * 100) / (multiplier * amount)).toFixed(4),
+                    commission_percentage: ((Number(commission) * 100) / (multiplier * Number(amount))).toFixed(4),
                     multiplier,
                 }}
                 components={[
@@ -68,19 +90,25 @@ const MultipliersInfo = observer(
             <Localize
                 i18n_default_text='When your current loss equals or exceeds {{stop_out_percentage}}% of your stake, your contract will be closed at the nearest available asset price.'
                 values={{
-                    stop_out_percentage: Math.floor(Math.abs(Number((stop_out * 100) / amount))),
+                    stop_out_percentage: Math.floor(Math.abs((stop_out * 100) / Number(amount))),
                 }}
             />
         );
 
-        const getInfo = ({ text, message, margin }) => {
+        const getInfo = ({
+            text,
+            message,
+            margin,
+        }: {
+            text: React.ReactNode;
+            message: React.ReactNode;
+            margin: number;
+        }) => {
+            const tooltip_params: TTooltip_params = is_tooltip_relative
+                ? { alignment: 'left', relative_render: true, margin }
+                : { alignment: 'top', zIndex: '9999' };
             return should_show_tooltip ? (
-                <Popover
-                    message={message}
-                    {...(is_tooltip_relative
-                        ? { alignment: 'left', relative_render: true, margin }
-                        : { alignment: 'top', zIndex: 9999 })}
-                >
+                <Popover message={message} {...tooltip_params}>
                     {text}
                 </Popover>
             ) : (
@@ -110,12 +138,4 @@ const MultipliersInfo = observer(
     }
 );
 
-MultipliersInfo.propTypes = {
-    className: PropTypes.string,
-    commission_text_size: PropTypes.string,
-    is_tooltip_relative: PropTypes.bool,
-    should_show_tooltip: PropTypes.bool,
-    stop_out_text_size: PropTypes.string,
-};
-
 export default MultipliersInfo;
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/widgets.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/widgets.jsx
index 9aec863c016d..d9d03da39f20 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/widgets.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/widgets.jsx
@@ -3,11 +3,11 @@ import classNames from 'classnames';
 import { Money, Text, Popover } from '@deriv/components';
 import { useTraderStore } from 'Stores/useTraderStores';
 import { observer } from '@deriv/stores';
-import MultiplierAmountModal from 'Modules/Trading/Containers/Multiplier/multiplier-amount-modal.jsx';
+import MultiplierAmountModal from 'Modules/Trading/Containers/Multiplier/multiplier-amount-modal';
 import RadioGroupOptionsModal from 'Modules/Trading/Containers/radio-group-options-modal';
 import MultipliersExpiration from 'Modules/Trading/Components/Form/TradeParams/Multiplier/expiration.jsx';
 import MultipliersExpirationModal from 'Modules/Trading/Components/Form/TradeParams/Multiplier/expiration-modal.jsx';
-import MultipliersInfo from 'Modules/Trading/Components/Form/TradeParams/Multiplier/info.jsx';
+import MultipliersInfo from 'Modules/Trading/Components/Form/TradeParams/Multiplier/info';
 import { localize, Localize } from '@deriv/translations';
 import { getGrowthRatePercentage, getTickSizeBarrierPercentage } from '@deriv/shared';
 
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount-mobile.tsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount-mobile.tsx
index b968f272ee63..6a5e8b2cc6df 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount-mobile.tsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount-mobile.tsx
@@ -7,22 +7,25 @@ import { Money, Numpad, Tabs } from '@deriv/components';
 import { getDecimalPlaces, isEmptyObject } from '@deriv/shared';
 import MinMaxStakeInfo from './min-max-stake-info';
 
-type TAmountMobile = React.ComponentProps<typeof Basis> & {
+type TAmountMobile = Pick<
+    React.ComponentProps<typeof Basis>,
+    'toggleModal' | 'duration_value' | 'duration_unit' | 'has_duration_error' | 'setAmountError' | 'setSelectedAmount'
+> & {
     amount_tab_idx?: number;
-    setAmountTabIdx: React.ComponentProps<typeof Tabs>['onTabItemClick'];
+    setAmountTabIdx?: React.ComponentProps<typeof Tabs>['onTabItemClick'];
     stake_value: string | number;
-    payout_value: string | number;
+    payout_value?: string | number;
 };
 
 type TBasis = {
     basis: string;
-    duration_unit: string;
-    duration_value: number;
+    duration_unit?: string;
+    duration_value?: number;
     toggleModal: () => void;
-    has_duration_error: boolean;
-    selected_basis: string | number;
+    has_duration_error?: boolean;
+    selected_basis?: string | number;
     setSelectedAmount: (basis: string, num: string | number) => void;
-    setAmountError: (has_error: boolean) => void;
+    setAmountError?: (has_error: boolean) => void;
 };
 
 const Basis = observer(
@@ -44,11 +47,11 @@ const Basis = observer(
             is_turbos,
             is_vanilla,
             onChangeMultiple,
-            stake_boundary,
             amount: trade_amount,
             basis: trade_basis,
             duration_unit: trade_duration_unit,
             duration: trade_duration,
+            stake_boundary,
         } = useTraderStore();
         const { min_stake, max_stake } = stake_boundary[contract_type.toUpperCase()] || {};
         const user_currency_decimal_places = getDecimalPlaces(currency);
@@ -89,18 +92,18 @@ const Basis = observer(
 
             if (value.toString() === '0.' || selected_value === 0) {
                 addToast({ key: 'amount_error', content: localized_message, type: 'error', timeout: 2000 });
-                setAmountError(true);
+                setAmountError?.(true);
                 return 'error';
             } else if (isNaN(selected_value) || selected_value < min_amount || value.toString().length < 1) {
                 addToast({ key: 'amount_error', content: localized_message, type: 'error', timeout: 2000 });
-                setAmountError(true);
+                setAmountError?.(true);
                 return false;
             } else if (selected_value < Number(min_stake)) {
                 addToast({ key: 'amount_error', content: min_max_stake_message, type: 'error', timeout: 2000 });
-                setAmountError(true);
+                setAmountError?.(true);
                 return 'error';
             }
-            setAmountError(false);
+            setAmountError?.(false);
             return true;
         };
 
@@ -116,7 +119,7 @@ const Basis = observer(
                         })}
                     >
                         <Numpad
-                            value={selected_basis}
+                            value={selected_basis || ''}
                             format={formatAmount}
                             onSubmit={setBasisAndAmount}
                             currency={currency}
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount.tsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount.tsx
index c33cf5e80ab1..ff841b941417 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount.tsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount.tsx
@@ -4,7 +4,7 @@ import { Localize, localize } from '@deriv/translations';
 import AllowEquals from './allow-equals';
 import Fieldset from 'App/Components/Form/fieldset';
 import Multiplier from './Multiplier/multiplier.jsx';
-import MultipliersInfo from './Multiplier/info.jsx';
+import MultipliersInfo from './Multiplier/info';
 import MinMaxStakeInfo from './min-max-stake-info';
 import React from 'react';
 import classNames from 'classnames';
@@ -17,7 +17,7 @@ type TInput = {
     current_focus: string | null;
     error_messages?: string[];
     is_disabled?: boolean;
-    is_single_currency: boolean;
+    is_single_currency?: boolean;
     onChange: (e: { target: { name: string; value: number | string } }) => void;
     setCurrentFocus: (name: string | null) => void;
 };
@@ -186,7 +186,6 @@ const Amount = observer(({ is_minimized = false }: { is_minimized?: boolean }) =
                 <React.Fragment>
                     <Multiplier />
                     <MultipliersInfo
-                        /*// @ts-expect-error observer wrapped component props cant be detected until its ts-migrated */
                         className='trade-container__multipliers-trade-info'
                         should_show_tooltip
                         is_tooltip_relative
diff --git a/packages/trader/src/Modules/Trading/Components/Form/screen-small.tsx b/packages/trader/src/Modules/Trading/Components/Form/screen-small.tsx
index aef43f88b21b..7b74cdf82420 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/screen-small.tsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/screen-small.tsx
@@ -17,7 +17,7 @@ import { BarrierMobile, LastDigitMobile } from 'Modules/Trading/Containers/trade
 import ContractType from 'Modules/Trading/Containers/contract-type';
 import MobileWidget from 'Modules/Trading/Components/Elements/mobile-widget.jsx';
 import Purchase from 'Modules/Trading/Containers/purchase';
-import RiskManagementInfo from 'Modules/Trading/Components/Elements/Multiplier/risk-management-info.jsx';
+import RiskManagementInfo from 'Modules/Trading/Components/Elements/Multiplier/risk-management-info';
 import TakeProfit from 'Modules/Trading/Components/Form/TradeParams/Multiplier/take-profit.jsx';
 import 'Sass/app/_common/mobile-widget.scss';
 import classNames from 'classnames';
diff --git a/packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-amount-modal.jsx b/packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-amount-modal.tsx
similarity index 75%
rename from packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-amount-modal.jsx
rename to packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-amount-modal.tsx
index ff8a61763e63..4fa8a039600c 100644
--- a/packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-amount-modal.jsx
+++ b/packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-amount-modal.tsx
@@ -4,27 +4,29 @@ import { useIsMounted, WS } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { requestPreviewProposal } from 'Stores/Modules/Trading/Helpers/preview-proposal';
 import AmountMobile from 'Modules/Trading/Components/Form/TradeParams/amount-mobile';
-import MultipliersInfo from 'Modules/Trading/Components/Form/TradeParams/Multiplier/info.jsx';
-import { observer, useStore } from '@deriv/stores';
+import MultipliersInfo from 'Modules/Trading/Components/Form/TradeParams/Multiplier/info';
+import { observer } from '@deriv/stores';
 import { useTraderStore } from 'Stores/useTraderStores';
+import { TTradeStore } from 'Types';
 
-const MultiplierAmountModal = observer(({ is_open, toggleModal }) => {
+type TToggleModal = () => void;
+type TMultiplierAmountModal = {
+    is_open: boolean;
+    toggleModal: TToggleModal;
+};
+
+const MultiplierAmountModal = ({ is_open, toggleModal }: TMultiplierAmountModal) => {
     // Fix to prevent iOS from zooming in erratically on quick taps
     usePreventIOSZoom();
-    const {
-        ui: { enableApp, disableApp },
-    } = useStore();
 
     return (
         <React.Fragment>
             <Modal
                 id='dt_trade_parameters_mobile'
                 className='trade-params'
-                enableApp={enableApp}
                 is_open={is_open}
                 is_title_centered
                 should_header_stick_body={false}
-                disableApp={disableApp}
                 toggleModal={toggleModal}
                 height='auto'
                 width='calc(100vw - 32px)'
@@ -36,24 +38,24 @@ const MultiplierAmountModal = observer(({ is_open, toggleModal }) => {
             </Modal>
         </React.Fragment>
     );
-});
+};
 
 export default MultiplierAmountModal;
 
-const TradeParamsMobile = observer(({ toggleModal }) => {
+const TradeParamsMobile = observer(({ toggleModal }: { toggleModal: TToggleModal }) => {
     const trade_store = useTraderStore();
-    const { amount, currency, trade_stop_out } = trade_store;
+    const { amount, currency } = trade_store;
 
-    const [stake_value, setStakeValue] = React.useState(amount);
-    const [commission, setCommission] = React.useState(null);
-    const [stop_out, setStopOut] = React.useState(null);
-    const stake_ref = React.useRef(amount);
+    const [stake_value, setStakeValue] = React.useState<string | number>(amount);
+    const [commission, setCommission] = React.useState<number | null>();
+    const [stop_out, setStopOut] = React.useState<number | null>();
+    const stake_ref = React.useRef<string | number>(amount);
     const isMounted = useIsMounted();
 
     React.useEffect(() => {
         if (stake_value === amount) return undefined;
 
-        const onProposalResponse = response => {
+        const onProposalResponse: TTradeStore['onProposalResponse'] = response => {
             const { proposal, echo_req, subscription } = response;
             if (
                 isMounted() &&
@@ -62,7 +64,7 @@ const TradeParamsMobile = observer(({ toggleModal }) => {
                 Number(echo_req.amount) === Number(stake_ref.current)
             ) {
                 setCommission(proposal.commission);
-                setStopOut(proposal.limit_order?.stop_out?.order_amount);
+                proposal.limit_order?.stop_out && setStopOut(proposal.limit_order.stop_out?.order_amount);
             } else if (subscription?.id) {
                 WS.forget(subscription.id);
             }
@@ -76,7 +78,7 @@ const TradeParamsMobile = observer(({ toggleModal }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [stake_value]);
 
-    const setSelectedAmount = (basis, stake) => {
+    const setSelectedAmount = (basis: string | undefined, stake: number | string) => {
         setStakeValue(stake);
         stake_ref.current = stake;
     };
@@ -89,14 +91,12 @@ const TradeParamsMobile = observer(({ toggleModal }) => {
                     classNameBubble='dc-popover__trade-params'
                     icon='info'
                     id='dt_multiplier-stake__tooltip'
-                    zIndex={9999}
+                    zIndex='9999'
                     is_bubble_hover_enabled
                     message={
                         <Localize
                             i18n_default_text='To ensure your loss does not exceed your stake, your contract will be closed automatically when your loss equals to <0/>.'
-                            components={[
-                                <Money key={0} amount={stop_out || trade_stop_out} currency={currency} show_currency />,
-                            ]}
+                            components={[<Money key={0} amount={stop_out || ''} currency={currency} show_currency />]}
                         />
                     }
                 />
@@ -105,7 +105,6 @@ const TradeParamsMobile = observer(({ toggleModal }) => {
                 toggleModal={toggleModal}
                 amount_tab_idx={0}
                 setSelectedAmount={setSelectedAmount}
-                setAmountError={() => {}}
                 stake_value={stake_value}
             />
             <MultipliersInfo
diff --git a/packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-options.jsx b/packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-options.tsx
similarity index 79%
rename from packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-options.jsx
rename to packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-options.tsx
index dc9b93addaa7..89cdf0d627eb 100644
--- a/packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-options.jsx
+++ b/packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-options.tsx
@@ -1,26 +1,31 @@
 import React from 'react';
-import MultipliersInfo from 'Modules/Trading/Components/Form/TradeParams/Multiplier/info.jsx';
+import MultipliersInfo from 'Modules/Trading/Components/Form/TradeParams/Multiplier/info';
 import RadioGroupWithInfoMobile from 'Modules/Trading/Components/Form/RadioGroupWithInfoMobile';
 import { requestPreviewProposal } from 'Stores/Modules/Trading/Helpers/preview-proposal';
 import { localize } from '@deriv/translations';
 import { observer } from '@deriv/stores';
 import { useTraderStore } from 'Stores/useTraderStores';
 import { useIsMounted, WS } from '@deriv/shared';
+import { TTradeStore } from 'Types';
 
-const MultiplierOptions = observer(({ toggleModal }) => {
+type TMultiplierOptions = {
+    toggleModal: () => void;
+};
+
+const MultiplierOptions = observer(({ toggleModal }: TMultiplierOptions) => {
     const trade_store = useTraderStore();
     const { amount, multiplier, multiplier_range_list, onChange } = trade_store;
-    const [commission, setCommission] = React.useState(null);
-    const [stop_out, setStopOut] = React.useState(null);
+    const [commission, setCommission] = React.useState<number | null>();
+    const [stop_out, setStopOut] = React.useState<number>();
     const isMounted = useIsMounted();
 
     React.useEffect(() => {
         if (!amount) return undefined;
 
-        const onProposalResponse = ({ echo_req, proposal, subscription }) => {
+        const onProposalResponse: TTradeStore['onProposalResponse'] = ({ echo_req, proposal, subscription }) => {
             if (isMounted() && proposal && echo_req.contract_type === 'MULTUP' && Number(echo_req.amount) === amount) {
                 setCommission(proposal.commission);
-                setStopOut(proposal.limit_order?.stop_out?.order_amount);
+                proposal.limit_order?.stop_out && setStopOut(proposal.limit_order.stop_out?.order_amount);
             } else if (subscription?.id) {
                 WS.forget(subscription.id);
             }
diff --git a/packages/trader/src/Modules/Trading/Containers/Multiplier/risk-management-dialog.jsx b/packages/trader/src/Modules/Trading/Containers/Multiplier/risk-management-dialog.tsx
similarity index 80%
rename from packages/trader/src/Modules/Trading/Containers/Multiplier/risk-management-dialog.jsx
rename to packages/trader/src/Modules/Trading/Containers/Multiplier/risk-management-dialog.tsx
index fb08c577353f..8f2e607fa300 100644
--- a/packages/trader/src/Modules/Trading/Containers/Multiplier/risk-management-dialog.jsx
+++ b/packages/trader/src/Modules/Trading/Containers/Multiplier/risk-management-dialog.tsx
@@ -7,9 +7,19 @@ import { observer } from '@deriv/stores';
 import { useTraderStore } from 'Stores/useTraderStores';
 import StopLoss from 'Modules/Trading/Components/Form/TradeParams/Multiplier/stop-loss.jsx';
 import TakeProfit from 'Modules/Trading/Components/Form/TradeParams/Multiplier/take-profit.jsx';
-import CancelDeal from 'Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile.jsx';
+import CancelDeal from 'Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile';
 
-const RiskManagementDialog = observer(({ is_open, onClose, toggleDialog }) => {
+type TRiskManagementDialog = {
+    is_open: boolean;
+    onClose: () => void;
+    toggleDialog: () => void;
+};
+type TValidation_errors = {
+    take_profit: string[] | [];
+    stop_loss: string[] | [];
+};
+
+const RiskManagementDialog = observer(({ is_open, onClose, toggleDialog }: TRiskManagementDialog) => {
     const {
         is_turbos,
         take_profit,
@@ -31,11 +41,11 @@ const RiskManagementDialog = observer(({ is_open, onClose, toggleDialog }) => {
     };
     const [state, setState] = React.useState(applied_risk_management_state);
 
-    const [validation_errors, setValidationErrors] = React.useState({});
+    const [validation_errors, setValidationErrors] = React.useState<TValidation_errors | Record<string, never>>({});
 
     const should_show_deal_cancellation = cancellation_range_list?.length > 0;
 
-    const getStateToCompare = _state => {
+    const getStateToCompare = (_state: typeof applied_risk_management_state) => {
         const props_to_pick = [
             'has_take_profit',
             'has_stop_loss',
@@ -52,7 +62,7 @@ const RiskManagementDialog = observer(({ is_open, onClose, toggleDialog }) => {
         return isDeepEqual(getStateToCompare(state), getStateToCompare(applied_risk_management_state));
     };
 
-    const validate = new_state => {
+    const validate = (new_state: typeof applied_risk_management_state) => {
         setValidationErrors({
             take_profit:
                 new_state.has_take_profit && !new_state.take_profit
@@ -63,15 +73,15 @@ const RiskManagementDialog = observer(({ is_open, onClose, toggleDialog }) => {
         });
     };
 
-    const onChange = e => {
+    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const { name, value } = e.target;
         const new_state = { ...state };
-        new_state[name] = value;
+        new_state[name as 'take_profit' | 'stop_loss' | 'cancellation_duration'] = value;
         setState(new_state);
         validate(new_state);
     };
 
-    const onChangeMultipleLocal = props => {
+    const onChangeMultipleLocal = (props: keyof typeof applied_risk_management_state) => {
         const new_state = { ...state };
         Object.assign(new_state, props);
         setState(new_state);
@@ -83,9 +93,9 @@ const RiskManagementDialog = observer(({ is_open, onClose, toggleDialog }) => {
         toggleDialog();
     };
 
-    const resetAndClose = (...args) => {
+    const resetAndClose = () => {
         setState(applied_risk_management_state);
-        onClose(...args);
+        onClose();
     };
 
     return (
@@ -98,6 +108,7 @@ const RiskManagementDialog = observer(({ is_open, onClose, toggleDialog }) => {
                     height_offset='54px'
                 >
                     <TakeProfit
+                        // @ts-expect-error TODO: ts migration of <TakeProfit />
                         take_profit={state.take_profit}
                         has_take_profit={state.has_take_profit}
                         onChange={onChange}
@@ -106,6 +117,7 @@ const RiskManagementDialog = observer(({ is_open, onClose, toggleDialog }) => {
                     />
                     {!is_turbos && (
                         <StopLoss
+                            // @ts-expect-error TODO: ts migration of <StopLoss />
                             stop_loss={state.stop_loss}
                             has_stop_loss={state.has_stop_loss}
                             onChange={onChange}
@@ -119,7 +131,11 @@ const RiskManagementDialog = observer(({ is_open, onClose, toggleDialog }) => {
                             has_stop_loss={state.has_stop_loss}
                             has_cancellation={state.has_cancellation}
                             cancellation_duration={state.cancellation_duration}
-                            onChangeMultiple={onChangeMultipleLocal}
+                            onChangeMultiple={
+                                onChangeMultipleLocal as unknown as React.ComponentProps<
+                                    typeof CancelDeal
+                                >['onChangeMultiple']
+                            }
                         />
                     )}
                     <div className='trade-params__multiplier-risk-management-dialog-bottom-separator' />
diff --git a/packages/trader/src/Modules/Trading/Containers/__tests__/radio-group-options-modal.spec.jsx b/packages/trader/src/Modules/Trading/Containers/__tests__/radio-group-options-modal.spec.jsx
deleted file mode 100644
index a1f963ea7d70..000000000000
--- a/packages/trader/src/Modules/Trading/Containers/__tests__/radio-group-options-modal.spec.jsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { render, screen } from '@testing-library/react';
-import { mockStore } from '@deriv/stores';
-import TraderProviders from '../../../../trader-providers';
-import RadioGroupOptionsModal from '../radio-group-options-modal';
-
-const default_mocked_props = {
-    is_open: true,
-    modal_title: 'tests title',
-    toggleModal: jest.fn(),
-};
-const default_mock_store = {
-    modules: {
-        trade: {
-            accumulator_range_list: [1, 2, 3],
-            growth_rate: 0.03,
-            onChange: jest.fn(),
-            tick_size_barrier: 0,
-            proposal_info: {},
-        },
-    },
-};
-
-jest.mock('Modules/Trading/Containers/Multiplier/multiplier-options', () =>
-    jest.fn(() => <div>MultiplierOptions component</div>)
-);
-jest.mock('Modules/Trading/Components/Form/RadioGroupWithInfoMobile', () =>
-    jest.fn(props => <div data-test={props.has_error_or_not_loaded}>RadioGroupWithInfoMobile component</div>)
-);
-
-describe('<RadioGroupOptionsModal />', () => {
-    const mockRadioGroupOptionsModal = (mocked_store, mocked_props) => {
-        return (
-            <TraderProviders store={mocked_store}>
-                <RadioGroupOptionsModal {...mocked_props} />
-            </TraderProviders>
-        );
-    };
-    beforeAll(() => {
-        ReactDOM.createPortal = jest.fn(component => {
-            return component;
-        });
-    });
-
-    afterAll(() => {
-        ReactDOM.createPortal.mockClear();
-    });
-
-    it('should render component with <RadioGroupWithInfoMobile /> inside if modal_title !== Multiplier ', () => {
-        const mock_root_store = mockStore(default_mock_store);
-        render(mockRadioGroupOptionsModal(mock_root_store, default_mocked_props));
-
-        expect(screen.queryByText(/MultiplierOptions/i)).not.toBeInTheDocument();
-        expect(screen.getByText(/RadioGroupWithInfoMobile/i)).toBeInTheDocument();
-    });
-    it('should render component with <MultiplierOptions /> inside if modal_title === Multiplier ', () => {
-        const new_mock_props = { ...default_mocked_props, modal_title: 'Multiplier' };
-        const mock_root_store = mockStore(default_mock_store);
-        render(mockRadioGroupOptionsModal(mock_root_store, new_mock_props));
-
-        expect(screen.getByText(/MultiplierOptions/i)).toBeInTheDocument();
-        expect(screen.queryByText(/RadioGroupWithInfoMobile/i)).not.toBeInTheDocument();
-    });
-    it('has_error_or_not_loaded should be falsy if proposal_info includes proper information', () => {
-        const new_mock_store = { ...default_mocked_props };
-        new_mock_store.modules = {
-            trade: {
-                accumulator_range_list: [1, 2, 3],
-                growth_rate: 0.03,
-                onChange: jest.fn(),
-                tick_size_barrier: 0,
-                proposal_info: { ACCU: { has_error: false, id: 'testid' } },
-            },
-        };
-        const mock_root_store = mockStore(new_mock_store);
-        render(mockRadioGroupOptionsModal(mock_root_store, default_mocked_props));
-
-        expect(screen.getByText(/RadioGroupWithInfoMobile/i)).not.toHaveAttribute('data-test');
-    });
-});
diff --git a/packages/trader/src/Modules/Trading/Containers/__tests__/radio-group-options-modal.spec.tsx b/packages/trader/src/Modules/Trading/Containers/__tests__/radio-group-options-modal.spec.tsx
index cc8a706eed73..498f3a2549e8 100644
--- a/packages/trader/src/Modules/Trading/Containers/__tests__/radio-group-options-modal.spec.tsx
+++ b/packages/trader/src/Modules/Trading/Containers/__tests__/radio-group-options-modal.spec.tsx
@@ -4,7 +4,7 @@ import RadioGroupOptionsModal from '../radio-group-options-modal';
 import { mockStore } from '@deriv/stores';
 import TraderProviders from '../../../../trader-providers';
 
-jest.mock('../Multiplier/multiplier-options.jsx', () => jest.fn(() => 'mockedMultiplierOptions'));
+jest.mock('../Multiplier/multiplier-options', () => jest.fn(() => 'mockedMultiplierOptions'));
 jest.mock('Modules/Trading/Components/Form/RadioGroupWithInfoMobile', () =>
     jest.fn(() => 'MockedRadioGroupWithInfoMobile')
 );
diff --git a/packages/trader/src/Modules/Trading/Containers/radio-group-options-modal.tsx b/packages/trader/src/Modules/Trading/Containers/radio-group-options-modal.tsx
index 5fc7a59d04fe..98399f1669a0 100644
--- a/packages/trader/src/Modules/Trading/Containers/radio-group-options-modal.tsx
+++ b/packages/trader/src/Modules/Trading/Containers/radio-group-options-modal.tsx
@@ -3,7 +3,7 @@ import { Div100vhContainer, Modal, usePreventIOSZoom } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import { useTraderStore } from 'Stores/useTraderStores';
 import { getGrowthRatePercentage, getTickSizeBarrierPercentage, isEmptyObject } from '@deriv/shared';
-import MultiplierOptions from 'Modules/Trading/Containers/Multiplier/multiplier-options.jsx';
+import MultiplierOptions from 'Modules/Trading/Containers/Multiplier/multiplier-options';
 import RadioGroupWithInfoMobile from 'Modules/Trading/Components/Form/RadioGroupWithInfoMobile';
 import { observer } from '@deriv/stores';
 
@@ -36,7 +36,6 @@ const RadioGroupOptionsModal = observer(({ is_open, modal_title, toggleModal }:
             >
                 <Div100vhContainer className='mobile-widget-dialog__wrapper' max_autoheight_offset='48px'>
                     {modal_title === localize('Multiplier') ? (
-                        // @ts-expect-error should be gone after MultiplierOptions is converted to typescript
                         <MultiplierOptions toggleModal={toggleModal} />
                     ) : (
                         <RadioGroupWithInfoMobile
diff --git a/packages/trader/src/Modules/Trading/Containers/trade-params-mobile.tsx b/packages/trader/src/Modules/Trading/Containers/trade-params-mobile.tsx
index 8cb17c6ffe72..98e19d4b2286 100644
--- a/packages/trader/src/Modules/Trading/Containers/trade-params-mobile.tsx
+++ b/packages/trader/src/Modules/Trading/Containers/trade-params-mobile.tsx
@@ -86,7 +86,8 @@ const makeGetDefaultDuration = (trade_duration: number, trade_duration_unit: str
 const TradeParamsModal = observer(({ is_open, toggleModal, tab_index }: TTradeParamsModal) => {
     const { client } = useStore();
     const { currency } = client;
-    const { amount, form_components, duration, duration_unit, duration_units_list } = useTraderStore();
+    const { amount, form_components, duration, duration_unit, duration_units_list, is_vanilla } = useTraderStore();
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const getDefaultDuration = React.useCallback(makeGetDefaultDuration(duration, duration_unit), []);
 
@@ -150,7 +151,7 @@ const TradeParamsModal = observer(({ is_open, toggleModal, tab_index }: TTradePa
                 is_open={is_open}
                 header={<div />}
                 toggleModal={toggleModal}
-                height='auto'
+                height={is_vanilla ? '53.8rem' : 'auto'}
                 width='calc(100vw - 32px)'
             >
                 <ThemedScrollbars>
@@ -314,8 +315,6 @@ const TradeParamsMobile = observer(
                             setAmountError={setAmountError}
                             stake_value={stake_value}
                             payout_value={payout_value}
-                            basis={''}
-                            selected_basis={''}
                         />
                     </div>
                 ) : null}
diff --git a/packages/trader/src/Modules/Trading/Containers/trade-params.tsx b/packages/trader/src/Modules/Trading/Containers/trade-params.tsx
index a00d1e44f459..812ab12ab77a 100644
--- a/packages/trader/src/Modules/Trading/Containers/trade-params.tsx
+++ b/packages/trader/src/Modules/Trading/Containers/trade-params.tsx
@@ -5,7 +5,7 @@ import Barrier from 'Modules/Trading/Components/Form/TradeParams/barrier';
 import BarrierSelector from 'Modules/Trading/Components/Form/TradeParams/Turbos/barrier-selector';
 import Duration from 'Modules/Trading/Components/Form/TradeParams/Duration';
 import LastDigit from 'Modules/Trading/Components/Form/TradeParams/last-digit';
-import CancelDeal from 'Modules/Trading/Components/Form/TradeParams/Multiplier/cancel-deal.jsx';
+import CancelDeal from 'Modules/Trading/Components/Form/TradeParams/Multiplier/cancel-deal';
 import Accumulator from 'Modules/Trading/Components/Form/TradeParams/Accumulator/accumulator';
 import StopLoss from 'Modules/Trading/Components/Form/TradeParams/Multiplier/stop-loss.jsx';
 import TakeProfit from 'Modules/Trading/Components/Form/TradeParams/Multiplier/take-profit.jsx';
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.ts b/packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.ts
index f49fb573e61a..1abb6f797d87 100644
--- a/packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.ts
+++ b/packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.ts
@@ -5,7 +5,6 @@ import {
     isTimeValid,
     minDate,
     toMoment,
-    shouldShowCancellation,
     getUnitMap,
     buildBarriersConfig,
     buildDurationConfig,
@@ -172,7 +171,6 @@ export const ContractType = (() => {
             multiplier,
             start_date,
             cancellation_duration,
-            symbol,
             short_barriers,
             long_barriers,
             strike_price_choices,
@@ -209,7 +207,7 @@ export const ContractType = (() => {
         const obj_accumulator_range_list = getAccumulatorRange(contract_type);
         const obj_barrier_choices = getBarrierChoices(contract_type, stored_barriers_data?.barrier_choices);
         const obj_multiplier_range_list = getMultiplierRange(contract_type, multiplier);
-        const obj_cancellation = getCancellation(contract_type, cancellation_duration, symbol);
+        const obj_cancellation = getCancellation(contract_type, cancellation_duration);
         const obj_expiry_type = getExpiryType(obj_duration_units_list.duration_units_list, expiry_type);
         const obj_equal = getEqualProps(contract_type);
 
@@ -636,7 +634,7 @@ export const ContractType = (() => {
         };
     };
 
-    const getCancellation = (contract_type: string, cancellation_duration: string, symbol: string) => {
+    const getCancellation = (contract_type: string, cancellation_duration: string) => {
         const arr_cancellation_range: string[] =
             getPropertyValue(available_contract_types, [contract_type, 'config', 'cancellation_range']) || [];
 
@@ -649,7 +647,7 @@ export const ContractType = (() => {
             return `${duration} ${name}`;
         };
 
-        const should_show_cancellation = shouldShowCancellation(symbol);
+        const should_show_cancellation = !!arr_cancellation_range.length;
 
         return {
             cancellation_duration: getArrayDefaultValue(arr_cancellation_range, cancellation_duration),
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/end-time.ts b/packages/trader/src/Stores/Modules/Trading/Helpers/end-time.ts
index c51b6b94325b..b25c05ed1c83 100644
--- a/packages/trader/src/Stores/Modules/Trading/Helpers/end-time.ts
+++ b/packages/trader/src/Stores/Modules/Trading/Helpers/end-time.ts
@@ -17,8 +17,8 @@ const getClosestTime = (time: moment.Moment | string, interval: number): moment.
 export const getSelectedTime = (
     server_time: TTime['server_time'],
     selected_time: TTime['selected_time'],
-    market_open_times: TTime['market_open_times'],
-    market_close_times: TTime['market_close_times']
+    market_open_times: moment.Moment[],
+    market_close_times: moment.Moment[]
 ) => {
     for (let i = 0; i < market_open_times.length; i++) {
         if (selected_time.isAfter(market_open_times[i]) && selected_time.isBefore(market_close_times[i])) {
@@ -38,8 +38,8 @@ export const getSelectedTime = (
 
 export const getBoundaries = (
     server_time: TTime['server_time'],
-    market_open_times: TTime['market_open_times'],
-    market_close_times: TTime['market_close_times']
+    market_open_times: moment.Moment[],
+    market_close_times: moment.Moment[]
 ) => {
     const boundaries = {
         start: market_open_times.map(open_time =>
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/multiplier.ts b/packages/trader/src/Stores/Modules/Trading/Helpers/multiplier.ts
index 1e7fb6ad79d6..fdaa03c6c75b 100644
--- a/packages/trader/src/Stores/Modules/Trading/Helpers/multiplier.ts
+++ b/packages/trader/src/Stores/Modules/Trading/Helpers/multiplier.ts
@@ -3,7 +3,7 @@ import { TTradeStore } from 'Types';
 type TData = Partial<
     Pick<
         TTradeStore,
-        'cancellation_duration' | 'cancellation_price' | 'has_cancellation' | 'has_stop_loss' | 'has_take_profit'
+        'cancellation_duration' | 'has_cancellation' | 'has_stop_loss' | 'has_take_profit' | 'stop_loss' | 'take_profit'
     >
 >;
 
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/preview-proposal.ts b/packages/trader/src/Stores/Modules/Trading/Helpers/preview-proposal.ts
index 38618549d597..526bb8ae11d5 100644
--- a/packages/trader/src/Stores/Modules/Trading/Helpers/preview-proposal.ts
+++ b/packages/trader/src/Stores/Modules/Trading/Helpers/preview-proposal.ts
@@ -1,16 +1,24 @@
 import debounce from 'lodash.debounce';
 import { isEmptyObject, WS } from '@deriv/shared';
 import { createProposalRequests } from './proposal';
-import { PriceProposalResponse } from '@deriv/api-types';
+import { PriceProposalRequest, PriceProposalResponse } from '@deriv/api-types';
 import { TTradeStore } from 'Types';
 
+type TResponse<Req, Res extends { [key: string]: unknown }, K extends string> = Res & {
+    echo_req: Req;
+    error?: {
+        code: string;
+        message: string;
+        details?: Res[K] & { field: string };
+    };
+};
 export const requestPreviewProposal = debounce(
-    (store: TTradeStore, override = {}, onProposalResponse: (response: PriceProposalResponse) => void) => {
+    (store: TTradeStore, override = {}, onProposalResponse: TTradeStore['onProposalResponse']) => {
         const new_store = { ...store, ...override };
         const requests = createProposalRequests(new_store);
         const subscription_map: { [key: string]: boolean } = {};
 
-        const onResponse = (response: PriceProposalResponse) => {
+        const onResponse = (response: TResponse<PriceProposalRequest, PriceProposalResponse, 'proposal'>) => {
             if (response.error || !response.subscription) return;
 
             subscription_map[response.subscription.id] = true;
diff --git a/packages/trader/src/Stores/Modules/Trading/trade-store.ts b/packages/trader/src/Stores/Modules/Trading/trade-store.ts
index 0e304c394dc4..354405889ddf 100644
--- a/packages/trader/src/Stores/Modules/Trading/trade-store.ts
+++ b/packages/trader/src/Stores/Modules/Trading/trade-store.ts
@@ -1454,6 +1454,7 @@ export default class TradeStore extends BaseStore {
         this.root_store.notifications.setShouldShowPopups(false);
         this.onPreSwitchAccount(this.preSwitchAccountListener);
         this.onSwitchAccount(this.accountSwitcherListener);
+        this.resetAccumulatorData();
         this.onLogout(this.logoutListener);
         this.onClientInit(this.clientInitListener);
         this.onNetworkStatusChange(this.networkStatusChangeListener);
@@ -1499,6 +1500,7 @@ export default class TradeStore extends BaseStore {
         if (this.prev_chart_layout) {
             this.prev_chart_layout.is_used = false;
         }
+        this.clearContracts();
         this.resetAccumulatorData();
         if (this.is_vanilla) {
             this.setBarrierChoices([]);
@@ -1550,6 +1552,7 @@ export default class TradeStore extends BaseStore {
                     current_spot_data = {
                         current_spot: prices?.[prices?.length - 1],
                         current_spot_time: times?.[times?.length - 1],
+                        prev_spot_time: times?.[times?.length - 2],
                     };
                 } else {
                     return;
diff --git a/packages/trader/src/sass/app/modules/trading-mobile.scss b/packages/trader/src/sass/app/modules/trading-mobile.scss
index 3d1541ea7b01..2205e3048990 100644
--- a/packages/trader/src/sass/app/modules/trading-mobile.scss
+++ b/packages/trader/src/sass/app/modules/trading-mobile.scss
@@ -358,6 +358,9 @@
                     }
                 }
             }
+            &-keypad:has(.range-text-container) {
+                padding: 0.4rem 1.6rem 1.6rem;
+            }
         }
         &__header {
             @include mobile {
diff --git a/packages/trader/src/sass/app/modules/trading.scss b/packages/trader/src/sass/app/modules/trading.scss
index bebc896d2417..c9016e10bf34 100644
--- a/packages/trader/src/sass/app/modules/trading.scss
+++ b/packages/trader/src/sass/app/modules/trading.scss
@@ -965,16 +965,30 @@
     }
 }
 
-.expiry-text-container {
-    margin-top: 0.4rem;
+.expiry-text-container,
+.range-text-container {
+    margin-top: 0.5rem;
 
-    &--mobile {
+    @include mobile {
         margin: 0 0 0.8rem;
         position: relative;
         top: -0.8rem;
     }
 }
 
+.text-container--vanilla {
+    min-height: 5rem;
+    padding-top: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .expiry-text-container,
+    .range-text-container {
+        top: 0;
+    }
+}
+
 /** @define dc-collapsible */
 @include mobile {
     .dc-collapsible {
diff --git a/types/global.d.ts b/types/global.d.ts
index 2f5bbbfa742c..9f1d1d23ab11 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -13,6 +13,9 @@ declare global {
         };
         TrackJS: { console: { log: (arg0: unknown[]) => void }; track: (arg0: object) => void };
         Blockly;
+        Onfido: {
+            init: (args: any) => any;
+        };
     }
 }