forked from binary-com/deriv-app
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[TRAH] Sergei / TRAH-2591 / MT5 Trade Screen (binary-com#12793)
* fix: delete export from ButtonGroup * feat: add TradeModal * feat: add some data * feat: add test button * feat: add images and some styles * refactor: delete comments * feat: add onClick for CFDs open modal button * feat: almost done * feat: almost done * refactor: delete helper code from TradersHubRoute * feat: implemet review suggestions * feat: implement more comments * feat: change mt5 to CFDPlatforms * feat: implement comments 3 * feat: change Text size * feat: implement comments #4
- Loading branch information
1 parent
6ff40ff
commit 8820630
Showing
18 changed files
with
378 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
74 changes: 74 additions & 0 deletions
74
packages/tradershub/src/features/cfd/modals/TradeModal/TradeModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import React, { useEffect } from 'react'; | ||
| import QRCode from 'qrcode.react'; | ||
| import { Provider } from '@deriv/library'; | ||
| import { Text, useBreakpoint } from '@deriv/quill-design'; | ||
| import { Modal } from '../../../../components/Modal'; | ||
| import { THooks, TMarketTypes, TPlatforms } from '../../../../types'; | ||
| import { AppToIconMapper, CFDPlatforms, LinksMapper, PlatformDetails, TAppLinks } from '../../constants'; | ||
| import { MT5TradeScreen } from '../../screens/MT5TradeScreen'; | ||
|
|
||
| type TTradeModalProps = { | ||
| account?: THooks.CtraderAccountsList | THooks.DxtradeAccountsList | THooks.MT5AccountsList; | ||
| marketType?: TMarketTypes.All; | ||
| platform: TPlatforms.All; | ||
| }; | ||
|
|
||
| const TradeModal = ({ account, marketType, platform }: TTradeModalProps) => { | ||
| const { isDesktop } = useBreakpoint(); | ||
| const { setCfdState } = Provider.useCFDContext(); | ||
|
|
||
| useEffect(() => { | ||
| setCfdState('marketType', marketType); | ||
| setCfdState('platform', platform); | ||
| if (platform === CFDPlatforms.MT5) setCfdState('accountId', (account as THooks.MT5AccountsList)?.loginid); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); | ||
|
|
||
| const appOrder = ['ios', 'android', 'huawei']; | ||
|
|
||
| return ( | ||
| <Modal> | ||
| <Modal.Header title='Trade' /> | ||
| <Modal.Content> | ||
| <MT5TradeScreen account={account} /> | ||
| </Modal.Content> | ||
| <Modal.Footer> | ||
| <div className='pt-50 min-h-[190px] flex justify-center items-center flex-col h-fit w-full gap-800'> | ||
| <Text align='center' size='sm' weight='bold'> | ||
| Download {PlatformDetails[platform].title} on your phone to trade with the{' '} | ||
| {PlatformDetails[platform].title} account | ||
| </Text> | ||
| <div className='flex gap-800'> | ||
| <div className='flex flex-col justify-center gap-400'> | ||
| {appOrder.map(app => { | ||
| const AppsLinkMapper = LinksMapper[platform][app as keyof TAppLinks]; | ||
| if (AppsLinkMapper) { | ||
| const AppIcon = AppToIconMapper[app]; | ||
| const appLink = AppsLinkMapper; | ||
| return ( | ||
| <AppIcon | ||
| className='w-[137px] h-[40px] cursor-pointer' | ||
| key={app} | ||
| onClick={() => window.open(appLink)} | ||
| /> | ||
| ); | ||
| } | ||
| return null; | ||
| })} | ||
| </div> | ||
| {isDesktop && ( | ||
| <div className='border-75 border-system-light-hover-background rounded-200 flex flex-col justify-center items-center w-[150px] gap-[5px] p-400'> | ||
| <QRCode size={80} value={PlatformDetails[platform].link} /> | ||
| <Text align='center' size='xs'> | ||
| Scan the QR code to download {PlatformDetails[platform].title} | ||
| </Text> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </Modal.Footer> | ||
| </Modal> | ||
| ); | ||
| }; | ||
|
|
||
| export default TradeModal; |
1 change: 1 addition & 0 deletions
1
packages/tradershub/src/features/cfd/modals/TradeModal/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default as TradeModal } from './TradeModal'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.