Contract auto refresh

src/botPage/bot/TradeEngine/OpenContract.js

@@ -1,6 +1,6 @@
 import { roundBalance } from '../../common/tools';
 import { doUntilDone } from '../tools';
-import { contractStatus, contract as broadcastContract } from '../broadcast';
+import { contractStatus, contractSettled, contract as broadcastContract } from '../broadcast';
 import { sell, openContractReceived } from './state/actions';
 
 const AFTER_FINISH_TIMEOUT = 5;
@@ -27,7 +27,9 @@ export default Engine =>
                     contractStatus({
                         id  : 'contract.sold',
                         data: contract.transaction_ids.sell,
+                        contract,
                     });
+                    contractSettled(contract);
                     this.contractId = '';
                     this.updateTotals(contract);
                     if (this.afterPromise) {
@@ -67,7 +69,9 @@ export default Engine =>
             this.unsubscribeOpenContract();
 
             doUntilDone(() => this.api.subscribeToOpenContract(contractId)).then(r => {
-                ({ proposal_open_contract: { id: this.openContractId } } = r);
+                ({
+                    proposal_open_contract: { id: this.openContractId },
+                } = r);
             });
         }
         resetSubscriptionTimeout(timeout = this.getContractDuration() + AFTER_FINISH_TIMEOUT) {

src/botPage/bot/broadcast.js

@@ -4,6 +4,8 @@ export const contract = c => globalObserver.emit('bot.contract', c);
 
 export const contractStatus = c => globalObserver.emit('contract.status', c);
 
+export const contractSettled = c => globalObserver.emit('contract.settled', c);
+
 export const info = i => globalObserver.emit('bot.info', i);
 
 export const notify = (className, message) => globalObserver.emit('Notify', { className, message, position: 'right' });

src/botPage/view/TradeInfoPanel/TradeTable.js

@@ -19,10 +19,18 @@ const getProfit = ({ sell_price: sellPrice, buy_price: buyPrice, currency }) =>
     return '';
 };
 
+const getTimestamp = date => {
+    const buyDate = new Date(date * 1000);
+    return `${buyDate.toISOString().split('T')[0]} ${buyDate.toTimeString().slice(0, 8)} ${
+        buyDate.toTimeString().split(' ')[1]
+    }`;
+};
+
 const minHeight = 290;
 const rowHeight = 25;
 
