diff --git a/.github/workflows/smoketests.yml b/.github/workflows/smoketests.yml index e1c94bbfdd84..be842dcf8740 100644 --- a/.github/workflows/smoketests.yml +++ b/.github/workflows/smoketests.yml @@ -11,15 +11,10 @@ permissions: on: issue_comment: types: [edited] - + jobs: - cypress-run: + trigger-workflow: runs-on: ubuntu-latest - strategy: - fail-fast: false - matrix: - containers: [1,2] - steps: - name: Capture Vercel preview URL id: vercel_preview_url @@ -27,107 +22,36 @@ jobs: with: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - - name: Checkout external repository with Cypress tests - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 - with: - repository: deriv-com/e2e-deriv-app - - - name: Cypress run - # Uses the official Cypress GitHub action https://github.com/cypress-io/github-action - if: ${{ github.event.issue.draft == false && contains(github.event.issue.labels.*.name, 'Wallets') }} - uses: cypress-io/github-action@97d526c9027e1b1eedde4f37196aebe8834005ef - with: - # Records to Cypress Cloud - # https://docs.cypress.io/guides/cloud/projects#Set-up-a-project-to-record - record: true - parallel: true # Runs test in parallel using settings above - spec: cypress/e2e/smoke/Wallets/*.cy.js - group: 'Smoke Tests' - - env: - # For recording and parallelization to work you must set your CYPRESS_RECORD_KEY - # in GitHub repo → Settings → Secrets → Actions - CYPRESS_RECORD_KEY: ${{ secrets.E2E_CYPRESS_RECORD_KEY }} - # Creating a token https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - # Set Base Url from client_payload. - CYPRESS_BASE_URL: https://staging-app.deriv.com/ - # Send PR details to Cypress test run - COMMIT_INFO_MESSAGE: PR "${{ github.event.issue.number }}" Changed By "${{ github.event.issue.user.login }}" in Labels "${join(github.event.issue.labels.*.name, ', ')}" (draft? "${{ github.event.issue.draft }}") - - # Set login env variables - E2E_OAUTH_URL: ${{ secrets.E2E_OAUTH_URL }} - E2E_CONFIG_APPID: ${{ secrets.E2E_CONFIG_APPID }} - E2E_CONFIG_SERVER: ${{ secrets.E2E_CONFIG_SERVER }} - E2E_MT5_LOGIN: ${{ secrets.E2E_MT5_LOGIN }} - E2E_MT5_PASSWORD: ${{ secrets.E2E_MT5_PASSWORD }} - E2E_MT5_BASEURL: ${{ secrets.E2E_MT5_BASEURL }} - E2E_STD_CONFIG_SERVER: ${{ env.QA_SERVER || secrets.E2E_STD_CONFIG_SERVER }} - E2E_STD_CONFIG_APPID: ${{ github.event.inputs.appid || secrets.E2E_STD_CONFIG_APPID }} - E2E_DOUGHFLOW_CONFIG_SERVER: ${{ secrets.E2E_DOUGHFLOW_CONFIG_SERVER }} - E2E_DOUGHFLOW_CONFIG_APPID: ${{ secrets.E2E_DOUGHFLOW_CONFIG_APPID }} - E2E_QABOX_URL: ${{ secrets.E2E_QABOX_URL }} - E2E_MAIN_QABOX_URL: ${{ secrets.E2E_MAIN_QABOX_URL }} - E2E_QABOX_LOGIN: ${{ secrets.E2E_QABOX_LOGIN }} - E2E_QABOX_PASSWORD: ${{ secrets.E2E_QABOX_PASSWORD }} - TEST_SUITE: ${{ github.event.inputs.suite }} - E2E_DERIV_LOGIN_PROD: ${{secrets.E2E_DERIV_LOGIN_PROD}} - E2E_DERIV_PASSWORD_PROD: ${{secrets.E2E_DERIV_PASSWORD_PROD }} - E2E_PROD_SERVER: ${{secrets.E2E_PROD_SERVER}} - E2E_PROD_APPID: ${{secrets.E2E_PROD_APPID}} - E2E_LOGIN_ID_P2P_FIXEDRATE: ${{ secrets.E2E_LOGIN_ID_P2P_FIXEDRATE }} - E2E_P2P_FLOATING: ${{secrets.E2E_P2P_FLOATING}} - E2E_LOGIN_ID_P2P_STANDARDACCOUNTWITHADS: ${{secrets.E2E_LOGIN_ID_P2P_STANDARDACCOUNTWITHADS}} - E2E_LOGIN_ID_P2P_STANDARDACCOUNTWITHOUTADS: ${{secrets.E2E_LOGIN_ID_P2P_STANDARDACCOUNTWITHOUTADS}} - E2E_LOGIN_ID_P2P_FLOATINGRATE_SELLAD_1: ${{secrets.E2E_LOGIN_ID_P2P_FLOATINGRATE_SELLAD_1}} - E2E_LOGIN_ID_P2P_FLOATINGRATE_SELLAD_2: ${{secrets.E2E_LOGIN_ID_P2P_FLOATINGRATE_SELLAD_2}} - E2E_LOGIN_ID_P2P_EMPTYSTATE: ${{secrets.E2E_LOGIN_ID_P2P_EMPTYSTATE}} - E2E_LOGIN_ID_P2P_SORT: ${{secrets.E2E_LOGIN_ID_P2P_SORT}} - E2E_CRYPTO: ${{secrets.E2E_CRYPTO}} - E2E_STG_APPID: ${{secrets.E2E_STG_APPID}} - E2E_PSWD_P2P: ${{secrets.E2E_PSWD_P2P}} - E2E_CASHIER_WITHDRAWAL_PROD: ${{secrets.E2E_CASHIER_WITHDRAWAL_PROD}} - E2E_CASHIER_PROD_PASSWORD: ${{secrets.E2E_CASHIER_PROD_PASSWORD}} - E2E_LOGIN_ID_DBOT: ${{secrets.E2E_LOGIN_ID_DBOT}} - E2E_LOGIN_ID_PROD_DBOT: ${{secrets.E2E_LOGIN_ID_PROD_DBOT}} - E2E_QA_ACCOUNT_PASSWORD: ${{secrets.E2E_QA_ACCOUNT_PASSWORD}} - E2E_LOGIN_ID_CASHIER_LEGACY: ${{secrets.E2E_LOGIN_ID_CASHIER_LEGACY}} - E2E_LOGIN_ID_CASHIER_LEGACY_NON_USD: ${{secrets.E2E_LOGIN_ID_CASHIER_LEGACY_NON_USD}} - E2E_MAILISK_NAMESPACE: ${{secrets.E2E_MAILISK_NAMESPACE}} - E2E_MAILISK_API_KEY: ${{secrets.E2E_MAILISK_API_KEY}} - E2E_DIEL_LOGIN: ${{secrets.E2E_DIEL_LOGIN}} - E2E_EU_LOGIN: ${{secrets.E2E_EU_LOGIN}} - E2E_APP_REGISTER_URL: ${{ steps.vercel_preview_url.outputs.vercel_preview_url }} - E2E_RUN_FROM_PR: ${{secrets.E2E_RUN_FROM_PR}} - E2E_DERIV_LOGIN_WALLET_MOBILE : ${{ secrets.E2E_DERIV_LOGIN_WALLET_MOBILE }} - E2E_WALLET_MIGRATION_NEWCLIENT : ${{ secrets.E2E_WALLET_MIGRATION_NEWCLIENT }} - E2E_WALLET_MIGRATION_NO_VRTC : ${{ secrets.E2E_WALLET_MIGRATION_NO_VRTC }} - E2E_WALLET_MIGRATION_VRTCONLY : ${{ secrets.E2E_WALLET_MIGRATION_VRTCONLY }} - E2E_WALLET_MIGRATION_NO_CURRENCY : ${{ secrets.E2E_WALLET_MIGRATION_NO_CURRENCY }} - E2E_WALLET_MIGRATION_NON_USD : ${{ secrets.E2E_WALLET_MIGRATION_NON_USD }} - E2E_WALLET_MIGRATION_P2P : ${{ secrets.E2E_WALLET_MIGRATION_P2P }} - E2E_WALLET_MIGRATION_PA : ${{ secrets.E2E_WALLET_MIGRATION_PA }} - E2E_WALLET_MIGRATION_PA_CLIENT : ${{ secrets.E2E_WALLET_MIGRATION_PA_CLIENT }} - E2E_DERIV_LOGIN_WALLET: ${{ secrets.E2E_DERIV_LOGIN_WALLET }} - E2E_WALLETS_LOGIN_PROD: ${{ secrets.E2E_WALLETS_LOGIN_PROD }} - E2E_WALLETS_PASSWORD_PROD: ${{ secrets.E2E_WALLETS_PASSWORD_PROD }} - - - name: Set comments message - id: set_msg - if: always() && ${{ github.event.issue.draft == false && contains(github.event.issue.labels.*.name, 'Wallets') }} + - name: Set env vars + id: set-env-vars run: | - # Using shell script to conditionally set the message - if [[ "${{ job.status }}" == "success" ]]; then - echo "msg=:rocket: Smoke test run (${{ matrix.containers }}) passed successfully!" >> $GITHUB_OUTPUT + if [[ "${{ github.event.issue.labels.*.name }}" == *"Bot"* ]]; then + echo "TEST_SUITE=dbot" >> $GITHUB_ENV + elif [[ "${{ github.event.issue.labels.*.name }}" == *"P2P"* ]]; then + echo "TEST_SUITE=P2P" >> $GITHUB_ENV + elif [[ "${{ github.event.issue.labels.*.name }}" == *"Wallets"* ]]; then + echo "TEST_SUITE=Wallets" >> $GITHUB_ENV else - # echo "msg=:x: Smoke test run (${{ matrix.containers }}) failed. See logs for details: [Visit Action](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}})" >> $GITHUB_OUTPUT + echo "TEST_SUITE=" >> $GITHUB_ENV fi - - name: Leave comment - if: always() && ${{ github.event.issue.draft == false && contains(github.event.issue.labels.*.name, 'Wallets') }} - uses: marocchino/sticky-pull-request-comment@331f8f5b4215f0445d3c07b4967662a32a2d3e31 + - name: Trigger deriv-app smoke tests from regentmarkets + if: ${{ github.event.issue.draft == false && env.TEST_SUITE != '' }} + uses: actions/github-script@v6 with: - header: Smoke tests status update - number: ${{ github.event.issue.number }} - message: "${{ steps.set_msg.outputs.msg }}" - recreate: true + github-token: ${{ secrets.E2E_WORKFLOW_TOKEN }} + script: | + const workflowInputs = { + environment: '${{ secrets.E2E_WORKFLOW_ENV }}', + suite: '${{ env.TEST_SUITE }}', + appRegUrl: '${{ steps.vercel_preview_url.outputs.vercel_preview_url }}', + issue_number: '${{ github.event.issue.number }}', + user_name: '${{ github.event.issue.user.login }}' + }; + const response = await github.rest.actions.createWorkflowDispatch({ + owner: 'regentmarkets', + repo: 'e2e-deriv-app', + workflow_id: 'E2E_Run_PR.yml', + ref: 'mark/pr-commit-v2', + inputs: workflowInputs + }); diff --git a/.github/workflows/smoketests_manual.yml b/.github/workflows/smoketests_manual.yml index ab8d062cca78..1a4c62335c69 100644 --- a/.github/workflows/smoketests_manual.yml +++ b/.github/workflows/smoketests_manual.yml @@ -1,21 +1,80 @@ name: Run Smoke Tests - Manually -run-name: Manual run of ${{ github.event.inputs.suite }} tests on ${{ github.event.inputs.testlink || github.event.inputs.environment }} in ${{ github.event.inputs.qabox }} ${{ github.event.inputs.appid }} +run-name: Manual run of tests on: workflow_dispatch: + inputs: + ilabel: + type: choice + description: Run smoke or full test suite + options: + - P2P + - dbot, Traders + - Traders + - Wallets + - dbot + idraft: + type: choice + description: Draft + options: + - 'true' + - 'false' + iappRegUrl: + type: choice + description: Select the Url for a specific PR + options: + - https://deriv-app-git-fork-maryia-matskevich-deriv-maryia-bot-1913.binary.sx/ + - https://deriv-app-git-fork-suisin-deriv-suisin-upm1116addkhmerlanguage.binary.sx + iissue_number: + type: choice + description: Issue Number + options: + - '15719' + - '15714' + iuser_name: + type: choice + description: User name + options: + - maryia-deriv + - suisin-deriv jobs: trigger-workflow: runs-on: ubuntu-latest steps: - - name: Trigger another deriv-app smoke tests from regentmarkets - uses: actions/github-script@v6 - with: - github-token: ${{ secrets.GITHUB_TOKEN }} - script: | - github.actions.createWorkflowDispatch({ - owner: 'regentmarkets', - repo: 'e2e-deriv-app', - workflow_id: 'E2E_Run_v2.yml', - ref: 'master' - }) + + - name: Set env vars + id: set-env-vars + run: | + if [[ "${{ github.event.inputs.ilabel }}" == *"dbot"* ]]; then + echo "TEST_SUITE=dbot" >> $GITHUB_ENV + elif [[ "${{ github.event.inputs.ilabel }}" == *"P2P"* ]]; then + echo "TEST_SUITE=P2P" >> $GITHUB_ENV + elif [[ "${{ github.event.inputs.ilabel }}" == *"Wallets"* ]]; then + echo "TEST_SUITE=Wallets" >> $GITHUB_ENV + else + echo "TEST_SUITE=" >> $GITHUB_ENV + fi + + - name: Trigger another deriv-app smoke tests from regentmarkets + if: ${{ github.event.inputs.idraft == 'false' && env.TEST_SUITE != '' }} + uses: actions/github-script@v6 + with: + github-token: ${{ secrets.E2E_WORKFLOW_TOKEN }} + script: | + const workflowInputs = { + environment: '${{ secrets.E2E_WORKFLOW_ENV }}', + suite: '${{ env.TEST_SUITE }}', + appRegUrl: '${{ github.event.inputs.iappRegUrl }}', + issue_number: '${{ github.event.inputs.iissue_number }}', + user_name: '${{ github.event.inputs.iuser_name }}' + }; + const response = await github.rest.actions.createWorkflowDispatch({ + owner: 'regentmarkets', + repo: 'e2e-deriv-app', + workflow_id: 'E2E_Run_PR.yml', + ref: 'mark/pr-commit-v2', + inputs: workflowInputs + }); + console.log('Workflow dispatched successfully:', response); + diff --git a/.stylelintrc.js b/.stylelintrc.js index e610dc6269d2..e7727f58da5d 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -36,7 +36,7 @@ module.exports = { 'shorthand-property-no-redundant-values': true, 'string-no-newline': true, 'time-min-milliseconds': 100, - 'unit-allowed-list': ['fr', 'px', 'em', 'rem', '%', 'svh', 'vw', 'vh', 'deg', 'ms', 's', 'dpcm'], + 'unit-allowed-list': ['fr', 'px', 'em', 'rem', '%', 'svh', 'svw', 'vw', 'vh', 'deg', 'ms', 's', 'dpcm'], 'value-keyword-case': 'lower', }, extends: [ diff --git a/__mocks__/globals.js b/__mocks__/globals.js index 8fa59529a33e..53318ea21cf7 100644 --- a/__mocks__/globals.js +++ b/__mocks__/globals.js @@ -20,6 +20,26 @@ jest.mock('@deriv-com/analytics', () => ({ }, })); +// default breakpoint to desktop +jest.mock('@deriv-com/ui', () => ({ + ...jest.requireActual('@deriv-com/ui'), + useDevice: () => ({ isDesktop: true }), +})); + +Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation(query => ({ + matches: false, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), +}); + const mock_onfido = { init: jest.fn().mockResolvedValue({}), }; diff --git a/jest.config.base.js b/jest.config.base.js index df4d68805d21..c76634f71d8f 100644 --- a/jest.config.base.js +++ b/jest.config.base.js @@ -16,7 +16,7 @@ module.exports = { testRegex: '(/__tests__/.*|(\\.)(test|spec))\\.(js|jsx|tsx|ts)?$', // This is needed to transform es modules imported from node_modules of the target component. transformIgnorePatterns: [ - '/node_modules/(?!(@enykeev/react-virtualized|@simplewebauthn/browser|@deriv-com/translations)).+\\.js$', + '/node_modules/(?!(@enykeev/react-virtualized|@simplewebauthn/browser|@deriv-com/ui|@deriv-com/quill-ui|@sendbird/chat)).+\\.js$', ], setupFiles: ['/../../jest.setup.js'], setupFilesAfterEnv: ['/../../setupTests.js'], diff --git a/jest.config.js b/jest.config.js index da5d1f35c404..ceb9daa8fe7b 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,3 +1,5 @@ +const baseConfig = require('./jest.config.base'); + module.exports = { collectCoverage: false, collectCoverageFrom: [ @@ -17,6 +19,6 @@ module.exports = { '^.+\\.(ts|tsx)?$': 'ts-jest', }, testRegex: '(/__tests__/.*|(\\.)(test|spec))\\.(js|jsx|tsx|ts)?$', - transformIgnorePatterns: ['/node_modules/(?!(@enykeev/react-virtualized|@simplewebauthn/browser)).+\\.js$'], + transformIgnorePatterns: baseConfig.transformIgnorePatterns, testPathIgnorePatterns: ['/integration-tests/'], }; diff --git a/package-lock.json b/package-lock.json index d52a24be66b6..30d86051e810 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,8 +17,8 @@ "@deriv-com/analytics": "1.5.9", "@deriv-com/quill-tokens": "^2.0.4", "@deriv-com/quill-ui": "^1.10.19", - "@deriv-com/translations": "^1.3.2", - "@deriv-com/ui": "^1.14.5", + "@deriv-com/translations": "^1.3.3", + "@deriv-com/ui": "^1.28.1", "@deriv-com/utils": "^0.0.25", "@deriv/api-types": "1.0.172", "@deriv/deriv-api": "^1.0.15", @@ -3042,9 +3042,9 @@ } }, "node_modules/@deriv-com/translations": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/@deriv-com/translations/-/translations-1.3.2.tgz", - "integrity": "sha512-8gSJ5qlAYorlOZhj8pe2CAOZWf4pwqeAKNN7oEm0KBN879SE62jJ8YesJcD5N5zshdQOXsCSMXxKxlIIgxOZmQ==", + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@deriv-com/translations/-/translations-1.3.3.tgz", + "integrity": "sha512-GANIMqYfHiMnt7Qocfp2HBdnxLDL8B2aRCimyTjBG8xtuoqJ+gUoy9tqmCaOjmiHEc50uvQdQwtuo784QeDcsg==", "dependencies": { "@xmldom/xmldom": "^0.8.10", "commander": "^12.0.0", @@ -3148,9 +3148,9 @@ } }, "node_modules/@deriv-com/ui": { - "version": "1.27.9", - "resolved": "https://registry.npmjs.org/@deriv-com/ui/-/ui-1.27.9.tgz", - "integrity": "sha512-zsNJ/ShXFjNp39VX1f87W9dnh3DSYUl77p3GJ9nyyDem7F43gXJK8MyVFLd0eP5eXlKNkoUttU0CvIIvQxFgDA==", + "version": "1.28.1", + "resolved": "https://registry.npmjs.org/@deriv-com/ui/-/ui-1.28.1.tgz", + "integrity": "sha512-S1Ao+hJgrrYPxOLFEAXMCaomHMAZtvu+8r28Cp8zCPRDyXqlRPKC9OALwLnRTgyynVtWDQRbv0xHLBrBzhmwIg==", "dependencies": { "@types/react-modal": "^3.16.3", "react-tiny-popover": "^8.0.4" diff --git a/packages/account/build/constants.js b/packages/account/build/constants.js index ecd32451b9d0..13739e5c4c1e 100644 --- a/packages/account/build/constants.js +++ b/packages/account/build/constants.js @@ -17,6 +17,7 @@ const { } = require('./loaders-config'); const ALIASES = { + 'react/jsx-runtime': 'react/jsx-runtime.js', Assets: path.resolve(__dirname, '../src/Assets'), Components: path.resolve(__dirname, '../src/Components'), Configs: path.resolve(__dirname, '../src/Configs'), diff --git a/packages/account/jest.config.js b/packages/account/jest.config.js index 83aa365d02eb..ee7834a92264 100644 --- a/packages/account/jest.config.js +++ b/packages/account/jest.config.js @@ -4,6 +4,7 @@ module.exports = { ...baseConfigForPackages, preset: 'ts-jest', moduleNameMapper: { + '\\.css$': '/../../__mocks__/styleMock.js', '\\.s(c|a)ss$': '/../../__mocks__/styleMock.js', '^.+\\.svg$': '/../../__mocks__/styleMock.js', '@deriv-com/translations': '/../../__mocks__/translation.mock.js', diff --git a/packages/account/package.json b/packages/account/package.json index 46505a8ceccb..d2699e2c5fd2 100644 --- a/packages/account/package.json +++ b/packages/account/package.json @@ -31,8 +31,9 @@ "dependencies": { "@binary-com/binary-document-uploader": "^2.4.8", "@deriv-com/analytics": "1.5.9", - "@deriv-com/translations": "^1.3.2", + "@deriv-com/translations": "^1.3.3", "@deriv-com/utils": "^0.0.25", + "@deriv-com/ui": "^1.28.1", "@deriv/api": "^1.0.0", "@deriv/components": "^1.0.0", "@deriv/hooks": "^1.0.0", diff --git a/packages/account/src/Components/poa/common-mistakes/common-mistake-examples.scss b/packages/account/src/Components/poa/common-mistakes/common-mistake-examples.scss index 2336f29e78e4..5edc9aa93c05 100644 --- a/packages/account/src/Components/poa/common-mistakes/common-mistake-examples.scss +++ b/packages/account/src/Components/poa/common-mistakes/common-mistake-examples.scss @@ -7,11 +7,17 @@ row-gap: 1.6rem; margin-bottom: 2.4rem; - @include desktop { + @include tablet-screen { + grid-template-columns: repeat(2, 1fr); + row-gap: 3.2rem; + } + + @include desktop-screen { grid-template-columns: repeat(3, 1fr); column-gap: calc((100% - 23.7rem * 3) / 2); row-gap: 3.2rem; } + &-layout { background-color: var(--transparent-danger); gap: 1.6rem; @@ -25,7 +31,7 @@ width: 23.7rem; height: 21.8rem; - @include mobile { + @include mobile-or-tablet-screen { margin-inline: auto; } } diff --git a/packages/account/src/Components/poi/status/unsupported/card-details/card-details.scss b/packages/account/src/Components/poi/status/unsupported/card-details/card-details.scss index 35ec54b498ce..64274e07391b 100644 --- a/packages/account/src/Components/poi/status/unsupported/card-details/card-details.scss +++ b/packages/account/src/Components/poi/status/unsupported/card-details/card-details.scss @@ -32,9 +32,13 @@ .dc-datepicker { margin-left: 2.4rem; + + @include mobile-or-tablet-screen { + margin-left: unset; + } } - @include mobile { + @include mobile-or-tablet-screen { .dc-input { margin-bottom: 2rem; } @@ -188,7 +192,7 @@ .dc-btn:not(:last-of-type) { margin-right: 0.8rem; } - @include mobile { + @include mobile-or-tablet-screen { height: auto; padding-bottom: unset; diff --git a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx index 1fc8049743a9..87e4709c15db 100644 --- a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx +++ b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { Formik, FormikErrors, FormikHelpers, FormikValues } from 'formik'; +import { useDevice } from '@deriv-com/ui'; import { Loading, Button, Text, ThemedScrollbars, FormSubmitButton, Modal, HintBox } from '@deriv/components'; import { useFileUploader } from '@deriv/hooks'; import { validAddress, validPostCode, validLetterSymbol, validLength, getLocation, WS } from '@deriv/shared'; @@ -37,7 +38,8 @@ type TFormState = Record<'is_btn_loading' | 'is_submit_success' | 'should_allow_ const ProofOfAddressForm = observer( ({ is_resubmit, is_for_cfd_modal, onSubmit, onSubmitForCFDModal, className }: Partial) => { - const { client, notifications, ui } = useStore(); + const { isDesktop } = useDevice(); + const { client, notifications } = useStore(); const { account_settings, fetchResidenceList, fetchStatesList, getChangeableFields, states_list, is_eu } = client; const { @@ -45,7 +47,6 @@ const ProofOfAddressForm = observer( removeNotificationMessage, removeNotificationByKey, } = notifications; - const { is_mobile } = ui; const [document_files, setDocumentFiles] = React.useState([]); const [file_selection_error, setFileSelectionError] = React.useState(null); const [is_loading, setIsLoading] = React.useState(true); @@ -272,7 +273,7 @@ const ProofOfAddressForm = observer( } const setOffset = (status: { msg: string }) => { const mobile_scroll_offset = status?.msg ? '200px' : '154px'; - return is_mobile && !is_for_cfd_modal ? mobile_scroll_offset : '80px'; + return !isDesktop && !is_for_cfd_modal ? mobile_scroll_offset : '80px'; }; return ( @@ -284,12 +285,12 @@ const ProofOfAddressForm = observer( > {({ status, handleSubmit, isSubmitting, isValid }) => ( <> - + {form_state.should_show_form && (
@@ -298,7 +299,7 @@ const ProofOfAddressForm = observer( className='account-form_poa-submit-error' icon='IcAlertDanger' message={ - + {!status?.msg && is_resubmit && ( )} @@ -343,7 +344,7 @@ const ProofOfAddressForm = observer( !!file_selection_error } label={localize('Continue')} - is_absolute={is_mobile} + is_absolute={!isDesktop} is_loading={isSubmitting} /> diff --git a/packages/account/src/Styles/account.scss b/packages/account/src/Styles/account.scss index ea754d80524e..a0aa110fe395 100644 --- a/packages/account/src/Styles/account.scss +++ b/packages/account/src/Styles/account.scss @@ -8,7 +8,7 @@ $MIN_HEIGHT_FLOATING: calc( margin: 0 16px; .dc-page-overlay__content { - @include mobile { + @include mobile-or-tablet-screen { overflow-x: hidden; overflow-y: auto; } @@ -162,7 +162,7 @@ $MIN_HEIGHT_FLOATING: calc( } } - @include desktop { + @include desktop-screen { & .da-self-exclusion__wrapper { width: calc(100vw - 33rem); } @@ -172,7 +172,7 @@ $MIN_HEIGHT_FLOATING: calc( } } - @include desktop { + @include desktop-screen { grid-template-rows: 5.2rem calc(100vh - 4.8rem - 3.6rem - 5.2rem); overflow: hidden; } @@ -205,7 +205,7 @@ $MIN_HEIGHT_FLOATING: calc( height: 100%; width: 100%; - @include desktop { + @include desktop-screen { &__financial-assessment { .account-form__fieldset { margin-top: 0.8rem; @@ -235,7 +235,7 @@ $MIN_HEIGHT_FLOATING: calc( width: 100%; margin-top: 0.3rem; - @include mobile { + @include mobile-or-tablet-screen { border-top-color: var(--general-disabled); } } @@ -269,7 +269,7 @@ $MIN_HEIGHT_FLOATING: calc( margin-bottom: 1.6rem; max-width: 67.2rem; - @include mobile { + @include mobile-or-tablet-screen { margin-bottom: 2.4rem; } } @@ -338,7 +338,7 @@ $MIN_HEIGHT_FLOATING: calc( top: 1rem; } - @include mobile { + @include mobile-or-tablet-screen { .dc-checkbox { &__box, & .dc-icon { @@ -377,14 +377,14 @@ $MIN_HEIGHT_FLOATING: calc( } &__personal-details { - @include desktop { + @include desktop-screen { .account__scrollbars_container { padding-top: 2.4rem; padding-bottom: 2.4rem; } } - @include mobile { + @include mobile-or-tablet-screen { .account__scrollbars_container { &--grid-layout { display: flex; @@ -423,13 +423,13 @@ $MIN_HEIGHT_FLOATING: calc( .account__scrollbars_container { &--grid-layout { - @include mobile { + @include mobile-or-tablet-screen { display: flex; flex-direction: column; } } - @include desktop { + @include desktop-screen { padding-bottom: 0; } } @@ -464,7 +464,7 @@ $MIN_HEIGHT_FLOATING: calc( flex-wrap: wrap; } - @include mobile { + @include mobile-or-tablet-screen { flex-wrap: wrap; margin-bottom: 2.4rem; } @@ -496,7 +496,7 @@ $MIN_HEIGHT_FLOATING: calc( } } - @include mobile { + @include mobile-or-tablet-screen { width: 100%; margin-right: unset; margin-bottom: 2.4rem; @@ -535,7 +535,7 @@ $MIN_HEIGHT_FLOATING: calc( } } - @include mobile { + @include mobile-or-tablet-screen { height: fit-content; width: 100%; padding: 2.4rem 1.8rem 2rem; @@ -550,13 +550,13 @@ $MIN_HEIGHT_FLOATING: calc( display: flex; grid-column-gap: 0.8rem; - @include mobile { + @include mobile-or-tablet-screen { margin-bottom: 2.4rem; flex-direction: column; } &__fieldset { - @include mobile { + @include mobile-or-tablet-screen { width: inherit; max-width: 40rem; @@ -586,7 +586,7 @@ $MIN_HEIGHT_FLOATING: calc( &__password-wrapper { & .account__scrollbars_container--grid-layout { - @include mobile { + @include mobile-or-tablet-screen { display: flex; flex-direction: column; } @@ -652,7 +652,7 @@ $MIN_HEIGHT_FLOATING: calc( height: 4rem; margin-top: 3.2rem; - @include mobile { + @include mobile-or-tablet-screen { margin: 1.6rem 0; padding: 1.6rem; } @@ -663,7 +663,7 @@ $MIN_HEIGHT_FLOATING: calc( width: 12.8rem; height: 12.8rem; - @include desktop { + @include desktop-screen { margin-top: 8rem; } } @@ -689,18 +689,18 @@ $MIN_HEIGHT_FLOATING: calc( &-full-width { width: calc(100vw - 33rem); - @include mobile { + @include mobile-or-tablet-screen { width: 100%; } } - @include mobile { + @include mobile-or-tablet-screen { overflow-x: hidden; overflow-y: auto; } } - @include mobile { + @include mobile-or-tablet-screen { line-height: 2rem; text-align: center; } @@ -731,14 +731,14 @@ $MIN_HEIGHT_FLOATING: calc( &-leave-confirm, &-submit-success { - @include desktop { + @include desktop-screen { .dc-btn--primary { width: 13rem; margin-left: 0.8rem; } } - @include mobile { + @include mobile-or-tablet-screen { flex-direction: column; width: 100%; margin-top: 1.2rem; @@ -764,7 +764,7 @@ $MIN_HEIGHT_FLOATING: calc( @include typeface(--paragraph-left-bold-black, none); color: var(--text-prominent); - @include mobile { + @include mobile-or-tablet-screen { font-size: 1.2rem; color: var(--text-general); } @@ -782,7 +782,7 @@ $MIN_HEIGHT_FLOATING: calc( width: 5rem; margin: 0 0.6rem; - @include mobile { + @include mobile-or-tablet-screen { margin: 1.1rem 0; } } @@ -795,12 +795,12 @@ $MIN_HEIGHT_FLOATING: calc( margin-left: 0.8rem; } - @include mobile { + @include mobile-or-tablet-screen { margin-left: unset; } } - @include desktop { + @include desktop-screen { max-width: 54.6rem; } } @@ -809,7 +809,7 @@ $MIN_HEIGHT_FLOATING: calc( .dashboard__message-content { margin-top: 8rem; - @include mobile { + @include mobile-or-tablet-screen { margin-top: 4rem; } } @@ -845,7 +845,7 @@ $MIN_HEIGHT_FLOATING: calc( height: 100%; } - @include mobile { + @include mobile-or-tablet-screen { flex-direction: column; overflow-y: auto; overflow-x: hidden; @@ -856,7 +856,7 @@ $MIN_HEIGHT_FLOATING: calc( margin-bottom: 1.5rem; margin-left: 1.2rem; - @include mobile { + @include mobile-or-tablet-screen { margin-right: 1.2rem; } } @@ -866,7 +866,7 @@ $MIN_HEIGHT_FLOATING: calc( width: 40rem; margin: 2.7rem auto 0; - @include mobile { + @include mobile-or-tablet-screen { width: 100%; max-width: 40rem; } @@ -891,7 +891,7 @@ $MIN_HEIGHT_FLOATING: calc( &__timeline { padding: 0 1.4rem; - @include mobile { + @include mobile-or-tablet-screen { margin-left: 1.2rem; } } @@ -972,7 +972,7 @@ $MIN_HEIGHT_FLOATING: calc( } } - @include mobile { + @include mobile-or-tablet-screen { &__list { width: 90%; margin: 1rem auto; @@ -1021,7 +1021,7 @@ $MIN_HEIGHT_FLOATING: calc( } .leave-confirm { - @include mobile { + @include mobile-or-tablet-screen { &__message-icon { width: 93px; } @@ -1039,7 +1039,7 @@ $MIN_HEIGHT_FLOATING: calc( .submit-success { margin-top: 100px; - @include mobile { + @include mobile-or-tablet-screen { &__message-icon { width: 96px; height: 90px; @@ -1072,7 +1072,7 @@ $MIN_HEIGHT_FLOATING: calc( overflow-y: hidden; } - @include mobile { + @include mobile-or-tablet-screen { height: 100%; } } @@ -1109,7 +1109,7 @@ $MIN_HEIGHT_FLOATING: calc( } } - @include mobile { + @include mobile-or-tablet-screen { height: 100%; margin: 0; } @@ -1143,7 +1143,7 @@ $MIN_HEIGHT_FLOATING: calc( &-dashboard { width: calc(100vw - 33rem); - @include mobile { + @include mobile-or-tablet-screen { width: 100%; button { @@ -1157,7 +1157,7 @@ $MIN_HEIGHT_FLOATING: calc( margin-top: 2.4rem; align-self: center; - @include mobile { + @include mobile-or-tablet-screen { width: 100%; } } @@ -1178,7 +1178,7 @@ $MIN_HEIGHT_FLOATING: calc( margin-right: 0.5em; flex: 1; - @include mobile { + @include mobile-or-tablet-screen { margin-bottom: 2.4rem; } } @@ -1192,7 +1192,7 @@ $MIN_HEIGHT_FLOATING: calc( margin-bottom: 4em; // The gap for the error message is dependent on the font-size, better to be `em` instead of `rem` } - @include mobile { + @include mobile-or-tablet-screen { min-width: 100%; } } @@ -1389,7 +1389,7 @@ $MIN_HEIGHT_FLOATING: calc( font-weight: bold; } - @include mobile { + @include mobile-or-tablet-screen { &:not(:first-child):not(:last-child) { margin: 0; } @@ -1405,7 +1405,7 @@ $MIN_HEIGHT_FLOATING: calc( } } - @include mobile { + @include mobile-or-tablet-screen { display: grid; grid-gap: 2.4rem; grid-template-columns: 1fr 1fr 1fr; @@ -1453,7 +1453,7 @@ $MIN_HEIGHT_FLOATING: calc( } .dc-modal__container_sent-email__modal { - @include mobile { + @include mobile-or-tablet-screen { height: 42rem !important; overflow-y: scroll !important; } @@ -1511,7 +1511,7 @@ $MIN_HEIGHT_FLOATING: calc( @include typeface(--paragraph-center-bold-red, none); } - @include mobile { + @include mobile-or-tablet-screen { width: 300px; height: 272px; } @@ -1536,7 +1536,7 @@ $MIN_HEIGHT_FLOATING: calc( &-field { margin-bottom: 3.2rem; - @include mobile { + @include mobile-or-tablet-screen { margin-bottom: 2.4rem; } @@ -1561,7 +1561,7 @@ $MIN_HEIGHT_FLOATING: calc( margin: 0.5rem 0 0.8rem; } - @include mobile { + @include mobile-or-tablet-screen { &:first-child { & > p { padding-top: 2.4rem; @@ -1579,7 +1579,7 @@ $MIN_HEIGHT_FLOATING: calc( padding-left: 3%; list-style-type: disc; - @include mobile { + @include mobile-or-tablet-screen { padding-left: 5%; } @@ -1608,7 +1608,7 @@ $MIN_HEIGHT_FLOATING: calc( align-self: flex-end; background-color: transparent; - @include mobile { + @include mobile-or-tablet-screen { align-self: center; } } @@ -1619,7 +1619,7 @@ $MIN_HEIGHT_FLOATING: calc( margin-inline-end: 10px; float: right; - @include mobile { + @include mobile-or-tablet-screen { margin-top: -8px; margin-inline-end: 10px; float: right; @@ -1630,7 +1630,7 @@ $MIN_HEIGHT_FLOATING: calc( margin-top: 2.4rem; float: right; - @include mobile { + @include mobile-or-tablet-screen { float: none; margin: 2.4rem auto 3.2rem; } @@ -1675,7 +1675,7 @@ $MIN_HEIGHT_FLOATING: calc( margin-top: 0.8rem; &-wrapper { - @include mobile { + @include mobile-or-tablet-screen { margin-bottom: 5.6rem; } } @@ -1692,7 +1692,7 @@ $MIN_HEIGHT_FLOATING: calc( } } - @include mobile { + @include mobile-or-tablet-screen { width: calc(100% - 3rem); margin: 0 auto; @@ -1705,7 +1705,7 @@ $MIN_HEIGHT_FLOATING: calc( margin: 0.8rem 0; background-color: var(--general-main-1); - @include mobile { + @include mobile-or-tablet-screen { position: fixed; bottom: 0; left: 0; @@ -1729,7 +1729,7 @@ $MIN_HEIGHT_FLOATING: calc( /* stylelint-disable */ .dc-modal__container_closing-account-reasons { - @include mobile { + @include mobile-or-tablet-screen { max-height: 70vh; } @@ -1747,7 +1747,7 @@ $MIN_HEIGHT_FLOATING: calc( padding: 3.2rem; width: 440px; - @include mobile { + @include mobile-or-tablet-screen { width: unset; } @@ -1759,7 +1759,7 @@ $MIN_HEIGHT_FLOATING: calc( width: 10.3rem; } - @include mobile { + @include mobile-or-tablet-screen { background: unset; } } @@ -1845,7 +1845,7 @@ $MIN_HEIGHT_FLOATING: calc( margin: 1.6rem 2.4rem; } - @include mobile { + @include mobile-or-tablet-screen { &__button { margin: 1.6rem; } @@ -1865,7 +1865,7 @@ $MIN_HEIGHT_FLOATING: calc( position: absolute; width: 87%; - @include mobile { + @include mobile-or-tablet-screen { width: 70%; } } @@ -1876,7 +1876,7 @@ $MIN_HEIGHT_FLOATING: calc( width: 100%; overflow: hidden; - @include mobile { + @include mobile-or-tablet-screen { margin-top: 2.4rem; } @@ -1887,14 +1887,14 @@ $MIN_HEIGHT_FLOATING: calc( display: flex; flex-direction: column; - @include mobile { + @include mobile-or-tablet-screen { width: 100%; flex-direction: column; padding: 1.6rem; margin-bottom: 0.8rem; } - @include desktop { + @include desktop-screen { width: 80%; padding: 2.4rem; } @@ -1943,7 +1943,7 @@ $MIN_HEIGHT_FLOATING: calc( align-items: center; margin-top: 3rem; - @include mobile { + @include mobile-or-tablet-screen { display: flex; } @@ -1953,7 +1953,7 @@ $MIN_HEIGHT_FLOATING: calc( width: 100%; flex-grow: 4; - @include mobile { + @include mobile-or-tablet-screen { width: 100%; } } @@ -1964,7 +1964,7 @@ $MIN_HEIGHT_FLOATING: calc( align-self: flex-start; flex-grow: 1; - @include mobile { + @include mobile-or-tablet-screen { width: 100%; } } @@ -1974,19 +1974,19 @@ $MIN_HEIGHT_FLOATING: calc( -webkit-text-fill-color: var(--text-loss-danger); } - @include desktop { + @include desktop-screen { .dc-input { width: unset; } } - @include mobile { + @include mobile-or-tablet-screen { .dc-input { margin-bottom: 1rem; } } - @include mobile { + @include mobile-or-tablet-screen { flex-direction: column; padding-bottom: 1rem; } @@ -2000,7 +2000,7 @@ $MIN_HEIGHT_FLOATING: calc( color: var(--text-less-prominent); -webkit-text-fill-color: var(--text-less-prominent); - @include mobile { + @include mobile-or-tablet-screen { width: 100%; } } @@ -2008,13 +2008,13 @@ $MIN_HEIGHT_FLOATING: calc( &-photo { margin-bottom: 35px; - @include mobile { + @include mobile-or-tablet-screen { width: 100%; margin-left: 0; margin-top: 1.6rem; } - @include desktop { + @include desktop-screen { .dc-input { flex-grow: 8; } @@ -2049,7 +2049,7 @@ $MIN_HEIGHT_FLOATING: calc( margin-right: 25px; overflow: visible; - @include mobile { + @include mobile-or-tablet-screen { margin-right: 8px; } @@ -2081,7 +2081,7 @@ $MIN_HEIGHT_FLOATING: calc( padding: 2rem auto !important; width: 72%; - @include mobile { + @include mobile-or-tablet-screen { width: 100%; } @@ -2109,7 +2109,7 @@ $MIN_HEIGHT_FLOATING: calc( } & .account__scrollbars_container--grid-layout { - @include mobile { + @include mobile-or-tablet-screen { display: flex; flex-direction: column; } @@ -2124,7 +2124,7 @@ $MIN_HEIGHT_FLOATING: calc( &-img { padding: 2.4rem 0; - @include mobile { + @include mobile-or-tablet-screen { width: 100%; height: auto; } @@ -2158,7 +2158,7 @@ $MIN_HEIGHT_FLOATING: calc( position: relaitve; background-color: var(--status-warning-transparent); - @include mobile { + @include mobile-or-tablet-screen { width: 32.8rem; margin: 1rem; } diff --git a/packages/appstore/jest.config.js b/packages/appstore/jest.config.js index badf6cf9ad07..cdd6b376ffd1 100644 --- a/packages/appstore/jest.config.js +++ b/packages/appstore/jest.config.js @@ -3,6 +3,7 @@ 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', '@deriv-com/translations': '/../../__mocks__/translation.mock.js', diff --git a/packages/appstore/package.json b/packages/appstore/package.json index cb469da48681..45fee7c08d75 100644 --- a/packages/appstore/package.json +++ b/packages/appstore/package.json @@ -27,7 +27,7 @@ "license": "Apache-2.0", "dependencies": { "@deriv-com/analytics": "1.5.9", - "@deriv-com/translations": "^1.3.2", + "@deriv-com/translations": "^1.3.3", "@deriv/account": "^1.0.0", "@deriv/cashier": "^1.0.0", "@deriv/cfd": "^1.0.0", diff --git a/packages/appstore/src/assets/svgs/trading-platform/ic-appstore-zero-spread.svg b/packages/appstore/src/assets/svgs/trading-platform/ic-appstore-zero-spread.svg new file mode 100644 index 000000000000..7bf648dc239a --- /dev/null +++ b/packages/appstore/src/assets/svgs/trading-platform/ic-appstore-zero-spread.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/appstore/src/assets/svgs/trading-platform/index.tsx b/packages/appstore/src/assets/svgs/trading-platform/index.tsx index 3a277ca0a2c7..874fb56867bb 100644 --- a/packages/appstore/src/assets/svgs/trading-platform/index.tsx +++ b/packages/appstore/src/assets/svgs/trading-platform/index.tsx @@ -19,6 +19,7 @@ import DerivGoBlack from 'Assets/svgs/trading-platform/ic-appstore-derivgo-black import Options from 'Assets/svgs/trading-platform/ic-appstore-options.svg'; import SmartTraderBlue from 'Assets/svgs/trading-platform/ic-appstore-smarttrader-blue.svg'; import SwapFree from 'Assets/svgs/trading-platform/ic-appstore-swap-free.svg'; +import ZeroSpread from 'Assets/svgs/trading-platform/ic-appstore-zero-spread.svg'; import Demo from 'Assets/svgs/trading-platform/ic-brand-demo.svg'; import { IconProps } from '../icon-types'; @@ -43,6 +44,7 @@ export const PlatformIcons = { Options, SmartTrader, SmartTraderBlue, + ZeroSpread, Standard, }; diff --git a/packages/appstore/src/components/app-content.tsx b/packages/appstore/src/components/app-content.tsx index e5d406f91ae7..2b1acd225114 100644 --- a/packages/appstore/src/components/app-content.tsx +++ b/packages/appstore/src/components/app-content.tsx @@ -5,6 +5,7 @@ import { Analytics } from '@deriv-com/analytics'; import Routes from 'Components/routes/routes'; import classNames from 'classnames'; import './app.scss'; +import './temporary-overrides.scss'; const AppContent: React.FC = observer(() => { const { ui, traders_hub } = useStore(); diff --git a/packages/appstore/src/components/app.scss b/packages/appstore/src/components/app.scss index c638ce925334..ff1c99927009 100644 --- a/packages/appstore/src/components/app.scss +++ b/packages/appstore/src/components/app.scss @@ -1,19 +1,19 @@ @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap'); .dashboard { - @include desktop { + @include desktop-screen { height: calc(100vh - #{$HEADER_HEIGHT} - #{$FOOTER_HEIGHT}); } - @include mobile { + @include mobile-or-tablet-screen { height: calc(100vh - #{$MOBILE_HEADER_HEIGHT}); } } .dashboard-onboarding { - @include desktop { + @include desktop-screen { height: inherit; } - @include mobile { + @include mobile-or-tablet-screen { height: calc(100vh - #{$MOBILE_HEADER_HEIGHT}); } } diff --git a/packages/appstore/src/components/cfds-listing-logged-out/cfds-listing-logged-out.tsx b/packages/appstore/src/components/cfds-listing-logged-out/cfds-listing-logged-out.tsx index 8fcfe5be63ce..62749dd07ba6 100644 --- a/packages/appstore/src/components/cfds-listing-logged-out/cfds-listing-logged-out.tsx +++ b/packages/appstore/src/components/cfds-listing-logged-out/cfds-listing-logged-out.tsx @@ -44,6 +44,7 @@ const CFDsListingLoggedOut = observer(() => { has_divider={!is_eu_user && getHasDivider(index, list_size, 3)} onAction={() => redirectToLogin(false, getLanguage())} market_type='all' + is_new /> ); })} diff --git a/packages/appstore/src/components/cfds-listing/__tests__/index.spec.tsx b/packages/appstore/src/components/cfds-listing/__tests__/index.spec.tsx index ca6cac2aa4bc..d02781ea45f5 100644 --- a/packages/appstore/src/components/cfds-listing/__tests__/index.spec.tsx +++ b/packages/appstore/src/components/cfds-listing/__tests__/index.spec.tsx @@ -6,6 +6,13 @@ import CFDsListing from '../index'; jest.mock('Components/containers/listing-container', () => jest.fn(({ children }) =>
{children}
) ); +jest.mock('@deriv-com/ui', () => ({ + useDevice: jest.fn(() => ({ + isDesktop: true, + isMobile: false, + isTablet: false, + })), +})); describe('CFDsListing', () => { const mock = mockStore({ diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 29fdbe22712c..702398b81fcd 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -23,12 +23,14 @@ backface-visibility: hidden; transition: transform 0.6s ease; transform: rotateY(0deg); - height: 100%; + @include mobile-or-tablet-screen { + height: 100%; + } } &__footer-content { background-color: var(--general-main-1); - @include mobile { + @include mobile-or-tablet-screen { position: sticky; bottom: 0; } @@ -37,11 +39,11 @@ background-color: var(--general-main-1); button { height: 4rem; - @include mobile { + @include mobile-or-tablet-screen { width: 100%; } } - @include mobile { + @include mobile-or-tablet-screen { position: sticky; bottom: 0; } @@ -56,7 +58,7 @@ overflow-y: scroll; perspective: 100rem; - @include mobile { + @include mobile-or-tablet-screen { display: flex; flex-direction: column; justify-content: space-between; @@ -64,7 +66,7 @@ } } &__flipped { - @include desktop { + @include desktop-screen { height: 70rem; overflow: scroll; } @@ -75,6 +77,10 @@ transition: transform 1.5s ease; transform: rotateY(-180deg); visibility: hidden; + + @include mobile-or-tablet-screen { + height: 100%; + } } } @@ -117,11 +123,11 @@ &__wrapper { margin: 3rem 5rem 1rem; display: flex; - @include desktop { + @include desktop-screen { justify-content: center; } gap: 1.6rem; - @include mobile { + @include mobile-or-tablet-screen { margin: 0; padding: 4rem; gap: 4rem; @@ -152,7 +158,7 @@ &-blank { height: 4rem; border-radius: 1.4rem; - @include mobile { + @include mobile-or-tablet-screen { height: 2rem; } } @@ -185,7 +191,7 @@ &__h2-header { min-height: 5rem; margin: 1rem 2rem; - @include mobile { + @include mobile-or-tablet-screen { margin-bottom: 2rem; min-height: auto; } @@ -195,7 +201,7 @@ display: flex; flex-direction: column; justify-content: space-between; - @include mobile { + @include mobile-or-tablet-screen { min-height: auto; width: 100%; } @@ -207,10 +213,10 @@ gap: 1rem; margin: 1rem; - @include desktop { + @include desktop-screen { min-height: 7.6rem; } - @include mobile { + @include mobile-or-tablet-screen { gap: 0; margin: 0; } @@ -219,7 +225,7 @@ &__footnote { display: flex; justify-content: center; - @include mobile { + @include mobile-or-tablet-screen { margin: unset; padding: 1.6rem 0.8rem; box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.08); @@ -232,7 +238,7 @@ &__jurisdiction-checkbox { display: flex; justify-content: center; - @include mobile { + @include mobile-or-tablet-screen { margin-bottom: 1rem; padding: 0.8rem; } @@ -258,7 +264,7 @@ .cfd-jurisdiction-card--financial { &__footnotes-container { - @include desktop { + @include desktop-screen { gap: 1rem; min-height: 7.6rem; margin: 1rem; @@ -278,7 +284,7 @@ &-perspective { -webkit-perspective: 100rem; perspective: 100rem; - @include mobile { + @include mobile-or-tablet-screen { width: 100%; } } @@ -295,7 +301,7 @@ &.financial { min-height: 55rem; } - @include mobile { + @include mobile-or-tablet-screen { height: 48rem; width: 100%; } @@ -362,7 +368,7 @@ } } &-description-height { - @include desktop { + @include desktop-screen { &-assets { min-height: 3.4rem; } @@ -504,14 +510,6 @@ color: var(--text-less-prominent); line-height: 1.45; } - &--tag { - background-color: $color-blue; - color: var(--text-colored-background); - border-radius: 0.2rem; - padding: 0 0.4rem; - font-weight: bold; - font-size: 1.3rem; - } &__mobile { &-title { @@ -524,6 +522,21 @@ flex-direction: column; flex-grow: 1; + &-heading--real { + padding: 0.2rem 0.4rem; + margin-left: 0.3rem; + background-color: var(--icon-grey-background); + border-radius: $BORDER_RADIUS; + } + + &-heading--demo { + background-color: $color-blue-8; + color: $color-blue-9; + border-radius: $BORDER_RADIUS; + padding: 0.2rem 0.4rem; + margin-left: 0.3rem; + } + &-balance { margin-left: 1.5rem; } @@ -582,7 +595,7 @@ &-text { padding: 0.5rem; - @include mobile { + @include mobile-or-tablet-screen { padding-right: 0.5rem; white-space: nowrap; } @@ -681,7 +694,7 @@ display: flex; flex-direction: column; margin: 4rem 1.6rem 6rem; - @include mobile { + @include mobile-or-tablet-screen { margin-top: 5rem; margin-bottom: 0; } @@ -748,7 +761,7 @@ gap: 0.8rem; } - @include mobile { + @include mobile-or-tablet-screen { margin-left: 0; margin-right: unset; } @@ -773,7 +786,7 @@ line-height: 1.5; margin-left: 2.1rem; margin-bottom: 4.2rem; - @include desktop { + @include desktop-screen { margin-left: 0; text-align: center; } @@ -781,7 +794,7 @@ &--hint { margin-top: 1.6rem; } - @include mobile { + @include mobile-or-tablet-screen { margin-bottom: 1.6rem; } } @@ -844,7 +857,7 @@ & .dc-input__label { top: 0.9rem; } - @include mobile { + @include mobile-or-tablet-screen { padding-bottom: 12rem; } } @@ -859,7 +872,7 @@ max-width: 300px; margin: 2.4em auto 0; - @include mobile { + @include mobile-or-tablet-screen { max-width: unset; } } @@ -877,7 +890,7 @@ &--button { margin-top: 1.6rem; - @include mobile { + @include mobile-or-tablet-screen { width: 100%; margin-top: 0.8rem; max-width: 30rem; @@ -896,7 +909,7 @@ margin-top: 3.2rem; width: 6.4rem; - @include mobile { + @include mobile-or-tablet-screen { width: 100%; max-width: 30rem; } @@ -908,10 +921,10 @@ .multi-step__component { text-align: center; } - @include desktop { + @include desktop-screen { max-width: calc(450px + 1rem); // needs extra padding for the scrollbar, otherwise it will cover the words } - @include mobile { + @include mobile-or-tablet-screen { padding: 0 1.6rem; margin-top: 2.4rem; @@ -935,7 +948,7 @@ backface-visibility: hidden; transition: transform 0.6s ease; - @include mobile { + @include mobile-or-tablet-screen { margin: 1.5rem 2.4rem 2.4rem; } @@ -945,7 +958,7 @@ grid-template-columns: 1fr 1fr; margin: 0 10rem; - @include mobile { + @include mobile-or-tablet-screen { grid-template-columns: 1fr; margin: 0 6.5rem 3rem; } @@ -1019,7 +1032,7 @@ } .upload-layout { - @include desktop { + @include desktop-screen { height: 100%; } } @@ -1027,7 +1040,7 @@ .account-form__poi-confirm-example { gap: 1.6rem; - @include mobile { + @include mobile-or-tablet-screen { gap: 0; } } @@ -1054,7 +1067,7 @@ &-details { max-width: 68rem; margin: auto; - @include mobile { + @include mobile-or-tablet-screen { overflow-y: scroll; } @@ -1091,7 +1104,7 @@ } } - @include desktop() { + @include desktop-screen { .onfido-container { padding-top: 1.6rem; } @@ -1123,14 +1136,14 @@ flex: 1; } } - @include desktop { + @include desktop-screen { overflow: hidden; & .details-form__description { width: 100%; } } - @include mobile { + @include mobile-or-tablet-screen { overflow: initial; grid-template-rows: 7rem minmax(10rem, 1fr); &__heading { @@ -1155,7 +1168,7 @@ height: auto; padding: 0 3rem; padding-bottom: 7rem; - @include mobile { + @include mobile-or-tablet-screen { overflow-y: auto; } } @@ -1221,7 +1234,7 @@ width: 45%; margin: 1.2rem auto; - @include mobile { + @include mobile-or-tablet-screen { width: 95%; } } @@ -1264,7 +1277,7 @@ align-items: center; height: 100%; - @include mobile { + @include mobile-or-tablet-screen { display: unset; position: relative; } @@ -1291,7 +1304,7 @@ align-items: unset; flex-direction: unset; - @include mobile { + @include mobile-or-tablet-screen { width: 95%; margin-top: 8px; } @@ -1308,7 +1321,7 @@ width: 45%; justify-content: unset; - @include mobile { + @include mobile-or-tablet-screen { width: 100%; padding: 0 1.2rem; overflow-y: unset; @@ -1380,7 +1393,7 @@ &__fieldset { width: 100%; - @include mobile { + @include mobile-or-tablet-screen { margin: 0 0 1.8rem; } @@ -1402,7 +1415,7 @@ &__submit-button { margin-left: 0.8rem; - @include mobile { + @include mobile-or-tablet-screen { margin-right: unset; } } @@ -1417,11 +1430,11 @@ height: 100%; position: relative; - @include mobile { + @include mobile-or-tablet-screen { max-height: calc(100% - 1rem); } } - @include mobile { + @include mobile-or-tablet-screen { overflow: hidden; } } @@ -1451,7 +1464,7 @@ .dc-modal__container_cfd-financial-stp-signup-modal { max-height: calc(100vh - 102px) !important; - @include desktop { + @include desktop-screen { display: grid; grid-template-rows: 6rem minmax(20rem, 1fr); } @@ -1482,7 +1495,7 @@ margin-inline-start: 0; } } - @include mobile { + @include mobile-or-tablet-screen { padding: 0.8rem 1.6rem 1.6rem; display: flex; grid-gap: 0.6rem; @@ -1518,7 +1531,7 @@ } &__inline-msg { margin: 2.4rem 2.4rem 0; - @include mobile { + @include mobile-or-tablet-screen { margin: 2.4rem 0; } } @@ -1535,13 +1548,13 @@ margin: 0.8rem auto; &__desc { - @include mobile { + @include mobile-or-tablet-screen { padding: 0 3.8rem; } } } &-footer { - @include mobile { + @include mobile-or-tablet-screen { position: absolute; bottom: 3.6rem; width: 100%; @@ -1565,7 +1578,7 @@ left: 7.6rem; top: 7.6rem; - @include mobile { + @include mobile-or-tablet-screen { left: 7.8rem; top: 5.8rem; } @@ -1584,7 +1597,7 @@ display: flex; flex-direction: column; gap: 1.2rem; - @include mobile { + @include mobile-or-tablet-screen { gap: 0.8rem; } } @@ -1597,7 +1610,7 @@ padding: 1.6rem 0 0.8rem; width: fit-content; } - @include mobile { + @include mobile-or-tablet-screen { font-size: 1.4rem; } } @@ -1608,7 +1621,7 @@ } .cfd-personal-details-form-error { @include typeface(--paragraph-left-normal-red); - @include desktop { + @include desktop-screen { white-space: nowrap; display: flex; align-items: flex-end; @@ -1631,7 +1644,7 @@ &--restricted { grid-template-columns: 1fr 2fr 1fr; } - @include mobile { + @include mobile-or-tablet-screen { width: 116vw; height: unset; } @@ -1643,7 +1656,7 @@ grid-template-columns: repeat($column_count, 1fr); } @else if $column_count == 5 { grid-template-columns: repeat($column_count - 1, 1fr); - @include mobile { + @include mobile-or-tablet-screen { grid-template-columns: repeat($column_count, 1fr); } } @@ -1836,7 +1849,7 @@ margin-top: 2.4rem; } } - @include mobile { + @include mobile-or-tablet-screen { height: 100%; font-size: 1.2rem; @@ -1930,6 +1943,13 @@ } } +.dc-mobile-dialog__content.dc-mobile-dialog__content--is-full-height:has(.dc-mobile-dialog__cfd-password-modal) { + @include mobile-or-tablet-screen { + display: flex; + justify-content: center; + } +} + .dc-modal__container_cfd-password-modal, .dc-mobile-dialog__cfd-password-modal { display: flex; @@ -1945,7 +1965,7 @@ justify-content: space-between; padding: 0 2.4rem 1.2rem; - @include mobile { + @include mobile-or-tablet-screen { padding: 0; } } @@ -1971,7 +1991,7 @@ .dc-input { &__label { top: 1.2rem; - @include mobile { + @include mobile-or-tablet-screen { top: 0.9rem; background-color: var(--fill-normal); } @@ -1980,7 +2000,7 @@ .dc-password-meter { &__bg { background: var(--general-section-2); - @include mobile { + @include mobile-or-tablet-screen { background: var(--fill-disabled); } } @@ -1989,7 +2009,7 @@ margin-top: 3em; } .cfd-password-reset { - @include mobile { + @include mobile-or-tablet-screen { flex: 1; } } @@ -1997,7 +2017,7 @@ flex-grow: 1; margin: auto; - @include mobile { + @include mobile-or-tablet-screen { width: calc(100vw - 4.8rem); max-width: 30rem; } @@ -2009,7 +2029,7 @@ .input-element { width: 100%; } - @include mobile { + @include mobile-or-tablet-screen { .cfd-password-modal__content { overflow-y: auto; overflow-x: hidden; @@ -2093,7 +2113,7 @@ flex-direction: column; max-width: 30rem; - @include desktop { + @include desktop-screen { margin-top: -2.5rem; } @@ -2206,7 +2226,7 @@ gap: 4rem; padding: 2.4rem 0; - @include mobile { + @include mobile-or-tablet-screen { min-height: 24rem; width: calc(100vw - 3.2rem); } @@ -2228,10 +2248,10 @@ } } &__password-area { - @include desktop { + @include desktop-screen { width: calc(min(34rem, 100vw)); } - @include mobile { + @include mobile-or-tablet-screen { width: 100%; max-width: calc(100% - 2.4rem); } @@ -2267,12 +2287,12 @@ justify-content: space-around; padding: 2.4rem 0 2rem; - @include mobile { + @include mobile-or-tablet-screen { width: calc(100vw - 3.2rem); height: 100%; } } - @include mobile { + @include mobile-or-tablet-screen { & .dc-form-submit-button { all: unset; } @@ -2301,7 +2321,7 @@ margin-top: 8px; font-weight: bold; } - @include mobile { + @include mobile-or-tablet-screen { &:not(:first-child):not(:last-child) { margin: 0; } @@ -2319,7 +2339,7 @@ } } } - @include mobile { + @include mobile-or-tablet-screen { display: grid; grid-gap: 2.4rem; grid-template-columns: 1fr 1fr 1fr; @@ -2380,7 +2400,7 @@ &-modal { &-description { margin: 1.5rem 0 2rem; - @include mobile { + @include mobile-or-tablet-screen { margin: 1rem 1rem 2rem; &--button { display: flex; @@ -2407,14 +2427,14 @@ justify-content: center; align-items: center; - @include mobile { + @include mobile-or-tablet-screen { padding: 1.4rem 1.6rem 2.4rem; } } &__icon { // to adjust the icon to the center margin: 0 0 2rem 2.4rem; - @include mobile { + @include mobile-or-tablet-screen { margin: 0 0 2.4rem 2.4rem; } } @@ -2424,7 +2444,7 @@ &__subtext { margin-bottom: 1.6rem; } - @include desktop { + @include desktop-screen { &__footer { &-button { padding: 0 1rem 1rem 0; diff --git a/packages/appstore/src/components/cfds-listing/index.tsx b/packages/appstore/src/components/cfds-listing/index.tsx index 1ae293f04ccb..ef00a646526b 100644 --- a/packages/appstore/src/components/cfds-listing/index.tsx +++ b/packages/appstore/src/components/cfds-listing/index.tsx @@ -2,7 +2,6 @@ import React, { Fragment, useEffect } from 'react'; import { observer, useStore } from '@deriv/stores'; import { Loading, Text, StaticUrl } from '@deriv/components'; import { - isMobile, formatMoney, getAuthenticationStatusInfo, Jurisdiction, @@ -11,6 +10,7 @@ import { moduleLoader, setPerformanceValue, } from '@deriv/shared'; +import { useDevice } from '@deriv-com/ui'; import { localize, Localize } from '@deriv/translations'; import { Analytics } from '@deriv-com/analytics'; import ListingContainer from 'Components/containers/listing-container'; @@ -35,6 +35,7 @@ const MigrationBanner = makeLazyLoader( )(); const CFDsListing = observer(() => { + const { isDesktop } = useDevice(); const { client, modules: { cfd }, @@ -66,7 +67,7 @@ const CFDsListing = observer(() => { financial_restricted_countries, } = traders_hub; - const { setAccountType, toggleCTraderTransferModal } = cfd; + const { setAccountType, toggleCTraderTransferModal, setProduct } = cfd; const { account_status, is_landing_company_loaded, @@ -186,18 +187,18 @@ const CFDsListing = observer(() => { return ( {localize('CFDs')} - + ) } description={} > - {isMobile() && } + {!isDesktop && }
@@ -210,9 +211,7 @@ const CFDsListing = observer(() => { {combined_cfd_mt5_accounts.map((existing_account, index: number) => { const list_size = combined_cfd_mt5_accounts.length; - const track_account_subtitle = is_demo - ? `${existing_account.tracking_name} Demo` - : existing_account.tracking_name; + const track_account_subtitle = existing_account.tracking_name; const has_mt5_account_status = existing_account?.status || is_idv_revoked @@ -226,6 +225,7 @@ const CFDsListing = observer(() => { action_type={existing_account.action_type} availability={selected_region} clickable_icon + is_new icon={existing_account.icon} sub_title={existing_account?.sub_title} name={!has_mt5_account_status ? existing_account?.name : ''} @@ -251,11 +251,13 @@ const CFDsListing = observer(() => { category: selected_account_type, type: existing_account.market_type, }); + setProduct(existing_account.product); setAppstorePlatform(existing_account.platform); getAccount(); } } else if (existing_account.action_type === 'multi-action') { const button_name = e?.currentTarget?.name; + setProduct(existing_account.product); if (button_name === 'transfer-btn') { Analytics.trackEvent('ce_tradershub_dashboard_form', { action: 'account_transfer', diff --git a/packages/appstore/src/components/containers/currency-switcher-container.scss b/packages/appstore/src/components/containers/currency-switcher-container.scss index 805482942ba9..77177aea312d 100644 --- a/packages/appstore/src/components/containers/currency-switcher-container.scss +++ b/packages/appstore/src/components/containers/currency-switcher-container.scss @@ -5,7 +5,7 @@ } } &__button { - @include desktop { + @include desktop-screen { margin-inline-end: 1rem; } } @@ -30,7 +30,7 @@ } } - @include mobile { + @include mobile-or-tablet-screen { width: 100%; } @@ -46,7 +46,7 @@ } &__arrow { - @include mobile { + @include mobile-or-tablet-screen { margin-inline-start: 1.5rem; } @@ -62,7 +62,7 @@ display: inline-flex; align-items: center; - @include mobile { + @include mobile-or-tablet-screen { .currency-switcher__button { white-space: unset; height: 4rem; diff --git a/packages/appstore/src/components/containers/listing-container.scss b/packages/appstore/src/components/containers/listing-container.scss index c9d2763ee6d7..877c6563c18c 100644 --- a/packages/appstore/src/components/containers/listing-container.scss +++ b/packages/appstore/src/components/containers/listing-container.scss @@ -5,7 +5,7 @@ padding: 2.4rem; border-radius: 2.4rem; - @include mobile { + @include mobile-or-tablet-screen { border: none; padding: 2.4rem 0; } @@ -14,7 +14,7 @@ display: inline-flex; width: 100%; - @include mobile { + @include mobile-or-tablet-screen { display: block; width: 100%; } @@ -36,7 +36,7 @@ align-items: center; } - @include mobile { + @include mobile-or-tablet-screen { display: flex; flex-direction: row; margin-inline-end: 0; @@ -51,7 +51,7 @@ gap: 1.6rem 4.8rem; padding-top: 2rem; - @include mobile { + @include mobile-or-tablet-screen { display: flex; flex-direction: column; } @@ -71,7 +71,7 @@ grid-column: 1 / span 3; gap: 1.6rem 4.8rem; - @include mobile { + @include mobile-or-tablet-screen { display: block; width: 100%; } diff --git a/packages/appstore/src/components/containers/trading-app-card.scss b/packages/appstore/src/components/containers/trading-app-card.scss index 31ef2f597e55..c0fd004d0fc7 100644 --- a/packages/appstore/src/components/containers/trading-app-card.scss +++ b/packages/appstore/src/components/containers/trading-app-card.scss @@ -47,9 +47,9 @@ height: fit-content; width: fit-content; margin-inline-start: 1rem; - background-color: var(--brand-red-coral); - color: var(--text-colored-background); - border-radius: $BORDER_RADIUS * 4; + background-color: $color-yellow-4; + color: $color-yellow-5; + border-radius: $BORDER_RADIUS; } } diff --git a/packages/appstore/src/components/containers/trading-app-card.tsx b/packages/appstore/src/components/containers/trading-app-card.tsx index c465e348bb4a..479d23e16dc9 100644 --- a/packages/appstore/src/components/containers/trading-app-card.tsx +++ b/packages/appstore/src/components/containers/trading-app-card.tsx @@ -21,6 +21,7 @@ import { getUrlSmartTrader, getUrlBinaryBot, MT5_ACCOUNT_STATUS, + CFD_PRODUCTS_TITLE, } from '@deriv/shared'; import OpenPositionsSVGModal from '../modals/open-positions-svg-modal'; import './trading-app-card.scss'; @@ -58,7 +59,6 @@ const TradingAppCard = ({ const { account_status: { authentication } = {} } = client; const [is_open_position_svg_modal_open, setIsOpenPositionSvgModalOpen] = React.useState(false); - const demo_label = localize('Demo'); const low_risk_cr_non_eu = content_flag === ContentFlag.LOW_RISK_CR_NON_EU; @@ -160,15 +160,10 @@ const TradingAppCard = ({ color='prominent' data-testid='dt_cfd-account-name' > - {!is_real && sub_title ? `${sub_title} ${demo_label}` : sub_title} + {sub_title} {short_code_and_region && ( - + {short_code_and_region} )} @@ -178,21 +173,15 @@ const TradingAppCard = ({ className='title' size='xs' line_height='s' - weight='bold' color={action_type === 'trade' ? 'prominent' : 'general'} data-testid={ action_type === 'get' || is_deriv_platform ? 'dt_platform-name' : 'dt_account-balance' } > - {!is_real && !sub_title && !is_deriv_platform ? `${name} ${localize('Demo')}` : name} + {name} - {is_new && ( - + {is_new && name === CFD_PRODUCTS_TITLE.ZEROSPREAD && ( + {localize('NEW!')} )} diff --git a/packages/appstore/src/components/elements/cfds-title/cfds-title.tsx b/packages/appstore/src/components/elements/cfds-title/cfds-title.tsx index 969b3c10d4bc..628590c0d432 100644 --- a/packages/appstore/src/components/elements/cfds-title/cfds-title.tsx +++ b/packages/appstore/src/components/elements/cfds-title/cfds-title.tsx @@ -1,21 +1,20 @@ import React from 'react'; +import { useDevice } from '@deriv-com/ui'; import { Text } from '@deriv/components'; -import { observer, useStore } from '@deriv/stores'; -import { localize } from '@deriv/translations'; +import { Localize } from '@deriv/translations'; import './cfds-title.scss'; -const CFDsTitle = observer(() => { - const { ui } = useStore(); - const { is_mobile } = ui; +const CFDsTitle = () => { + const { isDesktop } = useDevice(); - if (is_mobile) return null; + if (!isDesktop) return null; return (
- {localize('CFDs')} +
); -}); +}; export default CFDsTitle; diff --git a/packages/appstore/src/components/elements/options-title/options-title.tsx b/packages/appstore/src/components/elements/options-title/options-title.tsx index 42ed13befff2..65256ba1f036 100644 --- a/packages/appstore/src/components/elements/options-title/options-title.tsx +++ b/packages/appstore/src/components/elements/options-title/options-title.tsx @@ -1,17 +1,16 @@ import React from 'react'; +import { useDevice } from '@deriv-com/ui'; import { Text } from '@deriv/components'; -import { observer, useStore } from '@deriv/stores'; import { Localize } from '@deriv/translations'; type TOptionsTitle = { is_eu_user: boolean; }; -const OptionsTitle = observer(({ is_eu_user }: TOptionsTitle) => { - const { ui } = useStore(); - const { is_mobile } = ui; +const OptionsTitle = ({ is_eu_user }: TOptionsTitle) => { + const { isDesktop } = useDevice(); - if (is_mobile) return null; + if (!isDesktop) return null; return is_eu_user ? ( @@ -21,6 +20,6 @@ const OptionsTitle = observer(({ is_eu_user }: TOptionsTitle) => { ); -}); +}; export default OptionsTitle; diff --git a/packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.scss b/packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.scss index 6489f169e5d4..e44fcf86cf70 100644 --- a/packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.scss +++ b/packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.scss @@ -13,7 +13,7 @@ background-image: url('./../../public/images/traders-hub-logged-out-banner-bg-desktop.svg'); background-repeat: no-repeat; - @include mobile { + @include mobile-or-tablet-screen { height: 14.4rem; background-image: url('./../../public/images/traders-hub-logged-out-banner-bg-responsive.svg'); background-repeat: no-repeat; @@ -32,7 +32,7 @@ font-weight: 500; } - @include mobile { + @include mobile-or-tablet-screen { margin-inline-start: 1.6rem; } } @@ -46,7 +46,7 @@ font-size: 1.6rem; } - @include mobile { + @include mobile-or-tablet-screen { min-width: 6.4rem; padding: 0.5rem 1.2rem; } @@ -62,7 +62,7 @@ transform: scaleX(-1); } - @include mobile { + @include mobile-or-tablet-screen { margin-inline-end: 0; align-self: flex-end; } diff --git a/packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.tsx b/packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.tsx index 0a0b92c244f6..65216e54d386 100644 --- a/packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.tsx +++ b/packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useDevice } from '@deriv-com/ui'; import { getLanguage, Localize, localize } from '@deriv/translations'; import { Button, Text, Icon } from '@deriv/components'; import { useStore, observer } from '@deriv/stores'; @@ -7,8 +8,8 @@ import TrustpilotWidget from 'Components/trustpilot-widget'; import './get-started-trading-banner.scss'; const GetStartedTradingBanner = observer(() => { - const { ui, traders_hub } = useStore(); - const { is_mobile } = ui; + const { isDesktop } = useDevice(); + const { traders_hub } = useStore(); const { is_eu_user } = traders_hub; const desktopWidth = is_eu_user ? 326 : 445; @@ -20,7 +21,7 @@ const GetStartedTradingBanner = observer(() => {
- +
diff --git a/packages/appstore/src/components/loader/options-and-multipliers-skeleton/optionsAndMultipliers.scss b/packages/appstore/src/components/loader/options-and-multipliers-skeleton/optionsAndMultipliers.scss index db17f592396f..cbb4010b5895 100644 --- a/packages/appstore/src/components/loader/options-and-multipliers-skeleton/optionsAndMultipliers.scss +++ b/packages/appstore/src/components/loader/options-and-multipliers-skeleton/optionsAndMultipliers.scss @@ -5,7 +5,7 @@ justify-content: space-between; gap: 4.8rem; - @include mobile { + @include mobile-or-tablet-screen { display: none; } &__left { diff --git a/packages/appstore/src/components/main-title-bar/__tests__/index.spec.tsx b/packages/appstore/src/components/main-title-bar/__tests__/index.spec.tsx index d074a3e03c34..0b7624759789 100644 --- a/packages/appstore/src/components/main-title-bar/__tests__/index.spec.tsx +++ b/packages/appstore/src/components/main-title-bar/__tests__/index.spec.tsx @@ -5,6 +5,14 @@ import MainTitleBar from '..'; jest.mock('Components/banners/wallets-banner', () => jest.fn(() => 'WalletsBanner')); +jest.mock('@deriv-com/ui', () => ({ + useDevice: jest.fn(() => ({ + isDesktop: true, + isMobile: false, + isTablet: false, + })), +})); + describe('MainTitleBar', () => { const mock_store = mockStore({ modules: { diff --git a/packages/appstore/src/components/main-title-bar/asset-summary.scss b/packages/appstore/src/components/main-title-bar/asset-summary.scss index c4f58600259c..c6acce5db47f 100644 --- a/packages/appstore/src/components/main-title-bar/asset-summary.scss +++ b/packages/appstore/src/components/main-title-bar/asset-summary.scss @@ -3,7 +3,7 @@ flex-direction: column; margin-inline-start: auto; - @include mobile { + @include mobile-or-tablet-screen { align-items: center; } @@ -16,8 +16,9 @@ width: unset; } - @include mobile { - width: 23rem; + @include mobile-or-tablet-screen { + margin-inline: auto; + width: 10rem; } } @@ -25,7 +26,7 @@ display: flex; border-bottom: 4px dotted var(--checkbox-disabled-grey); - @include mobile { + @include mobile-or-tablet-screen { margin-top: 3rem; } } diff --git a/packages/appstore/src/components/main-title-bar/asset-summary.tsx b/packages/appstore/src/components/main-title-bar/asset-summary.tsx index ccabe152485a..4b9d590f5e6c 100644 --- a/packages/appstore/src/components/main-title-bar/asset-summary.tsx +++ b/packages/appstore/src/components/main-title-bar/asset-summary.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Text, Popover } from '@deriv/components'; import { localize } from '@deriv/translations'; -import { isMobile } from '@deriv/shared'; +import { useDevice } from '@deriv-com/ui'; import BalanceText from 'Components/elements/text/balance-text'; import { observer, useStore } from '@deriv/stores'; import './asset-summary.scss'; @@ -16,6 +16,7 @@ import { import { isRatesLoaded } from '../../helpers'; const AssetSummary = observer(() => { + const { isDesktop } = useDevice(); const { traders_hub, client, common, modules } = useStore(); const { selected_account_type, is_eu_user, no_CR_account, no_MF_account } = traders_hub; const { is_logging_in, is_switching, default_currency, is_landing_company_loaded, is_mt5_allowed } = client; @@ -66,13 +67,13 @@ const AssetSummary = observer(() => {
{has_active_related_deriv_account || selected_account_type === 'demo' ? ( - {!isMobile() ? ( + {isDesktop ? ( {localize('Total assets')} ) : null} { + const { isDesktop } = useDevice(); const { traders_hub, client } = useStore(); const { is_landing_company_loaded, is_switching, has_maltainvest_account } = client; const { state: wallet_migration_state } = useWalletMigration(); @@ -42,7 +44,7 @@ const MainTitleBar = () => { {show_wallets_banner && } - + {isDesktop ? (
@@ -55,49 +57,50 @@ const MainTitleBar = () => { )}
- - - - - -
-
- -
- {is_low_risk_cr_real_account && has_maltainvest_account && is_landing_company_loaded ? ( -
- {!is_switching ? ( - <> -
toggleRegulatorsCompareModal()} - > - -
- { - setActiveIndex(index); - handleTabItemClick(index); - }} - top - is_scrollable - is_overflow_hidden - > -
-
- - - ) : ( -
- -
- )} + ) : ( + + + + +
+
+
- ) : null} -
- - + {is_low_risk_cr_real_account && has_maltainvest_account && is_landing_company_loaded ? ( +
+ {!is_switching ? ( + <> +
toggleRegulatorsCompareModal()} + > + +
+ { + setActiveIndex(index); + handleTabItemClick(index); + }} + top + is_scrollable + is_overflow_hidden + > +
+
+ + + ) : ( +
+ +
+ )} +
+ ) : null} +
+ + + )} ); }; diff --git a/packages/appstore/src/components/modals/regulators-compare-modal/regulators-compare-modal.scss b/packages/appstore/src/components/modals/regulators-compare-modal/regulators-compare-modal.scss index 212acecd2726..13851e77c405 100644 --- a/packages/appstore/src/components/modals/regulators-compare-modal/regulators-compare-modal.scss +++ b/packages/appstore/src/components/modals/regulators-compare-modal/regulators-compare-modal.scss @@ -41,7 +41,7 @@ padding: 1rem 0.8rem; } } - @include mobile { + @include mobile-screen { .dc-table { height: 100%; margin: 1.6rem 1.7rem; diff --git a/packages/appstore/src/components/modals/regulators-compare-modal/regulators-compare-modal.tsx b/packages/appstore/src/components/modals/regulators-compare-modal/regulators-compare-modal.tsx index c183fe98ffa8..bacaa2634476 100644 --- a/packages/appstore/src/components/modals/regulators-compare-modal/regulators-compare-modal.tsx +++ b/packages/appstore/src/components/modals/regulators-compare-modal/regulators-compare-modal.tsx @@ -1,11 +1,13 @@ import React from 'react'; +import { useDevice } from '@deriv-com/ui'; import { observer, useStore } from '@deriv/stores'; import { localize } from '@deriv/translations'; +import { Modal, MobileDialog, UILoader } from '@deriv/components'; import RegulatorsCompareModalContent from './regulators-compare-modal-content'; -import { Modal, DesktopWrapper, MobileDialog, MobileWrapper, UILoader } from '@deriv/components'; import './regulators-compare-modal.scss'; const RegulatorsCompareModal = () => { + const { isDesktop } = useDevice(); const { traders_hub, ui } = useStore(); const { is_regulators_compare_modal_visible, toggleRegulatorsCompareModal } = traders_hub; const { disableApp, enableApp } = ui; @@ -15,7 +17,7 @@ const RegulatorsCompareModal = () => { return ( }> - + {isDesktop ? ( { > - - + ) : ( { > - + )} ); }; diff --git a/packages/appstore/src/components/options-multipliers-listing/index.tsx b/packages/appstore/src/components/options-multipliers-listing/index.tsx index 72f2a3bff8c9..5f724b28a73b 100644 --- a/packages/appstore/src/components/options-multipliers-listing/index.tsx +++ b/packages/appstore/src/components/options-multipliers-listing/index.tsx @@ -4,6 +4,7 @@ import { Text, StaticUrl } from '@deriv/components'; import { ContentFlag, setPerformanceValue } from '@deriv/shared'; import { useStore } from '@deriv/stores'; import { Localize, localize } from '@deriv/translations'; +import { useDevice } from '@deriv-com/ui'; import ListingContainer from 'Components/containers/listing-container'; import TradingAppCard from 'Components/containers/trading-app-card'; import { BrandConfig } from 'Constants/platform-config'; @@ -13,6 +14,7 @@ import PlatformLoader from 'Components/pre-loader/platform-loader'; import OptionsDescription from 'Components/elements/options-description'; const OptionsAndMultipliersListing = observer(() => { + const { isDesktop } = useDevice(); const { traders_hub, client, ui } = useStore(); const { available_platforms, @@ -26,7 +28,7 @@ const OptionsAndMultipliersListing = observer(() => { } = traders_hub; const { is_landing_company_loaded, is_eu, has_maltainvest_account, real_account_creation_unlock_date } = client; - const { setShouldShowCooldownModal, openRealAccountSignup, is_mobile } = ui; + const { setShouldShowCooldownModal, openRealAccountSignup } = ui; const low_risk_cr_non_eu = content_flag === ContentFlag.LOW_RISK_CR_NON_EU; @@ -37,7 +39,7 @@ const OptionsAndMultipliersListing = observer(() => { const cr_demo = content_flag === ContentFlag.CR_DEMO; const OptionsTitle = () => { - if (is_mobile) return null; + if (!isDesktop) return null; if (low_risk_cr_non_eu || high_risk_cr || cr_demo) { return ( diff --git a/packages/appstore/src/components/pre-loader/regulations-switcher-loader.tsx b/packages/appstore/src/components/pre-loader/regulations-switcher-loader.tsx index e0ac0315bf70..2757728008f5 100644 --- a/packages/appstore/src/components/pre-loader/regulations-switcher-loader.tsx +++ b/packages/appstore/src/components/pre-loader/regulations-switcher-loader.tsx @@ -1,21 +1,24 @@ -import ContentLoader from 'react-content-loader'; import React from 'react'; -import { DesktopWrapper, MobileWrapper } from '@deriv/components'; +import ContentLoader from 'react-content-loader'; +import { useDevice } from '@deriv-com/ui'; + +const RegulationsSwitcherLoader = () => { + const { isDesktop } = useDevice(); -const RegulationsSwitcherLoader = () => ( - - - - - - - - -); + return ( + + {isDesktop ? ( + + ) : ( + + )} + + ); +}; export default RegulationsSwitcherLoader; diff --git a/packages/appstore/src/components/pre-loader/total-assets-loader.tsx b/packages/appstore/src/components/pre-loader/total-assets-loader.tsx index 20aba49d3495..afe4b4e3c2ef 100644 --- a/packages/appstore/src/components/pre-loader/total-assets-loader.tsx +++ b/packages/appstore/src/components/pre-loader/total-assets-loader.tsx @@ -1,16 +1,23 @@ import ContentLoader from 'react-content-loader'; import React from 'react'; -import { DesktopWrapper, MobileWrapper } from '@deriv/components'; +import { useDevice } from '@deriv-com/ui'; -const TotalAssetsLoader = () => ( - - - - - - - - -); +const TotalAssetsLoader = () => { + const { isDesktop } = useDevice(); + + return ( + + {isDesktop ? ( + + ) : ( + + )} + + ); +}; export default TotalAssetsLoader; diff --git a/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.scss b/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.scss index 785498651f19..06ff3fe36ad2 100644 --- a/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.scss +++ b/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.scss @@ -4,17 +4,16 @@ margin-bottom: 2.4rem; display: flex; + @include mobile-or-tablet-screen { + align-items: center; + } + img { width: 100%; object-fit: contain; } &__content { - @include mobile { - padding: 1.4rem 1.6rem; - width: 25rem; - } - display: flex; flex-direction: column; align-items: flex-start; @@ -25,5 +24,17 @@ z-index: 1; padding: 3rem 4.8rem; width: 50rem; + + @include mobile-screen { + padding: 1.4rem 1.6rem; + width: 25rem; + top: auto; + } + + @include tablet-screen { + padding: 2.4rem 1.6rem; + width: 27rem; + top: auto; + } } } diff --git a/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.tsx b/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.tsx index 5d7496054639..6743a00a2995 100644 --- a/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.tsx +++ b/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.tsx @@ -1,19 +1,17 @@ import React, { useEffect } from 'react'; -import './real-account-creation-banner.scss'; +import { useDevice } from '@deriv-com/ui'; import { getUrlBase, Jurisdiction } from '@deriv/shared'; import { Analytics } from '@deriv-com/analytics'; import { Localize } from '@deriv/translations'; import { Text, Button } from '@deriv/components'; import { observer, useStore } from '@deriv/stores'; +import './real-account-creation-banner.scss'; const RealAccountCreationBanner = observer(() => { - const { - ui: { is_mobile }, - } = useStore(); - + const { isDesktop } = useDevice(); const { ui } = useStore(); const { openRealAccountSignup, is_dark_mode_on } = ui; - const device = is_mobile ? 'mobile' : 'desktop'; + const device = !isDesktop ? 'mobile' : 'desktop'; const handleClick = () => { Analytics.trackEvent('ce_tradershub_banner', { @@ -42,7 +40,7 @@ const RealAccountCreationBanner = observer(() => { />
- +