Merge pull request #66 from zakibinary/enable_contract_replay

zaki/enable_contract_replay

src/javascript/app/App/Components/Animations/fade-wrapper.jsx

@@ -0,0 +1,38 @@
+import PropTypes      from 'prop-types';
+import React          from 'react';
+import posed,
+{ PoseGroup }         from 'react-pose';
+
+const FadeDiv = posed.div({
+    enter: {
+        opacity   : 1,
+        transition: { duration: 300 },
+    },
+    exit: {
+        opacity   : 0,
+        transition: { duration: 300 },
+    },
+});
+
+const FadeWrapper = ({
+    children,
+    className,
+    keyname,
+    is_visible,
+}) => (
+    <PoseGroup>
+        {is_visible &&
+            <FadeDiv className={className} key={keyname}>
+                {children}
+            </FadeDiv>
+        }
+    </PoseGroup>
+);
+
+FadeWrapper.propTypes = {
+    children  : PropTypes.node,
+    is_visible: PropTypes.bool,
+    keyname   : PropTypes.string,
+};
+
+export { FadeWrapper };

src/javascript/app/App/Components/Animations/index.js

@@ -0,0 +1 @@
+export * from './fade-wrapper.jsx';

src/javascript/app/App/Components/Elements/ContractDrawer/contract-drawer.jsx

@@ -2,34 +2,64 @@ import classNames            from 'classnames';
 import PropTypes             from 'prop-types';
 import React, { Component }  from 'react';
 import { withRouter }        from 'react-router';
-import Localize              from 'App/Components/Elements/localize.jsx';
 import { Icon, IconBack }    from 'Assets/Common';
-import routes                from 'Constants/routes';
+import Localize              from 'App/Components/Elements/localize.jsx';
+import { UnderlyingIcon }    from 'App/Components/Elements/underlying-icon.jsx';
+import ContractAudit         from 'App/Components/Elements/PositionsDrawer/result-details.jsx';
+import ContractTypeCell      from 'App/Components/Elements/PositionsDrawer/contract-type-cell.jsx';
 import ProfitLossCardContent from 'Modules/Reports/Components/profit-loss-card-content.jsx';
-import MarketSymbolIconRow   from 'Modules/Reports/Components/market-symbol-icon-row.jsx';
 import ContractCardBody      from './contract-card-body.jsx';
 import ContractCardFooter    from './contract-card-footer.jsx';
 import ContractCardHeader    from './contract-card-header.jsx';
 import ContractCard          from './contract-card.jsx';
