Merge pull request #1571 from bitshares/1496_LockedShortPositionCR

Issue 1496 - Locking CR / Debt values on Short Position
bitshares · Jun 7, 2018 · d698904 · d698904
2 parents 99867a6 + 156da22
commit d698904
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 10 deletions.
diff --git a/app/assets/stylesheets/themes/_theme-template.scss b/app/assets/stylesheets/themes/_theme-template.scss
@@ -1975,6 +1975,9 @@
                 .icon.locked > svg > path {
                     fill: $button-bg-color;
                 }
+                .icon.unlocked > svg > path {
+                    fill: $button-bg-color;
+                }
             }
             &.total-value {
                 td {

diff --git a/app/components/Modal/BorrowModal.jsx b/app/components/Modal/BorrowModal.jsx
@@ -20,6 +20,7 @@ import HelpContent from "../Utility/HelpContent";
 import Immutable from "immutable";
 import {ChainStore} from "bitsharesjs/es";
 import {List} from "immutable";
+import Icon from "../Icon/Icon";
 
 /**
  *  Given an account and an asset id, render a modal allowing modification of a margin position for that asset
@@ -139,6 +140,11 @@ class BorrowModalContent extends React.Component {
         ZfApi.publish(this.props.modalId, "close");
     }
 
+    toggleLockedCR(e) {
+        e.preventDefault();
+        this.setState({lockedCR: !this.state.lockedCR ? true : false})
+    }
+
     _onBorrowChange(e) {
         let feed_price = this._getFeedPrice();
         let amount = e.amount.replace(/,/g, "");
@@ -191,18 +197,25 @@ class BorrowModalContent extends React.Component {
             target.value = target.value.replace(/[^0-9.]/g, "");
         }
 
-        // Catch initial decimal input
-        if (target.value.charAt(0) == ".") {
-            target.value = "0.";
-        }
-
         let ratio = target.value;
+        let short_amount;
+        let collateral;
 
-        let newState = {
-            short_amount: this.state.short_amount,
-            collateral: (this.state.short_amount / feed_price * ratio).toFixed(
+        if(this.state.lockedCR) {
+            short_amount = (this.state.collateral * feed_price / ratio).toFixed(
                 this.props.backing_asset.get("precision")
-            ),
+            );
+            collateral = this.state.collateral;
+        } else {
+            short_amount = this.state.short_amount;
+            collateral = (this.state.short_amount / feed_price * ratio).toFixed(
+                this.props.backing_asset.get("precision")
+            )
+        }
+
+        let newState = {
+            short_amount: short_amount,
+            collateral: collateral,
             collateral_ratio: ratio
         };
 
@@ -743,6 +756,9 @@ class BorrowModalContent extends React.Component {
                         ) : null}
 
                         <div className="form-group">
+                            <span style={{position: "absolute", left: 20}}>
+                                <Icon onClick={this.toggleLockedCR.bind(this)} name={!this.state.lockedCR ? "locked" : "unlocked"} size="1_5x" style={{position: "relative", top: -10}} />
+                            </span>
                             <AmountSelector
                                 label="transaction.borrow_amount"
                                 amount={short_amount.toString()}
@@ -755,6 +771,9 @@ class BorrowModalContent extends React.Component {
                             />
                         </div>
                         <div className={collateralClass}>
+                            <span style={{position: "absolute", left: 20}}>
+                                <Icon onClick={this.toggleLockedCR.bind(this)} name={this.state.lockedCR ? "locked" : "unlocked"} size="1_5x" style={{position: "relative", top: -10}} />
+                            </span>
                             <AmountSelector
                                 label="transaction.collateral"
                                 amount={collateral.toString()}
@@ -790,7 +809,7 @@ class BorrowModalContent extends React.Component {
                                         <input
                                             value={
                                                 collateral_ratio == 0
-                                                    ? null
+                                                    ? ""
                                                     : collateral_ratio
                                             }
                                             onChange={this._onRatioChange.bind(