diff --git a/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx b/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx index 319d1817e8ec..901477c7a513 100644 --- a/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx +++ b/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx @@ -1,24 +1,27 @@ -import React, { useState } from 'react'; +import React, { useCallback, useMemo, useState } from 'react'; import { useHistory } from 'react-router-dom'; -import { useActiveWalletAccount, useCreateOtherCFDAccount, useDxtradeAccountsList } from '@deriv/api'; -import { ModalStepWrapper, ModalWrapper, WalletButton } from '../../../../components/Base'; +import { useAccountStatus, useActiveWalletAccount, useCreateOtherCFDAccount, useDxtradeAccountsList } from '@deriv/api'; +import { ModalStepWrapper, ModalWrapper, WalletButton, WalletButtonGroup } from '../../../../components/Base'; import { useModal } from '../../../../components/ModalProvider'; import useDevice from '../../../../hooks/useDevice'; import DxTradePasswordIcon from '../../../../public/images/ic-dxtrade-password.svg'; -import { CFDSuccess, CreatePassword } from '../../screens'; +import { CFDSuccess, CreatePassword, EnterPassword } from '../../screens'; import './DxtradeEnterPasswordModal.scss'; const DxtradeEnterPasswordModal = () => { const history = useHistory(); const { isMobile } = useDevice(); const [password, setPassword] = useState(''); + const { data: getAccountStatus, isSuccess: accountStatusSuccess } = useAccountStatus(); const { isLoading, isSuccess, mutate } = useCreateOtherCFDAccount(); const { data: dxtradeAccount, isSuccess: dxtradeAccountListSuccess } = useDxtradeAccountsList(); const { data: activeWallet } = useActiveWalletAccount(); const { hide } = useModal(); const accountType = activeWallet?.is_virtual ? 'demo' : 'real'; - const onSubmit = () => { + const isDxtradePasswordNotSet = getAccountStatus?.is_dxtrade_password_not_set; + + const onSubmit = useCallback(() => { mutate({ payload: { account_type: accountType, @@ -27,17 +30,34 @@ const DxtradeEnterPasswordModal = () => { platform: 'dxtrade', }, }); - }; + }, [mutate, accountType, password]); - const successDescription = - accountType === 'demo' + const successDescription = useMemo(() => { + return accountType === 'demo' ? 'Transfer virtual funds from your Demo Wallet to your Deriv X Demo account to practise trading.' : `Transfer funds from your ${activeWallet?.currency} Wallet to your Deriv X account to start trading.`; + }, [accountType, activeWallet?.currency]); - const dxtradeBalance = dxtradeAccount?.find(account => account.market_type === 'all')?.display_balance; + const dxtradeBalance = useMemo(() => { + return dxtradeAccount?.find(account => account.market_type === 'all')?.display_balance; + }, [dxtradeAccount]); - const renderFooter = () => { - if (isSuccess) return hide()} size='lg' text='Continue' />; + const renderFooter = useMemo(() => { + if (isSuccess) { + return ( + + hide()} size='lg' text='Maybe later' variant='outlined' /> + { + hide(); + history.push('/wallets/cashier/transfer'); + }} + size='lg' + text='Transfer funds' + /> + + ); + } return ( { text='Create Deriv MT5 password' /> ); - }; - - if (isMobile) { - return ( - - {isSuccess && dxtradeAccountListSuccess && ( - - )} - {!isSuccess && ( - } - isLoading={isLoading} - onPasswordChange={e => setPassword(e.target.value)} - onPrimaryClick={onSubmit} - password={password} - platform='dxtrade' - /> - )} - - ); - } + }, [hide, history, isLoading, isSuccess, onSubmit, password]); - return ( - - {isSuccess && dxtradeAccountListSuccess && ( + const successComponent = useMemo(() => { + if (isSuccess && dxtradeAccountListSuccess) { + return ( ( -
- - { - hide(); - history.push('/wallets/cashier/transfer'); - }} - size='lg' - text='Transfer funds' - /> -
- )} + renderButton={() => renderFooter} title={`Your Deriv X${accountType === 'demo' ? ` ${accountType}` : ''} account is ready`} /> - )} - {!isSuccess && ( + ); + } + }, [isSuccess, dxtradeAccountListSuccess, successDescription, dxtradeBalance, renderFooter, accountType]); + + const passwordComponent = useMemo(() => { + if (!isSuccess && accountStatusSuccess) { + return isDxtradePasswordNotSet ? ( } isLoading={isLoading} @@ -110,7 +97,31 @@ const DxtradeEnterPasswordModal = () => { password={password} platform='dxtrade' /> - )} + ) : ( + setPassword(e.target.value)} + onPrimaryClick={onSubmit} + password={password} + platform='dxtrade' + /> + ); + } + }, [isSuccess, accountStatusSuccess, isDxtradePasswordNotSet, isLoading, onSubmit, password]); + + if (isMobile) { + return ( + renderFooter} title={' '}> + {successComponent} + {passwordComponent} + + ); + } + return ( + + {successComponent} + {passwordComponent} ); };