diff --git a/.github/actions/build_and_push_docker_image/action.yml b/.github/actions/build_and_push_docker_image/action.yml index cb4b171822a6..c87f54904335 100644 --- a/.github/actions/build_and_push_docker_image/action.yml +++ b/.github/actions/build_and_push_docker_image/action.yml @@ -46,12 +46,6 @@ runs: - name: Build docker image 🐳 run: docker build -t ${DOCKERHUB_ORGANISATION}/${APP_NAME}:${APP_VERSION} -t ${DOCKERHUB_ORGANISATION}/${APP_NAME}:${{ github.ref_name }} . shell: bash - - name: Verify nginx image - run: | - set -e - docker run --rm ${DOCKERHUB_ORGANISATION}/${APP_NAME}:${{ github.ref_name }} nginx -t - echo "docker image validated successfully" - shell: bash - name: Pushing Image to docker hub 🐳 run: | echo ${{ inputs.DOCKERHUB_PASSWORD }}| docker login -u ${{ inputs.DOCKERHUB_USERNAME }} --password-stdin diff --git a/.github/workflows/release_production.yml b/.github/workflows/release_production.yml index 62eefbc225ff..1027262b5c89 100644 --- a/.github/workflows/release_production.yml +++ b/.github/workflows/release_production.yml @@ -50,8 +50,8 @@ jobs: - name: Build Docker image and push to Docker hub and K8S uses: "./.github/actions/build_and_push_docker_image" with: - DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }} - DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }} + DOCKERHUB_USERNAME: ${{ secrets.DOCKER_USERNAME }} + DOCKERHUB_PASSWORD: ${{ secrets.DOCKER_PASSWORD }} DOCKERHUB_ORGANISATION: ${{ secrets.DOCKERHUB_ORGANISATION }} K8S_NAMESPACE: ${{ secrets.K8S_NAMESPACE }} KUBE_SERVER: ${{ secrets.KUBE_SERVER }} diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts index dc809c4fa404..d000fed00179 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/packages/cfd/src/Components/props.types.ts @@ -7,6 +7,8 @@ export type TCFDPlatform = 'dxtrade' | 'mt5' | 'ctrader' | 'derivez'; export type TCFDsPlatformType = 'dxtrade' | 'derivez' | 'mt5' | 'ctrader' | ''; +export type TShortcode = DetailsOfEachMT5Loginid['landing_company_short']; + export type TCFDAccountCopy = { text: string | undefined; className: string; @@ -87,10 +89,10 @@ export type TTradingPlatformAvailableAccount = { }; signup: string[]; }; - shortcode: 'bvi' | 'labuan' | 'maltainvest' | 'svg' | 'vanuatu'; + shortcode?: TShortcode; sub_account_type: string; account_type?: 'real' | 'demo'; - landing_company_short?: 'bvi' | 'labuan' | 'svg' | 'vanuatu'; + landing_company_short?: TShortcode; }; export type TModifiedTradingPlatformAvailableAccount = Omit & { @@ -235,7 +237,7 @@ export type TTradingPlatformAccounts = { /** * Landing company shortcode of the DXTrade account. */ - landing_company_short?: 'bvi' | 'labuan' | 'malta' | 'maltainvest' | 'svg' | 'vanuatu'; + landing_company_short?: DetailsOfEachMT5Loginid['landing_company_short']; /** * Login of DXTrade account. */ @@ -279,7 +281,7 @@ export type TJurisdictionData = { export type TDetailsOfEachMT5Loginid = DetailsOfEachMT5Loginid & { display_login?: string; - landing_company_short?: string; + landing_company_short?: TShortcode; short_code_and_region?: string; mt5_acc_auth_status?: string | null; selected_mt5_jurisdiction?: TOpenAccountTransferMeta & diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-button.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-button.tsx index ac5323a24fd1..7bc1c800b621 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-button.tsx +++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-button.tsx @@ -19,7 +19,7 @@ const CFDCompareAccountsButton = observer(({ trading_platforms, is_demo }: TComp const history = useHistory(); const market_type = getMarketType(trading_platforms); - const market_type_shortcode = market_type.concat('_', trading_platforms.shortcode); + const market_type_shortcode = market_type.concat('_', trading_platforms.shortcode ?? ''); const { modules: { cfd }, common, diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-description.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-description.tsx index 550c4901dceb..cb667c141ad3 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-description.tsx +++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-description.tsx @@ -9,7 +9,7 @@ import { REGION } from '../../Helpers/cfd-config'; const CFDCompareAccountsDescription = ({ trading_platforms, is_demo }: TCompareAccountsCard) => { const market_type = getMarketType(trading_platforms); - const market_type_shortcode = market_type.concat('_', trading_platforms.shortcode); + const market_type_shortcode = market_type.concat('_', trading_platforms.shortcode ?? ''); const juridisction_data = getJuridisctionDescription(market_type_shortcode); const { traders_hub } = useStore(); const { selected_region } = traders_hub; diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-title-icon.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-title-icon.tsx index babd29009e52..7d8c0066a694 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-title-icon.tsx +++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-title-icon.tsx @@ -8,7 +8,7 @@ import { CFD_PLATFORMS, MARKET_TYPE_SHORTCODE } from '../../Helpers/cfd-config'; const CFDCompareAccountsTitleIcon = ({ trading_platforms, is_eu_user, is_demo }: TCompareAccountsCard) => { const market_type = !is_eu_user ? getMarketType(trading_platforms) : 'CFDs'; - const market_type_shortcode = market_type.concat('_', trading_platforms.shortcode); + const market_type_shortcode = market_type.concat('_', trading_platforms.shortcode ?? ''); const jurisdiction_card_icon = trading_platforms.platform === CFD_PLATFORMS.DXTRADE || trading_platforms.platform === CFD_PLATFORMS.CTRADER ? getAccountIcon(trading_platforms.platform) diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index 3825364e3c43..c92484520172 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -24,7 +24,7 @@ export type TCFDPersonalDetailsContainerProps = { onSubmit: (index: number, value: { [key: string]: string }) => void; }; -type CFD_Platform = 'dxtrade' | 'mt5' | 'derivez' | 'ctrader'; +export type CFD_Platform = 'dxtrade' | 'mt5' | 'derivez' | 'ctrader'; export type TCFDChangePasswordConfirmationProps = { confirm_label?: string; diff --git a/packages/cfd/src/Helpers/compare-accounts-config.ts b/packages/cfd/src/Helpers/compare-accounts-config.ts index 37de7c5bb4c2..89268df19550 100644 --- a/packages/cfd/src/Helpers/compare-accounts-config.ts +++ b/packages/cfd/src/Helpers/compare-accounts-config.ts @@ -13,7 +13,7 @@ const getHighlightedIconLabel = ( is_demo?: boolean ): TInstrumentsIcon[] => { const market_type = getMarketType(trading_platforms); - const market_type_shortcode = market_type.concat('_', trading_platforms.shortcode); + const market_type_shortcode = market_type.concat('_', trading_platforms.shortcode ?? ''); // Forex for these: MT5 Financial Vanuatu, MT5 Financial Labuan const forex_label = market_type_shortcode === MARKET_TYPE_SHORTCODE.FINANCIAL_LABUAN || diff --git a/packages/cfd/src/features/hooks/useCurrentList.ts b/packages/cfd/src/features/hooks/useCurrentList.ts new file mode 100644 index 000000000000..4ff5076cb38a --- /dev/null +++ b/packages/cfd/src/features/hooks/useCurrentList.ts @@ -0,0 +1,51 @@ +import { useStore } from '@deriv/stores'; +import { useMT5AccountsList, useDxtradeAccountsList, useCtraderAccountsList } from '@deriv/api'; +import { getAccountListKey, CFD_PLATFORMS, Jurisdiction } from '@deriv/shared'; + +type MT5AccountsList = NonNullable['data']>[number]; +type DxtradeAccountsList = NonNullable['data']>[number]; +type CtraderAccountsList = NonNullable['data']>[number]; + +type TCurrentList = { + [key: string]: MT5AccountsList | DxtradeAccountsList | CtraderAccountsList; +}; + +/* + This hook is used to get the existing_accounts_data +*/ +const useCurrentList = () => { + const current_list: TCurrentList = {}; + const { traders_hub } = useStore(); + const { data: mt5_accounts } = useMT5AccountsList(); + const { data: dxtrade_accounts } = useDxtradeAccountsList(); + const { data: ctrader_accounts } = useCtraderAccountsList(); + const show_eu_related_content = traders_hub.show_eu_related_content; + + mt5_accounts + ?.filter(acc => + show_eu_related_content + ? acc.landing_company_short === Jurisdiction.MALTA_INVEST + : acc.landing_company_short !== Jurisdiction.MALTA_INVEST + ) + .forEach(account => { + current_list[getAccountListKey(account, CFD_PLATFORMS.MT5, account.landing_company_short)] = { + ...account, + }; + }); + + dxtrade_accounts?.forEach(account => { + current_list[getAccountListKey(account, CFD_PLATFORMS.DXTRADE, account.landing_company_short)] = { + ...account, + }; + }); + + ctrader_accounts?.forEach(account => { + current_list[getAccountListKey(account, CFD_PLATFORMS.CTRADER, account.landing_company_short)] = { + ...account, + }; + }); + + return { current_list }; +}; + +export default useCurrentList; diff --git a/packages/shared/src/utils/contract/contract.tsx b/packages/shared/src/utils/contract/contract.tsx index ab75dc558875..66b5de92d5a9 100644 --- a/packages/shared/src/utils/contract/contract.tsx +++ b/packages/shared/src/utils/contract/contract.tsx @@ -254,3 +254,17 @@ export const getLocalizedTurbosSubtype = (contract_type = '') => { ); }; + +export const clickAndKeyEventHandler = ( + callback: () => void, + e?: React.MouseEvent | React.KeyboardEvent +) => { + if (e) { + e.preventDefault(); + if (e.type !== 'keydown' || (e.type === 'keydown' && (e as React.KeyboardEvent).key === 'Enter')) { + callback(); + } + } else { + callback(); + } +}; diff --git a/packages/stores/types.ts b/packages/stores/types.ts index 10b22f337660..d10b421ecc2e 100644 --- a/packages/stores/types.ts +++ b/packages/stores/types.ts @@ -229,7 +229,7 @@ type TTradingPlatformAvailableAccount = { }; signup: string[]; }; - shortcode: 'bvi' | 'labuan' | 'svg' | 'vanuatu' | 'maltainvest'; + shortcode?: DetailsOfEachMT5Loginid['landing_company_short']; sub_account_type: string; }; @@ -884,7 +884,7 @@ type TTradersHubStore = { action_type: 'get' | 'none' | 'trade' | 'dxtrade' | 'multi-action'; key: string; name: string; - landing_company_short?: 'bvi' | 'labuan' | 'svg' | 'vanuatu' | 'maltainvest'; + landing_company_short?: DetailsOfEachMT5Loginid['landing_company_short']; platform?: TPlatform; availability?: TRegionAvailability; description?: string; diff --git a/packages/trader/src/Assets/Trading/Categories/Description/accumulator-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/accumulator-trade-description.tsx index c0f81a24e013..5dd67ccfe803 100644 --- a/packages/trader/src/Assets/Trading/Categories/Description/accumulator-trade-description.tsx +++ b/packages/trader/src/Assets/Trading/Categories/Description/accumulator-trade-description.tsx @@ -2,26 +2,58 @@ import React from 'react'; import { Localize } from '@deriv/translations'; import { Text } from '@deriv/components'; -const AccumulatorTradeDescription = ({ onClick }: { onClick: React.MouseEventHandler }) => { +const AccumulatorTradeDescription = ({ + onClick, +}: { + onClick: (e?: React.MouseEvent | React.KeyboardEvent) => void; +}) => { const content = [ ]} + components={[ + , + ]} key='1' />, ]} + components={[ + , + ]} key='2' />, ]} + components={[ + , + ]} key='3' />, ]} + components={[ + , + ]} key='4' />, ]; diff --git a/packages/trader/src/Assets/Trading/Categories/Description/multiplier-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/multiplier-trade-description.tsx index 663a99f6c630..66d8bf7b9ab9 100644 --- a/packages/trader/src/Assets/Trading/Categories/Description/multiplier-trade-description.tsx +++ b/packages/trader/src/Assets/Trading/Categories/Description/multiplier-trade-description.tsx @@ -7,7 +7,7 @@ const MultiplierTradeDescription = ({ onClick, }: { is_multiplier_fx?: boolean; - onClick: React.MouseEventHandler; + onClick: (e?: React.MouseEvent | React.KeyboardEvent) => void; }) => { const content = [ , ]} + components={[ + , + ]} key='4' />, { content: is_multiplier_fx ? ( ]} + components={[ + , + ]} key='5' /> ) : ( ]} + components={[ + , + ]} key='5' /> ), }, ]} + components={[ + , + ]} key='6' />, ] as Array; diff --git a/packages/trader/src/Assets/Trading/Categories/Description/turbos-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/turbos-trade-description.tsx index a2e9f79fe5fe..3affad09ddc1 100644 --- a/packages/trader/src/Assets/Trading/Categories/Description/turbos-trade-description.tsx +++ b/packages/trader/src/Assets/Trading/Categories/Description/turbos-trade-description.tsx @@ -2,7 +2,11 @@ import React from 'react'; import { Localize } from '@deriv/translations'; import { Text } from '@deriv/components'; -const TurbosTradeDescription = ({ onClick }: { onClick: React.MouseEventHandler }) => { +const TurbosTradeDescription = ({ + onClick, +}: { + onClick: (e?: React.MouseEvent | React.KeyboardEvent) => void; +}) => { const content = [ { text: ( @@ -13,7 +17,14 @@ const TurbosTradeDescription = ({ onClick }: { onClick: React.MouseEventHandler< text: ( ]} + components={[ + , + ]} /> ), }, @@ -29,7 +40,14 @@ const TurbosTradeDescription = ({ onClick }: { onClick: React.MouseEventHandler< text: ( ]} + components={[ + , + ]} /> ), }, @@ -37,7 +55,14 @@ const TurbosTradeDescription = ({ onClick }: { onClick: React.MouseEventHandler< text: ( ]} + components={[ + , + ]} /> ), }, diff --git a/packages/trader/src/Assets/Trading/Categories/Description/vanilla-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/vanilla-trade-description.tsx index 78510fdf21f9..40e3c937ba9b 100644 --- a/packages/trader/src/Assets/Trading/Categories/Description/vanilla-trade-description.tsx +++ b/packages/trader/src/Assets/Trading/Categories/Description/vanilla-trade-description.tsx @@ -7,7 +7,7 @@ const VanillaTradeDescription = ({ onClick, }: { is_vanilla_fx?: boolean; - onClick: React.MouseEventHandler; + onClick: (e?: React.MouseEvent | React.KeyboardEvent) => void; }) => { const content = [ , - , + , ]} key='2' />, @@ -32,7 +37,12 @@ const VanillaTradeDescription = ({ , + , , ]} key='4' @@ -40,7 +50,14 @@ const VanillaTradeDescription = ({ ) : ( ]} + components={[ + , + ]} key='4' /> ), @@ -49,13 +66,27 @@ const VanillaTradeDescription = ({ content: is_vanilla_fx ? ( ]} + components={[ + , + ]} key='5' /> ) : ( ]} + components={[ + , + ]} key='5' /> ), diff --git a/packages/trader/src/Assets/Trading/Categories/trade-categories.tsx b/packages/trader/src/Assets/Trading/Categories/trade-categories.tsx index abfcaf944c6b..a64b17a16382 100644 --- a/packages/trader/src/Assets/Trading/Categories/trade-categories.tsx +++ b/packages/trader/src/Assets/Trading/Categories/trade-categories.tsx @@ -30,7 +30,7 @@ const TradeCategories = ({ is_multiplier_fx = false, }: { category?: string; - onClick: React.MouseEventHandler; + onClick: (e?: React.MouseEvent | React.KeyboardEvent) => void; is_vanilla_fx?: boolean; is_multiplier_fx?: boolean; }) => { diff --git a/packages/trader/src/Modules/Trading/Components/Elements/mobile-widget.tsx b/packages/trader/src/Modules/Trading/Components/Elements/mobile-widget.tsx index 66f004b6c4d8..da2b3eb4face 100644 --- a/packages/trader/src/Modules/Trading/Components/Elements/mobile-widget.tsx +++ b/packages/trader/src/Modules/Trading/Components/Elements/mobile-widget.tsx @@ -80,15 +80,15 @@ const MobileWidget = observer(() => { ) : (
-
toggleWidget(0)}> +
-
toggleWidget(1)}> + +
-
toggleWidget(1)}> + +
+
)} toggleWidget(tab_index)} tab_index={tab_index} /> diff --git a/packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.tsx b/packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.tsx index 29289f5d46bd..6432127b6579 100644 --- a/packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.tsx +++ b/packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Button, ThemedScrollbars, ButtonToggle } from '@deriv/components'; import { observer, useStore } from '@deriv/stores'; -import { TURBOS, VANILLALONG } from '@deriv/shared'; +import { clickAndKeyEventHandler, TURBOS, VANILLALONG } from '@deriv/shared'; import { localize } from '@deriv/translations'; import { Analytics } from '@deriv/analytics'; import TradeCategories from 'Assets/Trading/Categories/trade-categories'; @@ -48,7 +48,9 @@ const Info = observer(({ handleSelect, item, list }: TInfo) => { const is_glossary_tab_selected = selected_tab === TABS.GLOSSARY; const width = is_mobile ? '328' : '528'; const scroll_bar_height = has_toggle_buttons ? '464px' : '560px'; - const onClickGlossary = () => setSelectedTab(TABS.GLOSSARY); + const onClickGlossary = (e?: React.MouseEvent | React.KeyboardEvent) => { + clickAndKeyEventHandler(() => setSelectedTab(TABS.GLOSSARY), e); + }; React.useEffect(() => { return () => { diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/__tests__/widgets.spec.tsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/__tests__/widgets.spec.tsx index fca2afa4f306..0ad5923f5a2f 100644 --- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/__tests__/widgets.spec.tsx +++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/__tests__/widgets.spec.tsx @@ -24,11 +24,13 @@ const default_mock_store_multipliers = { }, }; const new_label = 'NEW!'; +const radio_group_options_modal = 'RadioGroupOptionsModal'; jest.mock('Modules/Trading/Containers/radio-group-options-modal', () => jest.fn(prop => ( -
- RadioGroupOptionsModal component +
+ {radio_group_options_modal} +
)) ); @@ -55,7 +57,7 @@ describe('AccumulatorOptionsWidget', () => { userEvent.click(info_icon); expect(screen.getByText(/Your stake will grow/i)).toBeInTheDocument(); - expect(screen.getByText(/RadioGroupOptionsModal/i)).toHaveAttribute('data-open', 'false'); + expect(screen.getByText(radio_group_options_modal)).toHaveAttribute('data-open', 'false'); }); it('if Accum contract is not open, user is able to open RadioGroupOptionsModal', () => { const new_mock_store = { ...default_mock_store_accumulators }; @@ -66,10 +68,9 @@ describe('AccumulatorOptionsWidget', () => { }; render(mockAccumulatorOptionsWidget(mockStore(new_mock_store))); - const toggle_button = screen.getByText(/RadioGroupOptionsModal/i); - userEvent.click(toggle_button); + userEvent.click(screen.getByText('Open Modal')); - expect(screen.getByText(/RadioGroupOptionsModal/i)).toHaveAttribute('data-open', 'true'); + expect(screen.getByText(radio_group_options_modal)).toHaveAttribute('data-open', 'true'); }); }); @@ -87,12 +88,12 @@ describe('MultiplierOptionsWidget', () => { expect(screen.getByText(/x10/i)).toBeInTheDocument(); }); - it('should not render new! label if chosen symbol is not syntetic or is equal to Vol 150 (1 sec) or 250 (1 sec)', () => { + it('should not render new! label if chosen symbol is not synthetic or is equal to Vol 150 (1 sec) or 250 (1 sec)', () => { render(mockMultiplierOptionsWidget(mockStore(default_mock_store_multipliers))); expect(screen.queryByText(new_label)).not.toBeInTheDocument(); }); - it('should render new! label if chosen symbol is syntetic and is not equal to Vol 150 (1 sec) or 250 (1 sec)', () => { + it('should render new! label if chosen symbol is synthetic and is not equal to Vol 150 (1 sec) or 250 (1 sec)', () => { const new_mock_store = { ...default_mock_store_multipliers }; new_mock_store.modules.trade.symbol = '1HZ100V'; @@ -100,12 +101,12 @@ describe('MultiplierOptionsWidget', () => { expect(screen.getByText(new_label)).toBeInTheDocument(); }); - it('shoul open RadioGroupOptionsModal if user clicked on Multiplier mobile widget', () => { + it('should open RadioGroupOptionsModal if user clicked on Multiplier mobile widget', () => { render(mockMultiplierOptionsWidget(mockStore(default_mock_store_multipliers))); - expect(screen.getByText(/RadioGroupOptionsModal/i)).toHaveAttribute('data-open', 'false'); + expect(screen.getByText(radio_group_options_modal)).toHaveAttribute('data-open', 'false'); userEvent.click(screen.getByText(/x10/i)); - expect(screen.getByText(/RadioGroupOptionsModal/i)).toHaveAttribute('data-open', 'true'); + expect(screen.getByText(radio_group_options_modal)).toHaveAttribute('data-open', 'true'); }); }); diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/widgets.tsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/widgets.tsx index ec886c93e3ad..04f13aefc4fc 100644 --- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/widgets.tsx +++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/widgets.tsx @@ -42,7 +42,7 @@ const AmountWidget = ({ amount, currency, expiration, is_crypto_multiplier }: TA return ( -
+ {is_crypto_multiplier && ( -
+ )} ); @@ -102,7 +102,7 @@ const RadioGroupOptionsWidget = ({ return ( -
{displayed_trade_param}
{!!tooltip_message && ( - e.stopPropagation()}> + e.stopPropagation()} + onKeyDown={e => e.stopPropagation()} + > )} -
+ ); }; diff --git a/packages/trader/src/sass/app/_common/mobile-widget.scss b/packages/trader/src/sass/app/_common/mobile-widget.scss index 7c551f9bc700..4a9a2df8a6f5 100644 --- a/packages/trader/src/sass/app/_common/mobile-widget.scss +++ b/packages/trader/src/sass/app/_common/mobile-widget.scss @@ -1,6 +1,7 @@ /** @define mobile-widget */ .mobile-widget { - border-radius: 4px; + border-radius: $BORDER_RADIUS; + border-width: 0; padding: 1rem 0.8rem; height: 4rem; background-color: var(--general-main-1); @@ -11,6 +12,11 @@ flex: 1; position: relative; + &__button { + background: none; + border: none; + padding: 0; + } &__digit { border-radius: $BORDER_RADIUS; padding: 1rem 0.8rem; diff --git a/packages/wallets/src/components/AccountsList/AccountsList.tsx b/packages/wallets/src/components/AccountsList/AccountsList.tsx index 3b1a2498a1e6..9e820432b527 100644 --- a/packages/wallets/src/components/AccountsList/AccountsList.tsx +++ b/packages/wallets/src/components/AccountsList/AccountsList.tsx @@ -1,8 +1,13 @@ import React, { useState } from 'react'; import { CFDPlatformsList } from '../../features'; import useDevice from '../../hooks/useDevice'; -import { TabList, TabPanel, TabPanels, Tabs } from '../Base'; import { OptionsAndMultipliersListing } from '../OptionsAndMultipliersListing'; +import { + WalletsPrimaryTabList, + WalletsPrimaryTabPanel, + WalletsPrimaryTabPanels, + WalletsPrimaryTabs, +} from '../WalletsPrimaryTabs'; import { WalletMobileTourGuide } from '../WalletTourGuide'; import './AccountsList.scss'; @@ -13,24 +18,24 @@ const AccountsList = () => { if (isMobile) { return ( - + {/* TODO: Localization needed on tab headers */} - - - + + + - - + + - - + + - + ); } diff --git a/packages/wallets/src/components/Base/Tabs/TabPanel.tsx b/packages/wallets/src/components/Base/Tabs/TabPanel.tsx deleted file mode 100644 index df164d030c85..000000000000 --- a/packages/wallets/src/components/Base/Tabs/TabPanel.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -const TabPanel = ({ children }: React.PropsWithChildren) => { - return
{children}
; -}; - -export default TabPanel; diff --git a/packages/wallets/src/components/Base/Tabs/index.ts b/packages/wallets/src/components/Base/Tabs/index.ts deleted file mode 100644 index c82393cef446..000000000000 --- a/packages/wallets/src/components/Base/Tabs/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { TabList } from './TabList'; -import TabPanel from './TabPanel'; -import TabPanels from './TabPanels'; -import Tabs from './Tabs'; - -export { TabList, TabPanel, TabPanels, Tabs }; diff --git a/packages/wallets/src/components/Base/WalletDropdown/WalletDropdown.scss b/packages/wallets/src/components/Base/WalletDropdown/WalletDropdown.scss index 28a32016c9e8..fdbfa6836262 100644 --- a/packages/wallets/src/components/Base/WalletDropdown/WalletDropdown.scss +++ b/packages/wallets/src/components/Base/WalletDropdown/WalletDropdown.scss @@ -5,7 +5,6 @@ &__button { all: unset; - position: absolute; right: 1.6rem; transform: rotate(0); transform-origin: 50% 45%; @@ -17,17 +16,14 @@ } &__content { - height: 4rem; width: 100%; - border-radius: 0.4rem; - border: 0.1rem solid var(--system-light-5-active-background, #d6dadb); background: var(--system-light-8-primary-background, #fff); display: flex; align-items: center; - } - &__content:has(&__field:focus) { - border: 0.1rem solid var(--brand-blue, #85acb0); + .wallets-textfield__field { + cursor: pointer; + } } &__field { @@ -45,11 +41,6 @@ transition: border-color 0.2s; cursor: unset; user-select: none; - - &--with-icon { - padding-left: 4rem; - } - &::selection { background-color: transparent; } @@ -73,7 +64,7 @@ label, &__field:focus ~ &__label { position: absolute; - top: -10%; + bottom: 5.5rem; display: block; transition: 0.2s; font-size: 1rem; @@ -95,7 +86,7 @@ flex-direction: column; align-items: flex-start; z-index: 2; - margin-top: 0.4rem; + margin-top: -1.2rem; border-radius: 0.4rem; background: var(--system-light-8-primary-background, #fff); box-shadow: 0 3.2rem 6.4rem 0 rgba(14, 14, 14, 0.14); diff --git a/packages/wallets/src/components/Base/WalletDropdown/WalletDropdown.tsx b/packages/wallets/src/components/Base/WalletDropdown/WalletDropdown.tsx index 08852bc48b84..e7864a11b574 100644 --- a/packages/wallets/src/components/Base/WalletDropdown/WalletDropdown.tsx +++ b/packages/wallets/src/components/Base/WalletDropdown/WalletDropdown.tsx @@ -5,19 +5,21 @@ import ArrowIcon from '../../../public/images/pointed-down-arrow-icon.svg'; import reactNodeToString from '../../../utils/reactNodeToString'; import { TGenericSizes } from '../types'; import { WalletText } from '../WalletText'; +import WalletTextField, { WalletTextFieldProps } from '../WalletTextField/WalletTextField'; import './WalletDropdown.scss'; type TProps = { icon?: React.ReactNode; - label?: React.ReactNode; + label?: WalletTextFieldProps['label']; list: { text?: React.ReactNode; value?: string; }[]; listHeight?: Extract; + name: WalletTextFieldProps['name']; onSelect: (value: string) => void; - type?: 'comboBox' | 'prompt'; - value: string | undefined; + value?: WalletTextFieldProps['value']; + variant?: 'comboBox' | 'prompt'; }; const WalletDropdown: React.FC = ({ @@ -25,9 +27,10 @@ const WalletDropdown: React.FC = ({ label, list, listHeight = 'md', + name, onSelect, - type = 'prompt', value, + variant = 'prompt', }) => { const [items, setItems] = useState(list); const [shouldFilterList, setShouldFilterList] = useState(false); @@ -35,7 +38,17 @@ const WalletDropdown: React.FC = ({ setShouldFilterList(false); setItems(list); }, [list]); - const { getInputProps, getItemProps, getLabelProps, getMenuProps, getToggleButtonProps, isOpen } = useCombobox({ + const { + closeMenu, + getInputProps, + getItemProps, + getLabelProps, + getMenuProps, + getToggleButtonProps, + isOpen, + openMenu, + } = useCombobox({ + defaultSelectedItem: items.find(item => item.value === value) ?? null, items, itemToString(item) { return item ? reactNodeToString(item.text) : ''; @@ -58,26 +71,43 @@ const WalletDropdown: React.FC = ({ }, onSelectedItemChange({ selectedItem }) { onSelect(selectedItem?.value ?? ''); + closeMenu(); }, - selectedItem: items.find(item => item.value === value) ?? null, }); + const handleInputClick = useCallback(() => { + variant === 'comboBox' && setShouldFilterList(true); + + if (isOpen) { + closeMenu(); + } else { + openMenu(); + } + }, [closeMenu, isOpen, openMenu, variant]); + useEffect(() => { setItems(list); }, [list]); return ( -
+
- {icon &&
{icon}
} - setShouldFilterList(true)} placeholder={reactNodeToString(label)} - readOnly={type !== 'comboBox'} + readOnly={variant !== 'comboBox'} + renderLeftIcon={() => icon} + renderRightIcon={() => ( + + )} type='text' value={value} {...getInputProps()} @@ -86,19 +116,11 @@ const WalletDropdown: React.FC = ({ className={classNames('wallets-dropdown__label', { 'wallets-dropdown__label--with-icon': !!icon, })} - htmlFor='dropdown-text' + htmlFor={name} {...getLabelProps()} > {label} -
    {isOpen && diff --git a/packages/wallets/src/components/Base/WalletTextField/WalletTextField.scss b/packages/wallets/src/components/Base/WalletTextField/WalletTextField.scss index 7a81dba27861..3e90978000eb 100644 --- a/packages/wallets/src/components/Base/WalletTextField/WalletTextField.scss +++ b/packages/wallets/src/components/Base/WalletTextField/WalletTextField.scss @@ -61,7 +61,7 @@ &__field:placeholder-shown ~ &__label { font-size: 1.4rem; cursor: text; - top: 20%; + top: 1.3rem; padding: 0; } @@ -90,7 +90,13 @@ } &__icon { - margin-left: 1.6rem; + &-left { + margin-right: 0.8rem; + } + + &-right { + margin-left: 1.6rem; + } } &__message-container { diff --git a/packages/wallets/src/components/Base/WalletTextField/WalletTextField.tsx b/packages/wallets/src/components/Base/WalletTextField/WalletTextField.tsx index 4c3c46e17d25..ddbb63cd8d31 100644 --- a/packages/wallets/src/components/Base/WalletTextField/WalletTextField.tsx +++ b/packages/wallets/src/components/Base/WalletTextField/WalletTextField.tsx @@ -1,4 +1,4 @@ -import React, { ChangeEvent, ComponentProps, FC, useState } from 'react'; +import React, { ChangeEvent, ComponentProps, forwardRef, Ref, useState } from 'react'; import classNames from 'classnames'; import { FormikErrors } from 'formik'; import HelperMessage, { HelperMessageProps } from './HelperMessage'; @@ -9,61 +9,72 @@ export interface WalletTextFieldProps extends ComponentProps<'input'>, HelperMes errorMessage?: FormikErrors | FormikErrors[] | string[] | string; isInvalid?: boolean; label?: string; + renderLeftIcon?: () => React.ReactNode; renderRightIcon?: () => React.ReactNode; showMessage?: boolean; } -const WalletTextField: FC = ({ - defaultValue = '', - isInvalid = false, - label, - maxLength, - message, - name = 'wallet-textfield', - onChange, - renderRightIcon, - showMessage = false, - ...rest -}) => { - const [value, setValue] = useState(defaultValue); +const WalletTextField = forwardRef( + ( + { + defaultValue = '', + isInvalid = false, + label, + maxLength, + message, + name = 'wallet-textfield', + onChange, + renderLeftIcon, + renderRightIcon, + showMessage = false, + ...rest + }: WalletTextFieldProps, + ref: Ref + ) => { + const [value, setValue] = useState(defaultValue); - const handleChange = (e: ChangeEvent) => { - const newValue = e.target.value; - setValue(newValue); - onChange?.(e); - }; + const handleChange = (e: ChangeEvent) => { + const newValue = e.target.value; + setValue(newValue); + onChange?.(e); + }; - return ( -
    -
    - - {label && ( - - )} - {typeof renderRightIcon === 'function' && ( -
    {renderRightIcon()}
    - )} + return ( +
    +
    + {typeof renderLeftIcon === 'function' && ( +
    {renderLeftIcon()}
    + )} + + {label && ( + + )} + {typeof renderRightIcon === 'function' && ( +
    {renderRightIcon()}
    + )} +
    +
    + {showMessage && } +
    -
    - {showMessage && } -
    -
    - ); -}; + ); + } +); WalletTextField.displayName = 'WalletTextField'; export default WalletTextField; diff --git a/packages/wallets/src/components/Base/index.ts b/packages/wallets/src/components/Base/index.ts index 2d3b09b18e32..5aa0961cf181 100644 --- a/packages/wallets/src/components/Base/index.ts +++ b/packages/wallets/src/components/Base/index.ts @@ -1,10 +1,10 @@ +export * from '../WalletsPrimaryTabs'; export * from './Divider'; export * from './IconButton'; export * from './InlineMessage'; export * from './ModalStepWrapper'; export * from './ModalWrapper'; export * from './ProgressBar'; -export * from './Tabs'; export * from './Tooltip'; export * from './WalletAlertMessage'; export * from './WalletButton'; diff --git a/packages/wallets/src/components/FlowField/FlowTextField.tsx b/packages/wallets/src/components/FlowField/FlowTextField.tsx index 28b8aaaf3253..e7ab3ef20024 100644 --- a/packages/wallets/src/components/FlowField/FlowTextField.tsx +++ b/packages/wallets/src/components/FlowField/FlowTextField.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import React, { forwardRef, Ref } from 'react'; import { Field, FieldProps } from 'formik'; import WalletTextField, { WalletTextFieldProps } from '../Base/WalletTextField/WalletTextField'; @@ -12,7 +12,7 @@ export interface TFlowFieldProps extends WalletTextFieldProps { * Use this component when you are using the FlowProvider with a form and several inputs, * and you want those input values to be tracked and validated */ -const FlowTextField: FC = ({ isInvalid, name, ...rest }) => { +const FlowTextField = forwardRef(({ isInvalid, name, ...rest }: TFlowFieldProps, ref: Ref) => { return ( {({ field, form, meta }: FieldProps) => { @@ -22,11 +22,13 @@ const FlowTextField: FC = ({ isInvalid, name, ...rest }) => { {...field} errorMessage={form.errors[name]} isInvalid={isInvalid || (meta.value !== meta.initialValue && Boolean(form.errors[name]))} + ref={ref} /> ); }} ); -}; +}); +FlowTextField.displayName = 'FlowTextField'; export default FlowTextField; diff --git a/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx b/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx index b3616e8e1fd6..3f81b1c2646e 100644 --- a/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx +++ b/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx @@ -37,8 +37,8 @@ const SentEmailContent: React.FC = ({ platform }) => { return (
    } renderButtons={() => ( = ({ description, renderButtons, re return (
    ['size']; description: ReactNode; + descriptionSize?: ComponentProps['size']; icon?: ReactNode; renderButtons?: () => | ReactElement> @@ -21,8 +21,8 @@ type TProps = { * at the moment of writing this, there are already 3 different patterns use to display ex */ const WalletsActionScreen: React.FC> = ({ - desciptionSize = 'md', description, + descriptionSize = 'md', icon, renderButtons, title, @@ -40,7 +40,7 @@ const WalletsActionScreen: React.FC> = ({ {isValidElement(description) ? ( description ) : ( - + {description} )} diff --git a/packages/wallets/src/components/Base/Tabs/TabList.scss b/packages/wallets/src/components/WalletsPrimaryTabs/WalletsPrimaryTabList.scss similarity index 92% rename from packages/wallets/src/components/Base/Tabs/TabList.scss rename to packages/wallets/src/components/WalletsPrimaryTabs/WalletsPrimaryTabList.scss index 87de95d5119f..4bc9c2cad5fd 100644 --- a/packages/wallets/src/components/Base/Tabs/TabList.scss +++ b/packages/wallets/src/components/WalletsPrimaryTabs/WalletsPrimaryTabList.scss @@ -9,6 +9,8 @@ border-radius: 0.7rem; &-item { + background: inherit; + border: none; grid-row: 1; display: flex; justify-content: center; diff --git a/packages/wallets/src/components/Base/Tabs/TabList.tsx b/packages/wallets/src/components/WalletsPrimaryTabs/WalletsPrimaryTabList.tsx similarity index 67% rename from packages/wallets/src/components/Base/Tabs/TabList.tsx rename to packages/wallets/src/components/WalletsPrimaryTabs/WalletsPrimaryTabList.tsx index d9b2c67c2a04..2d26352c0bc5 100644 --- a/packages/wallets/src/components/Base/Tabs/TabList.tsx +++ b/packages/wallets/src/components/WalletsPrimaryTabs/WalletsPrimaryTabList.tsx @@ -1,18 +1,18 @@ import React from 'react'; -import { useTabs } from './Tabs'; -import './TabList.scss'; +import { useTabs } from './WalletsPrimaryTabs'; +import './WalletsPrimaryTabList.scss'; -type TTabListProps = { +type WalletPrimaryTabListProps = { list: string[]; }; -export const TabList = ({ list }: TTabListProps) => { +const WalletsPrimaryTabList = ({ list }: WalletPrimaryTabListProps) => { const { activeTabIndex, setActiveTabIndex } = useTabs(); return (
    {list.map((tab, i) => ( -
    { onClick={() => setActiveTabIndex(i)} > {tab} -
    + ))}
    ); }; + +export default WalletsPrimaryTabList; diff --git a/packages/wallets/src/components/WalletsPrimaryTabs/WalletsPrimaryTabPanel.tsx b/packages/wallets/src/components/WalletsPrimaryTabs/WalletsPrimaryTabPanel.tsx new file mode 100644 index 000000000000..5bcbf92656ae --- /dev/null +++ b/packages/wallets/src/components/WalletsPrimaryTabs/WalletsPrimaryTabPanel.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const WalletsPrimaryTabPanel = ({ children }: React.PropsWithChildren) => { + return
    {children}
    ; +}; + +export default WalletsPrimaryTabPanel; diff --git a/packages/wallets/src/components/Base/Tabs/TabPanels.tsx b/packages/wallets/src/components/WalletsPrimaryTabs/WalletsPrimaryTabPanels.tsx similarity index 63% rename from packages/wallets/src/components/Base/Tabs/TabPanels.tsx rename to packages/wallets/src/components/WalletsPrimaryTabs/WalletsPrimaryTabPanels.tsx index 738bbe80506e..6e71b34d72d9 100644 --- a/packages/wallets/src/components/Base/Tabs/TabPanels.tsx +++ b/packages/wallets/src/components/WalletsPrimaryTabs/WalletsPrimaryTabPanels.tsx @@ -1,7 +1,7 @@ import React, { Children } from 'react'; -import { useTabs } from './Tabs'; +import { useTabs } from './WalletsPrimaryTabs'; -const TabPanels = ({ children }: React.PropsWithChildren) => { +const WalletsPrimaryTabPanels = ({ children }: React.PropsWithChildren) => { const { activeTabIndex } = useTabs(); return ( @@ -15,4 +15,4 @@ const TabPanels = ({ children }: React.PropsWithChildren) => { ); }; -export default TabPanels; +export default WalletsPrimaryTabPanels; diff --git a/packages/wallets/src/components/Base/Tabs/Tabs.tsx b/packages/wallets/src/components/WalletsPrimaryTabs/WalletsPrimaryTabs.tsx similarity index 81% rename from packages/wallets/src/components/Base/Tabs/Tabs.tsx rename to packages/wallets/src/components/WalletsPrimaryTabs/WalletsPrimaryTabs.tsx index d7de5608c5b6..20b36633ac83 100644 --- a/packages/wallets/src/components/Base/Tabs/Tabs.tsx +++ b/packages/wallets/src/components/WalletsPrimaryTabs/WalletsPrimaryTabs.tsx @@ -11,7 +11,7 @@ export const useTabs = () => { const context = useContext(TabsContext); if (!context) { - throw new Error('Seems you forgot to wrap the components in ""'); + throw new Error('Seems you forgot to wrap the components in ""'); } return context; @@ -21,7 +21,7 @@ type TTabsProps = { className?: string; }; -export const Tabs = ({ children, className }: React.PropsWithChildren) => { +export const WalletsPrimaryTabs = ({ children, className }: React.PropsWithChildren) => { const [activeTabIndex, setActiveTabIndex] = useState(0); return ( @@ -31,4 +31,4 @@ export const Tabs = ({ children, className }: React.PropsWithChildren { Identity verification
    {/* TODO: Update dropdown after Formik is implemented */} -
    - null} - value={undefined} - /> -
    + null} + value={undefined} + />
    Details diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHints.tsx b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHints.tsx index 7bbababe92d6..40f3a5938f8e 100644 --- a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHints.tsx +++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHints.tsx @@ -7,7 +7,7 @@ import { DocumentRuleHint } from './DocumentRuleHint'; import './DocumentRuleHints.scss'; type TProps = { - docType: 'driverLicense' | 'identityCard' | 'nimcSlip' | 'passport'; + docType: 'drivingLicense' | 'identityCard' | 'nimcSlip' | 'passport'; }; const DocumentRuleHints: React.FC = ({ docType }) => ( diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DrivingLicenseDocumentUpload/DrivingLicenseDocumentUpload.scss b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DrivingLicenseDocumentUpload/DrivingLicenseDocumentUpload.scss new file mode 100644 index 000000000000..cd1905b90081 --- /dev/null +++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DrivingLicenseDocumentUpload/DrivingLicenseDocumentUpload.scss @@ -0,0 +1,79 @@ +.wallets-driving-license-document-upload { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 2.4rem; + padding: 2.4rem; + width: fit-content; + background: var(--light-8-primary-background, #fff); + + @include mobile { + width: 100%; + } + + &__document-section { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1.7rem; + + @include mobile { + gap: 1.6rem; + } + } + + &__dropzones { + width: 100%; + display: flex; + align-items: flex-start; + gap: 2.4rem; + + @include mobile { + flex-direction: column; + } + + &--left { + width: 100%; + + & > .wallets-dropzone { + padding: 4rem; + } + } + + &--right { + width: 100%; + + & > .wallets-dropzone { + padding: 4rem 2.4rem; + } + } + + & .wallets-dropzone__container { + height: 25rem; + min-width: 32.4rem; + + @include mobile { + min-width: 100%; + } + } + + & .wallets-dropzone { + @include mobile { + padding: 2rem; + } + } + } + + &__input-group { + display: flex; + gap: 2.4rem; + padding-bottom: 2rem; + width: 100%; + + @include mobile { + flex-direction: column; + gap: 1.6rem; + } + } +} diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DrivingLicenseDocumentUpload/DrivingLicenseDocumentUpload.tsx b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DrivingLicenseDocumentUpload/DrivingLicenseDocumentUpload.tsx new file mode 100644 index 000000000000..3cbcd9b4f5c1 --- /dev/null +++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DrivingLicenseDocumentUpload/DrivingLicenseDocumentUpload.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { Divider, Dropzone, WalletText, WalletTextField } from '../../../../../../components'; +import DrivingLicenseCardBack from '../../../../../../public/images/accounts/document-back.svg'; +import DrivingLicenseCardFront from '../../../../../../public/images/accounts/driving-license-front.svg'; +import Calendar from '../../../../../../public/images/calendar.svg'; +import { DocumentRuleHints } from '../DocumentRuleHints'; +import './DrivingLicenseDocumentUpload.scss'; + +const DrivingLicenseDocumentUpload = () => { + return ( +
    + First, enter your Driving licence number and the expiry date. +
    + + } type='date' /> +
    + +
    + Next, upload the front and back of your driving licence. +
    +
    + } + maxSize={8388608} + /> +
    +
    + } + maxSize={8388608} + /> +
    +
    + +
    +
    + ); +}; + +export default DrivingLicenseDocumentUpload; diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DrivingLicenseDocumentUpload/index.ts b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DrivingLicenseDocumentUpload/index.ts new file mode 100644 index 000000000000..bafc7fbc34ea --- /dev/null +++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DrivingLicenseDocumentUpload/index.ts @@ -0,0 +1 @@ +export { default as DrivingLicenseDocumentUpload } from './DrivingLicenseDocumentUpload'; diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/IdentityCardDocumentUpload.tsx b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/IdentityCardDocumentUpload.tsx index ad8f06aca13f..f46873cfc396 100644 --- a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/IdentityCardDocumentUpload.tsx +++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/IdentityCardDocumentUpload.tsx @@ -8,7 +8,7 @@ import './IdentityCardDocumentUpload.scss'; const IdentityCardDocumentUpload = () => { return ( -
    +
    First, enter your Identity card number and the expiry date.
    diff --git a/packages/wallets/src/features/accounts/screens/PersonalDetails/PersonalDetails.tsx b/packages/wallets/src/features/accounts/screens/PersonalDetails/PersonalDetails.tsx index 02839e7e42b3..b574f68c9c33 100644 --- a/packages/wallets/src/features/accounts/screens/PersonalDetails/PersonalDetails.tsx +++ b/packages/wallets/src/features/accounts/screens/PersonalDetails/PersonalDetails.tsx @@ -24,9 +24,10 @@ const PersonalDetails = () => { text: residence.text as ReactNode, value: residence.value ?? '', }))} + name='wallets-personal-details__dropdown-citizenship' onSelect={() => null} - type='comboBox' value={undefined} + variant='comboBox' /> { text: residence.text as ReactNode, value: residence.value ?? '', }))} + name='wallets-personal-details__dropdown-pob' onSelect={() => null} - type='comboBox' value={undefined} + variant='comboBox' /> { text: residence.text as ReactNode, value: residence.value ?? '', }))} + name='wallets-personal-details__dropdown-tax-residence' onSelect={() => null} - type='comboBox' value={undefined} + variant='comboBox' /> null} value={undefined} /> null} - type='comboBox' value={undefined} + variant='comboBox' />
    diff --git a/packages/wallets/src/features/accounts/screens/ResubmitPOA/ResubmitPOA.scss b/packages/wallets/src/features/accounts/screens/ResubmitPOA/ResubmitPOA.scss index 93cc534aaf3f..2c9d041288ca 100644 --- a/packages/wallets/src/features/accounts/screens/ResubmitPOA/ResubmitPOA.scss +++ b/packages/wallets/src/features/accounts/screens/ResubmitPOA/ResubmitPOA.scss @@ -16,6 +16,14 @@ padding: 1.6rem; } + .wallets-textfield { + max-width: 84rem; + + @include mobile { + max-width: 100%; + } + } + &__address { display: flex; flex-direction: column; diff --git a/packages/wallets/src/features/accounts/screens/ResubmitPOA/ResubmitPOA.tsx b/packages/wallets/src/features/accounts/screens/ResubmitPOA/ResubmitPOA.tsx index 9f64cb91d23e..b7976aa3084f 100644 --- a/packages/wallets/src/features/accounts/screens/ResubmitPOA/ResubmitPOA.tsx +++ b/packages/wallets/src/features/accounts/screens/ResubmitPOA/ResubmitPOA.tsx @@ -38,6 +38,7 @@ const ResubmitPOA: React.FC = () => { label='State/Province' list={statesList} listHeight='sm' + name='wallets-resubmit-poa__dropdown' onSelect={handleSelect} value={selectedState} /> diff --git a/packages/wallets/src/features/cashier/modules/Transactions/Transactions.tsx b/packages/wallets/src/features/cashier/modules/Transactions/Transactions.tsx index aa4616cf2140..f22cbe1a7ac8 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/Transactions.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/Transactions.tsx @@ -79,6 +79,7 @@ const Transactions = () => { icon={} label='Filter' list={filterOptionsList} + name='wallets-transactions__dropdown' onSelect={value => setFilterValue(value)} value={filterValue} /> diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss b/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss index 20db422b5047..ceb8935f4ed3 100644 --- a/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss +++ b/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss @@ -27,7 +27,6 @@ } &__tab { - padding-top: 2.4rem; margin-bottom: 3.2rem; justify-self: center; width: 100%; @@ -47,25 +46,14 @@ } } } - - &__content { + &__btn { display: flex; - flex-direction: column; - align-items: center; - gap: 2.4rem; - width: 100%; - &__icon { - text-align: center; - } - &__text { - display: flex; - flex-direction: column; - align-items: center; - gap: 0.8rem; - } - &__btn { - display: flex; - gap: 0.8rem; + gap: 0.8rem; + } + + &__sent-email-wrapper { + .wallets-sent-email-content { + padding: unset; } } } diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.tsx b/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.tsx index ed41692b8d5f..25b7243fd56f 100644 --- a/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.tsx +++ b/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.tsx @@ -39,7 +39,7 @@ const ChangePassword = () => { ))}
    -
    {tabs[activeTab].content}
    + <>{tabs[activeTab].content}
    diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/ContentTemplate.tsx b/packages/wallets/src/features/cfd/screens/ChangePassword/ContentTemplate.tsx deleted file mode 100644 index fa65dc351920..000000000000 --- a/packages/wallets/src/features/cfd/screens/ChangePassword/ContentTemplate.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { WalletText } from '../../../../components/Base'; - -interface ContentTemplateProps { - bodyText: React.ReactNode; - button: React.ReactNode; - headingText: string; - icon: React.ReactNode; -} - -const ContentTemplate: React.FC = ({ bodyText, button, headingText, icon }) => ( - <> -
    {icon}
    -
    - - {headingText} - - {bodyText} -
    -
    {button}
    - -); - -export default ContentTemplate; diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/MT5ChangePasswordScreens.tsx b/packages/wallets/src/features/cfd/screens/ChangePassword/MT5ChangePasswordScreens.tsx index 808ec5a0f5ca..10dd6dc97899 100644 --- a/packages/wallets/src/features/cfd/screens/ChangePassword/MT5ChangePasswordScreens.tsx +++ b/packages/wallets/src/features/cfd/screens/ChangePassword/MT5ChangePasswordScreens.tsx @@ -1,63 +1,54 @@ import React, { useState } from 'react'; -import { WalletButton, WalletText } from '../../../../components/Base'; +import { SentEmailContent, WalletButton, WalletsActionScreen, WalletText } from '../../../../components'; import { useModal } from '../../../../components/ModalProvider'; -import EmailIcon from '../../../../public/images/change-password-email.svg'; import MT5PasswordIcon from '../../../../public/images/ic-mt5-password.svg'; -import ContentTemplate from './ContentTemplate'; const MT5ChangePasswordScreens = () => { - const [activeScreen, setActiveScreen] = useState(0); + type TChangePasswordScreenIndex = 'confirmationScreen' | 'emailVerification' | 'introScreen'; - const handleClick = () => setActiveScreen(prev => prev + 1); + const [activeScreen, setActiveScreen] = useState('introScreen'); + const handleClick = (nextScreen: TChangePasswordScreenIndex) => setActiveScreen(nextScreen); const { hide } = useModal(); - const ChangePasswordScreens = [ - { - bodyText: ( - - Use this password to log in to your Deriv MT5 accounts on the desktop, web, and mobile apps. - - ), - button: , - headingText: 'Deriv MT5 password', - icon: , - }, - { + const ChangePasswordScreens = { + confirmationScreen: { bodyText: ( This will change the password to all of your Deriv MT5 accounts. ), button: ( - <> - {/* TODO: Double confirm with the designers or QA on the behavior of the Cancel button*/} +
    hide()} size='lg' text='Cancel' variant='outlined' /> - {/* TODO: Append logic send email for password reset to Confirm Button */} - - + handleClick('emailVerification')} size='lg' text='Confirm' /> +
    ), headingText: 'Confirm to change your Deriv MT5 password', icon: , }, - { - bodyText: ( - - Please click on the link in the email to change your Deriv MT5 password. - - ), - button: hide()} size='lg' text='Didn’t receive the email?' variant='ghost' />, // TODO: Add logic send email password reset - headingText: 'We’ve sent you an email', - icon: , + introScreen: { + bodyText: 'Use this password to log in to your Deriv MT5 accounts on the desktop, web, and mobile apps.', + button: handleClick('confirmationScreen')} size='lg' text='Change password' />, + headingText: 'Deriv MT5 password', + icon: , }, - ]; + }; + + if (activeScreen === 'emailVerification') + return ( +
    + +
    + ); return ( - ChangePasswordScreens[activeScreen].button} + title={ChangePasswordScreens[activeScreen].headingText} /> ); }; diff --git a/packages/wallets/src/public/images/accounts/driving-license-front.svg b/packages/wallets/src/public/images/accounts/driving-license-front.svg new file mode 100644 index 000000000000..d3c0303fbbf3 --- /dev/null +++ b/packages/wallets/src/public/images/accounts/driving-license-front.svg @@ -0,0 +1 @@ + \ No newline at end of file