Color margin position total depending on margin status #378

bitshares · Oct 10, 2017 · 1e63009 · 1e63009
1 parent f63b01c
commit 1e63009
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 8 deletions.
diff --git a/app/assets/stylesheets/themes/_theme-template.scss b/app/assets/stylesheets/themes/_theme-template.scss
@@ -1308,6 +1308,12 @@
             color: $primary-text-color;
         }
     }
+    span.danger {
+        color: darken($alert-color, 15%);
+    }
+    span.warning {
+        color: darken($warning-color, 15%);
+    }
 }
 
 .olDarkTheme .gate_fee .amount-selector {

diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
@@ -31,6 +31,7 @@ import {Tabs, Tab} from "../Utility/Tabs";
 import AccountOrders from "./AccountOrders";
 import cnames from "classnames";
 import TranslateWithLinks from "../Utility/TranslateWithLinks";
+import { checkMarginStatus } from "common/accountHelper";
 
 class AccountOverview extends React.Component {
 
@@ -60,6 +61,25 @@ class AccountOverview extends React.Component {
         };
     }
 
+    componentWillMount() {
+        this._checkMarginStatus();
+    }
+
+    _checkMarginStatus(props = this.props) {
+        checkMarginStatus(props.account).then(status => {
+            console.log("account margin status:", status);
+            let globalMarginStatus = null;
+            for (let asset in status) {
+                globalMarginStatus = status[asset].statusClass || globalMarginStatus;
+            };
+            this.setState({globalMarginStatus});
+        });
+    }
+
+    componentWillReceiveProps(np) {
+        if (np.account !== this.props.account) this._checkMarginStatus(np);
+    }
+
     shouldComponentUpdate(nextProps, nextState) {
         return (
             !utils.are_equal_shallow(nextProps.balanceAssets, this.props.balanceAssets) ||
@@ -421,13 +441,13 @@ class AccountOverview extends React.Component {
                 hide_asset
             />;
         let marginValue =
-            <TotalBalanceValue
-                noTip
-                balances={Immutable.List()}
-                debt={debt}
-                collateral={collateral}
-                hide_asset
-            />;
+                <TotalBalanceValue
+                    noTip
+                    balances={Immutable.List()}
+                    debt={debt}
+                    collateral={collateral}
+                    hide_asset
+                />;
         let debtValue =
             <TotalBalanceValue
                 noTip
@@ -543,7 +563,7 @@ class AccountOverview extends React.Component {
                                 </AccountOrders>
                             </Tab>
 
-                            <Tab title="account.collaterals" subText={marginValue}>
+                            <Tab title="account.collaterals" subText={<span className={this.state.globalMarginStatus}>{marginValue}</span>}>
                                 <div className="content-block">
                                     <div className="generic-bordered-box">
                                         <CollateralPosition preferredUnit={preferredUnit} className="dashboard-table" callOrders={call_orders} account={account}>

diff --git a/app/lib/common/accountHelper.js b/app/lib/common/accountHelper.js
@@ -0,0 +1,68 @@
+import { FetchChain } from "bitsharesjs/es";
+import { FeedPrice, Asset } from "./MarketClasses";
+
+function checkMarginStatus(account) {
+    return new Promise((res, rej) => {
+        if (!account || (account && !account.get("call_orders", []).size)) return res(null);
+
+        FetchChain("getObject", account.get("call_orders").toArray()).then(call_orders => {
+            let assets = [];
+            call_orders.forEach(a => {
+                let baseId = a.getIn(["call_price", "base", "asset_id"]);
+                let quoteId = a.getIn(["call_price", "quote", "asset_id"]);
+                if (assets.indexOf(baseId) === -1) assets.push(baseId);
+                if (assets.indexOf(quoteId) === -1) assets.push(quoteId);
+            });
+            FetchChain("getAsset", assets).then(assets => {
+                let assetsMap = {};
+                assets.forEach(asset => {
+                    assetsMap[asset.get("id")] = asset.toJS();
+                });
+                let status = {};
+                call_orders.forEach(co => {
+                    let debtAsset = assetsMap[co.getIn(["call_price", "quote", "asset_id"])];
+                    let collateralAsset = assetsMap[co.getIn(["call_price", "base", "asset_id"])];
+                    let sp = debtAsset.bitasset.current_feed.settlement_price;
+                    if (sp.base.asset_id === sp.quote.asset_id) {
+                        status[debtAsset.id] = {ratio: null};
+                    } else {
+                        let collateral = new Asset({
+                            amount: co.get("collateral"),
+                            asset_id: collateralAsset.id,
+                            precision: collateralAsset.precision
+                        });
+                        let debt = new Asset({
+                            amount: co.get("debt"),
+                            asset_id: debtAsset.id,
+                            precision: debtAsset.precision
+                        });
+                        let mr = debtAsset.bitasset.current_feed.maintenance_collateral_ratio / 1000;
+                        let price = new FeedPrice({
+                            priceObject: debtAsset.bitasset.current_feed.settlement_price,
+                            market_base: debtAsset.bitasset.current_feed.settlement_price.quote.asset_id,
+                            sqr: debtAsset.bitasset.current_feed.maximum_short_squeeze_ratio,
+                            assets: assetsMap
+                        });
+                        console.log("price:", price.toReal(), debt.getAmount({real: true}), collateral.getAmount({real: true}));
+                        let current = {ratio: collateral.getAmount({real: true}) / (debt.getAmount({real: true}) / price.toReal())};
+                        console.log(debtAsset.symbol, "ratio", current.ratio);
+                        if (isNaN(current.ratio)) return null;
+                        if (current.ratio < mr) {
+                            current.statusClass = "danger";
+                        } else if (current.ratio < (mr + 0.5)) {
+                            current.statusClass = "warning";
+                        } else {
+                            current.statusClass = null;
+                        }
+                        status[debtAsset.id] = current;
+                    }
+                });
+                res(status);
+            });
+        }).catch(rej);
+    });
+}
+
+export {
+    checkMarginStatus
+};