From bc61644ff92199fc3ea2a4f50983ba9abcd4fd82 Mon Sep 17 00:00:00 2001
From: Phil Schalm <pnomolos@gmail.com>
Date: Fri, 5 Jan 2018 10:59:18 -0800
Subject: [PATCH] Add "Maximize Collateral" button to Borrow Modal. (#964)

* Add "Maximize Collateral" button to Borrow Modal.

- Fixes #901

* Improved "Maximize Collateral"

- Move button to a more logical position
- Ensured that the ratio doesn't go above the maximum of 1000
- Include the initial position in the maximized collateral
---
 app/components/Modal/BorrowModal.jsx | 33 +++++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/app/components/Modal/BorrowModal.jsx b/app/components/Modal/BorrowModal.jsx
index 478395a9a..2855a0ec3 100755
--- a/app/components/Modal/BorrowModal.jsx
+++ b/app/components/Modal/BorrowModal.jsx
@@ -183,6 +183,23 @@ class BorrowModalContent extends React.Component {
         this._setUpdatedPosition(newState);
     }
 
+    _maximizeCollateral() {
+        let currentPosition = this.props ? this._getCurrentPosition(this.props) : {};
+        let initialCollateral = 0;
+
+        if (currentPosition.collateral) {
+            initialCollateral = utils.get_asset_amount(currentPosition.collateral, this.props.backing_asset);
+        }
+
+        // Make sure we don't go over the maximum collateral ratio of
+        let maximizedCollateral = Math.floor(Math.min(
+          this.props.backing_balance.get("balance") / utils.get_asset_precision(this.props.backing_asset) + initialCollateral - 10,
+          (this.state.short_amount / this._getFeedPrice()) * 1000.0
+        ));
+
+        this._onCollateralChange(new Object({ amount: maximizedCollateral.toString() }));
+    }
+
     _setUpdatedPosition(newState) {
         this.setState({
             newPosition: (parseFloat(newState.short_amount) / parseFloat(newState.collateral))
@@ -418,18 +435,22 @@ class BorrowModalContent extends React.Component {
                             {errors.collateral_balance ? <div style={{paddingTop: "0.5rem"}}>{errors.collateral_balance}</div> : null}
                         </div>
                         {!isPredictionMarket ? (
-                            <div className={collateralRatioClass}>
-                                <Translate component="label" content="borrow.coll_ratio" />
-                                <input min="0" max="6" step="0.05" onChange={this._onRatioChange.bind(this)} value={collateral_ratio} type="range" disabled={!short_amount}/>
-                                <div className="inline-block">{utils.format_number(collateral_ratio, 2)}</div>
-                                {errors.below_maintenance || errors.close_maintenance ? <div style={{maxWidth: "calc(100% - 50px)"}} className="float-right">{errors.below_maintenance}{errors.close_maintenance}</div> : null}
-                            </div>) : null}
+                            <div>
+                                <div className={collateralRatioClass}>
+                                    <Translate component="label" content="borrow.coll_ratio" />
+                                    <input min="0" max="6" step="0.05" onChange={this._onRatioChange.bind(this)} value={collateral_ratio} type="range" disabled={!short_amount}/>
+                                    <div className="inline-block">{utils.format_number(collateral_ratio, 2)}</div>
+                                    {errors.below_maintenance || errors.close_maintenance ? <div style={{maxWidth: "calc(100% - 50px)"}} className="float-right">{errors.below_maintenance}{errors.close_maintenance}</div> : null}
+                                </div>
+                            </div>
+                          ) : null}
                         <div className="no-padding grid-content button-group no-overflow">
                             <div onClick={this._onSubmit.bind(this)} href className={buttonClass}><Translate content="borrow.adjust" /></div>
                             <div onClick={(e) => {e.preventDefault(); this.setState(this._initialState(this.props));}} href className="button info"><Translate content="wallet.reset" /></div>
                             {/*<Trigger close={this.props.modalId}>
                                 <div className="button"><Translate content="account.perm.cancel" /></div>
                             </Trigger>*/}
+                            <div href className="float-right button info" onClick={this._maximizeCollateral.bind(this)}>Maximize Collateral</div>
                         </div>
                     </div>
                 </form>