diff --git a/src/botPage/bot/TradeEngine/OpenContract.js b/src/botPage/bot/TradeEngine/OpenContract.js
index 6f6a36fe8f..94effe6f64 100644
--- a/src/botPage/bot/TradeEngine/OpenContract.js
+++ b/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) {
diff --git a/src/botPage/bot/broadcast.js b/src/botPage/bot/broadcast.js
index 7ffc8f3d03..4c9a236ac6 100644
--- a/src/botPage/bot/broadcast.js
+++ b/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' });
diff --git a/src/botPage/view/TradeInfoPanel/TradeTable.js b/src/botPage/view/TradeInfoPanel/TradeTable.js
index fe5bdef7b1..adb7881c28 100644
--- a/src/botPage/view/TradeInfoPanel/TradeTable.js
+++ b/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 }) =>
0 ? style.green : style.red}>{value}
;
+const ProfitColor = ({ value }) => 0 ? style.greenLeft : style.redLeft}>{value}
;
+const StatusFormat = ({ value }) => {value}
;
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;
diff --git a/src/botPage/view/TradeInfoPanel/index.js b/src/botPage/view/TradeInfoPanel/index.js
index 20c70827a9..125828dc4c 100644
--- a/src/botPage/view/TradeInfoPanel/index.js
+++ b/src/botPage/view/TradeInfoPanel/index.js
@@ -171,7 +171,7 @@ export default class TradeInfoPanel extends Component {
-
+
diff --git a/src/botPage/view/View.js b/src/botPage/view/View.js
index dbbcca6148..d54b3df8ce 100644
--- a/src/botPage/view/View.js
+++ b/src/botPage/view/View.js
@@ -688,6 +688,6 @@ function renderReactComponents() {
/>,
$('#footer')[0]
);
- ReactDOM.render(, $('#summaryPanel')[0]);
+ ReactDOM.render(, $('#summaryPanel')[0]);
ReactDOM.render(, $('#logTable')[0]);
}
diff --git a/src/botPage/view/style.js b/src/botPage/view/style.js
index 9061ff5507..ca2935034c 100644
--- a/src/botPage/view/style.js
+++ b/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',
diff --git a/static/css/_panel.scss b/static/css/_panel.scss
index 56037bc5df..e4b7dcd604 100644
--- a/static/css/_panel.scss
+++ b/static/css/_panel.scss
@@ -53,7 +53,7 @@ $disabled-color: #F2F2F2;
margin-bottom: 1em;
}
p {
- margin: 0em;
+ margin: 0em;
}
#sync-warning {
font-size: 11px;