[WALL] Aizad/WALL-3036/Create/Add MT5 account modal issues (#12183)

* fix: minor Modal Issues inside of Wallets

* fix: show error message on blur

* fix: issue number 5

* fix: issue 2

packages/wallets/src/components/Base/WalletPasswordField/WalletPasswordField.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from 'react';
+import { passwordErrorMessage } from '../../../constants/password';
 import { Score, validatePassword, validPassword } from '../../../utils/password';
 import { WalletTextField } from '../WalletTextField';
 import { WalletTextFieldProps } from '../WalletTextField/WalletTextField';
@@ -8,6 +9,7 @@ import './WalletPasswordField.scss';
 
 interface WalletPasswordFieldProps extends WalletTextFieldProps {
     password: string;
+    passwordError?: boolean;
     shouldDisablePasswordMeter?: boolean;
 }
 
@@ -17,6 +19,7 @@ const WalletPasswordField: React.FC<WalletPasswordFieldProps> = ({
     name = 'walletPasswordField',
     onChange,
     password,
+    passwordError,
     shouldDisablePasswordMeter = false,
     showMessage,
 }) => {
@@ -28,28 +31,37 @@ const WalletPasswordField: React.FC<WalletPasswordFieldProps> = ({
     const handleChange = useCallback(
         (e: React.ChangeEvent<HTMLInputElement>) => {
             onChange?.(e);
-            setIsTouched(true);
+            if (!isTouched) {
+                setIsTouched(true);
+            }
         },
-        [onChange]
+        [isTouched, onChange]
     );
 
+    const handleBlur = useCallback(() => {
+        if (!isTouched) {
+            setIsTouched(true);
+        }
+    }, [isTouched]);
+
     return (
         <div className='wallets-password'>
             <WalletTextField
                 autoComplete={autoComplete}
-                errorMessage={errorMessage}
-                isInvalid={!validPassword(password) && isTouched}
+                errorMessage={passwordError ? passwordErrorMessage.PasswordError : errorMessage}
+                isInvalid={(!validPassword(password) && isTouched) || passwordError}
                 label={label}
                 message={isTouched ? errorMessage : ''}
                 messageVariant='warning'
                 name={name}
+                onBlur={handleBlur}
                 onChange={handleChange}
                 renderRightIcon={() => (
                     <PasswordViewerIcon setViewPassword={setIsPasswordVisible} viewPassword={isPasswordVisible} />
                 )}
                 showMessage={showMessage}
                 type={isPasswordVisible ? 'text' : 'password'}
-                value={password}
+                value={passwordError ? '' : password}
             />
             {!shouldDisablePasswordMeter && <PasswordMeter score={score as Score} />}
         </div>

packages/wallets/src/components/WalletSuccess/WalletSuccess.scss

@@ -4,7 +4,7 @@
     justify-content: center;
     align-items: center;
     padding: 2.4rem;
-    width: 39.2rem;
+    width: 40rem;
     border-radius: 1rem;
     text-align: center;
     background: var(--system-light-8-primary-background, #fff);

packages/wallets/src/constants/password.ts

@@ -18,6 +18,7 @@ export const passwordValues = {
 export const passwordErrorMessage = {
     invalidLength: 'You should enter 8-25 characters.',
     missingCharacter: 'Password should have lower and uppercase English letters with numbers.',
+    PasswordError: 'That password is incorrect. Please try again.',
 };
 
 export const warningMessages: Record<passwordKeys, string> = {

packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx

@@ -37,9 +37,9 @@ const DxtradeEnterPasswordModal = () => {
 
     const successDescription = useMemo(() => {
         return accountType === 'demo'
-            ? "Let's practise trading with 10,000 USD virtual funds."
+            ? `Let's practise trading with ${activeWallet?.display_balance} virtual funds.`
             : `Transfer funds from your ${activeWallet?.currency} Wallet to your ${PlatformDetails.dxtrade.title} account to start trading.`;
-    }, [accountType, activeWallet?.currency]);
+    }, [accountType, activeWallet?.currency, activeWallet?.display_balance]);
 
     const dxtradeBalance = useMemo(() => {
         return dxtradeAccount?.find(account => account.market_type === 'all')?.display_balance;
@@ -182,6 +182,7 @@ const DxtradeEnterPasswordModal = () => {
                         )
                     }
                     password={password}
+                    passwordError={error?.error?.code === 'PasswordError'}
                     platform={dxtradePlatform}
                 />
             );
@@ -194,11 +195,11 @@ const DxtradeEnterPasswordModal = () => {
         onSubmit,
         password,
         dxtradePlatform,
+        error?.error?.code,
         show,
     ]);
-
-    if (status === 'error') {
-        return <WalletError errorMessage={error?.error.message} onClick={() => hide()} title={error?.error?.code} />;
+    if (status === 'error' && error?.error?.code !== 'PasswordError') {
+        return <WalletError errorMessage={error?.error.message} onClick={hide} title={error?.error?.code} />;
     }
 
     if (isMobile) {

packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx

@@ -234,11 +234,13 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType, platform }) => {
                         )
                     }
                     password={password}
+                    passwordError={error?.error?.code === 'PasswordError'}
                     platform={PlatformDetails.mt5.platform}
                 />
             );
     }, [
         createMT5AccountLoading,
+        error?.error?.code,
         isMT5PasswordNotSet,
         isSuccess,
         marketType,
@@ -285,7 +287,7 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType, platform }) => {
         renderSuccessButton,
     ]);
 
-    if (status === 'error') {
+    if (status === 'error' && error?.error?.code !== 'PasswordError') {
         return <WalletError errorMessage={error?.error.message} onClick={hide} title={error?.error?.code} />;
     }
 

packages/wallets/src/features/cfd/screens/CreatePassword/CreatePassword.scss

@@ -10,6 +10,17 @@
     border-radius: 0.8rem;
     background: var(--system-light-8-primary-background, #fff);
 
+    &__text {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 0.8rem;
+
+        @include mobile {
+            gap: 2.4rem;
+        }
+    }
+
     @include mobile {
         width: 100%;
     }

packages/wallets/src/features/cfd/screens/CreatePassword/CreatePassword.tsx

@@ -29,12 +29,14 @@ const CreatePassword: React.FC<TProps> = ({
     return (
         <div className='wallets-create-password'>
             {!isMobile && icon}
-            <WalletText lineHeight='xl' weight='bold'>
-                Create a {title} password
-            </WalletText>
-            <WalletText align='center' size='sm'>
-                You can use this password for all your {title} accounts.
-            </WalletText>
+            <div className='wallets-create-password__text'>
+                <WalletText align='center' lineHeight='xl' weight='bold'>
+                    Create a {title} password
+                </WalletText>
+                <WalletText align='center' size='sm'>
+                    You can use this password for all your {title} accounts.
+                </WalletText>
+            </div>
 
             <WalletPasswordField label={`${title} password`} onChange={onPasswordChange} password={password} />
             {!isMobile && (

packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx

@@ -14,6 +14,7 @@ type TProps = {
     onPrimaryClick?: () => void;
     onSecondaryClick?: () => void;
     password: string;
+    passwordError?: boolean;
     platform: TPlatforms.All;
 };
 
@@ -24,6 +25,7 @@ const EnterPassword: React.FC<TProps> = ({
     onPrimaryClick,
     onSecondaryClick,
     password,
+    passwordError,
     platform,
 }) => {
     const { isDesktop } = useDevice();
@@ -47,6 +49,7 @@ const EnterPassword: React.FC<TProps> = ({
                         label={`${title} password`}
                         onChange={onPasswordChange}
                         password={password}
+                        passwordError={passwordError}
                         shouldDisablePasswordMeter
                         showMessage={false}
                     />
@@ -58,7 +61,7 @@ const EnterPassword: React.FC<TProps> = ({
                         Forgot password?
                     </WalletButton>
                     <WalletButton
-                        disabled={!password || isLoading || !validPassword(password)}
+                        disabled={!password || isLoading || !validPassword(password) || passwordError}
                         isLoading={isLoading}
                         onClick={onPrimaryClick}
                         size='lg'