feat: Wallets Onboarding

packages/appstore/src/components/containers/trading-app-card.scss

@@ -1,14 +1,18 @@
 .trading-app-card {
-    display: inline-flex;
-    align-items: center;
+    padding-bottom: 2rem;
+
+    &__content {
+        display: flex;
+        align-items: center;
+        gap: 1.6rem;
+    }
 
     &__icon {
         &--container {
             display: inline-flex;
             align-items: center;
             justify-content: center;
             height: 100%;
-            padding: 0 0 2rem;
             &__clickable {
                 cursor: pointer;
             }
@@ -19,27 +23,26 @@
         display: inline-flex;
         justify-content: space-between;
         align-items: center;
+        gap: 2rem;
         width: 100%;
         height: 100%;
-        padding: 0 0 2rem;
-        margin-left: 1.6rem;
     }
 
     &__details {
         user-select: none;
         display: inline-flex;
         flex-direction: column;
         justify-content: center;
+        min-height: 8rem;
         height: 100%;
-        padding: 0 2rem 0 0;
         width: 100%;
         &__short-code {
             padding: 0.4rem;
             height: fit-content;
             width: fit-content;
             margin-left: 1rem;
             background-color: var(--icon-grey-background);
-            border-radius: 4px;
+            border-radius: $BORDER_RADIUS;
         }
     }
 

packages/appstore/src/components/containers/trading-app-card.tsx

@@ -98,80 +98,90 @@ const TradingAppCard = ({
 
     return (
         <div className='trading-app-card' key={`trading-app-card__${current_language}`}>
-            <div
-                className={classNames('trading-app-card__icon--container', {
-                    'trading-app-card__icon--container__clickable': clickable_icon,
-                })}
-            >
-                <TradigPlatformIconProps icon={icon} onClick={clickable_icon ? openStaticPage : undefined} size={48} />
-            </div>
-            <div className={classNames('trading-app-card__container', { 'trading-app-card--divider': has_divider })}>
-                <div className='trading-app-card__details'>
-                    <div>
+            <div className='trading-app-card__content' id={`trading-app-card__${icon.toLowerCase()}`}>
+                <div
+                    className={classNames('trading-app-card__icon--container', {
+                        'trading-app-card__icon--container__clickable': clickable_icon,
+                    })}
+                >
+                    <TradigPlatformIconProps
+                        icon={icon}
+                        onClick={clickable_icon ? openStaticPage : undefined}
+                        size={48}
+                    />
+                </div>
+                <div
+                    className={classNames('trading-app-card__container', { 'trading-app-card--divider': has_divider })}
+                >
+                    <div className='trading-app-card__details'>
+                        <React.Fragment>
+                            {is_wallet ? (
+                                <Text className='title' size='xs' line_height='s' color='prominent'>
+                                    {is_wallet_demo && sub_title ? `${sub_title} ${localize('Demo')}` : sub_title}
+                                </Text>
+                            ) : (
+                                <Text className='title' size='xs' line_height='s' color='prominent'>
+                                    {!is_real && sub_title ? `${sub_title} ${localize('Demo')}` : sub_title}
+                                </Text>
+                            )}
+                            {!is_wallet && short_code_and_region && (
+                                <Text
+                                    weight='bolder'
+                                    size='xxxs'
+                                    line_height='s'
+                                    className='trading-app-card__details__short-code'
+                                >
+                                    {short_code_and_region}
+                                </Text>
+                            )}
+                        </React.Fragment>
                         {is_wallet ? (
-                            <Text className='title' size='xs' line_height='s' color='prominent'>
-                                {is_wallet_demo && sub_title ? `${sub_title} ${localize('Demo')}` : sub_title}
+                            <Text
+                                className='title'
+                                size='xs'
+                                line_height='s'
+                                weight='bold'
+                                color={action_type === 'trade' ? 'prominent' : 'general'}
+                            >
+                                {is_wallet_demo && !sub_title && !is_deriv_platform
+                                    ? `${name} ${localize('Demo')}`
+                                    : name}
                             </Text>
                         ) : (
-                            <Text className='title' size='xs' line_height='s' color='prominent'>
-                                {!is_real && sub_title ? `${sub_title} ${localize('Demo')}` : sub_title}
-                            </Text>
-                        )}
-                        {!is_wallet && short_code_and_region && (
                             <Text
-                                weight='bolder'
-                                size='xxxs'
+                                className='title'
+                                size='xs'
                                 line_height='s'
-                                className='trading-app-card__details__short-code'
+                                weight='bold'
+                                color={action_type === 'trade' ? 'prominent' : 'general'}
                             >
-                                {short_code_and_region}
+                                {!is_real && !sub_title && !is_deriv_platform ? `${name} ${localize('Demo')}` : name}
                             </Text>
                         )}
-                    </div>
-                    {is_wallet ? (
-                        <Text
-                            className='title'
-                            size='xs'
-                            line_height='s'
-                            weight='bold'
-                            color={action_type === 'trade' ? 'prominent' : 'general'}
-                        >
-                            {is_wallet_demo && !sub_title && !is_deriv_platform ? `${name} ${localize('Demo')}` : name}
-                        </Text>
-                    ) : (
-                        <Text
-                            className='title'
-                            size='xs'
-                            line_height='s'
-                            weight='bold'
-                            color={action_type === 'trade' ? 'prominent' : 'general'}
-                        >
-                            {!is_real && !sub_title && !is_deriv_platform ? `${name} ${localize('Demo')}` : name}
+                        <Text className='description' color={'general'} size='xxs' line_height='m'>
+                            {app_desc}
                         </Text>
-                    )}
-                    <Text className='description' color={'general'} size='xxs' line_height='m'>
-                        {app_desc}
-                    </Text>
-                    {mt5_acc_auth_status && (
-                        <StatusBadge
-                            className='trading-app-card__acc_status_badge'
-                            account_status={mt5_acc_auth_status}
-                            icon={badge_icon}
-                            text={badge_text}
+                        {mt5_acc_auth_status && (
+                            <StatusBadge
+                                className='trading-app-card__acc_status_badge'
+                                account_status={mt5_acc_auth_status}
+                                icon={badge_icon}
+                                text={badge_text}
+                            />
+                        )}
+                    </div>
+                    <div className='trading-app-card__actions'>
+                        <TradingAppCardActions
+                            action_type={action_type}
+                            link_to={link_to}
+                            onAction={onAction}
+                            is_external={is_external}
+                            new_tab={new_tab}
+                            is_buttons_disabled={!!mt5_acc_auth_status}
+                            is_account_being_created={!!is_account_being_created}
+                            is_real={is_real}
                         />
-                    )}
-                </div>
-                <div className='trading-app-card__actions'>
-                    <TradingAppCardActions
-                        action_type={action_type}
-                        link_to={link_to}
-                        onAction={onAction}
-                        is_external={is_external}
-                        new_tab={new_tab}
-                        is_buttons_disabled={!!mt5_acc_auth_status}
-                        is_account_being_created={!!is_account_being_created}
-                        is_real={is_real}
-                    />
+                    </div>
                 </div>
             </div>
         </div>

packages/appstore/src/components/containers/wallet.tsx

@@ -3,14 +3,17 @@ import classNames from 'classnames';
 import WalletHeader from 'Components/wallet-header';
 import WalletContent from 'Components/wallet-content';
 import { CSSTransition } from 'react-transition-group';
+import { observer, useStore } from '@deriv/stores';
 import { TWalletAccount } from 'Types';
 import './wallet.scss';
 
 type TWallet = {
     wallet_account: TWalletAccount;
 };
 
-const Wallet = ({ wallet_account }: TWallet) => {
+const Wallet = observer(({ wallet_account }: TWallet) => {
+    const { ui } = useStore();
+    const { setIsWalletSwitching } = ui;
     const headerRef = React.useRef<HTMLDivElement>(null);
 
     return (
@@ -24,6 +27,7 @@ const Wallet = ({ wallet_account }: TWallet) => {
                     if (headerRef?.current) {
                         headerRef.current.style.scrollMargin = '20px';
                         headerRef.current.scrollIntoView({ behavior: 'smooth' });
+                        setIsWalletSwitching(false);
                     }
                 }}
                 classNames='wallet__content-transition'
@@ -33,6 +37,6 @@ const Wallet = ({ wallet_account }: TWallet) => {
             </CSSTransition>
         </div>
     );
-};
+});
 
 export default Wallet;

packages/appstore/src/components/modals/wallet-modal/wallet-modal.tsx

@@ -11,7 +11,7 @@ const WalletModal = observer(() => {
     const {
         client: { balance, currency, landing_company_shortcode: shortcode, is_authorize, switchAccount },
         ui: { is_dark_mode_on, is_wallet_modal_visible, is_mobile, setIsWalletModalVisible },
-        traders_hub: { active_modal_tab, active_modal_wallet_id, setWalletModalActiveTab },
+        traders_hub: { active_modal_tab, active_modal_wallet_id, setWalletModalActiveTab, is_wallet_tour_open },
     } = store;
 
     const wallet = useActiveWallet();
@@ -20,11 +20,11 @@ const WalletModal = observer(() => {
         let timeout_id: NodeJS.Timeout;
         if (is_wallet_modal_visible && wallet?.loginid !== active_modal_wallet_id) {
             /** Adding a delay as per requirement because the modal must appear first, then switch the account */
-            timeout_id = setTimeout(() => switchAccount(active_modal_wallet_id), 700);
+            timeout_id = setTimeout(() => is_wallet_modal_visible && switchAccount(active_modal_wallet_id), 700);
         }
 
         return () => clearTimeout(timeout_id);
-    }, [active_modal_wallet_id, is_wallet_modal_visible, switchAccount, wallet?.loginid]);
+    }, [active_modal_wallet_id, is_wallet_modal_visible, switchAccount, wallet?.loginid, is_wallet_tour_open]);
 
     const is_demo = wallet?.is_demo || false;
     const wallet_type = is_demo ? 'demo' : 'real';

packages/appstore/src/components/wallet-header/wallet-header.tsx

@@ -15,8 +15,9 @@ type TWalletHeader = {
 };
 
 const WalletHeader = observer(({ wallet_account }: TWalletHeader) => {
-    const { client, traders_hub } = useStore();
+    const { ui, client, traders_hub } = useStore();
     const { switchAccount, loginid } = client;
+    const { setIsWalletSwitching } = ui;
     const is_active = wallet_account.is_selected;
     // const [is_loading, setIsLoading] = useState(false);
     const { multipliers_account_status } = traders_hub;
@@ -25,7 +26,12 @@ const WalletHeader = observer(({ wallet_account }: TWalletHeader) => {
 
     const onArrowClickHandler = async () => {
         // setIsLoading(true);
-        if (loginid !== wallet_account.loginid) await switchAccount(wallet_account.loginid);
+        if (loginid !== wallet_account.loginid) {
+            setIsWalletSwitching(true);
+            await switchAccount(wallet_account.loginid);
+        } else {
+            setIsWalletSwitching(false);
+        }
         // setIsLoading(false);
     };