-import ContractAudit         from '../ContractAudit/contract-audit.jsx';
+import {
+    getDurationPeriod,
+    getDurationTime,
+    getDurationUnitText }    from '../../../../Stores/Modules/Portfolio/Helpers/details';
+import {
+    getEndTime,
+    isUserSold }             from '../../../../Stores/Modules/Contract/Helpers/logic';
 import Money                 from '../money.jsx';
 
 class ContractDrawer extends Component {
+    state = {
+        is_shade_on: false,
+    }
+
+    handleShade = (shade) => {
+        this.setState({ is_shade_on: shade });
+    }
+
     getBodyContent () {
         const {
             buy_price,
             currency,
+            exit_tick,
+            is_sold,
             payout,
             profit,
         } = this.props.contract_info;
+        const { contract_info } = this.props;
+        const exit_spot = isUserSold(contract_info) ? '-' : exit_tick;
 
         return (
-            <ContractCard contract_info={this.props.contract_info}>
+            <ContractCard contract_info={contract_info}>
                 <ContractCardHeader>
-                    <MarketSymbolIconRow
-                        show_description={true}
-                        payload={this.props.contract_info}
-                    />
+                    <div className={classNames(
+                        'contract-card__grid',
+                        'contract-card__grid-underlying-trade'
+                    )}
+                    >
+                        <div className='contract-card__underlying-name'>
+                            <UnderlyingIcon market={contract_info.underlying} />
+                            <span className='contract-card__symbol'>
+                                {contract_info.display_name}
+                            </span>
+                        </div>
+                        <div className='contract-card__type'>
+                            <ContractTypeCell type={contract_info.contract_type} />
+                        </div>
+                    </div>
                 </ContractCardHeader>
                 <ContractCardBody>
                     <ProfitLossCardContent
@@ -48,19 +78,28 @@ class ContractDrawer extends Component {
                             />
                         </span>
                     </div>
-                    <ContractAudit contract={this.props.contract_info} />
+                    <ContractAudit
+                        contract_info={contract_info}
+                        contract_end_time={getEndTime(contract_info)}
+                        is_shade_visible={this.handleShade}
+                        duration={getDurationTime(contract_info)}
+                        duration_unit={getDurationUnitText(getDurationPeriod(contract_info))}
+                        exit_spot={exit_spot}
+                        has_result={!!(is_sold)}
+                    />
                 </ContractCardFooter>
             </ContractCard>
         );
     }
 
     render() {
+        if (!this.props.contract_info) return null;
         const body_content = this.getBodyContent();
         return (
             <div className={classNames('contract-drawer', {})}>
                 <div
                     className='contract-drawer__heading'
-                    onClick={() => this.props.history.push(routes.reports)}
+                    onClick={() => this.props.history.goBack()}
                 >
                     <Icon icon={IconBack} />
                     <h2><Localize str={this.props.heading || 'Contract'} /></h2>

src/javascript/app/App/Components/Elements/PositionsDrawer/positions-drawer.jsx

@@ -81,7 +81,7 @@ class PositionsDrawer extends React.Component {
                 })}
             >
                 <div className='positions-drawer__header'>
-                    <span className='positions-drawer__title'>{localize('Positions')}</span>
+                    <span className='positions-drawer__title'>{localize('Open Positions')}</span>
                     <div
                         className='positions-drawer__icon-close'
                         onClick={toggleDrawer}

src/javascript/app/App/Components/Routes/binary-routes.jsx

@@ -1,11 +1,10 @@
 import React              from 'react';
 import { Switch }         from 'react-router-dom';
 import getRoutesConfig    from 'App/Constants/routes-config';
-import UILoader           from 'App/Components/Elements/ui-loader.jsx';
 import RouteWithSubRoutes from './route-with-sub-routes.jsx';
 
 const BinaryRoutes = (props) => (
-    <React.Suspense fallback={<UILoader />}>
+    <React.Suspense fallback={<div />}>
         <Switch>
             {
                 getRoutesConfig().map((route, idx) => (

src/javascript/app/App/Containers/Layout/footer.jsx

@@ -21,6 +21,7 @@ const Footer = ({
     is_loading,
     is_logged_in,
     is_positions_drawer_on,
+    is_route_blurred,
     is_settings_dialog_on,
     location,
     showFullBlur,
@@ -29,7 +30,7 @@ const Footer = ({
     toggleSettingsDialog,
 }) => (
     <footer className={classNames('footer', {
-        'footer--is-blurred': is_fully_blurred,
+        'footer--is-blurred': (is_fully_blurred || is_route_blurred),
         'footer--show'      : !is_loading || location.pathname !== routes.trade,
     })}
     >
@@ -66,6 +67,7 @@ Footer.propTypes = {
     is_language_dialog_visible: PropTypes.bool,
     is_logged_in              : PropTypes.bool,
     is_positions_drawer_on    : PropTypes.bool,
+    is_route_blurred          : PropTypes.bool,
     is_settings_dialog_on     : PropTypes.bool,
     location                  : PropTypes.object,
     show_positions_toggle     : PropTypes.bool,
@@ -79,6 +81,7 @@ export default withRouter(connect(
         hideFullBlur              : ui.hideFullBlur,
         is_fully_blurred          : ui.is_fully_blurred,
         is_dark_mode              : ui.is_dark_mode_on,
+        is_route_blurred          : ui.is_route_blurred,
         is_logged_in              : client.is_logged_in,
         is_language_dialog_visible: ui.is_language_dialog_on,
         is_loading                : ui.is_loading,

src/javascript/app/App/Containers/Layout/header.jsx

@@ -26,14 +26,15 @@ const Header = ({
     is_loading,
     is_logged_in,
     is_mobile,
+    is_route_blurred,
     is_virtual,
     location,
     loginid,
     onClickUpgrade,
     toggleAccountsDialog,
 }) => (
     <header className={classNames('header', {
-        'header--is-blurred': is_fully_blurred,
+        'header--is-blurred': (is_fully_blurred || is_route_blurred),
         'header--show'      : !is_loading || location.pathname !== routes.trade,
     })}
     >
@@ -94,6 +95,7 @@ Header.propTypes = {
     is_loading          : PropTypes.bool,
     is_logged_in        : PropTypes.bool,
     is_mobile           : PropTypes.bool,
+    is_route_blurred    : PropTypes.bool,
     is_virtual          : PropTypes.bool,
     location            : PropTypes.object,
     loginid             : PropTypes.string,
@@ -116,6 +118,7 @@ export default withRouter(connect(
         is_acc_switcher_on  : ui.is_accounts_switcher_on,
         is_dark_mode        : ui.is_dark_mode_on,
         is_fully_blurred    : ui.is_fully_blurred,
+        is_route_blurred    : ui.is_route_blurred,
         is_mobile           : ui.is_mobile,
         toggleAccountsDialog: ui.toggleAccountsDialog,
     })