chore: add deriv x modal

yashim-deriv · Dec 23, 2022 · d88fbda · d88fbda
1 parent 9711618
commit d88fbda
Show file tree

Hide file tree

Showing 9 changed files with 637 additions and 264 deletions.
diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss
@@ -180,6 +180,38 @@
             }
         }
     }
+
+    &__maintenance {
+        display: flex;
+        padding-top: 1rem;
+        align-items: center;
+
+        &-icon {
+            padding-right: 0.5rem;
+        }
+
+        &-text {
+            color: var(--text-less-prominent);
+        }
+    }
+
+    &__dxtrade-button {
+        display: flex;
+        background: var(--brand-dark-grey);
+        align-items: center;
+        text-decoration: none;
+        padding: 0.2rem;
+        border-radius: $BORDER_RADIUS;
+
+        &-text {
+            padding: 0.5rem;
+
+            @include mobile {
+                padding-right: 0.5rem;
+                white-space: nowrap;
+            }
+        }
+    }
     &__specs {
         padding: 1.6rem;
         width: 100%;
@@ -324,12 +356,31 @@
                 }
                 &-links {
                     display: flex;
+                    align-items: center;
                     @include mobile {
                         flex-direction: column;
+                        grid-gap: 0.5rem;
+
+                        padding-top: 2rem;
+                    }
+
+                    &--huawei {
+                        padding-left: 0.7rem;
+
+                        @include mobile {
+                            padding: 0;
+                        }
+                    }
+
+                    &--apple {
+                        @include mobile {
+                            padding: 0;
+                            margin: 0;
+                        }
                     }
                 }
                 @include mobile {
-                    margin-left: unset;
+                    margin-left: 0;
                     margin-right: unset;
                 }
             }

diff --git a/packages/appstore/src/components/cfds-listing/index.tsx b/packages/appstore/src/components/cfds-listing/index.tsx
@@ -163,6 +163,9 @@ const CFDsListing = () => {
                                 type='transfer_trade'
                                 availability={selected_region}
                                 is_disabled={!is_demo ? !has_no_real_account : account.is_disabled}
+                                onAction={() => {
+                                    startTrade(account.platform, existing_account);
+                                }}
                             />
                         ))
                     ) : (

diff --git a/packages/appstore/src/components/modals/modal-manager.tsx b/packages/appstore/src/components/modals/modal-manager.tsx
@@ -54,6 +54,7 @@ const ModalManager = () => {
                 onPasswordManager={togglePasswordManagerModal}
                 toggleModal={toggleMT5TradeModal}
                 is_eu_user={(is_logged_in && is_eu) || (!is_logged_in && is_eu_country)}
+                is_demo={is_demo}
             />
             <CFDPasswordManagerModal context={store} platform={platform} toggleModal={togglePasswordManagerModal} />
             <ResetTradingPasswordModal context={store} />

diff --git a/packages/cfd/src/Components/cfd-account-card.tsx b/packages/cfd/src/Components/cfd-account-card.tsx
@@ -197,6 +197,7 @@ const CFDAccountCardComponent = ({
     type,
     real_account_creation_unlock_date,
     setShouldShowCooldownModal,
+    setAppstorePlatform,
 }: TCFDAccountCard) => {
     const existing_data = existing_accounts_data?.length ? existing_accounts_data?.[0] : existing_accounts_data;
 
@@ -433,6 +434,7 @@ const CFDAccountCardComponent = ({
                                                 className='dc-btn cfd-account-card__account-selection cfd-account-card__account-selection--primary'
                                                 type='button'
                                                 onClick={() => {
+                                                    setAppstorePlatform(platform);
                                                     toggleMT5TradeModal();
                                                     setMT5TradeAccount(acc);
                                                 }}
@@ -481,6 +483,7 @@ const CFDAccountCardComponent = ({
                                                 className='dc-btn cfd-account-card__account-selection cfd-account-card__account-selection--primary'
                                                 type='button'
                                                 onClick={() => {
+                                                    setAppstorePlatform(platform);
                                                     toggleMT5TradeModal();
                                                     setMT5TradeAccount(existing_data);
                                                 }}
@@ -570,7 +573,7 @@ const CFDAccountCardComponent = ({
                                                             data.landing_company_short === acc.landing_company_short &&
                                                             data.login === acc.login
                                                     );
-
+                                                    setAppstorePlatform(platform);
                                                     toggleMT5TradeModal();
                                                     setMT5TradeAccount(selected_account_data);
                                                 }}
@@ -710,12 +713,13 @@ const CFDAccountCardComponent = ({
     );
 };
 
-const CFDAccountCard = connect(({ modules: { cfd }, client, ui }: RootStore) => ({
+const CFDAccountCard = connect(({ modules: { cfd }, client, ui, common }: RootStore) => ({
     dxtrade_tokens: cfd.dxtrade_tokens,
     isEligibleForMoreDemoMt5Svg: client.isEligibleForMoreDemoMt5Svg,
     isEligibleForMoreRealMt5: client.isEligibleForMoreRealMt5,
     setIsAcuityModalOpen: ui.setIsAcuityModalOpen,
     setMT5TradeAccount: cfd.setMT5TradeAccount,
+    setAppstorePlatform: common.setAppstorePlatform,
 }))(CFDAccountCardComponent);
 
 export { CFDAccountCard };
diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts
@@ -113,6 +113,7 @@ export type TCFDAccountCard = {
     setIsAcuityModalOpen: (value: boolean) => void;
     real_account_creation_unlock_date: string;
     setShouldShowCooldownModal: (value: boolean) => void;
+    setAppstorePlatform: (value: string) => void;
 };
 
 export type TTradingPlatformAccounts = {

diff --git a/packages/cfd/src/Containers/cfd-dashboard.tsx b/packages/cfd/src/Containers/cfd-dashboard.tsx
@@ -643,6 +643,7 @@ const CFDDashboard = (props: TCFDDashboardProps) => {
                                 onPasswordManager={togglePasswordManagerModal}
                                 toggleModal={toggleMT5TradeModal}
                                 is_eu_user={(is_logged_in && is_eu) || (!is_logged_in && is_eu_country)}
+                                platform={platform}
                             />
                             <div className='cfd-dashboard__maintenance'>
                                 <Icon