[Wallets] Responsive view for success and password modal

packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss

@@ -12,16 +12,18 @@
         grid-template-rows: 9% auto;
 
         &--fixed {
-            grid-template-rows: 9% auto 8%;
+            grid-template-rows: 7% auto 8%;
         }
     }
 
     &__header {
-        padding: 2rem;
+        padding: 0 2rem;
         border-bottom: 2px solid #f2f3f4;
         display: flex;
         justify-content: space-between;
         align-items: center;
+        display: grid;
+        grid-template-columns: auto 4%;
 
         &-close-icon {
             cursor: pointer;

packages/wallets/src/components/Base/WalletButtonGroup/WalletButtonGroup.scss

@@ -0,0 +1,13 @@
+.wallets-button-group {
+    display: flex;
+    width: 100%;
+    gap: 1.2rem;
+
+    &--vertical {
+        flex-direction: column;
+    }
+
+    &__item {
+        width: 100%;
+    }
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { type WalletButton } from '../WalletButton';
+import './WalletButtonGroup.scss';
+import classNames from 'classnames';
+
+type TWalletButtonGroupProps = {
+    isVertical?: boolean;
+};
+
+const WalletButtonGroup: React.FC<React.PropsWithChildren<TWalletButtonGroupProps>> = ({ children, isVertical }) => {
+    return (
+        <div
+            className={classNames('wallets-button-group', {
+                'wallets-button-group--vertical': isVertical,
+            })}
+        >
+            {Children.map(children, child => (
+                <div className='wallets-button-group__item'>{child}</div>
+            ))}
+        </div>
+    );
+};
+
+export default WalletButtonGroup;

packages/wallets/src/components/Base/WalletButtonGroup/index.ts

@@ -0,0 +1 @@
+export { default as WalletButtonGroup } from './WalletButtonGroup';

packages/wallets/src/components/Base/index.ts

@@ -5,6 +5,7 @@ export * from './ProgressBar';
 export * from './Tabs';
 export * from './WalletAlertMessage';
 export * from './WalletButton';
+export * from './WalletButtonGroup';
 export * from './WalletClipboard';
 export * from './WalletText';
 export * from './WalletTextField';

packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx

@@ -7,6 +7,7 @@ import SwapFreeMT5Icon from '../../public/images/mt5-swap-free.svg';
 import { WalletCardIcon } from '../WalletCardIcon';
 import { WalletGradientBackground } from '../WalletGradientBackground';
 import type { useSortedMT5Accounts } from '@deriv/api';
+import useDevice from '../../hooks/useDevice';
 import './WalletMarketCurrencyIcon.scss';
 
 const marketTypeToIconMapper: Record<string, ComponentType<SVGAttributes<SVGElement>>> = {
@@ -28,6 +29,8 @@ type TWalletMarketCurrencyIconProps = {
 };
 
 const WalletMarketCurrencyIcon = ({ currency, isDemo, marketType, platform }: TWalletMarketCurrencyIconProps) => {
+    const { isMobile } = useDevice();
+
     const MarketTypeIcon =
         marketType === 'all' && Object.keys(marketTypeToPlatformIconMapper).includes(platform)
             ? marketTypeToPlatformIconMapper[platform]
@@ -42,7 +45,7 @@ const WalletMarketCurrencyIcon = ({ currency, isDemo, marketType, platform }: TW
                 }`}
             >
                 <WalletGradientBackground currency={currency} hasShine isDemo={isDemo} type='card'>
-                    <WalletCardIcon type={isDemo ? 'Demo' : currency} />
+                    <WalletCardIcon size={isMobile ? 'xl' : 'lg'} type={isDemo ? 'Demo' : currency} />
                 </WalletGradientBackground>
             </div>
         </div>

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

@@ -0,0 +1,11 @@
+.wallets-mt5-password-modal {
+    &__footer {
+        width: 100%;
+
+        &--pair {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-gap: 10px;
+        }
+    }
+}

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

@@ -7,11 +7,13 @@ import {
     useSettings,
     useTradingPlatformPasswordChange,
 } from '@deriv/api';
-import { ModalWrapper, WalletButton } from '../../../../components/Base';
+import { ModalStepWrapper, ModalWrapper, WalletButton, WalletButtonGroup } from '../../../../components/Base';
 import { useModal } from '../../../../components/ModalProvider';
 import MT5PasswordIcon from '../../../../public/images/ic-mt5-password.svg';
 import { CreatePassword, EnterPassword, Success } from '../../screens';
 import { TMarketTypes, TPlatforms } from '../../types';
+import useDevice from '../../../../hooks/useDevice';
+import './MT5PasswordModal.scss';
 import { MarketTypeToTitleMapper, PlatformToTitleMapper } from '../../constants';
 
 type TProps = {
@@ -28,6 +30,7 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType, platform }) => {
     const { data: availableMT5Accounts } = useAvailableMT5Accounts();
     const { data: settings } = useSettings();
     const { hide } = useModal();
+    const { isMobile } = useDevice();
 
     const hasMT5Account = mt5Accounts?.find(account => account.login);
     const isDemo = activeWallet?.is_virtual;
@@ -68,6 +71,70 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType, platform }) => {
         });
     };
 
+    const renderTitle = () => {
+        if (!isSuccess && hasMT5Account) return `Enter your ${PlatformToTitleMapper.mt5} password`;
+        return '';
+    };
+
+    const renderFooter = () => {
+        if (isSuccess) return <WalletButton isFullWidth onClick={hide} size='lg' text='Continue' />;
+        if (hasMT5Account)
+            return (
+                <WalletButtonGroup>
+                    <WalletButton isFullWidth size='lg' text='Forgot password?' variant='outlined' />
+                    <WalletButton disabled={!password} isFullWidth onClick={onSubmit} size='lg' text='Add account' />
+                </WalletButtonGroup>
+            );
+        return (
+            <WalletButton
+                disabled={!password}
+                isFullWidth
+                onClick={onSubmit}
+                size='lg'
+                text='Create Deriv MT5 Password'
+            />
+        );
+    };
+
+    if (isMobile) {
+        return (
+            <ModalStepWrapper renderFooter={renderFooter} title={renderTitle()}>
+                {isSuccess && (
+                    <Success
+                        description={`You can now start practicing trading with your ${marketTypeTitle} ${
+                            isDemo ? ' demo' : 'real'
+                        } account.`}
+                        displayBalance={
+                            mt5Accounts?.find(account => account.market_type === marketType)?.display_balance || ''
+                        }
+                        marketType={marketType}
+                        platform={platform}
+                        renderButton={() => <WalletButton isFullWidth onClick={hide} size='lg' text='Continue' />}
+                        title={`Your ${marketTypeTitle} ${isDemo ? ' demo' : 'real'} account is ready`}
+                    />
+                )}
+                {!isSuccess &&
+                    (hasMT5Account ? (
+                        <EnterPassword
+                            marketType={marketType}
+                            onPasswordChange={e => setPassword(e.target.value)}
+                            onPrimaryClick={onSubmit}
+                            password={password}
+                            platform='mt5'
+                        />
+                    ) : (
+                        <CreatePassword
+                            icon={<MT5PasswordIcon />}
+                            onPasswordChange={e => setPassword(e.target.value)}
+                            onPrimaryClick={onSubmit}
+                            password={password}
+                            platform='mt5'
+                        />
+                    ))}
+            </ModalStepWrapper>
+        );
+    }
+
     return (
         <ModalWrapper hideCloseButton={isSuccess}>
             {isSuccess && (
@@ -90,13 +157,15 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType, platform }) => {
                         marketType={marketType}
                         onPasswordChange={e => setPassword(e.target.value)}
                         onPrimaryClick={onSubmit}
+                        password={password}
                         platform='mt5'
                     />
                 ) : (
                     <CreatePassword
                         icon={<MT5PasswordIcon />}
                         onPasswordChange={e => setPassword(e.target.value)}
                         onPrimaryClick={onSubmit}
+                        password={password}
                         platform='mt5'
                     />
                 ))}

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

@@ -10,6 +10,10 @@
     border-radius: 8px;
     background: var(--system-light-8-primary-background, #fff);
 
+    @include mobile {
+        width: 100%;
+    }
+
     &-title {
         font-weight: 700;
         font-size: 18px;

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

@@ -3,15 +3,20 @@ import PasswordShowIcon from '../../../../public/images/ic-password-show.svg';
 import './CreatePassword.scss';
 import { TPlatforms } from '../../types';
 import { PlatformToTitleMapper } from '../../constants';
+import { WalletButton } from '../../../../components/Base';
+import useDevice from '../../../../hooks/useDevice';
 
 type TProps = {
     icon: React.ReactNode;
     onPasswordChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onPrimaryClick: () => void;
+    password: string;
     platform: TPlatforms.All;
 };
 
-const CreatePassword: React.FC<TProps> = ({ icon, onPasswordChange, onPrimaryClick, platform }) => {
+const CreatePassword: React.FC<TProps> = ({ icon, onPasswordChange, onPrimaryClick, password, platform }) => {
+    const { isMobile } = useDevice();
+
     const title = PlatformToTitleMapper[platform];
     return (
         <div className='wallets-create-password'>
@@ -24,9 +29,14 @@ const CreatePassword: React.FC<TProps> = ({ icon, onPasswordChange, onPrimaryCli
                 <input onChange={onPasswordChange} placeholder={`${title} password`} type='password' />
                 <PasswordShowIcon className='wallets-create-password-input-trailing-icon' />
             </div>
-            <button className='wallets-create-password-button' onClick={onPrimaryClick}>
-                Create {title} password
-            </button>
+            {!isMobile && (
+                <WalletButton
+                    disabled={!password}
+                    onClick={onPrimaryClick}
+                    size='lg'
+                    text={`Create ${title} password`}
+                />
+            )}
         </div>
     );
 };

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

@@ -8,13 +8,23 @@
     background: var(--system-light-8-primary-background, #fff);
     box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.25);
 
+    @include mobile {
+        justify-content: flex-start;
+        border-radius: 0;
+        box-shadow: none;
+    }
+
     &--container {
         display: flex;
         width: 400px;
         padding: 0 24px 24px;
         flex-direction: column;
         align-items: flex-start;
         gap: 8px;
+
+        @include mobile {
+            width: 100%;
+        }
     }
 
     &-title {

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

@@ -3,13 +3,15 @@ import PasswordShowIcon from '../../../../public/images/ic-password-show.svg';
 import './EnterPassword.scss';
 import { TMarketTypes, TPlatforms } from '../../types';
 import { PlatformToTitleMapper } from '../../constants';
+import useDevice from '../../../../hooks/useDevice';
 
 type TProps = {
     isLoading?: boolean;
     marketType: TMarketTypes.CreateOtherCFDAccount;
     onPasswordChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onPrimaryClick?: () => void;
     onSecondaryClick?: () => void;
+    password: string;
     platform: TPlatforms.All;
 };
 
@@ -19,32 +21,38 @@ const EnterPassword: React.FC<TProps> = ({
     onPasswordChange,
     onPrimaryClick,
     onSecondaryClick,
+    password,
     platform,
 }) => {
+    const { isDesktop } = useDevice();
     const title = PlatformToTitleMapper[platform];
     return (
-        <React.Fragment>
-            <div className='wallets-enter-password'>
-                <div className='wallets-enter-password--container'>
-                    <div className='wallets-enter-password-title'>Enter your {title} password</div>
-                    <span className='wallets-enter-password-subtitle'>
-                        Enter your {title} password to add a {title} {marketType} account.
-                    </span>
-                    <div className='wallets-enter-password-input'>
-                        <input onChange={onPasswordChange} placeholder={`${title} password`} type='password' />
-                        <PasswordShowIcon className='wallets-create-password-input-trailing-icon' />
-                    </div>
+        <div className='wallets-enter-password'>
+            <div className='wallets-enter-password--container'>
+                {isDesktop && <div className='wallets-enter-password-title'>Enter your {title} password</div>}
+                <span className='wallets-enter-password-subtitle'>
+                    Enter your {title} password to add a {title} {marketType} account.
+                </span>
+                <div className='wallets-enter-password-input'>
+                    <input onChange={onPasswordChange} placeholder={`${title} password`} type='password' />
+                    <PasswordShowIcon className='wallets-create-password-input-trailing-icon' />
                 </div>
+            </div>
+            {isDesktop && (
                 <div className='wallets-enter-password-buttons'>
                     <button className='wallets-enter-password-forgot-password-button' onClick={onSecondaryClick}>
                         Forgot password?
                     </button>
-                    <button className='wallets-enter-password-add-button' disabled={isLoading} onClick={onPrimaryClick}>
+                    <button
+                        className='wallets-enter-password-add-button'
+                        disabled={isLoading || !password}
+                        onClick={onPrimaryClick}
+                    >
                         Add account
                     </button>
                 </div>
-            </div>
-        </React.Fragment>
+            )}
+        </div>
     );
 };
 

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

@@ -10,6 +10,11 @@
     text-align: center;
     background: var(--system-light-8-primary-background, #fff);
 
+    @include mobile {
+        width: 100%;
+        height: 100%;
+    }
+
     &__info {
         display: flex;
         flex-direction: column;
@@ -20,6 +25,10 @@
         position: relative;
         border-radius: 10px;
 
+        @include mobile {
+            height: fit-content;
+        }
+
         &-badge {
             position: absolute;
             top: 0;