Merge remote-tracking branch 'upstream/master' into Rupato/BOT-584/Fe…

…ature--autocomplete-for-tutorials-tab
deriv-com · Oct 3, 2023 · a981182 · a981182
2 parents e595535 + 6cec2f2
commit a981182
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 25 deletions.
diff --git a/...allets/src/components/ExternalTradingPlatforms/GetMoreMT5Accounts/GetMoreMT5Accounts.scss b/...allets/src/components/ExternalTradingPlatforms/GetMoreMT5Accounts/GetMoreMT5Accounts.scss
@@ -47,15 +47,4 @@
             }
         }
     }
-
-    &-text {
-        color: var(--system-dark-1-prominent-text, #fff);
-        text-align: center;
-
-        /* desktop/paragraph/P2 - bold */
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 20px; /* 142.857% */
-    }
 }
diff --git a/packages/wallets/src/components/ExternalTradingPlatforms/MT5AccountType/MT5AccountType.scss b/packages/wallets/src/components/ExternalTradingPlatforms/MT5AccountType/MT5AccountType.scss
@@ -6,7 +6,6 @@
     background: var(--system-light-8-primary-background, #fff);
 
     &-content {
-        width: 80vw;
         height: 70vh;
         display: flex;
         padding: 24px;
@@ -18,7 +17,13 @@
         align-self: stretch;
 
         @include mobile {
-            flex-direction: column;
+            flex-direction: row;
+            align-items: center;
+            display: flex;
+            justify-content: flex-start;
+            width: 100%;
+            overflow-x: auto;
+            height: 100%;
         }
     }
 }
diff --git a/...allets/src/components/ExternalTradingPlatforms/MT5AccountTypeCard/MT5AccountTypeCard.scss b/...allets/src/components/ExternalTradingPlatforms/MT5AccountTypeCard/MT5AccountTypeCard.scss
@@ -62,6 +62,10 @@
     }
     &-selected {
         border-radius: 16px;
-        box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
+        border: 2px solid var(--brand-blue, #85acb0);
+        background: var(--system-light-8-primary-background, #fff);
+
+        /* Shadows/xxl */
+        box-shadow: 0px 24px 48px 0px rgba(14, 14, 14, 0.18);
     }
 }
diff --git a/packages/wallets/src/components/MT5AccountTypeModal/MT5AccountTypeModal.scss b/packages/wallets/src/components/MT5AccountTypeModal/MT5AccountTypeModal.scss
@@ -0,0 +1,45 @@
+.wallets-mt5-account-type-modal {
+    &-next-button {
+        display: flex;
+        height: 32px;
+        padding: 6px 16px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 4px;
+        background: #ff444f;
+        border: unset;
+        cursor: pointer;
+
+        @include mobile {
+            width: 100%;
+            padding: 20px 16px;
+        }
+
+        &-disabled {
+            border: unset;
+            padding: 6px 16px;
+            justify-content: center;
+            align-items: center;
+            border-radius: 4px;
+            background-color: #ccc;
+            color: #666;
+            cursor: not-allowed;
+
+            @include mobile {
+                width: 100%;
+                padding: 10px 16px;
+            }
+        }
+    }
+
+    &-text {
+        color: var(--system-dark-1-prominent-text, #fff);
+        text-align: center;
+
+        /* desktop/paragraph/P2 - bold */
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 20px; /* 142.857% */
+    }
+}
diff --git a/packages/wallets/src/components/MT5AccountTypeModal/MT5AccountTypeModal.tsx b/packages/wallets/src/components/MT5AccountTypeModal/MT5AccountTypeModal.tsx
@@ -1,24 +1,27 @@
 import React, { useState } from 'react';
 import { MT5AccountType } from '../ExternalTradingPlatforms/MT5AccountType';
+import { JurisdictionModal } from '../JurisdictionModal';
+import { useModal } from '../ModalProvider';
 import { ModalStepWrapper } from '../ModalStepWrapper';
-import { PrimaryActionButton } from '../PrimaryActionButton';
+import './MT5AccountTypeModal.scss';
 
 type TMarketTypes = React.ComponentProps<typeof MT5AccountType>['selectedMarketType'];
 
 const MT5AccountTypeModal = () => {
     const [selectedMarketType, setSelectedMarketType] = useState<TMarketTypes>(undefined);
+    const { show } = useModal();
 
     return (
         <ModalStepWrapper
             renderFooter={() => (
-                <PrimaryActionButton
-                    disabled={!selectedMarketType}
+                <button
+                    className={`wallets-mt5-account-type-modal-next-button${!selectedMarketType ? '-disabled' : ''}`}
                     onClick={() => {
-                        //Jurisdiction modal here
+                        show(<JurisdictionModal />);
                     }}
                 >
-                    <p className='wallets-get-more-mt5-accounts-text'>Next</p>
-                </PrimaryActionButton>
+                    <p className='wallets-mt5-account-type-modal-text'>Next</p>
+                </button>
             )}
             title='Select Deriv MT5’s account type'
         >

diff --git a/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.scss b/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.scss
@@ -62,7 +62,7 @@
 
     &-content {
         display: flex;
-        width: 7rem;
+        width: 80px;
         flex-direction: column;
         align-items: center;
         gap: 0.4rem;

diff --git a/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx b/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx
@@ -61,7 +61,9 @@ const WalletListCardActions: React.FC<TProps> = ({ isActive, isDemo, loginid })
                             <button
                                 className='wallets-mobile-actions-content-icon'
                                 key={button.name}
-                                onClick={button.action}
+                                onClick={() => {
+                                    history.push(`/appstore/traders-hub/cashier/${button.name}`);
+                                }}
                             >
                                 {button.icon}
                             </button>

diff --git a/packages/wallets/src/components/WalletsCarouselContent/WalletsCarouselContent.tsx b/packages/wallets/src/components/WalletsCarouselContent/WalletsCarouselContent.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import useEmblaCarousel from 'embla-carousel-react';
-import { useAuthorize, useWalletAccountsList } from '@deriv/api';
+import { useActiveWalletAccount, useAuthorize, useWalletAccountsList } from '@deriv/api';
 import { ProgressBar } from '../ProgressBar';
 import { WalletCard } from '../WalletCard';
-// import { WalletListCardActions } from '../WalletListCardActions';
+import { WalletListCardActions } from '../WalletListCardActions';
 import './WalletsCarouselContent.scss';
 
 const WalletsCarouselContent: React.FC = () => {
@@ -13,6 +13,7 @@ const WalletsCarouselContent: React.FC = () => {
         skipSnaps: true,
     });
     const { data: walletAccountsList } = useWalletAccountsList();
+    const { data: activeWallet } = useActiveWalletAccount();
     const activeWalletIndex = useMemo(
         () =>
             walletAccountsList?.findIndex(item => item?.is_active) ||
@@ -56,7 +57,11 @@ const WalletsCarouselContent: React.FC = () => {
                     setActiveIndex={switchAccount}
                 />
             </div>
-            {/* <WalletListCardActions /> */}
+            <WalletListCardActions
+                isActive={activeWallet?.is_active || false}
+                isDemo={activeWallet?.is_virtual || false}
+                loginid={activeWallet?.loginid || ''}
+            />
         </div>
     );
 };