diff --git a/packages/core/src/App/Containers/Redirect/redirect.jsx b/packages/core/src/App/Containers/Redirect/redirect.jsx index ee1058607636..c1cf409d1d35 100644 --- a/packages/core/src/App/Containers/Redirect/redirect.jsx +++ b/packages/core/src/App/Containers/Redirect/redirect.jsx @@ -95,27 +95,28 @@ const Redirect = observer(() => { if (redirect_to) { let pathname = ''; let hash = ''; + const main_screen_route = is_next_wallet ? routes.wallets : routes.traders_hub; switch (redirect_to) { case '1': pathname = routes.traders_hub; break; case '10': - pathname = routes.traders_hub; + pathname = main_screen_route; hash = 'real'; break; case '11': - pathname = routes.traders_hub; + pathname = main_screen_route; hash = 'demo'; break; case '2': pathname = routes.traders_hub; break; case '20': - pathname = routes.traders_hub; + pathname = main_screen_route; hash = 'real'; break; case '21': - pathname = routes.traders_hub; + pathname = main_screen_route; hash = 'demo'; break; case '3': @@ -191,7 +192,14 @@ const Redirect = observer(() => { case 'trading_platform_investor_password_reset': { localStorage.setItem('cfd_reset_password_code', code_param); const is_demo = localStorage.getItem('cfd_reset_password_intent')?.includes('demo'); - history.push(`${routes.traders_hub}#${is_demo ? 'demo' : 'real'}#reset-password`); + if (is_next_wallet) { + history.push({ + pathname: routes.wallets, + search: url_query_string, + }); + } else { + history.push(`${routes.traders_hub}#${is_demo ? 'demo' : 'real'}#reset-password`); + } redirected_to_route = true; break; } diff --git a/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss b/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss index 5d4e7fdb5e7d..765bee5b27f3 100644 --- a/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss +++ b/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss @@ -1,5 +1,5 @@ .wallets-modal-step-wrapper { - background-color: #ffffff; + background: var(--system-light-8-primary-background, #fff); border-radius: 0.8rem; animation: popup 0.4s; diff --git a/packages/wallets/src/components/Base/Tabs/TabTitle.tsx b/packages/wallets/src/components/Base/Tabs/TabTitle.tsx index 6b10ffa6a959..e3ff1cd60f2c 100644 --- a/packages/wallets/src/components/Base/Tabs/TabTitle.tsx +++ b/packages/wallets/src/components/Base/Tabs/TabTitle.tsx @@ -1,16 +1,17 @@ import React, { FC, useCallback } from 'react'; import classNames from 'classnames'; -import { WalletText } from '../WalletText'; +import WalletText, { WalletTextProps } from '../WalletText/WalletText'; export type TabTitleProps = { icon?: React.ReactNode; index: number; isActive?: boolean; setSelectedTab: (index: number) => void; + size: WalletTextProps['size']; title: string; }; -const TabTitle: FC = ({ icon, index, isActive, setSelectedTab, title }) => { +const TabTitle: FC = ({ icon, index, isActive, setSelectedTab, size = 'md', title }) => { const handleOnClick = useCallback(() => { setSelectedTab(index); }, [setSelectedTab, index]); @@ -23,7 +24,9 @@ const TabTitle: FC = ({ icon, index, isActive, setSelectedTab, ti onClick={handleOnClick} > {icon} - {title} + + {title} + ); }; diff --git a/packages/wallets/src/components/Base/Tabs/Tabs.tsx b/packages/wallets/src/components/Base/Tabs/Tabs.tsx index ef3dfcb7c0f8..1e338b3b5145 100644 --- a/packages/wallets/src/components/Base/Tabs/Tabs.tsx +++ b/packages/wallets/src/components/Base/Tabs/Tabs.tsx @@ -4,11 +4,12 @@ import './Tabs.scss'; type TabsProps = { children: ReactElement[]; + fontSize?: TabTitleProps['size']; preSelectedTab?: number; wrapperClassName?: string; }; -const Tabs: FC = ({ children, preSelectedTab, wrapperClassName }): JSX.Element => { +const Tabs: FC = ({ children, fontSize = 'md', preSelectedTab, wrapperClassName }): JSX.Element => { const [selectedTabIndex, setSelectedTabIndex] = useState(preSelectedTab || 0); return ( @@ -21,6 +22,7 @@ const Tabs: FC = ({ children, preSelectedTab, wrapperClassName }): JS isActive={index === selectedTabIndex} key={`wallets-tab-${item.props.title}`} setSelectedTab={setSelectedTabIndex} + size={fontSize} title={item.props.title} /> ))} diff --git a/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx b/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx index 346850f51b5b..1530e5e3d8b8 100644 --- a/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx +++ b/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx @@ -24,7 +24,7 @@ const SentEmailContent: FC = ({ description, isInvestorPa const { mutate: verifyEmail } = useVerifyEmail(); const { isMobile } = useDevice(); const mt5Platform = PlatformDetails.mt5.platform; - const title = PlatformDetails[platform ?? mt5Platform].title; + const { title } = PlatformDetails[platform ?? mt5Platform]; const titleSize = 'md'; const descriptionSize = 'sm'; const emailLinkSize = isMobile ? 'lg' : 'md'; @@ -39,6 +39,10 @@ const SentEmailContent: FC = ({ description, isInvestorPa const { data: activeWallet } = useActiveWalletAccount(); + const mt5ResetType = isInvestorPassword + ? 'trading_platform_investor_password_reset' + : 'trading_platform_mt5_password_reset'; + return (
= ({ description, isInvestorPa verifyEmail({ type: platform === mt5Platform - ? 'trading_platform_mt5_password_reset' + ? mt5ResetType : 'trading_platform_dxtrade_password_reset', url_parameters: { redirect_to: platformPasswordResetRedirectLink( diff --git a/packages/wallets/src/components/WalletsResetMT5Password/WalletSuccessResetMT5Password.tsx b/packages/wallets/src/components/WalletsResetMT5Password/WalletSuccessResetMT5Password.tsx new file mode 100644 index 000000000000..58d2255b6770 --- /dev/null +++ b/packages/wallets/src/components/WalletsResetMT5Password/WalletSuccessResetMT5Password.tsx @@ -0,0 +1,61 @@ +import React, { FC, useCallback } from 'react'; +import { Trans } from 'react-i18next'; +import useDevice from '../../hooks/useDevice'; +import MT5PasswordUpdatedIcon from '../../public/images/ic-mt5-password-updated.svg'; +import MT5SuccessPasswordReset from '../../public/images/mt5-success-password-reset.svg'; +import { ModalStepWrapper, WalletButton } from '../Base'; +import { useModal } from '../ModalProvider'; +import { WalletsActionScreen } from '../WalletsActionScreen'; + +type WalletSuccessResetMT5PasswordProps = { + isInvestorPassword?: boolean; + title: string; +}; + +const WalletSuccessResetMT5Password: FC = ({ + isInvestorPassword = false, + title, +}) => { + const { hide } = useModal(); + const { isDesktop, isMobile } = useDevice(); + + const renderFooter = useCallback(() => { + return isMobile ? ( + hide()} size='lg'> + + + ) : null; + }, [isMobile, hide]); + + const renderButtons = useCallback(() => { + return isDesktop ? ( + hide()} size='lg'> + + + ) : null; + }, [isDesktop, hide]); + + return ( + +
+ : } + renderButtons={renderButtons} + title={isInvestorPassword ? 'Password saved' : 'Success'} + /> +
+ + ); +}; + +export default WalletSuccessResetMT5Password; diff --git a/packages/wallets/src/components/WalletsResetMT5Password/WalletsResetMT5Password.scss b/packages/wallets/src/components/WalletsResetMT5Password/WalletsResetMT5Password.scss new file mode 100644 index 000000000000..5f252cbc47ca --- /dev/null +++ b/packages/wallets/src/components/WalletsResetMT5Password/WalletsResetMT5Password.scss @@ -0,0 +1,19 @@ +.wallets-reset-mt5-password { + width: 44rem; + padding: 2.4rem; + display: flex; + flex-direction: column; + gap: 2.4rem; + + @include mobile { + align-items: center; + width: 100%; + padding-inline: 1.6rem; + } + + &__button-group { + display: flex; + justify-content: flex-end; + gap: 0.8rem; + } +} diff --git a/packages/wallets/src/components/WalletsResetMT5Password/WalletsResetMT5Password.tsx b/packages/wallets/src/components/WalletsResetMT5Password/WalletsResetMT5Password.tsx new file mode 100644 index 000000000000..6aefb6ad72a1 --- /dev/null +++ b/packages/wallets/src/components/WalletsResetMT5Password/WalletsResetMT5Password.tsx @@ -0,0 +1,140 @@ +import React, { useEffect } from 'react'; +import { Trans } from 'react-i18next'; +import { useTradingPlatformInvestorPasswordReset, useTradingPlatformPasswordReset } from '@deriv/api'; +import { PlatformDetails } from '../../features/cfd/constants'; +import useDevice from '../../hooks/useDevice'; +import { TPlatforms } from '../../types'; +import { validPassword } from '../../utils/password'; +import { ModalStepWrapper, WalletButton, WalletButtonGroup, WalletPasswordFieldLazy, WalletText } from '../Base'; +import { WalletPasswordFieldProps } from '../Base/WalletPasswordFieldLazy/WalletPasswordFieldLazy'; +import { useModal } from '../ModalProvider'; +import WalletSuccessResetMT5Password from './WalletSuccessResetMT5Password'; +import './WalletsResetMT5Password.scss'; + +type WalletsResetMT5PasswordProps = { + actionParams: string; + isInvestorPassword?: boolean; + onChange: WalletPasswordFieldProps['onChange']; + password: WalletPasswordFieldProps['password']; + platform: Exclude; + verificationCode: string; +}; + +const WalletsResetMT5Password = ({ + actionParams, + isInvestorPassword = false, + onChange, + password, + platform, + verificationCode, +}: WalletsResetMT5PasswordProps) => { + const { title } = PlatformDetails[platform]; + const { + isError: isChangePasswordError, + isLoading: isChangePasswordLoading, + isSuccess: isChangePasswordSuccess, + mutate: changePassword, + } = useTradingPlatformPasswordReset(); + const { + isError: isChangeInvestorPasswordError, + isLoading: isChangeInvestorPasswordLoading, + isSuccess: isChangeInvestorPasswordSuccess, + mutate: changeInvestorPassword, + } = useTradingPlatformInvestorPasswordReset(); + + const { hide, show } = useModal(); + const { isDesktop, isMobile } = useDevice(); + + const handleSubmit = () => { + if (isInvestorPassword) { + const accountId = localStorage.getItem('trading_platform_investor_password_reset_account_id') ?? ''; + changeInvestorPassword({ + account_id: accountId, + new_password: password, + platform: 'mt5', + verification_code: verificationCode, + }); + } else { + changePassword({ + new_password: password, + platform, + verification_code: verificationCode, + }); + } + }; + + useEffect(() => { + if (isChangePasswordSuccess) { + localStorage.removeItem(`verification_code.${actionParams}`); // TODO:Remove verification code from local storage + show(); + } else if (isChangePasswordError) { + hide(); + } + }, [hide, platform, title, show, actionParams, isChangePasswordSuccess, isChangePasswordError]); + + useEffect(() => { + if (isChangeInvestorPasswordSuccess) { + localStorage.removeItem(`verification_code.${actionParams}`); // TODO:Remove verification code from local storage + show(); + } else if (isChangeInvestorPasswordError) { + hide(); + } + }, [hide, platform, title, show, actionParams, isChangeInvestorPasswordSuccess, isChangeInvestorPasswordError]); + + const renderFooter = () => { + return isMobile ? ( + + hide()} size='lg' variant='outlined'> + + + + + + + ) : null; + }; + + return ( + +
+ + Create a new {title} {isInvestorPassword && 'investor'} Password + + + {!isInvestorPassword && ( + + Strong passwords contain at least 8 characters, combine uppercase and lowercase letters, + numbers, and symbols. + + )} + {isDesktop && ( +
+ hide()} variant='outlined'> + + + + + +
+ )} +
+ + ); +}; + +export default WalletsResetMT5Password; diff --git a/packages/wallets/src/components/WalletsResetMT5Password/index.ts b/packages/wallets/src/components/WalletsResetMT5Password/index.ts new file mode 100644 index 000000000000..1f487e4877b5 --- /dev/null +++ b/packages/wallets/src/components/WalletsResetMT5Password/index.ts @@ -0,0 +1 @@ +export { default as WalletsResetMT5Password } from './WalletsResetMT5Password'; diff --git a/packages/wallets/src/components/index.ts b/packages/wallets/src/components/index.ts index 1ce9faee8783..f05ee0748601 100644 --- a/packages/wallets/src/components/index.ts +++ b/packages/wallets/src/components/index.ts @@ -37,5 +37,6 @@ export * from './WalletsCarouselContent'; export * from './WalletsErrorScreen'; export * from './WalletsPercentageSelector'; export * from './WalletsPrimaryTabs'; +export * from './WalletsResetMT5Password'; export * from './WalletSuccess'; export * from './WalletTourGuide'; diff --git a/packages/wallets/src/features/cfd/ResetMT5PasswordHandler.tsx b/packages/wallets/src/features/cfd/ResetMT5PasswordHandler.tsx new file mode 100644 index 000000000000..88c0bdb8ad27 --- /dev/null +++ b/packages/wallets/src/features/cfd/ResetMT5PasswordHandler.tsx @@ -0,0 +1,46 @@ +import React, { useEffect, useState } from 'react'; +import { WalletsResetMT5Password } from '../../components'; +import { useModal } from '../../components/ModalProvider'; +import { getActionFromUrl } from '../../helpers/urls'; +import { TPlatforms } from '../../types'; +import { CFD_PLATFORMS } from './constants'; + +const ResetMT5PasswordHandler = () => { + const { show } = useModal(); + const [password, setPassword] = useState(''); + const resetTradingPlatformActionParams = getActionFromUrl(); + + const platformMapping: Record> = { + trading_platform_dxtrade_password_reset: CFD_PLATFORMS?.DXTRADE, + trading_platform_investor_password_reset: CFD_PLATFORMS?.MT5, + trading_platform_mt5_password_reset: CFD_PLATFORMS?.MT5, + }; + + useEffect(() => { + const platformKey = resetTradingPlatformActionParams ? platformMapping[resetTradingPlatformActionParams] : null; + + if (platformKey) { + const verificationCode = localStorage.getItem(`verification_code.${resetTradingPlatformActionParams}`); + + if (verificationCode) { + show( + setPassword(e.target.value)} + password={password} + platform={platformKey} + verificationCode={verificationCode} + /> + ); + } + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [password]); + + return null; +}; + +export default ResetMT5PasswordHandler; diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordInputsScreen.tsx b/packages/wallets/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordInputsScreen.tsx index 37ced06e382e..16d7b1b15e6f 100644 --- a/packages/wallets/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordInputsScreen.tsx +++ b/packages/wallets/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordInputsScreen.tsx @@ -31,7 +31,7 @@ const MT5ChangeInvestorPasswordInputsScreen: React.FC = ({ sendEmail, se const initialValues: TFormInitialValues = { currentPassword: '', newPassword: '' }; - const onChangeButtonClickHandler = async (values: TFormInitialValues) => { + const onFormSubmitHandler = async (values: TFormInitialValues) => { await changeInvestorPassword({ account_id: mt5AccountId, new_password: values.newPassword, @@ -62,7 +62,7 @@ const MT5ChangeInvestorPasswordInputsScreen: React.FC = ({ sendEmail, se } descriptionSize='sm' renderButtons={() => ( - + {({ handleChange, handleSubmit, values }) => (
diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordScreens.tsx b/packages/wallets/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordScreens.tsx index 9851f407af69..3405fa33cc3e 100644 --- a/packages/wallets/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordScreens.tsx +++ b/packages/wallets/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordScreens.tsx @@ -1,5 +1,7 @@ import React, { FC, useState } from 'react'; +import { useActiveWalletAccount, useSettings, useVerifyEmail } from '@deriv/api'; import { useModal } from '../../../../../components/ModalProvider'; +import { platformPasswordResetRedirectLink } from '../../../../../utils/cfd'; import MT5ChangeInvestorPasswordInputsScreen from './MT5ChangeInvestorPasswordInputsScreen'; import MT5ChangeInvestorPasswordSavedScreen from './MT5ChangeInvestorPasswordSavedScreen'; import './MT5ChangeInvestorPasswordScreens.scss'; @@ -13,7 +15,25 @@ type TProps = { const MT5ChangeInvestorPasswordScreens: FC = ({ setShowEmailSentScreen }) => { const [activeScreen, setActiveScreen] = useState('introScreen'); const handleClick = (nextScreen: TChangeInvestorPasswordScreenIndex) => setActiveScreen(nextScreen); - const { hide } = useModal(); + const { getModalState, hide } = useModal(); + const { data } = useSettings(); + const { mutate } = useVerifyEmail(); + const { data: activeWallet } = useActiveWalletAccount(); + const mt5AccountId = getModalState('accountId') || ''; + + const handleSendEmail = async () => { + if (data.email) { + await mutate({ + type: 'trading_platform_investor_password_reset', + url_parameters: { + redirect_to: platformPasswordResetRedirectLink('mt5', activeWallet?.is_virtual), + }, + verify_email: data.email, + }); + + localStorage.setItem('trading_platform_investor_password_reset_account_id', mt5AccountId); + } + }; switch (activeScreen) { case 'savedScreen': @@ -28,6 +48,7 @@ const MT5ChangeInvestorPasswordScreens: FC = ({ setShowEmailSentScreen }
{ + handleSendEmail(); setShowEmailSentScreen?.(true); }} setNextScreen={() => handleClick('savedScreen')} diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/MT5ChangePasswordScreens.tsx b/packages/wallets/src/features/cfd/screens/ChangePassword/MT5ChangePasswordScreens.tsx index 0a12f045e2dd..56727923a353 100644 --- a/packages/wallets/src/features/cfd/screens/ChangePassword/MT5ChangePasswordScreens.tsx +++ b/packages/wallets/src/features/cfd/screens/ChangePassword/MT5ChangePasswordScreens.tsx @@ -2,6 +2,7 @@ import React, { Fragment, useState } from 'react'; import { Trans } from 'react-i18next'; import { SentEmailContent } from '../../../../components'; import { Tab, Tabs, WalletText } from '../../../../components/Base'; +import useDevice from '../../../../hooks/useDevice'; import IcBackArrow from '../../../../public/images/ic-back-arrow.svg'; import { PlatformDetails } from '../../constants'; import MT5ChangeInvestorPasswordScreens from './InvestorPassword/MT5ChangeInvestorPasswordScreens'; @@ -10,6 +11,7 @@ import TradingPlatformChangePasswordScreens from './TradingPlatformChangePasswor const MT5ChangePasswordScreens = () => { const [showSentEmailContentWithoutTabs, setShowSentEmailContentWithoutTabs] = useState(false); const [tabNumber, setTabNumber] = useState(0); + const { isMobile } = useDevice(); const platform = PlatformDetails.mt5.platform; const { title } = PlatformDetails[platform]; @@ -43,7 +45,11 @@ const MT5ChangePasswordScreens = () => {
) : ( - + diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/TradingPlatformChangePasswordScreens.tsx b/packages/wallets/src/features/cfd/screens/ChangePassword/TradingPlatformChangePasswordScreens.tsx index 6cbc6df2ab26..75ddf3b28a15 100644 --- a/packages/wallets/src/features/cfd/screens/ChangePassword/TradingPlatformChangePasswordScreens.tsx +++ b/packages/wallets/src/features/cfd/screens/ChangePassword/TradingPlatformChangePasswordScreens.tsx @@ -2,6 +2,7 @@ import React, { FC, useState } from 'react'; import { useActiveWalletAccount, useSettings, useVerifyEmail } from '@deriv/api'; import { SentEmailContent, WalletButton, WalletsActionScreen, WalletText } from '../../../../components'; import { useModal } from '../../../../components/ModalProvider'; +import useDevice from '../../../../hooks/useDevice'; import DerivXPasswordIcon from '../../../../public/images/ic-derivx-password-updated.svg'; import MT5PasswordIcon from '../../../../public/images/ic-mt5-password.svg'; import { TPlatforms } from '../../../../types'; @@ -22,6 +23,7 @@ const TradingPlatformChangePasswordScreens: FC handleClick('confirmationScreen')} size='lg'> + handleClick('confirmationScreen')} + size='lg' + textSize={isMobile ? 'md' : 'sm'} + > Change password ), diff --git a/packages/wallets/src/public/images/mt5-success-password-reset.svg b/packages/wallets/src/public/images/mt5-success-password-reset.svg new file mode 100644 index 000000000000..02c8e1e864bd --- /dev/null +++ b/packages/wallets/src/public/images/mt5-success-password-reset.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/packages/wallets/src/routes/WalletsListingRoute/WalletsListingRoute.tsx b/packages/wallets/src/routes/WalletsListingRoute/WalletsListingRoute.tsx index b7465486a2b0..024d715c8c22 100644 --- a/packages/wallets/src/routes/WalletsListingRoute/WalletsListingRoute.tsx +++ b/packages/wallets/src/routes/WalletsListingRoute/WalletsListingRoute.tsx @@ -1,17 +1,59 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { useActiveWalletAccount, useAuthorize, useWalletAccountsList } from '@deriv/api'; -import { DesktopWalletsList, WalletsAddMoreCarousel, WalletsCarousel, WalletTourGuide } from '../../components'; +import { + DesktopWalletsList, + WalletsAddMoreCarousel, + WalletsCarousel, + WalletsResetMT5Password, + WalletTourGuide, +} from '../../components'; +import { useModal } from '../../components/ModalProvider'; +import { CFD_PLATFORMS } from '../../features/cfd/constants'; +import { getActionFromUrl } from '../../helpers/urls'; import useDevice from '../../hooks/useDevice'; +import ResetMT5PasswordHandler from '../../features/cfd/ResetMT5PasswordHandler'; import './WalletsListingRoute.scss'; +import { TPlatforms } from '../../types'; const WalletsListingRoute: React.FC = () => { const { isMobile } = useDevice(); const { data: walletAccounts } = useWalletAccountsList(); const { switchAccount } = useAuthorize(); const { data: activeWallet } = useActiveWalletAccount(); + const { show } = useModal(); + + const [password, setPassword] = useState(''); + const resetTradingPlatformActionParams = getActionFromUrl(); const firstLoginid = walletAccounts?.[0]?.loginid; + const platformMapping: Record> = { + trading_platform_dxtrade_password_reset: CFD_PLATFORMS.DXTRADE, + trading_platform_mt5_password_reset: CFD_PLATFORMS.MT5, + }; + + useEffect(() => { + const platformKey = resetTradingPlatformActionParams ? platformMapping[resetTradingPlatformActionParams] : null; + if (platformKey) { + const verificationCode = localStorage.getItem( + `verification_code.trading_platform_${platformKey}_password_reset` + ); + + if (verificationCode) { + show( + setPassword(e.target.value)} + password={password} + platform={platformKey} + verificationCode={verificationCode} + /> + ); + } + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [password]); + useEffect(() => { if (!activeWallet && firstLoginid) { switchAccount(firstLoginid); @@ -23,6 +65,7 @@ const WalletsListingRoute: React.FC = () => { {isMobile ? : } {!isMobile && } +
); }; diff --git a/packages/wallets/src/routes/WalletsListingRoute/__tests__/WalletsListingRoute.spec.tsx b/packages/wallets/src/routes/WalletsListingRoute/__tests__/WalletsListingRoute.spec.tsx index bf43b1f599d2..7e2ba9afa706 100644 --- a/packages/wallets/src/routes/WalletsListingRoute/__tests__/WalletsListingRoute.spec.tsx +++ b/packages/wallets/src/routes/WalletsListingRoute/__tests__/WalletsListingRoute.spec.tsx @@ -1,6 +1,7 @@ -import React from 'react'; +import React, { PropsWithChildren } from 'react'; import { useActiveWalletAccount, useAuthorize, useWalletAccountsList } from '@deriv/api'; import { render, screen } from '@testing-library/react'; +import { ModalProvider } from '../../../components/ModalProvider'; import useDevice from '../../../hooks/useDevice'; import WalletsListingRoute from '../WalletsListingRoute'; @@ -21,6 +22,8 @@ jest.mock('../../../components/', () => { }; }); +const wrapper = ({ children }: PropsWithChildren) => {children}; + describe('WalletsListingRoute', () => { let mockSwitchAccount: jest.Mock; @@ -34,7 +37,7 @@ describe('WalletsListingRoute', () => { it('renders DesktopWalletsList, WalletsAddMoreCarousel and WalletTourGuide correctly on desktop', () => { (useDevice as jest.Mock).mockReturnValue({ isMobile: false }); - render(); + render(, { wrapper }); expect(screen.getByText('DesktopWalletsList')).toBeInTheDocument(); expect(screen.getByText('WalletTourGuide')).toBeInTheDocument(); expect(screen.queryByText('WalletsCarousel')).not.toBeInTheDocument(); @@ -43,7 +46,7 @@ describe('WalletsListingRoute', () => { it('renders WalletsCarousel and WalletsAddMoreCarousel correctly on mobile', () => { (useDevice as jest.Mock).mockReturnValue({ isMobile: true }); - render(); + render(, { wrapper }); expect(screen.queryByText('DesktopWalletsList')).not.toBeInTheDocument(); expect(screen.getByText('WalletsCarousel')).toBeInTheDocument(); expect(screen.queryByText('WalletTourGuide')).not.toBeInTheDocument(); @@ -52,7 +55,7 @@ describe('WalletsListingRoute', () => { it('calls switchAccount when there is no active wallet', () => { (useDevice as jest.Mock).mockReturnValue({ isMobile: false }); - render(); + render(, { wrapper }); expect(mockSwitchAccount).toHaveBeenCalledWith('123'); }); @@ -60,7 +63,7 @@ describe('WalletsListingRoute', () => { (useDevice as jest.Mock).mockReturnValue({ isMobile: false }); (useActiveWalletAccount as jest.Mock).mockReturnValue({ data: { loginid: '123' } }); - render(); + render(, { wrapper }); expect(mockSwitchAccount).not.toHaveBeenCalled(); }); @@ -68,7 +71,7 @@ describe('WalletsListingRoute', () => { (useDevice as jest.Mock).mockReturnValue({ isMobile: false }); (useWalletAccountsList as jest.Mock).mockReturnValue({ data: [{ loginid: '123' }, { loginid: '456' }] }); - render(); + render(, { wrapper }); expect(mockSwitchAccount).toHaveBeenCalledWith('123'); expect(mockSwitchAccount).not.toHaveBeenCalledWith('456'); });