Thisyahlen/showing wallets subtasks

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

@@ -22,7 +22,7 @@
         justify-content: space-between;
         align-items: center;
 
-        &--close-icon {
+        &-close-icon {
             cursor: pointer;
         }
 

packages/wallets/src/components/DerivAppsSection/DerivAppsTradingAccount.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import DerivApps from '../../public/images/deriv-apps.svg';
 import { THooks } from '../../types';
 import { WalletButton, WalletText } from '../Base';
@@ -11,6 +12,7 @@ type TProps = {
 };
 
 const DerivAppsTradingAccount: React.FC<TProps> = ({ isDemo, label, tradingAccountLoginId }) => {
+    const history = useHistory();
     return (
         <div className='wallets-deriv-apps-section'>
             <DerivApps />
@@ -26,7 +28,14 @@ const DerivAppsTradingAccount: React.FC<TProps> = ({ isDemo, label, tradingAccou
                     {tradingAccountLoginId}
                 </WalletText>
             </div>
-            <WalletButton color='white' text='Transfer' variant='outlined' />
+            <WalletButton
+                color='white'
+                onClick={() => {
+                    history.push('wallets/cashier/transfer');
+                }}
+                text='Transfer'
+                variant='outlined'
+            />
         </div>
     );
 };

packages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.scss

@@ -17,6 +17,7 @@
         gap: 2rem;
         align-self: stretch;
         padding-bottom: 2.4rem;
+        justify-content: space-between;
 
         &-title {
             display: flex;
@@ -46,6 +47,10 @@
         gap: 1.6rem 4.8rem;
         grid-template-columns: repeat(3, 1fr);
 
+        &__icon {
+            cursor: pointer;
+        }
+
         @include mobile {
             margin: auto 2rem;
             grid-template-rows: repeat(5, 1fr);

packages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx

@@ -1,54 +1,71 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { useActiveWalletAccount } from '@deriv/api';
+import { optionsAndMultipliersContent } from '../../constants/constants';
+import { getStaticUrl, getUrlBinaryBot, getUrlSmartTrader } from '../../helpers/urls';
 import useDevice from '../../hooks/useDevice';
-import IcAppstoreBinaryBot from '../../public/images/ic-appstore-binary-bot.svg';
-import IcAppstoreDerivBot from '../../public/images/ic-appstore-deriv-bot.svg';
-import IcAppstoreDerivGo from '../../public/images/ic-appstore-deriv-go.svg';
-import IcAppstoreDerivTrader from '../../public/images/ic-appstore-deriv-trader.svg';
-import IcAppstoreSmartTrader from '../../public/images/ic-appstore-smart-trader.svg';
 import { WalletButton, WalletText } from '../Base';
 import { DerivAppsSection } from '../DerivAppsSection';
 import { TradingAccountCard } from '../TradingAccountCard';
 import './OptionsAndMultipliersListing.scss';
 
-const optionsAndMultipliers = [
-    {
-        description: 'Options and multipliers trading platform.',
-        icon: <IcAppstoreDerivTrader />,
-        redirect: '/',
-        title: 'Deriv Trader',
-    },
-    {
-        description: 'Automate your trading, no coding needed.',
-        icon: <IcAppstoreDerivBot />,
-        redirect: '/bot',
-        title: 'Deriv Bot',
-    },
-    {
-        description: 'Our legacy options trading platform.',
-        icon: <IcAppstoreSmartTrader />,
-        redirect: '',
-        title: 'SmartTrader',
-    },
-    {
-        description: 'Our legacy automated trading platform.',
-        icon: <IcAppstoreBinaryBot />,
-        redirect: '',
-        title: 'Binary Bot',
-    },
-    {
-        description: 'Trade on the go with our mobile app.',
-        icon: <IcAppstoreDerivGo />,
-        redirect: '',
-        title: 'Deriv GO',
-    },
-];
+type TShowButtonProps = Pick<typeof optionsAndMultipliersContent[number], 'isExternal' | 'redirect'>;
 
-const OptionsAndMultipliersListing: React.FC = () => {
+type TLinkTitleProps = Pick<typeof optionsAndMultipliersContent[number], 'icon' | 'title'>;
+
+const LinkTitle: React.FC<TLinkTitleProps> = ({ icon, title }) => {
+    const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        event.persist();
+        switch (title) {
+            case 'Deriv Trader':
+                window.open(getStaticUrl(`/dtrader`));
+                break;
+            case 'Deriv Bot':
+                window.open(getStaticUrl(`/dbot`));
+                break;
+            case 'SmartTrader':
+                window.open(getUrlSmartTrader());
+                break;
+            case 'Binary Bot':
+                window.open(getUrlBinaryBot());
+                break;
+            case 'Deriv GO':
+                window.open(getStaticUrl('/deriv-go'));
+                break;
+            default:
+                break;
+        }
+    };
+
+    return (
+        <div className='wallets-options-and-multipliers-listing__content__icon' onClick={handleClick}>
+            {icon}
+        </div>
+    );
+};
+
+const ShowOpenButton = ({ isExternal, redirect }: TShowButtonProps) => {
     const history = useHistory();
-    const { isMobile } = useDevice();
     const { data } = useActiveWalletAccount();
+    if (data?.dtrade_loginid) {
+        return (
+            <WalletButton
+                onClick={() => {
+                    if (isExternal) {
+                        window.open(redirect, '_blank');
+                    } else {
+                        history.push(redirect);
+                    }
+                }}
+                text='Open'
+            />
+        );
+    }
+    return null;
+};
+
+const OptionsAndMultipliersListing: React.FC = () => {
+    const { isMobile } = useDevice();
 
     return (
         <div className='wallets-options-and-multipliers-listing'>
@@ -88,33 +105,27 @@ const OptionsAndMultipliersListing: React.FC = () => {
                 <DerivAppsSection />
             </section>
             <div className='wallets-options-and-multipliers-listing__content'>
-                {optionsAndMultipliers.map(account => (
-                    <TradingAccountCard
-                        {...account}
-                        key={`trading-account-card-${account.title}`}
-                        leading={() => (
-                            <div className='wallets-options-and-multipliers-listing__content__icon'>{account.icon}</div>
-                        )}
-                        trailing={() =>
-                            data?.dtrade_loginid && (
-                                <WalletButton
-                                    onClick={() => {
-                                        history.push(account.redirect);
-                                    }}
-                                    text='Open'
-                                />
-                            )
-                        }
-                    >
-                        <div className='wallets-options-and-multipliers-listing__content__details'>
-                            <WalletText size='sm' weight='bold'>
-                                {account.title}
-                            </WalletText>
+                {optionsAndMultipliersContent.map(account => {
+                    const title = account.title;
+                    return (
+                        <TradingAccountCard
+                            {...account}
+                            key={`trading-account-card-${account.title}`}
+                            leading={() => <LinkTitle icon={account.icon} title={title} />}
+                            trailing={() => (
+                                <ShowOpenButton isExternal={account.isExternal} redirect={account.redirect} />
+                            )}
+                        >
+                            <div className='wallets-options-and-multipliers-listing__content__details'>
+                                <WalletText size='sm' weight='bold'>
+                                    {account.title}
+                                </WalletText>
 
-                            <WalletText size='xs'>{account.description}</WalletText>
-                        </div>
-                    </TradingAccountCard>
-                ))}
+                                <WalletText size='xs'>{account.description}</WalletText>
+                            </div>
+                        </TradingAccountCard>
+                    );
+                })}
             </div>
         </div>
     );

packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx

@@ -37,7 +37,13 @@ const getWalletHeaderButtons = (isDemo: boolean, handleAction?: () => void) => {
     // Filter out the "Withdraw" button when is_demo is true
     const filteredButtons = isDemo ? buttons.filter(button => button.name !== 'withdraw') : buttons;
 
-    return filteredButtons.map(button => ({
+    const orderForDemo = ['transfer', 'transactions', 'reset-balance'];
+
+    const sortedButtons = isDemo
+        ? [...filteredButtons].sort((a, b) => orderForDemo.indexOf(a.name) - orderForDemo.indexOf(b.name))
+        : filteredButtons;
+
+    return sortedButtons.map(button => ({
         ...button,
         action: () => handleAction?.(),
     }));

packages/wallets/src/constants/constants.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { getStaticUrl, getUrlBinaryBot, getUrlSmartTrader } from '../helpers/urls';
+import IcAppstoreBinaryBot from '../public/images/ic-appstore-binary-bot.svg';
+import IcAppstoreDerivBot from '../public/images/ic-appstore-deriv-bot.svg';
+import IcAppstoreDerivGo from '../public/images/ic-appstore-deriv-go.svg';
+import IcAppstoreDerivTrader from '../public/images/ic-appstore-deriv-trader.svg';
+import IcAppstoreSmartTrader from '../public/images/ic-appstore-smart-trader.svg';
+
+export const optionsAndMultipliersContent = [
+    {
+        description: 'Options and multipliers trading platform.',
+        icon: <IcAppstoreDerivTrader />,
+        redirect: '/',
+        title: 'Deriv Trader',
+    },
+    {
+        description: 'Automate your trading, no coding needed.',
+        icon: <IcAppstoreDerivBot />,
+        redirect: '/bot',
+        title: 'Deriv Bot',
+    },
+    {
+        description: 'Our legacy options trading platform.',
+        icon: <IcAppstoreSmartTrader />,
+        isExternal: true,
+        redirect: getUrlSmartTrader(),
+        title: 'SmartTrader',
+    },
+    {
+        description: 'Our legacy automated trading platform.',
+        icon: <IcAppstoreBinaryBot />,
+        isExternal: true,
+        redirect: getUrlBinaryBot(),
+        title: 'Binary Bot',
+    },
+    {
+        description: 'Trade on the go with our mobile app.',
+        icon: <IcAppstoreDerivGo />,
+        isExternal: true,
+        redirect: getStaticUrl('/deriv-go'),
+        title: 'Deriv GO',
+    },
+];

packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.scss

@@ -1,4 +1,7 @@
 .wallets-added-mt5 {
+    &__icon {
+        cursor: pointer;
+    }
     &__actions {
         display: flex;
         flex-direction: column;
@@ -7,6 +10,7 @@
 
     &__details {
         flex-grow: 1;
+        user-select: none;
 
         &-title {
             display: flex;

packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx

@@ -3,22 +3,39 @@ import { useHistory } from 'react-router-dom';
 import { useAuthorize } from '@deriv/api';
 import { WalletButton } from '../../../../../components/Base';
 import { TradingAccountCard } from '../../../../../components/TradingAccountCard';
-import { MarketTypeToIconMapper, MarketTypeToTitleMapper } from '../../../constants';
+import { getStaticUrl } from '../../../../../helpers/urls';
 import { THooks } from '../../../../../types';
+import { MarketTypeToIconMapper, MarketTypeToTitleMapper } from '../../../constants';
 import './AddedMT5AccountsList.scss';
 
 type TProps = {
     account: THooks.MT5AccountsList;
 };
 
+const MT5AccountIcon: React.FC<TProps> = ({ account }) => {
+    const IconToLink = () => {
+        switch (account.market_type) {
+            case 'financial':
+            case 'synthetic':
+            case 'all':
+                return window.open(getStaticUrl('/dmt5'));
+            default:
+                return window.open(getStaticUrl('/dmt5'));
+        }
+    };
+    return (
+        <div className='wallets-added-mt5__icon' onClick={() => IconToLink()}>
+            {MarketTypeToIconMapper[account.market_type || 'all']}
+        </div>
+    );
+};
+
 const AddedMT5AccountsList: React.FC<TProps> = ({ account }) => {
     const { data: activeWallet } = useAuthorize();
     const history = useHistory();
     return (
         <TradingAccountCard
-            leading={() => (
-                <div className='wallets-added-mt5__icon'>{MarketTypeToIconMapper[account.market_type || 'all']}</div>
-            )}
+            leading={() => <MT5AccountIcon account={account} />}
             trailing={() => (
                 <div className='wallets-added-mt5__actions'>
                     <WalletButton

packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.scss

@@ -1,4 +1,8 @@
 .wallets-available-mt5 {
+    &__icon {
+        cursor: pointer;
+    }
+
     &__text {
         color: var(--brand-coral, #ff444f);
         text-align: center;

packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx

@@ -2,26 +2,41 @@ import React from 'react';
 import { useActiveWalletAccount } from '@deriv/api';
 import { TradingAccountCard, WalletButton } from '../../../../../components';
 import { useModal } from '../../../../../components/ModalProvider';
+import { getStaticUrl } from '../../../../../helpers/urls';
+import { THooks } from '../../../../../types';
 import { MarketTypeToDescriptionMapper, MarketTypeToIconMapper, MarketTypeToTitleMapper } from '../../../constants';
 import { JurisdictionModal, MT5PasswordModal } from '../../../modals';
-import { THooks } from '../../../../../types';
 import './AvailableMT5AccountsList.scss';
 
 type TProps = {
     account: THooks.SortedMT5Accounts;
 };
 
+const MT5AccountIcon: React.FC<TProps> = ({ account }) => {
+    const IconToLink = () => {
+        switch (account.market_type) {
+            case 'financial':
+            case 'synthetic':
+            case 'all':
+                return window.open(getStaticUrl('/dmt5'));
+            default:
+                return window.open(getStaticUrl('/dmt5'));
+        }
+    };
+    return (
+        <div className='wallets-available-mt5__icon' onClick={() => IconToLink()}>
+            {MarketTypeToIconMapper[account.market_type || 'all']}
+        </div>
+    );
+};
+
 const AvailableMT5AccountsList: React.FC<TProps> = ({ account }) => {
     const { data: activeWallet } = useActiveWalletAccount();
     const { setModalState, show } = useModal();
 
     return (
         <TradingAccountCard
-            leading={() => (
-                <div className='wallets-available-mt5__icon'>
-                    {MarketTypeToIconMapper[account.market_type || 'all']}
-                </div>
-            )}
+            leading={() => <MT5AccountIcon account={account} />}
             trailing={() => (
                 <WalletButton
                     color='primary-light'