[42069] adrienne / account ready modal for wallets (deriv-com#10271)

* chore: backup before merge * feat: added wallet account ready content * chore: removed unsaved changes * chore: removed unsaved changes * chore: fixed circleci build test * chore: incorporated code reviews * chore: updated prop types for account ready * chore: refactoerd code based on master changes * Update icons.js * chore: resolve eslint issues camel case
kate-deriv · Oct 13, 2023 · c443ed7 · c443ed7
1 parent 4263a92
commit c443ed7
Show file tree

Hide file tree

Showing 12 changed files with 283 additions and 33 deletions.
diff --git a/packages/wallets/src/components/Base/ModalWrapper/ModalWrapper.scss b/packages/wallets/src/components/Base/ModalWrapper/ModalWrapper.scss
@@ -1,6 +1,4 @@
-.wallets-modal-wrapper {
-    background-color: #ffffff;
-    border-radius: 20px;
+.wallets-modal {
     position: relative;
 
     &__close-icon {

diff --git a/packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.scss b/packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.scss
@@ -11,6 +11,16 @@
         background-color: #fff;
     }
 
+    &__palette {
+        &--grey {
+            background: radial-gradient(
+                100% 4130.74% at 0% 100%,
+                rgb(214, 218, 219, 0.24) 0%,
+                rgba(207, 207, 207, 1) 100%
+            );
+        }
+    }
+
     &--USD {
         &-desktop {
             &-card {

diff --git a/packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.tsx b/packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.tsx
@@ -2,12 +2,13 @@ import React from 'react';
 import './WalletGradientBackground.scss';
 
 type TProps = {
+    bodyClassName?: string;
     children: React.ReactNode;
     currency: string;
     device?: 'desktop' | 'mobile';
     hasShine?: boolean;
     isDemo?: boolean;
-    theme?: 'dark' | 'light';
+    theme?: 'dark' | 'light' | Omit<string, 'dark' | 'light'>;
     type?: 'card' | 'header';
 };
 
@@ -19,13 +20,16 @@ const WalletGradientBackground: React.FC<TProps> = ({
     isDemo = false,
     theme = 'light',
     type = 'card',
+    bodyClassName,
 }) => {
-    const className = isDemo
-        ? `wallets-gradient--demo-${device}-${type}-${theme}`
-        : `wallets-gradient--${currency}-${device}-${type}-${theme}`;
+    const getClassName = () => {
+        if (isDemo) return `wallets-gradient--demo-${device}-${type}-${theme}`;
+        if (theme !== 'dark' && theme !== 'light') return `wallets-gradient__palette--${theme}`;
+        return `wallets-gradient--${currency}-${device}-${type}-${theme}`;
+    };
 
     return (
-        <div className={`wallets-gradient ${className}`}>
+        <div className={`wallets-gradient ${bodyClassName} ${getClassName()}`}>
             {hasShine && !isDemo && <span className='wallets-gradient__shine' />}
             {children}
         </div>

diff --git a/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.scss b/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.scss
@@ -0,0 +1,46 @@
+.wallets-market-currency-icon {
+    $scaling: 65%;
+
+    width: 95px;
+    height: 70px;
+    position: relative;
+    z-index: 0;
+    transform-origin: top left;
+    transform: scale($scaling);
+
+    &__before {
+        &-demo {
+            $scaling-before: $scaling + 10%;
+            width: $scaling + 25%;
+
+            & .wallets-gradient svg {
+                transform: scale($scaling-before + 10%);
+            }
+            transform: scale($scaling-before);
+            transform-origin: bottom right;
+        }
+
+        &-real {
+            $scaling-before: $scaling + 25%;
+            width: $scaling + 15%;
+
+            & .wallets-gradient svg {
+                transform: scale($scaling-before - 20%);
+            }
+            transform: scale($scaling-before);
+            transform-origin: bottom right;
+        }
+
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        z-index: 1;
+    }
+
+    &__after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 2;
+    }
+}
diff --git a/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx b/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx
@@ -0,0 +1,40 @@
+import React, { ComponentType, SVGAttributes } from 'react';
+import DerivedMT5Icon from '../../public/images/mt5-derived.svg';
+import FinancialMT5Icon from '../../public/images/mt5-financial.svg';
+import SwapFreeMT5Icon from '../../public/images/mt5-swap-free.svg';
+import { WalletCardIcon } from '../WalletCardIcon';
+import { WalletGradientBackground } from '../WalletGradientBackground';
+import './WalletMarketCurrencyIcon.scss';
+
+const marketTypeToIconMapper: Record<string, ComponentType<SVGAttributes<SVGElement>>> = {
+    all: SwapFreeMT5Icon,
+    financial: FinancialMT5Icon,
+    synthetic: DerivedMT5Icon,
+};
+
+type TWalletMarketCurrencyIconProps = {
+    currency: string;
+    isDemo: boolean;
+    marketType: string;
+};
+
+const WalletMarketCurrencyIcon = ({ currency, isDemo, marketType }: TWalletMarketCurrencyIconProps) => {
+    const MarketTypeIcon = marketTypeToIconMapper[marketType];
+
+    return (
+        <div className='wallets-market-currency-icon'>
+            <MarketTypeIcon className='wallets-market-currency-icon__after' />
+            <div
+                className={`wallets-market-currency-icon__before wallets-market-currency-icon__before-${
+                    isDemo ? 'demo' : 'real'
+                }`}
+            >
+                <WalletGradientBackground currency={currency} hasShine isDemo={isDemo} type='card'>
+                    <WalletCardIcon type={isDemo ? 'Demo' : currency} />
+                </WalletGradientBackground>
+            </div>
+        </div>
+    );
+};
+
+export default WalletMarketCurrencyIcon;
diff --git a/packages/wallets/src/components/WalletMarketCurrencyIcon/index.ts b/packages/wallets/src/components/WalletMarketCurrencyIcon/index.ts
@@ -0,0 +1 @@
+export { default as WalletMarketCurrencyIcon } from './WalletMarketCurrencyIcon';
diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import {
     useActiveWalletAccount,
     useAvailableMT5Accounts,
@@ -8,9 +8,8 @@ import {
     useSortedMT5Accounts,
 } from '@deriv/api';
 import { ModalWrapper } from '../../../../components/Base';
-import { useModal } from '../../../../components/ModalProvider';
 import MT5PasswordIcon from '../../../../public/images/ic-mt5-password.svg';
-import { CreatePassword, EnterPassword } from '../../screens';
+import { AccountReady, CreatePassword, EnterPassword } from '../../screens';
 
 type TProps = {
     marketType: Exclude<NonNullable<ReturnType<typeof useSortedMT5Accounts>['data']>[number]['market_type'], undefined>;
@@ -23,7 +22,6 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType }) => {
     const { data: mt5Accounts } = useMT5AccountsList();
     const { data: availableMT5Accounts } = useAvailableMT5Accounts();
     const { data: settings } = useSettings();
-    const { hide } = useModal();
 
     const hasMT5Account = mt5Accounts?.find(account => account.login);
 
@@ -45,28 +43,25 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType }) => {
         });
     };
 
-    useEffect(() => {
-        // Success modal here
-        if (isSuccess) hide();
-    }, [hide, isSuccess]);
-
     return (
-        <ModalWrapper>
-            {hasMT5Account ? (
-                <EnterPassword
-                    marketType={marketType}
-                    onPasswordChange={e => setPassword(e.target.value)}
-                    onPrimaryClick={onSubmit}
-                    platform='mt5'
-                />
-            ) : (
-                <CreatePassword
-                    icon={<MT5PasswordIcon />}
-                    onPasswordChange={e => setPassword(e.target.value)}
-                    onPrimaryClick={onSubmit}
-                    platform='mt5'
-                />
-            )}
+        <ModalWrapper hideCloseButton={isSuccess}>
+            {isSuccess && <AccountReady marketType={marketType} />}
+            {!isSuccess &&
+                (hasMT5Account ? (
+                    <EnterPassword
+                        marketType={marketType}
+                        onPasswordChange={e => setPassword(e.target.value)}
+                        onPrimaryClick={onSubmit}
+                        platform='mt5'
+                    />
+                ) : (
+                    <CreatePassword
+                        icon={<MT5PasswordIcon />}
+                        onPasswordChange={e => setPassword(e.target.value)}
+                        onPrimaryClick={onSubmit}
+                        platform='mt5'
+                    />
+                ))}
         </ModalWrapper>
     );
 };

diff --git a/packages/wallets/src/features/cfd/screens/AccountReady/AccountReady.scss b/packages/wallets/src/features/cfd/screens/AccountReady/AccountReady.scss
@@ -0,0 +1,87 @@
+.wallets-account-ready {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 16px;
+    gap: 24px;
+    width: 392px;
+    border-radius: 10px;
+    text-align: center;
+    background: var(--system-light-8-primary-background, #fff);
+
+    &__info {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        width: 240px;
+        height: 128px;
+        padding: 10px;
+        position: relative;
+        border-radius: 10px;
+
+        &__text {
+            &--type {
+                font-weight: 400;
+                line-height: 14px;
+                font-size: 10px;
+            }
+
+            &--wallet {
+                font-size: 10px;
+                font-weight: 400;
+                line-height: 14px;
+                color: #999999;
+            }
+
+            &--amount {
+                font-size: 14px;
+                font-weight: 700;
+                line-height: 20px;
+            }
+        }
+
+        &-badge {
+            position: absolute;
+            top: 0;
+            right: 0;
+            font-weight: 700;
+            border-radius: 0 10px 0px;
+            display: grid;
+            place-items: center;
+            color: #ffffff;
+            height: 25px;
+            width: 50px;
+
+            &--demo {
+                background-color: #377cfc;
+            }
+
+            &--real {
+                background-color: #ff444f;
+            }
+        }
+    }
+
+    &__title {
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 24px;
+    }
+
+    &__subtitle {
+        font-size: 14px;
+        line-height: 20px;
+    }
+
+    &__button {
+        background-color: #ff444f;
+        color: #ffffff;
+        cursor: pointer;
+        font-weight: 700;
+        width: 100%;
+        padding: 10px;
+        border: none;
+        border-radius: 5px;
+    }
+}
diff --git a/packages/wallets/src/features/cfd/screens/AccountReady/AccountReady.tsx b/packages/wallets/src/features/cfd/screens/AccountReady/AccountReady.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { useActiveWalletAccount, useSortedMT5Accounts } from '@deriv/api';
+import { useModal } from '../../../../components/ModalProvider';
+import { WalletGradientBackground } from '../../../../components/WalletGradientBackground';
+import { WalletMarketCurrencyIcon } from '../../../../components/WalletMarketCurrencyIcon';
+import './AccountReady.scss';
+
+type TAccountReadyProps = {
+    marketType: Exclude<NonNullable<ReturnType<typeof useSortedMT5Accounts>['data']>[number]['market_type'], undefined>;
+};
+
+const marketTypeToTitleMapper: Record<TAccountReadyProps['marketType'], string> = {
+    financial: 'MT5 Financial',
+    all: 'Swap-Free',
+    synthetic: 'MT5 Derived',
+};
+
+const AccountReady: React.FC<TAccountReadyProps> = ({ marketType }) => {
+    const { data } = useActiveWalletAccount();
+    const { hide } = useModal();
+    const isDemo = data?.is_virtual;
+    const landingCompanyName = data?.landing_company_name?.toUpperCase();
+
+    return (
+        <div className='wallets-account-ready'>
+            <WalletGradientBackground
+                bodyClassName='wallets-account-ready__info'
+                currency={data?.currency || 'USD'}
+                hasShine
+                theme='grey'
+            >
+                <div
+                    className={`wallets-account-ready__info-badge wallets-account-ready__info-badge--${
+                        isDemo ? 'demo' : 'real'
+                    }`}
+                >
+                    {isDemo ? 'Demo' : 'Real'}
+                </div>
+                <WalletMarketCurrencyIcon
+                    currency={data?.currency || 'USD'}
+                    isDemo={isDemo || false}
+                    marketType={marketType}
+                />
+                <div className='wallets-account-ready__info__text--type'>
+                    {marketTypeToTitleMapper[marketType]} ({landingCompanyName})
+                </div>
+                <div className='wallets-account-ready__info__text--wallet'>{data?.currency} Wallet</div>
+                <div className='wallets-account-ready__info__text--amount'>{data?.display_balance} USD</div>
+            </WalletGradientBackground>
+            <div className='wallets-account-ready__title'>
+                Your {marketTypeToTitleMapper[marketType]}
+                {isDemo && ' demo'} account is ready
+            </div>
+            <div className='wallets-account-ready__subtitle'>
+                You can now start practicing trading with your {marketTypeToTitleMapper[marketType]}
+                {isDemo && ' demo'} account.
+            </div>
+            <button className='wallets-account-ready__button' onClick={hide}>
+                Continue
+            </button>
+        </div>
+    );
+};
+
+export default AccountReady;
diff --git a/packages/wallets/src/features/cfd/screens/AccountReady/index.tsx b/packages/wallets/src/features/cfd/screens/AccountReady/index.tsx
@@ -0,0 +1 @@
+export { default as AccountReady } from './AccountReady';
diff --git a/packages/wallets/src/features/cfd/screens/CreatePassword/CreatePassword.scss b/packages/wallets/src/features/cfd/screens/CreatePassword/CreatePassword.scss
@@ -7,6 +7,8 @@
     gap: 24px;
     width: 400px;
     text-align: center;
+    border-radius: 8px;
+    background: var(--system-light-8-primary-background, #fff);
 
     &-title {
         font-weight: 700;

diff --git a/packages/wallets/src/features/cfd/screens/index.ts b/packages/wallets/src/features/cfd/screens/index.ts
@@ -1,3 +1,4 @@
+export * from './AccountReady';
 export * from './CreatePassword';
 export * from './EnterPassword';
 export * from './GetMoreMT5Accounts';