-const ProfitColor = ({ value }) => <div style={value > 0 ? style.green : style.red}>{value}</div>;
+const ProfitColor = ({ value }) => <div style={value > 0 ? style.greenLeft : style.redLeft}>{value}</div>;
+const StatusFormat = ({ value }) => <div style={style.left}>{value}</div>;
 
 export default class TradeTable extends Component {
     constructor({ accountID }) {
@@ -39,15 +47,18 @@ export default class TradeTable extends Component {
         };
         this.columns = [
             { key: 'timestamp', width: 192, resizable: true, name: translate('Timestamp') },
-            { key: 'reference', width: 142, resizable: true, name: translate('Reference') },
-            { key: 'contract_type', width: 104, resizable: true, name: translate('Trade type') },
-            { key: 'entry_tick', width: 80, resizable: true, name: translate('Entry spot') },
-            { key: 'exit_tick', width: 70, resizable: true, name: translate('Exit spot') },
+            { key: 'reference', width: 110, resizable: true, name: translate('Reference') },
+            { key: 'contract_type', width: 70, resizable: true, name: translate('Trade type') },
+            { key: 'entry_tick', width: 75, resizable: true, name: translate('Entry spot') },
+            { key: 'exit_tick', width: 75, resizable: true, name: translate('Exit spot') },
             { key: 'buy_price', width: 80, resizable: true, name: translate('Buy price') },
             { key: 'profit', width: 80, resizable: true, name: translate('Profit/Loss'), formatter: ProfitColor },
+            { key: 'contract_status', width: 70, resizable: true, name: translate('Status'), formatter: StatusFormat },
         ];
     }
     componentWillMount() {
+        const { api } = this.props;
+
         globalObserver.register('summary.export', () => {
             const accountData = this.state[this.props.accountID];
             if (accountData && accountData.rows.length > 0) {
@@ -68,16 +79,14 @@ export default class TradeTable extends Component {
             if (!info) {
                 return;
             }
-            const buyDate = new Date(info.date_start * 1000);
-            const timestamp = `${buyDate.toISOString().split('T')[0]} ${buyDate.toTimeString().slice(0, 8)} ${
-                buyDate.toTimeString().split(' ')[1]
-            }`;
+            const timestamp = getTimestamp(info.date_start);
             const tradeObj = { reference: info.transaction_ids.buy, ...info, timestamp };
             const { accountID } = tradeObj;
 
             const trade = {
                 ...tradeObj,
-                profit: getProfit(tradeObj),
+                profit         : getProfit(tradeObj),
+                contract_status: translate('Pending'),
             };
 
             const accountStat = this.getAccountStat(accountID);
@@ -93,6 +102,45 @@ export default class TradeTable extends Component {
                 this.setState({ [accountID]: appendRow(trade, accountStat) });
             }
         });
+        globalObserver.register('contract.settled', contract => {
+            this.registerTimeout(api, contract);
+        });
+    }
+    registerTimeout = (api, contract) => {
+        setTimeout(() => {
+            const contractID = contract.contract_id;
+            this.refreshContract(api, contractID);
+        }, 3000);
+    };
+    refreshContract(api, contractID) {
+        api.getContractInfo(contractID).then(r => {
+            const contract = r.proposal_open_contract;
+            const timestamp = getTimestamp(contract.date_start);
+            const tradeObj = { reference: contract.transaction_ids.buy, ...contract, timestamp };
+            const { accountID } = this.props;
+
+            const trade = {
+                ...tradeObj,
+                profit: getProfit(tradeObj),
+            };
+
+            if (trade.is_expired && trade.is_sold && !trade.exit_tick) trade.exit_tick = '-';
+
+            const { id } = this.state[accountID];
+            const rows = this.state[accountID].rows.slice();
+            const updatedRows = rows.map(row => {
+                const { reference } = row;
+                if (reference === trade.reference) {
+                    return {
+                        contract_status: translate('Settled'),
+                        reference,
+                        ...trade,
+                    };
+                }
+                return row;
+            });
+            this.setState({ [accountID]: { id, rows: updatedRows } });
+        });
     }
     rowGetter(i) {
         const { accountID } = this.props;

src/botPage/view/TradeInfoPanel/index.js

@@ -171,7 +171,7 @@ export default class TradeInfoPanel extends Component {
                         <AnimateTrade />
                     </div>
                     <div className="content-row">
-                        <TradeTable accountID={accountID} />
+                        <TradeTable accountID={accountID} api={this.props.api} />
                     </div>
                     <div className="content-row">
                         <Summary accountID={accountID} />

src/botPage/view/View.js

@@ -688,6 +688,6 @@ function renderReactComponents() {
         />,
         $('#footer')[0]
     );
-    ReactDOM.render(<TradeInfoPanel />, $('#summaryPanel')[0]);
+    ReactDOM.render(<TradeInfoPanel api={api} />, $('#summaryPanel')[0]);
     ReactDOM.render(<LogTable />, $('#logTable')[0]);
 }

src/botPage/view/style.js

@@ -75,10 +75,16 @@ export const bottomWarningLink = { textDecoration: 'underline' };
 
 export const green = { color: 'green' };
 
+export const greenLeft = { color: 'green', float: 'left' };
+
 export const red = { color: 'red' };
 
+export const redLeft = { color: 'red', float: 'left' };
+
 export const tradePanelAccount = { float: 'right' };
 
+export const left = { float: 'left' };
+
 export const warningText = {
     'font-size': '12px',
     color      : 'lightgray',

static/css/_panel.scss

@@ -53,7 +53,7 @@ $disabled-color: #F2F2F2;
         margin-bottom: 1em;
     }
     p {
-         margin: 0em;
+        margin: 0em;
     }
     #sync-warning {
         font-size: 11px;