diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 1d9c48806b34..63a10a301db9 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -35,14 +35,10 @@ jobs: run: npx tsc --project packages/stores/tsconfig.json -noEmit - name: Check TypeScript for @deriv/wallets run: npx tsc --project packages/wallets/tsconfig.json -noEmit - - name: Check TypeScript for @deriv/tradershub - run: npx tsc --project packages/tradershub/tsconfig.json -noEmit - name: Check TypeScript for @deriv/cashier-v2 run: npx tsc --project packages/cashier-v2/tsconfig.json -noEmit - name: Check ESLint for @deriv/wallets run: npx eslint --fix --ignore-path packages/wallets/.eslintignore --config packages/wallets/.eslintrc.js packages/wallets - - name: Check ESLint for @deriv/tradershub - run: npx eslint --fix --ignore-path packages/tradershub/.eslintignore --config packages/tradershub/.eslintrc.js packages/tradershub - name: Check ESLint for @deriv/cashier-v2 run: npx eslint --fix --ignore-path packages/cashier-v2/.eslintignore --config packages/cashier-v2/.eslintrc.js packages/cashier-v2 - name: Check Stylelint for @deriv/wallets diff --git a/packages/core/build/config.js b/packages/core/build/config.js index 34a27fd373e2..a593a24a07f6 100644 --- a/packages/core/build/config.js +++ b/packages/core/build/config.js @@ -95,10 +95,6 @@ const copyConfig = base => { from: path.resolve(__dirname, '../node_modules/@deriv/p2p-v2/dist/p2p-v2'), to: 'p2p-v2', }, - { - from: path.resolve(__dirname, '../node_modules/@deriv/tradershub/dist/tradershub'), - to: 'tradershub', - }, { from: path.resolve(__dirname, '../node_modules/@deriv/cashier-v2/dist/cashier-v2'), to: 'cashier-v2', diff --git a/packages/core/package.json b/packages/core/package.json index e9f503e0614b..ce4f29adb0f9 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -119,7 +119,6 @@ "@deriv/shared": "^1.0.0", "@deriv/stores": "^1.0.0", "@deriv/trader": "^3.8.0", - "@deriv/tradershub": "^1.0.0", "@deriv/translations": "^1.0.0", "@deriv/utils": "^1.0.0", "@deriv/wallets": "^1.0.0", diff --git a/packages/core/src/App/Components/Routes/route-with-sub-routes.jsx b/packages/core/src/App/Components/Routes/route-with-sub-routes.jsx index fa1afccc06f7..ad5f5e5aca0a 100644 --- a/packages/core/src/App/Components/Routes/route-with-sub-routes.jsx +++ b/packages/core/src/App/Components/Routes/route-with-sub-routes.jsx @@ -9,7 +9,7 @@ import { useFeatureFlags } from '@deriv/hooks'; const RouteWithSubRoutes = observer(route => { const { common } = useStore(); - const { is_next_cashier_enabled, is_next_tradershub_enabled } = useFeatureFlags(); + const { is_next_cashier_enabled } = useFeatureFlags(); const { checkAppId } = common; const validateRoute = pathname => { if (pathname.startsWith('/cashier') && !pathname.includes('p2p') && !!route.routes) { @@ -24,11 +24,6 @@ const RouteWithSubRoutes = observer(route => { return route.path === pathname || !!p2p_subroutes; } else if (pathname.includes(routes.cashier_v2) && !is_next_cashier_enabled) { return false; - } else if ( - (pathname === routes.traders_hub_v2 || pathname === routes.compare_accounts) && - !is_next_tradershub_enabled - ) { - return false; } return true; }; diff --git a/packages/core/src/App/Constants/routes-config.js b/packages/core/src/App/Constants/routes-config.js index dff74cfa965e..be5698e8d3cb 100644 --- a/packages/core/src/App/Constants/routes-config.js +++ b/packages/core/src/App/Constants/routes-config.js @@ -54,13 +54,6 @@ const Bot = React.lazy(() => }) ); -const TradersHub = React.lazy(() => - moduleLoader(() => { - // eslint-disable-next-line import/no-unresolved - return import(/* webpackChunkName: "tradershub" */ '@deriv/tradershub'); - }) -); - const P2P = React.lazy(() => moduleLoader(() => { // eslint-disable-next-line import/no-unresolved @@ -273,12 +266,6 @@ const getModules = () => { getTitle: () => localize('P2P-V2'), is_authenticated: true, }, - { - path: routes.traders_hub_v2, - component: TradersHub, - is_authenticated: true, - getTitle: () => localize('Trader’s Hub V2'), - }, { path: routes.cashier_v2, component: Cashier_V2, diff --git a/packages/core/src/App/Containers/Layout/header/header.tsx b/packages/core/src/App/Containers/Layout/header/header.tsx index 7c422d09f31f..1d825d32cc7c 100644 --- a/packages/core/src/App/Containers/Layout/header/header.tsx +++ b/packages/core/src/App/Containers/Layout/header/header.tsx @@ -55,11 +55,9 @@ const Header = observer(() => { const traders_hub_routes = [ routes.traders_hub, - routes.traders_hub_v2, routes.account, routes.cashier, routes.wallets_compare_accounts, - routes.compare_accounts, routes.compare_cfds, ].includes(pathname) || pathname.startsWith(routes.compare_cfds) || diff --git a/packages/core/src/App/Containers/Layout/header/traders-hub-home-button.tsx b/packages/core/src/App/Containers/Layout/header/traders-hub-home-button.tsx index b8a5459b8cb1..2df7318b0066 100644 --- a/packages/core/src/App/Containers/Layout/header/traders-hub-home-button.tsx +++ b/packages/core/src/App/Containers/Layout/header/traders-hub-home-button.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { useHistory, useLocation } from 'react-router'; import classNames from 'classnames'; import { Icon, Text } from '@deriv/components'; -import { useFeatureFlags } from '@deriv/hooks'; import { routes } from '@deriv/shared'; import { observer, useStore } from '@deriv/stores'; import { Localize } from '@deriv/translations'; @@ -13,17 +12,9 @@ const TradersHubHomeButton = observer(() => { const history = useHistory(); const location = useLocation(); const { pathname } = location; - const { is_next_tradershub_enabled } = useFeatureFlags(); const TradersHubIcon = is_dark_mode_on ? 'IcAppstoreHomeDark' : 'IcAppstoreTradersHubHomeUpdated'; - const redirectRoutes = () => { - if (is_next_tradershub_enabled) { - return routes.traders_hub_v2; - } - return routes.traders_hub; - }; - return (
{ 'traders-hub-header__tradershub--active': pathname === routes.traders_hub || pathname === routes.traders_hub_v2, })} - onClick={() => history.push(redirectRoutes())} + onClick={() => history.push(routes.traders_hub)} >
diff --git a/packages/core/src/root_files/robots.txt b/packages/core/src/root_files/robots.txt index a3838634c92c..7922f1e99da1 100644 --- a/packages/core/src/root_files/robots.txt +++ b/packages/core/src/root_files/robots.txt @@ -7,4 +7,3 @@ Disallow: */account/* Disallow: */cashier-v2/* Disallow: */p2p-v2/* Disallow: */endpoint* -Disallow: */tradershub/* diff --git a/packages/shared/src/utils/routes/routes.ts b/packages/shared/src/utils/routes/routes.ts index 7d6c7ce52066..a44a91d698b3 100644 --- a/packages/shared/src/utils/routes/routes.ts +++ b/packages/shared/src/utils/routes/routes.ts @@ -98,10 +98,6 @@ export const routes = { wallets_on_ramp: '/wallet/on-ramp', wallets_reset_balance: '/wallet/reset-balance', - // Traders Hub - traders_hub_v2: '/traders-hub', - compare_accounts: '/traders-hub/compare-accounts', - // Cashier V2 cashier_v2: '/cashier-v2', }; diff --git a/packages/stores/src/stores/FeatureFlagsStore.ts b/packages/stores/src/stores/FeatureFlagsStore.ts index 97d1653199ce..63a5ea50115a 100644 --- a/packages/stores/src/stores/FeatureFlagsStore.ts +++ b/packages/stores/src/stores/FeatureFlagsStore.ts @@ -3,7 +3,6 @@ import BaseStore from './BaseStore'; const FLAGS = { dtrader_v2: false, next_cashier: false, - next_tradershub: false, p2p_v2: false, sharkfin: false, wallet: false, diff --git a/packages/tradershub/.eslintignore b/packages/tradershub/.eslintignore deleted file mode 100644 index e0ea1d17ac5d..000000000000 --- a/packages/tradershub/.eslintignore +++ /dev/null @@ -1,2 +0,0 @@ -dist/*.js -*.config.* diff --git a/packages/tradershub/.eslintrc.js b/packages/tradershub/.eslintrc.js deleted file mode 100644 index aed1cdeee4c3..000000000000 --- a/packages/tradershub/.eslintrc.js +++ /dev/null @@ -1,65 +0,0 @@ -module.exports = { - env: { es6: true }, - extends: ['../../.eslintrc.js', 'eslint:recommended', 'plugin:react/recommended'], - overrides: [ - { - files: ['*.ts', '*.mts', '*.cts', '*.tsx'], - rules: { - 'no-undef': 'off', - }, - }, - ], - parserOptions: { sourceType: 'module' }, - plugins: ['eslint-plugin-local-rules', 'simple-import-sort', 'sort-destructure-keys', 'typescript-sort-keys'], - root: true, - rules: { - '@typescript-eslint/array-type': 'error', - '@typescript-eslint/no-explicit-any': 'error', - '@typescript-eslint/no-unused-vars': 'error', - '@typescript-eslint/sort-type-constituents': 'error', - camelcase: 'error', - 'import/first': 'error', - 'import/newline-after-import': 'error', - 'import/no-duplicates': 'error', - 'import/no-extraneous-dependencies': ['off', { devDependencies: ['**/*.spec.*', '**/*.test.*', '**/*.d.ts*'] }], - 'lines-around-comment': ['error', { allowObjectStart: true }], - 'local-rules/no-react-namespace': 'error', - 'no-unneeded-ternary': 'error', - 'no-useless-return': 'error', - 'object-shorthand': 'error', - 'prefer-const': 'error', - 'react/jsx-pascal-case': 'error', - 'react/jsx-sort-props': 'error', - 'simple-import-sort/exports': 'error', - 'simple-import-sort/imports': [ - 'error', - { - groups: [ - [ - 'public-path', - // `react` first, then packages starting with a character - '^react$', - '^[a-z]', - // Packages starting with `@` - '^@', - // Imports starting with `../` - '^\\.\\.(?!/?$)', - '^\\.\\./?$', - // Imports starting with `./` - '^\\./(?=.*/)(?!/?$)', - '^\\.(?!/?$)', - '^\\./?$', - // Style imports - '^.+\\.s?css$', - // Side effect imports - '^\\u0000', - // Delete the empty line copied as the next line of the last import - '\\s*', - ], - ], - }, - ], - 'typescript-sort-keys/interface': 'error', - 'typescript-sort-keys/string-enum': 'error', - }, -}; diff --git a/packages/tradershub/babel.config.json b/packages/tradershub/babel.config.json deleted file mode 100644 index c3bbd49be007..000000000000 --- a/packages/tradershub/babel.config.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"], - "plugins": [ - ["@babel/plugin-proposal-decorators", { "legacy": true }], - ["@babel/plugin-proposal-class-properties", { "loose": true }], - ["@babel/plugin-proposal-private-methods", { "loose": true }], - ["@babel/plugin-proposal-private-property-in-object", { "loose": true }], - "@babel/plugin-proposal-export-default-from", - "@babel/plugin-proposal-object-rest-spread", - "@babel/plugin-proposal-export-namespace-from", - "@babel/plugin-syntax-dynamic-import", - ["@babel/plugin-proposal-unicode-property-regex", { "useUnicodeFlag": false }], - "@babel/plugin-proposal-optional-chaining", - "@babel/plugin-proposal-nullish-coalescing-operator" - ] -} diff --git a/packages/tradershub/declarations.d.ts b/packages/tradershub/declarations.d.ts deleted file mode 100644 index 033e1b1af6c7..000000000000 --- a/packages/tradershub/declarations.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { ComponentType, SVGAttributes } from 'react'; - -declare module '*.svg' { - const content: ComponentType>; - export default content; -} diff --git a/packages/tradershub/jest.config.js b/packages/tradershub/jest.config.js deleted file mode 100644 index c544feb62fc2..000000000000 --- a/packages/tradershub/jest.config.js +++ /dev/null @@ -1,16 +0,0 @@ -const baseConfigForPackages = require('../../jest.config.base'); - -module.exports = { - ...baseConfigForPackages, - moduleNameMapper: { - '\\.css$': '/../../__mocks__/styleMock.js', - '\\.s(c|a)ss$': '/../../__mocks__/styleMock.js', - '^.+\\.svg$': '/../../__mocks__/fileMock.js', - '^@/(.*)$': '/src/$1', - '^@cfd/components(.*)$': '/src/features/cfd/components/$1', - '^@cfd/constants$': '/src/features/cfd/constants', - '^@cfd/flows(.*)$': '/src/features/cfd/flows/$1', - '^@cfd/screens(.*)$': '/src/features/cfd/screens/$1', - }, - transformIgnorePatterns: ['/node_modules/(?!(@deriv-com/ui)).+\\.js$'], -}; diff --git a/packages/tradershub/package.json b/packages/tradershub/package.json deleted file mode 100644 index 192714d13d43..000000000000 --- a/packages/tradershub/package.json +++ /dev/null @@ -1,57 +0,0 @@ -{ - "name": "@deriv/tradershub", - "private": true, - "version": "1.0.0", - "main": "dist/tradershub/js/index.js", - "engines": { - "node": "18.x" - }, - "scripts": { - "analyze:stats": "NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.js\" --profile --json=stats.json", - "analyze:build": "webpack-bundle-analyzer --no-open -m static -r treemap.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist", - "build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.js\"", - "serve": "rimraf dist && concurrently \"cross-env BUILD_MODE='serve' NODE_OPTIONS='-r ts-node/register' webpack --progress --watch --config ./webpack.config.js\" \"tsc -w --noEmit --preserveWatchOutput\"", - "start": "rimraf dist && npm run test && npm run serve", - "translate": "sh ./scripts/update-translations.sh" - }, - "dependencies": { - "@deriv/api-v2": "^1.0.0", - "@deriv/quill-icons": "^1.22.10", - "@deriv-com/ui": "^1.14.5", - "@deriv-com/utils": "^0.0.25", - "@deriv/react-joyride": "^2.6.2", - "class-variance-authority": "^0.7.0", - "embla-carousel-react": "8.0.0-rc12", - "formik": "^2.1.4", - "i18next": "^22.4.6", - "qrcode.react": "^3.1.0", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-modal": "^3.16.1", - "react-i18next": "^11.11.0", - "react-router-dom": "^5.2.0", - "tailwind-merge": "^1.14.0", - "usehooks-ts": "^2.7.0", - "yup": "^0.32.11" - }, - "devDependencies": { - "@testing-library/react": "^12.0.0", - "@testing-library/user-event": "^13.5.0", - "@types/react-dom": "^18.0.0", - "@typescript-eslint/eslint-plugin": "5.45.0", - "@typescript-eslint/parser": "5.45.0", - "autoprefixer": "^10.4.16", - "eslint-plugin-local-rules": "2.0.0", - "eslint-plugin-react": "^7.22.0", - "eslint-plugin-react-hooks": "^4.2.0", - "eslint-plugin-simple-import-sort": "^10.0.0", - "eslint-plugin-sort-destructure-keys": "1.5.0", - "eslint-plugin-typescript-sort-keys": "^2.3.0", - "postcss": "^8.4.24", - "tailwindcss": "^3.3.6", - "typescript": "^4.6.3", - "webpack": "^5.81.0", - "webpack-bundle-analyzer": "^4.3.0", - "webpack-cli": "^4.7.2" - } -} diff --git a/packages/tradershub/postcss.config.js b/packages/tradershub/postcss.config.js deleted file mode 100644 index aa03a623f473..000000000000 --- a/packages/tradershub/postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - plugins: { - autoprefixer: {}, - tailwindcss: {}, - }, -}; diff --git a/packages/tradershub/src/App.tsx b/packages/tradershub/src/App.tsx deleted file mode 100644 index 316981250213..000000000000 --- a/packages/tradershub/src/App.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { CFDProvider, RealAccountCreationProvider, UIProvider } from '@/providers'; -import { APIProvider, AuthProvider } from '@deriv/api-v2'; -import AppContent from './AppContent'; -import { Modals } from './modals'; -import './index.scss'; - -const App = () => ( - - - - - - - - - - - - -); - -export default App; diff --git a/packages/tradershub/src/AppContent.tsx b/packages/tradershub/src/AppContent.tsx deleted file mode 100644 index 73171007d88b..000000000000 --- a/packages/tradershub/src/AppContent.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React, { Fragment } from 'react'; -import { Router } from '@/routes'; - -const AppContent = () => { - return ( - -
- - - ); -}; - -export default AppContent; diff --git a/packages/tradershub/src/assets/cfd/ctrader-success.svg b/packages/tradershub/src/assets/cfd/ctrader-success.svg deleted file mode 100644 index b67a013ac814..000000000000 --- a/packages/tradershub/src/assets/cfd/ctrader-success.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/tradershub/src/assets/cfd/dxtrade-password.svg b/packages/tradershub/src/assets/cfd/dxtrade-password.svg deleted file mode 100644 index 58c375f649e3..000000000000 --- a/packages/tradershub/src/assets/cfd/dxtrade-password.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/tradershub/src/assets/cfd/dxtrade-success.svg b/packages/tradershub/src/assets/cfd/dxtrade-success.svg deleted file mode 100644 index 0c0d11a6908d..000000000000 --- a/packages/tradershub/src/assets/cfd/dxtrade-success.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/tradershub/src/assets/cfd/mt5-derived-success.svg b/packages/tradershub/src/assets/cfd/mt5-derived-success.svg deleted file mode 100644 index 97dcc7b55b59..000000000000 --- a/packages/tradershub/src/assets/cfd/mt5-derived-success.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/tradershub/src/assets/cfd/mt5-financial-success.svg b/packages/tradershub/src/assets/cfd/mt5-financial-success.svg deleted file mode 100644 index 085fed3c2193..000000000000 --- a/packages/tradershub/src/assets/cfd/mt5-financial-success.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/tradershub/src/assets/cfd/mt5-swap-free-success.svg b/packages/tradershub/src/assets/cfd/mt5-swap-free-success.svg deleted file mode 100644 index e760ab84cb0e..000000000000 --- a/packages/tradershub/src/assets/cfd/mt5-swap-free-success.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-baskets.svg b/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-baskets.svg deleted file mode 100644 index 44c28bd3c7db..000000000000 --- a/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-baskets.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-commodities.svg b/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-commodities.svg deleted file mode 100644 index 3b0ec9032df4..000000000000 --- a/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-commodities.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-cryptocurrencies.svg b/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-cryptocurrencies.svg deleted file mode 100644 index 2910a1a088e0..000000000000 --- a/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-cryptocurrencies.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-derived-fx.svg b/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-derived-fx.svg deleted file mode 100644 index 5c2014c21c95..000000000000 --- a/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-derived-fx.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - \ No newline at end of file diff --git a/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-etf.svg b/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-etf.svg deleted file mode 100644 index ecaba49dd980..000000000000 --- a/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-etf.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-forex.svg b/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-forex.svg deleted file mode 100644 index cb059c723893..000000000000 --- a/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-forex.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-stock-indices.svg b/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-stock-indices.svg deleted file mode 100644 index bae58577ad7c..000000000000 --- a/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-stock-indices.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-stocks.svg b/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-stocks.svg deleted file mode 100644 index bae58577ad7c..000000000000 --- a/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-stocks.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-synthetics.svg b/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-synthetics.svg deleted file mode 100644 index 57c1c7500777..000000000000 --- a/packages/tradershub/src/assets/cfd/tradingInstruments/ic-instrument-synthetics.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - \ No newline at end of file diff --git a/packages/tradershub/src/assets/cfd/tradingInstruments/index.tsx b/packages/tradershub/src/assets/cfd/tradingInstruments/index.tsx deleted file mode 100644 index d5bd7f7d19a2..000000000000 --- a/packages/tradershub/src/assets/cfd/tradingInstruments/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import Baskets from './ic-instrument-baskets.svg'; -import Commodities from './ic-instrument-commodities.svg'; -import Cryptocurrencies from './ic-instrument-cryptocurrencies.svg'; -import DerivedFX from './ic-instrument-derived-fx.svg'; -import ETF from './ic-instrument-etf.svg'; -import Forex from './ic-instrument-forex.svg'; -import StockIndices from './ic-instrument-stock-indices.svg'; -import Stocks from './ic-instrument-stocks.svg'; -import Synthetics from './ic-instrument-synthetics.svg'; - -const InstrumentsIcons = { - Baskets, - Commodities, - Cryptocurrencies, - DerivedFX, - ETF, - Forex, - StockIndices, - Stocks, - Synthetics, -}; - -export default InstrumentsIcons; diff --git a/packages/tradershub/src/assets/svgs/add-icon.svg b/packages/tradershub/src/assets/svgs/add-icon.svg deleted file mode 100644 index adfa60d7b496..000000000000 --- a/packages/tradershub/src/assets/svgs/add-icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/packages/tradershub/src/assets/svgs/change-password-email.svg b/packages/tradershub/src/assets/svgs/change-password-email.svg deleted file mode 100644 index 08d233c56ed5..000000000000 --- a/packages/tradershub/src/assets/svgs/change-password-email.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/packages/tradershub/src/assets/svgs/checkmark.svg b/packages/tradershub/src/assets/svgs/checkmark.svg deleted file mode 100644 index d275e41edc8e..000000000000 --- a/packages/tradershub/src/assets/svgs/checkmark.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/packages/tradershub/src/assets/svgs/clipboard.svg b/packages/tradershub/src/assets/svgs/clipboard.svg deleted file mode 100644 index 6c6d083ab865..000000000000 --- a/packages/tradershub/src/assets/svgs/clipboard.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/packages/tradershub/src/assets/svgs/ctrader-label.svg b/packages/tradershub/src/assets/svgs/ctrader-label.svg deleted file mode 100644 index 274322486fa1..000000000000 --- a/packages/tradershub/src/assets/svgs/ctrader-label.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/tradershub/src/assets/svgs/derivx-label.svg b/packages/tradershub/src/assets/svgs/derivx-label.svg deleted file mode 100644 index f2d046adec1b..000000000000 --- a/packages/tradershub/src/assets/svgs/derivx-label.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/tradershub/src/assets/svgs/ic-back-arrow.svg b/packages/tradershub/src/assets/svgs/ic-back-arrow.svg deleted file mode 100644 index 5d3727be1633..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-back-arrow.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/packages/tradershub/src/assets/svgs/ic-checkmark-circle.svg b/packages/tradershub/src/assets/svgs/ic-checkmark-circle.svg deleted file mode 100644 index c5634cdb982f..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-checkmark-circle.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/packages/tradershub/src/assets/svgs/ic-close-dark.svg b/packages/tradershub/src/assets/svgs/ic-close-dark.svg deleted file mode 100644 index a16cf2171fba..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-close-dark.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/tradershub/src/assets/svgs/ic-derivx-password-updated.svg b/packages/tradershub/src/assets/svgs/ic-derivx-password-updated.svg deleted file mode 100644 index 3939060541af..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-derivx-password-updated.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/tradershub/src/assets/svgs/ic-documents.svg b/packages/tradershub/src/assets/svgs/ic-documents.svg deleted file mode 100644 index fdccc3b6b745..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-documents.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/tradershub/src/assets/svgs/ic-edit.svg b/packages/tradershub/src/assets/svgs/ic-edit.svg deleted file mode 100644 index 11fa8f91964e..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-edit.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/packages/tradershub/src/assets/svgs/ic-id-card.svg b/packages/tradershub/src/assets/svgs/ic-id-card.svg deleted file mode 100644 index aace82ef72a9..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-id-card.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/packages/tradershub/src/assets/svgs/ic-important.svg b/packages/tradershub/src/assets/svgs/ic-important.svg deleted file mode 100644 index e9e8dc2e226d..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-important.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/packages/tradershub/src/assets/svgs/ic-info-outline.svg b/packages/tradershub/src/assets/svgs/ic-info-outline.svg deleted file mode 100644 index 4d928f0a4f26..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-info-outline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/tradershub/src/assets/svgs/ic-installation-apple.svg b/packages/tradershub/src/assets/svgs/ic-installation-apple.svg deleted file mode 100644 index 56373da55ee3..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-installation-apple.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/packages/tradershub/src/assets/svgs/ic-installation-google.svg b/packages/tradershub/src/assets/svgs/ic-installation-google.svg deleted file mode 100644 index 5830df93b50b..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-installation-google.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/tradershub/src/assets/svgs/ic-installation-huawei.svg b/packages/tradershub/src/assets/svgs/ic-installation-huawei.svg deleted file mode 100644 index f58d1d2b6303..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-installation-huawei.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/tradershub/src/assets/svgs/ic-linux-logo.svg b/packages/tradershub/src/assets/svgs/ic-linux-logo.svg deleted file mode 100644 index 3740db1e63ae..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-linux-logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/tradershub/src/assets/svgs/ic-macos-logo.svg b/packages/tradershub/src/assets/svgs/ic-macos-logo.svg deleted file mode 100644 index fac94e306ea2..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-macos-logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/tradershub/src/assets/svgs/ic-mt5-password-updated.svg b/packages/tradershub/src/assets/svgs/ic-mt5-password-updated.svg deleted file mode 100644 index afa6f50d015b..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-mt5-password-updated.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/tradershub/src/assets/svgs/ic-mt5-password.svg b/packages/tradershub/src/assets/svgs/ic-mt5-password.svg deleted file mode 100644 index b31e32175a33..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-mt5-password.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/tradershub/src/assets/svgs/ic-mt5.svg b/packages/tradershub/src/assets/svgs/ic-mt5.svg deleted file mode 100644 index 8a29f98a47f2..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-mt5.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/packages/tradershub/src/assets/svgs/ic-not-applicable.svg b/packages/tradershub/src/assets/svgs/ic-not-applicable.svg deleted file mode 100644 index 3f01481d086a..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-not-applicable.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/packages/tradershub/src/assets/svgs/ic-selfie.svg b/packages/tradershub/src/assets/svgs/ic-selfie.svg deleted file mode 100644 index a6e2669a3e89..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-selfie.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/tradershub/src/assets/svgs/ic-verification-failed-status.svg b/packages/tradershub/src/assets/svgs/ic-verification-failed-status.svg deleted file mode 100644 index 9678c56c3949..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-verification-failed-status.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/tradershub/src/assets/svgs/ic-verification-pending-status.svg b/packages/tradershub/src/assets/svgs/ic-verification-pending-status.svg deleted file mode 100644 index 9dff76db7767..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-verification-pending-status.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/packages/tradershub/src/assets/svgs/ic-verification-success-status.svg b/packages/tradershub/src/assets/svgs/ic-verification-success-status.svg deleted file mode 100644 index a28c510128db..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-verification-success-status.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/tradershub/src/assets/svgs/ic-windows-logo.svg b/packages/tradershub/src/assets/svgs/ic-windows-logo.svg deleted file mode 100644 index 6d15cc172887..000000000000 --- a/packages/tradershub/src/assets/svgs/ic-windows-logo.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/packages/tradershub/src/assets/svgs/personal-details-example.svg b/packages/tradershub/src/assets/svgs/personal-details-example.svg deleted file mode 100644 index 91b05ca7d89a..000000000000 --- a/packages/tradershub/src/assets/svgs/personal-details-example.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/tradershub/src/components/ActionScreen/ActionScreen.tsx b/packages/tradershub/src/components/ActionScreen/ActionScreen.tsx deleted file mode 100644 index 2b063771162f..000000000000 --- a/packages/tradershub/src/components/ActionScreen/ActionScreen.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React, { ComponentProps, isValidElement, ReactNode } from 'react'; -import { twMerge } from 'tailwind-merge'; -import { Text } from '@deriv-com/ui'; - -type TActionScreenProps = { - children?: ReactNode; - className?: string; - description: ReactNode; - descriptionSize?: ComponentProps['size']; - icon?: ReactNode; - renderButtons?: () => ReactNode; - title?: string; - titleSize?: ComponentProps['size']; -}; - -/** - * Generic component to display status / action screen / final screen - * As its common and repeated in many places, - * at the moment of writing this, there are already 3 different patterns use to display ex - */ -const ActionScreen = ({ - children, - className, - description, - descriptionSize = 'md', - icon, - renderButtons, - title, - titleSize = 'md', -}: TActionScreenProps) => { - return ( -
- {icon} -
- {title && ( - - {title} - - )} - {isValidElement(description) ? ( - description - ) : ( - - {description} - - )} -
- {renderButtons?.()} - {children} -
- ); -}; - -export default ActionScreen; diff --git a/packages/tradershub/src/components/ActionScreen/__tests__/ActionScreen.spec.tsx b/packages/tradershub/src/components/ActionScreen/__tests__/ActionScreen.spec.tsx deleted file mode 100644 index df1c77dc46d9..000000000000 --- a/packages/tradershub/src/components/ActionScreen/__tests__/ActionScreen.spec.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import ActionScreen from '../ActionScreen'; - -describe('ActionScreen component', () => { - it('renders with title', () => { - render(); - const titleElement = screen.getByText('Title'); - expect(titleElement).toBeInTheDocument(); - }); - - it('renders with description', () => { - render(); - const descriptionElement = screen.getByText('Description'); - expect(descriptionElement).toBeInTheDocument(); - }); - - it('renders if description is valid ReactNode', () => { - render(Valid React node} />); - const descriptionElement = screen.getByText('Valid React node'); - expect(descriptionElement).toBeInTheDocument(); - }); - - it('renders with custom icon', () => { - const CustomIcon = () =>
Custom Icon
; - render(} />); - const iconElement = screen.getByText('Custom Icon'); - expect(iconElement).toBeInTheDocument(); - }); - - it('calls renderButtons function', () => { - const renderButtons = jest.fn(); - render(); - expect(renderButtons).toHaveBeenCalled(); - }); - - it('renders children', () => { - render( - -
Child
- - ); - const childElement = screen.getByText('Child'); - expect(childElement).toBeInTheDocument(); - }); -}); diff --git a/packages/tradershub/src/components/ActionScreen/index.ts b/packages/tradershub/src/components/ActionScreen/index.ts deleted file mode 100644 index d10f6b28feca..000000000000 --- a/packages/tradershub/src/components/ActionScreen/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ActionScreen } from './ActionScreen'; diff --git a/packages/tradershub/src/components/AppContainer/AppContainer.tsx b/packages/tradershub/src/components/AppContainer/AppContainer.tsx deleted file mode 100644 index e32018748ad9..000000000000 --- a/packages/tradershub/src/components/AppContainer/AppContainer.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React, { ReactNode } from 'react'; -import { twMerge } from 'tailwind-merge'; - -type TAppContainerProps = { - children: ReactNode; - className?: string; -}; - -/** - * `AppContainer` is a component that wraps the entire application with some base styles. - * @param {React.ReactNode} children - The children to be rendered within the `AppContainer`. - * @returns {React.ElementType} The `AppContainer` component. - */ - -const AppContainer = ({ children, className }: TAppContainerProps) => ( -
{children}
-); - -export default AppContainer; diff --git a/packages/tradershub/src/components/AppContainer/index.ts b/packages/tradershub/src/components/AppContainer/index.ts deleted file mode 100644 index 206c5105d5b3..000000000000 --- a/packages/tradershub/src/components/AppContainer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as AppContainer } from './AppContainer'; diff --git a/packages/tradershub/src/components/ButtonGroup/ButtonGroup.tsx b/packages/tradershub/src/components/ButtonGroup/ButtonGroup.tsx deleted file mode 100644 index 289679ed65c7..000000000000 --- a/packages/tradershub/src/components/ButtonGroup/ButtonGroup.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React, { FC, PropsWithChildren } from 'react'; -import { twMerge } from 'tailwind-merge'; - -type TButtonGroupProps = { className?: string }; - -/** - * `ButtonGroup` is a functional component that displays its children in a flex container. - * @param {PropsWithChildren} props - The properties that define the `ButtonGroup` component. - * @param {React.ReactNode} props.children - The child elements to be displayed within the `ButtonGroup`. - * @param {string} [props.className] - Additional CSS classes to apply to the `ButtonGroup`. - * - * @returns {React.ReactElement} A `div` element with the `ButtonGroup`'s children and the combined styles. - */ - -const ButtonGroup: FC> = ({ children, className }) => ( -
{children}
-); - -export default ButtonGroup; diff --git a/packages/tradershub/src/components/ButtonGroup/index.ts b/packages/tradershub/src/components/ButtonGroup/index.ts deleted file mode 100644 index c956f3a33b21..000000000000 --- a/packages/tradershub/src/components/ButtonGroup/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ButtonGroup } from './ButtonGroup'; diff --git a/packages/tradershub/src/components/CFDSection/CFDContent/CFDContent.tsx b/packages/tradershub/src/components/CFDSection/CFDContent/CFDContent.tsx deleted file mode 100644 index 75964c4365fa..000000000000 --- a/packages/tradershub/src/components/CFDSection/CFDContent/CFDContent.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { TradingAppCardLoader } from '@/components'; -import { useRegulationFlags } from '@/hooks'; -import { CTraderList, MT5PlatformsList, OtherCFDPlatformsList } from '@cfd/components'; - -const CFDContent = () => { - const { isSuccess: isRegulationAccessible } = useRegulationFlags(); - - const { isEU } = useRegulationFlags(); - - if (!isRegulationAccessible) - return ( -
- -
- ); - - return ( -
- - {!isEU && } - {!isEU && } -
- ); -}; - -export default CFDContent; diff --git a/packages/tradershub/src/components/CFDSection/CFDContent/index.ts b/packages/tradershub/src/components/CFDSection/CFDContent/index.ts deleted file mode 100644 index c515f2276dcb..000000000000 --- a/packages/tradershub/src/components/CFDSection/CFDContent/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as CFDContent } from './CFDContent'; diff --git a/packages/tradershub/src/components/CFDSection/CFDHeading/CFDHeading.tsx b/packages/tradershub/src/components/CFDSection/CFDHeading/CFDHeading.tsx deleted file mode 100644 index 3869d38038ec..000000000000 --- a/packages/tradershub/src/components/CFDSection/CFDHeading/CFDHeading.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React, { Fragment } from 'react'; -import { useHistory } from 'react-router-dom'; -import { twMerge } from 'tailwind-merge'; -import { StaticLink, TitleDescriptionLoader } from '@/components'; -import { useRegulationFlags } from '@/hooks'; -import { Button, Text, useDevice } from '@deriv-com/ui'; - -const CompareAccountsButton = ({ className }: { className?: string }) => { - const history = useHistory(); - - const { isEU } = useRegulationFlags(); - - const title = isEU ? 'Account information' : 'Compare Accounts'; - - return ( - - ); -}; - -const CFDHeading = () => { - const { isDesktop } = useDevice(); - const { isSuccess } = useRegulationFlags(); - - if (!isSuccess) return ; - - return ( - - {isDesktop && ( -
- - CFDs - - -
- )} - - Trade with leverage and tight spreads for better returns on trades. - Learn more - - {!isDesktop && } - - ); -}; - -export default CFDHeading; diff --git a/packages/tradershub/src/components/CFDSection/CFDHeading/index.ts b/packages/tradershub/src/components/CFDSection/CFDHeading/index.ts deleted file mode 100644 index 6125611d0ec6..000000000000 --- a/packages/tradershub/src/components/CFDSection/CFDHeading/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as CFDHeading } from './CFDHeading'; diff --git a/packages/tradershub/src/components/CFDSection/CFDSection.tsx b/packages/tradershub/src/components/CFDSection/CFDSection.tsx deleted file mode 100644 index 7d109346217e..000000000000 --- a/packages/tradershub/src/components/CFDSection/CFDSection.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { useRegulationFlags } from '@/hooks'; -import { GetADerivAccountBanner } from '../GetADerivAccountBanner'; -import { CFDContent } from './CFDContent'; -import { CFDHeading } from './CFDHeading'; - -const CFDSection = () => { - const { isSuccess, noRealCRNonEUAccount, noRealMFEUAccount } = useRegulationFlags(); - - return ( -
- - {(noRealCRNonEUAccount || noRealMFEUAccount) && isSuccess && ( -
- -
- )} - -
- ); -}; - -export default CFDSection; diff --git a/packages/tradershub/src/components/CFDSection/index.ts b/packages/tradershub/src/components/CFDSection/index.ts deleted file mode 100644 index 558baac4684d..000000000000 --- a/packages/tradershub/src/components/CFDSection/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as CFDSection } from './CFDSection'; diff --git a/packages/tradershub/src/components/Clipboard/Clipboard.tsx b/packages/tradershub/src/components/Clipboard/Clipboard.tsx deleted file mode 100644 index 9043cff2cd18..000000000000 --- a/packages/tradershub/src/components/Clipboard/Clipboard.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import React, { useEffect, useRef, useState } from 'react'; -import { useCopyToClipboard, useHover } from 'usehooks-ts'; -import ClipboardIcon from '@/assets/svgs/clipboard.svg'; -import CheckmarkCircle from '@/assets/svgs/ic-checkmark-circle.svg'; -import { Tooltip } from '@/components'; -import { Button, useDevice } from '@deriv-com/ui'; - -type TClipboardProps = { - textCopy: string; - tooltip?: 'bottom' | 'left' | 'right' | 'top'; -}; - -/** - * Props for the Clipboard component. - * @property {string} textCopy - The text to be copied to the clipboard. - * - * @example - * ```jsx - * - * ``` - */ -const Clipboard = ({ textCopy, tooltip }: TClipboardProps) => { - const [, copy] = useCopyToClipboard(); - const { isDesktop } = useDevice(); - const [isCopied, setIsCopied] = useState(false); - const hoverRef = useRef(null); - const isHovered = useHover(hoverRef); - let timeoutClipboard: ReturnType; - - /** - * Handle click event to copy text to clipboard. - * @param {React.MouseEvent} event - The click event. - */ - const onClick = (event: React.MouseEvent) => { - setIsCopied(true); - copy(textCopy); - timeoutClipboard = setTimeout(() => { - setIsCopied(false); - }, 2000); - event.stopPropagation(); - }; - - useEffect(() => { - return () => clearTimeout(timeoutClipboard); - }, []); // eslint-disable-line react-hooks/exhaustive-deps - - return ( - - - - ); -}; - -export default Clipboard; diff --git a/packages/tradershub/src/components/Clipboard/index.ts b/packages/tradershub/src/components/Clipboard/index.ts deleted file mode 100644 index 5878f8a254e4..000000000000 --- a/packages/tradershub/src/components/Clipboard/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Clipboard } from './Clipboard'; diff --git a/packages/tradershub/src/components/CurrencySwitcher/CurrencySwitcher.tsx b/packages/tradershub/src/components/CurrencySwitcher/CurrencySwitcher.tsx deleted file mode 100644 index 2cd8af93b057..000000000000 --- a/packages/tradershub/src/components/CurrencySwitcher/CurrencySwitcher.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import React from 'react'; -import { useHistory } from 'react-router-dom'; -import { CurrencySwitcherLoader } from '@/components'; -import { IconToCurrencyMapper } from '@/constants'; -import { useQueryParams, useRegulationFlags } from '@/hooks'; -import { THooks } from '@/types'; -import { useActiveTradingAccount, useResetVirtualBalance } from '@deriv/api-v2'; -import { StandaloneChevronDownBoldIcon } from '@deriv/quill-icons'; -import { Button } from '@deriv-com/ui'; -import { DemoCurrencySwitcherAccountInfo, RealCurrencySwitcherAccountInfo } from './CurrencySwitcherAccountInfo'; - -type AccountActionButtonProps = { - balance: THooks.ActiveTradingAccount['balance']; - isDemo: THooks.ActiveTradingAccount['is_virtual']; -}; - -const AccountActionButton = ({ balance, isDemo }: AccountActionButtonProps) => { - const history = useHistory(); - const { mutate: resetVirtualBalance } = useResetVirtualBalance(); - let buttonText = 'Deposit'; - if (isDemo && balance !== 10000) { - buttonText = 'Reset Balance'; - } else if (isDemo) { - return null; - } - - return ( - - ); -}; - -const CurrencySwitcher = () => { - const { data: activeAccount, isSuccess } = useActiveTradingAccount(); - const isDemo = activeAccount?.is_virtual; - const { openModal } = useQueryParams(); - - const { noRealCRNonEUAccount, noRealMFEUAccount } = useRegulationFlags(); - - const iconCurrency = isDemo ? 'virtual' : activeAccount?.currency ?? 'virtual'; - - if (noRealCRNonEUAccount || noRealMFEUAccount) return null; - - if (!isSuccess) return ; - - const { icon, text } = IconToCurrencyMapper[iconCurrency]; - - return ( -
-
{icon}
-
- {isDemo ? ( - - ) : ( - - )} -
-
- -
- {!isDemo && ( - { - openModal('AccountSelector'); - }} - /> - )} -
- ); -}; - -export default CurrencySwitcher; diff --git a/packages/tradershub/src/components/CurrencySwitcher/CurrencySwitcherAccountInfo.tsx b/packages/tradershub/src/components/CurrencySwitcher/CurrencySwitcherAccountInfo.tsx deleted file mode 100644 index 7449deb3b329..000000000000 --- a/packages/tradershub/src/components/CurrencySwitcher/CurrencySwitcherAccountInfo.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import { IconToCurrencyMapperType } from '@/constants'; -import { THooks } from '@/types'; -import { Text } from '@deriv-com/ui'; - -type DemoCurrencySwitcherAccountInfoProps = { - displayBalance: THooks.ActiveTradingAccount['display_balance']; -}; - -type RealCurrencySwitcherAccountInfoProps = { - currencyText: IconToCurrencyMapperType['currency_text']['text']; - displayBalance?: THooks.ActiveTradingAccount['display_balance']; -}; - -export const DemoCurrencySwitcherAccountInfo = ({ displayBalance }: DemoCurrencySwitcherAccountInfoProps) => ( -
- - Demo - - - {displayBalance} - -
-); - -export const RealCurrencySwitcherAccountInfo = ({ - currencyText, - displayBalance, -}: RealCurrencySwitcherAccountInfoProps) => ( -
- - {displayBalance ?? '0.00'} - - - {currencyText} - -
-); diff --git a/packages/tradershub/src/components/CurrencySwitcher/index.ts b/packages/tradershub/src/components/CurrencySwitcher/index.ts deleted file mode 100644 index 6ad9604b221a..000000000000 --- a/packages/tradershub/src/components/CurrencySwitcher/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as CurrencySwitcher } from './CurrencySwitcher'; diff --git a/packages/tradershub/src/components/DemoRealSwitcher/DemoRealSwitcher.tsx b/packages/tradershub/src/components/DemoRealSwitcher/DemoRealSwitcher.tsx deleted file mode 100644 index d790f1c7c8f6..000000000000 --- a/packages/tradershub/src/components/DemoRealSwitcher/DemoRealSwitcher.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import React, { useCallback, useEffect, useRef, useState } from 'react'; -import { twMerge } from 'tailwind-merge'; -import { useOnClickOutside } from 'usehooks-ts'; -import { DemoRealSwitcherLoader } from '@/components'; -import { useAccountSwitcher, useRegulationFlags } from '@/hooks'; -import { LabelPairedChevronDownSmRegularIcon } from '@deriv/quill-icons'; -import { Text } from '@deriv-com/ui'; - -const DemoRealSwitcher = () => { - const { selectedAccount, setSelectedAccount, accountTypes } = useAccountSwitcher(); - const { isSuccess } = useRegulationFlags(); - const [isDropdownOpen, setIsDropdownOpen] = useState(false); - const { label, value } = selectedAccount ?? {}; - - const ref = useRef(null); - useOnClickOutside(ref, () => setIsDropdownOpen(false)); - - useEffect(() => { - setIsDropdownOpen(false); - }, [selectedAccount]); - - const toggleDropdown = useCallback(() => { - setIsDropdownOpen(prevState => !prevState); - }, []); - - if (!isSuccess) return ; - - return ( -
- - {isDropdownOpen && ( -
- {accountTypes.map(account => ( - - ))} -
- )} -
- ); -}; - -export default DemoRealSwitcher; diff --git a/packages/tradershub/src/components/DemoRealSwitcher/index.ts b/packages/tradershub/src/components/DemoRealSwitcher/index.ts deleted file mode 100644 index 7eea9cb212f3..000000000000 --- a/packages/tradershub/src/components/DemoRealSwitcher/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as DemoRealSwitcher } from './DemoRealSwitcher'; diff --git a/packages/tradershub/src/components/EUDisclaimerMessage/EUDisclaimerMessage.tsx b/packages/tradershub/src/components/EUDisclaimerMessage/EUDisclaimerMessage.tsx deleted file mode 100644 index 4547f29a20aa..000000000000 --- a/packages/tradershub/src/components/EUDisclaimerMessage/EUDisclaimerMessage.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { Text } from '@deriv-com/ui'; - -const EUDisclaimerMessage = () => ( -
-
- - The products offered on our website are complex derivative products that carry a significant risk of - potential loss. CFDs are complex instruments with a high risk of losing money rapidly due to leverage. - 70.1% of retail investor accounts lose money when trading CFDs with this provider. You should consider - whether you understand how these products work and whether you can afford to take the high risk of - losing your money. - -
-
-); - -export default EUDisclaimerMessage; diff --git a/packages/tradershub/src/components/EUDisclaimerMessage/__tests__/EUDisclaimerMessage.spec.tsx b/packages/tradershub/src/components/EUDisclaimerMessage/__tests__/EUDisclaimerMessage.spec.tsx deleted file mode 100644 index cecb5ee3fb36..000000000000 --- a/packages/tradershub/src/components/EUDisclaimerMessage/__tests__/EUDisclaimerMessage.spec.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import EUDisclaimerMessage from '../EUDisclaimerMessage'; - -describe('EUDisclaimerMessage component', () => { - it('should render the EU disclaimer message correctly', () => { - render(); - - expect( - screen.getByText( - /The products offered on our website are complex derivative products that carry a significant risk of potential loss. CFDs are complex instruments with a high risk of losing money rapidly due to leverage. 70.1% of retail investor accounts lose money when trading CFDs with this provider. You should consider whether you understand how these products work and whether you can afford to take the high risk of losing your money./i - ) - ).toBeInTheDocument(); - }); -}); diff --git a/packages/tradershub/src/components/EUDisclaimerMessage/index.ts b/packages/tradershub/src/components/EUDisclaimerMessage/index.ts deleted file mode 100644 index 0d671555934b..000000000000 --- a/packages/tradershub/src/components/EUDisclaimerMessage/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as EUDisclaimerMessage } from './EUDisclaimerMessage'; diff --git a/packages/tradershub/src/components/GetADerivAccountBanner/GetADerivAccountBanner.tsx b/packages/tradershub/src/components/GetADerivAccountBanner/GetADerivAccountBanner.tsx deleted file mode 100644 index 0e3d0cac177c..000000000000 --- a/packages/tradershub/src/components/GetADerivAccountBanner/GetADerivAccountBanner.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { useQueryParams } from '@/hooks'; -import { Button, Text } from '@deriv-com/ui'; - -/** - * `GetADerivAccountBanner` is a functional component that displays a banner message - * informing the user that they need a Deriv account to create a CFD account. - * It includes a button that leads the user to a modal where they can create a Deriv account. - * - * @returns {React.ReactElement} A `div` element containing the banner message and the button. - */ -const GetADerivAccountBanner = () => { - const { openModal } = useQueryParams(); - return ( -
- You need a Deriv account to create a CFD account. - -
- ); -}; - -export default GetADerivAccountBanner; diff --git a/packages/tradershub/src/components/GetADerivAccountBanner/GetADerivAccountDialog.tsx b/packages/tradershub/src/components/GetADerivAccountBanner/GetADerivAccountDialog.tsx deleted file mode 100644 index 8d28784e888b..000000000000 --- a/packages/tradershub/src/components/GetADerivAccountBanner/GetADerivAccountDialog.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import ReactModal from 'react-modal'; -import { ButtonGroup } from '@/components'; -import { CUSTOM_STYLES } from '@/helpers'; -import { useQueryParams } from '@/hooks'; -import { Button, Text } from '@deriv-com/ui'; - -type TGetADerivAccountDialog = { - isOpen: boolean; - onClose: () => void; -}; - -/** - * `GetADerivAccountDialog` is opened when user tried to create a CFD account without a Deriv account - * It includes a button that leads the user to a modal where they can create a Deriv account. - * - * @returns {React.ReactElement} A `` component containing the dialog message and action button. - */ -const GetADerivAccountDialog = ({ isOpen, onClose }: TGetADerivAccountDialog) => { - const { openModal } = useQueryParams(); - - return ( - -
- You'll need a Deriv account - A Deriv account will allow you to fund (and withdraw from) your CFDs account(s). - - - - -
- - ); -}; - -export default GetADerivAccountDialog; diff --git a/packages/tradershub/src/components/GetADerivAccountBanner/index.ts b/packages/tradershub/src/components/GetADerivAccountBanner/index.ts deleted file mode 100644 index 45d7e99c0567..000000000000 --- a/packages/tradershub/src/components/GetADerivAccountBanner/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as GetADerivAccountBanner } from './GetADerivAccountBanner'; -export { default as GetADerivAccountDialog } from './GetADerivAccountDialog'; diff --git a/packages/tradershub/src/components/GetDerivAccount/GetDerivAccount.tsx b/packages/tradershub/src/components/GetDerivAccount/GetDerivAccount.tsx deleted file mode 100644 index 87f9fe0a39fa..000000000000 --- a/packages/tradershub/src/components/GetDerivAccount/GetDerivAccount.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import { useQueryParams } from '@/hooks'; -import { IconComponent } from '../IconComponent'; -import { TradingAccountCard, TradingAccountCardContent, TradingAccountCardLightButton } from '../TradingAccountCard'; - -const TrailingButton = () => { - const { openModal } = useQueryParams(); - - return openModal('RealAccountCreation')} />; -}; - -const LeadingIcon = () => ; - -const GetDerivAccount = () => { - const title = 'Deriv account'; - - const description = 'Get a real Deriv account, start trading and manage your funds.'; - - return ( -
- - {description} - -
- ); -}; - -export default GetDerivAccount; diff --git a/packages/tradershub/src/components/GetDerivAccount/index.ts b/packages/tradershub/src/components/GetDerivAccount/index.ts deleted file mode 100644 index a7487084884d..000000000000 --- a/packages/tradershub/src/components/GetDerivAccount/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as GetDerivAccount } from './GetDerivAccount'; diff --git a/packages/tradershub/src/components/IconComponent/IconComponent.tsx b/packages/tradershub/src/components/IconComponent/IconComponent.tsx deleted file mode 100644 index 7452e4301b59..000000000000 --- a/packages/tradershub/src/components/IconComponent/IconComponent.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React, { CSSProperties, ElementType } from 'react'; -import { - AccountsDerivAccountLightIcon, - AccountsDmt5CfdsIcon, - AccountsDmt5DerivedIcon, - AccountsDmt5FinancialIcon, - AccountsDmt5SwfIcon, - CurrencyAudIcon, - CurrencyBtcIcon, - CurrencyDemoIcon, - CurrencyEthIcon, - CurrencyEurIcon, - CurrencyGbpIcon, - CurrencyLtcIcon, - CurrencyUsdcIcon, - CurrencyUsdIcon, - CurrencyUsdtIcon, - DerivProductDerivBotBrandLightLogoHorizontalIcon, - DerivProductDerivGoBrandLightLogoHorizontalIcon, - DerivProductDerivTraderBrandLightLogoHorizontalIcon, - DerivProductDerivXBrandLightLogoIcon, - PartnersProductBinaryBotBrandLightLogoHorizontalIcon, - PartnersProductDerivCtraderBrandLightLogoHorizontalIcon, - PartnersProductSmarttraderBrandLightLogoIcon, -} from '@deriv/quill-icons'; - -interface IconProps { - className?: string; - height?: CSSProperties['height']; - icon: T; - onClick?: () => void; - width?: CSSProperties['width']; -} - -export const Icons: Record = { - BinaryBot: PartnersProductBinaryBotBrandLightLogoHorizontalIcon, - CFDs: AccountsDmt5CfdsIcon, - CTrader: PartnersProductDerivCtraderBrandLightLogoHorizontalIcon, - DBot: DerivProductDerivBotBrandLightLogoHorizontalIcon, - DerivApps: AccountsDerivAccountLightIcon, - Derived: AccountsDmt5DerivedIcon, - DerivGo: DerivProductDerivGoBrandLightLogoHorizontalIcon, - DerivX: DerivProductDerivXBrandLightLogoIcon, - DTrader: DerivProductDerivTraderBrandLightLogoHorizontalIcon, - Financial: AccountsDmt5FinancialIcon, - SmartTrader: PartnersProductSmarttraderBrandLightLogoIcon, - SwapFree: AccountsDmt5SwfIcon, - AUD: CurrencyAudIcon, - BTC: CurrencyBtcIcon, - ETH: CurrencyEthIcon, - EUR: CurrencyEurIcon, - eUSDT: CurrencyUsdtIcon, - GBP: CurrencyGbpIcon, - LTC: CurrencyLtcIcon, - tUSDT: CurrencyUsdtIcon, - USD: CurrencyUsdIcon, - USDC: CurrencyUsdcIcon, - UST: CurrencyUsdtIcon, - virtual: CurrencyDemoIcon, -}; - -const IconComponent = ({ className, height = 48, icon, onClick, width = 48 }: IconProps) => { - const Icon = Icons[icon] as ElementType; - - return Icon ? : null; -}; - -export default IconComponent; diff --git a/packages/tradershub/src/components/IconComponent/index.ts b/packages/tradershub/src/components/IconComponent/index.ts deleted file mode 100644 index fe449a579b64..000000000000 --- a/packages/tradershub/src/components/IconComponent/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as IconComponent } from './IconComponent'; diff --git a/packages/tradershub/src/components/Loaders/CurrencySwitcherLoader/CurrencySwitcherLoader.tsx b/packages/tradershub/src/components/Loaders/CurrencySwitcherLoader/CurrencySwitcherLoader.tsx deleted file mode 100644 index 18496fec6098..000000000000 --- a/packages/tradershub/src/components/Loaders/CurrencySwitcherLoader/CurrencySwitcherLoader.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; - -const CurrencySwitcherLoader = () => ( -
-
-
-
-
-
-
-); - -export default CurrencySwitcherLoader; diff --git a/packages/tradershub/src/components/Loaders/CurrencySwitcherLoader/index.ts b/packages/tradershub/src/components/Loaders/CurrencySwitcherLoader/index.ts deleted file mode 100644 index 5e37ec8c2f1a..000000000000 --- a/packages/tradershub/src/components/Loaders/CurrencySwitcherLoader/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as CurrencySwitcherLoader } from './CurrencySwitcherLoader'; diff --git a/packages/tradershub/src/components/Loaders/DemoRealSwitcherLoader/DemoRealSwitcherLoader.tsx b/packages/tradershub/src/components/Loaders/DemoRealSwitcherLoader/DemoRealSwitcherLoader.tsx deleted file mode 100644 index f58ce93a34ce..000000000000 --- a/packages/tradershub/src/components/Loaders/DemoRealSwitcherLoader/DemoRealSwitcherLoader.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -const DemoRealSwitcherLoader = () => ( -
-); - -export default DemoRealSwitcherLoader; diff --git a/packages/tradershub/src/components/Loaders/DemoRealSwitcherLoader/index.ts b/packages/tradershub/src/components/Loaders/DemoRealSwitcherLoader/index.ts deleted file mode 100644 index 6c4c8418d25d..000000000000 --- a/packages/tradershub/src/components/Loaders/DemoRealSwitcherLoader/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as DemoRealSwitcherLoader } from './DemoRealSwitcherLoader'; diff --git a/packages/tradershub/src/components/Loaders/TitleDescriptionLoader/TitleDescriptionLoader.tsx b/packages/tradershub/src/components/Loaders/TitleDescriptionLoader/TitleDescriptionLoader.tsx deleted file mode 100644 index 863bbd35e65f..000000000000 --- a/packages/tradershub/src/components/Loaders/TitleDescriptionLoader/TitleDescriptionLoader.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -const TitleDescriptionLoader = () => ( -
-
-
-
-
-
-); - -export default TitleDescriptionLoader; diff --git a/packages/tradershub/src/components/Loaders/TitleDescriptionLoader/index.ts b/packages/tradershub/src/components/Loaders/TitleDescriptionLoader/index.ts deleted file mode 100644 index ae984cf94909..000000000000 --- a/packages/tradershub/src/components/Loaders/TitleDescriptionLoader/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TitleDescriptionLoader } from './TitleDescriptionLoader'; diff --git a/packages/tradershub/src/components/Loaders/TotalAssetsLoader/TotalAssetsLoader.tsx b/packages/tradershub/src/components/Loaders/TotalAssetsLoader/TotalAssetsLoader.tsx deleted file mode 100644 index bcf507c7204a..000000000000 --- a/packages/tradershub/src/components/Loaders/TotalAssetsLoader/TotalAssetsLoader.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -const TotalAssetsLoader = () => ( -
-
-
-); - -export default TotalAssetsLoader; diff --git a/packages/tradershub/src/components/Loaders/TotalAssetsLoader/index.ts b/packages/tradershub/src/components/Loaders/TotalAssetsLoader/index.ts deleted file mode 100644 index 1987f904279e..000000000000 --- a/packages/tradershub/src/components/Loaders/TotalAssetsLoader/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TotalAssetsLoader } from './TotalAssetsLoader'; diff --git a/packages/tradershub/src/components/Loaders/TradingAppCardLoader/TradingAppCardLoader.tsx b/packages/tradershub/src/components/Loaders/TradingAppCardLoader/TradingAppCardLoader.tsx deleted file mode 100644 index 0d504e5bcf33..000000000000 --- a/packages/tradershub/src/components/Loaders/TradingAppCardLoader/TradingAppCardLoader.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; - -const TradingAppCardLoader = () => ( -
-
-
-
-
-
-
-
-
-); - -export default TradingAppCardLoader; diff --git a/packages/tradershub/src/components/Loaders/TradingAppCardLoader/index.ts b/packages/tradershub/src/components/Loaders/TradingAppCardLoader/index.ts deleted file mode 100644 index 84f187b3c961..000000000000 --- a/packages/tradershub/src/components/Loaders/TradingAppCardLoader/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TradingAppCardLoader } from './TradingAppCardLoader'; diff --git a/packages/tradershub/src/components/Loaders/index.ts b/packages/tradershub/src/components/Loaders/index.ts deleted file mode 100644 index 6f1e3f5e9715..000000000000 --- a/packages/tradershub/src/components/Loaders/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from './CurrencySwitcherLoader'; -export * from './DemoRealSwitcherLoader'; -export * from './TitleDescriptionLoader'; -export * from './TotalAssetsLoader'; -export * from './TradingAppCardLoader'; diff --git a/packages/tradershub/src/components/OptionsAndMultipliersSection/OptionsAndMultipliersContent/OptionsAndMultipliersContent.tsx b/packages/tradershub/src/components/OptionsAndMultipliersSection/OptionsAndMultipliersContent/OptionsAndMultipliersContent.tsx deleted file mode 100644 index 98e9175538c9..000000000000 --- a/packages/tradershub/src/components/OptionsAndMultipliersSection/OptionsAndMultipliersContent/OptionsAndMultipliersContent.tsx +++ /dev/null @@ -1,142 +0,0 @@ -import React from 'react'; -import { useHistory } from 'react-router-dom'; -import { TradingAccountCard, TradingAccountCardContent, TradingAppCardLoader } from '@/components'; -import { optionsAndMultipliersContent } from '@/constants'; -import { getUrlBinaryBot, getUrlSmartTrader } from '@/helpers'; -import { useRegulationFlags } from '@/hooks'; -import { useActiveTradingAccount } from '@deriv/api-v2'; -import { Button, useDevice } from '@deriv-com/ui'; -import { URLUtils } from '@deriv-com/utils'; - -type OptionsAndMultipliersContentItem = { - description: string; - icon: JSX.Element; - isExternal?: boolean; - redirect: string; - smallIcon: JSX.Element; - title: string; -}; - -const { getDerivStaticURL } = URLUtils; - -type TShowButtonProps = Pick; - -type TLinkTitleProps = Pick; - -const LinkTitle = ({ icon, title }: TLinkTitleProps) => { - const handleClick = ( - event: - | React.KeyboardEvent - | React.MouseEvent - | React.MouseEvent - ) => { - event.persist(); - switch (title) { - case 'Deriv Trader': - window.open(getDerivStaticURL(`/dtrader`)); - break; - case 'Deriv Bot': - window.open(getDerivStaticURL(`/dbot`)); - break; - case 'SmartTrader': - window.open(getUrlSmartTrader()); - break; - case 'Binary Bot': - window.open(getUrlBinaryBot()); - break; - case 'Deriv GO': - window.open(getDerivStaticURL('/deriv-go')); - break; - default: - break; - } - }; - return ( - // Had to result to button instead of div because of sonarcloud - - ); -}; - -const ShowOpenButton = ({ isExternal, redirect }: TShowButtonProps) => { - const history = useHistory(); - - const { noRealCRNonEUAccount, noRealMFEUAccount } = useRegulationFlags(); - - if (noRealCRNonEUAccount || noRealMFEUAccount) return null; - - return ( - - ); -}; - -/** - * `OptionsAndMultipliersContent` is a component that renders the internal deriv trading platforms. - * @returns {React.ElementType} The `OptionsAndMultipliersContent` component. - */ -const OptionsAndMultipliersContent = () => { - const { isDesktop } = useDevice(); - const { data } = useActiveTradingAccount(); - const { isSuccess: isRegulationAccessible } = useRegulationFlags(); - - const { isEU } = useRegulationFlags(); - - const getoptionsAndMultipliersContent = optionsAndMultipliersContent(isEU ?? false); - - const filteredContent = isEU - ? getoptionsAndMultipliersContent.filter(account => account.title === 'Deriv Trader') - : getoptionsAndMultipliersContent; - - if (!isRegulationAccessible) - return ( -
- -
- ); - - return ( -
- {filteredContent.map(account => { - const { description, icon, isExternal, redirect, smallIcon, title } = account; - - const trailingComponent = () => ; - - const leadingComponent = () => ( - - ); - - return ( - - {description} - - ); - })} -
- ); -}; - -export default OptionsAndMultipliersContent; diff --git a/packages/tradershub/src/components/OptionsAndMultipliersSection/OptionsAndMultipliersContent/index.ts b/packages/tradershub/src/components/OptionsAndMultipliersSection/OptionsAndMultipliersContent/index.ts deleted file mode 100644 index 421ea4d7c396..000000000000 --- a/packages/tradershub/src/components/OptionsAndMultipliersSection/OptionsAndMultipliersContent/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as OptionsAndMultipliersContent } from './OptionsAndMultipliersContent'; diff --git a/packages/tradershub/src/components/OptionsAndMultipliersSection/OptionsAndMultipliersHeading/OptionsAndMultipliersHeading.tsx b/packages/tradershub/src/components/OptionsAndMultipliersSection/OptionsAndMultipliersHeading/OptionsAndMultipliersHeading.tsx deleted file mode 100644 index 496e89477bc9..000000000000 --- a/packages/tradershub/src/components/OptionsAndMultipliersSection/OptionsAndMultipliersHeading/OptionsAndMultipliersHeading.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; -import { CurrencySwitcher, StaticLink, TitleDescriptionLoader } from '@/components'; -import { useRegulationFlags } from '@/hooks'; -import { Text } from '@deriv-com/ui'; - -const getDescription = (isEU: boolean) => { - if (isEU) { - return ( - - Get the upside of CFDs without risking more than your initial stake with - multipliers. - - ); - } - return ( - - Earn a range of payouts by correctly predicting market price movements with - options, or get the - upside of CFDs without risking more than your initial stake with - multipliers. - - ); -}; - -/** - * `OptionsAndMultipliersHeading` is a component that renders the heading title and currency switcher. - * @returns {React.ElementType} The `OptionsAndMultipliersHeading` component. - */ -const OptionsAndMultipliersHeading = () => { - const { isSuccess: isRegulationAccessible } = useRegulationFlags(); - const { isEU } = useRegulationFlags(); - - const title = isEU ? 'Multipliers' : 'Options & multipliers'; - - const description = getDescription(isEU); - - if (!isRegulationAccessible) return ; - - return ( -
-
-
- - {title} - -
- {description} -
- -
- ); -}; -export default OptionsAndMultipliersHeading; diff --git a/packages/tradershub/src/components/OptionsAndMultipliersSection/OptionsAndMultipliersHeading/index.ts b/packages/tradershub/src/components/OptionsAndMultipliersSection/OptionsAndMultipliersHeading/index.ts deleted file mode 100644 index 1f828989f250..000000000000 --- a/packages/tradershub/src/components/OptionsAndMultipliersSection/OptionsAndMultipliersHeading/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as OptionsAndMultipliersHeading } from './OptionsAndMultipliersHeading'; diff --git a/packages/tradershub/src/components/OptionsAndMultipliersSection/OptionsAndMultipliersSection.tsx b/packages/tradershub/src/components/OptionsAndMultipliersSection/OptionsAndMultipliersSection.tsx deleted file mode 100644 index 5ec628a53475..000000000000 --- a/packages/tradershub/src/components/OptionsAndMultipliersSection/OptionsAndMultipliersSection.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { GetDerivAccount } from '@/components'; -import { useRegulationFlags } from '@/hooks'; -import { OptionsAndMultipliersContent } from './OptionsAndMultipliersContent'; -import { OptionsAndMultipliersHeading } from './OptionsAndMultipliersHeading'; - -/** - * `OptionsAndMultipliersSection` is a component that renders the deriv platforms and currency switcher. - * @returns {React.ElementType} The `OptionsAndMultipliersSection` component. - */ -const OptionsAndMultipliersSection = () => { - const { isSuccess, noRealCRNonEUAccount, noRealMFEUAccount } = useRegulationFlags(); - return ( -
-
- - {(noRealCRNonEUAccount || noRealMFEUAccount) && isSuccess && } - -
-
- ); -}; -export default OptionsAndMultipliersSection; diff --git a/packages/tradershub/src/components/OptionsAndMultipliersSection/index.ts b/packages/tradershub/src/components/OptionsAndMultipliersSection/index.ts deleted file mode 100644 index bd7413d84320..000000000000 --- a/packages/tradershub/src/components/OptionsAndMultipliersSection/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as OptionsAndMultipliersSection } from './OptionsAndMultipliersSection'; diff --git a/packages/tradershub/src/components/ProgressBar/DesktopProgressBar.tsx b/packages/tradershub/src/components/ProgressBar/DesktopProgressBar.tsx deleted file mode 100644 index 58f48d23707e..000000000000 --- a/packages/tradershub/src/components/ProgressBar/DesktopProgressBar.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import Stepper, { TSteps } from './Stepper'; - -type TDesktopProgressBar = { - activeStep: number; - steps: TSteps; -}; - -/** - * @name DesktopProgressBar - * @param steps - List of steps to be rendered - * @param activeStep - The current active step - * @returns React Component - */ -const DesktopProgressBar = ({ activeStep, steps = [] }: TDesktopProgressBar) => { - return ( -
- {steps.map((step, index) => ( - - ))} -
- ); -}; - -export default DesktopProgressBar; diff --git a/packages/tradershub/src/components/ProgressBar/MobileProgressBar.tsx b/packages/tradershub/src/components/ProgressBar/MobileProgressBar.tsx deleted file mode 100644 index ab05ca010030..000000000000 --- a/packages/tradershub/src/components/ProgressBar/MobileProgressBar.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import { StandaloneXmarkBoldIcon } from '@deriv/quill-icons'; -import { Text } from '@deriv-com/ui'; -import StepConnector from './StepConnector'; -import { TSteps } from './Stepper'; - -type TMobileProgressBar = { - activeStep: number; - onClickClose: VoidFunction; - steps: TSteps; -}; - -/** - * @name MobileProgressBar - * @param steps - List of steps to be rendered - * @param activeStep - The current active step - * @param onClickClose - Function to close the modal - * @returns React Component - */ -const MobileProgressBar = ({ activeStep, onClickClose, steps = [] }: TMobileProgressBar) => { - return ( -
-
-
- - Step {activeStep}/{steps.length}: - {' '} - {steps[activeStep - 1]} -
- -
-
- {steps.map((step, index) => ( - - ))} -
-
- ); -}; - -export default MobileProgressBar; diff --git a/packages/tradershub/src/components/ProgressBar/ProgressBar.classnames.ts b/packages/tradershub/src/components/ProgressBar/ProgressBar.classnames.ts deleted file mode 100644 index 18edf446867c..000000000000 --- a/packages/tradershub/src/components/ProgressBar/ProgressBar.classnames.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { cva } from 'class-variance-authority'; - -const progressBarBaseStyles = - 'z-10 box-border flex h-16 w-16 items-center rounded-full outline outline-2 transition-all delay-8 duration-8 ease-out '; - -export const stepperVariants = cva(progressBarBaseStyles, { - compoundVariants: [ - { - class: 'bg-solid-grey-default', - isActive: false, - isFilled: true, - }, - { - class: 'bg-solid-coral-700', - isActive: true, - isFilled: true, - }, - ], - variants: { - isActive: { - false: 'outline-solid-grey-default', - true: 'outline-solid-coral-700', - }, - isFilled: { - true: '', - }, - }, -}); - -export const desktopStyle = { - connector: 'lg:h-40 lg:w-1 lg:bg-[length:100%_200%] lg:bg-bottom lg:bg-gradient-to-b lg:aria-[current=true]:bg-top', - stepper: 'lg:flex lg:w-fit lg:items-end lg:gap-12', -}; - -export const mobileStyle = { - connector: 'bg-[length:200%_100%] bg-right bg-gradient-to-r aria-[current=true]:bg-left w-auto h-2', -}; diff --git a/packages/tradershub/src/components/ProgressBar/StepConnector.tsx b/packages/tradershub/src/components/ProgressBar/StepConnector.tsx deleted file mode 100644 index 8515faceb67b..000000000000 --- a/packages/tradershub/src/components/ProgressBar/StepConnector.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { twMerge } from 'tailwind-merge'; -import { desktopStyle, mobileStyle } from './ProgressBar.classnames'; - -const StepConnector = ({ isActive }: { isActive?: boolean }) => ( -
- {' '} -
-); - -export default StepConnector; diff --git a/packages/tradershub/src/components/ProgressBar/Stepper.tsx b/packages/tradershub/src/components/ProgressBar/Stepper.tsx deleted file mode 100644 index 203957abe73b..000000000000 --- a/packages/tradershub/src/components/ProgressBar/Stepper.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import { twMerge } from 'tailwind-merge'; -import { StandaloneCheckBoldIcon } from '@deriv/quill-icons'; -import { Text } from '@deriv-com/ui'; -import { desktopStyle, stepperVariants } from './ProgressBar.classnames'; -import StepConnector from './StepConnector'; - -export type TSteps = string[]; - -type TStepperProps = { - isActive: boolean; - isFilled?: boolean; - step: TSteps[number]; - stepCount: number; -}; - -const Stepper = ({ isActive, isFilled = false, step, stepCount }: TStepperProps) => ( -
-
- {stepCount !== 0 && } - - {isFilled && } - -
- - {step} - -
-); - -export default Stepper; diff --git a/packages/tradershub/src/components/ProgressBar/index.tsx b/packages/tradershub/src/components/ProgressBar/index.tsx deleted file mode 100644 index fb5fd25274f0..000000000000 --- a/packages/tradershub/src/components/ProgressBar/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { TSteps } from './Stepper'; - -export { default as DesktopProgressBar } from './DesktopProgressBar'; -export { default as MobileProgressBar } from './MobileProgressBar'; -export { TSteps }; diff --git a/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherDesktop.tsx b/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherDesktop.tsx deleted file mode 100644 index 41028a14cf3c..000000000000 --- a/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherDesktop.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import { useQueryParams, useRegulationSwitcher } from '@/hooks'; -import { useUIContext } from '@/providers'; -import { LabelPairedCircleInfoMdRegularIcon } from '@deriv/quill-icons'; -import { Tab, Tabs, Text } from '@deriv-com/ui'; - -const RegulationSwitcherDesktop = () => { - const { uiState } = useUIContext(); - const { openModal } = useQueryParams(); - const { buttons, handleButtonClick } = useRegulationSwitcher(); - const activeRegulation = uiState.regulation; - - return ( -
-
- Regulation: - openModal('RegulationModal')} - /> -
- handleButtonClick(buttons[index].label)} - variant='primary' - > - {buttons.map(button => ( - - ))} - -
- ); -}; - -export default RegulationSwitcherDesktop; diff --git a/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherMobile.tsx b/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherMobile.tsx deleted file mode 100644 index d8be659ad075..000000000000 --- a/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherMobile.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import InfoIcon from '@/assets/svgs/ic-info-outline.svg'; -import { useQueryParams, useRegulationSwitcher } from '@/hooks'; -import { useUIContext } from '@/providers'; -import { Tab, Tabs } from '@deriv-com/ui'; - -const RegulationSwitcherMobile = () => { - const { uiState } = useUIContext(); - const { openModal } = useQueryParams(); - - const { buttons, handleButtonClick } = useRegulationSwitcher(); - - const activeRegulation = uiState.regulation; - - return ( -
- openModal('RegulationModal')} /> - handleButtonClick(buttons[index].label)} - variant='secondary' - > - {buttons.map(button => ( - - ))} - -
- ); -}; - -export default RegulationSwitcherMobile; diff --git a/packages/tradershub/src/components/RegulationSwitcher/index.ts b/packages/tradershub/src/components/RegulationSwitcher/index.ts deleted file mode 100644 index 70a53ab3ec1a..000000000000 --- a/packages/tradershub/src/components/RegulationSwitcher/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as RegulationSwitcherDesktop } from './RegulationSwitcherDesktop'; -export { default as RegulationSwitcherMobile } from './RegulationSwitcherMobile'; diff --git a/packages/tradershub/src/components/RegulationTableContent/RegulationTableContent.tsx b/packages/tradershub/src/components/RegulationTableContent/RegulationTableContent.tsx deleted file mode 100644 index 9e4cb3366104..000000000000 --- a/packages/tradershub/src/components/RegulationTableContent/RegulationTableContent.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import { getCFDContents, getOptionsContents } from '@/constants'; -import { Text } from '@deriv-com/ui'; -import Row from './Row'; - -const RegulationTitle = ['Non-EU regulation', 'EU regulation'] as const; - -const TableHeader = () => ( - - - - {RegulationTitle.map(title => ( - - - {title} - - - ))} - - -); - -const TableBody = () => { - const combinedContents = [...getCFDContents, ...getOptionsContents]; - - return ( - - {combinedContents.map((row, idx) => ( - - ))} - - ); -}; - -const RegulationTableContent = () => ( -
- - - -
-
-); - -export default RegulationTableContent; diff --git a/packages/tradershub/src/components/RegulationTableContent/Row.tsx b/packages/tradershub/src/components/RegulationTableContent/Row.tsx deleted file mode 100644 index 513348373b82..000000000000 --- a/packages/tradershub/src/components/RegulationTableContent/Row.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; -import { twMerge } from 'tailwind-merge'; -import { Text } from '@deriv-com/ui'; -import { TRegulatorsContentProps, TRowItem } from '../../constants/regulators-modal-content'; - -type TRowProps = TRegulatorsContentProps & { - idx?: number; -}; - -const Row = ({ attribute, content, id, idx }: TRowProps) => ( - - - - {attribute} - - - {Object.keys(content).map(rowKey => ( - -
- {Array.isArray(content[rowKey]) ? ( - (content[rowKey] as TRowItem[])?.map(item => ( - - {item?.text} - {item?.options?.shouldShowAsteriskAtEnd && *} - - )) - ) : ( - - {(content[rowKey] as TRowItem)?.text} - - )} -
- - ))} - -); - -export default Row; diff --git a/packages/tradershub/src/components/RegulationTableContent/index.ts b/packages/tradershub/src/components/RegulationTableContent/index.ts deleted file mode 100644 index 93ab2eb7e0f7..000000000000 --- a/packages/tradershub/src/components/RegulationTableContent/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as RegulationTableContent } from './RegulationTableContent'; diff --git a/packages/tradershub/src/components/SentEmailContent/SentEmailContent.tsx b/packages/tradershub/src/components/SentEmailContent/SentEmailContent.tsx deleted file mode 100644 index 6d2686693d59..000000000000 --- a/packages/tradershub/src/components/SentEmailContent/SentEmailContent.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import React, { Fragment, useEffect, useState } from 'react'; -import { useCountdown } from 'usehooks-ts'; -import ChangePassword from '@/assets/svgs/change-password-email.svg'; -import { ActionScreen } from '@/components'; -import { useCFDContext } from '@/providers'; -import { platformPasswordResetRedirectLink } from '@/utils'; -import { PlatformDetails } from '@cfd/constants'; -import { useActiveTradingAccount, useSettings, useVerifyEmail } from '@deriv/api-v2'; -import { Button, useDevice } from '@deriv-com/ui'; - -const SentEmailContent = () => { - const { cfdState } = useCFDContext(); - const { platform, description, isInvestorPassword } = cfdState; - const [shouldShowResendEmailReasons, setShouldShowResendEmailReasons] = useState(false); - const [hasCountdownStarted, setHasCountdownStarted] = useState(false); - const { data } = useSettings(); - const { mutate: verifyEmail } = useVerifyEmail(); - const { isDesktop } = useDevice(); - const mt5Platform = PlatformDetails.mt5.platform; - const title = PlatformDetails[platform ?? mt5Platform].title; - const titleSize = 'md'; - const descriptionSize = 'sm'; - const emailLinkSize = isDesktop ? 'md' : 'lg'; - const [count, { resetCountdown, startCountdown }] = useCountdown({ - countStart: 60, - intervalMs: 1000, - }); - - useEffect(() => { - if (count === 0) setHasCountdownStarted(false); - }, [count]); - - const { data: activeTrading } = useActiveTradingAccount(); - - const renderButton = () => { - if (shouldShowResendEmailReasons && isInvestorPassword) { - return null; - } - return ( - - ); - }; - - const handleButtonClick = () => { - if (data?.email) { - verifyEmail({ - type: - platform === mt5Platform - ? 'trading_platform_mt5_password_reset' - : 'trading_platform_dxtrade_password_reset', - url_parameters: { - redirect_to: platformPasswordResetRedirectLink(platform ?? mt5Platform, activeTrading?.is_virtual), - }, - verify_email: data?.email, - }); - resetCountdown(); - startCountdown(); - setHasCountdownStarted(true); - } - }; - - return ( -
- } - renderButtons={renderButton} - title='We’ve sent you an email' - titleSize={titleSize} - /> - {shouldShowResendEmailReasons && ( - - {isInvestorPassword && ( -
- -
- )} - - - )} -
- ); -}; - -export default SentEmailContent; diff --git a/packages/tradershub/src/components/SentEmailContent/index.ts b/packages/tradershub/src/components/SentEmailContent/index.ts deleted file mode 100644 index 41e80af43120..000000000000 --- a/packages/tradershub/src/components/SentEmailContent/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SentEmailContent } from './SentEmailContent'; diff --git a/packages/tradershub/src/components/StaticLink/StaticLink.tsx b/packages/tradershub/src/components/StaticLink/StaticLink.tsx deleted file mode 100644 index 8d9ba3ef6f61..000000000000 --- a/packages/tradershub/src/components/StaticLink/StaticLink.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React, { AnchorHTMLAttributes, ReactNode } from 'react'; -import { twMerge } from 'tailwind-merge'; -import { URLUtils } from '@deriv-com/utils'; - -type StaticLinkProps = { - children: ReactNode; - className?: string; - href?: AnchorHTMLAttributes['href']; - onClick?: AnchorHTMLAttributes['onClick']; - staticUrl?: AnchorHTMLAttributes['href']; -}; - -/** - * `StaticLink` is a component that renders a link with static URL support. - * @param {object} props - The properties that define the `StaticLink` component. - * @param {ReactNode} props.children - The content to be wrapped by the link. - * @param {string} [props.className] - Optional additional CSS classes to apply. - * @param {AnchorHTMLAttributes['href']} [props.href] - The URL that the link points to. - * @param {AnchorHTMLAttributes['href']} [props.staticUrl] - A static URL that the link points to. - * @returns {ElementType} The `StaticLink` component. - */ -const StaticLink = ({ children, className, href, staticUrl, onClick }: StaticLinkProps) => { - const { getDerivStaticURL } = URLUtils; - const link = href ?? (staticUrl && getDerivStaticURL(staticUrl)); - const isNewTab = href || staticUrl; - return ( - - {children} - - ); -}; - -export default StaticLink; diff --git a/packages/tradershub/src/components/StaticLink/index.ts b/packages/tradershub/src/components/StaticLink/index.ts deleted file mode 100644 index e4a986fda3cd..000000000000 --- a/packages/tradershub/src/components/StaticLink/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as StaticLink } from './StaticLink'; diff --git a/packages/tradershub/src/components/Tooltip/Tooltip.classnames.ts b/packages/tradershub/src/components/Tooltip/Tooltip.classnames.ts deleted file mode 100644 index 45dde72b5189..000000000000 --- a/packages/tradershub/src/components/Tooltip/Tooltip.classnames.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { cva, VariantProps } from 'class-variance-authority'; - -export const TooltipClass = cva('z-10 absolute invisible flex flex-col peer-hover:visible', { - variants: { - alignment: { - bottom: 'top-full right-0', - left: 'right-full top-1/2 transform -translate-y-1/2', - right: 'left-full top-1/2 transform -translate-y-1/2', - top: 'bottom-full transform -translate-x-1/2', - }, - }, -}); - -export const TooltipPointerClass = cva('absolute transform rotate-45 h-8 w-8 bg-system-light-active-background', { - variants: { - alignment: { - bottom: '-top-2 right-1/4 transform -translate-x-1/2', - left: 'top-1/2 -right-2 transform -translate-y-1/2', - right: 'top-1/2 -left-2 transform -translate-y-1/2', - top: '-bottom-2 right-1/4 transform -translate-x-1/2', - }, - }, -}); - -export type TooltipProps = NonNullable>; diff --git a/packages/tradershub/src/components/Tooltip/Tooltip.tsx b/packages/tradershub/src/components/Tooltip/Tooltip.tsx deleted file mode 100644 index 8a305564df92..000000000000 --- a/packages/tradershub/src/components/Tooltip/Tooltip.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React, { ReactNode } from 'react'; -import { twMerge } from 'tailwind-merge'; -import { Text } from '@deriv-com/ui'; -import { TooltipClass, TooltipPointerClass } from './Tooltip.classnames'; - -/** - * Props for the Tooltip component. - * @typedef {Object} TTooltipProps - * @property {'bottom' | 'left' | 'right' | 'top'} [alignment='left'] - The alignment of the tooltip. - * @property {ReactNode} children - The content that triggers the tooltip. - * @property {string} [className] - Additional CSS class for styling. - * @property {string} message - The message to be displayed in the tooltip. - */ -type TTooltipProps = { - alignment: 'bottom' | 'left' | 'right' | 'top'; - children: ReactNode; - className?: string; - isVisible: boolean; - message: string; -}; - -/** - * Tooltip component for displaying additional information. - * @param {TTooltipProps} props - The properties that define the Tooltip component. - * @returns {JSX.Element} - * - * @example - * ```jsx - * - * - * - * ``` - */ -const Tooltip = ({ alignment = 'bottom', children, className, message }: TTooltipProps) => { - return ( -
-
{children}
- -
-
- - - {message} - -
-
- ); -}; - -export default Tooltip; diff --git a/packages/tradershub/src/components/Tooltip/index.ts b/packages/tradershub/src/components/Tooltip/index.ts deleted file mode 100644 index 49ab72ce0238..000000000000 --- a/packages/tradershub/src/components/Tooltip/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Tooltip } from './Tooltip'; diff --git a/packages/tradershub/src/components/TotalAssets/TotalAssets.tsx b/packages/tradershub/src/components/TotalAssets/TotalAssets.tsx deleted file mode 100644 index 0d0d3786098b..000000000000 --- a/packages/tradershub/src/components/TotalAssets/TotalAssets.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import { twMerge } from 'tailwind-merge'; -import { TotalAssetsLoader } from '@/components'; -import { useTotalAssets } from '@/hooks'; -import { useActiveTradingAccount } from '@deriv/api-v2'; -import { Text } from '@deriv-com/ui'; - -const TotalAssets = () => { - const { data: totalAssets, isSuccess } = useTotalAssets(); - const { data: activeTrading } = useActiveTradingAccount(); - - if (!isSuccess) return ; - - return ( -
-
- Total assets -
- - {totalAssets} - -
- ); -}; - -export default TotalAssets; diff --git a/packages/tradershub/src/components/TotalAssets/index.ts b/packages/tradershub/src/components/TotalAssets/index.ts deleted file mode 100644 index 9e6068b9a768..000000000000 --- a/packages/tradershub/src/components/TotalAssets/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TotalAssets } from './TotalAssets'; diff --git a/packages/tradershub/src/components/TradersHub/TradersHub.tsx b/packages/tradershub/src/components/TradersHub/TradersHub.tsx deleted file mode 100644 index cbd506f908a9..000000000000 --- a/packages/tradershub/src/components/TradersHub/TradersHub.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React, { Fragment } from 'react'; -import { AppContainer, EUDisclaimerMessage } from '@/components'; -import { useRegulationFlags } from '@/hooks'; -import { TradersHubRoute } from '@/routes'; - -const TradersHub = () => { - const { isEU } = useRegulationFlags(); - - return ( - - - - - {isEU && } - - ); -}; - -export default TradersHub; diff --git a/packages/tradershub/src/components/TradersHub/index.ts b/packages/tradershub/src/components/TradersHub/index.ts deleted file mode 100644 index 82f59129def5..000000000000 --- a/packages/tradershub/src/components/TradersHub/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TradersHub } from './TradersHub'; diff --git a/packages/tradershub/src/components/TradersHubDesktopContent/TradersHubDesktopContent.tsx b/packages/tradershub/src/components/TradersHubDesktopContent/TradersHubDesktopContent.tsx deleted file mode 100644 index 86b80d3f0622..000000000000 --- a/packages/tradershub/src/components/TradersHubDesktopContent/TradersHubDesktopContent.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { twMerge } from 'tailwind-merge'; -import { CFDSection, OptionsAndMultipliersSection } from '@/components'; -import { useRegulationFlags } from '@/hooks'; - -const TradersHubDesktopContent = () => { - const { isEU } = useRegulationFlags(); - - return ( -
- - -
- ); -}; - -export default TradersHubDesktopContent; diff --git a/packages/tradershub/src/components/TradersHubDesktopContent/index.ts b/packages/tradershub/src/components/TradersHubDesktopContent/index.ts deleted file mode 100644 index 5f193f0084bb..000000000000 --- a/packages/tradershub/src/components/TradersHubDesktopContent/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TradersHubDesktopContent } from './TradersHubDesktopContent'; diff --git a/packages/tradershub/src/components/TradersHubHeader/TradersHubHeader.tsx b/packages/tradershub/src/components/TradersHubHeader/TradersHubHeader.tsx deleted file mode 100644 index 20652b14415a..000000000000 --- a/packages/tradershub/src/components/TradersHubHeader/TradersHubHeader.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { DemoRealSwitcher } from '@/components'; -import { Text } from '@deriv-com/ui'; - -const TradersHubHeader = () => { - return ( -
- Trader's Hub - -
- ); -}; - -export default TradersHubHeader; diff --git a/packages/tradershub/src/components/TradersHubHeader/index.ts b/packages/tradershub/src/components/TradersHubHeader/index.ts deleted file mode 100644 index 09be05899867..000000000000 --- a/packages/tradershub/src/components/TradersHubHeader/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TradersHubHeader } from './TradersHubHeader'; diff --git a/packages/tradershub/src/components/TradersHubMobileContent/TradersHubMobileContent.tsx b/packages/tradershub/src/components/TradersHubMobileContent/TradersHubMobileContent.tsx deleted file mode 100644 index 110f645abf2e..000000000000 --- a/packages/tradershub/src/components/TradersHubMobileContent/TradersHubMobileContent.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React, { Fragment } from 'react'; -import { CFDSection, OptionsAndMultipliersSection } from '@/components'; -import { Tab, Tabs } from '@deriv-com/ui'; - -const TradersHubMobileContent = () => { - return ( - - - - - - - - - - - - ); -}; - -export default TradersHubMobileContent; diff --git a/packages/tradershub/src/components/TradersHubMobileContent/index.ts b/packages/tradershub/src/components/TradersHubMobileContent/index.ts deleted file mode 100644 index 8a61411bace4..000000000000 --- a/packages/tradershub/src/components/TradersHubMobileContent/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TradersHubMobileContent } from './TradersHubMobileContent'; diff --git a/packages/tradershub/src/components/TradingAccountCard/TradingAccountCard.scss b/packages/tradershub/src/components/TradingAccountCard/TradingAccountCard.scss deleted file mode 100644 index 472a6451518e..000000000000 --- a/packages/tradershub/src/components/TradingAccountCard/TradingAccountCard.scss +++ /dev/null @@ -1,33 +0,0 @@ -.wallets-trading-account-card { - display: flex; - align-items: center; - gap: 16px; - height: 88px; - - @include desktop { - $columns: 3; - $grid-last-row-children: '&:nth-child(#{$columns}n+1):nth-last-child(-n+#{$columns})'; - #{$grid-last-row-children} > &__content, - #{$grid-last-row-children} ~ & > &__content { - border-bottom: none; - } - } - - @include mobile { - $columns: 1; - $grid-last-row-children: '&:nth-child(#{$columns}n+1):nth-last-child(-n+#{$columns})'; - #{$grid-last-row-children} > &__content, - #{$grid-last-row-children} ~ & > &__content { - border-bottom: none; - } - } - - &__content { - display: flex; - gap: 16px; - align-items: center; - flex-grow: 1; - height: 100%; - border-bottom: 1px solid var(--system-light-6-hover-background, #e6e9e9); - } -} diff --git a/packages/tradershub/src/components/TradingAccountCard/TradingAccountCard.tsx b/packages/tradershub/src/components/TradingAccountCard/TradingAccountCard.tsx deleted file mode 100644 index 90f3d01784a1..000000000000 --- a/packages/tradershub/src/components/TradingAccountCard/TradingAccountCard.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React, { ReactNode } from 'react'; -import './TradingAccountCard.scss'; - -type TTradingAccountCardProps = { - children: ReactNode; - leading?: () => ReactNode; - trailing?: () => ReactNode; -}; - -const TradingAccountCard = ({ children, leading, trailing }: TTradingAccountCardProps) => { - return ( -
- {leading?.()} -
- {children} - {trailing?.()} -
-
- ); -}; - -export default TradingAccountCard; diff --git a/packages/tradershub/src/components/TradingAccountCard/TradingAccountCardComponent.tsx b/packages/tradershub/src/components/TradingAccountCard/TradingAccountCardComponent.tsx deleted file mode 100644 index 52df61cd1c63..000000000000 --- a/packages/tradershub/src/components/TradingAccountCard/TradingAccountCardComponent.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React, { ComponentProps } from 'react'; -import { Button, Text } from '@deriv-com/ui'; - -type TTradingAccountCardContent = { - children: string; - title: string; -}; - -export const TradingAccountCardContent = ({ children, title }: TTradingAccountCardContent) => ( -
- - {title} - - - {children} - -
-); - -type TTradingAccountCardButton = { - onSubmit?: ComponentProps['onClick']; -}; - -export const TradingAccountCardLightButton = ({ onSubmit }: TTradingAccountCardButton) => ( - -); diff --git a/packages/tradershub/src/components/TradingAccountCard/index.ts b/packages/tradershub/src/components/TradingAccountCard/index.ts deleted file mode 100644 index 025441dc39b2..000000000000 --- a/packages/tradershub/src/components/TradingAccountCard/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as TradingAccountCard } from './TradingAccountCard'; -export * from './TradingAccountCardComponent'; diff --git a/packages/tradershub/src/components/TradingAccountsList/TradingAccountsList.tsx b/packages/tradershub/src/components/TradingAccountsList/TradingAccountsList.tsx deleted file mode 100644 index f7fa7dd9ee63..000000000000 --- a/packages/tradershub/src/components/TradingAccountsList/TradingAccountsList.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; -import { twMerge } from 'tailwind-merge'; -import { IconComponent } from '@/components'; -import { IconToCurrencyMapper } from '@/constants'; -import { useQueryParams, useRegulationFlags } from '@/hooks'; -import { useActiveTradingAccount, useAuthorize, useTradingAccountsList } from '@deriv/api-v2'; -import { Text } from '@deriv-com/ui'; - -const TradingAccountsList = () => { - const { data: tradingAccountsList } = useTradingAccountsList(); - const { data: activeAccount } = useActiveTradingAccount(); - const { switchAccount } = useAuthorize(); - const { isEU } = useRegulationFlags(); - const { closeModal } = useQueryParams(); - - const handleSwitchAccount = (loginid: string) => { - switchAccount(loginid); - closeModal(); - }; - - return ( -
-
- {tradingAccountsList - ?.filter( - account => !account.is_virtual && (isEU ? account.broker === 'MF' : account.broker === 'CR') - ) - .map(account => { - const iconCurrency = account.currency ?? 'USD'; - return ( - - ); - })} -
-
- ); -}; - -export default TradingAccountsList; diff --git a/packages/tradershub/src/components/TradingAccountsList/index.ts b/packages/tradershub/src/components/TradingAccountsList/index.ts deleted file mode 100644 index 59e5f2cc93b7..000000000000 --- a/packages/tradershub/src/components/TradingAccountsList/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TradingAccountsList } from './TradingAccountsList'; diff --git a/packages/tradershub/src/components/index.ts b/packages/tradershub/src/components/index.ts deleted file mode 100644 index d7e892bf31c1..000000000000 --- a/packages/tradershub/src/components/index.ts +++ /dev/null @@ -1,26 +0,0 @@ -export * from './ActionScreen'; -export * from './AppContainer'; -export * from './ButtonGroup'; -export * from './CFDSection'; -export * from './Clipboard'; -export * from './CurrencySwitcher'; -export * from './DemoRealSwitcher'; -export * from './EUDisclaimerMessage'; -export * from './GetADerivAccountBanner'; -export * from './GetDerivAccount'; -export * from './IconComponent'; -export * from './Loaders'; -export * from './OptionsAndMultipliersSection'; -export * from './ProgressBar'; -export * from './RegulationSwitcher'; -export * from './RegulationTableContent'; -export * from './SentEmailContent'; -export * from './StaticLink'; -export * from './Tooltip'; -export * from './TotalAssets'; -export * from './TradersHub'; -export * from './TradersHubDesktopContent'; -export * from './TradersHubHeader'; -export * from './TradersHubMobileContent'; -export * from './TradingAccountCard'; -export * from './TradingAccountsList'; diff --git a/packages/tradershub/src/constants/constants.tsx b/packages/tradershub/src/constants/constants.tsx deleted file mode 100644 index f9315cae6943..000000000000 --- a/packages/tradershub/src/constants/constants.tsx +++ /dev/null @@ -1,140 +0,0 @@ -import React from 'react'; -import { - CurrencyAudIcon, - CurrencyBtcIcon, - CurrencyDemoIcon, - CurrencyEthIcon, - CurrencyEurIcon, - CurrencyGbpIcon, - CurrencyLtcIcon, - CurrencyUsdcIcon, - CurrencyUsdIcon, - CurrencyUsdtIcon, -} from '@deriv/quill-icons'; -import { URLUtils } from '@deriv-com/utils'; -import { IconComponent } from '../components'; -import { getUrlBinaryBot, getUrlSmartTrader } from '../helpers/urls'; - -const { getDerivStaticURL } = URLUtils; - -export type IconToCurrencyMapperType = { - [key: string]: { - icon: React.ReactNode; - text: string; - }; -}; - -export const optionsAndMultipliersContent = (isEU: boolean) => [ - { - description: isEU ? 'Multipliers trading platform.' : 'Options and multipliers trading platform.', - icon: , - redirect: '/dtrader', - smallIcon: , - title: 'Deriv Trader', - }, - { - description: 'Automate your trading, no coding needed.', - icon: , - redirect: '/bot', - smallIcon: , - title: 'Deriv Bot', - }, - { - description: 'Our legacy options trading platform.', - icon: , - isExternal: true, - redirect: getUrlSmartTrader(), - smallIcon: , - title: 'SmartTrader', - }, - { - description: 'Our legacy automated trading platform.', - icon: , - isExternal: true, - redirect: getUrlBinaryBot(), - smallIcon: , - title: 'Binary Bot', - }, - { - description: 'Trade on the go with our mobile app.', - icon: , - isExternal: true, - redirect: getDerivStaticURL('/deriv-go'), - smallIcon: , - title: 'Deriv GO', - }, -]; - -export const IconToCurrencyMapper: IconToCurrencyMapperType = { - AUD: { - icon: , - text: 'Australian Dollar', - }, - BTC: { - icon: , - text: 'Bitcoin', - }, - ETH: { - icon: , - text: 'Ethereum', - }, - EUR: { - icon: , - text: 'Euro', - }, - eUSDT: { - icon: , - text: 'Tether ERC20', - }, - GBP: { - icon: , - text: 'Pound Sterling', - }, - LTC: { - icon: , - text: 'Litecoin', - }, - tUSDT: { - icon: , - text: 'Tether TRC20', - }, - USD: { - icon: , - text: 'US Dollar', - }, - USDC: { - icon: , - text: 'USD Coin', - }, - UST: { - icon: , - text: 'Tether', - }, - virtual: { - icon: , - text: 'Demo', - }, -}; - -export const CurrencyTypes = { - CRYPTO: 'CRYPTO', - FIAT: 'FIAT', -} as const; - -export const Regulation = { - EU: 'EU', - NonEU: 'Non-EU', -} as const; - -export const BrokerCodes = { - CR: 'CR', - MF: 'MF', -} as const; - -export const CurrenciesListOrder: { - CRYPTO: string[]; - FIAT: string[]; -} = { - FIAT: ['USD', 'EUR', 'GBP', 'AUD'], - CRYPTO: ['TUSDT', 'BTC', 'ETH', 'LTC', 'UST', 'eUSDT', 'BUSD', 'DAI', 'EURS', 'IDK', 'PAX', 'TUSD', 'USDC', 'USDK'], -}; diff --git a/packages/tradershub/src/constants/index.ts b/packages/tradershub/src/constants/index.ts deleted file mode 100644 index 60ef56dbd30a..000000000000 --- a/packages/tradershub/src/constants/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './constants'; -export * from './password'; -export * from './regulators-modal-content'; diff --git a/packages/tradershub/src/constants/password.ts b/packages/tradershub/src/constants/password.ts deleted file mode 100644 index 6f8ef03c29ee..000000000000 --- a/packages/tradershub/src/constants/password.ts +++ /dev/null @@ -1,16 +0,0 @@ -export const passwordRegex = { - hasLowerCase: /[a-z]/, - hasNumber: /\d/, - hasSymbol: /\W/, - hasUpperCase: /[A-Z]/, - isLengthValid: /^.{8,25}$/, - isPasswordValid: /^(?=.*[a-z])(?=.*\d)(?=.*[A-Z])[!-~]{8,25}$/, -}; - -export const passwordRegexDescription = [ - '8 to 16 characters', - 'A special character such as ( _ @ ? ! / # )', - 'An uppercase letter', - 'A lowercase letter', - 'A number', -]; diff --git a/packages/tradershub/src/constants/regulators-modal-content.ts b/packages/tradershub/src/constants/regulators-modal-content.ts deleted file mode 100644 index f0178e9f078f..000000000000 --- a/packages/tradershub/src/constants/regulators-modal-content.ts +++ /dev/null @@ -1,176 +0,0 @@ -/* eslint-disable sort-keys */ -import { ComponentProps } from 'react'; -import { Text } from '@deriv-com/ui'; - -export type TRowItem = { - options?: { - align?: ComponentProps['align']; - color?: ComponentProps['color']; - shouldShowAsteriskAtEnd?: boolean; - weight?: ComponentProps['weight']; - }; - text: string; -}; - -type TRegulatorContent = Record; - -export type TRegulatorsContentProps = { - attribute: string; - content: TRegulatorContent; - id: string; -}; - -export const getCFDContents: TRegulatorsContentProps[] = [ - { - attribute: 'CFDs', - content: { - euRegulator: { text: 'Yes' }, - nonEuRegulator: { text: 'Yes' }, - }, - id: 'cfds', - }, - { - attribute: 'Regulators/external dispute resolution', - content: { - euRegulator: { text: 'Malta Financial Services Authority' }, - nonEuRegulator: [ - { text: 'Financial Commission' }, - { text: 'British Virgin Islands Financial Services Commission' }, - { text: 'Vanuatu Financial Services Commission' }, - { text: 'Labuan Financial Services Authority' }, - ], - }, - id: 'regulators', - }, - { - attribute: 'Counterparty company', - content: { - euRegulator: { text: 'Deriv Investments (Europe) Limited' }, - nonEuRegulator: [ - { text: 'Deriv (SVG) LLC' }, - { text: 'Deriv (BVI) Ltd' }, - { text: 'Deriv (V) Ltd' }, - { text: 'Deriv (FX) Ltd' }, - ], - }, - id: 'counterparty_company', - }, - { - attribute: 'Negative balance protection', - content: { - euRegulator: { text: 'All assets' }, - nonEuRegulator: { text: 'Synthetics only' }, - }, - id: 'negative_balance_protection', - }, - { - attribute: 'Leverage', - content: { - euRegulator: { text: '30' }, - nonEuRegulator: { text: '100-20' }, - }, - id: 'leverage', - }, - { - attribute: 'Assets', - content: { - euRegulator: [ - { options: { shouldShowAsteriskAtEnd: true }, text: 'Synthetics' }, - { text: 'Forex' }, - { text: 'Stocks' }, - { text: 'Stock indices' }, - { text: 'Commodities' }, - { text: 'Cryptocurrencies' }, - { - options: { color: 'error', weight: 'bold' }, - text: '*Boom 300 and Crash 300 Index', - }, - { - options: { color: 'error', weight: 'bold' }, - text: '*Volatility 150 Index and Volatility 250 Index', - }, - ], - nonEuRegulator: [ - { text: 'Synthetics' }, - { text: 'Baskets' }, - { text: 'Derived FX' }, - { text: 'Forex' }, - { text: 'Stocks' }, - { text: 'Stock indices' }, - { text: 'Commodities' }, - { text: 'Cryptocurrencies' }, - ], - }, - id: 'assets', - }, - { - attribute: 'Platform', - content: { - euRegulator: { text: 'Deriv MT5' }, - nonEuRegulator: { text: 'Deriv MT5, Deriv X' }, - }, - id: 'platform', - }, -]; - -export const getOptionsContents: TRegulatorsContentProps[] = [ - { - attribute: 'Options & Multipliers', - content: { - euRegulator: { options: { weight: 'bold' }, text: 'Multipliers only' }, - nonEuRegulator: { text: 'Yes' }, - }, - id: 'options', - }, - { - attribute: 'Regulators/external dispute resolution', - content: { - euRegulator: { text: 'Malta Financial Services Authority' }, - nonEuRegulator: { text: 'Financial Commission' }, - }, - id: 'regulator_in_options', - }, - { - attribute: 'Counterparty company', - content: { - euRegulator: { text: 'Deriv Investments (Europe) Limited' }, - nonEuRegulator: { text: 'Deriv (SVG) LLC' }, - }, - id: 'counterparty_company_in_options', - }, - { - attribute: 'Assets', - content: { - euRegulator: [ - { - options: { shouldShowAsteriskAtEnd: true }, - text: 'Synthetics', - }, - { text: 'Forex' }, - { text: 'Cryptocurrencies' }, - { - options: { color: 'error', weight: 'bold' }, - text: '*Boom 300 and Crash 300 Index', - }, - ], - nonEuRegulator: [ - { text: 'Synthetics' }, - { text: 'Baskets' }, - { text: 'Forex' }, - { text: 'Stocks' }, - { text: 'Stock indices' }, - { text: 'Commodities' }, - { text: 'Cryptocurrencies' }, - ], - }, - id: 'assets_in_options', - }, - { - attribute: 'Platform', - content: { - euRegulator: { text: 'DTrader' }, - nonEuRegulator: { text: 'DTrader, DBot, SmartTrader, and Binary Bot' }, - }, - id: 'platform_in_options', - }, -]; diff --git a/packages/tradershub/src/features/cfd/components/CFDPlatformLayout/CFDPlatformLayout.tsx b/packages/tradershub/src/features/cfd/components/CFDPlatformLayout/CFDPlatformLayout.tsx deleted file mode 100644 index 5264e4a6c497..000000000000 --- a/packages/tradershub/src/features/cfd/components/CFDPlatformLayout/CFDPlatformLayout.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React, { ReactNode } from 'react'; -import { Text } from '@deriv-com/ui'; - -type TCFDPlatformLayout = { - children: ReactNode; - title: string; -}; - -const CFDPlatformLayout = ({ children, title }: TCFDPlatformLayout) => ( -
- - {title} - -
{children}
-
-); - -export default CFDPlatformLayout; diff --git a/packages/tradershub/src/features/cfd/components/CFDPlatformLayout/index.ts b/packages/tradershub/src/features/cfd/components/CFDPlatformLayout/index.ts deleted file mode 100644 index d08849a66a25..000000000000 --- a/packages/tradershub/src/features/cfd/components/CFDPlatformLayout/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as CFDPlatformLayout } from './CFDPlatformLayout'; diff --git a/packages/tradershub/src/features/cfd/components/CTraderList/CTraderList.tsx b/packages/tradershub/src/features/cfd/components/CTraderList/CTraderList.tsx deleted file mode 100644 index 042a31d05c82..000000000000 --- a/packages/tradershub/src/features/cfd/components/CTraderList/CTraderList.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import { TradingAppCardLoader } from '@/components'; -import { useUIContext } from '@/providers'; -import { THooks } from '@/types'; -import { CFDPlatformLayout } from '@cfd/components'; -import { PlatformDetails } from '@cfd/constants'; -import { AddedCTraderAccountsList, AvailableCTraderAccountsList } from '@cfd/flows'; -import { useActiveTradingAccount, useCtraderAccountsList } from '@deriv/api-v2'; - -const CTraderList = () => { - const { uiState } = useUIContext(); - const { accountType } = uiState; - const { data: cTraderAccounts, isFetchedAfterMount } = useCtraderAccountsList(); - const { data: activeTradingAccount } = useActiveTradingAccount(); - - const hasCTraderAccount = cTraderAccounts?.some( - (account: THooks.CtraderAccountsList) => - account.is_virtual === activeTradingAccount?.is_virtual && account.account_type === accountType - ); - - return ( - - {!isFetchedAfterMount && } - {isFetchedAfterMount && - (hasCTraderAccount ? : )} - - ); -}; - -export default CTraderList; diff --git a/packages/tradershub/src/features/cfd/components/CTraderList/index.ts b/packages/tradershub/src/features/cfd/components/CTraderList/index.ts deleted file mode 100644 index fec483eec749..000000000000 --- a/packages/tradershub/src/features/cfd/components/CTraderList/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as CTraderList } from './CTraderList'; diff --git a/packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarousel.tsx b/packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarousel.tsx deleted file mode 100644 index bfc3dc43bcca..000000000000 --- a/packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarousel.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React, { PropsWithChildren, useCallback, useEffect, useState } from 'react'; -import useEmblaCarousel, { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel-react'; -import CFDCompareAccountsCarouselButton from './CompareAccountsCarouselButton'; - -const CompareAccountsCarousel = ({ children }: PropsWithChildren) => { - const options: EmblaOptionsType = { - align: 0, - containScroll: 'trimSnaps', - }; - const [emblaRef, emblaApi] = useEmblaCarousel(options); - const [prevBtnEnabled, setPrevBtnEnabled] = useState(false); - const [nextBtnEnabled, setNextBtnEnabled] = useState(false); - - const scrollPrev = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]); - const scrollNext = useCallback(() => emblaApi?.scrollNext(), [emblaApi]); - - const onSelect = useCallback((emblaApi: EmblaCarouselType) => { - setPrevBtnEnabled(emblaApi.canScrollPrev()); - setNextBtnEnabled(emblaApi.canScrollNext()); - }, []); - - useEffect(() => { - if (!emblaApi) return; - - onSelect(emblaApi); - emblaApi.on('reInit', onSelect); - emblaApi.on('select', onSelect); - }, [emblaApi, onSelect]); - - return ( -
-
-
- {children} -
-
- - -
- ); -}; - -export default CompareAccountsCarousel; diff --git a/packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx b/packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx deleted file mode 100644 index 1a3eb105393b..000000000000 --- a/packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { twMerge } from 'tailwind-merge'; -import { LabelPairedChevronLeftMdRegularIcon, LabelPairedChevronRightMdRegularIcon } from '@deriv/quill-icons'; - -type TPrevNextButtonProps = { - enabled: boolean; - isNext?: boolean; - onClick: () => void; -}; - -const CFDCompareAccountsCarouselButton = ({ enabled, isNext = false, onClick }: TPrevNextButtonProps) => ( - -); -export default CFDCompareAccountsCarouselButton; diff --git a/packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/index.ts b/packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/index.ts deleted file mode 100644 index 1b0190cc15eb..000000000000 --- a/packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as CompareAccountsCarousel } from './CompareAccountsCarousel'; diff --git a/packages/tradershub/src/features/cfd/components/DummyComponent/DummyComponent.tsx b/packages/tradershub/src/features/cfd/components/DummyComponent/DummyComponent.tsx deleted file mode 100644 index 827c88b2e705..000000000000 --- a/packages/tradershub/src/features/cfd/components/DummyComponent/DummyComponent.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { Text } from '@deriv-com/ui'; - -/* - * This is a dummy component that is used as a placeholder for unavailable components. - */ -const DummyComponent = () => { - return ( -
- This is a Dummy Component -
- ); -}; - -export default DummyComponent; diff --git a/packages/tradershub/src/features/cfd/components/DummyComponent/index.ts b/packages/tradershub/src/features/cfd/components/DummyComponent/index.ts deleted file mode 100644 index 42bbc9b2c29d..000000000000 --- a/packages/tradershub/src/features/cfd/components/DummyComponent/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as DummyComponent } from './DummyComponent'; diff --git a/packages/tradershub/src/features/cfd/components/DynamicLeverageContext/DynamicLeverageContext.tsx b/packages/tradershub/src/features/cfd/components/DynamicLeverageContext/DynamicLeverageContext.tsx deleted file mode 100644 index 19e926935a49..000000000000 --- a/packages/tradershub/src/features/cfd/components/DynamicLeverageContext/DynamicLeverageContext.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { createContext, useContext } from 'react'; - -type TDynamicLeverageContext = { - isDynamicLeverageVisible: boolean; - toggleDynamicLeverage: () => void; -}; - -const DynamicLeverageContext = createContext({ - isDynamicLeverageVisible: false, - toggleDynamicLeverage: () => null, -}); - -export const useDynamicLeverageModalState = () => { - const context = useContext(DynamicLeverageContext); - - if (!context) - throw new Error( - 'useDynamicLeverageModalState() must be called within a component wrapped in DynamicLeverageProvider.' - ); - - return context; -}; - -export default DynamicLeverageContext; diff --git a/packages/tradershub/src/features/cfd/components/DynamicLeverageContext/index.ts b/packages/tradershub/src/features/cfd/components/DynamicLeverageContext/index.ts deleted file mode 100644 index 00f3c9dfe354..000000000000 --- a/packages/tradershub/src/features/cfd/components/DynamicLeverageContext/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import DynamicLeverageContext, { useDynamicLeverageModalState } from './DynamicLeverageContext'; - -export { DynamicLeverageContext, useDynamicLeverageModalState }; diff --git a/packages/tradershub/src/features/cfd/components/MT5PlatformsList/MT5PlatformsList.tsx b/packages/tradershub/src/features/cfd/components/MT5PlatformsList/MT5PlatformsList.tsx deleted file mode 100644 index f0077acf8335..000000000000 --- a/packages/tradershub/src/features/cfd/components/MT5PlatformsList/MT5PlatformsList.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React, { useEffect, useMemo } from 'react'; -import { TradingAppCardLoader } from '@/components'; -import { useRegulationFlags } from '@/hooks'; -import { useUIContext } from '@/providers'; -import { THooks } from '@/types'; -import { CFDPlatformLayout } from '@cfd/components'; -import { PlatformDetails } from '@cfd/constants'; -import { AddedMT5AccountsList, AvailableMT5AccountsList } from '@cfd/flows'; -import { GetMoreMT5Accounts } from '@cfd/screens'; -import { useActiveTradingAccount, useSortedMT5Accounts } from '@deriv/api-v2'; - -type TMT5PlatformsListProps = { - onMT5PlatformListLoaded?: (value: boolean) => void; -}; - -const MT5PlatformsList = ({ onMT5PlatformListLoaded }: TMT5PlatformsListProps) => { - const { uiState } = useUIContext(); - const { accountType, regulation: activeRegulation } = uiState; - const { - areAllAccountsCreated, - data: sortedMt5Accounts, - isFetchedAfterMount, - } = useSortedMT5Accounts(activeRegulation ?? ''); - const { data: activeTradingAccount } = useActiveTradingAccount(); - const { isEU } = useRegulationFlags(); - - const hasMT5Account = useMemo(() => { - return sortedMt5Accounts?.some(MT5Account => MT5Account.is_added); - }, [sortedMt5Accounts]); - - useEffect(() => { - onMT5PlatformListLoaded?.(isFetchedAfterMount); - return () => onMT5PlatformListLoaded?.(false); - }, [isFetchedAfterMount, onMT5PlatformListLoaded]); - - const shouldShowGetMoreMT5Accounts = - hasMT5Account && !activeTradingAccount?.is_virtual && !areAllAccountsCreated && !isEU && isFetchedAfterMount; - - return ( - - {!isFetchedAfterMount && ( -
- -
- )} - {isFetchedAfterMount && - sortedMt5Accounts?.map(MT5Account => { - if ( - MT5Account.is_added && - MT5Account.is_virtual === activeTradingAccount?.is_virtual && - MT5Account.account_type === accountType - ) - return ( - - ); - - return ( - - ); - })} - {shouldShowGetMoreMT5Accounts && } - - ); -}; - -export default MT5PlatformsList; diff --git a/packages/tradershub/src/features/cfd/components/MT5PlatformsList/index.ts b/packages/tradershub/src/features/cfd/components/MT5PlatformsList/index.ts deleted file mode 100644 index 3874ee4d73ef..000000000000 --- a/packages/tradershub/src/features/cfd/components/MT5PlatformsList/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as MT5PlatformsList } from './MT5PlatformsList'; diff --git a/packages/tradershub/src/features/cfd/components/OtherCFDPlatformsList/OtherCFDPlatformsList.tsx b/packages/tradershub/src/features/cfd/components/OtherCFDPlatformsList/OtherCFDPlatformsList.tsx deleted file mode 100644 index 750a925f9e76..000000000000 --- a/packages/tradershub/src/features/cfd/components/OtherCFDPlatformsList/OtherCFDPlatformsList.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { TradingAppCardLoader } from '@/components'; -import { useUIContext } from '@/providers'; -import { THooks } from '@/types'; -import { CFDPlatformLayout } from '@cfd/components'; -import { AddedDxtradeAccountsList, AvailableDxtradeAccountsList } from '@cfd/flows'; -import { useActiveTradingAccount, useDxtradeAccountsList } from '@deriv/api-v2'; - -const OtherCFDPlatformsList = () => { - const { uiState } = useUIContext(); - const { accountType } = uiState; - const { data: dxTradeAccounts, isFetchedAfterMount } = useDxtradeAccountsList(); - const { data: activeTradingAccount } = useActiveTradingAccount(); - - const hasDxtradeAccount = dxTradeAccounts?.some( - (account: THooks.DxtradeAccountsList) => - account.is_virtual === activeTradingAccount?.is_virtual && account.account_type === accountType - ); - - return ( - - {!isFetchedAfterMount && } - {isFetchedAfterMount && - (hasDxtradeAccount ? : )} - - ); -}; - -export default OtherCFDPlatformsList; diff --git a/packages/tradershub/src/features/cfd/components/OtherCFDPlatformsList/index.ts b/packages/tradershub/src/features/cfd/components/OtherCFDPlatformsList/index.ts deleted file mode 100644 index c883163dcf1a..000000000000 --- a/packages/tradershub/src/features/cfd/components/OtherCFDPlatformsList/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as OtherCFDPlatformsList } from './OtherCFDPlatformsList'; diff --git a/packages/tradershub/src/features/cfd/components/index.ts b/packages/tradershub/src/features/cfd/components/index.ts deleted file mode 100644 index 295acd5a326b..000000000000 --- a/packages/tradershub/src/features/cfd/components/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -export * from './CFDPlatformLayout'; -export * from './CompareAccountsCarousel'; -export * from './CTraderList'; -export * from './DummyComponent'; -export * from './DynamicLeverageContext'; -export * from './MT5PlatformsList'; -export * from './OtherCFDPlatformsList'; diff --git a/packages/tradershub/src/features/cfd/constants.tsx b/packages/tradershub/src/features/cfd/constants.tsx deleted file mode 100644 index 9bfe69da54f5..000000000000 --- a/packages/tradershub/src/features/cfd/constants.tsx +++ /dev/null @@ -1,256 +0,0 @@ -import React, { ComponentType, ReactNode, SVGAttributes } from 'react'; -import CTraderLabelIcon from '@/assets/svgs/ctrader-label.svg'; -import DerivXLabelIcon from '@/assets/svgs/derivx-label.svg'; -import InstallationAppleIcon from '@/assets/svgs/ic-installation-apple.svg'; -import InstallationGoogleIcon from '@/assets/svgs/ic-installation-google.svg'; -import InstallationHuaweiIcon from '@/assets/svgs/ic-installation-huawei.svg'; -import LinuxIcon from '@/assets/svgs/ic-linux-logo.svg'; -import MacOSIcon from '@/assets/svgs/ic-macos-logo.svg'; -import MT5Icon from '@/assets/svgs/ic-mt5.svg'; -import WindowsIcon from '@/assets/svgs/ic-windows-logo.svg'; -import { IconComponent } from '@/components'; -import { TJurisdiction, TMarketTypes, TPlatforms } from '@/types'; - -type TAppContent = { - description: string; - icon: ReactNode; - iconWithWidth?: (width: number) => JSX.Element; - link: string; - text: string; - title: string; -}; - -type TDesktopLinks = - | 'ctrader_mac' - | 'ctrader_web' - | 'ctrader_windows' - | 'dxtrade_web' - | 'mt5_linux' - | 'mt5_macos' - | 'mt5_web' - | 'mt5_windows'; - -export type TTM5FilterLandingCompany = Exclude; -type TLandingCompanyDetails = { name: string; shortcode: string; tncUrl: string }; - -type TMarketTypeDetails = { - [key in TMarketTypes.All]: Pick; -}; - -type TcompanyNamesAndUrls = { - [key in TTM5FilterLandingCompany]: TLandingCompanyDetails; -}; - -type TAppToContentMapper = { - [key in TDesktopLinks]: Omit; -}; - -type TPlatformUrls = { - [key in TPlatforms.OtherAccounts]: { - demo?: string; - live: string; - staging?: string; - }; -}; - -export const CFDPlatforms = { - CFDS: 'CFDs', - CTRADER: 'ctrader', - DXTRADE: 'dxtrade', - MT5: 'mt5', -} as const; - -export const DesktopLinks = { - CTRADER_WINDOWS: 'ctrader_windows', - CTRADER_MAC: 'ctrader_mac', - CTRADER_WEB: 'ctrader_web', - MT5_LINUX: 'mt5_linux', - MT5_MACOS: 'mt5_macos', - MT5_WEB: 'mt5_web', - MT5_WINDOWS: 'mt5_windows', - DXTRADE_WEB: 'dxtrade_web', -} as const; - -export const MarketType = { - ALL: 'all', - FINANCIAL: 'financial', - SYNTHETIC: 'synthetic', -} as const; - -export const Category = { - DEMO: 'demo', - REAL: 'real', -} as const; - -export const QueryStatus = { - ERROR: 'error', - IDLE: 'idle', - LOADING: 'loading', - SUCCESS: 'success', -} as const; - -export const MarketTypeDetails = (isEU?: boolean): TMarketTypeDetails => ({ - all: { - description: - 'Trade swap-free CFDs on MT5 with forex, stocks, stock indices, commodities, cryptocurrencies, ETFs and synthetic indices.', - icon: , - iconWithWidth: (width: number) => , - title: 'Swap-Free', - }, - financial: { - description: isEU - ? 'CFDs on derived and financial instruments.' - : 'This account offers CFDs on financial instruments.', - icon: , - iconWithWidth: (width: number) => , - title: isEU ? 'CFDs' : 'Financial', - }, - synthetic: { - description: 'This account offers CFDs on derived instruments.', - icon: , - iconWithWidth: (width: number) => , - title: 'Derived', - }, -}); - -export const PlatformDetails = { - ctrader: { - icon: (width?: number) => , - link: 'https://onelink.to/5jgj8z', - platform: 'ctrader' as TPlatforms.OtherAccounts, - title: 'Deriv cTrader', - }, - dxtrade: { - icon: (width?: number) => , - link: 'https://onelink.to/grmtyx', - platform: 'dxtrade' as TPlatforms.OtherAccounts, - title: 'Deriv X', - }, - mt5: { - icon: (width?: number) => , - link: 'https://onelink.to/grmtyx', - platform: 'mt5' as TPlatforms.MT5, - title: 'Deriv MT5', - }, -}; - -export const companyNamesAndUrls: TcompanyNamesAndUrls = { - bvi: { name: 'Deriv (BVI) Ltd', shortcode: 'BVI', tncUrl: 'tnc/deriv-(bvi)-ltd.pdf' }, - labuan: { name: 'Deriv (FX) Ltd', shortcode: 'Labuan', tncUrl: 'tnc/deriv-(fx)-ltd.pdf' }, - maltainvest: { - name: 'Deriv Investments (Europe) Limited', - shortcode: 'Maltainvest', - tncUrl: 'tnc/deriv-investments-(europe)-limited.pdf', - }, - svg: { name: 'Deriv (SVG) LLC', shortcode: 'SVG', tncUrl: 'tnc/deriv-(svg)-llc.pdf' }, - vanuatu: { name: 'Deriv (V) Ltd', shortcode: 'Vanuatu', tncUrl: 'tnc/general-terms.pdf' }, -}; - -const iconSize = { - width: 32, - height: 32, -}; - -export const AppToContentMapper: TAppToContentMapper = { - ctrader_web: { - icon: '', - link: '', - text: 'Open', - title: 'cTrader web', - }, - dxtrade_web: { - icon: '', - link: '', - text: 'Open', - title: 'DerivX web', - }, - ctrader_windows: { - icon: , - link: 'https://getctrader.com/deriv/ctrader-deriv-setup.exe', - text: 'Download', - title: 'cTrader Windows App', - }, - ctrader_mac: { - icon: , - link: 'https://getctradermac.com/deriv/ctrader-deriv-setup.dmg', - text: 'Download', - title: 'cTrader MacOS App', - }, - mt5_linux: { - icon: , - link: 'https://www.metatrader5.com/en/terminal/help/start_advanced/install_linux', - text: 'Learn more', - title: 'MetaTrader 5 Linux app', - }, - mt5_macos: { - icon: , - link: 'https://download.mql5.com/cdn/web/metaquotes.software.corp/mt5/MetaTrader5.dmg', - text: 'Download', - title: 'MetaTrader 5 MacOS app', - }, - mt5_web: { - icon: , - link: '', - text: 'Open', - title: 'MetaTrader 5 web', - }, - mt5_windows: { - icon: , - link: 'https://download.mql5.com/cdn/web/deriv.com.limited/mt5/deriv5setup.exe', - text: 'Download', - title: 'MetaTrader 5 Windows app', - }, -}; - -export const PlatformToLabelIconMapper: Record = { - ctrader: , - dxtrade: , -}; - -export const PlatformUrls: TPlatformUrls = { - ctrader: { - live: 'https://ct.deriv.com', - staging: 'https://ct-uat.deriv.com', - }, - dxtrade: { - demo: 'https://dx-demo.deriv.com', - live: 'https://dx.deriv.com', - }, -}; - -export const Jurisdiction = { - BVI: 'bvi', - LABUAN: 'labuan', - MALTAINVEST: 'maltainvest', - SVG: 'svg', - VANUATU: 'vanuatu', -} as const; - -export type TAppLinks = { - android: string; - huawei?: string; - ios: string; -}; - -export const LinksMapper: Record = { - ctrader: { - android: 'https://play.google.com/store/apps/details?id=com.deriv.ct', - ios: 'https://apps.apple.com/us/app/deriv-ctrader/id6466996509', - }, - dxtrade: { - android: 'https://play.google.com/store/apps/details?id=com.deriv.dx', - huawei: 'https://appgallery.huawei.com/app/C104633219', - ios: 'https://apps.apple.com/us/app/deriv-x/id1563337503', - }, - mt5: { - android: 'https://download.mql5.com/cdn/mobile/mt5/android?server=Deriv-Demo,Deriv-Server,Deriv-Server-02', - huawei: 'https://appgallery.huawei.com/#/app/C102015329', - ios: 'https://download.mql5.com/cdn/mobile/mt5/ios?server=Deriv-Demo,Deriv-Server,Deriv-Server-02', - }, -}; - -export const AppToIconMapper: Record>> = { - android: InstallationGoogleIcon, - huawei: InstallationHuaweiIcon, - ios: InstallationAppleIcon, -}; diff --git a/packages/tradershub/src/features/cfd/flows/CTrader/AddedCTraderAccountsList/AddedCTraderAccountsList.tsx b/packages/tradershub/src/features/cfd/flows/CTrader/AddedCTraderAccountsList/AddedCTraderAccountsList.tsx deleted file mode 100644 index 6fc3e7a3a332..000000000000 --- a/packages/tradershub/src/features/cfd/flows/CTrader/AddedCTraderAccountsList/AddedCTraderAccountsList.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import React, { Fragment } from 'react'; -import { IconComponent, TradingAccountCard } from '@/components'; -import { getCfdsAccountTitle } from '@/helpers/cfdsAccountHelpers'; -import { useQueryParams } from '@/hooks'; -import { useCFDContext } from '@/providers'; -import { CFDPlatforms, PlatformDetails } from '@cfd/constants'; -import { useActiveTradingAccount, useCtraderAccountsList } from '@deriv/api-v2'; -import { Button, Text } from '@deriv-com/ui'; -import { URLUtils } from '@deriv-com/utils'; - -const { getDerivStaticURL } = URLUtils; - -const LeadingIcon = () => ( - { - window.open(getDerivStaticURL('/deriv-ctrader')); - }} - /> -); - -const AddedCTraderAccountsList = () => { - const { data: cTraderAccounts } = useCtraderAccountsList(); - const { data: activeTradingAccount } = useActiveTradingAccount(); - const { openModal } = useQueryParams(); - const { setCfdState } = useCFDContext(); - const account = cTraderAccounts?.find(account => account.is_virtual === activeTradingAccount?.is_virtual); - const isVirtual = account?.is_virtual; - const title = getCfdsAccountTitle(PlatformDetails.ctrader.title, isVirtual); - - const trailing = () => ( -
- - -
- ); - - return ( -
- -
- {account && ( - - {title} - - {account?.display_balance} - - - {account.login} - - - )} -
- -
- ); -}; - -export default AddedCTraderAccountsList; diff --git a/packages/tradershub/src/features/cfd/flows/CTrader/AddedCTraderAccountsList/index.ts b/packages/tradershub/src/features/cfd/flows/CTrader/AddedCTraderAccountsList/index.ts deleted file mode 100644 index 6320aa35bdef..000000000000 --- a/packages/tradershub/src/features/cfd/flows/CTrader/AddedCTraderAccountsList/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as AddedCTraderAccountsList } from './AddedCTraderAccountsList'; diff --git a/packages/tradershub/src/features/cfd/flows/CTrader/AvailableCTraderAccountsList/AvailableCTraderAccountsList.tsx b/packages/tradershub/src/features/cfd/flows/CTrader/AvailableCTraderAccountsList/AvailableCTraderAccountsList.tsx deleted file mode 100644 index fada8fc2d99c..000000000000 --- a/packages/tradershub/src/features/cfd/flows/CTrader/AvailableCTraderAccountsList/AvailableCTraderAccountsList.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import React, { Fragment, useEffect, useState } from 'react'; -import { - GetADerivAccountDialog, - IconComponent, - TradingAccountCard, - TradingAccountCardContent, - TradingAccountCardLightButton, -} from '@/components'; -import { getCfdsAccountTitle } from '@/helpers/cfdsAccountHelpers'; -import { useQueryParams, useRegulationFlags } from '@/hooks'; -import { useUIContext } from '@/providers'; -import { PlatformDetails } from '@cfd/constants'; -import { useActiveTradingAccount, useCreateOtherCFDAccount } from '@deriv/api-v2'; -import { URLUtils } from '@deriv-com/utils'; - -const { getDerivStaticURL } = URLUtils; - -const LeadingIcon = () => ( - { - window.open(getDerivStaticURL('/deriv-ctrader')); - }} - /> -); - -const AvailableCTraderAccountsList = () => { - const { mutate, status } = useCreateOtherCFDAccount(); - const { data: activeTradingAccount } = useActiveTradingAccount(); - const { hasActiveDerivAccount } = useRegulationFlags(); - const { setUIState } = useUIContext(); - const { openModal } = useQueryParams(); - - const accountType = activeTradingAccount?.is_virtual ? 'demo' : 'real'; - const title = getCfdsAccountTitle(PlatformDetails.ctrader.title, activeTradingAccount?.is_virtual); - - const [isDerivedAccountModalOpen, setIsDerivedAccountModalOpen] = useState(false); - - const onSubmit = () => { - if (!hasActiveDerivAccount) { - setIsDerivedAccountModalOpen(true); - } else { - mutate({ - payload: { - account_type: accountType, - market_type: 'all', - platform: PlatformDetails.ctrader.platform, - }, - }); - } - }; - - useEffect(() => { - if (status === 'success') { - setUIState({ accountType }); - openModal('CTraderSuccessModal'); - } - }, [accountType, openModal, setUIState, status]); - - return ( - - } - > - - This account offers CFDs on a feature-rich trading platform. - - - setIsDerivedAccountModalOpen(false)} - /> - - ); -}; - -export default AvailableCTraderAccountsList; diff --git a/packages/tradershub/src/features/cfd/flows/CTrader/AvailableCTraderAccountsList/index.ts b/packages/tradershub/src/features/cfd/flows/CTrader/AvailableCTraderAccountsList/index.ts deleted file mode 100644 index bdc09df3db1c..000000000000 --- a/packages/tradershub/src/features/cfd/flows/CTrader/AvailableCTraderAccountsList/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as AvailableCTraderAccountsList } from './AvailableCTraderAccountsList'; diff --git a/packages/tradershub/src/features/cfd/flows/CTrader/index.ts b/packages/tradershub/src/features/cfd/flows/CTrader/index.ts deleted file mode 100644 index 42628f59a882..000000000000 --- a/packages/tradershub/src/features/cfd/flows/CTrader/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './AddedCTraderAccountsList'; -export * from './AvailableCTraderAccountsList'; diff --git a/packages/tradershub/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx b/packages/tradershub/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx deleted file mode 100644 index 5f97664a5713..000000000000 --- a/packages/tradershub/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import React, { useMemo } from 'react'; -import { TradingAccountCard } from '@/components'; -import { getCfdsAccountTitle } from '@/helpers/cfdsAccountHelpers'; -import { useQueryParams, useRegulationFlags } from '@/hooks'; -import { useCFDContext } from '@/providers'; -import { THooks } from '@/types'; -import { CFDPlatforms, MarketType, MarketTypeDetails } from '@cfd/constants'; -import { useActiveTradingAccount, useJurisdictionStatus } from '@deriv/api-v2'; -import { Button, Text } from '@deriv-com/ui'; -import { MT5AccountIcon } from '../MT5AccountIcon'; - -const AddedMT5AccountsList = ({ account }: { account: THooks.MT5AccountsList }) => { - const { data: activeTradingAccount } = useActiveTradingAccount(); - const { isEU } = useRegulationFlags(); - const { openModal } = useQueryParams(); - const { setCfdState } = useCFDContext(); - const { getVerificationStatus } = useJurisdictionStatus(); - const jurisdictionStatus = useMemo( - () => getVerificationStatus(account.landing_company_short || 'svg', account.status), - [account.landing_company_short, account.status, getVerificationStatus] - ); - - const isVirtual = account.is_virtual; - const marketTypeDetails = MarketTypeDetails(isEU)[account.market_type ?? MarketType.ALL]; - const title = getCfdsAccountTitle(marketTypeDetails.title, activeTradingAccount?.is_virtual); - - return ( - } - trailing={() => ( -
- - -
- )} - > -
-
- {title} - {!activeTradingAccount?.is_virtual && ( -
- - {account.landing_company_short?.toUpperCase()} - -
- )} -
-
- {!(jurisdictionStatus.is_failed || jurisdictionStatus.is_pending) && ( - - {account.display_balance} - - )} - {account.display_login} -
-
- - ); -}; - -export default AddedMT5AccountsList; diff --git a/packages/tradershub/src/features/cfd/flows/MT5/AddedMT5AccountsList/index.ts b/packages/tradershub/src/features/cfd/flows/MT5/AddedMT5AccountsList/index.ts deleted file mode 100644 index 43e1b757622e..000000000000 --- a/packages/tradershub/src/features/cfd/flows/MT5/AddedMT5AccountsList/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as AddedMT5AccountsList } from './AddedMT5AccountsList'; diff --git a/packages/tradershub/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx b/packages/tradershub/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx deleted file mode 100644 index a7e60497d1b3..000000000000 --- a/packages/tradershub/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React, { Fragment, useState } from 'react'; -import { - GetADerivAccountDialog, - TradingAccountCard, - TradingAccountCardContent, - TradingAccountCardLightButton, -} from '@/components'; -import { getCfdsAccountTitle } from '@/helpers/cfdsAccountHelpers'; -import { useQueryParams, useRegulationFlags } from '@/hooks'; -import { useCFDContext } from '@/providers'; -import { THooks } from '@/types'; -import { MarketType, MarketTypeDetails, PlatformDetails } from '@cfd/constants'; -import { useActiveTradingAccount } from '@deriv/api-v2'; -import { MT5AccountIcon } from '../MT5AccountIcon'; - -const AvailableMT5AccountsList = ({ account }: { account: THooks.MT5AccountsList }) => { - const { hasActiveDerivAccount, isEU } = useRegulationFlags(); - const marketTypeDetails = MarketTypeDetails(isEU)[account.market_type ?? MarketType.ALL]; - const description = marketTypeDetails?.description ?? ''; - const { data: activeTradingAccount } = useActiveTradingAccount(); - const { setCfdState } = useCFDContext(); - - const { openModal } = useQueryParams(); - - const [isDerivedAccountModalOpen, setIsDerivedAccountModalOpen] = useState(false); - - const trailingButtonClick = () => { - setCfdState({ marketType: account.market_type, platform: PlatformDetails.mt5.platform }); - if (!hasActiveDerivAccount) { - setIsDerivedAccountModalOpen(true); - } - !activeTradingAccount?.is_virtual && openModal('JurisdictionModal'); - activeTradingAccount?.is_virtual && hasActiveDerivAccount && openModal('MT5PasswordModal'); - }; - const title = getCfdsAccountTitle(marketTypeDetails.title, activeTradingAccount?.is_virtual); - - return ( - - } - trailing={() => } - > - {description} - - setIsDerivedAccountModalOpen(false)} - /> - - ); -}; - -export default AvailableMT5AccountsList; diff --git a/packages/tradershub/src/features/cfd/flows/MT5/AvailableMT5AccountsList/index.ts b/packages/tradershub/src/features/cfd/flows/MT5/AvailableMT5AccountsList/index.ts deleted file mode 100644 index 9cadcb2ce057..000000000000 --- a/packages/tradershub/src/features/cfd/flows/MT5/AvailableMT5AccountsList/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as AvailableMT5AccountsList } from './AvailableMT5AccountsList'; diff --git a/packages/tradershub/src/features/cfd/flows/MT5/MT5AccountIcon.tsx b/packages/tradershub/src/features/cfd/flows/MT5/MT5AccountIcon.tsx deleted file mode 100644 index 189c2537c26c..000000000000 --- a/packages/tradershub/src/features/cfd/flows/MT5/MT5AccountIcon.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import { useRegulationFlags } from '@/hooks'; -import { THooks } from '@/types'; -import { MarketType, MarketTypeDetails } from '@cfd/constants'; -import { URLUtils } from '@deriv-com/utils'; - -export const MT5AccountIcon = ({ account }: { account: THooks.MT5AccountsList }) => { - const { getDerivStaticURL } = URLUtils; - const { isEU } = useRegulationFlags(); - - const handleClick = () => { - window.open(getDerivStaticURL('/dmt5')); - }; - const handleKeyDown = (event: React.KeyboardEvent) => { - // Fix sonarcloud issue - if (event.key === 'Enter' || event.key === ' ') { - handleClick(); - } - }; - - const marketTypeDetails = MarketTypeDetails(isEU)[account.market_type ?? MarketType.ALL]; - - const icon = marketTypeDetails?.icon ?? null; - - return ( -
- {icon} -
- ); -}; diff --git a/packages/tradershub/src/features/cfd/flows/MT5/index.ts b/packages/tradershub/src/features/cfd/flows/MT5/index.ts deleted file mode 100644 index bf4677cd8a40..000000000000 --- a/packages/tradershub/src/features/cfd/flows/MT5/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './AddedMT5AccountsList'; -export * from './AvailableMT5AccountsList'; diff --git a/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx b/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx deleted file mode 100644 index 40b922ccdc1e..000000000000 --- a/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import React, { Fragment } from 'react'; -import { IconComponent, TradingAccountCard } from '@/components'; -import { getCfdsAccountTitle } from '@/helpers/cfdsAccountHelpers'; -import { useQueryParams } from '@/hooks'; -import { useCFDContext } from '@/providers'; -import { CFDPlatforms, PlatformDetails } from '@cfd/constants'; -import { useActiveTradingAccount, useDxtradeAccountsList } from '@deriv/api-v2'; -import { Button, Text } from '@deriv-com/ui'; -import { URLUtils } from '@deriv-com/utils'; - -const { getDerivStaticURL } = URLUtils; - -const LeadingIcon = () => ( - { - window.open(getDerivStaticURL('/derivx')); - }} - /> -); - -const AddedDxtradeAccountsList = () => { - const { data: dxTradeAccounts } = useDxtradeAccountsList(); - const { data: activeTrading } = useActiveTradingAccount(); - const { openModal } = useQueryParams(); - const { setCfdState } = useCFDContext(); - const account = dxTradeAccounts?.find(account => account.is_virtual === activeTrading?.is_virtual); - const isVirtual = account?.is_virtual; - const title = getCfdsAccountTitle(PlatformDetails.dxtrade.title, isVirtual); - - const trailing = () => ( -
- - -
- ); - - return ( - -
- {account && ( - - {title} - - {account?.display_balance} - - - {account?.login} - - - )} -
- - ); -}; - -export default AddedDxtradeAccountsList; diff --git a/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/index.ts b/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/index.ts deleted file mode 100644 index 73ac143c26ae..000000000000 --- a/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as AddedDxtradeAccountsList } from './AddedDxtradeAccountsList'; diff --git a/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx b/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx deleted file mode 100644 index 1ec72ea3a4f0..000000000000 --- a/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React, { Fragment, useState } from 'react'; -import { getCfdsAccountTitle } from '@/helpers/cfdsAccountHelpers'; -import { useQueryParams, useRegulationFlags } from '@/hooks'; -import { useCFDContext } from '@/providers'; -import { useActiveTradingAccount } from '@deriv/api-v2'; -import { URLUtils } from '@deriv-com/utils'; -import { - GetADerivAccountDialog, - IconComponent, - TradingAccountCard, - TradingAccountCardContent, - TradingAccountCardLightButton, -} from '../../../../../../components'; -import { PlatformDetails } from '../../../../constants'; - -const { getDerivStaticURL } = URLUtils; - -const LeadingIcon = () => ( -
- { - window.open(getDerivStaticURL('/derivx')); - }} - /> -
-); - -const AvailableDxtradeAccountsList = () => { - const { hasActiveDerivAccount } = useRegulationFlags(); - const { openModal } = useQueryParams(); - const { setCfdState } = useCFDContext(); - const { data: activeTradingAccount } = useActiveTradingAccount(); - - const [isDerivedAccountModalOpen, setIsDerivedAccountModalOpen] = useState(false); - - const TrailingButton = () => ; - - const title = getCfdsAccountTitle(PlatformDetails.dxtrade.title, activeTradingAccount?.is_virtual); - - const trailingButtonClick = () => { - if (!hasActiveDerivAccount) { - setIsDerivedAccountModalOpen(true); - } else { - setCfdState({ platform: PlatformDetails.dxtrade.platform }); - openModal('DxtradePasswordModal'); - } - }; - return ( - - - - This account offers CFDs on a highly customisable CFD trading platform. - - - setIsDerivedAccountModalOpen(false)} - /> - - ); -}; - -export default AvailableDxtradeAccountsList; diff --git a/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/index.ts b/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/index.ts deleted file mode 100644 index 04d4b648383e..000000000000 --- a/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as AvailableDxtradeAccountsList } from './AvailableDxtradeAccountsList'; diff --git a/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/index.ts b/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/index.ts deleted file mode 100644 index 22ab3081808a..000000000000 --- a/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './AddedDxtradeAccountsList'; -export * from './AvailableDxtradeAccountsList'; diff --git a/packages/tradershub/src/features/cfd/flows/OtherCFDs/index.ts b/packages/tradershub/src/features/cfd/flows/OtherCFDs/index.ts deleted file mode 100644 index b6d46a2e57a2..000000000000 --- a/packages/tradershub/src/features/cfd/flows/OtherCFDs/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Dxtrade'; diff --git a/packages/tradershub/src/features/cfd/flows/index.ts b/packages/tradershub/src/features/cfd/flows/index.ts deleted file mode 100644 index f05b1f6f264d..000000000000 --- a/packages/tradershub/src/features/cfd/flows/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './CTrader'; -export * from './MT5'; -export * from './OtherCFDs'; diff --git a/packages/tradershub/src/features/cfd/modals/ButtonGroups/AddAccountButtonsGroup.tsx b/packages/tradershub/src/features/cfd/modals/ButtonGroups/AddAccountButtonsGroup.tsx deleted file mode 100644 index d4861a669279..000000000000 --- a/packages/tradershub/src/features/cfd/modals/ButtonGroups/AddAccountButtonsGroup.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import { ButtonGroup } from '@/components'; -import { useHandleSendEmail, useQueryParams } from '@/hooks'; -import { useCFDContext } from '@/providers'; -import { Button } from '@deriv-com/ui'; -import { CFDPlatforms } from '../../constants'; -import DxtradeCreateAccountButton from '../DxtradePasswordModal/DxtradeCreateAccountButton'; -import MT5CreateAccountButton from '../MT5PasswordModal/MT5CreateAccountButton'; - -type TAddAccountButtonsGroupProps = { - password: string; -}; - -const AddAccountButtonsGroup = ({ password }: TAddAccountButtonsGroupProps) => { - const { cfdState } = useCFDContext(); - const { platform = CFDPlatforms.MT5 } = cfdState; - const { openModal } = useQueryParams(); - const { handleSendEmail } = useHandleSendEmail(); - - const handleForgotPassword = () => { - handleSendEmail(); - openModal('SentEmailContentModal'); - }; - - return ( - - - {platform === CFDPlatforms.DXTRADE && ( - - )} - {platform === CFDPlatforms.MT5 && } - - ); -}; - -export default AddAccountButtonsGroup; diff --git a/packages/tradershub/src/features/cfd/modals/ButtonGroups/SuccessButtonGroup.tsx b/packages/tradershub/src/features/cfd/modals/ButtonGroups/SuccessButtonGroup.tsx deleted file mode 100644 index fcb30e87cf58..000000000000 --- a/packages/tradershub/src/features/cfd/modals/ButtonGroups/SuccessButtonGroup.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import { useHistory } from 'react-router-dom'; -import { useQueryParams } from '@/hooks'; -import { useActiveTradingAccount } from '@deriv/api-v2'; -import { Button } from '@deriv-com/ui'; -import { ButtonGroup } from '../../../../components'; - -const SuccessButtonGroup = () => { - const { closeModal } = useQueryParams(); - const { data: activeTrading } = useActiveTradingAccount(); - const isDemo = activeTrading?.is_virtual; - const history = useHistory(); - - if (isDemo) { - return ; - } - return ( - - - - - ); -}; - -export default SuccessButtonGroup; diff --git a/packages/tradershub/src/features/cfd/modals/CTraderSuccessModal/CTraderSuccessModal.tsx b/packages/tradershub/src/features/cfd/modals/CTraderSuccessModal/CTraderSuccessModal.tsx deleted file mode 100644 index beff09d3f16d..000000000000 --- a/packages/tradershub/src/features/cfd/modals/CTraderSuccessModal/CTraderSuccessModal.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import React, { useCallback } from 'react'; -import { useHistory } from 'react-router-dom'; -import { ButtonGroup } from '@/components'; -import { useQueryParams } from '@/hooks'; -import { useUIContext } from '@/providers'; -import { PlatformDetails } from '@cfd/constants'; -import { CFDSuccess } from '@cfd/screens'; -import { Button, Modal } from '@deriv-com/ui'; - -const CTraderSuccessModal = () => { - const history = useHistory(); - const { uiState } = useUIContext(); - const { isModalOpen, closeModal } = useQueryParams(); - - const isDemo = uiState.accountType === 'demo'; - - const renderButtons = useCallback( - () => - isDemo ? ( - - ) : ( - - - - - ), - [closeModal, history, isDemo] - ); - - const description = isDemo - ? `Congratulations, you have successfully created your demo ${PlatformDetails.ctrader.title} CFDs account.` - : `Congratulations, you have successfully created your real ${PlatformDetails.ctrader.title} CFDs account. To start trading, transfer funds from your Deriv account into this account.`; - - return ( - - - - - - ); -}; - -export default CTraderSuccessModal; diff --git a/packages/tradershub/src/features/cfd/modals/CTraderSuccessModal/index.ts b/packages/tradershub/src/features/cfd/modals/CTraderSuccessModal/index.ts deleted file mode 100644 index 3e48a7ebccc8..000000000000 --- a/packages/tradershub/src/features/cfd/modals/CTraderSuccessModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as CTraderSuccessModal } from './CTraderSuccessModal'; diff --git a/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/DxtradeCreateAccountButton.tsx b/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/DxtradeCreateAccountButton.tsx deleted file mode 100644 index d5a64f8cdecb..000000000000 --- a/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/DxtradeCreateAccountButton.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React, { useEffect } from 'react'; -import { useQueryParams } from '@/hooks'; -import { Button } from '@deriv-com/ui'; -import useDxtradeAccountHandler from '../../../../hooks/useDxtradeAccountHandler'; - -type TCreateAccountButtonProps = { - buttonText: string; - password: string; -}; - -const DxtradeCreateAccountButton = ({ buttonText, password }: TCreateAccountButtonProps) => { - const { createDxtradeAccountLoading, createOtherCFDAccountSuccess, status, handleSubmit } = - useDxtradeAccountHandler(); - - const { openModal } = useQueryParams(); - - const isDisabled = !password || createDxtradeAccountLoading; - - useEffect(() => { - if (status === 'success' || createOtherCFDAccountSuccess) { - openModal('DxtradeSuccessModal'); - } - }, [openModal, status, createOtherCFDAccountSuccess]); - - return ( - - ); -}; - -export default DxtradeCreateAccountButton; diff --git a/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/DxtradePasswordFooter.tsx b/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/DxtradePasswordFooter.tsx deleted file mode 100644 index bf7cd4a3789e..000000000000 --- a/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/DxtradePasswordFooter.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { useDxtradeAccountsList } from '@deriv/api-v2'; -import useDxtradeAccountHandler from '../../../../hooks/useDxtradeAccountHandler'; -import { PlatformDetails } from '../../constants'; -import AddAccountButtonsGroup from '../ButtonGroups/AddAccountButtonsGroup'; -import SuccessButtonGroup from '../ButtonGroups/SuccessButtonGroup'; -import DxtradeCreateAccountButton from './DxtradeCreateAccountButton'; - -type TDxtradePasswordFooterProps = { - password: string; -}; - -const DxtradePasswordFooter = ({ password }: TDxtradePasswordFooterProps) => { - const { data: dxtradeAccounts } = useDxtradeAccountsList(); - const { createOtherCFDAccountSuccess } = useDxtradeAccountHandler(); - const hasDxtradeAccount = dxtradeAccounts?.find(account => account.login); - - if (createOtherCFDAccountSuccess) return ; - - if (hasDxtradeAccount) return ; - - return ( - - ); -}; -export default DxtradePasswordFooter; diff --git a/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/DxtradePasswordModal.tsx b/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/DxtradePasswordModal.tsx deleted file mode 100644 index ebf2d5e08f08..000000000000 --- a/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/DxtradePasswordModal.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React, { useState } from 'react'; -import { useQueryParams } from '@/hooks'; -import { useAccountStatus } from '@deriv/api-v2'; -import { Modal } from '@deriv-com/ui'; -import { CreatePassword, EnterPassword } from '../../screens'; - -const DxtradePasswordModal = () => { - const [password, setPassword] = useState(''); - const { data: accountStatus } = useAccountStatus(); - const { closeModal, isModalOpen } = useQueryParams(); - - const isDxtradePasswordNotSet = accountStatus?.is_dxtrade_password_not_set; - - const PasswordComponent = isDxtradePasswordNotSet ? CreatePassword : EnterPassword; - - return ( - - setPassword(e.target.value)} password={password} /> - - ); -}; - -export default DxtradePasswordModal; diff --git a/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/DxtradeSuccess.tsx b/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/DxtradeSuccess.tsx deleted file mode 100644 index ee3ba35c1b4e..000000000000 --- a/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/DxtradeSuccess.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { useActiveTradingAccount } from '@deriv/api-v2'; -import { Category, PlatformDetails } from '../../constants'; -import { CFDSuccess } from '../../screens'; -import SuccessButtonGroup from '../ButtonGroups/SuccessButtonGroup'; - -const DxtradeSuccess = () => { - const { data: activeTrading } = useActiveTradingAccount(); - const isDemo = activeTrading?.is_virtual; - - const successDescription = isDemo - ? `Congratulations, you have successfully created your ${Category.DEMO} ${PlatformDetails.dxtrade.title} account.` - : `Congratulations, you have successfully created your ${Category.REAL} ${PlatformDetails.dxtrade.title} account. To start trading, transfer funds from your Deriv account into this account.`; - - return ( - - ); -}; - -export default DxtradeSuccess; diff --git a/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/index.ts b/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/index.ts deleted file mode 100644 index 4bc210ce1fa0..000000000000 --- a/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as DxtradePasswordModal } from './DxtradePasswordModal'; diff --git a/packages/tradershub/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx b/packages/tradershub/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx deleted file mode 100644 index c2f90f70f8cd..000000000000 --- a/packages/tradershub/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import React, { memo, useCallback, useEffect, useMemo, useState } from 'react'; -import { twMerge } from 'tailwind-merge'; -import { useQueryParams, useRegulationFlags } from '@/hooks'; -import { useCFDContext } from '@/providers'; -import { DynamicLeverageContext } from '@cfd/components'; -import { Jurisdiction, MarketType, MarketTypeDetails } from '@cfd/constants'; -import { DynamicLeverageScreen, DynamicLeverageTitle, JurisdictionScreen, JurisdictionTncSection } from '@cfd/screens'; -import { Button, Modal, Text, useDevice } from '@deriv-com/ui'; - -const JurisdictionModal = () => { - const [isDynamicLeverageVisible, setIsDynamicLeverageVisible] = useState(false); - const [isCheckBoxChecked, setIsCheckBoxChecked] = useState(false); - const { isModalOpen, closeModal, openModal } = useQueryParams(); - const { isEU } = useRegulationFlags(); - const { cfdState, setCfdState } = useCFDContext(); - - const { isDesktop } = useDevice(); - - const { marketType: marketTypeState, selectedJurisdiction } = cfdState; - - const marketType = marketTypeState ?? MarketType.ALL; - - const { title } = MarketTypeDetails(isEU)[marketType]; - - const toggleDynamicLeverage = useCallback(() => { - setIsDynamicLeverageVisible(!isDynamicLeverageVisible); - }, [isDynamicLeverageVisible, setIsDynamicLeverageVisible]); - - const jurisdictionTitle = `Choose a jurisdiction for your Deriv MT5 ${title} account`; - - const value = useMemo( - () => ({ isDynamicLeverageVisible, toggleDynamicLeverage }), - [isDynamicLeverageVisible, toggleDynamicLeverage] - ); - - useEffect(() => { - setCfdState({ selectedJurisdiction }); - }, [selectedJurisdiction, setCfdState]); - - const closeHandler = () => { - closeModal(); - setCfdState({ selectedJurisdiction: '' }); - }; - - return ( - - - {!isDynamicLeverageVisible ? ( - - {jurisdictionTitle} - - ) : ( - - )} - - - {isDynamicLeverageVisible && } - {!isDynamicLeverageVisible && ( - - )} - - {!isDynamicLeverageVisible ? ( - - - - ) : null} - - - ); -}; - -export default memo(JurisdictionModal); diff --git a/packages/tradershub/src/features/cfd/modals/JurisdictionModal/index.ts b/packages/tradershub/src/features/cfd/modals/JurisdictionModal/index.ts deleted file mode 100644 index 8da77d513725..000000000000 --- a/packages/tradershub/src/features/cfd/modals/JurisdictionModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as JurisdictionModal } from './JurisdictionModal'; diff --git a/packages/tradershub/src/features/cfd/modals/MT5AccountTypeModal/MT5AccountTypeModal.tsx b/packages/tradershub/src/features/cfd/modals/MT5AccountTypeModal/MT5AccountTypeModal.tsx deleted file mode 100644 index 252d806eb07c..000000000000 --- a/packages/tradershub/src/features/cfd/modals/MT5AccountTypeModal/MT5AccountTypeModal.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React, { ComponentProps, useState } from 'react'; -import { useQueryParams } from '@/hooks'; -import { useCFDContext } from '@/providers'; -import { MT5AccountType } from '@cfd/screens'; -import { Button, Modal, Text } from '@deriv-com/ui'; - -type TMarketTypes = ComponentProps['selectedMarketType']; - -const MT5AccountTypeModal = () => { - const [selectedMarketType, setSelectedMarketType] = useState(undefined); - const { setCfdState } = useCFDContext(); - const { openModal, isModalOpen, closeModal } = useQueryParams(); - - return ( - - - Select Deriv MT5’s account type - - - - - - - - - ); -}; - -export default MT5AccountTypeModal; diff --git a/packages/tradershub/src/features/cfd/modals/MT5AccountTypeModal/index.ts b/packages/tradershub/src/features/cfd/modals/MT5AccountTypeModal/index.ts deleted file mode 100644 index a3b05a816e2b..000000000000 --- a/packages/tradershub/src/features/cfd/modals/MT5AccountTypeModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as MT5AccountTypeModal } from './MT5AccountTypeModal'; diff --git a/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5ChangePassword.tsx b/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5ChangePassword.tsx deleted file mode 100644 index 71adfcc916e8..000000000000 --- a/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5ChangePassword.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import React, { Fragment, useEffect, useState } from 'react'; -import { passwordRegexDescription } from '@/constants'; -import { useMT5AccountHandler, useQueryParams } from '@/hooks'; -import { validPassword } from '@/utils'; -import { useTradingPlatformPasswordChange } from '@deriv/api-v2'; -import { Button, Modal, PasswordInput, Text } from '@deriv-com/ui'; -import { CFDPlatforms } from '../../constants'; - -const MT5ChangePassword = () => { - const { isLoading: tradingPlatformPasswordChangeLoading, mutateAsync: tradingPasswordChange } = - useTradingPlatformPasswordChange(); - const { handleSubmit: createMT5Account, createMT5AccountStatus } = useMT5AccountHandler(); - const { openModal } = useQueryParams(); - - const [currentPassword, setCurrentPassword] = useState(''); - const [newPassword, setNewPassword] = useState(''); - - const changePasswordAndCreateAccountHandler = async () => { - await tradingPasswordChange({ - new_password: newPassword, - old_password: currentPassword, - platform: CFDPlatforms.MT5, - }); - createMT5Account(newPassword); - }; - - useEffect(() => { - if (createMT5AccountStatus === 'success') openModal('MT5SuccessModal'); - }, [createMT5AccountStatus, openModal]); - - return ( - - - - To enhance your MT5 account security we have upgraded our password policy. Please update your - password accordingly. - - setCurrentPassword(e.target.value)} - value={currentPassword} - /> - setNewPassword(e.target.value)} - value={newPassword} - /> -
    - {passwordRegexDescription.map(item => ( - - {item} - - ))} -
- - - - - - - ); -}; - -export default MT5ChangePassword; diff --git a/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5CreateAccountButton.tsx b/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5CreateAccountButton.tsx deleted file mode 100644 index f5a5347bac6e..000000000000 --- a/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5CreateAccountButton.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React, { useEffect } from 'react'; -import { useQueryParams } from '@/hooks'; -import { Button } from '@deriv-com/ui'; -import useMT5AccountHandler from '../../../../hooks/useMT5AccountHandler'; - -type TCreateAccountButtonProps = { - buttonText: string; - password: string; -}; - -const MT5CreateAccountButton = ({ buttonText, password }: TCreateAccountButtonProps) => { - const { - createMT5AccountLoading, - doesNotMeetPasswordPolicy, - handleSubmit, - tradingPlatformPasswordChangeLoading, - createMT5AccountStatus, - } = useMT5AccountHandler(); - const { openModal } = useQueryParams(); - - const isLoading = tradingPlatformPasswordChangeLoading || createMT5AccountLoading; - const isDisabled = !password || isLoading; - - useEffect(() => { - if (doesNotMeetPasswordPolicy) { - return openModal('MT5ChangePasswordModal'); - } - - if (createMT5AccountStatus === 'success') { - openModal('MT5SuccessModal'); - } - }, [doesNotMeetPasswordPolicy, createMT5AccountStatus, openModal]); - - return ( - - ); -}; - -export default MT5CreateAccountButton; diff --git a/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5PasswordFooter.tsx b/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5PasswordFooter.tsx deleted file mode 100644 index b0b0421df3a8..000000000000 --- a/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5PasswordFooter.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { useMT5AccountHandler } from '@/hooks'; -import { PlatformDetails } from '@cfd/constants'; -import { useMT5AccountsList } from '@deriv/api-v2'; -import AddAccountButtonsGroup from '../ButtonGroups/AddAccountButtonsGroup'; -import SuccessButtonGroup from '../ButtonGroups/SuccessButtonGroup'; -import MT5CreateAccountButton from './MT5CreateAccountButton'; - -type TMT5PasswordFooterProps = { - password: string; -}; - -const MT5PasswordFooter = ({ password }: TMT5PasswordFooterProps) => { - const { data: mt5Accounts } = useMT5AccountsList(); - const { isCreateMT5AccountSuccess } = useMT5AccountHandler(); - const hasMT5Account = mt5Accounts?.find(account => account.login); - - if (isCreateMT5AccountSuccess) return ; - - if (hasMT5Account) return ; - - return ; -}; -export default MT5PasswordFooter; diff --git a/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx deleted file mode 100644 index 4574cc307bf7..000000000000 --- a/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React, { useState } from 'react'; -import { useQueryParams } from '@/hooks'; -import { CreatePassword, EnterPassword } from '@cfd/screens'; -import { useAccountStatus } from '@deriv/api-v2'; -import { Modal } from '@deriv-com/ui'; - -const MT5PasswordModal = () => { - const [password, setPassword] = useState(''); - const { closeModal, isModalOpen } = useQueryParams(); - const { data: accountStatus } = useAccountStatus(); - - const isMT5PasswordNotSet = accountStatus?.is_mt5_password_not_set; - - const PasswordComponent = isMT5PasswordNotSet ? CreatePassword : EnterPassword; - - return ( - - setPassword(e.target.value)} password={password} /> - - ); -}; - -export default MT5PasswordModal; diff --git a/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5Success.tsx b/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5Success.tsx deleted file mode 100644 index fe8e5d1ad2f3..000000000000 --- a/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5Success.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import { useRegulationFlags } from '@/hooks'; -import { useCFDContext } from '@/providers'; -import { - Category, - companyNamesAndUrls, - MarketType, - MarketTypeDetails, - PlatformDetails, - TTM5FilterLandingCompany, -} from '@cfd/constants'; -import { CFDSuccess } from '@cfd/screens'; -import { useActiveTradingAccount, useMT5AccountsList } from '@deriv/api-v2'; -import SuccessButtonGroup from '../ButtonGroups/SuccessButtonGroup'; - -const MT5SuccessModal = () => { - const { isEU } = useRegulationFlags(); - const { data: mt5Accounts } = useMT5AccountsList(); - const { data: activeTrading } = useActiveTradingAccount(); - const { cfdState } = useCFDContext(); - - const { platform, marketType: marketTypeState, selectedJurisdiction } = cfdState; - const isDemo = activeTrading?.is_virtual; - const marketType = marketTypeState ?? MarketType.ALL; - - const marketTypeTitle = - marketType === MarketType.ALL && platform && Object.keys(PlatformDetails).includes(platform) - ? PlatformDetails[platform].title - : MarketTypeDetails(isEU)[marketType].title; - - const landingCompanyName = `(${ - companyNamesAndUrls?.[selectedJurisdiction as TTM5FilterLandingCompany]?.shortcode - })`; - - const SuccessDescription = isDemo - ? `Congratulations, you have successfully created your ${Category.DEMO} ${PlatformDetails.mt5.title} account. To start trading, transfer funds from your Deriv account into this account.` - : `Congratulations, you have successfully created your ${Category.REAL} ${PlatformDetails.mt5.title} ${landingCompanyName} ${selectedJurisdiction} account. To start trading, top-up funds from your Deriv account into this account.`; - - const SuccessTitle = `Your ${marketTypeTitle} ${isDemo ? Category.DEMO : landingCompanyName} account is ready`; - - return ( - account.market_type === marketType)?.display_balance ?? '0.00'} - landingCompany={selectedJurisdiction} - marketType={marketType} - platform={PlatformDetails.mt5.platform} - renderButtons={SuccessButtonGroup} - title={SuccessTitle} - /> - ); -}; - -export default MT5SuccessModal; diff --git a/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/index.ts b/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/index.ts deleted file mode 100644 index f285609d9b6f..000000000000 --- a/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as MT5PasswordModal } from './MT5PasswordModal'; diff --git a/packages/tradershub/src/features/cfd/modals/TopUpModal/TopUpModal.tsx b/packages/tradershub/src/features/cfd/modals/TopUpModal/TopUpModal.tsx deleted file mode 100644 index 85105262fd5d..000000000000 --- a/packages/tradershub/src/features/cfd/modals/TopUpModal/TopUpModal.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import { useQueryParams, useRegulationFlags } from '@/hooks'; -import { useCFDContext } from '@/providers'; -import { THooks } from '@/types'; -import { CFDPlatforms, MarketType, MarketTypeDetails, PlatformDetails } from '@cfd/constants'; -import { useMT5Deposit, useOtherCFDPlatformsDeposit } from '@deriv/api-v2'; -import { Button, Modal, Text } from '@deriv-com/ui'; - -const TopUpModal = () => { - const { isEU } = useRegulationFlags(); - const { mutateAsync: MT5Deposit } = useMT5Deposit(); - const { mutateAsync: OtherCFDPlatformsDeposit } = useOtherCFDPlatformsDeposit(); - const { cfdState } = useCFDContext(); - const { isModalOpen, closeModal } = useQueryParams(); - - const { account, platform } = cfdState; - - if (!account || !platform) return null; - - const topUpVirtual = async () => { - if (platform === CFDPlatforms.MT5) { - await MT5Deposit({ - to_mt5: account?.login ?? '', - }); - } else { - await OtherCFDPlatformsDeposit({ - platform, - to_account: (account as THooks.CtraderAccountsList | THooks.DxtradeAccountsList).account_id ?? '', - }); - } - }; - - const platformTitle = PlatformDetails[platform].title; - const marketTypeDetails = MarketTypeDetails(isEU)[account.market_type ?? MarketType.ALL]; - const marketTypeTitle = marketTypeDetails?.title ?? ''; - const title = platform === CFDPlatforms.MT5 ? `${platformTitle} ${marketTypeTitle}` : platformTitle; - - const balance = - platform === CFDPlatforms.CTRADER - ? (account as THooks.CtraderAccountsList)?.display_balance - : account?.display_balance; - - return ( - - - Fund top up - - - {title} Demo account -
- - Balance - - - {balance} - -
- - You can top up your demo account with an additional 10,000.00 USD if you balance is 1,000.00 USD or - less. - -
- -
- - - ); -}; - -export default TopUpModal; diff --git a/packages/tradershub/src/features/cfd/modals/TopUpModal/index.ts b/packages/tradershub/src/features/cfd/modals/TopUpModal/index.ts deleted file mode 100644 index 1c4292f7a0cf..000000000000 --- a/packages/tradershub/src/features/cfd/modals/TopUpModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TopUpModal } from './TopUpModal'; diff --git a/packages/tradershub/src/features/cfd/modals/TradeModal/TradeModal.tsx b/packages/tradershub/src/features/cfd/modals/TradeModal/TradeModal.tsx deleted file mode 100644 index f6e795bdc023..000000000000 --- a/packages/tradershub/src/features/cfd/modals/TradeModal/TradeModal.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React, { useEffect } from 'react'; -import QRCode from 'qrcode.react'; -import { useQueryParams } from '@/hooks'; -import { useCFDContext } from '@/providers'; -import { THooks } from '@/types'; -import { AppToIconMapper, CFDPlatforms, LinksMapper, PlatformDetails, TAppLinks } from '@cfd/constants'; -import { TradeScreen } from '@cfd/screens'; -import { Modal, Text, useDevice } from '@deriv-com/ui'; - -const TradeModal = () => { - const { isDesktop } = useDevice(); - const { setCfdState, cfdState } = useCFDContext(); - const { isModalOpen, closeModal } = useQueryParams(); - - const { account, marketType, platform = CFDPlatforms.MT5 } = cfdState; - - useEffect(() => { - setCfdState({ - marketType, - platform, - }); - if (platform === CFDPlatforms.MT5) setCfdState({ accountId: (account as THooks.MT5AccountsList)?.loginid }); - }, [account, marketType, platform, setCfdState]); - - const appOrder = ['ios', 'android', 'huawei']; - - return ( - - - Trade - - - - - -
- - Download {PlatformDetails[platform]?.title} on your phone to trade with the{' '} - {PlatformDetails[platform].title} account - -
-
- {appOrder.map(app => { - const AppsLinkMapper = LinksMapper[platform][app as keyof TAppLinks]; - if (AppsLinkMapper) { - const AppIcon = AppToIconMapper[app]; - const appLink = AppsLinkMapper; - return ( - window.open(appLink)} - /> - ); - } - return null; - })} -
- {isDesktop && ( -
- - - Scan the QR code to download {PlatformDetails[platform].title} - -
- )} -
-
- - - ); -}; - -export default TradeModal; diff --git a/packages/tradershub/src/features/cfd/modals/TradeModal/index.ts b/packages/tradershub/src/features/cfd/modals/TradeModal/index.ts deleted file mode 100644 index e5a5d6344e09..000000000000 --- a/packages/tradershub/src/features/cfd/modals/TradeModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TradeModal } from './TradeModal'; diff --git a/packages/tradershub/src/features/cfd/modals/VerificationFailedModal/VerificationFailedModal.tsx b/packages/tradershub/src/features/cfd/modals/VerificationFailedModal/VerificationFailedModal.tsx deleted file mode 100644 index 3934733b773d..000000000000 --- a/packages/tradershub/src/features/cfd/modals/VerificationFailedModal/VerificationFailedModal.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { useQueryParams } from '@/hooks'; -import { VerificationFailed } from '@cfd/screens'; -import { Modal } from '@deriv-com/ui'; - -const VerificationFailedModal = () => { - const { closeModal, isModalOpen } = useQueryParams(); - return ( - - - - - - ); -}; - -export default VerificationFailedModal; diff --git a/packages/tradershub/src/features/cfd/modals/VerificationFailedModal/index.ts b/packages/tradershub/src/features/cfd/modals/VerificationFailedModal/index.ts deleted file mode 100644 index 03b9b2fb75c3..000000000000 --- a/packages/tradershub/src/features/cfd/modals/VerificationFailedModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as VerificationFailedModal } from './VerificationFailedModal'; diff --git a/packages/tradershub/src/features/cfd/modals/index.ts b/packages/tradershub/src/features/cfd/modals/index.ts deleted file mode 100644 index a9e522a6b7cc..000000000000 --- a/packages/tradershub/src/features/cfd/modals/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -export * from './CTraderSuccessModal'; -export * from './DxtradePasswordModal'; -export * from './JurisdictionModal'; -export * from './MT5AccountTypeModal'; -export * from './MT5PasswordModal'; -export * from './MT5PasswordModal'; -export * from './TopUpModal'; -export * from './TradeModal'; -export * from './VerificationFailedModal'; diff --git a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CTraderCompareAccountsCard.tsx b/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CTraderCompareAccountsCard.tsx deleted file mode 100644 index 1dfc3d5f7ae0..000000000000 --- a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CTraderCompareAccountsCard.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React, { useMemo } from 'react'; -import { useRegulationFlags } from '@/hooks'; -import { useActiveTradingAccount, useCFDAccountsList, useCFDCompareAccounts } from '@deriv/api-v2'; -import CFDCompareAccountsCard from './CompareAccountsCard'; -import { isCTraderAccountAdded } from './CompareAccountsConfig'; - -const CTraderCompareAccountsCard = () => { - const { data: activeDerivTrading } = useActiveTradingAccount(); - const { isEU } = useRegulationFlags(); - - const { data: compareAccounts, hasCTraderAccountAvailable } = useCFDCompareAccounts(isEU); - - const { is_virtual: isDemo = false } = activeDerivTrading ?? {}; - - const { data: cfdAccounts } = useCFDAccountsList(); - - const { ctraderAccount } = compareAccounts; - - const isCtraderAdded = useMemo( - () => !!cfdAccounts && isCTraderAccountAdded(cfdAccounts.ctrader, isDemo), - [cfdAccounts, isDemo] - ); - - if (isEU || !hasCTraderAccountAvailable || !ctraderAccount) return null; - - return ( - - ); -}; - -export default CTraderCompareAccountsCard; diff --git a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccounts.classnames.ts b/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccounts.classnames.ts deleted file mode 100644 index 9d9e33b93612..000000000000 --- a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccounts.classnames.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { cva, VariantProps } from 'class-variance-authority'; - -export const CompareAccountsPlatformLabelClass = cva('bg-system-light-platform-background p-[9px] rounded-t-xl', { - variants: { background: { CTrader: 'bg-[#ffeabf]', MT5: 'bg-[#e6f5ff]', DerivX: 'bg-[#e8fdf8]' } }, -}); - -export const CompareAccountsPlatformLabelTextColorClass = cva('text-center', { - variants: { label: { CTrader: 'text-[#ff9c13]', MT5: 'text-[#2C9aff]', DerivX: 'text-[#17eabd]' } }, -}); - -export type TCompareAccountsPlatformLabelClassProps = NonNullable< - VariantProps ->; - -export type TCompareAccountsPlatformLabelTextClassProps = NonNullable< - VariantProps ->; diff --git a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsButton.tsx b/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsButton.tsx deleted file mode 100644 index 26969ef8fec8..000000000000 --- a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsButton.tsx +++ /dev/null @@ -1,129 +0,0 @@ -import React, { useEffect, useMemo } from 'react'; -import { useQueryParams } from '@/hooks'; -import { THooks, TPlatforms } from '@/types'; -import { Category, CFDPlatforms, MarketType } from '@cfd/constants'; -import { - useActiveTradingAccount, - useAuthentication, - useCreateOtherCFDAccount, - useMT5AccountsList, - useSettings, -} from '@deriv/api-v2'; -import { Button } from '@deriv-com/ui'; -import { - getAccountVerificationStatus, - shouldRestrictBviAccountCreation, - shouldRestrictVanuatuAccountCreation, -} from './CompareAccountsConfig'; - -type TCompareAccountButton = { - isAccountAdded: boolean; - platform: TPlatforms.All; - shortCode: THooks.AvailableMT5Accounts['shortcode']; -}; - -/* - * This is a button component for Compare Accounts that is used to add a CFD account. -@params {boolean} isAccountAdded - Whether the account is added or not. -@params {string} platform - The platform of the account. -@params {string} shortCode - The short code of the account. -@params {string} marketType - The market type of the account. //Removed for now as it is needed by Verification flow - */ -const CompareAccountsButton = ({ isAccountAdded, platform, shortCode }: TCompareAccountButton) => { - const { openModal } = useQueryParams(); - - const { data: accountSettings } = useSettings(); - const { data: authenticationInfo } = useAuthentication(); - const { - error: createAccountError, - isSuccess: isAccountCreated, - mutate: createAccount, - } = useCreateOtherCFDAccount(); - const { data: mt5Accounts } = useMT5AccountsList(); - const { data: activeTradingAccount } = useActiveTradingAccount(); - - const { is_virtual: isDemo = false } = activeTradingAccount ?? {}; - - const { - account_opening_reason: accountOpeningReason, - citizen, - place_of_birth: placeOfBirth, - tax_identification_number: taxIdentificationNumber, - tax_residence: taxResidence, - } = accountSettings; - - const hasSubmittedPersonalDetails = !!( - citizen && - placeOfBirth && - taxResidence && - taxIdentificationNumber && - accountOpeningReason - ); - - const restrictBviAccountCreation = useMemo( - () => shouldRestrictBviAccountCreation(mt5Accounts ?? []), - [mt5Accounts] - ); - - const restrictVanuatuAccountCreation = useMemo( - () => shouldRestrictVanuatuAccountCreation(mt5Accounts ?? []), - [mt5Accounts] - ); - - const isAccountStatusVerified = getAccountVerificationStatus( - shortCode, - restrictBviAccountCreation, - restrictVanuatuAccountCreation, - hasSubmittedPersonalDetails, - authenticationInfo, - isDemo - ); - - useEffect(() => { - if (isAccountCreated) { - openModal('CTraderSuccessModal'); - } - if (createAccountError) { - // Error Component to be implemented - openModal('DummyComponentModal'); - } - }, [createAccountError, isAccountCreated, isDemo, openModal]); - - const onClickAdd = () => { - if (platform === CFDPlatforms.MT5) { - // Going to remove Placeholder once Verification flow is implemented - if (isAccountStatusVerified) return; - - if (isAccountStatusVerified) { - openModal('MT5PasswordModal'); - } else { - openModal('DummyComponentModal'); - } - } else if (platform === CFDPlatforms.DXTRADE) { - openModal('DxtradePasswordModal'); - } else { - createAccount({ - payload: { - account_type: isDemo ? Category.DEMO : Category.REAL, - market_type: MarketType.ALL, - platform: CFDPlatforms.CTRADER, - }, - }); - } - }; - return ( -
- -
- ); -}; - -export default CompareAccountsButton; diff --git a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsCard.tsx b/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsCard.tsx deleted file mode 100644 index d5b5bf963535..000000000000 --- a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsCard.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import { useRegulationFlags } from '@/hooks'; -import { Text } from '@deriv-com/ui'; -import { THooks, TPlatforms } from '../../../../types'; -import { CFDPlatforms } from '../../constants'; -import CompareAccountsButton from './CompareAccountsButton'; -import CompareAccountsDescription from './CompareAccountsDescription'; -import CompareAccountsPlatformLabel from './CompareAccountsPlatformLabel'; -import CompareAccountsTitleIcon from './CompareAccountsTitleIcon'; -import InstrumentsLabelHighlighted from './InstrumentsLabelHighlighted'; - -type TCompareAccountsCard = { - isAccountAdded: boolean; - marketType: THooks.AvailableMT5Accounts['market_type']; - platform: TPlatforms.All; - shortCode: THooks.AvailableMT5Accounts['shortcode']; -}; - -const CompareAccountsCard = ({ isAccountAdded, marketType, platform, shortCode }: TCompareAccountsCard) => { - const { isEU } = useRegulationFlags(); - return ( -
-
- - {platform === CFDPlatforms.CTRADER && ( -
- - New! - -
- )} - - - - {isEU && ( -
- - *Boom 300 and Crash 300 Index - -
- )} - -
-
- ); -}; - -export default CompareAccountsCard; diff --git a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsConfig.ts b/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsConfig.ts deleted file mode 100644 index b2001f79c328..000000000000 --- a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsConfig.ts +++ /dev/null @@ -1,309 +0,0 @@ -import InstrumentsIcons from '@/assets/cfd/tradingInstruments'; -import { THooks, TPlatforms } from '../../../../types'; -import { CFDPlatforms, MarketType } from '../../constants'; -import { Jurisdiction, MarketTypeShortcode } from './constants'; - -type THighlightedIconLabel = { - highlighted: boolean; - icon: keyof typeof InstrumentsIcons; - isAsterisk?: boolean; - text: string; -}; - -type TMarketTypes = THooks.AvailableMT5Accounts['market_type']; -type TShortCode = THooks.AvailableMT5Accounts['shortcode']; - -const getHighlightedIconLabel = ( - platform: TPlatforms.All, - isEuRegion: boolean, - marketType: TMarketTypes, - shortCode: TShortCode -): THighlightedIconLabel[] => { - const marketTypeShortCode = marketType?.concat('_', shortCode ?? ''); - - const forexLabel = (() => { - if (isEuRegion) { - return 'Forex'; - } else if (marketTypeShortCode === MarketTypeShortcode.FINANCIAL_LABUAN) { - return 'Forex: standard/exotic'; - } else if ( - (platform === CFDPlatforms.MT5 && marketTypeShortCode === MarketTypeShortcode.ALL_SVG) || - platform === CFDPlatforms.CTRADER - ) { - return 'Forex: major/minor'; - } - return 'Forex: standard/micro'; - })(); - - switch (marketType) { - case MarketType.SYNTHETIC: - return [ - { highlighted: false, icon: 'Forex', text: forexLabel }, - { highlighted: false, icon: 'Stocks', text: 'Stocks' }, - { highlighted: false, icon: 'StockIndices', text: 'Stock indices' }, - { highlighted: false, icon: 'Commodities', text: 'Commodities' }, - { highlighted: false, icon: 'Cryptocurrencies', text: 'Cryptocurrencies' }, - { highlighted: false, icon: 'ETF', text: 'ETFs' }, - { highlighted: true, icon: 'Synthetics', text: 'Synthetic indices' }, - { highlighted: true, icon: 'Baskets', text: 'Basket indices' }, - { highlighted: true, icon: 'DerivedFX', text: 'Derived FX' }, - ]; - case MarketType.FINANCIAL: - switch (shortCode) { - case Jurisdiction.MALTAINVEST: - return [ - { highlighted: true, icon: 'Forex', text: forexLabel }, - { highlighted: true, icon: 'Stocks', text: 'Stocks' }, - { highlighted: true, icon: 'StockIndices', text: 'Stock indices' }, - { highlighted: true, icon: 'Commodities', text: 'Commodities' }, - { highlighted: true, icon: 'Cryptocurrencies', text: 'Cryptocurrencies' }, - { highlighted: true, icon: 'Synthetics', isAsterisk: true, text: 'Synthetic indices' }, - ]; - case Jurisdiction.LABUAN: - return [ - { highlighted: true, icon: 'Forex', text: forexLabel }, - { highlighted: false, icon: 'Stocks', text: 'Stocks' }, - { highlighted: false, icon: 'StockIndices', text: 'Stock indices' }, - { highlighted: false, icon: 'Commodities', text: 'Commodities' }, - { highlighted: true, icon: 'Cryptocurrencies', text: 'Cryptocurrencies' }, - { highlighted: false, icon: 'ETF', text: 'ETFs' }, - { highlighted: false, icon: 'Synthetics', text: 'Synthetic indices' }, - { highlighted: false, icon: 'Baskets', text: 'Basket indices' }, - { highlighted: false, icon: 'DerivedFX', text: 'Derived FX' }, - ]; - default: - return [ - { highlighted: true, icon: 'Forex', text: forexLabel }, - { highlighted: true, icon: 'Stocks', text: 'Stocks' }, - { highlighted: true, icon: 'StockIndices', text: 'Stock indices' }, - { highlighted: true, icon: 'Commodities', text: 'Commodities' }, - { highlighted: true, icon: 'Cryptocurrencies', text: 'Cryptocurrencies' }, - { highlighted: true, icon: 'ETF', text: 'ETFs' }, - { highlighted: false, icon: 'Synthetics', text: 'Synthetic indices' }, - { highlighted: false, icon: 'Baskets', text: 'Basket indices' }, - { highlighted: false, icon: 'DerivedFX', text: 'Derived FX' }, - ]; - } - case MarketType.ALL: - default: - if (platform === CFDPlatforms.MT5) { - return [ - { highlighted: true, icon: 'Forex', text: forexLabel }, - { highlighted: true, icon: 'Stocks', text: 'Stocks' }, - { highlighted: true, icon: 'StockIndices', text: 'Stock indices' }, - { highlighted: true, icon: 'Commodities', text: 'Commodities' }, - { highlighted: true, icon: 'Cryptocurrencies', text: 'Cryptocurrencies' }, - { highlighted: true, icon: 'ETF', text: 'ETFs' }, - { highlighted: true, icon: 'Synthetics', text: 'Synthetics indices' }, - { highlighted: false, icon: 'Baskets', text: 'Basket indices' }, - { highlighted: false, icon: 'DerivedFX', text: 'Derived FX' }, - ]; - } - return [ - { highlighted: true, icon: 'Forex', text: forexLabel }, - { highlighted: true, icon: 'Stocks', text: 'Stocks' }, - { highlighted: true, icon: 'StockIndices', text: 'Stock indices' }, - { highlighted: true, icon: 'Commodities', text: 'Commodities' }, - { highlighted: true, icon: 'Cryptocurrencies', text: 'Cryptocurrencies' }, - { highlighted: true, icon: 'ETF', text: 'ETFs' }, - { highlighted: true, icon: 'Synthetics', text: 'Synthetic indices' }, - { highlighted: true, icon: 'Baskets', text: 'Basket indices' }, - { highlighted: true, icon: 'DerivedFX', text: 'Derived FX' }, - ]; - } -}; - -const getPlatformType = (platform: TPlatforms.All) => { - switch (platform) { - case CFDPlatforms.MT5: - return 'MT5'; - case CFDPlatforms.CTRADER: - return 'CTrader'; - case CFDPlatforms.DXTRADE: - default: - return 'DerivX'; - } -}; - -const cfdConfig = { - counterpartyCompany: 'Deriv (SVG) LLC', - counterpartyCompanyDescription: 'Counterparty company', - jurisdiction: 'St. Vincent & Grenadines', - jurisdictionDescription: 'Jurisdiction', - leverage: '1:1000', - leverageDescription: 'Maximum leverage', - regulator: 'Financial Commission', - regulatorDescription: 'Regulator/External dispute resolution', - regulatorLicense: '', - spread: '0.5 pips', - spreadDescription: 'Spreads from', -}; - -const getJurisdictionDescription = (shortcode?: string) => { - switch (shortcode) { - case MarketTypeShortcode.SYNTHETIC_BVI: - case MarketTypeShortcode.FINANCIAL_BVI: - return { - ...cfdConfig, - counterpartyCompany: 'Deriv (BVI) Ltd', - jurisdiction: 'British Virgin Islands', - regulator: 'British Virgin Islands Financial Services Commission', - regulatorDescription: 'Regulator/External dispute resolution', - regulatorLicense: '(License no. SIBA/L/18/1114)', - }; - case MarketTypeShortcode.SYNTHETIC_VANUATU: - case MarketTypeShortcode.FINANCIAL_VANUATU: - return { - ...cfdConfig, - counterpartyCompany: 'Deriv (V) Ltd', - jurisdiction: 'Vanuatu', - regulator: 'Vanuatu Financial Services Commission', - regulatorDescription: 'Regulator/External dispute resolution', - regulatorLicense: '', - }; - case MarketTypeShortcode.FINANCIAL_LABUAN: - return { - ...cfdConfig, - counterpartyCompany: 'Deriv (FX) Ltd', - jurisdiction: 'Labuan', - leverage: '1:100', - regulator: 'Labuan Financial Services Authority', - regulatorDescription: 'Regulator/External dispute resolution', - regulatorLicense: '(License no. MB/18/0024)', - }; - case MarketTypeShortcode.FINANCIAL_MALTAINVEST: - return { - ...cfdConfig, - counterpartyCompany: 'Deriv Investments (Europe) Limited', - jurisdiction: 'Malta', - leverage: '1:30', - regulator: 'Financial Commission', - regulatorDescription: '', - regulatorLicense: 'Regulated by the Malta Financial Services Authority (MFSA) (licence no. IS/70156)', - }; - case MarketTypeShortcode.ALL_DXTRADE: - case MarketTypeShortcode.ALL_SVG: - case MarketTypeShortcode.SYNTHETIC_SVG: - case MarketTypeShortcode.FINANCIAL_SVG: - default: - return cfdConfig; - } -}; - -const acknowledgedStatus = ['pending', 'verified']; - -const getPoiAcknowledgedForMaltainvest = (authenticationInfo?: THooks.Authentication) => { - const services = authenticationInfo?.identity?.services ?? {}; - const { manual: { status: manualStatus } = {}, onfido: { status: onfidoStatus } = {} } = services; - - return [onfidoStatus, manualStatus].some(status => acknowledgedStatus.includes(status ?? '')); -}; - -const getPoiAcknowledgedForBviLabuanVanuatu = (authenticationInfo?: THooks.Authentication) => { - const services = authenticationInfo?.identity?.services ?? {}; - const riskClassification = authenticationInfo?.risk_classification ?? ''; - const { - idv: { status: idvStatus } = {}, - manual: { status: manualStatus } = {}, - onfido: { status: onfidoStatus } = {}, - } = services; - - if (riskClassification === 'high') { - return Boolean(onfidoStatus && acknowledgedStatus.includes(onfidoStatus)); - } - return [idvStatus, onfidoStatus, manualStatus].some(status => acknowledgedStatus.includes(status ?? '')); -}; - -const shouldRestrictBviAccountCreation = (mt5Accounts: THooks.MT5AccountsList[]) => - !!mt5Accounts.filter(item => item?.landing_company_short === 'bvi' && item?.status === 'poa_failed').length; - -const shouldRestrictVanuatuAccountCreation = (mt5Accounts: THooks.MT5AccountsList[]) => - !!mt5Accounts.filter(item => item?.landing_company_short === 'vanuatu' && item?.status === 'poa_failed').length; - -const getAccountVerificationStatus = ( - shortCode: THooks.AvailableMT5Accounts['shortcode'], - shouldRestrictBviAccountCreation: boolean, - shouldRestrictVanuatuAccountCreation: boolean, - hasSubmittedPersonalDetails: boolean, - authenticationInfo?: THooks.Authentication, - isDemo?: boolean -) => { - const { - has_poa_been_attempted: hasPoaBeenAttempted, - has_poi_been_attempted: hasPoiBeenAttempted, - poa_status: poaStatus, - } = authenticationInfo || {}; - const poiOrPoaNotSubmitted = !hasPoaBeenAttempted || !hasPoiBeenAttempted; - const poaAcknowledged = acknowledgedStatus.includes(poaStatus ?? ''); - - const poiAcknowledgedForMaltainvest = getPoiAcknowledgedForMaltainvest(authenticationInfo); - const poiAcknowledgedForBviLabuanVanuatu = getPoiAcknowledgedForBviLabuanVanuatu(authenticationInfo); - - if (shortCode === Jurisdiction.SVG) { - return true; - } - if (shortCode === Jurisdiction.BVI) { - return ( - poiAcknowledgedForBviLabuanVanuatu && - !poiOrPoaNotSubmitted && - !shouldRestrictBviAccountCreation && - hasSubmittedPersonalDetails && - poaAcknowledged - ); - } - if (shortCode === Jurisdiction.VANUATU) { - return ( - poiAcknowledgedForBviLabuanVanuatu && - !poiOrPoaNotSubmitted && - !shouldRestrictVanuatuAccountCreation && - hasSubmittedPersonalDetails && - poaAcknowledged - ); - } - if (shortCode === Jurisdiction.LABUAN) { - return poiAcknowledgedForBviLabuanVanuatu && poaAcknowledged && hasSubmittedPersonalDetails; - } - if (shortCode === Jurisdiction.MALTAINVEST) { - return (poiAcknowledgedForMaltainvest && poaAcknowledged) || isDemo; - } -}; - -const isMt5AccountAdded = ( - list: THooks.MT5AccountsList[], - marketType: TMarketTypes, - companyShortCode: string, - isDemo?: boolean -) => - list.some(item => { - const currentAccountType = isDemo ? 'demo' : 'real'; - return ( - item.account_type === currentAccountType && - item.market_type === marketType && - item.landing_company_short === companyShortCode && - item.platform === CFDPlatforms.MT5 - ); - }); - -const isDxtradeAccountAdded = (list: THooks.DxtradeAccountsList[], isDemo?: boolean) => - list.some(item => { - const currentAccountType = isDemo ? 'demo' : 'real'; - return item.account_type === currentAccountType && item.platform === CFDPlatforms.DXTRADE; - }); - -const isCTraderAccountAdded = (list: THooks.CtraderAccountsList[], isDemo?: boolean) => - list.some(item => { - const currentAccountType = isDemo ? 'demo' : 'real'; - return item.account_type === currentAccountType && item.platform === CFDPlatforms.CTRADER; - }); - -export { - getAccountVerificationStatus, - getHighlightedIconLabel, - getJurisdictionDescription, - getPlatformType, - isCTraderAccountAdded, - isDxtradeAccountAdded, - isMt5AccountAdded, - shouldRestrictBviAccountCreation, - shouldRestrictVanuatuAccountCreation, -}; diff --git a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsDescription.tsx b/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsDescription.tsx deleted file mode 100644 index c275edcec93f..000000000000 --- a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsDescription.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React, { Fragment } from 'react'; -import { useRegulationFlags } from '@/hooks'; -import { useActiveTradingAccount } from '@deriv/api-v2'; -import { Text } from '@deriv-com/ui'; -import { THooks } from '../../../../types'; -import { getJurisdictionDescription } from './CompareAccountsConfig'; - -type TCompareAccountsDescription = { - marketType: THooks.AvailableMT5Accounts['market_type']; - shortCode: THooks.AvailableMT5Accounts['shortcode']; -}; - -const CompareAccountsDescription = ({ marketType, shortCode }: TCompareAccountsDescription) => { - const { data: activeTrading } = useActiveTradingAccount(); - const { isEU: isEuRegion } = useRegulationFlags(); - const isDemo = activeTrading?.is_virtual; - const marketTypeShortCode = marketType?.concat('_', shortCode ?? ''); - const { - leverage, - counterpartyCompany, - counterpartyCompanyDescription, - jurisdiction, - jurisdictionDescription, - leverageDescription, - regulator, - regulatorDescription, - regulatorLicense, - spread, - spreadDescription, - } = getJurisdictionDescription(marketTypeShortCode ?? ''); - - return ( -
- - {'Up to'} {leverage} - - - {!isEuRegion ? leverageDescription : 'Leverage'} - - {!isEuRegion && ( - - - {spread} - - - {spreadDescription} - - - )} - {!isDemo && ( -
- - {counterpartyCompany} - - - {counterpartyCompanyDescription} - - - {jurisdiction} - - - {jurisdictionDescription} - - - {regulator} - -
- {regulatorLicense && ( - - {regulatorLicense} - - )} - - {regulatorDescription} - -
-
- )} -
- ); -}; - -export default CompareAccountsDescription; diff --git a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsHeader.tsx b/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsHeader.tsx deleted file mode 100644 index 3f6e94846f6e..000000000000 --- a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsHeader.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import { useHistory } from 'react-router-dom'; -import CloseIcon from '@/assets/svgs/ic-close-dark.svg'; -import { useRegulationFlags } from '@/hooks'; -import { useActiveTradingAccount } from '@deriv/api-v2'; -import { Text } from '@deriv-com/ui'; - -const CompareAccountsHeader = () => { - const history = useHistory(); - const { data: activeDerivTrading } = useActiveTradingAccount(); - const { isEU } = useRegulationFlags(); - - const isDemo = activeDerivTrading?.is_virtual; - - const accountType = isDemo ? 'Demo' : 'real'; - const demoSuffix = isDemo ? 'demo ' : ''; - const headerTitle = isEU ? `Deriv MT5 CFDs ${accountType} account` : `Compare CFDs ${demoSuffix}accounts`; - - return ( -
-
- - {headerTitle} - -
- { - history.push('/traders-hub'); - }} - /> -
- ); -}; - -export default CompareAccountsHeader; diff --git a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsPlatformLabel.tsx b/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsPlatformLabel.tsx deleted file mode 100644 index 59dfc81e417b..000000000000 --- a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsPlatformLabel.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; -import { twMerge } from 'tailwind-merge'; -import { TPlatforms } from '@/types'; -import { Text } from '@deriv-com/ui'; -import { - CompareAccountsPlatformLabelClass, - CompareAccountsPlatformLabelTextColorClass, - TCompareAccountsPlatformLabelClassProps, - TCompareAccountsPlatformLabelTextClassProps, -} from './CompareAccounts.classnames'; -import { getPlatformType } from './CompareAccountsConfig'; -import { platformLabel } from './constants'; - -type TCompareAccountsPlatformLabel = { - platform: TPlatforms.All; -}; - -const CompareAccountsPlatformLabel = ({ platform }: TCompareAccountsPlatformLabel) => { - const platformType = getPlatformType(platform); - - return ( -
- - {platformLabel[platformType]} - -
- ); -}; - -export default CompareAccountsPlatformLabel; diff --git a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsScreen.tsx b/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsScreen.tsx deleted file mode 100644 index ae70598d2aad..000000000000 --- a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsScreen.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import { useRegulationFlags } from '@/hooks'; -import { useCFDCompareAccounts } from '@deriv/api-v2'; -import { CompareAccountsCarousel } from '../../components'; -import CFDCompareAccountsCard from './CompareAccountsCard'; -import CompareAccountsHeader from './CompareAccountsHeader'; -import CTraderCompareAccountsCard from './CTraderCompareAccountsCard'; -import DerivXCompareAccountsCard from './DerivXCompareAccountsCard'; - -const CompareAccountsScreen = () => { - const { isEU } = useRegulationFlags(); - - const { data: compareAccounts } = useCFDCompareAccounts(isEU); - - const { mt5Accounts } = compareAccounts; - - return ( -
- -
- - {mt5Accounts?.map(item => ( - - ))} - - - -
-
- ); -}; - -export default CompareAccountsScreen; diff --git a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsTitleIcon.tsx b/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsTitleIcon.tsx deleted file mode 100644 index 9b89eb9d505a..000000000000 --- a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsTitleIcon.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import React, { Fragment, useRef } from 'react'; -import InfoIcon from '@/assets/svgs/ic-info-outline.svg'; -import { IconComponent } from '@/components'; -import { useRegulationFlags } from '@/hooks'; -import { THooks, TPlatforms } from '@/types'; -import { CFDPlatforms } from '@cfd/constants'; -import { useActiveTradingAccount } from '@deriv/api-v2'; -import { Divider, Text, Tooltip, useDevice } from '@deriv-com/ui'; -import { AccountIcons, MarketTypeShortcode } from './constants'; - -type TMarketType = THooks.AvailableMT5Accounts['market_type']; - -type TCompareAccountsTitleIcon = { - marketType: TMarketType; - platform: TPlatforms.All; - shortCode: THooks.AvailableMT5Accounts['shortcode']; -}; - -type TMarketWithShortCode = `${TMarketType}_${string}`; - -const getAccountIcon = (platform: TPlatforms.All, marketType: TMarketType, isEU: boolean) => { - if (isEU) { - return AccountIcons.default; - } - if (platform === CFDPlatforms.DXTRADE || platform === CFDPlatforms.CTRADER) { - return AccountIcons[platform]; - } - return (marketType && AccountIcons[marketType]) || AccountIcons.default; -}; - -const getAccountCardTitle = (shortCode: TMarketWithShortCode | TPlatforms.OtherAccounts, isDemo?: boolean) => { - switch (shortCode) { - case MarketTypeShortcode.SYNTHETIC_SVG: - return isDemo ? 'Derived Demo' : 'Derived - SVG'; - case MarketTypeShortcode.SYNTHETIC_BVI: - return 'Derived - BVI'; - case MarketTypeShortcode.SYNTHETIC_VANUATU: - return 'Derived - Vanuatu'; - case MarketTypeShortcode.FINANCIAL_SVG: - return isDemo ? 'Financial Demo' : 'Financial - SVG'; - case MarketTypeShortcode.FINANCIAL_BVI: - return 'Financial - BVI'; - case MarketTypeShortcode.FINANCIAL_VANUATU: - return 'Financial - Vanuatu'; - case MarketTypeShortcode.FINANCIAL_LABUAN: - return 'Financial - Labuan'; - case MarketTypeShortcode.ALL_SVG: - return isDemo ? 'Swap-Free Demo' : 'Swap-Free - SVG'; - case CFDPlatforms.DXTRADE: - return isDemo ? 'Deriv X Demo' : 'Deriv X'; - case CFDPlatforms.CTRADER: - return isDemo ? 'Deriv cTrader Demo' : 'Deriv cTrader'; - default: - return isDemo ? 'CFDs Demo' : 'CFDs'; - } -}; - -const CompareAccountsTitleIcon = ({ marketType, platform, shortCode }: TCompareAccountsTitleIcon) => { - const { data: activeDerivTrading } = useActiveTradingAccount(); - const isDemo = activeDerivTrading?.is_virtual; - const marketTypeShortCode: TMarketWithShortCode = `${marketType}_${shortCode}`; - const { isEU } = useRegulationFlags(); - const jurisdictionCardIcon = getAccountIcon(platform, marketType, isEU); - - const hoverRef = useRef(null); - const { isDesktop } = useDevice(); - - const jurisdictionCardTitle = - platform === CFDPlatforms.DXTRADE || platform === CFDPlatforms.CTRADER - ? getAccountCardTitle(platform, isDemo) - : getAccountCardTitle(marketTypeShortCode, isDemo); - const labuanJurisdictionMessage = - 'Choosing this jurisdiction will give you a Financial STP account. Your trades will go directly to the market and have tighter spreads.'; - - return ( - -
- -
- - {jurisdictionCardTitle} - - {marketTypeShortCode === MarketTypeShortcode.FINANCIAL_LABUAN && ( - -
- -
- - )} -
-
- - - ); -}; - -export default CompareAccountsTitleIcon; diff --git a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/DerivXCompareAccountsCard.tsx b/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/DerivXCompareAccountsCard.tsx deleted file mode 100644 index affab4dff540..000000000000 --- a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/DerivXCompareAccountsCard.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React, { useMemo } from 'react'; -import { useRegulationFlags } from '@/hooks'; -import { useActiveTradingAccount, useCFDAccountsList, useCFDCompareAccounts } from '@deriv/api-v2'; -import CFDCompareAccountsCard from './CompareAccountsCard'; -import { isDxtradeAccountAdded } from './CompareAccountsConfig'; - -const DerivXCompareAccountsCard = () => { - const { data: activeDerivTrading } = useActiveTradingAccount(); - - const { isEU } = useRegulationFlags(); - const { is_virtual: isDemo = false } = activeDerivTrading ?? {}; - - const { data: cfdAccounts } = useCFDAccountsList(); - - const { data: compareAccounts, hasDxtradeAccountAvailable } = useCFDCompareAccounts(isEU); - - const { dxtradeAccount } = compareAccounts; - - const isDxtradeAdded = useMemo( - () => !!cfdAccounts && isDxtradeAccountAdded(cfdAccounts.dxtrade, isDemo), - [cfdAccounts, isDemo] - ); - - if (isEU || !hasDxtradeAccountAvailable || !dxtradeAccount) return null; - - return ( - - ); -}; - -export default DerivXCompareAccountsCard; diff --git a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/InstrumentsIconWithLabel.tsx b/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/InstrumentsIconWithLabel.tsx deleted file mode 100644 index ecfe17db4d1e..000000000000 --- a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/InstrumentsIconWithLabel.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React, { FC } from 'react'; -import InstrumentsIcons from '@/assets/cfd/tradingInstruments'; -import { Text } from '@deriv-com/ui'; - -type TInstrumentsIcon = { - highlighted: boolean; - icon: keyof typeof InstrumentsIcons; - isAsterisk?: boolean; - text: string; -}; - -const InstrumentsIconWithLabel: FC = ({ highlighted, icon, isAsterisk, text }) => { - const InstrumentIcon = InstrumentsIcons[icon]; - return ( -
- -
- - {text} - -
- {isAsterisk && *} -
- ); -}; - -export default InstrumentsIconWithLabel; diff --git a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/InstrumentsLabelHighlighted.tsx b/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/InstrumentsLabelHighlighted.tsx deleted file mode 100644 index 7f083e191c4a..000000000000 --- a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/InstrumentsLabelHighlighted.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import { twMerge } from 'tailwind-merge'; -import { useRegulationFlags } from '@/hooks'; -import { useActiveTradingAccount } from '@deriv/api-v2'; -import { THooks, TPlatforms } from '../../../../types'; -import { getHighlightedIconLabel } from './CompareAccountsConfig'; -import InstrumentsIconWithLabel from './InstrumentsIconWithLabel'; - -type TInstrumentsLabelHighlighted = { - marketType: THooks.AvailableMT5Accounts['market_type']; - platform: TPlatforms.All; - shortCode: THooks.AvailableMT5Accounts['shortcode']; -}; - -const InstrumentsLabelHighlighted = ({ marketType, platform, shortCode }: TInstrumentsLabelHighlighted) => { - const { data: activeDerivTrading } = useActiveTradingAccount(); - const { isEU: isEuRegion } = useRegulationFlags(); - const isDemo = activeDerivTrading?.is_virtual; - const iconData = [...getHighlightedIconLabel(platform, isEuRegion, marketType, shortCode)]; - - return ( -
- {iconData.map(item => ( - - ))} -
- ); -}; - -export default InstrumentsLabelHighlighted; diff --git a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/constants.ts b/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/constants.ts deleted file mode 100644 index bb40088d283f..000000000000 --- a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/constants.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { CFDPlatforms, MarketType } from '../../constants'; - -export const AccountIcons = { - [MarketType.SYNTHETIC]: 'Derived', - [MarketType.FINANCIAL]: 'Financial', - [MarketType.ALL]: 'SwapFree', - [CFDPlatforms.DXTRADE]: 'DerivX', - [CFDPlatforms.CTRADER]: 'CTrader', - default: 'CFDs', -} as const; - -export const MarketTypeShortcode = { - ALL_DXTRADE: 'all_', - ALL_SVG: 'all_svg', - FINANCIAL_BVI: 'financial_bvi', - FINANCIAL_LABUAN: 'financial_labuan', - FINANCIAL_MALTAINVEST: 'financial_maltainvest', - FINANCIAL_SVG: 'financial_svg', - FINANCIAL_VANUATU: 'financial_vanuatu', - GAMING: 'gaming', - SYNTHETIC_BVI: 'synthetic_bvi', - SYNTHETIC_SVG: 'synthetic_svg', - SYNTHETIC_VANUATU: 'synthetic_vanuatu', -} as const; - -export const Jurisdiction = { - BVI: 'bvi', - LABUAN: 'labuan', - MALTAINVEST: 'maltainvest', - SVG: 'svg', - VANUATU: 'vanuatu', -} as const; - -export const platformLabel = { - CTrader: 'Deriv cTrader', - MT5: 'MT5 Platform', - DerivX: 'Deriv X', -} as const; diff --git a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/index.ts b/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/index.ts deleted file mode 100644 index be415ad177f5..000000000000 --- a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as CompareAccountsScreen } from './CompareAccountsScreen'; diff --git a/packages/tradershub/src/features/cfd/screens/CFDSuccess/CFDSuccess.tsx b/packages/tradershub/src/features/cfd/screens/CFDSuccess/CFDSuccess.tsx deleted file mode 100644 index ecf4c1331913..000000000000 --- a/packages/tradershub/src/features/cfd/screens/CFDSuccess/CFDSuccess.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import React, { ReactNode } from 'react'; -import CTraderSuccess from '@/assets/cfd/ctrader-success.svg'; -import DerivXSuccess from '@/assets/cfd/dxtrade-success.svg'; -import MT5DerivedSuccess from '@/assets/cfd/mt5-derived-success.svg'; -import MT5FinancialSuccess from '@/assets/cfd/mt5-financial-success.svg'; -import MT5SwapFreeSuccess from '@/assets/cfd/mt5-swap-free-success.svg'; -import CheckMark from '@/assets/svgs/checkmark.svg'; -import { ActionScreen } from '@/components'; -import { TMarketTypes, TPlatforms } from '@/types'; -import { PlatformDetails } from '@cfd/constants'; - -type TCFDSuccessProps = { - description: string; - renderButtons?: () => ReactNode; -} & ( - | { - displayBalance: string; - landingCompany?: string; - marketType: TMarketTypes.SortedMT5Accounts; - platform: TPlatforms.MT5; - title: string; - } - | { - marketType?: never; - platform: TPlatforms.OtherAccounts; - } -); - -type TPlatformDetails = Partial<{ - all: { icon: ReactNode }; - financial: { icon: ReactNode }; - icon: ReactNode; - synthetic: { icon: ReactNode }; -}>; - -const marketTypeToDetailsMapper: Record = { - ctrader: { - icon: , - }, - dxtrade: { - icon: , - }, - mt5: { - all: { - icon: , - }, - financial: { - icon: , - }, - synthetic: { - icon: , - }, - }, -}; - -const CFDSuccess = ({ description, marketType, platform, renderButtons }: TCFDSuccessProps) => { - let icon: ReactNode; - if (platform === 'mt5') { - icon = marketTypeToDetailsMapper[platform][marketType]?.icon; - } else { - icon = PlatformDetails[platform as keyof typeof PlatformDetails]?.icon(); - } - - const IconWithCheckMark = () => ( -
- {icon} - -
- ); - - return ( - } - renderButtons={renderButtons} - title='Success!' - /> - ); -}; - -export default CFDSuccess; diff --git a/packages/tradershub/src/features/cfd/screens/CFDSuccess/index.ts b/packages/tradershub/src/features/cfd/screens/CFDSuccess/index.ts deleted file mode 100644 index e364347aeadb..000000000000 --- a/packages/tradershub/src/features/cfd/screens/CFDSuccess/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as CFDSuccess } from './CFDSuccess'; diff --git a/packages/tradershub/src/features/cfd/screens/ChangePassword/ChangePassword.tsx b/packages/tradershub/src/features/cfd/screens/ChangePassword/ChangePassword.tsx deleted file mode 100644 index d9451787a4f1..000000000000 --- a/packages/tradershub/src/features/cfd/screens/ChangePassword/ChangePassword.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import { useQueryParams } from '@/hooks'; -import { useCFDContext } from '@/providers'; -import { CFDPlatforms, PlatformDetails } from '@cfd/constants'; -import { Modal } from '@deriv-com/ui'; -import MT5ChangePasswordScreens from './MT5ChangePasswordScreens'; -import TradingPlatformChangePasswordScreens from './TradingPlatformChangePasswordScreens'; - -const ChangePassword = () => { - const { cfdState } = useCFDContext(); - const { isModalOpen, closeModal } = useQueryParams(); - const { platform: platformState } = cfdState; - const platform = platformState ?? CFDPlatforms.MT5; - const { title } = PlatformDetails[platform]; - - const isDerivX = platform === CFDPlatforms.DXTRADE; - - return ( - - - -
-
- {isDerivX ? ( - - ) : ( - - )} -
-
- - - ); -}; - -export default ChangePassword; diff --git a/packages/tradershub/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordInputsScreen.tsx b/packages/tradershub/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordInputsScreen.tsx deleted file mode 100644 index cc3f9f7e00ef..000000000000 --- a/packages/tradershub/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordInputsScreen.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import React, { Fragment } from 'react'; -import { Formik } from 'formik'; -import { useCFDContext } from '@/providers'; -import { useTradingPlatformInvestorPasswordChange } from '@deriv/api-v2'; -import { Button, Input, Text, useDevice } from '@deriv-com/ui'; -import { ActionScreen } from '../../../../../components'; -import { validPassword } from '../../../../../utils/password'; -import { CFDPlatforms } from '../../../constants'; - -type TFormInitialValues = { - currentPassword: string; - newPassword: string; -}; - -type TMT5ChangeInvestorPasswordInputsScreen = { - sendEmail?: VoidFunction; - setNextScreen?: VoidFunction; -}; - -const MT5ChangeInvestorPasswordInputsScreen = ({ - sendEmail, - setNextScreen, -}: TMT5ChangeInvestorPasswordInputsScreen) => { - const { isDesktop } = useDevice(); - const { cfdState } = useCFDContext(); - const { accountId } = cfdState; - const mt5AccountId = accountId ?? ''; - - const { - error: changeInvestorPasswordError, - mutateAsync: changeInvestorPassword, - status: changeInvestorPasswordStatus, - } = useTradingPlatformInvestorPasswordChange(); - - const initialValues: TFormInitialValues = { currentPassword: '', newPassword: '' }; - - const onChangeButtonClickHandler = async (values: TFormInitialValues) => { - await changeInvestorPassword({ - account_id: mt5AccountId, - new_password: values.newPassword, - old_password: values.currentPassword, - platform: CFDPlatforms.MT5, - }); - setNextScreen?.(); - }; - - return ( - - - Use this password to grant viewing access to another user. While they may view your trading - account, they will not be able to trade or take any other actions. - - - If this is the first time you try to create a password, or you have forgotten your password, - please reset it. - - {changeInvestorPasswordError && ( - - {changeInvestorPasswordError?.error?.message} - - )} - - } - descriptionSize='sm' - > - - {({ handleChange, handleSubmit, values }) => ( -
-
- - -
-
- - -
-
- )} - - - ); -}; - -export default MT5ChangeInvestorPasswordInputsScreen; diff --git a/packages/tradershub/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordSavedScreen.tsx b/packages/tradershub/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordSavedScreen.tsx deleted file mode 100644 index 96530ac4d49b..000000000000 --- a/packages/tradershub/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordSavedScreen.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import MT5PasswordUpdatedIcon from '@/assets/svgs/ic-mt5-password-updated.svg'; -import { ActionScreen } from '@/components'; -import { Button, Text } from '@deriv-com/ui'; - -type TMT5ChangeInvestorPasswordSavedScreen = { - setNextScreen?: VoidFunction; -}; - -const MT5ChangeInvestorPasswordSavedScreen = ({ setNextScreen }: TMT5ChangeInvestorPasswordSavedScreen) => { - return ( - - Your investor password has been changed. - - } - descriptionSize='sm' - icon={} - renderButtons={() => ( - - )} - title='Password saved' - /> - ); -}; - -export default MT5ChangeInvestorPasswordSavedScreen; diff --git a/packages/tradershub/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordScreens.tsx b/packages/tradershub/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordScreens.tsx deleted file mode 100644 index 1b98412e3244..000000000000 --- a/packages/tradershub/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordScreens.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React, { useState } from 'react'; -import { useQueryParams } from '@/hooks'; -import MT5ChangeInvestorPasswordInputsScreen from './MT5ChangeInvestorPasswordInputsScreen'; -import MT5ChangeInvestorPasswordSavedScreen from './MT5ChangeInvestorPasswordSavedScreen'; - -type TChangeInvestorPasswordScreenIndex = 'introScreen' | 'savedScreen'; - -type TMT5ChangeInvestorPasswordScreens = { - setShowEmailSentScreen?: (value: boolean) => void; -}; - -const MT5ChangeInvestorPasswordScreens = ({ setShowEmailSentScreen }: TMT5ChangeInvestorPasswordScreens) => { - const [activeScreen, setActiveScreen] = useState('introScreen'); - const handleClick = (nextScreen: TChangeInvestorPasswordScreenIndex) => setActiveScreen(nextScreen); - const { openModal } = useQueryParams(); - - switch (activeScreen) { - case 'savedScreen': - return ( -
- openModal} /> -
- ); - case 'introScreen': - default: - return ( -
- { - setShowEmailSentScreen?.(true); - }} - setNextScreen={() => handleClick('savedScreen')} - /> -
- ); - } -}; - -export default MT5ChangeInvestorPasswordScreens; diff --git a/packages/tradershub/src/features/cfd/screens/ChangePassword/MT5ChangePasswordScreens.tsx b/packages/tradershub/src/features/cfd/screens/ChangePassword/MT5ChangePasswordScreens.tsx deleted file mode 100644 index 4f5941000220..000000000000 --- a/packages/tradershub/src/features/cfd/screens/ChangePassword/MT5ChangePasswordScreens.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React, { Fragment, useState } from 'react'; -import IcBackArrow from '@/assets/svgs/ic-back-arrow.svg'; -import { SentEmailContent } from '@/components'; -import { useCFDContext } from '@/providers'; -import { Tab, Tabs, Text } from '@deriv-com/ui'; -import { CFDPlatforms, PlatformDetails } from '../../constants'; -import MT5ChangeInvestorPasswordScreens from './InvestorPassword/MT5ChangeInvestorPasswordScreens'; -import TradingPlatformChangePasswordScreens from './TradingPlatformChangePasswordScreens'; - -const MT5ChangePasswordScreens = () => { - const [showSentEmailContentWithoutTabs, setShowSentEmailContentWithoutTabs] = useState(false); - const [, setTabNumber] = useState(0); - const { setCfdState } = useCFDContext(); - - const platform = CFDPlatforms.MT5; - const { title } = PlatformDetails[platform]; - - return showSentEmailContentWithoutTabs ? ( - -
{ - setCfdState({ - description: 'Please click on the link in the email to reset your password.', - isInvestorPassword: true, - }); - setShowSentEmailContentWithoutTabs(false); - setTabNumber(1); - }} - onKeyDown={event => { - if (event.key === 'Enter') { - setShowSentEmailContentWithoutTabs(false); - setTabNumber(1); - } - }} - > - - Back -
- -
- -
- - ) : ( - - - - - - - - - ); -}; - -export default MT5ChangePasswordScreens; diff --git a/packages/tradershub/src/features/cfd/screens/ChangePassword/TradingPlatformChangePasswordScreens.tsx b/packages/tradershub/src/features/cfd/screens/ChangePassword/TradingPlatformChangePasswordScreens.tsx deleted file mode 100644 index c7601796f759..000000000000 --- a/packages/tradershub/src/features/cfd/screens/ChangePassword/TradingPlatformChangePasswordScreens.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import React, { useState } from 'react'; -import DerivXPasswordIcon from '@/assets/svgs/ic-derivx-password-updated.svg'; -import MT5PasswordIcon from '@/assets/svgs/ic-mt5-password.svg'; -import { ActionScreen, SentEmailContent } from '@/components'; -import { useHandleSendEmail, useQueryParams } from '@/hooks'; -import { useCFDContext } from '@/providers'; -import { TPlatforms } from '@/types'; -import { CFDPlatforms, PlatformDetails } from '@cfd/constants'; -import { Button, Text } from '@deriv-com/ui'; - -type TradingPlatformChangePasswordScreensProps = { - platform: TPlatforms.All; -}; - -const TradingPlatformChangePasswordScreens = ({ platform }: TradingPlatformChangePasswordScreensProps) => { - type TChangePasswordScreenIndex = 'confirmationScreen' | 'emailVerification' | 'introScreen'; - const [activeScreen, setActiveScreen] = useState('introScreen'); - const handleClick = (nextScreen: TChangePasswordScreenIndex) => setActiveScreen(nextScreen); - - const { closeModal } = useQueryParams(); - const { setCfdState } = useCFDContext(); - const { handleSendEmail } = useHandleSendEmail(); - - const { title } = PlatformDetails[platform]; - - const isDerivX = platform === CFDPlatforms.DXTRADE; - - const ChangePasswordScreens = { - confirmationScreen: { - bodyText: ( - - This will change the password to all of your {title} accounts. - - ), - button: ( -
- - -
- ), - headingText: `Confirm to change your ${title} password`, - }, - introScreen: { - bodyText: `Use this password to log in to your ${title} accounts on the desktop, web, and mobile apps.`, - button: ( - - ), - headingText: `${title} password`, - }, - }; - - if (activeScreen === 'emailVerification') - return ( -
- -
- ); - - return ( -
- : } - renderButtons={() => ChangePasswordScreens[activeScreen].button} - title={ChangePasswordScreens[activeScreen].headingText} - /> -
- ); -}; - -export default TradingPlatformChangePasswordScreens; diff --git a/packages/tradershub/src/features/cfd/screens/ChangePassword/index.ts b/packages/tradershub/src/features/cfd/screens/ChangePassword/index.ts deleted file mode 100644 index ce02d00ac9b5..000000000000 --- a/packages/tradershub/src/features/cfd/screens/ChangePassword/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ChangePassword } from './ChangePassword'; diff --git a/packages/tradershub/src/features/cfd/screens/CreatePassword/CreatePassword.tsx b/packages/tradershub/src/features/cfd/screens/CreatePassword/CreatePassword.tsx deleted file mode 100644 index e6513944409a..000000000000 --- a/packages/tradershub/src/features/cfd/screens/CreatePassword/CreatePassword.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React, { ChangeEvent } from 'react'; -import DxtradePasswordIcon from '@/assets/svgs/ic-derivx-password-updated.svg'; -import MT5PasswordIcon from '@/assets/svgs/ic-mt5-password.svg'; -import { useCFDContext } from '@/providers'; -import { CFDPlatforms, PlatformDetails } from '@cfd/constants'; -import { Modal, PasswordInput, Text } from '@deriv-com/ui'; -import DxtradePasswordFooter from '../../modals/DxtradePasswordModal/DxtradePasswordFooter'; -import MT5PasswordFooter from '../../modals/MT5PasswordModal/MT5PasswordFooter'; - -type TCreatePasswordProps = { - onPasswordChange?: (e: ChangeEvent) => void; - password: string; -}; - -/** - * Component to create a password for the platform - * @param onPasswordChange - * @param password - */ -const CreatePassword = ({ onPasswordChange, password }: TCreatePasswordProps) => { - const { cfdState } = useCFDContext(); - - const { platform = CFDPlatforms.MT5 } = cfdState; - const { title } = PlatformDetails[platform]; - - return ( - - -
- {platform === CFDPlatforms.MT5 ? : } -
- -
- Create a {title} password - You can use this password for all your {title} accounts. -
- - - - {platform === CFDPlatforms.DXTRADE ? ( - - ) : ( - - )} - - - ); -}; - -export default CreatePassword; diff --git a/packages/tradershub/src/features/cfd/screens/CreatePassword/index.ts b/packages/tradershub/src/features/cfd/screens/CreatePassword/index.ts deleted file mode 100644 index 66857c3b562b..000000000000 --- a/packages/tradershub/src/features/cfd/screens/CreatePassword/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as CreatePassword } from './CreatePassword'; diff --git a/packages/tradershub/src/features/cfd/screens/DynamicLeverage/DynamicLeverageMarketCard.tsx b/packages/tradershub/src/features/cfd/screens/DynamicLeverage/DynamicLeverageMarketCard.tsx deleted file mode 100644 index 3ca66ba50acd..000000000000 --- a/packages/tradershub/src/features/cfd/screens/DynamicLeverage/DynamicLeverageMarketCard.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import { THooks } from '@/types'; -import { Text } from '@deriv-com/ui'; -import { DynamicLeverageTableColumnHeader } from './DynamicLeverageTableColumnHeader'; - -type TDynamicLeverageMarketCardProps = { - data: THooks.DynamicLeverage[keyof THooks.DynamicLeverage]['volume']['data']; - displayName: string; - instruments: string[]; - max: number; - min: number; -}; - -export const DynamicLeverageMarketCard = ({ - data, - displayName, - instruments, - max, - min, -}: TDynamicLeverageMarketCardProps) => ( -
-
- - {displayName} - - {!!instruments.length && ( - - {`(${instruments.join(', ')})`} - - )} - - {`Up to ${min}:${max}`} - -
-
-
- - - -
-
- {data?.map(columns => ( -
- {Object.entries(columns).map(([columnKey, value]) => ( -
- - {value} - -
- ))} -
- ))} -
-
-
-); diff --git a/packages/tradershub/src/features/cfd/screens/DynamicLeverage/DynamicLeverageScreen.tsx b/packages/tradershub/src/features/cfd/screens/DynamicLeverage/DynamicLeverageScreen.tsx deleted file mode 100644 index 822ac9f4a0e3..000000000000 --- a/packages/tradershub/src/features/cfd/screens/DynamicLeverage/DynamicLeverageScreen.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import { twMerge } from 'tailwind-merge'; -import { useDynamicLeverageModalState } from '@cfd/components'; -import { PlatformDetails } from '@cfd/constants'; -import { useDynamicLeverage } from '@deriv/api-v2'; -import { Text } from '@deriv-com/ui'; -import { DynamicLeverageMarketCard } from './DynamicLeverageMarketCard'; - -const DynamicLeverageScreen = () => { - const { data: dynamicLeverages } = useDynamicLeverage(PlatformDetails.mt5.platform); - const { isDynamicLeverageVisible } = useDynamicLeverageModalState(); - - if (!dynamicLeverages) return null; - - return ( -
- - Enjoy dynamic leverage of up to 1:1500 when trading selected instruments in the forex, - commodities, cryptocurrencies, and stock indices markets. Our dynamic leverage adjusts automatically to - your trading position, based on asset type and trading volume. - -
- {(['forex', 'metals', 'cryptocurrencies', 'stock_indices'] as const).map(key => { - const { - display_name: displayName, - instruments, - max, - min, - volume: { data }, - } = dynamicLeverages[key]; - return ( - - ); - })} -
-
- ); -}; -export default DynamicLeverageScreen; diff --git a/packages/tradershub/src/features/cfd/screens/DynamicLeverage/DynamicLeverageTableColumnHeader.tsx b/packages/tradershub/src/features/cfd/screens/DynamicLeverage/DynamicLeverageTableColumnHeader.tsx deleted file mode 100644 index e00791f0bc3d..000000000000 --- a/packages/tradershub/src/features/cfd/screens/DynamicLeverage/DynamicLeverageTableColumnHeader.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { Text } from '@deriv-com/ui'; - -type TDynamicLeverageTableColumnHeader = { - subtitle: string; - title: string; -}; - -export const DynamicLeverageTableColumnHeader = ({ subtitle, title }: TDynamicLeverageTableColumnHeader) => ( -
- - {title} - - - {subtitle} - -
-); diff --git a/packages/tradershub/src/features/cfd/screens/DynamicLeverage/DynamicLeverageTitle.tsx b/packages/tradershub/src/features/cfd/screens/DynamicLeverage/DynamicLeverageTitle.tsx deleted file mode 100644 index 8e5cd19f5604..000000000000 --- a/packages/tradershub/src/features/cfd/screens/DynamicLeverage/DynamicLeverageTitle.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { useDynamicLeverageModalState } from '@cfd/components'; -import { StandaloneArrowLeftBoldIcon } from '@deriv/quill-icons'; -import { Text } from '@deriv-com/ui'; - -export const DynamicLeverageTitle = () => { - const { toggleDynamicLeverage } = useDynamicLeverageModalState(); - - return ( -
- - Get more out of Deriv MT5 Financial -
- ); -}; - -export default DynamicLeverageTitle; diff --git a/packages/tradershub/src/features/cfd/screens/DynamicLeverage/index.ts b/packages/tradershub/src/features/cfd/screens/DynamicLeverage/index.ts deleted file mode 100644 index a5b5553cddeb..000000000000 --- a/packages/tradershub/src/features/cfd/screens/DynamicLeverage/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as DynamicLeverageScreen } from './DynamicLeverageScreen'; -export { default as DynamicLeverageTitle } from './DynamicLeverageTitle'; diff --git a/packages/tradershub/src/features/cfd/screens/EnterPassword/EnterPassword.tsx b/packages/tradershub/src/features/cfd/screens/EnterPassword/EnterPassword.tsx deleted file mode 100644 index 0d9d9fd5b8e9..000000000000 --- a/packages/tradershub/src/features/cfd/screens/EnterPassword/EnterPassword.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React, { ChangeEvent, Fragment } from 'react'; -import { useQueryParams, useRegulationFlags } from '@/hooks'; -import { useCFDContext } from '@/providers'; -import { Category, CFDPlatforms, MarketType, MarketTypeDetails, PlatformDetails } from '@cfd/constants'; -import { useActiveTradingAccount } from '@deriv/api-v2'; -import { Modal, PasswordInput, Text } from '@deriv-com/ui'; -import DxtradePasswordFooter from '../../modals/DxtradePasswordModal/DxtradePasswordFooter'; -import MT5PasswordFooter from '../../modals/MT5PasswordModal/MT5PasswordFooter'; - -type TEnterPasswordProps = { - isLoading?: boolean; - onPasswordChange?: (e: ChangeEvent) => void; - onPrimaryClick?: () => void; - onSecondaryClick?: () => void; - password: string; - passwordError?: boolean; -}; - -/** - * Component to display the enter password screen - * @param {Function} onPasswordChange - callback to handle password change - * @param {string} password - password value - */ - -const EnterPassword = ({ onPasswordChange, password }: TEnterPasswordProps) => { - const { isEU } = useRegulationFlags(); - const { cfdState } = useCFDContext(); - const { data } = useActiveTradingAccount(); - const { closeModal } = useQueryParams(); - - const marketTypeDetails = MarketTypeDetails(isEU); - const { marketType = MarketType.ALL, platform = CFDPlatforms.MT5 } = cfdState; - const { title } = PlatformDetails[platform]; - const accountType = data?.is_virtual ? Category.DEMO : Category.REAL; - const marketTypeTitle = - platform === PlatformDetails.dxtrade.platform ? accountType : marketTypeDetails[marketType]?.title; - - return ( - - - {`Enter your ${title} password`} - - -
- - Enter your {title} password to add a {title} {marketTypeTitle} account. - - -
- - - {platform === CFDPlatforms.MT5 ? ( - - ) : ( - - )} - - - ); -}; - -export default EnterPassword; diff --git a/packages/tradershub/src/features/cfd/screens/EnterPassword/index.ts b/packages/tradershub/src/features/cfd/screens/EnterPassword/index.ts deleted file mode 100644 index 32180fe4b61d..000000000000 --- a/packages/tradershub/src/features/cfd/screens/EnterPassword/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as EnterPassword } from './EnterPassword'; diff --git a/packages/tradershub/src/features/cfd/screens/GetMoreMT5Accounts/GetMoreMT5Accounts.tsx b/packages/tradershub/src/features/cfd/screens/GetMoreMT5Accounts/GetMoreMT5Accounts.tsx deleted file mode 100644 index f53e8f417f49..000000000000 --- a/packages/tradershub/src/features/cfd/screens/GetMoreMT5Accounts/GetMoreMT5Accounts.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React, { FC } from 'react'; -import AddIcon from '@/assets/svgs/add-icon.svg'; -import { useQueryParams } from '@/hooks'; -import { Text } from '@deriv-com/ui'; - -const GetMoreMT5Accounts: FC = () => { - const { openModal } = useQueryParams(); - - return ( -
openModal('MT5AccountTypeModal')} - onKeyDown={e => { - if (e.key === 'Enter') { - openModal('MT5AccountTypeModal'); - } - }} - role='button' - tabIndex={0} - > -
-
- -
-
-
- Get more -
-
- Get more Deriv MT5 accounts under your preferred jurisdictions. -
-
-
-
- ); -}; - -export default GetMoreMT5Accounts; diff --git a/packages/tradershub/src/features/cfd/screens/GetMoreMT5Accounts/index.ts b/packages/tradershub/src/features/cfd/screens/GetMoreMT5Accounts/index.ts deleted file mode 100644 index 4c5c9ffafeac..000000000000 --- a/packages/tradershub/src/features/cfd/screens/GetMoreMT5Accounts/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as GetMoreMT5Accounts } from './GetMoreMT5Accounts'; diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCard.classnames.ts b/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCard.classnames.ts deleted file mode 100644 index 45e935cdbb4a..000000000000 --- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCard.classnames.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { cva, VariantProps } from 'class-variance-authority'; - -export const JurisdictionCardClass = cva( - 'items-stretch rounded-xl border-1 border-solid cursor-pointer flex flex-col justify-center w-full lg:w-[276px] relative h-auto transition-shadow transition-transform duration-300 [transform-style:preserve-3d] transform-gpu', - { - compoundVariants: [ - { - class: 'border-system-light-secondary-background', - isSelected: false, - }, - ], - variants: { - isAdded: { - true: 'cursor-not-allowed select-none', - }, - isFlipped: { - true: '[transform:rotateY(-180deg)]', - }, - isSelected: { - true: 'border-brand-blue shadow-[0_24px_48px_0_rgba(14,_14,_14,_0.18)]', - }, - }, - } -); - -export const JurisdictionCardTagClass = cva('rounded-xs text-system-light-primary-background px-10 py-5', { - defaultVariants: { - displayTextSkinColor: 'default', - }, - variants: { - displayTextSkinColor: { - 'brown-dark': 'bg-brand-brown-dark', - default: 'bg-brand-red-dark', - 'red-dark': 'bg-brand-red-dark', - 'red-darker': 'bg-brand-red-darker', - 'red-light': 'bg-brand-red-light', - 'violet-dark': 'bg-brand-violet-dark', - 'yellow-dark': 'bg-brand-yellow-dark', - 'yellow-light': 'bg-brand-yellow-light', - }, - }, -}); - -export type JurisdictionCardClassProps = NonNullable>; -export type JurisdictionCardTagProps = NonNullable>; diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCard.tsx b/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCard.tsx deleted file mode 100644 index 4b3eabf17528..000000000000 --- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCard.tsx +++ /dev/null @@ -1,197 +0,0 @@ -import React, { MouseEvent, useMemo, useState } from 'react'; -import { twMerge } from 'tailwind-merge'; -import DocumentsIcon from '@/assets/svgs/ic-documents.svg'; -import IdCardIcon from '@/assets/svgs/ic-id-card.svg'; -import SelfieIcon from '@/assets/svgs/ic-selfie.svg'; -import { StaticLink } from '@/components'; -import { useRegulationFlags } from '@/hooks'; -import { useCFDContext } from '@/providers'; -import { useDynamicLeverageModalState } from '@cfd/components'; -import { MarketType } from '@cfd/constants'; -import { Text } from '@deriv-com/ui'; -import { getJurisdictionContents } from '../jurisdiction-contents/jurisdiction-contents'; -import { - TClickableDescription, - TJurisdictionCardItems, - TJurisdictionCardSection, -} from '../jurisdiction-contents/props.types'; -import { - JurisdictionCardClass, - JurisdictionCardClassProps, - JurisdictionCardTagClass, - JurisdictionCardTagProps, -} from './JurisdictionCard.classnames'; -import JurisdictionCardBack from './JurisdictionCardBack'; -import JurisdictionCardRow from './JurisdictionCardRow'; -import JurisdictionCardTag from './JurisdictionCardTag'; -import JurisdictionCardVerificationTag from './JurisdictionCardVerificationTag'; - -type TJurisdictionCardProps = JurisdictionCardClassProps & { - jurisdiction: string; - onSelect: (clickedJurisdiction: string) => void; -}; - -type TDisplayTextSkinColor = JurisdictionCardTagProps['displayTextSkinColor']; - -type TVerificationDocumentsMapper = { - [key: string]: { - category: 'poa' | 'poi' | null; - icon?: JSX.Element; - }; -}; - -const verificationDocumentsMapper: TVerificationDocumentsMapper = { - documentNumber: { - category: 'poi', - icon: , - }, - nameAndAddress: { - category: 'poa', - icon: , - }, - notApplicable: { - category: null, - }, - selfie: { - category: 'poi', - icon: , - }, -}; - -const JurisdictionCard = ({ isAdded = false, isSelected = false, jurisdiction, onSelect }: TJurisdictionCardProps) => { - const [isFlipped, setIsFlipped] = useState(false); - const { toggleDynamicLeverage } = useDynamicLeverageModalState(); - const { cfdState } = useCFDContext(); - const { isEU } = useRegulationFlags(); - - const { marketType: marketTypeState } = cfdState; - - const descriptionClickHandler = (tag?: TClickableDescription['tag']) => (event: MouseEvent) => { - event.stopPropagation(); - if (tag === 'dynamicLeverage') { - toggleDynamicLeverage(); - } else { - setIsFlipped(true); - } - }; - - const jurisdictionContents = useMemo( - () => getJurisdictionContents(isEU)[jurisdiction], - [isEU, jurisdiction] - ); - - if (!jurisdictionContents) { - return null; - } - - const { contents, header, isOverHeaderAvailable, overHeader, verificationDocs } = jurisdictionContents; - - const marketType = marketTypeState ?? MarketType.ALL; - const rows = contents[marketType] ?? []; - - const parseDescription = (row: TJurisdictionCardSection) => { - if (row.clickableDescription) - return row.clickableDescription.map(description => { - if (description.type === 'link') { - return ( - - {description.text} - - ); - } - return description.text; - }); - return row.description; - }; - - const parseTag = (row: TJurisdictionCardSection) => - row?.titleIndicators?.displayText && ( -
- - {row?.titleIndicators.displayText} - -
- ); - - return ( -
{ - !isAdded && onSelect(jurisdiction); - }} - onKeyDown={event => { - if (event.key === 'Enter') { - !isAdded && onSelect(jurisdiction); - } - }} - > -
- {isOverHeaderAvailable && } -
- - {header} - -
-
- {rows.map(row => ( - { - if (!row?.titleIndicators) return; - - if ( - row.titleIndicators?.type === 'displayIcons' && - verificationDocs && - marketType && - marketType !== 'all' - ) { - return ( -
- {!(marketType in verificationDocs) - ? verificationDocumentsMapper.notApplicable.icon - : verificationDocs[marketType] - ?.filter(doc => doc in verificationDocumentsMapper) - .map(doc => ( - - ))} -
- ); - } - if (row.titleIndicators.displayText) { - return parseTag(row); - } - }} - title={row.title} - /> - ))} -
- {isAdded && ( -
- - Added - -
- )} -
- {marketType && marketType !== 'all' && verificationDocs && ( - - )} -
- ); -}; - -export default JurisdictionCard; diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardBack.tsx b/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardBack.tsx deleted file mode 100644 index ee4d643825e3..000000000000 --- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardBack.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React, { Dispatch, SetStateAction } from 'react'; -import { LabelPairedArrowLeftLgRegularIcon } from '@deriv/quill-icons'; -import { Text } from '@deriv-com/ui'; -import { verificationIconsMapper, verificationStatusIconsMapper } from '../constants'; -import { jurisdictionVerificationContents } from '../jurisdiction-contents/jurisdiction-verification-contents'; -import { - TJurisdictionCardItemVerification, - TJurisdictionCardItemVerificationItem, -} from '../jurisdiction-contents/props.types'; - -type TJurisdictionCardBackProps = { - setIsFlipped: Dispatch>; - verificationDocs?: TJurisdictionCardItemVerification; -}; - -const JurisdictionCardBack = ({ setIsFlipped, verificationDocs }: TJurisdictionCardBackProps) => { - const verificationContents = jurisdictionVerificationContents(); - if (!verificationDocs) return null; - return ( -
-
- { - e.stopPropagation(); - setIsFlipped(false); - }} - /> -
- {verificationContents.shortDescription} - {verificationDocs.map((verificationDocument: TJurisdictionCardItemVerificationItem) => { - return ( -
-
{verificationIconsMapper[verificationDocument]}
- - {verificationContents.requiredVerificationDocs[verificationDocument]?.text} - -
- ); - })} -
- {verificationContents.statusReferences.map(statusReference => { - return ( -
-
{verificationStatusIconsMapper[statusReference.icon]}
- {statusReference.text} -
- ); - })} -
- ); -}; - -export default JurisdictionCardBack; diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardRow.tsx b/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardRow.tsx deleted file mode 100644 index 0f03c56b1e8b..000000000000 --- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardRow.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React, { ReactNode } from 'react'; -import { Text } from '@deriv-com/ui'; - -type TJurisdictionCardRowProps = { - description?: ReactNode; - renderTag?: () => ReactNode; - title: string; -}; - -const JurisdictionCardRow = ({ description, renderTag, title }: TJurisdictionCardRowProps) => { - return ( -
-
- - {title} - - {renderTag &&
{renderTag()}
} -
- {description && {description}} -
- ); -}; - -export default JurisdictionCardRow; diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardTag.tsx b/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardTag.tsx deleted file mode 100644 index 2bf0e5abc0fa..000000000000 --- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardTag.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { Text } from '@deriv-com/ui'; - -type TJurisdictionCardTagProps = { - tag: string; -}; - -const JurisdictionCardTag = ({ tag }: TJurisdictionCardTagProps) => ( -
- - {tag} - -
-); - -export default JurisdictionCardTag; diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardVerificationTag.tsx b/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardVerificationTag.tsx deleted file mode 100644 index 5f343348c7be..000000000000 --- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardVerificationTag.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React, { ReactNode } from 'react'; -import VerificationFailedIcon from '@/assets/svgs/ic-verification-failed-status.svg'; -import VerificationPendingIcon from '@/assets/svgs/ic-verification-pending-status.svg'; -import VerificationSuccessIcon from '@/assets/svgs/ic-verification-success-status.svg'; -import { THooks } from '@/types'; -import { useAuthentication } from '@deriv/api-v2'; - -type TJurisdictionCardVerificationTagProps = { - category: 'poa' | 'poi' | null; - icon: ReactNode; -}; - -const verificationStatusIconMapper: Partial< - Record< - NonNullable | NonNullable, - JSX.Element - > -> = { - pending: , - rejected: , - verified: , -}; - -/** - * Component to show the verification status of the user - * @param category - * @param icon - * @returns - */ - -const JurisdictionCardVerificationTag = ({ category, icon }: TJurisdictionCardVerificationTagProps) => { - const { data } = useAuthentication(); - - const renderStatusIcon = ( - category: TJurisdictionCardVerificationTagProps['category'], - status: NonNullable - ) => { - if (category && status && Object.keys(verificationStatusIconMapper).includes(status)) { - return ( -
- {verificationStatusIconMapper[status as keyof typeof verificationStatusIconMapper]} -
- ); - } - return null; - }; - - return ( -
- {icon} - {category === 'poi' && renderStatusIcon(category, data?.poi_status || 'none')} - {category === 'poa' && renderStatusIcon(category, data?.poa_status || 'none')} -
- ); -}; - -export default JurisdictionCardVerificationTag; diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/index.ts b/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/index.ts deleted file mode 100644 index fa61b56b8a4c..000000000000 --- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as JurisdictionCard } from './JurisdictionCard'; diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionFootNoteTitle/JurisdictionFootNoteTitle.tsx b/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionFootNoteTitle/JurisdictionFootNoteTitle.tsx deleted file mode 100644 index 6406da909d82..000000000000 --- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionFootNoteTitle/JurisdictionFootNoteTitle.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import { THooks } from '@/types'; -import { MarketTypeDetails } from '@cfd/constants'; -import { Text } from '@deriv-com/ui'; - -type TJurisdictionFootNoteTitle = { - marketType: Exclude; - selectedJurisdiction: THooks.AvailableMT5Accounts['shortcode']; -}; - -const JurisdictionFootNoteTitle = ({ marketType, selectedJurisdiction }: TJurisdictionFootNoteTitle) => { - let footnoteText: string | undefined; - - const marketTypeDetails = MarketTypeDetails(false); - - const title = marketTypeDetails[marketType]?.title; - - switch (selectedJurisdiction) { - case 'svg': - footnoteText = `Add your Deriv MT5 ${title} account under Deriv (SVG) LLC (company no. 273 LLC 2020).`; - break; - case 'bvi': - footnoteText = `Add your Deriv MT5 ${title} account under Deriv (BVI) Ltd, regulated by the British Virgin Islands Financial Services Commission (License no. SIBA/L/18/1114).`; - break; - case 'labuan': - footnoteText = `Add your Deriv MT5 ${title} STP account under Deriv (FX) Ltd regulated by Labuan Financial Services Authority (License no. MB/18/0024).`; - break; - case 'vanuatu': - footnoteText = `Add your Deriv MT5 ${title} account under Deriv (V) Ltd, regulated by the Vanuatu Financial Services Commission.`; - break; - default: - footnoteText = undefined; - break; - } - - if (!footnoteText) { - return null; - } - - return ( - - {footnoteText} - - ); -}; - -export default JurisdictionFootNoteTitle; diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionFootNoteTitle/index.tsx b/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionFootNoteTitle/index.tsx deleted file mode 100644 index 819e9ecc49f2..000000000000 --- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionFootNoteTitle/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default as JurisdictionFootNoteTitle } from './JurisdictionFootNoteTitle'; diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx b/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx deleted file mode 100644 index b44b98c2e16e..000000000000 --- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React, { Dispatch, SetStateAction, useEffect, useMemo } from 'react'; -import { twMerge } from 'tailwind-merge'; -import { useCFDContext } from '@/providers'; -import { useDynamicLeverageModalState } from '@cfd/components'; -import { Jurisdiction } from '@cfd/constants'; -import { useAvailableMT5Accounts, useMT5AccountsList } from '@deriv/api-v2'; -import { JurisdictionCard } from './JurisdictionCard'; - -type TJurisdictionScreenProps = { - setIsCheckBoxChecked: Dispatch>; -}; - -const JurisdictionScreen = ({ setIsCheckBoxChecked }: TJurisdictionScreenProps) => { - const { cfdState, setCfdState } = useCFDContext(); - const { data: availableMT5Accounts } = useAvailableMT5Accounts(); - const { data: mt5AccountsList } = useMT5AccountsList(); - const { marketType, selectedJurisdiction } = cfdState; - const { isDynamicLeverageVisible } = useDynamicLeverageModalState(); - const jurisdictions = useMemo( - () => - availableMT5Accounts - ?.filter(account => account.market_type === marketType) - .map(account => account.shortcode) ?? [], - [availableMT5Accounts, marketType] - ); - const addedJurisdictions = useMemo( - () => - mt5AccountsList - ?.filter(account => account.market_type === marketType && !account.is_virtual) - .map(account => account.landing_company_short) ?? [], - [marketType, mt5AccountsList] - ); - - useEffect(() => { - setIsCheckBoxChecked(false); - }, [selectedJurisdiction, setIsCheckBoxChecked]); - - return ( -
-
- {jurisdictions.map(jurisdiction => ( - { - if (clickedJurisdiction === selectedJurisdiction) { - setCfdState({ selectedJurisdiction: '' }); - } else { - setCfdState({ selectedJurisdiction: clickedJurisdiction }); - } - }} - /> - ))} -
-
- ); -}; - -export default JurisdictionScreen; diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/JurisdictionTncSection.tsx b/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/JurisdictionTncSection.tsx deleted file mode 100644 index 108c0ee9566d..000000000000 --- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/JurisdictionTncSection.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react'; -import { StaticLink } from '@/components'; -import { useCFDContext } from '@/providers'; -import { companyNamesAndUrls, Jurisdiction, MarketType } from '@cfd/constants'; -import { Checkbox, Text } from '@deriv-com/ui'; -import { URLUtils } from '@deriv-com/utils'; -import { JurisdictionFootNoteTitle } from '../JurisdictionFootNoteTitle'; - -type TJurisdictionTncSectionProps = { - isCheckBoxChecked: boolean; - setIsCheckBoxChecked: React.Dispatch>; -}; - -/** - * Component to show the Terms and Conditions for the selected jurisdiction - * @param isCheckBoxChecked - * @param setIsCheckBoxChecked - * @param selectedCompany - * @param selectedJurisdiction - * @param param0 - * @returns - */ - -const JurisdictionTncSection = ({ isCheckBoxChecked, setIsCheckBoxChecked }: TJurisdictionTncSectionProps) => { - const { getDerivStaticURL } = URLUtils; - const { cfdState } = useCFDContext(); - const { marketType: marketTypeState, selectedJurisdiction } = cfdState; - const marketType = marketTypeState ?? MarketType.ALL; - const selectedCompany = companyNamesAndUrls[selectedJurisdiction as keyof typeof companyNamesAndUrls]; - - return ( -
- {selectedJurisdiction && ( - - )} - {selectedJurisdiction && selectedJurisdiction !== Jurisdiction.SVG && ( -
- - I confirm and accept {selectedCompany.name}‘s{' '} - - Terms and Conditions - - - } - name='tnc' - onChange={(event: React.ChangeEvent) => - setIsCheckBoxChecked(event.target.checked) - } - wrapperClassName='w-auto' - /> -
- )} -
- ); -}; - -export default JurisdictionTncSection; diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/index.ts b/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/index.ts deleted file mode 100644 index 12eb5da391ce..000000000000 --- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as JurisdictionTncSection } from './JurisdictionTncSection'; diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/constants.tsx b/packages/tradershub/src/features/cfd/screens/Jurisdiction/constants.tsx deleted file mode 100644 index c9ed25edf9fb..000000000000 --- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/constants.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import DocumentsIcon from '@/assets/svgs/ic-documents.svg'; -import IdCardIcon from '@/assets/svgs/ic-id-card.svg'; -import NotApplicableIcon from '@/assets/svgs/ic-not-applicable.svg'; -import SelfieIcon from '@/assets/svgs/ic-selfie.svg'; -import VerificationFailedStatusIcon from '@/assets/svgs/ic-verification-failed-status.svg'; -import VerificationPendingStatusIcon from '@/assets/svgs/ic-verification-pending-status.svg'; -import VerificationSuccessStatusIcon from '@/assets/svgs/ic-verification-success-status.svg'; - -export const verificationIconsMapper: Record = { - documentNumber: , - nameAndAddress: , - notApplicable: , - selfie: , -}; - -export const verificationStatusIconsMapper: Record = { - verificationFailedStatusIcon: , - verificationPendingStatusIcon: , - verificationSuccessStatusIcon: , -}; diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/index.ts b/packages/tradershub/src/features/cfd/screens/Jurisdiction/index.ts deleted file mode 100644 index d2581a736617..000000000000 --- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as JurisdictionScreen } from './JurisdictionScreen'; -export * from './JurisdictionTncSection'; diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/jurisdiction-bvi-contents.ts b/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/jurisdiction-bvi-contents.ts deleted file mode 100644 index 5586d20393f2..000000000000 --- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/jurisdiction-bvi-contents.ts +++ /dev/null @@ -1,114 +0,0 @@ -import { TJurisdictionCardItems } from './props.types'; - -export const getJurisdictionBviContents = (): TJurisdictionCardItems => ({ - contents: { - financial: [ - { - description: 'Forex (standard/micro), stocks, stock indices, commodities, cryptocurrencies and ETFs', - key: 'assets', - title: 'Assets', - titleIndicators: { - displayText: '170+', - displayTextSkinColor: 'red-light', - type: 'displayText', - }, - }, - { - clickableDescription: [ - { - tag: 'dynamicLeverage', - text: 'Dynamic Leverage', - type: 'link', - }, - ], - key: 'leverage', - title: 'Leverage', - titleIndicators: { - displayText: '1:1000', - displayTextSkinColor: 'yellow-light', - type: 'displayText', - }, - }, - { - key: 'spreadsFrom', - title: 'Spreads from', - titleIndicators: { - displayText: '0.5 pips', - displayTextSkinColor: 'violet-dark', - type: 'displayText', - }, - }, - { - clickableDescription: [ - { - text: 'Learn more', - type: 'link', - }, - { - text: 'about verifications needed.', - type: 'text', - }, - ], - key: 'verifications', - title: 'Verifications', - titleIndicators: { - type: 'displayIcons', - }, - }, - { - description: 'British Virgin Islands Financial Services Commission (License no. SIBA/L/18/1114)', - key: 'regulator', - title: 'Regulator/EDR', - }, - ], - synthetic: [ - { - description: 'Synthetic indices, basket indices, and derived FX', - key: 'assets', - title: 'Assets', - titleIndicators: { - displayText: '40+', - displayTextSkinColor: 'red-darker', - type: 'displayText', - }, - }, - { - key: 'leverage', - title: 'Leverage', - titleIndicators: { - displayText: '1:1000', - displayTextSkinColor: 'yellow-light', - type: 'displayText', - }, - }, - { - clickableDescription: [ - { - text: 'Learn more', - type: 'link', - }, - { - text: 'about verifications needed.', - type: 'text', - }, - ], - key: 'verifications', - title: 'Verifications', - titleIndicators: { - type: 'displayIcons', - }, - }, - { - description: 'British Virgin Islands Financial Services Commission (License no. SIBA/L/18/1114)', - key: 'regulator', - title: 'Regulator/EDR', - }, - ], - }, - header: 'British Virgin Islands', - isOverHeaderAvailable: false, - verificationDocs: { - financial: ['documentNumber', 'nameAndAddress'], - synthetic: ['documentNumber', 'nameAndAddress'], - }, -}); diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/jurisdiction-contents.ts b/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/jurisdiction-contents.ts deleted file mode 100644 index b763b1c7e4a8..000000000000 --- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/jurisdiction-contents.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { getJurisdictionMaltainvestContents } from './jurisdiction_maltainvest_contents'; -import { getJurisdictionBviContents } from './jurisdiction-bvi-contents'; -import { getJurisdictionLabuanContents } from './jurisdiction-labuan-contents'; -import { getJurisdictionSvgContents } from './jurisdiction-svg-contents'; -import { getJurisdictionVanuatuContents } from './jurisdiction-vanuatu-contents'; -import { TJurisdictionCardItems } from './props.types'; - -export type TJurisdictionContent = { - bvi: TJurisdictionCardItems; - labuan: TJurisdictionCardItems; - maltainvest?: TJurisdictionCardItems; - svg: TJurisdictionCardItems; - vanuatu: TJurisdictionCardItems; -}; - -export const getJurisdictionContents = (isEU?: boolean): Record => { - if (isEU) { - return { - maltainvest: getJurisdictionMaltainvestContents(), - }; - } - - return { - bvi: getJurisdictionBviContents(), - labuan: getJurisdictionLabuanContents(), - svg: getJurisdictionSvgContents(), - vanuatu: getJurisdictionVanuatuContents(), - }; -}; diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/jurisdiction-labuan-contents.ts b/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/jurisdiction-labuan-contents.ts deleted file mode 100644 index c8f19c2471bb..000000000000 --- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/jurisdiction-labuan-contents.ts +++ /dev/null @@ -1,102 +0,0 @@ -import { TJurisdictionCardItems } from './props.types'; - -export const getJurisdictionLabuanContents = (): TJurisdictionCardItems => ({ - contents: { - financial: [ - { - description: 'Forex (standard/exotic) and cryptocurrencies', - key: 'assets', - title: 'Assets', - titleIndicators: { - displayText: '80+', - displayTextSkinColor: 'red-dark', - type: 'displayText', - }, - }, - { - key: 'leverage', - title: 'Leverage', - titleIndicators: { - displayText: '1:100', - displayTextSkinColor: 'yellow-dark', - type: 'displayText', - }, - }, - { - key: 'spreadsFrom', - title: 'Spreads from', - titleIndicators: { - displayText: '0.6 pips', - displayTextSkinColor: 'violet-dark', - type: 'displayText', - }, - }, - { - clickableDescription: [ - { - text: 'Learn more', - type: 'link', - }, - { - text: 'about verifications needed.', - type: 'text', - }, - ], - key: 'verifications', - title: 'Verifications', - titleIndicators: { - type: 'displayIcons', - }, - }, - { - description: 'Labuan Financial Services Authority (licence no. MB/18/0024)', - key: 'regulator', - title: 'Regulator/EDR', - }, - ], - synthetic: [ - { - description: 'Forex and Cryptocurrencies', - key: 'assets', - title: 'Assets', - }, - { - key: 'leverage', - title: 'Leverage', - }, - { - key: 'spreadsFrom', - title: 'Spreads from', - }, - { - clickableDescription: [ - { - text: 'Learn more', - type: 'link', - }, - { - text: 'about verifications needed.', - type: 'text', - }, - ], - key: 'verifications', - title: 'Verifications', - titleIndicators: { - type: 'displayIcons', - }, - }, - { - description: 'Labuan Financial Services Authority (licence no. MB/18/0024)', - key: 'regulator', - title: 'Regulator/EDR', - }, - ], - }, - header: 'Labuan', - isOverHeaderAvailable: true, - overHeader: 'Straight-through processing', - verificationDocs: { - financial: ['documentNumber', 'nameAndAddress'], - synthetic: ['documentNumber', 'nameAndAddress'], - }, -}); diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/jurisdiction-svg-contents.ts b/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/jurisdiction-svg-contents.ts deleted file mode 100644 index b228a9a95ef9..000000000000 --- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/jurisdiction-svg-contents.ts +++ /dev/null @@ -1,130 +0,0 @@ -import { TJurisdictionCardItems } from './props.types'; - -export const getJurisdictionSvgContents = (): TJurisdictionCardItems => ({ - contents: { - all: [ - { - description: 'Forex, stocks, stock indices, commodities, cryptocurrencies, ETFs and synthetic indices', - key: 'assets', - title: 'Assets', - titleIndicators: { - displayText: '40+', - displayTextSkinColor: 'red-darker', - type: 'displayText', - }, - }, - { - key: 'leverage', - title: 'Leverage', - titleIndicators: { - displayText: '1:1000', - displayTextSkinColor: 'yellow-light', - type: 'displayText', - }, - }, - { - description: 'You will need to submit proof of identity and address once you reach certain thresholds.', - key: 'verifications', - title: 'Verifications', - titleIndicators: { - type: 'displayIcons', - }, - }, - { - description: 'Deriv (SVG) LLC (company no. 273 LLC 2020)', - key: 'regulator', - title: 'Regulator/EDR', - }, - ], - financial: [ - { - description: 'Forex (standard/micro), stocks, stock indices, commodities, cryptocurrencies and ETFs', - key: 'assets', - title: 'Assets', - titleIndicators: { - displayText: '170+', - displayTextSkinColor: 'red-light', - type: 'displayText', - }, - }, - { - clickableDescription: [ - { - tag: 'dynamicLeverage', - text: 'Dynamic Leverage', - type: 'link', - }, - ], - key: 'leverage', - title: 'Leverage', - titleIndicators: { - displayText: '1:1000', - displayTextSkinColor: 'yellow-light', - type: 'displayText', - }, - }, - { - key: 'spreadsFrom', - title: 'Spreads from', - titleIndicators: { - displayText: '0.6 pips', - displayTextSkinColor: 'violet-dark', - type: 'displayText', - }, - }, - { - description: 'You will need to submit proof of identity and address once you reach certain thresholds.', - key: 'verifications', - title: 'Verifications', - titleIndicators: { - type: 'displayIcons', - }, - }, - { - description: 'Deriv (SVG) LLC (company no. 273 LLC 2020)', - key: 'regulator', - title: 'Regulator/EDR', - }, - ], - synthetic: [ - { - description: 'Synthetic indices, basket indices, and derived FX', - key: 'assets', - title: 'Assets', - titleIndicators: { - displayText: '40+', - displayTextSkinColor: 'red-darker', - type: 'displayText', - }, - }, - { - key: 'leverage', - title: 'Leverage', - titleIndicators: { - displayText: '1:1000', - displayTextSkinColor: 'yellow-light', - type: 'displayText', - }, - }, - { - description: 'You will need to submit proof of identity and address once you reach certain thresholds.', - key: 'verifications', - title: 'Verifications', - titleIndicators: { - type: 'displayIcons', - }, - }, - { - description: 'Deriv (SVG) LLC (company no. 273 LLC 2020)', - key: 'regulator', - title: 'Regulator/EDR', - }, - ], - }, - header: 'St. Vincent & Grenadines', - isOverHeaderAvailable: false, - verificationDocs: { - financial: [], - synthetic: [], - }, -}); diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/jurisdiction-vanuatu-contents.ts b/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/jurisdiction-vanuatu-contents.ts deleted file mode 100644 index 4a5524939e8d..000000000000 --- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/jurisdiction-vanuatu-contents.ts +++ /dev/null @@ -1,114 +0,0 @@ -import { TJurisdictionCardItems } from './props.types'; - -export const getJurisdictionVanuatuContents = (): TJurisdictionCardItems => ({ - contents: { - financial: [ - { - description: 'Forex (standard/micro), stocks, stock indices, commodities, cryptocurrencies and ETFs', - key: 'assets', - title: 'Assets', - titleIndicators: { - displayText: '170+', - displayTextSkinColor: 'red-light', - type: 'displayText', - }, - }, - { - clickableDescription: [ - { - tag: 'dynamicLeverage', - text: 'Dynamic Leverage', - type: 'link', - }, - ], - key: 'leverage', - title: 'Leverage', - titleIndicators: { - displayText: '1:1000', - displayTextSkinColor: 'yellow-light', - type: 'displayText', - }, - }, - { - key: 'spreadsFrom', - title: 'Spreads from', - titleIndicators: { - displayText: '0.5 pips', - displayTextSkinColor: 'violet-dark', - type: 'displayText', - }, - }, - { - clickableDescription: [ - { - text: 'Learn more', - type: 'link', - }, - { - text: 'about verifications needed.', - type: 'text', - }, - ], - key: 'verifications', - title: 'Verifications', - titleIndicators: { - type: 'displayIcons', - }, - }, - { - description: 'Vanuatu Financial Services Commission', - key: 'regulator', - title: 'Regulator/EDR', - }, - ], - synthetic: [ - { - description: 'Synthetic indices, basket indices, and derived FX', - key: 'assets', - title: 'Assets', - titleIndicators: { - displayText: '40+', - displayTextSkinColor: 'red-darker', - type: 'displayText', - }, - }, - { - key: 'leverage', - title: 'Leverage', - titleIndicators: { - displayText: '1:1000', - displayTextSkinColor: 'yellow-light', - type: 'displayText', - }, - }, - { - clickableDescription: [ - { - text: 'Learn more', - type: 'link', - }, - { - text: 'about verifications needed.', - type: 'text', - }, - ], - key: 'verifications', - title: 'Verifications', - titleIndicators: { - type: 'displayIcons', - }, - }, - { - description: 'Vanuatu Financial Services Commission', - key: 'regulator', - title: 'Regulator/EDR', - }, - ], - }, - header: 'Vanuatu', - isOverHeaderAvailable: false, - verificationDocs: { - financial: ['documentNumber', 'nameAndAddress'], - synthetic: ['documentNumber', 'nameAndAddress'], - }, -}); diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/jurisdiction-verification-contents.ts b/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/jurisdiction-verification-contents.ts deleted file mode 100644 index 118088243d63..000000000000 --- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/jurisdiction-verification-contents.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { TJurisdictionVerificationItems, TJurisdictionVerificationStatus } from './props.types'; - -type TJurisdictionVerificationContents = { - requiredVerificationDocs: TJurisdictionVerificationItems; - shortDescription: string; - statusReferences: TJurisdictionVerificationStatus[]; -}; -export const jurisdictionVerificationContents = (): TJurisdictionVerificationContents => ({ - requiredVerificationDocs: { - documentNumber: { - icon: 'IcDocumentNumberVerification', - text: `Document number (eg. identity card, passport, driver's license)`, - }, - identityNumber: { - icon: 'IcIdentityDocumentVerification', - text: `A copy of your identity document (eg. identity card, passport, deiver's license)`, - }, - nameAndAddress: { - icon: 'IcNameAndAddressVerification', - text: 'A recent utility bill (eg. electricity, water or gas) or recent bank statement or government-issued letter with your name and address.', - }, - selfie: { - icon: 'IcSelfieVerification', - text: 'A selfie of yourself.', - }, - }, - shortDescription: 'We need you to submit these in order to get this account:', - statusReferences: [ - { - color: 'yellow', - icon: 'verificationPendingStatusIcon', - text: 'Verification in review.', - }, - { - color: 'red', - icon: 'verificationFailedStatusIcon', - text: 'Verification failed. Resubmit your details.', - }, - { - color: 'green', - icon: 'verificationSuccessStatusIcon', - text: 'Verification successful.', - }, - ], -}); diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/jurisdiction_maltainvest_contents.ts b/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/jurisdiction_maltainvest_contents.ts deleted file mode 100644 index ea1e0ff4a68d..000000000000 --- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/jurisdiction_maltainvest_contents.ts +++ /dev/null @@ -1,113 +0,0 @@ -import { TJurisdictionCardItems } from './props.types'; - -export const getJurisdictionMaltainvestContents = (): TJurisdictionCardItems => ({ - contents: { - financial: [ - { - description: 'Forex, stocks, stock indices, commodities, cryptocurrencies and synthetic indices.', - key: 'assets', - title: 'Assets', - titleIndicators: { - displayText: '140+', - displayTextSkinColor: 'red-light', - type: 'displayText', - }, - }, - { - key: 'leverage', - title: 'Leverage', - titleIndicators: { - displayText: '1:30', - displayTextSkinColor: 'brown-dark', - type: 'displayText', - }, - }, - { - key: 'spreadsFrom', - title: 'Spreads from', - titleIndicators: { - displayText: '0.5 pips', - displayTextSkinColor: 'violet-dark', - type: 'displayText', - }, - }, - { - clickableDescription: [ - { - text: 'Learn more', - type: 'link', - }, - { - text: 'about verifications needed.', - type: 'text', - }, - ], - key: 'verifications', - title: 'Verifications', - titleIndicators: { - type: 'displayIcons', - }, - }, - { - description: 'Malta Financial Services Authority (MFSA) (licence no. IS/70156)', - key: 'regulator', - title: 'Regulator/EDR', - }, - ], - synthetic: [ - { - description: 'Synthetics, Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies', - key: 'assets', - title: 'Assets', - titleIndicators: { - displayText: '140+', - displayTextSkinColor: 'red-light', - type: 'displayText', - }, - }, - { - key: 'leverage', - title: 'Leverage', - titleIndicators: { - displayText: '1:30', - displayTextSkinColor: 'brown-dark', - type: 'displayText', - }, - }, - { - key: 'spreadsFrom', - title: 'Spreads from', - titleIndicators: { - displayText: '0.5 pips', - displayTextSkinColor: 'violet-dark', - type: 'displayText', - }, - }, - { - clickableDescription: [ - { - text: 'Learn more', - type: 'link', - }, - { - text: 'about verifications needed.', - type: 'text', - }, - ], - key: 'verifications', - title: 'Verifications', - }, - { - description: 'Malta Financial Services Authority (MFSA) (licence no. IS/70156)', - key: 'regulator', - title: 'Regulator/EDR', - }, - ], - }, - header: 'Malta', - isOverHeaderAvailable: false, - verificationDocs: { - financial: ['selfie', 'identityDocument', 'nameAndAddress'], - synthetic: ['selfie', 'identityDocument', 'nameAndAddress'], - }, -}); diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/props.types.ts b/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/props.types.ts deleted file mode 100644 index 6fca34ce11a6..000000000000 --- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/props.types.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { THooks } from '../../../../../types'; - -export type TClickableDescription = { - onClick?: React.MouseEventHandler; - tag?: string; - text: string; - type: 'link' | 'text'; -}; -export type TJurisdictionCardSectionTitleIndicators = { - displayText?: string; - displayTextSkinColor?: string; - type: 'displayIcons' | 'displayText'; -}; -export type TJurisdictionCardSection = { - clickableDescription?: TClickableDescription[]; - description?: string; - key: string; - title: string; - titleIndicators?: TJurisdictionCardSectionTitleIndicators; -}; -export type TJurisdictionCardVerificationStatus = 'Default' | 'Failed' | 'Pending' | 'Verified'; -export type TJurisdictionCardItemVerificationItem = 'documentNumber' | 'identityDocument' | 'nameAndAddress' | 'selfie'; -export type TJurisdictionCardItemVerification = TJurisdictionCardItemVerificationItem[]; -export type TJurisdictionCardItems = { - contents: { - all?: TJurisdictionCardSection[]; - financial: TJurisdictionCardSection[]; - synthetic: TJurisdictionCardSection[]; - }; - header: string; - isOverHeaderAvailable: boolean; - overHeader?: string; - verificationDocs?: { - financial?: TJurisdictionCardItemVerification; - synthetic?: TJurisdictionCardItemVerification; - }; -}; -export type TJurisdictionCardParams = { - toggleDynamicLeverage: React.MouseEventHandler; -}; -export type TJurisdictionVerificationSection = { - icon: string; - text: string; -}; -export type TJurisdictionVerificationItems = { - documentNumber?: TJurisdictionVerificationSection; - identityDocument?: TJurisdictionVerificationSection; - identityNumber?: TJurisdictionVerificationSection; - nameAndAddress?: TJurisdictionVerificationSection; - selfie?: TJurisdictionVerificationSection; -}; - -export type TJurisdictionVerificationStatus = { - color: React.CSSProperties['color']; - icon: string; - text: string; -}; -export type TInstrumentsIcon = { - className?: string; - highlighted: boolean; - icon: - | 'Baskets' - | 'Commodities' - | 'Cryptocurrencies' - | 'DerivedFX' - | 'ETF' - | 'Forex' - | 'StockIndices' - | 'Stocks' - | 'Synthetics'; - isAsterisk?: boolean; - text: string; -}; - -export type TJurisdictionData = { - jurisdiction?: THooks.MT5AccountsList['landing_company_short']; -}; diff --git a/packages/tradershub/src/features/cfd/screens/MT5AccountType/MT5AccountType.tsx b/packages/tradershub/src/features/cfd/screens/MT5AccountType/MT5AccountType.tsx deleted file mode 100644 index 8230639d0107..000000000000 --- a/packages/tradershub/src/features/cfd/screens/MT5AccountType/MT5AccountType.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React, { useEffect } from 'react'; -import { useRegulationFlags } from '@/hooks'; -import { MarketTypeDetails } from '@cfd/constants'; -import { MT5AccountTypeCard } from '../MT5AccountTypeCard'; - -type TMT5AccountTypeProps = { - onMarketTypeSelect: (marketType?: keyof typeof MarketTypeDetails) => void; - selectedMarketType?: keyof typeof MarketTypeDetails; -}; - -const MT5AccountType = ({ onMarketTypeSelect, selectedMarketType }: TMT5AccountTypeProps) => { - const { isEU } = useRegulationFlags(); - const marketTypeDetails = MarketTypeDetails(isEU); - const sortedMarketTypeEntries = Object.entries(marketTypeDetails).sort(([keyA], [keyB]) => { - const order = ['synthetic', 'financial', 'all']; - return order.indexOf(keyA) - order.indexOf(keyB); - }); - - useEffect(() => { - return () => onMarketTypeSelect(undefined); - }, [onMarketTypeSelect]); - - return ( -
- {sortedMarketTypeEntries.map(([key, value]) => ( - onMarketTypeSelect(key === selectedMarketType ? undefined : key)} - title={value.title} - /> - ))} -
- ); -}; - -export default MT5AccountType; diff --git a/packages/tradershub/src/features/cfd/screens/MT5AccountType/index.ts b/packages/tradershub/src/features/cfd/screens/MT5AccountType/index.ts deleted file mode 100644 index b70b17814bba..000000000000 --- a/packages/tradershub/src/features/cfd/screens/MT5AccountType/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as MT5AccountType } from './MT5AccountType'; diff --git a/packages/tradershub/src/features/cfd/screens/MT5AccountTypeCard/MT5AccountTypeCard.tsx b/packages/tradershub/src/features/cfd/screens/MT5AccountTypeCard/MT5AccountTypeCard.tsx deleted file mode 100644 index 02b8c2a5f0e7..000000000000 --- a/packages/tradershub/src/features/cfd/screens/MT5AccountTypeCard/MT5AccountTypeCard.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React, { ReactNode } from 'react'; -import { twMerge } from 'tailwind-merge'; -import { Text } from '@deriv-com/ui'; - -type TMT5AccountTypeCardProps = { - description: string; - icon: ReactNode; - isSelected: boolean; - onClick: () => void; - title: string; -}; - -const MT5AccountTypeCard = ({ description, icon, isSelected, onClick, title }: TMT5AccountTypeCardProps) => { - return ( - - ); -}; - -export default MT5AccountTypeCard; diff --git a/packages/tradershub/src/features/cfd/screens/MT5AccountTypeCard/index.ts b/packages/tradershub/src/features/cfd/screens/MT5AccountTypeCard/index.ts deleted file mode 100644 index 9ae57782cf4f..000000000000 --- a/packages/tradershub/src/features/cfd/screens/MT5AccountTypeCard/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as MT5AccountTypeCard } from './MT5AccountTypeCard'; diff --git a/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeDetailsItem/TradeDetailsItem.tsx b/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeDetailsItem/TradeDetailsItem.tsx deleted file mode 100644 index f57a7b75af11..000000000000 --- a/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeDetailsItem/TradeDetailsItem.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import React, { useRef } from 'react'; -import { twMerge } from 'tailwind-merge'; -import { useHover } from 'usehooks-ts'; -import EditIcon from '@/assets/svgs/ic-edit.svg'; -import { Clipboard, Tooltip } from '@/components'; -import { useQueryParams } from '@/hooks'; -import { Button, Text, useDevice } from '@deriv-com/ui'; - -type TTradeDetailsItemProps = { - className?: string; - label?: string; - value: string; - variant?: 'clipboard' | 'info' | 'password'; -}; - -const TradeDetailsItem = ({ className, label, value, variant = 'clipboard' }: TTradeDetailsItemProps) => { - const { isDesktop } = useDevice(); - const hoverRef = useRef(null); - const isHovered = useHover(hoverRef); - const { openModal } = useQueryParams(); - return ( -
- {label && {label}} -
- {variant === 'info' ? ( - - {value} - - ) : ( - - {value} - - )} - {variant === 'clipboard' && } - {variant === 'password' && ( - -
- -
- - )} -
-
- ); -}; - -export default TradeDetailsItem; diff --git a/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeDetailsItem/index.ts b/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeDetailsItem/index.ts deleted file mode 100644 index 521caf06a7a7..000000000000 --- a/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeDetailsItem/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TradeDetailsItem } from './TradeDetailsItem'; diff --git a/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeLink/TradeLink.tsx b/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeLink/TradeLink.tsx deleted file mode 100644 index 70449a8883fa..000000000000 --- a/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeLink/TradeLink.tsx +++ /dev/null @@ -1,119 +0,0 @@ -import React, { Fragment } from 'react'; -import { getPlatformFromUrl } from '@/helpers'; -import { - AppToContentMapper, - DesktopLinks, - PlatformDetails, - PlatformToLabelIconMapper, - PlatformUrls, -} from '@cfd/constants'; -import { useActiveTradingAccount, useCtraderServiceToken } from '@deriv/api-v2'; -import { Button, Text } from '@deriv-com/ui'; -import { THooks, TPlatforms } from '../../../../../types'; - -type TTradeLinkProps = { - app: keyof typeof AppToContentMapper; - isDemo?: boolean; - platform?: TPlatforms.All; - webtraderUrl?: THooks.MT5AccountsList['webtrader_url']; -}; - -const TradeLink = ({ app, platform, webtraderUrl = '' }: TTradeLinkProps) => { - const content = AppToContentMapper[app]; - - const { data: ctraderToken } = useCtraderServiceToken(); - const { data: activeAccount } = useActiveTradingAccount(); - - const isDemo = activeAccount?.is_virtual; - - const mt5Platform = PlatformDetails.mt5.platform; - const dxtradePlatform = PlatformDetails.dxtrade.platform; - const ctraderPlatform = PlatformDetails.ctrader.platform; - - const onClickWebTerminal = () => { - const { isStaging, isTestLink } = getPlatformFromUrl(); - let url; - const platformType = isDemo ? 'demo' : 'live'; - const ctraderType = isTestLink || isStaging ? 'staging' : 'live'; - - if (platform === dxtradePlatform || platform === ctraderPlatform) { - url = PlatformUrls[platform][platform === ctraderPlatform ? ctraderType : platformType]; - if (platform === ctraderPlatform && ctraderToken) { - url += `?token=${ctraderToken}`; - } - } else return ''; - - window.open(url); - }; - - return ( -
-
- {platform === mt5Platform && ( - -
{content.icon}
- {content.title} - - )} - {platform === dxtradePlatform && ( - Run {PlatformDetails[platform].title} on your browser - )} - {platform === ctraderPlatform && {content.title}} -
- {platform === mt5Platform && ( - - )} - {platform === ctraderPlatform && app !== DesktopLinks.CTRADER_WEB && ( - - )} - {platform === ctraderPlatform && app === DesktopLinks.CTRADER_WEB && ( - - )} - {platform === dxtradePlatform && ( - - )} -
- ); -}; - -export default TradeLink; diff --git a/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeLink/index.ts b/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeLink/index.ts deleted file mode 100644 index 7355ea121283..000000000000 --- a/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeLink/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TradeLink } from './TradeLink'; diff --git a/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeScreen.tsx b/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeScreen.tsx deleted file mode 100644 index 0ebcee0a8880..000000000000 --- a/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeScreen.tsx +++ /dev/null @@ -1,169 +0,0 @@ -import React, { Fragment, useMemo } from 'react'; -import ImportantIcon from '@/assets/svgs/ic-important.svg'; -import { useRegulationFlags } from '@/hooks'; -import { useCFDContext } from '@/providers'; -import { THooks, TPlatforms } from '@/types'; -import { DesktopLinks, MarketType, MarketTypeDetails, PlatformDetails } from '@cfd/constants'; -import { useActiveTradingAccount, useCtraderAccountsList, useDxtradeAccountsList } from '@deriv/api-v2'; -import { Text, useDevice } from '@deriv-com/ui'; -import { TradeDetailsItem } from './TradeDetailsItem'; -import { TradeLink } from './TradeLink'; - -type TradeScreenProps = { - account?: THooks.CtraderAccountsList | THooks.DxtradeAccountsList | THooks.MT5AccountsList; -}; - -const serviceMaintenanceMessages: Record = { - ctrader: - 'Server maintenance occurs every first Saturday of the month from 7 to 10 GMT time. You may experience service disruption during this time.', - dxtrade: - 'Server maintenance starts at 06:00 GMT every Sunday and may last up to 2 hours. You may experience service disruption during this time.', - mt5: 'Server maintenance starts at 01:00 GMT every Sunday, and this process may take up to 2 hours to complete. Service may be disrupted during this time.', -}; - -const TradeScreen = ({ account }: TradeScreenProps) => { - const { isDesktop } = useDevice(); - const { isEU } = useRegulationFlags(); - - const { cfdState } = useCFDContext(); - const { data: dxtradeAccountsList } = useDxtradeAccountsList(); - const { data: ctraderAccountsList } = useCtraderAccountsList(); - const { data: activeAccount } = useActiveTradingAccount(); - - const mt5Platform = PlatformDetails.mt5.platform; - const dxtradePlatform = PlatformDetails.dxtrade.platform; - const ctraderPlatform = PlatformDetails.ctrader.platform; - - const { marketType, platform } = cfdState; - - const platformToAccountsListMapper = useMemo( - () => ({ - ctrader: ctraderAccountsList?.find(account => account.is_virtual === activeAccount?.is_virtual), - dxtrade: dxtradeAccountsList?.find(account => account.is_virtual === activeAccount?.is_virtual), - mt5: account, - }), - [ctraderAccountsList, dxtradeAccountsList, account, activeAccount?.is_virtual] - ); - - const details = platformToAccountsListMapper[platform as TPlatforms.All]; - - const loginId = useMemo(() => { - if (platform === mt5Platform) { - return (details as THooks.MT5AccountsList)?.display_login; - } - return (details as THooks.CtraderAccountsList | THooks.DxtradeAccountsList)?.account_id; - }, [details, mt5Platform, platform]); - - const marketTypeDetails = MarketTypeDetails(isEU); - - const platformIcon = - platform === mt5Platform - ? marketTypeDetails[marketType ?? MarketType.ALL]?.iconWithWidth?.(24) - : PlatformDetails[platform as keyof typeof PlatformDetails]?.icon?.(24); - - return ( -
-
-
-
-
{platformIcon}
-
-
- - {platform === mt5Platform - ? marketTypeDetails[marketType ?? MarketType.ALL]?.title - : PlatformDetails[platform as keyof typeof PlatformDetails]?.title} - {platform === mt5Platform && - !activeAccount?.is_virtual && - ` ${details?.landing_company_short?.toUpperCase()}`} - -
- - {loginId} - -
-
-
- - {platform === ctraderPlatform - ? (details as THooks.CtraderAccountsList)?.display_balance - : details?.display_balance} - -
-
-
- {platform === mt5Platform && ( - - - - - - - )} - {platform === dxtradePlatform && ( - - - - - )} - {platform === ctraderPlatform && ( - - )} -
-
- - - {serviceMaintenanceMessages[(platform ?? mt5Platform) as TPlatforms.All]} - -
-
-
- {platform === mt5Platform && ( - - - {isDesktop && ( - - - - - - )} - - )} - {platform === dxtradePlatform && ( - - )} - {platform === ctraderPlatform && isDesktop && ( - - - - - - )} -
-
- ); -}; - -export default TradeScreen; diff --git a/packages/tradershub/src/features/cfd/screens/TradeScreen/index.ts b/packages/tradershub/src/features/cfd/screens/TradeScreen/index.ts deleted file mode 100644 index 06f481436cee..000000000000 --- a/packages/tradershub/src/features/cfd/screens/TradeScreen/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TradeScreen } from './TradeScreen'; diff --git a/packages/tradershub/src/features/cfd/screens/VerificationFailed/VerificationFailed.tsx b/packages/tradershub/src/features/cfd/screens/VerificationFailed/VerificationFailed.tsx deleted file mode 100644 index 5f4094b70d3b..000000000000 --- a/packages/tradershub/src/features/cfd/screens/VerificationFailed/VerificationFailed.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; -import { useQueryParams } from '@/hooks'; -import { usePOA, usePOI } from '@deriv/api-v2'; -import { Button, Text } from '@deriv-com/ui'; - -const getDocumentTitle = (isPOIFailed?: boolean, isPOAFailed?: boolean) => { - if (isPOIFailed && isPOAFailed) return 'proof of identity and proof of address'; - if (isPOIFailed) return 'proof of identity'; - return 'proof of address'; -}; - -const reasons = ['Document details do not match profile details', 'Expired documents', 'Poor image quality']; - -/** - * @description This component is used to display the verification failed modal in case of POI and POA - */ - -const VerificationFailed = () => { - const { closeModal } = useQueryParams(); - const { data: poiStatus } = usePOI(); - const { data: poaStatus } = usePOA(); - - const isPOIFailed = poiStatus?.is_rejected || poiStatus?.is_expired || poiStatus?.is_suspected; - const isPOAFailed = poaStatus?.is_rejected || poaStatus?.is_expired || poaStatus?.is_suspected; - - return ( -
- - Why did my verification fail? - - - Your {getDocumentTitle(isPOIFailed, isPOAFailed)} did not pass our verification checks. This could be - due to reasons such as: - -
    - {reasons.map(reason => ( -
  • - {reason} -
    • - ))} -
- - Click Resubmit documents to find out more and submit your documents again. - -
- - -
-
- ); -}; - -export default VerificationFailed; diff --git a/packages/tradershub/src/features/cfd/screens/VerificationFailed/index.ts b/packages/tradershub/src/features/cfd/screens/VerificationFailed/index.ts deleted file mode 100644 index ecf2f5b7c8db..000000000000 --- a/packages/tradershub/src/features/cfd/screens/VerificationFailed/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as VerificationFailed } from './VerificationFailed'; diff --git a/packages/tradershub/src/features/cfd/screens/index.ts b/packages/tradershub/src/features/cfd/screens/index.ts deleted file mode 100644 index 93a15b7e01c2..000000000000 --- a/packages/tradershub/src/features/cfd/screens/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -export * from './CFDCompareAccounts'; -export * from './CFDSuccess'; -export * from './ChangePassword'; -export * from './CreatePassword'; -export * from './DynamicLeverage'; -export * from './EnterPassword'; -export * from './GetMoreMT5Accounts'; -export * from './Jurisdiction'; -export * from './MT5AccountType'; -export * from './MT5AccountTypeCard'; -export * from './TradeScreen'; -export * from './VerificationFailed'; diff --git a/packages/tradershub/src/flows/RealAccountCreation/RealAccountCreation.tsx b/packages/tradershub/src/flows/RealAccountCreation/RealAccountCreation.tsx deleted file mode 100644 index 41da0738919e..000000000000 --- a/packages/tradershub/src/flows/RealAccountCreation/RealAccountCreation.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import React, { Fragment, useEffect, useMemo, useState } from 'react'; -import ReactModal from 'react-modal'; -import { DesktopProgressBar, MobileProgressBar } from '@/components'; -import { CUSTOM_STYLES } from '@/helpers'; -import { useQueryParams, useRegulationFlags } from '@/hooks'; -import { AccountOpeningSuccessModal, ExitConfirmationDialog } from '@/modals'; -import { useRealAccountCreationContext } from '@/providers'; -import { StandaloneXmarkBoldIcon } from '@deriv/quill-icons'; -import { Text } from '@deriv-com/ui'; -import WizardScreens from './WizardScreens/WizardScreens'; - -/** - * @name getFormSteps - * @description The getFormSteps function is used to get the form steps based on the user's location. - * @param {boolean} isEU - A boolean value to check if the user is in the EU. - * @returns {string[]} - An array of strings representing the form steps. - */ -const getFormSteps = (isEU: boolean) => { - const commonSteps = ['Account currency', 'Personal details', 'Address', 'Terms of use']; - - if (isEU) { - return [...commonSteps.slice(0, 3), 'Trading assessment', 'Financial assessment', ...commonSteps.slice(3)]; - } - return commonSteps; -}; - -/** - * @name RealAccountCreation - * @description The RealAccountCreation component is used to render the signup wizard modal. - * @example - * return ( - * - * ); - */ -const RealAccountCreation = () => { - const [isConfirmationDialogOpen, setIsConfirmationDialogOpen] = useState(false); - const { currentStep, setTotalSteps } = useRealAccountCreationContext(); - const { isModalOpen } = useQueryParams(); - const { isEU } = useRegulationFlags(); - - // Get the form steps based on the user's location - const FORM_PROGRESS_STEPS = useMemo(() => getFormSteps(isEU), [isEU]); - - // Set the total steps in the progress bar based on the form steps - useEffect(() => { - if (FORM_PROGRESS_STEPS.length) { - return setTotalSteps(FORM_PROGRESS_STEPS.length); - } - }, [FORM_PROGRESS_STEPS.length, setTotalSteps]); - - return ( - - setIsConfirmationDialogOpen(true)} - shouldCloseOnOverlayClick={false} - style={CUSTOM_STYLES} - > -
-
- - Add a Deriv Account - - - setIsConfirmationDialogOpen(true)} - /> -
-
-
- setIsConfirmationDialogOpen(true)} - steps={FORM_PROGRESS_STEPS} - /> -
- -
-
- - setIsConfirmationDialogOpen(false)} - /> - - - ); -}; - -export default RealAccountCreation; diff --git a/packages/tradershub/src/flows/RealAccountCreation/WizardScreenActions/WizardScreenActions.tsx b/packages/tradershub/src/flows/RealAccountCreation/WizardScreenActions/WizardScreenActions.tsx deleted file mode 100644 index 7e5902794e8d..000000000000 --- a/packages/tradershub/src/flows/RealAccountCreation/WizardScreenActions/WizardScreenActions.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react'; -import { useFormikContext } from 'formik'; -import { ButtonGroup } from '@/components'; -import { useRealAccountCreationContext } from '@/providers'; -import { Button, Divider, useDevice } from '@deriv-com/ui'; - -type TWizardScreenActions = { - isSubmitBtnLoading?: boolean; - submitDisabled?: boolean; -}; - -/** - * @name WizardScreenActions - * @description The WizardScreenActions component is used to navigate between steps in the RealAccountCreation component. - * Intended to be used as a child component of the Formik component. - * @param {Object} props - React props object - * @param {boolean} [props.submitDisabled] - A boolean that determines whether the Next button is disabled - * @param {boolean} [props.isSubmitBtnLoading] - A boolean that determines whether the Next button is in a loading state - * @example - * return ( - * - * ); - */ - -const WizardScreenActions = ({ submitDisabled = false, isSubmitBtnLoading = false }: TWizardScreenActions) => { - const { - helpers: { canGoToNextStep, canGoToPrevStep, goToPrevStep }, - } = useRealAccountCreationContext(); - const { isSubmitting } = useFormikContext(); - const { isDesktop } = useDevice(); - - return ( -
- - - {canGoToPrevStep && ( - - )} - - -
- ); -}; - -export default WizardScreenActions; diff --git a/packages/tradershub/src/flows/RealAccountCreation/WizardScreenActions/index.ts b/packages/tradershub/src/flows/RealAccountCreation/WizardScreenActions/index.ts deleted file mode 100644 index ad5d2e2f7586..000000000000 --- a/packages/tradershub/src/flows/RealAccountCreation/WizardScreenActions/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as WizardScreenActions } from './WizardScreenActions'; diff --git a/packages/tradershub/src/flows/RealAccountCreation/WizardScreenWrapper/WizardScreenWrapper.tsx b/packages/tradershub/src/flows/RealAccountCreation/WizardScreenWrapper/WizardScreenWrapper.tsx deleted file mode 100644 index d661600c9560..000000000000 --- a/packages/tradershub/src/flows/RealAccountCreation/WizardScreenWrapper/WizardScreenWrapper.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { ReactNode } from 'react'; -import { Text, useDevice } from '@deriv-com/ui'; - -type TWizardScreenWrapper = { children: React.ReactNode; heading: ReactNode }; - -/** - * @name WizardScreenWrapper - * @description The WizardScreenWrapper component is used to wrap the screens in the RealAccountCreation component. - * @param {Object} props - React props object - * @param {React.ReactNode} props.children - The content to be wrapped. - * @param {React.ReactNode} props.heading - The heading of the screen. - * @example - * return ( - * - *
Content
- * - * ); - */ - -const WizardScreenWrapper = ({ children, heading }: TWizardScreenWrapper) => { - const { isDesktop } = useDevice(); - return ( -
- {isDesktop && ( - - {heading} - - )} - {children} -
- ); -}; - -export default WizardScreenWrapper; diff --git a/packages/tradershub/src/flows/RealAccountCreation/WizardScreenWrapper/index.ts b/packages/tradershub/src/flows/RealAccountCreation/WizardScreenWrapper/index.ts deleted file mode 100644 index 681e4e5e2800..000000000000 --- a/packages/tradershub/src/flows/RealAccountCreation/WizardScreenWrapper/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as WizardScreenWrapper } from './WizardScreenWrapper'; diff --git a/packages/tradershub/src/flows/RealAccountCreation/WizardScreens/WizardScreens.tsx b/packages/tradershub/src/flows/RealAccountCreation/WizardScreens/WizardScreens.tsx deleted file mode 100644 index 34e6b0401b66..000000000000 --- a/packages/tradershub/src/flows/RealAccountCreation/WizardScreens/WizardScreens.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React, { useMemo } from 'react'; -import { useRegulationFlags } from '@/hooks'; -import { useRealAccountCreationContext } from '@/providers'; -import { - Address, - CurrencySelector, - FinancialAssessment, - PersonalDetails, - TermsOfUse, - TradingAssessment, -} from '@/screens'; - -/** - * @name WizardScreens - * @description The WizardScreens component is used to render the screens in the RealAccountCreation component based on the active step from `RealAccountCreationContext`. - * @example - * return ( - * - * ); - */ -const WizardScreens = () => { - const { currentStep } = useRealAccountCreationContext(); - const { isEU } = useRegulationFlags(); - - // If the user is in the EU, we need to display the TradingAssessment and FinancialAssessment screens - const screens = useMemo(() => { - if (isEU) { - return [CurrencySelector, PersonalDetails, Address, TradingAssessment, FinancialAssessment, TermsOfUse]; - } - return [CurrencySelector, PersonalDetails, Address, TermsOfUse]; - }, [isEU]); - - // currentStep is 1-indexed, so we need to subtract 1 to get the correct index - const Screen = screens[currentStep - 1]; - - return ; -}; - -export default WizardScreens; diff --git a/packages/tradershub/src/flows/RealAccountCreation/WizardScreens/index.ts b/packages/tradershub/src/flows/RealAccountCreation/WizardScreens/index.ts deleted file mode 100644 index 2faff6138312..000000000000 --- a/packages/tradershub/src/flows/RealAccountCreation/WizardScreens/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as WizardScreens } from './WizardScreens'; diff --git a/packages/tradershub/src/flows/RealAccountCreation/index.ts b/packages/tradershub/src/flows/RealAccountCreation/index.ts deleted file mode 100644 index ef1850b43001..000000000000 --- a/packages/tradershub/src/flows/RealAccountCreation/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { default as RealAccountCreation } from './RealAccountCreation'; -export * from './WizardScreenActions'; -export * from './WizardScreens'; -export * from './WizardScreenWrapper'; diff --git a/packages/tradershub/src/flows/Signup/CitizenshipModal/CitizenshipModal.tsx b/packages/tradershub/src/flows/Signup/CitizenshipModal/CitizenshipModal.tsx deleted file mode 100644 index 9a47c542afae..000000000000 --- a/packages/tradershub/src/flows/Signup/CitizenshipModal/CitizenshipModal.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { useFormikContext } from 'formik'; -import { isCVMEnabled } from '@/helpers'; -import { useClientCountry, useResidenceList } from '@deriv/api-v2'; -import { LabelPairedChevronDownMdRegularIcon } from '@deriv/quill-icons'; -import { Button, Checkbox, Dropdown, Text } from '@deriv-com/ui'; -import { TSignupFormValues } from '../SignupWrapper/SignupWrapper'; - -type TCitizenshipModal = { - onClickNext: VoidFunction; -}; - -const CitizenshipModal = ({ onClickNext }: TCitizenshipModal) => { - const { data: residenceList, isLoading: residenceListLoading } = useResidenceList(); - const { data: clientCountry, isLoading: clientCountryLoading } = useClientCountry(); - const [isCheckBoxChecked, setIsCheckBoxChecked] = useState(false); - const { values, setFieldValue } = useFormikContext(); - const isCheckboxVisible = isCVMEnabled(values.country); - - useEffect(() => { - if (residenceList?.length && clientCountry && values.country === '') { - setFieldValue('country', clientCountry); - } - }, [clientCountry, setFieldValue, residenceList, values.country]); - - // Add here later when it's created - if (clientCountryLoading && residenceListLoading) return null; - - return ( -
-
- Select your country and citizenship: - } - errorMessage='Country of residence is where you currently live.' - label='Country of residence' - list={residenceList} - name='country' - onSelect={selectedItem => { - setFieldValue('country', selectedItem); - }} - value={values.country} - variant='comboBox' - /> - } - errorMessage='Select your citizenship/nationality as it appears on your passport or other government-issued ID.' - label='Citizenship' - list={residenceList} - name='citizenship' - onSelect={selectedItem => { - setFieldValue('citizenship', selectedItem); - }} - value={values.citizenship} - variant='comboBox' - /> - {isCheckboxVisible && ( - - I hereby confirm that my request for opening an account with Deriv to trade OTC products - issued and offered exclusively outside Brazil was initiated by me. I fully understand - that Deriv is not regulated by CVM and by approaching Deriv I intend to set up a - relation with a foreign company. - - } - labelClassName='flex-1' - name='cvmCheckbox' - onChange={(event: React.ChangeEvent) => - setIsCheckBoxChecked(event.target.checked) - } - wrapperClassName='w-auto' - /> - )} - -
-
- ); -}; - -export default CitizenshipModal; diff --git a/packages/tradershub/src/flows/Signup/CitizenshipModal/index.ts b/packages/tradershub/src/flows/Signup/CitizenshipModal/index.ts deleted file mode 100644 index 8443a418e8e6..000000000000 --- a/packages/tradershub/src/flows/Signup/CitizenshipModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as CitizenshipModal } from './CitizenshipModal'; diff --git a/packages/tradershub/src/flows/Signup/PasswordSettingModal/PasswordSettingModal.tsx b/packages/tradershub/src/flows/Signup/PasswordSettingModal/PasswordSettingModal.tsx deleted file mode 100644 index 95af1f6f8e96..000000000000 --- a/packages/tradershub/src/flows/Signup/PasswordSettingModal/PasswordSettingModal.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React, { ChangeEvent } from 'react'; -import { useFormikContext } from 'formik'; -import { validPassword } from '@/utils'; -import { Button, PasswordInput, Text } from '@deriv-com/ui'; -import { TSignupFormValues } from '../SignupWrapper/SignupWrapper'; - -const PasswordSettingModal = () => { - const { values, setFieldValue } = useFormikContext(); - - const onPasswordChange = (e: ChangeEvent) => { - setFieldValue('password', e.target.value); - }; - - return ( -
-
- - Keep your account secure with a password - - - - Strong passwords contain at least 8 characters. combine uppercase and lowercase letters, numbers, - and symbols. - - -
-
- ); -}; - -export default PasswordSettingModal; diff --git a/packages/tradershub/src/flows/Signup/PasswordSettingModal/index.ts b/packages/tradershub/src/flows/Signup/PasswordSettingModal/index.ts deleted file mode 100644 index d0b42c0649a0..000000000000 --- a/packages/tradershub/src/flows/Signup/PasswordSettingModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as PasswordSettingModal } from './PasswordSettingModal'; diff --git a/packages/tradershub/src/flows/Signup/SignupScreens/SignupScreens.tsx b/packages/tradershub/src/flows/Signup/SignupScreens/SignupScreens.tsx deleted file mode 100644 index f28bfd1a7c0c..000000000000 --- a/packages/tradershub/src/flows/Signup/SignupScreens/SignupScreens.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React, { Dispatch } from 'react'; -import { CitizenshipModal } from '../CitizenshipModal'; -import { PasswordSettingModal } from '../PasswordSettingModal'; - -type TSignupScreens = { - setStep: Dispatch>; - step: number; -}; - -const SignupScreens = ({ step, setStep }: TSignupScreens) => { - switch (step) { - case 1: - return setStep(prev => prev + 1)} />; - case 2: - return ; - default: - return null; - } -}; - -export default SignupScreens; diff --git a/packages/tradershub/src/flows/Signup/SignupScreens/index.ts b/packages/tradershub/src/flows/Signup/SignupScreens/index.ts deleted file mode 100644 index 2d0a6729a045..000000000000 --- a/packages/tradershub/src/flows/Signup/SignupScreens/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SignupScreens } from './SignupScreens'; diff --git a/packages/tradershub/src/flows/Signup/SignupWrapper/SignupWrapper.tsx b/packages/tradershub/src/flows/Signup/SignupWrapper/SignupWrapper.tsx deleted file mode 100644 index bd6629074c61..000000000000 --- a/packages/tradershub/src/flows/Signup/SignupWrapper/SignupWrapper.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React, { useState } from 'react'; -import { Form, Formik } from 'formik'; -import ReactModal from 'react-modal'; -import { CUSTOM_STYLES } from '@/helpers'; -import { useQueryParams } from '@/hooks'; -import { signup } from '@/utils'; -import { SignupScreens } from '../SignupScreens'; - -export type TSignupFormValues = { - citizenship: string; - country: string; - password: string; -}; - -const SignupWrapper = () => { - const [step, setStep] = useState(1); - const { openModal, isModalOpen } = useQueryParams(); - - const initialValues = { - country: '', - citizenship: '', - password: '', - }; - - const handleSubmit = () => { - // logic will be added later - openModal('RealAccountCreation'); - }; - - const customStyles = { ...CUSTOM_STYLES, content: { ...CUSTOM_STYLES.content, overflow: 'unset' } }; - - return ( - - -
- - -
- - ); -}; - -export default SignupWrapper; diff --git a/packages/tradershub/src/flows/Signup/SignupWrapper/index.ts b/packages/tradershub/src/flows/Signup/SignupWrapper/index.ts deleted file mode 100644 index 42b392f3bbde..000000000000 --- a/packages/tradershub/src/flows/Signup/SignupWrapper/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SignupWrapper } from './SignupWrapper'; diff --git a/packages/tradershub/src/flows/Signup/index.ts b/packages/tradershub/src/flows/Signup/index.ts deleted file mode 100644 index 0e6d139848f5..000000000000 --- a/packages/tradershub/src/flows/Signup/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { SignupWrapper as Signup } from './SignupWrapper'; diff --git a/packages/tradershub/src/flows/index.ts b/packages/tradershub/src/flows/index.ts deleted file mode 100644 index 995f3df808ea..000000000000 --- a/packages/tradershub/src/flows/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './RealAccountCreation'; -export * from './Signup'; diff --git a/packages/tradershub/src/helpers/cfdsAccountHelpers.ts b/packages/tradershub/src/helpers/cfdsAccountHelpers.ts deleted file mode 100644 index eedf9b00f2dd..000000000000 --- a/packages/tradershub/src/helpers/cfdsAccountHelpers.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** - * `getCfdsAccountTitle` is a helper function which accepts name of the cfds account and is_virtual (isDemo) flag and return a combined string by appending the title 'Demo' if the flag is on. - * @param accountName the name of the account such as: marketTypeDetails.title or platform.ctrader.title etc. - * @param isDemo the flag to check if the account is a demo account. - * @returns a string, the combined string of account name and 'Demo' if the flag is on. - */ -export const getCfdsAccountTitle = (accountName: string, isDemo = false) => { - let name = accountName; - if (isDemo) name += ' Demo'; - return name; -}; diff --git a/packages/tradershub/src/helpers/currencies.ts b/packages/tradershub/src/helpers/currencies.ts deleted file mode 100644 index 091fabc1de56..000000000000 --- a/packages/tradershub/src/helpers/currencies.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { CurrenciesListOrder } from '@/constants'; -import { TCurrencyConfig } from '@/hooks/useCurrencies'; - -/** - * Reorder currencies list based on the type and the defined order as `CurrenciesListOrder`. - * @param {TCurrencyConfig[]} list - The list of currencies. - * @param {keyof typeof CurrenciesListOrder} type - The type of the order. - * @returns {TCurrencyConfig[]} The reordered list of currencies. - */ -export const reorderCurrencies = (list: TCurrencyConfig[], type: keyof typeof CurrenciesListOrder) => { - const newOrder = CurrenciesListOrder[type]; - - return list.sort((a, b) => { - if (newOrder.indexOf(String(a.id)) < newOrder.indexOf(String(b.id))) { - return -1; - } - if (newOrder.indexOf(String(a.id)) > newOrder.indexOf(String(b.id))) { - return 1; - } - return 0; - }); -}; diff --git a/packages/tradershub/src/helpers/displayMoney.ts b/packages/tradershub/src/helpers/displayMoney.ts deleted file mode 100644 index 5a9ea8a01c53..000000000000 --- a/packages/tradershub/src/helpers/displayMoney.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { useAuthorize } from '@deriv/api-v2'; - -type TCurrency = NonNullable['data']['currency']>; -type TPreferredLanguage = ReturnType['data']['preferred_language']; - -/** - * @description Display money in a human-readable format - * @param amount - The amount to be formatted - * @param currency - The currency to be displayed - * @param options - Additional options for formatting - * @returns The formatted money - */ -export const displayMoney = ( - amount: number, - currency: TCurrency, - options?: { - // eslint-disable-next-line camelcase - fractional_digits?: number; - // eslint-disable-next-line camelcase - preferred_language?: TPreferredLanguage; - } -) => { - try { - return `${Intl.NumberFormat(options?.preferred_language ?? 'en-US', { - minimumFractionDigits: options?.fractional_digits ?? 2, - maximumFractionDigits: options?.fractional_digits ?? 2, - minimumIntegerDigits: 1, - }).format(amount)} ${currency}`; - } catch (error) { - return `${amount} ${currency}`; - } -}; diff --git a/packages/tradershub/src/helpers/formikHelpers.tsx b/packages/tradershub/src/helpers/formikHelpers.tsx deleted file mode 100644 index a452d1db8e66..000000000000 --- a/packages/tradershub/src/helpers/formikHelpers.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { useEffect } from 'react'; -import { FormikErrors, useFormikContext } from 'formik'; - -/** - * Returns an array of error field names using object dot notation for - * array fields (if any) - * Example: - * Input: { name: 'is invalid', items: [{ description: 'is invalid' }] } - * Output: ['name', 'items.0.description'] - * @param {Object} errors A Formik form errors - * @returns {Array} - */ -const getFieldErrorNames = (formikErrors: FormikErrors>) => { - const transformObjectToDotNotation = (obj: object, prefix = '', result: string[] = []) => { - Object.keys(obj).forEach(key => { - const value = obj[key as keyof typeof obj]; - if (!value) return; - - const nextKey = prefix ? `${prefix}.${key}` : key; - if (typeof value === 'object') { - transformObjectToDotNotation(value, nextKey, result); - } else { - result.push(nextKey); - } - }); - - return result; - }; - - return transformObjectToDotNotation(formikErrors); -}; - -const scrollBehavior = { - behavior: 'smooth', - block: 'center', -} as const; - -/** - * Scrolls to the first field with an error when the form is submitted. - * This is useful for long forms where the error might not be visible - * to the user. - * - * This component should be used inside a Formik component. - */ -export const ScrollToFieldError = ({ fieldOrder }: { fieldOrder?: string[] }) => { - const { submitCount, isValid, errors } = useFormikContext>(); - - const fieldErrors: Record = fieldOrder ? {} : errors; - - // Construct errors based on fieldOrder - fieldOrder?.forEach(key => { - if (errors[key]) { - fieldErrors[key] = errors[key]; - } - }); - - useEffect(() => { - if (isValid) return; - - const fieldErrorNames = getFieldErrorNames(fieldErrors); - if (fieldErrorNames.length <= 0) return; - - const element = document.querySelector(`input[name='${fieldErrorNames[0]}']`); - if (!element) return; - - // Scroll to first known error into view - element.scrollIntoView(scrollBehavior); - - // Formik doesn't (yet) provide a callback for a client-failed submission, - // thus why this is implemented through a hook that listens to changes on - // the submit count. - }, [submitCount]); // eslint-disable-line react-hooks/exhaustive-deps - - return null; -}; diff --git a/packages/tradershub/src/helpers/index.ts b/packages/tradershub/src/helpers/index.ts deleted file mode 100644 index 5c30975a776e..000000000000 --- a/packages/tradershub/src/helpers/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from './currencies'; -export * from './displayMoney'; -export * from './formikHelpers'; -export * from './signupModalHelpers'; -export * from './urls'; diff --git a/packages/tradershub/src/helpers/signupModalHelpers.ts b/packages/tradershub/src/helpers/signupModalHelpers.ts deleted file mode 100644 index 08e3efff4ce6..000000000000 --- a/packages/tradershub/src/helpers/signupModalHelpers.ts +++ /dev/null @@ -1,31 +0,0 @@ -type TCustomStyles = { - content: ReactModal.Styles['content']; - overlay: ReactModal.Styles['overlay']; -}; - -/** - * Custom styles for the react-modal to override the default styles for content and overlay - */ -export const CUSTOM_STYLES: TCustomStyles = { - content: { - position: 'absolute', - background: 'none', - border: 'none', - borderRadius: 0, - bottom: 'auto', - left: '50%', - margin: 0, - marginRight: '-50%', - padding: 0, - right: 'auto', - top: '50%', - transform: 'translate(-50%, -50%)', - transition: 'all 0.35s ease-in-out', - }, - overlay: { - backgroundColor: 'rgba(0, 0, 0, 0.72)', - zIndex: 9999, - }, -}; - -export const isCVMEnabled = (countryCode: string) => countryCode === 'br'; diff --git a/packages/tradershub/src/helpers/urls.ts b/packages/tradershub/src/helpers/urls.ts deleted file mode 100644 index d473eba128e0..000000000000 --- a/packages/tradershub/src/helpers/urls.ts +++ /dev/null @@ -1,93 +0,0 @@ -const isBrowser = () => typeof window !== 'undefined'; - -const derivComUrl = 'deriv.com'; -const derivMeUrl = 'deriv.me'; -const derivBeUrl = 'deriv.be'; - -const supportedDomains = [derivComUrl, derivMeUrl, derivBeUrl]; -const domainUrlInitial = (isBrowser() && window.location.hostname.split('app.')[1]) || ''; -const domainUrl = supportedDomains.includes(domainUrlInitial) ? domainUrlInitial : derivComUrl; - -export const derivUrls = Object.freeze({ - BINARYBOT_PRODUCTION: `https://bot.${domainUrl}`, - BINARYBOT_STAGING: `https://staging-bot.${domainUrl}`, - DERIV_APP_PRODUCTION: `https://app.${domainUrl}`, - DERIV_APP_STAGING: `https://staging-app.${domainUrl}`, - DERIV_COM_PRODUCTION: `https://${domainUrl}`, - DERIV_COM_PRODUCTION_EU: `https://eu.${domainUrl}`, - DERIV_COM_STAGING: `https://staging.${domainUrl}`, - DERIV_HOST_NAME: domainUrl, - SMARTTRADER_PRODUCTION: `https://smarttrader.${domainUrl}`, - SMARTTRADER_STAGING: `https://staging-smarttrader.${domainUrl}`, -}); - -/** - * @deprecated Please use 'URLUtils.normalizePath' from '@deriv-com/utils' instead of this. - */ -export const normalizePath = (path: string) => (path ? path.replace(/(^\/|\/$|[^a-zA-Z0-9-_./()#])/g, '') : ''); - -/** - * @deprecated Please use 'URLUtils.getQueryParameter' from '@deriv-com/utils' instead of this. - */ -export const getlangFromUrl = () => { - const queryString = window.location.search; - const urlParams = new URLSearchParams(queryString); - const lang = urlParams.get('lang'); - return lang; -}; - -/** - * @deprecated Please use 'URLUtils.getQueryParameter' from '@deriv-com/utils' instead of this. - */ -export const getActionFromUrl = () => { - const queryString = window.location.search; - const urlParams = new URLSearchParams(queryString); - const action = urlParams.get('action'); - return action; -}; - -export const getUrlSmartTrader = () => { - const { isStagingDerivApp } = getPlatformFromUrl(); - const urlLang = getlangFromUrl(); - const i18NLanguage = window.localStorage.getItem('i18n_language') || urlLang || 'en'; - - let baseLink = ''; - - if (isStagingDerivApp) { - baseLink = derivUrls.SMARTTRADER_STAGING; - } else { - baseLink = derivUrls.SMARTTRADER_PRODUCTION; - } - - return `${baseLink}/${i18NLanguage.toLowerCase()}/trading.html`; -}; - -export const getUrlBinaryBot = (isLanguageRequired = true) => { - const { isStagingDerivApp } = getPlatformFromUrl(); - - const urlLang = getlangFromUrl(); - const i18NLanguage = window.localStorage.getItem('i18n_language') || urlLang || 'en'; - - const baseLink = isStagingDerivApp ? derivUrls.BINARYBOT_STAGING : derivUrls.BINARYBOT_PRODUCTION; - - return isLanguageRequired ? `${baseLink}/?l=${i18NLanguage.toLowerCase()}` : baseLink; -}; - -export const getPlatformFromUrl = (domain = window.location.hostname) => { - const resolutions = { - isDerivApp: /^app\.deriv\.(com|me|be)$/i.test(domain), - isStagingDerivApp: /^staging-app\.deriv\.(com|me|be)$/i.test(domain), - isTestLink: /^(.*)\.binary\.sx$/i.test(domain), - }; - - return { - ...resolutions, - isStaging: resolutions.isStagingDerivApp, - }; -}; - -export const isStaging = (domain = window.location.hostname) => { - const { isStagingDerivApp } = getPlatformFromUrl(domain); - - return isStagingDerivApp; -}; diff --git a/packages/tradershub/src/hooks/__tests__/useAccountSwitcher.spec.ts b/packages/tradershub/src/hooks/__tests__/useAccountSwitcher.spec.ts deleted file mode 100644 index 95ca44fc6e7a..000000000000 --- a/packages/tradershub/src/hooks/__tests__/useAccountSwitcher.spec.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { Regulation } from '@/constants'; -import { useUIContext } from '@/providers'; -import { useActiveTradingAccount, useAuthorize, useIsDIELEnabled, useTradingAccountsList } from '@deriv/api-v2'; -import { act, renderHook } from '@testing-library/react-hooks'; -import useAccountSwitcher from '../useAccountSwitcher'; - -jest.mock('@deriv/api-v2', () => ({ - useActiveTradingAccount: jest.fn(), - useAuthorize: jest.fn(), - useIsDIELEnabled: jest.fn(), - useTradingAccountsList: jest.fn(), -})); - -jest.mock('@/providers', () => ({ - useUIContext: jest.fn().mockReturnValue({ setUIState: jest.fn(), uiState: {} }), -})); - -jest.mock('../useRegulationFlags', () => ({ - __esModule: true, - default: jest.fn().mockReturnValue({ isEU: false }), -})); - -jest.mock('../useQueryParams', () => ({ - __esModule: true, - default: jest.fn().mockReturnValue({ openModal: jest.fn() }), -})); - -describe('useAccountSwitcher', () => { - beforeEach(() => { - (useActiveTradingAccount as jest.Mock).mockReturnValue({ data: { is_virtual: false } }); - (useAuthorize as jest.Mock).mockReturnValue({ switchAccount: jest.fn() }); - (useIsDIELEnabled as jest.Mock).mockReturnValue({ data: false }); - (useTradingAccountsList as jest.Mock).mockReturnValue({ - data: [ - { is_virtual: false, loginid: 'real1' }, - { is_virtual: true, loginid: 'demo1' }, - ], - }); - (useUIContext as jest.Mock).mockReturnValue({ setUIState: jest.fn() }); - }); - - it('should return the correct initial state', () => { - const { result } = renderHook(() => useAccountSwitcher()); - expect(result.current.selectedAccount).toEqual({ label: 'Real', value: 'real' }); - }); - - it('should switch account when setSelectedAccount is called', () => { - const { result } = renderHook(() => useAccountSwitcher()); - act(() => { - result.current.setSelectedAccount({ label: 'Demo', value: 'demo' }); - }); - expect(result.current.selectedAccount).toEqual({ label: 'Demo', value: 'demo' }); - }); - - it('should call setUIState with the correct parameters when activeAccountType changes', () => { - const setUIState = jest.fn(); - (useUIContext as jest.Mock).mockReturnValue({ setUIState }); - const { rerender } = renderHook(() => useAccountSwitcher()); - (useActiveTradingAccount as jest.Mock).mockReturnValue({ data: { is_virtual: true } }); - rerender(); - expect(setUIState).toHaveBeenCalledWith({ - accountType: 'demo', - }); - }); - - it('should set regulation to NonEU when isDIEL is true and activeAccountType is demo', () => { - const setUIState = jest.fn(); - (useUIContext as jest.Mock).mockReturnValue({ setUIState }); - (useIsDIELEnabled as jest.Mock).mockReturnValue({ data: true }); - (useActiveTradingAccount as jest.Mock).mockReturnValue({ data: { is_virtual: true } }); - renderHook(() => useAccountSwitcher()); - expect(setUIState).toHaveBeenCalledWith({ - regulation: Regulation.NonEU, - }); - }); - - it('should call switchAccount with firstRealLoginId when account value is not demo', () => { - const switchAccount = jest.fn(); - (useAuthorize as jest.Mock).mockReturnValue({ switchAccount }); - const { result } = renderHook(() => useAccountSwitcher()); - act(() => { - result.current.setSelectedAccount({ label: 'Real', value: 'real' }); - }); - expect(switchAccount).toHaveBeenCalledWith('real1'); - }); -}); diff --git a/packages/tradershub/src/hooks/__tests__/useCFDAssets.spec.ts b/packages/tradershub/src/hooks/__tests__/useCFDAssets.spec.ts deleted file mode 100644 index 22ec1e43827e..000000000000 --- a/packages/tradershub/src/hooks/__tests__/useCFDAssets.spec.ts +++ /dev/null @@ -1,102 +0,0 @@ -import { useCFDAccountsList } from '@deriv/api-v2'; -import { renderHook } from '@testing-library/react-hooks'; -import useCFDAssets from '../useCFDAssets'; - -jest.mock('@deriv/api-v2', () => ({ - useCFDAccountsList: jest.fn(), -})); - -describe('useCFDAssets', () => { - it('should calculate sample balances correctly', () => { - (useCFDAccountsList as jest.Mock).mockReturnValue({ - data: { - mt5: [ - { is_virtual: true, converted_balance: 100, landing_company_short: 'maltainvest' }, - { is_virtual: false, converted_balance: 200, landing_company_short: 'maltainvest' }, - ], - dxtrade: [ - { is_virtual: true, converted_balance: 300 }, - { is_virtual: false, converted_balance: 400 }, - ], - ctrader: [ - { is_virtual: true, converted_balance: 500 }, - { is_virtual: false, converted_balance: 600 }, - ], - }, - isSuccess: true, - }); - - const { result } = renderHook(() => useCFDAssets('EU')); - - expect(result.current.calculatedDemoBalance).toBe(100); - expect(result.current.calculatedRealBalance).toBe(200); - expect(result.current.isSuccess).toBe(true); - }); - - it('should handle no accounts', () => { - (useCFDAccountsList as jest.Mock).mockReturnValue({ - data: { - mt5: [], - dxtrade: [], - ctrader: [], - }, - isSuccess: true, - }); - - const { result } = renderHook(() => useCFDAssets('EU')); - - expect(result.current.calculatedDemoBalance).toBe(0); - expect(result.current.calculatedRealBalance).toBe(0); - expect(result.current.isSuccess).toBe(true); - }); - - it('should handle API failure', () => { - (useCFDAccountsList as jest.Mock).mockReturnValue({ - data: null, - isSuccess: false, - }); - - const { result } = renderHook(() => useCFDAssets('EU')); - - expect(result.current.calculatedDemoBalance).toBe(0); - expect(result.current.calculatedRealBalance).toBe(0); - expect(result.current.isSuccess).toBe(false); - }); - it('should filter mt5 accounts correctly for EU regulation', () => { - (useCFDAccountsList as jest.Mock).mockReturnValue({ - data: { - mt5: [ - { is_virtual: true, converted_balance: 100, landing_company_short: 'maltainvest' }, - { is_virtual: false, converted_balance: 200, landing_company_short: 'maltainvest' }, - { is_virtual: false, converted_balance: 300, landing_company_short: 'svg' }, - ], - dxtrade: [], - ctrader: [], - }, - isSuccess: true, - }); - - const { result } = renderHook(() => useCFDAssets('EU')); - - expect(result.current.calculatedRealBalance).toBe(200); - }); - - it('should filter mt5 accounts correctly for non-EU regulation', () => { - (useCFDAccountsList as jest.Mock).mockReturnValue({ - data: { - mt5: [ - { is_virtual: true, converted_balance: 100, landing_company_short: 'maltainvest' }, - { is_virtual: false, converted_balance: 200, landing_company_short: 'maltainvest' }, - { is_virtual: false, converted_balance: 300, landing_company_short: 'svg' }, - ], - dxtrade: [], - ctrader: [], - }, - isSuccess: true, - }); - - const { result } = renderHook(() => useCFDAssets('non-EU')); - - expect(result.current.calculatedRealBalance).toBe(300); - }); -}); diff --git a/packages/tradershub/src/hooks/__tests__/useCurrencies.spec.ts b/packages/tradershub/src/hooks/__tests__/useCurrencies.spec.ts deleted file mode 100644 index a99374c8f048..000000000000 --- a/packages/tradershub/src/hooks/__tests__/useCurrencies.spec.ts +++ /dev/null @@ -1,153 +0,0 @@ -import { useAuthorize, useLandingCompany, useQuery } from '@deriv/api-v2'; -import { renderHook } from '@testing-library/react-hooks'; -import useCurrencies from '../useCurrencies'; -import useRegulationFlags from '../useRegulationFlags'; - -jest.mock('@deriv/api-v2', () => ({ - useAuthorize: jest.fn(), - useQuery: jest.fn(), - useLandingCompany: jest.fn(), -})); - -jest.mock('../useRegulationFlags', () => ({ - __esModule: true, - default: jest.fn(), -})); - -describe('useCurrencies', () => { - const mockAuthorizeData = { - account_list: [{ currency: 'USD' }, { currency: 'EUR' }], - currency: 'USD', - }; - - const mockWebsiteStatusData = { - website_status: { - currencies_config: { - USD: { type: 'fiat' }, - EUR: { type: 'fiat' }, - BTC: { type: 'crypto' }, - ETH: { type: 'crypto' }, - }, - }, - }; - - const mockLandingCompanyData = { - gaming_company: { - legal_allowed_currencies: ['USD', 'EUR'], - }, - financial_company: { - legal_allowed_currencies: ['USD', 'EUR'], - }, - }; - - beforeEach(() => { - (useAuthorize as jest.Mock).mockReturnValue({ - data: mockAuthorizeData, - isLoading: false, - isSuccess: true, - }); - (useQuery as jest.Mock).mockReturnValue({ - data: mockWebsiteStatusData, - isLoading: false, - }); - (useLandingCompany as jest.Mock).mockReturnValue({ - data: mockLandingCompanyData, - isLoading: false, - }); - (useRegulationFlags as jest.Mock).mockReturnValue({ isNonEU: true }); - }); - - it('should return currency data based on dependencies', () => { - (useRegulationFlags as jest.Mock).mockReturnValue({ isNonEU: false }); - const { result } = renderHook(() => useCurrencies()); - - expect(result.current.data).toEqual({ - FIAT: [ - { type: 'fiat', id: 'USD', isAdded: true }, - { type: 'fiat', id: 'EUR', isAdded: true }, - ], - CRYPTO: [], - }); - - expect(result.current.isLoading).toBeFalsy(); - expect(result.current.currentAccountCurrencyConfig).toBeDefined(); - expect(result.current.currentAccountCurrencyConfig?.id).toEqual('USD'); - - expect(result.current.addedFiatCurrency).toBeDefined(); - expect(result.current.addedFiatCurrency?.id).toEqual('USD'); - }); - - it('should return true for allCryptoCurrenciesAreAdded when all crypto currencies are added to the account list', () => { - const mockAuthorizeDataWithCrypto = { - ...mockAuthorizeData, - account_list: [ - ...mockAuthorizeData.account_list, - { currency: 'BTC' }, // Add BTC account to simulate all crypto currencies added - ], - }; - (useAuthorize as jest.Mock).mockReturnValue({ - data: mockAuthorizeDataWithCrypto, - isLoading: false, - isSuccess: true, - }); - const { result } = renderHook(() => useCurrencies()); - expect(result.current.allCryptoCurrenciesAreAdded).toBeTruthy(); - }); - - it('should return undefined for currentAccountCurrencyConfig when authorizeData.currency is not set', () => { - const mockAuthorizeDataWithoutCurrency = { - ...mockAuthorizeData, - currency: undefined, - }; - (useAuthorize as jest.Mock).mockReturnValue({ - data: mockAuthorizeDataWithoutCurrency, - isLoading: false, - isSuccess: true, - }); - const { result } = renderHook(() => useCurrencies()); - expect(result.current.currentAccountCurrencyConfig).toBeUndefined(); - }); - - it('should return undefined for addedFiatCurrency when no fiat currency is added to the account list', () => { - const mockAuthorizeDataWithoutFiat = { - ...mockAuthorizeData, - account_list: [ - { currency: 'BTC' }, // Add BTC account to simulate no fiat currency added - ], - }; - (useAuthorize as jest.Mock).mockReturnValue({ - data: mockAuthorizeDataWithoutFiat, - isLoading: false, - isSuccess: true, - }); - (useLandingCompany as jest.Mock).mockReturnValue({ - data: { - gaming_company: { - legal_allowed_currencies: ['USD', 'EUR', 'BTC', 'ETH'], - }, - }, - isLoading: false, - }); - const { result } = renderHook(() => useCurrencies()); - expect(result.current.addedFiatCurrency).toBeUndefined(); - }); - - it('should return true for isLoading when at least one hook is in loading state', () => { - (useAuthorize as jest.Mock).mockReturnValue({ - data: mockAuthorizeData, - isLoading: true, - isSuccess: false, - }); - (useLandingCompany as jest.Mock).mockReturnValue({ - data: null, - isLoading: true, - }); - (useQuery as jest.Mock).mockReturnValue({ - data: null, - isLoading: true, - }); - const { result } = renderHook(() => useCurrencies()); - expect(result.current.isLoading).toBeTruthy(); - expect(result.current.data).toBeUndefined(); - }); -}); diff --git a/packages/tradershub/src/hooks/__tests__/useDisableFiatCurrencies.spec.ts b/packages/tradershub/src/hooks/__tests__/useDisableFiatCurrencies.spec.ts deleted file mode 100644 index a92984267bc8..000000000000 --- a/packages/tradershub/src/hooks/__tests__/useDisableFiatCurrencies.spec.ts +++ /dev/null @@ -1,97 +0,0 @@ -import { useAccountStatus, useActiveTradingAccount, useCFDAccountsList, useQuery } from '@deriv/api-v2'; -import { renderHook } from '@testing-library/react-hooks'; -import useCurrencies from '../useCurrencies'; -import useDisableFiatCurrencies from '../useDisableFiatCurrencies'; - -jest.mock('@deriv/api-v2', () => ({ - useAccountStatus: jest.fn(), - useActiveTradingAccount: jest.fn(), - useCFDAccountsList: jest.fn(), - useQuery: jest.fn(), - useCurrencies: jest.fn(), -})); - -jest.mock('../useCurrencies', () => jest.fn()); - -describe('useDisableFiatCurrencies', () => { - const mockData = { - activeDerivTradingAccount: { balance: 1000 }, - accountStatus: { is_deposit_attempt: true }, - cfdAccountsList: { dxtrade: [], mt5: [] }, - currentAccountCurrencyConfig: { type: 'fiat' }, - addedFiatCurrency: { id: 'USD', type: 'fiat', isAdded: true }, - statements: { statement: { count: 3, transactions: [{}, {}, {}] } }, - }; - - beforeEach(() => { - (useActiveTradingAccount as jest.Mock).mockReturnValue({ data: mockData.activeDerivTradingAccount }); - (useAccountStatus as jest.Mock).mockReturnValue({ data: mockData.accountStatus, isSuccess: true }); - (useCFDAccountsList as jest.Mock).mockReturnValue({ data: mockData.cfdAccountsList }); - (useQuery as jest.Mock).mockReturnValue({ data: mockData.statements }); - (useCurrencies as jest.Mock).mockReturnValue({ - currentAccountCurrencyConfig: mockData.currentAccountCurrencyConfig, - addedFiatCurrency: mockData.addedFiatCurrency, - }); - }); - - it('should disable fiat currencies based on account status and current account currency', () => { - const { result } = renderHook(() => useDisableFiatCurrencies()); - - expect(result.current).toBe(true); - - (useCurrencies as jest.Mock).mockReturnValue({ - currentAccountCurrencyConfig: { type: 'fiat' }, - addedFiatCurrency: undefined, - }); - const { result: resultWithBalance } = renderHook(() => useDisableFiatCurrencies()); - expect(resultWithBalance.current).toBe(true); - - (useCurrencies as jest.Mock).mockReturnValue({ - currentAccountCurrencyConfig: { type: 'fiat' }, - addedFiatCurrency: mockData.addedFiatCurrency, - }); - const { result: resultDepositAttempt } = renderHook(() => useDisableFiatCurrencies()); - expect(resultDepositAttempt.current).toBe(true); - }); - - it('should enable fiat currencies if the current account currency is not fiat', () => { - (useCurrencies as jest.Mock).mockReturnValue({ - currentAccountCurrencyConfig: { type: 'crypto' }, - addedFiatCurrency: undefined, - }); - (useAccountStatus as jest.Mock).mockReturnValue({ data: { is_deposit_attempt: false }, isSuccess: true }); - const { result } = renderHook(() => useDisableFiatCurrencies()); - expect(result.current).toBe(false); - }); - - it('should disable fiat currencies if there is no balance and the deposit attempt', () => { - (useActiveTradingAccount as jest.Mock).mockReturnValue({ data: { balance: 0 } }); - (useAccountStatus as jest.Mock).mockReturnValue({ data: { is_deposit_attempt: true }, isSuccess: true }); - const { result } = renderHook(() => useDisableFiatCurrencies()); - expect(result.current).toBe(true); - }); - - it('should disable fiat currencies if the current account currency is not fiat and the account is a deposit attempt but there are no MT5 accounts', () => { - (useAccountStatus as jest.Mock).mockReturnValue({ data: { is_deposit_attempt: true }, isSuccess: true }); - (useCFDAccountsList as jest.Mock).mockReturnValue({ data: { dxtrade: [{}], mt5: undefined } }); - const { result } = renderHook(() => useDisableFiatCurrencies()); - expect(result.current).toBe(true); - }); - - it('should disable fiat currencies if the current account currency is not fiat and the account is a deposit attempt but there are no transactions', () => { - (useAccountStatus as jest.Mock).mockReturnValue({ data: { is_deposit_attempt: true }, isSuccess: true }); - (useQuery as jest.Mock).mockReturnValue({ data: { statement: { count: 0, transactions: [] } } }); - const { result } = renderHook(() => useDisableFiatCurrencies()); - expect(result.current).toBe(true); - }); - - it('should enable fiat currencies if the current account currency is not fiat and the account is not a deposit attempt', () => { - (useCurrencies as jest.Mock).mockReturnValue({ - currentAccountCurrencyConfig: { type: 'crypto' }, - addedFiatCurrency: undefined, - }); - (useAccountStatus as jest.Mock).mockReturnValue({ data: { is_deposit_attempt: false }, isSuccess: true }); - const { result } = renderHook(() => useDisableFiatCurrencies()); - expect(result.current).toBe(false); - }); -}); diff --git a/packages/tradershub/src/hooks/__tests__/usePlatformAssets.spec.ts b/packages/tradershub/src/hooks/__tests__/usePlatformAssets.spec.ts deleted file mode 100644 index ab58943aa604..000000000000 --- a/packages/tradershub/src/hooks/__tests__/usePlatformAssets.spec.ts +++ /dev/null @@ -1,132 +0,0 @@ -import { Regulation } from '@/constants'; -import { useExchangeRates, useTradingAccountsList } from '@deriv/api-v2'; -import { renderHook } from '@testing-library/react-hooks'; -import usePlatformAssets from '../usePlatformAssets'; - -jest.mock('@deriv/api-v2', () => ({ - useExchangeRates: jest.fn(), - useTradingAccountsList: jest.fn(), -})); - -describe('usePlatformAssets', () => { - beforeEach(() => { - (useTradingAccountsList as jest.Mock).mockReturnValue({ - data: [ - { broker: 'MF', currency: 'USD', is_virtual: false, balance: 100 }, - { broker: 'CR', currency: 'EUR', is_virtual: false, balance: 200 }, - { broker: 'MF', currency: 'GBP', is_virtual: true, balance: 300 }, - ], - fiat_account: 'USD', - isSuccess: true, - }); - - (useExchangeRates as jest.Mock).mockReturnValue({ - data: {}, - getExchangeRate: () => 1, - subscribe: jest.fn(), - unsubscribe: jest.fn(), - }); - }); - - it('should return correct balances and currency for EU regulation', () => { - const { result } = renderHook(() => usePlatformAssets(Regulation.EU)); - - expect(result.current.demoAccountBalance).toBe(300); - expect(result.current.fiatCurrency).toBe('USD'); - expect(result.current.isSuccess).toBe(true); - expect(result.current.realAccounts).toHaveLength(2); - expect(result.current.totalRealPlatformBalance).toBe(100); - }); - - it('should return correct balances and currency for non-EU regulation', () => { - const { result } = renderHook(() => usePlatformAssets(Regulation.NonEU)); - - expect(result.current.fiatCurrency).toBe('USD'); - expect(result.current.isSuccess).toBe(true); - expect(result.current.realAccounts).toHaveLength(2); - expect(result.current.totalRealPlatformBalance).toBe(200); - }); - - it('should return 0 for demoAccountBalance when demo account has no balance', () => { - (useTradingAccountsList as jest.Mock).mockReturnValue({ - data: [ - { broker: 'MF', currency: 'USD', is_virtual: false, balance: 100 }, - { broker: 'CR', currency: 'EUR', is_virtual: false, balance: 200 }, - { broker: 'MF', currency: 'GBP', is_virtual: true, balance: undefined }, - ], - fiat_account: 'USD', - isSuccess: true, - }); - - const { result } = renderHook(() => usePlatformAssets(Regulation.EU)); - - expect(result.current.demoAccountBalance).toBe(0); - }); - - it('should use fallback values in totalRealPlatformBalance calculation', () => { - (useTradingAccountsList as jest.Mock).mockReturnValue({ - data: [ - { broker: 'MF', currency: undefined, is_virtual: false, balance: 100 }, - { broker: 'CR', currency: undefined, is_virtual: false, balance: 200 }, - { broker: 'MF', currency: 'GBP', is_virtual: true, balance: 300 }, - ], - fiat_account: undefined, - isSuccess: true, - }); - - const getExchangeRateMock = jest.fn().mockReturnValue(1); - (useExchangeRates as jest.Mock).mockReturnValue({ - getExchangeRate: getExchangeRateMock, - }); - - const { result } = renderHook(() => usePlatformAssets(Regulation.EU)); - - expect(getExchangeRateMock).toHaveBeenCalledWith('USD', 'USD'); - - expect(result.current.totalRealPlatformBalance).toBe(100); - }); - - it('should call multiSubscribe with an empty target_currencies array when there are no real accounts', () => { - (useTradingAccountsList as jest.Mock).mockReturnValue({ - data: undefined, // no real accounts - fiat_account: 'USD', - isSuccess: true, - }); - - const multiSubscribeMock = jest.fn(); - (useExchangeRates as jest.Mock).mockReturnValue({ - subscribe: multiSubscribeMock, - }); - - renderHook(() => usePlatformAssets(Regulation.EU)); - - if (multiSubscribeMock.mock.calls.length > 0) { - expect(multiSubscribeMock.mock.calls[0][0]).toEqual({ - base_currency: 'USD', - target_currencies: [], - }); - } - }); - - it('should use fallback value for account balance in totalRealPlatformBalance calculation', () => { - (useTradingAccountsList as jest.Mock).mockReturnValue({ - data: [ - { broker: 'MF', currency: 'USD', is_virtual: false, balance: undefined }, // real account with no balance - { broker: 'CR', currency: 'EUR', is_virtual: false, balance: 200 }, - { broker: 'MF', currency: 'GBP', is_virtual: true, balance: 300 }, - ], - fiat_account: 'USD', - isSuccess: true, - }); - - const getExchangeRateMock = jest.fn().mockReturnValue(1); - (useExchangeRates as jest.Mock).mockReturnValue({ - getExchangeRate: getExchangeRateMock, - subscribe: jest.fn(), - }); - - const { result } = renderHook(() => usePlatformAssets(Regulation.EU)); - - expect(result.current.totalRealPlatformBalance).toBe(0); - }); -}); diff --git a/packages/tradershub/src/hooks/__tests__/useQueryParams.spec.ts b/packages/tradershub/src/hooks/__tests__/useQueryParams.spec.ts deleted file mode 100644 index 3d5defc0abed..000000000000 --- a/packages/tradershub/src/hooks/__tests__/useQueryParams.spec.ts +++ /dev/null @@ -1,99 +0,0 @@ -import { useHistory, useLocation } from 'react-router-dom'; -import { waitFor } from '@testing-library/react'; -import { renderHook } from '@testing-library/react-hooks'; -import useQueryParams from '../useQueryParams'; - -jest.mock('react-router-dom', () => ({ - ...jest.requireActual('react-router-dom'), - useLocation: jest.fn(), - useHistory: jest.fn(), -})); - -describe('useQueryParams', () => { - const mockHistoryPush = jest.fn(); - - beforeEach(() => { - (useLocation as jest.Mock).mockReturnValue({ search: '' }); - (useHistory as jest.Mock).mockReturnValue({ - push: mockHistoryPush, - location: { pathname: '/' }, - action: 'PUSH', - }); - }); - - it('should open the modal when openModal is called', async () => { - const { result } = renderHook(() => useQueryParams()); - - expect(result.current.isModalOpen('GetADerivAccountDialog')).toBe(false); - - result.current.openModal('GetADerivAccountDialog'); - - await waitFor(() => expect(result.current.isModalOpen('GetADerivAccountDialog')).toBe(true)); - }); - - it('should close the modal when closeModal is called', async () => { - const { result } = renderHook(() => useQueryParams()); - - result.current.openModal('GetADerivAccountDialog'); - - result.current.closeModal(); - - await waitFor(() => expect(result.current.isModalOpen('GetADerivAccountDialog')).toBe(false)); - }); - - it('should not open the modal for an invalid modal id', async () => { - const { result } = renderHook(() => useQueryParams()); - - result.current.openModal('InvalidModalId'); - - await waitFor(() => expect(result.current.isModalOpen('GetADerivAccountDialog')).toBe(false)); - }); - - it('should update the URL parameters when openModal is called', async () => { - const { result } = renderHook(() => useQueryParams()); - - result.current.openModal('GetADerivAccountDialog'); - - await waitFor(() => - expect(mockHistoryPush).toHaveBeenCalledWith({ - pathname: '/', - search: 'modal=GetADerivAccountDialog', - state: { - modal: 'GetADerivAccountDialog', - }, - }) - ); - }); - - it('should close the modal when history action is POP', async () => { - (useHistory as jest.Mock).mockReturnValue({ - action: 'POP', - push: mockHistoryPush, - location: { pathname: '/' }, - }); - - const { result } = renderHook(() => useQueryParams()); - - await waitFor(() => expect(result.current.isModalOpen('GetADerivAccountDialog')).toBe(false)); - }); - - it('should open the latest modal when openModal is called multiple times', async () => { - const { result } = renderHook(() => useQueryParams()); - - result.current.openModal('GetADerivAccountDialog'); - result.current.openModal('AddOrManageAccount'); - - await waitFor(() => expect(result.current.isModalOpen('AddOrManageAccount')).toBe(true)); - await waitFor(() => expect(result.current.isModalOpen('GetADerivAccountDialog')).toBe(false)); - - await waitFor(() => - expect(mockHistoryPush).toHaveBeenCalledWith({ - pathname: '/', - search: 'modal=AddOrManageAccount', - state: { - modal: 'AddOrManageAccount', - }, - }) - ); - }); -}); diff --git a/packages/tradershub/src/hooks/__tests__/useRegulationFlags.spec.ts b/packages/tradershub/src/hooks/__tests__/useRegulationFlags.spec.ts deleted file mode 100644 index cce6e659dd69..000000000000 --- a/packages/tradershub/src/hooks/__tests__/useRegulationFlags.spec.ts +++ /dev/null @@ -1,100 +0,0 @@ -import { Regulation } from '@/constants'; -import { useUIContext } from '@/providers'; -import { useActiveTradingAccount, useIsEuRegion, useLandingCompany, useTradingAccountsList } from '@deriv/api-v2'; -import { renderHook } from '@testing-library/react-hooks'; -import useRegulationFlags from '../useRegulationFlags'; - -jest.mock('@deriv/api-v2', () => ({ - useActiveTradingAccount: jest.fn(), - useIsEuRegion: jest.fn(), - useLandingCompany: jest.fn(), - useTradingAccountsList: jest.fn(), -})); - -jest.mock('@/providers', () => ({ - useUIContext: jest.fn(), -})); - -describe('useRegulationFlags', () => { - beforeEach(() => { - (useActiveTradingAccount as jest.Mock).mockReturnValue({ data: { is_virtual: false }, isSuccess: true }); - (useIsEuRegion as jest.Mock).mockReturnValue({ isEUCountry: true }); - (useLandingCompany as jest.Mock).mockReturnValue({ - data: { - financial_company: { shortcode: 'svg' }, - gaming_company: { shortcode: 'svg' }, - }, - isSuccess: true, - }); - (useTradingAccountsList as jest.Mock).mockReturnValue({ - data: [{ broker: 'CR' }, { broker: 'MF' }], - isSuccess: true, - }); - (useUIContext as jest.Mock).mockReturnValue({ uiState: { accountType: 'real', regulation: Regulation.EU } }); - }); - - it('should return correct regulation flags', () => { - const { result } = renderHook(() => useRegulationFlags()); - expect(result.current).toEqual({ - hasActiveDerivAccount: true, - isEU: true, - isEURealAccount: true, - isHighRisk: true, - isNonEU: true, - isNonEURealAccount: true, - isSuccess: true, - noRealCRNonEUAccount: false, - noRealMFEUAccount: false, - }); - }); - - it('should return isEU as false when isEUCountry and regulation are not EU', () => { - (useIsEuRegion as jest.Mock).mockReturnValue({ isEUCountry: false }); - (useUIContext as jest.Mock).mockReturnValue({ uiState: { regulation: Regulation.NonEU } }); - const { result } = renderHook(() => useRegulationFlags()); - expect(result.current.isEU).toBe(false); - }); - - it('should return isNonEU as false when isHighRisk is false and regulation is not NonEU', () => { - (useLandingCompany as jest.Mock).mockReturnValue({ - data: { - financial_company: { shortcode: 'maltainvest' }, - gaming_company: { shortcode: 'malta' }, - }, - isSuccess: true, - }); - (useUIContext as jest.Mock).mockReturnValue({ uiState: { regulation: Regulation.EU } }); - const { result } = renderHook(() => useRegulationFlags()); - expect(result.current.isNonEU).toBe(false); - }); - - it('should return isHighRisk as false when financial_company shortcode is not svg', () => { - (useLandingCompany as jest.Mock).mockReturnValue({ - data: { - financial_company: { shortcode: 'maltainvest' }, - gaming_company: { shortcode: 'svg' }, - }, - isSuccess: true, - }); - const { result } = renderHook(() => useRegulationFlags()); - expect(result.current.isHighRisk).toBe(false); - }); - - it('should return noRealCRNonEUAccount as true when broker is not CR', () => { - (useTradingAccountsList as jest.Mock).mockReturnValue({ - data: [{ broker: 'MF' }], - isSuccess: true, - }); - const { result } = renderHook(() => useRegulationFlags()); - expect(result.current.noRealCRNonEUAccount).toBe(true); - }); - - it('should return noRealMFEUAccount as true when broker is not MF', () => { - (useTradingAccountsList as jest.Mock).mockReturnValue({ - data: [{ broker: 'CR' }], - isSuccess: true, - }); - const { result } = renderHook(() => useRegulationFlags()); - expect(result.current.noRealMFEUAccount).toBe(true); - }); -}); diff --git a/packages/tradershub/src/hooks/__tests__/useRegulationSwitcher.spec.ts b/packages/tradershub/src/hooks/__tests__/useRegulationSwitcher.spec.ts deleted file mode 100644 index 6dc85b8e368c..000000000000 --- a/packages/tradershub/src/hooks/__tests__/useRegulationSwitcher.spec.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { Regulation } from '@/constants'; -import { useUIContext } from '@/providers'; -import { useActiveTradingAccount, useAuthorize, useTradingAccountsList } from '@deriv/api-v2'; -import { act, renderHook } from '@testing-library/react-hooks'; -import useRegulationSwitcher from '../useRegulationSwitcher'; - -jest.mock('@deriv/api-v2', () => ({ - useActiveTradingAccount: jest.fn(), - useAuthorize: jest.fn(), - useTradingAccountsList: jest.fn(), - useIsEuRegion: jest.fn().mockReturnValue({ isEUCountry: true }), - useLandingCompany: jest.fn().mockReturnValue({ data: { gaming_company: { shortcode: 'maltainvest' } } }), -})); - -jest.mock('@/providers', () => ({ - useUIContext: jest.fn(), -})); - -describe('useRegulationSwitcher', () => { - beforeEach(() => { - (useActiveTradingAccount as jest.Mock).mockReturnValue({ data: { loginid: 'CR1234' } }); - (useAuthorize as jest.Mock).mockReturnValue({ switchAccount: jest.fn() }); - (useTradingAccountsList as jest.Mock).mockReturnValue({ - data: [{ loginid: 'CR1234' }, { loginid: 'MF1234' }], - }); - (useUIContext as jest.Mock).mockReturnValue({ setUIState: jest.fn(), uiState: { regulation: Regulation.EU } }); - }); - - it('should return the correct initial state', () => { - const { result } = renderHook(() => useRegulationSwitcher()); - expect(result.current.buttons).toEqual([{ label: Regulation.NonEU }, { label: Regulation.EU }]); - }); - - it('should switch regulation when handleButtonClick is called', () => { - const setUIState = jest.fn(); - (useUIContext as jest.Mock).mockReturnValue({ setUIState, uiState: { regulation: Regulation.EU } }); - const { result } = renderHook(() => useRegulationSwitcher()); - act(() => { - result.current.handleButtonClick(Regulation.NonEU); - }); - expect(setUIState).toHaveBeenCalledWith({ regulation: Regulation.NonEU }); - }); - - it('should set regulation based on active trading account', () => { - const setUIState = jest.fn(); - (useUIContext as jest.Mock).mockReturnValue({ setUIState, uiState: { regulation: Regulation.EU } }); - renderHook(() => useRegulationSwitcher()); - expect(setUIState).toHaveBeenCalledWith({ regulation: Regulation.NonEU }); - }); - - it('should set regulation to EU when active trading account starts with MF', () => { - const setUIState = jest.fn(); - (useActiveTradingAccount as jest.Mock).mockReturnValue({ data: { loginid: 'MF1234' } }); - (useUIContext as jest.Mock).mockReturnValue({ setUIState, uiState: { regulation: Regulation.NonEU } }); - renderHook(() => useRegulationSwitcher()); - expect(setUIState).toHaveBeenCalledWith({ regulation: Regulation.EU }); - }); - - it('should set regulation to NonEU and switch account when label is NonEU and realCRAccount is not empty', () => { - const setUIState = jest.fn(); - const switchAccount = jest.fn(); - (useUIContext as jest.Mock).mockReturnValue({ setUIState, uiState: { regulation: Regulation.EU } }); - (useAuthorize as jest.Mock).mockReturnValue({ switchAccount }); - const { result } = renderHook(() => useRegulationSwitcher()); - act(() => { - result.current.handleButtonClick(Regulation.NonEU); - }); - expect(setUIState).toHaveBeenCalledWith({ regulation: Regulation.NonEU }); - expect(switchAccount).toHaveBeenCalledWith('CR1234'); - }); -}); diff --git a/packages/tradershub/src/hooks/__tests__/useTotalAssets.spec.ts b/packages/tradershub/src/hooks/__tests__/useTotalAssets.spec.ts deleted file mode 100644 index 87a8ee1880b2..000000000000 --- a/packages/tradershub/src/hooks/__tests__/useTotalAssets.spec.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { useUIContext } from '@/providers'; -import { useActiveTradingAccount, useAuthorize } from '@deriv/api-v2'; -import { renderHook } from '@testing-library/react-hooks'; -import useCFDAssets from '../useCFDAssets'; -import usePlatformAssets from '../usePlatformAssets'; -import useTotalAssets from '../useTotalAssets'; - -jest.mock('@/providers', () => ({ - useUIContext: jest.fn(), -})); - -jest.mock('@deriv/api-v2', () => ({ - useActiveTradingAccount: jest.fn(), - useAuthorize: jest.fn(), -})); - -jest.mock('../useCFDAssets', () => jest.fn()); -jest.mock('../usePlatformAssets', () => jest.fn()); - -describe('useTotalAssets', () => { - it('should return expected data and success status', () => { - (useUIContext as jest.Mock).mockReturnValue({ uiState: { regulation: 'test' } }); - (useActiveTradingAccount as jest.Mock).mockReturnValue({ data: { is_virtual: false } }); - (useAuthorize as jest.Mock).mockReturnValue({ data: { preferred_language: 'en' }, isSuccess: true }); - (useCFDAssets as jest.Mock).mockReturnValue({ - calculatedDemoBalance: 0, - calculatedRealBalance: 100, - isSuccess: true, - }); - (usePlatformAssets as jest.Mock).mockReturnValue({ - demoAccountBalance: 0, - totalRealPlatformBalance: 200, - isSuccess: true, - }); - - const { result } = renderHook(() => useTotalAssets()); - expect(result.current.data).toBe('300.00 USD'); - expect(result.current.isSuccess).toBe(true); - }); - - it('should handle failure in useAuthorize', () => { - (useUIContext as jest.Mock).mockReturnValue({ uiState: { regulation: 'test' } }); - (useActiveTradingAccount as jest.Mock).mockReturnValue({ data: { is_virtual: false } }); - (useAuthorize as jest.Mock).mockReturnValue({ isSuccess: false }); - (useCFDAssets as jest.Mock).mockReturnValue({ - calculatedDemoBalance: 0, - calculatedRealBalance: 100, - isSuccess: true, - }); - (usePlatformAssets as jest.Mock).mockReturnValue({ - demoAccountBalance: 0, - totalRealPlatformBalance: 200, - isSuccess: true, - }); - - const { result } = renderHook(() => useTotalAssets()); - expect(result.current.isSuccess).toBe(false); - }); - - it('should handle virtual account', () => { - (useUIContext as jest.Mock).mockReturnValue({ uiState: { regulation: 'test' } }); - (useActiveTradingAccount as jest.Mock).mockReturnValue({ data: { is_virtual: true } }); - (useAuthorize as jest.Mock).mockReturnValue({ data: { preferred_language: 'en' }, isSuccess: true }); - (useCFDAssets as jest.Mock).mockReturnValue({ - calculatedDemoBalance: 100, - calculatedRealBalance: 0, - isSuccess: true, - }); - (usePlatformAssets as jest.Mock).mockReturnValue({ - demoAccountBalance: 200, - totalRealPlatformBalance: 0, - isSuccess: true, - }); - - const { result } = renderHook(() => useTotalAssets()); - expect(result.current.data).toBe('300.00 USD'); - expect(result.current.isSuccess).toBe(true); - }); -}); diff --git a/packages/tradershub/src/hooks/index.ts b/packages/tradershub/src/hooks/index.ts deleted file mode 100644 index 5d82df1c472a..000000000000 --- a/packages/tradershub/src/hooks/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -export { default as useAccountSwitcher } from './useAccountSwitcher'; -export { default as useAddNewCurrencyAccount } from './useAddNewCurrencyAccount'; -export { default as useCFDAssets } from './useCFDAssets'; -export { default as useCurrencies } from './useCurrencies'; -export { default as useDisableFiatCurrencies } from './useDisableFiatCurrencies'; -export { default as useMT5AccountHandler } from './useMT5AccountHandler'; -export { default as useNewCRRealAccount } from './useNewCRRealAccount'; -export { default as usePlatformAssets } from './usePlatformAssets'; -export { default as useQueryParams } from './useQueryParams'; -export { default as useRegulationFlags } from './useRegulationFlags'; -export { default as useRegulationSwitcher } from './useRegulationSwitcher'; -export { default as useHandleSendEmail } from './useSendEmailHandler'; -export { default as useTotalAssets } from './useTotalAssets'; diff --git a/packages/tradershub/src/hooks/useAccountSwitcher.ts b/packages/tradershub/src/hooks/useAccountSwitcher.ts deleted file mode 100644 index 08238f39625b..000000000000 --- a/packages/tradershub/src/hooks/useAccountSwitcher.ts +++ /dev/null @@ -1,82 +0,0 @@ -import { useCallback, useEffect, useState } from 'react'; -import { Regulation } from '@/constants'; -import { useUIContext } from '@/providers'; -import { useActiveTradingAccount, useAuthorize, useIsDIELEnabled, useTradingAccountsList } from '@deriv/api-v2'; -import useQueryParams from './useQueryParams'; -import useRegulationFlags from './useRegulationFlags'; - -const accountTypes = [ - { label: 'Demo', value: 'demo' }, - { label: 'Real', value: 'real' }, -] as const; - -type TAccountType = typeof accountTypes[number]; - -/** - * @description This hook contains the logic that is used to switch between demo and real accounts - * @returns {selected: {label: string, value: string}, selectAccount: (account: TAccount) => void} - * @example - * const { selected, selectAccount } = useAccountSwitcher(); - * selectAccount({ label: 'Demo', value: 'demo' }); - */ -const useAccountSwitcher = () => { - const { data: tradingAccountsList } = useTradingAccountsList(); - const { data: activeTradingAccount } = useActiveTradingAccount(); - const { switchAccount } = useAuthorize(); - const { setUIState } = useUIContext(); - const activeAccountType = activeTradingAccount?.is_virtual ? accountTypes[0].value : accountTypes[1].value; - const activeType = accountTypes.find(account => account.value === activeAccountType); - const [selectedAccount, setSelected] = useState(activeType); - const firstRealLoginId = tradingAccountsList?.find(acc => !acc.is_virtual)?.loginid; - const demoLoginId = tradingAccountsList?.find(acc => acc.is_virtual)?.loginid; - const { data: isDIEL } = useIsDIELEnabled(); - - const { isEU } = useRegulationFlags(); - const { openModal } = useQueryParams(); - - useEffect(() => { - if (isDIEL && activeAccountType === accountTypes[0].value) { - setUIState({ - regulation: Regulation.NonEU, - }); - } - - if (activeType) { - setSelected(activeType); - setUIState({ - accountType: activeAccountType, - }); - } - }, [activeAccountType, activeType, isDIEL, setUIState]); - - const setSelectedAccount = useCallback( - (account: TAccountType) => { - setSelected(account); - setUIState({ - accountType: account.value, - }); - - const loginId = account.value === accountTypes[0].value ? demoLoginId : firstRealLoginId; - if (loginId) { - switchAccount(loginId); - } - - // Open the RealAccountCreation modal if the user is in the EU and is switching to a real account - if (isEU && openModal && account.value === 'real') { - openModal('RealAccountCreation'); - } - }, - [demoLoginId, firstRealLoginId, isEU, openModal, setUIState, switchAccount] - ); - - return { - // selected: {label: string, value: string} - selectedAccount, - // selectAccount: (account: TAccount) => void - setSelectedAccount, - // accountTypes: {label: Demo | Real, value: demo | real}[] - accountTypes, - }; -}; - -export default useAccountSwitcher; diff --git a/packages/tradershub/src/hooks/useAddNewCurrencyAccount.ts b/packages/tradershub/src/hooks/useAddNewCurrencyAccount.ts deleted file mode 100644 index 0bd071ad81ed..000000000000 --- a/packages/tradershub/src/hooks/useAddNewCurrencyAccount.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { useCallback, useEffect } from 'react'; -import { useAuthorize, useCreateNewRealAccount } from '@deriv/api-v2'; -import useSyncLocalStorageClientAccounts from './useSyncLocalStorageClientAccounts'; - -/** - * @name useAddNewCurrencyAccount - * @description A custom hook that creates a new currency account. - * @returns {Object} Submit handler function, the new real CR account data and the status of the request. - */ -const useAddNewCurrencyAccount = () => { - const { - data: newTradingAccountData, - mutate: createAccount, - mutateAsync: createAccountAsync, - status, - ...rest - } = useCreateNewRealAccount(); - - const { addTradingAccountToLocalStorage } = useSyncLocalStorageClientAccounts(); - const { switchAccount } = useAuthorize(); - - useEffect(() => { - if (status === 'success') { - // fail-safe for typescript as the data type is also undefined - if (!newTradingAccountData) return; - - addTradingAccountToLocalStorage(newTradingAccountData); - switchAccount(newTradingAccountData?.client_id); - } - }, [addTradingAccountToLocalStorage, newTradingAccountData, status, switchAccount]); - - /** - * A function that handles the form submission and calls the mutation. - */ - const mutate = useCallback( - (currency: string) => { - createAccount({ - payload: { - currency, - }, - }); - }, - [createAccount] - ); - - /** - * Async function that handles the form submission and calls the mutation. - */ - const mutateAsync = useCallback( - (currency: string) => - createAccountAsync({ - payload: { - currency, - }, - }), - [createAccountAsync] - ); - - return { - mutate, - mutateAsync, - data: newTradingAccountData, - status, - ...rest, - }; -}; - -export default useAddNewCurrencyAccount; diff --git a/packages/tradershub/src/hooks/useCFDAssets.ts b/packages/tradershub/src/hooks/useCFDAssets.ts deleted file mode 100644 index e67d3e876cf6..000000000000 --- a/packages/tradershub/src/hooks/useCFDAssets.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { useCFDAccountsList } from '@deriv/api-v2'; - -/** - * @description This hook is used to get the total demo and real CFD balance - * @example - * const { totalRealCFDBalance, totalDemoCFDBalance, isSuccess } = useCFDAssets(regulation); - */ -const useCFDAssets = (regulation?: string) => { - const { data: cfdAccount, isSuccess: isCFDAccountSuccess } = useCFDAccountsList(); - - const demoMT5AccountBalance = cfdAccount?.mt5.find(account => account.is_virtual)?.converted_balance ?? 0; - - const isEURegulation = regulation === 'EU'; - - const realMT5AccountBalance = - cfdAccount?.mt5 - .filter(account => { - if (isEURegulation) { - return !account.is_virtual && account.landing_company_short === 'maltainvest'; - } - return !account.is_virtual && account.landing_company_short !== 'maltainvest'; - }) - .reduce((total, account) => total + account.converted_balance, 0) ?? 0; - - // Calculate Dxtrade account balances - const demoDxtradeAccountBalance = cfdAccount?.dxtrade.find(account => account.is_virtual)?.converted_balance ?? 0; - const realDxtradeAccountBalance = cfdAccount?.dxtrade.find(account => !account.is_virtual)?.converted_balance ?? 0; - - // Calculate Ctrader account balances - const ctraderDemoAccountBalance = cfdAccount?.ctrader.find(account => account.is_virtual)?.converted_balance ?? 0; - const ctraderRealAccountBalance = cfdAccount?.ctrader.find(account => !account.is_virtual)?.converted_balance ?? 0; - - // Calculate total real and demo CFD balances - const totalRealCFDBalance = realMT5AccountBalance + realDxtradeAccountBalance + ctraderRealAccountBalance; - const totalDemoCFDBalance = demoMT5AccountBalance + demoDxtradeAccountBalance + ctraderDemoAccountBalance; - - // Calculate final real and demo balances based on regulation - const calculatedRealBalance = isEURegulation ? realMT5AccountBalance : totalRealCFDBalance; - const calculatedDemoBalance = isEURegulation ? demoMT5AccountBalance : totalDemoCFDBalance; - - return { - calculatedDemoBalance, - calculatedRealBalance, - isSuccess: isCFDAccountSuccess, - }; -}; - -export default useCFDAssets; diff --git a/packages/tradershub/src/hooks/useCurrencies.ts b/packages/tradershub/src/hooks/useCurrencies.ts deleted file mode 100644 index 39970d126bd4..000000000000 --- a/packages/tradershub/src/hooks/useCurrencies.ts +++ /dev/null @@ -1,117 +0,0 @@ -import { useCallback, useMemo } from 'react'; -import { reorderCurrencies } from '@/helpers'; -import { useAuthorize, useLandingCompany, useQuery } from '@deriv/api-v2'; -import useRegulationFlags from './useRegulationFlags'; - -type TWebsiteStatus = NonNullable>['data']>['website_status']; -export type TCurrencyConfig = NonNullable['currencies_config'][string] & { - id?: string; - isAdded?: boolean; -}; - -export type TCurrencies = { - CRYPTO: TCurrencyConfig[]; - FIAT: TCurrencyConfig[]; -}; - -/** A custom hook to get the currency config information from `website_status` endpoint and in predefined order */ -const useCurrencies = () => { - const { data: authorizeData, isLoading: isAuthorizeLoading, isSuccess: isAuthorizeSuccess } = useAuthorize(); - const { - data: websiteStatusData, - isLoading: isWebsiteStatusLoading, - ...rest - } = useQuery('website_status', { - options: { - enabled: isAuthorizeSuccess, - }, - }); - const { data: landingCompanyData, isLoading: isLandingCompanyLoading } = useLandingCompany(); - - const { isNonEU } = useRegulationFlags(); - - // Get the legal allowed currencies based on the landing company - const legalAllowedCurrencies = useMemo(() => { - if (!landingCompanyData) return []; - if (isNonEU) { - return landingCompanyData.gaming_company?.legal_allowed_currencies; - } - - return landingCompanyData.financial_company?.legal_allowed_currencies; - }, [isNonEU, landingCompanyData]); - - // Check if the currency is already added to the account list to disable the currency - const isAdded = useCallback( - (currency: string) => { - const currencyAccount = authorizeData?.account_list?.find(account => account.currency === currency); - if (!currencyAccount) return false; - - const { currency: accountCurrency, landing_company_name: landingCompany } = currencyAccount; - - return accountCurrency === currency && landingCompany !== 'virtual'; - }, - [authorizeData?.account_list] - ); - - // Get the currency config and reorder the currencies based on the predefined order - const currencyConfig = useMemo(() => { - if (!websiteStatusData?.website_status?.currencies_config) return; - const currencies: TCurrencies = { - FIAT: [], - CRYPTO: [], - }; - - // map the currencies to their respective types (FIAT or CRYPTO) with their id - Object.entries(websiteStatusData?.website_status?.currencies_config) - .filter(([key]) => legalAllowedCurrencies?.includes(key)) - .forEach(([key, value]) => { - if (value.type === 'fiat') { - currencies.FIAT.push({ - ...value, - id: key, - isAdded: isAdded(key), - }); - } else { - currencies.CRYPTO.push({ ...value, id: key, isAdded: isAdded(key) }); - } - }); - - // reorder the currencies based on the predefined order - return { - FIAT: reorderCurrencies(currencies.FIAT, 'FIAT'), - CRYPTO: reorderCurrencies(currencies.CRYPTO, 'CRYPTO'), - }; - }, [websiteStatusData?.website_status?.currencies_config, isAdded, legalAllowedCurrencies]); - - // Check if all the crypto currencies are already added to the account list - const allCryptoCurrenciesAreAdded = useMemo( - () => currencyConfig?.CRYPTO.every(currency => currency.isAdded) ?? false, - [currencyConfig?.CRYPTO] - ); - - // Get the current account currency with its config and isAdded status - const currentAccountCurrencyConfig = useMemo(() => { - if (!authorizeData?.currency || !websiteStatusData?.website_status?.currencies_config) return; - - return { - ...websiteStatusData?.website_status?.currencies_config[authorizeData?.currency], - id: authorizeData?.currency, - }; - }, [authorizeData?.currency, websiteStatusData?.website_status?.currencies_config]); - - // Get the added fiat currency with its config - const addedFiatCurrency = useMemo(() => { - return currencyConfig?.FIAT.find(currency => currency.isAdded); - }, [currencyConfig?.FIAT]); - - return { - ...rest, - data: currencyConfig, - isLoading: isAuthorizeLoading || isWebsiteStatusLoading || isLandingCompanyLoading, - allCryptoCurrenciesAreAdded, - currentAccountCurrencyConfig, - addedFiatCurrency, - }; -}; - -export default useCurrencies; diff --git a/packages/tradershub/src/hooks/useDisableFiatCurrencies.ts b/packages/tradershub/src/hooks/useDisableFiatCurrencies.ts deleted file mode 100644 index 52d8a871ae54..000000000000 --- a/packages/tradershub/src/hooks/useDisableFiatCurrencies.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { useMemo } from 'react'; -import { useAccountStatus, useActiveTradingAccount, useCFDAccountsList, useQuery } from '@deriv/api-v2'; -import useCurrencies from './useCurrencies'; - -/** - * @name useDisableFiatCurrencies - * @description A custom React hook that returns a boolean to disable fiat currencies based on the account status and the current account currency. - * @returns {boolean} - The boolean to disable fiat currencies. - */ -const useDisableFiatCurrencies = () => { - const { data: activeDerivTradingAccount } = useActiveTradingAccount(); - const { data: accountStatus, isSuccess: isAccountStatusSuccess } = useAccountStatus(); - const { data: cfdAccountsList } = useCFDAccountsList(); - const { currentAccountCurrencyConfig, addedFiatCurrency } = useCurrencies(); - const { data: statements } = useQuery('statement', { - options: { - enabled: isAccountStatusSuccess, - }, - }); - // NOTE: redesign the logic to make it more readable and maintainable - // Disable fiat currencies if the current account currency is not fiat or if the account is deposit attempt - const disableFiatCurrencies = useMemo( - () => - // if the current account currency is not fiat - (!!addedFiatCurrency && currentAccountCurrencyConfig?.type !== 'fiat') || - // if there is balance in the account and the current account currency is fiat - (!!activeDerivTradingAccount?.balance && currentAccountCurrencyConfig?.type === 'fiat') || - // if the account is deposit attempt and the current account currency is fiat - (currentAccountCurrencyConfig?.type === 'fiat' && - accountStatus?.is_deposit_attempt && - !!cfdAccountsList?.dxtrade && // if there is no dxtrade account - !!cfdAccountsList.mt5 && // if there is no mt5 account - !!statements?.statement?.count && // if there are transactions in the account - !!statements.statement?.transactions?.length), - [ - accountStatus?.is_deposit_attempt, - activeDerivTradingAccount?.balance, - addedFiatCurrency, - cfdAccountsList?.dxtrade, - cfdAccountsList?.mt5, - currentAccountCurrencyConfig?.type, - statements?.statement?.count, - statements?.statement?.transactions, - ] - ); - - return disableFiatCurrencies; -}; - -export default useDisableFiatCurrencies; diff --git a/packages/tradershub/src/hooks/useDxtradeAccountHandler.ts b/packages/tradershub/src/hooks/useDxtradeAccountHandler.ts deleted file mode 100644 index 15d3bca39f6a..000000000000 --- a/packages/tradershub/src/hooks/useDxtradeAccountHandler.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { useAccountStatus, useActiveTradingAccount, useCreateOtherCFDAccount } from '@deriv/api-v2'; -import { MarketType, PlatformDetails } from '../features/cfd/constants'; - -const useDxtradeAccountHandler = () => { - const { data: activeTrading } = useActiveTradingAccount(); - const { data: getAccountStatus, isSuccess: accountStatusSuccess } = useAccountStatus(); - const { - error: createDxtradeAccountError, - isLoading: createDxtradeAccountLoading, - isSuccess: createOtherCFDAccountSuccess, - mutate: createDxtradeAccount, - status, - } = useCreateOtherCFDAccount(); - - const accountType = activeTrading?.is_virtual ? 'demo' : 'real'; - const dxtradePlatform = PlatformDetails.dxtrade.platform; - const isDxtradePasswordNotSet = getAccountStatus?.is_dxtrade_password_not_set; - - const handleSubmit = (password: string) => { - return createDxtradeAccount({ - payload: { - account_type: accountType, - market_type: MarketType.ALL, - password, - platform: dxtradePlatform, - }, - }); - }; - - return { - accountStatusSuccess, - createDxtradeAccountError, - createDxtradeAccountLoading, - createOtherCFDAccountSuccess, - handleSubmit, - isDxtradePasswordNotSet, - status, - }; -}; - -export default useDxtradeAccountHandler; diff --git a/packages/tradershub/src/hooks/useMT5AccountHandler.ts b/packages/tradershub/src/hooks/useMT5AccountHandler.ts deleted file mode 100644 index 11f349fe3b96..000000000000 --- a/packages/tradershub/src/hooks/useMT5AccountHandler.ts +++ /dev/null @@ -1,91 +0,0 @@ -import { useCFDContext } from '@/providers'; -import { - useAccountStatus, - useActiveTradingAccount, - useAvailableMT5Accounts, - useCreateMT5Account, - useSettings, - useTradingPlatformPasswordChange, -} from '@deriv/api-v2'; -import { Category, CFDPlatforms, MarketType } from '../features/cfd/constants'; -import { Jurisdiction } from '../features/cfd/screens/CFDCompareAccounts/constants'; - -const useMT5AccountHandler = () => { - const { data: accountStatus, status } = useAccountStatus(); - const { - error: isCreateMT5AccountError, - isLoading: createMT5AccountLoading, - isSuccess: isCreateMT5AccountSuccess, - status: createMT5AccountStatus, - mutate: createMT5Account, - } = useCreateMT5Account(); - const { isLoading: tradingPlatformPasswordChangeLoading, mutateAsync: tradingPasswordChange } = - useTradingPlatformPasswordChange(); - const { data: activeTrading } = useActiveTradingAccount(); - const { data: settings } = useSettings(); - const { data: availableMT5Accounts } = useAvailableMT5Accounts(); - const { cfdState } = useCFDContext(); - - const { marketType: marketTypeState, selectedJurisdiction } = cfdState; - const marketType = marketTypeState ?? MarketType.ALL; - const isMT5PasswordNotSet = accountStatus?.is_mt5_password_not_set; - - const accountType = marketType === MarketType.SYNTHETIC ? 'gaming' : marketType; - const categoryAccountType = activeTrading?.is_virtual ? Category.DEMO : accountType; - - const doesNotMeetPasswordPolicy = - isCreateMT5AccountError?.error?.code === 'InvalidTradingPlatformPasswordFormat' || - isCreateMT5AccountError?.error?.code === 'IncorrectMT5PasswordFormat'; - - // in order to create account, we need to set a password through trading_platform_password_change endpoint first - // then only mt5_create_account can be called, otherwise it will response an error for password required - const handleSubmit = async (password: string) => { - if (isMT5PasswordNotSet) { - await tradingPasswordChange({ - new_password: password, - platform: CFDPlatforms.MT5, - }); - } - - await createPassword(password); - }; - - const createPassword = (password: string) => - createMT5Account({ - payload: { - account_type: categoryAccountType, - company: selectedJurisdiction, - country: settings?.country_code ?? '', - email: settings?.email ?? '', - leverage: availableMT5Accounts?.find(acc => acc.market_type === marketType)?.leverage ?? 500, - mainPassword: password, - ...(marketType === MarketType.FINANCIAL && { mt5_account_type: MarketType.FINANCIAL }), - ...(selectedJurisdiction && - (selectedJurisdiction !== Jurisdiction.LABUAN - ? { - ...(marketType === MarketType.FINANCIAL && { - mt5_account_type: MarketType.FINANCIAL, - }), - } - : { - account_type: MarketType.FINANCIAL, - mt5_account_type: 'financial_stp', - })), - ...(marketType === MarketType.ALL && { sub_account_category: 'swap_free' }), - name: settings?.first_name ?? '', - }, - }); - - return { - createMT5AccountLoading, - doesNotMeetPasswordPolicy, - handleSubmit, - isCreateMT5AccountError, - isCreateMT5AccountSuccess, - status, - createMT5AccountStatus, - tradingPlatformPasswordChangeLoading, - }; -}; - -export default useMT5AccountHandler; diff --git a/packages/tradershub/src/hooks/useNewCRRealAccount.ts b/packages/tradershub/src/hooks/useNewCRRealAccount.ts deleted file mode 100644 index 115c5c4f6a80..000000000000 --- a/packages/tradershub/src/hooks/useNewCRRealAccount.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { useCallback, useEffect } from 'react'; -import { useRealAccountCreationContext } from '@/providers/RealAccountCreationProvider'; -import { useAuthorize, useCreateNewRealAccount, useSettings } from '@deriv/api-v2'; -import useSyncLocalStorageClientAccounts from './useSyncLocalStorageClientAccounts'; - -/** - * @name useNewCRRealAccount - * @description A custom hook that creates a new real CR account. - * @returns {Object} Submit handler function, the new real CR account data and the status of the request. - */ -const useNewCRRealAccount = () => { - const { setIsWizardOpen, state, setIsSuccessModalOpen } = useRealAccountCreationContext(); - - const { data: newTradingAccountData, mutate: createAccount, status, ...rest } = useCreateNewRealAccount(); - const { data: settingsData } = useSettings(); - - const { addTradingAccountToLocalStorage } = useSyncLocalStorageClientAccounts(); - const { switchAccount } = useAuthorize(); - - useEffect(() => { - if (status === 'success') { - // fail-safe for typescript as the data type is also undefined - if (!newTradingAccountData) return; - - addTradingAccountToLocalStorage(newTradingAccountData); - switchAccount(newTradingAccountData?.client_id); - setIsWizardOpen(false); - setIsSuccessModalOpen(true); - } - // trigger validation error on status change when validation modal is created - }, [ - addTradingAccountToLocalStorage, - newTradingAccountData, - setIsSuccessModalOpen, - setIsWizardOpen, - status, - switchAccount, - ]); - - /** - * @name handleSubmit - * @description A function that handles the form submission and calls the mutation. - */ - const mutate = useCallback(() => { - createAccount({ - payload: { - residence: settingsData.country_code ?? '', - first_name: state.firstName, - last_name: state.lastName, - currency: state.currency, - address_line_1: state.firstLineAddress, - address_line_2: state.secondLineAddress, - address_city: state.townCity, - address_state: state.stateProvince, - address_postcode: state.zipCode, - phone: state.phoneNumber, - place_of_birth: state.placeOfBirth, - date_of_birth: state.dateOfBirth, - // @ts-expect-error type mismatch between the state and the API - account_opening_reason: state.accountOpeningReason, - ...(state.taxIdentificationNumber - ? { tax_identification_number: state.taxIdentificationNumber, tax_residence: state.taxResidence } - : {}), - }, - }); - }, [createAccount, settingsData.country_code, state]); - - return { - mutate, - data: newTradingAccountData, - status, - ...rest, - }; -}; - -export default useNewCRRealAccount; diff --git a/packages/tradershub/src/hooks/usePlatformAssets.ts b/packages/tradershub/src/hooks/usePlatformAssets.ts deleted file mode 100644 index be56add93983..000000000000 --- a/packages/tradershub/src/hooks/usePlatformAssets.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { useEffect } from 'react'; -import { useExchangeRates, useTradingAccountsList } from '@deriv/api-v2'; -import { BrokerCodes, Regulation } from '../constants/constants'; - -/** - * @description This hook is used to get the total demo and real balance of the user - * @param regulation - Regulation of the user - */ -const usePlatformAssets = (regulation?: string) => { - const { - data: tradingAccount, - fiat_account: firstFiatCurrency, - isSuccess: isTradingAccountSuccess, - } = useTradingAccountsList(); - const { data, getExchangeRate, subscribe: multiSubscribe, unsubscribe } = useExchangeRates(); - - const isEURegulation = regulation === Regulation.EU; - - const fiatCurrency = isEURegulation - ? tradingAccount?.find(account => account.broker === BrokerCodes.MF)?.currency - : firstFiatCurrency; - - const demoAccount = tradingAccount?.find(account => account.is_virtual); - const realAccounts = tradingAccount?.filter(account => !account.is_virtual); - - const regionRealAccounts = realAccounts?.filter(account => { - if (isEURegulation) { - return account.broker === BrokerCodes.MF; - } - - return account.broker === BrokerCodes.CR; - }); - - useEffect(() => { - if (isTradingAccountSuccess && fiatCurrency !== undefined) { - multiSubscribe({ - base_currency: fiatCurrency, - target_currencies: realAccounts?.map(account => account.currency ?? 'USD') ?? [], - }); - } - }, [data, fiatCurrency, isTradingAccountSuccess, multiSubscribe, realAccounts, unsubscribe]); - - const totalRealPlatformBalance = - regionRealAccounts?.reduce((total, account) => { - const exchangeRate = getExchangeRate(fiatCurrency ?? 'USD', account.currency ?? 'USD'); - return total + (account.balance ?? 0) / exchangeRate; - }, 0) ?? 0; - - const demoAccountBalance = demoAccount?.balance ?? 0; - - return { - demoAccountBalance, - fiatCurrency, - isSuccess: isTradingAccountSuccess, - realAccounts, - totalRealPlatformBalance, - }; -}; - -export default usePlatformAssets; diff --git a/packages/tradershub/src/hooks/useQueryParams.ts b/packages/tradershub/src/hooks/useQueryParams.ts deleted file mode 100644 index ab55d3651630..000000000000 --- a/packages/tradershub/src/hooks/useQueryParams.ts +++ /dev/null @@ -1,81 +0,0 @@ -import { useCallback, useEffect, useMemo } from 'react'; -import { useHistory, useLocation } from 'react-router-dom'; - -type ModalId = - | 'AccountSelector' - | 'AddOrManageAccount' - | 'ChangePassword' - | 'CTraderSuccessModal' - | 'DummyComponentModal' - | 'DxtradePasswordModal' - | 'DxtradeSuccessModal' - | 'GetADerivAccountDialog' - | 'JurisdictionModal' - | 'MT5AccountTypeModal' - | 'MT5ChangePasswordModal' - | 'MT5PasswordModal' - | 'MT5SuccessModal' - | 'RealAccountCreation' - | 'RegulationModal' - | 'SentEmailContentModal' - | 'Signup' - | 'TopUpModal' - | 'TradeModal' - | 'VerificationFailedModal'; - -/** - * @description A hook to manage query params for modals - * @returns isOpen: (modalId: ModalId) => boolean - * @returns openModal: (modalId: string) => void - * @returns closeModal: () => void - * @returns queryParams: URLSearchParams - * @example - * const { isOpen, openModal, closeModal, queryParams } = useQueryParams(); - * const isModalOpen = isOpen('GetADerivAccountDialog'); - * openModal('GetADerivAccountDialog'); - * closeModal(); - */ -const useQueryParams = () => { - const { search } = useLocation(); - const history = useHistory(); - - const queryParams = useMemo(() => new URLSearchParams(search), [search]); - - const isModalOpen = useCallback((modalId: ModalId) => queryParams.get('modal') === modalId, [queryParams]); - - const openModal = useCallback( - (modalId: string) => { - queryParams.set('modal', modalId); - history.push({ - pathname: history.location.pathname, - search: queryParams.toString(), - state: { modal: modalId }, - }); - }, - [queryParams, history] - ); - - const closeModal = useCallback(() => { - queryParams.delete('modal'); - history.push({ - pathname: history.location.pathname, - search: queryParams.toString(), - }); - }, [queryParams, history]); - - useEffect(() => { - if (history.action === 'POP') { - closeModal(); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return { - isModalOpen, - openModal, - closeModal, - queryParams, - }; -}; - -export default useQueryParams; diff --git a/packages/tradershub/src/hooks/useRegulationFlags.ts b/packages/tradershub/src/hooks/useRegulationFlags.ts deleted file mode 100644 index d0e38fc15b28..000000000000 --- a/packages/tradershub/src/hooks/useRegulationFlags.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { useMemo } from 'react'; -import { Regulation } from '@/constants'; -import { useUIContext } from '@/providers'; -import { useActiveTradingAccount, useIsEuRegion, useLandingCompany, useTradingAccountsList } from '@deriv/api-v2'; - -/** - * @description A custom hook that returns regulation flags based on the regulation passed in - * @param regulation 'EU' | 'Non-EU' - * @returns { isDemo: boolean, isEU: boolean, isEUReal: boolean, isNonEU: boolean, isNonEUReal: boolean } - */ -const useRegulationFlags = () => { - const { uiState } = useUIContext(); - const { accountType, regulation } = uiState; - const { isEUCountry } = useIsEuRegion(); - const { data: activeTradingAccount, isSuccess: activeTradingAccountSuccess } = useActiveTradingAccount(); - const { data: tradingAccountsList, isSuccess: tradingAccountListSuccess } = useTradingAccountsList(); - const { data: landingCompany, isSuccess: landingCompanySuccess } = useLandingCompany(); - - return useMemo(() => { - const isHighRisk = - landingCompany?.financial_company?.shortcode === 'svg' && - landingCompany?.gaming_company?.shortcode === 'svg'; - - const isEURegulation = regulation === Regulation.EU; - const isNonEURegulation = regulation === Regulation.NonEU; - - const isEU = isEUCountry || isEURegulation; - const isNonEU = isHighRisk || isNonEURegulation; - - const isRealAccount = !activeTradingAccount?.is_virtual || accountType === 'real'; - - const isEURealAccount = isEU && isRealAccount; - const isNonEURealAccount = isNonEU && isRealAccount; - - const noRealCRNonEUAccount = - isNonEU && !tradingAccountsList?.find(account => account.broker === 'CR') && isRealAccount; - - const noRealMFEUAccount = - isEU && !tradingAccountsList?.find(account => account.broker === 'MF') && isRealAccount; - - const hasActiveDerivAccount = !(noRealCRNonEUAccount || noRealMFEUAccount); - - const isSuccess = activeTradingAccountSuccess && tradingAccountListSuccess && landingCompanySuccess; - - return { - hasActiveDerivAccount, - isEU, - isEURealAccount, - isHighRisk, - isNonEU, - isNonEURealAccount, - isSuccess, - noRealCRNonEUAccount, - noRealMFEUAccount, - }; - }, [ - landingCompany?.financial_company?.shortcode, - landingCompany?.gaming_company?.shortcode, - regulation, - isEUCountry, - activeTradingAccount?.is_virtual, - accountType, - tradingAccountsList, - activeTradingAccountSuccess, - tradingAccountListSuccess, - landingCompanySuccess, - ]); -}; - -export default useRegulationFlags; diff --git a/packages/tradershub/src/hooks/useRegulationSwitcher.ts b/packages/tradershub/src/hooks/useRegulationSwitcher.ts deleted file mode 100644 index 8e142b23b55b..000000000000 --- a/packages/tradershub/src/hooks/useRegulationSwitcher.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { useEffect } from 'react'; -import { Regulation } from '@/constants'; -import { useUIContext } from '@/providers'; -import { useActiveTradingAccount, useAuthorize, useTradingAccountsList } from '@deriv/api-v2'; -import useRegulationFlags from './useRegulationFlags'; - -/** - * @description This hook contains the logic that is used to switch between EU and non-EU accounts - * @returns {buttons: {label: string}[], handleButtonClick: (label: string) => void} - * @example - * const { buttons, handleButtonClick } = useRegulationSwitcher(); - */ -const useRegulationSwitcher = () => { - const { switchAccount } = useAuthorize(); - const { data: tradingAccountsList } = useTradingAccountsList(); - const { setUIState, uiState } = useUIContext(); - const currentRegulation = uiState.regulation; - const { isEU, isHighRisk } = useRegulationFlags(); - - const realCRAccount = tradingAccountsList?.find(account => account.loginid.startsWith('CR'))?.loginid ?? ''; - const realMFAccount = tradingAccountsList?.find(account => account.loginid.startsWith('MF'))?.loginid ?? ''; - - const { data: activeTrading } = useActiveTradingAccount(); - - const buttons = [{ label: Regulation.NonEU }, { label: Regulation.EU }]; - - const handleButtonClick = (label: string) => { - if (label !== currentRegulation) { - if (label === Regulation.NonEU) { - setUIState({ - regulation: Regulation.NonEU, - }); - if (realCRAccount) { - switchAccount(realCRAccount); - } - } else { - setUIState({ - regulation: Regulation.EU, - }); - if (realMFAccount) { - switchAccount(realMFAccount); - } - } - } - }; - - useEffect(() => { - if (activeTrading?.loginid.startsWith('CR') || isHighRisk) { - setUIState({ - regulation: Regulation.NonEU, - }); - } else if (activeTrading?.loginid.startsWith('MF') || isEU) { - setUIState({ - regulation: Regulation.EU, - }); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return { - // Contains the array of buttons to be rendered in the switcher E.g. [{label: 'EU'}, {label: 'Non-EU'}] - buttons, - // Contains the function to be called when a button is clicked and to update the state E.g. (label: string) => void - handleButtonClick, - }; -}; - -export default useRegulationSwitcher; diff --git a/packages/tradershub/src/hooks/useSendEmailHandler.ts b/packages/tradershub/src/hooks/useSendEmailHandler.ts deleted file mode 100644 index a81e890b5510..000000000000 --- a/packages/tradershub/src/hooks/useSendEmailHandler.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { useCFDContext } from '@/providers'; -import { platformPasswordResetRedirectLink } from '@/utils'; -import { useActiveTradingAccount, useSettings, useVerifyEmail } from '@deriv/api-v2'; -import { CFDPlatforms } from '../features/cfd/constants'; - -const useHandleSendEmail = () => { - const { cfdState } = useCFDContext(); - const { data } = useSettings(); - const { mutate } = useVerifyEmail(); - const { data: activeTrading } = useActiveTradingAccount(); - const { platform = CFDPlatforms.MT5 } = cfdState; - - const handleSendEmail = async () => { - if (data.email) { - await mutate({ - type: - platform === CFDPlatforms.DXTRADE - ? 'trading_platform_dxtrade_password_reset' - : 'trading_platform_mt5_password_reset', - url_parameters: { - redirect_to: platformPasswordResetRedirectLink(platform, activeTrading?.is_virtual), - }, - verify_email: data.email, - }); - } - }; - - return { - handleSendEmail, - }; -}; - -export default useHandleSendEmail; diff --git a/packages/tradershub/src/hooks/useSyncLocalStorageClientAccounts.ts b/packages/tradershub/src/hooks/useSyncLocalStorageClientAccounts.ts deleted file mode 100644 index 4997b68502e1..000000000000 --- a/packages/tradershub/src/hooks/useSyncLocalStorageClientAccounts.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { useCallback } from 'react'; -import { useLocalStorage, useReadLocalStorage } from 'usehooks-ts'; -import { getAccountsFromLocalStorage } from '@/utils'; -import { useActiveTradingAccount, useCreateNewRealAccount, useSettings } from '@deriv/api-v2'; - -type TNewTradingAccount = NonNullable['data']>; - -/** - * @name useSyncLocalStorageClientAccounts - * @description A custom hook that syncs the client accounts to the local storage - * @returns { addTradingAccountToLocalStorage: (newAccount: TNewTradingAccount) => void } - */ -const useSyncLocalStorageClientAccounts = () => { - const { data: activeTradingAccount } = useActiveTradingAccount(); - const { data: settingsData } = useSettings(); - const [, setLocalStorageClientAccounts] = useLocalStorage( - 'client.accounts', - useReadLocalStorage('client.accounts') ?? {} - ); - - const addTradingAccountToLocalStorage = useCallback( - (newAccount: TNewTradingAccount) => { - if (newAccount && activeTradingAccount) { - const dataToStore = { - accepted_bch: 0, - account_category: activeTradingAccount.account_category, - account_type: activeTradingAccount.account_type, - balance: 0, - created_at: activeTradingAccount.created_at, - currency: newAccount.currency, - email: settingsData.email, - excluded_until: activeTradingAccount.excluded_until, - is_disabled: Number(activeTradingAccount.is_disabled), - is_virtual: Number(activeTradingAccount.is_virtual), - landing_company_name: newAccount.landing_company_shortcode, - landing_company_shortcode: newAccount.landing_company_shortcode, - residence: settingsData.citizen ?? settingsData.country_code, - session_start: new Date().valueOf() / 1000, - token: newAccount.oauth_token, - }; - - const clientAccounts = getAccountsFromLocalStorage() ?? {}; - const localStorageData = { - ...clientAccounts, - [newAccount.client_id]: dataToStore, - [activeTradingAccount.loginid]: { - ...clientAccounts[activeTradingAccount.loginid], - linked_to: [{ loginid: newAccount.client_id, platform: 'dtrade' }], - }, - }; - setLocalStorageClientAccounts(localStorageData); - } - }, - [activeTradingAccount, setLocalStorageClientAccounts, settingsData] - ); - - return { addTradingAccountToLocalStorage }; -}; - -export default useSyncLocalStorageClientAccounts; diff --git a/packages/tradershub/src/hooks/useTotalAssets.ts b/packages/tradershub/src/hooks/useTotalAssets.ts deleted file mode 100644 index db17c348d127..000000000000 --- a/packages/tradershub/src/hooks/useTotalAssets.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { displayMoney } from '@/helpers'; -import { useUIContext } from '@/providers'; -import { useActiveTradingAccount, useAuthorize } from '@deriv/api-v2'; -import useCFDAssets from './useCFDAssets'; -import usePlatformAssets from './usePlatformAssets'; - -/** - * @description Get total balance of cfd and platform accounts - * @returns data - Total balance of all cfd and platform accounts - */ -const useTotalAssets = () => { - const { uiState } = useUIContext(); - const { regulation } = uiState; - const { data: activeTradingAccount } = useActiveTradingAccount(); - const { data: authorizeData, isSuccess: isAuthorizeSuccess } = useAuthorize(); - const { - demoAccountBalance, - fiatCurrency, - isSuccess: isPlatformSuccess, - realAccounts, - totalRealPlatformBalance, - } = usePlatformAssets(regulation); - const { calculatedDemoBalance, calculatedRealBalance, isSuccess: isCFDSuccess } = useCFDAssets(regulation); - - const demoTotalBalance = demoAccountBalance + calculatedDemoBalance; - - const realTotalBalance = totalRealPlatformBalance + calculatedRealBalance; - - const totalBalance = activeTradingAccount?.is_virtual ? demoTotalBalance : realTotalBalance; - - const formattedTotalBalance = displayMoney(totalBalance, fiatCurrency ?? 'USD', { - fractional_digits: 2, - preferred_language: authorizeData?.preferred_language, - }); - - return { - //Returns the total balance of all accounts - data: formattedTotalBalance, - //Returns true if all the requests are successful - isSuccess: isPlatformSuccess && isCFDSuccess && isAuthorizeSuccess, - realAccounts, - }; -}; - -export default useTotalAssets; diff --git a/packages/tradershub/src/index.scss b/packages/tradershub/src/index.scss deleted file mode 100644 index b5c61c956711..000000000000 --- a/packages/tradershub/src/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; diff --git a/packages/tradershub/src/index.tsx b/packages/tradershub/src/index.tsx deleted file mode 100644 index 6059a464f987..000000000000 --- a/packages/tradershub/src/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { makeLazyLoader, moduleLoader } from './utils/loader'; - -const LazyApp = makeLazyLoader( - () => moduleLoader(() => import(/* webpackChunkName: "tradershub", webpackPreload: true */ './App')), - () =>
-)(); - -export default LazyApp; diff --git a/packages/tradershub/src/modals/AccountOpeningSuccessModal/AccountOpeningSuccessModal.tsx b/packages/tradershub/src/modals/AccountOpeningSuccessModal/AccountOpeningSuccessModal.tsx deleted file mode 100644 index 36a5fae632ec..000000000000 --- a/packages/tradershub/src/modals/AccountOpeningSuccessModal/AccountOpeningSuccessModal.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React from 'react'; -import ReactModal from 'react-modal'; -import { useHistory } from 'react-router-dom'; -import Checkmark from '@/assets/svgs/checkmark.svg'; -import { ActionScreen, ButtonGroup, IconComponent } from '@/components'; -import { CUSTOM_STYLES } from '@/helpers'; -import { useQueryParams } from '@/hooks'; -import { useRealAccountCreationContext } from '@/providers'; -import { Button, Text, useDevice } from '@deriv-com/ui'; - -const SelectedCurrencyIcon = () => { - const { state } = useRealAccountCreationContext(); - return ( -
- - -
- ); -}; - -const AccountOpeningSuccessModal = () => { - const { isSuccessModalOpen, reset } = useRealAccountCreationContext(); - const { isDesktop } = useDevice(); - const { state } = useRealAccountCreationContext(); - const history = useHistory(); - const { closeModal } = useQueryParams(); - - const handleNavigateToDeposit = () => { - reset(); - closeModal(); - history.push('/cashier/deposit'); - }; - - return ( - - - - You have added a {state.currency} account. - - - Make a deposit now to start trading. - -
- } - icon={} - renderButtons={() => ( - - - - - )} - title='Your account is ready' - /> - - ); -}; - -export default AccountOpeningSuccessModal; diff --git a/packages/tradershub/src/modals/AccountOpeningSuccessModal/index.ts b/packages/tradershub/src/modals/AccountOpeningSuccessModal/index.ts deleted file mode 100644 index 43f6fa58415e..000000000000 --- a/packages/tradershub/src/modals/AccountOpeningSuccessModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as AccountOpeningSuccessModal } from './AccountOpeningSuccessModal'; diff --git a/packages/tradershub/src/modals/AccountSelector/AccountSelector.tsx b/packages/tradershub/src/modals/AccountSelector/AccountSelector.tsx deleted file mode 100644 index f3f537958e7a..000000000000 --- a/packages/tradershub/src/modals/AccountSelector/AccountSelector.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import { TradingAccountsList } from '@/components'; -import { useQueryParams } from '@/hooks'; -import { Button, Modal, Text } from '@deriv-com/ui'; - -const AccountSelector = () => { - const { isModalOpen, openModal, closeModal } = useQueryParams(); - return ( - - - Select an account - - - - - - - - - ); -}; - -export default AccountSelector; diff --git a/packages/tradershub/src/modals/AccountSelector/index.ts b/packages/tradershub/src/modals/AccountSelector/index.ts deleted file mode 100644 index c0196f8e206b..000000000000 --- a/packages/tradershub/src/modals/AccountSelector/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as AccountSelector } from './AccountSelector'; diff --git a/packages/tradershub/src/modals/AddOrManageAccount/AddOrManageAccount.tsx b/packages/tradershub/src/modals/AddOrManageAccount/AddOrManageAccount.tsx deleted file mode 100644 index 52cbabc8cb14..000000000000 --- a/packages/tradershub/src/modals/AddOrManageAccount/AddOrManageAccount.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import React, { Fragment, memo, useEffect, useState } from 'react'; -import ReactModal from 'react-modal'; -import { twMerge } from 'tailwind-merge'; -import { CUSTOM_STYLES } from '@/helpers'; -import { useCurrencies, useDisableFiatCurrencies, useQueryParams, useRegulationFlags } from '@/hooks'; -import { StandaloneXmarkBoldIcon } from '@deriv/quill-icons'; -import { Tab, Tabs, Text } from '@deriv-com/ui'; -import CurrenciesForm from './CurrenciesForm'; - -const TabTypes = { - 0: 'CRYPTO', - 1: 'FIAT', -} as const; - -/** - * @name AddOrManageAccount - * @description The AddOrManageAccount component is used to display the Add or manage account modal. - * @param {boolean} props.isOpen - The isOpen prop is a boolean that determines if the modal is open. - * @param {VoidFunction} props.onClose - The onClose prop is a function that closes the modal. - * @returns {React.ReactNode} - */ -const AddOrManageAccount = () => { - const { data: currencies, isLoading, allCryptoCurrenciesAreAdded, addedFiatCurrency } = useCurrencies(); - const disableFiatCurrencies = useDisableFiatCurrencies(); - const [activeTab, setActiveTab] = useState<'CRYPTO' | 'FIAT'>(TabTypes[0]); - - const { isModalOpen, closeModal } = useQueryParams(); - - const { isEU } = useRegulationFlags(); - - useEffect(() => { - if (isEU) { - setActiveTab(TabTypes[1]); - } - }, [isEU]); - - if (isLoading) return null; - - const handleClose = () => { - setActiveTab(TabTypes[0]); - closeModal(); - }; - - return ( - -
-
- - {isEU ? 'Manage account' : 'Add or manage account'} - - -
- {!isEU && ( - setActiveTab(TabTypes[idx as keyof typeof TabTypes])} - variant='secondary' - wrapperClassName='flex justify-center' - > - - - - )} - {activeTab === TabTypes[0] && ( - -
- - Choose your preferred cryptocurrency - - - You can open an account for each cryptocurrency. - -
- - - )} - {activeTab === TabTypes[1] && ( - -
- - Change your currency - - - Choose the currency you would like to trade with. - -
- - - )} -
- - ); -}; - -export default memo(AddOrManageAccount); diff --git a/packages/tradershub/src/modals/AddOrManageAccount/CurrenciesForm.tsx b/packages/tradershub/src/modals/AddOrManageAccount/CurrenciesForm.tsx deleted file mode 100644 index 3b0802d81bf5..000000000000 --- a/packages/tradershub/src/modals/AddOrManageAccount/CurrenciesForm.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import React, { memo, useCallback } from 'react'; -import { Form, Formik } from 'formik'; -import { twMerge } from 'tailwind-merge'; -import { CurrencyTypes } from '@/constants'; -import { useAddNewCurrencyAccount, useQueryParams } from '@/hooks'; -import { TCurrencyConfig } from '@/hooks/useCurrencies'; -import CurrencyCard from '@/screens/CurrencySelector/CurrencyCard'; -import { useActiveTradingAccount, useAuthorize, useMutation } from '@deriv/api-v2'; -import { Button, InlineMessage, Text, useDevice } from '@deriv-com/ui'; - -type TCurrencyTypes = keyof typeof CurrencyTypes; - -type TCurrenciesForm = { - addedFiatCurrency?: TCurrencyConfig; - allCryptoCurrenciesAreAdded?: boolean; - currencies: TCurrencyConfig[]; - disableFiatCurrencies?: boolean; - isSubmitButtonDisabled?: boolean; - submitButtonLabel?: string; - type?: TCurrencyTypes; -}; - -/** - * @name CurrenciesForm - * @description The CurrenciesForm component is used to display the currencies form. - * @param {TCurrenciesForm} props - The props of the component. - * @param {TCurrencyConfig[]} props.currencies - The currencies to display. - * @param {boolean} props.isSubmitButtonDisabled - The isSubmitButtonDisabled prop is a boolean that determines if the submit button is disabled. - * @param {boolean} props.allCryptoCurrenciesAreAdded - The allCryptoCurrenciesAreAdded prop is a boolean that determines if all the cryptocurrencies are added. - * @param {boolean} props.isFiatCurrencyAdded - The isFiatCurrencyAdded prop is a boolean that determines if the fiat currency is added. - * @param {string} props.submitButtonLabel - The label for the submit button. - * @param {TCurrencyTypes} props.type - The type of the currency. - * @returns {React.ReactNode} - */ -const CurrenciesForm = ({ - currencies, - submitButtonLabel, - isSubmitButtonDisabled = false, - allCryptoCurrenciesAreAdded = false, - addedFiatCurrency, - disableFiatCurrencies, - type, -}: TCurrenciesForm) => { - const { isDesktop } = useDevice(); - const { switchAccount, data } = useAuthorize(); - const { data: activeDerivTradingAccount } = useActiveTradingAccount(); - const { mutateAsync: mutateAccountCurrencyAsync } = useMutation('set_account_currency'); - const { mutateAsync: mutateAddAccountAsync } = useAddNewCurrencyAccount(); - const { closeModal } = useQueryParams(); - - const initialValues = { - currency: '', - }; - - const handleAddAccount = useCallback( - async (values: typeof initialValues) => { - await mutateAddAccountAsync(values.currency); - closeModal(); - }, - [closeModal, mutateAddAccountAsync] - ); - - const handleSwitchCurrency = useCallback( - async (values: typeof initialValues) => { - await mutateAccountCurrencyAsync({ payload: { set_account_currency: values.currency } }); - switchAccount(data.loginid ?? '', true); - closeModal(); - }, - [closeModal, data.loginid, mutateAccountCurrencyAsync, switchAccount] - ); - - return ( - - values.currency && !isSubmitButtonDisabled ? {} : { currency: 'Please select a currency' } - } - > - {({ values, isSubmitting }) => ( -
-
- {allCryptoCurrenciesAreAdded && ( - - - You already have an account for each of the cryptocurrencies available on Deriv. - - - )} - {disableFiatCurrencies && ( - - - {activeDerivTradingAccount?.balance - ? `If you want to change your account currency, please contact us via live chat.` - : `Please switch to your ${addedFiatCurrency?.id} account to change currencies.`} - - - )} - {currencies.map(currency => ( - - ))} -
-
- -
-
- )} - - ); -}; - -export default memo(CurrenciesForm); diff --git a/packages/tradershub/src/modals/AddOrManageAccount/index.ts b/packages/tradershub/src/modals/AddOrManageAccount/index.ts deleted file mode 100644 index b7e7dc55af20..000000000000 --- a/packages/tradershub/src/modals/AddOrManageAccount/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as AddOrManageAccount } from './AddOrManageAccount'; diff --git a/packages/tradershub/src/modals/DummyComponentModal/DummyComponentModal.tsx b/packages/tradershub/src/modals/DummyComponentModal/DummyComponentModal.tsx deleted file mode 100644 index 534cad6dc8c2..000000000000 --- a/packages/tradershub/src/modals/DummyComponentModal/DummyComponentModal.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { DummyComponent } from '@/features/cfd/components'; -import { useQueryParams } from '@/hooks'; -import { Modal } from '@deriv-com/ui'; - -const DummyComponentModal = () => { - const { isModalOpen, closeModal } = useQueryParams(); - - return ( - - - - - - ); -}; - -export default DummyComponentModal; diff --git a/packages/tradershub/src/modals/DummyComponentModal/index.ts b/packages/tradershub/src/modals/DummyComponentModal/index.ts deleted file mode 100644 index 41a51a292107..000000000000 --- a/packages/tradershub/src/modals/DummyComponentModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as DummyComponentModal } from './DummyComponentModal'; diff --git a/packages/tradershub/src/modals/DxtradeSuccessModal/DxtradeSuccessModal.tsx b/packages/tradershub/src/modals/DxtradeSuccessModal/DxtradeSuccessModal.tsx deleted file mode 100644 index 76f7bada1cd0..000000000000 --- a/packages/tradershub/src/modals/DxtradeSuccessModal/DxtradeSuccessModal.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import DxtradeSuccess from '@/features/cfd/modals/DxtradePasswordModal/DxtradeSuccess'; -import { useQueryParams } from '@/hooks'; -import { Modal } from '@deriv-com/ui'; - -const MT5SuccessModal = () => { - const { isModalOpen, closeModal } = useQueryParams(); - return ( - - - - - - ); -}; - -export default MT5SuccessModal; diff --git a/packages/tradershub/src/modals/DxtradeSuccessModal/index.ts b/packages/tradershub/src/modals/DxtradeSuccessModal/index.ts deleted file mode 100644 index 36fd8752d863..000000000000 --- a/packages/tradershub/src/modals/DxtradeSuccessModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as DxtradeSuccessModal } from './DxtradeSuccessModal'; diff --git a/packages/tradershub/src/modals/ExitConfirmationDialog/ExitConfirmationDialog.tsx b/packages/tradershub/src/modals/ExitConfirmationDialog/ExitConfirmationDialog.tsx deleted file mode 100644 index 072b45087226..000000000000 --- a/packages/tradershub/src/modals/ExitConfirmationDialog/ExitConfirmationDialog.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import ReactModal from 'react-modal'; -import { CUSTOM_STYLES } from '@/helpers'; -import { useQueryParams } from '@/hooks'; -import { useRealAccountCreationContext } from '@/providers'; -import { Button, Text } from '@deriv-com/ui'; - -const ExitConfirmationDialog = ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) => { - const { reset } = useRealAccountCreationContext(); - const { closeModal } = useQueryParams(); - - const handleClose = () => { - onClose(); - closeModal(); - reset(); - }; - - return ( - -
- - Stop creating an account? - - - If you hit Yes, the info you entered will be lost. - -
- - -
-
- - ); -}; - -export default ExitConfirmationDialog; diff --git a/packages/tradershub/src/modals/ExitConfirmationDialog/index.ts b/packages/tradershub/src/modals/ExitConfirmationDialog/index.ts deleted file mode 100644 index 92da84656c18..000000000000 --- a/packages/tradershub/src/modals/ExitConfirmationDialog/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ExitConfirmationDialog } from './ExitConfirmationDialog'; diff --git a/packages/tradershub/src/modals/MT5ChangePasswordModal/MT5ChangePasswordModal.tsx b/packages/tradershub/src/modals/MT5ChangePasswordModal/MT5ChangePasswordModal.tsx deleted file mode 100644 index 8c3428f7e172..000000000000 --- a/packages/tradershub/src/modals/MT5ChangePasswordModal/MT5ChangePasswordModal.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import MT5ChangePassword from '@/features/cfd/modals/MT5PasswordModal/MT5ChangePassword'; -import { useQueryParams } from '@/hooks'; -import { Modal, Text } from '@deriv-com/ui'; - -const MT5ChangePasswordModal = () => { - const { isModalOpen, closeModal } = useQueryParams(); - return ( - - - Deriv MT5 latest password requirements - - - - ); -}; - -export default MT5ChangePasswordModal; diff --git a/packages/tradershub/src/modals/MT5ChangePasswordModal/index.ts b/packages/tradershub/src/modals/MT5ChangePasswordModal/index.ts deleted file mode 100644 index 777beaafd523..000000000000 --- a/packages/tradershub/src/modals/MT5ChangePasswordModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as MT5ChangePasswordModal } from './MT5ChangePasswordModal'; diff --git a/packages/tradershub/src/modals/MT5SuccessModal/MT5SuccessModal.tsx b/packages/tradershub/src/modals/MT5SuccessModal/MT5SuccessModal.tsx deleted file mode 100644 index 986374e5c969..000000000000 --- a/packages/tradershub/src/modals/MT5SuccessModal/MT5SuccessModal.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import MT5Success from '@/features/cfd/modals/MT5PasswordModal/MT5Success'; -import { useQueryParams } from '@/hooks'; -import { Modal } from '@deriv-com/ui'; - -const MT5SuccessModal = () => { - const { isModalOpen, closeModal } = useQueryParams(); - return ( - - - - - - ); -}; - -export default MT5SuccessModal; diff --git a/packages/tradershub/src/modals/MT5SuccessModal/index.ts b/packages/tradershub/src/modals/MT5SuccessModal/index.ts deleted file mode 100644 index 4d8d39a9fc2f..000000000000 --- a/packages/tradershub/src/modals/MT5SuccessModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as MT5SuccessModal } from './MT5SuccessModal'; diff --git a/packages/tradershub/src/modals/Modals.tsx b/packages/tradershub/src/modals/Modals.tsx deleted file mode 100644 index 6317523db5b3..000000000000 --- a/packages/tradershub/src/modals/Modals.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React, { Fragment } from 'react'; -import { - CTraderSuccessModal, - DxtradePasswordModal, - JurisdictionModal, - MT5AccountTypeModal, - MT5PasswordModal, - TopUpModal, - TradeModal, -} from '@/features/cfd/modals'; -import { ChangePassword } from '@/features/cfd/screens'; -import { RealAccountCreation, Signup } from '@/flows'; -import { AccountSelector } from './AccountSelector'; -import { AddOrManageAccount } from './AddOrManageAccount'; -import { DummyComponentModal } from './DummyComponentModal'; -import { DxtradeSuccessModal } from './DxtradeSuccessModal'; -import { MT5ChangePasswordModal } from './MT5ChangePasswordModal'; -import { MT5SuccessModal } from './MT5SuccessModal'; -import { RegulationModal } from './RegulationModal'; -import { SentEmailContentModal } from './SentEmailContentModal'; - -/** - * @description The place to import and export all modals - * @returns {React.ReactElement} - */ -const Modals = () => { - return ( - - {/* PLS DO NOT ADD ANY PROPS TO ANY MODALS HERE.💥 */} - - - - - - - - - - - - - - - - - - - - ); -}; - -export default Modals; diff --git a/packages/tradershub/src/modals/RegulationModal/RegulationModal.tsx b/packages/tradershub/src/modals/RegulationModal/RegulationModal.tsx deleted file mode 100644 index 51a06c56e7fd..000000000000 --- a/packages/tradershub/src/modals/RegulationModal/RegulationModal.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { RegulationTableContent } from '@/components'; -import { useQueryParams } from '@/hooks'; -import { Modal, Text } from '@deriv-com/ui'; - -const RegulationModal = () => { - const { isModalOpen, closeModal } = useQueryParams(); - return ( - - - - Non-EU and EU regulations - - - - - - - ); -}; - -export default RegulationModal; diff --git a/packages/tradershub/src/modals/RegulationModal/index.ts b/packages/tradershub/src/modals/RegulationModal/index.ts deleted file mode 100644 index ca260fc6d40a..000000000000 --- a/packages/tradershub/src/modals/RegulationModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as RegulationModal } from './RegulationModal'; diff --git a/packages/tradershub/src/modals/SentEmailContentModal/SentEmailContentModal.tsx b/packages/tradershub/src/modals/SentEmailContentModal/SentEmailContentModal.tsx deleted file mode 100644 index 641b77e9bf68..000000000000 --- a/packages/tradershub/src/modals/SentEmailContentModal/SentEmailContentModal.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { SentEmailContent } from '@/components'; -import { useQueryParams } from '@/hooks'; -import { Modal, Text } from '@deriv-com/ui'; - -const SentEmailContentModal = () => { - const { isModalOpen, closeModal } = useQueryParams(); - return ( - - - We've sent you an email - - - - - - ); -}; - -export default SentEmailContentModal; diff --git a/packages/tradershub/src/modals/SentEmailContentModal/index.ts b/packages/tradershub/src/modals/SentEmailContentModal/index.ts deleted file mode 100644 index 8309ecee2236..000000000000 --- a/packages/tradershub/src/modals/SentEmailContentModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SentEmailContentModal } from './SentEmailContentModal'; diff --git a/packages/tradershub/src/modals/index.ts b/packages/tradershub/src/modals/index.ts deleted file mode 100644 index f1430f2ae6c0..000000000000 --- a/packages/tradershub/src/modals/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export * from './AccountOpeningSuccessModal'; -export * from './AccountSelector'; -export * from './AddOrManageAccount'; -export * from './ExitConfirmationDialog'; -export { default as Modals } from './Modals'; -export * from './RegulationModal'; diff --git a/packages/tradershub/src/providers/CFDProvider/CFDProvider.tsx b/packages/tradershub/src/providers/CFDProvider/CFDProvider.tsx deleted file mode 100644 index 8b769a66edcd..000000000000 --- a/packages/tradershub/src/providers/CFDProvider/CFDProvider.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React, { createContext, PropsWithChildren, useCallback, useContext, useMemo, useState } from 'react'; -import { THooks, TMarketTypes, TPlatforms } from '@/types'; - -type TCFDState = { - // Add your CFD states here - account?: THooks.CtraderAccountsList | THooks.DxtradeAccountsList | THooks.MT5AccountsList; - accountId?: string; - description?: string; - isInvestorPassword?: boolean; - marketType?: TMarketTypes.All; - platform?: TPlatforms.All; - selectedJurisdiction?: THooks.AvailableMT5Accounts['shortcode']; -}; - -type TCFDContext = { - cfdState: TCFDState; - setCfdState: (newState: TCFDState) => void; -}; - -const CFDContext = createContext(null); - -export const useCFDContext = () => { - const context = useContext(CFDContext); - - if (!context) { - throw new Error('useCFDContext must be used within a CFDProvider. Please import Provider from CFDProvider'); - } - - return context; -}; - -export const CFDProvider = ({ children }: PropsWithChildren) => { - const [cfdState, setCfdState] = useState({}); - - const updateCFDState = useCallback((newState: TCFDState) => { - setCfdState(prevState => ({ ...prevState, ...newState })); - }, []); - - const providerValue = useMemo( - () => ({ - setCfdState: updateCFDState, - cfdState, - }), - [cfdState, updateCFDState] - ); - - return {children}; -}; diff --git a/packages/tradershub/src/providers/CFDProvider/index.ts b/packages/tradershub/src/providers/CFDProvider/index.ts deleted file mode 100644 index 6e966de89827..000000000000 --- a/packages/tradershub/src/providers/CFDProvider/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { CFDProvider, useCFDContext } from './CFDProvider'; diff --git a/packages/tradershub/src/providers/RealAccountCreationProvider/RealAccountCreationContext.tsx b/packages/tradershub/src/providers/RealAccountCreationProvider/RealAccountCreationContext.tsx deleted file mode 100644 index eb678a187c32..000000000000 --- a/packages/tradershub/src/providers/RealAccountCreationProvider/RealAccountCreationContext.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import React, { createContext, useCallback, useContext, useMemo, useReducer, useState } from 'react'; -import { useStep } from 'usehooks-ts'; -import { Helpers, TRealAccountCreationContext, TRealAccountCreationProvider } from './types'; -import { valuesReducer } from './ValuesReducer'; - -export const ACTION_TYPES = { - RESET: 'RESET', - SET_ADDRESS: 'SET_ADDRESS', - SET_CURRENCY: 'SET_CURRENCY', - SET_PERSONAL_DETAILS: 'SET_PERSONAL_DETAILS', -} as const; - -const initialHelpers: Helpers = { - canGoToNextStep: false, - canGoToPrevStep: false, - goToNextStep: /* noop */ () => { - /* noop */ - }, - goToPrevStep: /* noop */ () => { - /* noop */ - }, - reset: /* noop */ () => { - /* noop */ - }, - setStep: /* noop */ (() => { - /* noop */ - }) as React.Dispatch>, -}; - -export const RealAccountCreationContext = createContext({ - currentStep: 0, - dispatch: /* noop */ () => { - /* noop */ - }, - helpers: initialHelpers, - isSuccessModalOpen: false, - isWizardOpen: false, - setIsSuccessModalOpen: /* noop */ () => { - /* noop */ - }, - setIsWizardOpen: /* noop */ () => { - /* noop */ - }, - setTotalSteps: /* noop */ () => { - /* noop */ - }, - state: { - currency: '', - }, - reset: /* noop */ () => { - /* noop */ - }, - totalSteps: 0, -}); - -export const useRealAccountCreationContext = () => { - const context = useContext(RealAccountCreationContext); - if (!context) - throw new Error( - 'useRealAccountCreationContext() must be called within a component wrapped in RealAccountCreationProvider.' - ); - - return context; -}; - -/** - * @name RealAccountCreationProvider - * @description The RealAccountCreationProvider component is used to wrap the components that need access to the RealAccountCreationContext. - * @param {React.ReactNode} children - The content to be wrapped. - */ -export const RealAccountCreationProvider = ({ children }: TRealAccountCreationProvider) => { - const [isWizardOpen, setIsWizardOpen] = useState(false); - const [isSuccessModalOpen, setIsSuccessModalOpen] = useState(false); - const [totalSteps, setTotalSteps] = useState(0); - const [currentStep, helpers] = useStep(totalSteps); - const [state, dispatch] = useReducer(valuesReducer, { - currency: '', - }); - - const reset = useCallback(() => { - dispatch({ - type: ACTION_TYPES.RESET, - }); - setIsSuccessModalOpen(false); - setIsWizardOpen(false); - helpers.setStep(1); - }, [helpers]); - - const contextState: TRealAccountCreationContext = useMemo( - () => ({ - currentStep, - dispatch, - helpers, - isSuccessModalOpen, - isWizardOpen, - setIsSuccessModalOpen, - setIsWizardOpen, - state, - reset, - setTotalSteps, - totalSteps, - }), - [currentStep, helpers, isSuccessModalOpen, isWizardOpen, reset, state, totalSteps] - ); - - return {children}; -}; diff --git a/packages/tradershub/src/providers/RealAccountCreationProvider/ValuesReducer.ts b/packages/tradershub/src/providers/RealAccountCreationProvider/ValuesReducer.ts deleted file mode 100644 index 4da80af3e158..000000000000 --- a/packages/tradershub/src/providers/RealAccountCreationProvider/ValuesReducer.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { ACTION_TYPES } from './RealAccountCreationContext'; -import { TActions, TState } from './types'; - -export function valuesReducer(state: TState, action: TActions) { - if (action.type === ACTION_TYPES.RESET) return { currency: '' }; - - const { payload, type } = action; - switch (type) { - case ACTION_TYPES.SET_CURRENCY: - return { - ...state, - currency: payload.currency, - }; - case ACTION_TYPES.SET_PERSONAL_DETAILS: - return { - ...state, - ...payload, - }; - case ACTION_TYPES.SET_ADDRESS: - return { - ...state, - ...payload, - }; - default: - return state; - } -} diff --git a/packages/tradershub/src/providers/RealAccountCreationProvider/index.ts b/packages/tradershub/src/providers/RealAccountCreationProvider/index.ts deleted file mode 100644 index ab18f8c41767..000000000000 --- a/packages/tradershub/src/providers/RealAccountCreationProvider/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './RealAccountCreationContext'; -export * from './types'; diff --git a/packages/tradershub/src/providers/RealAccountCreationProvider/types.ts b/packages/tradershub/src/providers/RealAccountCreationProvider/types.ts deleted file mode 100644 index b66362f12c2b..000000000000 --- a/packages/tradershub/src/providers/RealAccountCreationProvider/types.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { useStep } from 'usehooks-ts'; -import { ACTION_TYPES } from './RealAccountCreationContext'; - -export type Helpers = ReturnType[1]; - -export type TRealAccountCreationContext = { - currentStep: number; - dispatch: React.Dispatch; - helpers: Helpers; - isSuccessModalOpen: boolean; - isWizardOpen: boolean; - reset: VoidFunction; - setIsSuccessModalOpen: React.Dispatch>; - setIsWizardOpen: React.Dispatch>; - setTotalSteps: React.Dispatch>; - state: TState; - totalSteps: number; -}; - -export type TState = { - accountOpeningReason?: string; - currency?: string; - dateOfBirth?: string; - detailsConfirmation?: boolean; - firstLineAddress?: string; - firstName?: string; - lastName?: string; - phoneNumber?: string; - placeOfBirth?: string; - secondLineAddress?: string; - stateProvince?: string; - taxIdentificationNumber?: string; - taxInfoConfirmation?: boolean; - taxResidence?: string; - townCity?: string; - zipCode?: string; -}; - -export type TRealAccountCreationProvider = { - children: React.ReactNode; -}; - -export type TActions = - | { - payload: TState; - type: Exclude; - } - | { - type: typeof ACTION_TYPES.RESET; - }; diff --git a/packages/tradershub/src/providers/UIProvider/UIProvider.tsx b/packages/tradershub/src/providers/UIProvider/UIProvider.tsx deleted file mode 100644 index 85aecf468b7b..000000000000 --- a/packages/tradershub/src/providers/UIProvider/UIProvider.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React, { createContext, useCallback, useContext, useMemo, useState } from 'react'; - -type TUIState = { - // Add other UI states here - accountType?: string; - isSignupWizardOpen?: boolean; - regulation?: string; -}; - -type TUIContext = { - setUIState: (newState: TUIState) => void; - uiState: TUIState; -}; - -const UIContext = createContext(null); - -export const useUIContext = () => { - const context = useContext(UIContext); - - if (!context) { - throw new Error('useUIContext must be used within a UIProvider'); - } - - return context; -}; - -export const UIProvider = ({ children }: { children: React.ReactNode }) => { - const [uiState, setUIState] = useState({}); - - const updateUIState = useCallback((newState: TUIState) => { - setUIState(prevState => ({ ...prevState, ...newState })); - }, []); - - const providerValue = useMemo(() => ({ setUIState: updateUIState, uiState }), [uiState, updateUIState]); - - return {children}; -}; diff --git a/packages/tradershub/src/providers/UIProvider/index.ts b/packages/tradershub/src/providers/UIProvider/index.ts deleted file mode 100644 index 2bc35608fb6a..000000000000 --- a/packages/tradershub/src/providers/UIProvider/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { UIProvider, useUIContext } from './UIProvider'; diff --git a/packages/tradershub/src/providers/index.ts b/packages/tradershub/src/providers/index.ts deleted file mode 100644 index 55a54e8fa64f..000000000000 --- a/packages/tradershub/src/providers/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './CFDProvider'; -export * from './RealAccountCreationProvider'; -export * from './UIProvider'; diff --git a/packages/tradershub/src/routes/Router.tsx b/packages/tradershub/src/routes/Router.tsx deleted file mode 100644 index 2e07535b8bb8..000000000000 --- a/packages/tradershub/src/routes/Router.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { Redirect, Route, Switch } from 'react-router-dom'; -import { TradersHub } from '@/components'; -import { CompareAccountsScreen } from '@cfd/screens'; - -const prefix = '/traders-hub'; - -type TRoutes = `${typeof prefix}${'' | '/compare-accounts' | '/onboarding'}`; - -declare module 'react-router-dom' { - export function useHistory(): { - action: 'POP' | 'PUSH' | 'REPLACE'; - location: { pathname: string; search: string }; - push: (path: string | { pathname: string; search: string; state?: Record }) => void; - }; - export function useRouteMatch(path: TRoutes): boolean; -} - -const Router = () => { - return ( - - - - } /> - - ); -}; - -export default Router; diff --git a/packages/tradershub/src/routes/TradersHubRoute/TradersHubRoute.tsx b/packages/tradershub/src/routes/TradersHubRoute/TradersHubRoute.tsx deleted file mode 100644 index 043da5418616..000000000000 --- a/packages/tradershub/src/routes/TradersHubRoute/TradersHubRoute.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import { - AppContainer, - RegulationSwitcherDesktop, - RegulationSwitcherMobile, - TotalAssets, - TradersHubDesktopContent, - TradersHubHeader, - TradersHubMobileContent, -} from '@/components'; -import { useRegulationFlags } from '@/hooks'; -import { useUIContext } from '@/providers'; -import { useIsDIELEnabled } from '@deriv/api-v2'; -import { useDevice } from '@deriv-com/ui'; - -const TradersHubRoute = () => { - const { isDesktop } = useDevice(); - const { data: isDIEL } = useIsDIELEnabled(); - const { uiState } = useUIContext(); - const { accountType } = uiState; - const isReal = accountType === 'real'; - const isDemo = accountType === 'demo'; - const { hasActiveDerivAccount } = useRegulationFlags(); - - const isSwitcherVisible = isDIEL && isReal; - const isTotalAssetsVisible = hasActiveDerivAccount || isDemo; - - return ( - -
- - {isSwitcherVisible && (isDesktop ? : )} - {isTotalAssetsVisible && } -
- {!isDesktop ? : } - - ); -}; - -export default TradersHubRoute; diff --git a/packages/tradershub/src/routes/TradersHubRoute/index.ts b/packages/tradershub/src/routes/TradersHubRoute/index.ts deleted file mode 100644 index a11a99a5d615..000000000000 --- a/packages/tradershub/src/routes/TradersHubRoute/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TradersHubRoute } from './TradersHubRoute'; diff --git a/packages/tradershub/src/routes/index.ts b/packages/tradershub/src/routes/index.ts deleted file mode 100644 index b3fcc3402bac..000000000000 --- a/packages/tradershub/src/routes/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as Router } from './Router'; -export * from './TradersHubRoute'; diff --git a/packages/tradershub/src/screens/Address/Address.tsx b/packages/tradershub/src/screens/Address/Address.tsx deleted file mode 100644 index b0a2ac07b466..000000000000 --- a/packages/tradershub/src/screens/Address/Address.tsx +++ /dev/null @@ -1,140 +0,0 @@ -import React from 'react'; -import { Form, Formik, FormikValues } from 'formik'; -import { WizardScreenActions, WizardScreenWrapper } from '@/flows'; -import { ScrollToFieldError } from '@/helpers'; -import { address } from '@/utils'; -import { useSettings, useStatesList } from '@deriv/api-v2'; -import { LabelPairedChevronDownMdRegularIcon } from '@deriv/quill-icons'; -import { Dropdown, Input, Text, useDevice } from '@deriv-com/ui'; -import { - ACTION_TYPES, - useRealAccountCreationContext, -} from '../../providers/RealAccountCreationProvider/RealAccountCreationContext'; - -/** - * @name Address - * @description The Address component is used to display the address screen. - * @example
- * @returns {React.ReactNode} - */ -const Address = () => { - const { data: getSettings } = useSettings(); - const country = getSettings?.country_code ?? ''; - const { data: statesList } = useStatesList(country); - const { dispatch, helpers, state } = useRealAccountCreationContext(); - const { isDesktop } = useDevice(); - - const handleSubmit = (values: FormikValues) => { - dispatch({ - payload: { - firstLineAddress: values.firstLineAddress, - secondLineAddress: values.secondLineAddress, - stateProvince: values.stateProvince, - townCity: values.townCity, - zipCode: values.zipCode, - }, - type: ACTION_TYPES.SET_ADDRESS, - }); - helpers.goToNextStep(); - }; - - const initialValues = { - firstLineAddress: getSettings?.address_line_1 ?? state.firstLineAddress ?? '', - secondLineAddress: getSettings?.address_line_2 ?? state.secondLineAddress ?? '', - stateProvince: getSettings?.address_state ?? state.stateProvince ?? '', - townCity: getSettings?.address_city ?? state.townCity ?? '', - zipCode: getSettings?.address_postcode ?? state.zipCode ?? '', - }; - - return ( - - - {({ errors, handleBlur, handleChange, setFieldValue, touched, values }) => ( -
- -
-
- - Only use an address for which you have proof of residence - - - - a recent utility bill (e.g. electricity, water, gas, landline or internet), bank - statement, or government-issued letter with your name and this address. - -
-
- - - -
- } - label='State/Province' - list={statesList} - name='stateProvince' - onSelect={selectedItem => { - setFieldValue('stateProvince', selectedItem); - }} - value={values.stateProvince} - variant='comboBox' - /> -
- -
-
- - - )} -
- - ); -}; - -export default Address; diff --git a/packages/tradershub/src/screens/Address/index.ts b/packages/tradershub/src/screens/Address/index.ts deleted file mode 100644 index 58ab27bf8824..000000000000 --- a/packages/tradershub/src/screens/Address/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Address from './Address'; - -export default Address; diff --git a/packages/tradershub/src/screens/CurrencySelector/Currencies.tsx b/packages/tradershub/src/screens/CurrencySelector/Currencies.tsx deleted file mode 100644 index 2b51026fef6c..000000000000 --- a/packages/tradershub/src/screens/CurrencySelector/Currencies.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import { twMerge } from 'tailwind-merge'; -import { CurrencyTypes } from '@/constants'; -import { TCurrencyConfig } from '@/hooks/useCurrencies'; -import { InlineMessage, Text } from '@deriv-com/ui'; -import CurrencyCard from './CurrencyCard'; - -type TCurrencies = { - list: TCurrencyConfig[]; - type: keyof typeof CurrencyTypes; -}; - -/** - * @name Currencies - * @description The Currencies component is used to display the currencies in the currency selector screen. - * @param {string} type - The type of the currency. - * @param {TCurrencyConfig[]} list - The list of the currency. - * @returns {React.ReactNode} - * @example - * @example - */ -const Currencies = ({ type, list: currencies = [] }: TCurrencies) => { - return ( -
- - {type === CurrencyTypes.CRYPTO ? 'Cryptocurrencies' : 'Fiat Currencies'} - - {type === CurrencyTypes.FIAT && ( - - Please note that you can only have 1 fiat account. - - )} -
- {currencies?.map(currency => ( - - ))} -
-
- ); -}; - -export default Currencies; diff --git a/packages/tradershub/src/screens/CurrencySelector/CurrencyCard.tsx b/packages/tradershub/src/screens/CurrencySelector/CurrencyCard.tsx deleted file mode 100644 index 5052178a5a65..000000000000 --- a/packages/tradershub/src/screens/CurrencySelector/CurrencyCard.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import { useFormikContext } from 'formik'; -import { twMerge } from 'tailwind-merge'; -import { IconComponent } from '@/components'; -import { StandaloneCircleInfoRegularIcon as CircleInfoIcon } from '@deriv/quill-icons'; -import { Text } from '@deriv-com/ui'; - -type TCurrencyCard = { - className?: string; - id: string; - info?: boolean; - isDisabled?: boolean; - title: string; - wrapperClassName?: string; -}; - -/** - * @name CurrencyCard - * @description The CurrencyCard component is used to display the currency card in the currency selector screen. - * @param {string} id - The id of the currency. - * @param {boolean} info - The flag to display an info for a specific currency. - * @param {string} title - The title of the currency. - * @param {string} wrapperClassName - The class name for the wrapper. - * @param {string} className - The class name for the currency card. - * @returns {React.ReactNode} - * @example - */ -const CurrencyCard = ({ id, info, title, wrapperClassName = '', className = '', isDisabled }: TCurrencyCard) => { - const { setFieldValue, values } = useFormikContext<{ currency: string }>(); - const isSelected = values.currency === id; - return ( -
- -
- ); -}; - -export default CurrencyCard; diff --git a/packages/tradershub/src/screens/CurrencySelector/CurrencySelector.tsx b/packages/tradershub/src/screens/CurrencySelector/CurrencySelector.tsx deleted file mode 100644 index 4c60a0b30c5c..000000000000 --- a/packages/tradershub/src/screens/CurrencySelector/CurrencySelector.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React, { Fragment } from 'react'; -import { Form, Formik, FormikValues } from 'formik'; -import { CurrencyTypes } from '@/constants'; -import { WizardScreenActions, WizardScreenWrapper } from '@/flows'; -import { useRegulationFlags } from '@/hooks'; -import useCurrencies from '@/hooks/useCurrencies'; -import { ACTION_TYPES, useRealAccountCreationContext } from '@/providers'; -import { Divider, Loader } from '@deriv-com/ui'; -import Currencies from './Currencies'; - -/** - * @name CurrencySelector - * @description The CurrencySelector component is used to display the currency selector screen. - * @returns {React.ReactNode} - */ -const CurrencySelector = () => { - const { dispatch, helpers, state } = useRealAccountCreationContext(); - const { data: currencies, isLoading } = useCurrencies(); - const { isEU } = useRegulationFlags(); - - const handleSubmit = (values: FormikValues) => { - dispatch({ payload: { currency: values.currency }, type: ACTION_TYPES.SET_CURRENCY }); - helpers.goToNextStep(); - }; - - return ( - - - {({ values }) => ( -
-
- {/** temporarily setting a loader here until a proper design, needs to be here for center alignment */} - {isLoading && } - - {/** currencies as a type guard for typescript */} - {currencies && ( - - - {!isEU && ( // Crypto currencies are not available for EU clients - - - - - )} - - )} -
- - - )} -
- - ); -}; - -export default CurrencySelector; diff --git a/packages/tradershub/src/screens/CurrencySelector/index.ts b/packages/tradershub/src/screens/CurrencySelector/index.ts deleted file mode 100644 index 611603ad0084..000000000000 --- a/packages/tradershub/src/screens/CurrencySelector/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import CurrencySelector from './CurrencySelector'; - -export default CurrencySelector; diff --git a/packages/tradershub/src/screens/FinancialAssessment/FinancialAssessment.tsx b/packages/tradershub/src/screens/FinancialAssessment/FinancialAssessment.tsx deleted file mode 100644 index 8df8bd7ab0f3..000000000000 --- a/packages/tradershub/src/screens/FinancialAssessment/FinancialAssessment.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import { Form, Formik } from 'formik'; -import { WizardScreenActions, WizardScreenWrapper } from '@/flows'; -import { useRealAccountCreationContext } from '@/providers'; - -/** - * @name FinancialAssessment - * @description The FinancialAssessment component is used to display the financial assessment screen. - * @returns {React.ReactNode} - */ -const FinancialAssessment = () => { - const { helpers } = useRealAccountCreationContext(); - - const handleSubmit = () => { - helpers.goToNextStep(); - }; - - return ( - - - {() => ( -
-
Financial assessment form
- - - )} -
- - ); -}; - -export default FinancialAssessment; diff --git a/packages/tradershub/src/screens/FinancialAssessment/index.ts b/packages/tradershub/src/screens/FinancialAssessment/index.ts deleted file mode 100644 index 7125fd76397a..000000000000 --- a/packages/tradershub/src/screens/FinancialAssessment/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import FinancialAssessment from './FinancialAssessment'; - -export default FinancialAssessment; diff --git a/packages/tradershub/src/screens/PersonalDetails/PersonalDetails.tsx b/packages/tradershub/src/screens/PersonalDetails/PersonalDetails.tsx deleted file mode 100644 index c389b83a5be0..000000000000 --- a/packages/tradershub/src/screens/PersonalDetails/PersonalDetails.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import React from 'react'; -import { Form, Formik, FormikValues } from 'formik'; -import { WizardScreenActions, WizardScreenWrapper } from '@/flows'; -import { ScrollToFieldError } from '@/helpers'; -import { ACTION_TYPES, useRealAccountCreationContext } from '@/providers'; -import { personalDetails } from '@/utils'; -import { Text } from '@deriv-com/ui'; -import AdditionalInformation from './Sections/AdditionalInformation'; -import Details from './Sections/Details'; - -/** - * @name PersonalDetails - * @description The PersonalDetails component is used to display the personal details screen. - * @example - * @returns {React.ReactNode} - */ -const PersonalDetails = () => { - const { dispatch, helpers, state } = useRealAccountCreationContext(); - - const handleSubmit = (values: FormikValues) => { - dispatch({ payload: { ...values }, type: ACTION_TYPES.SET_PERSONAL_DETAILS }); - helpers.goToNextStep(); - }; - - const initialValues = { - firstName: state.firstName ?? '', - lastName: state.lastName ?? '', - dateOfBirth: state.dateOfBirth ?? '', - detailsConfirmation: state.detailsConfirmation ?? false, - phoneNumber: state.phoneNumber ?? '', - placeOfBirth: state.placeOfBirth ?? '', - taxResidence: state.taxResidence ?? '', - taxIdentificationNumber: state.taxIdentificationNumber ?? '', - accountOpeningReason: state.accountOpeningReason ?? '', - taxInfoConfirmation: state.taxInfoConfirmation ?? false, - }; - return ( - - - {() => ( -
- -
- - Any information you provide is confidential and will be used for verification purposes - only. - -
- -
- - - )} -
- - ); -}; - -export default PersonalDetails; diff --git a/packages/tradershub/src/screens/PersonalDetails/Sections/AdditionalInformation.tsx b/packages/tradershub/src/screens/PersonalDetails/Sections/AdditionalInformation.tsx deleted file mode 100644 index e9c9181f7eba..000000000000 --- a/packages/tradershub/src/screens/PersonalDetails/Sections/AdditionalInformation.tsx +++ /dev/null @@ -1,132 +0,0 @@ -import React from 'react'; -import { useFormikContext } from 'formik'; -import { useResidenceList } from '@deriv/api-v2'; -import { LabelPairedChevronDownMdRegularIcon, StandaloneCircleInfoRegularIcon } from '@deriv/quill-icons'; -import { Divider, Dropdown, Input, Text } from '@deriv-com/ui'; -import TaxInfoConfirmation from './TaxInfoConfirmation'; - -const AccountOpeningReasonList = [ - { - text: 'Hedging', - value: 'Hedging', - }, - { - text: 'Income Earning', - value: 'Income Earning', - }, - { - text: 'Speculative', - value: 'Speculative', - }, - { - text: 'Peer-to-peer exchange', - value: 'Peer-to-peer exchange', - }, -]; - -const AdditionalInformation = () => { - const { errors, handleBlur, handleChange, setFieldValue, touched, values } = useFormikContext<{ - accountOpeningReason: string; - dateOfBirth: string; - phoneNumber: string; - placeOfBirth: string; - taxIdentificationNumber: string; - taxResidence: string; - }>(); - const { data: residenceList } = useResidenceList(); - - // need UI fixes for the below Dropdowns from deriv-ui - - return ( -
-
- - Additional information - - -
-
- - } - errorMessage={touched.placeOfBirth && errors.placeOfBirth} - label='Place of birth*' - list={residenceList.map(residence => ({ - text: residence.text, - value: residence.value ?? '', - }))} - listHeight='sm' - name='placeOfBirth' - onSelect={selectedItem => { - setFieldValue('placeOfBirth', selectedItem); - }} - value={values.placeOfBirth} - variant='comboBox' - /> -
- } - errorMessage={touched.taxResidence && errors.taxResidence} - label='Tax residence' - list={residenceList.map(residence => ({ - text: residence.text, - value: residence.value ?? '', - }))} - listHeight='sm' - name='taxResidence' - onSelect={selectedItem => { - setFieldValue('taxResidence', selectedItem); - }} - value={values.taxResidence} - variant='prompt' - /> -
- -
-
-
- -
- -
-
- } - errorMessage={touched.accountOpeningReason && errors.accountOpeningReason} - label='Account opening reason*' - list={AccountOpeningReasonList} - listHeight='sm' - name='accountOpeningReason' - onSelect={selectedItem => { - setFieldValue('accountOpeningReason', selectedItem); - }} - value={values.accountOpeningReason} - variant='comboBox' - /> - {values.taxIdentificationNumber && values.taxResidence && } -
-
- ); -}; - -export default AdditionalInformation; diff --git a/packages/tradershub/src/screens/PersonalDetails/Sections/Details.tsx b/packages/tradershub/src/screens/PersonalDetails/Sections/Details.tsx deleted file mode 100644 index 9b522801208d..000000000000 --- a/packages/tradershub/src/screens/PersonalDetails/Sections/Details.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import React, { Fragment, lazy, Suspense } from 'react'; -import { useFormikContext } from 'formik'; -import { Divider, InlineMessage, Input, Loader, Text } from '@deriv-com/ui'; -import DetailsConfirmation from './DetailsConfirmation'; - -const ExampleImage = lazy(() => import('@/assets/svgs/personal-details-example.svg')); - -const Details = () => { - const { errors, handleBlur, handleChange, touched, values } = useFormikContext<{ - dateOfBirth: string; - detailsConfirmation: boolean; - firstName: string; - lastName: string; - }>(); - - return ( - -
- - Details - - -
-
- - - To avoid delays, enter your name and{' '} - date of birth exactly as they appear on your identity - document. - - -
-
- - - {/** Add date picker when available from deriv/ui */} - -
-
- - Example: - - }> - - -
-
-
- -
-
- - ); -}; - -export default Details; diff --git a/packages/tradershub/src/screens/PersonalDetails/Sections/DetailsConfirmation.tsx b/packages/tradershub/src/screens/PersonalDetails/Sections/DetailsConfirmation.tsx deleted file mode 100644 index 47cd38659e64..000000000000 --- a/packages/tradershub/src/screens/PersonalDetails/Sections/DetailsConfirmation.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import { Field, FieldProps, useFormikContext } from 'formik'; -import { Checkbox } from '@deriv-com/ui'; - -const DetailsConfirmation = () => { - const { errors, values } = useFormikContext<{ - dateOfBirth: string; - detailsConfirmation: boolean; - firstName: string; - lastName: string; - }>(); - - const isDisabled = Boolean( - !values.firstName || - !values.lastName || - !values.dateOfBirth || - errors.firstName || - errors.lastName || - errors.dateOfBirth - ); - - return ( - - {({ field, meta }: FieldProps) => ( - - )} - - ); -}; - -export default DetailsConfirmation; diff --git a/packages/tradershub/src/screens/PersonalDetails/Sections/TaxInfoConfirmation.tsx b/packages/tradershub/src/screens/PersonalDetails/Sections/TaxInfoConfirmation.tsx deleted file mode 100644 index b8153927acaa..000000000000 --- a/packages/tradershub/src/screens/PersonalDetails/Sections/TaxInfoConfirmation.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { Field, FieldProps } from 'formik'; -import { Checkbox } from '@deriv-com/ui'; - -const TaxInfoConfirmation = () => { - return ( - - {({ field, meta }: FieldProps) => ( - - )} - - ); -}; - -export default TaxInfoConfirmation; diff --git a/packages/tradershub/src/screens/PersonalDetails/index.ts b/packages/tradershub/src/screens/PersonalDetails/index.ts deleted file mode 100644 index 6227ccf410ef..000000000000 --- a/packages/tradershub/src/screens/PersonalDetails/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import PersonalDetails from './PersonalDetails'; - -export default PersonalDetails; diff --git a/packages/tradershub/src/screens/TermsOfUse/TermsOfUse.tsx b/packages/tradershub/src/screens/TermsOfUse/TermsOfUse.tsx deleted file mode 100644 index 91a03d4e78cf..000000000000 --- a/packages/tradershub/src/screens/TermsOfUse/TermsOfUse.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react'; -import { Form, Formik, FormikHelpers, FormikValues } from 'formik'; -import { WizardScreenActions, WizardScreenWrapper } from '@/flows'; -import { ScrollToFieldError } from '@/helpers'; -import { useNewCRRealAccount } from '@/hooks'; -import { termsOfUse } from '@/utils'; -import { Divider, Text } from '@deriv-com/ui'; -import FatcaDeclaration from './TermsOfUseSections/FatcaDeclaration'; -import PEPs from './TermsOfUseSections/PEPs'; - -/** - * @name TermsOfUse - * @description The TermsOfUse component is used to display the terms and conditions before creating an account. - * @example - * @returns {React.ReactNode} - */ -const TermsOfUse = () => { - const { mutate, isLoading } = useNewCRRealAccount(); - - const initialValues = { - fatcaDeclaration: '', - pepConfirmation: false, - termsAndCondition: false, - }; - - const handleSubmit = (values: FormikValues, actions: FormikHelpers) => { - actions.setSubmitting(true); - mutate(); - actions.setSubmitting(false); - }; - - return ( - - - {({ isValid, values }) => ( -
- -
-
- - Jurisdiction and choice of law - - - Your account will be opened with Deriv (SVG) Ltd., and will be subject to the laws - of Saint Vincent and the Grenadines. - - - - Risk warning - - - The financial trading services offered on this site are only suitable for customers - who accept the possibility of losing all the money they invest and who understand - and have experience of the risk involved in the purchase of financial contracts. - Transactions in financial contracts carry a high degree of risk. If the contracts - you purchased expire as worthless, you will lose all your investment, which includes - the contract premium. - - - - - -
-
- - - )} -
- - ); -}; - -export default TermsOfUse; diff --git a/packages/tradershub/src/screens/TermsOfUse/TermsOfUseSections/FatcaDeclaration.tsx b/packages/tradershub/src/screens/TermsOfUse/TermsOfUseSections/FatcaDeclaration.tsx deleted file mode 100644 index 858dcf399940..000000000000 --- a/packages/tradershub/src/screens/TermsOfUse/TermsOfUseSections/FatcaDeclaration.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React, { Fragment } from 'react'; -import { useFormikContext } from 'formik'; -import { LabelPairedChevronDownMdRegularIcon } from '@deriv/quill-icons'; -import { Dropdown, Text } from '@deriv-com/ui'; - -const fatcaDeclaration = [ - 'US citizenship or lawful permanent resident (green card) status', - 'A US birthplace', - 'A US residence address or a US correspondence address (including a US PO box)', - 'Standing instructions to transfer funds to an account maintained in the United States, or directions regularly received from a US address', - 'An “in care of” address or a “hold mail” address that is the sole address with respect to the client', - 'A power of attorney or signatory authority granted to a person with a US address', -]; - -const FatcaDeclaration = () => { - const { errors, setFieldValue, touched, values } = useFormikContext<{ - fatcaDeclaration: string; - }>(); - return ( - - - FATCA declaration - - - {fatcaDeclaration.map((item, index) => ( -
- {index + 1}. {item} -
- ))} - - - If any of the above applies to you, select Yes. Otherwise, select{' '} - No. - -
- } - errorMessage={touched.fatcaDeclaration && errors.fatcaDeclaration} - label='Please select*' - list={[ - { text: 'Yes', value: 'yes' }, - { text: 'No', value: 'no' }, - ]} - name='fatcaDeclaration' - onSelect={selectedItem => { - setFieldValue('fatcaDeclaration', selectedItem); - }} - value={values.fatcaDeclaration} - variant='comboBox' - /> -
- - ); -}; - -export default FatcaDeclaration; diff --git a/packages/tradershub/src/screens/TermsOfUse/TermsOfUseSections/PEPConfirmation.tsx b/packages/tradershub/src/screens/TermsOfUse/TermsOfUseSections/PEPConfirmation.tsx deleted file mode 100644 index 382df0e66ada..000000000000 --- a/packages/tradershub/src/screens/TermsOfUse/TermsOfUseSections/PEPConfirmation.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React, { Fragment } from 'react'; -import { Field, FieldProps } from 'formik'; -import { Checkbox, Text } from '@deriv-com/ui'; - -const PEPConfirmation = () => ( - - - {({ field, meta }: FieldProps) => ( - - )} - - - {({ field, meta }: FieldProps) => ( - - I agree to the{' '} - - terms and conditions. - - - } - {...field} - error={Boolean(meta.touched && meta.error)} - id='termsAndCondition' - /> - )} - - -); - -export default PEPConfirmation; diff --git a/packages/tradershub/src/screens/TermsOfUse/TermsOfUseSections/PEPs.tsx b/packages/tradershub/src/screens/TermsOfUse/TermsOfUseSections/PEPs.tsx deleted file mode 100644 index 1e84af3bb757..000000000000 --- a/packages/tradershub/src/screens/TermsOfUse/TermsOfUseSections/PEPs.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React, { Fragment } from 'react'; -import { Text } from '@deriv-com/ui'; -import PEPConfirmation from './PEPConfirmation'; - -const PEPs = () => ( - - - Real accounts are not available to politically exposed persons (PEPs). - - - A politically exposed person (PEP) is someone appointed with a prominent public position. Close associates - and family members of a PEP are also considered to be PEPs. - - - -); - -export default PEPs; diff --git a/packages/tradershub/src/screens/TermsOfUse/index.ts b/packages/tradershub/src/screens/TermsOfUse/index.ts deleted file mode 100644 index c66473173f20..000000000000 --- a/packages/tradershub/src/screens/TermsOfUse/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import TermsOfUse from './TermsOfUse'; - -export default TermsOfUse; diff --git a/packages/tradershub/src/screens/TradingAssessment/TradingAssessment.tsx b/packages/tradershub/src/screens/TradingAssessment/TradingAssessment.tsx deleted file mode 100644 index eff092a58572..000000000000 --- a/packages/tradershub/src/screens/TradingAssessment/TradingAssessment.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import { Form, Formik } from 'formik'; -import { WizardScreenActions, WizardScreenWrapper } from '@/flows'; -import { useRealAccountCreationContext } from '@/providers'; - -/** - * @name TradingAssessment - * @description The TradingAssessment component is used to display the trading assessment screen. - * @returns {React.ReactNode} - */ -const TradingAssessment = () => { - const { helpers } = useRealAccountCreationContext(); - - const handleSubmit = () => { - helpers.goToNextStep(); - }; - - return ( - - - {() => ( -
-
Trading assessment form
- - - )} -
- - ); -}; - -export default TradingAssessment; diff --git a/packages/tradershub/src/screens/TradingAssessment/index.ts b/packages/tradershub/src/screens/TradingAssessment/index.ts deleted file mode 100644 index 2f10dd3815cc..000000000000 --- a/packages/tradershub/src/screens/TradingAssessment/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import TradingAssessment from './TradingAssessment'; - -export default TradingAssessment; diff --git a/packages/tradershub/src/screens/index.ts b/packages/tradershub/src/screens/index.ts deleted file mode 100644 index 9a352be80225..000000000000 --- a/packages/tradershub/src/screens/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export { default as Address } from './Address'; -export { default as CurrencySelector } from './CurrencySelector'; -export { default as FinancialAssessment } from './FinancialAssessment'; -export { default as PersonalDetails } from './PersonalDetails'; -export { default as TermsOfUse } from './TermsOfUse'; -export { default as TradingAssessment } from './TradingAssessment'; diff --git a/packages/tradershub/src/types.ts b/packages/tradershub/src/types.ts deleted file mode 100644 index 39dd6a6e1ab7..000000000000 --- a/packages/tradershub/src/types.ts +++ /dev/null @@ -1,69 +0,0 @@ -import type { - useActiveAccount, - useActiveTradingAccount, - useAllAccountsList, - useAuthentication, - useAvailableMT5Accounts, - useCreateOtherCFDAccount, - useCtraderAccountsList, - useCurrencyConfig, - useDerivAccountsList, - useDxtradeAccountsList, - useDynamicLeverage, - useGetExchangeRate, - useMT5AccountsList, - usePOA, - usePOI, - useSortedMT5Accounts, -} from '@deriv/api-v2'; - -// eslint-disable-next-line @typescript-eslint/no-namespace -export namespace THooks { - export type Authentication = NonNullable['data']>; - export type AvailableMT5Accounts = NonNullable['data']>[number]; - export type CtraderAccountsList = NonNullable['data']>[number]; - export type DxtradeAccountsList = NonNullable['data']>[number]; - export type ExchangeRate = NonNullable['data']>; - export type MT5AccountsList = NonNullable['data']>[number]; - export type SortedMT5Accounts = NonNullable['data']>[number]; - export type DerivAccountsList = NonNullable['data']>[number]; - export type ActiveTradingAccount = NonNullable['data']>; - export type ActiveAccount = NonNullable['data']>; - export type AllAccountsList = NonNullable>['data']; - export type DynamicLeverage = NonNullable['data']>; - export type POA = NonNullable['data']>; - export type POI = NonNullable['data']>; - export type CurrencyConfig = NonNullable['data']>[string]; - export type GetCurrencyConfig = NonNullable['getConfig']>; -} -// eslint-disable-next-line @typescript-eslint/no-namespace -export namespace TPlatforms { - export type All = MT5 | OtherAccounts | SortedMT5Accounts; - export type MT5 = THooks.AvailableMT5Accounts['platform']; - export type OtherAccounts = Exclude< - Parameters['mutate']>>[0]['payload']['platform'], - 'derivez' - >; - export type SortedMT5Accounts = THooks.SortedMT5Accounts['platform']; -} -// eslint-disable-next-line @typescript-eslint/no-namespace -export namespace TMarketTypes { - export type All = CreateOtherCFDAccount | SortedMT5Accounts; - export type CreateOtherCFDAccount = Parameters< - NonNullable['mutate']> - >[0]['payload']['market_type']; - export type SortedMT5Accounts = Exclude; -} - -// eslint-disable-next-line @typescript-eslint/no-namespace -export namespace TDisplayBalance { - export type CtraderAccountsList = THooks.CtraderAccountsList['display_balance']; - export type DxtradeAccountsList = THooks.DxtradeAccountsList['display_balance']; - export type MT5AccountsList = THooks.MT5AccountsList['display_balance']; - export type AccountsList = THooks.DerivAccountsList['display_balance']; - export type ActiveTradingAccount = THooks.ActiveTradingAccount['display_balance']; -} - -export type TLandingCompanyName = Extract | 'virtual'; -export type TMT5LandingCompanyName = THooks.MT5AccountsList['landing_company_short']; -export type TJurisdiction = THooks.MT5AccountsList['landing_company_short']; diff --git a/packages/tradershub/src/utils/cfd.ts b/packages/tradershub/src/utils/cfd.ts deleted file mode 100644 index 0a440781c702..000000000000 --- a/packages/tradershub/src/utils/cfd.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { PlatformDetails } from '../features/cfd/constants'; -import { TPlatforms } from '../types'; - -export const platformPasswordResetRedirectLink = (platform: TPlatforms.All, isVirtual?: boolean) => { - switch (platform) { - case PlatformDetails.mt5.platform: - return isVirtual ? 11 : 10; - case PlatformDetails.dxtrade.platform: - default: - return isVirtual ? 21 : 20; - } -}; diff --git a/packages/tradershub/src/utils/getAccountsFromLocalStorage.ts b/packages/tradershub/src/utils/getAccountsFromLocalStorage.ts deleted file mode 100644 index c02c0d5b4385..000000000000 --- a/packages/tradershub/src/utils/getAccountsFromLocalStorage.ts +++ /dev/null @@ -1,31 +0,0 @@ -/* eslint-disable camelcase */ -import type { AuthorizeResponse } from '@deriv/api-types'; - -type TLocalStorageAccount = { - accepted_bch: number; - landing_company_shortcode: string; - residence: string; - session_start: number; - token: string; -}; - -type TLocalStorageAccountsList = { - [k: string]: NonNullable['account_list']>>[number] & - TLocalStorageAccount; -}; - -/** - * Gets the current user `accounts` list from the `localStorage`. - */ -/** - * @deprecated Please use 'LocalStorageUtils.getValue' from '@deriv-com/utils' instead of this. - */ -export const getAccountsFromLocalStorage = () => { - const data = localStorage.getItem('client.accounts'); - - // If there is no accounts list, return undefined. - if (!data) return; - - // Cast parsed JSON data to infer return type - return JSON.parse(data) as TLocalStorageAccountsList; -}; diff --git a/packages/tradershub/src/utils/index.ts b/packages/tradershub/src/utils/index.ts deleted file mode 100644 index a2a05cc6e970..000000000000 --- a/packages/tradershub/src/utils/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './cfd'; -export * from './getAccountsFromLocalStorage'; -export * from './password'; -export * from './validations/validations'; diff --git a/packages/tradershub/src/utils/loader/index.ts b/packages/tradershub/src/utils/loader/index.ts deleted file mode 100644 index 7c87054bdad0..000000000000 --- a/packages/tradershub/src/utils/loader/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './lazy-load'; -export * from './module-loader'; diff --git a/packages/tradershub/src/utils/loader/lazy-load.tsx b/packages/tradershub/src/utils/loader/lazy-load.tsx deleted file mode 100644 index 09bbc0a18976..000000000000 --- a/packages/tradershub/src/utils/loader/lazy-load.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import Loadable from 'react-loadable'; - -export const makeLazyLoader = - (importFn: () => Promise, loaderFn: () => JSX.Element) => (componentName?: string) => - Loadable.Map({ - loader: { - ComponentModule: importFn, - }, - loading: loaderFn, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - render(loaded: { [key: string]: any }, props: object) { - const ComponentLazy = componentName - ? loaded.ComponentModule.default[componentName] - : loaded.ComponentModule.default; - return ; - }, - }); diff --git a/packages/tradershub/src/utils/loader/module-loader.tsx b/packages/tradershub/src/utils/loader/module-loader.tsx deleted file mode 100644 index 9daf604bfb9b..000000000000 --- a/packages/tradershub/src/utils/loader/module-loader.tsx +++ /dev/null @@ -1,16 +0,0 @@ -export const moduleLoader = (lazyComponent: () => Promise, attempts = 3, interval = 1500) => { - return new Promise((resolve, reject) => { - lazyComponent() - .then(resolve) - .catch((error: unknown) => { - // let us retry after 1500 ms - setTimeout(() => { - if (attempts === 1) { - reject(error); - return; - } - moduleLoader(lazyComponent, attempts - 1, interval).then(resolve, reject); - }, interval); - }); - }); -}; diff --git a/packages/tradershub/src/utils/password.ts b/packages/tradershub/src/utils/password.ts deleted file mode 100644 index 40183c87e0c5..000000000000 --- a/packages/tradershub/src/utils/password.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { passwordRegex } from '../constants/password'; - -export const validPassword = (value: string) => passwordRegex.isPasswordValid.test(value); diff --git a/packages/tradershub/src/utils/validations/validations.ts b/packages/tradershub/src/utils/validations/validations.ts deleted file mode 100644 index caedce0fb057..000000000000 --- a/packages/tradershub/src/utils/validations/validations.ts +++ /dev/null @@ -1,62 +0,0 @@ -import * as Yup from 'yup'; -import { passwordRegex } from '@/constants'; - -export const personalDetails = Yup.object().shape({ - accountOpeningReason: Yup.string().required('Account opening reason is required.'), - detailsConfirmation: Yup.boolean() - .required() - .oneOf([true], 'You must confirm that the name and date of birth above match your chosen identity document.'), - dateOfBirth: Yup.date().typeError('Please enter a valid date.').required('Date of birth is required.'), - firstName: Yup.string() - .required('First name is required.') - .matches(/^[a-zA-Z\s\-.'']+$/, 'Letters, spaces, periods, hyphens, apostrophes only.') - .min(2, 'You should enter 2-50 characters.') - .max(50, 'You should enter 2-50 characters.'), - lastName: Yup.string() - .required('Last Name is required.') - .matches(/^[a-zA-Z\s\-.'']+$/, 'Letters, spaces, periods, hyphens, apostrophes only.') - .min(2, 'You should enter 2-50 characters.') - .max(50, 'You should enter 2-50 characters.'), - phoneNumber: Yup.string() - .required('Phone number is required.') - .min(9, 'You should enter 9-35 numbers.') - .max(35, 'You should enter 9-35 numbers.') - .matches(/^\+?([0-9-]+\s)*[0-9-]+$/, 'Please enter a valid phone number.'), - placeOfBirth: Yup.string().required('Place of birth is required.'), - taxIdentificationNumber: Yup.string(), - taxResidence: Yup.string().when('taxIdentificationNumber', { - is: (taxIdentificationNumber: string) => !!taxIdentificationNumber, - then: Yup.string().required('Please fill in tax residence.'), - otherwise: Yup.string(), - }), - taxInfoConfirmation: Yup.boolean().when(['taxIdentificationNumber', 'taxResidence'], { - is: (taxIdentificationNumber: string, taxResidence: string) => taxIdentificationNumber && taxResidence, - then: Yup.boolean() - .required('Tax info confirmation is required.') - .oneOf( - [true], - 'You must confirm that the tax identification number and tax residence above are correct and up to date.' - ), - otherwise: Yup.boolean(), - }), -}); - -export const address = Yup.object().shape({ - firstLineAddress: Yup.string().required('First line of address is required.'), - secondLineAddress: Yup.string(), - stateProvince: Yup.string(), - townCity: Yup.string().required('Town/City is required.'), - zipCode: Yup.string().matches(/^[A-Za-z0-9][A-Za-z0-9\s-]*$/, 'Please enter a valid postal/ZIP code'), -}); - -export const termsOfUse = Yup.object().shape({ - fatcaDeclaration: Yup.string().required('FATCA declaration is required.'), - pepConfirmation: Yup.boolean().oneOf([true], 'You must confirm that you are not a PEP.'), - termsAndCondition: Yup.boolean().oneOf([true], 'You must agree to the terms and conditions.'), -}); - -export const signup = Yup.object().shape({ - citizenship: Yup.string(), - country: Yup.string(), - password: Yup.string().matches(passwordRegex?.isPasswordValid), -}); diff --git a/packages/tradershub/tailwind.config.js b/packages/tradershub/tailwind.config.js deleted file mode 100644 index 16eb1e35d318..000000000000 --- a/packages/tradershub/tailwind.config.js +++ /dev/null @@ -1,567 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -const plugin = require('tailwindcss/plugin'); - -module.exports = { - content: ['./src/**/*.{js,jsx,ts,tsx}'], - corePlugins: { - preflight: false, - }, - plugins: [ - plugin(({ addUtilities }) => { - addUtilities({ - '.backface-hidden': { - 'backface-visibility': 'hidden', - }, - '.backface-visible': { - 'backface-visibility': 'visible', - }, - '.d-none': { - display: 'none', - }, - '.unset': { - position: 'unset', - }, - }); - }), - ], - theme: { - extend: { - backfaceVisibility: { - hidden: 'hidden', - }, - borderRadius: { - none: '0', - xs: '4px', - sm: '6px', - default: '8px', - lg: '12px', - xl: '16px', - full: '50%', - }, - borderWidth: { - 0: '0', - 1: '1px', - 2: '2px', - 3: '3px', - 4: '4px', - 5: '5px', - 6: '6px', - 7: '7px', - 8: '8px', - 9: '9px', - 10: '10px', - }, - boxShadow: { - 0: '0 0 0 0', - 1: '0 -1px 2px 0 rgba(0, 0, 0, 0.06), 0 -1px 2px 0 rgba(0, 0, 0, 0.03)', - 2: '1px 0 2px 0 rgba(0, 0, 0, 0.06), 1px 0 2px 0 rgba(0, 0, 0, 0.03)', - 3: '0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.03)', - 4: '-1px 0 2px 0 rgba(0, 0, 0, 0.06), -1px 0 2px 0 rgba(0, 0, 0, 0.03)', - 5: '0 -1px 4px 0 rgba(0, 0, 0, 0.08), 0 -1px 4px 0 rgba(0, 0, 0, 0.04)', - 6: '1px 0 4px 0 rgba(0, 0, 0, 0.08), 1px 0 4px 0 rgba(0, 0, 0, 0.04)', - 7: '0 1px 4px 0 rgba(0, 0, 0, 0.08), 0 1px 4px 0 rgba(0, 0, 0, 0.04)', - 8: '-1px 0 4px 0 rgba(0, 0, 0, 0.08), -1px 0 4px 0 rgba(0, 0, 0, 0.04)', - 9: '0 -4px 8px 2px rgba(0, 0, 0, 0.03), 0 -4px 8px 2px rgba(0, 0, 0, 0.02)', - 10: '4px 0 8px 2px rgba(0, 0, 0, 0.03), 4px 0 8px 2px rgba(0, 0, 0, 0.02)', - 11: '0 4px 8px 2px rgba(0, 0, 0, 0.03), 0 4px 8px 2px rgba(0, 0, 0, 0.02)', - 12: '-4px 0 8px 2px rgba(0, 0, 0, 0.03), -4px 0 8px 2px rgba(0, 0, 0, 0.02)', - 13: '0 -8px 16px 2px rgba(0, 0, 0, 0.04), 0 -8px 16px 2px rgba(0, 0, 0, 0.02)', - 14: '8px 0 16px 2px rgba(0, 0, 0, 0.04), 8px 0 16px 2px rgba(0, 0, 0, 0.02)', - 15: '0 8px 16px 2px rgba(0, 0, 0, 0.04), 0 8px 16px 2px rgba(0, 0, 0, 0.02)', - 16: '-8px 0 16px 2px rgba(0, 0, 0, 0.04), -8px 0 16px 2px rgba(0, 0, 0, 0.02)', - 17: '0 -16px 24px 4px rgba(0, 0, 0, 0.04), 0 -16px 24px 4px rgba(0, 0, 0, 0.02)', - 18: '16px 0 24px 4px rgba(0, 0, 0, 0.04), 16px 0 24px 4px rgba(0, 0, 0, 0.02)', - 19: '0 16px 24px 4px rgba(0, 0, 0, 0.04), 0 16px 24px 4px rgba(0, 0, 0, 0.02)', - 20: '-16px 0 24px 4px rgba(0, 0, 0, 0.04), -16px 0 24px 4px rgba(0, 0, 0, 0.02)', - 21: '0 -24px 48px 8px rgba(0, 0, 0, 0.06), 0 -24px 48px 8px rgba(0, 0, 0, 0.03)', - 22: '24px 0 48px 8px rgba(0, 0, 0, 0.06), 24px 0 48px 8px rgba(0, 0, 0, 0.03)', - 23: '0 24px 48px 8px rgba(0, 0, 0, 0.06), 0 24px 48px 8px rgba(0, 0, 0, 0.03)', - 24: '-24px 0 48px 8px rgba(0, 0, 0, 0.06), -24px 0 48px 8px rgba(0, 0, 0, 0.03)', - 25: '0 -32px 64px 12px rgba(0, 0, 0, 0.08), 0 -32px 64px 12px rgba(0, 0, 0, 0.04)', - 26: '32px 0 64px 12px rgba(0, 0, 0, 0.08), 32px 0 64px 12px rgba(0, 0, 0, 0.04)', - 27: '0 32px 64px 12px rgba(0, 0, 0, 0.08), 0 32px 64px 12px rgba(0, 0, 0, 0.04)', - 28: '-32px 0 64px 12px rgba(0, 0, 0, 0.08), -32px 0 64px 12px rgba(0, 0, 0, 0.04)', - }, - colors: { - brand: { - blue: '#85acb0', - brown: { - dark: '#664407', - }, - coral: '#ff444f', - night: '#2a3052', - orange: '#ff6444', - pink: { - dark: '#3c2020', - default: '#ffc0cb', - light: '#ffe3e3', - }, - red: { - dark: '#b33037', - darker: '#661b20', - light: '#ff444f', - }, - violet: { - dark: '#4a3871', - }, - yellow: { - dark: '#b3760d', - light: '#ffa912', - }, - }, - random: { - blue: '#3f6fe5', - green: '#71bd0e', - orange: '#ff8c00', - purple: '#db69e1', - teal: '#00a8af', - }, - solid: { - red: { - 100: '#ffe6e6', - 200: '#ffbfbf', - 300: '#ff9999', - 400: '#ff7373', - 500: '#ff4d4d', - 600: '#f92e26', - 700: '#e6190e', - 800: '#db0800', - 900: '#c40000', - 1000: '#a60000', - 1100: '#880000', - 1200: '#6a0000', - 1300: '#4d0000', - }, - orange: { - 100: '#feefe7', - 200: '#fdd7c2', - 300: '#fbbf9d', - 400: '#faa778', - 500: '#f88f54', - 600: '#f7772f', - 700: '#f55f0a', - 800: '#d85409', - 900: '#bc4908', - 1000: '#9f3e07', - 1100: '#833305', - 1200: '#662804', - 1300: '#4a1d03', - }, - yellow: { - 100: '#fff7e6', - 200: '#ffeabf', - 300: '#ffdd99', - 400: '#ffce73', - 500: '#ffbe4d', - 600: '#ffae26', - 700: '#ff9c13', - 800: '#e18d00', - 900: '#c47d00', - 1000: '#a66c00', - 1100: '#885a00', - 1200: '#6a4800', - 1300: '#4d3500', - }, - mustard: { - 100: '#fef9e7', - 200: '#fdf1c2', - 300: '#fce89d', - 400: '#fbe079', - 500: '#f9d754', - 600: '#f8cf30', - 700: '#f7c60b', - 800: '#daaf0a', - 900: '#bd9808', - 1000: '#a18107', - 1100: '#846a06', - 1200: '#675305', - 1300: '#4a3b03', - }, - olive: { - 100: '#fcfbe6', - 200: '#f7f6c0', - 300: '#f3f09a', - 400: '#eeeb74', - 500: '#e9e54e', - 600: '#e5e028', - 700: '#e0da02', - 800: '#c6c102', - 900: '#aca702', - 1000: '#928e01', - 1100: '#787401', - 1200: '#5d5b01', - 1300: '#434101', - }, - green: { - 100: '#e6fae9', - 200: '#bfefc8', - 300: '#99e2a8', - 400: '#73d089', - 500: '#4dbc6b', - 600: '#26a44e', - 700: '#008832', - 800: '#00822a', - 900: '#007a22', - 1000: '#006f1b', - 1100: '#006114', - 1200: '#00500f', - 1300: '#003d0a', - }, - emerald: { - 100: '#e6fff9', - 200: '#bfffed', - 300: '#99ffdf', - 400: '#73f9cf', - 500: '#4decbc', - 600: '#26daa7', - 700: '#00c390', - 800: '#00bb86', - 900: '#00ae7a', - 1000: '#009e6d', - 1100: '#00885d', - 1200: '#006a4c', - 1300: '#004d39', - }, - tiffany: { - 100: '#e8fdf8', - 200: '#c5faef', - 300: '#a2f7e5', - 400: '#7ff3db', - 500: '#5df0d1', - 600: '#3aedc7', - 700: '#17eabd', - 800: '#14cfa7', - 900: '#12b391', - 1000: '#0f987b', - 1100: '#0c7d65', - 1200: '#0a624f', - 1300: '#074639', - }, - teal: { - 100: '#e6fafa', - 200: '#bff2f2', - 300: '#99ebeb', - 400: '#73e3e3', - 500: '#4ddbdb', - 600: '#26d4d4', - 700: '#00cccc', - 800: '#00b4b4', - 900: '#009c9c', - 1000: '#008585', - 1100: '#006d6d', - 1200: '#005555', - 1300: '#003d3d', - }, - seawater: { - 100: '#e7f6f7', - 200: '#c2e7eb', - 300: '#9dd9df', - 400: '#78cbd4', - 500: '#54bdc8', - 600: '#2faebc', - 700: '#0aa0b0', - 800: '#098d9c', - 900: '#087b87', - 1000: '#076872', - 1100: '#05555e', - 1200: '#044349', - 1300: '#033035', - }, - blue: { - 100: '#e6f5ff', - 200: '#bfe7ff', - 300: '#99d8ff', - 400: '#73c9ff', - 500: '#53b9ff', - 600: '#3daaff', - 700: '#2c9aff', - 800: '#1789e1', - 900: '#0777c4', - 1000: '#0066a6', - 1100: '#005488', - 1200: '#00426a', - 1300: '#00304d', - }, - sapphire: { - 100: '#e7eafe', - 200: '#c2c9fd', - 300: '#9ea9fc', - 400: '#7989fb', - 500: '#5569f9', - 600: '#3148f8', - 700: '#0c28f7', - 800: '#0b23da', - 900: '#091fbd', - 1000: '#081aa1', - 1100: '#061584', - 1200: '#051167', - 1300: '#040c4a', - }, - blueberry: { - 100: '#ede6fc', - 200: '#d2c0f7', - 300: '#b69af3', - 400: '#9b74ee', - 500: '#804ee9', - 600: '#6428e5', - 700: '#4902e0', - 800: '#4102c6', - 900: '#3802ac', - 1000: '#2f0192', - 1100: '#270178', - 1200: '#1e015d', - 1300: '#160143', - }, - grape: { - 100: '#f2e7fa', - 200: '#dfc3f3', - 300: '#cc9eec', - 400: '#b97ae5', - 500: '#a556dd', - 600: '#9231d6', - 700: '#7f0dcf', - 800: '#700cb7', - 900: '#610a9f', - 1000: '#530987', - 1100: '#44076e', - 1200: '#350556', - 1300: '#26043e', - }, - magenta: { - 100: '#fae7fe', - 200: '#f2c3fd', - 300: '#ea9efc', - 400: '#e27afb', - 500: '#db56f9', - 600: '#d331f8', - 700: '#cb0df7', - 800: '#b30cda', - 900: '#9c0abd', - 1000: '#8409a1', - 1100: '#6c0784', - 1200: '#550567', - 1300: '#3d044a', - }, - cherry: { - 100: '#ffe6e7', - 200: '#ffbfc6', - 300: '#ff99a6', - 400: '#ff7389', - 500: '#ff4d6e', - 600: '#f32656', - 700: '#de0040', - 800: '#d40032', - 900: '#c40025', - 1000: '#a6001a', - 1100: '#880011', - 1200: '#6a000a', - 1300: '#4d0005', - }, - coral: { - 100: '#ffe6e6', - 200: '#ffbfc2', - 300: '#ff9ba3', - 400: '#ff7e88', - 500: '#ff6671', - 600: '#ff535e', - 700: '#ff444f', - 800: '#e12e3a', - 900: '#c41c28', - 1000: '#a60e19', - 1100: '#88030d', - 1200: '#6a0004', - 1300: '#4d0000', - }, - slate: { - 50: '#ffffff', - 75: '#f6f7f8', - 100: '#ebecef', - 200: '#ced0d6', - 300: '#b1b4bc', - 400: '#9498a2', - 500: '#787d88', - 600: '#5c616d', - 700: '#414652', - 800: '#383d4a', - 900: '#303541', - 1000: '#282c38', - 1100: '#20242f', - 1200: '#181c25', - 1300: '#11141b', - 1400: '#000000', - }, - grey: { - dark: '#d6d6d6', - default: '#d6dadb', - light: '#999999', - }, - }, - status: { - dark: { - danger: '#cc2e3d', - general: '#ffffff', - information: '#377cfc', - success: '#00a79e', - warning: '#ffad3a', - }, - light: { - danger: '#ec3f3f', - information: '#377cfc', - success: '#4bb4b3', - warning: '#ffad3a', - }, - }, - system: { - dark: { - 'active-background': '#323738', - 'disabled-text': '#3e3e3e', - 'general-text': '#c2c2c2', - 'hover-background': '#242828', - 'less-prominent': '#6e6e6e', - 'less-prominent-text': '#6e6e6e', - 'primary-background': '#0e0e0e', - 'prominent-text': '#ffffff', - 'secondary-background': '#151717', - 'text-info-blue-background': '#182130', - }, - light: { - 'active-background': '#d6dadb', - 'disabled-text': '#d6d6d6', - 'general-text': '#333333', - 'hover-background': '#e6e9e9', - 'less-prominent': '#999999', - 'less-prominent-text': '#999999', - 'primary-background': '#ffffff', - 'prominent-text': '#333333', - 'secondary-background': '#f2f3f4', - 'text-info-blue-background': '#dfeaff', - }, - }, - }, - fontFamily: { - sans: ['IBM Plex Sans', 'sans-serif'], - }, - fontSize: { - '2xs': '8px', - xs: '10px', - sm: '12px', - default: '14px', - lg: '16px', - xl: '18px', - '2xl': '20px', - '3xl': '22px', - '4xl': '24px', - '5xl': '26px', - '6xl': '28px', - '7xl': '30px', - '8xl': '32px', - }, - height: { - 'full-desktop': 'calc(100vh - 85px)', - 'full-mobile': 'calc(100vh - 40px)', - }, - lineHeight: { - 0: '0', - 2: '2px', - 4: '4px', - 6: '6px', - 8: '8px', - 10: '10px', - 12: '12px', - 14: '14px', - 16: '16px', - 18: '18px', - 20: '20px', - 22: '22px', - 24: '24px', - 26: '26px', - 28: '28px', - 30: '30px', - }, - opacity: { - 0: '0', - 4: '0.04', - 8: '0.08', - 16: '0.16', - 24: '0.24', - 32: '0.32', - 40: '0.4', - 48: '0.48', - 56: '0.56', - 64: '0.64', - 72: '0.72', - 80: '0.8', - 88: '0.88', - 96: '0.96', - 100: '1', - overlay: 0.72, - disabled: 0.32, - }, - screens: { - sm: { max: '600px' }, - md: { min: '601px' }, - lg: { min: '1280px' }, - xl: { min: '1440px' }, - }, - spacing: { - 0: '0px', - 1: '1px', - 2: '2px', - 3: '3px', - 4: '4px', - 5: '5px', - 6: '6px', - 7: '7px', - 8: '8px', - 9: '9px', - 10: '10px', - 11: '11px', - 12: '12px', - 14: '14px', - 16: '16px', - 18: '18px', - 20: '20px', - 22: '22px', - 24: '24px', - 26: '26px', - 28: '28px', - 30: '30px', - 32: '32px', - 34: '34px', - 36: '36px', - 38: '38px', - 40: '40px', - 42: '42px', - 44: '44px', - 46: '46px', - 48: '48px', - 50: '50px', - 52: '52px', - 54: '54px', - 56: '56px', - 58: '58px', - 60: '60px', - 62: '62px', - 64: '64px', - 66: '66px', - 68: '68px', - 70: '70px', - 72: '72px', - 74: '74px', - 76: '76px', - 78: '78px', - 80: '80px', - 82: '82px', - 84: '84px', - 86: '86px', - 88: '88px', - 90: '90px', - 92: '92px', - 94: '94px', - 96: '96px', - 98: '98px', - 100: '100px', - }, - }, - }, -}; diff --git a/packages/tradershub/tsconfig.json b/packages/tradershub/tsconfig.json deleted file mode 100644 index 8a248c1c6ac0..000000000000 --- a/packages/tradershub/tsconfig.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "compilerOptions": { - "outDir": "./dist", - "baseUrl": "./", - "paths": { - "@deriv/*": ["../*/src"], - "@/*": ["src/*"], - "@cfd/*": ["src/features/cfd/*"] - } - }, - "include": ["src", "./declarations.d.ts", "../../utils.d.ts"], - "exclude": ["../shared/**/*", "./node_modules/*"] -} diff --git a/packages/tradershub/webpack.config.js b/packages/tradershub/webpack.config.js deleted file mode 100644 index 6fedc8b19fe9..000000000000 --- a/packages/tradershub/webpack.config.js +++ /dev/null @@ -1,193 +0,0 @@ -const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); -const TerserPlugin = require('terser-webpack-plugin'); -const path = require('path'); - -const isRelease = - process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'staging' || process.env.NODE_ENV === 'test'; - -const svgLoaders = [ - { - loader: 'babel-loader', - options: { - cacheDirectory: true, - rootMode: 'upward', - }, - }, - { - loader: 'react-svg-loader', - options: { - jsx: true, - svgo: { - floatPrecision: 3, - plugins: [ - { removeTitle: false }, - { removeUselessStrokeAndFill: false }, - { removeUnknownsAndDefaults: false }, - { removeViewBox: false }, - ], - }, - }, - }, -]; - -module.exports = function (env) { - const base = env && env.base && env.base !== true ? `/${env.base}/` : '/'; - - return { - devtool: isRelease ? 'source-map' : 'eval-cheap-module-source-map', - entry: { - index: path.resolve(__dirname, './src', 'index.tsx'), - }, - externals: [ - { - classnames: true, - react: true, - 'react-dom': true, - 'react-router-dom': true, - }, - ], - mode: isRelease ? 'production' : 'development', - module: { - rules: [ - { - // https://github.com/webpack/webpack/issues/11467 - include: /node_modules/, - resolve: { - fullySpecified: false, - }, - test: /\.m?js/, - }, - { - exclude: /node_modules/, - test: /\.(js|jsx|ts|tsx)$/, - use: [ - { - loader: 'babel-loader', - options: { - cacheDirectory: true, - rootMode: 'upward', - }, - }, - ], - }, - //TODO: Uncomment this line when type script migrations on all packages done - // plugins: [new CleanWebpackPlugin(), new ForkTsCheckerWebpackPlugin()], - { - loader: 'source-map-loader', - test: input => isRelease && /\.js$/.test(input), - }, - { - test: /\.(sc|sa|c)ss$/, - use: [ - 'style-loader', - { - loader: 'css-loader', - options: { - url: true, - }, - }, - { - loader: 'postcss-loader', - options: { - postcssOptions: { - config: path.resolve(__dirname), - }, - }, - }, - { - loader: 'resolve-url-loader', - options: { - keepQuery: true, - sourceMap: true, - }, - }, - 'sass-loader', - { - loader: 'sass-resources-loader', - options: { - // Provide path to the file with resources - resources: [ - // eslint-disable-next-line global-require, import/no-dynamic-require - ...require('../shared/src/styles/index.js'), - ], - }, - }, - ], - }, - { - exclude: /node_modules/, - generator: { - filename: 'tradershub/assets/[name].[contenthash][ext]', - }, - include: /assets\//, - issuer: /\/packages\/tradershub\/.*(\/)?.*.scss/, - test: /\.svg$/, - type: 'asset/resource', - }, - { - exclude: /node_modules/, - include: /assets\//, - issuer: /\/packages\/tradershub\/.*(\/)?.*.tsx/, - test: /\.svg$/, - use: svgLoaders, - }, - ], - }, - optimization: { - minimize: isRelease, - minimizer: isRelease - ? [ - new TerserPlugin({ - parallel: 2, - test: /\.js$/, - }), - new CssMinimizerPlugin(), - ] - : [], - splitChunks: { - automaticNameDelimiter: '~', - cacheGroups: { - default: { - minChunks: 2, - minSize: 102400, - priority: -20, - reuseExistingChunk: true, - }, - defaultVendors: { - idHint: 'vendors', - priority: -10, - test: /[\\/]node_modules[\\/]/, - }, - shared: { - chunks: 'all', - name: 'shared', - test: /[\\/]shared[\\/]/, - }, - }, - chunks: 'all', - enforceSizeThreshold: 500000, - maxAsyncRequests: 30, - maxInitialRequests: 3, - minChunks: 1, - minSize: 102400, - minSizeReduction: 102400, - }, - }, - output: { - chunkFilename: 'tradershub/js/tradershub.[name].[contenthash].js', - filename: 'tradershub/js/[name].js', - library: '@deriv/tradershub', - libraryExport: 'default', - libraryTarget: 'umd', - path: path.resolve(__dirname, './dist'), - publicPath: base, - }, - resolve: { - alias: { - '@': path.resolve(__dirname, 'src'), - '@cfd': path.resolve(__dirname, 'src/features/cfd'), - }, - extensions: ['.js', '.jsx', '.ts', '.tsx'], - }, - }; -};